/* ==========================================================================
   SHINRAI P2P — p2p.shinraitechnologies.io
   Brand: SHINRAI Technologies Limited
   Palette per LETTERHEAD.docx brand specification
   ========================================================================== */

/* ---------- Webfonts (self-hosted) ----------
   Served from our own origin, never from fonts.googleapis.com / fonts.gstatic.com.
   A third-party font embed discloses every visitor's IP address to that third party
   before any consent is possible — an awkward position for a product sold on data
   residency, and one German courts have already found against (LG Munich I,
   3 O 17493/20). Self-hosting also removes two preconnects and a render-blocking
   cross-origin stylesheet from the critical path.

   Jost ships as a variable font: one file covers the 400/600/700 the site uses,
   which is why there is a single `font-weight: 400 700` face per subset and not
   three. Latin and latin-ext only — the site is English (og:locale en_GB); the
   cyrillic and vietnamese subsets Google serves are deliberately not carried.

   To refresh: re-fetch the URLs in the css2 response for
   `family=Questrial&family=Jost:wght@400;600;700` and keep these unicode-ranges. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --green:        #63A537;
  --teal-green:   #37A76F;
  --light-green:  #99CB38;
  --mint:         #44C1A3;
  --forest:       #455F51;
  --deep:         #1A2E1A;
  --orange:       #EE7B08;

  /* Accessible variants of the brand accents for use as TEXT on light
     backgrounds. The brand green (#37A76F) and orange (#EE7B08) are correct
     as fills and as text on dark, but neither reaches WCAG AA 4.5:1 as small
     text on white. These darkened siblings do (≈5:1) while reading as the
     same colour. Do not use them as fills. */
  --teal-ink:     #2A7A52;
  --orange-ink:   #B35400;

  /* Derived surfaces */
  --deep-2:       #14240F;
  --deep-3:       #0E1A0C;
  --ink:          #101A10;
  --ink-2:        #2C3A2E;
  --paper:        #FBFCF9;
  --paper-2:      #F1F5EE;
  --line:         #DDE5D8;
  --line-dark:    rgba(153, 203, 56, 0.18);

  /* Text */
  --text:         #16220F;
  --text-muted:   #4C5C4A;
  --text-invert:  #F2F7EE;
  --text-invert-muted: #B4C7AC;

  /* Type */
  --font: "Century Gothic", "Questrial", "Jost", "Futura", "Avenir Next",
          "Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 820px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 26, 16, .06), 0 4px 14px rgba(16, 26, 16, .05);
  --shadow-md: 0 2px 6px rgba(16, 26, 16, .07), 0 14px 40px rgba(16, 26, 16, .09);
  --shadow-lg: 0 30px 70px rgba(16, 26, 16, .16);

  /* ---------- Type scale ----------
     The rules below this block still carry literal rem values; these tokens are the
     target for NEW and EDITED components, so the scale tightens as the file is touched
     rather than in one risky sweep.

     These steps are cluster centroids measured from the 28 distinct font sizes already
     in use — NOT a mathematical ratio. A strict 1.25 scale would force visible jumps in
     the .62–.97rem range, where this site does most of its work (12 of those 28 sizes sit
     inside a single 1.8px band and are indistinguishable in practice). Each step below
     names the cluster it replaces, so adopting it is a visual no-op. */
  --text-2xs:  .70rem;   /* replaces .62 .64 .68 .69 .70 .72 — uppercase micro-labels:
                            .mod-tag, .brand-sub, .trust-label, table thead, .site-footer h4 */
  --text-xs:   .78rem;   /* replaces .74 .76 .78 — captions: .stat-src, .sources, .verdict,
                            .rule-ref, .breadcrumb, .form-note, .state-chip */
  --text-sm:   .86rem;   /* replaces .80 .82 .84 .86 — dense UI: table.match, .chip,
                            .mod p, .consent, .explainer-foot, .footer-bottom */
  --text-base: .94rem;   /* replaces .87–.95 — body copy: .card p, .step p, .checks li,
                            .faq body, .reg-what, .callout, .field input */
  --text-md:  1.02rem;   /* replaces .96 .97 1.00 1.02 1.03 — h4, .btn, .faq summary,
                            .brand-name, .explainer-head strong */
  --text-lg:  1.18rem;   /* .lede / .hero-lede upper clamp bound */
  --text-xl:  1.40rem;   /* .faq summary::after marker */

  /* ---------- Spacing (8pt grid) ----------
     39 distinct rem values are in use today, many off-grid (.85 / 1.15 / 1.4 / 1.6).
     Snap to the nearest step when editing a rule; do not sweep the file. */
  --space-0:  .25rem;    /*  4px */
  --space-1:  .5rem;     /*  8px */
  --space-2:  1rem;      /* 16px */
  --space-3:  1.5rem;    /* 24px */
  --space-4:  2rem;      /* 32px */
  --space-5:  3rem;      /* 48px */
  --space-6:  4rem;      /* 64px */

  /* ---------- Breakpoints ----------
     REFERENCE ONLY — a custom property cannot be used inside a media query condition
     (`@media (max-width: var(--bp-md))` does not work). These document the three the
     site should converge on; the seven in use today (520 620 700 860 900 940 1000) are
     near-duplicates that shift layout at inconsistent points. Use the literal px of the
     nearest token when adding a query. */
  --bp-sm:  620px;       /* 520, 620   -> single column */
  --bp-md:  900px;       /* 700, 860, 900, 940 -> tablet / nav collapse */
  --bp-lg: 1100px;       /* 1000       -> hero + split unstack */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.16; font-weight: 700; letter-spacing: -.018em; }
h1 { font-size: clamp(2.15rem, 5.1vw, 3.65rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.65rem, 3.5vw, 2.5rem); letter-spacing: -.022em; }
h3 { font-size: clamp(1.12rem, 2vw, 1.32rem); }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
code { font-family: var(--mono); font-size: .88em; background: var(--paper-2);
       padding: .12em .38em; border-radius: 4px; }

/* ---------- Accessibility ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--orange); color: var(--deep); padding: .8rem 1.2rem;
  font-weight: 700; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: var(--wrap-narrow); }
section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-ink); margin-bottom: .9rem;
}
.on-dark .eyebrow { color: var(--light-green); }
.lede { font-size: clamp(1.03rem, 1.6vw, 1.2rem); color: var(--text-muted); max-width: 62ch; }
.on-dark .lede { color: var(--text-invert-muted); }
.section-head { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.center { text-align: center; }
.center .lede, .center .section-head { margin-left: auto; margin-right: auto; }

/* Dark sections */
.on-dark {
  background: var(--deep); color: var(--text-invert);
  background-image:
    radial-gradient(1100px 520px at 82% -12%, rgba(68, 193, 163, .16), transparent 62%),
    radial-gradient(900px 480px at 6% 108%, rgba(99, 165, 55, .17), transparent 62%);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-forest {
  background: var(--forest); color: var(--text-invert);
  /* #455F51 is a mid tone: the default muted invert only reaches 3.9:1 on it. */
  --text-invert-muted: #DCE8D6;
}
/* #99CB38 only reaches 3.6:1 on #455F51, so the forest band uses a paler
   tint of the same green for small accent text. */
.on-forest .eyebrow, .on-forest .link-arrow { color: #C8E39A; }
.on-forest .sources, .on-forest .sources a { color: var(--text-invert-muted); }
.on-forest .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--text-invert); }
.on-forest h1, .on-forest h2, .on-forest h3, .on-forest h4 { color: #fff; }
.on-forest .checks li::before { border-color: var(--light-green); }
.on-paper-2 { background: var(--paper-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: .96rem; font-weight: 700; letter-spacing: -.005em;
  padding: .92rem 1.55rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--orange); color: var(--deep); box-shadow: 0 6px 20px rgba(238, 123, 8, .32); }
.btn-primary:hover { background: #FF8B1A; box-shadow: 0 10px 28px rgba(238, 123, 8, .42); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line); }
/* Hover uses --teal-ink, not --green: the raw brand green is only 2.93:1 on paper, so
   hovering would drop the label from 16:1 to below AA. --teal-ink holds 5.09:1 and is
   the same ink variant .link-arrow already uses. (Fills stay --green; text does not.) */
.btn-secondary:hover { border-color: var(--teal-ink); color: var(--teal-ink); }
.on-dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,.32); }
.on-dark .btn-secondary:hover { border-color: var(--light-green); color: var(--light-green); }
/* Dark label on the green fill, matching .btn-primary's --deep-on-orange treatment.
   White on --green is only 3.01:1 (and 3.03:1 on --teal-green) — below AA for a .96rem
   label. --deep gives 4.81:1 / 4.77:1 and keeps the brand fill exactly as specified. */
.btn-green { background: var(--green); color: var(--deep); }
.btn-green:hover { background: var(--teal-green); color: var(--deep); }
.btn-sm { padding: .62rem 1.15rem; font-size: .87rem; }
.btn-lg { padding: 1.05rem 2rem; font-size: 1.03rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .38rem;
  font-weight: 700; color: var(--teal-ink); text-decoration: none; font-size: .95rem;
}
.link-arrow::after { content: "→"; transition: transform .16s ease; }
.link-arrow:hover::after { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--light-green); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(26, 46, 26, .92);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 68px; }
/* Brand lockup. "Procure-to-Pay Platform / BY CLOUDTECH CRAFTERS LIMITED" is roughly twice
   the width of the old wordmark, and the uppercase tracked-out sub-line is the widest
   element in the header. The block is therefore allowed to shrink (it used to be
   flex-shrink: 0, which would have pushed the nav and CTA off-canvas), and both lines are
   kept on one line so a squeeze narrows them rather than wrapping the lockup into a
   ragged two-line block. The tightest window is 900-1100px, where the full nav is still
   shown; the tracking eases off there to buy back ~20px. */
.brand { display: flex; align-items: center; gap: .62rem; text-decoration: none; color: #fff; min-width: 0; }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.06; min-width: 0; }
.brand-name { font-weight: 700; font-size: 1.03rem; letter-spacing: -.01em; white-space: nowrap; }
.brand-sub { font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--light-green); font-weight: 700; white-space: nowrap; }
@media (max-width: 1100px) { .brand-sub { letter-spacing: .07em; } }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  color: rgba(242, 247, 238, .84); text-decoration: none;
  font-size: .93rem; font-weight: 600; transition: color .15s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--light-green); }
.header-cta { display: flex; align-items: center; gap: .7rem; }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px; padding: .45rem .6rem; cursor: pointer; color: #fff;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--deep-2); border-bottom: 1px solid var(--line-dark);
    padding: .5rem 24px 1.25rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 1rem; }
  .header-cta .btn { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--deep); color: var(--text-invert);
  background-image:
    radial-gradient(1200px 620px at 78% -10%, rgba(68, 193, 163, .20), transparent 60%),
    radial-gradient(1000px 560px at -6% 96%, rgba(99, 165, 55, .20), transparent 60%);
  padding: clamp(3.2rem, 7vw, 6rem) 0 clamp(3.2rem, 6vw, 5rem);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(153,203,56,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153,203,56,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(1000px 560px at 50% 20%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(1000px 560px at 50% 20%, #000 10%, transparent 78%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { color: #fff; max-width: 16ch; }
.hero h1 .hl { color: var(--light-green); }
.hero-lede { font-size: clamp(1.04rem, 1.7vw, 1.2rem); color: var(--text-invert-muted); max-width: 54ch; margin-bottom: 1.9rem; }

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(153, 203, 56, .12); border: 1px solid rgba(153, 203, 56, .3);
  color: var(--light-green); border-radius: 999px; padding: .38rem .95rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }

.trust-strip {
  margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.11);
}
.trust-label { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(242,247,238,.66); margin-bottom: .85rem; font-weight: 700; }
.trust-items { display: flex; flex-wrap: wrap; gap: .5rem .7rem; }
.trust-item {
  font-size: .8rem; font-weight: 700; color: var(--text-invert-muted);
  border: 1px solid rgba(255,255,255,.16); border-radius: 7px; padding: .38rem .72rem;
}

/* ---------- Evidence chain visual (hero) ---------- */
.chain-card {
  background: rgba(255,255,255,.045); border: 1px solid rgba(153,203,56,.22);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.chain-card h3 { font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--light-green); margin-bottom: 1.1rem; }
.chain-row { display: flex; align-items: flex-start; gap: .85rem; padding: .62rem 0; }
.chain-row + .chain-row { border-top: 1px solid rgba(255,255,255,.08); }
.chain-badge {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; font-size: .68rem; font-weight: 700;
  background: rgba(153,203,56,.16); color: var(--light-green);
  border: 1px solid rgba(153,203,56,.3); margin-top: .1rem;
}
.chain-badge.gap { background: rgba(238,123,8,.16); color: var(--orange); border-color: rgba(238,123,8,.35); }
.chain-body { min-width: 0; }
.chain-title { display: block; font-weight: 700; font-size: .93rem; color: #fff; }
.chain-note { display: block; font-size: .8rem; color: var(--text-invert-muted); line-height: 1.45; margin-top: .12rem; }
.chain-note em { color: var(--orange); font-style: normal; font-weight: 700; }

/* ---------- Dark-hero inheritance ----------
   .hero and .page-hero paint their own dark background rather than using
   .on-dark, so they need the same component treatments applied explicitly.
   Without this, a secondary button renders dark-on-dark. */
.hero .eyebrow, .page-hero .eyebrow { color: var(--light-green); }
.hero .btn-secondary, .page-hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,.32); }
.hero .btn-secondary:hover, .page-hero .btn-secondary:hover { border-color: var(--light-green); color: var(--light-green); }
.hero .link-arrow, .page-hero .link-arrow { color: var(--light-green); }
.hero .lede, .page-hero .lede { color: var(--text-invert-muted); }
.hero .chip, .page-hero .chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: var(--text-invert-muted); }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(99,165,55,.4); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .93rem; color: var(--text-muted); margin-bottom: 0; }
.card-icon {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(99,165,55,.14), rgba(68,193,163,.14));
  color: var(--teal-ink); margin-bottom: 1rem;
}
.card-icon svg { width: 21px; height: 21px; }

.on-dark .card {
  background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.11); box-shadow: none;
}
.on-dark .card:hover { border-color: rgba(153,203,56,.4); background: rgba(255,255,255,.07); }
.on-dark .card p { color: var(--text-invert-muted); }
.on-dark .card-icon { background: rgba(153,203,56,.13); color: var(--light-green); }

/* Numbered differentiator cards */
.diff-card { position: relative; padding-top: 2.5rem; }
.diff-num {
  position: absolute; top: 1.4rem; left: 1.6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  color: var(--orange-ink);
}
.on-dark .diff-num, .cta-band .diff-num { color: var(--orange); }

/* ---------- Stat blocks ---------- */
.stat {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: var(--radius-sm); padding: 1.35rem 1.5rem;
}
.on-dark .stat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); border-left-color: var(--light-green); }
.stat-num { font-size: clamp(1.85rem, 3.6vw, 2.5rem); font-weight: 700; color: var(--green); line-height: 1; letter-spacing: -.03em; }
.on-dark .stat-num { color: var(--light-green); }
.stat-label { font-size: .91rem; font-weight: 700; margin: .55rem 0 .3rem; }
.stat-src { font-size: .74rem; color: var(--text-muted); line-height: 1.4; }
.on-dark .stat-src { color: rgba(180,199,172,.8); }
.stat-src a { color: inherit; }

/* ---------- Match explainer table ---------- */
.explainer {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.explainer-head {
  background: var(--deep); color: #fff; padding: 1.1rem 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
}
.explainer-head .case-id { font-family: var(--mono); font-size: .82rem; color: var(--text-invert-muted); }
.explainer-head strong { font-size: 1rem; }
.state-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: 999px; padding: .34rem .85rem; font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.state-exception { background: rgba(238,123,8,.18); color: #FFB566; border: 1px solid rgba(238,123,8,.45); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.match { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .89rem; }
table.match th, table.match td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.match thead th {
  background: var(--paper-2); font-size: .69rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 700; white-space: nowrap;
}
table.match tbody tr:last-child td { border-bottom: 0; }
table.match tbody tr:hover { background: rgba(99,165,55,.04); }
.dim-name { font-weight: 700; }
.mono { font-family: var(--mono); font-size: .85em; }
.verdict { font-weight: 700; font-size: .74rem; letter-spacing: .07em; padding: .2rem .55rem; border-radius: 5px; white-space: nowrap; }
.v-pass { background: rgba(99,165,55,.18); color: #35691A; }
.v-warn { background: rgba(238,123,8,.17); color: #8A4404; }
.v-fail { background: rgba(200,40,40,.13); color: #8E1F1F; }
/* On dark surfaces the tinted pill sits on deep green, so the label must invert. */
.on-dark .v-pass { background: rgba(153,203,56,.18); color: #B9DE70; }
.on-dark .v-warn { background: rgba(238,123,8,.20); color: #FFB566; }
.on-dark .v-fail { background: rgba(220,90,90,.20); color: #FF9C9C; }
.rule-ref { font-family: var(--mono); font-size: .76rem; color: var(--text-muted); }
.explainer-foot {
  padding: 1rem 1.4rem; background: var(--paper-2); border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--text-muted);
}
.explainer-foot strong { color: var(--text); }

/* ---------- Split feature rows ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Grid and flex children default to min-width:auto, which lets nowrap content
   (badges, table cells) push a column wider than its track. Force them to shrink
   so .table-scroll can do its job instead of overflowing the page. */
.split > *, .grid > *, .card, .table-scroll { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split .split-media { order: -1; } }
.split + .split { margin-top: clamp(3rem, 6vw, 5rem); }
.split-reverse .split-media { order: -1; }
@media (max-width: 900px) { .split-reverse .split-media { order: -1; } }

/* ---------- Check list ---------- */
.checks { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.checks li { position: relative; padding-left: 1.85rem; margin-bottom: .7rem; font-size: .94rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 15px; height: 8px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
}
.on-dark .checks li::before { border-color: var(--light-green); }

/* ---------- Module grid ---------- */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .85rem; }
.mod {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.05rem 1.15rem;
  background: #fff; transition: border-color .16s ease, transform .16s ease;
}
.mod:hover { border-color: var(--green); transform: translateY(-2px); }
.on-dark .mod { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.on-dark .mod:hover { border-color: var(--light-green); }
.mod-tag {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; padding: .16rem .45rem; border-radius: 4px; margin-bottom: .5rem;
}
.tag-core { background: rgba(68,193,163,.16); color: #1E7A63; }
.tag-mod  { background: rgba(99,165,55,.15); color: #45751F; }
/* A lighter mint than the raw brand --mint, which reaches only 4.40:1 on its own tint —
   just under AA for a .62rem uppercase tag. Same approach as .on-dark .v-pass. */
.on-dark .tag-core { background: rgba(68,193,163,.2); color: #5ACDB1; }
.on-dark .tag-mod  { background: rgba(153,203,56,.18); color: var(--light-green); }
.mod h4 { margin-bottom: .3rem; font-size: .97rem; }
.mod p { font-size: .84rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.on-dark .mod p { color: var(--text-invert-muted); }

/* ---------- Logos / integration chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .9rem;
  font-size: .86rem; font-weight: 600; background: #fff; color: var(--text-muted);
}
.on-dark .chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); color: var(--text-invert-muted); }

/* ---------- Compliance rows ---------- */
.reg-row {
  display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line);
}
.on-dark .reg-row { border-color: rgba(255,255,255,.1); }
.reg-row:last-child { border-bottom: 0; }
@media (max-width: 700px) { .reg-row { grid-template-columns: 1fr; gap: .5rem; } }
.reg-where { font-weight: 700; }
.reg-when { font-size: .8rem; color: var(--orange-ink); font-weight: 700; margin-top: .2rem; }
.on-dark .reg-when { color: var(--orange); }
.reg-what { font-size: .93rem; color: var(--text-muted); }
.on-dark .reg-what { color: var(--text-invert-muted); }

/* ---------- Quote / callout ---------- */
.callout {
  border-left: 3px solid var(--orange); background: rgba(238,123,8,.06);
  padding: 1.15rem 1.4rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .95rem;
}
.on-dark .callout { background: rgba(238,123,8,.1); }
.callout strong { color: var(--orange-ink); }
.on-dark .callout strong, .cta-band .callout strong { color: var(--orange); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.on-dark .faq { border-color: rgba(255,255,255,.11); }
.faq details { border-bottom: 1px solid var(--line); }
.on-dark .faq details { border-color: rgba(255,255,255,.11); }
.faq summary {
  cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; font-weight: 700; font-size: 1rem;
  list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--teal-ink); transition: transform .18s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 2.5rem 1.35rem 0; font-size: .94rem; color: var(--text-muted); }
.on-dark .faq details > div { color: var(--text-invert-muted); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1rem; }
.step {
  display: grid; grid-template-columns: 40px 1fr; gap: 1.1rem; align-items: start;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
.on-dark .step { border-color: rgba(255,255,255,.11); }
.step:last-child { border-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: .82rem; font-weight: 700; color: var(--orange-ink);
  padding-top: .15rem;
}
.on-dark .step::before, .cta-band .step::before { color: var(--orange); }
.step h4 { margin-bottom: .25rem; }
.step p { font-size: .92rem; color: var(--text-muted); margin: 0; }
.on-dark .step p { color: var(--text-invert-muted); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--deep); color: #fff; border-radius: 20px; padding: clamp(2.2rem, 5vw, 3.6rem);
  background-image:
    radial-gradient(800px 380px at 88% -20%, rgba(68,193,163,.22), transparent 60%),
    radial-gradient(700px 340px at 4% 118%, rgba(99,165,55,.22), transparent 60%);
  border: 1px solid rgba(153,203,56,.2);
}
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band .lede { color: var(--text-invert-muted); }
.cta-band .eyebrow { color: var(--light-green); }
.cta-band .btn-secondary { color: #fff; border-color: rgba(255,255,255,.32); }
.cta-band .btn-secondary:hover { border-color: var(--light-green); color: var(--light-green); }
.cta-band .link-arrow { color: var(--light-green); }

/* ---------- Forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.3rem); box-shadow: var(--shadow-md);
}
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .38rem; }
.field .hint { font-size: .78rem; color: var(--text-muted); font-weight: 400; margin-top: .25rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: .95rem; color: var(--text);
  padding: .72rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(99,165,55,.16);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.15rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .84rem; color: var(--text-muted); }
.consent input { width: auto; margin-top: .25rem; flex-shrink: 0; }
.form-note { font-size: .8rem; color: var(--text-muted); margin-top: 1rem; }

/* Submit feedback for the working-session form. The two colour pairs are deliberately the
   same ones .v-pass and .v-fail already use, and .form-card is #fff — the exact backdrop
   those pairs are audited against in tools/contrast_audit.py (5.53:1 and 7.22:1). Reusing
   them means no new CASES entry is needed. Do not substitute --green or --orange here:
   both fail AA as small text on light (DESIGN.md §1). */
.form-status {
  margin-top: 1rem; padding: .75rem .9rem; border-radius: var(--radius);
  font-size: .88rem; font-weight: 700; line-height: 1.45;
}
.form-status[hidden] { display: none; }
.form-status.is-ok   { background: rgba(99,165,55,.18);  color: #35691A; }
.form-status.is-err  { background: rgba(200,40,40,.13);  color: #8E1F1F; }
.form-status a { color: inherit; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep-3); color: var(--text-invert-muted); padding: clamp(2.8rem, 5vw, 4rem) 0 2rem; font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: var(--text-invert-muted); text-decoration: none; transition: color .15s ease; }
.site-footer a:hover { color: var(--light-green); }
.footer-brand p { font-size: .87rem; max-width: 34ch; margin-top: .9rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8rem;
}
.footer-offices { display: grid; gap: .4rem; font-size: .82rem; margin-top: 1.1rem; }
.footer-offices strong { color: var(--text-invert); }

/* ---------- Reveal animation ---------- */
/* Scroll reveal. The hiding rule is scoped to `.js`, which the inline script in each
   page's <head> sets before first paint. Without scripting the class never lands, so
   `.reveal` elements are simply visible — 78 of them carry real page content, and an
   unscoped `opacity: 0` here would blank most of the site for any visitor whose JS is
   blocked, failed or never executed (non-rendering crawlers and link unfurlers included).
   Do not unscope this rule. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: var(--deep); color: #fff; padding: clamp(2.8rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  background-image:
    radial-gradient(900px 420px at 85% -20%, rgba(68,193,163,.16), transparent 62%),
    radial-gradient(700px 380px at 0% 110%, rgba(99,165,55,.16), transparent 62%);
}
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { color: var(--text-invert-muted); }
.breadcrumb { font-size: .8rem; color: rgba(242,247,238,.55); margin-bottom: 1rem; }
.breadcrumb a { color: var(--light-green); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Prose ---------- */
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.9rem; }
.prose > *:first-child { margin-top: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1.4rem 0; }
.prose table th, .prose table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose table thead th { background: var(--paper-2); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- Sources ---------- */
.sources { font-size: .78rem; color: var(--text-muted); line-height: 1.6; }
.sources a { color: var(--teal-ink); }
.on-dark .sources { color: rgba(180,199,172,.75); }
.on-dark .sources a { color: var(--light-green); }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .btn, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .on-dark, .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .on-dark h1, .on-dark h2, .on-dark h3, .hero h1 { color: #000 !important; }
}