/* LINK — main.css
   Palette, type, layout. Motion lives in animations.css. */

@font-face { font-family:'Anton'; src:url('../fonts/anton-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('../fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('../fonts/ibm-plex-sans-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('../fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --ink:#0A0A0C;
  --panel:#111114;
  --panel-2:#16161B;
  --line:#26262E;
  --line-soft:#1C1C22;
  --line-mid:#33333D;
  --paper:#F2F0EB;
  --muted:#C7C7D2;
  --dim:#8A8A96;
  --lime:#B6FF00;
  --lime-hi:#C9FF3D;
  --pink:#FF2E88;
  --pink-hi:#FF4E9C;
  --cyan:#00E5FF;
  --display:'Anton', Impact, 'Haettenschweiler', sans-serif;
  --body:'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --skew:skewX(-8deg);
  --pad-x:clamp(16px,4vw,56px);
  --wrap:1240px;
  /* ticker speed — the one motion knob worth tuning by hand */
  --ticker-speed:34s;
  --ticker-speed-slow:58s;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--ink); overflow-x:hidden; }
body { font-family:var(--body); color:var(--paper); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:var(--cyan); text-decoration:none; }
a:hover { color:var(--lime); }
::selection { background:var(--pink); color:var(--ink); }
h1,h2,h3,p { margin:0; }
:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }

/* ---------- page texture ---------- */
.grain,.scan {
  position:fixed; inset:0; z-index:70; pointer-events:none;
}
.grain {
  opacity:0.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
.scan {
  z-index:71; opacity:0.55;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0.22) 0 1px,transparent 1px 3px);
}

/* ---------- intro ---------- */
.intro {
  position:fixed; inset:0; z-index:95; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.intro__stack { position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(18px,4vw,30px); }
.intro__marks { position:relative; width:clamp(112px,24vw,184px); height:clamp(112px,24vw,184px); }
.intro__mark { position:absolute; inset:0; }
.intro__mark svg { width:100%; height:100%; }
.intro__word {
  font-family:var(--display); font-size:clamp(56px,16vw,132px); line-height:0.9;
  letter-spacing:0.02em; color:var(--paper); text-shadow:5px 0 0 var(--pink),-5px 0 0 var(--cyan);
}
.intro__sub { font-family:var(--mono); font-size:clamp(10px,2.6vw,13px); letter-spacing:0.28em; color:var(--lime); }
.intro__flash { position:absolute; inset:0; background:#FFFFFF; pointer-events:none; opacity:0; }

/* ---------- hero ---------- */
.hero {
  position:relative; min-height:100svh; overflow:hidden;
  padding:clamp(72px,9vw,120px) var(--pad-x) clamp(28px,5vw,56px);
  display:flex; flex-direction:column; justify-content:center;
}
.frame { position:absolute; }
.frame__inner { position:relative; mix-blend-mode:screen; }
/* Scoped to .frame__inner, not .frame: the strip items are .strip__item >
   .frame__inner > img with no .frame ancestor, so a .frame img rule left them
   at their HTML height attribute (760px, 427px, 830px, 608px) squeezed into a
   264px column and stretched with the default object-fit:fill. Every image on
   the page sits inside a .frame__inner, so this covers both cases. */
.frame__inner img { width:100%; height:100%; object-fit:cover; }
.frame--a { top:4%; left:-14%; width:clamp(230px,44vw,560px); }
.frame--a .frame__inner { transform:rotate(-11deg); opacity:0.62; }
.frame--b { bottom:-6%; right:-12%; width:clamp(250px,50vw,620px); }
.frame--b .frame__inner { transform:rotate(7deg); opacity:0.58; }
.frame--c { top:38%; right:6%; width:clamp(150px,26vw,330px); }
.frame--c .frame__inner { transform:rotate(-6deg); opacity:0.58; }
.frame--d { top:-3%; left:34%; width:clamp(150px,30vw,380px); }
.frame--d .frame__inner { transform:rotate(6deg); opacity:0.5; }
.frame--e { top:22%; right:-4%; width:clamp(170px,32vw,420px); }
.frame--e .frame__inner { transform:rotate(-9deg); opacity:0.45; }
.frame--f { bottom:6%; left:38%; width:clamp(140px,26vw,330px); }
.frame--f .frame__inner { transform:rotate(-4deg); opacity:0.45; }
.ratio-1 { aspect-ratio:1/1; }
.ratio-169 { aspect-ratio:16/9; }
.ratio-54 { aspect-ratio:5/4; }

.sticker {
  position:absolute; top:6%; right:26%;
  width:clamp(84px,15vw,168px); height:clamp(84px,15vw,168px);
  border-radius:50%; background:var(--pink);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(11deg); pointer-events:none;
}
.sticker span {
  font-family:var(--display); font-size:clamp(14px,2.7vw,26px); line-height:0.94;
  color:var(--ink); text-align:center; transform:var(--skew);
}

.hero__body {
  position:relative; pointer-events:none; width:100%;
  max-width:var(--wrap); margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(14px,2.5vw,26px);
}
.brandmark { align-self:flex-start; }
.brandmark svg { display:block; width:47px; height:47px; color:var(--lime); overflow:visible; }
.hero__title {
  margin:clamp(20px,4.5vw,52px) 0 0; font-family:var(--display); font-weight:400;
  font-size:clamp(58px,15.5vw,210px); line-height:0.84; letter-spacing:0.02em; text-transform:uppercase;
}
.hero__title span {
  pointer-events:auto; display:block; width:fit-content;
  background:var(--ink); padding:0 0.14em; transform:var(--skew);
}
.hero__title .l1 { text-shadow:6px 0 0 var(--pink),-6px 0 0 var(--cyan); }
.hero__title .l2 { color:var(--lime); }
.hero__title .l3 { text-shadow:6px 0 0 var(--cyan),-6px 0 0 var(--pink); }
.hero__lede {
  pointer-events:auto; align-self:flex-start; max-width:34ch; background:var(--ink);
  padding:13px 16px; font-family:var(--mono); font-size:clamp(13px,3.4vw,17px);
  line-height:1.5; color:var(--muted);
}
.hero__cta { pointer-events:auto; align-self:flex-start; display:flex; flex-wrap:wrap; gap:12px; }

.btn {
  font-family:var(--display); font-size:clamp(17px,4.2vw,22px); letter-spacing:0.04em;
  background:var(--lime); color:var(--ink); padding:16px 26px; transform:var(--skew);
  display:inline-block; min-height:44px;
}
.btn:hover { background:var(--pink); color:var(--ink); }
.btn--ghost {
  font-family:var(--mono); font-size:clamp(11px,2.8vw,13px); letter-spacing:0.16em;
  border:2px solid var(--line-mid); background:var(--ink); color:var(--paper);
  padding:16px 22px; transform:none; display:inline-flex; align-items:center;
}
.btn--ghost:hover { border-color:var(--cyan); color:var(--cyan); }

/* ---------- ticker ---------- */
.ticker {
  border-top:3px solid var(--lime); border-bottom:3px solid var(--lime); background:var(--ink);
  padding:clamp(12px,2.4vw,20px) 0; overflow:hidden;
  display:flex; flex-direction:column; gap:clamp(8px,1.6vw,14px);
}
.ticker__track { display:flex; width:max-content; }
.ticker__row {
  display:flex; align-items:center; white-space:nowrap; text-transform:uppercase;
  gap:clamp(24px,4vw,48px); padding-right:clamp(24px,4vw,48px);
  font-family:var(--display); font-size:clamp(26px,6vw,58px); letter-spacing:0.02em; line-height:1;
}
.ticker__row span { transform:var(--skew); }
.ticker__row svg { width:clamp(20px,3.4vw,34px); height:clamp(20px,3.4vw,34px); flex:none; }
.ticker__row--small {
  font-family:var(--mono); font-weight:600; font-size:clamp(11px,2.6vw,15px);
  letter-spacing:0.2em; color:var(--muted);
  gap:clamp(20px,3.4vw,40px); padding-right:clamp(20px,3.4vw,40px);
}
.ticker__row--small span { transform:none; }
.c-paper { color:var(--paper); } .c-lime { color:var(--lime); }
.c-pink { color:var(--pink); } .c-cyan { color:var(--cyan); }

/* ---------- jobs ---------- */
.jobs { position:relative; padding:clamp(56px,8vw,110px) var(--pad-x); overflow:hidden; }
.jobs__bg { position:absolute; top:-4%; right:-8%; width:clamp(200px,34vw,440px); }
.jobs__bg .frame__inner { transform:rotate(9deg); opacity:0.3; }
.section__body {
  position:relative; pointer-events:none; max-width:var(--wrap); margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(26px,4vw,48px);
}
.section__title {
  pointer-events:auto; width:fit-content; font-family:var(--display); font-weight:400;
  font-size:clamp(40px,10vw,124px); line-height:0.86; letter-spacing:0.02em;
  text-transform:uppercase; transform:var(--skew);
  text-shadow:5px 0 0 var(--pink),-5px 0 0 var(--cyan);
}
.cards {
  pointer-events:auto; display:grid; gap:clamp(12px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));
}
.card {
  background:var(--panel); border:2px solid var(--line); padding:clamp(20px,3vw,30px);
  display:flex; flex-direction:column; gap:clamp(30px,5vw,58px);
  min-height:clamp(210px,26vw,290px); cursor:pointer;
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.card__top { display:flex; justify-content:space-between; align-items:flex-start; }
.card__num { font-family:var(--display); font-size:clamp(30px,6vw,52px); line-height:0.9; transform:var(--skew); }
.card__top svg { width:26px; height:26px; color:var(--line-mid); flex:none; }
.card__foot { display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.card__name {
  font-family:var(--display); font-size:clamp(24px,5vw,40px); line-height:0.92;
  letter-spacing:0.02em; text-transform:uppercase; transform:var(--skew);
}
.card__note { font-family:var(--mono); font-size:clamp(11px,2.6vw,13px); letter-spacing:0.1em; }
.card--1 { transform:rotate(-1.4deg); } .card--1:hover { border-color:var(--pink); background:var(--panel-2); transform:rotate(0deg) translateY(-6px); }
.card--2 { transform:rotate(1.1deg); }  .card--2:hover { border-color:var(--cyan); background:var(--panel-2); transform:rotate(0deg) translateY(-6px); }
.card--3 { transform:rotate(-0.8deg); background:var(--lime); border:none; } .card--3:hover { background:var(--lime-hi); transform:rotate(0deg) translateY(-6px); }
.card--ink .card__num,.card--ink .card__name { color:var(--ink); }
.card--ink .card__top svg { color:var(--ink); opacity:0.35; }
.card--ink .card__note { color:var(--ink); opacity:0.72; }

/* ---------- mechanic ---------- */
.mech {
  position:relative; padding:clamp(56px,8vw,110px) var(--pad-x);
  background:#0F0F13; border-top:2px solid var(--line-soft); overflow:hidden;
}
.mech__bg { position:absolute; bottom:0; left:0; width:100%; height:38%; }
.mech__bg .frame__inner { width:100%; height:100%; opacity:0.22; }
/* 0.86 is the display leading everywhere else, but this is the one lime title
   with two full-width lines: at that leading the caps of the second line touch
   the full stop of the first, and on lime that reads as one smudged block. */
.mech__title {
  font-family:var(--display); font-weight:400; font-size:clamp(40px,10vw,124px);
  line-height:1.02; letter-spacing:0.02em; text-transform:uppercase; transform:var(--skew); color:var(--lime);
}
.mech__lede { max-width:40ch; font-family:var(--mono); font-size:clamp(13px,3.2vw,16px); line-height:1.5; color:var(--muted); }
.mech__row {
  pointer-events:auto; align-self:flex-start; display:flex; flex-wrap:wrap;
  gap:clamp(18px,3vw,40px); align-items:flex-start;
}
.phone {
  position:relative; width:clamp(250px,72vw,300px); flex:none; border-radius:38px;
  background:var(--ink); border:3px solid var(--line); padding:12px;
  box-shadow:0 30px 70px rgba(0,0,0,0.6);
}
.phone--l { transform:rotate(-2.2deg); }
.phone--r { transform:rotate(2.6deg); }
.phone__screen {
  border-radius:28px; overflow:hidden; background:var(--ink);
  display:flex; flex-direction:column; height:clamp(430px,58vw,510px); position:relative;
}
.phone__sticker {
  position:absolute; top:-16px; left:-20px; width:78px; height:78px; border-radius:50%;
  background:var(--pink); display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:15px; line-height:0.95; color:var(--ink);
  text-align:center; transform:rotate(-13deg);
}
.phone__scan { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg,rgba(255,255,255,0.04) 0 3px,transparent 3px 6px); }
.steps { flex:1; min-width:min(100%,230px); display:flex; flex-direction:column; gap:clamp(14px,2.4vw,22px); font-family:var(--mono); }
.step { display:flex; flex-direction:column; gap:5px; padding-left:14px; }
.step b { font-size:11px; letter-spacing:0.18em; font-weight:400; }
.step span { font-size:clamp(12px,2.8vw,14px); line-height:1.5; color:var(--muted); }
.step--1 { border-left:3px solid var(--lime); } .step--1 b { color:var(--lime); }
.step--2 { border-left:3px solid var(--cyan); } .step--2 b { color:var(--cyan); }
.step--3 { border-left:3px solid var(--pink); } .step--3 b { color:var(--pink); }

/* ---------- in the app ---------- */
.tabs {
  position:relative; padding:clamp(56px,8vw,110px) var(--pad-x);
  border-top:2px solid var(--line-soft); overflow:hidden;
}
/* One row, scrolled sideways: four phones would otherwise double the page. */
.tabs__row {
  pointer-events:auto; display:flex; gap:clamp(18px,3vw,32px); align-items:flex-start;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  margin:0 calc(-1 * var(--pad-x)); padding:20px var(--pad-x) 24px;
}
.tabs__row::-webkit-scrollbar { display:none; }
.tab { flex:none; scroll-snap-align:start; width:clamp(236px,64vw,272px); display:flex; flex-direction:column; gap:10px; }
.tab .phone { width:100%; margin-bottom:8px; }
.tab .phone__screen { height:clamp(470px,62vw,560px); }
.tab:nth-child(1) .phone { transform:rotate(-1.8deg); }
.tab:nth-child(2) .phone { transform:rotate(1.4deg); }
.tab:nth-child(3) .phone { transform:rotate(-1.2deg); }
.tab:nth-child(4) .phone { transform:rotate(2deg); }
.tab__h {
  font-family:var(--display); font-weight:400; font-size:clamp(26px,5vw,40px); line-height:0.92;
  letter-spacing:0.02em; text-transform:uppercase; transform:var(--skew); width:fit-content;
}
.tab:nth-child(1) .tab__h { color:var(--lime); }
.tab:nth-child(2) .tab__h { color:var(--cyan); }
.tab:nth-child(3) .tab__h { color:var(--pink); }
.tab:nth-child(4) .tab__h { color:var(--paper); text-shadow:3px 0 0 var(--pink),-3px 0 0 var(--cyan); }
.tab__p { max-width:30ch; font-family:var(--mono); font-size:clamp(12px,2.8vw,14px); line-height:1.5; color:var(--muted); }

/* ---------- honest ---------- */
.honest { position:relative; padding:clamp(60px,9vw,130px) var(--pad-x); overflow:hidden; background:var(--ink); }
.honest__bg { position:absolute; top:0; left:0; width:100%; height:100%; }
.honest__bg .frame__inner { width:100%; height:100%; opacity:0.3; }
.honest__layer { position:absolute; top:8%; right:-6%; width:clamp(150px,26vw,340px); }
.honest__layer .frame__inner { transform:rotate(-8deg); opacity:0.5; }
.honest__title {
  pointer-events:auto; width:fit-content; font-family:var(--display); font-weight:400;
  font-size:clamp(46px,12.5vw,168px); line-height:0.82; letter-spacing:0.02em;
  text-transform:uppercase; transform:var(--skew);
  text-shadow:7px 0 0 var(--pink),-7px 0 0 var(--cyan);
}
.honest__row { pointer-events:auto; align-self:flex-start; display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px); align-items:flex-end; }
.honest__copy { max-width:34ch; font-family:var(--mono); font-size:clamp(13px,3.2vw,17px); line-height:1.55; color:var(--paper); }
.badge {
  width:clamp(140px,26vw,190px); height:clamp(140px,26vw,190px); border-radius:50%;
  background:var(--lime); flex:none; transform:rotate(-6deg);
  display:flex; align-items:center; justify-content:center;
}
.badge span { font-family:var(--display); font-size:clamp(20px,4.4vw,30px); line-height:0.94; color:var(--ink); text-align:center; transform:var(--skew); }
.strip { pointer-events:auto; align-self:flex-start; display:flex; flex-wrap:wrap; gap:clamp(10px,2vw,18px); margin-top:clamp(6px,1.6vw,14px); }
.strip__item { width:clamp(130px,24vw,270px); }
.strip__item .frame__inner {
  border:3px solid var(--ink); opacity:0.9; mix-blend-mode:normal;
  transition:transform 0.25s ease, filter 0.25s ease;
}
.strip__item:nth-child(1) .frame__inner { transform:rotate(3deg); }
.strip__item:nth-child(2) .frame__inner { transform:rotate(-4deg); }
.strip__item:nth-child(3) .frame__inner { transform:rotate(2deg); }
.strip__item:nth-child(4) .frame__inner { transform:rotate(-2deg); }
.strip__item .frame__inner:hover { transform:rotate(0deg) scale(1.03); filter:contrast(1.4) saturate(1.6); }

/* ---------- waitlist ---------- */
.waitlist { position:relative; padding:clamp(56px,8vw,120px) var(--pad-x); background:var(--lime); overflow:hidden; }
.waitlist__scan { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg,rgba(10,10,12,0.05) 0 2px,transparent 2px 5px); }
.waitlist__body {
  position:relative; max-width:900px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:clamp(18px,3vw,30px);
}
.waitlist__mark { width:clamp(46px,9vw,74px); height:auto; color:var(--ink); overflow:visible; }
.waitlist__title {
  font-family:var(--display); font-weight:400; font-size:clamp(44px,12vw,140px);
  line-height:0.84; letter-spacing:0.02em; text-transform:uppercase; transform:var(--skew); color:var(--ink);
}
.waitlist__lede { max-width:32ch; font-family:var(--mono); font-size:clamp(13px,3.2vw,16px); line-height:1.5; color:var(--ink); opacity:0.78; }
.waitlist__form { display:flex; flex-wrap:wrap; gap:10px; width:100%; max-width:530px; justify-content:center; }
.waitlist__form input {
  flex:1; min-width:min(100%,230px); background:var(--ink); border:3px solid var(--ink);
  color:var(--paper); font-family:var(--mono); font-size:15px; padding:16px 18px;
  min-height:52px; outline:none;
}
.waitlist__form input:focus { border-color:var(--pink); }
.waitlist__form button {
  font-family:var(--display); font-size:clamp(17px,4.2vw,21px); letter-spacing:0.04em;
  background:var(--ink); color:var(--lime); border:3px solid var(--ink);
  padding:16px 28px; min-height:52px; cursor:pointer; transform:var(--skew);
}
.waitlist__form button:hover { background:var(--pink); color:var(--ink); }
.waitlist__msg { font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--ink); min-height:1.2em; }

/* ---------- email gate states ---------- */
/* The three accents are specified on ink, and they do pass there — but this
   panel is lime, where lime type is 1.1:1 and the other two are little better.
   So the message gets an ink chip to sit on, which keeps the exact hues and the
   contrast that was reasoned about, on the surface it was reasoned about. */
.waitlist__msg:not(:empty) {
  display:inline-block; background:var(--ink); padding:7px 12px; line-height:1.35;
}
.waitlist__msg.is-bad  { color:var(--pink); }
.waitlist__msg.is-warn { color:var(--cyan); }
.waitlist__msg.is-good { color:var(--lime); }

/* Border takes the message colour. Width stays at the design's 3px rather than
   dropping to 1.5px, so the field still matches the button beside it. */
.waitlist__form input.is-bad  { border-color:var(--pink); }
.waitlist__form input.is-warn { border-color:var(--cyan); }
.waitlist__form input.is-good { border-color:var(--lime); }

/* Reads inert while the address is refused, but stays clickable: a click should
   explain itself rather than doing nothing. */
.waitlist__form button.is-off { color:var(--dim); }
.waitlist__form button.is-off:hover { background:var(--line-mid); color:var(--paper); }

/* ---------- footer ---------- */
.foot { padding:clamp(38px,6vw,72px) var(--pad-x) clamp(28px,4vw,52px); background:var(--ink); border-top:3px solid var(--lime); }
.foot__top { max-width:var(--wrap); margin:0 auto; display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); justify-content:space-between; }
.foot__brand { display:flex; flex-direction:column; gap:14px; }
.foot__lockup { display:flex; align-items:center; gap:14px; }
.foot__lockup svg { width:42px; height:42px; color:var(--lime); overflow:visible; }
.foot__word {
  font-family:var(--display); font-size:clamp(30px,7vw,46px); line-height:0.9; letter-spacing:0.02em;
  transform:var(--skew); text-shadow:3px 0 0 var(--pink),-3px 0 0 var(--cyan);
}
.foot__tag { font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--cyan); }
.foot__cols { display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px); font-family:var(--mono); font-size:12px; line-height:2; letter-spacing:0.08em; }
.foot__col { display:flex; flex-direction:column; gap:2px; }
.foot__col h3 { color:var(--dim); letter-spacing:0.2em; font-size:10px; font-weight:400; margin-bottom:6px; }
.foot__col a { min-height:44px; display:flex; align-items:center; }
.foot__base {
  max-width:var(--wrap); margin:clamp(26px,4vw,48px) auto 0; padding-top:18px;
  border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:12px;
  justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--dim);
}
.foot__legal { max-width:74ch; letter-spacing:0.06em; line-height:2; text-transform:none; }
.foot__legal a { color:inherit; }
.foot__built { color:var(--pink); }

/* ---------- 404 ---------- */
.gone { position:relative; min-height:100svh; overflow:hidden; padding:clamp(72px,9vw,120px) var(--pad-x); display:flex; flex-direction:column; justify-content:center; }
.gone__body { position:relative; max-width:var(--wrap); margin:0 auto; width:100%; display:flex; flex-direction:column; gap:clamp(16px,3vw,28px); align-items:flex-start; }
.gone__num {
  font-family:var(--display); font-size:clamp(90px,26vw,320px); line-height:0.8; letter-spacing:0.02em;
  transform:var(--skew); background:var(--ink); padding:0 0.1em;
  text-shadow:7px 0 0 var(--pink),-7px 0 0 var(--cyan);
}
.gone__line { font-family:var(--display); font-size:clamp(28px,7vw,72px); line-height:0.9; text-transform:uppercase; transform:var(--skew); color:var(--lime); background:var(--ink); padding:0 0.14em; }
.gone__note { max-width:32ch; background:var(--ink); padding:13px 16px; font-family:var(--mono); font-size:clamp(13px,3.2vw,16px); line-height:1.5; color:var(--muted); }

/* "Get the iOS beta" — only while the Worker has a TestFlight link to send it
   to. It stamps data-beta on <html>; anything else keeps the button hidden. */
html:not([data-beta="true"]) [data-beta-only] { display: none !important; }

/* Launch mode. The Worker stamps data-prelaunch on <html> ("false" once
   LAUNCH_AT has passed); the hero shows JOIN THE WAITLIST before and GET THE
   APP after. Anything but an explicit "false" is pre-launch. */
html[data-prelaunch="false"] [data-prelaunch-only] { display: none !important; }
html:not([data-prelaunch="false"]) [data-live-only] { display: none !important; }