/* ═══════════════════════════════════════════════════════════
   technology.css — /technology ("E+ Technology" / Guided PEMF).
   tp-* namespace. Loads after base.css (see header.php), so it
   inherits all brand tokens (--accent, --ink, --radius, --sec-*,
   --body-*) and overrides per-section.
   ═══════════════════════════════════════════════════════════ */

/* ── Shared bits ──────────────────────────────────────────────── */
.page-technology .tp-section{padding:clamp(96px,11vw,150px) 0 clamp(74px,9vw,112px)}
.page-technology .tp-narrow{max-width:760px}

/* Eyebrow — uppercase magenta label, used on light sections. */
.tp-eyebrow{display:block;font-family:var(--font-body);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem}
.tp-eyebrow--on-dark{color:#F06FD6}
/* Eyebrow → heading gap: mirror the home page's .ep-headwrap standard (13px) across
   this page. The shared .ep-eyebrow chip is inline-flex with margin:0, and an
   inline-level box's vertical margin can't push the following heading down — that's
   why the gap collapsed. Making the chip block-level flex (it still hugs its text via
   the inherited max-content width) lets the 13px bottom margin land. */
.page-technology .tp-eyebrow.ep-eyebrow.ep-eyebrow{display:flex;margin:0 0 13px}
/* …except the stepper top bar, where the eyebrow sits inline with the "01 / 03". */
.page-technology .tp-method-bar .tp-eyebrow.ep-eyebrow.ep-eyebrow{display:inline-flex;margin:0}

/* Magenta→purple gradient word, for headings on WHITE backgrounds (the
   white→magenta hero gradient is invisible on white, so light sections use
   this). */
.tp-grad{
  /* starts at the heading's dark color, then fades into the brand gradient
     (black → violet → magenta), mirroring the white→gradient hero words */
  background:linear-gradient(100deg,#1A1A2E 0%,#1A1A2E 33%,#7B2FBE 70%,#CE00B8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY & RHYTHM — bigger, more confident display headings, tighter
   tracking, airier eyebrows (scoped to /technology).
   ────────────────────────────────────────────────────────────── */
.page-technology .section-heading{
  font-size:clamp(2.1rem,1rem + 3.6vw,3.9rem);
  letter-spacing:-0.032em;line-height:1.04;white-space:normal;text-wrap:balance}
.page-technology .tp-eyebrow{letter-spacing:.24em;margin-bottom:1.2rem}

/* ══════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS — hover responses on the brand easing curve.
   ────────────────────────────────────────────────────────────── */
.tp-sci-card{transition:transform .32s var(--ease),border-color .32s var(--ease),background .32s var(--ease)}
.tp-sci-card:hover{transform:translateY(-5px);border-color:rgba(240,111,214,.42);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03))}
.tp-guided-media{overflow:hidden;border-radius:var(--radius)}
.tp-guided-img{transition:transform .55s var(--ease)}
.tp-guided-media:hover .tp-guided-img{transform:scale(1.04)}

/* ══════════════════════════════════════════════════════════════
   SCROLL CHOREOGRAPHY — elements tagged [data-reveal] start hidden and ease
   in (staggered per [data-reveal-group]) as their group scrolls into view.
   Direction variants: default = up, left/right = slide, scale = zoom, fade =
   opacity only. Falls back to fully visible (reduced-motion / no JS).
   ────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:no-preference){
  .page-technology [data-reveal]{opacity:0;transform:translateY(30px);
    transition:opacity .74s cubic-bezier(.22,.61,.36,1),transform .74s cubic-bezier(.22,.61,.36,1)}
  .page-technology [data-reveal="left"]{transform:translateX(-36px)}
  .page-technology [data-reveal="right"]{transform:translateX(36px)}
  .page-technology [data-reveal="scale"]{transform:scale(.92)}
  .page-technology [data-reveal="fade"]{transform:none}
  .page-technology [data-reveal].is-revealed{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════
   HERO — contained editorial: headline + GEN3 device photo on white,
   mirroring the practitioners hero (.pr-hero). Two columns on desktop
   (copy left, photo right, vertically centered); on phones the copy
   collapses so the photo runs edge-to-edge between the headline and the
   rest. The full-bleed cell animation was retired for a calmer feel.
   ────────────────────────────────────────────────────────────── */
/* Full-viewport hero: the charging-cells video covers the whole screen. Layout
   mirrors integratedbio.com — big headline pinned to the TOP, supporting line
   pinned to the BOTTOM, on both desktop and mobile (the copy column fills the
   height and space-betweens its two children). Clip source chosen by viewport
   in an inline script; poster = a still frame (also the no-JS fallback). */
/* padding:0 cancels the global `section{padding:5.5rem 0}` (base.css) — without
   this the section padding offsets the copy so the heading never reaches the
   true top. This was the real blocker on matching integratedbio's edge layout. */
/* Hero + "What is E+" share a card-glide stack (mirrors the homepage hero →
   #tech-teaser): the hero sits BELOW and .tp-what covers it (z-index:2); the hero's
   inner content lingers via the parallax in js/site.js #8, so the section eases up
   and "eats" into the hero as you scroll. */
.tp-hero-stack{position:relative}
.tp-hero{position:relative;isolation:isolate;overflow:hidden;padding:0;z-index:0}
.tp-hero-bg{position:absolute;inset:0;z-index:0;background:#fff}
.tp-hero-vid{width:100%;height:100%;object-fit:cover;display:block}
/* Bottom-weighted scrim only (Eddie's compromise vs a full wash): darkens just the
   lower strip where the big white heading sits; the rest of the clip stays raw. */
.tp-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 36%,rgba(10,6,22,.28) 68%,rgba(10,6,22,.66) 100%)}
.tp-hero .container{position:relative;z-index:2}
/* Homepage-style placement: the copy sits LOW in the frame (lifted off the bottom,
   like .page-home #hero), left-aligned. Big white SpaceX-scale headline + a single
   factual sub-line. */
.tp-hero-copy{min-height:100svh;max-width:760px;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:flex-start;gap:clamp(14px,2vw,24px);
  padding-bottom:clamp(80px,15vh,180px)}
/* WHITE, oversized (much larger than the section h2) so it dominates like SpaceX. */
.tp-hero-h1{margin:0;color:#fff;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.9rem,7vw,5.6rem);line-height:1.0;letter-spacing:-0.03em;text-wrap:balance;max-width:13ch;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
/* Highlighted words ("charger" / "cells"): white fading into magenta→pink. */
.tp-hero-h1 .hero-grad-word{
  background:linear-gradient(96deg,#fff 0%,#fff 24%,#CE00B8 66%,#F06FD6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* One factual sub-line, white, under the headline. */
.tp-hero-sub{margin:0;max-width:46ch;color:rgba(255,255,255,.92);
  font-family:var(--font-body);font-size:var(--text-xl);line-height:1.5;letter-spacing:-0.012em;
  text-shadow:0 1px 16px rgba(0,0,0,.3)}

@media(max-width:899px){
  /* Heading now leads this section (cell moved below the copy), so use the
     site-wide section-top rhythm instead of the old tightened gap. */
  .page-technology .tp-what{padding-top:var(--sec-pt)}
}

/* ══════════════════════════════════════════════════════════════
   WHAT IS E+, full-viewport editorial: copy left, cell on the right.
   ────────────────────────────────────────────────────────────── */
/* The section fills the whole screen (min-height:100svh) with the copy vertically
   centered. Its base is a soft lavender wash (the pinkish field Eddie liked), drawn
   as a gradient so it always fills the tall section with no gaps. */
.page-technology .tp-what{position:relative;z-index:2;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  background:
    radial-gradient(58% 52% at 76% 48%,rgba(233,197,224,.38),transparent 62%),
    radial-gradient(125% 105% at 62% 28%,#f5f2fb 0%,#e9e5f3 55%,#dcd7ea 100%)}
/* The cell (tightly cropped from the photo, so its edges are just soft wash, no
   dark vignette) sits on the RIGHT in a compact square, sized by width so it stays
   consistent at any height. A radial mask feathers its edges to nothing, so it
   melts into the wash with no visible photo box. The @media below shrinks and
   recenters it for phones. */
.page-technology .tp-what::before{content:'';position:absolute;z-index:0;pointer-events:none;
  top:50%;right:clamp(3rem,13vw,13rem);transform:translateY(-50%);
  width:min(40%,540px);aspect-ratio:687/715;
  background:url('../assets/technology/tech-teaser-cell.webp') center/contain no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 60%,transparent 100%)}
.page-technology .tp-what > .container{position:relative;z-index:1;width:100%}
.tp-what-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.tp-what-copy{text-align:left}
/* Big, hero-scale (Eddie). Override the section-heading size + nowrap. */
.tp-what-h{margin:0;max-width:14ch;white-space:normal;
  font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:1.02;letter-spacing:-0.03em}
.tp-what-lead{font-family:var(--font-body);font-weight:var(--body-weight);
  font-size:var(--text-lg);line-height:1.7;color:var(--body-color);
  max-width:54ch;margin:1.2rem 0 0}
/* Phones: the cell sits BEHIND the second paragraph as a faint backdrop
   (Eddie 2026-07-07), not floating in empty space below it. The section sizes to
   its content (no full-viewport height, so no empty band), and the cell is anchored
   to the second paragraph itself so it tracks that text no matter how it reflows.
   z-index:-1 (within an isolated stacking context) keeps it behind the words; the
   soft radial mask + the cell's light tone keep the dark text readable over it. */
@media(max-width:899px){
  .page-technology .tp-what{min-height:auto;align-items:flex-start;
    padding-bottom:clamp(5rem,22vw,8rem)}   /* room below so the cell clears the NASA seam */
  .page-technology .tp-what::before{display:none}
  /* Both paragraphs go solid dark (near-black) on mobile so the copy stays crisp,
     including over the bright cell center. White would vanish on this light wash;
     dark is the high-contrast, readable choice here (Eddie). */
  .tp-what-copy .tp-what-lead{color:var(--ink)}
  .tp-what-copy .tp-what-lead strong{color:var(--ink)}
  .tp-what-copy .tp-what-lead:last-child{position:relative;isolation:isolate}
  .tp-what-copy .tp-what-lead:last-child::before{
    content:'';position:absolute;z-index:-1;pointer-events:none;
    /* Anchored just below the first paragraph (top:-6px sits in the paragraph gap),
       so the cell sits behind the SECOND paragraph only, never touching the first. */
    top:-6px;bottom:auto;left:50%;transform:translateX(-50%);
    width:clamp(185px,56vw,215px);aspect-ratio:687/715;
    background:url('../assets/technology/tech-teaser-cell.webp') center/contain no-repeat;
    -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
    mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
}
@media(min-width:900px){
  .tp-what-grid{grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,5vw,5rem)}
}

/* ══════════════════════════════════════════════════════════════
   SEE IT WORK, dark cinematic proof. A LANDSCAPE (16:9) clip held in a wide card.
   Desktop: video + copy side by side; mobile: video full-width on top, copy below.
   ────────────────────────────────────────────────────────────── */
.tp-seeit{position:relative;isolation:isolate;overflow:hidden;
  /* Fills the full viewport when scrolled to, content vertically centered (Eddie). */
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  background:#08070c;color:#fff;padding:clamp(3rem,9vh,9rem) 0}
.tp-seeit::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 55% at 80% 58%,rgba(123,47,190,.30),transparent 60%)}  /* glow moved off the top edge so the NASA to See-it-work seam stays dark-on-dark */
.tp-seeit-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* Mobile: copy (eyebrow + heading) sits ABOVE the video (Eddie). Desktop keeps
   source order (video left, copy right) via the 2-col rule below.
   Mobile also fills one full screen, content vertically centered, matching the
   desktop treatment (Eddie 2026-07-09). 100svh = the visible screen height with the
   browser toolbar showing, so it fills exactly one screen with no overscroll. */
@media(max-width:899px){
  .tp-seeit-copy{order:-1}
  .tp-seeit{min-height:100svh;justify-content:center}
}
.tp-seeit-media{display:flex;justify-content:center}
/* Resting THUMBNAIL = a 16:9 landscape crop of the poster. The clip plays full-size
   in the fullscreen lightbox on click (also 16:9, via data-video-aspect), not here. */
.tp-seeit-frame{position:relative;width:min(100%,660px);aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;background:#15121c;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
/* Click-to-play: gradient cover + "Watch video" badge; Sprout iframe mounts on click. */
.tp-seeit-trigger{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;display:block;
  background:
    radial-gradient(ellipse at 32% 26%,rgba(206,0,184,.30),transparent 55%),
    radial-gradient(ellipse at 72% 74%,rgba(123,47,190,.34),transparent 55%),
    linear-gradient(150deg,#1a0f2e 0%,#0a0512 100%)}
.tp-seeit-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
/* Sits in the LOWER area of the frame (not dead-center): centered on the subject's
   face, the frosted pill let the dark V-neck collar behind it read as a stray tail,
   and it crowded his face (Eddie 2026-07-07). top:64% drops it over the chest. */
.tp-seeit-badge{position:absolute;top:64%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:12px 22px 12px 17px;
  border-radius:100px;background:rgba(255,255,255,.16);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border:1.5px solid rgba(255,255,255,.55);
  transition:background var(--dur-hover,.25s) var(--ease)}
.tp-seeit-trigger:hover .tp-seeit-badge{background:rgba(255,255,255,.26)}
.tp-seeit-badge svg{width:15px;height:15px;fill:#fff}
.tp-seeit-badge span{font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#fff}
/* The fullscreen 9:16 lightbox is now the SHARED component (.ep-vlb in base.css),
   opened by the [data-video-lightbox] controller in js/site.js. The .tp-seeit-frame
   thumbnail above stays page-specific; only the popup moved to the shared styles. */
.tp-seeit .tp-seeit-h{margin:.5rem 0 0;color:#fff;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.4rem,5vw,4rem);line-height:1.03;letter-spacing:-0.03em}
.tp-seeit-p{font-family:var(--font-body);font-size:var(--text-lg);line-height:1.6;
  color:rgba(238,238,242,.78);max-width:44ch;margin:1.1rem 0 0}
@media(min-width:900px){
  /* Landscape video gets the wider column; copy column sized to its CONTENT (auto)
     so the visible text bounds, not an oversized empty column, are what gets
     centered. justify-content:center keeps video + copy symmetric on the row. */
  .tp-seeit-grid{grid-template-columns:minmax(0,660px) auto;
    gap:clamp(3rem,5vw,5rem);justify-content:center}
}

/* ══════════════════════════════════════════════════════════════
   THE SCIENCE — dark, elevated band. Heading + three mechanism "beats"
   (charge → decline → restore): big figure left, statement right, hairline
   dividers, scroll-revealed. Deep charcoal + refined corner glow.
   ────────────────────────────────────────────────────────────── */
.tp-science{position:relative;isolation:isolate;overflow:hidden;
  background:#08070c;color:#fff;padding:var(--sec-pt) 0 var(--sec-pb)}  /* same black as .tp-seeit below — seamless dark-to-dark (Eddie) */
.tp-science::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(48% 55% at 88% -5%,rgba(123,47,190,.34),transparent 62%)}  /* bottom-left glow removed — NASA bottom stays fully dark at the See-it-work seam */
.tp-science-wrap{max-width:1000px}
/* Single-word "NASA" hero — big and quiet (Eddie: understated, no overselling). */
.tp-science .tp-science-h{margin:0;color:#fff;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(4rem,11vw,8rem);line-height:1;letter-spacing:-0.04em}
/* Two-line body + the inline NASA-report link (underlined, "looks like a link"). */
.tp-science-lead{font-family:var(--font-body);font-size:var(--text-lg);line-height:1.6;
  color:rgba(238,238,242,.82);max-width:52ch;margin:clamp(1.4rem,3vw,2rem) 0 0}
.tp-science-link{display:inline-block;margin-top:clamp(.9rem,2.4vw,1.4rem);
  color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.5);transition:text-decoration-color .2s ease}
.tp-science-link:hover{text-decoration-color:#fff}
/* Divider for the dark sections (NASA → See it work): a centred magenta hairline
   that reads on near-black (Eddie wanted the line back between them). */
.page-technology .section-divider--dark{background:#08070c}
.page-technology .section-divider--dark::before{background:rgba(255,255,255,.22)}
/* Footnote marker (†) tying the NASA claim to the disclaimer below it. */
.tp-science-fn{color:var(--magenta)}
.tp-science-lead sup.tp-science-fn{font-size:.62em}
.tp-science .tp-grad-word{
  background:linear-gradient(100deg,#fff 0%,#fff 30%,#F06FD6 68%,#CE00B8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* Beats */
.tp-sci-beats{list-style:none;margin:clamp(2.6rem,6vw,4.6rem) 0 0;padding:0}
.tp-sci-beat{display:grid;grid-template-columns:1fr;gap:.5rem;
  padding:clamp(1.7rem,3.6vw,2.6rem) 0;border-top:1px solid rgba(255,255,255,.13)}
.tp-sci-beat:last-of-type{border-bottom:1px solid rgba(255,255,255,.13)}
.tp-sci-fig{font-family:var(--font-display);font-weight:600;line-height:.92;
  letter-spacing:-0.025em;font-size:clamp(2.8rem,7vw,4.4rem);color:#fff;
  display:block;white-space:nowrap}
.tp-sci-fig--word{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-0.02em;white-space:normal}
.tp-sci-unit{font-size:.34em;font-weight:600;color:rgba(255,255,255,.5);
  margin-left:.18em;letter-spacing:0}
.tp-sci-fig--grad{
  background:linear-gradient(100deg,#fff 0%,#F06FD6 52%,#CE00B8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.tp-sci-line{font-family:var(--font-body);font-size:var(--text-lg);line-height:1.55;
  color:rgba(238,238,242,.76);max-width:48ch;margin:0}
.tp-sci-disclaimer{font-family:var(--font-body);font-size:.78rem;line-height:1.5;
  color:rgba(255,255,255,.34);max-width:64ch;margin:clamp(2.2rem,4vw,3.2rem) 0 0}

@media(min-width:768px){
  .tp-sci-beat{grid-template-columns:minmax(11rem,15rem) 1fr;
    gap:clamp(2rem,5vw,4.5rem);align-items:baseline}
}

/* ══════════════════════════════════════════════════════════════
   BENEFITS — light editorial. White section; each benefit is a large
   circular cell animation paired with copy. The orbs stay BLACK so the
   glowing cells read, sitting as crisp dark discs on white.
   ────────────────────────────────────────────────────────────── */
.tp-benefits{background:#fff}
.tp-benefits-head{text-align:center;margin-bottom:clamp(2.8rem,5vw,4.4rem)}
.tp-benefits .tp-benefits-h{margin:0 auto;max-width:20ch;color:var(--text)}

.tp-benefit-rows{display:flex;flex-direction:column;gap:clamp(3.2rem,8vw,6.5rem)}
.tp-benefit-row{display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,5vw,2.6rem);align-items:center}
.tp-benefit-media{display:flex;justify-content:center;width:100%}
/* Circular cell orb — pure black, NO background glow (only the clip's own
   particles light it). The square→circle crop is seamless on black. */
.tp-benefit-orb{position:relative;isolation:isolate;display:block;width:clamp(220px,60vw,340px);
  aspect-ratio:1;border-radius:50%;overflow:hidden;background:#000}
.tp-benefit-orb .tp-card-vid{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
/* Pink wash over the cell clip (video orbs only, not placeholders) — lifts the
   glow toward brand pink. soft-light keeps it subtle. */
.tp-benefit-orb:not(.tp-benefit-orb--placeholder)::after{content:'';position:absolute;inset:0;
  border-radius:50%;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(circle at 50% 46%,rgba(150,72,224,.62),rgba(123,47,190,.4) 55%,transparent 82%)}
/* Placeholder orb (animation pending) — faint rim only, no gradient. */
.tp-benefit-orb--placeholder{display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tp-benefit-orb--placeholder svg{width:30%;height:30%;color:#F06FD6}
/* Copy — left-aligned, with a thin full-width rule above a numbered heading
   (matches the mobile mock: orb → rule → number + heading → paragraph). */
.tp-benefit-copy{position:relative;text-align:left}
.tp-benefit-rule{display:block;width:100%;height:1px;background:rgba(17,17,17,.12);
  margin-bottom:clamp(1.3rem,3vw,1.8rem)}
.tp-benefit-head{display:block;margin-bottom:1rem}
/* Giant thin numeral (reference-inspired) — replaces the small badge. */
.tp-benefit-num{display:block;font-family:var(--font-display);font-weight:300;
  font-size:clamp(3.4rem,3rem + 3vw,5.6rem);line-height:.82;letter-spacing:-0.04em;
  margin:0 0 .35rem;
  background:linear-gradient(125deg,#CE00B8 0%,#7B2FBE 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* Highlighter-marker swipe behind a key word (reference-inspired). */
.tp-marker{padding:0 .08em;border-radius:2px;
  background:linear-gradient(transparent 58%, rgba(206,0,184,.24) 58%)}
.tp-benefit-h{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,1rem + 1.6vw,2.1rem);letter-spacing:-0.02em;color:var(--text);margin:0}
.tp-benefit-p{font-family:var(--font-body);font-size:var(--text-lg);line-height:1.6;
  color:var(--body-color);margin:0;max-width:48ch}

@media(min-width:840px){
  /* Same order for ALL benefits: animation left, copy right (no alternating).
     Each row gets a tall, airy band so it reads as its own section. */
  .tp-benefit-rows{gap:clamp(2rem,4vw,3.5rem)}
  .tp-benefit-row{grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,7rem);min-height:68vh}
  .tp-benefit-copy{max-width:34rem;padding-left:clamp(1.8rem,3vw,2.8rem)}
  /* the divider becomes a vertical hairline on the LEFT of the copy */
  .tp-benefit-rule{position:absolute;left:0;top:0;bottom:0;width:1px;height:auto;margin:0}
}

/* ══════════════════════════════════════════════════════════════
   GUIDED DIFFERENCE — editorial spread (photo + copy).
   ────────────────────────────────────────────────────────────── */
.tp-guided-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,5rem);align-items:center}
.tp-guided-media{margin:0}
.tp-guided-img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;
  border-radius:var(--radius);background:#000}
.tp-guided-h{margin:0 0 .4rem;max-width:16ch}
.tp-guided-p{font-family:var(--font-body);font-weight:var(--body-weight);
  font-size:var(--body-size);line-height:var(--body-line);color:var(--body-color);
  max-width:46ch;margin:1.1rem 0 0}

/* ══════════════════════════════════════════════════════════════
   RESULTS FROM PROVIDERS — dark band, pull quote.
   ────────────────────────────────────────────────────────────── */
.tp-results{background:var(--ink);padding:clamp(72px,9vw,120px) 0}
.tp-results .container{text-align:center}
.tp-results .tp-eyebrow{margin-bottom:1.6rem}
.tp-results-quote{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.45rem,1rem + 2vw,2.25rem);line-height:1.3;letter-spacing:-0.02em;
  color:#F4F2F5;max-width:24ch;margin:0 auto;text-wrap:balance}

/* ══════════════════════════════════════════════════════════════
   CLOSING CTA — gradient band.
   ────────────────────────────────────────────────────────────── */
/* Option 1 "Clean light" (Eddie 2026-07-09): a near-white ground with a whisper of
   magenta glow in the top-right. Replaces the old iridescent-silk band + white scrim. */
.tp-cta-band{position:relative;isolation:isolate;overflow:hidden;text-align:left;
  padding:clamp(72px,9vw,118px) 0;
  background:radial-gradient(80% 60% at 78% 12%,rgba(206,0,184,.05),transparent 60%),#f4f5f8}
.tp-cta-band>.container{position:relative;z-index:1}
/* Device photo moved here from the old "Guided difference" section — left-aligned above the copy. */
.tp-cta-img{display:block;width:min(100%,440px);height:auto;aspect-ratio:5/3;object-fit:cover;
  border-radius:var(--radius);margin:0 0 clamp(1.8rem,4vw,2.6rem);
  box-shadow:0 24px 55px -26px rgba(26,26,46,.45)}
.tp-cta-h{font-family:var(--font-display);font-weight:600;color:var(--text);
  font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);line-height:1.1;letter-spacing:-0.02em;
  text-wrap:balance;margin:0}
.tp-cta-sub{color:var(--body-color);font-family:var(--font-body);
  font-size:var(--text-xl);line-height:1.6;max-width:48ch;margin:1.1rem 0 0}
.tp-cta-band-row{display:flex;justify-content:flex-start;margin-top:clamp(1.6rem,3vw,2.2rem)}
/* Match the home page CTA button standard: fixed 256px width + centered label
   (home sets this on .tm-cta/.mm-cta/.instrument-cta/.testi-cta). */
.tp-cta-band .ep-cta2{--ep-w:360px;max-width:100%}  /* match the home standard (now 360px) */
.tp-cta-band .ep-cta2-text{text-align:center}
/* This band's button: solid white fill, pure-black label + arrow (Eddie). */
.tp-cta-band .ep-cta2.ep-cta2--light{color:#000}
/* Bottom CTA = side-by-side (Eddie): contained device photo LEFT, copy RIGHT on
   desktop; stacked photo-over-copy on mobile. Light silk band, dark copy, white
   Apply button (the .tp-cta-band base + .ep-cta2--light already handle those). */
/* Full-viewport closing section (Eddie) — fills exactly one screen, content centred. */
.tp-cta-band--split{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.tp-cta-band--split .container{display:grid;grid-template-columns:1fr;
  gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
.tp-cta-band--split .tp-cta-img{width:100%;max-width:none;margin:0}
.tp-cta-band--split .tp-cta-wrap{max-width:560px}
/* Mobile: copy (eyebrow/heading/sub/button) ABOVE the photo (Eddie). */
@media(max-width:899px){ .tp-cta-band--split .tp-cta-wrap{order:-1} }
@media(min-width:900px){
  .tp-cta-band--split .container{grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr)}
}

/* ══════════════════════════════════════════════════════════════
   HOW IT WORKS — sticky scrollytelling (integratedbio-style). The stage pins
   under the nav; as the tall .tp-method-track scrolls past, JS sets the active
   step — the matching photo crossfades in, the number/heading/copy swap, and
   the progress bar fills. DEFAULT (no JS / reduced motion): the three steps
   stack as readable cards. JS adds .is-pinned to switch on the pinned mode.
   ────────────────────────────────────────────────────────────── */
/* Registering these as real <color> custom properties lets them ANIMATE. The scroll
   JS snaps --tp-tint / --tp-accent to each step's color on the step change, and the
   transition below fades them over ~0.7s, so every step lands with a soft color
   fade-in (Eddie 2026-07-08) instead of an imperceptible continuous morph. Both are
   inherited, so the sticky's wash gradient and the accent-colored bits all fade. */
@property --tp-tint{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --tp-accent{syntax:'<color>';inherits:true;initial-value:#7b2fbe}
/* The section itself carries the per-step tint (not plain white), so the top/bottom
   strips outside the pinned wash blend into the color instead of flashing a white seam
   against the dark section above and the tinted section below (Eddie 2026-07-08). Falls
   back to white when --tp-tint is unset (no JS / reduced motion). */
.tp-method{position:relative;background:var(--tp-tint,#fff);
  transition:--tp-tint .7s ease,--tp-accent .7s ease}
.tp-method-sticky{padding:clamp(44px,7vh,80px) 0}
/* Top bar: eyebrow + a small "01 / 03" step counter */
.tp-method-bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:1rem;margin-bottom:clamp(1.1rem,2.4vw,1.7rem)}
.tp-method-bar .tp-eyebrow{margin:0}
.tp-method-step-of{font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.16em;color:var(--muted);flex:none}
.tp-method-step-of .tp-method-now{color:var(--magenta)}
/* The big pinned heading */
.tp-method-title{font-family:var(--font-display);font-weight:600;color:var(--text);
  font-size:clamp(2.2rem,1.3rem + 3.4vw,4rem);line-height:1.02;letter-spacing:-0.03em;margin:0}
.tp-method-lead{font-family:var(--font-body);font-size:var(--text-lg);line-height:1.6;
  color:var(--body-color);max-width:46ch;margin:clamp(.8rem,2vw,1.3rem) 0 clamp(1.8rem,4vw,2.8rem)}

/* Per-step typography (shared by both modes) */
.tp-method-num{font-family:var(--font-display);font-weight:600;letter-spacing:.04em;
  font-size:clamp(1.1rem,.9rem + .6vw,1.45rem);color:var(--tp-accent,var(--magenta));margin-bottom:.45rem}
/* Step heading scaled up near the section title (Eddie: "as big as How it works"),
   with the paragraph dropped to standard body so the hierarchy is heading-led. */
.tp-method-h{font-family:var(--font-display);font-weight:600;margin:0;color:var(--text);
  font-size:clamp(2rem,1.2rem + 3vw,3.6rem);letter-spacing:-0.03em;line-height:1.03}
.tp-method-stepp{font-family:var(--font-body);font-size:var(--body-size);line-height:1.6;
  color:var(--body-color);margin:1rem 0 0;max-width:42ch}
.tp-method-shot{margin:0;display:grid;place-items:center}
.tp-method-shot img{display:block;width:auto;max-width:min(80%,360px);height:auto;
  object-fit:contain;mix-blend-mode:multiply}

/* ── DEFAULT / fallback: text-complete stacked cards (no pin, no images) ── */
.tp-method-visual{display:none}
.tp-method-progress,.tp-method-track,.tp-method-caption{display:none}
.tp-method-copy{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(1.4rem,3.5vw,2.2rem)}
.tp-method-step{display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);
  padding:clamp(20px,3.4vw,32px);box-shadow:0 24px 50px -34px rgba(26,26,46,.28)}

/* ══ PINNED MODE (.is-pinned, added by JS) ══════════════════════════════ */
/* The pinned screen carries a soft "traveling" wash: near-white in the CENTER (so
   the white-background step videos blend in with no visible box) fading to a light
   per-step tint at the EDGES. The tint hue is set by the scroll JS via --tp-tint
   (pain warm to treatment magenta to relief mint), so the whole screen quietly
   shifts color as you move. Falls back to plain white if --tp-tint is unset. */
/* Traveling color wash: a near-white CORE sits over the step video so its white
   background blends in (no visible box), fading to the per-step tint (--tp-tint) at the
   edges. The video sits LEFT on desktop and CENTER on phones, so the core is placed to
   match each (Eddie 2026-07-08: bring the color back to desktop without the white box). */
/* Drop the section's default top/bottom padding in pinned mode so the pinned wash
   butts straight against the dark section above and the tinted section below. Without
   this, that padding shows as a colored strip at the seams (Eddie 2026-07-08: kill the
   orange strip). The heading still clears the nav via the sticky container's own top
   padding below. */
.tp-method.is-pinned{padding:0}
.tp-method.is-pinned .tp-method-sticky{position:sticky;top:0;height:100vh;overflow:hidden;padding:0;
  background:radial-gradient(72% 88% at 29% 58%,#fff 0%,#fff 46%,var(--tp-tint,#fff) 100%)}
@media(max-width:899px){
  .tp-method.is-pinned .tp-method-sticky{
    background:radial-gradient(135% 74% at 50% 32%,#fff 0%,#fff 34%,var(--tp-tint,#fff) 100%)}
}
.tp-method.is-pinned .tp-method-sticky>.container{height:100%;display:flex;flex-direction:column;
  box-sizing:border-box;padding-top:clamp(86px,13vh,128px);padding-bottom:clamp(26px,5vh,50px)}
.tp-method.is-pinned .tp-method-track{display:block;height:240vh}  /* scroll length per step; lowered from 300vh so steps advance quicker (Eddie: faster), still slow enough a fast swipe does not skip them. Dial up/down to taste. */

/* the crossfade area fills the middle of the pinned screen */
.tp-method.is-pinned .tp-method-stage{flex:1;min-height:0;display:grid;
  grid-template-columns:1fr;gap:clamp(14px,3vh,26px);align-items:center}

/* photo + its progress bar share the left column (top block on mobile) */
.tp-method.is-pinned .tp-method-visualwrap{display:flex;flex-direction:column;justify-content:center;min-height:0}
.tp-method.is-pinned .tp-method-visual{display:block;position:relative;height:clamp(150px,30vh,280px);
  overflow:hidden;border-radius:var(--radius)}
/* Image transition = vertical PUSH, matched to scroll direction: the new shot
   rises up from below as the old lifts away above. Steps BEFORE the active one
   sit above the frame (translateY −101%), the active one at 0, steps AFTER it
   wait below (+101%). Scrolling up reverses it (images drop back down). The two
   moving shots tile the frame at the midpoint, so there's never a background
   gap; .tp-method-visual clips whatever is off-frame. */
.tp-method.is-pinned .tp-method-shot{position:absolute;inset:0;transform:translateY(101%);
  transition:transform .7s cubic-bezier(.76,0,.24,1)}
.tp-method.is-pinned .tp-method-shot.is-prev{transform:translateY(-101%)}
.tp-method.is-pinned .tp-method-shot.is-cur{transform:translateY(0)}
/* img absolutely fills the shot's definite box + contain — never overflows the
   copy (percentage height won't resolve on a centred grid item, so use inset). */
.tp-method.is-pinned .tp-method-shot img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:contain}
/* Step-0 is a video (white baked in, NO blend/filter — iOS-Safari video bug);
   it follows the same contain sizing as the still shots. */
.tp-method-shot .tp-method-vid{display:block}
.tp-method.is-pinned .tp-method-shot .tp-method-vid{position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain}

/* layered copy: only the active step shows (defines the height) */
.tp-method.is-pinned .tp-method-copy{position:relative;display:block;gap:0;
  min-height:clamp(170px,24vh,230px)}
.tp-method.is-pinned .tp-method-step{position:absolute;inset:0;background:none;border:0;
  box-shadow:none;padding:0;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tp-method.is-pinned .tp-method-step.is-active{position:relative;opacity:1;transform:none;
  pointer-events:auto}

/* caption: names what the current image shows, in the gap between photo and
   progress bar. The three labels stack absolutely and cross-fade per step. */
.tp-method.is-pinned .tp-method-caption{display:block;position:relative;margin:0;
  font-size:clamp(.9rem,.78rem + .55vw,1.18rem);   /* Eddie: image labels a bit bigger */
  height:1.5em;margin-top:clamp(12px,2vh,18px)}
.tp-method.is-pinned .tp-method-cap{position:absolute;left:0;right:0;top:0;opacity:0;
  font-family:var(--font-display);font-weight:600;font-size:1em;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tp-accent,var(--magenta));text-align:center;
  transition:opacity .45s var(--ease)}
.tp-method.is-pinned .tp-method-cap.is-cur{opacity:1}

/* progress bar */
/* sits directly under the photo */
/* Bolder now (4px, not a 2px hairline) so the progress reads clearly, and the fill
   travels with the per-step accent color so it feels part of the journey. */
.tp-method.is-pinned .tp-method-progress{display:block;position:relative;height:4px;
  background:rgba(20,16,30,.09);border-radius:100px;margin-top:clamp(14px,2.6vh,24px);overflow:hidden}
.tp-method.is-pinned .tp-method-progress-fill{position:absolute;inset:0;transform-origin:left;
  transform:scaleX(0);border-radius:100px;transition:transform .12s linear;
  background:var(--tp-accent,#7b2fbe)}
/* "Keep scrolling" cue — bottom-centre of the pinned panel; JS fades it out as you
   advance past the first step. Only shown in pinned mode. */
.tp-method-scrollcue{display:none}
/* More prominent + travels in the accent color, and (via the JS) it now stays
   visible through the steps instead of vanishing after the first, so it is clear
   the screen keeps moving as you scroll. */
.tp-method.is-pinned .tp-method-scrollcue{display:flex;flex-direction:column;align-items:center;gap:6px;
  position:absolute;left:50%;bottom:clamp(16px,3.5vh,38px);transform:translateX(-50%);
  color:var(--tp-accent,var(--magenta));font-family:var(--font-body);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;pointer-events:none;transition:opacity .3s ease}
.tp-method-scrollcue svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;animation:tpScrollBounce 1.6s ease-in-out infinite}
@keyframes tpScrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.tp-method-scrollcue svg{animation:none}}

/* Desktop: photo left, copy right, both centred on the pinned screen */
@media(min-width:900px){
  .tp-method.is-pinned .tp-method-stage{grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px)}
  .tp-method.is-pinned .tp-method-visual{height:clamp(300px,46vh,460px)}
  .tp-method.is-pinned .tp-method-copy{min-height:clamp(220px,30vh,300px)}
}

/* While the How-it-works stage is pinned, hide the floating CTA so it never
   covers the step copy. JS toggles body.tp-method-pinned; the .ep-fab base
   transition (in base.css) fades it out and back as the section pins/releases. */
body.tp-method-pinned .ep-fab{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px)}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ────────────────────────────────────────────────────────────── */
@media(max-width:860px){
  .tp-guided-grid{grid-template-columns:1fr;gap:clamp(1.8rem,6vw,2.4rem)}
}