/* ==========================================================================
   ChessGX landing — scoped copy of the sample stylesheet.

   Generated from public/final-samples/brand.css by scoping every rule under
   #cx-landing, so it can load site-wide (shared root layout) without touching
   h1/h2/p/.card/.btn/etc. on the dashboard or admin pages. html/body/:root
   rules became #cx-landing itself; [data-brand]/[data-theme] compound onto it
   rather than looking for a descendant that carries the attribute, because
   in this app those attributes live on the wrapper div, not on <html>.

   Do not hand-edit selectors here — fix public/final-samples/brand.css and
   regenerate (script kept in the session that produced this).
   ========================================================================== */

/* ==========================================================================
   ChessGX — shared brand foundation for the final landing candidates.
   One stylesheet so the ten pages differ in idea, not in craft.

   Three accent families:
     [data-brand="gold"]    warm brass on near-black / warm paper
     [data-brand="blue"]    brand navy + teal on deep navy / cool paper
     [data-brand="indigo"]  the app's Indigo Ascent theme, so the academy
                            sales pages match the dashboard they lead into

   Two themes, both first-class. The logo is NOT tinted with CSS filters —
   each theme swaps to a purpose-made asset, because the navy wordmark on a
   black header is the thing that was invisible before.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---- tokens ------------------------------------------------------------ */

#cx-landing {
  --r-sm: 8px;  --r: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --pad: clamp(20px, 5vw, 48px);
  --maxw: 1560px;
  --t-fast: 160ms;  --t: 220ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --z-nav: 40;  --z-pop: 60;
}

/* gold · dark (default) */
#cx-landing[data-brand="gold"] {
  --bg: #09090C;
  --bg-2: #0F0F14;
  --surface: #14141B;
  --raise: #1B1B24;
  --line: #262631;
  --ink: #F5F2EA;
  --muted: #A9A497;
  --faint: #6F6B60;
  --accent: #E5B454;
  --accent-2: #F2D08A;
  --accent-deep: #B98526;
  --accent-soft: rgba(229, 180, 84, .12);
  --on-accent: #1A1206;
  --good: #4FBF87;
  --warn: #E5A24C;
  --bad: #E4695F;
  --shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}

#cx-landing[data-brand="gold"][data-theme="light"] {
  --bg: #FBF8F2;
  --bg-2: #F4EFE4;
  --surface: #FFFFFF;
  --raise: #FBF7EF;
  --line: #E6DFD0;
  --ink: #1A1712;
  --muted: #5E574A;
  --faint: #918876;
  --accent: #A9761A;
  --accent-2: #8A5F10;
  --accent-deep: #7A5410;
  --accent-soft: rgba(169, 118, 26, .10);
  --on-accent: #FFFFFF;
  --good: #1E8F5F;
  --warn: #A96B14;
  --bad: #B5443C;
  --shadow: 0 30px 60px -38px rgba(60, 44, 12, .4);
}

/* blue · dark */
#cx-landing[data-brand="blue"] {
  --bg: #050A12;
  --bg-2: #08111D;
  --surface: #0D1826;
  --raise: #122234;
  --line: #1E3247;
  --ink: #EAF2FB;
  --muted: #93A8BF;
  --faint: #5E748C;
  --accent: #47A0F5;
  --accent-2: #38D0D8;
  --accent-deep: #2E7FD1;
  --accent-soft: rgba(71, 160, 245, .13);
  --on-accent: #04121F;
  --good: #3FC28C;
  --warn: #E5A24C;
  --bad: #F0736A;
  --shadow: 0 30px 70px -40px rgba(0, 8, 20, .9);
}

#cx-landing[data-brand="blue"][data-theme="light"] {
  --bg: #F7FAFD;
  --bg-2: #EDF3FA;
  --surface: #FFFFFF;
  --raise: #F6FAFF;
  --line: #DCE7F3;
  --ink: #0B1A2B;
  --muted: #4C5F75;
  --faint: #7B8CA1;
  --accent: #12459E;
  --accent-2: #0E7F8C;
  --accent-deep: #0C357C;
  --accent-soft: rgba(18, 69, 158, .09);
  --on-accent: #FFFFFF;
  --good: #17845C;
  --warn: #A2670F;
  --bad: #B23A33;
  --shadow: 0 28px 60px -38px rgba(11, 26, 43, .35);
}

/* indigo · dark — values are the app's dark theme tokens (app/globals.css) */
#cx-landing[data-brand="indigo"] {
  --bg: #020617;
  --bg-2: #080F21;
  --surface: #0F1729;
  --raise: #172136;
  --line: #1D283A;
  --ink: #F8FAFC;
  --muted: #94A3B8;
  --faint: #64748B;
  --accent: #828DF8;
  --accent-2: #A5B4FC;
  --accent-deep: #6366F1;
  --accent-soft: rgba(130, 141, 248, .14);
  --on-accent: #020617;
  --good: #36D399;
  --warn: #FBBD23;
  --bad: #F87272;
  --shadow: 0 30px 70px -40px rgba(2, 6, 23, .9);
}

#cx-landing[data-brand="indigo"][data-theme="light"] {
  --bg: #F8FAFC;
  --bg-2: #F1F5F9;
  --surface: #FFFFFF;
  --raise: #F8FAFF;
  --line: #E1E7EF;
  --ink: #0F1729;
  --muted: #52637A;
  --faint: #7C8BA1;
  --accent: #5048E5;
  --accent-2: #4338CA;
  --accent-deep: #3730A3;
  --accent-soft: rgba(80, 72, 229, .09);
  --on-accent: #FFFFFF;
  --good: #047756;
  --warn: #B35309;
  --bad: #DC2828;
  --shadow: 0 28px 60px -38px rgba(15, 23, 41, .35);
}

/* ---- base -------------------------------------------------------------- */

#cx-landing, #cx-landing * { box-sizing: border-box; }

#cx-landing { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

#cx-landing {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* NOT overflow-x: hidden. `hidden` makes an element scrollable-by-script
     even with no visible scrollbar, so body — having its own non-visible
     overflow — became a second scroll container nested inside <html>. The
     sticky nav then pinned itself to THAT box, and calling window.scrollTo
     (which moves the outer, html-level scroller) left the nav behind: it
     "unstuck" the instant you scrolled the page. `clip` forbids scrolling
     outright, so body never becomes a scroll container and the nav has only
     one scroller — the viewport — to stick to. */
  overflow-x: clip;
}

#cx-landing h1, #cx-landing h2, #cx-landing h3, #cx-landing h4 { margin: 0; line-height: 1.06; letter-spacing: -.022em; text-wrap: balance; font-weight: 800; }
#cx-landing h1 { font-size: clamp(38px, 6.4vw, 76px); }
#cx-landing h2 { font-size: clamp(27px, 3.7vw, 44px); }
#cx-landing h3 { font-size: clamp(19px, 2vw, 24px); letter-spacing: -.01em; }
#cx-landing p { margin: 0; }

/* The editorial face, used deliberately and never for whole paragraphs. */
#cx-landing .serif { font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.005em; }
#cx-landing .serif em { font-style: italic; }

#cx-landing a { color: inherit; }
#cx-landing img { max-width: 100%; display: block; }

#cx-landing .mono { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; }
#cx-landing .num { font-variant-numeric: tabular-nums; }
#cx-landing .accent { color: var(--accent); }
#cx-landing .muted { color: var(--muted); }
#cx-landing .faint { color: var(--faint); }

#cx-landing :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

#cx-landing .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
#cx-landing .narrow { max-width: 780px; }

#cx-landing .kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 16px;
}

#cx-landing .lede { font-size: clamp(16.5px, 1.7vw, 20px); color: var(--muted); max-width: 62ch; }

/* The nav freezes at the top of the viewport, so any anchor jump — the nav
   links, or a script scrolling a section into view — must land far enough
   down that the nav does not cover the thing it just scrolled to. */
#cx-landing section[id] { scroll-margin-top: 76px; }
#cx-landing .section { padding: clamp(56px, 9vw, 116px) 0; }
#cx-landing .section-tight { padding: clamp(38px, 6vw, 72px) 0; }

#cx-landing .rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- logo -------------------------------------------------------------- */
/* Two assets, one shown per theme. A CSS filter cannot rescue a navy mark on
   black — it only makes a muddy one — so the artwork itself changes. */

#cx-landing .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; --logo-h: 30px; }
#cx-landing .logo img { height: var(--logo-h, 30px); width: auto; display: none; }
#cx-landing .hero-mark img { display: none; }

/* Gold brand: brass on dark, brand navy on paper.
   Blue brand: lifted ice-blue on dark, brand navy on paper.
   Indigo brand: the gold mark on dark, brand navy on paper.
   The navy original is never placed on a dark surface. */
/* Applies wherever the mark appears — the nav lockup and the hero mark both. */
#cx-landing[data-brand="gold"] :where(.logo, .hero-mark) .lg-gold, #cx-landing[data-brand="indigo"] :where(.logo, .hero-mark) .lg-gold, #cx-landing[data-brand="blue"] :where(.logo, .hero-mark) .lg-ice, #cx-landing[data-theme="light"] :where(.logo, .hero-mark) .lg-blue { display: block; }
#cx-landing[data-theme="light"] :where(.logo, .hero-mark) .lg-gold, #cx-landing[data-theme="light"] :where(.logo, .hero-mark) .lg-ice { display: none; }

/* The nav logo plays as a film on phones — the big hero film is dropped there
   instead (see .mark-film's own comment), so this is where "the logo is a
   video" actually shows up on a phone. `:not([data-theme="light"])` keeps this
   fully out of light theme's way rather than fighting the lg-blue display rule
   above on specificity: the film is shot on black and `screen`-blended, so on
   paper it would just wash out — light theme keeps the static navy wordmark.

   Sized well past the wordmark's own tiny height (30px/26px) — matching or
   slightly scaling that footprint made the horse mark and "ChessGX" text
   unreadable next to the nav buttons. This is sized off the buttons instead:
   bigger than .btn-sm's 38px min-height, so it reads as the dominant thing in
   the row, not a detail next to it. The row simply grows to fit it. */
#cx-landing .logo-film-box { display: none; }
@media (max-width: 900px) {
  #cx-landing:not([data-theme="light"]) .nav .logo img { display: none; }
  #cx-landing:not([data-theme="light"]) .logo-film-box { display: flex; align-items: center; height: 60px; }
  #cx-landing:not([data-theme="light"]) .logo-film {
    display: block;
    height: 100%; width: auto; aspect-ratio: 848 / 368;
    object-fit: cover; object-position: 50% 50%;
    mix-blend-mode: screen;
    filter: contrast(1.22) brightness(1.06);
    -webkit-mask-image: radial-gradient(ellipse 76% 72% at 42% 50%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 76% 72% at 42% 50%, #000 55%, transparent 100%);
  }
}
@media (max-width: 380px) {
  #cx-landing:not([data-theme="light"]) .logo-film-box { height: 51px; }
}

/* ---- buttons ----------------------------------------------------------- */

#cx-landing .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 12px 22px; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-pill);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
#cx-landing .btn-primary { background: var(--accent); color: var(--on-accent); }
#cx-landing .btn-primary:hover { background: var(--accent-deep); }
#cx-landing .btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
#cx-landing .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
#cx-landing .btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }
#cx-landing .btn-lg { min-height: 54px; padding: 15px 30px; font-size: 17px; }

/* ---- nav --------------------------------------------------------------- */

#cx-landing .nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
#cx-landing .nav-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 13px; }
#cx-landing .nav-links { display: flex; align-items: center; gap: 26px; font-size: 15px; }
#cx-landing .nav-links a { color: var(--muted); text-decoration: none; transition: color var(--t) var(--ease); }
#cx-landing .nav-links a:hover { color: var(--ink); }
#cx-landing .nav-right { display: flex; align-items: center; gap: 10px; }
@media (max-width: 820px) { #cx-landing .nav-links { display: none; } }
@media (max-width: 380px) {
  #cx-landing .nav-in { gap: 10px; }
  #cx-landing .nav-right { gap: 6px; }
  #cx-landing .nav .logo { --logo-h: 26px; }
  #cx-landing .nav .btn-sm { padding-inline: 12px; font-size: 13px; white-space: nowrap; }
}

/* Theme + brand switch, present on every page so both can be judged. */
#cx-landing .switch { display: flex; align-items: center; gap: 6px; }
#cx-landing .switch button {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted); transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
#cx-landing .switch button:hover { color: var(--accent); border-color: var(--accent); }
#cx-landing .switch button svg { width: 17px; height: 17px; }

/* ---- surfaces ---------------------------------------------------------- */

#cx-landing .card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 26px);
}
#cx-landing .card-flat { background: var(--bg-2); }
#cx-landing .measure { max-width: 62ch; }
#cx-landing .grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 720px) { #cx-landing .g-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  #cx-landing .g-3 { grid-template-columns: repeat(3, 1fr); }
  #cx-landing .g-4 { grid-template-columns: repeat(4, 1fr); }
}

#cx-landing .pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
#cx-landing .stack > .pill, #cx-landing .stack > .tag { align-self: flex-start; }
#cx-landing .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  #cx-landing .dot-live { animation: pulse 2s var(--ease) infinite; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- the board --------------------------------------------------------
   Unicode chess glyphs come from whatever font the device happens to have,
   so the same board rendered thin on one machine and cartoonish on another.
   These are the app's own Chessnut SVGs — the pieces a student actually sees
   inside ChessGX — laid over the squares as positioned elements so a move can
   be animated rather than redrawn. */

#cx-landing .board {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .8);
}
#cx-landing .board-sq { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); }
#cx-landing .board-sq i { display: block; position: relative; }
#cx-landing .board-sq i.l { background: #EFE3CC; }
#cx-landing .board-sq i.d { background: #B58863; }
#cx-landing[data-brand="gold"] .board-sq i.l { background: #F2E4C4; }
#cx-landing[data-brand="gold"] .board-sq i.d { background: #B0803C; }
#cx-landing[data-brand="blue"] .board-sq i.l { background: #E4EDF6; }
#cx-landing[data-brand="blue"] .board-sq i.d { background: #6D91B5; }
#cx-landing[data-brand="indigo"] .board-sq i.l { background: #F1F5F9; }
#cx-landing[data-brand="indigo"] .board-sq i.d { background: #94A3B8; }

/* Marks sit under the pieces so a highlight never dims the piece on it. */
#cx-landing .board-mark {
  position: absolute; width: 12.5%; height: 12.5%;
  box-shadow: inset 0 0 0 3px var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
#cx-landing .board-pc {
  position: absolute; width: 12.5%; height: 12.5%;
  display: grid; place-items: center;
  transition: left 420ms var(--ease), top 420ms var(--ease), opacity 200ms linear;
  will-change: left, top;
}
#cx-landing .board-pc img { width: 86%; height: 86%; display: block; }
#cx-landing .board-pc.gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #cx-landing .board-pc { transition: none; } }

/* The last move, shown the way a board shows it. */
#cx-landing .board-trail {
  position: absolute; width: 12.5%; height: 12.5%;
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  transition: left 420ms var(--ease), top 420ms var(--ease), opacity 300ms linear;
}

#cx-landing .board-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; font-size: 13px; color: var(--faint);
}

/* ---- ask → answer ------------------------------------------------------ */
/* The core interaction of several candidates: the question sits at the top,
   the answer resolves underneath it on the SAME screen. Nothing important
   lives below the fold, which is what made the earlier version unreadable on
   a phone. */

#cx-landing .ask {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
#cx-landing .ask-mark { flex-shrink: 0; width: 26px; height: 26px; color: var(--accent); }
#cx-landing .ask-text { flex: 1; min-width: 0; font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; }
#cx-landing .caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--accent); vertical-align: text-bottom;
}
@media (prefers-reduced-motion: no-preference) { #cx-landing .caret { animation: blink 1.05s steps(2) infinite; } }
@keyframes blink { 50% { opacity: 0; } }

#cx-landing .answer {
  margin-top: 14px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
#cx-landing .answer.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #cx-landing .answer { transition: none; opacity: 1; transform: none; }
}
#cx-landing .answer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
#cx-landing .answer-body { padding: 16px; }

#cx-landing .row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
#cx-landing .row:last-child { border-bottom: 0; }
#cx-landing .row-name { font-weight: 600; }
#cx-landing .tag {
  padding: 3px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
}
#cx-landing .tag-good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
#cx-landing .tag-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
#cx-landing .tag-bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }

/* Question chips — the visitor drives the demo instead of watching a loop. */
#cx-landing .chips { display: flex; flex-wrap: wrap; gap: 9px; }
#cx-landing .chip {
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 15px; min-height: 40px; border-radius: var(--r-pill);
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
#cx-landing .chip:hover { color: var(--ink); border-color: var(--accent); }
#cx-landing .chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ---- price ------------------------------------------------------------- */
/* Per student, always. The total is deliberately secondary: it only resolves
   once someone moves the slider, which is the moment they are actually
   sizing a purchase. */

#cx-landing .price-unit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#cx-landing .price-figure { font-size: clamp(44px, 6vw, 68px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
#cx-landing .price-per { font-size: 16px; color: var(--muted); font-weight: 600; }

#cx-landing .slider { width: 100%; margin: 20px 0 6px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
#cx-landing .slider::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--line); }
#cx-landing .slider::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line); }
#cx-landing .slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); cursor: pointer;
}
#cx-landing .slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--bg); cursor: pointer;
}

#cx-landing .total {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r);
  background: var(--bg-2); border: 1px dashed var(--line);
  opacity: .45; transition: opacity var(--t) var(--ease), border-style var(--t) var(--ease);
}
#cx-landing .total.live { opacity: 1; border-style: solid; border-color: var(--accent); }

/* ---- footer ------------------------------------------------------------ */

#cx-landing .foot { border-top: 1px solid var(--line); padding: 34px 0; color: var(--faint); font-size: 14.5px; }
#cx-landing .foot-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

/* ---- utilities --------------------------------------------------------- */

#cx-landing .stack { display: flex; flex-direction: column; }
#cx-landing .gap-s { gap: 10px; } #cx-landing .gap-m { gap: 18px; } #cx-landing .gap-l { gap: 30px; }
#cx-landing .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#cx-landing .center { text-align: center; }
#cx-landing .center .lede, #cx-landing .center .kicker { margin-left: auto; margin-right: auto; }
#cx-landing .hide-sm { display: none; }
@media (min-width: 720px) { #cx-landing .hide-sm { display: revert; } }

/* The sample gated this on a `.js` class set by an inline <head> script,
   before first paint, so a no-JS visitor never got stuck looking at
   permanently-invisible content. This production copy drops that gate: the
   rest of the app already requires JS for everything (dashboard, auth,
   payments), so there is no real no-JS path left to protect here, and
   dropping it avoids re-deriving that head-script trick inside a React tree
   where the wrapper element does not exist yet when <head> parses. */
#cx-landing .reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
#cx-landing .reveal.in { opacity: 1; transform: none; }
/* If the deferred landing runtime is missed or delayed, never leave essential
   marketing content permanently invisible. A healthy runtime sets
   data-runtime-ready immediately and keeps the normal scroll reveals. */
#cx-landing:not([data-runtime-ready="true"]) .reveal {
  animation: cx-landing-reveal-failsafe 1ms linear 1500ms forwards;
}
@keyframes cx-landing-reveal-failsafe { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #cx-landing .reveal { opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   Round three — additions
   ========================================================================== */

/* ---- app window --------------------------------------------------------
   The chrome that made the copilot mock read as software rather than as a
   marketing box: a title bar with real window buttons, a monospace command
   line, and results that arrive as rows. Used for every product surface on
   the page so they read as one application. */

#cx-landing .win {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow);
}
#cx-landing .win-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--raise) 70%, var(--surface));
}
#cx-landing .win-dots { display: flex; gap: 6px; flex-shrink: 0; }
#cx-landing .win-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
#cx-landing .win-dots i:nth-child(1) { background: #E4695F; }
#cx-landing .win-dots i:nth-child(2) { background: #E5B454; }
#cx-landing .win-dots i:nth-child(3) { background: #4FBF87; }
#cx-landing .win-title {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--faint); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cx-landing .win-body { padding: 16px; }
#cx-landing .win-prompt {
  display: flex; gap: 9px; align-items: baseline;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.5; color: var(--ink); margin-bottom: 14px;
}
#cx-landing .win-prompt::before { content: '›'; color: var(--accent); font-weight: 700; }

#cx-landing .res {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; margin-bottom: 8px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
}
#cx-landing .res:last-child { margin-bottom: 0; }
#cx-landing .res-ic {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good);
}
#cx-landing .res-ic svg { width: 15px; height: 15px; }
#cx-landing .res-t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
#cx-landing .res-m { font-size: 12.5px; color: var(--faint); font-family: ui-monospace, Menlo, monospace; flex-shrink: 0; }

/* Sparkline bars — a chart, not a decoration: each bar is a real value. */
#cx-landing .spark { display: flex; align-items: flex-end; gap: 3px; height: 26px; flex-shrink: 0; }
#cx-landing .spark i { width: 6px; border-radius: 2px; background: var(--accent); display: block; opacity: .55; }
#cx-landing .spark i:last-child { opacity: 1; }

/* ---- hero mark ---------------------------------------------------------
   The logo where the film used to be. It carries the brand on its own, at a
   size the film never let it reach, and it costs 100KB instead of 2MB. */

#cx-landing .hero-mark { position: relative; display: inline-block; }
#cx-landing .hero-mark img { height: clamp(64px, 12vw, 132px); width: auto; position: relative; z-index: 1; }
#cx-landing .hero-mark::after {
  content: ''; position: absolute; z-index: 0; inset: -34% 0;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  #cx-landing .hero-mark::after { animation: breathe 7s var(--ease) infinite; }
}
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---- carousel ----------------------------------------------------------
   One slide at a time at every width — a grid of six feature cards is
   unreadable on a phone, and a phone is where this gets opened. Native
   scroll-snap does the work, so it swipes on touch and keeps working with
   JS off; the dots and arrows are the enhancement. */

#cx-landing .car { position: relative; }
#cx-landing .car-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: var(--r-lg);
}
#cx-landing .car-track::-webkit-scrollbar { display: none; }
#cx-landing .car-slide { scroll-snap-align: center; scroll-snap-stop: always; min-width: 0; align-self: start; }
/* The track takes the height of the slide on show. Sizing every slide to the
   tallest one left a third of the panel empty on the short ones — the
   analytics wall is twice the height of a board and a paragraph. */
#cx-landing .car-track { transition: height 320ms var(--ease); }
@media (prefers-reduced-motion: reduce) { #cx-landing .car-track { transition: none; } }

#cx-landing .car-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
#cx-landing .car-dots button {
  width: 34px; height: 34px; padding: 0; cursor: pointer; border: 0; background: none;
  display: grid; place-items: center; border-radius: 50%;
}
#cx-landing .car-dots button::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--faint); transition: background-color var(--t) var(--ease), width var(--t) var(--ease);
}
#cx-landing .car-dots button[aria-current="true"]::before { background: var(--accent); width: 24px; border-radius: 99px; }

#cx-landing .car-arrows { display: flex; gap: 8px; }
#cx-landing .car-arrows button {
  width: 44px; height: 44px; cursor: pointer; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}
#cx-landing .car-arrows button:hover { border-color: var(--accent); color: var(--accent); }
#cx-landing .car-arrows button:disabled { opacity: .35; cursor: default; }
#cx-landing .car-arrows svg { width: 18px; height: 18px; }

/* ---- who uses it -------------------------------------------------------
   Academies and coaches, each a link to their own page. A row of real
   destinations, not a logo wall and emphatically not a scrolling ticker. */

#cx-landing .who { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { #cx-landing .who { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { #cx-landing .who { grid-template-columns: repeat(3, 1fr); } }
#cx-landing .who a {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
#cx-landing .who a:hover { border-color: var(--accent); background: var(--raise); }
#cx-landing .who .crest {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--accent-soft); color: var(--accent);
}
#cx-landing .who .who-n { font-weight: 700; }
#cx-landing .who .who-m { font-size: 13.5px; color: var(--faint); }

/* ==========================================================================
   Round four — full width, motion, and the directory marquee
   ========================================================================== */

/* Full-bleed band inside a centred page. */
#cx-landing .bleed { width: 100%; }
#cx-landing .bleed-in { max-width: none; padding-left: var(--pad); padding-right: var(--pad); }

/* ---- directory marquee -------------------------------------------------
   Academies and coaches drifting sideways. This is NOT the feature ticker
   that was rejected: those were words scrolling past to look busy. These are
   real destinations with a face on them, moving slowly enough to read, and
   the row stops the moment you point at it. */

#cx-landing .marq { position: relative; overflow: hidden; padding: 4px 0; }
#cx-landing .marq::before, #cx-landing .marq::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 140px); z-index: 2;
  pointer-events: none;
}
#cx-landing .marq::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
#cx-landing .marq::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

#cx-landing .marq-track { display: flex; gap: 16px; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  #cx-landing .marq-track { animation: drift var(--marq-dur, 64s) linear infinite; }
  #cx-landing .marq:hover .marq-track, #cx-landing .marq:focus-within .marq-track { animation-play-state: paused; }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Bigger and uniform: a fixed footprint regardless of how long a name or
   meta line runs, so the row reads as a rank of equal cards rather than a
   jumble of different widths. Glass rather than a filled surface — it drifts
   over the section background instead of sitting on top of it as a box. */
#cx-landing .org {
  display: flex; align-items: center; gap: 18px; text-decoration: none;
  flex-shrink: 0; width: 340px; height: 128px; padding: 20px 24px;
  background: color-mix(in srgb, var(--surface) 46%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
#cx-landing .org:hover, #cx-landing .org:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  transform: translateY(-3px);
}
#cx-landing .org-badge {
  position: relative; overflow: hidden;
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px;
  display: grid; place-items: center; background: var(--accent-soft);
}
#cx-landing .org-badge img, #cx-landing .org-badge svg { width: 100%; height: 100%; display: block; }
/* The logo itself moves: a diagonal sheen sweeps across the crest on a loop,
   staggered per card so the row never sweeps in unison. */
#cx-landing .org-badge::after {
  content: ''; position: absolute; inset: -60% -20%;
  background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--accent-2) 65%, white) 50%, transparent 60%);
  transform: translateX(-120%); mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  #cx-landing .org-badge::after { animation: sheen 5.5s ease-in-out infinite; }
  #cx-landing .org:nth-of-type(3n+1) .org-badge::after { animation-delay: 0s; }
  #cx-landing .org:nth-of-type(3n+2) .org-badge::after { animation-delay: 1.6s; }
  #cx-landing .org:nth-of-type(3n)   .org-badge::after { animation-delay: 3.2s; }
}
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
#cx-landing .org > span:last-child { min-width: 0; }
#cx-landing .org-n {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 700; font-size: 17px; line-height: 1.3;
}
#cx-landing .org-m {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; color: var(--faint); margin-top: 4px; line-height: 1.4;
}

/* ---- typing + staged results ------------------------------------------- */

#cx-landing .res.staged { opacity: 0; transform: translateY(8px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
#cx-landing .res.staged.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #cx-landing .res.staged { opacity: 1; transform: none; } }

/* ---- carousel autoplay progress ---------------------------------------- */

#cx-landing .car-dots button { position: relative; }
#cx-landing .car-dots button[aria-current="true"]::after {
  content: ''; position: absolute; left: 5px; right: 5px; bottom: 4px; height: 2px;
  background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 2px;
  transform-origin: left; transform: scaleX(0);
}
@media (prefers-reduced-motion: no-preference) {
  #cx-landing .car:not(.paused) .car-dots button[aria-current="true"]::after {
    animation: fill var(--car-dur, 20s) linear forwards;
  }
}
@keyframes fill { to { transform: scaleX(1); } }

/* ==========================================================================
   Round five — video mark, analytics wall, hover reviews, tier pricing
   ========================================================================== */

/* ---- the film as the mark ----------------------------------------------
   The reveal is shot on black, so `screen` drops its background out and only
   the light of the mark survives. That is what lets the film sit in the page
   instead of sitting in a box on top of it. */

#cx-landing .mark-film {
  position: relative; width: min(560px, 100%); aspect-ratio: 848 / 368;
  margin-left: calc(var(--film-bleed, 6%) * -1);
  margin-bottom: 6px;
}
/* The source clip is now pre-cropped to this exact banner shape (supplied
   already trimmed), so the container just matches it — no bias needed to
   crop empty headroom out of a taller source the way the old 16:9 file
   needed. On a phone the film is dropped entirely rather than shrunk: the
   headline and the ask window are the point, and the video was still a
   scroll's worth of height before either showed. The nav logo carries the
   film on phones instead — see .logo-film below. */
@media (max-width: 900px) { #cx-landing .mark-film { display: none; } }
#cx-landing .mark-film video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block;
  mix-blend-mode: screen;
  /* The film is not shot on pure black — it has a faint lit backdrop, which
     `screen` leaves behind as a visible grey rectangle. Lifting the contrast
     pushes that backdrop down to black, and the mask feathers the frame edges
     so the mark sits in the page instead of in a box. */
  filter: contrast(1.22) brightness(1.06);
  -webkit-mask-image: radial-gradient(ellipse 76% 72% at 42% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 72% at 42% 50%, #000 55%, transparent 100%);
}
#cx-landing[data-theme="light"] .mark-film video {
  /* On paper `screen` would wash the mark out entirely, so the light theme
     shows the still wordmark instead — the film has nothing to sit on. */
  display: none;
}
#cx-landing .mark-film .mark-still { display: none; }
#cx-landing[data-theme="light"] .mark-film { aspect-ratio: auto; margin-left: 0; }
#cx-landing[data-theme="light"] .mark-film .mark-still { display: block; height: clamp(56px, 8vw, 104px); width: auto; }

/* ---- section head: statement left, note right -------------------------- */

#cx-landing .head-split { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: end; margin-bottom: 26px; }
@media (min-width: 900px) { #cx-landing .head-split { grid-template-columns: 1.15fr .85fr; gap: 48px; } }
#cx-landing .head-split .note { color: var(--muted); font-size: 16px; max-width: 52ch; }

/* ---- analytics wall ----------------------------------------------------- */

#cx-landing .wall { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { #cx-landing .wall { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { #cx-landing .wall { grid-template-columns: repeat(3, 1fr); } }
#cx-landing .panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
#cx-landing .panel h4 {
  margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
#cx-landing .panel .big { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
#cx-landing .panel svg { width: 100%; height: auto; display: block; margin-top: 8px; }

/* Card sizing, transparency and the moving crest now live with the rest of
   the .org rules above — the flip-to-review treatment that used to live here
   was removed; the card shows only its face. */

/* ---- analytics slide: a chart draws itself in, once, per visit ---------- */

#cx-landing .panel { padding: 12px 14px; }
#cx-landing .panel svg { width: 100%; height: auto; display: block; margin-top: 6px; }
#cx-landing .draw {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  transition: stroke-dashoffset 1100ms var(--ease) 200ms;
}
#cx-landing .car-slide.is-active .draw { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { #cx-landing .draw { stroke-dashoffset: 0; transition: none; } }

/* ---- tier cards --------------------------------------------------------- */

#cx-landing .tiers { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 780px) { #cx-landing .tiers { grid-template-columns: repeat(3, 1fr); } }
#cx-landing .tier { position: relative; display: flex; flex-direction: column; gap: 14px; }
#cx-landing .tier.popular { border-color: var(--accent); }
#cx-landing .tier-flag {
  position: absolute; top: -11px; left: 22px; padding: 3px 12px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
#cx-landing .tier-rate { display: flex; align-items: baseline; gap: 7px; }
#cx-landing .tier-rate b { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
#cx-landing .tier-total { font-size: 14.5px; color: var(--muted); }
#cx-landing .tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
#cx-landing .tier li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: var(--muted); }
#cx-landing .tier li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--accent); }

#cx-landing .cycle { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); }
#cx-landing .cycle button {
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; min-height: 36px;
  padding: 6px 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
#cx-landing .cycle button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---- per-slide entrance --------------------------------------------------
   Every slide gets some life when it becomes the active one: its rows and
   tags rise in, staggered, rather than simply sitting there while only the
   board plays. Re-triggers every time the slide comes back around, because a
   demonstration that only plays once on first load is not much of one. */

#cx-landing .car-slide .row, #cx-landing .car-slide > .win .cluster > .tag {
  opacity: 0; transform: translateY(7px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
#cx-landing .car-slide.is-active .row, #cx-landing .car-slide.is-active > .win .cluster > .tag {
  opacity: 1; transform: none;
}
#cx-landing .car-slide .row:nth-of-type(1) { transition-delay: 80ms; }
#cx-landing .car-slide .row:nth-of-type(2) { transition-delay: 200ms; }
#cx-landing .car-slide .row:nth-of-type(3) { transition-delay: 320ms; }
#cx-landing .car-slide .row:nth-of-type(4) { transition-delay: 440ms; }
#cx-landing .car-slide .cluster > .tag:nth-of-type(1) { transition-delay: 260ms; }
#cx-landing .car-slide .cluster > .tag:nth-of-type(2) { transition-delay: 360ms; }
#cx-landing .car-slide .cluster > .tag:nth-of-type(3) { transition-delay: 460ms; }
@media (prefers-reduced-motion: reduce) {
  #cx-landing .car-slide .row, #cx-landing .car-slide > .win .cluster > .tag { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Round six — the desk itself, not a slideshow of it
   ========================================================================== */

/* One frame, tabs at the top AND a sidebar on the left — both control the
   same content, because the ask was "make sure both work", not "pick one". */

#cx-landing .product-shell { overflow: hidden; }
#cx-landing .product-bar { flex-wrap: wrap; gap: 10px 18px; }
#cx-landing .tabs { display: flex; gap: 4px; margin-left: auto; }
#cx-landing .tab {
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  border: 0; border-radius: 8px; padding: 7px 13px; background: transparent; color: var(--faint);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
#cx-landing .tab:hover { color: var(--ink); }
#cx-landing .tab.active { color: var(--on-accent); background: var(--accent); }

#cx-landing .product-body { display: grid; grid-template-columns: 200px 1fr; min-height: 420px; }
@media (max-width: 760px) { #cx-landing .product-body { grid-template-columns: 1fr; } }
/* Both control panels are real and both work — but on a phone the top tabs
   and the sidebar-turned-row show the exact same four words twice in a row.
   The sidebar survives (it is the one place any of these six items would
   normally live); the tabs step aside rather than repeating it. */
@media (max-width: 760px) { #cx-landing .product-bar .tabs { display: none; } }

#cx-landing .side-nav {
  border-right: 1px solid var(--line); padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
@media (max-width: 760px) {
  #cx-landing .side-nav { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; padding: 10px 12px; }
}
#cx-landing .side-link {
  display: block; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 600;
  color: var(--faint); text-decoration: none; white-space: nowrap;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
#cx-landing .side-link:hover { color: var(--ink); background: var(--bg-2); }
#cx-landing .side-link.active { color: var(--accent); background: var(--accent-soft); }

#cx-landing .dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
#cx-landing .dash-head h3 { font-size: 21px; margin-bottom: 4px; }
#cx-landing .dash-head p { margin: 0; color: var(--muted); font-size: 14px; }

#cx-landing .dash-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { #cx-landing .dash-grid { grid-template-columns: 1.15fr .85fr; } }

#cx-landing .pane h4 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
}
/* An SVG with only a viewBox (no width/height attributes) sizes itself to
   fill its containing block — the reports pane is wide, so the radar and
   rating charts were blowing up to fill it edge to edge. Cap them the same
   as they were sized inside the carousel's narrower column. */
#cx-landing .pane svg { max-width: 210px; height: auto; display: block; margin: 0 auto; overflow: visible; }

#cx-landing .airow {
  margin-top: 16px; display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--r); border: 1px solid var(--accent);
  background: var(--accent-soft);
}
#cx-landing .airow b { display: block; font-size: 13.5px; }
#cx-landing .airow small { color: var(--muted); font-size: 12.5px; }
#cx-landing .spark-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 14px;
}

/* ---- pricing: four cards, the academy included rather than bolted on ---- */

#cx-landing .tiers { grid-template-columns: 1fr; }
@media (min-width: 700px) { #cx-landing .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { #cx-landing .tiers { grid-template-columns: repeat(4, 1fr); } }
#cx-landing .tier-academy { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
#cx-landing .tier-academy .tier-rate small { display: block; font-size: 13.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }

/* ==========================================================================
   Page-local overrides (formerly a <style> block in <head> in the prototype)
   ========================================================================== */
/* This entire block was missing from the first production cut — the extract
   only pulled <body>, so .hero-grid never got its grid-template-columns and
   the hero silently fell back to normal block flow: the mark and the ask
   window stacked full-width instead of sitting side by side, exactly the
   "horrible" layout that was reported. Scoped the same way as the rest of
   landing.css and appended last, matching its original cascade position. */

#cx-landing .hero { padding: clamp(26px, 4vw, 54px) 0 clamp(48px, 7vw, 84px); }
#cx-landing .hero h1 { font-size: clamp(32px, 4.4vw, 58px); }
#cx-landing .hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 56px); align-items: end; }
@media (min-width: 1000px) { #cx-landing .hero-grid { grid-template-columns: 1.02fr .98fr; } }
#cx-landing .lx { color: var(--accent); font-weight: 800; }
#cx-landing .proof { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 44px); }
#cx-landing .proof div { min-width: 92px; }
#cx-landing .proof b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
#cx-landing .proof span { font-size: 13.5px; color: var(--faint); }
#cx-landing .slide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
#cx-landing .slide-in { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 820px) { #cx-landing .slide-in { grid-template-columns: minmax(260px, 400px) 1fr; gap: 36px; } }
#cx-landing .car-slide .win-body { padding: clamp(18px, 2.2vw, 30px); }
#cx-landing .car-slide .win { min-height: 100%; }
#cx-landing .bars { display: flex; align-items: flex-end; gap: 10px; height: 128px; padding: 8px 0 0; }
#cx-landing .bars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; height: 100%; }
#cx-landing .bars i { width: 100%; border-radius: 6px 6px 0 0; background: var(--accent); opacity: .45; display: block; }
#cx-landing .bars div:last-child i { opacity: 1; }
#cx-landing .bars small { font-size: 11.5px; color: var(--faint); }
#cx-landing .hero .board { max-width: 440px; }
#cx-landing .hero .board-cap { max-width: 440px; }
#cx-landing .hero .win-body { padding: 24px 22px; }
#cx-landing .hero .win-prompt { margin-bottom: 20px; }
#cx-landing .hero .res { padding: 15px 15px; margin-bottom: 14px; }
#cx-landing #trusted .car-track { grid-auto-columns: 100%; gap: 18px; }
@media (min-width: 640px) { #cx-landing #trusted .car-track { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (min-width: 980px) { #cx-landing #trusted .car-track { grid-auto-columns: calc((100% - 54px) / 4); } }
#cx-landing #trusted .car-slide {
  align-self: stretch;
  min-height: var(--trusted-card-height, 280px);
  scroll-snap-align: start;
}
#cx-landing #trusted .trusted-item { height: 100%; min-height: var(--trusted-card-height, 280px); }

/* Ribbon mode: a continuous right-to-left drift instead of paging card by
   card. Overrides the grid/scroll-snap rules above — flex row, doubled
   content, one CSS animation looping via -50% translateX.
   The clip/fade lives on the row wrapper, not the track itself: a percentage
   translate resolves against the track's OWN layout box, so the track must
   be exactly as wide as its (doubled) content — width: max-content, not
   overflow: hidden on itself, or -50% only travels the width of the
   visible viewport instead of one full set of cards. */
#cx-landing #trusted .car.is-marquee .trusted-feature-row.is-unified {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
#cx-landing #trusted .car-track.car-track--marquee {
  display: flex;
  width: max-content;
  grid-auto-columns: unset;
  animation: cx-marquee var(--marquee-dur, 60s) linear infinite;
  will-change: transform;
}
#cx-landing #trusted .car-track.car-track--marquee .car-slide {
  flex: 0 0 260px;
  scroll-snap-align: none;
  min-height: 0;
}
@media (min-width: 640px) {
  #cx-landing #trusted .car-track.car-track--marquee .car-slide { flex-basis: 300px; }
}
@keyframes cx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
#cx-landing #trusted .car.is-marquee:hover .car-track--marquee,
#cx-landing #trusted .car.is-marquee.is-touching .car-track--marquee,
#cx-landing #trusted .car.is-marquee:focus-within .car-track--marquee {
  animation-play-state: paused;
}
#cx-landing #trusted .car.is-marquee .car-arrows,
#cx-landing #trusted .car.is-marquee .car-dots {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  #cx-landing #trusted .car-track.car-track--marquee { animation: none; }
}

#cx-landing .trusted-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
@media (max-width: 639px) {
  #cx-landing .trusted-head > .stack { width: 100%; }
  #cx-landing .trusted-head .car-arrows { margin-left: auto; }
}
#cx-landing .trusted-feature-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 860px) { #cx-landing .trusted-feature-row { grid-template-columns: minmax(300px, 360px) 1fr; align-items: stretch; } }
#cx-landing #trusted .trusted-feature-row.is-unified { display: block; }
#cx-landing .trusted-featured, #cx-landing #trusted .trusted-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
#cx-landing .trusted-featured:hover, #cx-landing .trusted-featured:focus-visible,
#cx-landing #trusted .trusted-item:hover, #cx-landing #trusted .trusted-item:focus-visible { border-color: var(--accent); transform: translateY(-3px); }
#cx-landing .trusted-featured { display: flex; flex-direction: column; gap: 16px; padding: 28px; min-height: var(--trusted-card-height, 280px); }
#cx-landing .trusted-f-avatar, #cx-landing .trusted-avatar {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--f-color, #C9922F), color-mix(in srgb, var(--f-color, #C9922F) 55%, #05050a));
}
#cx-landing .trusted-f-avatar { width: 60px; height: 60px; font-size: 21px; }
#cx-landing .trusted-avatar { width: 48px; height: 48px; font-size: 16px; }
#cx-landing .trusted-avatar.has-logo {
  padding: 6px; overflow: hidden; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
}
#cx-landing .trusted-avatar.has-logo img { width: 100%; height: 100%; object-fit: contain; }
#cx-landing .trusted-f-n { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
#cx-landing .trusted-f-m { font-size: 14px; color: var(--faint); margin-top: 2px; }
#cx-landing .trusted-f-quote { font-size: 15px; line-height: 1.55; color: var(--ink); flex: 1; margin: 0; }
#cx-landing .trusted-f-stars { display: flex; gap: 3px; color: var(--accent); }
#cx-landing .trusted-f-stars svg { width: 16px; height: 16px; }
#cx-landing #trusted .trusted-item { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
#cx-landing .trusted-stars { display: flex; gap: 2px; color: var(--accent); }
#cx-landing .trusted-stars svg { width: 14px; height: 14px; }
#cx-landing .trusted-quote { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); flex: 1; }
#cx-landing .trusted-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
#cx-landing .trusted-who { display: flex; flex-direction: column; }
#cx-landing .trusted-agg-stars { display: flex; gap: 2px; color: var(--accent); }
#cx-landing .trusted-agg-stars svg { width: 15px; height: 15px; }
#cx-landing .trusted-agg-score { font-size: 16px; font-weight: 800; color: var(--ink); }
#cx-landing .trusted-agg-count { font-size: 13px; color: var(--faint); }

/* ==========================================================================
   Round eight — at a glance (spec sheet), trusted-by (static), ledger pricing
   ========================================================================== */

#cx-landing .glance-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) {
  #cx-landing .glance-grid { grid-template-columns: minmax(280px, 420px) 1fr; gap: 44px; align-items: start; }
}
#cx-landing .glance-panel { min-height: 320px; }
@media (min-width: 900px) { #cx-landing .glance-panel { position: sticky; top: 92px; } }
#cx-landing .glance-panel .win-body { min-height: 300px; }

#cx-landing .glance-list { display: flex; flex-direction: column; }
#cx-landing .glance-row {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
  padding: 20px 4px; border: 0; border-top: 1px solid var(--line);
  cursor: pointer; background: transparent; text-align: left; width: 100%;
  font: inherit; color: inherit; border-radius: var(--r-sm);
  transition: background-color var(--t) var(--ease);
}
#cx-landing .glance-list .glance-row:last-child { border-bottom: 1px solid var(--line); }
#cx-landing .glance-row:hover, #cx-landing .glance-row:focus-visible { background: var(--accent-soft); }
#cx-landing .glance-row.active { background: var(--accent-soft); }
#cx-landing .glance-letter {
  font-family: 'Instrument Serif', Georgia, serif; font-size: 28px; line-height: 1.15;
  color: var(--faint); transition: color var(--t) var(--ease);
}
#cx-landing .glance-row.active .glance-letter { color: var(--accent); }
#cx-landing .glance-row > span { display: flex; flex-direction: column; }
#cx-landing .glance-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
#cx-landing .glance-h { display: block; font-size: 17.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 5px; }
#cx-landing .glance-sub { display: block; font-size: 14.5px; color: var(--muted); }
#cx-landing .glance-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; font-size: 12px; letter-spacing: .05em; color: var(--faint); }

#cx-landing .trusted-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
#cx-landing .trusted-item {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
#cx-landing .trusted-item:hover, #cx-landing .trusted-item:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
#cx-landing .trusted-item .org-badge { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; }
#cx-landing .trusted-item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
#cx-landing .trusted-n { display: block; font-weight: 700; font-size: 15px; }
#cx-landing .trusted-m { display: block; font-size: 12.5px; color: var(--faint); margin-top: 2px; }
#cx-landing .trusted-grid .reveal:nth-of-type(2) { transition-delay: 60ms; }
#cx-landing .trusted-grid .reveal:nth-of-type(3) { transition-delay: 120ms; }
#cx-landing .trusted-grid .reveal:nth-of-type(4) { transition-delay: 180ms; }
#cx-landing .trusted-grid .reveal:nth-of-type(5) { transition-delay: 240ms; }
#cx-landing .trusted-grid .reveal:nth-of-type(6) { transition-delay: 300ms; }

#cx-landing .tier-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; margin-bottom: 2px; border-bottom: 1px dashed var(--line);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
#cx-landing .tier-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#cx-landing .tier-includes li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--muted); }
#cx-landing .tier-includes li svg { width: 14px; height: 14px; flex-shrink: 0; align-self: center; color: var(--accent); }
#cx-landing .tier-leader { flex: 1 1 auto; min-width: 10px; border-bottom: 1px dotted var(--line); margin-bottom: 3px; }
#cx-landing .tier-incl { flex-shrink: 0; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
#cx-landing .tier-dash { border: 0; border-top: 1px dashed var(--line); margin: 0; }
#cx-landing .tiers .reveal:nth-of-type(2) { transition-delay: 70ms; }
#cx-landing .tiers .reveal:nth-of-type(3) { transition-delay: 140ms; }
#cx-landing .tiers .reveal:nth-of-type(4) { transition-delay: 210ms; }
#cx-landing .tier { transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
#cx-landing .tier:hover, #cx-landing .tier:focus-within { border-color: var(--accent); transform: translateY(-6px); box-shadow: var(--shadow); }
#cx-landing .tier:hover .tier-includes li, #cx-landing .tier:focus-within .tier-includes li { color: var(--ink); }
#cx-landing .tier-includes li { transition: color var(--t) var(--ease); }

/* ── ChessGX mark and the "Move in" section (2026-10-16) ───────────────── */
#cx-landing .nav .logo.gx-logo img.gx-mark, #cx-landing .logo.gx-logo img.gx-mark { display: block; height: 40px; width: 40px; object-fit: contain; }
#cx-landing .gx-word { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
#cx-landing .gx-word b { color: var(--accent); font-weight: 800; }
/* The reveal video is the hero's backdrop, not a box on the page. The logo
   and wordmark sit above the headline; the stars and the gold floor run on
   behind it. A radial mask fades every edge to nothing, and a screen blend
   drops the video's black into the page. The light theme (where a screen
   blend washes out) and reduced motion show the still mark instead.
   Frame map: logo ~15-56% of the height, wordmark ~57-75%, floor below. */
#cx-landing .hero .stack { position: relative; }
#cx-landing .gx-hero-mark { --gx-w: clamp(440px, 58vw, 860px); position: relative; z-index: 0; width: 100%; height: calc(var(--gx-w) * 0.5625 * 0.62); pointer-events: none; }
#cx-landing .gx-hero-mark .gx-reveal {
  position: absolute; left: calc(var(--gx-w) * -0.14); top: calc(var(--gx-w) * 0.5625 * -0.13);
  width: var(--gx-w); max-width: none; height: auto; mix-blend-mode: screen; opacity: .95;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
}
#cx-landing .hero .stack > :not(.gx-hero-mark) { position: relative; z-index: 1; }
#cx-landing .hero h1 { text-shadow: 0 2px 28px rgba(0, 0, 0, .75); }
#cx-landing .gx-hero-mark .gx-still { display: none; width: clamp(150px, 18vw, 240px); height: auto; filter: drop-shadow(0 14px 34px rgba(229, 180, 84, .28)); }
@media (max-width: 860px) { #cx-landing .gx-hero-mark { --gx-w: 128vw; } #cx-landing .gx-hero-mark .gx-reveal { left: -18vw; } }
@media (prefers-reduced-motion: reduce) { #cx-landing .gx-hero-mark { height: auto; } #cx-landing .gx-hero-mark .gx-reveal { display: none; } #cx-landing .gx-hero-mark .gx-still { display: block; } }
#cx-landing[data-theme="light"] .gx-hero-mark { height: auto; }
#cx-landing[data-theme="light"] .gx-hero-mark .gx-reveal { display: none; }
#cx-landing[data-theme="light"] .gx-hero-mark .gx-still { display: block; }
#cx-landing .gx-cta { gap: 12px; margin-top: 6px; flex-wrap: wrap; }
#cx-landing .gx-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { #cx-landing .gx-steps { grid-template-columns: minmax(0, 1fr); } }
#cx-landing .gx-step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 18px; }
#cx-landing .gx-step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; margin-bottom: 12px; }
#cx-landing .gx-step h3 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
#cx-landing .gx-step p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.55; }
#cx-landing .gx-step p b { color: var(--ink); font-weight: 600; }
#cx-landing .gx-step .gx-step-foot { margin-top: 12px; font-size: 13px; color: var(--faint); }
#cx-landing .gx-movein-note { margin-top: 18px; color: var(--muted); }
#cx-landing .gx-movein-note a { color: var(--accent); text-decoration: none; }

/* ── One logo at a time, a four-step hero, two copilot demos (2026-10-20) ──
   The reveal video is the only mark on the first screen. The nav mark stays
   out of sight until the hero mark has scrolled away (landing.js sets
   data-past-hero), then fades in with the tagline. Visibility rides along
   with opacity so the hidden link can't take keyboard focus. */
/* At the top the nav carries only the tagline; the mark and wordmark slide
   in ahead of it once the hero reveal has scrolled away. On narrow screens
   there is room for one or the other, so the tagline gives way to the mark. */
#cx-landing .nav .logo.gx-logo img.gx-mark { height: 52px; width: 52px; }
#cx-landing .nav .gx-word { font-size: 24px; }
#cx-landing .gx-logo { gap: 0; }
#cx-landing .gx-brand {
  display: flex; align-items: center; gap: 12px; overflow: hidden; max-width: 260px;
  transition: max-width 480ms var(--ease), opacity 360ms var(--ease), margin 480ms var(--ease);
}
#cx-landing .gx-tagline {
  font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden;
  padding-left: 16px; margin-left: 16px; border-left: 1px solid var(--line); max-width: 320px;
  transition: max-width 480ms var(--ease), opacity 360ms var(--ease), padding 480ms var(--ease), margin 480ms var(--ease), border-color 360ms var(--ease);
}
#cx-landing .gx-tagline b { color: var(--accent); font-weight: 800; }
#cx-landing:not([data-past-hero]) .gx-brand { max-width: 0; opacity: 0; }
#cx-landing:not([data-past-hero]) .gx-tagline { padding-left: 0; margin-left: 0; border-left-color: transparent; color: var(--ink); }
@media (max-width: 1180px) {
  #cx-landing[data-past-hero] .gx-tagline { max-width: 0; opacity: 0; padding-left: 0; margin-left: 0; border-left-color: transparent; }
}
@media (max-width: 420px) { #cx-landing .gx-tagline { font-size: 13px; } #cx-landing .nav .logo.gx-logo img.gx-mark { height: 42px; width: 42px; } #cx-landing .nav .gx-word { font-size: 20px; } }

#cx-landing .hero-grid { align-items: center; }

/* The four-step setup window */
#cx-landing .gx-setup .win-bar { position: relative; }
#cx-landing .gx-clock { margin-left: auto; font: 600 13px/1 ui-monospace, Menlo, monospace; color: var(--accent); padding: 4px 9px; border-radius: var(--r-pill); background: var(--accent-soft); font-variant-numeric: tabular-nums; }
#cx-landing .gx-ss-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#cx-landing .gx-ss {
  display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 14px;
  padding: 14px 15px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-2);
  transition: border-color 320ms var(--ease), background-color 320ms var(--ease), opacity 320ms var(--ease);
}
#cx-landing .gx-ss-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--raise); color: var(--muted); font-weight: 800; transition: background-color 320ms var(--ease), color 320ms var(--ease); }
#cx-landing .gx-ss-t b { display: block; font-size: 15.5px; }
#cx-landing .gx-ss-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.45; }
#cx-landing .gx-ss-t code { font: inherit; color: var(--ink); font-weight: 600; }
#cx-landing .gx-ss-st { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--good); opacity: 0; transform: scale(.6); transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
#cx-landing .gx-ss-st svg { width: 16px; height: 16px; }
#cx-landing .gx-ss.run { border-color: var(--accent); background: var(--accent-soft); }
#cx-landing .gx-ss.run .gx-ss-n { background: var(--accent); color: var(--on-accent); }
#cx-landing .gx-ss.run .gx-ss-st { opacity: 1; transform: none; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); }
#cx-landing .gx-ss.run .gx-ss-st svg { display: none; }
#cx-landing .gx-ss.done .gx-ss-n { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
#cx-landing .gx-ss.done .gx-ss-st { opacity: 1; transform: none; background: color-mix(in srgb, var(--good) 16%, transparent); }
#cx-landing [data-setup-running] .gx-ss:not(.run):not(.done) { opacity: .5; }
@media (prefers-reduced-motion: no-preference) { #cx-landing .gx-ss.run .gx-ss-st { animation: gx-spin .8s linear infinite; } }
@keyframes gx-spin { to { transform: rotate(360deg); } }
#cx-landing .gx-ss-bar { height: 4px; border-radius: 4px; background: var(--raise); overflow: hidden; margin-top: 18px; }
#cx-landing .gx-ss-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); border-radius: inherit; transition: width 120ms linear; }
#cx-landing .gx-ss-foot { justify-content: space-between; margin-top: 16px; }
#cx-landing .gx-ss-foot .faint { font-size: 13.5px; }
#cx-landing .hero .gx-setup .win-body { padding: 20px; }

/* Copilot sections: chat on one side, the answer on the other */
#cx-landing .gx-sec-head { gap: 12px; margin-bottom: 30px; }
#cx-landing .gx-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 980px) {
  #cx-landing .gx-duo { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 28px; }
  #cx-landing .gx-duo-flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
  #cx-landing .gx-duo-flip .gx-chat { order: 2; }
  #cx-landing .gx-duo .gx-chat { position: sticky; top: 92px; }
}
#cx-landing .gx-chat .win-body { padding: 20px; }
#cx-landing .gx-chat-log { display: flex; flex-direction: column; gap: 12px; min-height: 150px; }
#cx-landing .gx-msg { margin: 0; padding: 12px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; max-width: 92%; }
#cx-landing .gx-msg-me { align-self: flex-end; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 600; border-bottom-right-radius: 4px; }
#cx-landing .gx-msg-ai { align-self: flex-start; background: var(--raise); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; min-height: 46px; }
#cx-landing .gx-dots { display: none; gap: 4px; padding: 6px 2px; }
#cx-landing .gx-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .35; }
#cx-landing .is-asking .gx-dots { display: inline-flex; }
#cx-landing .is-asking [data-ask-reply] { display: none; }
#cx-landing .gx-msg-me .caret { display: none; }
#cx-landing .is-asking .gx-msg-me .caret { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  #cx-landing .gx-dots i { animation: gx-dot 1s ease-in-out infinite; }
  #cx-landing .gx-dots i:nth-child(2) { animation-delay: .15s; }
  #cx-landing .gx-dots i:nth-child(3) { animation-delay: .3s; }
}
@keyframes gx-dot { 40% { opacity: 1; transform: translateY(-3px); } }
#cx-landing .gx-try { margin: 20px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
#cx-landing .gx-chat .chip { text-align: left; }

#cx-landing .gx-result { position: relative; min-height: 380px; }
#cx-landing .gx-result > .answer { margin-top: 0; box-shadow: var(--shadow); }
#cx-landing .gx-result > [hidden] { display: none !important; }
#cx-landing .gx-result::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, var(--accent-soft) 50%, transparent 70%) var(--surface);
  background-size: 220% 100%; border: 1px solid var(--line); transition: opacity 200ms var(--ease);
}
#cx-landing .is-asking .gx-result::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { #cx-landing .is-asking .gx-result::before { animation: gx-shimmer 1.2s linear infinite; } }
@keyframes gx-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
#cx-landing .gx-speed { color: var(--accent); font-family: ui-monospace, Menlo, monospace; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

#cx-landing .gx-ans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
@media (min-width: 640px) { #cx-landing .gx-ans { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); } }
#cx-landing .gx-ans .board { max-width: 300px; margin-inline: auto; }
#cx-landing .gx-ans-side .airow { margin-top: 14px; }
#cx-landing .gx-puz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#cx-landing .gx-puz-i { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); font-size: 13.5px; font-weight: 600; }
#cx-landing .gx-puz-i b { color: var(--accent); }
#cx-landing .gx-puz-i small { margin-left: auto; color: var(--faint); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
#cx-landing .gx-puz-i.on { border-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  #cx-landing .answer.in .gx-puz-i { animation: gx-pop 380ms var(--ease) both; }
  #cx-landing .answer.in .gx-puz-i:nth-child(2) { animation-delay: 70ms; }
  #cx-landing .answer.in .gx-puz-i:nth-child(3) { animation-delay: 140ms; }
  #cx-landing .answer.in .gx-puz-i:nth-child(4) { animation-delay: 210ms; }
  #cx-landing .answer.in .gx-puz-i:nth-child(5) { animation-delay: 280ms; }
  #cx-landing .answer.in .gx-puz-i:nth-child(6) { animation-delay: 350ms; }
}
@keyframes gx-pop { from { opacity: 0; transform: translateY(6px); } }

@media (min-width: 640px) { #cx-landing .gx-dossier { grid-template-columns: 1fr 1fr; } }
#cx-landing .gx-dossier + .airow { margin-top: 14px; }
#cx-landing .gx-legend { display: flex; gap: 18px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
#cx-landing .gx-legend span { display: inline-flex; align-items: center; gap: 7px; }
#cx-landing .gx-legend i { width: 10px; height: 10px; border-radius: 3px; }
#cx-landing .gx-legend i.a, #cx-landing .gx-cmp i.a { background: var(--accent); }
#cx-landing .gx-legend i.b, #cx-landing .gx-cmp i.b { background: color-mix(in srgb, var(--ink) 38%, transparent); }
#cx-landing .gx-cmp { display: grid; gap: 14px; }
#cx-landing .gx-cmp-r { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; }
#cx-landing .gx-cmp-r > div { display: grid; gap: 4px; }
#cx-landing .gx-cmp-r i { display: block; height: 9px; border-radius: 5px; width: var(--v); }
@media (prefers-reduced-motion: no-preference) {
  #cx-landing .gx-cmp-r i { transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease); }
  #cx-landing .answer.in .gx-cmp-r i { transform: none; }
}
#cx-landing .gx-cmp + .airow { margin-top: 18px; }
#cx-landing .gx-demo-note { font-size: 13.5px; margin-top: 22px; }

/* The hero window's second act: the academy it just built, as a small
   working ChessGX. Both acts share one grid cell so the window keeps one
   height and the page never jumps when it switches. */
#cx-landing .gx-stage { display: grid; }
#cx-landing .gx-stage > * { grid-area: 1 / 1; min-width: 0; transition: opacity 420ms var(--ease), visibility 0s linear 420ms; }
#cx-landing .gx-stage-app { opacity: 0; visibility: hidden; }
#cx-landing [data-phase="app"] .gx-stage-setup { opacity: 0; visibility: hidden; }
#cx-landing [data-phase="app"] .gx-stage-app { opacity: 1; visibility: visible; transition-delay: 0s; }
#cx-landing [data-phase="app"] .gx-clock { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
#cx-landing .gx-mini { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
#cx-landing .gx-mini-nav { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--bg-2); }
#cx-landing .gx-mini-nav button {
  display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 10px; border-radius: 10px;
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid transparent;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
#cx-landing .gx-mini-nav button svg { width: 17px; height: 17px; flex-shrink: 0; }
#cx-landing .gx-mini-nav button:hover { color: var(--ink); }
#cx-landing .gx-mini-nav button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
#cx-landing .gx-mini-nav .gx-mini-replay { margin-top: auto; font-size: 12.5px; color: var(--faint); }
#cx-landing .gx-mini-main { padding: 18px; min-width: 0; }
#cx-landing .gx-mini-v[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { #cx-landing .gx-mini-v { animation: gx-pop 380ms var(--ease) both; } }
#cx-landing .gx-mini-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
#cx-landing .gx-mini-h b { font-size: 16px; }
#cx-landing .gx-mini-sub { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
#cx-landing .gx-mini-sub b { color: var(--ink); }
#cx-landing .gx-mini .row { padding: 8px 0; font-size: 14px; }
#cx-landing .gx-mini .row-name { display: flex; align-items: center; gap: 9px; }
#cx-landing .gx-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--f-color); }
#cx-landing .gx-mini-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 10px; }
#cx-landing .gx-mini .board { border-radius: 10px; }
#cx-landing .gx-meter { height: 6px; border-radius: 6px; background: var(--raise); overflow: hidden; margin-bottom: 6px; }
#cx-landing .gx-meter i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
#cx-landing .gx-evalwrap { display: grid; grid-template-columns: 8px 1fr; gap: 6px; }
#cx-landing .gx-eval { position: relative; border-radius: 4px; background: #2a2a33; overflow: hidden; }
#cx-landing .gx-eval i { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: #F2E4C4; transition: height 900ms var(--ease); }
#cx-landing .gx-mini-v[data-mini-view="review"]:not([hidden]) .gx-eval i { height: 96%; transition-delay: 1.1s; }
#cx-landing .gx-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
#cx-landing .gx-moves li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
#cx-landing .gx-moves span { color: var(--faint); font-weight: 500; }
#cx-landing .gx-moves em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
#cx-landing .gx-moves .bad { border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
#cx-landing .gx-moves .bad em { color: var(--bad); }
#cx-landing .gx-moves .good { border-color: color-mix(in srgb, var(--good) 50%, transparent); }
#cx-landing .gx-moves .good em { color: var(--good); }
#cx-landing .gx-mini .airow { margin-top: 12px; padding: 10px 12px; }
#cx-landing .gx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 6px; }
#cx-landing .gx-kpis span { padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
#cx-landing .gx-kpis b { display: block; font-size: 22px; font-weight: 800; }
#cx-landing .gx-kpis small { font-size: 12px; color: var(--faint); }
#cx-landing .gx-mini .bars { height: 150px; }
@media (max-width: 560px) {
  #cx-landing .gx-mini { grid-template-columns: minmax(0, 1fr); }
  #cx-landing .gx-mini-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  #cx-landing .gx-mini-nav button { flex-shrink: 0; }
  #cx-landing .gx-mini-nav .gx-mini-replay { margin-top: 0; }
  #cx-landing .gx-mini-split { grid-template-columns: minmax(0, 1fr); }
  #cx-landing .gx-mini .board { max-width: 260px; margin-inline: auto; }
  #cx-landing .gx-stage { align-items: start; }
}

/* The trusted-by ribbon clips its edges, and a hovered card lifts 3px —
   straight into the clip. Give the lift room inside the clip. */
#cx-landing #trusted .car.is-marquee .trusted-feature-row.is-unified { padding-block: 8px; margin-block: -8px; }
#cx-landing #trusted .car-track.car-track--marquee { overflow: visible; }

/* Reports view: the charts were capped for a narrow column and sat tiny in
   the wide pane. */
#cx-landing #expDash .pane svg { max-width: 320px; }

/* Boards: the classic pieces on the familiar green board (2026-10-20). The
   pieces are react-chessboard's defaults, rendered to /piece/classic/. */
#cx-landing[data-brand="gold"] .board-sq i.l { background: #EEEED2; }
#cx-landing[data-brand="gold"] .board-sq i.d { background: #769656; }
#cx-landing .board-trail { background: rgba(246, 246, 105, .55); }
#cx-landing .board-mark { box-shadow: inset 0 0 0 3px rgba(246, 246, 105, .9); background: rgba(246, 246, 105, .28); }
#cx-landing .board-pc img { width: 100%; height: 100%; }

/* Footer: the mark and wordmark, with the tagline beside them. */
#cx-landing .gx-foot-logo { gap: 12px; color: inherit; }
#cx-landing .gx-foot-logo .gx-word { font-size: 20px; }
#cx-landing .gx-foot-tag { color: var(--muted); padding-left: 12px; border-left: 1px solid var(--line); }
@media (max-width: 520px) { #cx-landing .gx-foot-tag { display: none; } }