/* NWA Tax Savings Quiz — stylesheet
   Self-contained. Do NOT merge into the main site bundle:
   the page relies on not inheriting global styles.

   Shares its tokens, type stack and palette with the advertorial
   at /nwa-advertorial-lp2 so the click-through from the ad lands
   somewhere that looks like the same publication. If you change a
   token here, change it there. */

/* ---------- tokens ---------- */
:root{
  --paper:#FFFFFF;
  --wash:#F2F5F8;
  --ink:#101720;
  --muted:#5C6673;
  --navy:#0E2A47;
  --mark:#FFD84D;
  --rule:#DCE1E7;

  /* The single ink for every word in the footer -- brand line, bold
     leads, links and body copy alike. See the footer block. */
  --foot-ink:#8FA3BC;

  --display:"Libre Franklin",-apple-system,"Segoe UI",sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* --gutter shrinks on small screens. --measure is the content
     width, gutters excluded. Matched to the advertorial's 820px so
     the masthead, card and footer line up across the click-through
     and the funnel reads as one site rather than two.
     Change this and you change it there too. */
  --gutter:24px;
  --measure:820px;

  --bar:24px;         /* progress bar height; tall enough to hold its own label */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Page is white, the question card is navy. The card is where every
   interaction happens, so it carries the strongest colour on the
   page -- the same navy-panel-with-yellow treatment as the tax
   calculator in the advertorial. Everything else stays quiet. */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1.6;
  font-variant-numeric:tabular-nums;
  /* Clears the fixed progress bar. The legal pages have no
     progress bar, so they reset this below. */
  padding-top:var(--bar);
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

.wrap{
  width:100%;max-width:calc(var(--measure) + var(--gutter)*2);
  margin-inline:auto;padding-inline:var(--gutter);
}

/* Visually hidden but readable by screen readers. */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- progress ---------- */
/* Yellow fill on a navy track, the same pairing as the tax bar in
   the advertorial -- the one component both pages share, so
   arriving here reads as continuing rather than starting over.
   The advertorial puts labels inside both regions of that bar and
   this does the same, which is why the label lives in the bar
   rather than in a strip underneath it.

   The label is rendered TWICE, once in light ink on the navy track
   and once in navy on top of the yellow fill, with the fill
   clipping its copy. That is what keeps it readable at every
   percentage -- a single label would sit on navy at the start and
   on yellow at the end, and no one colour works on both.
   The script keeps --track in sync with the bar's pixel width so
   the two copies stay perfectly registered. */
.prog{position:fixed;top:0;left:0;right:0;z-index:80}
.prog__track{
  position:relative;height:var(--bar);background:var(--navy);overflow:hidden;
}
.prog__fill{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:var(--mark);overflow:hidden;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.prog__txt{
  position:absolute;top:0;left:0;height:100%;
  width:var(--track,100%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  pointer-events:none;
}
/* The step on the left, the percentage on the right, both aligned
   to the same measure as the card below so the bar reads as part of
   the same column rather than floating free. */
.prog__in{
  width:100%;max-width:calc(var(--measure) + var(--gutter)*2);
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.prog__txt--track{color:#9FB2C8}
.prog__txt--fill{color:var(--navy)}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead__in{
  max-width:calc(var(--measure) + var(--gutter)*2);margin-inline:auto;
  padding:16px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.masthead__logo{height:60px;width:auto}
.masthead__phone{
  font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.04em;text-decoration:none;color:var(--navy);white-space:nowrap;
}
.masthead__phone:hover{background:var(--mark)}

/* ---------- intro ---------- */
/* Collapses once the first question is answered. The old quiz
   greyed the whole page out to focus the card; this just gets
   out of the way, which does the same job without the murk. */
.intro{
  padding-block:14px 0;text-align:center;
  transition:opacity .3s,max-height .45s cubic-bezier(.22,1,.36,1),padding .45s;
  max-height:400px;overflow:hidden;
}
.intro.is-gone{max-height:0;opacity:0;padding-block:0}
/* No text-wrap:balance here. Balance equalises the length of every
   line, which on a two-line headline meant both lines came out at
   ~500px inside an 820px column -- the headline looked narrow with
   300px of unused width beside it. Left to wrap normally the first
   line fills the measure, so the headline reads at the full width
   of the page. The questions inside the card DO keep balance: they
   are short and centred, where balancing looks deliberate. */
.intro h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.7vw,34px);line-height:1.14;
  letter-spacing:-.02em;margin:0 0 8px;
}
/* Sized to be read, not skimmed past. At 17px against a 34px
   headline it was small enough to look like a caption; two lines at
   this size is the intended shape, not an overflow.

   One weight throughout, and a darker ink than --muted so that
   evenness does not turn into faintness. Do not reintroduce bold
   spans here -- mixed weight in a single sentence was what made it
   look patchy. */
.intro__dek{
  font-size:clamp(17px,1.7vw,21px);line-height:1.45;
  color:#3B4654;font-weight:400;
  margin:0 auto;max-width:44em;
}

/* ---------- question card ---------- */
/* The signature module, and the same treatment as the tax
   calculator in the advertorial: navy panel, yellow for the live
   figures, muted blue for supporting text. Everything inside the
   card is recoloured for a dark surface -- if you add an element
   here, give it a dark-surface colour or it will disappear. */
.card{
  background:var(--navy);color:#fff;border-radius:4px;
  /* Holds the card off the masthead. The intro collapses to zero
     after question 1, so without this the card jams straight up
     against the logo bar. The gap below the card is the top
     padding on .press. */
  margin-top:32px;
  padding:22px var(--gutter);
  /* Zero vertical offset on every layer, so the shadow sits evenly
     on all four sides rather than pooling underneath. Three tight,
     high-opacity layers stacked close together: a 2px edge that
     cuts the card away from the paper, an 8px core, and a 20px
     halo. Intensity comes from the opacity and the stacking, not
     from spread -- push the blur past ~40px and it stops reading as
     a shadow and turns into a grey smudge. */
  box-shadow:
    0 0 2px rgba(14,42,71,.34),
    0 0 8px rgba(14,42,71,.30),
    0 0 22px rgba(14,42,71,.26);
}
.step{display:none}
.step.is-on{display:block;animation:rise .38s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Questions and their sub-text are centred; the fields, the consent
   row and the collection notice stay left, because centred form
   labels and centred fine print are harder to read, not easier. */
.step h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(21px,3.5vw,27px);line-height:1.2;letter-spacing:-.016em;
  margin:0 0 6px;text-wrap:balance;text-align:center;
}
/* The first question has no sub-text, so the heading would otherwise
   sit 6px off the buttons -- that gap was being carried by the hint. */
.step h2 + .pair,
.step h2 + .amount,
.step h2 + .field{margin-top:18px}
/* Emphasis inside a question is carried by colour alone. A yellow
   highlight here fought with the yellow Next button directly below
   it and made the heading look like a link. */
.step h2 b{color:var(--mark)}
/* Script moves focus here so screen readers announce each new
   question. That is programmatic rather than a keyboard action, so
   the ring would just read as a stray box around the heading. */
.step h2:focus{outline:none}
.step__hint{
  font-family:var(--mono);font-size:12.5px;line-height:1.5;
  color:#9FB2C8;margin:0 0 16px;text-align:center;
}
.step__hint:last-of-type{margin-bottom:16px}

/* ---------- yes / no ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:11px}
/* Outlined on the navy, filling yellow on hover -- the same
   behaviour as the income band buttons in the advertorial's
   calculator. */
.pick{
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.04em;
  text-transform:uppercase;color:#CBD8E6;background:transparent;
  border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:20px 6px;
  cursor:pointer;transition:background .14s,color .14s,border-color .14s;
}
/* Colour only, no lift -- same reasoning as .btn above. Filling
   solid yellow is already an unmissable state change. */
.pick:hover,.pick:focus-visible{
  background:var(--mark);color:var(--navy);border-color:var(--mark);
}
.pick:active{background:#F5B800;border-color:#F5B800}
.pick:focus-visible{outline:2px solid var(--mark);outline-offset:2px}

/* ---------- slider ---------- */
/* The one genuinely good idea in the old quiz, rebuilt natively.
   A real <input type=range> keeps keyboard control, screen reader
   support and native touch handling for free -- the old build
   needed jQuery UI plus a touch-punch shim to get back what the
   browser already does. The yellow fill is a gradient driven by
   --pct, which the script updates on input. */
.amount{
  font-family:var(--display);font-weight:800;
  font-size:clamp(32px,5.6vw,44px);line-height:1;letter-spacing:-.03em;
  color:var(--mark);text-align:center;margin-bottom:3px;
}
.amount.is-max::after{
  content:"+";
}
.amount__cap{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#9FB2C8;
  text-align:center;margin-bottom:10px;min-height:1.3em;
}
.slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:30px;background:transparent;cursor:grab;
  /* The bottom margin was carried by the min/max row that used to
     sit here; it is on the slider itself now. */
  display:block;margin:0 0 18px;
}
.slider:active{cursor:grabbing}
.slider::-webkit-slider-runnable-track{
  height:10px;border-radius:5px;
  background:linear-gradient(90deg,var(--mark) var(--pct,50%),rgba(255,255,255,.18) var(--pct,50%));
}
.slider::-moz-range-track{
  height:10px;border-radius:5px;
  background:linear-gradient(90deg,var(--mark) var(--pct,50%),rgba(255,255,255,.18) var(--pct,50%));
}
/* Thumb is navy so it reads against the yellow fill, and large
   enough to be a comfortable touch target on a phone. */
/* White thumb, not navy: it has to read against the yellow fill on
   one side and the dark track on the other. */
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:30px;height:30px;border-radius:50%;
  background:var(--paper);border:3px solid var(--navy);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  margin-top:-10px;
}
.slider::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:var(--paper);border:3px solid var(--navy);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.slider:focus-visible{outline:none}
.slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--mark)}
.slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--mark)}

/* ---------- text inputs ---------- */
.field{
  font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);
  width:100%;background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;
  padding:16px 15px;margin-bottom:11px;
  transition:border-color .14s,box-shadow .14s;
}
.field::placeholder{color:#A8B1BC;font-weight:400}
.field:focus{
  outline:none;border-color:var(--mark);
  box-shadow:0 0 0 3px rgba(255,216,77,.55);
}
.field--half{width:calc(50% - 5.5px)}
.pairfields{display:flex;gap:11px}
.pairfields .field{width:100%;margin-bottom:11px}

/* Light coral rather than the usual dark red: this sits on navy. */
.warn{
  font-family:var(--mono);font-size:12px;line-height:1.5;
  color:#FFB3A0;margin:0 0 12px;text-align:center;
}
.warn[hidden]{display:none}

/* ---------- consent ---------- */
/* Translucent white rather than the light wash -- it sits on navy. */
.consent{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.07);border-radius:3px;padding:16px;margin:4px 0 18px;
}
.consent input{
  width:21px;height:21px;flex:none;margin:1px 0 0;accent-color:var(--navy);cursor:pointer;
}
.consent label{
  font-family:var(--mono);font-size:12px;line-height:1.55;color:#CBD8E6;cursor:pointer;
}

/* The Australian Privacy Principle 5 collection notice moved to the
   footer, so .collect is gone from here. It is now a plain footer
   paragraph -- see inc/foot.php. */

/* ---------- buttons ---------- */
/* Same two-layer shadow as the advertorial: a hard 2px edge reads
   as a physical button face and a soft diffuse layer lifts it off
   the page.

   HOVER CHANGES COLOUR, NOT POSITION. The button used to rise 2px,
   which made it twitch under the cursor -- worse on the Next button
   than anywhere else, because it is the one control people are
   already aiming at. A deeper gold gives the same "this is live"
   feedback without the target moving. Only the press state moves,
   and only downward, which is what a press should feel like. */
.btn{
  display:block;width:100%;
  font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:.005em;text-decoration:none;text-align:center;
  background:var(--mark);color:var(--navy);
  border:0;padding:16px 26px;border-radius:4px;line-height:1.25;cursor:pointer;
  box-shadow:0 2px 0 rgba(14,42,71,.32), 0 6px 16px rgba(14,42,71,.16);
  transition:background .14s ease,box-shadow .14s ease,transform .1s ease;
}
.btn:hover{
  background:#FFC61F;
  box-shadow:0 2px 0 rgba(14,42,71,.38), 0 8px 20px rgba(14,42,71,.20);
}
.btn:active{
  background:#F5B800;
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(14,42,71,.32), 0 3px 8px rgba(14,42,71,.14);
}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.btn__sub{
  display:block;font-family:var(--mono);font-weight:400;font-size:11.5px;
  letter-spacing:.03em;opacity:.72;margin-top:5px;
}
/* Disabled until the step validates. Kept focusable and still in
   the tab order so a keyboard user can reach it and hear why. */
/* Disabled on a navy card: a light grey fill would read as an
   enabled white button, so it goes translucent instead. */
.btn[aria-disabled="true"]{
  background:rgba(255,255,255,.13);color:#7F93AB;
  box-shadow:none;cursor:not-allowed;
}
.btn[aria-disabled="true"]:hover{background:rgba(255,255,255,.13);transform:none;box-shadow:none}
.btn--green{background:#1F9E4B;color:#fff;box-shadow:0 2px 0 rgba(11,60,29,.34),0 6px 16px rgba(11,60,29,.2)}
.btn--green:hover{background:#188A3F;box-shadow:0 2px 0 rgba(11,60,29,.4),0 8px 20px rgba(11,60,29,.24)}
.btn--green:active{background:#137635}
.btn--ghost{
  background:transparent;color:var(--navy);border:1px solid var(--rule);box-shadow:none;
}
.btn--ghost:hover{background:var(--wash);transform:none;box-shadow:none}

.back{
  display:inline-block;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#9FB2C8;padding:10px 2px 0;margin:0 auto;
}
.back::before{content:"\2190";margin-right:7px}
.back:hover{color:#fff}
.backrow{text-align:center}

/* ---------- reassurance strip ---------- */
.assure{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  margin:4px 0 0;padding:0 0 8px;list-style:none;text-align:center;
}
.assure li{display:flex;align-items:center;gap:8px}
/* Stroked line icons, not filled: they sit at the same visual
   weight as the mono type next to them, where a solid shape would
   shout. Navy stroke with the yellow reserved for the card. */
.assure svg{
  width:17px;height:17px;flex:none;
  fill:none;stroke:var(--navy);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- press ---------- */
/* No "As featured in" heading -- the logos are recognisable on
   their own and the label was costing a line of height. The bottom
   padding is what separates the row from the review card below. */
/* Top padding is the gap between the card and the logo row. The
   card's own top margin is set separately in .card -- if you want
   the space above and below the card to match, the two numbers
   have to agree. */
.press{text-align:center;padding-block:24px 22px}
/* Six separate marks rather than two baked-in strips, so each one
   can be sized on its own.

   Flex, not a six-column grid. Equal grid cells forced every logo
   into the same ~130px slot, and once the logos were scaled down
   that left a pile of dead space around each one -- the row looked
   sparse rather than deliberate. Flex lets each mark take its own
   width with one consistent gap between them, so the row reads as
   a set. */
.press__grid{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:14px 26px;
}
.press__grid img{
  max-width:100%;width:auto;
  opacity:.55;filter:grayscale(1);transition:opacity .2s,filter .2s;
}
.press:hover .press__grid img{opacity:.78;filter:grayscale(.45)}

/* Optical sizing, not mathematical. Matching every logo to one
   height makes the long wordmarks shout and the stacked ones
   disappear, so each is tuned until they read as equal weight.
   The two stacked marks (Property Investor, Sunday Times) carry a
   second line, so they need the extra height to hold their own. */
.press__grid img{max-height:16.5px}
.logo-property-investor{max-height:20px}
.logo-sunday-times{max-height:18px}
.logo-7news{max-height:18px}
.logo-sky-news{max-height:16px}
.logo-9news{max-height:13.5px}
.logo-daily-mail{max-height:14px}

/* ---------- reviews ---------- */
/* One quote at a time, cross-fading, rather than a stack of cards.
   The stack was 323px tall on its own and pushed everything below
   the fold; this holds the same social proof in about 90px. */
.revs{padding-block:0 16px}
/* With $SHOW_PRESS off there is no logo row between the card and
   this one, and the gap above the review card was the press row's
   own top padding. This puts the same 24px back so the card below
   the quiz sits where it always did. */
.revs--lead{padding-top:24px}
.stars{display:inline-flex;gap:1px;color:#F5A623;font-size:13px;line-height:1}

/* Fixed height so a longer quote never shifts the page as it
   rotates. Every quote is absolutely placed and animated on
   opacity, and the first carries .is-on from PHP so the card still
   shows with no JavaScript at all. */
.revs__stage{position:relative;min-height:114px}
/* margin:0 matters -- this is a <blockquote>, and the browser's
   default 1em/40px margin fights inset:0 and shrinks the card away
   from the stage it is supposed to fill. */
.rev{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .5s ease;pointer-events:none;
  background:var(--wash);border:1px solid var(--rule);border-radius:4px;
  padding:15px 18px;
  display:grid;grid-template-columns:auto 1fr;gap:0 13px;
  align-content:start;
}
.rev.is-on{opacity:1;pointer-events:auto}

/* Initial in a disc, the way Google shows a reviewer with no photo.
   Avoids hotlinking avatars from Google's CDN, which the content
   policy does not allow us to cache. */
.rev__av{
  grid-row:1 / span 2;
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--navy);color:#fff;
  font-family:var(--display);font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
.rev__head{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:3px;
}
.rev__who{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink)}
.rev__where{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
/* Attribution stays, the standalone "Google reviews / Verified
   clients" header does not -- a review has to say where it came
   from, but it does not need its own headline to do it. */
.rev__src{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-left:auto;
}
.rev__t{
  grid-column:2;
  font-size:15px;line-height:1.45;margin:0;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* No dots. The reviews rotate on their own and the card is social
   proof, not a control -- pagination invited people to fiddle with
   it instead of answering the questions. */

/* ---------- result pages ---------- */
/* Tight. The tick, the headline and the one-line dek are a
   single block -- generous padding here just pushed the actual
   next steps down the page. */
.result{padding-block:24px 24px;text-align:center}
/* Green, not the brand yellow. This is a pass/fail result, and the
   same green as the "Call now" button below it -- yellow is used
   everywhere else on the page for "do this next", so a yellow tick
   read as another control rather than an outcome. The grey --flat
   variant below is the no-qualify counterpart. */
.result__mark{
  width:56px;height:56px;border-radius:50%;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:#1F9E4B;color:#fff;
  font-family:var(--display);font-weight:800;font-size:31px;line-height:1;
}
.result__mark--flat{background:var(--wash);color:var(--muted);border:1px solid var(--rule)}
.result h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,5.6vw,42px);line-height:1.08;letter-spacing:-.024em;
  margin:0 0 9px;text-wrap:balance;
}
.result__dek{
  font-size:clamp(17px,2.2vw,20px);line-height:1.5;color:var(--muted);
  margin:0 auto 22px;max-width:32em;
}
.next{
  background:var(--navy);color:#fff;border-radius:4px;
  padding:26px var(--gutter);text-align:left;margin-bottom:24px;
}
.next__k{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mark);margin-bottom:16px;
}
.next ol{list-style:none;margin:0;padding:0;counter-reset:n}
.next li{
  counter-increment:n;display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.13);
}
.next li:last-child{border-bottom:0;padding-bottom:0}
.next li::before{
  content:counter(n);
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--navy);
  background:var(--mark);width:22px;height:22px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.next__t{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.35}
.next__d{font-family:var(--mono);font-size:12px;color:#9FB2C8;line-height:1.55;margin-top:5px}
.next__d b{color:#fff;font-weight:600}

/* the two-button row on the thank-you page */
.acts{display:grid;gap:11px;margin-bottom:8px}

/* criteria restated on the no-qualify page */
.crit{
  background:var(--wash);border:1px solid var(--rule);border-radius:4px;
  padding:24px var(--gutter);text-align:left;margin-bottom:24px;
}
.crit__k{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.crit__path{display:flex;gap:13px;align-items:flex-start;padding:4px 0}
.crit__path span{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--navy);
  background:var(--mark);width:22px;height:22px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:3px;
}
.crit__t{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.4}
.crit__or{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding:12px 0;
  display:flex;align-items:center;gap:13px;
}
.crit__or::before,.crit__or::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ---------- footer ---------- */
/* Navy, matching the question card and the progress bar. The light
   wash sat too close to the white page to read as a separate
   region; this bookends the page against the navy bar at the top.
   Everything inside is therefore dark-surface coloured. */
.foot{background:var(--navy);color:var(--foot-ink);margin-top:14px;padding:26px 0 30px}
/* Left aligned, so the compliance block starts on the same left
   edge as the card above it instead of floating centred beneath
   it. Still held to the page measure. No extra max-width on the
   paragraphs -- capping them narrower than the column just wraps
   the general advice text onto an extra line. */
.foot__in{
  max-width:calc(var(--measure) + var(--gutter)*2);margin-inline:auto;
  padding-inline:var(--gutter);text-align:left;
}
/* 10px/1.4 is fine print with enough leading to stay readable at
   this size. The 10px paragraph margin still opens a wider gap than
   the leading does, so the block reads as separate statements
   rather than one grey slab. */
/* ONE colour for every word down here. The brand line, the bold
   leads, the links and the body copy all print in --foot-ink.
   The footer is compliance text, not a destination: white brand,
   white bold leads, pale-blue links and grey-blue body made four
   tones in a block of 10px type and pulled the eye down off the
   card, which is the only thing on the page meant to be acted on.
   Emphasis is carried by weight and size, links by their underline.
   Do not reintroduce a highlight colour here, :hover included --
   and if you change this, change it in the advertorial too. */
.foot p{font-family:var(--mono);font-size:10px;line-height:1.4;color:var(--foot-ink);margin:0 0 10px}
.foot p strong{color:var(--foot-ink);font-weight:600}
.foot a{color:var(--foot-ink);text-underline-offset:2px}
/* Hover feedback without a colour change. */
.foot a:hover{text-decoration-thickness:2px}
.foot__brand{font-family:var(--display);font-weight:700;font-size:12.5px;line-height:1.4;color:var(--foot-ink);margin-bottom:9px}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:700px){
  :root{--gutter:18px}
  body{font-size:18px}
  /* Six across needs the full measure. Below it, the wide wordmarks
     get clamped by max-width and shrink to fine print, so the row
     wraps to three and then two. */
  .press__grid{gap:14px 20px}
  .press__grid img{max-height:18px}
  .logo-property-investor{max-height:22.5px}
  .logo-sunday-times{max-height:19.5px}
  .logo-7news{max-height:19.5px}
  .logo-sky-news{max-height:17px}
  .logo-9news{max-height:15px}
  .logo-daily-mail{max-height:16px}
}
@media (max-width:560px){
  :root{--gutter:15px}
  .intro{padding-block:26px 20px}
  /* The card goes full-bleed, mirroring how the advertorial's
     modules behave on phones and buying back the side gutters. */
  .card{border-radius:0;border-left:0;border-right:0}
  .rev{border-radius:0;border-left:0;border-right:0}
  .prog__meta{font-size:10px}
  .pairfields{display:block}
  .assure{gap:6px 14px;font-size:11px;margin-top:12px}
  /* Three across and two rows. Two across reads better -- the wide
     wordmarks get clamped by max-width here rather than sitting at
     their tuned height -- but it costs a third row, and roughly
     50px is the difference between this band clearing the fold on
     a 390px-wide phone and not. The fold wins. */
  .press__grid{gap:12px 16px}
  /* Phone spacing was inverted: 10px above the headline and 42px
     below the sub-head, so the masthead crowded the headline while
     the card floated away from it. These three values are the gaps
     top to bottom -- masthead to headline, headline to sub-head,
     sub-head to card -- and they should stay in that ratio. */
  .intro{padding-block:24px 0}
  .intro h1{font-size:22px;margin-bottom:10px}
  .intro__dek{font-size:16px;line-height:1.4}
  .card{margin-top:28px}
}
@media (max-width:380px){
  :root{--gutter:12px}
  .btn{font-size:16px;padding:16px 16px}
  .pick{font-size:15px;padding:18px 4px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════
   LEGAL PAGES — privacy.php, terms-conditions.php
   Ported unchanged from the advertorial so the two
   sites render the same regulated documents the
   same way. Utility pages: no progress bar, no card.
   ═══════════════════════════════════════════ */

.utilbar{background:var(--navy);color:#fff}
.utilbar__in{
  max-width:calc(var(--measure) + var(--gutter)*2);margin-inline:auto;
  padding:9px var(--gutter);display:flex;align-items:center;
  justify-content:space-between;gap:16px;
}
.utilbar a{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  text-decoration:none;color:#CBD8E6;
}
.utilbar a:hover{color:var(--mark)}
.utilbar__back::before{content:"\2190";margin-right:6px}

.legalpage{background:var(--paper);padding-top:0}
.legalpage .masthead{margin-top:0}
.legalpage .masthead__sec{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.legal{padding-block:40px 20px}
.legal__kicker{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--navy);
  margin-bottom:14px;
}
.legal h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(28px,5.4vw,42px);line-height:1.06;
  letter-spacing:-.022em;margin:0 0 12px;text-wrap:balance;
}
.legal__meta{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  padding-bottom:22px;border-bottom:1px solid var(--rule);line-height:1.6;
}

/* jump-link index */
.toc{background:var(--wash);border-radius:4px;padding:22px var(--gutter);margin-block:30px}
.toc__t{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.toc ol{margin:0;padding-left:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;padding:5px 0}
.toc a{
  font-family:var(--display);font-weight:600;font-size:15px;
  text-decoration:none;color:var(--navy);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono);font-weight:400;font-size:12px;
  color:var(--muted);margin-right:11px;
}
.toc a:hover{background:linear-gradient(180deg,transparent 60%,var(--mark) 60%)}

/* body */
.legal__body{padding-bottom:20px}
.legal__body section{scroll-margin-top:20px;padding-top:34px}
.legal__body h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(21px,3.4vw,27px);line-height:1.16;letter-spacing:-.016em;
  margin:0 0 14px;padding-left:14px;border-left:4px solid var(--mark);
}
.legal__body h3{font-family:var(--display);font-weight:700;font-size:17.5px;line-height:1.3;margin:26px 0 9px}
.legal__body p,.legal__body li{font-size:17.5px;line-height:1.6}
.legal__body p{margin:0 0 20px}
.legal__body ul,.legal__body ol{padding-left:22px;margin:0 0 20px}
.legal__body li{margin-bottom:9px}
.legal__body a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.legal__body strong,.legal__body b{font-weight:700}

/* contact / complaints callout */
.legal__note{
  border:1px solid var(--rule);border-left:4px solid var(--navy);
  border-radius:3px;padding:22px var(--gutter);margin-block:30px;
}
.legal__note p:last-child{margin-bottom:0}
.legal__note p{font-size:16.5px}

/* editor's insertion marker — DELETE once copy is in */
.todo{
  background:#FFF6D6;border:1px dashed #C9A227;border-radius:3px;
  padding:16px 18px;margin-bottom:20px;
  font-family:var(--mono);font-size:13px;line-height:1.6;color:#6B5410;
}
.todo b{display:block;font-weight:600;margin-bottom:5px;letter-spacing:.06em;text-transform:uppercase;font-size:11px}

.legalpage .foot{margin-top:34px;padding-bottom:34px}

/* ═════════════════════════════════════════════
   LEGAL / COMPLIANCE FOOTER
═════════════════════════════════════════════ */

.legal-strip {
  width: 100%;
  background: #0e2f4d;
  color: #a9cce7;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.legal-strip__inner {
  width: calc(100% - 48px);
  max-width: 1040px;
  margin: 0 auto;

  padding: 34px 0 46px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 12.5px;
  line-height: 1.62;
  font-weight: 400;

  letter-spacing: 0.01em;
}

.legal-strip__inner p {
  margin: 0 0 13px;
}

.legal-strip__company {
  color: #c1ddef;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.legal-strip__line {
  color: #a9cce7;
}

.legal-strip__line strong {
  color: #d0e5f3;
  font-weight: 600;
}

.legal-strip a {
  color: #b8d8ed;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;

  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.legal-strip a:hover {
  color: #ffffff;
}

.legal-strip__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  margin-top: 4px !important;
  margin-bottom: 0 !important;

  color: #b1d1e7;
}

.legal-strip__sep {
  display: inline-block;
  margin: 0 9px;
  opacity: 0.55;
}


/* ══ TABLET ══ */

@media (max-width: 900px) {

  .legal-strip__inner {
    width: calc(100% - 40px);
    padding: 30px 0 38px;

    font-size: 12px;
    line-height: 1.62;
  }

  .legal-strip__company {
    font-size: 12.5px;
  }
}


/* ══ MOBILE ══ */

@media (max-width: 600px) {

  .legal-strip__inner {
    width: calc(100% - 32px);
    padding: 27px 0 32px;

    font-size: 11.5px;
    line-height: 1.68;
  }

  .legal-strip__inner p {
    margin-bottom: 14px;
  }

  .legal-strip__company {
    font-size: 12px;
    line-height: 1.55;
  }

  .legal-strip__bottom {
    display: block;
    line-height: 1.8;
  }

  .legal-strip__sep {
    margin: 0 5px;
  }
}