/* ============================================================================
   showshot.ai · site styles
   Tokens first (they override scrollcraft.css), then the house components.
   Scale: the root font size follows the viewport the way surferseo.com's does
   (rem = 1.2245vw, floored at 15px and capped at 18px), so every rem-based
   measure keeps the same proportion from 1280 to 1470 wide and holds after.
   ========================================================================== */

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

:root {
  /* the six roles the engine themes from */
  --sc-canvas: #0f0d0d;
  --sc-surface: #171313;
  --sc-ink: #f8f4ef;
  --sc-ink-soft: #b3aba4;
  --sc-accent: #ff4338;
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --sc-font-text: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --sc-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sc-maxw: 80rem;
  --sc-gutter: clamp(1.125rem, 3.5vw, 2.5rem);
  --sc-shadow-color: 10 20% 3%;

  /* the house aliases every component below uses */
  --accent: #ff4338; --accent-lift: #ff7168; --accent-deep: #c02b22;
  --accent2: #00c02a; --accent2-lift: #4ade80;
  --ink-0: #0f0d0d; --ink-1: #151111; --ink-2: #1b1616; --ink-3: #231d1d;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  --fg: #f8f4ef; --fg-2: #b3aba4; --fg-3: #8a827c; --fg-4: #635c57;
  --glass: rgba(255,255,255,.03); --glass-2: rgba(255,255,255,.055);
  --r: 0.75rem; --r-s: 0.5rem; --r-l: 1.25rem;
  --disp: var(--sc-font-display);
  --body: var(--sc-font-text);
  --mono: var(--sc-font-mono);
  --maxw: var(--sc-maxw);

  /* the type scale, measured off surferseo.com at 1280 and 1440 */
  --t-display: 4.25rem;   /* h1: 66px at 1280, 75px at 1440 */
  --t-h2: 2.85rem;        /* 45 / 50 */
  --t-h2s: 2.37rem;       /* 37 / 42 */
  --t-h3: 1.5rem;         /* 23.5 / 26 */
  --t-h4: 1.2rem;
  --t-lede: 1.15rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.72rem;

  --sec-top: clamp(4rem, 7vw, 7.5rem);
  --sec-bot: clamp(3rem, 5vw, 5.5rem);
}

html { font-size: clamp(15px, 1.2245vw, 18px); scroll-padding-top: 5rem; }
body {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--fg);
  background: var(--ink-0);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-lift); }
h1, h2, h3, h4 { font-family: var(--disp); font-weight: 600; letter-spacing: -.022em; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.t-display { font-size: var(--t-display); line-height: 1.06; letter-spacing: -.03em; font-weight: 600; }
.t-h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.026em; }
.t-h2s { font-size: var(--t-h2s); line-height: 1.14; letter-spacing: -.022em; }
.t-h3 { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -.018em; }
.t-h4 { font-family: var(--disp); font-weight: 600; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.016em; }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--fg-2); max-width: 58ch; }
.small { font-size: var(--t-small); color: var(--fg-3); line-height: 1.5; }
.fg2 { color: var(--fg-2); } .fg3 { color: var(--fg-3); }
.mono { font-family: var(--mono); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
em.acc { font-style: normal; color: var(--accent); }

/* status reads as a word in the margin, not a badge on a card */
.st { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4); white-space: nowrap; }
.st-pro { color: var(--accent-lift); }
.k { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-lift); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sc-gutter); }
.sec { position: relative; padding: var(--sec-top) 0 var(--sec-bot); }
.sec-t { padding-top: 0; }
.sec-b { padding-bottom: 0; }
.hd { max-width: 46rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.hd h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.026em; }
.hd h2.sm { font-size: var(--t-h2s); }
.hd p { margin-top: 1.1rem; }
.hd.center { margin-inline: auto; text-align: center; }
.hd.center .lede { margin-inline: auto; }
.n-rule { display: flex; align-items: baseline; gap: .9rem; border-top: 1px solid var(--line); padding-top: .8rem; margin-bottom: 1.4rem; }
.n-rule span { font-family: var(--mono); font-size: var(--t-label); color: var(--accent); letter-spacing: .14em; }
.n-rule b { font-family: var(--mono); font-size: var(--t-label); color: var(--fg-4); letter-spacing: .14em; text-transform: uppercase; font-weight: 400; }

.grid { display: grid; gap: 1.1rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split.top { align-items: start; }
.grid > *, .split > *, .flow > *, .foot-in > *, .tri > *, .plans > * { min-width: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; height: 3rem; padding: 0 1.4rem; border-radius: var(--r);
  font-family: var(--body); font-weight: 600; font-size: .95rem; letter-spacing: -.005em; white-space: nowrap;
  border: 1px solid transparent; transition: background .16s, border-color .16s, color .16s, transform .12s; }
.btn:active { transform: translateY(1px); }
.btn-p { background: var(--accent); color: #fff; }
.btn-p:hover { background: var(--accent-lift); color: #fff; }
.btn-g { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-g:hover { background: var(--glass-2); border-color: rgba(255,255,255,.3); color: var(--fg); }
.btn-s { height: 2.4rem; padding: 0 1rem; font-size: .875rem; border-radius: .6rem; }
.btn-l { height: 3.4rem; padding: 0 1.8rem; font-size: 1.05rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .95rem; color: var(--accent-lift); }
.link-arrow::after { content: "\2192"; transition: transform .16s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(15,13,13,.72); border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); transition: border-color .2s, background .2s; }
.nav.is-scrolled { border-bottom-color: var(--line); background: rgba(15,13,13,.86); }
.nav-in { display: flex; align-items: center; gap: .75rem; height: 4.25rem; }
.brand { display: flex; align-items: center; }
.brand img { height: 1.9rem; width: auto; }
.brand-lite { display: none; }
.nav-links { display: flex; align-items: center; gap: .15rem; margin-left: 1.25rem; }
.nav-links button, .nav-links a { display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .8rem; border-radius: .55rem;
  font-size: .95rem; font-weight: 500; color: var(--fg-2); transition: background .15s, color .15s; }
.nav-links button:hover, .nav-links a:hover, .nav-links a[aria-current="page"], .nav-links button[aria-expanded="true"] { background: var(--glass-2); color: var(--fg); }
.caret { width: .6rem; height: .6rem; opacity: .6; transition: transform .2s; }
.nav-links button[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.nav-login { font-size: .95rem; font-weight: 500; color: var(--fg-2); }
.nav-login:hover { color: var(--fg); }
.nav-burger { display: none; margin-left: auto; width: 2.5rem; height: 2.5rem; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.nav-burger span { width: 20px; height: 2px; background: var(--fg); transition: transform .2s, opacity .2s; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mega { position: absolute; left: 0; right: 0; top: 4.25rem; z-index: 59; background: rgba(17,14,14,.97); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.mega[hidden] { display: none; }
.mega-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: 1.5rem 0 1.75rem; }
.mega-col { display: flex; flex-direction: column; gap: .15rem; }
.mega-col h5 { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-4); margin: 0 0 .5rem; padding-left: .7rem; font-weight: 400; }
.mega a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .7rem; border-radius: .55rem; transition: background .15s; color: var(--fg); }
.mega a:hover { background: var(--glass-2); color: var(--fg); }
.mega a b { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.mega a i { font-style: normal; font-size: .82rem; color: var(--fg-3); line-height: 1.4; }

.mobile { position: fixed; inset: 4.25rem 0 0; z-index: 58; background: var(--ink-0); overflow-y: auto; padding: 1rem 0 3rem; }
.mobile[hidden] { display: none; }
.mobile h5 { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-4); margin: 1.4rem 0 .5rem; font-weight: 400; }
.mobile a { display: block; padding: .55rem 0; font-size: 1.1rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-cta { display: flex; gap: .75rem; margin-top: 1.5rem; }
.mobile-cta .btn { flex: 1; }
.mobile-cta a { border-bottom: 0; padding: 0; font-size: .95rem; }

/* ---------- hairline rows, panels, figures ---------- */
.rows { border-top: 1px solid var(--line); }
.rows > li { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.6rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rows > li > b { font-family: var(--disp); font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; display: block; }
.rows > li p { font-size: .95rem; color: var(--fg-2); }
.rows > li > *:not(b) { grid-column: 2; }
.rows > li .st { display: block; margin-top: .35rem; }
.rows.tight > li { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.4rem; padding: 1rem 0; }
.rows.tight > li > b { font-size: 1rem; }
.rows.tight > li p { font-size: .92rem; }

.panel { border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); }
.panel-p { padding: 1.4rem; }
.prov { display: flex; flex-direction: column; gap: .7rem; padding: 1.5rem; }
.prov h3 { font-size: var(--t-h4); letter-spacing: -.015em; }
.prov p { font-size: .95rem; color: var(--fg-2); }
.prov ul { display: flex; flex-direction: column; gap: .4rem; margin-top: .1rem; }
.prov li { font-size: .9rem; color: var(--fg-3); padding-left: 1rem; position: relative; line-height: 1.5; }
.prov li::before { content: ""; position: absolute; left: 0; top: .65em; width: .45rem; height: 1px; background: var(--accent); opacity: .8; }
.prov-hd { display: flex; align-items: baseline; gap: .7rem; }
.prov-hd b { font-family: var(--disp); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }
.prov-hd i { font-style: normal; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4); }
.prov-shot { position: relative; border-radius: .6rem; overflow: hidden; border: 1px solid var(--line-2); margin: -.25rem 0 .2rem; background: rgba(0,0,0,.4); }
.prov-shot img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.prov-shot .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .45rem .7rem; background: rgba(6,6,7,.86); border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--fg-3); display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.prov-shot .cap em { font-style: normal; color: var(--accent2-lift); }

.fig { position: relative; border-radius: .6rem; overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-1); box-shadow: 0 2.5rem 5.5rem -2.75rem rgba(0,0,0,.95); }
.fig img { width: 100%; height: auto; display: block; }
.fig-cap { display: flex; align-items: baseline; gap: .9rem; margin-top: .8rem; font-size: var(--t-small); color: var(--fg-3); }
.fig-cap b { font-weight: 600; color: var(--fg-2); }
.fig-cap .st { margin-left: auto; }

/* the media band under a heading block: the full width of the container, like surfer's hero video */
.band { position: relative; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-1);
  box-shadow: 0 3rem 6rem -2.5rem rgba(0,0,0,.95); }
.band img { display: block; width: 100%; height: auto; }
.band .badges { position: absolute; right: 1.2rem; top: 1.2rem; z-index: 3; display: flex; gap: .5rem; flex-wrap: wrap; }
.band .bg { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: .5rem; background: rgba(8,7,7,.74); border: 1px solid rgba(255,255,255,.14);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--fg-2); }
.band .cap { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 3; font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3);
  background: rgba(8,7,7,.7); padding: .35rem .7rem; border-radius: .4rem; }
.glowfig { position: relative; }
.glowfig::before { content: ""; position: absolute; inset: -14% -7% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 46%, rgba(255,67,56,.18), transparent 72%); filter: blur(54px); }
.glowfig > * { position: relative; z-index: 1; }

/* ---------- feature block: heading left, copy right, pill cta ---------- */
.fb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) auto; gap: 2.5rem; align-items: start; padding: 3.5rem 0 2rem; border-top: 1px solid var(--line); }
.fb h3 { font-size: var(--t-h2s); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; margin: 0; max-width: 14ch; }
.fb h3 b { font-weight: 600; color: var(--fg-3); }
.fb .fb-body { font-size: 1.1rem; line-height: 1.5; color: var(--fg-3); max-width: 44ch; }
.fb .fb-body em { font-style: normal; color: var(--fg); }
.fb .fb-meta { display: flex; gap: .75rem 1.25rem; flex-wrap: wrap; margin-top: 1rem; }
.fb-cta { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 1rem; border-radius: 99px; border: 1px solid rgba(255,67,56,.42); background: rgba(255,67,56,.09);
  color: var(--accent-lift); font-size: .9rem; font-weight: 500; white-space: nowrap; transition: background .16s, border-color .16s; }
.fb-cta:hover { background: rgba(255,67,56,.18); border-color: rgba(255,67,56,.7); color: var(--accent-lift); }

.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.flow > div { padding: 1.25rem 1.4rem 1.4rem 0; border-right: 1px solid var(--line); }
.flow > div:last-child { border-right: 0; padding-right: 0; }
.flow > div:not(:first-child) { padding-left: 1.4rem; }
.flow .k { color: var(--accent); }
.flow b { display: block; font-family: var(--disp); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; margin: .55rem 0 .4rem; }
.flow p { font-size: .9rem; color: var(--fg-3); }
.flow.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flow.two > div:nth-child(2n) { border-right: 0; }
.flow.two > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.flow.two > div:nth-child(2n+1) { padding-left: 0; }

.beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.beats > div { padding: 1.5rem 1.9rem 1.6rem 0; border-right: 1px solid var(--line); }
.beats > div:last-child { border-right: 0; padding-right: 0; }
.beats > div:not(:first-child) { padding-left: 1.9rem; }
.beats .k { color: var(--accent); }
.beats h3 { font-size: var(--t-h4); margin: .75rem 0 .55rem; }
.beats p { font-size: .95rem; color: var(--fg-2); }

.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2.4rem; }
.tri > div { border-top: 1px solid var(--line); padding-top: 1rem; }
.tri b { display: block; font-family: var(--disp); font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: .45rem; }
.tri p { font-size: .95rem; color: var(--fg-2); line-height: 1.55; }

.callout { border-left: 2px solid var(--accent); padding: .15rem 0 .15rem 1.4rem; }
.callout p { font-size: 1rem; color: var(--fg-2); }
.callout b { color: var(--fg); }
.quote-block { border-left: 2px solid var(--line-2); padding: .25rem 0 .25rem 1.25rem; }
.quote-block p { font-size: 1rem; color: var(--fg-2); font-style: italic; }
.quote-block span { display: block; margin-top: .55rem; font-family: var(--mono); font-size: var(--t-label); color: var(--fg-4); letter-spacing: .08em; font-style: normal; }
.code { border: 1px solid var(--line-2); border-radius: var(--r-s); background: rgba(0,0,0,.32); padding: .9rem 1rem; font-family: var(--mono); font-size: .8rem; line-height: 1.6; color: var(--fg-2); overflow-x: auto; white-space: pre; }
.code .k1 { color: var(--accent-lift); } .code .k2 { color: var(--accent2-lift); }

/* ---------- light chapters: flip the tokens, restate the ink ---------- */
.lite {
  --sc-canvas: #f6f2ed; --sc-surface: #ffffff; --sc-ink: #151110; --sc-ink-soft: #4c4541;
  --ink-0: #f6f2ed; --ink-1: #ffffff; --ink-2: #efe9e2; --ink-3: #e4dcd3;
  --fg: #151110; --fg-2: #4c4541; --fg-3: #756d67; --fg-4: #9c948d;
  --line: rgba(20,14,12,.12); --line-2: rgba(20,14,12,.22);
  --glass: rgba(20,14,12,.03); --glass-2: rgba(20,14,12,.055);
  --accent-lift: #c8302a; --accent2-lift: #0a8f2a;
  color: var(--fg); background: var(--ink-0);
}
.lite .btn-p { background: #d63a30; }
.lite .btn-p:hover { background: #c8302a; }
.lite .btn-g { color: var(--fg); border-color: var(--line-2); }
.lite .btn-g:hover { background: var(--glass-2); border-color: rgba(20,14,12,.35); color: var(--fg); }
.lite .panel { background: var(--ink-1); }
.lite .fig, .lite .band { box-shadow: 0 2.5rem 5rem -2.75rem rgba(20,14,12,.45); }
.lite ::selection { background: #d63a30; color: #fff; }
.dark { color: var(--fg); background: var(--ink-0); }

/* ---------- the layered hero ---------- */
.hero { position: relative; overflow: clip; background: var(--ink-0); min-height: 100svh; padding-bottom: 6rem; isolation: isolate; }
.hero__sky { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 70% at 50% 0%, #1a1414 0%, #100d0d 48%, #0f0d0d 100%); }
.hero__sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 34% at 50% 100%, rgba(255,67,56,.22), rgba(255,67,56,0) 70%); }
.layer { position: absolute; left: 50%; will-change: transform; pointer-events: none; max-width: none; }
.hero__far { z-index: 1; bottom: 36%; width: max(1680px, 118%); transform: translateX(-50%); opacity: .42; }
.hero__far .strip { display: flex; gap: .5rem; width: max-content; will-change: transform; }
.hero__far .strip img { width: 190px; height: auto; border-radius: 4px; border: 1px solid rgba(255,255,255,.08); filter: saturate(.85) brightness(.75); flex: none; }
.hero__far .strip.r2 { margin-top: .5rem; }
.hero__far::after { content: ""; position: absolute; inset: -2rem 0; background: linear-gradient(90deg, var(--ink-0), transparent 18%, transparent 82%, var(--ink-0)); }
.hero__mid { z-index: 2; bottom: 34%; width: max(1440px, 100%); height: 0; transform: translateX(-50%); }
.vcard { position: absolute; width: 17rem; border-radius: .6rem; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: var(--ink-1);
  box-shadow: 0 2.5rem 4rem -2rem rgba(0,0,0,.9); }
.vcard img { width: 100%; height: auto; opacity: .92; }
.vcard .vc-tag { position: absolute; left: .55rem; top: .55rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; padding: .25rem .5rem; border-radius: .3rem; color: #fff; background: var(--c, var(--accent)); }
.vcard .vc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c, var(--accent)); }
.vcard.v1 { left: calc(50% - 44rem); bottom: 4rem; transform: rotate(-4deg); }
.vcard.v2 { left: calc(50% - 30rem); bottom: -1rem; transform: rotate(2deg); }
.vcard.v3 { left: calc(50% + 14rem); bottom: 0; transform: rotate(-2deg); }
.vcard.v4 { left: calc(50% + 28rem); bottom: 5rem; transform: rotate(3deg); }
.hero__content { position: relative; z-index: 3; padding-top: clamp(4rem, 9vh, 7rem); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__content h1 { max-width: 20ch; }
.hero__content h1 em { font-style: normal; color: var(--accent); }
.hero__sub { margin-top: 1.4rem; font-size: var(--t-lede); line-height: 1.5; color: var(--fg-2); max-width: 44ch; }
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: 2.1rem; }
.rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--sc-ease-out), transform .9s var(--sc-ease-out); }
.rv.is-in { opacity: 1; transform: none; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero__title .line > span { display: block; transform: translateY(110%); transition: transform 1.1s var(--sc-ease-out); }
.hero__title.is-in .line > span { transform: none; }
.hero__title.is-in .line:nth-child(2) > span { transition-delay: .08s; }
.hero__title.is-in .line:nth-child(3) > span { transition-delay: .16s; }

.hero__device { position: relative; z-index: 3; width: min(60rem, 92%); margin: 3.25rem auto 0; will-change: transform;
  opacity: 0; transform: translateY(70px); transition: opacity 1.1s var(--sc-ease-out), transform 1.1s var(--sc-ease-out); }
.hero__device.is-in { opacity: 1; transform: none; }
.device { border-radius: .9rem; overflow: hidden; background: #0b0a0a; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 6px rgba(255,255,255,.025), 0 4rem 8rem -3rem rgba(0,0,0,.95); }
.device__bar { display: flex; align-items: center; gap: .6rem; height: 2.4rem; padding: 0 .9rem; background: #141111; border-bottom: 1px solid var(--line); }
.device__bar i { width: .6rem; height: .6rem; border-radius: 50%; background: #3a3232; }
.device__url { margin-left: .6rem; flex: 1; display: flex; align-items: center; gap: .4rem; height: 1.6rem; padding: 0 .7rem; border-radius: .4rem; background: rgba(255,255,255,.04);
  font-family: var(--mono); font-size: .72rem; color: var(--fg-3); overflow: hidden; white-space: nowrap; }
.device__url b { font-weight: 400; color: var(--accent-lift); transition: color .3s; }
.device__for { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: #fff; padding: .28rem .6rem; border-radius: .35rem; background: var(--c, var(--accent)); transition: background .4s; white-space: nowrap; }
.device__screen { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; container-type: inline-size; }
.device__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.device__screen .rg { position: absolute; display: flex; align-items: center; overflow: hidden; white-space: pre; color: #fff; background: #0b0713;
  outline: 1px dashed rgba(255,255,255,.35); outline-offset: 1px; opacity: 0; transition: opacity .3s, background .3s; }
.device__screen.has-rg .rg { opacity: 1; }
.device__screen .rg-logo { font-family: var(--disp); font-weight: 700; font-size: 1.35cqw; letter-spacing: -.02em; padding-left: 1.1cqw; }
.device__screen .rg-head { font-family: var(--disp); font-weight: 700; font-size: 3.1cqw; letter-spacing: -.02em; line-height: 1.1; justify-content: center; text-align: center; padding: 0 2cqw; white-space: normal; text-wrap: balance; }
.device__screen .rg-title { font-family: var(--disp); font-weight: 700; font-size: 1.55cqw; letter-spacing: -.015em; background: #111013; padding-left: 0; }
.device__screen .rg-cta { justify-content: center; font-weight: 600; font-size: 1.15cqw; border-radius: .35cqw; outline-color: rgba(255,255,255,.5); }
.device__play { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: .6rem .9rem .7rem; display: flex; align-items: center; gap: .7rem;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72)); }
.device__play .pb { flex: 1; position: relative; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); }
.device__play .pb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); width: 0; }
.device__play .pb em { position: absolute; top: 0; bottom: 0; background: rgba(255,67,56,.45); }
.device__play .tc { font-family: var(--mono); font-size: .68rem; color: #fff; letter-spacing: .04em; min-width: 5.2em; text-align: right; }
.device__play .pp { width: 1.1rem; height: 1.1rem; color: #fff; }

/* the foreground plane: the timeline, drawn, and shaped to dip around the device */
.hero__front { z-index: 4; bottom: -.5rem; width: max(1440px, 100%); transform: translateX(-50%); }
.tl { position: relative; height: 12.5rem; padding: 1.1rem 4vw 0; background: linear-gradient(180deg, rgba(23,19,19,.0) 0, #171313 1.6rem, #131010 100%); border-top: 1px solid var(--line-2);
  clip-path: polygon(0 0, 24% 0, 28% 2.2rem, 72% 2.2rem, 76% 0, 100% 0, 100% 100%, 0 100%); }
.tl__ruler { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--fg-4); margin-top: 2.4rem; }
.tl__row { position: relative; height: 2rem; margin-top: .55rem; border-radius: .35rem; background: rgba(255,255,255,.04); border: 1px solid var(--line); overflow: hidden; }
.tl__row .clip { position: absolute; top: 3px; bottom: 3px; border-radius: .25rem; background: linear-gradient(180deg, #2b2424, #1f1919); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; padding: 0 .6rem;
  font-family: var(--mono); font-size: .62rem; color: var(--fg-3); letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.tl__row .clip.cam { background: linear-gradient(180deg, #2a2731, #1e1c24); }
.tl__row .band { position: absolute; top: 3px; bottom: 3px; border-radius: .25rem; background: rgba(255,67,56,.28); border: 1px solid rgba(255,67,56,.8); display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; color: #fff; box-shadow: none; }
.tl__row .band.is-on { background: rgba(255,67,56,.6); }
.tl__ph { position: absolute; top: 2rem; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 14px 2px rgba(255,67,56,.5); pointer-events: none; z-index: 2; }
.tl__ph::before { content: ""; position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.tl__ph span { position: absolute; top: -1.9rem; left: .6rem; font-family: var(--mono); font-size: .62rem; color: var(--accent-lift); white-space: nowrap; }
.hero__floor { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 9rem; pointer-events: none; background: linear-gradient(180deg, rgba(15,13,13,0), rgba(15,13,13,.75) 55%, var(--ink-0) 92%); }

/* proof bar under the hero */
.proofbar { display: flex; align-items: center; gap: .9rem 2.25rem; flex-wrap: wrap; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proofbar > b { font-family: var(--disp); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.proofbar .pf { display: flex; align-items: baseline; gap: .55rem; }
.proofbar .pf i { font-style: normal; font-family: var(--disp); font-weight: 600; font-size: 1.05rem; color: var(--fg); }
.proofbar .slot { margin-left: auto; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4); border: 1px dashed var(--line-2); border-radius: .4rem; padding: .35rem .7rem; }

/* ---------- section two: the pinned rewrite ---------- */
.how-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; height: 100%; }
.how-copy { position: relative; min-height: 18rem; }
.how-beat { position: absolute; inset: 0; }
.how-beat h3 { font-size: var(--t-h2s); letter-spacing: -.022em; margin-bottom: .9rem; }
.how-beat p { font-size: 1.05rem; color: var(--fg-2); max-width: 40ch; }
.how-visual { position: relative; }
.how-visual .fig { border-radius: .75rem; }
.how-sel { position: absolute; left: 25%; top: 30%; width: 33%; height: 34%; border: 1.5px solid var(--accent); border-radius: 4px; background: rgba(255,67,56,.18); }
.how-sel::after { content: "SELECTED"; position: absolute; left: 1px; bottom: calc(100% + 4px); font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; color: var(--accent); }
.how-say { margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.how-say p { font-size: .92rem; color: var(--fg-2); background: var(--glass); border: 1px solid var(--line); border-radius: .55rem; padding: .6rem .8rem; line-height: 1.45; }
.how-say b { color: var(--fg); font-weight: 600; }
.how-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.how-tags span { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .6rem; border-radius: .35rem; border: 1px solid var(--line-2); color: var(--fg-3); }
.how-tags span.on { border-color: var(--accent); color: var(--accent-lift); }
.how-dots { display: flex; gap: .4rem; margin-top: 1.4rem; }
.how-dots i { width: 2rem; height: 3px; border-radius: 2px; background: var(--line-2); }
.how-dots i.on { background: var(--accent); }

/* ---------- the ladder ---------- */
.ladder { border-top: 1px solid var(--line); }
.ladder > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 15rem; gap: 1.5rem; align-items: baseline; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.ladder .lnum { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; color: var(--fg-4); }
.ladder b { font-family: var(--disp); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; display: block; margin-bottom: .3rem; }
.ladder p { font-size: .95rem; color: var(--fg-2); line-height: 1.55; max-width: 62ch; }
.ladder .lscope { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4); text-align: right; white-space: nowrap; }
.ladder > li.is-dyn .lnum, .ladder > li.is-dyn .lscope { color: var(--accent); }

/* ---------- the peak: pick a viewer ---------- */
.dpr-stage { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 1.4rem; }
.dprpick { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.dprpick button { padding: .55rem 1rem; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; font-size: .9rem; font-weight: 500; color: var(--fg-3); transition: background .18s, border-color .18s, color .18s; }
.dprpick button:hover { color: var(--fg); border-color: var(--fg-4); }
.dprpick button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.lite .dprpick button[aria-pressed="true"] { background: #d63a30; border-color: #d63a30; }
.dprpick .cycling { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4); margin-left: .25rem; }
.dprwork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.dprwork > div { min-width: 0; }
.dprwork .lbl { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.dprwork .lbl b { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); font-weight: 400; }
.dprwork .lbl i { font-style: normal; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-lift); }
.dprshot { position: relative; border-radius: .6rem; overflow: hidden; border: 1px solid var(--line-2); }
.dprshot > img { display: block; width: 100%; height: auto; }
.dprsel { position: absolute; left: 25%; top: 30%; width: 33%; height: 34%; border: 1.5px solid var(--accent); border-radius: 4px; background: rgba(255,67,56,.18); }
.dprsel::after { content: "SELECTED"; position: absolute; left: 1px; bottom: calc(100% + 4px); font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; color: var(--accent); }
.dprsay { margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.dprsay p { font-size: .92rem; color: var(--fg-2); background: var(--glass); border: 1px solid var(--line); border-radius: .55rem; padding: .6rem .8rem; line-height: 1.45; }
.dprsay b { color: var(--fg); font-weight: 600; }
.dprnote { margin-top: .8rem; font-size: .9rem; color: var(--fg-3); line-height: 1.55; }
.dprframe { position: relative; border-radius: .6rem; overflow: hidden; border: 1px solid var(--line-2); background: #0b0713; container-type: inline-size; box-shadow: 0 2rem 4rem -2.5rem rgba(0,0,0,.6); }
.dprframe > img { display: block; width: 100%; height: auto; aspect-ratio: 710 / 364; object-fit: fill; }
.dprframe .rg { position: absolute; display: flex; align-items: center; overflow: hidden; white-space: pre; transition: background .4s ease, color .4s ease; outline: 1px dashed rgba(255,255,255,.32); outline-offset: 1px; background: #181619; color: #cfccd6; }
.dprframe .rg-app { left: 13.9%; top: 17.6%; width: 31%; height: 5.6%; font-size: 1.5cqw; letter-spacing: -.01em; }
.dprframe .rg-title { left: 7.1%; top: 37.2%; width: 48%; height: 6.4%; color: #fff; font-weight: 700; font-size: 1.82cqw; letter-spacing: -.02em; font-family: var(--disp); }
.dprframe .stamp { position: absolute; left: .55rem; bottom: .55rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .09em; padding: .3rem .55rem; border-radius: .3rem; background: rgba(6,5,10,.78); color: #fff; }
.dpr-meter { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; margin-top: .5rem; }
.dpr-meter div { display: flex; align-items: baseline; gap: .5rem; }
.dpr-meter b { font-family: var(--disp); font-size: 1.7rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dpr-meter span { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4); }
.dpr-meter b.zero { color: var(--accent-lift); }

.dblocks { margin-top: 1.4rem; }
.dblocks .track { position: relative; height: 2.4rem; border-radius: .45rem; background: var(--ink-3); overflow: hidden; }
.dblocks .blk { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .62rem; letter-spacing: .07em; color: #fff; white-space: nowrap; overflow: hidden; transition: background .45s ease; background: var(--c, var(--accent)); }
.dblocks .blk.b1 { left: 6%; width: 15%; } .dblocks .blk.b2 { left: 33%; width: 22%; } .dblocks .blk.b3 { left: 63%; width: 12%; } .dblocks .blk.b4 { left: 82%; width: 13%; background: var(--accent2); }
.dblocks .ends { display: flex; justify-content: space-between; margin-top: .6rem; }
.dblocks .ends span { font-family: var(--mono); font-size: .66rem; letter-spacing: .09em; color: var(--fg-4); }
.dblocks .legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .9rem; }
.dblocks .legend i { font-style: normal; display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--fg-2); }
.dblocks .legend u { text-decoration: none; width: .65rem; height: .65rem; border-radius: 3px; background: var(--c, var(--accent)); }
.dblocks .legend u.g { background: var(--accent2); }

/* ---------- the eight jobs: a rail ---------- */
.rail-stage { display: flex; flex-direction: column; justify-content: center; }
.rail { display: flex; gap: 1.1rem; padding: 0 var(--sc-gutter); align-items: stretch; }
.rail__lead { flex: none; width: min(26rem, 80vw); display: flex; flex-direction: column; justify-content: center; padding-right: 1.5rem; }
.rail__lead h2 { font-size: var(--t-h2); }
.rail__lead p { margin-top: 1rem; }
.job { flex: none; width: min(21rem, 78vw); display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); color: var(--fg); transition: border-color .16s, background .16s; }
.job:hover { border-color: rgba(255,67,56,.4); background: rgba(255,67,56,.05); color: var(--fg); }
.job .th { border-radius: .5rem; overflow: hidden; border: 1px solid var(--line-2); aspect-ratio: 16 / 9; background: var(--ink-1); }
.job .th img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.job b { font-family: var(--disp); font-size: 1.15rem; font-weight: 600; letter-spacing: -.015em; margin-top: .3rem; }
.job p { font-size: .9rem; color: var(--fg-3); line-height: 1.5; }
.job .go { margin-top: auto; padding-top: .4rem; font-size: .85rem; color: var(--fg-4); }
.job:hover .go { color: var(--accent-lift); }
.rail__end { flex: none; width: min(18rem, 70vw); display: flex; align-items: center; padding-left: 1rem; }
.rail__end p { font-size: 1.1rem; color: var(--fg-3); }
@media (prefers-reduced-motion: no-preference) {
  .job { opacity: .55; transform: translateY(1.5rem); }
  .rail-act .job { transition: opacity .5s var(--sc-ease-out), transform .5s var(--sc-ease-out); }
  .rail-act.is-live .job { opacity: 1; transform: none; }
}

/* ---------- platform grid, models, editing ---------- */
.plat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pcard { background: var(--ink-0); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; transition: background .18s; }
.pcard:hover { background: var(--ink-1); }
.lite .pcard { background: var(--ink-1); }
.lite .pcard:hover { background: var(--ink-2); }
.pcard b { font-family: var(--disp); font-size: 1.15rem; font-weight: 600; letter-spacing: -.017em; }
.pcard p { font-size: .92rem; color: var(--fg-3); line-height: 1.55; }
.models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.mcard { border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem; background: var(--glass); display: flex; flex-direction: column; gap: .5rem; }
.lite .mcard { background: var(--ink-1); }
.mcard .mfig { border-radius: .5rem; overflow: hidden; border: 1px solid var(--line-2); margin: -.25rem 0 .25rem; }
.mcard .mfig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mcard b { font-family: var(--disp); font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
.mcard .role { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4); }
.mcard p { font-size: .9rem; color: var(--fg-3); line-height: 1.52; }

.deck3d { perspective: 1500px; perspective-origin: 48% 46%; padding: 1rem 0 .5rem; }
.deck3d .stack3 { position: relative; width: 100%; aspect-ratio: 16 / 10; transform-style: preserve-3d;
  transform: rotateX(calc(13deg - var(--sc-p, 0) * 9deg)) rotateY(calc(-17deg + var(--sc-p, 0) * 11deg)) rotateZ(1.2deg) scale(.86); }
.deck3d .lyr { position: absolute; border: 1px solid var(--line-2); border-radius: .5rem; overflow: hidden; background: var(--ink-1); box-shadow: 0 2.75rem 5.5rem -3.25rem rgba(0,0,0,.98); }
.deck3d .lyr img { display: block; width: 100%; height: auto; }
.deck3d .l-chat { left: 0; top: 6%; width: 26%; transform: translateZ(calc(60px + var(--sc-p, 0) * 90px)); }
.deck3d .l-stage { left: 29%; top: 0; width: 46%; transform: translateZ(calc(10px + var(--sc-p, 0) * 30px)); }
.deck3d .l-script { right: 2%; top: 5%; width: 28%; transform: translateZ(calc(-20px - var(--sc-p, 0) * 40px)); }
.deck3d .l-time { left: 20%; bottom: 2%; width: 64%; transform: translateZ(calc(-60px - var(--sc-p, 0) * 90px)); }
.deck3d .tag { position: absolute; left: .5rem; bottom: .5rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; padding: .2rem .45rem; border-radius: 4px; background: rgba(6,5,5,.8); color: #fff; }

/* ---------- integrations ---------- */
.iwall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.itile { background: var(--ink-0); padding: 1rem .75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-height: 5rem; text-align: center; transition: background .16s; }
.lite .itile { background: var(--ink-1); }
.itile:hover { background: var(--ink-2); }
.itile svg { width: 1.75rem; height: 1.75rem; display: block; }
.itile.wordmark { padding: 1rem .9rem; }
.itile.wordmark svg { width: auto; height: auto; max-width: 100%; max-height: 1.75rem; }
.itile img { width: auto; height: 1.75rem; max-width: 7.5rem; display: block; }
.itile.wordmark img { height: auto; max-height: 1.75rem; max-width: 7.5rem; }
.itile span { font-family: var(--disp); font-size: .88rem; font-weight: 600; color: var(--fg-2); line-height: 1.25; letter-spacing: -.012em; }
.itile.has-logo span { font-size: .78rem; color: var(--fg-3); font-weight: 500; }
.count-row { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: baseline; margin-bottom: 1.5rem; }
.count-row b { font-family: var(--disp); font-size: 3rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.count-row span { display: block; margin-top: .3rem; font-size: .9rem; color: var(--fg-3); }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.plan { display: flex; flex-direction: column; gap: .8rem; padding: 1.75rem 1.5rem; border-right: 1px solid var(--line); }
.plan:last-child { border-right: 0; }
.plan.hi { background: linear-gradient(180deg, rgba(255,67,56,.09), rgba(255,67,56,.01)); }
.plan .nm { font-family: var(--disp); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.plan .pr { display: flex; align-items: baseline; gap: .35rem; }
.plan .pr b { font-family: var(--disp); font-size: 2.6rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.plan .pr span { font-size: .88rem; color: var(--fg-4); }
.plan .sub { font-size: .9rem; color: var(--fg-2); min-height: 2.6rem; }
.plan ul { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.plan li { font-size: .9rem; color: var(--fg-2); padding-left: 1.05rem; position: relative; line-height: 1.5; }
.plan li::before { content: ""; position: absolute; left: 0; top: .65em; width: .5rem; height: 1px; background: var(--accent2-lift); }
.plan li.no { color: var(--fg-4); }
.plan li.no::before { background: var(--fg-4); }
.cmp { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cmp th, .cmp td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); font-weight: 400; }
.cmp td:first-child { color: var(--fg-2); }
.cmp td.c { text-align: center; color: var(--fg-3); }
.cmp td.y { text-align: center; color: var(--accent2-lift); }
.cmp tbody tr:hover { background: rgba(255,255,255,.02); }
.cmp tr:last-child td { border-bottom: 0; }
.tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0,0,0,.22); }
.lite .tblwrap { background: var(--ink-1); }
.nope { display: inline-block; width: .8rem; height: 1px; background: var(--fg-4); vertical-align: middle; opacity: .8; }

.shelf-ctl { display: grid; grid-template-columns: clamp(15rem, 26%, 20rem) minmax(0, 1fr); gap: 1.6rem 2rem; align-items: end; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.shelf-ctl .big { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.shelf-ctl .big b { font-family: var(--disp); font-size: 2.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.shelf-ctl .big > span { font-family: var(--mono); font-size: .78rem; color: var(--fg-3); letter-spacing: .02em; }
.shelf-ctl .rng { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.shelf-ctl input[type="range"] { width: 100%; accent-color: var(--accent); height: 1.4rem; margin: 0; }
.shelf-ctl .ticks { display: flex; justify-content: space-between; gap: .4rem; }
.shelf-ctl .ticks span { transition: color .3s; }
.shelf-ctl[data-i="0"] .ticks span:nth-child(1), .shelf-ctl[data-i="1"] .ticks span:nth-child(2), .shelf-ctl[data-i="2"] .ticks span:nth-child(3) { color: var(--accent-lift); }
.wall-wrap { perspective: 2100px; overflow: hidden; padding: .25rem 0 2rem; }
.wall { transform: rotateX(9deg) rotateY(-20deg) rotateZ(.8deg); transform-style: preserve-3d; transform-origin: 34% 50%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; width: 138%; margin-left: -11%;
  -webkit-mask-image: linear-gradient(101deg, #000 52%, rgba(0,0,0,.3) 86%, transparent 99%); mask-image: linear-gradient(101deg, #000 52%, rgba(0,0,0,.3) 86%, transparent 99%); }
.wt { position: relative; border-radius: .55rem; overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-1); box-shadow: 0 1.6rem 3.2rem -1.9rem rgba(0,0,0,.95); transition: filter .55s ease, opacity .55s ease; }
.wt img { width: 100%; height: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.wall .wt:nth-child(-n+6) { transform: translateZ(34px); }
.wall .wt:nth-child(n+7):nth-child(-n+12) { transform: translateZ(-30px); }
.wall .wt:nth-child(n+13) { transform: translateZ(-94px); }
.wt i { position: absolute; right: 5px; bottom: 5px; font-style: normal; font-family: var(--mono); font-size: .6rem; letter-spacing: .04em; background: rgba(0,0,0,.74); padding: 2px 5px; border-radius: 3px; color: #fff; transition: opacity .4s; }
.wall[data-keep="4"] .wt:nth-child(n+5), .wall[data-keep="9"] .wt:nth-child(n+10), .wall[data-keep="14"] .wt:nth-child(n+15) { filter: grayscale(1) brightness(.46) contrast(.82); opacity: .42; }
.wall[data-keep="4"] .wt:nth-child(n+5) i, .wall[data-keep="9"] .wt:nth-child(n+10) i, .wall[data-keep="14"] .wt:nth-child(n+15) i { opacity: 0; }
.wall-legend { display: flex; gap: .9rem 2rem; flex-wrap: wrap; align-items: baseline; }
.wall-legend b { font-family: var(--disp); font-size: 1.05rem; letter-spacing: -.02em; }
.wall-legend p { font-size: .95rem; color: var(--fg-2); max-width: 64ch; }
.life { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.life > div { min-width: 0; }
.life .frame { position: relative; border-radius: .55rem; overflow: hidden; border: 1px solid var(--line-2); margin-bottom: 1rem; box-shadow: 0 1.4rem 2.75rem -1.9rem rgba(0,0,0,.95); }
.life .frame img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.life .frame em { position: absolute; left: 7px; top: 7px; font-style: normal; font-family: var(--mono); font-size: .6rem; letter-spacing: .05em; padding: 3px 6px; border-radius: 4px; background: rgba(0,0,0,.78); color: #fff; }
.life .frame em.warn { background: rgba(224,161,68,.94); color: #1a1206; }
.life .frame em.dead { background: rgba(0,0,0,.86); color: var(--fg-3); border: 1px solid var(--line-2); }
.life .bar { position: relative; padding-top: .8rem; border-top: 1px solid var(--line); }
.life .bar::before { content: ""; position: absolute; left: 0; top: -1px; width: 1.6rem; height: 1px; background: var(--accent); }
.life .d { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4); }
.life h4 { font-family: var(--disp); font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; margin: .45rem 0 .4rem; }
.life p { font-size: .9rem; color: var(--fg-3); line-height: 1.55; }
.life > div:nth-child(4) .frame img { filter: grayscale(1) brightness(.46) contrast(.85); opacity: .72; }

/* ---------- page hero (every page but home) ---------- */
.phero { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.phero h1 { font-size: var(--t-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; max-width: 19ch; }
.phero h1 em { font-style: normal; color: var(--accent); }
.phero .lede { margin-top: 1.3rem; font-size: var(--t-lede); }
.phero-meta { display: flex; flex-wrap: wrap; gap: .75rem 1.4rem; margin-top: 1.5rem; align-items: center; }
.phero-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.8rem; }
.crumb { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .15em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 1rem; }
.crumb a { color: var(--fg-4); } .crumb a:hover { color: var(--fg); }
.crumb b { color: var(--accent); font-weight: 400; }
.phero-media { margin-top: clamp(2rem, 4vw, 3.5rem); }
.ph-note { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .09em; text-transform: uppercase; color: #e0a144; }

/* ---------- specific page devices ---------- */
.uc { border-top: 1px solid var(--line); }
.uc a { display: grid; grid-template-columns: 7.5rem 11rem minmax(0, 1fr) 1.5rem; gap: 1.5rem; align-items: center; width: 100%; padding: 1.25rem .4rem; border-bottom: 1px solid var(--line); text-align: left; transition: background .16s, padding .16s; color: var(--fg); }
.uc a:hover { background: rgba(255,67,56,.05); padding-left: .9rem; color: var(--fg); }
.uc a > b { font-family: var(--disp); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.uc .th { position: relative; display: block; border-radius: .45rem; overflow: hidden; border: 1px solid var(--line-2); background: var(--ink-1); box-shadow: 0 .75rem 1.6rem -1.1rem rgba(0,0,0,.95); transition: transform .2s ease, border-color .2s ease; }
.uc .th img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; opacity: .86; }
.uc a:hover .th { transform: translateY(-2px) scale(1.035); border-color: rgba(255,67,56,.4); }
.uc a p { font-size: .95rem; color: var(--fg-2); }
.uc a .go { justify-self: end; color: var(--fg-4); transition: color .16s, transform .16s; }
.uc a:hover .go { color: var(--accent-lift); transform: translateX(4px); }

.man { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.man > div { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0)); min-width: 0; }
.man .no { font-family: var(--mono); font-size: var(--t-label); color: var(--accent); letter-spacing: .11em; }
.man h3 { font-size: 1.35rem; letter-spacing: -.025em; margin: .55rem 0 .5rem; }
.man p { font-size: .95rem; color: var(--fg-2); }
.man .proof { position: relative; border-radius: .6rem; overflow: hidden; border: 1px solid var(--line-2); background: rgba(0,0,0,.34); aspect-ratio: 16 / 9; min-height: 10rem; display: flex; align-items: center; justify-content: center; padding: 1.1rem; margin-bottom: 1.1rem; }
.man .proof.tight { padding: 0; display: block; }
.man .proof img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pmark { position: absolute; right: .7rem; bottom: 3rem; display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem .3rem .45rem; border-radius: .45rem; background: rgba(8,7,7,.84); border: 1px solid rgba(255,255,255,.15); font-family: var(--disp); font-weight: 700; font-size: .78rem; letter-spacing: -.01em; color: #fff; }
.pmark img, .man .proof .pmark img { height: 1rem; width: auto; }
.pkill { position: absolute; left: 0; right: 0; bottom: 0; padding: .55rem .75rem; background: rgba(8,7,7,.92); border-top: 1px solid var(--line-2); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pkill s { font-size: .82rem; color: var(--fg-4); text-decoration-color: var(--accent); }
.pkill.plain s { text-decoration: none; color: var(--fg-2); }
.pkill span { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-lift); }
.pbadge { position: absolute; left: .7rem; top: .7rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; padding: 3px 7px; border-radius: 4px; background: rgba(0,0,0,.8); color: #fff; }
.pbadge.warn { background: rgba(224,161,68,.94); color: #1a1206; }
.cnt { display: flex; flex-direction: column; gap: .7rem; width: 100%; }
.cnt > div { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: .55rem; border: 1px solid var(--line-2); background: rgba(0,0,0,.3); min-width: 0; }
.cnt b { font-family: var(--disp); font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; }
.cnt .t { font-size: .85rem; color: var(--fg-3); min-width: 0; }
.cnt .tag { margin-left: auto; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cnt .ok { border-color: rgba(0,192,42,.34); } .cnt .ok b, .cnt .ok .tag { color: var(--accent2-lift); }
.cnt .bad b, .cnt .bad .t { color: var(--fg-4); text-decoration: line-through; text-decoration-color: var(--accent); }
.cnt .bad .tag { color: var(--accent-lift); }
.cnt .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); flex: none; }
.cnt .bad .dot { background: var(--fg-4); }
.lanes { display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr); width: 100%; align-items: stretch; }
.lanes .lane { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.lanes .lane > b { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-4); margin-bottom: 2px; }
.lanes .lane u { text-decoration: none; font-size: .8rem; color: var(--fg-2); padding: .4rem .55rem; border-radius: .4rem; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.lanes .lane.priv u { border-color: rgba(0,192,42,.26); background: rgba(0,192,42,.06); }
.lanes .wallx { position: relative; }
.lanes .wallx::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: repeating-linear-gradient(180deg, var(--accent) 0 5px, transparent 5px 10px); opacity: .8; }
.lanes .wallx::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--ink-1); }

.cdown { display: flex; gap: .5rem; margin-top: .6rem; }
.cdown div { flex: 1; border: 1px solid var(--line); border-radius: .5rem; background: rgba(0,0,0,.3); padding: .5rem 0; text-align: center; }
.cdown b { font-family: var(--mono); font-size: 1.2rem; display: block; letter-spacing: -.02em; }
.cdown span { font-family: var(--mono); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-4); }
.simul { display: flex; flex-wrap: wrap; gap: .45rem; }
.simul i { font-style: normal; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border-radius: .45rem; border: 1px solid var(--line); background: var(--glass); font-size: .82rem; color: var(--fg-2); }
.simul i .on { width: 5px; height: 5px; border-radius: 999px; background: var(--accent2); }
.simul i .off { width: 5px; height: 5px; border-radius: 999px; background: var(--fg-4); }
.an { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
.curve { padding: 1.25rem 1.25rem .75rem; }
.meter { height: 5px; border-radius: 3px; background: rgba(255,255,255,.09); position: relative; overflow: hidden; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.meter i.g { background: var(--accent2); }
.ev-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ev-tbl th { text-align: left; font-family: var(--mono); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-4); font-weight: 400; padding: .65rem .9rem; border-bottom: 1px solid var(--line); }
.ev-tbl td { padding: .55rem .9rem; border-bottom: 1px solid var(--line); color: var(--fg-2); vertical-align: top; }
.ev-tbl tr:last-child td { border-bottom: 0; }
.ev-tbl td.m { font-family: var(--mono); font-size: .75rem; color: var(--accent-lift); white-space: nowrap; }
.wave { display: flex; align-items: center; gap: 2px; height: 7rem; padding: 0 .75rem; }
.wave span { flex: 1; min-width: 0; border-radius: 1px; background: linear-gradient(180deg, var(--accent), rgba(255,67,56,.35)); opacity: .85; }
.wave span.q { background: linear-gradient(180deg, var(--accent2), rgba(0,192,42,.35)); }
.vox { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .75rem; border-top: 1px solid var(--line-2); background: rgba(0,0,0,.35); }
.vox div { display: flex; gap: .55rem; align-items: baseline; font-size: .8rem; min-width: 0; }
.vox b { font-family: var(--mono); font-size: .65rem; color: var(--fg-4); flex: none; }
.vox .old span { color: var(--fg-4); text-decoration: line-through; text-decoration-color: var(--accent); }
.vox .new span { color: var(--accent2-lift); }
.ibadges { display: flex; flex-wrap: wrap; gap: .55rem; }
.ibadges span { font-family: var(--disp); font-size: .85rem; font-weight: 600; letter-spacing: -.01em; padding: .5rem .9rem; border-radius: 99px; border: 1px solid var(--line-2); background: var(--glass); color: var(--fg-2); }
.icat { margin-top: 1.4rem; }
.icat > b { display: block; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .11em; text-transform: uppercase; color: var(--fg-4); margin-bottom: .6rem; }

/* the branching demo (demos page) */
.demo-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.player { border: 1px solid var(--line-2); border-radius: var(--r-l); overflow: hidden; background: #000; position: relative; }
.player-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0b0e13; }
.player-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .92; }
.ov { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; padding: 2.5rem 1.4rem 1.4rem; background: linear-gradient(0deg, rgba(5,6,8,.9), rgba(5,6,8,.62)); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.ov.is-on { display: flex; }
.ov-in { width: 100%; max-width: 26rem; text-align: center; }
.ov-in h4 { font-size: 1.25rem; margin-bottom: .4rem; }
.ov-in p { font-size: .85rem; color: var(--fg-2); }
.branch-opts { display: flex; flex-direction: column; gap: .45rem; margin-top: .9rem; text-align: left; }
.branch-opts button { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: .55rem; border: 1px solid var(--line-2); background: rgba(255,255,255,.06); font-size: .88rem; font-weight: 500; transition: background .16s, border-color .16s, transform .16s; }
.branch-opts button:hover { background: rgba(255,67,56,.15); border-color: rgba(255,67,56,.45); transform: translateX(3px); }
.branch-opts .kk { font-family: var(--mono); font-size: .68rem; color: var(--fg-4); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.player-ctl { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-top: 1px solid var(--line); background: rgba(255,255,255,.02); }
.player-ctl .tk { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); position: relative; }
.player-ctl .tk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); width: 0%; transition: width .3s; }
.trail-row { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .85rem; align-items: baseline; }
.trail-row:last-child { border-bottom: 0; }
.trail-row .t { font-family: var(--mono); font-size: .7rem; color: var(--fg-4); }
.trail-row .e { font-family: var(--mono); font-size: .75rem; color: var(--accent-lift); }
.trail-row .d { color: var(--fg-3); font-size: .8rem; }
.trail-row.new { background: rgba(255,67,56,.07); }

/* the exploded watch page (share page) rendered as a stack */
.pane { border: 1px solid var(--line-2); border-radius: .7rem; background: rgba(14,12,12,.92); box-shadow: 0 2.5rem 5rem -2.5rem rgba(0,0,0,.9); overflow: hidden; }
.pane-shot img { display: block; width: 100%; height: auto; }
.mini-hd { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.mini-hd b { font-size: .8rem; font-weight: 600; }
.mini-hd .sp { margin-left: auto; font-family: var(--mono); font-size: .66rem; color: var(--fg-4); }
.tx-line { display: flex; gap: .6rem; padding: .45rem .8rem; font-size: .8rem; color: var(--fg-2); }
.tx-line b { font-family: var(--mono); font-size: .66rem; color: var(--fg-4); flex: none; padding-top: 2px; font-weight: 400; }
.tx-line.on { background: rgba(255,67,56,.08); color: var(--fg); }
.cm { display: flex; gap: .6rem; padding: .55rem .8rem; }
.cm .av { width: 1.45rem; height: 1.45rem; border-radius: 999px; flex: none; background: linear-gradient(140deg, #4a3a3a, #2a1f1f); }
.cm p { font-size: .8rem; color: var(--fg-2); }
.cm b { font-size: .76rem; display: block; color: var(--fg); }
.stat-strip { display: flex; }
.stat-strip div { flex: 1; padding: .7rem .8rem; border-right: 1px solid var(--line); }
.stat-strip div:last-child { border-right: 0; }
.stat-strip b { font-family: var(--disp); font-size: 1.3rem; font-weight: 600; display: block; letter-spacing: -.02em; }
.stat-strip span { font-family: var(--mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-4); }
.rx { display: flex; gap: .4rem; padding: .6rem .8rem; }
.rx i { width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid var(--line); display: grid; place-items: center; font-size: .8rem; font-style: normal; background: var(--glass); }
.watch-stack { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.watch-stack .col { display: grid; gap: 1rem; }

/* ---------- the close ---------- */
.close-sec { padding: 0; min-height: 68svh; display: flex; align-items: center; background: var(--ink-0); }
.close-in { width: 100%; }
.close-in { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 2.5rem; align-items: end; padding-top: 4rem; padding-bottom: 4rem; }
.close-copy h2 { max-width: 18ch; }
.close-copy .lede { margin-top: 1.2rem; }
.close-acts { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 3.5rem 0 2.5rem; background: var(--ink-0); }
.foot-in { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 1.75rem; }
.foot-brand { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.foot-brand .brand img { height: 1.9rem; width: auto; }
.foot-brand p { max-width: 30ch; }
.foot h5 { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-4); margin: 0 0 .8rem; font-weight: 400; }
.foot ul { display: flex; flex-direction: column; gap: .5rem; }
.foot li a { font-size: .9rem; color: var(--fg-3); }
.foot li a:hover { color: var(--fg); }
.foot-bot { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--fg-4); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .mega-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .models, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan { border-bottom: 1px solid var(--line); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow > div { border-bottom: 1px solid var(--line); padding-left: 0; padding-right: 1.4rem; }
  .flow > div:nth-child(2n) { border-right: 0; padding-left: 1.4rem; }
  .iwall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .an, .demo-wrap, .watch-stack { grid-template-columns: minmax(0, 1fr); }
  .vcard.v1 { left: calc(50% - 40rem); } .vcard.v4 { left: calc(50% + 24rem); }
}
@media (max-width: 900px) {
  :root { --t-display: 3.1rem; --t-h2: 2.3rem; --t-h2s: 1.95rem; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .mega { display: none !important; }
  .g2, .g3, .g4, .beats, .tri, .man, .split, .dprwork, .how-stage, .plat { grid-template-columns: minmax(0, 1fr); }
  .plat { gap: 1px; }
  .beats > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
  .beats > div:last-child { border-bottom: 0; }
  .rows > li, .rows.tight > li { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .rows > li > *:not(b) { grid-column: 1; }
  .fb { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 2.5rem 0 1.5rem; }
  .ladder > li { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .4rem .9rem; align-items: start; }
  .ladder .lscope { grid-column: 2; text-align: left; margin-top: .1rem; }
  .uc a { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .4rem .9rem; align-items: start; }
  .uc .th { grid-row: span 2; }
  .uc a .go { display: none; }
  .life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf-ctl { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); transform: rotateX(6deg) rotateY(-14deg); }
  .close-in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero__content h1 { max-width: 14ch; }
  .hero__mid { display: none; }
  .hero__far { bottom: 52%; opacity: .35; }
  .tl { height: 9rem; }
  .how-copy { min-height: 17rem; }
  .how-stage { align-content: center; gap: 1.5rem; }
  .how-beat h3 { font-size: 1.5rem; }
  .device__screen .rg-head { font-size: 3.4cqw; }
  .cmp { font-size: .8rem; }
  .brand img { height: 1.7rem; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { border-right: 0; }
  .iwall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root { --t-display: 2.45rem; --t-h2: 1.95rem; --t-h2s: 1.7rem; --t-lede: 1.05rem; }
  .hero__content h1 { max-width: 100%; }
  .hero__cta, .phero-cta, .close-acts { flex-direction: column; align-items: stretch; }
  .hero__cta .btn, .phero-cta .btn, .close-acts .btn { width: 100%; }
  .hero__device { width: 100%; }
  .life, .models, .foot-in { grid-template-columns: minmax(0, 1fr); }
  .foot-bot { flex-direction: column; align-items: flex-start; }
  .proofbar .slot { margin-left: 0; }
  .stat-strip { flex-wrap: wrap; }
  .stat-strip div { flex: 1 1 46%; border-bottom: 1px solid var(--line); }
  .tl { display: none; }
  .hero { padding-bottom: 3rem; min-height: 0; }
  .hero__far { display: none; }
  .hero__floor { height: 3rem; }
  .deck3d .stack3 { transform: none; aspect-ratio: auto; display: grid; gap: .75rem; }
  .deck3d .lyr { position: static; width: 100% !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .hero__device, .hero__title .line > span { opacity: 1; transform: none; transition: none; }
  .layer { transform: translateX(-50%) !important; }
  .deck3d .stack3 { transform: none; }
  .job { opacity: 1; transform: none; }
}