/* Peak Load Institute — peakloadinstitute.com
   Static demo site. No external dependencies. */

:root {
  --bg: #0a0b0d;
  --bg-panel: #121418;
  --bg-panel-2: #171a1f;
  --line: #262a31;
  --line-soft: #1c2027;
  --text: #eceae7;
  --text-dim: #a2a09c;
  --text-faint: #6f6d6a;
  --accent: #f0842a;
  --accent-dim: #b35f1c;
  --accent-wash: rgba(240, 132, 42, 0.09);
  --green: #5db98b;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;

  --maxw: 1080px;
  --pad: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

section { padding: 96px 0; border-top: 1px solid var(--line-soft); }
section:first-of-type { border-top: none; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }

h1 { font-size: clamp(38px, 6vw, 62px); letter-spacing: -0.035em; }
h2 { font-size: clamp(28px, 4vw, 38px); }
h3 { font-size: 20px; letter-spacing: -0.01em; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

.eyebrow.muted { color: var(--text-faint); }

.lead { font-size: 19px; color: var(--text-dim); max-width: 62ch; }

.section-head { max-width: 68ch; margin-bottom: 48px; }
.section-head p { color: var(--text-dim); margin-top: 18px; }

.small { font-size: 14px; color: var(--text-faint); line-height: 1.6; }

/* a section-head CTA — lets someone who jumps to a section act on it immediately
   instead of scrolling to the bottom to find the link */
.head-cta { margin-top: 28px; gap: 18px; }
.head-cta .small { max-width: 34ch; }

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

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 11, 13, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 15px;
}
.brand:hover { text-decoration: none; }

.mark {
  width: 22px; height: 22px;
  flex: none;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
}

.nav-links a { color: var(--text-dim); }
.nav-links a:hover { color: var(--text); text-decoration: none; }

.nav-cta {
  border: 1px solid var(--accent-dim);
  color: var(--accent) !important;
  padding: 7px 14px;
  border-radius: 6px;
}
.nav-cta:hover { background: var(--accent-wash); }

.nav-toggle { display: none; }

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

.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--accent); color: #14100b; }
.btn-primary:hover { background: #ff9440; }

.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-faint); background: var(--bg-panel); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

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

.hero { padding: 52px 0 88px; }

/* identity card — portrait + name + credentials + LinkedIn, above the fold */

.identity {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--line-soft);
  background: var(--bg-panel);
  border-radius: 18px;
  padding: 16px 30px 16px 16px;
  margin-bottom: 32px;
  max-width: 100%;
}

.portrait-frame {
  position: relative;
  flex: none;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-panel-2);
  box-shadow: 0 0 0 1px var(--line), 0 0 0 4px rgba(240, 132, 42, 0.16);
}

.portrait-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 30px;
  letter-spacing: 0.06em;
  color: var(--accent-dim);
  background: radial-gradient(circle at 50% 30%, #1f242b, #101215);
}

.portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.identity-body { min-width: 0; }

.identity-name {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.25;
}
.identity-name span {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 7px;
}

.identity-role {
  font-size: 14.5px;
  color: var(--text-dim);
  margin: 0 0 12px;
  line-height: 1.65;
}

.identity-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-dim);
}
.identity-link svg { flex: none; opacity: 0.75; }
.identity-link:hover { color: var(--accent); text-decoration: none; }
.identity-link:hover svg { opacity: 1; }

/* A descriptive headline doesn't need to shout — it needs to be unmistakably the
   biggest thing on the page and to break into clean lines. */
.hero h1 {
  font-size: clamp(31px, 4.4vw, 47px);
  max-width: 26ch;
  margin-bottom: 26px;
}
.hero h1 em { font-style: normal; color: var(--accent); }


.hero .lead { font-size: 20px; max-width: 58ch; margin-bottom: 18px; }

/* supporting beats under the hero deck — each step down in size and weight */
.hero-body {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 62ch;
  margin-bottom: 20px;
}
.hero-body strong { color: var(--text); font-weight: 600; }

/* The lead is a stated inequality, not prose, so it takes the mono face the rest of the
   site reserves for data and labels (eyebrows, credential chips, chart axes, `n = 1`).
   Only this line — hero body copy stays sans, or the mono-means-data convention dies. */
.hero-lead {
  font-family: var(--mono);
  font-size: 18.5px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 600;
  max-width: 46ch;
  margin-bottom: 20px;
}


.credbar {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* each credential group is a card, matching the identity card above it so the
   right-hand column reads as one deliberate stack rather than loose text */
.credgroup {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 24px 26px;
  min-width: 0;
}

.credgroup-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 18px;
}

/* simple.html states credentials in a single full-width card rather than the paired
   cards the homepage sidebar uses. */
/* simple.html puts the credential cards in the page body rather than a sidebar, so the
   line that follows them needs its own separation. */
/* On simple.html the credential cards lead the hero, above the headline, so they carry the
   accent the other mono labels on that page use and need their own spacing either side.
   Scoped to .page-hero so the homepage sidebar keeps its recessive gray and its own layout. */
.page-hero .credbar { margin-top: 4px; margin-bottom: 30px; }
.page-hero .credgroup-title { color: var(--accent); }

/* simple.html path chooser — three doors at the top of a page with no nav, so a visitor
   self-selects in one click instead of reading to find their case. Anchors into the
   matching sections below; global scroll-padding-top handles the landing offset. */
.paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.path {
  display: block;
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 22px 24px;
  color: var(--text);
}
.path:hover,
.path:focus-visible {
  border-color: var(--accent-dim);
  background: var(--bg-panel-2);
  text-decoration: none;
}

.path-k {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.path-t {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 7px;
}
.path-d {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

@media (max-width: 900px) {
  .paths { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
}

.credbar dl { margin: 0; }
.credbar dl > div { margin-bottom: 16px; }
.credbar dl > div:last-child { margin-bottom: 0; }

.credbar dt {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.credbar dd {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--text-faint);
  line-height: 1.5;
}
/* Each credential carries a plain-language line above its issuing body. CISSN is described
   by domain and issuer ("Sports nutrition certification", ISSN) rather than by its full title,
   which contains a term protected in Washington under RCW 18.138. Don't spell it out. */
.cred-full { display: block; color: var(--text-dim); }

/* Chips in the credential bar. `.tenure` keeps the years visually bound to the employer
   (so "12+ years" reads as time at Google, not time in the role); `.lever-tag` marks which
   lever each certification covers. Same treatment as `.lever-k` in the cards below. */
.tenure, .lever-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid rgba(240, 132, 42, 0.28);
  border-radius: 5px;
  padding: 3px 8px;
  margin-left: 8px;
  vertical-align: 2px;
  white-space: nowrap;
}

/* keeps each employer and its chip together when the row wraps */
.co { display: inline-block; margin-right: 26px; white-space: nowrap; }
.co:last-child { margin-right: 0; }

/* The hero's identity card and credential cards are one unit (`.hero-side`).
   Narrow screens: the wrapper dissolves with `display: contents` and flex `order`
   restores the original reading order — card first, credentials last.
   Desktop: the wrapper becomes the right-hand column, so the two stack tightly and
   top-align independently of how tall the headline happens to be. */
.hero > .wrap { display: flex; flex-direction: column; }
.hero-side { display: contents; }
.hero-side > .identity { order: -1; }
.hero-side > .credbar { order: 1; }

@media (min-width: 1040px) {
  .hero > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 64px;
    align-items: start;
  }
  .hero > .wrap > * { grid-column: 1; }

  .hero > .wrap > .hero-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: 2;
    grid-row: 1 / span 8;
    align-self: start;
  }
  .hero-side > .identity { margin-bottom: 0; width: 100%; }
  .hero-side > .credbar {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 0;
  }

  /* the copy column is narrower here, so let the headline size to it */
  .hero h1 { max-width: none; }
}

/* ---------- generic grid + cards ---------- */

/* Grid/flex items default to min-width:auto and refuse to shrink below their
   content's min-content width. Anything with an intrinsic minimum inside them
   (the lab table, an inline SVG chart) would otherwise widen its track and push
   the whole page into horizontal scroll on narrow screens. */
.grid-2 > *, .grid-3 > *, .fit > *, .plans > *, .loop > *,
.stats > *, .credbar > *, .story > *, .addons > *, .legal > * { min-width: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.card {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 28px;
}

.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-dim); font-size: 15.5px; }

.card-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 14px;
}

/* ---------- fit list (who this is / isn't for) ---------- */

.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.fit-col {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 28px;
  background: var(--bg-panel);
}
.fit-col.no { background: transparent; }

.fit-col h3 { font-size: 17px; margin-bottom: 18px; }
.fit-col ul { margin: 0; padding: 0; list-style: none; }
.fit-col li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 15.5px;
  color: var(--text-dim);
}
.fit-col li:last-child { margin-bottom: 0; }
.fit-col li::before {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--mono);
  font-size: 13px;
}
.fit-col.yes li::before { content: "✓"; color: var(--green); }
.fit-col.no li::before { content: "×"; color: var(--text-faint); }

/* ---------- stats panel ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 52px;
}

.stat {
  background: var(--bg-panel);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-v {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1.15;
}

.stat-l {
  font-size: 14.5px;
  color: var(--text);
  font-weight: 500;
}

.stat-n {
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.45;
}

/* ---------- charts & data ---------- */

.figure {
  margin: 0 0 52px;
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 24px 22px 20px;
}

.figure .chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.figure circle[r="4"] { cursor: crosshair; }

.figure figcaption {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* lab panel comparison */

.labfig { padding: 26px 26px 20px; }

/* wide content scrolls inside its own container — the page body never does */
.tablescroll { overflow-x: auto; }

.labtable {
  width: 100%;
  min-width: 440px;
  border-collapse: collapse;
  font-size: 15px;
}

.labtable caption {
  text-align: left;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding-bottom: 18px;
}

.labtable th, .labtable td {
  padding: 11px 18px 11px 0;
  text-align: right;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.labtable tr:last-child th, .labtable tr:last-child td { border-bottom: none; }

.labtable thead th {
  font-family: var(--mono);
  color: var(--text-faint);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.labtable thead th:first-child { text-align: left; }

.labtable tbody th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 400;
  padding-right: 32px;
  white-space: normal;
}

.labtable tbody td {
  font-family: var(--mono);
  color: var(--text-faint);
  font-size: 15px;
}
.labtable td.now { color: var(--text); font-weight: 600; }
.labtable td.delta { color: var(--accent); font-size: 13.5px; }

/* status is never carried by color alone — the "High" text label rides with it */
.labtable td.flag { color: #d4705e; }
/* Green marks a 2022-flagged marker that has since cleared. Paired with red in the
   adjacent column, so it is never the sole encoding: the 2022 cell also carries a
   "High" text badge and the change column carries an arrow + percentage. */
.labtable td.ok { color: #6faa78; }
.lab-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4705e;
  border: 1px solid rgba(212, 112, 94, 0.4);
  background: rgba(212, 112, 94, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ---------- story ---------- */

.story { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
.story p { color: var(--text-dim); }
.story strong { color: var(--text); font-weight: 600; }

.pullquote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 28px 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -0.01em;
}


/* ---------- long-form story page ---------- */

.wrap.narrow { max-width: 780px; }

.page-hero { padding: 56px 0 8px; border-top: none; }

.backlink {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 32px;
}
.backlink:hover { color: var(--accent); text-decoration: none; }

.page-hero h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 24px; max-width: 20ch; }

.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.byline strong { color: var(--text); font-weight: 600; }
.portrait-frame.sm { width: 52px; height: 52px; box-shadow: 0 0 0 1px var(--line), 0 0 0 3px rgba(240, 132, 42, 0.14); }
.portrait-frame.sm .portrait-mono { font-size: 14px; }

.story-body { padding-top: 32px; border-top: none; }

.chapter {
  padding: 52px 0;
  border-top: 1px solid var(--line-soft);
}
.chapter:first-child { border-top: none; padding-top: 24px; }

.chapter-k {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.chapter h2 {
  font-size: clamp(24px, 3.4vw, 31px);
  margin-bottom: 24px;
  max-width: 24ch;
}

.chapter p {
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.chapter strong { color: var(--text); font-weight: 600; }
.chapter em { color: var(--text); font-style: italic; }

.chapter-sub {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 42px 0 20px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}

/* MHMDA requires a prominent homepage link to the consumer health data privacy policy. The
   footer link alone is thin for "prominent", so this sits in #legal as well. Don't remove
   either one without checking RCW 19.373.020. */
.legal-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-faint);
  max-width: 78ch;
}
.legal-note a { color: var(--accent); }

/* health-data-privacy.html — lighter subhead than .chapter-sub, which carries a rule and 42px
   of margin meant for story chapters. A policy page has ~9 of these; the heavy version turns
   the document into a stack of separators. */
.policy-sub {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 32px 0 12px;
}

.policy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.policy-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--text-dim);
  max-width: 74ch;
}

.policy-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.policy-list strong { color: var(--text); font-weight: 600; }

/* simple.html — fine print sitting under a CTA needs air; .btn-row's own margin
   is sized for a following heading, not for body text. */
.btn-row + .small { margin-top: 18px; max-width: 74ch; }

.chapter .pullquote {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text);
  margin: 32px 0;
}

.callout {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 24px 26px;
  margin: 32px 0;
}
.callout p { font-size: 16px; line-height: 1.7; margin: 0; }

.deflist { margin: 30px 0 34px; display: grid; gap: 18px; }
.deflist > div {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 24px 26px;
}
.deflist h3 { font-size: 17px; margin-bottom: 10px; color: var(--text); }
.deflist p { font-size: 15.5px; line-height: 1.68; margin: 0; }

.story-cta {
  margin: 24px 0 8px;
  background: linear-gradient(180deg, var(--accent-wash), transparent 60%), var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-radius: 16px;
  padding: 44px;
}
.story-cta h2 { margin-bottom: 14px; }
.story-cta .lead { margin-bottom: 28px; font-size: 17.5px; }

/* ---------- two levers ---------- */

.levers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.lever {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 28px 28px 26px;
  min-width: 0;
}

.lever h3 {
  font-size: 19px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.lever-split { display: grid; gap: 20px; }
.lever-split > div { min-width: 0; }

.lever-k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(240, 132, 42, 0.28);
  background: var(--accent-wash);
  border-radius: 5px;
  padding: 3px 8px;
  margin-bottom: 10px;
}

.lever-split p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0;
}
.lever-split em { color: var(--text); font-style: italic; }

/* ---------- method loop ---------- */

.loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.loop-step {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 24px;
  background: var(--bg-panel);
  position: relative;
}
.loop-step .step-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}
.loop-step h3 { font-size: 17px; margin-bottom: 10px; }
.loop-step p { font-size: 14.5px; color: var(--text-dim); }

/* ---------- pricing ---------- */

/* Two products, not three tiers: a one-time assessment and one ongoing engagement
   sold at two cadences. The ongoing card is given the wider track. */
/* align-items: start, not stretch — the two cards hold different amounts of content
   and the standing engagement has no CTA, so equal heights would leave dead space
   inside whichever card ran short. Each card ends where its content ends. */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }

.cadences { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 22px; }
.cadence {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 15px 16px 14px;
  background: rgba(255, 255, 255, 0.022);
}
.cadence .price { font-size: 27px; margin: 0 0 6px; }
.cadence-note { font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.cadence-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 4px;
  white-space: nowrap;
}

.plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 30px 26px;
  background: var(--bg-panel);
}

.plan.feature {
  border-color: var(--accent-dim);
  background: linear-gradient(180deg, var(--accent-wash), transparent 42%), var(--bg-panel-2);
}

.plan-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.plan.feature .plan-tag { color: var(--accent); }

.plan h3 { font-size: 19px; margin-bottom: 10px; }

.plan .price {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 16px 0 4px;
}
.plan .price small {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0;
}
.plan .price-note { font-size: 13.5px; color: var(--text-faint); margin-bottom: 22px; }
.plan > .price-note:last-child { margin-bottom: 0; }

.plan > p { font-size: 15px; color: var(--text-dim); }

.plan ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line-soft);
}
.plan li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.55;
}
.plan li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-dim);
  font-family: var(--mono);
  font-size: 12px;
}

.plan .plan-foot { margin-top: auto; }
.plan .btn { width: 100%; text-align: center; }

/* Single add-on since the Quarterly Deep Review was retired; auto-fit keeps a
   second one landing beside it rather than stranded at half width. */
.addons {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.addon {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 22px 24px;
}
.addon h3 { font-size: 16px; margin-bottom: 8px; }
.addon .price-inline {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 10px;
}
.addon p { font-size: 14.5px; color: var(--text-dim); }

.pricing-note {
  margin-top: 28px;
  font-size: 14px;
  color: var(--text-faint);
  max-width: 76ch;
}

/* ---------- the problem ---------- */

.problem { gap: 48px; align-items: start; }
.problem h2 { margin-bottom: 18px; }
.problem p { color: var(--text-dim); }
.problem .pullquote { color: var(--text); }

/* Inline source marker. Site principle: my own data is shown in a chart or tile the reader can
   inspect, so only borrowed outside claims carry a citation. Kept nowrap so the bracket never
   breaks across a line away from the claim it belongs to. */
.cite {
  font-size: 0.82em;
  color: var(--text-faint);
  text-decoration: none;
  white-space: nowrap;
}
.cite:hover,
.cite:focus-visible { color: var(--accent); text-decoration: underline; }

/* ---------- founding-rate prices ---------- */

/* The struck original sits inline with the discounted figure and is sized off it, so it
   stays legible at both .price (34px) and .cadence .price (27px). Big enough to register
   as a real number, small enough that the founding price still wins. */
.plan .price s {
  font-size: 0.62em;
  font-weight: 500;
  color: var(--text-faint);
  text-decoration-thickness: 1.5px;
  margin-right: 8px;
  letter-spacing: -0.02em;
}
/* The cadence boxes are only ~215px wide; inline, the struck figure pushed "/ month"
   onto its own line. Stack it above instead. */
.cadence .price s {
  display: block;
  font-size: 15px;
  margin: 0 0 1px;
}

/* ---------- GLP-1 / position block ---------- */

.stance {
  background: var(--bg-panel);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 40px;
}
.stance .grid-2 { gap: 40px; align-items: start; }
.stance p { color: var(--text-dim); }
.stance h2 { margin-bottom: 18px; }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--line-soft); }
.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 20px 0;
}
.faq summary {
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--accent);
  font-size: 18px;
  flex: none;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin-top: 14px;
  color: var(--text-dim);
  font-size: 15.5px;
  max-width: 76ch;
}

/* ---------- CTA / apply ---------- */

.apply {
  background: linear-gradient(180deg, var(--accent-wash), transparent 60%), var(--bg-panel);
  border: 1px solid var(--accent-dim);
  border-radius: 16px;
  padding: 48px;
}
.apply h2 { margin-bottom: 16px; }
.apply .lead { margin-bottom: 30px; }

.steps {
  list-style: none;
  margin: 36px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.steps li { counter-increment: step; font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 8px;
}
.steps li strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }

/* ---------- legal ---------- */

.legal { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }

/* Desktop: the two short blocks ("what I am", "disclosure") stack in column 1,
   and the long disclaimer ("what I'm not") fills column 2 — so the two columns
   come out roughly even (≈95 words vs ≈78). Source order is left untouched, so
   the mobile stack and screen readers still read am → not → disclosure.
   ⚠️ These rules depend on that source order: 1 = what I am, 2 = what I'm not,
   3 = disclosure. Reordering the blocks in the HTML will scramble the layout.
   `span 2` is deliberate — a negative row line would resolve against the
   explicit grid and misplace the item (same bug hit in the hero). */
@media (min-width: 901px) {
  .legal { grid-template-columns: 1fr 1fr; }
  .legal > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .legal > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .legal > :nth-child(3) { grid-column: 1; grid-row: 2; }
}
.legal-block {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 28px;
}
.legal-block h3 { font-size: 16px; margin-bottom: 14px; }
.legal-block p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line-soft);
  padding: 48px 0 64px;
}
.foot-inner {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.foot-brand { font-weight: 600; margin-bottom: 8px; }
.foot-links { display: flex; gap: 24px; font-size: 14px; flex-wrap: wrap; }
.foot-links a { color: var(--text-dim); }
.foot-links a:hover { color: var(--accent); }
.foot-legal { margin-top: 32px; font-size: 13px; color: var(--text-faint); max-width: 80ch; line-height: 1.6; }
/* www/index.html: a one-line footer where the legal line sits beside the links, not under them. */
.foot-inner > .foot-legal { margin: 0; }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  section { padding: 72px 0; }
  .credbar { grid-template-columns: 1fr; gap: 32px; }
  .grid-3, .plans, .loop, .levers { grid-template-columns: 1fr; }
  .cadences { grid-template-columns: 1fr; gap: 12px; }
  .stats { grid-template-columns: 1fr 1fr; margin-bottom: 40px; }
  .story { grid-template-columns: 1fr; gap: 36px; }
  .grid-2, .fit, .addons { grid-template-columns: 1fr; } /* .legal is 1fr by default now */
  .steps { grid-template-columns: 1fr 1fr; }
  .stance, .apply, .story-cta { padding: 30px 24px; }
  .chapter { padding: 40px 0; }
  .figure { padding: 18px 14px 16px; margin-bottom: 40px; }
  .labfig { padding: 20px 18px 16px; }
  .labtable, .labtable tbody td { font-size: 14px; }
  .labtable tbody th { padding-right: 18px; }
  .chapter h2 { max-width: none; }
  .chapter p { font-size: 17px; }
  .stance .grid-2 { gap: 28px; }
}

@media (max-width: 960px) {
  body { font-size: 16px; }
  .hero { padding: 44px 0 64px; }
  .hero h1 { max-width: none; }

  .identity {
    display: flex;
    width: 100%;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 32px;
  }
  .portrait-frame { width: 80px; height: 80px; }
  .portrait-mono { font-size: 22px; }
  .identity-name { font-size: 19px; }
  .identity-name span { font-size: 11px; letter-spacing: 0.08em; }
  .identity-role { font-size: 13.5px; }
  .identity-link { font-size: 13px; }
  .tenure { margin-left: 6px; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 20px; }
  .stat-v { font-size: 24px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 20px;
  }
  .nav-links.open a { padding: 12px 0; width: 100%; }
  .nav-links.open .nav-cta { margin-top: 10px; padding: 12px 16px; width: auto; }
  .nav-toggle {
    display: block;
    background: none;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 6px;
    padding: 7px 11px;
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
  }
  .steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* A page whose article is the last thing on it (www/health-data-privacy.html has no footer)
   would otherwise end 52px after its final line. Harmless where a footer does follow. */
main > article.narrow { padding-bottom: 48px; }

/* www/index.html hero prose. All three paragraphs share the site's body-prose treatment —
   17.5px on --text-dim, matching .chapter p — rather than one .lead plus two paragraphs
   inheriting the full-brightness default, which made the newest copy the loudest thing
   on the page. Scoped so .lead / .small elsewhere in a .page-hero are untouched. */
.page-hero .intro {
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--text-dim);
  max-width: 68ch;
  margin-bottom: 22px;
}
/* Same emphasis as .chapter strong: full-brightness text against the dim prose. */
.page-hero .intro strong { color: var(--text); font-weight: 600; }

/* A CTA placed mid-section (www/index.html puts one under the heading) needs its own
   separation from the prose that follows; .btn-row carries no bottom margin of its own. */
.chapter .btn-row + p { margin-top: 28px; }

/* A quiet aside inside a chapter — italic, but keeping the dim body colour. `.chapter em`
   deliberately brightens instead, which is wrong for a footnote-style line. */
.chapter p.note { font-style: italic; }

/* www/index.html inverts the usual plans layout: the accented card on the left holds the price
   options rather than a single figure. Side by side inside that column they get ~133px of content
   width, which is narrower than "$450 / month" needs, so stack them instead — each box then has
   the full card width and the two options read as a simple list. */
.plans.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; }
.plans.split .cadences { grid-template-columns: 1fr; gap: 10px; margin: 16px 0 18px; }
.plans.split .cadence { padding: 13px 16px; }
.plans.split .cadence-note { margin: 0; font-size: 13px; color: var(--text-dim); }
.plans.split .cadence .price { font-size: 24px; margin: 0 0 2px; }
.plans.split .cadence .price s { display: inline; font-size: 0.58em; margin-right: 9px; }
.plans.split .price-note { margin-bottom: 0; }
/* The between-session support item: the main thing monthly coaching has that one-off sessions
   don't, so it's the first item in "What is also included" and the only one in full-bright text. */
.plan li.highlight { color: var(--text); }
.plan li.highlight strong { font-weight: 600; }
.cadence .price small { white-space: nowrap; }

/* Collapse the split pricing layout on narrow screens. This has to live at the end of the file,
   after the .plans.split rules above: same specificity, so source order decides, and the earlier
   responsive block would otherwise lose to them. */
/* One-card variant (the one-off card): same look as the monthly price card, at full width. */
.plans.split.single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
  .plans.split { grid-template-columns: 1fr; }
  .plans.split .cadences { margin-bottom: 16px; }
}

/* ---------- language switch + Simplified Chinese (index-zh.html) ---------- */

.page-hero .wrap { position: relative; }
.lang-switch {
  position: absolute;
  top: 4px;
  right: var(--pad);
  font-size: 13px;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
}
.lang-switch:hover { color: var(--accent); border-color: var(--accent-dim); text-decoration: none; }

/* System CJK fonts first, so Chinese never falls back to a mismatched face. */
html:lang(zh-Hans) body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
}
/* The mono uppercase labels are tracked wide for Latin text; Chinese needs far less. */
html:lang(zh-Hans) .plan-tag,
html:lang(zh-Hans) .credgroup-title { letter-spacing: 0.04em; }
html:lang(zh-Hans) h1, html:lang(zh-Hans) h2 { letter-spacing: 0; }