/* ---------- Streamiva identity tokens (shared with 006-landing-page.html) ---------- */
:root{
  --ink:#10131a; --surface:#1a1e27; --surface-2:#222736;
  --amber:#e2a33e; --amber-2:#f0b85a; --wine:#6b2b3c; --wine-2:#8a3a4f;
  --text:#f2eee3; --soft:#d9d4c7; --slate:#8790a1; --line:rgba(242,238,227,.10);
  --ok:#5fcf8a; --err:#ff7a7a;
  --radius:18px; --radius-s:12px;
  --font:'Rubik',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Big Shoulders Display','Rubik',sans-serif;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--font); color:var(--text); background:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.nw{white-space:nowrap}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber-2); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
header.top{padding-block:1.1rem; position:relative; z-index:3}
header.top .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem}
.brand{display:flex; align-items:baseline; text-decoration:none}
.wordmark{font-family:var(--display); font-weight:800; font-size:1.55rem; letter-spacing:.06em; direction:ltr; unicode-bidi:isolate; color:var(--text)}
.wordmark span{color:var(--amber)}
.langs{display:inline-flex; gap:.25rem; background:rgba(26,30,39,.7); border:1px solid var(--line); border-radius:999px; padding:.2rem}
.langs button{background:transparent; border:0; color:var(--slate); font:inherit; font-size:.82rem; font-weight:500; padding:.3rem .7rem; border-radius:999px; cursor:pointer; direction:ltr}
.langs button[aria-pressed=true]{background:var(--surface-2); color:var(--text)}
.langs button:hover{color:var(--text)}
.langs button .short{display:none}
@media (max-width:520px){ .langs button .long{display:none} .langs button .short{display:inline} .langs button{padding:.3rem .6rem} }

/* ---------- hero: the poster wall, the promise, the form ---------- */
.cinema{position:relative; overflow:hidden; isolation:isolate}
.wall{position:absolute; inset:0; z-index:-2; pointer-events:none; background:var(--ink) url("../img/wall-v1.webp") center top/cover no-repeat}  /* one pre-rendered image, built by wayfinder/prototypes-sources-landing/006-v1-wall/build_wall.py; cached for a year, so a rebuilt wall gets a new name (wall-v2.webp) */
.cinema::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 62% 58% at 50% 42%, rgba(16,19,26,.78), rgba(16,19,26,.6) 55%, rgba(16,19,26,.82) 85%, var(--ink) 100%)}
.cinema::after{content:""; position:absolute; inset:auto 0 0; height:35%; z-index:-1; background:linear-gradient(180deg, transparent, var(--ink))}
.hero{padding-block:clamp(3.5rem,9vw,7rem) clamp(2.5rem,6vw,4.5rem); text-align:center}
.hero h1{font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.05; letter-spacing:-.02em; margin:0 auto 1.1rem; max-width:52rem; font-weight:800; text-shadow:0 10px 40px rgba(0,0,0,.6)}
.hero .lede{font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--soft); margin:0 auto 2.4rem; max-width:36rem; font-weight:300; text-shadow:0 1px 12px rgba(0,0,0,.8)}
.hero .card{max-width:34rem; margin-inline:auto; text-align:start}

/* ---------- signup card ---------- */
.card{background:linear-gradient(180deg, rgba(34,39,54,.92), rgba(26,30,39,.92)); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.25rem,3vw,1.9rem); box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.card h2{font-size:1.25rem; margin:0 0 .25rem; font-weight:700}
.card .sub{margin:0 0 1.1rem; color:var(--slate); font-size:.95rem}
label{display:block; font-size:.85rem; color:var(--slate); margin-block-end:.35rem; font-weight:500}
input[type=email]{width:100%; font:inherit; font-size:1.05rem; color:var(--text); background:var(--ink); border:1px solid rgba(242,238,227,.18); border-radius:var(--radius-s); padding:.9rem 1rem; outline:none; transition:border-color .15s, box-shadow .15s; direction:ltr; text-align:start}
input[type=email]::placeholder{color:#6b7484}
input[type=email]:focus{border-color:var(--amber); box-shadow:0 0 0 4px rgba(226,163,62,.18)}
.card[data-state=error] input[type=email]{border-color:var(--err)}
.btn{display:inline-flex; align-items:center; justify-content:center; width:100%; font:inherit; font-size:1.08rem; font-weight:700; color:var(--ink); background:var(--amber); border:0; border-radius:var(--radius-s); padding:1rem 1.4rem; cursor:pointer; box-shadow:0 10px 30px rgba(226,163,62,.28); transition:background .15s, box-shadow .15s; text-decoration:none}
.btn:hover{background:var(--amber-2); box-shadow:0 14px 36px rgba(226,163,62,.36)}
.btn[disabled]{opacity:.65; cursor:progress}
form .btn{margin-block-start:.9rem} /* requested: breathing room above the amber button */
.row-inline{display:grid; gap:.75rem}
@media (min-width:600px){ .row-inline{grid-template-columns:1fr auto; align-items:end} .row-inline .btn{width:auto; margin-block-start:0; padding-inline:1.8rem} .row-inline .field{min-width:0} }
.fine{font-size:.8rem; color:var(--slate); margin:.8rem 0 0}
.fine a{color:var(--soft)}
.err{display:none; color:var(--err); font-size:.88rem; margin:0 0 .6rem}
.card[data-state=error] .err{display:block}
.card[data-state=busy] .err{display:none}
.card[data-state=sent] form,.card[data-state=sent] > .fine,.card[data-state=sent] .err{display:none}
.sent{display:none}
.card[data-state=sent] .sent{display:block; animation:arrive .35s ease-out}
@keyframes arrive{from{opacity:0; transform:translateY(6px)}}
.sent h2{display:flex; align-items:center; gap:.5rem}
.sent h2::before{content:"✉"; color:var(--amber)}
.sent .addr{font-weight:600; direction:ltr; unicode-bidi:isolate; color:var(--amber-2)}
.sent .actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-block-start:1rem}
.sent .actions button{font:inherit; font-size:.9rem; background:transparent; color:var(--text); border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem; cursor:pointer}
.sent .actions button:hover{border-color:rgba(242,238,227,.3)}
.hp{position:absolute; inset-inline-start:-10000px; width:1px; height:1px; overflow:hidden}  /* honeypot, never seen by people */

/* ---------- how it works: a real sequence, so it is numbered ---------- */
.steps{border-block:1px solid var(--line); background:rgba(26,30,39,.6)}
.steps ol{list-style:none; margin:0; padding:2.25rem 0; display:grid; gap:1.75rem}
.steps li{display:flex; gap:1rem; align-items:flex-start}
.steps .n{font-family:var(--display); font-weight:800; font-size:2.8rem; line-height:.9; color:var(--amber); min-width:1.6rem}
.steps h3{margin:0 0 .25rem; font-size:1.08rem}
.steps p{margin:0; color:var(--slate); font-size:.95rem; max-width:22rem}
@media (min-width:860px){ .steps ol{grid-template-columns:repeat(3,1fr); gap:2.5rem} }

/* ---------- shared section type ---------- */
section.block{padding-block:clamp(3.5rem,8vw,6rem)}
h2.sec{font-size:clamp(1.6rem,3.2vw,2.3rem); line-height:1.15; margin:0 0 .75rem; font-weight:700; letter-spacing:-.01em}
.sec-lede{color:var(--soft); font-weight:300; font-size:1.08rem; max-width:34rem; margin:0}
.split{display:grid; gap:2.5rem; align-items:center}
@media (min-width:900px){ .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:4rem} }

/* ---------- household: the profile picker, every profile ready ---------- */
.screen{margin:0; padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,3vw,2rem) clamp(1.75rem,4vw,2.75rem); border-radius:22px; background:radial-gradient(ellipse 80% 90% at 50% 0%, #1d2230, #12151d 75%); border:1px solid var(--line); box-shadow:0 0 0 6px #0b0d12, 0 0 0 7px rgba(242,238,227,.06), 0 40px 80px rgba(0,0,0,.5)}
.screen figcaption{text-align:center; font-size:clamp(1.1rem,2.4vw,1.45rem); font-weight:500; margin:0 0 clamp(1.25rem,3vw,2rem)}
.who{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(.5rem,2vw,1.25rem); text-align:center}
.who li{display:flex; flex-direction:column; align-items:center; gap:.35rem; min-width:0}
.face{position:relative; display:grid; place-items:center; flex:none; width:min(100%,5.25rem); aspect-ratio:1 / 1; border-radius:50%; color:var(--ink)}
.face svg{width:70%; height:auto; aspect-ratio:1 / 1; fill:currentColor}
.c1 .face{background:var(--amber)}
.c2 .face{background:var(--wine-2); color:#2a1218}
.c3 .face{background:#4d7fa3; color:#0f1d29}
.c4 .face{background:#b58c6a; color:#2b1d12}
.add .face{border:2px dashed rgba(242,238,227,.25); color:var(--slate); font-size:clamp(1.4rem,4vw,2rem); font-weight:300}
.face .ok{position:absolute; inset-block-end:-2px; inset-inline-end:-2px; width:34%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--ok); color:var(--ink); font-size:clamp(.55rem,1.4vw,.8rem); font-weight:800; box-shadow:0 0 0 3px #161a24}
.who .name{font-size:clamp(.78rem,1.8vw,.95rem); font-weight:500; line-height:1.2; max-width:100%}
.who .ready{font-size:clamp(.66rem,1.5vw,.78rem); color:var(--ok)}
.add .ready{color:var(--slate)}

/* ---------- pricing: one plan today; monthly and annual join the grid later ---------- */
.pricing h2.sec{max-width:34rem}
.pricing .sec-lede{margin-block-end:2.25rem}
.plans{display:grid; gap:1.25rem}
@media (min-width:760px){ .plans{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); max-width:52rem} }
.plan{border-radius:var(--radius); padding:clamp(1.4rem,3vw,2rem); background:var(--surface); border:1px solid rgba(226,163,62,.35); box-shadow:inset 0 3px 0 var(--amber); display:flex; flex-direction:column}
.plan h3{margin:0; font-size:1.1rem; font-weight:600; color:var(--amber-2)}
.price{margin:.35rem 0 1.25rem; display:flex; align-items:baseline; gap:.5rem}
.price .amount{font-size:clamp(2.8rem,6vw,3.6rem); font-weight:800; line-height:1; letter-spacing:-.02em}
.price .per{color:var(--slate)}
.incl{list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.55rem}
.incl li{display:flex; gap:.6rem; align-items:baseline}
.incl li::before{content:"✓"; color:var(--ok); font-weight:700; flex:none}
.plan .btn{margin-block-start:auto}
.plan .fine{text-align:center}
.plan.later{background:transparent; border:1px dashed rgba(242,238,227,.2); box-shadow:none; justify-content:flex-start}
.plan.later h3{color:var(--text)}
.plan.later .when{margin:.35rem 0 1rem; font-size:clamp(1.6rem,3.5vw,2.1rem); font-weight:700; color:var(--slate)}
.plan.later p:last-child{margin:0; color:var(--soft); font-weight:300}

/* ---------- questions ---------- */
.narrow{max-width:46rem}
.faq h2.sec{margin-block-end:1.25rem}
.faq details{border-block-end:1px solid var(--line); padding:1rem 0}
.faq summary{cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--amber); font-weight:400; font-size:1.2rem; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.6rem 0 0; color:var(--soft); font-weight:300; max-width:40rem}

/* ---------- closing form ---------- */
.final{position:relative; padding-block:clamp(3.5rem,8vw,6rem); background:radial-gradient(ellipse 60% 70% at 50% 100%, rgba(107,43,60,.45), transparent 70%)}
.final .inner{max-width:34rem; margin-inline:auto; text-align:center}
.final h2{font-size:clamp(1.7rem,4vw,2.4rem); margin:0 0 .5rem}
.final .lede{color:var(--soft); font-weight:300; margin:0 0 1.75rem}
.final .card{text-align:start}

/* ---------- footer ---------- */
footer.foot{border-block-start:1px solid var(--line); padding-block:1.5rem 2.5rem; color:var(--slate); font-size:.85rem}
footer.foot .wrap{display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between; align-items:center}
footer.foot .legal{display:flex; flex-direction:column; gap:.35rem}
footer.foot .tmdb{font-size:.74rem; line-height:1.45; max-width:40rem}  /* TMDB credit: quiet, still readable */
footer.foot nav{display:flex; gap:1.2rem}
footer.foot a{color:var(--slate); text-decoration:none}
footer.foot a:hover{color:var(--text)}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important} html{scroll-behavior:auto}}