:root{
  --bg:#000;
  --fg:#f4f5f7;
  --muted:rgba(244,245,247,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --pad:clamp(20px,3.6vw,52px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--bg);color:var(--fg);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:500;letter-spacing:-.012em;overflow-x:hidden;min-height:100svh;
}
::selection{background:rgba(130,170,255,.28)}
a{color:inherit;text-decoration:none}

/* hide native cursor only where we draw our own */
@media (hover:hover) and (pointer:fine){
  html.has-dot,html.has-dot *{cursor:none!important}
}

/* ---------- VIDEO BACKGROUND ---------- */
.bg-stage{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(60% 60% at 50% 48%,#0a1018 0%,#05060d 55%,#000 100%)}
.bg-video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;
  width:auto;height:auto;transform:translate(-50%,-50%) scale(1.04);
  object-fit:cover;will-change:transform}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 95% at 50% 50%,transparent 38%,rgba(0,0,0,.34) 80%,rgba(0,0,0,.6) 100%),
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 20%,transparent 74%,rgba(0,0,0,.72) 100%);}
/* manifesto: video heavily dimmed + blurred so reading text stays legible */
.page-manifesto .bg-video{filter:brightness(.34) saturate(.85) blur(5px);
  transform:translate(-50%,-50%) scale(1.12)}
.page-manifesto .scrim{background:
  radial-gradient(120% 95% at 50% 45%,rgba(0,0,0,.4) 30%,rgba(0,0,0,.66) 75%,rgba(0,0,0,.8) 100%),
  linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.7) 100%)}

/* ---------- HEADER ---------- */
.header{position:fixed;top:0;left:0;right:0;height:74px;z-index:30}
.header .inner{position:relative;height:100%;width:100%}
.logo{position:absolute;top:50%;left:var(--pad);height:21px;width:auto;
  transform:translateY(-50%);transform-origin:left center}
.header.centered .logo{left:50%;transform:translate(-50%,-50%)}
.nav-link{position:absolute;top:50%;right:var(--pad);transform:translateY(-50%);
  font-size:14px;font-weight:500;color:var(--fg);letter-spacing:-.01em;
  transition:opacity .35s var(--ease),color .3s var(--ease)}
.nav-link:hover{color:#fff}
.back-btn{position:absolute;top:50%;left:var(--pad);transform:translateY(-50%);
  display:flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);
  font-weight:500;transition:color .3s var(--ease)}
.back-btn:hover{color:#fff}
.back-btn svg{width:16px;height:16px;display:block}

/* ---------- HERO ---------- */
.hero{position:relative;z-index:2;height:100svh;min-height:600px;
  display:flex;flex-direction:column;justify-content:flex-end}
.hero-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding:0 var(--pad) clamp(28px,4.6vh,50px);flex-wrap:wrap}
.headline{font-size:clamp(28px,4.2vw,54px);font-weight:500;line-height:1.06;
  letter-spacing:-.03em;color:#fff;display:flex;flex-direction:column;align-items:flex-start}
.headline .hl-line{display:block;white-space:nowrap;
  background:linear-gradient(180deg,#ffffff 0%,#D8D9DD 50%,#7E8189 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-bottom:.04em}
.headline .hl-line:last-child{min-height:1.06em}

/* waitlist pill */
.waitlist{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-radius:999px;padding:6px 6px 6px 18px;
  box-shadow:0 10px 40px -16px rgba(0,0,0,.7);
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.waitlist:focus-within{border-color:rgba(140,190,255,.45);background:rgba(255,255,255,.075)}
.waitlist input{background:none;border:0;outline:none;color:#fff;font-family:inherit;
  font-weight:500;font-size:14px;letter-spacing:-.01em;width:clamp(150px,18vw,200px)}
.waitlist input::placeholder{color:rgba(255,255,255,.42)}
.btn{appearance:none;border:0;font-family:inherit;font-weight:500;font-size:14px;
  background:#fff;color:#0a0a0a;border-radius:999px;padding:9px 18px;letter-spacing:-.01em;
  white-space:nowrap;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 26px -10px rgba(255,255,255,.5)}
.btn:active{transform:translateY(0) scale(.97)}
.field-row{display:flex;align-items:center;gap:8px}
.waitlist .done-msg{display:none;color:#fff;font-size:14px;font-weight:500;white-space:nowrap;
  align-items:center;gap:8px}
.waitlist .done-msg svg{width:15px;height:15px}
.waitlist.done{padding:9px 20px}
.waitlist.done .field-row{display:none}
.waitlist.done .done-msg{display:flex}

/* hero entrance */
.reveal-up{opacity:0;transform:translateY(22px);filter:blur(6px)}
.loaded .reveal-up{opacity:1;transform:none;filter:none;
  transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease)}
.loaded .d1{transition-delay:.12s}.loaded .d2{transition-delay:.26s}

/* ---------- MANIFESTO PAGE ---------- */
/* centered hook headline you see on landing */
.m-hook{position:relative;z-index:2;min-height:92svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:24px;text-align:center;padding:80px var(--pad) 0}
.m-hook-title{font-size:clamp(34px,6vw,68px);font-weight:500;line-height:1.04;letter-spacing:-.035em;
  max-width:16ch;background:linear-gradient(180deg,#ffffff 0%,#D8D9DD 52%,#8A8D94 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-bottom:.06em}
.m-scroll-cue{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:8px;
  animation:cueBob 2.4s var(--ease-io) infinite}
.m-scroll-cue svg{width:18px;height:18px}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

.manifesto-wrap{position:relative;z-index:2;max-width:720px;margin:4svh auto 0;
  padding:0 var(--pad);text-align:center}
.m-line{font-size:clamp(22px,2.5vw,32px);font-weight:500;line-height:1.52;
  letter-spacing:-.018em;margin:0 0 2.6em}
.m-line:last-of-type{margin-bottom:0}
/* Framer-style reveal segments: white text dimmed to 0.2, lit to 1 on scroll */
.rseg{opacity:.2;color:#f4f5f7;will-change:opacity}
.m-eyebrow{position:relative;z-index:2;text-align:center;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.m-closing{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;padding:8svh var(--pad);text-align:center}
.m-closing .lead{font-size:clamp(24px,3vw,40px);font-weight:500;line-height:1.12;
  letter-spacing:-.03em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.8)}
.m-closing .lead .dim{display:block;color:rgba(244,245,247,.72)}

/* edge fades so manifesto text dissolves under the header / page edges */
.edge-fade{position:fixed;left:0;right:0;z-index:20;pointer-events:none}
.edge-fade.top{top:0;height:160px;background:linear-gradient(180deg,#000 0%,#000 36%,transparent 100%)}
.edge-fade.bot{bottom:0;height:150px;background:linear-gradient(0deg,#000 0%,transparent 100%)}

/* ---------- DOT CURSOR ---------- */
.cur-dot{position:fixed;top:0;left:0;z-index:99999;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:#fff;pointer-events:none;mix-blend-mode:difference;
  will-change:transform;transition:width .25s var(--ease),height .25s var(--ease),
  margin .25s var(--ease),opacity .25s var(--ease)}
body.cursor-hover .cur-dot{width:46px;height:46px;margin:-23px 0 0 -23px;opacity:.32}
@media (hover:none),(pointer:coarse){.cur-dot{display:none}}

/* ---------- PAGE TRANSITION CURTAIN ---------- */
/* fades out via pure CSS so the page reveals even if JS fails to load */
.curtain{position:fixed;inset:0;z-index:99990;background:#000;pointer-events:none;
  opacity:1;animation:curtainOut .6s var(--ease) .04s forwards}
@keyframes curtainOut{to{opacity:0}}
.curtain.cover{animation:none;opacity:1;transition:opacity .42s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .reveal-up{opacity:1!important;filter:none!important;transform:none!important}
  .w{color:#f4f5f7}
  .cur-dot{display:none}
  .curtain{display:none}
  .grain{display:none}
  .m-scroll-cue,.tf-check,.tf-ig-arrow .a1,.tf-ig-arrow .a2{animation:none!important}
}
@media (max-width:680px){
  .hero-inner{flex-direction:column;align-items:flex-start;gap:22px}
  .waitlist{width:100%}.waitlist input{flex:1;width:auto}
  .nav-link,.back-btn{font-size:13px}
}

/* ============================================================
   ADD-ONS: grain, typewriter, countdown, sound, shake, typeform
   ============================================================ */

/* ---- 35mm film grain overlay (on everything) ---- */
.grain{position:fixed;inset:-60%;z-index:9500;pointer-events:none;opacity:.10;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px;animation:grain .42s steps(3) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}33%{transform:translate(-6%,4%)}66%{transform:translate(5%,-5%)}100%{transform:translate(-3%,2%)}}

/* ---- typewriter cycling headline word (blue dashboard gradient) ---- */
.tw{font-variant-ligatures:none;
  background:linear-gradient(100deg,#93c5fd 0%,#60a5fa 55%,#60a5fa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tw-caret{display:inline-block;width:.06em;min-width:2px;height:.92em;background:#7eb0fb;
  margin-left:.05em;vertical-align:-.08em;border-radius:1px;animation:caret 1.05s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ---- countdown decal (manifesto, left of text) ---- */
.countdown{position:fixed;left:clamp(12px,2.4vw,32px);top:50%;transform:translateY(-50%) rotate(-1.5deg);
  z-index:25;display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  padding:15px 16px 14px;border-radius:15px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(20,22,30,.55),rgba(10,11,16,.5));
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.85);max-width:160px}
.countdown .cd-top{display:flex;align-items:center;gap:7px}
.countdown .cd-dot{width:6px;height:6px;border-radius:50%;background:#5fd07a;box-shadow:0 0 8px #5fd07a;
  animation:cdpulse 1.8s ease-in-out infinite}
@keyframes cdpulse{0%,100%{opacity:1}50%{opacity:.35}}
.countdown .cd-label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.countdown .cd-date{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff}
.countdown .cd-time{display:flex;gap:9px;font-variant-numeric:tabular-nums}
.cd-unit{display:flex;flex-direction:column;align-items:center;gap:2px}
.cd-unit b{font-size:18px;font-weight:600;line-height:1;color:#fff;letter-spacing:-.02em}
.cd-unit small{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (max-width:1080px){
  .countdown{top:calc(70px + env(safe-area-inset-top));bottom:auto;left:50%;
    transform:translateX(-50%) rotate(0);flex-direction:row;align-items:center;gap:14px;max-width:none;
    padding:9px 14px}
  .countdown .cd-left{display:flex;flex-direction:column;gap:2px}
  .countdown .cd-date{font-size:13px}
  .cd-unit b{font-size:16px}
}
@media (max-width:380px){.countdown .cd-label{display:none}.countdown{gap:10px}}

/* ---- sound toggle ---- */
.snd-toggle{position:fixed;left:var(--pad);bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--muted);
  cursor:pointer;transition:color .25s,background .25s,transform .25s}
.snd-toggle:hover{color:#fff;background:rgba(255,255,255,.1);transform:translateY(-1px)}
.snd-toggle svg{width:15px;height:15px}
@media (max-width:680px){.snd-toggle{display:none}}

/* ---- shake error state (Transitions.dev) ---- */
:root{--shake-distance:6px;--shake-overshoot:4px;--shake-dur-a:80ms;--shake-dur-b:60ms;
  --shake-ease:cubic-bezier(0.22,1,0.36,1);--revert-hold:3000ms;--revert-dur:280ms}
.t-input-wrap{position:relative}
.t-input{transition:border-color 150ms ease-out;will-change:transform}
.t-input.is-error{transition:border-color var(--revert-dur) ease-out;border-color:rgba(255,99,99,.7)!important}
/* inline error text — collapsed until a message is set (e.g. duplicate email);
   invalid-format errors use the shake alone with no text */
.t-error-msg{margin:0;font-size:13px;color:#ff7676;letter-spacing:-.005em;line-height:1.3;
  max-height:0;opacity:0;overflow:hidden;
  transition:opacity .28s var(--ease),max-height .28s var(--ease),margin .28s var(--ease)}
.t-error-msg.show{max-height:2.6em;opacity:1;margin:12px 0 0 6px}
.t-input.is-shaking{animation:t-input-shake calc(var(--shake-dur-a)*2 + var(--shake-dur-b)*2) linear}
@keyframes t-input-shake{
  0%{transform:translateX(0);animation-timing-function:var(--shake-ease)}
  28.57%{transform:translateX(var(--shake-distance));animation-timing-function:var(--shake-ease)}
  57.14%{transform:translateX(calc(var(--shake-distance)*-1));animation-timing-function:var(--shake-ease)}
  78.57%{transform:translateX(var(--shake-overshoot));animation-timing-function:var(--shake-ease)}
  100%{transform:translateX(0)}}
.waitlist.checking .btn{opacity:.6;pointer-events:none}
@media (prefers-reduced-motion:reduce){.t-input{animation:none!important;transform:none!important}}

/* ---- typeform overlay ---- */
.tf{position:fixed;inset:0;z-index:9000;background:rgba(4,5,11,.9);
  backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
.tf.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
body.tf-open{overflow:hidden}
.tf-bar{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.08);z-index:2}
.tf-bar i{display:block;height:100%;width:0;background:#fff;transition:width .55s var(--ease)}
.tf-close{position:absolute;top:calc(18px + env(safe-area-inset-top));right:var(--pad);z-index:3;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--muted);cursor:pointer;
  transition:color .25s,background .25s}
.tf-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.tf-close svg{width:18px;height:18px}
.tf-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.tf-step{position:absolute;width:min(560px,92vw);text-align:left;opacity:0;transform:translateY(42px);
  pointer-events:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.tf-step.active{opacity:1;transform:none;pointer-events:auto}
.tf-step.above{opacity:0;transform:translateY(-42px)}
.tf-step.below{opacity:0;transform:translateY(42px)}
.tf-step-num{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tf-q{font-size:clamp(26px,4vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.08;margin:10px 0 8px;color:#fff}
.tf-q.big{font-size:clamp(44px,8vw,76px)}
.tf-sub{color:var(--muted);font-size:15px;line-height:1.45;margin-bottom:28px}
.tf-sub b{color:#fff;font-weight:500}
.tf-field{display:flex;align-items:center;gap:6px;border-bottom:2px solid rgba(255,255,255,.22);padding:10px 2px;
  transition:border-color .3s var(--ease)}
.tf-field:focus-within{border-color:#fff}
.tf-field.nudge{animation:t-input-shake 280ms linear}
.tf-at{color:var(--muted);font-size:clamp(20px,3vw,26px)}
.tf-input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font-family:inherit;
  font-weight:500;font-size:clamp(20px,3vw,26px);letter-spacing:-.01em}
.tf-input::placeholder{color:rgba(255,255,255,.28)}
.tf-row{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.tf-hint{font-size:13px;color:var(--muted)}.tf-hint b{color:#fff;font-weight:500}
.tf-skip{background:none;border:0;color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer}
.tf-skip:hover{color:#fff}
.tf-opts{display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow:auto;margin-top:4px;
  -webkit-overflow-scrolling:touch;padding-right:4px}
.tf-opt{text-align:left;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;
  font-family:inherit;font-weight:500;font-size:16px;padding:14px 16px;border-radius:12px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s}
.tf-opt:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25)}
.tf-opt.sel{background:#fff;color:#0a0a0a;border-color:#fff}
.tf-done{text-align:center}
.tf-check{width:62px;height:62px;border-radius:50%;background:#fff;color:#0a0a0a;display:flex;
  align-items:center;justify-content:center;margin:0 auto 22px;animation:pop .5s var(--ease)}
.tf-check svg{width:30px;height:30px}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.btn.tf-next,.btn.tf-finish{padding:11px 26px}

/* ---- mobile / iPhone polish ---- */
.header{padding-top:env(safe-area-inset-top)}
.hero-inner{padding-bottom:calc(clamp(28px,4.6vh,50px) + env(safe-area-inset-bottom))}
@media (max-width:680px){
  .header{height:62px}
  .hero{min-height:auto}   /* exactly 100svh on phones — no 600px floor causing scroll */
  .hero-inner{gap:18px}
  /* fit the longest flip-word ("Production Companies") on one line — no wrap */
  .headline{font-size:clamp(21px,6.2vw,36px);line-height:1.1}
  .header-right{gap:12px}
  .waitlist{width:100%;padding:6px 6px 6px 16px}
  .waitlist input{font-size:16px;width:auto;flex:1}   /* 16px stops iOS zoom-on-focus */
  .btn{padding:10px 16px;font-size:15px}
  .t-input-wrap{width:100%}
  .nav-link,.back-btn{font-size:13px}
  .m-line{font-size:clamp(20px,5.6vw,26px);margin-bottom:2.2em}
  .manifesto-wrap{margin-top:3svh}
  .tf-q{font-size:clamp(24px,7.4vw,34px)}
  .tf-stage{align-items:flex-start;padding-top:16svh;padding-bottom:calc(28svh + env(safe-area-inset-bottom))}
  .tf-opts{max-height:48svh}
}

/* ============ revisions: header countdown, [ENTER] fields, IG done ============ */
.header-right{position:absolute;top:50%;right:var(--pad);transform:translateY(-50%);
  display:flex;align-items:center;gap:18px}
.header-right .nav-link{position:static;transform:none;top:auto;right:auto}
.cd-mini{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
.cd-mini .cd-dot{width:6px;height:6px;border-radius:50%;background:#5fd07a;box-shadow:0 0 8px #5fd07a;
  animation:cdpulse 1.8s ease-in-out infinite}
.cd-mini-text{font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.cd-mini-text b{color:#fff;font-weight:600}
@media (max-width:680px){
  .header-right{gap:10px}
  .cd-mini{font-size:10px;padding:4px 9px;gap:6px}
  .cd-mini .cd-sec{display:none}        /* drop seconds on mobile to fit */
  .header-right .nav-link{font-size:12px}
}
@media (max-width:420px){
  .cd-mini{display:none}                /* logo + Manifesto + Log in only on small phones */
}

/* waitlist button hugs the right edge on mobile */
@media (max-width:680px){
  .waitlist .field-row{flex:1;width:100%;display:flex;align-items:center}
  .waitlist input{flex:1;min-width:0;width:auto}
}

/* minimal big input with [ENTER] divider (Rauno-style), dark theme */
.tf-field{display:flex;align-items:stretch;gap:10px;border-bottom:1px solid rgba(255,255,255,.22);
  padding:0;transition:border-color .3s var(--ease)}
.tf-field:focus-within{border-color:rgba(255,255,255,.7)}
.tf-input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font-family:inherit;
  font-weight:400;font-size:clamp(23px,3.6vw,38px);letter-spacing:-.02em;padding:14px 2px;line-height:1.15}
.tf-input::placeholder{color:rgba(255,255,255,.26)}
.tf-at{display:flex;align-items:center;color:rgba(255,255,255,.45);font-weight:400;
  font-size:clamp(23px,3.6vw,38px)}
.tf-enter{display:flex;align-items:center;padding:0 6px 0 22px;border-left:1px solid rgba(255,255,255,.16);
  background:none;cursor:pointer;color:rgba(255,255,255,.4);font-family:inherit;font-size:12px;
  letter-spacing:.14em;transition:color .25s var(--ease);white-space:nowrap}
.tf-enter:hover{color:#fff}
.tf-belowrow{display:flex;align-items:center;gap:18px;margin-top:20px}
.tf-hint{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.tf-hint b{color:#fff;font-weight:500}
.tf-skip{background:none;border:0;color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer}
.tf-skip:hover{color:#fff}

/* typeform done: logo, "You're on the waitlist", Follow us on IG */
.tf-done{text-align:center;display:flex;flex-direction:column;align-items:center}
.tf-done-home{display:inline-block;margin-bottom:32px;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.tf-done-home:hover{opacity:.7;transform:translateY(-1px)}
.tf-done-logo{height:26px;width:auto;opacity:.96;display:block}
.tf-done .tf-q{margin:0 0 32px}
.tf-ig-btn{display:inline-flex;align-items:center;gap:14px;background:#fff;color:#0a0a0a;
  border-radius:999px;padding:7px 7px 7px 24px;font-weight:500;font-size:16px;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tf-ig-btn:hover{transform:translateY(-1px);box-shadow:0 12px 34px -12px rgba(255,255,255,.5)}
.tf-ig-arrow{width:34px;height:34px;border-radius:50%;background:#0a0a0a;color:#fff;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.tf-ig-arrow svg{width:16px;height:16px}
@media (max-width:680px){.tf-enter{padding-left:14px;font-size:11px}}

/* social proof under the waitlist field */
.social-proof{display:flex;align-items:center;gap:11px;margin-top:15px;padding-left:4px}
.avatars{display:flex}
.avatars img{width:27px;height:27px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(10,11,15,.92);margin-left:-9px;
  background:linear-gradient(135deg,#34405c,#5e4a72);box-shadow:0 2px 8px rgba(0,0,0,.45)}
.avatars img:first-child{margin-left:0}
.social-proof span{font-size:13px;color:var(--muted);white-space:nowrap}
.social-proof b{color:#fff;font-weight:600}
@media (max-width:680px){.social-proof{margin-top:12px}.social-proof span{font-size:12.5px}}

/* ============ typeform refinements ============ */
/* [ENTER]: no box, no divider — just the text */
.tf-enter{border:0;padding-left:14px}

/* done heading gradient (silver) */
.tf-q.big.grad{background:linear-gradient(180deg,#ffffff 0%,#D8D9DD 50%,#8A8D94 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-bottom:.06em}

/* Follow-us-on-IG: arrow loops on hover (transitions-dev style) */
.tf-ig-arrow{position:relative;overflow:hidden}
.tf-ig-arrow .a1,.tf-ig-arrow .a2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:transform .42s var(--ease)}
.tf-ig-arrow .a2{transform:translateX(-150%)}
.tf-ig-btn:hover .tf-ig-arrow .a1{transform:translateX(150%)}
.tf-ig-btn:hover .tf-ig-arrow .a2{transform:translateX(0)}

/* roles: multi-select, scrollable, continue button */
.tf-opts{max-height:50vh}
.tf-opts::-webkit-scrollbar{width:6px}
.tf-opts::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.tf-opts::-webkit-scrollbar-track{background:transparent}
.tf-opts.nudge{animation:t-input-shake 300ms linear}
.tf-multi-go{margin-top:20px}
.btn.tf-continue{padding:11px 28px}

/* ============ mobile: centered social proof + stronger bottom scrim ============ */
@media (max-width:680px){
  .social-proof{justify-content:center;padding-left:0;margin-top:16px}
  .page-hero .scrim{background:
    radial-gradient(120% 95% at 50% 50%,transparent 36%,rgba(0,0,0,.32) 78%,rgba(0,0,0,.5) 100%),
    linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 20%,transparent 46%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.92) 100%)}
  .tf-opts{max-height:40svh}
}

/* subtle frosted black haze at the bottom so hero text reads clearly */
.bottom-haze{position:fixed;left:0;right:0;bottom:0;height:36vh;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.60) 0%,rgba(0,0,0,.26) 42%,transparent 100%);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 28%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,#000 28%,transparent 100%)}

/* ============ login page (typeform-style password gate) ============ */
.page-login .bg-video{filter:brightness(.42) saturate(.9) blur(3px);
  transform:translate(-50%,-50%) scale(1.1)}
.page-login .scrim{background:
  radial-gradient(120% 95% at 50% 50%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.62) 78%,rgba(0,0,0,.78) 100%),
  linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.6) 100%)}
.login-stage{position:fixed;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:0 var(--pad)}
.login-card{width:min(520px,92vw);text-align:center}
.login-field{margin-top:0}
.login-field.ok{border-color:rgba(120,220,150,.75)!important}
.login-field.locked{opacity:.45}
.login-lock{font-size:13px;color:#ff7b7b;text-align:center;margin-top:22px;min-height:16px;
  opacity:0;transition:opacity .3s var(--ease)}
.login-lock.show{opacity:1}
@media (max-width:680px){
  .login-stage{align-items:flex-start;padding-top:30svh}
}

/* ============ protected landing page (post-login, members) ============ */
.page-landing .bg-video{filter:brightness(.5) saturate(.95) blur(2px);
  transform:translate(-50%,-50%) scale(1.08)}
.page-landing .scrim{background:
  radial-gradient(120% 95% at 50% 46%,transparent 30%,rgba(0,0,0,.4) 78%,rgba(0,0,0,.66) 100%),
  linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 24%,transparent 60%,rgba(0,0,0,.78) 100%)}

/* header "Log in →" pill */
.land-login{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
  color:#0a0a0a;background:#fff;border-radius:999px;padding:8px 16px;letter-spacing:-.01em;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.land-login:hover{transform:translateY(-1px);box-shadow:0 10px 30px -12px rgba(255,255,255,.55)}
.land-login svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.land-login:hover svg{transform:translateX(3px)}

/* centered hero */
.land{position:relative;z-index:2;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:90px var(--pad) calc(40px + env(safe-area-inset-bottom))}
.land-inner{display:flex;flex-direction:column;align-items:center;max-width:880px}
.land-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.land-title{font-size:clamp(30px,5vw,62px);font-weight:500;line-height:1.05;letter-spacing:-.032em;
  display:flex;flex-direction:column;align-items:center;color:#fff}
.land-title .hl-line{white-space:nowrap}
.tw-static{font-variant-ligatures:none;
  background:linear-gradient(100deg,#93c5fd 0%,#60a5fa 55%,#60a5fa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.land-sub{margin-top:24px;max-width:54ch;font-size:clamp(15px,1.5vw,18px);line-height:1.55;
  color:rgba(244,245,247,.72);font-weight:400;letter-spacing:-.01em}

/* members "choose a view" cards — View landing page / View the app */
.land-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  width:min(720px,100%);margin-top:42px;text-align:left}
.land-choice{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:22px 22px 24px;border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 18px 50px -28px rgba(0,0,0,.85);
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.land-choice:hover{transform:translateY(-3px);border-color:rgba(140,190,255,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.04));
  box-shadow:0 26px 60px -28px rgba(0,0,0,.9)}
.land-choice-top{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:8px}
.land-choice-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.land-choice-arrow{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.land-choice-arrow svg{width:15px;height:15px}
.land-choice:hover .land-choice-arrow{background:#fff;color:#0a0a0a;transform:translateX(2px) translateY(-2px)}
.land-choice--app:hover .land-choice-arrow{transform:translateX(3px) translateY(0)}
.land-choice-title{font-size:clamp(19px,2.1vw,24px);font-weight:500;letter-spacing:-.02em;color:#fff}
.land-choice-desc{font-size:14px;line-height:1.45;color:rgba(244,245,247,.62);font-weight:400}
.land .land-ghost{margin-top:26px}

/* members hub — two big "Enter" options (minimal password/typeform style) */
.land-enter-list{display:flex;flex-direction:column;width:min(560px,100%);margin-top:40px;
  border-top:1px solid rgba(255,255,255,.12)}
.land-enter{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 4px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left;
  transition:padding-left .4s var(--ease)}
.land-enter:hover{padding-left:12px}
.land-enter-label{font-size:clamp(26px,4.4vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.04;
  background:linear-gradient(180deg,#ffffff 0%,#D8D9DD 55%,#9498A1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.04em}
.land-enter-arrow{position:relative;width:46px;height:46px;flex-shrink:0;border-radius:50%;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.land-enter:hover .land-enter-arrow{background:#fff;border-color:#fff;color:#0a0a0a}
.land-enter-arrow .a1,.land-enter-arrow .a2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:transform .42s var(--ease)}
.land-enter-arrow .a1 svg,.land-enter-arrow .a2 svg{width:18px;height:18px}
.land-enter-arrow .a2{transform:translateX(-150%)}
.land-enter:hover .land-enter-arrow .a1{transform:translateX(150%)}
.land-enter:hover .land-enter-arrow .a2{transform:translateX(0)}

.land-cta-row{display:flex;align-items:center;gap:24px;margin-top:38px;flex-wrap:wrap;justify-content:center}
.btn.lg{display:inline-flex;align-items:center;gap:12px;font-size:16px;padding:13px 14px 13px 26px}
.btn-arrow{width:30px;height:30px;border-radius:50%;background:#0a0a0a;color:#fff;display:flex;
  align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;position:relative}
.btn-arrow svg{width:15px;height:15px;transition:transform .42s var(--ease)}
.btn.lg:hover .btn-arrow svg{transform:translateX(2px)}
.land-ghost{font-size:14.5px;color:var(--muted);font-weight:500;border-bottom:1px solid transparent;
  padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.land-ghost:hover{color:#fff;border-color:rgba(255,255,255,.4)}

.land-pillars{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:54px;color:var(--muted);font-size:13px;letter-spacing:.01em}
.land-pillars span{white-space:nowrap}
.land-pillars i{display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}

@media (max-width:680px){
  .land-login{font-size:12.5px;padding:7px 13px;gap:6px}
  .land-title{font-size:clamp(26px,7.4vw,40px)}
  .land-sub{margin-top:18px;font-size:15px}
  .land-cta-row{gap:18px;margin-top:30px}
  .land-pillars{margin-top:38px;gap:10px;font-size:12px}
  .land-choices{grid-template-columns:1fr;margin-top:28px;gap:12px}
  .land-choice{padding:18px 18px 20px}
  .land-enter-list{margin-top:30px}
  .land-enter{padding:20px 2px}
  .land-enter-label{font-size:clamp(24px,7vw,34px)}
  .land-enter-arrow{width:40px;height:40px}
}
@media (max-width:420px){
  .header-right .nav-link{display:none}   /* keep just logo + Log in on small phones */
}