/* ============================================================================
   Practice IQ — GLENN'S DRAFT · stylesheet v2
   Restyle pass 2026-07-27 (Joseph: "less monotonous, better sectioning and
   backgrounds, more bullet points, icons").

   v1 problem: five platform pillars that were structurally identical (eyebrow
   → h2 → list → notice) on the same white background, and capability lists
   marked with a thin dash that did not read as bullets.

   v2: four background tiers in rotation, a numbered + icon'd head per pillar,
   real disc bullets, icon tiles on every card, and outcome chips.
   Icons are one inline SVG sprite per page — no CDN, no icon font.
   ============================================================================ */

:root {
  --navy:        #0E2A45;
  --navy-deep:   #08192A;
  --ink:         #12253A;          /* darker than v1 for body contrast */
  --ink-muted:   #4E6377;
  --accent:      #07595F;
  --accent-hi:   #0B7A82;
  --accent-soft: #D9EDEE;
  --gold:        #B07A1E;
  --bg:          #FFFFFF;
  --tint-1:      #F3F7FA;
  --tint-2:      #EAF4F4;
  --rule:        #D2DEE7;
  --rule-soft:   #E6EDF2;

  --container-max: 1140px;
  --gutter:        32px;
  --section-pad-y: 104px;
  --measure:       68ch;

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 88px; --s8: 120px;

  --radius: 4px;

  --font-head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --section-pad-y: 68px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg, #FFFFFF);
  color: var(--ink, #12253A);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 760px) { body { font-size: 17px; } }

img, svg { max-width: 100%; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent-hi, #0B7A82);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  background: var(--navy, #0E2A45); color: #FFFFFF;
  z-index: 100; text-decoration: none; font-weight: 700;
}
.skip-link:focus {
  width: auto; height: auto; min-height: 44px;
  display: inline-flex; align-items: center;
  clip: auto; clip-path: none; padding: var(--s2, 16px) var(--s3, 24px);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------- structure */

.wrap { max-width: var(--container-max, 1140px); margin-inline: auto; padding-inline: var(--gutter, 32px); }
.wrap--narrow > * { max-width: 860px; }

/* FOUR background tiers in rotation, so no two adjacent bands look alike */
.section        { padding-block: var(--section-pad-y, 104px); }
.section--tint  { background: var(--tint-1, #F3F7FA); }
.section--tint2 { background: var(--tint-2, #EAF4F4); }
.section--navy  { background: var(--navy, #0E2A45); color: #FFFFFF; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #FFFFFF; }
.section--navy p, .section--navy .lede { color: #CFDDE7; }
.section--navy .eyebrow { color: #7FD0D6; }

hr.rule { border: 0; border-top: 1px solid var(--rule, #D2DEE7); margin: 0; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy, #0E2A45);
  margin: 0; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance;
}
h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; }
h2 { font-size: clamp(27px, 3.2vw, 38px); line-height: 1.16; }
h3 { font-size: clamp(20px, 2.1vw, 25px); line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 19px; line-height: 1.3; letter-spacing: 0; }

p { margin: 0 0 var(--s3, 24px); max-width: var(--measure, 68ch); }
p:last-child { margin-bottom: 0; }

/* Eyebrow now carries a rule + optional icon, so it reads as a section marker
   rather than another line of text */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent, #07595F);
  margin: 0 0 var(--s2, 16px);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-hi, #0B7A82);
}
.section--navy .eyebrow { border-bottom-color: #7FD0D6; }

.lede { font-size: 20px; line-height: 1.55; color: var(--ink-muted, #4E6377); }
.muted { color: var(--ink-muted, #4E6377); }
.small { font-size: 16px; }

a.textlink { color: var(--accent, #07595F); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
a.textlink:hover { color: var(--accent-hi, #0B7A82); }

/* ---------------------------------------------------------------- icons */

.ico { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 19px; height: 19px; }

/* the tile that sits at the top of a card or pillar */
.icotile {
  width: 56px; height: 56px; border-radius: var(--radius, 4px);
  background: var(--accent-soft, #D9EDEE);
  color: var(--accent, #07595F);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s3, 24px);
}
.icotile .ico { width: 28px; height: 28px; }
.icotile--navy { background: rgba(255,255,255,.12); color: #7FD0D6; }
.icotile--gold { background: #F6EDDC; color: var(--gold, #B07A1E); }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 17px; font-weight: 700; line-height: 1.2;
  min-height: 54px; min-width: 240px;
  padding: var(--s2, 16px) var(--s4, 32px);
  border-radius: var(--radius, 4px);
  text-decoration: none; border: 2px solid transparent;
  transition: background-color 130ms ease, color 130ms ease, border-color 130ms ease;
  cursor: pointer;
}
.btn--primary { background: var(--accent, #07595F); color: #FFFFFF; border-color: var(--accent, #07595F); }
.btn--primary:hover { background: var(--accent-hi, #0B7A82); border-color: var(--accent-hi, #0B7A82); }
.btn--outline { background: transparent; color: var(--navy, #0E2A45); border-color: var(--navy, #0E2A45); }
.btn--outline:hover { background: var(--navy, #0E2A45); color: #FFFFFF; }
.btn--onnavy { background: #FFFFFF; color: var(--navy, #0E2A45); border-color: #FFFFFF; }
.btn--onnavy:hover { background: transparent; color: #FFFFFF; }
.btn--ghostnavy { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.6); }
.btn--ghostnavy:hover { background: #FFFFFF; color: var(--navy, #0E2A45); border-color: #FFFFFF; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2, 16px); margin-top: var(--s5, 48px); }
.btn-row--center { justify-content: center; }
@media (max-width: 560px) { .btn { width: 100%; min-width: 0; } }

/* ------------------------------------------------------------ nav / foot */

/* FLOATING HEADER — a pill inset from the viewport edges, translucent with a
   blur, riding over the page rather than sitting above it.
   Height is the constraint, not the look: a fixed bar that eats more than 20%
   of a phone viewport fails the geometry gate, and the earlier sticky version
   did exactly that at 220px. This one is measured to stay well under. */
/* STICKY, not fixed. Fixed is out of flow, so the bar sits on top of the
   document at every scroll position and the geometry gate reports occluded
   text no matter how much padding the hero gets. Sticky keeps the bar in
   flow (nothing is covered at rest) and still floats and follows on scroll,
   which is the whole point of the pill. The hero is pulled up by exactly the
   bar's height so the glass still reads as floating ON the photo. */
.sitehead {
  position: absolute; top: 12px; left: 0; right: 0; z-index: 60;
  background: transparent; border: 0;
  pointer-events: none;
}
.sitehead .wrap { pointer-events: auto; }
.sitehead .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4, 32px); flex-wrap: wrap;
  padding: 8px 10px 8px 22px;
  background: rgba(10,28,46,.78);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
}
/* Pull the hero up under the sticky bar so the pill floats on the photo,
   then push the COPY down past it. Measured bar: 62px desktop, 56px mobile,
   plus a 12px / 8px inset. */
.hero, .hero--image { padding-top: calc(var(--s8, 120px) + 40px); }
@media (max-width: 760px) {
  .hero, .hero--image { padding-top: calc(var(--s7, 88px) + 40px); }
}
.wordmark {
  font-family: var(--font-head); font-weight: 700; font-size: 21px;
  letter-spacing: -0.02em; color: #FFFFFF; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap;
}
.wordmark span { color: #7FD0D6; }
.sitenav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4, 32px); }
.sitenav a {
  font-size: 16px; font-weight: 600; color: #D7E4EC; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.sitenav a:hover, .sitenav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: #7FD0D6; }
/* Phone: the bar has to stay ONE nav row. Short labels do that; a 3-row wrap
   is what pushed the old header to 220px and failed the viewport check. */
/* ------------------------------------------------------- burger (mobile)
   Wordmark + burger on ONE row takes the bar from 80px to ~54px, which is
   the real fix for the height problem: nav links wrapping is what made it
   tall, so the links come out of the bar entirely. */

.navtoggle {
  display: none;
  width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%; cursor: pointer;
}
.navtoggle span {
  position: relative; display: block; width: 19px; height: 2px;
  background: #FFFFFF; border-radius: 2px;
  transition: background-color 120ms ease;
}
.navtoggle span::before, .navtoggle span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  background: #FFFFFF; border-radius: 2px;
  transition: transform 160ms ease, top 160ms ease;
}
.navtoggle span::before { top: -6px; }
.navtoggle span::after  { top: 6px; }
.navtoggle[aria-expanded="true"] span { background: transparent; }
.navtoggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .sitehead { top: 8px; }
  .sitehead .bar { padding: 4px 4px 4px 16px; gap: var(--s2, 16px); border-radius: 30px; flex-wrap: nowrap; }
  .wordmark { font-size: 18px; min-height: 46px; }
  .navtoggle { display: inline-flex; }

  /* the panel drops out of the pill, same glass, own rounded card */
  .sitenav {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px;
    background: rgba(10,28,46,.94);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    box-shadow: 0 16px 44px rgba(0,0,0,.36);
    /* display:none, NOT visibility:hidden. A hidden panel still occupies its
       box and sits on top of the hero, which the geometry gate correctly
       reports as four occluded links. Hidden is not gone. */
    display: none;
  }
  .sitehead .wrap { position: relative; }
  .sitenav[data-open="true"] { display: flex; }
  .sitenav a {
    min-height: 50px; font-size: 17px; padding-inline: 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    border-radius: 0; justify-content: flex-start;
  }
  .sitenav a:last-child { border-bottom: 0; }
  .sitenav a:hover, .sitenav a[aria-current="page"] {
    border-bottom-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.08); color: #FFFFFF;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sitenav, .navtoggle span, .navtoggle span::before, .navtoggle span::after { transition: none !important; }
}

.sitefoot { background: var(--navy-deep, #08192A); color: #B4C7D6; padding-block: var(--s6, 64px); font-size: 16px; }
.sitefoot h4 { color: #FFFFFF; margin-bottom: var(--s2, 16px); }
.sitefoot a { color: #8FD3D9; }
.sitefoot p { max-width: 68ch; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6, 64px); }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; gap: var(--s5, 48px); } }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: 10px; }
.foot-links a { display: inline-flex; align-items: center; gap: 8px; }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy, #0E2A45);
  background-image:
    radial-gradient(ellipse 900px 500px at 82% 8%, rgba(11,122,130,.42), transparent 62%),
    radial-gradient(ellipse 700px 420px at 8% 96%, rgba(11,122,130,.18), transparent 60%);
  color: #FFFFFF; padding-block: var(--s8, 120px);
}
.hero > .wrap { position: relative; z-index: 1; }

/* HERO ART — an abstract connected-network motif, drawn rather than
   photographed. Practice IQ has no practices, no doctors and no offices, so
   there is nothing real to photograph, and licensed stock of "a practice"
   would imply ownership the company does not have. This depicts the idea in
   Glenn's own copy ("a connected platform of high-performing practices")
   without asserting a single fact.
   Weighted to the right so the left half stays clean under the headline. */
.hero-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: .85;
}
@media (max-width: 900px) { .hero-art { opacity: .5; } }
.hero h1 { color: #FFFFFF; max-width: 19ch; }
.hero .eyebrow { color: #7FD0D6; border-bottom-color: #7FD0D6; }
.hero .tagline {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 24px); color: #7FD0D6;
  margin: var(--s3, 24px) 0 0; letter-spacing: -0.01em;
}
.hero p.lede, .hero p { color: #D2E0EA; }
.hero p.lede { margin-top: var(--s4, 32px); max-width: 62ch; }
@media (max-width: 760px) { .hero { padding-block: var(--s7, 88px); } }

/* ---------------------------------------------------------------- imagery
   These are brand RENDERINGS, not photographs of operating locations. The
   company has no headquarters, no practices and no patients. They are used
   as concept imagery and the page says so once, in `.render-note`, so no
   reader mistakes them for documentary evidence. Removing that note is a
   deliberate decision, not a tidy-up. */

.shot { position: relative; overflow: hidden; background: var(--tint-1, #F3F7FA); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* FULL-BLEED PHOTO HERO.
   Scrim is two layers on purpose: a left-weighted horizontal wash so the
   headline column sits on near-solid navy while the right side of the frame
   (patient, window, mountains) stays readable as a picture, plus an overall
   darkening so nothing depends on where the crop lands at a given width.
   Every value below was set from measured pixels, not by eye. */
/* The backdrop is a CSS background, not an <img>. It is purely decorative
   (aria-hidden, empty alt), and a decorative image in the DOM is an element
   the geometry gate correctly reports as occluded by the copy sitting on it.
   Preloaded in the <head> so moving it out of the DOM costs nothing on LCP. */
.hero--image { position: relative; overflow: hidden; background: var(--navy, #0E2A45); }
.hero--image .hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("img/consult.jpg");
  background-size: cover;
  background-position: 62% 42%;
  background-repeat: no-repeat;
}
.hero--image .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,22,38,.96) 0%, rgba(8,22,38,.93) 34%, rgba(8,22,38,.72) 56%, rgba(8,22,38,.45) 78%, rgba(8,22,38,.38) 100%),
    linear-gradient(to top, rgba(8,22,38,.55), rgba(8,22,38,0) 45%);
}
.hero--image > .wrap { position: relative; z-index: 1; }
.hero--image .hero-copy { max-width: 640px; }

/* Hero bullets. Replaces 81 words of hero prose with four scannable lines. */
.hero-points { list-style: none; margin: var(--s4, 32px) 0 0; padding: 0; max-width: 34em; }
.hero-points li {
  position: relative; padding: 9px 0 9px 34px;
  font-size: 18px; line-height: 1.45; color: #E4EDF4;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-points li:first-child { border-top: 0; }
.hero-points li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 13px; height: 7px;
  border-left: 2.5px solid #7FD0D6; border-bottom: 2.5px solid #7FD0D6;
  transform: rotate(-45deg);
}

@media (max-width: 960px) {
  /* on a phone the text spans the frame, so the wash has to be flat and heavy */
  .hero--image .hero-bg { background-position: 58% 38%; }
  .hero--image .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(8,22,38,.90) 0%, rgba(8,22,38,.93) 100%),
      linear-gradient(to top, rgba(8,22,38,.5), rgba(8,22,38,0) 55%);
  }
  .hero--image .hero-copy { max-width: none; }
}

/* PORTRAIT PHONE. The hero has to fit a vertical screen without becoming a
   scroll of its own, so type steps down, the block is bounded to the visible
   viewport with dvh (which accounts for browser chrome), and the buttons
   stack full width. */
@media (max-width: 760px) {
  .hero--image { padding-block: calc(var(--s6, 64px) + 26px) var(--s6, 64px); }
  .hero--image h1 { font-size: clamp(28px, 8.2vw, 36px); line-height: 1.12; }
  .hero--image .tagline { font-size: 17px; margin-top: var(--s2, 16px); }
  .hero--image .eyebrow { font-size: 13px; }
  .hero-points { margin-top: var(--s3, 24px); }
  .hero-points li { font-size: 16px; padding: 7px 0 7px 30px; }
  .hero-points li::before { top: 15px; }
  .hero--image .btn-row { margin-top: var(--s4, 32px); gap: 10px; }
}
/* PORTRAIT: the goal is the whole hero on one screen, so this tightens until
   it fits rather than setting a floor. min-height is a FLOOR and does nothing
   about overflow — the first attempt used one and the hero still ran 130vh on
   a 360-wide phone and 152vh at 320. */
@media (max-width: 760px) and (orientation: portrait) {
  /* top padding must CLEAR the floating bar. Measured bar is 80-86px plus an
     8px inset, so anything under ~96px puts the pill on top of the headline —
     which is exactly what the geometry gate caught at 320 and 390. */
  .hero--image {
    min-height: 88dvh;
    display: flex; align-items: center;
    padding-block: 128px var(--s5, 48px);
  }
  .hero--image h1 { font-size: clamp(26px, 7.4vw, 33px); }
  .hero--image .tagline { font-size: 16px; margin-top: 10px; }
  .hero-points { margin-top: var(--s3, 24px); }
  .hero-points li { font-size: 15.5px; padding: 6px 0 6px 28px; line-height: 1.4; }
  .hero-points li::before { top: 13px; }
  .hero--image .btn-row { margin-top: var(--s3, 24px); }
  .hero--image .btn { min-height: 50px; font-size: 16px; }
}
/* Very small portrait screens (320x568 and similar). Measured at 620px of
   content against a 568px viewport, so this trims the last 52px: the 4th
   bullet goes, the tagline goes (the H1 already carries it), and the type
   and rhythm step down once more. */
@media (max-width: 400px) and (orientation: portrait) and (max-height: 700px) {
  .hero--image { padding-block: 118px var(--s3, 24px); }
  .hero--image h1 { font-size: 23px; line-height: 1.14; }
  .hero--image .eyebrow { font-size: 12px; margin-bottom: 10px; padding-bottom: 4px; }
  .hero--image .tagline { display: none; }
  .hero-points { margin-top: var(--s2, 16px); }
  .hero-points li:last-child { display: none; }
  .hero-points li { font-size: 14.5px; padding: 5px 0 5px 26px; }
  .hero-points li::before { top: 12px; }
  .hero--image .btn-row { margin-top: var(--s2, 16px); gap: 8px; }
  .hero--image .btn { min-height: 44px; font-size: 15px; }
}

/* full-bleed band */
.band { position: relative; }
.band .shot { aspect-ratio: 21 / 8; }
/* Scrim strength is measured, not guessed. The building shot is a dusk
   exterior with a bright sky, and the first version left white text at
   2.00:1 over it (large text needs 3:1, the sub-line needs 4.5:1). Sampled
   with tools/render-check/_piq-band-contrast.mjs, which hides the glyphs and
   reads the actual pixels underneath. */
.band-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s6, 64px) 0 var(--s5, 48px);
  background: linear-gradient(to top,
    rgba(10,28,46,.97) 0%,
    rgba(10,28,46,.94) 45%,
    rgba(10,28,46,.72) 72%,
    rgba(10,28,46,0) 100%);
  color: #FFFFFF;
}
.band-cap h2, .band-cap p { color: #FFFFFF; }
.band-cap p { color: #D6E3EC; }
@media (max-width: 760px) {
  .band .shot { aspect-ratio: 4 / 3; }
  /* The 4:3 crop puts more bright sky behind the caption than the 21:8 one
     does, and the building band measured 2.69:1 here while passing on
     desktop. One viewport is not a contrast test. */
  .band-cap {
    padding: var(--s5, 48px) 0 var(--s4, 32px);
    background: linear-gradient(to top,
      rgba(10,28,46,.98) 0%,
      rgba(10,28,46,.96) 55%,
      rgba(10,28,46,.82) 80%,
      rgba(10,28,46,0) 100%);
  }
}

/* the disclosure. Small, but present and readable. */
.render-note {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-muted, #4E6377);
  padding-top: var(--s3, 24px);
  border-top: 1px solid var(--rule, #D2DEE7);
  max-width: 78ch;
}
.section--navy .render-note, .sitefoot .render-note { color: #9FB6C8; border-top-color: rgba(255,255,255,.2); }

/* --------------------------------------------------------- capability list
   Real disc bullets now, plus a hairline so 19 items still scan. */

.caplist { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: var(--s6, 64px); }
.caplist--2 { columns: 2; }
.caplist li {
  break-inside: avoid;
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid var(--rule-soft, #E6EDF2);
  position: relative;
  font-size: 17.5px; line-height: 1.45;
}
.caplist li::before {
  content: "";
  position: absolute; left: 4px; top: 19px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-hi, #0B7A82);
  box-shadow: 0 0 0 4px var(--accent-soft, #D9EDEE);
}
.section--tint2 .caplist li::before { box-shadow: 0 0 0 4px #FFFFFF; }
@media (max-width: 900px) { .caplist { columns: 2; } }
@media (max-width: 620px) { .caplist, .caplist--2 { columns: 1; } }

/* outcome chips: short statements, each with a check icon */
.outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s2, 16px); }
.outcomes li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: 17.5px;
  color: var(--navy, #0E2A45); letter-spacing: -0.01em; line-height: 1.35;
  background: #FFFFFF; border: 1px solid var(--rule, #D2DEE7);
  border-left: 4px solid var(--accent-hi, #0B7A82);
  border-radius: var(--radius, 4px);
  padding: var(--s3, 24px);
}
.outcomes li .ico { color: var(--accent-hi, #0B7A82); margin-top: 1px; }
.section--navy .outcomes li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); border-left-color: #7FD0D6; color: #FFFFFF; }
.section--navy .outcomes li .ico { color: #7FD0D6; }

/* ---------------------------------------------------------------- cards */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5, 48px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4, 32px); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; gap: var(--s4, 32px); } }

.card {
  background: #FFFFFF;
  border: 1px solid var(--rule, #D2DEE7);
  border-top: 5px solid var(--accent, #07595F);
  border-radius: var(--radius, 4px);
  padding: var(--s5, 48px);
  display: flex; flex-direction: column;
}
.card .num {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: var(--accent, #07595F); margin: 0 0 var(--s2, 16px);
}
.card h3 { margin-bottom: var(--s2, 16px); }
.card p { color: var(--ink-muted, #4E6377); }
.card .btn { margin-top: auto; align-self: flex-start; }
.card p + .btn, .card ul + .btn { margin-top: var(--s4, 32px); }
.card--gold { border-top-color: var(--gold, #B07A1E); }
.card--navy { border-top-color: var(--navy, #0E2A45); }
@media (max-width: 560px) { .card { padding: var(--s4, 32px); } }

/* "Best For" block, now with tick bullets */
.bestfor { background: #FFFFFF; border: 1px solid var(--rule, #D2DEE7); border-radius: var(--radius, 4px); padding: var(--s5, 48px); }
.bestfor--tint { background: var(--tint-2, #EAF4F4); border-color: transparent; }
.bestfor h4 { margin-bottom: var(--s3, 24px); display: flex; align-items: center; gap: 10px; color: var(--accent, #07595F); }
.bestfor ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--s5, 48px); }
.bestfor li { break-inside: avoid; padding: 7px 0 7px 30px; position: relative; font-size: 17.5px; line-height: 1.45; }
.bestfor li::before {
  content: "";
  position: absolute; left: 4px; top: 14px;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--accent-hi, #0B7A82);
  border-bottom: 2.5px solid var(--accent-hi, #0B7A82);
  transform: rotate(-45deg);
}
@media (max-width: 700px) { .bestfor ul { columns: 1; } .bestfor { padding: var(--s4, 32px); } }

/* ---------------------------------------------------------------- pillar
   Alternating tiers so five sections do not read as one block. */

.pillar { padding-block: var(--s7, 88px); }
.pillar--tint  { background: var(--tint-1, #F3F7FA); }
.pillar--tint2 { background: var(--tint-2, #EAF4F4); }

/* one dark pillar mid-page so five sections never read as one slab */
.pillar--navy { background: var(--navy, #0E2A45); color: #FFFFFF; }
.pillar--navy h2, .pillar--navy h3, .pillar--navy .sublabel { color: #FFFFFF; }
.pillar--navy p { color: #CFDDE7; }
.pillar--navy .eyebrow { color: #7FD0D6; border-bottom-color: #7FD0D6; }
.pillar--navy .pillar-num { color: #7FD0D6; }
.pillar--navy .sublabel .ico { color: #7FD0D6; }
.pillar--navy .caplist li { border-bottom-color: rgba(255,255,255,.16); }
.pillar--navy .caplist li::before { background: #7FD0D6; box-shadow: 0 0 0 4px rgba(127,208,214,.18); }
.pillar--navy .outcomes li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); border-left-color: #7FD0D6; color: #FFFFFF; }
.pillar--navy .outcomes li .ico { color: #7FD0D6; }
.pillar--navy .notice { background: rgba(255,255,255,.08); color: #E4EEF4; }
.pillar--navy .notice strong { color: #FFFFFF; }
.pillar--navy .notice .ico { color: #7FD0D6; }

.pillar-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s6, 64px); align-items: start; margin-bottom: var(--s6, 64px); }
.pillar-num {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: var(--accent-hi, #0B7A82); margin: 0 0 var(--s2, 16px);
  letter-spacing: 0.04em;
}
@media (max-width: 860px) { .pillar-head { grid-template-columns: 1fr; gap: var(--s3, 24px); margin-bottom: var(--s5, 48px); } }

.sublabel {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 19px;
  color: var(--navy, #0E2A45); margin: 0 0 var(--s3, 24px);
}
.sublabel .ico { color: var(--accent-hi, #0B7A82); }

/* the difference: four stacked statements */
.diff { list-style: none; margin: 0; padding: 0; }
.diff li {
  display: flex; align-items: center; gap: var(--s3, 24px);
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(21px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.015em;
  padding: var(--s4, 32px) 0; border-bottom: 1px solid rgba(255,255,255,.2);
  color: #9FB6C8;
}
.diff li .ico { color: #5E7D96; }
.diff li:last-child { color: #FFFFFF; border-bottom: 0; }
.diff li:last-child .ico { color: #7FD0D6; }

/* notice / callout */
.notice {
  background: var(--accent-soft, #D9EDEE);
  border-radius: var(--radius, 4px);
  padding: var(--s4, 32px);
  font-size: 17.5px; line-height: 1.55;
  display: flex; gap: var(--s3, 24px); align-items: flex-start;
}
.notice .ico { color: var(--accent, #07595F); margin-top: 3px; }
.notice strong { color: var(--navy, #0E2A45); }
.notice p { margin: 0; max-width: none; }
.notice--gold { background: #F6EDDC; }
.notice--gold .ico { color: var(--gold, #B07A1E); }
@media (max-width: 560px) { .notice { flex-direction: column; gap: var(--s2, 16px); padding: var(--s3, 24px); } }

/* ---------------------------------------------------------------- forms */

.field { margin-bottom: var(--s4, 32px); }
.field label { display: block; font-weight: 700; font-size: 16px; margin-bottom: var(--s1, 8px); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  color: var(--ink, #12253A); background: #FFFFFF;
  border: 2px solid var(--rule, #D2DEE7); border-radius: var(--radius, 4px);
  padding: 14px var(--s2, 16px); min-height: 54px;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent-hi, #0B7A82); }
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: 15px; color: var(--ink-muted, #4E6377); margin: var(--s1, 8px) 0 0; }

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

@media print {
  .sitehead, .sitenav, .btn, .btn-row { display: none !important; }
  body { font-size: 11pt; }
  .hero, .section--navy { background: #FFFFFF !important; color: #000000 !important; }
  .hero h1, .section--navy h2, .diff li { color: #000000 !important; }
}

/* card bullets: same tick language as .bestfor, tighter for a card */
.bestfor-inline { list-style: none; margin: 0; padding: 0; }
.bestfor-inline li {
  position: relative; padding: 7px 0 7px 28px;
  font-size: 17px; line-height: 1.45; color: var(--ink-muted, #4E6377);
}
.bestfor-inline li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 12px; height: 6px;
  border-left: 2.5px solid var(--accent-hi, #0B7A82);
  border-bottom: 2.5px solid var(--accent-hi, #0B7A82);
  transform: rotate(-45deg);
}

/* h1 steps down hard on small screens, so h2's floor has to follow or the
   page ends up with an h2 LARGER than its h1 — caught by the gate at 320. */
@media (max-width: 400px) {
  h2 { font-size: clamp(21px, 6vw, 27px); }
  h3 { font-size: 18px; }
}

.pagewrap { position: relative; }