/* Source Serif 4 (SIL OFL 1.1, see /assets/fonts/OFL.txt), self-hosted */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* StackSmart redesign.css v1.2.1 (16 Oct 2026). Direction B "Trade Paper".
CHANGELOG
v1.2.1: 44px tap targets, row sizes and the 15-16px price sizes now apply only at max-width 600px (desktop minimum 14px) (stops /tools and other 1280px pages getting taller);
signup is now email plus ONE optional, unticked "Also send me the weekly digest" checkbox (.signup-kit); the no-checkbox variant is removed.
v1.2 (mobile-first pass, 390px): 17px body and a tighter heading scale; 44px minimum tap targets everywhere (nav, crumbs, lists, chips,
Source links, FAQ summaries, buttons); compact single-column home cards (blurb clamped to 2 lines, pick and price on one row);
business-type accordion on mobile (details.biz-d) plus the 5th tile "Salons & beauty"; one-row nav at 360px; sticky bottom CTA (.sticky-cta);
email-only signup variant (.signup-lite); NEW use-case v2 "do this today" template (.answer, .steps-v2, .prompt-box + copy button,
.video-slot facade, stacked .compare, .uc-v2 layout). Amber #f59e0b audit: only used as a fill behind ink (focus ring, skip link) at 7.9:1, never as text. Added a --focus-never-text note.
v1.1 (vup6 QA): one-row header at <=400px (logo mark only + short digest label option); .picks goes full width when there is no free pick;
.price-line becomes block (respects ), the price is regular weight; ul.rel arrow no longer wraps; heading tracking for static 600/700 Source Serif 4;
new: .trustbar refinements, .uc-price (home card prices), .bt-icon (business-type icons), .tools-filter + .az + .az-group (A-Z /tools), .guides-group;
FAQ: first item open style; the details marker is replaced with +/- for scanning.
v1.0 (16 Oct 2026): final Trade Paper stylesheet (CEO approved).
*/
/* StackSmart redesign.css: direction B "Trade Paper" (final, approved 16 Oct 2026). Drop-in replacement for dist/style.css (the CSS string in build.py).
Works with the current class names (w, card, tag, btn, logo, grid, chips, toggle, hp, spon, top, hero, crumbs, faq, rel, em, muted)
and adds new ones (see specs.md). */
:root{
--paper:#f6f2e9;--paper-2:#efe8d8;--card:#fffdf7;--ink:#1c1c1a;--ink-2:#4a4a45;--rule:#1c1c1a;--rule-soft:#d8cfbb;
--green:#14532d;--green-tint:#e3ecdf;--accent:#b23a0a;--accent-tint:#fbe7d6;--accent-ink:#7a2a08;--focus:#f59e0b;
--disp:"Source Serif 4",Georgia,"Times New Roman",serif;
--body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
--r:4px;--max:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper)}
img,svg{max-width:100%}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 6px var(--ink);border-radius:2px}
.w{max-width:var(--max);margin:0 auto;padding:0 var(--s5)}
/* Skip link: first element in : Skip to content */
.skip{position:absolute;left:-9999px;top:var(--s3);z-index:100;background:var(--focus);color:var(--ink);padding:var(--s2) var(--s4);font-weight:700}
.skip:focus{left:var(--s3)}
/* Type */
h1,h2,h3,.h3{font-family:var(--disp);line-height:1.15;color:var(--ink);font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.4rem);margin:0 0 var(--s4);max-width:22ch}
h2{font-size:1.75rem;margin:var(--s7) 0 var(--s4);border-top:2px solid var(--rule);padding-top:var(--s3)}
h3,h2.h3{font-size:1.2rem;margin:var(--s2) 0}
.card h2,.card h3{border:0;padding:0;margin-top:var(--s2)}
.muted{color:var(--ink-2);font-size:.92rem}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s2)}
.lede{font-size:1.2rem;max-width:60ch}
/* Header and nav (stays on one line) */
header{background:var(--paper);border-bottom:3px double var(--rule)}
header .w{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px}
.logo{display:inline-flex;align-items:center;gap:0;font-family:var(--disp);font-weight:700;font-size:1.5rem;color:var(--green);text-decoration:none;white-space:nowrap}
.logo span{color:inherit}
.logo::before{content:"";width:28px;height:28px;flex:none;margin-right:var(--s2);background:url(assets/logo-mark.svg) center/contain no-repeat}
header nav{display:flex;align-items:center;gap:var(--s5);white-space:nowrap}
header nav a{color:var(--ink);text-decoration:none;font-weight:600;margin:0}
header nav a:hover{text-decoration:underline}
header nav a[href$="#digest"],header nav .btn-nav{background:var(--green);color:#fff;padding:var(--s2) var(--s4);border-radius:var(--r)}
header nav a[href$="#digest"]:hover,header nav .btn-nav:hover{background:#0f3f22;text-decoration:none}
/* Trust bar */
.trustbar{border-bottom:1px solid var(--rule);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.trustbar .w{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);padding-top:var(--s2);padding-bottom:var(--s2)}
.trustbar span{display:inline-flex;align-items:center;gap:6px}.trustbar .i{color:var(--green)}
/* Hero (no gradient: a plain editorial intro) */
.hero{background:var(--paper);color:var(--ink);padding:var(--s7) 0;border-bottom:1px solid var(--rule)}
.hero h1{color:var(--ink)}.hero p{font-size:1.2rem;max-width:60ch;opacity:1}
/* Buttons */
.btn{display:inline-block;background:var(--green);color:#fff;padding:var(--s3) var(--s5);border:2px solid var(--green);border-radius:var(--r);font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:#0f3f22}
.btn[style*="background:#fff"],.btn-secondary{background:transparent!important;color:var(--green)!important}
.btn:disabled{opacity:.6;cursor:progress}
/* Sections and grids */
section{padding:var(--s6) 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s4)}
/* Cards: hover and keyboard focus look the same */
.card{display:block;background:var(--card);border:1px solid var(--rule-soft);border-top:3px solid var(--rule);border-radius:0;padding:var(--s5);color:inherit;text-decoration:none}
a.card:hover,a.card:focus-visible,.card:focus-within{border-color:var(--green);background:#fff}
a.card:hover h3,a.card:focus-visible h3{color:var(--green);text-decoration:underline}
.em{display:none} /* hide emoji icons; use .i SVG icons instead */
.i{width:24px;height:24px;color:var(--green);flex:none}
.tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:2px;background:var(--green-tint);color:var(--green)}
.tag.ex{background:var(--accent-tint);color:var(--accent-ink)}
.top{border:2px solid var(--green);border-top-width:6px;background:#fff}
.spon{background:var(--paper-2);border:1px dashed var(--ink-2);border-top:1px dashed var(--ink-2)}
.spon .tag{background:var(--ink);color:var(--paper)}
.crumbs{font-size:.9rem;color:var(--ink-2)}.crumbs a{color:var(--ink-2)}
.rel{margin-top:var(--s6)}
.faq details{border-top:1px solid var(--rule-soft);padding:var(--s3) 0}.faq summary{font-weight:700;cursor:pointer}
pre{white-space:pre-wrap;background:var(--ink);color:#f3efe6;padding:var(--s5);border-radius:var(--r);font-size:.92rem;overflow-x:auto}
ol li{margin-bottom:var(--s2)}
/* Forms */
form label{display:block;font-weight:700}
form input[type=email],form input[type=text]{width:100%;padding:var(--s3);font:inherit;border:2px solid var(--ink);border-radius:0;background:#fff;margin:6px 0 var(--s4)}
fieldset{border:0;margin:0;padding:0}legend{font-weight:700;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 var(--s4)}
.chips label{font-weight:500;background:#fff;border:1px solid var(--ink-2);border-radius:2px;padding:6px 12px;cursor:pointer;font-size:.9rem}
.chips label:has(input:checked){background:var(--green-tint);border-color:var(--green)}
.chips label:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.toggle{display:none;background:transparent;color:var(--green);border:1px solid var(--green);border-radius:2px;padding:6px 14px;font:inherit;font-weight:700;cursor:pointer;margin:-8px 0 var(--s4)}
.consent{display:flex!important;gap:var(--s3);font-weight:400!important;margin:0 0 var(--s4)}
.consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--green)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#msg{font-weight:600}
#digest{background:var(--green)!important;color:#fff}
#digest h2{color:#fff;border-color:#fff}#digest a{color:#fff}
#digest .btn{background:var(--paper);color:var(--green);border-color:var(--paper)}
#digest .chips label{color:var(--ink)}#digest .muted{color:#e3ecdf}
#digest .toggle{color:#fff;border-color:#fff}
#digest input[type=email],#digest input[type=text]{border-color:#fff}
/* New components (see specs.md) */
.bts,.ucs,.tools-list{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.bts{grid-template-columns:repeat(4,1fr)}.ucs{grid-template-columns:repeat(4,1fr)}
.bt,.uc{display:flex;gap:var(--s3);padding:var(--s4);height:100%;color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule-soft)}
.uc{flex-direction:column;gap:6px}.uc b{font-family:var(--disp);font-size:1.15rem}
.bt small{display:block;color:var(--ink-2);font-size:.9rem}
.bt:hover,.bt:focus-visible,.uc:hover,.uc:focus-visible{background:var(--card)}
.bt:hover b,.bt:focus-visible b,.uc:hover b,.uc:focus-visible b{color:var(--green);text-decoration:underline}
.price{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:.9rem}
.price-line{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;font-size:.92rem}
.price-line .gbp{font-weight:700;font-variant-numeric:tabular-nums}
.checked{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;color:var(--green);font-weight:700}
.checked.stale{color:var(--accent-ink)}
.uk-note{font-size:.88rem;background:var(--green-tint);border-left:4px solid var(--green);padding:var(--s2) var(--s3);margin:var(--s3) 0}
.picks{display:grid;grid-template-columns:2fr 1fr;gap:var(--s4)}
.free-pick{border-top:3px solid var(--accent)}.free-pick .tag{background:var(--accent-tint);color:var(--accent-ink)}
.compare{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff}
.compare caption{text-align:left;font-weight:700;padding-bottom:var(--s2)}
.compare th,.compare td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--rule-soft);vertical-align:top}
.compare thead th{border-bottom:2px solid var(--rule);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.compare td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.table-scroll{overflow-x:auto}
.kit-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.notice{background:#fff;border:2px solid var(--green);padding:var(--s5)}
.steps{counter-reset:s;list-style:none;padding:0}.steps li{counter-increment:s;padding-left:44px;position:relative;margin-bottom:var(--s4)}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;display:grid;place-items:center}
.prose{max-width:68ch}.prose h2{font-size:1.4rem}
.az{display:flex;flex-wrap:wrap;gap:var(--s2);font-weight:700;margin-bottom:var(--s4)}
.tool-row{display:grid;grid-template-columns:1.2fr 2fr 1fr;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--rule-soft)}
/* Footer */
footer{background:var(--paper-2);color:var(--ink);border-top:3px double var(--rule);padding:var(--s6) 0;font-size:.92rem}
footer a{color:var(--green)}
/* ===== Mappings to the current build.py / build_extra.py markup (vup5 / dist) ===== */
/* Hero: the second button is written with an inline style="background:#fff" and becomes the secondary button */
.hero .btn+.btn,.hero .btn[style]{margin-left:var(--s2)}
.hero p strong{color:var(--accent)}
/* Breadcrumbs: nav.crumbs[aria-label=Breadcrumb] with › separators */
nav.crumbs{display:block;white-space:normal;font-size:.88rem;color:var(--ink-2);margin:0 0 var(--s4);padding-bottom:var(--s2);border-bottom:1px solid var(--rule-soft)}
nav.crumbs a{color:var(--ink-2);font-weight:400;margin:0}nav.crumbs a:hover{color:var(--green)}
nav.crumbs [aria-current]{color:var(--ink);font-weight:600}
/* "Start with your type of business": #by-business .grid > .card > h3 + ul.biz */
#by-business .grid{grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule)}
#by-business .card{border:0;border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule);background:transparent;padding:var(--s4) var(--s5) var(--s4) 0}
#by-business .card+.card{padding-left:var(--s5)}
#by-business .card h3{font-size:1.3rem;color:var(--green);margin:0 0 var(--s2)}
ul.biz{list-style:none;padding:0;margin:0}ul.biz li{border-top:1px solid var(--rule-soft)}
ul.biz a{display:block;padding:6px 0;color:var(--ink);text-decoration:none}ul.biz a:hover,ul.biz a:focus-visible{color:var(--green);text-decoration:underline}
/* Prices: "Prices last checked: ..." is a span.muted inside the price paragraph; the Source link is a.muted with ↗ */
.card p.muted .muted,.card p .muted:not(a){display:inline-block;margin-top:var(--s1);font-size:.8rem;font-weight:700;color:var(--green)}
a.muted[href^="http"]{display:inline-block;font-size:.8rem;font-weight:700;color:var(--green);border:1px solid var(--green);padding:0 6px;border-radius:2px;text-decoration:none;margin-left:var(--s1)}
a.muted[href^="http"]:hover{background:var(--green-tint)}
/* Use-case page */
.card.top h2{border:0;padding:0}.card.top h2 a{color:var(--ink)}
section.worked{background:var(--card);border-left:4px solid var(--accent);padding:var(--s4) var(--s5);margin:var(--s6) 0}
section.worked h2{border:0;padding:0;margin-top:0;font-size:1.35rem}
section.faq details{border-top:1px solid var(--rule-soft);padding:var(--s3) 0}
section.faq details:last-child{border-bottom:1px solid var(--rule-soft)}
section.faq summary{font-family:var(--disp);font-weight:700;font-size:1.08rem;cursor:pointer}
section.faq details p{margin:var(--s2) 0 0;max-width:70ch}
ul.rel{list-style:none;padding:0;margin:0 0 var(--s5);display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));border-top:1px solid var(--rule)}
ul.rel li{border-bottom:1px solid var(--rule-soft)}
ul.rel a{display:block;padding:var(--s3) var(--s2) var(--s3) 0;font-weight:600;color:var(--ink);text-decoration:none}
ul.rel a::after{content:" →";color:var(--green)}ul.rel a:hover,ul.rel a:focus-visible{color:var(--green);text-decoration:underline}
/* Tables from markdown (starter kit, guides): div.tw > table */
.tw{overflow-x:auto;margin:var(--s4) 0}.tw table{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}
.tw th,.tw td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule-soft);vertical-align:top}
.tw thead th{border-bottom:2px solid var(--rule);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.kit{max-width:820px}
/* Sponsor packages: the price paragraph has an inline purple colour */
.card p[style*="#4f46e5"]{color:var(--green)!important;font-family:var(--disp)}
/* Digest section has inline background:#fff; the band is green (overridden in #digest above) */
#digest .consent a{color:#fff}#digest #msg{color:#fff}
#digest .w{max-width:760px}
@media (max-width:600px){
#by-business .grid{grid-template-columns:1fr}#by-business .card,#by-business .card+.card{padding:var(--s3) 0;border-right:0}
.hero .btn{display:block;text-align:center;margin:0 0 var(--s2)!important}
ul.rel{grid-template-columns:1fr}
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Mobile */
@media (max-width:600px){
body{font-size:16px}
.w{padding:0 var(--s4)}
header .w{flex-wrap:nowrap;min-height:56px;gap:var(--s3);height:auto;padding-top:0;padding-bottom:0}
.logo{font-size:1.2rem}.logo::before{width:22px;height:22px}
header nav{gap:var(--s3);display:flex;flex-wrap:nowrap}
header nav a{font-size:.92rem}
header nav a:not([href$="#digest"]):not(.btn-nav){display:none}
header nav a:not([href$="#digest"]):not(.btn-nav):first-child{display:inline}
header nav a[href$="#digest"],header nav .btn-nav{padding:6px 12px}
.hero{padding:var(--s6) 0}
h2{font-size:1.4rem;margin-top:var(--s6)}
.grid,.ucs,.picks,.kit-grid{grid-template-columns:1fr}
.bts{grid-template-columns:1fr 1fr}.bt{flex-direction:column;padding:var(--s3)}
.trustbar .w{flex-direction:column}
.toggle{display:inline-block}.chips.collapsed label:nth-child(n+9){display:none}
.tool-row{grid-template-columns:1fr}
.compare thead{position:absolute;left:-9999px}
.compare tr{display:block;border-bottom:2px solid var(--rule);padding:var(--s2) 0}
.compare td{display:flex;justify-content:space-between;gap:var(--s3);border:0;padding:var(--s1) 0}
.compare td::before{content:attr(data-label);font-weight:700;color:var(--ink-2)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ======================= v1.1 additions (vup6 QA) ======================= */
/* Headings: the font is static 600/700 with no opsz axis, so tighten large sizes slightly */
h1{letter-spacing:-.015em;line-height:1.1;font-weight:700}
h2{letter-spacing:-.008em;font-weight:700}
h3,.h3,section.faq summary,.uc b{font-weight:600;letter-spacing:0}
.hero h1{max-width:20ch}
@media (max-width:600px){h1{font-size:2rem;line-height:1.12}.hero h1{font-size:2.1rem}}
/* Header: always one row */
header .w{flex-wrap:nowrap}
header nav{flex-wrap:nowrap;min-width:0}
/* Recommended markup (short label): Get the free digest
At <=400px "Get the free " is visually hidden (it's still read by screen readers), so the visible text is "Digest" and the wordmark stays.
Fallback with today's markup: at <=400px the logo shows the mark only (the text remains as the accessible name). */
@media (max-width:400px){
header .w{gap:var(--s2);padding:0 var(--s3)}
header nav{gap:var(--s3)}
header nav a{font-size:.9rem}
header nav a[href$="#digest"]{padding:6px 10px}
.nav-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
header nav a[href$="#digest"]:has(.nav-long){text-transform:capitalize}
header:not(:has(.nav-long)) .logo{font-size:0}
header:not(:has(.nav-long)) .logo::before{width:28px;height:28px;margin-right:0}
header:has(.nav-long) .logo{font-size:1.1rem}
header:has(.nav-long) .logo::before{width:20px;height:20px;margin-right:6px}
}
/* Use-case picks: full width when there is no free pick, so there is no empty column */
.picks:not(:has(.free-pick)){grid-template-columns:minmax(0,760px)}
.picks .card.top h2 a{font-size:1.5rem}
/* Price line: block layout so works; price regular weight; date and source on one line */
.price-line{display:block;line-height:1.5}
.price-line .gbp{font-weight:400;color:var(--ink)}
.price-line .checked{margin-top:6px}
.card.top .price-line .gbp{font-weight:600}
/* Related links: arrow stays with the text */
ul.rel a::after{content:"\a0→";white-space:nowrap}
/* FAQ: closed by default (CTO), first item open recommended: on the first item only */
section.faq summary{list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
section.faq summary::-webkit-details-marker{display:none}
section.faq summary::after{content:"+";font-family:var(--body);font-weight:700;color:var(--green);font-size:1.3rem;line-height:1}
section.faq details[open] summary::after{content:"−"}
/* Trust bar (markup in specs.md 1.1) */
.trustbar{background:var(--paper-2)}
.trustbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5)}
.trustbar li{display:inline-flex;align-items:center;gap:6px}
.trustbar a{color:inherit}
@media (max-width:600px){.trustbar .w{flex-direction:row}.trustbar ul{gap:2px var(--s3)}.trustbar{font-size:.7rem;letter-spacing:.03em}.trustbar .i{width:14px;height:14px}}
/* Homepage use-case card: price under the pick */
.uc-price{display:block;margin-top:6px;font-size:.88rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.uc-price b{color:var(--ink);font-weight:600}
/* Business-type icons in #by-business h3:
Trades
*/
#by-business h3{display:flex;align-items:center;gap:var(--s2)}
.bt-icon{width:26px;height:26px;color:var(--accent)}
/* /tools: filter and A-Z */
.tools-filter{display:flex;flex-direction:column;gap:6px;margin:var(--s4) 0;max-width:480px}
.tools-filter label{font-weight:700}
.tools-filter .field{position:relative}
.tools-filter .field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.tools-filter input[type=search]{width:100%;padding:12px 12px 12px 42px;font:inherit;border:2px solid var(--ink);background:#fff;border-radius:0}
.tools-filter .count{font-size:.88rem;color:var(--ink-2)}
nav.az{display:flex;flex-wrap:wrap;gap:2px;margin:var(--s4) 0;white-space:normal}
nav.az a,nav.az span{display:inline-grid;place-items:center;min-width:36px;height:36px;font-weight:700;text-decoration:none;border:1px solid var(--rule-soft);background:var(--card);color:var(--green)}
nav.az span{color:#8a8578;background:transparent}
nav.az a:hover,nav.az a:focus-visible{background:var(--green);color:#fff}
.az-group{margin-top:var(--s5)}
.az-group h2{font-size:1.5rem;margin-top:var(--s5)}
.az-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.az-list li{display:grid;grid-template-columns:minmax(140px,1fr) 2fr;gap:var(--s2) var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--rule-soft)}
.az-list .tname{font-family:var(--disp);font-weight:600;font-size:1.1rem}
.az-list .tjobs{font-size:.88rem;color:var(--ink-2)}
.az-list .price-line{grid-column:2}
[hidden]{display:none!important}
@media (max-width:600px){.az-list li{grid-template-columns:1fr}.az-list .price-line{grid-column:1}nav.az a,nav.az span{min-width:32px;height:32px}}
/* /guides grouped by business type */
.guides-group{margin-top:var(--s5)}
.guides-group h2{display:flex;align-items:center;gap:var(--s2)}
.guides-group h2 .bt-icon{width:28px;height:28px}
/* ======================= v1.2 mobile-first pass ======================= */
/* --focus (#f59e0b) is ONLY a fill or outline behind ink (#1c1c1a, 7.9:1). Never use it as text on paper (#f6f2e9, about 2.0:1, fails). */
:root{--tap:44px;--sticky-h:68px}
body{font-size:17px;line-height:1.6}
p,li,dd{max-width:68ch}
.card p,.uc p{max-width:none}
/* Heading scale: tight and consistent (mobile first, then desktop) */
h1{font-size:2rem;line-height:1.12}
h2{font-size:1.45rem;line-height:1.2}
h3,.h3{font-size:1.15rem;line-height:1.25}
@media (min-width:601px){h1{font-size:clamp(2.4rem,4vw,3.2rem)}h2{font-size:1.75rem}h3,.h3{font-size:1.2rem}}
.lede{font-size:1.1rem;line-height:1.5}
/* Nav and buttons: inline-block, not flex (flex collapses the space in "Get the free digest") */
header nav a{display:inline-block}
.btn,button.btn,.btn-secondary{display:inline-block;text-align:center}
/* Tap targets: 44px minimum with at least 8px spacing. MOBILE ONLY (v1.2.1): desktop keeps its v1.1 sizes so 1280px heights do not grow */
@media (max-width:600px){
header .w{min-height:56px}
header nav a{display:inline-block;min-height:var(--tap);padding-top:10px;padding-bottom:10px;line-height:24px} /* inline-block, not flex: flex would collapse the space in "Get the free digest" */
header nav a[href$="#digest"]{padding:10px 14px}
.btn,button.btn,.btn-secondary{min-height:48px;display:inline-block;text-align:center;padding:12px var(--s5);line-height:24px}
nav.crumbs{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;margin-bottom:var(--s3)}
nav.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 2px}
ul.biz a,ul.rel a{min-height:var(--tap);display:flex;align-items:center;padding:10px 0}
ul.rel a::after{margin-left:auto;padding-left:var(--s2)}
.chips{gap:var(--s2)}
.chips label{min-height:var(--tap);display:inline-flex;align-items:center;gap:8px;padding:0 14px}
.chips input{width:20px;height:20px}
a.muted[href^="http"],.price-line a.muted{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;margin:4px 0 0}
section.faq summary{min-height:var(--tap);align-items:center;padding:10px 0}
.toggle{min-height:var(--tap)}
.consent{min-height:var(--tap);align-items:flex-start}
.consent input{width:24px;height:24px}
form input[type=email],form input[type=text],form input[type=search]{min-height:48px;font-size:17px} /* 17px: no iOS zoom */
footer a{display:inline-block;padding:10px 0}
@media (max-width:600px){header nav a:not([href$="#digest"]):not(.btn-nav):first-child{display:inline-block}}
}
/* Header: one row at 360px. The logo shows the mark only at 360px and below even with .nav-long, to make room for "Find a tool" and "Digest" */
@media (max-width:374px){
header .logo{font-size:0!important}header .logo span{font-size:0!important}header .logo::before{width:28px!important;height:28px!important;margin-right:0!important}
}
/* Home use-case cards: compact single column on mobile */
@media (max-width:600px){
#directory .grid{grid-template-columns:1fr;gap:var(--s2)}
#directory a.card{padding:14px 16px;border-top-width:2px;display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s3)}
#directory a.card h3{flex:1 0 100%;margin:0;font-size:1.1rem}
#directory a.card p.muted{flex:1 0 100%;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.95rem}
#directory a.card .tag{justify-self:start;white-space:nowrap}
#directory a.card .uc-price{margin:0;font-size:.9rem}
#directory a.card .em{display:none}
.hero{padding:var(--s5) 0 var(--s6)}
.hero p{font-size:1.05rem}
section{padding:var(--s5) 0}
}
/* Business types: 5 tiles; accordion on mobile.
Markup: Trades
…
A small script removes `open` at <=600px so the 5 types fit on one screen, and leaves them open on desktop. */
#by-business .grid{grid-template-columns:repeat(5,1fr)}
details.biz-d summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s2);font-family:var(--disp);font-weight:600;font-size:1.25rem;color:var(--green);min-height:var(--tap)}
details.biz-d summary::-webkit-details-marker{display:none}
@media (min-width:601px){details.biz-d summary{pointer-events:none}}
@media (max-width:1000px) and (min-width:601px){#by-business .grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){
#by-business .grid{grid-template-columns:1fr;border-top:1px solid var(--rule)}
#by-business .card,#by-business .card+.card{padding:0;border-right:0}
details.biz-d summary{padding:8px 0}
details.biz-d summary::after{content:"+";margin-left:auto;font-family:var(--body);font-size:1.4rem}
details.biz-d[open] summary::after{content:"−"}
details.biz-d ul.biz{padding-bottom:var(--s3)}
}
/* Sticky bottom CTA (mobile only). One primary action per page. Hidden when the in-page target (#digest or .answer) is visible.