/*
 * The crostream.io landing page (overrides/home.html). Every rule is under
 * .cs-landing, so nothing here reaches the docs pages. The palette is the
 * site's (extra.css section 1): midnight violet surfaces, and a gradient
 * that runs from live pink through Twitch purple to the app's signal blue.
 * Units are px because the theme scales the root font size.
 */

/* The page: full-bleed, its own background and base type. */
.md-main__inner:has(.cs-landing) {
  max-width: none;
  margin: 0;
  padding: 0;
}

.md-content:has(.cs-landing) {
  min-width: 0;
  max-width: none;
}

.cs-landing {
  --bg: #070B17;
  --bg-2: #0B1126;
  --surface: #111A33;
  --tile: #0F1730;
  --code: #0A1022;
  --border: #1F2C50;
  --text: #E8EDF8;
  --muted: #A0ABC8;
  --step: #7D8AB0;
  --cyan: #38D3FF;
  --primary: #3D7EFF;
  --deep: #2F5BFF;
  --amber: #F5B748;
  --green: #34D399;
  --live: #FF3D5A;
  --grad: linear-gradient(90deg, var(--cyan), var(--primary) 55%, var(--deep));
  --grad-2: linear-gradient(90deg, var(--cyan), var(--primary));
  --radius: 14px;
  --wrap: 1140px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
  isolation: isolate;
  overflow-x: clip;
  background: var(--bg);
  background-image:
    radial-gradient(60rem 30rem at 12% -8%, rgba(61, 126, 255, .18), transparent 70%),
    radial-gradient(50rem 30rem at 95% 2%, rgba(61, 126, 255, .14), transparent 70%),
    radial-gradient(40rem 26rem at 60% 55%, rgba(56, 211, 255, .05), transparent 70%),
    linear-gradient(160deg, var(--bg), var(--bg-2));
  background-repeat: no-repeat;
  color: var(--text);
  font: 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss03";
  letter-spacing: normal;
}

.cs-landing *,
.cs-landing *::before,
.cs-landing *::after { box-sizing: border-box; }

.cs-landing .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.cs-landing ::selection { background: rgba(61, 126, 255, .45); color: #fff; }
.cs-landing :focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; border-radius: 6px; }
.cs-landing a { color: #7EA6FF; text-underline-offset: .2em; }
.cs-landing a:hover { color: #8FB8FF; }
.cs-landing img,
.cs-landing svg { max-width: 100%; height: auto; }
.cs-landing code { font-family: var(--mono); font-size: .86em; }
.cs-landing p code,
.cs-landing li code { background: rgba(61, 126, 255, .14); padding: .1em .38em; border-radius: 5px; }

.cs-landing h1 { font-size: clamp(40px, 4.6vw, 60px); line-height: 1.02; margin: 0 0 24px; letter-spacing: -.035em; font-weight: 800; }
.cs-landing h2 { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -.025em; font-weight: 750; }
.cs-landing h3 { font-size: 18.4px; margin: 0 0 8px; letter-spacing: -.01em; }
.cs-landing .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- hero ---- */
.cs-landing .hero-band { position: relative; overflow: hidden; }
.cs-landing .hero-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 35%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 35%, #000 25%, transparent 75%);
}
.cs-landing .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-top: 84px;
  padding-bottom: 72px;
}
/* Hero headlines break only where the markup says: each .h1-line is one
   line, kept whole on anything wider than a phone. Other headings and
   ledes are balanced so no word is left alone on the last line. */
.cs-landing .h1-line { display: block; }
.cs-landing .h1-line.grad { width: fit-content; }
.cs-landing h1,
.cs-landing h2,
.cs-landing h3 { text-wrap: balance; }
.cs-landing p { text-wrap: pretty; }
@media (min-width: 761px) {
  .cs-landing .h1-line { white-space: nowrap; }
}
.cs-landing .eyebrow-pill {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9.6px;
  margin: 0 0 26px;
  padding: 6.4px 16px 6.4px 10.4px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #C9D3EA;
  font-size: 12.16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cs-landing .eyebrow-pill img { display: block; border-radius: 5px; }
.cs-landing .lede { margin: 0; color: var(--muted); font-size: 19px; line-height: 1.6; }
.cs-landing .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.cs-landing .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11.2px 21px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, filter .15s, transform .15s;
}
.cs-landing .btn:hover { border-color: var(--primary); color: var(--text); transform: translateY(-1px); }
.cs-landing .btn svg { width: 18px; height: 18px; flex: none; }
.cs-landing .btn-primary {
  border: 0;
  background: linear-gradient(90deg, #1FB6FF, #3D7EFF 50%, #2F6BFF);
  box-shadow: 0 10px 30px -10px rgba(61, 126, 255, .7);
  color: #fff;
}
.cs-landing .btn-primary:hover { filter: brightness(1.12); color: #fff; }
.cs-landing .pills { display: flex; flex-wrap: wrap; gap: 6.4px; list-style: none; padding: 0; margin: 36px 0 0; }
.cs-landing .pills li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.cs-landing .pills svg { width: 14px; height: 14px; flex: none; fill: currentcolor; }
.cs-landing .pill-twitch svg { color: #A970FF; }
.cs-landing .pill-obs svg { color: #E8E8F4; }
.cs-landing .pill-discord svg { color: #7C8CFF; }
.cs-landing .pill-steam svg { color: #8FB4FF; }

.cs-landing .hero-visual {
  position: relative;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(17, 26, 51, .72);
  box-shadow: 0 40px 120px -40px rgba(61, 126, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.cs-landing .hero-visual::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 25px;
  background: var(--grad);
  opacity: .35;
  filter: blur(18px);
}
.cs-landing .hero-visual svg { display: block; width: 100%; }

/* The home hero's headline scales with its column so its longest line
   ("CroStream catches it for you.", about 13em wide) always fits on one
   line above phone width; phones let it wrap. */
.cs-landing .hero { container-type: inline-size; }
@media (min-width: 761px) {
  .cs-landing .hero h1 { font-size: clamp(36px, calc(100cqi / 13.6), 64px); }
}
/* Two columns: the headline spans the hero, then the copy sits beside
   the animation. */
@media (min-width: 1001px) {
  .cs-landing .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); row-gap: 0; align-items: start; }
  .cs-landing .hero .hero-copy { display: contents; }
  .cs-landing .hero h1 { grid-column: 1 / -1; grid-row: 1; margin-bottom: 28px; }
  .cs-landing .hero .hero-copy > :not(h1) { grid-column: 1; }
  .cs-landing .hero .hero-visual { grid-column: 2; grid-row: 2 / span 3; align-self: center; }
}

/* The hero animation: one 8s loop. Each stage shows from its keyframe to
   the loop's end, so the scene builds up and then resets together. */
.cs-landing .hv-panel { fill: #0E1529; stroke: #243461; stroke-width: 1; }
.cs-landing .hv-head { font: 700 10px var(--mono); letter-spacing: .12em; fill: #7D8AB0; }
.cs-landing .hv-rule { stroke: #1B2748; }
.cs-landing .hv-live { fill: var(--live); animation: hv-pulse 1.6s ease-in-out infinite; }
.cs-landing .hv-msg,
.cs-landing .hv-msg text { font: 500 11.5px "Inter", system-ui, sans-serif; }
.cs-landing .hv-t { fill: #C9D3EA; font-weight: 400; }
.cs-landing .hv-n1 { fill: #38D3FF; font-weight: 700; }
.cs-landing .hv-n2 { fill: #5B95FF; font-weight: 700; }
.cs-landing .hv-n3 { fill: #F2AE3D; font-weight: 700; }
.cs-landing .hv-n4 { fill: #34D399; font-weight: 700; }
.cs-landing .hv-mono { font-family: var(--mono); }
.cs-landing .hv-cmd { fill: rgba(61, 126, 255, .22); stroke: #3D7EFF; }
.cs-landing .hv-cmdtext { font-size: 11px; font-weight: 700; fill: #DCE8FF; }
.cs-landing .hv-reply { fill: rgba(61, 126, 255, .1); stroke: rgba(61, 126, 255, .45); }
.cs-landing .hv-badge { fill: #3D7EFF; }
.cs-landing .hv-badgetext { font: 700 9.5px "Inter", system-ui, sans-serif; fill: #fff; }
.cs-landing .hv-url { font-size: 10.5px; fill: #7EA6FF; text-decoration: underline; }
.cs-landing .hv-input { fill: #0A1022; stroke: #1F2C50; }
.cs-landing .hv-placeholder { font: 400 10.5px "Inter", system-ui, sans-serif; fill: #5A6B92; }
.cs-landing .hv-wire { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 12; animation: hv-flow 1.1s linear infinite; }
.cs-landing .hv-trig { fill: rgba(61, 126, 255, .16); stroke: rgba(61, 126, 255, .6); }
.cs-landing .hv-trigtext { font-size: 10px; font-weight: 700; fill: #CFE0FF; }
.cs-landing .hv-step { fill: #111A33; stroke: #1F2C50; }
.cs-landing .hv-step-on { fill: rgba(61, 126, 255, .14); stroke: #3D7EFF; }
.cs-landing .hv-num { fill: #172447; stroke: #2E4478; }
.cs-landing .hv-numtext { font: 700 10px var(--mono); fill: #C9D3EA; }
.cs-landing .hv-steptext { font: 600 12px "Inter", system-ui, sans-serif; fill: #E8EDF8; }
.cs-landing .hv-prov { fill: rgba(232, 232, 244, .08); stroke: rgba(232, 232, 244, .25); }
.cs-landing .hv-prov--tw { fill: rgba(169, 112, 255, .16); stroke: rgba(169, 112, 255, .55); }
.cs-landing .hv-provtext { font: 600 9.5px "Inter", system-ui, sans-serif; fill: #D3DBEE; }
.cs-landing .hv-ok { fill: #34D399; }
.cs-landing .hv-tick { fill: none; stroke: #070B17; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-landing .hv-onair { fill: var(--live); }
.cs-landing .hv-onairtext { font: 800 9.5px "Inter", system-ui, sans-serif; fill: #fff; letter-spacing: .08em; }
.cs-landing .hv-grid line { stroke: rgba(56, 211, 255, .35); stroke-width: 1; }
.cs-landing .hv-mtn { fill: #0F1D3F; }
.cs-landing .hv-mtn--b { fill: #132650; }
.cs-landing .hv-floor { fill: rgba(7, 11, 23, .35); }
.cs-landing .hv-flash { fill: #fff; opacity: 0; animation: hv-flash 6s linear infinite; }
.cs-landing .hv-toastbg { fill: rgba(7, 11, 23, .85); stroke: rgba(52, 211, 153, .6); }
.cs-landing .hv-recdot { fill: #34D399; }
.cs-landing .hv-toasttext { font: 600 10.5px "Inter", system-ui, sans-serif; fill: #E8EDF8; }

.cs-landing .hv-s1 { animation: hv-s1 6s ease-out var(--d, 0s) infinite both; }
.cs-landing .hv-s2 { animation: hv-s2 6s ease-out var(--d, 0s) infinite both; }
.cs-landing .hv-s3 { animation: hv-s3 6s ease-out var(--d, 0s) infinite both; }
.cs-landing .hv-s4 { animation: hv-s4 6s ease-out var(--d, 0s) infinite both; }
.cs-landing .hv-s5 { animation: hv-s5 6s ease-out var(--d, 0s) infinite both; }
.cs-landing .hv-toast { animation: hv-toast 6s ease-out var(--d, 0s) infinite both; }

/* The hero cycles through four scenes (!clip, a raid, a channel point
   reward, a follow), 6s each. Each scene's steps run on the scene's own
   delay (--d), so every scene plays from its start. */
.cs-landing .hv-sc { opacity: 0; animation: hv-scene 24s linear var(--d, 0s) infinite both; }
.cs-landing .hv-sc1 { --d: 0s; }
.cs-landing .hv-sc2 { --d: 6s; }
.cs-landing .hv-sc3 { --d: 12s; }
.cs-landing .hv-sc4 { --d: 18s; }
@keyframes hv-scene { 0% { opacity: 0; } 1.5%, 23.5% { opacity: 1; } 25%, 100% { opacity: 0; } }
.cs-landing .hv-event { fill: rgba(169, 112, 255, .14); stroke: rgba(169, 112, 255, .55); }
.cs-landing .hv-eventtext { font-size: 10.5px; font-weight: 700; fill: #E2D4FF; }
.cs-landing .hv-prov--ov { fill: rgba(56, 211, 255, .12); stroke: rgba(56, 211, 255, .5); }
.cs-landing .hv-prov--tool { fill: rgba(245, 183, 72, .12); stroke: rgba(245, 183, 72, .5); }
.cs-landing .hv-catcam { fill: #3A2A1E; }
.cs-landing .hv-catcamdot { fill: #F5B748; }
.cs-landing .hv-catcamears { fill: none; stroke: #F5B748; stroke-width: 3; stroke-linejoin: round; }
.cs-landing .hv-catcamtext { font: 800 13px "Inter", system-ui, sans-serif; letter-spacing: .14em; fill: #FFE2A8; }

@keyframes hv-s1 { 0%, 8% { opacity: 0; } 12%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hv-s2 { 0%, 20% { opacity: 0; } 24%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hv-s3 { 0%, 34% { opacity: 0; } 38%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hv-s4 { 0%, 48% { opacity: 0; } 52%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hv-s5 { 0%, 56% { opacity: 0; } 61%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hv-toast { 0%, 22% { opacity: 0; } 26%, 72% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes hv-flash { 0%, 21% { opacity: 0; } 23% { opacity: .55; } 30%, 100% { opacity: 0; } }
@keyframes hv-flow { to { stroke-dashoffset: -36; } }
@keyframes hv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- sections ---- */
.cs-landing .section { padding-top: 64px; padding-bottom: 64px; }
.cs-landing .kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  color: var(--step);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.cs-landing .kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--grad); }
.cs-landing h2[id] { scroll-margin-top: 120px; }
.cs-landing .section-lede { max-width: 54rem; margin: 0; color: var(--muted); font-size: 17.6px; }
.cs-landing .section-lede strong { color: var(--text); }

/* compare */
.cs-landing .compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 32px 0 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(17, 26, 51, .7);
}
.cs-landing .compare > div { padding: 26px 26px 18px; }
.cs-landing .compare > div + div { border-left: 1px solid var(--border); background: linear-gradient(135deg, rgba(61, 126, 255, .08), rgba(61, 126, 255, .04)); }
.cs-landing .compare h3 { margin: 0 0 16px; }
.cs-landing .compare .tag {
  padding: 2.4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--step);
  font-size: 11.2px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cs-landing .compare > div + div .tag { border-color: rgba(61, 126, 255, .6); color: #8FB8FF; }
.cs-landing .compare ul { list-style: none; margin: 0; padding: 0; }
.cs-landing .compare li { position: relative; margin: 0 0 16px; padding-left: 22px; color: var(--muted); }
.cs-landing .compare li strong { color: var(--text); }
.cs-landing .compare li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--step);
}
.cs-landing .compare > div + div li::before { background: var(--grad-2); box-shadow: 0 0 10px rgba(61, 126, 255, .6); }
.cs-landing .aside-note {
  margin: 24px 0 0;
  padding: 3px 0 3px 16px;
  border-left: 2px solid var(--cyan);
  color: var(--muted);
}
.cs-landing .aside-note strong { color: var(--text); }

/* pipeline */
.cs-landing .pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0 0;
  padding: 34px 26px 30px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    rgba(15, 23, 48, .6);
}
.cs-landing .pipeline li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cs-landing .pipeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 46px;
  left: calc(50% + 62px);
  right: calc(-50% + 62px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 14px);
  background-size: 28px 2px;
  animation: cs-dash 1.1s linear infinite;
  opacity: .8;
}
@keyframes cs-dash { to { background-position: 28px 0; } }
.cs-landing .pipeline .tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 18px;
  border: 1px solid #263A66;
  border-radius: 20px;
  background: linear-gradient(160deg, #14203F, #0E1731);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -20px rgba(0, 0, 0, .8);
  color: #7FB2FF;
}
.cs-landing .pipeline li:nth-child(2) .tile { color: #5EDCFF; }
.cs-landing .pipeline li:nth-child(3) .tile { color: #7EA6FF; }
.cs-landing .pipeline li:nth-child(4) .tile { color: #8FB8FF; }
.cs-landing .pipeline .tile svg { width: 40px; height: 40px; }
.cs-landing .pipeline .tile--done::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2 4.8-5' fill='none' stroke='%230A0B1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 0 0 4px var(--bg);
}
.cs-landing .pipeline .step { color: var(--step); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cs-landing .pipeline b { margin: 6px 0 4px; font-size: 18px; }
.cs-landing .pipeline li > span:last-child { max-width: 15rem; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

/* integrate: points beside the code */
.cs-landing .integrate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: start;
  margin: 48px 0 0;
}
.cs-landing .integrate h3 { font-size: 22.4px; margin: 0 0 12px; }
.cs-landing .integrate > div > p { color: var(--muted); margin: 0 0 22px; }
.cs-landing .points { list-style: none; margin: 0; padding: 0; }
.cs-landing .points li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; margin: 0 0 22px; }
.cs-landing .points li .glyph { margin: 0; }
.cs-landing .points h4 { margin: 2px 0 4px; font-size: 16px; }
.cs-landing .points p { margin: 0; color: var(--muted); }
.cs-landing .points p b { color: var(--text); }
.cs-landing .points li:nth-child(3n + 2) .glyph { --tone: var(--cyan); }
.cs-landing .points li:nth-child(3n) .glyph { --tone: var(--amber); }
.cs-landing .stack { display: grid; gap: 16px; }
.cs-landing .stack .window { margin: 0; }
.cs-landing .stack-note { margin: 0; color: var(--step); font-size: 14px; }
.cs-landing .stack-note a { text-decoration: none; }
.cs-landing .stack-note a::after { content: "\00a0→"; }

/* glyph tiles and cards */
.cs-landing .glyph {
  --tone: var(--primary);
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 10%, var(--tile));
  color: color-mix(in srgb, var(--tone) 75%, #fff);
}
.cs-landing .glyph svg { width: 22px; height: 22px; }
.cs-landing .features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.cs-landing .card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(17, 26, 51, .7);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.cs-landing .card:hover { transform: translateY(-3px); border-color: rgba(61, 126, 255, .55); box-shadow: 0 20px 50px -30px rgba(61, 126, 255, .6); }
.cs-landing .card p { margin: 0; color: var(--muted); }
.cs-landing .card p b { color: var(--text); }
.cs-landing .features .card,
.cs-landing .hood .card { display: flex; flex-direction: column; }
.cs-landing .features .card p,
.cs-landing .hood .card p,
.cs-landing .hood .limits { flex: 1; }
.cs-landing .features li:nth-child(3n + 2) .glyph { --tone: var(--cyan); }
.cs-landing .features li:nth-child(3n) .glyph { --tone: var(--amber); }
.cs-landing .more { display: inline-block; margin-top: 16px; font-weight: 600; text-decoration: none; }
.cs-landing .more::after { content: "\00a0→"; transition: margin-left .15s; }
.cs-landing .more:hover::after { margin-left: 3px; }

/* screenshots */
.cs-landing .shots { margin: 32px 0 0; }
.cs-landing .shots input { position: absolute; opacity: 0; pointer-events: none; }
.cs-landing .shot-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.cs-landing .shot-tabs label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.cs-landing .shot-tabs label:hover { color: var(--text); border-color: #2E4478; }
.cs-landing .shot-tabs svg { width: 16px; height: 16px; }
.cs-landing #shot-1:checked ~ .shot-tabs label[for="shot-1"],
.cs-landing #shot-2:checked ~ .shot-tabs label[for="shot-2"],
.cs-landing #shot-3:checked ~ .shot-tabs label[for="shot-3"] {
  border-color: rgba(61, 126, 255, .6);
  background: linear-gradient(135deg, rgba(61, 126, 255, .2), rgba(61, 126, 255, .16));
  box-shadow: 0 0 22px -8px rgba(61, 126, 255, .8);
  color: #fff;
}
.cs-landing #shot-1:focus-visible ~ .shot-tabs label[for="shot-1"],
.cs-landing #shot-2:focus-visible ~ .shot-tabs label[for="shot-2"],
.cs-landing #shot-3:focus-visible ~ .shot-tabs label[for="shot-3"] { outline: 2px solid var(--deep); outline-offset: 3px; }
.cs-landing .shot-window { margin: 0; box-shadow: 0 50px 120px -50px rgba(61, 126, 255, .55); }
.cs-landing .shot { display: none; width: 100%; height: auto; }
.cs-landing #shot-1:checked ~ .shot-window .shot-1,
.cs-landing #shot-2:checked ~ .shot-window .shot-2,
.cs-landing #shot-3:checked ~ .shot-window .shot-3 { display: block; animation: cs-fade .35s ease-out; }
@keyframes cs-fade { from { opacity: 0; transform: translateY(6px); } }

/* local by design */
.cs-landing .hood { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; }
.cs-landing .hood .card:nth-child(1) .glyph { --tone: var(--green); }
.cs-landing .hood .card:nth-child(2) .glyph { --tone: var(--cyan); }
.cs-landing .hood .card:nth-child(3) .glyph { --tone: #F2AE3D; }
.cs-landing .limits { margin: 0; padding-left: 18px; color: var(--muted); }
.cs-landing .limits li { margin: 0 0 6px; }

/* get started */
.cs-landing .reqs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(17, 26, 51, .5);
}
.cs-landing .reqs > div { display: grid; grid-template-columns: 20px 1fr; gap: 11px; }
.cs-landing .reqs svg { width: 20px; height: 20px; margin-top: 3px; color: #A970FF; fill: currentcolor; }
.cs-landing .reqs > div:nth-child(2) svg { color: #E8E8F4; }
.cs-landing .reqs > div:nth-child(3) svg { color: var(--cyan); fill: none; }
.cs-landing .reqs > div:nth-child(4) svg { color: var(--green); fill: none; }
.cs-landing .reqs p { margin: 0; font-size: 14.4px; line-height: 1.5; }
.cs-landing .reqs b { display: block; }
.cs-landing .reqs span { color: var(--muted); }
.cs-landing .reqs-more { margin: 10px 0 0; font-size: 14.4px; }
.cs-landing .reqs-more a { text-decoration: none; }
.cs-landing .reqs-more a::after { content: "\00a0→"; }
.cs-landing .moves { list-style: none; counter-reset: move; padding: 0; margin: 32px 0 0; }
.cs-landing .moves > li { position: relative; counter-increment: move; padding: 0 0 34px 62px; }
.cs-landing .moves > li::before {
  content: counter(move, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: linear-gradient(var(--tile), var(--tile)) padding-box, var(--grad) border-box;
  color: var(--text);
  font: 700 13.6px/1 var(--mono);
}
.cs-landing .moves > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--cyan), var(--primary), var(--deep));
  opacity: .5;
}
.cs-landing .moves > li > p { margin: 6px 0 0; color: var(--muted); }
.cs-landing .moves > li > p b { color: var(--text); }
.cs-landing .moves-after { color: var(--muted); }
.cs-landing .chat-window { max-width: 520px; }
.cs-landing .chat { margin: 0; padding: 14px 18px; list-style: none; font-size: 15px; }
.cs-landing .chat li { padding: 6px 0; color: #C9D3EA; }
.cs-landing .chat .c1 { color: var(--green); margin-right: 6px; }
.cs-landing .chat .bot { padding: 8px 10px; border: 1px solid rgba(61, 126, 255, .45); border-radius: 9px; background: rgba(61, 126, 255, .1); }
.cs-landing .chat .badge { margin-right: 6px; padding: 1px 7px; border-radius: 4px; background: #2563EB; color: #fff; font-size: 12px; font-weight: 700; }
.cs-landing .chat .url { color: #7EA6FF; text-decoration: underline; font-family: var(--mono); font-size: 13.5px; }

/* windows and code */
.cs-landing .window {
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--code);
}
.cs-landing .window-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .03);
  color: var(--step);
  font: 12.5px var(--mono);
}
.cs-landing .window-bar > span:last-child,
.cs-landing .window-bar > span:nth-child(2) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cs-landing .dots { display: flex; flex: none; gap: 6.4px; }
.cs-landing .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }
.cs-landing .dots i:nth-child(2) { background: var(--primary); }
.cs-landing .dots i:nth-child(3) { background: var(--deep); }
.cs-landing .copy {
  flex: none;
  margin-left: auto;
  padding: 2.4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--step);
  font: 11.5px/1.5 var(--mono);
  cursor: pointer;
}
.cs-landing .copy:hover { border-color: var(--primary); color: var(--text); }
.cs-landing .cs-code pre {
  margin: 0;
  padding: 16px 19px;
  overflow-x: auto;
  color: #C9D3EA;
  font: 13.6px/1.65 var(--mono);
}
.cs-landing .cs-code code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.cs-landing .cs-code .k { color: #8FB8FF; }
.cs-landing .cs-code .s { color: #7EE0B8; }
.cs-landing .cs-code .b { color: #FFB86B; }
.cs-landing .cs-code .p { color: #7D8AB0; }
.cs-landing .cs-code .v { color: #FFD27A; }

/* faq */
.cs-landing .faq { margin: 32px 0 0; border-top: 1px solid var(--border); }
.cs-landing .faq details { border-bottom: 1px solid var(--border); }
.cs-landing .faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-size: 16.8px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.cs-landing .faq summary::-webkit-details-marker { display: none; }
.cs-landing .faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: #8FB8FF;
  font: 600 17px/1 var(--mono);
}
.cs-landing .faq details[open] summary::after { content: "−"; border-color: var(--primary); }
.cs-landing .faq summary:hover { color: #fff; }
.cs-landing .faq details p { margin: 0 0 20px; color: var(--muted); }

/* closing call to action */
.cs-landing .cta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 40px;
  align-items: center;
  overflow: hidden;
  padding: 48px;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, rgba(56, 211, 255, .7), rgba(61, 126, 255, .6), rgba(61, 126, 255, .7)) border-box;
}
.cs-landing .cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%);
  mask-image: linear-gradient(120deg, #000, transparent 70%);
}
.cs-landing .cta h2 { margin: 0 0 16px; font-size: clamp(40px, 5vw, 60px); line-height: 1.02; letter-spacing: -.035em; }
.cs-landing .cta-copy > p { margin: 0; color: var(--muted); }
.cs-landing .cta .actions { margin-top: 28px; }
.cs-landing .status-board { margin: 0; }
.cs-landing .checklist { list-style: none; margin: 0; padding: 10px 18px 14px; }
.cs-landing .checklist li {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .07);
  font-size: 14.7px;
}
.cs-landing .checklist li:last-child { border-bottom: 0; }
.cs-landing .checklist li::before { content: ""; grid-row: span 2; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; }
.cs-landing .checklist .done::before {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2 4.8-5' fill='none' stroke='%230A0B1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.cs-landing .checklist .todo::before { border: 2px dashed var(--step); }
.cs-landing .checklist b { color: var(--text); }
.cs-landing .checklist .todo b { color: var(--muted); }
.cs-landing .checklist span { color: var(--muted); }
.cs-landing .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px !important;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: #C9D3EA !important;
  font: 600 12.8px/1.4 var(--mono);
}
.cs-landing .live { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 4px rgba(255, 61, 90, .2); animation: hv-pulse 2.4s ease-in-out infinite; }
.cs-landing .paths {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.cs-landing .paths a {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  height: 100%;
  padding: 18px 19px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(7, 11, 23, .55);
  color: var(--text);
  text-decoration: none;
  transition: transform .2s, border-color .2s;
}
.cs-landing .paths a:hover { transform: translateY(-2px); border-color: rgba(61, 126, 255, .6); color: var(--text); }
.cs-landing .paths .glyph { margin: 0; }
.cs-landing .paths b { display: block; margin: 2px 0 3px; }
.cs-landing .paths b::after { content: "\00a0→"; color: #8FB8FF; }
.cs-landing .paths b + span { display: block; color: var(--muted); font-size: 14.7px; line-height: 1.5; }
.cs-landing .paths li:nth-child(2) .glyph { --tone: var(--cyan); }
.cs-landing .paths li:nth-child(3) .glyph { --tone: var(--amber); }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .cs-landing .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; }
  .cs-landing .hero-visual { max-width: 620px; }
}
@media (max-width: 900px) {
  .cs-landing .hood,
  .cs-landing .integrate,
  .cs-landing .paths { grid-template-columns: 1fr; }
  .cs-landing .reqs { grid-template-columns: 1fr 1fr; }
  .cs-landing .cta { grid-template-columns: 1fr; padding: 32px 24px; }
  .cs-landing .pipeline { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .cs-landing .pipeline li::after { display: none; }
}
@media (max-width: 760px) {
  .cs-landing .compare { grid-template-columns: 1fr; }
  .cs-landing .compare > div + div { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .cs-landing .reqs { grid-template-columns: 1fr; }
  .cs-landing .moves > li { padding-left: 52px; }
  .cs-landing .pipeline { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-landing *,
  .cs-landing *::before,
  .cs-landing *::after { animation: none !important; transition: none !important; }
  .cs-landing .hv-s1,
  .cs-landing .hv-s2,
  .cs-landing .hv-s3,
  .cs-landing .hv-s4,
  .cs-landing .hv-s5,
  .cs-landing .hv-toast { opacity: 1; }
  .cs-landing .hv-sc1 { opacity: 1; }
  .cs-landing .hv-sc:not(.hv-sc1) { display: none; }
  .cs-landing .card:hover { transform: none; }
}

/* The theme adds its own copy button to code blocks; the windows have theirs. */
.cs-landing .md-code__nav { display: none; }

/* The !clip reaction as a recipe card (home.html, "How it works"): what the
   streamer picks in the app, in words, with no code. */
.cs-landing .recipe { margin: 0; box-shadow: 0 40px 100px -50px rgba(61, 126, 255, .6); }
.cs-landing .recipe-body { padding: 20px; }
.cs-landing .recipe-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(61, 126, 255, .16);
  color: #8FB8FF;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cs-landing .recipe-when {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(17, 26, 51, .8);
}
.cs-landing .recipe-line { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; font-weight: 600; }
.cs-landing .recipe-line svg { width: 20px; height: 20px; flex: none; color: #A970FF; fill: currentcolor; }
.cs-landing .chip {
  padding: 2px 9px;
  border: 1px solid rgba(61, 126, 255, .5);
  border-radius: 7px;
  background: rgba(61, 126, 255, .16);
  color: #DCE8FF;
  font-family: var(--mono);
  font-size: .88em;
}
.cs-landing .recipe-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.cs-landing .recipe-meta li { display: inline-flex; align-items: center; gap: 7px; }
.cs-landing .recipe-meta svg { width: 16px; height: 16px; color: var(--cyan); }
.cs-landing .recipe-then { position: relative; margin-top: 22px; padding-left: 18px; }
.cs-landing .recipe-then::before {
  content: "";
  position: absolute;
  left: 0;
  top: -22px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(var(--cyan), var(--primary));
  opacity: .6;
}
.cs-landing .recipe-steps { margin: 0; padding: 0; list-style: none; counter-reset: rs; }
.cs-landing .recipe-steps li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(17, 26, 51, .6);
}
.cs-landing .recipe-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(61, 126, 255, .45);
  border-radius: 10px;
  background: rgba(61, 126, 255, .12);
  color: #8FB8FF;
}
.cs-landing .recipe-icon svg { width: 18px; height: 18px; }
.cs-landing .recipe-steps b { display: block; font-size: 15.5px; }
.cs-landing .recipe-steps small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.cs-landing .recipe-tag {
  padding: 2px 9px;
  border: 1px solid rgba(232, 232, 244, .25);
  border-radius: 6px;
  background: rgba(232, 232, 244, .06);
  color: #D3DBEE;
  font-size: 12px;
  font-weight: 600;
}
.cs-landing .recipe-tag--tw { border-color: rgba(169, 112, 255, .55); background: rgba(169, 112, 255, .14); }
.cs-landing .recipe-chat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(61, 126, 255, .45);
  border-radius: 12px 12px 12px 4px;
  background: rgba(61, 126, 255, .1);
  font-size: 15px;
}
.cs-landing .recipe-chat b { padding: 1px 7px; border-radius: 4px; background: #2563EB; color: #fff; font-size: 12px; }
.cs-landing .recipe-chat span { color: #7EA6FF; text-decoration: underline; font-family: var(--mono); font-size: 13.5px; }

/* ---- Features page (overrides/features.html) ---- */
.cs-landing .fx-hero { padding-top: 72px; padding-bottom: 40px; }
.cs-landing .fx-hero .lede { max-width: 40rem; }
.cs-landing .fx-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.cs-landing .fx-jump a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.cs-landing .fx-jump a:hover { border-color: rgba(61, 126, 255, .6); background: rgba(61, 126, 255, .1); color: #fff; }
.cs-landing .fx-jump svg { width: 15px; height: 15px; color: var(--cyan); }
.cs-landing .fx-area h2[id],
.cs-landing .fx-specs h3[id] { scroll-margin-top: 130px; }
.cs-landing .fx-area { padding-top: 48px; padding-bottom: 48px; }
.cs-landing .fx-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.cs-landing .fx-split--flip > figure { order: -1; }
.cs-landing .fx-shot { margin: 0; box-shadow: 0 40px 100px -50px rgba(61, 126, 255, .6); }
.cs-landing .fx-shot img { display: block; width: 100%; height: auto; }
.cs-landing .fx-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.cs-landing .fx-tiles li { display: flex; align-items: flex-start; gap: 13px; }
.cs-landing .fx-tiles .glyph {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 11px;
}
.cs-landing .fx-tiles .glyph svg { width: 19px; height: 19px; }
.cs-landing .fx-tiles .glyph--brand svg { fill: currentcolor; }
.cs-landing .fx-tiles li:nth-child(3n + 2) .glyph { --tone: var(--cyan); }
.cs-landing .fx-tiles li:nth-child(3n) .glyph { --tone: var(--amber); }
.cs-landing .fx-tiles li > div > b { display: block; margin-top: 1px; font-size: 15.5px; line-height: 1.35; }
.cs-landing .fx-tiles li > div > span { display: block; margin-top: 3px; color: var(--muted); font-size: 14.2px; line-height: 1.5; }
.cs-landing .fx-tiles li > div > span b { color: var(--text); }
.cs-landing .fx-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; font-size: 15px; }
.cs-landing .fx-links a { font-weight: 600; text-decoration: none; }
.cs-landing .fx-links a::after { content: "\00a0→"; }
.cs-landing .fx-links a:hover { text-decoration: underline; }
.cs-landing .fx-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px 0 0;
}
.cs-landing .fx-specs .card { display: flex; flex-direction: column; }
.cs-landing .fx-specs .card:nth-child(2) .glyph { --tone: var(--cyan); }
.cs-landing .fx-specs .card:nth-child(3) .glyph { --tone: var(--amber); }
.cs-landing .fx-specs .card:nth-child(4) .glyph { --tone: var(--green); }
.cs-landing .fx-checks { flex: 1; margin: 6px 0 0; padding: 0; list-style: none; }
.cs-landing .fx-checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; margin: 0 0 9px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.cs-landing .fx-checks svg { width: 16px; height: 16px; margin-top: 3px; color: var(--green); }
.cs-landing .fx-dev {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    rgba(17, 26, 51, .6);
}
.cs-landing .fx-dev .glyph { margin: 0; --tone: var(--amber); }
.cs-landing .fx-dev h3 { margin: 0 0 4px; }
.cs-landing .fx-dev p { margin: 0; color: var(--muted); }
.cs-landing .fx-end { padding-bottom: 96px; text-align: center; }
.cs-landing .fx-end h2 { font-size: clamp(32px, 4.4vw, 48px); }
.cs-landing .fx-end .actions { justify-content: center; }
@media (max-width: 1000px) {
  .cs-landing .fx-split { grid-template-columns: 1fr; gap: 32px; }
  .cs-landing .fx-split--flip > figure { order: 0; }
}
@media (max-width: 760px) {
  .cs-landing .fx-tiles,
  .cs-landing .fx-specs { grid-template-columns: 1fr; }
  .cs-landing .fx-dev { grid-template-columns: 1fr; }
}

/* ---- FAQ page (overrides/faq.html) ---- */
.cs-landing .faq-hero { padding-top: 72px; padding-bottom: 36px; }
.cs-landing .faq-hero .lede { max-width: 38rem; }
.cs-landing .faq-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin-top: 30px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(17, 26, 51, .85);
  box-shadow: 0 20px 50px -30px rgba(61, 126, 255, .6);
  transition: border-color .15s, box-shadow .15s;
}
.cs-landing .faq-search:focus-within { border-color: rgba(61, 126, 255, .7); box-shadow: 0 0 0 4px rgba(61, 126, 255, .18), 0 20px 50px -30px rgba(61, 126, 255, .8); }
.cs-landing .faq-search svg { flex: none; width: 19px; height: 19px; color: var(--cyan); }
.cs-landing .faq-search input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16.5px;
}
.cs-landing .faq-search input::placeholder { color: #6A7BA6; }
.cs-landing .faq-search input::-webkit-search-cancel-button { filter: invert(.7); }
.cs-landing .faq-count { flex: none; color: var(--step); font: 600 13px var(--mono); }
.cs-landing .faq-jump { margin-top: 22px; }
.cs-landing .faq-jump a { padding: 6px 14px; }

.cs-landing .faq-body { padding-bottom: 24px; }
.cs-landing .faq-body > h2,
.cs-landing .faq-body > details,
.cs-landing .faq-body > .faq-empty { max-width: 900px; }
.cs-landing .faq-body > h1 { display: none; }
.cs-landing .faq-body [hidden],
.cs-landing .faq-body.md-typeset details.question[class][hidden] { display: none; }
.cs-landing .faq-body.md-typeset h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 52px 0 18px;
  color: #fff;
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.02em;
  scroll-margin-top: 130px;
}
.cs-landing .faq-body.md-typeset h2:first-of-type { margin-top: 24px; }
.cs-landing .faq-body h2 .headerlink { display: none; }
.cs-landing .faq-body h2 .twemoji {
  --tone: var(--primary);
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tone) 12%, var(--tile));
  color: color-mix(in srgb, var(--tone) 75%, #fff);
}
.cs-landing .faq-body h2 .twemoji svg { width: 21px; height: 21px; max-height: none; }
.cs-landing .faq-body h2:nth-of-type(2) .twemoji { --tone: var(--cyan); }
.cs-landing .faq-body h2:nth-of-type(3) .twemoji { --tone: var(--green); }
.cs-landing .faq-body h2:nth-of-type(4) .twemoji { --tone: var(--amber); }

.cs-landing .faq-body.md-typeset details.question[class] {
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(17, 26, 51, .7);
  font-size: 15.5px;
  line-height: 1.65;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.cs-landing .faq-body.md-typeset details.question[class]:hover { border-color: #2E4478; }
.cs-landing .faq-body.md-typeset details.question[class][open] {
  border-color: rgba(61, 126, 255, .6);
  background: linear-gradient(135deg, rgba(61, 126, 255, .1), rgba(56, 211, 255, .04)), rgba(17, 26, 51, .8);
  box-shadow: 0 24px 60px -40px rgba(61, 126, 255, .8);
}
.cs-landing .faq-body.md-typeset details.question[class] > summary {
  margin: 0;
  padding: 18px 64px 18px 22px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.4;
  cursor: pointer;
}
.cs-landing .faq-body.md-typeset details.question[class] > summary::before { display: none; }
.cs-landing .faq-body.md-typeset details.question[class] > summary::after {
  content: "+";
  top: 50%;
  right: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .03);
  color: #8FB8FF;
  font: 600 18px/1 var(--mono);
  -webkit-mask-image: none;
  mask-image: none;
  transform: translateY(-50%);
  transition: background-color .15s, border-color .15s, color .15s;
}
.cs-landing .faq-body.md-typeset details.question[class][open] > summary::after {
  content: "−";
  border-color: transparent;
  background: linear-gradient(135deg, var(--cyan), var(--primary));
  color: #fff;
  transform: translateY(-50%);
}
.cs-landing .faq-body.md-typeset details.question[class] > p {
  margin: 0;
  padding: 0 22px 18px;
  color: var(--muted);
}
.cs-landing .faq-body.md-typeset details.question[class] > p + p { padding-top: 0; }
.cs-landing .faq-body.md-typeset details a { color: #7EA6FF; font-weight: 600; }
.cs-landing .faq-body.md-typeset details strong { color: var(--text); }
.cs-landing .faq-empty { padding: 28px 0; color: var(--muted); text-align: center; }

.cs-landing .faq-more { padding-bottom: 96px; text-align: center; }
.cs-landing .faq-more h2 { margin-bottom: 28px; }
.cs-landing .faq-more .paths { max-width: 1000px; margin: 0 auto; text-align: left; }
@media (max-width: 900px) {
  .cs-landing .faq-more .paths { grid-template-columns: 1fr; }
}

/* ---- About page (overrides/about.html) ---- */
.cs-landing .ab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 56px;
}
.cs-landing .ab-hero .lede { max-width: 36rem; }
.cs-landing .ab-people { display: grid; gap: 14px; justify-items: stretch; }
.cs-landing .ab-person {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(17, 26, 51, .75);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 30px 70px -40px rgba(61, 126, 255, .7);
  transition: transform .2s, border-color .2s;
}
.cs-landing .ab-person:hover { transform: translateY(-2px); border-color: rgba(169, 112, 255, .7); color: var(--text); }
.cs-landing .ab-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px rgba(169, 112, 255, .7);
}
.cs-landing .ab-avatar { overflow: hidden; }
.cs-landing .ab-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cs-landing .ab-avatar--a { background: linear-gradient(135deg, #1FB6FF, #2F5BFF); }
.cs-landing .ab-avatar--b { background: linear-gradient(135deg, #A970FF, #FF6FB5); }
.cs-landing .ab-person__text { display: grid; gap: 2px; min-width: 0; }
.cs-landing .ab-role { color: var(--step); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cs-landing .ab-person b { font-size: 22px; letter-spacing: -.01em; }
.cs-landing .ab-link { display: inline-flex; align-items: center; gap: 7px; color: #C9B3FF; font-size: 14px; }
.cs-landing .ab-link svg { width: 14px; height: 14px; fill: #A970FF; }
.cs-landing .ab-heart { justify-self: center; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px 0; color: #FF6F91; }
.cs-landing .ab-heart svg { width: 26px; height: 26px; fill: currentcolor; filter: drop-shadow(0 0 12px rgba(255, 111, 145, .6)); animation: ab-beat 2.4s ease-in-out infinite; }
@keyframes ab-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } 36% { transform: scale(1.12); } 48% { transform: scale(1); } }

.cs-landing .ab-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 28px;
}
.cs-landing .ab-letter p { margin: 0 0 20px; color: #C9D3EA; font-size: 17.5px; line-height: 1.75; }
.cs-landing .ab-letter .ab-letter__open { color: #fff; font-size: 21px; line-height: 1.6; font-weight: 500; }
.cs-landing .ab-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.cs-landing .ab-sign b { display: block; color: #fff; font-size: 18px; }
.cs-landing .ab-sign a { color: #C9B3FF; font-size: 14px; text-decoration: none; }
.cs-landing .ab-sign a:hover { text-decoration: underline; }
.cs-landing .ab-avatar--sm { width: 44px; height: 44px; font-size: 19px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(169, 112, 255, .6); }
.cs-landing .ab-quote {
  position: sticky;
  top: 140px;
  margin: 0;
  padding: 34px 32px 28px;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, rgba(255, 111, 145, .7), rgba(169, 112, 255, .5), rgba(61, 126, 255, .7)) border-box;
  box-shadow: 0 40px 90px -50px rgba(255, 111, 145, .55);
}
.cs-landing .ab-quote__mark {
  display: block;
  height: 46px;
  background: linear-gradient(135deg, #FF6F91, #A970FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 800 96px/1 Georgia, "Times New Roman", serif;
}
.cs-landing .ab-quote blockquote {
  margin: 8px 0 24px;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: 23px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.cs-landing .ab-quote figcaption { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; }
.cs-landing .ab-quote figcaption b { color: #C9B3FF; }
@media (max-width: 1000px) {
  .cs-landing .ab-story__grid { grid-template-columns: 1fr; }
  .cs-landing .ab-quote { position: static; }
}
@media (max-width: 560px) {
  .cs-landing .ab-letter .ab-letter__open { font-size: 19px; }
  .cs-landing .ab-letter p { font-size: 16.5px; }
  .cs-landing .ab-quote blockquote { font-size: 20px; }
}

.cs-landing .ab-timeline { position: relative; margin: 34px 0 0; padding: 0 0 0 34px; list-style: none; }
.cs-landing .ab-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--cyan), var(--primary) 40%, #FF5A6A 55%, var(--primary) 75%, var(--green));
  opacity: .7;
}
.cs-landing .ab-timeline li { position: relative; margin: 0 0 26px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; background: rgba(17, 26, 51, .6); }
.cs-landing .ab-timeline li::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(61, 126, 255, .7);
}
.cs-landing .ab-timeline li.ab-alarm { border-color: rgba(255, 90, 106, .55); background: linear-gradient(135deg, rgba(255, 90, 106, .1), transparent 60%), rgba(17, 26, 51, .6); }
.cs-landing .ab-timeline li.ab-alarm::before { background: #FF5A6A; box-shadow: 0 0 0 4px var(--bg), 0 0 16px rgba(255, 90, 106, .9); }
.cs-landing .ab-timeline li:last-child::before { background: var(--green); box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(52, 211, 153, .7); }
.cs-landing .ab-timeline time { display: block; color: var(--cyan); font: 700 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cs-landing .ab-timeline b { display: block; margin: 4px 0 4px; font-size: 18px; }
.cs-landing .ab-timeline span { color: var(--muted); font-size: 15.5px; }
.cs-landing sup { font-size: .7em; line-height: 0; }
.cs-landing sup a { margin-left: 1px; text-decoration: none; font-weight: 700; }
.cs-landing .ab-compare p { margin: 0; color: var(--muted); }

.cs-landing .ab-beliefs .card:nth-child(4) .glyph { --tone: var(--green); }
.cs-landing .ab-beliefs .card:nth-child(6) .glyph { --tone: #FF6F91; }

.cs-landing .ab-contact .btn svg { fill: currentcolor; }
.cs-landing .ab-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cs-landing .ab-paths { grid-column: auto; grid-template-columns: 1fr; margin: 0; }

.cs-landing .ab-sources { padding-top: 8px; padding-bottom: 80px; }
.cs-landing .ab-sources h2 { font-size: 20px; margin-bottom: 12px; }
.cs-landing .ab-sources ol { margin: 0; padding-left: 22px; color: var(--muted); font-size: 14.5px; }
.cs-landing .ab-sources li { margin: 0 0 6px; scroll-margin-top: 130px; }
.cs-landing .ab-sources li:target { color: #fff; }
.cs-landing .ab-note { margin: 16px 0 0; color: var(--step); font-size: 13.5px; }

@media (max-width: 1000px) {
  .cs-landing .ab-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; }
  .cs-landing .ab-people { max-width: 480px; }
  .cs-landing .ab-contact { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-landing .ab-heart svg { animation: none; }
}

/* ---- Download page (overrides/download.html) ---- */
.cs-landing .dl-hero { padding-top: 72px; padding-bottom: 40px; }
.cs-landing .dl-hero .lede { max-width: 38rem; }
.cs-landing .dl-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--step); font-size: 13.5px; }
.cs-landing .dl-legend li { display: inline-flex; align-items: center; gap: 9px; }

.cs-landing .dl-badge {
  --tone: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: color-mix(in srgb, var(--tone) 70%, #fff);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.cs-landing .dl-badge > span { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 8px var(--tone); }
.cs-landing .dl-badge--soon { --tone: var(--green); }
.cs-landing .dl-badge--soon > span { animation: hv-pulse 2s ease-in-out infinite; }
.cs-landing .dl-badge--later { --tone: var(--amber); }
.cs-landing .dl-badge--planned { --tone: #8FA3CC; }

.cs-landing .dl-platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; }
.cs-landing .dl-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(18rem 10rem at 100% 0%, rgba(61, 126, 255, .12), transparent 70%),
    rgba(17, 26, 51, .7);
  transition: transform .2s, border-color .2s;
}
.cs-landing .dl-card:hover { transform: translateY(-3px); border-color: rgba(61, 126, 255, .5); }
.cs-landing .dl-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.cs-landing .dl-logo { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--border); border-radius: 14px; background: var(--tile); color: #E8EDF8; }
.cs-landing .dl-logo svg { width: 26px; height: 26px; fill: currentcolor; }
.cs-landing .dl-card h3 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.cs-landing .dl-arch { margin: 2px 0 14px; color: var(--step); font-size: 14px; }
.cs-landing .dl-card .fx-checks { flex: 1; }
.cs-landing .dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 16px;
  border: 1px dashed #2E4478;
  border-radius: 12px;
  color: var(--step);
  font-size: 14.5px;
  font-weight: 600;
  cursor: not-allowed;
}
.cs-landing .dl-btn svg { width: 17px; height: 17px; }

.cs-landing .dl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.cs-landing .dl-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--text); font-size: 14px; font-weight: 600; }
.cs-landing .dl-chips svg { width: 15px; height: 15px; fill: currentcolor; color: #C9D3EA; }

.cs-landing .dl-panel {
  position: relative;
  margin: 0;
  padding: 34px 28px 54px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    rgba(17, 26, 51, .65);
  box-shadow: 0 40px 100px -50px rgba(61, 126, 255, .6);
}
.cs-landing .dl-diagram { display: grid; grid-template-columns: 1fr minmax(60px, 1fr) 1fr; align-items: center; gap: 10px; }
.cs-landing .dl-node { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cs-landing .dl-node b { margin-top: 10px; font-size: 17px; }
.cs-landing .dl-node > span:last-child { color: var(--muted); font-size: 13.5px; }
.cs-landing .dl-node__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid #2E4478;
  border-radius: 20px;
  background: linear-gradient(160deg, #14203F, #0E1731);
  color: #8FB8FF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -20px rgba(0, 0, 0, .8);
}
.cs-landing .dl-node__icon svg { width: 38px; height: 38px; }
.cs-landing .dl-node__icon--alt { color: #5EDCFF; }
.cs-landing .dl-node__icon--amber { color: var(--amber); }
.cs-landing .dl-wire { position: relative; height: 2px; margin-bottom: 52px; background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 14px); background-size: 28px 2px; animation: cs-dash 1.1s linear infinite; }
.cs-landing .dl-wire::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 8px solid var(--cyan); }
.cs-landing .dl-wire--both::before { content: ""; position: absolute; left: -2px; top: -4px; border: 5px solid transparent; border-right: 8px solid var(--cyan); }
.cs-landing .dl-panel__foot { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; }

.cs-landing .dl-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; }
.cs-landing .dl-pick .card { display: flex; flex-direction: column; }
.cs-landing .dl-pick .card > p:not(.dl-pick__get) { flex: 1; }
.cs-landing .dl-pick .card:nth-child(2) .glyph { --tone: var(--amber); }
.cs-landing .dl-pick .card:nth-child(3) .glyph { --tone: var(--cyan); }
.cs-landing .dl-pick__get { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--border); color: var(--text) !important; }
.cs-landing .dl-pick__get b { color: #8FB8FF; }
.cs-landing .dl-end-lede { max-width: 34rem; margin: 0 auto !important; }

@media (max-width: 900px) {
  .cs-landing .dl-platforms,
  .cs-landing .dl-pick { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cs-landing .dl-diagram { grid-template-columns: 1fr; gap: 18px; }
  .cs-landing .dl-wire { width: 2px; height: 40px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--cyan) 0 6px, transparent 6px 14px); }
  .cs-landing .dl-wire::after,
  .cs-landing .dl-wire--both::before { display: none; }
}

/* The hero's "for example" list: trigger on the left, what happens on
   the right. */
.cs-landing .moments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 560px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.cs-landing .moments li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 13px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(17, 26, 51, .7);
}
.cs-landing .moment-when { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 14.5px; font-weight: 700; }
.cs-landing .moment-when svg { width: 15px; height: 15px; flex: none; color: var(--cyan); }
.cs-landing .moments li:nth-child(2) .moment-when svg { color: var(--amber); }
.cs-landing .moments li:nth-child(3) .moment-when svg { color: #FF6F91; }
.cs-landing .moments li:nth-child(4) .moment-when svg { color: #8FB8FF; }
.cs-landing .moment-when code { font-size: .85em; }
.cs-landing .moment-then { padding-left: 22px; color: var(--muted); font-size: 13.5px; }
.cs-landing .moment-then::before { content: "→ "; color: var(--step); }
@media (max-width: 420px) {
  .cs-landing .moments { grid-template-columns: 1fr; }
}

/* ---- legal pages (overrides/legal.html) ----
   Terms and Privacy: hero with an effective-date stamp, "at a glance"
   cards, then the policy itself as a reading card beside a sticky,
   numbered contents list with a progress bar (javascripts/legal.js). */
.cs-landing .legal-hero { padding-top: 72px; padding-bottom: 40px; }
.cs-landing .legal-hero .lede { max-width: 42rem; }
.cs-landing .eyebrow-pill svg { width: 16px; height: 16px; color: var(--cyan); }
.cs-landing .legal-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
}
.cs-landing .legal-stamp > * {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(17, 26, 51, .7);
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
.cs-landing .legal-stamp svg { width: 15px; height: 15px; color: #8FB8FF; }
.cs-landing .legal-stamp a { color: var(--text); text-decoration: none; }
.cs-landing .legal-stamp a:hover { color: #8FB8FF; }
.cs-landing .legal-print { cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s; }
.cs-landing .legal-print:hover { border-color: rgba(61, 126, 255, .6); color: #fff; }

.cs-landing .legal-glance { padding-bottom: 56px; }
.cs-landing .legal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 901px) {
  .cs-landing .legal-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cs-landing .legal-cards li {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17, 26, 51, .9), rgba(15, 23, 48, .6));
}
.cs-landing .legal-cards .glyph { width: 38px; height: 38px; margin-bottom: 14px; border-radius: 10px; }
.cs-landing .legal-cards .glyph svg { width: 19px; height: 19px; }
.cs-landing .legal-cards li:nth-child(4n + 2) .glyph { --tone: var(--cyan); }
.cs-landing .legal-cards li:nth-child(4n + 3) .glyph { --tone: var(--green); }
.cs-landing .legal-cards li:nth-child(4n + 4) .glyph { --tone: var(--amber); }
.cs-landing .legal-cards b { color: #fff; font-size: 16px; line-height: 1.35; }
.cs-landing .legal-cards b + span { margin-top: 6px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.cs-landing .legal-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--step);
  font-size: 14px;
}
.cs-landing .legal-note svg { flex: none; width: 16px; height: 16px; }

.cs-landing .legal-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 24px;
}
.cs-landing .legal-toc { position: sticky; top: 92px; }
.cs-landing .legal-toc__inner {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 18px 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(11, 17, 38, .75);
  scrollbar-width: thin;
}
.cs-landing .legal-toc__title {
  margin: 0 0 10px 8px;
  color: var(--step);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cs-landing .legal-toc ol { margin: 0; padding: 0; list-style: none; }
.cs-landing .legal-toc a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.cs-landing .legal-toc a:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.cs-landing .legal-toc a.is-active { background: rgba(61, 126, 255, .12); color: #fff; box-shadow: inset 2px 0 0 var(--primary); }
.cs-landing .legal-toc ol ol { margin: 2px 0 6px 31px; }
.cs-landing .legal-toc ol ol a { padding: 4px 8px; font-size: 13px; }
.cs-landing .legal-toc .legal-num { width: 21px; height: 21px; margin-top: -1px; font-size: 11px; }
.cs-landing .legal-toc a.is-active .legal-num { border-color: transparent; background: var(--grad); color: #fff; }
.cs-landing .legal-progress {
  height: 3px;
  margin: 14px 8px 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--border);
}
.cs-landing .legal-progress span {
  display: block;
  height: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s linear;
}

.cs-landing .legal-num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(61, 126, 255, .55);
  border-radius: 50%;
  background: rgba(61, 126, 255, .12);
  color: #8FB8FF;
  font: 700 14px/1 var(--mono);
}

.cs-landing .legal-doc.md-typeset {
  min-width: 0;
  padding: 40px 52px 48px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(13, 20, 42, .72);
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, .9);
  color: #C9D3EA;
  font-size: 16.5px;
  line-height: 1.75;
}
.cs-landing .legal-doc > p:first-child { margin-top: 0; color: var(--text); font-size: 18px; line-height: 1.7; }
.cs-landing .legal-doc.md-typeset :is(h2, h3) { scroll-margin-top: 110px; }
.cs-landing .legal-doc.md-typeset h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 48px 0 18px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  color: #fff;
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.cs-landing .legal-doc.md-typeset h3 {
  margin: 34px 0 10px;
  color: #fff;
  font-size: 18.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cs-landing .legal-doc.md-typeset h3::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 12px 2px 0;
  border-radius: 2px;
  background: var(--grad);
  transform: rotate(45deg);
}
.cs-landing .legal-doc .headerlink { opacity: 0; transition: opacity .15s; }
.cs-landing .legal-doc :is(h2, h3):hover .headerlink { opacity: 1; }
.cs-landing .legal-doc.md-typeset strong { color: #fff; }
.cs-landing .legal-doc.md-typeset a { color: #7EA6FF; font-weight: 600; }
.cs-landing .legal-doc.md-typeset a:hover { color: #8FB8FF; }
.cs-landing .legal-doc.md-typeset ul { margin-left: 0; padding-left: 1.25em; }
.cs-landing .legal-doc.md-typeset ul li { margin-bottom: .55em; }
.cs-landing .legal-doc.md-typeset ul li::marker { color: var(--primary); }
.cs-landing .legal-doc.md-typeset code { padding: .1em .38em; border-radius: 5px; background: rgba(61, 126, 255, .14); color: #D3DBEE; }
.cs-landing .legal-doc.md-typeset .legal-callout {
  margin: 26px 0 8px;
  padding: 20px 24px;
  border: 1px solid rgba(61, 126, 255, .4);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(56, 211, 255, .1), rgba(61, 126, 255, .08) 45%, transparent),
    rgba(17, 26, 51, .6);
  box-shadow: inset 3px 0 0 var(--cyan);
  color: var(--text);
}
.cs-landing .legal-doc.md-typeset .legal-callout > strong:first-child {
  display: block;
  margin-bottom: 4px;
  color: #8FB8FF;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cs-landing .legal-doc.md-typeset .md-typeset__scrollwrap { margin: 1.4em 0; }
.cs-landing .legal-doc.md-typeset .md-typeset__table { padding: 0; }
.cs-landing .legal-doc.md-typeset table:not([class]) { font-size: 14px; }

.cs-landing .legal-more { padding-bottom: 96px; text-align: center; }
.cs-landing .legal-more h2 { margin-bottom: 28px; }
.cs-landing .legal-more .paths { max-width: 1000px; margin: 0 auto; text-align: left; }
.cs-landing .legal-more .paths li:nth-child(2) .glyph { --tone: var(--green); }

@media (max-width: 1000px) {
  .cs-landing .legal-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cs-landing .legal-toc { position: static; }
  .cs-landing .legal-toc__inner { max-height: none; }
  .cs-landing .legal-toc > div > ol { columns: 2 240px; column-gap: 16px; }
  .cs-landing .legal-toc > div > ol > li { break-inside: avoid; }
  .cs-landing .legal-toc ol ol,
  .cs-landing .legal-progress { display: none; }
  .cs-landing .legal-more .paths { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cs-landing .legal-hero { padding-top: 48px; }
  .cs-landing .legal-doc.md-typeset { padding: 26px 20px 32px; border-radius: 14px; font-size: 16px; }
  .cs-landing .legal-doc.md-typeset h2 { gap: 12px; margin-top: 36px; padding-top: 30px; font-size: 21px; }
  .cs-landing .legal-doc .legal-num { width: 30px; height: 30px; font-size: 13px; }
  .cs-landing .legal-doc.md-typeset .legal-callout { padding: 16px 16px 16px 18px; }
  .cs-landing .legal-cards li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px;
  }
  .cs-landing .legal-cards .glyph { grid-row: span 2; width: 34px; height: 34px; margin: 2px 0 0; }
  .cs-landing .legal-cards b + span { margin-top: 4px; }
}

@media print {
  .cs-landing.cs-legal { background: none; color: #000; }
  .cs-landing .hero-band::before,
  .cs-landing .legal-print,
  .cs-landing .legal-glance,
  .cs-landing .legal-toc,
  .cs-landing .legal-more { display: none; }
  .cs-landing .legal-body { display: block; }
  .cs-landing .legal-doc.md-typeset { padding: 0; border: 0; background: none; box-shadow: none; color: #000; }
  .cs-landing .legal-doc.md-typeset :is(h2, h3, strong, a) { color: #000; }
}