/* ============================================================================
   testing/genetic · dna.css · the page sheet for "Genetic testing"

   Scoped to `.dna` on <body>, loaded last, so a bad rule here breaks one URL.

   THE ARGUMENT. The page reads like an instrument: the science is set on a
   laboratory ink ground, every decision the reader has to make is set on white
   paper, and the page alternates between the two. Nothing is decorative that
   is not also carrying a reading.

   Motion, section by section:
     · the hero card with a figures bar
     · a list on the left whose picture is held on the right
     · a comparison table that arrives row by row
     · cards that lift, with an arrow foot
     · a photograph that drifts against the scroll

   TYPE is on the Band's ladder, which is the store's own: the two tone
   `.ph-display` for every statement,
   600 weight names, 17px body, 15px floor, one family.

   COPY RULE, page wide: no dashes, no connecting hyphens, no all caps.
   ========================================================================== */

.dna {
  /* grounds */
  --d-ink:     #050912;
  --d-ink-2:   #0b1226;
  --d-paper:   #ffffff;
  --d-tint:    var(--gl-tint-sunk);

  /* rules and inks */
  --d-line:    rgba(16, 33, 75, .12);
  --d-line-d:  rgba(255, 255, 255, .13);
  --d-dim:     rgba(255, 255, 255, .3);
  --d-body-d:  rgba(255, 255, 255, .72);

  /* the signal. Navy on paper, a lifted step of it on ink, because the brand
     navy disappears against #050912. */
  --d-accent:  var(--ph-accent);
  --d-lit:     #93a9ff;
  --d-bloom:   rgba(96, 126, 255, .42);

  --d-ease:    cubic-bezier(.16, 1, .3, 1);
  --d-gut:     var(--ph-margin);

  background: var(--d-paper);
}

/* the page's own container, the site measure */
.dna .dna-wrap {
  width: 100%; max-width: calc(var(--ph-content-max) + var(--d-gut) * 2);
  margin-inline: auto; padding-inline: var(--d-gut); box-sizing: border-box;
}
.dna .dna-read-wrap { max-width: calc(980px + var(--d-gut) * 2); }

/* ---------------------------------------------------------------------------
   1 · THE LADDER · the Band's sizes, stated once
   ------------------------------------------------------------------------ */
.dna .ph-display { font-size: clamp(40px, 5.6vw, 84px); }
.dna .ph-display.is-hero { margin: 16px 0 0; font-size: clamp(38px, 5.2vw, 76px); }
.dna .ph-solid { font-size: clamp(32px, 3.6vw, 52px); }

.dna .dna-label {
  margin: 0; font-size: 16px; line-height: 1.3; font-weight: 500;
  letter-spacing: .01em; color: var(--phenome-blue-500);
}
.dna .on-ink .dna-label,
.dna .dna-on-ink .dna-label { color: #fff; }

.dna .dna-lede {
  margin: 20px 0 0; max-width: 62ch;
  font-size: clamp(18px, 1.35vw, 22px); line-height: 1.5; color: var(--ph-tone-body);
}
.dna .dna-on-ink .dna-lede { color: var(--d-body-d); }
.dna .dna-centre { margin-inline: auto; text-align: center; }

.dna .dna-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dna .dna-actions.is-centre { justify-content: center; }
/* on ink the primary control is white, because the brand navy on #050912 is a
   pill the reader has to hunt for */
.dna .dna-on-ink .btn { background: #fff; color: var(--ink-900) !important; }
.dna .dna-on-ink .btn:hover { background: var(--phenome-blue-100); }
.dna .dna-on-ink .btn.ghost {
  background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .34);
}
.dna .dna-on-ink .btn.ghost:hover { background: rgba(255, 255, 255, .12); border-color: transparent; }

.dna .dna-link {
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  font-size: 17px; font-weight: 500; color: #fff !important; text-decoration: none !important;
}
.dna .dna-link::after {
  content: ''; width: 16px; height: 16px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5L12 8l-3.5 3.5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .3s var(--d-ease);
}
.dna .dna-link:hover::after { transform: translateX(4px); }

/* the one reveal, keyed to a class set before first paint */
.dna-js .dna .dna-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity .85s ease, transform 1.05s var(--d-ease);
}
.dna-js .dna .dna-up.is-in { opacity: 1; transform: none; }
.dna-js .dna .dna-up.d1 { transition-delay: .07s; }
.dna-js .dna .dna-up.d2 { transition-delay: .14s; }
.dna-js .dna .dna-up.d3 { transition-delay: .21s; }

/* ---------------------------------------------------------------------------
   2 · HERO · one card, two halves: the copy column on the closing card's
   aurora navy, the laboratory slides edge to edge on the right
   ------------------------------------------------------------------------ */
.dna .dna-hero { position: relative; background: var(--d-paper); }
/* ONE CARD, TWO HALVES (2026-09-23 redesign). The old hero had three blocks
   on three alignments: a centred headline, a framed photograph floating top
   right, and the figures alone at the foot. Now the card is split down the
   middle. The left half is a column whose first line (the headline) and last
   line (the figures) sit on the card's own top and bottom padding; the right
   half is the photograph itself, edge to edge, with no frame of its own. */
.dna .dna-hero-card {
  --hero-pad: clamp(56px, 7vw, 104px);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(640px, calc(100svh - var(--ph-nav-h, 64px)), 880px);
  display: flex; flex-direction: column;
  border-radius: 0 0 clamp(16px, 1.6vw, 26px) clamp(16px, 1.6vw, 26px);
  color: #fff;
  background: radial-gradient(70% 140% at 12% 50%, #1d3d98 0%, #0a1e57 60%, #071641 100%);
}
/* the SAME ground as the closing card (§ 11): the aurora film under the
   card's radial navy, laid over it as a translucent scrim */
.dna .dna-hero-film {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.dna .dna-hero-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 140% at 12% 50%, rgba(29, 61, 152, .55) 0%, rgba(10, 30, 87, .62) 60%, rgba(7, 22, 65, .78) 100%);
}
.dna .dna-hero-split { flex: 1; display: flex; }
/* half the page measure less the gutter, so on any width the copy stops
   the same distance short of the photograph's edge */
.dna .dna-hero-copy {
  width: calc(50% - clamp(40px, 5vw, 80px));
  display: flex; flex-direction: column; justify-content: space-between; gap: 56px;
  padding-block: var(--hero-pad) clamp(40px, 4.4vw, 64px);
}
.dna .dna-hero-copy .dna-lede { margin-top: 26px; color: rgba(255, 255, 255, .84); max-width: 46ch; }

/* the laboratory: the right half of the card, full height, no frame */
/* overflow clips the slow 1.06 settle, which otherwise spills a sliver of
   the picture past the half line onto the navy */
.dna .dna-hero-plate { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; margin: 0; overflow: hidden; background: #0a1e57; }
.dna .dna-hero-plate img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s ease, transform 6s linear;
}
.dna .dna-hero-plate img.on { opacity: 1; transform: scale(1); }
/* the progress bar: small, quiet, in the bottom right corner */
.dna .dna-slide-dots {
  position: absolute; z-index: 1; right: clamp(20px, 2vw, 32px); bottom: clamp(20px, 2vw, 32px);
  display: flex; gap: 6px; width: 84px; opacity: .8;
}
/* on a desktop the site's fixed design system launcher sits in the window's
   bottom right, over this corner whenever the card fills the screen */
@media (min-width: 1024px) { .dna .dna-slide-dots { right: 104px; bottom: 44px; } }
.dna .dna-slide-dots i {
  position: relative; flex: 1; height: 2px; overflow: hidden;
  border-radius: 99px; background: rgba(255, 255, 255, .34);
  box-shadow: 0 0 0 .5px rgba(5, 12, 36, .12);
}
.dna .dna-slide-dots i::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: #fff;
  transform: scaleX(0); transform-origin: left center;
}
.dna .dna-slide-dots i.is-done::after { transform: scaleX(1); }
.dna .dna-slide-dots i.on::after { animation: dna-dot-fill var(--slide-ms, 5000ms) linear forwards; }
@keyframes dna-dot-fill { to { transform: scaleX(1); } }

.dna .dna-figs { display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; list-style: none; }
/* three across always: the numbers never break, their captions wrap */
.dna .dna-figs li { flex: 1 1 auto; padding: 0 clamp(12px, 1.5vw, 26px); border-left: 1px solid rgba(255, 255, 255, .18); }
.dna .dna-figs li:first-child { padding-left: 0; border-left: 0; }
.dna .dna-figs b {
  display: block; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.04; white-space: nowrap;
  font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.dna .dna-figs span { display: block; margin-top: 8px; font-size: 17px; line-height: 1.35; color: rgba(255, 255, 255, .72); }

.dna-js .dna .dna-hero-head > *,
.dna-js .dna .dna-hero-plate,
.dna-js .dna .dna-figs {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s ease, transform 1.15s var(--d-ease);
}
.dna-js .dna .dna-hero-plate { transform: none; }
.dna-js .dna .dna-hero.is-in .dna-hero-head > *,
.dna-js .dna .dna-hero.is-in .dna-hero-plate,
.dna-js .dna .dna-hero.is-in .dna-figs { opacity: 1; transform: none; }
.dna-js .dna .dna-hero.is-in .dna-hero-head > :nth-child(2) { transition-delay: .09s; }
.dna-js .dna .dna-hero.is-in .dna-hero-plate { transition-delay: .15s; }
.dna-js .dna .dna-hero.is-in .dna-figs { transition-delay: .3s; }

/* stacked: copy, figures, then the laboratory across the foot of the card */
@media (max-width: 1023px) {
  .dna .dna-hero-card { min-height: 0; }
  .dna .dna-hero-copy { width: 100%; gap: 44px; padding-block: clamp(48px, 9vw, 72px) 40px; }
  .dna .dna-hero-plate { position: relative; width: 100%; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .dna .dna-figs li { padding: 0 10px; }
  .dna .dna-figs b { font-size: clamp(22px, 6.6vw, 26px); }
  .dna .dna-figs span { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   3 · WHAT A GENE IS · the definition beside the helix. 2026-09-23 by
   request: no pin and no word by word lighting, the section simply scrolls.
   ------------------------------------------------------------------------ */
.dna .dna-gene { background: var(--d-paper); padding-block: clamp(90px, 10vw, 150px); }
.dna .dna-gene-grid {
  display: grid; align-items: center; width: 100%;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(30px, 5vw, 80px);
}
.dna .dna-gene-h { margin-bottom: clamp(22px, 2.4vw, 34px); }
.dna .dna-gene-p {
  margin: 0; max-width: 34ch;
  font-size: clamp(21px, 1.9vw, 28px); line-height: 1.45; font-weight: 500; letter-spacing: -0.012em;
  color: var(--ink-900);
}
/* the helix is shot on its own grey sweep, so it sits in a frame rather than
   being blended into the paper */
.dna .dna-gene-art {
  position: relative; justify-self: center; width: min(100%, 540px);
  aspect-ratio: 1; border-radius: clamp(16px, 1.6vw, 24px); overflow: hidden;
}
.dna .dna-gene-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .dna .dna-gene-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dna .dna-gene-art { width: min(100%, 440px); justify-self: start; }
  .dna .dna-gene-p { max-width: none; font-size: clamp(19px, 4.4vw, 24px); }
}

/* ---------------------------------------------------------------------------
   4 · THE FOUR TESTS · a proof bento (ring-lab bdx.css § 7), four kits side
   by side. Here the paper is above and the ink of "What you can
   learn" is below, so the same ramp is turned over and the section becomes
   the passage from one to the other. The heading therefore sits on paper and
   takes the ink variant of the two tone display.
   ------------------------------------------------------------------------ */
.dna .dna-four {
  position: relative; margin-bottom: -1px;
  padding: clamp(70px, 8vw, 110px) 0 clamp(80px, 9vw, 130px);
  background: linear-gradient(180deg, #fff 0%, #eef1f7 30%, #9aa3bd 56%, #2b3558 78%, var(--d-ink) 100%);
}
.dna .dna-four-h { margin: 0; }
.dna .dna-bento { margin-top: clamp(28px, 3vw, 44px); display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The kits are rendered on a flat #e4e4e4 sweep, so the card IS that ground:
   the picture has no edge inside it, and the words sit under the picture on
   the same grey instead of over the product. */
.dna .dna-bento-card {
  --kit-ground: #e4e4e4;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 28px; overflow: hidden; background: var(--kit-ground);
  color: var(--ink-900) !important; text-decoration: none !important;
}
.dna .dna-bento-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.dna .dna-bento-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--d-ease);
}
.dna .dna-bento-card:hover .dna-bento-media img { transform: scale(1.04); }
.dna .dna-bento-copy { padding: 6px 26px 28px; }
.dna .dna-bento-n { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--phenome-blue-500); font-variant-numeric: tabular-nums; }
.dna .dna-bento-copy h3 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.dna .dna-bento-copy p { margin: 12px 0 0; max-width: 36ch; font-size: 18px; line-height: 1.5; color: var(--ph-tone-body); }
.dna .dna-bento-card:focus-visible { outline: 2px solid var(--ph-focus, #0071e3); outline-offset: 3px; }
@media (max-width: 820px) { .dna .dna-bento { grid-template-columns: minmax(0, 1fr); } }

/* THE ACCORDION. One number, --dna-open, flips 0 to 1 on the card that is
   open, and every property that moves is computed from it, so the width, the
   picture and the type all travel on the same 620ms. At rest the first card
   is open, so the row never greets the reader as four equal slivers. Each
   render is a closed box on the left and an open one on the right: a closed
   card frames the closed box, and opening it walks the frame across to show
   what is inside. Only for a real pointer on a wide screen; below that, and
   on touch, the grid above shows every card whole. */
@media (min-width: 1025px) and (hover: hover) {
  .dna .dna-bento { display: flex; align-items: stretch; height: clamp(520px, 44vw, 640px); }
  .dna .dna-bento-card {
    --dna-open: 0;
    flex: 1 1 0; flex-grow: calc(1 + var(--dna-open) * 1.6);
    transition: flex-grow .62s var(--d-ease);
  }
  .dna .dna-bento:not(:has(.dna-bento-card:hover)):not(:has(.dna-bento-card:focus-visible)) .dna-bento-card.is-big,
  .dna .dna-bento-card:hover,
  .dna .dna-bento-card:focus-visible { --dna-open: 1; }
  .dna .dna-bento-media { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
  .dna .dna-bento-media img,
  .dna .dna-bento-card:hover .dna-bento-media img {
    object-position: calc(22% + var(--dna-open) * 28%) 50%;
    transform: scale(calc(1.02 - var(--dna-open) * .02));
    transition: object-position .62s var(--d-ease), transform .62s var(--d-ease);
  }
  /* the copy block keeps one height, so the picture above never jumps */
  .dna .dna-bento-copy { flex: none; height: 188px; box-sizing: border-box; }
  .dna .dna-bento-copy h3 {
    font-size: calc(clamp(20px, 1.6vw, 24px) + var(--dna-open) * 6px);
    transition: font-size .62s var(--d-ease);
  }
  .dna .dna-bento-copy p {
    width: min(36ch, 30vw);
    opacity: var(--dna-open);
    transform: translateY(calc((1 - var(--dna-open)) * 12px));
    transition: opacity .45s var(--d-ease) .06s, transform .62s var(--d-ease);
  }
}

/* ---------------------------------------------------------------------------
   5 · NINE READINGS · the list travels, its picture is held beside it, and a
   rail fills to say how far through the nine the reader is
   ------------------------------------------------------------------------ */
.dna .dna-read { position: relative; background: var(--d-ink); color: #fff; }
/* padding-block, not the shorthand: these elements are also .dna-wrap, whose
   padding-inline is the page margin and must survive */
.dna .dna-read-head { padding-block: clamp(90px, 10vw, 150px) clamp(20px, 3vw, 46px); }
.dna .dna-read-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 90px); padding-bottom: clamp(80px, 9vw, 140px);
}
.dna .dna-read-list { position: relative; }
.dna .dna-read-item {
  min-height: 68vh; max-width: 540px; display: flex; flex-direction: column; justify-content: center;
  /* .5, not .26 (2026-10-09, accessibility check): the waiting items' words
     fell to about 1.3:1 on black. */
  opacity: .7; transition: opacity .5s ease;
}
.dna .dna-read-item.on { opacity: 1; }
.dna .dna-read-n {
  font-size: 17px; line-height: 1; font-weight: 600; letter-spacing: .04em;
  color: var(--d-lit); font-variant-numeric: tabular-nums;
}
.dna .dna-read-item:not(.on) .dna-read-n { color: #c4c4c9; }
.dna .dna-read-t {
  margin: 18px 0 0; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.05;
  font-weight: 600; letter-spacing: -0.02em; color: #fff;
}
.dna .dna-read-d { margin: 18px 0 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--d-body-d); }
.dna .dna-read-rail { position: absolute; right: -2px; top: 0; bottom: 0; width: 2px; background: var(--d-line-d); }
.dna .dna-read-rail i { position: absolute; left: 0; top: 0; width: 2px; height: var(--rail, 0%); background: var(--d-lit); }
.dna .dna-read-rail i::after {
  content: ''; position: absolute; left: -4px; bottom: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--d-lit); box-shadow: 0 0 0 6px rgba(147, 169, 255, .18);
}

.dna .dna-read-hold { position: sticky; top: 16vh; height: 68vh; }
.dna .dna-vis {
  position: absolute; inset: 0; border-radius: clamp(16px, 1.6vw, 24px); overflow: hidden;
  background: radial-gradient(120% 90% at 28% 18%, #1b2547, #070c1c 72%);
  box-shadow: inset 0 0 0 1px var(--d-line-d);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(22px) scale(.985);
  transition: opacity .6s ease, transform .85s var(--d-ease);
}
.dna .dna-vis.on { opacity: 1; transform: none; }
.dna .dna-vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* two of the nine are drawings, not photographs: one is navy line art on white,
   one is white type on transparency. Both are set to contain, on their own ground. */
.dna .dna-vis.is-plate { background: #fff; }
.dna .dna-vis.is-plate img,
.dna .dna-vis.is-plain img { object-fit: contain; padding: clamp(20px, 2.4vw, 38px); box-sizing: border-box; }
.dna .dna-vis-c {
  position: absolute; left: clamp(16px, 1.6vw, 24px); bottom: clamp(16px, 1.6vw, 24px);
  margin: 0; padding: 9px 16px; border-radius: 99px;
  font-size: 15px; line-height: 1.2; color: #fff;
  background: rgba(7, 12, 30, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dna .dna-vis.is-plate .dna-vis-c { background: rgba(16, 33, 75, .82); }
@media (max-width: 899px) {
  .dna .dna-read-grid { grid-template-columns: minmax(0, 1fr); }
  .dna .dna-read-hold { top: calc(var(--ph-nav-h) + 12px); height: 46vh; order: -1; z-index: 2; margin-bottom: 26px; }
  .dna .dna-read-item { min-height: 54vh; max-width: none; }
  .dna .dna-read-rail { display: none; }
}

/* ---------------------------------------------------------------------------
   6 · WHY IT MATTERS · the same five areas, read twice. Each row fills from
   the left as it crosses the window, which is the whole argument of the
   section drawn once: the difference is when you look, not what you look at.
   ------------------------------------------------------------------------ */
.dna .dna-shift { padding: clamp(90px, 10vw, 150px) 0 clamp(90px, 10vw, 150px); background: var(--d-paper); }
.dna .dna-shift-stage { margin-top: clamp(48px, 5.4vw, 86px); }
.dna .dna-shift-h {
  margin: 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25;
  font-weight: 600; letter-spacing: -0.012em; color: var(--ink-900);
}
.dna .dna-shift-keys {
  display: flex; justify-content: space-between; gap: 16px;
  margin: clamp(22px, 2.4vw, 34px) 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--d-line);
}
.dna .dna-shift-k {
  font-size: 17px; line-height: 1.3; font-weight: 500; color: var(--ink-400);
  transition: color .5s ease;
}
.dna .dna-shift-k.is-to { color: var(--d-accent); font-weight: 600; }
.dna .dna-shift-rows { margin: 0; padding: 0; list-style: none; }
.dna .dna-shift-row {
  position: relative; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px);
  padding: clamp(20px, 2vw, 30px) 0; border-bottom: 1px solid var(--d-line);
  overflow: hidden;
}
/* the fill is a band of the tint, then the navy edge that leads it */
.dna .dna-shift-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, rgba(32, 58, 133, .06), rgba(32, 58, 133, .12));
}
.dna .dna-shift-row::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 1;
  left: calc(var(--p, 0) * 100%); width: 2px; background: var(--d-accent);
  opacity: calc(min(1, var(--p, 0) * 6) * (1 - max(0, var(--p, 0) - .94) * 16));
}
.dna .dna-shift-dot {
  position: relative; z-index: 2; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--phenome-blue-100); box-shadow: inset 0 0 0 1px rgba(32, 58, 133, .2);
  transition: background .4s ease, box-shadow .4s ease;
}
.dna .dna-shift-row.is-done .dna-shift-dot {
  background: var(--d-accent); box-shadow: 0 0 0 5px rgba(32, 58, 133, .12);
}
.dna .dna-shift-t {
  position: relative; z-index: 2; flex: 1;
  font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; font-weight: 500;
  letter-spacing: -0.012em; color: var(--ink-400); transition: color .45s ease;
}
.dna .dna-shift-row.is-done .dna-shift-t { color: var(--ink-900); font-weight: 600; }
.dna .dna-shift-mark {
  position: relative; z-index: 2; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--d-accent) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .5s var(--d-ease);
}
.dna .dna-shift-row.is-done .dna-shift-mark { opacity: 1; transform: none; }
@media (max-width: 560px) { .dna .dna-shift-t { font-size: 17px; } }

/* ---------------------------------------------------------------------------
   7 · THE PHOTOGRAPH · "Off the grid" (ring-lab lab.css § 7): a
   fixed picture seen through a clipped window. The section is the window,
   clip-path clips the fixed layers to it, so the light screens above and
   below scroll over a garden that never moves. dna.js drives --tint (the
   dark deepening as the window fills the screen) and --tint-copy (the lede
   arriving once it is nearly full). No ancestor of the fixed layers may carry
   a transform, or they stop being fixed: no .dna-up in here.
   ------------------------------------------------------------------------ */
.dna .dna-band {
  position: relative; height: 100vh; min-height: 640px; clip-path: inset(0);
  color: #fff; background: var(--d-ink);
}
.dna .dna-band-img { position: fixed; inset: 0; transform: scale(1.12) translateY(-15px); }
.dna .dna-band-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dna .dna-band-tint { position: fixed; inset: 0; background: #000; opacity: var(--tint, 0); }
.dna .dna-band-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 var(--d-gut);
}
.dna .dna-band-text .ph-display { align-items: center; }
.dna .dna-band-lede {
  max-width: 62ch; margin-inline: auto; font-size: clamp(18px, 1.35vw, 22px);
  color: rgba(255, 255, 255, .84);
  opacity: var(--tint-copy, 1); transform: translateY(calc((1 - var(--tint-copy, 1)) * 20px));
}

/* ---------------------------------------------------------------------------
   8 · WHOLE GENOME SEQUENCING · the table, our column raised out of it
   ------------------------------------------------------------------------ */
.dna .dna-cmp { padding: clamp(90px, 10vw, 150px) 0 clamp(90px, 10vw, 150px); background: var(--d-tint); }
.dna .dna-table {
  position: relative; max-width: 1080px; margin: 0 auto;
}
/* the panel that raises the third column, sized off the first column's width so
   it lands exactly on the column edge */
.dna .dna-table::before {
  content: ''; position: absolute; z-index: 0; top: -14px; bottom: -14px; right: 0;
  width: calc((100% - var(--cmp-k, 30%)) / 2);
  border-radius: clamp(14px, 1.4vw, 20px); background: var(--d-paper);
  box-shadow: 0 40px 70px -46px rgba(10, 18, 51, .4), inset 0 0 0 1px rgba(32, 58, 133, .14);
}
.dna .dna-tr {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--cmp-k, 30%) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start; border-bottom: 1px solid var(--d-line);
}
.dna .dna-tr:last-child { border-bottom: 0; }
.dna .dna-tr > * { padding: clamp(18px, 1.7vw, 24px) clamp(14px, 1.4vw, 22px); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; }
.dna .dna-tr > :first-child {
  display: flex; align-items: center; gap: 12px; padding-left: 0;
  font-weight: 600; color: var(--ink-900);
}
.dna .dna-tr > :nth-child(2) { color: var(--ph-tone-body); }
.dna .dna-tr > :nth-child(3) { color: var(--ink-900); font-weight: 500; }
.dna .dna-tr.is-head > * {
  padding-block: 14px; font-size: 17px; font-weight: 500; color: var(--ink-400);
  border-bottom: 1px solid rgba(32, 58, 133, .18);
}
.dna .dna-tr.is-head > :nth-child(3) { color: var(--d-accent); font-weight: 600; }
/* the row icons, one drawn family on a pale disc */
.dna .dna-ic {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(145deg, #eef2fc, #dfe6f7);
  box-shadow: inset 0 0 0 1px rgba(32, 58, 133, .08);
}
.dna .dna-ic svg {
  width: 22px; height: 22px; fill: none;
  stroke: var(--d-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 860px) {
  .dna .dna-table::before { display: none; }
  .dna .dna-tr { grid-template-columns: minmax(0, 1fr); border-bottom: 0; padding-bottom: 18px; }
  .dna .dna-tr + .dna-tr { border-top: 1px solid var(--d-line); padding-top: 18px; }
  .dna .dna-tr.is-head { display: none; }
  .dna .dna-tr > * { padding: 4px 0; }
  .dna .dna-tr > :nth-child(2)::before,
  .dna .dna-tr > :nth-child(3)::before {
    content: attr(data-k); display: block; margin-bottom: 4px;
    font-size: 15px; font-weight: 500; color: var(--ink-400);
  }
  .dna .dna-tr > :nth-child(3) {
    margin-top: 10px; padding: 14px 16px; border-radius: 14px;
    background: var(--d-paper); box-shadow: inset 0 0 0 1px rgba(32, 58, 133, .14);
  }
  .dna .dna-tr > :nth-child(3)::before { color: var(--d-accent); }
}

/* ---------------------------------------------------------------------------
   9 · ILLUMINA · the sequencer held on the left, the standards on the right
   ------------------------------------------------------------------------ */
.dna .dna-part {
  position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center; background: var(--d-ink); color: #fff; overflow: clip;
}
.dna .dna-part-media { position: relative; align-self: stretch; min-height: clamp(380px, 46vw, 680px); }
.dna .dna-part-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the scrim has to REACH the ink at the seam, not stop just short of it, or the
   photograph ends on a visible vertical edge */
.dna .dna-part-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(92deg, rgba(5, 9, 18, .26) 24%, rgba(5, 9, 18, .84) 74%, var(--d-ink) 100%);
}
.dna .dna-part-copy {
  padding: clamp(70px, 8vw, 128px) var(--d-gut) clamp(70px, 8vw, 128px) clamp(24px, 3.4vw, 64px);
  max-width: calc(var(--ph-content-max) / 2 + var(--d-gut)); box-sizing: border-box;
}
.dna .dna-part-copy .dna-label { margin-bottom: 18px; }
/* the column is half the page, so the full display clamp would set three lines
   of 80 point type against a four line paragraph */
.dna .dna-part-copy .ph-display { text-align: left; font-size: clamp(36px, 4.2vw, 64px); }
.dna .dna-part-h {
  margin: clamp(40px, 4.4vw, 68px) 0 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25;
  font-weight: 600; letter-spacing: -0.012em; color: #fff;
}
.dna .dna-std { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.dna .dna-std li {
  display: flex; align-items: center; gap: 14px; padding: 15px 0;
  border-top: 1px solid var(--d-line-d); font-size: 19px; line-height: 1.4; color: rgba(255, 255, 255, .88);
}
.dna .dna-std li::before {
  content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(147, 169, 255, .16) no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%2393a9ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 899px) {
  .dna .dna-part { grid-template-columns: minmax(0, 1fr); }
  .dna .dna-part-media { min-height: clamp(280px, 56vw, 420px); }
  .dna .dna-part-media::after { background: linear-gradient(180deg, rgba(5, 9, 18, .2) 40%, rgba(5, 9, 18, .96)); }
  .dna .dna-part-copy { max-width: none; padding-inline: var(--d-gut); padding-top: clamp(40px, 6vw, 60px); }
}

/* ---------------------------------------------------------------------------
   10 · THE FOUR CARDS · the range, priced, with an arrow foot
   ------------------------------------------------------------------------ */
.dna .dna-shop { padding: clamp(90px, 10vw, 150px) 0 clamp(90px, 10vw, 150px); background: var(--d-paper); }
.dna .dna-shop-head { text-align: center; }
.dna .dna-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px);
  margin-top: clamp(44px, 5vw, 76px);
}
.dna .dna-card {
  display: flex; flex-direction: column; padding: 14px 14px 20px;
  border-radius: clamp(16px, 1.4vw, 22px); background: var(--d-tint);
  color: inherit !important; text-decoration: none !important;
  transition: transform .55s var(--d-ease);
}
/* by request the card keeps its pale blue on hover and gains no outline and
   no shadow; the photograph's slow zoom and the arrow are what say it is live */
.dna .dna-card:hover { transform: translateY(-6px); }
.dna .dna-card-media {
  position: relative; border-radius: clamp(10px, 1vw, 14px); overflow: hidden;
  background: var(--phenome-blue-100); aspect-ratio: 4 / 3;
}
.dna .dna-card-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--d-ease);
}
.dna .dna-card:hover .dna-card-media img { transform: scale(1.04); }
.dna .dna-card-t {
  margin: clamp(20px, 1.8vw, 26px) 0 0; padding-inline: 6px;
  font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; font-weight: 600;
  letter-spacing: -0.012em; color: var(--ink-900);
}
.dna .dna-card-d { margin: 10px 0 0; padding-inline: 6px; font-size: 18px; line-height: 1.5; color: var(--ph-tone-body); }
.dna .dna-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: auto 0 0; padding: clamp(24px, 2.2vw, 34px) 6px 0;
}
/* four names, one of which runs to two lines: hold the row so the ledes under
   them start level */
@media (min-width: 1024px) { .dna .dna-card-t { min-height: 2.4em; } }
.dna .dna-card-p {
  margin: 0; padding: 0;
  font-size: clamp(20px, 1.6vw, 24px); line-height: 1.1; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.dna .dna-card-go {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--phenome-blue-100); transition: background .4s ease, transform .4s var(--d-ease);
}
.dna .dna-card-go svg { width: 15px; height: 15px; fill: none; stroke: var(--d-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dna .dna-card:hover .dna-card-go { background: var(--d-accent); transform: translateX(3px); }
.dna .dna-card:hover .dna-card-go svg { stroke: #fff; }
@media (max-width: 1023px) { .dna .dna-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .dna .dna-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   11 · THE CLOSE · supplements/nad's closing card (nad.css § 10), ported as
   comprehensive-genomic did: the aurora film under the card's own radial
   navy, laid over it as a translucent scrim, the kit standing on the left.
   It sits on the shop section's paper, so it takes no top padding of its own.
   ------------------------------------------------------------------------ */
.dna .dna-close { padding: 0 0 clamp(56px, 6vw, 96px); background: var(--d-paper); }
.dna .dna-close-bleed { width: 100%; max-width: 1536px; margin-inline: auto; padding-inline: var(--d-gut); box-sizing: border-box; }
.dna .dna-close-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 6vw, 110px);
  padding: clamp(56px, 7vw, 110px) clamp(28px, 8vw, 150px); border-radius: 32px; color: #fff;
  background: radial-gradient(70% 140% at 12% 50%, #1d3d98 0%, #0a1e57 60%, #071641 100%);
}
.dna .dna-close-film {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.dna .dna-close-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 140% at 12% 50%, rgba(29, 61, 152, .55) 0%, rgba(10, 30, 87, .62) 60%, rgba(7, 22, 65, .78) 100%);
}
.dna .dna-close-kit {
  width: clamp(200px, 22vw, 320px); height: auto;
  filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .35));
}
.dna .dna-close .dna-close-h { font-size: clamp(38px, 4.4vw, 66px); }
.dna .dna-close-lede { margin: 18px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, .86); }
.dna .dna-close .dna-actions { margin-top: 28px; }
/* nad's closing button: white fill, the brand navy for its ink */
.dna .dna-close .btn { min-width: 180px; justify-content: center; color: var(--d-accent) !important; }
@media (max-width: 1024px) {
  .dna .dna-close-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .dna .dna-close .dna-actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dna .dna-close-film, .dna .dna-hero-film { display: none; }
  .dna .dna-hero-card { background-image: url("/site/assets/video/hero-aurora.webp"); background-size: cover; }
  .dna .dna-close-card { background-image: url("/site/assets/video/hero-aurora.webp"); background-size: cover; }
  .dna-js .dna .dna-up,
  .dna-js .dna .dna-hero-head > *,
  .dna-js .dna .dna-hero-plate,
  .dna-js .dna .dna-figs { opacity: 1; transform: none; transition: none; }
  .dna .dna-card, .dna .dna-card-media img, .dna .dna-vis,
  .dna .dna-hero-plate img { transition: opacity .01s; transform: none; }
  .dna .dna-slide-dots i.on::after { animation: none; transform: scaleX(1); }
  .dna .dna-bento-card, .dna .dna-bento-media img,
  .dna .dna-bento-copy h3, .dna .dna-bento-copy p { transition: none; }
}

/* ---- the product bar ---------------------------------------------------------
   Past the hero the nav gives way to shared.js's product bar, set as on the
   ring's page (pdp.css § the swap): the same glass, a round picture of the kits
   from the closing card, the page's name, and Buy, which opens the health tests
   page at this kind of test. The hero names all three (data-ph-bar). */
.dna .ph-bar,
.dna .ph-bar.on {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dna .ph-bar { background: var(--gl-tint-overlay); }
}
.dna .ph-bar-inner { gap: 14px; justify-content: flex-start; }
.dna .ph-bar-thumb {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; flex: none; display: block;
  background: var(--gl-tint-sunk);
  box-shadow: inset 0 0 0 1px #10214b14;
}
.dna .ph-bar-txt {
  min-width: 0; flex: 1 1 auto;
  display: flex; align-items: baseline; gap: 12px;
}
.dna .ph-bar .btn.small { flex: none; margin-left: auto; }
.dna .ph-bar-name { color: #1d1d1f; }
.dna .ph-bar-name:hover { color: var(--ph-accent-link); }
@media (max-width: 560px) { .dna .ph-bar-inner { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .dna .ph-bar { transform: none; } }

/* ---- the overview's own parts ------------------------------------------------
   The hero's eyebrow and two buttons, the four kits' kickers and "Explore",
   the before and after flow above the five areas, the sequencer's caption,
   the standards' names, the cards' "Explore". Additive; nothing above moves. */
.dna .dna-hero-head .dna-label { margin-bottom: 14px; }
.dna .dna-hero-head .dna-actions { margin-top: 26px; }

.dna .dna-bento-n em { margin-left: 12px; font-style: normal; font-weight: 500; color: var(--ink-600); }
.dna .dna-bento-go {
  display: inline-block; margin-top: 14px;
  font-size: 16px; font-weight: 600; color: var(--phenome-blue-500);
}
@media (min-width: 1025px) and (hover: hover) { .dna .dna-bento-copy { height: 236px; } }

/* ---------------------------------------------------------------------------
   6b · WHY IT MATTERS · the Comprehensive Genomic page's "Read it once"
   screen (designexplore cg.css, cg-ess). The track is a screen and a bit
   taller than the stage, the stage is pinned, and the card inside grows from
   .86 with a corner to the full screen with none (dna.js, --ess-s and
   --ess-rad). The photograph is scaled back by the same amount so only the
   frame moves. The panel carries the before and after as two timelines of
   three, the dull one first, ours lit.
   ------------------------------------------------------------------------ */
.dna .dna-ess { background: var(--d-paper); }
.dna .dna-ess-track { position: relative; height: calc(70vh + 100svh); }
.dna .dna-ess-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.dna .dna-ess-hero {
  position: relative; overflow: clip; isolation: isolate; color: #fff;
  width: 100%; height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(96px, 9vw, 136px) clamp(24px, 4vw, 72px) clamp(24px, 3vw, 48px);
  border-radius: var(--ess-rad, 0px);
  transform: scale(var(--ess-s, 1)); transform-origin: 50% 50%;
}
.dna .dna-ess-bg {
  position: absolute; left: 0; top: -8%; z-index: -2;
  width: 100%; height: 116%; object-fit: cover; object-position: 88% 50%;
  scale: calc(1 / var(--ess-s, 1));
}
/* navy at the head for the statement, clear through the pair on the sand,
   navy again at the foot under the glass; a deeper veil at the upper left
   keeps the words clear of the bright sky */
.dna .dna-ess-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 66% at 0% 4%, rgba(10, 30, 87, .8) 0%, rgba(10, 30, 87, .55) 45%, rgba(10, 30, 87, 0) 100%),
    linear-gradient(rgba(10, 30, 87, .46) 0%, rgba(10, 30, 87, .08) 38%, rgba(10, 30, 87, .55) 100%);
}
.dna .dna-ess-copy .ph-display { max-width: 20ch; }
.dna .dna-ess-copy { text-shadow: 0 1px 14px rgba(5, 15, 50, .45); }
/* the held back line on the photograph, as the reference's: white, let down */
.dna .dna-ess-copy .ph-display.ph-display > span.ph-display-lead { color: rgba(255, 255, 255, .74); }
.dna .dna-ess-sub {
  margin: 18px 0 0; max-width: 50ch;
  font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .88);
}

.dna .dna-ess-panel {
  margin-top: 40px; padding: clamp(10px, 1.2vw, 18px) clamp(24px, 3vw, 48px);
  border-radius: 24px;
  /* a navy veil under the white so the dull row still reads over the bright room */
  background: linear-gradient(180deg, rgba(10, 30, 87, .14), rgba(10, 30, 87, .3)), rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
.dna .dna-flow-row {
  display: grid; grid-template-columns: clamp(170px, 15vw, 220px) minmax(0, 1fr);
  align-items: start; gap: 24px; padding: clamp(20px, 2.2vw, 30px) 0;
}
.dna .dna-flow-row + .dna-flow-row { border-top: 1px solid rgba(255, 255, 255, .16); }
.dna .dna-flow-k {
  margin: 0; padding-top: 22px;
  font-size: 17px; line-height: 1.3; font-weight: 600; color: rgba(255, 255, 255, .76);
}
.dna .dna-flow-row.is-ours .dna-flow-k { padding-top: 16px; }
.dna .dna-ess .dna-chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 2px 13px;
  border: 1px solid #fff; border-radius: 99px; color: #fff;
}
/* each row is a line through three stops: the stop above, the words below */
.dna .dna-flow-steps {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin: 0; padding: 0; list-style: none;
}
.dna .dna-flow-steps::before {
  content: ''; position: absolute; left: 5px; right: 0; top: 5px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .34) 0 4px, transparent 4px 9px);
}
.dna .dna-flow-row.is-ours .dna-flow-steps::before {
  height: 2px; top: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .5), #fff);
}
.dna .dna-flow-steps li {
  position: relative; padding-top: 30px; max-width: 26ch;
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.35; font-weight: 500; color: rgba(255, 255, 255, .8);
}
.dna .dna-flow-steps li::before {
  content: ''; position: absolute; left: 0; top: 0; box-sizing: border-box;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(10, 30, 87, .6);
}
.dna .dna-flow-row.is-ours .dna-flow-steps li { font-weight: 600; color: #fff; }
.dna .dna-flow-row.is-ours .dna-flow-steps li::before {
  border: 0; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 0 18px rgba(170, 196, 255, .9);
}

@media (max-width: 1180px) {
  .dna .dna-flow-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dna .dna-flow-k, .dna .dna-flow-row.is-ours .dna-flow-k { padding: 0 0 16px; }
}
/* the phone: no pin, no growth, a rounded card as tall as it needs, and each
   timeline turned to run down the left */
@media (max-width: 760px) {
  .dna .dna-ess { padding: 24px 0 0; }
  .dna .dna-ess-track { height: auto; }
  .dna .dna-ess-stage { position: static; height: auto; overflow: visible; padding-inline: var(--d-gut); }
  .dna .dna-ess-hero {
    height: auto; min-height: 640px; border-radius: 28px; transform: none;
    padding: 40px 20px 20px;
  }
  .dna .dna-ess-bg { scale: none; object-position: 72% 50%; }
  .dna .dna-ess-panel { padding: 4px 20px; border-radius: 20px; }
  .dna .dna-flow-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dna .dna-flow-steps::before,
  .dna .dna-flow-row.is-ours .dna-flow-steps::before {
    left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .34) 0 4px, transparent 4px 9px);
  }
  .dna .dna-flow-row.is-ours .dna-flow-steps::before {
    left: 4.5px; width: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, .5), #fff);
  }
  .dna .dna-flow-steps li { padding: 0 0 0 30px; max-width: none; font-size: 17px; }
  .dna .dna-flow-steps li::before { top: 4px; }
}
.dna .dna-shift > .dna-shift-stage:first-child { margin-top: 0; }

.dna figure.dna-part-media { margin: 0; }
.dna .dna-part-cap {
  position: absolute; z-index: 1; left: var(--d-gut); bottom: clamp(20px, 2.4vw, 36px);
  font-size: 14px; font-weight: 500; letter-spacing: .01em; color: rgba(255, 255, 255, .8);
}
.dna .dna-std li b { flex: none; min-width: 8.5em; font-weight: 600; color: #fff; }
.dna .dna-std li span { color: rgba(255, 255, 255, .72); }
@media (max-width: 560px) {
  .dna .dna-std li { flex-wrap: wrap; row-gap: 2px; }
  .dna .dna-std li span { flex-basis: 100%; padding-left: 38px; }
}

.dna .dna-card-more { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--d-accent); }

/* ---- the hero title and the comparison ---------------------------------------
   The hero title is one size throughout, "Every Answer" over "Begins in Your
   Genes", two lines and no more: the lead keeps its dimmer tone, not its
   smaller step, and each line holds together. */
.dna .dna-hero-head .ph-display.is-hero { font-size: clamp(31px, 4vw, 60px); line-height: 1.04; }
.dna .dna-hero-head .ph-display.is-hero .ph-display-lead { font-size: 1em; line-height: inherit; }
.dna .dna-hero-head .ph-display.is-hero > span { white-space: nowrap; }

/* The comparison, set as websitelab's NAD+ "How it compares" (ndx.css § 5):
   the navy band, the paragraph on the left, a glass table on the right
   with Whole genome sequencing lifted on a lighter bar under a white chip, the
   rows arriving one after another. The paragraph stands above as the section's
   opening line, set large and centred, and the table runs the full width
   beneath it. */
.dna .dna-cmp.is-glass {
  position: relative; overflow: clip; color: #fff;
  background: radial-gradient(80% 110% at 20% 100%, #1a3890 0%, #0a1e57 58%, #071641 100%);
}
/* a soft light over the paragraph, so the opening line reads as the lit part of the band */
.dna .dna-cmp.is-glass::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 70%; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgba(120, 160, 255, .16), transparent 70%);
}
.dna .dna-cmp.is-glass .dna-cmp-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(56px, 6vw, 88px); justify-items: center;
}
.dna .dna-cmp.is-glass .dna-cmp-lede {
  margin: 0; max-width: 46ch; text-align: center; text-wrap: balance;
  font-size: clamp(21px, 1.75vw, 26px); line-height: 1.5; letter-spacing: -.012em; font-weight: 500;
  color: rgba(255, 255, 255, .88);
}
.dna .dna-cmp.is-glass .dna-table {
  --pad: clamp(20px, 2.4vw, 32px); --cmp-k: 24%;
  width: 100%; max-width: 1180px; margin: 0; padding: 18px var(--pad); border-radius: 28px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.dna .dna-cmp.is-glass .dna-table::before {
  top: 14px; bottom: 14px; right: var(--pad); border-radius: 18px;
  width: calc((100% - var(--pad) * 2) * (1 - .24) / 2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.dna .dna-cmp.is-glass .dna-tr { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.dna .dna-cmp.is-glass .dna-tr:last-child { border-bottom: 0; }
.dna .dna-cmp.is-glass .dna-tr > * { font-size: 17px; line-height: 1.45; padding-inline: clamp(16px, 1.8vw, 28px); }
.dna .dna-cmp.is-glass .dna-tr > :first-child { padding-left: 0; }
.dna .dna-cmp.is-glass .dna-tr > :first-child { color: #fff; font-weight: 600; }
.dna .dna-cmp.is-glass .dna-tr > :nth-child(2) { color: rgba(255, 255, 255, .66); }
.dna .dna-cmp.is-glass .dna-tr > :nth-child(3) { color: #fff; font-weight: 600; }
.dna .dna-cmp.is-glass .dna-tr.is-head > * { color: rgba(255, 255, 255, .82); font-size: 16px; font-weight: 600; border-bottom: 0; }
.dna .dna-cmp.is-glass .dna-chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 2px 12px;
  border: 1px solid #fff; border-radius: 99px; color: #fff;
}
.dna .dna-cmp.is-glass .dna-ic { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.dna .dna-cmp.is-glass .dna-ic svg { stroke: #fff; }
@media (max-width: 860px) {
  .dna .dna-cmp.is-glass .dna-cmp-grid { gap: 40px; }
  .dna .dna-cmp.is-glass .dna-cmp-lede { font-size: 20px; text-align: left; justify-self: start; }
  .dna .dna-cmp.is-glass .dna-tr > * { padding-inline: 0; }
  .dna .dna-cmp.is-glass .dna-tr > :nth-child(3) { padding-inline: 16px; }
  .dna .dna-cmp.is-glass .dna-table { --pad: 18px; }
  .dna .dna-cmp.is-glass .dna-tr + .dna-tr { border-top: 1px solid rgba(255, 255, 255, .12); }
  .dna .dna-cmp.is-glass .dna-tr { border-bottom: 0; }
  .dna .dna-cmp.is-glass .dna-tr > :nth-child(2)::before,
  .dna .dna-cmp.is-glass .dna-tr > :nth-child(3)::before { color: rgba(255, 255, 255, .6); }
  .dna .dna-cmp.is-glass .dna-tr > :nth-child(3) {
    background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  }
}
@media (max-width: 860px) {
  .dna .dna-cmp.is-glass .dna-tr.is-head + .dna-tr { border-top: 0; padding-top: 4px; }
}

/* The flow's two labels at 4.5:1 or better on white (2026-10-09,
   accessibility check: #86868b was 3.6:1). */
.dna .dna-shift-k:not(.is-to) { color: #6e6e73; }