/* ============================================================================
   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 */

.sitehead { background: var(--navy, #0E2A45); border-bottom: 4px solid var(--accent-hi, #0B7A82); }
.sitehead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4, 32px); flex-wrap: wrap; padding-block: var(--s2, 16px);
}
.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; }
@media (max-width: 700px) {
  .sitehead .wrap { gap: var(--s2, 16px); padding-block: var(--s1, 8px); }
  .sitenav { gap: 18px; }
  .sitenav a { font-size: 15px; }
}

.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); } }

/* --------------------------------------------------------- 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; }
}