/* Archivo, self-hosted. A privacy wallet should not phone home to Google
   on every page load, and this removes a render-blocking third party. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('/assets/fonts/archivo-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:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('/assets/fonts/archivo-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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Husk — one typeface, two colours, one shape that morphs. */

:root{
  --ink:    #0A0A0A;
  --ink-2:  #111111;
  --paper:  #FAFAF9;
  --mid:    rgba(250,250,249,.54);
  --dim:    rgba(250,250,249,.34);
  --hair:   rgba(250,250,249,.11);
  --signal: #FF4F18;

  --ease:   cubic-bezier(.22,1,.36,1);
  --gut:    clamp(22px, 6vw, 72px);
  --maxw:   1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:"Archivo", system-ui, sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
dl,dd{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--signal); color:var(--paper); }

/* ── nav ────────────────────────────────────── */

.nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto;
  padding:20px var(--gut);
  background:rgba(10,10,10,.76);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:1.05rem; letter-spacing:-.02em;
}
.brand svg{ width:22px; height:22px; }
.nav.stuck{ border-bottom-color:var(--hair); }

.nav-end{ display:flex; align-items:center; gap:14px; }
.nav-x{
  display:inline-flex; width:34px; height:34px;
  align-items:center; justify-content:center;
  border-radius:8px;
  color:var(--mid);
  transition:color .4s var(--ease), background .4s var(--ease);
}
.nav-x svg{ width:15px; height:15px; }
.nav-x:hover{ color:var(--paper); background:rgba(250,250,249,.07); }

/* ── button ─────────────────────────────────── */

.actions{ display:flex; flex-wrap:wrap; gap:10px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px;
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--paper);
  font-variation-settings:"wdth" 100,"wght" 600;
  font-size:.94rem;
  transition:border-radius .55s var(--ease), letter-spacing .55s var(--ease),
             background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover{ border-radius:18px; letter-spacing:.012em; }
.btn-sm{ padding:10px 18px; font-size:.85rem; }
.btn-big{ padding:17px 36px; font-size:.98rem; }
.btn-quiet{ background:transparent; color:var(--paper); border-color:var(--hair); }
.btn-quiet:hover{ border-color:rgba(250,250,249,.3); }

/* ── section heads ──────────────────────────── */

section{ max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); }

.sec-head{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(20px,5vw,70px);
  align-items:end;
  padding-bottom:clamp(38px,5vw,62px);
  margin-bottom:clamp(38px,5vw,62px);
  border-bottom:1px solid var(--hair);
}
.sec-head h2{
  font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  line-height:.94;
  letter-spacing:-.04em;
}
.sec-head p{ color:var(--mid); max-width:46ch; }

/* ── hero ───────────────────────────────────── */

.hero{
  position:relative;
  padding-top:clamp(56px,13vh,150px);
  padding-bottom:clamp(80px,15vh,180px);
}
.hero h1{
  font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(2.7rem,7.4vw,5.4rem);
  line-height:.92;
  letter-spacing:-.042em;
  max-width:min(13ch,56%);
  margin-bottom:clamp(22px,3.2vw,32px);
}
.lede{
  color:var(--mid);
  font-size:clamp(1.02rem,1.5vw,1.16rem);
  max-width:min(44ch,56%);
  margin-bottom:clamp(30px,4.2vw,42px);
}

/* ── the mark: breathes on a loop, sheds as you scroll ── */

.hero-mark{
  position:absolute;
  top:50%; right:var(--gut);
  transform:translateY(-50%);
  width:clamp(150px,23vw,300px);
  height:auto;
  color:var(--paper);
  overflow:visible;
  pointer-events:none;
}
.mk-skull{
  fill:currentColor;
  stroke:currentColor;
  stroke-linejoin:round;
  fill-opacity:calc(1 - var(--shed, 0));
  stroke-opacity:calc(var(--shed, 0) * .55);
  stroke-width:calc(1.6px - var(--shed, 0) * 0.5px);
  animation:breathe 17s cubic-bezier(.45,0,.3,1) infinite;
}
.mk-eyes{
  fill:var(--ink);
  opacity:calc(1 - var(--shed, 0));
  animation:blink 17s cubic-bezier(.45,0,.3,1) infinite;
}

@keyframes breathe{
  0%,100%{ d:path("M10 6 L34 30 L66 30 L90 6 L84 54 L50 96 L16 54 Z") }
  34%    { d:path("M8 16 L31 33 L69 33 L92 16 L87 50 L50 89 L13 50 Z") }
  67%    { d:path("M15 4 L36 28 L64 28 L85 4 L80 58 L50 97 L20 58 Z") }
}
@keyframes blink{
  0%,100%{ d:path("M27 45 L42 41 L42 48 L27 52 Z M73 45 L58 41 L58 48 L73 52 Z") }
  34%    { d:path("M26 46 L41 43 L41 49 L26 52 Z M74 46 L59 43 L59 49 L74 52 Z") }
  67%    { d:path("M28 44 L43 40 L43 48 L28 52 Z M72 44 L57 40 L57 48 L72 52 Z") }
}

/* ── showcase ───────────────────────────────── */

.how{ padding-top:clamp(50px,8vh,96px); padding-bottom:clamp(60px,10vh,120px); }

.flow{
  margin:0 0 clamp(44px,6vw,76px);
  padding:clamp(20px,3vw,34px) clamp(14px,2vw,28px);
  border:1px solid var(--hair);
  border-radius:18px;
  background:var(--ink-2);
}
.flow svg{ width:100%; height:auto; display:block; overflow:visible; }

.flow .rail{ fill:none; stroke:var(--hair); stroke-width:1.5; }

.flow .node rect{ fill:none; stroke:var(--dim); stroke-width:1.5; }
.flow .node text{
  fill:var(--dim);
  font-size:11px;
  font-variation-settings:"wdth" 100,"wght" 600;
  letter-spacing:.11em;
}
.flow .crowd circle{ fill:var(--dim); opacity:.5; }
.flow .node-pool rect{ stroke:var(--hair); }

.flow .cut path{
  fill:none; stroke:var(--dim); stroke-width:1.4;
  stroke-dasharray:3 7; opacity:.5;
}
.flow .cut text{
  fill:var(--signal);
  font-size:11px;
  font-variation-settings:"wdth" 100,"wght" 700;
  letter-spacing:.14em;
}

.flow .pip{ fill:var(--paper); opacity:0; }
.flow .fresh-mark{ fill:var(--paper); opacity:0; }

/* only runs once scrolled into view */
.flow.live .pip-a{ animation:runA 7s cubic-bezier(.45,0,.35,1) infinite; }
.flow.live .pip-b{ animation:runB 7s cubic-bezier(.45,0,.35,1) infinite; }
.flow.live .fresh-mark{ animation:freshLife 7s cubic-bezier(.45,0,.35,1) infinite; }
.flow.live .crowd circle{ animation:crowdPulse 7s ease-in-out infinite; }
.flow.live .node-fresh rect{ animation:freshRing 7s cubic-bezier(.45,0,.35,1) infinite; }

@keyframes runA{
  0%      { cx:138px; opacity:0 }
  4%      { opacity:1 }
  26%     { cx:378px; opacity:1 }
  30%,100%{ cx:378px; opacity:0 }
}
@keyframes runB{
  0%,34%  { cx:542px; opacity:0 }
  38%     { opacity:1 }
  58%     { cx:782px; opacity:1 }
  62%,100%{ cx:782px; opacity:0 }
}
@keyframes freshLife{
  0%,58%  { opacity:0 }
  64%,84% { opacity:1 }
  94%,100%{ opacity:0 }
}
@keyframes freshRing{
  0%,58%  { stroke:rgba(250,250,249,.34) }
  64%,84% { stroke:rgba(250,250,249,1) }
  94%,100%{ stroke:rgba(250,250,249,.34) }
}
@keyframes crowdPulse{
  0%,100%{ opacity:.5 }
  30%    { opacity:.9 }
}

/* stacked variant for phones */
.flow .flow-v{ display:none; }
.flow-v text{ font-size:13px; }
.flow.live .pip-va{ animation:runVA 7s cubic-bezier(.45,0,.35,1) infinite; }
.flow.live .pip-vb{ animation:runVB 7s cubic-bezier(.45,0,.35,1) infinite; }

@keyframes runVA{
  0%      { cy:96px; opacity:0 }
  4%      { opacity:1 }
  26%     { cy:185px; opacity:1 }
  30%,100%{ cy:185px; opacity:0 }
}
@keyframes runVB{
  0%,34%  { cy:300px; opacity:0 }
  38%     { opacity:1 }
  58%     { cy:400px; opacity:1 }
  62%,100%{ cy:400px; opacity:0 }
}

.flow figcaption{
  margin-top:clamp(16px,2vw,24px);
  text-align:center;
  color:var(--dim);
  font-size:.74rem;
  font-variation-settings:"wdth" 100,"wght" 600;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .35s var(--ease);
}

/* ── steps ──────────────────────────────────── */

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,3.6vw,56px);
}
.steps li > span{
  display:block;
  color:var(--signal);
  font-size:.74rem;
  font-variation-settings:"wdth" 100,"wght" 700;
  letter-spacing:.1em;
  margin-bottom:12px;
}
.steps h3{
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(1.1rem,1.8vw,1.3rem);
  letter-spacing:-.03em;
  margin-bottom:8px;
}
.steps p{ color:var(--mid); font-size:.93rem; }


/* ── interactive mode showcase ──────────────── */

.modes{ padding-top:clamp(50px,8vh,96px); padding-bottom:clamp(60px,10vh,120px); }

.mode-bar{
  display:flex; gap:4px; flex-wrap:wrap;
  padding:4px;
  background:var(--ink-2);
  border:1px solid var(--hair);
  border-radius:12px;
  margin-bottom:clamp(18px,2.5vw,26px);
}
.mode-bar button{
  flex:1; min-width:84px;
  padding:11px 10px;
  border:0; border-radius:8px;
  background:none; color:var(--mid);
  font:inherit; font-size:.9rem;
  font-variation-settings:"wdth" 102,"wght" 600;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.mode-bar button:hover{ color:var(--paper); }
.mode-bar button.is-on{ background:var(--paper); color:var(--ink); }

.mode{
  display:none;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
.mode.is-on{ display:grid; animation:modeIn .45s var(--ease); }
@keyframes modeIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.mode-copy h3{
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:clamp(1.5rem,2.6vw,2rem);
  letter-spacing:-.035em;
  margin-bottom:10px;
}
.mode-copy p{ color:var(--mid); font-size:.94rem; margin-bottom:18px; }

.mode-spec{ display:flex; flex-direction:column; gap:8px; padding-top:16px; border-top:1px solid var(--hair); }
.mode-spec > div{ display:flex; justify-content:space-between; gap:12px; }
.mode-spec dt{ color:var(--dim); font-size:.8rem; }
.mode-spec dd{ margin:0; font-size:.8rem; font-variation-settings:"wdth" 100,"wght" 600; }

.mode-demo{
  padding:18px;
  background:var(--ink-2);
  border:1px solid var(--hair);
  border-radius:14px;
}
.demo-h{ color:var(--dim); font-size:.76rem; margin-bottom:14px; }

.demo-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--hair);
}
.demo-btn{
  padding:9px 16px;
  border:1px solid var(--hair-2); border-radius:8px;
  background:none; color:var(--paper);
  font:inherit; font-size:.82rem;
  font-variation-settings:"wdth" 100,"wght" 600;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.demo-btn:hover{ background:rgba(250,250,249,.07); }
.demo-btn.is-hot{ background:var(--signal); border-color:var(--signal); color:var(--paper); }
.demo-btn:disabled{ opacity:.35; cursor:not-allowed; }
.demo-note{ color:var(--dim); font-size:.75rem; text-align:right; }

/* ── ghost: two columns ─────────────────────── */

.split{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.split-col h4{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); font-weight:400; margin:0 0 10px;
}
.split-col ul{ display:flex; flex-direction:column; gap:6px; min-height:132px; }
.split-col li{
  padding:9px 10px;
  background:var(--ink);
  border:1px solid var(--hair);
  border-radius:7px;
  font-size:.76rem;
  animation:rowIn .4s var(--ease) backwards;
}
@keyframes rowIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.split-col li.is-blank{ color:var(--dim); border-style:dashed; }
.split-col li.is-bad{ color:var(--signal); border-color:rgba(255,79,24,.3); }
[data-g-chain-col].is-exposed li{ color:var(--signal); border-color:rgba(255,79,24,.3); }

/* ── stage (burner, vault, multisig) ────────── */

.stage{ min-height:170px; display:flex; flex-direction:column; gap:9px; justify-content:center; }
.stage-tall{ min-height:210px; }

.row-item{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px;
  background:var(--ink);
  border:1px solid var(--hair);
  border-radius:8px;
  font-size:.8rem;
  animation:rowIn .4s var(--ease) backwards;
}
.row-item b{ font-variation-settings:"wdth" 100,"wght" 650; }
.row-item .r-right{ margin-left:auto; color:var(--dim); font-size:.74rem; }
.row-item.is-good{ border-color:rgba(74,222,128,.3); }
.row-item.is-good .r-right{ color:var(--good); }
.row-item.is-bad{ border-color:rgba(255,79,24,.34); }
.row-item.is-bad .r-right{ color:var(--signal); }
.row-item.is-dead{ opacity:.4; text-decoration:line-through; }
.r-mono{ font-family:ui-monospace, Menlo, monospace; font-size:.74rem; color:var(--mid); }

.dots{ display:flex; gap:5px; margin-bottom:14px; }
.dots li{ height:3px; flex:1; background:var(--hair); border-radius:2px; transition:background .4s var(--ease); }
.dots li.is-on{ background:var(--paper); }

.big-line{
  font-variation-settings:"wdth" 110,"wght" 700;
  font-size:1.05rem; letter-spacing:-.02em;
}
.big-line.is-bad{ color:var(--signal); }
.big-line.is-good{ color:var(--good); }

.count{
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:2.2rem; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.count.is-bad{ color:var(--signal); }

.meter{ height:4px; background:var(--hair); border-radius:2px; overflow:hidden; }
.meter span{ display:block; height:100%; width:0; background:var(--signal); transition:width 1s linear; }

.kill{
  width:100%; padding:13px;
  border:0; border-radius:9px;
  background:var(--signal); color:var(--paper);
  font:inherit; font-size:.9rem;
  font-variation-settings:"wdth" 102,"wght" 700;
  cursor:pointer;
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.kill:hover{ transform:translateY(-2px); filter:brightness(1.1); }

/* ── multisig members ───────────────────────── */

.members{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.member{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  background:var(--ink);
  border:1px solid var(--hair);
  border-radius:999px;
  font-size:.79rem;
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.member:hover{ border-color:var(--hair-2); }
.member .pip{ width:7px; height:7px; border-radius:50%; background:var(--dim); transition:background .3s var(--ease); }
.member.is-yes{ border-color:rgba(74,222,128,.4); }
.member.is-yes .pip{ background:var(--good); }
.member.is-locked{ cursor:default; opacity:.55; }

/* ── responsive ─────────────────────────────── */

@media (max-width:880px){
  .mode{ grid-template-columns:1fr; }
  .mode.is-on{ grid-template-columns:1fr; }
  .mode-bar button{ font-size:.84rem; padding:10px 6px; min-width:70px; }
  .split{ grid-template-columns:1fr; }
  .split-col ul{ min-height:0; }
  .demo-foot{ flex-direction:column; align-items:stretch; }
  .demo-note{ text-align:left; }
}

/* ── tech ───────────────────────────────────── */

.tech{ padding-top:clamp(50px,8vh,96px); padding-bottom:clamp(60px,10vh,120px); }

.spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,5vw,80px); }
.spec > div{
  display:grid;
  grid-template-columns:106px 1fr;
  gap:clamp(14px,2vw,26px);
  padding:22px 0;
  border-top:1px solid var(--hair);
}
.spec dt{
  color:var(--dim);
  font-size:.74rem;
  font-variation-settings:"wdth" 100,"wght" 700;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding-top:2px;
}
.spec dd{ color:var(--mid); font-size:.9rem; }

/* ── close ──────────────────────────────────── */

.close{
  padding-top:clamp(50px,8vh,96px);
  padding-bottom:clamp(90px,14vh,160px);
  border-top:1px solid var(--hair);
}
.close h2{
  font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(2.3rem,6.4vw,4.4rem);
  line-height:.92;
  letter-spacing:-.042em;
  margin-bottom:clamp(26px,4vw,38px);
}

/* ── foot ───────────────────────────────────── */

.foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  max-width:var(--maxw); margin:0 auto;
  padding:24px var(--gut) 44px;
  border-top:1px solid var(--hair);
  color:var(--dim);
  font-size:.8rem;
}
.foot a:hover{ color:var(--paper); }

/* ── motion ─────────────────────────────────── */

[data-rise]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
[data-rise].in{ opacity:1; transform:none; }
.hero-mark[data-rise]{ transform:translateY(calc(-50% + 16px)); }
.hero-mark[data-rise].in{ transform:translateY(-50%); }

/* ── responsive ─────────────────────────────── */

@media (max-width:880px){
  .sec-head{ grid-template-columns:1fr; gap:16px; align-items:start; }
  .hero{ padding-top:clamp(34px,7vh,70px); padding-bottom:clamp(54px,9vh,90px); }
  .hero h1,.lede{ max-width:none; }
  .hero-mark{
    position:static; transform:none; display:block;
    width:clamp(96px,22vw,130px);
    margin-top:clamp(42px,8vw,62px);
  }
  .hero-mark[data-rise]{ transform:translateY(16px); }
  .hero-mark[data-rise].in{ transform:none; }
  .steps{ grid-template-columns:1fr; }
  .steps{ gap:30px; }
  .spec{ grid-template-columns:1fr; }
  .spec > div{ grid-template-columns:92px 1fr; }
  .foot{ flex-direction:column; align-items:flex-start; gap:8px; }
}

@media (max-width:700px){
  .flow .flow-h{ display:none; }
  .flow .flow-v{ display:block; margin:0 auto; max-width:300px; }
}

@media (max-width:520px){
  .flow{ padding:18px 10px; border-radius:14px; }
  .spec > div{ grid-template-columns:1fr; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .mk-skull,.mk-eyes{ animation:none; }
  .flow.live *{ animation:none !important; }
  .flow .pip,.flow .fresh-mark{ opacity:1; }
  [data-rise]{ opacity:1; transform:none; transition:none; }
  .hero-mark[data-rise]{ transform:translateY(-50%); }
}

a:focus-visible{ outline:2px solid var(--signal); outline-offset:4px; border-radius:3px; }

/* ═══════════════════════════════════════════════
   Feel. Everything below is interaction polish:
   spring easing, surfaces that respond to the
   cursor, state changes that settle instead of
   snapping. No new elements.
   ═══════════════════════════════════════════════ */

:root{
  --spring: cubic-bezier(.34,1.4,.64,1);
  --smooth: cubic-bezier(.22,1,.36,1);
  --quick:  cubic-bezier(.4,0,.2,1);
}

/* ── buttons: lift, light, and a real press ──── */

.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  will-change:transform;
  transition:
    transform .5s var(--spring),
    border-radius .5s var(--spring),
    letter-spacing .5s var(--smooth),
    box-shadow .5s var(--smooth),
    background .35s var(--quick),
    color .35s var(--quick);
}
/* light that follows the cursor across the face */
.btn::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.22), transparent 62%);
  opacity:0;
  transition:opacity .45s var(--smooth);
}
.btn:hover::after{ opacity:1; }
.btn:hover{
  transform:translateY(-2px);
  border-radius:16px;
  box-shadow:0 12px 30px -14px rgba(250,250,249,.45);
}
.btn:active{
  transform:translateY(0) scale(.985);
  transition-duration:.12s;
}

.btn-quiet::after{
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),
             rgba(250,250,249,.14), transparent 62%);
}
.btn-quiet:hover{
  border-color:rgba(250,250,249,.3);
  box-shadow:0 10px 26px -18px rgba(250,250,249,.3);
}

/* ── the mode bar: a pill that slides ────────── */

.mode-bar{ position:relative; }
.mode-bar::before{
  content:"";
  position:absolute;
  top:0; left:0;
  height:var(--pill-h, 0px);
  width:var(--pill-w, 0px);
  transform:translate(var(--pill-x, 0px), var(--pill-y, 0px));
  background:var(--paper);
  border-radius:8px;
  transition:transform .55s var(--spring), width .55s var(--spring), height .3s var(--smooth);
  pointer-events:none;
}
.mode-bar.pill-jump::before{ transition:none; }
.mode-bar button{ position:relative; z-index:1; background:none !important; }
.mode-bar button.is-on{ color:var(--ink); }
.mode-bar button:not(.is-on):hover{ color:var(--paper); }
.mode-bar.no-pill::before{ opacity:0; }

/* ── surfaces: a lit top edge, the expensive trick ── */

.mode-demo,
.flow,
.card{
  position:relative;
  transition:border-color .5s var(--smooth), transform .5s var(--spring), box-shadow .5s var(--smooth);
}
.mode-demo::before,
.flow::before{
  content:"";
  position:absolute; left:14%; right:14%; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(250,250,249,.34), transparent);
  opacity:0;
  transition:opacity .6s var(--smooth);
  pointer-events:none;
}
.mode-demo:hover::before,
.flow:hover::before{ opacity:1; }

/* ── demo rows: settle, don't snap ───────────── */

.row-item,
.split-col li{
  transition:border-color .4s var(--smooth), transform .4s var(--spring), background .4s var(--quick);
  animation:settleIn .5s var(--spring) backwards;
}
@keyframes settleIn{
  from{ opacity:0; transform:translateY(10px) scale(.985) }
  to{ opacity:1; transform:none }
}
.row-item:hover{ transform:translateX(3px); border-color:var(--hair-2); }

/* ── member chips ────────────────────────────── */

.member{
  transition:border-color .4s var(--smooth), transform .45s var(--spring), background .35s var(--quick);
  will-change:transform;
}
.member:not(.is-locked):hover{ transform:translateY(-2px); background:var(--ink-3); }
.member:not(.is-locked):active{ transform:translateY(0) scale(.97); transition-duration:.1s; }
.member .pip{ transition:background .45s var(--spring), box-shadow .45s var(--smooth); }
.member.is-yes .pip{ box-shadow:0 0 0 3px rgba(74,222,128,.18); }

/* ── demo buttons ────────────────────────────── */

.demo-btn{
  position:relative;
  will-change:transform;
  transition:background .35s var(--quick), border-color .35s var(--quick),
             transform .45s var(--spring), box-shadow .45s var(--smooth);
}
.demo-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -14px rgba(250,250,249,.5); }
.demo-btn:active{ transform:translateY(0) scale(.97); transition-duration:.1s; }
.demo-btn.is-hot{ box-shadow:0 0 0 0 rgba(255,79,24,.5); animation:hotPulse 2.4s var(--quick) infinite; }
@keyframes hotPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,79,24,.45) }
  70%{ box-shadow:0 0 0 12px rgba(255,79,24,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,79,24,0) }
}

.kill{
  will-change:transform;
  transition:transform .4s var(--spring), filter .35s var(--quick), box-shadow .45s var(--smooth);
  box-shadow:0 8px 24px -12px rgba(255,79,24,.7);
}
.kill:hover{ transform:translateY(-2px) scale(1.01); filter:brightness(1.08); box-shadow:0 14px 34px -12px rgba(255,79,24,.8); }
.kill:active{ transform:translateY(0) scale(.985); transition-duration:.1s; }

/* ── links: a wipe, not a fade ───────────────── */

.topnav a,
.foot a,
.nav nav a:not(.ghost-btn){
  position:relative;
}
.topnav a::after,
.foot a::after{
  content:"";
  position:absolute; left:0; bottom:-3px;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--smooth);
}
.topnav a:hover::after,
.foot a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ── reveals: add depth to the entrance ──────── */

[data-rise]{
  transform:translateY(22px) scale(.992);
  filter:blur(5px);
  transition:
    opacity 1s var(--smooth),
    transform 1s var(--spring),
    filter .8s var(--smooth);
}
[data-rise].in{ transform:none; filter:blur(0); }
.hero-mark[data-rise]{ transform:translateY(calc(-50% + 22px)) scale(.992); }
.hero-mark[data-rise].in{ transform:translateY(-50%) scale(1); }

/* ── mode panels: cross-fade with lift ───────── */

.mode.is-on{ animation:modeIn .55s var(--spring); }
@keyframes modeIn{
  from{ opacity:0; transform:translateY(14px) scale(.994) }
  to{ opacity:1; transform:none }
}

/* ── the pill and spec rows ──────────────────── */

.mode-spec > div{
  transition:color .35s var(--quick);
  padding:3px 0;
}
.mode-spec > div:hover dt{ color:var(--mid); }

/* ── respect the setting ─────────────────────── */

@media (prefers-reduced-motion:reduce){
  .mode-bar::before{ transition:none; }
  .btn,.demo-btn,.kill,.member,.row-item{ transition:none !important; animation:none !important; }
  .demo-btn.is-hot{ animation:none; }
  [data-rise]{ filter:none; transform:none; }
}