/* What Gets It Out: shared design system. One file, no JS, no web fonts. See ../DESIGN.md */

/* ---------- Tokens ---------- */
:root{
  --ink:#1c2541;          /* headings, strong text */
  --text:#33405c;         /* body text */
  --muted:#66728c;        /* secondary text */
  --bg:#f4f7fb;           /* page background */
  --surface:#ffffff;      /* cards */
  --line:#dfe6f0;         /* borders */
  --brand:#1677c9;        /* primary blue (clean water) */
  --brand-ink:#0d4f8b;
  --brand-soft:#e3f0fb;
  --pink:#e2558f;         /* accent: the "dye" */
  --pink-soft:#fde8f1;
  --mint:#1b9e77;         /* tips / success */
  --mint-soft:#e3f5ee;
  --amber:#b86e00;        /* warnings */
  --amber-soft:#fff3dc;
  --red:#c8323c;          /* do-not */
  --red-soft:#fde7e8;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(28,37,65,.06),0 6px 20px rgba(28,37,65,.06);
  --measure:45rem;        /* ~720px reading width */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#eef2fa;--text:#c9d2e3;--muted:#93a0b8;--bg:#0f1524;--surface:#18213a;--line:#2a3554;
    --brand:#5aaeff;--brand-ink:#9ccbff;--brand-soft:#1a2c4d;
    --pink:#ff7fb0;--pink-soft:#3a1f33;--mint:#4fd1a5;--mint-soft:#143329;
    --amber:#ffbf5a;--amber-soft:#36290f;--red:#ff7b83;--red-soft:#3a1c22;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:1.0625rem/1.65 var(--font);color:var(--text);background:var(--bg);overflow-wrap:break-word}
h1,h2,h3{color:var(--ink);line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.75rem,6vw,2.5rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:1.35rem;font-weight:750}
h3{font-size:1.05rem;font-weight:700}
p,ul,ol,table{margin:0 0 1em}
:where(p,ul,ol,table):last-child{margin-bottom:0}
a{color:var(--brand-ink);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--brand)}
a:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
strong{color:var(--ink)}
svg{display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1rem}
@media (min-width:40rem){.wrap{padding:0 1.5rem}}
main.wrap{padding-bottom:2rem}
.cite{font-size:.78em;white-space:nowrap;vertical-align:.15em}
.cite a{text-decoration:none;color:var(--muted)}
.cite a:hover{color:var(--brand)}

/* ---------- Header ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
.brand svg{width:2.25rem;height:2.25rem;flex:none}
.brand small{display:block;font-weight:500;font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.site-nav a{font-size:.92rem;font-weight:600;text-decoration:none;color:var(--muted)}
.site-nav a:hover{color:var(--brand)}

/* ---------- Hero ---------- */
.hero{padding:1.75rem 0 1.25rem;display:grid;gap:1.25rem;align-items:center}
.hero-art{width:min(55%,200px);margin:0 auto;order:-1}
.hero-art svg{width:100%;height:auto}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);background:var(--pink-soft);padding:.25em .7em;border-radius:999px;margin-bottom:.75rem}
.lede{font-size:1.15rem;color:var(--muted);margin:0}
@media (min-width:40rem){
  .hero{grid-template-columns:1fr 200px;padding:2.75rem 0 1.75rem}
  .hero-art{order:0;width:100%}
}

/* ---------- Quick answer ---------- */
.quick-answer{background:var(--surface);border:2px solid var(--brand);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;margin:0 0 1.5rem;position:relative}
.quick-answer>h2{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;color:var(--brand-ink)}
.quick-answer>h2 svg{width:1.4rem;height:1.4rem;flex:none}
.qa-order{list-style:none;padding:0;margin:0 0 1.25rem;display:grid;gap:.5rem}
.qa-order li{display:grid;grid-template-columns:1.6rem 1fr;gap:.65rem;align-items:start;padding:.55rem .75rem;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--ink);font-weight:600;font-size:.98rem}
.qa-order .note{color:var(--text);font-weight:400}
.qa-order .n{flex:none;display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--brand);color:#fff;font-size:.85rem;font-weight:800;transform:translateY(-.05rem)}
.qa-order li.stop{background:var(--red-soft)}
.qa-order li.stop .n{background:var(--red)}
@media (prefers-color-scheme:dark){.qa-order .n{color:#0f1524}}
.quick-answer h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .5rem}

/* Situation table: a real table on wide screens, stacked cards on phones */
.qa-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem}
.qa-table th,.qa-table td{text-align:left;vertical-align:top;padding:.6rem .75rem;border-bottom:1px solid var(--line)}
.qa-table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:2px solid var(--line)}
.qa-table tbody th{color:var(--ink);font-weight:700;width:38%}
.qa-table tr:last-child>*{border-bottom:0}
@media (max-width:39.99rem){
  .qa-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .qa-table,.qa-table tbody,.qa-table tr,.qa-table th,.qa-table td{display:block;width:auto}
  .qa-table tr{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:.5rem;overflow:hidden}
  .qa-table tbody th{background:var(--bg);border-bottom:1px solid var(--line);width:auto}
  .qa-table td{border-bottom:0}
}

/* ---------- Callouts ---------- */
.callout{display:grid;grid-template-columns:2.5rem 1fr;gap:.85rem;align-items:start;padding:1rem 1.1rem;border-radius:var(--radius);margin:1rem 0;border:1px solid transparent;font-size:.98rem}
.callout>svg{width:2.5rem;height:2.5rem}
.callout h2,.callout h3{font-size:1.05rem;margin:.3rem 0 .35rem}
.callout p{margin:0 0 .5em}
.callout p:last-child{margin:0}
.callout--warn{background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.callout--warn h2,.callout--warn h3{color:var(--amber)}
.callout--tip{background:var(--mint-soft);border-color:color-mix(in srgb,var(--mint) 30%,transparent)}
.callout--tip h2,.callout--tip h3{color:var(--mint)}
.callout--dont{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.callout--dont h2,.callout--dont h3{color:var(--red)}
.callout--big{padding:1.25rem;border-width:2px}
.callout--big h2{font-size:1.25rem}

/* ---------- Section heading ---------- */
.section{margin:2.25rem 0 0}
.section-title{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.section-title svg{width:1.8rem;height:1.8rem;flex:none}

/* ---------- Kit ("what you need") ---------- */
.kit{list-style:none;padding:0;margin:0;display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.kit li{display:grid;grid-template-columns:3rem 1fr;gap:.75rem;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem;box-shadow:var(--shadow);font-size:.93rem;line-height:1.5}
.kit li svg{width:3rem;height:3rem}
@media (max-width:39.99rem){.kit li{grid-template-columns:1fr;gap:.5rem;padding:.8rem;font-size:.88rem}.kit li svg{width:2.5rem;height:2.5rem}}
.kit strong{display:block;font-size:.98rem;margin-bottom:.15rem}
.kit .for{display:inline-block;margin-top:.35rem;font-size:.75rem;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);border-radius:999px;padding:.1em .6em}
/* Amazon UK search links on kit items (rel=sponsored) + disclosure */
.kit .buy{display:inline-block;margin:.35rem 0 0;font-size:.75rem;font-weight:700;color:var(--brand-ink);text-decoration:none;background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));border:1px solid var(--line);border-radius:999px;padding:.1em .65em;box-shadow:inset 0 1px 0 var(--hi),0 2px 0 var(--edge);transition:transform .15s var(--ease-spring)}
.kit .buy::after{content:" \2197";font-weight:800}
.kit .buy:hover{text-decoration:underline;transform:translateY(-1px)}
.kit .buy:active{transform:translateY(2px);box-shadow:inset 0 1px 0 var(--hi),0 0 0 var(--edge)}
.kit .buy:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.aff-note{margin:-.35rem 0 .8rem;font-size:.8rem;color:var(--muted);line-height:1.45}
@media (prefers-reduced-motion:reduce){.kit .buy{transition:none}.kit .buy:hover,.kit .buy:active{transform:none}}

/* ---------- Step cards ---------- */
.steps{display:grid;gap:1.25rem;margin-top:1rem}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;position:relative;overflow:hidden}
.step::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--brand)}
.step--last::before{background:var(--red)}
.step-head{display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;margin-bottom:.9rem}
.step-num{display:flex;flex-direction:column;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:14px;background:var(--brand);color:#fff;line-height:1}
.step-num small{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-bottom:.12rem}
.step-num b{font-size:1.35rem;font-weight:800}
@media (prefers-color-scheme:dark){.step-num{color:#0f1524}}
.step--last .step-num{background:var(--red)}
.step-head h2{margin:0;font-size:1.2rem}
.step-head svg{width:2.75rem;height:2.75rem}
@media (min-width:40rem){.step-head svg{width:3.25rem;height:3.25rem}}
.badge{display:inline-block;font-size:.8rem;font-weight:700;line-height:1.35;border-radius:.7em;padding:.2em .65em;margin-top:.35rem;background:var(--brand-soft);color:var(--brand-ink)}
.badge--red{background:var(--red-soft);color:var(--red)}
.substeps{list-style:none;counter-reset:sub;padding:0;margin:0 0 1em;display:grid;gap:.5rem}
.substeps li{counter-increment:sub;position:relative;padding:.55rem .75rem .55rem 2.6rem;background:var(--bg);border-radius:var(--radius-sm);font-size:.98rem}
.substeps li::before{content:counter(sub);position:absolute;left:.7rem;top:.6rem;width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:800;color:var(--brand-ink);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.method-label{font-weight:700;color:var(--ink);font-size:.95rem;margin:1rem 0 .5rem}
.facts{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.facts li{font-size:.85rem;font-weight:600;color:var(--ink);background:var(--brand-soft);border-radius:999px;padding:.3em .8em}
.facts li b{color:var(--brand-ink)}

/* ---------- Generic card + checklist ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}
.card-row{display:grid;gap:1rem;align-items:center}
.card-row>svg{width:7rem;height:auto;margin:0 auto}
@media (min-width:40rem){.card-row{grid-template-columns:1fr 8rem}.card-row>svg{width:100%}}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.checks li{display:grid;grid-template-columns:1.5rem 1fr;gap:.6rem;align-items:start}
.checks li svg{width:1.5rem;height:1.5rem;margin-top:.15rem}

/* ---------- Sources ---------- */
.sources{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.sources h2{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sources ol{padding-left:1.6rem;margin:0 0 1rem;display:grid;gap:.3rem}
.sources li:target{background:var(--amber-soft);border-radius:6px;outline:4px solid var(--amber-soft)}
.sources a{color:var(--text)}
.meta{font-size:.82rem;color:var(--muted)}

/* ---------- Index: page grid ---------- */
.page-grid{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.page-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:var(--text);transition:transform .15s ease,box-shadow .15s ease}
.page-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(28,37,65,.08),0 12px 28px rgba(28,37,65,.1);color:var(--text)}
.page-card-art{background:linear-gradient(135deg,var(--brand-soft),var(--pink-soft));padding:1.25rem;display:grid;place-items:center}
.page-card-art svg{width:9rem;height:auto}
.page-card-body{padding:1rem 1.15rem 1.25rem}
.page-card h3{font-size:1.1rem;margin:.35rem 0 .4rem}
.page-card p{font-size:.93rem;color:var(--muted);margin:0}
.page-card .more{margin-top:.75rem;font-weight:700;font-size:.9rem;color:var(--brand-ink)}

/* ---------- Footer ---------- */
.site-footer{margin-top:3rem;background:var(--surface);border-top:1px solid var(--line);padding:1.5rem 0 2rem;font-size:.88rem;color:var(--muted)}
.site-footer .brand{font-size:1rem;margin-bottom:.5rem}
.site-footer .brand svg{width:1.75rem;height:1.75rem}


/* =====================================================================
   3D LAYER: extruded cards, raised discs, pressed chips, lighting.
   Every surface = light gradient + inset top highlight + a solid "edge"
   (the extruded thickness) + soft ambient shadows. See DESIGN.md.
   ===================================================================== */
:root{
  --edge:#cdd8e6;                 /* card thickness colour */
  --hi:rgba(255,255,255,.95);     /* top bevel highlight */
  --lo:rgba(28,37,65,.06);        /* bottom bevel */
  --amb:rgba(28,37,65,.10);       /* ambient shadow */
  --surface-top:#ffffff;--surface-bot:#f6f9fd;
  --depth:5px;
  --shadow-3d:inset 0 1px 0 var(--hi),inset 0 -2px 0 var(--lo),0 1px 0 var(--edge),0 var(--depth) 0 var(--edge),0 calc(var(--depth) + 4px) 10px var(--amb),0 calc(var(--depth) + 16px) 32px -8px var(--amb);
  --shadow-3d-lift:inset 0 1px 0 var(--hi),inset 0 -2px 0 var(--lo),0 1px 0 var(--edge),0 calc(var(--depth) + 3px) 0 var(--edge),0 calc(var(--depth) + 12px) 18px var(--amb),0 calc(var(--depth) + 30px) 44px -10px rgba(28,37,65,.18);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme:dark){
  :root{--edge:#0a0f1c;--hi:rgba(255,255,255,.08);--lo:rgba(0,0,0,.25);--amb:rgba(0,0,0,.45);--surface-top:#1d2844;--surface-bot:#161f36}
}
body{background:
  radial-gradient(1200px 600px at 15% -10%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 60%),
  radial-gradient(900px 500px at 110% 10%,color-mix(in srgb,var(--pink) 10%,transparent),transparent 60%),
  var(--bg);background-attachment:fixed;overflow-x:clip}
[id]{scroll-margin-top:5.5rem}

/* Sticky frosted header with depth */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 1px 0 var(--line),0 8px 24px -16px var(--amb)}
.brand svg{filter:drop-shadow(0 3px 3px rgba(13,79,139,.3));transition:transform .4s var(--ease-spring)}
.brand:hover svg{transform:rotate(-8deg) scale(1.08)}

/* 3D pressed buttons and chips: .btn-3d, .chip-3d, .eyebrow, .facts li, .for, .badge */
.btn-3d,.chip-3d{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;border-radius:999px;transition:transform .12s ease,box-shadow .12s ease}
.site-nav .btn-3d{padding:.4em .95em;color:var(--brand-ink);background:linear-gradient(180deg,var(--surface-top),var(--brand-soft));box-shadow:inset 0 1px 0 var(--hi),0 3px 0 color-mix(in srgb,var(--brand) 45%,var(--edge)),0 6px 12px var(--amb)}
.btn-3d:hover,.chip-3d:hover{transform:translateY(-1px)}
.btn-3d:active,.chip-3d:active{transform:translateY(3px);box-shadow:inset 0 1px 0 var(--hi),0 0 0 var(--edge),0 2px 4px var(--amb)}
.chip-3d{color:var(--ink);background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));border:1px solid var(--line);padding:.45rem .9rem .45rem .45rem;box-shadow:inset 0 1px 0 var(--hi),0 4px 0 var(--edge),0 8px 14px var(--amb)}
.chip-3d svg{width:2rem;height:2rem;border-radius:9px;flex:none}
.eyebrow{background:linear-gradient(180deg,color-mix(in srgb,var(--pink-soft) 60%,#fff),var(--pink-soft));box-shadow:inset 0 1px 0 var(--hi),0 2px 0 color-mix(in srgb,var(--pink) 35%,transparent)}
@media (prefers-color-scheme:dark){.eyebrow{background:var(--pink-soft)}}
.facts li,.kit .for,.badge{box-shadow:inset 0 1px 0 var(--hi),0 2px 0 color-mix(in srgb,var(--brand) 30%,var(--edge))}
.facts li{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-soft) 50%,var(--surface)),var(--brand-soft))}
.badge--red{box-shadow:inset 0 1px 0 var(--hi),0 2px 0 color-mix(in srgb,var(--red) 35%,transparent)}

/* Extruded cards */
.card,.step,.kit li,.page-card,.fix,.guide-nav-card{background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));box-shadow:var(--shadow-3d);border-color:var(--line)}
.step,.kit li,.card{margin-bottom:var(--depth)}

/* Perspective tilt + hover lift (short cards only, never long text blocks) */
.tilt{transform:perspective(900px) rotateX(0) rotateY(0) translateZ(0);transition:transform .35s var(--ease-spring),box-shadow .35s ease;transform-style:preserve-3d;will-change:transform}
@media (hover:hover){
  .tilt:hover{transform:perspective(900px) rotateX(4deg) rotateY(-5deg) translateY(-4px) translateZ(8px);box-shadow:var(--shadow-3d-lift)}
  .kit .tilt:nth-child(even):hover{transform:perspective(900px) rotateX(4deg) rotateY(5deg) translateY(-4px) translateZ(8px)}
  .step{transition:transform .3s var(--ease-spring),box-shadow .3s ease}
  .step:hover{transform:translateY(-3px);box-shadow:var(--shadow-3d-lift)}
}
.page-card:hover{color:var(--text)}

/* Step accent bar: a raised rail */
.step::before{width:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 70%,#fff),var(--brand) 40%,var(--brand-ink));box-shadow:1px 0 0 rgba(255,255,255,.4)}
.step--last::before{background:linear-gradient(180deg,#f08a90,var(--red))}

/* Raised discs: step numbers, quick-answer numbers, substep counters */
.step-num{border-radius:50%;width:3.25rem;height:3.25rem;
  background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--brand) 55%,#fff) 0,var(--brand) 45%,var(--brand-ink) 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -3px 4px rgba(0,0,0,.25),0 4px 0 #0b3f70,0 8px 14px rgba(13,79,139,.35);
  text-shadow:0 1px 1px rgba(0,0,0,.3)}
.step--last .step-num{background:radial-gradient(circle at 35% 28%,#f59aa0 0,var(--red) 50%,#8f1f28 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -3px 4px rgba(0,0,0,.25),0 4px 0 #7d1a22,0 8px 14px rgba(200,50,60,.35)}
@media (prefers-color-scheme:dark){.step-num,.step--last .step-num{text-shadow:none}}
.qa-order .n{background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--brand) 50%,#fff),var(--brand) 55%,var(--brand-ink));box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 2px rgba(0,0,0,.2),0 2px 0 #0b3f70}
.qa-order li.stop .n{background:radial-gradient(circle at 35% 28%,#f59aa0,var(--red) 55%,#8f1f28);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 2px rgba(0,0,0,.2),0 2px 0 #7d1a22}
.substeps li::before{background:radial-gradient(circle at 35% 30%,var(--surface-top),var(--brand-soft));box-shadow:inset 0 1px 0 var(--hi),0 2px 0 color-mix(in srgb,var(--brand) 35%,var(--edge))}
.substeps li{box-shadow:inset 0 2px 3px var(--lo),inset 0 -1px 0 var(--hi)}  /* recessed wells */

/* Quick answer: a thick extruded slab */
.quick-answer{border-width:2px;background:linear-gradient(180deg,var(--surface-top),color-mix(in srgb,var(--brand-soft) 35%,var(--surface)));
  box-shadow:inset 0 1px 0 var(--hi),0 6px 0 var(--brand-ink),0 14px 20px -4px color-mix(in srgb,var(--brand) 30%,transparent),0 30px 50px -20px var(--amb);margin-bottom:2rem}
.qa-order li{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-soft) 45%,var(--surface)),var(--brand-soft));box-shadow:inset 0 1px 0 var(--hi),0 2px 0 color-mix(in srgb,var(--brand) 22%,var(--edge))}
.qa-order li.stop{background:linear-gradient(180deg,color-mix(in srgb,var(--red-soft) 45%,var(--surface)),var(--red-soft));box-shadow:inset 0 1px 0 var(--hi),0 2px 0 color-mix(in srgb,var(--red) 30%,transparent)}
@media (max-width:39.99rem){.qa-table tr{box-shadow:inset 0 1px 0 var(--hi),0 3px 0 var(--edge);background:var(--surface)}}

/* Callouts: bevelled tiles with a coloured base edge */
.callout{box-shadow:inset 0 1px 0 var(--hi),inset 0 -2px 0 var(--lo),0 4px 0 var(--c-edge,var(--edge)),0 10px 18px -6px var(--amb);margin-bottom:calc(1rem + 4px)}
.callout--warn{--c-edge:color-mix(in srgb,var(--amber) 40%,transparent)}
.callout--tip{--c-edge:color-mix(in srgb,var(--mint) 40%,transparent)}
.callout--dont{--c-edge:color-mix(in srgb,var(--red) 40%,transparent)}
.callout>svg{filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}

/* Icon depth */
.kit li svg,.step-head svg,.chip-3d svg,.fix svg{filter:drop-shadow(0 3px 0 rgba(28,37,65,.12)) drop-shadow(0 6px 6px rgba(28,37,65,.12))}
.section-title svg,.quick-answer>h2 svg,.checks li svg{filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}

/* Hero art: floating 3D object */
.hero-art{perspective:800px}
.hero-art svg{filter:drop-shadow(0 18px 18px rgba(28,37,65,.16));transform:rotateY(-8deg) rotateX(4deg);transition:transform .6s var(--ease-spring)}
.hero-art:hover svg{transform:rotateY(6deg) rotateX(-2deg) scale(1.03)}
.page-card-art{background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--surface) 60%,transparent),transparent 55%),linear-gradient(135deg,var(--brand-soft),var(--pink-soft));box-shadow:inset 0 -6px 12px -6px rgba(28,37,65,.15)}
.page-card-art svg{filter:drop-shadow(0 12px 10px rgba(28,37,65,.18));transition:transform .5s var(--ease-spring)}
.page-card:hover .page-card-art svg{transform:translateZ(30px) scale(1.06) rotate(-2deg)}

/* ---------- Navigation: breadcrumbs, on-page contents, guide nav, back to top ---------- */
.breadcrumbs{padding-top:1rem;font-size:.85rem}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem;color:var(--muted)}
.breadcrumbs li+li::before{content:"\203A";margin-right:.5rem;color:var(--muted)}
.breadcrumbs a{color:var(--brand-ink);font-weight:600;text-decoration:none}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:600}
.breadcrumbs+.hero{padding-top:1rem}
@media (min-width:40rem){.breadcrumbs+.hero{padding-top:1.5rem}}

.toc{margin:0 0 1.5rem}
.toc h2{display:flex;align-items:center;gap:.45rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .6rem}
.toc h2 svg{width:1.15rem;height:1.15rem}
.toc ol{list-style:none;margin:0;padding:.15rem .1rem .55rem;display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
@media (min-width:40rem){.toc ol{flex-wrap:wrap;overflow:visible}}
.toc li{flex:none;scroll-snap-align:start}
.toc a{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;font-size:.86rem;font-weight:650;color:var(--ink);text-decoration:none;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));box-shadow:inset 0 1px 0 var(--hi),0 3px 0 var(--edge),0 5px 10px var(--amb);transition:transform .12s ease,box-shadow .12s ease}
.toc a b{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;font-size:.72rem;color:#fff;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--brand) 50%,#fff),var(--brand-ink));box-shadow:0 1px 0 #0b3f70}
.toc a:hover{transform:translateY(-1px);color:var(--brand-ink)}
.toc a:active{transform:translateY(3px);box-shadow:inset 0 1px 0 var(--hi),0 0 0 var(--edge),0 1px 3px var(--amb)}
@media (prefers-color-scheme:dark){.toc a b{color:#0f1524}}

.guide-nav{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2rem}
.guide-nav-card{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);font-weight:750}
.guide-nav-card small{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.guide-nav-card:last-child{text-align:right;color:var(--brand-ink)}
.guide-nav-card:hover{color:var(--brand-ink)}

/* #top is an empty block at the very top of <body>: a sticky header can't be the target, the browser sees it as already in view */
.top-anchor{display:block;height:0}
.to-top{position:fixed;right:1rem;bottom:1rem;z-index:30;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--brand) 55%,#fff),var(--brand) 50%,var(--brand-ink));
  box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -3px 4px rgba(0,0,0,.25),0 4px 0 #0b3f70,0 10px 18px rgba(13,79,139,.35);transition:transform .12s ease,box-shadow .12s ease}
.to-top svg{width:1.3rem;height:1.3rem}
.to-top:hover{color:#fff;transform:translateY(-2px)}
.to-top:active{transform:translateY(4px);box-shadow:inset 0 2px 1px rgba(255,255,255,.45),0 0 0 #0b3f70,0 2px 4px rgba(13,79,139,.35)}
@media (prefers-color-scheme:dark){.to-top,.to-top:hover{color:#0f1524}}
@supports (animation-timeline:scroll()){
  .to-top{animation:to-top-in linear both;animation-timeline:scroll(root);animation-range:0 400px}
  @keyframes to-top-in{from{opacity:0;transform:translateY(16px) scale(.6);visibility:hidden}to{opacity:1;transform:none;visibility:visible}}
}
.footer-nav{display:flex;gap:1.25rem;margin-top:.75rem;font-weight:650}
.footer-nav a{color:var(--brand-ink);text-decoration:none}

/* ---------- Index: popular fixes + browse by fabric ---------- */
.fix-grid{list-style:none;padding:0;margin:0;display:grid;gap:.85rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:40rem){.fix-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fix{display:flex;flex-direction:column;gap:.6rem;height:100%;padding:.9rem;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);font-weight:750;line-height:1.3;margin-bottom:var(--depth)}
.fix svg{width:2.6rem;height:2.6rem}
.fix small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--pink);font-weight:700;margin-bottom:.15rem}
.fix:hover{color:var(--brand-ink)}
.browse{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.75rem}
.browse .chip-3d{font-size:.92rem}

/* ---------- Site-wide pages (added 2026-10-22): nav, filters, hubs, related, A-Z, prose ---------- */
.site-nav{display:flex;gap:.5rem;flex:none}
.site-nav .btn-3d{white-space:nowrap}
@media (max-width:24rem){.brand small{display:none}.site-nav .btn-3d{padding:.35em .7em;font-size:.85rem}}
.footer-nav{flex-wrap:wrap;gap:.5rem 1.25rem}
.chip-sm{font-size:.84rem;padding:.3rem .75rem .3rem .3rem}
.chip-sm svg{width:1.5rem;height:1.5rem;border-radius:7px}
.more-link{margin:.9rem 0 0;font-weight:700}
.more-link a{color:var(--brand-ink);text-decoration:none}
.more-link a:hover{text-decoration:underline}
.fix-grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr))}
@media (min-width:40rem){.fix-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.related{margin-top:2rem}
.filed{margin-top:1.5rem}
.filed h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .6rem}
.page-card-art svg{width:auto;height:8.5rem;max-width:100%}
.hub-grid .page-card-art svg{height:7rem}
.hero--compact{grid-template-columns:1fr!important;padding-bottom:.5rem}
.btn-big{padding:.6em 1.2em;margin:.75rem .5rem 0 0;color:var(--brand-ink);background:linear-gradient(180deg,var(--surface-top),var(--brand-soft));box-shadow:inset 0 1px 0 var(--hi),0 3px 0 color-mix(in srgb,var(--brand) 45%,var(--edge)),0 6px 12px var(--amb)}

/* CSS-only filters: hidden radios are siblings of .filter-bar and .page-grid */
.filter-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.1rem}
.filter-bar label{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;font-weight:700;font-size:.88rem;color:var(--ink);padding:.35rem .85rem .35rem .4rem;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));box-shadow:inset 0 1px 0 var(--hi),0 4px 0 var(--edge),0 7px 12px var(--amb);transition:transform .12s ease,box-shadow .12s ease}
.filter-bar label svg{width:1.6rem;height:1.6rem;border-radius:8px;flex:none}
.filter-bar label:hover{transform:translateY(-1px)}
#f-all:checked~.filter-bar [for=f-all],#f-laundry:checked~.filter-bar [for=f-laundry],#f-clothes:checked~.filter-bar [for=f-clothes],#f-beds-sofas:checked~.filter-bar [for=f-beds-sofas],#f-carpets-bathroom:checked~.filter-bar [for=f-carpets-bathroom]{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 80%,#fff),var(--brand-ink));border-color:var(--brand-ink);transform:translateY(3px);box-shadow:inset 0 2px 4px rgba(0,0,0,.25),0 1px 0 var(--edge)}
#f-all:focus-visible~.filter-bar [for=f-all],#f-laundry:focus-visible~.filter-bar [for=f-laundry],#f-clothes:focus-visible~.filter-bar [for=f-clothes],#f-beds-sofas:focus-visible~.filter-bar [for=f-beds-sofas],#f-carpets-bathroom:focus-visible~.filter-bar [for=f-carpets-bathroom]{outline:3px solid var(--brand);outline-offset:3px}
#f-laundry:checked~.page-grid>li:not([data-cat~=laundry]),#f-clothes:checked~.page-grid>li:not([data-cat~=clothes]),#f-beds-sofas:checked~.page-grid>li:not([data-cat~=beds-sofas]),#f-carpets-bathroom:checked~.page-grid>li:not([data-cat~=carpets-bathroom]){display:none}

/* A-Z */
.az-jump{position:sticky;top:4.25rem;z-index:5;margin:0 0 1.25rem;padding:.5rem 0;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.az-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.az-jump a{display:inline-grid;place-items:center;min-width:2.2rem;height:2.2rem;border-radius:10px;font-weight:800;text-decoration:none;color:var(--brand-ink);border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));box-shadow:inset 0 1px 0 var(--hi),0 3px 0 var(--edge),0 5px 10px var(--amb)}
.az-jump a:active{transform:translateY(3px);box-shadow:inset 0 1px 0 var(--hi),0 0 0 var(--edge)}
.az-group{margin:0 0 1.5rem}
.az-group h2{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;color:#fff;font-size:1.25rem;margin:0 0 .6rem;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pink) 55%,#fff),var(--pink));box-shadow:0 3px 0 color-mix(in srgb,var(--pink) 60%,#000)}
.az-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.az-list a{display:flex;flex-direction:column;gap:.1rem;padding:.65rem .9rem;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:700;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));box-shadow:var(--shadow-3d)}
.az-list a small{font-weight:600;color:var(--muted);font-size:.8rem}
.az-list a:hover{color:var(--brand-ink)}

/* About and policy pages */
.prose{display:grid;gap:1.1rem}
.prose .card h2{margin-top:0}
.prose .card p:last-child{margin-bottom:0}

/* =====================================================================
   MOTION: short, gentle loops on illustrations and icons.
   All of it is switched off under prefers-reduced-motion (bottom).
   ===================================================================== */
/* shared helpers for SVG parts (work inside <use> symbols too) */
.wm-drum,.wm-shake,.sock,.bubble,.twinkle,.drop-bob,.drop-shadow,.fizz,.zap,.glow,.dunk,.dab,.drip,.logo-drop,.wm-water,.wm-led,.wm-floor,.steam,.spritz,.sway{transform-box:fill-box;transform-origin:center}

/* Washing machine: drum spins, body gives a little shake, bubbles rise, sock sways */
.wm-drum{animation:wm-spin 6s linear infinite}
@keyframes wm-spin{to{transform:rotate(360deg)}}
.wm-shake{transform-origin:50% 100%;animation:wm-shake 6s ease-in-out infinite}
@keyframes wm-shake{0%,70%,100%{transform:none}72%{transform:translateX(-1.2px) rotate(-.6deg)}74%{transform:translateX(1.2px) rotate(.6deg)}76%{transform:translateX(-1px) rotate(-.4deg)}78%{transform:translateX(1px) rotate(.4deg)}80%{transform:none}}
.wm-floor{animation:wm-floor 6s ease-in-out infinite}
@keyframes wm-floor{0%,70%,80%,100%{transform:none}75%{transform:scaleX(.96)}}
.wm-water{animation:wm-slosh 3s ease-in-out infinite alternate}
@keyframes wm-slosh{from{transform:translateX(-10px)}to{transform:translateX(10px)}}
.wm-led{animation:blink 2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
.sock{transform-origin:50% 0;animation:sway 3.2s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.bubble{animation:bubble-up 4s ease-in infinite;opacity:0}
.bubble--2{animation-delay:1.3s;animation-duration:4.6s}
.bubble--3{animation-delay:2.6s;animation-duration:3.6s}
@keyframes bubble-up{0%{opacity:0;transform:translateY(10px) scale(.6)}15%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:translateY(-26px) scale(1.1)}}
.twinkle{animation:twinkle 2.8s ease-in-out infinite}
.twinkle--2{animation-delay:.9s}.twinkle--3{animation-delay:1.8s}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.55) rotate(45deg);opacity:.55}}

/* Droplet: bobs, shadow breathes with it */
.drop-bob{animation:bob 3.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.drop-shadow{animation:shadow-breathe 3.6s ease-in-out infinite}
@keyframes shadow-breathe{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.7}}
.logo-drop{animation:logo-bob 4s ease-in-out infinite}
@keyframes logo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}

/* Small icon parts */
.fizz{animation:bubble-up 2.6s ease-in infinite}
.fizz--2{animation-delay:.8s}.fizz--3{animation-delay:1.6s}
.zap{animation:zap 3.5s ease-in-out infinite}
@keyframes zap{0%,86%,100%{opacity:1;transform:none}90%{opacity:.4;transform:scale(.85)}94%{opacity:1;transform:scale(1.15)}}
.glow{animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:0}50%{opacity:.35}}
.dunk{animation:dunk 3s ease-in-out infinite}
@keyframes dunk{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(2px) rotate(-4deg)}}
.dab{animation:dab 2.4s ease-in-out infinite}
@keyframes dab{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,3px)}}
.drip{animation:bob 2.4s ease-in-out infinite}
.steam{animation:steam 3.2s ease-in-out infinite}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-10px)}}
.spritz{animation:spritz 3s ease-out infinite}
@keyframes spritz{0%,55%{opacity:0;transform:translateX(-6px) scale(.6)}65%{opacity:1}100%{opacity:0;transform:translateX(6px) scale(1.1)}}
.sway{transform-origin:50% 100%;animation:sway 3.4s ease-in-out infinite alternate}
.sway--2{animation-delay:-1.7s}
.sway--top{transform-origin:50% 0;animation-duration:4s}

/* Whole-icon motion (outer <svg>, so it can react to hover) */
.callout--warn>svg{animation:pulse 2.4s ease-in-out infinite}
.callout--big>svg{animation:pulse-red 2.6s ease-in-out infinite;border-radius:50%}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pulse-red{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 45%,transparent)}60%{transform:scale(1.05);box-shadow:0 0 0 10px transparent}}
.section-title svg{transform-origin:50% 10%;animation:swing 4s ease-in-out infinite}
@keyframes swing{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(10deg)}90%{transform:rotate(-8deg)}95%{transform:rotate(4deg)}}
.kit li svg,.fix svg,.chip-3d svg{transition:transform .3s var(--ease-spring)}
@media (hover:hover){
  .kit li:hover svg,.fix:hover svg,.chip-3d:hover svg{animation:wiggle .6s ease-in-out}
  .step:hover .step-head svg{animation:wiggle .6s ease-in-out}
}
@keyframes wiggle{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-10deg) scale(1.1)}50%{transform:rotate(8deg) scale(1.1)}75%{transform:rotate(-4deg) scale(1.05)}}
/* Hero object floats */
.hero-art{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Pop in as they scroll into view (browsers with scroll-driven animations; others just show them) */
@supports (animation-timeline:view()){
  .step-head svg,.step-num,.checks li svg{animation:pop-in linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  .step-num{animation-name:pop-in-disc}
}
@keyframes pop-in{0%{transform:scale(.3) rotate(-25deg);opacity:0}70%{transform:scale(1.12) rotate(6deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes pop-in-disc{0%{transform:translateY(10px) scale(.6);opacity:0}70%{transform:translateY(-2px) scale(1.08);opacity:1}100%{transform:none;opacity:1}}


/* ---------- Support (Buy me a coffee) + "This helped" likes ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.support{display:grid;gap:1rem;align-items:center;margin:2rem 0 calc(1.5rem + var(--depth));padding:1.25rem;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--amber) 25%,var(--line));
  background:linear-gradient(160deg,color-mix(in srgb,var(--amber-soft) 85%,var(--surface-top)),color-mix(in srgb,var(--pink-soft) 60%,var(--surface-bot)));
  box-shadow:inset 0 1px 0 var(--hi),inset 0 -2px 0 var(--lo),0 1px 0 color-mix(in srgb,var(--amber) 35%,var(--edge)),0 var(--depth) 0 color-mix(in srgb,var(--amber) 35%,var(--edge)),0 calc(var(--depth) + 4px) 10px var(--amb),0 calc(var(--depth) + 16px) 32px -8px var(--amb)}
.support-art svg{display:block;width:min(11rem,60%);height:auto;margin:0 auto}
.support h2{font-size:1.3rem;margin:.5rem 0 .4rem;color:var(--ink)}
.support p{margin:0 0 1rem}
@media (min-width:40rem){.support{grid-template-columns:11rem 1fr;padding:1.5rem}.support-art svg{width:100%}}
.support--compact{grid-template-columns:3rem 1fr;gap:.25rem 1rem;margin-top:1.5rem;padding:1rem 1.1rem}
.support--compact .support-icon{width:3rem;height:3rem;grid-row:span 2;align-self:start}
.support--compact h2{font-size:1.05rem;margin:0 0 .15rem}
.support--compact p{margin:0;font-size:.93rem}
.support--compact .btn-coffee{grid-column:2;justify-self:start;margin-top:.6rem}
@media (min-width:40rem){.support--compact{grid-template-columns:3rem 1fr auto}.support--compact .btn-coffee{grid-column:3;grid-row:1 / span 2;align-self:center;margin:0}}
.btn-coffee{display:inline-flex;align-items:center;gap:.55rem;padding:.6em 1.15em .6em .6em;border-radius:999px;font-weight:800;font-size:1rem;text-decoration:none;color:#1c2541;
  background:linear-gradient(180deg,#ffe766,#ffd21f);border:1px solid #d9a900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.08),0 4px 0 #b88a00,0 9px 16px rgba(120,80,0,.28);transition:transform .12s ease,box-shadow .12s ease}
.btn-coffee svg{width:2rem;height:2rem;flex:none}
.btn-coffee:hover{color:#1c2541;transform:translateY(-1px)}
.btn-coffee:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 #b88a00,0 2px 4px rgba(120,80,0,.25)}
.btn-coffee:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.btn-coffee.is-off{filter:grayscale(1);opacity:.6;cursor:not-allowed;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 0 #9aa6bd}
.btn-coffee.is-off:hover,.btn-coffee.is-off:active{transform:none}
.btn-coffee small{font-weight:600;font-size:.78em}
.footer-nav .footer-coffee{color:#8a5a00}
@media (prefers-color-scheme:dark){.footer-nav .footer-coffee{color:#ffd21f}}
.footer-coffee.is-off{opacity:.65}
.like{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1.5rem 0 0}
.like[hidden]{display:none}
.btn-like{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:700;cursor:pointer;color:var(--ink);padding:.45rem 1rem .45rem .45rem;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface-top),var(--surface-bot));box-shadow:inset 0 1px 0 var(--hi),0 4px 0 var(--edge),0 8px 14px var(--amb);transition:transform .12s ease,box-shadow .12s ease}
.btn-like svg{width:1.9rem;height:1.9rem;flex:none}
.btn-like:hover{transform:translateY(-1px)}
.btn-like:active{transform:translateY(3px);box-shadow:inset 0 1px 0 var(--hi),0 0 0 var(--edge),0 2px 4px var(--amb)}
.btn-like:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.btn-like[aria-pressed="true"]{color:#fff;border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 70%,#fff),var(--mint));box-shadow:inset 0 2px 3px rgba(0,0,0,.2),0 1px 0 var(--edge)}
.btn-like:disabled{cursor:default}
.like-n{display:inline-grid;place-items:center;min-width:1.7rem;padding:0 .45rem;height:1.7rem;border-radius:999px;font-size:.85rem;background:var(--brand-soft);color:var(--brand-ink)}
.btn-like[aria-pressed="true"] .like-n{background:rgba(255,255,255,.25);color:#fff}
.like-msg{font-size:.9rem;color:var(--muted)}
.steam--2{animation-delay:-1s}.steam--3{animation-delay:-2s}

/* home coffee box: secondary Buy Me a Coffee link */
.support-alt{margin:.75rem 0 0;font-size:.9rem;color:var(--muted)}
.support-alt a{color:var(--brand-ink);font-weight:700}
.support--compact .support-alt{margin-top:.3rem;font-size:.85rem}

/* ---------- Reduced motion: no motion at all ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tilt:hover,.step:hover,.btn-3d:hover,.btn-coffee:hover,.btn-like:hover,.chip-3d:hover,.toc a:hover,.to-top:hover,.page-card:hover .page-card-art svg,.hero-art:hover svg,.brand:hover svg{transform:none!important}
  .bubble{opacity:1}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.site-footer,.hero-art,.toc,.to-top,.guide-nav,.breadcrumbs,.related,.filter-bar,.az-jump,.support,.like{display:none}
  body{background:#fff}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .step,.card,.quick-answer,.kit li,.callout,.qa-order li,.page-card,.fix,.facts li,.substeps li,.step-num,.qa-order .n{box-shadow:none!important;transform:none!important;filter:none!important}
  .card,.kit li,.callout,.qa-order li,.substeps li{break-inside:avoid;background:#fff}
  .step,.quick-answer{background:#fff}
  .step-num,.qa-order .n{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}