/* ============================================================================
   INSTINCTIVE HEALTHPASS — child-theme tokens & devices
   Deliverable §I.1. Load after Kadence + Elementor so these win on specificity.

   THREE DOCUMENTS DISAGREE. Resolutions, per the Directive's authority order
   (Directive → Brand Guidelines v2 → Copy Brief → Language Playbook for language):

   1. COLOUR — Directive §C wins. Brand v2 §3 and its §13 token block still carry the
      retired v1 palette, which Directive D1 supersedes in
      favour of the live-measured brand customers already recognise. Every ratio below
      was recomputed, not copied.

   2. GEOMETRY — Directive §C.3 wins where it and Brand v2 §4/§5 differ (D3 says so
      explicitly): card radius 20 not 18, pill 32 not 999, button padding 16x24 not
      14x28, H2 38/58 not 32/1.2, body 16/26. Adopting the imported kit's own geometry
      means not fighting its templates widget by widget.

   3. EVERYTHING ELSE — Brand v2 governs: the device library, motion tokens and
      choreography, component language, elevation as a three-step system.

   ONE ACCESSIBILITY CORRECTION, applied deliberately:
      Brand v2 §10/§11 specify a 2px TEAL focus ring. That held for the retired teal
      (3.7:1 on white). Under §C's teal (#00ABC8) it is 2.74:1 — below the
      3:1 WCAG 2.1 SC 1.4.11 requires of a focus indicator. Focus rings therefore use
      TEAL-INK (#00758A, 5.37:1). This is the same class of fix as §C's hero-contrast
      rule: the palette moved and a rule written against the old one broke.
   ========================================================================= */

:root{
  /* ---- Colour: Directive §C.1 (canonical) ------------------------------- */
  --ihp-navy:#003B71;          /* primary ink, headings, ACTION colour        11.27 on white */
  --ihp-deep-navy:#00294F;     /* dark surfaces; body text on teal           14.68 on white */
  --ihp-teal:#00ABC8;          /* accent SURFACES only — never text on light, never a button fill */
  --ihp-teal-ink:#00758A;      /* links, teal text on light, focus rings       5.37 on white */
  --ihp-off-white:#F7FAFC;     /* page background */
  --ihp-white:#FFFFFF;
  --ihp-ink:#222222;           /* body text */
  --ihp-slate:#5B6B7A;         /* secondary text                               5.48 on white */
  --ihp-mist:#D9E2E9;          /* borders, dividers */
  --ihp-amber:#D79A2B;         /* CALLOUT BORDERS ONLY — never text, never a button */
  --ihp-amber-ink:#8A5E12;     /* honesty-notice text                          5.69 on white */
  --ihp-cream:#FFF6E8;
  --ihp-success:#1E7A46; --ihp-success-wash:#EAF6EF;
  --ihp-error:#B42318;   --ihp-error-wash:#FCEEEC;
  --ihp-info:var(--ihp-teal-ink); --ihp-info-wash:#E6F6FA;
  --ihp-warning:var(--ihp-amber-ink); --ihp-warning-wash:var(--ihp-cream);

  /* Treatment only — never a standalone fill, never text (§C.1) */
  --ihp-grad-hero:linear-gradient(160deg,#00294F 0%,#003B71 70%);
  --ihp-glow:radial-gradient(closest-side,rgba(0,171,200,.24),transparent 65%);

  /* ---- Type: Poppins (D2), Directive §C.3 scale ------------------------- */
  --ihp-font:'Poppins','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  /* Brand v2's fluid clamps, retargeted to §C.3's sizes.
     The spaces around every "+" are load-bearing. CSS math requires whitespace
     around + and -, so clamp(2.25rem,1.5rem+2.6vw,3.5rem) is an INVALID
     declaration — it is dropped silently and the element inherits 16px. That is
     not a subtle regression: it killed the entire type scale, and the impact
     odometer, the one element the whole homepage is built around, rendered
     smaller than the caption beneath it. Found by looking at a browser render,
     not by reading the file. Do not close these up. */
  --ihp-display:clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);  /* Home hero only, one per site */
  --ihp-h1:clamp(1.875rem, 1.4rem + 1.7vw, 2.875rem);    /* ~46px desktop per §C.3 */
  --ihp-h2:clamp(1.625rem, 1.35rem + 1vw, 2.375rem);     /* 38px per §C.3 */
  --ihp-h3:1.25rem;                                       /* 20/30 per §C.3 */
  --ihp-lead:clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --ihp-body:1rem;            --ihp-body-lh:1.625;    /* 16/26 per §C.3 */
  /* One step down, and only one. Components kept reaching for .875rem (14px) for
     ordinary copy, which is below the §C.3 body size and is what made the pages
     read as too small. 15px is for metadata — addresses, captions, table cells —
     never for a sentence a visitor has to read. */
  --ihp-body-sm:.9375rem;     --ihp-body-sm-lh:1.6;
  --ihp-body-long:1.125rem;                           /* blog 18px */

  /* ---- Space: Brand v2 §5, 4px base ------------------------------------ */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-6:24px;
  --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px;
  /* The 4px scale has gaps, and a gap is not a harmless omission: an
     undefined var() with no fallback makes the whole declaration invalid, so
     it is dropped silently. .ihp-sec{padding:var(--s-20) 0} was rendering with
     no vertical padding at all in every section template. */
  --s-5:20px; --s-10:40px; --s-20:80px;
  --ihp-container:1200px;      /* both documents agree */
  --ihp-prose:720px;

  /* ---- Shape: §C.3 geometry -------------------------------------------- */
  --r-pill:32px;    /* kit value, not Brand v2's 999 */
  --r-card:20px;    /* kit value, not Brand v2's 18 */
  --r-input:12px;
  --r-chip:8px;

  /* ---- Elevation ------------------------------------------------------- */
  /* E1 is the kit's measured card shadow (§C.3). E2/E3 keep Brand v2's three-step
     system but re-tinted to the new deep navy — the old tint referenced a retired hex. */
  --e1:0 4px 16px rgba(0,0,0,.06);
  --e2:0 8px 24px rgba(0,41,79,.10);
  --e3:0 16px 48px rgba(0,41,79,.16);

  /* ---- Motion: Brand v2 §7 -------------------------------------------- */
  --t-fast:150ms; --t-base:250ms; --t-slow:400ms; --t-draw:500ms;
  --t-odometer:2200ms;
  --ease-decel:cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------ */
body{
  font-family:var(--ihp-font);
  font-size:var(--ihp-body);
  line-height:var(--ihp-body-lh);
  color:var(--ihp-ink);
  background:var(--ihp-off-white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--ihp-font);color:var(--ihp-navy);}
/* Measure caps, not a hard ceiling.
   These were 20ch, which is my own addition and not in Directive §C.3 — and it
   was too tight: a normal section heading broke to three lines mid-phrase, and
   in Elementor a widget cannot easily undo an element-level max-width. 28ch keeps
   headings from running the full 1200 container while letting a real headline
   sit on two lines. Any heading that genuinely needs to be narrow gets
   .ihp-measure. */
h1{font-size:var(--ihp-h1);font-weight:600;letter-spacing:-.015em;line-height:1.15;max-width:28ch;}
h2{font-size:var(--ihp-h2);font-weight:600;letter-spacing:-.01em;line-height:1.28;max-width:28ch;}
/* 600, not 500. h3 carries card and feature titles, where 500 next to 16px body
   copy reads as unstyled rather than as a heading. */
h3{font-size:var(--ihp-h3);font-weight:600;line-height:1.45;}
.ihp-measure{max-width:20ch;}
h4{font-size:1.25rem;font-weight:600;line-height:1.35;}
p{max-width:68ch;}
.ihp-display{font-size:var(--ihp-display);font-weight:600;letter-spacing:-.02em;line-height:1.08;}
.ihp-lead{font-size:var(--ihp-lead);line-height:1.55;}
.ihp-prose{max-width:var(--ihp-prose);font-size:var(--ihp-body-long);}
/* 700 is for one emphasised word inside a 600 heading — never a whole headline. */
h1 strong,h2 strong,h3 strong{font-weight:700;}
a{color:var(--ihp-teal-ink);}

/* ---------------------------------------------------------------------------
   Dark bands — max two per page on Home, one on interiors (Brand v2 §3)
   Inside a dark band the ratio inverts: navy field, white text, teal the only accent.
   ------------------------------------------------------------------------ */
.ihp-dark{background:var(--ihp-deep-navy);color:var(--ihp-white);position:relative;isolation:isolate;}
.ihp-dark h1,.ihp-dark h2,.ihp-dark h3,.ihp-dark h4{color:var(--ihp-white);}
.ihp-dark p{color:var(--ihp-mist);}
.ihp-hero-depth{background:var(--ihp-grad-hero);}
.ihp-dark .ihp-glow{position:absolute;inset:0;background:var(--ihp-glow);z-index:-1;pointer-events:none;}
/* Nothing casts a shadow inside a dark band — glass borders do that work (Brand v2 §5). */
.ihp-dark .card,.ihp-dark .glass{box-shadow:none;}

/* THE STANDING TEAL RULE (§C.1).
   On any teal surface, body text is DEEP NAVY (5.36:1). Navy on teal is 4.11 and is
   permitted only at >=18px/600. White on teal is 2.74 and is never permitted. */
.ihp-teal-surface{background:var(--ihp-teal);color:var(--ihp-deep-navy);}
.ihp-teal-surface h1,.ihp-teal-surface h2,
.ihp-teal-surface h3,.ihp-teal-surface p{color:var(--ihp-deep-navy);}
.ihp-teal-surface .ihp-navy-lg{color:var(--ihp-navy);font-size:1.125rem;font-weight:600;}

/* ---------------------------------------------------------------------------
   Signature devices (Brand v2 §6) — two to three per screen, maximum
   ------------------------------------------------------------------------ */

/* 6.1 Kicker */
.ihp-kicker{
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ihp-teal-ink);
  margin:0 0 var(--s-3);
}
.ihp-dark .ihp-kicker{color:var(--ihp-teal);}   /* teal as text is fine on a dark field */

/* 6.2 Drawn keyline — the brand's pulse */
.ihp-keyline{
  width:48px;height:3px;background:var(--ihp-teal);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-draw) var(--ease-decel);
  margin-bottom:var(--s-3);
}
.in-view .ihp-keyline,.ihp-keyline.is-drawn{transform:scaleX(1);}

/* 6.3 Amber callout — honesty moments only: eligibility limits, exclusions,
   not-insurance clarifiers. Never promotions, tips, or celebration. Amber's
   meaning is a compliance asset (Brand v2 §6.3 / Playbook). */
.ihp-callout{
  background:var(--ihp-cream);
  border-left:3px solid var(--ihp-amber);
  border-radius:var(--r-input);
  padding:var(--s-4) var(--s-6);
}
.ihp-callout .ihp-callout-title{
  color:var(--ihp-amber-ink);font-weight:600;font-size:.875rem;margin:0 0 var(--s-2);
}
.ihp-callout p{color:var(--ihp-ink);margin:0;}

/* 6.4 Glass card — dark bands only */
.ihp-dark .glass{
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-card);padding:var(--s-6);
}

/* 6.5 Dot grid — atmosphere, not pattern; masked so it never reaches an edge */
.ihp-dotgrid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 2px,transparent 2px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
}

/* 6.6 Receipt rule — dashed, and ONLY inside itemised truth tables:
   what's included / what's not, pricing line items, calculator breakdowns.
   It is meaningful, so it stays scarce. Solid mist everywhere else. */
.ihp-receipt-rule{border:0;border-top:1px dashed var(--ihp-mist);margin:var(--s-3) 0;}
hr{border:0;border-top:1px solid var(--ihp-mist);}

/* 6.7 Impact odometer — flagship, Home only, one per page.
   Poppins ships proportional figures and no tabular table, so each digit needs a
   fixed-width cell or the number visibly wiggles as it rolls. */
.ihp-odometer{
  font-size:var(--ihp-display);font-weight:600;color:var(--ihp-white);
  line-height:1.05;letter-spacing:-.02em;
}
.ihp-odometer .digit{display:inline-block;width:.62em;text-align:center;}
.ihp-odometer .sep{display:inline-block;}          /* $ and , are static */
.ihp-odometer-caption{font-size:.8125rem;color:var(--ihp-mist);margin-top:var(--s-2);}
/* The footnote is part of the device and never separates from the number. */
.ihp-odometer-footnote{font-size:.8125rem;line-height:1.5;color:var(--ihp-mist);max-width:68ch;}

/* ===========================================================================
   SECTION COMPONENTS (Healthca compositions, reskinned)
   Added for the Elementor section templates in wp/elementor-templates/.

   EVERY class here is `ihp-` prefixed, deliberately. The static mock uses short
   names — .wrap, .card, .grid, .stat, .label — which is safe in a standalone
   file and would be reckless here: this stylesheet loads alongside Kadence,
   Elementor and ElementsKit, and `.card`, `.grid`, `.center` and `.label` are
   exactly the names all three of them reach for. A collision would not error, it
   would silently restyle somebody else's widget.

   These are the compositions that give the kit its character, catalogued from a
   local render of the Healthca homepage rather than from memory:
   inset rounded panels, a nav inside the hero, a label bar overlapping a card
   image, one dark tile among light ones, arrow-suffixed buttons.
   ======================================================================== */

/* --- layout scaffolding ------------------------------------------------- */
.ihp-wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.ihp-sec{padding:var(--s-20) 0;}
.ihp-grid{display:grid;gap:var(--s-6);}
/* minmax(0,1fr), never plain 1fr: `1fr` is `minmax(auto,1fr)`, so one long
   unbreakable string sets the column's floor and the track refuses to shrink.
   A 34-character email address in a footer column did exactly that and pushed
   40px of horizontal scroll onto every page. */
.ihp-g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.ihp-g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.ihp-g4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){.ihp-g2,.ihp-g3,.ihp-g4{grid-template-columns:minmax(0,1fr);}}

/* Centring text is not centring the box. The theme constrains p to 68ch and
   h1/h2 to 28ch, so a centred block with no auto margins sits flush left and
   centres its text inside that narrow box — hundreds of pixels off on a wide
   screen, and invisible on mobile where the box fills the viewport. Both, always. */
.ihp-center{text-align:center;}
.ihp-center>p,.ihp-center>h2,.ihp-center>h3,.ihp-center>div{margin-left:auto;margin-right:auto;}

/* Tinted sections are INSET ROUNDED BLOCKS on white, not full-bleed bands.
   This is most of why the kit reads as panelled rather than striped. */
.ihp-panel{background:var(--ihp-off-white);border-radius:28px;margin:0 20px;
  padding:var(--s-20) 0;}
@media (max-width:700px){.ihp-panel{margin:0 8px;border-radius:18px;}}

/* --- section headers ---------------------------------------------------- */
.ihp-eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ihp-teal-ink);text-align:center;
  margin:0 auto 10px;max-width:none;}
.ihp-eyebrow--left{text-align:left;margin-left:0;margin-right:0;}
.ihp-sec-title{text-align:center;margin:0 auto var(--s-6);max-width:26ch;}
.ihp-sec-lead{text-align:center;max-width:70ch;margin:0 auto var(--s-12);
  font-size:var(--ihp-lead);line-height:1.6;color:var(--ihp-slate);}

/* --- buttons ------------------------------------------------------------ */
/* Kit device: the trailing arrow. */
.ihp-btn.ihp-arrow::after{content:"\2192";margin-left:10px;font-weight:400;}
/* Kit device: a circular icon button beside the primary CTA. */
.ihp-iconbtn{width:52px;height:52px;border-radius:50%;background:var(--ihp-teal);
  color:var(--ihp-deep-navy);display:grid;place-items:center;flex:0 0 auto;}
.ihp-iconbtn svg{width:22px;height:22px;}
.ihp-btnrow{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center;
  margin-top:var(--s-6);}
.ihp-btnrow--center{justify-content:center;}

/* --- circular icon badge ------------------------------------------------ */
.ihp-badge{width:52px;height:52px;border-radius:50%;background:var(--ihp-navy);
  color:var(--ihp-white);display:grid;place-items:center;flex:0 0 auto;
  font-weight:700;font-size:1.125rem;}
.ihp-badge svg{width:24px;height:24px;}
.ihp-badge--teal{background:rgba(0,171,200,.16);color:var(--ihp-teal-ink);}

/* --- card with a label bar overlapping the image ------------------------ */
/* Cards in a row must align internally, not merely share an outer height:
   flex column with the action pinned by margin-top:auto puts every "Learn more"
   on the same baseline whatever the copy above it does. */
.ihp-svc{background:var(--ihp-white);border:1px solid var(--ihp-mist);
  border-radius:var(--r-card);box-shadow:var(--e1);overflow:hidden;
  display:flex;flex-direction:column;}
.ihp-svc__pic{position:relative;}
.ihp-svc__pic img{width:100%;height:200px;object-fit:cover;display:block;}
.ihp-svc__label{position:absolute;left:22px;right:22px;bottom:-22px;
  background:var(--ihp-navy);color:var(--ihp-white);border-radius:14px;
  padding:15px 18px;font-weight:600;font-size:1.0625rem;text-align:center;
  box-shadow:0 12px 28px rgba(0,41,79,.28);}
.ihp-svc__body{padding:calc(var(--s-8) + 8px) var(--s-6) var(--s-6);
  text-align:center;display:flex;flex-direction:column;flex:1 1 auto;}
.ihp-svc__body p{margin:0 0 var(--s-5);font-size:1rem;line-height:1.6;
  color:var(--ihp-slate);max-width:none;}
.ihp-more{color:var(--ihp-teal-ink);font-weight:600;font-size:1rem;
  text-decoration:none;margin-top:auto;}
.ihp-more::after{content:"\2192";margin-left:8px;}

/* --- image with a floating card overlapping its lower edge -------------- */
.ihp-figcard{position:relative;}
.ihp-figcard>img{border-radius:var(--r-card);width:100%;height:440px;
  object-fit:cover;display:block;}
.ihp-figcard__badge{position:absolute;left:24px;right:24px;bottom:-28px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,250,252,.97));
  border-radius:16px;box-shadow:0 18px 44px rgba(0,41,79,.18);padding:var(--s-5);
  display:flex;gap:var(--s-4);align-items:flex-start;}
.ihp-figcard__badge h3{margin:0 0 5px;font-size:1.0625rem;color:var(--ihp-navy);}
.ihp-figcard__badge p{margin:0;font-size:1rem;line-height:1.55;
  color:var(--ihp-slate);max-width:none;}

/* --- stat tiles: one dark among light ---------------------------------- */
.ihp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-4);}
@media (max-width:800px){.ihp-stats{grid-template-columns:minmax(0,1fr);}}
.ihp-stat{border-radius:18px;padding:var(--s-6);background:var(--ihp-off-white);
  display:flex;flex-direction:column;}
.ihp-stat__n{font-size:1.5rem;font-weight:700;color:var(--ihp-navy);
  line-height:1.2;margin:var(--s-4) 0 var(--s-3);max-width:none;}
.ihp-stat__label{margin:0;font-size:1rem;line-height:1.5;color:var(--ihp-slate);
  max-width:none;}
.ihp-stat--dark{background:var(--ihp-navy);}
.ihp-stat--dark .ihp-stat__n{color:var(--ihp-white);}
.ihp-stat--dark .ihp-stat__label{color:rgba(255,255,255,.86);}
.ihp-stat--dark .ihp-badge{background:rgba(255,255,255,.14);}

/* --- feature row -------------------------------------------------------- */
.ihp-feat{display:flex;gap:var(--s-4);align-items:flex-start;}
.ihp-feat+.ihp-feat{margin-top:var(--s-6);}
.ihp-feat h3{margin:0 0 6px;font-size:1.0625rem;}
.ihp-feat p{margin:0;font-size:1rem;line-height:1.6;color:var(--ihp-slate);
  max-width:none;}
/* Two feature columns flanking a centre image, inner edges aligned inward. */
.ihp-feat-col--right{text-align:right;}
.ihp-feat-col--right .ihp-feat{flex-direction:row-reverse;}
@media (max-width:1000px){
  .ihp-feat-col--right{text-align:left;}
  .ihp-feat-col--right .ihp-feat{flex-direction:row;}
}

/* --- truth table (the Receipt Rule lives here, and only here) ----------- */
.ihp-truth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-6);}
@media (max-width:900px){.ihp-truth{grid-template-columns:minmax(0,1fr);}}
.ihp-truth ul{list-style:none;padding:0;margin:0;}
.ihp-truth li{padding:11px 0;border-top:1px dashed var(--ihp-mist);
  font-size:1rem;display:flex;gap:10px;align-items:flex-start;}
.ihp-truth li:first-child{border-top:0;}
.ihp-truth .ihp-in::before{content:"\2713";color:var(--ihp-teal-ink);
  font-weight:700;flex:0 0 auto;}
.ihp-truth .ihp-out::before{content:"\2014";color:var(--ihp-slate);
  font-weight:700;flex:0 0 auto;}

/* --- status pill -------------------------------------------------------- */
.ihp-pill{display:inline-block;border-radius:var(--r-pill);padding:4px 13px;
  font-size:.75rem;font-weight:700;letter-spacing:.03em;}
.ihp-pill--open{background:rgba(0,171,200,.16);color:var(--ihp-teal-ink);}
.ihp-pill--planned{background:#FDF3E3;color:#8A5A00;}

/* --- video facade (no third-party player until click) ------------------- */
.ihp-vid{position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--ihp-deep-navy);}
.ihp-vid img{height:186px;object-fit:cover;width:100%;opacity:.66;display:block;}
.ihp-vid__play{position:absolute;top:0;left:0;right:0;height:186px;
  display:grid;place-items:center;}
.ihp-vid__play span{width:58px;height:58px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;
  color:var(--ihp-navy);font-size:18px;padding-left:4px;}
.ihp-vid__cap{padding:var(--s-4) var(--s-5);color:var(--ihp-white);
  font-weight:600;font-size:1rem;margin:0;max-width:none;}

/* --- CTA card overlapping the footer's top edge ------------------------- */
.ihp-ctacard{position:relative;z-index:2;margin:0 20px -110px;border-radius:24px;
  background:linear-gradient(120deg,#E8F6FA 0%,#F7FAFC 60%);
  padding:var(--s-10) clamp(24px,4vw,56px);
  box-shadow:0 26px 60px rgba(0,41,79,.16);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--s-8);align-items:center;}
@media (max-width:900px){
  .ihp-ctacard{grid-template-columns:minmax(0,1fr);margin:0 8px -120px;}
  .ihp-ctacard__art{display:none;}
}
.ihp-ctacard h2{margin:0 0 10px;}
.ihp-ctacard__art{border-radius:18px;overflow:hidden;}
.ihp-ctacard__art img{width:100%;height:210px;object-fit:cover;display:block;}
/* The footer needs room for the card that overlaps it. */
.ihp-footer--overlapped{padding-top:calc(110px + var(--s-16));}

/* --- utility strip above the hero -------------------------------------- */
.ihp-util{font-size:.8125rem;color:var(--ihp-navy);}
.ihp-util .ihp-wrap{display:flex;gap:var(--s-6);align-items:center;
  justify-content:space-between;padding-top:14px;padding-bottom:14px;
  flex-wrap:wrap;}
.ihp-util a{color:var(--ihp-navy);}
.ihp-open247{display:inline-flex;align-items:center;gap:8px;
  color:var(--ihp-teal-ink);font-weight:700;}
/* Inline SVG with no intrinsic size fills its container at the default
   300x150 replaced-element box. Every icon needs an explicit one. */
.ihp-open247 svg{width:18px;height:18px;flex:0 0 auto;}

/* ---------------------------------------------------------------------------
   Components (Brand v2 §10)
   ------------------------------------------------------------------------ */

.ihp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--ihp-font);font-size:1rem;font-weight:600;letter-spacing:.01em;
  padding:16px 24px;                    /* §C.3 */
  border-radius:var(--r-pill);min-height:44px;border:0;cursor:pointer;
  text-decoration:none;
  transition:background var(--t-fast) ease-out,color var(--t-fast) ease-out;
}
/* Navy is the action colour. Teal is NEVER a button fill — white on teal is 2.74. */
.ihp-btn-primary{background:var(--ihp-navy);color:var(--ihp-white);}
.ihp-btn-primary:hover{background:var(--ihp-teal-ink);color:var(--ihp-white);}
.ihp-btn-primary:active{background:var(--ihp-deep-navy);}
.ihp-btn-secondary{background:transparent;border:1.5px solid var(--ihp-navy);color:var(--ihp-navy);}
.ihp-btn-secondary:hover{background:var(--ihp-navy);color:var(--ihp-white);}
.ihp-dark .ihp-btn-primary{background:var(--ihp-white);color:var(--ihp-navy);}
.ihp-dark .ihp-btn-primary:hover{background:var(--ihp-mist);}
.ihp-btn:disabled,.ihp-btn[aria-disabled="true"]{background:var(--ihp-mist);color:var(--ihp-slate);}

/* Focus: teal-ink, not teal — see the header note. */
:focus-visible{outline:2px solid var(--ihp-teal-ink);outline-offset:2px;}
.ihp-dark :focus-visible{outline-color:var(--ihp-teal);}  /* on dark, teal clears 3:1 */

.card{
  background:var(--ihp-white);border:1px solid var(--ihp-mist);
  border-radius:var(--r-card);box-shadow:var(--e1);padding:var(--s-6);
  transition:transform var(--t-fast) ease-out,box-shadow var(--t-fast) ease-out;
}
a.card:hover,.card--link:hover{transform:translateY(-2px);box-shadow:var(--e2);}

.ihp-field{
  width:100%;background:var(--ihp-white);border:1px solid var(--ihp-mist);
  border-radius:var(--r-input);padding:12px 16px;font:inherit;font-size:1rem;
}
.ihp-field:focus{
  outline:0;border-color:var(--ihp-teal-ink);
  box-shadow:0 0 0 3px rgba(0,117,138,.18);
}
.ihp-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:var(--s-2);color:var(--ihp-navy);}
.ihp-helper{font-size:.8125rem;color:var(--ihp-slate);margin-top:var(--s-2);}
.ihp-error{font-size:.8125rem;color:var(--ihp-error);margin-top:var(--s-2);}
/* The enrolment acknowledgment box — 24px, never pre-checked. */
.ihp-checkbox{width:24px;height:24px;accent-color:var(--ihp-navy);}

/* Badges carry words as well as colour — never meaning by colour alone (§11). */
.ihp-badge{display:inline-block;font-size:.8125rem;font-weight:600;
  padding:4px 12px;border-radius:var(--r-chip);}
.ihp-badge-open{background:var(--ihp-success-wash);color:var(--ihp-success);}
.ihp-badge-planned{background:var(--ihp-info-wash);color:var(--ihp-teal-ink);}

/* FAQ accordion — <details> based, deep-linkable */
.ihp-faq details{border-top:1px solid var(--ihp-mist);padding:var(--s-4) 0;}
.ihp-faq summary{
  font-size:1.25rem;font-weight:600;color:var(--ihp-navy);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-4);
}
.ihp-faq summary::-webkit-details-marker{display:none;}
.ihp-faq summary::after{content:"+";font-weight:400;transition:transform var(--t-base) ease-out;}
.ihp-faq details[open] summary::after{content:"\2212";}

/* Footer — the disclosure is visible, never behind a toggle (Playbook Rule 1) */
.ihp-footer{background:var(--ihp-deep-navy);color:var(--ihp-mist);}
.ihp-footer h2,.ihp-footer h3{color:var(--ihp-white);}
.ihp-footer a{color:var(--ihp-mist);}
.ihp-footer a:hover{color:var(--ihp-white);}
.ihp-disclosure{
  font-size:.8125rem;line-height:1.6;color:var(--ihp-mist);
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:var(--s-4);margin-top:var(--s-6);
}

/* ---------------------------------------------------------------------------
   Motion & choreography (Brand v2 §7)
   Order within a section: keyline draws -> kicker/heading fade-rise -> content staggers.
   ------------------------------------------------------------------------ */
.ihp-reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-slow) var(--ease-decel),transform var(--t-slow) var(--ease-decel);}
.in-view .ihp-reveal,.ihp-reveal.is-in{opacity:1;transform:none;}
.in-view .ihp-reveal:nth-child(2){transition-delay:60ms;}
.in-view .ihp-reveal:nth-child(3){transition-delay:120ms;}
.in-view .ihp-reveal:nth-child(4){transition-delay:180ms;}
.in-view .ihp-reveal:nth-child(5){transition-delay:240ms;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:150ms!important;scroll-behavior:auto!important;}
  .ihp-keyline{transform:scaleX(1);}          /* appears drawn */
  .ihp-reveal{opacity:1;transform:none;}
  .ihp-odometer .digit{transition:none;}      /* renders its final value */
}

/* ---------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------ */
.ihp-container{max-width:var(--ihp-container);margin-inline:auto;padding-inline:var(--s-6);}
.ihp-section{padding-block:var(--s-24);}
@media (max-width:767px){ .ihp-section{padding-block:var(--s-16);} }
.ihp-stack-3{display:flex;flex-direction:column;gap:var(--s-3);}
.ihp-stack-6{display:flex;flex-direction:column;gap:var(--s-6);}

/* -----------------------------------------------------------------------------
 * LEGAL & STATEMENT PAGES
 * Privacy Policy, Terms of Use, Membership Agreement, Accessibility Statement.
 * The built fragments carry no wrapper of their own — tools/load_pages.py wraps
 * them in .ihp-legal, so the measure and rhythm live here rather than being
 * repeated in four page bodies that would then drift apart.
 * -------------------------------------------------------------------------- */
.ihp-legal{max-width:76ch;margin:0 auto;font-size:1.0625rem;line-height:1.75;}
.ihp-legal h2:first-of-type{margin-top:0;border-top:0;padding-top:0;}
.ihp-legal h2{font-size:1.375rem;margin:var(--s-8) 0 var(--s-4);}
.ihp-legal h3{font-size:1.125rem;margin:var(--s-6) 0 var(--s-3);}
/* p{max-width:68ch} sitewide would double-constrain inside a 76ch column and
   leave the text measurably narrower than the headings above it. */
.ihp-legal p{max-width:none;margin:0 0 var(--s-4);}
.ihp-legal ul{margin:0 0 var(--s-4);padding-left:1.35em;}
.ihp-legal li{margin:0 0 10px;}
.ihp-legal .ihp-legal__updated{font-size:var(--ihp-body-sm);color:var(--ihp-slate);
  margin:0 0 var(--s-8);}

/* -----------------------------------------------------------------------------
 * LOCATION DETAIL
 * Rendered by wp/ihp-locations/templates/single-ihp_location.php. Styles live
 * here rather than in the plugin so the whole design system stays in one file
 * and one cascade — a plugin shipping its own stylesheet is how a second,
 * competing set of tokens gets born.
 * -------------------------------------------------------------------------- */
.ihp-loc{padding:var(--s-16) 0 var(--s-24);}
.ihp-loc__article{max-width:72ch;margin:0 auto;}
.ihp-loc__name{margin:0 0 var(--s-3);}
.ihp-loc__address{font-size:1.0625rem;color:var(--ihp-slate);margin:0 0 var(--s-3);
  max-width:none;}
.ihp-loc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  margin:0 0 var(--s-8);max-width:none;}
.ihp-loc__phone{font-weight:600;font-size:1.0625rem;}
/* Text pills. NOT .ihp-badge — that is already a 52px circular icon badge, and
   reusing it here rendered "Open 24/7" as a circle with the text spilling out.
   Both colour pairs are measured against §C: 5.39:1 and 5.21:1, which clears AA
   at this size and weight (12px bold is not "large text", so 4.5:1 applies). */
.ihp-pill{display:inline-block;border-radius:var(--r-pill);padding:4px 13px;
  font-size:.75rem;font-weight:700;letter-spacing:.03em;}
.ihp-pill--hours{background:rgba(0,171,200,.16);color:var(--ihp-teal-ink);}
.ihp-pill--planned{background:#FDF3E3;color:#8A5A00;margin:0 0 var(--s-4);}
.ihp-loc__intro{margin:0 0 var(--s-8);}
.ihp-loc__h2{font-size:1.25rem;margin:var(--s-8) 0 var(--s-4);}
.ihp-loc__services{margin:0 0 var(--s-8);padding-left:1.25em;}
.ihp-loc__services li{margin:0 0 8px;}
.ihp-loc__means{margin:0 0 var(--s-8);}
.ihp-loc__means p{margin:0;max-width:none;}
.ihp-loc__map{margin:0 0 var(--s-8);}
.ihp-loc__map iframe{width:100%;min-height:320px;border:0;border-radius:12px;
  display:block;}
.ihp-loc__back{margin:var(--s-8) 0 0;}
/* A real timetable, listed rather than pilled. Body size, not pill size: these
   are the opening times a member reads before driving over. */
.ihp-loc__hours{list-style:none;margin:0 0 var(--s-8);padding:0;
  font-size:1rem;color:var(--ihp-deep-navy);}
.ihp-loc__hours li{margin:0 0 4px;}

/* -----------------------------------------------------------------------------
 * LOCATIONS GRID
 * Rendered by [ihp_locations_grid] / the IHP Locations grid widget.
 * -------------------------------------------------------------------------- */
/* minmax(0,1fr), not 1fr: 1fr is minmax(auto,1fr), and a long facility name —
   "Fountain Hills Medical Center — Urgent Care & Primary Care Clinic" — sets a
   min-content floor that pushes the track wider than its share and overflows the
   row. This is the fourth place in this file that bug would have appeared. */
.ihp-locgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-6);}
@media (max-width:1000px){.ihp-locgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.ihp-locgrid{grid-template-columns:minmax(0,1fr);}}
.ihp-loccard{background:var(--ihp-white);border:1px solid var(--ihp-mist);
  border-radius:var(--r-card);overflow:hidden;}
.ihp-loccard__body{padding:var(--s-5);}
.ihp-loccard__name{color:var(--ihp-navy);font-size:1.0625rem;margin:10px 0 6px;
  max-width:none;}
.ihp-loccard__name a{color:inherit;text-decoration:none;}
.ihp-loccard__name a:hover,.ihp-loccard__name a:focus-visible{text-decoration:underline;}
.ihp-loccard__addr{font-size:var(--ihp-body-sm);color:var(--ihp-slate);
  margin:0 0 6px;max-width:none;}
.ihp-loccard__meta{font-size:var(--ihp-body-sm);color:var(--ihp-ink);margin:0;
  max-width:none;}
.ihp-loccard__note{font-size:.8125rem;color:var(--ihp-slate);margin:8px 0 0;
  max-width:none;}
.ihp-pill--open{background:rgba(0,171,200,.16);color:var(--ihp-teal-ink);}
/* Editors only — ihp_locations_grid() returns nothing at all to visitors when
   there is nothing to show, rather than an empty framed box. */
.ihp-locgrid__empty{border-left:4px solid var(--ihp-teal);
  background:rgba(0,171,200,.08);padding:var(--s-4);font-size:var(--ihp-body-sm);
  color:var(--ihp-deep-navy);max-width:none;}

/* -----------------------------------------------------------------------------
 * FAQ — the rest of it. Base <details>/<summary> rules are above; these are the
 * page frame, the answer body, and the deep-link target state.
 * -------------------------------------------------------------------------- */
.ihp-faq{max-width:76ch;margin:0 auto;}
.ihp-faq__section{font-size:1.25rem;letter-spacing:.02em;max-width:none;
  margin:var(--s-12) 0 var(--s-4);}
.ihp-faq__section:first-child{margin-top:0;}
.ihp-faq__a p{font-size:1rem;line-height:1.7;margin:var(--s-4) 0 0;max-width:72ch;}
.ihp-faq__all{margin:var(--s-6) 0 0;font-weight:600;}
.ihp-faq--micro{max-width:none;}
/* Deep-link landing: a visible marker, because the browser scrolls the question
   into view and nothing else would tell you which one you were sent to. Left
   border rather than a background so it reads at any contrast setting. */
.ihp-faq__item:target{border-left:3px solid var(--ihp-teal);
  padding-left:var(--s-4);margin-left:calc(var(--s-4) * -1);}

/* -----------------------------------------------------------------------------
 * DISCLOSURE BAND
 * Printed by ihp_auto_footer_disclosure() on wp_footer, so it lands outside
 * .ihp-footer and has to carry its own dark surface. .ihp-disclosure itself
 * assumes a dark background — see the FOOTER block above.
 * -------------------------------------------------------------------------- */
.ihp-disclosure-band{background:var(--ihp-deep-navy);color:var(--ihp-mist);
  padding:var(--s-6) 0 var(--s-8);}
/* No border-top or margin-top here: those exist on .ihp-disclosure to separate it
   from footer columns above it. In the band it is the only thing present, and the
   band's own padding does that job. */
.ihp-disclosure-band .ihp-disclosure{border-top:0;margin-top:0;padding-top:0;}

/* -----------------------------------------------------------------------------
 * PAGE-BODY COMPONENTS
 * Used by the authored bodies in wp/pages/bodies/. Added when tools/check_links
 * and a class audit showed the Home body referencing five classes that did not
 * exist — an undefined class is not an error anywhere, it is just unstyled
 * content, which is the same silent failure as an undefined var().
 * -------------------------------------------------------------------------- */

/* Alternating tinted band, so consecutive sections separate without a rule. */
.ihp-sec--alt{background:var(--ihp-off-white);}

/* The tagline lockup (Brand v2). "One membership. Endless care." — never the
   retired "One Fee. Endless Care.", which tools/sweep.py now blocks. */
.ihp-lockup{font-weight:600;letter-spacing:.01em;color:var(--ihp-teal);
  margin:var(--s-6) 0 0;}
.ihp-dark .ihp-lockup{color:var(--ihp-white);}

/* The §1.5 three steps. An <ol>, because they are a true sequence — the numbers
   carry meaning, so they are real list numbers rather than typed-in digits. */
.ihp-steps{list-style:none;counter-reset:ihp-step;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);}
@media (max-width:900px){.ihp-steps{grid-template-columns:minmax(0,1fr);}}
.ihp-steps > li{counter-increment:ihp-step;background:var(--ihp-white);
  border:1px solid var(--ihp-mist);border-radius:var(--r-card);padding:var(--s-6);}
.ihp-steps > li::before{content:counter(ihp-step);display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;background:var(--ihp-navy);
  color:var(--ihp-white);font-weight:700;font-size:.9375rem;
  margin:0 0 var(--s-3);}
.ihp-steps h3{margin:0 0 var(--s-2);font-size:1.0625rem;max-width:none;}
.ihp-steps p{margin:0 0 var(--s-2);max-width:none;font-size:1rem;}
.ihp-steps p:last-child{margin:0;}

/* Truth-table markers. The glyph is decorative and the meaning is carried by the
   column heading above it, so it is a ::before rather than text a screen reader
   would read out as "check" before every line. */
.ihp-tick::before{content:"\2713";color:var(--ihp-teal-ink);font-weight:700;
  flex:0 0 auto;}
.ihp-cross::before{content:"\2014";color:var(--ihp-slate);font-weight:700;
  flex:0 0 auto;}