/* Critical Illness Cover. One stylesheet for every page.
   Look (Paul approved 11 Nov 2026, Headspace landing page style): a calm, friendly site. Light cool-grey bands, rounded
   photos and cards, soft colour circles, blue buttons, one idea per section, a blue closing band and a soft grey footer.
   One spacing scale throughout: --sec between sections (72px phones, 112px desktop), --head between a heading block and
   its content (32/48), --pad inside cards (24/48), --gap between items (16/24). Inner pages reuse the same parts. */

@font-face { font-family: "Figtree"; src: url(/assets/fonts/figtree.8330490a01.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root{
  --blue:#0061EF; --blue-dk:#004FC4; --blue-tint:#EAF1FF;
  --orange:#FF5F2E; --orange-tint:#FFE7DE;
  --ink:#23262E; --muted:#555B66; --line:#DFE2E8;
  --grey:#F4F5F7; --band:#E8EAEE; --paper:#FFFFFF;
  --font:"Figtree", "Helvetica Neue", Arial, sans-serif;
  --sec:72px; --head:32px; --pad:24px; --gap:16px; --r:24px;
  --fs-body:17px; --fs-lead:19px; --fs-small:15px;
  --fs-h1:38px; --fs-h2:30px; --fs-h3:22px;
  --top-h:68px;
  color-scheme:light;
}
@media (min-width:960px){
  :root{--sec:112px;--head:48px;--pad:48px;--gap:24px;--r:28px;--fs-body:18px;--fs-lead:20px;--fs-small:16px;--fs-h1:60px;--fs-h2:44px;--fs-h3:28px;--top-h:84px}
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
picture{display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:10px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.linkish{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.h2{font-size:var(--fs-h2);line-height:1.12}
.center{text-align:center}
.intro{color:var(--muted);font-size:var(--fs-lead);line-height:1.55;max-width:36em}
.center .intro{margin-inline:auto}
.head{display:grid;gap:14px;margin-bottom:var(--head)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border-radius:999px;border:0;background:var(--blue);color:#fff;font:700 18px/1 var(--font);text-decoration:none;transition:background .2s ease, transform .2s ease, box-shadow .2s ease}
.btn:hover{background:var(--blue-dk)}
.btn:active{transform:scale(.98)}
.btn.big{min-height:64px;padding:0 40px;font-size:21px}
.btn.dark{background:var(--ink)}
.btn.dark:hover{background:#000}
.btn.white{background:#fff;color:var(--blue)}
.btn.white:hover{background:var(--blue-tint)}
.btn.sm{min-height:44px;padding:0 20px;font-size:16px}

/* Header */
.top{position:sticky;top:0;top:env(safe-area-inset-top, 0px);z-index:50;background:var(--blue);color:#fff;border-bottom:1px solid transparent;transition:border-color .2s ease, box-shadow .2s ease}
.top.scrolled,.top.open{border-bottom-color:rgba(255,255,255,.18);box-shadow:0 8px 24px -18px rgba(0,30,90,.6)}
/* The header is blue (Paul, 11 Nov 2026 colour test): white words and logo, a white Get my quote with blue words,
   white focus rings; the phone menu and the Guides mega menu below it stay white with dark words. */
.top .wrap :focus-visible,.hero :focus-visible{outline-color:#fff}
.top .nav-cta{background:#fff;color:var(--blue)}
.top .nav-cta:hover{background:var(--blue-tint)}
/* Home: the header's Get my quote waits until the hero's own button has scrolled away (site.js adds .cta-past).
   Without JavaScript it simply shows. Phones swap it with the Secure pill; desktop fades it in where it sits. */
.nav-cta{transition:opacity .25s ease, transform .25s ease, visibility .25s}
@keyframes cta-in{from{opacity:0;transform:translateY(-6px)}}
/* The Secure pill: phones only, in the spot Get my quote would use when that is not showing */
.secure{display:none;flex:none;align-items:center;gap:6px;height:34px;padding:0 12px 0 9px;border-radius:999px;background:var(--blue-tint);color:var(--ink);font-weight:700;font-size:14px;line-height:1;white-space:nowrap}
.secure svg{width:18px;height:18px}
@media (max-width:959px){
  .js .home .top:not(.cta-past) .nav-cta{display:none}
  .js .home .top.cta-past .nav-cta{animation:cta-in .25s ease both}
  .js .home .top:not(.cta-past) .secure,.top.simple .secure{display:inline-flex}
  .top.simple .secure{margin-left:auto}
}
/* under 380px there is no room for Get my quote in the header (see below), so the pill always holds the spot */
@media (max-width:379px){ .top .secure{display:inline-flex} }
@media (min-width:960px){ .js .home .top:not(.cta-past) .nav-cta{opacity:0;visibility:hidden;transform:translateY(-6px)} }
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--top-h)}
.logo{display:inline-flex;align-items:center;text-decoration:none;min-height:44px;flex:none}
.logo img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:28px;font-size:17px;font-weight:500;margin-left:auto}
.nav a:not(.btn){text-decoration:none;display:none;padding:12px 0}
.nav > a:not(.btn):hover{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.nav .btn.sm{padding:0 16px}
.menu-btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);display:grid;place-items:center}
.menu-btn:hover{background:rgba(255,255,255,.26)}
.bars,.bars:before,.bars:after{display:block;width:18px;height:2px;border-radius:1px;background:#fff;transition:transform .2s ease}
.bars{position:relative}
.bars:before,.bars:after{content:"";position:absolute;left:0}
.bars:before{top:-6px}.bars:after{top:6px}
.menu-btn[aria-expanded="true"] .bars{background:transparent}
.menu-btn[aria-expanded="true"] .bars:before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars:after{transform:translateY(-6px) rotate(-45deg)}
.menu{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 30px 40px -30px rgba(35,38,46,.35);max-height:calc(100vh - var(--top-h));overflow-y:auto}
.menu .wrap{display:grid;gap:16px;height:auto;padding-top:8px;padding-bottom:24px;justify-content:stretch;align-items:stretch}
.menu ul{display:grid}
.menu li + li{border-top:1px solid var(--line)}
.menu a:not(.btn){display:flex;justify-content:space-between;align-items:center;min-height:56px;font-size:20px;font-weight:600;text-decoration:none}
.menu a:not(.btn) svg{width:20px;height:20px;color:var(--blue)}
.menu .btn{width:100%}
.menu-sub{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:56px;padding:0;border:0;background:none;font:600 20px/1.2 var(--font);color:var(--ink);text-align:left}
.menu-sub .chev svg,.mm-btn .chev svg{width:20px;height:20px;display:block;transition:transform .2s ease}
.menu-sub[aria-expanded="true"] .chev svg,.mm-btn[aria-expanded="true"] .chev svg{transform:rotate(180deg)}
.menu-sub .chev{color:var(--blue)}
.menu-groups{padding:4px 0 12px}
.menu .menu-groups li + li{border-top:0}
.menu .menu-groups a:not(.btn){justify-content:flex-start;gap:14px;min-height:60px;font-size:17px}
.mg-art{flex:none;width:72px;height:54px;border-radius:14px;background:var(--grey);display:grid;place-items:center;overflow:hidden}
.menu .mg-art .chars{width:64px;height:48px;color:inherit}
.mg-t{flex:1}
.menu .menu-groups .mg-go svg{width:18px;height:18px}
/* Guides mega menu (desktop) */
.nav .mm{display:none}
.mm-btn{display:inline-flex;align-items:center;gap:6px;padding:12px 0;border:0;background:none;font:inherit;color:inherit}
.mm-btn:hover,.mm-btn[aria-expanded="true"]{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--ink);border-top:1px solid var(--line);box-shadow:0 40px 60px -40px rgba(35,38,46,.45);animation:fade .2s ease both}
.no-js .mm:hover .mega,.no-js .mm:focus-within .mega{display:block!important}
.top .mega-in{display:block;height:auto;padding-top:28px;padding-bottom:28px}
.mega-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.nav .mega a:not(.btn){display:block;padding:0}
.nav .mega .mega-head{display:grid;gap:10px;text-decoration:none;color:var(--ink)}
.mega-art{display:grid;place-items:center;background:var(--grey);border-radius:16px;padding:6px;transition:background .2s ease}
.mega-art .chars{width:100%;max-width:150px;height:auto}
.mega-head:hover .mega-art{background:var(--blue-tint)}
.nav .mega .mega-head:hover{color:var(--blue)}
.mega-t{font-weight:700;font-size:16px;line-height:1.25}
.mega-col ul{display:grid;gap:2px;margin-top:8px}
.nav .mega-col ul a:not(.btn){font-size:15px;line-height:1.35;color:var(--muted);padding:5px 0;text-decoration:none}
.nav .mega-col ul a:not(.btn):hover{color:var(--blue)}
.mega-foot{display:flex;align-items:center;gap:28px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.nav .mega .mega-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--blue);text-decoration:none}
.mega-link svg{width:18px;height:18px}
.mega-card{margin-left:auto;display:flex;align-items:center;gap:16px;background:var(--blue);color:#fff;border-radius:18px;padding:10px 10px 10px 20px;font-size:15px}
/* Calculators (assets/js/calc.js) */
.calc{display:grid;border-radius:var(--r);overflow:hidden;background:var(--grey)}
.calc-in{padding:24px;display:grid;gap:10px;align-content:start}
.calc-h,.prose .calc-h{font-size:24px;line-height:1.2;margin:0;letter-spacing:-.02em}
.calc-p{color:var(--muted)}
.calc-fields{display:grid;gap:16px;margin-top:8px}
.calc-field label{display:block;font-weight:700;font-size:16px;margin-bottom:8px}
.money{position:relative}
.money span{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted);pointer-events:none}
.money .inp{padding-left:34px}
.calc .inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
.calc .inp[aria-invalid="true"]{border-color:#C0261B}
.calc-hint{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.5}
.calc-hint a{color:var(--blue)}
.calc-err{color:#B3201A;font-weight:600;font-size:14px;margin-top:6px}
.range{display:flex;align-items:center;gap:14px}
.range input{flex:1;accent-color:var(--blue);min-height:44px}
.range output{flex:none;min-width:5.5em;font-weight:700;text-align:right}
.calc-out{background:var(--blue);color:#fff;padding:24px;display:grid;gap:12px;align-content:start}
.calc-label{font-weight:600;color:#EEF3FF;min-height:1.5em}
.calc-big,.prose .calc-big{font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.03em;min-height:1.1em;margin:0}
.calc-lines,.prose .calc-lines{display:grid;min-height:7.5em;align-content:start;margin:0}
.calc-lines li,.prose .calc .calc-lines li{display:flex;justify-content:space-between;gap:12px;padding:6px 0 !important;border-top:1px solid rgba(255,255,255,.25);font-size:15px;line-height:1.4;margin:0 !important}
.prose .calc .calc-lines li:before{display:none}
.calc-bar{height:14px;border-radius:7px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:6px}
.calc-bar i{display:block;height:100%;width:0;background:#fff;border-radius:7px;transition:width .3s ease}
.calc-scale{display:flex;justify-content:space-between;font-size:14px;color:#EEF3FF;margin:0}
.calc-note,.prose .calc-note{font-size:14px;color:#EEF3FF;margin:4px 0 0}
.calc-out .btn{justify-self:start;margin-top:4px}
.prose .calc-out p,.prose .calc-out ul{margin-top:0}
.calcs{display:grid;gap:32px;max-width:1000px}
@media (min-width:720px){ .calc{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} .calc-in,.calc-out{padding:32px} }
@media (max-width:379px){ .nav .btn{display:none} }
@media (min-width:420px){ .top .wrap{gap:12px} }
.top-simple .wrap{justify-content:center}

/* Hero (home) */
.hero{background:var(--blue);color:#fff;padding-block:40px 16px;overflow:hidden;position:relative}
.hero > .wrap{position:relative}
/* the faint heart marks of the closing band, kept clear of the hero's top and bottom edges (both meet blue) */
.hero .cl{position:absolute;opacity:.12;width:200px}
@media (min-width:960px){ .hero .cl{width:280px} }
.hero .cl.a{left:-90px;top:22%}.hero .cl.b{right:-80px;bottom:12%}
.hero-grid{display:grid;gap:40px;align-items:center}
.hero-copy{display:grid;justify-items:start;text-align:left;gap:20px}
.hero-badge .ti{width:200px;height:auto}
.hero h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.035em;max-width:11em}
.ticks{display:grid;gap:12px;text-align:left;font-size:var(--fs-body);line-height:1.4;max-width:26em}
.ticks li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.ticks svg{width:22px;height:22px;margin-top:3px}
.hero .ticks svg path{stroke:#fff}
.hero .btn{width:100%;max-width:340px;background:var(--orange);color:#fff}
.hero .btn:hover{background:var(--orange);filter:brightness(.92)}
.visual{position:relative;width:100%;max-width:520px;margin:0 auto;padding:58px 10px 64px;isolation:isolate}
/* The characters (Paul, 11 Nov 2026): illness/chars.py draws them; every line stays 2.5px at any size */
.chars{display:block;width:100%;height:auto;overflow:visible}
.chars *{vector-effect:non-scaling-stroke}
.visual .art{animation:lift .9s .05s cubic-bezier(.2,.7,.2,1) both}
.blob{position:absolute;border-radius:50%;z-index:-1}
.blob.b1{width:46%;aspect-ratio:1;right:-6%;top:-2%;background:var(--orange-tint)}
.blob.b2{width:36%;aspect-ratio:1;left:-8%;bottom:4%;background:var(--blue-tint)}
.chip{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:18px;padding:10px 14px 10px 10px;box-shadow:0 16px 34px -14px rgba(35,38,46,.4);animation:lift .8s .35s cubic-bezier(.2,.7,.2,1) both;max-width:78%}
.chip b{display:block;font-size:15px;line-height:1.2}
.chip small{display:block;font-size:13px;color:var(--muted);line-height:1.25;margin-top:2px}
.chip .ib{flex:none;width:40px;height:40px;border-radius:12px;background:var(--blue-tint);display:grid;place-items:center}
.chip .ib svg{width:24px;height:24px}
.chip.c1{left:0;top:0}
.chip.c2{right:0;bottom:0;animation-delay:.5s}
@keyframes lift{from{transform:translateY(18px)}to{transform:none}}

/* Trust strip */
.strip{background:var(--blue);color:#fff;padding-block:calc(var(--head) + 8px);position:relative;overflow:hidden}
.strip .wrap{position:relative}
.strip .cl{position:absolute;opacity:.12;width:200px}
/* the hero and the strip read as one blue block (Paul colour test round 2): the marks stay clear of the edge they share */
.strip .cl.a{left:-70px;top:50%;transform:translateY(-50%)}.strip .cl.b{right:-60px;bottom:-70px}
.strip h2{font-size:22px;letter-spacing:-.015em;text-align:center;margin-bottom:24px;color:#fff}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.facts li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;font-weight:600;font-size:var(--fs-small);line-height:1.3;padding:16px 10px;background:#fff;color:var(--ink);border-radius:18px;box-shadow:0 14px 30px -20px rgba(0,30,90,.6)}
.facts .ib{flex:none;width:64px;height:64px;border-radius:18px;background:var(--blue-tint);display:grid;place-items:center}
.facts .ib .chars{width:56px;height:56px}
.facts .chars > g{stroke-width:2}

/* Sections */
.sec{padding-top:var(--sec)}
.sec.last{padding-bottom:var(--sec)}

/* How it works */
.how-grid{display:grid;gap:24px;justify-items:center}
.steps-nav{display:flex;gap:8px;flex-wrap:nowrap;justify-content:center}
.steps-nav button{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:10px 12px;border-radius:999px;font-weight:600;font-size:var(--fs-small);color:var(--muted);min-height:44px}
.steps-nav button i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--band);color:var(--muted);font-size:14px;font-weight:700}
.steps-nav button[aria-selected="true"]{color:var(--ink)}
.js .steps-nav button:not([aria-selected="true"]) .tl{display:none}
.steps-nav button[aria-selected="true"] i{background:var(--blue);color:#fff}
.stage{background:var(--grey);border-radius:var(--r);padding:28px 24px 0;width:100%;max-width:440px;display:flex;justify-content:center;overflow:hidden}
.phone{width:260px;height:470px;border-radius:38px 38px 0 0;border:9px solid #1D1F24;border-bottom:0;background:var(--blue);color:#fff;padding:20px 16px;position:relative;overflow:hidden}
.phone:before{content:"";position:absolute;left:50%;top:8px;width:70px;height:6px;border-radius:3px;background:rgba(255,255,255,.35);transform:translateX(-50%)}
.screen{display:grid;gap:12px;align-content:start;padding-top:18px;animation:fade .35s ease both}
.screen .s-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;opacity:.9}
.screen .s-top span{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.screen .pre{font-size:13px;opacity:.85;text-align:center}
.screen .h4{font-size:24px;line-height:1.1;text-align:center;letter-spacing:-.02em;font-weight:700}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.tiles span{background:rgba(255,255,255,.14);border-radius:14px;padding:12px 8px;text-align:center;font-size:13px;font-weight:700;display:grid;gap:6px;justify-items:center}
.tiles span.on{background:#fff;color:var(--blue)}
.tiles svg{width:30px;height:24px}
.spec{background:#fff;color:var(--ink);border-radius:18px;padding:14px;display:grid;gap:10px;justify-items:center;text-align:center}
.spec-ic{width:72px;height:72px;border-radius:50%;background:var(--blue-tint);display:grid;place-items:center}
.spec-ic svg{width:38px;height:38px}
.spec b{font-size:15px}
.spec small{font-size:12px;color:var(--muted)}
.loading{height:6px;width:100%;border-radius:3px;background:var(--band);overflow:hidden}
.loading i{display:block;height:100%;width:62%;background:var(--blue);border-radius:3px}
.choices{display:grid;gap:8px;margin-top:10px}
.choices span{border-radius:999px;padding:12px;text-align:center;font-weight:700;font-size:14px;background:#fff;color:var(--blue)}
.choices span.alt{background:rgba(255,255,255,.16);color:#fff}
@keyframes fade{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}
.step-copy{display:grid;gap:14px;text-align:center;justify-items:center;max-width:30em;animation:fade .35s ease both}
.sc-art{display:block;width:200px;max-width:70%}
.step-copy h3{font-size:var(--fs-h3);line-height:1.15}
.step-copy p{color:var(--muted)}
.dots{display:flex;gap:8px;justify-content:center}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--ink)}

/* What it covers */
.cover-card{background:var(--grey);border-radius:calc(var(--r) + 8px);padding:var(--pad);display:grid;gap:32px;overflow:hidden;position:relative}
.cover-copy{display:grid;gap:16px;align-content:start}
.cover-copy p{color:var(--muted)}
.conds{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.conds li{background:#fff;border-radius:999px;padding:10px 16px;font-weight:600;font-size:var(--fs-small);display:inline-flex;align-items:center;gap:8px}
.conds li svg{width:22px;height:22px}
.cover-copy .src{font-size:14px;color:var(--muted)}
.cover-copy .src b{color:var(--ink);font-weight:600}
.cover-art{position:relative;min-height:240px}
.cover-art .blob.a1{width:62%;aspect-ratio:1;left:14%;top:6%;background:var(--blue-tint);z-index:0}
.cover-art .blob.a2{width:30%;aspect-ratio:1;right:4%;bottom:6%;background:var(--orange-tint);z-index:0}
.cover-art .tile{position:absolute;width:56px;height:56px;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -14px rgba(35,38,46,.35);z-index:2}
.cover-art .tile svg{width:30px;height:30px}
.cover-art .t1{left:6%;top:12%}.cover-art .t2{right:8%;top:6%}.cover-art .t3{left:12%;bottom:8%}
.paycard{position:absolute;left:22%;top:26%;width:56%;aspect-ratio:1.6;border-radius:18px;background:var(--orange);color:#fff;padding:16px;display:grid;align-content:space-between;transform:rotate(-8deg);box-shadow:0 24px 40px -18px rgba(255,95,46,.6);z-index:1}
.paycard b{font-size:clamp(15px,2.6vw,20px);line-height:1.15}
.paycard .pc-ic svg{width:40px;height:40px}
.paycard .line{height:8px;border-radius:4px;background:rgba(255,255,255,.5);width:70%}

/* Who it's for */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;margin-bottom:var(--gap);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--grey);font-weight:600;font-size:var(--fs-small)}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.tabs button[aria-selected="true"]:before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.who-card{background:var(--grey);border-radius:calc(var(--r) + 8px);padding:var(--pad);display:grid;gap:28px;align-items:center;text-align:left;animation:fade .35s ease both}
.who-art{position:relative;border-radius:var(--r);background:#fff;padding:20px 20px 80px;display:grid;place-items:center;max-width:100%}
.who-art .chars{max-width:380px}
.who-art .label{position:absolute;left:12px;bottom:12px;right:12px;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:var(--grey);color:var(--ink);font-weight:600;font-size:15px;line-height:1.25}
.who-art .label i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.who-copy{display:grid;gap:16px;justify-items:start}
.who-copy h3{font-size:var(--fs-h3);line-height:1.15}
.who-copy p{color:var(--muted)}

/* FAQ (home and guides) */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:var(--fs-lead);font-weight:600;line-height:1.35;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:20px;height:20px;position:relative}
.faq summary i:before,.faq summary i:after{content:"";position:absolute;left:2px;right:2px;top:9px;height:2px;background:var(--ink);border-radius:1px;transition:transform .25s ease}
.faq summary i:after{transform:rotate(90deg)}
.faq details[open] summary i:after{transform:rotate(0)}
.faq .ans{padding:0 40px 22px 0;color:var(--muted);display:grid;gap:10px}
.faq .ans a{color:var(--blue);font-weight:600}
.faq .more a{text-decoration:none}
.faq .more a:hover{text-decoration:underline}

/* Closing band */
.cta-band{background:var(--blue);color:#fff;padding-block:var(--sec);text-align:center;position:relative;overflow:hidden}
.cta-band .wrap{display:grid;gap:18px;justify-items:center;position:relative}
.cta-band p{font-size:var(--fs-lead);opacity:.95;max-width:30em}
.cta-band .btn{margin-top:8px}
.cta-band .cl{position:absolute;opacity:.12;width:280px}
.cta-band .cl.a{left:-80px;top:-40px}.cta-band .cl.b{right:-70px;bottom:-60px}

/* Footer */
footer{background:var(--grey);position:relative;padding-top:var(--sec)}
footer:before{content:"";position:absolute;left:0;right:0;top:-40px;height:80px;background:var(--grey);border-radius:50% 50% 0 0 / 100% 100% 0 0}
footer.flat{padding-top:calc(var(--sec) * .75);border-top:1px solid var(--line)}
footer.flat:before{display:none}
.ft-top{display:grid;gap:32px;position:relative}
.ft-brand{display:grid;gap:14px;align-content:start;justify-items:start}
.ft-brand p{color:var(--muted);font-size:var(--fs-small);max-width:24em}
.ft-brand .ti{width:180px;height:auto;margin-top:4px}
.ft-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ft-cols h2{font-size:17px;letter-spacing:-.01em;margin-bottom:8px}
.ft-cols a,.ft-cols .linkish{display:inline-block;padding:10px 0;text-decoration:none;color:var(--muted);font-size:var(--fs-small);line-height:1.35}
.ft-cols a:hover,.ft-cols .linkish:hover{color:var(--ink);text-decoration:underline}
.legal{margin-top:var(--head);padding-block:24px var(--head);border-top:1px solid var(--line);display:grid;gap:10px;color:var(--muted);font-size:14px;line-height:1.6;position:relative}
.bottom{background:var(--ink);color:#C9CDD6;font-size:14px}
.bottom .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-block:18px}

/* Cookie bar */
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:flex;justify-content:center}
.consent-in{background:#fff;border-radius:20px;padding:16px;display:grid;gap:12px;max-width:880px;width:100%;box-shadow:0 20px 50px -18px rgba(20,22,28,.45);border:1px solid var(--line)}
.consent p{font-size:15px;line-height:1.45}
.consent a{color:var(--blue);font-weight:700}
.consent-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn.even{background:var(--ink)}
.btn.even:hover{background:#000}
@media (min-width:760px){ .consent{left:24px;right:24px;bottom:24px} .consent-in{grid-template-columns:1fr auto;align-items:center;padding:20px 24px;gap:20px} .consent p{font-size:16px} .consent-btns{grid-template-columns:130px 130px} }

/* Inner page hero, breadcrumb */
.phero{background:var(--grey);padding-block:32px var(--sec);position:relative;overflow:hidden;isolation:isolate}
.phero .wrap{display:grid;gap:18px;justify-items:start;position:relative}
.phero h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.035em;max-width:14em}
.phero .lede{font-size:var(--fs-lead);color:var(--muted);max-width:36em}
.phero .blob.p1{width:220px;aspect-ratio:1;right:-120px;top:-110px;background:var(--orange-tint)}
.phero .blob.p2{width:150px;aspect-ratio:1;right:24px;bottom:-110px;background:var(--blue-tint)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;font-size:15px;color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li + li:before{content:"";width:6px;height:6px;border-right:2px solid #9AA1AE;border-top:2px solid #9AA1AE;transform:rotate(45deg);margin:0 12px 0 8px}
.crumbs a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.ameta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:15px;color:var(--muted);font-weight:500}
.jump ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;font-weight:600;font-size:var(--fs-small);text-decoration:none}
.jump a:hover{background:var(--ink);color:#fff}

/* Guides hub */
.gsec{padding-top:var(--sec)}
.gsec:last-of-type{padding-bottom:var(--sec)}
.ghead{display:grid;gap:24px;align-items:center;margin-bottom:var(--head)}
.gphoto{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--grey)}
.gphoto img{width:100%;height:100%;object-fit:cover}
.gphoto picture{height:100%}
.gcopy{display:grid;gap:12px}
.gcount{font-weight:700;color:var(--blue);font-size:var(--fs-small)}
.gcards{display:grid;gap:var(--gap)}
.gcard{height:100%;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:24px;border-radius:var(--r);background:var(--grey);text-decoration:none;transition:background .2s ease, transform .2s ease}
.gcard:hover{background:var(--blue-tint);transform:translateY(-2px)}
.gc-art{display:grid;place-items:center;background:#fff;border-radius:18px;padding:8px 10px;margin-bottom:6px}
.gc-art .chars{width:auto;height:104px;max-width:100%}
.gc-art .chars > g,.mega-art .chars > g,.mg-art .chars > g{stroke-width:2.2}
.gc-t{font-size:var(--fs-h3);font-weight:700;line-height:1.2;letter-spacing:-.02em;font-size:21px}
.gc-p{color:var(--muted);font-size:var(--fs-small);line-height:1.5}
.gc-m{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;color:var(--muted);margin-top:6px}
.gc-m .go{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--blue)}
.gc-m .go svg{width:18px;height:18px}

/* Guide article */
.ahero{background:var(--grey);padding-block:32px var(--sec);overflow:hidden}
.ahero-grid{display:grid;gap:32px;align-items:center}
.ahero-copy{display:grid;gap:18px;justify-items:start}
.ahero h1{font-size:var(--fs-h1);line-height:1.06;letter-spacing:-.035em;max-width:16em}
.ahero .lede{font-size:var(--fs-lead);color:var(--muted);max-width:36em}
.aart{display:grid;place-items:center;position:relative;min-height:190px;isolation:isolate}
.aart .a-scene{position:relative;width:min(300px,78%);background:#fff;border-radius:28px;padding:10px 14px;box-shadow:0 30px 50px -28px rgba(35,38,46,.3)}
.aart .blob.a1{width:250px;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--blue-tint)}
.aart .blob.a2{width:120px;aspect-ratio:1;right:10%;bottom:8%;background:var(--orange-tint)}
/* Guide pages, the guides hub and the calculators page: the home page's blue hero (Paul, 11 Nov 2026). White words,
   light breadcrumbs and meta, white topic chips with dark words; it meets the blue header with no line. About, contact,
   legal and 404 keep the grey hero. */
.ahero,.hub .phero,.calcpage .phero{background:var(--blue);color:#fff}
.ahero .lede,.hub .phero .lede,.calcpage .phero .lede,.ahero .ameta{color:#EEF3FF}
.ahero .crumbs ol,.hub .phero .crumbs ol,.calcpage .phero .crumbs ol{color:#EEF3FF}
.ahero .crumbs li + li:before,.hub .phero .crumbs li + li:before,.calcpage .phero .crumbs li + li:before{border-color:rgba(255,255,255,.7)}
.ahero .crumbs a:hover,.hub .phero .crumbs a:hover,.calcpage .phero .crumbs a:hover{color:#fff}
.ahero :focus-visible,.hub .phero :focus-visible,.calcpage .phero :focus-visible{outline-color:#fff}
.hub .jump a{color:var(--ink)}
.hub .jump a:hover{background:var(--blue-tint);color:var(--ink)}
/* On these blue heroes the circles sit fully inside the band (like the home hero's), never cut by the blue header.
   Phones under 600px have no room beside the H1, so they show no circles; the small bottom one is desktop only. */
.hub .phero .blob,.calcpage .phero .blob{display:none}
@media (min-width:600px){ .hub .phero .blob.p1,.calcpage .phero .blob.p1{display:block;width:150px;right:-60px;top:24px} }
.agrid{display:grid;gap:32px;padding-top:var(--head);padding-bottom:var(--head)}
.legalpage .agrid{padding-top:0;padding-bottom:0}
.toc details{background:var(--grey);border-radius:20px;padding:4px 20px}
.toc summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;font-weight:700}
.toc summary::-webkit-details-marker{display:none}
.toc summary:after{content:"+";font-size:22px;font-weight:500}
.toc details[open] summary:after{content:"\2212"}
.toc ol{display:grid;padding-bottom:12px;counter-reset:t}
.toc li a{display:flex;gap:10px;padding:9px 0;text-decoration:none;color:var(--muted);font-size:15px;line-height:1.4;border-top:1px solid var(--line)}
.toc li a:before{counter-increment:t;content:counter(t);flex:none;width:22px;font-weight:700;color:var(--blue)}
.toc li a:hover,.toc li a.on{color:var(--ink)}
.prose{max-width:720px;min-width:0}
.prose > * + *{margin-top:18px}
.prose h2{font-size:28px;line-height:1.15;margin-top:48px;scroll-margin-top:calc(var(--top-h) + 16px)}
.prose h3{font-size:21px;line-height:1.25;margin-top:32px}
.prose p,.prose li{line-height:1.7}
.prose ul:not(.srcs):not(.ticks) li{position:relative;padding-left:26px}
.prose ul:not(.srcs):not(.ticks) li + li{margin-top:8px}
.prose ul:not(.srcs):not(.ticks) li:before{content:"";position:absolute;left:4px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.prose a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:700}
.table{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.table table{border-collapse:collapse;width:100%;font-size:16px}
.table th,.table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{background:var(--grey);font-weight:700}
.table tr:last-child td{border-bottom:0}
.glance{background:var(--blue-tint);border-radius:var(--r);padding:24px}
.prose .glance-h{margin:0 0 14px;font-size:20px}
.glance ul{display:grid;gap:10px}
.prose .glance li{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:0;line-height:1.5}
.prose .glance li:before{display:none}
.glance svg{width:22px;height:22px;margin-top:2px}
.incta{margin-top:48px!important;background:var(--blue);color:#fff;border-radius:var(--r);padding:28px 24px;display:grid;gap:16px;justify-items:start;position:relative;overflow:hidden}
.prose .incta h2{margin:0;font-size:24px;color:#fff}
.incta p{opacity:.95;margin-top:8px;line-height:1.55}
.incta-sym svg{width:44px;height:44px}
.prose .faq{margin:20px 0 0}
.prose .faq summary{font-size:18px}
.srcs-p{color:var(--muted);font-size:var(--fs-small)}
.srcs{display:grid;gap:12px}
.srcs li{display:grid;gap:2px;padding:14px 16px;border-radius:16px;background:var(--grey);font-size:15px;line-height:1.5}
.srcs a{font-weight:600}
.srcs span{color:var(--muted)}
.related{padding-bottom:var(--sec)}
.related .wrap{border-top:1px solid var(--line);padding-top:var(--head)}
.rel-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:var(--head);flex-wrap:wrap}
.more-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--blue);text-decoration:none}
.more-link svg{width:18px;height:18px}
.more-link:hover{text-decoration:underline}

/* About, contact */
.two-col{display:grid;gap:40px}
.prose > h2:first-child{margin-top:0}
.side{display:grid;gap:24px;align-content:start}
.side-photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-width:420px}
.side-photo img{width:100%;height:100%;object-fit:cover}
.side-photo picture{height:100%}
/* Our doodles over the photos (illness/photo_art.py): white on the photo, dark above it; the chip names the topic */
.photo-wrap{position:relative;isolation:isolate}
.side .photo-wrap{max-width:420px}
.photo-wrap .doodles{position:absolute;left:0;width:100%;pointer-events:none;overflow:visible;z-index:1}
.doodles.r300{top:-14.667%;height:129.333%}
.doodles.r500{top:-8.8%;height:117.6%}
.photo-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:14px;line-height:1.2;box-shadow:0 14px 28px -14px rgba(35,38,46,.45);max-width:calc(100% - 24px)}
.photo-chip .pc-i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue-tint);display:grid;place-items:center}
.photo-chip .pc-i svg{width:18px;height:18px}
.photo-chip.bl{left:12px;bottom:12px}
.photo-chip.br{right:12px;bottom:12px}
.side-card{background:var(--grey);border-radius:var(--r);padding:24px;display:grid;gap:12px;align-content:start}
.side-card h2{font-size:22px;letter-spacing:-.015em}
.side-card .mt{margin-top:16px}
.side-card p{color:var(--muted)}
.linklist li + li{border-top:1px solid var(--line)}
.linklist a{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-weight:600;text-decoration:none}
.linklist a svg{width:18px;height:18px;color:var(--blue)}
.linklist a:hover{color:var(--blue)}
.contact-grid{display:grid;gap:24px;align-items:start}
.mail-card{background:var(--blue-tint);border-radius:calc(var(--r) + 8px);padding:var(--pad);display:grid;gap:12px;justify-items:start}
.mail-ic{width:64px;height:64px;border-radius:20px;background:#fff;display:grid;place-items:center}
.mail-ic svg{width:34px;height:34px}
.mail-card h2{font-size:var(--fs-h3)}
.mail{font-size:clamp(22px,5.4vw,34px);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.mail a{color:var(--blue);text-decoration:none}
.mail a:hover{text-decoration:underline}
.mail-card .small{color:var(--muted);font-size:var(--fs-small)}

/* 404 */
.nf .wrap{justify-items:center;text-align:center}
.nf .lede{margin-inline:auto}
.nf-sym svg{width:64px;height:64px}
.nf-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}

/* The enquiry form page: the blue "app" screen from How it works (Paul, 11 Nov 2026). Phones: a full-height blue screen.
   720px and up: a centred blue card, rounded like the app. White text on #0061EF is 5.3:1; option tiles are white at 8%
   over the blue (white text 4.65:1); softer text uses #EEF3FF (4.78:1). Inputs are white fields with dark text. */
.quote main{background:var(--blue)}
.qpage{padding:0}
.qm-panel{position:relative;background:var(--blue);color:#fff;width:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;min-height:calc(100vh - var(--top-h));min-height:calc(100svh - var(--top-h))}
.qm-panel :focus-visible{outline-color:#fff}
.qm-bar{display:flex;align-items:center;gap:14px;padding:16px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px))}
.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;transition:background .15s ease}
.icon-btn:hover{background:rgba(255,255,255,.3)}
.icon-btn svg{width:20px;height:20px}
.qm-bar .icon-btn[hidden]{display:grid!important;visibility:hidden}
.qm-mid{flex:1;display:grid;gap:8px;justify-items:center;min-width:0}
.qm-count{font-size:13px;font-weight:700;letter-spacing:.02em;color:#EEF3FF;min-height:1.4em;line-height:1.4}
.prog{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}
.prog i{display:block;height:100%;width:20%;background:#fff;border-radius:3px;transition:width .35s ease}
.qm-body{flex:1;padding:20px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px))}
.qm-pre{font-size:15px;font-weight:600;color:#EEF3FF;text-align:center;margin-bottom:6px}
.q-title{font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.025em;padding:0;float:left;width:100%;text-align:center;color:#fff;text-wrap:balance}
.q-title + *{clear:both}
.qm-hint{padding-top:10px;color:#EEF3FF;font-size:var(--fs-small);text-align:center;max-width:30em;margin-inline:auto}
.qm-panel fieldset{border:0;margin:0;padding:0;min-width:0}
.qm-panel fieldset > .opts,.qm-panel fieldset > .fields{padding-top:24px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{position:relative;display:grid;justify-items:center;align-content:center;gap:10px;min-height:132px;padding:16px 10px;border-radius:20px;border:2px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:17px;line-height:1.2;text-align:center;cursor:pointer;transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt svg{width:54px;height:43px}
.opt:hover{border-color:#fff}
.opt:active{transform:scale(.98)}
.opt:has(input:checked){border-color:#fff;background:#fff;color:var(--blue)}
.opt:has(input:checked) svg [stroke="#FFB199"]{stroke:var(--orange)}
.opt:has(input:focus-visible){outline:3px solid #fff;outline-offset:3px}
.opts.list{grid-template-columns:1fr}
.opt.row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:0 20px;text-align:left}
.opt.row:after{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #fff}
.opt.row:has(input:checked):after{border:7px solid var(--blue)}
.qm-note{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;font-size:15px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);border-radius:14px;padding:12px 14px}
.qm-note svg{flex:none;width:20px;height:20px}
.fields{display:grid;gap:16px}
.qm-panel fieldset > .fields + .fields{padding-top:16px}
.fields.three{grid-template-columns:repeat(3,1fr);gap:10px}
.fields.two{grid-template-columns:1fr 1fr;gap:10px}
.field label{display:block;font-weight:700;font-size:16px;margin-bottom:8px;color:#fff}
.inp{width:100%;min-height:56px;padding:14px 16px;border-radius:14px;border:2px solid #fff;font:600 18px/1 var(--font);color:var(--ink);background:#fff}
.inp::placeholder{color:#6B717C;opacity:1}
.inp:focus{outline:3px solid #fff;outline-offset:3px}
.inp[aria-invalid="true"]{border-color:#C0261B;box-shadow:inset 0 0 0 1px #C0261B}
.err{color:#B3201A;background:#fff;font-weight:600;font-size:15px;line-height:1.4;margin-top:14px;padding:10px 14px;border-radius:12px}
.qm-foot{margin-top:28px;display:grid;gap:16px}
.qm-foot .btn{width:100%}
.qm-panel .btn.white{color:var(--blue)}
.qm-panel .btn.white:hover{background:#EEF3FF}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.final{font-size:14px;color:#fff;line-height:1.5}
.final a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.thanks{display:grid;gap:16px;justify-items:center;text-align:center;padding-top:12px}
.thanks:focus{outline:none}
.done-art{display:block;width:220px;max-width:70%}
.thanks h2{font-size:30px;line-height:1.1;color:#fff}
.thanks p{color:#EEF3FF;max-width:30em}
.done-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.q-badge{margin-top:28px;display:flex;justify-content:center}
.q-badge .ti{width:170px;height:auto}
@media (min-width:720px){
  .quote main{background:var(--grey)}
  .qpage{padding:48px 20px var(--sec)}
  .qm-panel{max-width:600px;min-height:0;border-radius:40px;box-shadow:0 40px 80px -40px rgba(0,40,110,.55);overflow:hidden}
  .qm-bar{padding:28px 32px 8px}
  .qm-body{padding:28px 56px 48px}
}

/* Desktop */
@media (min-width:640px){
  .facts{grid-template-columns:repeat(4,1fr)}
  .ft-cols{grid-template-columns:repeat(3,1fr)}
  .gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .incta{grid-template-columns:auto 1fr auto;align-items:center;padding:32px}
  .contact-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
@media (min-width:960px){
  .logo img{height:36px}
  .nav a:not(.btn){display:inline}
  .nav .mm{display:block}
  .nav .btn.sm{padding:0 20px}
  .menu-btn,.menu{display:none!important}
  .hero{padding-block:var(--sec) 32px}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px}
  .hero-copy{gap:24px}
  .hero-badge .ti{width:220px}
  .hero h1{max-width:10.5em}
  .ticks{margin-top:8px;gap:14px}
  .hero .btn{width:auto;margin-top:12px}
  .visual{max-width:560px;padding:24px 24px 40px}
  .chip.c1{left:-28px;top:48px}
  .chip.c2{right:-24px;bottom:4px}
  .strip h2{font-size:26px;margin-bottom:28px}
  .facts li{flex-direction:row;text-align:left;justify-content:center;padding:18px 16px}
  .how-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:56px;align-items:center;justify-items:stretch}
  .steps-nav{flex-direction:column;align-items:flex-start;justify-content:center}
  .steps-nav button{font-size:18px}
  .js .steps-nav button .tl{display:inline!important}
  .stage{width:auto;padding:36px 48px 0}
  .phone{width:290px;height:540px}
  .step-copy{text-align:left;justify-items:start}
  .dots{grid-column:1/-1}
  .cover-card{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
  .cover-art{min-height:360px}
  .center .tabs{justify-content:center}
  .who-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .who-art{max-width:440px;justify-self:end;width:100%}
  .ft-top{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px}
  .phero{padding-block:48px var(--sec)}
  .phero .blob.p1{width:460px;right:-120px;top:-160px}
  .phero .blob.p2{width:220px;right:260px;bottom:-150px}
  .hub .phero .blob.p1,.calcpage .phero .blob.p1{width:260px;right:-80px;top:40px}
  .hub .phero .blob.p2,.calcpage .phero .blob.p2{display:block;width:110px;right:230px;bottom:36px}
  .ghead{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px}
  .gcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ahero{padding-block:48px var(--sec)}
  .ahero-grid{grid-template-columns:minmax(0,1fr) 340px;gap:56px}
  .aart{min-height:300px}
  .aart .a-scene{width:320px}
  .agrid{grid-template-columns:260px minmax(0,1fr);gap:72px;align-items:start}
  .toc{position:sticky;top:calc(var(--top-h) + 24px);max-height:calc(100vh - var(--top-h) - 48px);overflow-y:auto}
  .prose h2{font-size:32px}
  .two-col{grid-template-columns:minmax(0,1fr) 400px;gap:80px;align-items:start}
  .side{position:sticky;top:calc(var(--top-h) + 24px)}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{.top,footer,.consent,.cta-band,.incta,.related,.toc{display:none}}

/* Free tools (/tools/sick-pay-gap/, 11 Nov 2026): a standalone public resource. Slim blue bar with the logo only, no
   menu or quote buttons, a small footer with the firm identity. assets/js/sickpay.js does the sums. */
.top.slim .wrap{height:60px}
.top.slim .logo img{height:28px}
.spg-head{padding-block:40px 32px}
.spg-head .wrap{display:grid;gap:16px;justify-items:start}
.spg-head h1{font-size:clamp(36px, 6vw, 56px);line-height:1.06;letter-spacing:-.035em}
.spg-head .lede{font-size:var(--fs-lead);color:var(--muted);max-width:38em}
.spg-private{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--ink);font-weight:600}
.spg-private svg{width:22px;height:22px;flex:none}
.spg-grid{display:grid;gap:20px;align-items:start}
.spg-in{background:var(--grey);border-radius:var(--r);padding:24px;display:grid;gap:10px}
.spg-in .inp{border-color:var(--line)}
.spg-in .inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
.spg-in .inp[aria-invalid="true"]{border-color:#C0261B}
.inp.sel{appearance:none;-webkit-appearance:none;line-height:1.25;padding-right:48px;font-size:17px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%2323262E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 20px 20px}
.spg-weeks{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.spg-weeks label{min-height:2.6em}
.spg-out{background:var(--blue);color:#fff;border-radius:var(--r);padding:24px;display:grid;gap:16px;min-height:200px}
.spg-out [data-result]{display:grid;gap:18px}
.spg-out [data-result][hidden]{display:none}
.spg-empty{color:#EEF3FF;font-size:var(--fs-lead);line-height:1.45;align-self:center}
.spg-out .calc-big{font-size:44px}
.spg-sub{font-size:var(--fs-lead);font-weight:700;margin-top:4px}
.spg-k{font-size:15px;font-weight:600;color:#EEF3FF}
.spg-v{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.spg-est{font-size:14px;color:#EEF3FF;line-height:1.5;margin-top:4px}
.spg-ssp{border-top:1px solid rgba(255,255,255,.25);padding-top:16px}
.spg-lines{min-height:0}
.spg-lump{background:rgba(255,255,255,.12);border-radius:16px;padding:16px 18px}
.spg-lump > p:first-child{font-weight:600}
.spg-phases ul{display:grid;gap:6px;margin-top:8px}
.spg-phases li{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.4}
.spg-phases li:before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:#fff;transform:translateY(1px)}
.spg-phases li.ph-half:before{background:rgba(255,255,255,.6)}
.spg-phases li.ph-ssp:before{background:var(--orange)}
.spg-phases li.ph-none:before{background:transparent;box-shadow:inset 0 0 0 2px #fff}
.spg-table{margin-top:40px}
.spg-h2{font-size:clamp(24px, 3vw, 32px);line-height:1.15;letter-spacing:-.02em}
.spg-scroll{margin-top:16px;border:1px solid var(--line);border-radius:18px;overflow-x:auto}
.spg-table table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:16px}
.spg-table th,.spg-table td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.spg-table th:first-child{text-align:left}
.spg-table thead th{background:var(--grey);font-size:14px;font-weight:700;color:var(--muted)}
.spg-table thead th{white-space:normal;vertical-align:bottom;line-height:1.25}
@media (max-width:479px){ .spg-table th,.spg-table td{padding:11px 10px} .spg-table table{font-size:15px} }
.spg-table tbody th{font-weight:700}
.spg-table tbody tr:last-child > *{border-bottom:0}
.spg-table tr.out > *{background:#FFF3EE}
.spg-table tr.out td:last-child{color:#B3201A;font-weight:700}
.spg-info{background:var(--grey);margin-top:calc(var(--sec) * .75);padding-block:var(--sec)}
.spg-info .wrap{display:grid;gap:56px}
.spg-p{color:var(--muted);margin-top:10px;max-width:40em}
.spg-cards{display:grid;gap:16px;margin-top:32px}
.spg-cards li{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #E1E5EC;border-radius:24px;padding:24px;box-shadow:0 18px 40px -30px rgba(0,30,90,.4)}
.spg-card-top{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.spg-ib{flex:none;width:64px;height:64px;border-radius:18px;background:var(--blue-tint);display:grid;place-items:center}
.spg-ib .chars{width:52px;height:52px}
.spg-ib .chars > g{stroke-width:2}
.spg-cards h3,.spg-next h3{font-size:17px;line-height:1.25;letter-spacing:-.01em;margin:0}
.spg-key{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--blue)}
.spg-cards li p:not(.spg-key),.spg-next p:not(.spg-key){color:var(--muted);font-size:16px;line-height:1.55}
.spg-how .ticks{margin-top:20px;max-width:46em;font-size:16px}
.spg-src{display:grid;gap:40px;border-top:1px solid var(--line);padding-top:40px}
.spg-srcs{display:grid;gap:10px;margin-top:16px}
.spg-srcs a{color:var(--blue);font-weight:600}
.spg-srcs span{color:var(--muted);font-size:15px}
.spg-checked{margin-top:14px;color:var(--muted);font-size:15px}
.spg-about p{margin-top:12px;color:var(--muted);max-width:34em}
.tool-foot{padding-top:32px;margin-top:0}
.toolpage footer.flat{border-top:1px solid var(--line)}
.tool-links{display:flex;flex-wrap:wrap;gap:4px 24px}
.tool-links a,.tool-links .linkish{display:inline-block;padding:10px 0;text-decoration:none;color:var(--muted);font-size:var(--fs-small)}
.tool-links a:hover,.tool-links .linkish:hover{color:var(--ink);text-decoration:underline}
.tool-foot .legal{margin-top:12px}
@media (min-width:720px){
  .spg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spg-src{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px}
}
@media (min-width:960px){
  .top.slim .wrap{height:68px}
  .top.slim .logo img{height:32px}
  .spg-head{padding-block:64px 40px}
  .spg-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .spg-in,.spg-out{padding:36px}
  .spg-out{position:sticky;top:92px}
  .spg-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spg-info .wrap{gap:72px}
}
@media print{.spg-out{position:static}}
/* Sick pay gap tool: the April 2027 rate (11 Nov 2026) */
.spg-later{font-size:15px;font-weight:600;margin-top:4px}
.spg-next{margin-top:16px;display:flex;align-items:flex-start;gap:18px;background:#FFF2EC;border:1px solid #FFD8C8;border-radius:24px;padding:24px}
.spg-next .spg-ib{background:#fff}
.spg-next > div{display:grid;gap:10px;padding-top:4px}
.spg-next .spg-key{color:#B3361A}
@media (max-width:519px){ .spg-next{flex-direction:column;gap:14px} }
@media (min-width:960px){ .spg-cards li{padding:28px} .spg-next{padding:28px 32px;gap:24px;align-items:center} .spg-next > div{grid-template-columns:auto 1fr;column-gap:28px;align-items:center;padding-top:0} .spg-next h3{grid-column:1/-1} .spg-next .spg-key{font-size:32px} }
/* Sick pay gap tool pictures (illness/tool_art.py, drawn by Codex in the site's line style, 11 Nov 2026) */
.spg-head .wrap{display:grid;gap:8px}
.spg-head-in{display:grid;gap:16px;justify-items:start}
.spg-hero-art{order:-1;width:min(240px, 64vw);justify-self:start}
.spg-table-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.spg-spot.sm{flex:none;width:112px}
.spg-spot{width:200px;max-width:60vw}
.spg-how{display:grid;gap:24px}
.spg-about .spg-spot{margin-bottom:12px}
.spg-about{align-content:start}
@media (min-width:960px){
  .spg-head .wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:48px}
  .spg-hero-art{order:0;width:100%;max-width:420px;justify-self:end}
  .spg-spot.sm{width:150px}
  .spg-how{grid-template-columns:minmax(0,1fr) 280px;align-items:center;gap:56px}
  .spg-how .spg-spot{width:280px}
  .spg-about .spg-spot{width:220px}
}
.spg-spot{background:radial-gradient(circle at 50% 54%, var(--blue-tint) 0 47%, transparent 47.5%)}
.spg-info .spg-spot{background:radial-gradient(circle at 50% 54%, #fff 0 47%, transparent 47.5%)}
/* Sick pay gap tool, round 4 (UX and journalist review, 11 Nov 2026): one hero figure, the three driving inputs
   first with the rest behind More options, a short phone table, rules cut to three cards, one Method and sources toggle */
.spg-source{font-size:var(--fs-small);color:var(--muted)}
.spg-out .spg-v{font-size:22px}
.spg-sub{font-size:16px;font-weight:500;color:#EEF3FF;margin-top:6px}
.spg-more-opts{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.spg-more-opts summary,.spg-method summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.spg-more-opts summary::-webkit-details-marker,.spg-method summary::-webkit-details-marker{display:none}
.spg-more-opts summary{font-weight:700;color:var(--blue);font-size:17px}
.spg-more-opts summary:after,.spg-method summary:after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.spg-more-opts[open] summary:after,.spg-method[open] summary:after{transform:rotate(-135deg) translateY(-3px)}
.spg-more-opts > .calc-fields{margin-top:12px}
.spg-more{display:none;margin-top:12px;min-height:44px;padding:0 20px;border-radius:999px;border:2px solid var(--blue);background:#fff;color:var(--blue);font-weight:700;font-size:16px}
@media (max-width:719px){
  .spg-table:not(.all) tbody tr.more{display:none}
  .spg-more{display:inline-flex;align-items:center}
}
@media (max-width:599px){ .spg-hero-art{display:none} .spg-head{padding-block:28px 24px} }
.spg-rules-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.spg-rules-head .spg-spot{flex:none;width:150px}
.spg-method{border-top:1px solid var(--line);padding-top:24px}
.spg-method summary{color:var(--ink)}
.spg-method summary .spg-h2{margin:0}
.spg-method-in{display:grid;gap:40px;margin-top:24px}
.spg-method .ticks{max-width:46em;font-size:16px}
.spg-h3{font-size:20px;letter-spacing:-.01em}
.spg-about p + p{margin-top:10px}
.spg-cred{font-size:15px;color:var(--muted)}
.spg-press{color:var(--ink);font-weight:600}
@media (max-width:599px){ .spg-rules-head .spg-spot{width:110px} }
@media (min-width:960px){ .spg-rules-head .spg-spot{width:220px} }
/* Home all day heating cost tool (/tools/home-all-day-heating-cost/, 11 Nov 2026; rebuilt in round 4): reuses the sick pay
   gap tool's look (spg-*) and adds the hours grid, the power toggle, the phone total bar and the Method and sources toggle.
   Everything specific to this page is scoped to body.hhcpage or hhc-* classes. heatcost.js does the sums. */
.hhcpage .hhc-figs{font-size:var(--fs-small);color:var(--muted);max-width:40em}
@media (max-width:599px){ .hhcpage .spg-hero-art{display:none} .hhcpage .spg-head{padding-block:28px 24px} }
.hhc-h3{font-size:19px;line-height:1.25;letter-spacing:-.01em;margin:18px 0 0}
.hhc-p{margin-top:0}
.hhc-hours,.hhc-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px;align-items:start}
.hhc-hours .calc-field label,.hhc-pair .calc-field label{font-size:15px;line-height:1.25;margin-bottom:6px;min-height:2.5em;display:flex;align-items:flex-end}
.hhc-hours .calc-hint{margin-top:6px;font-size:13px}
.hhc-box{position:relative}
.hhc-box.has-unit .inp{padding-right:76px}
.hhc-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted);pointer-events:none;font-size:15px}
.hhc-hours .inp,.hhc-pair .inp{min-height:52px;font-size:17px}
.hhc-more-in{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.hhc-more-in summary,.hhc-method summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-weight:700;color:var(--blue);min-height:44px}
.hhc-more-in summary::-webkit-details-marker,.hhc-method summary::-webkit-details-marker{display:none}
.hhc-more-in summary:after,.hhc-method summary:after{content:"";width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.hhc-more-in[open] summary:after,.hhc-method[open] summary:after{transform:translateY(2px) rotate(-135deg)}
.hhc-more-in[open]{display:grid;gap:10px}
.hhc-private{margin-top:10px}
.hhc-sub{font-size:var(--fs-lead);font-weight:600;margin-top:6px;color:#EEF3FF}
.hhc-ssp p{font-size:16px;line-height:1.5}
.hhc-ssp b{font-weight:800}
.hhc-ssp-link{margin-top:6px}
.hhc-ssp-link a{color:#fff;font-weight:700}
.hhc-items-out li{justify-content:space-between}
.hhc-items-out li span{flex:1}
.hhc-items-out li b{white-space:nowrap}
.hhc-items-out li:before{background:var(--orange)}
.hhc-cards .hhc-more{margin-top:auto;padding-top:4px}
.hhc-cards .hhc-more a{color:var(--blue);font-weight:700}
.hhc-cards .spg-key{font-size:24px}
.hhc-method{border-top:1px solid var(--line);padding-top:24px}
.hhc-method summary{color:var(--ink);gap:16px}
.hhc-method summary .spg-spot.sm{width:96px}
.hhc-method summary:after{color:var(--blue);width:14px;height:14px}
.hhc-method-in{display:grid;gap:14px;margin-top:20px;max-width:52em;color:var(--muted)}
.hhc-method-in .ticks{max-width:none;font-size:16px;color:var(--ink)}
.hhc-table{background:#fff}
.hhc-table th,.hhc-table td{white-space:normal}
.hhc-table tbody th{font-weight:600}
.hhc-cred{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:14px;font-size:15px}
@media (min-width:960px){
  .hhc-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hhc-method summary .spg-spot.sm{width:130px}
}
/* The jump to the full result (12 Nov 2026): lands just below the sticky logo bar, no ring on a programmatic focus */
[data-result-box]{scroll-margin-top:calc(var(--top-h) + 16px)}
[data-result-heading]:focus:not(:focus-visible){outline:0}
/* Tap controls on both tools (tools rework, Paul 12 Nov 2026: ask as little as possible, tap don't type). Big tap buttons
   are real radio buttons; the take-home pay box has a slider; We've assumed lines open the control that changes them. */
.tq{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px}
.calc-fields > .tq + .tq,.calc-fields > .tq-pay + .tq{margin-top:10px}
.tq-h,.tq .tq-h{display:block;font-weight:700;font-size:17px;line-height:1.3;padding:0;margin:0}
.tq .calc-hint{margin-top:0}
.taps{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.taps-3 .taps{grid-template-columns:repeat(3,minmax(0,1fr))}
.taps-2 .taps{grid-template-columns:repeat(2,minmax(0,1fr))}
.taps-4 .taps{grid-template-columns:repeat(4,minmax(0,1fr))}
.taps-7 .taps{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.tap{position:relative;display:block;min-width:0}
.tap input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tap span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;height:100%;padding:8px 10px;border-radius:14px;
  background:#fff;border:2px solid var(--line);color:var(--ink);font-weight:700;font-size:15px;line-height:1.2;transition:background .15s ease,border-color .15s ease,color .15s ease}
.tap:hover span{border-color:#B9C3D3}
.tap input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff}
.tap input:focus-visible + span{outline:3px solid var(--blue);outline-offset:3px}
.taps-7 .tap span{padding:8px 0;font-size:17px}
.paybox .inp{font-size:28px;font-weight:800;letter-spacing:-.02em;min-height:64px;padding-left:40px}
.paybox span{font-size:24px;left:18px}
.slide{width:100%;min-height:44px;margin:0;accent-color:var(--blue);cursor:pointer}
.tq-other{margin-top:2px}
.assume{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:18px}
.assume-h{font-weight:700;font-size:17px}
.assume-p{font-size:14px;color:var(--muted);margin-top:-6px}
.as{background:#fff;border:1px solid var(--line);border-radius:14px}
.as[hidden]{display:none}
.as summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 14px;font-size:15px;line-height:1.35}
.as summary::-webkit-details-marker{display:none}
.as-t{font-weight:600}
.as-go{flex:none;display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--blue);font-size:14px}
.as-go:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.as[open] .as-go:after{transform:translateY(1px) rotate(-135deg)}
.as[open] summary{border-bottom:1px solid var(--line)}
.as-in{padding:14px;display:grid;gap:12px}
.as-in .tq-h{font-size:15px}
.as-in .tap span{min-height:48px;font-size:14px;background:var(--grey)}
.as-in .tap input:checked + span{background:var(--blue)}
.as-in .spg-weeks label{min-height:0}
.stepper{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:center}
.st-b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;padding:0}
.st-b:hover{background:var(--blue-tint)}
.stepper .inp{text-align:center;min-height:48px;padding:10px 12px}
.stepper .hhc-box.has-unit .inp{padding-right:64px;padding-left:12px}
.stepf label{font-size:15px;margin-bottom:6px}
.hhc-steps{display:grid;gap:14px}
.spg-typical{font-size:14px;line-height:1.5;color:#EEF3FF;background:rgba(255,255,255,.12);border-radius:12px;padding:10px 14px}
.spg-typical[hidden]{display:none}
.spg-typical a{color:#fff;font-weight:700}
.spg-means{font-size:16px;line-height:1.5;font-weight:600}
.tnext{border-top:1px solid rgba(255,255,255,.25);padding-top:16px}
.tnext ul{display:grid;gap:8px;margin-top:8px;counter-reset:n}
.tnext li{position:relative;padding-left:34px;font-size:15px;line-height:1.45;counter-increment:n}
.tnext li:before{content:counter(n);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--blue);font-weight:800;font-size:13px;display:grid;place-items:center}
.tnext a{color:#fff;font-weight:700}
@media (max-width:379px){ .taps-3 .tap span{font-size:14px;padding:8px 6px} }
@media (max-width:479px){ .taps-7 .taps{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} }
.pound:before{content:"\00A3"}
/* Short result under the last up-front question (Paul, 12 Nov 2026, instead of a phone result bar): one calm line with the
   figure and a link to the full breakdown. */
.qres{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 16px;background:var(--blue-tint);border-radius:14px;padding:6px 16px;margin-top:6px}
.qres[hidden]{display:none}
.qres-line{font-size:16px;line-height:1.35;font-weight:600;padding:4px 0 0}
.qres-line b{font-size:20px;font-weight:800;color:var(--blue);letter-spacing:-.01em;white-space:nowrap}
.qres-k{color:var(--muted);font-weight:600}
.qres-go{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:700;color:var(--blue)}