/*
Theme Name: LLM Status
Theme URI: https://github.com/christopherdeck/llmstatus-website
Author: Christopher Deck
Author URI: https://github.com/christopherdeck
Description: Single-page marketing and Stripe checkout landing page for LLM Status, a cross-platform tray/menu-bar app (Windows, macOS, Android) that shows usage, quota, and spend across AI provider accounts. Sets the WordPress front page; no page builder or additional plugins required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: llm-status
*/

/* ---------- Design tokens ---------- */
:root {
  --llmstatus-bg: #e7e7ee;
  --llmstatus-surface: #ffffff;
  --llmstatus-accent: #4F46E5;
  --llmstatus-accent-tint: #EEF0FF;
  --llmstatus-ink-1: #111119;
  --llmstatus-ink-2: #15161E;
  --llmstatus-body-1: #5B5B66;
  --llmstatus-body-2: #6B6B75;
  --llmstatus-muted: #9A9AA6;
  --llmstatus-border-1: #EEEEF2;
  --llmstatus-border-2: #ECECF3;
  --llmstatus-border-3: #E4E4EC;
  --llmstatus-border-4: #F4F4F8;
  --llmstatus-success-text: #2E7D5B;
  --llmstatus-success-bg: #EAF7F0;
  --llmstatus-chip-bg: #F7F7FB;
  --llmstatus-chip-text: #3A3A44;
  --llmstatus-track-bg: #F0F0F5;
  --llmstatus-bar-1: #C7C4F7;
  --llmstatus-bar-2: #4F46E5;
  --llmstatus-bar-3: #8B85EE;
  --font-display: 'Manrope', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body.llmstatus-page {
  margin: 0;
  background: var(--llmstatus-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--llmstatus-ink-2);
}

body.llmstatus-page a { color: inherit; text-decoration: none; }
body.llmstatus-page h1,
body.llmstatus-page p { margin: 0; }
body.llmstatus-page img { max-width: 100%; }

.llmstatus-shell {
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--llmstatus-surface);
  box-shadow: 0 1px 3px rgba(20, 20, 40, 0.08);
  overflow: hidden;
}

/* ---------- Buttons ---------- */
.llmstatus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  text-align: center;
}

.llmstatus-btn--nav {
  padding: 9px 18px;
  background: var(--llmstatus-ink-2);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 7px;
}

.llmstatus-btn--accent {
  padding: 14px 26px;
  background: var(--llmstatus-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
}

.llmstatus-btn--accent .llmstatus-btn__note {
  opacity: 0.7;
  font-size: 13px;
  font-weight: 600;
}

.llmstatus-btn--block {
  width: 100%;
  padding: 14px;
  background: var(--llmstatus-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
}

/* ---------- Logo mark (3-bar glyph) ---------- */
.llmstatus-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--llmstatus-accent-tint);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 7px 0 6px;
  flex: none;
}

.llmstatus-logo-mark span {
  width: 4px;
  background: var(--llmstatus-accent);
  border-radius: 1px;
}

.llmstatus-logo-mark span:nth-child(1) { height: 8px; }
.llmstatus-logo-mark span:nth-child(2) { height: 14px; }
.llmstatus-logo-mark span:nth-child(3) { height: 10px; }

/* ---------- Nav ---------- */
.llmstatus-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 64px;
  border-bottom: 1px solid var(--llmstatus-border-1);
}

.llmstatus-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.llmstatus-nav__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--llmstatus-ink-2);
  letter-spacing: -0.01em;
}

.llmstatus-nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.llmstatus-nav__text-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.llmstatus-nav__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--llmstatus-body-1);
  transition: color 0.15s ease;
}

.llmstatus-nav__link:hover,
.llmstatus-nav__link:focus-visible { color: var(--llmstatus-accent); }

/* ---------- Hero ---------- */
.llmstatus-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 88px 64px 56px;
  gap: 22px;
}

.llmstatus-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--llmstatus-accent);
  background: var(--llmstatus-accent-tint);
  padding: 6px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

.llmstatus-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--llmstatus-ink-1);
  max-width: 820px;
}

.llmstatus-hero__subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: var(--llmstatus-body-1);
  max-width: 560px;
}

.llmstatus-hero__cta { margin-top: 6px; }

.llmstatus-success-banner {
  font-size: 15px;
  font-weight: 600;
  color: var(--llmstatus-success-text);
  background: var(--llmstatus-success-bg);
  padding: 14px 22px;
  border-radius: 8px;
}

.llmstatus-hero__caption {
  font-size: 13px;
  color: var(--llmstatus-muted);
}

/* ---------- Flyout mockup ---------- */
.llmstatus-mockup-wrap {
  display: flex;
  justify-content: center;
  padding: 0 64px 96px;
}

.llmstatus-mockup {
  width: 420px;
  background: var(--llmstatus-surface);
  border: 1px solid var(--llmstatus-border-3);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(30, 30, 60, 0.14);
  overflow: hidden;
}

.llmstatus-mockup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--llmstatus-border-1);
}

.llmstatus-mockup__title { font-size: 13px; font-weight: 700; color: var(--llmstatus-ink-2); }
.llmstatus-mockup__updated { font-size: 11px; color: var(--llmstatus-muted); }

.llmstatus-mockup__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--llmstatus-border-4);
}

.llmstatus-mockup__row:last-child { border-bottom: none; }

.llmstatus-mockup__row-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.llmstatus-mockup__row-name { font-weight: 600; color: #22222C; }
.llmstatus-mockup__row-status { color: var(--llmstatus-muted); }

.llmstatus-mockup__track {
  height: 6px;
  background: var(--llmstatus-track-bg);
  border-radius: 3px;
  overflow: hidden;
}

.llmstatus-mockup__fill {
  height: 100%;
  background: var(--llmstatus-accent);
  border-radius: 3px;
}

/* ---------- Features ---------- */
.llmstatus-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--llmstatus-border-1);
  border-top: 1px solid var(--llmstatus-border-1);
  border-bottom: 1px solid var(--llmstatus-border-1);
}

.llmstatus-features__item {
  background: var(--llmstatus-surface);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.llmstatus-feature-icon {
  width: 32px;
  height: 22px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.llmstatus-feature-icon span { width: 5px; border-radius: 1px; }
.llmstatus-feature-icon span:nth-child(1) { height: 8px; background: var(--llmstatus-bar-1); }
.llmstatus-feature-icon span:nth-child(2) { height: 16px; background: var(--llmstatus-bar-2); }
.llmstatus-feature-icon span:nth-child(3) { height: 12px; background: var(--llmstatus-bar-3); }

.llmstatus-features__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--llmstatus-ink-2);
}

.llmstatus-features__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--llmstatus-body-2);
}

/* ---------- Providers ---------- */
.llmstatus-providers {
  padding: 72px 64px;
  text-align: center;
}

.llmstatus-providers__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--llmstatus-ink-2);
  margin-bottom: 10px;
}

.llmstatus-providers__subtitle {
  font-size: 15px;
  color: var(--llmstatus-body-2);
  margin-bottom: 32px;
}

.llmstatus-providers__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.llmstatus-chip {
  padding: 9px 16px;
  background: var(--llmstatus-chip-bg);
  border: 1px solid var(--llmstatus-border-2);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--llmstatus-chip-text);
}

/* ---------- Pricing ---------- */
.llmstatus-pricing-wrap {
  display: flex;
  justify-content: center;
  padding: 0 64px 88px;
}

.llmstatus-pricing-card {
  width: 400px;
  border: 1px solid var(--llmstatus-border-2);
  border-radius: 14px;
  padding: 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.llmstatus-pricing__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--llmstatus-accent);
  background: var(--llmstatus-accent-tint);
  padding: 5px 12px;
  border-radius: 20px;
}

.llmstatus-pricing__price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.llmstatus-pricing__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--llmstatus-ink-1);
}

.llmstatus-pricing__term { font-size: 14px; color: var(--llmstatus-muted); }

.llmstatus-pricing__desc {
  font-size: 14px;
  color: var(--llmstatus-body-2);
  line-height: 1.6;
}

.llmstatus-purchased-pill {
  width: 100%;
  padding: 14px;
  background: var(--llmstatus-success-bg);
  color: var(--llmstatus-success-text);
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
}

/* ---------- Footer ---------- */
.llmstatus-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 64px;
  border-top: 1px solid var(--llmstatus-border-1);
  font-size: 13px;
  color: var(--llmstatus-muted);
}

.llmstatus-footer__credit {
  font-weight: 600;
  color: var(--llmstatus-body-1);
  transition: color 0.15s ease;
}

.llmstatus-footer__credit:hover,
.llmstatus-footer__credit:focus-visible { color: var(--llmstatus-accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .llmstatus-nav,
  .llmstatus-hero,
  .llmstatus-features__item,
  .llmstatus-providers,
  .llmstatus-mockup-wrap,
  .llmstatus-pricing-wrap,
  .llmstatus-footer { padding-left: 32px; padding-right: 32px; }

  .llmstatus-hero { padding-top: 64px; padding-bottom: 40px; }
  .llmstatus-hero__title { font-size: 40px; }

  .llmstatus-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .llmstatus-nav,
  .llmstatus-hero,
  .llmstatus-features__item,
  .llmstatus-providers,
  .llmstatus-mockup-wrap,
  .llmstatus-pricing-wrap,
  .llmstatus-footer { padding-left: 20px; padding-right: 20px; }

  .llmstatus-nav__text-links { display: none; }

  .llmstatus-hero { padding-top: 48px; padding-bottom: 32px; gap: 18px; }
  .llmstatus-hero__title { font-size: 32px; }
  .llmstatus-hero__subtitle { font-size: 16px; }

  .llmstatus-mockup-wrap { padding-bottom: 64px; }
  .llmstatus-mockup { width: 100%; box-sizing: border-box; }

  .llmstatus-features { grid-template-columns: 1fr; }
  .llmstatus-features__item { padding: 28px 24px; }

  .llmstatus-providers { padding-top: 56px; padding-bottom: 56px; }
  .llmstatus-providers__title { font-size: 24px; }

  .llmstatus-pricing-wrap { padding-bottom: 64px; }
  .llmstatus-pricing-card { width: 100%; box-sizing: border-box; padding: 28px 24px; }
  .llmstatus-pricing__price { font-size: 36px; }

  .llmstatus-footer { flex-direction: column; gap: 10px; text-align: center; }
}