/* ============================================================================
   theme.css — PER-APP palette + brand overrides (the only design file a new
   site rewrites). tokens.css supplies structure; this supplies colour and the
   handful of brand-distinguishing knobs (--display, --radius, chip style).

   Cardpile: the app's OWN tokens (design/tokens/cardpile.tokens.json, mirrored in
   tokens-generated.css): a cool graphite instrument ground, Recall Amber for growth,
   Stable Teal for "this card is stable", a ROUNDED display face and mono data. Until
   2026-09-07 this file carried the warm cream palette (#faf9f5 / #b8791f) the app had
   left behind in the 2026-06-26 design pass (docs/design-review/cardpile.md), so the
   site and the app no longer matched. It now reads the same values the app paints.

   Recall Amber #d98a2b is ~2.9:1 on Paper, so the contract's --accent-text escape
   hatch carries accentInk #925600 (5.42:1 on #f4f5f7, the value the app's own
   sign-off uses) for links and small text; the bright amber stays for fills and the
   ladder. Accent-tinted surfaces use color-mix(var(--accent)) so re-hueing cascades.
   ============================================================================ */

/* Launch flip: the store buttons follow app.toml [store] app_store_url + play_store_url through
   build.mjs's launchState, so live copy and coming-soon copy can never show together
   (launch-copy-gate grades exactly this). The badge rule is the cross-platform half: a badge
   whose own store is not live (or that is not a target platform at all) hides itself, instead of
   rendering a link-less button beside a working one. A child selector on [data-launch] serves
   every CTA block on the site with one rule: flex-wrap lets the hero's auto-width badges sit in
   a row while a narrow column stacks them with the same gap. */
[data-launch] > .launch-live, [data-launch] > .launch-prelaunch{ display:flex; gap:.9rem;
  flex-wrap:wrap; align-items:center; }
[data-launch="prelaunch"] .launch-live{ display:none; }
[data-launch="live"] .launch-prelaunch{ display:none; }
[data-store-badge="prelaunch"], [data-store-badge="absent"]{ display:none; }

/* ---- light (Paper / Ink / Recall Amber / Stable Teal) ---- */
:root,
[data-theme="light"] {
  --bg:#f4f5f7; --bg-2:#e9ebef; --surface:#ffffff;
  --text:#1b1d23; --text-soft:#5b5f6b;
  --accent:#d98a2b; --accent-2:#e39a3f; --accent-ink:#14161c;
  --accent-text:#925600;                 /* accentInk: AA 5.42:1 on --bg */
  --strength:#006c57;                    /* Stable Teal, the ladder's top rung */
  --line:#d9dce3; --line-2:#c7cbd4;
  --verified:#006c57; --caution:#8d5000; --caution-text:#8d5000;
  --display: ui-rounded, "SF Pro Rounded", var(--sans);   /* the app's display tier */
  --display-tracking:-.02em;
  --radius:18px; --radius-sm:12px;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
}

/* ---- dark (graphite, the app's true ground) ---- */
[data-theme="dark"] {
  --bg:#14161c; --bg-2:#22252e; --surface:#1c1f27;
  --text:#e7e9ee; --text-soft:#a9adb8;
  --accent:#e0a845; --accent-2:#e8b85f; --accent-ink:#14161c;
  --accent-text:#e0a845;                 /* AA ≈8.6:1 on --bg */
  --strength:#5bc2a8;
  --line:#2c303a; --line-2:#3a3f4b;
  --verified:#5bc2a8; --caution:#ff9f0a; --caution-text:#ffb340;
  --chip-bg:#22252e;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 20%, transparent), transparent 72%);
}

/* Follow the OS when the document hasn't pinned a theme via [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#14161c; --bg-2:#22252e; --surface:#1c1f27;
    --text:#e7e9ee; --text-soft:#a9adb8;
    --accent:#e0a845; --accent-2:#e8b85f; --accent-ink:#14161c;
    --accent-text:#e0a845;
    --strength:#5bc2a8;
    --line:#2c303a; --line-2:#3a3f4b;
    --verified:#5bc2a8; --caution:#ff9f0a; --caution-text:#ffb340;
    --chip-bg:#22252e;
    --halo: radial-gradient(58% 55% at 80% -10%,
              color-mix(in oklab, var(--accent) 20%, transparent), transparent 72%);
  }
}

/* ============================================================================
   STAGE LAYER (owner brief 2026-09-29: unique, audience-built sites) — "De stapel".
   Cardpile's audience studies, often at night, so the hero is the app's own graphite instrument
   ground with the review loop playable on it. Everything is scoped: .cx-* for the homepage,
   body:has(.cx-home) for the chrome that sits over it, and the language pills for every page.
   Additive: shared site.css keeps styling features / faq / support / 404.
   ============================================================================ */

.cp-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:12px; font-weight:750;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text); }
.cp-eyebrow::before{ content:""; width:1.4rem; height:2px; background:var(--accent); border-radius:2px; }
.cp-num{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--text-soft); }
.cp-num-stable{ color:var(--strength); }
.cp-lede{ font-size:1.18rem; line-height:1.6; color:var(--text-soft); max-width:31rem; margin:0 0 2rem; }
.cp-hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.cp-coming{ font-size:1.05rem; color:var(--text); }
.cp-ghost{ display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.2rem; border-radius:999px;
  border:1px solid var(--line-2); color:var(--text); font-size:.95rem; font-weight:600;
  text-decoration:none; transition:transform .15s ease, border-color .15s ease; }
.cp-ghost:hover{ color:var(--accent-text); border-color:var(--accent); transform:translateY(-1px); }
.cp-store{ display:inline-flex; align-items:center; gap:.7rem; text-align:left; padding:.6rem 1.15rem;
  border-radius:var(--radius-sm); background:var(--text); color:var(--bg); text-decoration:none;
  transition:transform .15s ease; }
.cp-store:hover{ color:var(--bg); transform:translateY(-1px); }
.cp-store small{ display:block; font-size:10px; font-weight:500; letter-spacing:.03em; line-height:1.15; }
.cp-store b{ display:block; font-size:16px; font-weight:650; line-height:1.15; }
.cp-hero-note{ font-family:var(--mono); font-size:.82rem; letter-spacing:.02em; color:var(--text-soft);
  margin:1.5rem 0 0; }
.cp-hero-note b{ color:var(--text); }
.cp-step h3{ font-family:var(--display); font-size:1.45rem; font-weight:700; line-height:1.18;
  letter-spacing:var(--display-tracking); margin:0; text-wrap:balance; }
.cp-step p{ margin:0; font-size:.98rem; line-height:1.6; color:var(--text-soft); }
.cp-ladder rect{ fill:var(--accent); }
.cp-ladder .cp-rung-stable{ fill:var(--strength); }
.cp-step-idx{ display:grid; gap:.5rem; align-content:start; }

/* ---- the chrome over the stage ---- */
body:has(.cx-home){ position:relative; background:var(--bg); }
body:has(.cx-home) main{ max-width:none; padding-inline:0; }
body:has(.cx-home) header.nav{ position:absolute; top:0; left:0; right:0; z-index:30;
  margin-inline:auto; --text:#eef0f4; --text-soft:#a9adb8; }
body:has(.cx-home) header.nav .brand{ color:#fff; }
body .app-langs{ margin-top:1.4rem; gap:.6rem; }
.app-langs-lead{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-text); font-weight:600; }
.app-langs-note{ font-size:.8rem; }

/* ---- the stage: graphite, in both colour schemes ---- */
.cx-stage{ --text:#eef0f4; --text-soft:#a9adb8; --bg:#14161c; --surface:#1c1f27; --accent:#e0a845;
  --accent-2:#e8b85f; --accent-ink:#14161c; --accent-text:#e0a845; --strength:#5bc2a8;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.24);
  position:relative; isolation:isolate; overflow:hidden; color:var(--text);
  background:
    radial-gradient(52rem 40rem at 78% 38%, rgba(224,168,69,.20), transparent 62%),
    radial-gradient(40rem 30rem at 100% 100%, rgba(91,194,168,.16), transparent 60%),
    radial-gradient(60rem 30rem at 0% 0%, rgba(120,130,170,.10), transparent 60%),
    #101218;
  padding-block:clamp(9.5rem,17vh,12.5rem) clamp(4.5rem,9vh,7rem); }
.cx-stage-in{ position:relative; z-index:2; max-width:72rem; margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2.5rem); display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.cx-copy h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.9rem,6.2vw,5.9rem);
  line-height:1; letter-spacing:-.035em; margin:1.3rem 0 1.5rem; max-width:11ch; text-wrap:balance;
  background:linear-gradient(178deg,#fff 30%,#b9bfcd); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; }
.cx-copy .cp-lede{ font-size:clamp(1.05rem,1.4vw,1.22rem); }
.cx-stage-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 70% at 70% 45%, #000, transparent 75%);
  mask-image:radial-gradient(70% 70% at 70% 45%, #000, transparent 75%); }
.cx-stage-rungs{ position:absolute; left:0; right:0; bottom:0; height:52%; z-index:1; display:flex;
  align-items:flex-end; justify-content:space-around; padding-inline:2vw; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 62%); mask-image:linear-gradient(90deg,transparent 30%,#000 62%); }
.cx-stage-rungs i{ display:block; width:clamp(1.4rem,5.6vw,5.2rem); border-radius:999px 999px 0 0;
  background:linear-gradient(180deg, rgba(224,168,69,.16), rgba(224,168,69,0)); }
.cx-stage-rungs i:nth-child(1){ height:22%; } .cx-stage-rungs i:nth-child(2){ height:34%; }
.cx-stage-rungs i:nth-child(3){ height:48%; } .cx-stage-rungs i:nth-child(4){ height:62%; }
.cx-stage-rungs i:nth-child(5){ height:76%; } .cx-stage-rungs i:nth-child(6){ height:88%; }
.cx-stage-rungs i:nth-child(7){ height:100%;
  background:linear-gradient(180deg, rgba(91,194,168,.22), rgba(91,194,168,0)); }

/* ---- the pile ---- */
.cx-scene{ --rx:0deg; --ry:0deg; position:relative; justify-self:center; width:min(100%,27rem);
  aspect-ratio:3/4.15; perspective:1500px; }
.cx-pile{ position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .25s ease-out; }
.cx-card{ --i:0; --flip:0deg; position:absolute; left:0; top:8%; width:80%; height:80%;
  transform-style:preserve-3d; cursor:pointer;
  transform:translate3d(calc(var(--i)*15%*.9), calc(var(--i)*-5.5%), calc(var(--i)*-90px))
    rotate(calc(var(--i)*2.4deg - 2.6deg)) rotateY(var(--flip));
  transition:transform .75s cubic-bezier(.2,.85,.25,1), opacity .45s ease; }
.cx-card.is-flipped{ --flip:180deg; }
.cx-card.is-gone{ transform:translate3d(120%, 8%, 40px) rotate(16deg); opacity:0; }
.cx-face{ position:absolute; inset:0; border-radius:2rem; backface-visibility:hidden;
  -webkit-backface-visibility:hidden; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg,#2a2e39 0%,#1c1f27 55%);
  box-shadow:0 40px 60px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12); }
.cx-card:not(.is-top) .cx-face{ filter:brightness(calc(1 - var(--i)*.13)); }
.cx-front{ display:grid; place-items:center; }
.cx-front img{ width:58%; height:auto; aspect-ratio:1; border-radius:1.6rem; background:#f4f5f7;
  padding:6%; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); }
.cx-ladder-mini{ position:absolute; left:1.4rem; bottom:1.3rem; display:flex; gap:.3rem; align-items:flex-end; }
.cx-ladder-mini i{ width:.55rem; border-radius:.3rem; background:var(--accent); }
.cx-ladder-mini i:nth-child(1){ height:.7rem; } .cx-ladder-mini i:nth-child(2){ height:1.15rem; }
.cx-ladder-mini i:nth-child(3){ height:1.65rem; } .cx-ladder-mini i:nth-child(4){ height:2.2rem; background:var(--strength); }
.cx-back{ transform:rotateY(180deg); display:grid; grid-template-rows:1fr auto; padding:1.3rem; }
.cx-answer{ align-self:center; justify-self:center; font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,6vw,4.2rem); letter-spacing:-.03em; color:#fff; }
.cx-grades{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.cx-grades b{ display:grid; place-items:center; height:3.1rem; border-radius:1rem; font-family:var(--mono);
  font-size:.86rem; font-weight:700; letter-spacing:.02em; color:#14161c; }
.cx-grades b:nth-child(1){ background:#f09a8f; } .cx-grades b:nth-child(2){ background:#e0a845; }
.cx-grades b:nth-child(3){ background:#8ed6a4; } .cx-grades b:nth-child(4){ background:#5bc2a8; }
.cx-card.is-top .cx-grades b{ cursor:pointer; transition:transform .15s; }
.cx-card.is-top .cx-grades b:hover{ transform:translateY(-2px) scale(1.04); }

/* ---- the subjects, drifting ----
   In the DOM this band follows the four steps (the copy keeps its order for the translation stamp);
   it is shown right under the hero. */
.cx-home{ display:flex; flex-direction:column; }
.cx-stage{ order:-2; } .cx-subjects{ order:-1; }
.cx-subjects{ background:#14161c; color:#a9adb8; border-top:1px solid rgba(255,255,255,.08);
  padding-block:1.8rem 2.6rem; overflow:hidden; }
.cx-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.cx-marquee ul{ list-style:none; margin:0; padding:0; display:flex; gap:1rem; width:max-content;
  margin-inline:auto; }
.cx-marquee.is-running ul, .cx-marquee ul.is-running{ animation:cx-drift 44s linear infinite; margin-inline:0; }
.cx-marquee li{ width:5.4rem; height:5.4rem; border-radius:1.5rem; background:#f4f5f7; flex:none;
  display:grid; place-items:center; box-shadow:0 12px 30px -16px rgba(0,0,0,.7); }
.cx-marquee img{ width:4.4rem; height:4.4rem; }
.cx-subjects p{ text-align:center; max-width:36rem; margin:1.6rem auto 0; padding-inline:1.2rem;
  font-size:.95rem; line-height:1.6; }
@keyframes cx-drift{ to{ transform:translateX(-50%); } }

/* ---- the climb ---- */
.cx-steps{ padding-block:clamp(3.5rem,8vw,7rem); }
.cx-steps-in{ max-width:72rem; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,6rem); }
.cx-climb{ position:relative; }
.cx-climb-in{ position:sticky; top:22vh; display:grid; gap:1.4rem; justify-items:start; }
.cx-climb-svg{ width:min(100%,17rem); height:auto; overflow:visible; }
.cx-climb-svg .r{ fill:var(--amber-on, var(--accent)); transition:fill .5s ease, opacity .5s ease; }
.cx-climb-svg .r4{ fill:var(--strength); }
.cx-js .cx-climb-svg .r{ fill:var(--line-2); }
.cx-js .cx-climb-svg[data-on="1"] .r1,
.cx-js .cx-climb-svg[data-on="2"] .r1, .cx-js .cx-climb-svg[data-on="2"] .r2,
.cx-js .cx-climb-svg[data-on="3"] .r1, .cx-js .cx-climb-svg[data-on="3"] .r2, .cx-js .cx-climb-svg[data-on="3"] .r3{
  fill:var(--accent); }
.cx-js .cx-climb-svg[data-on="4"] .r1, .cx-js .cx-climb-svg[data-on="4"] .r2, .cx-js .cx-climb-svg[data-on="4"] .r3{
  fill:var(--accent); }
.cx-js .cx-climb-svg[data-on="4"] .r4{ fill:var(--strength); }
.cx-js .cx-climb-svg:not([data-on="4"]) .r4{ fill:var(--line-2); }
.cx-climb-num{ font-family:var(--mono); font-size:clamp(3rem,7vw,5.6rem); font-weight:700; line-height:1;
  letter-spacing:-.05em; color:var(--text); font-variant-numeric:tabular-nums; }
.cx-steps-list{ display:grid; }
.cx-step{ display:grid; gap:.9rem; align-content:center; min-height:38vh; padding-block:2.2rem;
  border-bottom:1px solid var(--line); transition:opacity .4s ease; }
.cx-step:last-child{ border-bottom:0; }
.cx-js .cx-step{ opacity:.32; }
.cx-js .cx-step.is-on{ opacity:1; }
.cx-step .cp-step-idx svg{ display:none; }
.cx-step h3{ font-size:clamp(1.55rem,2.6vw,2.2rem); }
.cx-step p{ font-size:1.02rem; max-width:34rem; }
.cx-step code{ font-family:var(--mono); font-size:.92em; color:var(--text); }

/* ---- the ladder + phone ---- */
.cx-craft{ --text:#eef0f4; --text-soft:#a9adb8; --bg:#14161c; --surface:#1c1f27; --accent:#e0a845;
  --accent-text:#e0a845; --strength:#5bc2a8; --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.24);
  position:relative; overflow:hidden; color:var(--text); padding-block:clamp(4rem,9vw,7.5rem);
  background:radial-gradient(46rem 34rem at 82% 55%, rgba(224,168,69,.16), transparent 65%),
    radial-gradient(34rem 26rem at 5% 100%, rgba(91,194,168,.10), transparent 65%), #101218; }
.cx-craft-in{ max-width:72rem; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem);
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2rem,6vw,5rem); align-items:center; }
.cx-craft h2{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,4vw,3.3rem);
  line-height:1.04; letter-spacing:-.035em; margin:.9rem 0 0; text-wrap:balance; }
.cx-craft p{ color:var(--text-soft); line-height:1.65; margin:0 0 1rem; max-width:34rem; }
.cx-intervals{ display:flex; align-items:flex-end; gap:clamp(.6rem,2vw,1.2rem); height:9.5rem; margin:2rem 0 1.8rem;
  border-bottom:1px solid var(--line); }
.cx-iv{ flex:1 1 0; max-width:5.4rem; height:var(--h,30%); display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; position:relative; }
.cx-iv i{ display:block; width:100%; flex:1; border-radius:999px 999px 0 0;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 45%, transparent)); }
.cx-iv.is-stable i{ background:linear-gradient(180deg,var(--strength),color-mix(in srgb,var(--strength) 45%, transparent)); }
.cx-iv b{ position:absolute; top:100%; margin-top:.6rem; font-family:var(--mono); font-size:.85rem;
  font-weight:700; color:var(--text); white-space:nowrap; }
.cx-intervals{ margin-bottom:3rem; }
.cx-craft-figure{ position:relative; display:grid; justify-items:center; margin:0; }
.cx-craft-halo{ position:absolute; inset:8% 6%; border-radius:50%; z-index:0;
  background:radial-gradient(closest-side, rgba(224,168,69,.35), transparent); filter:blur(30px); }
.cx-craft-figure .device{ position:relative; z-index:1; }
.cx-craft-figure .device.dv-iphone{ --dv-scale:.7; --rot:-2.5deg; }
@supports (animation-timeline: view()){
  .cx-iv i{ transform-origin:bottom; animation:cx-grow linear both; animation-timeline:view();
    animation-range:entry 5% cover 35%; }
  @keyframes cx-grow{ from{ transform:scaleY(.05); opacity:.3; } to{ transform:scaleY(1); opacity:1; } }
}

/* ---- pricing: the price sits on a card from the pile ---- */
.cx-pricing{ max-width:72rem; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem);
  padding-block:clamp(4rem,9vw,7rem); display:grid; justify-items:center; }
.cp-price-pile{ position:relative; width:min(34rem,100%); }
.cp-price-pile::before, .cp-price-pile::after{ content:""; position:absolute; inset:0;
  border-radius:var(--radius); pointer-events:none; }
.cp-price-pile::before{ transform:rotate(-5deg) translate(-1.6rem,-.5rem);
  background:color-mix(in srgb, var(--accent) 22%, var(--bg)); }
.cp-price-pile::after{ transform:rotate(3.5deg) translate(1.1rem,-.9rem);
  background:color-mix(in srgb, var(--strength) 20%, var(--bg)); }
.cp-price-card{ position:relative; z-index:1; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:clamp(1.8rem,5vw,2.8rem);
  box-shadow:0 40px 70px -40px rgba(20,22,28,.6); }
.cp-price{ font-family:var(--display); font-variant-numeric:tabular-nums; font-size:clamp(3.6rem,8vw,5.2rem);
  font-weight:800; letter-spacing:-.04em; line-height:1; margin:1rem 0 .3rem; }
.cp-cadence{ color:var(--text-soft); margin:0 0 1rem; }
.cp-price-copy{ color:var(--text-soft); line-height:1.6; margin:0 0 1.2rem; }
.cp-price-card ul{ list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.55rem;
  font-size:.96rem; color:var(--text-soft); }
.cp-price-card li{ display:flex; gap:.6rem; align-items:baseline; }
.cp-check{ color:var(--verified); font-weight:800; flex:none; }
.cp-price-note{ font-size:.86rem; color:var(--text-soft); line-height:1.6; margin:1rem 0 0; }

/* ---- questions ---- */
.cx-faq{ max-width:50rem; margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem);
  padding-block:0 clamp(3rem,7vw,5rem); }
.cx-faq h2{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,4vw,3rem);
  letter-spacing:-.035em; margin:0 0 1.4rem; }
.cx-faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin:0 0 .7rem; }
.cx-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:baseline; gap:1rem; padding:1.05rem 1.3rem; font-weight:620; }
.cx-faq summary::-webkit-details-marker{ display:none; }
.cx-faq summary::after{ content:none; }
.cx-faq summary .pl{ color:var(--accent-text); font-weight:700; transition:transform .2s ease; }
.cx-faq details[open] summary .pl{ transform:rotate(45deg); }
.cx-faq details p{ padding:0 1.3rem 1.2rem; margin:0; color:var(--text-soft); line-height:1.65; font-size:.97rem; }
.cx-faq code{ font-family:var(--mono); font-size:.92em; color:var(--text); }

/* ---- motion: only with no preference against it ---- */
@media (prefers-reduced-motion:no-preference){
  .cx-stage-rungs i{ transform-origin:bottom; animation:cx-rise 1.1s cubic-bezier(.2,.8,.2,1) both; }
  .cx-stage-rungs i:nth-child(2){ animation-delay:.06s; } .cx-stage-rungs i:nth-child(3){ animation-delay:.12s; }
  .cx-stage-rungs i:nth-child(4){ animation-delay:.18s; } .cx-stage-rungs i:nth-child(5){ animation-delay:.24s; }
  .cx-stage-rungs i:nth-child(6){ animation-delay:.3s; } .cx-stage-rungs i:nth-child(7){ animation-delay:.36s; }
  .cx-copy > *{ animation:cx-in .8s cubic-bezier(.2,.8,.2,1) both; }
  .cx-copy > *:nth-child(2){ animation-delay:.08s; } .cx-copy > *:nth-child(3){ animation-delay:.16s; }
  .cx-copy > *:nth-child(4){ animation-delay:.24s; } .cx-copy > *:nth-child(5){ animation-delay:.32s; }
  .cx-copy > *:nth-child(6){ animation-delay:.4s; }
  .cx-scene{ animation:cx-in 1s .15s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes cx-rise{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  @keyframes cx-in{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
}

/* ---- responsive ---- */
@media (max-width:860px){
  .cx-stage-in, .cx-craft-in, .cx-steps-in{ grid-template-columns:minmax(0,1fr); }
  .cx-scene{ width:min(76%,20rem); margin-top:1rem; }
  .cx-climb{ display:none; }
  .cx-step{ min-height:0; }
  .cx-js .cx-step{ opacity:1; }
  .cx-step .cp-step-idx svg{ display:block; }
  .cx-craft-figure{ order:2; }
  .cx-craft-figure .device.dv-iphone{ --dv-scale:.62; }
  body:has(.cx-home) header.nav{ top:0; }
  .cx-stage{ padding-top:9rem; }
}
@media (max-width:440px){
  .cx-copy h1{ font-size:2.6rem; }
  .cx-craft-figure .device.dv-iphone{ --dv-scale:.56; }
  .cp-price-pile::before, .cp-price-pile::after{ display:none; }
  .cx-marquee li{ width:4.4rem; height:4.4rem; border-radius:1.2rem; }
  .cx-marquee img{ width:3.5rem; height:3.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .cp-ghost, .cp-store{ transition:none; }
  .cx-pile, .cx-card{ transition:none; }
}
@media (max-width:640px){
  body:has(.cx-home) header.nav{ top:0; }
  .cx-stage{ padding-top:14rem !important; }
}