/* ─────────────────────────────────────────────
   UNSPOKN — "silence has a signal"
   One scroll-driven variable (--voice: 0→1) moves the
   whole page from cold + hairline to warm + spoken.
   ───────────────────────────────────────────── */

:root{
  --ink:#07070A;
  --ink-2:#0C0C11;
  --bone:#EAE8E3;
  --bone-70:rgba(234,232,227,.70);
  --bone-50:rgba(234,232,227,.50);
  --bone-32:rgba(234,232,227,.32);
  --rule:rgba(234,232,227,.14);
  --rule-soft:rgba(234,232,227,.07);

  --cold:#7FD4FF;
  --warm:#FF9A3C;

  /* JS interpolates --accent between cold and warm as you scroll. */
  --voice:0;
  --accent:#7FD4FF;
  --accent-dim:rgba(127,212,255,.22);

  --shell:1380px;
  --pad:clamp(1.25rem, 4.2vw, 4.5rem);
  --sec-y:clamp(5.5rem, 13vh, 11rem);

  --ease:cubic-bezier(.16,1,.3,1);

  --f-disp:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-serif:"Instrument Serif", Georgia, serif;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:clamp(1rem,.95rem + .22vw,1.125rem);
  line-height:1.55;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; }

::selection{ background:var(--accent); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

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

.skip{
  position:fixed; top:-100px; left:1rem; z-index:100;
  background:var(--accent); color:var(--ink);
  padding:.65rem 1rem; font:500 .8rem/1 var(--f-mono); text-decoration:none;
}
.skip:focus{ top:1rem; }

/* ── film texture ───────────────────────────── */
.grain{
  position:fixed; inset:-120%; z-index:60; pointer-events:none;
  opacity:.040; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 17%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,-2%)}
  67%{transform:translate(3%,1%)}  83%{transform:translate(-1%,3%)}
}

.scan{
  position:fixed; inset:0; z-index:59; pointer-events:none;
  opacity:calc(.05 + var(--voice) * .035);
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.055) 0 1px,
    transparent 1px 3px
  );
}

/* ── layout ─────────────────────────────────── */
.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding-inline:var(--pad);
}

.sec{ padding-block:var(--sec-y); position:relative; }
.sec--tight{ padding-block:clamp(3rem,6vh,5rem); }
.sec::before{
  content:""; position:absolute; inset-inline:var(--pad); top:0; height:1px;
  background:var(--rule-soft);
}

.split{
  display:grid; gap:clamp(1.5rem,4vw,5rem);
  grid-template-columns:1fr;
  margin-block:clamp(2rem,5vh,3.5rem);
}
@media (min-width:860px){
  .split{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start; }
}

/* ── type ───────────────────────────────────── */
.h1{
  margin:.35em 0 0;
  font-family:var(--f-disp);
  font-size:clamp(3rem,10.6vw,9rem);
  line-height:.9;
  letter-spacing:-.045em;
  font-variation-settings:"wdth" 108,"wght" 760;
  text-wrap:balance;
}
.h1__l{ display:block; }
.h1 em{
  font-style:normal;
  color:var(--accent);
  transition:color .4s linear;
}

.h2{
  margin:0;
  font-family:var(--f-disp);
  font-size:clamp(1.85rem,4.1vw,3.4rem);
  line-height:1.02;
  letter-spacing:-.034em;
  font-variation-settings:"wdth" 104,"wght" 620;
  text-wrap:balance;
}
.h2--wide{ max-width:19ch; margin-block:clamp(1.5rem,4vh,2.5rem); }

.lede{
  margin:1.4rem 0 0;
  max-width:46ch;
  font-size:clamp(1.05rem,1.35vw,1.3rem);
  line-height:1.45;
  color:var(--bone-70);
  text-wrap:pretty;
}

.prose{ color:var(--bone-70); max-width:52ch; }
.prose p{ margin:0 0 1em; text-wrap:pretty; }
.prose p:last-child{ margin-bottom:0; }

.fineprint{
  font:400 .8rem/1.5 var(--f-mono);
  color:var(--bone-32);
  border-left:1px solid var(--rule);
  padding-left:.9rem;
}

.eyebrow,.label,.num{
  font:500 .69rem/1 var(--f-mono);
  letter-spacing:.2em;
  text-transform:uppercase;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:0; color:var(--bone-50);
}
.label{ color:var(--bone-50); }
.label--dim{ color:var(--bone-32); }
.num{ color:var(--accent); transition:color .4s linear; }

.dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-dim);
  animation:ping 2.4s var(--ease) infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 var(--accent-dim); }
  70%,100%{ box-shadow:0 0 0 11px rgba(0,0,0,0); }
}

.sechead{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:clamp(1.75rem,4vh,3rem);
}
.sechead .rule{
  flex:1; height:1px; background:var(--rule);
  transform-origin:left; transform:scaleX(0);
  transition:transform 1.3s var(--ease) .1s;
}
[data-reveal].in .rule{ transform:scaleX(1); }

/* ── buttons ────────────────────────────────── */
.btn{
  --bg:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.6rem;
  background:var(--bg); color:var(--ink);
  font:500 .82rem/1 var(--f-mono);
  letter-spacing:.07em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--bg); border-radius:0; cursor:pointer;
  transition:background .4s linear,border-color .4s linear,transform .25s var(--ease),filter .2s linear;
}
.btn:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn--ghost{
  background:transparent; color:var(--bone);
  border-color:var(--rule);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); filter:none; }

.btn--sm{ padding:.68rem 1.1rem; font-size:.72rem; }
.btn--lg{ padding:1.1rem 2.1rem; }

.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:clamp(1.75rem,4vh,2.5rem); }

/* ── nav ────────────────────────────────────── */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:50;
  backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--ink) 80%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .4s linear,background .4s linear;
}
.nav.is-stuck{ border-bottom-color:var(--rule); }
.nav__in{
  width:100%; max-width:var(--shell); margin-inline:auto;
  padding:.85rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}

.mark{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--bone);
}
.mark__sig{
  width:44px; height:16px; overflow:visible;
  fill:var(--accent); stroke:var(--accent);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .4s linear,fill .4s linear;
}
.mark__sig path{ fill:none; }
.mark__word{
  font-family:var(--f-disp);
  font-size:1.02rem; letter-spacing:-.02em;
  font-variation-settings:"wdth" 108,"wght" 700;
}

.nav__links{ display:none; margin-left:auto; gap:1.8rem; }
@media (min-width:900px){ .nav__links{ display:flex; } }
.nav__links a{
  font:400 .78rem/1 var(--f-mono);
  letter-spacing:.04em; color:var(--bone-50); text-decoration:none;
  position:relative; padding-block:.35rem;
  transition:color .25s linear;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav .btn--sm{ margin-left:auto; }
@media (min-width:900px){ .nav .btn--sm{ margin-left:0; } }

/* ── hero ───────────────────────────────────── */
.hero{
  min-height:100svh;
  padding-top:clamp(5.5rem,10.5vh,8rem);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(1.5rem,3.5vh,2.5rem);
}
.hero__copy{ padding-bottom:0; }

.instrument{
  margin:0; position:relative; width:100%;
  height:clamp(190px,27vh,300px);
}
.instrument canvas{ width:100%; height:100%; }
.instrument__legend{
  position:absolute; inset-inline:var(--pad); bottom:.9rem;
  display:flex; align-items:center; gap:.7rem;
  font:400 .62rem/1 var(--f-mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-32);
}
.instrument__arrow{
  flex:1; height:1px; background:var(--rule-soft);
}

/* ── compare ────────────────────────────────── */
.compare{
  list-style:none; margin:clamp(1.5rem,4vh,2.5rem) 0 0; padding:0;
  border-top:1px solid var(--rule);
}
.compare li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.5rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--rule);
}
.compare__k{
  flex:0 0 auto; min-width:13ch;
  font-family:var(--f-disp);
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  letter-spacing:-.02em;
  font-variation-settings:"wdth" 104,"wght" 580;
}
.compare__v{ color:var(--bone-50); font-size:.98rem; }
.compare--us{ border-bottom-color:var(--accent); }
.compare--us .compare__k{ color:var(--accent); transition:color .4s linear; }
.compare--us .compare__v{ color:var(--bone); }

/* ── voice player ───────────────────────────── */
.sec--voice{ background:linear-gradient(180deg,transparent,rgba(255,255,255,.015),transparent); }

.player{
  border:1px solid var(--rule);
  background:var(--ink-2);
  padding:clamp(1.1rem,2.5vw,1.9rem);
}
.player__wave{ height:76px; margin-bottom:1.1rem; }
.player__wave canvas{ width:100%; height:100%; }

.player__row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.player__input{
  flex:1 1 16rem; min-width:0;
  background:transparent; color:var(--bone);
  border:1px solid var(--rule); border-radius:0;
  padding:.9rem 1rem;
  font:400 1rem/1.2 var(--f-body);
  transition:border-color .25s linear;
}
.player__input::placeholder{ color:var(--bone-32); }
.player__input:focus{ border-color:var(--accent); outline:none; }

.btn--speak{ flex:0 0 auto; min-width:9.5rem; }
.btn__ico{
  width:9px; height:9px; border-radius:50%;
  background:currentColor; flex:0 0 auto;
}
.btn--speak[data-busy="1"] .btn__ico{ animation:pulse .7s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.25; transform:scale(.7); } }

.chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.chip{
  background:transparent; color:var(--bone-50);
  border:1px solid var(--rule-soft); border-radius:0;
  padding:.5rem .8rem;
  font:400 .78rem/1 var(--f-mono); cursor:pointer;
  transition:border-color .2s linear,color .2s linear;
}
.chip:hover{ color:var(--bone); border-color:var(--accent); }

.player__status{
  margin:.9rem 0 0;
  font:400 .72rem/1 var(--f-mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-32);
}
.player__status[data-state="busy"]{ color:var(--accent); }
.player__status[data-state="error"]{ color:#FF7A6B; }

/* ── built with ─────────────────────────────── */
.builtlabel{
  margin:0 0 1rem;
  font:500 .69rem/1 var(--f-mono);
  letter-spacing:.24em; text-transform:uppercase; color:var(--bone-32);
}
.built{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(1.25rem,5vw,4rem);
  align-items:baseline;
}
.built li{
  font-family:var(--f-disp);
  font-size:clamp(1.1rem,2.4vw,1.9rem);
  letter-spacing:-.025em;
  font-variation-settings:"wdth" 96,"wght" 560;
  color:var(--bone-32);
  transition:color .3s linear;
}
.built li:hover{ color:var(--bone-70); }

/* ── steps ──────────────────────────────────── */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  background:var(--rule);
  border-block:1px solid var(--rule);
}
@media (min-width:760px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .steps{ grid-template-columns:repeat(4,1fr); } }

.step{ background:var(--ink); padding:clamp(1.25rem,2.4vw,2rem); }
.step__n{
  display:block; margin-bottom:1.4rem;
  font:500 .72rem/1 var(--f-mono); letter-spacing:.2em;
  color:var(--accent); transition:color .4s linear;
}
.step__h{
  margin:0 0 .6rem;
  font-family:var(--f-disp);
  font-size:1.14rem; line-height:1.2; letter-spacing:-.022em;
  font-variation-settings:"wdth" 102,"wght" 620;
}
.step__p{ margin:0; font-size:.94rem; color:var(--bone-50); }

/* ── the gate ───────────────────────────────── */
.gate{
  margin-top:clamp(2rem,5vh,3.5rem);
  border:1px solid var(--rule);
  padding:clamp(1.1rem,2.5vw,1.9rem);
  background:var(--ink-2);
}
.gate__head{
  display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between;
  padding-bottom:.9rem; border-bottom:1px solid var(--rule-soft);
}
.gate__intro{
  margin:1.1rem 0 1.2rem; max-width:62ch;
  font-size:.95rem; color:var(--bone-50);
}
.gate__intro em{ color:var(--bone); font-style:italic; }

.gate__row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.gate__sel{
  background:transparent; color:var(--bone-70);
  border:1px solid var(--rule); border-radius:0;
  padding:.9rem .8rem;
  font:400 .82rem/1.2 var(--f-mono); cursor:pointer;
}
.gate__sel option{ background:var(--ink-2); color:var(--bone); }

.gate__out{ margin-top:1.4rem; }
.bars{ display:grid; gap:.55rem; }
.bar{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:.5rem 1rem; position:relative;
  padding:.55rem .8rem;
  border:1px solid var(--rule-soft);
  overflow:hidden;
}
.bar__fill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--accent-dim);
  border-right:1px solid var(--accent);
  transition:width 1s var(--ease);
}
.bar__lab,.bar__pct{ position:relative; font:400 .78rem/1 var(--f-mono); letter-spacing:.08em; }
.bar__lab{ color:var(--bone-70); text-transform:uppercase; }
.bar__pct{ color:var(--bone-32); font-variant-numeric:tabular-nums; }
.bar.is-win .bar__lab,.bar.is-win .bar__pct{ color:var(--bone); }
.bar.is-win{ border-color:var(--accent); }

.gate__verdict{
  margin:1rem 0 0;
  font:400 .8rem/1.6 var(--f-mono);
  color:var(--bone-32);
}
.gate__verdict strong{ color:var(--accent); font-weight:500; }
.gate__out[data-state="busy"] .gate__verdict{ color:var(--accent); }
.gate__out[data-state="error"] .gate__verdict{ color:#FF7A6B; }

/* ── cards ──────────────────────────────────── */
.cards{
  display:grid; gap:1px; background:var(--rule);
  border-block:1px solid var(--rule);
}
@media (min-width:720px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .cards{ grid-template-columns:repeat(4,1fr); } }

.card{ background:var(--ink); padding:clamp(1.4rem,2.6vw,2.1rem); }
.card__h{
  margin:0 0 .7rem;
  font-family:var(--f-disp);
  font-size:clamp(1.1rem,1.6vw,1.32rem);
  line-height:1.15; letter-spacing:-.026em;
  font-variation-settings:"wdth" 104,"wght" 640;
  text-wrap:balance;
}
.card__p{ margin:0; font-size:.94rem; color:var(--bone-50); }

/* ── who ────────────────────────────────────── */
.pull{ margin:clamp(1.5rem,4vh,2.5rem) 0; }
.pull p{
  margin:0;
  /* em, not ch — ch resolves against the parent's much smaller font */
  max-width:16em;
  font-family:var(--f-serif);
  font-size:clamp(1.9rem,5.2vw,4rem);
  line-height:1.04; letter-spacing:-.015em;
}
.pull em{ color:var(--accent); transition:color .4s linear; }

.who{
  list-style:none; margin:clamp(2rem,5vh,3rem) 0 0; padding:0;
  display:grid; gap:1px; background:var(--rule);
  border-block:1px solid var(--rule);
}
@media (min-width:820px){ .who{ grid-template-columns:repeat(3,1fr); } }
.who li{ background:var(--ink); padding:clamp(1.4rem,2.6vw,2.1rem); }
.who h3{
  margin:0 0 .6rem;
  font-family:var(--f-disp); font-size:1.14rem; letter-spacing:-.022em;
  font-variation-settings:"wdth" 102,"wght" 620;
}
.who p{ margin:0; font-size:.94rem; color:var(--bone-50); }

/* ── limits ─────────────────────────────────── */
.sec--limits{ background:rgba(255,255,255,.012); }
.limits{
  list-style:none; margin:clamp(1.5rem,4vh,2.5rem) 0 0; padding:0;
  border-top:1px solid var(--rule);
}
.limits li{
  display:grid; gap:.3rem 2.5rem; padding:1.4rem 0;
  border-bottom:1px solid var(--rule);
}
@media (min-width:860px){
  .limits li{ grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); align-items:baseline; }
}
.limits h3{
  margin:0;
  font-family:var(--f-disp);
  font-size:clamp(1.05rem,1.7vw,1.35rem); letter-spacing:-.024em;
  font-variation-settings:"wdth" 102,"wght" 600;
}
.limits p{ margin:0; color:var(--bone-50); font-size:.96rem; }

/* ── refs ───────────────────────────────────── */
.refs{
  list-style:none; margin:clamp(1.5rem,4vh,2.5rem) 0 0; padding:0;
  border-top:1px solid var(--rule);
}
.refs li{ border-bottom:1px solid var(--rule); }
.refs a{
  display:grid; align-items:baseline; gap:.25rem 2rem;
  grid-template-columns:1fr auto;
  padding:1.2rem 0; text-decoration:none;
  transition:padding-inline-start .4s var(--ease);
}
@media (min-width:760px){
  .refs a{ grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr) auto; }
}
.refs a:hover{ padding-inline-start:.9rem; }
.refs__n{
  font-family:var(--f-disp);
  font-size:clamp(1.05rem,1.7vw,1.35rem); letter-spacing:-.024em;
  font-variation-settings:"wdth" 102,"wght" 600;
}
.refs__d{ color:var(--bone-50); font-size:.94rem; }
.refs__a{
  width:1.4rem; height:1px; background:var(--bone-32);
  position:relative; align-self:center; justify-self:end;
  transition:background .25s linear,width .4s var(--ease);
}
.refs__a::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg); color:var(--bone-32);
  transition:color .25s linear;
}
.refs a:hover .refs__a{ background:var(--accent); width:2.2rem; }
.refs a:hover .refs__a::after{ color:var(--accent); }

/* ── faq ────────────────────────────────────── */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.25rem 2.5rem 1.25rem 0;
  position:relative;
  font-family:var(--f-disp);
  font-size:clamp(1.02rem,1.6vw,1.26rem); letter-spacing:-.022em;
  font-variation-settings:"wdth" 102,"wght" 580;
  transition:color .25s linear;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq summary::after,.faq summary::before{
  content:""; position:absolute; right:.3rem; top:50%;
  background:var(--bone-32); transition:transform .4s var(--ease),background .25s linear;
}
.faq summary::after{ width:13px; height:1px; transform:translateY(-50%); }
.faq summary::before{ width:1px; height:13px; transform:translate(6px,-50%); }
.faq details[open] summary::before{ transform:translate(6px,-50%) rotate(90deg); }
.faq details[open] summary::after,.faq details[open] summary::before{ background:var(--accent); }
.faq p{
  margin:0; padding:0 clamp(0rem,8vw,6rem) 1.5rem 0;
  max-width:70ch; color:var(--bone-50); font-size:.98rem;
}

/* ── final cta ──────────────────────────────── */
.cta{
  padding-block:clamp(6rem,16vh,12rem);
  border-top:1px solid var(--rule);
  background:
    radial-gradient(130% 80% at 50% 120%, var(--accent-dim), transparent 62%),
    var(--ink);
}
.cta__h{
  margin:0;
  font-family:var(--f-disp);
  font-size:clamp(2.8rem,10vw,8rem);
  line-height:.88; letter-spacing:-.045em;
  font-variation-settings:"wdth" 110,"wght" 800;
}
.cta__h em{ font-style:normal; color:var(--accent); transition:color .4s linear; }
.cta__p{
  margin:1.6rem 0 0; max-width:48ch;
  font-size:clamp(1rem,1.25vw,1.2rem); color:var(--bone-70);
}

.signup{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:clamp(1.8rem,4vh,2.6rem);
  max-width:34rem;
}
.signup__input{
  flex:1 1 15rem; min-width:0;
  background:transparent; color:var(--bone);
  border:1px solid var(--rule); border-radius:0;
  padding:1.1rem 1.1rem;
  font:400 1rem/1.2 var(--f-body);
  transition:border-color .25s linear;
}
.signup__input::placeholder{ color:var(--bone-32); }
.signup__input:focus{ border-color:var(--accent); outline:none; }
.signup__msg{
  margin:.9rem 0 0; min-height:1.2em;
  font:400 .76rem/1.5 var(--f-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--bone-32);
}
.signup__msg[data-state="ok"]{ color:var(--accent); }
.signup__msg[data-state="error"]{ color:#FF7A6B; }

/* ── footer ─────────────────────────────────── */
.foot{ border-top:1px solid var(--rule); padding-block:clamp(2.5rem,6vh,4rem); }
.foot__in{ display:grid; gap:2rem; }
@media (min-width:860px){
  .foot__in{ grid-template-columns:auto 1fr auto; align-items:center; }
}
.foot__tag{
  margin:.5rem 0 0;
  font:400 .76rem/1 var(--f-mono); letter-spacing:.14em;
  color:var(--bone-32);
}
.foot__links{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:flex-start; }
@media (min-width:860px){ .foot__links{ justify-content:center; } }
.foot__links a{
  font:400 .78rem/1 var(--f-mono); color:var(--bone-50); text-decoration:none;
  transition:color .25s linear;
}
.foot__links a:hover{ color:var(--accent); }
.foot__legal{
  margin:0; font:400 .72rem/1 var(--f-mono);
  letter-spacing:.1em; color:var(--bone-32);
}

/* ── reveal ─────────────────────────────────── */
[data-reveal]{
  opacity:0; filter:blur(9px); transform:translateY(14px);
  transition:
    opacity .85s var(--ease) var(--d,0s),
    filter 1.05s var(--ease) var(--d,0s),
    transform .85s var(--ease) var(--d,0s);
}
[data-reveal].in{ opacity:1; filter:blur(0); transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grain{ animation:none; }
  .dot{ animation:none; }
  [data-reveal]{ opacity:1; filter:none; transform:none; transition:none; }
  .sechead .rule{ transform:scaleX(1); transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── 404 ────────────────────────────────────── */
.oops{
  min-height:100svh; display:grid; place-content:center; text-align:center;
  gap:1.5rem; padding:var(--pad);
}