/* ================= TOKENS ================= */
:root{
  /* Native controls — <select> popups, scrollbars, date pickers, autofill —
     are painted by the browser, not by this stylesheet. Without color-scheme
     the popup uses the light UA palette while the <option> text inherits our
     --text, so in dark mode a dropdown rendered light-on-white and was
     unreadable. Every select on the site was affected; it looked fine closed,
     because the closed control IS ours to style. */
  color-scheme:light;

  --navy-950:#040A1C;--navy-900:#081226;--navy-800:#0F1E3D;--navy-700:#1A2C52;
  --blue-700:#1D5FD6;--blue-600:#1D5FD6;--blue-500:#2E7BFF;--blue-400:#5B9CFF;--cyan-400:#22D3EE;--teal-400:#2DD4BF;--green-500:#22E39A;--purple-500:#7C5CFF;--orange-500:#F97316;--orange-600:#EA580C;--amber-400:#FBBF24;
  --success:#10B981;--warning:#F59E0B;--error:#EF4444;
  --grad-primary:linear-gradient(100deg,#1D5FD6 0%,#22D3EE 55%,#2DD4BF 100%);
  --grad-teal:linear-gradient(135deg,#1D5FD6 0%,#2DD4BF 100%);
  --grad-purple:linear-gradient(135deg,#2E7BFF 0%,#7C5CFF 100%);
  --grad-orange:linear-gradient(135deg,#F97316 0%,#FBBF24 100%);
  --grad-aurora:linear-gradient(120deg,#1D5FD6 0%,#22D3EE 35%,#2DD4BF 65%,#7C5CFF 100%);
  --font-display:'Manrope',sans-serif;--font-brand:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-body:'Inter',sans-serif;
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-full:999px;
  --ease-out:cubic-bezier(.22,.61,.21,1);--ease-spring:cubic-bezier(.34,1.42,.44,1);
  --dur-1:120ms;--dur-2:200ms;--dur-3:320ms;--dur-4:520ms;
}
[data-theme="dark"]{
  color-scheme:dark;

  --bg:#050B1E;--bg-2:#0A1428;--elev:#0C1830;
  /* Dropdowns/drawers use --surface-strong; .86 was too see-through on dark
     hero/ambient backgrounds and failed readable contrast on menu text. */
  --surface:rgba(15,28,56,.72);--surface-strong:rgba(10,18,40,.96);
  --text:#F2F6FF;--text-2:#A9B6D0;--text-3:#6E7D99;
  --border:rgba(160,190,255,.12);--border-strong:rgba(160,190,255,.24);
  --glass-hi:rgba(120,160,255,.14);
  --glass-blur:18px;--glass-blur-strong:24px;--glass-saturate:160%;
  --shadow-2:0 8px 24px -8px rgba(2,6,20,.6);--shadow-3:0 28px 56px -18px rgba(2,6,20,.72);
  --shadow-glow:0 0 44px -8px rgba(37,99,235,.35);--ring:rgba(37,99,235,.55);
  --grid-line:rgba(140,170,255,.05);
}
[data-theme="light"]{
  --bg:#F3F6FC;--bg-2:#FFFFFF;--elev:#FFFFFF;
  --surface:rgba(255,255,255,.78);--surface-strong:rgba(255,255,255,.98);
  --text:#0A1428;--text-2:#44536E;--text-3:#7B879C;
  --border:rgba(10,20,40,.1);--border-strong:rgba(10,20,40,.22);
  --glass-hi:rgba(255,255,255,.8);
  --glass-blur:18px;--glass-blur-strong:24px;--glass-saturate:160%;
  --shadow-2:0 8px 24px -8px rgba(10,20,40,.14);--shadow-3:0 28px 56px -18px rgba(10,20,40,.22);
  --shadow-glow:0 0 44px -8px rgba(30,58,138,.22);--ring:rgba(30,58,138,.5);
  --grid-line:rgba(10,20,40,.045);
}

/* ================= BASE ================= */
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip (not hidden) — hidden pairs with overflow-y:auto and kills
   position:sticky for article TOC/rail (and other sticky rails site-wide). */
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw;transition:background var(--dur-3) var(--ease-out),color var(--dur-3) var(--ease-out)}
main,section,.wrap,.nav-pill{max-width:100%}
#estimate{scroll-margin-top:90px}
.glance-card{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:stretch}
.glance-card-main{display:flex;flex-direction:column}
.spec-sheet{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface)}
.spec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-top:1px solid var(--border);position:relative}
.spec-row:first-child{border-top:none}
.spec-row::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:var(--r-full);background:var(--grad-primary);opacity:.5}
.spec-label{font-size:13px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;padding-left:14px}
.spec-value{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text)}
.spec-value-grad{font-size:clamp(20px,2.4vw,26px);font-weight:800;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.glance-card-side{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 28px;position:relative;overflow:hidden}
.glance-card-side::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-primary)}
.glance-list{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.glance-list li{font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:7px}
.glance-list li::before{content:"✓";color:var(--success);font-weight:700}
#estimate.est-collapsed{display:none}
.glance-extra{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.glance-extra .g-chip{font-size:12.5px;color:var(--text-2);background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--r-full);padding:7px 14px;display:flex;align-items:center;gap:6px}
.glance-extra .g-chip b{color:var(--text);font-family:var(--font-display)}
.req-table{display:flex;flex-direction:column;gap:1px;background:var(--border);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}
.req-row{display:flex;align-items:flex-start;gap:16px;padding:16px 20px;background:var(--surface)}
.req-type{flex:none;width:96px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:var(--r-full);text-align:center}
.req-type-registration{color:var(--blue-500);background:rgba(37,99,235,.12)}
.req-type-licence{color:var(--orange-500);background:rgba(249,115,22,.12)}
.req-type-compliance{color:var(--teal-400);background:rgba(45,212,191,.12)}
.req-body b{font-size:14px;display:block;margin-bottom:3px}
.req-body p{font-size:13px;color:var(--text-2)}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background var(--dur-3) var(--ease-out),color var(--dur-3) var(--ease-out)}
::selection{background:rgba(37,99,235,.35)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img,svg{display:block}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.grad-text{background:var(--grad-primary);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 7s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* v3.1.0 — the gradient is one brand element, so it should behave the same
   everywhere it appears. .grad-text (heading last word) animated while every
   button using the identical token sat static, which made them look like two
   different colours in motion. These now share background-size and timing. */
.grad-anim{background-size:220% auto;animation:gradShift 7s ease-in-out infinite}

/* Motion is decorative here — honour the OS preference for all of it, not
   just the heading. */
@media (prefers-reduced-motion:reduce){
  .grad-text,.btn-primary,.grad-anim,.pm-track i.on,.marquee-track{animation:none}
  .btn-primary{background-size:100% 100%}
}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue-600);color:#fff;padding:10px 18px;border-radius:0 0 12px 0;z-index:200}
.skip:focus{left:0}

/* ================= AURORA ANIMATION (CSS approximation of Framer-Motion aurora) ================= */
.aurora-bg{position:absolute;inset:-15% -10% auto -10%;height:150%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.5;
  background:
   radial-gradient(38% 45% at 18% 20%,rgba(29,95,214,.38),transparent 70%),
   radial-gradient(32% 38% at 82% 15%,rgba(34,211,238,.3),transparent 70%),
   radial-gradient(40% 40% at 55% 70%,rgba(45,212,191,.26),transparent 70%),
   radial-gradient(30% 34% at 30% 85%,rgba(124,92,255,.2),transparent 70%);
  animation:auroraShift 18s ease-in-out infinite alternate}
@keyframes auroraShift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(3%,-2%) scale(1.07)}}
.aurora-card{position:relative;isolation:isolate;overflow:hidden}
.aurora-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;
  background:var(--grad-aurora);background-size:260% 260%;animation:auroraBorder 9s ease infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}
.aurora-card::after{content:"";position:absolute;inset:-40%;z-index:-2;border-radius:50%;
  background:var(--grad-aurora);background-size:300% 300%;filter:blur(46px);opacity:.16;animation:auroraBorder 12s ease infinite}
@keyframes auroraBorder{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.aurora-bg,.aurora-card::before,.aurora-card::after{animation:none}}

/* ambient layered background */
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(1000px 560px at 88% -8%,rgba(37,99,235,.16),transparent 62%),
   radial-gradient(760px 460px at -12% 28%,rgba(34,211,238,.11),transparent 60%),
   radial-gradient(900px 560px at 55% 112%,rgba(124,92,255,.11),transparent 62%)}
.ambient::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(1200px 700px at 50% 0%,#000 30%,transparent 75%)}
.ambient::after{content:"";position:absolute;inset:-20%;
  background:conic-gradient(from 0deg at 50% 40%,transparent 0deg,rgba(37,99,235,.06) 40deg,transparent 90deg,rgba(34,211,238,.05) 200deg,transparent 260deg);
  animation:spin 70s linear infinite}
/* Homepage sets data-static — drop the continuous compositing layer entirely. */
.ambient[data-static]::after{content:none;animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ambient::after,.spark{animation:none}}
/* Pause decorative layers while the tab is backgrounded — continuous full-
   viewport compositing costs GPU for nothing when the page is unseen. */
html[data-tab-hidden] .ambient::after,html[data-tab-hidden] .spark{animation-play-state:paused}
.spark{position:fixed;width:5px;height:5px;border-radius:50%;background:var(--cyan-400);opacity:.35;z-index:-1;pointer-events:none;filter:blur(1px);animation:drift 16s ease-in-out infinite}
.spark:nth-child(2){left:12%;top:64%;animation-delay:-4s;background:var(--blue-500)}
.spark:nth-child(3){left:78%;top:22%;animation-delay:-9s}
.spark:nth-child(4){left:64%;top:78%;animation-delay:-12s;background:var(--purple-500)}
.spark:nth-child(1){left:26%;top:18%}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-34px)}}

/* ================= NAV ================= */
.nav{position:fixed;top:14px;left:0;right:0;z-index:100;transition:top var(--dur-3) var(--ease-out)}
.nav .wrap{display:flex;justify-content:center}
.nav-pill{display:flex;align-items:center;gap:6px;width:100%;max-width:1180px;
  background:var(--surface-strong);
  backdrop-filter:blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  border:1px solid var(--border);border-radius:var(--r-full);padding:10px 12px 10px 18px;
  box-shadow:var(--shadow-2),0 1px 0 rgba(255,255,255,.06) inset;
  transition:padding var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out)}
.nav.scrolled .nav-pill{padding:6px 10px 6px 16px;box-shadow:var(--shadow-3),0 1px 0 rgba(255,255,255,.06) inset}
/* ── Wordmark ────────────────────────────────────────────────────────────
   One rule, everywhere: Open Sans, with the K and the full stop bold and
   orange and "anoons" regular. The two orange glyphs are the mark; making
   the middle bold as well flattens it into an ordinary bold word.

   `--text` rather than a literal black for "anoons": the site has a dark
   theme, and #000 on a dark surface is invisible. In light mode --text
   resolves to near-black, which is the intent. */
.brand{display:flex;align-items:baseline;gap:0;font-family:var(--font-brand);font-weight:400;font-size:21px;letter-spacing:-.01em;margin-right:10px;color:var(--text)}
.brand-k{color:var(--orange-500);font-weight:700}
.brand-word{color:var(--text);font-weight:400}
.brand-dot{color:var(--orange-500);font-weight:700}
.brand-reg{font-size:9px;font-weight:700;margin-left:2px;color:var(--text);position:relative;top:-10px}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-link{position:relative;font-size:14px;font-weight:500;color:var(--text-2);padding:9px 12px;border-radius:var(--r-full);border:none;background:none;transition:all var(--dur-2) var(--ease-out);white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--text);background:var(--glass-hi)}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:10px}
/* The nav icon buttons were translucent but not glass: `--surface` is a
   semi-transparent fill, and without a backdrop-filter whatever sits behind
   shows through unblurred. Inside a glass nav pill that reads as a flat
   washed-out circle rather than a lens — most visible below 1020px, where
   these are most of what is left in the bar. Same blur/saturate the drawer,
   mega panel and app's bottom bar already use, plus the inner highlight that
   gives the edge its lift. */
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:inset 0 1px 0 var(--glass-hi);
  color:var(--text);display:grid;place-items:center;transition:all var(--dur-2) var(--ease-out)}
.icon-btn:hover{border-color:var(--border-strong);transform:translateY(-1px);
  background:color-mix(in srgb,var(--surface-strong) 92%,transparent)}
.kbd-hint{font-size:11px;color:var(--text-3);border:1px solid var(--border);border-radius:6px;padding:2px 6px;margin-left:6px}
[data-theme="dark"] .ic-sun{display:block}[data-theme="dark"] .ic-moon{display:none}
[data-theme="light"] .ic-sun{display:none}[data-theme="light"] .ic-moon{display:block}
.burger{display:none}

/* ================= MEGA MENU ================= */
.mega-trigger{display:flex;align-items:center;gap:5px}
.mega-trigger .car{width:11px;height:11px;transition:transform var(--dur-2) var(--ease-out)}
.mega-trigger[aria-expanded="true"] .car{transform:rotate(180deg)}
.mega-host{position:relative}
.mega-panel{position:fixed;top:74px;left:50%;transform:translateX(-50%) translateY(-8px);width:min(880px,92vw);
  background:var(--surface-strong);backdrop-filter:blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden;
  padding:22px 24px;z-index:1100;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),visibility var(--dur-3)}
.mega-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-primary)}
.mega-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;align-items:start}
.mega-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.mega-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.mega-col{padding:0}
.mega-col h4{position:relative;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);font-weight:800;margin:0 0 12px;padding-bottom:10px}
.mega-col h4::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;border-radius:var(--r-full);background:var(--grad-primary)}
.mega-item{display:block;font-size:13px;font-weight:500;color:var(--text-2);padding:6px 8px;margin:0 -8px;border-radius:8px;line-height:1.4;transition:all var(--dur-1)}
.mega-item:hover{background:var(--glass-hi);color:var(--text);transform:translateX(2px)}
.mega-guides{margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mega-guides .mg-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);font-weight:700}
.mega-guides a{font-size:12.5px;color:var(--blue-500);font-weight:600}
.mega-guides a:hover{text-decoration:underline}
.resources-panel{position:absolute;top:calc(100% + 10px);right:0;background:var(--surface-strong);backdrop-filter:blur(24px);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:10px;min-width:200px;z-index:1100;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility var(--dur-2)}
.resources-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.resources-panel a{display:block;font-size:13.5px;font-weight:500;color:var(--text-2);padding:9px 12px;border-radius:8px}
.resources-panel a:hover{background:var(--glass-hi);color:var(--text)}
.login-dd{position:relative}
.login-panel{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface-strong);backdrop-filter:blur(24px);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:8px;min-width:180px;z-index:1100;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility var(--dur-2)}
.login-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.login-panel a{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--text-2);padding:9px 12px;border-radius:8px}
.login-panel a:hover{background:var(--glass-hi);color:var(--text)}
.login-panel .lp-sub{font-size:11px;color:var(--text-3);display:block}
.login-panel{width:240px;min-width:0;padding:16px}
.mini-login-form{display:flex;flex-direction:column;gap:10px}
.mini-login-form label{font-size:11.5px;font-weight:600;color:var(--text-2);display:flex;flex-direction:column;gap:5px}
.mini-login-form input{font-family:inherit;font-size:13px;padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
.mini-login-form input:focus{outline:none;border-color:var(--blue-500)}
.mini-login-form input:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.mini-login-error{font-size:12px;color:var(--error);margin:0}
.mini-login-foot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.mini-login-foot a{font-size:11.5px;font-weight:600;color:var(--blue-500);padding:0}
.mini-login-foot a:hover{text-decoration:underline}

/* Account dropdown — replaces the Client Login trigger/panel in-place once a session exists,
   so the nav always reflects real auth state instead of always showing "Client Login". */
.acct-trigger{gap:8px;padding-left:6px}
.acct-avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  background:var(--grad-brand,linear-gradient(135deg,var(--blue-500),var(--teal-500,#0d9488)));color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;flex:none}
.acct-avatar.lg{width:38px;height:38px;font-size:14px}
.acct-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-panel-head{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.acct-panel-head b{display:block;font-size:13.5px;color:var(--text);line-height:1.3}
.acct-panel-head .lp-sub{margin-top:2px}
.acct-panel .acct-logout{display:flex;align-items:center;gap:8px;width:100%;font:inherit;font-size:13.5px;font-weight:500;
  color:var(--error);background:none;border:none;cursor:pointer;padding:9px 12px;border-radius:8px;text-align:left;margin-top:4px}
.acct-panel .acct-logout:hover{background:var(--glass-hi)}

/* Dashboard analytics cards — self-contained SVG/CSS charts (admin/staff/portal), no external
   chart library or CDN involved, so nothing here depends on network access. */
.chart-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
@media (max-width:860px){.chart-grid{grid-template-columns:1fr}}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-2)}
.chart-card h3{margin:0 0 16px;font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--text);display:flex;align-items:center;gap:8px}
.chart-card h3::before{content:'';width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--blue-500),var(--purple-500));display:inline-block}
.chart-wrap{position:relative;height:240px}
.chart-wrap.sm{height:180px}

/* ---- donut ---- */
.kchart-donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.kchart-donut{position:relative;flex:none}
.kchart-donut svg{width:100%;height:100%;transform:rotate(0deg)}
.kchart-donut-track{fill:none;stroke:var(--border)}
.kchart-donut-seg{fill:none;stroke-linecap:round;transition:stroke-dasharray .9s cubic-bezier(.16,1,.3,1)}
.kchart-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.kchart-donut-center b{font-size:26px;font-weight:800;color:var(--text);line-height:1.1;letter-spacing:-.01em}
.kchart-donut-center span{font-size:11px;color:var(--text-3);margin-top:2px;max-width:80px}
.kchart-legend{display:flex;flex-direction:column;gap:9px;min-width:150px;flex:1}
.kchart-legend-item{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2);padding:3px 4px;border-radius:8px;transition:background var(--dur-1,.15s)}
.kchart-legend-item:hover{background:var(--glass-hi)}
.kchart-legend-item i{width:9px;height:9px;border-radius:50%;flex:none}
.kchart-legend-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kchart-legend-item b{color:var(--text);font-weight:700;display:flex;align-items:baseline;gap:5px}
.kchart-legend-item b small{color:var(--text-3);font-weight:600;font-size:10.5px}

/* ---- bars ---- */
.kchart-bars{display:flex;flex-direction:column;gap:14px}
.kchart-bar-row{display:grid;grid-template-columns:118px 1fr 64px;align-items:center;gap:12px}
.kchart-bar-label{font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kchart-bar-track{height:10px;border-radius:var(--r-full);background:var(--surface-2,var(--glass-hi));overflow:hidden}
.kchart-bar-fill{height:100%;border-radius:var(--r-full);transition:width .85s cubic-bezier(.16,1,.3,1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.kchart-bar-value{font-size:12.5px;font-weight:700;color:var(--text);text-align:right;white-space:nowrap}
@media (max-width:520px){.kchart-bar-row{grid-template-columns:84px 1fr 52px}}

/* ---- line / area ---- */
.kchart-line-wrap{width:100%;opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
.kchart-line-wrap.kchart-in{opacity:1;transform:translateY(0)}
.kchart-line-svg{width:100%;height:220px;overflow:visible}
.kchart-grid-line{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4}
.kchart-line-path{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.kchart-line-dot{fill:var(--surface);stroke:var(--blue-500);stroke-width:2.5}
.kchart-axis-label{fill:var(--text-3);font-size:9.5px;font-family:inherit}

/* ================= CURSOR v2 — native always; custom only when JS activates =================
   Never set cursor:none by default. A deferred/failed initCursor used to hide the pointer
   with nothing to replace it (a11y + enterprise: cursor must always be usable).
   html.k-cursor-on is added only after the custom cursor successfully starts. */
.cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--blue-500);box-shadow:none;pointer-events:none;z-index:999;will-change:left,top;
  transition:opacity .2s,background .25s,transform .25s var(--ease-out),box-shadow .25s}
.cursor-dot.active{transform:scale(1.8);background:#fff;box-shadow:0 0 14px 3px rgba(37,99,235,.65),0 0 0 4px rgba(37,99,235,.3)}
.cursor-ring{position:fixed;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;z-index:998;
  border:1.5px solid rgba(148,163,184,.35);background:transparent;will-change:left,top,width,height;
  transition:border-color .3s,background .3s,box-shadow .3s}
.cursor-ring.active{border-color:var(--blue-500);background:rgba(37,99,235,.08);box-shadow:0 0 24px -2px rgba(37,99,235,.5)}
@media (hover:hover) and (pointer:fine){
  html.k-cursor-on body,
  html.k-cursor-on a,html.k-cursor-on button,html.k-cursor-on input,
  html.k-cursor-on select,html.k-cursor-on textarea,html.k-cursor-on [role="button"]{cursor:none}
/* Hide custom cursor while Razorpay Checkout is open. */
html.k-pay-open .cursor-dot,html.k-pay-open .cursor-ring{display:none!important}
html.k-pay-open,html.k-pay-open body,html.k-pay-open a,html.k-pay-open button,
html.k-pay-open input,html.k-pay-open select,html.k-pay-open textarea,html.k-pay-open [role="button"]{cursor:auto!important}
}
@media (hover:none),(pointer:coarse), (prefers-reduced-motion:reduce){
  html.k-cursor-on body,html.k-cursor-on a,html.k-cursor-on button,html.k-cursor-on input,
  html.k-cursor-on select,html.k-cursor-on textarea,html.k-cursor-on [role="button"]{cursor:auto}
  .cursor-dot,.cursor-ring{display:none!important}
}

/* ================= HERO — FLOATING DASHBOARD ================= */
.aurora{position:absolute;inset:-10% -10% auto -10%;height:140%;z-index:-1;pointer-events:none;filter:blur(60px);opacity:.55;
  background:
    radial-gradient(38% 45% at 18% 20%,rgba(37,99,235,.35),transparent 70%),
    radial-gradient(32% 38% at 82% 15%,rgba(34,211,238,.28),transparent 70%),
    radial-gradient(40% 40% at 55% 65%,rgba(124,92,255,.22),transparent 70%);
  animation:auroraShift 18s ease-in-out infinite alternate}
@keyframes auroraShift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(3%,-2%) scale(1.06)}}
.dash-card{position:relative;background:var(--surface-strong);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-3);padding:22px;overflow:visible}
.dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dash-head h3,.dash-head .dash-title{font-family:var(--font-display);font-size:14.5px;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0}
.dash-live{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--success);font-weight:700}
.dash-rows{display:flex;flex-direction:column;gap:9px}
.dash-row{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 13px}
.dash-row .di{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:13px;flex:none}
.dash-row .dtxt{flex:1;min-width:0}
.dash-row b{display:block;font-size:12.5px;font-weight:700}
.dash-row span{font-size:11px;color:var(--text-3)}
.dash-row .dbar{width:52px;height:4px;border-radius:3px;background:var(--border);overflow:hidden;flex:none}
.dash-row .dbar i{display:block;height:100%;background:var(--grad-primary);border-radius:3px}
.dash-row .dcount{font-size:11px;font-weight:700;flex:none;min-width:38px;text-align:right}
.dash-row .dcount.urgent{color:var(--error)}
.dash-row .dcount.ok{color:var(--success)}
.float-toast{position:absolute;display:flex;align-items:center;gap:9px;background:var(--surface-strong);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:var(--r-full);padding:10px 16px 10px 10px;box-shadow:var(--shadow-3);
  font-size:12.5px;font-weight:700;white-space:nowrap;opacity:0;animation:toastFloat 12s ease-in-out infinite}
.float-toast .ti{width:24px;height:24px;border-radius:50%;background:var(--success);color:#fff;display:grid;place-items:center;font-size:12px;flex:none}
.float-toast.t1{top:-16px;right:-24px;animation-delay:0s}
.float-toast.t2{bottom:22%;left:-38px;animation-delay:3s}
.float-toast.t3{bottom:-18px;right:8%;animation-delay:6s}
.float-toast.t4{top:40%;right:-30px;animation-delay:9s}
@keyframes toastFloat{0%{opacity:0;transform:translateY(10px) scale(.94)}8%{opacity:1;transform:translateY(0) scale(1)}22%{opacity:1;transform:translateY(0) scale(1)}30%{opacity:0;transform:translateY(-8px) scale(.96)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.aurora{animation:none}.float-toast{animation:none;opacity:0}}
@media (max-width:1119px){.float-toast{display:none}.mega-panel{left:16px;right:16px;transform:translateY(-8px);width:auto}.mega-panel.open{transform:none}.mega-grid{grid-template-columns:repeat(2,1fr);row-gap:20px;column-gap:20px}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:1100;visibility:hidden}
.drawer.open{visibility:visible}
.drawer .scrim{position:absolute;inset:0;background:rgba(2,6,20,.6);opacity:0;transition:opacity var(--dur-3)}
.drawer.open .scrim{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:var(--surface-strong);backdrop-filter:blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));-webkit-backdrop-filter:blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));border-left:1px solid var(--border);padding:24px;transform:translateX(100%);transition:transform var(--dur-3) var(--ease-out);overflow-y:auto}
.drawer.open .drawer-panel{transform:none}
.drawer-panel a,.drawer-panel button.dl{display:block;width:100%;text-align:left;font-size:16px;font-weight:600;font-family:var(--font-display);color:var(--text);padding:13px 10px;border:none;background:none;border-bottom:1px solid var(--border);min-height:48px}

/* v3.1.2 — mobile drawer corrections.

   `padding:24px` put the first link under the status bar and the last one
   under the iOS home indicator on a notched phone, so the top item was hard
   to hit and the bottom one was unreachable without an awkward scroll. The
   safe-area insets fix both. `overscroll-behavior:contain` stops a flick at
   the end of the drawer from scrolling the page behind it — the effect
   otherwise reads as the menu "leaking". */
.drawer-panel{
  padding-top:max(24px,env(safe-area-inset-top));
  padding-bottom:max(24px,env(safe-area-inset-bottom));
  padding-right:max(24px,env(safe-area-inset-right));
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* Scroll lock while the drawer or the search overlay is open. Without it the
   page scrolls under the panel and the visitor loses their place. */
body.nav-open{overflow:hidden}
/* The drawer's own close control, added alongside the scrim/Escape handlers —
   a right-hand off-canvas panel on a large phone can have its scrim entirely
   off-thumb, so there needs to be a control inside the panel too. */
/* The drawer's account block — one entry, not a "Client"/"Admin" pair. */
.drawer-account{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.drawer-account a.drawer-login{display:flex;align-items:center;justify-content:center;
  width:100%;min-height:48px;border-bottom:none;font-size:15px}
.drawer-login-sub{font-size:12.5px;color:var(--text-3);margin:10px 0 0;text-align:center}
.drawer-login-sub a{display:inline;width:auto;padding:0;border:none;font-size:12.5px;
  min-height:0;color:var(--blue-500);text-decoration:underline}
.drawer-acct-head{display:flex;align-items:center;gap:11px;padding:2px 10px 12px}
.drawer-acct-id{min-width:0}
.drawer-acct-id b{display:block;font-family:var(--font-display);font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-acct-id span{display:block;font-size:12px;color:var(--text-3)}

/* Section labels inside the drawer. Below 1020px the drawer is the only
   navigation there is, so it now carries the practice-area groups the desktop
   mega-menu exposes — 15 links need grouping to stay scannable. */
/* Appearance control inside the drawer. Below 1020px the drawer is the only
   navigation, so a setting that exists only in the nav pill does not exist. */
.drawer-theme{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;margin-bottom:6px;
  border:1px solid var(--border);border-radius:12px;background:var(--bg-2);color:var(--text);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
.drawer-theme:hover{border-color:var(--blue-500)}
.drawer-theme .ic-sun,.drawer-theme .ic-moon{flex:0 0 auto}
.drawer-theme-label{flex:1}
.drawer-heading{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin:18px 0 4px;padding:0 10px}
.drawer-heading:first-child{margin-top:0}
.drawer-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--text);display:grid;place-items:center}
.drawer-panel{padding-top:max(64px,calc(env(safe-area-inset-top) + 40px))}

/* ================= BUTTONS / BADGES ================= */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;border-radius:12px;padding:12px 22px;border:1px solid transparent;transition:all var(--dur-2) var(--ease-out);white-space:nowrap;cursor:pointer}
.btn .ic{width:17px;height:17px}
.btn-primary{background:var(--grad-primary);background-size:220% auto;color:#fff;box-shadow:0 8px 20px -8px rgba(29,95,214,.5);animation:gradShift 7s ease-in-out infinite;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),filter var(--dur-2) var(--ease-out)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(29,95,214,.6)}
.btn-glass{background:var(--surface);backdrop-filter:blur(14px);border-color:var(--border-strong);color:var(--text)}
.btn-glass:hover{background:var(--glass-hi);transform:translateY(-2px)}
.btn-outline{border-color:var(--border-strong);color:var(--text);background:transparent}
.btn-outline:hover{border-color:var(--blue-500);color:var(--blue-500)}
.btn-sm{font-size:13px;padding:8px 15px;border-radius:10px}
.btn-lg{font-size:16px;padding:15px 28px;border-radius:14px}
.btn-danger{background:transparent;border-color:var(--border-strong);color:var(--error)}
.btn-danger:hover{border-color:var(--error);background:rgba(239,68,68,.08)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 12px;border-radius:var(--r-full);border:1px solid}
.b-success{color:var(--success);border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.12)}
.b-warning{color:var(--warning);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12)}
.b-error{color:var(--error);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.12)}
.b-info{color:var(--blue-500);border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.12)}
.b-neutral{color:var(--text-2);border-color:var(--border-strong);background:var(--surface)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.dot.live{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500);background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.25);padding:6px 14px;border-radius:var(--r-full)}

/* ================= SECTIONS ================= */
section{padding:44px 0}
.sec-head{margin-bottom:26px;max-width:640px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin:14px 0 10px}
.sec-head p{color:var(--text-2);font-size:16.5px}
.sec-head .eyebrow{margin-bottom:0}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--rv-delay,0ms)}
/* A staggered child travels less than a whole block would: the movement reads
   as a sequence, and six cards each sliding 26px is restless rather than
   elegant. */
.reveal.reveal-child{transform:translateY(14px)}
.reveal.in{opacity:1;transform:none}
.page-head{padding:150px 0 40px;position:relative;overflow:hidden}
.page-head .aurora{opacity:.4}
.page-head .eyebrow{margin-bottom:14px}
.page-head h1{font-size:clamp(32px,4.4vw,48px);font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.page-head p{color:var(--text-2);font-size:16.5px;max-width:640px}
.breadcrumb{font-size:13px;color:var(--text-3);margin-bottom:14px}
.breadcrumb a:hover{color:var(--blue-500)}

/* ================= HERO ================= */
.hero{padding:168px 0 72px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,5.6vw,66px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin:22px 0 20px}
.hero .lead{font-size:18.5px;color:var(--text-2);max-width:520px;margin-bottom:30px}
.hero .eyebrow,.hero h1,.hero .lead{transition:opacity .22s ease}
.hero-dots{display:flex;gap:7px;margin:-8px 0 26px}
.hero-dot{width:22px;height:4px;border-radius:2px;border:none;background:var(--border-strong);cursor:pointer;padding:0;transition:background .25s,width .25s}
.hero-dot.on{background:var(--blue-500);width:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.hero-secondary-cta{font-size:13.5px;color:var(--text-3);margin:0 0 28px}
.hero-secondary-cta a{color:var(--blue-500);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-2)}
.hero-secondary-cta a:hover{border-bottom-color:var(--blue-500)}
.trust-row{display:flex;gap:26px;flex-wrap:wrap}
.trust{display:flex;flex-direction:column}
.trust b{font-family:var(--font-display);font-size:19px;font-weight:800}
.trust span{font-size:12.5px;color:var(--text-3)}
.trust .stars{color:var(--orange-500);letter-spacing:2px;font-size:13px}

/* ================= TRUST / PROOF STRIP (homepage CRO) ================= */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}
.proof-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 22px;text-decoration:none;color:inherit;transition:transform var(--dur-3) var(--ease-out),border-color var(--dur-2),box-shadow var(--dur-3)}
.proof-card:hover{transform:translateY(-4px);border-color:rgba(29,95,214,.35);box-shadow:var(--shadow-2)}
.proof-card h3{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em}
.proof-card p{font-size:13.5px;line-height:1.55;color:var(--text-2);margin:0;flex:1}
.proof-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.proof-card .card-link{margin-top:6px;font-size:13px}
.trust-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust-badge{display:flex;gap:12px;align-items:flex-start;background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 14px;transition:border-color var(--dur-2)}
.trust-badge:hover{border-color:rgba(29,95,214,.28)}
.tb-mark{width:22px;height:22px;border-radius:50%;background:rgba(16,185,129,.15);color:var(--success);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;margin-top:1px}
.trust-badge b{display:block;font-size:13px;font-weight:700;margin-bottom:2px}
.trust-badge span{font-size:12px;color:var(--text-3);line-height:1.4}
@media (max-width:1119px){
  .proof-grid{grid-template-columns:1fr}
  .trust-badges{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .trust-badges{grid-template-columns:1fr}
}

/* compliance pulse panel */
.pulse-card{background:var(--surface-strong);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-3);padding:26px;position:relative;overflow:hidden}
.pulse-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.pulse-head h3{font-size:16px;font-weight:700}
.feed{display:flex;flex-direction:column;gap:9px;min-height:172px}
.feed-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 14px;font-size:13px;animation:feedIn .5s var(--ease-out)}
@keyframes feedIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.feed-row .fico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.feed-row b{font-weight:600}
.feed-row .city{margin-left:auto;color:var(--text-3);font-size:12px;white-space:nowrap}
.pulse-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.pulse-stats div{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;text-align:center}
.pulse-stats b{display:block;font-family:var(--font-display);font-size:19px;font-weight:800}
.pulse-stats span{font-size:11px;color:var(--text-3)}

/* ================= TICKERS ================= */
.tickers{padding:0 0 40px}
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.testi-marquee{margin-top:32px}
.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.practice-card{background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-lg);padding:30px 26px;display:flex;flex-direction:column;transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-3) var(--ease-out)}
.practice-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:var(--border-strong)}
.practice-mark{width:44px;height:44px;border-radius:14px;margin-bottom:20px;box-shadow:var(--shadow-glow);display:flex;align-items:center;justify-content:center;color:#fff}
.practice-mark svg{width:22px;height:22px}
.practice-card h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px;font-family:var(--font-display)}
.practice-card p{font-size:13.5px;color:var(--text-2);line-height:1.55;flex:1;margin-bottom:20px}
.practice-foot{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--text-3);font-weight:600;padding-top:16px;border-top:1px solid var(--border)}
.marquee-track{display:flex;gap:0;width:max-content;animation:scroll 46s linear infinite;padding:6px 0;will-change:transform}
.marquee-track>*{flex:0 0 auto;margin-right:12px}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track.rev{animation-direction:reverse;animation-duration:58s}
@keyframes scroll{to{transform:translateX(-50%)}}
.ticker-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 14px -8px rgba(0,0,0,.35);
  font-size:13.5px;font-weight:600;white-space:nowrap;transition:all var(--dur-2)}
.ticker-chip:hover{border-color:var(--blue-500);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--shadow-glow);transform:translateY(-1px)}
.ticker-chip .ic{width:15px;height:15px;color:var(--cyan-400)}
[data-theme="light"] .ticker-chip{background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.3));border-color:rgba(15,23,42,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 14px -8px rgba(15,23,42,.15)}
.achieve-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:var(--r-lg);border:1px solid var(--border-strong);
  background:var(--surface);backdrop-filter:blur(10px);white-space:nowrap}
.achieve-chip .ac-stars{color:var(--orange-500);font-size:12px;letter-spacing:1px}
.achieve-chip .ac-main{display:flex;flex-direction:column;line-height:1.3}
.achieve-chip b{font-size:13px;font-weight:700}
.achieve-chip span{font-size:11px;color:var(--text-3)}
.achieve-chip .ac-city{margin-left:8px;padding-left:10px;border-left:1px solid var(--border);font-size:11px;color:var(--text-3);font-weight:600}

/* ================= SERVICES BENTO / GRID ================= */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc{background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;position:relative;transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-3) var(--ease-out);display:flex;flex-direction:column;height:100%;min-height:210px}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:var(--border-strong)}
.svc .svc-mark{width:30px;height:4px;border-radius:var(--r-full);background:var(--grad-primary);display:block;margin-bottom:18px}
.svc-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--grad-primary);display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0}
.svc-icon svg{width:20px;height:20px;color:#fff}
.svc h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;font-family:var(--font-display)}
.svc p{font-size:14px;color:var(--text-2);margin-bottom:18px;flex:1;line-height:1.5}
.svc-foot{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--text-3);margin-bottom:14px}
.svc-foot b{color:var(--text);font-family:var(--font-display)}
.svc .card-link{opacity:.85;transition:opacity var(--dur-2) var(--ease-out)}
.svc:hover .card-link{opacity:1}
.card-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue-500)}
.card-link .ic{width:14px;height:14px;transition:transform var(--dur-2) var(--ease-out)}
.svc:hover .card-link .ic{transform:translateX(3px)}
.svc .tagline{font-size:12px;color:var(--cyan-400);font-weight:600;margin-bottom:8px}
.popular-tag{position:absolute;top:16px;right:16px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--orange-500);background:rgba(249,115,22,.12);padding:3px 9px;border-radius:var(--r-full)}

/* ================= FILTER CHIPS / SEARCH INPUT ================= */
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.chip{font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:var(--r-full);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);transition:all var(--dur-2)}
.chip:hover,.chip.on{color:#fff;background:var(--grad-primary);border-color:transparent}
.search-input-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:22px}
.search-input{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-full);padding:11px 18px;font-size:14px;color:var(--text);font-family:inherit;min-width:240px;outline:none;transition:border-color var(--dur-2)}
.search-input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.search-input:focus{border-color:var(--blue-500)}
.result-count{font-size:13px;color:var(--text-3)}
.empty-state{border:1px dashed var(--border);border-radius:var(--r-lg);padding:36px;text-align:center;color:var(--text-3);font-size:14px}

/* ================= INDUSTRIES ================= */
.ind-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ind{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:20px 16px;text-align:center;transition:all var(--dur-2) var(--ease-out);cursor:pointer;display:block}
.ind:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.ind .ic{width:24px;height:24px;margin:0 auto 10px;color:var(--blue-500)}
.ind b{display:block;font-size:13.5px;font-family:var(--font-display)}
.ind span{font-size:11.5px;color:var(--text-3)}

/* ================= PROCESS ================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.steps::before{content:"";position:absolute;top:26px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,var(--blue-600),var(--cyan-400),var(--teal-400),var(--purple-500));opacity:.4}
.step{position:relative;text-align:left}
.step-num{width:52px;height:52px;border-radius:16px;background:var(--grad-primary);color:#fff;font-family:var(--font-display);font-weight:800;font-size:19px;display:grid;place-items:center;box-shadow:var(--shadow-glow);margin-bottom:18px;position:relative;z-index:1}
.step:nth-child(2) .step-num{background:var(--grad-teal)}
.step:nth-child(3) .step-num{background:var(--grad-purple)}
.step:nth-child(4) .step-num{background:linear-gradient(135deg,#F97316,#FBBF24)}
.step h3{font-size:17px;margin-bottom:7px}
.step p{font-size:13.5px;color:var(--text-2)}

/* ================= STATS ================= */
.stats-band{background:linear-gradient(var(--surface-strong),var(--surface-strong)) padding-box,var(--grad-primary) border-box;border:1px solid transparent;border-radius:var(--r-xl);padding:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;overflow:hidden}
.stats-band::after{content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;background:var(--grad-aurora);filter:blur(60px);opacity:.08;z-index:0;pointer-events:none}
.stat{position:relative;padding-top:14px;transition:transform var(--dur-2) var(--ease-out)}
.stat:hover{transform:translateY(-3px)}
.stat::after{content:"";position:absolute;top:0;left:0;width:28px;height:3px;border-radius:var(--r-full);background:var(--grad-primary)}
.stat:not(:first-child)::before{content:"";position:absolute;left:-12px;top:14px;bottom:4px;width:1px;background:var(--border)}
.stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.2vw,38px);letter-spacing:-.02em;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:12.5px;color:var(--text-2);font-weight:500}

/* ================= WHY ================= */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.why-stack{display:flex;flex-direction:column;gap:16px}
.why-card{background:var(--surface);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;display:flex;gap:16px;align-items:flex-start;transition:transform var(--dur-3) var(--ease-out)}
.why-card:hover{transform:translateX(8px)}
.why-card .ico-tile{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.why-card h4{font-size:15.5px;margin-bottom:4px}
.why-card p{font-size:13px;color:var(--text-2)}

/* ================= KNOWLEDGE (single-row slider) ================= */
.know-view-toggle{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);padding:3px;margin-left:auto}
.know-view-toggle button{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text-2);padding:6px 14px;border-radius:var(--r-full);background:none;border:1px solid transparent;transition:color var(--dur-2),border-color var(--dur-2)}
.know-view-toggle button svg{width:14px;height:14px}
.know-view-toggle button:hover:not(.on){color:var(--text)}
.know-view-toggle button.on{background:none;color:var(--blue-500);border-color:var(--border-strong)}
.know-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}

.know-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.know-grid.is-list{grid-template-columns:1fr;gap:12px}

/* ── Knowledge pagination ──────────────────────────────────────────────── */
.know-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:32px}
.know-pager .pg-nums{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:40px;min-height:40px;padding:0 12px;border-radius:var(--r-full);
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-size:13.5px;font-weight:650;font-family:var(--font-display);cursor:pointer;
  transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),
             background var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.pg-btn svg{width:15px;height:15px;display:block}
.pg-btn:hover:not(:disabled){color:var(--text);border-color:var(--border-strong);transform:translateY(-1px)}
.pg-btn:disabled{opacity:.4;cursor:default}
/* The current page is a statement, not a target — no hover lift. */
.pg-btn.on{color:#fff;background:var(--grad-primary);border-color:transparent}
.pg-btn.on:hover{transform:none}
.pg-gap{min-width:20px;text-align:center;color:var(--text-3);font-size:13.5px;user-select:none}
/* Prev/Next keep their words on desktop and shed them on a phone, where the
   arrows are unambiguous and the strip needs the room for page numbers. */
@media (max-width:520px){
  .pg-nav span{display:none}
  .pg-nav{padding:0 10px}
}

/* Card entrance, staggered by --kc-delay set per card at render time.
   `both` so a card is invisible until its turn rather than flashing in at full
   opacity and then animating. */
@keyframes kcEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.know-card.kc-enter{animation:kcEnter .42s var(--ease-out) both;animation-delay:var(--kc-delay,0ms)}
@media (prefers-reduced-motion:reduce){
  .know-card.kc-enter{animation:none}
}
.know-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2)}
.know-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:var(--border-strong)}
.know-grid.is-list .know-card{flex-direction:row;align-items:stretch}
.kc-thumb{position:relative;height:128px;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--kc-color,var(--blue-500)) 18%,var(--surface-strong)),color-mix(in srgb,var(--kc-color,var(--blue-500)) 6%,var(--surface-strong)));color:var(--kc-color,var(--blue-500));overflow:hidden;flex:none}
.kc-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.kc-thumb svg{width:34px;height:34px;opacity:.85;position:relative;z-index:1}
.kc-thumb-diff{position:absolute;top:10px;right:10px;background:var(--surface-strong);color:var(--kc-color,var(--blue-500));z-index:2}
.know-grid.is-list .kc-thumb{width:180px;height:auto}
.kc-top{padding:16px 18px 0}
.kc-cat{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--kc-color,var(--blue-500))}
.know-card h3{font-size:15px;font-weight:700;font-family:var(--font-display);color:var(--text);margin:6px 18px 8px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.know-card p{font-size:12.5px;color:var(--text-2);line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 18px 14px}
.know-grid.is-list .know-card p{-webkit-line-clamp:1}
.kc-foot{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-3);padding:12px 18px;border-top:1px solid var(--border)}
.know-grid.is-list .kc-foot{border-top:none;margin-top:auto}
.kc-arrow{margin-left:auto;display:flex;color:var(--text-3);transition:transform var(--dur-2),color var(--dur-2)}
.know-card:hover .kc-arrow{transform:translateX(4px);color:var(--kc-color,var(--blue-500))}
.krow-diff{flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2.5px 8px;border-radius:var(--r-full);color:var(--blue-500);background:rgba(37,99,235,.1)}
.kc-ext-badge{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;color:var(--text-3)}
@media (max-width:640px){.know-grid.is-list .know-card{flex-direction:column}.know-grid.is-list .kc-thumb{width:100%;height:110px}}
.art{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out),border-color var(--dur-3) var(--ease-out);display:flex;flex-direction:column;height:100%}
.art:hover{transform:translateY(-5px);box-shadow:var(--shadow-3);border-color:var(--border-strong)}
.art .thumb{height:96px;position:relative;background:var(--surface-strong);display:flex;align-items:center;justify-content:center;overflow:hidden}
.art .thumb::after{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--border-strong) 1px,transparent 1px);background-size:16px 16px;opacity:.55}
.art .thumb-accent{position:absolute;top:0;left:0;right:0;height:3px}
.art .thumb-abbr{position:relative;z-index:1;font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:.02em;color:var(--text-3);opacity:.55}
.art .art-diff{position:absolute;top:10px;right:10px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);background:var(--surface);border:1px solid var(--border-strong);padding:2.5px 8px;border-radius:var(--r-full);z-index:1}
.art .body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.art h3{font-size:16px;margin:9px 0 7px}
.art p{font-size:13px;color:var(--text-2);flex:1}
.art-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--text-3);margin-top:12px}
.art-rel-row{font-size:12px;color:var(--text-3);margin-top:10px}
.art-related{color:var(--blue-500);font-weight:600;text-decoration:none}
.art-related:hover{text-decoration:underline}
.art .card-link{margin-top:12px;font-size:12.5px}
/* Article reading surface — enterprise full-page layout (not a floating card shell).
   Soft UI polish stays on Summary / FAQ / inline CTA panels only. */
.page-head--article{padding-bottom:28px}
.page-head--article h1{max-width:920px}
.article-wrap{max-width:1200px}
.article-band{padding:8px 0 72px;border-top:1px solid var(--border);background:var(--bg)}
/* Default two columns (main + rail). `.has-toc` adds the sticky left nav. */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px 40px;align-items:start;max-width:none;margin:0;padding:28px 0 8px}
.article-layout.has-toc{grid-template-columns:200px minmax(0,1fr) 240px}
.article-main{min-width:0;max-width:none;width:100%;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.article-layout.has-toc .article-main{max-width:720px}
/* Legacy class kept as alias so any cached markup still unboxes */
.article-shell{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;position:static}
.article-shell::before{display:none}
.article-body{max-width:none;margin:0;padding:0;font-size:clamp(16.5px,1.1vw,17.5px);line-height:1.75;color:var(--text-2);letter-spacing:.005em}
.article-body p{margin:0 0 1.15em}
.article-body .article-lead{font-size:1.05em;line-height:1.7;color:var(--text);font-weight:500;margin:0 0 1.4em;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border)}
/* Sticky left TOC + right rail — both pin while the article scrolls */
.article-toc{position:sticky;top:96px;padding:4px 0 8px;align-self:start;max-height:calc(100vh - 112px);overflow:auto}
.article-toc[hidden]{display:none !important}
/* Soft article thumb above “On this page” — not a card; quiet corporate square */
.article-toc-thumb{margin:0 0 14px;padding:0;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--surface);aspect-ratio:1/1;max-width:168px}
.article-toc-thumb[hidden]{display:none !important}
.article-toc-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.article-toc-title{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:0 0 12px}
.article-toc-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:2px solid var(--border)}
.article-toc-list a{display:block;padding:6px 0 6px 12px;font-size:12.5px;line-height:1.4;font-weight:600;color:var(--text-3);text-decoration:none;border-left:2px solid transparent;margin-left:-2px;transition:color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.article-toc-list a:hover,.article-toc-list a:focus-visible{color:var(--text);border-left-color:var(--blue-500)}
.article-toc-list a:focus-visible{outline:3px solid color-mix(in srgb,var(--blue-500) 55%,transparent);outline-offset:2px}
/* Right rail — related + help (not a second article card) */
.article-rail{position:sticky;top:96px;align-self:start;display:grid;gap:18px;max-height:calc(100vh - 112px);overflow:auto}
.article-rail-block{padding:16px 16px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.article-rail-title{font-family:var(--font-display);font-size:.92rem;font-weight:800;color:var(--text);margin:0 0 10px;letter-spacing:-.01em}
.article-rail-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.article-rail-list a{display:block;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--text);text-decoration:none}
.article-rail-list a:hover{color:var(--blue-500);text-decoration:underline;text-underline-offset:3px}
.article-rail-list a:focus-visible{outline:3px solid color-mix(in srgb,var(--blue-500) 55%,transparent);outline-offset:2px;border-radius:4px}
.article-rail-meta{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--text-3)}
.article-rail-help p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--text-2)}
.article-rail-help .btn{width:100%;justify-content:center;margin-bottom:8px}
.article-rail-link{display:inline-block;font-size:12.5px;font-weight:600;color:var(--blue-500);text-decoration:none}
.article-rail-link:hover{text-decoration:underline;text-underline-offset:3px}
/* Soft-UI Summary callout — calm panel near the lede; never a bare “TL;DR” shout */
.article-summary{margin:0 0 1.5em;border:1px solid var(--border);border-radius:var(--r-md);background:color-mix(in srgb,var(--blue-500) 6%,var(--surface));overflow:hidden;position:relative}
.article-summary::before{content:"";position:absolute;inset:0 auto auto 0;width:4px;height:100%;background:var(--grad-primary);opacity:.9}
.article-summary-toggle{display:none;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:12px 16px 12px 18px;cursor:pointer;list-style:none;font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--text);user-select:none}
.article-summary-toggle::-webkit-details-marker{display:none}
.article-summary-toggle:focus-visible{outline:3px solid color-mix(in srgb,var(--blue-500) 55%,transparent);outline-offset:-3px}
.article-summary-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--text)}
.article-summary-eyebrow svg{color:var(--blue-500);flex:0 0 auto}
.article-summary-action{font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--blue-500);padding:6px 10px;border-radius:var(--r-full);border:1px solid color-mix(in srgb,var(--blue-500) 28%,var(--border));background:var(--surface-strong);min-height:32px;display:inline-flex;align-items:center}
.article-summary[open] .article-summary-action[data-when="closed"]{display:none}
.article-summary:not([open]) .article-summary-action[data-when="open"]{display:none}
.article-summary-panel{padding:18px 20px 18px 22px}
.article-summary-title{font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--text);margin:0 0 10px;letter-spacing:-.015em}
.article-summary-prose{margin:0 0 .75em !important;font-size:.98em;line-height:1.65;color:var(--text);font-weight:500}
.article-summary-list{margin:0 !important;padding-left:1.2em;display:grid;gap:.45em}
.article-summary-list li{margin:0 !important;color:var(--text-2);font-size:.95em;line-height:1.55}
.article-summary-list li::marker{color:var(--blue-500)}
.article-summary-list strong{color:var(--text)}
@media (max-width:720px){
  .article-summary-toggle{display:flex}
  .article-summary:not([open]) .article-summary-panel{display:none}
  .article-summary[open] .article-summary-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .article-summary[open] .article-summary-panel{padding-top:4px;border-top:1px solid var(--border)}
}
@media (min-width:721px){
  .article-summary{display:block}
  .article-summary-toggle{display:none !important}
  .article-summary-panel{display:block !important}
}
.article-body h2{font-family:var(--font-display);font-size:clamp(1.2rem,2.2vw,1.45rem);font-weight:800;color:var(--text);margin:2em 0 .65em;letter-spacing:-.02em;line-height:1.3;scroll-margin-top:96px}
.article-body h2:first-child,.article-body .article-summary+h2,.article-body .article-lead+h2{margin-top:.4em}
.article-body h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text);margin:1.6em 0 .55em;letter-spacing:-.015em;scroll-margin-top:96px}
.article-body ul{margin:0 0 1.25em;padding-left:1.35em}
.article-body li{margin-bottom:.45em;padding-left:.15em}
.article-body li::marker{color:var(--blue-500)}
.article-body strong{color:var(--text);font-weight:700}
.article-body a{color:var(--blue-500);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-2) var(--ease-out)}
.article-body a:hover{color:var(--blue-600,var(--blue-500))}
.article-body a:focus-visible{outline:3px solid color-mix(in srgb,var(--blue-500) 55%,transparent);outline-offset:3px;border-radius:4px}
.article-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 10px 24px -20px rgba(8,18,38,.4)}
.article-table-wrap:focus-visible{outline:3px solid color-mix(in srgb,var(--blue-500) 55%,transparent);outline-offset:2px}
.article-table{width:100%;min-width:420px;border-collapse:collapse;font-size:.92em;line-height:1.5}
.article-table th,.article-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.article-table th{background:color-mix(in srgb,var(--blue-500) 8%,var(--surface));color:var(--text);font-weight:700;white-space:nowrap;font-size:.85em;letter-spacing:.02em}
.article-table tr:last-child td{border-bottom:none}
.article-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface) 70%,transparent)}
[data-theme=dark] .article-table th{background:rgba(37,99,235,.14)}
.article-faqs{margin-top:2.2em;padding-top:.4em}
.article-faqs>h2{margin-bottom:.85em}
.article-faq-item{margin:0 0 10px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.article-faq-item[open]{border-color:var(--border-strong);box-shadow:0 10px 24px -20px rgba(8,18,38,.4)}
.article-faq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text);margin:0;padding:16px 18px;min-height:48px;transition:background var(--dur-2) var(--ease-out)}
.article-faq-q::-webkit-details-marker{display:none}
.article-faq-q:hover{background:var(--glass-hi)}
.article-faq-q:focus-visible{outline:3px solid color-mix(in srgb,var(--blue-500) 55%,transparent);outline-offset:-3px}
.article-faq-chev{flex:0 0 auto;color:var(--text-3);transition:transform var(--dur-2) var(--ease-out)}
.article-faq-item[open] .article-faq-chev{transform:rotate(180deg);color:var(--blue-500)}
.article-faq-a{padding:0 18px 16px;border-top:1px solid var(--border)}
.article-faq-a p{margin:.85em 0 0;font-size:.95em;line-height:1.7;color:var(--text-2)}
.article-cta{margin:2em 0 1.2em}
.article-cta-inner{padding:22px 22px 18px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);position:relative;overflow:hidden}
.article-cta-inner::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--grad-primary);opacity:.9}
.article-cta-inner h2{margin:8px 0 12px !important;font-size:1.2rem !important}
.article-cta-inner p{margin:0 0 .85em}
.article-cta-inner ul{margin:0 0 .85em}
.article-cta-inner a{font-weight:700}
.article-disclaimer-h{font-size:1rem !important;color:var(--text-3) !important;margin-top:2.4em !important}
.article-disclaimer{font-size:.88em !important;line-height:1.65 !important;color:var(--text-3) !important}
.article-meta-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:14px;font-size:13.5px;color:var(--text-3)}
.article-meta-row .dot{opacity:.45}
#related-articles{padding-top:8px;padding-bottom:48px;border-top:1px solid var(--border)}
/* Four related cards: 4-across on desktop, 2×2 below that (avoids a 3-wide orphan row) */
#related-articles .know-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){
  .article-layout,.article-layout.has-toc{grid-template-columns:minmax(0,1fr) 220px;gap:28px 28px}
  .article-toc{display:none}
  .article-main{max-width:none}
  #related-articles .know-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .article-layout,.article-layout.has-toc{grid-template-columns:1fr;gap:24px;padding-top:20px}
  .article-layout.has-toc .article-toc{display:block;position:static;order:-1;padding:0 0 4px}
  .article-toc-list{display:flex;flex-wrap:wrap;gap:6px 10px;border-left:none}
  .article-toc-list a{padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-sm);margin-left:0;border-left:1px solid var(--border);background:var(--surface);font-size:12px}
  .article-toc-list a:hover,.article-toc-list a:focus-visible{border-color:color-mix(in srgb,var(--blue-500) 40%,var(--border));border-left-color:color-mix(in srgb,var(--blue-500) 40%,var(--border))}
  .article-rail{position:static;order:2}
  .article-main{order:1;max-width:none}
}
@media (max-width:640px){
  .article-band{padding-bottom:48px}
  .article-body{padding:0;font-size:16px;line-height:1.7}
  .article-summary{border-radius:var(--r-md)}
  .article-summary-panel{padding:14px 14px 16px 18px}
  .article-table{min-width:340px;font-size:13px}
  .article-faq-q{padding:14px 14px;font-size:.95rem}
  .article-rail-block{padding:14px}
  #related-articles .know-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .article-faq-chev,.article-faq-item,.article-body a,.article-summary-action,
  .article-toc-list a,.article-rail-list a,.article-rail-link{transition:none}
}
.verified-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--success);background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);padding:4px 12px;border-radius:var(--r-full)}

/* ================= DUE DATES ================= */
.due-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.dd-tab-count{font-size:10.5px;font-weight:700;background:rgba(255,255,255,.22);border-radius:var(--r-full);padding:2px 8px;margin-left:1px;min-width:18px;text-align:center}
.seg button:not(.on) .dd-tab-count{background:var(--surface);color:var(--text-3);border:1px solid var(--border)}
@media (max-width:520px){#dd-tabs{max-width:none !important}}
.due-list{display:flex;flex-direction:column;gap:11px}
.due-row{display:flex;align-items:center;gap:16px;background:var(--surface);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--r-md);padding:15px 18px;transition:all var(--dur-2) var(--ease-out)}
.due-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.due-calendar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px}
.cal-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cal-head h3{font-size:17px;margin:0;flex:1;text-align:center;min-width:140px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%}
.cal-dow{margin-bottom:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);text-align:center}
.cal-cell{min-height:74px;border-radius:8px;border:1px solid var(--border);padding:6px;font-size:11px;display:flex;flex-direction:column;gap:2px;background:var(--elev);min-width:0;overflow:hidden}
.cal-cell.empty{border:none;background:transparent}
.cal-cell.today{border-color:var(--blue-500);box-shadow:0 0 0 1px var(--blue-500)}
.cal-cell.has-due{background:rgba(37,99,235,.06)}
.cal-daynum{font-weight:700;color:var(--text-2);font-size:12px}
.cal-item{display:block;background:var(--grad-primary);color:#fff;border-radius:4px;padding:1.5px 4px;font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-more{font-size:9.5px;color:var(--text-3)}
@media (max-width:700px){.cal-cell{min-height:52px;font-size:9px;padding:4px}.cal-item{font-size:7.5px;padding:1px 3px}.cal-daynum{font-size:10px}}
.due-cal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.due-cal-actions .btn{font-size:12px;padding:6px 12px}
.due-cross-sale{margin-top:32px}
.due-cross-sale .svc{min-height:0}
.svc-enquiry{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;margin-top:24px}
.svc-enquiry .wiz-form{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.svc-enquiry .wiz-form{grid-template-columns:1fr 1fr}.svc-enquiry .wiz-form .field:last-of-type,.svc-enquiry .wiz-form #enq-submit,.svc-enquiry .wiz-form #enq-status{grid-column:1/-1}}
/* Keep the badge in the DOM and painted — Google's execute() can fail when the
   badge is display:none / visibility:hidden. Park it off-screen instead. */
.grecaptcha-badge{
  position:fixed !important;
  left:-9999px !important;
  top:auto !important;
  bottom:14px !important;
  right:auto !important;
  width:70px !important;
  height:60px !important;
  opacity:0 !important;
  visibility:visible !important;
  pointer-events:none !important;
  overflow:hidden !important;
}
.due-cal-actions .btn-icon{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
/* Smaller only where the pointer is precise. Shrinking these unconditionally
   would take the touch target below what a thumb can hit — the control is
   oversized on a desktop mouse, not on a phone. */
@media (hover:hover) and (pointer:fine){
  .due-cal-actions .btn-icon{width:30px;height:30px}
  .due-cal-actions .btn-icon svg{width:14px;height:14px}
}
.due-row-cross{margin-top:8px;font-size:12.5px;color:var(--text-2)}
.due-row-cross a{font-weight:600;color:var(--blue-500)}
.pkg-govt-note{display:block;font-size:11px;font-weight:600;color:var(--text-3);margin-top:4px}
/* Package builder: selections left, running cost right.
   The estimate used to sit below the wizard, which put the number being
   decided on off-screen during the decision. The aside is sticky so it stays
   in view while the visitor works down the steps. */
.ind-builder{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:20px;align-items:start;margin-top:20px}
.ind-builder-side{position:sticky;top:96px;display:grid;gap:14px}
.ind-builder-side .ind-fee{margin-top:0}
.ind-builder-actions{display:flex;gap:12px;flex-wrap:wrap}
.ind-builder-actions .btn{flex:1 1 auto}
/* One column before the two get too narrow to read. Sticky is dropped with
   it — a sticky block in a single column just covers the content below. */
@media (max-width:980px){
  .ind-builder{grid-template-columns:1fr}
  .ind-builder-side{position:static}
}
.ind-wizard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;margin-top:20px}
.ind-builder-main .ind-wizard{margin-top:0}
.ind-wizard-steps{display:grid;gap:18px}
.ind-wiz-field label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.ind-wiz-options{display:flex;flex-wrap:wrap;gap:8px}
.ind-wiz-opt{font-size:13px;font-weight:600;padding:9px 14px;border-radius:var(--r-full);border:1px solid var(--border-strong);background:var(--surface);cursor:pointer}
.ind-wiz-opt.on{color:#fff;background:var(--grad-primary);border-color:transparent}
/* Live package fee under the industry configurator. Reuses .breakdown's rows
   so the figures read identically to the service page's estimator. */
.ind-fee{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px}
.ind-fee-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.ind-fee-head span{font-size:13px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.ind-fee-head b{font-family:var(--font-display);font-size:26px;font-weight:800}
.ind-fee .calc-note{margin:12px 0 0}

/* ── Resource Center ──────────────────────────────────────────────────────
   The page was a flat bento of seven identical cards in which three
   individual calculators sat at the same visual weight as "All calculators",
   their own parent. Three destinations at card weight, everything else as
   shortcuts. */
.res-search{display:flex;align-items:center;gap:10px;max-width:560px;margin-top:22px;
  padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--r-full);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow:inset 0 1px 0 var(--glass-hi);transition:border-color var(--dur-2)}
.res-search:focus-within{border-color:var(--blue-500)}
.res-search .ic{flex:none;color:var(--text-3)}
.res-search input{flex:1;min-width:0;min-height:48px;border:0;background:none;color:var(--text);
  font:500 15px/1 var(--font-body);outline:none}
.res-search input::-webkit-search-cancel-button{filter:grayscale(1)}

.res-primary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.res-primary{grid-template-columns:1fr}}

.res-shortcuts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.res-shortcuts-label{margin-right:4px;font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-3)}
.res-shortcuts .chip:hover{border-color:var(--blue-500);color:var(--text)}

.res-glossary{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.res-term{padding:18px 20px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);transition:border-color var(--dur-2)}
.res-term:hover{border-color:var(--border-strong)}
.res-term h3{font-size:15px;margin:0 0 5px}
.res-term p{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-2)}

/* Filtering hides items, then whole sections once nothing in them survives. */
[data-res-item][hidden],[data-res-section][hidden]{display:none!important}
@media (max-width:560px){
  .calc-in,.calc-out{padding:20px 16px}
  .calc-result{font-size:28px}
  .calc-tabs{gap:6px}
  .calc-tab{padding:8px 12px;font-size:12px}
  .wrap{padding:0 16px}
  .wiz-ov{padding:12px}
  .wiz-card{padding:20px 16px;max-height:92vh}
  .wiz-actions{flex-direction:column-reverse;align-items:stretch}
  .wiz-actions .btn{width:100%;justify-content:center}
  .est-shell,.spec-sheet,.glance-card,.pkg-detail-card{min-width:0}
  .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-wrap{-webkit-overflow-scrolling:touch}
  .svc-cta-band{padding:36px 20px}
}
.due-row:hover{border-color:var(--border-strong);transform:translateX(6px)}
.due-date-box{width:52px;height:52px;border-radius:13px;background:var(--bg-2);border:1px solid var(--border-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.due-date-box b{font-family:var(--font-display);font-size:19px;font-weight:800;line-height:1}
.due-date-box span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.due-row h4{font-size:14.5px}
.due-row .dmeta{font-size:12px;color:var(--text-3)}
.due-row .badge{margin-left:auto;flex:none}
.due-cta{background:linear-gradient(var(--surface-strong),var(--surface-strong)) padding-box,var(--grad-teal) border-box;border:1px solid transparent;border-radius:var(--r-xl);padding:28px}
.pkg-detail-card{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;max-width:820px;align-items:start}
.pkg-detail-main p#package-name{font-size:15px;color:var(--text-2);margin:10px 0 6px}
.pkg-detail-note{font-size:12.5px;color:var(--text-3);margin-bottom:18px}
.pkg-detail-main .btn{width:100%;justify-content:center}
.pkg-includes-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-3);margin-bottom:12px}
.glance-side-cta{width:100%;justify-content:center;margin-top:20px}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:start}
.contact-form-card,.contact-info-card{background:var(--surface);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px}
/* The card's heading had no margin at all, so "Email & social" sat directly on
   top of the first row with none of the separation the rest of the card uses
   between its own rows. The form card next to it gets this spacing from an
   inline margin-top on the <form>; the info card had nothing. */
.contact-info-card>h3{margin-bottom:20px}
.cinfo-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.cinfo-ic{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface-strong);border:1px solid var(--border);color:var(--blue-500)}
.cinfo-ic svg{width:17px;height:17px;display:block}
.cinfo-row b{display:block;font-size:13px;font-weight:700;margin-bottom:3px;font-family:var(--font-display);line-height:1.3}
.cinfo-row p{font-size:13.5px;color:var(--text-2);line-height:1.5}
.cinfo-row a{color:var(--text-2)}
.cinfo-row a:hover{color:var(--blue-500)}
.quick-contact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.qc-card{background:var(--surface);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:8px;transition:border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.qc-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.qc-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface-strong);border:1px solid var(--border);color:var(--blue-500)}
.qc-ic svg{width:17px;height:17px}
.qc-card b{font-size:14.5px;font-weight:700;font-family:var(--font-display)}
.qc-card p{font-size:12.5px;color:var(--text-2);line-height:1.45;margin:2px 0 4px}
.qc-link{font-size:13.5px;font-weight:700;color:var(--blue-500)}
.qc-link:hover{text-decoration:underline}
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:8px}
.office-card{background:var(--surface);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px}
.office-card b{display:block;font-size:16px;font-weight:800;font-family:var(--font-display);margin-bottom:8px}
.office-card>p{font-size:13.5px;color:var(--text-2);line-height:1.55;margin-bottom:10px}
.office-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);margin-top:14px}
.office-map iframe{width:100%;height:220px;border:0;display:block}
@media (max-width:760px){.quick-contact-strip,.office-grid{grid-template-columns:1fr}}
.contact-src-banner{display:flex;align-items:center;gap:10px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.3);color:var(--text);border-radius:var(--r-md);padding:12px 16px;margin-bottom:18px;font-size:13.5px}
.contact-map{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);margin-top:22px}
.contact-map iframe{width:100%;height:280px;border:0;display:block}
.due-cta h3{font-size:20px;margin-bottom:10px}
.due-cta p{font-size:14px;color:var(--text-2);margin-bottom:18px}
.svc-cta-band{background:linear-gradient(var(--surface-strong),var(--surface-strong)) padding-box,var(--grad-primary) border-box;border:1px solid transparent;border-radius:var(--r-xl);padding:52px 32px;text-align:center;max-width:720px;margin:0 auto}
.svc-cta-band .eyebrow{display:block;margin-bottom:10px}
.svc-cta-band h2{font-size:clamp(24px,3vw,32px);margin-bottom:14px}
.svc-cta-band p{font-size:15px;color:var(--text-2);max-width:560px;margin:0 auto}
.svc-cta-proof{font-size:12.5px !important;color:var(--text-3) !important;margin-top:4px !important}
.ladder{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.due-side{display:flex;flex-direction:column;gap:24px}
.notice-board{background:var(--surface);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px}
.notice-board h3{margin-bottom:14px}
.notice-item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.notice-item:first-of-type{border-top:none;padding-top:0}
.notice-tag{flex:none;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:var(--r-full);height:fit-content;margin-top:2px}
.notice-tag.update{color:var(--blue-500);background:rgba(37,99,235,.12)}
.notice-tag.deadline{color:var(--orange-500);background:rgba(249,115,22,.12)}
.notice-tag.scheme{color:var(--teal-400);background:rgba(45,212,191,.12)}
.notice-body b{display:block;font-size:13px;margin-bottom:2px}
.notice-body p{font-size:12px;color:var(--text-2);line-height:1.45}
.notice-body span{font-size:10.5px;color:var(--text-3)}
.ladder span{font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600}
.field label span{color:var(--text-3);font-weight:400;font-size:12px}
.input,select.input,textarea.input{background:var(--bg-2);border:1px solid var(--border-strong);border-radius:12px;padding:12px 14px;font-size:15px;color:var(--text);font-family:inherit;transition:border-color var(--dur-2),box-shadow var(--dur-2);width:100%}
/* color-scheme above is the real fix; this is the fallback for platforms
   that still paint <option> with the inherited colour instead of the
   scheme palette. Explicit values here can never be white-on-white. */
select.input option,select.input optgroup{background:var(--bg-2);color:var(--text)}
.input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(37,99,235,.22)}
textarea.input{resize:vertical;min-height:110px}

/* ================= CALCULATORS ================= */
.calc-hub{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start;padding-bottom:48px}
.calc-home-head{display:none}
.calc-picker{position:sticky;top:88px;background:var(--elev);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px;box-shadow:0 10px 28px -18px rgba(8,18,38,.45);max-height:calc(100vh - 110px);overflow:auto}
.calc-search{width:100%;margin-bottom:12px}
.calc-cats{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.calc-cats::-webkit-scrollbar{display:none}
.calc-cat{cursor:pointer;flex:0 0 auto;font-size:12px;font-weight:600;padding:8px 14px;min-height:36px;border-radius:var(--r-full);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.calc-cat:hover{color:var(--text);transform:translateY(-1px)}
.calc-cat.on{color:#fff;background:var(--grad-primary);border-color:transparent;box-shadow:0 6px 16px -6px rgba(30,58,138,.5)}
.calc-card-list{display:grid;grid-template-columns:1fr;gap:8px}
.calc-card{cursor:pointer;text-align:left;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .2s var(--ease-out),background .2s var(--ease-out);animation:calcCardIn .35s var(--ease-out) both;animation-delay:calc(var(--stagger,0)*.04s);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.calc-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(8,18,38,.1);border-color:var(--blue-400)}
.calc-card:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}
.calc-card.on{border-color:var(--blue-500);background:linear-gradient(180deg,rgba(46,123,255,.08),var(--surface));box-shadow:0 0 0 1px rgba(46,123,255,.35)}
.calc-card-ico{grid-row:1 / span 2;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(46,123,255,.1);color:var(--blue-500)}
.calc-card-ico.cat-payroll{background:rgba(34,227,154,.12);color:var(--green-500)}
.calc-card-ico.cat-loans{background:rgba(249,115,22,.12);color:var(--orange-500)}
.calc-card-ico.cat-invest{background:rgba(34,211,238,.12);color:var(--cyan-400)}
.calc-card-ico.cat-property{background:rgba(124,92,255,.12);color:var(--purple-500)}
.calc-ico{width:22px;height:22px}
.calc-card b{display:block;font-size:13.5px;font-family:var(--font-display);margin-bottom:2px;grid-column:2}
.calc-card small{display:block;font-size:12px;color:var(--text-3);line-height:1.35;grid-column:2}
.calc-empty{font-size:13px;color:var(--text-3);padding:12px 4px;grid-column:1/-1}
@keyframes calcCardIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.calc-chip{display:inline-flex;align-items:center;margin:8px 0 4px;padding:6px 12px;border-radius:var(--r-full);font-size:12.5px;font-weight:600;background:rgba(34,197,94,.12);color:var(--text);border:1px solid rgba(34,197,94,.35)}
.calc-meter{margin:14px 0 4px}
.calc-meter-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--elev);box-shadow:inset 0 1px 2px rgba(8,18,38,.08)}
.calc-meter-bar .a{background:var(--blue-500);transition:width .3s var(--ease-out)}
.calc-meter-bar .b{background:linear-gradient(90deg,var(--blue-400),#38bdf8);transition:width .3s var(--ease-out)}
.calc-meter-legend{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:11.5px;color:var(--text-3);font-weight:600}
.calc-meter-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.calc-meter-legend i.a{background:var(--blue-500)}
.calc-meter-legend i.b{background:#38bdf8}
.calc-workspace{min-width:0}
.calc-appbar{display:none;align-items:center;gap:10px;padding:10px 4px 14px;position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.calc-back{width:44px;height:44px;flex:0 0 44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .2s var(--ease-out),transform .2s var(--ease-out)}
.calc-back:active{transform:scale(.96)}
.calc-appbar-text{flex:1;min-width:0}
.calc-appbar-text h3{font-size:17px;margin:0;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calc-appbar-text p{font-size:12px;color:var(--text-3);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calc-appbar-reset{border:none;background:none;color:var(--blue-500);font-weight:700;font-size:13px;padding:10px 8px;min-height:44px;cursor:pointer}
.calc-shell{display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:"in out";gap:0;background:var(--elev);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;max-width:100%;box-shadow:0 18px 40px -28px rgba(8,18,38,.55)}
.calc-in{grid-area:in;padding:32px;border-right:1px solid var(--border);min-width:0}
.calc-out{grid-area:out;padding:32px;background:var(--surface);backdrop-filter:blur(14px);min-width:0;position:relative}
.calc-out::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--grad-primary);opacity:.85}
.calc-fields{display:grid;gap:16px}
.calc-result{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.02em;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px;transition:transform .25s var(--ease-out),opacity .25s var(--ease-out)}
.calc-result.pulse{animation:calcPulse .35s var(--ease-out)}
@keyframes calcPulse{0%{transform:scale(.97);opacity:.7}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .calc-card,.calc-cat,.calc-result,.calc-meter-bar .a,.calc-meter-bar .b,.calc-workspace{transition:none;animation:none !important}
  .calc-card:hover,.calc-cat:hover{transform:none}
}
.calc-out .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:6px}
.breakdown{margin-top:20px;border-top:1px dashed var(--border);padding-top:16px;display:flex;flex-direction:column;gap:9px}
.bd-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--text-2)}
.bd-row b{color:var(--text);font-family:var(--font-display);text-align:right}
/* Gross total — the line a visitor actually pays. Separated from the
   breakdown above it so GST reads as part of the sum, not another item. */
.bd-row-total{margin-top:10px;padding-top:12px;border-top:1px solid var(--border);font-size:15px;color:var(--text)}
.bd-row-total b{font-size:17px}
.calc-note{font-size:11.5px;color:var(--text-3);margin-top:16px}
.calc-error{margin-top:14px;padding:10px 14px;border-radius:10px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:var(--text);font-size:13px}
.calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.calc-detail-fold{margin-top:22px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);overflow:hidden}
.calc-detail-fold>summary{cursor:pointer;list-style:none;padding:16px 20px;font-size:13px;font-weight:700;font-family:var(--font-display);color:var(--text-2)}
.calc-detail-fold>summary::-webkit-details-marker{display:none}
.calc-detail-fold[open]>summary{border-bottom:1px solid var(--border);color:var(--text)}
.calc-detail{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:22px 24px}
.calc-detail-col h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:8px;font-family:var(--font-display)}
.calc-detail-col p{font-size:13px;line-height:1.6;color:var(--text-2)}
.calc-formula{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px !important;background:var(--elev);padding:10px;border-radius:8px;color:var(--text) !important}
@media (max-width:1020px){
  .calc-hub{grid-template-columns:1fr}
  .calc-picker{position:static;max-height:none}
}
@media (max-width:900px){
  .calc-shell{grid-template-columns:1fr;grid-template-areas:"out" "in"}
  .calc-in{border-right:none;border-top:1px solid var(--border)}
  .calc-detail{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.calc-detail{grid-template-columns:1fr}}

/* Mobile: native-app home grid + full-screen calculator sheet (calculators page only) */
@media (max-width:768px){
  body.calc-app-open{overflow:hidden}
  body.calc-app-open .nav{visibility:hidden;pointer-events:none}
  .calc-page .page-head{display:none}
  .calc-page .calc-hub{padding:calc(72px + env(safe-area-inset-top,0px)) 0 calc(24px + env(safe-area-inset-bottom,0px));gap:0}
  .calc-page .calc-home-head{display:block;margin-bottom:14px}
  .calc-page .calc-home-title{font-size:30px;letter-spacing:-.03em;margin:0 0 4px;font-family:var(--font-display)}
  .calc-page .calc-home-sub{font-size:13px;color:var(--text-3);margin:0}
  .calc-page .calc-picker{border:none;background:transparent;box-shadow:none;padding:0;border-radius:0}
  .calc-page .calc-search{min-height:48px;border-radius:14px;font-size:16px;margin-bottom:14px}
  .calc-page .calc-cats{margin-bottom:16px;gap:8px}
  .calc-page .calc-cat{min-height:40px;padding:10px 16px;font-size:13px}
  .calc-page .calc-card-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .calc-page .calc-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;text-align:center;padding:14px 8px 12px;min-height:108px;border-radius:18px;box-shadow:0 8px 20px -16px rgba(8,18,38,.35)}
  .calc-page .calc-card:active{transform:scale(.97)}
  .calc-page .calc-card-ico{grid-row:auto;width:48px;height:48px;border-radius:14px;margin-bottom:8px}
  .calc-page .calc-ico{width:24px;height:24px}
  .calc-page .calc-card b{font-size:12px;line-height:1.25;margin:0;grid-column:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .calc-page .calc-card small{display:none}
  .calc-page .calc-workspace{position:fixed;inset:0;z-index:120;background:var(--bg);padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));overflow:auto;-webkit-overflow-scrolling:touch;transform:translate3d(100%,0,0);opacity:0;pointer-events:none;transition:transform .28s var(--ease-out),opacity .22s var(--ease-out)}
  .calc-page .calc-hub.is-open .calc-workspace{transform:translate3d(0,0,0);opacity:1;pointer-events:auto}
  .calc-page .calc-appbar{display:flex;margin:0 -4px 8px;padding-top:2px}
  .calc-page .calc-shell{border:none;border-radius:0;box-shadow:none;background:transparent;grid-template-areas:"out" "in";gap:12px}
  .calc-page .calc-out{padding:18px 16px;border-radius:20px;border:1px solid var(--border);position:sticky;top:58px;z-index:2;box-shadow:0 12px 28px -20px rgba(8,18,38,.4)}
  .calc-page .calc-out::before{border-radius:20px 20px 0 0}
  .calc-page .calc-in{padding:18px 4px 8px;border:none}
  .calc-page .calc-fields{gap:14px}
  .calc-page .calc-fields .input,.calc-page .calc-fields select.input{min-height:48px;font-size:16px;border-radius:14px}
  .calc-page .calc-result{font-size:clamp(28px,8vw,36px)}
  .calc-page .calc-actions{position:sticky;bottom:0;padding:12px 0 calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--bg) 28%);margin-top:8px}
  .calc-page .calc-actions .btn{width:100%;justify-content:center;min-height:48px}
  .calc-page .calc-detail-fold{margin-top:8px;border-radius:16px}
  .calc-page .calc-detail{padding:16px;gap:16px}
  .calc-page.calc-app-open .page-head,.calc-page.calc-app-open footer{display:none}
}
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pkg-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column}
.pkg-card.featured{border-color:var(--blue-500);box-shadow:0 0 0 1px var(--blue-500),var(--shadow-2)}
.pkg-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--grad-primary);color:#fff;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 12px;border-radius:var(--r-full)}
.pkg-card h3{font-size:16px;margin-bottom:8px;font-family:var(--font-display)}
.pkg-price{font-family:var(--font-display);font-weight:800;font-size:24px;margin-bottom:16px;color:var(--text)}
.pkg-price-note{display:block;font-size:11px;font-weight:600;color:var(--text-3);margin-top:2px;letter-spacing:.02em}
.pkg-card .au-list{flex:1;font-size:13px}
@media (max-width:900px){.pkg-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pkg-grid{grid-template-columns:1fr}}
.est-shell{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--elev);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.est-in{padding:32px;border-right:1px solid var(--border);display:grid;gap:16px;align-content:start}
.est-out{padding:32px;background:var(--surface);backdrop-filter:blur(14px)}
@media (max-width:900px){.est-shell{grid-template-columns:1fr}.est-in{border-right:none;border-bottom:1px solid var(--border)}}
/* Simple two-state switch — no sliding indicator, so there's nothing that
   can misalign against variable-width button labels (see .dd-tabs-slider's
   history for why that's worth avoiding). Each button just has its own
   solid/ghost state. */
.seg{display:inline-flex;gap:6px;background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--r-full);padding:5px;box-shadow:inset 0 1px 2px rgba(2,6,20,.12)}
.seg button{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;font-size:13px;font-weight:600;padding:9px 14px;border-radius:var(--r-full);border:none;background:none;color:var(--text-2);transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);text-align:center;white-space:nowrap;cursor:pointer}
.seg button:hover:not(.on){color:var(--text);background:var(--surface)}
.seg button.on{background:var(--grad-primary);color:#fff;box-shadow:0 4px 12px -4px rgba(29,95,214,.5)}

/* ================= PORTAL / ADMIN ================= */
.portal-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.portal-mock{background:var(--surface-strong);backdrop-filter:blur(22px);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-3);overflow:hidden}
.pm-top{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface)}
.pm-dot{width:10px;height:10px;border-radius:50%}
.app-shell{display:grid;grid-template-columns:220px 1fr;gap:32px}
.app-side{display:flex;flex-direction:column;gap:4px}
.app-side a,.app-side button{display:block;width:100%;text-align:left;font-size:14px;font-weight:600;color:var(--text-2);padding:11px 14px;border-radius:12px;border:none;background:none}
.app-side a:hover,.app-side a.active{background:var(--surface);color:var(--text)}
.app-side .side-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);font-weight:700;padding:8px 14px 4px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:18px}
.stat-card b{display:block;font-family:var(--font-display);font-size:26px;font-weight:800}
.stat-card span{font-size:12px;color:var(--text-3)}
.engagement-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin-bottom:14px}
.pm-track{display:flex;gap:6px;margin:14px 0 10px}
.pm-track i{flex:1;height:5px;border-radius:3px;background:var(--border);font-style:normal}
.pm-track i.on{background:var(--grad-primary);background-size:220% auto;animation:gradShift 7s ease-in-out infinite}
.doc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--r-full);margin:3px 6px 3px 0}
.doc-chip.received{color:var(--success);background:rgba(16,185,129,.12)}
.doc-chip.requested{color:var(--warning);background:rgba(245,158,11,.12)}
table.data-table{width:100%;border-collapse:collapse;font-size:14px}
table.data-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:12px 14px;background:var(--surface)}
table.data-table td{padding:12px 14px;border-top:1px solid var(--border)}
table.data-table tr:hover td{background:var(--glass-hi)}
.table-wrap{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-bottom:24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid.full{grid-template-columns:1fr}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:14px}
.auth-shell{max-width:420px;margin:0 auto;padding:150px 24px 80px;position:relative}
.auth-toggle{display:flex;gap:8px;margin-bottom:24px;border:1px solid var(--border);border-radius:var(--r-full);padding:4px}
.auth-toggle button{flex:1;padding:10px;border-radius:var(--r-full);border:none;background:none;color:var(--text-2);font-weight:600;font-size:14px}
.auth-toggle button.on{background:var(--grad-primary);color:#fff}
.alert{padding:12px 16px;border-radius:var(--r-md);font-size:13.5px;margin-bottom:16px}
.alert-error{background:rgba(239,68,68,.1);color:var(--error);border:1px solid rgba(239,68,68,.3)}
.alert-info{background:rgba(29,95,214,.1);color:var(--blue-500);border:1px solid rgba(29,95,214,.3)}
.your-status-card{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:18px}
.your-status-row{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.alert-success{background:rgba(16,185,129,.1);color:var(--success);border:1px solid rgba(16,185,129,.3)}
.hint-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;font-size:13px;color:var(--text-2);margin-bottom:20px}
.hint-box code{background:var(--bg-2);padding:2px 6px;border-radius:6px;font-size:12px}

/* ================= TESTIMONIALS ================= */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:var(--surface);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;transition:transform var(--dur-3) var(--ease-out)}
.quote:hover{transform:translateY(-5px)}
.quote .stars{color:var(--orange-500);letter-spacing:2px;margin-bottom:14px;font-size:14px}
.quote blockquote{font-size:14.5px;line-height:1.65}
.quote .who{display:flex;gap:11px;margin-top:18px;align-items:center}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;flex:none}
.quote .who b{font-size:13.5px;display:block}
.quote .who span{font-size:12px;color:var(--text-3)}
.review-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.quote-sm{flex:0 0 300px;padding:11px 14px;scroll-snap-align:start;display:flex;align-items:center;gap:10px}
.quote-sm .stars{display:none}
.quote-sm blockquote{font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.quote-sm .who{margin-top:0;gap:7px;flex:none}
.quote-sm .avatar{width:24px;height:24px;font-size:10px}
.quote-sm .who b{font-size:11.5px}
.quote-sm .who span{display:none}

/* Service-page client review cards (v3) — profile-first layout, distinct from both
   the homepage ticker's .quote-sm and the earlier round-4 .rev-tile design */
.review-col{display:flex;flex-direction:column;gap:14px}
.rev-card{position:relative;display:flex;gap:16px;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;background:var(--surface);overflow:hidden;transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2)}
.rev-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:var(--border-strong)}
.rev-card::before{content:"\201C";position:absolute;top:-22px;right:14px;font-family:Georgia,serif;font-size:96px;line-height:1;color:var(--blue-500);opacity:.07;pointer-events:none}
.rev-card-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:14px;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--border)}
.rev-card-body{flex:1;min-width:0;position:relative}
.rev-card-top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.rev-card-stars{font-size:12px;color:var(--blue-500)}
.rev-card-verified{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--success)}
.rev-card-verified svg{width:11px;height:11px}
.rev-card blockquote{font-size:13.5px;line-height:1.55;color:var(--text-2)}
.rev-card-who{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.rev-card-who b{font-size:13px;color:var(--text)}
.rev-card-who span{font-size:11.5px;color:var(--text-3)}

/* ================= FAQ ================= */
.faq-wrap{max-width:780px;margin:0 auto}
.acc{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);backdrop-filter:blur(14px)}
.acc-item{border-bottom:1px solid var(--border)}
.acc-item:last-child{border:none}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:transparent;border:none;color:var(--text);font-size:15.5px;font-weight:600;text-align:left;font-family:var(--font-display)}
.acc-btn .ic{transition:transform var(--dur-3) var(--ease-out);flex:none;color:var(--text-3)}
.acc-item.open .acc-btn .ic{transform:rotate(180deg);color:var(--blue-500)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height var(--dur-3) var(--ease-out)}
.acc-panel p{padding:0 22px 18px;font-size:14px;color:var(--text-2)}

/* ================= CTA ================= */
.cta-band{background:var(--navy-900);border-radius:var(--r-xl);padding:64px 48px;text-align:center;position:relative;overflow:hidden;color:#F2F6FF}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% -20%,rgba(37,99,235,.4),transparent 70%),radial-gradient(500px 260px at 85% 120%,rgba(34,211,238,.25),transparent 70%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(28px,4vw,44px);font-weight:800;margin-bottom:14px}
.cta-band p{color:#A9B6D0;max-width:520px;margin:0 auto 30px}
.cta-band .btn-glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}

/* ================= FOOTER ================= */
footer{position:relative;border-top:1px solid var(--border);padding:56px 0 28px;margin-top:32px;background:var(--surface)}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--grad-primary);opacity:.7}
/* v3.1.4 — footer column sizing.
   The brand column was 1.5fr against 1fr link columns, so it took ~30% of the
   row and squeezed the four link lists until longer labels ("Summons &
   Notices", "Refund & Returns Policy") wrapped onto two lines while short ones
   left dead space. The result read as misaligned rather than deliberate.
   1.25fr keeps the brand block comfortable for its paragraph and newsletter
   form without starving the lists, and the last column gets a little extra for
   the address block. `align-items:start` stops a tall column stretching the
   others. */
.foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px 24px;margin-bottom:28px;align-items:start}
.foot-grid-5{grid-template-columns:repeat(5,1fr)}
/* Link columns must not be wider than their content needs; without this the
   grid distributes leftover space unevenly when one list is much longer. */
.foot{min-width:0}
.foot-brand p{font-size:13.5px;color:var(--text-2);margin:10px 0 18px;max-width:220px}
.foot-tagline{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text);margin:12px 0 6px !important;max-width:none !important}
.foot-tagline-sep{color:var(--text-3);font-weight:400;margin:0 2px}
.foot h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border);font-family:var(--font-display)}
.foot a{display:block;font-size:13.5px;color:var(--text-2);padding:5px 0;transition:color var(--dur-1),transform var(--dur-1)}
.foot a:hover{color:var(--blue-500);transform:translateX(2px)}
/* Six icons on ONE line.
   They wrapped to two rows in the footer's 207px column: 6x34px + 5x10px gaps
   needs 254px. Rather than shrink them unconditionally — 34px is already under
   the 44px tap-target guidance — they now flex-shrink only as far as the
   column demands, with a 26px floor, and sit back at 34px wherever there is
   room (the footer goes to one and two columns below 1120px).
   .foot-place-menu is position:absolute, so nowrap does not affect it. */
.foot-social{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:18px}
.foot-social a{display:grid;place-items:center;border-radius:var(--r-full);border:1px solid var(--border);color:var(--text-2);transition:all var(--dur-2) var(--ease-out);padding:0}
.foot-social a:hover{color:#fff;border-color:var(--blue-500);background:var(--blue-500)}
/* One pin for both offices. The menu lists Upperpally and Amberpet. */
.foot-place{position:relative}
.foot-place summary{display:grid;place-items:center;border-radius:var(--r-full);border:1px solid var(--border);color:var(--text-2);cursor:pointer;list-style:none;padding:0}
.foot-place summary::-webkit-details-marker{display:none}
.foot-place summary:hover{color:#fff;border-color:var(--blue-500);background:var(--blue-500)}
/* Sizing comes from flex, shape from aspect-ratio — set AFTER the appearance
   rules above, which previously fixed 34x34 and, at equal specificity, won on
   source order: the icons shrank in width but kept a 34px height and rendered
   as ovals. */
.foot-social>a,.foot-social>.foot-place{flex:0 1 34px;min-width:26px}
.foot-social>a{height:auto;aspect-ratio:1}
.foot-place>summary{width:100%;height:auto;aspect-ratio:1}
.foot-place-menu{position:absolute;z-index:6;right:0;bottom:calc(100% + 8px);flex-direction:column;gap:4px;width:min(240px,calc(100vw - 16px));padding:6px;background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-2)}
.foot-place[open] > .foot-place-menu{display:flex}
.foot-place:not([open]) > .foot-place-menu{display:none}
.foot .foot-place-menu a,.foot-social .foot-place-menu a{display:block;width:auto;height:auto;min-height:44px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;font-size:13px;font-weight:650;line-height:1.35;white-space:normal}
.foot .foot-place-menu a:hover,.foot-social .foot-place-menu a:hover{color:var(--text);background:var(--glass-hi);border-color:transparent;transform:none}
/* Replaces the old footer newsletter form, which had onsubmit="return false"
   and silently discarded every address typed into it. Honest CTA until a real
   subscribe endpoint exists. */
.foot-newsletter-note{max-width:none}
.foot-newsletter-note p{font-size:13px;color:var(--text-2);margin-bottom:10px}
.foot-newsletter{display:flex;gap:8px;max-width:none}
.foot-newsletter input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-family:inherit}
.foot-address{font-size:13.5px;color:var(--text-2);line-height:1.5;margin-bottom:10px;max-width:220px}
.foot-contact a{padding:3px 0}
.foot-phone{display:block;white-space:nowrap;font-size:13.5px;color:var(--text-2);padding:3px 0}
.foot-phone a{display:inline;padding:0;color:var(--text-2)}
.foot-phone a:hover{color:var(--blue-500)}
.foot-contact .foot-social{margin-top:14px;margin-bottom:0}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3);padding-top:20px;margin-top:24px;border-top:1px solid var(--border)}
.foot-bottom span:first-child{color:var(--text-2);font-weight:600}
.foot-legal-block{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.foot-legal{font-size:11.5px;line-height:1.75;color:var(--text-3);max-width:none;text-align:justify;text-align-last:left;margin:0 0 12px}
.foot-legal:last-child{margin-bottom:0}
.foot-legal a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.foot-legal a:hover{color:var(--blue-500)}
@media (max-width:1119px){
  /* Brand spans the full width so its paragraph and newsletter form have room;
     the four link lists then sit as an even 2x2 beneath it. */
  .foot-grid,.foot-grid-5{grid-template-columns:1fr 1fr;gap:28px 24px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .foot-grid,.foot-grid-5{grid-template-columns:1fr}
  .foot-brand p,.foot-newsletter-note{max-width:none}
}

/* ================= SEARCH OVERLAY ================= */
.search-ov{position:fixed;inset:0;z-index:1100;display:flex;justify-content:center;padding:12vh 24px 0;visibility:hidden}
.search-ov.open{visibility:visible}
.search-ov .scrim{position:absolute;inset:0;background:rgba(2,6,20,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity var(--dur-3)}
.search-ov.open .scrim{opacity:1}
.search-panel{position:relative;width:100%;max-width:620px;height:fit-content;background:var(--surface-strong);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-3);overflow:hidden;transform:translateY(-14px) scale(.98);opacity:0;transition:all var(--dur-3) var(--ease-out)}
.search-ov.open .search-panel{transform:none;opacity:1}
.search-head{display:flex;align-items:center;gap:12px;margin:0;padding:16px 20px;border-bottom:1px solid var(--border)}
.search-head .ic{width:19px;height:19px;color:var(--text-3)}
.search-head input{flex:1;border:none;background:none;color:var(--text);font-size:16px;outline:none;font-family:inherit}
.search-head input:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
.search-body{max-height:52vh;overflow-y:auto;padding:10px}
.sg-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);cursor:pointer;font-size:14px}
.sg-item.sel,.sg-item:hover{background:var(--glass-hi)}
.sg-item .type{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--border);border-radius:6px;padding:2px 7px}
.sg-empty{padding:26px;text-align:center;color:var(--text-3);font-size:13.5px}
.site-search-results{display:flex;flex-direction:column;gap:22px}
.site-search-results h2{font-size:20px;margin:0}
.site-search-results ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-search-results a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 14px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit}
.site-search-results a:hover{border-color:var(--blue-500)}
.site-search-results small{color:var(--text-3);font-size:13px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface-strong);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r-full);padding:12px 22px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-3);z-index:300;opacity:0;transition:all var(--dur-3) var(--ease-out);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= NOTIFICATIONS BELL ================= */
.notif-dd{position:relative}
.module-dd{position:relative}
.module-trigger{min-height:38px;display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);color:var(--text-2);padding:4px 11px;font:700 12px/1 var(--font-body)}
.module-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--blue-600) 12%,transparent);color:var(--blue-600);font:800 12px/1 var(--font-display)}
.module-panel{position:fixed;top:0;right:12px;width:min(350px,calc(100vw - 24px));padding:8px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-strong);box-shadow:var(--shadow-3);z-index:1100;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity var(--dur-2),transform var(--dur-2),visibility var(--dur-2)}
.module-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.module-panel-head{padding:5px 10px 8px;color:var(--text-3);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.module-panel [role="menuitem"]{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:58px;padding:9px 10px;border:0;border-radius:12px;background:transparent;color:var(--text);text-align:left}
.module-panel [role="menuitem"]:not(:disabled):hover,.module-panel [role="menuitem"]:not(:disabled):focus-visible{background:color-mix(in srgb,var(--blue-600) 10%,transparent)}
.module-panel [role="menuitem"] b,.module-panel [role="menuitem"] small{display:block}
.module-panel [role="menuitem"] b{font-size:13.5px}.module-panel [role="menuitem"] small{margin-top:3px;color:var(--text-3);font-size:11.5px}
.module-panel [role="menuitem"] em{color:var(--blue-600);font-size:11px;font-style:normal;font-weight:800}
.module-panel [role="menuitem"]:disabled{cursor:default;opacity:.68}
.module-error{padding:7px 10px;color:var(--error);font-size:11.5px}
@media(max-width:680px){.module-trigger{padding-inline:7px}}
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--orange-500);box-shadow:0 0 0 2px var(--bg);display:none}
.notif-panel{position:fixed;top:0;right:12px;width:min(320px,calc(100vw - 24px));max-height:420px;overflow-y:auto;background:var(--surface-strong);backdrop-filter:blur(24px);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:10px;z-index:1100;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility var(--dur-2)}
.notif-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 10px;font-size:12.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.notif-item{display:flex;gap:10px;padding:11px 10px;border-radius:10px}
.notif-item.unread{background:var(--glass-hi)}
/* 13.5px explicitly, matching .module-panel's item title beside it and the
   app's `text-sm`. This had no font-size at all, so it inherited 16px from
   body while .notif-item p below is 13px — the same notification rendered at
   two different sizes depending only on whether it carried a link. That is
   the "oversized notification font" report. */
.notif-item a{color:var(--text);font-size:13.5px;line-height:1.4;font-weight:650;text-decoration:none}.notif-item a:hover{text-decoration:underline}
.notif-error{color:var(--error)}.notif-error button{display:block;margin:10px auto 0;min-height:44px;border:1px solid var(--border);border-radius:var(--r-full);padding:6px 14px;background:var(--surface);color:var(--text);font-weight:700}
.notif-item p{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.4}
.notif-when{font-size:11px;color:var(--text-3)}
.notif-dotsm{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--blue-500)}
.notif-dotsm.success{background:var(--success)}
.notif-dotsm.warning{background:var(--warning)}
.notif-empty{padding:20px 10px;text-align:center;font-size:13px;color:var(--text-3)}

/* ================= SERVICE WIZARD ================= */
.wiz-ov{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden}
.wiz-ov.open{visibility:visible}
.wiz-scrim{position:absolute;inset:0;background:rgba(2,6,20,.66);backdrop-filter:blur(4px);opacity:0;transition:opacity var(--dur-3)}
.wiz-ov.open .wiz-scrim{opacity:1}
.wiz-card{position:relative;width:100%;max-width:640px;max-height:86vh;overflow-y:auto;background:var(--surface-strong);backdrop-filter:blur(28px);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-3);padding:28px;transform:translateY(-14px) scale(.98);opacity:0;transition:all var(--dur-3) var(--ease-out)}
.wiz-ov.open .wiz-card{transform:none;opacity:1}
.wiz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.wiz-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-500)}
.wiz-head h3{font-size:21px;font-weight:800;font-family:var(--font-display);margin-top:4px}
.wiz-steps{display:flex;gap:6px;margin-bottom:24px}
.wiz-steps i{flex:1;height:4px;border-radius:3px;background:var(--border);font-style:normal}
.wiz-steps i.on{background:var(--grad-primary)}
.wiz-step-title{font-size:16px;font-weight:700;margin-bottom:4px}
.wiz-step-sub{font-size:13px;color:var(--text-2);margin-bottom:16px}
.wiz-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.wiz-pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.wiz-pkg{position:relative;display:block;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px 14px;cursor:pointer;transition:border-color var(--dur-2),transform var(--dur-2)}
.wiz-pkg:hover{transform:translateY(-2px)}
.wiz-pkg.on{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(46,123,255,.15)}
.wiz-pkg-tag{position:absolute;top:-9px;left:14px;font-size:9px;font-weight:700;text-transform:uppercase;background:var(--grad-primary);color:#fff;padding:2px 8px;border-radius:var(--r-full)}
.wiz-pkg b{display:block;font-size:14px;margin-bottom:4px}
.wiz-pkg-price{display:block;font-family:var(--font-display);font-weight:800;font-size:17px;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px}
.wiz-pkg-note{display:block;font-size:11px;font-weight:600;color:var(--text-3);margin-bottom:10px}
.wiz-pkg ul{margin:0;padding-left:16px}
.wiz-pkg li{font-size:11px;color:var(--text-2);margin-bottom:4px;line-height:1.4}
.wiz-doc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.wiz-doc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.wiz-doc-name{font-size:13.5px;color:var(--text-2)}
.wiz-doc-upload{font-size:12.5px;font-weight:600;color:var(--blue-500);border:1px solid var(--border);border-radius:var(--r-full);padding:6px 14px;cursor:pointer;white-space:nowrap}
.wiz-doc-upload.attached{color:var(--success);border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.08)}
.wiz-review-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:10px;background:var(--surface)}
.wiz-review-row{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--border);font-size:13.5px;color:var(--text-2)}
.wiz-review-row:first-child{border-top:none}
.wiz-review-row b{color:var(--text)}
.wiz-review-total b{font-size:18px;font-family:var(--font-display);background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.wiz-actions{display:flex;justify-content:space-between;gap:12px;margin-top:20px}
.wiz-done{text-align:center;padding:20px 0}
.wiz-done-ic{width:56px;height:56px;border-radius:50%;background:var(--grad-primary);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:800;margin:0 auto 18px}
.wiz-done h4{font-size:19px;font-weight:800;margin-bottom:8px}
.wiz-done p{font-size:13.5px;color:var(--text-2);margin-bottom:20px}
.wiz-entity-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:12px;background:var(--surface)}
.wiz-entity-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wiz-entity-head b{font-size:13px}
.wiz-entity-remove{font-size:11.5px;font-weight:600;color:var(--danger,#EF4444);background:none;border:none;cursor:pointer;padding:2px 4px}
.wiz-entity-remove:hover{text-decoration:underline}
.wiz-doc-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.wiz-doc-tab{font-size:12px;font-weight:600;padding:7px 13px;border-radius:var(--r-full);border:1.5px solid var(--border);background:transparent;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:border-color var(--dur-2),color var(--dur-2)}
.wiz-doc-tab.on{border-color:var(--blue-500);color:var(--blue-500);background:rgba(46,123,255,.08)}
.eng-activity{display:flex;flex-direction:column;gap:2px;max-height:160px;overflow-y:auto;margin-bottom:16px;border:1px solid var(--border);border-radius:var(--r-md);padding:4px 12px;background:var(--surface)}
.eng-activity-item{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--border);font-size:12px;color:var(--text-2)}
.eng-activity-item:first-child{border-top:none}
.eng-activity-when{color:var(--text-3);font-size:10.5px;white-space:nowrap}
.eng-chat{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;margin-bottom:12px;padding:4px}
.eng-chat-msg{max-width:82%;padding:9px 13px;border-radius:var(--r-lg);font-size:12.5px;line-height:1.45;position:relative}
.eng-chat-msg.client{align-self:flex-end;background:var(--grad-primary);color:#fff;border-bottom-right-radius:4px}
.eng-chat-msg.admin{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--text)}
.eng-chat-meta{display:block;font-size:10px;opacity:.75;margin-top:4px}
.eng-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.eng-board-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px;min-height:80px}
.eng-board-col-head{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:10px;color:var(--text-2)}
.eng-board-col-head span{color:var(--text-3);font-weight:600}
.eng-board-card{display:flex;flex-direction:column;gap:2px;background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;margin-bottom:10px;font-size:12.5px}
.eng-board-card.overdue{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.06)}
.eng-board-card b{font-size:12.5px}
.eng-board-card span{color:var(--text-2);font-size:11.5px}
.eng-board-actions{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.eng-board-actions button{font-size:11px;font-weight:600;color:var(--blue-500);background:none;border:none;cursor:pointer;padding:2px 4px}
.an-bar-chart{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.an-bar-row{display:grid;grid-template-columns:110px 1fr 90px;align-items:center;gap:10px;font-size:12px}
.an-bar-label{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-bar-track{height:10px;border-radius:var(--r-full);background:var(--border);overflow:hidden}
.an-bar-fill{height:100%;background:var(--grad-primary);border-radius:var(--r-full)}
.an-bar-value{text-align:right;font-weight:700;color:var(--text)}
@media (max-width:900px){.eng-board{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.wiz-pkg-grid{grid-template-columns:1fr}.wiz-form{grid-template-columns:1fr}.eng-board{grid-template-columns:1fr}.an-bar-row{grid-template-columns:80px 1fr 70px}}

/* ================= RAZORPAY DEMO CHECKOUT ================= */
.rzp-demo-ov{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden}
.rzp-demo-ov.open{visibility:visible}
.rzp-demo-scrim{position:absolute;inset:0;background:rgba(2,6,20,.72)}
.rzp-demo-card{position:relative;width:100%;max-width:340px;background:#0d1424;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:24px;text-align:center;color:#fff;transform:scale(.96);opacity:0;transition:all var(--dur-3) var(--ease-out)}
.rzp-demo-ov.open .rzp-demo-card{transform:none;opacity:1}
.rzp-demo-head{margin-bottom:16px}
.rzp-demo-badge{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#facc15;background:rgba(250,204,21,.14);border-radius:var(--r-full);padding:3px 10px;margin-bottom:8px}
.rzp-demo-head b{display:block;font-size:16px;margin-bottom:4px}
.rzp-demo-sub{font-size:12px;color:rgba(255,255,255,.6)}
.rzp-demo-amount{font-family:var(--font-display);font-weight:800;font-size:32px;margin-bottom:14px}
.rzp-demo-note{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:18px}

/* ================= AUTHORITY SERVICE PAGE ================= */
.authority-wrap{max-width:880px;margin:0 auto 56px}
.authority-wrap h2{font-size:24px;margin:0 0 16px;font-family:var(--font-display);font-weight:800}
.authority-wrap>p{color:var(--text-2);font-size:15.5px;line-height:1.75;margin-bottom:8px}
.au-list{display:flex;flex-direction:column;gap:10px;margin:0}
.au-list li{list-style:none;padding-left:26px;position:relative;color:var(--text-2);font-size:14.5px;line-height:1.6}
.au-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--success);font-weight:700}
.au-2col{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:880px;margin:0 auto 56px}
.au-2col-even{align-items:start}
.au-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;height:100%}
.review-strip-col{display:flex;flex-direction:column;gap:12px;overflow-x:visible}
.review-strip-col .quote-sm{flex:none;width:100%}
.review-strip-col .quote-sm blockquote{-webkit-line-clamp:2}
.au-2col h3{font-size:16px;margin-bottom:14px;font-family:var(--font-display)}
.au-process{counter-reset:austep;display:flex;flex-direction:column;gap:18px;max-width:880px;margin:0 auto 56px}
.au-process-item{display:flex;gap:16px}
.au-process-item .aun{counter-increment:austep;width:34px;height:34px;border-radius:10px;background:var(--grad-primary);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--font-display);flex:none}
.au-process-item .aun::before{content:counter(austep)}
.au-process-item div h4{font-size:15px;margin-bottom:4px}
.au-process-item div p{font-size:13.5px;margin:0;color:var(--text-2)}
.fee-table{width:100%;border-collapse:collapse;font-size:14px}
.fee-table td{padding:12px 16px;border-top:1px solid var(--border)}
.fee-table tr:first-child td{border-top:none}
.fee-table td:first-child{color:var(--text-2)}
.fee-table td:last-child{font-weight:600;text-align:right}
.checklist{display:flex;flex-direction:column;gap:10px;margin:0}
.checklist li{list-style:none;display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-2)}
.checklist li::before{content:"☐";color:var(--blue-500);font-size:15px;line-height:1.5}
.update-item{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--border);font-size:14px;color:var(--text-2)}
.update-item:first-child{border-top:none}
.update-item .ud{color:var(--success);flex:none}
.au-badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.au-gov-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--blue-500);white-space:nowrap}
.au-gov-link:hover{text-decoration:underline}
.au-gov-link svg{flex:none}

/* Recent regulatory updates — news-feed style */
.upd-feed{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:8px 22px;max-width:880px;margin:0 auto}
.upd-item{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--border);position:relative}
.upd-item:first-child{border-top:none}
.upd-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--grad-orange);margin-top:5px;box-shadow:0 0 0 4px rgba(249,115,22,.14)}
.upd-body{flex:1;min-width:0}
.upd-tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-500);background:rgba(249,115,22,.12);border-radius:var(--r-full);padding:3px 10px;margin-bottom:6px}
.upd-body p{margin:0;font-size:14px;color:var(--text-2);line-height:1.55}

/* Related guides */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;max-width:880px;margin:0 auto}
.guide-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2)}
.guide-card:hover{transform:translateY(-2px);border-color:var(--border-strong)}
.guide-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--grad-primary);color:#fff}
.guide-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.guide-body b{font-size:13.5px;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.guide-body span{font-size:11.5px;color:var(--text-3)}
.guide-arrow{flex:none;color:var(--text-3)}

/* ================= RESPONSIVE ================= */
@media (max-width:1119px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .practice-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .krow-updated{display:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .stats-band,.stats-band-4{grid-template-columns:repeat(2,1fr)}
  .why-grid,.due-wrap,.calc-shell,.portal-grid,.app-shell,.form-grid,.stat-grid,.au-2col,.pkg-detail-card,.contact-grid,.glance-card{grid-template-columns:1fr}
  .glance-card-side{margin-top:4px}
  .calc-in{border-right:none;border-bottom:1px solid var(--border)}
  .testi-grid{grid-template-columns:1fr 1fr}
  /* .foot-grid is deliberately NOT re-declared here.
     It already becomes 1fr 1fr in the earlier (max-width:1119px) block, so
     this was a duplicate — and because this block sits AFTER the
     (max-width:560px) rule that makes the footer a single column, the
     duplicate won on source order at equal specificity. The result was a
     two-column footer on every phone, which squeezed the contact column to
     160px and pushed the six social icons onto a second row. */
  .hero-grid{grid-template-columns:1fr;gap:64px}
  .app-side{flex-direction:row;overflow-x:auto}
}
/* v3.1.2 — the burger appeared only below 680px, but the nav pill holds a
   brand, five mega-menu triggers and four icon buttons. Those stop fitting at
   roughly 1000px, so every tablet in portrait (768px and 820px are the common
   ones) rendered a nav bar whose links overflowed the pill and clipped. The
   drawer now takes over at the width where the horizontal nav actually stops
   fitting rather than at an arbitrary phone breakpoint. */
@media (max-width:1119px){
  .nav-links,.nav-cta .btn,.kbd-hint{display:none}
  .burger{display:grid}
  /* Compact bar and desktop: 44px tap target (was 38 on desktop). */
  .icon-btn{width:44px;height:44px}
  .module-trigger{min-height:44px;padding-inline:7px}
  .module-label{display:none}
}
/* Header dropdowns must not hang off the left edge on a phone.

   `.module-panel` was `width:min(350px,calc(100vw - 24px))`, which reads like a
   clamp but never engaged: at 375px that is min(350, 351) = 350. The formula
   assumed the panel had the whole viewport to sit in, but it is right-anchored
   to a trigger whose right edge is at ~215px, so only 215px exist to its left
   — the panel started at **-135px** and a third of it was unreachable.
   `.notif-panel` is a flat 320px with no clamp at all and started at -13px.

   1020px, not a phone width: the overflow lasts as long as the trigger sits
   closer to the left edge than the panel is wide, and measuring showed the
   module panel still hanging 64px off-screen at 681px. 1020 is also where the
   drawer already takes over and the nav is in its compact shape, so it is the
   honest boundary rather than a guessed one.

   Below it they stop being anchored to their trigger and
   span the nav pill instead — the same thing `.mega-panel` above already does,
   down to the `top:74px`. `placeAnchoredHeaderMenu` in app.js writes the same
   insets in inline styles so it cannot override this clamp.

   Note `position:fixed` here resolves against `.nav-pill`, not the viewport:
   the pill carries a `backdrop-filter`, and that creates a containing block
   for fixed descendants just as a transform would. That is why `left`/`right`
   are small insets rather than viewport margins, and why `.mega-panel` centres
   itself with `left:50%` rather than `margin:auto`. The pill spans the usable
   width by design, so this is the intended anchor — but if the blur is ever
   removed, these values become true viewport insets and still fit. */
@media (max-width:1119px){
  .module-panel,.notif-panel{
    position:fixed;top:calc(74px + env(safe-area-inset-top,0px));left:12px;right:12px;width:auto;
    max-height:calc(100dvh - 92px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto}
}

@media (max-width:680px){
  section{padding:32px 0}
  .hero{padding:112px 0 32px}
  .bento,.ind-grid,.testi-grid,.steps{grid-template-columns:1fr}
  .stats-band,.stats-band-4{grid-template-columns:1fr 1fr;padding:30px}
  .cta-band{padding:48px 24px}
  .practice-grid{grid-template-columns:1fr}
  .know-grid{grid-template-columns:1fr 1fr}
  .kc-foot .krow-updated{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  /* .reveal.reveal-child is MORE specific than .reveal, so it would keep its
     translateY here and leave every staggered card permanently offset by 14px
     — a later rule does not win against a more specific one. Both are named.
     Delay is zeroed too: a 0.01ms transition that still waits 700ms to start
     is not "reduced motion", it is the same wait without the animation. */
  .reveal,.reveal.reveal-child{opacity:1;transform:none;transition-delay:0ms!important}
}


/* ---------------------------------------------------------- a11y additions
   The global :focus-visible ring (top of this file) is the baseline, but a few
   interactive surfaces render it invisibly against their own background, and
   card links had no focus treatment at all. */
.svc:focus-visible,.ind:focus-visible,.art:focus-visible,.guide-card:focus-visible,
.qc-card:focus-visible,.mega-item:focus-visible,.chip:focus-visible{
  outline:2px solid var(--ring);outline-offset:3px;border-color:var(--border-strong)}
.seg button:focus-visible,.know-view-toggle button:focus-visible,
.icon-btn:focus-visible,.acc-btn:focus-visible{
  outline:2px solid var(--ring);outline-offset:2px}
/* The skip link must be visible the moment it receives keyboard focus. */
.skip:focus-visible{left:0;outline:2px solid #fff;outline-offset:-4px}

/* Respect the OS "reduce motion" setting across the decorative layers too —
   the aurora, sparks and custom cursor are purely ornamental. */
@media (prefers-reduced-motion:reduce){
  .aurora,.ambient,.spark{animation:none !important;transition:none !important}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Shown only when the live price lookup fails and the visitor is therefore
   looking at seed pricing (see service.html). */
.spec-note{font-size:12px;color:var(--warning);margin-top:6px;line-height:1.4}

/* v3.1.0 — theme toggle relocated from the nav into the login/account panel.
   Sits as a labelled row at the foot of the panel so it reads as a setting
   rather than a primary action. */
.panel-theme-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  font-size:13px;font-weight:600;color:var(--text-2)}
.panel-theme-btn{flex:none}

/* v3.1.0 — footer reminder subscription (replaced a mailto: link). */
.foot-newsletter-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.foot-newsletter-form input{flex:1 1 180px;min-width:0;padding:9px 12px;font:inherit;font-size:13px;
  color:var(--text-1);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md)}
.foot-newsletter-form input:focus-visible{outline:none;border-color:var(--blue-600)}
.foot-newsletter-msg{flex:1 1 100%;margin:0;font-size:12.5px;font-weight:600}
.foot-newsletter-msg.ok{color:var(--success,#059669)}
.foot-newsletter-msg.err{color:var(--error,#dc2626)}
.foot-newsletter-msg:empty{display:none}
.foot-newsletter-fine{flex:1 1 100%;margin:0;font-size:11.5px;color:var(--text-3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* v3.1.2 — social sign-in inside the header login dropdown. */
.mini-login-social{margin-top:12px}
.mini-login-divider{display:flex;align-items:center;gap:10px;margin:12px 0 10px;
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.mini-login-divider::before,.mini-login-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.mini-login-social-btn{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:9px 12px;margin-bottom:8px;font-size:13px;font-weight:600;
  color:var(--text-1);background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--r-full);text-decoration:none;transition:background var(--dur-2) var(--ease-out)}
.mini-login-social-btn:hover{background:var(--surface)}
.mini-login-social-btn:last-child{margin-bottom:0}

/* ---- due-dates: statutory calendar (v3.1.2) ----
   The page now merges our curated recurring rules with the Income Tax
   Department's published calendar. Rows from the two sources have to be
   distinguishable at a glance, or a client cannot tell "we will handle this
   for you" from "the statute says this exists". */
.src-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  vertical-align:middle;margin-left:6px;padding:2px 6px;border-radius:var(--r-full);
  background:var(--purple-500);color:#fff}
.dmeta-desc{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--text-3)}
.cal-item-itd{border-left:2px solid var(--purple-500)}
/* Month navigation — merged with .due-calendar rules above; do not duplicate. */

/* Homepage: float toasts are decorative — snap to final opacity, no 12s loop. */
/* Deliberately NOT disabling the toast animation here — see git blame.
   Killing it left four static, half-transparent toasts stacked over the
   hero art, which is worse than the frames it saved. These are
   compositor-only transforms and honour prefers-reduced-motion above. */
body[data-perf="home"] .float-toast{will-change:transform,opacity}
body[data-perf="home"] .marquee-track{animation-duration:60s}

/* Soft lead-assist dialog — once per session, scroll-triggered */
.soft-assist-ov{position:fixed;inset:0;z-index:240;display:flex;align-items:flex-end;justify-content:center;padding:16px;visibility:hidden;pointer-events:none}
.soft-assist-ov.open{visibility:visible;pointer-events:auto}
.soft-assist-scrim{position:absolute;inset:0;background:rgba(8,18,38,.45);opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.soft-assist-ov.open .soft-assist-scrim{opacity:1}
.soft-assist-card{position:relative;width:min(440px,100%);background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 28px 20px;box-shadow:var(--shadow-3);transform:translateY(24px);opacity:0;transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-3) var(--ease-out);z-index:1}
.soft-assist-ov.open .soft-assist-card{transform:none;opacity:1}
.soft-assist-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;background:transparent;color:var(--text-3);font-size:22px;line-height:1;border-radius:var(--r-full)}
.soft-assist-x:hover{color:var(--text);background:var(--glass-hi)}
.soft-assist-lead{margin:10px 0 18px;color:var(--text-2);font-size:14.5px}
.soft-assist-meta{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:rgba(249,115,22,.12);color:var(--orange-500);font-weight:600;font-size:12.5px;white-space:nowrap}
.soft-assist-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.soft-assist-dismiss{display:block;width:100%;margin-top:4px;padding:10px;border:0;background:transparent;color:var(--text-3);font-size:13px;font-weight:600}
.soft-assist-dismiss:hover{color:var(--text-2)}
@media (min-width:720px){
  .soft-assist-ov{align-items:center}
}

/* Free-tools strip */
.tools-strip{padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.tools-strip-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:720px){.tools-strip-grid{grid-template-columns:1.2fr 1fr 1fr;align-items:center}}
.tools-strip h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 6px}
.tools-strip p{margin:0;color:var(--text-2);font-size:14px}
.tools-strip-actions{display:flex;flex-wrap:wrap;gap:10px}

/* Pagination — services listing and any other long list. */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:28px 0 4px}
.pager-btn{min-width:38px;height:38px;padding:0 11px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--bg-2);color:var(--text);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--dur-2),background var(--dur-2),transform var(--dur-2)}
.pager-btn:hover:not(:disabled){border-color:var(--blue-500);transform:translateY(-1px)}
.pager-btn:disabled{opacity:.4;cursor:not-allowed}
/* aria-current is the source of truth for the active page; .on just styles it. */
.pager-btn.on{background:var(--grad-primary);border-color:transparent;color:#fff}
.pager-gap{padding:0 4px;color:var(--text-3);user-select:none}
@media (max-width:560px){.pager-btn{min-width:34px;height:34px;padding:0 8px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.pager-btn:hover:not(:disabled){transform:none}}

/* WhatsApp click-to-chat — a labeled capsule in the header account cluster,
   not a green circle. Text and glyph use --text so contrast stays with the
   pill; teal is only a hover edge, matching .btn-outline. */
.wa-chat{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;min-width:44px;padding:0 12px;border-radius:var(--r-full);
  border:1px solid var(--border-strong);background:var(--surface-strong);color:var(--text);
  font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1;
  box-shadow:inset 0 1px 0 var(--glass-hi);white-space:nowrap}
.wa-chat:hover{border-color:var(--blue-500);background:var(--glass-hi)}
.wa-chat[hidden]{display:none}
.wa-glyph{width:18px;height:18px;flex:none;display:block}
.drawer-panel a.wa-chat-drawer{display:flex;align-items:center;justify-content:flex-start;gap:8px;
  width:100%;margin:0 0 8px;min-height:48px;padding:0 14px;text-align:left;
  border:1px solid var(--border-strong);border-radius:var(--r-full);background:var(--surface-strong)}
.wa-chat-page{align-self:flex-start}
.page-assist{display:flex;margin-top:16px}
/* Drawer is the only nav below 1120px — the header copy would overflow the pill. */
@media (max-width:1119px){
  .nav-cta .wa-chat-nav{display:none}
}
/* 320px: brand + module mark + search + bell + burger were wider than the
   viewport, so .nav-cta (the burger, the only nav here) painted past the
   right edge. Only this width. The desktop pill and the 1119px drawer
   breakpoint stay as they are. The login control is already hidden here;
   its empty wrapper was still a flex item and ate a gap. */
@media (max-width:360px){
  .nav .wrap{padding-left:8px;padding-right:8px}
  .nav-pill{min-width:0;padding:6px 8px;gap:4px}
  .brand{margin-right:4px;font-size:18px}
  .nav-cta{margin-left:0;gap:4px;min-width:0}
  .nav-cta .login-dd{display:none}
  .nav .icon-btn{width:40px;height:40px}
  .module-trigger{min-height:40px;padding-inline:6px;gap:4px}
}
/* The header/drawer/float WhatsApp buttons are retired. Ask and WhatsApp
   share the corner control. In-page .wa-chat-page links stay. */
.wa-chat-nav,.wa-chat-drawer,.wa-float{display:none !important}

/* One help control, bottom-right, under the nav (z-index 100) so it cannot
   cover the menu button — including the 320px pill. Not a second green FAB. */
.site-assist{position:fixed;z-index:46;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:calc(100vw - 16px)}
.site-assist-menu{display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:calc(100vw - 16px)}
.site-assist-menu[hidden]{display:none}
.site-assist-toggle,.site-assist-choice{min-width:44px;min-height:44px;padding:0 14px;border-radius:var(--r-full);
  border:1px solid var(--border-strong);background:var(--surface-strong);color:var(--text);
  font-family:var(--font-display);font-size:13px;font-weight:700;box-shadow:var(--shadow-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.site-assist-toggle{width:44px;padding:0}
.site-assist-toggle:hover,.site-assist-choice:hover{border-color:var(--blue-500);color:var(--text)}
.site-assist-panel{position:fixed;z-index:46;right:max(12px,env(safe-area-inset-right));
  bottom:calc(64px + env(safe-area-inset-bottom));width:min(380px,calc(100vw - 24px));
  max-height:min(480px,calc(100dvh - 120px));overflow:auto;padding:16px;
  background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-3)}
.site-assist-panel[hidden]{display:none}
.site-assist-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.site-assist-head h2{margin:0;font-size:16px}
.site-assist-close{width:36px;height:36px;border:0;background:transparent;color:var(--text-3);font-size:22px;line-height:1;border-radius:var(--r-full);cursor:pointer}
.site-assist-close:hover{color:var(--text);background:var(--glass-hi)}
.site-assist-note{margin:10px 0;color:var(--text-2);font-size:13px;line-height:1.45}
.site-assist-form{display:flex;gap:8px}
.site-assist-form input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px}
.site-assist-answer{margin-top:12px;font-size:14px;line-height:1.5;color:var(--text)}
.site-assist-answer p{margin:0 0 8px}
.site-assist-answer ul{margin:0 0 8px;padding-left:18px}
.site-assist-answer a{color:var(--blue-500)}
html.has-commerce-sticky .site-assist{bottom:calc(84px + env(safe-area-inset-bottom))}
html.has-commerce-sticky .site-assist-panel{bottom:calc(136px + env(safe-area-inset-bottom))}
@media (max-width:360px){
  .site-assist{right:8px;bottom:max(8px,env(safe-area-inset-bottom))}
  .site-assist-panel{right:8px;width:calc(100vw - 16px);max-height:calc(100dvh - 132px)}
}

/* Full-page cart / checkout. Sticky CTA sits below the module switcher (z 1100). */
.commerce-sticky{position:sticky;bottom:0;z-index:40;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 92%,transparent);border-top:1px solid var(--border);backdrop-filter:blur(12px)}
@media (max-width:1119px){
  .commerce-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40}
  html.has-commerce-sticky{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
.commerce-lines{list-style:none;margin:0;padding:0;overflow-x:hidden}
.commerce-line{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;padding:12px 0;border-bottom:1px solid var(--border)}
.commerce-line .btn{min-height:44px}
.commerce-line b,.commerce-line .min-w-0{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.commerce-line small{display:block;color:var(--text-3);white-space:normal;overflow:visible;text-overflow:unset}
.commerce-fields{display:grid;gap:12px;margin:20px 0}
@media (min-width:640px){.commerce-fields{grid-template-columns:1fr 1fr}}
.commerce-fields .commerce-span{grid-column:1/-1}
.commerce-quote ul{list-style:none;margin:8px 0 0;padding:0}
.commerce-quote li{display:flex;justify-content:space-between;gap:12px;min-width:0}
.commerce-total{font-weight:800;margin-top:12px}
#ind-suggest .svc{min-width:0;max-width:100%}
#ind-suggest .svc h3,#ind-suggest .svc p{overflow-wrap:anywhere}

/* ── Checkout / cart — enterprise layout ─────────────────────────────────────
   Built entirely on existing tokens. The generated design system proposed a
   navy + gold "Trust & Authority" palette; that was NOT adopted, because
   design-tokens.spec.ts asserts the marketing CSS and apps/web tokens agree
   (19 assertions), and swapping the palette here would both fail that and give
   the same button two identities depending on which site you were on.
   What IS adopted from it is structural: order summary always visible, trust
   signals adjacent to the pay action, credentials stated rather than implied. */
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
.co-main{min-width:0}
.co-h{font-size:15px;font-weight:700;letter-spacing:.01em;margin:0 0 12px}

/* Progress. Communicates position without pretending to be navigation —
   these are not links, so they are not focusable. */
.co-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 28px;flex-wrap:wrap}
.co-steps li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:color-mix(in srgb,var(--text) 55%,transparent)}
.co-steps li+li::before{content:"";width:16px;height:1px;background:var(--border);margin-right:4px}
.co-steps span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--border);font-size:11.5px;line-height:1}
.co-steps .is-done{color:var(--text)}
.co-steps .is-done span{background:var(--success);border-color:transparent;color:#fff}
.co-steps .is-current{color:var(--text)}
.co-steps .is-current span{background:var(--grad-primary);border-color:transparent;color:#fff}

/* Fields. Visible labels with `for` — placeholder-only inputs are invisible to
   a screen reader, which is the exact defect fixed across 13 controls in v3.1. */
.co-fields{margin-top:28px}
.co-field{margin-bottom:18px}
.co-field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.co-opt{font-weight:400;color:color-mix(in srgb,var(--text) 55%,transparent);font-size:12.5px}
.co-field .input{width:100%;min-height:44px}
.co-hint{margin:6px 0 0;font-size:12.5px;line-height:1.45;
  color:color-mix(in srgb,var(--text) 62%,transparent)}

/* Summary. Sticky on desktop so the total and the trust row stay with the pay
   button; static on mobile, where the sticky bar already carries the action. */
.co-summary{position:sticky;top:96px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg,14px);padding:20px}
.co-summary-h{font-size:15px;font-weight:700;margin:0 0 14px}
.co-sum{margin:0;display:grid;gap:10px}
.co-sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:13.5px;margin:0}
.co-sum-row dt{color:color-mix(in srgb,var(--text) 68%,transparent);margin:0}
.co-sum-row dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600}
.co-sum-row.is-credit dd{color:var(--success)}
.co-sum-total{border-top:1px solid var(--border);padding-top:12px;margin-top:4px;font-size:16px}
.co-sum-total dt{color:var(--text);font-weight:700}
.co-sum-total dd{font-weight:800;font-size:19px}
.co-note{margin:12px 0 0;font-size:12.5px;line-height:1.5;
  color:color-mix(in srgb,var(--text) 62%,transparent)}
.co-summary.is-loading{min-height:180px}

/* Trust row. The pattern's core: state the credential, do not imply it. */
.co-trust{list-style:none;padding:16px 0 0;margin:16px 0 0;border-top:1px solid var(--border);
  display:grid;gap:12px}
.co-trust li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;
  color:color-mix(in srgb,var(--text) 72%,transparent)}
.co-ico{width:16px;height:16px;flex:none;margin-top:1px;color:var(--blue-700)}

@media (max-width:900px){
  .co-grid{grid-template-columns:1fr;gap:24px}
  /* Summary above the fold on mobile: the total is the thing being decided. */
  .co-summary{position:static;order:-1}
  .co-steps{margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  .co-steps span,.co-summary{transition:none}
}

/* ── Cart lines, shared with checkout ─────────────────────────────────────── */
.co-lines{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.co-line{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md,10px)}
.co-line-main{min-width:0}
.co-line-name{margin:0;font-size:14.5px;font-weight:650;line-height:1.35}
.co-line-meta{margin:3px 0 0;font-size:12.5px;
  color:color-mix(in srgb,var(--text) 60%,transparent)}
/* 44px min target — the old Remove was a btn-sm, below the threshold. */
.co-remove{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  background:transparent;border:1px solid var(--border);border-radius:999px;cursor:pointer;
  font-size:13px;font-weight:600;color:color-mix(in srgb,var(--text) 72%,transparent);
  transition:color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out)}
.co-remove:hover{color:var(--error);border-color:color-mix(in srgb,var(--error) 45%,transparent);
  background:color-mix(in srgb,var(--error) 8%,transparent)}
.co-remove:focus-visible{outline:2px solid var(--blue-700);outline-offset:2px}
.co-remove .co-ico{width:15px;height:15px;color:currentColor}

/* Empty state: a state with an action, not a sentence with a link in it. */
.co-empty{text-align:center;padding:56px 24px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg,14px)}
.co-empty .co-ico{width:36px;height:36px;color:color-mix(in srgb,var(--text) 35%,transparent);
  margin-bottom:14px}
.co-empty h2{font-size:18px;font-weight:700;margin:0 0 8px}
.co-empty p{max-width:46ch;margin:0 auto 20px;font-size:13.5px;line-height:1.6;
  color:color-mix(in srgb,var(--text) 65%,transparent)}

@media (max-width:560px){
  .co-line{align-items:flex-start}
  .co-remove span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .co-remove{padding:0;width:44px;justify-content:center}
  .co-empty{padding:40px 18px}
}
@media (prefers-reduced-motion:reduce){ .co-remove{transition:none} }

/* ── Cookie consent (analytics opt-in; shown only when GA/GTM IDs are set) ── */
.cookie-consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:80;
  max-width:28rem;padding:16px 18px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg,14px);
  box-shadow:0 12px 40px color-mix(in srgb,var(--text) 18%,transparent);
}
.cookie-consent-text{margin:0;font-size:13.5px;line-height:1.55;
  color:color-mix(in srgb,var(--text) 72%,transparent)}
.cookie-consent-text a{text-decoration:underline;text-underline-offset:2px}
.cookie-consent-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (min-width:640px){
  .cookie-consent{left:24px;right:auto;bottom:24px}
}


/* ── Cart / checkout merchandising (cross-sell + soft package upgrade) ───── */
.co-merch{margin:1.5rem 0 0;padding:1.25rem 0 0;border-top:1px solid var(--border)}
.co-merch .co-h{margin:0 0 0.35rem}
.co-merch-block{margin-top:1rem}
.co-merch-sub{margin:0 0 0.65rem;font-size:13.5px;font-weight:700;
  color:color-mix(in srgb,var(--text) 78%,transparent)}
.co-merch-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
@media (min-width:640px){.co-merch-list{grid-template-columns:1fr 1fr}}
.co-merch-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  min-width:0;padding:14px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md,10px)}
.co-merch-main{min-width:0}
.co-merch-name{margin:0;font-size:14px;font-weight:650;line-height:1.35}
.co-merch-name a{color:inherit;text-decoration:none}
.co-merch-name a:hover{text-decoration:underline;text-underline-offset:2px}
.co-merch-pitch{margin:4px 0 0;font-size:12.5px;line-height:1.5;
  color:color-mix(in srgb,var(--text) 62%,transparent)}
.co-merch-item .btn{flex-shrink:0;min-height:40px}

/* Google Business Profile reviews. Two cards at a time, in document flow.
   Not fixed, so it cannot cover the 320px menu button or the Help control. */
.google-reviews{margin:8px 0 28px;min-width:0;max-width:100%}
.google-reviews[hidden]{display:none}
.google-reviews .sec-head{margin-bottom:18px}
.google-reviews .sec-head h2{font-size:clamp(22px,3vw,32px)}
.google-reviews-inner{min-width:0;max-width:100%}
.google-reviews-slider{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;min-width:0;max-width:100%}
.g-review-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0;align-items:stretch}
.g-review-nav{width:44px;height:44px;border-radius:var(--r-full);border:1px solid var(--border-strong);background:var(--surface-strong);color:var(--text);cursor:pointer;font:inherit;font-size:22px;line-height:1;padding:0}
.g-review-nav:hover{border-color:var(--blue-500)}
.g-review{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;min-width:0;overflow-wrap:anywhere}
.g-review p{margin:0;overflow-wrap:anywhere}
.g-review-stars{color:var(--warning);letter-spacing:1px;font-size:13px;margin-bottom:8px}
.g-review-text{font-size:14px;line-height:1.55;color:var(--text);margin-bottom:10px}
.g-review-by,.g-review-place{font-size:12.5px;color:var(--text-2);line-height:1.45}
.g-review-place{margin-top:6px}
.g-review-by a,.g-review-place a{font-weight:600;color:var(--blue-500)}
@media (max-width:360px){
  .google-reviews-slider{grid-template-columns:32px minmax(0,1fr) 32px;gap:6px}
  .g-review-pair{gap:6px}
  .g-review-nav{width:32px;height:32px;font-size:18px}
  .g-review{padding:10px}
  .g-review-stars{letter-spacing:0;font-size:12px}
  .g-review-text{font-size:13px}
}