/* ============================================================================
   supplements/nad · page sheet, scoped to body.nadp

   Sections: buybox mosaic + accordions, essentials photo panel, benefits timeline,
   formula accordion, dark compare table, kit cards, standards, split FAQ,
   reviews with topics/search/sort, then a closing card. Palette and type are
   Phenome's: navy tokens, the site's Helvetica, #f4f6fb as the one tint.

   Two traps from shared.css shape this file:
   - shared.css reveals `main > section > *` with a transform (0-2-3). Anything
     here that needs its own motion on those elements uses the independent
     `translate` / `rotate` properties so the reveal cannot overwrite it.
   - phenome-glass.css forces text-transform none, so capitals live in markup.
   ========================================================================= */

.nadp {
  --nd-navy: var(--phenome-blue-900, #0a1e57);
  --nd-navy-2: var(--phenome-blue-700, #142b6e);
  --nd-accent: var(--phenome-blue-500, #203a85);
  --nd-soft: var(--phenome-blue-100, #e6e9f2);
  --nd-sunk: var(--gl-tint-sunk, #f4f6fb);
  --nd-sky: #4fb3e8;
  --nd-rule: #203a851f;
  --nd-ink: var(--ph-text-1, #10214b);
  --nd-ink-2: var(--ph-text-2, #4a5578);
  --nd-ease: var(--ease-frosted-out, cubic-bezier(.16, 1, .3, 1));
  --nd-bleed: 1536px;
  --nd-gut: clamp(16px, 1.4vw, 24px);
  --nd-r-lg: 28px;
  --nd-r-md: 20px;
  --nd-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  interpolate-size: allow-keywords;
  background: #fff;
}

.nd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.nadp .nd-wrap {
  width: 100%; margin-inline: auto;
  max-width: calc(var(--ph-content-max, 1260px) + var(--ph-margin, 90px) * 2);
  padding-inline: var(--ph-margin, 90px);
}
.nadp .nd-bleed { width: 100%; max-width: var(--nd-bleed); margin-inline: auto; padding-inline: var(--nd-gut); }
.nadp .nd-sec { padding-block: clamp(72px, 8vw, 128px); }
.nadp .nd-center { text-align: center; }

.nadp .nd-h2 {
  font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 600; color: var(--ink-900); text-wrap: balance;
}

/* .nd-h2 is the page's SOLID heading, the one a short line or a single word
   takes. Anything long enough to break over two lines is set instead in the
   kit's two tone display, .ph-display (phenome-glass.css § 3), which is sized
   down here: the Band page can run it to 132px because it stands alone, this
   page carries copy beside it. */
.nadp .ph-display { font-size: clamp(36px, 4.4vw, 68px); }
.nadp .ph-display.is-left { max-width: 22ch; }

.nadp .nd-sub { margin-top: 20px; font-size: 17px; line-height: 1.5; color: var(--nd-ink); }

.nadp .nd-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--nd-navy);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.nadp .nd-link svg { width: 14px; height: 14px; transition: translate .3s var(--nd-ease); }
.nadp .nd-link:hover svg { translate: 4px 0; }
.nadp .nd-link-light { color: #fff; }

.nadp .nd-ic { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------------------------------------------------------------------
   1 · BUY BOX
   ------------------------------------------------------------------------ */
.nadp main > section.nd-hero { padding: 40px 0 clamp(56px, 6vw, 96px); }
/* THE ROW IS THE PAGE'S OWN COLUMN, 2026-09-16. The mosaic ran edge to edge on
   a 20px gutter while every section under it sits in .nd-wrap, so the hero was
   the one band on the page whose edges lined up with nothing. It takes the
   same max width and margins now, and the frame's left edge is the headings'
   left edge all the way down. */
.nadp .nd-hero-grid {
  width: 100%; margin-inline: auto;
  max-width: calc(var(--ph-content-max, 1260px) + var(--ph-margin, 90px) * 2);
  padding-inline: var(--ph-margin, 90px);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(408px, 32vw, 476px);
  gap: clamp(32px, 3vw, 48px); align-items: stretch;
}

/* ---- the gallery, store/phenometech-ring's hero frame ---------------------
   Five slides rotating on their own, a navy glass pill in the bottom right
   with previous, a dot per slide and next, the current dot filling over the
   slide's dwell.

   THE FRAME IS THE ROW, 2026-09-16. It was a 4:5 crop riding sticky inside a
   stretched cell, which only ever matched the decision column at its top and
   bottom edges: 850px of photograph beside 1471px of copy, with 620px of the
   frame's track left empty as you scrolled. The column beside it is folded now
   (see the buy column's accordion), so the frame drops the ratio, the sticky
   and the viewport cap and simply takes the grid row's height. Whatever the
   reader opens on the right, the two columns are the same height, and the
   photograph gets every pixel of it. `object-fit: cover` on a portrait source
   (1200 x 2133) means the taller frame crops less, not more. */
.nadp .nd-gal { align-self: stretch; min-height: 0; }
.nadp .nd-gal-main {
  position: relative; height: 100%; min-height: 560px; width: 100%;
  border-radius: var(--nd-r-lg); overflow: hidden;
  background: var(--nd-soft); touch-action: pan-y;
}
.nadp .nd-gal-track {
  position: absolute; inset: 0; display: flex;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.nadp .nd-gal-track::-webkit-scrollbar { display: none; }
.nadp .nd-slide { position: relative; flex: 0 0 100%; overflow: hidden; scroll-snap-align: start; }
.nadp .nd-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* slides 0 and 1 are the product shots (2026-09-21), cropped 4:5 already */
.nadp .nd-slide[data-n="0"] > img, .nadp .nd-slide[data-n="1"] > img { object-position: 50% 50%; }
.nadp .nd-slide[data-n="2"] > img { object-position: 50% 80%; }
.nadp .nd-slide[data-n="3"] > img { object-position: 50% 40%; }
.nadp .nd-slide[data-n="4"] > img { object-position: 50% 47%; }
.nadp .nd-slide[data-n="5"] > img { object-position: 50% 34%; }
/* `clip`, not `hidden`, and no snapping once the script stacks the slides:
   with `hidden` the browser scrolls the track to snap onto the translated
   slides and the whole row drifts. */
.nadp .nd-gal-main[data-live] .nd-gal-track { display: block; overflow: hidden; overflow: clip; scroll-snap-type: none; }
.nadp .nd-gal-main[data-live] .nd-slide {
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--o, 0) * 100%), 0, 0);
  transition: transform 760ms cubic-bezier(.65, 0, .25, 1);
}
.nadp .nd-gal-main[data-live] .nd-slide[data-snap] { transition: none; }
.nadp .nd-gal-main[data-live] .nd-slide > * {
  transform: translate3d(calc(var(--o, 0) * -12%), 0, 0) scale(1.02);
  transition: transform 900ms cubic-bezier(.65, 0, .25, 1);
}
.nadp .nd-gal-main[data-live] .nd-slide[data-snap] > * { transition: none; }

.nadp .nd-slide-facts {
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(120% 90% at 20% 0%, var(--nd-navy-2), var(--nd-navy) 70%);
}
/* The panel is sized off the frame, not off the page: in the two column hero
   the frame is now the full height of the decision column, and a 440px card
   floating in 1140px of navy read as a mistake. cqw/cqh let it grow with the
   frame it sits in and stay the same card at every other width. */
@media (min-width: 1181px) { .nadp .nd-gal-main { container-type: size; container-name: ndframe; } }
/* The frame is the row's height only up to what the screen shows under the
   bar: a longer decision column no longer pushes the photograph's foot below
   the fold, and the frame rides along while that column scrolls. */
@media (min-width: 1181px) {
  .nadp .nd-gal-main {
    position: sticky; top: calc(var(--ph-nav-h, 44px) + 20px);
    max-height: calc(100vh - var(--ph-nav-h, 44px) - 60px);
    min-height: min(560px, calc(100vh - var(--ph-nav-h, 44px) - 60px));
  }
}
.nadp .nd-facts {
  display: block; width: min(80%, 440px); padding: 22px 24px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .7);
}
@container ndframe (min-height: 940px) {
  .nadp .nd-facts { width: min(78%, 520px); padding: 30px 34px; }
  .nadp .nd-facts-h { font-size: 34px; padding-bottom: 14px; }
  .nadp .nd-facts-r { padding: 13px 0; font-size: 19px; }
  .nadp .nd-facts-foot { margin-top: 16px; font-size: 16px; }
}
.nadp .nd-facts-h { display: block; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; font-weight: 700; padding-bottom: 10px; border-bottom: 8px solid #fff; }
.nadp .nd-facts-r {
  display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .35); font-size: 17px; line-height: 1.35;
}
.nadp .nd-facts-top { border-bottom-width: 3px; border-bottom-color: #fff; }
.nadp .nd-facts-r b { font-weight: 700; white-space: nowrap; }
.nadp .nd-facts-foot { display: block; margin-top: 12px; font-size: 15px; line-height: 1.45; opacity: .8; }

/* The frame's furniture: a soft top shade, the hold and expand discs top
   right, the pagination pill bottom right. Dark glass with a white glyph, so
   it reads on the bright court and on the navy facts slide alike. */
.nadp .nd-gal-main::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22%; pointer-events: none;
  background: linear-gradient(#0a1e5752, #0a1e5700);
}
.nadp .nd-gal-tools { position: absolute; right: 14px; top: 14px; z-index: 2; display: flex; gap: 9px; }
.nadp .nd-gal-tool {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ffffff2b; background: #0a1e5757; color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.nadp .nd-gal-tool:hover { background: #0a1e5788; }
.nadp .nd-gal-tool:active { transform: scale(.95); }
.nadp .nd-gal-tool:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nadp .nd-gal-tool svg { width: 17px; height: 17px; display: block; }
.nadp .nd-gal-zoom { opacity: 0; }
.nadp .nd-gal-main:hover .nd-gal-zoom, .nadp .nd-gal-zoom:focus-visible { opacity: 1; }
.nadp .nd-gal-hold .i-play { display: none; }
.nadp .nd-gal-hold[data-paused] .i-play { display: block; }
.nadp .nd-gal-hold[data-paused] .i-pause { display: none; }

.nadp .nd-gal-nav {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 6px; border-radius: 99px;
  background: #0a1e5757; color: #fff; box-shadow: inset 0 0 0 1px #ffffff2b;
  -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
}
.nadp .nd-gal-arrow, .nadp .nd-gal-dot {
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 99px;
}
.nadp .nd-gal-arrow { width: 32px; height: 32px; opacity: .85; transition: opacity .2s, background .2s; }
.nadp .nd-gal-arrow:hover { opacity: 1; background: #ffffff1f; }
.nadp .nd-gal-arrow svg { width: 16px; height: 16px; display: block; }
.nadp .nd-gal-dots { display: flex; align-items: center; padding: 0 4px; }
.nadp .nd-gal-dot { width: 16px; height: 22px; }
.nadp .nd-gal-dot i { position: relative; display: block; overflow: hidden; width: 7px; height: 7px; border-radius: 4px; background: #ffffff66; }
.nadp .nd-gal-dot:hover i { background: #ffffffb3; }
.nadp .nd-gal-dot[aria-current="true"] { width: 44px; }
.nadp .nd-gal-dot[aria-current="true"] i { width: 34px; background: #ffffff59; }
.nadp .nd-gal-dot[aria-current="true"] i::after {
  content: ""; position: absolute; inset: 0; background: #fff; border-radius: inherit;
  transform-origin: left center; transform: scaleX(0);
  animation: nd-dwell var(--dwell, 5s) linear forwards;
}
.nadp .nd-gal-main[data-hover] .nd-gal-dot[aria-current="true"] i::after { animation-play-state: paused; }
.nadp .nd-gal-main[data-held] .nd-gal-dot[aria-current="true"] i::after { animation: none; transform: none; }
@keyframes nd-dwell { to { transform: scaleX(1); } }
.nadp .nd-gal-arrow:focus-visible, .nadp .nd-gal-dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* The decision column: shared supp-* rules, re-sized for a narrower track.

   TYPE SCALE. The shared sheet is written for a 620px-wide column on a two-up
   hero; dropped into this 500px track its steps collapse — the price (h2, 48px)
   came out LARGER than the product name (44px), and the spec subtitle (17px)
   larger than the paragraph it introduces (16px). Both inversions are corrected
   here, and nowhere else, so the other 26 supplement pages keep their own sheet.

     44px  name          the one thing that owns the column
     26px  claim         the hook, a step below the name
     21px  stat value    the three proofs, now above body text
     17px  option title / option price
     16px  paragraph
     15px  subtitle      metadata, demoted below body on purpose
     14px  rate · price note · guarantee
     12px  stat label · fine print

   RHYTHM. Four steps instead of one undifferentiated 16-28px band:
     6px  inside a pair (value/label, price/note)
    14px  inside a group (name -> pill -> subtitle -> rating)
    22px  between groups
    26px + a hairline  between the story and the decision.
   The hairline above the price is the only new rule in the column, and it is
   the one that makes "why" and "buy" read as two blocks rather than one list. */
.nadp .nd-buy { padding-top: 8px; }
/* THE REASON THE RHYTHM ABOVE COULD NOT BE SEEN. The column is a flex column,
   so margins do not collapse: every heading and paragraph was adding the UA's
   own margin-bottom (0.67-1em, so 13px under the fine print and 30px under the
   price) on top of the margin-top written here. The spacing therefore scaled
   with each element's font-size instead of with its role — 37px after the name,
   36px after the price, 25px after the guarantee, none of them chosen. Zeroed
   here so the four steps above are the only spacing in the column. */
.nadp .nd-buy > *, .nadp .nd-buy .supp-stat > * { margin-bottom: 0; }
/* THE NAME COMES FIRST, 2026-09-16. The format pill used to open the column,
   so the first thing in the hero was a piece of packaging metadata and the
   product name arrived second. The name owns the column now and the pill sits
   under it with the spec line, where the two of them read as one caption. */
.nadp .nd-buy .supp-name {
  margin-top: 0; font-size: clamp(34px, 2.9vw, 46px); line-height: 1.02; letter-spacing: -.025em;
}
.nadp .nd-buy .supp-badge {
  margin-top: 14px; padding: 0 12px; min-height: 28px;
  font-size: 15px; line-height: 1.2; font-weight: 600; letter-spacing: .04em;
}
/* Non-breaking spaces in the markup keep a middot from opening a line; this
   keeps the whole spec string on one line wherever the column allows it. */
.nadp .nd-buy .supp-subtitle { margin-top: 10px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.nadp .nd-buy .supp-rate { margin-top: 14px; gap: 8px; }
.nadp .nd-buy .supp-stars { font-size: 16px; }
/* max-width off: a 26ch cap inside a 500px track left a ragged right edge with
   nothing beside it. The column IS the measure here. */
.nadp .nd-buy .supp-claim {
  max-width: none; margin-top: 22px;
  font-size: clamp(22px, 1.8vw, 27px); line-height: 1.26; letter-spacing: -.012em;
  text-wrap: balance;
}
.nadp .nd-buy .supp-para { margin-top: 14px; font-size: 16px; line-height: 1.62; max-width: none; }

/* The proof strip. It was a tinted panel, and the tint (#f4f6fb, the site's one
   tint) is close enough to white that on this page it never read as a panel —
   it only pushed the three figures 20px in from the paragraph above them, so
   the column had two left edges. Dropped to a rule and the column's own edge:
   the figures line up with every other line of text, and the hairline here plus
   the one above the price band the column into identity / proof / decision. */
.nadp .nd-buy .supp-stats {
  margin-top: 22px; padding: 18px 0 0; gap: 16px;
  background: none; border-radius: 0; border-top: 1px solid var(--nd-rule);
}
.nadp .nd-buy .supp-stat-v { margin-top: 0; font-size: 21px; line-height: 1.15; letter-spacing: -.015em; }
.nadp .nd-buy .supp-stat-l { margin-top: 5px; font-size: 15px; line-height: 1.3; letter-spacing: .015em; }

/* The decision starts here — hence the rule, and hence a price that no longer
   shouts over the product name. */
.nadp .nd-buy .supp-price {
  width: 100%; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--nd-rule);
  font-size: 30px; line-height: 1.1; letter-spacing: -.02em;
  transition: opacity .2s;
}
.nadp .nd-buy .supp-price.is-swap { opacity: .25; }
.nadp .nd-buy .supp-pnote { margin-top: 6px; font-size: 16px; }
.nadp .nd-buy .supp-opts { margin-top: 18px; gap: 8px; }
.nadp .nd-buy .supp-opt { padding: 13px 16px; }
.nadp .nd-buy .supp-opt-t { font-size: 16px; line-height: 1.3; }
.nadp .nd-buy .supp-opt-s { margin-top: 2px; font-size: 16px; line-height: 1.35; }
.nadp .nd-buy .supp-opt-p { font-size: 17px; line-height: 1.3; }
/* A 469px-wide button 44px tall reads as a bar, not a button. */
.nadp .nd-buy .supp-cta { margin-top: 18px; min-height: 54px; font-size: 17px; font-weight: 600; }
.nadp .nd-buy .supp-gtee { margin-top: 18px; padding: 14px 16px; font-size: 16px; line-height: 1.45; }
.nadp .nd-buy .supp-fine { margin-top: 12px; font-size: 15px; line-height: 1.4; }
.nadp .nd-rate-link { font-size: 15px; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--nd-rule); }
.nadp .supp-opt-badge { font-size: 15px; }
.nadp .nd-rate-link:hover { color: var(--nd-navy); text-decoration-color: currentColor; }

/* Accordions (Benefits / Ingredients and every list below). */
.nadp .nd-acc { width: 100%; }
/* The buy column's four folds carry everything that used to be set out in
   full under the button, so they are the last thing above the cross sell and
   they read as a list of questions, not as fine print. */
/* `name` on the four <details> makes them exclusive, which is also what keeps
   the promise above: one open body is at most ~160px, so the frame beside them
   grows by that and no more. Four open at once would have made it a sliver. */
.nadp .nd-buy-acc { margin-top: 26px; }
.nadp .nd-buy-acc .nd-acc-item > summary { padding: 17px 0; }
.nadp .nd-buy-acc .nd-acc-body > p:first-child { margin-top: 0; }
/* The hook moved inside the first fold, 2026-09-16. At 27px it was the second
   largest thing in the column and it sat above the price doing the work of a
   headline; folded away it becomes the lead sentence of the explanation it was
   always introducing, a step above the body and a step below the summary. */
.nadp .nd-buy-acc .supp-claim {
  margin: 0 0 12px; max-width: none;
  font-size: 20px; line-height: 1.32; letter-spacing: -.008em;
  font-weight: 500; color: var(--nd-navy); text-wrap: pretty;
}
.nadp .nd-buy-acc .supp-gtee { margin-top: 0; }
.nadp .nd-buy-acc .supp-fine { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.nadp .nd-acc-item { border-bottom: 1px solid var(--nd-rule); }
.nadp .nd-acc-item:first-child { border-top: 1px solid var(--nd-rule); }
.nadp .nd-acc-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  padding: 18px 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--nd-navy);
}
.nadp .nd-acc-item > summary::-webkit-details-marker { display: none; }
.nadp .nd-acc-ic { position: relative; flex: none; width: 14px; height: 14px; margin-left: auto; }
.nadp .nd-acc-ic::before, .nadp .nd-acc-ic::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; margin-top: -.75px;
  background: currentColor; border-radius: 2px; transition: rotate .35s var(--nd-ease);
}
.nadp .nd-acc-ic::after { rotate: 90deg; }
.nadp .nd-acc-item[open] > summary .nd-acc-ic::after { rotate: 0deg; }
.nadp .nd-acc-item::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .45s var(--nd-ease), content-visibility .45s allow-discrete;
}
.nadp .nd-acc-item[open]::details-content { block-size: auto; }
.nadp .nd-acc-body { padding: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--nd-ink); }
.nadp .nd-acc-body .nd-link { margin-top: 14px; font-size: 15px; }
.nadp .nd-bullets { padding-left: 20px; }
.nadp .nd-bullets li { list-style: disc; margin-top: 6px; }
.nadp .nd-bullets li::marker { color: var(--nd-accent); }
/* Small headings and their paragraphs inside a folding section ("## " lines). */
.nadp .nd-acc-k { margin: 18px 0 4px; font-size: 16px; font-weight: 600; color: var(--nd-navy); }
.nadp .nd-acc-k:first-child { margin-top: 0; }
.nadp .nd-acc-p { margin: 8px 0 0; }
.nadp .nd-buy-acc .supp-claim + .nd-bullets { margin-top: 14px; }

.nadp .nd-pair {
  display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; width: 100%;
  margin-top: 28px; padding: 14px 18px 14px 14px; border-radius: var(--nd-r-md);
  background: var(--nd-sunk); color: var(--nd-ink); text-decoration: none;
  transition: background .3s;
}
.nadp .nd-pair:hover { background: var(--nd-soft); }
.nadp .nd-pair img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: #fff; }
.nadp .nd-pair-t { display: grid; gap: 4px; font-size: 16px; line-height: 1.4; }
.nadp .nd-pair-t b { font-size: 16px; color: var(--nd-navy); }
.nadp .nd-pair-p { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-weight: 600; font-size: 15px; }
.nadp .nd-pair-go {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 99px;
  border: 1px solid var(--nd-navy); color: var(--nd-navy); font-size: 16px;
}
.nadp .nd-pair:hover .nd-pair-go { background: var(--nd-navy); color: #fff; }

/* ---------------------------------------------------------------------------
   2 · ESSENTIALS
   ------------------------------------------------------------------------ */
.nadp .nd-ess { padding-top: 0; padding-bottom: 0; }
/* The delivery card that closed this section is gone (2026-09-17), so the
   timeline below opens on a tighter break than the page's standard one. */
.nadp .nd-time { padding-top: clamp(48px, 5vw, 80px); }
.nadp .nd-ess-hero {
  position: relative; overflow: clip; border-radius: var(--nd-r-lg);
  min-height: clamp(560px, 44vw, 660px); color: #fff; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(40px, 4vw, 64px) clamp(24px, 3vw, 48px) var(--nd-gut);
}
.nadp .nd-ess-bg {
  position: absolute; left: 0; top: -8%; width: 100%; height: 116%; z-index: -2;
  object-fit: cover; object-position: 50% 47%;
}
.nadp .nd-ess-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 30, 87, .42) 0%, rgba(10, 30, 87, .06) 38%, rgba(10, 30, 87, .5) 100%);
}
.nadp .nd-ess-h { max-width: 20ch; font-size: clamp(32px, 3.8vw, 62px); }
.nadp .nd-ess-panel {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 40px; padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px);
  border-radius: var(--nd-r-md); background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  margin-inline: calc(var(--nd-gut) - clamp(24px, 3vw, 48px));
}
.nadp .nd-ess-panel li { list-style: none; }
.nadp .nd-ess-panel .nd-ic { width: 52px; height: 52px; stroke-width: 1.3; }
.nadp .nd-ess-panel h3 { margin-top: 28px; font-size: 19px; line-height: 1.25; font-weight: 600; color: #fff; }
.nadp .nd-ess-panel p { margin-top: 10px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .86); max-width: 30ch; }

@keyframes nd-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ---------------------------------------------------------------------------
   3 · BENEFITS OVER TIME
   ------------------------------------------------------------------------ */
/* THE TIMELINE ITSELF IS THE KIT'S NOW, phenome-glass.css § 9, promoted out of
   this file on 2026-09-16 so that store/phenometech-ring could take it too.
   Fifty lines left with it — the grid, the rail and its fill, the step and its
   node, the pill, the list, the collage tiles and the caption — and none of
   them are re-stated here, because a second copy is how the ring came to have
   a different one in the first place.

   What is left below is what is true of THIS page and nothing else: where each
   photograph is cropped, and the two sachets leaning on the how to use chip. */
.nadp .ph-tl-big img { object-position: 50% 30%; }
.nadp .ph-tl-sm img { object-position: 50% 82%; }
.nadp .ph-tl-round img { object-position: 50% 40%; }

.nadp .nd-howto-sachet { width: 30px; height: 49px; rotate: -8deg; filter: drop-shadow(0 4px 6px rgba(10, 30, 87, .2)); }
.nadp .nd-howto-sachet + .nd-howto-sachet { margin-left: -26px; rotate: 6deg; }


/* ---------------------------------------------------------------------------
   6 · DELIVERED MONTHLY
   ------------------------------------------------------------------------ */
.nadp .nd-kits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nd-gut); margin-top: clamp(40px, 4vw, 64px); }
.nadp .nd-kit {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 16px;
  padding: 16px; border-radius: var(--nd-r-lg); background: var(--nd-sunk);
}
.nadp .nd-kit-img { border-radius: var(--nd-r-md); overflow: hidden; min-height: 380px; background: var(--nd-soft); }
.nadp .nd-kit-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .9s var(--nd-ease); }
.nadp .nd-kit:hover .nd-kit-img img { scale: 1.04; }
.nadp .nd-kit:first-child .nd-kit-img img { object-position: 50% 42%; }
.nadp .nd-kit:last-child .nd-kit-img img { object-position: 50% 30%; }
.nadp .nd-kit-body { align-self: center; padding: 16px 20px 16px 12px; }
.nadp .nd-kit h3 { font-size: clamp(22px, 1.8vw, 27px); line-height: 1.2; letter-spacing: -.015em; font-weight: 500; color: var(--nd-navy); }
.nadp .nd-kit-sub { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--nd-ink); }
.nadp .nd-kit ul { margin-top: 20px; }
.nadp .nd-kit li { list-style: none; display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.nadp .nd-kit li > span { display: block; }
.nadp .nd-kit-plans li { padding: 0; }
.nadp .nd-kit-plans li > button, .nadp .nd-kit-plans .nd-kit-static {
  display: flex; align-items: center; gap: 14px; width: 100%; padding-block: 12px; text-align: left;
}
.nadp .nd-kit-static > span { display: block; }
.nadp .nd-kit li + li { border-top: 1px solid var(--nd-rule); }
.nadp .nd-kit li svg { flex: none; width: 20px; height: 32px; }
.nadp .nd-kit li svg.nd-kit-tick { width: 20px; height: 20px; margin-block: 6px; color: var(--nd-navy); }
.nadp .nd-kit li b { display: block; font-size: 16px; line-height: 1.3; color: var(--nd-navy); }
.nadp .nd-kit li span, .nadp .nd-kit li button > span { font-size: 16px; line-height: 1.35; color: var(--nd-ink-2); }
.nadp .nd-kit-plans button {
  position: relative; border: 0; background: none; font: inherit; cursor: pointer; border-radius: 12px;
  margin-inline: -10px; width: calc(100% + 20px); padding-inline: 10px 44px;
  transition: background .25s;
}
.nadp .nd-kit-plans button:hover { background: rgba(32, 58, 133, .06); }
.nadp .nd-kit-plans button::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; border: 1px solid var(--ph-line, #203a8529); background: #fff;
}
.nadp .nd-kit-plans button.on::after { border-color: var(--nd-navy); background: radial-gradient(circle, var(--nd-navy) 0 4.5px, #fff 5px); }
.nadp .nd-kit-plans button:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   8 · QUESTIONS
   ------------------------------------------------------------------------ */
/* the list is the shared `.acc.is-faq`; every question is listed */

/* ---------------------------------------------------------------------------
   10 · CLOSE
   ------------------------------------------------------------------------ */
.nadp .nd-end { padding-top: 16px; padding-bottom: clamp(56px, 6vw, 96px); background: #fafbfd; }
.nadp .nd-end-card {
  position: relative; overflow: hidden; 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%, var(--nd-navy) 60%, #071641 100%);
}
/* 2026-09-22 by request: the real bottle replaces the drawn sachet and stands
   still. The navy ground flows: the genomic buy hero's aurora film plays under
   the card's own radial navy, which is laid over it as a translucent scrim so
   the card keeps its colour and only gains the movement. */
.nadp .nd-end-card { isolation: isolate; }
.nadp .nd-end-film {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.nadp .nd-end-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%);
}
.nadp .nd-end-bottle {
  width: clamp(130px, 14vw, 200px); height: auto;
  filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .35));
}
.nadp .nd-end .nd-end-h { font-size: clamp(38px, 4.4vw, 66px); }
.nadp .nd-end-lede { margin-top: 18px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, .86); }
.nadp .nd-end-price { margin-top: 26px; font-size: 19px; font-weight: 600; }
.nadp .nd-end-cta { display: inline-flex; margin-top: 24px; min-width: 180px; justify-content: center; }
.nadp .nd-end-note { margin-top: 16px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.nadp .nd-end-fine { margin-top: 8px; color: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------------------
   VIEWER
   ------------------------------------------------------------------------ */
.nd-lb {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(6, 14, 40, .94); color: #fff;
}
.nd-lb::backdrop { background: transparent; }
.nd-lb[open] { display: grid; place-items: center; animation: nd-fade .3s ease both; }
@keyframes nd-fade { from { opacity: 0; } }
.nd-lb-stage { width: min(92vw, 1100px); height: min(84dvh, 900px); display: grid; place-items: center; }
.nd-lb-stage > * { animation: nd-fade .35s ease both; }
.nd-lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 16px; }
.nd-lb-stage .nd-facts { display: block; width: min(90vw, 480px); padding: 24px; border: 1px solid #fff; color: #fff; }
.nd-lb-stage .nd-facts-h { display: block; font-size: 30px; font-weight: 700; padding-bottom: 10px; border-bottom: 8px solid #fff; }
.nd-lb-stage .nd-facts-r { display: flex; justify-content: space-between; gap: 16px; font-size: 18px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.nd-lb-stage .nd-facts-foot { display: block; margin-top: 12px; font-size: 16px; }
.nd-lb-count { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; font-size: 16px; opacity: .8; }
.nd-lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; transition: background .2s;
}
.nd-lb-btn:hover { background: rgba(255, 255, 255, .26); }
.nd-lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nd-lb-close { top: 20px; right: 20px; }
.nd-lb-prev { left: 20px; top: 50%; margin-top: -24px; }
.nd-lb-next { right: 20px; top: 50%; margin-top: -24px; }

/* ---------------------------------------------------------------------------
   THE BAR · the nav leaves and the product bar takes the top, as on the ring
   PDP. The rules that DO that are no longer written here: they were one of five
   identical copies, and they now live once in shared.css § "the swap", driven
   by an `.is-past-hero` shared.js sets for every page with a product bar. Only
   this page's material is below.
   ------------------------------------------------------------------------ */
.nadp .ph-bar, .nadp .ph-bar.on {
  background: rgba(255, 255, 255, .72); box-shadow: none;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.nadp .ph-bar-inner { gap: 14px; justify-content: flex-start; }
.nadp .ph-bar-thumb { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; display: block; background: var(--nd-sunk); }
.nadp .ph-bar-txt { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 12px; }
.nadp .ph-bar-meta { font-size: 16px; color: var(--nd-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.nadp .ph-bar .btn.small { flex: none; }

/* ---------------------------------------------------------------------------
   THE SECTIONS UNDER THE BUY BOX, in order: early voices, why it is different,
   the compare table, inside each sachet, bought together, reviews. Drawn in
   this page's own materials (navy ink, the #f4f6fb tint, white cards on it,
   the 28/20px radii).
   ------------------------------------------------------------------------ */
/* the buy column's extras: a kicker above the name, an option not sold yet */
.nadp .nd-buy .nd-kicker { margin: 0 0 14px; }
.nadp .nd-buy .supp-opt.is-soon { cursor: default; opacity: .55; }
.nadp .nd-buy .supp-opt-badge { margin-left: 8px; }

/* early voices · drawn as the app page's "Real days, Real insight" cards
   (designexplore/app, .ap-story): a dark tag, the words large, a byline. */
.nadp .nd-voices { padding-block: clamp(56px, 6vw, 96px); }
.nadp .nd-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nadp .nd-story {
  list-style: none; display: flex; flex-direction: column; min-height: 290px;
  padding: 22px 24px; border-radius: 6px; background: #e6ebf4; color: #0a1233;
}
.nadp .nd-story-tag {
  align-self: flex-start; color: #f5a623; font-size: 16px; letter-spacing: 2px; line-height: 1.3;
}
.nadp .nd-story blockquote {
  margin: 26px 0 0; font-size: clamp(22px, 1.8vw, 27px); line-height: 1.28; letter-spacing: -.015em; font-weight: 500;
  text-wrap: pretty;
}
.nadp .nd-story-by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 26px; font-size: 16px; }
.nadp .nd-story-by i {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(10, 18, 51, .12);
  font-style: normal; font-size: 15px; font-weight: 600; color: var(--nd-navy);
}
.nadp .nd-story-by small { display: block; font-size: 15px; color: #5f6680; }

/* why it is different · the app page's "Your Longevity AI, Always on." band
   (designexplore/app, .ap-evolve): night to white ground, a two tone heading
   beside its intro, and the three photographs as an accordion: the card under
   the cursor opens and its words rise; at rest the first card is open. */
.nadp .nd-why {
  --why-ease: cubic-bezier(.16, 1, .3, 1);
  color: #fff;
  background: linear-gradient(180deg, #070c24 0%, #2b3558 26%, #9aa3bd 48%, #eef1f7 70%, #fff 100%);
}
.nadp .nd-why-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.nadp .nd-why .nd-why-h { margin: 0; font-size: clamp(40px, 5.6vw, 84px); }
.nadp .nd-why-intro {
  margin: 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; font-weight: 500; letter-spacing: -.01em;
  color: #fff; max-width: 30ch;
}
.nadp .nd-why-cards {
  margin-top: clamp(30px, 3.4vw, 50px); display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(360px, 60vw, 520px);
}
.nadp .nd-why-card { position: relative; border-radius: 28px; overflow: hidden; background: #1a2140; color: #fff; outline: none; }
.nadp .nd-why-card.is-big { grid-column: 1 / -1; }
.nadp .nd-why-card > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--why-ease);
}
.nadp .nd-why-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 12, 36, .18), transparent 40%, rgba(7, 12, 36, .7));
}
.nadp .nd-why-copy { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 26px; display: flex; flex-direction: column; }
.nadp .nd-why-ic { order: -1; display: block; margin-bottom: 12px; }
.nadp .nd-why-ic svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nadp .nd-why-copy h3 { margin: 0; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.12; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.nadp .nd-why-copy p { margin: 10px 0 0; max-width: 38ch; font-size: 18px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.nadp .nd-why-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (min-width: 1025px) and (hover: hover) {
  .nadp .nd-why-cards { display: flex; align-items: stretch; height: clamp(400px, 38vw, 540px); }
  .nadp .nd-why-card {
    --open: 0;
    flex: 1 1 0; min-width: 0; flex-grow: calc(1 + var(--open) * 1.5);
    transition: flex-grow .62s var(--why-ease);
  }
  .nadp .nd-why-cards:not(:has(.nd-why-card:hover)):not(:has(.nd-why-card:focus-visible)) .nd-why-card.is-big,
  .nadp .nd-why-card:hover,
  .nadp .nd-why-card:focus-visible { --open: 1; }
  .nadp .nd-why-card > img { transform: scale(calc(1 + var(--open) * .05)); transition: transform .62s var(--why-ease); }
  .nadp .nd-why-copy { left: 26px; right: 26px; }
  .nadp .nd-why-copy h3 { font-size: calc(clamp(20px, 1.7vw, 25px) + var(--open) * 8px); transition: font-size .62s var(--why-ease); }
  .nadp .nd-why-copy p {
    width: min(38ch, 400px);
    opacity: var(--open); transform: translateY(calc((1 - var(--open)) * 12px));
    transition: opacity .45s var(--why-ease) .06s, transform .62s var(--why-ease);
  }
}
@media (min-width: 1025px) and (hover: hover) and (prefers-reduced-motion: reduce) {
  .nadp .nd-why-card, .nadp .nd-why-card > img, .nadp .nd-why-copy h3, .nadp .nd-why-copy p { transition: none; }
}

/* the compare table · websitelab's "How it compares" band (ndx.css § 5): a
   navy ground with the bottle as a faint ghost, the heading on the left and
   a glass table on the right, our column lifted in a lighter band. */
.nadp .nd-cmp {
  position: relative; overflow: clip; color: #fff;
  background: radial-gradient(80% 110% at 20% 100%, #1a3890 0%, var(--nd-navy) 58%, #071641 100%);
}
.nadp .nd-ghost {
  position: absolute; left: -4%; bottom: -48%; height: 125%; width: auto; max-width: none;
  rotate: -24deg; pointer-events: none;
  /* filter opacity, not `opacity`: shared.css's reveal sets opacity 1 on every
     direct child of a section and would win. */
  filter: saturate(.4) blur(3px) opacity(.1);
}
.nadp .nd-cmp .nd-wrap { position: relative; }
.nadp .nd-cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 56px; align-items: start; }
.nadp .nd-cmp .nd-cmp-h { margin: 0; }
.nadp .nd-cmp-sub { margin-top: 20px; max-width: 36ch; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.nadp .nd-table {
  --c2: 210px; --c3: 210px; --pad: 24px;
  position: relative; padding: 16px var(--pad); border-radius: var(--nd-r-lg);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.nadp .nd-table::before {
  content: ""; position: absolute; top: 12px; bottom: 12px; border-radius: 18px;
  right: calc(var(--pad) + var(--c3)); width: var(--c2); background: rgba(255, 255, 255, .1);
}
.nadp .nd-tr {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--c2) var(--c3);
  align-items: center; min-height: 74px; font-size: 16px; line-height: 1.35; font-weight: 600;
}
.nadp .nd-tr + .nd-tr { border-top: 1px solid rgba(255, 255, 255, .14); }
.nadp .nd-tr > * { padding-block: 10px; }
.nadp .nd-tr > :nth-child(2) { text-align: center; padding-inline: 12px; color: #fff; }
.nadp .nd-tr > :nth-child(3) { text-align: center; padding-inline: 8px; font-weight: 400; color: rgba(255, 255, 255, .78); }
.nadp .nd-th { min-height: 56px; }
.nadp .nd-th > :nth-child(3) { font-weight: 600; color: #fff; }
.nadp .nd-us { display: flex; justify-content: center; }
.nadp .nd-chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border: 1px solid #fff; border-radius: 99px; font-size: 16px; white-space: nowrap;
}

/* inside each sachet · websitelab's formula screen (ndz.css): the real bottle,
   cut out, standing still in a slowly turning field of dots; the contents as
   rows with their amounts in mono, and what it does as an icon row. */
/* clip: the turning dots square reaches past the column at 45 degrees */
.nadp .nd-formula { background: var(--nd-sunk); overflow: clip; }
.nadp .nd-formula-h { margin: 0; }
.nadp .nd-formula-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(40px, 5vw, 72px);
}
.nadp .nd-still { position: relative; aspect-ratio: 1; max-width: 560px; width: 100%; justify-self: center; }
.nadp .nd-still-dots { position: absolute; inset: 0; width: 100%; height: 100%; animation: nd-spin 240s linear infinite; }
@keyframes nd-spin { to { rotate: 360deg; } }
.nadp .nd-still-bottle {
  position: absolute; left: 50%; top: 50%; height: 62%; width: auto;
  translate: -50% -50%;
  filter: drop-shadow(0 28px 26px rgba(10, 30, 87, .26));
}
.nadp .nd-ing { margin: 0; }
.nadp .nd-ing-r {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--nd-rule);
}
.nadp .nd-ing-r:first-child { border-top: 1px solid var(--nd-rule); }
.nadp .nd-ing-n { font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--nd-navy); }
.nadp .nd-mono {
  margin: 0; font-family: var(--nd-mono); font-size: 16px; font-weight: 400; letter-spacing: .02em;
  color: var(--nd-ink-2); text-align: right;
}
.nadp .nd-does { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; margin-top: 40px; padding-left: 0; }
.nadp .nd-does li { list-style: none; display: flex; flex-direction: column; gap: 8px; color: var(--nd-navy); }
.nadp .nd-does .nd-ic { width: 40px; height: 40px; stroke-width: 1.3; margin-bottom: 4px; }
.nadp .nd-does b { font-size: 16px; line-height: 1.3; }
.nadp .nd-does span { font-size: 15px; line-height: 1.45; color: var(--nd-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .nadp .nd-still-dots { animation: none; }
}

/* review cards (the reviews section) */
.nadp .nd-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nd-gut); }
.nadp .nd-quote {
  list-style: none; display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: var(--nd-r-md); background: #fff;
}
.nadp .nd-quote .supp-stars { font-size: 15px; }
.nadp .nd-quote blockquote { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--nd-navy); text-wrap: pretty; }
.nadp .nd-quote-who { margin-top: auto; font-size: 15px; color: var(--nd-ink-2); }


/* bought together · the stack. The three products share one white tray, the
   joins between them marked by navy plus chips that sit across the seams; the
   decision is a navy card beside it, in the compare band's ground, the total
   set large and the saving as a sky pill under it. Hover lifts a product off
   the tray and turns the chips a quarter, as if the stack tightened.
   flow-root: with no top padding the heading's margin would collapse through
   the section and open a white seam under the tinted band above. */
.nadp .nd-together { --tg-ease: cubic-bezier(.16, 1, .3, 1); background: var(--nd-sunk); padding-top: 0; display: flow-root; }
.nadp .nd-together-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.nadp .nd-together-title { margin: 0; }
.nadp .nd-together-sub { margin: 0; max-width: 34ch; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.4; color: var(--nd-ink); text-wrap: pretty; }

.nadp .nd-together-stage {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 16px;
  margin-top: clamp(32px, 3.6vw, 56px);
}
.nadp .nd-together-tray {
  display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr) 0 minmax(0, 1fr); column-gap: 8px;
  margin: 0; padding: 18px; border-radius: var(--nd-r-lg); background: #fff;
  box-shadow: 0 1px 0 rgba(10, 30, 87, .04), 0 30px 60px -40px rgba(10, 30, 87, .35);
}
.nadp .nd-together-tray > li { list-style: none; }
.nadp .nd-together-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%;
  padding: 10px 10px 18px; border-radius: 20px; color: var(--nd-ink); text-decoration: none; text-align: center;
  transition: background .4s var(--tg-ease);
}
.nadp .nd-together-ph {
  display: block; width: 100%; aspect-ratio: 1; margin-bottom: 14px; overflow: hidden;
  border-radius: 16px; background: var(--nd-soft);
  transition: translate .5s var(--tg-ease), box-shadow .5s var(--tg-ease);
}
.nadp .nd-together-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--tg-ease); }
.nadp a.nd-together-card:hover { background: var(--nd-sunk); }
.nadp a.nd-together-card:hover .nd-together-ph { translate: 0 -6px; box-shadow: 0 22px 30px -18px rgba(10, 30, 87, .45); }
.nadp a.nd-together-card:hover .nd-together-ph img { scale: 1.05; }
.nadp a.nd-together-card:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
.nadp .nd-together-card.is-soon .nd-together-ph { background: var(--nd-sunk); }
.nadp .nd-together-card.is-soon .nd-together-ph img { object-fit: contain; padding: 22%; opacity: .7; }
.nadp .nd-together-card b { font-size: 17px; line-height: 1.3; color: var(--nd-navy); }
/* the line the portal gives a pairing, under the paired product's name */
.nadp .nd-together-k { font-size: 15px; line-height: 1.4; color: var(--nd-ink-2); }
.nadp .nd-together-p { font-size: 16px; font-weight: 600; color: var(--nd-ink-2); font-variant-numeric: tabular-nums; }
/* the chips sit on the seams, level with the middle of the photographs */
.nadp .nd-together-plus { position: relative; z-index: 1; width: 0; }
.nadp .nd-together-plus svg {
  position: absolute; left: 50%; top: calc(50% - 34px); translate: -50% -50%;
  width: 40px; height: 40px; padding: 11px; border-radius: 50%;
  background: var(--nd-navy); color: #fff; box-shadow: 0 0 0 5px #fff;
  transition: rotate .6s var(--tg-ease);
}
.nadp .nd-together-tray:hover .nd-together-plus svg { rotate: 90deg; }

.nadp .nd-together-buy {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 2.6vw, 40px); border-radius: var(--nd-r-lg); color: #fff;
  background: radial-gradient(70% 140% at 12% 50%, #1d3d98 0%, var(--nd-navy) 60%, #071641 100%);
}
/* The same ground as the closing card: the aurora film
   under the translucent radial navy scrim (replaces the three corner rings). */
.nadp .nd-together-film {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.nadp .nd-together-buy::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%);
}
.nadp .nd-together-h { margin: 0; font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, .78); }
.nadp .nd-together-total {
  margin: 10px 0 0; font-size: clamp(48px, 4.6vw, 68px); line-height: 1; font-weight: 600; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.nadp .nd-together-s {
  align-self: flex-start; margin: 16px 0 0; padding: 7px 14px; border-radius: 99px;
  border: 1px solid rgba(79, 179, 232, .45); background: rgba(79, 179, 232, .14);
  font-size: 15px; line-height: 1.35; color: #cdeafa;
}
.nadp .nd-together-buy .nd-together-cta {
  width: 100%; min-height: 54px; margin-top: 28px; justify-content: center; border: 0;
  font: inherit; font-size: 17px; font-weight: 600;
}
.nadp .nd-together-buy .nd-together-cta:disabled { cursor: default; opacity: .5; }
/* A bundle of two or of four: the tray holds that many, and with two the
   tray gives the width it does not need to the box beside it. */
@media (min-width: 1025px) {
  .nadp .nd-together-stage[data-n="2"] { grid-template-columns: minmax(0, 1.17fr) minmax(300px, 1fr); }
}
.nadp .nd-together-tray[data-n="2"] { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); }
.nadp .nd-together-tray[data-n="4"] { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr) 0 minmax(0, 1fr) 0 minmax(0, 1fr); }
/* A product in several bundles: each under the last, its own line over it,
   and past the first ones a button that shows the rest. */
.nadp .nd-together-stage + .nd-together-stage,
.nadp .nd-together-sub + .nd-together-stage { margin-top: 16px; }
.nadp .nd-together-stage + .nd-together-sub { margin-top: clamp(28px, 3vw, 44px); max-width: none; }
.nadp .nd-together-stage[hidden], .nadp .nd-together-sub[hidden] { display: none; }
.nadp .nd-together-more { display: flex; margin: 24px auto 0; }
/* On a test's page the section stands between two of that page's own, so it
   keeps the padding over its heading. */
.nadp.nd-together-host { background: none; }
.nadp.nd-together-host .nd-together { padding-top: clamp(72px, 8vw, 128px); }
@media (prefers-reduced-motion: reduce) {
  .nadp .nd-together-ph, .nadp .nd-together-ph img, .nadp .nd-together-plus svg { transition: none; }
}

.nadp .nd-score { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 12px; text-align: center; }
.nadp .nd-score .supp-stars { font-size: 24px; }
.nadp .nd-score b { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; color: var(--nd-navy); }
.nadp .nd-score > span:last-child { font-size: 16px; color: var(--nd-ink-2); }
.nadp .nd-reviews .nd-quotes { margin-top: clamp(28px, 3vw, 44px); }
.nadp .nd-reviews .nd-quote { background: var(--nd-sunk); }

@media (max-width: 1024px) {
  .nadp .nd-quotes, .nadp .nd-story-grid { grid-template-columns: minmax(0, 1fr); }
  .nadp .nd-story { min-height: 0; }
  .nadp .nd-why-head, .nadp .nd-cmp-grid, .nadp .nd-formula-grid { grid-template-columns: minmax(0, 1fr); }
  .nadp .nd-still { max-width: 420px; }
  .nadp .nd-together-head, .nadp .nd-together-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .nadp .nd-together-tray { padding: 12px; gap: 10px; }
  .nadp .nd-together-card { padding: 8px 8px 14px; }
  .nadp .nd-together-card b { font-size: 15px; }
  .nadp .nd-together-p { font-size: 14px; }
  .nadp .nd-together-buy { padding: 26px 22px; }
  /* a total with its currency's letters and five figures still fits the box */
  .nadp .nd-together-total { font-size: clamp(30px, 9.6vw, 48px); }
  .nadp .nd-together-plus svg { width: 28px; height: 28px; padding: 8px; box-shadow: 0 0 0 3px #fff; top: calc(50% - 30px); }
  .nadp .nd-together-s { border-radius: 14px; }
  .nadp .nd-why-cards { grid-template-columns: minmax(0, 1fr); }
  .nadp .nd-table { --c2: 104px; --c3: 104px; --pad: 14px; }
  .nadp .nd-tr { font-size: 15px; min-height: 68px; }
  .nadp .nd-chip { height: auto; padding: 4px 8px; font-size: 14px; white-space: normal; text-align: center; border-radius: 10px; }
  .nadp .nd-does { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   NARROW WIDTHS
   ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .nadp .nd-hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* Single column: nothing to match heights with, so the ratio comes back. */
  .nadp .nd-gal-main { height: auto; min-height: 0; aspect-ratio: 1 / 1; max-width: 760px; }
  .nadp .nd-buy { max-width: 640px; }
  .nadp .nd-ess-panel { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .nadp .nd-ess-panel h3 { margin-top: 16px; }
  .nadp .nd-kits { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .nadp .nd-end-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}
@media (max-width: 760px) {
  .nadp .nd-kit { grid-template-columns: minmax(0, 1fr); }
  /* min-height 0: with a ratio, a min-height is also a min-width (380 x 1.6). */
  .nadp .nd-kit-img { aspect-ratio: 16 / 10; min-height: 0; }
  .nadp .nd-kit-body { padding: 8px; }
}
@media (max-width: 560px) {
  /* shared.css drops the three figures into one column here; without the tint
     panel behind them the shared 24px gap reads as three loose fragments. */
  .nadp .nd-buy .supp-stats { gap: 12px; padding-top: 16px; }
  .nadp .nd-ess-hero { padding-inline: 20px; }
  .nadp .nd-ess-panel { grid-template-columns: minmax(0, 1fr); margin-inline: -4px; padding: 24px 20px; }
  .nadp .nd-ess-panel li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; }
  .nadp .nd-ess-panel .nd-ic { width: 40px; height: 40px; grid-row: span 2; }
  .nadp .nd-ess-panel h3 { margin-top: 0; }
  .nadp .nd-ess-panel p { margin-top: 4px; }
  .nadp .ph-tl-note { display: flex; }
  .nadp .ph-bar-meta { display: none; }
  .nadp .nd-pair { grid-template-columns: 72px 1fr; }
  .nadp .nd-pair img { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .nadp .nd-end-film, .nadp .nd-together-film { display: none; }
  .nadp .nd-end-card, .nadp .nd-together-buy { background-image: url("/site/assets/video/hero-aurora.webp"); background-size: cover; }
}

/* ===========================================================================
   2026-09-21 · THREE SCREENS, by request
   ======================================================================== */

/* ---- 2 · essentials grows to fill the screen ------------------------------
   The frame arrives as an inset rounded card at .86 and reaches the
   full screen, corners square, as its top meets the top of the window; it then
   holds pinned for most of a screen before the page moves on. nad.js writes
   --ess-s (the frame's scale) and --ess-rad (its corner, already divided by
   the scale so the visible corner shrinks evenly). The photograph is counter
   scaled so it keeps its size and only the crop changes. */
.nadp .nd-ess-track { position: relative; height: calc(100svh + 70vh); }
.nadp .nd-ess-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.nadp .nd-ess .nd-ess-hero {
  width: 100%; height: 100svh; min-height: 0;
  border-radius: var(--ess-rad, 0px);
  transform: scale(var(--ess-s, 1)); transform-origin: 50% 50%;
  padding: clamp(96px, 9vw, 136px) clamp(24px, 4vw, 72px) clamp(24px, 3vw, 48px);
}
.nadp .nd-ess .nd-ess-bg { scale: calc(1 / var(--ess-s, 1)); }
.nadp .nd-ess .nd-ess-h { font-size: clamp(40px, 5vw, 80px); }
.nadp .nd-ess .nd-ess-panel { margin-inline: 0; }

/* ---- 2b · ingredients -----------------------------------------------------
   Ten circles on a ring, placed with cos() and sin() from their index. The
   ring turns once every 160s and each circle turns back at the same rate, so
   the photographs stay upright; pointing at the ring pauses both. */
.nadp .nd-src { overflow: clip; padding-block: clamp(56px, 6vw, 96px); }
/* statement and ring are meant to be read as one screen, so the ring is held
   to 78% of the window's height as well as to its column */
/* the statement on the left, the ring on the right */
.nadp .nd-src-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.nadp .nd-ring {
  --d: 21%; --rad: 39.5%; --turn: 160s;
  position: relative; width: min(100%, 640px, 78svh); aspect-ratio: 1; justify-self: center;
}
.nadp .nd-ring::before {
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 179, 232, .26) 0%, rgba(173, 196, 238, .32) 34%, rgba(230, 233, 242, .5) 52%, rgba(255, 255, 255, 0) 72%);
  filter: blur(8px); animation: nd-breathe 7s ease-in-out infinite alternate;
}
@keyframes nd-breathe { from { scale: .92; opacity: .8; } to { scale: 1.06; opacity: 1; } }
.nadp .nd-ring-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; animation: nd-orbit var(--turn) linear infinite; }
.nadp .nd-ring-list li {
  position: absolute; width: var(--d); aspect-ratio: 1;
  left: calc(50% + var(--rad) * cos(var(--i) * var(--ring-step, 36deg) - 90deg) - var(--d) / 2);
  top: calc(50% + var(--rad) * sin(var(--i) * var(--ring-step, 36deg) - 90deg) - var(--d) / 2);
}
.nadp .nd-ring-list button {
  display: block; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 14px 34px rgba(10, 30, 87, .14);
  animation: nd-orbit var(--turn) linear infinite reverse;
  transition: scale .5s var(--nd-ease), box-shadow .5s var(--nd-ease);
}
.nadp .nd-ring-list img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .9s var(--nd-ease); }
.nadp .nd-ring-list button:hover, .nadp .nd-ring-list button:focus-visible { scale: 1.1; box-shadow: 0 20px 44px rgba(10, 30, 87, .24); }
.nadp .nd-ring-list button:hover img { scale: 1.08; }
.nadp .nd-ring-list button:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 4px; }
.nadp .nd-ring:hover .nd-ring-list, .nadp .nd-ring:hover .nd-ring-list button,
.nadp .nd-ring:focus-within .nd-ring-list, .nadp .nd-ring:focus-within .nd-ring-list button { animation-play-state: paused; }
@keyframes nd-orbit { to { rotate: 360deg; } }
/* arrival: the circles open one after another, only once nad.js has armed
   the ring, so with no script nothing is ever hidden */
.nadp .nd-ring[data-armed] .nd-ring-list li {
  opacity: 0; scale: .6;
  transition: opacity .7s var(--nd-ease), scale .9s var(--nd-ease);
  transition-delay: calc(var(--i) * 70ms);
}
.nadp .nd-ring[data-armed].is-in .nd-ring-list li { opacity: 1; scale: 1; }
/* The centre: "All ingredients" at rest; pointing at a circle puts that
   ingredient's name, its amount (the one large figure) and the product it is
   in there instead. Empty lines take no room, so the rest state is one line. */
.nadp .nd-ring-core {
  position: absolute; inset: 29%; z-index: 1; display: grid; place-content: center; justify-items: center;
  gap: 6px; text-align: center; transition: opacity .2s;
}
.nadp .nd-ring-core p { margin: 0; }
.nadp .nd-ring-core p:empty { display: none; }
.nadp .nd-ring-k { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--nd-navy); text-wrap: balance; }
.nadp .nd-ring-amt { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: var(--nd-accent); font-variant-numeric: tabular-nums; }
.nadp .nd-ring-per { max-width: 22ch; font-size: 15px; line-height: 1.4; color: var(--nd-ink-2); text-wrap: balance; }
.nadp .nd-ring-core.is-swap { opacity: 0; }

/* ---- 7 · standards on the supplements field ------------------------------ */
.nadp .nd-std { position: relative; overflow: clip; background: rgb(10 30 87); color: #fff; }
/* copy in the middle of the left side (2026-09-21, it sat too low at the foot) */
.nadp .nd-std-in { position: relative; min-height: clamp(600px, 48vw, 720px); display: flex; align-items: center; }
.nadp .nd-std-field {
  --st-tile: 30vw; position: absolute; top: 50%; left: 62%;
  transform: translate(-50%, -50%) rotate(50deg); pointer-events: none;
}
.nadp .nd-std-row { display: flex; will-change: transform; }
.nadp .nd-std-row:nth-child(1) { opacity: .3; }
.nadp .nd-std-row:nth-child(2) { opacity: .2; }
.nadp .nd-std-row:nth-child(3) { opacity: .1; }
.nadp .nd-std-tile {
  flex: none; width: var(--st-tile); height: var(--st-tile); margin: 1vw; border-radius: 16px;
  background-size: cover; background-position: 50% 50%; rotate: -90deg;
}
/* the copy sits bottom left; a navy wash from the
   left keeps the tiles off the words without dimming the rest of the field */
.nadp .nd-std-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(10 30 87 / .9) 0%, rgb(10 30 87 / .55) 42%, rgb(10 30 87 / 0) 72%);
}
.nadp .nd-std-copy { position: relative; z-index: 1; padding-block: clamp(64px, 6vw, 96px); }
.nadp .nd-std-p { margin-top: 24px; max-width: 44ch; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: rgba(255, 255, 255, .88); }
.nadp .nd-std-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 960px; margin: clamp(32px, 3.4vw, 48px) 0 0; padding: 0; }
.nadp .nd-std-list li {
  list-style: none; display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--nd-r-md);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.nadp .nd-std-list .nd-ic { width: 40px; height: 40px; stroke-width: 1.3; color: #fff; }
.nadp .nd-std-list p { margin: 0; font-size: 16px; line-height: 1.4; color: #fff; }

@media (max-width: 1024px) {
  .nadp .nd-std-list { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .nadp .nd-src-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Under 760px the card does not grow: a phone's screen is already the frame,
   so the section is the plain rounded card it always was. */
@media (max-width: 760px) {
  .nadp .nd-ess-track { height: auto; }
  .nadp .nd-ess-stage { position: static; height: auto; overflow: visible; padding-inline: var(--nd-gut); }
  .nadp .nd-ess .nd-ess-hero { height: auto; min-height: 620px; border-radius: var(--nd-r-lg); transform: none; padding: 40px 20px 20px; }
  .nadp .nd-ess .nd-ess-bg { scale: none; }
  .nadp .nd-ring { --d: 22%; --rad: 38.5%; }
  .nadp .nd-ring-core { inset: 27%; gap: 4px; }
  .nadp .nd-ring-k { font-size: 17px; }
  .nadp .nd-ring-amt { font-size: 28px; }
  .nadp .nd-std-field { --st-tile: 46vw; }
  .nadp .nd-std-in::after { background: rgb(10 30 87 / .6); }
}
@media (prefers-reduced-motion: reduce) {
  .nadp .nd-ring::before, .nadp .nd-ring-list, .nadp .nd-ring-list button { animation: none; }
}

/* ===========================================================================
   2026-09-25 · THE OTHER SUPPLEMENT PAGES
   Twelve supplement buy pages link this sheet and nad.js as they are (body
   .nadp). What differs from NAD+ is only the shape of their content, and
   each rule below is keyed on that shape, never on a product.
   ======================================================================== */

/* three promises instead of four */
.nadp .nd-ess-panel.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .nadp .nd-ess-panel.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nadp .nd-ess-panel.is-3 { grid-template-columns: minmax(0, 1fr); } }

/* a product's own actives on the ring: fewer, larger circles, set in words */
.nadp .nd-ring[data-n="5"] { --ring-step: 72deg; --d: 27%; }
.nadp .nd-ring[data-n="6"] { --ring-step: 60deg; --d: 26%; }
.nadp .nd-ring-list button.is-word {
  display: grid; place-items: center; padding: 12%; text-align: center; color: #fff;
  background: radial-gradient(120% 120% at 30% 20%, var(--nd-navy-2), var(--nd-navy) 70%);
}
.nadp .nd-ring-list button.is-word span { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.2; font-weight: 600; text-wrap: balance; }
.nadp .nd-src-p { margin-top: 24px; max-width: 40ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--nd-ink); }

/* the how to use chip carries the product's own thumbnail */
.nadp .nd-howto-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--nd-soft); }

/* Frequently bought together: one kit card across the column */
.nadp .nd-bundle { padding-top: 0; }
.nadp .nd-bundle-card { margin-top: clamp(32px, 3.4vw, 48px); grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.nadp .nd-bundle-card .nd-kit-img { min-height: 0; height: clamp(360px, 34vw, 500px); }
.nadp .nd-bundle-card .nd-kit-img img { object-position: 50% 55%; }
.nadp .nd-bundle-total { margin-top: 18px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--nd-navy); }
.nadp .nd-bundle-total s { margin-left: 6px; font-size: 18px; font-weight: 400; color: var(--nd-ink-2); }
.nadp .nd-bundle-card li b a { color: inherit; text-decoration: none; }
.nadp .nd-bundle-card li b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nadp .nd-bundle-cta { margin-top: 18px; min-width: 200px; justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
/* a height plus the kit image's 16:10 ratio is also a width, so the fixed
   height has to go where the ratio comes back */
@media (max-width: 760px) {
  .nadp .nd-bundle-card { grid-template-columns: minmax(0, 1fr); }
  .nadp .nd-bundle-card .nd-kit-img { height: auto; }
}

/* Each product's signature band
   in the compare table's navy (.nd-cmp), as numbered glass cards or as a
   range table; wide ones stack the heading over them. */
.nadp .nd-cmp-grid.is-stack { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); }
.nadp .nd-cmp-grid.is-stack .nd-cmp-sub { max-width: 60ch; }
.nadp .nd-sig-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nadp .nd-sig-list[data-n="2"], .nadp .nd-sig-list[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nadp .nd-sig-item {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: var(--nd-r-lg);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.nadp .nd-sig-item b { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.2; font-weight: 600; color: #fff; }
.nadp .nd-sig-item > span:last-child { font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.nadp .nd-sig-badge {
  align-self: flex-start; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 99px;
  font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--nd-sky);
}
.nadp .nd-table.is-grid::before { display: none; }
.nadp .nd-table.is-grid .nd-tr { gap: 16px; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
.nadp .nd-table.is-grid[data-cols="4"] .nd-tr { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1.2fr)) minmax(0, .5fr); }
.nadp .nd-table.is-grid .nd-tr > * { text-align: left; padding-inline: 0; font-weight: 400; color: rgba(255, 255, 255, .78); }
.nadp .nd-table.is-grid .nd-tr > :first-child, .nadp .nd-table.is-grid .nd-th > * { font-weight: 600; color: #fff; }
.nadp .nd-table.is-grid .nd-tr.is-here {
  margin-inline: calc(var(--pad) * -.5); padding-inline: calc(var(--pad) * .5);
  border-radius: 18px; background: rgba(255, 255, 255, .1);
}
.nadp .nd-table.is-grid .nd-tr.is-here > * { color: #fff; }
.nadp .nd-here { display: block; margin-top: 4px; font-size: 15px; font-weight: 500; color: var(--nd-sky); }
/* ÄktaEnergy's "The science": the facts panel beside the papers, then the
   note on what the research is */
.nadp .nd-sci-k { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--nd-sky); }
.nadp .nd-sci-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.nadp .nd-sci-h { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: #fff; }
.nadp .nd-sci-facts {
  padding: 24px; border-radius: var(--nd-r-lg);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18);
}
.nadp .nd-sci-facts dl { margin: 0; }
.nadp .nd-sci-r {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .14); font-size: 16px;
}
.nadp .nd-sci-r dt { color: #fff; font-weight: 500; }
.nadp .nd-sci-r dd { margin: 0; text-align: right; color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums; }
.nadp .nd-sci-r small { display: block; font-size: 15px; color: rgba(255, 255, 255, .6); }
.nadp .nd-sci-fine { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .64); }
.nadp .nd-sci-papers, .nadp .nd-sci-papers[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nadp .nd-sci-note {
  padding: 22px 24px; border-radius: var(--nd-r-lg); border: 1px solid rgba(255, 255, 255, .28);
  font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .78);
}
.nadp .nd-sci-note b { display: block; margin-bottom: 6px; font-size: 17px; color: #fff; }
.nadp .nd-sci-note p { margin: 0; }
@media (max-width: 1024px) {
  .nadp .nd-sig-list, .nadp .nd-sig-list[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nadp .nd-sci-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .nadp .nd-sig-list, .nadp .nd-sig-list[data-n] { grid-template-columns: minmax(0, 1fr); }
  /* the table keeps its columns and scrolls inside its own glass */
  .nadp .nd-table.is-grid { overflow-x: auto; }
  .nadp .nd-table.is-grid .nd-tr { min-width: 520px; }
  .nadp .nd-table.is-grid[data-cols="4"] .nd-tr { min-width: 640px; }
}

/* closing card: boxed lozenges are wide, and a product with no cut out stands
   the copy alone */
.nadp .nd-end-bottle.is-wide { width: clamp(220px, 26vw, 380px); }
.nadp .nd-end-card.is-solo { grid-template-columns: minmax(0, 1fr); }

/* ===========================================================================
   THE BAND LADDER, 2026-09-26 (user rule for every test and supplement buy
   page: sizes and the two tone headline as on devices/band). One block at the
   END of the sheet so it wins over every earlier rung without touching them.
     section statement  .ph-display  clamp(40, 5.6vw, 84), the Band's own
     product name       46 / 600, the Band's .bd-name
     price              36 / 600, the Band's price
     card title         23 / 600, figures 23
     description        19,  body 17,  labels 16,  nothing under 15
   ======================================================================== */
.nadp .ph-display { font-size: clamp(40px, 5.6vw, 84px); }
.nadp .ph-display.is-left { max-width: 20ch; }
.nadp .nd-ess .nd-ess-h { font-size: clamp(40px, 5.6vw, 84px); }
.nadp .nd-end .nd-end-h { font-size: clamp(38px, 4.6vw, 70px); }
.nadp .nd-buy .supp-name { font-size: clamp(34px, 3.2vw, 46px); font-weight: 600; line-height: 1.04; }
.nadp .nd-buy .supp-badge { font-size: 16px; letter-spacing: .01em; }
.nadp .nd-buy .supp-subtitle { font-size: 17px; line-height: 1.5; }
.nadp .nd-rate-link { font-size: 16px; }
.nadp .nd-buy .supp-stat-v { font-size: 23px; font-weight: 600; }
.nadp .nd-buy .supp-stat-l { font-size: 16px; letter-spacing: 0; }
.nadp .nd-buy .supp-price { font-size: 36px; font-weight: 600; }
.nadp .nd-buy .supp-opt-t { font-size: 17px; }
.nadp .nd-buy .supp-fine, .nadp .nd-buy-acc .supp-fine { font-size: 16px; }
.nadp .nd-bullets li { font-size: 17px; line-height: 1.5; }
.nadp .nd-pair-t, .nadp .nd-pair-t b { font-size: 17px; }
.nadp .nd-ess-panel h3 { font-size: clamp(19px, 1.6vw, 23px); }
.nadp .nd-ess-panel p { font-size: 17px; line-height: 1.5; }
.nadp .ph-tl-step-h { font-size: clamp(19px, 1.5vw, 23px); }
.nadp .ph-tl-step li { font-size: 17px; }
.nadp .ph-tl-foot { font-size: 17px; }
.nadp .nd-std-list p { font-size: 17px; line-height: 1.45; }
.nadp .nd-kit h3 { font-size: clamp(23px, 2vw, 30px); font-weight: 600; }
.nadp .nd-kit-sub { font-size: 17px; line-height: 1.5; }
.nadp .nd-kit li b { font-size: 17px; }
.nadp .nd-kit li span { font-size: 16px; }
.nadp .nd-sub { font-size: clamp(18px, 1.35vw, 21px); }
.nadp .nd-end-lede { font-size: clamp(19px, 1.5vw, 22px); }
@media (max-width: 560px) {
  .nadp .nd-buy .supp-stat-v { font-size: 20px; }
  .nadp .nd-ess-panel p { font-size: 16px; }
}

/* A statement that shares its row with a ring or a list keeps the step below:
   at the Band size it breaks into four lines in a half width column. */
.nadp .nd-src-copy .ph-display { font-size: clamp(36px, 4.4vw, 68px); }

/* A PRODUCT'S OWN RING (2026-09-26, user rule): every ring holds only that
   product's formula, each ingredient a photograph (assets/supp/ing). One to
   six ingredients, each count with its own step and circle size. One sits
   above the centre, two face each other across it. */
.nadp .nd-ring[data-n="1"] { --ring-step: 0deg; --d: 38%; }
.nadp .nd-ring[data-n="2"] { --ring-step: 180deg; --d: 34%; }
.nadp .nd-ring[data-n="3"] { --ring-step: 120deg; --d: 32%; }
.nadp .nd-ring[data-n="4"] { --ring-step: 90deg; --d: 30%; }