/* ==================================================================
   PAA BOX
   1-bit pixel art on warm paper. Accent: the orange and yellow
   stripes of the 1977 Apple logo. Pixel unit is 2px. Hard edges
   only, no blurred shadows, except inside the Google mockup where
   fidelity to the real thing wins.
   ================================================================== */
:root{
  --paper:#F4EFE4; --paper-lit:#FAF6EC; --ink:#1A1714; --ink-soft:#5C554B; --rule:#D8CFBC;
  --amber:#F5821F; --amber-lit:#FDB827;
  --amber-ink:#A14E07; /* same hue, darkened to clear 4.5:1. amber itself is a fill, never text */
  --d0:#61BB46; --d1:#FDB827; --d2:#F5821F; --d3:#E03A3E;
  --night:#1A1714; --night-2:#25201B; --night-line:#4A4137; --night-soft:#BDB29F;
  --g-text:#202124; --g-soft:#4D5156; --g-line:#DADCE0; --g-link:#1A0DAB; --g-icon:#70757A; --g-tab:#1A73E8;

  --pat-12:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z'/%3E%3C/svg%3E");
  --pat-25:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0h1v1H0z'/%3E%3C/svg%3E");
  --pat-50:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E");
  --pat-75:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0h2v1H0zM0 1h1v1H0z'/%3E%3C/svg%3E");

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pixel:"Silkscreen",Geneva,"Courier New",monospace;
  --gfont:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --max:1200px;
  --pxn:var(--paper);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
svg{display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 16px}}
.skip{position:absolute;left:-9999px;top:10px;z-index:99;background:var(--ink);color:var(--paper);padding:8px 12px}
.skip:focus{left:16px}
:focus-visible{outline:3px dashed currentColor;outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- pixel utilities ---------- */
/* chunky border, notched corners: four squares in the parent's color paint over the border corners */
.px{
  --bw:3px;
  border:var(--bw) solid var(--ink);
  background-image:linear-gradient(var(--pxn),var(--pxn)),linear-gradient(var(--pxn),var(--pxn)),linear-gradient(var(--pxn),var(--pxn)),linear-gradient(var(--pxn),var(--pxn));
  background-size:var(--bw) var(--bw);
  background-position:0 0,100% 0,0 100%,100% 100%;
  background-repeat:no-repeat;background-origin:border-box;background-clip:border-box;
}
.dith{background-color:var(--ink);-webkit-mask-image:var(--pat-50);mask-image:var(--pat-50);-webkit-mask-size:4px 4px;mask-size:4px 4px}
.dith--12{-webkit-mask-image:var(--pat-12);mask-image:var(--pat-12);-webkit-mask-size:8px 8px;mask-size:8px 8px}
.dith--25{-webkit-mask-image:var(--pat-25);mask-image:var(--pat-25)}
.dith--75{-webkit-mask-image:var(--pat-75);mask-image:var(--pat-75)}
.dshadow{position:relative}
.dshadow::after{content:"";position:absolute;z-index:0;left:12px;top:12px;right:-12px;bottom:-12px;background-color:var(--ink);-webkit-mask-image:var(--pat-50);mask-image:var(--pat-50);-webkit-mask-size:6px 6px;mask-size:6px 6px;pointer-events:none}
.dshadow>*{position:relative;z-index:1}
@media (max-width:640px){.dshadow::after{left:8px;top:8px;right:-8px;bottom:-8px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:700 1rem/1.2 var(--sans);padding:14px 22px;color:var(--ink);text-decoration:none;cursor:pointer;
  background-color:var(--amber-lit);box-shadow:4px 4px 0 var(--ink);
  transition:transform .08s steps(2),box-shadow .08s steps(2),background-color .15s;
}
.btn:hover{background-color:var(--amber)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn--paper{background-color:var(--paper-lit)}
.btn--paper:hover{background-color:#fff}
.btn--sm{padding:9px 14px;font-size:.88rem;box-shadow:3px 3px 0 var(--ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn svg{flex:none}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:3px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:68px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.brand b{font:700 .98rem/1 var(--pixel);letter-spacing:.1em}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:700}
.nav ul a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
/* phones: the links drop to their own row under the logo instead of disappearing */
@media (max-width:900px){
  .nav .wrap{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:4px;row-gap:2px}
  .nav ul{order:3;flex:1 0 100%;margin:0;gap:22px;overflow-x:auto;padding:8px 0 10px;scrollbar-width:none}
  .nav ul::-webkit-scrollbar{display:none}
  .nav ul a{white-space:nowrap}
  .nav .btn{margin-left:auto}
  html{scroll-padding-top:130px}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 68px);display:flex;align-items:center;padding:40px 0 64px}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap>div:first-child{position:relative;z-index:3}
.hero .wrap{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:36px;align-items:center}
@media (max-width:960px){.hero{min-height:0;padding:34px 0 48px}.hero .wrap{grid-template-columns:1fr;gap:8px}}
.chip{display:inline-block;background:var(--amber-lit);border:2px solid var(--ink);padding:4px 10px 3px;font:400 .74rem/1.6 var(--pixel);letter-spacing:.08em;text-transform:uppercase}
h1{font:600 clamp(3.3rem,7.6vw,6.6rem)/.94 var(--serif);letter-spacing:-.02em;margin:20px 0 0}
h1 em{font-style:italic;font-weight:500;background:var(--amber-lit);padding:0 .12em 0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lead{font-size:clamp(1.06rem,1.7vw,1.24rem);color:var(--ink-soft);max-width:31em;margin:26px 0 0}
.lead b{color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.note{font-size:.86rem;color:var(--ink-soft);margin:20px 0 0;max-width:34em}

.stage{position:relative;height:560px}
@media (max-width:960px){.stage{height:430px}}
@media (max-width:520px){.stage{height:380px}}
.burst{position:absolute;width:820px;height:820px;margin:-410px 0 0 -410px;left:50%;top:50%;opacity:0;transform:scale(.2);transition:opacity .35s,transform .7s cubic-bezier(.2,1.25,.4,1);pointer-events:none;z-index:0}
.burst{-webkit-mask-image:radial-gradient(circle,#000 22%,transparent 60%);mask-image:radial-gradient(circle,#000 22%,transparent 60%)}
.burst svg{width:100%;height:100%;animation:spin 80s linear infinite}
.stage.open .burst{opacity:1;transform:scale(1)}
@keyframes spin{to{transform:rotate(360deg)}}
.boxbtn{position:absolute;z-index:2;left:50%;bottom:40px;width:min(340px,72%);transform:translateX(-50%);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.boxbtn svg{width:100%;height:auto;overflow:visible}
.boxbtn .bob,.boxbtn .rattle,.boxbtn .lid,.boxbtn .lidhop,.boxbtn .bshadow{transform-box:fill-box}
.boxbtn .bob{transform-origin:50% 100%;animation:bob 2.6s steps(10) infinite}
.boxbtn .bshadow{transform-origin:50% 50%;animation:shad 2.6s steps(10) infinite}
.boxbtn .rattle{transform-origin:50% 100%;animation:rattle 3.8s steps(1) infinite}
.boxbtn .lid{transform-origin:15% 100%;transition:transform .75s cubic-bezier(.2,1.3,.35,1)}
.boxbtn .lidhop{animation:hop 3.8s steps(1) infinite}
.boxbtn .dust{animation:dust 3.8s steps(1) infinite;opacity:0}
.boxbtn .glow{animation:flick 1s steps(2) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shad{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.86)}}
@keyframes rattle{0%,60%,76%,100%{transform:none}62%{transform:rotate(-3deg) translateX(-3px)}64%{transform:rotate(3deg) translateX(3px)}66%{transform:rotate(-3deg) translateX(-2px)}68%{transform:rotate(2deg) translateX(2px)}70%{transform:rotate(-1deg)}72%{transform:rotate(1deg)}}
@keyframes hop{0%,60%,74%,100%{transform:none}62%,66%,70%{transform:translateY(-7px)}64%,68%,72%{transform:translateY(-2px)}}
@keyframes dust{0%,61%,78%,100%{opacity:0;transform:none}63%{opacity:1;transform:translateY(-2px)}70%{opacity:1;transform:translateY(-8px)}76%{opacity:.5;transform:translateY(-12px)}}
@keyframes flick{0%{opacity:1}50%{opacity:.55}}
.stage.open .rattle,.stage.open .lidhop,.stage.open .dust{animation:none}
.stage.open .lid{transform:translate(-26px,-92px) rotate(-16deg)}
.boxbtn:focus-visible{outline-offset:10px}
.hint{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:400 .74rem/1.4 var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);z-index:2;pointer-events:none}
.hint::before{content:"\25B8  ";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.qchip{position:absolute;z-index:3;max-width:210px;display:flex;align-items:flex-start;gap:9px;background-color:#fff;color:var(--g-text);font:13.5px/1.35 var(--gfont);padding:9px 11px 9px 12px;--bw:2px;box-shadow:3px 3px 0 var(--ink);pointer-events:none}
.qchip svg{flex:none;width:10px;height:5px;margin-top:6px;fill:var(--g-icon)}
.qchip.float{animation:floaty var(--fd,4s) steps(8) var(--fdl,0s) infinite alternate}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@media (max-width:520px){.qchip{max-width:150px;font-size:12px;padding:7px 9px}}

/* ---------- dither transitions + marquee ---------- */
.edge i{display:block;height:8px}
.edge--in i{background-color:var(--amber-lit)}
.edge--out i{background-color:var(--ink)}
.mq{overflow:hidden;white-space:nowrap;font:400 .84rem/1 var(--pixel);letter-spacing:.06em;text-transform:uppercase}
.mq--a{background:var(--amber-lit);color:var(--ink);padding:15px 0}
.mq--b{background:var(--ink);color:var(--amber-lit);padding:15px 0}
.track{display:inline-flex;animation:mq 90s linear infinite}
.mq--b .track{animation-duration:110s;animation-direction:reverse}
.track span{display:inline-flex;align-items:center}
.track span::after{content:"";width:9px;height:9px;background:currentColor;margin:0 28px}
@keyframes mq{to{transform:translateX(-50%)}}
.mqs:hover .track{animation-play-state:paused}

/* ---------- sections ---------- */
.sec{padding:120px 0}
@media (max-width:640px){.sec{padding:76px 0}}
.sec--lit{background:var(--paper-lit)}
.sec--lit .px{--pxn:var(--paper-lit)}
.sec--night{background:var(--night);color:var(--paper)}
.sec--night .px{--pxn:var(--night)}
.sec--night .console .px{--pxn:var(--night-2)}
.sec--night .btn{box-shadow:4px 4px 0 var(--paper)}
.sec--night .btn:active{box-shadow:0 0 0 var(--paper)}
.sec--night .btn--sm{box-shadow:3px 3px 0 var(--paper)}
.sec--amber{background:var(--amber-lit);position:relative;overflow:hidden}
.sec--amber .px{--pxn:var(--amber-lit)}
.sec--amber .card .px{--pxn:var(--paper-lit)}
.sec--amber canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.sec--amber .wrap{position:relative;z-index:1}

.kicker{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:400 .8rem/1 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink)}
.kicker::before{content:"";flex:none;width:14px;height:14px;border:2px solid currentColor;background:radial-gradient(currentColor 0 0) center/6px 6px no-repeat}
.sec--night .kicker{color:var(--amber-lit)}
.sec--amber .kicker{color:var(--ink)}
.sec h2{font:600 clamp(2.4rem,5.2vw,4.1rem)/1.02 var(--serif);letter-spacing:-.015em;margin:0}
.intro{font-size:1.1rem;color:var(--ink-soft);max-width:38em;margin:20px 0 0}
.sec--night .intro{color:var(--night-soft)}
.intro a{color:var(--ink);font-weight:700;text-decoration-color:var(--amber);text-decoration-thickness:3px;text-underline-offset:3px}
.intro a:hover{background:var(--amber-lit)}

.js .rv{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .6s steps(6)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- 01 the problem ---------- */
.prob{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start}
@media (max-width:980px){.prob{grid-template-columns:1fr;gap:44px}}
@media (min-width:981px){.prob>div:first-child{position:sticky;top:100px}}
.score{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;max-width:420px}
.score div{background-color:#fff;padding:14px 16px 12px}
.score b{display:block;font:700 2.5rem/1 var(--pixel)}
.score span{font:400 .68rem/1.6 var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.smsg{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;font-size:1.02rem;min-height:3.3em;max-width:30em}
.smsg::before{content:"";flex:none;width:10px;height:10px;margin-top:.45em;background:var(--amber)}

.gwin{background-color:#fff}
.gbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:3px solid var(--ink);background:var(--paper)}
.gdots{display:flex;gap:6px}
.gdots i{width:11px;height:11px;border:2px solid var(--ink)}
.gdots i:first-child{background:var(--amber)}
.gurl{flex:1;min-width:0;font:12.5px/1.4 var(--gfont);color:var(--g-soft);background:#fff;border:2px solid var(--ink);padding:4px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gbody{padding:22px 26px 24px;background:#fff}
@media (max-width:560px){.gbody{padding:16px 14px 18px}}
.gsearch{display:flex;align-items:center;gap:14px;border:1px solid var(--g-line);border-radius:24px;padding:11px 18px;box-shadow:0 1px 6px rgba(32,33,36,.2);font:16px/22px var(--gfont);color:var(--g-text)}
.gsearch .mag{flex:none;width:22px;height:22px}
.gsearch .gq{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsearch .gx{flex:none;width:20px;height:20px;fill:var(--g-icon)}
.gtabs{display:flex;gap:24px;margin:18px 0 20px;padding:0 6px;border-bottom:1px solid var(--g-line);font:14px/20px var(--gfont);color:var(--g-soft);overflow:hidden;white-space:nowrap}
.gtabs span{padding:0 0 10px}
.gtabs .on{color:var(--g-tab);border-bottom:3px solid var(--g-tab);padding-bottom:7px}
.paa{font-family:var(--gfont);color:var(--g-text)}
.paa-h{display:flex;align-items:center;justify-content:space-between;padding:2px 0 12px}
.paa-h h3{font:400 20px/28px var(--gfont);margin:0;color:var(--g-text)}
.paa-h svg{width:20px;height:20px;fill:var(--g-icon)}
.paa-i{border-top:1px solid var(--g-line)}
.paa-i:last-child{border-bottom:1px solid var(--g-line)}
.paa-i.new{animation:gnew 1.6s ease-out}
@keyframes gnew{from{background:#FEF0C3}to{background:#fff}}
.paa-q{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:13px 4px;cursor:pointer;font:400 16px/24px var(--gfont);color:var(--g-text)}
.paa-q:hover span{text-decoration:underline}
.paa-q:focus-visible{outline:2px solid var(--g-link);outline-offset:2px}
.paa-q svg{flex:none;width:24px;height:24px;fill:var(--g-icon);transition:transform .2s}
.paa-i.open .paa-q svg{transform:rotate(180deg)}
.paa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.paa-i.open .paa-a{grid-template-rows:1fr}
.paa-a>div{overflow:hidden}
.paa-in{visibility:hidden;transition:visibility 0s .3s;padding:0 4px}
.paa-i.open .paa-in{visibility:visible;transition:visibility 0s}
.snip{font:400 14px/22px var(--gfont);color:var(--g-soft);margin:0 0 14px}
.snip b{color:var(--g-text)}
.src{display:flex;align-items:center;gap:10px}
.fav{flex:none;width:26px;height:26px;border-radius:50%;background:#F1F3F4;border:1px solid var(--g-line);display:grid;place-items:center}
.fav svg{width:12px;height:12px}
.site b{display:block;font:400 14px/20px var(--gfont)}
.site span{font:400 12px/18px var(--gfont);color:var(--g-soft)}
.stitle{display:block;font:400 18px/26px var(--gfont);color:var(--g-link);margin:6px 0 16px}
.paa-f{display:flex;justify-content:flex-end;padding:12px 0 0;font:400 12px/16px var(--gfont);color:var(--g-soft)}
.gnote{margin:24px 0 0;font-size:.8rem;color:var(--ink-soft)}

/* ---------- 02 inside the box ---------- */
.console{display:grid;grid-template-columns:330px minmax(0,1fr);margin-top:56px;border-color:var(--paper);background-color:var(--night-2)}
@media (max-width:920px){.console{grid-template-columns:1fr}}
.ctl{padding:24px 22px 26px;border-right:3px solid var(--paper);display:flex;flex-direction:column;gap:10px}
@media (min-width:921px){.ctl{border-right:0;position:sticky;top:90px;align-self:start}.out{border-left:3px solid var(--paper)}}
@media (max-width:920px){.ctl{border-right:0;border-bottom:3px solid var(--paper)}}
.lab{font:400 .72rem/1.4 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--night-soft);margin:6px 0 0}
.seg{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--paper)}
.seg button{font:700 .88rem/1.2 var(--sans);padding:11px 8px;border:0;background:transparent;color:var(--paper);cursor:pointer}
.seg button+button{border-left:2px solid var(--paper)}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.dlist{display:grid;gap:8px}
.dbtn{display:grid;grid-template-columns:36px auto 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center;text-align:left;padding:9px 11px;border:2px solid var(--night-line);background:var(--night);color:var(--paper);cursor:pointer;font:inherit}
.dbtn:hover{border-color:var(--paper)}
.dbtn .sw{grid-row:span 2;width:36px;height:32px}
.dbtn b{font:700 .8rem/1.3 var(--pixel);letter-spacing:.04em}
.dbtn span{font-size:.92rem;font-weight:700}
.dbtn em{grid-column:2 / span 2;font-style:normal;font-size:.8rem;color:var(--night-soft)}
.dbtn[aria-pressed="true"]{border-color:var(--paper);background:var(--paper);color:var(--ink)}
.dbtn[aria-pressed="true"] em{color:var(--ink-soft)}
.run{margin-top:14px;width:100%}
.prog{height:20px;border:2px solid var(--paper);padding:2px;margin-top:8px}
.prog i{display:block;height:100%;width:0;background:var(--amber-lit);transition:width .12s steps(3)}
.stat{display:flex;align-items:baseline;gap:12px;margin:10px 0 0}
.stat b{font:700 2.8rem/1 var(--pixel);color:var(--amber-lit)}
.stat span{font-size:.92rem;color:var(--night-soft)}
.ctime{margin:0;font-size:.86rem;color:var(--night-soft)}
.cstat{margin:0;font-size:.9rem;font-weight:700;min-height:1.4em}
.out{padding:22px 24px 28px;min-width:0}
@media (max-width:560px){.out{padding:18px 12px 22px}.ctl{padding:20px 14px 22px}}
.outbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:2px solid var(--night-line)}
.outbar span{font:400 .74rem/1.4 var(--pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--night-soft)}
.empty{color:var(--night-soft);font-size:.95rem;margin:4px 0}
ul.nest,ul.nest ul{list-style:none;margin:0;padding:0}
ul.nest>li+li{margin-top:10px}
ul.nest ul{margin:8px 0 0;padding-left:20px}
ul.nest ul>li+li{margin-top:8px}
@media (max-width:560px){ul.nest ul{padding-left:10px}}
.qrow{--bw:2px;display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-color:var(--night-line)!important;background-color:var(--night)}
.qrow .edge{flex:none;width:8px;align-self:stretch;min-height:20px}
.qrow .txt{flex:1 1 auto;min-width:0;font-size:.96rem;line-height:1.45}
.qrow .ans{display:none;margin-top:5px;font-size:.84rem;line-height:1.5;color:var(--night-soft)}
.with-ans .qrow .ans{display:block}
li[data-d="0"]>.qrow .txt>span:first-child{font-weight:700}
.qrow .n{flex:none;padding-top:3px;font:400 .66rem/1.4 var(--pixel);letter-spacing:.04em;text-transform:uppercase;color:var(--night-soft);white-space:nowrap}
.tog{flex:none;width:20px;height:20px;margin-top:1px;padding:0;border:2px solid var(--paper);background:var(--night-2);color:var(--paper);font:700 .72rem/1 var(--pixel);cursor:pointer}
.tog:hover{background:var(--amber-lit);color:var(--ink)}
.tog.leaf{visibility:hidden}
li[hidden]{display:none}
.pop{animation:pop .3s steps(3) both}
@keyframes pop{from{opacity:0;transform:translate(-8px,-4px)}to{opacity:1;transform:none}}

/* ---------- 03 what you get ---------- */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:56px}
@media (max-width:1040px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.feats{grid-template-columns:1fr}}
.feat{background-color:var(--paper-lit);padding:26px 24px 26px;transition:transform .12s steps(2),box-shadow .12s steps(2)}
.feat:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--ink)}
.feat--big{grid-column:span 2;background-color:var(--amber-lit)}
@media (max-width:600px){.feat--big{grid-column:auto}}
.feat .ico{width:48px;height:48px;margin-bottom:20px;shape-rendering:crispEdges}
.feat .ico .ik{fill:var(--ink)}
.feat .ico .amb{fill:var(--amber)}
.feat--big .ico .amb{fill:var(--paper-lit)}
.feat:hover .ico .amb{animation:blink .7s steps(1) infinite}
.feat h3{font:600 1.55rem/1.12 var(--serif);margin:0 0 9px}
.feat p{margin:0;font-size:.96rem;line-height:1.6;color:var(--ink-soft)}
.feat--big p{color:var(--ink)}
.swrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px}
@media (max-width:420px){.swrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.swrow div{border:2px solid var(--ink);background:var(--paper-lit);padding:9px 9px 8px}
.swrow i{display:block;height:16px;margin-bottom:7px}
.swrow b{display:block;font:700 .76rem/1.3 var(--pixel)}
.swrow span{font-size:.82rem}

/* ---------- 04 notify ---------- */
.notify{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:center}
@media (max-width:920px){.notify{grid-template-columns:1fr;gap:44px}}
.card{background-color:var(--paper-lit);overflow:hidden}
.perf{height:12px;border-bottom:2px dashed var(--ink);background:var(--amber)}
.cardin{padding:28px 30px 30px}
@media (max-width:560px){.cardin{padding:20px 16px 22px}}
.cardin .lab2{font:400 .74rem/1.4 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.cardin h2{font-size:clamp(2rem,4.2vw,2.8rem)}
.cardin p{margin:12px 0 0;color:var(--ink-soft);max-width:34em}
form{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
input[type=email]{flex:1 1 220px;min-width:0;font:1rem/1.3 var(--sans);color:var(--ink);padding:13px 14px;background:#fff;border:3px solid var(--ink);border-radius:0}
input[type=email]::placeholder{color:#716A5E}
.status{margin:14px 0 0;font-size:.9rem;font-weight:700;min-height:1.3em;color:#2C6410}
.status[data-err="1"]{color:#A3241C}
.side h3{font:600 clamp(1.8rem,3.4vw,2.4rem)/1.08 var(--serif);margin:0 0 12px}
.side p{margin:0 0 24px;max-width:28em}

/* ---------- 04 reviews / 05 faq (added) ---------- */
.rating{margin:18px 0 0;font-size:.95rem}
.rating a{color:var(--ink);text-decoration:none;font-weight:400}
.rating a:hover{text-decoration:underline;text-decoration-thickness:2px}
.rating span{color:var(--amber-ink);letter-spacing:2px}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:34px 0 30px;max-width:620px}
.proof div{background-color:#fff;padding:14px 16px 12px}
.proof b{display:block;font:700 2.2rem/1 var(--pixel)}
.proof span{font:400 .68rem/1.6 var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.rev{margin:0;background-color:#fff;padding:20px 20px 16px;display:flex;flex-direction:column;gap:12px}
.rev .stars{margin:0;color:var(--amber-ink);letter-spacing:3px;font-size:1rem}
.rev blockquote{margin:0;font:italic 500 1.22rem/1.45 var(--serif)}
.rev figcaption{margin-top:auto;font-weight:700;font-size:.9rem}
.rev figcaption span{font-weight:400;color:var(--ink-soft)}
.revnote{margin:22px 0 0;font-size:.84rem;color:var(--ink-soft);max-width:52em}
.revnote a{color:var(--ink);font-weight:700}
.faqwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
@media (max-width:920px){.faqwrap{grid-template-columns:1fr;gap:32px}}
.faqs{display:grid;gap:12px}
.qa{background-color:var(--paper-lit)}
.qa summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;font-weight:700;font-size:1.02rem;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 1rem/1 var(--pixel);width:22px;height:22px;display:grid;place-items:center;border:2px solid var(--ink);background:#fff}
.qa[open] summary::after{content:"-";background:var(--amber-lit)}
.qa div{padding:0 18px 16px}
.qa p{margin:0;color:var(--ink-soft)}
.qa a{color:var(--ink);font-weight:700}
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 14px;padding:0}
.flinks a{color:var(--paper);font-weight:700;font-size:.86rem;text-underline-offset:3px}

/* ---------- 05 guides (added) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.card{display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;background-color:var(--night-2);border-color:var(--paper)!important;color:var(--paper);text-decoration:none;transition:transform .12s steps(2),box-shadow .12s steps(2)}
.card:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--amber-lit)}
.card-q{font:600 1.3rem/1.2 var(--serif)}
.card-a{font-size:.9rem;line-height:1.55;color:var(--night-soft)}
.card-go{margin-top:auto;font:400 .7rem/1.4 var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--amber-lit)}
.guide-lead{display:flex;flex-direction:column;gap:8px;margin:34px 0 18px;padding:24px 26px 22px;background-color:var(--amber-lit);color:var(--ink);text-decoration:none;max-width:760px;transition:transform .12s steps(2),box-shadow .12s steps(2)}
.guide-lead:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--paper)}
.gl-tag{font:400 .7rem/1.4 var(--pixel);letter-spacing:.08em;text-transform:uppercase}
.gl-q{font:600 clamp(1.6rem,3vw,2.1rem)/1.12 var(--serif)}
.gl-a{font-size:.98rem;line-height:1.55;max-width:44em}
.gl-go{font:400 .72rem/1.4 var(--pixel);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--night-soft);padding:48px 0 56px}
footer .wrap{display:grid;grid-template-columns:auto 1fr;gap:20px 56px;align-items:start}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}
footer .brand{color:var(--paper)}
footer p{margin:0 0 8px;font-size:.82rem;line-height:1.6;max-width:62em}
footer a{color:var(--paper);font-weight:700;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .boxbtn .bob,.boxbtn .bshadow,.boxbtn .rattle,.boxbtn .lidhop,.boxbtn .dust,.boxbtn .glow,.burst svg,.track,.hint::before,.qchip.float,.feat:hover .ico .amb{animation:none}
  .boxbtn .lid,.burst,.feat,.prog i{transition:none}
  .track{flex-wrap:wrap;white-space:normal}
  .pop,.paa-i.new{animation:none}
}

/* ---------- WordPress ---------- */
.admin-bar .nav{top:32px}
@media screen and (max-width:782px){.admin-bar .nav{top:46px}}
@media screen and (max-width:600px){.admin-bar .nav{top:0}}
.entry{max-width:42em;margin-top:28px;font-size:1.05rem}
.entry a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
.entry img{max-width:100%;height:auto}


/* ==================================================================
   Inner pages: guides (Authority / Knowledge / Answer) and utility pages.
   Same tokens and pixel rules as the front page.
   ================================================================== */
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:0 0 14px;padding:0}
.flinks a{color:var(--paper);font-weight:700;font-size:.86rem;text-underline-offset:3px}

.page{background:var(--paper)}
.pagehead{padding:52px 0 34px;border-bottom:3px solid var(--ink);background:var(--paper-lit)}
.pagehead h1{font:600 clamp(2.2rem,5vw,3.6rem)/1.04 var(--serif);letter-spacing:-.015em;margin:0;max-width:22em}
.pagehead .lede{font-size:1.12rem;color:var(--ink-soft);max-width:40em;margin:16px 0 0}
.pagehead .kicker{margin-bottom:14px}
.page--authority .pagehead{background:var(--amber-lit)}
.page--authority .pagehead .kicker{color:var(--ink)}

.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0 0 20px;padding:0;font:400 .74rem/1.5 var(--pixel);letter-spacing:.05em;text-transform:uppercase}
.crumbs li{color:var(--ink-soft)}
.crumbs li+li::before{content:"\25B8";margin:0 9px;color:var(--amber-ink)}
.crumbs a{color:var(--ink);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-decoration-thickness:2px}

.pagegrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;padding-top:44px;padding-bottom:64px}
.pagesolo{max-width:820px;padding-top:44px;padding-bottom:72px}
@media (max-width:980px){.pagegrid{grid-template-columns:1fr;gap:36px}}

.shortans{background-color:#fff;padding:18px 22px 20px;margin:0 0 34px;box-shadow:5px 5px 0 var(--amber)}
.shortans .lab{font:400 .72rem/1.4 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);margin:0 0 8px}
.shortans p:last-child{margin:0;font-size:1.12rem;line-height:1.6}

.entry{font-size:1.06rem;line-height:1.72;max-width:44em}
.entry h2{font:600 clamp(1.6rem,3vw,2.1rem)/1.15 var(--serif);margin:2.1em 0 .5em;letter-spacing:-.01em}
.entry h3{font:700 1.12rem/1.35 var(--sans);margin:1.7em 0 .4em}
.entry p{margin:0 0 1.05em}
.entry ul,.entry ol{margin:0 0 1.2em;padding-left:1.3em}
.entry li{margin:.3em 0}
.entry li::marker{color:var(--amber-ink);font-weight:700}
.entry a{color:var(--ink);font-weight:700;text-decoration-color:var(--amber);text-decoration-thickness:3px;text-underline-offset:3px}
.entry a:hover{background:var(--amber-lit)}
.entry blockquote{margin:1.4em 0;padding:14px 20px;border-left:6px solid var(--amber);background:var(--paper-lit);font-size:1.02rem}
.entry blockquote p:last-child{margin:0}
.entry code{font:400 .92em/1 Monaco,Menlo,monospace;background:var(--paper-lit);border:1px solid var(--rule);padding:1px 5px}
.entry table{width:100%;border-collapse:collapse;margin:1.2em 0 1.6em;font-size:.95rem;display:block;overflow-x:auto}
.entry th,.entry td{text-align:left;padding:10px 12px;border:2px solid var(--ink);vertical-align:top;min-width:120px}
.entry th{background:var(--amber-lit);font-weight:700}
.entry td{background:#fff}

.sources{margin-top:44px;padding-top:22px;border-top:2px solid var(--rule)}
.sources h2{font:400 .78rem/1.4 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px}
.sources ol{margin:0;padding-left:1.4em;font-size:.88rem;color:var(--ink-soft)}
.sources li{margin:.35em 0}
.sources a{color:var(--ink-soft);word-break:break-word}

.boxnav{position:sticky;top:96px}
.admin-bar .boxnav{top:128px}
@media (max-width:980px){.boxnav{position:static}}
.boxnav .lab{font:400 .72rem/1.4 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.bn-parent,.bn-here{display:block;padding:12px 14px;font-weight:700;font-size:.92rem;line-height:1.4;color:var(--ink);text-decoration:none;background-color:#fff}
.bn-parent{margin-bottom:10px}
.bn-parent:hover{background-color:var(--amber-lit)}
.bn-here{background-color:var(--ink);color:var(--paper);--pxn:var(--paper)}
.bn-tag{display:block;font:400 .64rem/1.5 var(--pixel);letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:3px}
.bn-kids{list-style:none;margin:10px 0 0 14px;padding:0 0 0 14px;border-left:3px solid var(--ink)}
.bn-kids li{margin:8px 0}
.bn-kids a{display:block;font-size:.9rem;line-height:1.4;color:var(--ink);font-weight:700;text-decoration:none;padding:8px 10px;border:2px solid var(--ink);background:var(--paper-lit)}
.bn-kids a:hover{background:var(--amber-lit)}

.inside{padding:64px 0;background:var(--night);color:var(--paper)}
.inside .kicker{color:var(--amber-lit)}
.inside h2{font:600 clamp(2rem,4vw,2.8rem)/1.08 var(--serif);margin:0 0 28px}
.inside .px{--pxn:var(--night)}
/* .cards / .card live in the front-page stylesheet (shared) */

.beside{padding:52px 0}
.beside h2{font:600 1.7rem/1.1 var(--serif);margin:0 0 18px}
.sibs{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.sibs a{display:inline-block;padding:10px 14px;background-color:var(--paper-lit);color:var(--ink);font-weight:700;font-size:.92rem;text-decoration:none;--bw:2px}
.sibs a:hover{background-color:var(--amber-lit)}

.ctaband{padding:56px 0;background:var(--amber-lit);border-top:3px solid var(--ink)}
.ctaband .px{--pxn:var(--amber-lit)}
.ctaband h2{font:600 clamp(1.8rem,3.6vw,2.4rem)/1.1 var(--serif);margin:0 0 10px}
.ctaband p{max-width:40em;margin:0 0 20px}
.ctaband .ctas{display:flex;flex-wrap:wrap;gap:14px;margin:0}

/* goodbye form */
.gb fieldset{border:3px solid var(--ink);padding:18px 20px;margin:0 0 18px;background:#fff}
.gb legend{font:600 1.3rem/1.2 var(--serif);padding:0 8px}
.gb label{display:flex;gap:10px;align-items:flex-start;padding:7px 0;cursor:pointer}
.gb input[type=radio]{margin-top:5px;accent-color:var(--amber-ink);width:18px;height:18px}
.gb textarea{width:100%;min-height:110px;font:1rem/1.5 var(--sans);padding:12px;border:3px solid var(--ink);background:#fff;color:var(--ink)}
.gb .hp{position:absolute;left:-9999px}
.gb-status{margin:14px 0 0;font-weight:700;color:#2C6410;min-height:1.3em}
.gb-status[data-err="1"]{color:#A3241C}

/* free vs pro */
.entry .tick{color:#2C6410;font-weight:700}