/* Prova site system v2 (2026-10). Dark product surface, one accent: the S1 status light. */
/* Die Grotesk D (Klim Type Foundry). Web use needs Klim's web licence: put the licensed WOFF2 files in
   assets/fonts/ with these names. Without them the site falls back to Inter (bundled, OFL). */
@font-face{font-family:"Die Grotesk D";src:url("../fonts/die-grotesk-d-300.woff2") format("woff2");font-weight:100 349;font-style:normal;font-display:swap}
@font-face{font-family:"Die Grotesk D";src:url("../fonts/die-grotesk-d-400.woff2") format("woff2");font-weight:350 449;font-style:normal;font-display:swap}
@font-face{font-family:"Die Grotesk D";src:url("../fonts/die-grotesk-d-500.woff2") format("woff2");font-weight:450 650;font-style:normal;font-display:swap}
@font-face{font-family:"Die Grotesk D";src:url("../fonts/die-grotesk-d-700.woff2") format("woff2");font-weight:651 900;font-style:normal;font-display:swap}
@font-face{
  font-family:"Inter Prova";
  src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
/* Metric-matched fallback keeps layout steady while the web font loads (CLS). */
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  ascent-override:96.9%;descent-override:24.1%;line-gap-override:0%;size-adjust:107.1%;
}
:root{
  --bg:#000;
  --bg-1:#0b0b0d;
  --bg-2:#141417;
  --bg-3:#1d1d21;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --text:#f5f5f7;
  --text-2:#a1a1a6;
  --text-3:#86868b;
  --magenta:#ea39de;
  --orchid:#b044e7;
  --violet:#7d4eef;
  --led:#e202e8;
  --accent:linear-gradient(90deg,#ff33e8 0%,#b044e7 50%,#7c4dff 88%);
  /* App UI tokens (Figma: Prova app record screen) */
  --ui-ground:#010203;--ui-surface:#0e0f12;--ui-glass:#17191e;--ui-line:#2b2e33;
  --ui-text:#f5f7fa;--ui-silver:#a6b1be;--ui-slate:#7a828d; /* Figma slate #666e78, lifted to meet WCAG AA 4.5:1 for small text */
  --ui-signal:#ff33e8;--ui-lilac:#b8a8ff;--ui-amber:#ffb547;
  --ok:#30d158;--warn:#ffd60a;--bad:#ff453a;--cool:#64d2ff;
  --radius:28px;--radius-s:18px;
  --font:"Die Grotesk D","Inter Prova","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --nav-h:52px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.47;
  font-optical-sizing:auto;font-feature-settings:"kern";letter-spacing:.012em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--text);color:#000;padding:10px 16px;border-radius:999px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.num{font-variant-numeric:tabular-nums}

/* ---------- Type ---------- */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.01em;margin:0 0 14px;color:var(--text-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grad{background:var(--accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.02em}
.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 10px var(--led)}
.tag.ok .dot{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.display{font-size:clamp(64px,11.5vw,168px);line-height:.94;letter-spacing:-.02em;font-weight:500;margin:0}
.h1{font-size:clamp(44px,6.2vw,88px);line-height:1.02;letter-spacing:-.014em;font-weight:500;margin:0}
.h2{font-size:clamp(36px,4.8vw,64px);line-height:1.05;letter-spacing:-.012em;font-weight:500;margin:0}
.h3{font-size:clamp(24px,2.4vw,32px);line-height:1.12;letter-spacing:-.006em;font-weight:500;margin:0}
.lead{font-size:clamp(19px,1.55vw,24px);line-height:1.36;letter-spacing:0;font-weight:400;color:var(--text-2);margin:0}
.lead b,.lead strong{color:var(--text);font-weight:600}
.fine{font-size:12px;line-height:1.5;color:var(--text-3);margin:0;letter-spacing:.022em}
.fine a{text-decoration:underline;text-underline-offset:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:999px;font-size:17px;font-weight:500;letter-spacing:0;border:0;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s,box-shadow .3s,color .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--text);color:#000}
.btn-primary:hover{background:#fff;box-shadow:0 0 0 6px rgba(234,57,222,.14),0 10px 40px -8px rgba(234,57,222,.55)}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.btn-glow{color:#fff;background:linear-gradient(#000,#000) padding-box,var(--accent) border-box;border:1.5px solid transparent}
.btn-glow:hover{box-shadow:0 10px 50px -10px rgba(176,68,231,.8)}
.btn-sm{min-height:32px;padding:0 14px;font-size:14px}
.btn-lg{min-height:52px;padding:0 28px;font-size:18px}
.link{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:#e88cf0;letter-spacing:-.01em}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:1.6px 1.6px 0 0;transform:rotate(45deg);margin-left:3px}

/* ---------- Global nav ---------- */
.gnav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,env(safe-area-inset-left));
  background:rgba(0,0,0,.62);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.wordmark{display:inline-flex;align-items:center;color:var(--text);line-height:1}
.wordmark svg{height:15px;width:auto;display:block}
.gnav nav{display:flex;align-items:center;gap:26px;font-size:13px;color:var(--text-2)}
.gnav nav a:hover,.gnav nav a[aria-current="page"]{color:var(--text)}
@media (max-width:734px){.gnav nav .hide-s{display:none}.gnav nav{gap:18px}}

/* ---------- Cards / surfaces ---------- */
.card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius)}
.hairline{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}
html.no-js .reveal{opacity:1;transform:none}

/* Die Grotesk D is a tight display cut: open up small sizes a touch */
small,.meta,.help,.cap,label,.tag,.chip,.perks li,.rui,.sb,.status{letter-spacing:.02em}