/* ============================================================
   0. RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--anchor);outline-offset:3px;border-radius:2px}

/* ============================================================
   1. MINT / FOREST PALETTE  (shared roles across both modes)
      anchor = deep saturated fill  ·  pop = bright highlight
   ============================================================ */
:root{
  --anchor:#16251E;  --on-anchor:#B8ECD6;
  --pop:#B8ECD6;     --on-pop:#16251E;
  --ink:#16251E; --ink-2:#4C5D55; --ink-3:#7E8D86;
  --bg:#F4FAF6; --bg-2:#E7F5EE; --surface:#FFFFFF;
  --line:#D6E7DE;
  --dark:#0D1712; --dark-2:#16251E;
  --hue:158;
}

/* ============================================================
   2. TYPE SCALE + SHARED TOKENS
   ============================================================ */
:root{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Times New Roman",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --maxw:1180px;
  --t:.55s cubic-bezier(.2,.8,.2,1);
}

/* ============================================================
   2b. MODES — light ("soft": rounded, airy, gradient washes)
              dark  ("glass": dark canvas, blurred panels, glow)
   ============================================================ */
html[data-theme="light"]{
  color-scheme:light;
  --f-display:var(--sans); --f-body:var(--sans); --f-label:var(--sans);
  --w-display:760; --tr-display:-.035em; --lh-display:1.12; --case-display:none;
  --h1:clamp(2.6rem,6.2vw,4.6rem);
  --w-label:600; --tr-label:.01em; --case-label:none; --size-label:.8125rem;
  --r-lg:26px; --r-md:18px; --r-sm:12px; --r-btn:999px; --r-chip:999px;
  --bw:1px; --bc:var(--line);
  --sh:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),0 12px 28px -18px color-mix(in srgb,var(--ink) 22%,transparent);
  --sh-lg:0 2px 4px color-mix(in srgb,var(--ink) 5%,transparent),0 40px 70px -40px color-mix(in srgb,var(--ink) 30%,transparent);
  --sec-y:clamp(4rem,7.5vw,7rem);
  --card-bg:var(--surface);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --f-display:var(--sans); --f-body:var(--sans); --f-label:var(--mono);
  --w-display:620; --tr-display:-.03em; --lh-display:1.12; --case-display:none;
  --h1:clamp(2.5rem,6vw,4.5rem);
  --w-label:500; --tr-label:.12em; --case-label:uppercase; --size-label:.6875rem;
  --r-lg:24px; --r-md:16px; --r-sm:10px; --r-btn:999px; --r-chip:999px;
  --bw:1px; --bc:color-mix(in srgb,var(--pop) 16%,transparent);
  --sh:0 1px 0 color-mix(in srgb,#fff 8%,transparent) inset,0 24px 48px -32px #000;
  --sh-lg:0 1px 0 color-mix(in srgb,#fff 10%,transparent) inset,0 50px 90px -40px #000;
  --sec-y:clamp(4rem,7.5vw,7rem);
  --bg:var(--dark); --bg-2:var(--dark-2);
  --surface:color-mix(in srgb,var(--pop) 6%,transparent);
  --card-bg:var(--surface);
  --line:color-mix(in srgb,var(--pop) 14%,transparent);
  --ink:#EAF6F0; --ink-2:#9DB3A9; --ink-3:#6E8279;
  --anchor:#B8ECD6; --on-anchor:#0D1712;
}

/* ============================================================
   3. BASE TYPE + PAGE CANVAS
   ============================================================ */
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--bg);
  font-size:1rem; line-height:1.6;
  transition:background-color var(--t),color var(--t);
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:var(--f-display);
  font-weight:var(--w-display);
  letter-spacing:var(--tr-display);
  line-height:var(--lh-display);
  text-transform:var(--case-display);
  text-wrap:balance;
}
h1{font-size:var(--h1)}
h2{font-size:clamp(1.95rem,4vw,3.05rem)}
h3{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.3}
p{text-wrap:pretty}
.lead{font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.55;color:var(--ink-2);max-width:62ch}
.small{font-size:.875rem;line-height:1.55;color:var(--ink-2)}
.tiny{font-size:.75rem;line-height:1.5;color:var(--ink-3)}
strong{font-weight:650;color:var(--ink)}
code,.mono{font-family:var(--mono);font-size:.9em;letter-spacing:-.01em}

/* ambient background wash */
.wash{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .6s}
.wash i{position:absolute;border-radius:50%;filter:blur(80px)}
.wash i:nth-child(1){width:52vw;height:52vw;top:-16vw;right:-10vw;background:color-mix(in srgb,var(--pop) 55%,transparent)}
.wash i:nth-child(2){width:40vw;height:40vw;top:38vw;left:-14vw;background:color-mix(in srgb,var(--anchor) 16%,transparent)}
.wash i:nth-child(3){width:34vw;height:34vw;bottom:-8vw;right:8vw;background:color-mix(in srgb,var(--pop) 32%,transparent)}
html[data-theme="dark"] .wash i{filter:blur(110px);opacity:.42}

/* ============================================================
   4. LAYOUT
   ============================================================ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);position:relative;z-index:1}
section{padding-block:var(--sec-y);position:relative;z-index:1}
section + section{padding-top:calc(var(--sec-y) * .5)}
.rule{border:0;border-top:var(--bw) solid var(--bc)}

.label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-label);font-size:var(--size-label);font-weight:var(--w-label);
  letter-spacing:var(--tr-label);text-transform:var(--case-label);
  color:var(--ink-2);
}
.label::before{content:"";width:1.75rem;height:var(--bw);background:currentColor;opacity:.5}
html[data-theme="light"] .label::before{display:none}
html[data-theme="light"] .label{
  background:color-mix(in srgb,var(--anchor) 7%,transparent);
  color:var(--ink);padding:.375rem .8rem;border-radius:999px;
}

/* align-items:flex-start so the .label pill hugs its text instead of stretching */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;max-width:44ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head.center{max-width:52ch;margin-inline:auto;text-align:center;align-items:center}

.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  --pad:1.05rem 1.6rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:var(--pad);border-radius:var(--r-btn);
  font-family:var(--f-label);font-weight:600;font-size:.9375rem;letter-spacing:0;
  border:var(--bw) solid transparent;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .2s,color .2s,box-shadow .2s,border-color .2s;
  white-space:nowrap;
}
.btn--primary{background:var(--anchor);color:var(--on-anchor);border-color:var(--anchor)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px color-mix(in srgb,var(--anchor) 60%,transparent)}
.btn--ghost{border-color:var(--bc);color:var(--ink);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.btn--ghost:hover{border-color:var(--anchor);color:var(--anchor)}
html[data-theme="dark"] .btn--ghost{background:color-mix(in srgb,var(--pop) 8%,transparent);backdrop-filter:blur(12px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ============================================================
   6. CARD PRIMITIVE
   ============================================================ */
.card{
  background:var(--card-bg);
  border:var(--bw) solid var(--bc);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  padding:clamp(1.4rem,2.3vw,1.9rem);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s,background-color var(--t);
}
html[data-theme="dark"] .card{backdrop-filter:blur(18px) saturate(140%)}
.card--lift:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}

/* ============================================================
   7. NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  border-bottom:var(--bw) solid transparent;
  transition:background-color .3s,border-color .3s,backdrop-filter .3s;
}
.nav.stuck{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px) saturate(180%);
  border-bottom-color:var(--bc);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:var(--w-display);letter-spacing:var(--tr-display);font-size:1.2rem;text-transform:var(--case-display)}
.brand__mark{height:2rem;width:auto;aspect-ratio:898/1167;flex:none}
.nav__links{display:flex;gap:1.9rem;align-items:center}
.nav__links a{font-size:.9375rem;color:var(--ink-2);transition:color .2s;position:relative}
.nav__links a:hover{color:var(--ink)}
.nav__cta{display:flex;gap:.6rem;align-items:center}
.nav__cta .btn{--pad:.65rem 1.15rem;font-size:.875rem}
@media (max-width:900px){.nav__links{display:none}}
@media (max-width:520px){.nav__cta .btn--ghost{display:none}}

/* ============================================================
   8. HERO
   ============================================================ */
.hero{padding-top:clamp(3rem,6vw,5.5rem);padding-bottom:var(--sec-y)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr;gap:3rem}}
.hero__copy{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
/* Highlight sits inside the line box via padding, never a spread shadow —
   a spread grows past the leading and collides with the line above. */
.hero h1 em{font-style:normal;position:relative;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-theme="light"] .hero h1 em{
  background:linear-gradient(105deg,var(--pop),color-mix(in srgb,var(--pop) 45%,#fff));
  padding:.02em .14em;margin-inline:-.06em;border-radius:.16em;
}
html[data-theme="dark"] .hero h1 em{background:linear-gradient(100deg,var(--pop),color-mix(in srgb,var(--pop) 45%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__trust{display:flex;flex-wrap:wrap;gap:.4rem 1.15rem;align-items:center;font-size:.8125rem;color:var(--ink-3)}
.hero__trust span{display:flex;align-items:center;gap:.45rem}
.hero__trust span::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--anchor);flex:none}

/* --- compression visual --- */
.viz{position:relative}
.viz__panel{
  background:var(--surface);border:var(--bw) solid var(--bc);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);overflow:hidden;
}
html[data-theme="dark"] .viz__panel{backdrop-filter:blur(20px) saturate(150%);background:color-mix(in srgb,var(--pop) 7%,transparent)}
.viz__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding:.8rem 1.1rem;border-bottom:var(--bw) solid var(--bc);
  font-family:var(--mono);font-size:.75rem;color:var(--ink-3);letter-spacing:0;
}
.viz__bar i{width:.55rem;height:.55rem;border-radius:50%;background:var(--ink-3);opacity:.35;flex:none}
.viz__bar i:first-child{background:var(--anchor);opacity:1}
.viz__bar b{margin-left:auto;font-weight:500;color:var(--ink-2)}
.viz__body{padding:clamp(1.2rem,2.2vw,1.7rem);display:flex;flex-direction:column;gap:1.35rem}
.meter{display:flex;flex-direction:column;gap:.5rem}
.meter__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.meter__name{font-family:var(--f-label);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.meter__val{font-family:var(--mono);font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums}
.track{height:.7rem;border-radius:var(--r-chip);background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;border:0}
.track>i{display:block;height:100%;width:0;border-radius:inherit;transition:width 1.5s cubic-bezier(.16,1,.3,1) .25s}
.track--before>i{background:color-mix(in srgb,var(--ink) 26%,transparent)}
.track--after>i{background:var(--anchor)}
html[data-theme="dark"] .track--after>i{background:var(--pop);box-shadow:0 0 18px color-mix(in srgb,var(--pop) 60%,transparent)}
.is-in .track--before>i{width:100%}
.is-in .track--after>i{width:var(--w,22%)}
.viz__foot{
  display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;
  padding:1rem clamp(1.2rem,2.2vw,1.7rem);
  border-top:var(--bw) solid var(--bc);
  background:color-mix(in srgb,var(--anchor) 5%,transparent);
  font-family:var(--mono);font-size:.75rem;color:var(--ink-2);
}
/* ============================================================
   9. LOGO STRIP
   ============================================================ */
.strip{padding-block:clamp(2rem,4vw,3rem)}
.strip__in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem clamp(1.5rem,4vw,3.25rem);justify-content:center}
.strip__lbl{font-family:var(--f-label);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);width:100%;text-align:center;margin-bottom:.5rem}
.strip__logo{
  font-family:var(--f-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.02em;
  color:var(--ink);opacity:.42;transition:opacity .2s;display:flex;align-items:center;gap:.45rem;
}
.strip__logo:hover{opacity:.85}
.strip__logo svg{width:1.05rem;height:1.05rem;flex:none}
html[data-theme="dark"] .strip__logo{opacity:.6}

/* ============================================================
   10. STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:var(--bw) solid var(--bc);border-radius:var(--r-lg);overflow:hidden;background:var(--card-bg);box-shadow:var(--sh)}
html[data-theme="dark"] .stats{backdrop-filter:blur(18px)}
.stat{padding:clamp(1.5rem,2.6vw,2.1rem);border-right:var(--bw) solid var(--bc)}
.stat:last-child{border-right:0}
.stat__num{font-family:var(--f-display);font-weight:var(--w-display);letter-spacing:var(--tr-display);font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.06em}
.stat__num s{text-decoration:none;font-size:.5em;color:var(--anchor)}
html[data-theme="dark"] .stat__num{font-family:var(--mono)}
.stat__lbl{margin-top:.6rem;font-size:.875rem;color:var(--ink-2);line-height:1.4}
@media (max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:var(--bw) solid var(--bc)}
}
@media (max-width:420px){.stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:var(--bw) solid var(--bc)}.stat:last-child{border-bottom:0}}

/* ============================================================
   11. STEPS
   ============================================================ */
.steps{counter-reset:s}
.step{position:relative;counter-increment:s;display:flex;flex-direction:column;gap:.85rem}
.step__n{
  width:2.6rem;height:2.6rem;flex:none;display:grid;place-items:center;
  border-radius:var(--r-chip);border:var(--bw) solid var(--bc);
  font-family:var(--mono);font-size:.9375rem;font-weight:700;
  background:var(--anchor);color:var(--on-anchor);border-color:var(--anchor);
}
.step__n::before{content:"0" counter(s)}
.step pre{
  font-family:var(--mono);font-size:.75rem;line-height:1.7;
  background:color-mix(in srgb,var(--ink) 5%,transparent);
  border:var(--bw) solid var(--bc);border-radius:var(--r-sm);
  padding:.85rem 1rem;overflow-x:auto;color:var(--ink-2);margin-top:.3rem;
}
html[data-theme="dark"] .step pre{background:color-mix(in srgb,#000 30%,transparent)}
.step pre b{color:var(--anchor);font-weight:600}
html[data-theme="dark"] .step pre b{color:var(--pop)}

/* ============================================================
   13. FEATURES
   ============================================================ */
.feat__ico{
  width:2.5rem;height:2.5rem;display:grid;place-items:center;flex:none;
  border-radius:var(--r-sm);border:var(--bw) solid var(--bc);
  background:color-mix(in srgb,var(--pop) 45%,transparent);color:var(--ink);
  margin-bottom:1.1rem;
}
.feat__ico svg{width:1.15rem;height:1.15rem}
html[data-theme="dark"] .feat__ico{background:color-mix(in srgb,var(--pop) 14%,transparent);color:var(--pop);border-color:color-mix(in srgb,var(--pop) 30%,transparent)}
.feat h3{margin-bottom:.5rem}
.feat p{font-size:.9375rem;color:var(--ink-2);line-height:1.6}

/* ============================================================
   13b. SECTION HEAD BESIDE A PANEL
   ============================================================ */
.split{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.split .sec-head{margin-bottom:0}
@media (max-width:1000px){.split{grid-template-columns:minmax(0,1fr);gap:2.5rem}}

/* ============================================================
   13c. DOLLAR MATRIX  (one cell = one dollar of today's bill)
   ============================================================ */
.dots{display:grid;grid-template-columns:repeat(20,1fr);gap:.3rem}
.dots i{
  aspect-ratio:1;border-radius:3px;
  background:color-mix(in srgb,var(--ink) 10%,transparent);
  transition:background-color .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;
}
html[data-theme="dark"] .dots i{background:color-mix(in srgb,var(--pop) 10%,transparent)}
.is-in .dots i:nth-child(-n+29){background:var(--anchor)}
html[data-theme="dark"] .is-in .dots i:nth-child(-n+29){background:var(--pop);box-shadow:0 0 10px color-mix(in srgb,var(--pop) 45%,transparent)}
/* left-to-right wipe as the panel reveals */
.dots i:nth-child(-n+8){transition-delay:.15s}
.dots i:nth-child(n+9):nth-child(-n+16){transition-delay:.28s}
.dots i:nth-child(n+17):nth-child(-n+24){transition-delay:.41s}
.dots i:nth-child(n+25):nth-child(-n+29){transition-delay:.54s}
.dots__key{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.35rem}
.dots__k{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-2);
}
.dots__k::before{
  content:"";width:.7rem;height:.7rem;border-radius:3px;flex:none;
  background:color-mix(in srgb,var(--ink) 10%,transparent);
}
html[data-theme="dark"] .dots__k::before{background:color-mix(in srgb,var(--pop) 10%,transparent)}
.dots__k--on{color:var(--ink);font-weight:600}
.dots__k--on::before{background:var(--anchor)}
html[data-theme="dark"] .dots__k--on::before{background:var(--pop)}

/* ============================================================
   13d. SAVINGS LAYERS + CONTROLS
   ============================================================ */
.layer{display:flex;flex-direction:column;gap:.5rem}
.layer__n{font-family:var(--mono);font-size:.75rem;font-weight:700;color:var(--ink-3);letter-spacing:.06em;margin-bottom:.3rem}
.layer h3{font-size:1rem}
.layer p{font-size:.875rem;color:var(--ink-2);line-height:1.55}

.ctrls{margin-top:clamp(1rem,2vw,1.5rem)}
.ctrl{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1.05rem 1.2rem;border-radius:var(--r-md);
  border:var(--bw) solid var(--bc);
  background:color-mix(in srgb,var(--ink) 3%,transparent);
}
html[data-theme="dark"] .ctrl{background:color-mix(in srgb,var(--pop) 5%,transparent)}
.ctrl .feat__ico{margin-bottom:0;width:2.1rem;height:2.1rem}
.ctrl .feat__ico svg{width:1rem;height:1rem}
.ctrl h3{font-size:.9375rem;margin-bottom:.15rem}

/* ============================================================
   13e. DISCLOSURES  (one category open at a time, chips inside)
   ============================================================ */
.disc-stack{display:flex;flex-direction:column;gap:.6rem;max-width:64rem;margin-inline:auto}
.disc{
  border:var(--bw) solid var(--bc);border-radius:var(--r-md);
  background:var(--card-bg);box-shadow:var(--sh);
  transition:border-color .2s,box-shadow .2s,background-color var(--t);
}
html[data-theme="dark"] .disc{backdrop-filter:blur(18px)}
.disc:hover{border-color:color-mix(in srgb,var(--anchor) 35%,var(--bc))}
.disc[open]{box-shadow:var(--sh-lg)}
.disc summary{display:flex;align-items:center;gap:.9rem;padding:1.05rem clamp(1.1rem,2vw,1.4rem)}
.disc summary::after{
  content:"";flex:none;margin-left:.25rem;
  width:.7rem;height:.7rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;opacity:.45;transition:rotate .25s,opacity .25s;
}
.disc[open] summary::after{rotate:225deg;opacity:.9}
.disc summary:hover .disc__t{color:var(--anchor)}
.disc__ico{
  width:2.2rem;height:2.2rem;flex:none;display:grid;place-items:center;
  border-radius:var(--r-sm);border:var(--bw) solid var(--bc);
  background:color-mix(in srgb,var(--pop) 45%,transparent);color:var(--ink);
}
.disc__ico svg{width:1.05rem;height:1.05rem}
html[data-theme="dark"] .disc__ico{background:color-mix(in srgb,var(--pop) 14%,transparent);color:var(--pop);border-color:color-mix(in srgb,var(--pop) 30%,transparent)}
.disc__t{
  min-width:0;
  font-family:var(--f-display);font-weight:var(--w-display);
  letter-spacing:var(--tr-display);font-size:clamp(1rem,1.6vw,1.15rem);
  text-transform:var(--case-display);transition:color .2s;
}
.disc__t small{
  display:block;margin-top:.25rem;
  font-family:var(--f-body);font-weight:400;letter-spacing:0;
  font-size:.8125rem;line-height:1.45;color:var(--ink-2);text-transform:none;
}
.disc__n{
  margin-left:auto;flex:none;
  font-family:var(--mono);font-size:.6875rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.disc__n::after{content:" features"}
/* hugs its label while closed so it reads as an affordance, not an empty row */
.disc--slim{max-width:fit-content;margin-top:clamp(1.25rem,2.5vw,1.75rem);box-shadow:none;background:none;border-style:dashed}
.disc--slim summary{padding:.8rem 1.1rem}
.disc--slim .disc__t{font-size:.9375rem}
.disc--slim[open]{max-width:64rem;box-shadow:var(--sh);background:var(--card-bg);border-style:solid}
/* ============================================================
   13f. SPEC LISTS  (name plus the one line that explains it)
   ============================================================ */
.specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.15rem 2.25rem;
  padding:1.25rem clamp(1.1rem,2vw,1.4rem) 1.4rem;
  border-top:var(--bw) solid var(--bc);
}
.disc--slim .specs{padding:1.1rem 1.1rem 1.2rem}
.specs li{display:flex;flex-direction:column;gap:.15rem}
.specs b{font-size:.875rem;font-weight:650;color:var(--ink);line-height:1.35}
.specs span{font-size:.8125rem;color:var(--ink-3);line-height:1.45}
@media (max-width:700px){.specs{grid-template-columns:minmax(0,1fr);gap:1rem}}
@media (max-width:560px){.disc__n{display:none}}

/* ============================================================
   14. QUOTE
   ============================================================ */
.quote{
  border:var(--bw) solid var(--bc);border-radius:var(--r-lg);
  background:var(--anchor);color:var(--on-anchor);
  padding:clamp(2rem,4vw,3.5rem);box-shadow:var(--sh);
}
html[data-theme="dark"] .quote{background:color-mix(in srgb,var(--pop) 9%,transparent);color:var(--ink);backdrop-filter:blur(18px)}
.quote blockquote{
  font-family:var(--f-display);font-weight:var(--w-display);letter-spacing:var(--tr-display);
  font-size:clamp(1.35rem,2.9vw,2.1rem);line-height:1.25;max-width:34ch;text-wrap:balance;
}
.quote figcaption{margin-top:1.7rem;display:flex;align-items:center;gap:.85rem;font-size:.875rem;opacity:.85}
.quote__av{width:2.4rem;height:2.4rem;border-radius:var(--r-chip);flex:none;display:grid;place-items:center;font-family:var(--mono);font-size:.8125rem;font-weight:700;background:color-mix(in srgb,currentColor 18%,transparent);border:var(--bw) solid color-mix(in srgb,currentColor 30%,transparent)}

/* ============================================================
   15. PRICING
   ============================================================ */
.price{display:flex;flex-direction:column;gap:1.15rem;height:100%}
.price--hi{position:relative;background:var(--anchor);color:var(--on-anchor);border-color:var(--anchor)}
html[data-theme="dark"] .price--hi{background:color-mix(in srgb,var(--pop) 11%,transparent);color:var(--ink);border-color:color-mix(in srgb,var(--pop) 34%,transparent)}
/* inherit from the card, not from .price__list's muted colour — otherwise
   muted ink lands on the filled card and drops below readable contrast */
.price--hi .price__sub,.price--hi .price__list{color:inherit;opacity:.88}
html[data-theme="dark"] .price--hi .price__sub,html[data-theme="dark"] .price--hi .price__list{opacity:1;color:var(--ink-2)}
.price__tag{position:absolute;top:-.85rem;right:1.2rem;background:var(--pop);color:var(--on-pop);border:var(--bw) solid var(--bc);border-radius:var(--r-chip);padding:.3rem .7rem;font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
html[data-theme="dark"] .price__tag{background:var(--pop);color:var(--on-pop);border-color:transparent}
.price__name{font-family:var(--f-label);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.75}
.price__amt{font-family:var(--f-display);font-weight:var(--w-display);letter-spacing:var(--tr-display);font-size:clamp(2.1rem,4vw,2.8rem);line-height:1;display:flex;align-items:baseline;gap:.25rem}
html[data-theme="dark"] .price__amt{font-family:var(--mono)}
.price__amt span{font-family:var(--f-body);font-size:.875rem;font-weight:500;letter-spacing:0;opacity:.7;text-transform:none}
.price__sub{font-size:.875rem;color:var(--ink-2);line-height:1.5;min-height:2.6em}
.price__list{display:flex;flex-direction:column;gap:.6rem;font-size:.875rem;color:var(--ink-2);margin-top:.2rem}
.price__list li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.45}
.price__list svg{width:.95rem;height:.95rem;flex:none;margin-top:.28rem}
.price .btn{margin-top:auto;width:100%}
.price--hi .btn--primary{background:var(--on-anchor);color:var(--anchor);border-color:var(--on-anchor)}
html[data-theme="dark"] .price--hi .btn--primary{background:var(--anchor);color:var(--on-anchor);border-color:var(--anchor)}
.price__amt b{font:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums}
.price__amt--sm{font-size:clamp(1.6rem,3vw,2.1rem)}
.price__amt--share{gap:.55rem}

/* ============================================================
   15b. PRICING — PRODUCT SWITCH + PANES
   ============================================================ */
.pswitch__row{display:flex;justify-content:center;margin-bottom:clamp(2rem,4vw,3rem)}
.pswitch{
  display:inline-flex;gap:.25rem;padding:.3rem;
  border:var(--bw) solid var(--bc);border-radius:var(--r-btn);
  background:color-mix(in srgb,var(--surface) 75%,transparent);box-shadow:var(--sh);
}
html[data-theme="dark"] .pswitch{background:color-mix(in srgb,var(--pop) 7%,transparent);backdrop-filter:blur(14px)}
.pswitch__opt{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.7rem 1.3rem;border-radius:var(--r-btn);
  font-family:var(--f-label);font-weight:600;font-size:.9375rem;
  color:var(--ink-2);transition:background-color .22s,color .22s;
}
.pswitch__opt:hover{color:var(--ink)}
.pswitch__opt[aria-selected="true"]{background:var(--anchor);color:var(--on-anchor)}
.pswitch__badge{
  font-family:var(--mono);font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.16rem .48rem;border-radius:var(--r-chip);
  background:color-mix(in srgb,var(--pop) 60%,transparent);color:var(--on-pop);
}
html[data-theme="dark"] .pswitch__badge{background:color-mix(in srgb,var(--pop) 22%,transparent);color:var(--pop)}
.pswitch__opt[aria-selected="true"] .pswitch__badge{background:color-mix(in srgb,var(--on-anchor) 85%,transparent);color:var(--anchor)}

.pane{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.5rem);max-width:1020px;margin-inline:auto;
}
.pane[hidden]{display:none}
.pane__note{grid-column:1/-1;text-align:center;margin-top:.4rem}
.pane__note a{color:var(--anchor);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.pane{grid-template-columns:minmax(0,1fr)}}

.card--arch{display:flex;flex-direction:column}
.card--arch .arch{flex:1}
.card--arch .arch__link{flex:1;height:auto;min-height:2.5rem}
.arch{display:flex;flex-direction:column;margin-top:1.35rem}
.arch__node{
  border:var(--bw) solid var(--bc);border-radius:var(--r-md);
  padding:.85rem 1rem;background:color-mix(in srgb,var(--ink) 4%,transparent);
}
html[data-theme="dark"] .arch__node{background:color-mix(in srgb,#000 26%,transparent)}
.arch__node--gw{background:var(--anchor);color:var(--on-anchor);border-color:var(--anchor)}
html[data-theme="dark"] .arch__node--gw{background:color-mix(in srgb,var(--pop) 13%,transparent);color:var(--ink);border-color:color-mix(in srgb,var(--pop) 34%,transparent)}
.arch__k{font-family:var(--f-label);font-size:.8125rem;font-weight:700;letter-spacing:.01em}
.arch__v{font-family:var(--mono);font-size:.6875rem;line-height:1.4;margin-top:.2rem;opacity:.72}
.arch__link{
  display:flex;align-items:center;gap:.7rem;height:2.5rem;padding-left:1rem;
  color:var(--ink-3);font-family:var(--mono);font-size:.6875rem;
}
.arch__link::before{content:"";width:2px;align-self:stretch;border-radius:2px;background:currentColor;opacity:.35}
.arch .mpick{margin-top:.5rem}

.mpick{display:flex;flex-wrap:wrap;gap:.4rem}
.mchip{
  font-family:var(--mono);font-size:.6875rem;padding:.32rem .62rem;
  border-radius:var(--r-chip);border:var(--bw) solid var(--bc);color:var(--ink-2);
}
.mchip--on{background:var(--pop);color:var(--on-pop);border-color:var(--pop);font-weight:700}
.bub{
  border:var(--bw) solid var(--bc);border-radius:var(--r-md);
  padding:.7rem .9rem;font-size:.875rem;line-height:1.5;max-width:90%;
  background:color-mix(in srgb,var(--ink) 4%,transparent);
}
html[data-theme="dark"] .bub{background:color-mix(in srgb,#000 24%,transparent)}
.bub--me{margin-left:auto;background:var(--anchor);color:var(--on-anchor);border-color:var(--anchor)}
html[data-theme="dark"] .bub--me{background:color-mix(in srgb,var(--pop) 13%,transparent);color:var(--ink)}
.bub__meta{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.6875rem;color:var(--ink-3)}

.guar{
  display:flex;gap:.6rem;align-items:flex-start;
  padding:.7rem .85rem;border-radius:var(--r-sm);
  border:var(--bw) solid color-mix(in srgb,currentColor 22%,transparent);
  background:color-mix(in srgb,currentColor 9%,transparent);
  font-size:.8125rem;line-height:1.45;
}
.guar svg{width:1rem;height:1rem;flex:none;margin-top:.12rem}
.guar strong{color:inherit;font-weight:700}

/* ============================================================
   16. FAQ
   ============================================================ */
.faq{max-width:56rem;margin-inline:auto;border-top:var(--bw) solid var(--bc)}
.faq details{border-bottom:var(--bw) solid var(--bc)}
.faq summary{display:flex;gap:1.25rem;align-items:center;padding:1.3rem 0;font-family:var(--f-display);font-weight:var(--w-display);letter-spacing:var(--tr-display);font-size:clamp(1rem,1.7vw,1.2rem);text-transform:var(--case-display);transition:color .2s}
.faq summary:hover{color:var(--anchor)}
.faq summary::after{content:"";margin-left:auto;flex:none;width:.85rem;height:.85rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;transition:rotate .25s;opacity:.5}
.faq details[open] summary::after{rotate:225deg;opacity:1}
.faq details p{padding-bottom:1.4rem;max-width:64ch;color:var(--ink-2);font-size:.9375rem}

/* ============================================================
   17. FINAL CTA
   ============================================================ */
.cta__box{
  border:var(--bw) solid var(--bc);border-radius:var(--r-lg);
  padding:clamp(2.2rem,5vw,4rem);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  background:var(--card-bg);box-shadow:var(--sh-lg);position:relative;overflow:hidden;
}
html[data-theme="light"] .cta__box{background:linear-gradient(160deg,color-mix(in srgb,var(--pop) 45%,var(--surface)),var(--surface))}
html[data-theme="dark"] .cta__box{backdrop-filter:blur(20px);background:color-mix(in srgb,var(--pop) 8%,transparent)}
.cta__box .lead{max-width:46ch;text-align:center}

/* ============================================================
   18. FOOTER
   ============================================================ */
footer{border-top:var(--bw) solid var(--bc);padding-block:clamp(2.5rem,5vw,4rem) 2rem;position:relative;z-index:1}
.foot__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2.5rem 2rem}
@media (max-width:840px){.foot__grid{grid-template-columns:1fr 1fr}}
.foot__col h4{font-family:var(--f-label);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:1.05rem}
.foot__col ul{display:flex;flex-direction:column;gap:.65rem}
.foot__col a{font-size:.875rem;color:var(--ink-2);transition:color .2s}
.foot__col a:hover{color:var(--anchor)}
.foot__bot{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;margin-top:clamp(2rem,4vw,3.25rem);padding-top:1.5rem;border-top:var(--bw) solid var(--bc);font-size:.8125rem;color:var(--ink-3)}

/* ============================================================
   19. MODE TOGGLE  (light ⇄ dark, lives in the nav)
   ============================================================ */
.mode{
  position:relative;flex:none;
  width:3.4rem;height:1.85rem;padding:0;
  border-radius:999px;
  border:var(--bw) solid var(--bc);
  background:color-mix(in srgb,var(--anchor) 8%,transparent);
  transition:background-color .25s,border-color .25s;
}
html[data-theme="dark"] .mode{background:color-mix(in srgb,var(--pop) 10%,transparent)}
.mode:hover{border-color:var(--anchor)}
/* the knob slides right in dark mode */
.mode__knob{
  position:absolute;top:50%;left:.22rem;translate:0 -50%;
  width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--anchor);color:var(--on-anchor);
  display:grid;place-items:center;
  transition:translate .3s cubic-bezier(.2,.8,.2,1),background-color .25s;
}
html[data-theme="dark"] .mode__knob{translate:1.55rem -50%}
.mode__knob svg{width:.8rem;height:.8rem;position:absolute;transition:opacity .2s,rotate .3s}
.mode__knob .i-moon{opacity:0;rotate:-45deg}
html[data-theme="dark"] .mode__knob .i-sun{opacity:0;rotate:45deg}
html[data-theme="dark"] .mode__knob .i-moon{opacity:1;rotate:0deg}

/* ============================================================
   20. REVEAL MOTION
   ============================================================ */
/* visible by default — only hidden once JS confirms it can reveal them again */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
html.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html.js .rv{opacity:1!important;transform:none!important}
  .is-in .track>i,.track>i{transition:none!important}
}

/* responsive grid collapse */
@media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.g-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   21. DOCUMENT PAGES  (Impressum · Datenschutz · AGB · Security)
   ============================================================ */
.doc{padding-top:clamp(2.5rem,5vw,4rem)}
.doc__head{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:34ch;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.doc__head h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.doc__meta{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);letter-spacing:0}
.doc__grid{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.doc__grid{grid-template-columns:minmax(0,1fr)}}

.doc__body{max-width:68ch}
.doc__body h2{
  font-size:clamp(1.2rem,2vw,1.5rem);
  margin-top:clamp(2rem,3.5vw,2.75rem);padding-top:1.25rem;
  border-top:var(--bw) solid var(--bc);
}
.doc__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc__body h3{font-size:1rem;margin-top:1.5rem}
.doc__body p,.doc__body li{color:var(--ink-2);font-size:.9375rem;line-height:1.7}
.doc__body p{margin-top:.85rem}
.doc__body ul{display:flex;flex-direction:column;gap:.5rem;margin-top:.85rem}
.doc__body li{position:relative;padding-left:1.15rem}
.doc__body li::before{content:"";position:absolute;left:.1rem;top:.68em;width:.35rem;height:.35rem;border-radius:50%;background:var(--anchor);opacity:.5}
.doc__body a{color:var(--anchor);text-decoration:underline;text-underline-offset:3px}
.doc__body strong{font-weight:650}
.doc__body address{font-style:normal;font-family:var(--mono);font-size:.8125rem;line-height:1.8;color:var(--ink-2);margin-top:.85rem}

/* every value that must be replaced before this page goes live */
.fill{
  font-family:var(--mono);font-size:.9em;white-space:nowrap;
  padding:.08em .4em;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--pop) 55%,transparent);color:var(--ink);
  border-bottom:2px dashed color-mix(in srgb,var(--anchor) 40%,transparent);
}
html[data-theme="dark"] .fill{background:color-mix(in srgb,var(--pop) 16%,transparent);color:var(--pop);border-bottom-color:color-mix(in srgb,var(--pop) 40%,transparent)}

.doc__notice{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:1rem 1.15rem;border-radius:var(--r-md);
  border:var(--bw) solid color-mix(in srgb,var(--anchor) 22%,transparent);
  background:color-mix(in srgb,var(--pop) 30%,transparent);
  font-size:.875rem;line-height:1.55;color:var(--ink);
  margin-bottom:clamp(1.75rem,3vw,2.5rem);
}
html[data-theme="dark"] .doc__notice{background:color-mix(in srgb,var(--pop) 8%,transparent);border-color:color-mix(in srgb,var(--pop) 26%,transparent)}
.doc__notice svg{width:1.05rem;height:1.05rem;flex:none;margin-top:.18rem}

.doc__aside{position:sticky;top:5.5rem;display:flex;flex-direction:column;gap:.4rem}
@media (max-width:900px){.doc__aside{position:static;margin-bottom:2rem}}
.doc__aside h4{font-family:var(--f-label);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:.55rem}
.doc__aside a{font-size:.875rem;color:var(--ink-2);padding:.3rem 0;transition:color .2s}
.doc__aside a:hover{color:var(--anchor)}
.doc__aside a[aria-current="page"]{color:var(--anchor);font-weight:650}

/* ============================================================
   22. AUTH  (login)
   ============================================================ */
.auth{display:flex;align-items:center;min-height:calc(100svh - 13rem);padding-block:clamp(2rem,5vw,3.5rem)}
.auth__wrap{display:flex;justify-content:center}
.auth__box{width:100%;max-width:27rem;display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,1.75rem)}
.auth__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem}
.auth__mark{height:2.6rem;width:auto;aspect-ratio:898/1167}
.auth__head h1{font-size:clamp(1.75rem,3.5vw,2.3rem)}
.auth__card{display:flex;flex-direction:column;gap:1.05rem;padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--sh-lg)}

.field{display:flex;flex-direction:column;gap:.45rem}
.field__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.field__lbl{font-family:var(--f-label);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.input{
  width:100%;padding:.85rem 1rem;
  border:var(--bw) solid var(--bc);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--ink) 4%,transparent);
  font-size:.9375rem;
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
html[data-theme="dark"] .input{background:color-mix(in srgb,var(--pop) 7%,transparent)}
.input::placeholder{color:var(--ink-3)}
.input:hover{border-color:color-mix(in srgb,var(--anchor) 35%,var(--bc))}
.input:focus-visible{outline:none;border-color:var(--anchor);box-shadow:0 0 0 3px color-mix(in srgb,var(--anchor) 20%,transparent)}

.btn--block{width:100%}
.auth__link{font-size:.75rem;color:var(--anchor);text-decoration:underline;text-underline-offset:3px}
.auth__sep{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--f-label);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.auth__sep::before,.auth__sep::after{content:"";flex:1;height:var(--bw);background:var(--bc)}

.auth__msg{
  display:flex;gap:.65rem;align-items:flex-start;
  padding:.85rem 1rem;border-radius:var(--r-md);
  border:var(--bw) solid color-mix(in srgb,var(--anchor) 22%,transparent);
  background:color-mix(in srgb,var(--pop) 30%,transparent);
  font-size:.8125rem;line-height:1.5;color:var(--ink);
}
html[data-theme="dark"] .auth__msg{background:color-mix(in srgb,var(--pop) 8%,transparent);border-color:color-mix(in srgb,var(--pop) 26%,transparent)}
.auth__msg[hidden]{display:none}
.auth__msg svg{width:1rem;height:1rem;flex:none;margin-top:.15rem}
.auth__msg a{color:var(--anchor);text-decoration:underline;text-underline-offset:3px}

.auth__foot{text-align:center}
.auth__foot a{color:var(--anchor);text-decoration:underline;text-underline-offset:3px}

.foot--slim .foot__bot{margin-top:0;padding-top:0;border-top:0}
.foot__inline{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.foot__inline a{color:var(--ink-3);transition:color .2s}
.foot__inline a:hover{color:var(--anchor)}

/* ============================================================
   23. CONTACT DIALOG  (injected once by app.js)
   ============================================================ */
.modal{
  position:fixed;inset:0;margin:0;
  width:100%;max-width:none;height:100%;max-height:none;
  border:0;padding:1rem;background:transparent;color:var(--ink);
  overflow:hidden;
}
.modal[open]{display:grid;place-items:center}
.modal::backdrop{background:rgba(13,23,18,.55);backdrop-filter:blur(5px)}
html:has(dialog[open]){overflow:hidden}

.modal__panel{
  position:relative;width:100%;max-width:30rem;max-height:100%;overflow:auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;
  padding:clamp(1.5rem,3vw,2rem);
  border:var(--bw) solid var(--bc);border-radius:var(--r-lg);
  background:var(--card-bg);box-shadow:var(--sh-lg);
}
html[data-theme="dark"] .modal__panel{background:color-mix(in srgb,var(--dark-2) 94%,var(--pop))}
.modal__panel h2{font-size:clamp(1.25rem,2.4vw,1.5rem);padding-right:2.2rem}
.modal__x{
  position:absolute;top:.9rem;right:.9rem;
  width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;
  color:var(--ink-3);transition:background-color .2s,color .2s;
}
.modal__x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.modal__x svg{width:1rem;height:1rem}

.pick{display:flex;flex-direction:column;gap:.6rem;width:100%;margin-top:.25rem}
.pick__opt{
  display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1rem;border-radius:var(--r-md);
  border:var(--bw) solid var(--bc);
  background:color-mix(in srgb,var(--ink) 3%,transparent);
  transition:border-color .2s,background-color .2s,transform .18s cubic-bezier(.2,.8,.2,1);
}
html[data-theme="dark"] .pick__opt{background:color-mix(in srgb,var(--pop) 6%,transparent)}
.pick__opt:hover{border-color:var(--anchor);transform:translateY(-2px)}
.pick__ico{
  width:2.3rem;height:2.3rem;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--anchor) 10%,transparent);color:var(--anchor);
}
.pick__ico svg{width:1.1rem;height:1.1rem}
.pick__txt{display:flex;flex-direction:column;min-width:0}
.pick__txt b{font-family:var(--f-label);font-size:.9375rem;font-weight:650}
.pick__txt small{font-size:.8125rem;color:var(--ink-2);overflow-wrap:anywhere}
.pick__go{margin-left:auto;flex:none;color:var(--ink-3);transition:color .2s,transform .2s}
.pick__go svg{width:1.05rem;height:1.05rem}
.pick__opt:hover .pick__go{color:var(--anchor);transform:translateX(3px)}

.modal[open] .modal__panel{animation:modal-in .24s cubic-bezier(.2,.8,.2,1)}
.modal[open]::backdrop{animation:modal-fade .24s ease}
@keyframes modal-in{from{opacity:0;translate:0 10px}}
@keyframes modal-fade{from{opacity:0}}