/* ════════════════════════════════════════════════════════════
   practitioners.css — /practitioners
   Scoped to .page-practitioners. Light editorial sections up top,
   one dark application band at the bottom. Reuses base.css tokens
   (--magenta, --font-display, --ease, …); page-scoped values for the
   dark band only (per handoff §5).
   ════════════════════════════════════════════════════════════ */

.page-practitioners { background: #fff; }
.page-practitioners [hidden] { display: none !important; }

/* (The under-nav divider was removed in the nav redesign — the floating pill
   carries its own all-around border, so a separate bottom hairline would draw
   an odd arc on the rounded shape.) */

/* ── Eyebrow (magenta hairline label) ── */
.pr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 22px;
}
.pr-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--magenta);
  flex: none;
}
/* Centered variant — hairline on both sides (used in the application header). */
.pr-eyebrow--center { justify-content: center; }
.pr-eyebrow--center::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--magenta);
  flex: none;
}

/* ── Magenta hairline divider between light sections ── */
.pr-divider { height: 1px; background: rgba(206, 0, 184, 0.3); }

/* ── Section rhythm ── */
.pr-section { padding: clamp(64px, 9vw, 116px) 0; }

/* ════ HERO ════ */
.pr-hero { padding: clamp(104px, 14vw, 136px) 0 clamp(28px, 4vw, 52px); }   /* top clears the 68px fixed navbar; tighter bottom so the band sits closer */

/* ── Card-stack (phones): each section PINS and the next slides up and clips
   over it, like a deck of cards. .pr-story-stack wraps hero, apply, and the
   letter (#intro). Stacking order (z-index) decides who covers whom:
     hero (z0) pins first, then apply (z1, opaque white) rises over it,
     then apply pins and the letter (z2) rises over apply.
   Pin points (negative vh = how far a card scrolls up before it locks):
     --pr-hero-pin  = where the hero pins (aim: the "Technology for manual
                      therapists" subtext reaching the nav).
     --pr-apply-pin = where apply pins and the letter card clips over it.
   FORM-LOCK GUARD (the 2026-07-06 keyboard bug, fixed properly this time):
   apply holds the live demo form, and on phones the keyboard opening/closing
   (or practitioners.js calling .focus() on step change) auto-scrolls the page,
   which used to shove the letter card over the form mid-entry. The slide-over
   is now GUARDED instead of removed: while the form is in use (focus/typing),
   practitioners.js adds .is-form-lock to .pr-story-stack, lifting apply ABOVE
   the letter (z3 beats z2). Pure paint-order change, zero layout shift, so
   locking/unlocking never moves the page. A real user gesture (touchmove or
   wheel) always drops the lock at once, so deliberate scrolling gets the full
   deck effect; see the form-lock guard block in practitioners.js for the full
   release rules. ── */
.pr-story-stack { position: relative; }
@media (max-width: 768px) {
  .pr-hero {
    min-height: 100svh;   /* svh: stable, no URL-bar jump */
    position: sticky; top: var(--pr-hero-pin, -30vh); z-index: 0;
    /* Real bottom breathing room below the flags. The base 28px vanished on
       real phones because min-height:100svh + the tall photo make content fill
       the screen, leaving only that 28px; a taller desktop preview hid the
       problem. This guarantees a comfortable gap on any screen, and delays the
       demo section from rising too soon (Eddie, 2026-07-07). */
    padding-bottom: clamp(120px, 26vw, 176px);
  }
  /* .pr-apply keeps its rounded top (22px, same as the home .cases card) plus
     the soft top-edge shadow, exactly as it was before 2026-06-30. Untouched:
     this element was never part of Eddie's "square it off" request. */
  .pr-apply {
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 34px -12px rgba(26, 26, 46, 0.22);
  }
  /* The founder card: SQUARE top corners, no shadow (Eddie, 2026-07-07). The
     rounded-top + upward shadow was a "lift" cue for the old slide-over (now
     disabled), and against this section's own Aurora gradient background it
     read as a stray halo. A flat top edge lets the colour change alone mark
     the division into the founder section. */
  #intro.pr-spread {
    border-radius: 0;
    box-shadow: none;
  }
  /* Founder slide-over DISABLED (Eddie, 2026-07-07, testing the form clean):
     apply no longer pins, so the letter (#intro) simply follows it in normal
     flow and can never rise over the live demo form. The hero lift still works
     (hero is sticky below at z0, apply scrolls up over it via z1). The
     is-form-lock bump and the JS pin-clamp both auto-neutralize when apply is
     not sticky, so they sit harmless until/if the slide-over is restored. */
  .pr-apply { position: relative; z-index: 1; }
  #intro.pr-spread { position: relative; z-index: 2; }
  .pr-story-stack.is-form-lock .pr-apply { z-index: 3; }
}

/* ════ COMPACT COUNTRY-FLAG STRIP (matches the Find-a-provider hero) ════
   Flags only (no names), in a fixed-width window that gently crawls right to
   left. Lives inside .pr-hero-copy, sitting just under the social-proof avatars. */
.pr-heroflags {
  width: 300px; max-width: 100%; overflow: hidden;
  margin-top: 18px;
}
.pr-heroflags-track {
  display: flex; gap: 16px; width: max-content;
  animation: pr-heroflags-scroll 26s linear infinite;
}
@keyframes pr-heroflags-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Just the flag: natural width, hairline edge so white-edged flags (UK, USA,
   Malta) stay visible on the white hero. */
.pr-heroflag {
  height: 21px; width: auto; flex: none; display: block;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(26, 26, 46, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .pr-heroflags-track { animation: none; flex-wrap: wrap; }
}
/* Mobile: the .pr-hero-copy wrapper flattens (display:contents) so this strip
   becomes a grid item. Drop it just below the centered avatar row and center
   the block itself. */
@media (max-width: 899px) {
  .pr-heroflags { order: 5; margin-inline: auto; }
  @media (prefers-reduced-motion: reduce) {
    .pr-heroflags-track { justify-content: center; }
  }
}

/* Two-column hero: copy (headline, subtext, proof) + photo.
   Desktop: the copy block is vertically centered against a square photo.
   Mobile: the copy wrapper collapses (display:contents) so the photo sits in
   its original spot — between the subtext and the avatars — running edge to
   edge, while the copy still groups together for the desktop layout. */
.pr-hero-grid { display: grid; grid-template-columns: 1fr; row-gap: 20px; }
.pr-hero-img {
  display: block;
  width: 100%;
  height: auto;                          /* override the width/height attr hint so aspect-ratio governs */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: #ECECF0;
  box-shadow: 0 22px 55px -24px rgba(26, 26, 46, 0.4);
}
@media (max-width: 899px) {
  .pr-hero-copy  { display: contents; }  /* flatten so the photo can sit mid-copy */
  .pr-hero-grid  { row-gap: 10px; }
  .pr-h1         { order: 1; }
  .pr-hero-sub   { order: 2; margin-top: 14px; }         /* comfortable gap under the headline (~24px total) */
  .pr-hero-media { order: 3; margin: 16px 0 8px; }  /* sits within the container — rounded like the video below, not full-bleed */
  .pr-proof      { order: 4; margin-top: 14px; justify-content: center; }   /* centered avatar row */
  .pr-proof-text { align-items: center; text-align: center; }
  .pr-proof-av   { width: 32px; height: 32px; }          /* a bit smaller on mobile */
  .pr-hero-img   { aspect-ratio: 16 / 10; }   /* keeps the var(--radius) rounding + shadow so it matches the video */
}
@media (min-width: 900px) {
  .pr-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: clamp(40px, 6vw, 80px);
    align-items: center;                 /* center the copy block against the photo */
  }
  .pr-hero-copy  { grid-column: 1; }
  .pr-hero-sub   { margin-top: 8px; }
  .pr-hero-copy .pr-proof { margin-top: 28px; }
  .pr-hero-media { grid-column: 2; }
}
.pr-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);   /* same size as the homepage hero (consistency) — may wrap to 2 lines */
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
}
/* Gradient on the last word — black letters fading into magenta → pink
   (same brand colors as the homepage hero, started from the dark text
   color since this hero sits on white). */
.pr-grad {
  background: linear-gradient(100deg, var(--text) 0%, var(--text) 40%, #CE00B8 80%, #F06FD6 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Trademark mark riding above the brand name in the hero headline. */
.pr-tm {
  font-size: 0.36em;
  font-weight: 500;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.06em;
  color: var(--text);
}
/* Conditional line break in the H1 — hidden by default (desktop reads as one
   phrase), shown only on phones so the headline is exactly two lines.
   The "treatment" gradient (.pr-grad-t) is likewise phone-only — see the
   max-width:600px block in the RESPONSIVE section. */
.pr-h1-br { display: none; }
.pr-hero-sub {
  /* No base margin: the top gap is set per-breakpoint below (mobile 0, desktop
     8px). Declaring it here would override those rules — they appear earlier in
     the file, so an equal-specificity base rule wins (this caused the stubborn
     ~46px gap on phones: phantom 26px margin + the grid row-gap). */
  font-family: var(--font-body);
  font-size: var(--text-lg);   /* standard body size (matches the rest of the page copy) */
  line-height: 1.6;
  color: var(--body-color);
  max-width: 54ch;
  letter-spacing: -0.012em;
}
/* "30-day demo trial" as a quiet inline link inside the hero subtext: brand
   magenta, underlined, jumps to the form (#apply). Calm, lets the headline lead. */
.pr-hero-demolink {
  color: var(--magenta);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(206, 0, 184, 0.45);
  text-underline-offset: 3px;
  transition: color var(--dur-hover) var(--ease), text-decoration-color var(--dur-hover) var(--ease);
}
.pr-hero-demolink:hover { color: #7B2FBE; text-decoration-color: #7B2FBE; }
/* ── Social-proof avatar stack ── */
.pr-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.pr-proof-avatars { display: flex; }
.pr-proof-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(26, 26, 46, 0.18);
  background: #ECECF0;
  margin-left: -10px;
}
.pr-proof-av:first-child { margin-left: 0; }
.pr-proof-text { display: flex; flex-direction: column; line-height: 1.35; }
.pr-proof-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text); }
.pr-proof-sub { font-family: var(--font-body); font-size: 14px; color: var(--muted); line-height: 1.25; }
.pr-proof-figure {
  font-weight: 700; font-size: 1.22em; letter-spacing: -0.01em;
  background: linear-gradient(120deg, #CE00B8 0%, #7B2FBE 100%);   /* same brand gradient */
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ════ VIDEO PLAYER (click-to-play) ════ */
.pr-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #111;
}
/* gradient placeholders (no thumbnail load until played) */
.pr-video--hero {
  background:
    radial-gradient(ellipse at 30% 28%, rgba(206, 0, 184, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 70%, rgba(123, 47, 190, 0.32) 0%, transparent 55%),
    linear-gradient(135deg, #180A2E 0%, #0A0518 100%);
}
.pr-video--a {
  background:
    radial-gradient(ellipse at 30% 28%, rgba(206, 0, 184, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 70%, rgba(217, 69, 116, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, #1F0815 0%, #0A0510 100%);
}
.pr-video--b {
  background:
    radial-gradient(ellipse at 30% 28%, rgba(86, 134, 255, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 70%, rgba(123, 47, 190, 0.24) 0%, transparent 55%),
    linear-gradient(135deg, #0A1224 0%, #060A18 100%);
}
/* Real SproutVideo poster thumbnail (sits over the gradient fallback) */
.pr-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.pr-video-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: background var(--dur-hover) var(--ease);
}
.pr-video:hover .pr-video-badge { background: rgba(255, 255, 255, 0.26); }
.pr-video-badge svg { width: 15px; height: 15px; fill: #fff; }
.pr-video-badge span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.pr-video-badge--sm { top: 16px; left: 16px; padding: 9px 17px 9px 14px; }
.pr-video-badge--sm svg { width: 13px; height: 13px; }
.pr-video-badge--sm span { font-size: 10.5px; }
.pr-video-cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 14px rgba(0, 0, 0, 0.5);
}
.pr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pr-video.is-playing { cursor: default; }
.pr-video.is-playing .pr-video-poster,
.pr-video.is-playing .pr-video-badge,
.pr-video.is-playing .pr-video-cap { display: none; }

/* ════ VIDEO + LETTER SPREAD (dark section, white letter card) ════ */
/* "Aurora" treatment (Eddie picked, 2026-06-30): soft brand-colour clouds bleed
   in from the top-right corner over white, with a faint film-grain texture for a
   premium, ElevenLabs-style feel. IMPORTANT: position is set on the .pr-spread
   CLASS only, so the higher-specificity mobile rule (#intro.pr-spread) can still
   override it to position:sticky for the card-stack pin. Setting position on the
   #id here would have killed the sticky and broken the whole stack. */
.pr-spread {
  position: relative;
  /* Fill the viewport and center the founder letter vertically (Eddie 2026-07-09).
     min-height (not height) so a long letter or a short phone screen still grows
     instead of clipping. svh keeps it stable against the mobile URL bar. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(55% 45% at 86% 6%, rgba(206,0,184,.20), transparent 62%),
    radial-gradient(45% 40% at 98% 26%, rgba(240,111,214,.16), transparent 60%),
    radial-gradient(40% 38% at 74% 0%, rgba(123,47,190,.16), transparent 60%),
    #fff;
}
/* Film grain: a fine speckle texture over the glow, under the content. */
.pr-spread::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.pr-spread > .container { position: relative; z-index: 1; }   /* content rides above the grain */
.pr-spread .pr-video-sub { color: var(--muted); }
.pr-spread-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;   /* eyebrow + video sit centered vertically against the letter */
}
.pr-spread-video {
  flex: 0.95 1 min(100%, 380px);   /* a touch narrower than the letter — video stays 16:9 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pr-spread-letter { flex: 1.15 1 min(100%, 360px); min-width: 0; }
.pr-video-sub { margin: 0; font-family: var(--font-body); font-size: 13.5px; color: #9CA3AF; }

/* Founder name + role atop the letter — mirrors the About page "Our Why" block. */
.pr-letter-name {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
}
.pr-letter-name span { color: var(--muted); font-weight: 400; }
.pr-letter-role {
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
}

.pr-letter-body {
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  padding-left: clamp(20px, 4vw, 28px);   /* room for the accent band */
}
/* Vertical brand-gradient band running down the left of the letter. */
.pr-letter-body::before {
  content: '';
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 2px; border-radius: 2px;
  /* Same gradient as the hero heading (.pr-grad): starts in the dark text
     colour up top and melts into the magenta→pink accent lower down. */
  background: linear-gradient(180deg, #CE00B8 0%, #F06FD6 100%);
  opacity: 0.55;
}
.pr-letter-body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--body-color);
  letter-spacing: -0.008em;
}
.pr-sign { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(26, 26, 46, 0.08); }
.pr-sign-name { display: block; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text); }
.pr-sign-role { display: block; font-size: 13px; color: #9CA3AF; margin-top: 2px; }

/* ── Letter "memo" card (dark) ── */
.pr-memo { padding: 0; }   /* letter sits directly on the dark section — no card */
.pr-memo-head { display: flex; flex-direction: column; gap: 7px; }
.pr-memo-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: baseline;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.pr-memo-k { color: rgba(255, 255, 255, 0.42); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; }
.pr-memo-v { color: rgba(255, 255, 255, 0.78); }
.pr-memo-re { color: var(--magenta); }
.pr-memo-rule { height: 1px; background: rgba(26, 26, 46, 0.12); margin: clamp(20px, 2.6vw, 28px) 0; }
.pr-memo .pr-letter-body p { color: var(--text2); }
/* The closing line is now the call-to-action: bold white, magenta arrow. */
/* Closing line reads as plain letter text (matches .pr-letter-body p); only the
   magenta down-arrow signals there's more below — it bobs gently up and down. */
.pr-letter-cta {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 4px;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 400; line-height: 1.7;
  letter-spacing: -0.008em;
  color: var(--text2); text-decoration: none;
}
/* The closing sentence reads as a link: a hairline underline in the text colour
   (the arrow stays un-underlined). */
.pr-letter-cta span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}
.pr-memo-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pr-memo .pr-sign { margin: 0; padding: 0; border: 0; }
.pr-memo .pr-sign-name { color: var(--text); }
.pr-memo .pr-sign-role { color: var(--muted); }

/* ════ THE FAMILY (community band — rounded group photo on dark) ════ */
.pr-family {
  /* Pinkish-magenta glowing into near-black, echoing the home "Case studies"
     band but pinker (Eddie picked "Magenta", 2026-06-30). */
  background:
    radial-gradient(72% 60% at 74% 6%, rgba(206,0,184,.40), transparent 60%),
    linear-gradient(165deg, #1b0b20 0%, #08070c 72%);
  padding: clamp(40px, 6vw, 80px) 0;
}
.pr-family-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 32vw, 460px);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.85);
}
.pr-family-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  display: block;
}
.pr-family-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(36, 36, 36, 0.72) 0%, rgba(36, 36, 36, 0.36) 34%, rgba(36, 36, 36, 0) 62%),
    linear-gradient(0deg, rgba(36, 36, 36, 0.28) 0%, rgba(36, 36, 36, 0) 45%);
}
.pr-family-copy {
  position: relative; z-index: 1;
  max-width: 540px;
  padding: clamp(30px, 5vw, 56px);
}
.pr-family-h2 {
  margin: 14px 0 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.05; letter-spacing: -0.025em; color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}
.pr-family-sub {
  margin: 18px 0 0; max-width: 42ch;
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 768px) {
  .pr-family-card { align-items: flex-end; min-height: clamp(330px, 64vw, 420px); }
  .pr-family-scrim {
    background: linear-gradient(0deg, rgba(36, 36, 36, 0.72) 0%, rgba(36, 36, 36, 0.28) 46%, rgba(36, 36, 36, 0) 72%);
  }
}

/* ════ GO DEEPER (featured video + scrollable thumbnail strip) ════
   One big featured video beside the active title, then a strip of thumbnails
   (a 3-up grid on desktop, a horizontal swipe-scroll on phones). Featured swap
   + play live in practitioners.js. */
.pr-deeper-h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.05; letter-spacing: -0.025em; color: var(--text);
  text-wrap: balance;
}
.pr-deeper-reel {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  margin-top: 30px;
}
.pr-deeper-meta { min-width: 0; }
.pr-deeper-feature-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 0.9rem + 1.4vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.pr-deeper-feature-hint {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
}

/* ── Thumbnail strip ── */
.pr-deeper-strip-wrap { margin-top: clamp(20px, 2.6vw, 30px); }
.pr-deeper-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
}
.pr-deeper-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  background: #0D0D1A;
  opacity: 0.66;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
}
.pr-deeper-thumb-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}
.pr-deeper-thumb::after {                       /* scrim so the caption reads */
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.66) 100%);
}
.pr-deeper-thumb:hover { opacity: 0.9; transform: translateY(-2px); }
.pr-deeper-thumb:focus-visible { outline: none; }
.pr-deeper-thumb.is-active { opacity: 1; }
/* Active ring drawn INSIDE the thumb (an inset pseudo-ring can never be clipped
   by the horizontal scroll strip). */
.pr-deeper-thumb.is-active::before {
  content: ''; position: absolute; inset: 0; z-index: 4;
  border: 3px solid var(--magenta); border-radius: 4px; pointer-events: none;
}
.pr-deeper-thumb-caption { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 3; }
.pr-deeper-thumb-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  line-height: 1.2; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.pr-deeper-thumb-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9);
  z-index: 2; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.pr-deeper-thumb-play svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; }
.pr-deeper-thumb:hover .pr-deeper-thumb-play,
.pr-deeper-thumb.is-active .pr-deeper-thumb-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Tablet down: stack the reel (video over title) */
@media (max-width: 960px) {
  .pr-deeper-reel { grid-template-columns: 1fr; gap: 18px; align-items: start; }
}
/* Phones: the strip becomes a horizontal swipe-scroll kept inside the container. */
@media (max-width: 767px) {
  .pr-deeper-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    scrollbar-width: none;
    /* Only capture deliberate SIDEWAYS swipes. Up/down swipes pass through to
       the page, so a slightly-diagonal downward flick over this strip no longer
       yanks it (and the page) left-right (Eddie's "screen goes left and right",
       2026-07-07). overscroll-behavior-x keeps its own sideways scroll from
       tugging the page at the ends. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .pr-deeper-strip::-webkit-scrollbar { display: none; }
  .pr-deeper-thumb { flex: 0 0 47%; scroll-snap-align: start; }
}

/* ════ APPLICATION (dark band — vivid purple/magenta glows) ════ */
.pr-apply {
  /* Background + text color live in #apply.pr-apply below (white "Glow"). */
  padding: clamp(104px, 14vw, 176px) 0 clamp(168px, 22vw, 280px);   /* roomy bottom so it reads as its own section */
}
/* Phones: a comfortable section-end gap (matches the hero's own bottom
   breathing room below, same rhythm). Placed AFTER the base rule ON PURPOSE:
   same specificity, source order decides, see the CSS source-order note in
   memory. (Eddie, 2026-07-07: bumped up, first pass felt too tight.) */
@media (max-width: 768px) {
  .pr-apply { padding-bottom: clamp(110px, 20vw, 150px); }
}
/* Centered intro header (eyebrow + heading + lead) */
.pr-apply-head { text-align: center; max-width: 680px; margin: 0 auto clamp(30px, 4.5vw, 50px); }
.pr-apply-head .pr-eyebrow { margin-bottom: 18px; }
/* Matches the homepage section headings (.section-heading) — uniform size sitewide. */
.pr-apply-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--text);   /* dark heading on the white section; gradient lives on the "Demo" word */
}
@media (min-width: 861px) {
  .pr-apply-h2 { font-size: clamp(1.95rem, 3.7vw, 2.8rem); }
}
/* Brand gradient on the highlighted word (e.g. "Demo") — the canonical --btn-gradient
   (magenta→purple), same as the CTA buttons + eyebrow dots. */
.pr-grad-word {
  /* Same gradient as the hero's "Electrons Plus" word — dark text melting into
     magenta → pink (Eddie: match the hero gradient). */
  background: linear-gradient(100deg, var(--text) 0%, var(--text) 40%, #CE00B8 80%, #F06FD6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.pr-apply-lead {
  margin: 16px auto 0;
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

/* Centered wizard card */
/* Two-part card: credibility photo panel + the form, side by side on desktop.
   align-items:center keeps the SQUARE photo at its natural size (never cropped);
   the form column centers vertically beside it. Stacks on phones (see below). */
/* Rounder corners than the site --radius (6px): a deliberate exception for this
   hero CTA card only, to match the softer editorial cards in Eddie's references
   (Eddie approved, 2026-07-06). Inputs/buttons keep their own radii. */
.pr-card { border-radius: 20px; overflow: hidden; display: flex; align-items: stretch; }
.pr-wizard { max-width: 940px; margin: 0 auto; }
/* Photo panel = half the card, so the image and the form feel balanced. It fills
   its side edge to edge; the two people sit centred in the frame (the sides are
   just clinic background), so a centred cover crop trims only wall. */
.pr-card-media { flex: 0 0 50%; position: relative; background: #0E0C16; }
.pr-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Stack on narrower screens: full-width SQUARE photo on top (whole photo, no
   crop), form below. */
@media (max-width: 820px) {
  .pr-card { flex-direction: column; align-items: stretch; }
  .pr-card-media { flex: none; width: 100%; aspect-ratio: 1 / 1; }
}

/* Card header — title + "30 sec" badge */
.pr-wiz-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 4px; }
.pr-wiz-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 0.9rem + 0.9vw, 1.45rem); letter-spacing: -0.02em; color: var(--text); }
.pr-wiz-badge { flex: none; font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); background: rgba(26, 26, 46, 0.06); padding: 5px 12px; border-radius: 100px; white-space: nowrap; }

/* Steps (one shown at a time) */
.pr-step { display: none; }
/* Active step is a centered flex column so shorter steps balance their fields
   vertically within the uniform card height (no big gap dumped at the bottom). */
.pr-step.is-active { display: flex; flex-direction: column; justify-content: center; }
.pr-step > * + * { margin-top: 18px; }   /* even spacing between a step's fields/rows */
/* Edit mode: reveal every step so Simon can edit all the copy at once. */
.pr-form[data-edit] .pr-step { display: block; margin-bottom: 10px; }

/* Navigation */
.pr-wiz-nav { display: flex; align-items: center; gap: 12px; }
.pr-wiz-back {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 6px;   /* match the ep-cta2 Continue/Submit height (44px) so the nav row — and thus the card — stays the same height across steps */
  border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: #fff;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pr-wiz-back:hover { border-color: rgba(255, 255, 255, 0.55); }
.pr-wiz-back-ico { font-size: 16px; line-height: 1; }
.pr-wiz-next {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 0 28px; border: none; cursor: pointer; border-radius: 6px;
  background: var(--btn-gradient); color: #fff;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.pr-wiz-next:hover { opacity: 0.94; transform: translateY(-1px); }
.pr-wiz-nav .pr-submit-btn { width: auto; flex: 1; margin-top: 0; min-height: 44px; border-radius: 6px; }   /* match Continue/Back so the card height holds on the final step */
.pr-wiz-foot { margin: 16px 0 0; text-align: center; font-family: var(--font-body); font-size: 13px; color: var(--muted); }
@media (max-width: 520px) {
  .pr-wiz-back { width: 54px; padding: 0; justify-content: center; }
  .pr-wiz-back-label { display: none; }
}

/* ── Form ── */
/* MATTE "slate violet" treatment (Eddie picked #6, 2026-07-06): a warm-charcoal
   base with a muted, dusty slate-violet whisper (low saturation, low contrast, no
   shiny bloom) and a fine grain over the top. Reads like soft matte paper, an
   ElevenLabs feel. Scoped to the form only; the photo and white section stay clean. */
.pr-form {
  display: flex; flex-direction: column; gap: 22px;
  flex: 1 1 auto; align-self: stretch; justify-content: center;
  padding: clamp(26px, 3vw, 44px);
  position: relative;
  color: #fff;
  background:
    radial-gradient(140% 110% at 82% -12%, rgba(110,106,152,.17), transparent 66%),
    radial-gradient(120% 100% at 6% 112%, rgba(86,74,118,.15), transparent 66%),
    #191922;
}
/* Film grain: prominent for the matte texture, screened over the dark base. */
.pr-form::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .6; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
.pr-form > * { position: relative; z-index: 1; }   /* content rides above the grain */
.pr-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 18px;
}
.pr-field { display: flex; flex-direction: column; }
.pr-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}
.pr-req { color: var(--magenta); }
.pr-opt { font-size: 11.5px; font-weight: 400; color: rgba(255, 255, 255, 0.35); }

.pr-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.18s var(--ease);
}
.pr-input::placeholder { color: rgba(255, 255, 255, 0.28); }
.pr-input:focus { outline: none; border-color: var(--magenta); }
.pr-input.pr-invalid { border-color: #ff5d6b; }
.pr-textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.pr-hint { margin-top: 7px; font-family: var(--font-body); font-size: 12.5px; color: rgba(255, 255, 255, 0.4); line-height: 1.4; }
.pr-err { margin-top: 6px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.35; color: #ff8a94; }

/* ── Practitioner-type picker — full-width rows: icon · label · checkbox ── */
.pr-chips { display: flex; flex-direction: column; gap: 8px; }
.pr-chip {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 9px 14px;
  border-radius: var(--radius);
  cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500; line-height: 1.2;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.pr-chip:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05); color: #fff; }

.pr-chip-ico {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}
.pr-chip-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pr-chip-label { flex: 1 1 auto; }
.pr-chip-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%; position: relative;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  transition: background 0.15s, border-color 0.15s;
}

/* Selected (multi-select): magenta-tinted row, filled check. */
.pr-chip.is-on { border-color: var(--magenta); background: rgba(206, 0, 184, 0.10); color: #fff; }
.pr-chip.is-on .pr-chip-ico { border-color: rgba(206, 0, 184, 0.5); color: #fff; }
.pr-chip.is-on .pr-chip-check { background: var(--magenta); border-color: var(--magenta); }
.pr-chip.is-on .pr-chip-check::after {
  content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pr-chips.pr-invalid-group .pr-chip { border-color: #ff5d6b; }
.pr-other { margin-top: 14px; }

/* Phones: shrink the form so it sits closer to the photo's height (Eddie,
   2026-07-07). Two moves, both phone-only (desktop's single-column picker +
   vertically-centered fields already look right, Eddie's call):
   1. The practitioner-type picker goes TWO columns, so step 2 is no longer the
      tallest step. Every step is pinned to the tallest one's height by
      equalizeSteps(), so lowering step 2 lowers the whole form's locked height,
      which is what leaves steps 1 and 3 floating in a big empty box.
   2. Top-align each step's content, so any leftover slack drops to the bottom
      instead of padding above AND below the fields. */
@media (max-width: 768px) {
  .pr-step.is-active { justify-content: flex-start; }
  /* minmax(0,1fr): the "0" lets each column shrink to fit; a plain 1fr keeps a
     grid track at least as wide as its content, so the buttons overflowed the
     card's right edge. min-width:0 on the button + label lets their contents
     shrink too. Icons hidden on phone to give the labels room for one line. */
  .pr-chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .pr-chip { min-width: 0; font-size: 13px; }   /* matches .pr-label (the field labels) */
  .pr-chip-label { min-width: 0; }
  .pr-chip-ico { display: none; }
}

/* honeypot */
/* Honeypot: kept in the DOM and rendered so bots still fill it, but hidden from
   people. We hide it with the standard clip technique (a clipped 1px box) instead
   of shoving it far off-screen with left:-9999px. An element parked thousands of
   pixels to the side makes the whole page scroll sideways (the left/right wobble)
   on iOS Safari, even though desktop browsers ignore it. This stays invisible and
   adds zero width to the page. */
.pr-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── Submit ── */
.pr-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 18px 34px;
  background: #fff;
  color: #0C0A14;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 6px;
  transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.pr-submit-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.pr-submit-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Sending state (JS adds .is-sending on submit): keep the silk button crisp and
   fully in place, never blank the label, and breathe gently so it reads as
   "working" during the short beat before the confirmation appears. Placed after
   :disabled so the full opacity wins (equal specificity, later rule). */
.pr-submit-btn.is-sending { opacity: 1; cursor: default; }
.pr-submit-btn.is-sending .ep-cta2-fill { animation: pr-sending-pulse 1s ease-in-out infinite; }
@keyframes pr-sending-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .pr-submit-btn.is-sending .ep-cta2-fill { animation: none; } }

/* ── Clean WHITE form card. Once the credibility photo sits beside the form, a
   busy background competes with it, so the form side stays white and lets the
   photo carry the richness (Eddie, 2026-07-06). ── */
.pr-card {
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(23, 23, 42, 0.08);
  box-shadow: 0 26px 64px -32px rgba(26, 26, 46, 0.42);   /* soft floating depth */
}
/* Phones: no shadow. This is the ACTUAL shadow Eddie flagged (bleeding into
   the gap below the card, not the section-level one removed earlier); scoped
   to phones only since desktop's floating-card look hasn't been flagged.
   Placed AFTER the base rule ON PURPOSE, source order decides, see the CSS
   source-order note in memory. (Eddie, 2026-07-07.) */
@media (max-width: 768px) {
  .pr-card { box-shadow: none; }
}

/* Form internals on the white card: dark text on light inputs. */
.pr-card .pr-label { color: rgba(255, 255, 255, 0.82); }
.pr-card .pr-opt   { color: rgba(255, 255, 255, 0.4); }
.pr-card .pr-input {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}
.pr-card .pr-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.pr-card .pr-input:focus { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(206, 0, 184, 0.18); }
/* Invalid state must beat the card's own border rules above (equal specificity, later wins). */
.pr-card .pr-input.pr-invalid { border-color: #ff5d6b; }
.pr-card .pr-input.pr-invalid:focus { border-color: #ff5d6b; box-shadow: 0 0 0 3px rgba(255, 93, 107, 0.18); }
.pr-card .pr-hint { color: rgba(255, 255, 255, 0.5); }
.pr-card .pr-chip { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.14); }
.pr-card .pr-chip:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.3); color: #fff; }

/* Phone: compact glassy country button (flag + dial) with a transparent native
   <select> overlaid, so tapping opens the native OS picker showing full country
   names. The number input sits beside it and formats live via libphonenumber-js. */
.pr-tel { display: flex; gap: 8px; align-items: stretch; }
.pr-tel-country {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 30px 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px;
  background: rgba(255, 255, 255, 0.05); color: #fff;
  font-family: var(--font-body); font-size: 15.5px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.pr-tel-country:focus-within { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(206, 0, 184, 0.18); }
.pr-tel-flag { font-size: 18px; line-height: 1; }
.pr-tel-dial { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-tel-native {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; border: 0;
  -webkit-appearance: none; appearance: none;
}
.pr-tel-native option { color: #1A1A2E; }
.pr-tel-input { width: 100%; flex: 1 1 auto; }

/* Floating labels: the label rests inside the field like a placeholder, then
   shrinks and floats to the top on focus or once the field has any text.
   Markup is reordered (input first, then label) so the sibling selector works. */
.pr-float { position: relative; }
.pr-float .pr-input { padding-top: 21px; padding-bottom: 7px; }
.pr-card .pr-float .pr-label {
  position: absolute; left: 15px; top: 20px; margin: 0;
  font-weight: 400; font-size: 15.5px; color: rgba(255, 255, 255, 0.42);
  pointer-events: none; transform-origin: left top;
  transition: transform 0.15s var(--ease), color 0.15s var(--ease);
}
.pr-card .pr-float .pr-input:focus + .pr-label,
.pr-card .pr-float .pr-input:not(:placeholder-shown) + .pr-label {
  transform: translateY(-13px) scale(0.72);
  color: rgba(255, 255, 255, 0.6);
}
.pr-card .pr-float .pr-input:focus + .pr-label { color: var(--magenta); }
.pr-card .pr-chip-ico { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); }
.pr-card .pr-chip-check { border-color: rgba(255, 255, 255, 0.3); }
.pr-card .pr-chip.is-on { border-color: var(--magenta); background: rgba(206, 0, 184, 0.14); color: #fff; }
.pr-card .pr-chip.is-on .pr-chip-ico { border-color: rgba(206, 0, 184, 0.5); color: #fff; }

/* Back button → a solid white square that mirrors the Continue button's white
   arrow chip, so the nav has symmetric white end-caps. Drop the "Back" word
   (just the ← glyph) to match the chip's compact footprint; aria-label keeps it
   accessible (set in the markup). */
/* Nav row chips nearly touch (2px), mirroring the ep-cta2's internal fin↔chip gap. */
.pr-card .pr-wiz-nav { gap: 2px; }
.pr-card .pr-wiz-back {
  flex: none; width: 51px; height: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.10); border: none; border-radius: 0;
  color: #fff;
  /* A mirror of the forward arrow chip: same blob, flipped so the concave faces the
     label on its right. drop-shadow follows the masked shape (box-shadow wouldn't). */
  -webkit-mask: var(--ep-mask-blob) no-repeat center / 100% 100%;
          mask: var(--ep-mask-blob) no-repeat center / 100% 100%;
  transform: scaleX(-1);
  filter: drop-shadow(0 2px 6px rgba(40, 15, 70, 0.10));
  box-shadow: none;
  transition: filter .3s var(--ease), transform .3s var(--ease);
}
.pr-card .pr-wiz-back .pr-wiz-back-label { display: none; }
.pr-card .pr-wiz-back .pr-wiz-back-ico { font-size: 18px; transform: scaleX(-1); }   /* un-mirror the glyph so it still points left */
.pr-card .pr-wiz-back:hover { transform: scaleX(-1) translateY(-1px); filter: drop-shadow(0 8px 18px rgba(40, 15, 70, 0.22)); box-shadow: none; }

/* Continue + Submit → brand gradient so they pop on the white card. */
.pr-card .pr-wiz-next,
.pr-card .pr-wiz-submit { background: transparent; color: #171018; }
.pr-card .pr-wiz-next .ep-cta2-fill,
.pr-card .pr-wiz-submit .ep-cta2-fill { background: #F4F1F5; }
.pr-card .pr-wiz-next .ep-cta2-text,
.pr-card .pr-wiz-submit .ep-cta2-text { color: #171018; }
.pr-card .pr-wiz-next .ep-cta2-arrow svg,
.pr-card .pr-wiz-submit .ep-cta2-arrow svg { filter: none; }

/* Wizard fills get a LEFT fin too (mirrors the right fin) so the back chip
   interlocks on the left exactly like the arrow chip on the right, giving a
   balanced [back chip][ label ][forward chip]. BUT only when the Back chip is
   actually showing (steps 2+). On step 1 there's no Back button, so the fill
   keeps the standard rounded-left ep-cta2 shape, no orphan chip on the left. */
.pr-card .pr-wiz-back:not([hidden]) ~ .pr-wiz-next .ep-cta2-fill,
.pr-card .pr-wiz-back:not([hidden]) ~ .pr-wiz-submit .ep-cta2-fill {
  border-radius: 0;
  -webkit-mask:
    var(--ep-mask-blob)        no-repeat right center / var(--ep-chip) 100%,
    var(--ep-mask-corner)      no-repeat right calc(var(--ep-chip) + var(--ep-gap)) center / var(--ep-fin) 100%,
    var(--ep-mask-corner-left) no-repeat left center / var(--ep-fin) 100%,
    linear-gradient(#000,#000) no-repeat left var(--ep-fin) center / calc(100% - var(--ep-chip) - var(--ep-gap) - var(--ep-fin) - var(--ep-fin)) 100%;
          mask:
    var(--ep-mask-blob)        no-repeat right center / var(--ep-chip) 100%,
    var(--ep-mask-corner)      no-repeat right calc(var(--ep-chip) + var(--ep-gap)) center / var(--ep-fin) 100%,
    var(--ep-mask-corner-left) no-repeat left center / var(--ep-fin) 100%,
    linear-gradient(#000,#000) no-repeat left var(--ep-fin) center / calc(100% - var(--ep-chip) - var(--ep-gap) - var(--ep-fin) - var(--ep-fin)) 100%;
}

/* Continue + Submit both get the brand gradient (Eddie, 2026-07-07: Continue
   used to be plain off-white while only the final Submit popped, now they
   match). Wins over the off-white declarations above by source order, later
   rule, same specificity, see the CSS source-order note in memory. */
.pr-card .pr-wiz-next,
.pr-card .pr-wiz-submit { color: #fff; }
.pr-card .pr-wiz-next .ep-cta2-fill,
.pr-card .pr-wiz-submit .ep-cta2-fill { background: var(--btn-gradient); }
.pr-card .pr-wiz-next .ep-cta2-text,
.pr-card .pr-wiz-submit .ep-cta2-text { color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   "Request a Demo" section: white with a soft magenta halo glowing down from
   the top behind the heading (Eddie picked "Glow", 2026-06-30). Stays light so
   the dark heading + the silk form card both read cleanly. Scoped with #apply
   so it wins regardless of source order (see the CSS source-order note in
   memory). ════════════════════════════ */
#apply.pr-apply{
  /* Pure white so the section melts straight out of the white hero above it,
     with no tinted seam line (the old magenta halo created that edge). The dark
     silk card now carries all the colour. (Eddie, 2026-07-06.) */
  background: #FFFFFF;
  color: var(--text);
}

/* ════ POST-SUBMIT (Application received) ════ */
/* Inline (edit mode) the panel sits in the apply section so Simon can edit it.
   After a real submit, practitioners.js adds .pr-received--page, which lifts it
   into a full-screen confirmation "page" over everything, with a Back button. */
.pr-received { max-width: 720px; margin: 0 auto; }
.pr-received-inner { max-width: 720px; margin: 0 auto; }

.pr-received--page {
  position: fixed; inset: 0; z-index: 2000;
  max-width: none; margin: 0;
  /* "Charged" dark ground, matching the home #tech-teaser section: near-black
     with a soft violet whisper glow from the top-left, and the bottom melting
     into deep purple. */
  background:
    radial-gradient(90% 72% at 10% 4%, hsla(274, 44%, 30%, 0.4), transparent 80%),
    linear-gradient(180deg, #0a0714 calc(100% - 300px), #1c0d38 100%);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(74px, 13vw, 120px) clamp(22px, 6vw, 40px) clamp(48px, 10vw, 90px);
  text-align: center;
}
.pr-received--page .pr-received-inner { max-width: 460px; }
/* Light-on-dark content, ONLY on the full-screen dark takeover (the inline
   edit-mode view stays dark-text-on-white so Simon can still read/edit it). */
.pr-received--page .pr-received-h2 { color: #fff; }
.pr-received--page .pr-received-promo { color: rgba(255, 255, 255, 0.6); }
.pr-received--page .pr-conf-prog-label { color: rgba(255, 255, 255, 0.6); }
.pr-received--page .pr-conf-seg { background: rgba(255, 255, 255, 0.16); }
.pr-received--page .pr-conf-seg.is-on { background: rgba(255, 255, 255, 0.72); }

/* The old back-to-homepage link is retired; the CTA button is the exit now. */
.pr-back { display: none; }

/* Progress bar: where they are in the 4-email series (email 1 is active). */
.pr-conf-prog { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0 0 30px; }
.pr-conf-prog-track { display: flex; gap: 6px; }
.pr-conf-seg { width: 34px; height: 5px; border-radius: 3px; background: rgba(26, 26, 46, 0.12); }
.pr-conf-seg.is-on { background: var(--muted); }
.pr-conf-prog-label { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Icon: glassy envelope with an E+ wax seal and twinkling sparkles, gently
   floating. No glow on the icon itself; the page background carries the glow. */
.pr-conf-icon { display: flex; align-items: center; justify-content: center; margin: 0 0 22px; }
.pr-conf-float { position: relative; animation: pr-conf-glide 3.4s ease-in-out infinite; }
.pr-conf-plane { width: 44px; height: 44px; display: block; }
@keyframes pr-conf-glide { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(4px, -8px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .pr-conf-float { animation: none; } }

.pr-received-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
}
.pr-received-demo { margin: 16px 0 0; font-family: var(--font-body); font-size: 17.5px; line-height: 1.55; color: var(--muted); }
.pr-received-promo { margin: 14px 0 0; font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.pr-conf-cta { margin-top: 32px; }
/* Match the home-page button width (double class beats base a.ep-cta2's --ep-w:auto). */
.pr-conf-cta.ep-cta2 { --ep-w: 360px; max-width: 100%; }

/* roadmap */
.pr-road { list-style: none; margin: 48px 0 0; padding: 0; }
.pr-road-step {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 0 0 30px 30px;
}
.pr-road-step:last-child { padding-bottom: 0; }
.pr-road-step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.pr-road-step.is-active::before {
  background: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 0 5px rgba(206, 0, 184, 0.18);
}
.pr-road-step::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 24px;
  bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.pr-road-step:last-child::after { display: none; }
.pr-road-rail { display: none; }
.pr-road-tag {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.pr-road-step.is-active .pr-road-tag { color: var(--magenta); }
.pr-road-title { font-family: var(--font-body); font-size: 16.5px; font-weight: 600; color: rgba(255, 255, 255, 0.65); }
.pr-road-step.is-active .pr-road-title { color: #fff; }
.pr-road-desc { display: block; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.45); margin-top: 4px; }
.pr-road-now {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #0C0A14;
  background: var(--magenta);
  border-radius: 100px;
  padding: 3px 10px;
}

.pr-note {
  margin-top: 44px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}
.pr-note p { margin: 0; font-family: var(--font-body); font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.6); }
.pr-note-em { color: #fff; font-weight: 600; }

.pr-signoff { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pr-signoff p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.6); font-style: italic; }
.pr-signoff-name { display: block; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: #fff; margin-top: 12px; }

/* ════ RESPONSIVE ════ */
/* (Mobile previously forced the nav logo to solid black via brightness(0).
   Removed so phones show the full-colour Electrons+ logo, matching desktop —
   the default inner-page logo (logo-light.png: colour mark + dark wordmark)
   reads fine on the light hero.) */

@media (max-width: 767px) {
  .pr-apply-explainer { position: static; }
  /* NOTE: .pr-apply keeps its big base bottom padding on phones ON PURPOSE.
     The card-stack slide-over is back (2026-07-07), and that padding is the
     runway the letter card covers first as it rises, so the Continue button
     is not the first thing it clips over. */
}


/* ============================================================
   EDITORIAL PAPER form skin (toggled by .pr-card--paper on the card).
   Light warm-paper repaint of the whole demo-request form. Reversible:
   remove pr-card--paper from the card markup to fall back to the dark card.
   ============================================================ */
/* =========================================================================
   Editorial Paper repaint for the practitioners form card.
   Every selector is prefixed with .pr-card.pr-card--paper so it beats both
   .pr-input (0,1,0) and .pr-card .pr-input (0,2,0) regardless of source order.
   No em dashes, no JS, left clinic photo untouched.
   ========================================================================= */

/* ---- Card shell + form panel: warm off-white paper -------------------- */
.pr-card.pr-card--paper {
  /* transparent card so the page shows through the glassy form panel */
  background: transparent;
  border: 1px solid rgba(26, 26, 46, 0.06);
  box-shadow: 0 1px 1px rgba(26, 26, 46, 0.03), 0 24px 60px -28px rgba(26, 26, 46, 0.14);
}
.pr-card.pr-card--paper .pr-form {
  position: relative;
  /* a touch transparent + a soft blur of what's behind = frosted glass.
     Same warm paper tint, just translucent. */
  background: rgba(250, 248, 245, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  color: #1A1A2E;
  gap: 32px;
  padding: clamp(30px, 3.4vw, 48px);
}
/* Kill the dark film-grain overlay completely */
.pr-card.pr-card--paper .pr-form::after {
  content: none;
  opacity: 0;
  mix-blend-mode: normal;
  background-image: none;
}
/* Optional faint magenta corner bloom, pinned behind the z-index:1 content */
.pr-card.pr-card--paper .pr-form::before {
  content: "";
  position: absolute;
  top: -18%;
  right: -14%;
  width: 46%;
  height: 46%;
  background: radial-gradient(circle at 70% 30%, rgba(206, 0, 184, 0.06), rgba(206, 0, 184, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
/* Media seam: soft hairline between photo and paper. Photo itself untouched. */
.pr-card.pr-card--paper .pr-card-media {
  background: #0E0C16;
  box-shadow: inset -1px 0 0 rgba(26, 26, 46, 0.06);
}

/* ---- Field labels / helper text --------------------------------------- */
.pr-card.pr-card--paper .pr-label { color: #374151; }
.pr-card.pr-card--paper .pr-opt   { color: #9CA3AF; }
.pr-card.pr-card--paper .pr-hint  { color: #6B7280; }
.pr-card.pr-card--paper .pr-err   { color: #C81E4A; }

/* ---- Inputs: underline-only ------------------------------------------- */
.pr-card.pr-card--paper .pr-input {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26, 26, 46, 0.16);
  border-radius: 0;
  padding: 8px 2px 11px;
  font-size: 16px;
  color: #1A1A2E;
  box-shadow: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.pr-card.pr-card--paper .pr-input::placeholder { color: transparent; }
.pr-card.pr-card--paper .pr-input:hover { border-bottom-color: rgba(26, 26, 46, 0.34); }
.pr-card.pr-card--paper .pr-input:focus {
  outline: none;
  border-bottom-color: #CE00B8;
  box-shadow: 0 1px 0 0 #CE00B8;
}
/* Autofill: keep the paper look, no blue or white wash */
.pr-card.pr-card--paper .pr-input:-webkit-autofill,
.pr-card.pr-card--paper .pr-input:-webkit-autofill:hover,
.pr-card.pr-card--paper .pr-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1A1A2E;
  caret-color: #1A1A2E;
  transition: background-color 100000s ease-in-out 0s;
  box-shadow: 0 1px 0 0 #CE00B8, inset 0 0 0 1000px #FAF8F5;
}
/* Invalid + invalid focus */
.pr-card.pr-card--paper .pr-input.pr-invalid {
  border-bottom-color: #C81E4A;
  box-shadow: none;
}
.pr-card.pr-card--paper .pr-input.pr-invalid:focus {
  border-bottom-color: #C81E4A;
  box-shadow: 0 1px 0 0 #C81E4A;
}

/* ---- Floating labels re-tuned for underline fields -------------------- */
/* Resting: sits on the field baseline (no boxed inset), muted grey */
.pr-card.pr-card--paper .pr-float .pr-input { padding-top: 8px; padding-bottom: 11px; }
.pr-card.pr-card--paper .pr-float .pr-label {
  position: absolute;
  left: 2px;
  top: 8px;
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: #6B7280;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.15s var(--ease), color 0.15s var(--ease), letter-spacing 0.15s var(--ease);
}
/* Floated: rides up clear above the typed text, uppercase and tracked */
.pr-card.pr-card--paper .pr-float .pr-input:focus + .pr-label,
.pr-card.pr-card--paper .pr-float .pr-input:not(:placeholder-shown) + .pr-label {
  transform: translateY(-20px) scale(0.72);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #6B7280;
}
.pr-card.pr-card--paper .pr-float .pr-input:focus + .pr-label { color: #CE00B8; }

/* ---- Chips (step 2) --------------------------------------------------- */
.pr-card.pr-card--paper .pr-chips { gap: 10px; }
.pr-card.pr-card--paper .pr-chip {
  background: #FFFFFF;
  color: #374151;
  border: 1px solid rgba(26, 26, 46, 0.14);
}
.pr-card.pr-card--paper .pr-chip:hover {
  background: #FFFFFF;
  border-color: rgba(26, 26, 46, 0.30);
  color: #1A1A2E;
}
.pr-card.pr-card--paper .pr-chip-ico {
  background: rgba(26, 26, 46, 0.04);
  border: 1px solid rgba(26, 26, 46, 0.10);
  color: #4B5563;
}
.pr-card.pr-card--paper .pr-chip-check { border: 1.5px solid rgba(26, 26, 46, 0.28); }
/* Selected */
.pr-card.pr-card--paper .pr-chip.is-on {
  border-color: var(--magenta);
  background: rgba(206, 0, 184, 0.06);
  color: #1A1A2E;
}
.pr-card.pr-card--paper .pr-chip.is-on .pr-chip-ico {
  border-color: rgba(206, 0, 184, 0.45);
  background: rgba(206, 0, 184, 0.08);
  color: var(--magenta);
}
.pr-card.pr-card--paper .pr-chip.is-on .pr-chip-check {
  background: var(--magenta);
  border-color: var(--magenta);
}
/* Invalid group */
.pr-card.pr-card--paper .pr-chips.pr-invalid-group .pr-chip { border-color: #C81E4A; }

/* ---- Phone picker (step 3) -------------------------------------------- */
.pr-card.pr-card--paper .pr-tel-country {
  /* background-color (not the background shorthand) so we do NOT reset the
     caret's repeat/position, otherwise the little arrow tiles across the button. */
  background-color: #FFFFFF;
  border: 1px solid rgba(26, 26, 46, 0.16);
  color: #1A1A2E;
  /* dark-stroke caret replacing the white one; restate repeat/position so it
     shows once at the right edge. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231A1A2E' stroke-opacity='0.55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.pr-card.pr-card--paper .pr-tel-country:focus-within {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(206, 0, 184, 0.14);
}
.pr-card.pr-card--paper .pr-tel-dial { color: #1A1A2E; }
.pr-card.pr-card--paper .pr-tel-native option { color: #1A1A2E; }
/* .pr-tel-flag is an emoji, stays as-is */

/* ---- Nav: back chip visible on paper, primary CTAs keep gradient ------ */
/* The back chip is a mask-clipped blob (var(--ep-mask-blob)); its background IS
   its whole visible surface, so a 6% fill reads as an invisible ghost on paper.
   Use a fill dark enough to actually see the carved shape, plus a dark arrow. */
.pr-card.pr-card--paper .pr-wiz-back {
  background: rgba(26, 26, 46, 0.11);
  color: #1A1A2E;
  filter: drop-shadow(0 2px 6px rgba(26, 26, 46, 0.10));
  box-shadow: none;
}
.pr-card.pr-card--paper .pr-wiz-back .pr-wiz-back-ico { color: #1A1A2E; }
.pr-card.pr-card--paper .pr-wiz-back:hover {
  background: rgba(26, 26, 46, 0.16);
  transform: scaleX(-1) translateY(-1px);
  filter: drop-shadow(0 8px 18px rgba(26, 26, 46, 0.20));
  box-shadow: none;
}
/* Primary Continue / Submit: brand gradient, white text, soft magenta shadow */
.pr-card.pr-card--paper .pr-wiz-next,
.pr-card.pr-card--paper .pr-wiz-submit { color: #fff; }
.pr-card.pr-card--paper .pr-wiz-next .ep-cta2-fill,
.pr-card.pr-card--paper .pr-wiz-submit .ep-cta2-fill {
  background: linear-gradient(120deg, #CE00B8, #7B2FBE);
  border-radius: 8px;
  box-shadow: 0 10px 24px -12px rgba(206, 0, 184, 0.55);
}
.pr-card.pr-card--paper .pr-wiz-next .ep-cta2-text,
.pr-card.pr-card--paper .pr-wiz-submit .ep-cta2-text { color: #fff; }
.pr-card.pr-card--paper .pr-wiz-next .ep-cta2-arrow svg,
.pr-card.pr-card--paper .pr-wiz-submit .ep-cta2-arrow svg { filter: none; }