/* FONTS - self-hosted (General Sans display+body, Geist Mono labels) */
@font-face{font-family:'General Sans';src:url('/assets/fonts/GeneralSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'General Sans';src:url('/assets/fonts/GeneralSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'General Sans';src:url('/assets/fonts/GeneralSans-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

/* TOKENS - warm monochrome (mirrors index.html) */
:root{
  --bg:#050506;--surface:#0C0D10;--surface-2:#121317;--ink:#F5F5F7;--muted:#9BA0A8;--faint:#5B5F66;
  --line:#1C1D21;--line-strong:#2A2C32;--on-ink:#050506;
  --royal:#3D6BFF;--ice:#8FC6FF;--good:#37D67A;--bad:#FF5D5D;--go:#37D67A;
  --font-display:'General Sans','Helvetica Neue',Arial,sans-serif;
  --font-body:'General Sans','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Geist Mono','SF Mono',ui-monospace,Menlo,monospace;
  --maxw:1180px;--gutter:clamp(20px,5vw,64px);--r-sm:8px;--r-md:11px;--r-lg:16px;
  --e-out:cubic-bezier(.16,1,.3,1);--dur-fast:.18s;--dur-med:.32s;--dur-slow:.55s;
  --safe-b:env(safe-area-inset-bottom,0px);
  --accent-deep:#080C18;--accent-royal:#3560E6;--accent-ice:#8FC6FF;--accent-wash:#3560E6;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
.page{overflow-x:clip;position:relative;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--ink);color:var(--bg);}

.page::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;opacity:.28;
  mask-image:radial-gradient(circle at 50% 20%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 20%,#000 0%,transparent 72%);}

h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.025em;}
.mono{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--muted);}
.mono-sm{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;}
.eyebrow .tick{width:22px;height:1px;background:var(--line-strong);position:relative;}
.eyebrow .tick::before,.eyebrow .tick::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--line-strong);}
.eyebrow .tick::before{left:0;} .eyebrow .tick::after{right:0;}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);position:relative;z-index:1;}

/* NAV (sticky) */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(14px);backdrop-filter:saturate(1.1) blur(14px);
  border-bottom:1px solid var(--line);transition:border-color var(--dur-med),background var(--dur-med);}
.nav.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 94%,transparent);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;position:relative;}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);padding-block:7px;}
.brand svg{height:30px;width:auto;flex:0 0 auto;overflow:visible;}
/* hover/focus replay of the gate-page logo intro (index.html .gate-mark).
   hover:hover skips sticky-hover replays on touch; reduced-motion keeps the mark static. */
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .brand:hover svg .disc,.brand:focus-visible svg .disc{transform-origin:515.46px 500px;animation:brandBreathe .5s cubic-bezier(.22,.8,.24,1) both;}
  .brand:hover svg .arc,.brand:focus-visible svg .arc{stroke-dasharray:2015;animation:brandSweep .8s cubic-bezier(.3,.6,.2,1) both;}
  .brand:hover svg .dot,.brand:focus-visible svg .dot{transform-origin:839.63px 669.43px;animation:brandPop .3s cubic-bezier(.34,1.56,.64,1) .65s both;}
}
@keyframes brandBreathe{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes brandSweep{from{stroke-dashoffset:2015}to{stroke-dashoffset:0}}
@keyframes brandPop{from{transform:scale(0)}to{transform:scale(1)}}
.brand .word{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.03em;}
.brand .tld{font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.05em;align-self:flex-end;padding-bottom:3px;font-weight:500;}
.nav-links{display:flex;align-items:center;gap:22px;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
@media(max-width:1100px){.nav-links{position:static;transform:none;left:auto;top:auto;}}
.nav-btn-cluster{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.nav-links a.navlink{font-size:14px;color:var(--muted);font-weight:500;transition:color var(--dur-fast);position:relative;padding:6px 0;}
.nav-links a.navlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);transition:width var(--dur-med) var(--e-out);}
.nav-links a.navlink:hover{color:var(--ink);} .nav-links a.navlink:hover::after{width:100%;}
@media(max-width:720px){.nav-inner{height:56px;}.nav-links a.navlink{display:none;}.nav-download{display:none !important;}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--r-sm);
  font-weight:600;font-size:14px;letter-spacing:-.01em;transition:transform var(--dur-fast) var(--e-out),background var(--dur-fast),box-shadow var(--dur-fast);white-space:nowrap;}
.btn-primary{background:var(--ink);color:var(--on-ink);box-shadow:0 1px 0 rgba(0,0,0,.04);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px -8px rgba(0,0,0,.4);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* LEGAL ARTICLE */
.legal{padding:clamp(40px,7vw,84px) 0 clamp(56px,9vw,110px);}
.legal-head{max-width:760px;margin-bottom:clamp(30px,4vw,44px);}
.legal-head h1{font-size:clamp(30px,5vw,52px);letter-spacing:-.035em;margin-top:6px;margin-bottom:16px;}
.legal-head .updated{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.legal-body{max-width:760px;}
.legal-body section{padding-top:clamp(26px,3.4vw,38px);margin-top:clamp(26px,3.4vw,38px);border-top:1px solid var(--line);}
.legal-body section:first-child{border-top:none;margin-top:0;padding-top:0;}
.legal-body h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;margin-bottom:14px;display:flex;align-items:baseline;gap:12px;}
.legal-body h2 .idx{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;color:var(--faint);}
.legal-body h3{font-size:16px;margin:22px 0 8px;letter-spacing:-.01em;}
.legal-body p{color:var(--muted);margin-bottom:14px;font-size:clamp(15px,1.3vw,16.5px);line-height:1.72;}
.legal-body p strong{color:var(--ink);font-weight:600;}
.legal-body ul{list-style:none;margin:0 0 16px;padding:0;}
.legal-body li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--muted);font-size:clamp(15px,1.3vw,16.5px);line-height:1.66;}
.legal-body li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:1px;background:var(--line-strong);}
.legal-body a{color:var(--ink);border-bottom:1px solid var(--line-strong);transition:border-color var(--dur-fast);}
.legal-body a:hover{border-color:var(--ink);}
.legal-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(40px,6vw,60px);padding-top:26px;border-top:1px solid var(--line);}
.legal-nav a{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 14px;transition:border-color var(--dur-fast),color var(--dur-fast);}
.legal-nav a:hover{border-color:var(--ink);color:var(--ink);}
.legal-nav a[aria-current]{color:var(--ink);border-color:var(--ink);}

/* FOOTER */
.footer{padding:clamp(48px,6vw,72px) 0 calc(clamp(48px,6vw,72px) + var(--safe-b));border-top:1px solid var(--line);background:var(--surface);}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;margin-bottom:40px;}
.footer .brand svg{height:28px;} .footer .brand .word{font-size:22px;}
.footer-tagline{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px;max-width:260px;line-height:1.7;}
.footer-links{display:flex;gap:38px;flex-wrap:wrap;}
.footer-col .mono{margin-bottom:14px;display:block;font-size:10px;}
.footer-col a{display:block;font-size:14px;color:var(--muted);padding:5px 0;transition:color var(--dur-fast);}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);}
/* social row — brand column, sits under the tagline */
.footer-social{list-style:none;display:flex;gap:4px;margin:16px 0 0 -11px;}
.footer-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm,8px);
  color:var(--muted);transition:color var(--dur-fast,.18s);}
.footer-social a:hover{color:var(--ink);}
.footer-social a:focus-visible{outline:2px solid var(--ink);outline-offset:-6px;}
.footer-social svg{width:20px;height:20px;display:block;}
.footer-bottom .mono-sm{color:var(--faint);}

/* ============================================================
   ACCENT — Animated Blue Gradient (DESIGN.md 2026-07-11).
   The ONE sanctioned colour exception to "colour = status".
   Brand moments ONLY: primary CTAs + the hero wordmark backdrop.
   NEVER body text / whole-page bg / secondary buttons / status hues.
   ============================================================ */
/* Soft blurred colour fields: navy→royal wash + two radial "blobs" (ice +
   royal) that read as diffuse light. Drift = one slow background-position
   loop (transform/position only — no width/height animation, no layout shift). */
.accent-gradient{
  background-color:var(--accent-deep);
  background-image:
    radial-gradient(60% 80% at 28% 30%,rgba(191,227,255,.85),transparent 62%),
    radial-gradient(70% 90% at 74% 72%,rgba(53,96,230,.80),transparent 66%),
    linear-gradient(160deg,var(--accent-deep),var(--accent-royal));
  background-size:200% 200%,220% 220%,100% 100%;
  background-position:20% 20%,80% 80%,0 0;
  color:#fff;
  animation:accentDrift 11s var(--e-out,ease-in-out) infinite alternate;
}
/* fine monochrome grain — inline feTurbulence SVG, ~7% opacity overlay */
.accent-grain::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  opacity:.07;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/64px 64px;
}
@keyframes accentWave{
  from{background-position:0% 50%;}
  to  {background-position:100% 50%;}
}
@media(prefers-reduced-motion:reduce){
  .accent-gradient{animation:none;background-position:50% 40%,55% 55%,0 0;} /* static mid-state */
}

/* Primary CTA — swap the flat --ink fill for the animated gradient.
   White text on the navy-based field (DESIGN.md); grain via ::after. */
.btn-primary{
  position:relative;overflow:hidden;
  background-color:var(--accent-royal);
  background-image:linear-gradient(100deg,
    var(--accent-deep) 0%, var(--accent-royal) 24%,
    var(--accent-wash) 50%,
    var(--accent-royal) 76%, var(--accent-deep) 100%);
  background-size:280% 100%;
  background-position:0% 50%;
  color:#fff;
  box-shadow:0 1px 0 rgba(8,12,24,.12);
  animation:accentWave 7s ease-in-out infinite alternate;
}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.07;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/64px 64px;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(53,96,230,.55);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:focus-visible{outline:2px solid var(--accent-royal);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.btn-primary{animation:none;background-position:50% 50%;}}


/* Kiran: wave plays at rest, FREEZES under the cursor */
.btn-primary:hover,.btn-primary:focus-visible{animation-play-state:paused;}

/* GHOST BUTTON + HAMBURGER + MOBILE MENU */
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px);}
.btn-ghost:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--r-sm);color:var(--ink);flex:0 0 auto;cursor:pointer;
  transition:background var(--dur-fast);}
.nav-burger:hover{background:var(--surface);}
.nav-burger:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.nav-burger svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
@media(max-width:720px){
  .nav-links a.navlink{display:none;}
  .nav-burger{display:inline-flex;}
  .nav-links .btn-ghost.nav-login{display:none;}
}
.nav-menu{position:fixed;top:64px;left:0;right:0;z-index:59;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:0;max-height:0;overflow:hidden;
  transition:max-height var(--dur-med) var(--e-out),padding var(--dur-med);}
.nav-menu.open{max-height:calc(100dvh - 56px);overflow-y:auto;padding:8px 0 calc(16px + env(safe-area-inset-bottom,0px));}
@media(prefers-reduced-motion:reduce){.nav-menu{transition:none;}}
.nav-menu a{display:flex;align-items:center;min-height:48px;padding:0 var(--gutter);
  font-size:16px;font-weight:500;color:var(--muted);
  border-bottom:1px solid var(--line);
  transition:color var(--dur-fast),background var(--dur-fast);}
.nav-menu a:last-child{border-bottom:none;}
.nav-menu a:hover,.nav-menu a:focus-visible{color:var(--ink);background:var(--surface);}
.nav-menu a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
.nav-menu .menu-cta{margin:12px var(--gutter) 0;display:flex;flex-direction:column;gap:10px;}
.nav-menu .menu-cta a{border:none;border-radius:var(--r-sm);padding:0 16px;font-size:15px;
  font-weight:600;justify-content:center;}
.nav-menu .menu-cta .btn-primary{color:#fff;}
.menu-secondary{display:flex;align-items:center;justify-content:center;min-height:44px;
  font-size:13px !important;font-weight:400 !important;color:var(--faint) !important;
  border:none !important;border-radius:0 !important;padding:0 16px !important;
  background:transparent !important;}
.menu-secondary:hover,.menu-secondary:focus-visible{color:var(--muted) !important;background:transparent !important;}
body.menu-open{overflow:hidden;}
@media(max-width:720px){.nav-menu{top:56px;}}
section[id],article[id]{scroll-margin-top:80px;}

/* ============================================================
   HELP CENTRE — hub + article pages. Adds to the shared shell.
   ============================================================ */
.help-hero{padding:clamp(40px,7vw,84px) 0 clamp(24px,4vw,40px);}
.help-hero h1{font-size:clamp(30px,5vw,52px);letter-spacing:-.035em;margin:6px 0 14px;}
.help-hero p{color:var(--muted);max-width:560px;font-size:clamp(15px,1.3vw,17px);}
.help-cats{padding-bottom:clamp(56px,9vw,110px);display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;}
.help-cat{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:22px 22px 14px;}
.help-cat h2{font-size:18px;letter-spacing:-.02em;margin-bottom:4px;}
.help-cat .count{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);}
.help-cat ul{list-style:none;margin:14px -10px 0;padding:0;}
.help-cat li{margin:0;}
.help-cat li a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;
  border-radius:var(--r-sm);font-size:15px;color:var(--muted);line-height:1.45;
  transition:color var(--dur-fast),background var(--dur-fast);}
.help-cat li a::before{content:"";flex:0 0 auto;width:6px;height:1px;background:var(--line-strong);
  transition:background var(--dur-fast),width var(--dur-fast) var(--e-out);}
.help-cat li a:hover,.help-cat li a:focus-visible{color:var(--ink);background:var(--surface-2);}
.help-cat li a:hover::before,.help-cat li a:focus-visible::before{background:var(--ink);width:12px;}
.help-cat li a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}

/* Breadcrumb. Stands in for the .eyebrow that /support and /terms carry, and
   is typed and positioned identically to it — same tick mark, same 11px mono,
   same .16em, same --muted, same 22px gap to the h1. */
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.crumbs::before{content:"";flex:0 0 auto;width:22px;height:7px;
  border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong);
  background:linear-gradient(var(--line-strong),var(--line-strong)) left 50%/100% 1px no-repeat;}
.crumbs a,.crumbs span{font-family:var(--font-mono);font-weight:500;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
/* 44px thumb target on an 11px line, with no visual shift (ux-laws / Fitts) */
.crumbs a{transition:color var(--dur-fast);padding:14px 4px;margin:-14px -4px;}
.crumbs a:hover{color:var(--ink);}
.crumbs a:focus-visible{outline:2px solid var(--ink);outline-offset:0;}
.crumbs .sep{color:var(--line-strong);}

/* still stuck block */
.help-foot{max-width:760px;margin-top:clamp(40px,6vw,60px);padding:22px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
.help-foot h2{font-size:17px;letter-spacing:-.02em;margin-bottom:8px;}
.help-foot p{color:var(--muted);font-size:15px;margin-bottom:16px;}
.help-foot .help-foot-actions{display:flex;gap:10px;flex-wrap:wrap;}
@media(max-width:420px){.help-foot .help-foot-actions .btn{width:100%;}}


/* numbered steps inside an article */
.legal-body ol.steps{list-style:none;counter-reset:step;margin:0 0 16px;padding:0;}
.legal-body ol.steps li{counter-increment:step;position:relative;padding-left:30px;
  margin-bottom:10px;color:var(--muted);font-size:clamp(15px,1.3vw,16.5px);line-height:1.66;}
.legal-body ol.steps li::before{content:counter(step);position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--faint);
  background:none;width:auto;height:auto;line-height:1.9;}