/* ============================================================
   Commec website — shared styles
   Faithful to the IBBIS / Commec design system:
   navy surfaces, Acumin Pro ALL-CAPS titles, Lyon Text body,
   square red CTAs, white-on-navy circle motif, 1200px container.
   Tokens + fonts come from colors_and_type.css.

   This site ships NO JavaScript: all content is in the HTML and
   every effect here is pure CSS, degrading gracefully.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ibbis-white);
  color: var(--ibbis-navy);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }

/* ---------- Shared type ---------- */
/* ALL-CAPS micro-label pattern — eyebrows, meta labels, footer bar, card CTAs,
   verdict chips, dates. Members below inherit these; each keeps only its own
   size / colour / weight / tracking exception. Add .caps-label to any new
   element that needs the same treatment. */
.caps-label,
.eyebrow, .card__num, .card__eye, .card__cta, .cta-inline, .logo-col__label,
.foot-col h4, .signup__label, .blueprint__meta,
.readout__verdict, .explorer__picker-label, .kyc-box__cta, .tl-date, .quote cite {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.caps-label { font-weight: 700; }
.eyebrow {
  font-weight: 400;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps-l);
  color: var(--ibbis-red);
  margin: 0 0 var(--space-4);
}
.eyebrow.on-navy { color: var(--ibbis-red); }

h1, h2, h3, h4 { margin: 0; }

/* Title style — Acumin Bold caps */
.title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Header style — Acumin Extra Light caps */
.header-xl {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Sub-head — Lyon Bold Title Case */
.subhead {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}
.lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}
p { margin: 0 0 var(--space-5); text-wrap: pretty; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
/* Content links only — buttons/nav-links manage their own colour (buttons.css),
   so the global hover must not override their label colour. */
a:not(.btn):not(.nav-link):hover { color: var(--link-hover); }

/* ---------- Layout ---------- */
.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-px); padding-right: var(--container-px); }
.section { padding: 88px 0; }
.section--navy { background: var(--ibbis-navy); color: var(--ibbis-white); }
.section--tint { background: var(--navy-tint); }
.section-head { max-width: 880px; margin: 0 auto 48px; text-align: center; }
.section-head .header-xl { text-wrap: balance; margin-bottom: 0.6rem; }
.section-head .lead { color: inherit; }
.section--navy .lead { color: var(--on-navy-strong); }
.section--navy + .section--navy { border-top: 1px solid var(--on-navy-line); }

/* ---------- Buttons & nav links ----------
   The button + nav-link system is vendored from the IBBIS Design System in
   buttons.css (linked before this file). Markup uses .btn / .btn--primary /
   .btn--secondary / .btn--on-dark and .nav-link / .nav-link--button. Only the
   site-specific layout wrappers/overrides live here. */
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ibbis-navy);
  color: var(--ibbis-white);   /* .nav-link text inherits this on the navy bar */
  border-bottom: 1px solid var(--on-navy-line);
}
.nav__inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: 16px var(--container-px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__logo { display: inline-flex; }
.nav__logo img { height: 30px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; }
/* .nav-link text-links come from buttons.css; the nav keeps a filled .btn CTA
   (Commec's intentional divergence from the editorial IBBIS nav) at a compact size. */
.nav .btn { padding: 10px 20px; }
/* Nav CTA hover (treatment C): stays red — a white underline grows under the
   label — instead of the buttons.css on-dark navy flip. Underline hugs the label. */
.nav .btn--primary:hover { background: var(--ibbis-red); border-color: var(--ibbis-red); color: var(--ibbis-white); }
.nav .btn .btn-underline { position: relative; display: inline-block; padding-bottom: 4px; }
.nav .btn .btn-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ibbis-white); transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav .btn:hover .btn-underline::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav .btn .btn-underline::after { transition: none; } }

/* ---------- Hero ---------- */
.hero { background: var(--ibbis-navy); color: var(--ibbis-white); overflow: hidden; }
.hero__inner {
  max-width: var(--container-max); margin: 0 auto;
  /* Floor matches the natural height of the circle-art pages (520px art
     − 60px bottom bleed + 2×48px padding = 556px), so every hero is the same
     height. Pages whose art is shorter than the circle — the Get Started
     diagram — then have slack for the copy to centre within, instead of the
     copy defining a shorter hero and starting higher than the other pages. */
  min-height: 556px;
  padding: 48px var(--container-px);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: 56px; align-items: start;
}
/* Copy centres against the hero's full height, which the art sets (it is taller
   than the copy on every page). The art keeps its own align-self — bottom for
   the circle, center for the diagram — so only the copy follows this.
   Trade-off: because the pages' copy blocks differ in height, the eyebrow no
   longer lands at an identical y on every page. */
.hero__copy { align-self: center; }
/* The circle pages anchor their art to the bottom and let it bleed 60px past
   the content box, so its optical centre sits 30px lower than the hero's.
   Centring the copy on the hero therefore leaves it reading high against the
   circle. Nudge it down to share the circle's centre line: a centred item
   shifts by half its added top margin, so 60px buys the 30px needed. The Get
   Started diagram is already centre-aligned and needs no offset. */
.hero__inner:has(.hero__art:not(.hero__art--diagram)) .hero__copy { margin-top: 60px; }
.hero__eyebrow { color: var(--ibbis-red); }
.hero__title { margin: 0 0 22px; }
.hero__tag {
  font-family: var(--font-serif);
  font-size: var(--fs-lg); line-height: 1.4;
  color: var(--on-navy-strong);
  max-width: 30ch; margin: 0 0 30px;
}
.hero__sub { color: var(--on-navy); font-size: var(--fs-sm); margin: 18px 0 0; }
.hero__sub a { color: var(--ibbis-white); }

/* Circle + DNA art */
/* Art keeps its full size and bleeds past the content box (clipped by .hero
   overflow:hidden). Centred rather than bottom-anchored, while keeping the
   negative bottom margin: centring a box of height h whose margin box is
   h − 60 puts the art's centre at a constant 60/2 = 30px below the content
   box centre, whatever h is. Bottom-anchoring instead pinned the art's bottom,
   so a narrower column shrank the circle and slid its centre downward, and no
   fixed offset on the copy could track it. Constant centre means the copy's
   30px nudge above lines the two up at every width. */
.hero__art { position: relative; aspect-ratio: 1/1; width: 100%; max-width: 520px; justify-self: end; align-self: center; margin-top: 0; margin-bottom: -60px; }
.hero__art .circles { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__art .circles circle { fill: none; stroke: var(--on-navy-strong); stroke-width: 1.4; }
.hero__art .dna { position: absolute; width: 56%; height: auto; top: 20%; left: 9%; z-index: 2; }
/* Get Started hero — landscape narrative diagram (DNA → screening → report) */
.hero__art--diagram { aspect-ratio: auto; max-width: 640px; align-self: center; margin-bottom: 0; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.card {
  background: var(--ibbis-white); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 30px;
  transition: border-color var(--dur-med) var(--ease-out);
}
.card .card__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0 0 12px; color: var(--ibbis-navy); }
.card .card__title a { color: inherit; text-decoration: none; }
.card .card__title a:hover { text-decoration: underline; }
.card p { margin: 0; font-size: var(--fs-md); color: var(--grey-muted); }
/* Flat hover — no lift, no shadow: hairline border deepens to navy (brand is flat + editorial) */
.card--hover:hover { border-color: var(--ibbis-navy); }
/* Whole-card links: no underline (content carries its own colours) */
a.card { text-decoration: none; }
/* subtle surface fills (.04–.09) sit below the on-navy tint scale on purpose */
.section--navy .card { background: rgba(255,255,255,0.04); border-color: var(--on-navy-line); }
.section--navy .card .card__title { color: var(--ibbis-white); }
.section--navy .card p { color: var(--on-navy); }

/* Requirement icon (geometric line art, black on light per brand imagery rules) */
.req-icon { display: block; width: 40px; height: 40px; margin: 0 0 18px; }
.section--navy .req-icon { filter: brightness(0) invert(1); }

/* Requirements: icon-in-circle rows (brand circle motif), calm 2-up layout */
.req-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 24px; }
.req-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.req-badge {
  width: 64px; height: 64px; flex: none; border-radius: var(--radius-full);
  border: 1px solid var(--grey-line);
  display: grid; place-items: center; margin-bottom: 18px;
}
.req-badge img { width: 28px; height: 28px; }
.req-item__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 6px 0 10px; color: var(--ibbis-navy); }
.req-item__text p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--grey-muted); }
.section--navy .req-badge { border-color: var(--on-navy-line); }
.section--navy .req-badge img { filter: brightness(0) invert(1); }
.section--navy .req-item__title { color: var(--ibbis-white); }
.section--navy .req-item__text p { color: var(--on-navy); }
@media (max-width: 860px) { .req-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .req-grid { grid-template-columns: 1fr; } }

/* Card with an accent index number */
.card__num {
  font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: var(--tracking-caps-l); color: var(--ibbis-red);
  margin: 0 0 16px;
}

/* Optional eyebrow + CTA inside a card (used by the program-card style) */
.card__eye {
  display: block; font-weight: 700;
  font-size: var(--fs-xxs); letter-spacing: var(--tracking-caps-l);
  color: var(--ibbis-red); margin: 0 0 12px;
}
.card__cta {
  display: inline-block; margin-top: 18px;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--ibbis-navy); text-decoration: none;
  border-bottom: 2px solid var(--prog-accent, var(--ibbis-red)); padding-bottom: 3px;
}
.cta-inline {
  display: inline-block;
  font-weight: 700;
  font-size: var(--fs-xxs);
  color: var(--ibbis-navy); text-decoration: none;
  border-bottom: 2px solid var(--ibbis-teal); padding-bottom: 3px;
  transition: color var(--dur-med) var(--ease-out);
}
.cta-inline:hover { color: var(--ibbis-teal); }
.section--navy .cta-inline { color: var(--ibbis-white); }
.section--navy .cta-inline:hover { color: var(--ibbis-teal); }

/* ---------- Program-card style (IBBIS website editorial grid) ----------
   Toggle with body[data-cards="program"]. Cards lose their boxes and become
   a hairline-banded row: navy rules top + bottom, navy spines between cells,
   and a red top-bar that wipes in on hover. */
body[data-cards="program"] :is(.grid-3, .grid-2, .grid-1) {
  gap: 0;
  border-top: 1px solid var(--ibbis-navy);
  border-bottom: 1px solid var(--ibbis-navy);
}
body[data-cards="program"] :is(.grid-3, .grid-2, .grid-1) > .card {
  position: relative; overflow: hidden;
  background: transparent; border: none; border-radius: var(--radius-none);
  border-left: 1px solid var(--ibbis-navy);
  box-shadow: none;
  padding: 34px 28px 30px;
}
body[data-cards="program"] :is(.grid-3, .grid-2, .grid-1) > .card:first-child { border-left: none; }
body[data-cards="program"] :is(.grid-3, .grid-2, .grid-1) > .card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--prog-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out); pointer-events: none;
}
body[data-cards="program"] :is(.grid-3, .grid-2, .grid-1) > .card:hover::before { transform: scaleX(1); }
body[data-cards="program"] :is(.grid-3, .grid-2, .grid-1) > .card.card--hover:hover { transform: none; box-shadow: none; }
/* Navy-band variant on navy sections keeps hairlines visible */
body[data-cards="program"] .section--navy :is(.grid-3, .grid-2, .grid-1),
body[data-cards="program"] .section--navy :is(.grid-3, .grid-2, .grid-1) > .card { border-color: var(--on-navy-line); }
@media (max-width: 900px) {
  body[data-cards="program"] :is(.grid-3, .grid-2, .grid-1) > .card { border-left: none; border-top: 1px solid var(--ibbis-navy); }
  body[data-cards="program"] :is(.grid-3, .grid-2, .grid-1) > .card:first-child { border-top: none; }
}
/* 2-up program grid becomes a 2×2: left column loses the spine, second row gains a top rule */
body[data-cards="program"] .grid-2 > .card:nth-child(odd) { border-left: none; }
body[data-cards="program"] .grid-2 > .card:nth-child(n+3) { border-top: 1px solid var(--ibbis-navy); }

/* ---------- Partner logo tiles (placeholder until real logos) ---------- */
.logo-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; max-width: 900px; margin: 0 auto; }
/* Full-width heading above the logo columns ("Now screening orders for") —
   used alongside .logo-col__label; the compound selector wins the colour. */
.logo-col__label.logo-cols__heading { grid-column: 1 / -1; text-align: center; color: var(--navy-deep); margin: 0 0 8px; }
.logo-col { text-align: center; }
.logo-col__label {
  font-weight: 700; font-size: var(--fs-xs);
  color: var(--ibbis-red);
  margin: 0 0 14px;
}
.logo-tile {
  border-radius: var(--radius-md);
  height: 92px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-style: italic; color: var(--fg-subtle);
  font-size: var(--fs-sm); background: transparent; text-decoration: none;
}
/* Partner logo: <object> renders the dropped-in logo, or falls back to the
   company name text if the file isn't present (no broken-image icon).
   Shown monochrome at rest; each tile links to the partner's case study and
   colour returns on hover/focus. pointer-events:none lets clicks reach the <a>. */
.logo-tile object {
  max-height: 56px; max-width: 80%; width: auto; height: auto;
  pointer-events: none;
  filter: grayscale(1); opacity: 0.8;
  transition: filter var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.logo-tile:hover object, .logo-tile:focus-visible object { filter: none; opacity: 1; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy-deep); color: var(--ibbis-white); text-align: center; }
.cta-band .container { padding-top: 72px; padding-bottom: 72px; }
.cta-band .title { margin: 0 0 28px; }
.cta-band .btn-row { justify-content: center; }
.cta-band__note { margin: 22px 0 0; color: var(--on-navy); font-size: var(--fs-sm); }
.cta-band__note a { color: var(--ibbis-white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ibbis-navy); color: var(--ibbis-white); }
.site-footer__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 56px var(--container-px) 40px;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px;
}
.site-footer__brand img { height: 40px; width: auto; margin-bottom: 18px; }
.site-footer__brand p { font-size: var(--fs-sm); color: var(--ibbis-white); max-width: 34ch; margin: 0; }
/* No underline at rest (the sitewide teal link colour/underline reads poorly
   on navy); underline appears in IBBIS red only on hover, echoing the topline
   nav's underline-driven hover. The ancestor qualifier matches the specificity
   of the sitewide `a:not(.btn):not(.nav-link):hover` rule (site.css:87) so
   this actually wins instead of being shadowed by it. */
.site-footer__brand a,
.foot-col a { color: var(--ibbis-white); text-decoration-line: none; }
.site-footer .site-footer__brand a:hover,
.site-footer .foot-col a:hover { color: var(--ibbis-white); text-decoration-line: underline; text-decoration-color: var(--ibbis-red); }
.foot-col h4 {
  font-weight: 700; font-size: var(--fs-xxs);
  letter-spacing: var(--tracking-caps-l); color: var(--ibbis-red);
  margin: 0 0 16px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot-col li { line-height: var(--lh-snug); }
.foot-col a { font-size: var(--fs-sm); }

/* ---------- Signup form ---------- */
.signup { max-width: 440px; margin: 0 auto; }
.signup__label {
  display: block; font-weight: 700;
  font-size: var(--fs-xxs); letter-spacing: var(--tracking-caps-l);
  color: var(--ibbis-white); margin: 0 0 8px;
}
.signup__row { display: flex; gap: 10px; flex-wrap: wrap; }
.signup input[type="email"] {
  flex: 1 1 220px; font-family: var(--font-serif); font-size: var(--fs-sm); color: var(--ibbis-white);
  background: transparent; border: 1px solid rgba(255,255,255,0.5); /* input border kept above the on-navy hairline so the field reads clearly */
  border-radius: var(--radius-none); padding: 13px 14px;
}
.signup input[type="email"]::placeholder { color: var(--on-navy-muted); }
.signup input[type="email"]:focus { outline: none; border-color: var(--ibbis-white); box-shadow: var(--shadow-inset-focus); }
.signup .gdpr { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--on-navy-muted); margin: 14px 0 0; }
/* ALTCHA anti-bot widget — dark theme to match the navy signup band. */
.signup altcha-widget {
  --altcha-color-base: #2d3375;
  --altcha-color-text: var(--ibbis-white);
  --altcha-color-border: rgba(255,255,255,0.45);
  --altcha-color-error-text: #ffb4a0;
  display: block; margin: 12px 0 0; max-width: 260px;
}

/* ============================================================
   Static screening examples — "How it works"
   A no-JS grid of pre-rendered Commec readouts on the navy blueprint.
   ============================================================ */
.examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
@media (max-width: 820px) { .examples { grid-template-columns: 1fr; } }

.blueprint {
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--navy-deep);
  border: 1px solid var(--on-navy-line);
  border-radius: var(--radius-md);
  padding: 28px 30px 26px;
  overflow: hidden;
}
.blueprint__meta {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--fs-xxs); letter-spacing: var(--tracking-caps-l); color: var(--on-navy-muted);
  border-bottom: 1px solid var(--on-navy-line); padding-bottom: 14px; margin-bottom: 18px;
}
.blueprint__meta strong { color: var(--on-navy-strong); font-weight: 700; }
.blueprint__name { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-sm); color: var(--ibbis-white); margin: 0 0 14px; }
.blueprint__ruler {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-xxs); color: var(--on-navy-muted);
  margin-bottom: 8px;
}
.seqfield {
  font-family: var(--font-mono);
  font-size: var(--fs-sm); line-height: 1.85; letter-spacing: 0.12em;
  color: var(--on-navy-muted);
  word-break: break-all;
}
.seqfield mark { background: transparent; color: inherit; border-radius: var(--radius-sm); padding: 2px 1px; }
.seqfield mark.soc { background: rgba(var(--red-rgb),0.22); color: var(--ibbis-white); box-shadow: inset 0 -2px 0 var(--ibbis-red); }
.seqfield mark.match { background: rgba(var(--teal-rgb),0.22); color: var(--ibbis-white); box-shadow: inset 0 -2px 0 var(--ibbis-teal); }
.seqfield mark.clear { color: var(--on-navy-strong); box-shadow: inset 0 -2px 0 rgba(87,192,138,0.7); }

/* Verdict banner inside the readout */
.readout__verdict {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: var(--fs-xs); font-weight: 700;
}
.readout__verdict.v-soc { background: rgba(var(--red-rgb),0.16); color: #ff8a63; }
.readout__verdict.v-match { background: rgba(var(--teal-rgb),0.16); color: #7ecbe4; }
.readout__verdict.v-clear { background: rgba(87,192,138,0.14); color: #86e0ac; }
.readout__verdict .dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.readout__note { font-family: var(--font-serif); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--on-navy); margin: 16px 0 0; }
.readout__note strong { color: var(--ibbis-white); font-weight: 700; }
.explorer__disclaimer { font-family: var(--font-serif); font-size: var(--fs-xs); color: var(--on-navy-muted); margin: 22px 0 0; text-align: center; }
.explorer__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

/* Progressive enhancement: with no JS, .examples shows all four readouts as a
   grid (above). When the enhancer runs it adds .hiw--js, turning the block into
   a picker (left) + single active readout (right), like the original demo. */
.hiw--js { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.hiw--js .examples { display: block; }
.hiw--js .blueprint[hidden] { display: none; }
@media (max-width: 820px) { .hiw--js { grid-template-columns: 1fr; } }
.explorer__picker { display: flex; flex-direction: column; gap: 10px; }
.explorer__picker-label {
  font-weight: 700; font-size: var(--fs-xxs);
  letter-spacing: var(--tracking-caps-l); color: var(--on-navy-muted); margin: 0 0 4px;
}
.screen-tab {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255,255,255,0.04); color: var(--ibbis-white);
  border: 1px solid var(--on-navy-line); border-left: 3px solid transparent;
  border-radius: var(--radius-md); padding: 15px 18px; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.screen-tab:hover { background: rgba(255,255,255,0.08); }
.screen-tab__name { display: block; font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.screen-tab__meta { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--on-navy-muted); margin-top: 4px; }
.screen-tab[aria-selected="true"] { background: rgba(255,255,255,0.09); }
.screen-tab[aria-selected="true"].v-soc { border-left-color: var(--ibbis-red); }
.screen-tab[aria-selected="true"].v-match { border-left-color: var(--ibbis-teal); }
.screen-tab[aria-selected="true"].v-clear { border-left-color: #57c08a; }

/* Proof strip under the examples */
/* "How it works" flow diagram (fills the space the example readouts vacated). */
.hiw-diagram { margin: 8px auto 0; max-width: 720px; }
.hiw-diagram img { display: block; width: 100%; height: auto; }

.proofrow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 48px; border-top: 1px solid var(--on-navy-line);
}
.proofrow__item { padding: 26px 28px 4px; border-left: 1px solid var(--on-navy-line); }
.proofrow__item:first-child { border-left: none; }
.proofrow__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-md); color: var(--ibbis-white); margin: 0 0 8px; }
.proofrow__desc { font-family: var(--font-serif); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--on-navy); margin: 0; }
@media (max-width: 820px) {
  .proofrow { grid-template-columns: 1fr; }
  .proofrow__item { border-left: none; border-top: 1px solid var(--on-navy-line); padding-top: 22px; }
  .proofrow__item:first-child { border-top: none; }
}

/* ---------- Steps (get started) ---------- */
.steps { display: grid; gap: 20px; max-width: 820px; margin: 0 auto; }
.step {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center;
  background: var(--ibbis-white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 28px 30px;
}
/* Big index numeral — get-started steps + pick-your-path rows */
.step__num, .steps--options .step__num, .path-num {
  font-family: var(--font-display); font-weight: 200; font-size: 2.5rem;
  line-height: 1; color: var(--ibbis-teal); letter-spacing: 0.02em;
}
.step__body h3 { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg); margin: 0 0 6px; color: var(--ibbis-navy); }
.step__body p { margin: 0; font-size: var(--fs-sm); color: var(--grey-muted); }
.step__action { justify-self: end; }
/* Options variant: no numbers, so these read as alternative ways to start, not sequential steps */
.steps--options .step { grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.steps--options .step:has(.step__num) { grid-template-columns: auto 1fr auto; }
.steps--options .step__body h3 { font-size: var(--fs-lg); margin: 0 0 6px; }
.steps--options .step__body p { font-size: var(--fs-sm); line-height: var(--lh-normal); margin: 0; }

/* ---------- Know-your-customer box ---------- */
.kyc-box {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  max-width: 820px; margin: 8px auto 0; padding: 40px 44px;
  background: var(--ibbis-white); border: 1px solid var(--border); text-decoration: none;
  transition: border-color var(--dur-med) var(--ease-out);
}
.kyc-box:hover { border-color: var(--ibbis-navy); }
.kyc-box h3 { margin: 8px 0; }
.kyc-box p { margin: 0; color: var(--grey-muted); max-width: 46ch; }
.kyc-box__cta {
  flex: 0 0 auto; font-weight: 700; font-size: var(--fs-xs);
  color: var(--ibbis-red); white-space: nowrap;
}
@media (max-width: 620px) {
  .kyc-box { flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 26px; }
}

/* ---------- Stat row (big numbers) ---------- */
/* Hairlines follow the program card grids: vertical spines between columns,
   which become horizontal rules once the grid stacks. */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ibbis-navy); border-bottom: 1px solid var(--ibbis-navy);
}
.stat { position: relative; overflow: hidden; background: var(--ibbis-white); padding: 34px 28px 30px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--ibbis-navy); }
/* First cell of each row has no spine; rows after the first gain a rule above. */
.stat:nth-child(3n+1) { border-left: none; }
.stat:nth-child(n+4) { border-top: 1px solid var(--ibbis-navy); }
/* Hover accent, same treatment as the program card grids: a red rule grows in
   along the top edge to mark which cell the pointer is on. */
.stat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--prog-accent, var(--ibbis-red)); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out); pointer-events: none;
}
.stat:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .stat::before { transition: none; } }
.stat__num {
  font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: 0.95;
  color: var(--ibbis-navy); letter-spacing: -0.01em;
}
.stat__unit { color: var(--ibbis-teal); font-size: 0.5em; font-weight: 700; margin: 0 0.04em; letter-spacing: 0; }
.stat__desc { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--grey-muted); }
/* Stacks at the same 900px the .grid-3 card grid does, so both sections
   drop their vertical spines together. */
@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: none; border-top: 1px solid var(--ibbis-navy); }
  .stat:first-child { border-top: none; }
}
.stats-note { max-width: 760px; margin: 56px auto 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: var(--fs-sm); line-height: 1.6; color: var(--grey-muted); }

/* ---------- Timeline (static, editorial — dark on light tint) ---------- */
.timeline { position: relative; max-width: 720px; margin: 8px auto 0; padding: 4px 0; }
.timeline__list { list-style: none; margin: 0; padding: 0; }
/* base spine */
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px;
  background: rgba(var(--navy-rgb),0.16);
}
.tl-item { position: relative; padding: 0 0 32px 44px; }
.tl-item:last-child { padding-bottom: 4px; }
.tl-marker {
  position: absolute; left: 2px; top: 3px; width: 18px; height: 18px; border-radius: var(--radius-full);
  box-sizing: border-box; background: var(--ibbis-teal); border: 2px solid var(--ibbis-teal);
}
.tl-date { font-weight: 700; font-size: var(--fs-xxs); letter-spacing: var(--tracking-caps-l); color: var(--ibbis-teal); margin: 0 0 6px; }
.tl-title { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg); line-height: 1.3; color: var(--ibbis-navy); margin: 0 0 6px; }
.tl-desc { font-size: var(--fs-sm); line-height: 1.6; color: var(--grey-muted); margin: 0; }
/* hover — marker + date shift to red */
.tl-item .tl-marker, .tl-item .tl-date { transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.tl-item:hover .tl-marker { background: var(--ibbis-red); border-color: var(--ibbis-red); }
.tl-item:hover .tl-date { color: var(--ibbis-red); }

/* ---------- Quote blocks ---------- */
.quote {
  border-left: 3px solid var(--ibbis-red); padding: 6px 0 6px 22px; margin: 40px auto; max-width: 820px;
}
.quote p { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--ibbis-navy); margin: 0 0 10px; }
.quote cite { font-style: normal; font-weight: 700; font-size: var(--fs-xs); color: var(--grey-muted); }
.section--navy .quote p { color: var(--ibbis-white); }
.section--navy .quote cite { color: var(--on-navy); }

/* Quote paired with a partner logo tile (get started · Dynegene) */
.quote-row { display: flex; align-items: center; gap: 30px; max-width: 820px; margin: 56px auto; }
.quote-logo { flex: 0 0 220px; background: var(--ibbis-white); border-radius: var(--radius-md); padding: 26px 28px; display: flex; align-items: center; justify-content: center; }
.quote-logo img, .quote-logo object { width: 100%; height: auto; }
.quote-row .quote { margin: 0; }
/* The wordmark is a 5:1 lockup, so once the desktop two-column layout goes it
   costs most of the row width for little value. Hidden at the same 900px the
   other grids collapse; the quote's cite still credits Dynegene. */
@media (max-width: 900px) {
  .quote-logo { display: none; }
}
@media (max-width: 620px) {
  .quote-row { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* Pick your path — editorial numbered rows (navy hairlines, red hover accent) */
.path-rows { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--ibbis-navy); border-bottom: 1px solid var(--ibbis-navy); }
.path-row { position: relative; display: grid; grid-template-columns: 78px 1fr auto; gap: 30px; align-items: center; padding: 30px 6px 30px 22px; }
.path-row + .path-row { border-top: 1px solid var(--ibbis-navy); }
.path-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ibbis-red); transform: scaleY(0); transform-origin: top; transition: transform var(--dur-med) var(--ease-out); }
.path-row:hover::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .path-row::before { transition: none; } }
.path-row h3 { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg); margin: 0 0 6px; color: var(--ibbis-navy); }
.path-row p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--grey-muted); max-width: 54ch; }
.path-row .btn { margin-right: 16px; min-width: 190px; text-align: center; }
@media (max-width: 620px) {
  .path-row { grid-template-columns: auto 1fr; }
  .path-row .btn { grid-column: 1 / -1; justify-self: start; margin-right: 0; }
}

/* Sub-section label inside a page section */
.subsection-title {
  font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-lg);
  color: var(--ibbis-navy); text-align: center; margin: 0 0 8px;
}
.subsection-intro { max-width: 720px; margin: 0 auto 32px; text-align: center; color: var(--grey-muted); font-size: var(--fs-md); }

/* Centered muted closing note under a section (replaces repeated inline styles) */
.section-note { max-width: 720px; margin: 32px auto 0; text-align: center; color: var(--grey-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__art { order: -1; max-width: 360px; justify-self: center; margin-top: 0; margin-bottom: 0; }
  .hero__art--diagram { max-width: 480px; }
  /* Stacked: the copy's desktop nudge onto the circle's centre line would just
     add 60px to the row gap, so drop it. Same selector as the rule it undoes,
     since :has() outweighs a bare .hero__copy. */
  .hero__inner:has(.hero__art:not(.hero__art--diagram)) .hero__copy { margin-top: 0; }
  .grid-3, .logo-cols { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 48px 1fr; }
  .steps--options .step { grid-template-columns: 1fr; }
  .step__action { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 620px) {
  .section { padding: 60px 0; }
  .container, .nav__inner, .hero__inner, .site-footer__inner { padding-left: var(--container-px-sm); padding-right: var(--container-px-sm); }
  .nav__links { gap: 16px; }
  .title { font-size: var(--fs-2xl); }
  .grid-2, .site-footer__inner { grid-template-columns: 1fr; }
}