/* =========================================================
   Steady for Partners
   Same design system as the consumer landing page: identical
   palette, type family and band rhythm, on its own namespace
   (.pn-) so the two pages cannot affect each other.
   ========================================================= */

:root {
  --pn-dark:     #10201D;
  --pn-light:    #F4F0E8;
  --pn-teal:     #1B786B;
  --pn-sage:     #8BAE9B;
  --pn-muted:    #D7E2D9;
  --pn-body:     #405851;
  --pn-border:   #405851;
  --pn-surface:  #19332D;  /* raised panel on dark */
  --pn-max:      1120px;
  --pn-pad-x:    32px;
}

* { box-sizing: border-box; }
/* Deliberately NOT scroll-behavior: smooth on <html>. It makes load-time deep
   links (/partners#telehealth, /partners#retail) fail to scroll at all, which
   is the cold-email path. The page script does smooth scrolling for in-page
   nav clicks instead, and honours prefers-reduced-motion. */

body {
  margin: 0;
  background: var(--pn-dark);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing: the <img> tags carry width/height attributes for
   layout stability, and without it those attributes stretch the screenshots. */
img { max-width: 100%; height: auto; display: block; }

.pn-container {
  max-width: var(--pn-max);
  margin: 0 auto;
  padding-left: var(--pn-pad-x);
  padding-right: var(--pn-pad-x);
}

.pn-dark  { background: var(--pn-dark); }
.pn-light { background: var(--pn-light); }

/* ---------- Type ---------- */

.pn-eyebrow {
  margin: 0 0 18px;
  font-size: 13px; font-weight: 600; line-height: 1.2;
  letter-spacing: 1.45px; text-transform: uppercase;
  color: var(--pn-sage);
}
.pn-eyebrow--onlight { color: var(--pn-teal); }

.pn-h-hero {
  margin: 0;
  font-size: 52px; font-weight: 600; line-height: 1.06; letter-spacing: -1.9px;
  color: var(--pn-light);
}
/* The argument sections go up, the utility sections come down. Both sizes
   carry the same weight, colour and optical letter-spacing as before: -1.4px
   at the old 46px is -0.03em, so stating it per-em keeps the spacing the page
   already had at whichever size a heading now takes. */
.pn-h-section {
  margin: 0 0 20px;
  font-size: 46px; font-weight: 600; line-height: 1.08; letter-spacing: -0.03em;
  color: var(--pn-dark);
}
.pn-h-section--lg { font-size: 52px; }
.pn-h-section--sm { font-size: 34px; }
.pn-h-section--ondark { color: var(--pn-light); }

.pn-body-dark  { margin: 0; font-size: 19px; font-weight: 400; line-height: 1.45; color: var(--pn-muted); }
.pn-body-light { margin: 0; font-size: 19px; font-weight: 400; line-height: 1.45; color: var(--pn-body); }

.pn-statement {
  margin: 0;
  font-size: 30px; font-weight: 500; line-height: 1.35; letter-spacing: -0.4px;
  color: var(--pn-dark);
}

/* ---------- Buttons ---------- */

.pn-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 22px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.pn-btn:hover { opacity: 0.88; }
.pn-btn--pale { background: var(--pn-sage); color: var(--pn-dark); }

/* ---------- Section dividers ---------- */
/* A hairline only where a section shares its background with the one above it.
   Where the band flips dark to light the colour change is the divider, so no
   rule is drawn there. Full bleed, matching the bands themselves. */
/* 2px at 40% rather than 1px at 60%: a 1px border lands on 0.75 device px at
   fractional zoom and washes out to a hairline whatever the opacity. */
.pn-rule { border-top: 2px solid rgba(64, 88, 81, 0.4); }

/* ---------- 1. Nav ---------- */

.pn-nav { background: var(--pn-dark); padding: 22px 0; }
.pn-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pn-logo { font-size: 19px; font-weight: 600; line-height: 1; color: var(--pn-light); text-decoration: none; }
.pn-nav__links { display: flex; align-items: center; gap: 30px; }
.pn-nav__links a { font-size: 14px; font-weight: 500; color: var(--pn-muted); text-decoration: none; }
.pn-nav__links a:hover { color: var(--pn-light); }
.pn-nav .pn-btn { padding: 10px 18px; font-size: 14px; }

/* ---------- 2. Hero ---------- */

.pn-hero { padding: 88px 0; }

/* Text-only hero. With the phone gone the old 55%/35% split had nothing to
   balance, so the copy runs as one left-aligned column, capped at a measure
   that keeps the headline at roughly its previous line length instead of
   stretching to the full container and reading as a vacated row. */
/* Hero carries the copy beside the shared nutrient panel. */
.pn-hero__split {
  display: grid;
  grid-template-columns: 55% 38%;
  justify-content: space-between;
  align-items: center;
}
/* Explicit px, not ch: ch on this wrapper resolves against its own 19px body
   font, not the 52px headline, which crushed the column to ~190px. */
.pn-hero__copy { max-width: 640px; }
.pn-hero__sub  { max-width: 560px; }

/* The panel is the shared component from /css/analysis-panel.css. Its skin
   reads three variables that only the landing sheet defines, so supply them
   here, scoped to this wrapper rather than :root, so nothing else on the
   page inherits them. Values match the partners palette. */
.pn-hero__panel {
  --stakes-bg: #19332D;
  --muted-sage: var(--pn-muted);
  --dark-secondary: var(--pn-sage);
  --fs-caption: 13px;
}
/* Hero-slot sizing only; the component itself is untouched. */
.pn-hero__panel .ln-panelcard { padding: 22px; }
.pn-hero__panel .analysis-card { padding: 14px; }
.pn-hero__copy { min-width: 0; }
.pn-hero__sub { margin-top: 22px; }
.pn-hero__cta { margin-top: 30px; }

/* ---------- 3. Scale line ---------- */

.pn-scale { margin-top: 56px; }
.pn-scale__source {
  margin: 4px 0 0;
  font-size: 13px; font-weight: 400;
  color: var(--pn-sage);
}

/* ---------- 4. Demo ---------- */

.pn-demo { padding: 88px 0; }
.pn-demo__frame {
  margin-top: 28px;
  position: relative;
  width: 100%;
  /* Recording is 1512x762 (~2:1); the trailing 41px is the Arcade chrome. */
  padding-bottom: calc(50.4% + 41px);
  height: 0;
  border: 1px solid rgba(64, 88, 81, 0.2);
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
}
.pn-demo__foot { display: flex; justify-content: flex-end; }
.pn-demo__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  /* Without this the embed inherits the host page's colour scheme and renders
     invisibly. */
  color-scheme: light;
}
.pn-demo__link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px; font-weight: 500;
  color: var(--pn-teal); text-decoration: none;
}
.pn-demo__link:hover { text-decoration: underline; }

/* ---------- 5. The gap ---------- */

.pn-gap { padding: 88px 0; }
/* Constrained measure so the four lines read as a block rather than drifting
   across the full 1120px. */
.pn-gap__inner > * { max-width: 640px; }
.pn-gap__lines { display: flex; flex-direction: column; gap: 20px; }
.pn-gap__note {
  margin: 28px 0 0;
  font-size: 16px; font-weight: 400;
  color: var(--pn-body);
}

/* ---------- 6. Product gallery ---------- */

.pn-product { padding: 88px 0; }
/* Three across rather than six. This section's job is to show the product,
   so each shot gets roughly double the width it had and the whole-phone
   framing stays: a crop here would be a detail of a detail. */
.pn-product__rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pn-product__item { min-width: 0; }
/* The phone is drawn rather than photographed: a dark bezel with the screen
   inset inside it. The old assets were device mockups carrying their own
   frame and transparent corners; these are straight screen captures, so the
   framing lives here and every shot gets exactly the same one. */
.pn-product__shot {
  background: #0B1714;
  border: 1px solid rgba(64, 88, 81, 0.28);
  border-radius: 26px;
  padding: 7px;
}
.pn-product__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.pn-product__caption {
  margin: 14px 0 0;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--pn-dark);
  /* Two lines are always reserved. Captions wrap to either one or two lines
     depending on width, and without this the shorter ones pull their cell up
     and the row's baseline goes ragged. */
  min-height: 2.4em;
}
.pn-product__scrollnote {
  display: none;
  margin: 20px 0 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--pn-body);
}

/* ---------- 7. Choose your path ---------- */

.pn-fork { padding: 88px 0; }
.pn-fork__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pn-fork__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Balanced 48px top and bottom rather than text pinned to the floor of a
     tall empty box. */
  padding: 48px 32px;
  border-radius: 20px;
  text-decoration: none;
  transition: transform 0.15s, opacity 0.15s;
}
.pn-fork__arrow {
  position: absolute;
  right: 32px;
  bottom: 48px;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.15s;
}
.pn-fork__card:hover .pn-fork__arrow { transform: translateX(3px); }
.pn-fork__card--dark .pn-fork__arrow { color: var(--pn-sage); }
.pn-fork__card--sage .pn-fork__arrow { color: var(--pn-teal); }
.pn-fork__card:hover { transform: translateY(-2px); opacity: 0.94; }
.pn-fork__card--dark { background: var(--pn-dark); }
.pn-fork__card--sage { background: #D6E1D8; }
.pn-fork__title { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; }
.pn-fork__sub { margin-top: 6px; font-size: 15px; font-weight: 400; }
.pn-fork__card--dark .pn-fork__title { color: var(--pn-light); }
.pn-fork__card--dark .pn-fork__sub   { color: var(--pn-sage); }
.pn-fork__card--sage .pn-fork__title { color: var(--pn-dark); }
.pn-fork__card--sage .pn-fork__sub   { color: var(--pn-teal); }

/* ---------- 8 & 9. Vertical sections ---------- */

.pn-vertical { padding: 88px 0; }
.pn-vertical__split {
  display: grid;
  grid-template-columns: 55% 35%;
  justify-content: space-between;
  /* The copy column sets the row height; the shot stretches to it so the phone
     scales to the text block rather than overshooting it. */
  align-items: stretch;
}
.pn-vertical__copy { min-width: 0; }
/* The copy column sets the section height; nothing below it adds gap. */
.pn-vertical__copy > *:last-child { margin-bottom: 0; }
.pn-vertical__copy > .pn-body-dark + .pn-body-dark,
.pn-vertical__copy > .pn-body-light + .pn-body-light { margin-top: 14px; }

/* Cut to the device edge, so no panel behind it. Capped so the image cannot
   run past the copy column and leave dead background beneath. */
/* Background baked into the export: no panel, border or shadow behind it.
   The image is taken out of flow so it contributes no intrinsic height: the
   copy column alone sets the row, and the phone then scales to exactly that
   height. Left in flow it stood 800px against 453px of text and reintroduced
   the dead space below the copy. */
.pn-vertical__shot { position: relative; min-height: 0; }

/* ---------- Stat rows ---------- */
/* Three stacked elements per stat, never a run-on line. Spacing is the spec's:
   24px above the row, 8px number-to-label, 4px label-to-source, 32px minimum
   between columns. */

.pn-stats {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.pn-stat { display: flex; flex-direction: column; min-width: 0; }
.pn-stat__num {
  font-size: 44px; font-weight: 600; line-height: 1;
  letter-spacing: -1.4px;
  color: var(--pn-light);
}
.pn-stat__num--onlight { color: var(--pn-dark); }
.pn-stat__label {
  margin-top: 8px;
  font-size: 15px; font-weight: 500; line-height: 1.25;
  color: var(--pn-muted);
}
.pn-stat__label--onlight { color: var(--pn-dark); }
.pn-stat__source {
  margin-top: 4px;
  font-size: 13px; font-weight: 400; line-height: 1.35;
  color: var(--pn-sage);
}
.pn-stat__source--onlight { color: var(--pn-body); }

.pn-closing-line {
  margin: 24px 0 0;
  font-size: 19px; font-weight: 500; line-height: 1.45;
  color: var(--pn-dark);
}
.pn-closing-line--ondark { color: var(--pn-light); }

/* Muted line sitting under a section's closing statement. Secondary to it:
   same measure, one step down in size and weight, lighter colour. */
.pn-aside {
  margin: 10px 0 0;
  font-size: 17px; font-weight: 400; line-height: 1.45;
  color: var(--pn-body);
}
.pn-aside--ondark { color: var(--pn-muted); opacity: 0.75; }

/* ---------- 10. What it takes ---------- */

.pn-takes { padding: 88px 0; }
.pn-takes__cols {
  margin-top: 32px;
  display: grid;
  /* Equal halves with the divider sitting exactly on the midline. */
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.pn-takes__col:first-child { padding-right: 48px; }
.pn-takes__col + .pn-takes__col {
  padding-left: 48px;
  border-left: 1px solid rgba(64, 88, 81, 0.28);
}
.pn-takes__head {
  margin: 0 0 16px;
  font-size: 16px; font-weight: 600;
  color: var(--pn-dark);
}
.pn-takes__row {
  margin: 0;
  font-size: 16px; font-weight: 400; line-height: 1.45;
  color: var(--pn-body);
}
.pn-takes__row + .pn-takes__row { margin-top: 12px; }

/* ---------- 11. Who built it ---------- */

.pn-built { padding: 88px 0; }
.pn-built__inner > * { max-width: 640px; }

/* Removing the dark "Not a tracker" section left "What it takes" and "Who
   built it" adjacent and both light, stacking 88px + 88px into one
   undifferentiated cream field. Collapse the junction to a single section
   break, and carry the rule the page already uses on every other
   light-follows-light boundary. */
.pn-takes + .pn-built { padding-top: 0; }
.pn-takes + .pn-built .pn-built__inner { border-top: 2px solid rgba(64, 88, 81, 0.4); padding-top: 88px; }

/* ---------- Cropped product detail ----------

   The two vertical sections used to carry a whole phone each, at a scale that
   made the screen unreadable and left the argument leaning on a caption. They
   carry a crop of the real screen instead, about twice the old scale: no
   device frame, no shadow, and the corners rounded into the asset itself so
   the crop reads as a piece of the product rather than a pasted rectangle. */

.pn-crop { margin: 0; }
.pn-crop__img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
}
.pn-crop__cap {
  margin: 12px 0 0;
  max-width: 400px;
  font-size: 13px; font-weight: 400; line-height: 1.45;
  color: var(--pn-sage);
}
.pn-crop__cap--onlight { color: var(--pn-body); }

/* ---------- 13. Closing ---------- */

.pn-closing { padding: 88px 0; text-align: center; }
.pn-closing .pn-h-section { margin-bottom: 16px; }

/* Four columns saying what a pilot is. Left-aligned inside a centred section:
   the lines are read, not scanned, and centring four of them side by side
   makes the ragged edges fight each other. */
.pn-pilot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 44px 0 40px;
  text-align: left;
}
.pn-pilot__step {
  border-top: 1px solid rgba(244, 240, 232, 0.22);
  padding-top: 16px;
}
.pn-pilot__k {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--pn-sage);
}
.pn-pilot__line {
  margin: 10px 0 0;
  font-size: 17px; font-weight: 400; line-height: 1.4;
  color: var(--pn-muted);
}

/* ---------- Footer ---------- */

.pn-footer {
  background: var(--pn-dark);
  border-top: 1px solid rgba(64, 88, 81, 0.5);
  padding: 30px 0;
}
.pn-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  color: var(--pn-sage);
}
.pn-footer__links { display: flex; gap: 20px; }
.pn-footer__inner a { color: var(--pn-sage); text-decoration: none; cursor: pointer; }
.pn-footer__inner a:hover { color: var(--pn-light); }

/* =========================================================
   Responsive
   ========================================================= */

/* ---------- The supplement aisle (SUPPLEMENT-SECTION-HANDOFF) ----------
   Reuses the page's own eyebrow, section heading, body and stat treatments.
   Only what the reference adds is defined here: the split, the check lines,
   the closing rule and the 4:5 shot. */

.pn-supp { padding: 88px 0; }

/* The heading holds its own measure rather than running the full column. */
.pn-supp__h    { max-width: 12ch; margin-bottom: 0; }

/* Stats sit above the split, full width, so all three read as one row. */
.pn-supp__stats { margin-top: 40px; }

/* Copy leads; the shot is a fixed column beside it, top-aligned so it
   starts level with the first check line rather than centring against it. */
.pn-supp__split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
  margin-top: 44px;
}

.pn-supp__copy  { min-width: 0; }
.pn-supp__lines { display: flex; flex-direction: column; gap: 16px; }

.pn-supp__line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 19px;
  line-height: 1.45;
  color: var(--pn-muted);
}

/* Nudged to sit on the first line's baseline rather than its box top. */
.pn-supp__line svg { flex: 0 0 auto; margin-top: 6px; }

/* The argument, not a flourish: set above a thin rule and in heading colour
   so it reads as the section's conclusion. */
.pn-supp__close {
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(139, 174, 155, .25);
  font-size: 19px;
  line-height: 1.45;
  color: var(--pn-light);
  max-width: 60ch;
}

/* 4:5 rather than a full phone: a taller shot leaves dead space beside a
   text column this short. The image is cropped to the same ratio, so it
   fills the frame without object-fit having anything to trim. */
.pn-supp__shot {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(139, 174, 155, .25);
  aspect-ratio: 4 / 5;
  background: #0B1714;
}

.pn-supp__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1080px) {
  .pn-h-hero    { font-size: 42px; letter-spacing: -1.5px; }
  .pn-h-section    { font-size: 33px; }
  .pn-h-section--lg { font-size: 34px; }
  .pn-h-section--sm { font-size: 26px; }
  .pn-statement { font-size: 20px; }
  .pn-hero__split,
  .pn-vertical__split { grid-template-columns: 56% 38%; }
  .pn-stat__num { font-size: 38px; }

  /* Three shots still stop being legible side by side well before this width,
     so the rail becomes a scroller with a visible indicator. */
  .pn-product__rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 12px;
    margin-left: calc(var(--pn-pad-x) * -1);
    margin-right: calc(var(--pn-pad-x) * -1);
    padding-left: var(--pn-pad-x);
    padding-right: var(--pn-pad-x);
  }
  .pn-product__item { flex: 0 0 58%; scroll-snap-align: start; }
  .pn-product__scrollnote { display: block; }
}

@media (max-width: 860px) {
  .pn-hero__split,
  .pn-vertical__split { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  /* Copy leads, shot follows, and the shot stops being a fixed 320px column. */
  .pn-supp__split { grid-template-columns: 1fr; gap: 36px; }
  .pn-supp__h { max-width: none; }
  /* Copy leads, screenshot follows. */
  .pn-vertical__shot { position: static; display: flex; justify-content: center; }
  .pn-takes__cols { grid-template-columns: 1fr; gap: 30px; }
  .pn-takes__col + .pn-takes__col { padding-left: 0; border-left: none; }
  .pn-fork__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --pn-pad-x: 20px; }

  .pn-h-hero     { font-size: 34px; letter-spacing: -1.1px; }
  .pn-h-section    { font-size: 31px; }
  .pn-h-section--lg { font-size: 32px; }
  .pn-h-section--sm { font-size: 25px; }
  .pn-statement  { font-size: 18px; }
  .pn-body-dark, .pn-body-light { font-size: 18px; }

  .pn-nav { padding: 16px 0; }
  .pn-nav__inner { flex-wrap: wrap; gap: 12px; }
  .pn-nav__links { order: 3; width: 100%; gap: 18px; }
  .pn-nav__links a { font-size: 13px; }

  .pn-hero { padding: 40px 0 56px; }
  /* Container padding already sets the measure at this width. */
  .pn-hero__copy, .pn-hero__sub { max-width: none; }
  .pn-hero__panel .ln-panelcard { padding: 18px; }
  .pn-scale { margin-top: 48px; }
  .pn-demo, .pn-gap, .pn-product, .pn-takes, .pn-built { padding: 56px 0; }
  .pn-takes + .pn-built { padding-top: 0; }
  .pn-takes + .pn-built .pn-built__inner { padding-top: 56px; }
  .pn-vertical { padding: 60px 0; }
  .pn-supp { padding: 60px 0; }
  .pn-supp__line { font-size: 18px; }
  .pn-supp__close { font-size: 18px; margin-top: 32px; padding-top: 24px; }
  .pn-closing { padding: 64px 0; }
  /* One column: four 17px lines side by side on a phone are four words wide. */
  .pn-pilot { grid-template-columns: 1fr; gap: 22px; margin: 34px 0 32px; }
  .pn-fork { padding-bottom: 56px; }

  .pn-product__item { flex: 0 0 74%; }

  /* Stats stack rather than crushing three 44px numbers into 390px. */
  .pn-stats { grid-template-columns: 1fr; gap: 24px; }
  .pn-stat__num { font-size: 40px; }

  .pn-btn { width: 100%; text-align: center; }
  .pn-nav .pn-btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pn-fork__card:hover { transform: none; }
}


/* =========================================================
   Contact modal, lifted verbatim from landing.css so this page
   carries its own styles rather than depending on the legacy
   consumer stylesheet.
   ========================================================= */

/* ===== AUTH MODAL ===== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 44px 40px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

.modal-box h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.modal-box p {
  color: #64748b;
  margin-bottom: 24px;
  font-size: 0.925rem;
}

.modal-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 14px;
  color: #0f172a;
}

.modal-input:focus {
  border-color: #0f172a;
}

.modal-input::placeholder {
  color: #94a3b8;
}

.modal-btn {
  width: 100%;
  padding: 13px;
  background: #0f172a;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}

.modal-btn:hover {
  background: #1e293b;
}

.modal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-toggle {
  margin-top: 20px;
  font-size: 0.875rem;
  color: #94a3b8;
}

.modal-toggle a {
  color: #0f172a;
  font-weight: 600;
}

.modal-toggle a:hover {
  text-decoration: underline;
}

.modal-link {
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 500;
}

.modal-link:hover {
  color: #1e293b;
  text-decoration: underline;
}

.modal-error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.875rem;
  margin-bottom: 16px;
  text-align: left;
}

/* ===== CONTACT MODAL ===== */
.contact-textarea {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
}

.contact-success {
  text-align: center;
  padding: 40px 20px;
}

.contact-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #10b981;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.contact-success h2 {
  font-size: 1.3rem;
  color: #0f172a;
  margin-bottom: 8px;
}

.contact-success p {
  color: #64748b;
  font-size: 0.95rem;
}

/* Alias anchor targets. An element carries one id, so ids handed out against
   the previous partners page (#pharmacy, #telehealth-title, #retail-title)
   get their own zero-height markers inside the matching section. */
.pn-anchor { display: block; height: 0; overflow: hidden; }

/* ---------------------------------------------------------
   Logo mark, restored from the previous page at the same sizes.
   --------------------------------------------------------- */
.pn-logo { display: inline-flex; align-items: center; gap: 8px; }
.pn-logo-mark {
  width: 8px; height: 8px;
  background: var(--pn-sage);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.pn-footer__brand { display: inline-flex; align-items: center; gap: 7px; }
.pn-footer-mark {
  width: 6px; height: 6px;
  background: var(--pn-sage);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

/* The fixed phone box that used to live here is gone with the mockups it
   sized. Both vertical sections carry a crop now, which is sized by its own
   aspect ratio, so the column is simply as tall as what it holds. */

@media (max-width: 860px) {
  /* Single column: the crop centres in its own row. */
  .pn-vertical__shot { display: flex; justify-content: center; }
}

/* ===========================================================================
   The live demo inside the supplement section.

   On the dark surface the phone is the only light object, which is the point:
   it reads as a device held up against the argument around it. Centred and
   phone-width at every breakpoint, because what is inside is a phone screen.
   =========================================================================== */

.pn-supp__live {
  margin-top: 72px;
  text-align: center;
}

.pn-supp__liveh {
  margin: 10px 0 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.pn-supp__livelead {
  margin: 12px auto 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.pn-supp__phone {
  margin: 28px auto 0;
  width: 390px;
  max-width: 100%;
  height: 760px;
  border-radius: 24px;
  overflow: hidden;
  background: #FBFAF8;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.pn-supp__phone iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* The embed would otherwise inherit this page's dark scheme and paint
     itself invisible, the same way the walkthrough frame does. */
  color-scheme: light;
}

.pn-supp__livelink {
  display: inline-block;
  margin-top: 18px;
  font-size: 15px;
  color: #8BAE9B;
}

@media (max-width: 760px) {
  .pn-supp__live { margin-top: 48px; }
  .pn-supp__liveh { font-size: 23px; }
  .pn-supp__phone { width: 100%; height: 680px; border-radius: 18px; }
}