/* ============================================================
   E-Leviate · Marketing Website UI Kit · Styles
   - Revised composition: continuous flow, varied rhythm
   - Three colour zones only: Plum / Ivory / Periwinkle-once
   - Leading lines connect sections across colour transitions
   ============================================================

   ── Display headline line-height scale ────────────────────────
   Larger display sizes can sit tighter; smaller display headers
   need progressively more breathing room so descenders don't
   crowd the ascenders of the line below. Apply per band:

     130px+      line-height: 0.95   (hero, problem statement —
                                       only safe at hard-broken phrasing)
     86–129px    line-height: 1.0    (talk-to-doctor, product title)
     66–85px     line-height: 1.02   (about snippet)
     50–65px     line-height: 1.06   (milestones, partners)
     <50px       line-height: 1.1    (sub-display, large body)

   Letter-spacing pairs with the same scale: -0.015em at display,
   easing toward 0 as size drops below ~40px.
   ──────────────────────────────────────────────────────────────
*/

@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Light.otf") format("opentype");   font-weight: 300; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Medium.otf") format("opentype");  font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Bold.otf") format("opentype");    font-weight: 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-Black.otf") format("opentype");   font-weight: 900; font-display: swap; }

:root {
  --plum: #4A0F20;
  --plum-80: #6F2B3E;
  --ivory: #F3ECE1;
  --ivory-80: #F5EFE6;
  --periwinkle: #A79EF7;
  --lavender: #A454FF;
  --coral: #FF7373;
  --slate: #212120;

  --font: "Satoshi", system-ui, -apple-system, sans-serif;
  --lh-display: 0.88;
  --lh-body: 1.1;

  --pad-x: 64px;

  /* varied vertical rhythm */
  --pad-y-xl: 180px; /* hero, closing CTA */
  --pad-y-lg: 128px; /* mission, partners area */
  --pad-y-md: 96px;  /* product intro */
  --pad-y-sm: 72px;  /* how-it-works (denser, functional) */
  --pad-y-xs: 48px;  /* partners strip (denser, in-band) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: var(--font); font-weight: 300;
  background: var(--ivory); color: var(--plum);
  letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-align: left; font-size: 17px; line-height: var(--lh-body);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3, h4 { font-weight: 500; line-height: var(--lh-display); margin: 0; text-wrap: balance; }
p { text-wrap: pretty; margin: 0; }

/* --------- Graphic-device primitives ---------------------- */
.ele-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); display: inline-block; flex: 0 0 auto; }
.ele-dot--plum { background: var(--plum); }
.ele-dot--small { width: 6px; height: 6px; }

.ele-lede { position: relative; padding-left: 18px; }
.ele-lede::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle);
}

.ele-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; line-height: 1.2; }

/* --------- Buttons --------------------------------------- */
.ele-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .25s ease; }
.ele-btn__arrow { font-weight: 300; }
.ele-btn--primary { background: var(--plum); color: var(--ivory); padding: 14px 24px; border-radius: 999px; }
.ele-btn--primary:hover { background: var(--plum-80); }
.ele-btn--primary-light { background: var(--ivory); color: var(--plum); padding: 14px 24px; border-radius: 999px; }
.ele-btn--accent { background: var(--periwinkle); color: var(--plum); padding: 14px 24px; border-radius: 999px; }
.ele-btn--outline { background: transparent; color: currentColor; padding: 13px 23px; border: 1px solid currentColor; border-radius: 999px; }
.ele-btn--ghost { background: transparent; color: currentColor; padding: 14px 0; border-bottom: 1px solid currentColor; border-radius: 0; }
.ele-btn[disabled] { opacity: 0.6; cursor: default; pointer-events: none; }

/* Spinner — used inside submit buttons while a form is submitting */
@keyframes ele-spin { to { transform: rotate(360deg); } }
.ele-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ele-spin 0.55s linear infinite;
  flex-shrink: 0;
}

/* Form-level notice — success / error line below the submit button */
.ele-form-notice {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ele-form-notice::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
  margin-top: 0.35em;
}
.ele-form-notice--error { color: var(--coral, #c0392b); }
.ele-form-notice--success { color: var(--plum); opacity: 0.72; }
.ele-form-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --------- Header --------------------------------------- */
.ele-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--plum); color: var(--ivory);
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x);
  border-bottom: 1px solid rgba(243,236,225,0.08);
}
.ele-header__brand { display: inline-flex; align-items: center; }
.ele-header__estamp { height: 36px; width: 36px; display: block; }
.ele-header__nav { display: flex; gap: 28px; font-size: 14px; font-weight: 400; flex-wrap: wrap; min-width: 0; }
.ele-header__link { color: currentColor; opacity: 0.78; padding: 6px 0; transition: opacity .25s ease; }
.ele-header__link:hover { opacity: 1; }
.ele-header__link--active { opacity: 1; position: relative; }
.ele-header__link--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--periwinkle);
}
.ele-header__cta {
  background: var(--periwinkle); color: var(--plum);
  padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.ele-header__menu { display: none; }

/* ============================================================
   CONNECTOR — leading-line that bridges sections.
   Sits as the LAST child of one section or as a free element
   between two. Three variants:
     --ivory  — light ground, plum line + periwinkle dot
     --plum   — dark ground, ivory line + periwinkle dot
     --cross  — straddles a colour change; rendered as a slim
                horizontal band of the upper section's bg with
                the line + dots drawn on top.
   The annotation is small caps text that punctuates the line;
   left + right annotations create directional information.
   ============================================================ */
.ele-connector {
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--pad-x);
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  line-height: 1;
}
.ele-connector__anno {
  display: inline-flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  opacity: 0.85;
}
.ele-connector__anno::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--periwinkle); flex: 0 0 auto;
}
.ele-connector__anno--end { margin-left: auto; }
.ele-connector__anno--end::before { display: none; }
.ele-connector__anno--end::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--periwinkle); flex: 0 0 auto; margin-left: 10px;
}
.ele-connector__seg { flex: 1; height: 1px; background: currentColor; opacity: 0.32; }

.ele-connector--ivory { background: var(--ivory); color: var(--plum); padding-top: 36px; padding-bottom: 28px; }
.ele-connector--plum  { background: var(--plum);  color: var(--ivory); padding-top: 36px; padding-bottom: 28px; }

/* In-band connector — short, sits inside an existing section without its
   own padding-block (use when you want to mark a sub-anchor within a
   section rather than at its edge). */
.ele-connector--inband { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; }

/* Cross-section transition: a thin band of the OUTGOING section's bg with
   the connector laid across it. We render two stacked bands so the line
   visually walks from one zone into the next. */
.ele-transition { width: 100%; }
.ele-transition__upper, .ele-transition__lower { padding: 28px var(--pad-x); }
.ele-transition__upper { background: var(--ivory); color: var(--plum); }
.ele-transition__lower { background: var(--plum); color: var(--ivory); }
.ele-transition__line {
  display: flex; align-items: center; gap: 16px;
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1;
}
.ele-transition__anno {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.ele-transition__anno::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto;
}
.ele-transition__seg { flex: 1; height: 1px; background: currentColor; opacity: 0.32; }
.ele-transition--reverse .ele-transition__upper { background: var(--plum); color: var(--ivory); }
.ele-transition--reverse .ele-transition__lower { background: var(--ivory); color: var(--plum); }

/* ============================================================
   HERO  — Ivory, expansive (most air on the page)
   Halo bleeds off the top-right corner only; never a contained
   spotlight. Vertical centring via flex.
   ============================================================ */
.ele-hero {
  background: var(--ivory); color: var(--plum);
  padding: 0;
  position: relative;
  /* Wordmark hangs into the next section — overflow must be visible. The
     stage element below has its own overflow:hidden so internal decoration
     (halo, video edges) stays inside the hero. */
  overflow: visible;
}

/* Full-bleed cream stage: the video is the hero. Halo + callout are
   positioned overlays. Stage height = viewport minus the header so the
   first scroll position reads as one editorial moment. */
.ele-hero__stage {
  position: relative;
  width: 100%;
  /* Height set by JS via --hero-stage-h to keep the wordmark + plum strip
     in the first viewport regardless of screen size. The vw-based calc
     is a fallback for the first paint before the resize handler fires. */
  height: var(--hero-stage-h, calc(100vh - 132px - 5.5vw));
  min-height: 240px;
  overflow: hidden;
  background: var(--ivory);
}
.ele-hero__video {
  position: absolute;
  inset: 0;
}
.ele-hero__video video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pull the ring slightly upward so it sits well clear of the wordmark
     hanging across the bottom edge. */
  object-position: center 38%;
}

/* Callout layered over the hero video, top-left of the video stage.
   Sits in the upper area so the wordmark and the ring animation have
   the lower / centre of the stage to themselves. */
.ele-hero__video-callout {
  position: absolute;
  left: var(--pad-x);
  top: clamp(48px, 6vh, 96px);
  z-index: 2;
  max-width: 520px;
  color: var(--plum);
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: none;
}

/* Wordmark — periwinkle, sized down slightly with a small left/right
   padding (not edge-to-edge). Anchored to the bottom of the hero with a
   negative bottom offset so the lower portion hangs into the plum
   problem section below. z-index keeps it ABOVE the problem ground. */
/* Wordmark — periwinkle. Width and hang are set by JS via CSS variables
   on :root so the wordmark + a small plum strip always fit above the
   fold. The colour boundary is pinned to the TOP of the "E"'s bottom
   horizontal stroke (which sits at 0.684 of the wordmark's height in
   the source image, so the hang is wm-h × 0.684). The wordmark is
   centred horizontally — on tall viewports it goes full-bleed minus
   the pad-x gutter; on squat viewports it shrinks to fit and the
   surrounding cream/plum bands absorb the slack. */
.ele-hero__wordmark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--hero-wm-w, calc(100vw - 2 * var(--pad-x)));
  bottom: calc(-1 * var(--hero-wm-hang, 5.5vw));
  z-index: 5;
  pointer-events: none;
}
.ele-hero__wordmark img {
  width: 100%;
  height: auto;
  display: block;
}

.ele-hero__halo {
  position: absolute; width: 880px; height: 880px; border-radius: 50%;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--periwinkle) 90%, transparent) 0%,
    color-mix(in srgb, var(--periwinkle) 0%, transparent) 65%);
  right: -340px; top: 80px;
  opacity: 0.55; pointer-events: none; z-index: 0;
}
.ele-hero__video-callout-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 500; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.18em;
}
.ele-hero__video-callout-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--periwinkle);
  flex: 0 0 auto;
}
.ele-hero__video-callout-kicker { color: var(--plum); }
.ele-hero__video-callout-seg {
  flex: 1; height: 1px; background: var(--plum); opacity: 0.32;
  max-width: 140px;
}
.ele-hero__video-callout-statement {
  font-size: 22px; font-weight: 300; line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--plum);
  text-wrap: pretty;
}
.ele-hero__video-callout-statement em {
  font-style: normal;
  font-weight: 500;
}

/* Launch-timing line — the .ele-lede brand-bullet at a quieter scale,
   so the 2027 timing is visible the moment anyone lands. */
.ele-hero__avail {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  margin-top: 18px;
  opacity: 0.78;
}
.ele-hero[data-theme="periwinkle"] .ele-hero__avail::before { background: var(--plum); }

.ele-hero__halo--bottom {
  width: 540px; height: 540px;
  left: -240px; right: auto; top: auto; bottom: -260px;
  opacity: 0.45;
}
.ele-hero__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.ele-hero__headline {
  font-size: 132px; font-weight: 500; line-height: 0.95; letter-spacing: -0.015em;
  max-width: 1100px;
}
.ele-hero__sub {
  font-size: 28px; font-weight: 300; line-height: 1.25; letter-spacing: 0;
  max-width: 520px;
  color: color-mix(in srgb, var(--plum) 65%, transparent);
}
.ele-hero__cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

/* ============================================================
   PROBLEM STATEMENT — lifted out of the hero
   The symptom-led headline + supporting line + CTAs, given its
   own ivory section so the hero above can be a clean "wordmark
   over video with first-look callout" first viewport.
   ============================================================ */
.ele-problem {
  background: var(--ivory); color: var(--plum);
  /* Top padding clears the periwinkle wordmark that hangs down from the
     hero above. The wordmark hang is set as a CSS variable by the hero
     component (--hero-wm-hang); we add breathing room below it. */
  padding: calc(var(--hero-wm-hang, 5.5vw) + 64px) var(--pad-x) var(--pad-y-md);
  position: relative;
}
.ele-problem__inner {
  display: flex; flex-direction: column; gap: 36px;
  max-width: 1200px;
}
.ele-problem__headline {
  font-size: 132px; font-weight: 500; line-height: 0.95; letter-spacing: -0.015em;
  max-width: 1100px;
}
.ele-problem__sub {
  font-size: 26px; font-weight: 300; line-height: 1.25;
  max-width: 520px;
  color: color-mix(in srgb, var(--plum) 70%, transparent);
}
.ele-problem__cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ele-problem__cta .ele-btn--ghost { padding: 8px 0; }

/* Row layout — subtitle on the left, primary CTA on the right,
   vertically centred so the button baseline-aligns with the subtitle. */
.ele-problem__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ele-problem__row .ele-problem__sub { margin: 0; }
.ele-problem__btn {
  font-size: 18px;
  padding: 20px 36px;
  gap: 12px;
}
.ele-problem__btn .ele-btn__arrow {
  font-size: 22px;
}

/* ============================================================
   PRODUCT INTRO  — Ivory continues; ring placed asymmetrically
   on plain field, no contained Periwinkle plate. Leading-line
   callouts anchor the ring to the page rather than sitting
   inside a coloured box.
   ============================================================ */
.ele-product-intro {
  background: var(--ivory); color: var(--plum);
  padding: 24px var(--pad-x) var(--pad-y-md);
  position: relative;
}
.ele-product-intro__row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 64px;
  align-items: center;
}
.ele-product-intro__copy { display: flex; flex-direction: column; gap: 28px; max-width: 520px; }
.ele-product-intro__heading {
  font-size: 36px; font-weight: 400; line-height: 1.15; letter-spacing: -0.005em;
  text-wrap: balance;
}
.ele-product-intro__body { font-size: 16px; font-weight: 300; line-height: 1.5; max-width: 460px; }
.ele-product-intro__cta { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

/* Ring stage — ring centred so callouts can radiate from BOTH edges */
.ele-ring-stage {
  position: relative;
  min-height: 700px;
  display: flex; align-items: center; justify-content: center;
}
.ele-ring-stage__ring {
  width: auto; height: auto;
  max-width: 100%; max-height: 680px;
  object-fit: contain;
  transform: rotate(-8deg);
  filter: drop-shadow(0 30px 50px rgba(74, 15, 32, 0.16));
}
/* leading-line callouts — dot on the ring side, line + text radiating out.
   text is allowed to wrap to two lines, kept compact via max-width. */
.ele-ring-stage__callout {
  position: absolute; display: flex; align-items: center; gap: 14px;
  font-size: 13.5px; font-weight: 500; line-height: 1.3;
  z-index: 2;
}
.ele-ring-stage__callout::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--periwinkle); flex: 0 0 auto;
}
.ele-ring-stage__callout-line { width: 80px; height: 1px; background: var(--plum); opacity: 0.5; flex: 0 0 auto; }
.ele-ring-stage__callout-text {
  white-space: normal; max-width: 220px;
  text-wrap: balance; opacity: 0.9;
}

/* Legacy three-callout positions (used by the kit; not used on Home.html) */
.ele-ring-stage__callout--tl { left: 0; top: 12%; }
.ele-ring-stage__callout--bl { left: 4%; bottom: 18%; }
.ele-ring-stage__callout--tr { right: 0; top: 8%; flex-direction: row-reverse; }
.ele-ring-stage__callout--tr::before { display: none; }
.ele-ring-stage__callout--tr::after  { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto; }

/* ============================================================
   HOW IT WORKS  — Ivory, denser, functional rhythm
   ============================================================ */
.ele-product-detail {
  background: var(--ivory); color: var(--plum);
  padding: var(--pad-y-sm) var(--pad-x) var(--pad-y-md);
}
.ele-product-detail__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 56px; gap: 32px; flex-wrap: wrap;
}
.ele-product-detail__title { font-size: 52px; font-weight: 500; line-height: 0.92; max-width: 720px; }

.ele-product-detail__row {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px;
  align-items: start;
}
/* ring stage here is plain — no coloured plate, no border radius */
.ele-product-detail__stage {
  position: relative;
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
}
.ele-product-detail__ring {
  width: 100%; max-width: 420px; height: auto; object-fit: contain;
  filter: drop-shadow(0 20px 36px rgba(74, 15, 32, 0.12));
}
.ele-product-detail__specs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px;
}
.ele-spec { display: flex; flex-direction: column; gap: 8px; }
.ele-spec__row { display: flex; align-items: center; gap: 8px; }
.ele-spec__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--periwinkle); }
.ele-spec__rule { width: 24px; height: 1px; background: currentColor; opacity: 0.4; }
.ele-spec__label { font-size: 11px; font-weight: 500; opacity: 0.7; }
.ele-spec__value { font-size: 20px; font-weight: 500; line-height: 0.95; }
.ele-spec__body { font-size: 13px; font-weight: 300; line-height: 1.45; opacity: 0.78; max-width: 280px; }

.ele-disclaimer {
  margin-top: 48px; font-size: 11px; font-weight: 400; opacity: 0.65;
  display: flex; align-items: flex-start; gap: 10px; max-width: 720px; line-height: 1.5;
}

/* ============================================================
   MILESTONES  — Plum (start of long Plum band). Connector lives
   above (in Ivory), then a tightly-packed Plum strip with
   timeline dots + hairlines.
   ============================================================ */
.ele-milestones {
  background: var(--plum); color: var(--ivory);
  padding: var(--pad-y-sm) var(--pad-x) var(--pad-y-sm);
}
.ele-milestones__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 56px; gap: 32px; flex-wrap: wrap;
}
.ele-milestones__title { font-size: 56px; font-weight: 500; line-height: 1.06; }
.ele-milestones__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.ele-milestone { display: flex; flex-direction: column; gap: 10px; position: relative; padding-top: 28px; padding-right: 24px; }
.ele-milestone__dot { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--periwinkle); }
.ele-milestone__rule { position: absolute; left: 16px; top: 4px; right: 0; height: 1px; background: rgba(243,236,225,0.22); }
.ele-milestone__q { font-size: 13px; font-weight: 500; opacity: 0.78; }
.ele-milestone__label { font-size: 26px; font-weight: 500; line-height: 0.92; }
.ele-milestone__body { font-size: 13px; font-weight: 300; line-height: 1.45; opacity: 0.82; max-width: 260px; }

/* ============================================================
   PARTNERS  — denser strip, lives INSIDE the long Plum band.
   No top border (continuous Plum surface), just a small in-band
   leading line above the row.
   ============================================================ */
.ele-partners {
  background: var(--plum); color: var(--ivory);
  padding: var(--pad-y-md) var(--pad-x);
}
.ele-partners__head {
  display: flex; flex-direction: column; gap: 22px;
  max-width: 1200px;
  margin-bottom: 72px;
}
.ele-partners__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ivory); opacity: 0.85;
}
.ele-partners__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--periwinkle); flex: 0 0 auto;
}
.ele-partners__eyebrow-seg {
  flex: 0 1 120px; height: 1px; background: var(--ivory); opacity: 0.28;
}
.ele-partners__headline {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.012em;
  max-width: 22ch;
  text-wrap: balance;
}
/* Legacy kicker (kept so other sections that still use it don't break) */
.ele-partners__kicker {
  display: flex; align-items: center; gap: 16px;
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  opacity: 0.85; margin-bottom: 32px;
}
.ele-partners__kicker-anno { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ele-partners__kicker-anno::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto; }
.ele-partners__kicker-seg { flex: 1; height: 1px; background: var(--ivory); opacity: 0.25; }

.ele-partners__row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  justify-items: center;
  gap: 56px 32px;
}
.ele-partner-slot {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 72px;
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}
.ele-partner-slot:hover { opacity: 1; transform: translateY(-1px); }
.ele-partner-slot img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
/* Per-logo aspect tuning so wordmark-heavy and stacked-symbol logos
   read at similar optical weights in the row. */
.ele-partner-slot.is-wide img { max-height: 36px; }
.ele-partner-slot.is-tall img { max-height: 72px; }

/* Individual backer set as a two-line wordmark in the brand typeface,
   sized to read at the same optical weight as the logo set. */
.ele-partner-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-align: center;
  color: currentColor;
}
.ele-partner-name__line { display: block; }

/* ============================================================
   MISSION + FOUNDER  — continues on the Plum band. No contained
   cards; type + image laid directly on Plum, separated by
   leading-lines. Periwinkle right-column is removed entirely.
   ============================================================ */
.ele-md {
  background: var(--plum); color: var(--ivory);
  padding: var(--pad-y-lg) var(--pad-x);
  display: flex; flex-direction: column; gap: 0;
}

.ele-md__link {
  display: flex; align-items: center; gap: 16px;
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  line-height: 1; margin-bottom: 48px;
}
.ele-md__link-anno { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; opacity: 0.85; }
.ele-md__link-anno::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto; }
.ele-md__link-anno--end { opacity: 0.6; }
.ele-md__link-anno--end::before { display: none; }
.ele-md__link-anno--end::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto; }
.ele-md__link-seg { flex: 1; height: 1px; background: var(--ivory); opacity: 0.32; }

/* Mission moment: huge italic statement, image inset to the right */
.ele-md-mission {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 64px;
  align-items: flex-end;
  margin-bottom: var(--pad-y-md);
}
.ele-md-mission__copy {
  font-size: 56px; font-weight: 300; font-style: italic; line-height: 1.05;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--ivory) 60%, transparent);
  max-width: 18ch;
}
.ele-md-mission__copy em { font-style: italic; color: var(--ivory); }
.ele-md-mission__aside {
  display: flex; flex-direction: column; gap: 18px;
  align-self: flex-end;
}
.ele-md-mission__aside-lede {
  position: relative; padding-left: 18px;
  font-size: 14px; font-weight: 300; line-height: 1.5;
  opacity: 0.78; max-width: 36ch;
}
.ele-md-mission__aside-lede::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle);
}
.ele-md-mission__cta {
  align-self: flex-start;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  display: inline-flex; align-items: center; gap: 12px;
  padding-bottom: 4px; border-bottom: 1px solid var(--ivory);
}

/* Founder row: full-bleed photo on left (no rounded card), text on Plum on right */
.ele-md-founder {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px;
  align-items: stretch; min-height: 420px;
}
.ele-md-founder__photo {
  position: relative; overflow: hidden;
  background: #2b0913;
  min-height: 420px;
}
.ele-md-founder__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ele-md-founder__photo-anno {
  position: absolute; left: 20px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ivory); opacity: 0.8;
}
.ele-md-founder__photo-anno::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--periwinkle);
}
.ele-md-founder__body {
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding: 24px 0;
}
.ele-md-founder__eyebrow {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  display: inline-flex; align-items: center; gap: 10px; opacity: 0.78;
}
.ele-md-founder__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--periwinkle); }
.ele-md-founder__name {
  font-size: 56px; font-weight: 400; line-height: 0.94; letter-spacing: -0.01em;
}
.ele-md-founder__name small {
  display: block; font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.12em; opacity: 0.6; margin-top: 16px; line-height: 1;
}
.ele-md-founder__bio {
  position: relative; padding-left: 18px;
  font-size: 14px; font-weight: 300; font-style: italic; line-height: 1.5;
  max-width: 40ch; opacity: 0.62;
}
.ele-md-founder__bio::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle);
}
/* "At a glance" list, on Plum, no container — just hairline rules */
.ele-md-founder__list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.ele-md-founder__list-item {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 400; line-height: 1.2;
  padding: 14px 0;
  border-top: 1px solid rgba(243,236,225,0.16);
}
.ele-md-founder__list-item:last-child { border-bottom: 1px solid rgba(243,236,225,0.16); }
.ele-md-founder__list-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto; }
.ele-md-founder__list-label { flex: 0 0 auto; opacity: 0.62; min-width: 8ch; }
.ele-md-founder__list-value { flex: 1; }

/* ============================================================
   TALK TO DOCTOR  — closing moment, expansive on Plum. Continues
   the Plum band (no seam from MissionDoctorRow above). Single
   asymmetric layout, not stacked centred.
   ============================================================ */
.ele-talk {
  background: var(--plum); color: var(--ivory);
  padding: var(--pad-y-lg) var(--pad-x) var(--pad-y-md);
  position: relative; overflow: hidden;
}
/* When wrapped in .ele-closer (Talk + Signup combined block), Talk shares
   the wrapper's ivory ground — background turns transparent and text
   inverts to plum-on-ivory. The halo + hand live on the wrapper, not the
   section, so this rule strips Talk's own opaque ground and the overflow
   clip that would otherwise sever the halo at Talk's bottom edge. */
.ele-closer .ele-talk {
  background: transparent; color: var(--plum);
  overflow: visible;
  padding-bottom: 56px;
}
.ele-closer .ele-talk .ele-talk__body { opacity: 0.7; }
.ele-closer .ele-talk .ele-talk__eyebrow-seg {
  background: var(--plum); opacity: 0.28;
}
/* Single resolved composition. The hand image sits absolutely positioned
   in the right third of the section, so the row itself is just the
   left-aligned content column, capped at ~2/3 width to reserve space. */
.ele-talk__row {
  position: relative; z-index: 1;
  display: block;
}
.ele-talk__left {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 28px;
  max-width: min(64%, 760px);
}
.ele-talk__title {
  font-size: 96px; font-weight: 500; line-height: 1.0;
  letter-spacing: -0.015em; text-wrap: balance;
  margin: 0;
}
.ele-talk__tm { font-size: 0.32em; vertical-align: super; font-weight: 300; margin-left: 2px; opacity: 0.75; }
/* Supporting paragraph — sits beneath the headline at a narrower measure.
   No leading dot here: the brief calls for a resolved single composition,
   not a bullet-pointed item. */
.ele-talk__body {
  font-size: 19px; font-weight: 300; line-height: 1.5;
  max-width: 480px;
  opacity: 0.86;
  margin: 4px 0 8px;
  text-wrap: pretty;
}
.ele-talk__cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ele-talk__btn { padding: 16px 26px; font-size: 15px; }
.ele-talk__btn .ele-btn__arrow { font-size: 18px; margin-left: 2px; }

/* Hand-with-ring photograph anchored to the bottom-right of the section.
   The wrist sits flush with the bottom edge so the hand reads as entering
   the frame from below, not floating. Scaled up ~25% from the previous
   pass per art-direction notes — the ring is the focal point and needs
   to be legible at a glance. */
/* Hand image was hoisted onto .ele-closer; .ele-talk__hand is no longer
   used. Style retained only as a fallback if the section is ever rendered
   outside the closer wrapper. */
.ele-talk > .ele-talk__hand {
  position: absolute;
  right: 0; bottom: 0;
  width: 720px; max-width: 48%;
  height: auto; z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 24px 56px rgba(0, 0, 0, 0.22));
}

/* ============================================================
   CLOSER BLOCK  — wraps Talk + Signup so they read as a single
   closing composition with a shared periwinkle halo and the
   clear-cut hand floating on the right.
   ============================================================ */
.ele-closer {
  position: relative;
  background: var(--ivory);
  overflow: hidden;
  /* Isolate stacking so the halo's z-index battles stay scoped here. */
  isolation: isolate;
}
/* Inner sections share the wrapper's ivory ground; their own bg is wiped
   so the halo can pass under both without a section-edge seam.
   `!important` here is unfortunately load-bearing: the data-theme system
   stamps `background: var(--ivory) !important` on every themed section,
   so a plain override can't win. Scoped to .ele-closer descendants only. */
.ele-closer > section[data-theme] { background: transparent !important; }
.ele-closer > .ele-talk,
.ele-closer > .ele-signup { background: transparent !important; }
/* Tighten the seam between Talk and Signup so they read as one block. */
.ele-closer > .ele-signup { padding-top: 56px; }
.ele-closer > .ele-signup .ele-signup__head { margin-bottom: 56px; }

/* Halo — periwinkle radial bleeding off the right edge and feathering
   downward through both sections. Sized to feel like ambient light, not
   a painted disc — small enough to read as a soft wash, low opacity so
   the ivory ground still dominates. */
.ele-closer__halo {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  top: 120px;
  right: -260px;
  width: 880px;
  height: 1080px;
  background: radial-gradient(ellipse 55% 50% at 50% 38%,
    color-mix(in srgb, var(--periwinkle) 70%, transparent) 0%,
    color-mix(in srgb, var(--periwinkle) 48%, transparent) 32%,
    color-mix(in srgb, var(--periwinkle) 20%, transparent) 60%,
    color-mix(in srgb, var(--periwinkle) 0%, transparent) 82%);
  filter: blur(8px);
  opacity: 0.58;
}

/* Hand — pushed further right so the wrist exits via the right edge of
   the viewport rather than getting clipped by the section's bottom.
   The feather-edge SVG filter erodes ~1px of alpha to kill the white
   halo that clear-cut PNGs inherit from anti-aliased white backgrounds.
   drop-shadow is applied as a second filter step so it follows the
   feathered silhouette, not the original aliased outline. */
.ele-closer__hand {
  position: absolute;
  z-index: 1;
  right: -180px;
  /* Sit the hand against the bottom of Talk, with a small overshoot so
     the wrist tapers off-canvas-right before any bottom crop is visible. */
  top: 90px;
  width: 820px;
  max-width: 60%;
  height: auto;
  pointer-events: none;
  filter: url(#feather-edge) drop-shadow(0 28px 60px rgba(74, 15, 32, 0.18));
}

/* Closer-wrapped variants of Talk's eyebrow rules — text inverts to
   plum-on-ivory, so the segment hairline needs to inherit the same. */
.ele-closer .ele-talk__eyebrow { opacity: 1; }
.ele-closer .ele-talk__eyebrow::before { background: var(--periwinkle); }

@media (max-width: 1100px) {
  .ele-closer__hand { width: 640px; right: -140px; top: 110px; }
  .ele-closer__halo { width: 700px; height: 900px; right: -200px; }
}
@media (max-width: 880px) {
  /* On narrow viewports the two-column Signup form collapses to one
     column and the hand starts crashing into it. Pull the hand back to
     the corner, shrink, and let the halo do the heavier lifting. */
  .ele-closer__hand {
    width: 380px; max-width: 64%;
    right: -80px; top: auto; bottom: -20px;
    opacity: 0.92;
  }
  .ele-closer__halo {
    width: 460px; height: 620px;
    right: -150px; top: auto; bottom: -180px;
  }
  .ele-closer > .ele-signup { padding-top: 40px; }
  .ele-closer > .ele-signup .ele-signup__head { margin-bottom: 40px; }
}

/* ============================================================
   FOOTER  — the page's ONE Periwinkle moment. Used sparingly,
   per brand book. Three stacked zones: wordmark + nav,
   regulatory + safety, and a thin copyright strip.
   ============================================================ */
.ele-footer {
  background: var(--periwinkle); color: var(--plum);
  padding: var(--pad-y-md) var(--pad-x) var(--pad-y-sm);
}
.ele-footer__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column;
}

/* --- Zone 1 : wordmark + nav columns ---------------------- */
.ele-footer__top {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  padding-bottom: var(--pad-y-md);
}
.ele-footer__brand { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ele-footer__wordmark {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}
.ele-footer__tagline {
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  max-width: 32ch;
  opacity: 0.78;
}

.ele-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: currentColor;
  text-decoration: none;
  opacity: 0.78;
  transition: opacity .25s cubic-bezier(0.4, 0, 0.2, 1);
  align-self: flex-start;
}
.ele-footer__social:hover { opacity: 1; }
.ele-footer__social-icon { display: block; flex: none; }
.ele-footer__social-label {
  font-size: 14px;
  font-weight: 400;
}

.ele-footer__nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-self: end;
}
.ele-footer__nav-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ele-footer__nav-head {
  font-size: 11px; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.ele-footer__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ele-footer__nav-link {
  color: currentColor;
  text-decoration: none;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.4;
  opacity: 0.82;
  transition: opacity .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ele-footer__nav-link:hover { opacity: 1; }

/* --- Zone 2 : regulatory + safety ------------------------- */
.ele-footer__reg {
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  /* hairline rule — use currentColor at low opacity via border-color
     channel without mixing greys */
  border-top-color: color-mix(in oklab, currentColor 22%, transparent);
  border-bottom-color: color-mix(in oklab, currentColor 22%, transparent);
  padding: 32px 0;
  display: flex; flex-direction: column; gap: 14px;
}
.ele-footer__reg-line {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  max-width: 86ch;
  text-wrap: pretty;
  opacity: 0.88;
}
.ele-footer__reg-link {
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ele-footer__reg-link:hover { opacity: 0.7; }

/* --- Zone 3 : bottom strip — quiet IP statement ------------ */
.ele-footer__bottom {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.72;
}
.ele-footer__ip {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  max-width: none;
}
.ele-footer__origin {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-align: right;
}

/* ============================================================
   Mobile · 380px target
   ============================================================ */
@media (max-width: 880px) {
  :root {
    --pad-x: 24px;
    --pad-y-xl: 96px;
    --pad-y-lg: 72px;
    --pad-y-md: 56px;
    --pad-y-sm: 48px;
    --pad-y-xs: 32px;
  }

  .ele-header { padding: 14px var(--pad-x); }
  .ele-header__nav { display: none; }
  .ele-header__cta { display: none; }
  .ele-header__menu {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500; padding: 8px 0;
  }
  .ele-header__menu-icon { display: inline-flex; flex-direction: column; gap: 5px; }
  .ele-header__menu-icon span { width: 22px; height: 1.5px; background: currentColor; display: block; }
  .ele-header__menu-icon span:last-child { width: 14px; }

  .ele-connector, .ele-transition__upper, .ele-transition__lower { padding-left: var(--pad-x); padding-right: var(--pad-x); }

  /* Hero */
  .ele-hero { min-height: auto; }
  .ele-hero__halo { width: 480px; height: 480px; right: -200px; top: -180px; }
  .ele-hero__halo--bottom { width: 320px; height: 320px; left: -160px; bottom: -160px; }
  .ele-hero__headline { font-size: 60px; line-height: 0.98; }
  .ele-hero__sub { font-size: 18px; max-width: 320px; }
  .ele-hero__inner { gap: 24px; }
  .ele-hero__cta { gap: 12px; }
  .ele-hero__cta .ele-btn--ghost { padding: 6px 0; }
  .ele-hero__video-callout { top: 32px; bottom: auto; gap: 12px; max-width: 82%; }
  .ele-hero__video-callout-eyebrow { font-size: 10px; gap: 10px; }
  .ele-hero__video-callout-seg { max-width: 60px; }
  .ele-hero__video-callout-statement { font-size: 16px; line-height: 1.3; }
  .ele-hero__video-callout-dot { width: 6px; height: 6px; }

  /* Problem statement */
  .ele-problem { padding: var(--pad-y-sm) var(--pad-x); }
  .ele-problem__inner { gap: 24px; }
  .ele-problem__headline { font-size: 60px; line-height: 0.98; }
  .ele-problem__sub { font-size: 18px; max-width: 320px; }
  .ele-problem__cta { gap: 12px; }
  .ele-problem__cta .ele-btn--ghost { padding: 6px 0; }

  /* Product intro */
  .ele-product-intro__row { grid-template-columns: 1fr; gap: 40px; }
  .ele-product-intro__heading { font-size: 28px; }
  .ele-ring-stage { min-height: 360px; }
  .ele-ring-stage__ring { width: 96%; transform: translate(2%, 0) rotate(-6deg); }
  .ele-ring-stage__callout-line { width: 48px; }
  .ele-ring-stage__callout--tl { left: 0; top: 0; }
  .ele-ring-stage__callout--bl { left: 0; bottom: 8%; }
  .ele-ring-stage__callout--tr { right: 0; top: 0; }

  /* How it works */
  .ele-product-detail__title { font-size: 38px; }
  .ele-product-detail__row { grid-template-columns: 1fr; gap: 40px; }
  .ele-product-detail__specs { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Milestones */
  .ele-milestones__title { font-size: 40px; }
  .ele-milestones__grid { grid-template-columns: 1fr; gap: 24px; }
  .ele-milestone { padding-right: 0; padding-top: 24px; }
  .ele-milestone__rule { right: auto; width: 64px; }

  /* Partners */
  .ele-partners__headline { font-size: 32px; }
  .ele-partners__row { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .ele-partner-slot { height: 56px; }
  .ele-partner-slot.is-wide img { max-height: 28px; }
  .ele-partner-slot.is-tall img { max-height: 56px; }

  /* Mission + founder */
  .ele-md__link { margin-bottom: 32px; }
  .ele-md-mission { grid-template-columns: 1fr; gap: 32px; margin-bottom: var(--pad-y-sm); }
  .ele-md-mission__copy { font-size: 32px; max-width: none; }
  .ele-md-founder { grid-template-columns: 1fr; gap: 32px; min-height: auto; }
  .ele-md-founder__photo { min-height: 280px; }
  .ele-md-founder__name { font-size: 36px; }
  .ele-md-founder__body { padding: 0; }

  /* Talk */
  .ele-talk__row { display: block; }
  .ele-talk__left { max-width: 100%; gap: 22px; }
  .ele-talk__title { font-size: 52px; }
  .ele-talk__body { font-size: 17px; max-width: 100%; }
  /* (Halo + hand sizing for narrow viewports lives on .ele-closer__* now.) */

  /* Footer */
  .ele-footer { padding: var(--pad-y-md) var(--pad-x) var(--pad-y-sm); }
  .ele-footer__top { grid-template-columns: 1fr; gap: 48px; padding-bottom: var(--pad-y-sm); }
  .ele-footer__nav { align-self: stretch; gap: 32px; }
  .ele-footer__wordmark { max-width: 360px; }
  .ele-footer__bottom { gap: 10px; }
  .ele-footer__origin { text-align: left; }
}

@media (max-width: 420px) {
  .ele-hero__headline { font-size: 46px; }
  .ele-hero__sub { font-size: 15px; }
  .ele-problem__headline { font-size: 46px; }
  .ele-problem__sub { font-size: 15px; }
  .ele-product-intro__heading { font-size: 24px; }
  .ele-product-detail__title { font-size: 32px; }
  .ele-product-detail__specs { grid-template-columns: 1fr; gap: 20px; }
  .ele-milestones__title { font-size: 32px; }
  .ele-md-mission__copy { font-size: 26px; }
  .ele-md-founder__name { font-size: 30px; }
  .ele-talk__title { font-size: 40px; }
  .ele-footer__row { grid-template-columns: 1fr; }
  .ele-footer__nav { grid-template-columns: 1fr; gap: 28px; }
  .ele-partner-slot { flex: 1 1 100%; }
  .ele-partners__row { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   ADDITIONS · Locked-brief homepage
   ============================================================ */

/* --- ProductIntro copy column ------------------------------
   Vertical layout: wordmark + descriptor + annotation sit at
   the top (left-aligned), then the ring stage spans the full
   row width below, giving the four callouts room to radiate.
   ------------------------------------------------------------ */

.ele-product-intro__row { display: block !important; }
.ele-product-intro__copy {
  max-width: 680px;
  margin: 0 0 -64px;
  display: flex; flex-direction: column; gap: 22px;
  position: relative; z-index: 2;
}

.ele-product-intro__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1;
  color: var(--plum);
  margin-bottom: 4px;
}
.ele-product-intro__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto;
}
.ele-product-intro__eyebrow-seg { flex: 1; height: 1px; background: var(--plum); opacity: 0.28; max-width: 88px; }

.ele-product-intro__wordmark {
  display: block;
  width: 100%; max-width: 520px;
  height: auto;
  margin: 0 0 4px -4px;
}

.ele-product-intro__descriptor {
  font-size: 22px; font-weight: 400; line-height: 1.35; letter-spacing: -0.005em;
  max-width: 620px;
  color: var(--plum);
}

.ele-product-intro__anno {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  text-transform: none; letter-spacing: 0;
  color: color-mix(in srgb, var(--plum) 70%, transparent);
  max-width: 360px;
  padding-top: 4px;
}
.ele-product-intro__anno-line {
  width: 56px; height: 1px; background: var(--plum); opacity: 0.45; flex: 0 0 auto;
  margin-top: 9px;
}
.ele-product-intro__anno-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto; margin-top: 6px;
}

/* Four-callout positions on a full-width ring stage — the dot
   anchors at the ring's edge (~45° corners), with the line + text
   radiating OUTWARD. Form / Sizing sit on the left of the ring;
   Delivery / Wear on the right.

   Override any kit defaults: reset ::before / ::after for the
   right-side callouts so the dot is always nearest the ring. */
.ele-ring-stage--four {
  width: 100%;
  min-height: 660px;
  justify-content: center;
  position: relative; z-index: 1;
}
.ele-ring-stage--four .ele-ring-stage__ring {
  width: 100%;
  max-width: 1100px;
  max-height: none;
  height: auto;
  transform: rotate(-8deg);
}

/* Bigger dot, longer line, more generous text wrap */
.ele-ring-stage--four .ele-ring-stage__callout {
  font-size: 14px; gap: 14px;
}
.ele-ring-stage--four .ele-ring-stage__callout::before {
  width: 11px; height: 11px;
  box-shadow: none;
}
.ele-ring-stage--four .ele-ring-stage__callout-line { width: 80px; }
.ele-ring-stage--four .ele-ring-stage__callout-text { max-width: 180px; }

/* All four callouts: ensure ::after is hidden, ::before is the dot. */
.ele-ring-stage__callout--form::after,
.ele-ring-stage__callout--size::after,
.ele-ring-stage__callout--deliv::after,
.ele-ring-stage__callout--wear::after { content: none !important; display: none !important; }
.ele-ring-stage__callout--form::before,
.ele-ring-stage__callout--size::before,
.ele-ring-stage__callout--deliv::before,
.ele-ring-stage__callout--wear::before { display: inline-block; }

/* Left-side callouts — row-reverse so the dot ends up at the
   RIGHT edge of the element (closest to the ring), the line
   extends LEFT, and the text reads on the far left. */
.ele-ring-stage__callout--form,
.ele-ring-stage__callout--size { flex-direction: row-reverse; }

.ele-ring-stage__callout--form  { right: 60%; top: 28%; }
.ele-ring-stage__callout--size  { right: 60%; bottom: 18%; }
.ele-ring-stage__callout--deliv { left:  76%; top: 28%; flex-direction: row; }
.ele-ring-stage__callout--wear  { left:  76%; bottom: 18%; flex-direction: row; }

/* --- "How it works" head / eyebrow ----------------------- */
.ele-product-detail__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1; margin-bottom: 24px;
}
.ele-product-detail__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto;
}
.ele-product-detail__eyebrow-seg { flex: 1; height: 1px; background: var(--plum); opacity: 0.28; max-width: 88px; }

/* --- Milestones eyebrow row ----------------------------- */
.ele-milestones__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1; margin-bottom: 24px;
  color: var(--ivory); opacity: 0.85;
}
.ele-milestones__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto;
}
.ele-milestones__eyebrow-seg { flex: 1; height: 1px; background: var(--ivory); opacity: 0.28; max-width: 120px; }

/* --- Partners: new eyebrow text (full kicker line) ------ */
.ele-partners__kicker--full .ele-partners__kicker-anno {
  max-width: 56ch; opacity: 1;
}

/* ============================================================
   ABOUT SNIPPET  (Plum) — section 06 in the brief
   ============================================================ */
.ele-about {
  background: var(--plum); color: var(--ivory);
  padding: var(--pad-y-lg) var(--pad-x) var(--pad-y-md);
  position: relative;
  overflow: hidden;
}
/* Soft ivory halo bleeding in from the top-right corner \u2014 mirrors the
   periwinkle halo treatment used elsewhere, but in ivory so it reads as
   warm light against the periwinkle ground. */
.ele-about::before {
  content: "";
  position: absolute;
  top: -32%;
  right: -18%;
  width: 82%;
  max-width: 1200px;
  aspect-ratio: 1;
  background: radial-gradient(circle at 60% 40%,
    color-mix(in srgb, var(--ivory) 78%, transparent) 0%,
    color-mix(in srgb, var(--ivory) 44%, transparent) 28%,
    color-mix(in srgb, var(--ivory) 16%, transparent) 56%,
    color-mix(in srgb, var(--ivory) 0%, transparent) 82%);
  filter: blur(56px);
  pointer-events: none;
  z-index: 0;
}
.ele-about__eyebrow,
.ele-about__row { position: relative; z-index: 1; }
.ele-about__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1; margin-bottom: 48px; opacity: 0.85;
}
.ele-about__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ivory); flex: 0 0 auto;
}
.ele-about__eyebrow-seg { flex: 1; height: 1px; background: var(--ivory); opacity: 0.28; max-width: 120px; }

.ele-about__row {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px;
  align-items: start;
}
.ele-about__headline {
  font-size: 72px; font-weight: 500; line-height: 1.02; letter-spacing: -0.015em;
  max-width: 14ch;
}
.ele-about__aside {
  display: flex; flex-direction: column; gap: 28px;
  max-width: 460px; padding-bottom: 8px;
}
.ele-about__body {
  position: relative; padding-left: 0;
  font-size: 16px; font-weight: 300; line-height: 1.5;
  color: color-mix(in srgb, var(--ivory) 85%, transparent);
}
.ele-about__body::before {
  content: ""; position: absolute; left: -18px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle);
}
.ele-about__cta {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  display: inline-flex; align-items: center; gap: 12px;
  padding-bottom: 4px; border-bottom: 1px solid var(--ivory);
  align-self: flex-start;
}

/* ============================================================
   NEWS STRIP  (Plum continues) — section 07 in the brief
   ============================================================ */
.ele-news {
  background: var(--plum); color: var(--ivory);
  padding: var(--pad-y-sm) var(--pad-x) var(--pad-y-md);
}
.ele-news__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap; margin-bottom: 48px;
}
.ele-news__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1; margin-bottom: 16px; opacity: 0.85;
}
.ele-news__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto;
}
.ele-news__eyebrow-seg { flex: 1; height: 1px; background: var(--ivory); opacity: 0.28; max-width: 120px; }

.ele-news__title { font-size: 52px; font-weight: 500; line-height: 0.94; max-width: 14ch; }

.ele-news__all {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  display: inline-flex; align-items: center; gap: 10px;
  padding-bottom: 4px; border-bottom: 1px solid var(--ivory);
  margin-bottom: 10px;
}

.ele-news__list { display: flex; flex-direction: column; }
.ele-news-item {
  display: grid;
  grid-template-columns: 140px 160px 1fr auto;
  align-items: baseline;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid rgba(243,236,225,0.18);
  cursor: pointer;
  transition: background .25s ease, padding .25s ease;
}
.ele-news-item:last-child { border-bottom: 1px solid rgba(243,236,225,0.18); }
.ele-news-item:hover { background: color-mix(in srgb, var(--ivory) 4%, transparent); }
.ele-news-item__date {
  font-size: 12px; font-weight: 500; opacity: 0.72;
  display: inline-flex; align-items: center; gap: 10px;
}
.ele-news-item__date::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto;
}
.ele-news-item__cat {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  opacity: 0.7;
}
.ele-news-item__headline {
  font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -0.005em;
  text-wrap: balance; max-width: 56ch;
}
.ele-news-item__cta {
  font-size: 12px; font-weight: 500; opacity: 0.78;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.ele-news-item__cta-arrow { font-weight: 300; }

/* --- TalkToDoctor: closing CTA needs the eyebrow row ----- */
.ele-talk__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1; margin-bottom: 16px; opacity: 0.85;
}
.ele-talk__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto;
}
.ele-talk__eyebrow-seg { flex: 1; height: 1px; background: var(--ivory); opacity: 0.28; max-width: 88px; }

/* --- Hero eyebrow (matches the rest) -------------------- */
.ele-hero__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1; color: var(--plum); opacity: 0.85;
}
.ele-hero__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--periwinkle); flex: 0 0 auto;
}
.ele-hero__eyebrow-seg { flex: 1; height: 1px; background: var(--plum); opacity: 0.28; max-width: 120px; }

/* Make hero subtitle a touch more generous on Ivory */
.ele-hero__sub-locked {
  font-size: 26px; font-weight: 300; line-height: 1.25;
  max-width: 520px;
  color: color-mix(in srgb, var(--plum) 70%, transparent);
}

/* Ghost button alignment for hero secondary */
.ele-hero__cta .ele-btn--ghost { padding: 8px 0; }

/* Tweak: hide brand halos */
html[data-halo="off"] .ele-hero__halo,
html[data-halo="off"] .ele-closer__halo { display: none; }

/* Header — intermediate breakpoint so nav + CTA don't overlap.
   Below 1180px the "For healthcare professionals" pill hides; nav
   stays visible until the mobile breakpoint at 880px. */
@media (max-width: 1180px) {
  .ele-header__cta { display: none; }
  .ele-header__nav { gap: 20px; font-size: 13px; }
}
@media (max-width: 1020px) {
  .ele-header__nav { gap: 16px; font-size: 12.5px; }
  .ele-header { padding: 16px var(--pad-x); }
}

/* Regulatory footer — full-width, less timid than the kit */
.ele-disclaimer-block {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(74, 15, 32, 0.18);
  display: grid; grid-template-columns: 140px 1fr; gap: 32px;
  align-items: start;
  max-width: 980px;
}
.ele-disclaimer-block__label {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0.7;
}
.ele-disclaimer-block__label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--periwinkle);
}
.ele-disclaimer-block__body {
  font-size: 13px; font-weight: 400; line-height: 1.55;
  opacity: 0.72; max-width: 78ch;
}

/* ============================================================
   Mobile additions
   ============================================================ */
@media (max-width: 880px) {
  .ele-product-intro__wordmark { max-width: 280px; }
  .ele-product-intro__descriptor { font-size: 18px; }
  .ele-ring-stage--four { min-height: 540px; }
  .ele-ring-stage--four .ele-ring-stage__ring { max-height: 440px; }
  .ele-ring-stage__callout-line { width: 40px; }
  .ele-ring-stage__callout-text { max-width: 110px; font-size: 12px; }
  .ele-ring-stage__callout--form  { right: 68%; top: 6%; }
  .ele-ring-stage__callout--deliv { left:  68%; top: 6%; }
  .ele-ring-stage__callout--size  { right: 68%; bottom: 6%; }
  .ele-ring-stage__callout--wear  { left:  68%; bottom: 6%; }

  .ele-about__row { grid-template-columns: 1fr; gap: 32px; }
  .ele-about__headline { font-size: 44px; }

  .ele-news__title { font-size: 36px; }
  .ele-news-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }
  .ele-news-item__cta { margin-top: 8px; }

  .ele-disclaimer-block { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 420px) {
  .ele-about__headline { font-size: 32px; }
  .ele-news__title { font-size: 28px; }
  .ele-news-item__headline { font-size: 18px; }
}


/* ============================================================
   SECTION THEMES — brand-book palette swaps
   Each section root gets data-theme="ivory|plum|periwinkle".
   The override only touches the section's background + base text
   colour; nested elements inherit via currentColor where possible.
   Inverted-on-plum primary buttons and periwinkle dots are
   handled below so the contrast holds across all three palettes.
   ============================================================ */
section[data-theme="ivory"],
.ele-footer[data-theme="ivory"] {
  background: var(--ivory) !important;
  color: var(--plum) !important;
}
section[data-theme="plum"],
.ele-footer[data-theme="plum"] {
  background: var(--plum) !important;
  color: var(--ivory) !important;
}
section[data-theme="periwinkle"],
.ele-footer[data-theme="periwinkle"] {
  background: var(--periwinkle) !important;
  color: var(--plum) !important;
}

/* Hero is a special composite — the inner video band has its own
   ivory background so it shows through during the loop. Match the
   band to the section theme so re-colouring the hero actually shows. */
.ele-hero[data-theme="plum"] .ele-hero__video,
.ele-hero[data-theme="plum"] .ele-hero__video::before { background: var(--plum); }
.ele-hero[data-theme="periwinkle"] .ele-hero__video,
.ele-hero[data-theme="periwinkle"] .ele-hero__video::before { background: var(--periwinkle); }

/* Re-colour the first-look callout text to read on the new ground. */
.ele-hero[data-theme="plum"] .ele-hero__video-callout,
.ele-hero[data-theme="plum"] .ele-hero__video-callout-statement,
.ele-hero[data-theme="plum"] .ele-hero__video-callout-kicker { color: var(--ivory); }
.ele-hero[data-theme="plum"] .ele-hero__video-callout-seg { background: var(--ivory); }
.ele-hero[data-theme="periwinkle"] .ele-hero__video-callout,
.ele-hero[data-theme="periwinkle"] .ele-hero__video-callout-statement,
.ele-hero[data-theme="periwinkle"] .ele-hero__video-callout-kicker { color: var(--plum); }

/* Primary CTA inverts when the surface flips dark.
   Plum-ground & periwinkle-ground sections both want a light pill. */
[data-theme="plum"] .ele-btn--primary,
[data-theme="periwinkle"] .ele-btn--primary {
  background: var(--ivory); color: var(--plum);
}
[data-theme="plum"] .ele-btn--primary:hover,
[data-theme="periwinkle"] .ele-btn--primary:hover {
  background: color-mix(in srgb, var(--ivory) 86%, var(--plum));
}
[data-theme="plum"] .ele-btn--accent,
[data-theme="periwinkle"] .ele-btn--accent {
  background: var(--periwinkle); color: var(--plum);
}

/* Sub copy: many sections use color-mix(plum, transparent) for muted
   sub text. Re-mix against the active ground so the muted ratio holds. */
[data-theme="plum"] .ele-problem__sub,
[data-theme="plum"] .ele-hero__sub-locked {
  color: color-mix(in srgb, var(--ivory) 75%, transparent);
}
[data-theme="periwinkle"] .ele-problem__sub,
[data-theme="periwinkle"] .ele-hero__sub-locked {
  color: color-mix(in srgb, var(--plum) 70%, transparent);
}

/* Periwinkle dots disappear on a periwinkle ground — recolour to plum. */
[data-theme="periwinkle"] .ele-dot,
[data-theme="periwinkle"] .ele-hero__video-callout-dot,
[data-theme="periwinkle"] .ele-connector__anno::before,
[data-theme="periwinkle"] .ele-connector__anno--end::after,
[data-theme="periwinkle"] .ele-md__link-anno::before,
[data-theme="periwinkle"] .ele-md__link-anno--end::after,
[data-theme="periwinkle"] .ele-partners__kicker-anno::before,
[data-theme="periwinkle"] .ele-milestone__dot,
[data-theme="periwinkle"] .ele-spec__dot,
[data-theme="periwinkle"] .ele-ring-stage__callout::before,
[data-theme="periwinkle"] .ele-ring-stage__callout--tr::after,
[data-theme="periwinkle"] .ele-product-intro__anno-dot,
[data-theme="periwinkle"] .ele-hero__eyebrow::before {
  background: var(--plum);
}

/* Hairlines that were keyed to a specific bg need to re-key too. */
[data-theme="ivory"] .ele-milestone__rule { background: rgba(74, 15, 32, 0.18); }
[data-theme="periwinkle"] .ele-milestone__rule { background: rgba(74, 15, 32, 0.28); }
[data-theme="ivory"] .ele-partners__kicker-seg,
[data-theme="ivory"] .ele-md__link-seg { background: var(--plum); opacity: 0.32; }
[data-theme="periwinkle"] .ele-partners__kicker-seg,
[data-theme="periwinkle"] .ele-md__link-seg { background: var(--plum); opacity: 0.32; }

/* Partner logo placeholders fade out on light grounds otherwise. */
[data-theme="ivory"] .ele-partner-slot,
[data-theme="periwinkle"] .ele-partner-slot { color: var(--plum); opacity: 0.78; }


/* ============================================================
   PRODUCT — combined intro + how it works
   Asymmetric two-band layout: head (eyebrow / title / descriptor)
   then a left-bleed photo of a hand holding the ring with a
   periwinkle halo, paired with the four specifications stacked
   to its right.
   ============================================================ */
.ele-product {
  background: var(--ivory); color: var(--plum);
  padding: var(--pad-y-md) var(--pad-x);
  position: relative;
  overflow: hidden;
}

.ele-product__head {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 22px;
  max-width: 920px;
  margin-bottom: 72px;
}
.ele-product__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em;
  line-height: 1;
}
.ele-product__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--periwinkle); flex: 0 0 auto;
}
.ele-product__eyebrow-seg {
  flex: 1; height: 1px; background: currentColor; opacity: 0.32;
  max-width: 160px;
}
.ele-product__title {
  font-size: 88px; font-weight: 500; line-height: 1.0; letter-spacing: -0.015em;
  max-width: 16ch;
  text-wrap: balance;
}
.ele-product__descriptor {
  font-size: 24px; font-weight: 300; line-height: 1.3; letter-spacing: -0.005em;
  max-width: 640px;
  color: color-mix(in srgb, var(--plum) 78%, transparent);
}
.ele-product__anno {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1;
}
.ele-product__anno-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--periwinkle); flex: 0 0 auto;
}
.ele-product__anno-line {
  width: 56px; height: 1px; background: currentColor; opacity: 0.4; flex: 0 0 auto;
}

/* Row: full-bleed photo on the left, specs on the right.
   We use a grid that lets the photo stage extend past the section's
   horizontal padding via a negative margin on the left edge. */
/* Single-column composition: specimen ring centered under the head,
   with the four-spec card directly below. */
.ele-product__layout {
  position: relative; z-index: 1;
  display: flex;
  justify-content: center;
}

.ele-product__stage {
  grid-column: 1;
  position: relative;
  margin: 0;
  /* Bleed off the LEFT edge of the section so the wrist reads as
     cropped to that edge rather than floating. */
  margin-left: calc(-1 * var(--pad-x));
  margin-top: -56px;            /* lift the hand image up so it sits
                                   alongside the ring across the row */
  min-height: 720px;
  display: flex; align-items: center; justify-content: flex-start;
  overflow: visible;
}

/* Soft periwinkle gradient halo behind the hand. Wide, blurred and
   centred on the palm so it reads as a wash rather than a circle. */
.ele-product__halo {
  position: absolute;
  left: -2%; top: 50%;
  width: 110%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle at 46% 52%,
    color-mix(in srgb, var(--periwinkle) 82%, transparent) 0%,
    color-mix(in srgb, var(--periwinkle) 56%, transparent) 22%,
    color-mix(in srgb, var(--periwinkle) 28%, transparent) 44%,
    color-mix(in srgb, var(--periwinkle) 10%, transparent) 64%,
    color-mix(in srgb, var(--periwinkle) 0%, transparent) 84%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

/* Second soft wash bleeding in from the top-right, behind the specimen.
   Smaller and more blurred — a tonal companion to the main halo. */
.ele-product__halo-tr {
  position: absolute;
  right: -10%; top: -16%;
  width: 48%;
  max-width: 720px;
  aspect-ratio: 1;
  background: radial-gradient(circle at 65% 35%,
    color-mix(in srgb, var(--periwinkle) 56%, transparent) 0%,
    color-mix(in srgb, var(--periwinkle) 28%, transparent) 28%,
    color-mix(in srgb, var(--periwinkle) 10%, transparent) 56%,
    color-mix(in srgb, var(--periwinkle) 0%, transparent) 82%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.ele-product__hand {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;        /* larger so the ring in palm reads clearly */
  height: auto;
  /* Source PNG was flipped to enter from the LEFT — keep it that way
     here since the image now sits on the LEFT of the section. Slight
     upward shift now that the image scales 15% larger, so the wrist
     anchors against the section's left edge and the fingers reach
     upper-right toward the content.
     scale(1.15) pivots on the right edge so the palm/ring stay put
     and the arm bleeds further off the section's left edge. */
  transform: translate(-2%, -3%) scale(1.15);
  transform-origin: right center;
  filter: drop-shadow(0 28px 56px rgba(74, 15, 32, 0.18));
}

/* Right column wrapper — stacks the specimen above the specs card.
   margin-top lifts the column so the ring's top edge sits roughly at
   the level of the Estriol annotation line in the head above. */
/* Specimen + specs stack — max-width keeps the composition centred and
   tight under the head. Slight negative top-margin lifts the ring up to
   visually overlap the Estriol annotation in the head above. */
.ele-product__rightcol {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 900px;
  margin-top: -120px;
}

.ele-product__specimen {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
}

/* Specifications laid out as a soft card under the specimen ring.
   Two-by-two grid, slightly larger value & body type for readability,
   subtle plum-tinted border + a faint ivory wash for separation
   without breaking the section's tonal continuity. */
.ele-product__specs {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
  padding: 36px 40px;
  /* Pull up so the specs card sits visually close to the bottom of the
     specimen ring + Wear callout, rather than far below the tall
     specimen stage box. A touch of breathing room is kept so the eye
     reads down through the ring → Wear callout → specs card in a wide
     S-curve rather than crowding the card against the Wear line. */
  margin-top: -160px;
  border: 1px solid color-mix(in srgb, var(--plum) 20%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ivory) 70%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 24px 48px -32px rgba(74, 15, 32, 0.18);
}
.ele-product__specs .ele-spec__value { font-size: 22px; line-height: 1; }
.ele-product__specs .ele-spec__body  { font-size: 15px; line-height: 1.5; max-width: 36ch; opacity: 0.78; }
.ele-product__specs .ele-spec__label { font-size: 11.5px; letter-spacing: 0.06em; }

/* Specs style variants (Tweak panel).
   - card  (default): outlined ivory wash with border + soft shadow
   - ghost: no container, specs sit on the section bg
   - panel: filled plum-tinted panel for a heavier, branded feel */
.ele-product[data-specs-card="ghost"] .ele-product__specs {
  border: none; background: transparent; box-shadow: none; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ele-product[data-specs-card="panel"] .ele-product__specs {
  border: 1px solid color-mix(in srgb, var(--plum) 12%, transparent);
  background: color-mix(in srgb, var(--plum) 6%, var(--ivory));
  box-shadow: 0 32px 64px -40px rgba(74, 15, 32, 0.28);
}

/* ============================================================
   Specs variant — DATASHEET
   A high-end technical reference, in the brand's voice.

   Composition:
   ┌──────────────────────────────────────────────────────────────┐
   │ ● ──── Specifications · NZ registered medical device         │
   ├──────────────────────────────────────────────────────────────┤
   │ 01    FORM        Flexible silicone ring        ● 57mm/69mm  │
   │                   Medical-grade silicone...                  │
   ├──────────────────────────────────────────────────────────────┤
   │ 02    MECHANICAL  Prolapse support              ● ...        │
   │                   ...                                         │
   ├──────────────────────────────────────────────────────────────┤
   │ ...                                                           │
   ├──────────────────────────────────────────────────────────────┤
   │ ● ──── /04                  WAND 250320-WAND-757Z9C          │
   └──────────────────────────────────────────────────────────────┘

   The periwinkle numerals form a vertical cadence column that
   pulls the eye row to row. A right-aligned chip per row gives a
   scannable data point. Hover slowly reveals a periwinkle terminus
   on the row's right edge — the brand's leading-line device.
   ============================================================ */
.ele-product[data-specs-card="datasheet"] .ele-product__specs {
  counter-reset: spec;
  display: flex; flex-direction: column;
  gap: 0;
  padding: 0;
  margin-top: -90px;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Header + footer anno bars — hidden by default, shown in datasheet mode.
   The header picks up the page's eyebrow device (periwinkle dot + hairline
   + uppercase label). The footer mirrors it as a closing signature. */
.ele-product__specs-head,
.ele-product__specs-foot { display: none; }

.ele-product[data-specs-card="datasheet"] .ele-product__specs-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 22px;
  font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--plum) 70%, transparent);
  line-height: 1;
}
.ele-product[data-specs-card="datasheet"] .ele-product__specs-head-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--periwinkle); flex: 0 0 auto;
}
.ele-product[data-specs-card="datasheet"] .ele-product__specs-head-line {
  flex: 0 0 auto; width: 56px; height: 1px;
  background: currentColor; opacity: 0.4;
}
.ele-product[data-specs-card="datasheet"] .ele-product__specs-head-text {
  white-space: nowrap;
}

.ele-product[data-specs-card="datasheet"] .ele-product__specs-foot {
  display: flex; align-items: center; gap: 16px;
  padding-top: 22px;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--plum) 55%, transparent);
  line-height: 1;
}
.ele-product[data-specs-card="datasheet"] .ele-product__specs-foot-index {
  color: var(--periwinkle); letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.ele-product[data-specs-card="datasheet"] .ele-product__specs-foot-line {
  flex: 1; height: 1px;
  background: currentColor; opacity: 0.32;
}
.ele-product[data-specs-card="datasheet"] .ele-product__specs-foot-ref {
  flex: 0 0 auto; opacity: 0.78;
}

/* Spec row — 4-col grid: [counter | label | value+body | chip] */
.ele-product[data-specs-card="datasheet"] .ele-spec {
  counter-increment: spec;
  position: relative;
  display: grid;
  grid-template-columns: 64px 152px minmax(0, 1fr) 220px;
  grid-template-rows: auto auto;
  column-gap: 36px; row-gap: 6px;
  padding: 22px 0 22px;
  border-top: 1px solid color-mix(in srgb, var(--plum) 16%, transparent);
  transition: background 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ele-product[data-specs-card="datasheet"] .ele-spec:first-child {
  border-top: 1px solid color-mix(in srgb, var(--plum) 28%, transparent);
}
.ele-product[data-specs-card="datasheet"] .ele-spec:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 28%, transparent);
}

/* Hover reveal — slow fade tint + a periwinkle hairline terminus
   appears at the row's right edge. Brand says: "expose a thin
   leading-line on hover". */
.ele-product[data-specs-card="datasheet"] .ele-spec:hover {
  background: color-mix(in srgb, var(--plum) 3%, transparent);
}
.ele-product[data-specs-card="datasheet"] .ele-spec::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--periwinkle);
  opacity: 0;
  transform: translateY(-50%);
  transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ele-product[data-specs-card="datasheet"] .ele-spec:hover::after {
  width: 48px; opacity: 0.7;
}

/* Big confident numerals — periwinkle, Satoshi Medium.
   Vertical cadence column. */
.ele-product[data-specs-card="datasheet"] .ele-spec::before {
  content: counter(spec, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2;
  font-size: 32px; font-weight: 500;
  color: var(--periwinkle);
  letter-spacing: -0.01em;
  line-height: 1;
  padding-top: 2px;
  align-self: start;
}

.ele-product[data-specs-card="datasheet"] .ele-spec__row {
  grid-column: 2; grid-row: 1;
  align-items: center;
  gap: 0;
  padding-top: 8px;
}
.ele-product[data-specs-card="datasheet"] .ele-spec__dot,
.ele-product[data-specs-card="datasheet"] .ele-spec__rule { display: none; }
.ele-product[data-specs-card="datasheet"] .ele-spec__label {
  font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  opacity: 0.55;
}

.ele-product[data-specs-card="datasheet"] .ele-spec__value {
  grid-column: 3; grid-row: 1;
  font-size: 26px; font-weight: 500; line-height: 1.05;
  letter-spacing: -0.005em;
  max-width: none;
  padding-top: 2px;
}
.ele-product[data-specs-card="datasheet"] .ele-spec__body {
  grid-column: 3; grid-row: 2;
  font-size: 15px; line-height: 1.5;
  max-width: 56ch;
  opacity: 0.78;
}

/* Chip — left-aligned data point inside the right column, so the
   periwinkle dots line up vertically down the page regardless of label
   length. */
.ele-product[data-specs-card="datasheet"] .ele-spec__chip {
  grid-column: 4; grid-row: 1 / span 2;
  display: flex; align-items: center; gap: 10px;
  align-self: center;
  justify-self: start;
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--plum) 78%, transparent);
  white-space: nowrap;
}
.ele-product[data-specs-card="datasheet"] .ele-spec__chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--periwinkle); flex: 0 0 auto;
}
/* Chip is hidden by default for other variants */
.ele-product:not([data-specs-card="datasheet"]) .ele-spec__chip {
  display: none;
}

/* Responsive — collapse the chip below the body on narrower screens
   so it doesn't squeeze the value column. */
@media (max-width: 1100px) {
  .ele-product[data-specs-card="datasheet"] .ele-spec {
    grid-template-columns: 56px 140px 1fr;
  }
  .ele-product[data-specs-card="datasheet"] .ele-spec__chip {
    grid-column: 3; grid-row: 3;
    justify-self: start;
    margin-top: 12px;
  }
}
@media (max-width: 700px) {
  .ele-product[data-specs-card="datasheet"] .ele-spec {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 18px;
    padding: 24px 0;
  }
  .ele-product[data-specs-card="datasheet"] .ele-spec::before {
    font-size: 22px;
    grid-row: 1 / span 1;
  }
  .ele-product[data-specs-card="datasheet"] .ele-spec__row { grid-column: 2; grid-row: 1; padding-top: 4px; }
  .ele-product[data-specs-card="datasheet"] .ele-spec__value { grid-column: 2; grid-row: 2; font-size: 22px; }
  .ele-product[data-specs-card="datasheet"] .ele-spec__body { grid-column: 2; grid-row: 3; }
  .ele-product[data-specs-card="datasheet"] .ele-spec__chip { grid-column: 2; grid-row: 4; margin-top: 8px; }
}

/* ============================================================
   Specs variant — EDITORIAL
   Display-scale pull-quotes. Each spec is a full-width band:
   tiny "01 / FORM" eyebrow, big value, body underneath, hairline
   between. Reads like a feature magazine spread.
   ============================================================ */
.ele-product[data-specs-card="editorial"] .ele-product__specs {
  counter-reset: spec;
  display: flex; flex-direction: column;
  gap: 0;
  padding: 0;
  margin-top: -80px;
  border: none; border-radius: 0;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
.ele-product[data-specs-card="editorial"] .ele-spec {
  counter-increment: spec;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 44px 0 48px;
  border-top: 1px solid color-mix(in srgb, var(--plum) 18%, transparent);
}
.ele-product[data-specs-card="editorial"] .ele-spec:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 18%, transparent);
}
.ele-product[data-specs-card="editorial"] .ele-spec__row {
  gap: 14px; align-items: center;
}
.ele-product[data-specs-card="editorial"] .ele-spec__row::before {
  content: counter(spec, decimal-leading-zero);
  font-size: 12px; font-weight: 500;
  color: var(--periwinkle);
  letter-spacing: 0.08em;
  line-height: 1;
}
.ele-product[data-specs-card="editorial"] .ele-spec__dot { display: none; }
.ele-product[data-specs-card="editorial"] .ele-spec__rule {
  width: 32px; opacity: 0.35;
}
.ele-product[data-specs-card="editorial"] .ele-spec__label {
  font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  opacity: 0.6;
}
.ele-product[data-specs-card="editorial"] .ele-spec__value {
  font-size: 60px; font-weight: 500; line-height: 0.96;
  letter-spacing: -0.014em;
  max-width: 22ch;
  text-wrap: balance;
}
.ele-product[data-specs-card="editorial"] .ele-spec__body {
  font-size: 17px; line-height: 1.5; max-width: 60ch;
  opacity: 0.78; margin-top: 4px;
}

/* ============================================================
   Specs variant — PLUMBLOCK
   Specs sit on a full-bleed plum panel that breaks out of the
   ivory section. Periwinkle leading dots, ivory text. The most
   dramatic colour-block moment in the section.
   ============================================================ */
.ele-product[data-specs-card="plumblock"] .ele-product__rightcol {
  max-width: none;
  align-self: stretch;
}
.ele-product[data-specs-card="plumblock"] .ele-product__specs {
  margin-top: 56px;
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
  padding: 72px var(--pad-x);
  background: var(--plum);
  color: var(--ivory);
  border: none; border-radius: 0;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  grid-template-columns: 1fr 1fr;
  gap: 56px 72px;
}
.ele-product[data-specs-card="plumblock"] .ele-spec__rule {
  background: var(--periwinkle); opacity: 0.6;
  width: 32px;
}
.ele-product[data-specs-card="plumblock"] .ele-spec__label {
  color: var(--periwinkle);
  opacity: 1;
  font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
}
.ele-product[data-specs-card="plumblock"] .ele-spec__value {
  color: var(--ivory);
  font-size: 28px; font-weight: 500; line-height: 1.04;
  letter-spacing: -0.005em;
}
.ele-product[data-specs-card="plumblock"] .ele-spec__body {
  color: color-mix(in srgb, var(--ivory) 78%, transparent);
  max-width: 40ch;
}

/* Subtle reduce of the regulatory disclaimer's top margin since it now
   sits closer to the row above than in the old layout. */
.ele-product .ele-disclaimer-block {
  position: relative; z-index: 1;
  margin-top: 72px;
}

/* Compact specimen variant — large clear-cut ring with four leading-line
   callouts staggered around it (NW / W / E / SE). Callout text is a
   single inline string ("Label · description") with a wider max-width
   so it reads on 1–2 lines instead of breaking across the line-segment. */
.ele-product__specimen .ele-ring-stage--compact {
  width: 100%;
  max-width: 760px;
  min-height: 720px;
  /* Allow the ring stage to extend slightly past the right column so
     the callouts and the ring itself can grow without crowding the
     specs card below. */
  margin-right: -40px;
}
.ele-product__specimen .ele-ring-stage--compact .ele-ring-stage__ring {
  max-width: 620px;
  max-height: 620px;
  /* Pull the ring upward so its visible top edge sits ~2px below the
     Form callout dot. Visual nudge only — does not affect layout box. */
  transform: translateY(-78px);
}

.ele-product__specimen .ele-ring-stage__callout {
  gap: 14px;
}
.ele-product__specimen .ele-ring-stage__callout-line {
  width: 56px;
}
.ele-product__specimen .ele-ring-stage__callout-text {
  display: inline-block;
  max-width: 240px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.ele-ring-stage__callout-label {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Staggered callout positions — placed at NW / W / E / SE around the
   ring rather than on a four-corner square.
   Form stays anchored at its original spot; Delivery & Sizing shift up
   in lockstep with the ring (~78px ≈ 10.83% of the 720px stage); Wear
   sits 2px below the new visible bottom edge of the ring. */
.ele-product__specimen .ele-ring-stage__callout--form  { right: 60%; top: 18%;    bottom: auto; left: auto; }
.ele-product__specimen .ele-ring-stage__callout--size  { right: 68.5%; top: 33.17%; bottom: auto; left: auto; }
.ele-product__specimen .ele-ring-stage__callout--deliv { left: 60%;  top: 25.17%; right: auto;  bottom: auto; }
.ele-product__specimen .ele-ring-stage__callout--wear  { left: 60%;  top: 56.56%; right: auto;  bottom: auto; }

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .ele-product__title { font-size: 64px; }
  .ele-product__rightcol { margin-top: -40px; max-width: none; }
}
@media (max-width: 700px) {
  .ele-product { padding: var(--pad-y-sm) var(--pad-x); }
  .ele-product__head { gap: 18px; margin-bottom: 40px; }
  .ele-product__title { font-size: 40px; }
  .ele-product__descriptor { font-size: 18px; }
  .ele-product__stage { min-height: 320px; }
  .ele-product__specs { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .ele-product__specimen .ele-ring-stage--compact { min-height: 380px; max-width: none; }
  .ele-product__specimen .ele-ring-stage--compact .ele-ring-stage__ring { max-width: 280px; max-height: 280px; }
  .ele-product .ele-disclaimer-block { margin-top: 40px; }
}
@media (max-width: 420px) {
  .ele-product__title { font-size: 32px; }
}

/* ============================================================
   EDITORIAL PORTRAIT — full-bleed quiet pause.
   Sits between the About and Partners sections. No headline, no
   caption, no overlay. The image's own near-white background is
   the section's atmosphere; we use ivory as a fallback for any
   pixel-perfect gap and let the photo fill the band edge-to-edge.

   Vertical crop is intentional: the woman's face sits at ~35%
   from the top, so we use object-position to keep the face well
   above centre and let her hair + sweater anchor the lower half.
   ============================================================ */
.ele-portrait {
  background: var(--ivory);
  width: 100%;
  height: 68vh;
  min-height: 520px;
  max-height: 820px;
  overflow: hidden;
  position: relative;
}
.ele-portrait__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Image is 1500×837 with the subject anchored to the right ~70% and
     her face in the upper third. Vertical anchor kept low so there's
     breathing room above her head and the top of the image doesn't
     crop into the section above. */
  object-position: 72% 18%;
}
@media (max-width: 900px) {
  .ele-portrait { height: 56vh; min-height: 360px; max-height: 600px; }
  .ele-portrait__image { object-position: 70% 18%; }
}


/* ============================================================
   EMAIL CAPTURE — Section 07 (locked brief)

   Cream ground between the plum Partners strip and the plum Talk
   section. Two parallel forms — patients left, HCPs right — under
   a shared eyebrow + headline. Fields are bottom-rule only (no
   boxes) so the section reads editorial rather than corporate.

   Visual spec:
   - bg ivory · text plum, same vertical rhythm as About / Partners
   - eyebrow uses the periwinkle dot + ivory→plum hairline pattern
   - 2-col grid (1fr · 1px divider · 1fr) collapses to 1fr below 900px
   - submit pill is the standard plum primary, matched to the Talk
     section pill (16px 26px, 15px) so the page has one CTA shape
   ============================================================ */
.ele-signup {
  background: var(--ivory); color: var(--plum);
  padding: var(--pad-y-lg) var(--pad-x);
  position: relative;
  z-index: 2;
}

/* ---- Head (shared eyebrow + headline) ---------------------- */
.ele-signup__head {
  display: flex; flex-direction: column; gap: 22px;
  max-width: 1200px;
  margin-bottom: 80px;
}
.ele-signup__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1; opacity: 0.85;
}
.ele-signup__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--periwinkle); flex: 0 0 auto;
}
.ele-signup__eyebrow-seg {
  flex: 0 1 120px; height: 1px;
  background: var(--plum); opacity: 0.3;
}
.ele-signup__title {
  font-size: 64px; font-weight: 500; line-height: 1.02;
  letter-spacing: -0.015em; text-wrap: balance;
  margin: 0; max-width: 22ch;
}

/* ---- Two-column grid --------------------------------------- */
.ele-signup__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 96px;
  align-items: start;
  max-width: 1200px;
}
.ele-signup__divider {
  align-self: stretch;
  width: 1px;
  background: var(--plum);
  opacity: 0.16;
}

/* ---- Form column ------------------------------------------- */
.ele-signup-form {
  display: flex; flex-direction: column;
  gap: 24px;
  max-width: 460px;
}
.ele-signup-form__sublabel {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
}
.ele-signup-form__sublabel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--periwinkle);
  flex: 0 0 auto;
}
.ele-signup-form__context {
  font-size: 15px; font-weight: 300;
  line-height: 1.5;
  text-wrap: pretty;
  opacity: 0.85;
  max-width: 44ch;
  margin: -8px 0 8px;
}
.ele-signup-form__fields {
  display: flex; flex-direction: column;
  gap: 22px;
  margin-top: 4px;
}

/* ---- Field --------------------------------------------------
   Underlined treatment. Label sits above (uppercase, hairline
   tracking) with optional "optional" hint or a small "required"
   marker rendered visually as an asterisk via ::before; native
   required attribute still drives form validation. */
.ele-signup-field {
  display: flex; flex-direction: column;
  gap: 6px;
  cursor: text;
}
.ele-signup-field--select { cursor: pointer; }
.ele-signup-field__label {
  display: inline-flex; align-items: baseline;
  gap: 10px;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  line-height: 1;
  color: color-mix(in srgb, var(--plum) 70%, transparent);
}
.ele-signup-field__label-text { color: var(--plum); opacity: 0.85; }
.ele-signup-field__req {
  /* Visually hidden — replaced by a small asterisk after the label */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ele-signup-field__label-text::after {
  content: "";
}
.ele-signup-field:has(.ele-signup-field__req) .ele-signup-field__label-text::after {
  content: " *";
  color: var(--periwinkle);
  opacity: 0.9;
  margin-left: 2px;
}
.ele-signup-field__hint {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 300;
  font-size: 11px;
  opacity: 0.55;
  font-style: italic;
}
.ele-signup-field__input {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--plum) 32%, transparent);
  color: var(--plum);
  font: inherit;
  font-size: 17px; font-weight: 400;
  line-height: 1.3;
  padding: 10px 0 10px;
  width: 100%;
  border-radius: 0;
  transition: border-color .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ele-signup-field__input:hover {
  border-bottom-color: color-mix(in srgb, var(--plum) 55%, transparent);
}
.ele-signup-field__input:focus {
  outline: none;
  border-bottom-color: var(--plum);
}
.ele-signup-field__input::placeholder {
  color: color-mix(in srgb, var(--plum) 40%, transparent);
}

/* Native select needs an explicit chevron — drawn with two thin
   linear-gradient strokes so it inherits the plum hairline language. */
.ele-signup-field__select-input {
  cursor: pointer;
  padding-right: 28px;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--plum) 50%),
    linear-gradient(-45deg, transparent 50%, var(--plum) 50%);
  background-position:
    calc(100% - 14px) calc(50% + 1px),
    calc(100% - 8px)  calc(50% + 1px);
  background-size: 6px 1.5px, 6px 1.5px;
  background-repeat: no-repeat;
}
/* Subtle chevron geometry — two 6×6 triangles isn't great with
   linear-gradient. Use two angled lines instead. */
.ele-signup-field__select-input {
  background-image:
    linear-gradient(135deg, transparent 45%, var(--plum) 45%, var(--plum) 55%, transparent 55%),
    linear-gradient(45deg,  transparent 45%, var(--plum) 45%, var(--plum) 55%, transparent 55%);
  background-position:
    calc(100% - 14px) 55%,
    calc(100% - 8px)  55%;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
}
.ele-signup-field__select-input option { color: var(--plum); background: var(--ivory); }

/* ---- Submit + privacy -------------------------------------- */
.ele-signup-form__submit {
  align-self: flex-start;
  margin-top: 8px;
  padding: 16px 26px;
  font-size: 15px;
}
.ele-signup-form__submit .ele-btn__arrow {
  font-size: 18px; margin-left: 2px;
}
.ele-signup-form__privacy {
  font-size: 13px; font-weight: 300;
  line-height: 1.55;
  color: color-mix(in srgb, var(--plum) 72%, transparent);
  max-width: 48ch;
  margin: 0;
  text-wrap: pretty;
}

/* ---- Theme overrides (when user flips the section to plum
   or periwinkle via Tweaks). data-theme rule is !important on
   bg+color, so we just need to re-mix the field hairlines and
   muted text against the new ground. */
.ele-signup[data-theme="plum"] .ele-signup__eyebrow-seg,
.ele-signup[data-theme="plum"] .ele-signup__divider {
  background: var(--ivory); opacity: 0.22;
}
.ele-signup[data-theme="plum"] .ele-signup-field__label-text { color: var(--ivory); }
.ele-signup[data-theme="plum"] .ele-signup-field__input {
  color: var(--ivory);
  border-bottom-color: color-mix(in srgb, var(--ivory) 32%, transparent);
}
.ele-signup[data-theme="plum"] .ele-signup-field__input:hover {
  border-bottom-color: color-mix(in srgb, var(--ivory) 55%, transparent);
}
.ele-signup[data-theme="plum"] .ele-signup-field__input:focus {
  border-bottom-color: var(--ivory);
}
.ele-signup[data-theme="plum"] .ele-signup-field__input::placeholder {
  color: color-mix(in srgb, var(--ivory) 40%, transparent);
}
.ele-signup[data-theme="plum"] .ele-signup-field__select-input {
  background-image:
    linear-gradient(135deg, transparent 45%, var(--ivory) 45%, var(--ivory) 55%, transparent 55%),
    linear-gradient(45deg,  transparent 45%, var(--ivory) 45%, var(--ivory) 55%, transparent 55%);
}
.ele-signup[data-theme="plum"] .ele-signup-field__select-input option {
  color: var(--ivory); background: var(--plum);
}
.ele-signup[data-theme="plum"] .ele-signup-form__privacy {
  color: color-mix(in srgb, var(--ivory) 72%, transparent);
}

.ele-signup[data-theme="periwinkle"] .ele-signup__eyebrow-seg,
.ele-signup[data-theme="periwinkle"] .ele-signup__divider {
  background: var(--plum); opacity: 0.28;
}

/* ---- Responsive --------------------------------------------- */
@media (max-width: 1100px) {
  .ele-signup__grid { gap: 0 64px; }
}
@media (max-width: 900px) {
  .ele-signup { padding: var(--pad-y-md) var(--pad-x); }
  .ele-signup__head { margin-bottom: 48px; }
  .ele-signup__title { font-size: 40px; line-height: 1.04; }
  .ele-signup__grid {
    grid-template-columns: 1fr;
    gap: 56px 0;
  }
  .ele-signup__divider {
    width: 100%; height: 1px;
    align-self: auto;
  }
  .ele-signup-form { max-width: 100%; }
}
@media (max-width: 420px) {
  .ele-signup__title { font-size: 30px; }
}

/* ============================================================
   HOW IT WORKS · Specimen-ring motion
   ------------------------------------------------------------
   The ring + four leading-line callouts animate in when the stage
   scrolls into view. Mode is set via data-ring-motion on the stage;
   .js-motion (added by React) gates the hidden pre-reveal states so
   the section degrades to fully-visible if JS never runs; .is-inview
   (IntersectionObserver) triggers and replays the entrance. Ambient
   float (.is-float) is an independent, continuous idle motion.
   ============================================================ */

/* Wrapper isolates entrance transforms (scale/rotate on the wrap) from
   the ring's own resting transform + ambient float (on the img). */
.ele-ring-stage__ringwrap { display: inline-flex; }

/* Stagger order — clockwise from Form. Used as the transition-delay base. */
.ele-product__specimen .ele-ring-stage__callout--form  { --ele-cd: 0.12s; }
.ele-product__specimen .ele-ring-stage__callout--deliv { --ele-cd: 0.28s; }
.ele-product__specimen .ele-ring-stage__callout--wear  { --ele-cd: 0.44s; }
.ele-product__specimen .ele-ring-stage__callout--size  { --ele-cd: 0.60s; }

/* Line draws from the ring side: right-side callouts grow left→right,
   left-side (row-reverse) callouts grow right→left. */
.ele-ring-stage.js-motion .ele-ring-stage__callout-line { transform-origin: left center; }
.ele-ring-stage.js-motion .ele-ring-stage__callout--form .ele-ring-stage__callout-line,
.ele-ring-stage.js-motion .ele-ring-stage__callout--size .ele-ring-stage__callout-line { transform-origin: right center; }

/* --- Transitions (declared once, both directions interpolate) --- */
.ele-ring-stage.js-motion:not([data-ring-motion="off"]) .ele-ring-stage__ringwrap {
  transition: opacity 1.05s cubic-bezier(.22,.61,.36,1), transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.ele-ring-stage.js-motion:not([data-ring-motion="off"]) .ele-ring-stage__callout {
  transition: opacity .7s ease, transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--ele-cd, 0s);
}
.ele-ring-stage.js-motion:not([data-ring-motion="off"]) .ele-ring-stage__callout::before {
  transition: transform .55s cubic-bezier(.34,1.56,.64,1);
  transition-delay: var(--ele-cd, 0s);
}
.ele-ring-stage.js-motion:not([data-ring-motion="off"]) .ele-ring-stage__callout-line {
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--ele-cd, 0s) + .08s);
}
.ele-ring-stage.js-motion:not([data-ring-motion="off"]) .ele-ring-stage__callout-text {
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--ele-cd, 0s) + .18s);
}

/* --- Hidden pre-reveal state, common to all animated modes --------
   Inner parts of every callout: dot collapsed, line undrawn, text low. */
.ele-ring-stage.js-motion:not([data-ring-motion="off"]):not(.is-inview) .ele-ring-stage__callout::before { transform: scale(0); }
.ele-ring-stage.js-motion:not([data-ring-motion="off"]):not(.is-inview) .ele-ring-stage__callout-line   { transform: scaleX(0); }
.ele-ring-stage.js-motion:not([data-ring-motion="off"]):not(.is-inview) .ele-ring-stage__callout-text   { opacity: 0; transform: translateY(8px); }

/* --- Ring wrap hidden state, per mode --- */
.ele-ring-stage.js-motion[data-ring-motion="bloom"]:not(.is-inview)   .ele-ring-stage__ringwrap { opacity: 0; transform: scale(.9); }
.ele-ring-stage.js-motion[data-ring-motion="radiate"]:not(.is-inview) .ele-ring-stage__ringwrap { opacity: 0; transform: scale(.94); }
.ele-ring-stage.js-motion[data-ring-motion="trace"]:not(.is-inview)   .ele-ring-stage__ringwrap { opacity: 0; transform: scale(.96); }
.ele-ring-stage.js-motion[data-ring-motion="orbit"]:not(.is-inview)   .ele-ring-stage__ringwrap { opacity: 0; transform: rotate(-14deg) scale(.92); }

/* --- RADIATE: whole callout fans outward from the ring --- */
.ele-ring-stage.js-motion[data-ring-motion="radiate"]:not(.is-inview) .ele-ring-stage__callout--deliv,
.ele-ring-stage.js-motion[data-ring-motion="radiate"]:not(.is-inview) .ele-ring-stage__callout--wear { opacity: 0; transform: translateX(-28px); }
.ele-ring-stage.js-motion[data-ring-motion="radiate"]:not(.is-inview) .ele-ring-stage__callout--form,
.ele-ring-stage.js-motion[data-ring-motion="radiate"]:not(.is-inview) .ele-ring-stage__callout--size { opacity: 0; transform: translateX(28px); }

/* --- TRACE: slower, fully-sequential reveal (bigger stagger) --- */
.ele-ring-stage.js-motion[data-ring-motion="trace"] .ele-ring-stage__callout--form  { --ele-cd: 0.18s; }
.ele-ring-stage.js-motion[data-ring-motion="trace"] .ele-ring-stage__callout--deliv { --ele-cd: 0.50s; }
.ele-ring-stage.js-motion[data-ring-motion="trace"] .ele-ring-stage__callout--wear  { --ele-cd: 0.82s; }
.ele-ring-stage.js-motion[data-ring-motion="trace"] .ele-ring-stage__callout--size  { --ele-cd: 1.14s; }
.ele-ring-stage.js-motion[data-ring-motion="trace"]:not([data-ring-motion="off"]) .ele-ring-stage__callout-line {
  transition-duration: .8s;
}

/* --- Ambient float — gentle, continuous, around the ring's resting Y --- */
@keyframes ele-ring-bob {
  0%, 100% { transform: translateY(-78px); }
  50%      { transform: translateY(-91px); }
}
.ele-ring-stage.is-float .ele-ring-stage__ring {
  animation: ele-ring-bob 7.5s ease-in-out infinite;
}

/* --- Accessibility & print: never hide content, kill motion --- */
@media (prefers-reduced-motion: reduce) {
  .ele-ring-stage.js-motion .ele-ring-stage__ringwrap,
  .ele-ring-stage.js-motion .ele-ring-stage__callout,
  .ele-ring-stage.js-motion .ele-ring-stage__callout::before,
  .ele-ring-stage.js-motion .ele-ring-stage__callout-line,
  .ele-ring-stage.js-motion .ele-ring-stage__callout-text {
    transition: none !important; opacity: 1 !important; transform: none !important;
  }
  .ele-ring-stage.is-float .ele-ring-stage__ring { animation: none !important; }
}
@media print {
  .ele-ring-stage.js-motion .ele-ring-stage__ringwrap,
  .ele-ring-stage.js-motion .ele-ring-stage__callout,
  .ele-ring-stage.js-motion .ele-ring-stage__callout::before,
  .ele-ring-stage.js-motion .ele-ring-stage__callout-line,
  .ele-ring-stage.js-motion .ele-ring-stage__callout-text {
    opacity: 1 !important; transform: none !important;
  }
  .ele-ring-stage.is-float .ele-ring-stage__ring { animation: none !important; }
}