/* ============================================================
   Kasko Osiguranja — one stylesheet, no framework, no build step.
   Mobile first. Both themes defined token-level so the un-stamped
   "system" state resolves as a complete set.
   ============================================================ */

:root{
  /* light */
  --paper:#F4F6F5; --surface:#FFFFFF; --sunk:#ECF0EE; --raised:#FFFFFF;
  --ink:#08191F; --body:#2E4249; --muted:#566A70; --rule:#D9E1DE;
  --deep:#061920; --deep2:#0C2A32;
  --mint:#00966F; --mint-ink:#00694E; --mint-soft:#DEF2EB;
  --amber:#95590D; --amber-soft:#FBEEDC;
  --coral:#A93A2A; --coral-soft:#F9E5E1;
  --shadow:0 1px 2px rgba(8,25,31,.05), 0 8px 24px -12px rgba(8,25,31,.14);
  --shadow-lg:0 24px 60px -24px rgba(8,25,31,.30);

  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --f-disp:"Segoe UI Semibold","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --r:10px; --r-sm:6px; --r-lg:16px;
  --s1:.35rem; --s2:.65rem; --s3:1rem; --s4:1.5rem; --s5:2.25rem; --s6:3.5rem; --s7:5rem;
  --wrap:1160px; --measure:68ch;
  --hdr-h:60px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#061920; --surface:#0D272E; --sunk:#0A2027; --raised:#123039;
    --ink:#E9F1EF; --body:#B3C7C6; --muted:#90A9AE; --rule:#17383F;
    --mint:#2FD8AC; --mint-ink:#6BF0C9; --mint-soft:#0C2E2A;
    --amber:#EFA23F; --amber-soft:#2C2214;
    --coral:#F0755E; --coral-soft:#2C1A17;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#061920; --surface:#0D272E; --sunk:#0A2027; --raised:#123039;
  --ink:#E9F1EF; --body:#B3C7C6; --muted:#90A9AE; --rule:#17383F;
  --mint:#2FD8AC; --mint-ink:#6BF0C9; --mint-soft:#0C2E2A;
  --amber:#EFA23F; --amber-soft:#2C2214;
  --coral:#F0755E; --coral-soft:#2C1A17;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--f-sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-disp);color:var(--ink);margin:0;line-height:1.15;text-wrap:balance;font-weight:700}
h1{font-size:clamp(1.85rem,5.2vw,3.15rem);letter-spacing:-.03em}
h2{font-size:clamp(1.4rem,3.4vw,2.05rem);letter-spacing:-.022em}
h3{font-size:clamp(1.08rem,2vw,1.28rem);letter-spacing:-.012em}
h4{font-size:1rem;letter-spacing:-.006em}
p,ul,ol{margin:0}
img,svg{max-width:100%;height:auto}
a{color:var(--mint-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--mint)}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}
strong,b{color:var(--ink);font-weight:600}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s3)}
@media(min-width:640px){.wrap{padding-inline:var(--s4)}}
.skip{position:absolute;left:-9999px;top:0;background:var(--mint);color:#04231C;padding:.7rem 1rem;z-index:100;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}

/* ───────── header ───────── */
.hdr{position:sticky;top:0;z-index:50;background:var(--deep);color:#DCEAE8;border-bottom:1px solid rgba(255,255,255,.09)}
.hdr-in{display:flex;align-items:center;gap:var(--s3);min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;flex:0 0 auto}
.brand .logo{color:#fff;flex:0 0 auto}
.brand-txt{display:flex;flex-direction:column;line-height:1;font-family:var(--f-disp)}
.brand-txt b{font-size:1.08rem;font-weight:800;letter-spacing:-.035em;color:#fff}
.brand-txt i{font-style:normal;color:var(--mint)}
.brand-txt u{text-decoration:none;font-family:var(--f-mono);font-size:.53rem;letter-spacing:.2em;color:#6F9391;margin-top:.22em}
.burger{margin-left:auto;width:42px;height:42px;display:grid;place-content:center;gap:5px;background:none;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);cursor:pointer;padding:0}
.burger span{display:block;width:19px;height:2px;background:#DCEAE8;border-radius:2px;transition:transform .22s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--deep2);border-bottom:1px solid rgba(255,255,255,.09);flex-direction:column;padding:var(--s2) var(--s3) var(--s3);box-shadow:var(--shadow-lg)}
.nav.open{display:flex}
.nav a{color:#CFE2E0;text-decoration:none;padding:.72rem .2rem;border-bottom:1px solid rgba(255,255,255,.07);font-weight:500}
.nav a:last-child{border-bottom:none}
.nav-cta{margin-top:var(--s2);background:var(--mint);color:#001A13!important;text-align:center;border-radius:var(--r-sm);font-weight:700;padding:.8rem 1rem!important;border:none!important}
@media(min-width:900px){
  .burger{display:none}
  .nav{display:flex;position:static;flex-direction:row;align-items:center;gap:var(--s4);
       margin-left:auto;padding:0;background:none;border:none;box-shadow:none}
  .nav a{border:none;padding:.4rem 0;font-size:.93rem}
  .nav-cta{margin:0;padding:.55rem 1.05rem!important;font-size:.9rem}
}

/* ───────── hero ───────── */
.hero{position:relative;background:var(--deep);color:#D6E7E5;overflow:hidden;isolation:isolate}
/* contain tells the browser this decorative box can never affect layout
   outside itself. It is cheap insurance, not the fix for anything: the
   homepage's layout shift turned out to be the quote panel growing 120px when
   the script filled in the insurer bars, and the aurora was only ever the
   element Chrome NAMED because it fills the hero. Worth knowing if this is
   ever revisited: `size` must NOT be added to this list — it makes the box
   size as though it had no contents and measured worse. */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  contain:layout paint}
.aur{contain:layout paint}
#bg-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
/* Aurora: three soft, slow-drifting fields. Blur is expensive, so they are
   few, large and animated on transform only — never on width or filter. */
.aur{position:absolute;border-radius:50%;filter:blur(72px);opacity:.78;will-change:transform}
.aur1{width:48vw;height:48vw;min-width:360px;min-height:360px;left:-10%;top:-20%;
  background:radial-gradient(circle,rgba(0,224,174,.52),transparent 70%)}
.aur2{width:42vw;height:42vw;min-width:320px;min-height:320px;right:-8%;top:0;
  background:radial-gradient(circle,rgba(0,168,255,.32),transparent 70%)}
.aur3{width:38vw;height:38vw;min-width:280px;min-height:280px;left:34%;bottom:-26%;
  background:radial-gradient(circle,rgba(0,224,174,.34),transparent 70%)}
.aur4{width:30vw;height:30vw;min-width:240px;min-height:240px;right:16%;bottom:-18%;
  background:radial-gradient(circle,rgba(120,255,214,.22),transparent 70%)}
.js-on .aur1{animation:drift1 26s ease-in-out infinite alternate}
.js-on .aur2{animation:drift2 32s ease-in-out infinite alternate}
.js-on .aur3{animation:drift3 38s ease-in-out infinite alternate}
.js-on .aur4{animation:drift4 44s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14%,16%,0) scale(1.22)}}
@keyframes drift2{to{transform:translate3d(-15%,12%,0) scale(1.16)}}
@keyframes drift3{to{transform:translate3d(11%,-17%,0) scale(1.26)}}
@keyframes drift4{to{transform:translate3d(-12%,-9%,0) scale(1.20)}}
#bg-canvas{opacity:.75}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 95% at 82% 20%,rgba(0,224,174,.10),transparent 64%)}

/* Entrance: a short staggered rise. Fires once, and the finished state is the
   default — nothing on this page is invisible until it animates. */
.rise{opacity:1;transform:none}
.js-on .rise{opacity:0;transform:translateY(14px);
  animation:rise .62s cubic-bezier(.22,1,.36,1) var(--d,0ms) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.hero .wrap{position:relative;z-index:2;padding-block:var(--s5) var(--s5)}
/* Mobile order is headline → live demo → call to action. The panel IS the
   argument, so it must not sit a screen and a half below the fold; DOM order
   still puts the h1 first for crawlers. */
.hero-grid{display:grid;gap:var(--s4)}
.hero-lead{order:1}
.qp{order:2}
.hero-cta{order:3}
@media(min-width:960px){
  .hero .wrap{padding-block:var(--s6) var(--s6)}
  /* auto rows + centred content keeps the copy block continuous; letting the
     rows stretch to the panel's height opens a dead gap under the paragraph. */
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:0 var(--s6);
    grid-template-areas:"lead panel" "cta panel";
    grid-template-rows:auto auto;align-content:center}
  .hero-lead{grid-area:lead;align-self:end}
  .hero-cta{grid-area:cta;align-self:start;margin-top:var(--s4)}
  .qp{grid-area:panel;align-self:center}
}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--mint-ink)}
.hero-sub{max-width:44ch;margin-top:var(--s3);font-size:1rem;color:#9FBAB8}
@media(min-width:640px){.hero-sub{font-size:1.05rem}}
.hero-trust{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  gap:var(--s3) var(--s4);margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.12)}
.hero-trust div{display:flex;flex-direction:column;min-width:0}
.hero-trust .k{font-family:var(--f-mono);font-size:1.05rem;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.hero-trust .v{font-size:.72rem;color:#7D9C9A;letter-spacing:.01em;line-height:1.3}
@media(min-width:640px){
  .hero-trust .k{font-size:1.15rem}
  .hero-trust .v{font-size:.76rem}
}
/* Two buttons side by side on a phone rather than two stacked full-width slabs */
.hero-cta .btns .btn{flex:1 1 auto;min-width:0;padding-inline:.9rem;font-size:.9rem}
@media(min-width:420px){.hero-cta .btns .btn{padding-inline:1.3rem;font-size:.95rem}}

/* quote panel */
.qp{background:rgba(9,38,45,.86);border:1px solid rgba(47,216,172,.24);border-radius:var(--r-lg);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);box-shadow:var(--shadow-lg)}
@supports (backdrop-filter:blur(8px)){.qp{backdrop-filter:blur(10px)}}
.qp-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
.qp-gauge{display:flex;align-items:center;gap:var(--s4)}
.gauge{flex:0 0 auto}
/* 270° instrument arc. r=36 → circumference 226.2; the visible arc is 75% of
   that (169.6). The fill sweeps from empty to 63% of the arc. */
.gauge .tr{stroke:rgba(255,255,255,.16)}
.gauge .fl{stroke:var(--mint-ink);stroke-dashoffset:169.6;
  filter:drop-shadow(0 0 6px rgba(0,224,174,.45))}
.js-on .gauge .fl{animation:sweep 1.5s cubic-bezier(.22,1,.36,1) .2s forwards}
@keyframes sweep{to{stroke-dashoffset:62.8}}
.prem{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.prem .n{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.9rem,7vw,2.9rem);color:#fff;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.prem .n small{font-size:.38em;font-weight:600;color:var(--mint-ink);margin-left:.3em;letter-spacing:0}
.prem .c{font-family:var(--f-mono);font-size:.7rem;color:#7D9C9A}
.qp-rows{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.1)}
.qp-row{display:flex;justify-content:space-between;gap:var(--s2);padding:.5rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:.86rem}
.qp-row:last-child{border-bottom:none}
.qp-row span:first-child{color:#8FADAB}
.qp-row span:last-child{font-family:var(--f-mono);color:#DCEAE8;font-variant-numeric:tabular-nums;text-align:right}

/* ───────── buttons ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--f-sans);font-weight:600;font-size:.95rem;line-height:1;
  padding:.85rem 1.3rem;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .14s,box-shadow .14s,background .14s;
  min-height:44px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-p{background:var(--mint);color:#001A13}
.btn-p:hover{color:#001A13;box-shadow:0 8px 20px -8px rgba(0,150,111,.6)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-d{background:transparent;color:#CFE2E0;border-color:rgba(255,255,255,.22)}
.btn-d:hover{color:#fff;background:rgba(255,255,255,.06)}
.btn-lg{padding:1rem 1.6rem;font-size:1rem}
.btn-full{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ───────── sections & cards ───────── */
.sec{padding-block:var(--s6)}
.sec-sunk{background:var(--sunk)}
.sec-head{max-width:var(--measure);margin-bottom:var(--s4)}
.sec-head p{margin-top:var(--s2);color:var(--muted)}
/* A 68ch head is right for body copy but squeezes a long H1 into three lines
   on a wide screen with nothing beside it (screenshot, 1920px). The calculator's
   heading gets the width of the form column instead; text-wrap:balance on h1
   then splits it into two even lines rather than a long one and a stub. */
.sec-head-wide{max-width:52rem}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mint-ink);display:block;margin-bottom:var(--s2)}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s4);box-shadow:var(--shadow)}
.grid{display:grid;gap:var(--s3)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:640px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}}
/* ───────── article layout (guide pages) ─────────
   These pages used to be one 68ch column inside a 1160px wrap: on a laptop the
   text used about 40% of the screen and the rest was empty, which is what made
   them read as "very narrow". Now the article gets a real second column — a
   table of contents built from its own h2s, a calculator call to action, and
   the side banner slot — and the text column itself is allowed to let wide
   blocks break out (see .prose below). Below 1000px the aside simply falls
   underneath, so nothing is hidden on a phone and the source order still puts
   the article first. */
.artl{display:grid;gap:var(--s4)}
/* With the rail present the text column is ~760px; stopping text at 68ch left
   a ~150px dead strip between the text and the sidebar. Inside a railed
   article the text fills its own column; wide blocks already did. */
@media(min-width:1000px){
  .artl:not(.artl-solo) .prose{grid-template-columns:minmax(0,1fr)}
  .artl:not(.artl-solo) .artl-head{max-width:none}
}
/* On a phone the rail dissolves (display:contents) and its children become grid
   items of .artl, so `order` can interleave them with the article: intro, then
   the contents list, then the text, then the call to action. A contents list
   parked below the footer link on a phone is decoration, not navigation. */
.artl-rail{display:contents}
.artl-head{order:1;max-width:var(--measure)}
.artl .toc{order:2}
.artl .prose{order:3}
.artl .side-cta{order:4}
.artl .rail-ad{order:5}
@media(min-width:1000px){
  .artl{grid-template-columns:minmax(0,1fr) 296px;column-gap:var(--s6);row-gap:var(--s4);
        align-items:start}
  .artl-solo{grid-template-columns:minmax(0,1fr)}
  .artl-head{grid-column:1;grid-row:1}
  .artl .prose{grid-column:1;grid-row:2}
  .artl-rail{display:flex;flex-direction:column;gap:var(--s4);min-width:0;
             grid-column:2;grid-row:1/span 2;
             position:sticky;top:calc(var(--hdr-h) + var(--s3))}
}

.toc{border-left:2px solid var(--rule);padding-left:var(--s3)}
.toc-h{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
       color:var(--muted);margin:0 0 var(--s2)}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:block;padding:.4rem .35rem;font-size:.88rem;line-height:1.35;color:var(--body);
       text-decoration:none;border-radius:var(--r-sm)}
.toc a::before{content:counter(toc) ". ";color:var(--muted);font-family:var(--f-mono);font-size:.78em}
.toc a:hover,.toc a:focus-visible{background:var(--sunk);color:var(--ink)}

.side-cta{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
          padding:var(--s4);box-shadow:var(--shadow)}
.side-cta-h{font-family:var(--f-disp);font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.3}
.side-cta-p{margin-top:var(--s2);font-size:.86rem;color:var(--muted);line-height:1.5}
.side-cta .btn{margin-top:var(--s3)}
.side-cta-n{margin-top:var(--s2);font-size:.74rem;color:var(--muted);text-align:center}

.prose{max-width:var(--measure)}
/* Prose keeps a 68ch measure for TEXT — that is what makes long copy readable.
   But a two-column card grid or a comparison table squeezed into 68ch inside a
   1160px wrap is what made the guide pages look "very narrow": the article used
   about 40% of the screen and the rest was empty. So .prose becomes a two-track
   grid: text sits in a measure-wide first track, and blocks that are meant to be
   wide (.grid, .scroll, .spread, .wide) span both tracks. Left edge stays flush
   with the breadcrumb and the header, as before. Every child spacing rule below
   is margin-top only, so switching from block to grid changes no vertical rhythm
   (there are no bottom margins left to collapse). */
@media(min-width:900px){
  .prose{max-width:none;display:grid;
         grid-template-columns:min(var(--measure),100%) minmax(0,1fr)}
  .prose>*{grid-column:1;min-width:0}
  .prose>.grid,.prose>.scroll,.prose>.spread,.prose>.wide{grid-column:1/-1}
}
.prose h2{margin-top:var(--s5);scroll-margin-top:calc(var(--hdr-h) + var(--s3))}
.fig{margin:0}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.fig figcaption{margin-top:var(--s2);font-size:.82rem;color:var(--muted)}
@media(min-width:900px){.prose>.fig{grid-column:1/-1}}
.prose h3{margin-top:var(--s4)}
.prose p+p,.prose ul,.prose ol,.prose .card,.prose .note{margin-top:var(--s3)}
.prose ul,.prose ol{padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem}
.prose li::marker{color:var(--mint)}
.note{border-left:3px solid var(--mint);background:var(--mint-soft);padding:var(--s3) var(--s4);border-radius:0 var(--r-sm) var(--r-sm) 0}
.note-a{border-left-color:var(--amber);background:var(--amber-soft)}
.note-c{border-left-color:var(--coral);background:var(--coral-soft)}
.note h4{margin-bottom:var(--s1)}
/* Stand-alone notes on full-width pages (lists, ranking, result, vehicle,
   calculator) used to carry max-width:68ch and sat on the left with half the
   screen empty beside them — the "blank space on the right" in the owner's
   screenshots. On a wide screen they now span the row and split into two
   columns: the heading on the left, the text on the right. Text keeps a
   readable line length; the box no longer leaves a hole in the layout. */
@media(min-width:900px){
  .note-wide{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);column-gap:var(--s5);align-items:start}
  .note-wide>.note-h{grid-column:1;grid-row:1/span 6;margin:0}
  .note-wide>:not(.note-h){grid-column:2;min-width:0}
  .note-wide>:not(.note-h):first-of-type,.note-wide>.note-h+*{margin-top:0!important}
}
/* Same idea for a whole section of prose (stats methodology). */
@media(min-width:900px){
  .split-sec{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);column-gap:var(--s5);align-items:start}
  .split-sec>h2{grid-column:1}
  .split-sec>.prose{grid-column:2;max-width:none;display:block}
}

/* chips */
.chip{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.2rem .5rem;border-radius:var(--r-sm);
  border:1px solid;white-space:nowrap;font-weight:500}
.chip-m{background:var(--mint-soft);color:var(--mint-ink);border-color:var(--mint)}
.chip-a{background:var(--amber-soft);color:var(--amber);border-color:var(--amber)}
.chip-c{background:var(--coral-soft);color:var(--coral);border-color:var(--coral)}
.chip-n{background:var(--sunk);color:var(--muted);border-color:var(--rule)}

/* tables */
.scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:560px}
th,td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--rule);vertical-align:middle}
thead th{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--sunk);white-space:nowrap;font-weight:500}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}

/* ───────── footer — dense by design, no dead space ───────── */
.ftr{background:var(--deep);color:#93AEAC;margin-top:var(--s6)}
.ftr-in{display:grid;gap:var(--s4);padding-block:var(--s5) var(--s4)}
@media(min-width:760px){.ftr-in{grid-template-columns:minmax(210px,1fr) 2.1fr;gap:var(--s5)}}
.ftr-brand p{margin-top:var(--s2);font-size:.86rem;max-width:34ch;color:#7D9C9A}
.brand-sm .logo{width:26px;height:26px}
.ftr-co{margin-top:var(--s3);font-style:normal;font-size:.84rem;line-height:1.6;color:#93AEAC}
.ftr-co b{color:#CFE0DE;font-weight:600}
.ftr-co a{color:#B7CECC;text-decoration:none;display:inline-block;min-height:24px;line-height:24px}
.ftr-co a:hover{color:var(--mint-ink)}
.ftr-trust{max-width:520px}
.ftr-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3)}
@media(min-width:560px){.ftr-nav{grid-template-columns:repeat(3,1fr)}}
.ftr-nav h2{font-size:.7rem;font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#86A8AA;margin-bottom:.55rem;font-weight:500}
.ftr-nav .ftr-h2b{margin-top:var(--s3)}
.ftr-nav a{display:block;color:#B7CECC;text-decoration:none;font-size:.87rem;padding:.2rem 0}
.ftr-nav a:hover{color:var(--mint-ink)}
.ftr-legal{border-top:1px solid rgba(255,255,255,.09);padding-block:var(--s3);
  display:flex;flex-direction:column;gap:var(--s2)}
.disclaimer{font-size:.74rem;line-height:1.55;color:#6C8A8B;max-width:92ch}
.ftr-bot{display:flex;flex-wrap:wrap;gap:.4rem .6rem;font-size:.76rem;color:#6C8A8B;align-items:center}
.ftr-bot a{color:#8FADAB;text-decoration:none}
.ftr-bot a:hover{color:var(--mint-ink)}
.ftr-bot .sep{opacity:.4}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .gauge .fl{stroke-dashoffset:62.8!important}
}

/* ───────── calculator ───────── */
.calc{display:grid;gap:var(--s4)}
@media(min-width:1000px){.calc{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s5);align-items:start}}
.steps-bar{display:flex;gap:.4rem;margin-bottom:var(--s4)}
.steps-bar i{flex:1;height:4px;border-radius:2px;background:var(--rule);transition:background .3s}
.steps-bar i.on{background:var(--mint)}
.step{display:none}
.step.on{display:block;animation:stepin .24s ease-out}
@keyframes stepin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step-h{margin-bottom:var(--s3)}
.step-h .eyebrow{margin-bottom:.3rem}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:var(--s3)}
.field>label,.field>span.lab{font-weight:600;color:var(--ink);font-size:.92rem}
.field .hint{font-size:.8rem;color:var(--muted)}
select,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date]{
  width:100%;font:inherit;font-size:16px; /* 16px stops iOS zooming on focus */
  padding:.72rem .85rem;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);min-height:46px;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2361767C' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:12px;padding-right:2.4rem}
select:disabled{opacity:.55}
.row2{display:grid;gap:var(--s3)}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .9rem;border:1px solid var(--rule);
  border-radius:var(--r-sm);background:var(--surface);font-size:.9rem;cursor:pointer;min-height:44px;
  transition:border-color .15s,background .15s}
.opt input:checked+span{border-color:var(--mint);background:var(--mint-soft);color:var(--ink);font-weight:600}
.opt input:focus-visible+span{outline:2px solid var(--mint);outline-offset:2px}
.opt .d{font-family:var(--f-mono);font-size:.78rem;color:var(--mint-ink)}
.checks{display:flex;flex-direction:column;gap:.5rem}
.check{display:flex;gap:.65rem;align-items:flex-start;padding:.7rem .85rem;border:1px solid var(--rule);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer;transition:border-color .15s}
.check:has(input:checked){border-color:var(--mint);background:var(--mint-soft)}
.check input{margin:.25rem 0 0;width:18px;height:18px;accent-color:var(--mint);flex:0 0 auto}
.check b{display:block;font-size:.91rem}
.check .d{font-size:.78rem;color:var(--muted)}
.check .sv{margin-left:auto;font-family:var(--f-mono);font-size:.8rem;color:var(--mint-ink);white-space:nowrap}
.step-nav{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}
.step-nav .btn{flex:1 1 auto}

/* live sidebar */
.live{position:sticky;top:calc(var(--hdr-h) + var(--s3));background:var(--deep);color:#D6E7E5;
  border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow-lg)}
.live h2{color:#fff;font-size:.78rem;font-family:var(--f-mono);letter-spacing:.13em;
  text-transform:uppercase;color:#7D9C9A;font-weight:500}
.live .big{font-family:var(--f-disp);font-weight:800;font-size:2.3rem;color:#fff;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:.5rem 0 .15rem}
.live /* Always on the dark panel, in both themes — so this one is pinned rather
   than themed. var(--mint-ink) is #00694E in light mode and gave 2,68:1. */
.rng{font-family:var(--f-mono);font-size:.82rem;color:#2FD8AC}
.live .meta{font-size:.78rem;color:#7D9C9A;margin-top:.5rem}
.live .bd{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.11);
  display:flex;flex-direction:column;gap:.35rem;font-size:.82rem}
.live .bd div{display:flex;justify-content:space-between;gap:var(--s2)}
.live .bd span:first-child{color:#8FADAB}
.live .bd span:last-child{font-family:var(--f-mono);text-align:right}
@media(max-width:999px){
  .live{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:var(--s3);z-index:40;box-shadow:0 -12px 40px -16px rgba(0,0,0,.55)}
  .live .big{font-size:1.6rem;margin:.2rem 0 0}
  .live .bd{display:none}
  .live-pad{height:118px}
}
@media(min-width:1000px){.live-pad{display:none}}

/* ───────── results ───────── */
.res-head{background:var(--deep);color:#D6E7E5;padding-block:var(--s5)}
.res-head h1{color:#fff;font-size:clamp(1.5rem,4vw,2.3rem)}
.res-sum{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.13)}
.res-sum div{display:flex;flex-direction:column}
.res-sum .k{font-family:var(--f-mono);font-size:1.4rem;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.res-sum .v{font-size:.76rem;color:#7D9C9A}
.offers{display:flex;flex-direction:column;gap:var(--s2)}
.offer{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s3);align-items:center;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s3) var(--s4);
  transition:border-color .15s,transform .15s,box-shadow .15s}
.offer:hover{border-color:var(--mint);transform:translateY(-2px);box-shadow:var(--shadow)}
.offer-sp{border-color:var(--amber);background:linear-gradient(0deg,var(--amber-soft),var(--amber-soft)),var(--surface)}
.offer-nm{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.offer-nm b{font-size:1rem;color:var(--ink)}
.offer-meta{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.offer-px{text-align:right;display:flex;flex-direction:column;gap:.1rem}
.offer-px .p{font-family:var(--f-disp);font-weight:800;font-size:1.35rem;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
.offer-px .u{font-size:.72rem;color:var(--muted)}
.offer-act{grid-column:1/-1;display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;
  padding-top:var(--s2);border-top:1px solid var(--rule)}
.offer-act .why{font-size:.78rem;color:var(--muted);flex:1 1 220px}
@media(min-width:700px){
  .offer{grid-template-columns:1fr auto auto}
  .offer-act{grid-column:auto;border:none;padding:0}
  .offer-act .why{display:none}
}
.rank-n{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);width:1.8rem;flex:0 0 auto}

/* lead form */
.lead{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s4);box-shadow:var(--shadow);margin-top:var(--s4)}
.lead-tabs{display:flex;gap:.4rem;margin-bottom:var(--s3);flex-wrap:wrap}
.lead-tab{flex:1 1 180px;padding:.7rem;border:1px solid var(--rule);background:var(--sunk);
  border-radius:var(--r-sm);cursor:pointer;font:inherit;font-size:.88rem;color:var(--body);text-align:center;min-height:44px}
.lead-tab[aria-selected="true"]{background:var(--mint-soft);border-color:var(--mint);color:var(--ink);font-weight:600}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.lead-opt{display:inline-block;vertical-align:middle;margin-left:.4rem;padding:.15rem .5rem;border-radius:99px;
  background:var(--sunk);border:1px solid var(--rule);font-size:.7rem;font-family:var(--f-mono);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.qf{margin-top:var(--s3)}
.qf-set{border:0;padding:0;margin:0 0 var(--s3);min-width:0;display:grid;gap:var(--s3)}
.qf-set legend{font-weight:600;font-size:.95rem;margin-bottom:var(--s2);padding:0}
.qf-co{margin-top:var(--s2);font-size:.78rem;color:var(--muted);text-align:center}
.qf-co a{display:inline-block;min-height:24px;line-height:24px}
.co-card{display:grid;gap:.55rem;margin:0}
.co-card>div{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem}
.co-card dt{font-size:.78rem;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
.co-card dd{margin:0}
@media(max-width:420px){.co-card>div{grid-template-columns:1fr;gap:.1rem}}
.byline{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule);font-size:.82rem;color:var(--muted)}
.byline b{color:var(--ink);font-weight:600}
.qcta{margin-top:var(--s3);padding:var(--s3);border:1px dashed var(--rule);border-radius:var(--r);font-size:.88rem}
.qcta a{font-weight:600}
.flash{padding:var(--s3) var(--s4);border-radius:var(--r-sm);margin-bottom:var(--s3);font-size:.92rem}
.flash-ok{background:var(--mint-soft);border:1px solid var(--mint);color:var(--ink)}
.flash-no{background:var(--coral-soft);border:1px solid var(--coral);color:var(--ink)}

/* insurer cards */
.ins-grid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:640px){.ins-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.ins-grid{grid-template-columns:repeat(3,1fr)}}
.ins-card{display:flex;flex-direction:column;gap:var(--s2);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);padding:var(--s3) var(--s4);box-shadow:var(--shadow)}
.ins-card h3{font-size:1.02rem}
.ins-card .sc{font-family:var(--f-mono);font-size:1.5rem;color:var(--mint-ink);font-weight:600}
.ins-card ul{padding-left:1.05rem;display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;margin:0}
.ins-card .foot{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s2);font-size:.82rem}
.bars{display:flex;flex-direction:column;gap:.4rem}
.bar{display:grid;grid-template-columns:8.5rem 1fr 2.6rem;gap:.6rem;align-items:center;font-size:.84rem}
.bar .t{color:var(--body)}
.bar .r{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.bar .r i{display:block;height:100%;background:var(--mint);border-radius:4px}
.bar .n{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);text-align:right}
@media(max-width:520px){.bar{grid-template-columns:1fr 2.6rem;grid-template-areas:"t n" "r r";gap:.2rem .6rem}
  .bar .t{grid-area:t}.bar .n{grid-area:n}.bar .r{grid-area:r;margin-top:.15rem}}


/* ───────── rotating showcase inside the quote panel ───────── */
.qp-dots{display:flex;gap:0;align-items:center;margin:-8px -4px}
/* The dot stays 7px visually, but the button itself is 24x24 so it can actually
   be hit with a thumb. WCAG 2.2 target-size (2.5.8) wants 24x24 minimum; the
   dots were failing at 7x7 and 9.8x9.8. Negative margin keeps the row compact
   so nothing about the design changes. */
.qp-dots button{width:24px;height:24px;padding:0;margin:0;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.qp-dots button::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--rule);transition:background .25s,transform .25s}
.qp-dots button[aria-selected="true"]::before{background:var(--mint-ink);transform:scale(1.4)}
.qp-dots button:focus-visible{outline:2px solid var(--mint);outline-offset:0;border-radius:50%}
.prem .c{transition:opacity .25s}
.prem .c.swap{opacity:0}
.qp-bars{display:flex;flex-direction:column;gap:.34rem;padding-top:var(--s2);
  border-top:1px solid rgba(255,255,255,.1)}
.qp-bar{display:grid;grid-template-columns:5.4rem 1fr auto;gap:.55rem;align-items:center;font-size:.76rem}
.qp-bar .nm{color:#8FADAB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qp-bar .tr2{height:6px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden}
.qp-bar .tr2 i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--mint),var(--mint-ink));
  transition:width .7s cubic-bezier(.22,1,.36,1)}
.qp-bar .px{font-family:var(--f-mono);color:#DCEAE8;font-variant-numeric:tabular-nums;font-size:.73rem}
.qp-bar.is-exact .nm{color:var(--mint-ink)}

/* ───────── insurer marquee ─────────
   An agent landing here looks for their own company first. This answers that
   in about a second, which no amount of animation elsewhere would. */
.marquee{position:relative;z-index:2;margin-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
  overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-in{display:flex;gap:0;width:max-content;padding-block:.85rem}
.js-on .marquee-in{animation:mq 46s linear infinite}
.marquee:hover .marquee-in,.marquee:focus-within .marquee-in{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{padding-inline:1.15rem;font-size:.83rem;color:#8FADAB;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.08);letter-spacing:.01em}
.marquee-note{position:relative;z-index:2;text-align:center;font-size:.78rem;color:#88A6A7;
  padding-block:.9rem var(--s4);margin:0}
.marquee-note a{color:#8FADAB}

/* ───────── how it works ───────── */
.step-card{position:relative;overflow:hidden}
.step-n{font-family:var(--f-mono);font-size:2.4rem;font-weight:600;line-height:1;
  color:var(--mint);opacity:.22;position:absolute;top:.7rem;right:1rem}

/* ───────── faq ───────── */
.faq{display:flex;flex-direction:column;gap:.5rem;max-width:var(--measure)}
.faq details{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:.9rem var(--s4)}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;
  display:flex;justify-content:space-between;gap:var(--s3);align-items:center;min-height:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:1.2rem;color:var(--mint);
  flex:0 0 auto;transition:transform .2s}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:.7rem;font-size:.93rem;color:var(--body)}

@media(prefers-reduced-motion:reduce){
  .js-on .rise{opacity:1!important;transform:none!important;animation:none!important}
  .js-on .aur1,.js-on .aur2,.js-on .aur3,.js-on .aur4,.js-on .marquee-in{animation:none!important}
  .sec-sunk::before{animation:none!important}
  .qp-bar .tr2 i{transition:none!important}
}

/* ───────── personalised awards ─────────
   Earned per visitor from their own answers, never purchasable. Each card
   carries its reason: an award without one is just an advert. */
.awards{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-bottom:var(--s5)}
@media(min-width:620px){.awards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.awards{grid-template-columns:repeat(3,1fr)}}
.award{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--mint);
  border-radius:var(--r);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:.3rem}
.aw-key{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mint-ink);font-weight:500}
.award h3{font-size:1.02rem}
.award h3 a{text-decoration:none;color:var(--ink)}
.award h3 a:hover{color:var(--mint-ink)}
.aw-px{font-family:var(--f-mono);font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums}
.award p{font-size:.85rem;color:var(--muted);line-height:1.5}

/* ───────── price spread ─────────
   One axis, every insurer a point. The whole market in a glance — and the
   single clearest argument the site can make, since the gap between cheapest
   and dearest is the reason to compare at all. */
.spread{margin:0 0 var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.spread figcaption{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.spread-box{position:relative;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:var(--s3) var(--s2) var(--s2)}
.spread svg{display:block;width:100%;height:auto;overflow:visible}
.sp-axis{stroke:var(--rule);stroke-width:1.5}
.sp-tick{stroke:var(--rule);stroke-width:1.5}
.sp-lab{fill:var(--muted);font-family:var(--f-mono);font-size:19px}
.sp-stem{stroke:var(--rule);stroke-width:1.5}
.sp-dot{fill:var(--surface);stroke:var(--mint);stroke-width:2.5;cursor:pointer;
  transition:transform .15s;transform-box:fill-box;transform-origin:center}
.sp-dot:hover,.sp-dot:focus-visible{transform:scale(1.3)}
.sp-dot.is-exact{fill:var(--mint);stroke:var(--mint-ink)}
.sp-dot.is-low{fill:var(--amber);stroke:var(--amber)}
.sp-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);
  font-size:.78rem;padding:.3rem .55rem;border-radius:var(--r-sm);white-space:nowrap;
  transform:translate(-50%,-130%);z-index:3;box-shadow:var(--shadow)}
.sp-key{display:flex;flex-wrap:wrap;gap:.4rem var(--s3);list-style:none;padding:0;margin:0;
  font-size:.78rem;color:var(--muted)}
.sp-key li{display:flex;align-items:center;gap:.35rem}
.sp-key i{width:10px;height:10px;border-radius:50%;border:2px solid var(--mint);background:var(--surface)}
.sp-key .k-exact{background:var(--mint)}
.sp-key .k-low{background:var(--amber);border-color:var(--amber)}
.sp-key .sp-span{margin-left:auto;color:var(--body)}
@media(max-width:620px){.sp-key .sp-span{margin-left:0;width:100%}}

/* ───────── scroll reveal ─────────
   Applied by script only after the observer is wired, so a page with JS off,
   or a crawler, always sees finished content. Nothing here is invisible until
   it animates. */
.js-on [data-reveal]{opacity:0;transform:translateY(16px)}
.js-on [data-reveal].shown{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.js-on [data-reveal].shown[style*="--rd"]{transition-delay:var(--rd)}
@media(prefers-reduced-motion:reduce){
  .js-on [data-reveal]{opacity:1!important;transform:none!important}
}

/* interior polish */
.sec-head h2{position:relative;padding-bottom:.55rem}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;
  border-radius:2px;background:var(--mint)}
.card{transition:transform .18s,box-shadow .18s,border-color .18s}
a.card:hover,.ins-card[href]:hover{transform:translateY(-3px);border-color:var(--mint);
  box-shadow:0 14px 30px -18px rgba(8,25,31,.34)}
.ins-card .sc{position:relative}
.offer{position:relative}
.offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:var(--r) 0 0 var(--r);
  background:transparent;transition:background .18s}
.offer:hover::before{background:var(--mint)}
.sp-note{font-size:.82rem;color:var(--body);background:var(--amber-soft);
  border-left:3px solid var(--amber);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:.7rem var(--s3);margin:0;line-height:1.55}

/* ---------- Statistika: server-rendered charts ---------------------------- */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3);margin-top:var(--s4)}
.stat{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s3) var(--s3) var(--s4);box-shadow:var(--shadow)}
.stat-v{display:block;font-family:var(--f-disp);font-size:clamp(1.5rem,3.6vw,2.1rem);line-height:1.1;color:var(--mint-ink);letter-spacing:-.02em}
.stat-l{display:block;margin-top:var(--s2);font-size:.86rem;color:var(--muted);line-height:1.45}

.sbars{display:grid;gap:.42rem}
.sbar{display:grid;grid-template-columns:minmax(88px,8.6rem) 1fr auto;align-items:center;gap:var(--s2)}
.sbar-l{font-size:.86rem;color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbar-t{background:var(--sunk);border-radius:99px;height:15px;overflow:hidden}
.sbar-f{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.sbar-mint{background:linear-gradient(90deg,var(--mint),var(--mint-ink))}
.sbar-amber{background:linear-gradient(90deg,var(--amber),#8a5209)}
.sbar-coral{background:linear-gradient(90deg,var(--coral),#8d2c1e)}
.sbar-v{font-family:var(--f-mono);font-size:.8rem;color:var(--ink);font-variant-numeric:tabular-nums;min-width:4.4rem;text-align:right}
.sbar-n{grid-column:2/-1;font-size:.76rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.sbar-f{transition:none}}

.chart{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s3);box-shadow:var(--shadow)}
.chart-cap{margin-top:var(--s2);font-size:.78rem;color:var(--muted)}
.hg-bar{fill:var(--mint);opacity:.82}
.hg-mark{fill:var(--amber)}
.hg-axis{stroke:var(--rule);stroke-width:1}
.hg-tick{fill:var(--muted);font-size:11px;font-family:var(--f-mono)}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:660px}
.tbl th,.tbl td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--rule)}
.tbl thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;background:var(--sunk);position:sticky;top:0}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.tbl .muted{color:var(--muted)}
.note-sm{margin-top:var(--s2);font-size:.8rem;color:var(--muted);line-height:1.5}
@media (max-width:640px){.sbar{grid-template-columns:minmax(72px,6.4rem) 1fr auto}.sbar-l{font-size:.8rem}.sbar-v{min-width:3.6rem;font-size:.74rem}}

/* ---------- Site-wide motion --------------------------------------------
   The hero was the only thing on the site that moved, so everything below
   the fold read as a different, flatter website. These are cheap: one
   transform-animated sheen per sunk section and a hairline that travels
   under the header. Both stop under prefers-reduced-motion.              */
.sec-sunk{position:relative;overflow:hidden;isolation:isolate}
.sec-sunk::before{content:"";position:absolute;z-index:-1;inset:-40% -20%;
  background:
    radial-gradient(38% 46% at 18% 22%,rgba(0,150,111,.11),transparent 62%),
    radial-gradient(34% 40% at 82% 72%,rgba(0,168,255,.09),transparent 62%);
  will-change:transform;animation:sunkdrift 34s ease-in-out infinite alternate}
@keyframes sunkdrift{to{transform:translate3d(4%,-5%,0) scale(1.12)}}
@media(prefers-color-scheme:dark){
  .sec-sunk::before{background:
    radial-gradient(38% 46% at 18% 22%,rgba(47,216,172,.13),transparent 62%),
    radial-gradient(34% 40% at 82% 72%,rgba(0,168,255,.10),transparent 62%)}
}

/* A live hairline under the sticky header: the site is doing something. */
.hdr{position:relative}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--mint) 18%,rgba(120,255,214,.95) 50%,var(--mint) 82%,transparent);
  background-size:220% 100%;opacity:.55;
  animation:hairline 9s linear infinite}
@keyframes hairline{from{background-position:140% 0}to{background-position:-140% 0}}

/* Stat cards lift a little on the statistics page so the strip isn't inert. */
.stat{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat-v{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .hdr::after{animation:none}
  .sec-sunk::before{animation:none}
  .stat{transition:none}
}

/* ---------- Ad slots ------------------------------------------------------
   Paid placement has to look paid. The label is never hidden, never styled
   to blend into a result row, and the slot never sits inside a calculator
   step. An ad that reads as a recommendation destroys the one thing this
   site sells.                                                             */
.adslot{display:block;margin:var(--s4) 0;padding:var(--s3);border:1px solid var(--rule);
  border-radius:var(--r);background:var(--surface);position:relative}
.ad-tag{display:inline-block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);background:var(--amber-soft);
  border-radius:99px;padding:.16rem .5rem;margin-bottom:var(--s2)}
.ad-adv{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.15rem}
.ad-head{display:block;font-family:var(--f-disp);font-size:1.05rem;color:var(--ink);line-height:1.3}
.ad-body{margin:.35rem 0 var(--s3);font-size:.9rem;color:var(--body);max-width:60ch}
.ad-cta{display:inline-block}
.ad-note{display:block;margin-top:var(--s2);font-size:.72rem;color:var(--muted)}
.ad-banner{display:block;line-height:0}
.ad-banner img{max-width:100%;height:auto;border-radius:var(--r-sm)}

/* Fixed boxes so a banner never shifts the page while it loads (CLS 0). */
.adslot-vodic-leaderboard .ad-banner{min-height:120px}
.adslot-bocni-banner .ad-banner{min-height:250px}
@media(max-width:700px){
  .adslot-vodic-leaderboard .ad-banner{min-height:100px}
}
.adslot-naslovna-partneri,.adslot-kalkulator-sponzor{background:var(--sunk)}

/* ---------- Accessibility ------------------------------------------------- */
/* Callout headings were <h4> straight after an <h2>, which skips a level and
   breaks the document outline a screen reader reads out. They are <h3> now;
   this keeps the visual size they had. */
.note-h{font-size:1rem;font-family:var(--f-disp);margin:0 0 .4rem;line-height:1.35}

/* Visible only to assistive technology.
   It is position:absolute, so without a positioned ancestor it lands at its
   static position — which, inside a horizontally scrolled table, is hundreds
   of pixels past the viewport. That stretched the DOCUMENT to 510px on a
   320px screen even though the table itself was scrolling correctly. The
   containing block below is what keeps it in. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
th,td{position:relative}

/* Horizontally scrollable tables are keyboard-reachable, so they need a focus
   ring like any other focusable thing. */
.table-scroll:focus-visible,.scroll:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* Card headings are h2 (they sit directly under the page h1); this keeps the
   size they had as h3 so nothing about the design changes. */
.card-h{font-size:1.05rem;font-family:var(--f-disp);margin:0;line-height:1.3}

/* ---------- Always-dark regions ------------------------------------------
   .hero, .live (calculator sidebar), .res-head, .hdr and .ftr paint --deep in
   BOTH themes. Any child of theirs that used a theme token got the LIGHT value
   on a dark background: --mint-ink gave 2,68:1 on the eyebrow and --muted gave
   3,16:1 on form hints. Re-point the two tokens once for the whole scope
   rather than patching each element as axe finds it.                        */
.hero,.live,.res-head,.hdr,.ftr{--mint-ink:#6BF0C9;--muted:#9DB6BB}

/* ---------- Grid/flex children must be allowed to shrink -------------------
   A grid or flex item defaults to min-width:auto, which means it refuses to
   become narrower than its content. A wide table inside .scroll therefore
   pushed its whole column out instead of scrolling inside it — 258px of
   horizontal page scroll on an insurer profile at 320px, and 190px on a
   vehicle page. min-width:0 is what lets overflow containers do their job. */
.grid>*,.g2>*,.g3>*,.hero-grid>*,.calc>*,.ftr-nav>*,.artl>*,.artl-rail>*{min-width:0}
.scroll,.table-scroll{max-width:100%}

/* ---------- Scroll affordance for wide tables on phones -------------------
   A table that scrolls inside its box is correct behaviour, but on a 320px
   screen it looks like a table that is simply cut off. The fade tells you
   there is more to the right; it disappears once you reach the end, so it
   never lies. Pure CSS — scroll-driven, no JS, no listener. */
.scroll,.table-scroll{
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 28px 100% no-repeat,
    linear-gradient(to left,  var(--surface) 30%, transparent) right center / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(8,25,31,.16), transparent) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(8,25,31,.16), transparent) right center / 12px 100% no-repeat,
    var(--surface);
  background-attachment: local, local, scroll, scroll;
}
@media (prefers-color-scheme: dark){
  .scroll,.table-scroll{
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) left center / 28px 100% no-repeat,
      linear-gradient(to left,  var(--surface) 30%, transparent) right center / 28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), transparent) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), transparent) right center / 12px 100% no-repeat,
      var(--surface);
    background-attachment: local, local, scroll, scroll;
  }
}
/* A one-line hint, shown only where the table actually needs scrolling. */
.scroll-hint{display:none;font-size:.76rem;color:var(--muted);margin-top:.4rem}
@media(max-width:760px){.scroll-hint{display:block}}




/* AO calculator on /obavezno-osiguranje-auta */
.ao-chk{display:flex;gap:.55rem;align-items:center;min-height:32px;font-size:.92rem}
.ao-chk input{width:18px;height:18px;accent-color:var(--mint)}
.ao-out{margin-top:var(--s3);font-size:1.05rem}
.ao-out strong{font-family:var(--f-disp);font-size:1.6rem;color:var(--ink)}
.ao-calc{display:grid;gap:var(--s3);margin-top:var(--s3)}
.ao-ent,.ao-extra{border:0;padding:0;margin:0;min-width:0}
.ao-ent legend,.ao-extra legend{font-weight:600;font-size:.9rem;margin-bottom:.45rem;padding:0}
.ao-ent{display:flex;flex-wrap:wrap;gap:.5rem}
.ao-pill{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.45rem .9rem;border:1px solid var(--rule);
  border-radius:99px;background:var(--sunk);font-size:.92rem;cursor:pointer}
.ao-pill:has(input:checked){border-color:var(--mint);background:var(--mint-soft);font-weight:600}
.ao-pill input{accent-color:var(--mint);width:18px;height:18px;margin:0}
.ao-chk[hidden],[data-show][hidden]{display:none!important}
.ao-result{border-top:1px solid var(--rule);padding-top:var(--s3)}
.ao-big{font-family:var(--f-disp);font-size:clamp(1.8rem,5vw,2.4rem);font-weight:700;color:var(--ink);line-height:1.1}
.ao-big small{font-family:var(--f-body,inherit);font-size:.95rem;font-weight:500;color:var(--muted)}
.ao-sub{margin-top:.35rem;font-size:.9rem;color:var(--muted)}
.ao-note{margin-top:.35rem;font-size:.78rem;color:var(--muted)}
.qcta-ao{margin-block:var(--s3)}
.pt-calc,.rg-calc{display:grid;gap:var(--s3);margin-top:var(--s3)}
.pt-list{list-style:none;margin:0!important;padding:0!important;display:grid;gap:.5rem;counter-reset:pt}
.pt-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem;padding:.75rem .9rem;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);counter-increment:pt}
.pt-row>div:first-child{min-width:0;flex:1 1 220px}
.pt-row b::before{content:counter(pt) ". ";color:var(--muted);font-weight:500}
.pt-meta{display:block;font-size:.8rem;color:var(--muted)}
.pt-px{display:flex;align-items:center;gap:.7rem}
.pt-p{font-family:var(--f-disp);font-weight:700;font-size:1.25rem;color:var(--ink);white-space:nowrap}
.pt-list .pt-row:first-child{border-color:var(--mint);background:var(--mint-soft)}
.rg-items{width:100%;border-collapse:collapse;min-width:0}
.pt-calc>*,.rg-calc>*,.ao-calc>*{min-width:0}
.rg-items th,.rg-items td{padding:.45rem 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:400;font-size:.92rem}
.rg-items td{text-align:right;white-space:nowrap;font-family:var(--f-mono)}
.rg-items tbody tr:last-child td{border-bottom:1px solid var(--rule)}
.rg-items tfoot th,.rg-items tfoot td{font-weight:700;font-size:1.05rem;border-bottom:0;padding-top:.7rem}
/* Naknada štete — kalkulator: tri kolone (stavka, po zakonu, usklađeno) */
.st-set{border:0;padding:0;margin:0;min-width:0}
.st-set legend{font-weight:600;font-size:.92rem;margin-bottom:.45rem;padding:0;color:var(--ink)}
.st-row{display:grid;gap:var(--s2) var(--s3);grid-template-columns:repeat(3,minmax(0,1fr))}
.st-row4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:560px){.st-row4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.st-row .field{margin-bottom:0}
.st-row .field>label{font-weight:500;font-size:.84rem}
.st-items thead th{background:none;padding:.3rem 0 .45rem .6rem;text-align:right;font-size:.66rem;border-bottom:1px solid var(--rule);white-space:normal;line-height:1.35;vertical-align:bottom}
.st-items thead th:first-child{text-align:left;padding-left:0}
.st-items th[scope=row]{padding-right:.6rem}
.st-items td{padding-left:.6rem;font-size:.86rem}
.st-items small{display:block;font-size:.76rem;color:var(--muted);line-height:1.35;margin-top:.15rem}
.st-items tfoot td{font-size:.95rem}
@media(max-width:479px){
  .st-items th[scope=row]{font-size:.86rem;line-height:1.35;padding-right:.4rem}
  .st-items td{font-size:.78rem;padding-left:.4rem}
  .st-items tfoot th{font-size:.92rem}
  .st-items tfoot td{font-size:.82rem}
}
/* Glossary */
.gloss{display:grid;gap:0;margin-top:var(--s3);border-top:1px solid var(--rule)}
.gloss-i{padding:var(--s3) 0;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--hdr-h) + var(--s3))}
.gloss dt{font-weight:700;color:var(--ink)}
.gloss dd{margin:.25rem 0 0;color:var(--body)}
@media(min-width:900px){.gloss-i{display:grid;grid-template-columns:15rem minmax(0,1fr);column-gap:var(--s4)}.gloss dd{margin:0}}
.prose>.gloss{grid-column:1/-1}