/* =========================================================================
   SiteMend — design system
   Hand-authored. System font stacks only: no webfont files, no external
   requests, no CDN. Light, spacious canvas; deep navy ink; one diagnostic
   accent (teal) reserved for repair/verification signals.
   ========================================================================= */

:root {
  /* --- surface & ink --- */
  --bg:            #f7f9fb;
  --bg-raised:     #ffffff;
  --bg-deep:       #0f1b2d;   /* inverted band */
  --bg-tint:       #eef3f7;

  --ink:           #0F172A;   /* headings — matches the brand mark's tile */
  --ink-body:      #3c4b63;   /* body copy — 7.4:1 on --bg */
  --ink-muted:     #56657d;   /* supporting copy — 5.2:1 on --bg */
  --ink-invert:    #eef3f8;
  --ink-invert-mut:#a9b8cc;

  /* --- accent: taken from the brand mark's pulse.
     The mark uses amber (#F59E0B, the fault) resolving into emerald (#34D399,
     the repair). Those exact values are display-bright; on a light background
     they are darkened here to stay readable, and the bright originals are kept
     for dark bands only. --flag reuses the mark's amber as the "fault" signal,
     which is why problem cards are amber and repairs are emerald. --- */
  --accent:        #0B7A5A;   /* emerald, darkened for light bg */
  --accent-strong: #08674C;
  --accent-soft:   #e3f5ee;
  --accent-bright: #34D399;   /* brand emerald — dark backgrounds only */
  --flag:          #B4700A;   /* brand amber, darkened for light bg */
  --flag-bright:   #F59E0B;   /* brand amber — dark backgrounds only */

  /* --- lines --- */
  --line:          #dde5ee;
  --line-strong:   #c3cfdd;
  --focus:         #0b6f6b;

  /* --- brand tokens consumed by inline SVG --- */
  --brand-ink:     var(--ink);
  --brand-accent:  var(--accent);

  /* --- type --- */
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* --- spacing scale --- */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2.25rem; --s5: 3.5rem; --s6: 5.5rem;

  --radius: 12px;
  --radius-lg: 18px;
  --shell: 1180px;
  --t: 180ms cubic-bezier(.2,.6,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px base — comfortable, not a 14px squint */
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* Dutch and Polish produce long compound words. At 200% text zoom on a 320px
     viewport a single unbreakable token was widening the whole page (WCAG 1.4.4 /
     1.4.10). Allow breaking rather than forcing horizontal scrolling. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
body.sm-nav-open { overflow: hidden; }

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display); color: var(--ink); line-height: 1.16;
  margin: 0 0 var(--s2); font-weight: 700;
  /* No auto-hyphenation on display type: at hero size it broke words mid-line
     ("pro-blemen", "web-site") and read as a typographic defect. Wrapping is
     still allowed so a long compound can never widen the page. */
  overflow-wrap: break-word; hyphens: manual; min-width: 0;
}
h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.4rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.075rem, 1rem + 0.35vw, 1.2rem); line-height: 1.3; margin-bottom: .4rem; }

p { margin: 0 0 var(--s2); max-width: 68ch; }
a { color: var(--accent-strong); }

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

.sm-skip {
  position: absolute; left: var(--s2); top: var(--s2); z-index: 300;
  background: var(--ink); color: var(--ink-invert); padding: .7rem 1.1rem;
  border-radius: var(--radius); text-decoration: none; font-weight: 600;
  /* Hidden by transform, not by a fixed negative `top`: at 200% text zoom the
     link grows past any fixed offset and its dark block was peeking into the
     viewport. A percentage translate is always relative to the element's own
     height, so it stays hidden at any text size. */
  transform: translateY(calc(-100% - var(--s3)));
  transition: transform var(--t);
}
.sm-skip:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.sm-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s2); min-width: 0; }
/* Every direct grid/flex child must be allowed to shrink below its content
   width, otherwise one long word re-widens the whole page at high zoom. */
.sm-hero-inner > *, .sm-trust-list > *, .sm-problem-grid > *, .sm-steps > *,
.sm-scope-grid > *, .sm-service-grid > *, .sm-why-grid > *, .sm-footer-inner > *,
.sm-hero-actions > *, .sm-gateway-list > *, .sm-shell > *,
.sm-form > *, .sm-field > * { min-width: 0; max-width: 100%; }
.sm-shell--narrow { max-width: 780px; }
@media (min-width: 720px) { .sm-shell { padding-inline: var(--s4); } }

/* ---------------------------------------------------------------- header */
.sm-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,249,251,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.sm-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); padding-block: .7rem;
  /* nowrap is deliberate: a wrapped desktop header does not overflow, it silently
     doubles in height. There must be no in-between state — either everything fits
     on one row, or the desktop nav is hidden and the toggle takes over. */
  flex-wrap: nowrap;
}
.sm-logo-link { text-decoration: none; color: var(--ink); display: inline-block; }
.sm-logo { display: inline-flex; align-items: center; gap: .6rem; }
.sm-mark { flex-shrink: 0; border-radius: 9px; }
.sm-logo-word {
  font-family: var(--font-body); font-size: 1.28rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); line-height: 1.05;
  display: grid;
}
.sm-logo-word strong { font-weight: 700; }
.sm-logo-mend { color: var(--accent); }
.sm-logo-studio {
  grid-column: 1 / -1; font-size: .5rem; font-weight: 500; letter-spacing: .38em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: .12rem;
}
.sm-footer .sm-logo-mend { color: var(--accent-bright); }
.sm-footer .sm-logo-studio { color: var(--ink-invert-mut); }

.sm-nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: var(--radius); padding: .55rem .9rem; font: inherit; font-size: .95rem;
  font-weight: 600; cursor: pointer; min-height: 44px;
}
.sm-burger, .sm-burger::before, .sm-burger::after {
  display: block; width: 17px; height: 2px; background: currentColor; position: relative; border-radius: 2px;
}
.sm-burger::before, .sm-burger::after { content: ''; position: absolute; left: 0; }
.sm-burger::before { top: -5.5px; }
.sm-burger::after  { top:  5.5px; }

.sm-nav { width: 100%; display: none; padding-bottom: var(--s2); }
.sm-nav.is-open { display: block; }
.sm-nav ul { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-direction: column; }
.sm-nav ul a {
  display: block; padding: .75rem .25rem; text-decoration: none; color: var(--ink);
  font-weight: 600; border-bottom: 1px solid var(--line);
}
.sm-nav ul a:hover { color: var(--accent-strong); }
.sm-nav-cta { width: 100%; text-align: center; }

/* The header CTA uses a short label; the full sentence stays for screen readers
   and for the mobile drawer, where there is room. This is not hidden text —
   both are real labels, only one is shown per context. */
.sm-cta-short { display: none; }
.sm-cta-full { display: inline; }

/* Desktop navigation breakpoint.
   Measured, not guessed: at 1x the header row needs 1119px (NL), 1196px (FR) and
   1088px (PL) with the full CTA label. Shortening the header CTA brings the widest
   language (FR) under 1080px.
   Set to 1200px rather than the tighter 1150px: all measurements come from one
   machine's font stack, and a wider metric substitution (Liberation Sans, Roboto)
   could eat the ~60px headroom that 1150px left for French. 1150–1200px is a rare
   viewport band and the hamburger is a perfectly good state there, so the extra
   margin costs nothing.
   Below this, the desktop nav is fully hidden and the toggle takes over — there is
   no intermediate wrapped state. */
@media (min-width: 1200px) {
  .sm-nav-toggle { display: none; }
  .sm-nav {
    display: flex !important; width: auto; align-items: center;
    gap: var(--s3); padding-bottom: 0; flex-wrap: nowrap;
  }
  .sm-nav ul { flex-direction: row; gap: var(--s3); margin: 0; flex-wrap: nowrap; }
  .sm-nav ul a { border-bottom: 0; padding: .35rem 0; font-weight: 500; white-space: nowrap; }
  .sm-nav ul li { flex-shrink: 0; }
  .sm-lang { flex-shrink: 0; }
  .sm-nav-cta { width: auto; flex-shrink: 0; white-space: nowrap; }
  .sm-cta-short { display: inline; }
  /* display:none, NOT the clip technique. Clip-hidden text stays in the
     accessibility tree, so a screen reader announced this link as
     "Audit gratuit Demander un audit gratuit" — both labels stuttered together.
     Assistive tech now gets exactly what sighted users get. */
  .sm-cta-full { display: none; }
  .sm-logo-link { flex-shrink: 0; }
  body.sm-nav-open { overflow: auto; }
}

/* ------------------------------------------------------ language switcher */
.sm-lang { display: inline-flex; gap: .15rem; align-items: center; }
.sm-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 40px; padding: 0 .5rem;
  font-size: .875rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-muted); text-decoration: none; border-radius: 8px;
}
.sm-lang a:hover { color: var(--accent-strong); background: var(--accent-soft); }
.sm-lang a[aria-current="true"] { color: var(--ink); background: var(--bg-tint); }
.sm-lang--footer a { color: var(--ink-invert-mut); }
.sm-lang--footer a:hover { color: var(--ink-invert); background: rgba(255,255,255,.08); }
.sm-lang--footer a[aria-current="true"] { color: var(--ink-invert); background: rgba(255,255,255,.12); }

/* --------------------------------------------------------------- buttons */
.sm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .8rem 1.5rem; border-radius: var(--radius);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: background var(--t), color var(--t), border-color var(--t);
}
.sm-btn--lg { min-height: 54px; padding-inline: 1.9rem; font-size: 1.05rem; }
.sm-btn--primary { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.sm-btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.sm-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.sm-btn--ghost:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

.sm-link-arrow {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
  font-weight: 600; color: var(--accent-strong); text-decoration: underline;
  text-underline-offset: 3px;
}
.sm-link-arrow::after { content: '→'; transition: transform var(--t); }
.sm-link-arrow:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------ hero
   Dark band, matching the brand mark's own environment (the mark is a dark
   tile). Everything below the hero stays light — the contrast between the two
   is the page's main rhythm device. */
.sm-hero {
  padding-block: var(--s5) var(--s4);
  background:
    radial-gradient(ellipse 70% 55% at 82% 12%, rgba(52,211,153,.13), transparent 62%),
    radial-gradient(ellipse 60% 55% at 6% 92%, rgba(245,158,11,.09), transparent 62%),
    #0B1220;
  color: var(--ink-invert-mut);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #1a2436;
}
/* Faint measurement grid — a diagnostic cue, fading out so it never competes
   with the headline. Decorative only. */
.sm-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
}
.sm-hero > * { position: relative; }
.sm-hero h1 { color: #F8FAFC; }
.sm-hero .sm-lead { color: #9FB0C6; }
.sm-hero .sm-eyebrow {
  color: var(--accent-bright); display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.08);
  border-radius: 999px; padding: .4rem .9rem; margin-bottom: var(--s3);
}
.sm-hero .sm-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-bright); flex-shrink: 0;
}
.sm-hero .sm-btn--ghost { color: #F8FAFC; border-color: rgba(255,255,255,.28); }
.sm-hero .sm-btn--ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.sm-hero .sm-link-arrow { color: var(--accent-bright); }
.sm-hero .sm-btn--primary { background: var(--accent-bright); color: #06231b; border-color: var(--accent-bright); }
.sm-hero .sm-btn--primary:hover { background: #5fe0b0; border-color: #5fe0b0; }
.sm-hero :focus-visible { outline-color: var(--accent-bright); }
.sm-hero-inner { display: grid; gap: var(--s4); }
@media (min-width: 960px) {
  .sm-hero { padding-block: var(--s6) var(--s5); }
  .sm-hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s5); }
}
.sm-eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-strong); margin-bottom: var(--s2); max-width: none;
}
.sm-hero h1 { max-width: 17ch; }
.sm-lead { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-body); max-width: 56ch; }
.sm-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }

.sm-hero-figure { margin: 0; }
.sm-hero-figure figcaption {
  margin-top: .8rem; font-size: .875rem; color: #7d8ea6;
  letter-spacing: .02em; text-align: center;
}

/* Audit panel — shows the eight REAL rubric categories. No scores, no
   percentages, no invented metrics: it illustrates what is checked, never a
   result. */
.sm-panel {
  background: #101A2B; border: 1px solid #1e2b40; border-radius: 14px;
  overflow: hidden; box-shadow: 0 24px 60px -30px rgba(0,0,0,.9);
}
.sm-panel-bar {
  display: flex; gap: .45rem; align-items: center;
  padding: .7rem .9rem; border-bottom: 1px solid #1e2b40; background: #0d1626;
}
.sm-panel-bar span { width: 9px; height: 9px; border-radius: 50%; }
.sm-panel-bar span:nth-child(1) { background: #F59E0B; }
.sm-panel-bar span:nth-child(2) { background: #64748B; }
.sm-panel-bar span:nth-child(3) { background: #34D399; }
.sm-panel-body { padding: var(--s2); }
.sm-panel-badges { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.sm-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 7px; border: 1px solid;
}
.sm-badge--fail { color: #F9C069; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.1); }
.sm-badge--pass { color: #6EE7B7; border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); }
.sm-pulse { width: 100%; height: auto; display: block; margin: var(--s2) 0; }
.sm-panel-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: .5rem .9rem;
}
@media (min-width: 420px) { .sm-panel-list { grid-template-columns: 1fr 1fr; } }
.sm-panel-list li {
  display: flex; align-items: flex-start; gap: .45rem; min-width: 0;
  font-size: .78rem; line-height: 1.35; color: #B7C6D9;
}
.sm-tick {
  flex-shrink: 0; width: 13px; height: 13px; margin-top: .18rem; border-radius: 50%;
  background: rgba(52,211,153,.16); position: relative;
}
.sm-tick::after {
  content: ''; position: absolute; left: 4px; top: 3px; width: 4px; height: 6px;
  border-right: 2px solid #34D399; border-bottom: 2px solid #34D399; transform: rotate(42deg);
}
.sm-panel-foot {
  margin: var(--s2) 0 0; padding-top: .75rem; border-top: 1px solid #1e2b40;
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: #64748B; max-width: none;
}

/* ----------------------------------------------------------- trust strip */
.sm-trust { background: var(--bg-raised); border-bottom: 1px solid var(--line); padding-block: var(--s3); }
.sm-trust-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s2); grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .sm-trust-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sm-trust-list { grid-template-columns: repeat(5, 1fr); } }
.sm-trust-list li { display: flex; flex-direction: column; gap: .15rem; padding-left: .9rem; border-left: 2px solid var(--accent); }
.sm-trust-label { font-weight: 700; color: var(--ink); font-size: .9375rem; }
.sm-trust-note  { font-size: .875rem; color: var(--ink-muted); line-height: 1.5; }

/* --------------------------------------------------------------- section */
.sm-section { padding-block: var(--s5); }
@media (min-width: 960px) { .sm-section { padding-block: var(--s6); } }
.sm-section h2 { position: relative; padding-top: var(--s2); }
.sm-section h2::before {
  content: ''; position: absolute; top: 0; left: 0; width: 52px; height: 3px;
  background: var(--accent); border-radius: 2px;
}
.sm-section-lead { font-size: 1.0625rem; color: var(--ink-muted); max-width: 62ch; margin-bottom: var(--s4); }
.sm-note { font-size: .9375rem; color: var(--ink-muted); max-width: 62ch; }

.sm-section--how, .sm-section--example { background: var(--bg-raised); border-block: 1px solid var(--line); }
.sm-section--why { background: var(--bg-deep); }
.sm-section--why h2, .sm-section--why h3 { color: var(--ink-invert); }
.sm-section--why p { color: var(--ink-invert-mut); }
.sm-section--why h2::before { background: var(--accent-bright); }

.sm-section--quote-followup { background: var(--accent-soft); text-align: center; }
.sm-section--quote-followup .sm-shell { display: flex; flex-direction: column; align-items: center; }
.sm-section--quote-followup h2::before { left: 50%; transform: translateX(-50%); }
.sm-section--quote-followup .sm-section-lead { margin-inline: auto; }

/* -------------------------------------------------------------- problems */
.sm-problem-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .sm-problem-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sm-problem-grid { grid-template-columns: repeat(4, 1fr); } }
.sm-problem {
  min-width: 0; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s2) var(--s2) .75rem;
  border-top: 3px solid var(--flag);
}
.sm-problem p { font-size: .9375rem; color: var(--ink-muted); margin-bottom: .5rem; }

/* ----------------------------------------------------------------- steps */
.sm-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .sm-steps { grid-template-columns: repeat(2, 1fr); gap: var(--s4); } }
@media (min-width: 1040px) { .sm-steps { grid-template-columns: repeat(4, 1fr); } }
.sm-step { min-width: 0; position: relative; padding-top: var(--s3); border-top: 1px solid var(--line-strong); }
.sm-step-n {
  position: absolute; top: -.85rem; left: 0; background: var(--bg);
  padding-right: .6rem; font-family: var(--font-display); font-size: 1.1rem;
  font-weight: 700; color: var(--accent-strong); letter-spacing: .06em;
}
.sm-section--how .sm-step-n { background: var(--bg-raised); }
.sm-step p { font-size: .9375rem; color: var(--ink-muted); }

/* ----------------------------------------------------------------- scope */
.sm-scope-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .sm-scope-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sm-scope-grid { grid-template-columns: repeat(4, 1fr); } }
.sm-scope-item {
  min-width: 0; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raised); position: relative;
}
.sm-scope-item::before {
  content: ''; display: block; width: 22px; height: 3px; background: var(--accent);
  border-radius: 2px; margin-bottom: .7rem;
}
.sm-scope-item p { font-size: .9375rem; color: var(--ink-muted); margin-bottom: 0; }

/* --------------------------------------------------------------- example */
.sm-fiction-badge {
  display: inline-block; background: var(--accent-soft); color: var(--accent-strong);
  border: 1px solid #bfe3e0; border-radius: 999px; padding: .35rem .85rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em; margin-bottom: var(--s3);
}
.sm-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.sm-findings { width: 100%; border-collapse: collapse; min-width: 560px; }
.sm-findings th, .sm-findings td { text-align: left; padding: .85rem 1rem; vertical-align: top; font-size: .9375rem; }
.sm-findings thead th {
  background: var(--bg-tint); color: var(--ink); font-weight: 700; font-size: .875rem;
  letter-spacing: .03em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong);
}
.sm-findings tbody tr + tr td { border-top: 1px solid var(--line); }
.sm-findings tbody td:first-child { color: var(--ink); font-weight: 600; }
.sm-findings tbody td:last-child { color: var(--accent-strong); }
@media (max-width: 620px) {
  .sm-findings { min-width: 0; }
  /* `clip` alone still lets the <th> boxes lay out at their natural width, which
     re-widens the document at high text zoom. Constrain the subtree instead. */
  .sm-findings thead {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
  }
  .sm-findings tbody tr { display: block; border-bottom: 1px solid var(--line-strong); padding: .5rem 0; }
  .sm-findings tbody tr:last-child { border-bottom: 0; }
  .sm-findings tbody td { display: block; border: 0 !important; padding: .35rem .75rem; max-width: 100%; }
  .sm-findings tbody td::before {
    content: attr(data-label); display: block; font-size: .75rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: .1rem;
  }
}
.sm-section--example .sm-note { margin-top: var(--s3); }

/* -------------------------------------------------------------- services */
.sm-service-grid { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .sm-service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sm-service-grid { grid-template-columns: repeat(5, 1fr); } }
.sm-service { min-width: 0; padding-top: var(--s2); border-top: 2px solid var(--accent); }
.sm-service p { font-size: .9375rem; color: var(--ink-muted); margin-bottom: 0; }

/* ------------------------------------------------------------------- why */
.sm-why-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .sm-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sm-why-grid { grid-template-columns: repeat(4, 1fr); } }
.sm-why-item { min-width: 0; padding-left: var(--s2); border-left: 2px solid var(--accent-bright); }
.sm-why-item p { font-size: .9375rem; margin-bottom: 0; }

/* ------------------------------------------------------------------- faq */
.sm-faq { border-top: 1px solid var(--line-strong); }
.sm-faq-item { border-bottom: 1px solid var(--line-strong); }
.sm-faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s2); padding: 1.15rem .25rem; font-family: var(--font-display);
  font-size: 1.075rem; font-weight: 700; color: var(--ink); line-height: 1.35;
}
.sm-faq-item summary::-webkit-details-marker { display: none; }
.sm-faq-item summary::after {
  content: ''; flex-shrink: 0; width: 10px; height: 10px; margin-top: .45rem;
  border-right: 2px solid var(--accent-strong); border-bottom: 2px solid var(--accent-strong);
  transform: rotate(45deg); transition: transform var(--t);
}
.sm-faq-item[open] summary::after { transform: rotate(-135deg); }
.sm-faq-item summary:hover { color: var(--accent-strong); }
.sm-faq-a { padding: 0 .25rem 1.15rem; }
.sm-faq-a p { margin: 0; color: var(--ink-muted); }

/* ------------------------------------------------------------------ form */
.sm-section--form { background: var(--bg-tint); border-top: 1px solid var(--line); }
.sm-form-notice {
  background: #fff6e8; border: 1px solid #eccfa0; border-left: 4px solid #c98a2e;
  border-radius: var(--radius); padding: .85rem 1rem; font-size: .9375rem;
  color: #6b4a12; max-width: none; margin-bottom: var(--s3);
}
.sm-form { display: grid; gap: var(--s2); }
/* P1 PRIVACY BUG FIX (2026-08-16): FORM_MODE=disabled wraps every
   data-bearing control in a native <fieldset disabled> (see build.mjs's
   form()) so the form is genuinely inert without JavaScript. `display:
   contents` removes the fieldset from the box model so it doesn't
   interfere with .sm-form's own grid layout — its children lay out as if
   they were still direct children of .sm-form, unchanged visually — while
   still keeping its browser-enforced disabling behaviour. */
.sm-form-fields { display: contents; }
.sm-field { display: flex; flex-direction: column; gap: .35rem; }
.sm-field label { font-weight: 600; color: var(--ink); font-size: .9375rem; }
.sm-req { color: var(--accent-strong); font-weight: 600; font-size: .8125rem; }
.sm-opt { color: var(--ink-muted); font-weight: 400; font-size: .8125rem; }
.sm-field input[type="text"], .sm-field input[type="email"], .sm-field select, .sm-field textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg-raised);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  padding: .75rem .9rem; min-height: 48px; width: 100%; max-width: 100%; min-width: 0;
}
.sm-field textarea { min-height: 110px; resize: vertical; }
.sm-field input:focus-visible, .sm-field select:focus-visible, .sm-field textarea:focus-visible {
  border-color: var(--accent-strong); outline: 3px solid var(--focus); outline-offset: 1px;
}
.sm-field input[aria-invalid="true"], .sm-field textarea[aria-invalid="true"] { border-color: #b23c22; }
.sm-hint { font-size: .875rem; color: var(--ink-muted); margin: 0; }
.sm-err  { font-size: .875rem; color: #a8331b; font-weight: 600; margin: 0; }

.sm-field--radio-group { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.sm-field--radio-group legend { font-weight: 600; color: var(--ink); font-size: .9375rem; padding: 0; margin-bottom: .1rem; }
.sm-radio-option { display: flex; align-items: flex-start; gap: .6rem; }
.sm-radio-option input[type="radio"] { width: 20px; height: 20px; margin-top: .15rem; flex-shrink: 0; accent-color: var(--accent-strong); }
.sm-radio-option label { font-weight: 400; color: var(--ink-body); }

.sm-field--check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: .6rem; margin-top: .35rem; }
.sm-field--check input { width: 22px; height: 22px; margin-top: .2rem; flex-shrink: 0; accent-color: var(--accent-strong); }
.sm-field--check label { font-weight: 400; color: var(--ink-body); flex: 1; min-width: 0; }
.sm-field--check .sm-err { flex-basis: 100%; }

.sm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sm-form-summary { padding: .75rem 1rem; background: #fdecea; border: 1px solid #f0b6ab; border-radius: var(--radius); }
.sm-form-result {
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent-strong); border-radius: var(--radius); padding: var(--s2);
}
.sm-form-result h3 { margin-bottom: .35rem; }
.sm-form-result p { margin: 0; font-size: .9375rem; color: var(--ink-muted); }
#formSubmit[aria-busy="true"] { opacity: .75; cursor: progress; }

/* ---------------------------------------------------------------- footer */
.sm-footer { background: var(--bg-deep); color: var(--ink-invert-mut); padding-block: var(--s4) var(--s2); }
.sm-footer .sm-logo-word, .sm-footer .sm-logo-link { color: var(--ink-invert); }
.sm-footer .sm-mark { color: var(--ink-invert); }
.sm-footer-inner { display: grid; gap: var(--s3); }
@media (min-width: 760px) { .sm-footer-inner { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.sm-footer-region { margin: var(--s2) 0 .35rem; color: var(--ink-invert); font-weight: 600; }
.sm-footer-contact { margin: 0; font-size: .9375rem; }
.sm-footer-contact a { color: var(--accent-bright); }
.sm-pending { font-style: italic; color: var(--ink-invert-mut); }
.sm-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.sm-footer-links > a {
  color: var(--ink-invert-mut); text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center; font-size: .9375rem;
}
.sm-footer-links > a:hover { color: var(--ink-invert); }
@media (min-width: 760px) { .sm-footer-links { align-items: flex-end; } }
.sm-footer-bottom { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid rgba(255,255,255,.12); }
.sm-footer-bottom p { margin: 0; font-size: .875rem; color: var(--ink-invert-mut); }

/* ------------------------------------------------------- legal / 404 / gateway */
.sm-section--legal { min-height: 52vh; }
.sm-404-list { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }

.sm-page-gateway { display: flex; min-height: 100vh; align-items: center; }
.sm-gateway { width: 100%; padding-block: var(--s5); }
.sm-gateway h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin: var(--s3) 0 var(--s4); max-width: 22ch; }
.sm-gateway-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
@media (min-width: 720px) { .sm-gateway-list { grid-template-columns: repeat(3, 1fr); } }
.sm-gateway-card {
  display: flex; flex-direction: column; gap: .3rem; height: 100%;
  background: var(--bg-raised); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: var(--s2); text-decoration: none; transition: border-color var(--t);
}
.sm-gateway-card:hover { border-color: var(--accent-strong); }
.sm-gateway-lang { font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.sm-gateway-cta { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.sm-gateway-region { font-size: .875rem; color: var(--ink-muted); }

/* ---------------------------------------------------------- preview badge */
/* One slim, low-contrast line in normal document flow — never fixed, so it
   can never sit on top of page content at any scroll position or viewport
   size (see L-CAL-002 in INTELLIGENCE_BRIEF.md — a loud disclosure banner
   overwhelms the page it's disclosing about; this is the opposite). */
.sm-preview-badge {
  margin: 0; text-align: center; background: var(--bg-deep); color: var(--ink-invert-mut);
  font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: .35rem var(--s2);
}

/* ------------------------------------------------------- privacy link/consent */
.sm-privacy-link { font-size: .875rem; margin: -.25rem 0 0; }
.sm-form-result--error { border-left-color: #b23c22; }

/* --------------------------------------------------------------- legal pages */
.sm-page-legal .sm-section--legal { padding-top: var(--s5); padding-bottom: var(--s6); }
.sm-legal-updated { color: var(--ink-muted); font-size: .875rem; margin-top: -.5rem; }
.sm-legal-table { width: 100%; border-collapse: collapse; margin: var(--s3) 0; }
.sm-legal-table th, .sm-legal-table td {
  text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); font-size: .9375rem;
}
.sm-legal-table th { color: var(--ink-muted); font-weight: 600; width: 40%; }
.sm-legal-section { margin-top: var(--s4); }
.sm-legal-section h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.sm-legal-section ul { margin: 0; padding-left: 1.25rem; }
.sm-legal-section li { margin-bottom: .35rem; color: var(--ink-body); }
.sm-legal-pending { color: var(--flag); }

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sm-scanline { animation: none; opacity: .5; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}