/* supplements/energy-and-cognition · the Energy & Cognition range page.

   It wears the site's own navy scale (phenome-glass.css), and every part is one the site
   already has: the two tone .ph-display, .btn and .btn.ghost, the shared
   Questions list (.acc.is-faq), shared.js's product bar past the hero, and the
   Supplements page's (store/supplements) film hero and product rails.

   Scoped to .ec, the page's root, so nothing here reaches another page. */

.ec {
  --ec-ink: #1d1d1f;
  --ec-ink-2: #6e6e73;
  --ec-line: rgba(16, 33, 75, .09);
  --ec-plane: var(--phenome-blue-100, #e6e9f2);
  --ec-tint: var(--gl-tint-sunk, #f4f6fb);
  --ec-navy: var(--phenome-blue-900, #0a1e57);
  --ec-accent: var(--phenome-blue-500, #203a85);
  --ec-radius: 20px;
  --ec-gap: clamp(16px, 1.6vw, 24px);
  color: var(--ec-ink);
}
.ec-wrap {
  width: 100%;
  max-width: calc(var(--ph-content-max, 1260px) + var(--ph-margin, 90px) * 2);
  margin-inline: auto;
  padding-inline: var(--ph-margin, 90px);
}

/* ---- 1 · hero ------------------------------------------------------------
   The store's Supplements page's first screen (store/supplements/sx.css § 1):
   one full screen, a film flush to the left edge and
   to the nav, the copy on a tinted panel of the same height beside it,
   heading at the top and the page's four promises at the foot, two by two
   where that page puts its range tiles. The film and its pause button are
   that page's own (assets/video/supp-hero-bromelain, store/supplements/sx.js
   through data-sx-film / data-sx-play). The panel is wider than that page's
   (40%, not 35%) because this headline is longer, and its two lines are one
   size: "Energy that starts" keeps only its navy. */
.ec-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) max(600px, 46%);
  align-items: stretch;
  height: clamp(560px, calc(100svh - var(--ph-nav-h, 44px)), 940px);
}
.ec-hero-media {
  position: relative; margin: 0; overflow: hidden;
  width: 100%; height: 100%; min-width: 0;
  background: #e2e5ed;
}
.ec-hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-hero-play {
  position: absolute; right: 16px; bottom: 16px;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  /* Frosted, so the film shows through it. */
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .2); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transition: background-color .2s, border-color .2s;
}
.ec-hero-play:hover { background: rgba(255, 255, 255, .34); border-color: rgba(255, 255, 255, .5); }
.ec-hero-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ec-hero-play svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ec-hero-play .i-pause { fill: none; }
.ec-hero-play .i-play,
.ec-hero-play.is-paused .i-pause { display: none; }
.ec-hero-play.is-paused .i-play { display: block; }

/* The panel is read top to bottom: the kicker,
   headline and lede at the top, a size up; the four promises as small print
   on the panel's foot, level with the foot of the film; the two buttons a
   clear step above them. The text keeps a measure of about 31rem so it never
   runs to the panel's edge. */
.ec-hero-copy {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: clamp(48px, 4.4vw, 72px) clamp(44px, 5.6vw, 96px) clamp(36px, 3.4vw, 56px);
  background: var(--ec-tint);
}
.ec-hero-top, .ec-hero-foot { max-width: 31rem; }
.ec-kicker {
  margin: 0;
  font-size: 17px; line-height: 1.3; font-weight: 600;
  letter-spacing: 0; color: #203a85;
}
.ph-type .ec .ec-hero-h.ph-display.ph-display {
  margin-top: 20px; font-size: clamp(40px, 4vw, 58px); line-height: 1.05; letter-spacing: -0.03em;
}
.ph-type .ec .ec-hero-h.ph-display.ph-display > span.ph-display-lead {
  margin: 0; font: inherit; letter-spacing: inherit; color: #203a85;
}
.ec-lede {
  max-width: 26em; margin: 28px 0 0;
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--ec-ink-2);
}
/* Buttons, then the four promises as small print: grey, a navy dot each, two
   by two, no tiles and no rule. */
.ec-hero-foot { display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 64px); }
.ec-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ec-points {
  display: grid; grid-template-columns: repeat(2, max-content); gap: 14px 44px;
  margin: 0; padding: 0; list-style: none;
}
.ec-points li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ec-ink-2);
  white-space: nowrap;
}
.ec-points li::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--phenome-blue-300, #7185bd);
}

/* ---- 2 · the range ---------------------------------------------------------
   That page's product rails (sx.css § 2): the two tone heading with the
   arrows across from it, then tall plates that run off the right edge, the
   name and the price under each. RangeGrid.jsx draws the arrow slot and the
   rail (shared.js rails() wires them); its host is display: contents so both
   take their places in this grid. */
.ec-range {
  --ec-edge: max(var(--ph-margin, 90px), calc((100% - var(--ph-content-max, 1260px)) / 2));
  padding: clamp(56px, 7vw, 112px) 0 clamp(64px, 7vw, 112px);
  overflow-x: clip; scroll-margin-top: 56px;
}
.ec-range-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; row-gap: clamp(28px, 3vw, 44px);
}
.ec-range-host { display: contents; }
/* "The range" is the heading, alone at display size; the line under it is
   grey small print. */
.ec-range-head { grid-column: 1; padding-left: var(--ec-edge); }
.ec .ec-range-h {
  margin: 0; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.04; font-weight: 600;
  letter-spacing: -0.03em; color: var(--ec-ink);
}
.ec .ec-range-in .ph-rail-nav { grid-column: 2; padding: 0 var(--ec-edge) 6px 0; }
.ec .rg-rail {
  grid-column: 1 / -1;
  display: flex; gap: 16px;
  margin: 0; padding: 0 var(--ec-edge) 4px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--ec-edge);
  scrollbar-width: none;
}
.ec .rg-rail::-webkit-scrollbar { display: none; }
.ec .rg-slot { flex: 0 0 clamp(280px, 23vw, 340px); display: flex; scroll-snap-align: start; }

/* The card: white, a hairline and round corners,
   the photo on its plate above, then name, one line, two points, the price
   with Add to Bag, and Learn more. Every card in the rail is the height of the
   tallest, the price row at the same line in each. */
.ec .rg-card {
  display: flex; flex-direction: column; width: 100%;
  border: 1px solid var(--ec-line); border-radius: 22px; overflow: hidden;
  background: #fff; color: var(--ec-ink);
}
.ec .rg-media {
  position: relative; display: block; aspect-ratio: 6 / 5; overflow: hidden;
  background: #e2e5ed;
}
.ec .rg-media img {
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block;
  transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.ec .rg-card:hover .rg-media img { transform: scale(1.04); }
.ec .rg-flag {
  position: absolute; top: 16px; left: 16px;
  padding: 5px 12px; border-radius: 99px; background: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--ec-accent);
}
.ec .rg-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.ec .rg-name { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.ec .rg-name a { color: inherit; text-decoration: none; }
.ec .rg-name a:hover { color: var(--ec-accent); }
.ec .rg-lead { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ec-ink-2); }
.ec .rg-points { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.ec .rg-points li {
  position: relative; padding-left: 14px;
  font-size: 14px; line-height: 1.4; font-weight: 500; color: #474a52;
}
.ec .rg-points li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ec-accent);
}
.ec .rg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 22px;
}
.ec .rg-price { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ec-ink); font-variant-numeric: tabular-nums; }
.ec .rg-add {
  flex: none; padding: 10px 20px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--ec-accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.3;
  transition: background-color .2s ease, transform .2s ease;
}
.ec .rg-add:hover { background: var(--ec-navy); }
.ec .rg-add:active { transform: scale(.97); }
.ec .rg-add:focus-visible { outline: 2px solid var(--ec-accent); outline-offset: 3px; }
.ec .rg-add.is-unavailable { background: #e8eaf0; color: var(--ec-ink-2); cursor: default; }
.ec .rg-more {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ph-accent-link, #2457c5); text-decoration: none;
}
.ec .rg-more i {
  width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s ease;
}
.ec .rg-more:hover i { transform: translateX(3px) rotate(45deg); }

/* ---- section headings ----------------------------------------------------- */
.ec-h2 {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; font-weight: 600;
  letter-spacing: -0.025em; color: var(--ec-ink);
}
.ec-sub { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--ec-ink-2); }

/* ---- 3 · why this range works -------------------------------------------
   Set as the app page's "Real days, Real insight" stories (app/app.css,
   .ap-stories): white ground, the heading centred at
   display size, three pale plates with square corners. Each plate has a navy
   tag at the top (the number), its heading at quote size, and the reason as
   grey small print at the foot. */
.ec-why { padding: clamp(24px, 3vw, 48px) 0 clamp(72px, 7vw, 112px); background: #fff; }
.ec-why .ec-h2 {
  text-align: center;
  font-size: clamp(40px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -0.035em;
}
.ec-why-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: clamp(40px, 4vw, 64px) 0 0; padding: 0; list-style: none;
}
.ec-why-card {
  display: flex; flex-direction: column; min-height: 270px;
  padding: 22px 24px 26px; border-radius: 6px; background: #e6ebf4;
}
.ec-why-n {
  align-self: flex-start; padding: 5px 10px; border-radius: 4px;
  background: var(--ec-navy); color: #fff;
  font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
.ec-why-card h3 {
  margin: 26px 0 0; font-size: clamp(22px, 1.8vw, 27px); line-height: 1.28; font-weight: 500;
  letter-spacing: -0.015em; color: var(--ec-ink);
}
.ec-why-card p { margin: auto 0 0; padding-top: 26px; font-size: 16px; line-height: 1.5; color: #5f6680; }

/* ---- 4 · the band: a photograph, the copy, three figures on glass -------
   The PhenomeTech Ring page's "More signal" screen (store/phenometech-ring/
   pdp.css, .pdp-sig): an inset rounded frame that
   grows to fill the screen as it arrives and then holds pinned while the
   track scrolls past (ec.js sets --ec-s and --ec-rad). The photograph sits
   under a navy veil; the copy is at the top left, clear of the climber, and
   the figures sit on a frosted bar at the foot, a hairline between each, an
   icon at the top of each cell and the figure at its foot. Desktop only;
   under 1024 it stacks on plain navy. */
.ec-band { color: #fff; }
.ec-band-track { position: relative; height: calc(100svh + 60vh); }
.ec-band-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.ec-band-box {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; height: 100svh; min-height: 620px;
  padding-block: clamp(88px, 8vw, 120px) clamp(40px, 4vw, 64px);
  border-radius: var(--ec-rad, 0px);
  transform: scale(var(--ec-s, 1)); transform-origin: 50% 50%;
}
.ec-band-bg { position: absolute; inset: 0; z-index: -2; scale: calc(1 / var(--ec-s, 1)); }
.ec-band-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; display: block; }
.ec-band-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(4, 7, 14, .5), rgba(4, 7, 14, .5)),
    radial-gradient(60% 64% at 10% 18%, rgba(10, 30, 87, .72) 0%, rgba(10, 30, 87, .44) 48%, rgba(10, 30, 87, 0) 100%),
    linear-gradient(0deg, rgba(10, 30, 87, .55) 0%, rgba(10, 30, 87, 0) 36%);
}
.ec-band-in { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(40px, 5vw, 72px); }
.ec-band-copy { width: min(100%, 620px); }
.ph-type .ec .ec-band-h.ph-display.ph-display { max-width: 15ch; font-size: clamp(38px, 4.6vw, 76px); color: #fff; }
.ph-type .ec .ec-band-h.ph-display.ph-display > span.ph-display-lead {
  margin: 0 0 .08em; font-size: .6em; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;
  color: rgba(255, 255, 255, .58);
}
.ec-band-p {
  margin: 24px 0 0; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.5;
  color: #e3eaf6; text-wrap: pretty;
}
.ec-figs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: clamp(30px, 3vw, 46px) clamp(26px, 3vw, 48px);
  min-height: clamp(180px, 15vw, 232px);
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ec-figs { background: rgba(10, 30, 87, .82); border-color: rgba(255, 255, 255, .16); }
}
.ec-fig {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  margin: 0; padding-inline: clamp(18px, 2.4vw, 40px); min-width: 0;
}
.ec-fig:first-child { padding-left: 0; }
.ec-fig:last-child { padding-right: 0; }
.ec-fig + .ec-fig { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18); }
.ec-fig dt { display: contents; }
.ec-fig dt svg { width: clamp(40px, 3.2vw, 52px); height: clamp(40px, 3.2vw, 52px); display: block; color: #fff; }
.ec-fig dt span {
  margin-top: auto;
  font-size: clamp(30px, 3vw, 46px); line-height: 1.05; font-weight: 600;
  letter-spacing: -0.025em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ec-fig dd { margin: -14px 0 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.4; color: rgba(255, 255, 255, .72); }

@media (max-width: 1023px) {
  .ec-band-track { height: auto; }
  .ec-band-stage { position: static; height: auto; overflow: visible; }
  .ec-band-box {
    display: block; height: auto; min-height: 0; transform: none; border-radius: 0;
    padding-block: clamp(64px, 6vw, 96px); background: var(--ec-navy);
  }
  .ec-band-bg, .ec-band-box::before { display: none; }
  .ec-band-in { gap: 28px; }
  .ec-band-copy { width: auto; max-width: 62ch; }
  .ec-figs { background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 0; }
}
@media (max-width: 719px) {
  .ec-figs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ec-fig { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px; align-items: center; padding: 0; box-shadow: none !important; }
  .ec-fig dt svg { grid-row: span 2; width: 34px; height: 34px; }
  .ec-fig dt span { margin: 0; font-size: 28px; }
  .ec-fig dd { margin: 0; grid-column: 2; }
}

/* ---- 5 · build your routine: the product pages' timeline ------------------
   "What it does" on supplements/nad-boost (nad.css .nd-time) on the shared
   .ph-tl (phenome-glass.css): the heading centred, then the three moments of
   the day down a rail that lights as it is read (shared.js timelines()), each
   a navy pill, the product, and the reason, with the collage beside them. */
.ec-routine { padding: clamp(80px, 8vw, 128px) 0; }
.ec-routine-head { text-align: center; }
.ec-routine-head .ec-h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
.ec-routine-head .ec-sub { margin-top: 14px; font-size: clamp(17px, 1.3vw, 20px); }
.ec-routine .ph-tl { margin-top: clamp(56px, 6vw, 96px); }
.ec-routine .ph-tl-steps { align-self: center; }
.ec-routine .ph-tl-step { padding-bottom: clamp(40px, 4vw, 56px); }
.ec-routine .ph-tl-step:last-of-type { padding-bottom: 0; }
.ec-routine .ph-tl-step-h { font-size: clamp(21px, 1.7vw, 25px); gap: 8px 14px; }
.ec-routine .ph-tl-step-h a { color: inherit; text-decoration: none; }
.ec-routine .ph-tl-step-h a:hover { color: var(--ec-accent); }
.ec-routine .ph-tl-step li { font-size: 17px; }
.ec-routine .ph-tl-big img { object-position: 55% 60%; }
.ec-routine .ph-tl-sm img { object-position: 48% 30%; }
.ec-routine .ph-tl-round img { object-position: 52% 40%; }

/* ---- 6 · questions (the shared component, on the page tint) ------------- */
.ec-faq { padding: clamp(64px, 7vw, 104px) 0; background: var(--ec-tint); }
.ec-faq .acc.is-faq .acc-item { background: #fff; }
.ec-faq .acc.is-faq .acc-item:hover { background: #fbfcfe; }

/* ---- the product bar past the hero, set as on the ring's page ------------ */
.ec-page .ph-bar,
.ec-page .ph-bar.on {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: none; border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.ec-page .ph-bar-name { color: #1d1d1f; }
.ec-page .ph-bar-name:hover { color: var(--ph-accent-link); }

/* ---- narrower ------------------------------------------------------------- */
/* Below 1280 the panel outgrows the film beside it (as on the Supplements
   page), so the film goes full width on top and the panel follows. */
@media (max-width: 1279px) {
  .ec-hero { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ec-hero-media { height: auto; aspect-ratio: 16 / 9; }
  .ec-hero-copy { padding: 36px var(--ph-margin, 48px) 44px; }
}
@media (max-width: 900px) {
  .ec-why-grid { grid-template-columns: minmax(0, 1fr); }
  .ec-why-card { min-height: 0; }
}
@media (max-width: 680px) {
  .ec-why-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ec-hero-foot { gap: 28px; margin-top: 32px; }
  .ec-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
  .ec-points li { align-items: baseline; white-space: normal; }
  .ec-points li::before { transform: translateY(-2px); }
  .ec .ec-range-in .ph-rail-nav { display: none; }
  .ec .rg-slot { flex-basis: 84%; }
  .ec .rg-name { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .ec *, .ec *::before, .ec *::after { transition-duration: .001ms !important; }
}