/* ============================================================
   Gnosis V2 commercial website, one shared stylesheet.
   Brand tokens verbatim from website-handoff/01-build-spec.md;
   component recipes translated from the approved design canvas
   (boards 1a to 1c, 2a to 2d). Desktop canvas is 1440px.
   ============================================================ */

:root {
  --teal: #008E9C;
  --teal-hover: #007580;
  --teal-deep: #005f69;
  --link: #007580;            /* WEB-POLISH-OCT-7: the body link colour, the brand teal family member that passes AA on white (5.44:1; #008E9C is 3.93:1) */
  --cyan: #0AE2D8;            /* dark grounds only */
  --petrol: #003849;
  --ink: #1D1D1B;
  --ink-2: #242D35;
  --panel: #F4F6F8;
  --zebra: #FAFBFC;
  --border: #E5E8EC;
  --border-soft: #EEF0F2;
  --green: #1F8B4C;
  --amber: #D4880C;
  --danger: #C0392B;
  --body: #3D454D;
  --muted: #5A646E;
  --muted-2: #6B7480;
  --muted-3: #8A939C;
  --grad: radial-gradient(125% 100% at 50% 0%, #008E9C 0%, #016570 46%, #003849 100%);
  --shadow-card: 0 24px 70px rgba(0, 16, 22, 0.45);
  --pad-x: 64px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 16px/1.6 'Roboto', 'Roboto Fallback', -apple-system, 'Segoe UI', Arial, sans-serif;
  color: var(--ink-2);
  background: #fff;
  /* WEB-1b item 2: footer sits at the viewport bottom on short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
/* WEB-POLISH-OCT-7 (7 Oct 2026): ONE body link style, site wide. The full brand teal #008E9C measures
   3.93:1 on white and fails AA, so links take the brand teal family's AA member --link #007580 (5.44:1,
   measured by specs/polish-oct-7.spec.mjs from this file) with a 2px underline, a small offset and
   weight 500; hover and focus go to the darker teal-deep (7.39:1). Buttons, the nav, the footer and the
   other chrome opt out on the next line and carry their own colours. */
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 500; }
a:hover, a:focus-visible { color: var(--teal-deep); }
.btn, .nav a, .footer a, .skip-link, .founder-anchors a, .founding-link, .legal-subnav a, .blog-card, .chip, .claim-card-link { text-decoration: none; font-weight: inherit; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; color: inherit; margin: 0; }
p { margin: 0; }
.mono { font-family: 'Roboto Mono', 'Roboto Mono Fallback', ui-monospace, 'Cascadia Mono', monospace; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* keyboard-visible focus: 3px teal halo (01 accessibility); on teal/petrol grounds a
   teal halo vanishes, so dark bands swap to a cyan halo (same 3px, still on-palette) */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 2px; }
.hero :focus-visible, .founder-band :focus-visible, .gi-band :focus-visible, .founding-banner :focus-visible, .footer :focus-visible {
  outline-color: var(--cyan);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--teal-deep); padding: 10px 16px; font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

.container { max-width: 1440px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* invisible legacy alias anchors, occupy no space (the sticky bar they offset for is gone, WEB-POLISH-OCT-7) */
.legacy-anchor { position: relative; top: -16px; display: block; height: 0; width: 0; overflow: hidden; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 4px; border: 0; cursor: pointer;
  font: 700 14.5px/1 'Roboto', 'Roboto Fallback', sans-serif; white-space: nowrap;
}
.btn-solid { background: var(--teal); color: #fff; }
.btn-solid:hover { background: var(--teal-hover); color: #fff; }
.btn-white { background: #fff; color: var(--teal-deep); }
.btn-white:hover { background: #f2f6f7; color: var(--teal-deep); }
.btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); font-weight: 600; }
.btn-ghost-light:hover { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-outline { background: transparent; color: var(--teal-deep); border: 1.5px solid var(--teal); }
.btn-outline:hover { background: rgba(0,142,156,0.06); color: var(--teal-deep); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13.5px; font-weight: 600; }
.btn-md { height: 40px; padding: 0 18px; font-size: 13.5px; font-weight: 600; }

/* ---------- kickers, pills, checks ---------- */
.kicker {
  font: 600 10.5px 'Roboto Mono', 'Roboto Mono Fallback', monospace; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--teal-deep); /* AA on white; canvas teal parked */
}
.kicker-cyan { color: var(--cyan); font-size: 11px; }
.kicker-sm { font-size: 10px; letter-spacing: 0.12em; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 10px 'Roboto Mono', 'Roboto Mono Fallback', monospace; letter-spacing: 0.06em;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.pill-live { background: #E8F4EC; color: #17683A; }
.pill-live .dot { background: var(--green); }
.pill-nextup { background: #E5F4F5; color: var(--teal-deep); }
.pill-nextup .dot { background: var(--teal); }
.pill-preview { background: #F0F1F3; color: var(--muted); }
.pill-preview .dot { background: var(--muted-3); }
.pill-amber { background: #FBF3E0; color: #B27109; }
.pill-amber .dot { background: var(--amber); }
.pill-danger { background: #FBEAE8; color: var(--danger); }
.pill-next { background: #E5F4F5; color: var(--teal-deep); } /* WEB-ROI-FOLLOW: the Coming block badge */
.pill-danger .dot { background: var(--danger); }

.check-list { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--body); margin: 14px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 8px; align-items: flex-start; }
.check-list .tick { color: var(--teal); flex: none; margin-top: 1px; font-weight: 700; }

/* ---------- nav ---------- */
.nav { border-bottom: 1px solid var(--border-soft); background: #fff; }
.nav-inner { height: 64px; display: flex; align-items: center; gap: 26px; }
.nav-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.nav-logo img { height: 26px; width: 26px; }
.nav-logo .wordmark { font: 800 19px/1 'Roboto', 'Roboto Fallback', sans-serif; letter-spacing: -0.02em; color: var(--ink); }
.nav-links { display: flex; gap: 22px; margin-left: 18px; font-size: 13.5px; }
.nav-links a { color: var(--body); font-weight: 500; }
.nav-links a:hover { color: var(--teal-deep); }
.nav-links a[aria-current="page"] { font-weight: 600; color: var(--teal-deep); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-signin { font-size: 13.5px; font-weight: 600; color: var(--teal-deep); }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; color: var(--ink-2);
}
.nav-toggle svg { width: 24px; height: 24px; display: block; }

/* ---------- hero (signature gradient + blueprint grid + rings) ---------- */
.hero { position: relative; background: var(--grad); overflow: hidden; color: #fff; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero .ring { position: absolute; border: 1.5px solid rgba(255,255,255,0.10); border-radius: 50%; }
.hero .ring-1 { right: -180px; top: -260px; width: 720px; height: 720px; }
.hero .ring-2 { right: -80px; top: -160px; width: 520px; height: 520px; border-color: rgba(255,255,255,0.08); }
.hero > .container { position: relative; }

/* ---------- footer ---------- */
.cta-band { padding: 56px 0; text-align: center; background: var(--panel); }
.cta-band h2 { font-size: 26px; letter-spacing: -0.02em; }
.cta-band .sub { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.cta-band .btn { margin-top: 18px; }
.cta-band .cta-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.cta-band .cta-actions .btn { margin-top: 0; }
.cta-band .register-hint { font: 400 10.5px 'Roboto Mono', 'Roboto Mono Fallback', monospace; color: var(--muted); margin-top: 10px; } /* AA on panel */

.footer { background: var(--ink); color: rgba(255,255,255,0.6); font-size: 11.5px; }
/* WEB-FOOTER-OCT-7C (7 Oct 2026, 19:30): two full width rows separated by a hairline. The top row: the logo
   at the left, the six policy links at the right, the two sharing a vertical centre (an image has no baseline,
   so the 7B baseline row left the logo floating 6px above the text). The bottom row, smaller and muted: the
   copyright, a middle dot and Founding customers at the left, the Listed on line (WEB-POLISH-OCT-7) at the
   right. Under 760px both rows stack left, the policy links wrap, the dot stays, the hairline stays; nothing
   is centred, nothing scrolls. Every grey here measures 4.5:1 or better on the ink (specs/footer-oct-7c.spec.mjs
   and specs/polish-oct-7b.spec.mjs compute each one from this file; footer-oct-7c measures the geometry). */
.footer-inner { padding-top: 28px; padding-bottom: 26px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer img { height: 20px; width: auto; display: block; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.footer-links a { color: rgba(255,255,255,0.6); }
.footer-links a:hover { color: #fff; }
.footer-bottom { padding-top: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; font-size: 11px; color: rgba(255,255,255,0.72); }
.footer-copy { margin: 0; }
.footer-sep { margin: 0 8px; }
.footer-listed { font-size: 11px; color: rgba(255,255,255,0.72); margin: 0; }
.footer-listed a { color: inherit; }
.footer-listed a:hover, .footer-listed a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* WEB-BATCH1: the founding customers link stays outside the ruled five-link legal column (WEB-1f canonical
   order + Contact last stays byte-stable); since WEB-FOOTER-OCT-7C it follows the copyright in the bottom row,
   underlined on hover and focus only (.footer a strips the resting underline on the one line opt out) */
.footer-founding { color: inherit; }
.footer-founding:hover, .footer-founding:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 760px) {
  .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-links { justify-content: flex-start; }
}

/* ---------- generic sections ---------- */
.section { padding: 56px 0; }
.section-bordered { border-bottom: 1px solid var(--border-soft); }
.h2-lg { font-size: 30px; line-height: 1.25; }
.h2-md { font-size: 26px; letter-spacing: -0.02em; }
.sub { color: var(--muted); }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; background: #fff; }
.card h3 { font-size: 15.5px; font-weight: 700; letter-spacing: 0; }
.card .card-body { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 8px; }

/* ---------- tables (claim card + any figures) ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font: 600 9.5px 'Roboto Mono', 'Roboto Mono Fallback', monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-deep); background: #E5F4F5; text-align: left; padding: 8px 10px;
}
.tbl td { font-size: 12.5px; padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.tbl .r { text-align: right; }
.tbl-wrap { overflow-x: auto; }

/* ---------- prose (extracted article/legal bodies + long-form) ---------- */
.prose { font-size: 15px; line-height: 1.7; color: var(--body); }
.prose h1 { font-size: 34px; line-height: 1.2; color: var(--ink-2); margin: 0 0 18px; }
.prose h2 { font-size: 24px; letter-spacing: -0.02em; margin: 34px 0 12px; color: var(--ink-2); }
.prose h3 { font-size: 18px; letter-spacing: -0.01em; margin: 26px 0 10px; color: var(--ink-2); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 13.5px; }
.prose table th { background: #E5F4F5; color: var(--teal-deep); text-align: left; padding: 8px 10px; font-weight: 600; }
.prose table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.prose figure { margin: 0 0 14px; }
.prose blockquote { margin: 0 0 14px; padding: 10px 18px; border-left: 3px solid var(--teal); background: var(--zebra); }
.prose strong { color: var(--ink-2); }
.prose .wp-block-separator { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
.prose-wrap { max-width: 760px; }

/* ---------- home: hero ---------- */
.hero-grid { display: flex; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 64px; }
.hero-copy { flex: 1; min-width: 0; }
.hero-h1 { font-size: 52px; line-height: 1.05; color: #fff; margin-top: 16px; max-width: 560px; }
.hero-h1 .accent { color: var(--cyan); }
.hero-sub { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,0.85); margin-top: 18px; max-width: 480px; }
.hero-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
/* WEB-POLISH-OCT-7: the two quiet links under the two hero buttons, the hero's light link style */
.hero-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 14px; }
.hero-links a { color: rgba(255,255,255,0.85); }
.hero-links a:hover, .hero-links a:focus-visible { color: #fff; }
.hero-chips { display: flex; gap: 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 12px; color: rgba(255,255,255,0.72); flex-wrap: wrap; }
/* WEB-POLISH-OCT-7B: the claim card is a link to the sample contract chooser, a caption under it in the hero's
   muted light style; the link is the flex item the card was, so the card keeps its widths below */
.claim-card-link { display: block; flex: none; color: inherit; }
.claim-card-link:hover, .claim-card-link:focus-visible { color: inherit; }
.claim-card-caption { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.72); }
.claim-card-open { text-decoration: underline; text-underline-offset: 2px; }
.claim-card-link:hover .claim-card-caption, .claim-card-link:focus-visible .claim-card-caption { color: #fff; }
/* WEB-OCT-8 (8 Oct 2026): every tick sits on the first line of its text at every width (at 390 the third chip wraps to
   three lines and a centred tick floated mid height beside them); the 2px offset is the glyph's own cap gap at 12px text */
.hero-chips li { display: flex; align-items: flex-start; gap: 7px; }
.hero-chips svg { color: var(--cyan); flex: none; margin-top: 2px; }

/* home: claim card */
.claim-card { width: 560px; flex: none; background: #fff; border-radius: 10px; box-shadow: var(--shadow-card); overflow: hidden; color: var(--ink-2); }
.claim-card-head { padding: 12px 18px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.claim-card-head .ref { font-size: 12.5px; font-weight: 600; }
.claim-card-head .push { margin-left: auto; }
.claim-card .tbl th.c-item { padding-left: 18px; width: 56px; }
.claim-card .tbl th.c-amt { padding-right: 18px; width: 110px; }
.claim-card .tbl td:first-child { padding-left: 18px; }
.claim-card .tbl td:last-child { padding-right: 18px; }
.claim-card .tbl .desc { font-weight: 500; }
.claim-card .row-flag { background: #FDF6F5; }
.claim-card .row-zebra { background: var(--zebra); }
.claim-card .flag-edge { box-shadow: inset 3px 0 0 var(--danger); }
/* board 1b: tinted totals band, amber retention, ring-dot footnote row */
.claim-card-totals { display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: #F5FAFB; border-top: 1px solid #B8DDE6; }
.claim-card-totals .tot { display: flex; flex-direction: column; gap: 2px; }
.claim-card-totals .lbl { font: 600 8.5px 'Roboto Mono', 'Roboto Mono Fallback', monospace; letter-spacing: 0.1em; color: var(--muted-2); }
.claim-card-totals .val { font-size: 13.5px; font-weight: 700; }
.claim-card-totals .val.neg { color: #B27109; }
.claim-card-totals .certify { margin-left: auto; height: 34px; padding: 0 15px; font-size: 13px; }
.claim-card-foot {
  padding: 8px 18px; border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.5; color: var(--muted);
}
.ring-dot-sm { width: 12px; height: 12px; }
.ring-dot-sm::after { width: 4px; height: 4px; }

/* home: risk + mechanics */
.risk-head { max-width: 760px; }
.risk-head .h2-lg { margin-top: 12px; }
.risk-sub { font-size: 14.5px; margin-top: 12px; }
.mechanics { margin-top: 32px; }
.card-icon { color: var(--teal); display: inline-flex; }
.mechanics h3 { margin-top: 12px; }

/* home: founder band */
.founder-band { background: var(--petrol); color: #fff; }
.founder-inner { display: flex; align-items: center; gap: 44px; padding-top: 52px; padding-bottom: 52px; }
.founder-photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; flex: none; border: 1.5px solid rgba(10,226,216,0.4); }
/* WEB-1g §5: the founder/attr photos gained <picture> wrappers, the wrapper takes the
   flex-item role its img held, and line-height 0 kills the stray inline descender gap */
.founder-inner picture, .company-attr picture { flex: none; line-height: 0; }
.founder-copy { flex: 1; min-width: 0; }
.founder-quote { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.45; max-width: 820px; }
.founder-attr { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 12px; }
.founder-attr strong { color: #fff; }
.founder-anchors { display: flex; gap: 18px; margin-top: 10px; font-size: 11.5px; color: rgba(255,255,255,0.6); flex-wrap: wrap; }
.founder-anchors a { color: rgba(255,255,255,0.6); }
.founder-anchors a:hover { color: #fff; text-decoration: underline; }
.founder-cta { flex: none; height: 40px; padding: 0 18px; border: 1.5px solid rgba(10,226,216,0.5); color: var(--cyan); font-size: 13.5px; font-weight: 600; background: transparent; }
.founder-cta:hover { border-color: var(--cyan); color: var(--cyan); }
/* WEB-COPY-OCT-7D (7 Oct 2026): on a phone the three credibility items stack, the dots hidden (at 390 each item
   wrapped to its own line with the dot orphaned at the end of the line above); above 760px unchanged */
@media (max-width: 760px) {
  .founder-anchors { flex-direction: column; gap: 6px; }
  .founder-anchors .sep { display: none; }
}

/* home: pricing teaser */
.teaser-grid { display: flex; align-items: center; gap: 40px; }
.teaser-copy { width: 340px; flex: none; }
.teaser-sub { font-size: 13.5px; margin-top: 10px; }
.teaser-cta { margin-top: 16px; }
.teaser-cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tcard { border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; position: relative; }
.tcard h3 { font-size: 14px; font-weight: 700; letter-spacing: 0; }
.tcard .price { margin-top: 8px; }
.tcard .price .num { font-size: 24px; font-weight: 700; }
.tcard .price .unit { font-size: 11.5px; color: var(--muted-2); }
.tcard .inc { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tcard-common { border: 1.5px solid var(--teal); box-shadow: 0 4px 16px rgba(0,142,156,0.12); }
.common-tag {
  position: absolute; top: -9px; left: 16px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em;
  background: var(--teal); color: #fff; border-radius: 999px; padding: 2px 9px;
}

@media (max-width: 1240px) {
  .claim-card { width: 480px; }
}
@media (max-width: 1100px) {
  .hero-grid { flex-direction: column; align-items: stretch; }
  .claim-card { width: 100%; }
  .teaser-grid { flex-direction: column; align-items: flex-start; }
  .teaser-copy { width: auto; }
  .teaser-cards { width: 100%; }
}
@media (max-width: 920px) {
  .hero-h1 { font-size: 40px; }
  .founder-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .teaser-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-h1 { font-size: 33px; }
  .hero-grid { padding-top: 48px; padding-bottom: 44px; }
  /* totals strip must never clip at narrow widths (01: usable >=360px) */
  .claim-card-totals { flex-wrap: wrap; gap: 14px; row-gap: 10px; }
  .claim-card-totals .certify { margin-left: 0; flex-basis: 100%; }
}

/* ---------- page headers ---------- */
.page-head { padding: 48px 0 26px; }
.page-h1 { font-size: 38px; }
/* WEB-POLISH-OCT-7: the built for line and the page sub are the same paragraph (size, colour, line height) */
.page-sub, .built-for { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 10px; max-width: 640px; }

/* ---------- features ---------- */
/* WEB-POLISH-OCT-7 (7 Oct 2026): the wrapped chip grid replaces the sticky tab bar. Nothing sticky, no
   horizontal scroll: the chips wrap to as many rows as the width needs. */
.chip-grid { padding: 16px 0; background: #fff; border-bottom: 1px solid var(--border-soft); }
.chip-grid-inner { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--body); white-space: nowrap;
}
.chip:hover, .chip:focus-visible { border-color: var(--teal); color: var(--teal-deep); }
.chip-num { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--teal-deep); }
.back-to-list { padding-top: 14px; font-size: 12.5px; }
.gi-band .back-to-list a { color: #fff; }
.gi-band .back-to-list a:hover, .gi-band .back-to-list a:focus-visible { color: var(--cyan); }
.feature { padding: 44px 0; scroll-margin-top: 16px; }
.feature-zebra { background: var(--zebra); }
.feature-grid { display: flex; gap: 48px; align-items: flex-start; }
.feature-copy { flex: 1; min-width: 0; }
.feature-h2 { font-size: 24px; letter-spacing: -0.02em; margin-top: 8px; }
.feature-body { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin-top: 10px; }
.vignette { width: 460px; flex: none; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.feature-zebra .vignette { background: #fff; }
.vig-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted); margin: 0; } /* AA on panel */
.vig-panel { margin-top: 10px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
/* WEB-M2 imagery (6 Aug 2026): illustration cards fill the vignette like a panel;
   intrinsic width/height attrs + auto height keep CLS at zero */
.vignette picture { display: block; margin-top: 10px; }
.vignette picture img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; }
.vig-caption { font-size: 11px; color: var(--muted-2); margin-top: 10px; }
.vig-link { font-size: 12px; font-weight: 600; margin-top: 8px; }
.vig-link a { display: inline-flex; align-items: center; gap: 6px; }
.vig-rows { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.vig-row { display: flex; gap: 8px; }
.vig-row .k { width: 104px; flex: none; color: var(--muted-3); }
.strong { font-weight: 600; }
.deep { color: var(--teal-deep); }
.amber { color: #B27109; }
.vig-tbl { margin-top: 10px; background: #fff; }
.vig-tbl .zebra { background: var(--zebra); }
.vig-tbl .group-row { background: #F5FAFB; }
.vig-tbl .group-row td { font-weight: 700; font-size: 11px; }
.vig-money { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.m-row { display: flex; justify-content: space-between; gap: 12px; }
.m-row .k { color: var(--muted-3); }
.m-total { border-top: 1px solid var(--border-soft); padding-top: 8px; }
.m-total .k { color: inherit; font-weight: 700; }
.vig-clock { display: flex; align-items: center; gap: 8px; }
.chain { margin-top: 14px; display: flex; align-items: flex-start; }
.chain-step { display: flex; flex-direction: column; align-items: center; flex: 1; }
.chain-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); border: 2px solid #CBD3DA; display: inline-flex; align-items: center; justify-content: center; }
.chain-step.done .chain-dot { background: #E8F5EE; border-color: var(--green); color: var(--green); }
.chain-step.current .chain-dot { background: #E5F4F5; border-color: var(--teal); }
.chain-step.current .chain-dot .inner { width: 8px; height: 8px; background: var(--teal); border-radius: 50%; }
.chain-lbl { font-size: 11px; font-weight: 600; margin-top: 6px; color: var(--muted); } /* AA on panel */
.chain-step.done .chain-lbl { color: inherit; }
.chain-step.current .chain-lbl { color: var(--teal-deep); font-weight: 700; }
.chain-bar { flex: 1; height: 2px; background: var(--border); margin-top: 11px; }
.chain-bar.done { background: var(--green); }
.vig-vo { margin-top: 14px; background: #F5FAFB; border: 1px solid #B8DDE6; border-radius: 6px; padding: 9px 12px; font-size: 11.5px; color: #1D3A3E; }
.clause-chip { font-size: 10.5px; background: #fff; border: 1px solid #B8DDE6; border-radius: 4px; padding: 1px 6px; color: var(--teal-deep); }
.vig-comms { display: flex; flex-direction: column; gap: 8px; }
.comm { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 10px 13px; display: flex; align-items: center; gap: 10px; }
.comm-tag { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.tag-ntc { background: #FBF3E0; color: #B27109; }
.tag-rfi { background: #EAF3FA; color: #2980B9; }
.tag-ncr { background: #FBEAE8; color: var(--danger); }
.comm-title { flex: 1; font-size: 12px; font-weight: 600; }
.gi-band { background: var(--grad); color: #fff; padding: 48px 0; }
.gi-h2 { color: #fff; }
.gi-body { color: rgba(255,255,255,0.85); max-width: 680px; }
.gi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.gi-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 14px 16px; }
.gi-card h3 { font-size: 13px; font-weight: 700; letter-spacing: 0; color: #fff; }
.gi-card p { font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,0.75); margin-top: 4px; }
.gi-foot { margin-top: 16px; font-size: 11.5px; color: rgba(255,255,255,0.7); }
.pos-row { display: flex; justify-content: space-between; font-size: 12px; }
.pos-row .k { color: var(--muted-3); }
.pos-bar { margin-top: 8px; height: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; display: block; }
.pos-fill { display: block; height: 100%; background: var(--teal); }
.pos-sub { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-2); margin-top: 6px; }

/* ---------- company ---------- */
.company-grid { display: flex; gap: 56px; align-items: flex-start; padding-top: 0; }
.company-copy { flex: 1; max-width: 680px; }
.company-h1 { font-size: 34px; line-height: 1.12; margin-top: 12px; }
.company-narrative { font-size: 14px; line-height: 1.75; color: var(--body); margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.company-attr { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.company-attr img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid #B8DDE6; flex: none; }
.attr-name { font-size: 13.5px; font-weight: 700; }
.attr-role { font-size: 11.5px; color: var(--muted-2); }
.company-side { width: 380px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.company-photo { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }
.cred-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.cred-card .vig-kicker { margin-bottom: 4px; letter-spacing: 0.12em; font-weight: 700; font-size: 9.5px; }
.video-section { background: var(--zebra); }
.video-sub { font-size: 13.5px; margin-top: 6px; }
.video-box { margin-top: 18px; max-width: 760px; }
.video-second { margin-top: 40px; } /* WEB-BATCH1d: the claim to payment schedule embed under the set up video */
.lite-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--petrol);
  border: 0; border-radius: 10px; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.lite-embed::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.lite-embed .play-circle {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.5);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.lite-embed:hover .play-circle { background: rgba(255,255,255,0.22); }
/* WEB-BATCH1 (15 Sep 2026): poster = YouTube hqdefault (4:3, letterboxed) as a lazy <img>
   with intrinsic size; object-fit: cover crops the black bands away inside the 16:9 box.
   Any video id works; the play circle stays on top (relative, later sibling). */
.lite-embed .lite-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lite-embed::after { content: ""; position: absolute; inset: 0; background: rgba(0,56,73,0.28); }
.lite-embed .play-circle { z-index: 1; }
.video-box iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.vig-video-label { margin-top: 14px; color: var(--body); }
.vig-video-note { font-size: 11px; color: var(--muted-2); margin-top: 4px; } /* WEB-BATCH1c: recording date note under the import video label */
.vignette .video-box { margin-top: 8px; max-width: none; }
.vignette .lite-embed, .vignette .video-box iframe { border-radius: 6px; }
/* home teaser: the founding customers and roi doors as two plain links in the one site link style, one per
   line under "See pricing" (WEB-BATCH1 item e, WEB-ROI; buttons for one evening under WEB-POLISH-OCT-7, plain
   links again since WEB-POLISH-OCT-7B) */
.teaser-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 13.5px; }
.cta-band-plain { background: #fff; padding: 44px 0; }

/* ---------- faq (board 2c: two-column Q&A card grid) ---------- */
.faq-grid { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faq-card { border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; background: #fff; }
.faq-q { font-size: 14.5px; font-weight: 700; letter-spacing: 0; margin: 0; }
.faq-a { font-size: 12.5px; line-height: 1.65; color: var(--muted); margin-top: 7px; }

/* ---------- contact ---------- */
.contact-wrap { max-width: 640px; }
.contact-card { margin-top: 24px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 26px 32px; }
.contact-card form { display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.contact-card label { font-size: 11.5px; font-weight: 600; margin: 10px 0 4px; }
.contact-card input, .contact-card textarea {
  font: 400 14px/1.5 'Roboto', 'Roboto Fallback', sans-serif; color: var(--ink-2);
  border: 1px solid #D8D8D8; border-radius: 4px; padding: 9px 12px; background: #fff;
}
.contact-card input:focus, .contact-card textarea:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.contact-card button { margin-top: 16px; width: 130px; }
.contact-fallback { margin-top: 16px; font-size: 12.5px; color: var(--muted-2); }
.form-success { padding: 20px; background: #E8F4EC; border-left: 4px solid var(--green); border-radius: 6px; color: #17683A; font-size: 14px; }
.form-error { margin-top: 12px; font-size: 12.5px; color: var(--danger); }
/* WEB-CONTACT-DETAILS (9 Oct 2026): the phone and registered office block under the card */
.contact-find { margin-top: 28px; }
.contact-find-h2 { font-size: 20px; letter-spacing: -0.02em; color: var(--ink-2); }
.contact-find-line { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ---------- blog ---------- */
.blog-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; }
.blog-card { border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; display: block; color: inherit; }
.blog-card:hover { border-color: var(--teal); color: inherit; box-shadow: 0 4px 16px rgba(0,142,156,0.10); }
.blog-tag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--teal-deep); background: #E5F4F5; border-radius: 999px; padding: 2px 8px; }
.blog-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; margin-top: 8px; }
.blog-path { display: block; font-size: 10px; color: var(--muted-2); margin-top: 6px; }

/* ---------- legal ---------- */
.legal-grid { display: flex; gap: 40px; align-items: flex-start; }
.legal-subnav { width: 280px; flex: none; border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; position: sticky; top: 24px; }
.legal-subnav-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.legal-subnav nav { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.legal-subnav a { padding: 8px 12px; border-radius: 6px; color: var(--body); }
.legal-subnav a:hover { background: var(--zebra); }
.legal-subnav a[aria-current="page"] { background: #E5F4F5; color: var(--teal-deep); font-weight: 600; }
.legal-body { flex: 1; min-width: 0; max-width: 820px; }
.legal-body h1 { font-size: 30px; margin-bottom: 16px; }

/* ---------- articles ---------- */
.article-wrap { max-width: 760px; }
.article-h1 { font-size: 34px; line-height: 1.2; }
.article-body { margin-top: 22px; }
.article-body .wp-block-heading { scroll-margin-top: 24px; }
/* WEB-SOPA1: authored article hero image, responsive inside the prose column */
.article-hero { margin: 0 0 22px; }
.article-hero picture { display: block; line-height: 0; }
.article-hero img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; }

/* ---------- 404 ---------- */
.nf-hero { min-height: 60vh; display: flex; align-items: center; }
.nf-inner { padding: 80px 0; }
.nf-code { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: var(--cyan); }
.nf-h1 { font-size: 44px; color: #fff; margin-top: 12px; }
.nf-sub { font-size: 15px; color: rgba(255,255,255,0.8); margin-top: 12px; max-width: 480px; }

@media (max-width: 1100px) {
  .feature-grid { flex-direction: column; }
  .feature-grid-flip { flex-direction: column-reverse; }
  .vignette { width: 100%; }
  .gi-grid { grid-template-columns: 1fr 1fr; }
  .company-grid { flex-direction: column; }
  .company-side { width: 100%; max-width: 420px; }
  .legal-grid { flex-direction: column; }
  .legal-subnav { position: static; width: 100%; }
}
@media (max-width: 640px) {
  .page-h1 { font-size: 30px; }
  .company-h1 { font-size: 27px; }
  .gi-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .nf-h1 { font-size: 33px; }
}

/* ---------- pricing ---------- */
.founding-banner { background: var(--petrol); color: rgba(255,255,255,0.85); }
.founding-inner { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.founding-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--cyan);
  border: 1px solid rgba(10,226,216,0.45); border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.founding-text { font-size: 12.5px; }
.founding-link { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 2px; }
.founding-link:hover { color: #fff; }
.pricing { padding-bottom: 40px; }
.pricing-head { padding-top: 48px; text-align: center; }
.pricing-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.ccy-group { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.ccy-btn {
  padding: 7px 16px; font: 600 12.5px 'Roboto', 'Roboto Fallback', sans-serif; color: var(--body);
  background: #fff; border: 0; border-left: 1px solid var(--border); cursor: pointer;
}
.ccy-btn:first-child { border-left: 0; }
.ccy-btn.on { background: var(--teal); color: #fff; }
.billing-row { display: inline-flex; align-items: center; gap: 9px; }
.bill-lbl { font-size: 12.5px; color: var(--body); }
.billing-switch {
  width: 36px; height: 20px; border-radius: 999px; background: var(--border); border: 0;
  display: inline-flex; align-items: center; padding: 2px; cursor: pointer; transition: background 0.15s;
}
.billing-switch .knob { width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.15s; }
.billing-switch.annual { background: var(--teal); }
.billing-switch.annual .knob { transform: translateX(16px); }
.pricing-note { font-size: 11px; color: var(--muted-2); margin-top: 10px; } /* AA: carries the GST note */
.pricing-note-annual { font-size: 12.5px; color: var(--body); margin-top: 14px; } /* WEB-BATCH1 item g: the annual wording line */

/* ---------- founding customers page (WEB-BATCH1 item e, 15 Sep 2026): existing tokens only ---------- */
.founding-wrap { max-width: 680px; }
.founding-kicker { font-size: 10px; letter-spacing: 0.12em; }
.founding-page .page-h1 { margin-top: 10px; }
.founding-p { font-size: 15px; line-height: 1.7; color: var(--body); margin-top: 18px; }
.founding-list { margin: 16px 0 0; padding-left: 22px; font-size: 15px; line-height: 1.7; color: var(--body); }
.founding-list li { margin-top: 8px; }
.founding-list li::marker { font-weight: 700; color: var(--teal-deep); }
.founding-places { margin-top: 26px; font-weight: 700; } /* WEB-BATCH1c: a bold body paragraph (.founding-p), no longer mono */
.founding-ctas { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.founding-sign { margin-top: 28px; font-size: 13px; color: var(--muted); }

.tier-grid { display: flex; gap: 20px; padding-top: 32px; align-items: stretch; }
.tier { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 24px 26px; display: flex; flex-direction: column; position: relative; background: #fff; }
.tier-common { flex: 1.12; border: 1.5px solid var(--teal); box-shadow: 0 8px 28px rgba(0,142,156,0.16); }
.tier .common-tag { top: -10px; left: 22px; font-size: 9px; padding: 3px 10px; }
.tier-name { font-size: 16px; font-weight: 700; letter-spacing: 0; }
.tier-tagline { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.tier-price { margin-top: 14px; display: block; }
.price-line { display: flex; align-items: baseline; gap: 6px; }
.price-line .big { font-size: 34px; font-weight: 700; }
.tier-common .price-line .big { color: var(--teal-deep); }
.price-line .unit { font-size: 12px; color: var(--muted-2); }
.price-sub { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 2px; } /* AA: contractual figures */
.tier-includes { flex: 1; margin-top: 16px; gap: 8px; }
.tier-cta { margin-top: 18px; width: 100%; }

.bands { display: flex; gap: 20px; padding-top: 20px; }
.band { border-radius: 10px; padding: 18px 22px; border: 1px solid var(--border); }
.band-invite { flex: 1; background: #E5F4F5; border-color: #B8DDE6; }
.band-invite .band-h { color: #00424E; }
.band-invite .band-body { color: #1D3A3E; }
.band-credits { flex: 1.4; }
.band-h { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.band-h-mark { display: flex; align-items: center; gap: 9px; }
.ring-dot { width: 15px; height: 15px; border: 1.5px solid var(--teal); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ring-dot::after { content: ""; width: 5px; height: 5px; background: var(--teal); border-radius: 50%; }
.band-body { font-size: 12.5px; line-height: 1.6; margin-top: 6px; color: var(--muted); }
.band-credits .band-body { font-size: 12px; margin-top: 8px; }
.credit-lines { display: flex; gap: 18px; margin-top: 10px; font-size: 12.5px; color: var(--body); flex-wrap: wrap; }

.module-grid-wrap { padding-top: 28px; }
.module-grid-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.module-grid-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.module-grid-note { font-size: 11.5px; color: var(--muted-2); }
.module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.module-tile { border: 1px solid var(--border); border-radius: 6px; padding: 13px 15px; }
.module-head { display: flex; align-items: center; gap: 8px; }
.module-name { font-size: 12.5px; font-weight: 700; }
.module-head .pill { margin-left: auto; }
.module-caption { font-size: 11px; color: var(--muted-2); margin-top: 4px; }
.module-more { margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.module-suggest { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.statutory-note {
  margin-top: 14px; background: var(--zebra); border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 10px 14px; font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.statutory-note .note-icon { color: var(--muted-3); display: inline-flex; flex: none; }

@media (max-width: 1100px) {
  .tier-grid, .bands { flex-direction: column; }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .module-grid { grid-template-columns: 1fr; }
}

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  :root { --pad-x: 40px; }
}
@media (max-width: 1100px) {
  .cards-3 { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  :root { --pad-x: 24px; }
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links, .nav.open .nav-actions {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 14px; margin: 0; padding: 16px 0;
  }
  .nav.open .nav-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 4px; }
  .nav.open .nav-logo { height: 44px; }
  .nav.open .nav-actions { padding-top: 0; }
}
@media (max-width: 640px) {
  :root { --pad-x: 16px; }
  .section { padding: 40px 0; }
}

/* ---------- sample contract doors (SANDBOX-WEB, 20 Sep 2026) ---------- */
/* The "See a sample contract" door: a button with one line of sub copy where it stands alone
   (features header, features 03 foot), and a quiet underlined line under a main call to
   action (pricing Firm tier, founding customers). The home hero reuses .btn-ghost-light. */
.sample-door { margin-top: 20px; }
.door-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* WEB-POLISH-OCT-7: the data sheet button beside the sample button */
.sample-sub { font-size: 12.5px; color: var(--muted-2); margin-top: 8px; }
.sample-link { font-size: 12.5px; color: var(--muted-2); margin-top: 10px; }
.tier .sample-link { text-align: center; }
/* SANDBOX-AU-WEB (7 Oct 2026 evening): two doors under one heading, New Zealand and Australia, side by side on
   a desktop, stacked on a phone and inside the narrow 03 copy column; the data sheet row sits under the grid.
   The head block is the chooser (#sample) the one line places land on, hence the scroll margin. */
.sample-doors { margin-top: 20px; scroll-margin-top: 16px; }
.sample-h { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.sample-doors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 10px; }
.sample-doors-grid .sample-door { margin-top: 0; min-width: 0; }
.feature-copy .sample-doors-grid { grid-template-columns: 1fr; }
.sample-doors .door-row { margin-top: 14px; }
.vig-au { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.55; }
@media (max-width: 640px) {
  .sample-doors-grid { grid-template-columns: 1fr; }
}

/* ---------- /roi/ "What Gnosis gives back" (WEB-ROI, 5 Oct 2026) ---------- */
/* Four range + number pairs on the left, the six outputs on the right, one column under 920px.
   Money and counts render in Roboto tabular-nums (.num), the WEB-1d ruling; the footnotes and
   the illustrative line share one quiet type size (.roi-fine). Native range inputs keep their
   keyboard behaviour; only the accent colour is ours. */
.roi-wrap { max-width: 1120px; }
.roi-kicker { font-size: 10px; letter-spacing: 0.12em; }
.roi-page .page-h1 { margin-top: 10px; }
.roi-currency { font-size: 13px; color: var(--muted); margin-top: 10px; }
.roi-intro { font-size: 15px; line-height: 1.7; color: var(--body); margin-top: 14px; max-width: 720px; }
.roi-grid { display: flex; gap: 40px; align-items: flex-start; margin-top: 32px; }
.roi-inputs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
/* WEB-ROI-CCY: the pricing page's .ccy-group at the top of the inputs, labelled, sized to content */
.roi-ccy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.roi-ccy-label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.roi-field { display: flex; flex-direction: column; gap: 8px; }
.roi-label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.roi-ref { font-size: 10px; margin-left: 3px; }
.roi-controls { display: flex; align-items: center; gap: 14px; }
.roi-range { flex: 1; min-width: 0; accent-color: var(--teal); height: 28px; margin: 0; cursor: pointer; }
.roi-range:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.roi-number-wrap { display: inline-flex; align-items: center; border: 1px solid #D8D8D8; border-radius: 4px; background: #fff; overflow: hidden; }
.roi-number-wrap:focus-within { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.roi-prefix { padding: 0 0 0 10px; font-size: 13px; color: var(--muted-2); }
.roi-number {
  width: 112px; border: 0; padding: 8px 10px; background: transparent;
  font: 400 14px/1.5 'Roboto', 'Roboto Fallback', sans-serif; color: var(--ink-2); text-align: right;
}
.roi-number:focus { outline: none; }
.roi-results {
  width: 440px; flex: none; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 26px; display: flex; flex-direction: column; gap: 16px;
}
.roi-out { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.roi-out-k { font: 600 10px 'Roboto Mono', 'Roboto Mono Fallback', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.roi-out-v { display: flex; align-items: baseline; gap: 6px; color: var(--ink-2); }
.roi-big { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.roi-out-net .roi-big { color: var(--teal-deep); }
.roi-out-unit { font-size: 13px; color: var(--muted-2); }
.roi-out-sub { font-size: 12.5px; color: var(--muted); }
.roi-net-note { color: #B27109; font-weight: 600; }
.roi-line { font-size: 13.5px; line-height: 1.6; color: var(--body); margin: 0; }
.roi-clock { padding-top: 2px; }
.roi-fine { font-size: 12px; line-height: 1.6; color: var(--muted); }
.roi-illustrative { margin-top: 22px; max-width: 760px; }
.roi-asks { margin-top: 24px; }
.roi-asks .sample-link { margin-top: 10px; }
.roi-notes { margin: 28px 0 0; padding-left: 20px; max-width: 760px; }
.roi-notes li { margin-top: 6px; }
.roi-notes li::marker { color: var(--teal-deep); font-weight: 600; }
.roi-notes li:target { background: #E5F4F5; }
@media (max-width: 920px) {
  .roi-grid { flex-direction: column; }
  .roi-results { width: 100%; }
}
@media (max-width: 640px) {
  .roi-controls { flex-direction: column; align-items: stretch; gap: 8px; }
  .roi-number-wrap { align-self: flex-end; }
  .roi-results { padding: 18px 18px; }
}

/* ---------- WEB-ROI-FOLLOW (7 Oct 2026): the booking band, data sheet, who sees what, Coming ---------- */
/* The booking band (WEB-POLISH-OCT-7): one light teal card, one line, ONE filled button, a quiet line under it
   offering thirty minutes on claim deadlines (WEB-POLISH-OCT-7B; the outlined 30 minute button is gone), a third quiet
   line on pricing. Centred in the pricing head, left elsewhere. Nothing pops. */
.book-band { background: #E5F4F5; border: 1px solid #B8DDE6; border-radius: 10px; padding: 22px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.book-band-line { font-size: 15px; line-height: 1.6; font-weight: 600; color: var(--ink-2); }
.book-band-clock { font-size: 13px; color: var(--muted); }
.book-band-roi { font-size: 13px; }
.book-band-section { padding: 32px 0; }
.pricing-head .book-band { align-items: center; text-align: center; margin-top: 18px; }
@media (max-width: 640px) {
  .book-band { padding: 18px; }
  .pricing-head .book-band { align-items: flex-start; text-align: left; }
}
/* the data sheet: a small outlined button on features (.datasheet-btn), the fourth row of the company
   credibility list since WEB-POLISH-OCT-7B (the download glyph in the .check-list glyph column) */
/* who sees what: five columns, two under 1100px, one under 640px (the strip stacks) */
.who-sees { padding: 44px 0; }
.who-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px; }
.who-col { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.who-col h3 { font-size: 13.5px; font-weight: 700; letter-spacing: 0; }
.who-col p { font-size: 13.5px; line-height: 1.65; color: var(--muted); } /* WEB-POLISH-OCT-7: the page body style (.feature-body) */
.who-col .who-price { margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--teal-deep); }
/* Coming: one block, four lines, the NEXT badge in the site palette, no dates */
.coming { padding: 44px 0; border-top: 1px solid var(--border-soft); background: var(--zebra); }
.coming-label { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin-top: 8px; } /* WEB-POLISH-OCT-7: the page body style */
.coming-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.coming-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.coming-list .pill { flex: none; margin-top: 3px; }
@media (max-width: 1100px) {
  .who-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .who-grid { grid-template-columns: 1fr; }
}

/* ---------- WEB-CLOCK-CHECK (9 Oct 2026): /clock/ "Payment schedule date check" (renamed WEB-CLOCK-RENAME) ---------- */
/* The ROI page's shapes: inputs left, a panel of results right, stacked under 920px. The kicker is the brief's
   question, so it keeps the kicker colour and weight but reads in sentence case. One quiet line in the home band. */
.clock-wrap { max-width: 1120px; }
.clock-kicker { text-transform: none; letter-spacing: 0; font: 600 13.5px/1.5 'Roboto', 'Roboto Fallback', sans-serif; }
.clock-page .page-h1 { margin-top: 8px; }
.clock-intro { font-size: 15px; line-height: 1.7; color: var(--body); margin-top: 14px; max-width: 720px; }
/* Three cells: the claim (jurisdiction, served date), the answer, the optional inputs. Two columns at desktop; on a phone
   the answer follows the two inputs it depends on so it sits above the fold (the brief), the optional pair under it. */
.clock-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "main results" "more results"; grid-template-rows: auto 1fr; gap: 22px 40px; align-items: start; margin-top: 32px; }
.clock-inputs { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.clock-inputs-main { grid-area: main; }
.clock-inputs-more { grid-area: more; }
.clock-field { display: flex; flex-direction: column; gap: 8px; }
.clock-label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.clock-hint { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.clock-input, .clock-select {
  width: 100%; max-width: 560px; border: 1px solid #D8D8D8; border-radius: 4px; background: #fff; padding: 9px 10px;
  font: 400 14px/1.5 'Roboto', 'Roboto Fallback', sans-serif; color: var(--ink-2);
}
.clock-input:focus, .clock-select:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.clock-money { display: inline-flex; align-items: center; width: 100%; max-width: 560px; border: 1px solid #D8D8D8; border-radius: 4px; background: #fff; overflow: hidden; }
.clock-money:focus-within { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.clock-money .clock-input { border: 0; border-radius: 0; max-width: none; }
.clock-money .clock-input:focus { outline: none; }
.clock-prefix { padding: 0 0 0 10px; font-size: 13px; color: var(--muted-2); }
.clock-results {
  grid-area: results; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 26px; display: flex; flex-direction: column; gap: 14px;
}
.clock-out { display: flex; flex-direction: column; gap: 2px; }
.clock-out-k { font: 600 10px 'Roboto Mono', 'Roboto Mono Fallback', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.clock-big { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--teal-deep); }
.clock-out-sub { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.clock-cite { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 4px 0 0; }
.clock-error { color: #B27109; font-weight: 600; }
.clock-line { font-size: 13.5px; line-height: 1.6; color: var(--body); margin: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.clock-stake { font-weight: 600; color: var(--ink-2); }
.clock-rules { margin: 0; padding: 12px 0 0 18px; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.clock-rules li { margin-top: 4px; }
.clock-fine { font-size: 12px; line-height: 1.6; color: var(--muted); }
.clock-worked { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); }
.clock-sources-h { font-size: 18px; letter-spacing: -0.01em; margin-top: 36px; color: var(--ink-2); }
.clock-sources-intro { margin-top: 8px; max-width: 760px; }
.clock-sources { margin: 12px 0 0; padding-left: 20px; max-width: 760px; }
.clock-sources li { margin-top: 6px; }
.clock-sources li::marker { color: var(--teal-deep); font-weight: 600; }
.clock-calendars { margin-top: 16px; max-width: 760px; }
.clock-calendars p { margin: 6px 0 0; }
.clock-band { margin-top: 32px; }
.clock-page .sample-link { margin-top: 14px; }
.clock-does { margin-top: 32px; max-width: 760px; }
.clock-does h2 { font-size: 22px; letter-spacing: -0.02em; color: var(--ink-2); }
.clock-does-list { margin: 12px 0 0; padding-left: 20px; }
.clock-does-list li { font-size: 14.5px; line-height: 1.65; color: var(--body); margin-top: 8px; }
.book-band-check { font-size: 13px; }
@media (max-width: 920px) {
  .clock-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "results" "more"; }
}
@media (max-width: 640px) {
  .clock-results { padding: 18px 18px; }
}