/* MPN DigiTech — web-services marketing site
   Built on mpn-tokens.css + fonts.css. Reference tokens; no hard-coded hex. */

@import url("fonts.css");
@import url("mpn-tokens.css");

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

::selection {
  background: var(--color-primary);
  color: #fff;
}

::-moz-selection {
  background: var(--color-primary);
  color: #fff;
}

a {
  color: inherit;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-primary);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; }

.on-dark { color: var(--color-navy-tint); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section { padding-block: var(--space-24); }
.section-tight { padding-block: var(--space-16); }

@media (max-width: 720px) {
  .container { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-16); }
  .section-tight { padding-block: var(--space-12); }
}

.eyebrow-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.measure { max-width: var(--max-measure); }

.rule {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.rule-on-dark { border-top-color: rgba(255,255,255,0.14); }

/* ---------- type scale ---------- */
.text-hero {
  font-size: 2.125rem;
  font-weight: 700;
}
.text-h1 { font-size: 1.875rem; font-weight: 700; }
.text-h2 { font-size: 1.5rem; font-weight: 500; }
.text-h3 { font-size: 1.125rem; font-weight: 600; font-family: var(--font-body); letter-spacing: -0.005em; }

@media (min-width: 860px) {
  .text-hero { font-size: var(--text-hero); }
  .text-h1 { font-size: var(--text-h1); }
  .text-h2 { font-size: var(--text-h2); }
  .text-h3 { font-size: var(--text-h3); }
}

.lede {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[hidden] { display: none; } /* .btn's own display:inline-flex otherwise
  beats the browser's native [hidden]{display:none} rule on specificity,
  so any .btn with the hidden attribute (e.g. the quiz's Back button on
  step 1) rendered visible and tappable despite JS correctly hiding it. */

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn-outline-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.btn-outline-dark:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn-outline:hover { border-color: var(--color-primary); }

.btn-arrow::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209h11M10%204l5%205-5%205%22/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209h11M10%204l5%205-5%205%22/%3E%3C/svg%3E") no-repeat center / contain;
  vertical-align: middle;
  transition: transform var(--transition-base);
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 247, 250, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}

.brand-mark { display: flex; align-items: center; }
.brand-mark img { height: 28px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--color-text);
  padding-block: 4px;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--transition-base), color var(--transition-base);
}
.nav-links a:hover { border-color: var(--color-accent); }
.nav-links a[aria-current="page"] { color: var(--color-primary); border-color: var(--color-accent); }

/* ---------- floating navy header (pricing.html, about.html) ----------
   Same visual result as index.html's `.landing .site-header`/`.nav-inner`
   pairing, but self-contained rather than requiring a body-level `.landing`
   ancestor — that class also carries the dot-grid ground texture and film
   grain, which DESIGN.md scopes to index.html specifically, not these two
   pages. Just the pill: navy, inset from the viewport edge, not
   width-to-width. */
.header-floating {
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  padding-top: 14px;
}
.header-floating .nav-inner {
  /* Explicit, guaranteed containing block for the absolutely-positioned
     mobile .nav-links dropdown below -- without it, browsers that don't
     treat backdrop-filter as containment (Safari/iOS) position .nav-links
     against .site-header's full un-rounded width instead of this pill,
     letting its collapsed-state edges bleed past the pill's rounded
     corners on the sides Chrome never showed. */
  position: relative;
  max-width: none;
  margin-inline: 16px;
  padding-inline: var(--space-6);
  border-radius: 16px;
  background: rgba(22, 34, 68, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14); /* index.html's own hero sits on
    a light dot-grid ground, so the pill's shadow alone reads as "floating";
    about.html/pricing.html's first sections aren't guaranteed light (about's
    hero is navy too), so the pill needs its own edge to stay legible against
    a same-color backdrop, not just against a light one. */
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 10px 30px rgba(6, 12, 28, 0.28);
  /* iOS Safari renders backdrop-filter as an unrounded rectangle under the
     border-radius clip, so the blur pokes out past the curve as a hairline
     matching the pill's own width -- invisible in Chrome, which clips it
     correctly. overflow:hidden forces Safari to clip it too. Only while the
     mobile dropdown (a child of this same element) is closed, though --
     otherwise this would clip the open dropdown along with the bug. */
  overflow: hidden;
}
.header-floating .nav-inner:has(.nav-toggle:checked) {
  overflow: visible;
}
.header-floating .nav-toggle-label {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-navy-tint);
}
@media (min-width: 861px) {
  .header-floating .nav-inner { margin-inline: 24px; }
  .header-floating .nav-links a {
    position: relative;
    color: var(--color-navy-tint);
    border-bottom-color: transparent;
  }
  .header-floating .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1.5px;
    height: 1.5px;
    background: var(--color-accent);
    transition: right var(--transition-base);
  }
  .header-floating .nav-links a:hover::after { right: 0; }
  .header-floating .nav-links a[aria-current="page"]::after { right: 0; }
}
.header-floating .nav-links a { color: var(--color-navy-tint); }
.header-floating .nav-links a[aria-current="page"] { color: #fff; }
@media (max-width: 860px) {
  .header-floating .nav-links { background: var(--color-surface-dark); }
  .header-floating .nav-links a { border-bottom-color: rgba(255,255,255,0.1); }
  /* At this width the pill is only inset 16px from the viewport edge, so its
     30px-blur box-shadow spreads past the rounded corners and reads as a
     stray line under the header rather than a floating shadow. */
  .header-floating .nav-inner { box-shadow: none; }
}

.nav-right { display: flex; align-items: center; gap: var(--space-6); }

/* Visually hidden, not display:none -- keeps the checkbox focusable so
   keyboard users can reach and operate the mobile menu toggle. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.nav-toggle-label {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle:focus-visible ~ .nav-right .nav-toggle-label {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.nav-toggle-label svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .nav-links {
    display: grid;
    align-items: stretch;
    gap: 0;
    grid-template-rows: 0fr;
    grid-auto-rows: 0fr;
    overflow: hidden; /* the 0fr row collapses to a sub-pixel height, not
      exactly 0 -- without clipping, that sliver still paints its own
      background/border-bottom as a stray hairline under the pill */
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--color-surface);
    border-bottom: 1px solid transparent;
    transition: grid-template-rows var(--transition-base), grid-auto-rows var(--transition-base), border-color var(--transition-base);
  }
  .nav-links li { display: block; width: 100%; overflow: hidden; min-height: 0; }
  .nav-links a { display: block; padding: 14px var(--space-4); border-bottom: 1px solid var(--color-border); }
  .nav-links a:hover { border-bottom-color: var(--color-accent); }
  .nav-toggle-label { display: inline-flex; }
  .nav-toggle:checked ~ .nav-links { grid-template-rows: 1fr; grid-auto-rows: 1fr; border-bottom-color: var(--color-border); }
  .nav-cta { display: none; }
}

/* ---------- hero ---------- */
.hero {
  background: var(--color-surface);
  position: relative;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-24);
}

@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-12); padding-block: var(--space-16); }
}

.hero-copy p { margin-top: var(--space-4); }
.hero-copy .btn-row { margin-top: var(--space-8); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* about.html hero: copy left, brandmark (wordmark + three-discipline
   emblem) right */
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.hero-brandmark { flex: none; width: clamp(120px, 14vw, 190px); height: auto; opacity: 0.92; }
@media (max-width: 760px) {
  .hero-top { flex-wrap: wrap; }
  .hero-brandmark { display: none; }
}

/* two-route comparison panel in hero */
.route-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 24px 48px rgba(6, 12, 28, 0.35);
}
.route-panel-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.route-item + .route-item { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.route-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.route-item-head .name { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; color: var(--color-primary); }
.route-item-head .price { font-family: var(--font-mono); font-weight: 500; color: var(--color-accent); font-size: 1.0625rem; }
.route-item .desc { color: var(--color-text-muted); font-size: 0.875rem; margin-top: 4px; line-height: 1.5; }

/* ---------- pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 820px) {
  .pillars { grid-template-columns: 1fr; }
}
.pillar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--pillar-color, var(--color-primary));
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: box-shadow var(--transition-base);
}
.pillar-card:hover { box-shadow: var(--shadow-hover); }
.pillar-card-icon { display: block; color: var(--pillar-color, var(--color-primary)); margin-bottom: var(--space-4); }
.pillar-card h2, .pillar-card h3 { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-h3); }
.pillar-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pillar-color, var(--color-primary)); flex: none; }
.pillar-card p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.6; text-align: justify; text-justify: inter-word; hyphens: auto; }

.pillar-platforms { --pillar-color: var(--color-pillar-platforms); }
.pillar-ai { --pillar-color: var(--color-pillar-ai); }
.pillar-actuarial { --pillar-color: var(--color-pillar-actuarial); }

/* On the dark hero cards specifically (not the light-ground architecture
   diagram, which keeps the raw brand green/crimson), swap to the "-on-dark"
   variants already defined in mpn-tokens.css for this exact case — the
   plain brand colors read dim on --color-surface-dark-2. */
.pillar-card.pillar-platforms { --pillar-color: var(--color-accent-on-dark); }
.pillar-card.pillar-actuarial { --pillar-color: var(--color-highlight-on-dark); }
.pillar-card.pillar-ai { --pillar-color: var(--color-navy-tint); } /* pillar-ai's brand colour IS navy — on the dark card it now matches the background exactly, so the border-top needs its own on-dark swap */

/* ---------- comparison table (routes) ---------- */
.compare {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-top: 1px solid var(--color-border);
}
.compare-row:first-child { border-top: none; }
.compare-row > div { padding: var(--space-4) var(--space-6); }
.compare-row.head {
  background: var(--color-surface-alt);
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--color-primary);
}
.compare-row.head > div:first-child { font-family: var(--font-body); font-weight: 600; color: var(--color-text-muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; }
.compare-row .label { color: var(--color-text-muted); font-size: 0.9375rem; }
.compare-row .value { font-size: 0.9375rem; }
.compare-row .value.yes { color: var(--color-accent); font-weight: 600; }
.compare-row .value.no { color: var(--color-text-disabled); }

@media (max-width: 700px) {
  .compare-row { grid-template-columns: 1fr; }
  .compare-row > div { padding: var(--space-3) var(--space-4); }
  .compare-row .label { font-weight: 600; color: var(--color-primary); padding-bottom: 0; }
  .compare-row.head > div:not(:first-child) { display: none; }
  .compare-row:not(.head) > div:not(.label)::before { content: attr(data-col) ": "; color: var(--color-text-muted); font-weight: 500; }
}

/* ---------- checklist ---------- */
.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 700px) { .checklist { grid-template-columns: 1fr; } }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--color-text);
}
.checklist svg { flex: none; margin-top: 3px; color: var(--color-accent); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
}
.cta-band .btn-row { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--color-surface-dark);
  color: var(--color-navy-soft);
  padding-block: var(--space-16) var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-12);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.footer-grid img { height: 26px; margin-bottom: var(--space-4); }
.footer-grid p { color: var(--color-navy-soft); font-size: 0.9375rem; line-height: 1.6; }
.footer-col-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy-tint);
  margin-bottom: var(--space-4);
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: 10px; }
.footer-links a { color: var(--color-navy-soft); text-decoration: none; font-size: 0.9375rem; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.8125rem;
  color: var(--color-navy-soft);
}
.footer-bottom .mono { color: var(--color-navy-soft); }

/* ---------- pricing tables ---------- */
.route-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
  background: var(--color-surface);
  gap: 3px;
}
.route-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.route-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px; /* 44px+ touch target with this line-height/font-size */
  border-radius: var(--radius-sm); /* nests correctly under the outer pill's
    --radius-md (6px) minus its 3px padding, rather than the undocumented
    5px this was hand-tuned to */
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.route-toggle label svg { flex: none; }
#route-partnership:checked ~ .route-toggle label[for="route-partnership"],
#route-loneWolf:checked ~ .route-toggle label[for="route-loneWolf"] {
  background: var(--color-primary);
  color: #fff;
}

.route-panes { margin-top: var(--space-8); }
.route-pane { display: none; }
#route-partnership:checked ~ .route-panes .pane-partnership,
#route-loneWolf:checked ~ .route-panes .pane-loneWolf {
  display: block;
}

table.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.price-table th, .price-table td {
  padding: 14px var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}
.price-table thead th {
  background: var(--color-surface-alt);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table tbody tr:hover { background: rgba(22,34,68,0.02); }
.price-table td.pkg { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 500; color: var(--color-primary); }
.price-table td.pkg svg { flex: none; }
.price-table td.money { font-family: var(--font-mono); white-space: nowrap; }
.price-table td.scope { color: var(--color-text-muted); }

@media (max-width: 760px) {
  table.price-table, table.price-table thead, table.price-table tbody, table.price-table th, table.price-table td, table.price-table tr { display: block; }
  table.price-table thead { display: none; }
  table.price-table tr { border-bottom: 1px solid var(--color-border); padding: var(--space-4); }
  table.price-table td { border: none; padding: 4px 0; }
  table.price-table td::before { content: attr(data-label); display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 2px; }
  table.price-table td.pkg { font-size: 1.0625rem; padding-bottom: 8px; }
  table.price-table td.pkg::before { content: none; }
}

.inclusions-note {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
}
.incl-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3) var(--space-4);
}
.incl-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  color: var(--color-text);
}
.incl-list svg { flex: none; color: var(--color-accent); }

.addons-table td.money, .price-table td.money { font-family: var(--font-mono); }

.vat-note { color: var(--color-text-muted); font-size: 0.875rem; }

/* ---------- architecture diagram ---------- */
.arch {
  position: relative;
}
.arch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}
.arch-band-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--pillar-color);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.arch-layer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.875rem;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease var(--ld, 0ms), transform 420ms cubic-bezier(0.16, 1, 0.3, 1) var(--ld, 0ms);
}
.arch-layer.is-visible { opacity: 1; transform: translateY(0); }

/* Focal moment: each capability arrives as a discrete part clicking into
   the system, not a plain fade-up -- the icon lands undersized and twisted,
   scaling true as its stroke self-draws (pathLength="1" on every shape),
   the same "assembling the system" device index.html's included-features
   row already uses. It's the one motion idea this section is actually
   about: nine parts of one integrated build. */
.arch-layer-icon {
  flex: none;
  color: var(--pillar-color);
  transform: scale(0.45) rotate(-16deg);
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--ld, 0ms) + 90ms);
}
.arch-layer.is-visible .arch-layer-icon { transform: scale(1) rotate(0deg); }
.arch-layer-icon :is(path, rect, circle, ellipse) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 650ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ld, 0ms) + 150ms);
}
.arch-layer.is-visible .arch-layer-icon :is(path, rect, circle, ellipse) { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .arch-layer, .arch-layer-icon { opacity: 1; transform: none; transition: none; }
  .arch-layer-icon :is(path, rect, circle, ellipse) { stroke-dashoffset: 0; transition: none; }
}
.arch-layer-text { min-width: 0; }
@media (max-width: 820px) {
  .arch-grid { grid-template-columns: 1fr; }
}

/* ---------- facts strip ---------- */
.facts-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  font-size: 1rem;
  color: var(--color-text);
}
.facts-strip span { display: flex; align-items: center; gap: var(--space-8); }
.facts-strip span:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.1em;
  background: var(--color-border);
  margin-left: var(--space-8);
}
.facts-strip strong { color: var(--color-primary); font-weight: 600; }

/* ---------- utility bands ---------- */
.bg-surface { background: var(--color-surface); }
.bg-alt { background: var(--color-surface-alt); }
.bg-dark { background: var(--color-surface-dark); }
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; gap: var(--space-8); } }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }

.kv-list { list-style: none; margin: 0; padding: 0; }
.kv-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 0.9375rem; }
.kv-list li:last-child { border-bottom: none; }
.kv-list .k { color: var(--color-text-muted); }
.kv-list .v { font-family: var(--font-mono); }

/* ---------- FAQ accordion (native details/summary, no JS) ---------- */
.faq { max-width: 780px; }
.faq details { border-top: 1px solid var(--color-border); padding-block: var(--space-2); }
.faq details:last-child { border-bottom: 1px solid var(--color-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 12px; /* keeps the tap target at ~44px */
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--color-text);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; width: 20px; height: 20px; position: relative; margin-left: var(--space-4); }
.faq summary .icon::before, .faq summary .icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-text-muted);
  transition: transform var(--transition-base);
}
.faq summary .icon::before { width: 12px; height: 1.5px; transform: translate(-50%,-50%); }
.faq summary .icon::after { width: 1.5px; height: 12px; transform: translate(-50%,-50%); }
.faq details[open] summary .icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-answer { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 0.9375rem; max-width: 62ch; }

/* dark-surface variant (about.html's FAQ, on bg-dark) */
.faq-on-dark .faq details { border-top-color: rgba(255, 255, 255, 0.14); }
.faq-on-dark .faq details:last-child { border-bottom-color: rgba(255, 255, 255, 0.14); }
.faq-on-dark .faq summary { color: #fff; }
.faq-on-dark .faq summary .icon::before,
.faq-on-dark .faq summary .icon::after { background: var(--color-navy-tint); }
.faq-on-dark .faq-answer { color: var(--color-navy-soft); }