/* Landing page, re-themed onto the blog redesign's palette.  PREVIEW BUILD.
 *
 * style.css is 280 KB and defines 54 custom properties in :root, which is the
 * whole reason this is tractable: almost every colour, font and radius on the
 * landing page reads from a token rather than being written out. So this file
 * does not restyle 257 rules — it repoints the tokens at the --fa-* set that
 * blog.css already defines, and then fixes the handful of places that bypass
 * them.
 *
 * Load order: blog.css (defines --fa-*), style.css, then this.
 *
 * Scope: everything here is deliberately global for the tokens but the
 * structural overrides below are confined to #guest-view — the logged-out
 * marketing page. The signed-in dashboard, scout cards and Butler widget live
 * outside that element and are not touched.
 */

/* ── 1. The token remap ──────────────────────────────────────────────────── */
/* Each old token now resolves to its nearest redesign equivalent, so the
   entire page follows the light/dark toggle instead of being dark-only. */
:root {
  --accent:            var(--fa-accent);
  --accent-2:          var(--fa-accentLight);
  --accent-blue:       var(--fa-accent);
  --accent-blue-light: var(--fa-accentLight);
  --accent-purple:     var(--fa-accent);
  --accent-purple-light: var(--fa-accentLight);
  --accent-cyan:       var(--fa-accentLight);
  --accent-soft:       var(--fa-surface);

  --bg:         var(--fa-bg);
  --bg-1:       var(--fa-surface);
  --bg-2:       var(--fa-surface);
  --bg-3:       var(--fa-surface);
  --bg-dark:    var(--fa-hero);
  --bg-darker:  var(--fa-hero);
  --panel:      var(--fa-surface);
  --panel-2:    var(--fa-surface);
  --modal-bg:   var(--fa-surface);

  --ink:        var(--fa-ink);
  --ink-dim:    var(--fa-body);
  --ink-mute:   var(--fa-muted);
  --fg:         var(--fa-ink);
  --fg-dim:     var(--fa-body);
  --fg-mute:    var(--fa-muted);
  --text-primary:   var(--fa-ink);
  --text-secondary: var(--fa-body);
  --text-muted:     var(--fa-muted);

  --stroke:         var(--fa-line);
  --line:           var(--fa-line);
  --line-strong:    var(--fa-line);
  --surface-border: var(--fa-line);
  --modal-border:   var(--fa-line);
  --glass-border:   var(--fa-line);
  --surface-light:  var(--fa-surface);
  --surface-glass:  var(--fa-surface);
  --glass-bg:       var(--fa-surface);

  /* The handoff's rule is that separation is hairlines and ground shifts, with
     no shadows anywhere. These three tokens are how style.css spends shadows,
     so neutralising them here removes most of 123 rules without editing one. */
  --glow:            none;
  --shadow-premium:  none;
  --shadow-glow:     none;
  --shadow-lg:       none;

  /* 10/6/20px rounded corners and a glassy blur are the old look. The redesign
     is square-ish: 4px, or nothing. */
  --radius:     4px;
  --radius-sm:  4px;
  --radius-lg:  4px;
  --blur-md:    0px;

  --font-ui:   'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ── 1b. The block that actually matters ─────────────────────────────────── */
/* style.css redefines sixteen of these tokens on `#guest-view` itself (and
   again on `:root[data-theme="light"] #guest-view`). An ID selector outranks
   `:root`, so the remap above loses inside precisely the element being
   re-themed — which is why the headline, prices and feature icons stayed
   indigo while the rest of the page turned teal. Restated at the same
   specificity, and after, so these win. */
#guest-view,
:root[data-theme="light"] #guest-view,
:root[data-theme="dark"] #guest-view {
  --bg:          var(--fa-bg);
  --bg-1:        var(--fa-surface);
  --bg-2:        var(--fa-surface);
  --bg-3:        var(--fa-surface);
  --line:        var(--fa-line);
  --line-strong: var(--fa-line);
  --fg:          var(--fa-ink);
  --fg-dim:      var(--fa-body);
  --fg-mute:     var(--fa-muted);
  --accent:      var(--fa-accent);
  --accent-2:    var(--fa-accentLight);
  --accent-soft: var(--fa-surface);
  --pos:         var(--fa-tagGuide);
  --pos-soft:    var(--fa-surface);
  --amber:       var(--fa-tagTips);
  --neg:         #e5405a;
}

/* ── 1c. Accent on a pale ground ─────────────────────────────────────────── */
/* On the light theme's white ground, --fa-accentLight (#5FC4CC) only reaches
   2.05:1. Eyebrows outside the hero take the full-strength accent instead. */
:root[data-theme="light"] #guest-view .eyebrow b,
:root[data-theme="light"] #guest-view .eyebrow { color: var(--fa-accent); }

/* ── 1d. The hero is a card, in both themes ──────────────────────────────── */
/* It was pinned to --fa-hero, which is a dedicated near-black ground: #0F1419
   in light, #080B0A in dark. On the blog that is right, because the article
   header runs full-bleed and reads as its own surface. Here the hero is a
   contained box beside the scout panel, so that token produced a dark
   rectangle stranded on a #F6F6F2 page in light mode and, worse, a panel
   DARKER than the #0D1110 page in dark mode — a hole punched in the layout.
   It takes --fa-surface instead, the same lift every card on the blog uses,
   so it sits a step above the page in both themes rather than fighting it. */
#guest-view .hero {
  background-color: var(--fa-surface);
  border: 1px solid var(--fa-line);
  color: var(--fa-ink);
  /* It had padding: 0, which was correct while it had no background — the
     content simply sat on the page. Giving it a surface and a border without
     padding put the headline 1px from the edge. The scout panel beside it uses
     18px; the hero is the larger block and carries display type, so it takes
     more, and the blog's own 28px gutter is the floor. */
  padding: 40px 40px 34px;
}
#guest-view .hero h1,
#guest-view .hero h2,
#guest-view .hero b,
#guest-view .hero strong { color: var(--fa-ink); }
#guest-view .hero p,
#guest-view .hero li,
#guest-view .hero .sub { color: var(--fa-body); }
#guest-view .ticker { background: var(--fa-bg); margin-top: 36px; }
#guest-view .ticker, #guest-view .ticker * { color: var(--fa-body); }
/* The accent keeps its full strength on this ground in both themes. */
#guest-view .hero .accent { background-image: none; color: var(--fa-accent); -webkit-text-fill-color: var(--fa-accent); }

/* The scout panels were glass: a transparent background plus a blurred
   backdrop and a white hairline. Neutralising the blur left them with no
   ground at all and a white border on a near-white page — invisible. They
   take a real surface and the theme's hairline, like every card on the blog. */
#guest-view .panel,
#guest-view .panels > * {
  background: var(--fa-surface) !important;
  border: 1px solid var(--fa-line) !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* 18px read tight beside the hero's 40. These are smaller blocks so they do
     not need to match it, but they should not look starved next to it. */
  padding: 22px 22px 20px !important;
}
#guest-view .panel-head,
#guest-view .panel-status,
#guest-view .panel-time,
#guest-view .panel-meta-row,
#guest-view .panel-was { color: var(--fa-muted); }
#guest-view .panel-route,
#guest-view .panel-price { color: var(--fa-ink); }

/* ── 1e. Accent on a white ground ────────────────────────────────────────── */
/* --fa-accentLight is #5FC4CC in light mode. It is built to sit on the dark
   hero, and on #FFFFFF it measures 1.96:1 — below the 3:1 floor for large
   text, let alone body. Everything that uses it OUTSIDE the dark hero takes
   the full-strength --fa-accent (#0E7C86) instead, which clears it. */
:root[data-theme="light"] #guest-view .section-eyebrow,
:root[data-theme="light"] #guest-view .panel-progress-row span,
:root[data-theme="light"] #guest-view .panel-discount,
:root[data-theme="light"] #guest-view .lf-drop { color: var(--fa-accent); }

/* Amber stars measured 2.62:1. --fa-tagTips is the theme's own amber and is
   two steps darker in light mode. */
:root[data-theme="light"] #guest-view .hfm-card-stars { color: var(--fa-tagTips); }

/* White on --fa-accent is 2.86:1 in dark mode. --fa-btn is the token meant for
   a filled button and is darker, which clears 3:1. */
#guest-view .price-cta {
  background: var(--fa-btn) !important;
  color: var(--fa-btnInk) !important;
}

/* ── 2. Typography ───────────────────────────────────────────────────────── */
/* style.css sets Inter Tight directly in 18 places rather than via --font-ui,
   so body and headings are restated. Display type is Space Grotesk, matching
   every heading on the blog. */
#guest-view,
#guest-view p,
#guest-view li,
#guest-view span,
#guest-view a {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
#guest-view h1,
#guest-view h2,
#guest-view h3,
#guest-view .stat-value,
#guest-view .lf-price {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -.03em;
  font-weight: 600;
}
#guest-view h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.04; color: var(--fa-ink); }
#guest-view h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.12; color: var(--fa-ink); }
#guest-view h3 { font-size: 19px; color: var(--fa-ink); }

/* Numerals and labels in mono, the way the blog sets counts and dates. */
#guest-view .strip .stat-label,
#guest-view .lf-route,
#guest-view .lf-meta,
#guest-view .eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--fa-muted);
}

/* ── 3. What the tokens cannot reach ─────────────────────────────────────── */
/* 40 places write #6366f1 literally. These are the ones that show on the
   logged-out page; the rest sit inside the dashboard and are left alone. */
#guest-view [style*="6366f1"],
#guest-view .btn-primary,
#guest-view .cta-primary {
  background: var(--fa-btn) !important;
  border-color: var(--fa-btn) !important;
  color: var(--fa-btnInk) !important;
}
#guest-view .btn-primary:hover,
#guest-view .cta-primary:hover { background: var(--fa-btnHover) !important; }

/* Gradients were the old signature — indigo into violet. The redesign has no
   gradients at all: a flat dark ground carries the same weight. */
#guest-view [class*="gradient"],
#guest-view .hero,
#guest-view .strip {
  background-image: none !important;
}

/* Shadows again, this time where they are written inline rather than tokenised. */
#guest-view * { box-shadow: none !important; }

/* Buttons take the blog's pill geometry. */
#guest-view .btn,
#guest-view button.primary,
#guest-view .cta-primary {
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
}

/* The last piece the tokens cannot reach: two fixed full-viewport layers that
   paint an indigo radial wash and a violet grid behind everything. Written as
   literal hex, so no remap touches them. The redesign's ground is flat. */
#guest-view .bg-field { background: none !important; }
#guest-view .bg-grid  { opacity: .18; }

/* The wordmark's plane is an INLINE svg in index.html with
   stroke="var(--accent-gold)" — a presentation attribute, which any CSS rule
   outranks. --accent-gold is not remapped globally on purpose: it is used 48
   times in style.css, almost all of it inside the signed-in dashboard, and
   this overlay does not touch that.
   --fa-accent rather than --fa-accentLight, because this sits on the page
   ground (#FAFAF8 / #0D1110), not on the dark hero: accentLight is 1.96:1 on
   a white header. --fa-accent adapts per theme and clears in both. */
#guest-view .brand-mark .bm-body { fill: var(--fa-accent); }
#guest-view .brand-mark .bm-line { stroke: var(--fa-accent); }

/* Cards: hairline and a ground shift, no glass, no blur. */
#guest-view .card,
#guest-view .lf-card,
#guest-view .feature,
#guest-view .plan {
  background: var(--fa-surface);
  border: 1px solid var(--fa-line);
  border-radius: 4px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 760px) {
  #guest-view h1 { font-size: clamp(30px, 8.4vw, 40px); }
  #guest-view h2 { font-size: 24px; }
  /* 40px of gutter on each side of a 375px screen leaves 295px for a display
     headline. The blog narrows to 20px on a phone for the same reason. */
  #guest-view .hero { padding: 26px 22px 24px; }
  #guest-view .panel, #guest-view .panels > * { padding: 16px 16px 14px; }
}