:root{
  --brand:#0066b2; --brand-bright:#00b7d5; --green:#0db04b; --navy:#134377;
  --ink:#0d1826; --ink-2:#4b5a6b; --ink-3:#5f6d7e;
  --line:#e3e8ee; --line-2:#eef2f6; --bg:#fff; --bg-2:#f6f8fa; --dark:#0c1a29;
  --accent:#134377; --accent-bright:#4a86c9; --accent-soft:#eef2f8; --accent-dark:#0d3159; --accent-on-dark:#9db8dd;
  --head:'Plus Jakarta Sans','PJS Fallback',system-ui,sans-serif; --body:'Inter','Inter Fallback',system-ui,sans-serif;
}
/* 2026-10-10 (Lighthouse, CLS 0.11-0.16 on the hero-stack pages): the Google fonts swap in after
   first paint and re-wrap the hero copy, which pushes the product figure below it down. Metric-matched
   local fallbacks (size-adjust from average advance width vs Arial, ascent/descent from hhea) make the
   swap reflow-free. The generic system-ui fallback has different metrics, so these sit before it. */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Liberation Sans'),local('Arimo');
  size-adjust:107.9%;ascent-override:89.8%;descent-override:22.4%;line-gap-override:0%}
@font-face{font-family:'PJS Fallback';src:local('Arial'),local('Liberation Sans'),local('Arimo');
  size-adjust:104.3%;ascent-override:99.5%;descent-override:21.3%;line-gap-override:0%}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head);margin:0;line-height:1.15;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.skip{position:absolute;left:12px;top:-100px;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;font:600 15px var(--body);text-decoration:none}
.skip:focus{top:12px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
section{padding:96px 0}
section.tight{padding:56px 0}

/* ---- type: six sizes (13 / 15 / 17 / 22 / 32-40 / 44-50), two label styles ---- */
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:12px}
.eyebrow:before{content:"";width:48px;height:3px;background:var(--accent);border-radius:2px;flex-shrink:0}
.kick{font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.num{font:600 13px var(--body);letter-spacing:.08em;color:var(--ink-3)}
h1{font-size:clamp(34px,4.3vw,54px);font-weight:600;line-height:1.08}
h2.big{font-size:clamp(30px,3.1vw,40px);font-weight:600;margin:16px 0 14px;max-width:22ch;line-height:1.12}
h3{font-size:22px;font-weight:600;line-height:1.25}
.lede{font-size:17px;color:var(--ink-2);max-width:60ch;line-height:1.6}
.lede-lg{font-size:17px;color:var(--ink-2);max-width:58ch;line-height:1.6}
.copy p{font-size:17px;line-height:1.65;color:var(--ink-2)}
.copy p+p{margin-top:14px}
.copy b{color:var(--ink);font-weight:600}
.small{font-size:15px;line-height:1.6;color:var(--ink-2)}
/* 2026-09-06 (QA): a bare source URL on vat-calculator.html pushed the page 37px
   wide at 390px. Links are the one place long unbreakable strings appear. */
.lnk{font:600 15px var(--body);color:var(--accent);overflow-wrap:anywhere}
/* 2026-09-06 (QA): the UA gives every fieldset min-inline-size:min-content, which
   it will not shrink below -- paye-calculator.html overflowed 74px at 390px because
   of it. Both calculators build their form out of fieldsets, so fix it once here. */
fieldset{min-width:0}
.lnk:hover{text-decoration:underline}
/* privacy.html / terms.html: long-form legal text in one reading column. */
.legal{max-width:calc(74ch + 64px)}
.legal h2{font-size:22px;font-weight:600;line-height:1.25;margin:44px 0 12px}
.legal h3{font-size:17px;margin:26px 0 8px}
.legal p,.legal ul,.legal ol{margin:0 0 14px;color:var(--ink-2)}
.legal ul,.legal ol{padding-left:24px}
.legal li{margin:4px 0}
.legal .lnk{font-size:inherit}
.legal-date{margin:0;color:var(--ink-2);font-size:15px}

.ph{outline:1px dashed rgba(200,140,40,.9);outline-offset:2px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px var(--body);
  padding:13px 26px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-ghost-dark{border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost-dark:hover{background:rgba(255,255,255,.09)}

/* ---- header: product names lead ---- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:30px;height:84px}
.logo{display:flex;align-items:center;gap:9px;font:700 19px var(--head)}
.menu{display:flex;gap:26px;margin-left:6px}
.menu > a{font:500 15px var(--body);color:var(--ink-2);display:flex;align-items:center;gap:5px;padding:6px 0}
.menu > a:hover,.menu > a[aria-current]{color:var(--ink)}
.menu > a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:18px}
.navtoggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.navtoggle svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round}

/* ---- header: Resources menu (A7) ---- */
.menu-item{position:relative;display:flex}
.menubtn{font:500 15px var(--body);color:var(--ink-2);display:flex;align-items:center;gap:6px;
  padding:6px 0;background:none;border:0;cursor:pointer}
.menubtn:hover,.menubtn[aria-current]{color:var(--ink)}
.menubtn[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
.menubtn svg{width:9px;height:6px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.submenu{position:absolute;top:100%;left:0;margin-top:14px;min-width:250px;list-style:none;
  padding:10px;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 24px 48px -24px rgba(13,24,38,.35);z-index:60}
.submenu[hidden]{display:none}
.submenu-label{display:block;font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:10px 10px 4px}
.submenu li[role="none"]:first-child .submenu-label{padding-top:2px}
/* 2026-09-24 (owner): group labels read as items -- a rule and extra air above
   every group after the first, and a smaller label, separate the sections. */
.submenu li[role="none"]:not(:first-child)>.submenu-label{margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.submenu-label{font-size:11px;letter-spacing:.08em}
.submenu a{display:block;padding:8px 10px;border-radius:6px;font:500 14px var(--body);color:var(--ink-2)}
.submenu a:hover,.submenu a:focus{background:var(--bg-2);color:var(--ink)}
.submenu-sep{height:1px;background:var(--line);margin:8px 4px}

/* ---- product frames: real UI, opens full size ---- */
.shot{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 28px 64px -36px rgba(13,24,38,.45)}
/* 2026-09-07 (P22): width/height attributes on the capture are presentational
   hints -- they set height as well as width, so without height:auto the CSS
   width below stretched the image to the attribute's pixel height. */
.shot img{display:block;height:auto}
.crop{position:relative;overflow:hidden;height:var(--h,420px);background:var(--bg-2)}
.crop img{position:absolute;left:0;top:0;width:var(--w,121.2%);max-width:none;height:auto;transform:translate(var(--tx,-17.5%),var(--ty,-5.33%))}
.shotph{display:grid;place-items:center;height:var(--h,420px);background:
  repeating-linear-gradient(45deg,#f0f3f7,#f0f3f7 8px,#e9eef4 8px,#e9eef4 16px);color:#8e9cab;
  font:600 12px/1.5 var(--body);letter-spacing:.08em;text-align:center;padding:20px}
.cap{display:flex;justify-content:space-between;gap:24px;margin-top:12px;font-size:13px;color:var(--ink-3)}
.cap b{color:var(--ink-2);font-weight:600}
/* 2026-09-07 (P22): the provenance line carried opacity:.75 over --ink-3,
   which lands at 2.9:1 on white -- Lighthouse flagged it on every page that
   has a figure. The token itself is 5.7:1, so dropping the opacity and using
   --ink-3 as pinned clears AA without inventing a colour. */
.cap span:last-child{white-space:nowrap;font-size:12px}
.cap span:last-child:empty{display:none}

/* ---- home hero: headline, one line, then the only fork on the site ---- */
.hero{padding:88px 0 0}
.hero .eyebrow{color:var(--accent)}
.hero h1{max-width:17.8em;margin:18px 0 0}
.hero .lede-lg{margin:22px 0 0}
.routes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:48px 0 0;padding-bottom:88px}
.route{display:flex;flex-direction:column;background:var(--bg-2);border-radius:16px;padding:18px 18px 26px;transition:.15s}
.route:hover{background:#eef2f6}
.rshot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin-bottom:16px}
.rshot .crop,.rshot .shotph{--h:240px}
.rshot img,.rshot .shotph{transition:transform .28s ease}
.route:hover .rshot img,.route:hover .rshot .shotph{transform:scale(1.045)}
/* 2026-09-06 (QA): the two route cards are real product captures, and the register
   wants the demo-data provenance line beside every one. .rcap already matched .cap's
   type and colour; it now matches its layout too, so the provenance sits at the right
   the way it does under every other figure on the site. Do not write the provenance
   phrase itself into this file -- site.css is inlined into every page, and several
   checks count occurrences of it. */
.rcap{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--ink-3);margin:-4px 0 18px}
.rcap span:last-child{white-space:nowrap;font-size:12px}
.rcap b{color:var(--ink-2);font-weight:600}
.rname{font:600 24px var(--head);color:var(--ink);margin:0 0 6px}
.rline{font-size:17px;color:var(--ink);font-weight:500;margin-bottom:16px}
.route .prob{font-size:15px;line-height:1.6;color:var(--ink-2);margin-bottom:10px}
.route .out{font-size:15px;line-height:1.6;color:var(--ink);font-weight:500;margin-bottom:22px}
.rgo{margin-top:auto;font:600 15px var(--body);color:var(--accent);transition:transform .2s ease}
.route:hover .rgo{transform:translateX(5px);text-decoration:underline}
@media(prefers-reduced-motion:reduce){.rshot img,.rshot .shotph,.rgo{transition:none}
  .route:hover .rshot img,.route:hover .rshot .shotph,.route:hover .rgo{transform:none}}

/* ---- client logos ---- */
.logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0}
.logos .lbl{text-align:center;font:500 13px var(--body);color:var(--ink-3);margin-bottom:18px}
.logorow{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.logoph{width:150px;height:52px;border-radius:8px;background:var(--bg-2);display:grid;place-items:center;
  font:600 11px var(--body);letter-spacing:.06em;color:var(--ink-3);text-align:center;padding:6px}
/* real client logos: one slot size whatever the artwork's shape; quiet until hovered */
.clogo{width:150px;height:52px;display:grid;place-items:center}
.clogo img{width:auto;height:auto;max-width:150px;max-height:52px;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.clogo:hover img{filter:none;opacity:1}
/* a symbol-only mark carries its name as text */
.clogo.named{width:auto;grid-auto-flow:column;gap:8px;font:600 13px var(--body);color:var(--ink-2)}

/* ---- calculator teasers (2026-09-21, competitor review fix 5) ----
   home: two ruled columns in the language of .whys; product pages: one field
   that hands its figure to the calculator page. */
.calcs{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}
.calc{border-top:1px solid var(--ink);padding-top:18px}
.calc h3{font-size:18px;margin:12px 0 10px}
.calc p{font-size:15px;line-height:1.65;color:var(--ink-2);max-width:48ch}
.calc .lnk{display:inline-block;margin-top:14px}
.calcgo{display:flex;gap:10px;max-width:440px}
.calcgo input{flex:1;min-width:0;font:500 15px var(--body);padding:12px 14px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fff}
.calcgo input:focus{outline:2px solid var(--accent);outline-offset:1px}
.calcgo .btn{padding:12px 18px}
.calcnote{font-size:13px;color:var(--ink-3);margin-top:10px}
.calcnote .lnk{font-size:13px}

/* ---- mobile strip on the home page (fix 8): copy beside two phone captures ---- */
.mobrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center}
.mobrow .phones{gap:24px;flex-wrap:nowrap}
.mobrow .phonefig{width:220px;flex:none}
.mobrow .crop.phone{height:auto;aspect-ratio:780/1688}
.moblinks{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
@media (max-width:900px){.calcs{grid-template-columns:1fr}.mobrow{grid-template-columns:1fr;gap:36px}
  .mobrow .phones{flex-wrap:wrap}.calcgo{flex-wrap:wrap}}

/* ---- differentiators: the one ruled four-column on the home page ---- */
.whys{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:44px}
.why{padding-top:18px;border-top:1px solid var(--ink)}
.why h3{font-size:18px;font-weight:600;margin:12px 0 10px;line-height:1.3}
.why p{font-size:15px;line-height:1.65;color:var(--ink-2)}

/* ---- customers: editorial quotes, no portraits ---- */
.tgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;margin-top:40px;align-items:start}
.tgrid3{grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px}
.tgrid2{grid-template-columns:repeat(2,1fr);gap:32px;margin-top:56px}
.tcard{border-top:1px solid var(--ink);padding-top:24px}
.tcard blockquote{margin:0 0 22px;font:500 17px/1.65 var(--body);color:var(--ink)}
.tcard.lead blockquote{font:500 24px/1.45 var(--head)}
/* a quote we drafted for a client, shown only until they approve or replace it */
.draftq{display:inline-block;font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:2px 6px;margin-bottom:14px}
.who .nm{font:600 15px var(--body);color:var(--ink)}
.who .rl{font-size:14px;color:var(--ink-3);margin-top:2px}

/* ---- product hero: copy, then the product at full width, uncropped ---- */
.hero-stack{padding:64px 0 80px}
.hero-copy{max-width:64ch}
.hero-stack h1{margin:18px 0 0;font-size:clamp(34px,4vw,50px);line-height:1.08;max-width:22ch}
.hero-stack .sub{font-size:17px;color:var(--ink-2);max-width:60ch;margin:22px 0 30px;line-height:1.6}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-stack figure{margin:52px 0 0}
/* capability index: scope at a glance, after the product has spoken; links down to detail */
.capindex{margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.capindex .lbl{font:600 13px var(--body);color:var(--ink-3);margin-right:6px}
.capl{font:500 13px/1 var(--body);color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:8px 11px;background:#fff;white-space:nowrap}
.capl:hover{border-color:var(--ink-3);color:var(--ink)}

/* ---- credibility line replaces the metric strip ---- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.band p{font:500 17px/1.55 var(--body);color:var(--ink);max-width:52ch}
.band p b{color:var(--accent);font-weight:600}
/* product-specific proof: only customers who run THIS product; slots for more */
.band .proof{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.band .proof .lbl{font:600 13px var(--body);color:var(--ink-3);margin-right:4px;white-space:nowrap}
.band .logoph{width:128px;height:44px;font-size:10px}
.band .logoph.partner{width:auto;padding:0 12px}
.band .clogo{width:128px;height:44px}
.band .clogo img{max-width:128px;max-height:44px}
.band .clogo.named{width:auto}
/* more clients than fit beside the line: the proof row drops below it, full width */
.band.wide .wrap{grid-template-columns:1fr;gap:20px}
.band.wide .proof{justify-content:flex-start;gap:12px 22px}

/* ---- the cycle: five ruled steps — the one ruled row on each product page ---- */
.seq{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin:40px 0 0;padding:0}
.seq li{list-style:none;border-top:1px solid var(--ink);padding-top:16px}
.seq b{display:block;font:600 18px var(--head);margin:10px 0 8px;color:var(--ink)}
.seq span{font-size:15px;line-height:1.55;color:var(--ink-2)}

/* ---- in practice: one explorer, many screens in little space (owner, 2026-09-05) ---- */
.tabs{scroll-margin-top:104px;display:grid;grid-template-columns:272px minmax(0,1fr);margin-top:44px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.tablist{display:flex;flex-direction:column;background:var(--bg-2);border-right:1px solid var(--line)}
.tab{text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:18px 22px;cursor:pointer;font:inherit;color:var(--ink);transition:background .15s}
.tab:last-child{border-bottom:0}
.tab:hover{background:#eef2f6}
.tab b{display:block;font:600 15px/1.3 var(--head)}
.tab span{display:block;font-size:13px;color:var(--ink-3);margin-top:3px}
.tab[aria-selected="true"]{background:#fff;cursor:default}
.tab[aria-selected="true"] b{color:var(--accent)}
.panel{display:none;padding:32px 36px 36px}
.panel.on{display:block}
/* unrolled (wide screens, set by the script in footer.html): every panel on the page in
   order, the list sticky beside them. overflow must be visible or sticky cannot hold, so
   the grey list column is painted by the box itself rather than by a clipped child. */
.tabs.scrolly{overflow:visible;background:linear-gradient(90deg,var(--bg-2) 271px,var(--line) 271px,var(--line) 272px,#fff 272px)}
.tabs.scrolly .tablist{position:sticky;top:100px;align-self:start;background:none;border-right:0;max-height:calc(100vh - 116px);overflow-y:auto}
.tabs.scrolly .tab{cursor:pointer;border-right:1px solid var(--line)}
.tabs.scrolly .tab:first-child{border-top-left-radius:13px}
.tabs.scrolly .tab:last-child{border-bottom:1px solid var(--line)}
.tabs.scrolly .tab[aria-current="true"]{background:#fff;border-right-color:#fff}
.tabs.scrolly .tab[aria-current="true"] b{color:var(--accent)}
.tabs.scrolly .panel{scroll-margin-top:104px;border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.tabs.scrolly .panel:last-child{border-bottom:0}
.tabs.scrolly .panel.seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tabs.scrolly .panel{opacity:1;transform:none;transition:none}}
@media print{.tabs.scrolly .panel{opacity:1;transform:none}}
.panel h3{font-size:24px;margin:8px 0 12px;max-width:26ch}
.panel > p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:62ch}
.pticks{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0;padding:0;list-style:none}
.pticks li{font-size:14px;color:var(--ink-2)}
.pticks li:before{content:"\2022";color:var(--accent);margin-right:8px}
.panel .guard{margin:18px 0 0;padding:14px 16px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:70ch}
.panel .guard b{color:var(--ink)}
.cycle{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--line)}
.cycle li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink-2)}
.cycle b{color:var(--ink);font-weight:600;margin-right:6px}
.pticks li b{color:var(--ink);font-weight:600}
.pshot{margin:24px 0 0}
.modrow .pshot{margin:22px 0 4px}
.pshot .shot{box-shadow:none;border-radius:10px}

/* ---- phone captures (Mobile Sales) ----
   2026-09-06: the PNGs are 780x1688 phone screens. Left to fill a column they
   rendered 536px wide -- twice life size, and the fixed crop height then cut
   half the screen away. The figure is held to a phone's width instead, so one
   --h works at both breakpoints and the capture reads as a phone. */
.phonefig{max-width:300px}
.phonefig .cap{flex-direction:column;gap:4px}
.phonefig .cap span:last-child{white-space:normal}
.crop.phone{height:var(--h,420px)}
.phones{display:flex;flex-wrap:wrap;gap:28px}
.phones .pshot{margin-top:0}
/* a text column beside one phone -- .twocol's 1.2fr right column left a 290px
   gutter of nothing next to a 300px capture. */
.phonerow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}

/* ---- modules (Financials): six rows, name beside detail ---- */
.modrows{margin-top:44px;border-top:1px solid var(--ink)}
.modrow{display:grid;grid-template-columns:260px 1fr;gap:48px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.modrow h3{font-size:22px;margin:8px 0 0}
.modrow p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.modrow .mods{margin:12px 0 0;columns:2;column-gap:32px;list-style:none;padding:0}
.modrow .mods li{border:0;padding:4px 0;font-size:14px;break-inside:avoid}
.modrow .mods li:before{content:"·";margin-right:8px;color:var(--ink-3)}
/* ---- F4 (2026-09-06, benchmark item): two paths out of every module row --
   "See the module" and "Open the report". A reader who wants the detail and a
   reader who wants the evidence each get a next step from the same block. ---- */
.modgo{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px}
.modrow .modgo{margin-top:16px}

/* ---- F5 (2026-09-06, benchmark item): the Inventory & Mobile Sales outcomes
   block. One outcome per ruled row -- the heading is what you get, not what the
   module is called. Same ruled geometry as .modrows, without the fixed name
   column, because an outcome's heading is a sentence rather than a label. ---- */
.outcomes{margin-top:44px;border-top:1px solid var(--ink)}
.outcome{padding:30px 0;border-bottom:1px solid var(--line)}
.outcome h3{font-size:22px;margin:0 0 10px;max-width:34ch}
.outcome p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:70ch}
/* an outcome whose evidence is a phone: the copy sits beside the capture rather
   than above it, so a 300px figure does not leave 700px of empty row. `auto`
   because the fourth outcome carries two phones, not one. */
.outcome .phonerow{grid-template-columns:minmax(0,1fr) auto;gap:56px}

/* ---- one sale, followed through ---- */
.chain{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.chain li{border-top:1px solid var(--ink);padding-top:14px}
.chain b{display:block;font:600 18px var(--head);margin:0 0 8px;color:var(--ink)}
.chain span{font-size:15px;line-height:1.55;color:var(--ink-2)}
.chain-note{margin-top:32px;font-size:15px;color:var(--ink-2);max-width:66ch}

/* ---- the one dark argument on each product page ---- */
.darkband{background:var(--dark);color:#fff}
.darkband .eyebrow{color:var(--accent-on-dark)}
.darkband .eyebrow:before{background:var(--accent-on-dark)}
.darkband h2{color:#fff}
.darkband .lede{color:#a3b5c7}
.gitems{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 40px;margin-top:40px;list-style:none;padding:0}
.gitem{border-top:1px solid rgba(255,255,255,.22);padding-top:16px}
.gitem h3,.gitem h4{font-size:17px;font-weight:600;margin:0 0 7px}
.gitem p{font-size:14px;line-height:1.6;color:#a3b5c7}
.gitem h3 a,.gitem h4 a{color:var(--accent-on-dark);text-decoration:underline;text-underline-offset:3px}
.gitem h3 a:hover,.gitem h4 a:hover{color:#fff}
.subhead{margin:56px 0 0;font:600 13px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark)}
.subhead:first-of-type{margin-top:40px}
.gitems + .subhead{margin-top:48px}
/* ---- gitems/subhead on a light section (e.g. "Everything included") ---- */
.gitems.light .gitem{border-top:1px solid var(--line)}
.gitems.light .gitem h3,.gitems.light .gitem h4{color:var(--ink)}
.gitems.light .gitem p{color:var(--ink-2)}
.gitems.light .gitem h3 a,.gitems.light .gitem h4 a{color:var(--accent)}
.gitems.light .gitem h3 a:hover,.gitems.light .gitem h4 a:hover{color:var(--ink)}
.subhead.light{color:var(--ink-3)}
.cov{width:100%;border-collapse:separate;border-spacing:0;margin-top:20px;font-size:15px;font-variant-numeric:tabular-nums}
.cov th,.cov td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.14);vertical-align:top}
.cov th{font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#95a9bd}
.cov td:first-child{font-weight:600;color:#fff}
/* 2026-09-07 (P22): the row-label column is now <th scope="row"> so the data
   cells have a header to point at (td-has-header). It must keep reading as a
   row label, not as one of the uppercase column heads. */
.cov tbody tr + tr th{font:600 15px/1.6 var(--body);letter-spacing:0;text-transform:none;color:#fff}
.cov .ok{color:#8fe0b0}
.cov .na{color:#7a8ea3}
.cov th:nth-child(n+2),.cov td:nth-child(n+2){width:14%}
.cov td:nth-child(2){width:26%}
.covnote{margin-top:26px;font-size:16px;line-height:1.6;color:#c9d6e3;max-width:66ch}
.covnote b{color:#fff}
.darkband .cov-wrap{overflow-x:auto}
.deflist{display:grid;grid-template-columns:1fr 1fr;gap:18px 48px;margin:36px 0 0}
.deflist div{font-size:15px;line-height:1.6;color:#a3b5c7}
.deflist b{color:#fff;font-weight:600}
dl.deflist{margin:8px 0 0}
.deflist.light{grid-template-columns:1fr;gap:0;margin:0}
.deflist.light div{padding:16px 0;border-top:1px solid var(--line);color:var(--ink-2);font-size:16px}
.deflist.light div:last-child{border-bottom:1px solid var(--line)}
.deflist.light b{color:var(--ink)}
.deflist.light div.ph{outline-offset:-2px}
/* 2026-09-07 (P22): assemble.py wraps each row's `<b>Term.</b> gloss` in the
   <dt>/<dd> pair a <dl> is required to hold -- axe failed the list otherwise.
   Both render inline so the row reads as the one flowing line it always was. */
.deflist dt,.deflist dd{display:inline;margin:0}


/* ---- data tables on a light ground (guides, calculator) ---- */
.tbl{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;margin-top:30px}
.tbl caption{text-align:left;font-size:14px;color:var(--ink-3);padding:0 0 10px}
.tbl th{text-align:left;font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:0 22px 10px 0;border-bottom:1px solid var(--ink)}
.tbl td{padding:13px 22px 13px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;line-height:1.5}
.tbl td b{color:var(--ink);font-weight:600}
.tbl .n{text-align:right;white-space:nowrap}
.tbl th.n{text-align:right}
.tbl .d{white-space:nowrap}
.tbl tfoot td,.tbl .sum td{font-weight:600;color:var(--ink);border-top:1px solid var(--ink);border-bottom:0}
.tbl tr:last-child td{border-bottom:0}
.cov-wrap{overflow-x:auto}

/* ---- A1 (2026-09-06, benchmark item): the Ghana section's four prose cards
   became a linked statutory table -- a finance manager checks a row in five
   seconds instead of reading a paragraph about "compliance". .tbl is a
   light-ground component, so only its colour rules are restated for the dark
   band; the geometry is shared, deliberately. ---- */
.darkband .tbl caption{color:#a3b5c7}
.darkband .tbl th{color:#95a9bd;border-bottom-color:rgba(255,255,255,.4)}
.darkband .tbl td{color:#a3b5c7;border-bottom-color:rgba(255,255,255,.14)}
.darkband .tbl td b{color:#fff}
.darkband .tbl a{color:var(--accent-on-dark);text-decoration:underline;text-underline-offset:3px}
.darkband .tbl a:hover{color:#fff}

/* ---- A5 (2026-09-06, benchmark item): three hubs -- payroll, self-service,
   people operations. Each is a heading, one sentence, two short capability
   columns and a link to its own page. Not ".panel" (the explorer hides those)
   and not ".suites" (removed 2026-09-05, still banned by verify.py). ---- */
.hubs{margin-top:44px;border-top:1px solid var(--ink)}
.hub{padding:32px 0;border-bottom:1px solid var(--line)}
.hub h3{font-size:24px;margin:0 0 10px}
.hub > p{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:68ch}
.hubcols{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;margin:22px 0 0}
.hubcol{border-top:1px solid var(--line);padding-top:14px}
.hubcol b{display:block;font:600 15px var(--head);color:var(--ink);margin-bottom:8px}
.hubcol ul{margin:0;padding:0;list-style:none}
.hubcol li{font-size:14px;line-height:1.6;color:var(--ink-2);padding-left:15px;text-indent:-15px}
.hubcol li:before{content:"\2022";color:var(--accent);margin-right:8px}
.hubgo{display:flex;gap:14px 26px;flex-wrap:wrap;margin-top:20px}

/* ---- A4 (2026-09-06, benchmark item): the platform block, one line per
   primitive. Its own class so the Financials page can reuse the pattern with
   its own five lines rather than a shared block that overclaims for one side. ---- */
.platform{margin-top:40px;border-top:1px solid var(--ink)}
.platform > div{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;padding:20px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.platform b{font:600 17px var(--head);color:var(--ink)}
.platform p{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:72ch}

/* ---- A8 (2026-09-06, benchmark item): the works-with strip. File and format
   names, never third-party logos we cannot licence. ".chip" is banned page-wide
   (no chip cloud in the hero), hence .wfmt. ---- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 40px;margin-top:40px}
.wgroup{border-top:1px solid var(--ink);padding-top:14px}
.wgroup b{display:block;font:600 15px var(--head);color:var(--ink);margin-bottom:10px}
.wfmts{display:flex;flex-wrap:wrap;gap:6px}
.wfmt{font:500 13px/1 var(--body);color:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  padding:8px 11px;background:#fff}
.wnote{margin-top:30px;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:72ch}

/* ---- two-column prose blocks: the join, getting started ---- */
.join{background:var(--bg)}
.twocol{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.plan{list-style:none;padding:0;margin:0;counter-reset:s}
.plan li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.plan li:last-child{border-bottom:1px solid var(--line)}
.plan li:before{content:counter(s,decimal-leading-zero);font:600 13px var(--body);letter-spacing:.08em;color:var(--ink-3);padding-top:4px}
.plan b{display:block;font:600 17px var(--head);color:var(--ink);margin-bottom:4px}
.plan span{font-size:15px;line-height:1.6;color:var(--ink-2)}

/* ---- faq ---- */
.faq{max-width:760px;margin-top:36px;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font:600 17px var(--head);color:var(--ink);display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 22px/1 var(--body);color:var(--ink-3);flex-shrink:0}
.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 0 20px;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:64ch}

/* ---- closing ---- */
.final{background:var(--dark);color:#fff;padding:160px 0}
.final .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"h row" "p row" "fine fine";gap:0 64px;align-items:start}
.final .btn-primary{background:#fff;color:var(--dark)}
.final .btn-primary:hover{background:#e8eef5}
.final h2{grid-area:h;font-size:clamp(32px,3.6vw,40px);font-weight:600;margin:0 0 14px;max-width:18ch}
.final .wrap > p:not(.fine){grid-area:p;color:#a3b5c7;max-width:50ch;margin:0;font-size:17px}
.final .row{grid-area:row;display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
/* the demo form: plain fields, one button, no backend yet */
.demo{grid-area:row;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.demo > *{grid-column:1;min-width:0}
.demo .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demo label{display:grid;gap:6px;font:500 13px var(--body);color:#a3b5c7}
.demo input,.demo select{font:400 15px var(--body);color:var(--ink);background:#fff;border:1px solid transparent;border-radius:8px;padding:12px 14px;width:100%;min-height:44px}
.demo input:focus-visible,.demo select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.demo .frow{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.demo .fnote{grid-area:auto;font-size:13px;color:#7a8ea3;max-width:none;margin:0}
.wa{background:#25D366;color:var(--dark);border:none}
.wa:hover{background:#1fbd5a}
.final .fine{grid-area:fine;margin-top:36px;font-size:13px;color:#7a8ea3;border-top:1px solid rgba(255,255,255,.1);padding-top:18px}

footer{background:#08131f;color:#8496a8;padding:60px 0 28px;font-size:14px;border-top:1px solid #1b2432}
/* 2026-09-06 (QA): a sixth column (Industries) joined the footer, so the four
   equal columns became five and the gap tightened to keep the row on one line. */
.fgrid{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:26px}
footer .fh{font:600 12px var(--head);color:#fff;letter-spacing:.11em;text-transform:uppercase;margin:0 0 15px;white-space:nowrap}
footer a{display:block;color:#8496a8;padding:5px 0}
footer a:hover{color:#fff}
.fbrand p{margin:13px 0;max-width:32ch;color:#75879a;font-size:13px}
.fbrand .offices{line-height:1.8}
.fbrand .offices a{display:inline;padding:0;color:inherit}
.fbrand .offices a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:22px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#7d8ea3}

/* ---- keyboard focus — WCAG 2.1 AA ---- */
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px;border-radius:3px}
.final a:focus-visible,.final .btn:focus-visible,footer a:focus-visible,.darkband a:focus-visible{outline-color:#fff}

/* ---- responsive ---- */
@media(max-width:1100px){
  .band .wrap{grid-template-columns:1fr;gap:18px}
  .band .proof{justify-content:flex-start}
}
@media(max-width:1000px){
  .whys{grid-template-columns:1fr 1fr}
  .seq{grid-template-columns:repeat(3,1fr)}
  .chain{grid-template-columns:repeat(3,1fr)}
  /* 2026-09-06 (QA): `1fr` is minmax(auto,1fr), and `auto` floors the track at the
     column's min-content -- paye-calculator.html's breakdown tables floored it at
     436px and pushed the whole page 74px wide at 390. minmax(0,1fr) lets the track
     shrink; the tables already sit in .cov-wrap, which scrolls them. */
  .twocol,.phonerow{grid-template-columns:minmax(0,1fr);gap:36px}
  /* F5: .outcome .phonerow outbids the line above on specificity, so the
     narrow-viewport collapse has to be restated at the same weight. */
  .outcome .phonerow{grid-template-columns:1fr;gap:36px}
  .gitems{grid-template-columns:1fr 1fr}
  .works{grid-template-columns:1fr 1fr}
  .modrow{grid-template-columns:200px 1fr;gap:32px}
}
@media(max-width:900px){
  html{scroll-padding-top:78px}
  .nav{gap:14px;height:66px}
  .menu{display:none}
  .navtoggle{display:inline-flex}
  .nav-cta{margin-left:0}
  .nav-cta .btn{font-size:14px;padding:11px 16px}
  header.open .menu{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;
    background:#fff;border-bottom:1px solid var(--line);padding:10px 28px 16px}
  header.open .menu > a{padding:12px 0;font-size:16px}
  /* A7: on mobile the Resources dropdown collapses into a plain sub-list inside
     the same hamburger drawer -- no popover, no hover, the button stays as a
     non-interactive group label. */
  .menu-item{flex-direction:column}
  .menubtn{padding:12px 0;font-size:16px;cursor:default}
  .menubtn svg{display:none}
  .submenu[hidden]{display:block}
  .submenu{position:static;margin:0 0 8px;padding:0 0 0 4px;border:0;box-shadow:none;background:none}
  .submenu-label{padding:8px 0 2px;color:var(--ink-3)}
  .submenu li[role="none"]:first-child .submenu-label{padding-top:0}
  .submenu li[role="none"]:not(:first-child)>.submenu-label{margin-top:6px;padding-top:10px}
  .submenu a{padding:8px 0 8px 12px;font-size:15px}
  .submenu-sep{display:none}
  .routes{grid-template-columns:1fr;gap:20px}
  .fgrid{grid-template-columns:1fr 1fr}
  .tgrid{grid-template-columns:1fr;gap:36px}
  .tabs{grid-template-columns:1fr}
  .tablist{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .tab{flex:0 0 auto;border-bottom:0;border-right:1px solid var(--line);padding:14px 16px}
  .tab span{display:none}
  .panel{padding:22px 20px 24px}
  .modrow{grid-template-columns:1fr;gap:12px}
  .modrow .mods{columns:1}
  .deflist{grid-template-columns:1fr}
  .hubcols,.works{grid-template-columns:1fr}
  .platform > div{grid-template-columns:1fr;gap:8px}
}
@media(max-width:600px){
  section{padding:64px 0}
  .hero{padding-top:56px}
  .hero-stack{padding:48px 0 56px}
  .final{padding:96px 0}
  .final .wrap{grid-template-columns:1fr;grid-template-areas:"h" "p" "row" "fine"}
  .final .row{justify-content:flex-start;margin-top:28px}
  .demo{margin-top:28px}
  .demo .f2{grid-template-columns:1fr}
  .whys,.seq,.chain,.gitems{grid-template-columns:1fr}
  .crop{height:210px}
  /* 2026-09-06: :not(.phone) -- a phone capture is already held to a phone's
     width, so the mobile zoom would blow it back up and re-crop it. Setting
     --w on the img also shadows the inline --w on the .crop parent. */
  .crop:not(.phone) img{--w:230%;--tx:-17.5%}
  /* .tight = the PNG is already chrome-free (Financials captures are clipped
     to the report table or to #content-wrapper), so there is no left rail to
     skip past. --tx/--ty are fractions of the source image and hold at every
     width; only --w changes the zoom, and the zoom above is what keeps the
     figures legible on a phone. */
  /* 2026-09-06: a blanket 340px is taller than a short wide capture renders at
     190% zoom (bank rec, GL monitor), which left a blank band under the figure.
     --hm overrides it per figure where the capture is shorter than the box. */
  .crop.tight{height:var(--hm,340px)}
  .crop.tight img{--w:190%;--tx:0}
  .rshot .crop.tight img{--tx:-2%}
  .rshot .crop{height:190px}
  .rshot .crop img{--w:200%;--tx:-19.1%}
  .capl{padding:12px 12px}
  .final .row .btn{min-width:188px}
  .fine a{display:inline-block;padding:10px 0}
  .band .proof{flex-basis:100%}
  .shotph{height:220px}
  /* 2026-09-06 (QA): .rcap joined .cap's flex row, so it joins the narrow-viewport
     stack too -- side by side there would squeeze both halves to a few words. */
  .cap,.rcap{flex-direction:column;gap:4px}
  .cap span:last-child,.rcap span:last-child{white-space:normal}
  .rgo{padding:12px 0 0}
  footer a{padding:9px 0}
  .fgrid{grid-template-columns:1fr}
  .cov th,.cov td{padding:10px 8px;font-size:13px}
}

/* ---- print (2026-09-06, F3): capability list pages are meant to be printed.
   Hide chrome, force plain black-on-white text, keep tables/groups from
   splitting across a page break. No new colours -- ink/line tokens only. ---- */
@media print{
  header,footer,.final,.capprint{display:none}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  section{padding:24px 0}
  .capgroup{break-inside:avoid;page-break-inside:avoid}
  .tbl,.faq,.plan{break-inside:avoid;page-break-inside:avoid}
}