/* Landing / marketing pages */
.nav{position:sticky;top:0;z-index:40;background:rgba(11,13,18,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:78px}
.nav a.link{color:var(--txt-2);font-size:16.5px}
.nav a.link:hover{color:var(--txt);text-decoration:none}
@media(max-width:960px){.nav a.link{display:none}}   /* 2026-09-25: was 700px; the larger lockup needs the room (links are also in the footer) */
@media(max-width:1100px){.nav .brand{font-size:27px}.nav .brand .mark{height:37px}.nav .brand .brand-rule{height:40px}}
/* Phones: the brand and the Start button have to share 375px after the 2026-09-24 size bump. */
@media(max-width:520px){.nav .brand{font-size:26px;gap:12px}.nav .brand .mark{height:38px}.nav .brand .brand-words{display:none}   /* phones: the big mark alone — name + mark + button do not fit */.nav .btn-sm{padding:7px 12px;font-size:14px}}

.hero{position:relative;padding:clamp(56px,10vw,110px) 0 clamp(48px,8vw,88px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto;height:120%;
  background:radial-gradient(60% 50% at 50% 0%,rgba(232,181,103,.16),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;gap:clamp(34px,5vw,60px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}}
.hero .display{margin-bottom:.51em}   /* half a headline line, the same as the gap inside it */
.hero .display .hgap{display:block;height:.51em}
.hero .lede{font-size:clamp(19px,2.3vw,23px);line-height:1.5}
.hero .cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:10px}
.step{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.step .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(232,181,103,.13);color:var(--gold);font-weight:700;font-size:16px;margin-bottom:12px;
  border:1px solid rgba(232,181,103,.3)}
.step .clipwrap{position:relative;margin:-22px -22px 18px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  background:#05070b;aspect-ratio:16/9}
.step .clip{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.step .clipwrap::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:rgba(11,13,18,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/22px no-repeat;
  border:1px solid rgba(255,255,255,.25);pointer-events:none;transition:opacity .25s}
.step .clipwrap.playing::after{opacity:0}
@media(hover:none){.step .clipwrap::after{display:none}}
.step h3{margin-bottom:6px}
.step p{margin:0;color:var(--txt-2);font-size:16.5px}

.band{padding:clamp(48px,8vw,84px) 0;border-top:1px solid var(--line)}
.price-card{max-width:440px;margin:0 auto;text-align:center}
.price-card .amt{font-size:52px;font-weight:200;letter-spacing:-.04em;line-height:1;
  display:flex;align-items:baseline;justify-content:center;gap:3px}
/* Previously a <sup> plus a 26px span, which sat off the 29's baseline and clipped into
   it. A baseline-aligned flex row keeps all three parts on one line at any size. */
.price-card .amt .cur{font-size:25.5px;font-weight:400;letter-spacing:0}
.price-card .amt .dec{font-size:30px}
.price-list{list-style:none;padding:0;margin:22px 0;text-align:left;display:grid;gap:9px}
.price-list li{display:flex;gap:10px;align-items:flex-start;font-size:16.5px;color:var(--txt-2)}
.price-list li::before{content:"";width:16px;height:16px;flex:none;margin-top:3px;border-radius:50%;
  background:rgba(87,208,122,.16);border:1px solid rgba(87,208,122,.4)}

.foot{border-top:1px solid var(--line);padding:34px 0 46px;color:var(--txt-3);font-size:15.5px}
.foot .wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--txt-2)}

/* footer: the stacked primary logo sits centred above the link row */
.foot .foot-logo{justify-content:center;margin-bottom:26px}
.foot a.brand-stack{color:#F2EDE4}   /* the logo keeps its ivory; .foot a would grey it */
.foot .wrap{justify-content:center}   /* 2026-09-28: link row centred under the logo */
.foot .spacer{display:none}

/* ---- home page background (2026-09-30): Judy's opening close-up (Scene 01) cut out onto black ----
   The same treatment as the app's pages 4–9 (app.css, body.app[data-selfbg]): a fixed ::before layer, not
   background-attachment:fixed, which iOS Safari ignores; z-index:-1 sits above the canvas, which body's ground
   colour paints. The 16:9 picture is fitted to the window height and centred, so the face stays mid-screen on a
   phone too; the layer itself is black, so no edge shows beside it. Made by worker/black-bg.mjs (BiRefNet). */
body.home::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:#000 url(/assets/home/judy-bg.jpg) center/auto 100% no-repeat;opacity:.22}   /* fainter than the app's .34: Mal found the picture too strong behind the long text, 2026-09-30 */
/* the big surfaces go part-transparent so the face reads through, as on the app pages */
body.home .step{background:rgba(18,21,29,.55)}
body.home .card{background:rgba(25,29,39,.6)}