/* ============================================================
   PEP Phone — Pre-Launch Site
   Design system + globals (ported from PEP Phone.dc.html)
   Framework-free. Everything component-level is inline-styled
   in app.js to stay faithful to the source design.
   ============================================================ */
:root{
  /* LIGHT is the default face of the brand (Nonso §11). Dark is the toggle. */
  color-scheme:light;
  --void:#f4f1ea; --panel:#ffffff; --panel-2:#efeae0;
  --ink:#15211f; --slate-2:#4b5a57; --slate-1:#7b8a86;
  --mint:#19c4ad; --teal:#01b2aa; --sun:#f2b600; --alert:#d64545;
  /* accent-as-text (readable on the current surface) vs accent-as-fill (bright brand) */
  --mint-ink:#067567; --sun-ink:#9a6600; --on-accent:#06201c;
  --line:rgba(20,32,30,.12); --mint-top:rgba(1,122,116,.22);
  --glass:rgba(255,255,255,.72); --nav-bg:rgba(244,241,234,.82);
  --chip-bg:rgba(255,255,255,.95); --backdrop:rgba(20,24,22,.42);
  --disp:'Clash Display','Figtree',sans-serif; --body:'Figtree',sans-serif; --mono:'Figtree',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --void:#060d0f; --panel:#101a24; --panel-2:#16232e;
  --ink:#e8f4f2; --slate-2:#9db3b8; --slate-1:#6f8a92;
  --mint:#45f8ca; --teal:#01b2aa; --sun:#ffdd00; --alert:#ff6b6b;
  --mint-ink:#45f8ca; --sun-ink:#ffdd00; --on-accent:#06201c;
  --line:rgba(157,179,184,.14); --mint-top:rgba(69,248,202,.14);
  --glass:rgba(16,26,36,.55); --nav-bg:rgba(6,13,15,.82);
  --chip-bg:rgba(10,18,22,.94); --backdrop:rgba(3,7,9,.72);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--void);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
html{transition:background-color .25s var(--ease)}
body{overflow-x:hidden}
a{color:var(--mint-ink);text-decoration:none}
a:hover{color:var(--sun-ink)}
::selection{background:var(--mint);color:var(--on-accent)}
input,button,textarea{font-family:inherit}

/* keyboard focus — PRD §9.13 */
:focus-visible{outline:2px solid var(--mint-ink);outline-offset:3px;border-radius:4px}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#1c2b36;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(69,248,202,.32)}50%{box-shadow:0 0 28px 4px rgba(69,248,202,.14)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
/* hero 3D phone — gentle rotate/float; swappable for a real .glb/360° asset */
@keyframes phoneSpin{0%,100%{transform:rotateY(-13deg) rotateX(3deg) translateY(0)}50%{transform:rotateY(13deg) rotateX(-2deg) translateY(-14px)}}
.phone3d{transform-style:preserve-3d;animation:phoneSpin 7s ease-in-out infinite;will-change:transform}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.phone3d{transform:none}}

.no-glass *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* transparent header over the hero video (landing, at top); solid once scrolled */
.nav-over{transition:background .3s var(--ease),border-color .3s var(--ease)}
html:not(.scrolled) .nav-over{background:transparent!important;border-bottom-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(.scrolled) .nav-over::before{content:"";position:absolute;left:0;right:0;top:0;height:150%;background:linear-gradient(180deg,rgba(4,9,11,.6),transparent);pointer-events:none;z-index:-1}
html:not(.scrolled) .nav-over .navlink{color:rgba(255,255,255,.9)!important}
html:not(.scrolled) .nav-over .navlink:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
html:not(.scrolled) .nav-over [data-act="toggleTheme"]{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.32)!important;color:#fff!important}
html:not(.scrolled) .nav-over .logo-l{display:none!important}
html:not(.scrolled) .nav-over .logo-d{display:block!important}

/* logo swaps with theme: dark wordmark on light bg, white wordmark on dark bg */
.logo-l{display:block}.logo-d{display:none}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}

/* shared grid helpers */
.grid4{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.grid4{grid-template-columns:repeat(4,1fr)}}
/* 3-up grid for sections that now hold three cards (tiers, trust) — no empty column */
.grid3{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.grid3{grid-template-columns:repeat(3,1fr)}}

/* hover affordances (were style-hover in the source DSL) */
.navlink:hover{background:var(--panel)!important;color:var(--ink)!important}
.hoverlift{transition:transform .18s var(--ease),border-color .18s var(--ease)}
.hoverlift:hover{transform:translateY(-3px)}
.faqbtn:hover{color:var(--ink)}

/* footer legal links (buttons styled as links) */
.flink{background:none;border:none;padding:0;color:var(--slate-2);font-size:13px;font-family:var(--body);cursor:pointer}
.flink:hover{color:var(--ink)}

/* ledger reveal (JS toggles .in) */
.lrow{opacity:0;transform:translateY(8px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.lrow.in{opacity:1;transform:none}

/* ---- hero: Netflix-style — one full-bleed video background, text changes per slide ---- */
.hero{position:relative;overflow:hidden;height:clamp(600px,92vh,960px);border-bottom:1px solid var(--line);background:#060d0f}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;background:#060d0f;transform:translateZ(0);backface-visibility:hidden;will-change:transform;image-rendering:auto}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,9,11,.86) 0%,rgba(4,9,11,.55) 44%,rgba(4,9,11,.12) 80%),linear-gradient(0deg,rgba(4,9,11,.7) 0%,transparent 44%)}
.hero-vp{position:absolute;inset:0;z-index:2}
/* HERO 2 — the product film on its own. Deliberately shorter than the slider so the
   page does not open with two full viewports before any content. */
.film{position:relative;overflow:hidden;height:clamp(360px,62vh,680px);background:#060d0f;border-bottom:1px solid var(--line)}
/* Taller than the section, pulled up by half the excess, so there is 14% of slack at
   each end for the parallax to travel into without ever revealing an edge. */
.film-bg{position:absolute;left:0;width:100%;height:128%;top:-14%;object-fit:cover;object-position:center;background:#060d0f;transform:translateZ(0);backface-visibility:hidden;will-change:transform}
@media(prefers-reduced-motion:reduce){.film-bg{height:100%;top:0;transform:none!important}}
#hero-track{position:absolute;inset:0}
/* slides cross-fade cleanly: the outgoing slide fades out first, the incoming one
   fades in on a delay so you never see both at once ("no shadow of the previous"). */
.hslide{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(72px,10vh,120px) clamp(20px,6vw,84px) clamp(84px,10vh,120px);opacity:0;transform:translateY(26px);transition:opacity .55s var(--ease),transform .6s var(--ease);pointer-events:none}
.hslide.on{opacity:1;transform:none;pointer-events:auto;z-index:3;transition:opacity .8s .55s var(--ease),transform .9s .55s var(--ease)}
.hero-copy{max-width:660px;width:100%}
.hero-eyebrow{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#4de0c4;margin-bottom:16px}
.hero-h1{font-family:var(--disp);font-weight:800;font-size:clamp(36px,6vw,68px);line-height:1.02;letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance;color:#f6f8f7}
.hero-sub{font-size:clamp(16px,2vw,20px);line-height:1.55;max-width:52ch;margin:0 0 30px;color:rgba(238,245,243,.86)}
/* Stacked sub-lines: tighten the gap between them so three paragraphs read as one
   block, and keep the 30px breathing room only before the CTAs. */
.hero-sub + .hero-sub{margin-top:-18px}
.hero-lead{font-weight:700;color:#f6f8f7}
.grad{background:linear-gradient(100deg,#45f8ca,#01b2aa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#45f8ca}
.hl-y{color:#ffdd00}   /* yellow brand highlight on the hero video */
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.hero-arrow:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6)}


/* ---- form fields (developer + waitlist) ---- */
.fld{margin-bottom:14px}
.fld label{display:block;font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-1);margin-bottom:7px}
.fld input,.fld textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--void);color:var(--ink);font-size:15px;font-family:var(--body);outline:none;resize:vertical}
.fld input:focus,.fld textarea:focus{border-color:var(--mint-top)}

/* ---- responsive: tablets, foldables, mobile ---- */
@media(max-width:820px){
  .hero{height:clamp(440px,72svh,640px)}   /* shorter on phones */
  .hslide{align-items:flex-end;padding:84px clamp(18px,6vw,28px) 76px}   /* text sits lower over the video */
  .hero-arrow{display:none}                /* swipe + dots on small screens */
  .hero-scrim{background:linear-gradient(0deg,rgba(4,9,11,.9) 8%,rgba(4,9,11,.45) 55%,rgba(4,9,11,.2) 100%)}
}
@media(max-width:360px){                   /* narrow foldables (closed) */
  .heroCtas{flex-direction:column}
  .heroCtas>button{width:100%;justify-content:center}
  .grid4,.earn2{grid-template-columns:1fr!important}
}

/* mobile: bottom tab bar + responsive tweaks (ported from source media query) */
@media(max-width:640px){
  body{padding-bottom:76px}
  .navLinks{display:none!important}
  .mtabs{display:flex!important}
  .heroGrid{grid-template-columns:1fr!important;gap:30px!important}
  .heroCtas{flex-direction:column}
  .heroCtas>button{width:100%;justify-content:center}
  .earn2{grid-template-columns:repeat(2,1fr)!important}
  .heroStats{gap:10px!important;flex-wrap:nowrap!important;text-align:center!important}
  .heroStats>div{flex:1 1 0!important;text-align:center!important}
  .heroStats>div>div:first-child{font-size:19px!important}
  .heroStats>div>div:last-child{font-size:9.5px!important;letter-spacing:.04em!important}
}