/* Satoshi — Indian Type Foundry, ITF Free Font License v2.0.
   Commercial use and self-hosting granted; modification, format conversion
   and SUBSETTING are prohibited, so these files ship exactly as delivered.
   Licence text: assets/fonts/SATOSHI-LICENSE.txt */
@font-face {
  font-family: Satoshi;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: Satoshi;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
}
@font-face {
  font-family: Satoshi;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
}
@font-face {
  font-family: Satoshi;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
}

/* Redaction — OFL. Built on the typefaces of legal documents, with
   degradation grades that simulate photocopy and fax. Display only. */
@font-face {
  font-family: Redaction;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/redaction-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibmplexmono-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibmplexmono-500.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Palette taken from CobaltLoom's own report document, not from a UI kit.
   Cobalt #0b2fd4 is the brand colour that was already in the deliverable. */
:root {
  --bg: #fff;
  --bg-2: #f7f7f5;
  --bg-3: #ecece7;
  --ink: #1a1a1c;
  --ink-2: #4b4b52;
  --ink-3: #74747a;
  --line: #e4e4df;
  --line-2: #d6d6cf;
  --accent: #0b2fd4;
  --accent-ink: #fff;
  --accent-soft: rgb(11 47 212 / 6%);
  --accent-line: rgb(11 47 212 / 22%);
  --danger: #c0392b;
  --danger-soft: rgb(192 57 43 / 7%);
  --danger-line: rgb(192 57 43 / 25%);

  /* severity, matching the report */
  --sev-crit: #6e1423;
  --sev-high: #c0392b;
  --sev-med: #b7791f;
  --sev-low: #4a6b8a;
  --sev-ok: #2f855a;
  --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
  --display: "Redaction", "Satoshi", georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", menlo, monospace;
  --maxw: 1240px;
  --gut: clamp(20px, 4vw, 40px);
  --sec: clamp(72px, 9vw, 120px);
  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  background: var(--bg);
}
body {
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
::selection {
  background: var(--accent);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.sec {
  padding: var(--sec) 0;
}
.sec--tight {
  padding: calc(var(--sec) * 0.6) 0;
}

/* A running head, not a decorative kicker. The short accent dash that used
   to sit in front of this is gone: it is one of the clearest signatures of
   a generated landing page. Monospace stays because the label is metadata,
   but the colour drops to muted ink so the accent stays almost unused. */
.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--ink);
  padding-top: 11px;
  margin-bottom: 26px;
}

h1,
h2,
h3,
h4 {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* Display sizes take Redaction. Below h2 the serif stops helping and
   Satoshi carries it, which keeps the serif an event rather than a texture. */
h1,
h2 {
  /* Headings carry email addresses and hostnames: single unbreakable tokens.
     `anywhere` rather than `break-word` because only `anywhere` reduces the
     intrinsic min-content width, which is what a flex item is sized from. */
  overflow-wrap: anywhere;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.005em;
}
h1 {
  font-size: clamp(42px, 6.8vw, 76px);
  line-height: 1.04;
}
h2 {
  font-size: clamp(32px, 4.6vw, 50px);
  line-height: 1.1;
}
h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.01em;
}
h4 {
  font-size: 19px;
}
p {
  color: var(--ink-2);
}
.lead {
  font-size: clamp(18px, 2vw, 21px);
  color: var(--ink-2);
  max-width: 60ch;
  line-height: 1.6;
}
.muted {
  color: var(--ink-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: 3px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: 0.22s var(--ease);
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover {
  background: #0057b3;
  border-color: #0057b3;
}
.btn--ghost {
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn--ghost:hover {
  border-color: transparent;
  color: var(--accent);
}
.btn .arr {
  transition: transform 0.22s var(--ease);
}
.btn:hover .arr {
  transform: translateX(4px);
}

.link {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 3px;
}
.link:hover {
  gap: 12px;
}

.hairline {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-2), transparent);
  border: 0;
  margin: 0;
}

/* ---------- NAV ---------- */
.utility {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.utility .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
}
.utility a:hover {
  color: var(--accent);
}
.utility .u-left,
.utility .u-right {
  display: flex;
  gap: 22px;
  align-items: center;
}
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav.scrolled {
  box-shadow: 0 1px 0 var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 18px;
}
.brand .bl-logo {
  display: none;
  height: 30px;
  width: auto;
}
.brand .bl-word {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.brand .bl-word img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.brand b {
  color: var(--accent);
  font-weight: 600;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links > a,
.nav-item > summary {
  font-size: 14.5px;
  color: var(--ink);
  padding: 8px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.nav-links > a::after,
.nav-item > summary::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 0;
  background: var(--accent);
  transition: width 0.25s var(--ease);
}
.nav-links > a:hover::after,
.nav-item > summary:hover::after {
  width: 100%;
}
.nav-item {
  position: relative;
}
.nav-item > summary {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-item > summary::-webkit-details-marker {
  display: none;
}
.nav-item .caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-3);
}
.nav-item[open] > summary .caret {
  border-top: 0;
  border-bottom: 5px solid var(--ink-3);
}
.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 86vw);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 1px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 10%);
}
.mega a {
  display: block;
  padding: 13px 14px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: 0.2s var(--ease);
}
.mega a:hover {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.mega a .mt {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.mega a .md {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.4;
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.burger span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  display: block;
  transition: 0.25s;
}
.mobile-nav {
  display: none;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mobile-nav details {
  border-top: 1px solid var(--line);
}
.mobile-nav summary {
  padding: 15px var(--gut);
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.mobile-nav summary::-webkit-details-marker {
  display: none;
}
.mobile-nav .m-link {
  padding: 15px var(--gut);
  display: block;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.mobile-nav .m-sub a {
  display: block;
  padding: 11px var(--gut) 11px calc(var(--gut) + 16px);
  font-size: 14px;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}

@media (max-width: 860px) {
  .utility {
    display: none;
  }
  .burger {
    display: flex;
  }
  .nav-links {
    display: none;
  }
  .nav-cta .btn--primary {
    display: none;
  }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: clamp(56px, 9vw, 110px) 0 clamp(48px, 7vw, 84px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero .grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000, transparent 75%);
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }

  .hero-fig {
    display: none;
  }
}
.hero-fig {
  margin: 0;
}

/* Figures are inlined into the page rather than loaded through <img>, so the
   @font-face rules above actually reach them. See bin/inline-figures.py. */
.hero-fig img,
.hero-fig svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin-left: auto;
}
.hero-line {
  margin-top: 34px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* In-page figure block, for the service and methodology pages. */
.fig {
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

/* A figure dropped into a two-column split must span both columns, or it
   renders at half width and its 9px labels stop being legible. */
.split > .fig {
  grid-column: 1 / -1;
  margin-top: 52px;
}
.fig img,
.fig svg {
  display: block;
  width: 100%;
  height: auto;
}
.fig--portrait img,
.fig--portrait svg {
  max-width: 520px;
}
.fig--wide img,
.fig--wide svg {
  max-width: 820px;
}

/* Dark figures sit better when they break the text measure and carry their own
   edge, rather than floating as a small panel in the middle of a light page. */
.fig--bleed {
  border-top: 0;
  padding-top: 0;
}
.fig--bleed svg,
.fig--bleed img {
  max-width: 100%;
  width: 100%;
  border-radius: 2px;
}
@media (min-width: 1180px) {
  .fig--bleed {
    width: min(calc(100vw - 48px), 1460px);
    margin-left: calc(50% - min(calc(50vw - 24px), 730px));
  }
}

/* Fig. captions: an engineering-document convention, and the cheapest way
   to make a diagram read as evidence rather than decoration. */
figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: 14px;
  line-height: 1.55;
}
.hero h1 {
  max-width: 16ch;
}
.hero .lead {
  margin-top: 26px;
}
.hero .cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}
.pill {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 7px 14px;
  background: var(--bg-2);
}

/* ---------- STATS ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 1px;
  overflow: hidden;
  background: var(--bg-2);
}
.stats .stat {
  padding: 30px 26px;
  border-right: 1px solid var(--line);
}
.stats .stat:last-child {
  border-right: 0;
}
.stats .v {
  font-family: var(--display, var(--sans));
  font-weight: 600;
  font-size: clamp(32px, 4vw, 46px);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stats .v small {
  font-size: 0.5em;
  color: var(--accent);
  font-weight: 600;
  margin-left: 2px;
}
.stats .l {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
}
@media (max-width: 820px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .stats .stat:nth-child(2) {
    border-right: 0;
  }
  .stats .stat:nth-child(1),
  .stats .stat:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- PILLARS / CARDS ---------- */

/* Columns divided by hairlines rather than drawn as boxes. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.pillar {
  padding: 30px 30px 10px;
  position: relative;
  border-left: 1px solid var(--line);
}
.pillar:first-child {
  border-left: 0;
  padding-left: 0;
}
.pillar .pidx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.pillar h3 {
  margin-bottom: 12px;
}
.pillar p {
  font-size: 15px;
  line-height: 1.6;
}
.pillar .plink {
  margin-top: 22px;
}
@media (max-width: 860px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* Ruled entries, not cards. The hover lift is gone with the border. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0 40px;
}
.card {
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
  position: relative;
  display: flex;
  flex-direction: column;
}
.card .cnum {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.card p {
  font-size: 14.5px;
  line-height: 1.6;
}
.card .cmeta {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ---------- PROCESS ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 1px;
  overflow: hidden;
  background: var(--bg-2);
}
.step {
  padding: 34px 26px;
  border-right: 1px solid var(--line);
  position: relative;
}
.step:last-child {
  border-right: 0;
}
.step .snum {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 18px;
}
.step h3 {
  margin-bottom: 10px;
}
.step p {
  font-size: 14px;
  line-height: 1.55;
}
@media (max-width: 860px) {
  .process {
    grid-template-columns: 1fr 1fr;
  }
  .step:nth-child(2) {
    border-right: 0;
  }
  .step:nth-child(1),
  .step:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- TWO COLUMN ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
@media (max-width: 880px) {
  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.split--rev .split-media {
  order: -1;
}
@media (max-width: 880px) {
  .split--rev .split-media {
    order: 0;
  }
}

.feature-list {
  list-style: none;
  display: grid;
  gap: 0;
}
.feature-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.feature-list li:first-child {
  border-top: 0;
}
.feature-list .fi {
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  flex: 0 0 auto;
}
.feature-list h3 {
  margin-bottom: 6px;
}
.feature-list p {
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---------- PULLQUOTE ---------- */
.quote {
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 28px;
  max-width: 62ch;
}
.quote p {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.quote .by {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 18px;
  letter-spacing: 0.04em;
}

/* ---------- BADGES / TRUST ---------- */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.badge {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 10px 16px;
  background: var(--bg-2);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- CTA BAND ---------- */
.cta-band {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: clamp(40px, 6vw, 68px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-band h2 {
  max-width: 18ch;
}
.cta-band .actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Narrow viewports: the band's own padding plus an 18ch display heading
   exceeded the content box and pushed the page sideways. */
@media (max-width: 600px) {
  .cta-band {
    padding: 28px 20px;
    gap: 24px;
  }

  /* Flex items default to min-width:auto and refuse to shrink below their
     longest word; without this the band stays wider than the viewport. */
  .cta-band > * {
    min-width: 0;
  }

  .cta-band h2 {
    max-width: none;
  }

  .cta-band .actions,
  .hero .cta,
  .cta {
    width: 100%;
  }

  .cta-band .actions .btn,
  .hero .cta .btn,
  .cta .btn {
    width: 100%;
    justify-content: center;
  }

  .btn {
    padding: 13px 16px;
    white-space: normal;
  }
}

/* ---------- PAGE HEADER (interior) ---------- */
.page-head {
  padding: clamp(48px, 7vw, 84px) 0 clamp(34px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
}
.breadcrumb {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 26px;
}
.breadcrumb a:hover {
  color: var(--accent);
}
.breadcrumb span {
  margin: 0 8px;
  color: var(--line-2);
}
.page-head h1 {
  font-size: clamp(36px, 5.4vw, 60px);
  max-width: 18ch;
}
.page-head .lead {
  margin-top: 22px;
}

/* ---------- SIDEBAR LAYOUT ---------- */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

/* Intake page: content left, contact rail right. Declared here rather than
   inline, so the mobile collapse below can actually win -- an inline style
   beats any selector and this page used to scroll 295px sideways on a phone. */
.layout--intake {
  grid-template-columns: 1fr 340px;
  align-items: start;
}

@media (max-width: 960px) {
  .layout {
    grid-template-columns: 1fr;
  }
}
.sidebar {
  position: sticky;
  top: 120px;
  border-left: 1px solid var(--line);
  padding-left: 22px;
}
@media (max-width: 960px) {
  .sidebar {
    position: static;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 32px;
  }
}
.sidebar .s-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.sidebar a {
  display: block;
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--ink-2);
  border-left: 2px solid transparent;
  margin-left: -22px;
  padding-left: 22px;
  transition: 0.2s;
}
.sidebar a:hover {
  color: var(--ink);
}
.sidebar a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}

/* ---------- FORMS ---------- */
.form-grid {
  display: grid;
  gap: 22px;
  max-width: 680px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.field label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input,
.field textarea,
.field select {
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 13px 15px;
  transition: 0.2s;
  width: 100%;
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--accent);
  background: var(--bg);
}
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.seg label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 9px 16px;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg label:hover {
  border-color: var(--ink-2);
}
.seg input:checked + label {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.reassure {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: 22px;
  background: var(--bg-2);
}
.reassure .r {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.reassure .rk {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 5px;
  padding: 2px 6px;
  flex: 0 0 auto;
}
.contact-side {
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: 30px;
  background: var(--bg-2);
  height: fit-content;
}
.contact-side h2.ci-h {
  margin-bottom: 16px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.contact-side .ci {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.contact-side .ci:first-of-type {
  border-top: 0;
}
.contact-side .ci .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.contact-side .ci .v {
  color: var(--ink);
}

/* ---------- FOOTER ---------- */
.foot {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: 64px 0 30px;
  margin-top: var(--sec);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 880px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
@media (max-width: 560px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}
.foot .fbrand .brand {
  margin-bottom: 16px;
}
.foot .fbrand p {
  font-size: 14px;
  max-width: 34ch;
  line-height: 1.6;
}
.foot h3 {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.foot ul {
  list-style: none;
  display: grid;
  gap: 11px;
}
.foot ul a {
  font-size: 14px;
  color: var(--ink-2);
}
.foot ul a:hover {
  color: var(--accent);
}
.foot-bottom {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.03em;
}
.foot-bottom .soc {
  display: flex;
  gap: 18px;
}
.foot-bottom .soc a:hover {
  color: var(--accent);
}

/* ---------- REVEAL ---------- */

/* Fail open. The hidden state is gated behind the .js class that the inline
   head script adds, so if scripting is unavailable or main.js fails to load,
   every section stays visible instead of the page below the hero going blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  /* Must out-specify `.js .reveal` (0,2,0), or a reduced-motion user with
     JavaScript on still gets the fade they asked the OS to suppress. */
  .reveal,
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* ---------- FORM HONEYPOT ---------- */
.hp {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ledger-note {
  max-width: 840px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ---------- INK BAND ---------- */
.sec--ink {
  background: var(--ink);
  color: #fff;
}
.sec--ink h2,
.sec--ink h3 {
  color: #fff;
}
.sec--ink p,
.sec--ink .lead {
  color: rgb(255 255 255 / 68%);
}
.sec--ink .eyebrow {
  color: rgb(255 255 255 / 70%);
  border-top-color: rgb(255 255 255 / 32%);
}
.sec--ink .eyebrow::before {
  background: rgb(255 255 255 / 35%);
}

/* ---------- SCOPE GRID (named, testable surfaces) ---------- */
.scope {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .scope {
    grid-template-columns: 1fr;
  }
}
.sc {
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sc .sx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sc h3 {
  font-size: 18px;
  letter-spacing: -0.01em;
}
.sc p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.sc .std {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ---------- REPORT ANATOMY ---------- */
.anatomy {
  margin-top: 44px;
  border-top: 1px solid var(--line);
}
.anat {
  display: grid;
  grid-template-columns: 56px 220px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (max-width: 760px) {
  .anat {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.anat .an {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  padding-top: 4px;
}
.anat h3 {
  font-size: 16px;
}
.anat p {
  font-size: 14.5px;
  color: var(--ink-2);
}

/* ---------- LIMITS (what we decline) ---------- */
.limits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
  margin-top: 44px;
}
@media (max-width: 760px) {
  .limits {
    grid-template-columns: 1fr;
  }
}
.limit {
  padding: 24px 0 26px;
  border-top: 1px solid rgb(255 255 255 / 18%);
}
.limit h3 {
  font-size: 16px;
  margin-bottom: 8px;
}
.limit p {
  font-size: 14.5px;
}

/* ---------- FAQ ---------- */
.faq {
  margin-top: 44px;
  border-top: 1px solid var(--line);
  max-width: 880px;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  font-size: 17px;
  font-weight: 500;
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 18px;
  font-family: var(--mono);
  font-size: 20px;
  color: var(--accent);
  line-height: 1;
}
.faq details[open] summary::after {
  content: "\2212";
}
.faq details p {
  font-size: 15px;
  color: var(--ink-2);
  padding: 0 40px 22px 0;
  max-width: 72ch;
}

/* ---------- CALLOUT ---------- */
.callout {
  margin-top: 36px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  padding: 18px 22px;
  max-width: 780px;
}
.callout p {
  font-size: 14.5px;
  color: var(--ink-2);
}

/* ---------- DOCUMENT VIEWER ----------
   Flat, straight-on renders of the specimen report. No perspective, no
   laptop frame, no crop: the argument is "this is the file you receive",
   and an angled mockup destroys that argument. Tabs are radio-driven so
   the component needs no JavaScript. */
.docview {
  margin-top: 40px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: clamp(14px, 2vw, 22px);
}
.docview > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.dv-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dv-tabs::-webkit-scrollbar {
  display: none;
}
.dv-tabs label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}
.dv-tabs label:hover {
  color: var(--ink);
}
.dv-body {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(22px, 4vw, 52px);
  align-items: start;
}
@media (max-width: 860px) {
  .dv-body {
    grid-template-columns: 1fr;
  }
}
.dv-note {
  display: none;
}
.dv-note h3 {
  font-size: 19px;
  margin-bottom: 10px;
}
.dv-note p {
  font-size: 15px;
  max-width: 44ch;
}
.dv-note .dv-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.dv-sheet {
  display: none;
  margin: 0;
}
.dv-sheet img {
  width: 100%;
  max-width: 440px;
  height: auto;
  border: 1px solid var(--line-2);
  background: #fff;
}
#dv-1:checked ~ .dv-tabs label[for="dv-1"],
#dv-2:checked ~ .dv-tabs label[for="dv-2"],
#dv-3:checked ~ .dv-tabs label[for="dv-3"],
#dv-4:checked ~ .dv-tabs label[for="dv-4"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
#dv-1:checked ~ .dv-body .dv-note:nth-of-type(1),
#dv-2:checked ~ .dv-body .dv-note:nth-of-type(2),
#dv-3:checked ~ .dv-body .dv-note:nth-of-type(3),
#dv-4:checked ~ .dv-body .dv-note:nth-of-type(4),
#dv-1:checked ~ .dv-body .dv-sheet:nth-of-type(1),
#dv-2:checked ~ .dv-body .dv-sheet:nth-of-type(2),
#dv-3:checked ~ .dv-body .dv-sheet:nth-of-type(3),
#dv-4:checked ~ .dv-body .dv-sheet:nth-of-type(4) {
  display: block;
}

/* Landscape variant: product screenshots are wider than they are tall, so the
   sheet column takes the space the portrait report pages did not need. */
.docview--wide .dv-body {
  grid-template-columns: 1fr;
  gap: 22px;
}
.docview--wide .dv-note p {
  max-width: 78ch;
}
.docview--wide .dv-sheet img {
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--line-2);
}

/* Let the product shots break out of the text measure on wide screens, so the
   portal UI renders near its native size instead of being scaled down. */
@media (min-width: 1180px) {
  .docview--wide {
    width: min(calc(100vw - 48px), 1460px);
    margin-left: calc(50% - min(calc(50vw - 24px), 730px));
  }
}

/* ---------- INLINE CODE ---------- */
code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ---------- FORM HONEYPOT ---------- */