/* /theme.css — generated from _data/brand.json + _data/theme.json (wf-theme.njk).
   Loaded by raw pages that can't run Nunjucks (the chat-widget iframe) so every
   tool reads the SAME theme contract. Do not hand-edit. */

:root{
  --wf-dark:#0A0A0A;
  --wf-ink:#0A0A0A;
  --wf-body:#404040;
  --wf-line:#E0E0E0;
  --wf-line-strong:#D6D6D6;
  --wf-canvas:#FFFFFF;
  --wf-card-bg:#FFFFFF;
  --wf-accent:#F0B713;
  --wf-accent-hover:#EEC756;
  --wf-accent-ink:#0A0A0A;
  --wf-accent-soft:#F4E6BE;
  --wf-accent-rgb:240,183,19;
  --wf-secondary:#BF030E;
  --wf-secondary-hover:#9E050E;
  --wf-secondary-ink:#FFFFFF;
  --wf-eyebrow:#BF030E;
  --wf-eyebrow-transform:uppercase;
  --wf-flame:#F0B713;
  --wf-font-display:'Oswald', system-ui, sans-serif;
  --wf-font-body:'Roboto', system-ui, sans-serif;
  --wf-font-btn:'Roboto Slab', Georgia, serif;
  --wf-display-weight:600;
  --wf-display-transform:uppercase;
  --wf-display-tracking:-0.015em;
  --wf-btn-weight:700;
  --wf-btn-transform:uppercase;
  --wf-btn-tracking:0.025em;
  --wf-btn-radius:0.25rem;
  --wf-radius-card:0.375rem;
  --wf-radius-field:0.25rem;
  --wf-launcher-bg:#0A0A0A;
  --wf-launcher-bg-hover:#171717;
  --wf-launcher-flame:#F0B713;
  --wf-launcher-tooltip-bg:#BF030E;
  --wf-launcher-tooltip-ink:#FFFFFF;
}


/* ── Shared tool components — CTAs and cards rendered by OUR tool markup
     (estimate fork, visualizer, chat shell). Site pages keep their own ui.njk
     macros; these exist so TOOL surfaces restyle from the vars alone. ── */
.wf-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.5rem;background:var(--wf-accent);color:var(--wf-accent-ink);font-family:var(--wf-font-btn);font-weight:var(--wf-btn-weight);text-transform:var(--wf-btn-transform);letter-spacing:var(--wf-btn-tracking);border-radius:var(--wf-btn-radius);border:0;cursor:pointer;transition:background .2s ease;text-decoration:none}
.wf-btn-primary:hover{background:var(--wf-accent-hover)}
.wf-btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.5rem;background:var(--wf-secondary);color:var(--wf-secondary-ink);font-family:var(--wf-font-btn);font-weight:var(--wf-btn-weight);text-transform:var(--wf-btn-transform);letter-spacing:var(--wf-btn-tracking);border-radius:var(--wf-btn-radius);border:0;cursor:pointer;transition:background .2s ease;text-decoration:none}
.wf-btn-secondary:hover{background:var(--wf-secondary-hover)}
.wf-btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.5rem;background:var(--wf-card-bg);color:var(--wf-ink);font-family:var(--wf-font-btn);font-weight:var(--wf-btn-weight);text-transform:var(--wf-btn-transform);letter-spacing:var(--wf-btn-tracking);border-radius:var(--wf-btn-radius);border:1.5px solid var(--wf-line-strong);cursor:pointer;transition:border-color .2s ease;text-decoration:none}
.wf-btn-outline:hover{border-color:var(--wf-ink)}
.wf-card{background:var(--wf-card-bg);border:1px solid var(--wf-line);border-radius:var(--wf-radius-card)}
.wf-eyebrow{color:var(--wf-eyebrow);font-weight:700;text-transform:var(--wf-eyebrow-transform);letter-spacing:.06em;font-size:.75rem}

/* ── WhyFire engine UI (.wfa) → site skin. The absorb bundle themes via
     --wfa-* vars but bakes the donor palette into its inline defaults; an
     !important author rule on .wfa beats the bundle's normal inline var.
     This conforms configure, the estimate flow, curtain/wait, and results
     to the site's tokens. Toolkit translation of the AES mechanism —
     var-driven, no baked hex. ── */
.wfa{
  --wfa-primary:var(--wf-dark) !important;
  --wfa-primary-ink:#ffffff !important;
  --wfa-accent:var(--wf-accent) !important;
  --wfa-cta-ink:var(--wf-accent-ink) !important;
  --wfa-ink:var(--wf-ink) !important;
  --wfa-soft:var(--wf-body) !important;
  --wfa-line:var(--wf-line) !important;
  font-family:var(--wf-font-body) !important;
}
.wfa h3,.wfa .wfa-pp h3,.wfa .wfa-title,.wfa .wfa-rname,.wfa .wfa-cur-title,.wfa .wfa-greet,.wfa .wfa-wait2-title{font-family:var(--wf-font-display) !important;font-weight:var(--wf-display-weight);color:var(--wf-ink) !important;text-transform:var(--wf-display-transform);letter-spacing:var(--wf-display-tracking)}
/* Curtain + wait panels are dark rooms — their headings stay white (contrast guard) */
.wfa .wfa-curtain h3,.wfa .wfa-curtain .wfa-cur-title,.wfa .wfa-wait h3,.wfa .wfa-wait .wfa-wait2-title{color:#ffffff !important}
.wfa-eyebrow,.wfa-pp-eyebrow{color:var(--wf-eyebrow) !important;text-transform:var(--wf-eyebrow-transform)}
/* Filled CTAs = the site's ask; outline/quiet buttons stay quiet */
.wfa-btn-primary{background:var(--wf-accent) !important;color:var(--wf-accent-ink) !important}
.wfa-btn-primary:disabled{opacity:.45;cursor:not-allowed}
.wfa-btn-primary:hover{background:var(--wf-accent-hover) !important}
.wfa-btn-outline,.wfa .wfa-btn.wfa-btn-quiet{border-color:var(--wf-line-strong) !important;color:var(--wf-ink) !important;background:var(--wf-card-bg) !important}
.wfa .wfa-btn{font-family:var(--wf-font-btn) !important;font-weight:var(--wf-btn-weight) !important;text-transform:var(--wf-btn-transform);letter-spacing:var(--wf-btn-tracking);border-radius:var(--wf-btn-radius) !important}
/* Icons ALWAYS LEFT of the label (fleet law) */
/* ── THE 425px ARROW (found 8/22 on the live PDP) ───────────────────────────
   The engine emits its button icons as <svg class="wfa-ic"> with a viewBox and
   NO width/height attributes, and nothing in the fleet ever sized the class —
   every dealer's wf-theme.njk carries only the order rule below, and no built
   stylesheet contains a wfa-ic size at all. An SVG with no intrinsic size fills
   its container, so during the wizard's skeleton state the full-width "Continue"
   button rendered a 425x425 arrow. It also can't rely on a .wfa ancestor: the
   offending button was NOT inside .wfa, so the order rule wasn't even applying.
   Sized on the element itself, no !important, so the engine can still override
   inline if it ever needs to. ── */
svg.wfa-ic{width:1em;height:1em;flex:0 0 auto}
.wfa .wfa-btn .wfa-ic{order:-1 !important}
.wfa .wfa-ok button{display:inline-flex;align-items:center;gap:.3rem}
/* Curtain / wait = the site's dark room, lit by the site's flame */
.wfa .wfa-curtain,.wfa .wfa-wait{background:var(--wf-dark) !important}
.wfa .wfa-cur-flame svg{stroke:var(--wf-flame) !important}
.wfa .wfa-cur-eyebrow{color:var(--wf-accent-soft) !important}
/* Boxed flow forms + result details offset against the page canvas */
/* Inline flow panels sit FLUSH with the column (Matt 8/11: the form fills
   its container — the plate is the width ruler, no box-in-box inset) */
.wfa [data-wfa="fit"],.wfa [data-wfa="scenario"],.wfa [data-wfa="contact"]{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.wfa .wfa-pp dl.wfa-meta{background:var(--wf-card-bg) !important}

/* Flow-shell scroll lock (the modal owns the viewport while open) */
html.wfa-modal-open{overflow:hidden}

/* ── Wizard chrome (Matt 8/11) ── */
/* THE FIXED STAGE (Matt: same size, no scroll, OG-visualizer slide — refined).
   The panel is one constant size; cards slide in; the CTA rail sits pinned
   at the bottom so Next/Back never move between steps. overflow:auto is a
   silent safety net only — cards are designed to fit. */
/* (8/14 breakthrough) The fixed 600px modal stage is retired on PDPs — the
   wizard rides inline in the action card (.wf-wizard-stage) at natural height,
   the visualizer pattern. Slide keyframes below serve the inline stage. */
@keyframes wfaEnterR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes wfaEnterL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.wfa-enter-r{animation:wfaEnterR .26s ease both}
.wfa-enter-l{animation:wfaEnterL .26s ease both}
@media (prefers-reduced-motion: reduce){.wfa-enter-r,.wfa-enter-l{animation:none}}
/* Stage density — everything breathes tighter inside the fixed 560 panel so
   no desktop card ever needs the safety scroll */
/* ── THE WIZARD CONTRACT variants (toolkit v2, Matt 8/19) ── */
/* steps: dots (D&B chrome) */
.wf-wizard-stage .wfa-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;min-height:11rem;border:2px dashed color-mix(in srgb, var(--wf-accent) 45%, #fff);border-radius:var(--wf-radius-field);background:color-mix(in srgb, var(--wf-accent) 5%, #fff);cursor:pointer;text-align:center;padding:1.1rem;margin-top:.9rem;font-family:var(--wf-font-body);font-size:.92rem;color:#57534E;transition:border-color .15s ease,background .15s ease}
.wf-wizard-stage .wfa-upload:hover{border-color:var(--wf-accent);background:#fff}
.wf-wizard-stage .wfa-upload.has{border-style:solid;background:#fff;padding:.6rem}
.wf-wizard-stage .wfa-upload img{max-height:12rem;width:auto;max-width:100%;border-radius:var(--wf-radius-field);display:block}
.wf-wizard-stage .wfa-upload-ic{color:var(--wf-accent)}
.wf-wizard-stage .wfa-upload-ic svg{width:2rem;height:2rem}
.wf-wizard-stage .wfa-upload-swap{font-size:.78rem;color:#78716C;text-decoration:underline}
.wf-wizard-stage .wfa-describe{width:100%;border:2px solid var(--wf-line-strong,#D6D3D1);border-radius:var(--wf-radius-field);padding:.7rem .8rem;font-family:var(--wf-font-body);font-size:.92rem;color:var(--wf-ink);resize:vertical;min-height:3.4rem;background:#fff}
.wf-wizard-stage .wfa-describe:focus{outline:2px solid var(--wf-accent);outline-offset:1px;border-color:var(--wf-accent)}
.wf-wizard-stage .wfa-summary{display:flex;align-items:center;justify-content:space-between;gap:.7rem;background:#FAFAF9;border:1px solid var(--wf-line,#E7E5E4);border-radius:var(--wf-radius-field);padding:.55rem .8rem;margin:.45rem 0;font-family:var(--wf-font-body);font-size:.85rem;color:#44403C}
.wf-wizard-stage .wfa-summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-wizard-stage .wfa-summary button{background:none;border:0;padding:0;cursor:pointer;font-family:var(--wf-font-body);font-size:.8rem;font-weight:600;color:var(--wf-accent);text-decoration:underline;text-underline-offset:2px;flex:none}
.wf-wizard-stage .wfa-next{list-style:none;margin:.9rem 0 .2rem;padding:0;display:grid;gap:.65rem}
.wf-wizard-stage .wfa-next li{display:flex;gap:.6rem;align-items:flex-start;font-family:var(--wf-font-body);font-size:.9rem;color:#44403C;line-height:1.45}
.wf-wizard-stage .wfa-next li i{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;font-style:normal;font-size:.72rem;font-weight:700;border:1.5px solid var(--wf-accent);color:var(--wf-accent);background:#fff;flex:none;margin-top:.05rem}
.wf-wizard-stage .wfa-dots{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:0 0 1rem;padding:0}
.wf-wizard-stage .wfa-dots li{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--wf-font-body);font-size:.8rem;font-weight:600;color:#A8A29E}
.wf-wizard-stage .wfa-dots li i{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;font-style:normal;font-size:.72rem;font-weight:700;border:1.5px solid var(--wf-line-strong);color:var(--wf-body);background:#fff;flex:none}
.wf-wizard-stage .wfa-dots li.active{color:var(--wf-ink)}
.wf-wizard-stage .wfa-dots li.active i{background:var(--wf-accent);border-color:var(--wf-accent);color:var(--wf-accent-ink)}
.wf-wizard-stage .wfa-dots li.done{color:var(--wf-body);cursor:pointer}
.wf-wizard-stage .wfa-dots li.done i{background:#fff;border-color:var(--wf-accent);color:var(--wf-accent)}
.wf-wizard-stage .wfa-dots li.done:hover span{text-decoration:underline;text-underline-offset:2px}
/* options: pill variant (compact D&B chips) */
.wf-wizard-stage .wfa-opts--pill{display:flex !important;flex-wrap:wrap;gap:.5rem}
.wf-wizard-stage .wfa-opts--pill .wfa-opt{min-height:2.55rem !important;padding:.5rem .95rem !important;font-size:.9rem !important;width:auto;flex:none}
.wf-wizard-stage .wfa-opts--pill .wfa-opt small{font-size:.68rem}
/* THE OPTION AREA LAW — options always fill the row; the longest label
   picks the column count. Law classes out-rank every shape variant. */
.wf-wizard-stage .wfa-opts[class*="--law-"]{display:grid !important;gap:.5rem}
.wf-wizard-stage .wfa-opts[class*="--law-"] .wfa-opt{width:100% !important;flex:initial !important}
.wf-wizard-stage .wfa-opts--law-fill-2{grid-template-columns:repeat(2,1fr) !important}
.wf-wizard-stage .wfa-opts--law-fill-3{grid-template-columns:repeat(3,1fr) !important}
.wf-wizard-stage .wfa-opts--law-fill-4{grid-template-columns:repeat(4,1fr) !important}
.wf-wizard-stage .wfa-opts--law-grid2{grid-template-columns:repeat(2,1fr) !important}
.wf-wizard-stage .wfa-opts--law-grid2 > .wfa-opt:last-child:nth-child(odd){grid-column:1/-1}
.wf-wizard-stage .wfa-opts--law-stack{grid-template-columns:1fr !important}
.wf-wizard-stage .wfa-opts--law-paired{grid-template-columns:repeat(2,1fr) !important}
.wf-wizard-stage .wfa-opts--law-paired > .wfa-opt:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:520px){.wf-wizard-stage .wfa-opts--law-grid2,.wf-wizard-stage .wfa-opts--law-paired{grid-template-columns:1fr !important}.wf-wizard-stage .wfa-opts--law-grid2 > .wfa-opt,.wf-wizard-stage .wfa-opts--law-paired > .wfa-opt{grid-column:auto}}
/* selected style: fillSoft (tint, no ring) */
.wf-wizard-stage .wfa-sel--fillSoft .wfa-opt.on{background:rgba(var(--wf-accent-rgb),.09) !important;border:2px solid var(--wf-accent) !important;color:var(--wf-accent) !important;font-weight:700 !important;box-shadow:none !important}
/* paired pills: options with sublabels sit in a tidy 2-up grid (no ragged wrap) */
.wf-wizard-stage .wfa-opts--paired{display:grid !important;grid-template-columns:1fr 1fr;gap:.5rem}
@media (max-width:520px){.wf-wizard-stage .wfa-opts--paired{grid-template-columns:1fr}}
/* tips: the (i) toggle */
.wf-wizard-stage .wfa-tip{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:50%;border:1.5px solid var(--wf-accent);color:var(--wf-accent);background:none;font-size:.62rem;font-weight:700;font-style:italic;cursor:pointer;vertical-align:2px;margin-left:.25rem;padding:0;line-height:1}
.wf-wizard-stage .wfa-tipbox{display:block;font-size:.75rem;color:var(--wf-body);background:var(--wf-canvas);border:1px solid var(--wf-line);border-radius:4px;padding:.5rem .65rem;margin:.25rem 0 .4rem;line-height:1.45;font-family:var(--wf-font-body)}
/* rail: undo variant */
.wf-wizard-stage .wfa-opt{border-width:2px !important}
.wf-wizard-stage .wfa-btn-undo{background:#F5F5F4 !important;border:0 !important;color:var(--wf-ink) !important}
.wf-wizard-stage .wfa-btn-undo svg{width:1rem;height:1rem;stroke-width:2.4}
.wf-wizard-stage .wfa-btn-undo:hover{background:#E7E5E4 !important}
.wf-wizard-stage .wfa-undo-ic{font-style:normal;margin-right:.2rem}
/* chips shape variants */
.wf-wizard-stage .wfa-chip--pill{border-radius:999px}

/* ── Readability pass (Matt 8/18): the viz card anatomy on the estimator ── */
.wf-wizard-stage .wfa-bar{height:3px;background:var(--wf-line);border-radius:var(--wf-radius-field);overflow:hidden;margin:.55rem 0 .8rem}
.wf-wizard-stage .wfa-bar span{display:block;height:100%;background:var(--wf-accent);border-radius:var(--wf-radius-field);transition:width .4s ease}
.wf-wizard-stage .wfa-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .8rem}
.wf-wizard-stage .wfa-chip{display:inline-flex;align-items:center;padding:3px 9px;font-size:.72rem;font-weight:600;font-family:var(--wf-font-body);color:var(--wf-accent);background:rgba(var(--wf-accent-rgb),.06);border:1px solid rgba(var(--wf-accent-rgb),.22);border-radius:4px;line-height:1.3}
.wf-wizard-stage .wfa-hint{display:block;font-size:.72rem;color:#A8A29E;line-height:1.45;margin:.1rem 0 .3rem;font-family:var(--wf-font-body)}
.wf-wizard-stage .wfa-minihead{font-family:var(--wf-font-body);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--wf-body);margin:.9rem 0 0}
.wf-wizard-stage .wfa-minihead:first-child{margin-top:0}
.wf-wizard-stage .wfa-minihint{font-size:.75rem;color:#A8A29E;margin:.1rem 0 .55rem;font-family:var(--wf-font-body)}
.wf-wizard-stage .wfa-inwrap{position:relative;display:block}
.wf-wizard-stage .wfa-inwrap input{width:100%;padding-right:2.4rem}
.wf-wizard-stage .wfa-inwrap i{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);font-style:normal;font-size:.75rem;color:#A8A29E;font-family:var(--wf-font-body);pointer-events:none}
.wf-wizard-stage .wfa-opt{min-height:3.1rem !important;padding:.7rem .9rem !important;font-size:.95rem !important;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:.1rem}
.wf-wizard-stage .wfa-opt b{font-weight:600}
.wf-wizard-stage .wfa-opt small{font-size:.72rem;color:#A8A29E;font-weight:400;line-height:1.3}
.wf-wizard-stage .wfa-opt.on small{color:inherit;opacity:.75}
.wf-wizard-stage .wfa-ctas{border-top:1px solid var(--wf-line);margin-top:1.25rem;padding-top:1.05rem}
.wf-wizard-stage .wfa-ctas > :only-child{grid-column:1 / -1}
.wf-wizard-stage .wfa-group{margin-bottom:.95rem !important}
.wf-wizard-stage .wfa-group label{margin-bottom:.35rem !important}
.wf-wizard-stage .wfa-opt{min-height:2.5rem !important;padding:.5rem .7rem !important;font-size:.9rem !important}
.wf-wizard-stage .wfa-desc{font-size:.8125rem !important;margin-bottom:.3rem}
.wf-wizard-stage input[data-fit-input]{padding-top:.6rem !important;padding-bottom:.6rem !important}
.wf-wizard-stage .wfa-title{font-size:1.35rem !important;margin-bottom:.35rem}
.wf-wizard-stage .wfa-skip-top{margin:.05rem 0 .7rem}
.wf-wizard-stage .wfa-ctas{padding-top:.7rem}

/* Dense cards: 3+ text inputs run two-up; option groups keep the full row */
.wfa-fields-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:1.25rem}
.wfa-fields-grid .wfa-group:has(.wfa-opts):not([data-opts="2"]){grid-column:1 / -1}
.wfa-fields-grid .wfa-group[data-opts="2"] .wfa-opts{--cols:2}
@media (max-width:560px){.wfa-fields-grid{grid-template-columns:1fr}}

/* Bottom Skip + Back = the site's SECONDARY on white (2px red border, red ink) */
.wfa .wfa-ctas .wfa-btn-quiet{background:#fff !important;border:2px solid var(--wf-accent) !important;color:var(--wf-accent) !important;font-weight:var(--wf-btn-weight) !important}
.wfa .wfa-ctas .wfa-btn-quiet:hover{background:rgba(var(--wf-accent-rgb),.08) !important}
/* Top skip-out = a quiet red link with the bolt, never competing with the primary */
.wfa .wfa-skip-top{margin:.15rem 0 1.05rem}
.wfa .wfa-skip-top button{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:0;color:var(--wf-accent);font-weight:600;font-size:.875rem !important;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-family:var(--wf-font-body)}
.wfa .wfa-skip-top button:hover{color:var(--wf-accent-hover)}
.wfa .wfa-skip-top svg{width:.95rem;height:.95rem}
/* The inline "Change" build link stays a LINK (never a bordered button) */
.wfa [data-wfa-config-change]{background:none !important;border:0 !important;padding:0 !important;color:var(--wf-accent) !important;text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* Per-step validation: the miss state */
.wfa .wfa-group.miss label{color:var(--wf-accent) !important}
.wfa .wfa-group.miss input{border-color:var(--wf-accent) !important}
.wfa .wfa-group.miss .wfa-opt{border-color:rgba(var(--wf-accent-rgb),.55)}

/* ── Form readability (Matt 8/11: the flow form reads small — bump it) ── */
/* Questions bold, OPTIONS regular (Matt 8/11) */
.wfa label{font-weight:700 !important}
.wfa .wfa-opt{font-weight:400 !important}
.wfa{font-size:1.0625rem !important}
.wfa label{font-size:1rem !important}
.wfa input,.wfa select,.wfa textarea{font-size:1.0625rem !important}
.wfa small,.wfa .wfa-hint,.wfa .wfa-help,.wfa .wfa-note{font-size:.9375rem !important}
.wfa .wfa-btn{font-size:1rem !important}
.wfa .wfa-eyebrow,.wfa .wfa-pp-eyebrow{font-size:.8125rem !important}

/* ── Fleet chrome laws for the absorb flow (toolkit v1.0.0; icons-left etc.) ── */
/* Icons LEFT on every CTA — flip engine buttons built icon-last. */
.wfa .wfa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--wf-radius-field) !important; }
.wfa button:has(> svg:last-child):not(:has(> svg:first-child)) { flex-direction: row-reverse; }
/* Quiet buttons read as outline-secondary, not borderless afterthoughts. */
.wfa .wfa-btn-quiet { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border: 1px solid var(--wf-secondary); border-radius: var(--wf-radius-field); color: var(--wf-secondary); font-weight: 600; background: var(--wf-card-bg); }
.wfa .wfa-btn-quiet:hover { background: var(--wf-canvas); }
/* The fit-verified banner joins the system: hairline, brand inks. */
.wfa .wfa-ok { background: var(--wf-canvas); border: 1px solid var(--wf-line-strong); border-radius: var(--wf-radius-field); color: var(--wf-ink); font-weight: 600; }
.wfa .wfa-ok svg { stroke: var(--wf-secondary); }
/* The wait screen loses the foreign dark curtain — one processing language
   with the visualizer: light plate, brand inks, accent flame. */
.wfa .wfa-wait { background: var(--wf-canvas); color: var(--wf-ink); border: 1px solid var(--wf-line); border-radius: var(--wf-radius-field); }
.wfa .wfa-wait .wfa-flame svg { stroke: var(--wf-accent); }
.wfa .wfa-wait .wfa-status { color: var(--wf-eyebrow); }
.wfa .wfa-wait .wfa-note { color: var(--wf-body); opacity: 1; }

/* ═══ Bowden's Fireside overrides (the 8/14 TPF shim, re-tokened via FC) — ride LAST ═══ */
/* Bottom Skip + Back = the site's SECONDARY on white (FC: charcoal outline —
   orange stays reserved for the ONE ask, the primary beside it) */
.wfa .wfa-ctas .wfa-btn-quiet{background:#fff !important;border:1.5px solid var(--wf-secondary) !important;color:var(--wf-secondary) !important;font-weight:var(--wf-btn-weight) !important}
.wfa .wfa-ctas .wfa-btn-quiet:hover{background:var(--wf-canvas) !important}
/* Top skip-out = a quiet red link with the bolt, never competing with the primary */
.wfa .wfa-skip-top{margin:.15rem 0 1.05rem}
.wfa .wfa-skip-top button{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:0;color:var(--wf-accent);font-weight:600;font-size:.875rem !important;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-family:var(--wf-font-body)}
.wfa .wfa-skip-top button:hover{color:var(--wf-accent-hover)}
.wfa .wfa-skip-top svg{width:.95rem;height:.95rem}
/* The inline "Change" build link stays a LINK (never a bordered button) */
.wfa [data-wfa-config-change]{background:none !important;border:0 !important;padding:0 !important;color:var(--wf-accent) !important;text-decoration:underline;text-underline-offset:2px;font-weight:600}
/* Per-step validation: the miss state */
.wfa .wfa-group.miss label{color:var(--wf-accent) !important}
.wfa .wfa-group.miss input{border-color:var(--wf-accent) !important}
.wfa .wfa-group.miss .wfa-opt{border-color:rgba(var(--wf-accent-rgb),.55)}

/* ── Form readability (Matt 8/11: the flow form reads small — bump it) ── */
/* Questions bold, OPTIONS regular (Matt 8/11) */
.wfa label{font-weight:700 !important}
.wfa .wfa-opt{font-weight:400 !important}
.wfa{font-size:1.0625rem !important}
.wfa label{font-size:1rem !important}
.wfa input,.wfa select,.wfa textarea{font-size:1.0625rem !important}
.wfa small,.wfa .wfa-hint,.wfa .wfa-help,.wfa .wfa-note{font-size:.9375rem !important}
.wfa .wfa-btn{font-size:1rem !important}
.wfa .wfa-eyebrow,.wfa .wfa-pp-eyebrow{font-size:.8125rem !important}

/* ── Fleet chrome laws for the absorb flow (toolkit v1.0.0; icons-left etc.) ── */
/* Icons LEFT on every CTA — flip engine buttons built icon-last. */
.wfa .wfa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--wf-radius-field) !important; }
.wfa button:has(> svg:last-child):not(:has(> svg:first-child)) { flex-direction: row-reverse; }
/* Quiet buttons read as outline-secondary, not borderless afterthoughts. */
.wfa .wfa-btn-quiet { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border: 1px solid var(--wf-secondary); border-radius: var(--wf-radius-field); color: var(--wf-secondary); font-weight: 600; background: var(--wf-card-bg); }
.wfa .wfa-btn-quiet:hover { background: var(--wf-canvas); }
/* The fit-verified banner joins the system: hairline, brand inks. */
.wfa .wfa-ok { background: var(--wf-canvas); border: 1px solid var(--wf-line-strong); border-radius: var(--wf-radius-field); color: var(--wf-ink); font-weight: 600; }
.wfa .wfa-ok svg { stroke: var(--wf-secondary); }
/* The wait screen loses the foreign dark curtain — one processing language
   with the visualizer: light plate, brand inks, accent flame. */
.wfa .wfa-wait { background: var(--wf-canvas); color: var(--wf-ink); border: 1px solid var(--wf-line); border-radius: var(--wf-radius-field); }
.wfa .wfa-wait .wfa-flame svg { stroke: var(--wf-accent); }
.wfa .wfa-wait .wfa-status { color: var(--wf-eyebrow); }
.wfa .wfa-wait .wfa-note { color: var(--wf-body); opacity: 1; }

/* ── THE RESULT-SHEET SHIM (TPF 8/14): the bundle's result layer bakes
   F&BBQC page classes (btn/card-plain/tab/stone-x/rounded-md + inline
   Roboto/Oswald). Conform them to THIS site's tokens HERE so the bundle
   stays fleet-canonical — zero divergence. ── */
:is(.wfa-sheet,.steps-section,.results-section-wrap) .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;font-family:var(--wf-font-btn);font-weight:var(--wf-btn-weight);font-size:1rem;border-radius:var(--wf-btn-radius);text-decoration:none;transition:background .2s ease,border-color .2s ease}
:is(.wfa-sheet,.steps-section,.results-section-wrap) .btn-primary{background:var(--wf-accent);color:var(--wf-accent-ink)}
:is(.wfa-sheet,.steps-section,.results-section-wrap) .btn-primary:hover{background:var(--wf-accent-hover)}
:is(.wfa-sheet,.steps-section,.results-section-wrap) .btn-secondary{background:var(--wf-secondary);color:var(--wf-secondary-ink)}
:is(.wfa-sheet,.steps-section,.results-section-wrap) .btn-secondary:hover{background:var(--wf-secondary-hover)}
:is(.wfa-sheet,.steps-section,.results-section-wrap) .card-plain{background:var(--wf-card-bg);border:1px solid var(--wf-line);border-radius:var(--wf-radius-card)}
.wfa-sheet .card-plain{padding:1.5rem}
:is(.wfa-sheet,.steps-section,.results-section-wrap) .tab{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--wf-body)}
:is(.wfa-sheet,.steps-section,.results-section-wrap) .rounded-md{border-radius:var(--wf-radius-card) !important}
.wfa-sheet .border-stone-300{border-color:var(--wf-line-strong)}
.wfa-sheet .border-stone-200{border-color:var(--wf-line)}
.wfa-sheet .text-stone-400,.wfa-sheet .text-stone-500,.wfa-sheet .text-stone-600{color:var(--wf-body)}
.wfa-sheet .text-stone-900{color:var(--wf-ink)}
.wfa-sheet [style*="Roboto"],.wfa-sheet [style*="Oswald"]{font-family:var(--wf-font-body) !important}
.results-section-wrap .lk{color:var(--wf-accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;font-size:.8125rem}
.results-section-wrap .lk:hover{color:var(--wf-accent-hover)}
/* The plate wears the packet frame (WP law: no photo floats bare) */
.wfa-sheet figure{border:1px solid var(--wf-line-strong) !important;outline:1px solid var(--wf-line-strong);outline-offset:3px;border-radius:0 !important;margin:4px}
.wfa-sheet figure img{border-radius:0}

/* Quiet/undo rail buttons — v2-proof selector: white + charcoal, never gray fill */
.wfa .wfa-btn-quiet,.wf-wizard-stage .wfa-btn-quiet{background:#fff !important;border:1.5px solid var(--wf-secondary) !important;color:var(--wf-secondary) !important;border-radius:var(--wf-btn-radius) !important}
.wfa .wfa-btn-quiet:hover,.wf-wizard-stage .wfa-btn-quiet:hover{background:color-mix(in srgb, var(--wf-secondary) 6%, #fff) !important}