/* ============================================================================
   science · the Science page

   The page tells Phenome Longevity's own genetics story, in its own words and
   with its own photography (phenomelongevity.com/pages/genetic-testing-
   explained): what a gene is, what the four tests read, the nine readings a
   genome gives up, why any of it matters for longevity, what whole genome
   sequencing is and how it differs from a targeted panel, who sequences it, how
   a kit works, which test to take, and what the ring reads on top of it.

   TYPE, RAISED 2026-09-16 BY REQUEST. The page was set at 14, 15 and 16 almost
   everywhere below its headings, which is a reference manual's ladder, not a
   page anybody reads standing up. The body rung is 19 now, the second rung is
   17, and 14 has gone entirely. The headings did not move: they were already
   large, and making them larger would only have restored the same gap.

     lede        clamp(19, 24)   the sentence under a heading
     body        19/1.62         everything a reader is meant to read
     second      17/1.55         captions, counts, notes
     label       17/600          field names and kickers

   One family. The contrast a second face used to draw — the held back half of a
   statement against the half that lands — is drawn in COLOUR by the kit's
   .ph-display. See phenome-glass.css § 3. Copy rule: no dashes, no all caps.

   MODULES REBUILT 2026-09-16, on supplements/nad: § 6b is that page's compare
   band, § 7 its image card beside a dark card, § 8 its step strip. § 5 was its
   timeline for part of the same day and is back to the pinned photograph.

   Scoped to `.sci` on <body>. Motion that starts hidden is keyed to `.sci-js`,
   set on <html> before first paint, so a page without script is the page.
   ========================================================================== */

.sci {
  /* The page ground is white. A tint this pale reads as a wash over a whole
     page rather than as a surface, so the cool blues stay where they mean
     something: cards, photo plates, recesses. Nothing large. */
  --sci-paper: #fff;
  --sci-card: #e6ebf4;
  --sci-ink: #0a1233;
  --sci-night: #0b1024;
  --sci-grey: #5f6680;
  --sci-line: rgba(10, 18, 51, .12);
  --sci-sunk: #f5f7fb;             /* the recess the steps and the flow sit on */
  --sci-studio: #eef1f8;           /* the ground the kit photographs are shot on */
  --sci-ease: cubic-bezier(.16, 1, .3, 1);
  --sci-gut: clamp(20px, 3.3vw, 48px);
  --sci-max: 1344px;
  background: var(--sci-paper);
  color: var(--sci-ink);
}
.sci main { overflow-x: clip; }
.sci .sci-wrap { max-width: var(--sci-max); margin: 0 auto; padding: 0 var(--sci-gut); }

/* ---- type -------------------------------------------------------------- */
.sci .sci-eyebrow { margin: 0 0 16px; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; color: #203a85; }
.sci .sci-h1 { font-size: clamp(42px, 5.6vw, 80px); }
.sci .sci-h2 { font-size: clamp(36px, 4.7vw, 68px); }
.sci .sci-h3 { font-size: clamp(30px, 3vw, 44px); }
.sci .sci-lede { margin: 24px 0 0; font-size: clamp(19px, 1.45vw, 24px); line-height: 1.6; color: var(--sci-grey); }
.sci .sci-lede + .sci-lede { margin-top: 20px; }

.sci .sci-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 26px; border-radius: 99px; border: 0; cursor: pointer;
  font-size: 17px; font-weight: 500; text-decoration: none !important;
  background: var(--sci-ink); color: #fff !important;
  transition: background .25s ease, transform .3s var(--sci-ease), box-shadow .25s ease;
}
.sci .sci-pill:hover { background: var(--ph-accent, #203a85); }
.sci .sci-pill:active { transform: scale(.97); }
.sci .sci-pill.is-light { background: #fff; color: var(--sci-ink) !important; }
.sci .sci-pill.is-light:hover { background: #e8edf8; }
.sci .sci-pill.is-ghost { background: none; color: var(--sci-ink) !important; box-shadow: inset 0 0 0 1px var(--sci-line); }
.sci .sci-pill.is-ghost:hover { box-shadow: inset 0 0 0 1px var(--sci-ink); background: none; }

/* the round arrow a card carries in its corner */
.sci .sci-arrow {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--sci-ink); color: #fff; flex: none;
  transition: transform .45s var(--sci-ease), background .25s ease;
}
.sci .sci-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* reveal */
.sci-js .sci .sci-up { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform 1.1s var(--sci-ease); }
.sci-js .sci .sci-up.is-in { opacity: 1; transform: none; }
.sci-js .sci .sci-up.d1 { transition-delay: .08s; }
.sci-js .sci .sci-up.d2 { transition-delay: .16s; }
.sci-js .sci .sci-up.d3 { transition-delay: .24s; }

/* ---------------------------------------------------------------------------
   1 · HERO · an inset dark card, the words low left, the helix right
   ------------------------------------------------------------------------ */
.sci .sci-hero { padding: 10px 10px 0; }
.sci .sci-hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(calc(100svh - 64px), 860px);
  border-radius: clamp(14px, 1.4vw, 22px);
  background: radial-gradient(90% 90% at 78% 30%, #1f2d62 0%, var(--sci-night) 62%);
  color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.sci .sci-hero-media { position: absolute; inset: 0 0 0 38%; z-index: -1; }
.sci .sci-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  opacity: .92; transform: scale(calc(1.08 - var(--hero-p, 0) * .08));
}
.sci .sci-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--sci-night) 30%, rgba(11, 16, 36, .2) 70%, rgba(11, 16, 36, .05)); }
/* The eyebrow is gone, so the headline is the first thing in the card and takes
   the top padding the pair used to share. */
.sci .sci-hero-top { padding: clamp(84px, 10vw, 136px) clamp(26px, 3vw, 52px) 0; grid-column: 1; }
.sci .sci-hero-foot {
  grid-column: 1; align-self: end;
  padding: 0 clamp(26px, 3vw, 52px) clamp(30px, 3.4vw, 52px);
}
.sci .sci-hero-foot p { margin: 0; max-width: 34ch; font-size: clamp(18px, 1.3vw, 21px); line-height: 1.6; color: rgba(255, 255, 255, .86); }
.sci .sci-hero .sci-h1 { max-width: 18ch; font-size: clamp(38px, 4.6vw, 70px); }
.sci-js .sci .sci-hero-card { animation: sci-card 1.2s var(--sci-ease) both; }
.sci-js .sci .sci-hero-top > *, .sci-js .sci .sci-hero-foot > * { animation: sci-rise 1s var(--sci-ease) both; }
.sci-js .sci .sci-hero-foot > * { animation-delay: .28s; }
@keyframes sci-card { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sci-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .sci .sci-hero-card { grid-template-columns: minmax(0, 1fr); min-height: 720px; }
  .sci .sci-hero-media { inset: 34% 0 0 0; }
  .sci .sci-hero-media img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
  .sci .sci-hero-shade { background: linear-gradient(180deg, var(--sci-night) 30%, rgba(11, 16, 36, .2) 55%, rgba(11, 16, 36, .88) 82%); }
}

/* ---------------------------------------------------------------------------
   2 · WHAT IS A GENE · the definition, then the four tests it is read across

   The heading takes the narrow column and the two paragraphs the wide one, so
   the section opens on one line of type rather than on a heading with an
   orphaned sentence beside it. The four photographs follow underneath, because
   the second paragraph is what sends a reader to them.
   ------------------------------------------------------------------------ */
.sci .sci-gene { padding: clamp(80px, 9vw, 150px) 0 clamp(70px, 8vw, 120px); }
.sci .sci-gene-head {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 80px); align-items: start;
}
.sci .sci-gene-head .sci-h2 { max-width: 9ch; }
.sci .sci-gene-copy .sci-lede { margin-top: 0; max-width: 56ch; }
@media (max-width: 900px) { .sci .sci-gene-head { grid-template-columns: minmax(0, 1fr); } }

/* ---- the four tests ------------------------------------------------------ */
.sci .sci-topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(44px, 5vw, 72px); }
.sci .sci-topic { display: block; text-decoration: none !important; color: var(--sci-ink) !important; }
.sci .sci-topic-media { display: block; overflow: hidden; border-radius: 10px; background: var(--sci-card); aspect-ratio: 4 / 5; }
.sci .sci-topic-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); transition: transform 1.2s var(--sci-ease); }
.sci-js .sci .sci-topic { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform 1.1s var(--sci-ease); }
.sci-js .sci .sci-topic.is-in { opacity: 1; transform: none; }
.sci-js .sci .sci-topic.d1 { transition-delay: .07s; }
.sci-js .sci .sci-topic.d2 { transition-delay: .14s; }
.sci-js .sci .sci-topic.d3 { transition-delay: .21s; }
.sci .sci-topic.is-in .sci-topic-media img { transform: none; }
.sci .sci-topic:hover .sci-topic-media img { transform: scale(1.05); }
.sci .sci-topic-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.sci .sci-topic-foot b { font-size: clamp(19px, 1.35vw, 22px); font-weight: 500; letter-spacing: -0.01em; }
.sci .sci-topic:hover .sci-arrow { transform: rotate(45deg); background: var(--ph-accent, #203a85); }
@media (max-width: 1000px) { .sci .sci-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sci .sci-topic-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   3 · WHAT DO GENES TELL US · the statement beside the map of a cell

   The map is a transparent plate drawn in the same navy as the page's ink, so
   it wants no card behind it. It sits on the paper and is part of the type.
   No rule above the section: see the note in the markup.
   ------------------------------------------------------------------------ */
.sci .sci-say-sec { padding: clamp(60px, 7vw, 110px) 0 clamp(70px, 8vw, 120px); }
.sci .sci-say-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
}
.sci .sci-say-lead { margin: 30px 0 0; max-width: 34ch; font-size: clamp(22px, 2vw, 32px); line-height: 1.34; letter-spacing: -0.02em; color: var(--sci-ink); }
.sci .sci-say-body { margin: 22px 0 0; max-width: 46ch; font-size: 19px; line-height: 1.62; color: var(--sci-grey); }
.sci .sci-gene-fig { margin: 0; }
.sci .sci-gene-fig img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .sci .sci-say-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   4 · WHAT YOU CAN LEARN · nine readings on a dragged track

   Nine slides is too many for a grid and too few for a list, so they are a
   track: cards of one width, three in the frame and the fourth cut by the
   edge, dragged or paged. The ground, the glow and the card language are
   devices/ring-lab's Phenome Intelligence band, brought over intact so the two
   places in this store where a dark carousel runs read as one idea.
   ------------------------------------------------------------------------ */
.sci .sci-learn {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #03050c 0%, #03050c 84%, var(--sci-night) 100%);
  padding: clamp(74px, 7.4vw, 124px) 0 clamp(60px, 6vw, 96px);
}
/* the band is lit from its own edges, not from a light source in the picture */
.sci .sci-learn-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: inset 0 0 90px 24px rgba(79, 114, 217, .55), inset 0 0 220px 60px rgba(138, 174, 255, .16);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  animation: sci-glow 7s ease-in-out infinite alternate;
}
.sci .sci-learn-glow::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 38%, rgba(79, 114, 217, .22), transparent 70%);
}
@keyframes sci-glow { from { opacity: .75; } to { opacity: 1; } }

.sci .sci-learn-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(20px, 4vw, 60px); align-items: end; }
.sci .sci-learn-head .sci-h2 { font-size: clamp(34px, 4.2vw, 62px); }
.sci .sci-learn-head p { margin: 0 0 8px; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .76); }

.sci .sci-car { position: relative; margin-top: clamp(34px, 3.6vw, 54px); --card: clamp(268px, 29.7vw, 427px); }
.sci .sci-car-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--sci-gut); scroll-padding-inline: var(--sci-gut);
  scrollbar-width: none; cursor: grab;
}
.sci .sci-car-track::-webkit-scrollbar { display: none; }
.sci .sci-car-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.sci .sci-car-track.is-drag * { pointer-events: none; }
@media (min-width: 1440px) {
  .sci .sci-car-track { padding-inline: calc((100vw - var(--sci-max)) / 2 + var(--sci-gut)); scroll-padding-inline: calc((100vw - var(--sci-max)) / 2 + var(--sci-gut)); }
}

.sci .sci-read { flex: 0 0 auto; width: var(--card); scroll-snap-align: start; }
.sci .sci-read-media {
  position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #0d1531 0%, #060a1a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.sci .sci-read-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.sci .sci-read-media.is-plate { background: #fff; }
.sci .sci-read-media.is-plate img, .sci .sci-read-media.is-plain img { object-fit: contain; padding: clamp(18px, 2.4vw, 34px); box-sizing: border-box; }

/* The count is not a footnote to the title, it is the first word of it: same
   size, same line, set in the blue, hanging so a wrapped title stays square. */
.sci .sci-read-t {
  display: flex; gap: .5em; margin: 22px 0 0; min-height: 2.52em;
  font-size: clamp(21px, 1.6vw, 23px); line-height: 1.26; font-weight: 500; letter-spacing: -0.02em;
}
.sci .sci-read-n { flex: none; color: inherit; font-variant-numeric: tabular-nums; }
.sci .sci-read > p { margin: 16px 0 0; font-size: 17px; line-height: 1.62; color: rgba(255, 255, 255, .76); }
@media (max-width: 860px) {
  .sci .sci-learn-head { grid-template-columns: minmax(0, 1fr); }
  .sci .sci-car { --card: min(82vw, 420px); }
}

/* the two glass keys sit on the media, at its middle, as on ring-lab */
.sci .sci-car-btn {
  position: absolute; top: calc(var(--card) / 2); z-index: 2; margin-top: -22px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .2s ease, opacity .2s ease;
}
.sci .sci-car-btn:hover { background: rgba(255, 255, 255, .26); }
.sci .sci-car-btn[disabled] { opacity: .25; cursor: default; }
.sci .sci-car-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sci .sci-car-btn.is-prev { left: 12px; }
.sci .sci-car-btn.is-next { right: 12px; }
@media (max-width: 860px) { .sci .sci-car-btn { display: none; } }

/* ---- the rail ------------------------------------------------------------
   Nine dots would be nine specks, and nine specks say nothing about how much
   of the set is still to come. So the bar is one bar cut into nine chapters,
   and it fills as the readings arrive in the frame. */
.sci .sci-car-foot { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); margin-top: clamp(28px, 3vw, 44px); }
.sci .sci-car-count { margin: 0; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.sci .sci-car-count b { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.sci .sci-car-count span { font-size: 17px; color: rgba(255, 255, 255, .58); }
.sci .sci-car-rail { flex: 1; display: flex; gap: clamp(5px, .6vw, 9px); }
/* Both the fill and the standing up are one property, transform: the bar is
   drawn at its full 5px and held at --t of that, so nothing here touches
   layout. --f is the fill, written by the script; --t is the thickness. */
.sci .sci-car-seg {
  flex: 1; position: relative; height: 24px; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-appearance: none; appearance: none; --t: .6;
}
.sci .sci-car-seg::before,
.sci .sci-car-seg i {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px;
  border-radius: 99px;
}
.sci .sci-car-seg::before {
  background: rgba(255, 255, 255, .18);
  transform: scaleY(var(--t)); transform-origin: center;
  transition: background .25s ease, transform .35s var(--sci-ease);
}
.sci .sci-car-seg i {
  background: #fff; transform: scaleX(var(--f, 0)) scaleY(var(--t)); transform-origin: left center;
  transition: transform .5s var(--sci-ease);
}
.sci .sci-car-seg:hover::before { background: rgba(255, 255, 255, .4); }
.sci .sci-car-seg.is-on { --t: 1; }
.sci .sci-car-seg:focus-visible { outline: 2px solid var(--phenome-blue-300); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .sci .sci-learn-glow { animation: none; }
  .sci .sci-car-seg i { transition: none; }
}

/* ---------------------------------------------------------------------------
   5 · WHY IT MATTERS · the photograph holds, five cards pass over it

   RESTORED 2026-09-16, by request, from 148ddc3, replacing the NAD style
   timeline that stood here for part of a day. The arrangement is the original;
   the sizes are this page's raised ladder (19 kicker, 18 note, 22 and 17 on
   the cards) rather than the 14 to 16 it first shipped with.
   ------------------------------------------------------------------------ */
.sci .sci-acc { position: relative; height: 240vh; color: #fff; background: var(--sci-night); }
.sci .sci-acc-pin { position: sticky; top: 0; height: 100svh; min-height: 640px; overflow: hidden; }
.sci .sci-acc-bg { position: absolute; inset: 0; }
.sci .sci-acc-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(calc(1.04 + var(--acc-p, 0) * .04));
}
/* The photograph is a bright room, so the scrim carries the whole contrast for
   the headline: a strong left wash for the words, a lighter right one for the
   cards, and a top down pass so nothing floats on a window. */
.sci .sci-acc-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 10, 26, .9) 0%, rgba(6, 10, 26, .74) 26%, rgba(6, 10, 26, .34) 62%, rgba(6, 10, 26, .58) 100%),
    linear-gradient(180deg, rgba(6, 10, 26, .3), transparent 30%, transparent 70%, rgba(6, 10, 26, .3));
}
.sci .sci-acc-in {
  position: relative; height: 100%; max-width: var(--sci-max); margin: 0 auto;
  padding: clamp(50px, 6vw, 88px) var(--sci-gut);
  box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(24px, 4vw, 64px);
}
.sci .sci-acc-copy { display: flex; flex-direction: column; justify-content: space-between; }
.sci .sci-acc-copy .sci-h2 { font-size: clamp(32px, 4.2vw, 60px); max-width: 13ch; }
.sci .sci-acc-note { max-width: 480px; }
.sci .sci-acc-note .sci-eyebrow { margin-bottom: 12px; font-size: 19px; line-height: 1.35; letter-spacing: -0.005em; color: #fff; }
.sci .sci-acc-note p { margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.sci .sci-acc-cards { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.sci .sci-acc-track { display: flex; flex-direction: column; gap: 14px; transform: translateY(var(--acc-y, 0px)); will-change: transform; }
.sci .sci-glass {
  position: relative; padding: 22px 22px 20px; border-radius: 14px; color: #fff;
  background: rgba(16, 24, 56, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
.sci .sci-glass b { display: block; font-weight: 600; font-size: 16px; letter-spacing: .04em; color: #fff; }
.sci .sci-glass p { margin: 10px 0 0; font-size: 22px; line-height: 1.26; font-weight: 400; letter-spacing: -0.015em; }
.sci .sci-glass small { display: block; margin-top: 12px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .74); }
@media (max-width: 860px) {
  .sci .sci-acc { height: auto; }
  .sci .sci-acc-pin { position: static; height: auto; min-height: 0; }
  .sci .sci-acc-in { grid-template-columns: minmax(0, 1fr); padding-block: clamp(56px, 9vw, 80px); }
  .sci .sci-acc-copy { gap: 24px; }
  .sci .sci-acc-cards { -webkit-mask-image: none; mask-image: none; }
  .sci .sci-acc-track { transform: none; }
}

/* ---------------------------------------------------------------------------
   6 · WHOLE GENOME SEQUENCING · the claim
   ------------------------------------------------------------------------ */
.sci .sci-wgs { padding: clamp(80px, 9vw, 140px) 0 clamp(60px, 6vw, 96px); }
.sci .sci-wgs-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.sci .sci-wgs-head .sci-h2 { font-size: clamp(34px, 4.1vw, 60px); }
.sci .sci-wgs-mark { width: 48px; height: auto; display: block; margin-bottom: 20px; }
.sci .sci-wgs-lead { margin: 0; font-size: clamp(19px, 1.4vw, 22px); line-height: 1.6; color: var(--sci-ink); }
.sci .sci-wgs-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 5vw, 80px); }
.sci .sci-wgs-item h3 { margin: 18px 0 0; font-size: 21px; line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; color: var(--sci-ink); }
.sci .sci-wgs-item > p { margin: 8px 0 0; font-size: 17px; line-height: 1.55; color: var(--sci-grey); }
@media (max-width: 860px) {
  .sci .sci-wgs-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sci .sci-wgs-body { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* The picture above each line: one ratio, one radius, cover fitted. */
.sci .sci-shot { margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--sci-card); }
.sci .sci-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--sci-ease); }
.sci .sci-wgs-item:hover .sci-shot img { transform: scale(1.03); }
/* ---------------------------------------------------------------------------
   6b · THE COMPARISON · the NAD page's compare band

   REBUILT 2026-09-16, by request. It was a table on white with a navy block
   painted behind its third column, which made the column the page is arguing
   for the one place on the page a reader had to work to read. Here it is the
   NAD band's arrangement: ink ground, one glass card, and the whole genome
   column lifted inside it by a paler panel and a chip at its head. The rows
   arrive one behind the next when the card does.
   ------------------------------------------------------------------------ */
/* 2026-09-23 by request: the ground is the NAD closing card's, a rounded navy
   card whose colour flows. The genomic hero's aurora film plays under a
   translucent copy of the card's radial navy, so the card keeps its colour and
   only gains the movement; the glass table sits on that and blurs it. */
.sci .sci-cmp-band { padding: clamp(24px, 3vw, 48px) 0 clamp(60px, 6vw, 96px); }
.sci .sci-cmp-card {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding: clamp(44px, 5vw, 80px) clamp(20px, 5vw, 88px) clamp(36px, 4.4vw, 72px); border-radius: 32px;
  background: radial-gradient(80% 120% at 10% 0%, #1d3d98 0%, #0a1e57 60%, #071641 100%);
}
.sci .sci-cmp-film {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.sci .sci-cmp-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 120% at 10% 0%, rgba(29, 61, 152, .5) 0%, rgba(10, 30, 87, .64) 60%, rgba(7, 22, 65, .8) 100%);
}
/* the kit's two tone display, stepped down to the NAD closing card's size */
.sci .sci-cmp-title { margin: 0 0 clamp(32px, 3.4vw, 56px); max-width: 30ch; font-size: clamp(36px, 4.2vw, 64px); }
.sci .sci-cmp-title .ph-display-lead { color: rgba(255, 255, 255, .62); }
.sci .sci-cmp {
  position: relative;
  --cmp-k: clamp(130px, 15vw, 220px);
  --cmp-pad: clamp(16px, 2vw, 32px);
  padding: 12px var(--cmp-pad) 18px; border-radius: 24px;
  background: rgba(7, 18, 58, .28); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
}
/* the paler panel that lifts our column, inset so the card's own edge shows */
.sci .sci-cmp::before {
  content: ''; position: absolute; top: 12px; bottom: 12px; z-index: 0;
  right: var(--cmp-pad); width: calc((100% - var(--cmp-k) - var(--cmp-pad) * 2) / 2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px;
}
.sci .sci-cmp-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--cmp-k) minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.sci .sci-cmp-row > span { padding: 20px clamp(16px, 1.6vw, 26px); font-size: 17px; line-height: 1.55; color: #fff; }
.sci .sci-cmp span i { display: none; }
.sci .sci-cmp-row + .sci-cmp-row { border-top: 1px solid rgba(255, 255, 255, .12); }
.sci .sci-cmp-row.is-head > span { padding-top: 16px; padding-bottom: 18px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: #fff; }
.sci .sci-cmp-row.is-head > span:first-child { padding-left: 0; }
.sci .sci-cmp-chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: 99px; background: #fff; color: #0a1e57;
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.sci .sci-cmp-k { font-size: 19px !important; font-weight: 600; letter-spacing: -0.01em; color: #fff !important; padding-left: 0 !important; }
.sci .sci-cmp-b { font-size: 18px !important; font-weight: 500; color: #fff !important; }
/* the rows arrive behind the card */
.sci-js .sci .sci-cmp .sci-cmp-row:not(.is-head) { opacity: 0; translate: 0 10px; transition: opacity .6s var(--sci-ease), translate .6s var(--sci-ease); }
.sci-js .sci .sci-cmp.is-in .sci-cmp-row { opacity: 1; translate: 0 0; }
.sci-js .sci .sci-cmp.is-in .sci-cmp-row:nth-child(3) { transition-delay: .07s; }
.sci-js .sci .sci-cmp.is-in .sci-cmp-row:nth-child(4) { transition-delay: .14s; }
.sci-js .sci .sci-cmp.is-in .sci-cmp-row:nth-child(5) { transition-delay: .21s; }
.sci-js .sci .sci-cmp.is-in .sci-cmp-row:nth-child(6) { transition-delay: .28s; }
@media (max-width: 860px) {
  .sci .sci-cmp-card { border-radius: 24px; }
  .sci .sci-cmp { padding: 6px 16px 14px; }
  .sci .sci-cmp::before { display: none; }
  .sci .sci-cmp .sci-cmp-row.is-head { display: none; }
  .sci .sci-cmp .sci-cmp-row.is-head + .sci-cmp-row { border-top: 0; }
  .sci .sci-cmp .sci-cmp-row { display: block; padding: 22px 0; }
  .sci .sci-cmp .sci-cmp-row > span { display: block; padding: 0; }
  .sci .sci-cmp span i { display: block; font-style: normal; font-size: 16px; font-weight: 600; letter-spacing: .02em; color: #fff; margin-bottom: 4px; }
  .sci .sci-cmp-k { font-size: 21px; margin-bottom: 16px; }
  .sci .sci-cmp-a { margin-bottom: 16px; }
  .sci .sci-cmp-b { padding: 16px !important; border-radius: 14px; background: rgba(255, 255, 255, .1); }
}

/* ---------------------------------------------------------------------------
   7 · THE PARTNERSHIP · a photograph card beside a dark card

   REBUILT 2026-09-16 on supplements/nad § 2's second row. The photograph is a
   card with its own caption rather than a figure floating on a night ground,
   and the words sit in a dark card beside it with the three things the lab is
   accountable for along its foot.
   ------------------------------------------------------------------------ */
.sci .sci-partner { padding: clamp(60px, 6vw, 96px) 0 clamp(70px, 8vw, 120px); }
.sci .sci-partner-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.sci .sci-partner-fig {
  position: relative; margin: 0; border-radius: 22px; overflow: hidden;
  min-height: 460px; background: var(--sci-card);
}
.sci .sci-partner-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sci .sci-partner-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 24px 22px;
  font-size: 17px; line-height: 1.4; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(8, 12, 30, .8));
}
.sci .sci-partner-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(28px, 3.2vw, 52px); border-radius: 22px;
  background: radial-gradient(90% 120% at 12% 100%, #1a2a62 0%, var(--sci-night) 62%);
  color: #fff;
}
.sci .sci-partner-copy .sci-h3 { font-size: clamp(28px, 2.7vw, 42px); max-width: 17ch; }
.sci .sci-partner-copy p { margin: 24px 0 0; max-width: 52ch; font-size: 19px; line-height: 1.62; color: rgba(255, 255, 255, .8); }
.sci .sci-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.sci .sci-badges li { list-style: none; display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 1.3; color: #fff; }
.sci .sci-badges svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--phenome-blue-200, #c3d0f0); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .sci .sci-partner-row { grid-template-columns: minmax(0, 1fr); }
  .sci .sci-partner-fig { min-height: 320px; }
  .sci .sci-badges { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ---------------------------------------------------------------------------
   8 · HOW THE KITS WORK · four stages, each on its own card

   The four used to be four hairline topped columns with a 13px label over a
   17px line. They are cards on the recess tint now, with the stage number the
   size of a stage number and the sentence the size of a sentence.
   ------------------------------------------------------------------------ */
/* HOW THE KITS WORK is supplements/nad's timeline (2026-09-16): a centred
   head, then the four stages on a rail that fills as the page is read, each
   marker lighting as the fill reaches it, beside a collage. */
.sci .sci-steps-sec { padding: clamp(80px, 8vw, 130px) 0; }
.sci .sci-steps-head { text-align: center; }
.sci .sci-steps-head .ph-display { font-size: clamp(36px, 4.4vw, 64px); }
.sci .sci-steps-head .sci-lede { margin-top: 20px; }
.sci .sci-steps-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--sci-ink) !important;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.sci .sci-steps-link svg { width: 15px; height: 15px; transition: translate .3s var(--sci-ease); }
.sci .sci-steps-link:hover svg { translate: 4px 0; }
.sci .sci-steps-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(40px, 6vw, 110px); align-items: center; margin-top: clamp(48px, 5vw, 80px);
}
.sci .sci-steps { position: relative; padding-left: 48px; }
.sci .sci-rail { position: absolute; left: 5px; top: 18px; width: 1px; background: #d5dbea; }
.sci .sci-rail i { position: absolute; inset: 0; background: var(--sci-ink); transform-origin: top; transform: scaleY(var(--p, 0)); }
.sci .sci-step { position: relative; padding-bottom: 40px; opacity: .34; transition: opacity .5s var(--sci-ease); }
.sci .sci-step::before {
  content: ""; position: absolute; left: -48px; top: 13px; width: 11px; height: 11px; border-radius: 50%;
  background: #c3cadf; transition: background .4s, scale .4s var(--sci-ease);
}
.sci .sci-step.on { opacity: 1; }
.sci .sci-step.on::before { background: var(--sci-ink); scale: 1.2; }
.sci .sci-step-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0;
  font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--sci-ink);
}
.sci .sci-step-pill {
  display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 99px;
  background: var(--sci-ink); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0;
}
.sci .sci-step ul { margin: 14px 0 0; padding-left: 22px; }
.sci .sci-step li { list-style: disc; font-size: 19px; line-height: 1.62; color: var(--sci-grey); }
.sci .sci-steps-foot { margin: 0; font-size: 17px; line-height: 1.5; color: var(--sci-grey); }

.sci .sci-collage { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(16px, 1.4vw, 24px); align-items: start; }
.sci .sci-collage figure { margin: 0; overflow: hidden; background: var(--sci-card); }
.sci .sci-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sci .sci-col-big { position: relative; grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: 24px; }
.sci .sci-col-big img { object-position: 50% 62%; }
.sci .sci-col-big figcaption {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: max-content; max-width: calc(100% - 40px);
  padding: 12px 20px; border-radius: 12px; background: rgba(10, 18, 51, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 17px; line-height: 1.35; font-weight: 600; text-align: center;
}
.sci .sci-col-sm { aspect-ratio: 4 / 3; border-radius: 24px; }
.sci .sci-col-sm img { object-position: 20% 50%; }
.sci .sci-col-circle { aspect-ratio: 1; border-radius: 50%; }
.sci .sci-col-circle img { object-position: 40% 50%; }
@media (max-width: 1024px) {
  .sci .sci-steps-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sci .sci-step { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   11 · THE TEAM · A dark band; the head on the page column; the row of portraits
   starts on that column and runs off the right edge. A card is a 3:4 portrait
   with the name and View full bio written over its foot (2026-09-17, by
   request: the + disc, the sideways panel and the role line are gone; the
   role is still in the bio dialog). Type is this page's ladder: name 24,
   link 17.
   ------------------------------------------------------------------------ */
.sci .sci-team {
  --tm-w: clamp(260px, 21vw, 310px);
  --tm-h: calc(var(--tm-w) * 4 / 3);
  position: relative; padding: clamp(90px, 9vw, 150px) 0 clamp(80px, 8vw, 130px);
  background: var(--sci-night); color: #fff;
}
.sci .sci-team-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(24px, 5vw, 80px); align-items: end; }
.sci .sci-team-head .sci-lede { margin: 0; color: rgba(255, 255, 255, .72); }
.sci .sci-team-track {
  list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; display: flex; gap: 16px;
  padding: 0 max(var(--sci-gut), calc((100% - var(--sci-max)) / 2 + var(--sci-gut)));
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-padding-inline: max(var(--sci-gut), calc((100% - var(--sci-max)) / 2 + var(--sci-gut)));
}
.sci .sci-team-track::-webkit-scrollbar { display: none; }
.sci .sci-tm {
  position: relative; flex: none; height: var(--tm-h); width: var(--tm-w);
  border-radius: 16px; overflow: hidden; background: #1b2140; scroll-snap-align: start;
}
.sci .sci-tm-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--sci-ease); }
.sci .sci-tm:hover .sci-tm-photo { transform: scale(1.03); }
/* The name and the link sit on the portrait itself, on a navy ramp that only
   darkens the lowest third, so the face stays clear. */
.sci .sci-tm-panel {
  position: absolute; inset: auto 0 0; padding: 72px 24px 24px;
  display: flex; flex-direction: column; align-items: flex-start;
  background: linear-gradient(to top, rgba(10, 14, 34, .88) 0%, rgba(10, 14, 34, .6) 45%, rgba(10, 14, 34, 0) 100%);
}
.sci .sci-tm-name { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.sci .sci-tm-more {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 0; border: 0; background: none; cursor: pointer; color: #fff;
  font: inherit; font-size: 17px; line-height: 1.4; font-weight: 600;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.sci .sci-tm-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s var(--sci-ease); }
.sci .sci-tm-more:hover svg { translate: 4px 0; }
.sci .sci-tm-more:focus-visible, .sci .sci-team-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.sci .sci-team-foot { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.sci .sci-team-bar { position: relative; flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.sci .sci-team-bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, .2)); transition: transform .3s ease; }
.sci .sci-team-nav { display: flex; gap: 14px; }
.sci .sci-team-arrow {
  width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; transition: background .2s, opacity .2s;
}
.sci .sci-team-arrow:hover { background: rgba(255, 255, 255, .26); }
.sci .sci-team-arrow:disabled { opacity: .35; cursor: default; background: rgba(255, 255, 255, .08); }
.sci .sci-team-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the full bio */
.sci-bio {
  width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px);
  margin: auto; padding: 0; border: 0; border-radius: 24px; overflow: auto;
  background: #fff; color: #0a1233; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.sci-bio::backdrop { background: rgba(6, 10, 26, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sci-bio[open] { animation: sci-bio-in .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes sci-bio-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.sci-bio-card { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.sci-bio-card > img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block; }
.sci-bio-copy { padding: clamp(32px, 4vw, 56px); }
.sci-bio-name { margin: 0; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; }
.sci-bio-role { margin: 12px 0 24px !important; font-size: 18px !important; line-height: 1.5; color: #3e6ad6 !important; font-weight: 500; }
.sci-bio-copy p { margin: 0 0 16px; font-size: 18px; line-height: 1.65; color: #4a5068; }
.sci-bio-close {
  position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255, 255, 255, .9); color: #0a1233; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.sci-bio-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (max-width: 860px) {
  .sci .sci-team-head { grid-template-columns: minmax(0, 1fr); }
  .sci-bio-card { grid-template-columns: minmax(0, 1fr); }
  .sci-bio-card > img { height: 340px; object-position: 50% 20%; }
}
@media (max-width: 560px) {
  .sci .sci-team { --tm-w: min(78vw, 300px); }
  .sci .sci-team-arrow { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .sci .sci-tm-photo { transition: none; }
}

/* ---------------------------------------------------------------------------
   9 · THE TESTS · the genomic buy page's "Related tests" cards (cg.css .cg-rel):
   a photograph, a navy scrim at the foot, name and price on it, the
   description opening on hover. 2026-09-23: the photographs are the real kits
   (~/Downloads/Assets/Tests/Tests A33, A44, A45, A41, one grey studio set,
   4:5, box in the upper middle, floor extended under the scrim) and all four
   stand in one row at a smaller size. Price two rungs over the reference (17
   to 21), description one (16 to 17).
   ------------------------------------------------------------------------ */
.sci .sci-work { padding: clamp(50px, 5vw, 80px) 0 clamp(80px, 8vw, 130px); text-align: center; }
.sci .sci-work .sci-h2 { max-width: 16ch; margin-inline: auto; }
.sci .sci-rel {
  --sci-rel-ease: cubic-bezier(.2, .8, .2, 1);
  width: min(1240px, 100%); margin: clamp(40px, 5vw, 72px) auto 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.sci .sci-rel-card {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 22px; background: #e4e5e8; isolation: isolate;
  color: #fff !important; text-decoration: none !important;
}
.sci .sci-rel-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--sci-rel-ease);
}
.sci .sci-rel-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(10, 18, 51, .8) 100%);
  transition: background .5s ease;
}
.sci .sci-rel-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 14px 22px; text-align: center;
  display: grid; grid-template-rows: auto auto 0fr auto;
  transition: grid-template-rows .6s var(--sci-rel-ease);
}
.sci .sci-rel-copy h3 { margin: 0; font-size: clamp(18px, 1.3vw, 19px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.sci .sci-rel-price { margin: 6px 0 0; font-size: 21px; line-height: 1.2; font-weight: 600; color: rgba(255, 255, 255, .9); }
.sci .sci-rel-d {
  margin: 0 auto; padding-top: 12px; max-width: 34ch; min-height: 0; overflow: hidden;
  font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .92);
  opacity: 0; transition: opacity .4s ease;
}
.sci .sci-rel-go {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 9px 20px; border-radius: 99px;
  font-size: 15px; font-weight: 600; color: #0a1233;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .3s ease;
}
@media (hover: hover) {
  .sci .sci-rel-card:hover img { transform: scale(1.06); }
  .sci .sci-rel-card:hover .sci-rel-copy { grid-template-rows: auto auto 1fr auto; }
  .sci .sci-rel-card:hover .sci-rel-d { opacity: 1; }
  .sci .sci-rel-card:hover::after { background: linear-gradient(180deg, transparent 22%, rgba(10, 18, 51, .84) 100%); }
  .sci .sci-rel-card:hover .sci-rel-go { background: #fff; }
}
@media (hover: none) {
  .sci .sci-rel-copy { grid-template-rows: auto auto 1fr auto; }
  .sci .sci-rel-d { opacity: 1; }
  .sci .sci-rel-card::after { background: linear-gradient(180deg, transparent 22%, rgba(10, 18, 51, .84) 100%); }
}
.sci .sci-rel-card:focus-visible { outline: 2px solid var(--ph-accent-link, #203a85); outline-offset: 4px; }
@media (max-width: 1000px) {
  .sci .sci-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}
@media (max-width: 520px) {
  .sci .sci-rel { grid-template-columns: minmax(0, 1fr); max-width: 400px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sci .sci-rel-card img, .sci .sci-rel-copy, .sci .sci-rel-d { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sci-js .sci .sci-up, .sci-js .sci .sci-topic { opacity: 1; transform: none; transition: none; }
  .sci-js .sci .sci-hero-card, .sci-js .sci .sci-hero-top > *, .sci-js .sci .sci-hero-foot > * { animation: none; }
  .sci-js .sci .sci-cmp .sci-cmp-row { opacity: 1; translate: 0 0; transition: none; }
  .sci .sci-cmp-film { display: none; }
  .sci .sci-cmp-card { background-image: url("/site/assets/video/hero-aurora.webp"); background-size: cover; }
  .sci .sci-acc-track { transform: none; }
}