/* Landing v4. Tokens come from ../brand/refresh-20260923/themes.css (data-brand="nocturne"). */
:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: max(20px, calc((100vw - 1280px) / 2));
  --wall-gap: 6px;
  --focus-ring: #8e80ff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Section links land below the floating nav (16px inset + its height), with room to breathe. */
html { background: var(--dw-bg); scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  background: var(--dw-bg);
  color: var(--dw-fg);
  font: 400 16px/1.5 var(--dw-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--dw-display); font-weight: 700; letter-spacing: var(--dw-display-tracking); }
h1 { font-size: clamp(40px, 5.4vw, 82px); line-height: 1.02; }
h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; }
h3 { font-size: 17px; letter-spacing: -0.01em; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 60; padding: 10px 14px; background: #fff; color: #000; border-radius: 8px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

/* The emphasis ribbon: the logo's gradient drawn under the word, never as tinted text. */
.ribbon {
  background: var(--dw-type-gradient) no-repeat 0 92% / 100% 0.13em;
  padding-bottom: 0.02em;
}

.lede { font-size: 18px; line-height: 1.6; color: var(--dw-muted); max-width: 31em; }
.fine { font-size: 13px; line-height: 1.5; color: var(--dw-subtle); }

/* One homepage button system (founder, 27 September): the approved pop-down press, plus the
   navbar Start today shine sweep on hover, without its outline ring. Main CTAs keep Higgsfield's
   measured 3px same-hue edge inside the face: hover 1px down onto a 2px edge, press 3px onto 0
   (NBS timing, .12s). Navbar buttons keep their approved shadows and take the same travel.
   The login popup's buttons are separate and unchanged. */
.btn {
  --ring: 0 0 #0000; --edge: rgb(5 4 14 / 55%); --under: 0 6px 4px rgb(0 0 0 / 25%), 0 32px 24px rgb(0 0 0 / 15%);
  --glow: var(--under); --glow-on: var(--under);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border: 0; border-radius: var(--dw-button-radius);
  font: 600 15px/1 var(--dw-body); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--ring), inset 0 -3px 0 var(--edge), var(--glow);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease;
}
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 26%) 50%, transparent 80%);
  transform: translateX(-120%);
}
.btn:not(:disabled):is(:hover, :focus-visible)::after, .composer:is(:hover, :focus-visible) > .btn::after {
  transform: translateX(120%); transition: transform .7s var(--ease);
}
.btn:not(:disabled):hover, .composer:hover > .btn {
  transform: translateY(1px); box-shadow: var(--ring), inset 0 -2px 0 var(--edge), var(--glow-on);
}
.btn:not(:disabled):active, .composer:active > .btn {
  transform: translateY(3px); box-shadow: var(--ring), inset 0 0 0 var(--edge), var(--glow-on);
}
/* Every main button carries Higgsfield's measured black shadow beneath it (0 6px 4px 25%,
   0 32px 24px 15%); it does not change on hover. */
.btn-primary { --edge: rgb(25 32 120 / 60%); background: var(--dw-action); color: var(--dw-action-ink); }
/* Ultra: Higgsfield's treatment in DreamWild's own red, a crimson-to-scarlet sweep in the same
   direction as the primary gradient (white label >= 4.6:1), over its darker same-hue edge.
   Founder picked red over the brand violet, 27 September. */
:root { --ultra-rgb: 229 23 63; --ultra-face: linear-gradient(90deg, #c8102e, #e5173f); --ultra-edge: rgb(110 6 24 / 70%); }
.btn-ultra { --edge: var(--ultra-edge); background: var(--ultra-face); color: #fff; }
.btn-ghost { background: var(--dw-surface-2); color: var(--dw-fg); }
.btn-light { --edge: rgb(10 10 20 / 16%); background: #fff; color: #0e0e10; }
/* A white band vanishes on a white face: the light button sweeps a faint cool sheen instead (as the popup's Google button). */
.btn-light::after { background: linear-gradient(100deg, transparent 20%, rgb(40 44 70 / 10%) 50%, transparent 80%); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.nav .btn { --edge: transparent; --under: 0 0 #0000; --glow-on: 0 8px 22px -12px rgb(43 106 254 / 75%); }
.nav .btn-primary { --glow: 0 10px 32px -10px rgb(43 106 254 / 70%); }
.nav .btn-primary:not(:disabled):hover { filter: brightness(1.06); }
/* A faint fill gives Login the same rendered footprint as Start Today: a bare 1px ring alone drew a
   pixel shorter at fractional zoom. */
.nav .btn-ghost { --ring: inset 0 0 0 1px var(--dw-line-strong); background: rgb(255 255 255 / 4%); }
.nav .btn-ghost:hover { background: var(--dw-surface-2); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-description { margin: 26px auto 0; max-width: 560px; color: #e3e3e8; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; text-wrap: balance; }

/* Owned NBS nav geometry (site/public/css/nav.css): the same content stays put
   while its surface contracts over the first 20px of root scroll. DreamWild's
   dark glass uses the measured Blake surface, with our existing radius token. */
@property --dw-nav-progress { syntax: "<number>"; inherits: true; initial-value: 0; }
.nav {
  --dw-nav-progress: 0;
  --nav-float-inset: -14px;
  position: fixed; top: calc(16px * var(--dw-nav-progress)); left: 50%; z-index: 40;
  width: min(1280px, calc(100% - 40px)); height: 64px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: env(safe-area-inset-top); background: transparent; isolation: isolate;
}
.nav::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 calc((50% - 50vw) * (1 - var(--dw-nav-progress)) + var(--nav-float-inset) * var(--dw-nav-progress));
  border: 1px solid rgb(255 255 255 / calc(.08 * var(--dw-nav-progress)));
  border-radius: calc(var(--dw-button-radius) * var(--dw-nav-progress));
  background: rgb(14 16 19 / calc(.72 * var(--dw-nav-progress)));
  -webkit-backdrop-filter: blur(calc(20px * var(--dw-nav-progress)));
  backdrop-filter: blur(calc(20px * var(--dw-nav-progress)));
  box-shadow: 0 calc(10px * var(--dw-nav-progress)) calc(40px * var(--dw-nav-progress)) calc(-10px * var(--dw-nav-progress)) rgb(0 0 0 / calc(.6 * var(--dw-nav-progress))),
    inset 0 1px 0 rgb(255 255 255 / calc(.06 * var(--dw-nav-progress)));
}
@supports (animation-timeline: scroll()) {
  .nav:not([data-nav-fallback]) {
    animation: dw-nav-float linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 20px;
  }
  @keyframes dw-nav-float { from { --dw-nav-progress: 0; } to { --dw-nav-progress: 1; } }
}
@media (prefers-reduced-motion: reduce) { .nav { animation: none !important; } }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--dw-wordmark); letter-spacing: -0.02em; text-decoration: none; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { font-size: 14px; color: var(--dw-muted); text-decoration: none; }
.nav-links a:hover { color: var(--dw-fg); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Tiles: vertical 9:16, real output, nothing on the image at rest. */
.tile { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: var(--dw-surface); isolation: isolate; }
.tile video { width: 100%; height: 100%; object-fit: cover; }
.tile-cap {
  position: absolute; inset: auto 0 0; z-index: 1; display: flex; justify-content: space-between; align-items: end;
  padding: 40px 14px 13px; font-size: 13px; font-weight: 600;
  background: linear-gradient(transparent, rgb(0 0 0 / 72%));
  opacity: 0; transform: translateY(6px); transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.tile-cap i { font-style: normal; color: var(--dw-muted); font-weight: 500; }
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; transform: none; }

/* ---------------- A. Feed ---------------- */
.a-hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 56px;
  padding: 64px var(--gutter) 0;
}
.a-stage { display: none; }
.a-copy { padding: 48px 0; }
.a-copy .lede { margin: 26px 0 34px; }
.a-copy .fine { margin-top: 14px; }
.style-index { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; padding: 0; margin: 44px 0 0; }
.style-index button {
  background: none; border: 0; padding: 4px 0; font: 500 13px var(--dw-body); color: var(--dw-subtle); cursor: pointer;
  transition: color 0.16s var(--ease);
}
.style-index button:hover, .style-index button:focus-visible { color: var(--dw-fg); }
.a-wall {
  align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wall-gap);
  height: 100svh; margin-top: -64px;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.a-wall .col { display: flex; flex-direction: column; gap: var(--wall-gap); will-change: transform; }
.a-wall .col:first-child { padding-top: 22svh; }
.a-wall .col-center { justify-content: center; }
.a-wall .col:last-child { padding-top: 12svh; }
.a-wall .tile { transition: opacity 0.3s var(--ease); }
.a-wall[data-focus] .tile { opacity: 0.22; }
.a-wall[data-focus="3d"] [data-style="3d"], .a-wall[data-focus="reddit"] [data-style="reddit"],
.a-wall[data-focus="greentext"] [data-style="greentext"], .a-wall[data-focus="stick"] [data-style="stick"],
.a-wall[data-focus="anime"] [data-style="anime"] { opacity: 1; }
.rail-section { display: none; }

/* Proof: two real artefacts and one sentence. Shared by A and C. */
.proof {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px;
  max-width: 1180px; margin: 0 auto; padding: 180px 24px 120px;
}
.proof-copy h2 { max-width: 12ch; }
.proof-copy p { margin: 24px 0 34px; font-size: 19px; line-height: 1.6; color: var(--dw-muted); max-width: 26em; }
.artefacts { position: relative; height: 580px; }
.statement {
  position: absolute; left: 0; top: 0; width: min(460px, 84%); height: auto; border-radius: 14px;
  background: #fff; box-shadow: 0 40px 90px -30px rgb(0 0 0 / 90%), 0 0 0 1px rgb(255 255 255 / 6%);
}
.phone {
  position: relative; width: 262px; aspect-ratio: 9 / 16.6; padding: 9px; border-radius: 46px;
  background: #0b0b0d; box-shadow: 0 0 0 1px #2c2c30, inset 0 0 0 1px #000, 0 50px 100px -30px rgb(0 0 0 / 95%), 0 0 140px -40px rgb(29 91 240 / 45%);
}
.phone > img { width: 100%; height: 100%; object-fit: contain; object-position: top; border-radius: 37px; background: #fff; }
.artefacts .phone { position: absolute; right: 0; bottom: 0; z-index: 1; }

/* ---------------- Pricing ---------------- */
.pricing { max-width: 1120px; margin: 0 auto; padding: 120px 24px 200px; }
.pricing-head { text-align: center; }
.pricing-head h2 { margin: 0 auto; }
.pricing-head p { margin: 20px auto 0; font-size: 17px; line-height: 1.6; color: var(--dw-muted); max-width: 34em; }
.pricing-bar { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 40px; }
/* Measured Higgsfield segment geometry, adapted to Monthly/Annual with one moving plate. */
.billing-switch { position: relative; display: flex; flex: none; width: 330px; max-width: 100%; height: 42px; padding: 4px; border: 1px solid rgb(255 255 255 / 5%); border-radius: 12px; background: rgb(255 255 255 / 5%); }
.billing-switch .knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 2); border: 1px solid rgb(255 255 255 / 5%); border-radius: 8px; background: rgb(255 255 255 / 5%); transform: translateX(calc(var(--billing-index, 0) * 100%)); transition: transform .3s ease-in-out; box-shadow: inset 0 2px 3px rgb(255 255 255 / 5%), 0 2px 2px rgb(0 0 0 / 12%); }
.billing-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #898a8b; font: 600 14px/20px var(--dw-body); cursor: pointer; transition: color .15s ease; }
.billing-switch button:is([aria-checked="true"], [aria-selected="true"]) { color: #f4f4f5; }
.billing-switch button::after { content: none; }
.billing-switch button:is(:hover, :focus-visible) { box-shadow: none; }
.billing-switch button:focus:not(:focus-visible) { outline: none; }
.billing-switch button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* The discount rides beside the word Annual inside its segment (founder, 27 September), as Higgsfield does. */
.billing-switch .save-tag { flex: none; margin-left: 6px; padding: 3px 6px; border-radius: 5px; font-size: 10px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 44px; }
/* Extra bonus banner: Higgsfield's layout (tag, red line, white line, grey line, action, 16px
   apart), in DreamWild's own surface. Our panel radius and surface, a red hairline, fine video
   scanlines instead of their dot grid, and a soft red light that sweeps left to right.
   Stays visible and explicitly annual in both billing states. */
.annual-launch-banner {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  margin-top: 32px; padding: 28px; border-radius: var(--dw-panel-radius); overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 2.5%) 0 1px, transparent 1px 4px),
    radial-gradient(90% 140% at 0% 50%, rgb(200 16 46 / 24%), rgb(200 16 46 / 0) 62%),
    var(--dw-surface);
  box-shadow: inset 0 0 0 1px rgb(229 23 63 / 30%), 0 30px 80px -40px rgb(200 16 46 / 45%);
}
.annual-launch-banner::before {
  content: ""; position: absolute; z-index: -1; top: -40%; bottom: -40%; left: 0; width: 55%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(229 23 63 / 26%), rgb(229 23 63 / 0));
  transform: translateX(-100%); animation: bonus-sweep 6s cubic-bezier(.45, 0, .35, 1) infinite;
}
@keyframes bonus-sweep { 0% { transform: translateX(-100%); opacity: 0; } 18%, 80% { opacity: 1; } 100% { transform: translateX(190%); opacity: 0; } }
html[data-page-hidden="true"] .annual-launch-banner::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .annual-launch-banner::before { animation: none; opacity: 0; } }
/* Plain-text labels beside the Extra bonus pill, in the pill's type: brand light blue, then soft mint.
   On a phone the row wraps instead of overflowing. */
.bonus-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bonus-note { color: var(--dw-cyan); font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.bonus-limited { color: #86efac; }
.bonus-title { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.annual-launch-banner h3 { color: #fff; font: 700 36px/40px var(--dw-display); letter-spacing: -.04em; text-transform: uppercase; }
.annual-launch-banner h3 > span { display: block; }
.annual-launch-banner .bonus-accent { color: #ff005b; }
.bonus-title p { max-width: 62ch; color: rgb(255 255 255 / 50%); font-size: 14px; line-height: 20px; }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 28px 26px 22px; border-radius: var(--dw-panel-radius);
  background: var(--dw-surface); box-shadow: inset 0 0 0 1px var(--dw-surface-3);
}
/* The middle plan is the recommended one: raised, lit, the only filled button */
/* Higgsfield's tinted plan surfaces, measured 27 September, in DreamWild colours. Creator takes
   their Plus recipe (a 225deg wash from the top-right corner) in our blue and keeps its lit frame;
   Ultra takes their Ultra recipe (a radial wash from the top-right plus a top fade). All three
   cards share one top edge. */
.plan.rec { background: linear-gradient(225deg, rgb(43 106 254 / 16%) 0%, rgb(43 106 254 / 8%) 28%, rgb(43 106 254 / 0) 62%), var(--dw-surface); box-shadow: inset 0 0 0 1px var(--dw-surface-3); }
.plan.ultra { background: radial-gradient(145% 54% at 100% 0%, rgb(var(--ultra-rgb) / 20%) 0%, rgb(var(--ultra-rgb) / 9%) 42%, rgb(var(--ultra-rgb) / 0) 78%), linear-gradient(rgb(var(--ultra-rgb) / 8%) 0%, rgb(var(--ultra-rgb) / 4%) 36%, rgb(var(--ultra-rgb) / 0) 72%), var(--dw-surface); box-shadow: inset 0 0 0 1px var(--dw-surface-3), 0 24px 64px rgb(0 0 0 / 24%); }
.plan-top { display: flex; justify-content: flex-start; align-items: center; gap: 8px; min-height: 28px; }
.plan-name { font-size: 17px; font-weight: 600; }
.plan-badges { display: flex; align-items: center; }
/* One badge definition for every small label in pricing: discounts, Best value and Extra bonus. */
:is(.save-tag, .annual-discount, .plan-tag, .bonus-tag) { display: inline-flex; padding: 5px 8px; border-radius: 6px; color: #fff; background: #b9274b; font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
/* Like Higgsfield, the discount sits right after the plan name and folds away on Monthly,
   so Best value closes up to the name instead of leaving a hole. */
.annual-discount { max-width: 0; margin-right: 0; padding-inline: 0; overflow: clip; opacity: 0; visibility: hidden;
  transition: max-width .3s var(--ease), margin-right .3s var(--ease), padding-inline .3s var(--ease), opacity .2s ease, visibility 0s .3s; }
/* Same geometry as the discount badge beside it; Higgsfield's Best Value blue. */
.plan-tag { background: radial-gradient(84% 180% at 50% 118%, #4fc9dc 0%, #32a2ee 50%, #167bff 100%); }
.plan-line { margin-top: 6px; color: var(--dw-muted); font-size: 14px; }
/* Monthly: the big price sits flush left. Annual: the crossed-out monthly price opens in front
   of it and pushes it right, and folds away again on Monthly (same easing as the price roll). */
.was { display: grid; grid-template-columns: 0fr; margin-right: 0; font-size: 23px; line-height: 1; font-weight: 700; color: #ff5d84; text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0; visibility: hidden;
  transition: grid-template-columns .45s var(--ease), margin-right .45s var(--ease), opacity .3s ease, visibility 0s .45s; }
/* The big price's -0.045em tracking is inherited as ~-2.3px, which pushed the last digit's ink past
   the clip; the small figure gets its own tracking and a clip margin so no digit is ever cut. */
.was > span { min-width: 0; overflow: clip; overflow-clip-margin: 3px; letter-spacing: -0.02em; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: 22px; font: 700 52px/1 var(--dw-display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-currency { margin-left: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--dw-muted); }
.price small { flex-basis: 100%; margin-top: 9px; font-size: 13px; line-height: 1.5; font-weight: 500; letter-spacing: 0; color: var(--dw-muted); }
[data-bill="year"] .was { grid-template-columns: 1fr; margin-right: 8px; opacity: 1; visibility: visible; transition: grid-template-columns .45s var(--ease), margin-right .45s var(--ease), opacity .3s ease .08s, visibility 0s; }
[data-bill="year"] .annual-discount { max-width: 8em; margin-right: 6px; padding-inline: 8px; opacity: 1; visibility: visible; transition: max-width .3s var(--ease), margin-right .3s var(--ease), padding-inline .3s var(--ease), opacity .2s ease .06s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .was, .annual-discount, [data-bill="year"] :is(.was, .annual-discount) { transition: none; } }
.credits { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--dw-line); font-size: 15px; color: var(--dw-muted); }
.credits b { color: var(--dw-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
/* The launch bonus is annual-only (plans.js): its row folds away when Monthly is selected, the same
   fold as the savings row, so Monthly never implies the bonus. */
.plan-launch-bonus { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .22s var(--ease), margin-top .22s var(--ease); }
.plan-launch-bonus > p { min-height: 0; overflow: hidden; visibility: hidden; opacity: 0; color: #ffbaca; font-size: 12px; line-height: 1.5; transition: opacity .18s ease, visibility 0s .22s; }
.plan-launch-bonus strong { font-weight: 700; }
[data-bonus] .plan-launch-bonus { grid-template-rows: 1fr; margin-top: 7px; }
[data-bonus] .plan-launch-bonus > p { visibility: visible; opacity: 1; transition: opacity .22s ease .06s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .plan-launch-bonus, .plan-launch-bonus > p { transition: none; } }
.make { list-style: none; margin: 24px 0 28px; padding: 0; }
.make li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; }
.make li + li { border-top: 1px solid var(--dw-line); }
.make svg { width: 34px; height: 34px; padding: 7px; border-radius: 9px; color: var(--dw-cyan); background: rgb(22 187 250 / 10%); }
.make span { display: flex; flex-direction: column; min-width: 0; }
.make b { font-size: 14px; font-weight: 600; }
.make em { font: 700 20px/1 var(--dw-display); font-style: normal; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.make em.free { font: 700 12px var(--dw-body); letter-spacing: .04em; text-transform: uppercase; color: #22c55e; }
.make li.off b { color: var(--dw-muted); }
.make li.off svg { opacity: .45; }
.make li.off em { color: var(--dw-subtle); }
/* "Up to" leads each alternative maximum; the two maxima are split by an OR on the hairline. */
.make em small { margin-right: 6px; color: var(--dw-muted); font: 500 11px/1 var(--dw-body); letter-spacing: 0; }
.make li.make-or, .make li.make-or + li { border-top: 0; }
.make li.make-or { display: flex; align-items: center; gap: 10px; padding: 1px 0; }
.make li.make-or::before, .make li.make-or::after { content: ""; flex: 1; height: 1px; background: var(--dw-line); }
.make li.make-or span { display: block; color: var(--dw-subtle); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.plan .btn { width: 100%; }
/* Higgsfield's compact tick/cross list under each card (measured 27 September): 16px mark, 4px gap,
   12px/16px text, rows 4px apart, 16px below the card's action. Crossed rows fade to subtle. */
.plan-features { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 0; padding: 0; list-style: none; }
.plan-features li { display: flex; align-items: center; gap: 4px; color: var(--dw-fg); font-size: 12px; line-height: 16px; }
.plan-features svg { flex: none; }
.plan-features li.no { color: var(--dw-subtle); }
.plan-cta { border-radius: var(--dw-button-radius); background: rgb(255 255 255 / 3%); box-shadow: inset 0 0 0 1px var(--dw-line); }
.plan-cta .btn { position: relative; z-index: 1; }
/* Like Higgsfield, the savings row exists only on Annual: Monthly folds the slot away under the button. */
.plan-save { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s var(--ease); }
.plan-save > p { display: flex; visibility: hidden; align-items: center; justify-content: center; gap: 5px; min-height: 0; overflow: hidden; opacity: 0; color: var(--dw-muted); font-size: 11px; line-height: 1.4; transition: opacity .18s ease, visibility 0s .22s; }
.plan-save strong { color: var(--dw-fg); font-weight: 600; }
.plan-save span, .plan-save strong { padding: 10px 0 7px; }
[data-bill="year"] .plan-save { grid-template-rows: 1fr; }
[data-bill="year"] .plan-save > p { visibility: visible; opacity: 1; transition: opacity .22s ease .06s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .plan-save, .plan-save > p { transition: none; } }
.plan-foot { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--dw-subtle); }

/* ---------------- B. Prompt ---------------- */
.b-hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 96px 20px 72px; text-align: center; }
.fluid-field { position: absolute; inset: 0; }
.fluid-field canvas { width: 100%; height: 100%; display: block; }
.b-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 48% at 50% 46%, rgb(0 0 0 / 82%), rgb(0 0 0 / 42%) 70%, rgb(0 0 0 / 62%)); }
.b-center { position: relative; z-index: 1; width: min(760px, 100%); }
.b-center h1 { font-size: clamp(40px, 6.2vw, 92px); }
.composer {
  display: flex; gap: 8px; width: min(680px, 100%); margin: 40px auto 0; padding: 8px;
  border: 0; border-radius: 16px; background: rgb(14 14 16 / 82%); backdrop-filter: blur(16px);
  color: var(--dw-fg); font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px #2a2a2e, 0 30px 80px -30px rgb(0 0 0 / 90%);
}
.composer-prompt { flex: 1; min-width: 0; min-height: 50px; padding: 13px 14px; font: 500 18px/24px var(--dw-body); }
.composer > .btn { flex-shrink: 0; }
.composer:focus-visible { box-shadow: inset 0 0 0 1px var(--focus-ring), 0 30px 80px -30px rgb(0 0 0 / 90%); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; }
.chips button {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px 0 8px; border: 0; border-radius: 10px;
  background: rgb(255 255 255 / 7%); color: var(--dw-muted); font: 500 14px var(--dw-body); cursor: pointer;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.chips img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; }
.chips button:hover { background: rgb(255 255 255 / 12%); color: var(--dw-fg); }
.chips button[aria-checked="true"] { background: var(--dw-fg); color: #000; }
.b-center .fine { margin-top: 22px; }

.b-demo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 96px; max-width: 1120px; margin: 0 auto; padding: 160px 24px 80px; }
.b-demo-copy .lede { margin: 20px 0 36px; }
.steps { list-style: none; margin: 0 0 36px; padding: 0; }
.steps li {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 0;
  border-top: 1px solid var(--dw-line); opacity: 0.4; transition: opacity 0.4s var(--ease);
}
.steps li:last-child { border-bottom: 1px solid var(--dw-line); }
.steps li.on, .steps li.done { opacity: 1; }
.steps .n { font-size: 13px; color: var(--dw-subtle); font-variant-numeric: tabular-nums; }
.steps p { margin-top: 4px; font-size: 14px; color: var(--dw-muted); }
.state { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--dw-subtle); background: var(--dw-surface); white-space: nowrap; }
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
li.on .state { color: var(--dw-cyan); }
li.on .state::before { animation: pulse 1s var(--ease) infinite; }
li.ready .state { color: #fff; background: var(--dw-action); box-shadow: var(--dw-action-glow); }
li.ready .state::before { display: none; }
li.done .state { color: var(--dw-fg); }
li.done .state::before { width: 9px; height: 5px; border-radius: 0; background: none; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
@keyframes pulse { 50% { opacity: 0.25; } }
.byline { margin-top: 18px; }

.phone-demo { width: 320px; aspect-ratio: auto; padding: 9px; }
.screen { position: relative; aspect-ratio: 9 / 16; border-radius: 38px; overflow: hidden; background: #050506; }
.layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); }
.layer.show { opacity: 1; }
.l-script { padding: 40px 26px; }
.idea-title { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dw-subtle); margin-bottom: 18px; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { font-size: 19px; line-height: 1.45; font-weight: 500; margin-bottom: 10px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.lines li.in { opacity: 1; transform: none; }
.l-voice { display: grid; place-content: center; gap: 22px; text-align: center; }
.wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 90px; }
.wave i { width: 4px; border-radius: 2px; background: linear-gradient(#30C0F0, #1060F0); height: 12%; animation: talk 0.9s var(--ease) infinite alternate; }
@keyframes talk { to { height: var(--h, 70%); } }
.voice-name { font-size: 13px; color: var(--dw-muted); }
.l-scenes { padding: 14px; }
.scene-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 100%; }
.scene-grid figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; background: var(--dw-surface); opacity: 0; transform: scale(0.96); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.scene-grid figure.in { opacity: 1; transform: none; }
.scene-grid img { width: 100%; height: 100%; object-fit: cover; }
.scene-grid figcaption { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 6px; background: rgb(0 0 0 / 55%); }
.l-film video { width: 100%; height: 100%; object-fit: cover; }
.caption {
  position: absolute; left: 10%; right: 10%; top: 62%; text-align: center;
  font: 800 26px/1.1 var(--dw-body); letter-spacing: -0.01em; text-transform: uppercase; color: #fff;
  -webkit-text-stroke: 5px #000; paint-order: stroke fill; text-shadow: 0 3px 0 #000;
}

/* ---------------- C. Proof ---------------- */
.c-hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 48px;
  padding: 120px var(--gutter) 80px;
}
.c-fluid { inset: 0 -10% 0 40%; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); opacity: 0.9; }
.c-copy { position: relative; z-index: 1; }
.c-count { font: 700 clamp(40px, 6.4vw, 104px)/0.95 var(--dw-display); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-countline { margin: 16px 0 52px; font-size: 18px; color: var(--dw-muted); }
.c-copy h1 { font-size: clamp(36px, 4.2vw, 64px); }
.c-copy .lede { margin: 22px 0 32px; }
.c-copy .fine { margin-top: 14px; }
.c-hero .artefacts { z-index: 1; height: 600px; }
.c-styles { padding: 140px 0 40px; }
.c-styles h2 { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 1180px; margin: 48px auto 0; padding: 0 24px; }
.card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.card .tile { margin-bottom: 12px; transition: transform 0.24s var(--ease); }
.card:hover .tile { transform: translateY(-3px); }
.card b { font-size: 15px; font-weight: 600; }
.card > span:not(.tile) { font-size: 14px; color: var(--dw-muted); }

/* ---------------- Review chrome ---------------- */
.review {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: rgb(24 24 27 / 92%); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px #2c2c30, 0 20px 50px -20px #000;
}
.review a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; color: var(--dw-muted); font: 600 13px var(--dw-body); text-decoration: none; }
.review a span { font-weight: 500; }
.review a[aria-current] { background: var(--dw-fg); color: #000; }
.review-sep { width: 1px; margin: 6px 4px; background: #2c2c30; }

/* ---------------- Motion off ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(button, a.btn)::after { display: none; }
  .btn-primary:hover { transform: none; }
  .wave i, li.on .state::before { animation: none; }
}

/* ---------------- Phone ---------------- */
@media (max-width: 760px) {
  h1 { font-size: clamp(38px, 10.4vw, 52px); }
  .lede { font-size: 16px; }
  .nav-links { display: none; }
  .btn { height: 48px; }

  /* A: the first screen is a Short. */
  .a-hero { display: grid; grid-template-columns: 1fr; min-height: 0; padding: 0; gap: 0; }
  .a-stage, .a-copy { grid-area: 1 / 1; }
  .a-stage { display: block; position: relative; height: 92svh; }
  .a-stage video { width: 100%; height: 100%; object-fit: cover; }
  .a-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 40%), transparent 18%, transparent 36%, rgb(0 0 0 / 88%) 72%, #000); }
  .a-copy { align-self: end; position: relative; z-index: 1; padding: 0 20px 28px; }
  .a-copy .lede { margin: 16px 0 24px; }
  .a-copy .cta-row .btn-ghost { display: none; }
  .a-copy .cta-row .btn-primary { flex: 1; }
  .style-index, .a-wall { display: none; }
  .rail-section { display: block; padding: 28px 0 0; }
  .rail, .shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 58vw; grid-template-columns: none; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px; scrollbar-width: none; }
  .rail::-webkit-scrollbar, .shelf::-webkit-scrollbar { display: none; }
  .rail .card, .shelf .card { scroll-snap-align: start; }

  .proof { grid-template-columns: 1fr; gap: 44px; padding: 110px 20px 60px; }
  .proof .artefacts { order: 2; }
  .artefacts { height: 470px; }
  .phone { width: 216px; border-radius: 38px; }
  .phone > img { border-radius: 30px; }
  .statement { top: 0; width: 86%; }

  .pricing { padding: 90px 20px 150px; }
  .plans { grid-template-columns: 1fr; margin-top: 30px; }
  .plan.rec { order: -1; }
  .pricing-bar { align-items: stretch; }
  .billing-switch { align-self: center; }
  .annual-launch-banner { padding: 20px; }
  .annual-launch-banner h3 { font-size: 24px; line-height: 28px; }
  .price { font-size: 48px; }

  /* B */
  .b-hero { padding: 88px 20px 56px; }
  .b-hero::after { background: linear-gradient(rgb(0 0 0 / 35%), rgb(0 0 0 / 72%) 40%, rgb(0 0 0 / 80%) 75%, rgb(0 0 0 / 60%)); }
  .composer { flex-direction: column; padding: 8px; }
  .composer-prompt { padding: 16px 12px; font-size: 17px; line-height: 25px; text-align: center; }
  .b-demo { grid-template-columns: 1fr; gap: 48px; padding: 100px 20px 40px; }
  .phone-demo { width: min(300px, 82vw); margin: 0 auto; order: -1; }
  .b-demo-copy .cta-row .btn-primary { flex: 1; }

  /* C */
  .c-hero { grid-template-columns: 1fr; gap: 36px; padding: 96px 20px 40px; }
  .c-fluid { inset: 40% -30% 0 -30%; }
  .c-countline { margin: 12px 0 34px; font-size: 16px; }
  .c-hero .artefacts { height: 470px; }
  .c-copy .cta-row .btn-ghost { display: none; }
  .c-copy .cta-row .btn-primary { flex: 1; }
  .c-styles { padding: 90px 0 20px; }
  .c-styles h2 { padding: 0 20px; }
  .shelf { margin-top: 32px; }

  .review { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .review a { padding: 0 10px; }
  .review a span { display: none; }
}

/* ---------------- A+B. The canvas hero ---------------- */
.m-hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 96px 20px 80px; text-align: center; }
.canvas {
  position: absolute; inset: 64px 0 0; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  --row-h: calc((100svh - 64px - 30px) / 3);
}
.canvas .row { overflow: hidden; height: var(--row-h); flex: none; }
.canvas .track { display: flex; gap: 10px; width: max-content; height: 100%; animation: slide var(--dur, 100s) linear infinite; }
.canvas .row:nth-child(2) .track { animation-direction: reverse; }
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }
.t { position: relative; flex: none; height: 100%; overflow: hidden; border-radius: 12px; background: var(--dw-surface); transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); }
.t-p { aspect-ratio: 9 / 16; }
.t-l { aspect-ratio: 16 / 9; }
.t > img, .t > video { width: 100%; height: 100%; object-fit: cover; }
.t > img { animation: drift-in 16s ease-in-out infinite alternate; animation-delay: var(--kb, 0s); }
@keyframes drift-in { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.canvas[data-focus] .t { opacity: 0.18; filter: saturate(0.4); }
.canvas[data-focus="3d"] [data-k="3d"], .canvas[data-focus="reddit"] [data-k="reddit"], .canvas[data-focus="greentext"] [data-k="greentext"],
.canvas[data-focus="stick"] [data-k="stick"], .canvas[data-focus="anime"] [data-k="anime"] { opacity: 1; filter: none; }
.m-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 52% 46% at 50% 52%, rgb(0 0 0 / 90%), rgb(0 0 0 / 70%) 60%, rgb(0 0 0 / 22%) 100%),
    linear-gradient(rgb(0 0 0 / 88%), transparent 20%, transparent 82%, #000);
}
.m-center { position: relative; z-index: 1; width: min(1000px, 100%); }
.m-center h1 { font-size: clamp(40px, 5.1vw, 76px); max-width: 22ch; margin: 0 auto; text-shadow: 0 2px 30px rgb(0 0 0 / 60%); text-wrap: balance; }
.m-center .composer { margin-top: 36px; }
.m-center .fine { margin-top: 20px; }
/* The closing section: the studio's fluid (close-fluid.js) or its static glow behind a dark pool, as on the
   studio's own landing (a 92% ground pool 64px past the words, blurred 32px). The ground fades into the page. */
.close { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: 170px 20px 200px; text-align: center; }
.close-fluid { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(42% 50% at 64% 42%, rgb(43 106 254 / 34%), transparent 70%), radial-gradient(38% 42% at 32% 64%, rgb(22 187 250 / 16%), transparent 70%), radial-gradient(40% 44% at 74% 72%, rgb(107 77 255 / 18%), transparent 70%), #000;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.close-fluid.live { background: #000; }
.close-fluid canvas { display: block; width: 100%; height: 100%; opacity: .95; filter: brightness(.9) contrast(1.3); }
.close-pool { position: relative; display: grid; justify-items: center; gap: 22px; }
.close-pool::before { content: ""; position: absolute; inset: -64px; z-index: -1; border-radius: 96px; background: rgb(14 14 18 / 92%); filter: blur(32px); }
.close h2 { max-width: 16ch; font-size: clamp(34px, 4.4vw, 60px); }
/* The site footer, laid out like noboringsites.com's (measured 27 September at 1440: 84px above,
   brand and mission left, named link columns right, a separate copyright and contact bar). */
.foot { max-width: 1180px; margin: 0 auto; padding: 0 24px 96px; font-size: 13px; color: var(--dw-subtle); }
.foot a { color: var(--dw-muted); text-decoration: none; transition: color .15s ease; }
.foot a:hover, .foot a[aria-current="page"] { color: var(--dw-fg); }
.foot-top { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.6fr); gap: 48px; padding: 84px 0 64px; border-top: 1px solid var(--dw-line); }
.foot-brand p { max-width: 26ch; margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--dw-muted); text-wrap: balance; }
.foot-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-h { margin-bottom: 18px; font: 700 11px/1.3 var(--dw-body); letter-spacing: .14em; text-transform: uppercase; color: var(--dw-subtle); }
.foot-col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.foot-col a { font-size: 14px; line-height: 1.45; }
.foot-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 28px; border-top: 1px solid var(--dw-line); }
.foot-mark { opacity: .7; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; }
.foot-mail { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1080px) { .foot-top { grid-template-columns: 1fr; gap: 40px; } }
.sticky-cta { display: none; }

/* One public data source supplies the moving audience row and the account footer. */
.audience-strip { overflow: hidden; background: #000; }
.audience-track { display: flex; width: max-content; animation: audience-travel var(--audience-duration, 42s) linear infinite; }
.audience-group { display: flex; align-items: center; flex: none; gap: 24px; min-height: 44px; margin: 0; padding: 0 24px 0 0; list-style: none; }
.audience-item { display: flex; align-items: center; gap: 24px; white-space: nowrap; color: var(--dw-fg); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }
.audience-item::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: #2b6afe; }
@keyframes audience-travel { to { transform: translateX(calc(-1 * var(--audience-distance, 0px))); } }
html[data-page-hidden="true"] .audience-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .audience-track { animation: none; width: auto; }
  .audience-group { flex: 1; flex-wrap: wrap; justify-content: center; gap: 20px 32px; padding: 24px 20px; }
  .audience-copy { display: none; }
  .audience-item { white-space: normal; }
}

/* Code-made tiles: the genres that are text and line are drawn live, not generated. */
.ct { display: flex; flex-direction: column; height: 100%; }
.ct-green { background: #111; }
.gt-post { padding: 9% 8% 7%; background: #F0E0D6; color: #800000; font: 400 clamp(8px, calc(var(--row-h) * 0.034), 13px)/1.45 ui-monospace, "SF Mono", Menlo, monospace; text-align: left; }
.gt-post b { color: #117743; }
.gt-post ol { list-style: none; margin: 0.6em 0 0; padding: 0; }
.gt-post li { color: #789922; opacity: 0; animation: gt-line 9s infinite; animation-delay: calc(var(--i) * 0.8s); }
@keyframes gt-line { 0% { opacity: 0; } 3%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } }
.ct-green img { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.ct-stick { background: #FAF7F0; }
.ct-stick svg { width: 100%; height: 100%; }
.ct-stick .ink { fill: none; stroke: #1b1b1b; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70; animation: ink 7s infinite; }
@keyframes ink { 0% { stroke-dashoffset: 70; } 14%, 100% { stroke-dashoffset: 0; } }
.ct-stick .blue { fill: none; stroke: #2448D8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ct-stick .drop { stroke: #2448D8; stroke-width: 1.2; stroke-linecap: round; animation: drip 0.9s linear infinite; animation-delay: var(--d); }
@keyframes drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(14px); opacity: 0; } }
.ct-stick .coin { fill: #F2C230; stroke: #B8860B; stroke-width: 0.6; transform-box: fill-box; transform-origin: center; animation: coin 7s infinite; animation-delay: var(--d); transform: scale(0); }
@keyframes coin { 0%, 22% { transform: scale(0); } 27% { transform: scale(1.3); } 31%, 90% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
.ct-stick .cap { font: 800 9px var(--dw-body); fill: #fff; stroke: #000; stroke-width: 2.4; paint-order: stroke fill; text-anchor: middle; letter-spacing: 0.02em; }
.ct-stick .cap-a { animation: cap-a 7s infinite; }
.ct-stick .cap-b { animation: cap-b 7s infinite; opacity: 0; }
@keyframes cap-a { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cap-b { 0%, 45% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .track, .t > img { animation: none; }
  .gt-post li, .ct-stick .cap-a { animation: none; opacity: 1; }
  .ct-stick .ink { animation: none; stroke-dashoffset: 0; }
  .ct-stick .coin { animation: none; transform: none; }
  .ct-stick .drop, .ct-stick .cap-b { animation: none; opacity: 0; }
}

@media (max-width: 760px) {
  .m-hero { display: flex; flex-direction: column; place-items: normal; min-height: 0; padding: 0 20px 40px; }
  .nav { --nav-float-inset: -8px; gap: 10px; }
  .nav .brand { gap: 6px; font-size: 15px; }
  .nav-actions { gap: 7px; }
  .nav-actions .btn { height: 36px; padding: 0 10px; font-size: 12px; }
  .canvas { position: relative; inset: auto; height: clamp(190px, 30svh, 300px); margin: 64px -20px 0; --row-h: calc((clamp(190px, 30svh, 300px) - 8px) / 2); gap: 8px;
    -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .canvas .row:nth-child(3) { display: none; }
  .m-hero::after { display: none; }
  .m-center { margin-top: 4px; }
  .m-center h1 { font-size: clamp(32px, 9.1vw, 46px); line-height: 1.08; }
  .hero-description { margin-top: 18px; }
  .desktop-break { display: none; }
  .m-center .composer { margin-top: 24px; }
  .m-center .composer-prompt { min-height: 0; padding: 14px 12px; font-size: 16px; line-height: 24px; text-wrap: balance; }
  .audience-group { min-height: 40px; }
  .close { padding: 120px 20px 150px; }
  .close-pool::before { inset: -36px -20px; border-radius: 64px; }
  .foot { padding: 0 20px 150px; }
  .foot-top { grid-template-columns: 1fr; gap: 40px; padding: 64px 0 48px; }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .foot-bar { grid-template-columns: 1fr; justify-items: start; }
  .foot-mark { display: none; }
  .foot-links { justify-content: flex-start; }
  .sticky-cta.show { display: flex; position: fixed; left: 20px; right: 20px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 44; }
  .review { bottom: auto; top: 70px; left: 12px; transform: none; }
}

/* ---------------- A+B Stream ---------------- */
.s-hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 56px;
  padding: 64px var(--gutter) 0;
}
.s-copy { position: relative; z-index: 1; padding: 40px 0; }
.s-copy h1 { font-size: clamp(40px, 5vw, 78px); }
.s-copy .composer { margin: 36px 0 0; width: 100%; }
.s-copy .chips { justify-content: flex-start; }
.s-copy .fine { margin-top: 18px; }
.s-copy .s-own { margin-top: 6px; }
.stream {
  align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  height: 100svh; margin-top: -64px;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.scol { overflow: hidden; }
.strack { display: flex; flex-direction: column; gap: 10px; animation: rise var(--dur, 70s) linear infinite; }
.scol.down .strack { animation-name: fall; }
.scol:hover .strack { animation-play-state: paused; }
@keyframes rise { to { transform: translate3d(0, -50%, 0); } }
@keyframes fall { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
.stream .t { width: 100%; height: auto; flex: none; }
.stream .ct { aspect-ratio: 9 / 16; }
.stream .gt-post { font-size: clamp(8px, 0.72vw, 12px); }
.pc { margin: 0; flex: none; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 8%), 0 24px 60px -28px rgb(34 197 94 / 45%); }
.pc img { width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .strack { animation: none; } }
@media (max-width: 760px) {
  .s-hero { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-height: 0; padding: 0 20px 36px; gap: 0; }
  .stream { order: 0; height: 46svh; margin: 64px -20px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 12px; gap: 8px;
    -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .stream .scol:nth-child(3) { display: none; }
  .strack { gap: 8px; }
  .s-copy { padding: 4px 0 0; text-align: center; }
  .s-copy h1 { font-size: clamp(34px, 9.4vw, 46px); }
  .s-copy .chips { justify-content: center; }
  .s-copy .composer { margin-top: 24px; }
}

/* Studio-style proof cards, rebuilt from numbers.json */
.yc { margin: 0; flex: none; padding: 14px 14px 12px; border-radius: 12px; background: #fff; color: #0f0f0f; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 11px; line-height: 1.35; text-align: left; }
.yc-dark { background: #212121; color: #f1f1f1; }
.yc-label { color: #606060; font-size: 11px; }
.yc-dark .yc-label, .yc-dark .yc-kv span { color: #aaa; }
.yc-title { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.yc-dark .yc-title { margin-bottom: 10px; }
.yc-big { font-size: clamp(18px, 1.7vw, 26px); font-weight: 500; letter-spacing: -0.01em; margin: 2px 0; }
.yc-note { color: #606060; font-size: 11px; margin-bottom: 8px; }
.yc-chart { display: block; width: 100%; height: 70px; margin-top: 4px; }
.yc-axis { display: flex; justify-content: space-between; color: #909090; font-size: 10px; margin-top: 4px; }
.yc-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 0 7px; }
.yc-row b { font-weight: 500; }
.yc-row i { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #1ea1a1 var(--w), #eee var(--w)); }
.yc-kv { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid #eee; }
.yc-dark .yc-kv { border-color: #3a3a3a; }
.yc-kv b { font-weight: 500; }
.yc-up b { color: #0b8043; }
.yc-total { margin-top: 10px; font-size: clamp(16px, 1.4vw, 21px); font-weight: 500; }
.yc-total span { display: block; color: #606060; font-size: 11px; font-weight: 400; }
@media (max-width: 760px) { .yc-big { font-size: 20px; } }

/* Proof in the canvas: real screenshots, full row height, their own width */
.t-proof { margin: 0; aspect-ratio: auto; background: #fff; }
.t-proof img { height: 100%; width: auto; max-width: none; object-fit: contain; animation: none; }
.m-center .s-own { margin-top: 6px; }

/* ---------------- The money: its own section, right below the hero ---------------- */
.proof.money { display: block; max-width: 1180px; margin: 0 auto; padding: 150px 24px 130px; text-align: center; }
/* Option C1 (proof lab): the heading, the figure and its caption, the phones and stats, then the words. */
.money h2 { max-width: 16ch; margin: 0 auto 36px; font-size: clamp(36px, 4vw, 56px); line-height: 1.05; text-wrap: balance; }
.money-num { font: 700 clamp(56px, 9vw, 132px)/0.92 var(--dw-display); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.money-note { margin-top: 14px; font-size: 13px; letter-spacing: .01em; color: var(--dw-subtle); }
/* The phones (money.js, spin.js): the canvas scrubs the rendered turn over the settled picture, which
   stays in the accessibility tree and shows whenever the canvas is not live. */
.spin { position: relative; max-width: 900px; aspect-ratio: 1800 / 1320; margin: 72px auto 48px; }
.spin::before { content: ""; position: absolute; left: 50%; top: 50%; width: 620px; height: 420px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgb(34 197 94 / 16%), transparent); pointer-events: none; }
.spin img, .spin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spin canvas { opacity: 0; }
.spin.live canvas { opacity: 1; }
.spin.live img { opacity: 0; }
/* A linked page's proof section: one line of story under its heading (site/build-pages.mjs). */
.money-line { max-width: 34em; margin: 28px auto 0; font-size: 18px; line-height: 1.6; color: var(--dw-muted); text-wrap: pretty; }
/* The words: one statement beside the supporting paragraph and the action; the brand speaks, no card. */
.money-pitch { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--dw-line); text-align: left; }
.money-lead { font: 700 clamp(32px, 3.4vw, 50px)/1.08 var(--dw-display); letter-spacing: var(--dw-display-tracking); text-wrap: balance; }
.money-copy { display: grid; gap: 18px; align-content: start; justify-items: start; padding-top: 6px; }
.money-copy p { color: var(--dw-muted); font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.money-copy .btn { margin-top: 14px; }
@media (max-width: 760px) {
  .proof.money { padding: 100px 20px 80px; }
  .spin { aspect-ratio: 1080 / 1420; margin: 32px -20px 20px; }
  .spin::before { width: 340px; height: 280px; }
  .money-line { font-size: 16px; }
  .money-pitch { grid-template-columns: 1fr; gap: 22px; margin-top: 64px; padding-top: 36px; }
  .money-copy p { font-size: 16px; }
}

/* ---------------- The money body: three layouts under review (money.js) ---------------- */
.money-body { text-align: left; }
.chart { display: block; width: 100%; overflow: visible; }
.chart .grid { stroke: rgb(255 255 255 / 7%); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .line { fill: none; stroke: var(--c, var(--dw-cyan)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .area { fill: var(--c, var(--dw-cyan)); opacity: 0.12; }
/* charts draw on left to right the first time they are seen */
[data-reveal] .chart .line, [data-reveal] .chart .area { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease) 0.15s; }
[data-reveal].open .chart .line, [data-reveal].open .chart .area { clip-path: inset(0); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin-top: auto; padding-top: 22px; }
.bars span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bars i { width: 100%; height: var(--h); min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--c, #22c55e); transform: scaleY(0); transform-origin: bottom; transition: transform 0.9s var(--ease) calc(var(--i) * 55ms); }
.open .bars i { transform: none; }
.bars em { margin-top: 7px; font: 500 11px var(--dw-body); font-style: normal; color: var(--dw-subtle); }

/* 1. Dashboard */
.mv1 { display: grid; grid-template-columns: minmax(0, 1fr) 236px; align-items: end; max-width: 1100px; margin: 68px auto 60px; }
.dash { position: relative; z-index: 1; border-radius: 22px; background: #0e0e10; box-shadow: inset 0 0 0 1px var(--dw-line), 0 60px 120px -60px #000; overflow: hidden; --c: var(--dw-cyan); }
.dash[data-metric="hours"] { --c: #a78bfa; }
.dash[data-metric="subs"] { --c: #60a5fa; }
.dash[data-metric="revenue"] { --c: #22c55e; }
.dash-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 22px 26px 18px; }
.dash-head b { font: 600 17px var(--dw-display); }
.dash-head span { font-size: 13px; color: var(--dw-subtle); }
.dash-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--dw-line); }
.dash-tabs button { position: relative; padding: 16px 22px 18px; border: 0; background: none; color: var(--dw-muted); text-align: left; font: 500 13px var(--dw-body); cursor: pointer; transition: background 0.2s; }
.dash-tabs button + button { box-shadow: inset 1px 0 var(--dw-line); }
.dash-tabs button b { display: block; margin-top: 6px; font: 700 28px/1 var(--dw-display); letter-spacing: -0.03em; color: var(--dw-fg); font-variant-numeric: tabular-nums; }
.dash-tabs button[aria-selected="true"] { background: rgb(255 255 255 / 4%); color: var(--dw-fg); }
.dash-tabs .prog { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--c); }
.dash-tabs [aria-selected="true"] .prog { width: 100%; }
.mv1.open .dash[data-auto] [aria-selected="true"] .prog { animation: prog 4.2s linear both; }
.mv1:not(.inview) .prog { animation-play-state: paused !important; }
@keyframes prog { from { width: 0; } to { width: 100%; } }
.dash-plot { position: relative; padding: 26px 44px 18px 76px; }
.dash-axis { position: absolute; left: 22px; top: 26px; height: 240px; font-size: 12px; color: var(--dw-subtle); font-variant-numeric: tabular-nums; }
/* at the chart's own gridlines: y 10, 110 and 210 of 220 */
.dash-axis span { position: absolute; left: 0; top: 4.55%; transform: translateY(-50%); }
.dash-axis span:nth-child(2) { top: 50%; }
.dash-axis .y0 { top: 95.45%; }
.dash-chart { height: 240px; }
.dash-chart .line { transition: clip-path 1.6s var(--ease) 0.15s, stroke 0.4s; }
.dash-chart .area { transition: clip-path 1.6s var(--ease) 0.15s, fill 0.4s; }
.dash-x { position: relative; height: 16px; margin-top: 12px; font-size: 12px; color: var(--dw-subtle); }
.dash-x span { position: absolute; top: 0; transform: translateX(-50%); }
.dash-x span:first-child { transform: none; }
.dash-x span:last-child { transform: translateX(-100%); }
.dash-phone { z-index: 2; width: 236px; margin: 0 0 -44px -22px; aspect-ratio: 540 / 1173; padding: 8px; border-radius: 40px; transform: rotate(5deg); }
.dash-phone > img { object-fit: cover; border-radius: 32px; }

/* 2. Phones: real captures (studio-phone-*.webp, bank-full-1.webp) framed as phones */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; margin: 8px auto 64px; text-align: center; }
.stats div { display: flex; flex-direction: column-reverse; gap: 6px; }
.stats div + div { box-shadow: inset 1px 0 var(--dw-line); }
.stats dd { margin: 0; font: 700 clamp(30px, 3.6vw, 48px)/1 var(--dw-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stats dt { font-size: 14px; color: var(--dw-muted); }

/* 3. Bento */
.mv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "rev rev bank" "views subs bank" "eng feed bank"; gap: 14px; max-width: 1080px; margin: 68px auto 60px; }
.bc { display: flex; flex-direction: column; min-width: 0; min-height: 210px; margin: 0; padding: 22px 22px 20px; border-radius: 20px; background: var(--dw-surface); box-shadow: inset 0 0 0 1px var(--dw-line); overflow: hidden; }
.bc figcaption span { font-size: 13px; color: var(--dw-muted); }
.bc figcaption b { display: block; margin-top: 6px; font: 700 34px/1 var(--dw-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.bc figcaption em { display: block; margin-top: 8px; font-size: 13px; font-style: normal; color: #22c55e; }
.bc-rev { grid-area: rev; }
.bc-rev .bars { height: 190px; }
.bc-views { grid-area: views; }
.bc-views .chart { height: 110px; margin-top: auto; padding-top: 18px; }
.bc-subs { grid-area: subs; --c: #60a5fa; }
.bc-subs .bars { height: 110px; gap: 4px; }
.bc-eng { grid-area: eng; }
.bc-eng .kv { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--dw-line); font-size: 14px; color: var(--dw-muted); }
.bc-eng .kv:first-of-type { margin-top: auto; }
.bc-eng .kv b { font: 700 22px var(--dw-display); letter-spacing: -0.02em; color: var(--dw-fg); }
.bc-feed { grid-area: feed; flex-direction: row; align-items: center; gap: 18px; }
.ring { position: relative; flex: none; display: grid; place-items: center; width: 108px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--dw-cyan) calc(var(--p) * 1%), rgb(255 255 255 / 8%) 0); }
.ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--dw-surface); }
.ring b { position: relative; font: 700 26px var(--dw-display); letter-spacing: -0.03em; }
.bc-bank { grid-area: bank; padding: 0; background: #0b0b0d; }
.bank-shot { flex: 1; min-height: 0; overflow: hidden; }
.bank-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bc-bank figcaption { padding: 16px 20px 18px; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .chart .line, [data-reveal] .chart .area { clip-path: none; transition: none; }
  .bars i { transform: none; transition: none; }
  .dash-tabs .prog { animation: none !important; }
}
@media (max-width: 760px) {
  .mv1 { display: block; margin: 44px -4px 40px; }
  .dash-head { padding: 18px 18px 14px; }
  .dash-head span { font-size: 12px; }
  .dash-tabs { grid-template-columns: 1fr 1fr; }
  .dash-tabs button { padding: 13px 16px 14px; font-size: 12px; }
  .dash-tabs button:nth-child(3) { box-shadow: inset 0 1px var(--dw-line); }
  .dash-tabs button:nth-child(4) { box-shadow: inset 1px 1px var(--dw-line); }
  .dash-tabs button b { font-size: 22px; }
  .dash-plot { padding: 20px 16px 14px 52px; }
  .dash-axis { left: 12px; top: 20px; height: 170px; font-size: 11px; }
  .dash-chart { height: 170px; }
  .dash-x .mid { display: none; }
  .dash-x { font-size: 11px; }
  .dash-phone { display: block; width: 190px; margin: 28px auto 0; border-radius: 34px; padding: 7px; transform: rotate(3deg); }
  .dash-phone > img { border-radius: 28px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 26px 0; margin-bottom: 48px; }
  .stats div:nth-child(3) { box-shadow: none; }
  .mv3 { grid-template-columns: 1fr 1fr; grid-template-areas: "rev rev" "views views" "subs feed" "eng eng" "bank bank"; gap: 10px; margin: 44px 0 40px; }
  .bc { min-height: 0; padding: 18px; border-radius: 18px; }
  .bc figcaption b { font-size: 28px; }
  .bc-rev .bars { height: 150px; gap: 4px; }
  .bc-subs .bars { height: 80px; margin-top: 18px; }
  .bc-feed { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ring { width: 86px; }
  .ring b { font-size: 21px; }
  .bank-shot { height: 420px; flex: none; }
}

/* Native disclosure rows for the three-question footer FAQ. */
.faq { max-width: 900px; margin: 0 auto; padding: 64px 24px 88px; }
.faq h2 { margin-bottom: 14px; text-align: left; }
.faq .lede { margin: 0 0 30px; }
.faq-list { border-top: 1px solid var(--dw-line); }
.faq-item { border-bottom: 1px solid var(--dw-line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; color: var(--dw-fg); font-size: 16px; font-weight: 500; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
/* One plus that turns 45deg into a cross while its answer is open, in a fixed colour: noboringsites'
   FAQ icon (landing/app/globals.css .faq-icon: 18px Lucide plus, stroke 2.2, rotate(45deg) over
   .3s cubic-bezier(.2, .8, .2, 1)), without its colour change. */
.faq-item summary::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--dw-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.faq-item[open] summary::after { transform: rotate(45deg); }
/* The native answer panel opens and closes by height where the browser can (::details-content with
   interpolate-size); elsewhere it opens at once, as native details do. */
.faq { interpolate-size: allow-keywords; }
.faq-item::details-content { block-size: 0; overflow-y: clip; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after, .faq-item::details-content { transition: none; } }
.faq-item summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.faq-item p { margin: 0; padding: 0 36px 22px 0; color: var(--dw-muted); font-size: 15px; line-height: 1.75; }

/* ---------------- Legal pages (terms.html, privacy.html, cookies.html) ---------------- */
.legal { max-width: 72ch; margin: 0 auto; padding: 128px 20px 96px; color: var(--dw-muted); line-height: 1.7; }
.legal h1 { color: var(--dw-fg); font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; }
.legal h1 + p { margin-top: 14px; font-size: 14px; color: var(--dw-subtle); }
.legal h2 { margin-top: 48px; color: var(--dw-fg); font-size: 22px; line-height: 1.25; }
.legal p { margin-top: 14px; }
/* The studio policy review hub (legal/review/): a plain status note and a ruled list of the drafts. */
.legal .legal-banner { margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: rgb(255 255 255 / 4%); box-shadow: inset 0 0 0 1px var(--dw-line-strong); color: var(--dw-fg); }
.legal-list { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--dw-line); }
.legal-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--dw-line); }
.legal-status { flex: none; color: var(--dw-subtle); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.legal-table { margin-top: 20px; overflow-x: auto; }
.legal table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.legal th, .legal td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--dw-line); text-align: left; vertical-align: top; }
.legal th { color: var(--dw-fg); font-weight: 600; }

/* Entrance motion, from the login modal (web/src/styles/account.css): items rise 12px and fade
   on the expo ease, 40-60ms apart; panels pop from 26px below with its small overshoot; the mark
   turns in. Each element plays once, when its group first reaches the viewport. landing.js sets
   html.can-rise only when motion is allowed, so without script or with reduced motion nothing hides. */
html.can-rise [data-rise]:not(.risen) { opacity: 0; }
html.can-rise [data-rise].risen { animation: dw-rise .6s var(--ease) calc(var(--rise-i, 0) * 60ms) backwards; }
html.can-rise [data-rise="pop"].risen { animation: dw-pop .7s cubic-bezier(.3, 1.45, .55, 1) calc(var(--rise-i, 0) * 70ms) backwards; }
html.can-rise [data-rise="mark"].risen { animation: dw-mark .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--rise-i, 0) * 60ms) backwards; }
html.can-rise [data-rise="fade"].risen { animation: dw-fade 1.1s ease calc(var(--rise-i, 0) * 60ms) backwards; }
/* The first screen needs no script, so it animates from the first paint without a blink. */
@media (prefers-reduced-motion: no-preference) {
  .nav .brand img { animation: dw-mark .6s cubic-bezier(.3, 1.6, .5, 1) .08s backwards; }
  :is(.nav .brand span, .nav-links, .nav-actions .btn, #m-title, .hero-description, #signup-cta) { animation: dw-rise .6s var(--ease) backwards; }
  .nav .brand span { animation-delay: .14s; }
  .nav-links { animation-delay: .18s; }
  .nav-actions .btn:first-child { animation-delay: .22s; }
  .nav-actions .btn:last-child { animation-delay: .26s; }
  .m-hero .canvas { animation: dw-fade 1.1s ease backwards; }
  #m-title { animation-delay: .16s; }
  .hero-description { animation-delay: .26s; }
  #signup-cta { animation-delay: .36s; }
}
@keyframes dw-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes dw-pop { from { opacity: 0; transform: translateY(26px) scale(.96); } 55% { opacity: 1; } }
@keyframes dw-mark { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
@keyframes dw-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.can-rise [data-rise] { opacity: unset !important; animation: none !important; } }

/* ---------------- Linked pages (site/build-pages.mjs): same tokens, buttons and sections ---------------- */
.pg-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 72px; max-width: 1180px; margin: 0 auto; padding: 168px 24px 104px; }
.pg-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; font: 700 12px/1.3 var(--dw-body); letter-spacing: .14em; text-transform: uppercase; color: var(--dw-cyan); }
.pg-planned { padding: 4px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(22 187 250 / 40%); color: var(--dw-fg); font-size: 11px; letter-spacing: .06em; }
.pg-hero h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.04; text-wrap: balance; }
.pg-hero .lede { margin: 24px 0 34px; }
.pg-media { display: grid; justify-items: center; gap: 16px; min-width: 0; margin: 0; }
.pg-media figcaption { max-width: 36ch; text-align: center; }
.pg-phone { width: 280px; aspect-ratio: auto; }
.pg-phone-sm { width: 210px; flex: none; }
.pg-phone video, .pg-clip video, .pg-wide video { width: 100%; height: 100%; object-fit: cover; }
.pg-wide { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: #050506; box-shadow: 0 0 0 1px var(--dw-line), 0 50px 100px -40px rgb(0 0 0 / 90%); }
.pg-stills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(420px, 100%); }
.pg-stills img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px var(--dw-line); }
.pg-stills img:nth-child(even) { transform: translateY(28px); }
.pg-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.pg-thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px var(--dw-line); }
.pg-label { font: 700 11px/1.3 var(--dw-body); letter-spacing: .14em; text-transform: uppercase; color: var(--dw-subtle); }
.pg-script { display: flex; align-items: center; gap: 20px; }
.pg-script-card, .pg-schedule, .pg-studio, .pg-outline-card, .pg-account { border-radius: var(--dw-panel-radius); background: rgb(255 255 255 / 3%); box-shadow: inset 0 0 0 1px var(--dw-line); }
.pg-script-card { width: 250px; padding: 22px; }
.pg-script-idea { margin-top: 10px; font: 700 17px/1.3 var(--dw-display); letter-spacing: -.01em; }
.pg-script-card ol, .pg-studio-script ol { display: grid; gap: 8px; margin: 14px 0 0; padding: 0 0 0 18px; color: var(--dw-muted); font-size: 14px; line-height: 1.45; }
.pg-schedule { width: min(440px, 100%); padding: 24px; }
.pg-schedule-flag { display: inline-flex; padding: 4px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(22 187 250 / 40%); color: var(--dw-cyan); font: 700 11px/1.3 var(--dw-body); letter-spacing: .06em; text-transform: uppercase; }
.pg-schedule-h { margin-top: 16px; font: 700 18px/1.3 var(--dw-display); }
.pg-schedule ul { margin: 12px 0 0; padding: 0; list-style: none; }
.pg-schedule li { display: grid; grid-template-columns: 76px 1fr; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--dw-line); font-size: 14px; }
.pg-schedule time { grid-row: span 2; color: var(--dw-subtle); font-variant-numeric: tabular-nums; }
.pg-schedule em { font-style: normal; font-size: 12px; color: var(--dw-muted); }
.pg-studio { width: 100%; padding: 18px; }
.pg-stages { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.pg-stages li { display: flex; gap: 6px; padding: 6px 10px; border-radius: 8px; background: rgb(255 255 255 / 4%); color: var(--dw-muted); font-size: 12px; font-weight: 600; }
.pg-stages li span { color: var(--dw-subtle); font-variant-numeric: tabular-nums; }
.pg-stages li.on { background: rgb(255 255 255 / 10%); color: var(--dw-fg); }
.pg-studio-body { display: grid; grid-template-columns: 1.2fr 1fr 0.7fr; gap: 14px; align-items: start; }
.pg-studio-script ol { font-size: 12.5px; }
.pg-chip { display: inline-flex; margin-top: 12px; padding: 5px 9px; border-radius: 999px; background: rgb(22 187 250 / 12%); color: var(--dw-cyan); font-size: 12px; }
.pg-studio-scenes > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.pg-studio-scenes img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; }
.pg-studio-film .pg-clip { margin-top: 10px; }
.pg-clip { overflow: hidden; aspect-ratio: 9 / 16; border-radius: 14px; background: #050506; box-shadow: 0 0 0 1px var(--dw-line); }
.pg-section { max-width: 1180px; margin: 0 auto; padding: 72px 24px; }
.pg-section > h2 { max-width: 20ch; margin-bottom: 32px; }
.pg-steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.pg-steps .steps li { opacity: 1; }
.pg-rows { display: grid; }
.pg-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 44px 0; border-top: 1px solid var(--dw-line); }
.pg-row:last-child { border-bottom: 1px solid var(--dw-line); }
.pg-rows-numbered .pg-row { grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); }
.pg-n { padding-top: 8px; color: var(--dw-subtle); font-size: 13px; font-variant-numeric: tabular-nums; }
.pg-row h2 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; text-wrap: balance; }
.pg-row p, .pg-body { max-width: 38em; color: var(--dw-muted); font-size: 18px; line-height: 1.65; }
.pg-proof h2 { max-width: 20ch; margin: 0 auto; font-size: clamp(32px, 3.6vw, 52px); font-weight: 700; line-height: 1.06; letter-spacing: var(--dw-display-tracking); color: var(--dw-fg); }
.pg-outline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pg-outline .pg-body { margin-top: 22px; }
.pg-outline-card { margin: 0; padding: 8px 24px 20px; }
.pg-outline-card ol { margin: 0; padding: 0; list-style: none; }
.pg-outline-card li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--dw-line); }
.pg-outline-card time { color: var(--dw-cyan); font-size: 13px; font-variant-numeric: tabular-nums; }
.pg-outline-card b { display: block; font-size: 15px; }
.pg-outline-card li span { color: var(--dw-muted); font-size: 14px; }
.pg-outline-card figcaption { margin-top: 14px; }
.pg-gallery .pg-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.pg-strip .pg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pg-grid figure { margin: 0; }
.pg-grid figcaption { margin-top: 10px; color: var(--dw-muted); font-size: 13px; line-height: 1.45; }
.pg-strip img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; box-shadow: 0 0 0 1px var(--dw-line); }
.pg-gallery > .fine, .pg-strip > .fine { margin-top: 18px; }
.pg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pg-card { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: 18px; background: rgb(255 255 255 / 3%); box-shadow: inset 0 0 0 1px var(--dw-line); color: var(--dw-fg); text-decoration: none; transition: background-color .2s ease, transform .2s var(--ease); }
.pg-card:hover { background: rgb(255 255 255 / 6%); transform: translateY(-2px); }
.pg-card b { font: 700 19px/1.25 var(--dw-display); letter-spacing: -.01em; }
.pg-card > span:last-child { color: var(--dw-muted); font-size: 14px; line-height: 1.5; }
.pg .faq { padding-top: 72px; }

/* Contact: White Glove's two columns (measured 27 September), in DreamWild's surfaces. */
.pg-contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 160px 24px 120px; }
.pg-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--dw-line); color: var(--dw-cyan); font: 700 12px/1.3 var(--dw-body); letter-spacing: .1em; text-transform: uppercase; }
.pg-pill i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.pg-contact h1 { margin-top: 24px; font-size: clamp(40px, 5vw, 68px); line-height: 1.04; }
.pg-contact h1 span { display: block; color: var(--dw-muted); }
.pg-contact .lede { margin: 24px 0 32px; }
.pg-contact .lede a, .pg-reasons a { color: var(--dw-fg); }
.pg-reasons { display: grid; gap: 18px; margin: 0 0 32px; padding: 0; list-style: none; }
.pg-reasons li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.pg-reason-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgb(22 187 250 / 10%); color: var(--dw-cyan); }
.pg-reasons b { display: block; font-size: 15px; }
.pg-reasons li span:not(.pg-reason-icon) { color: var(--dw-muted); font-size: 14px; line-height: 1.5; }
.pg-account { padding: 32px; }
.pg-account-head { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; margin-bottom: 24px; }
.pg-lock { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgb(255 255 255 / 5%); box-shadow: inset 0 0 0 1px var(--dw-line); }
.pg-account-head h2 { font-size: 20px; line-height: 1.2; }
.pg-account-head p { margin-top: 4px; color: var(--dw-muted); font-size: 14px; }
.pg-account .seg { width: 100%; }
.pg-panels { display: grid; margin-top: 24px; }
.pg-panel { grid-area: 1 / 1; }
.pg-panel[hidden] { display: block; visibility: hidden; }
.pg-panel h3 { font-size: 18px; }
.pg-panel p { margin: 8px 0 22px; color: var(--dw-muted); font-size: 15px; line-height: 1.55; }
.pg-panel .btn { width: 100%; }
.pg-legal { margin-top: 20px; text-align: center; }
.pg-legal a { color: var(--dw-muted); }

@media (max-width: 1080px) {
  .pg-gallery .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-studio-body { grid-template-columns: 1fr 1fr; }
  .pg-studio-film { display: none; }
}
@media (max-width: 860px) {
  .pg-hero, .pg-contact, .pg-steps, .pg-outline { grid-template-columns: 1fr; gap: 40px; }
  .pg-hero { padding: 128px 20px 64px; }
  .pg-contact { padding: 128px 20px 88px; }
  .pg-section { padding: 56px 20px; }
  .pg-row, .pg-rows-numbered .pg-row { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .pg-row p, .pg-body { font-size: 16px; }
  .pg-cards { grid-template-columns: 1fr; }
  .pg-strip .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-script { flex-direction: column; }
  .pg-script-card { width: 100%; }
}
@media (max-width: 560px) {
  .pg-gallery .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-phone { width: 240px; }
  .pg-account { padding: 22px; }
  .pg-studio-body { grid-template-columns: 1fr; }
  .pg-studio-scenes > div { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------- Get Started layouts (site/build-pages.mjs), one composition per buyer ---------------- */
/* Start: a large upright phone beside the hero. */
.pg-media-large .pg-phone { width: 340px; }
/* Scale: a production row of three real phones, the middle one raised. */
.pg-media-row { justify-items: stretch; }
.pg-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: center; }
.pg-row3 .pg-phone { width: 100%; }
.pg-row3 .pg-phone:nth-child(2) { transform: translateY(-22px); }
/* Income: an editorial hero, the argument alone and wide. */
.pg-hero-text { grid-template-columns: 1fr; padding-bottom: 32px; text-align: center; }
.pg-hero-text .pg-hero-copy { max-width: 940px; margin: 0 auto; }
.pg-hero-text .pg-eyebrow, .pg-hero-text .cta-row { justify-content: center; }
.pg-hero-text h1 { font-size: clamp(46px, 6.6vw, 96px); line-height: 1; }
.pg-hero-text .lede { margin-inline: auto; text-wrap: balance; }
/* 3D: the demonstrator first, one large clip over its own blurred still. */
.pg-hero-feature { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.pg-feature { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; padding: 40px 0; overflow: hidden; border-radius: 28px; box-shadow: inset 0 0 0 1px var(--dw-line); }
.pg-feature::before { content: ""; position: absolute; inset: -60px; z-index: -1; background: var(--still) center / cover; filter: blur(44px) saturate(1.25) brightness(.5); }
.pg-feature .pg-phone { width: 320px; }
/* Start: the idea-to-video path, the four steps left to right. */
.pg-sequence-head, .pg-formats-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.pg-sequence-head h2, .pg-formats-head h2 { max-width: 16ch; }
.pg-sequence .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 40px 0 0; }
.pg-sequence .steps li { grid-template-columns: 1fr; align-content: start; gap: 10px; padding: 22px; border: 0; border-radius: 18px; background: rgb(255 255 255 / 3%); box-shadow: inset 0 0 0 1px var(--dw-line); opacity: 1; }
.pg-sequence .steps .n { color: var(--dw-cyan); }
/* The format picker: chips choose, the chosen example takes the stage, neighbours either side (formats.js). */
.pg-format-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.pg-format-chips button { padding: 10px 16px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 5%); box-shadow: inset 0 0 0 1px var(--dw-line); color: var(--dw-muted); font: 600 14px/1 var(--dw-body); cursor: pointer; }
.pg-format-chips button:hover { color: var(--dw-fg); }
.pg-format-chips button[aria-selected="true"] { background: rgb(22 187 250 / 16%); box-shadow: inset 0 0 0 1px rgb(22 187 250 / 45%); color: var(--dw-fg); }
.pg-format-stage { position: relative; height: 580px; margin-top: 24px; overflow: hidden; }
.pg-format { position: absolute; left: 50%; top: 50%; width: 270px; margin: 0; transition: transform .55s var(--ease), opacity .55s var(--ease); }
.pg-format .pg-clip { border-radius: 16px; }
.pg-format figcaption { margin-top: 10px; color: var(--dw-muted); font-size: 13px; text-align: center; }
.pg-format[data-pos="0"] { z-index: 3; transform: translate(-50%, -50%); }
.pg-format[data-pos="-1"] { z-index: 2; opacity: .45; transform: translate(calc(-50% - 270px), -50%) scale(.8) rotate(-4deg); cursor: pointer; }
.pg-format[data-pos="1"] { z-index: 2; opacity: .45; transform: translate(calc(-50% + 270px), -50%) scale(.8) rotate(4deg); cursor: pointer; }
.pg-format[data-pos="far"] { z-index: 1; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.6); }
.pg-formats > .fine, .pg-alternate > .fine, .pg-compare > .fine { margin-top: 14px; }
.pg-formats > .fine { text-align: center; }
/* Scale: a compact historical proof band. */
.pg-band-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px 48px; padding: 40px; border-radius: var(--dw-panel-radius); background: linear-gradient(135deg, rgb(43 106 254 / 12%), rgb(255 255 255 / 2%) 60%); box-shadow: inset 0 0 0 1px var(--dw-line); }
.pg-band-card h2 { grid-row: span 2; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; text-wrap: balance; }
.pg-band-card p { color: var(--dw-muted); font-size: 18px; line-height: 1.65; }
.pg-band-card .fine { font-size: 13px; }
/* Scale: workflow rows beside real clips, sides alternating. */
.pg-alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 40px 0; border-top: 1px solid var(--dw-line); }
.pg-alt.flip > figure { order: -1; }
.pg-alt h2 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; text-wrap: balance; }
.pg-alt .pg-body { margin-top: 16px; }
/* Long-form: a plain comparison table. */
.pg-table { overflow-x: auto; border-radius: var(--dw-panel-radius); box-shadow: inset 0 0 0 1px var(--dw-line); }
.pg-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.pg-table th, .pg-table td { padding: 18px 22px; border-bottom: 1px solid var(--dw-line); text-align: left; }
.pg-table thead th { color: var(--dw-subtle); font: 700 11px/1.3 var(--dw-body); letter-spacing: .14em; text-transform: uppercase; }
.pg-table tbody tr:last-child > * { border-bottom: 0; }
.pg-table tbody th { color: var(--dw-fg); font-weight: 600; }
.pg-table td { color: var(--dw-muted); }
/* 3D: an asymmetrical strip of real examples. */
.pg-gallery-strip .pg-grid { align-items: start; }
.pg-gallery-strip figure:nth-child(even) { margin-top: 56px; }
@media (prefers-reduced-motion: reduce) { .pg-format { transition: none; } }
@media (max-width: 860px) {
  .pg-hero-feature { grid-template-columns: 1fr; }
  .pg-sequence-head, .pg-formats-head, .pg-band-card, .pg-alt { grid-template-columns: 1fr; gap: 16px; }
  .pg-alt.flip > figure { order: 0; }
  .pg-sequence .steps { grid-template-columns: 1fr 1fr; }
  .pg-row3 .pg-phone:nth-child(2) { transform: none; }
  .pg-media-large .pg-phone { width: 280px; }
  .pg-feature .pg-phone { width: 250px; }
  .pg-format-stage { height: 480px; }
  .pg-format { width: 220px; }
  .pg-format[data-pos="-1"] { transform: translate(calc(-50% - 150px), -50%) scale(.72) rotate(-4deg); }
  .pg-format[data-pos="1"] { transform: translate(calc(-50% + 150px), -50%) scale(.72) rotate(4deg); }
  .pg-band-card { padding: 28px 22px; }
  .pg-band-card h2 { grid-row: auto; }
  .pg-hero-text h1 { font-size: clamp(40px, 11vw, 60px); }
  .pg-gallery-strip figure:nth-child(even) { margin-top: 32px; }
}