/* site.css — shared styles for generated estimatey pages (calculators + hub).
   Brand: "Sketchbook Trade" (see DESIGN.md) — Archivo headings + Karla body +
   Architects Daughter annotations, ink/paper/hi-vis-orange palette, hand-drawn
   annotation devices. Fonts self-hosted (OFL), served under font-src 'self'. */
@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo Black';
  src:url('/assets/fonts/archivo-black.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Architects Daughter';
  src:url('/assets/fonts/architects-daughter.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  /* brand tokens — DESIGN.md source of truth ("Sketchbook Trade") */
  --ey-paper:#F7F1E1; --ey-card:#FFFDF4; --ey-ink:#2B2A24; --ey-pencil:#6E6759;
  --ey-line:#E3DAC3; --ey-kraft:#C9A87C; --ey-brick:#A9573F; --ey-brick-ink:#8F4630;
  --ey-grass:#83AE49; --ey-hivis:#F07818; --ey-hivis-deep:#D9660A;
  /* legacy alias — kept so old-brand-era pages (pricey shell etc.) don't break */
  --ey-sage:#6E6759;
  /* mapped onto the established variable names (minimises churn across rules).
     "green" now means the moss/grass ink of the sketchbook palette. */
  --green:#4F6B33; --green-dark:#3E5528; --green-deep:#33471F; --green-light:#EAF0DC;
  --lime:#F07818; --lime-soft:#FDE8D2;
  --ink:#2B2A24; --muted:#6E6759; --line:#E3DAC3; --bg:#F7F1E1; --card:#FFFDF4;
  /* hi-vis orange CTAs carry INK text (white on orange fails AA — never do it).
     --terra is the AA-safe deep orange for accent text; --link is brick ink. */
  --accent:#F07818; --accent-dark:#D9660A; --terra:#B04E06; --link:#8F4630;
  --gold:#FBF3E2; --blue:#B04E06;
  /* Brand fonts (guide 24 Jul): Archivo Black on the big display headlines,
     regular Archivo on subheads/UI (keeps hierarchy — Black is a single heavy
     weight), Inter for body, Architects Daughter for annotations. */
  --font-display-black:'Archivo Black', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-display:'Archivo', ui-sans-serif, "Avenir Next", system-ui, sans-serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-note:'Architects Daughter', 'Comic Sans MS', cursive;
  --shadow-lawn:0 1px 0 var(--ey-line), 0 14px 30px -18px rgba(43,42,36,.22);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--bg);line-height:1.55;font-size:16px;overflow-wrap:break-word}
/* Safety net: long unbroken strings (prices, specs, URLs) must never push a
   card wider than the phone screen. Tables keep their own .tablewrap scroller. */
.card,.insight,.insight .inb,.buypick,.buypick .bwhat,.scenpick button,.presetrow button,.placeholder{min-width:0;overflow-wrap:break-word}
body.has-result{padding-bottom:74px}
a{color:var(--link)}
.topbar{background:var(--ey-paper);border-bottom:1px solid var(--ey-line)}
.topbar + .hero{margin-top:0}
.topbar .inner{max-width:780px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px}
.topbar .brand{display:inline-flex;align-items:center;text-decoration:none}
.topbar .brand .wmark{height:34px;width:auto;display:block}
.topbar nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.topbar nav a{color:var(--ey-ink);text-decoration:none;font-weight:700;white-space:nowrap}
.topbar nav a:hover{color:var(--ey-hivis-deep)}
.hero{background:var(--ey-paper);padding-bottom:26px}
/* No artwork behind it: the base hero paints white text for a photo backdrop,
   which is invisible on paper. Ink text + a rule, same as the sketch hero. */
.hero.plain{border-bottom:1px solid var(--ey-line)}
.hero.plain h1,.hero.plain p{color:var(--ey-ink)}
.hero.photo{background-size:cover;background-position:center 42%;text-shadow:0 1px 8px rgba(16,24,18,.4)}
/* Sketch hero — illustrated paper artwork, ink text over a cream fade. The
   template writes the cream gradient + image inline; these rules flip the
   text from the photo-hero white to ink and kill the dark text-shadow. */
.hero.sketch{text-shadow:none;background:var(--ey-paper);border-bottom:1px solid var(--ey-line);position:relative;overflow:hidden;display:flex;align-items:center;min-height:330px;padding-bottom:0}
.hero.sketch .sketchart{position:absolute;inset:0;background-size:cover;background-position:right 38%}
.hero.sketch .sketchart::before{content:"";position:absolute;inset:0;background:linear-gradient(88deg,#F7F1E1 0%,#F7F1E1 32%,rgba(247,241,225,.62) 56%,rgba(247,241,225,.06) 82%)}
.hero.sketch .inner{position:relative;width:100%;padding-top:26px;padding-bottom:26px}
.hero.sketch h1{color:var(--ey-ink);max-width:530px}
.hero.sketch p{color:var(--ey-ink);max-width:430px;font-weight:500}
@media (max-width:700px){
  .hero.sketch{flex-direction:column;align-items:stretch;min-height:0}
  .hero.sketch .sketchart{position:static;order:2;height:200px;background-position:center 40%}
  .hero.sketch .sketchart::before{display:none}
}
.hero .inner{max-width:780px;margin:0 auto;padding:34px 18px 4px}
.hero h1{font-family:var(--font-display-black);font-weight:400;font-size:2.1rem;line-height:1.1;margin:0 0 12px;color:#fff;letter-spacing:-.015em;text-wrap:balance}
.hero p{color:#DCE3D2;margin:0;max-width:640px;font-size:1.06rem}
.wrap{max-width:780px;margin:0 auto;padding:8px 18px 50px}
.quickanswer{background:#fff;border:1.5px solid var(--line);border-left:4px solid var(--lime);border-radius:0 14px 14px 0;padding:14px 16px;margin:16px 0 0;color:var(--muted)}
.quickanswer b{color:var(--green-dark)}
.crumbs{color:var(--muted);margin:10px 2px 0;font-size:.95rem}
.crumbs a{text-decoration:none}
.crumbs span{margin:0 4px;color:#a8a497}
.step{font-weight:800;font-family:var(--font-display);color:var(--ey-ink);font-size:1.18rem;margin:26px 4px 10px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.step .n{background:var(--ey-ink);color:var(--ey-paper);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;font-family:var(--font-note)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:10px;box-shadow:var(--shadow-lawn)}
h2{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--green-dark);margin:0 0 12px;letter-spacing:-.015em}
.muted{color:var(--muted)}
.unitwrap{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.unittoggle{display:inline-flex;border:1.5px solid var(--green);border-radius:999px;overflow:hidden}
.unittoggle button{border:0;background:#fff;color:var(--muted);font-weight:700;padding:8px 18px;cursor:pointer;font-size:1rem}
.unittoggle button.active{background:var(--green);color:#fff}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>div{flex:1;min-width:140px}
.bigfield label{display:block;font-weight:700;font-size:1.05rem;margin-bottom:6px}
.bigfield input,.bigfield select{width:100%;padding:16px;border:2px solid var(--line);border-radius:14px;font-size:1.4rem;font-weight:700;background:#fff;text-align:center;font-family:var(--font-sans)}
.bigfield select{appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center;cursor:pointer}
.bigfield input:focus,.bigfield select:focus{outline:none;border-color:var(--ey-ink);box-shadow:0 0 0 4px rgba(240,120,24,.3)}
.placeholder{border:2px dashed #d2cdbf;border-radius:16px;padding:30px 20px;text-align:center;color:var(--muted);background:#faf8f1;margin-bottom:8px}
#results{display:none}
/* Results headline — drawn like a hand-annotated quote: card stock, ink border,
   the key number ringed in hi-vis marker (data-URI ellipse, scales with text). */
.headline{background:var(--ey-card);border:2px solid var(--ey-ink);color:var(--ey-ink);border-radius:14px;padding:20px 22px;margin-bottom:14px;box-shadow:3px 3px 0 var(--ey-line)}
.headline .hbuy{font-weight:500}
.headline .hbuy b{font-family:var(--font-display-black);font-size:1.9rem;font-weight:400;letter-spacing:-.015em;display:inline-block;padding:.12em .4em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 72' preserveAspectRatio='none'%3E%3Cpath d='M18 36 C 12 12, 78 4, 128 8 C 178 12, 196 30, 186 50 C 174 68, 44 70, 22 56 C 8 46, 12 24, 34 16' fill='none' stroke='%23F07818' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.headline .hsub{color:var(--ey-pencil);margin-top:5px}
.headline .hcost{color:var(--terra);margin-top:8px;font-weight:700}
.afftiny{color:var(--muted);margin:0 0 14px}
.optcard{display:flex;gap:14px;border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;align-items:flex-start;background:#fff}
.optcard.top{border-color:var(--terra);box-shadow:0 3px 14px rgba(200,106,60,.14)}
.optcard .dg{flex-shrink:0;width:140px;display:flex;justify-content:center}
.optcard .dg svg{display:block;max-width:138px;max-height:200px;width:auto;height:auto}
.optcard .body{flex:1;min-width:0}
.pick{display:inline-block;background:var(--green);color:#fff;font-weight:800;padding:3px 10px;border-radius:20px;margin-bottom:6px}
.badge{display:inline-block;color:#fff;font-weight:800;padding:3px 9px;border-radius:20px;margin-bottom:6px}
.badge.green{background:var(--green)} .badge.blue{background:var(--accent)} .badge.grey{background:var(--ey-muted)}
.optcard h3{margin:0 0 4px;font-size:1.15rem}
.optcard .facts{color:var(--muted);margin-bottom:10px}
.optcard .facts b{color:var(--green-dark)} .optcard .facts .spare{color:var(--accent);font-weight:700}
.optcard .buy{display:inline-block;background:var(--accent);color:var(--ink);font-weight:800;padding:11px 16px;border-radius:10px;text-decoration:none;border:1px solid var(--accent-dark);box-shadow:2px 2px 0 var(--ey-line)}
.optcard .buy:hover{background:var(--accent-dark);color:var(--ink)}
.legend{color:var(--muted);margin:2px 2px 12px}
.disclaimer{color:var(--muted);margin:2px 2px 0}
.stagetabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.stagetabs button{flex:1 1 auto;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px 8px;cursor:pointer;font-weight:700;color:var(--ink);white-space:nowrap}
.stagetabs button.active{border-color:var(--green);background:var(--green-light);color:var(--green-dark)}
.shop a{display:flex;align-items:center;gap:12px;text-decoration:none;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin:9px 0;color:var(--ink)}
.shop a:hover{border-color:var(--terra);box-shadow:0 2px 10px rgba(200,106,60,.12)}
.shop .ico{font-size:1.5rem;line-height:1}
.shop .txt{flex:1} .shop .txt b{font-weight:700}
.shop .txt small{display:block;color:var(--muted);font-size:1rem;margin-top:1px}
.shop .go{background:var(--accent);color:var(--ink);font-weight:800;padding:9px 13px;border-radius:9px;white-space:nowrap;border:1px solid var(--accent-dark)}
.glinks a{color:var(--green-dark);font-weight:700;text-decoration:none}
.feat{display:flex;gap:16px;align-items:center;text-decoration:none;color:var(--ink);border:1.5px solid var(--line);border-radius:14px;padding:16px;background:#fff}
.feat:hover{border-color:var(--terra);box-shadow:0 2px 10px rgba(200,106,60,.12)}
.feat-img{flex-shrink:0;width:110px;line-height:0}
.feat-txt{flex:1}
.feat-txt b{font-size:1.1rem}
.feat-txt p{color:var(--muted);margin:5px 0 12px}
.feat-go{display:inline-block;background:var(--accent);color:var(--ink);font-weight:800;padding:11px 16px;border-radius:10px;border:1px solid var(--accent-dark)}
/* hub feature slot — the spec builder leads the page rather than sitting in the grid */
.featmain{border-width:2px;border-color:var(--green);background:linear-gradient(180deg,var(--green-light),#fff);margin:0 0 22px}
.featmain .feat-txt b{font-size:1.22rem;font-family:var(--font-display);color:var(--green-dark);letter-spacing:-.015em}
@media (max-width:560px){.feat{flex-direction:column;align-items:flex-start;gap:10px}.feat-img{width:auto}}
.ctacard{background:linear-gradient(135deg,#fefaf3,#faefe2);border-color:var(--terra)}
.cta-btn{display:block;text-align:center;background:var(--accent);color:var(--ink);font-weight:800;padding:14px 18px;border-radius:12px;text-decoration:none;border:1px solid var(--accent-dark);font-size:1.05rem;box-shadow:2px 2px 0 var(--ey-line)}
.cta-btn:hover{background:var(--accent-dark)}
.costtable{width:100%;border-collapse:collapse;margin:6px 0 4px}
.costtable th,.costtable td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);font-size:.98rem}
.costtable th{color:var(--ey-ink);font-weight:800;background:#F2EAD6}
.costtable td b{color:var(--green-dark)}
.costtable .num{text-align:right;white-space:nowrap}
.tablewrap{overflow-x:auto}
.pricenote{color:var(--muted);font-size:.92rem;margin:8px 2px 0}
.faqitem h3{margin:14px 0 4px;font-size:1.05rem;color:var(--ink)}
.faqitem p{margin:0 0 6px;color:var(--muted)}
.relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.relcard{display:block;text-decoration:none;color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.relcard:hover{border-color:var(--terra);box-shadow:0 2px 10px rgba(200,106,60,.12)}
.relcard .ico{font-size:1.4rem;display:block;margin-bottom:6px}
.relcard b{display:block;margin-bottom:3px}
.relcard small{color:var(--muted);line-height:1.4;display:block}
.trustbar{text-align:center;color:var(--green-dark);font-weight:600;margin:18px 0 0}
.trustbar span{display:inline-block;margin:0 8px}
footer{text-align:center;color:var(--muted);margin-top:16px}
footer .links{margin-bottom:8px}
footer .links a{margin:0 8px;text-decoration:none}
#stickybar{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:9px 14px;box-shadow:0 -2px 10px rgba(0,0,0,.08);z-index:50}
#stickybar a{display:block;text-align:center;background:var(--accent);color:var(--ink);font-weight:800;padding:13px;border-radius:10px;text-decoration:none}
/* Expandable insight cards (progressive disclosure — no walls of text) */
.insight{border:1.5px solid var(--line);border-radius:14px;background:#fff;margin:10px 0;overflow:hidden}
.insight summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.insight summary::-webkit-details-marker{display:none}
.insight summary .ico{font-size:1.25rem;line-height:1}
.insight summary .hint{margin-left:auto;color:var(--muted);font-weight:600;font-size:.85rem;white-space:nowrap}
.insight summary:hover{background:#faf8ef}
.insight[open] summary{border-bottom:1px solid var(--line);background:#faf8ef}
.insight .inb{padding:14px 16px;color:var(--muted)}
.insight .inb p{margin:0 0 10px}
.insight .inb p:last-child{margin-bottom:0}
.insight .inb ul{margin:4px 0 12px;padding-left:20px}
.insight .inb li{margin-bottom:5px}
.insight .inb b{color:var(--ink)}
.insight.save{border-color:#e0cb84;background:linear-gradient(180deg,#fffdf3,#fff)}
.insight.save summary{color:#6e5a1e}
.savings-tag{display:inline-block;background:#fbf1c9;color:#6e5a1e;font-weight:800;font-size:.8rem;padding:2px 8px;border-radius:10px;margin-left:6px}
.tipbox{background:#fcf7e8;border:1.5px solid #e8ddbb;border-radius:12px;padding:12px 14px;margin:12px 0 0;color:#4a4a3e}
.tipbox b{color:var(--green-dark)}
.diagram{margin:14px 0 4px;text-align:center}
.diagram svg{max-width:100%;height:auto}
.diagram figcaption{color:var(--muted);font-size:.9rem;margin-top:6px}
/* Scenario picker (journey step) */
.scenpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:4px}
.scenpick button{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;font-family:inherit;font-size:1rem}
.scenpick button b{display:block;margin-bottom:4px;color:var(--ink);font-size:1.02rem}
.scenpick button small{color:var(--muted);line-height:1.4;display:block;font-size:.9rem}
.scenpick button.active{border-color:var(--ey-ink);background:var(--lime-soft);box-shadow:0 0 0 4px rgba(240,120,24,.25)}
.scenadvice{margin-top:12px}
.scenadvice .advice{background:#faf8f1;border-left:3px solid var(--terra);padding:10px 14px;border-radius:0 10px 10px 0;color:var(--muted)}
.scenadvice .advice b{color:var(--green-dark)}
.scenhelp{margin:12px 2px 0}
/* Intent templates: compact hero (quantity pages — tool in first viewport) */
.hero.compact{padding-bottom:14px}
.hero.compact .inner{padding:20px 18px 2px}
.hero.compact h1{font-size:1.75rem;margin-bottom:7px}
.hero.compact p{font-size:.98rem}
/* Quick-answer trust sub-line (prices-checked + methodology anchor) */
.quickanswer.has-sub{border-bottom:0;border-radius:0 14px 0 0;padding-bottom:10px}
.qa-sub{background:#fff;border:1.5px solid var(--line);border-top:0;border-left:4px solid var(--lime);border-radius:0 0 14px 0;margin:0;padding:0 16px 12px;color:var(--muted);font-size:.88rem}
/* No-measurement aids: pace line + size preset chips */
.paceline{color:var(--muted);font-size:.92rem;margin:12px 2px 0}
.presetrow{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;align-items:stretch}
.presetlbl{color:var(--muted);font-weight:700;font-size:.92rem;flex-basis:100%}
.presetrow button{flex:1 1 140px;text-align:left;background:#faf8f1;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;font-family:inherit;font-size:.95rem}
.presetrow button b{display:block;color:var(--ink);margin-bottom:2px}
.presetrow button small{color:var(--muted);display:block;line-height:1.35;font-size:.85rem}
.presetrow button.active{border-color:var(--ey-ink);background:var(--lime-soft);box-shadow:0 0 0 3px rgba(240,120,24,.25)}
/* Rich results placeholder (quantity pages carry the quick answer here) */
.placeholder .ph-qa{text-align:left;color:var(--ink);margin:0 0 6px}
.placeholder .ph-qa b{color:var(--green-dark)}
.placeholder .ph-sub{text-align:left;color:var(--muted);font-size:.88rem;margin:0 0 14px}
.placeholder .ph-hint{margin:0;font-weight:600}
/* Results-panel extras: quiet quote line, trust line, input echo */
.rescta{color:var(--ink);margin:10px 2px 12px}
.pricesline{color:var(--muted);font-size:.88rem;margin:0 2px 10px}
.hecho{color:var(--ey-pencil);font-size:.88rem;margin-top:7px;font-weight:500}
/* Scenario typical-range tag (anchor figure before any measuring) */
.scenrange{display:block;margin-top:7px;color:var(--terra);font-weight:700;font-size:.88rem}
/* Buying guide block: urgency routes + honest tiered product picks */
.buyroutes{background:#faf8f1;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:6px}
.buyroute{margin:0 0 8px;color:var(--muted)}
.buyroute:last-child{margin-bottom:0}
.buyroute b{color:var(--green-dark)}
.buyhead{margin:18px 0 8px;font-size:1.1rem;color:var(--green-dark)}
.buypick{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;background:#fff}
.buypick .badge{flex-shrink:0;margin:2px 0 0;white-space:nowrap}
.buypick .bwhat{flex:1;min-width:0}
.buypick .bwhat b{color:var(--ink)}
.buyprice{color:var(--terra);font-weight:700;margin-left:6px}
.buygo{display:inline-block;margin-top:6px;font-weight:700;text-decoration:none;color:var(--link)}
.buygo:hover{text-decoration:underline}
@media (max-width:480px){.buypick{flex-direction:column;gap:6px}}
/* Spec builder (/garden-planner/ — calc-planner.js renders into #calcMount + results) */
.plsteps{display:flex;gap:4px;overflow-x:auto;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none}
.plsteps::-webkit-scrollbar{display:none}
.plstep{display:flex;align-items:center;gap:7px;flex:0 0 auto;background:none;border:0;padding:6px 4px;cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:700;color:var(--muted);white-space:nowrap;min-height:36px}
.plstep .sn{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--stone,#DDD9CF);color:var(--green-dark);font-size:.75rem;font-weight:800;flex:0 0 auto}
.plstep.done .sn{background:var(--green);color:#fff}
.plstep.now{color:var(--green-dark)}
.plstep.now .sn{background:var(--terra);color:#fff;box-shadow:0 0 0 3px rgba(200,106,60,.18)}
.plstep:disabled{opacity:.45;cursor:default}
.plcap{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--terra);margin:6px 2px 2px}
.plh{font-family:var(--font-display);font-size:1.3rem;outline:none;font-weight:700;color:var(--green-dark);margin:0 2px 10px;letter-spacing:-.015em}
.plhint{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 2px 14px}
.plhint b,.plnote b{color:var(--green-dark)}
.plnote{background:var(--lime-soft);border-left:3px solid var(--lime);border-radius:0 10px 10px 0;padding:10px 12px;font-size:.9rem;color:var(--ink);margin:0 0 14px;line-height:1.5}
.plnote.ok{background:var(--green-light);border-left-color:var(--green)}
.plsub{color:var(--muted);font-size:.87rem;line-height:1.5;margin:6px 2px 10px}
.pllink{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--link);text-decoration:underline;cursor:pointer}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.plq{margin:0 0 18px}
.plq h4{font-size:.98rem;font-weight:800;color:var(--green-dark);margin:0 0 3px}
.plq .plsub{margin:0 0 8px}
/* option chips — selected state carries fill + border + tick, never colour alone */
.plchips{display:flex;flex-wrap:wrap;gap:8px}
.plchip{position:relative;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;flex:1 1 150px;min-height:48px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .12s ease,background .12s ease}
.plchip .l{font-size:.94rem;font-weight:700;line-height:1.3}
.plchip .s{font-size:.8rem;color:var(--muted);line-height:1.35}
.plchip .d{font-size:.8rem;font-weight:800;color:var(--terra);font-variant-numeric:tabular-nums;margin-top:2px}
.plchip:hover{border-color:var(--terra)}
.plchip:focus-visible,.plel:focus-visible,.plnext:focus-visible,.plback:focus-visible,
.plstep:focus-visible,.pllink:focus-visible,.plcopy:focus-visible,.plprint:focus-visible,
.plhead:focus-visible,.plgo:focus-visible,.pldrop:focus-visible,.pladd:focus-visible,
.plapply:focus-visible,.plh:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.plh:focus-visible{outline-offset:4px;border-radius:4px}
.plchip.on{border-color:var(--green);border-width:2px;background:var(--green-light);padding:9.5px 11.5px}
.plchip.on .l::after{content:" ✓";color:var(--green)}
.plchip.on .d{color:var(--green-dark)}
/* element picker */
.plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.plel{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:13px;min-height:92px;cursor:pointer;font-family:inherit;color:var(--ink);text-align:left}
.plel .i{font-size:1.5rem;line-height:1.1}
.plel .n{font-size:.95rem;font-weight:700;line-height:1.25}
.plel .t{font-size:.8rem;font-weight:800;color:var(--muted);margin-top:auto}
.plel:hover{border-color:var(--terra)}
.plel.on{border-color:var(--green);border-width:2px;background:var(--green-light);padding:12px}
.plel.on .t{color:var(--green)}
/* spec cards — a collapsed card still shows its spec and its price */
.plcard{border:1.5px solid var(--line);border-radius:14px;background:#fff;margin:0 0 10px;overflow:hidden}
.plcard.open{border-color:var(--green);border-width:2px}
.plhead{display:flex;align-items:center;gap:11px;width:100%;background:none;border:0;padding:13px;cursor:pointer;font-family:inherit;text-align:left;min-height:60px}
.plhead .i{font-size:1.35rem;line-height:1;flex:0 0 auto}
.plhead .hb{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.plhead .hn{font-size:1rem;font-weight:800;color:var(--green-dark)}
.plhead .hs{font-size:.82rem;color:var(--muted);line-height:1.35;overflow-wrap:break-word}
.plhead .hp{font-size:.95rem;font-weight:800;color:var(--terra);font-variant-numeric:tabular-nums;text-align:right;flex:0 0 auto}
.plhead .hp .na{font-size:.8rem;font-weight:700;color:var(--muted)}
.plhead .hc{font-size:.8rem;font-weight:800;color:var(--link);text-decoration:underline;flex:0 0 auto}
.plbody{padding:2px 13px 13px;border-top:1px solid var(--line)}
.plcustom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;font-size:.87rem;font-weight:700;color:var(--muted)}
.plcustom input{width:104px;min-height:48px;border:1.5px solid var(--line);border-radius:10px;padding:10px;font:800 1rem var(--font-sans);text-align:center;background:#fff;color:var(--ink)}
.placts{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0}
.plgo{flex:1 1 150px;min-height:48px;background:var(--green);color:#fff;border:0;border-radius:11px;padding:12px 16px;font:800 .98rem var(--font-sans);cursor:pointer}
.pldrop{flex:0 1 auto;min-height:48px;background:none;border:1.5px solid var(--line);border-radius:11px;padding:12px 16px;font:700 .9rem var(--font-sans);color:var(--muted);cursor:pointer}
.pladd{display:block;width:100%;min-height:48px;background:#fff;border:1.5px dashed var(--line);border-radius:12px;padding:13px;font:800 .95rem var(--font-sans);color:var(--link);cursor:pointer;margin:4px 0 0}
/* budget: "I don't know" is a first-class answer, not a skip */
.plidk{border:1.5px solid var(--line);border-radius:14px;background:#faf8f1;padding:14px;margin:14px 0 0}
.plidk h4{font-size:.98rem;font-weight:800;color:var(--green-dark);margin:0 0 6px}
.plidk p{font-size:.9rem;color:var(--muted);margin:0 0 8px;line-height:1.5}
.plidklist{list-style:none;margin:0 0 8px;padding:0}
.plidklist li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.plidklist li b{color:var(--terra);font-variant-numeric:tabular-nums;white-space:nowrap}
.plidktot{font-size:1rem!important;color:var(--ink)!important;font-weight:700}
/* trade-offs */
.plfixes{display:flex;flex-direction:column;gap:9px;margin:0 0 14px}
.plfix{display:flex;gap:12px;flex-wrap:wrap;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:12px}
.plfix .fb{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px}
.plfix .fb b{font-size:.95rem;font-weight:800;color:var(--green-dark);line-height:1.3}
.plfix .fb span{font-size:.83rem;color:var(--muted);line-height:1.45}
.plfix .fa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.plfix .fs{font-size:.85rem;font-weight:800;color:var(--terra);font-variant-numeric:tabular-nums}
.plapply{min-height:44px;background:var(--green);color:#fff;border:0;border-radius:10px;padding:10px 18px;font:800 .92rem var(--font-sans);cursor:pointer}
/* the plan */
.plsec{border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:14px;margin:0 0 12px}
.plsec.later{background:#faf8f1;border-style:dashed}
.plsec h4{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--terra);margin:0 0 8px}
.plrow{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.plrow .rl{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.plrow .rl b{font-size:.95rem;font-weight:800;color:var(--green-dark)}
.plrow .rl span{font-size:.82rem;color:var(--muted);line-height:1.4;overflow-wrap:break-word}
.plrow .rr{display:flex;align-items:baseline;gap:10px;margin-left:auto}
.plrow .rr b{font-weight:800;color:var(--terra);font-variant-numeric:tabular-nums;white-space:nowrap}
.plrow.adj .rl b{color:var(--muted);font-weight:700}
.pltot{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:11px 0 0;font-weight:800}
.pltot span{font-size:.88rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pltot b{font-size:1.15rem;color:var(--green-dark);font-variant-numeric:tabular-nums}
.plcontig{display:flex;flex-direction:column;gap:4px;border:1.5px dashed var(--line);border-radius:12px;padding:12px 14px;margin:0 0 12px;background:#fff}
.plcontig b{font-size:.98rem;color:var(--green-dark);font-variant-numeric:tabular-nums}
.plcontig span{font-size:.85rem;color:var(--muted);line-height:1.5}
.plwarn{border:1.5px solid #e0cb84;background:linear-gradient(180deg,#fffdf3,#fff);border-radius:14px;padding:14px;margin:0 0 12px}
.plwarn h4{font-size:.98rem;font-weight:800;color:var(--green-dark);margin:0 0 9px}
.pw{display:flex;flex-direction:column;gap:3px;padding:9px 0;border-bottom:1px solid var(--line)}
.pw:last-child{border-bottom:0;padding-bottom:0}
.pw b{font-size:.92rem;font-weight:800;color:var(--green-dark);line-height:1.3}
.pw span{font-size:.85rem;color:var(--muted);line-height:1.5}
/* nav */
.plnav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:20px 0 0;flex-wrap:wrap}
.plback{min-height:48px;background:none;border:1.5px solid var(--line);border-radius:11px;padding:12px 18px;font:700 .95rem var(--font-sans);color:var(--muted);cursor:pointer}
.plnext{min-height:48px;flex:1 1 auto;max-width:420px;margin-left:auto;background:var(--accent);color:#fff;border:0;border-radius:11px;padding:13px 20px;font:800 1rem var(--font-sans);cursor:pointer}
.plnext:disabled{background:var(--stone,#DDD9CF);color:var(--muted);cursor:default}
/* running total — colour is never the only signal */
.plbar{position:sticky;bottom:8px;z-index:5;margin:18px -2px 0;border:2px solid var(--green);border-radius:14px;background:#fff;padding:11px 13px;box-shadow:0 6px 22px rgba(44,58,46,.16)}
.plbar .pbtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.plbar .pbl{font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.plbar .pbv{font-size:1.2rem;font-weight:800;color:var(--green-dark);font-variant-numeric:tabular-nums}
.plbar .pbm{height:8px;border-radius:99px;background:var(--stone,#DDD9CF);overflow:hidden;margin:8px 0 7px}
.plbar .pbm i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .28s ease-out}
.plbar .pbs{font-size:.83rem;color:var(--muted);line-height:1.4;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plbar .pbi{font-weight:800}
.plbar.near{border-color:var(--terra)}
.plbar.near .pbm i{background:var(--terra)}
.plbar.near .pbi{color:var(--terra)}
.plbar.over{border-color:var(--accent-dark)}
.plbar.over .pbm i{background:var(--accent-dark)}
.plbar.over .pbi,.plbar.over .pbv{color:var(--accent-dark)}
@media (prefers-reduced-motion:reduce){.plbar .pbm i{transition:none}}
#results.plhide{display:none!important}
.hbrief{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--ey-ink);margin:0;letter-spacing:-.015em}
.plerr{min-height:0;margin:5px 2px 0;font-size:.84rem;line-height:1.4;color:var(--muted)}
.plerr.bad{color:var(--accent-dark);font-weight:700}
.plerr.warn{color:var(--terra);font-weight:600}
.plerr:empty{margin:0}
.plsaved{display:block;text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted);font-size:.76rem;margin-top:2px}
.pw a{font-weight:700}
.plblocked{text-align:center;margin:8px 2px 0;font-size:.88rem;font-weight:600;color:var(--accent-dark)}
.pllink{min-height:24px}
.plstartover .pllink{display:inline-block;min-height:44px;padding:11px 14px}
.pllab{font-size:.86rem;color:var(--muted);line-height:1.5;margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--line)}
.pllab b{color:var(--green-dark);font-variant-numeric:tabular-nums}
.plnums,.plshort{border:1.5px solid var(--line);border-radius:12px;background:#faf8f1;padding:12px 14px;margin:10px 0 0}
.plnums summary,.plshort summary{font-weight:800;color:var(--green-dark);cursor:pointer;font-size:.92rem}
.plnumrows{margin:8px 0 0}
.plnumrows .plrow{padding:6px 0}
.plbrief.short{min-height:120px}
.plmjq{border-color:var(--terra)}
.plmap{margin:6px 0 0;display:grid;grid-template-columns:1fr;gap:0}
.plmap dt{font-size:.82rem;font-weight:800;color:var(--terra);margin:9px 0 1px}
.plmap dd{margin:0;font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.4}
.plmap dd span{display:block;font-size:.8rem;font-weight:400;color:var(--muted);margin-top:1px}
.plgroup{font-size:1.02rem;font-weight:800;color:var(--green-dark);margin:22px 0 4px;padding-top:14px;border-top:1.5px solid var(--line)}
.plgroup:first-of-type{border-top:0;padding-top:0;margin-top:12px}
.plstartover{text-align:center;margin:14px 0 0;font-size:.85rem}
/* brief */
.plbrief-print{display:none}
.plbrief{width:100%;min-height:230px;border:1.5px solid var(--line);border-radius:12px;padding:12px;font:.86rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:#faf8f1;resize:vertical;margin:8px 0 0}
.plbtns{display:flex;gap:10px;margin:12px 0 0;flex-wrap:wrap}
.plcopy{flex:1 1 200px;min-height:50px;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:14px 18px;font:800 1rem var(--font-sans);cursor:pointer}
.plprint{flex:1 1 160px;min-height:50px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 18px;font:700 .95rem var(--font-sans);color:var(--green-dark);cursor:pointer}
.plreset{flex:0 1 auto;min-height:50px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 18px;font:700 .95rem var(--font-sans);color:var(--muted);cursor:pointer}
/* the homeowner's own half — what to ask, and how to judge what comes back */
.plask{border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:15px;margin:16px 0 0}
.plask h4{font-size:1.02rem;font-weight:800;color:var(--green-dark);margin:0 0 6px}
.plask .plsub{margin:0 0 10px}
.pag{padding:9px 0;border-bottom:1px solid var(--line)}
.pag:last-child{border-bottom:0;padding-bottom:0}
.pag b{display:block;font-size:.92rem;font-weight:800;color:var(--terra);margin:0 0 4px}
.pag ul,.plchk{margin:0;padding:0 0 0 18px}
.pag li,.plchk li{font-size:.88rem;color:var(--ink);line-height:1.5;margin:0 0 5px}
.plchk li{list-style:none;position:relative;padding-left:6px}
.plchk li::before{content:"☐";position:absolute;left:-16px;color:var(--terra);font-weight:700}
.plhold{border-color:var(--terra);background:linear-gradient(180deg,#fdf3ec,#fff)}
.plhold h4{color:var(--accent-dark)}
.pldisc{text-align:center;margin:14px 2px 0;font-size:.82rem}
/* quote comparison grid */
.plqcmp{border-color:var(--green)}
.plqgrid{display:block;margin:4px 0 0}
.plqrow{display:grid;grid-template-columns:1fr 62px 62px 62px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.plqrow.head{border-bottom:1.5px solid var(--line);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:center}
.plqrow.head span:first-child{text-align:left}
.plqrow .rh{font-size:.86rem;font-weight:700;color:var(--ink);line-height:1.3;display:flex;flex-direction:column;gap:1px}
.plqrow .rh em{font-style:normal;font-size:.76rem;font-weight:400;color:var(--muted);line-height:1.35}
.plqrow>span:not(.rh){display:flex;justify-content:center}
.plqrow input[type=text]{width:100%;min-height:44px;border:1.5px solid var(--line);border-radius:9px;padding:8px 6px;font:700 .9rem var(--font-sans);text-align:center;background:#fff;color:var(--ink)}
.plqrow input[type=checkbox]{width:26px;height:26px;accent-color:var(--green);cursor:pointer;margin:9px 0}
.plqv{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--green-light);display:flex;flex-direction:column;gap:5px}
.plqv b{font-size:.98rem;color:var(--green-dark);font-variant-numeric:tabular-nums}
.plqv span{font-size:.86rem;color:var(--muted);line-height:1.5}
.plqv .warn{color:var(--accent-dark);font-weight:600}
/* On a phone the label column squeezes to three words a line and drags the checkboxes
   out of line with it. Give the label its own row and let the three answers sit under it. */
@media (max-width:560px){
  .plqrow{grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 0}
  .plqrow>.rh{grid-column:1/-1;margin-bottom:2px}
  .plqrow.head>span:first-child{display:none}
  .plqrow input[type=text]{font-size:.86rem;padding:8px 4px}
}
@media print{
  /* Hide everything, then reveal only the brief and its checklists. Selector-by-selector
     hiding missed five sections that are all generic .card divs, so several pages of
     marketing were printing around a truncated brief. */
  body>*{display:none!important}
  body>.wrap{display:block!important}
  .wrap>*{display:none!important}
  .wrap>#results{display:block!important;border:0;box-shadow:none;padding:0}
  #results.plhide{display:block!important}
  /* The shopping list carries affiliate links, and Chrome keeps live hrefs when it
     saves to PDF. Amazon's terms don't allow tagged links in a printed document,
     and our disclosure doesn't travel with the page — so it never prints. */
  .plbrief,.plbtns,.plqcmp,.plshop,.pltakeaway,.plnums{display:none!important}
  .plbrief-print{display:block!important;font:10.5pt/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
    white-space:pre-wrap;word-break:break-word;margin:0 0 14pt;color:#000}
  .headline{background:none!important;color:#000!important;padding:0 0 8pt;font-weight:800}
  .plask,.plsec,.plwarn,.plcontig{break-inside:avoid;border-color:#999;box-shadow:none}
  .plhold{background:none}
  a[href]:after{content:""}
  body{background:#fff}
}
@media (max-width:480px){
  .plchip{flex:1 1 100%}
  .plbar .pbtop{flex-direction:column;align-items:flex-start;gap:1px}
  .plbar .pbv{font-size:1.35rem}
  .plhead{flex-wrap:wrap;row-gap:6px}
  .plhead .hb{flex:1 1 100%;order:2}
  .plhead .hp{order:1;margin-left:auto}
  .plhead .hc{order:3;margin-left:auto}
  .plnext{flex:1 1 100%;max-width:none}
  .plback{flex:1 1 100%;order:2}
}

/* Hub */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:6px}
.hubcard{display:block;text-decoration:none;color:var(--ink);border:1.5px solid var(--line);border-radius:16px;padding:18px;background:#fff;transition:box-shadow .15s ease, border-color .15s ease}
.hubcard:hover{border-color:var(--terra);box-shadow:var(--shadow-lawn)}
.hubcard .ico{font-size:1.7rem;display:block;margin-bottom:8px}
.hubcard b{display:block;font-size:1.08rem;margin-bottom:4px;font-family:var(--font-display);font-weight:700;letter-spacing:-.015em}
.hubcard small{color:var(--muted);line-height:1.45;display:block}
.hubcard .soon{display:inline-block;background:#efede4;color:var(--muted);font-weight:700;font-size:.8rem;padding:2px 8px;border-radius:12px;margin-top:8px}
@media (max-width:700px){
  body.has-result #stickybar{display:block}
  .hero h1{font-size:1.75rem}
}
@media (max-width:480px){
  /* tighten wide cost tables so most fit the screen without side-scrolling */
  .costtable th,.costtable td{padding:8px 7px;font-size:.9rem}
  .card{padding:20px 16px}
  .insight .inb,.insight summary{padding-left:14px;padding-right:14px}
  /* shop rows: the nowrap "View on Amazon" button can't share a line on a phone,
     so let it drop full-width underneath instead of pushing the row off-screen */
  .shop a{flex-wrap:wrap}
  .shop .go{width:100%;text-align:center;margin-top:8px}
  .bigfield select{font-size:1.08rem}
  /* picks stack on a phone, so long tier tags may wrap rather than overflow */
  .buypick .badge{white-space:normal}
}
.shop .txt{min-width:0}
/* ---- Sketchbook Trade annotation devices (DESIGN.md) ---- */
.ey-note{font-family:var(--font-note);font-size:1.02rem;line-height:1.4;color:var(--ey-hivis-deep)}
.ey-note.ink{color:var(--ey-ink)}
.ey-arrow{display:inline-block;vertical-align:middle;margin-right:6px}
.pricestamp{display:inline-block;font-family:var(--font-note);font-size:.95rem;color:var(--ey-hivis-deep);border:2px solid var(--ey-hivis-deep);border-radius:8px;padding:2px 10px;transform:rotate(-2deg)}

/* ---- Buying block v2: featured product card, hand-lettered badges ---- */
.affnote{font-size:.85rem;color:var(--muted);margin:0 0 14px}
.featbuy{border:2px solid var(--ey-ink);border-radius:14px;background:var(--ey-card);
  box-shadow:3px 3px 0 var(--ey-line);padding:18px 20px;margin:0 0 16px}
.featbuy.hasimg{display:grid;grid-template-columns:1fr 240px;gap:4px 20px;align-items:start}
.featbuy.hasimg .bimg{grid-column:2;grid-row:1/span 5;border-radius:10px;overflow:hidden}
.featbuy.hasimg .bimg img{display:block;width:100%;height:auto}
.featbuy h3{margin:2px 0 4px;font-size:1.16rem;font-family:var(--font-display);font-weight:800;color:var(--ink)}
.featbuy .fprice{color:var(--terra);font-weight:800;margin:0 0 8px}
.featbuy .muted{margin:0 0 12px;display:block}
.recbadge{display:block;width:170px;height:auto;margin:0 0 8px;transform:rotate(-2deg)}
.buypick .bmark{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;width:132px;margin:2px 0 0}
.buypick .bmark img{display:block;width:132px;height:auto}
.buypick .bmark small{font-size:.76rem;font-weight:700;color:var(--muted);line-height:1.25}
/* Affiliate destinations are orange buttons; internal links are green. */
.buygo{display:inline-block;margin-top:10px;background:var(--accent);color:var(--ink);
  font-weight:800;padding:10px 15px;border-radius:10px;text-decoration:none;
  border:1px solid var(--accent-dark);box-shadow:2px 2px 0 var(--ey-line)}
.buygo:hover{background:var(--accent-dark);text-decoration:none}
.featbuy .buygo{padding:12px 18px}
/* Hire-a-trade card with photoreal trade shot */
.ctacard.hasimg{display:grid;grid-template-columns:1fr 250px;gap:20px;align-items:center}
.ctacard .ctaimg{border-radius:12px;overflow:hidden;order:2}
.ctacard .ctaimg img{display:block;width:100%;height:auto}
.ctacard .ctabody{min-width:0}
/* Internal (own-site) links: moss green, never orange */
.relcard:hover{border-color:var(--green)}
.glinks a{color:var(--green-dark)}
@media (max-width:620px){
  .featbuy.hasimg,.ctacard.hasimg{display:block}
  .featbuy.hasimg .bimg{margin:10px 0}
  .ctacard .ctaimg{margin:0 0 14px}
  .buypick .bmark{width:120px}
  .buypick .bmark img{width:120px}
}
/* Photoreal hero (DESIGN.md photo layer): white text over a soft dark scrim */
.hero.photoart{min-height:380px}
.hero.photoart .sketchart::before{background:linear-gradient(80deg,rgba(22,22,16,.66) 0%,rgba(22,22,16,.38) 42%,rgba(22,22,16,.06) 70%,transparent 82%)}
.hero.photoart h1{color:#fff;text-shadow:0 2px 16px rgba(8,10,6,.5)}
.hero.photoart p{color:#F1ECDD;text-shadow:0 1px 12px rgba(8,10,6,.55);font-weight:500}
@media (max-width:700px){
  .hero.photoart{min-height:0}
  .hero.photoart .sketchart{height:220px}
  .hero.photoart h1{color:var(--ey-ink);text-shadow:none}
  .hero.photoart p{color:var(--ey-ink);text-shadow:none}
}
/* Illustrated project icons (DESIGN.md) replace the emoji on cards */
.hubcard .ico img,.relcard .ico img{display:block;width:56px;height:56px;object-fit:contain}
.hubcard .ico,.relcard .ico{display:block;margin-bottom:8px;line-height:0}
.relcard .ico img{width:46px;height:46px}
/* Homepage topic bands: one calculator grid, grouped by part of the garden */
.bandhead{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--ey-ink);
  margin:22px 2px 10px;padding-top:16px;border-top:1.5px solid var(--ey-line);letter-spacing:-.01em}
.bandhead:first-child{margin-top:2px;padding-top:0;border-top:0}
.guidecard b{font-size:1rem}
/* Mission line under the hero */
.mission{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:18px 4px 2px;max-width:660px}
/* Card type tags — a Calculator and a Guide can share a name without clashing */
.ctag{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:.68rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--green-deep);background:var(--green-light);
  border-radius:20px;padding:3px 9px;margin-bottom:7px}
.ctag.guide{color:#7A3A05;background:#FBE6CE}
.guidecard{display:flex;flex-direction:column;justify-content:flex-start}
.guidecard b{font-size:1rem;line-height:1.32}
/* Per-band route into the project-brief builder */
.bandbrief{display:block;text-decoration:none;color:var(--ink);background:var(--ey-paper);
  border:2px solid var(--ey-ink);border-radius:14px;box-shadow:3px 3px 0 var(--ey-line);
  padding:15px 18px;margin:14px 0 4px}
.bandbrief b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.04rem;
  color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
.bandbrief small{display:block;color:var(--muted);line-height:1.5}
.bandbrief .bbgo{display:inline-block;margin-top:11px;background:var(--green);color:#fff;
  font-weight:800;font-size:.94rem;padding:9px 15px;border-radius:10px}
.bandbrief:hover .bbgo{background:var(--green-dark)}
/* Small route to the full guides collection at the foot of the homepage */
.guidesfoot{margin:20px 4px 4px;text-align:center}
.guidesfoot a{font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  color:var(--green-dark);text-decoration:none}
.guidesfoot a:hover{color:var(--ey-hivis-deep)}
.guidesfoot small{display:block;color:var(--muted);margin-top:4px;font-size:.9rem}
/* Guide cards carry no icon, so give them a quiet paper tint and a read cue */
.guidecard{background:var(--ey-paper)}
.guidecard .readon{display:block;margin-top:10px;font-weight:800;font-size:.9rem;color:var(--green-dark)}
.guidecard:hover .readon{color:var(--ey-hivis-deep)}
/* "Where these prices come from" — the sourcing, made visible */
.insight.srcs{border-color:var(--ey-line)}
.srclist{margin:4px 0 0;padding-left:20px}
.srclist li{margin:0 0 10px;line-height:1.5;font-size:.93rem}
.srclist .sfact{display:block;color:var(--ink)}
.srclist a{font-weight:700;word-break:break-word}
.srclist .swhen{color:var(--muted);font-size:.86rem;margin-left:6px;white-space:nowrap}
/* Planner: the "we carried this over" bar, and the cross-sell as a proposition */
.plarrive{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  background:var(--green-light);border:1.5px solid var(--green);border-radius:12px;
  padding:13px 15px;margin:0 0 14px}
.plarrive b{display:block;font-size:.96rem;color:var(--green-deep);font-weight:800}
.plarrive span{display:block;font-size:.88rem;color:var(--muted);line-height:1.45;margin-top:3px}
.plarrive .pllink{font-size:.85rem;white-space:nowrap}
.pladdcard{border:2px dashed var(--ey-line);border-radius:14px;background:var(--ey-paper);
  padding:16px 18px;margin:14px 0 0;text-align:center}
.pladdcard b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--ink)}
.pladdcard span{display:block;color:var(--muted);font-size:.92rem;line-height:1.5;margin:6px auto 12px;max-width:460px}
.pladdcard .pladd{display:inline-block;width:auto;margin:0;border:1.5px solid var(--green);
  background:var(--green);color:#fff;border-radius:11px;padding:12px 22px;font-weight:800;cursor:pointer}
.pladdcard .pladd:hover{background:var(--green-dark)}
/* Planner: measured dimensions, money figures, and the "not answered" marker */
.pldims{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;font-size:.9rem;color:var(--muted)}
.pldims .dlab{font-weight:700;color:var(--ink)}
.pldims input{width:92px;min-height:44px;border:1.5px solid var(--line);border-radius:10px;padding:8px;
  font:800 1rem var(--font-sans);text-align:center;background:#fff;color:var(--ink)}
.pldims .dx{font-weight:800;color:var(--ink)}
.pldims b{font-weight:800;color:var(--green-dark);font-variant-numeric:tabular-nums}
.pldims small{flex-basis:100%;color:var(--muted);font-size:.82rem;line-height:1.45}
.plrangerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plrangerow label{display:inline-flex;align-items:center;gap:6px;font-weight:800}
.plrangerow input{width:120px;min-height:48px;border:1.5px solid var(--line);border-radius:10px;padding:10px;
  font:800 1rem var(--font-sans);text-align:center;background:#fff;color:var(--ink)}
.plassume{color:var(--terra);font-weight:700}
/* Planner: the materials list — the only monetised block on the results page */
.plshop{border:2px solid var(--ey-ink);border-radius:14px;background:var(--ey-paper);
  box-shadow:3px 3px 0 var(--ey-line);padding:18px 20px;margin:18px 0 0}
.plshop h3{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--ink);margin:0 0 8px}
.shopel{border-top:1px dashed var(--ey-line);padding-top:12px;margin-top:12px}
.shopel h4{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--green-dark);margin:0 0 6px}
.shopel .sb{color:var(--terra);font-weight:800;font-variant-numeric:tabular-nums}
.shopel ul{margin:0;padding-left:20px}
.shopel li{margin:0 0 8px;line-height:1.5;font-size:.95rem}
.shopel .sn{color:var(--muted)}
.shopel a{font-weight:800;color:var(--terra);white-space:nowrap}

/* The materials decision: one quiet line until they want to change it, because
   the default is right for most jobs and three chips shown open to everyone
   manufactures a decision nobody needed to make. */
.plmat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 2px 0;
  font-size:.94rem;color:var(--ey-ink-soft,#4A473D)}
.plmat span{font-weight:600}
.plmatq{margin-top:14px}
.plmatq .plsub{margin:2px 0 10px;font-size:.9rem}

/* Keeping the list — a link back to us, never our merchant links. */
.pltakeaway{margin:20px 0 0;padding:16px 18px;border:2px solid var(--ey-ink,#2B2A24);
  border-radius:12px;background:#FFFDF6}
.pltakeaway h4{margin:0 0 10px;font-family:Archivo,system-ui,sans-serif;font-weight:800}
.pltakeaway .plsub{margin:10px 0 0;font-size:.88rem;line-height:1.5}
.pltakeaway .sel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;
  word-break:break-all;user-select:all;color:var(--ey-ink-soft,#4A473D)}
.plask-them ul{margin:12px 0 0;padding-left:20px}
.plask-them li{margin:0 0 8px;line-height:1.5}

/* The materials/labour split, per item. A single total says what a job costs
   and nothing about why — which is no help when two quotes differ by £900. */
.plsplit{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:6px;font-size:.83rem;
  color:var(--ey-pencil,#6E6759);line-height:1.5}
.plsplit i{font-style:normal;font-weight:700;color:var(--ey-ink,#2B2A24);margin-right:5px}
.plsplit em{font-style:normal;opacity:.75}

/* Product picker — a list to choose from, never a basket we filled. Nothing is
   pre-selected, and tapping a chosen one again takes it off. */
.plpick{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--ey-line,#E3DAC3)}
.plpick h5{margin:0 0 4px;font-family:Archivo,system-ui,sans-serif;font-size:1rem;font-weight:800}
.plpick .sn{display:block;margin:0 0 12px;font-size:.86rem;color:var(--ey-pencil,#6E6759)}
.pkg{margin:0 0 14px}
.pkg>b{display:block;margin:0 0 7px;font-size:.94rem}
.pkopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:8px}
.pkopt{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  padding:10px 12px;border:1.5px solid var(--ey-line,#E3DAC3);border-radius:11px;
  background:#fff;font:inherit;color:inherit}
.pkopt:hover{border-color:var(--ey-ink,#2B2A24)}
.pkopt.on{border-color:var(--ey-hivis,#F07818);border-width:2px;background:#FFF6ED}
.pkopt .pt{font-family:'Architects Daughter',cursive;font-size:.82rem;color:var(--ey-hivis-deep,#D9660A)}
.pkopt .pw{font-weight:700;font-size:.89rem;line-height:1.35}
.pkopt .pp{font-size:.8rem;color:var(--ey-pencil,#6E6759);line-height:1.4}
.pkopt .pc{margin-top:4px;font-size:.8rem;font-weight:800;color:var(--ey-hivis-deep,#D9660A)}
.pkopt.on .pc{color:var(--green-dark,#3E5528)}

/* The consolidated list — the "one place" the whole thing is for. */
.plchosen{margin:20px 0 0;padding:16px 18px;border:2px solid var(--ey-hivis,#F07818);
  border-radius:12px;background:#FFF9F2}
.plchosen h4{margin:0 0 6px;font-family:Archivo,system-ui,sans-serif;font-weight:800}
.plchosen ol{margin:12px 0 0;padding-left:22px}
.plchosen li{margin:0 0 12px;line-height:1.5}
.plchosen li .sn{display:block;font-size:.82rem;color:var(--ey-pencil,#6E6759)}
.pkall{display:block;margin:-4px 0 7px;font-family:'Architects Daughter',cursive;
  font-size:.84rem;color:var(--ey-pencil,#6E6759)}

/* "What now?" — the step after the finished brief. Three routes at equal weight:
   two unpaid, one paid in the middle, none louder than the others. */
.plwhatnext{margin:22px 0 0;padding-top:16px;border-top:2px solid var(--ey-line,#E3DAC3)}
.plwhatnext h3{margin:0 0 4px;font-family:Archivo,system-ui,sans-serif;font-weight:800}
.wngrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:12px}
.wncard{display:flex;flex-direction:column;border:1.5px solid var(--ey-line,#E3DAC3);
  border-radius:12px;padding:14px 15px;background:var(--ey-card,#FFFDF4)}
.wncard b{font-size:1rem}
.wncard span{flex:1;margin:7px 0 12px;font-size:.9rem;line-height:1.5;color:var(--ey-pencil,#4A473D)}
.wncard .pllink{align-self:flex-start}
.wngo{display:inline-block;text-align:center;background:var(--ey-hivis,#F07818);color:var(--ey-ink,#2B2A24);
  font-weight:800;padding:11px 14px;border-radius:10px;text-decoration:none}
.wngo.alt{background:transparent;color:var(--link,#8F4630);border:1.5px solid currentColor;font-weight:700}

/* How-the-site-works strip: three short steps in plain words, right under the
   mission. Feedback said the site never says what it is or how to use it. */
.howto{display:flex;flex-direction:column;gap:7px;margin:14px 2px 4px;padding:14px 16px;
  background:var(--ey-card);border:1.5px dashed var(--ey-line);border-radius:12px;
  font-size:.97rem;line-height:1.45}
.howto b{font-family:var(--font-note);color:var(--ey-hivis-deep);margin-right:6px}

/* Homepage nudges for the undecided: one line, one link, no card weight. */
.hubnudge{margin:12px 4px;padding:12px 14px;background:var(--ey-card);border-left:3px solid var(--ey-hivis);
  border-radius:0 10px 10px 0;font-size:.95rem;line-height:1.55;color:var(--ey-ink)}