/* Stratotank site.css — ported from the hangar funnel page's paper-sheet design
   (Website/src/views/funnel/GetHangar.vue <style scoped>, plus SignupOptions.vue
   and HangarDownload.vue). Class names are unchanged so markup ports 1:1. */

/* --- self-hosted fonts ------------------------------------------------------ */
@font-face{font-family:"Roboto Slab";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/roboto-slab-700.woff2") format("woff2")}
@font-face{font-family:"Roboto Slab";font-style:normal;font-weight:900;font-display:swap;src:url("/fonts/roboto-slab-900.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/hanken-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/hanken-grotesk-600.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/hanken-grotesk-700.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:900;font-display:swap;src:url("/fonts/hanken-grotesk-900.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/ibm-plex-mono-700.woff2") format("woff2")}

/* Author rules below set display on elements (.signup-form, .signup-or,
   .signup-btn) that JS also toggles via the [hidden] attribute; without this,
   those author display values beat the UA's [hidden]{display:none} and the
   element stays visible. */
[hidden]{display:none!important}

:root{
  --ink:#0E1118; --paper:#F4F1E8; --paper2:#ECE8DB; --card:#FBF9F3;
  --red:#E63946; --blue:#2563EB; --teal:#1F9D8F; --green:#46C06A; --yellow:#F4C430; --amber:#E0861C;
  --txt:#1C202B; --mut:#5D6270; --line:rgba(14,17,24,.12);
  /* the icon "limb" gradient: same stops as the hangar mark */
  --limb:linear-gradient(105deg,#E63946 0%,#2563EB 24%,#1F9D8F 42%,#46C06A 58%,#F4C430 78%,#E0861C 100%);
  /* funnel vars: SignupOptions.vue reads --funnel-* from its host page (was
     FunnelLayout in the Vue app); declared here so the port needs no wrapper */
  --funnel-radius:12px; --funnel-line:var(--line); --funnel-accent:var(--blue); --funnel-accent-ink:#fff;
  --funnel-muted:var(--mut); --funnel-surface:var(--card); --funnel-text:var(--txt);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:#0B0B0D; color:var(--txt);
  font:16px/1.6 "Hanken Grotesk",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* dark mode: flip the sheet colours, everything else flows through the vars */
:root[data-theme=dark]{
  --ink:#F0EEE6; --paper:#141310; --paper2:#0E0D0B; --card:#1C1B16;
  --txt:#DDDAD1; --mut:#A19E93; --line:rgba(244,241,232,.13);
}
[data-theme=dark] header{background:rgba(20,19,16,.92)}
[data-theme=dark] .k-green{color:var(--green)}
[data-theme=dark] .page{box-shadow:0 0 90px rgba(0,0,0,.9),0 0 0 1px rgba(240,238,230,.08)}
/* Reset ONLY elements with UA default margins/padding, scoped to this page.
   Not `.hgp *`: that compiles to `.hgp[data-v] *` and leaks into child
   components (it stripped SignupOptions' padding). And `:where(.hgp)` keeps the
   reset at element-level specificity so every later rule on this page
   (including `margin:0 auto` centering and the bare `summary` styles) wins. */
/* `figure` belongs here: the UA gives it `margin: 1em 40px`, so every hero
   visual sat 40px inside the content column while the heading above it lined up
   with .wrap. .pvideo only ever overrode margin-top, so the inline margins
   survived (.hslide had already worked around it locally with margin:0). */
:where(body) h1,:where(body) h2,:where(body) h3,:where(body) h4,:where(body) p,:where(body) ul,:where(body) li,:where(body) details,:where(body) summary,:where(body) figure{margin:0;padding:0}
/* the sky behind the page — stars, meteors and the limb; the page is a wide
   light sheet on top, so only the side gutters ever show it */
.mx{position:fixed;inset:0;z-index:0;opacity:.85}
/* Narrowed from 1680: the content column is 1264 wide (.wrap 1200 + 32px each
   side), so a 1680 sheet left ~200px of dead paper either side of everything.
   1440 keeps a margin without the emptiness. Keep SHEET in site.js in step —
   it uses this width to decide where meteors can spawn without being covered. */
.page{position:relative;z-index:1;max-width:1440px;margin:0 auto;background:var(--paper);box-shadow:0 0 90px rgba(0,0,0,.55)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:"Roboto Slab",serif;line-height:1.15;color:var(--ink)}

/* the icon gradient as a rule */
.brandrule{height:5px;background:var(--limb)}

/* gradient frame around dark screenshots — echoes the brand marks
   (dark panel inside the four-colour frame) */
.frame{background:var(--limb);padding:5px;border-radius:16px;box-shadow:0 24px 60px rgba(14,17,24,.18);transition:transform .35s cubic-bezier(.2,.9,.3,1.2),box-shadow .35s ease}
.frame img{border-radius:12px;cursor:zoom-in}
.frame video{border-radius:12px;display:block;max-width:100%;height:auto}
.frame:hover{transform:scale(1.035) translateY(-6px);box-shadow:0 34px 80px rgba(14,17,24,.26),0 0 0 1px rgba(255,255,255,.4) inset;z-index:5;position:relative}
/* feature shots get a real pop so detail is visible */
.feat .frame:hover,.plus .frame:hover{transform:scale(1.28) translateY(-6px)}
@media (max-width:860px){.feat .frame:hover,.plus .frame:hover{transform:scale(1.05) translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.frame{transition:none}.frame:hover{transform:none}}

/* stacked pairs (deck + vstack): constant gentle float, periodic shrink-to-zero
   swap where the front vanishes and reappears behind. Poses per stack via vars. */
.deck,.vstack{position:relative}
.deck{margin-left:56px;--fpose:rotate(2deg);--bpose:rotate(-7deg) translate(-44px,30px) scale(.97)}
@media (max-width:860px){.deck{margin-left:44px;margin-top:10px}}
.vstack{margin-bottom:96px;--fpose:translate(0,0);--bpose:translateY(96px) rotate(1.2deg) scale(.97)}
.slot{animation:20s ease-in-out infinite}
.sA{position:relative;animation-name:swapA}
.sB{position:absolute;inset:0;animation-name:swapB}
.deck:hover .slot,.vstack:hover .slot{animation-play-state:paused}
.slot:hover{z-index:4!important}
.fl{animation:floaty 5s ease-in-out infinite}
.sB .fl{animation-duration:6.4s;animation-delay:-2.7s}
/* stagger so the stacks don't all swap in unison */
.feat:nth-child(2) .slot{animation-delay:-5s}
.feat:nth-child(3) .slot{animation-delay:-10s}
.feat:nth-child(4) .slot{animation-delay:-15s}
.feat:nth-child(5) .slot{animation-delay:-8s}
@keyframes floaty{0%,100%{transform:translateY(-4px) rotate(-.3deg)}50%{transform:translateY(4px) rotate(.4deg)}}
@keyframes swapA{
  0%,44%{transform:var(--fpose);z-index:2}
  47%{transform:var(--fpose) scale(0);z-index:2}
  47.2%{transform:var(--bpose) scale(0);z-index:0}
  50%,94%{transform:var(--bpose);z-index:0}
  100%{transform:var(--fpose);z-index:2}
}
@keyframes swapB{
  0%,44%{transform:var(--bpose);z-index:0}
  50%,94%{transform:var(--fpose);z-index:2}
  97%{transform:var(--fpose) scale(0);z-index:2}
  97.2%{transform:var(--bpose) scale(0);z-index:0}
  100%{transform:var(--bpose);z-index:0}
}
@media (prefers-reduced-motion:reduce){
  .slot,.fl{animation:none}
  .sA{z-index:2;transform:var(--fpose)}
  .sB{transform:var(--bpose);z-index:0}
}

/* click-to-fullscreen lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(7,11,24,.93);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.lb img{max-width:97%;max-height:97vh;width:auto;height:auto;border-radius:8px;box-shadow:0 20px 80px rgba(0,0,0,.7)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(244,241,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:13px 32px;max-width:1360px;margin:0 auto}
.navbrand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
/* the drawn lockup: word takes currentColor (so it follows the theme), the limb
   keeps its gradient. Height is the whole 748x118 box, so the word itself lands
   at ~21px. Every page wears this — there is no per-product nav brand. */
.navbrand .navlock{height:33px;width:auto;display:block}
.navright{display:flex;align-items:center;gap:12px}
/* account chip: reads as a control, not another nav word, so "Phillip van
   Coller" doesn't run on from Bots/Indicators/Tools/Plus */
.navuser{display:inline-flex;align-items:center;height:38px;max-width:220px;padding:0 15px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--txt);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navuser:hover{border-color:var(--mut);color:var(--ink)}
/* the theme switch is a preference, not navigation — ruled off from both */
.navsep{width:1px;height:24px;background:var(--line);flex:none}
.ttoggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.ttoggle:hover{border-color:var(--mut)}
.navlink{color:var(--mut);font-weight:600;font-size:15px;text-decoration:none}
.navlink:hover{color:var(--ink)}
@media (max-width:640px){.navbrand .navlock{height:27px}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border:3px solid transparent;background:linear-gradient(#0E1118,#0E1118) padding-box,var(--limb) border-box;color:#FFF;font-weight:700;font-size:17px;padding:15px 28px;border-radius:14px;text-decoration:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 8px 26px rgba(14,17,24,.28)}
.btn:hover{background:linear-gradient(#28304A,#1A2033) padding-box,var(--limb) border-box;transform:translateY(-2px);box-shadow:0 12px 34px rgba(14,17,24,.34)}
.btn svg{width:19px;height:19px}
.btn.small{font-size:14px;padding:9px 18px;border-width:2px;border-radius:10px;box-shadow:none}
.micro{margin-top:14px;font-size:13.5px;color:var(--mut)}
.micro b{color:var(--txt);font-weight:600}

/* embedded signup: one roomy centered card (Discord/Plus reveal happens on the
   download page, after signup — no exit points before the form) */
.getwrap{max-width:480px;margin:0 auto;text-align:center}
.getheadline{font-size:21px;font-weight:900;margin-bottom:22px;color:var(--ink)}
/* the embedded signup card stays light in both themes: SignupOptions styles
   itself from the light --funnel-* vars FunnelLayout provides */
.getcard{width:100%;box-sizing:border-box;background:#FBF9F3;border:1px solid rgba(14,17,24,.15);border-radius:18px;padding:28px 30px;box-shadow:0 18px 50px rgba(14,17,24,.16);scroll-margin-top:90px;text-align:center}
@media (max-width:560px){.getcard{padding:24px 18px}}
/* compact form: social buttons share one row; Name/Email keep the component's
   own side-by-side row; the OR divider and forms span both columns */
.getcard .signup{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.getcard .signup-or,.getcard .signup-form{grid-column:1/-1}
.getcard .signup-btn--google,.getcard .signup-btn--facebook{font-size:15px;padding:12px 10px;gap:9px}
@media (max-width:420px){.getcard .signup{grid-template-columns:1fr}}
/* dark mode: the card follows the sheet; SignupOptions is styled for a light
   surface, so re-skin its surfaces from this page's dark palette */
[data-theme=dark] .getcard{background:var(--card);border-color:var(--line)}
[data-theme=dark] .getcard .signup-btn--google,
[data-theme=dark] .getcard .signup-btn--facebook{background:#26251F;color:var(--txt);border-color:rgba(244,241,232,.16)}
[data-theme=dark] .getcard .signup-btn--google:hover:not(:disabled),
[data-theme=dark] .getcard .signup-btn--facebook:hover:not(:disabled){background:#2E2D26}
[data-theme=dark] .getcard .signup-input{background:#14130F;color:var(--txt);border-color:rgba(244,241,232,.16)}
[data-theme=dark] .getcard .signup-or{color:var(--mut)}
[data-theme=dark] .getcard .signup-or::before,
[data-theme=dark] .getcard .signup-or::after{background:rgba(244,241,232,.16)}
[data-theme=dark] .getcard .signup-fine{color:var(--mut)}
[data-theme=dark] .getcard .signup-code-lead{color:var(--mut)}
[data-theme=dark] .getcard .signup-code-lead strong{color:var(--ink)}
[data-theme=dark] .getcard .signup-link{color:var(--mut)}

/* hero: centered column, form card where the old Step 1/2 buttons sat */
.hero{position:relative;text-align:center;padding:80px 0 72px;background:
  radial-gradient(700px 340px at 12% 0%,rgba(37,99,235,.09),transparent 70%),
  radial-gradient(700px 340px at 88% 4%,rgba(244,196,48,.14),transparent 70%),
  radial-gradient(600px 300px at 50% 100%,rgba(230,57,70,.05),transparent 70%)}
.hero h1{font-size:clamp(40px,6.4vw,68px);font-weight:900;letter-spacing:-.01em}
.hero h1 .accent{background:var(--limb);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:640px;margin:18px auto 34px;font-size:19px;color:var(--mut)}

/* terminals flying into the hangar */
.funnel{position:relative;height:120px;max-width:760px;margin:20px auto 4px;overflow:visible}
.funnel .hicon{position:absolute;left:50%;top:50%;margin:-40px 0 0 -40px;width:80px;height:80px;
  filter:drop-shadow(0 0 14px rgba(244,196,48,.55)) drop-shadow(0 0 34px rgba(230,57,70,.25));
  animation:bob 4s ease-in-out infinite}
.funnel .t{position:absolute;left:50%;top:50%;width:34px;height:auto;margin:-16px 0 0 -17px;opacity:0;
  filter:drop-shadow(0 0 8px rgba(70,192,106,.55));
  animation:flyin 5.2s cubic-bezier(.45,.05,.35,1) infinite;animation-delay:var(--d)}
@keyframes flyin{
  0%{transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r,0deg));opacity:0}
  12%{opacity:1}
  76%{opacity:1}
  100%{transform:translate(0,0) scale(.25) rotate(0deg);opacity:0}
}
@media (max-width:640px){.funnel .t{display:none}.funnel{height:76px}}
@media (prefers-reduced-motion:reduce){.funnel .t,.funnel .hicon{animation:none}}
.hero .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1120px;margin:64px auto 0;align-items:start}
.hero .trio img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero .trio>div{transition:z-index 0s}
.hero .trio>div:nth-child(1){transform:rotate(-5deg) translate(30px,18px);z-index:1}
.hero .trio>div:nth-child(2){transform:translateY(-18px);position:relative;z-index:2}
.hero .trio>div:nth-child(3){transform:rotate(5deg) translate(-30px,18px);z-index:1}
.hero .trio>div:hover{z-index:3}
.hero .trio .tcap{margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:center}
@media (max-width:640px){.hero .trio{grid-template-columns:1fr;max-width:340px;gap:22px}.hero .trio>div:nth-child(1),.hero .trio>div:nth-child(2),.hero .trio>div:nth-child(3){transform:none}}
/* The signup card now sits under the trio. The outer two cards are rotated and
   translated 18px down, and transforms don't grow the grid box, so their visual
   bottom overhangs it — hence a gap bigger than it looks like it needs. */
.hero .getwrap{margin-top:84px}
@media (max-width:640px){.hero .getwrap{margin-top:48px}}

@keyframes bob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}

/* proof strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper2);overflow:hidden}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:24px 24px 28px}
.strip .item{position:relative;padding-top:26px}
.strip .item>svg{position:absolute;top:-42px;left:6px;width:84px;height:84px;opacity:.55}
.strip .item>div{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 8px 22px rgba(14,17,24,.10)}
.strip .item b{display:block;font-size:15px;color:var(--ink);font-weight:700}
.strip .item span{font-size:13.5px;color:var(--mut)}
@media (max-width:860px){.strip .wrap{grid-template-columns:1fr 1fr;gap:18px}}
@media (max-width:420px){.strip .wrap{grid-template-columns:1fr}}

/* problem */
.problem{padding:96px 0 8px;text-align:center}
.problem h2{font-size:clamp(28px,4vw,40px);font-weight:900;max-width:760px;margin:0 auto 18px}
.problem p{max-width:640px;margin:0 auto;color:var(--mut);font-size:17.5px}

/* features */
.features{padding:48px 0 24px}
.feat{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;padding:64px 0}
.feat:nth-child(even){grid-template-columns:7fr 5fr}
.feat:nth-child(even) .txt{order:2}
.feat .kicker{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;display:inline-block;font-weight:500}
.feat .kicker::after{content:"";display:block;height:3px;margin-top:6px;border-radius:2px;background:var(--limb)}
.feat h3{font-size:clamp(24px,3vw,31px);font-weight:900;margin-bottom:14px}
.feat p{color:var(--mut);font-size:16.5px}
.soon{margin-top:16px;font-size:13.5px;color:var(--mut)}
.soon .pill{display:inline-block;background:var(--yellow);color:#0E1118;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:4px;margin-right:10px;transform:rotate(-2deg);box-shadow:0 2px 6px rgba(14,17,24,.15)}
.toollist{list-style:none;margin:18px 0 0;padding:0}
.toollist li{position:relative;padding-left:20px;margin:9px 0;font-size:15px;color:var(--mut)}
.toollist li b{color:var(--ink);font-weight:700}
.toollist li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--red)}
.soon.tier .pill{background:var(--amber);color:#fff}
.flist{list-style:none;margin-top:14px}
.flist li{padding:11px 0 11px 34px;position:relative;color:var(--mut);font-size:15.5px;border-bottom:1px solid var(--line)}
.flist li:last-child{border-bottom:0}
.flist li::before{content:"";position:absolute;left:0;top:17px;width:18px;height:18px;background:conic-gradient(var(--red) 0 60deg,var(--blue) 60deg 150deg,var(--green) 150deg 240deg,var(--yellow) 240deg 300deg,var(--amber) 300deg 360deg);border-radius:5px}
.flist li b{display:block;color:var(--ink);font-size:16.5px;font-weight:700}
.k-red{color:var(--red)}.k-blue{color:var(--blue)}.k-teal{color:var(--teal)}.k-green{color:#2E9A50}.k-amber{color:var(--amber)}

/* everything else grid */
.more{padding:56px 0 88px}
.more h2{text-align:center;font-size:clamp(26px,3.6vw,36px);font-weight:900;margin-bottom:14px}
.more .lead{text-align:center;color:var(--mut);margin-bottom:44px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cell{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:25px 22px 22px;box-shadow:0 4px 18px rgba(14,17,24,.05)}
.cell::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--limb)}
.cell{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.cell svg{width:22px;height:22px}
.cell h4{font-weight:700;font-size:15.5px;color:var(--ink)}
.cell p{grid-column:1/-1;margin-top:8px}
.cell p{font-size:14px;color:var(--mut)}

/* docs band — .more in a ruled paper band so it separates from the section above */
.docs{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper2)}
.docs .docscta{text-align:center;margin-top:34px}

/* plus */
.plus{position:relative;padding:88px 0;background:
  radial-gradient(1000px 560px at 12% -10%,rgba(37,99,235,.28),transparent 60%),
  radial-gradient(900px 520px at 95% 110%,rgba(230,57,70,.18),transparent 60%),
  radial-gradient(700px 420px at 75% 0%,rgba(244,196,48,.12),transparent 55%),
  radial-gradient(600px 380px at 40% 115%,rgba(31,157,143,.14),transparent 60%),
  #0B101E}
.plus .inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.plus h2{font-size:clamp(26px,3.6vw,36px);font-weight:900;margin-bottom:14px;color:#F4F1E8}
.plus p.lead{color:#B9BFCC;margin-bottom:22px}
.plus .lead b{color:#FFF}
.plus ul{list-style:none}
.plus li{padding:10px 0 10px 34px;position:relative;color:#C7CBD6;font-size:15.5px;border-bottom:1px solid rgba(244,241,232,.12)}
.plus li:last-child{border-bottom:0}
.plus li::before{content:"";position:absolute;left:0;top:15px;width:18px;height:18px;background:conic-gradient(var(--red) 0 60deg,var(--blue) 60deg 150deg,var(--green) 150deg 240deg,var(--yellow) 240deg 300deg,var(--amber) 300deg 360deg);border-radius:5px}
.plus li b{display:block;color:#FFF;font-size:15.5px}
.fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.fleet .fm{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 8px 10px;text-align:center}
.fleet .fm img{width:46px;height:46px;margin:0 auto 7px;border-radius:10px}
.fleet .fm span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#9BA0AD}

/* faq */
.faq{padding:96px 0}
.faq h2{text-align:center;font-size:clamp(26px,3.6vw,36px);font-weight:900;margin-bottom:44px}
.faq .qs{max-width:720px;margin:0 auto}
/* scoped to .qs: bare details/summary selectors also hit the nav's <details>
   disclosure and gave it a stray border and the "+" marker */
.qs details{border-bottom:1px solid var(--line)}
.qs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;font-weight:600;font-size:16.5px;color:var(--ink)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font-family:"IBM Plex Mono",monospace;font-size:20px;color:var(--amber);flex-shrink:0;transition:transform .15s}
.qs details[open] summary::after{transform:rotate(45deg)}
.qs details .a{padding:0 4px 22px;color:var(--mut);font-size:15.5px;max-width:640px}

/* final cta */
/* overflow:clip, not hidden: the slider's flanking cards run wider than the
   content column and should be cut at the paper sheet's edge, not at the
   column's. `hidden` would make this a scroll container and break the sticky
   nav further up the tree; `clip` cuts without that. */
.final{position:relative;text-align:center;overflow:clip;padding:96px 0 100px;background:
  radial-gradient(560px 320px at 50% 30%,rgba(244,196,48,.13),transparent 70%),
  radial-gradient(700px 340px at 15% 100%,rgba(70,192,106,.10),transparent 70%),
  radial-gradient(700px 340px at 85% 100%,rgba(37,99,235,.08),transparent 70%)}
.final .hicon{width:72px;height:72px;margin:0 auto 30px;
  filter:drop-shadow(0 0 14px rgba(244,196,48,.55)) drop-shadow(0 0 34px rgba(230,57,70,.25));
  animation:bob 4s ease-in-out infinite}
.final h2{font-size:clamp(30px,4.6vw,46px);font-weight:900;margin-bottom:16px}
.final p:not(.micro){color:var(--mut);max-width:560px;margin:0 auto 34px;font-size:17.5px}
@media (prefers-reduced-motion:reduce){.final .hicon{animation:none}}
/* Hangar -> product lockup above the closing CTA on the free-tool pages */
.hpair{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:26px}
.hpair img{width:60px;height:60px;border-radius:14px}
.hpair span{color:var(--mut);font-size:24px;line-height:1}
/* No clipping here — the section does it, so the cards run out to the sheet
   edge instead of stopping short inside the content column. */
.hshot{max-width:960px;margin:46px auto 0;padding:0 0 12px}
/* coverflow slider: --o is the signed offset from the centre slide (0 = focus,
   negative = left stack), --d its absolute value. site.js rewrites both on a
   timer; opacity clamps itself, so slides past the second rank fade out with
   no extra rule. .frame:hover is neutralised here — the slide owns the transform. */
.hdeck{position:relative;aspect-ratio:2/1}
.hslide{position:absolute;top:50%;left:16%;width:68%;margin:0;
  transform:translateY(-50%) translateX(calc(var(--o,0)*46%)) scale(calc(1 - var(--d,0)*.16));
  opacity:calc(1 - var(--d,0)*.42);z-index:calc(9 - var(--d,0));
  transition:transform .5s cubic-bezier(.2,.9,.3,1.05),opacity .5s ease}
.hslide .frame,.hslide .frame:hover{transform:none;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.hslide img{width:100%;cursor:pointer}
.hslide figcaption{margin-top:14px;color:var(--mut);font-size:14.5px;text-align:center}
@media (prefers-reduced-motion:reduce){.hslide{transition:none}}
/* Vertical variant (Plus page): same --o/--d from the same JS, mapped to Y.
   Behind-slides peek out below rather than to the sides, so it fits a column. */
.hstack{overflow:hidden;padding-bottom:10px}
.hdeck--v{aspect-ratio:4/3}
.hdeck--v .hslide{left:5%;width:90%;
  transform:translateY(calc(-50% + var(--o,0)*34%)) scale(calc(1 - var(--d,0)*.11))}
.hdeck--v figcaption{font-size:13px;margin-top:10px}
/* narrow screens: the flanking slides would push past the viewport, so clip
   them at the section edge rather than letting the page scroll sideways */
@media (max-width:640px){.hslide{left:8%;width:84%}.hslide figcaption{font-size:13px}}

@media (max-width:860px){
  .feat,.feat:nth-child(even){grid-template-columns:1fr;gap:26px;padding:44px 0}
  .feat:nth-child(even) .txt{order:0}
  .plus .inner{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .strip .wrap{gap:10px 24px}
}

/* footer: paper band inside the sheet (the shared funnel footer is hidden on
   this route; the fixed matrix canvas would paint over anything outside .page) */
footer{border-top:1px solid var(--line);background:var(--paper2);padding:44px 0 26px;font-size:13.5px;color:var(--mut)}
/* flex, not grid: `1.7fr repeat(auto-fit,…)` is invalid CSS — auto-repeat can't
   sit beside a flexible track, so the whole declaration was dropped and the
   footer collapsed to one column. Flex wraps on its own, and adding a category
   to NavModel.Menus still needs no change here. */
.fcols{display:flex;flex-wrap:wrap;gap:40px}
.fbrand{flex:1 1 260px}
.fcol{flex:1 1 130px}
.fbrand p{max-width:260px;margin:14px 0 18px;line-height:1.6}
.fbrand img{height:22px;width:auto;opacity:.85}
.fcol{display:flex;flex-direction:column;gap:9px}
.fcol h2{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.fcol a{color:var(--mut);text-decoration:none}
.fcol a:hover{color:var(--ink)}
/* bottom rail: copyright + legal on the left, the risk warning on the right, so
   nothing floats centred under a half-empty row */
.frail{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 32px;
  margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:12px}
.fcopy a{color:var(--mut);text-decoration:none}
.fcopy a:hover{color:var(--ink)}
.frisk{flex:1 1 420px;max-width:620px;text-align:right;line-height:1.55;opacity:.85}

/* Post-checkout receipt strip. Block-level flex with fit-content width so it
   shrink-wraps its cells, centres under the heading, and forces the button onto
   its own line; cells wrap to their own rows on a narrow phone rather
   than squeezing three columns into 320px. The button below it gets its own air —
   the old page wedged it between two grey paragraphs and it stopped reading as the
   primary action. */
.rcpt{display:flex;width:fit-content;flex-wrap:wrap;justify-content:center;margin:0 auto 34px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rcpt>div{padding:11px 22px;border-right:1px solid var(--line);text-align:left}
.rcpt>div:last-child{border-right:none}
.rcpt dt{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.rcpt dd{margin:3px 0 0;font-size:14.5px;font-weight:700;color:var(--txt)}
@media (max-width:520px){
  .rcpt{display:block}
  .rcpt>div{border-right:none;border-bottom:1px solid var(--line);text-align:center}
  .rcpt>div:last-child{border-bottom:none}
}
@media (max-width:860px){
  .fcols{gap:30px}
  .fbrand{flex:1 1 100%}
  .frisk{text-align:left}
}

/* footer wordmark swap (CSS instead of the Vue :src ternary) */
.fmark{height:20px;width:auto;opacity:.8}
.fmark--dark{display:none}
[data-theme=dark] .fmark--light{display:none}
[data-theme=dark] .fmark--dark{display:block}

/* --- signup (ported from SignupOptions.vue <style scoped>) ----------------- */
.signup { display: flex; flex-direction: column; gap: 14px; max-width: 480px; width: 100%; }
.signup-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--funnel-radius); font-weight: 700; font-size: 16px;
  padding: 14px 22px; cursor: pointer; width: 100%; font-family: inherit;
}
.signup-btn:disabled { opacity: 0.6; cursor: default; }
.signup-btn--google { background: #ffffff; color: #1f1f1f; border: 2px solid var(--funnel-line); }
.signup-btn--google:hover:not(:disabled) { background: #f6f6f6; }
.signup-btn--facebook { background: #ffffff; color: #1f1f1f; border: 2px solid var(--funnel-line); }
.signup-btn--facebook:hover:not(:disabled) { background: #f6f6f6; }
.signup-ic { width: 18px; height: 18px; flex: none; }
.signup-btn--email { background: var(--funnel-accent); color: var(--funnel-accent-ink); border: 0; }
.signup-btn--email:hover:not(:disabled) { filter: brightness(1.06); }
.signup-or { display: flex; align-items: center; gap: 12px; color: var(--funnel-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.signup-or::before, .signup-or::after { content: ''; flex: 1; height: 2px; background: var(--funnel-line); }
.signup-form { display: flex; flex-direction: column; gap: 10px; }
.signup-fields { display: flex; gap: 10px; width: 100%; }
.signup-fields .signup-input { flex: 1; min-width: 0; }
.signup-input {
  /* border-box: no global reset on this site, so width:100% + padding + border
     would otherwise overflow the parent (fields overlapped on the contact grid) */
  box-sizing: border-box;
  background: var(--funnel-surface); color: var(--funnel-text);
  border: 2px solid var(--funnel-line); border-radius: var(--funnel-radius);
  padding: 13px 14px; font-size: 16px; font-family: inherit; width: 100%;
}
.signup-input:focus { outline: 2px solid var(--funnel-accent); outline-offset: 1px; }
.signup-input--invalid { border-color: #c0392b; }
.signup-input--code { text-align: center; letter-spacing: 0.5em; font-weight: 700; font-size: 22px; padding-left: 0.5em; }
.signup-error { color: #c0392b; font-size: 13px; text-align: left; }
.signup-fine { color: var(--funnel-muted); font-size: 12px; margin: 2px 0 0; text-align: center; }
.signup-code-lead { color: var(--funnel-muted); font-size: 14px; margin: 0 0 2px; text-align: center; }
.signup-code-lead strong { color: var(--funnel-text); }
.signup-code-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; }
.signup-link { background: none; border: 0; padding: 0; color: var(--funnel-accent); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.signup-link:disabled { color: var(--funnel-muted); cursor: default; }
.signup-link:hover:not(:disabled) { text-decoration: underline; }

/* --- download page (ported from HangarDownload.vue <style scoped>) --------- */
/* hero */
.dl{padding:56px 0 80px}
.dlhero{text-align:center;max-width:640px;margin:0 auto 48px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.dlhero h1{font-size:clamp(34px,5vw,52px);font-weight:900;margin-bottom:14px}
.dlhero .sub{color:var(--mut);font-size:17px}
.dlhero .sub b{color:var(--ink)}

/* two columns: steps left, action boxes right */
.dlgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
@media (max-width:860px){.dlgrid{grid-template-columns:1fr;gap:36px}}

.dlsteps h2{font-size:24px;font-weight:900;margin-bottom:20px}
.dlsteps ol{list-style:none;display:flex;flex-direction:column;gap:20px}
.dlsteps li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.dlsteps .n{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:700;color:#2563EB;padding-top:3px}
.dlsteps h3{font-size:17px;font-weight:800;margin-bottom:4px}
.dlsteps p{color:var(--mut);font-size:15px}

.dlboxes{display:flex;flex-direction:column;gap:22px}
.dlcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:0 12px 34px rgba(14,17,24,.12);display:flex;flex-direction:column;align-items:center;text-align:center}
.steplabel{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}

/* buttons (same recipe as the landing page) (ported as .dlbtn) */
.dlbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:3px solid transparent;background:linear-gradient(#0E1118,#0E1118) padding-box,var(--limb) border-box;color:#FFF;font-weight:700;font-size:17px;padding:15px 28px;border-radius:14px;text-decoration:none;width:100%;box-sizing:border-box;transition:transform .12s ease,box-shadow .12s ease;box-shadow:0 8px 26px rgba(14,17,24,.28)}
.dlbtn:hover{background:linear-gradient(#28304A,#1A2033) padding-box,var(--limb) border-box;transform:translateY(-2px);box-shadow:0 12px 34px rgba(14,17,24,.34)}
.dlbtn svg{width:19px;height:19px}
.dlbtn.discord{background:linear-gradient(#5865F2,#4752C4) padding-box,var(--limb) border-box}
.dlbtn.discord:hover{background:linear-gradient(#6a76ff,#5865F2) padding-box,var(--limb) border-box}

/* --- nav menu (native <details> disclosure, no JS) ------------------------- */
.navmid{display:flex;align-items:center;gap:20px;margin-left:auto;margin-right:20px}
.navmenu{position:relative}
.navmenu>summary{list-style:none;cursor:pointer;color:var(--mut);font-weight:600;font-size:15px}
.navmenu>summary::-webkit-details-marker{display:none}
.navmenu>summary::after{content:"▾";margin-left:5px;font-size:11px}
.navmenu>summary:hover{color:var(--ink)}
.navmenu-panel{position:absolute;top:calc(100% + 12px);left:-14px;min-width:180px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:7px;display:flex;flex-direction:column;
  box-shadow:0 14px 40px rgba(14,17,24,.18);z-index:60}
/* bridges the 12px gap under the summary — without it the pointer leaves the
   <details> on the way to the panel and the hover-open snaps shut */
.navmenu-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.navmenu-panel a{padding:9px 12px;border-radius:8px;color:var(--txt);text-decoration:none;font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.navmenu-panel a:hover{background:var(--paper2)}
/* unreleased products keep their nav entry but say so — driven by FleetItem.Released */
.navsoon{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--yellow);color:#0E1118;padding:2px 6px;border-radius:4px}
@media (max-width:860px){.navmid{display:none}}

/* --- product pages --------------------------------------------------------- */
/* every product page paints itself with --accent, set inline from product.json */
.phero{padding:60px 0 46px;border-bottom:1px solid var(--line)}
.pherotop{display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:center}
/* mark + title + badge are one unit: never wrap. The h1 is the only flexible
   item (min-width:0 lets it shrink and wrap its own text); mark and badge are
   flex:none, so the row always reads mark / title / badge on one line. */
.pname{display:flex;align-items:center;flex-wrap:nowrap;gap:18px;margin-bottom:18px}
.pname img{width:76px;height:76px;flex:none;filter:drop-shadow(0 6px 14px rgba(14,17,24,.16))}
.pname h1{font-size:clamp(34px,5.4vw,54px);font-weight:900;letter-spacing:-.02em;min-width:0}
.phero .lead{color:var(--mut);font-size:18.5px}
.pcta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
/* Embedded in the launcher: the CTA's slot, handed back to the host. Deliberately NOT button-shaped —
   the real control is 400px to the left in the app's own chrome, and a second thing that looks pressable
   would compete with it. Reads as a caption on the dashed rule that seals the hero. */
.phandoff{font-size:15px;color:var(--mut);border-top:1px dashed var(--rule);padding-top:16px;max-width:46ch}

/* Embed mode runs inside a panel that already has a title bar above it, so the hero's browser-sized top
   padding is dead space at the very moment the page has to prove itself. */
.embed .phero{padding:30px 0 38px}

/* feature chips beside the title */
.pchips{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}
.pchips li{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px 16px;font-size:15px;font-weight:600;color:var(--txt)}
.chip-ic{width:21px;height:21px;flex:none;color:var(--accent,var(--ink))}

/* spec strip: platform / type / access, straight under the hero. <dl> because
   that's what it is — three term-value pairs, not a list of features. */
.specstrip{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0 0;
  background:var(--paper2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.specstrip>div{display:flex;align-items:center;gap:13px;padding:15px 20px;border-right:1px solid var(--line)}
.specstrip>div:last-child{border-right:0}
.specstrip img,.spec-ic{width:36px;height:36px;flex:none}
/* Not the page accent: the kind glyph means the same thing on every product, so
   it stays ink and only flips with the theme. --ink already does that. */
.spec-ic{color:var(--ink)}
.specstrip dt{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut)}
.specstrip dd{margin:2px 0 0;font-weight:700;font-size:15px;color:var(--ink)}
@media (max-width:700px){
  .specstrip{grid-template-columns:1fr}
  .specstrip>div{border-right:0;border-bottom:1px solid var(--line)}
  .specstrip>div:last-child{border-bottom:0}
}

.pvideo{position:relative;margin-top:44px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:#0E1118;box-shadow:0 18px 50px rgba(14,17,24,.20)}
.pvideo video,.pvideo img{display:block;width:100%;height:auto;background:#0E1118}
/* coming-soon treatment: grey + dimmed so the stamp reads over any screenshot */
.pvideo.issoon{position:relative}
.pvideo.issoon video,.pvideo.issoon img{filter:grayscale(1) brightness(.5) contrast(.9)}
.soonstamp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.soonstamp span{font-family:"Roboto Slab",serif;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(22px,4.2vw,46px);color:#F4F1E8;text-shadow:0 6px 30px rgba(0,0,0,.65)}
.pvideo video{aspect-ratio:16/9}
/* play badge: sits above the poster but clear of the native controls bar, so
   clicking it never fights the scrubber underneath */
.playbtn{position:absolute;left:50%;top:calc(50% - 18px);transform:translate(-50%,-50%);
  width:88px;height:88px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.9);background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);box-shadow:0 10px 34px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transition:transform .18s ease,box-shadow .18s ease}
.playbtn svg{width:40px;height:40px;fill:currentColor;margin-left:4px}
.playbtn:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 14px 44px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:reduce){.playbtn{transition:none}.playbtn:hover{transform:translate(-50%,-50%)}}

/* staged rollout: unreleased products keep a page, but say so */
.csbadge{display:inline-block;background:var(--yellow);color:#0E1118;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px;border-radius:4px;
  transform:rotate(-2deg);box-shadow:0 2px 6px rgba(14,17,24,.15);align-self:center;
  /* flex:none + nowrap: as a .pname flex item it otherwise shrinks and breaks
     "Coming soon" over two lines */
  flex:none;white-space:nowrap}
.fm--soon{opacity:.5}
.comingsoon{text-align:center;padding:80px 0 96px}
.comingsoon h2{font-size:clamp(26px,3.6vw,36px);font-weight:900;margin-bottom:14px}
.comingsoon p{color:var(--mut);font-size:16.5px;max-width:560px;margin:0 auto 26px}
.comingsoon .micro{margin-top:16px}

@media (max-width:860px){
  .pherotop{grid-template-columns:1fr;gap:30px}
  .pchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}

.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:34px}
.pgrid article{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
/* margin on the p, not the h3, so title-only cards have no dangling gap */
.pgrid h3{font-size:19px;font-weight:800}
.pgrid p{color:var(--mut);font-size:15.5px;margin-top:9px}
.pgrid code{font-family:"IBM Plex Mono",monospace;font-size:13.5px;background:var(--paper2);padding:1px 5px;border-radius:5px}
.features>.wrap>h2,.plays h2,.specs h2{font-size:clamp(26px,3.6vw,36px);font-weight:900}
.features>.wrap>.lead,.plays>.wrap>.lead{color:var(--mut);font-size:17px;max-width:760px;margin-top:12px}

.plays{padding:72px 0}
.tips{margin-top:32px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
.tips h3{font-size:18px;font-weight:800;margin-bottom:12px}
.tips ul{list-style:none}
.tips li{color:var(--mut);font-size:15.5px;padding:7px 0;border-bottom:1px solid var(--line)}
.tips li:last-child{border-bottom:0}
.tips li b{color:var(--txt)}

.specs{padding:72px 0}
.specgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:28px}
.specgrid dt{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.specgrid dd{color:var(--mut);font-size:15.5px}
.specgrid dd b{color:var(--txt)}

/* the offer block sits on the dark .plus sheet, so its CTA inverts */
.plus .btn{background:linear-gradient(#F4F1E8,#F4F1E8) padding-box,var(--limb) border-box;color:#0E1118;margin-top:22px}
.plus .btn:hover{background:linear-gradient(#FFF,#EFEBE0) padding-box,var(--limb) border-box}
.plus .micro{color:#9BA0AD;margin-top:14px}

.riskstrip{padding:34px 0 56px}
.riskstrip p{color:var(--mut);font-size:13.5px;max-width:900px}
.riskstrip a{color:inherit;text-decoration:underline}

/* --- account page ---------------------------------------------------------- */
.acct{padding:56px 0 88px}
.accthero{max-width:640px;margin:0 auto 44px;text-align:center}
.accthero h1{font-size:clamp(32px,4.8vw,48px);font-weight:900;margin-bottom:12px}
.accthero .sub{color:var(--mut);font-size:17px}
.acctgrid{display:grid;grid-template-columns:320px 1fr;gap:36px;align-items:start}
@media (max-width:860px){.acctgrid{grid-template-columns:1fr;gap:26px}}
.acctside{display:flex;flex-direction:column;gap:18px}
.acctcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:0 12px 34px rgba(14,17,24,.10)}
.acctuser h2{font-size:18px;font-weight:800;margin-bottom:16px}
.acctprop{display:grid;gap:4px;margin-bottom:20px}
.acctprop dt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.acctprop dd{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--ink);word-break:break-word}
.mono{font-family:"IBM Plex Mono",monospace;font-size:14.5px}
.acctsignout{display:block;margin-top:18px;font-size:14px;color:var(--mut);text-decoration:underline}
.acctsignout:hover{color:var(--ink)}

.acctalert{border:1px solid var(--red);border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14.5px;color:var(--red)}
.acctempty{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:40px 26px;text-align:center;color:var(--mut)}
.acctempty p{margin-bottom:18px;font-size:16px}

.accttable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.accttable th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:500;padding:14px 18px;background:var(--paper2)}
.accttable td{padding:16px 18px;border-top:1px solid var(--line);font-size:15px;color:var(--mut);vertical-align:top}
.accttable td b{display:block;color:var(--ink);font-size:16px;font-weight:700}
.accttable tr.is-lapsed{opacity:.55}
.acctperiod{font-size:12.5px;color:var(--mut)}
.acctdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--mut)}
.acctdot[data-status=active],.acctdot[data-status=trialing]{background:var(--green);box-shadow:0 0 0 3px rgba(70,192,106,.2)}
.acctdot[data-status=past_due]{background:var(--yellow);box-shadow:0 0 0 3px rgba(244,196,48,.2)}
.acctdot[data-status=canceled],.acctdot[data-status=expired],.acctdot[data-status=refunded]{background:var(--red);box-shadow:0 0 0 3px rgba(230,57,70,.18)}
/* upgrade block: the one paid action on the page, so it outranks the licence
   table — dark sheet, same treatment the .plus section gets on marketing pages */
.acctupgrade{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;
  border-radius:16px;padding:26px 28px;margin-bottom:18px;color:#C7CBD6;
  background:radial-gradient(700px 380px at 10% -20%,rgba(37,99,235,.30),transparent 60%),
             radial-gradient(600px 340px at 95% 120%,rgba(230,57,70,.20),transparent 60%),#0B101E}
/* the mark is the only flex item that must not stretch or shrink */
.acctplusmark{width:64px;height:64px;flex:none;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.acctupgrade>div{flex:1 1 320px}
.acctupgrade .eyebrow{color:#9BA0AD;margin-bottom:8px}
.acctupgrade b{display:block;font-family:"Roboto Slab",serif;font-size:21px;font-weight:900;color:#fff;margin-bottom:8px}
.acctupgrade p{font-size:14.5px;max-width:52ch}
.acctupgrade .acctbuy{flex:none;text-align:center}
.acctupgrade .btn{background:linear-gradient(#F4F1E8,#F4F1E8) padding-box,var(--limb) border-box;color:#0E1118}
.acctupgrade .btn:hover{background:linear-gradient(#FFF,#EFEBE0) padding-box,var(--limb) border-box}
.acctupgrade .micro{color:#9BA0AD}

.acctdeliver{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-bottom:18px}
.acctdeliver b{display:block;font-size:16.5px;color:var(--ink);font-weight:700;margin-bottom:4px}
.acctdeliver p{font-size:14.5px;color:var(--mut);max-width:46ch}
.acctupgrade{margin:22px 0 0}
/* the table is the one thing that can't reflow below ~560px — let it scroll */
@media (max-width:560px){
  .acctmain{overflow-x:auto}
  .accttable{min-width:520px}
}

/* legal pages */
.legal{padding:64px 0 96px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(30px,4.6vw,44px);font-weight:900;margin-bottom:28px}
.legal h2{font-size:22px;font-weight:800;margin:36px 0 10px}
.legal p,.legal li{color:var(--mut);font-size:15.5px;margin:10px 0}
/* prose links: old-web blue underline (Phil's rule for article content) */
.legal a{color:#0000ee;text-decoration:underline}
.legal a:visited{color:#551a8b}
.legal a:active{color:#ee0000}
[data-theme=dark] .legal a{color:#8ab4f8}
[data-theme=dark] .legal a:visited{color:#c58af9}

/* contact form: fields reuse .signup-input / .signup-btn--email from the funnel */
.cform{display:flex;flex-direction:column;gap:16px;margin:26px 0 32px}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.cform-row{grid-template-columns:1fr}}
.cform label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--txt)}
.cform-opt{font-weight:400;color:var(--mut)}
.cform textarea.signup-input{resize:vertical;line-height:1.5}
.cform-send{width:auto;padding-inline:30px}
/* honeypot: in the DOM and fillable by bots, invisible to everyone else */
.cform-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px;padding:0}