/* ═══════════════════════════════════════════════════════════════════
   BIQc marketing site — shared design system
   Tokens mirror frontend/src/styles/liquid-steel-tokens.css
   (:root = Liquid Silver light, [data-theme="dark"] = Liquid Steel).
   Keep variable names in lockstep with the SPA so chrome (nav/footer)
   matches Ask BIQc / Platform. Marketing pages default to dark via
   <html data-theme="dark"> (same product default as the app).

   Do not add a manual ?v= query. Image build content-hashes this file
   (frontend/scripts/hashMarketingAssets.js). nginx never treats the
   unhashed /assets/site.css name as immutable (KAN-303).
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --canvas:linear-gradient(168deg,#DCE1E9 0%,#E6EAF0 50%,#F4F6F9 100%);
  --canvas-app:linear-gradient(168deg,#DCE1E9 0%,#E6EAF0 50%,#F4F6F9 100%);
  --gov-nav-glass:rgba(220,225,233,0.6); /* #DCE1E9 at 60% — same as the app's --home-header-glass */
  --surface:#FDFEFF;
  --surface-raised:#FDFEFF;
  --surface-sunken:#F4F6F9;
  --surface-tint:#F1F4F8;
  --canvas-sage:#F2F4EC;
  --canvas-sage-deep:#EEF1E6;
  --canvas-sage-soft:#F7F8F2;
  --card-wash:linear-gradient(155deg, rgba(255,255,255,0.97) 0%, rgba(247,248,242,0.85) 55%, rgba(255,255,255,0.96) 100%);
  --inset-highlight:rgba(255,255,255,0.9);
  --muted-fill:rgba(10,10,10,0.05);
  --track-fill:rgba(10,10,10,0.16);

  --ink-display:#14171C;
  --ink:#14171C;
  --ink-2:#3E4552;
  --ink-secondary:#5A6270;
  --ink-muted:#5A6270;
  --ink-subtle:#7A8494;
  --ink-inverse:#F1F4F8;
  --ink-on-lava:#FFFFFF;
  --ink-btn-top:#2A303A;
  --ink-btn-bottom:#181C22;
  --ink-btn-top-hover:#343B47;
  --ink-btn-bottom-hover:#20242C;

  --lava-600:#E85D00;
  --lava-500:#FF7A1A;
  --lava:#E85D00;
  --lava-deep:#E85D00;
  --lava-ring:rgba(232,93,0,0.18);
  --lava-wash:rgba(232,93,0,0.08);
  /* Feature cards; dark values mirror the React app's --home-feature-card-*. */
  --feature-card-bg:linear-gradient(180deg,var(--surface),var(--surface-sunken));
  --feature-card-highlight:var(--lava-wash);
  /* Solid warm fill, the app's --home-warm-highlight. Unlike the translucent
     --lava-wash it stays warm over white cards instead of turning grey. */
  --warm-highlight:#F1E3DF;
  /* Matches the app's --home-lava-text: AA (4.5:1+) for small text on every
     light page surface, including the gradient's #DCE1E9 top. */
  --lava-text:#A33F00;

  --silver-0:#FDFEFF;
  --silver-1:#F4F6F9;
  --silver-2:#E6EAF0;
  --silver-3:#DCE1E9;
  --silver-5:#717884; /* matches SPA — scrollbar thumb / muted chrome */

  --border:rgba(20,23,28,0.09);
  --border-strong:rgba(20,23,28,0.16);
  --border-hover:rgba(20,23,28,0.23);
  --border-medium:var(--border-strong); /* SPA scrollbar alias */
  --text-muted:var(--ink-muted);        /* SPA scrollbar hover alias */
  --size-nav:0.78125rem;
  --size-field:0.875rem;  /* 14 — marketing .btn / .field-control / .menu-select-option */
  --weight-medium:500;
  --weight-semibold:600;

  --positive:#16A34A;
  --positive-wash:#ECFDF5;
  --warning:#D97706;
  --warning-wash:#FFFBEB;
  --info:#2563EB;
  --info-wash:#EFF6FF;
  --positive-ink:#166534;
  --positive-text:var(--positive-ink); /* status text on light grounds */
  --warning-ink:#92400E;
  --negative:#B42318;
  --negative-wash:#FEF3F2;
  --negative-border:#FECDCA;

  --font-display:"Source Serif 4", Georgia, serif;
  --font-marketing-ui:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;

  --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-3xl:28px; --r-pill:9999px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  --elev-1:0 1px 2px rgba(10,10,10,0.04), 0 0 0 1px rgba(10,10,10,0.04);
  --elev-2:0 1px 3px rgba(10,10,10,0.06), 0 8px 24px -4px rgba(10,10,10,0.04);
  --elev-3:0 4px 12px rgba(10,10,10,0.08), 0 32px 64px -16px rgba(10,10,10,0.08);

  --content-max:1280px;
  --topbar-h:88px; /* header row: 32px above the nav, 16px below (same as Header.js) */
}

/* Liquid Steel v1.1 — same charcoal map as the SPA guest Platform page. */
[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0d0d0d;
  --canvas-app:#212121;
  --gov-nav-glass:rgba(33,33,33,0.6); /* #212121 at 60% — same as the app's --home-header-glass */
  --surface:#2f2f2f;
  --surface-raised:#333333;
  --surface-sunken:#171717;
  --surface-tint:#262626;
  --canvas-sage:#212121;
  --canvas-sage-deep:#171717;
  --canvas-sage-soft:#262626;
  --card-wash:linear-gradient(155deg, #2f2f2f 0%, #262626 55%, #2a2a2a 100%);
  --inset-highlight:rgba(255,255,255,0.06);
  --muted-fill:rgba(255,255,255,0.06);
  --track-fill:rgba(255,255,255,0.16);

  --ink-display:#ececec;
  --ink:#ececec;
  --ink-2:#d4d4d4;
  --ink-secondary:#b4b4b4;
  --ink-muted:#b4b4b4;
  --ink-subtle:#8e8e8e;
  --ink-inverse:#0d0d0d;
  --ink-on-lava:#FFFFFF;
  --ink-btn-top:#ececec;
  --ink-btn-bottom:#ececec;
  --ink-btn-top-hover:#ffffff;
  --ink-btn-bottom-hover:#ffffff;

  --lava-wash:rgba(232,93,0,0.14);
  --feature-card-bg:linear-gradient(180deg,#181818,#202020);
  --feature-card-highlight:#3d291c;
  --warm-highlight:#3d291c;
  --lava-text:#FF7A1A;

  --silver-0:#171717;
  --silver-1:#212121;
  --silver-2:#2a2a2a;
  --silver-3:#3a3a3a;

  --border:rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.14);
  --border-hover:rgba(255,255,255,0.18);

  --positive-wash:rgba(34,197,94,0.12);
  --positive-text:#4ADE80; /* --positive-ink is too dark to read on dark grounds */
  --warning-wash:rgba(245,158,11,0.12);
  --info-wash:rgba(59,130,246,0.12);
  --negative-wash:rgba(239,68,68,0.12);
  --negative-border:rgba(239,68,68,0.35);

  --elev-1:0 1px 2px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  --elev-2:0 1px 3px rgba(0,0,0,0.55), 0 8px 24px -4px rgba(0,0,0,0.45);
  --elev-3:0 4px 12px rgba(0,0,0,0.6), 0 32px 64px -16px rgba(0,0,0,0.45);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px;}
html,body{overflow-x:clip;}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:16px; line-height:1.6;
  color:var(--ink);
  background:var(--canvas-app);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
::selection{background:var(--lava); color:var(--ink-on-lava);}
.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;}
a:focus-visible,button:focus-visible{outline:2px solid var(--lava); outline-offset:3px; border-radius:8px;}
button{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:inherit;}

/* ─── SCROLLBAR — exact match for Platform / SPA index.css ───
   Do NOT set scrollbar-width / scrollbar-color on html in Chromium:
   non-auto values disable ::-webkit-scrollbar and paint the OS thin bar. */
::-webkit-scrollbar{
  width:6px;
  height:6px;
}
::-webkit-scrollbar-track{
  background:transparent;
}
::-webkit-scrollbar-thumb{
  background:var(--border-medium);
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--text-muted);
}
@supports not selector(::-webkit-scrollbar){
  html{
    scrollbar-width:thin;
    scrollbar-color:var(--border-medium) transparent;
  }
}

/* ─────────────────── HEADER ───────────────────
   Mirrors the home page chrome (src/components/shared/Header.js): an
   88px row (32px above the nav, 16px below) in the same 1280px column as the footer.
   Full header (main website): six links, Log in, Try for free, Speak to
   Specialist; below 1280px the links collapse into the burger drawer and below
   768px the three actions move into it too. Simplified header (ad landing
   pages, data-header-variant="simplified"): logo + Try for free only.
   Markup is generated by frontend/scripts/syncMarketingNavigation.js — edit
   it there, never per page. */
/* One gap between every desktop header item: the links and the Log in action. */
.gov-nav{--gov-nav-gap:17.6px;}
.gov-nav{
  position:sticky; top:0; left:0; right:0; z-index:50;
  /* Column so the mobile drawer stacks under the nav row. Frosted glass
     rather than an opaque slab, since the header stays pinned over
     scrolling content. */
  display:flex; flex-direction:column;
  background:var(--gov-nav-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.gov-nav-inner{
  box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:var(--content-max); height:88px; margin:0 auto;
  padding:32px 20px 16px;
}
.gov-brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.gov-brand-icon{width:32px; height:32px; flex-shrink:0; display:block;}
.gov-brand .gov-word{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:600; letter-spacing:-0.025em;
  color:var(--ink-display); line-height:1;
}
.gov-word .q{color:var(--lava-600);}
.gov-end{display:flex; align-items:center; flex-shrink:0; gap:12px;}
.gov-links{display:none; align-items:center; gap:var(--gov-nav-gap);}
.gov-links a{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-ui); font-size:0.875rem; font-weight:400; line-height:1.25;
  color:var(--ink-2); text-decoration:none;
  transition:color .15s ease;
}
.gov-links a:hover{color:var(--lava);}
.gov-links a.active{color:var(--lava); font-weight:600;}
.gov-actions{display:none; align-items:center; gap:12px;}
.gov-login{
  font-family:var(--font-ui); font-size:0.875rem; font-weight:500;
  color:var(--ink-2); text-decoration:none; white-space:nowrap;
  border-radius:2px; transition:color .15s ease;
}
.gov-login:hover{color:var(--lava);}
.gov-login:focus-visible,
.gov-links a:focus-visible,
.gov-mobile a:focus-visible,
.gov-burger:focus-visible{outline:2px solid var(--lava); outline-offset:2px;}
.gov-try,
.gov-specialist,
.gov-mobile .m-cta,
.gov-mobile .m-specialist{
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; height:40px; padding:0 16px;
  font-family:var(--font-ui); font-size:14px; font-weight:600; line-height:1;
  white-space:nowrap; text-decoration:none;
  border-radius:var(--r-pill);
}
.gov-specialist,
.gov-mobile .m-specialist{
  color:var(--ink-on-lava);
  background:var(--lava);
}
.gov-specialist:hover,
.gov-mobile .m-specialist:hover{background:var(--lava-500); color:var(--ink-on-lava);}
.gov-burger{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  box-sizing:border-box; width:40px; height:40px; padding:0;
  color:var(--ink-2);
  border:1px solid var(--border); border-radius:10px;
}
.gov-mobile{
  display:none; flex-direction:column; gap:2px;
  max-height:calc(100dvh - var(--topbar-h)); overflow-y:auto;
  padding:4px 16px 12px;
  background:var(--surface-sunken);
  border-bottom:1px solid var(--border);
}
.gov-mobile a{
  display:flex; align-items:center; box-sizing:border-box;
  padding:8px 0;
  font-family:var(--font-ui); font-size:0.875rem; font-weight:500; line-height:1.25;
  color:var(--ink-2); text-decoration:none;
}
.gov-mobile a:hover{color:var(--lava);}
.gov-mobile a.active{color:var(--lava); font-weight:600;}
.gov-mobile .m-cta,
.gov-mobile .m-specialist{margin-top:8px;}
.gov-try,
.gov-mobile .m-cta{
  color:var(--ink-inverse);
  background:linear-gradient(180deg,var(--ink-btn-top),var(--ink-btn-bottom));
  box-shadow:var(--elev-1);
}
.gov-mobile .m-cta:hover{background:linear-gradient(180deg,var(--ink-btn-top-hover),var(--ink-btn-bottom-hover)); color:var(--ink-inverse);}
.gov-try:hover{background:linear-gradient(180deg,var(--ink-btn-top-hover),var(--ink-btn-bottom-hover)); color:var(--ink-inverse);}
@media (min-width:640px){
  .gov-brand-icon{width:36px; height:36px;}
}
@media (min-width:768px){
  .gov-nav-inner{padding-left:24px; padding-right:24px;}
  .gov-actions{display:flex;}
  .gov-mobile .m-login,
  .gov-mobile .m-cta,
  .gov-mobile .m-specialist{display:none;}
}
@media (min-width:1280px){
  .gov-end{gap:var(--gov-nav-gap);}
  /* Primary links sit centred in the bar rather than packed against the
     actions. The bar is capped at --content-max, so this leaves the same
     ~40px clearance to "Log in" at every desktop width. */
  .gov-nav-inner{position:relative;}
  .gov-links{display:flex; position:absolute; left:50%; top:calc(50% + 8px); transform:translate(-50%,-50%);} /* +8px: the row has 32px above and 16px below the 40px nav line */
  .gov-actions{gap:20px;}
  .gov-burger{display:none;}
  .gov-mobile{display:none !important;} /* beats the inline display the burger script sets */
}

/* ─────────────────── BUTTONS / EYEBROW ─────────────────── */
/* Height + type match guest-home pricing CTA: 40px / 14px
   (frontend/src/constants/marketingCta.js). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-sizing:border-box;
  height:40px; min-height:40px; padding:0 20px;
  font-family:var(--font-marketing-ui); font-size:var(--size-field); font-weight:var(--weight-semibold); line-height:1;
  border-radius:9999px; cursor:pointer; text-decoration:none;
  transition:transform .16s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease;
}
.btn svg{width:16px; height:16px; flex-shrink:0;}
.btn-primary{color:var(--ink-on-lava); background:var(--lava); box-shadow:0 4px 14px rgba(232,93,0,0.25);}
.btn-primary:hover{background:var(--lava-500); transform:translateY(-1px); box-shadow:0 8px 22px rgba(232,93,0,0.3);}
.btn-primary .arrow{transition:transform .18s ease;}
.btn-primary:hover .arrow{transform:translateX(3px);}
.btn-ghost{color:var(--ink-display); background:var(--surface); border:1px solid var(--border-strong);}
.btn-ghost:hover{transform:translateY(-1px); border-color:var(--ink-display);}
.btn-ghost svg{color:var(--lava);}

/* Shared marketing form controls — same height/type as .btn (40px / --size-field). */
.field-control{
  box-sizing:border-box;
  width:100%;
  height:40px;
  min-height:40px;
  padding:0 14px;
  font-family:var(--font-marketing-ui);
  font-size:var(--size-field);
  font-weight:var(--weight-medium);
  line-height:1;
  color:var(--ink-display);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:10px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field-control::placeholder{color:var(--ink-muted);}
.field-control:hover{border-color:var(--border-hover, var(--ink-display));}
.field-control:focus,
.field-control:focus-visible{
  border-color:var(--lava);
  box-shadow:0 0 0 3px var(--lava-ring);
}
textarea.field-control{
  height:auto;
  min-height:120px;
  padding:var(--sp-3) 14px;
  line-height:1.5;
  resize:vertical;
}
/* Native <select> fallback: wrap in .select-control so the chevron is a
   token-coloured mask on the wrapper (a background-image data URI cannot
   read a CSS variable). The pseudo-element is decorative and never
   intercepts pointer events, so the native control keeps its own a11y. */
select.field-control{
  appearance:none;
  -webkit-appearance:none;
  padding-right:var(--sp-10);
  cursor:pointer;
  background-color:var(--surface);
}
.select-control{position:relative; width:100%;}
.select-control::after{
  content:"";
  position:absolute;
  top:50%;
  right:var(--sp-3);
  width:16px;
  height:16px;
  transform:translateY(-50%);
  pointer-events:none;
  background-color:var(--ink-subtle);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* Marketing mirror of app Select (frontend/src/components/ui/select.jsx) */
.menu-select{position:relative; width:100%;}
.menu-select-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
  text-align:left;
  cursor:pointer;
}
.menu-select-trigger .menu-select-value{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.menu-select svg{
  display:block;
  width:16px;
  height:16px;
  max-width:16px;
  max-height:16px;
  flex-shrink:0;
}
.menu-select-trigger .menu-select-chevron{
  opacity:.5;
  color:var(--ink-display);
}
.menu-select-trigger[aria-expanded="true"] .menu-select-chevron{opacity:.8;}
.menu-select-menu{
  position:absolute;
  z-index:50;
  top:calc(100% + var(--sp-1));
  left:0;
  right:0;
  margin:0;
  padding:var(--sp-1);
  list-style:none;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--elev-3);
  max-height:min(280px, 50vh);
  overflow:auto;
}
.menu-select-menu[hidden]{display:none !important;}
.menu-select-option{
  position:relative;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:var(--sp-2);
  width:100%;
  box-sizing:border-box;
  min-height:36px;
  padding:6px var(--sp-8) 6px 10px;
  border:0;
  border-radius:6px;
  background:transparent;
  font-family:var(--font-marketing-ui);
  font-size:var(--size-field);
  font-weight:var(--weight-medium);
  line-height:1.3;
  color:var(--ink-display);
  text-align:left;
  cursor:pointer;
}
.menu-select-option > span{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.menu-select-option:hover,
.menu-select-option:focus-visible,
.menu-select-option[data-highlighted="true"]{
  background:var(--lava-wash);
  color:var(--lava-600);
  outline:none;
}
.menu-select-option[aria-selected="true"]{
  background:var(--lava-wash);
  color:var(--lava-600);
}
.menu-select-option .menu-select-check{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  opacity:0;
  pointer-events:none;
  color:var(--lava-600);
}
.menu-select-option[aria-selected="true"] .menu-select-check{opacity:1;}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px 6px 11px; border-radius:9999px;
  background:var(--surface);
  border:1px solid var(--border-strong);
  box-shadow:var(--elev-1);
  font-family:var(--font-marketing-ui);
  font-size:12.5px; font-weight:600; color:var(--ink-display);
}
/* The Australian-owned trust line above the home hero (it replaced the old
   scrolling top bar); same treatment as the app home page's eyebrow. */
.hero-trust{
  margin:0 0 12px;
  font-family:var(--font-marketing-ui);
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--lava-text);
}
.eyebrow .ping{position:relative; display:inline-flex; width:8px; height:8px;}
.eyebrow .ping i{position:absolute; inset:0; border-radius:50%; background:var(--lava);}
.eyebrow .ping i:first-child{opacity:.65; animation:auPing 2.2s ease-out infinite;}
@keyframes auPing{0%{transform:scale(1);opacity:.65;}80%,100%{transform:scale(2.4);opacity:0;}}

/* ─────────────────── PAGE SCAFFOLD (subpages) ─────────────────── */
.page-hero{background:var(--canvas-app); padding:clamp(40px,6vw,72px) 0 clamp(22px,3vw,36px);}
.page-hero-inner{max-width:var(--content-max); margin:0 auto; padding:0 clamp(20px,4vw,40px);}
.page-h1{
  font-family:var(--font-display);
  font-size:clamp(28px,3vw + 0.4rem,42px);
  line-height:1.12; letter-spacing:-0.022em; font-weight:500;
  color:var(--ink-display); max-width:22ch; margin-top:16px;
}
.page-sub{
  margin-top:16px; font-family:var(--font-marketing-ui);
  font-size:clamp(14.5px,0.5vw + 12px,16.5px); line-height:1.6;
  color:var(--ink-secondary); max-width:58ch;
}
.section{max-width:var(--content-max); margin:0 auto; padding:clamp(36px,5vw,64px) clamp(20px,4vw,40px);}
.section.tight{padding-top:clamp(20px,3vw,36px);}
.section-band{background:var(--canvas-app); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.section-head{margin-bottom:clamp(20px,3vw,32px);}
.section-kicker{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--lava-text);}
.section-h2{
  font-family:var(--font-display); font-size:clamp(1.45rem,2.4vw,2rem);
  font-weight:600; letter-spacing:-0.02em; color:var(--ink-display); margin-top:10px; max-width:30ch;
}
.section-sub{margin-top:12px; font-family:var(--font-marketing-ui); font-size:15px; line-height:1.6; color:var(--ink-secondary); max-width:62ch;}

/* ─────────────────── QUOTE BAND ─────────────────── */
.quote-band{background:var(--canvas-app); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.quote-inner{max-width:var(--content-max); margin:0 auto; padding:clamp(22px,3.2vw,40px) clamp(20px,4vw,40px);}
.quote-q{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.25; letter-spacing:-0.02em;
  color:var(--ink-display); max-width:30ch;
}
.quote-support{
  margin-top:18px; font-family:var(--font-marketing-ui);
  font-size:clamp(15px,1.2vw,17px); line-height:1.6; color:var(--ink-secondary); max-width:62ch;
}
.quote-pills{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px;}
.qp{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:9999px;
  background:var(--surface); border:1px solid var(--border);
  font-family:var(--font-marketing-ui); font-size:12.5px; font-weight:500; color:var(--ink-secondary);
}
.qp svg{width:13px; height:13px; color:var(--positive);}

/* ─────────────────── VALUE CARDS ─────────────────── */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px);}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr));}
.vcard{
  position:relative; overflow:hidden;
  background:var(--card-wash);
  border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:clamp(22px,2.4vw,28px);
  box-shadow:var(--elev-2);
  transition:transform .25s ease, box-shadow .3s ease;
}
.vcard:hover{transform:translateY(-3px); box-shadow:var(--elev-3);}
.vicon{
  width:40px; height:40px; border-radius:10px; margin-bottom:16px;
  display:grid; place-items:center; color:var(--lava-deep);
  background:var(--lava-wash); border:1px solid rgba(232,93,0,0.22);
  box-shadow:inset 0 1px 0 var(--inset-highlight);
}
.vicon svg{width:20px; height:20px;}
.vcard h3{font-family:var(--font-display); font-size:1.2rem; font-weight:600; letter-spacing:-0.015em; color:var(--ink-display); margin-bottom:9px;}
.vcard p{font-family:var(--font-marketing-ui); font-size:0.95rem; line-height:1.55; color:var(--ink-secondary);}
.vcard .vmore{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:var(--font-marketing-ui); font-size:13px; font-weight:600; color:var(--lava-text);}
.vcard .vmore svg{width:14px; height:14px;}

/* ─────────────────── STEP ROWS ─────────────────── */
.steps-row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px);}
@media(max-width:980px){.steps-row{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.steps-row{grid-template-columns:1fr;}}
.step-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:18px; box-shadow:var(--elev-1);}
.step-card .n{
  width:26px; height:26px; border-radius:9999px;
  background:var(--lava-wash); border:1px solid rgba(232,93,0,0.25); color:var(--lava-text);
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; display:grid; place-items:center;
}
.step-card h3{font-family:var(--font-marketing-ui); font-size:14.5px; font-weight:600; color:var(--ink-display); margin-top:12px;}
.step-card p{font-family:var(--font-marketing-ui); font-size:12.5px; line-height:1.5; color:var(--ink-secondary); margin-top:4px;}

/* ─────────────────── CHECK LIST ─────────────────── */
.check-list{display:flex; flex-direction:column; gap:12px; margin-top:18px;}
.check-item{display:flex; gap:12px; align-items:flex-start;}
.check-item .ck{
  flex:none; width:22px; height:22px; border-radius:7px; margin-top:1px;
  background:var(--positive-wash); border:1px solid rgba(22,163,74,0.3); color:var(--positive);
  display:grid; place-items:center;
}
.check-item .ck svg{width:12px; height:12px;}
.check-item .t{font-family:var(--font-marketing-ui); font-size:14px; font-weight:600; color:var(--ink-display);}
.check-item .d{font-family:var(--font-marketing-ui); font-size:13px; color:var(--ink-secondary); line-height:1.5; margin-top:1px;}

/* ─────────────────── DEMO EMBED ─────────────────── */
.demo-frame-card{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(232,93,0,0.06) 0%, transparent 55%),
    linear-gradient(155deg, var(--canvas-sage-soft) 0%, var(--canvas-sage) 60%, var(--canvas-sage-deep) 100%);
  border:1px solid var(--border);
  border-radius:var(--r-3xl);
  box-shadow:var(--elev-3), inset 0 1px 0 var(--inset-highlight);
  padding:14px;
}
.demo-frame-card iframe{
  display:block; width:100%; border:1px solid var(--border);
  border-radius:var(--r-xl); background:var(--surface);
}
.demo-caption{
  margin-top:10px; text-align:center;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
  color:var(--ink-muted);
}

/* ─────────────────── PROSE (legal / long-form) ─────────────────── */
.prose{max-width:760px;}
/* Trust document pages — fill the section width (not a narrow reading column). */
.prose.trust-doc{max-width:none; width:100%;}
.prose h2{font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:-0.015em; color:var(--ink-display); margin:34px 0 10px;}
.prose h3{font-family:var(--font-marketing-ui); font-size:1.02rem; font-weight:600; color:var(--ink-display); margin:22px 0 8px;}
.prose p{font-family:var(--font-marketing-ui); font-size:14.5px; line-height:1.7; color:var(--ink-secondary); margin:0 0 12px;}
.prose ul{margin:0 0 14px; padding-left:20px;}
.prose li{font-family:var(--font-marketing-ui); font-size:14.5px; line-height:1.7; color:var(--ink-secondary); margin-bottom:6px;}
.prose strong{color:var(--ink-display); font-weight:600;}
.prose a{color:var(--lava-text); font-weight:600; text-decoration:underline;}
.prose .blog-disclaimer{font-size:13px; color:var(--ink-muted);}

/* Trust document back control (next to the Trust Centre · Doc eyebrow). */
.doc-nav{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.doc-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-height:36px;
  border-radius:9999px;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--ink-display);
  text-decoration:none;
  flex-shrink:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.doc-back:hover{
  border-color:var(--lava);
  color:var(--lava);
  background:var(--lava-soft, rgba(232,93,0,0.08));
}
.doc-back:focus-visible{
  outline:2px solid var(--lava);
  outline-offset:2px;
}
.doc-back svg{
  width:18px;
  height:18px;
  display:block;
}
.page-hero-inner .doc-nav + .page-h1,
.page-hero-inner .eyebrow + .page-h1{
  margin-top:16px;
}
/* Trust / doc heroes (.page-hero.doc-hero, trust-*.html) let the title and
   subtitle use the full content width instead of the 22ch / 58ch measure
   (do not force a mid-line wrap while empty space remains on the right).
   Every other .page-hero keeps the base .page-h1 / .page-sub limits. */
.page-hero.doc-hero .page-h1{max-width:none;}
.page-hero.doc-hero .page-sub{max-width:none; width:100%;}
.prose.trust-doc p,
.prose.trust-doc li{max-width:none;}

/* ── Blog (static marketing — design-system aligned) ── */
.blog-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;}
.blog-hero .page-h1{max-width:none;}
.blog-toolbar-section{padding-top:0; padding-bottom:clamp(16px,2.5vw,28px);}
.blog-featured-section{padding-top:0; padding-bottom:clamp(20px,3vw,36px);}
.blog-grid-section{padding-top:clamp(20px,3vw,36px);}
.blog-newsletter-section{padding-top:0; padding-bottom:clamp(48px,6vw,80px);}

.blog-toolbar{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.blog-search-wrap{position:relative; max-width:none; margin:0 0 16px;}
.blog-search-icon{position:absolute; left:16px; top:50%; width:16px; height:16px; color:var(--ink-muted); transform:translateY(-50%); pointer-events:none;}
.blog-search{
  width:100%; height:46px; padding:0 18px 0 44px;
  border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink-display);
  font-family:var(--font-marketing-ui); font-size:14px;
  outline:none; transition:border-color .2s ease, background .2s ease;
}
.blog-search:focus{border-color:var(--lava); box-shadow:none; background:var(--surface);}
.blog-search::-webkit-search-cancel-button,
.blog-search::-webkit-search-decoration{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}
.blog-filter-row{display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;}
.blog-filter-row::-webkit-scrollbar{display:none;}
@media(min-width:720px){.blog-filter-row{flex-wrap:wrap; overflow:visible;}}
.blog-filter{
  flex:none; font-family:var(--font-marketing-ui); font-size:12px; font-weight:500;
  border-radius:var(--r-pill); padding:6px 14px;
  border:1px solid var(--border); background:transparent; color:var(--ink-secondary);
  cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.blog-filter:hover,
.blog-filter:focus-visible{
  background:var(--lava-wash);
  border-color:var(--lava);
  color:var(--lava);
}
.blog-filter.is-active{background:var(--lava); border-color:var(--lava); color:var(--ink-on-lava); box-shadow:0 4px 14px rgba(232,93,0,0.25);}
.blog-filter.is-active:hover,
.blog-filter.is-active:focus-visible{
  background:var(--lava-500);
  border-color:var(--lava-500);
  color:var(--ink-on-lava);
}

.blog-chip{
  display:inline-flex; align-self:flex-start; align-items:center;
  font-family:var(--font-marketing-ui); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--chip-color, var(--lava));
  background:var(--lava-wash);
  background:color-mix(in srgb, var(--chip-color, var(--lava)) 14%, transparent);
  border-radius:6px; padding:4px 8px; margin-bottom:12px;
}

.blog-featured{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  overflow:hidden; border:1px solid var(--border); border-radius:var(--r-2xl);
  background:var(--surface); text-decoration:none; color:inherit;
  box-shadow:var(--elev-2);
  transition:transform .25s ease, box-shadow .3s ease;
}
.blog-featured:hover{transform:translateY(-3px); box-shadow:var(--elev-3);}
.blog-featured-visual{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:260px;
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(232,93,0,0.06) 0%, transparent 55%),
    linear-gradient(155deg, var(--canvas-sage-soft) 0%, var(--canvas-sage) 60%, var(--canvas-sage-deep) 100%);
}
@media(min-width:768px){.blog-featured-visual{min-height:300px;}}
.blog-featured-rings{position:relative; display:grid; place-items:center; width:100%; height:100%; min-height:inherit;}
.blog-ring{position:absolute; top:50%; left:50%; border:1px solid var(--border); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; box-sizing:border-box;}
.blog-ring--sm{width:180px; height:180px;}
.blog-ring--lg{width:280px; height:280px; border-color:var(--border);}
.blog-logo-word{
  position:relative; z-index:1;
  font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.25rem);
  font-weight:600; letter-spacing:-0.02em; color:var(--ink-display);
  transition:transform .25s ease;
}
.blog-featured:hover .blog-logo-word{transform:translateY(-3px);}
.blog-logo-word .q{color:var(--lava); font-weight:700;}
.blog-featured-body{display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,3.5vw,36px);}
.blog-featured-body h2{
  font-family:var(--font-display); font-size:clamp(1.35rem,2.2vw,1.75rem);
  font-weight:600; line-height:1.25; letter-spacing:-0.02em; color:var(--ink-display); margin:0 0 12px;
}
.blog-featured-body > p{font-family:var(--font-marketing-ui); font-size:15px; line-height:1.65; color:var(--ink-secondary); margin:0 0 18px;}
.blog-meta-row{display:flex; align-items:center; gap:10px; font-family:var(--font-marketing-ui); font-size:13px; color:var(--ink-muted); margin-bottom:18px;}
.blog-meta-dot{width:3px; height:3px; border-radius:50%; background:var(--ink-subtle); flex:none;}
.blog-read{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-marketing-ui); font-size:14px; font-weight:600; color:var(--lava);}
.blog-read-icon{width:14px; height:14px; transition:transform .18s ease;}
.blog-featured:hover .blog-read-icon{transform:translateX(3px);}

.blog-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
.blog-grid--related{margin-top:0;}
.blog-card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--border); border-radius:14px;
  background:var(--surface); text-decoration:none; color:inherit;
  box-shadow:var(--elev-1);
  transition:transform .3s ease, box-shadow .3s ease;
}
.blog-card[hidden],
.blog-card.is-hidden,
.blog-featured-section[hidden],
.blog-grid-section[hidden],
.blog-grid-head[hidden],
.blog-empty[hidden]{
  display:none !important;
}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--elev-3);}
.blog-card-visual{
  position:relative; display:flex; align-items:center; justify-content:center; height:160px;
  box-shadow:inset 0 1px 0 var(--inset-highlight), inset 0 -1px 0 var(--border);
}
.blog-card[data-tone="0"] .blog-card-visual{background:linear-gradient(135deg, var(--silver-1) 0%, var(--silver-2) 50%, var(--silver-3) 100%);}
.blog-card[data-tone="1"] .blog-card-visual{background:linear-gradient(135deg, var(--surface-tint) 0%, var(--silver-2) 50%, var(--silver-3) 100%);}
.blog-card[data-tone="2"] .blog-card-visual{background:linear-gradient(135deg, var(--canvas-sage-soft) 0%, var(--canvas-sage) 50%, var(--canvas-sage-deep) 100%);}
.blog-card[data-tone="3"] .blog-card-visual{background:linear-gradient(135deg, var(--silver-1) 0%, var(--silver-2) 50%, var(--silver-3) 100%);}
.blog-card[data-tone="4"] .blog-card-visual{background:linear-gradient(135deg, var(--surface) 0%, var(--surface-tint) 50%, var(--silver-3) 100%);}
.blog-card[data-tone="5"] .blog-card-visual{background:linear-gradient(135deg, var(--surface-sunken) 0%, var(--silver-2) 50%, var(--silver-3) 100%);}
.blog-card-stripe{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--chip-color, var(--lava)); opacity:.75;
}
.blog-card-striations{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, var(--inset-highlight) 0, var(--inset-highlight) 1px, var(--muted-fill) 1px, var(--muted-fill) 2px);
  mix-blend-mode:overlay;
}
.blog-card-index{
  position:relative; z-index:1;
  font-family:var(--font-marketing-ui); font-size:42px; font-weight:700;
  letter-spacing:-0.03em; color:var(--ink-subtle);
  text-shadow:none;
}
.blog-card-body{padding:24px; display:flex; flex-direction:column; flex:1;}
.blog-card-body h3{
  font-family:var(--font-marketing-ui); font-size:1rem; font-weight:600;
  line-height:1.35; letter-spacing:-0.015em; color:var(--ink-display);
  margin:0 0 10px;
}
.blog-card-body > p{
  font-family:var(--font-marketing-ui); font-size:14px; line-height:1.6; color:var(--ink-secondary);
  margin:0 0 16px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card-footer{
  display:flex; align-items:center; justify-content:flex-end;
  font-family:var(--font-marketing-ui); font-size:12px; color:var(--ink-muted);
}
.blog-meta{font-family:var(--font-marketing-ui); font-size:12px; color:var(--ink-muted);}
.blog-empty{text-align:center; font-family:var(--font-marketing-ui); font-size:14px; color:var(--ink-muted); padding:32px 0 8px;}

.blog-newsletter{
  width:100%; max-width:100%; box-sizing:border-box;
  text-align:center;
  position:relative; overflow:visible;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, var(--lava-wash) 0%, transparent 62%),
    var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  padding:clamp(28px,5.5vw,64px) clamp(16px,5vw,72px);
  box-shadow:var(--elev-1);
}
.blog-newsletter-kicker{
  display:block; margin-bottom:10px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--lava-text);
}
.blog-newsletter h2{
  font-family:var(--font-display); font-size:clamp(1.45rem,2.4vw,1.9rem);
  font-weight:600; letter-spacing:-0.02em; color:var(--ink-display); margin:0 0 10px;
}
.blog-newsletter > p{
  font-family:var(--font-marketing-ui); font-size:15px; line-height:1.65; color:var(--ink-secondary);
  margin:0 auto 28px; max-width:44ch;
}
.blog-newsletter-form{display:flex; flex-direction:column; gap:10px; width:100%; min-width:0; margin:0; align-items:stretch;}
@media(min-width:640px){.blog-newsletter-form{flex-direction:row; align-items:center;}}
.blog-newsletter-input{
  display:block;
  flex:1; min-width:0; width:100%;
  height:49px; min-height:49px; max-height:49px;
  padding:0 20px;
  border:1px solid var(--border); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink-display);
  font-family:var(--font-marketing-ui); font-size:16px; line-height:49px;
  outline:none;
  -webkit-appearance:none; appearance:none;
  box-sizing:border-box;
  transition:border-color .15s ease;
}
.blog-newsletter-input:focus{border-color:var(--lava); box-shadow:none; background:var(--surface);}
.blog-newsletter-form .btn{
  flex:none;
  white-space:nowrap;
  appearance:none;
  -webkit-appearance:none;
  border:none;
  cursor:pointer;
  font:inherit;
  height:49px; min-height:49px;
  padding:0 28px;
}
.blog-newsletter-form .btn.is-success{background:var(--positive); box-shadow:0 4px 14px rgba(22,163,74,0.25);}
.blog-newsletter-actions{
  display:flex; flex-direction:column; align-items:stretch;
  gap:24px; width:100%; max-width:28rem; margin:0 auto; min-width:0;
}
/* Subscribe outcome (KAN-319). The button colour alone is not an answer —
   this is the live region that says what actually happened. */
.blog-newsletter-status{
  margin:-12px 0 0; padding:0; max-width:none;
  font-family:var(--font-marketing-ui); font-size:13px; line-height:1.5;
  color:var(--positive-ink); text-align:center;
}
.blog-newsletter-status.is-error{color:var(--negative);}
.blog-newsletter-status.is-hidden,
.blog-newsletter-status[hidden]{display:none;}
.blog-newsletter-fine{
  margin:0; padding:0; max-width:none;
  font-family:var(--font-marketing-ui); font-size:13px; line-height:1.5;
  color:var(--ink-muted); text-align:center;
}

.blog-article-hero .page-hero-inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
}
.blog-article-hero .page-h1{max-width:none;}
.blog-article-hero .page-sub{max-width:none;}
.blog-article-hero .blog-chip{align-self:flex-start; margin-top:4px;}
.blog-article-section.section{
  padding-top:clamp(12px,2vw,20px);
}
.blog-article-section .prose.blog-article-body{
  max-width:none;
  margin:0;
}
.blog-meta--hero{margin-top:16px;}
.blog-back{margin:0 0 16px;}
.blog-back-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-marketing-ui); font-size:14px; font-weight:600;
  color:var(--lava); text-decoration:none;
  transition:color .15s ease;
}
.blog-back-btn:hover{color:var(--lava-500);}
.blog-article-body{margin-top:0;}
.blog-related{padding-top:0; padding-bottom:clamp(48px,6vw,72px);}

@media(max-width:960px){
  .blog-featured{grid-template-columns:1fr;}
  .blog-featured-visual{min-height:260px;}
  .blog-ring--sm{width:160px; height:160px;}
  .blog-ring--lg{width:240px; height:240px;}
  .blog-grid,.blog-grid--related{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .blog-toolbar-section,
  .blog-featured-section,
  .blog-grid-section,
  .blog-newsletter-section{
    padding-left:16px; padding-right:16px;
  }
  .blog-featured{border-radius:var(--r-xl);}
  .blog-featured-visual{min-height:280px;}
  .blog-featured-body{padding:22px 22px 24px;}
  .blog-featured-body h2{font-size:1.2rem;}
  .blog-featured-body > p{font-size:14px; margin-bottom:14px;}
  .blog-logo-word{font-size:2rem;}
  .blog-ring--sm{width:170px; height:170px;}
  .blog-ring--lg{width:250px; height:250px;}
  .blog-grid,.blog-grid--related{grid-template-columns:1fr;}
  .blog-newsletter{
    padding:36px 28px 40px;
    border-radius:var(--r-xl);
  }
  .blog-newsletter-actions{gap:20px; max-width:100%; padding:0;}
  .blog-newsletter-form{flex-direction:column; width:100%;}
  .blog-newsletter-input,
  .blog-newsletter-form .btn{
    width:100%;
    max-width:100%;
    height:49px;
    min-height:49px;
    box-sizing:border-box;
  }
  .blog-newsletter > p{font-size:14px; margin-bottom:20px;}
  @media(hover:none){
    .blog-featured:hover,
    .blog-card:hover,
    .blog-newsletter-form .btn:hover{transform:none;}
  }
}
.lava-link{color:var(--lava-text);font-weight:600;}
.steps-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:1020px){.steps-row.cols-4{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.steps-row.cols-4{grid-template-columns:1fr;}}
.doc-meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;
}
.doc-meta span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-muted); background:var(--surface-sunken);
  border:1px solid var(--border); border-radius:9999px; padding:4px 11px;
}

/* Plain-English summary box */
.plain-box{
  background:var(--canvas-sage-soft); border:1px solid var(--border);
  border-left:3px solid var(--lava);
  border-radius:var(--r-xl); padding:18px 20px; margin:22px 0 8px;
}
.plain-box .pb-label{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--lava-text); margin-bottom:10px;
}
.plain-box ul{margin:0; padding-left:18px;}
.plain-box li{font-family:var(--font-marketing-ui); font-size:13.5px; line-height:1.6; color:var(--ink); margin-bottom:6px;}
.plain-box li:last-child{margin-bottom:0;}

/* ─────────────────── TABLES ─────────────────── */
.mk-tbl{width:100%; border-collapse:separate; border-spacing:0; font-family:var(--font-marketing-ui); font-size:13.5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;}
.mk-tbl th{
  text-align:left; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted); font-weight:600;
  padding:11px 14px; background:var(--surface-sunken); border-bottom:1px solid var(--border);
}
.mk-tbl td{padding:12px 14px; border-bottom:1px solid var(--border); color:var(--ink-secondary); vertical-align:top;}
.mk-tbl tr:last-child td{border-bottom:0;}
.mk-tbl td:first-child{color:var(--ink-display); font-weight:600;}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ─────────────────── FAQ ─────────────────── */
.faq{border-top:1px solid var(--border);}
.faq details{border-bottom:1px solid var(--border);}
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 4px; font-family:var(--font-marketing-ui); font-size:15px; font-weight:600; color:var(--ink-display);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{
  flex:none; width:22px; height:22px; border-radius:7px;
  display:grid; place-items:center; position:relative;
  color:var(--lava-deep); background:var(--lava-wash);
  border:1px solid rgba(232,93,0,0.22); font-weight:600; font-size:14px; line-height:1;
}
.faq details[open] summary .pm{
  background:var(--lava); color:transparent; /* hide the static "+" */
}
.faq details[open] summary .pm::after{
  content:"−";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:var(--ink-on-lava); font-size:14px; font-weight:600; line-height:1;
}
.faq .faq-a{padding:0 4px 18px; font-family:var(--font-marketing-ui); font-size:14px; line-height:1.65; color:var(--ink-secondary); max-width:70ch;}

/* ─────────────────── CTA BAND ─────────────────── */
.cta-band{background:var(--canvas-app); border-top:1px solid var(--border);}
.cta-band-inner{
  max-width:var(--content-max); margin:0 auto;
  padding:clamp(40px,6vw,72px) clamp(20px,4vw,40px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px;
}
.cta-band h2{font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:600; letter-spacing:-0.02em; color:var(--ink-display); max-width:26ch;}
.cta-band p{margin-top:8px; font-family:var(--font-marketing-ui); font-size:14px; color:var(--ink-secondary); max-width:52ch;}
.cta-band .cta-actions{display:flex; flex-wrap:wrap; gap:12px;}
.cta-fine{margin-top:10px; font-family:var(--font-marketing-ui); font-size:12px; color:var(--ink-muted);}

/* ─────────────────── FOOTER ───────────────────
   Mirrors src/components/website/MarketingFooter.js (same container, grid,
   type scale and orange column headings). Markup is generated by
   frontend/scripts/syncMarketingNavigation.js. */
/* Same colours as the React footer tokens (--footer-* in liquid-steel-tokens.css):
   a dark ink band in light theme (Figma 1:847), the sunken surface in dark. */
.gov-footer{
  --footer-bg:linear-gradient(180deg,#2A303A,#181C22);
  --footer-text:#ECECEC; --footer-text-muted:#999999; --footer-hair:rgba(255,255,255,.06);
  --footer-heading:var(--lava-500);
  background:var(--footer-bg); border-top:1px solid var(--footer-hair);
}
[data-theme="dark"] .gov-footer{
  --footer-bg:var(--surface-sunken);
  --footer-text:var(--ink-display); --footer-text-muted:var(--ink-secondary); --footer-hair:var(--border);
  --footer-heading:var(--lava-text);
}
.footer-inner{box-sizing:border-box; max-width:var(--content-max); margin:0 auto; padding:0 20px;}
.footer-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px;
  padding:40px 0; text-align:left;
}
.footer-brand{grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start;}
.footer-brand .fb-row{display:inline-flex; align-items:center;}
.footer-brand .fb-icon{width:40px; height:40px; flex-shrink:0; display:block;}
/* The footer is dark in both themes, so the mark is always the light version. */
.footer-brand .fb-icon{filter:invert(1) hue-rotate(180deg);}
.footer-brand .fb-word{font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.4; color:var(--footer-text);}
.footer-brand .fb-word .q{color:var(--lava-600);}
.footer-brand p{
  margin:10px 0 0; max-width:42ch;
  font-family:var(--font-ui); font-size:12px; line-height:1.375;
  color:var(--footer-text-muted);
}
.footer-col{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; text-align:left;}
.footer-col h2{
  margin:0 0 6px;
  font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:0.025em;
  color:var(--footer-heading);
}
.gov-footer .footer-col a,
.footer-col a{
  display:block;
  margin:0 !important;
  padding:4px 0 !important;
  font-family:var(--font-ui);
  font-size:12.5px !important;
  line-height:1.25 !important;
  color:var(--footer-text);
  min-height:0 !important;
  height:auto !important;
  transition:color .15s ease;
}
.gov-footer .footer-col a:hover,
.footer-col a:hover{color:var(--footer-heading);}
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:16px 0; border-top:1px solid var(--footer-hair);
}
.footer-bottom > span{font-family:var(--font-ui); font-size:11px; line-height:1.375; color:var(--footer-text-muted);}
.footer-social-list{display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none;}
.gov-footer .footer-social-link{
  display:grid; place-items:center; width:24px; height:24px; min-height:0 !important;
  border-radius:50%; color:var(--footer-text-muted); transition:color .15s ease;
}
.gov-footer .footer-social-link:hover,
.gov-footer .footer-social-link:focus-visible{color:var(--footer-heading);}
/* The brand SVGs are flat single-colour art, so they are masked into a solid
   shape and recoloured via currentColor (same technique as the React footer's
   .footer-social-icon in styles/layout-contracts.css). */
.footer-social-icon{
  display:block; width:100%; height:100%;
  background-color:currentColor;
  -webkit-mask-image:var(--footer-social-icon-src); -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  mask-image:var(--footer-social-icon-src); mask-mode:alpha; mask-size:contain;
  mask-repeat:no-repeat; mask-position:center;
}
.footer-social-icon--instagram{--footer-social-icon-src:url("social/instagram-icon.svg");}
@media (min-width:768px){
  .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; padding:40px 24px;}
  .footer-brand{grid-column:auto;}
  .footer-brand p{margin-top:16px; max-width:30ch; line-height:1.625;}
  .footer-col{gap:4px;}
  .footer-col h2{margin-bottom:8px; font-size:14px;}
  .gov-footer .footer-col a,
  .footer-col a{
    font-size:14px !important;
    line-height:1.375 !important;
    color:var(--footer-text-muted);
  }
  .footer-bottom{gap:16px;}
  .footer-bottom > span{font-size:12px;}
}
html.marketing-auth-open{
  overflow:hidden;
  /* padding-right set in social-media.js to match scrollbar width */
}
.marketing-auth-overlay{
  position:fixed;inset:0;z-index:2147483646;
  /* Transparent — Dialog inside the embed paints the dim + card together
     (Platform parity). A parent scrim caused an empty-flash before the modal. */
  background:transparent;
}
/* color-scheme:light even on a dark host — Chromium paints an opaque
   iframe canvas when the frame is dark, which hides Meet BIQc / Pricing
   behind a solid sheet. Same rule as Merge Link / html.auth-embed. */
.marketing-auth-overlay iframe,.marketing-auth-warm{
  display:block;width:100%;height:100%;border:0;
  background:transparent;color-scheme:light;
}
/* Off-screen full viewport — 0×0 iframes often never finish booting React. */
.marketing-auth-warm{
  position:fixed !important;
  top:0 !important;
  left:-100vw !important;
  width:100vw !important;
  height:100vh !important;
  opacity:0 !important;
  pointer-events:none !important;
  border:0 !important;
}
/* Static HTML → specialist: keep the React page painted at full size so
   HubSpot finishes before the click. Reveal covers the document. */
.biqc-specialist-page-warm{
  position:fixed !important;
  top:0 !important;
  left:-100vw !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  border:0 !important;
  pointer-events:none !important;
  z-index:0;
  background:var(--canvas-app);
  color-scheme:light;
}
.biqc-specialist-page-warm--open{
  left:0 !important;
  z-index:2147483645;
  pointer-events:auto !important;
}
html.biqc-specialist-page-open{
  overflow:hidden;
}

/* Monogram fallback when a third-party logo CDN fails */
.logo-fb{display:inline-grid; place-items:center; width:100%; height:100%; min-width:18px; min-height:18px; border-radius:6px; background:var(--canvas-sage-soft); border:1px solid var(--border); color:var(--ink-secondary); font-family:var(--font-marketing-ui); font-size:11px; font-weight:600;}

/* ─────────────────── ENTRANCE ANIMATIONS ─────────────────── */
@keyframes heroFadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
.f1{animation:heroFadeUp .7s ease both .05s;}
.f2{animation:heroFadeUp .7s ease both .16s;}
.f3{animation:heroFadeUp .7s ease both .27s;}
.f4{animation:heroFadeUp .7s ease both .38s;}
.f5{animation:heroFadeUp .7s ease both .49s;}
.f6{animation:heroFadeUp .8s ease both .3s;}
.page-hero .f1,
.page-hero .f2,
.page-hero .f3,
.page-hero .f4,
.page-hero .f5,
.page-hero .f6{opacity:1;transform:none;}

/* ─────────────────── RESPONSIVE ─────────────────── */
@media (max-width:980px){
  .cards{grid-template-columns:1fr 1fr;}
  .cards.c2{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .cards{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
}