/* ═══════════════════════════════════════════════════════════════════════════
   SENTINEL COMPLIANCE COMMAND — THE SHARED DESIGN SYSTEM
   One stylesheet. One identity. Every public page.

   WHY THIS FILE EXISTS
   Before it, 51 pages carried 51 private <style> blocks — roughly 5,600 lines
   of near-duplicate CSS. Nothing was shared, so nothing stayed consistent:
   the homepage had eight navigation links and every interior page had two,
   /risk-analysis had grown a separate "Sentinel SRA" identity, and a primary
   button meant something slightly different on every page it appeared on.
   That is not a styling problem. A prospect who moves from the homepage to a
   service page and feels the ground shift reads it as a smaller, less settled
   company than Sentinel is — which is a sales problem.

   THE BRAND ARGUMENT THIS SYSTEM MAKES
   Sentinel maintains the compliance record for the practice. The practice
   supplies information; Sentinel reviews, organises, tracks and follows up;
   the practice sees the result in the Command Center. The design has to make
   that division of work legible at a glance, so the system leans on:
     · clarity and precision      -> competence
     · consistency and real evidence -> trust
     · orderly, readable pages    -> relief
     · visible owners and next steps -> accountability
     · warm human imagery, plain language -> support
   And it deliberately refuses: fear visuals, exaggerated status indicators,
   decorative complexity, and any imagery implying a guaranteed regulatory
   outcome. Sentinel does not certify compliance and the design must never
   imply it does.

   HOW TO USE IT
   Load FIRST, before any page-level <style> block:
       <link rel="stylesheet" href="/assets/sentinel.css">
   Load order is the migration strategy. A page that has not been converted
   yet still wins with its own rules, so adding the link is always safe; a
   converted page simply deletes the rules it no longer needs.

   ⚠ DO NOT fork this file per page, and do not add a second global sheet.
   The whole point is that there is exactly one place where a primary button
   is defined.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1 · TOKENS
   Two layers on purpose. The PALETTE names a colour; the ROLE names a job.
   Components may only reference roles, never raw palette entries — that is
   what stops a page quietly inventing its own idea of "primary".
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* — palette (unchanged brand values; do not add to this list casually) — */
  --navy:        #0F1A2E;
  --navy-deep:   #0A1322;
  --navy-soft:   #1A2640;
  --gold:        #C9920A;
  --gold-hi:     #E4A820;
  --gold-deep:   #8A6407;   /* the only gold that passes AA as text on light */
  --gold-soft:   #FBEBC7;
  --teal:        #2A9E8E;
  --teal-deep:   #1E7C70;
  --teal-soft:   #A8EDE6;
  --ink:         #1F2937;
  --slate:       #4B5563;
  --mid:         #6B7280;
  --light:       #F7F7F4;
  --cream:       #F8F7F4;
  --border:      #E5E7EB;
  --white:       #FFFFFF;
  --rust:        #9A3D2E;   /* attention — never used to manufacture alarm */

  /* — surfaces — */
  --surface:        var(--white);
  --surface-alt:    var(--light);   /* alternating section band */
  --surface-sunk:   var(--cream);   /* quiet inset panels */
  --surface-brand:  var(--navy);    /* dark bands, hero, footer */
  --surface-brand-2:var(--navy-deep);

  /* — text — */
  --text:           var(--ink);
  --text-muted:     var(--slate);
  --text-faint:     var(--mid);
  --text-on-brand:  var(--white);
  --text-on-brand-muted: rgba(255,255,255,.78);

  /* — actions —
     Gold is the PRIMARY action across the whole site. Teal is the secondary
     and the link colour. They are not interchangeable: gold means "this is
     the step we are recommending", teal means "here is more to read". */
  --action:            var(--gold);
  --action-hover:      var(--gold-hi);
  --action-text:       var(--navy);       /* navy on gold = 8.1:1 */
  --action-2:          var(--teal-deep);  /* secondary + links on light */
  --action-2-hover:    var(--teal);
  --action-2-on-brand: var(--teal-soft);  /* links on navy */

  /* — lines & focus — */
  --line:        var(--border);
  --line-strong: #C7CCD4;
  --focus:       var(--teal);
  --focus-on-brand: var(--teal-soft);

  /* — status.
     ⚠ Colour is NEVER the only signal. Every status chip also carries a word
     and a glyph, because a chip that reads "green" to one visitor and
     "unlabelled grey" to another is not information. And no status may imply
     a verification that did not happen — see .chip--attested. */
  --ok-fg:    #14614F;  --ok-bg:   #E6F4F0;  --ok-line:  #9AD3C6;
  --due-fg:   #7A5A06;  --due-bg:  #FBF2DC;  --due-line: #E4CE8E;
  --open-fg:  #8A3A2C;  --open-bg: #FBEDEA;  --open-line:#EBB9AE;
  --info-fg:  #33507A;  --info-bg: #EEF3FA;  --info-line:#BFD0E8;

  /* — type — */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', 'Courier New', monospace;

  /* Fluid scale. One ratio, so headings on different pages relate to each
     other instead of each page inventing a size. */
  --t-hero:  clamp(38px, 4.8vw, 64px);
  --t-h1:    clamp(34px, 4.2vw, 54px);
  --t-h2:    clamp(27px, 3.2vw, 40px);
  --t-h3:    clamp(20px, 1.6vw, 24px);
  --t-h4:    18px;
  --t-lead:  clamp(16.5px, 1.2vw, 18.5px);
  --t-body:  16px;
  --t-small: 14.5px;
  --t-micro: 13px;
  --t-label: 11.5px;

  --lh-tight: 1.1;
  --lh-head:  1.2;
  --lh-body:  1.7;
  --lh-loose: 1.85;

  /* — spacing (4px base; only these steps) — */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 20px;
  --s6: 24px;  --s7: 32px;  --s8: 40px;  --s9: 48px;  --s10: 64px;
  --s11: 80px; --s12: 104px;

  /* Section rhythm — the single knob for vertical pace. */
  --section-y:      clamp(56px, 7vw, 96px);
  --section-y-tight:clamp(40px, 5vw, 64px);

  /* — widths —
     Three, each with a job. Detailed explanation goes in --w-read so the
     line length stays comfortable; cards and media get --w-page. Anything
     between them should be a deliberate choice, not a drift. */
  --w-page: 1240px;
  --w-wide: 1080px;
  --w-read: 720px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15,26,46,.06), 0 2px 8px rgba(15,26,46,.05);
  --shadow-md: 0 4px 14px rgba(15,26,46,.08), 0 12px 32px rgba(15,26,46,.07);
  --shadow-action: 0 4px 14px rgba(201,146,10,.25);

  --transition: 240ms cubic-bezier(.4,0,.2,1);

  --header-h: 76px;   /* kept deliberately small; see §4 */
}

/* ───────────────────────────────────────────────────────────────────────────
   2 · RESET & BASE
   ─────────────────────────────────────────────────────────────────────────── */
.s-scope *, .s-scope *::before, .s-scope *::after { box-sizing: border-box; }

/* ⚠ TYPOGRAPHY IS OPT-IN, VIA .s-typo ON <body>.
   It began life on .s-scope and immediately broke every legacy page it
   touched: `.s-scope h1` (0,1,1) outranks a page's own `h1` (0,0,1), so a
   white heading on a navy hero silently became navy on navy. A shared system
   must not be able to damage a page merely by being linked. .s-scope is
   therefore limited to what is safe everywhere; the type scale applies only
   once a page has actually been migrated. */

html { -webkit-text-size-adjust: 100%; }
/* `clip`, not `hidden`: overflow-x:hidden on html or body turns that element
   into a scroll container and silently kills position:sticky on the header.
   `clip` trims the off-canvas drawer without creating a scroll port. */
html { overflow-x: clip; }
@supports not (overflow: clip) {
  body.s-body { overflow-x: hidden; }
}
/* ⚠ scroll-padding, not a magic margin on every anchor: a sticky header must
   never park itself on top of the heading a visitor just clicked to reach. */
html:has(.s-header--sticky) { scroll-padding-top: calc(var(--header-h) + 12px); }

body.s-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
.s-scope img, .s-scope svg, .s-scope video { max-width: 100%; }
.s-typo img, .s-typo video { height: auto; display: block; }

/* ───────────────────────────────────────────────────────────────────────────
   3 · TYPOGRAPHY
   Serif display for headings, DM Sans for reading, DM Mono for short labels.

   ⚠ TWO RULES THE OLD PAGES BROKE REPEATEDLY:
   1. Widely spaced uppercase is for LABELS ONLY — a handful of words. It is
      not a section heading. Several pages used an 9px tracked-out eyebrow
      where the actual heading should have been, which reads as decoration
      and leaves the page with no scannable structure.
   2. Gold and italic are emphasis, not defaults. Gold italic on every heading
      stops meaning anything by the third one.
   ─────────────────────────────────────────────────────────────────────────── */
.s-typo h1, .s-typo h2, .s-typo h3, .s-typo h4,
.s-hero-title, .s-h1, .s-h2, .s-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy);
  line-height: var(--lh-head);
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}
.s-hero-title { font-size: var(--t-hero); line-height: var(--lh-tight); }
.s-typo h1, .s-h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
.s-typo h2, .s-h2 { font-size: var(--t-h2); }
.s-typo h3, .s-h3 { font-size: var(--t-h3); font-weight: 600; }
.s-typo h4        { font-size: var(--t-h4); font-weight: 600; font-family: var(--font-body); }

/* Emphasis inside a heading. Used sparingly — at most one per heading. */
.s-typo h1 em, .s-typo h2 em, .s-hero-title em, .s-h1 em, .s-h2 em {
  font-style: italic; color: var(--gold-deep);
}
.on-brand h1 em, .on-brand h2 em, .on-brand .s-hero-title em { color: var(--gold-hi); }

.s-lead {
  font-size: var(--t-lead); line-height: var(--lh-body);
  color: var(--text-muted); max-width: 62ch; margin: var(--s4) 0 0;
}
.s-typo p { margin: 0 0 var(--s4); color: var(--text-muted); }
.s-typo p:last-child { margin-bottom: 0; }

/* The label. Short, tracked, quiet — and never a substitute for a heading. */
.s-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 var(--s3);
}
.on-brand .s-eyebrow { color: var(--teal-soft); }

/* Caption / scope note — the small print that keeps a claim honest. It sits
   with the thing it qualifies, never in a distant legal page. */
.s-note, .s-typo figcaption {
  font-size: var(--t-micro); line-height: 1.6; color: var(--text-faint);
  margin: var(--s3) 0 0;
}
.on-brand .s-note, .on-brand figcaption { color: rgba(255,255,255,.66); }

.s-small { font-size: var(--t-small); }

/* Links. Teal, underlined on hover, always distinguishable without colour
   alone once focused or hovered. */
.s-typo a { color: var(--action-2); text-decoration: none; }
.s-typo a:hover { color: var(--action-2-hover); text-decoration: underline; text-underline-offset: 2px; }
.on-brand a { color: var(--action-2-on-brand); }
.s-prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* Reading column for detailed explanation. */
.s-prose { max-width: var(--w-read); }
.s-prose p { font-size: var(--t-body); line-height: var(--lh-loose); }
.s-prose h2 { margin: var(--s9) 0 var(--s4); }
.s-prose h3 { margin: var(--s7) 0 var(--s3); }
.s-prose ul, .s-prose ol { margin: 0 0 var(--s4); padding-left: var(--s6); color: var(--text-muted); }
.s-prose li { margin: var(--s2) 0; line-height: var(--lh-body); }
.s-prose li::marker { color: var(--gold-deep); }
.s-prose strong { color: var(--text); font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────────────
   4 · PAGE SHELL — header, navigation, footer
   The header is deliberately COMPACT. A tall sticky header on a 390px phone
   eats the content a visitor came for, and the old interior pages reserved
   140px of top padding for a bar carrying two links.
   ─────────────────────────────────────────────────────────────────────────── */
/* ⚠ The old -9999px trick pushes a real box outside the page and shows up as
   horizontal overflow on a 390px screen. Clip it instead: no box, no scroll. */
.s-skip {
  position: absolute; top: 0; left: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
  clip-path: inset(50%); white-space: nowrap;
}
.s-skip:focus { clip-path: none; }

/* ⚠ DEFENSIVE RESETS — NOT DECORATION.
   Legacy pages style bare elements: `nav{position:fixed;top:0;...}` and
   `footer{background:…;padding:…}`. The shared shell puts a <nav> INSIDE a
   <header>, so an un-migrated page's bare rule would yank the shell's nav out
   of flow — which is precisely the defect that once clipped a logo off the
   top of a page while a presence-only check reported everything fine.
   A class beats an element selector, so these win regardless of load order.
   Keep them even after a page's own CSS is deleted: the next page to be
   converted will still have them. */
.s-header, .s-header .s-nav, .s-subnav, .s-footer {
  position: static; inset: auto;
}
.s-header--sticky { position: sticky; top: 0; }
.s-header .s-nav { background: none; border: none; box-shadow: none; padding: 0; margin: 0; backdrop-filter: none; }

.s-header {
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 90;
}
.s-header--sticky { position: sticky; top: 0; }
.s-header__inner {
  max-width: var(--w-page); margin: 0 auto;
  padding: var(--s3) var(--s7);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  min-height: var(--header-h);
}
/* Logo: one lockup, one set of proportions, everywhere. Clear space either
   side is the logo's own cap height — enforced by the padding here. */
.s-logo { display: inline-flex; align-items: center; flex-shrink: 0; padding: 2px 0; }
.s-logo svg { height: 54px; width: auto; display: block; }
.s-logo .ls-name { fill: var(--navy); }
.s-logo--light .ls-name { fill: var(--white); }

.s-nav { display: flex; align-items: center; gap: var(--s6); }
.s-nav a {
  font-size: var(--t-small); color: var(--text-muted); white-space: nowrap;
  padding: var(--s2) 0; border-bottom: 2px solid transparent;
}
.s-nav a:hover { color: var(--navy); text-decoration: none; border-bottom-color: var(--teal); }
.s-nav a[aria-current="page"] { color: var(--navy); font-weight: 600; border-bottom-color: var(--gold); }

.s-header__actions { display: flex; align-items: center; gap: var(--s4); }
.s-header__login { font-size: var(--t-micro); color: var(--text-faint); white-space: nowrap; }
.s-header__login:hover { color: var(--navy); }

.s-burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.s-burger span { display: block; width: 18px; height: 2px; background: var(--navy); position: relative; }
.s-burger span::before, .s-burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--navy);
}
.s-burger span::before { top: -6px; } .s-burger span::after { top: 6px; }

.s-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px);
  background: var(--white); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform var(--transition);
  z-index: 120; padding: var(--s9) var(--s6) var(--s6); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s2);
}
.s-drawer[data-open="true"] { transform: translateX(0); visibility: visible; }
/* Closed: hidden from assistive tech and from the tab order, and — the part
   that actually bit — not contributing 335px of scrollable width to every
   page on the site. The off-canvas panel is real layout, so it has to be
   clipped at the root (below) as well as hidden here. */
.s-drawer[data-open="false"] { visibility: hidden; }
.s-drawer a { padding: var(--s4) 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--navy); }
.s-drawer .s-btn { margin-top: var(--s5); border-bottom: none; }
.s-drawer__close { position: absolute; top: var(--s4); right: var(--s4); width: 44px; height: 44px; font-size: 22px; color: var(--slate); background: none; border: none; cursor: pointer; }
.s-scrim { position: fixed; inset: 0; background: rgba(15,26,46,.45); opacity: 0; pointer-events: none; transition: opacity var(--transition); z-index: 110; }
.s-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* Secondary, service-level navigation. Allowed — but visibly subordinate to
   the shared header, which is why it is a thin band and never sticky. */
.s-subnav { background: var(--navy); border-top: 1px solid rgba(255,255,255,.08); }
.s-subnav__inner {
  max-width: var(--w-page); margin: 0 auto; padding: var(--s3) var(--s7);
  display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap;
}
.s-subnav__label {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-soft); margin-right: var(--s2);
}
/* The links live inside a nested <nav>, which is ONE flex child of the row —
   so the row's gap put space around the group, not between the links, and
   they rendered as "Overview What It Costs See a Sample". */
.s-subnav nav { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.s-subnav a { font-size: var(--t-small); color: rgba(255,255,255,.76); padding: var(--s1) 0; border-bottom: 2px solid transparent; }
.s-subnav a:hover { color: #fff; text-decoration: none; border-bottom-color: var(--teal); }
.s-subnav a[aria-current="page"] { color: #fff; font-weight: 600; border-bottom-color: var(--gold); }

/* Footer */
.s-footer { background: var(--navy-deep); color: rgba(255,255,255,.72); padding: var(--s11) 0 var(--s7); }
.s-footer__inner { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s7); }
.s-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s9) var(--s7); }
.s-footer h3 {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-soft); font-weight: 500; margin: 0 0 var(--s4);
}
.s-footer ul { list-style: none; margin: 0; padding: 0; }
.s-footer li { margin: 0 0 var(--s3); }
.s-footer a { color: rgba(255,255,255,.72); font-size: var(--t-small); }
.s-footer a:hover { color: #fff; }
.s-footer__tag { font-family: var(--font-display); font-size: 17px; font-style: italic; color: rgba(255,255,255,.82); margin-top: var(--s4); max-width: 34ch; }
.s-footer__cols { columns: 3; column-gap: var(--s7); }
@media (max-width: 1080px) { .s-footer__cols { columns: 2; } }
@media (max-width: 640px)  { .s-footer__cols { columns: 1; } }

.s-footer__bottom {
  margin-top: var(--s9); padding-top: var(--s6); border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  flex-wrap: wrap; font-size: var(--t-micro); color: rgba(255,255,255,.55);
}
.s-footer__bottom a { font-size: var(--t-micro); margin-right: var(--s4); }

/* ───────────────────────────────────────────────────────────────────────────
   5 · LAYOUT
   ─────────────────────────────────────────────────────────────────────────── */
.s-container  { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s7); }
.s-container--wide { max-width: var(--w-wide); }
.s-container--read { max-width: calc(var(--w-read) + var(--s7) * 2); }

.s-section { padding: var(--section-y) 0; }
.s-section--tight { padding: var(--section-y-tight) 0; }
.s-section--alt  { background: var(--surface-alt); }
.s-section--sunk { background: var(--surface-sunk); }
.s-section--brand, .s-section--brand.on-brand {
  background: var(--surface-brand); color: var(--text-on-brand);
}
.on-brand h1, .on-brand h2, .on-brand h3, .on-brand h4, .on-brand .s-hero-title { color: var(--white); }
.on-brand p, .on-brand .s-lead, .on-brand li { color: var(--text-on-brand-muted); }

/* ⚠ LIGHT ISLANDS ON DARK GROUND.
   A white card sitting inside an .on-brand section inherits the dark-ground
   text colours and renders white-on-white — the body copy simply vanishes,
   while the headings (which set their own colour) stay visible, so the card
   looks intentional and half-empty rather than broken. Any light surface
   nested in a dark section re-asserts the light palette for its own contents. */
.on-brand .s-card,
.on-brand .s-split__col,
.on-brand .s-table,
.on-brand .s-deflist { color: var(--text); }
.on-brand .s-card p, .on-brand .s-card li, .on-brand .s-card span,
.on-brand .s-split__col p, .on-brand .s-split__detail,
.on-brand .s-table td, .on-brand .s-deflist span { color: var(--text-muted); }
.on-brand .s-card h3, .on-brand .s-split__what,
.on-brand .s-table th, .on-brand .s-deflist b { color: var(--navy); }
.on-brand .s-card .s-card__kicker, .on-brand .s-split__who { color: var(--teal-deep); }
.on-brand .s-card .s-note { color: var(--text-faint); }

/* Section header block — eyebrow, heading, lead. Same object everywhere. */
.s-sec-head { max-width: 62ch; margin-bottom: var(--s8); }
.s-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.s-sec-head--center .s-lead { margin-left: auto; margin-right: auto; }

/* Responsive grids. Cards choose a column count; the grid handles the rest. */
.s-grid { display: grid; gap: var(--s6); }
.s-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.s-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.s-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.s-grid--split { grid-template-columns: 1.05fr .95fr; gap: var(--s10); align-items: center; }

/* ───────────────────────────────────────────────────────────────────────────
   6 · ACTIONS
   Three levels, and only three. A label must describe where it goes: a
   contact form is "Discuss…" or "Request…", never "Book" or "Enroll".
   ─────────────────────────────────────────────────────────────────────────── */
.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 14px 28px;
  font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; letter-spacing: .01em;
  border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer;
  text-align: center; text-decoration: none;
  transition: background var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.s-btn:hover { text-decoration: none; }
.s-btn--primary { background: var(--action); color: var(--action-text); box-shadow: var(--shadow-action); }
.s-btn--primary:hover { background: var(--action-hover); color: var(--action-text); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(201,146,10,.34); }
.s-btn--secondary { background: transparent; color: var(--action-2); border-color: var(--action-2); }
.s-btn--secondary:hover { background: var(--action-2); color: #fff; transform: translateY(-2px); }
.on-brand .s-btn--secondary { color: #fff; border-color: rgba(255,255,255,.45); }
.on-brand .s-btn--secondary:hover { background: #fff; color: var(--navy); border-color: #fff; }
.s-btn--text { background: none; border: none; padding: var(--s2) 0; min-height: 0; color: var(--action-2); }
.s-btn--text:hover { text-decoration: underline; text-underline-offset: 3px; }
.s-btn--sm { min-height: 40px; padding: 10px 20px; font-size: var(--t-micro); }
.s-btn--lg { min-height: 54px; padding: 17px 34px; font-size: 15px; }
.s-btn--block { display: flex; width: 100%; }

.s-btn[disabled], .s-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.s-btn[data-loading="true"] { cursor: progress; pointer-events: none; }
.s-btn[data-loading="true"]::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: s-spin .7s linear infinite;
}
@keyframes s-spin { to { transform: rotate(360deg); } }

.s-actions { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
.s-actions + .s-note { margin-top: var(--s5); }

/* ───────────────────────────────────────────────────────────────────────────
   7 · CARDS & CONTENT PATTERNS
   Reusable blocks for the shapes this site actually needs. A page picks a
   combination; cohesion does not require identical layouts.
   ─────────────────────────────────────────────────────────────────────────── */
.s-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s7); display: flex; flex-direction: column; gap: var(--s3);
}
.s-card--raised { box-shadow: var(--shadow-sm); border-color: transparent; }
.s-card--accent { border-top: 3px solid var(--gold); }
a.s-card { color: inherit; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
a.s-card:hover { text-decoration: none; border-color: var(--teal); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.s-card__kicker {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}
.s-card h3 { margin: 0; }
.s-card p { font-size: var(--t-small); line-height: var(--lh-body); margin: 0; }

/* Responsibility split — "you provide / Sentinel maintains / you see".
   The single most important pattern on the site: it is the division of work,
   drawn. */
.s-split { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5); align-items: stretch; }
.s-split__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s6); }
.s-split__col--core { border-color: var(--teal); border-top: 3px solid var(--teal); background: #FAFDFC; }
.s-split__who {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-deep); margin-bottom: var(--s3);
}
.s-split__col--core .s-split__who { color: var(--teal-deep); }
.s-split__what { font-family: var(--font-display); font-size: 21px; color: var(--navy); line-height: 1.3; margin-bottom: var(--s3); }
.s-split__detail { font-size: var(--t-small); color: var(--text-muted); line-height: var(--lh-body); margin: 0; }

/* Process steps */
.s-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.s-step { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); align-items: start; }
.s-step__n {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-family: var(--font-mono); font-size: var(--t-micro);
}
.s-step h3 { font-size: var(--t-h4); font-family: var(--font-body); font-weight: 600; margin: 0 0 var(--s1); }
.s-step p { font-size: var(--t-small); margin: 0; }

/* Comparison table. Horizontally scrollable inside its own container so the
   page body never scrolls sideways. */
.s-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-md); }
.s-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--t-small); background: var(--surface); }
.s-table th, .s-table td { padding: var(--s4) var(--s5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.s-table thead th {
  background: var(--surface-alt); font-family: var(--font-body); font-size: var(--t-micro); font-weight: 600;
  color: var(--navy); position: sticky; top: 0;
}
.s-table tbody th { font-weight: 600; color: var(--navy); width: 30%; }
.s-table td { color: var(--text-muted); line-height: 1.55; }
.s-table .is-sentinel { background: #FAFDFC; color: var(--text); font-weight: 500; }
.s-table tr:last-child th, .s-table tr:last-child td { border-bottom: none; }

/* Definition rows — deliverables, inclusions, boundaries */
.s-deflist { list-style: none; margin: 0; padding: 0; }
.s-deflist li { padding: var(--s4) 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--s4); align-items: flex-start; }
.s-deflist li:last-child { border-bottom: none; }
.s-deflist b { color: var(--navy); font-weight: 600; }
.s-deflist span { font-size: var(--t-small); color: var(--text-muted); }

/* FAQ */
.s-faq { border-top: 1px solid var(--line); }
.s-faq__item { border-bottom: 1px solid var(--line); }
.s-faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s5) 0; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--navy); min-height: 48px;
}
.s-faq__q::after { content: "+"; font-size: 20px; color: var(--teal-deep); flex-shrink: 0; }
.s-faq__q[aria-expanded="true"]::after { content: "\2212"; }
.s-faq__a { display: none; padding: 0 0 var(--s5); }
.s-faq__q[aria-expanded="true"] + .s-faq__a { display: block; }
.s-faq__a p { font-size: var(--t-small); max-width: 68ch; }

/* ───────────────────────────────────────────────────────────────────────────
   8 · STATUS
   ⚠ THE RULE THAT MATTERS MOST ON THIS SITE: a status chip states what the
   record says, never what a regulator would conclude. "Current" means the
   evidence is on file and in date — it is not a finding of compliance, and
   Sentinel does not certify one. Where a date is supplied by the practice
   rather than checked against an issuing source, it must be labelled
   attested, not verified. Those are different facts.
   ─────────────────────────────────────────────────────────────────────────── */
.s-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .06em;
  border: 1px solid; white-space: nowrap;
}
.s-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.s-chip--ok   { color: var(--ok-fg);   background: var(--ok-bg);   border-color: var(--ok-line); }
.s-chip--due  { color: var(--due-fg);  background: var(--due-bg);  border-color: var(--due-line); }
.s-chip--due::before  { border-radius: 1px; }              /* square = due */
.s-chip--open { color: var(--open-fg); background: var(--open-bg); border-color: var(--open-line); }
.s-chip--open::before { border-radius: 1px; transform: rotate(45deg); }  /* diamond = open */
.s-chip--info { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-line); }
.s-chip--attested { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-line); }
.s-chip--attested::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* triangle */

/* Demonstration-data marker. Any screen, sample or figure that is not a real
   client record carries one. Non-negotiable. */
.s-demo-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--gold-soft); border: 1px solid #E9D08A;
  padding: 3px 10px; border-radius: var(--r-pill);
}
.on-brand .s-demo-pill { color: var(--gold-hi); background: rgba(201,146,10,.14); border-color: rgba(228,168,32,.42); }

/* ───────────────────────────────────────────────────────────────────────────
   9 · FORMS
   Labels are always visible. Placeholders are examples, never labels.
   ─────────────────────────────────────────────────────────────────────────── */
.s-form { display: grid; gap: var(--s5); }
.s-form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5); }
.s-field { display: flex; flex-direction: column; gap: var(--s2); }
.s-label { font-size: var(--t-micro); font-weight: 600; color: var(--navy); }
.s-label .s-req { color: var(--rust); margin-left: 3px; }
.s-input, .s-select, .s-textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.s-textarea { min-height: 108px; resize: vertical; line-height: var(--lh-body); }
.s-input:hover, .s-select:hover, .s-textarea:hover { border-color: var(--mid); }
.s-input:focus, .s-select:focus, .s-textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(42,158,142,.18);
}
.s-input[aria-invalid="true"], .s-textarea[aria-invalid="true"] { border-color: var(--rust); }
.s-help { font-size: var(--t-micro); color: var(--text-faint); }
.s-error { font-size: var(--t-micro); color: var(--rust); font-weight: 500; }
.s-success {
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-fg);
  padding: var(--s5); border-radius: var(--r-sm); font-size: var(--t-small);
}
.on-brand .s-label { color: rgba(255,255,255,.9); }
.on-brand .s-help  { color: rgba(255,255,255,.6); }
/* Honeypot. ⚠ Clipped, not parked at -9999px: an off-page box is real layout
   and made /risk-analysis scrollable sideways on a phone. Still invisible to
   people, still fillable by a bot, which is the whole point. */
.s-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }

/* ───────────────────────────────────────────────────────────────────────────
   10 · MEDIA
   One frame treatment, one caption treatment, one video affordance.
   Sales information must never live only inside a video.
   ─────────────────────────────────────────────────────────────────────────── */
.s-figure { margin: 0; }
.s-figure img { width: 100%; border-radius: var(--r-md); }
.s-figure--framed img { border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.s-media { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--r-md); overflow: hidden; }
.s-media img { width: 100%; display: block; }
.s-media__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.94);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  transition: transform var(--transition);
}
.s-media__play::after { content: ""; border-left: 17px solid var(--navy); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.s-media:hover .s-media__play { transform: translate(-50%,-50%) scale(1.06); }
.s-media__badge {
  position: absolute; left: var(--s4); bottom: var(--s4);
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(15,26,46,.82); color: #fff; padding: 5px 11px; border-radius: var(--r-pill);
}

/* ───────────────────────────────────────────────────────────────────────────
   11 · FLOATING ELEMENTS
   ⚠ There must be at most ONE floating thing in a corner. The assistant
   launcher owns bottom-right. A sticky CTA, if a page ever needs one, sits
   bottom-left and yields to the drawer. They are given a shared z-index
   ladder here so no page invents its own and covers the other.
   ─────────────────────────────────────────────────────────────────────────── */
.s-float-right { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 100; }
.s-float-left  { position: fixed; left: var(--s5);  bottom: var(--s5); z-index: 99; }
body[data-drawer="open"] .s-float-right,
body[data-drawer="open"] .s-float-left { display: none; }

/* ⚠ The Ask Sentinel widget predates this system and owns its own fixed
   positioning at z-index 9998/9999 (#as-launch / #as-panel), so the class-based
   rule above never reached it — the launcher floated on top of the open mobile
   drawer, which is exactly the "competing floating elements" problem this
   section exists to prevent. Named explicitly rather than restyled, so the
   widget keeps working unchanged. */
body[data-drawer="open"] #as-launch,
body[data-drawer="open"] #as-panel { display: none !important; }

/* ───────────────────────────────────────────────────────────────────────────
   12 · ACCESSIBILITY & MOTION
   ─────────────────────────────────────────────────────────────────────────── */
.s-scope :focus-visible,
.s-body :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.on-brand :focus-visible { outline-color: var(--focus-on-brand); }
.s-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .s-body *, .s-scope * {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   13 · RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .s-logo svg { height: 46px; }
  .s-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s-grid--split { grid-template-columns: 1fr; gap: var(--s8); }
  .s-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .s-nav, .s-header__login { display: none; }
  .s-burger { display: inline-flex; }
  .s-grid--3, .s-split { grid-template-columns: 1fr; }
  .s-steps { gap: var(--s6); }
}
@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .s-container, .s-header__inner, .s-footer__inner, .s-subnav__inner { padding-left: var(--s5); padding-right: var(--s5); }
  .s-logo svg { height: 40px; }
  .s-grid--2, .s-form__row { grid-template-columns: 1fr; }
  .s-footer__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .s-card { padding: var(--s6); }
  .s-actions .s-btn { width: 100%; }
  .s-float-right, .s-float-left { bottom: var(--s4); }
}

/* ───────────────────────────────────────────────────────────────────────────
   14 · PRINT — sample packages and summaries are meant to be printed.
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
  .s-header, .s-subnav, .s-footer, .s-float-right, .s-float-left, .s-drawer, .s-scrim { display: none !important; }
  .s-body { color: #000; background: #fff; }
  .s-section { padding: 12px 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}


/* ───────────────────────────────────────────────────────────────────────────
   15 · SHELL CORRECTIONS FOR MIGRATED PAGES
   Legacy pages reserved 140–170px of top padding for a `position:fixed` nav.
   The shared header sits in normal flow, so that reservation became a large
   empty band above the first heading. Scoped to body.s-shell so only pages
   carrying the shared shell are affected.
   ─────────────────────────────────────────────────────────────────────────── */
body.s-shell .bcrumb    { padding-top: var(--s6); }
body.s-shell .page-head { padding-top: var(--s8); }
/* Every hero variant the legacy pages invented. Listing them beats guessing:
   .trigger-hero alone appears on six pages, each reserving 180px. */
body.s-shell .hero,
body.s-shell .hero-band,
body.s-shell .hero-wrap,
body.s-shell .trigger-hero,
body.s-shell .partner-hero,
body.s-shell .page-hero,
body.s-shell .city-hero    { padding-top: var(--s10); }
body.s-shell main          { padding-top: 0; }
@media (max-width: 640px) {
  body.s-shell .bcrumb { padding-top: var(--s5); }
  body.s-shell .hero,
  body.s-shell .hero-band,
  body.s-shell .hero-wrap,
  body.s-shell .trigger-hero,
  body.s-shell .partner-hero,
  body.s-shell .page-hero,
  body.s-shell .city-hero { padding-top: var(--s8); }
}