/* Boonbuy Spreadsheet — warm editorial "certainty field-guide"
   Design system per _planning/04-design-dna.md. Colors via tokens; light + dark; WCAG AA. */

/* ---------- tokens ---------- */
:root{
  --bg:#FBF6EF; --surface:#FFFFFF; --panel:#FFF3E8; --panel-2:#F7ECDD;
  --ink:#20160F; --muted:#6A5442; --amber:#B4530E; --amber-bright:#E76202;
  --line:#E8D9C6; --line-strong:#D8C2A8;
  --certain:#3F6B4E; --certain-bg:#EAF1EA; --confirm:#B4530E; --confirm-bg:#FBEBDD;
  --seal:#E76202;
  --shadow:0 1px 2px rgba(60,40,20,.05), 0 8px 24px -18px rgba(60,40,20,.35);
  --radius:14px; --radius-sm:10px; --maxw:1120px;
  --step-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp-font: "Fraunces", Georgia, "Times New Roman", serif;
}
html[data-theme="dark"]{
  --bg:#191310; --surface:#221913; --panel:#2A1E15; --panel-2:#241a12;
  --ink:#F4E7D8; --muted:#C4A88C; --amber:#F0954B; --amber-bright:#F0954B;
  --line:#3A2A1D; --line-strong:#4A3626;
  --certain:#8FCBA2; --certain-bg:#1E2A22; --confirm:#F0954B; --confirm-bg:#31220F;
  --seal:#F0954B;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -20px rgba(0,0,0,.8);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--step-font); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
svg{width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:-.18em}
p a svg, li a svg{margin-left:.1em}
a{color:var(--amber); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--amber-bright)}
h1,h2,h3,h4{font-family:var(--disp-font); font-weight:560; line-height:1.15; color:var(--ink); letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.3rem); font-weight:600}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem)}
p{margin:0 0 1rem}
strong{font-weight:660}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:4px}
.skip{position:absolute; left:-999px; top:0; background:var(--amber); color:#fff; padding:.7rem 1rem; z-index:100; border-radius:0 0 8px 0}
.skip:focus{left:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2rem)}
.eyebrow{font-family:var(--step-font); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin:0 0 .6rem}
.lead{font-size:1.14rem; color:var(--muted)}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
.center{text-align:center}

/* ---------- header / nav ---------- */
.site-header{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:1rem; min-height:62px; min-width:0}
.brand{display:flex; align-items:center; gap:.5rem; font-family:var(--disp-font); font-weight:600; font-size:1.18rem; color:var(--ink); text-decoration:none; white-space:nowrap; min-width:0}
.brand-logo{height:28px; width:auto; display:block}
.brand-suffix{font-family:var(--disp-font); font-weight:600; color:var(--amber); font-size:1.02em; letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
.seal{width:26px; height:26px; flex:0 0 auto}
.nav-links{display:flex; gap:.15rem; margin-left:auto; align-items:center; flex-wrap:wrap}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:600; font-size:.95rem; padding:.5rem .6rem; border-radius:8px; line-height:1}
.nav-links a:hover{color:var(--ink); background:var(--panel)}
.nav-links a[aria-current="page"]{color:var(--amber); box-shadow:inset 0 -2px 0 var(--amber)}
.nav-tools{display:flex; align-items:center; gap:.4rem; margin-left:.5rem}
.icon-btn{display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:10px; cursor:pointer}
.icon-btn:hover{border-color:var(--line-strong); background:var(--panel)}
.icon-btn svg{width:20px; height:20px}
.nav-toggle{display:none}
@media (max-width:900px){
  .nav-links{position:fixed; inset:62px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border-bottom:1px solid var(--line); padding:.5rem clamp(1rem,4vw,2rem) 1rem; margin:0; box-shadow:var(--shadow); transform:translateY(-140%); transition:transform .25s ease; max-height:calc(100vh - 62px); overflow:auto}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.85rem .4rem; border-bottom:1px solid var(--line); border-radius:0; font-size:1.05rem}
  .nav-links a[aria-current="page"]{box-shadow:none; background:var(--panel)}
  .nav-toggle{display:inline-grid}
  .nav-tools{margin-left:auto}
}
@media (max-width:430px){
  .nav{gap:.5rem}
  .brand{font-size:1rem; gap:.4rem}
  .brand-logo{height:23px}
  .nav-tools{gap:.3rem}
}
@media (prefers-reduced-motion:reduce){.nav-links{transition:none}}

/* ---------- buttons / CTA ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem; min-height:46px; padding:.7rem 1.15rem; border-radius:11px; font-weight:700; font-size:1rem; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background .18s ease, color .18s ease, border-color .18s ease}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.btn svg{width:18px; height:18px}
.btn-primary{background:var(--amber); color:#fff}
html[data-theme="dark"] .btn-primary{color:#1c1206}
.btn-primary:hover{background:var(--amber-bright); color:#fff}
html[data-theme="dark"] .btn-primary:hover{color:#1c1206}
.btn-ghost{background:transparent; color:var(--amber); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--panel); color:var(--amber-bright)}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem}

/* ---------- sections ---------- */
main section{padding:clamp(2.6rem,6vw,4.2rem) 0}
.section-tint{background:var(--panel-2)}
.divider-label{display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem}
.divider-label::after{content:""; flex:1; height:1px; background:var(--line)}

/* ---------- hero ---------- */
.hero{padding:clamp(2.4rem,6vw,4.6rem) 0 clamp(2rem,5vw,3.4rem); position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:repeating-linear-gradient(to bottom, transparent 0 37px, var(--line) 37px 38px);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 78%); mask-image:linear-gradient(to bottom, #000 0%, transparent 78%)}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.4rem,4vw,3rem); align-items:center}
.hero h1 .em, .hero-card h1 .em{color:var(--amber); font-style:italic}
.hero .lead{max-width:38ch; margin-top:.4rem}
.hero-split{display:flex; gap:.5rem; align-items:stretch; margin:1.2rem 0 1.4rem; flex-wrap:wrap}
.hero-split .rolecard{flex:1 1 180px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.85rem .95rem}
.hero-split .rolecard b{display:block; font-family:var(--disp-font); font-size:1.02rem}
.hero-split .rolecard span{font-size:.9rem; color:var(--muted)}
@media (max-width:820px){ .hero-grid{grid-template-columns:1fr} }

/* ---------- Certainty Ledger (signature) ---------- */
.ledger{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.ledger-head{display:flex; align-items:center; gap:.55rem; padding:.85rem 1.1rem; background:var(--panel); border-bottom:1px solid var(--line); font-family:var(--disp-font); font-weight:600}
.ledger-head svg{width:20px; height:20px; color:var(--amber)}
.ledger-cols{display:grid; grid-template-columns:1fr 1fr; font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line)}
.ledger-cols span{padding:.55rem 1.1rem}
.ledger-cols span:first-child{border-right:1px solid var(--line); color:var(--certain)}
.ledger-cols span:last-child{color:var(--confirm)}
.ledger-row{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line)}
.ledger-row:last-child{border-bottom:0}
.ledger-cell{padding:.8rem 1.1rem; display:flex; gap:.5rem; font-size:.96rem}
.ledger-cell:first-child{border-right:1px solid var(--line); background:var(--certain-bg)}
.ledger-cell:last-child{background:var(--confirm-bg)}
.ledger-cell svg{width:18px; height:18px; flex:0 0 auto; margin-top:.18rem}
.ledger-cell.c svg{color:var(--certain)} .ledger-cell.f svg{color:var(--confirm)}
@media (max-width:560px){
  .ledger-cols{display:none}
  .ledger-row{grid-template-columns:1fr}
  .ledger-cell:first-child{border-right:0; border-bottom:1px solid var(--line)}
  .ledger-cell::before{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; align-self:center}
  .ledger-cell.c::before{content:"Sure"; color:var(--certain)}
  .ledger-cell.f::before{content:"Confirm"; color:var(--confirm)}
}

/* ---------- official brand hero ---------- */
.hero-brand{position:relative; background:#E76202 url("/assets/img/boonbuy/bg.webp") 20% center/cover no-repeat; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-brand .wrap{position:relative; z-index:1; display:flex; justify-content:flex-end; align-items:center; min-height:clamp(360px,40vw,470px); padding:clamp(2rem,5vw,3.4rem) clamp(1rem,4vw,2rem)}
.hero-card{background:rgba(255,247,237,.95); border:1px solid rgba(255,255,255,.55); border-radius:22px; padding:clamp(1.5rem,3vw,2.3rem); max-width:544px; box-shadow:0 26px 60px -28px rgba(70,35,8,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
html[data-theme="dark"] .hero-card{background:rgba(28,19,12,.88); border-color:rgba(255,255,255,.12)}
.hero-card h1{margin:.2rem 0 .5rem}
.hero-card .lead{max-width:46ch; color:var(--muted)}
.hero-logo{display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.hero-logo img{height:24px; width:auto; display:block}
.hero-card .cta-row{margin-top:1.2rem}
@media(max-width:680px){
  .hero-brand{background-position:26% center}
  .hero-brand .wrap{justify-content:center; min-height:0; padding:2.4rem clamp(1rem,4vw,1.4rem)}
  .hero-card{max-width:100%; min-width:0}
  .hero-card .btn{white-space:normal; text-align:center; justify-content:center}
}
/* footer official logo */
.foot-official{display:flex; align-items:center; gap:.55rem; margin:.2rem 0 .8rem}
.foot-official img{height:24px; width:auto; display:block}

/* ---------- W2C search box ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.w2c-search{display:flex; gap:.4rem; margin-top:1.2rem; background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:.4rem}
.w2c-search:focus-within{border-color:var(--amber); box-shadow:0 0 0 3px rgba(231,98,2,.16)}
.w2c-search input[type="search"]{flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:1rem; color:var(--ink); padding:.55rem .7rem; outline:none}
.w2c-search input[type="search"]::placeholder{color:var(--muted)}
.w2c-search button{flex:0 0 auto; border:0; background:var(--amber); color:#fff; font-weight:700; font-family:var(--step-font); border-radius:10px; padding:.5rem 1.05rem; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; min-height:44px; transition:background .18s ease}
.w2c-search button:hover{background:var(--amber-bright)}
.w2c-search button svg{width:18px; height:18px}
html[data-theme="dark"] .w2c-search button{color:#1c1206}
@media (prefers-reduced-motion:reduce){.w2c-search button{transition:none}}
.hero-chips{display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin-top:.9rem}
.hero-chips .lbl{color:var(--muted); font-size:.88rem; margin-right:.1rem}
.chip{display:inline-flex; align-items:center; gap:.25rem; padding:.34rem .7rem; border:1px solid var(--line-strong); border-radius:99px; text-decoration:none; color:var(--ink); background:var(--surface); font-weight:600; font-size:.85rem}
.chip:hover{border-color:var(--amber); color:var(--amber)}
.chip svg{width:14px; height:14px}

/* ---------- generic grids / cards ---------- */
.grid{display:grid; gap:1rem}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem}
.card h3{margin:.1rem 0 .5rem}
.card .ic{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--panel); color:var(--amber); margin-bottom:.7rem}
.card .ic svg{width:22px; height:22px}
.card p{margin:0; color:var(--muted); font-size:.98rem}
.card--tint{background:var(--panel)}

/* stage list */
.stages{counter-reset:st; display:grid; gap:.9rem}
.stage{display:grid; grid-template-columns:auto 1fr; gap:1rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.2rem}
.stage .num{counter-increment:st; font-family:var(--disp-font); font-weight:600; font-size:1.5rem; color:var(--amber); width:2.4rem; height:2.4rem; display:grid; place-items:center; background:var(--panel); border-radius:10px}
.stage .num::before{content:counter(st)}
.stage h3{margin:.15rem 0 .35rem}
.stage p{margin:0; color:var(--muted)}

/* field-note category rows */
.fieldnotes{display:grid; gap:.7rem}
.fnote{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; align-items:start}
.fnote h3{grid-column:1; margin:0 0 .2rem; display:flex; align-items:center; gap:.5rem}
.fnote h3 svg{width:20px;height:20px;color:var(--amber)}
.fnote .meta{grid-column:1; color:var(--muted); font-size:.95rem; margin:0}
.fnote .meta b{color:var(--ink)}
.fnote .go{grid-column:2; grid-row:1 / span 3; align-self:center; white-space:nowrap}
@media (max-width:620px){ .fnote{grid-template-columns:1fr} .fnote .go{grid-column:1; grid-row:auto} }

/* trap list */
.traps{display:grid; gap:.8rem; counter-reset:tr}
.trap{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--confirm); border-radius:0 12px 12px 0; padding:1rem 1.2rem}
.trap h3{margin:0 0 .35rem; font-size:1.12rem}
.trap .move{margin:.5rem 0 0; padding-top:.5rem; border-top:1px dashed var(--line); color:var(--certain); font-size:.96rem}
.trap .move b{color:var(--certain)}

/* accordion */
.acc{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface)}
.acc + .acc{margin-top:.6rem}
.acc-btn{width:100%; text-align:left; background:none; border:0; padding:1.05rem 1.2rem; font:inherit; font-weight:660; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; gap:1rem; align-items:center; min-height:44px}
.acc-btn:hover{background:var(--panel)}
.acc-btn .chev{width:20px; height:20px; color:var(--amber); transition:transform .2s ease; flex:0 0 auto}
.acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.acc-btn .chev{transition:none}}
.acc-panel{padding:0 1.2rem; max-height:0; overflow:hidden}
.acc-panel[hidden]{display:none}
.acc-panel > div{padding:0 0 1.15rem; color:var(--muted)}
.acc-panel p{color:var(--muted)}

/* callout / disclosure */
.callout{background:var(--panel); border:1px solid var(--line-strong); border-radius:12px; padding:1.1rem 1.25rem; display:flex; gap:.8rem}
.callout svg{width:22px; height:22px; color:var(--amber); flex:0 0 auto; margin-top:.15rem}
.callout p{margin:0; font-size:.97rem}
.disclosure{font-size:.92rem; color:var(--muted)}

/* next-steps */
.next{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
@media (max-width:720px){ .next{grid-template-columns:1fr} }
.next a{display:block; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; text-decoration:none; color:var(--ink)}
.next a:hover{border-color:var(--amber); background:var(--panel)}
.next a b{display:flex; align-items:center; gap:.45rem; color:var(--amber); font-family:var(--disp-font)}
.next a span{display:block; color:var(--muted); font-size:.92rem; margin-top:.25rem}

/* news */
.news-list{display:grid; gap:1rem}
.news-item{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.2rem 1.3rem}
.news-item time{font-size:.82rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--amber)}
.news-item h3{margin:.3rem 0 .5rem}
.tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:99px; padding:.15rem .6rem; margin-left:.4rem}
.beginner-note{margin-top:.7rem; padding-top:.7rem; border-top:1px dashed var(--line); font-size:.95rem}
.beginner-note b{color:var(--certain)}

/* plate (screenshot placeholder) */
.plate{background:var(--panel); border:1px dashed var(--line-strong); border-radius:12px; padding:1.4rem; text-align:center; color:var(--muted)}
.plate .ph{font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:var(--amber)}
.plate figcaption{margin-top:.6rem; font-size:.9rem}

/* ---------- badge visual system ---------- */
.badge{display:inline-grid; place-items:center; border-radius:18px; color:#fff; box-shadow:0 12px 24px -14px rgba(150,70,10,.6), inset 0 1px 0 rgba(255,255,255,.28)}
.badge svg{width:50%; height:50%; stroke-width:1.7}
.badge--sm{width:42px; height:42px; border-radius:12px}
.badge--lg{width:60px; height:60px}
.badge--banner{width:92px; height:92px; border-radius:26px}
.badge--cat{width:56px; height:56px; border-radius:15px}
.badge--stage,.badge--banner,.badge--method{background:linear-gradient(145deg,#EF8A3E,#B4530E)}
.badge--ok{background:linear-gradient(145deg,#5FA877,#3E6A4D)}
.badge--warn{background:linear-gradient(145deg,#F0954B,#B4530E)}
.badge--cat{background:linear-gradient(145deg,#FFE7D0,#FBC291); color:#9A4A0C; box-shadow:0 10px 20px -14px rgba(150,70,10,.5)}
html[data-theme="dark"] .badge--cat{background:linear-gradient(145deg,#3a2a1c,#281c12); color:#F2A15A}
.badge--p1{background:linear-gradient(145deg,#EF8A3E,#C25A10)}
.badge--p2{background:linear-gradient(145deg,#5FA877,#3E6A4D)}
.badge--p3{background:linear-gradient(145deg,#F0A83E,#C2830F)}
.badge--p4{background:linear-gradient(145deg,#E2743C,#A63C15)}
.badge--p5{background:linear-gradient(145deg,#B4906E,#7B5D46)}
html[data-theme="dark"] .badge{box-shadow:0 12px 26px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14)}

/* art = airy centered badge holder */
.art{display:grid; place-items:center}
.hero-art{width:100%}
/* official how-to screenshot cards */
.shot{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column}
.shot img{width:100%; height:auto; max-height:440px; object-fit:contain; object-position:top center; background:var(--panel-2); display:block; border-bottom:1px solid var(--line)}
.shot figcaption{padding:.9rem 1.1rem}
.shot figcaption b{display:block; font-family:var(--disp-font); margin-bottom:.15rem}
.shot figcaption span{color:var(--muted); font-size:.93rem}
/* nine tracked stages */
.ninesteps{list-style:none; counter-reset:n; margin:1.1rem 0 0; padding:0; display:grid; gap:.55rem}
.ninesteps li{counter-increment:n; display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.7rem .95rem}
.ninesteps li::before{content:counter(n); font-family:var(--disp-font); font-weight:600; color:var(--amber); width:1.9rem; height:1.9rem; display:grid; place-items:center; background:var(--panel); border-radius:8px}
.ninesteps b{font-family:var(--disp-font)}
.ninesteps span{color:var(--muted)}

/* official step illustration */
.flow-img{width:100%; height:auto; display:block; background:#FFF3E8}
/* media row: illustration + prose (journey stages) */
.media{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.2rem,3vw,2.4rem); align-items:center}
.media .art{border:1px solid var(--line); border-radius:16px; overflow:hidden; align-self:center}
.media .m-body h3{margin:.1rem 0 .5rem}
.media--rev .art{order:2}
@media(max-width:780px){ .media{grid-template-columns:1fr} .media--rev .art{order:0} }
/* icard (illustration on top, text below) */
.icard{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.icard .art{border-bottom:1px solid var(--line)}
.icard .art .badge{width:62px; height:62px}
.icard .i-body{padding:1.05rem 1.2rem}
.icard .i-body h3{margin:0 0 .4rem; display:flex; align-items:baseline; gap:.5rem}
.icard .i-body .step{font-family:var(--disp-font); color:var(--amber); font-size:1.2rem}
.icard .i-body p{margin:0; color:var(--muted); font-size:.97rem}
/* category card: badge + field note */
.catcard{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:grid; grid-template-columns:118px 1fr; gap:0}
.catcard .art{background:radial-gradient(circle at 50% 40%,var(--panel),var(--surface)); border-right:1px solid var(--line); padding:1rem}
.catcard .c-body{padding:1rem 1.2rem}
.catcard .c-body h3{margin:0 0 .5rem}
.catcard .c-body .meta{margin:0; color:var(--muted); font-size:.93rem; line-height:1.6}
.catcard .c-body .meta b{color:var(--ink)}
.catcard .c-body .go{margin-top:.7rem}
@media(max-width:560px){ .catcard{grid-template-columns:1fr} .catcard .art{border-right:0; border-bottom:1px solid var(--line); padding:1.4rem} }
/* platform card */
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.pcard .art{background:radial-gradient(circle at 50% 30%,var(--panel),var(--surface)); border-bottom:1px solid var(--line); padding:1.7rem 1rem}
.pcard .art .badge{width:62px; height:62px}
.pcard .p-body{padding:1rem 1.2rem}
.pcard .p-body h3{margin:0 0 .3rem}
.pcard .p-body p{margin:0; color:var(--muted); font-size:.95rem}
/* method step */
.mstep{text-align:center}
.mstep .art{margin:0 auto .7rem}
.mstep .badge{width:60px; height:60px}
.mstep h3{margin:.1rem 0 .3rem; font-size:1.05rem}
.mstep p{margin:0; color:var(--muted); font-size:.92rem}
/* hero flow card */
.flowcard{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:1.5rem 1.6rem; max-width:440px; margin-left:auto}
.flowcard-title{font-family:var(--disp-font); font-size:1.2rem; margin:0 0 1rem; color:var(--ink)}
.flowsteps{list-style:none; margin:0; padding:0}
.flowsteps li{display:flex; gap:1rem; align-items:center; padding:.6rem 0; position:relative}
.flowsteps li:not(:last-child)::after{content:""; position:absolute; left:28px; top:calc(50% + 28px); height:calc(100% - 34px); width:2px; background:linear-gradient(var(--amber),transparent); opacity:.45}
.flowsteps .badge{width:56px; height:56px; flex:0 0 auto}
.flowsteps b{display:block; font-family:var(--disp-font); color:var(--ink)}
.flowsteps span{font-size:.9rem; color:var(--muted)}
/* qc comparison columns */
.qccols{display:grid; grid-template-columns:1fr 1fr; gap:1rem; width:100%}
@media(max-width:560px){ .qccols{grid-template-columns:1fr} }
.qccol{border-radius:14px; padding:1.1rem 1.2rem}
.qccol--yes{background:var(--certain-bg); border:1px solid var(--line)}
.qccol--no{background:var(--confirm-bg); border:1px solid var(--line)}
.qccol h4{font-family:var(--disp-font); margin:.6rem 0 .5rem; font-size:1.05rem}
.qccol ul{margin:0; padding-left:1.1rem; color:var(--muted); font-size:.95rem}
.qccol li{margin:.25rem 0}

/* breadcrumb + page header */
.page-head--art{display:grid; grid-template-columns:1fr 210px; gap:clamp(1rem,3vw,2rem); align-items:center}
.page-head--art .banner{width:210px; margin-left:auto}
@media(max-width:720px){ .page-head--art{grid-template-columns:1fr} .page-head--art .banner{width:180px; margin:0 0 .4rem} }
.crumb{font-size:.9rem; color:var(--muted); padding-top:1.4rem}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--amber)}
.page-head{padding:1rem 0 .4rem}
.page-head .lead{max-width:64ch; margin-top:.6rem}
.prose p, .prose li{max-width:68ch}
.prose ul{padding-left:1.2rem} .prose li{margin:.35rem 0; color:var(--muted)}
.reviewed{font-size:.86rem; color:var(--muted); margin-top:1.2rem}

/* footer */
.site-footer{background:var(--panel-2); border-top:1px solid var(--line); margin-top:2rem; padding:2.6rem 0 1.6rem}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:1.6rem}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }
.foot-grid h4{font-family:var(--step-font); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .7rem}
.foot-grid a{display:block; color:var(--ink); text-decoration:none; font-size:.95rem; padding:.28rem 0}
.foot-grid a:hover{color:var(--amber)}
.foot-brand p{color:var(--muted); font-size:.94rem; max-width:34ch}
.foot-legal{margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.88rem; color:var(--muted)}
.foot-legal a{color:var(--muted)}