/* ============================================================
   Spargo — landing
   Light Material ground: one huge sentence, one pill,
   flat colour only — no gradients, no shadows.

   Everything down to the responsive block is the preview stylesheet
   unchanged. The waitlist form, the dialog and the legal-page rules
   are appended after it, so the original is still readable as one piece.
   ============================================================ */

/* Figtree, the same brand face the dashboard loads through next/font. One
   variable file covers every weight on this page. Self-hosted: pulling it
   from fonts.gstatic.com sends every visitor's IP to Google, which the
   privacy page would then have to disclose. */
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* ground — warm off-white, warm greys. Neutrals carry a trace of the
     mark's coral so the page reads sunlit rather than clinical. */
  --bg:            #FCFAF8;
  --surface:       #FFFFFF;
  --ink:           #1B1719;
  --ink-soft:      #625A58;
  --ink-faint:     #8F8783;
  --line:          #EAE3DE;

  /* the mark: four splash colours and the darker tone their faces are drawn in */
  --m1: #FF6B4A;  --f1: #B03A22;
  --m2: #7C4DFF;  --f2: #4A25A8;
  --m3: #FDBE3B;  --f3: #A4750F;
  --m4: #1FAE9F;  --f4: #0B5A54;

  /* violet acts, coral accents — the mark's warm pair, and the same violet
     the app uses for --primary. Both are darkened from the splash tones so
     white text clears 4.5:1 on the button and the accent clears 3:1 as text. */
  --brand:         #6035CC;
  --accent:        #E0533A;
  --tint:          #F5EFE9;
  --tint-deep:     #EDE3D9;

  --r-pill:        999px;
  --r-card:        28px;
  --shell:         1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* Form controls do not inherit the page face — the UA hands them its own, which
   in Chrome is Arial. Without this the two "Join waitlist" pills were set in
   different typefaces: the header one is an <a> and got Figtree, the submit
   button did not. */
button,input,select,textarea{font-family:inherit}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
}

/* One family now, so nothing below restates it — only the weight changes. */
h1,h2,h3,.display{font-weight:600}

a{color:inherit;text-decoration:none}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:32px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:var(--tint);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:40px;height:76px}

.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo .glyph{width:30px;height:30px;display:block}
.logo .word{font-size:23px;font-weight:600;letter-spacing:-.022em}

.links{display:flex;align-items:center;gap:30px;font-size:15.5px;color:var(--ink-soft);font-weight:500}
.links a{position:relative;padding:6px 0;transition:color .18s ease}
.links a:hover{color:var(--ink)}
.links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.links a:hover::after{transform:scaleX(1)}

.nav .spacer{flex:1}
.nav .right{display:flex;align-items:center;gap:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-pill);font-weight:500;font-size:16px;
  padding:12px 26px;border:1px solid transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,
             box-shadow .2s ease,transform .1s ease;
  white-space:nowrap;
}
/* The dashboard's primary button, brought over: a vertical gradient lit from
   above and a coloured glow underneath, so the one heavy action on the page
   sits slightly off the surface. Size, weight, face and radius are the
   landing's own and do not move.
   The lit top edge stays — it is what makes the pill feel physical. What had
   to go is the ring around the whole shape, and that came from elsewhere: the
   app sets bg-clip-padding, which stops the fill at the padding box and lets
   the transparent border show the page through as a pale halo. Dropped here,
   so the gradient runs to the outer edge and the only light is on top.
   That outer edge has to be spelled out: .btn carries a transparent 1px
   border, and a gradient is measured against the padding box by default while
   still painting under the border — so the border ring got a tile of the
   gradient rather than its edge, a dark line on top and a light one beneath.
   border-box origin measures the gradient against the shape you actually see.
   The glow sits between the app's and none: pulled in, softened, thinned. */
.btn-filled{
  color:#fff;
  background-color:var(--brand);
  background-image:linear-gradient(to bottom,
    color-mix(in oklch,var(--brand),white 30%),
    color-mix(in oklch,var(--brand),black 8%));
  background-origin:border-box;
  box-shadow:
    inset 0 1.5px 0 0 rgb(255 255 255/.3),
    0 1px 2px rgb(0 0 0/.07),
    0 12px 30px -12px color-mix(in oklch,var(--brand) 46%,transparent);
}
.btn-filled:hover{
  background-image:linear-gradient(to bottom,
    color-mix(in oklch,var(--brand),white 38%),
    color-mix(in oklch,var(--brand),black 8%));
  box-shadow:
    inset 0 1.5px 0 0 rgb(255 255 255/.36),
    0 2px 4px rgb(0 0 0/.09),
    0 16px 34px -12px color-mix(in oklch,var(--brand) 56%,transparent);
}
/* Pressed: the gradient lifts off and the flat brand beneath it shows, with
   the light moved inside.
   Why the states are written as longhands over a solid background-color, and
   not as the one `background:` shorthand they started as: the shorthand writes
   the colour too, so pressing moved the fill across two layers at once —
   colour transparent -> brand, image gradient -> none. .btn transitions
   background, and the two do not travel together. Colour fades smoothly;
   background-image cannot be interpolated here at all and only flips, at the
   halfway mark. That frame had the gradient already gone and the colour under
   it half transparent, so the page came through and the button blinked out.
   A solid colour that no state ever changes makes the button opaque in every
   frame, whatever the image layer does — including states added later. */
.btn-filled:active{
  background-image:none;
  box-shadow:inset 0 2px 5px 0 rgb(0 0 0/.28);
  transform:translateY(1px);
}
.btn-text{color:var(--ink-soft);padding:12px 18px}
.btn-text:hover{color:var(--ink);background:rgba(27,23,25,.06)}
.btn-tonal{background:var(--surface);color:var(--ink)}
.btn-tonal:hover{background:var(--tint-deep)}
.btn-lg{padding:17px 38px;font-size:18px}

.burger{display:none;width:44px;height:44px;border-radius:var(--r-pill);background:var(--surface);align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.6px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--ink)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--tint);padding:clamp(40px,6vh,84px) 0 clamp(64px,9vh,116px);overflow:hidden}

.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}

/* the scatter mark — one flat colour per node, nothing blended */
.hero-mark{
  width:clamp(96px,11vw,140px);aspect-ratio:1;
  margin-bottom:clamp(22px,3.6vh,38px);
}

h1{
  font-size:clamp(2.75rem,7.9vw,6.6rem);
  line-height:.96;
  letter-spacing:-.042em;
  max-width:16ch;
  text-wrap:balance;
}
h1 .grad{color:var(--accent)}

.sub{
  margin-top:clamp(22px,3.4vh,34px);
  font-size:clamp(1.06rem,1.55vw,1.32rem);
  line-height:1.5;color:var(--ink-soft);max-width:60ch;text-wrap:pretty;
}

.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(32px,5vh,48px)}

/* platform rail */
.rail{
  margin-top:clamp(40px,6vh,68px);width:100%;
  display:flex;justify-content:center;
}
.rail-inner{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:860px;
}
.pchip{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 18px 10px 14px;border-radius:var(--r-pill);
  background:var(--surface);
  font-size:15px;font-weight:500;color:var(--ink-soft);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.pchip:hover{background:var(--tint-deep);color:var(--ink)}
.pchip .i{width:17px;height:17px;flex:none;display:block}
.pchip .d{width:9px;height:9px;border-radius:50%}

/* ---------- footer ---------- */
/* No rule above the footer. The lighter ground stays, so the two tones still
   meet — there is simply no line drawn on top of where they meet. */
footer{background:var(--bg);padding:clamp(56px,8vh,88px) 0 clamp(56px,8vh,80px)}


/* Brand at one edge, links at the other. The four-column grid this replaces put
   the two link columns in slots 2 and 3 and left slot 4 empty, so the whole row
   sat in the left half of the page with nothing holding the right side. */
/* The gap between the two link columns is wider than their own content, so they
   read as two lists rather than one block that happens to have two headings. */
.foot-cols{display:flex;align-items:start;gap:48px 72px}
.foot-cols nav:first-of-type{margin-left:auto}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.foot-brand .copy{font-size:14px;color:var(--ink-faint);font-weight:500}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col h3{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:4px}
.foot-col a{font-size:15px;color:var(--ink-soft);font-weight:500;transition:color .18s ease}
.foot-col a:hover{color:var(--ink)}
.socials{display:flex;gap:8px;margin-left:-10px}
.socials a{
  width:40px;height:40px;border-radius:var(--r-pill);
  display:grid;place-items:center;color:var(--ink-soft);
  transition:background .2s ease,color .2s ease;
}
.socials a:hover{background:var(--tint);color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .links{display:none}
  .nav .right .btn-text{display:none}
  .burger{display:inline-flex}
}
@media (max-width:880px){
  /* Too narrow to hold both edges: the brand takes its own row and the two link
     columns share the one below, splitting it evenly. */
  .foot-cols{flex-wrap:wrap;gap:40px 28px}
  .foot-brand{flex-basis:100%}
  .foot-cols nav{flex:1;margin-left:0}
}
@media (max-width:640px){
  .shell{padding-inline:20px}
  .nav{height:66px}
  h1{letter-spacing:-.032em;max-width:100%}
  .btn-lg{padding:16px 30px;font-size:17px}
  .cta{width:100%;flex-direction:column}
  .cta .btn{width:100%}
}

/* ============================================================
   Waitlist — everything below is new.
   ============================================================ */

/* One visible focus treatment for the whole page: the brand ring. Keyboard
   users get it, mouse users do not, and it never changes layout. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* The form sits where the CTA pair used to, and inherits its rhythm. An email
   field above the fold converts better than a button that scrolls to one. */
.join{
  display:flex;gap:12px;width:100%;max-width:540px;
  margin-top:clamp(32px,5vh,48px);
}
.join .field{flex:1;min-width:0}
.join input[type=email]{
  width:100%;
  font:inherit;font-size:18px;color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:17px 26px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.join input[type=email]::placeholder{color:var(--ink-faint)}
.join input[type=email]:hover{border-color:var(--tint-deep)}
.join input[type=email]:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in oklch,var(--brand) 18%,transparent);
}
/* The invalid state only paints once the field has been submitted or left —
   colouring an address red while it is still being typed is just wrong. */
.join input[type=email][aria-invalid="true"]{border-color:var(--accent)}
.join button[disabled]{opacity:.6;cursor:default}

/* The bot trap. Off-screen rather than display:none, because some bots skip
   hidden fields; a human never reaches it — no tab stop, no label, no autofill. */
.hp{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* The one thing a stranger wants to know before handing over an address: how
   often you will write. Said in four words and without the word "spam" — naming
   it is what puts it in the reader's head. */
.join-note{
  margin-top:16px;font-size:15px;color:var(--ink-faint);
  font-weight:500;max-width:52ch;
}
.join-error{
  margin-top:14px;font-size:15.5px;font-weight:500;color:var(--accent);
  max-width:52ch;
}
.join-error[hidden]{display:none}

/* ---------- the thank-you dialog ----------
   A native <dialog>: the top layer, the backdrop, Escape and the focus trap
   are all the element's own behaviour, so none of it is written here. */
dialog.thanks{
  border:0;padding:0;background:transparent;
  max-width:min(440px,calc(100vw - 40px));
  color:var(--ink);
  /* A dialog centres itself through the UA's margin:auto, and the reset at the
     top of this file zeroes margin on every element — so without this the card
     opens pinned to the top-left corner. */
  margin:auto;
}
dialog.thanks::backdrop{
  background:color-mix(in oklch,var(--ink) 42%,transparent);
  backdrop-filter:blur(3px);
}
.thanks-card{
  background:var(--surface);
  border-radius:var(--r-card);
  padding:40px 36px 32px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 24px 60px -20px rgb(0 0 0/.28);
}
.thanks-card .thanks-mark{width:64px;height:64px;margin-bottom:22px}
.thanks-card h2{font-size:28px;letter-spacing:-.028em;line-height:1.15}
.thanks-card p{margin-top:14px;color:var(--ink-soft);font-size:16.5px;text-wrap:pretty}
.thanks-card .btn{margin-top:26px}

/* Both the dialog and its backdrop fade in. prefers-reduced-motion drops the
   movement and keeps the fade, which is the part that carries the meaning. */
dialog.thanks[open],dialog.thanks[open]::backdrop{animation:thanks-in .22s ease both}
dialog.thanks[open]{animation-name:thanks-rise}
@keyframes thanks-in{from{opacity:0}to{opacity:1}}
@keyframes thanks-rise{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  dialog.thanks[open]{animation-name:thanks-in}
}

@media (max-width:640px){
  .join{flex-direction:column;gap:10px}
  .join button{width:100%}
  .join input[type=email]{font-size:16px;padding:16px 22px}
  .thanks-card{padding:34px 26px 28px}
}

/* ============================================================
   Legal pages — one column of prose on the same ground.
   ============================================================ */
.doc{padding:clamp(48px,7vh,80px) 0 clamp(64px,9vh,96px)}
/* 58ch, not 68. `ch` is the width of a zero, which in Figtree is wider than the
   average lowercase letter — 68ch measured out to well over eighty actual
   characters a line, and the eye loses the return. */
.doc-inner{max-width:58ch;margin-inline:auto}

/* The scale is 17 → 23 → 44: each step a clear jump, so a heading is read as a
   heading before it is read as words. It was 17 → 20, which is close enough
   that the h2 looked like a bold paragraph. */
.doc h1{
  font-size:clamp(2.2rem,4.4vw,2.75rem);
  line-height:1.08;letter-spacing:-.03em;max-width:100%;
}
.doc .updated{margin-top:12px;color:var(--ink-faint);font-size:15px;font-weight:500}
.doc h2{
  margin-top:56px;
  font-size:1.35rem;line-height:1.25;letter-spacing:-.018em;
}
/* Spacing is what groups this page: 56px of air above a heading, 12px below it,
   20px between paragraphs. A heading has to sit nearer the text it introduces
   than the text it follows, or the two blocks read as one. The old rule gave
   34–48px above and 14px below — not far enough apart to separate anything, and
   tied to viewport *height*, so the gaps changed size on a laptop vs a desktop
   while the type did not. */
.doc p,.doc li{margin-top:20px;line-height:1.62;color:var(--ink-soft);text-wrap:pretty}
.doc h2+p,.doc h2+ul{margin-top:12px}
.doc ul{margin-top:14px;padding-left:22px}
.doc li{margin-top:10px}

/* Inline links: page ink with a hairline under it, brand colour only on hover.
   A violet word *and* the browser's default underline is both signals fired at
   once, which is the 1996 look. Scoped to prose so it cannot reach the back
   link at the foot — that one is a button in spirit, not a citation. */
.doc p a,.doc li a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:color-mix(in oklch,var(--ink) 30%,transparent);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  transition:color .18s ease,text-decoration-color .18s ease;
}
.doc p a:hover,.doc li a:hover{color:var(--brand);text-decoration-color:var(--brand)}
.doc strong{color:var(--ink);font-weight:600}
.doc-back{
  display:inline-flex;align-items:center;gap:8px;margin-top:clamp(40px,5vh,56px);
  font-weight:500;color:var(--ink-soft);text-decoration:none;
}
.doc-back:hover{color:var(--ink)}

@media (max-width:640px){
  .doc h2{margin-top:44px;font-size:1.25rem}
}