/* Finvo design language v1 — shared by every page.
   Fonts: Space Grotesk (headlines, prices, stats, step numbers), Nunito Sans (everything else).
   No monospace anywhere. Zeros are plain ovals in both fonts. */

:root{
  /* brand */
  --green:#004b2f; --green-600:#0a5c3b; --green-deep:#00321f; --orange:#fb6d33; --orange-600:#e85a20;
  /* text */
  --ink:#0b2318; --ink-2:#2c3e35; --muted:#55665d; --faint:#8a9a91;
  /* surfaces */
  --paper:#ffffff; --warm:#f4f2ed; --mint:#eef5f0; --line:#e5e8e3; --line-2:#d5dcd6;
  /* on dark */
  --on-dark:#ffffff; --on-dark-2:#c9d8cf; --mint-bright:#9fd8b6;
  /* status */
  --tick:#12a150; --red:#b42318;
  /* TAG FILLS — always paired with ink text, never same-hue dark-on-light */
  --t-orange:#ffb98a; --t-sky:#b8e4fa; --t-mint:#a8e6c1; --t-sun:#ffe48a; --t-lilac:#d6cfff; --t-rose:#ffc2b8; --t-grey:#e3e7e2;
  /* type */
  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* shape */
  --r-btn:6px; --r-img:8px; --r-card:16px; --r-panel:24px;
  --sh-soft:0 18px 40px -16px rgba(11,35,24,.16);
  --sh-btn:0 20px 30px -12px rgba(11,35,24,.18);
  --sh-panel:0 24px 60px -12px rgba(11,35,24,.16),0 2px 6px rgba(11,35,24,.04);
  --sh-float:0 30px 80px -24px rgba(0,49,31,.32),0 8px 24px -12px rgba(0,49,31,.16);
  --hdr:80px; --bar:44px; --max:1280px;
  --pin:calc(var(--hdr) + var(--bar) + 8px);   /* where a pinned bar sits: just under the header and the announcement bar */
  --pinh:56px;                                  /* the pinned bar's height (.ptabs ul, the pricing switch); comparison-table headers stick under it */
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr) + var(--bar) + 16px)}
html,body{background:var(--paper)}
body{margin:0;color:var(--ink);font:400 17px/1.6 var(--sans);text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--green)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:-.015em;margin:0}
h1{font-size:clamp(36px,5.2vw,56px);line-height:1.08}
h2{font-size:clamp(28px,3.4vw,40px);line-height:1.15}
h3{font-size:clamp(20px,2vw,26px);line-height:1.25}
h4{font-size:19px;line-height:1.3}
p{margin:0}
.hl{color:var(--green)}                      /* headline device: one or two words in brand green */
.dark .hl{color:var(--mint-bright)}
.num,.price,.stat b,.step-n{font-family:var(--display);font-variant-numeric:tabular-nums lining-nums}
table{font-variant-numeric:tabular-nums}
.lead{font-size:19px;line-height:1.55;color:var(--ink-2)}
.muted{color:var(--muted)}
.gut{padding-inline:max(24px,env(safe-area-inset-left,0px))}
.max{max-width:var(--max);margin-inline:auto}
.narrow{max-width:820px;margin-inline:auto}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* section bands: white, warm grey, deep green */
.sec{padding-block:clamp(44px,6vw,72px)}
.sec.warm{background:var(--warm)}
.sec.mint{background:var(--mint)}
.dark{background:var(--green-deep);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--on-dark)}
.dark .muted,.dark .lead{color:var(--on-dark-2)}
.dark a:not(.btn){color:var(--mint-bright)}
.sec-head{max-width:760px;margin:0 auto 32px;text-align:center}
.sec-head p{margin-top:14px;color:var(--muted);font-size:18px}
.dark .sec-head p{color:var(--on-dark-2)}

/* ---------- TAGS (the one rule): solid fill + ink text ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--sans);color:var(--ink);padding:6px 11px;border-radius:999px;background:var(--t-grey);white-space:nowrap}
.tag.sq{border-radius:6px}
.tag.sm{font-size:12px;padding:4px 8px}
.tag.new{background:var(--orange);color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:12px;border-radius:6px;padding:5px 8px}
.tag.orange{background:var(--t-orange)} .tag.sky{background:var(--t-sky)} .tag.mint{background:var(--t-mint)}
.tag.sun{background:var(--t-sun)} .tag.lilac{background:var(--t-lilac)} .tag.rose{background:var(--t-rose)} .tag.grey{background:var(--t-grey)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.eyebrow{display:inline-block;font:700 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--t-mint);padding:6px 11px;border-radius:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 22px;border-radius:var(--r-btn);font:700 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;border:2px solid transparent;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
.btn.primary{background:var(--orange);color:var(--ink);box-shadow:var(--sh-btn)}
.btn.primary:hover{background:#ff7d47;transform:translateY(-1px)}
.btn.line{background:#fff;color:var(--green);border-color:var(--green);box-shadow:var(--sh-btn)}
.btn.line:hover{background:var(--mint)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.block{width:100%}
.btn.sm{min-height:40px;padding:8px 16px;font-size:15px}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.more{font:700 16px var(--sans);color:var(--green);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.more:hover::after{transform:translateX(3px) rotate(45deg)}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.center .ctas{justify-content:center}

/* ---------- ticks and dashes ---------- */
.yes{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--tick);color:#fff;flex:none}
.yes::before{content:"";width:8px;height:4.5px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.no{display:inline-block;width:12px;height:2px;background:var(--faint);border-radius:2px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:16px;line-height:1.45}
.ticks li .yes{margin-top:1px}
.ticks li:not(:has(> .yes)):not(:has(> .no)):not(:has(> .ic)){display:block}

/* ---------- HEADER ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .2s,box-shadow .2s}
.hdr .bar-top{position:relative;z-index:2;background:rgba(255,255,255,.12);backdrop-filter:saturate(1.2) blur(6px);-webkit-backdrop-filter:saturate(1.2) blur(6px);transition:background .2s,box-shadow .2s}
.hdr.solid .bar-top,.hdr.open .bar-top{background:#fff;box-shadow:0 8px 24px -14px rgba(11,35,24,.22)}
.hbar{height:var(--hdr);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;justify-self:start}
.brand .logo{height:44px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:clamp(8px,2.6vw,40px);list-style:none;margin:0;padding:0}
.hbar>nav{position:relative;align-self:stretch;display:flex;align-items:center}
.menu>li{position:static}
.menu>li>a,.menu>li>button .tag.new{margin-left:6px;vertical-align:1px;font-size:11px;padding:2px 6px}
.menu>li>button{font:600 16px var(--sans);color:var(--ink);background:none;border:0;padding:12px 6px;cursor:pointer;text-decoration:none;border-bottom:2px solid transparent}
.menu>li>a:hover,.menu>li>button:hover,.menu>li>button[aria-expanded="true"]{color:var(--green);border-bottom-color:var(--orange)}
.hdr-r{justify-self:end;display:flex;align-items:center;gap:14px}
/* "Client portal": an outlined green button with a padlock, the same pairing as the drawer footer (never wraps) */
.hdr-r .signin{gap:7px;white-space:nowrap;border-width:1.5px;color:var(--green);background:transparent;box-shadow:none;font:700 15px var(--sans)}
.hdr-r .signin:hover,.hdr-r .signin:focus-visible{background:var(--mint);text-decoration:none}
.hdr-r .signin svg{flex:none;width:18px;height:18px;color:var(--green)}
.hdr.solid .hdr-r .signin,.hdr.open .hdr-r .signin{background:#fff}
.hdr.solid .hdr-r .signin:hover{background:var(--mint)}
@media (max-width:1300px) and (min-width:1181px){.hdr-r .signin svg{display:none}}   /* 118px instead of 144px while the right column is tight */
@media (max-width:1240px) and (min-width:1181px){.hdr-r .btn.primary{padding-inline:12px}.menu{gap:clamp(8px,1.6vw,40px)}}   /* six menu items (Fractional CFO added 29 Oct 2026) and the logo at full size */
/* "Fractional CFO" header button (29 Oct 2026): phones and tablets only, a compact outlined green button beside the menu button;
   on desktop the Fractional CFO item has its own dropdown in the menu. At 320-359px the label is the short "CFO". */
.hdr-r .cfo-btn{display:none;min-height:40px;padding:6px 12px;gap:0;border-width:1.5px;color:var(--green);background:transparent;box-shadow:none;font:700 14px/1 var(--sans);white-space:nowrap}
.hdr-r .cfo-btn:hover,.hdr-r .cfo-btn:focus-visible{background:var(--mint);text-decoration:none}
.hdr.solid .hdr-r .cfo-btn,.hdr.open .hdr-r .cfo-btn{background:#fff}
.hdr.solid .hdr-r .cfo-btn:hover{background:var(--mint)}
.hdr-r .cfo-btn .s{display:none}
.burger{display:none;width:46px;height:46px;border-radius:var(--r-btn);border:1px solid var(--line-2);background:#fff;cursor:pointer;place-items:center}

/* dropdown: Plooto's floating rounded panel + Finvo's one-line descriptions and a feature card */
.dd{position:absolute;top:calc(100% - 6px);left:0;right:0;margin-inline:auto;transform:translateY(6px);background:#fff;border-radius:var(--r-panel);box-shadow:var(--sh-panel);padding:28px 30px 30px;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility 0s .3s;display:flex;gap:36px;width:max-content;max-width:min(980px,calc(100vw - 48px))}
.dd.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
.dd::before{content:"";position:absolute;inset:-14px 0 auto 0;height:14px}  /* hover bridge */
.dd-col{min-width:220px}
.dd-col h5{font:700 14px var(--sans);color:var(--ink);margin:0 0 10px}
.dd-col h5 small{font-weight:600;color:var(--muted)}
.dd a.it{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:8px 10px;margin-inline:-10px;border-radius:12px;text-decoration:none;color:var(--ink)}
.dd a.it:hover{background:var(--warm)}
.dd a.it svg{color:var(--green);margin-top:2px}
.dd a.it b{display:flex;align-items:center;gap:8px;font:700 15px/1.35 var(--sans)}
.dd a.it span.d{display:block;font-size:14px;line-height:1.4;color:var(--muted);margin-top:1px}
.dd .two{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));column-gap:28px}
.dd-card{width:260px;background:var(--warm);border-radius:var(--r-card);padding:20px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;align-self:stretch}
.dd-card .tag{align-self:flex-start}
.dd-card h4{font-size:18px}
.dd-card p{font-size:14px;color:var(--muted);line-height:1.45}
.dd-card .more{margin-top:auto;font-size:15px}
.dd-card:hover{box-shadow:inset 0 0 0 2px var(--line-2)}

/* announcement bar: full width, pinned under the header, whole strip is a link */
.annc{display:block;z-index:1;height:var(--bar);background:var(--green);color:#fff;text-decoration:none;position:relative;overflow:hidden}
.annc .max{height:100%;display:flex;align-items:center;justify-content:center;gap:12px;font:400 15px var(--sans);white-space:nowrap}
.annc b.go{font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:6px}
.annc b.go::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.annc:hover b.go{text-decoration:underline}
.annc .pat{position:absolute;top:0;height:100%;width:220px;opacity:.22;pointer-events:none}
.annc .pat.l{left:0}.annc .pat.r{right:0;transform:scaleX(-1)}
.annc .txt{overflow:hidden;text-overflow:ellipsis}
.annc .s{display:none}
.page-top{height:calc(var(--hdr) + var(--bar))}
.page-top.nobar{height:var(--hdr)}

/* mobile nav */
@media (max-width:1180px){
  :root{--hdr:68px}
  .menu,.hbar>nav{display:none}
  .hbar{grid-template-columns:1fr auto}
  .brand .logo{height:36px}
  .hdr-r .signin{display:none}
  .hdr-r .cfo-btn{display:inline-flex}
  .burger{display:grid}
}
@media (max-width:720px){.hdr-r{gap:10px}}
@media (max-width:359px){.hdr-r .cfo-btn .l1{display:none}.hdr-r .cfo-btn .s{display:inline}}
@media (max-width:720px){
  .annc .max{justify-content:flex-start;font-size:14px;gap:10px}
  .annc .l1{display:none}.annc .s{display:inline}
  .annc .pat{display:none}
  .hdr-r .btn.primary{display:none}
}

/* ---------- reveal on scroll (Plooto-style fade and slide) ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.rv.l{transform:translateX(-22px)}
.rv.l.in{transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.dd{transition:none}}

/* ---------- cards ---------- */
.card{background:#fff;border-radius:var(--r-card);padding:28px}
.warm .card{background:#fff}
.card.warm{background:var(--warm)}
.dark .card{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.icon-tile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--t-mint);color:var(--ink)}
.dark .icon-tile{background:rgba(111,224,160,.16);color:var(--mint-bright)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* stats row */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center}
.stat b{display:block;font-size:clamp(34px,4vw,48px);line-height:1.05;color:var(--green)}
.stat span{display:block;margin-top:6px;color:var(--muted);font-size:15px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* segmented switch (pricing audience / tabs) */
.seg{display:inline-flex;padding:4px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;gap:2px}
.seg button{font:700 15px var(--sans);border:0;background:transparent;color:var(--ink);padding:10px 20px;border-radius:999px;cursor:pointer}
.seg button[aria-selected="true"]{background:var(--green);color:#fff}
/* pinned switches (finvo.js; the fallback for a [role=tablist] whose parent cannot be a sticky container): the bar keeps its measured
   width and floats under the header; .pin-ph holds its place. Bars that can be direct children of <main> use CSS sticky instead (below). */
.pinned{position:fixed;top:var(--pin);left:50%;transform:translateX(-50%);z-index:30;max-width:calc(100vw - 24px);box-shadow:0 10px 30px -12px rgba(11,35,24,.35)}
@media (prefers-reduced-motion:reduce){.pinned{transition:none}}
/* on-this-page section tabs (home and the Fractional CFO hub, 30 Oct 2026): a row of links to section ids. The <nav> is position:sticky and
   a direct child of <main>, so the browser itself keeps it under the header from its own spot to the end of the page, with no script
   (the earlier scroll-event pinning lagged behind momentum scrolls on phones, so the bar seemed to vanish). finvo.js only lights the link
   for the section on screen (aria-current) and keeps that link in view inside the bar, which scrolls sideways on narrow screens.
   Anchor jumps land under the bar (scroll-padding-top). Content beside the bar stays clickable (pointer-events on the list only). */
:root:has(.ptabs){scroll-padding-top:calc(var(--pin) + var(--pinh) + 16px)}
.ptabs{position:sticky;top:var(--pin);z-index:30;margin-top:20px;pointer-events:none}
.ptabs ul{pointer-events:auto;list-style:none;margin:0;padding:6px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line),0 10px 30px -12px rgba(11,35,24,.28)}
.ptabs ul::-webkit-scrollbar{display:none}
.ptabs li{flex:none}
.ptabs li:first-child{margin-left:auto}.ptabs li:last-child{margin-right:auto}
.ptabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;font:700 14px var(--sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.ptabs a:hover{background:var(--warm);color:var(--ink)}
.ptabs a[aria-current]{background:var(--green);color:#fff}
.ptabs a:focus-visible{outline-offset:-3px}
/* client-portal guides bar (.pgnav, the five portal pages): the same CSS sticky, a direct child of <main> right under the hero.
   One scrolling row on phones, so the pinned bar never stacks five links down the screen. */
nav.pgnav{position:sticky;top:var(--pin);z-index:30;margin-top:-8px;pointer-events:none}
nav.pgnav ul{pointer-events:auto;padding:8px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:18px;box-shadow:inset 0 0 0 1px var(--line),0 10px 30px -12px rgba(11,35,24,.28)}
@media (max-width:760px){
  nav.pgnav ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.pgnav ul::-webkit-scrollbar{display:none}
  nav.pgnav li{flex:none}
  nav.pgnav li:first-child{margin-left:auto}nav.pgnav li:last-child{margin-right:auto}
}

/* ---------- PRICING (unboxed columns) ---------- */
.promo{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:14px 22px;border-radius:12px;background:linear-gradient(90deg,#0a5c3b,#00321f 60%,#0b2318);color:#fff;font-size:16px;text-align:center}
.promo b{font-weight:800}.promo a{color:var(--mint-bright);font-weight:700;text-decoration:none}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:48px}
.plan{text-align:center;display:flex;flex-direction:column;align-items:center}
.plan .pn{font:700 28px var(--display);padding:4px 16px;border-radius:6px}
.plan.top .pn{background:linear-gradient(120deg,var(--green) 0%,#0e7a43 55%,var(--orange) 140%);color:#fff;min-width:220px}
.plan .q{font-size:14px;color:var(--muted);margin-top:10px}
.plan .price{font-size:48px;font-weight:700;line-height:1;margin-top:14px;color:var(--ink)}
.plan .per{font-size:14px;color:var(--muted);margin:10px 0 18px}
.plan .sum{font:600 16px/1.45 var(--sans);color:var(--ink-2);min-height:70px;max-width:300px}
.plan .btn{width:100%;margin:20px 0 22px}
.plan .ticks{text-align:left;width:100%}
.plan .plus{font-weight:800;text-align:left;width:100%;margin-bottom:10px;font-size:16px}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* comparison tables: every table that compares options carries class "cmp" (pricing's three tables, the Fractional CFO hub's role table,
   the incorporation tiers table). Shared behaviour (30 Oct 2026): from 900px the header row (thead, or the repeated tr.grp name rows)
   is position:sticky just under the pinned bar (--pin + --pinh), so the option names stay in view while the body scrolls. Nothing may
   clip overflow around the table at that width, so the wrapper only scrolls sideways below 900px (and a page's own table rule must not
   set overflow:hidden). Phones keep each page's own treatment: stacked cards with data-l labels, or a sideways scroll with a sticky
   first column. A page without a pinned bar sets --pinh:0px. Cell borders (border-collapse:separate) travel with the stuck cells.
   The look below (warm band, no row lines, thin column lines, repeated plan names per group) is pricing's; a page may restyle it. */
.cmp-wrap{-webkit-overflow-scrolling:touch}
@media (max-width:899px){.cmp-wrap{overflow-x:auto}}
@media (min-width:900px){
  .cmp-wrap,.cmp{overflow:visible}
  .cmp thead th,.cmp tr.grp th{position:sticky;top:calc(var(--pin) + var(--pinh) + 8px);z-index:2;background:var(--warm)}
  .cmp tr.grp th.hlc{background:#fff}
}
.cmp{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;font-size:15px}
.cmp th,.cmp td{padding:11px 16px;text-align:center;vertical-align:middle}
.cmp td:first-child,.cmp th:first-child{text-align:left;width:38%}
.cmp td+td,.cmp th+th{border-left:1px solid var(--line-2)}
.cmp tr.grp th{font:700 19px var(--display);padding-top:34px;padding-bottom:12px;color:var(--ink)}
.cmp tr.grp th+th{font:800 15px var(--sans)}
.cmp tr:first-child.grp th{padding-top:12px}
.cmp td .i{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--faint);color:var(--faint);font:700 10px/1 var(--sans);margin-left:6px;vertical-align:1px;cursor:help}
.cmp td small{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:2px}
.cmp .val{font-weight:600}
.cmp .hlc{background:rgba(255,255,255,.6)}

/* FAQ */
.faq{max-width:860px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font:700 18px/1.4 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font:400 26px var(--sans);color:var(--green)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 22px;color:var(--ink-2);max-width:72ch}

/* ---------- BLOG ---------- */
.blog-band{background:var(--mint);padding:48px 0;text-align:center}
.catbar{border-block:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.catbar nav{display:flex;gap:24px;flex-wrap:wrap}
.catbar nav a{font:600 15px var(--sans);color:var(--ink);text-decoration:none}
.catbar nav a[aria-current]{color:var(--green);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.catbar input{width:220px;padding:9px 12px;border:1px solid var(--line-2);border-radius:4px;font:400 15px var(--sans)}
.post{text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.post .img{aspect-ratio:3/2;border-radius:var(--r-img);overflow:hidden;background:var(--mint)}
.post.feat .img{aspect-ratio:5/3}
.post h3{font-size:21px;line-height:1.25;margin:16px 0 8px}
.post.feat h3{font-size:25px}
.post p{font-size:15px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post .more{margin-top:12px;font-size:15px}
.post:hover h3{color:var(--green)}
.pager{display:flex;gap:8px;align-items:center}
.pager a,.pager span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 14px var(--sans);text-decoration:none;color:var(--ink);border:1px solid var(--line-2)}
.pager [aria-current]{background:var(--green);border-color:var(--green);color:#fff}

/* article */
.a-hero{position:relative;overflow:hidden;background:var(--green-deep);color:#fff;text-align:center;padding:84px 24px 72px}
.a-hero h1{color:#fff;font-size:clamp(32px,4.4vw,48px);max-width:900px;margin:16px auto 18px}
.a-hero .by{color:var(--on-dark-2);font-size:15px}
.a-hero .by b{color:#fff}
.a-hero .c{position:absolute;border-radius:50%;background:rgba(255,255,255,.06);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(24px,-18px) rotate(40deg)}}
@media (prefers-reduced-motion:reduce){.a-hero .c{animation:none}}
.a-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-block:56px}
.prose{font-size:18px;line-height:1.7;color:var(--ink-2)}
.prose>*+*{margin-top:18px}
.prose h2{font-size:32px;margin-top:48px;color:var(--ink)}
.prose h3{font-size:22px;margin-top:32px;color:var(--ink)}
.prose a{color:var(--green);font-weight:700;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:8px}
.prose strong{color:var(--ink)}
.takeaways{background:var(--warm);border-radius:var(--r-card);padding:26px 28px}
.takeaways h2{margin:0 0 12px!important;font-size:26px}
.fig{margin:36px 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.fig .fh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.fig .fh b{font:700 18px var(--display);color:var(--ink)}
.fig figcaption{font-size:14px;color:var(--muted);margin-top:14px;line-height:1.5}
.fig figcaption .src{display:block;margin-top:4px;font-size:13px;color:var(--faint)}
.side{display:flex;flex-direction:column;gap:28px}
.side .box{background:var(--warm);border-radius:var(--r-card);padding:24px}
.side input,.side select{width:100%;padding:12px;border:1px solid var(--line-2);border-radius:4px;font:400 15px var(--sans);margin-top:10px;background:#fff}
.trend a{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;text-decoration:none;color:var(--ink-2);font-size:15px;line-height:1.4;padding:8px 0}
.trend a i{width:64px;height:48px;border-radius:8px;background:var(--mint);display:block}
.share{display:flex;gap:14px;color:var(--faint)}
@media (max-width:980px){.a-body{grid-template-columns:1fr}}

/* ---------- footer (the CTA band above it was removed on 30 Oct 2026: each page's #book section is the one booking ask) ---------- */
.ftr{background:var(--green-deep);color:#fff;padding-block:64px 36px}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.2fr);gap:32px}
.fcols h6{font:800 16px var(--sans);margin:0 0 14px;color:#fff}
.fcols a{display:block;color:#fff;text-decoration:none;font-size:15px;line-height:1.35;padding:5px 0;opacity:.92}
.fcols a:hover{opacity:1;text-decoration:underline}
.fcols .contact a{opacity:1}
.socials{display:flex;gap:14px;margin-top:8px}
.socials a{display:inline-grid!important;place-items:center;width:20px;height:20px;padding:0!important;opacity:.9}
.gbadge{display:inline-flex!important;align-items:center;gap:10px;background:#fff;color:var(--ink)!important;border-radius:10px;padding:10px 14px!important;opacity:1!important;font-size:13px!important}
.gbadge b{font:700 18px var(--display)}
.gbadge .st{color:#f5a623;letter-spacing:1px}
.offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,.1)}
.offices div{font-size:15px;line-height:1.5;color:var(--on-dark-2)}
.offices b{display:block;color:#fff;font-size:15px;margin-bottom:4px}
.fbot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:44px;flex-wrap:wrap}
.fbot .logo{height:72px;width:auto}
.fbot p{font-size:14px;color:var(--on-dark-2)}
.fbot p a{color:#fff;font-weight:700;text-decoration:none}
@media (max-width:980px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}.offices{grid-template-columns:1fr}}
@media (max-width:520px){.fcols{grid-template-columns:1fr 1fr}.fbot .logo{height:54px}}

/* ---------- ICON SYSTEM ----------
   UI icons: 24px grid, 1.8 stroke, round caps and joins, no fills. Green on light, mint on dark, ink inside a tag-fill tile.
   Social icons use the same grid and stroke, sat in a rounded-square tile (22% corner, same ratio as the app icon). */
.soc{display:flex;gap:10px;flex-wrap:wrap}
.soc a{display:inline-grid!important;place-items:center;width:40px;height:40px;padding:0!important;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);opacity:1!important;transition:background .15s,color .15s,transform .15s}
.soc a:hover,.soc a:focus-visible{background:var(--orange);color:var(--ink);box-shadow:none;transform:translateY(-2px);text-decoration:none!important}
.soc.light a{background:var(--t-mint);color:var(--ink);box-shadow:none}
.soc.light a:hover{background:var(--orange)}
.soc.sm a{width:34px;height:34px;border-radius:8px}
.soc.sm svg{width:18px;height:18px}
.soc.big a,.soc.big summary{width:48px;height:48px;border-radius:12px}
.soc.big svg{width:22px;height:22px}
.fcols .hrs{display:block;font-size:15px;line-height:1.35;padding:5px 0;color:#fff}
/* Google reviews tile: a details/summary popover listing the three listings (no JS needed; finvo.js closes it on outside click and Esc) */
.gpop{position:relative}
.gpop summary{display:inline-grid;place-items:center;list-style:none;cursor:pointer;background:#fff;color:var(--ink);border-radius:10px;box-shadow:none;transition:background .15s,transform .15s}
.gpop summary::-webkit-details-marker{display:none}
.gpop summary:hover,.gpop summary:focus-visible,.gpop[open] summary{background:var(--orange);transform:translateY(-2px)}
.gpop summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gmenu{position:absolute;right:0;bottom:calc(100% + 10px);z-index:5;min-width:236px;padding:8px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 18px 36px -12px rgba(11,35,24,.45),0 0 0 1px var(--line-2)}
.gmenu::after{content:"";position:absolute;right:16px;top:100%;border:8px solid transparent;border-top-color:#fff}
.gmenu b{display:block;font:800 13px var(--sans);color:var(--green-2);padding:6px 10px 4px}
.soc .gmenu a{display:flex!important;width:auto;height:auto;min-height:44px;padding:0 10px!important;border-radius:10px;background:none;box-shadow:none;color:var(--ink)!important;font:700 15px var(--sans);white-space:nowrap;opacity:1!important;text-decoration:none!important;transform:none}
.soc .gmenu a:hover,.soc .gmenu a:focus-visible{background:var(--t-mint);color:var(--ink);transform:none;text-decoration:none!important}
/* partners and tools strip */
.partners{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.partners .tl{font:800 14px var(--sans);color:var(--on-dark-2);letter-spacing:.2px}
.partners ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.partners li a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font:700 14px var(--sans);text-decoration:none;transition:background .15s,color .15s}
.partners li a svg{color:var(--mint)}
.partners li a:hover,.partners li a:focus-visible{background:var(--orange);color:var(--ink)}.partners li a:hover svg,.partners li a:focus-visible svg{color:var(--ink)}

/* Contact launcher: one orange round button on every screen. Desktop and tablet (>720px): it opens a stack of labelled pills.
   DOM order Book -> Call -> Email -> Portal -> (Chat); drawn column-reverse so Book sits nearest the launcher and Chat on top.
   Phones (<=720px, 31 Oct 2026): the same button, 56px and icon only, opens the bottom sheet instead (no bottom bar any more).
   Design: docs/chat-plan/launcher-and-chat-ux.md A, G and J. */
.fab{position:fixed;right:22px;bottom:22px;z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s}
.fab.show,.fab.open,.fab.chat{opacity:1;transform:none;pointer-events:auto}   /* an open menu or chat is never hidden by the scroll observer */
.fab-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0;height:60px;min-width:60px;padding:0 17px;border:0;border-radius:999px;
  background:var(--orange);color:var(--ink);font:800 16px var(--sans);cursor:pointer;
  box-shadow:0 18px 36px -12px rgba(11,35,24,.45),0 0 0 4px #fff;transition:gap .2s,background .15s,transform .15s}
.fab-btn:hover{background:#ff7d47;transform:translateY(-1px)}
.fab-btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.fab-ic{display:grid;place-items:center;width:26px;height:26px}
.fab-ic.fab-close,.fab.open .fab-ic.fab-open,.fab.chat .fab-ic.fab-open{display:none}
.fab.open .fab-ic.fab-close,.fab.chat .fab-ic.fab-close{display:grid}
.fab-l{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .3s ease}
.fab-btn:hover .fab-l,.fab-btn:focus-visible .fab-l,.fab.fab-peek .fab-l{max-width:200px}   /* "Chat with Finvo AI" (30 Oct 2026) needs about 170px */
.fab-btn:hover,.fab-btn:focus-visible,.fab.fab-peek .fab-btn{gap:10px}
.fab.open .fab-l,.fab.chat .fab-l{display:none}                              /* open state: a round X only */
.fab.open .fab-btn,.fab.chat .fab-btn{padding:0}
.fab.dot .fab-btn::before,.fab.tdot .fab-btn::before{content:"";position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px #fff}   /* .dot: a conversation is waiting; .tdot: the phone teaser (chat.js showDot) */
.fab.open.dot .fab-btn::before,.fab.chat.dot .fab-btn::before,.fab.open.tdot .fab-btn::before,.fab.chat.tdot .fab-btn::before{display:none}
/* the stack */
.fab-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px}
.fab-menu[hidden]{display:none}
.fab-menu .fb{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 8px;border-radius:999px;background:#fff;color:var(--ink);
  font:700 15px var(--sans);text-decoration:none;box-shadow:0 14px 30px -12px rgba(11,35,24,.45),0 0 0 1px var(--line-2);transition:transform .15s,background .15s}
.fab-menu .fb svg{flex:none;width:36px;height:36px;padding:8px;border-radius:50%;background:var(--mint);color:var(--green)}
.fab-menu .fb:hover,.fab-menu .fb:focus-visible{background:var(--mint);transform:translateX(-3px)}
.fab-menu .fb:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.fab-menu .fb-book{background:var(--orange);color:var(--ink);font-size:16px;box-shadow:0 18px 36px -12px rgba(11,35,24,.45),0 0 0 1px rgba(11,35,24,.08)}
.fab-menu .fb-book svg{background:rgba(255,255,255,.55);color:var(--ink)}
.fab-menu .fb-book:hover,.fab-menu .fb-book:focus-visible{background:#ff7d47}
.fab-menu li{opacity:0;transform:translateY(8px) scale(.96);transition:opacity .18s,transform .18s}   /* items rise in, staggered (JS adds .in next frame) */
.fab-menu.in li{opacity:1;transform:none}
.fab-menu.in li:nth-child(2){transition-delay:.03s}.fab-menu.in li:nth-child(3){transition-delay:.06s}
.fab-menu.in li:nth-child(4){transition-delay:.09s}.fab-menu.in li:nth-child(5){transition-delay:.12s}
/* attention: one label peek (JS adds .fab-peek for 2.6 s at 1.4 s; it was .peek until 31 Oct 2026, which clashed with the calculators'
   own .peek summary bar and restyled the launcher as that bar for 2.6 s) and a soft ring, three cycles then stop */
.fab-btn::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--orange);opacity:0;pointer-events:none;animation:fabping 10s ease-out 4s 3}
.fab.open .fab-btn::after,.fab.chat .fab-btn::after{animation:none}
@keyframes fabping{0%{transform:scale(.92);opacity:.9}25%{transform:scale(1.45);opacity:0}100%{transform:scale(1.45);opacity:0}}
/* no JavaScript: the pills stand open and the launcher is not shown */
html:not(.js) .fab{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .fab-menu{display:flex} html:not(.js) .fab-menu li{opacity:1;transform:none} html:not(.js) .fab-btn{display:none}
/* ---------- phones (<=720px, 31 Oct 2026): the round launcher, icon only, bottom right inside the safe area; it opens the sheet ---------- */
@media (max-width:720px){
  .fab{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .fab-btn{width:56px;height:56px;min-width:56px;padding:0}
  .fab-btn:hover,.fab-btn:focus-visible,.fab.fab-peek .fab-btn{gap:0}
  .fab-l{display:none}                                  /* no label peek on phones: one round icon */
  .fab-menu,html:not(.js) .fab-menu{display:none}     /* the pill stack is desktop only; phones get the sheet */
  html:not(.js) .fab{display:none}                     /* no JavaScript, no sheet: the footer's phone and email and the page's #book stay */
  body{padding-bottom:0}
}
/* ---------- end phone launcher ---------- */
@media (prefers-reduced-motion:reduce){
  .fab,.fab-l,.fab-btn,.fab-menu li,.fab-menu .fb{transition:none;animation:none}
  .fab-btn::after{display:none}
  .fab-l{max-width:200px}.fab-btn{gap:10px}                                   /* no peek, so the label is simply always on */
  .fab-menu li{opacity:1;transform:none}
}
@media (max-width:520px){.fcols .contact{grid-column:1/-1}}

/* ---------- QUIET PALETTE (21 Oct 2026): fewer colours ----------
   Colour now comes from three places only: brand green, one orange accent, and warm neutrals.
   Tags: neutral by default, mint = positive, peach = needs attention, solid orange = New. Ink text always. */
:root{
  --t-grey:#ebe8e1; --t-sky:#ebe8e1; --t-lilac:#ebe8e1; --t-sun:#ebe8e1;
  --t-mint:#d4ebdc; --t-orange:#ffd9c4; --t-rose:#f6d5cd;
  --mint:#f3f5f1;
}
.eyebrow{background:none;padding:0;color:var(--green);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--orange);border-radius:2px}
.center .eyebrow,.sec-head .eyebrow{justify-content:center}
.icon-tile{background:var(--warm);color:var(--green)}
.dark .icon-tile{background:rgba(255,255,255,.07);color:#fff}
.promo{background:var(--green-deep)}
.plan.top .pn{background:var(--green)}
.dd-card{background:var(--warm)}
.blog-band{background:var(--warm)}
.dark .hl{color:#9fd8b6}

/* ---------- NAVIGATION BY DEVICE ----------
   Desktop (>1180px): top menu with dropdowns.
   Tablet (721-1180px): menu button opens a side drawer from the right; Client portal + Book stay in the header.
   Phone (<=720px): app style. Header = logo + menu; full-screen drawer; no bottom bar (31 Oct 2026): the round launcher
   bottom right opens a sheet (Chat with Finvo AI, Book, Call, Email, Client portal). */
.scrim{position:fixed;inset:0;background:rgba(11,35,24,.42);z-index:70;opacity:0;transition:opacity .25s}
.scrim.on{opacity:1}
.mnav{position:fixed;top:0;right:0;bottom:0;width:min(440px,88vw);z-index:71;background:#fff;display:flex;flex-direction:column;
  transform:translateX(105%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s;box-shadow:-24px 0 60px -20px rgba(11,35,24,.35);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.mnav.open{transform:none;visibility:visible;transition:transform .3s ease}
.mn-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.mn-h .logo{height:34px;width:auto}
.mn-x{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.mn-b{flex:1;overflow:auto;padding:6px 20px 12px;-webkit-overflow-scrolling:touch}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{list-style:none;font:700 18px var(--display);padding:17px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--ink)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.mnav details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.mnav .dl{display:grid;gap:2px;padding-bottom:12px}
.mnav .it{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:9px 8px;margin-inline:-8px;border-radius:12px;text-decoration:none;color:var(--ink)}
.mnav .it:hover,.mnav .it:active{background:var(--warm)}
.mnav .it svg{width:40px;height:40px;padding:10px;border-radius:12px;background:var(--warm);color:var(--green)}
.mnav .it b{display:block;font:700 16px var(--sans)}
.mnav .it small{display:block;font:400 14px/1.35 var(--sans);color:var(--muted)}
.mnav a.top{display:flex;align-items:center;gap:12px;font:700 18px var(--display);padding:17px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.mnav a.top svg{color:var(--green)}
.mn-f{padding:14px 20px 18px;border-top:1px solid var(--line);display:grid;gap:10px;background:#fff}
.mn-f .btn{width:100%}
.mn-f p{font-size:14px;color:var(--muted);text-align:center;margin-top:2px}
.mn-f .btn svg{flex:none;width:18px;height:18px}
.sheet{display:none}
@media (max-width:1180px){
  .hdr-r .signin{display:inline-flex}
  .hdr-r .signin svg{display:inline-block}
}
@media (max-width:860px){ .hdr-r .signin{display:none} }
/* ---------- phone sheet (<=720px): the round launcher opens it (31 Oct 2026: the bottom bar is gone). Design: launcher-and-chat-ux.md B, G, J. ---------- */
@media (max-width:720px){
  .mnav{width:100vw;box-shadow:none}
  .hdr-r .btn.primary{display:none}
  .ftr{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}   /* the launcher hides over the footer, so no room is kept for it */
  /* the sheet: the same options as the desktop launcher, in rows */
  .sheet{position:fixed;left:0;right:0;bottom:0;z-index:72;background:#fff;border-radius:22px 22px 0 0;
    padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;
    transform:translateY(105%);transition:transform .28s ease;box-shadow:0 -20px 50px -20px rgba(11,35,24,.4);max-height:calc(100vh - 56px);overflow:auto}
  .sheet.open{transform:none}
  .sheet[hidden]{display:none}
  .sh-grab{width:44px;height:5px;border-radius:5px;background:var(--line-2);justify-self:center;margin-bottom:2px}
  .sh-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px}
  .sheet h2{font-size:20px;margin:0}
  .sh-x{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--warm);color:var(--ink);display:grid;place-items:center;cursor:pointer}
  .sh-x:hover{background:var(--line)}
  .sh-x:focus-visible,.sh-row:focus-visible{outline:3px solid var(--green);outline-offset:2px}
  .sh-row.sh-hl{background:var(--mint);box-shadow:inset 0 0 0 2px var(--green)}   /* the teaser dot was on the launcher: Finvo AI first and lit */
  .sh-row.sh-hl svg{background:#fff}
  .sh-row{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;min-height:60px;padding:8px 12px;border-radius:14px;background:var(--warm);text-decoration:none;color:var(--ink)}
  .sh-row svg{width:48px;height:48px;padding:13px;border-radius:12px;background:var(--mint);color:var(--green)}
  .sh-row.book{background:var(--orange)} .sh-row.book svg{background:rgba(255,255,255,.55);color:var(--ink)}
  .sh-row b{display:block;font:800 16px var(--sans)} .sh-row small{display:block;font-size:14px;line-height:1.35;color:var(--muted)}
  .sh-row.book small{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
/* ---------- end phone sheet ---------- */
@media (prefers-reduced-motion:reduce){.mnav,.scrim{transition:none}}

/* ---------- QA fixes (shared) ---------- */
html{overflow-x:clip}                       /* off-screen drawer never widens the page */
.brand{min-height:44px}
@media (max-width:1100px){
  .more{min-height:44px}
  .tag.sm{font-size:12px}
}
@media (max-width:1100px){
  section a[href^="tel:"]:not(.btn),section a[href^="mailto:"]:not(.btn){min-height:44px;display:inline-flex;align-items:center}
}

/* breadcrumb (every page except home) */
.crumbs{font-size:14px;color:var(--muted);margin-bottom:18px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--faint)}
.crumbs a{color:var(--green);text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-2)}
.center .crumbs ol,.crumbs.center ol{justify-content:center}
@media (max-width:1100px){.crumbs a{display:inline-flex;min-height:44px;align-items:center}.crumbs{margin-bottom:6px}}

/* Contrast on dark bands: labels and links switch to light colours (never green on deep green) */
.dark .eyebrow{color:var(--mint-bright)}
.dark .crumbs,.dark .crumbs [aria-current]{color:var(--on-dark-2)}
.dark .crumbs a{color:var(--mint-bright)}

/* ---------- SHARP TEXT on standard (1x) screens, Windows included ----------
   No permanent GPU layers, whole-pixel type, no fractional transforms on text at rest,
   tighter letter-spacing only on large headlines, and darker secondary text. Brand colours unchanged. */
:root{--muted:#41514a}                         /* secondary text: 7.5:1 on warm grey, 8.4:1 on white */
h1,h2{letter-spacing:-.01em}
h3,h4{letter-spacing:0}
h1{font-size:round(clamp(36px,5.2vw,56px),1px)}
h2{font-size:round(clamp(28px,3.4vw,40px),1px)}
h3{font-size:round(clamp(20px,2vw,26px),1px)}
.stat b{font-size:round(clamp(34px,4vw,48px),1px)}
.hdr.solid .bar-top{backdrop-filter:none;-webkit-backdrop-filter:none}
.rv.in{transform:none}
button,input,select,textarea{font:inherit}   /* form controls otherwise default to a 13.33 px system size */

/* Reassurance row (hero, CTA band): short facts separated by small orange dots, always centred */
.reassure{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 24px;margin-top:22px;font-size:15px;line-height:1.4;color:var(--ink-2);text-align:center}
.reassure span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.reassure span::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.dark .reassure{color:var(--on-dark-2)}
@media (max-width:520px){.reassure{gap:6px 18px;font-size:14px}}

/* ---------- Booking widget (tools/chrome.py booking_widget, the <!--BOOKING--> marker in every #book section) ----------
   A white card beside the page's own heading and lead: office pills (44 px), the one orange button, typical times, the next
   three business days (filled by finvo.js), the reassure line and the phone/email line. It has a fixed width so the panel's
   "auto" column never grows to the text's width; below 860 px every booking panel stacks and the card fills the column. */
.bkw{position:relative;width:420px;max-width:100%;background:#fff;color:var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-float);padding:clamp(18px,3vw,26px);display:grid;gap:14px;min-width:0;text-align:left}
.bkw-q{font:700 15px/1.3 var(--sans);color:var(--ink)}
.bkw-off{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:-4px}
.bkw-off button{min-height:44px;padding:8px 10px;font:700 15px/1.2 var(--sans);color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s}
.bkw-off button:hover{border-color:var(--ink)}
.bkw-off button[aria-pressed="true"]{background:var(--t-mint);border-color:var(--ink)}
.bkw .btn{width:100%;white-space:normal;text-align:center}
.bkw-soon{background:var(--warm);border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.5;color:var(--ink-2);outline-offset:3px}
.bkw-soon-acts{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:2px}
.bkw-soon-acts a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.bkw-times{font-size:15px;line-height:1.5;color:var(--muted)}
.bkw-lbl{font-size:15px;line-height:1.5;color:var(--muted)}
.bkw-strip{color:var(--ink-2);font-weight:700}   /* plain text, not buttons: the times are typical, not bookable here */
.bkw .reassure{margin-top:0;justify-content:flex-start;text-align:left;font-size:14px;color:var(--ink-2)}
.bkw .reassure span{white-space:normal}   /* the card can be 220 px wide at 320 px: the facts wrap instead of widening it */
.bkw>*{min-width:0;overflow-wrap:anywhere}
.bkw-c{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;font-size:15px;line-height:1.4;color:var(--muted)}
.bkw-c a{display:inline-flex;align-items:center;min-height:44px}   /* phone, email and reviews: tap-sized rows at every width */
.bkw a:not(.btn){color:var(--green);font-weight:700}
.dark .bkw .reassure{color:var(--ink-2)}
html:not(.js) .bkw-q,html:not(.js) .bkw-off{display:none}
@media (max-width:860px){.bkw{width:100%}}
@media (max-width:360px){.bkw-off{grid-template-columns:1fr}}

/* ---------- CALCULATOR (every /tools page) ----------
   Inputs on the left, the answer on the right (stacked on phones). The answer is the hero:
   one big whole-pixel number, a short plain-language line, then the breakdown table. */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,36px);align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc-form{background:#fff;border-radius:var(--r-card);padding:clamp(20px,3vw,30px);box-shadow:inset 0 0 0 1px var(--line)}
.warm .calc-form{box-shadow:none}
.field{display:grid;gap:6px;margin-bottom:18px}
.field label,.field .lbl{font:700 15px var(--sans);color:var(--ink)}
.field .hint{font-size:14px;color:var(--muted);line-height:1.45}
.field input,.field select{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;font:600 17px var(--sans);color:var(--ink)}
.field input:focus,.field select:focus{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--green)}
.field .money{position:relative}
.field .money input{padding-left:30px}
.field .money::before{content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);font:700 17px var(--sans);color:var(--muted)}
.field .err{font-size:14px;color:var(--ink);background:var(--t-orange);font-weight:700;border-radius:8px;padding:6px 10px}
.calc-out{background:var(--green-deep);color:#fff;border-radius:var(--r-card);padding:clamp(22px,3vw,32px);position:sticky;top:calc(var(--hdr) + var(--bar) + 16px)}
@media (max-width:900px){.calc-out{position:static}}
.calc-out .k{font:800 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mint-bright)}
.calc-out .big{font:700 48px/1.05 var(--display);margin-top:8px;font-variant-numeric:tabular-nums}
.calc-out .line{color:var(--on-dark-2);margin-top:10px;font-size:16px}
.calc-out table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px;font-variant-numeric:tabular-nums}
.calc-out td{padding:9px 0;border-top:1px solid rgba(255,255,255,.14);color:#fff}
.calc-out td:last-child{text-align:right;font-weight:700}
.calc-out .note{margin-top:16px;font-size:14px;color:var(--on-dark-2)}
.calc-out .btn{margin-top:18px}
.disclaimer{font-size:14px;color:var(--muted);margin-top:14px}

/* Skip link: hidden until focused with the keyboard */
.skip{position:absolute;left:16px;top:-60px;z-index:1000;padding:12px 18px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* Elements visible at page load skip the reveal animation */
.rv.now{transition:none!important}
/* Hidden labels inside table cells stay in the cell (an absolute one can escape a scrolling table and widen the page) */
td .sr,th .sr{position:relative;display:inline-block;white-space:nowrap;vertical-align:top}

/* ---------- Finvo Time Journal: articles and article hubs (main.art) ----------
   Shared so every article looks the same. Page styles stay in each page only for one-off parts. */
.art .hero{margin-top:calc(-1 * (var(--hdr) + var(--bar)));padding-top:calc(var(--hdr) + var(--bar) + clamp(24px,3.5vw,40px));padding-bottom:clamp(36px,5vw,56px);background:linear-gradient(180deg,var(--warm) 0%,#fff 100%)}
.art .hero-txt{max-width:860px;margin:clamp(16px,3vw,28px) auto 0;text-align:center}
.art .hero h1{margin-top:14px;font-size:clamp(32px,4.6vw,50px)}
.art .hero .lead{margin-top:18px}
.art .hero .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.art .meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:18px;font-size:15px;color:var(--muted)}
.art .meta b{color:var(--ink-2);font-weight:700}
.art .trustline{margin-top:16px;font-size:15px;color:var(--muted);text-align:center}
.art .trustline a{color:var(--ink-2);font-weight:700;text-underline-offset:3px}
.art .trustline .st{color:var(--ink);letter-spacing:1px}
@media (max-width:520px){.art .hero .ctas .btn{width:100%;white-space:normal}}
/* body: article text + side panel */
.art .a-body{padding-block:clamp(36px,5vw,56px) clamp(56px,7vw,88px)}
.art .prose{max-width:760px;min-width:0}
.art .prose h2{font-size:clamp(26px,3vw,32px);line-height:1.2;scroll-margin-top:calc(var(--hdr) + var(--bar) + 16px)}
.art .prose h3{line-height:1.3}
.art .prose ul,.art .prose ol{margin-bottom:0}
.art .prose .ticks{padding:0}
.art .prose .ticks li{font-size:17px}
.art .prose .ticks li+li{margin-top:0}
.art .takeaways h2{font-size:24px}
.art .takeaways .ticks{margin-top:4px}
.art .note{background:var(--mint);border-radius:var(--r-card);padding:20px 22px;font-size:17px;color:var(--ink-2)}
.art .note b{color:var(--ink)}
.art .ex{background:#fff;border-radius:var(--r-card);padding:20px 22px;box-shadow:inset 0 0 0 1px var(--line);font-size:17px}
.art .ex .tag{margin-bottom:10px}
.art .help{display:grid;gap:10px;background:var(--warm);border-radius:var(--r-card);padding:24px 26px}
.art .help h2,.art .help h3{margin:0!important;font-size:22px}
.art .help .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
@media (max-width:520px){.art .help .btns .btn{width:100%;white-space:normal}}
/* tables: real tables on wide screens, labelled cards on phones */
.art .tbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.45;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.art .tbl caption{caption-side:top;text-align:left;font:700 17px/1.3 var(--display);color:var(--ink);padding:0 0 10px}
.art .tbl th,.art .tbl td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.art .tbl thead th{background:var(--warm);font:700 15px/1.3 var(--sans);color:var(--ink)}
.art .tbl tbody tr:last-child td,.art .tbl tbody tr:last-child th{border-bottom:0}
.art .tbl tbody th{font-weight:700;color:var(--ink)}
@media (max-width:640px){
  .art .tbl,.art .tbl tbody,.art .tbl tr,.art .tbl td,.art .tbl tbody th{display:block;width:100%}
  .art .tbl{border:0;border-radius:0}
  .art .tbl caption{display:block;width:100%;padding-bottom:0}
  .art .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .art .tbl tr{border:1px solid var(--line);border-radius:12px;padding:6px 0;margin-top:12px;background:#fff}
  .art .tbl td,.art .tbl tbody th{border:0;padding:6px 14px}
  .art .tbl td[data-l]::before{content:attr(data-l);display:block;font:700 13px/1.3 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
}
/* side panel: contents and a call box; sticky on wide screens */
.art .side{position:sticky;top:calc(var(--hdr) + var(--bar) + 20px);align-self:start}
.art .side .box{display:grid;gap:10px}
.art .side h2{font:700 17px/1.3 var(--display);margin:0}
.art .toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.art .toc a{display:block;padding:8px 0;color:var(--ink-2);text-decoration:none;font-size:15px;line-height:1.4}
.art .toc a:hover{color:var(--green);text-decoration:underline}
.art .side .box p{font-size:15px;color:var(--ink-2)}
.art .side .btn{width:100%;white-space:normal}
@media (max-width:1100px){.art .a-body{grid-template-columns:1fr}.art .side{position:static}.art .side .toc{display:none}}
/* related chips, sources, booking band */
.art .strips{display:grid;gap:22px;background:var(--warm);border-radius:var(--r-panel);padding:clamp(22px,3.5vw,36px)}
.art .strip{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px 24px;align-items:start}
.art .strip h3{font:700 17px/1.3 var(--display);padding-top:14px}
.art .strip+.strip{border-top:1px solid var(--line-2);padding-top:22px}
.art .links{display:flex;flex-wrap:wrap;gap:10px}
.art .lk{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font:700 15px var(--sans);text-decoration:none}
.art .lk:hover{border-color:var(--green);background:var(--warm)}
@media (max-width:700px){.art .strip{grid-template-columns:1fr}.art .strip h3{padding-top:0}}
.art .faq summary{min-height:48px}
.art .srcs{max-width:860px;margin:28px auto 0;font-size:15px;color:var(--muted);text-align:left}
.art .srcs b{color:var(--ink-2)}
.art .srcs ul{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}
.art .srcs a{overflow-wrap:anywhere}
.art .bookp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:center;border-radius:var(--r-panel);padding:clamp(26px,5vw,56px)}
.art .bookp h2{margin-top:14px}
.art .bookp .lead{margin-top:14px;max-width:62ch}
.art .bookp.dark .eyebrow,.art .bookp.dark .hl{color:var(--on-dark)}
.art .bookp .contact{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;font-size:16px}
.art .bookp .contact a{font-weight:700;text-decoration:none;color:var(--on-dark)}
.art .bookp .contact a:hover{text-decoration:underline}
.art .bookp .contact span{color:var(--on-dark-2)}
.art .bookp .tl{margin-top:14px;font-size:15px;color:var(--on-dark-2)}
.art .bookp .tl a{color:var(--on-dark);font-weight:700}
.art .bookp .acts{display:grid;gap:12px;min-width:260px}
@media (max-width:860px){.art .bookp{grid-template-columns:1fr}.art .bookp .acts{min-width:0}}
@media (max-width:420px){.art .bookp .acts .btn{white-space:normal}}
/* hub pages: article cards and topic filters */
.art .acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.art .acard{display:flex;flex-direction:column;gap:10px;min-width:0;background:#fff;border-radius:var(--r-card);padding:24px;box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink)}
.art .acard .tag{align-self:flex-start}
.art .acard h3{font-size:20px;line-height:1.3}
.art .acard p{font-size:16px;color:var(--ink-2)}
.art .acard .more{margin-top:auto;padding-top:6px;font-weight:700;color:var(--green);font-size:15px}
.art .acard:hover h3{color:var(--green)}
.art .acard:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.art .acard.soon{background:var(--warm);box-shadow:none;color:var(--ink-2)}
.art .acard.soon .more{color:var(--muted)}
@media (max-width:980px){.art .acards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.art .acards{grid-template-columns:1fr}}
/* compact card lists: title only on phones (long hub lists) */
@media (max-width:640px){.art .acards.compact{gap:12px}.art .acards.compact .acard{padding:16px 18px;gap:0}.art .acards.compact .acard h3{font-size:18px}.art .acards.compact .acard .tag,.art .acards.compact .acard p,.art .acards.compact .acard .more{display:none}}
/* four cards read better 2 x 2 */
.art .acards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-inline:auto}
@media (max-width:640px){.art .acards.two{grid-template-columns:1fr}}
.art .topics{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* Free calculators strip (tools/chrome.py calc_strip) */
.calc-strip{background:var(--warm);padding-block:clamp(40px,5vw,60px)}
.calc-strip h2{font-size:clamp(26px,3.4vw,34px);line-height:1.2}
.calc-sub{margin-top:10px;color:var(--muted);font-size:17px}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px;margin-top:28px}
.calc-card{display:flex;flex-direction:column;gap:6px;min-height:44px;padding:20px;border-radius:var(--r-card);background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none}
.calc-card b{font:700 18px/1.3 var(--display)}
.calc-card span{font-size:15px;line-height:1.5;color:var(--ink-2)}
.calc-card:hover,.calc-card:focus-visible{box-shadow:inset 0 0 0 2px var(--green)}
.calc-all{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:16px}
/* analytics notice: one-time bottom bar from src/assets/analytics.js (live site only) */
.anote{position:fixed;left:16px;right:16px;bottom:16px;z-index:58;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;max-width:960px;margin-inline:auto;padding:14px 18px;border-radius:16px;background:var(--green-deep);color:#fff;box-shadow:0 18px 36px -12px rgba(11,35,24,.45)}
.btn[hidden]{display:none}
.anote p{margin:0;font-size:15px;line-height:1.5;flex:1 1 360px}
.anote a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.anote .acts{display:flex;gap:10px;flex:none}
.anote .btn.line{background:transparent;border-color:#fff;color:#fff;box-shadow:none}
.anote .btn.line:hover,.anote .btn.line:focus-visible{background:#fff;color:var(--ink)}
/* phones: the notice sits 12px above the round launcher (16 + 56 from the bottom), so the launcher stays tappable; the open sheet (z 72)
   and its scrim (z 70) cover the notice (z 58), never the other way round */
@media (max-width:720px){.anote{left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:12px 14px;gap:10px;border-radius:14px}.anote p{font-size:14px;line-height:1.45}.anote .acts{width:100%}.anote .acts .btn{flex:1;min-height:44px}}
@media print{.anote{display:none}}

/* ---------- "Finvo AI" chat panel (rendered only while CHAT["enabled"] in tools/flags.py; hidden until opened) ----------
   Design: docs/chat-plan/launcher-and-chat-ux.md D, F and G; chat-architecture.md 11. Tokens only; ink on orange, white on green only. */
@media (min-width:721px){.anote{right:240px;margin-inline:auto 0;max-width:min(960px,calc(100vw - 256px))}}   /* the first-visit notice never sits under the launcher ("Chat with Finvo AI" peek: about 205px wide + 22px from the edge) */
/* ---------- the chat teaser (chat.js showTeaser): a card above the launcher on desktop and tablet; on phones a dot on the launcher ----------
   Shown once per session after 25% of the page is scrolled or 10 s, never over #book or the footer (the launcher's rule). Ink on white,
   the one orange chip is the booking one; the mark is the site's AI bubble, never a photo. z 55 = the launcher's; the panel (56) and the
   phone sheet (72) sit above it, and it is emptied whenever the panel opens. */
.chat-teaser{position:fixed;right:22px;bottom:94px;z-index:55;width:min(360px,calc(100vw - 44px));padding:16px 16px 14px;background:#fff;border-radius:18px;box-shadow:var(--sh-float);
  color:var(--ink);display:grid;gap:10px;animation:ctin .28s ease-out}
.chat-teaser:empty{display:none}
@keyframes ctin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ct-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.ct-x:hover{background:var(--warm);color:var(--ink)}
.ct-x:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.ct-head{display:flex;align-items:center;gap:10px;padding-right:36px}
.ct-mark{flex:none;width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center}
.ct-head b{display:block;font:700 15px/1.2 var(--display);letter-spacing:0}
.ct-head small{display:block;font:400 13px/1.3 var(--sans);color:var(--muted)}
.ct-msg{font:400 15px/1.45 var(--sans);color:var(--ink)}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chips .qr{display:inline-flex;align-items:center;text-decoration:none}
.ct-chips .ct-book{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.ct-chips .ct-book:hover,.ct-chips .ct-book:focus-visible{background:#ff7d47;border-color:#ff7d47}
.ct-ask{display:grid;grid-template-columns:1fr 44px;gap:8px}
.ct-ask input{width:100%;min-height:44px;border:1.5px solid var(--line-2);border-radius:12px;padding:8px 12px;font:400 15px var(--sans);color:var(--ink);background:#fff}
.ct-ask input::placeholder{color:var(--muted)}
.ct-ask input:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
.ct-ask button{width:44px;height:44px;border:0;border-radius:12px;background:var(--orange);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.ct-ask button:hover{background:#ff7d47}
.ct-note{font:400 13px/1.4 var(--sans);color:var(--muted)}
.ct-note a{color:var(--green)}
/* phones (31 Oct 2026): no card and no bubble; the teaser is the dot on the round launcher (.fab.tdot above). A card filled at a wider
   width stays out of the way if the window narrows. */
@media (max-width:720px){.chat-teaser{display:none}}
@media (prefers-reduced-motion:reduce){.chat-teaser{animation:none}}
.grecaptcha-badge{visibility:hidden}                        /* Google's badge would cover the launcher; its notice is in the chat footer */
/* Size (Dinesh, 30 Oct 2026: "double the width and 1.5 times the length"): the 400 x 640 panel became 800 x 960 from 900px up, capped at
   92vw / 88vh and at the room between the pinned chrome (header + announcement bar = --pin; both sit above the panel in the stacking
   order, so a panel under them would lose its own title bar, and the logo is never covered) and the launcher (bottom 94 = launcher 60 +
   22 + 12). 721-899px: 600 x 800 with the same caps. At 1440 x 900 that gives 800 x 668, at 1920 x 1080 800 x 848; the full 960 needs a
   screen about 1,190px tall. Phones (<=720) stay full screen. */
.chatp{position:fixed;right:22px;bottom:94px;z-index:56;width:min(600px,92vw);height:min(800px,88vh,calc(100vh - var(--pin) - 100px));display:flex;flex-direction:column;
  background:#fff;border-radius:var(--r-panel);box-shadow:var(--sh-float);overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity .22s,transform .22s}
@media (min-width:900px){.chatp{width:min(800px,92vw);height:min(960px,88vh,calc(100vh - var(--pin) - 100px))}}
.chatp.in{opacity:1;transform:none}
.chatp[hidden]{display:none}
.ch-h{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--green);color:#fff}
.ch-h>div{flex:1;min-width:0}
.ch-h h2{font:700 18px var(--display);color:#fff;letter-spacing:0}
.ch-h p{font:400 13px/1.4 var(--sans);color:var(--on-dark-2);margin-top:2px}
.ch-x{flex:none;width:44px;height:44px;margin:-6px -6px 0 0;border:0;border-radius:12px;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.ch-x:hover{background:rgba(255,255,255,.12)}
.ch-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ch-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#fff;-webkit-overflow-scrolling:touch}
.ch-note-top{font:400 13px/1.45 var(--sans);color:var(--muted);text-align:center;padding:0 6px 4px;max-width:640px;align-self:center}
.ch-note-top a{color:var(--green)}
/* bubbles keep a readable measure on the wide panel: 560px of 15px Nunito Sans is about 70 characters a line */
.ch-msg{max-width:min(88%,560px);padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--warm);color:var(--ink);font:400 15px/1.5 var(--sans);overflow-wrap:anywhere}
.ch-msg.me{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--green);color:#fff}
.ch-msg a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.ch-sys{font:400 13px/1.45 var(--sans);color:var(--muted);padding:0 4px}
.ch-sys a{color:var(--green)}
.ch-typing{display:inline-flex;gap:5px;align-items:center;height:20px}
.ch-typing i{width:7px;height:7px;border-radius:50%;background:var(--faint);animation:chdot 1.2s ease-in-out infinite}
.ch-typing i:nth-child(2){animation-delay:.15s}.ch-typing i:nth-child(3){animation-delay:.3s}
@keyframes chdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.ch-acts{display:flex;flex-wrap:wrap;gap:8px}
.ch-acts .btn.sm{min-height:44px}
.ch-acts .ch-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;background:#fff;color:var(--ink);border:1.5px solid var(--line-2);font:700 14px var(--sans);text-decoration:none}
.ch-acts .ch-link:hover,.ch-acts .ch-link:focus-visible{border-color:var(--green);background:var(--mint)}
/* suggested questions: a wrapping row of six (three follow-ups after an answer) plus "More questions", which reveals the hidden .qr-x chips;
   the row scrolls once it is taller than about a third of the panel so the log keeps its room */
.ch-qr{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px;flex:none;max-height:min(300px,38vh);overflow:auto}
.ch-qr:empty{display:none}
.qr{min-height:44px;padding:8px 14px;border-radius:999px;background:#fff;color:var(--ink);border:1.5px solid var(--line-2);font:700 14px var(--sans);cursor:pointer;text-align:left}
.qr:hover,.qr:focus-visible{border-color:var(--green);background:var(--mint)}
.qr[hidden]{display:none}
.qr-more{min-height:44px;padding:8px 14px;border-radius:999px;background:transparent;color:var(--green);border:1.5px dashed var(--line-2);font:700 14px var(--sans);cursor:pointer}
.qr-more:hover,.qr-more:focus-visible{border-color:var(--green);background:var(--mint)}
.qr-more[aria-expanded="true"]{border-style:solid;border-color:var(--green)}
.ch-in{display:grid;grid-template-columns:1fr 44px;gap:8px;align-items:end;padding:10px 16px;border-top:1px solid var(--line)}
.ch-in[hidden]{display:none}   /* while the start card or a fallback card is open (the grid display would otherwise beat the hidden attribute) */
.ch-in textarea{width:100%;min-height:44px;max-height:120px;resize:none;border:1.5px solid var(--line-2);border-radius:12px;padding:10px 12px;font:400 15px/1.4 var(--sans);color:var(--ink);background:#fff}
.ch-in textarea::placeholder{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* one line, trimmed, in a 44px box */
.ch-in textarea:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
.ch-in textarea:disabled{background:var(--warm);color:var(--muted)}
.ch-send{width:44px;height:44px;border:0;border-radius:12px;background:var(--orange);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.ch-send:hover{background:#ff7d47}
.ch-send:disabled{background:var(--t-grey);color:var(--ink);cursor:default}
.ch-note{font:400 13px/1.4 var(--sans);color:var(--muted);padding:0 16px 8px}
.ch-note[hidden]{display:none}
.ch-note a{color:var(--green)}
.ch-priv{font:400 13px/1.4 var(--sans);color:var(--ink-2);padding:0 16px 6px;margin:0}
.ch-priv a{color:var(--green);font-weight:700}
.ch-foot{font:400 13px/1.4 var(--sans);color:var(--muted);padding:0 16px 12px}
.ch-foot a{color:var(--green)}
/* the lead card and the fallback card are assistant-side cards in the log */
.ch-card{position:relative;max-width:100%;padding:14px;border-radius:16px;background:var(--warm);color:var(--ink);display:grid;gap:10px}
.ch-card h3{font:700 17px var(--display);letter-spacing:0}
.ch-card p{font:400 14px/1.45 var(--sans);color:var(--ink-2)}
.ch-card .hint{font-size:13px;color:var(--muted)}
.ch-card label{display:grid;gap:4px;font:700 14px var(--sans);color:var(--ink)}
.ch-card label small{font-weight:400;color:var(--muted)}
.ch-card input:not([type=checkbox]),.ch-card select,.ch-card textarea{width:100%;min-height:44px;padding:9px 12px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;font:400 15px var(--sans);color:var(--ink)}
.ch-card textarea{resize:vertical;min-height:72px}
.ch-card input:focus,.ch-card select:focus,.ch-card textarea:focus{outline:3px solid var(--green);outline-offset:1px;border-color:var(--green)}
.ch-card [aria-invalid="true"]{border-color:var(--red)}
.ch-card .ck{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font:400 14px/1.45 var(--sans);color:var(--ink-2);min-height:44px}
.ch-card .ck input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--green)}
.ch-card .ck a{color:var(--green);font-weight:700}
.ch-card .err{font:700 13px/1.4 var(--sans);color:var(--ink);background:var(--t-orange);border-radius:6px;padding:5px 8px}
.ch-card .err[hidden]{display:none}
.ch-card .btn.primary.sm{min-height:44px;justify-self:start}
.ch-card .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
/* the start card: one field and its error line per .ch-f cell; two columns on the wide panel (Name | Email, Phone | Existing client?, then
   Business type, consent and the button across both). Phones keep one column in the same order. */
.ch-f{display:grid;gap:6px;align-content:start;min-width:0}
@media (min-width:721px){
  .ch-start{grid-template-columns:1fr 1fr;column-gap:14px}
  .ch-start>h3,.ch-start>p,.ch-start>.ch-f2,.ch-start>.ck,.ch-start>button{grid-column:1/-1}
}
/* the Continue card for a returning visitor: "Continue as {first name}" (orange) · "Not you? Start fresh" (a link-styled button) */
.ch-cont .ch-acts{align-items:center}
.ch-card .ch-fresh{min-height:44px;padding:8px 6px;border:0;border-radius:8px;background:transparent;color:var(--green);font:700 14px var(--sans);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ch-card .ch-fresh:hover{color:var(--ink)}
.ch-card .ch-fresh:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* the start card's Yes / No pair (two radio buttons drawn as pills; ink text, so the tag rule holds) */
.ch-card .ch-yn{border:0;margin:0;padding:0;min-width:0;display:grid;gap:6px}
.ch-card .ch-yn legend{font:700 14px var(--sans);color:var(--ink);padding:0;margin-bottom:2px}
.ch-yn-row{display:flex;flex-wrap:wrap;gap:10px}
.ch-card .yn{position:relative;display:inline-block;font:700 15px var(--sans)}
.ch-card .yn input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ch-card .yn span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 18px;border:1.5px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.ch-card .yn span::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--muted);background:#fff;box-sizing:border-box;flex:none}
.ch-card .yn:hover span{border-color:var(--ink)}
.ch-card .yn input:checked+span{background:var(--t-mint);border-color:var(--ink)}
.ch-card .yn input:checked+span::before{border:5px solid var(--green)}
.ch-card .yn input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
.ch-card .yn input[aria-invalid="true"]+span{border-color:var(--red)}
/* system notices: a warning from the server (mode "warn"), the end of a blocked conversation, a wait */
.ch-sys.ch-warn{background:var(--t-orange);color:var(--ink);font:400 14px/1.45 var(--sans);padding:8px 12px;border-radius:10px;max-width:min(92%,560px)}
.ch-sys.ch-end{font-weight:700}
/* rich answers: the model's Markdown subset rendered by chat.js (escape first, then bold, italic, h3, lists, links to this site) */
.ch-md{font:400 15px/1.5 var(--sans)}
.ch-md>*+*{margin-top:8px}
.ch-md h3{font:700 15px/1.35 var(--display);color:var(--ink);letter-spacing:0;margin-top:10px}
.ch-md h3:first-child{margin-top:0}
.ch-md p{margin:0}
.ch-md ul,.ch-md ol{margin:0;padding-left:20px}
.ch-md li{margin:3px 0;padding-left:2px}
.ch-md li::marker{color:var(--green);font-weight:700}
.ch-md strong{font-weight:700;color:var(--ink)}
.ch-md em{font-style:italic}
.ch-md a{color:var(--green);text-decoration:underline;text-underline-offset:2px;font-weight:700;overflow-wrap:anywhere}
@media (max-width:720px){
  .chatp{inset:0;right:0;bottom:0;width:auto;height:100%;border-radius:0;z-index:72;transform:none;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .ch-msg{max-width:92%}
  .ch-qr{max-height:min(240px,30vh)}
}
@media (prefers-reduced-motion:reduce){
  .chatp{transition:none;transform:none}
  .ch-typing i{animation:none;opacity:.8}
}

/* Finvo AI version 3 (30 Oct 2026, night): the small "answered from our help notes" tag under a direct answer, the "Not now" link on the
   details card (question first, details second), and the one-line confirmation on the card for a known visitor or an expired conversation */
.ch-tag{display:inline-block;align-self:flex-start;margin:-4px 0 0 4px;padding:2px 8px;border-radius:999px;background:var(--t-mint);color:var(--green);font:700 12px/1.4 var(--sans)}
.ch-card .ch-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.ch-card .ch-skip{min-height:44px;padding:8px 6px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:700 14px var(--sans);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ch-card .ch-skip:hover{color:var(--ink)}
.ch-card .ch-skip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.ch-card p.ch-confirm{font-weight:700;color:var(--ink)}
@media (min-width:900px){.ch-start>.ch-row{grid-column:1/-1}}

/* ---------- utility pages: privacy, terms, accessibility and the generated /sitemap (31 Oct 2026) ----------
   Every rule is scoped to main.util, so nothing here can reach the shared header, footer, launcher or analytics notice. (The old /sitemap
   styled its list with an unscoped ".sm" class, which also matched the header's ".btn.sm" buttons and the notice's buttons: the logo
   vanished and "Client portal" stretched across the header. tools/qa.js chromeCheck now fails any page that does that.) */
main.util h1,main.util h2,main.util h3{text-wrap:balance}
main.util .u-hero{margin-top:calc(-1 * (var(--hdr) + var(--bar)));padding-top:calc(var(--hdr) + var(--bar) + clamp(24px,3.5vw,40px));padding-bottom:clamp(24px,3.5vw,40px);
  background:linear-gradient(180deg,#f4f2ed 0%,#f9f8f5 70%,#fff 100%)}
main.util .u-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,64px);align-items:start;margin-top:clamp(16px,2.6vw,28px)}
main.util .u-hero h1{margin-top:16px;font-size:clamp(34px,4.6vw,52px)}
main.util .u-upd{margin-top:14px;font:700 15px var(--sans);color:var(--muted)}
main.util .u-hero .lead{margin-top:18px;max-width:62ch}
main.util .u-hero .reassure{justify-content:flex-start;text-align:left}
@media (max-width:980px){main.util .u-hero-grid{grid-template-columns:1fr}}
/* "At a glance": the page in five lines (a summary; the full text below applies) */
main.util .glance{background:#fff;border-radius:var(--r-panel);box-shadow:var(--sh-panel);overflow:hidden}
main.util .glance-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:16px clamp(18px,2.4vw,26px);background:var(--green);color:#fff}
main.util .glance-h h2{font-size:20px;line-height:1.3;color:#fff}
main.util .glance-h p{font-size:15px;line-height:1.4;color:#fff}
main.util .glance dl{margin:0;padding:6px clamp(18px,2.4vw,26px) 12px}
main.util .glance dl>div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;padding:13px 0;border-top:1px solid var(--line)}
main.util .glance dl>div:first-child{border-top:0}
main.util .glance dt{font:700 15px/1.45 var(--display);color:var(--green)}
main.util .glance dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
main.util .glance dd a{color:var(--green);font-weight:700}
@media (max-width:520px){main.util .glance dl>div{grid-template-columns:1fr;gap:2px}}
/* the policy text: one readable column */
main.util .u-doc{max-width:760px;margin-inline:auto}
main.util .u-doc>section{scroll-margin-top:calc(var(--pin) + var(--pinh) + 16px)}
main.util .u-doc>section+section{margin-top:44px;padding-top:44px;border-top:1px solid var(--line)}
main.util .u-doc h2{font-size:clamp(26px,3vw,32px);line-height:1.2}
main.util .u-doc h3{font-size:20px;line-height:1.35;margin-top:30px}
main.util .u-doc p,main.util .u-doc li{font-size:18px;line-height:1.7;color:var(--ink-2)}
main.util .u-doc p{margin-top:14px;max-width:68ch}
main.util .u-doc ul{margin:14px 0 0;padding-left:22px;display:grid;gap:10px}
main.util .u-doc a{color:var(--green);font-weight:700;overflow-wrap:anywhere;text-underline-offset:3px}
main.util .u-doc b{color:var(--ink)}
main.util .u-doc p a[href^="tel:"],main.util .u-doc p a[href^="mailto:"]{display:inline;min-height:0}
main.util .u-note{margin-top:20px;padding:16px 20px;border-radius:var(--r-card);background:var(--warm);box-shadow:inset 4px 0 0 var(--orange);color:var(--ink)}
main.util .u-doc p.u-note{font-weight:700;color:var(--ink);max-width:none}
main.util .u-doc address{font-style:normal}
main.util .u-reach{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
main.util .u-reach>div,main.util .u-reach>a{display:block;padding:16px 20px;border-radius:var(--r-card);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);text-decoration:none;font-size:16px;line-height:1.55}
main.util .u-reach>a:hover{box-shadow:inset 0 0 0 2px var(--green)}
main.util .u-reach b{display:block;font:700 16px var(--sans);color:var(--ink)}
main.util .u-reach>a span{color:var(--green);font-weight:700}
@media (max-width:640px){main.util .u-doc p,main.util .u-doc li{font-size:17px}main.util .u-reach{grid-template-columns:1fr}}
/* tables (browser storage, page checks): labelled cards on phones */
main.util .u-tbl{width:100%;margin-top:18px;border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.5;border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
main.util .u-tbl caption{caption-side:top;text-align:left;font:700 17px/1.35 var(--display);color:var(--ink);padding:0 0 10px}
main.util .u-tbl th,main.util .u-tbl td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);color:var(--ink-2)}
main.util .u-tbl thead th{background:var(--warm);font:700 15px/1.3 var(--sans);color:var(--ink)}
main.util .u-tbl tbody th{font-weight:700;color:var(--ink)}
main.util .u-tbl tbody tr:last-child>*{border-bottom:0}
main.util .u-tbl code{font:700 15px var(--sans);color:var(--ink);overflow-wrap:anywhere}
main.util .u-tbl small{display:block;font-size:14px;color:var(--muted)}
@media (max-width:720px){
  main.util .u-tbl,main.util .u-tbl tbody,main.util .u-tbl tr,main.util .u-tbl td,main.util .u-tbl tbody th{display:block;width:100%}
  main.util .u-tbl{border:0;border-radius:0}
  main.util .u-tbl caption{display:block;width:100%}
  main.util .u-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  main.util .u-tbl tr{border:1px solid var(--line-2);border-radius:12px;padding:6px 0;margin-top:12px;background:#fff}
  main.util .u-tbl td,main.util .u-tbl tbody th{border:0;padding:6px 14px}
  main.util .u-tbl td[data-l]::before{content:attr(data-l);display:block;font:700 13px/1.3 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
}
/* "Your privacy choices": four working controls, each with its own confirmation line (aria-live) */
main.util .u-choices{margin-top:22px;padding:clamp(14px,2.6vw,24px);border-radius:var(--r-panel);background:var(--mint);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
main.util .cx{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r-card);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
main.util .u-doc .cx h3{margin:0;font-size:19px}
main.util .u-doc .cx p{margin:0;font-size:16px;line-height:1.55}
main.util .u-doc .cx p.cx-state{display:flex;align-items:center;gap:8px;font:700 15px/1.4 var(--sans);color:var(--ink)}
main.util .cx-state::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--faint)}
main.util .cx-state[data-on="true"]::before{background:var(--tick)}
main.util .cx-acts{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
main.util .cx{min-width:0}
main.util .cx .btn{min-height:44px;font-size:15px;padding:8px 16px;box-shadow:none;white-space:normal;text-align:center;max-width:100%}
main.util .u-doc .cx p.cx-done{font:700 15px/1.45 var(--sans);color:var(--green)}
main.util .u-doc .cx p.cx-done:empty{display:none}
main.util .cx-nojs{grid-column:1/-1}
html.js main.util .cx-nojs{display:none}
html:not(.js) main.util .cx .btn,html:not(.js) main.util .cx-state{display:none}
@media (max-width:760px){main.util .u-choices{grid-template-columns:1fr}}
/* sources, FAQ, related links, the booking band */
main.util .u-srcs{margin-top:44px;padding-top:28px;border-top:1px solid var(--line-2)}
main.util .u-srcs .srcline{font:700 16px var(--sans);color:var(--ink)}
main.util .u-srcs ol{margin:12px 0 0;padding-left:20px;display:block}
main.util .u-srcs li+li{margin-top:8px}
main.util .u-doc .u-srcs li,main.util .u-doc .u-srcs p{font-size:15px;line-height:1.55;margin:0}
main.util .u-doc .u-srcs p.srcs-note{margin-top:12px;color:var(--muted)}
main.util .faq summary{min-height:48px}
main.util .after{max-width:860px;margin:36px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding:20px 26px;border-radius:var(--r-card);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main.util .after .rel{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:16px}
main.util .after .rel a{display:inline-flex;align-items:center;min-height:44px;color:var(--green);font-weight:700}
main.util .u-book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,5vw,72px);align-items:center}
main.util .u-book h2{margin-top:16px}
main.util .u-book .lead{margin-top:14px;max-width:56ch}
@media (max-width:860px){main.util .u-book{grid-template-columns:1fr}}
/* /sitemap: a find box, section rows with counts, and readable link columns that stack on phones */
main.util .smap-find{max-width:640px;margin:26px auto 0;text-align:left}
main.util .smap-find label{display:block;font:700 15px var(--sans);color:var(--ink);margin-bottom:8px}
main.util .smap-box{position:relative}
main.util .smap-box svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
main.util .smap-box input{width:100%;min-height:54px;padding:12px 16px 12px 48px;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;font:400 17px var(--sans);color:var(--ink)}
main.util .smap-box input:focus{outline:3px solid var(--orange);outline-offset:2px;border-color:var(--green)}
main.util .smap-count{margin-top:10px;font-size:15px;color:var(--muted);min-height:22px}
main.util .smap-none{max-width:640px;margin:0 auto;padding:22px 24px;border-radius:var(--r-card);background:var(--warm);font-size:17px;color:var(--ink-2)}
main.util .smap-none a{color:var(--green);font-weight:700}
main.util .smap-sec{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px 48px;padding:30px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--pin) + var(--pinh) + 16px)}
main.util .smap-sec.first{border-top:0}
main.util .smap-sec>div{position:sticky;top:calc(var(--pin) + var(--pinh) + 28px);align-self:start}
main.util .smap-sec h2{font-size:24px;line-height:1.25;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
main.util .smap-n{display:inline-grid;place-items:center;min-width:32px;height:28px;padding:0 9px;border-radius:999px;background:var(--mint);font:700 14px var(--sans);color:var(--ink)}
main.util .smap-sec .smap-d{margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted)}
main.util .smap-sec ul{list-style:none;margin:0;padding:0;columns:3 230px;column-gap:36px}
main.util .smap-sec li{break-inside:avoid}
main.util .smap-sec li a{display:flex;align-items:center;min-height:44px;padding:6px 0;color:var(--green);font-weight:700;font-size:16px;line-height:1.35;text-decoration:none}
main.util .smap-sec li a:hover,main.util .smap-sec li a:focus-visible{text-decoration:underline;text-underline-offset:3px}
main.util .smap-sec[hidden],main.util .smap-sec li[hidden],main.util .ptabs li[hidden]{display:none}
@media (max-width:860px){main.util .smap-sec{grid-template-columns:1fr;gap:10px;padding:24px 0}main.util .smap-sec>div{position:static}main.util .smap-sec ul{columns:2 220px}}
@media (max-width:520px){main.util .smap-sec ul{columns:1}}

/* ---------- CALCULATOR REPORT (31 Oct 2026): the shared "Get your full breakdown" component, src/assets/calc-report.js ----------
   Markup each calculator gives: <div class="crep" id="report"><div class="crep-doc"> ...the detailed report... </div></div>.
   The component adds the letterhead (.crep-lh), the state bar with the print button (.crep-bar), wraps the document and the gate card in
   .crep-stage (one grid cell, so the card sits over the blurred document), and builds #crep-print when printing.
   While locked the document is blurred, faded, inert and aria-hidden (so the page checks skip it); the free summary never sits inside it.
   Report content is styled with the shared .rpt-* classes below, or with page rules that start at .crep-doc (never at #calculator or
   .calc-out), so the printed copy (a clone of the document at the end of <body>) keeps its look. */
.crep{position:relative}
.crep-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:16px}
.crep-state{display:flex;gap:10px;align-items:flex-start;max-width:760px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.crep-state .ic{flex:none;margin-top:3px;color:var(--green);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crep.is-open .crep-state .ic{display:none}
.crep.is-unsaved .crep-state{padding:10px 14px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.crep-print .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crep-print[hidden]{display:none}
.crep-stage{display:grid;grid-template-columns:minmax(0,1fr)}
.crep-stage>*{grid-area:1/1;min-width:0}
.crep-doc{background:#fff;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line),var(--sh-soft);padding:clamp(18px,4vw,48px);color:var(--ink)}
.crep-doc:focus{outline:none}
.crep-doc:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.crep.is-locked .crep-doc{max-height:640px;overflow:hidden;filter:blur(5px);user-select:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 45%,transparent 96%);mask-image:linear-gradient(#000 45%,transparent 96%)}
.crep-gate{align-self:start;justify-self:center;width:min(100%,600px);margin-top:clamp(16px,4vw,48px);position:relative;z-index:1}
.crep-gate[hidden]{display:none}
.crep-card{background:#fff;border-radius:var(--r-panel);box-shadow:var(--sh-float),inset 0 0 0 1px var(--line);padding:clamp(20px,3.5vw,34px)}
.crep-eye{display:inline-flex;gap:8px;align-items:center;font:800 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.crep-eye .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.crep-card h3{font-size:clamp(24px,3vw,30px);line-height:1.2;margin-top:10px}
.crep-lede{margin-top:10px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.crep-gets{margin-top:16px;gap:8px}
.crep-gets li{font-size:15px;color:var(--ink-2)}
.crep-f{margin-top:22px}
.crep-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
@media (max-width:560px){.crep-g{grid-template-columns:1fr}}
.crep-f .field label small{font-weight:400;color:var(--muted)}
.crep-f .field input,.crep-f .field select{font-size:16px}
.crep-f .field .err[hidden],.crep-f>.err[hidden]{display:none}
.crep-f>.err{margin:-4px 0 10px 34px;font-size:14px;color:var(--ink);background:var(--t-orange);font-weight:700;border-radius:8px;padding:6px 10px}
.crep-ck{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;min-height:44px;margin:4px 0 10px;font-size:15px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.crep-ck input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--green);cursor:pointer}
.crep-ck input:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.crep-ck input[aria-invalid="true"]{outline:2px solid var(--ink);outline-offset:2px}
.crep-ck a{font-weight:700;color:var(--green)}
.crep-ck small{display:block;font-size:14px;color:var(--muted)}
.crep .btn.go{background:var(--green);color:#fff;margin-top:8px;white-space:normal;box-shadow:var(--sh-btn)}
.crep .btn.go:hover{background:var(--green-600)}
.crep .btn.go:disabled{cursor:progress;background:var(--green-600)}
.crep-fine{margin-top:12px;font-size:15px;line-height:1.5;color:var(--muted)}
.crep-priv{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.crep-priv a{font-weight:700;color:var(--green);display:inline-block;padding:11px 0;margin:-11px 0}
/* after the details are sent: the "emailed you a link" line under the state line (31 Oct 2026, report by private link) */
.crep-mail{flex:1 0 100%;order:3;margin:-4px 0 0;padding:10px 14px;border-radius:10px;background:#d4ebdc;font-size:15px;line-height:1.5;color:var(--ink);max-width:760px}
.crep-mail[hidden]{display:none}
.crep .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* the letterhead */
.crep-lh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 28px;padding-bottom:18px;margin-bottom:26px;border-bottom:3px solid var(--green)}
.crep-lh-b{display:flex;align-items:center;gap:16px;min-width:0}
.crep-logo svg{display:block;height:30px;width:auto}
.crep-firm{display:grid;gap:2px;padding-left:16px;border-left:1px solid var(--line-2)}
.crep-firm b{font:700 16px/1.3 var(--display);color:var(--ink)}
.crep-firm span{font-size:14px;line-height:1.4;color:var(--muted)}
.crep-lh-m{display:grid;gap:2px;text-align:right}
.crep-lh-m b{font:700 18px/1.3 var(--display);color:var(--ink)}
.crep-lh-m span{font-size:14px;color:var(--muted)}
@media (max-width:900px){.crep-lh{flex-direction:column;align-items:flex-start}.crep-lh-m{text-align:left}}
@media (max-width:640px){.crep-lh-b{flex-wrap:wrap}.crep-firm{padding-left:0;border-left:0}}
/* shared report content: the line-by-line table, notes, next steps */
.crep-doc h3{font:700 20px/1.3 var(--display);color:var(--ink);margin-top:30px}
.crep-doc h3:first-child{margin-top:0}
.rpt-t{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums}
.rpt-t caption{text-align:left;font:700 18px/1.3 var(--display);color:var(--ink);padding:0 0 10px}
.rpt-t th,.rpt-t td{padding:10px 0 10px 16px;border-top:1px solid var(--line);text-align:right;vertical-align:top;color:var(--ink)}
.rpt-t th:first-child,.rpt-t td:first-child{text-align:left;padding-left:0}
.rpt-t thead th{font:700 14px/1.3 var(--sans);color:var(--muted);border-top:0;padding-top:0}
.rpt-t td+td{font-weight:700;white-space:nowrap}
.rpt-t td small{display:block;margin-top:2px;font-size:14px;line-height:1.45;font-weight:400;color:var(--muted);text-align:left;white-space:normal}
.rpt-t tr.sec th{padding-top:24px;font:800 13px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--green);text-align:left;border-top:0}
.rpt-t tr.tot td{font-weight:800;border-top:2px solid var(--ink)}
.rpt-t .ln{display:inline-block;min-width:52px;margin-right:10px;padding:1px 6px;border-radius:4px;background:var(--warm);font:600 13px/1.5 var(--display);color:var(--ink-2);text-align:center;vertical-align:1px}
@media (max-width:560px){
  .rpt-t,.rpt-t tbody,.rpt-t tr,.rpt-t td,.rpt-t th{display:block}
  .rpt-t thead{display:none}
  .rpt-t tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--line)}
  .rpt-t tbody tr.sec{border-top:0;padding:18px 0 2px}
  .rpt-t td,.rpt-t th,.rpt-t tr.tot td{border:0;padding:0}
  .rpt-t caption{display:block}
  .rpt-t tbody tr.tot{border-top:2px solid var(--ink)}
  .rpt-t .ln{display:table;margin:0 0 4px}
  .rpt-t.two tbody tr:not(.sec){grid-template-columns:repeat(2,minmax(0,1fr))}
  .rpt-t.two tbody tr td:first-child{grid-column:1/-1}
  .rpt-t.two td+td{text-align:left;white-space:normal}
  .rpt-t td[data-label]::before{content:attr(data-label);display:block;font:600 14px/1.4 var(--sans);color:var(--muted)}
}
.rpt-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px;margin-top:8px}
@media (max-width:820px){.rpt-cols{grid-template-columns:1fr;gap:20px 40px}}
.rpt-notes{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.rpt-notes li{position:relative;padding-left:18px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.rpt-notes li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.rpt-notes b,.rpt-next b{color:var(--ink)}
.rpt-next{margin:12px 0 0;padding-left:22px;display:grid;gap:8px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.rpt-notes a,.rpt-next a,.rpt-note a{font-weight:700;color:var(--green)}
.rpt-note{margin-top:18px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.rpt-note[hidden],.rpt-hh[hidden]{display:none}
.rpt-hh{margin-bottom:26px}
.rpt-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px;margin-top:14px}
.rpt-kv>div{padding:12px 14px;border-radius:12px;background:var(--warm);display:grid;gap:2px}
.rpt-kv span{font-size:14px;color:var(--muted)}
.rpt-kv b{font:700 20px/1.25 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
/* the printed report: only #crep-print, black on white, the letterhead keeps its green rule */
#crep-print{display:none}
@media print{
  .crep.is-locked .crep-stage{display:none}
  html.crep-printing body>*:not(#crep-print){display:none!important}
  html.crep-printing body{padding:0!important;margin:0;background:#fff!important}
  html.crep-printing #crep-print{display:block}
  #crep-print .crep-doc{box-shadow:none;border-radius:0;padding:0;max-height:none;filter:none;-webkit-mask-image:none;mask-image:none}
  #crep-print .crep-p-body *{color:#000!important;background:transparent!important;box-shadow:none!important;filter:none!important}
  #crep-print .crep-p-body .ln{border:1px solid #999}
  #crep-print tr{break-inside:avoid}
  #crep-print h2,#crep-print h3{break-after:avoid}
  .crep-p-note{margin:0 0 14px;font-size:12px;color:#333}
  .crep-p-h{font:700 17px/1.3 var(--display);margin:20px 0 6px;color:#000}
  .crep-p-t{width:100%;border-collapse:collapse;font-size:13px}
  .crep-p-t td{border-top:1px solid #bbb;padding:4px 0;color:#000}
  .crep-p-t td+td{text-align:right;font-weight:700}
  .crep-p-end{margin-top:22px;padding-top:12px;border-top:2px solid #000;font-size:13px;color:#000}
  .crep-p-end p+p{margin-top:6px}
  @page{margin:14mm}
}
/* Notice of Assessment upload card (31 Oct 2026; only on the page once tools/flags.py CALC["noaUpload"] is True) */
.noa-card{max-width:760px;background:#fff;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line);padding:clamp(20px,4vw,40px)}
.noa-card h2{margin-top:12px}
.noa-card .lead{margin-top:10px}
.noa-f{margin-top:22px}
.noa-f .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.noa-msg{margin-top:12px;font-size:15px;color:var(--ink-2)}
.noa-msg.bad{color:var(--ink);background:var(--t-orange);border-radius:8px;padding:6px 10px;font-weight:700}
.noa-msg[hidden]{display:none}
/* shared blocks (site audit, 4 Nov 2026; tools/build.py shared_blocks): the insurance referral disclosure, the form privacy line, the article byline */
.ins-disc{max-width:760px;margin:20px auto 0;padding:14px 16px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);text-align:left}
.ins-disc p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.ins-disc b{color:var(--ink);font-weight:700}
.ins-disc a{color:var(--green);font-weight:700}
.ins .ins-disc{margin:14px 0 0}
.form-priv{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.form-priv a{color:var(--green);font-weight:700;display:inline-block;padding:11px 0;margin:-11px 0}