/* ============ tokens ============ */
:root{
  --paper:#F5F5FC;
  --surface:#FFFFFF;
  --surface-2:#ECEDF8;
  --ink:#101A3D;
  --ink-line:#1B2A5B;
  --body:#454E77;
  --muted:#626A8E;
  --hair:#DCDDEE;

  --cobalt:#1F4FA8;
  --violet:#7C5CD6;
  --mint:#14806F;
  --mint-solid:#2FBFA8;
  --amber:#F9B233;
  --blush:#F58FA3;
  --link:#6A4BC4;
  --amber-ink:#96650A;
  --deep-blue:#1F4FA8;
  --deep-violet:#7C5CD6;

  --sk:#1B2A5B;
  --shadow-hard:5px 5px 0 var(--ink-line);
  --shadow-hard-sm:3px 3px 0 var(--ink-line);
  --shadow-soft:0 18px 40px -24px rgba(16,26,61,.45);
  --house-lift:0%;
  --stripe:rgba(27,42,91,.07);

  --ctl:44px;                    /* height of every control in the nav bar */
  --t:.7s;                       /* every transition/page change */
  --ease:cubic-bezier(.22,1,.36,1);
  --r-lg:22px; --r-md:14px; --r-sm:9px;
  --spine:1140px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C1230;
    --surface:#141B40;
    --surface-2:#1B2352;
    --ink:#EFEFFA;
    --ink-line:#4B5AA0;
    --body:#B6BDDD;
    --muted:#8B93BC;
    --hair:#2A3364;

    --cobalt:#6E9BF0;
    --violet:#A88BF0;
    --mint:#3FD3BA;
    --mint-solid:#2FBFA8;
    --amber:#F9BE55;
    --blush:#F79CAE;
    --link:#A88BF0;
    --amber-ink:#F9BE55;
    --deep-blue:#2A55B8;
    --deep-violet:#6E52C0;

    --shadow-hard:5px 5px 0 var(--ink-line);
    --shadow-hard-sm:3px 3px 0 var(--ink-line);
    --sk:#DDE2F5;
    --shadow-soft:0 18px 44px -22px rgba(0,0,0,.8);
    --house-lift:26%;
    --stripe:rgba(255,255,255,.05);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0C1230;
  --surface:#141B40;
  --surface-2:#1B2352;
  --ink:#EFEFFA;
  --ink-line:#4B5AA0;
  --body:#B6BDDD;
  --muted:#8B93BC;
  --hair:#2A3364;

  --cobalt:#6E9BF0;
  --violet:#A88BF0;
  --mint:#3FD3BA;
  --mint-solid:#2FBFA8;
  --amber:#F9BE55;
  --blush:#F79CAE;
  --link:#A88BF0;
  --amber-ink:#F9BE55;
  --deep-blue:#2A55B8;
  --deep-violet:#6E52C0;

  --shadow-hard:5px 5px 0 var(--ink-line);
  --shadow-hard-sm:3px 3px 0 var(--ink-line);
  --sk:#DDE2F5;
    --shadow-soft:0 18px 44px -22px rgba(0,0,0,.8);
  --house-lift:26%;
  --stripe:rgba(255,255,255,.05);
  color-scheme:dark;
}

/* ============ base ============ */
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:Lexend,"Segoe UI",system-ui,sans-serif;
  font-weight:300; font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.disp{font-family:Fredoka,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);text-wrap:balance;margin:0}
h1{font-size:clamp(2.5rem,5.6vw,4.1rem);font-weight:600;line-height:1.02;letter-spacing:-.022em}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem);font-weight:600;line-height:1.08;letter-spacing:-.018em}
h3{font-size:1.24rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
h4{font-size:1rem;font-weight:600;letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
img{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:4px}
::selection{background:color-mix(in oklab,var(--amber) 55%,transparent)}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
}
.lede{font-size:1.09rem;line-height:1.65;max-width:62ch}
.wrap{width:min(100% - 44px,var(--spine));margin-inline:auto}
.band{padding-block:clamp(64px,8vw,112px);background:var(--paper)}
.band--alt{background:var(--surface)}
.band--tint{background:var(--surface-2)}
.head{display:flex;flex-direction:column;gap:14px;max-width:66ch;margin-bottom:clamp(36px,4.5vw,60px)}

/* ============ sticker primitives ============ */
.sticker{
  background:var(--surface);border:2.5px solid var(--ink-line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-hard);
}
.card{
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-md);box-shadow:var(--shadow-soft);
}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:Fredoka,system-ui,sans-serif;font-weight:600;font-size:1.02rem;
  padding:14px 24px;border-radius:999px;border:2.5px solid var(--ink-line);
  text-decoration:none;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
/* the press itself stays instant -- a 0.7s response to mousedown feels broken */
.btn:active{transition-duration:.08s}
.btn--go{background:var(--amber);color:#101A3D;box-shadow:var(--shadow-hard)}
.btn--ghost{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-hard-sm)}
.btn:hover{transform:translate(2px,2px)}
.btn--go:hover{box-shadow:3px 3px 0 var(--ink-line)}
.btn--ghost:hover{box-shadow:1px 1px 0 var(--ink-line)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink-line)}

/* ============ nav ============ */
.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in oklab,var(--paper) 84%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);
}
.nav__in{display:flex;align-items:center;gap:26px;height:70px}
.nav__mark{height:30px;width:auto;flex:none}
.nav__links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav__links a:not(.btn){
  text-decoration:none;font-size:.92rem;font-weight:400;color:var(--body);
  padding-bottom:2px;border-bottom:2px solid transparent;
}
.nav__links a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--amber)}
.nav .btn{height:var(--ctl);padding:0 21px;font-size:.93rem}
/* mobile nav lives in the multi-page section below */

/* ============ hero ============ */
.hero{position:relative;overflow:hidden;padding-block:clamp(46px,6vw,84px) clamp(30px,4vw,54px)}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,60px);align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero h1 span{color:var(--violet)}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.hero__note{font-size:.86rem;color:var(--muted)}
.hero__art{position:relative;display:grid;place-items:center;min-height:340px}
.hero__orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero__orbit ellipse{fill:none;stroke:var(--ink-line);stroke-width:1.4;opacity:.28}
.hero__orbit .o2{stroke:var(--violet);opacity:.42;stroke-dasharray:5 9}
.hero__mascot{
  position:relative;width:min(100%,400px);height:auto;
  filter:drop-shadow(0 24px 34px rgba(16,26,61,.22));
  animation:bob 6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(-7px)}50%{transform:translateY(7px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__orbit{animation:spin 46s linear infinite;transform-origin:50% 50%}

.chipline{
  display:flex;flex-wrap:wrap;gap:10px;
}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:"IBM Plex Mono",monospace;font-size:.73rem;letter-spacing:.06em;
  padding:6px 12px;border-radius:999px;border:1px solid var(--hair);
  background:var(--surface);color:var(--body);
}
.chip b{color:var(--ink);font-weight:500}

.counters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  margin-top:clamp(28px,4vw,52px);
}
.counters div{padding:22px 8px 22px 0}
.counters div + div{border-left:1px solid var(--hair);padding-left:22px}
.counters .n{font-family:Fredoka,sans-serif;font-size:2.05rem;font-weight:600;color:var(--ink);line-height:1;display:block}
.counters .l{font-size:.82rem;color:var(--muted);margin-top:7px;display:block}
@media (max-width:880px){
  .hero__grid{grid-template-columns:1fr}
  .hero__art{order:-1;min-height:0}
  .hero__mascot{width:min(72%,300px)}
  .counters{grid-template-columns:repeat(2,1fr)}
  .counters div:nth-child(3){border-left:0;padding-left:0}
  .counters div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}

/* ============ swap (problem → answer) ============ */
.swap{display:grid;gap:0;border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.swap__row{display:grid;grid-template-columns:1fr 46px 1fr;align-items:center;gap:0}
.swap__row + .swap__row{border-top:1px solid var(--hair)}
.swap__was,.swap__now{padding:20px 24px;font-size:.99rem}
.swap__was{color:var(--muted)}
.swap__was s{text-decoration-color:color-mix(in oklab,var(--blush) 90%,transparent);text-decoration-thickness:2px}
.swap__now{color:var(--ink);font-weight:400;background:color-mix(in oklab,var(--mint-solid) 9%,transparent)}
.swap__arrow{display:grid;place-items:center;color:var(--mint);font-size:1.1rem}
@media (max-width:760px){
  .swap__row{grid-template-columns:1fr;}
  .swap__arrow{justify-items:start;padding-left:24px;height:22px}
  .swap__was{padding-bottom:6px}
}

/* ============ pillars ============ */
.pillars__tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.tab{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:12px 18px;border-radius:var(--r-md);border:1px solid var(--hair);
  background:var(--surface);transition:border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.tab:hover{transform:translateY(-2px)}
.tab .k{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
.tab .t{font-family:Fredoka,sans-serif;font-weight:500;font-size:1.02rem;color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
/* the selected tab inverts, so the sticker outline has to invert with it */
.tab[aria-selected="true"] .ico{--sk:var(--paper)}
.tab[aria-selected="true"] .t{color:var(--paper)}
.tab[aria-selected="true"] .k{color:color-mix(in oklab,var(--paper) 62%,transparent)}

.panel{display:none}
.panel[data-open]{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3.6vw,52px);align-items:start;animation:fade var(--t) var(--ease)}
@keyframes fade{from{transform:translateY(8px)}to{transform:none}}
.panel__copy{display:flex;flex-direction:column;gap:16px}
.panel__copy ul{margin:0;padding-left:1.05em;display:flex;flex-direction:column;gap:8px;font-size:.97rem}
.panel__copy li::marker{color:var(--violet)}
@media (max-width:900px){.panel[data-open]{grid-template-columns:1fr}}

/* division ladder */
.ladder{display:flex;flex-direction:column;gap:9px}
.rung{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:14px}
.rung__n{font-family:Fredoka,sans-serif;font-weight:500;color:var(--ink);font-size:.98rem;display:flex;align-items:center;gap:8px}
.rung__n em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:.7rem;color:var(--muted)}
.rung__bar{height:30px;border-radius:6px;background:var(--stripe);position:relative;overflow:hidden}
.rung__bar i{
  position:absolute;inset:0 auto 0 0;border-radius:6px;display:block;
  background:var(--c);transform-origin:left;transform:scaleX(var(--w));
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.rung__cap{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--muted);min-width:66px;text-align:right}
@media (max-width:620px){.rung{grid-template-columns:120px 1fr}.rung__cap{display:none}}

/* mission chain */
.chain{display:flex;flex-direction:column;gap:0}
.link{display:grid;grid-template-columns:38px 1fr;gap:16px;align-items:start}
.link__rail{display:flex;flex-direction:column;align-items:center;height:100%}
.link__dot{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:2.5px solid var(--ink-line);background:var(--surface);
  font-family:Fredoka,sans-serif;font-weight:600;color:var(--ink);font-size:.95rem;
}
.link__dot--on{background:var(--mint-solid);color:#0B2E29;border-color:#0B2E29}
.link__dot--bonus{background:var(--amber);color:#3D2A05;border-color:#3D2A05}
.link__line{width:2.5px;flex:1;min-height:20px;background:var(--hair)}
.link__body{padding-bottom:20px}
.link__body h4{margin-bottom:3px}
.link__body p{font-size:.92rem;color:var(--muted)}
.link__tag{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair);border-radius:5px;padding:2px 7px;margin-left:8px;
  white-space:nowrap;
}

/* setter pipeline */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:14px;background:var(--surface);
  display:flex;flex-direction:column;gap:5px;
}
.step .no{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--link);letter-spacing:.1em}
.step .nm{font-family:Fredoka,sans-serif;font-weight:500;color:var(--ink);font-size:.94rem;line-height:1.2}
.step .by{font-size:.8rem;color:var(--muted)}
@media (max-width:760px){.rail{grid-template-columns:repeat(2,1fr)}}

/* titles ladder */
.titles{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.title-row{display:flex;align-items:baseline;gap:10px;font-size:.9rem}
.title-row b{font-family:Fredoka,sans-serif;font-weight:500;color:var(--ink);white-space:nowrap}
.title-row i{flex:1;border-bottom:1px dotted var(--hair);font-style:normal;min-width:12px}
.title-row span{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--muted)}

/* hp table */
.hp{display:flex;flex-direction:column;gap:0;border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.hp__r{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;font-size:.94rem}
.hp__r + .hp__r{border-top:1px solid var(--hair)}
.hp__r b{font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--mint);white-space:nowrap}
.hp__r--big b{color:var(--amber-ink)}

/* ============ houses ============ */
.houses{
  --house:#2C5FCB;
  background:
    linear-gradient(color-mix(in oklab,var(--house) 8%,transparent),color-mix(in oklab,var(--house) 8%,transparent)),
    var(--paper);
  transition:background var(--t) var(--ease);
}
.houses__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:34px}
.crest{
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px 14px;
  border-radius:var(--r-md);border:1px solid transparent;transition:transform var(--t) var(--ease),border-color var(--t) var(--ease);
}
.crest:hover{transform:translateY(-4px)}
.crest[aria-pressed="true"]{background:var(--surface);border-color:var(--hair);box-shadow:var(--shadow-soft)}
.crest__badge{
  width:62px;height:66px;display:grid;place-items:center;flex:none;
  background:var(--hc);border:2.5px solid var(--ink-line);
  border-radius:26% 26% 32% 32%/22% 22% 44% 44%;
  font-family:Fredoka,sans-serif;font-weight:700;font-size:1.7rem;color:#fff;
  box-shadow:var(--shadow-hard-sm);transition:transform var(--t) var(--ease);
  text-shadow:0 1px 0 rgba(0,0,0,.22);
}
.crest[aria-pressed="true"] .crest__badge{transform:scale(1.06) rotate(-3deg)}
.crest__nm{font-family:Fredoka,sans-serif;font-weight:500;font-size:.93rem;color:var(--ink)}
@media (max-width:760px){.houses__grid{grid-template-columns:repeat(3,1fr)}}

.house-panel{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,44px);
  padding:clamp(24px,3vw,38px);border-radius:var(--r-lg);
  background:var(--surface);border:2.5px solid var(--ink-line);box-shadow:var(--shadow-hard);
}
.house-panel__l{display:flex;flex-direction:column;gap:14px}
.house-motto{
  font-family:Fredoka,sans-serif;font-weight:500;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.1;
  color:color-mix(in oklab,var(--house),white var(--house-lift));letter-spacing:-.015em;
}
.house-meta{display:flex;flex-wrap:wrap;gap:8px}
.house-panel__r{display:flex;flex-direction:column;gap:12px;justify-content:center}
.house-stat{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--hair)}
.house-stat span{font-size:.87rem;color:var(--muted)}
.house-stat b{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:1.02rem;color:var(--ink)}
@media (max-width:820px){.house-panel{grid-template-columns:1fr}}

/* ============ passport ============ */
.pp{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(26px,4vw,56px);align-items:center}
@media (max-width:900px){.pp{grid-template-columns:1fr}}
.passport{
  background:var(--surface);border:2.5px solid var(--ink-line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-hard);overflow:hidden;max-width:460px;
}
.passport__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;background:var(--deep-blue);color:#fff;
}
.passport__top .mono{font-size:.68rem;letter-spacing:.16em}
.passport__top .vf{
  display:inline-flex;align-items:center;gap:5px;font-family:"IBM Plex Mono",monospace;
  font-size:.63rem;letter-spacing:.1em;background:rgba(255,255,255,.2);padding:3px 9px;border-radius:999px;
}
.passport__id{display:flex;gap:16px;padding:20px;border-bottom:1px dashed var(--hair);align-items:center}
.passport__av{
  width:56px;height:60px;flex:none;background:var(--deep-violet);
  border-radius:26% 26% 32% 32%/22% 22% 44% 44%;border:2.5px solid var(--ink-line);
  display:grid;place-items:center;font-family:Fredoka,sans-serif;font-weight:700;color:#fff;font-size:1.5rem;
}
.passport__id h4{font-size:1.15rem}
.passport__id .mono{font-size:.72rem;color:var(--muted);display:block;margin-top:2px}
.passport__rows{padding:6px 20px 14px}
.pr{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:.87rem}
.pr + .pr{border-top:1px solid var(--hair)}
.pr__k{color:var(--muted);flex:1}
.pr__v{font-family:"IBM Plex Mono",monospace;color:var(--ink);font-size:.85rem}
.pr__tick{width:16px;height:16px;flex:none;color:var(--mint)}
.passport__foot{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--surface-2)}
.passport__foot p{font-size:.74rem;color:var(--muted);line-height:1.45}
#qr{width:58px;height:58px;flex:none;border-radius:5px;background:var(--surface)}
.pp__list{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.pp__item{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.pp__item svg{width:19px;height:19px;color:var(--violet);margin-top:3px;flex:none}
.pp__item b{font-family:Fredoka,sans-serif;font-weight:500;color:var(--ink);display:block;font-size:.99rem}
.pp__item p{font-size:.9rem;color:var(--muted)}

/* ============ audience ============ */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.two{grid-template-columns:1fr}}
.aud{padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:14px}
.aud h3{display:flex;align-items:center;gap:10px}
.aud__dot{width:11px;height:11px;border-radius:3px;flex:none}
.aud ul{margin:0;padding-left:1.05em;display:flex;flex-direction:column;gap:7px;font-size:.94rem}
.aud li::marker{color:var(--muted)}

/* ============ pricing ============ */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
@media (max-width:940px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.tiers{grid-template-columns:1fr}}
.tier{padding:24px;display:flex;flex-direction:column;gap:14px}
.tier--hero{border:2.5px solid var(--ink-line);box-shadow:var(--shadow-hard);background:var(--surface)}
.tier__nm{font-family:Fredoka,sans-serif;font-weight:600;color:var(--ink);font-size:1.06rem}
.tier__px{font-family:Fredoka,sans-serif;font-weight:600;font-size:2.1rem;color:var(--ink);line-height:1;letter-spacing:-.02em}
.tier__px small{font-family:Lexend,sans-serif;font-weight:300;font-size:.8rem;color:var(--muted);letter-spacing:0}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.9rem;flex:1}
.tier li{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start}
.tier li svg{width:16px;height:16px;color:var(--mint);margin-top:4px}
.tier li.off{color:var(--muted)}
.tier li.off svg{color:var(--hair)}
.tier__flag{
  align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--amber);color:#3D2A05;padding:3px 9px;border-radius:999px;
}

/* ============ close ============ */
.close{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.close h2{max-width:18ch}
.close .btn{margin-top:4px}
.close__mascot{width:106px;height:auto;animation:bob 6s ease-in-out infinite}

.foot{border-top:1px solid var(--hair);padding-block:32px;background:var(--paper)}
.foot__in{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot img{height:24px;width:auto;opacity:.85}
.foot p{font-size:.79rem;color:var(--muted)}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{font-size:.82rem;color:var(--muted);text-decoration:none}
.foot nav a:hover{color:var(--ink)}

/* ============ sticker illustration system ============ */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.5em;height:1.5em;flex:none;display:block}

.band,.hero{position:relative;overflow:hidden}
.wrap{position:relative;z-index:1}

/* floating doodle layer (margins only, so it never crowds the text) */
.doodles{position:absolute;inset:0;pointer-events:none;z-index:0}
.doodles svg{position:absolute;opacity:.9;animation:float var(--d,10s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-15px) rotate(calc(var(--rot,0deg) + 7deg))}
}
@media (max-width:1180px){.doodles{display:none}}

/* wavy band joins */
.wave{display:block;width:100%;height:clamp(26px,3.4vw,46px);background:var(--from)}
.wave path{fill:var(--to)}

/* dotted playground paper */
.band--dots{background-image:radial-gradient(color-mix(in oklab,var(--ink-line) 26%,transparent) 1.6px,transparent 1.6px);background-size:28px 28px}

.hero::before{
  content:'';position:absolute;right:-8%;top:-18%;width:660px;height:660px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--mint-solid) 24%,transparent),transparent 66%);
  pointer-events:none;z-index:0;
}
.hero::after{
  content:'';position:absolute;left:-14%;bottom:-30%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--violet) 20%,transparent),transparent 66%);
  pointer-events:none;z-index:0;
}

/* counters get sticker icons */
.counters div{display:flex;flex-direction:column;gap:2px}
.counters .ico{width:30px;height:30px;margin-bottom:8px}

/* swap rows get sticker icons */
.swap__row{grid-template-columns:60px 1fr 46px 1fr}
.swap__ico{display:grid;place-items:center;padding-left:20px}
.swap__ico .ico{width:30px;height:30px}
@media (max-width:760px){
  .swap__row{grid-template-columns:52px 1fr}
  .swap__ico{grid-row:span 3;align-self:start;padding-top:20px}
  .swap__was,.swap__now,.swap__arrow{grid-column:2}
}

/* tabs get sticker icons */
.tab{flex-direction:row;align-items:center;gap:11px}
.tab .ico{width:34px;height:34px}
.tab__tx{display:flex;flex-direction:column;gap:1px;align-items:flex-start}

/* bunting over the houses */
.bunting{display:block;width:100%;max-width:620px;height:44px;margin:0 auto 6px}
.bunting path{stroke:var(--ink-line);stroke-width:2.4;stroke-linejoin:round}
.bunting .string{fill:none;stroke:var(--ink-line);stroke-width:2.4}

/* shield crests */
.crest__badge{
  position:relative;width:66px;height:72px;display:grid;place-items:center;background:none;border:0;
  border-radius:0;box-shadow:none;filter:drop-shadow(3px 3px 0 var(--ink-line));transition:transform .18s;
  font-family:Fredoka,sans-serif;font-weight:700;font-size:1.62rem;color:#fff;
}
.crest__badge > svg{position:absolute;inset:0;width:100%;height:100%}
.crest__badge .sh{fill:var(--hc);stroke:var(--ink-line);stroke-width:3;stroke-linejoin:round}
.crest__badge .pip{fill:rgba(255,255,255,.5)}
.crest__letter{position:relative;z-index:1;text-shadow:0 1px 1px rgba(0,0,0,.3);line-height:1}

.house-panel{position:relative}
.house-panel__r{position:relative}
.house-glyph{
  position:absolute;right:-30px;top:-56px;width:84px;height:84px;pointer-events:none;z-index:2;
  transform:rotate(9deg);filter:drop-shadow(0 6px 12px rgba(16,26,61,.25));
}
@media (max-width:820px){.house-glyph{right:-14px;top:-70px;width:64px;height:64px}}

/* space scene banner */
.scene{display:block;width:100%;height:clamp(120px,15vw,190px);margin-bottom:clamp(26px,3.4vw,44px);overflow:hidden}
.scene .hill{fill:color-mix(in oklab,var(--violet) 16%,transparent);stroke:var(--ink-line);stroke-width:2.5}
.scene .orbit{fill:none;stroke:var(--ink-line);stroke-width:2;stroke-dasharray:7 8;opacity:.5}
.scene .dot{fill:var(--ink-line);opacity:.45}

/* passport stamps + stickers */
.passport{position:relative}
.pp__stage{position:relative;max-width:460px;margin-inline:auto}
.stamp{position:absolute;right:-26px;top:-26px;width:104px;height:104px;transform:rotate(-13deg);z-index:2}
.stamp circle,.stamp text{stroke:none}
.stamp .ring{fill:none;stroke:var(--mint);stroke-width:4;stroke-dasharray:7 6}
.stamp .ring2{fill:none;stroke:var(--mint);stroke-width:2}
.stamp .plate{fill:color-mix(in oklab,var(--surface) 88%,transparent)}
.stamp text{fill:var(--mint);font-family:"IBM Plex Mono",monospace;font-weight:500}
.pp__sticker{position:absolute;z-index:2;filter:drop-shadow(0 6px 12px rgba(16,26,61,.22))}
@media (max-width:560px){.stamp{width:76px;height:76px;right:-8px;top:-14px}.pp__sticker{display:none}}

/* audience + tier icons */
.aud h3 .ico{width:34px;height:34px}
.aud__dot{display:none}
.tier__nm{display:flex;align-items:center;gap:9px}
.tier__nm .ico{width:26px;height:26px}

/* mission chain nodes hold a tiny glyph */
.link__dot .ico{width:19px;height:19px}

/* pillar panels get a corner sticker */
.panel__art{position:relative}
.panel__art .corner{position:absolute;right:-6px;top:-30px;width:56px;height:56px;opacity:.9;z-index:2}
@media (max-width:900px){.panel__art .corner{display:none}}

/* close section confetti */
.close{position:relative}
.confetti{position:absolute;inset:-20px 0 auto;height:180px;pointer-events:none}
.confetti span{
  position:absolute;width:10px;height:14px;border-radius:3px;border:1.6px solid var(--ink-line);
  animation:drift 7s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(26deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* ================================================================
   Multi-page site additions
   ================================================================ */

/* the artifact host supplied these; a standalone page needs its own */
img{max-width:100%;height:auto}
[hidden]{display:none!important}

.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{
  left:12px;top:12px;padding:11px 18px;background:var(--amber);color:#101A3D;
  border:2.5px solid var(--ink-line);border-radius:10px;font-family:Fredoka,sans-serif;font-weight:600;
}

/* ---- nav: logo link + working mobile menu ---- */
.nav__logo{display:flex;align-items:center;flex:none}
.nav__burger{display:none}
.nav__links .btn{display:none}


/* ---- subpage header ---- */
.phead{padding-block:clamp(38px,5vw,72px) clamp(24px,3vw,40px)}
.phead__in{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,48px);align-items:center}
.phead__copy{display:flex;flex-direction:column;gap:14px;max-width:60ch}
.phead__art{width:clamp(96px,15vw,205px);animation:bob 6s ease-in-out infinite}
.crumb{font-size:.84rem;color:var(--muted)}
.crumb a{color:var(--link);text-decoration:none}
.crumb a:hover{text-decoration:underline}
@media (max-width:760px){.phead__in{grid-template-columns:1fr}.phead__art{width:96px}}

/* ---- long-form prose ---- */
.prose{max-width:68ch;display:flex;flex-direction:column;gap:16px}
.prose h3{margin-top:12px}
.prose p{font-size:1rem}
.prose ul,.prose ol{margin:0;padding-left:1.15em;display:flex;flex-direction:column;gap:9px;font-size:.97rem}
.prose li::marker{color:var(--violet)}
.prose strong{font-weight:500;color:var(--ink)}
.prose a{color:var(--link)}

/* numbered gate list — the order is the process, so the numbers are real */
.gates{display:flex;flex-direction:column;gap:14px;counter-reset:gate}
.gate{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.gate__n{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  border:2.5px solid var(--ink-line);background:var(--surface);box-shadow:var(--shadow-hard-sm);
  font-family:Fredoka,sans-serif;font-weight:600;color:var(--ink);
}
.gate h4{margin-bottom:3px}
.gate p{font-size:.93rem;color:var(--muted)}

/* ---- FAQ (native details, no JS) ---- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:74ch}
.faq details{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden}
.faq details[open]{border-color:color-mix(in oklab,var(--violet) 45%,transparent)}
.faq summary{
  cursor:pointer;padding:16px 20px;list-style:none;
  font-family:Fredoka,sans-serif;font-weight:500;font-size:1.02rem;color:var(--ink);
  display:flex;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:none;width:13px;height:13px;
  border-right:2.6px solid var(--violet);border-bottom:2.6px solid var(--violet);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--t) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq .answer{padding:0 20px 18px;font-size:.95rem;max-width:64ch}
.faq .answer p + p{margin-top:10px}

/* ---- forms ---- */
.form{display:grid;gap:17px;max-width:540px}
.field{display:flex;flex-direction:column;gap:7px}
.field label:not(.check){
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.field input,.field select,.field textarea{
  font:inherit;font-size:.99rem;color:var(--ink);background:var(--surface);
  border:2px solid var(--hair);border-radius:var(--r-sm);padding:12px 14px;width:100%;
}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field input,.field select,.field textarea{transition:border-color var(--t) var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.form__note{font-size:.85rem;color:var(--muted);max-width:52ch}
.form .btn{justify-self:start}

/* ---- contact / 404 ---- */
.stack{display:flex;flex-direction:column;gap:12px}
.linkrow{
  display:flex;align-items:center;gap:13px;padding:15px 18px;text-decoration:none;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease);
}
.linkrow:hover{transform:translateX(5px);border-color:color-mix(in oklab,var(--violet) 50%,transparent)}
.linkrow .ico{width:30px;height:30px}
.linkrow b{font-family:Fredoka,sans-serif;font-weight:500;color:var(--ink);display:block;font-size:1rem}
.linkrow span{font-size:.87rem;color:var(--muted)}
.linkrow em{margin-left:auto;font-style:normal;color:var(--violet);font-size:1.2rem}

.lost{min-height:56vh;display:grid;place-items:center;text-align:center}
.lost__in{display:flex;flex-direction:column;align-items:center;gap:18px}
.lost img{width:150px;animation:bob 6s ease-in-out infinite}

/* ---- policy table ---- */
.tblwrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--surface)}
.tbl{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
.tbl th,.tbl td{text-align:left;padding:13px 18px;vertical-align:top}
.tbl thead th{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--hair);white-space:nowrap;
}
.tbl tbody tr + tr td{border-top:1px solid var(--hair)}
.tbl td:first-child{font-family:Fredoka,sans-serif;font-weight:500;color:var(--ink);white-space:nowrap}
.tbl td:last-child{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;color:var(--muted);white-space:nowrap;
}

/* ================================================================
   Theme switch
   ================================================================ */
.tsw{
  position:relative;flex:none;width:76px;height:var(--ctl);padding:0 9px;
  display:inline-flex;align-items:center;justify-content:space-between;
  border-radius:999px;border:2.5px solid var(--ink-line);
  background:var(--surface-2);box-shadow:var(--shadow-hard);
  transition:background var(--t) ease,box-shadow .13s ease,transform .13s ease;
}
/* a 34px control is under the 44px touch target, so grow the hit area only */
.tsw::after{content:"";position:absolute;inset:-7px;border-radius:999px}
.tsw:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink-line)}
.tsw:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink-line)}

.tsw__knob{
  position:absolute;top:3px;bottom:3px;left:3px;width:33px;height:auto;z-index:0;
  border-radius:50%;background:var(--surface);border:2.5px solid var(--ink-line);
  transition:transform var(--t) cubic-bezier(.34,1.7,.5,1),background var(--t) ease;
}
.tsw[aria-checked="true"] .tsw__knob{transform:translateX(32px)}

.tsw__ico{
  position:relative;z-index:1;width:16px;height:16px;
  transition:opacity var(--t) ease,transform var(--t) cubic-bezier(.34,1.6,.5,1);
}
.tsw__ico--sun{color:#E08A16;opacity:1;transform:rotate(0)}
.tsw__ico--moon{color:var(--violet);opacity:.4;transform:scale(.86)}
.tsw[aria-checked="true"] .tsw__ico--sun{opacity:.4;transform:rotate(-70deg) scale(.86)}
.tsw[aria-checked="true"] .tsw__ico--moon{opacity:1;transform:scale(1) rotate(-12deg)}
:root[data-theme="dark"] .tsw__ico--sun{color:var(--amber)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tsw__ico--sun{color:var(--amber)}}

/* The palette crossfade is armed ONLY for the ~400ms around a real click on the
   switch (site.js adds .theme-anim, then removes it). A permanent transition on
   body/.band means any browser that defers transitions leaves background-color
   pinned to the previous theme while the tokens have already moved on. */
@media (prefers-reduced-motion:no-preference){
  :root.theme-anim,
  :root.theme-anim *,
  :root.theme-anim *::before,
  :root.theme-anim *::after{
    transition:background-color var(--t) ease,border-color var(--t) ease,color var(--t) ease,fill var(--t) ease,stroke var(--t) ease!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .tsw__knob,.tsw__ico{transition:none}
}

/* ================================================================
   Mobile
   ================================================================ */
html{-webkit-text-size-adjust:100%}

/* the space scene kept its own aspect instead of a fixed height, which left a
   tall empty gap above the horizon on narrow screens */
.scene{height:auto;aspect-ratio:1200/190}

@media (max-width:1024px){
  /* nav collapses earlier now that the switch shares the bar */
  .nav__cta{display:none}
  .nav__burger{
    display:grid;place-items:center;width:var(--ctl);height:var(--ctl);flex:none;margin-left:12px;
    border-radius:13px;border:2.5px solid var(--ink-line);background:var(--surface);
    box-shadow:var(--shadow-hard-sm);color:var(--ink);
  }
  .nav__burger:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink-line)}
  .nav__burger svg{width:22px;height:22px}
  .tsw{margin-left:auto}
  .nav__in{gap:14px}
  .nav__links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:6px 22px 20px;background:var(--surface);
    border-bottom:2.5px solid var(--ink-line);box-shadow:var(--shadow-soft);
  }
  .nav__links.is-open{display:flex}
  .nav__links a:not(.btn){padding:14px 0;border-bottom:1px solid var(--hair);font-size:1rem}
  .nav__links .btn{display:inline-flex;margin-top:16px;justify-content:center}
}

@media (max-width:560px){
  .wrap{width:calc(100% - 34px)}
  h1{font-size:clamp(2.05rem,8.4vw,2.5rem)}
  h2{font-size:clamp(1.6rem,6.4vw,1.85rem)}
  .lede{font-size:1.02rem}
  .band{padding-block:clamp(46px,11vw,64px)}

  /* full-width buttons read better than two half-width ones on a phone */
  .hero__ctas{flex-direction:column;align-items:stretch;width:100%}
  .hero__ctas .btn{justify-content:center}
  .hero__copy{align-items:stretch}
  .hero__copy .eyebrow,.hero__note{text-align:left}

  /* five tabs wrapped to three ragged rows; one scrolling row is calmer */
  .pillars__tabs{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:-17px;padding:2px 17px 10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pillars__tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;scroll-snap-align:start}

  .rail{grid-template-columns:1fr}
  .houses__grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .counters div{padding-right:6px}
  .counters .n{font-size:1.75rem}
  .counters .ico{width:26px;height:26px}
  .close__mascot{width:84px}
  .gate{grid-template-columns:38px 1fr;gap:13px}
  .gate__n{width:38px;height:38px;font-size:.92rem}
  .form,.field input,.field select,.field textarea{max-width:100%}
  /* 16px stops iOS Safari zooming the page on focus */
  .field input,.field select,.field textarea{font-size:16px}
  .foot__in{flex-direction:column;align-items:flex-start;gap:16px}
  .foot nav{gap:14px 18px}
}

/* ================================================================
   Slogan — Outthink. Outsolve. Outscore.
   ================================================================ */
.slogan{display:flex;flex-wrap:wrap;column-gap:.3em;row-gap:0}
/* Beats the generic `.hero h1 span` violet rule, so each word is set on purpose.
   The words are VISIBLE BY DEFAULT. The entrance animation is opt-in via
   .is-animated, which site.js adds only once a real animation frame has fired --
   an animation must never be the thing that makes content appear, or a browser
   that defers animations (occluded window, restored background tab, low-power
   mode) leaves the headline permanently blank. */
.hero h1.slogan span{color:var(--ink)}
.hero h1.slogan span:nth-child(3){color:var(--violet)}

@media (prefers-reduced-motion:no-preference){
  .slogan.is-animated span{animation:wordIn .62s cubic-bezier(.22,1,.36,1) backwards}
  .slogan.is-animated span:nth-child(2){animation-delay:.10s}
  .slogan.is-animated span:nth-child(3){animation-delay:.20s}
}
@keyframes wordIn{from{transform:translateY(12px)}to{transform:none}}

.hero__sub{
  font-family:Fredoka,"Trebuchet MS",system-ui,sans-serif;
  font-weight:500;font-size:clamp(1.15rem,2.1vw,1.55rem);line-height:1.25;
  letter-spacing:-.01em;color:var(--body);text-wrap:balance;max-width:24ch;
  margin-top:-6px;
}

.foot__brand{display:flex;flex-direction:column;gap:8px}
.foot__slogan{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--link);
}
@media (max-width:560px){
  .hero__sub{max-width:none;font-size:1.12rem}
}

/* ================================================================
   Page transitions & link motion   (all timed off --t)
   ================================================================ */

/* Native cross-document view transitions. No router, no JS: browsers that
   don't support it simply navigate normally. */
@view-transition{ navigation:auto }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--t);
  animation-timing-function:var(--ease);
}
::view-transition-old(root){ animation-name:pageOut }
::view-transition-new(root){ animation-name:pageIn }
@keyframes pageOut{ to  { opacity:0; transform:translateY(-14px) scale(.995) } }
@keyframes pageIn { from{ opacity:0; transform:translateY(20px)  scale(.995) } }

/* The header stays put while the body changes underneath it. */
.nav{ view-transition-name:sitenav }
::view-transition-old(sitenav),
::view-transition-new(sitenav){ animation-duration:var(--t); animation-timing-function:var(--ease) }

/* In-page anchors glide, and stop landing underneath the sticky header. */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth }
}
html{ scroll-padding-top:86px }

/* Nav links: an underline that sweeps in, and back out the way it came. */
.nav__links a:not(.btn){ position:relative; border-bottom:0; padding-bottom:5px }
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform var(--t) var(--ease);
}
.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn):focus-visible::after{ transform:scaleX(1); transform-origin:0 50% }
.nav__links a:not(.btn)[aria-current="page"]::after{ transform:scaleX(1); background:var(--violet) }

/* Body links grow their own underline rather than flicking one on. */
.prose a,.crumb a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  transition:background-size var(--t) var(--ease);
}
.prose a:hover,.prose a:focus-visible,
.crumb a:hover,.crumb a:focus-visible{ background-size:100% 1.5px }
.crumb a:hover{ text-decoration:none }

/* Cards lift on hover now that there is time to see it happen. */
.card,.tier,.faq details{ transition:transform var(--t) var(--ease),border-color var(--t) var(--ease) }
.aud.card:hover,.tier:hover{ transform:translateY(-4px) }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none!important }
}

/* ================================================================
   Waitlist form
   ================================================================ */

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill positioned ones. */
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.field--checks{gap:12px}
.check{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;cursor:pointer}
.check input{
  /* padding:12px 14px from `.field input` inflates this to 33px and eats the
     grid gap, so reset it explicitly */
  appearance:none;-webkit-appearance:none;padding:0;margin:1px 0 0;
  width:22px;min-width:22px;height:22px;flex:none;
  border:2.5px solid var(--ink-line);border-radius:7px;background:var(--surface);
  display:grid;place-content:center;cursor:pointer;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.check input::after{
  content:"";width:11px;height:6px;border-left:2.6px solid #101A3D;border-bottom:2.6px solid #101A3D;
  transform:rotate(-45deg) scale(0);transform-origin:center;
  transition:transform var(--t) cubic-bezier(.34,1.7,.5,1);
}
.check input:checked{background:var(--amber);border-color:var(--ink-line)}
.check input:checked::after{transform:rotate(-45deg) scale(1)}
.check input:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.check span{
  font-family:Lexend,"Segoe UI",system-ui,sans-serif;font-size:.9rem;font-weight:300;
  line-height:1.5;letter-spacing:0;text-transform:none;color:var(--body);
}

.notice{
  display:flex;gap:12px;align-items:flex-start;padding:15px 18px;margin-bottom:22px;
  border-radius:var(--r-md);border:2.5px solid var(--ink-line);box-shadow:var(--shadow-hard-sm);
  font-size:.94rem;
}
.notice svg{width:20px;height:20px;flex:none;margin-top:2px}
.notice--ok{background:color-mix(in oklab,var(--mint-solid) 22%,var(--surface));color:var(--ink)}
.notice--bad{background:color-mix(in oklab,var(--blush) 26%,var(--surface));color:var(--ink)}
.notice b{font-family:Fredoka,sans-serif;font-weight:500;display:block;margin-bottom:2px}