/* ==========================================================================
   Pulses TSM Medical Clinic — design system
   Palette derived from the clinic logo: navy #002256, teal #3CC3BC
   Motif: ECG waveform (from the logo mark) — echoes "Keeping Your Health In Rhythm"
   ========================================================================== */

/* ---------- fonts (self-hosted: no third-party requests, no GDPR exposure) -- */
@font-face{
  font-family:"Source Serif 4";
  src:url("../assets/fonts/source-serif.woff2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212;
}
@font-face{
  font-family:"Public Sans";
  src:url("../assets/fonts/public-sans.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212;
}

/* ---------- tokens ---------- */
:root{
  --navy:#002256;
  --navy-deep:#00173c;
  --navy-mid:#0a3168;
  --navy-tint:#e8eef6;
  --teal:#3cc3bc;
  --teal-deep:#0f6b66;      /* accessible teal for text on light grounds */
  --teal-tint:#e4f6f5;

  --paper:#f7f9fb;
  --paper-2:#eef2f7;
  --white:#ffffff;

  --ink:#0e1b2b;
  --ink-2:#41505f;
  --ink-3:#6b7886;

  --line:rgba(0,34,86,.14);
  --line-2:rgba(0,34,86,.07);

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --shadow-sm:0 1px 2px rgba(0,34,86,.06),0 6px 18px -10px rgba(0,34,86,.16);
  --shadow:0 2px 4px rgba(0,34,86,.05),0 18px 44px -22px rgba(0,34,86,.30);

  --ease:cubic-bezier(.22,1,.36,1);
  --container:1180px;
  --gutter:clamp(20px,4vw,40px);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
html,body{overflow-x:hidden; max-width:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video,svg{display:block; max-width:100%; height:auto}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--teal-deep); text-underline-offset:3px}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--teal); outline-offset:3px; border-radius:2px;
}
address,footer p,.wrap p{overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:600; line-height:1.14;
  letter-spacing:-.015em; text-wrap:balance; color:var(--navy);
}
h1{font-size:clamp(2.15rem,5.1vw,3.5rem); line-height:1.06}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem); line-height:1.24}
h4{font-size:1.05rem}
p{max-width:68ch}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-2); line-height:1.6}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; color:var(--teal-deep);
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--teal); flex:none;
}
.eyebrow.no-rule::before{display:none}
/* ---- dark-surface overrides -------------------------------------------
   Every dark ground in the system is listed here ONCE. Any element that
   changes colour on navy belongs in this block — three separate bugs were
   caused by rules scoped only to .dark while .hero and .page-head are also
   dark. Add new dark surfaces to DARK below, not to individual rules. */
.dark .eyebrow,.on-dark .eyebrow,.hero .eyebrow,.page-head .eyebrow{color:var(--teal)}
.dark em.accent,.on-dark em.accent,.hero em.accent,.page-head em.accent{color:var(--teal)}

em.accent{font-style:italic; color:var(--teal-deep)}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,8vw,104px)}
.section.tight{padding-block:clamp(40px,5vw,64px)}
.section-2{background:var(--paper-2)}
.section-white{background:var(--white)}
.dark{background:var(--navy); color:#dce6f2}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark p{color:#c3d2e4}
.dark a:not(.btn){color:var(--teal)}
/* .dark a was (0,1,1) and beat .btn-teal at (0,1,0), painting teal text on a
   teal background — two invisible buttons on every page. Buttons carry their
   own colour and must never inherit the dark-section link colour. */
.btn.btn-teal{color:var(--navy-deep)}
.btn.btn-solid{color:#fff}

.stack{display:flex; flex-direction:column; gap:clamp(14px,2vw,22px)}
.stack.lg{gap:clamp(24px,3.5vw,40px)}
.sec-head{display:flex; flex-direction:column; gap:12px; margin-bottom:clamp(28px,4vw,44px); max-width:74ch}
.grid{display:grid; gap:clamp(14px,2vw,22px)}
.grid>*{min-width:0}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}

/* ---------- ECG divider (logo motif) ---------- */
.ecg{display:block; width:100%; height:26px; overflow:hidden; color:var(--teal); opacity:.55}
.ecg svg{width:100%; height:100%}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:14px 28px; border-radius:3px;
  font-weight:600; font-size:.97rem; letter-spacing:.01em;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease),
             border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-solid{background:var(--navy); color:#fff; box-shadow:var(--shadow-sm)}
.btn-solid:hover{background:var(--navy-mid); transform:translateY(-2px);
  box-shadow:0 10px 30px -12px rgba(0,34,86,.5)}
.btn-teal{background:var(--teal); color:var(--navy-deep); font-weight:700}
.btn-teal:hover{background:#54d0c9; transform:translateY(-2px)}
.btn-line{background:transparent; color:var(--navy); border-color:var(--line)}
.btn-line:hover{border-color:var(--navy); transform:translateY(-2px)}
/* any dark ground — .dark sections and the hero — needs the light-on-dark variant.
   Scoped together so a new dark surface can never render navy-on-navy. */
.dark .btn-line,.hero .btn-line,.on-dark .btn-line{color:#fff; border-color:rgba(255,255,255,.42)}
.dark .btn-line:hover,.hero .btn-line:hover,.on-dark .btn-line:hover{
  border-color:#fff; background:rgba(255,255,255,.08)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:200; background:rgba(247,249,251,.86);
  backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid var(--line-2);
}
.hdr{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:74px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.brand img{width:40px; height:40px; object-fit:contain}
.brand-txt{display:flex; flex-direction:column; line-height:1.1}
.brand-txt b{font-family:var(--serif); font-size:1.08rem; color:var(--navy); font-weight:700; letter-spacing:-.01em}
.brand-txt span{font-size:.63rem; text-transform:uppercase; letter-spacing:.16em; color:var(--teal-deep); font-weight:600}

header.site nav{display:flex; align-items:center; gap:clamp(14px,2vw,28px)}
header.site nav a{
  text-decoration:none; color:var(--ink-2); font-size:.93rem; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
header.site nav a:hover{color:var(--navy); border-bottom-color:var(--teal)}
header.site nav a[aria-current="page"]{color:var(--navy); border-bottom-color:var(--teal)}
header.site nav a.nav-cta{
  background:var(--navy); color:#fff; padding:11px 20px; border-radius:3px;
  border-bottom:none; font-weight:600;
}
header.site nav a.nav-cta:hover{background:var(--navy-mid); border-bottom:none; color:#fff}

.nav-toggle{
  display:none; width:46px; height:46px; border:none; background:transparent;
  cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--navy); position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:24px; height:2px; background:var(--navy);
  transition:transform .3s var(--ease);
}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  header.site nav{display:none}
  .nav-toggle{display:flex}
}
@media (min-width:901px){
  .mobile-menu{display:none !important}
}

.mobile-menu{
  position:fixed; inset:0; z-index:205; background:var(--navy);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  overflow-y:auto; padding:96px var(--gutter) 40px;
}
.mobile-menu.is-open{opacity:1; visibility:visible}
body.menu-open{overflow:hidden}
.mobile-menu a{
  display:block; color:#fff; text-decoration:none; font-family:var(--serif);
  font-size:1.5rem; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.13);
}
.mobile-menu a.mm-cta{
  margin-top:24px; background:var(--teal); color:var(--navy-deep); border:none;
  text-align:center; border-radius:3px; font-weight:700; font-family:var(--sans);
  font-size:1.02rem; padding:17px;
}
.mm-contact{margin-top:28px; color:#a9bdd6; font-size:.92rem; display:flex; flex-direction:column; gap:7px}
.mm-contact a{font-family:var(--sans); font-size:1.05rem; padding:0; border:none; color:var(--teal)}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden;
  min-height:min(84vh,720px); min-height:min(84svh,720px);
  display:flex; flex-direction:column; justify-content:center}
/* content grows to fill, then the pulse and the service band stack beneath it */
.hero > .wrap{flex:1 1 auto; display:flex; align-items:center; order:1}
/* .pulse-mon sits BEFORE .wrap in the markup (it was absolutely positioned
   before the hero became a column), so order is set explicitly here. */
.hero .pulse-mon{order:2}
.hero-carousel{order:3}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
/* Editorial hero: portrait anchored right, gradient weighted left so the
   headline sits on solid navy while the founders stay clearly visible. */
.hero-bg img{
  position:absolute; right:0; top:0; height:100%; width:min(62%,900px);
  object-fit:cover; object-position:94% 26%; opacity:1;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    /* The hero carries two framed photographs rather than one full-bleed
       image, and a heavy wash across the left-hand frame reads as a printing
       fault rather than as depth. Stops from 46% rightward are therefore light
       enough for both frames to sit clear of the navy. The headline occupies
       the left 42%, where the gradient stays dense enough for white type. */
    linear-gradient(94deg,
      rgba(0,23,60,.99) 0%, rgba(0,23,60,.96) 34%,
      rgba(0,29,74,.80) 42%, rgba(0,29,74,.44) 54%,
      rgba(0,34,86,.16) 66%, rgba(0,34,86,.05) 82%,
      rgba(0,34,86,.02) 100%),
    linear-gradient(to top,rgba(0,23,60,.55),transparent 34%);
}
/* logo motif enlarged as ambient hero graphic — fills the right side without stock imagery */
.hero-ecg{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(58%,760px); height:auto; color:var(--teal); opacity:.16;
  pointer-events:none; z-index:0;
}
.hero-ecg path{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:trace 3.4s var(--ease) .35s forwards;
}
@keyframes trace{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .hero-ecg path{animation:none; stroke-dashoffset:0}
}
@media (max-width:900px){.hero-ecg{width:110%; right:-25%; opacity:.10}}
.hero .wrap{position:relative; z-index:1; padding-block:clamp(56px,9vw,88px)}
.hero-inner{max-width:660px; display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.hero h1{color:#fff}
.hero p{color:#c8d7e9; max-width:52ch}
.hero .btn-row{margin-top:6px}

.hero-badge{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:rgba(60,195,188,.13); border:1px solid rgba(60,195,188,.4);
  padding:8px 15px; border-radius:100px; font-size:.86rem; color:#dff5f4; font-weight:500;
}
.hero-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none;
  box-shadow:0 0 0 0 rgba(60,195,188,.7); animation:ping 2.4s var(--ease) infinite}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(60,195,188,.65)}
  70%{box-shadow:0 0 0 11px rgba(60,195,188,0)}
  100%{box-shadow:0 0 0 0 rgba(60,195,188,0)}
}
@media (prefers-reduced-motion:reduce){.hero-badge .dot{animation:none}}

.hero-facts{
  display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:10px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.16); width:100%;
}
.hero-facts div{display:flex; flex-direction:column; gap:1px}
.hero-facts .k{font-size:.68rem; text-transform:uppercase; letter-spacing:.15em; color:var(--teal)}
.hero-facts .v{font-family:var(--serif); font-size:1.06rem; color:#fff}

/* --- mobile hero overrides -------------------------------------------
   MUST stay below every .hero base rule. These sat above .hero-inner and
   .hero-facts at equal specificity, so source order silently undid them:
   the CTAs stayed 227px wide and the facts stayed 245px tall. --- */
/* Mobile: the founders sit in the right ~49% of the landscape frame, so a
   centre crop on a narrow viewport loses one of them entirely. A dedicated
   portrait crop is served via <picture>, anchored as a band at the bottom of
   the hero at full opacity, with the type on solid navy above it. */
.hero-bg picture{display:block}
@media (max-width:900px){
  /* Take the photo OUT of absolute positioning and put it in normal flow as a
     band below the copy. Overlap then becomes structurally impossible, rather
     than something a guessed padding-bottom has to stay ahead of. */
  .hero{min-height:auto; flex-direction:column; align-items:stretch}
  .hero .wrap{order:1; padding-block:clamp(36px,8vw,56px) clamp(30px,6vw,42px)}
  /* The band's aspect ratio MATCHES the mobile image exactly (1200x942), so
     object-fit:cover crops nothing — both founders and the PULSES Medical sign
     stay in frame. Change the image and this ratio must change with it. */
  .hero-bg{position:static; order:2; aspect-ratio:1200/942; height:auto; flex:none}
  .hero-bg img{
    position:static; width:100%; height:100%;
    object-position:50% 50%; opacity:1;
  }
  /* soft top edge so the band doesn't hard-cut against the navy */
  .hero-bg::after{
    background:linear-gradient(to bottom,rgba(0,23,60,.92) 0,rgba(0,23,60,.32) 14%,rgba(0,23,60,0) 34%);
  }
  .hero .pulse-mon{position:static; order:3; height:56px; background:var(--navy)}

  /* align-items:flex-start made every child shrink to its content width, so the
     CTAs sat at 227px inside a 335px column. Stretch, and they fill it. */
  .hero-inner{max-width:none; align-items:stretch; gap:14px}

  /* The hero was 1351px tall on an 812px screen, pushing the founders below the
     fold. Tighten the type and lay the facts out 2-up instead of 4 stacked. */
  .hero h1{font-size:clamp(1.85rem,8.2vw,2.4rem); line-height:1.1}
  .hero .lede{font-size:1rem; line-height:1.55}
  .hero-badge{align-self:flex-start}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%}
  /* 44px is the accessibility floor for a tap target — do not shrink below it
     to save vertical space, even for a tertiary link. */
  .hero-cta .btn-quiet{order:3; min-height:44px; padding:6px 0}
  .hero .wrap{padding-block:clamp(26px,6vw,40px) clamp(22px,5vw,32px)}

  .hero-facts{
    display:grid; grid-template-columns:1fr 1fr; gap:14px 20px;
    padding-top:16px; margin-top:2px;
  }
  .hero-facts .k{font-size:.62rem; letter-spacing:.13em}
  .hero-facts .v{font-size:.95rem}
}

/* ---------- cards ---------- */
.card{
  background:var(--white); border:1px solid var(--line-2); border-radius:4px;
  padding:clamp(20px,2.6vw,28px); display:flex; flex-direction:column; gap:11px;
  text-decoration:none; color:inherit; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line)}
.card h3{color:var(--navy)}
.card p{font-size:.95rem; color:var(--ink-2); max-width:none}
.card .more{
  margin-top:auto; padding-top:6px; font-size:.86rem; font-weight:600;
  color:var(--teal-deep); display:inline-flex; align-items:center; gap:7px;
}
a.card:hover .more{gap:11px}
.card .more::after{content:"→"; transition:transform .3s var(--ease)}
.card-icon{width:40px; height:40px; color:var(--teal-deep); flex:none}
.card-2{background:var(--paper-2); border-color:transparent}

/* numbered / stat cards */
.stat{display:flex; flex-direction:column; gap:5px}
.stat .n{font-family:var(--serif); font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--navy); line-height:1}
.dark .stat .n{color:var(--teal)}
.stat .l{font-size:.88rem; color:var(--ink-3)}
.dark .stat .l{color:#a9bdd6}

/* ---------- info / callout ---------- */
.callout{
  background:var(--teal-tint); border-left:3px solid var(--teal);
  padding:20px 24px; border-radius:0 3px 3px 0; display:flex; flex-direction:column; gap:9px;
}
.callout.urgent{background:#fdecea; border-left-color:#c0392b}
.callout.urgent strong{color:#96271c}
.callout h3{font-size:1.1rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  cursor:pointer; list-style:none; padding:19px 40px 19px 0; position:relative;
  font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:1.5rem; font-weight:300; color:var(--teal-deep);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 20px; color:var(--ink-2); font-size:.97rem}
.faq details p+p{padding-top:0; margin-top:-8px; padding-bottom:20px}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto; border:1px solid var(--line-2); border-radius:4px; background:var(--white)}
table{border-collapse:collapse; width:100%; min-width:420px; font-size:.94rem}
th,td{text-align:left; padding:13px 18px; border-bottom:1px solid var(--line-2)}
thead th{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-3); font-weight:600; background:var(--paper-2); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; font-weight:600; color:var(--navy)}
th.num{text-align:right}

/* ---------- lists ---------- */
ul.ticks{list-style:none; padding:0; display:flex; flex-direction:column; gap:11px}
ul.ticks li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); font-size:.97rem}
ul.ticks li::before{
  content:""; flex:none; width:19px; height:19px; margin-top:.28em; border-radius:50%;
  background:var(--teal-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6b66' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.dark ul.ticks li{color:#c3d2e4}
.dark ul.ticks li::before{background-color:rgba(60,195,188,.18)}

/* Numbered steps.
   NOTE: ::before, <b> and <p> are ALL grid items. Pinning ::before to column 1
   spanning every row, and forcing all real children into column 2, is what stops
   the paragraph wrapping underneath the number. */
ol.steps{list-style:none; padding:0; counter-reset:s; display:flex; flex-direction:column; gap:22px}
ol.steps li{counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:2px 16px}
ol.steps li::before{
  content:counter(s,decimal-leading-zero); grid-column:1; grid-row:1 / -1;
  font-family:var(--serif); font-size:1.15rem; color:var(--teal-deep);
  font-weight:700; line-height:1.5; font-variant-numeric:tabular-nums;
}
ol.steps li > *{grid-column:2; min-width:0}
ol.steps b{display:block; color:var(--navy); font-family:var(--serif); font-size:1.12rem}
ol.steps p{color:var(--ink-2); font-size:.95rem; max-width:60ch}

/* ---------- team ---------- */
.person{display:flex; flex-direction:column; gap:4px}
.person .nm{font-family:var(--serif); font-size:1.15rem; color:var(--navy); font-weight:600}
.person .rl{font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--teal-deep); font-weight:600}
.person .cr{font-size:.88rem; color:var(--ink-3)}
.placeholder{
  font-size:.78rem; color:#8a6019; background:#faf2e4; border:1px dashed #d7b877;
  padding:5px 9px; border-radius:3px; display:inline-block; margin-top:5px;
}

/* ---------- footer ---------- */
footer.site{background:var(--navy-deep); color:#a9bdd6; padding-block:clamp(48px,6vw,72px) 0}
footer.site h4{color:#fff; font-family:var(--sans); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.16em; font-weight:600; margin-bottom:14px}
footer.site a{color:#c3d2e4; text-decoration:none; font-size:.94rem}
footer.site a:hover{color:var(--teal); text-decoration:underline}
.f-grid{display:grid; gap:clamp(28px,4vw,44px); grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.f-col{display:flex; flex-direction:column; gap:9px}
.f-col address{font-style:normal; font-size:.94rem; line-height:1.7}
.f-bottom{
  margin-top:clamp(36px,5vw,52px); padding-block:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:.83rem; color:#7d93ae;
}
.f-emergency{
  background:rgba(192,57,43,.14); border:1px solid rgba(224,119,107,.4);
  padding:13px 17px; border-radius:3px; font-size:.9rem; color:#f0d5d1;
}
.f-emergency strong{color:#fff}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--reveal-delay,0s)}
.reveal.in-view{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none}
}

/* ---------- utilities ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:300; background:var(--navy); color:#fff;
  padding:12px 20px; text-decoration:none;
}
.skip:focus{left:8px; top:8px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}
.center{text-align:center; align-items:center}
.center p{margin-inline:auto}
.mt-0{margin-top:0}

@media (max-width:640px){
  body{font-size:16px}
  .hero .btn-row .btn{width:100%}
  .btn{width:auto}
}

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* ---------- page header ---------- */
.page-head{background:var(--navy); color:#fff; padding-block:clamp(40px,6vw,72px) clamp(36px,5vw,60px); position:relative; overflow:hidden}
.page-head::after{
  content:""; position:absolute; right:-8%; bottom:-40%; width:min(46%,520px); aspect-ratio:3/1;
  background:radial-gradient(ellipse at center,rgba(60,195,188,.16),transparent 68%); pointer-events:none;
}
.page-head .wrap{position:relative; z-index:1}
.page-head h1{color:#fff; max-width:20ch}
.page-head p{color:#c8d7e9; max-width:58ch; margin-top:12px}
.page-head .eyebrow{color:var(--teal)}
.page-head .btn-row{margin-top:22px}
.page-head .btn-line{color:#fff; border-color:rgba(255,255,255,.42)}
.page-head .btn-line:hover{border-color:#fff; background:rgba(255,255,255,.08)}

/* ---------- breadcrumbs ---------- */
.crumbs{padding-block:14px; font-size:.83rem; color:var(--ink-3); border-bottom:1px solid var(--line-2); background:var(--paper)}
.crumbs ol{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.crumbs li{display:flex; align-items:center; gap:10px}
.crumbs li+li::before{content:"/"; color:var(--line); flex:none}
.crumbs a{color:var(--ink-3); text-decoration:none}
.crumbs a:hover{color:var(--teal-deep); text-decoration:underline}
.crumbs [aria-current]{color:var(--navy); font-weight:500}

/* ---------- prose ---------- */
.prose{display:flex; flex-direction:column; gap:18px; max-width:70ch}
.prose h2{margin-top:14px}
.prose h3{margin-top:8px; font-size:1.2rem}
.prose p{color:var(--ink-2)}
.prose ul:not(.ticks){padding-left:22px; color:var(--ink-2); display:flex; flex-direction:column; gap:8px}
.prose li::marker{color:var(--teal-deep)}
.prose>.callout{max-width:none}

/* two-column article layout with a sticky aside */
.split{display:grid; gap:clamp(28px,4vw,54px); grid-template-columns:1fr}
/* grid children default to min-width:auto, so a wide child (a table with
   min-width, a long token) forces the column open and overflows the page.
   Same fix as .grid>* — every grid track in the system needs it. */
.split>*{min-width:0}
@media (min-width:940px){ .split{grid-template-columns:minmax(0,1fr) 320px} }
.aside{display:flex; flex-direction:column; gap:16px}
@media (min-width:940px){ .aside{position:sticky; top:100px; align-self:start} }
.aside .card{gap:9px}
.aside h3{font-size:1.05rem}
.aside p{font-size:.9rem}

/* ---------- image placeholder ----------
   Deliberately visible: an unfilled slot must look unfinished, never shippable. */
.img-slot{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:26px 20px; min-height:var(--slot-h,220px);
  background:
    repeating-linear-gradient(45deg,rgba(0,34,86,.028) 0 12px,transparent 12px 24px),
    var(--navy-tint);
  border:2px dashed rgba(0,34,86,.24); border-radius:4px; color:var(--navy);
}
.img-slot b{font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; color:var(--teal-deep)}
.img-slot span{font-size:.88rem; color:var(--ink-2); max-width:34ch}
.img-slot em{font-style:normal; font-size:.74rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.img-slot.wide{--slot-h:300px}
.img-slot.tall{--slot-h:380px}
.img-slot.portrait{--slot-h:260px}

/* ---------- info pairs ---------- */
.pairs{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-2)}
.pairs div{display:flex; flex-wrap:wrap; gap:4px 18px; justify-content:space-between;
  padding:13px 0; border-bottom:1px solid var(--line-2)}
.pairs dt,.pairs .k{color:var(--ink-3); font-size:.9rem}
.pairs dd,.pairs .v{margin:0; font-weight:600; color:var(--navy); font-size:.95rem; text-align:right}

/* ---------- 404 ---------- */
.mid{min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center}

/* ==========================================================================
   Image art direction
   Same source photography as the old site, deliberately re-treated: fixed
   aspect ratios, a brand-tinted duotone option, and an offset teal rule.
   ========================================================================== */
.fig{position:relative; border-radius:4px; overflow:hidden; background:var(--navy-tint)}
.fig img{width:100%; height:100%; object-fit:cover; display:block; object-position:50% 28%}
.fig.r-wide{aspect-ratio:16/9}
.fig.r-photo{aspect-ratio:4/3}
.fig.r-square{aspect-ratio:1/1}
.fig.r-portrait{aspect-ratio:4/5}
.fig.r-tall{aspect-ratio:3/4}

/* brand duotone — pushes reused stock into the navy/teal palette */
.fig.tint img{filter:grayscale(.55) contrast(1.06) brightness(1.02)}
.fig.tint::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(150deg,rgba(0,34,86,.62),rgba(60,195,188,.26));
  mix-blend-mode:multiply;
}
.fig.tint-soft img{filter:saturate(.88) contrast(1.03)}
.fig.tint-soft::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,rgba(0,34,86,.22),transparent 62%);
}

/* offset rule — a quiet editorial frame, echoes the eyebrow rule */
.fig.framed{overflow:visible}
.fig.framed img{border-radius:4px; position:relative; z-index:1}
.fig.framed::before{
  content:""; position:absolute; left:-12px; bottom:-12px; width:64%; height:58%;
  border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
  border-radius:0 0 0 4px; z-index:0;
}
@media (max-width:640px){ .fig.framed::before{left:-7px; bottom:-7px} }

.fig figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 18px 14px; color:#fff; font-size:.83rem; line-height:1.4;
  background:linear-gradient(to top,rgba(0,23,60,.86),transparent);
}

/* portrait cards for the team */
.pcard{background:var(--white); border:1px solid var(--line-2); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column}
.pcard .fig{border-radius:0}
.pcard .pbody{padding:18px 20px 20px; display:flex; flex-direction:column; gap:3px}

/* ==========================================================================
   Pulse monitor — the signature motif, taken from the logo's ECG mark.
   A dim base trace with a bright segment travelling along it, like a monitor.
   ========================================================================== */
.pulse-mon{position:relative; width:100%; line-height:0; overflow:hidden}
.pulse-mon svg{width:100%; height:100%; display:block; overflow:visible}
.pulse-mon .trace{fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.pulse-mon .trace.base{stroke:currentColor; opacity:.20; stroke-width:2}
.pulse-mon .trace.sweep{
  stroke:currentColor; stroke-width:2.5; opacity:.95;
  stroke-dasharray:var(--seg,90) var(--gap,4000);
  stroke-dashoffset:var(--len,4090);
  animation:sweep var(--speed,5.5s) linear infinite;
  filter:drop-shadow(0 0 6px currentColor);
}
@keyframes sweep{ to{stroke-dashoffset:0} }
.pulse-mon:hover .trace.sweep{animation-duration:calc(var(--speed,5.5s) / 2.2)}

/* hero variant — sits low behind the type, teal on navy */
.hero .pulse-mon{
  position:relative; z-index:1; flex:none;
  color:var(--teal); height:70px; margin-bottom:-12px; pointer-events:auto;
}
.hero .pulse-mon .trace.base{opacity:.14}
@media (max-width:900px){ .hero .pulse-mon{height:60px} }

/* section-divider variant */
.ecg-live{color:var(--teal); height:44px; background:var(--paper)}
.ecg-live.on-navy{background:transparent}

@media (prefers-reduced-motion:reduce){
  .pulse-mon .trace.sweep{animation:none; stroke-dashoffset:0; opacity:.42; filter:none}
}

/* ==========================================================================
   Registration timeline — numbered nodes joined by a live pulse line.
   Replaces the plain <ol> which mis-wrapped and read unfinished.
   ========================================================================== */
.reg{display:grid; gap:0; counter-reset:r; position:relative}
.reg-step{
  counter-increment:r; position:relative; display:grid;
  grid-template-columns:64px 1fr; gap:0 24px; padding-bottom:34px;
}
.reg-step:last-child{padding-bottom:0}

/* the connector: a vertical line between node centres */
.reg-step::before{
  content:""; position:absolute; left:31px; top:56px; bottom:-4px; width:2px;
  background:linear-gradient(to bottom,var(--teal),rgba(60,195,188,.22));
}
.reg-step:last-child::before{display:none}

.reg-node{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--white); border:2px solid var(--teal); position:relative; z-index:1;
  font-family:var(--serif); font-size:1.32rem; font-weight:700; color:var(--navy);
  font-variant-numeric:tabular-nums; box-shadow:0 0 0 6px var(--paper);
}
.reg-node::after{content:counter(r,decimal-leading-zero)}
.reg-node span{position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--teal);
  opacity:0; animation:node-ping 3.4s var(--ease) infinite; animation-delay:var(--d,0s)}
@keyframes node-ping{
  0%{transform:scale(1); opacity:.7}
  55%,100%{transform:scale(1.55); opacity:0}
}
.reg-body{padding-top:9px; display:flex; flex-direction:column; gap:5px; min-width:0}
.reg-body h3{font-size:1.22rem; color:var(--navy)}
.reg-body p{color:var(--ink-2); font-size:.97rem; max-width:56ch}

.dark .reg-node{background:var(--navy); color:#fff; box-shadow:0 0 0 6px var(--navy)}
.dark .reg-body h3{color:#fff}
.dark .reg-body p{color:#c3d2e4}

@media (prefers-reduced-motion:reduce){ .reg-node span{animation:none} }
@media (max-width:600px){
  .reg-step{grid-template-columns:48px 1fr; gap:0 16px; padding-bottom:28px}
  .reg-node{width:48px; height:48px; font-size:1.05rem}
  .reg-step::before{left:23px; top:42px}
  .reg-body{padding-top:5px}
  .reg-body h3{font-size:1.1rem}
}

/* pharmacy list — two columns on wider screens, still one per row on mobile */
ul.ticks.pharm{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:10px 24px}

/* core values cards — numbered, on the navy ground */
.card-val{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); gap:8px}
.card-val .val-n{
  font-family:var(--serif); font-size:1.6rem; line-height:1; color:var(--teal);
  font-variant-numeric:tabular-nums; margin-bottom:4px;
}
.dark .card-val h3{color:#fff}
.dark .card-val p{color:#c3d2e4; font-size:.95rem}

/* Core values carry a pulse mark, not a numeral — values are not a sequence,
   and numbering them would imply a rank that does not exist. */
.card-val .val-mark{width:44px; height:18px; color:var(--teal); margin-bottom:6px}

/* Hero CTA stack: one dominant action (booking), prescriptions second, a quiet
   tertiary link for registration. Two-line primary carries the number without
   spending a whole button on it. */
.hero-cta .btn-teal{flex-direction:column; gap:1px; padding:12px 30px; line-height:1.25}
.hero-cta .btn-teal span{font-weight:700; font-size:1rem}
.hero-cta .btn-teal small{font-weight:600; font-size:.78rem; opacity:.72; letter-spacing:.02em}
.btn-quiet{background:transparent; color:#cfe0f0; border-color:transparent; font-weight:600;
  min-height:44px; padding:10px 6px; text-decoration:underline; text-decoration-color:rgba(207,224,240,.4)}
.btn-quiet:hover{color:#fff; text-decoration-color:#fff; transform:none}
@media (max-width:640px){
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%}
  .hero-cta .btn-quiet{text-align:center}
}

/* ==========================================================================
   Hero service carousel
   Echoes the old site's rotating hero, but the H1 stays fixed — rotating a
   page's H1 is exactly why the previous site had none for Google to read.
   Set in the sans face for legibility at small sizes.
   ========================================================================== */
.hero-carousel{
  position:relative; z-index:2; width:100%;
  border-top:3px solid var(--teal);
  background:var(--paper);
  box-shadow:0 -10px 30px -18px rgba(0,34,86,.45);
}
.hc-inner{display:flex; align-items:center; gap:clamp(12px,2.2vw,26px); min-height:104px; padding-block:16px}
.hc-label{
  flex:none; font-family:var(--sans); font-size:.63rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; color:var(--teal-deep);
  align-self:stretch; display:flex; align-items:center;
  border-left:1px solid var(--line); padding-left:clamp(12px,2vw,20px);
}
.hc-view{position:relative; flex:1 1 auto; min-width:0; min-height:62px}
.hc-slide{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  gap:3px; text-decoration:none; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.hc-slide.is-active{opacity:1; visibility:visible; transform:none}
.hc-slide .t{
  font-family:var(--sans); font-size:clamp(1.06rem,2vw,1.3rem); font-weight:700;
  color:var(--navy); letter-spacing:-.008em; line-height:1.24;
}
.hc-slide .d{
  font-family:var(--sans); font-size:.93rem; font-weight:400; color:var(--ink-2); line-height:1.4;
}
.hc-slide .go{
  font-family:var(--sans); font-size:.8rem; font-weight:700; color:var(--teal-deep);
  display:inline-flex; align-items:center; gap:6px; margin-top:2px;
}
.hc-slide:hover .t{color:var(--teal-deep)}
.hc-slide:hover .go{gap:10px}

/* counter + arrows: explicit affordances so the band reads as interactive */
.hc-count{
  flex:none; font-family:var(--serif); font-size:1.5rem; line-height:1;
  color:var(--teal-deep); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.hc-count small{font-family:var(--sans); font-size:.7rem; color:var(--ink-3)}
.hc-nav{flex:none; display:flex; align-items:center; gap:8px}
.hc-arrow{
  width:44px; height:44px; flex:none; border:1px solid var(--line); background:var(--white);
  border-radius:50%; cursor:pointer; display:grid; place-items:center; color:var(--navy);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.hc-arrow svg{width:16px; height:16px}
.hc-arrow:hover{background:var(--navy); border-color:var(--navy); color:#fff}

.hc-dots{flex:none; display:flex; gap:6px; align-items:center; margin-left:2px}
.hc-dot{
  width:24px; height:44px; padding:0; border:none; background:transparent;
  cursor:pointer; position:relative;
}
.hc-dot::before{
  content:""; position:absolute; left:3px; right:3px; top:50%; height:2px; margin-top:-1px;
  background:var(--line); border-radius:2px; transition:background .3s, height .3s;
}
.hc-dot[aria-selected="true"]::before{background:var(--teal-deep); height:4px}
.hc-dot:hover::before{background:var(--ink-3)}

@media (max-width:900px){
  .hero-carousel{order:3}
  .hc-inner{min-height:auto; padding-block:16px; gap:14px}
  .hc-label{display:none}
  .hc-view{min-height:64px}
  .hc-slide .t{font-size:1.02rem}
  .hc-slide .d{font-size:.86rem}
}
@media (max-width:1080px){ .hc-label{display:none} }
@media (max-width:640px){
  .hc-inner{flex-wrap:wrap; gap:10px 12px}
  .hc-view{flex:1 1 100%; order:2; min-height:76px}
  .hc-count{order:1}
  .hc-nav{order:3; margin-left:auto}
  .hc-dots{gap:3px}
  .hc-dot{width:18px}
}
@media (prefers-reduced-motion:reduce){
  .hc-slide{transition:none}
}

/* ==========================================================================
   Service thumbnails
   Square crops at ~110px. Sourced from the practice's own imagery, which is
   low-resolution — at this display size that is invisible, whereas a large
   card image would have been visibly soft.
   ========================================================================== */
.card-svc{flex-direction:row; align-items:flex-start; gap:16px}
.svc-thumb{
  flex:none; width:clamp(84px,11vw,104px); aspect-ratio:1/1; border-radius:4px;
  overflow:hidden; background:var(--navy-tint);
}
.svc-thumb img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease)}
a.card:hover .svc-thumb img{transform:scale(1.05)}
.card-svc .svc-body{display:flex; flex-direction:column; gap:8px; min-width:0}
.card-svc h3{font-size:1.1rem}
.card-svc p{font-size:.92rem}
@media (max-width:520px){
  .card-svc{gap:13px}
  .svc-thumb{width:74px}
}

/* carousel slide thumbnail */
.hc-thumb{
  flex:none; width:64px; height:64px; border-radius:4px; overflow:hidden;
  background:var(--navy-tint); align-self:center;
}
.hc-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.hc-slide{flex-direction:row !important; align-items:center; gap:15px}
.hc-slide .hc-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
@media (max-width:520px){ .hc-thumb{width:52px; height:52px} }

/* ==========================================================================
   Prescription request form
   ========================================================================== */
.frm{display:flex; flex-direction:column; gap:18px; max-width:none}
.frm-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.frm-grid>*{min-width:0}
.f{display:flex; flex-direction:column; gap:6px}
.f.wide{grid-column:1/-1}
.f label{font-size:.85rem; font-weight:600; color:var(--navy)}
.f label .req{color:#b23b2e; font-weight:700}
.f .hint{font-size:.78rem; color:var(--ink-3)}
.f input,.f select,.f textarea{
  width:100%; min-height:48px; padding:11px 13px; border:1px solid var(--line);
  border-radius:3px; background:var(--white); color:var(--ink);
  font-family:var(--sans); font-size:1rem; transition:border-color .2s, box-shadow .2s;
}
.f textarea{min-height:96px; resize:vertical; line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none; border-color:var(--teal-deep); box-shadow:0 0 0 3px var(--teal-tint);
}
.f-consent{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:3px; padding:15px 17px}
.f-consent input{width:20px; height:20px; min-height:0; margin-top:2px; accent-color:var(--teal-deep)}
.f-consent label{font-size:.9rem; font-weight:400; color:var(--ink-2); line-height:1.5}
.frm .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.frm-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding-top:2px}
.frm-actions .note{font-size:.84rem; color:var(--ink-3); max-width:40ch}

/* confirmation page */
.confirm{display:flex; flex-direction:column; gap:20px; max-width:60ch}
.ref-chip{
  display:inline-flex; align-items:center; gap:12px; align-self:flex-start;
  background:var(--teal-tint); border:1px solid var(--teal-deep); border-radius:3px;
  padding:12px 18px; font-family:var(--mono,ui-monospace,monospace);
}
.ref-chip b{font-size:1.25rem; letter-spacing:.06em; color:var(--navy)}
.ref-chip span{font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--teal-deep)}

/* ---------- repeatable medication rows ---------- */
.meds{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.meds legend{
  padding:0; font-size:.85rem; font-weight:600; color:var(--navy); margin-bottom:2px;
}
.med-row{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:0 14px;
  align-items:start; background:var(--paper-2); border:1px solid var(--line-2);
  border-radius:4px; padding:16px 16px 18px;
}
.med-n{
  font-family:var(--serif); font-size:1.05rem; font-weight:700; color:var(--teal-deep);
  line-height:1; padding-top:9px; font-variant-numeric:tabular-nums; min-width:1.2em;
}
.med-fields{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.med-fields>*{min-width:0}
.med-fields .f.wide{grid-column:1/-1}
.med-del{
  width:34px; height:34px; flex:none; border:1px solid var(--line); background:var(--white);
  border-radius:50%; cursor:pointer; color:var(--ink-3); font-size:1.15rem; line-height:1;
  display:grid; place-items:center; transition:background .2s, color .2s, border-color .2s;
}
.med-del:hover{background:#fdecea; border-color:#c0392b; color:#96271c}
/* a class rule with `display` outranks the UA's [hidden]{display:none},
   so hiding has to be stated explicitly or the attribute has no effect */
.med-del[hidden]{display:none}
.med-add-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px}
.med-add-row .btn{min-height:46px; padding:11px 20px; font-size:.92rem}
.med-add-row .hint{font-size:.84rem; color:var(--ink-3)}
@media (max-width:520px){
  .med-row{grid-template-columns:auto 1fr; padding:14px}
  .med-del{grid-column:2; justify-self:end; margin-top:-6px}
}

/* worked example above the medication rows */
.med-eg{
  background:var(--teal-tint); border:1px solid rgba(15,107,102,.22);
  border-radius:4px; padding:15px 17px; display:flex; flex-direction:column; gap:11px;
}
.med-eg>b{
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em;
  color:var(--teal-deep);
}
.med-eg .eg-grid{
  display:grid; gap:10px 22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,138px),1fr));
}
.med-eg .eg-grid span{display:flex; flex-direction:column; gap:2px; min-width:0;
  font-size:.92rem; color:var(--navy); font-weight:600}
.med-eg .eg-grid i{
  font-style:normal; font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.11em; color:var(--teal-deep);
}
.med-eg p{font-size:.87rem; color:var(--ink-2); max-width:62ch}

/* payment step on the confirmation page — the required final action */
.pay-step{
  background:var(--navy); color:#dce6f2; border-radius:4px; padding:22px 24px;
  display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
}
.pay-step .eyebrow{color:var(--teal)}
.pay-step h3{color:#fff; font-size:1.3rem}
.pay-step p{color:#c3d2e4; max-width:58ch}
.pay-step strong{color:#fff}
.pay-step .pay-note{font-size:.86rem; color:#a9bdd6}
.pay-step .pay-note b{color:var(--teal); font-family:var(--mono,ui-monospace,monospace); letter-spacing:.04em}