/* SecuridigmPlus demo page (local only, never published).
   Look taken from the live Securidigm site (Claude - Trio site/assets/site.css, light theme):
   Archivo + JetBrains Mono, near-black ink on warm off-white, green accent, "//" code-font labels,
   pill buttons, 12px cards. Fonts are copied locally (SIL OFL, see fonts/). */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); }

:root {
  --ink: #0A0A0A; --page: #FAFAF8; --alt: #EFEFEB; --card: #FFFFFF;
  --line: #E4E4E0; --line-2: #D2D2CC;
  /* Bands (the top bar and the hero) match securidigm.com and the Securidigm Watch site: DARK by default,
     with a light/dark switch (theme.js). data-theme="light" restores the all-light look. Pages that keep
     the old light look (index, watch) set data-theme="light" on <html> and load no switch. */
  --band: var(--ink); --nav-band: var(--ink); --on-band: #FFFFFF; --on-band-soft: #E4E6E8; --on-band-muted: #A8ADB2;
  --band-line: rgba(255,255,255,.15); --band-card: rgba(255,255,255,.05); --band-card-line: rgba(255,255,255,.20);
  --green-on-band: var(--green); --link-on-band: #7AF69A;
  --muted: #5A5F64; --body-muted: #40454A; --legal: #2A2E32;
  --green: #66DA85; --green-dark: #0A7E3A; --on-green: #04140A; --green-soft: #E3F6E8;
  --amber: #8A5A00; --amber-soft: #FFF3D6; --dev: #F5C451;
  --red: #A03A2E;
  --pad: 56px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --nav-h: 88px;
  /* The eight-role type scale from securidigm.com / the Watch site (exact values and line heights). */
  --fs-hero: clamp(40px, 4.4vw, 68px); --fs-heading: 52px; --fs-figure: 48px; --fs-title: 24px; --fs-lede: 20px; --fs-body: 17px; --fs-small: 15px; --fs-label: 13px;
  --lh-hero: .96; --lh-heading: 1.02; --lh-figure: 1; --lh-title: 1.2; --lh-lede: 1.45; --lh-body: 1.6; --lh-small: 1.5; --lh-label: 1.4;
  color-scheme: light;
}
@media (max-width: 900px) { :root { --pad: 32px; } }
@media (max-width: 700px) { :root { --pad: 16px; --fs-hero: 40px; --fs-heading: 36px; --fs-figure: 36px; --fs-title: 22px; --fs-lede: 18px; --fs-body: 16px; --fs-small: 14px; --fs-label: 12px; } }
:root[data-theme="light"] {
  --band: #F1F2EE; --nav-band: #F6F6F2; --on-band: var(--ink); --on-band-soft: var(--body-muted); --on-band-muted: var(--muted);
  --band-line: var(--line); --band-card: var(--card); --band-card-line: var(--line);
  --green-on-band: var(--green-dark); --link-on-band: var(--green-dark);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
a { color: inherit; }
p a, li a, td a, .src a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
[id] { scroll-margin-top: 80px; }
:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: #fff; font-weight: 600;
  font-size: var(--fs-small); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Demo banner */
.demo-banner { background: var(--dev); color: #111; font-weight: 700; font-size: var(--fs-small); text-align: center;
  padding: 10px var(--pad); border-bottom: 2px solid #111; }
.demo-banner span { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); margin-right: 8px; }

/* Top bar — securidigm.com's / the Watch site's two-row bar: logo + buttons on row 1, page links on row 2.
   Dark band by default; data-theme="light" turns it light. */
.mainnav { position: sticky; top: 0; z-index: 60; background: var(--nav-band); color: var(--on-band); box-shadow: 0 1px 0 var(--band-line); min-height: var(--nav-h);
  display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; padding: 16px var(--pad) 0; flex-wrap: wrap; }
.logo-block { display: flex; flex-direction: column; gap: 4px; color: var(--on-band); text-decoration: none; }
.logo-block:hover { opacity: .9; }
.logo { font-weight: 800; font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: -.045em; display: flex; align-items: baseline; color: var(--on-band); }
.logo .digm { color: var(--green-on-band); }
.logo .sq { width: clamp(8px, .8vw, 12px); height: clamp(8px, .8vw, 12px); background: var(--green-on-band); margin-left: 5px; flex: none; }
.logo-tag { font-family: var(--mono); font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: .06em; color: var(--on-band-muted); white-space: nowrap; }
.logo-tag .tg-g, .logo-tag .tg-w { color: var(--green-on-band); font-weight: 600; }
.logo-tag .tg-w { color: var(--on-band); }
.mainnav .links { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px;
  font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; border-top: 1px solid rgba(var(--band-rgb), .12); }
.mainnav .links a { display: block; padding: 14px 0; text-decoration: none; color: var(--on-band-soft); box-shadow: inset 0 -2px 0 transparent; }
.mainnav .links a:hover { color: var(--green-on-band); }
.mainnav .links a[aria-current="page"] { color: var(--green-on-band); box-shadow: inset 0 -2px 0 var(--green-on-band); }
.end { display: flex; align-items: center; gap: 12px; }
.theme-btn { display: none; font: inherit; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; background: transparent; color: var(--on-band);
  border: 1px solid var(--band-card-line); border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.theme-btn:hover { opacity: .8; }
:root[data-theme] .theme-btn { display: inline-block; }
.theme-btn .to-dark, :root[data-theme="light"] .theme-btn .to-light { display: none; }
:root[data-theme="light"] .theme-btn .to-dark { display: inline; }
.pill, .pill-talk { white-space: nowrap; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; background: var(--green); color: var(--on-green); padding: 10px 18px; border-radius: 999px; text-decoration: none; }
:root { --band-rgb: 255,255,255; }
:root[data-theme="light"] { --band-rgb: 10,10,10; }
@media (max-width: 700px) { .mainnav { position: static; } }

/* Buttons */
.btn { display: inline-block; font: inherit; font-weight: 600; font-size: var(--fs-small); padding: 14px 22px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; }
.btn-green { background: var(--green); color: var(--on-green); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ghost { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn.soon { border: 1px dashed var(--line-2); color: var(--muted); background: var(--alt); cursor: default; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Common text */
.kicker { font-family: var(--mono); font-size: var(--fs-label); color: var(--green-dark); margin: 0; line-height: 1.4; }
.h2 { margin: 0; font-size: var(--fs-heading); font-weight: 700; letter-spacing: -.03em; line-height: var(--lh-heading); }
.h3 { margin: 0; font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.lede { margin: 0; font-size: var(--fs-lede); line-height: 1.45; color: var(--body-muted); max-width: 760px; }
.small { font-size: var(--fs-small); color: var(--body-muted); }
.note { font-size: var(--fs-small); color: var(--muted); margin: 0; max-width: 900px; }

.section { padding: 88px var(--pad); }
.section.alt { background: var(--alt); }
.section.band { background: var(--band); color: var(--on-band); border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); }
/* Text and small cards that sit on a dark band */
.section.band .h2, .section.band h1 { color: var(--on-band); }
.section.band .lede, .section.band .small { color: var(--on-band-soft); }
.section.band .kicker { color: var(--green-on-band); }
.section.band p a, .section.band li a { color: var(--link-on-band); }
.section.band .onpage a { background: var(--band-card); border-color: var(--band-card-line); color: var(--on-band); }
.section.band .onpage a:hover { border-color: var(--green-on-band); color: var(--green-on-band); }
.section.band .trust { background: var(--band-card); border-color: var(--band-card-line); }
.section.band .trust > div { border-right-color: var(--band-card-line); border-bottom-color: var(--band-card-line); }
.section.band .trust .t { color: var(--on-band); }
.section.band .trust p { color: var(--on-band-soft); }
.section.band .trust .k { color: var(--green-on-band); }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; max-width: 900px; }
.sub { margin-top: 64px; }
.sub > .h3 { margin-bottom: 8px; }
.sub > .small { margin: 0 0 24px; max-width: 820px; }
@media (max-width: 700px) { .section { padding: 56px var(--pad); } .sub { margin-top: 44px; } }

/* Hero */
.hero { padding: 72px var(--pad) 64px; background: var(--band); color: var(--on-band); border-bottom: 1px solid var(--band-line); }
.hero h1 { color: var(--on-band); } .hero .kicker { color: var(--green-on-band); }
.hero-copy { display: flex; flex-direction: column; gap: 22px; max-width: 920px; }
.hero h1 { margin: 0; font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: 800; letter-spacing: -.045em; }
.hero h1 .g { color: var(--green-on-band); }
.hero .statusline { color: var(--on-band-soft); }
.hero .statusline li::before { background: var(--green-on-band); }
/* Product cards sit on the dark hero band (light mode: they look like the old white cards) */
.hero .prod { background: var(--band-card); border-color: var(--band-card-line); border-top-color: var(--green-on-band); }
.hero .prod.office { border-top-color: #C9A35A; }
.hero .prod .nm, .hero .prod .one { color: var(--on-band); }
.hero .prod .one strong { color: var(--on-band); }
.hero .prod .small { color: var(--on-band-soft); }
.hero .prod .meta { color: var(--green-on-band); }
.hero .prod .price-note { color: var(--on-band-muted); }
.hero .prod .btn-ink { background: var(--green); color: var(--on-green); }
.hero .prod .btn-ghost { border-color: var(--band-card-line); color: var(--on-band); }
/* Overview: the line that frames the two Scout versions, and each card's price/availability note */
.prod-lead { margin: 44px 0 0; font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--on-band-soft); max-width: 820px; }
.prod-lead + .prod-pair { margin-top: 20px; }
.prod .one { margin: 0; }
.prod .small { margin: 0; }
.price-note { margin: 2px 0 0; font-family: var(--mono); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--muted); }
:root[data-theme="light"] .hero .prod { border-top-color: var(--ink); }
:root[data-theme="light"] .hero .prod.office { border-top-color: #C9A35A; }
:root[data-theme="light"] .hero .prod .btn-ink { background: var(--ink); color: #fff; }
:root[data-theme="light"] .hero .prod .btn-ghost { border-color: var(--ink); color: var(--ink); }
.prod-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 44px; }
@media (max-width: 1000px) { .prod-pair { grid-template-columns: 1fr; } }
.prod { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: 12px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px; }
.prod.watch { border-top-color: var(--green-dark); }
.prod.office { border-top-color: #C9A35A; }
.prod .nm { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin: 0; line-height: 1.1; }
.prod .one { margin: 0; font-size: var(--fs-lede); line-height: 1.4; font-weight: 600; }
.prod .meta { margin: 0; font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); }
.prod .btn { align-self: flex-start; margin-top: auto; }
.statusline { display: flex; gap: 8px 28px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-family: var(--mono); font-size: var(--fs-label); color: var(--body-muted); }
.statusline li::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--green-dark); margin-right: 8px; vertical-align: middle; }

/* Grids and cards */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.grid.c2 { --cols: 2; } .grid.c4 { --cols: 4; }
@media (max-width: 1100px) { .grid.c4 { --cols: 2; } .grid { --cols: 2; } }
@media (max-width: 700px) { .grid, .grid.c2, .grid.c4 { --cols: 1; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card p { margin: 0; }
.card ul { margin: 0; padding-left: 20px; }
.card .h3 { font-size: 20px; }
.card .tagrow { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }

/* Figures (the problem) */
.fig .num { font-size: var(--fs-figure); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0; }
.fig blockquote { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.fig .src { font-size: var(--fs-small); color: var(--muted); margin: 0; }
.fig .why { font-size: var(--fs-small); color: var(--body-muted); border-top: 1px solid var(--line); padding-top: 10px; margin: 0; }

/* Tags */
.tag { display: inline-block; font-family: var(--mono); font-size: 12px; line-height: 1.3; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--alt); color: var(--legal); }
.tag.ready { background: var(--green-soft); border-color: #9FD9B1; color: #075C2A; }
.tag.coming { background: var(--amber-soft); border-color: #E7C77F; color: #6B4600; }
.tag.check { background: #fff; border-style: dashed; color: #6B4600; border-color: #C9A35A; }
.tag.planned { background: #EEF0F5; border-color: #C5CAD6; color: #33384A; }

/* Trust points */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.trust > div { padding: 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.trust > div:last-child { border-right: 0; }
.trust .k { font-family: var(--mono); font-size: var(--fs-label); color: var(--green-dark); margin: 0; }
.trust .t { font-weight: 700; font-size: 20px; margin: 0; line-height: 1.2; }
.trust p { margin: 0; font-size: var(--fs-small); color: var(--body-muted); }
@media (max-width: 1000px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust > div:nth-child(2) { border-right: 0; } .trust > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 600px) { .trust { grid-template-columns: 1fr; } .trust > div { border-right: 0; border-bottom: 1px solid var(--line); } .trust > div:last-child { border-bottom: 0; } }

/* Diagram */
.diagram { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin: 0; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: 12px; }
.diagram .wide { display: block; } .diagram .tall { display: none; }
@media (max-width: 700px) { .diagram .wide { display: none; } .diagram .tall { display: block; max-width: 340px; margin: 0 auto; } }

/* Steps */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.steps li { counter-increment: s; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px; font-size: var(--fs-small); color: var(--body-muted); }
.steps li::before { content: "0" counter(s); display: block; font-family: var(--mono); font-size: var(--fs-label); color: var(--green-dark); margin-bottom: 8px; }
.steps li strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 4px; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

/* Rule evidence */
.rules { display: flex; flex-direction: column; gap: 16px; }
.rule { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green-dark); border-radius: 12px; padding: 22px 24px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 32px; }
.rule .which { grid-column: 1 / -1; margin: 0; font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); }
.rule blockquote { margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.rule blockquote::before { content: "\201C"; } .rule blockquote::after { content: "\201D"; }
.rule .how { margin: 0; font-size: var(--fs-small); color: var(--body-muted); }
.rule .how strong { color: var(--ink); }
@media (max-width: 800px) { .rule { grid-template-columns: 1fr; } }
.callout { margin-top: 20px; background: var(--amber-soft); border: 1px solid #E7C77F; border-radius: 12px; padding: 18px 22px; font-size: var(--fs-small); color: var(--legal); }
.callout p { margin: 0; }

/* Protocol chips */
.protos { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.protos li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 150px; flex: 1 1 150px; }
.protos .p { font-weight: 700; }
.protos .u { font-size: 13px; color: var(--muted); line-height: 1.35; }
.legend { display: flex; gap: 10px 20px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--body-muted); align-items: center; }

/* Comparison */
.cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .cmp { grid-template-columns: 1fr; } }
.cmp .card.us { border: 2px solid var(--ink); }
.cmp dl { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-small); }
.cmp dt { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cmp dd { margin: 0; color: var(--legal); }

/* Price table */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--alt); }
tr:last-child td { border-bottom: 0; }
td.n { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
@media (max-width: 600px) {
  .tbl-wrap.stack { border: 0; background: transparent; }
  .stack table, .stack tbody, .stack tr, .stack td { display: block; width: 100%; }
  .stack caption { display: block; padding-left: 0 !important; }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack tr { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; padding: 6px 0; }
  .stack td { border: 0; padding: 6px 16px; }
  .stack td::before { content: attr(data-l); display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
}

/* Calendar */
.cal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cal li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cal li:first-child { border-top: 1px solid var(--line); }
.cal time { font-family: var(--mono); font-size: var(--fs-small); font-weight: 500; }
.cal .t { margin: 0; font-weight: 600; }
.cal .s { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .cal li { grid-template-columns: 1fr; } }

/* Fit */
.fit .card { border-top: 4px solid var(--ink); }
.fit .card .nm { font-weight: 800; font-size: 24px; margin: 0; letter-spacing: -.02em; }

/* CTA + form */
.cta { background: var(--green); border-radius: 12px; padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; color: var(--on-green); }
.cta .h2 { color: var(--on-green); }
.cta p { margin: 0; }
.cta .demo-form { background: var(--card); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.cta label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); font-weight: 600; }
.cta input, .cta select, .cta textarea { font: inherit; font-weight: 400; font-size: 16px; padding: 10px 12px; border: 1px solid #8A8F94; border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
.cta textarea { min-height: 88px; resize: vertical; }
.cta .form-note { font-size: 13px; color: var(--muted); margin: 0; }
.cta .form-msg { font-size: var(--fs-small); font-weight: 600; margin: 0; color: #075C2A; min-height: 1.5em; }
@media (max-width: 900px) { .cta { grid-template-columns: 1fr; padding: 28px 20px; } }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 40px var(--pad); display: flex; flex-direction: column; gap: 16px; font-size: var(--fs-small); color: var(--body-muted); }
footer p { margin: 0; max-width: 1000px; }
footer .logo { font-size: 24px; color: var(--ink); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Multi-page nav: current page and the "on this page" jump links */
.mainnav nav a[aria-current="page"] { color: var(--green-on-band); font-weight: 700; box-shadow: inset 0 -2px 0 currentColor; }
.onpage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.onpage a { font-size: var(--fs-small); text-decoration: none; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; }
.onpage a:hover { border-color: var(--green-dark); color: var(--green-dark); }

/* Readability fixes (November 9, 2026, session 4): every text/background pair at least 4.5:1 (3:1 for large type),
   checked in both themes. */
.hero .lede { color: var(--on-band-soft); }
.section.band .note, .hero .note { color: var(--on-band-muted); }
.section.band .note a, .hero .note a { color: var(--link-on-band); }
footer .logo .digm { color: var(--green-dark); }
.section.alt .kicker { color: #086E34; }

/* Walkthrough videos: the cover links to YouTube (same pattern as the Baseline, Signal and Harbor pages) */
.watch { margin: 24px 0 0; max-width: 1100px; display: flex; flex-direction: column; gap: 14px; }
.watch-media { position: relative; display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #000; }
.watch-media img { display: block; width: 100%; height: auto; }
.watch-media .wplay { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(10, 10, 10, .78); color: #fff; font-size: 34px; padding-left: 6px; }
.watch-media:hover .wplay, .watch-media:focus-visible .wplay { background: var(--green-dark); }
.watch .wdur { font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); align-self: center; }
.sr-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Walkthrough on the left, installation video on the right, the same size; stacked on narrow screens. */
.watch-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; max-width: 1100px; margin-top: 24px; }
.watch-pair .watch { margin: 0; max-width: none; }
.watch-label { margin: 0; font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); }
@media (max-width: 800px) { .watch-pair { grid-template-columns: 1fr; } }

/* Main page hero: copy on the left, a small "how Scout listens" diagram on the right (hidden on phones). */
:root { --ha-warn: #F5C451; --ha-ok: var(--green); }
:root[data-theme="light"] { --ha-warn: #8A5A00; --ha-ok: var(--green-dark); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.hero-art { margin: 0; }
.hero-art svg { display: block; width: 100%; height: auto; max-width: 560px; margin-left: auto; font-family: "Archivo", system-ui, sans-serif; }
.hero-art .ha-dev rect, .hero-art .ha-switch rect, .hero-art .ha-card rect { fill: var(--band-card); stroke: var(--band-card-line); stroke-width: 1.2; }
.hero-art .ha-scout rect { fill: var(--band-card); stroke: var(--green-on-band); stroke-width: 2; }
.hero-art .ha-card.warn rect { stroke: var(--ha-warn); stroke-width: 1.6; }
.hero-art .ha-card.ok rect { stroke: var(--ha-ok); stroke-width: 1.6; }
.hero-art .ha-t { fill: var(--on-band); font-size: 16px; font-weight: 600; }
.hero-art .ha-sm { font-size: 13.5px; font-weight: 500; }
.hero-art .ha-big { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.hero-art .ha-k { fill: var(--on-band-muted); font-family: var(--mono); font-size: 11.5px; }
.hero-art .ha-card.warn .ha-sev { fill: var(--ha-warn); }
.hero-art .ha-card.ok .ha-sev { fill: var(--ha-ok); }
.hero-art .ha-copy-label { fill: var(--green-on-band); }
.hero-art .ha-links, .hero-art .ha-links path { fill: none; stroke: var(--on-band-muted); stroke-width: 1.4; opacity: .7; }
.hero-art .ha-copy { fill: none; stroke: var(--green-on-band); stroke-width: 2.5; stroke-dasharray: 7 7; animation: ha-flow 1.1s linear infinite; }
.hero-art .ha-arrow { fill: none; stroke: var(--green-on-band); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ha-flow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .hero-art .ha-copy { animation: none; } }
@media (max-width: 1000px) { .hero-top { grid-template-columns: 1fr; } .hero-art { max-width: 520px; } }
@media (max-width: 700px) { .hero-art { display: none; } }
/* Scout and office page heroes reuse the diagram styles; zones, the flagged crossing and the remote link. */
.section.band .hero-top .sec-head { margin-bottom: 0; }
.section.band .hero-top { margin-bottom: 40px; }
.hero-art .ha-zone rect { fill: none; stroke: var(--band-card-line); stroke-width: 1.4; stroke-dasharray: 4 5; }
.hero-art .ha-gap { fill: none; stroke: var(--ha-warn); stroke-width: 2.5; stroke-dasharray: 7 6; animation: ha-flow 1.1s linear infinite; }
.hero-art .ha-remote { fill: none; stroke: var(--ha-warn); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.hero-art .ha-gap-arrow { fill: none; stroke: var(--ha-warn); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-art .ha-warn-label { fill: var(--ha-warn); }
@media (prefers-reduced-motion: reduce) { .hero-art .ha-gap { animation: none; } }

/* Why not free tools: figures beside a work-by-work table */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 20px; align-items: start; }
.vs-figs { display: flex; flex-direction: column; gap: 20px; }
.vs-figs .card.us { border: 2px solid var(--ink); }
.vs-tbl td.w { font-weight: 700; color: var(--ink); }
.vs-tbl th.us, .vs-tbl td.us { color: var(--ink); }
.vs-tbl td.us { font-weight: 600; }
.vs-note { margin: 20px 0 0; }
@media (max-width: 1000px) { .vs { grid-template-columns: 1fr; } .vs-figs { flex-direction: row; } .vs-figs .card { flex: 1; } }
@media (max-width: 600px) { .vs-figs { flex-direction: column; } }