/* ==========================================================================
   Money Hawk — shared tool theme
   The single source of truth for brand tokens and the primitives both tools
   share (page shell, lockup, hero, bands, cards, buttons, footer, icon sprite).
   Page-specific CSS stays inline in each tool's <style>. Edit here, never in
   a page, or the two tools drift.

   Palette is the verified Concept One set, same hexes as match.moneyhawk.au.
   Fonts are self-hosted variable woff2 (latin), so there is no third-party
   request on the critical path and style-src can stay locked down.
   ========================================================================== */

/* ---------- fonts: one variable file per family, all weights ---------- */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/tools/assets/fonts/archivo-latin-var.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;
}
/* The brand spec is explicit that the wordmark is Archivo Bold Italic, so a
   synthesised slant is not good enough. The full italic face is 38KB for two
   words, so this is subsetted to exactly the ten glyphs in "MONEY HAWK": 1.6KB.
   If a future page needs italic Archivo for real copy, pull the full face from
   Google Fonts (family=Archivo:ital,wght@1,400..800) rather than widening this. */
@font-face{
  font-family:'Archivo Wordmark';
  font-style:italic;
  font-weight:800;
  font-display:swap;
  src:url('/tools/assets/fonts/archivo-wordmark-italic.woff2') format('woff2');
  unicode-range:U+20,U+41,U+45,U+48,U+4B,U+4D-4F,U+57,U+59;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/tools/assets/fonts/montserrat-latin-var.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;
}

/* ---------- tokens ---------- */
:root{
  /* brand */
  --brown:#924B13; --brown-deep:#6F390E; --brown-lift:#B45E1B;
  --charcoal:#313233; --charcoal-2:#232425; --charcoal-3:#1A1B1C;
  --off:#F4F3E7; --citrine:#ECE55A; --powder:#93B6EE;
  /* ad creative palette (hero + CTA match the powder-blue Meta creative) */
  --ad-blue:#95B4E7; --ad-blue-deep:#7C9FD8; --ad-ink:#352D29;
  --ad-citrine:#F3DA69; --ad-brown:#8A4A17;
  /* surfaces. White is the page now; off-white is a band colour, not the canvas. */
  --paper:#FFFFFF;
  /* ink */
  --ink:#313233; --ink-soft:#5C5D5F;
  /* the brand's warm 1px hairline. Carries the structure that shadows used to. */
  --line:#DFDDCF; --line-soft:#EDEBE0;
  /* status: contrast-checked against their own backgrounds at AA */
  --ok:#166B41;   --ok-bg:#E7F4ED;   --ok-line:rgba(22,107,65,.3);
  --warn:#7D5606; --warn-bg:#FCF3D9; --warn-line:rgba(125,86,6,.32);
  --bad:#8C2B2B;  --bad-bg:#FAEBEA;  --bad-line:rgba(140,43,43,.28);
  /* type */
  --fd:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fb:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Elevation is nearly gone in the white direction. Structure comes from the
     hairline, not from drop shadows. These stay defined so the few genuinely
     floating things (nothing today) have a token to reach for. */
  --sh:none;
  --sh-lg:0 1px 2px rgba(49,50,51,.04),0 12px 32px -16px rgba(49,50,51,.18);
  /* radii, straight off the brand spec: buttons 9, cards 14, pills 999 */
  --r-sm:9px; --r-md:14px; --r-lg:14px;
}

/* ---------- reset / shell ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* clip, never hidden. overflow-x:hidden on html/body kills wheel and touch
     scrolling in some engines; this bit the match page once already. */
  overflow-x:clip;
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fb);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;overscroll-behavior-y:none;
}
h1,h2,h3,h4,h5{font-family:var(--fd);margin:0;color:var(--charcoal);letter-spacing:-.012em}
a{color:var(--brown);text-underline-offset:3px}
img{max-width:100%}
.wrap{
  max-width:1120px;margin:0 auto;
  /* viewport-fit=cover means landscape on a notched phone puts the cutout over
     the left or right gutter, so the gutter has to be at least the inset. */
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right));
}
.narrow{max-width:820px}

/* visible focus for every interactive thing, keyboard only */
:focus-visible{outline:3px solid var(--brown);outline-offset:2px;border-radius:4px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--charcoal);color:var(--citrine);
  font-family:var(--fd);font-weight:700;padding:12px 18px;border-radius:0 0 10px 0;
}
.skip:focus{left:0}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- icon sprite: 4x4 grid of engraved marks, one 25KB webp ---------- */
.mhi{
  display:inline-block;flex:0 0 auto;
  background-image:url('/tools/assets/sprite.webp');
  background-size:400% 400%;background-repeat:no-repeat;
  width:24px;height:24px;
}
.i-shield   {background-position:0      0}
.i-scales   {background-position:33.333% 0}
.i-hawk     {background-position:66.667% 0}
.i-licence  {background-position:100%    0}
.i-pen      {background-position:0      33.333%}
.i-docs     {background-position:33.333% 33.333%}
.i-phone    {background-position:66.667% 33.333%}
.i-calendar {background-position:100%    33.333%}
.i-house    {background-position:0      66.667%}
.i-padlock  {background-position:33.333% 66.667%}
.i-cabinet  {background-position:66.667% 66.667%}
.i-loop     {background-position:100%    66.667%}
.i-coins    {background-position:0      100%}
.i-stopwatch{background-position:33.333% 100%}
.i-chartdown{background-position:66.667% 100%}
.i-warning  {background-position:100%    100%}

/* ---------- brand lockup ---------- */
.lockup{display:flex;align-items:center;gap:12px}
.lockup img{width:44px;height:47px;display:block;filter:drop-shadow(0 3px 10px rgba(0,0,0,.32))}
.lockup .lk-name{
  /* 'Archivo Wordmark' first: the subsetted italic face. Anything outside the
     ten wordmark glyphs falls through to normal Archivo. */
  font-family:'Archivo Wordmark',var(--fd);font-style:italic;font-weight:800;font-size:17px;
  letter-spacing:.055em;color:var(--charcoal);line-height:1;
}
.lockup .lk-tag{
  font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:4px;
}
/* on the charcoal footer and the dark CTA the wordmark goes citrine, per brand */
.lockup.on-dark .lk-name{color:var(--citrine)}
.lockup.on-dark .lk-tag{color:rgba(244,243,231,.6)}

/* ---------- hero (powder blue, matches the ad creative) ---------- */
/* White hero. No gradient, no colour wash, no bled background decal: the page
   is the canvas and the mascot is a real object in a real column, which is what
   lets it be a proper 3D render rather than wallpaper. */
.hero{position:relative;background:var(--paper);color:var(--ink);padding:26px 0 0;border-bottom:1px solid var(--line)}
.hero .wrap{position:relative;z-index:2}
.hero-main{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:end;
  padding-bottom:0;
}
.hero-copy{padding-bottom:56px}
/* Capped on both axes on purpose. The three mascot renders have different
   aspect ratios, and a width-only cap let the tallest one set the hero height
   and strand the headline in a void above it. */
.hero-mascot{
  align-self:end;justify-self:center;display:block;
  width:auto;height:auto;max-width:380px;max-height:430px;
}
@media(max-width:900px){
  .hero-main{grid-template-columns:1fr;gap:0}
  .hero-copy{padding-bottom:20px}
  /* Deliberately small on a phone. Every pixel of mascot here is a pixel of
     scroll between the headline and the tool, and the tool is the point. */
  .hero-mascot{max-width:180px;justify-self:center;margin-bottom:-1px}
}
/* type scale straight off the brand spec: H1 40, lead 18 */
.hero-grid{margin-top:34px;max-width:min(100%,720px)}
.hero .lockup img{filter:none}
.hero h1{font-size:clamp(30px,4.2vw,40px);font-weight:800;line-height:1.12;color:var(--charcoal);margin:18px 0 0;max-width:20ch}
.hero .lead{max-width:600px;margin:18px 0 0;color:var(--ink-soft);font-size:18px;line-height:1.6;font-weight:400}

/* Citrine marker-pen highlight. Sits BEHIND the lower two thirds of the glyphs,
   not under them: at .74em the bar drops below the baseline and reads as a
   stray double underline once a headline wraps mid-phrase. box-decoration-break
   keeps it continuous across line breaks. */
.hl{
  position:relative;display:inline;z-index:1;
  background:linear-gradient(var(--ad-citrine),var(--ad-citrine));
  background-size:100% .58em;background-position:0 .46em;background-repeat:no-repeat;
  padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---------- flag / chips / pills ---------- */
.flag{
  width:fit-content;max-width:100%;display:inline-flex;align-items:center;gap:9px;
  background:var(--charcoal);border:0;color:var(--citrine);
  font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;box-shadow:none;
}
.flag .mhi{width:20px;height:20px;margin-right:-2px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  font-size:13px;font-weight:500;color:var(--ink-soft);
}
.chip b{color:var(--brown);font-family:var(--fd);font-weight:800}
.pill{font-family:var(--fd);font-size:12px;font-weight:800;letter-spacing:.06em;padding:5px 12px;border-radius:99px}
.pill.g{background:var(--ok-bg);color:var(--ok)}
.pill.a{background:var(--warn-bg);color:var(--warn)}
.pill.r{background:var(--bad-bg);color:var(--bad)}

/* ---------- regulator quote band ---------- */
.band{background:var(--ad-brown);color:#fff;position:relative;overflow:hidden}
.band:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,0,0,.24),transparent 55%)}
.band .wrap{position:relative;padding:34px 24px;display:grid;grid-template-columns:1fr 262px;gap:30px;align-items:center}
.band blockquote{margin:0;font-family:var(--fd);font-weight:700;font-size:clamp(19px,2.5vw,25px);line-height:1.34;color:#fff}
.band blockquote:before{content:"\201C";font-size:1.8em;line-height:0;vertical-align:-.32em;color:var(--citrine);margin-right:.04em}
.band .attr{font-size:13.4px;line-height:1.55;color:rgba(255,255,255,.9)}
.band .attr b{display:block;font-family:var(--fd);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--citrine);margin-bottom:7px}
/* This sits on its own line after a break, so it reads as a standalone action
   rather than a link inside a sentence, and WCAG 2.5.8's inline exception does
   not cover it. Same 44px treatment the footer links got in the device pass. */
.band .attr a{color:#fff;display:inline-flex;align-items:center;min-height:44px}

/* ---------- stat band ---------- */
.stats{background:var(--charcoal);color:var(--off);padding:38px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
.stat .n{font-family:var(--fd);font-weight:800;font-size:clamp(38px,5.5vw,52px);line-height:1;color:var(--citrine)}
.stat .t{margin-top:10px;font-size:14.4px;line-height:1.5;color:rgba(244,243,231,.84)}
.stat .t b{color:#fff}

/* ---------- panel (the input card that overlaps the hero) ---------- */
.panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;
  margin-top:36px;position:relative;z-index:5;box-shadow:none;
}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.panel-head h2{font-size:23px;font-weight:800}
.panel-head p{margin:5px 0 0;font-size:14px;color:var(--ink-soft)}
/* UNUSED, and a landmine. This pill is referenced by no page in the repo, but
   its name is generic enough that the question flow was once called .step too.
   Every question then inherited this rule's white-space:nowrap, uppercase,
   letter-spacing and pill background, and shipped to production overflowing and
   unreadable. That is why the whole question flow is namespaced qz-. If you
   delete this, check nothing picks it up; if you keep it, do not reuse the name. */
.step{
  font-family:var(--fd);font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brown);background:rgba(146,75,19,.09);border-radius:99px;padding:7px 14px;white-space:nowrap;
}

/* ---------- form controls ---------- */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.field label,label.fl{
  display:block;font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brown);margin-bottom:8px;
}
select,input[type=number],input[type=text]{
  width:100%;padding:14px 15px;border:1.5px solid rgba(49,50,51,.18);border-radius:12px;
  font-family:var(--fb);font-size:16px;font-weight:600;color:var(--ink);background:#fff;
  appearance:none;transition:border-color .15s,box-shadow .15s;
}
select:hover,input:hover{border-color:rgba(146,75,19,.42)}
select:focus,input:focus{outline:none;border-color:var(--brown);box-shadow:0 0 0 4px rgba(146,75,19,.11)}
select:focus-visible,input:focus-visible{outline:3px solid var(--brown);outline-offset:2px}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23924B13' stroke-width='2.2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;
}
.hint{font-size:12.4px;color:var(--ink-soft);margin-top:7px;line-height:1.45}
.toggle{display:flex;gap:9px}
.toggle button{
  flex:1;padding:14px 8px;border:1.5px solid rgba(49,50,51,.18);background:#fff;border-radius:12px;
  font-family:var(--fb);font-weight:700;font-size:15px;color:var(--ink-soft);cursor:pointer;transition:.15s;
}
.toggle button:hover{border-color:rgba(146,75,19,.42)}
.toggle button[aria-checked=true],.toggle button[aria-pressed=true]{
  background:var(--charcoal);border-color:var(--charcoal);color:var(--citrine);
  box-shadow:0 5px 16px -6px rgba(49,50,51,.55);
}

/* ---------- result tiles ---------- */
.tiles{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px}
.tile{border-radius:var(--r-md);padding:20px;border:1px solid var(--line);background:var(--paper);position:relative;overflow:hidden}
.tile .n{font-family:var(--fd);font-size:44px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.tile .lb{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-top:9px}
.tile .ds{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.45}
.tile.g{background:var(--ok-bg);border-color:var(--ok-line)}   .tile.g .n,.tile.g .lb{color:var(--ok)}
.tile.a{background:var(--warn-bg);border-color:var(--warn-line)} .tile.a .n,.tile.a .lb{color:var(--warn)}
.tile.r{background:var(--bad-bg);border-color:var(--bad-line)}  .tile.r .n,.tile.r .lb{color:var(--bad)}

/* ---------- verdict ---------- */
.verdict{
  margin-top:22px;background:var(--charcoal);color:var(--off);
  border-radius:var(--r-md);padding:26px 28px;position:relative;overflow:hidden;
}
.verdict>*{position:relative}
.verdict h3{color:var(--citrine);font-size:20px;font-weight:800;margin-bottom:9px;line-height:1.24}
.verdict p{margin:0;font-size:16px;color:rgba(244,243,231,.92)}

/* ---------- sections ---------- */
section{padding:52px 0 0}
.sec-h{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:7px}
.sec-h h2{font-size:clamp(23px,3vw,32px);font-weight:800}
.sec-n{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--brown)}
.sec-sub{color:var(--ink-soft);font-size:15.5px;margin:0 0 22px;max-width:740px}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:16px;align-items:start}
/* content-visibility lets the browser skip layout and paint for the cards that
   are still below the fold. The decoder renders 23 of these at once and style
   and layout was costing more than twice what it costs on a page with 16 simpler
   blocks; this is the single biggest lever on that. contain-intrinsic-size gives
   the scrollbar a sane guess before a card has ever been laid out, and `auto`
   makes the browser remember the real height once it has. */
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;
  box-shadow:none;transition:border-color .18s;position:relative;overflow:hidden;
  content-visibility:auto;contain-intrinsic-size:auto 330px;
}
.card:hover{border-color:var(--brown)}
.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--line)}
.card.g:before{background:var(--ok)} .card.a:before{background:var(--warn)} .card.r:before{background:var(--bad)}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-left:8px}
.card .lender{font-family:var(--fd);font-weight:800;font-size:18px;color:var(--charcoal);line-height:1.2}
.card .prod{font-size:13.4px;color:var(--ink-soft);margin-top:3px}
.card .amt{
  font-family:var(--fd);font-weight:800;font-size:13px;color:var(--brown);white-space:nowrap;
  text-align:right;line-height:1.35;background:rgba(146,75,19,.08);border-radius:9px;padding:8px 11px;
}
.reasons{margin:14px 0 0 8px;padding:0;list-style:none;font-size:14px}
.reasons li{padding:7px 0 7px 25px;position:relative;line-height:1.5;border-top:1px solid rgba(49,50,51,.07)}
.reasons li:first-child{border-top:0}
.reasons li:before{
  position:absolute;left:0;top:7px;width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;font-size:10.5px;font-weight:800;font-family:var(--fd);
}
.reasons li.y:before{content:"\2713";background:var(--ok-bg);color:var(--ok)}
.reasons li.n:before{content:"\2715";background:var(--bad-bg);color:var(--bad)}
.reasons li.w:before{content:"!";background:var(--warn-bg);color:var(--warn)}
.note{margin:13px 0 0 8px;border-radius:var(--r-sm);padding:12px 14px;font-size:13.8px;line-height:1.5}
.note.blue{background:rgba(147,182,238,.16);color:#28405F}
.note.blue b{font-family:var(--fd);color:#1D3149}
.note.amber{background:var(--warn-bg);color:#63490A}
.note.amber b{font-family:var(--fd)}
.src{margin:13px 0 0 8px;font-size:12px}
.src a{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted rgba(92,93,95,.55)}
.src a:hover{color:var(--brown);border-color:var(--brown)}

/* ---------- feature block (brown, gridded) ---------- */
.tier{
  background:var(--brown);color:var(--off);
  border-radius:var(--r-md);padding:38px 34px;margin-top:22px;position:relative;overflow:hidden;box-shadow:none;
}
.tier>*{position:relative}
/* no override: the base charcoal pill with citrine text is the only
   combination that clears AA on the brown ground. Citrine-on-brown was
   3.67:1. */
.tier h2{color:#fff;font-size:clamp(25px,3.4vw,34px);font-weight:800;margin:18px 0 10px;max-width:20ch}
.tier h2 em{font-style:normal;color:var(--citrine)}
.tier>p{color:rgba(255,255,255,.88);font-size:16.5px;max-width:730px;margin:0 0 26px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14.4px;min-width:660px}
.tbl th{
  font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;padding:0 14px 11px 0;color:var(--citrine);border-bottom:1.5px solid rgba(255,255,255,.3);
}
.tbl td{padding:14px 14px 14px 0;border-bottom:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.94);vertical-align:top;line-height:1.45}
.tbl td:first-child{font-family:var(--fd);font-weight:800;color:#fff;white-space:nowrap}
.tbl .gap{color:var(--citrine);font-weight:600}
.tierfoot{margin-top:26px;padding:20px 22px;background:rgba(0,0,0,.22);border-radius:14px;font-size:16px;color:#fff;line-height:1.55}
.tierfoot b{color:var(--citrine);font-family:var(--fd)}

/* ---------- fact cards ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:16px}
.fact{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;box-shadow:none;transition:border-color .18s}
.fact:hover{border-color:var(--brown)}
.fact .ico{width:44px;height:44px;display:block;margin-bottom:12px}
.fact h4{font-size:17px;font-weight:800;margin-bottom:9px;line-height:1.28}
.fact p{margin:0 0 10px;font-size:14.4px;color:var(--ink-soft);line-height:1.6}
.fact p:last-of-type{margin-bottom:0}
.fact q{display:block;font-style:italic;color:var(--charcoal);border-left:3px solid var(--citrine);padding-left:13px;margin:11px 0;font-size:14.2px;line-height:1.55}
.fact .cite{font-size:12px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.fact .cite a{color:var(--ink-soft);text-decoration:none;border-bottom:1px dotted rgba(92,93,95,.5)}
.fact .cite a:hover{color:var(--brown)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;font-family:var(--fd);font-weight:800;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;background:var(--brown);color:var(--off);border:0;
  border-radius:var(--r-sm);padding:16px 28px;cursor:pointer;text-decoration:none;
  transition:background .16s;box-shadow:none;
}
.btn:hover{background:var(--brown-deep)}
/* the circular arrow the ad CTA carries */
.btn .btn-arrow{
  width:26px;height:26px;border-radius:50%;background:rgba(244,243,231,.18);
  display:grid;place-items:center;flex:0 0 auto;
}
.btn.citrine{background:var(--citrine);color:var(--charcoal)}
.btn.citrine:hover{background:#E3DB4A}
.btn.citrine .btn-arrow{background:rgba(49,50,51,.14)}
.btn.ghost{background:transparent;color:var(--citrine);border:1.5px solid rgba(236,229,90,.5)}
.btn.ghost:hover{background:rgba(236,229,90,.1)}
.btn.quiet{
  background:var(--paper);color:var(--ink-soft);border:1px solid var(--line);box-shadow:none;
  font-family:var(--fb);font-weight:600;font-size:13px;text-transform:none;letter-spacing:0;
  padding:12px 17px;min-height:44px;border-radius:var(--r-sm);
}
.btn.quiet:hover{border-color:var(--brown);color:var(--brown);background:var(--paper)}

/* ---------- CTA ---------- */
/* The single dark moment on an otherwise white page. Charcoal ground, citrine
   button: the ad-4 treatment, and the brand rule that citrine only ever carries
   charcoal text holds here too. */
.cta{
  margin-top:56px;background:var(--charcoal);color:var(--off);border-radius:var(--r-md);
  padding:40px 34px;position:relative;overflow:hidden;box-shadow:none;
}
/* The logo hawk is brown line art, which goes muddy on charcoal. The brand
   renders the mark light on dark grounds, so it is knocked out to an off-white
   silhouette and dropped to watermark strength. */
.cta-bird{
  position:absolute;right:20px;bottom:6px;width:min(180px,25vw);height:auto;z-index:1;
  pointer-events:none;opacity:.13;filter:brightness(0) invert(1);
}
.cta>*:not(.cta-bird){position:relative;z-index:2}
.cta h2{color:var(--off);font-size:clamp(24px,3.2vw,32px);font-weight:800;max-width:18ch;line-height:1.14}
.cta h2 em{font-style:normal;color:var(--citrine)}
.cta p{color:rgba(244,243,231,.8);font-weight:400;font-size:16px;max-width:560px;margin:16px 0 26px}
.cta .fineprint{font-size:13px;color:rgba(244,243,231,.6);margin:20px 0 0;max-width:560px}
@media(max-width:700px){.cta-bird{display:none}}

/* ---------- disclosure strip: the referral-fee line, in body copy not just the footer ---------- */
.disclose{
  margin-top:38px;background:var(--off);border:1px solid var(--line);border-left:4px solid var(--brown);
  border-radius:var(--r-md);padding:20px 22px;box-shadow:none;
}
.disclose h3{font-size:14px;font-weight:800;margin-bottom:7px}
.disclose p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.6}
.disclose p+p{margin-top:8px}

/* ---------- footer ---------- */
footer{margin-top:56px;background:var(--charcoal-3);color:rgba(244,243,231,.68);padding:38px 0;font-size:13px;line-height:1.68}
footer .foot-top{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid rgba(244,243,231,.13);
}
footer strong{color:var(--citrine)}
footer a{color:rgba(244,243,231,.9)}
.disclaimer{max-width:880px}
.disclaimer p{margin:0 0 12px}
.disclaimer p:last-child{margin-bottom:0}
/* Standalone nav, not inline prose, so WCAG 2.5.8 applies: 44px minimum. The
   vertical padding is what gets it there without changing the type size. */
.foot-nav{display:flex;gap:4px 18px;flex-wrap:wrap;font-size:13px;margin:-10px 0}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px}
footer a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .band .wrap{grid-template-columns:1fr;gap:18px;padding:28px 24px}
  .hero-bird{opacity:.5;right:-70px;width:58vw;bottom:-22px}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .hero{padding:22px 0 66px}
  .panel{padding:22px 18px;border-radius:var(--r-md);margin-top:-46px}
  .tier{padding:26px 20px}
  .cta{padding:30px 22px}
  .cta-bird{opacity:.55}
  .tile .n{font-size:38px}
  .btn{width:100%;justify-content:center}
}

/* ---------- short viewports: a phone held sideways ----------
   393px of height is the whole screen, so a 40px headline plus a five-line lead
   plus a decorative mascot is three swipes before the tool is even visible.
   Height, not width, is the constraint here, so the query keys off height. */
@media(max-height:520px) and (orientation:landscape){
  .hero{padding:14px 0 0}
  .hero-grid{margin-top:18px}
  .hero h1{font-size:26px;margin-top:14px}
  .hero .lead{font-size:15px;margin-top:12px;line-height:1.5}
  .hero .chips{margin-top:14px}
  .flag{padding:7px 13px;font-size:12px}
  /* purely decorative, and the most expensive thing on screen in vertical pixels */
  .hero-mascot{display:none}
  .hero-copy{padding-bottom:18px}
  section{padding:32px 0 0}
  .cta{padding:26px 22px;margin-top:32px}
}

/* ---------- motion / contrast preferences ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.rv.in{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .card:hover,.fact:hover,.btn:hover{transform:none}
}
@media(forced-colors:active){
  .card:before,.tile,.chip,.pill{forced-color-adjust:none}
  .btn{border:1px solid ButtonText}
}

/* ---------- print: the page becomes the sheet you take to the lender ---------- */
@media print{
  /* Hide every <button>: on paper a control does nothing. Do NOT hide .btn
     wholesale, because the AFCA register link inside check 1 is an <a class="btn
     quiet"> and it is the single most useful thing to carry off this page. It
     prints as a plain line with its URL appended by the a[href] rule below. */
  .hero,.band,.stats,.cta,button,.toggle,.qz-opts,.scorebar,.skip,.noprint{display:none!important}
  a.btn{
    display:inline!important;background:none!important;color:#000!important;box-shadow:none!important;
    padding:0!important;font-size:11pt;text-transform:none;letter-spacing:0;
  }
  body{background:#fff;font-size:11pt}
  .wrap{max-width:100%;padding:0}
  /* content-visibility:auto would skip every off-screen card at print time and
     hand the printer blank space, so it is forced back on for paper. */
  .card{content-visibility:visible!important;contain-intrinsic-size:auto!important}
  .card,.fact,.check,.tier,.panel{break-inside:avoid;box-shadow:none;border:1px solid #ccc}
  .tier,.verdict,.sheet{background:#fff!important;color:#000!important}
  .tier h2,.tier p,.tier td,.tier th,.verdict h3,.verdict p{color:#000!important}
  a[href^="http"]:after{content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all}
  /* The sprite icons are CSS background-images and most people print with
     background graphics off, which would leave a column of empty 48px boxes
     down the sheet. Drop them; the check number and question carry the meaning. */
  .mhi{display:none!important}
}

/* ==========================================================================
   MULTI-STEP FLOW + UNLOCK GATE
   Added 19 Aug 2026 when the tools went from ungated single-page readers to
   gated multi-step forms. The pattern is match.moneyhawk.au's, on purpose:
   one question per screen, the tap is the Next button, and the progress bar
   reads 100% before the contact ask rather than during it.

   Design pass, same day: the flow is where the reader spends all of their
   time, so it carries the brand rather than reading as an unstyled form
   dropped onto a branded page. The card is the branded surface. Structure is
   still hairline and ground colour, never shadow, and the page still keeps
   exactly one dark moment, which is the charcoal CTA, not anything in here.

   Both tools use these. Page-specific styling stays in the page.
   ========================================================================== */

/* ---------- the flow card ----------
   Padding lives in custom properties because three things bleed to the card's
   inner edge (the progress header, the teaser band, the landscape overrides)
   and hard-coding the same number in four places is how those drift apart. */
.qz-card{
  --qz-px:18px;   /* card padding, inline */
  --qz-pt:18px;   /* card padding, top: the progress header eats this back */
  --qz-pb:22px;
  background:var(--paper);
  border:1px solid var(--line);
  /* The one piece of colour the card carries on its own. Same device as
     .disclose's brown left edge: a brand accent on a hairline frame, which is
     how this system does emphasis without reaching for a drop shadow. */
  border-top:3px solid var(--brown);
  border-radius:var(--r-md);
  padding:var(--qz-pt) var(--qz-px) var(--qz-pb);
  max-width:720px;
  /* Vertical breathing room. The card sits between two full-bleed bands (the
     hero or the quote band above, a dark stats or teaching block below) and
     with margin:0 it butted straight up against both, which reads as broken
     rather than tight. The .wrap carries no vertical padding, so the space has
     to live here. */
  margin:44px auto 52px;
  position:relative;
}
@media (min-width:700px){
  .qz-card{--qz-px:32px;--qz-pt:24px;--qz-pb:30px;margin:64px auto 72px}
}

/* The result replaces the card once the gate is passed, so it needs the same
   breathing room. Measured flush at 0px before this: the lender check's dark
   sheet ended exactly where the dark stats band began, and the decoder's
   verdict panel butted straight into its card lists.

   padding, not margin: these wraps carry no border or padding of their own, so
   a child's margin collapses straight through them and the space never lands
   where you expect. */
#result{padding-bottom:52px}
#resultCards{padding-bottom:52px}
@media (min-width:700px){
  #result,#resultCards{padding-bottom:72px}
}

/* ---------- progress ----------
   The bar is the single highest-leverage mechanic on the match form: it hits
   100% BEFORE the contact ask, so the ask reads as collecting a finished
   result rather than as a toll gate. Do not re-scope it to include the gate.

   It sits in an off-white header zone that bleeds to the card's inner edge, so
   the first thing on screen is a branded band with the reader's position in it
   rather than a hairline rule floating above a paragraph. */
.qz-prog{
  margin:calc(var(--qz-pt) * -1) calc(var(--qz-px) * -1) var(--qz-pt);
  padding:13px var(--qz-px) 14px;
  background:var(--off);
  border-bottom:1px solid var(--line);
  /* a touch under the card's 14px so the ground never pokes out of the curve */
  border-radius:11px 11px 0 0;
}
.qz-prog-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 0 9px;
}
.qz-prog-label{
  font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);
}
.qz-prog-pct{
  font-family:var(--fd);font-weight:800;font-size:13px;color:var(--brown);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
/* The track is --line, not --off: on the off-white header an off-white track
   is invisible, and an empty bar has to read as empty. */
.qz-prog-track{
  height:8px;border-radius:999px;background:var(--line);
  overflow:hidden;
}
.qz-prog-fill{
  height:100%;width:0;border-radius:999px;background:var(--brown);
  transition:width .38s cubic-bezier(.4,0,.2,1);
}

/* ---------- steps ---------- */
.qz-step{display:none}
.qz-step.is-active{display:block;animation:stepIn .26s cubic-bezier(.2,.7,.3,1) both}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- type scale ----------
   Order of loudness, and it is deliberate: question, then the answers, then the
   explanation, then the page's own note and citation. Everything below the
   heading is set tighter than the page's body copy, because a question that
   costs three screens before the answers appear is where a multi-step form
   loses people. */
.qz-n{
  font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brown);display:block;margin:0 0 7px;
}
.qz-h{
  font-family:var(--fd);font-weight:800;line-height:1.14;
  font-size:clamp(21px,4.6vw,28px);color:var(--charcoal);margin:0 0 9px;
  letter-spacing:-.018em;text-wrap:balance;
}
.qz-h:focus{outline:none}
.qz-h:focus-visible{outline:2.5px solid var(--brown);outline-offset:4px;border-radius:4px}
.qz-sub{
  font-size:14.6px;line-height:1.55;color:var(--ink-soft);margin:0 0 16px;
  max-width:62ch;
}
.qz-why{
  font-size:14.4px;line-height:1.56;color:var(--ink-soft);margin:0 0 14px;
  max-width:62ch;
}
.qz-why b{color:var(--charcoal);font-weight:700}
/* The pull quote is a regulator or ombudsman speaking, so it gets the same
   citrine-edged treatment .fact q gets in the body of the page. A page may
   override the detail; it must stay a legible block quote either way. */
.qz-why q{
  display:block;font-style:italic;color:var(--charcoal);
  border-left:3px solid var(--citrine);padding-left:13px;
  margin:11px 0;line-height:1.5;
}

/* ---------- answer tiles: the tap IS the next button ----------
   Unselected tiles sit on the off-white band colour so they read as controls
   against the white card rather than as white boxes on white. Hover lifts them
   to paper with a brown edge, selection tints them. Three distinct states, and
   none of them relies on colour alone: the dot fills as well. */
.qz-opts{display:grid;gap:9px;margin:16px 0 4px}
.qz-opt{
  display:flex;align-items:center;gap:13px;width:100%;
  min-height:56px;padding:13px 15px;
  font-family:var(--fb);font-size:15.5px;font-weight:600;line-height:1.35;
  text-align:left;color:var(--ink);
  background:rgba(244,243,231,.55);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,transform .1s;
}
.qz-opt:hover{border-color:var(--brown);background:var(--paper);color:var(--charcoal)}
.qz-opt:active{transform:scale(.99)}
.qz-opt:focus-visible{outline:2.5px solid var(--brown);outline-offset:3px}
.qz-opt .qz-dot{
  flex:0 0 auto;width:21px;height:21px;border-radius:999px;
  background:var(--paper);
  border:2px solid var(--line);position:relative;transition:border-color .15s;
}
.qz-opt:hover .qz-dot{border-color:var(--brown)}
.qz-opt.is-sel{border-color:var(--brown);background:rgba(146,75,19,.07);font-weight:700;color:var(--charcoal)}
.qz-opt.is-sel .qz-dot{border-color:var(--brown)}
.qz-opt.is-sel .qz-dot::after{
  content:'';position:absolute;inset:3px;border-radius:999px;background:var(--brown);
}
/* Status tint on the lender check's three answers. Colour is a reinforcement,
   never the only signal: the answer text itself carries the meaning. */
.qz-opt.is-sel[data-tone="g"]{border-color:var(--ok);background:var(--ok-bg)}
.qz-opt.is-sel[data-tone="g"] .qz-dot{border-color:var(--ok)}
.qz-opt.is-sel[data-tone="g"] .qz-dot::after{background:var(--ok)}
.qz-opt.is-sel[data-tone="a"]{border-color:var(--warn);background:var(--warn-bg)}
.qz-opt.is-sel[data-tone="a"] .qz-dot{border-color:var(--warn)}
.qz-opt.is-sel[data-tone="a"] .qz-dot::after{background:var(--warn)}
.qz-opt.is-sel[data-tone="r"]{border-color:var(--bad);background:var(--bad-bg)}
.qz-opt.is-sel[data-tone="r"] .qz-dot{border-color:var(--bad)}
.qz-opt.is-sel[data-tone="r"] .qz-dot::after{background:var(--bad)}

/* ---------- back ----------
   Quiet on purpose. It is the only way backwards, so it has to be there and
   findable, and it must not compete with the answers for the tap. */
.qz-back{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:8px 2px;margin-top:14px;
  background:none;border:0;cursor:pointer;
  font-family:var(--fd);font-weight:700;font-size:13.5px;letter-spacing:.01em;
  color:var(--ink-soft);
}
.qz-back:hover{color:var(--brown)}
.qz-back:focus-visible{outline:2.5px solid var(--brown);outline-offset:3px;border-radius:4px}

/* ---------- numeric / slider steps (decoder) ----------
   The readout is the answer, so it is set at display weight and the control
   under it is deliberately plain. The input is 44px tall with the visible track
   painted into it, rather than an 8px input that happens to look like a track:
   an 8px-high drag target on a phone is a miss waiting to happen. */
.qz-sl-val{
  font-family:var(--fd);font-weight:800;font-size:clamp(30px,7.4vw,40px);
  line-height:1.05;color:var(--brown);margin:0 0 5px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.qz-sl-hint{font-size:13.5px;color:var(--ink-soft);margin:0 0 8px}
.qz-sl{
  -webkit-appearance:none;appearance:none;display:block;width:100%;
  height:44px;background:transparent;outline:none;margin:0;padding:0;
}
.qz-sl::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;background:var(--line);
}
.qz-sl::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:999px;
  margin-top:-11px;   /* (track 8 - thumb 30) / 2, to sit the thumb on the track */
  background:var(--brown);border:3px solid var(--paper);cursor:grab;
  box-shadow:0 0 0 1px var(--line);
}
.qz-sl::-moz-range-track{
  height:8px;border-radius:999px;background:var(--line);
}
.qz-sl::-moz-range-thumb{
  width:30px;height:30px;border-radius:999px;background:var(--brown);
  border:3px solid var(--paper);cursor:grab;box-shadow:0 0 0 1px var(--line);
}
/* The shared input:focus rule at the top of this file paints a pale brown halo,
   which on a 44px-tall range input reads as a mystery box around the track.
   Kill it here and let the focus-visible ring, which hugs the real hit area, be
   the only focus signal. */
.qz-sl:focus{box-shadow:none;outline:none}
.qz-sl:focus-visible{outline:2.5px solid var(--brown);outline-offset:0;border-radius:var(--r-sm)}
.qz-sl-ends{
  display:flex;justify-content:space-between;gap:12px;
  font-family:var(--fd);font-weight:700;font-size:12.5px;letter-spacing:.04em;
  color:var(--ink-soft);margin:0 0 20px;
}
.qz-sl-go{margin-top:2px}

/* ---------- the teaser: what they get free ----------
   The headline number is never gated. They answered the questions; the shape
   of the answer is theirs. The detail behind it is what the gate buys.

   It is the payoff for finishing, so it gets a ground rather than being a large
   number sitting on white. When it opens the step, which is the normal case, it
   bleeds to the card's inner edge and joins the progress header into a single
   off-white band: bar at 100%, then the number, then the ask on clean paper
   below it. */
.qz-teaser{
  text-align:center;
  background:var(--off);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:22px 18px 20px;
  margin:0 0 20px;
}
.qz-step > .qz-teaser:first-child{
  margin:calc(var(--qz-pt) * -1) calc(var(--qz-px) * -1) 22px;
  padding:24px var(--qz-px) 22px;
  border-width:0 0 1px;
  border-radius:0;
}
.qz-teaser-k{
  font-family:var(--fd);font-weight:800;line-height:1;
  font-size:clamp(46px,13vw,68px);color:var(--brown);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin:0 0 8px;
}
.qz-teaser-l{
  font-family:var(--fd);font-weight:700;font-size:clamp(17px,3.6vw,21px);
  color:var(--charcoal);margin:0 0 9px;line-height:1.24;letter-spacing:-.01em;
  text-wrap:balance;
}
.qz-teaser-s{font-size:14.4px;line-height:1.55;color:var(--ink-soft);margin:0 auto;max-width:44ch}

/* ---------- the gate ----------
   The highest-stakes screen on the page: everything before it was free and this
   is the ask. It sits on paper, directly under the off-white payoff band, so the
   form itself reads clean and considered rather than decorated. */
.qz-gate{padding:2px 0 0}
.qz-gate-h{
  font-family:var(--fd);font-weight:800;line-height:1.14;
  font-size:clamp(20px,4.4vw,26px);color:var(--charcoal);margin:0 0 8px;
  letter-spacing:-.018em;text-wrap:balance;
}
.qz-gate-h:focus{outline:none}
.qz-gate-h:focus-visible{outline:2.5px solid var(--brown);outline-offset:4px;border-radius:4px}
.qz-gate-sub{font-size:14.4px;line-height:1.56;color:var(--ink-soft);margin:0 0 20px;max-width:62ch}
.qz-gate-grid{display:grid;gap:15px;margin:0 0 18px}
@media (min-width:640px){
  .qz-gate-grid{grid-template-columns:1fr 1fr}
  .qz-gate-grid .qz-fld:first-child{grid-column:1 / -1}
}
.qz-fld{display:flex;flex-direction:column;gap:7px}
/* Same micro-label the rest of the system uses on inputs: uppercase Archivo in
   brown. 12px, not the 11.5px .field label runs at, because nothing in the flow
   goes below 12px. */
.qz-fld label{
  font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brown);
}
.qz-fld input{
  font-family:var(--fb);font-size:16px;   /* 16px or iOS zooms the page on focus */
  font-weight:600;
  min-height:52px;padding:13px 15px;
  color:var(--ink);
  /* a warm tint rather than white on white, so the field reads as a field
     before it is focused. Same off-white the bands use, at a fraction. */
  background:rgba(244,243,231,.5);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.qz-fld input::placeholder{color:var(--ink-soft);font-weight:500}
/* The over-cap field is a number input, and Chrome's spinner arrows on a dollar
   figure are both ugly and a 12px tap target. The typed number and the keyboard
   arrows are the way in. */
.qz-fld input[type=number]{-moz-appearance:textfield;appearance:textfield}
.qz-fld input::-webkit-outer-spin-button,
.qz-fld input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.qz-fld input:hover{border-color:rgba(146,75,19,.42)}
.qz-fld input:focus{
  outline:none;background:var(--paper);
  border-color:var(--brown);box-shadow:0 0 0 3px rgba(146,75,19,.12);
}
.qz-fld input.is-valid{border-color:var(--ok)}
.qz-fld input.is-invalid{border-color:var(--bad)}
.qz-err{
  font-size:13px;line-height:1.4;color:var(--bad);font-weight:600;
  display:none;
}
.qz-err.is-shown{display:block}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   anything that is not rendered. Never focusable, never announced. */
.qz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The CTA has to hold one line at 320px, where the card's inner width is about
   220px of text. Uppercase Archivo at the button's usual .14em tracking puts
   "Show my full breakdown" onto two lines there, so the flow's CTA runs tighter
   tracking and scales its size with the viewport instead of wrapping. */
.qz-gate-go{
  width:100%;justify-content:center;text-align:center;
  min-height:56px;padding:16px 14px;
  font-size:clamp(13px,3.9vw,15.5px);letter-spacing:.05em;
}
/* The reason to trust, at the point of asking, not buried in the footer. The
   padlock is the sprite's, so it costs no extra request. */
.qz-gate-fine{
  display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  background:var(--off);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;margin:14px 0 0;text-align:left;
  font-size:12.5px;line-height:1.5;color:var(--ink-soft);
}
.qz-gate-fine::before{
  content:"";width:20px;height:20px;margin-top:1px;
  background-image:url('/tools/assets/sprite.webp');
  background-size:400% 400%;background-repeat:no-repeat;
  background-position:33.333% 66.667%;   /* i-padlock */
}
.qz-gate-fine a{color:var(--brown)}
.qz-gate-fail{
  background:var(--bad-bg);border:1px solid var(--bad-line);border-radius:var(--r-sm);
  padding:12px 14px;margin:14px 0 0;text-align:left;
  font-size:13.5px;line-height:1.5;color:var(--bad);font-weight:600;
}
.qz-spin{
  display:inline-block;width:15px;height:15px;vertical-align:-2px;
  border:2px solid rgba(244,243,231,.4);border-top-color:var(--off);
  border-radius:999px;animation:bspin .6s linear infinite;margin-right:7px;
}
@keyframes bspin{to{transform:rotate(360deg)}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .qz-step.is-active{animation:none}
  .qz-prog-fill{transition:none}
  .qz-spin{animation-duration:2s}
}

/* ---------- forced colours ----------
   In Windows high contrast every ground and border in here collapses to the
   user's own two colours, which would leave the selected answer looking exactly
   like the other four. The state has to survive, so it is restated in system
   colours rather than pinned with forced-color-adjust, which would keep brand
   brown on a ground the user chose and can be unreadable. */
@media (forced-colors:active){
  .qz-opt{border:1.5px solid ButtonBorder}
  .qz-opt .qz-dot{border-color:ButtonBorder}
  .qz-opt.is-sel,.qz-opt.is-sel[data-tone="g"],.qz-opt.is-sel[data-tone="a"],.qz-opt.is-sel[data-tone="r"]{
    border:3px solid Highlight;
  }
  .qz-opt.is-sel .qz-dot,
  .qz-opt.is-sel[data-tone="g"] .qz-dot,
  .qz-opt.is-sel[data-tone="a"] .qz-dot,
  .qz-opt.is-sel[data-tone="r"] .qz-dot{border-color:Highlight}
  .qz-opt.is-sel .qz-dot::after,
  .qz-opt.is-sel[data-tone="g"] .qz-dot::after,
  .qz-opt.is-sel[data-tone="a"] .qz-dot::after,
  .qz-opt.is-sel[data-tone="r"] .qz-dot::after{background:Highlight}
  .qz-prog-track{border:1px solid CanvasText}
  .qz-prog-fill{background:Highlight}
  .qz-card,.qz-prog,.qz-teaser,.qz-gate-fine,.qz-gate-fail,.qz-notice{border-color:CanvasText}
}

/* ---------- short viewports (phone in landscape) ----------
   Same reasoning as the hero rule already in this file: on a 393px-high
   viewport the question plus five answers plus a back link does not fit, and
   the thing that gives is the padding, not the content. The card's padding is
   a custom property, so shrinking it here takes the progress header and the
   teaser band with it. */
@media (max-height:520px){
  .qz-card{--qz-px:16px;--qz-pt:14px;--qz-pb:16px;margin:20px auto 24px}
  #result,#resultCards{padding-bottom:24px}
  .qz-prog{margin-bottom:14px;padding-top:10px;padding-bottom:11px}
  .qz-prog-top{margin-bottom:7px}
  .qz-prog-track{height:6px}
  .qz-n{margin-bottom:5px}
  .qz-h{font-size:19px;margin-bottom:6px}
  .qz-sub,.qz-why{font-size:13.5px;line-height:1.5;margin-bottom:10px}
  .qz-opts{gap:7px;margin-top:12px}
  .qz-opt{min-height:46px;padding:9px 13px;font-size:14.5px}
  .qz-back{margin-top:9px}
  .qz-sl-val{font-size:28px}
  .qz-sl-hint{margin-bottom:2px}
  .qz-sl-ends{margin-bottom:12px}
  .qz-teaser-k{font-size:40px;margin-bottom:5px}
  .qz-teaser-s{font-size:13.5px}
  .qz-step > .qz-teaser:first-child{padding-top:16px;padding-bottom:16px;margin-bottom:16px}
  .qz-gate-h{font-size:19px}
  .qz-gate-sub{font-size:13.5px;margin-bottom:14px}
  .qz-gate-grid{gap:11px;margin-bottom:14px}
  .qz-fld input{min-height:46px;padding:10px 13px}
  .qz-gate-go{min-height:48px;padding:12px 14px}
  .qz-gate-fine{padding:10px 12px;margin-top:10px}
}

/* Shown on the result when the unlock POST failed. The gate's own error line
   lives inside the flow, and the flow is hidden the moment the result shows,
   so the notice has to be here or a failed save goes silent. */
.qz-notice{
  background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-sm);
  padding:13px 16px;font-size:14px;line-height:1.55;color:#63490A;font-weight:600;margin:0 0 18px;
}
/* Question three reveals this once the amount slider tops out: past the cap the
   exact figure decides which products qualify, so it has to be asked for. */
.qz-overcap{margin:14px 0 4px}
/* Its label is a sentence, not a micro-label, so it opts out of the uppercase
   Archivo treatment the three gate fields carry. */
.qz-overcap label{
  font-family:var(--fb);font-size:12.5px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);
}

/* The hidden attribute is UA styling, so ANY author display rule silently beats
   it: .qz-fld{display:flex} on the over-cap field made it show while still marked
   hidden. Everything on these pages that toggles visibility does it with the
   attribute, so the guard belongs here once rather than per component. */
[hidden]{display:none!important}