/* ============================================================
   KONVERSED — pre-launch teaser
   Typography carried from getkonversed.com:
   New Grotesk Square Six (display, all-caps) + Proxima Nova (body).
   Self-hosted, so the page makes zero external requests.

   ⚠ VERSIONED FILE. Served immutable/1yr via netlify.toml.
   NEVER edit this in place once deployed — copy to .v14 and update
   the <link> in index.html, terms.html AND privacy.html.
   ============================================================ */

@font-face{
  font-family:'New Grotesk Sq';
  src:url('../fonts/new-grotesk-sq-six.woff2') format('woff2'),
      url('../fonts/new-grotesk-sq-six.woff') format('woff');
  font-weight:normal;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Proxima Nova';
  src:url('../fonts/proximanova.woff2') format('woff2'),
      url('../fonts/proximanova.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Proxima Nova';
  src:url('../fonts/proximanova-sbold.woff2') format('woff2'),
      url('../fonts/proximanova-sbold.woff') format('woff');
  font-weight:600;font-style:normal;font-display:swap;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#08080b;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.26);
  --white:#f6f6fb;
  --dim:#a6a6b4;
  --dim-2:#7c7c8a;   /* 4.86:1 on --bg. #747482 measured 4.35 — below AA for small text. */
  --peri:#818cf8;
  --violet:#a78bfa;
  --pink:#ec4899;
  --grad:linear-gradient(115deg,#818cf8 0%,#a78bfa 45%,#ec4899 100%);
  --display:'New Grotesk Sq','Arial Narrow',Impact,sans-serif;
  --sans:'Proxima Nova',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  /* Type scale. Eight sizes were rendering on the home page, three of them
     visually identical, because each rule carried its own clamp() and they
     drifted apart at different widths. Four steps, referenced everywhere. */
  --t-micro:clamp(9.5px,.72vw,11px);    /* eyebrow, awards label, overlines */
  --t-label:clamp(11.5px,.86vw,13px);   /* field labels */
  --t-small:clamp(12.5px,.94vw,13.8px); /* notes, consent copy, fine print */
  --t-body:clamp(15px,1.02vw,17px);     /* form values, body */

  /* One radius for every rectangular control. The pill is reserved for the
     primary action and is the only deliberate exception. */
  --r-control:10px;
  --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.5rem,6vw,6rem);
  /* The nav sits above .wrap, so a 100svh hero overflows by exactly the nav's
     height. Measured 61.5 / 58.1 / 52.1px at 1440 / 1024 / 834. */
  --nav-h:80px;
  /* Prose-shaped blocks. The sub-pages have nothing to put in a 1180px frame,
     so a 46%-wide column inside one reads as an unfinished second column. */
  --rail:820px;

  /* Vertical rhythm scale. The hero previously used five near-identical
     clamps (all 2.8–3.4vh) which resolved into a 21% band — no grouping, so a
     label sat as far from its heading as the heading sat from the paragraph. */
  --sp-1:clamp(.7rem,1.5vh,1.05rem);   /* bind a label to what it labels */
  --sp-2:clamp(1.35rem,2.9vh,2rem);    /* within a group */
  --sp-3:clamp(1.9rem,3.9vh,2.7rem);   /* between groups */
  --sp-4:clamp(2.4rem,4.6vh,3.4rem);   /* before the CTA */

  /* Prose column. Text is capped for readability, so its CONTAINERS must be
     capped to match — otherwise a full-width box holds half-width text and
     the empty half reads as a mistake. Structural elements (matrices, tiers,
     the form) deliberately use the full shell. */
  --measure:33rem;   /* ~73 chars/line, measured. 44rem gave 98 — too wide. */
}

/* ---- ORPHAN CONTROL -----------------------------------------------------
   Standing rule: this block goes in the base stylesheet before any content.
   balance  = short blocks of 2-3 lines (headings, labels, captions, notes)
   pretty   = long-form prose
   Measured on the rendered output at 1440 / 820 / 390, not by eye. */
h1,h2,h3,h4,summary,
.eyebrow,.lede,.lead,.updated,.signup-label,.awards-label,
.note,.hint,.consent-t,.notice-h,.msg,
.fld label,.ack span{text-wrap:balance}

p,li,blockquote,.acc-body p,.acc-body li{text-wrap:pretty}

/* `pretty` still leaves stubby last lines on short blocks. Anything measured
   under ~30% of its widest line moves to balance. */
.acc-body p,.acc-body li,.notice li,.legal li,.legal .lead{text-wrap:balance}


html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  font-size:clamp(15px,1.02vw,17px);
  min-height:100svh;
}
::selection{background:rgba(129,140,248,.35);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:focus-visible{outline:2px solid var(--peri);outline-offset:3px}

/* Uppercase micro-labels. Measured: New Grotesk Sq has cap height 0.700em and
   caps carry no descender (0.01em), and its ascent/descent are symmetric — so
   caps optically self-centre in the line box at ANY line-height. Leading buys
   no centring here, it is pure dead height: at 10px, 1.6 gave a 16px box for
   7px of ink. Set to 1 and control wrap spacing with explicit flex gaps. */
.eyebrow,.specs,.signup-label,.gap-label,footer,.acc-toggle,.acc-count,.back{
  line-height:1;
}

/* ── hero backdrop: fixed + clipped so it can never cause h-scroll ── */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Slightly oversized + offset so the astronaut sits clear in the right third
   rather than under the headline. The overflow is clipped by .bg-layer. */
.bg-layer img{
  /* Anchored to the left edge so the photograph runs full bleed; the extra
     width (not a left offset) is what carries the astronaut into the right
     third. A left offset left a black strip down the side. */
  position:absolute;top:-6%;left:0;width:124%;height:112%;
  object-fit:cover;object-position:48% 46%;
}
/* Scrim carries the copy: opaque at the left edge, and lifts off early so the
   astronaut reads as a subject, not a smudge. Gradient stops only — never
   filter:blur() (kills mobile GPU). */
.scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#08080b 0%,rgba(8,8,11,.92) 22%,rgba(8,8,11,.60) 40%,rgba(8,8,11,.14) 58%,rgba(8,8,11,0) 74%),
    linear-gradient(180deg,rgba(8,8,11,.92) 0%,rgba(8,8,11,.66) 7%,rgba(8,8,11,.10) 24%,rgba(8,8,11,.10) 64%,rgba(8,8,11,.80) 100%);
}
.tint{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 12% 42%,rgba(129,140,248,.14) 0%,rgba(129,140,248,.05) 40%,rgba(129,140,248,0) 70%);
}

/* ── top navigation ──────────────────────────────────────────
   Shared across all four pages. Replaces the per-page brand/back
   header, which gave no way to move between pages.
   ──────────────────────────────────────────────────────────── */
.topnav{
  position:relative;z-index:5;
  /* Sits ON the photograph, not on a bar above it — the image runs full bleed
     to the top edge. Mirrors the footer's treatment, deliberately without the
     footer's hairline: a rule under the header reads as a lid on the image. */
  background:none;
  border-bottom:0;
}
.topnav-in{
  max-width:calc(1180px + 2 * var(--pad));margin:0 auto;
  padding:clamp(.8rem,1.6vw,1.1rem) var(--pad);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);
}
.topnav-brand{flex:none;line-height:0}
.topnav-brand img{width:clamp(104px,10vw,142px);height:auto}
.topnav-links{
  display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.9rem);
  flex-wrap:wrap;margin-left:auto;
}
.topnav-links a{
  font-family:var(--display);font-size:clamp(10px,.76vw,11.5px);line-height:1;
  letter-spacing:.16em;text-transform:uppercase;
  /* Brighter than --dim: these sit on photography, where the background can
     be considerably lighter than the flat page colour. Measured, not guessed. */
  color:#c4c4d0;
  padding:.45rem 0;position:relative;
  display:flex;align-items:center;min-height:44px;
  transition:color .3s var(--ease);
}
.topnav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(50% - .85em);height:1px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.topnav-links a:hover{color:var(--white)}
.topnav-links a:hover::after{transform:scaleX(1)}
.topnav-links a.on{color:var(--white)}
.topnav-links a.on::after{transform:scaleX(1)}

@media (max-width:700px){
  .topnav-in{flex-wrap:wrap;gap:.35rem 1rem;padding-top:.7rem;padding-bottom:.35rem}
  /* flex:0 0 100% — a flex item with width:100% can still SHRINK, which
     squeezed this to 222px and wrapped the four links onto two rows. */
  .topnav-links{gap:.85rem;order:3;flex:0 0 100%;
    padding-top:.35rem;border-top:1px solid var(--line)}
  :root{--nav-h:92px}
}
@media (prefers-reduced-motion:reduce){
  .topnav-links a,.topnav-links a::after{transition:none}
}

/* ── shell ── */
.wrap{
  position:relative;z-index:1;
  max-width:calc(1180px + 2 * var(--pad));margin:0 auto;
  min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;
  padding:clamp(1.4rem,3.4vw,2.4rem) var(--pad) clamp(1.1rem,1.8vw,1.5rem);
  /* 3.0vh not 3.4vh: closes the last 4px of overflow on short laptop windows
     (1440x700) without shrinking the display type to do it. */
  gap:clamp(1.4rem,3vh,2.8rem);
}

/* ── top bar ── */
.top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand img{width:clamp(122px,12vw,168px);height:auto}

/* ── hero ── */
main{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:1180px;width:100%}

.eyebrow{
  font-family:var(--display);font-size:var(--t-micro);
  letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
  margin-bottom:var(--sp-1);
}

h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  /* height-aware so short laptop viewports keep the signup above the fold */
  font-size:clamp(2.5rem,min(7.4vw,11.4vh),6.4rem);
  line-height:.86;letter-spacing:.005em;
  margin-bottom:var(--sp-2);
  /* WebKit paints text-shadow THROUGH a background-clip:text glyph, which
     hard-edges the white lines and muddies the gradient. filter:drop-shadow
     composites the rendered result instead and matches across engines. */
  filter:drop-shadow(0 2px 26px rgba(8,8,11,.5));
}
h1 .l{display:block}

.lede{
  font-size:clamp(1.02rem,1.6vw,1.34rem);
  color:var(--dim);max-width:50ch;line-height:1.5;
  margin-bottom:var(--sp-3);
}
.lede strong{color:var(--white);font-weight:600}

/* ── the air gap: a signal travels the wire and dies at the break ── */
.airgap{
  display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.2rem);
  margin-bottom:var(--sp-1);max-width:760px;
}
.wire{position:relative;height:1px;overflow:hidden;flex:none}
.wire::before{content:"";position:absolute;inset:0;background:var(--line-2)}
.wire-in{width:clamp(90px,22vw,270px)}
.wire-out{width:clamp(60px,16vw,190px);opacity:.42}
.pulse{
  position:absolute;top:0;left:0;height:1px;width:64px;
  background:linear-gradient(90deg,rgba(129,140,248,0),#a78bfa 55%,rgba(236,72,153,0));
  animation:travel 3.4s cubic-bezier(.4,0,.75,.35) infinite;
}
@keyframes travel{
  0%{transform:translateX(-64px);opacity:0}
  12%{opacity:1}
  74%{opacity:1}
  86%,100%{transform:translateX(var(--run,270px));opacity:0}
}
.cap{width:1px;height:11px;background:rgba(255,255,255,.3);flex:none}
.gap-label{
  font-family:var(--display);font-size:clamp(9.5px,.7vw,11px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
}

/* ── spec strip ── */
.specs{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.85rem clamp(.9rem,2.2vw,1.7rem);
  font-family:var(--display);font-size:clamp(10px,.76vw,11.5px);
  letter-spacing:.17em;text-transform:uppercase;color:var(--dim);
  margin-bottom:var(--sp-3);
}
.specs span{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.7rem)}
.specs span::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--dim-2);flex:none}
.specs span:last-child::after{display:none}

/* ── signup ── */
.signup{max-width:480px;width:100%}
.signup-label{
  font-family:var(--display);font-size:var(--t-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:.8rem;
}
form{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--line-2);padding-bottom:.7rem;transition:border-color .4s var(--ease)}
form:focus-within{border-color:rgba(129,140,248,.8)}
input[type=email]{
  flex:1;min-width:0;background:none;border:none;outline:none;
  font-family:var(--sans);font-size:clamp(.98rem,1.16vw,1.08rem);color:var(--white);padding:.15rem 0;
}
input[type=email]::placeholder{color:var(--dim-2)}
input[type=email]:-webkit-autofill{-webkit-text-fill-color:var(--white);-webkit-box-shadow:0 0 0 60px #0a0a10 inset;caret-color:var(--white)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

button{
  flex:none;cursor:pointer;border:none;border-radius:999px;background:var(--grad);color:#0b0b12;
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.68rem 1.35rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .25s ease;
}
button:hover{transform:translateY(-1px);box-shadow:0 8px 26px -8px rgba(129,140,248,.6)}
button:active{transform:translateY(0)}
button:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}

.note{font-size:var(--t-small);color:var(--dim-2);margin-top:.85rem;line-height:1.5}
.msg{font-size:.92rem;margin-top:.9rem;min-height:1.2em;line-height:1.5}
.msg.ok{color:var(--peri)}
.msg.err{color:#f0849f}

/* ── footer ── */
footer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.5rem;
  font-family:var(--display);font-size:clamp(10px,.72vw,11px);
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim-2);
  border-top:1px solid var(--line);padding-top:clamp(1.1rem,2.4vw,1.5rem);
}
.f-links{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem}
footer a{transition:color .3s ease}
footer a:hover{color:var(--white)}

/* ── entrance ── */
.rv{opacity:0;transform:translateY(18px);animation:rv .95s var(--ease) forwards}
@keyframes rv{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}
.d4{animation-delay:.38s}.d5{animation-delay:.49s}.d6{animation-delay:.6s}
.d7{animation-delay:.71s}.d8{animation-delay:.82s}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;animation:none}
  .pulse,  .pulse{opacity:.55}
}

@media (max-width:820px){
  /* Portrait crops to a narrow vertical slice, so re-centre on the astronaut
     and switch the scrim to a vertical one that clears his upper body. */
  .bg-layer img{top:0;left:0;width:100%;height:100%;object-position:64% 30%}
  .scrim{
    background:linear-gradient(180deg,rgba(8,8,11,.58) 0%,rgba(8,8,11,.30) 20%,rgba(8,8,11,.74) 46%,rgba(8,8,11,.95) 62%,#08080b 78%);
  }
}
@media (max-width:700px){
  .airgap{gap:.7rem}
  footer{justify-content:flex-start}
  .specs span::after{display:none}
  .specs{gap:.85rem 1.35rem}
}

/* ============================================================
   LEGAL PAGES (terms.html / privacy.html)
   ============================================================ */
/* Same shell as the home page: full-bleed padding, 1180px content cap,
   left-aligned. Reading measure is controlled on the text itself
   (below) rather than by squeezing the whole page. */
.legal{position:relative;z-index:1;max-width:calc(var(--rail) + 2 * var(--pad));margin:0 auto;padding:clamp(1.4rem,3.4vw,2.4rem) var(--pad) 5rem}
.legal-top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2.4rem,6vw,4rem)}
.back{
  font-family:var(--display);font-size:clamp(10px,.74vw,11.5px);
  letter-spacing:.19em;text-transform:uppercase;color:var(--dim);transition:color .3s ease;
}
.back:hover{color:var(--white)}
.legal h1{
  font-size:clamp(2rem,5.2vw,3.6rem);margin-bottom:.6rem;text-shadow:none;
}
.legal .updated{
  font-family:var(--display);font-size:var(--t-micro);letter-spacing:.19em;
  line-height:1;text-transform:uppercase;color:var(--dim-2);margin-bottom:clamp(2rem,5vw,3rem);
  padding-bottom:clamp(1.4rem,3vw,2rem);border-bottom:1px solid var(--line);
;max-width:none}
.legal h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.95rem,1.5vw,1.15rem);letter-spacing:.06em;color:var(--white);
  line-height:1.15;margin:3rem 0 1rem;
}
.legal h2:first-of-type{margin-top:0}
.legal p:not(.updated):not(.acc-group),.legal li{max-width:var(--measure)}
.legal > p{max-width:var(--measure)}
.legal p{color:var(--dim);margin-bottom:1.6rem;font-size:clamp(.94rem,1.06vw,1rem);line-height:1.66}
.legal ul{list-style:none;margin:0 0 1.6rem}
.legal li{
  color:var(--dim);margin-bottom:.85rem;padding-left:1.15rem;position:relative;
  font-size:clamp(.94rem,1.06vw,1rem);line-height:1.66;
}
.legal li::before{content:"";position:absolute;left:0;top:.82em;width:4px;height:1px;background:var(--dim-2)}
/* Body links inside prose are periwinkle and underlined. The footer is not
   prose: it must match the home page footer exactly on every page. */
.legal a:not(footer a):not(.brand){color:var(--peri);text-decoration:underline;text-underline-offset:3px}
.legal footer a{color:var(--dim-2);text-decoration:none}
.legal footer a:hover{color:var(--white)}
.legal footer{margin-top:4rem}

/* ── accordion ─────────────────────────────────────────────
   Native <details>, so every section is readable, linkable and
   printable even if the JS never runs. */
.acc-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:2.4rem 0 .4rem;
}
.acc-toggle{
  background:none;border:1px solid var(--line-2);border-radius:999px;color:var(--dim);
  font-family:var(--display);font-size:clamp(10px,.72vw,11px);letter-spacing:.16em;
  text-transform:uppercase;padding:.5rem 1rem;cursor:pointer;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.acc-toggle:hover{color:var(--white);border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04)}
.acc-count{
  font-family:var(--display);font-size:clamp(10px,.72vw,11px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-2);
}

.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1px solid var(--line)}

.acc summary{
  display:flex;align-items:flex-start;gap:1rem;
  list-style:none;cursor:pointer;
  padding:1.15rem 0;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.9rem,1.4vw,1.05rem);letter-spacing:.05em;color:var(--dim);
  /* All-caps has no descenders, so body leading (1.6) leaves a visible gap
     under a one-line heading and makes a wrapped one look double-spaced. */
  line-height:1.15;
  transition:color .25s ease;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--white)}
.acc details[open] > summary{color:var(--white)}

/* chevron, drawn in CSS so there is no icon font to load */
.acc summary::after{
  content:"";flex:none;margin-left:auto;
  width:8px;height:8px;margin-top:.42em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.acc details[open] > summary::after{transform:rotate(-135deg)}

.acc .acc-body{padding:0 0 1.6rem}
.acc .acc-body > :last-child{margin-bottom:0}

/* Group label: a heading in the source that captions the sections beneath it
   rather than owning clauses of its own. Not collapsible — there is nothing
   inside it to collapse.
   Scoped under .legal so it outranks `.legal p`, which would otherwise win on
   specificity and render this as a body paragraph. */
.legal .acc-group{
  font-family:var(--display);font-size:clamp(10px,.72vw,11px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);
  padding:1.9rem 0 .55rem;border-bottom:1px solid var(--line);
}

@media (prefers-reduced-motion:reduce){
  .acc summary::after{transition:none}
}

/* A collapsed clause must never be a clause the reader didn't get. The JS opens
   every section on beforeprint; this is the no-JS fallback. */
@media print{
  .acc details > .acc-body{display:block !important}
  .acc summary::after,.acc-bar,.back,.bg-layer{display:none !important}
  .acc details{break-inside:avoid}
  body{background:#fff;color:#000}
  .legal p,.legal li,.acc summary,.acc-group{color:#000}
}

/* Legal pages keep the brand atmosphere but not the photo — the copy is long
   and the astronaut competes with 19k characters of licence text. */
body.legal-page .bg-layer img,body.legal-page .scrim{display:none}
body.legal-page .tint{background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(129,140,248,.13) 0%,rgba(129,140,248,.04) 42%,rgba(129,140,248,0) 72%)}

/* ============================================================
   INVESTOR INTEREST (investors.html)

   Register is deliberately institutional — closer to a transaction
   portal than to the marketing hero. The brand gradient is used only
   as a hairline accent; status is carried by weight and rule, never
   by a reassuring colour.
   ============================================================ */

body.investor-page .bg-layer img,body.investor-page .scrim{display:none}
body.investor-page .tint{
  background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(129,140,248,.10) 0%,rgba(129,140,248,.03) 45%,rgba(129,140,248,0) 72%);
}

.inv{position:relative;z-index:1;max-width:calc(1180px + 2 * var(--pad));margin:0 auto;padding:clamp(1.4rem,3.4vw,2.4rem) var(--pad) 5rem}

.inv section{margin-top:clamp(3.2rem,7vw,5.5rem)}
.inv h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.85rem,4.4vw,3.4rem);line-height:.92;letter-spacing:.01em;
  color:var(--white);text-shadow:none;margin-bottom:0;max-width:18ch;
}
.inv h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.6rem);letter-spacing:.04em;line-height:1.15;
  color:var(--white);margin-bottom:.9rem;
}
.inv h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.86rem,1.2vw,.98rem);letter-spacing:.08em;line-height:1.2;
  color:var(--white);margin:2rem 0 .7rem;
}
.inv p,.inv h2,.inv h3,.inv .kicker{max-width:var(--measure)}
.inv p{color:var(--dim);line-height:1.66;margin-bottom:1.1rem}
.inv .notice,.inv .worked{max-width:var(--measure)}
/* full-width by design — these are structure, not prose */
/* Prose-shaped blocks ride the rail; only .axes and .worked genuinely fill
   the 1180 frame (their ink reaches the edge), so they stay full width. */
/* NB: .inv p is deliberately NOT here — paragraphs keep --measure (~73 chars).
   The rail governs the BLOCKS that hold prose, not the prose itself. */
.inv > .kicker,.inv h1,.inv .notice,.inv .tiers,.inv .form-wrap,.inv .fbar{max-width:var(--rail)}
.inv .axes,.inv .worked,.inv .rail,.inv .rule{max-width:none}
.inv p.lead{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--white);line-height:1.55;max-width:44ch}
.inv .kicker{
  font-family:var(--display);font-size:clamp(10px,.74vw,11.5px);line-height:1;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim-2);margin-bottom:1rem;
}
.inv .rule{height:1px;background:var(--line);margin:clamp(2.4rem,5vw,3.6rem) 0}

/* ── the non-solicitation block: the most load-bearing copy on the page ── */
.notice{
  border:1px solid var(--line-2);border-left:2px solid var(--peri);
  padding:clamp(1.2rem,2.6vw,1.8rem);margin:1.6rem 0;background:rgba(255,255,255,.018);
}
.notice .notice-h{
  font-family:var(--display);font-size:clamp(10px,.74vw,11.5px);line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:var(--peri);margin-bottom:1rem;
}
.notice ul{list-style:none}
.notice li{
  color:var(--dim);line-height:1.6;padding-left:1.4rem;position:relative;margin-bottom:.6rem;
  font-size:clamp(.92rem,1.04vw,.98rem);
}
.notice li:last-child{margin-bottom:0}
.notice li::before{content:"—";position:absolute;left:0;color:var(--dim-2)}
.notice p:last-child{margin-bottom:0}

/* ── the axis matrix: the whole point of the page ── */
.axes{border-top:1px solid var(--line-2);margin-top:1.8rem}
.axis{
  display:grid;grid-template-columns:1.15fr 2fr auto;gap:1rem clamp(1rem,2.4vw,2rem);
  align-items:start;padding:1.15rem 0;border-bottom:1px solid var(--line);
}
.axis-n{
  font-family:var(--display);font-size:clamp(.84rem,1.1vw,.95rem);line-height:1.25;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--white);
}
.axis-n small{
  display:block;font-family:var(--sans);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:.78rem;color:var(--dim-2);margin-top:.3rem;line-height:1.4;
}
.axis-q{color:var(--dim);font-size:clamp(.9rem,1.02vw,.97rem);line-height:1.6}
.axis-s{
  font-family:var(--display);font-size:clamp(9.5px,.7vw,10.5px);line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);
  border:1px solid var(--line-2);padding:.42rem .6rem;white-space:nowrap;
}
@media (max-width:680px){
  .axis{grid-template-columns:1fr;gap:.5rem}
  .axis-s{justify-self:start}
}

/* Worked example — the Gmail / $500M family office case */
.worked{border:1px solid var(--line-2);padding:clamp(1.2rem,2.6vw,1.8rem);margin-top:1.8rem}
.worked-h{
  font-family:var(--display);font-size:clamp(10px,.74vw,11.5px);line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:1.1rem;
}
.wrow{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--line);
  font-size:clamp(.88rem,1vw,.95rem);
}
.wrow:last-of-type{border-bottom:none}
.wrow .k{color:var(--dim)}
.wrow .v{
  font-family:var(--display);font-size:clamp(9.5px,.7vw,10.5px);line-height:1;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.v.pass{color:#7fd1a8}
.v.fail{color:#f0849f}
.v.na{color:var(--dim-2)}
.worked-out{
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line-2);
  font-family:var(--display);font-size:clamp(.82rem,1.05vw,.92rem);line-height:1.3;
  letter-spacing:.06em;text-transform:uppercase;color:var(--white);
}
.worked-out span{color:var(--dim-2);display:block;font-family:var(--sans);font-size:.82rem;
  letter-spacing:0;text-transform:none;margin-top:.5rem;line-height:1.5}

/* ── gates + access tiers ── */
.tiers{border-top:1px solid var(--line-2);margin-top:1.6rem}
.tier{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(1rem,2.4vw,2rem);
  padding:1.05rem 0;border-bottom:1px solid var(--line)}
.tier-l{
  font-family:var(--display);font-size:clamp(9.5px,.72vw,11px);line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);padding-top:.2rem;min-width:5.5rem;
}
.tier-b strong{
  display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(.82rem,1.05vw,.92rem);letter-spacing:.06em;color:var(--white);line-height:1.25;margin-bottom:.35rem;
}
.tier-b span{color:var(--dim);font-size:clamp(.88rem,1vw,.95rem);line-height:1.6}

/* ── process rail ── */
.rail{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.rail div{
  border:1px solid var(--line);padding:.7rem .85rem;flex:1 1 auto;min-width:8.5rem;
  font-family:var(--display);font-size:clamp(9.5px,.7vw,10.5px);line-height:1.35;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.rail div b{display:block;color:var(--dim-2);font-weight:400;margin-bottom:.4rem}
.rail div.g2{border-style:dashed;color:var(--dim-2)}

/* ── form ────────────────────────────────────────────────────
   Field system ported from the StayCertified onboarding flow
   (staycertified-final.html): rounded surfaces, segmented Yes/No,
   selectable option cards, gradient progress fill, sticky confirm bar.
   Palette re-cut for the dark shell — SC's green/mint does not travel.
   Governing idea carried over: confirm from options, don't type from scratch.
   ──────────────────────────────────────────────────────────── */
.form-wrap{margin-top:1.8rem}
.fstep{display:none}
.fstep.on{display:block;animation:rv .5s var(--ease) both}

/* progress: track + gradient fill + step counter */
.fbar{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--bg) 68%,rgba(8,8,11,0));padding:1.1rem 0 1.3rem;margin-bottom:.4rem}
.track{height:4px;border-radius:3px;background:var(--line-2);overflow:hidden}
.fill{height:100%;border-radius:3px;background:var(--grad);width:20%;transition:width .55s var(--ease)}
.fmeta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.75rem;
  font-family:var(--display);font-size:clamp(9.5px,.72vw,10.5px);line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2)}
.fmeta .eta{color:var(--dim-2)}

.fstep-h{
  font-family:var(--display);font-size:clamp(10px,.74vw,11.5px);line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);margin-bottom:1.6rem;
}
.fld{margin-bottom:1.6rem}
.fld > label,.fld .q{
  display:block;color:var(--white);font-size:clamp(.94rem,1.06vw,1.01rem);
  line-height:1.5;margin-bottom:.6rem;
}
.fld .hint{color:var(--dim-2);font-size:.82rem;line-height:1.5;margin-top:.55rem}
.req{color:var(--peri)}

.inv input[type=text],.inv input[type=email],.inv input[type=tel],.inv input[type=url],
.inv input[type=number],.inv select,.inv textarea{
  width:100%;background:rgba(255,255,255,.035);border:1px solid var(--line-2);border-radius:12px;
  color:var(--white);font-family:var(--sans);font-size:1rem;line-height:1.5;
  padding:.82rem 1rem;outline:none;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.inv textarea{min-height:7rem;resize:vertical}
.inv select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%239a9aa8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.6rem}
.inv select option{background:#12121a;color:var(--white)}
.inv input:focus,.inv select:focus,.inv textarea:focus{
  border-color:rgba(129,140,248,.85);background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(129,140,248,.13);
}
.inv input::placeholder,.inv textarea::placeholder{color:var(--dim-2)}

/* segmented Yes / No */
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{
  display:block;padding:.72rem 1.7rem;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);line-height:1;
  transition:background .25s ease,color .25s ease;
}
.seg label + label span{border-left:1px solid var(--line-2)}
.seg span:hover{color:var(--white);background:rgba(255,255,255,.04)}
.seg input:checked + span{background:var(--white);color:#0b0b12}
.seg input:focus-visible + span{outline:2px solid var(--peri);outline-offset:2px}

/* selectable option cards — two-up, tick box, whole card is the target */
.optgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.6rem}
.optc{position:relative}
.optc input{position:absolute;opacity:0;width:0;height:0}
.optc span.card{
  display:flex;align-items:center;gap:.75rem;
  border:1px solid var(--line-2);border-radius:12px;padding:.82rem .9rem;cursor:pointer;
  background:rgba(255,255,255,.025);color:var(--dim);
  font-size:.93rem;line-height:1.35;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.optc span.card::before{
  content:"";flex:none;width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--line-2);
  background:no-repeat center/12px 9px;
  transition:border-color .25s ease,background-color .25s ease;
}
.optc span.card:hover{border-color:rgba(255,255,255,.32);color:var(--white)}
.optc input:checked + span.card{
  border-color:rgba(129,140,248,.75);background:rgba(129,140,248,.09);color:var(--white);
}
.optc input:checked + span.card::before{
  border-color:var(--peri);background-color:var(--peri);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b12' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.optc input:focus-visible + span.card{outline:2px solid var(--peri);outline-offset:3px}

/* conditional reveal */
.cond{display:none}
.cond.on{display:block;animation:rv .45s var(--ease) both}

/* acknowledgement rows */
.ack{
  display:flex;gap:.85rem;align-items:flex-start;margin-bottom:.6rem;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;padding:.85rem .95rem;
  background:rgba(255,255,255,.018);
  transition:border-color .25s ease,background .25s ease;
}
.ack:hover{border-color:rgba(255,255,255,.26)}
.ack:has(input:checked){border-color:rgba(129,140,248,.5);background:rgba(129,140,248,.06)}
.ack input{margin-top:.2rem;flex:none;width:16px;height:16px;accent-color:var(--peri)}
.ack span{color:var(--dim);font-size:clamp(.87rem,.98vw,.93rem);line-height:1.6}
.ack:has(input:checked) span{color:var(--white)}

/* sticky confirm bar */
.fnav{
  position:sticky;bottom:0;z-index:20;
  display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
  margin-top:2.4rem;padding:1.1rem 0 1.3rem;
  background:linear-gradient(0deg,var(--bg) 62%,rgba(8,8,11,0));
}
.fnav .grow{flex:1}
.btn-ghost{
  background:none;border:1px solid var(--line-2);color:var(--dim);border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.82rem 1.3rem;cursor:pointer;line-height:1;
  transition:color .3s ease,border-color .3s ease;
}
.btn-ghost:hover{color:var(--white);border-color:rgba(255,255,255,.45)}
.btn-next{
  border:none;border-radius:999px;background:var(--grad);color:#0b0b12;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.9rem 1.9rem;line-height:1;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .25s ease;
}
.btn-next:hover{transform:translateY(-1px);box-shadow:0 8px 26px -8px rgba(129,140,248,.6)}
.btn-next:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
@media (max-width:560px){
  .fnav{flex-direction:row-reverse;justify-content:flex-end}
  .fnav .grow{display:none}
  .btn-next{flex:1}
}

/* domain routing notice — neutral wording, never accusatory */
.droute{display:none;border:1px solid var(--line-2);border-left:2px solid var(--peri);border-radius:12px;
  padding:1rem 1.1rem;margin-top:.8rem;background:rgba(129,140,248,.05)}
.droute.on{display:block;animation:rv .45s var(--ease) both}
.droute b{
  display:block;font-family:var(--display);font-size:clamp(9.5px,.72vw,10.5px);line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--peri);margin-bottom:.55rem;
}
.droute span{color:var(--dim);font-size:.88rem;line-height:1.6;display:block}

.err{color:#f0849f}

/* Salvaged from the superseded duplicate block before it was removed. */
.done-panel{display:none}
.done-panel.on{display:block;animation:rv .6s var(--ease) both}
/* ── award marks ─────────────────────────────────────────────
   Sits in the hero between the lede and the air gap, where it is
   actually seen. Five marks: three ship an official monochrome
   vector and render white; the 2025 and 2026/27 badges exist only
   as colour raster; they are tonal knockouts of the original artwork
   (reproduction, not redraw). CorporateLiveWire APPROVED the reversed
   marks — confirmed by Brett 10 Aug 2026. No further clearance needed.
   ──────────────────────────────────────────────────────────── */
.awards{margin-bottom:var(--sp-2)}
.awards-row{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(1rem,2.6vw,2.2rem);
}
.awards-row img{
  height:clamp(52px,6vw,84px);width:auto;
  opacity:.9;
  transition:opacity .4s var(--ease);
}
.awards-row img:hover{opacity:1}
/* Circular marks read optically smaller than the stacked-text ones at equal
   height, because their content is inset from the disc edge. Nudge up. */
/* Measured ink coverage: 14-21% for the three vectors vs 38-63% for the two
   rasters. Enlarging the heavy ones made the mismatch worse — shrink instead. */
.awards-row img.aw-round{height:calc(clamp(52px,6vw,84px) * .88);opacity:.78}
.awards-label{
  font-family:var(--display);font-size:var(--t-micro);line-height:1;
  letter-spacing:.19em;text-transform:uppercase;color:var(--dim-2);
  margin-bottom:clamp(.7rem,1.5vh,1rem);
}
@media (prefers-reduced-motion:reduce){ .awards-row img{transition:none} }
@media (max-width:560px){
  /* Five across at phone width renders the wordmarks illegibly small.
     Let the row wrap and keep each mark readable instead. */
  /* 5 across wraps 4+1, orphaning the last mark. Grid keeps 3+2. */
  .awards-row{display:grid;grid-template-columns:repeat(3,1fr);
    justify-items:center;align-items:center;gap:1.1rem .85rem}
  .awards-row img{height:52px}
  .awards-row img.aw-round{height:46px}
}

/* Short desktop windows: the award row costs ~135px of hero height. Rather
   than shrink the marks at every size, compress the vertical rhythm only
   where headroom is actually scarce. */
@media (min-width:700px) and (max-height:840px){
  :root{
    --sp-1:clamp(.5rem,1vh,.75rem);
    --sp-2:clamp(.9rem,1.9vh,1.3rem);
    --sp-3:clamp(1.1rem,2.4vh,1.7rem);
    --sp-4:clamp(1.4rem,3vh,2rem);
  }
  .awards-row img{height:clamp(48px,7.4vh,72px)}
  .awards-row img.aw-round{height:calc(clamp(48px,7.4vh,72px) * .88)}
  .awards-label{margin-bottom:.5rem}
  .wrap{gap:clamp(1rem,2.2vh,2rem)}
}


/* ---- Phase 1: expanded launch-notification form -------------------------
   The single-email form became six fields. Reuses the page's existing type
   scale and border tokens rather than introducing a second visual language. */
.signup{max-width:560px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 .85rem}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;margin-bottom:.85rem;text-align:left}
.fld label{
  font:500 var(--t-label)/1.3 var(--sans);letter-spacing:.02em;
  color:var(--dim);margin-bottom:.34rem}
.req{color:var(--violet);margin-left:.15em}
.fld input,.fld select{
  width:100%;box-sizing:border-box;
  font:400 var(--t-body)/1.4 var(--sans);color:var(--white);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-control);
  padding:.68rem .8rem;
  transition:border-color .16s ease,background .16s ease}
.fld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:2.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239aa0b4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:11px}
.fld select option{background:#12121a;color:#e8e8ef}
.fld input:focus,.fld select:focus{
  outline:none;border-color:rgba(129,140,248,.75);
  background:rgba(255,255,255,.07)}
.fld input:focus-visible,.fld select:focus-visible{
  outline:2px solid rgba(129,140,248,.9);outline-offset:2px}
.signup button{width:100%;margin-top:.35rem}
.note a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.note a:hover{color:var(--white)}


/* The base `form` rule is display:flex with a bottom rule, written when this
   form was one email field beside one button. Six fields must stack. */
.signup form{
  display:block;border-bottom:none;padding-bottom:0;
  align-items:initial;gap:0}
.signup form:focus-within{border-color:transparent}

/* optgroup inherits the page's dark option styling in some engines and the OS
   default in others. Set it explicitly or the group labels vanish. */
.fld select optgroup{background:#12121a;color:#8f93a6;font-style:normal;font-weight:600}
.fld select optgroup option{color:#e8e8ef;font-weight:400}

/* The nav was removed; its 80px reservation would leave dead space at the top. */
:root{--nav-h:0px}
@media (max-width:700px){:root{--nav-h:0px}}

/* Brand mark only. Not navigation. */
.brand{display:block;width:fit-content;line-height:0;margin:0 0 clamp(1.5rem,3.2vw,2.4rem)}
.brand img{width:clamp(128px,13vw,168px);height:auto;display:block;opacity:.96}
.brand:hover img{opacity:1}
.legal-page .brand,.wrap .brand{display:block;width:fit-content;line-height:0;margin:0 0 clamp(1.5rem,3.2vw,2.4rem)}

/* On narrow screens the brand mark and the legal-page h1 both sat at the top
   of the flow and collided. Measured at 390px: brand y=18, h1 y=22. */



/* Analytics consent. Hidden until JS un-hides it, so a no-JS visitor never
   sees a banner for a script that could not have run anyway. */
.consent[hidden]{display:none}
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.9rem 1.4rem;
  padding:.95rem clamp(1rem,4vw,2.2rem);
  background:rgba(10,10,14,.97);
  border-top:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px)}
.consent-t{
  margin:0;flex:1 1 380px;
  font:400 var(--t-small)/1.5 var(--sans);color:var(--dim)}
.consent-t a{color:var(--white);text-decoration:underline;text-underline-offset:2px}
.consent-b{display:flex;gap:.6rem;flex:0 0 auto}
.consent button{
  font:600 .82rem/1 var(--sans);letter-spacing:.02em;
  padding:.62rem 1.15rem;border-radius:var(--r-control);cursor:pointer;
  border:1px solid rgba(255,255,255,.24);background:transparent;color:var(--white)}
.consent-accept{background:var(--grad);border-color:transparent;color:#0b0b10}
.consent button:hover{border-color:rgba(255,255,255,.5)}
.consent-accept:hover{filter:brightness(1.08)}
.consent button:focus-visible{outline:2px solid rgba(129,140,248,.9);outline-offset:2px}
@media (max-width:520px){.consent-b{width:100%}.consent button{flex:1}}

/* The brand mark is absolutely positioned, so the hero content must reserve
   room for it. Measured at 390px: logo overlapped the eyebrow exactly. */



/* The consent bar is fixed to the bottom and was sitting on top of the form.
   Measured at 1440x900: it covered the Company and Country fields, which are
   the page's only conversion point. Reserve its height while it is showing. */
/* padding-bottom is set from the banner's measured height in JS, because
   the bar is two rows tall on narrow screens and a fixed guess buried the
   footer links at 390px even when scrolled to the end. */

/* Investor enquiry: textarea and acknowledgement checkboxes.
   Reuses the tokenised field styling so both sites stay one system. */
.fld textarea{
  width:100%;box-sizing:border-box;resize:vertical;min-height:7em;
  font:400 var(--t-body)/1.55 var(--sans);color:var(--white);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-control);
  padding:.68rem .8rem;transition:border-color .16s ease,background .16s ease}
.fld textarea:focus{outline:none;border-color:rgba(129,140,248,.75);background:rgba(255,255,255,.07)}
.fld textarea:focus-visible{outline:2px solid rgba(129,140,248,.9);outline-offset:2px}
.fld textarea::placeholder{color:var(--dim-2)}

.acks{display:flex;flex-direction:column;gap:.7rem;margin:.2rem 0 1.4rem}
.ack{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  font:400 var(--t-small)/1.5 var(--sans);color:var(--dim)}
.ack input{flex:none;width:18px;height:18px;margin-top:.15rem;accent-color:var(--peri);cursor:pointer}
.ack:hover{color:var(--white)}
.ack input:focus-visible{outline:2px solid rgba(129,140,248,.9);outline-offset:2px}

/* Section headers inside the enquiry form */
.legal .signup-label{margin-top:1.9rem;display:block}
.legal .signup-label:first-of-type{margin-top:.4rem}

/* This page's form is not the one-line signup, so the base flex `form` rule
   (written for a single email field beside a button) must not apply. */
.legal form{display:block;border-bottom:none;padding-bottom:0;align-items:initial;gap:0}
.legal form:focus-within{border-color:transparent}
.legal #btn{width:100%;margin-top:.4rem}

/* A .notice inside .legal inherited .legal li::before's 4px rule geometry and
   rendered a dash AND a rule together. Reset the geometry for the em-dash. */
.notice li::before{content:"—";position:absolute;left:0;top:0;
  width:auto;height:auto;background:none;color:var(--dim-2)}

/* Footer links measured 10px tall with no padding, which is well under the
   44px touch minimum on a phone. Pad the hit area without moving the text. */
@media (max-width:700px){
  .f-links{gap:.2rem 1.1rem}
  .f-links a{display:inline-block;padding:.62rem 0;line-height:1}
  footer{gap:.4rem}
}

/* Field hint text sits under an input and explains why we are asking. */
.hint{
  margin:.35rem 0 0;
  font:400 var(--t-small)/1.45 var(--sans);
  color:var(--dim-2)}

/* The "no LinkedIn" toggle is a single inline acknowledgement, not a stack. */
.ack-inline{margin:-.35rem 0 1.1rem}
.fld[hidden],#alt-wrap[hidden]{display:none}

/* Legacy sign in sits apart from the document links, hard right on wide
   screens. On a phone the footer wraps to rows, so it simply flows last. */
.f-links{flex:1 1 auto}
.f-right{margin-left:auto}
@media (max-width:700px){.f-right{margin-left:0}}

/* The footer must read identically on every page. The prose pages use an
   820px reading rail, which forces the footer onto two rows while the home
   page (1180px) keeps it on one. Break the footer out of the rail so it
   spans the same width everywhere. */
.legal footer{
  width:min(1180px, calc(100vw - 2 * var(--pad)));
  margin-left:50%;
  transform:translateX(-50%)}
@media (max-width:700px){
  .legal footer{width:auto;margin-left:0;transform:none}
}