/* Honestfix UI system (3 Oct 2026, mobile cleanup + micro-interactions).
   Loaded last in <head> on every Layout page (src/components/Layout.tsx). The page stylesheets (hc.css, utility.css,
   one-page.css, data.css, home.css ...) load later inside <body>, so phone rules here are scoped with #main (the
   .page-body id) to win over them without !important.
   - <html class="hf-frozen"> marks the listing and vendor pages (UI frozen as approved, Kenneth 2 Oct): they get
     off-scale type sizes moved onto the scale and interaction feel only. Never a layout or element change.
   - The home hero (.hx) is never touched: no rule here selects inside it except the search box focus glow.
   - Everything that moves is off under prefers-reduced-motion (design.css also stops every transition and animation). */

:root{
  /* Type scale (phone). micro is for upper-case kickers only; display is for data figures only. */
  --fs-micro:12px;--fs-meta:13px;--fs-small:15px;--fs-body:16px;--fs-lead:18px;--fs-title:18px;--fs-h2:22px;--fs-h1:28px;--fs-display:32px;
  --lh-tight:1.15;--lh-heading:1.25;--lh-title:1.3;--lh-ui:1.35;--lh-meta:1.5;--lh-small:1.5;--lh-body:1.6;
  --fw-heading:650;--fw-strong:650;--fw-micro:700;
  --ls-h1:-.025em;--ls-h2:-.02em;--ls-title:-.01em;--ls-micro:.1em;
  /* Spacing scale */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-12:48px;
  /* Layout rhythm (desktop values unchanged; phones below) */
  --gutter:20px;--card-pad:20px;--section-y:40px;--section-y-sm:28px;--stack:16px;
  /* Shape */
  --r-sm:8px;--r-control:10px;--r-card:12px;--r-panel:16px;--r-pill:999px;
  /* Controls */
  --tap:44px;--btn-h:48px;--field-h:48px;
  /* Motion */
  --dur-fast:120ms;--dur:180ms;--dur-slow:220ms;--ease-out:cubic-bezier(.22,.8,.24,1);
  --shadow-rest:0 1px 2px #102e4f0a;--shadow-lift:0 12px 28px -16px #102e4f66,0 2px 6px -2px #102e4f1f;
  --ring-soft:0 0 0 4px #00509d24;--ring-warm:0 0 0 4px #fdc50059;
}
@media(max-width:400px){:root{--gutter:16px;--card-pad:16px}}
/* Desktop type and rhythm tokens (4 Oct 2026, visual QA): same roles as the phone scale, larger steps for titles. */
@media(min-width:701px){:root{--fs-lead:18px;--fs-title:20px;--fs-h2:28px;--fs-h1:44px;--fs-display:44px;--section-y:64px;--section-y-sm:48px}}
:root:not(.hf-frozen){--muted:#58697a;--field-border:#7a8a9a;--eyebrow:#58697a;--card-border:#dfe5eb}

/* ============================================================================================================
   1. PHONE LAYOUT: one gutter, one section rhythm (non-frozen pages)
   ============================================================================================================ */
@media(max-width:700px){
  /* Frozen pages keep their 20px gutter: at 16px the vendor contact row reflows (WhatsApp, Call and Visit website
     fall onto one line), which would be a layout change on an approved page. */
  :root:not(.hf-frozen) #main :is(.wrap,.hc-wrap,.hc-article,.hc-filter,.container,.fb-bar),
  :root:not(.hf-frozen) .header .wrap,:root:not(.hf-frozen) #mobile-nav,:root:not(.hf-frozen) .consent-banner{padding-left:var(--gutter);padding-right:var(--gutter)}
  :root:not(.hf-frozen) .hfc-float{right:var(--gutter)}
  :root:not(.hf-frozen) #main .msec .in{padding-left:var(--gutter);padding-right:var(--gutter)}
  :root:not(.hf-frozen) #main .msec .note{margin-left:0;margin-right:0}
  :root:not(.hf-frozen) dialog.hf-drawer{width:calc(100vw - var(--gutter) * 2)}
  @media(max-width:520px){:root:not(.hf-frozen) .hfc-float{left:var(--gutter)}}

  /* Section rhythm: title bands 28/28, content sections 40/40, articles 24 top and 48 bottom */
  :root:not(.hf-frozen) #main .page-hero{padding-top:var(--section-y-sm);padding-bottom:var(--section-y-sm)}
  :root:not(.hf-frozen) #main .utility-hero{padding-top:var(--section-y-sm);padding-bottom:var(--section-y-sm)}
  :root:not(.hf-frozen) #main .hc-article{padding-top:24px;padding-bottom:var(--sp-12)}
  :root:not(.hf-frozen) #main :is(.hc-section,.hc-block,.search-lists,.msec,.hc-banner,section.wrap.section){padding-top:var(--section-y);padding-bottom:var(--section-y)}
  :root:not(.hf-frozen) #main :is(.hc-store-hero,.hc-centre,.hc-about-cols){padding-top:32px}
  :root:not(.hf-frozen) #main :is(.hf-tools-wrap,.hc-tool-wrap){padding-top:24px;padding-bottom:var(--sp-12)}
  :root:not(.hf-frozen) #main .claim-flow{padding-top:24px;padding-bottom:var(--sp-12)}
  :root:not(.hf-frozen) #main .hc-featured-wrap{padding-top:24px}
  :root:not(.hf-frozen) #main .hc-filter{padding-top:24px}
  :root:not(.hf-frozen) #main .hc-topic{padding-top:var(--section-y)}
  :root:not(.hf-frozen) #main .hc-photo-hero{margin-bottom:24px}

}

/* Sections 2 and 3 apply at every width (4 Oct 2026, visual QA): one type scale and one control set; only the token
   values differ between phone and desktop (see section 0b). */
  /* ==========================================================================================================
     2. PHONE TYPE: one scale by role (non-frozen pages)
     ========================================================================================================== */
  /* Page titles */
  :root:not(.hf-frozen) #main h1:not(.hx h1){font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-h1);font-weight:var(--fw-heading);text-wrap:balance}
  /* Section headings */
  :root:not(.hf-frozen) #main h2{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--ls-h2);font-weight:var(--fw-heading);text-wrap:balance}
  /* Sub-section and card titles */
  :root:not(.hf-frozen) #main h3,
  :root:not(.hf-frozen) #main :is(.hc-card,.hc-card-text) :is(h2,h3),
  :root:not(.hf-frozen) #main :is(.hc-pipeline strong,.hf-trigger-label,.hf-strip-link,.hc-dev>summary,.legal-index-card h2,.claim-box h2,.callout h2,.hc-ai-head h3,.utility-result h3,.decal-panel h3){font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:var(--fw-heading);text-wrap:balance}
  :root:not(.hf-frozen) #main .hc-card-media h2{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--ls-h2)}
  /* List-row titles and question rows (16) */
  :root:not(.hf-frozen) #main :is(.hc-guide-list strong,.hc-row-text strong,.utility-faq summary,.hf-tool-about>summary,.hf-fig-label,.hfc-titles strong){font-size:var(--fs-body);line-height:var(--lh-ui);font-weight:var(--fw-heading)}
  /* Footer column headings */
  :root:not(.hf-frozen) #main footer h2{font-size:var(--fs-meta);line-height:var(--lh-meta);letter-spacing:0;font-weight:var(--fw-micro);text-wrap:wrap}

  /* Ledes */
  :root:not(.hf-frozen) #main :is(.hc-summary,.page-hero .lede,.hc-band .hc-lede,.utility-hero-description,.utility-hero .utility-prose,.hc-lede-copy .utility-prose,.hc-biz-hero .hc-lede-copy .utility-prose,.hc-about-intro p,.hf-tools-head .utility-prose,.hc-block>.hc-sub,.claim-flow>.field-hint){font-size:var(--fs-lead);line-height:1.5;text-wrap:pretty}
  :root:not(.hf-frozen) #main .hc-tool-head p{font-size:var(--fs-small);line-height:var(--lh-small)}

  /* Running text: 16 on 1.6 */
  :root:not(.hf-frozen) #main :is(.prose,.utility-prose,.hf-drawer-body,.hc-end,.utility-result,.hp-sec) :is(p,li),
  :root:not(.hf-frozen) #main :is(.utility-prose,.hf-drawer-body,.hc-u .utility-result){font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}
  :root:not(.hf-frozen) #main :is(.prose,.utility-prose,.hf-drawer-body) p{margin-bottom:var(--stack)}
  :root:not(.hf-frozen) #main :is(.prose,.utility-prose,.hf-drawer-body) li{margin-top:8px;margin-bottom:8px}
  :root:not(.hf-frozen) #main :is(.prose,.utility-prose,.hf-drawer-body) :is(p,li) strong{font-weight:var(--fw-strong)}
  :root:not(.hf-frozen) #main :is(.prose,.hc-body.prose) h2{margin-top:40px;margin-bottom:12px}
  :root:not(.hf-frozen) #main :is(.prose,.hc-body.prose) :is(section:first-child,.hc-sec:first-child,.hc-check) h2,
  :root:not(.hf-frozen) #main .prose h2:first-child{margin-top:0}
  :root:not(.hf-frozen) #main .hc-body.prose .hc-sec+.hc-sec h2,:root:not(.hf-frozen) #main .hc-body.prose section.hc-check+section h2{margin-top:40px}
  :root:not(.hf-frozen) #main .prose h3{margin-top:24px;margin-bottom:8px}

  /* Card and secondary text: 15 on 1.5 */
  :root:not(.hf-frozen) #main :is(.hc-card p,.hc-steps p,.hc-pipeline p,.hc-body .hc-card p,.hf-trigger-desc,.hc-guide-list span,.hc-row-text span,.legal-index-card p,.utility-results p,.hf-fig-note,.hc-ai-head p,.hc-ai-good,.hc-ai-steps li,.hc-code-q code,.claim-box p,.callout p,.hc-empty-result,.hc-chips a,.hc-sub,.hc-end li,.hc-end p){font-size:var(--fs-small);line-height:var(--lh-small);text-wrap:pretty}
  :root:not(.hf-frozen) #main :is(.hc-guide-list span,.hc-row-text span){margin-top:4px}

  /* Meta: 13 */
  :root:not(.hf-frozen) #main :is(.hc-crumbs,.hc-byline,.micro,.hc-count,.field-hint,figcaption,.related-type,.utility-note,.hf-figs-foot,.fb-legal,.footer-bottom,.hc-notice,.hf-strip-label,.hf-strip-date,.breadcrumb,.hc-twin,.hc-ai-lost,.decal-badge-file,.hc-facts ul,.hc-numbers span,.fb-field,.hfc-titles span,.utility-back,.hc-photo){font-size:var(--fs-meta);line-height:var(--lh-meta)}
  :root:not(.hf-frozen) #main .claim-flow>.field-hint{font-size:var(--fs-lead);line-height:1.5}
  :root:not(.hf-frozen) #main .claim-flow .breadcrumb a{font-size:inherit}

  /* Kickers and eyebrows: 12 upper-case */
  :root:not(.hf-frozen) #main :is(.eyebrow,.hc-kicker,.hc-u .hc-kicker,.hc-eyebrow,.hc-band .hc-eyebrow,.hc-banner .hc-eyebrow,.hc-card-media .hc-kicker,.utility-card-kicker,.hc-u .utility-result .utility-card-kicker,.hc-ai-label,.utility-decal-label,.hc-u .utility-decal-label){font-size:var(--fs-micro);line-height:1.4;font-weight:var(--fw-micro);letter-spacing:var(--ls-micro);font-family:'DM Sans',Arial,sans-serif}
  :root:not(.hf-frozen) #main .hf-deeper-label{font-size:var(--fs-micro)!important;letter-spacing:var(--ls-micro)}

  /* Figures */
  :root:not(.hf-frozen) #main .hf-fig{font-size:var(--fs-h1);letter-spacing:-.02em}
  :root:not(.hf-frozen) #main .hf-figs li:first-child .hf-fig{font-size:var(--fs-display)}
  :root:not(.hf-frozen) #main :is(.hf-strip-fig,.hc-numbers strong){font-size:var(--fs-h2);letter-spacing:-.02em}
  :root:not(.hf-frozen) #main .msec .big{font-size:var(--fs-display)}
  :root:not(.hf-frozen) #main .hf-figs-path{font-size:var(--fs-small)}
  :root:not(.hf-frozen) #main .hfc-msg{font-size:var(--fs-small)}

  /* Footer: links 15 at full tap height, one size for the cookie link, brand at the header size */
  :root:not(.hf-frozen) #main .footer-grid>div>a:not(.brand),:root:not(.hf-frozen) #main .footer-consent-link{font-size:var(--fs-small);line-height:1.3}
  :root:not(.hf-frozen) #main .footer-grid p{font-size:var(--fs-meta);line-height:var(--lh-meta)}
  :root:not(.hf-frozen) #main .footer-grid h2{margin:0 0 4px}
  :root .footer-grid .brand-lettering{font-size:24px}

  /* ==========================================================================================================
     3. PHONE CONTROLS: one button set, one field set, one chip set (non-frozen pages)
     ========================================================================================================== */
  :root:not(.hf-frozen) #main :is(.btn,.primary,.utility-button,.hc-u .utility-button,.hc-u button.utility-button[type],.hp-form button[type=submit],.tk-form button[type=submit],.hfc-send){min-height:var(--btn-h);padding:0 20px;border-radius:var(--r-control);font-size:var(--fs-small);font-weight:var(--fw-strong);line-height:1.2;gap:10px}
  :root:not(.hf-frozen) #main .primary svg{width:16px;height:16px}
  :root:not(.hf-frozen) #main :is(.hc-copy,.hf-copy-btn){min-height:var(--tap);padding:0 14px;border-radius:var(--r-control);font-size:var(--fs-meta);font-weight:var(--fw-strong)}
  :root:not(.hf-frozen) #main .fb-vote-btn{min-height:var(--tap);min-width:64px;border-radius:var(--r-control);font-size:var(--fs-small);font-weight:var(--fw-strong)}
  :root:not(.hf-frozen) #main .fb-label{font-size:var(--fs-small)}
  :root:not(.hf-frozen) #main .hf-tabs{border-radius:var(--r-card)}
  :root:not(.hf-frozen) #main .hf-tabs a{min-height:var(--tap);border-radius:var(--r-sm)}
  :root:not(.hf-frozen) #main .hc-chips a{min-height:var(--tap);border-radius:var(--r-pill)}
  :root:not(.hf-frozen) #main .hfc-opt{min-height:var(--tap);font-size:var(--fs-small)}
  :root:not(.hf-frozen) #main :is(.utility-form,.hp-form,.tk-form,.quote-form,.claim-box,.hfc-form) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select),
  :root:not(.hf-frozen) #main .fb-field :is(input,textarea),
  :root:not(.hf-frozen) #main .text-input{min-height:var(--field-h);border-radius:var(--r-control);padding:11px 14px;font-size:16px;line-height:24px}
  :root:not(.hf-frozen) #main :is(.utility-form,.hp-form,.tk-form,.hfc-form) label,:root:not(.hf-frozen) #main .field-label{font-size:var(--fs-small);font-weight:var(--fw-strong)}
  :root:not(.hf-frozen) #main textarea{border-radius:var(--r-control)}

  /* Strays found by the audit: TOC chips, tables, side lists, start links, the cookie bar, text links */
  :root:not(.hf-frozen) #main :is(.utility-toc a,.utility-table-scroll :is(th,td),.prose :is(th,td),.table-scroll :is(th,td)){font-size:var(--fs-meta)}
  :root:not(.hf-frozen) #main :is(.hc-store-list a,.hc-start,.hc-start a,.mpanel button span:first-child){font-size:var(--fs-small)}
  :root:not(.hf-frozen) #main .text-link{font-size:var(--fs-small)}
  :root .consent-banner-actions button{font-size:var(--fs-small)}
  :root .consent-banner p{font-size:var(--fs-meta);line-height:var(--lh-meta)}
  :root .hfc-titles strong{font-size:var(--fs-body);font-weight:var(--fw-heading)}
  :root:not(.hf-frozen) #main .hc-in .hf-dropdown-control{min-height:var(--field-h);border-radius:var(--r-control);font-size:var(--fs-small)}
  :root:not(.hf-frozen) #main .mpanel{border-radius:var(--r-panel)}
  :root:not(.hf-frozen) #main .mpanel button{min-height:var(--tap)}
  :root:not(.hf-frozen) .hfc-panel{border-radius:var(--r-panel)}
  :root:not(.hf-frozen) #main .hc-tool-head{padding-top:24px}
  :root:not(.hf-frozen) #main .hc-in{padding-bottom:var(--card-pad)}

@media(max-width:700px){
  /* ==========================================================================================================
     4. PHONE CARDS: one inner padding, one radius set
     ========================================================================================================== */
  :root:not(.hf-frozen) #main :is(.hc-card:not(.hc-card-pop):not(.hc-card-media),.hc-steps li,section.hc-panel,.hc-sec>.hc-panel,.hc-body .hc-pipeline li,.hc-body.prose section.hc-check,.hc-body .hc-ai-card,.utility-results li,.legal-index-card,.utility-section,.callout,.claim-box,.claim-flow>.quote-form,.hp-form,.tk-form,.hc-numbers,.decal-preview,.hc-panel .utility-result){padding:var(--card-pad)}
  :root:not(.hf-frozen) #main .hc-card-media{padding:var(--card-pad);gap:16px}
  :root:not(.hf-frozen) #main .hc-card-pop :is(h3,p){margin-left:var(--card-pad);margin-right:var(--card-pad)}
  :root:not(.hf-frozen) #main .hc-card-pop h3{margin-top:14px;font-size:var(--fs-body);line-height:var(--lh-ui)}
  :root:not(.hf-frozen) #main .hc-steps li .hc-photo-step{margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 16px;width:calc(100% + var(--card-pad) * 2)}
  :root:not(.hf-frozen) #main .hf-trigger{padding:16px 52px 16px var(--card-pad);min-height:96px;border-radius:var(--r-panel)}
  :root:not(.hf-frozen) #main :is(.hc-dev,.hf-tool-about>summary){padding-left:var(--card-pad);padding-right:var(--card-pad)}
  :root:not(.hf-frozen) #main .hf-tool-about .hc-body{padding:0 var(--card-pad) var(--card-pad)}
  :root:not(.hf-frozen) #main :is(.hc-tool-head,.hc-in){padding-left:var(--card-pad);padding-right:var(--card-pad)}
  :root:not(.hf-frozen) #main .hc-out{padding:24px var(--card-pad)}
  :root:not(.hf-frozen) #main :is(.hc-body .hc-ai-card,.decal-preview,.utility-section,.callout,.legal-index-card,.claim-flow>.quote-form){border-radius:var(--r-panel)}
  :root:not(.hf-frozen) #main :is(.claim-box,.utility-results li,.hc-panel .utility-result,.hc-code){border-radius:var(--r-card)}
  :root:not(.hf-frozen) #main .utility-section{margin-bottom:var(--sp-4)}
  :root:not(.hf-frozen) #main :is(.hc-grid,.hc-steps,.hc-popular,.hc-grid-2,.hf-triggers){gap:12px}
  :root:not(.hf-frozen) #main .hc-ai-cards{gap:16px}
}

/* ============================================================================================================
   5. FROZEN PAGES (listing, search results, vendor): off-scale sizes onto the scale only
   ============================================================================================================ */
@media(max-width:700px){
  .hf-frozen #main :is(.fine-badge span,.badge-label,.review-google-total,.review-author,.meta-item small,.si-label){font-size:var(--fs-micro)}
  .hf-frozen #main :is(.si-eyebrow){font-size:var(--fs-micro)}
  .hf-frozen #main :is(.si-checked,.acra-line){font-size:var(--fs-meta)}
}

/* ============================================================================================================
   6. HEADINGS AND PARAGRAPHS: balanced titles, no orphan words (all widths, non-frozen pages; wrapping only)
   ============================================================================================================ */
:root:not(.hf-frozen) #main :is(h1,h2,h3):not(.hx *){text-wrap:balance}
:root:not(.hf-frozen) #main :is(.prose,.utility-prose,.hc-summary,.lede,.hc-lede) p{text-wrap:pretty}

/* ============================================================================================================
   7. MICRO-INTERACTIONS (all widths). Fast, ease-out, transform via the individual `scale`/`translate`
   properties so nothing that already uses `transform` moves.
   ============================================================================================================ */
/* Press feedback: buttons and button-like links */
:root :is(button:not(:disabled),input[type=submit],.btn,.primary,.secondary.btn,.utility-button,.text-btn,.hc-copy,.hf-copy-btn,.fb-vote-btn,.hfc-opt,.hfc-send,.hfc-launch,.hfc-link,.contact-secondary,.wa,.call,.hf-tabs a,.hc-chips a,.hs-chips a,.view-toggle a,.pagination a,.card-profile-button){transition:background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),scale var(--dur-fast) var(--ease-out),translate var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out)}
:root :is(button:not(:disabled),input[type=submit],.btn,.primary,.utility-button,.text-btn,.hc-copy,.hf-copy-btn,.fb-vote-btn,.hfc-opt,.hfc-send,.hfc-link,.contact-secondary,.wa,.call,.hf-tabs a,.hc-chips a,.view-toggle a,.pagination a,.card-profile-button):active{scale:.97}
:root :is(.hfc-launch,.menu-button,.hf-drawer-close,.hfc-close):active{scale:.94}
:root :is(.badge-tooltip-trigger,.area-info-trigger):active{scale:1}
:root .hx :is(button,a):active{scale:none}
/* Hover (mouse only): a small lift and a shadow on primary actions */
@media(hover:hover) and (pointer:fine){
  :root :is(.btn:not(.btn-secondary),.primary,.utility-button:not(.secondary),.hfc-send,.card-profile-button,.wa):hover{box-shadow:0 6px 16px -8px #00509d80}
  :root :is(.btn,.primary,.utility-button,.hfc-send,.card-profile-button,.contact-secondary,.wa,.call):hover{translate:0 -1px}
  :root :is(.hc-chips a,.hf-tabs a,.hfc-opt,.hc-copy,.hf-copy-btn,.fb-vote-btn):hover{border-color:var(--blue)}
}

/* Cards: hover lift and shadow on desktop, press on touch */
:root :is(.hc-card,.legal-index-card,.guide-index-card,.hf-trigger,.decal-preview){transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),translate var(--dur-slow) var(--ease-out),scale var(--dur-fast) var(--ease-out),background-color var(--dur) var(--ease-out)}
:root :is(a.hc-card,.legal-index-card,.guide-index-card,.hf-trigger):active{scale:.985}
:root .hc-guide-list a{transition:background-color var(--dur) var(--ease-out)}
:root .hc-guide-list a:active{background-color:#f2f6fa}
:root .hc-guide-list a :is(strong,.hc-row-text strong){transition:color var(--dur) var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  :root :is(a.hc-card,.legal-index-card,.guide-index-card):hover{translate:0 -2px;box-shadow:var(--shadow-lift);transform:none}
  :root .hf-trigger:hover{translate:0 -2px}
  :root .vendor-card{transition:box-shadow var(--dur-slow) var(--ease-out),border-color var(--dur) var(--ease-out)}
  :root .vendor-card:hover{box-shadow:var(--shadow-lift)}
  :root .hc-guide-list a:hover{background-color:#f7f9fb}
}
:root .hf-trigger-arrow{transition:transform var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
:root .hf-trigger:active .hf-trigger-arrow{transform:translate(4px,-50%)}

/* Chips, tabs and filters: the selected state eases in */
:root :is(.hf-tabs a,.hc-chips a,.review-filter a,.review-filter button,[role=tab]){transition:background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),scale var(--dur-fast) var(--ease-out)}
:root .fb-vote-btn[aria-pressed=true]{animation:hf-pop var(--dur-slow) var(--ease-out)}

/* Details/FAQ: the plus turns smoothly */
:root :is(.utility-faq summary span,.hc-dev>summary span,.hf-tool-about>summary span,.hp-faq summary span){display:inline-block;transition:transform var(--dur) var(--ease-out)}
:root :is(.utility-faq details,.hp-faq details,.hc-dev,.hf-tool-about)[open]>:not(summary){animation:hf-rise var(--dur-slow) var(--ease-out)}

/* Links in running text: the underline settles in (non-frozen pages; frozen pages keep their link look) */
:root:not(.hf-frozen) #main :is(.prose,.utility-prose,.hc-summary,.utility-note,.hf-drawer-body,.hc-end,.field-hint,.micro,.fb-legal,.hc-notice) a:not([class]){text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:currentColor;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color var(--dur) var(--ease-out),text-underline-offset var(--dur) var(--ease-out),text-decoration-thickness var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
:root:not(.hf-frozen) #main :is(.prose,.utility-prose,.hc-summary,.utility-note,.hf-drawer-body,.hc-end,.field-hint,.micro,.fb-legal,.hc-notice) a:not([class]):is(:hover,:focus-visible){text-decoration-color:currentColor;text-underline-offset:.16em;text-decoration-thickness:2px}
:root .text-link{transition:color var(--dur) var(--ease-out),gap var(--dur) var(--ease-out)}
@media(hover:hover) and (pointer:fine){:root:not(.hf-frozen) .text-link:hover{gap:18px}}

/* Focus: one ring everywhere, drawn without a jump */
:root :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{transition:outline-offset var(--dur-fast) var(--ease-out),box-shadow var(--dur) var(--ease-out)}

/* Forms: fields ease into focus (blue edge and a soft halo) */
:root :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
:root :is(.utility-form,.hp-form,.tk-form,.quote-form,.claim-box,.hfc-form,.fb-field) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea):focus{border-color:var(--blue);box-shadow:var(--ring-soft)}

/* Copy buttons: a brief tick while they say "Copied" (motion.js adds .is-done for the same 1.6 s) */
:root :is(.hc-copy,.hf-copy-btn,[data-copy],[data-copy-text]).is-done{background:#e8f3ec;border-color:#347052;color:#245a3f}
:root :is(.hc-copy,.hf-copy-btn,[data-copy],[data-copy-text]).is-done::before{content:"";display:inline-block;width:.55em;height:.95em;margin:0 .45em .15em 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);vertical-align:middle;animation:hf-tick var(--dur-slow) var(--ease-out)}
/* Success and thank-you states ease in when they appear */
:root :is(.fb-thanks,.form-ok,.utility-success,.hp-done,.tk-done):not([hidden]){animation:hf-rise var(--dur-slow) var(--ease-out)}

/* Pop-ups (How Honestfix works): fade and rise in, backdrop fades; motion.js plays the reverse before closing */
:root dialog.hf-drawer[open]{animation:hf-drawer-in var(--dur-slow) var(--ease-out)}
:root dialog.hf-drawer[open]::backdrop{animation:hf-fade var(--dur-slow) var(--ease-out)}
:root dialog.hf-drawer.is-closing{animation:hf-drawer-out 160ms ease-in forwards}
:root dialog.hf-drawer.is-closing::backdrop{animation:hf-fade-out 160ms ease-in forwards}
:root .hf-drawer-close{transition:background-color var(--dur) var(--ease-out),scale var(--dur-fast) var(--ease-out),rotate var(--dur) var(--ease-out)}
@media(hover:hover) and (pointer:fine){:root .hf-drawer-close:hover{rotate:90deg}}

/* Mobile menu: drops in under the header with a dimmed page behind; client/main.tsx plays the reverse */
:root.hf-enhanced #mobile-nav:not([hidden]){animation:hf-menu-in var(--dur-slow) var(--ease-out);transform-origin:top center}
:root #mobile-nav.is-closing{animation:hf-menu-out 150ms ease-in forwards}
@media(max-width:700px){
  :root.hf-enhanced #mobile-nav:not([hidden])::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:#102e4f40;pointer-events:none;animation:hf-fade var(--dur-slow) var(--ease-out)}
  :root.hf-enhanced #mobile-nav.is-closing::after{animation:hf-fade-out 150ms ease-in forwards}
}
:root #mobile-nav a{transition:background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
:root #mobile-nav a:active{background-color:var(--pale)}
:root .menu-button{transition:scale var(--dur-fast) var(--ease-out),background-color var(--dur) var(--ease-out);border-radius:var(--r-control)}

/* Help chat: the launcher arrives softly; the panel rises when opened */
:root .hfc-launch{animation:hf-launch-in 260ms var(--ease-out) 400ms both}
:root .hfc-float .hfc-panel:not([hidden]){animation:hf-panel-in var(--dur-slow) var(--ease-out);transform-origin:bottom right}
:root .hfc-msg{animation:hf-rise var(--dur) var(--ease-out)}

/* Section reveal (motion.js marks blocks below the fold with .rv; never the home hero, frozen pages or above the fold).
   Without JavaScript nothing is hidden. */
@media(prefers-reduced-motion:no-preference){
  .rv{opacity:0;translate:0 12px}
  .rv.rv-in{opacity:1;translate:none;transition:opacity var(--dur-slow) var(--ease-out),translate var(--dur-slow) var(--ease-out)}
}
@media print{.rv{opacity:1!important;translate:none!important}}

@keyframes hf-fade{from{opacity:0}to{opacity:1}}
@keyframes hf-fade-out{from{opacity:1}to{opacity:0}}
@keyframes hf-rise{from{opacity:0;translate:0 6px}to{opacity:1;translate:none}}
@keyframes hf-pop{0%{scale:.94}60%{scale:1.03}100%{scale:1}}
@keyframes hf-tick{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes hf-drawer-in{from{opacity:0;translate:0 14px;scale:.985}to{opacity:1;translate:none;scale:1}}
@keyframes hf-drawer-out{from{opacity:1;translate:none;scale:1}to{opacity:0;translate:0 10px;scale:.985}}
@keyframes hf-menu-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:none}}
@keyframes hf-menu-out{from{opacity:1;translate:none}to{opacity:0;translate:0 -6px}}
@keyframes hf-launch-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:none}}
@keyframes hf-panel-in{from{opacity:0;translate:0 10px;scale:.98}to{opacity:1;translate:none;scale:1}}

@media(prefers-reduced-motion:reduce){
  :root *,:root *::before,:root *::after{animation:none!important;transition:none!important}
  :root :is(button,a,input,.hc-card,.hf-trigger,.vendor-card):is(:active,:hover){scale:none!important;translate:none!important;rotate:none!important}
  .rv{opacity:1!important;translate:none!important}
}

/* Page end: while the cookie bar is up, pages with no help launcher, contact bar or compare tray keep room under the
   footer so the bar never covers its last lines (the other pages already do this in help-chat.css and production.css). */
.hf-consent-open body:not(:has(.hfc-float)):not(:has(.hf-sticky)):not(.has-compare-tray) .site-footer{padding-bottom:calc(var(--hf-consent-h,0px) + 8px)}

/* ============================================================================================================
   Search bar: ONE component, two sizes (Kenneth, 3 Oct 2026). Markup: src/components/SearchBar.tsx. Typeahead: /search.js.
   compact = the header (48px). large = the page's main search on Home and /search (56px). Same field, icon, button and
   focus ring in both; only the height, the side padding and the lift differ. The guides filter (.sb-filter) is the
   same field without the button: it filters guides on the page, it does not search the site.
   ============================================================================================================ */
.sb{position:relative;min-width:0;text-align:left;color:#102e4f}
:root .sb .sb-form{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;margin:0;background:#fff;border:1px solid #cedde9;border-radius:12px;color:#102e4f;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out)}
:root .sb-compact .sb-form{height:48px;padding:0 4px 0 14px}
:root .sb-large .sb-form{height:56px;padding:0 8px 0 18px;box-shadow:0 10px 26px -14px rgba(0,10,30,.5)}
:root .sb-filter .sb-form{padding-right:18px}
:root .sb .sb-form:focus-within{border-color:#00509d;box-shadow:0 0 0 3px #00509d33}
:root .sb .sb-form>svg{width:20px;height:20px;flex:none;color:#5b7590}
:root .sb .sb-input{flex:1;min-width:0;width:auto;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;color:#102e4f;font:400 16px/1.25 'DM Sans',Arial,sans-serif;-webkit-appearance:none;appearance:none;text-overflow:ellipsis}
:root .sb .sb-input::placeholder{color:#5f768d;opacity:1}
:root .sb .sb-input::-webkit-search-cancel-button,:root .sb .sb-input::-webkit-search-decoration{display:none}
:root .sb .sb-input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:#102e4f}
:root .sb .sb-input:focus,:root .sb .sb-input:focus-visible{outline:0;box-shadow:none;border:0}
:root .sb .sb-form button.sb-go[type=submit]{position:relative;flex:none;display:grid;place-items:center;box-sizing:border-box;width:40px;height:40px;min-height:0;margin:0;padding:0;border:0;border-radius:10px;background:#00509d;color:#fff;cursor:pointer;transition:background var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
:root .sb .sb-go::after{content:"";position:absolute;inset:-2px}
:root .sb .sb-go svg{width:18px;height:18px}
:root .sb .sb-go:hover{background:#003f7d}
:root .sb .sb-go:active{transform:scale(.95)}
:root .sb .sb-go:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #00509d}
.page-hero .sb-large{margin-top:22px;max-width:680px}
/* Suggestions */
.sb-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:70;margin:0;padding:8px;list-style:none;background:#fff;border-radius:16px;box-shadow:0 18px 40px -12px rgba(0,10,30,.45);color:#102e4f}
.sb-list[hidden]{display:none}
.sb-list li{display:flex;align-items:center;gap:12px;padding:0 14px;min-height:48px;border-radius:10px;cursor:pointer;font-size:16px}
.sb-list li svg{width:18px;height:18px;flex:none;color:#5b7590}
.sb-list li .sb-k{margin-left:auto;font-size:12px;color:#6b8299;letter-spacing:.2px}
.sb-list li[aria-selected="true"],.sb-list li:hover{background:#eaf2fb}
.sb-list li[aria-selected="true"] svg{color:#00509d}

/* The header: logo, search, menu. Sticky on every page. Home and /search carry a large bar of their own
   ([data-primary-search]); the header bar waits until that one has scrolled above the header (/motion.js sets
   body.hf-hdr-pin). Without JavaScript only the large bar shows. */
.header.header-with-search .sb-compact{flex:1;max-width:490px;min-width:160px}
.header .sb-compact .sb-list{min-width:280px}
body:has([data-primary-search]):not(.hf-hdr-pin) .header .sb{display:none}
body.hf-hdr-pin .header .sb{animation:hf-sb-in .22s ease-out both}
@keyframes hf-sb-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:700px){
  :root .sb-large .sb-form{gap:8px;padding-left:14px}
  :root .sb .sb-input::placeholder{font-size:13.5px}
}
@media(max-width:380px){:root .sb-large .sb-form{gap:6px;padding-left:12px}:root .sb-large .sb-form>svg{width:18px;height:18px}:root .sb-large .sb-input::placeholder{font-size:12.5px}}
@media(max-width:700px){
  :root .header.header-with-search{height:calc(64px + env(safe-area-inset-top,0px))}
  :root .header-with-search>.wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:48px;align-items:center;gap:10px;height:100%;box-sizing:border-box;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px}
  .header-with-search .brand{grid-column:1;grid-row:1}
  .header-with-search .sb{grid-column:2;grid-row:1;max-width:none;min-width:0}
  .header-with-search .menu-button{grid-column:3;grid-row:1}
  .brand-logo .brand-lettering{display:none}
  body:has([data-primary-search]):not(.hf-hdr-pin) .brand-logo .brand-lettering{display:inline-flex}
  .header .sb-compact .sb-list{position:fixed;left:16px;right:16px;top:calc(64px + env(safe-area-inset-top,0px) - 4px);min-width:0}
}
@media(prefers-reduced-motion:reduce){body.hf-hdr-pin .header .sb{animation:none}:root .sb .sb-form,:root .sb .sb-go{transition:none}}


/* ============================================================================================================
   8. ONE COMPONENT PER ROLE, ALL WIDTHS (4 Oct 2026, visual QA: docs/visual-qa/REPORT.md). Non-frozen pages only.
   Buttons (primary, secondary), chips, eyebrows, cards, notices, fields, breadcrumbs, title colours and the desktop
   rhythm. Selectors are #main-scoped so they win over the older page stylesheets without !important.
   ============================================================================================================ */
/* Desktop rhythm: title bands 48/48, articles 40 top and 64 bottom (phone values are in section 1) */
@media(min-width:701px){
  :root:not(.hf-frozen) #main :is(.page-hero,.utility-hero,.hc-band-hero,.hc-banner){padding-top:var(--section-y-sm);padding-bottom:var(--section-y-sm)}
  :root:not(.hf-frozen) #main .hc-article{padding-top:40px;padding-bottom:64px}
}

/* Buttons: primary is solid blue with a blue edge; secondary is white with a line edge and blue text. 48 high, 15/650, radius 10. */
:root:not(.hf-frozen) #main :is(.btn,.primary,.utility-button,button[type=submit].btn,.hp-form button[type=submit],.tk-form button[type=submit]){border:1px solid var(--blue);border-radius:var(--r-control);font-size:var(--fs-small);font-weight:var(--fw-strong);min-height:var(--btn-h);padding:0 20px;line-height:1.2;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:10px}
:root:not(.hf-frozen) #main :is(.utility-button.secondary,.btn-secondary,.hc-u button.utility-button.secondary[type],.hc-copy,.hf-copy-btn,.fb-vote-btn){background:#fff;color:var(--blue)!important;border:1px solid var(--line);border-radius:var(--r-control);box-shadow:none;font-size:var(--fs-small);font-weight:var(--fw-strong)}
:root:not(.hf-frozen) #main :is(.utility-button.secondary,.btn-secondary,.hc-copy,.hf-copy-btn,.fb-vote-btn):hover{border-color:var(--blue);background:#fff}
:root:not(.hf-frozen) #main :is(.utility-button.secondary,.btn-secondary,.hc-copy,.hf-copy-btn,.fb-vote-btn){min-height:var(--btn-h);padding:0 20px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:10px}
:root:not(.hf-frozen) #main .primary.yellow{border-color:var(--yellow)}
:root:not(.hf-frozen) #main .hf-copy-btn{margin-left:8px}
/* Text button in a byline reads as a link */
:root:not(.hf-frozen) #main .text-btn{font-size:var(--fs-meta);font-weight:var(--fw-strong)}

/* Chips: pill, 44 high, white with a blue-grey edge (TOC, search chips); selected is blue */
:root:not(.hf-frozen) #main :is(.hc-chips a,.utility-toc nav a){display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border-radius:var(--r-pill);border:1px solid #bdd0e2;background:#fff;color:var(--navy);font-size:var(--fs-small);font-weight:400;line-height:1.5}
:root:not(.hf-frozen) #main .utility-toc nav a:hover{background:#eaf2fb;border-color:var(--blue);color:var(--navy)}

/* Eyebrows: 12, 700, tracked, upper-case, one muted colour (white-blue on the dark bands) */
:root:not(.hf-frozen) #main :is(.eyebrow,.hc-kicker,.hc-eyebrow,.utility-card-kicker,.hc-ai-label,.utility-decal-label,.hf-deeper-label){font-size:var(--fs-micro);line-height:1.4;font-weight:var(--fw-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--eyebrow)}
:root:not(.hf-frozen) #main :is(.hc-eyebrow,.hc-band .eyebrow,.page-hero .eyebrow){color:var(--eyebrow)}
:root:not(.hf-frozen) #main :is(.hc-band-hero,.hc-banner,.search-band) :is(.hc-eyebrow,.eyebrow){color:#a9c3dc}

/* Breadcrumbs and page titles: one colour each */
:root:not(.hf-frozen) #main :is(.hc-crumbs,.utility-back,.breadcrumb:not(.search-band *)){color:var(--muted)}
:root:not(.hf-frozen) #main :is(.utility-hero h1,.page-hero h1){color:var(--ink)}
:root:not(.hf-frozen) #main :is(.hc-tool-head h2){color:var(--navy)}

/* Cards: one box. White, 1px line, 16 radius, a hair of shadow, one inner padding. Links and panels alike. */
:root:not(.hf-frozen) #main :is(.hc-card:not(.hc-card-pop):not(.hc-card-media),.hc-steps li,section.hc-panel,.hc-sec>.hc-panel,.hc-body .hc-pipeline li,.hc-body.prose section.hc-check,.hc-body .hc-ai-card,.hc-ai-card,.legal-index-card,.utility-section,.claim-box,.claim-flow>.quote-form,.hc-card-media,.decal-preview,.hc-tool-card,.hc-panel .utility-result,.utility-results li){background:#fff;border:1px solid var(--card-border);border-radius:var(--r-panel);box-shadow:var(--shadow-rest)}
:root:not(.hf-frozen) #main .hc-card-pop{background:#fff;border:1px solid var(--card-border);border-radius:var(--r-panel);box-shadow:var(--shadow-rest);overflow:hidden}
:root:not(.hf-frozen) #main .hc-tool-card{padding:0;overflow:hidden}
:root:not(.hf-frozen) #main .hc-panel .utility-result{background:#fff}
:root:not(.hf-frozen) #main .hf-trigger{border-radius:var(--r-panel)}
:root:not(.hf-frozen) #main :is(.hc-card:not(.hc-card-pop):not(.hc-card-media),.hc-steps li,.hc-ai-card,.legal-index-card,.utility-section,.claim-box,.decal-preview,.hc-panel .utility-result,.utility-results li,section.hc-panel,.hc-sec>.hc-panel,.hc-body.prose section.hc-check){padding:var(--card-pad)}
/* Notice: pale blue, no edge, radius 12, one padding */
:root:not(.hf-frozen) #main .callout{background:var(--pale);border:0;border-radius:var(--r-card);padding:var(--card-pad);box-shadow:none;max-width:none;color:var(--ink)}
:root:not(.hf-frozen) #main .callout h2{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
:root:not(.hf-frozen) #main .callout p{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink)}

/* Fields: one edge colour (3:1 against white), 48 high, radius 10 */
:root:not(.hf-frozen) #main :is(.utility-form,.hp-form,.tk-form,.quote-form,.claim-box,.hfc-form) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select),
:root:not(.hf-frozen) #main :is(.fb-field input,.fb-field textarea,.text-input,textarea){border:1px solid var(--field-border);border-radius:var(--r-control);background:#fff;color:var(--ink);font-size:16px}
:root:not(.hf-frozen) #main .hf-dropdown-control{border:1px solid var(--field-border);border-radius:var(--r-control);font-size:var(--fs-small);min-height:var(--field-h)}
:root:not(.hf-frozen) #main :is(.utility-form,.hp-form,.tk-form,.claim-box,.quote-form) label{line-height:1.5}

/* Cards that are links: no underline, one hover. Notes under forms are 13 muted. */
:root:not(.hf-frozen) #main :is(.utility-note,.note){font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}

/* Lists of links: rows are 44 high on every width */
:root:not(.hf-frozen) #main .hc-store-list a{display:flex;align-items:center;min-height:var(--tap)}

/* Header links on the scale (shared header, every page) and the rail heading as an eyebrow */
:root .nav-item{font-size:var(--fs-small)}
:root:not(.hf-frozen) #main .hc-rail>p{font-size:var(--fs-micro);line-height:1.4;font-weight:var(--fw-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--eyebrow)}
@media(max-width:700px){:root:not(.hf-frozen) #main .hc-band-hero{padding-top:var(--section-y-sm);padding-bottom:var(--section-y-sm)}}

/* QA round 2 (4 Oct 2026) */
:root:not(.hf-frozen) #main .msec .intro p{font-size:var(--fs-lead);line-height:1.5}
:root:not(.hf-frozen) #main .mpanel :is(.lbl,.rg,label.sel){font-size:var(--fs-micro)}
:root:not(.hf-frozen) #main .hf-tabs a{font-size:var(--fs-small)}
:root:not(.hf-frozen) #main .related-body a{display:inline-block;padding:6px 0}
:root:not(.hf-frozen) #main .hp-person>summary{display:flex;align-items:center;min-height:var(--tap)}
/* Legal contents: chips scroll sideways on phones; on desktop the rail is a plain list that scrolls inside its own height,
   so it can never run under the feedback bar or the footer. */
@media(min-width:851px){
  :root:not(.hf-frozen) #main .utility-toc{max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain}
  :root:not(.hf-frozen) #main .utility-toc nav{display:flex;flex-direction:column;gap:2px}
  :root:not(.hf-frozen) #main .utility-toc nav a{border:0;background:transparent;border-radius:var(--r-sm);min-height:0;padding:8px 10px;white-space:normal;max-width:none;overflow:visible;text-overflow:clip;color:var(--muted);font-size:var(--fs-meta);line-height:1.4}
  :root:not(.hf-frozen) #main .utility-toc nav a:hover{background:#eaf2fb;color:var(--blue)}
}
:root:not(.hf-frozen) #main .hf-dropdown-control{font-size:16px;font-weight:400;color:var(--ink);line-height:24px}
:root .header .business-nav{font-size:var(--fs-small);font-weight:var(--fw-strong);line-height:1.2;border:1px solid var(--line);border-radius:var(--r-control);padding:0 20px;min-height:var(--btn-h);background:#fff}
:root:not(.hf-frozen) #main :is(.hc-in,.mpanel) .hf-dropdown-control{font-size:16px;font-weight:400;min-height:var(--field-h);line-height:24px}

/* One breadcrumb style (visual QA, 4 Oct 2026): the claim page uses the same Home › … crumbs as every utility page.
   hc.css does not load there, so the base look is repeated here. */
.claim-flow .hc-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:0 0 24px}
.claim-flow .hc-crumbs a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.claim-flow .hc-crumbs a:hover{text-decoration:underline}
.claim-flow .hc-crumbs svg{width:12px;height:12px}

/* Use with AI, phones: the side menu becomes one tidy card (eyebrow labels, one 44px row per link) instead of loose
   inline links (visual QA, 4 Oct 2026). */
@media(max-width:700px){
  :root:not(.hf-frozen) #main .hc-store-list{display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card,16px);padding:8px 16px 8px;margin:0 0 24px}
  :root:not(.hf-frozen) #main .hc-store-list p{margin:12px 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  :root:not(.hf-frozen) #main .hc-store-list a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0;border-top:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
  :root:not(.hf-frozen) #main .hc-store-list p+a{border-top:0}
  :root:not(.hf-frozen) #main .hc-store-list a::after{content:"›";color:var(--blue,#00509d);font-size:20px;line-height:1;margin-left:12px}
}

/* Help launcher tucks away while reading (M2v): /motion.js sets body.hf-help-tuck while scrolling down; the launcher
   slides out and comes back on scroll up, near the top, or at the end of the page. An open chat panel never moves. */
.hfc-float .hfc-launch{transition:transform .22s ease-out,opacity .18s ease-out,background .15s}
body.hf-help-tuck .hfc-float .hfc-launch{transform:translateY(calc(100% + 32px));opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hfc-float .hfc-launch{transition:opacity .01s}}

/* Visual QA fixes on the frozen listing and vendor pages (4 Oct 2026, Kenneth: "fix everything"). Look and layout unchanged:
   hit areas grow with invisible ::after boxes, greys darken to the muted token, long names balance their lines. */
:root .area-info-trigger,:root .contact-secondary,:root .pagination a,:root .review-topics button,:root .results-foot a,:root .vendor-page-back,:root .listing-order-line a.text-link{position:relative}
:root :where(.area-info-trigger,.contact-secondary,.pagination a,.review-topics button,.results-foot a,.vendor-page-back,.listing-order-line a.text-link)::after{content:"";position:absolute;inset:-2px 0}
:root .area-info-trigger::after{inset:-10px}
:root .results-foot a::after{inset:-5px 0}
:root .contact-secondary::after{inset:-4px 0}
:root .pagination a::after{inset:-3px 0}
:root .vendor-page-back::after{inset:-4px 0}
:root .review-topics button::after{inset:-3px 0}
:root .listing-page-nav>span[aria-hidden]{opacity:1;color:#58697a}
:root .review-google-total,:root .review-browser-heading>span{color:#58697a}
:root .sidebar-control-section legend{color:#58697a}
:root .sidebar-control-section .hf-dropdown-control:disabled{opacity:.85}
:root .agent-page :is(.card-title,.guide-index-card h3,.listing-page-heading h1,.vendor-head h1){text-wrap:balance}
.hf-sticky[data-armed]{transition:transform .22s ease-out,visibility 0s linear .22s}
.hf-sticky[data-armed]:not(.is-on){transform:translateY(100%);visibility:hidden}
.hf-sticky[data-armed].is-on{transition:transform .22s ease-out,visibility 0s}
@media(prefers-reduced-motion:reduce){.hf-sticky[data-armed]{transition:none!important}}

/* Listing cards: more room between the score tile and the business name when they stack (Kenneth, 4 Oct 2026). The
   tile's 4px hard shadow sat almost on the name at the old 8px row gap. */
.card-name-row{row-gap:18px}
@media(max-width:480px){.card-name-row{row-gap:16px}}

/* Guides: a clear way to the trade's list on every guide (Kenneth, 4 Oct 2026): a primary button under the byline and
   a "Ready to call someone?" card before Related. The icon floats, so the card's text wraps around it. */
.hc-guide-cta{margin:4px 0 20px}
.hc-guide-next{display:flow-root;background:#fff;border:1px solid var(--line);border-radius:var(--r-card,16px);padding:24px;margin:32px 0}
.hc-guide-next>.hc-ico{float:left;margin:2px 16px 8px 0}
.hc-guide-next h2{margin:0 0 8px}
.hc-guide-next p{margin:0 0 16px}
.hc-guide-cta a.primary,.hc-guide-next a.primary{text-wrap:balance;text-align:center}
@media(max-width:700px){.hc-guide-next{padding:20px}.hc-guide-cta a.primary,.hc-guide-next a.primary{width:100%;justify-content:center}}

/* Listing filters: the five badge filters always sit in one row of five (Kenneth, 4 Oct 2026), never 4 + 1. Labels
   wrap to two lines inside their tile; the badge art shrinks a little on narrow phones so all five fit. */
.badge-filters{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px}
.quick-filter.badge-filter{min-width:0}
.quick-filter.badge-filter .badge-filter-label{text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.2;text-align:center}
@media(max-width:400px){.quick-filter.badge-filter .badge-filter-label{font-size:12px;letter-spacing:-.01em}.quick-filter.badge-filter .fine-badge-art{width:36px;height:36px}.listing-toolbar .sidebar-control-section .quick-filter.badge-filter,.quick-filter.badge-filter{padding:8px 2px}}
/* Filter sheet on phones: one 16px side margin (the dialog's 22px plus the form's 16px squeezed the five tiles until
   "WhatsApp" could not fit on one line). */
@media(max-width:700px){
  dialog.listing-filter-dialog{padding-left:16px;padding-right:16px}
  dialog.listing-filter-dialog form.listing-filter-form{padding-left:0;padding-right:0}
  dialog.listing-filter-dialog .badge-filters{gap:4px}
}
@media(max-width:374px){.quick-filter.badge-filter .badge-filter-label{font-weight:500;letter-spacing:-.02em}}


/* ============================================================================================================
   B1 DESIGN AUDIT FIXES (6 Oct 2026).
   Listing, search results, compare and vendor pages (html.hf-frozen) get spacing, type size, tap size, footer and
   hover only: no new element, no reorder. Everything here sits after sections 1 to 8 so equal specificity wins.
   ============================================================================================================ */

/* --- Footer: one scale on every page (frozen pages kept the older 12/11px sizes) --- */
:root.hf-frozen #main .footer-grid>div>a:not(.brand),:root.hf-frozen #main .footer-consent-link{font-size:var(--fs-small);line-height:1.3}
:root.hf-frozen #main .footer-grid :is(p,.micro),:root.hf-frozen #main .footer-bottom,:root.hf-frozen #main .footer-bottom *{font-size:var(--fs-meta);line-height:var(--lh-meta)}
:root.hf-frozen #main .footer-grid h2{font-size:var(--fs-meta);line-height:var(--lh-meta);letter-spacing:0;font-weight:var(--fw-micro);margin:0 0 4px}
/* One "Cookie choices" link, in the Legal column, set like its sibling links */
:root .site-footer .footer-consent-link{margin-top:0}
:root .site-footer .footer-consent-link:hover{color:var(--blue);text-decoration:underline}
@media(min-width:701px){:root .site-footer .footer-consent-link{min-height:0;padding:0;margin-bottom:11px}}

/* --- Content column: header, footer and page chrome share one 1320 box on wide screens (header logo and footer logo on one edge) --- */
@media(min-width:1024px){
  :root #main :is(.site-footer .wrap,.page-hero>.wrap,.utility-hero>.wrap,section.wrap.section:not(.tk-wrap),.utility-layout){max-width:1320px}
  :root #main :is(.hf-tools-wrap,.hc-tool-wrap){max-width:1320px;padding-left:40px;padding-right:40px}
  /* the ticket form keeps a reading width but starts on the hero's left edge */
  :root #main .tk-wrap{max-width:1320px}
  :root #main .tk-wrap>*{max-width:640px}
}

/* --- Hover and pressed states that were overridden or missing --- */
@media(hover:hover) and (pointer:fine){
  :root:not(.hf-frozen) #main a.hc-card:hover{border-color:var(--blue);box-shadow:var(--shadow-lift)}
  :root:not(.hf-frozen) #main a.hc-card:hover :is(h2,h3,strong){color:var(--blue)}
  :root .header .nav-item:hover{color:var(--blue)}
  :root :is(.utility-faq summary,.hp-faq summary,.hf-tool-about>summary,.hc-dev>summary):hover{background:var(--pale,#e9f2fb)}
  :root .utility-toc a:hover,:root .hc-rail a:hover{color:var(--blue)}
}
:root :is(.utility-faq summary,.hp-faq summary,.hf-tool-about>summary,.hc-dev>summary){transition:background-color var(--dur) var(--ease-out)}
:root :is(.utility-faq summary,.hp-faq summary,.hf-tool-about>summary,.hc-dev>summary):active{background:var(--pale,#e9f2fb)}
:root :is(.hc-row,.title-button,.card-secondary-actions label):active{background-color:#eef4fb}
:root .hf-tabs a:active{scale:.97}

/* --- Wrapping: no orphan words in ledes; long lines capped at a reading length --- */
:root:not(.hf-frozen) #main :is(.hc-sub,.hc-summary,.hc-lede-copy .utility-prose,.hc-biz-hero .hc-lede-copy .utility-prose){text-wrap:balance}
:root #main :is(.utility-content section>:is(p,ul,ol),.hc-ai-card :is(p,li),.hc-row-text span,.card-summary-text,.ai-summary p){max-width:72ch}
:root:not(.hf-frozen) #main :is(.utility-note,.msec .note,.mgrid>.note){max-width:64ch}
.hc-nowrap{white-space:nowrap}

/* --- Home --- */
/* every row of trade tiles is the height of the tallest tile; problem cards put "Checked" on one line at the card foot */
:root:not(.hf-frozen) #main .hc-trade-tiles{grid-auto-rows:1fr}
:root:not(.hf-frozen) #main .hc-card-pop{display:flex;flex-direction:column}
:root:not(.hf-frozen) #main .hc-card-pop p{margin-top:auto}
/* tile text sits beside its icon instead of wrapping under it */
:root:not(.hf-frozen) #main :is(ul.hc-grid,.hc-trade-tiles)>li>a.hc-card-ico>.hc-card-text{overflow:hidden}
:root:not(.hf-frozen) #main .hc-trade-tiles>li>a.hc-card-ico{display:flex;align-items:center;gap:16px}
:root:not(.hf-frozen) #main .hc-trade-tiles>li>a.hc-card-ico>.hc-ico{float:none;margin:0}
:root:not(.hf-frozen) #main .hc-trade-tiles>li>a.hc-card-ico>.hc-card-text{flex:1;min-width:0}

/* --- Guides index and guide page --- */
:root #main .hc-row-text{display:block;overflow:hidden}
:root #main .hc-count{margin-block:24px}
:root:not(.hf-frozen) #main ul.related-list{padding-left:0}
:root:not(.hf-frozen) #main .related-list{align-items:start}

/* --- How it works and Tools --- */
:root #main .hf-trigger{justify-content:flex-start}
@media(min-width:701px){:root #main .hf-drawer-foot{display:none}}
:root #main .hf-figs>li:last-child:nth-child(even){grid-column:1/-1}
:root #main .hf-app-card .hc-empty-panel{justify-items:center;text-align:center}
:root #main .hf-app-card .hc-in h2{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title)}
:root #main .hf-tools .hc-end{max-width:none}

/* --- For businesses: decal previews side by side, six downloads as 3 + 3, code boxes that never run under Copy --- */
:root #main .decal-previews{display:grid;grid-template-columns:41fr 59fr;gap:16px;align-items:center}
:root #main .decal-previews .decal-preview{margin:0}
:root #main .decal-panel .utility-downloads{display:grid;grid-template-columns:repeat(3,max-content);gap:8px}
:root #main .decal-panel .hc-code{align-items:flex-start}
:root #main .decal-panel .hc-code code{font-size:var(--fs-meta);word-break:break-all;overflow-wrap:anywhere}
:root #main .decal-badge-file{display:inline-flex;align-items:center;min-height:44px}
:root #main .hc-biz-hero{align-items:start}
:root #main .hc-biz-hero .hc-photo-side{align-self:start}
:root #main .hc-biz-hero h1{margin-top:0}

/* --- Claim and corrections forms: one card, one button width, one label rhythm (:root:root beats the card list in section 8) --- */
:root:root:not(.hf-frozen) #main :is(.claim-flow,.quote-form,.utility-form) :is(.btn-full,button[type=submit]){width:auto;justify-self:start}
:root:root:not(.hf-frozen) #main .hc-panel :is(.claim-box,.claim-flow>.quote-form,.utility-result:not(.utility-results *)){border:0;padding:0;background:none;box-shadow:none}
:root:root:not(.hf-frozen) #main .hc-panel>.utility-result{margin-top:0}
:root:not(.hf-frozen) #main .utility-embedded .claim-flow .hc-crumbs{display:none}
:root:not(.hf-frozen) #main .claim-flow :is(p,.field-hint){color:var(--muted)}
:root:not(.hf-frozen) #main .claim-flow .quote-form>label{margin-top:20px;margin-bottom:8px}
:root:not(.hf-frozen) #main .claim-flow .quote-form>label:first-child{margin-top:0}
:root:not(.hf-frozen) #main .hp-form label{display:grid;gap:8px}

/* --- Use with AI, About, legal --- */
@media(min-width:701px){
  :root:not(.hf-frozen) #main .hc-store-list p{font-size:var(--fs-micro);font-weight:var(--fw-micro);line-height:1.4;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--muted)}
}
:root:not(.hf-frozen) #main ol.hc-ai-steps{gap:4px}
:root:not(.hf-frozen) #main ol.hc-ai-steps li{margin-bottom:0}
:root:not(.hf-frozen) #main .prose p:has(.hc-copy,.hf-copy-btn){display:flex;flex-wrap:wrap;gap:8px;align-items:center}
:root:not(.hf-frozen) #main .utility-content section>:last-child{margin-bottom:0}

/* --- 404 --- */
:root:not(.hf-frozen) #main section.wrap.section>.callout{max-width:720px}

/* --- Frozen pages (listing, search results, compare, vendor): type onto the scale, spacing only --- */
:root.hf-frozen #main .sidebar-controls-heading h2{letter-spacing:0}
:root.hf-frozen #main :is(.sidebar-control-section legend,.sidebar-location-hint,.sidebar-live-note,.badge-filter-label,.badge-tooltip-trigger>span,.listing-map-panel footer,.listing-sidebar-map p,p.eyebrow){font-size:var(--fs-micro)}
:root.hf-frozen #main :is(.review-stars b,.review-author,.review-heading time,.results-foot,.results-foot a,.micro,.signal-figure,.fb-legal,.fb-legal a,.meta-item small,.review-google-total){font-size:var(--fs-meta)}
:root.hf-frozen #main :is(.card-summary-text,.card-summary-text span,.ai-summary p:not(.micro),.searchable-review-text,.results-count strong){font-size:var(--fs-small);line-height:var(--lh-small)}
:root.hf-frozen .compare-tray :is(.contact-secondary,strong){font-size:var(--fs-meta)}
@media(min-width:1024px){:root.hf-frozen #main .listing-page-heading h1{font-size:var(--fs-h1)}}
:root.hf-frozen #main .search-intro h2{font-size:var(--fs-h2)}
@media(max-width:1180px){:root.hf-frozen #main .badge-filters{gap:4px}}
:root.hf-frozen #main .quick-filter.badge-filter{padding-left:2px;padding-right:2px}
/* vendor review summary: five tiles fill two rows (3 + 2 wide) instead of leaving an empty cell */
@media(min-width:701px){
  :root.hf-frozen #main .signal-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  :root.hf-frozen #main .signal-grid>*{grid-column:span 2}
  :root.hf-frozen #main .signal-grid>:nth-child(4):nth-last-child(2),:root.hf-frozen #main .signal-grid>:nth-child(5):last-child{grid-column:span 3}
}
/* review toolbar: one text size on one line */
:root.hf-frozen #main .review-browser :is(.hf-dropdown-control,.review-sort){font-size:var(--fs-small)}
:root.hf-frozen #main .review-browser :is(.review-sort,.review-sort .hf-dropdown,.review-sort .hf-dropdown-control){width:auto;min-width:0}
:root.hf-frozen #main .review-browser [data-review-result-count]{font-size:var(--fs-small)}
/* compare dialog */
:root .comparison-dialog :is(th,td){font-size:var(--fs-small)}

/* ============================================================================================================
   Phones: one 16px side gutter on every page (frozen pages were 20px), taps, tabs, decals
   ============================================================================================================ */
@media(max-width:700px){
  :root{--gutter:16px}
  :root.hf-frozen #main .wrap{padding-left:16px;padding-right:16px}
  :root .sb .sb-form button.sb-go[type=submit]{width:44px;height:44px}
  :root .header .brand-logo{position:relative}
  :root .header .brand-logo::after{content:"";position:absolute;inset:-6px -8px}
  :root .consent-banner{padding-top:8px}
  :root .consent-banner-actions button{min-height:44px!important}
  :root #main .hf-tabs{display:flex;overflow:visible}
  :root #main .hf-tabs a{flex:1 1 0;min-width:0;min-height:var(--tap);padding:6px 4px;white-space:normal;text-align:center;line-height:1.2;justify-content:center}
  :root #main .hc-empty-panel :is(img,.hc-ico){display:none}
  :root #main .decal-previews{grid-template-columns:minmax(0,1fr)}
  :root #main .decal-panel .utility-downloads{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root #main .decal-panel .utility-downloads a{min-width:0}
  :root #main :is(.vendor-page-back,.hc-crumbs a,.utility-back){display:inline-flex;align-items:center;min-height:44px}
  :root.hf-frozen #main .title-button{display:block;padding:8px 0}
  :root.hf-frozen #main .review-browser .text-btn{min-width:44px}
  :root.hf-frozen #main .listing-sheet-actions .text-btn{min-height:44px}
  :root #main .hc-band input::placeholder{font-size:var(--fs-small)}
}
@media(max-width:380px){:root.hf-frozen #main .listing-page-heading{flex-direction:column;align-items:flex-start;gap:4px}}