/* ─────────────────────────────────────────────────────────────────────────
   /platform — the Platform (software) story page. Only platform.html links
   this file.

   Design language (Claude-design handoff): paper #fdfcfc, ink #14140f,
   hairline rules #e6e2dd, warm tint #f7f5f2, mono labels, accent green
   oklch(52% .11 152). Depth is always a 1px rule or a surface change, never
   a shadow. Every rule is scoped under .pp so nothing leaks into the shared
   chrome, which stays on main.css.

   Product visuals are BUILT demo UI (.dm-*) — inline HTML/CSS matching the
   real app shell (warm-white panels on a #faf9f7 canvas, left icon rail with
   the dark app mark, breadcrumb patient header, restrained terracotta
   primary, mono status words) — framed by the house browser chrome
   (.pp-shot). Fictional demo patient throughout: Maya Patel · MRN
   DEV-900112 · 42 yrs · F. Each demo REFLOWS below 760px (rail hidden,
   panels stacked finding-first, timeline vertical, table compacted) — never
   a shrunken miniature, so no pan viewport or JS is needed.
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

.pp{background:#fdfcfc; color:#14140f; font-family:var(--sans);
    -webkit-font-smoothing:antialiased}
/* Headings restate the site serif treatment (main.css h1–h3: Fraunces 550,
   -.01em) with an explicit ink so they stay visible on the dark CTA band. */
.pp h1,.pp h2,.pp h3{font-family:var(--serif); font-weight:550;
  letter-spacing:-.01em; color:#14140f}
.pp-ctaband h2{color:#fdfcfc}
.pp a{color:inherit; text-decoration:none}
.pp a:hover{opacity:.7}
.pp a:focus-visible{outline:2px solid oklch(46% .1 152); outline-offset:3px}
.pp-link{text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:#b7b1a8}

/* type */
.pp-h1{margin:0; font-size:clamp(34px,5.6vw,62px); line-height:1.03; text-wrap:balance}
.pp-h2{margin:12px 0 0; font-size:clamp(25px,3.8vw,38px); line-height:1.14;
  max-width:30ch; text-wrap:balance}
.pp-h2--wide{max-width:36ch}
.pp-dim{color:#6f6b64}
.pp-kicker{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#8d8880}
.pp-note{margin:20px 0 0; font-size:15.5px; line-height:1.55; color:#4b4842;
  max-width:62ch}

/* rhythm — .pp-sec restates the house .section major-chapter spacing
   (104/80/64 desktop/tablet/mobile) so each beat reads as its own chapter. */
.pp-pad{padding-left:40px; padding-right:40px}
.pp-shell{max-width:1200px; margin:0 auto}
.pp-sec{padding-top:84px; padding-bottom:84px}
.pp-sec--tint{background:#f7f5f2; border-top:1px solid #e6e2dd;
  border-bottom:1px solid #e6e2dd}
@media (max-width:900px){
  .pp-sec{padding-top:64px; padding-bottom:64px}
}
@media (max-width:760px){
  .pp-pad{padding-left:20px; padding-right:20px}
  .pp-sec{padding-top:52px; padding-bottom:52px}
}
/* cross-page deep links land under the sticky header */
#record,#intelligence,#care-plan,#between-visits,#patients{scroll-margin-top:8px}

/* buttons (.pp .pp-btn so the colour beats `.pp a{color:inherit}`) */
.pp .pp-btn{display:inline-flex; align-items:center; padding:14px 22px;
  background:#14140f; color:#fdfcfc; border-radius:4px; font-size:15px;
  font-weight:500}
.pp .pp-btn--light{background:#fdfcfc; color:#14140f}

/* ── 1 · hero ── */
.pp-hero{padding-top:70px; padding-bottom:42px}
.pp-hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:64px;
  align-items:end}
.pp-lede{margin:0; font-size:17.5px; line-height:1.55; color:#4b4842; text-wrap:pretty}
.pp-cta-row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.pp-heroband{border-top:1px solid #e6e2dd; border-bottom:1px solid #e6e2dd;
  padding:52px 64px}
.pp-heroband img{display:block; width:100%; max-width:1160px; height:auto;
  margin:0 auto; border:1px solid #e6e2dd; border-radius:5px}
@media (max-width:900px){
  .pp-hero{padding-top:44px; padding-bottom:30px}
  .pp-hero-grid{grid-template-columns:1fr; gap:20px}
  .pp-lede{font-size:16px}
}
@media (max-width:760px){ .pp-heroband{padding:26px 20px} }

/* ── 2 · EHR contrast (CSS diagram, not a screenshot) ── */
.pp-contrast{display:grid; grid-template-columns:1fr auto 1fr; gap:24px;
  align-items:stretch; margin-top:34px}
.pp-con-col{border:1px solid #e6e2dd; border-radius:5px; padding:20px 24px 8px}
.pp-con-ehr{background:#f7f5f2}
.pp-con-plat{border-color:#14140f; border-top:2px solid oklch(52% .11 152)}
.pp-con-col ul{list-style:none; margin:12px 0 0; padding:0}
.pp-con-col li{display:flex; gap:11px; align-items:center; padding:11px 0;
  border-top:1px solid #e6e2dd; font-size:15.5px; line-height:1.4}
.pp-con-ehr li{color:#6f6b64}
.pp-con-ehr li::before{content:""; width:14px; height:1px; background:#b7b1a8; flex:0 0 auto}
.pp-con-plat li{color:#14140f}
.pp-con-plat li::before{content:""; width:5px; height:5px; border-radius:50%;
  background:oklch(52% .11 152); flex:0 0 auto}
.pp-con-arrow{display:flex; align-items:center; color:#8d8880; font-size:22px}
@media (max-width:900px){
  .pp-contrast{grid-template-columns:1fr; gap:10px}
  .pp-con-arrow{justify-content:center; transform:rotate(90deg); font-size:18px}
}

/* ── framed demo UI (house browser chrome) ── */
.pp-shot{margin:0; border:1px solid #d8d3cb; border-radius:6px; overflow:hidden;
  background:#fdfcfc}
.pp-shot-bar{display:flex; align-items:center; gap:6px; height:34px;
  padding:0 14px; border-bottom:1px solid #e6e2dd}
.pp-shot-bar i{width:8px; height:8px; border-radius:50%; background:#e6e2dd; flex:0 0 auto}
.pp-shot-bar span{margin-left:10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:#8d8880;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── demo UI primitives (.dm) — the app shell, built ── */
.dm{display:flex; background:#faf9f7; color:#1f1d18; font-family:var(--sans);
  font-size:13px; line-height:1.4; text-align:left}
.dm b{font-weight:600}
.dm p{margin:4px 0 0; font-size:12px; line-height:1.5; color:#4b4842;
  text-wrap:pretty}
/* left icon rail */
.dm-rail{flex:0 0 46px; display:flex; flex-direction:column; align-items:center;
  gap:19px; padding:12px 0; background:#fff; border-right:1px solid #eee9e3}
.dm-mark{width:26px; height:26px; border-radius:7px; background:#0B1D33;
  display:flex; align-items:center; justify-content:center; margin-bottom:2px}
.dm-rail > svg{color:#a49d92; flex:0 0 auto}
.dm-main{flex:1; min-width:0}
/* breadcrumb + patient header */
.dm-crumb{display:flex; align-items:center; gap:8px; padding:9px 16px;
  background:#fff; border-bottom:1px solid #eee9e3; font-size:12px; color:#8a857d}
.dm-crumb em{font-style:normal; color:#c9c3ba}
.dm-crumb b{color:#1f1d18}
.dm-phead{display:flex; align-items:center; gap:12px; padding:14px 18px 12px;
  flex-wrap:wrap}
.dm-ava{width:34px; height:34px; border-radius:50%; background:#efe9e2;
  color:#6f6b64; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; flex:0 0 auto}
.dm-pid b{display:block; font-size:15.5px; line-height:1.2}
.dm-pid span{display:block; font-size:11px; color:#8a857d; margin-top:2px}
.dm-hact{margin-left:auto; display:flex; align-items:center; gap:8px;
  flex-wrap:wrap}
.dm-tabs{display:flex; border:1px solid #e3ded7; border-radius:7px;
  overflow:hidden; background:#fff}
.dm-tabs span{padding:6px 13px; font-size:12px; color:#8a857d}
.dm-tabs .on{background:#f2ede7; color:#1f1d18; font-weight:600}
.dm-sbtn{padding:6px 13px; border:1px solid #e3ded7; border-radius:7px;
  background:#fff; font-size:12px; font-weight:500; color:#4b4842;
  white-space:nowrap}
.dm-obtn{padding:6px 13px; border-radius:7px; background:#bf6a4b; color:#fff;
  font-size:12px; font-weight:500; white-space:nowrap}
/* body + cards */
.dm-body{padding:14px 18px 18px}
.dm-cols{display:grid; gap:14px; align-items:start}
.dm-cols > *{min-width:0}
.dm-cols--rec{grid-template-columns:1.06fr .94fr}
.dm-cols--find{grid-template-columns:1.08fr .92fr}
.dm-cols--plan{grid-template-columns:.82fr 1.18fr}
.dm-card{background:#fff; border:1px solid #e6e2dd; border-radius:8px;
  padding:14px 16px}
.dm-cardhead b{display:block; font-size:13.5px}
.dm-cardhead span{display:block; font-size:11px; color:#8a857d; margin-top:2px}
.dm-lab{display:block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.11em; text-transform:uppercase; color:#8a857d}
.dm-gap{margin-top:14px}
.dm-st{font-family:var(--mono); font-style:normal; font-size:10px;
  letter-spacing:.05em; white-space:nowrap}
.dm-st--ok{color:#1f7a33}
.dm-st--err{color:#b3261e}
.dm-st--blue{color:#0435c8}
.dm-st--mut{color:#8a857d}
.dm-dot{width:7px; height:7px; border-radius:50%; background:#b7b1a8;
  flex:0 0 auto}
.dm-dot--ok{background:#1f7a33}
.dm-dot--err{background:#b3261e}
.dm-dot--blue{background:#0435c8}
.dm-btn{display:inline-block; padding:7px 16px; border-radius:7px;
  background:#1f1d18; color:#fdfcfc; font-size:12px; font-weight:500}
.dm-gbtn{display:inline-block; margin-top:14px; padding:6px 13px;
  border:1px solid #d8d3cb; border-radius:7px; background:#fff; font-size:12px;
  font-weight:500; color:#4b4842}
.dm-pill{display:inline-block; padding:7px 15px; border-radius:999px;
  background:#1f1d18; color:#fdfcfc; font-size:12px; font-weight:500}
.dm-btnrow{display:flex; align-items:center; gap:11px; margin-top:15px}
.dm-aside{font-size:11px; color:#8a857d}
.dm-foot{margin-top:9px; padding-top:9px; border-top:1px solid #f2eee8;
  font-size:11px; color:#8a857d}

/* demo table (visual 1) */
.dm-tbl{width:100%; border-collapse:collapse; margin-top:10px}
.dm-tbl th{font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:#8a857d;
  text-align:right; padding:7px 5px; border-bottom:1px solid #eee9e3}
.dm-tbl th:first-child{text-align:left}
.dm-tbl td{padding:10px 5px; border-bottom:1px solid #f2eee8; font-size:12.5px;
  text-align:right; color:#4b4842; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.dm-tbl td:first-child{text-align:left; font-weight:600; color:#1f1d18}
.dm-tbl tr:last-child td{border-bottom:0}
.dm-tbl td.hi{color:#b3261e;font-weight:600}
.dm-tbl tr.sel td{background:#fbf3ec}
.dm-tbl tr.sel td:first-child{box-shadow:inset 3px 0 0 #c05d33}
.dm-tbl tr.sel td:not(:first-child){color:#b3400a; font-weight:600}
/* selected-value detail (visual 1 right card) */
.dm-big{margin-top:10px; display:flex; align-items:center; gap:9px;
  font-size:26px; font-weight:600; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.dm-big em{font-style:normal; font-size:12px; font-weight:500; color:#8a857d}
.dm-chip{font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; padding:3px 8px; border-radius:5px}
.dm-chip--ok{background:#e8f2ea; color:#1f7a33}
.dm-chart{display:block; width:100%; height:auto; margin-top:6px}

/* priority findings (visual 2) */
.dm-list{margin-top:8px}
.dm-find{display:grid; grid-template-columns:auto 1fr auto; gap:10px;
  align-items:center; padding:10px 7px; border-top:1px solid #f2eee8}
.dm-find b{display:block; font-size:12.5px}
.dm-find .sub{display:block; font-size:11px; color:#8a857d; margin-top:1px}
.dm-find.sel{background:#fbf3ec; box-shadow:inset 3px 0 0 #c05d33}
.dm-seltitle{margin-top:7px; font-size:15px; font-weight:600}
.dm-delta{margin-top:2px; font-size:20px; font-weight:600; color:#b3400a;
  font-variant-numeric:tabular-nums}

/* care-plan rows (visual 3) */
.dm-plan{display:grid; grid-template-columns:1.05fr 1.35fr 84px; gap:10px;
  align-items:center; padding:10px 2px; border-top:1px solid #f2eee8}
.dm-plan .dm-st{justify-self:end}
.dm-plan b{font-size:12.5px}
.dm-plan .sub{font-size:12px; color:#6f6b64}
.dm-addrow{margin-top:13px}

/* care timeline (visual 4) */
.dm-tl{list-style:none; margin:18px 0 2px; padding:0; display:grid;
  grid-template-columns:repeat(5,1fr)}
.dm-tl li{position:relative; padding:18px 12px 2px 0}
.dm-tl li::before{content:""; position:absolute; top:3.5px; left:16px; right:6px;
  height:2px; border-radius:1px; background:#e6e0d8}
.dm-tl li:last-child::before{display:none}
.dm-tl li::after{content:""; position:absolute; top:0; left:0; width:9px;
  height:9px; border-radius:50%; background:#b7b1a8; box-shadow:0 0 0 2px #fff}
.dm-tl li.tl--ok::after{background:#1f7a33}
.dm-tl li.tl--blue::after{background:#0435c8}
.dm-tl b{display:block; margin-top:6px; font-size:12.5px}
.dm-tl .d{display:block; font-size:11px; color:#8a857d; margin-top:1px}
.dm-tl .dm-st{display:block; margin-top:7px}

/* patient view (visual 5) — phone-ish panel on the app canvas */
.dm--phone{display:block; padding:20px 16px}
.dm-phone{max-width:340px; margin:0 auto; background:#fff;
  border:1px solid #e6e2dd; border-radius:14px; padding:6px 16px 10px}
.dm-ph{padding:12px 0; border-top:1px solid #f2eee8}
.dm-ph:first-child{border-top:0}
.dm-ph--hi b{font-size:15px}
.dm-ph .dm-lab{margin-bottom:6px}
.dm-ph b{font-size:13px}
.dm-up{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; padding-top:5px; font-size:12.5px}
.dm-up:first-of-type{padding-top:0}
.dm-up span{color:#8a857d}
.dm-up + .dm-up{padding-top:7px}

/* demo reflow — stacked panels, hidden rail, compact table; never shrunk */
@media (max-width:760px){
  .dm{font-size:12.5px}
  .dm-rail{display:none}
  .dm-crumb{padding:8px 12px}
  .dm-phead{padding:12px 12px 10px; gap:10px}
  .dm-body{padding:12px}
  .dm-cols--rec,.dm-cols--find,.dm-cols--plan{grid-template-columns:1fr; gap:12px}
  .dm-card{padding:12px 12px 10px}
  .dm-tbl th{font-size:8.5px; letter-spacing:.06em; padding:6px 3px}
  .dm-tbl td{font-size:11.5px; padding:9px 3px}
  .dm-plan{grid-template-columns:1fr auto; gap:2px 10px; padding:9px 2px}
  .dm-plan .sub{grid-column:1 / -1}
  .dm-tl{grid-template-columns:1fr; margin:14px 0 0}
  .dm-tl li{padding:0 0 18px 24px}
  .dm-tl li:last-child{padding-bottom:2px}
  .dm-tl li::before{top:5px; bottom:-4px; left:3.5px; right:auto; width:2px;
    height:auto}
  .dm-tl li::after{top:2px}
  .dm-tl b{margin-top:0}
  .dm-tl .dm-st{margin-top:5px}
}

/* ── 3 · #record ── */
.pp-recgrid{display:grid; grid-template-columns:1.05fr .95fr;
  grid-template-areas:"head rows" "shot shot" "note note"; gap:20px 64px;
  margin-top:8px; align-items:start}
.pp-recgrid > *{min-width:0}
.pp-rechead{grid-area:head}
.pp-recrows{grid-area:rows}
.pp-recshot{grid-area:shot; max-width:1040px; margin-top:16px}
.pp-recnote{grid-area:note; margin-top:0}
.pp-row{padding:13px 0; border-top:1px solid #e6e2dd; font-size:15.5px;
  line-height:1.5; color:#4b4842}
.pp-row:last-child{border-bottom:1px solid #e6e2dd}
@media (max-width:900px){
  .pp-recgrid{grid-template-columns:1fr;
    grid-template-areas:"head" "shot" "note" "rows"; gap:18px}
  .pp-recshot{margin-top:6px}
  .pp-recnote{margin-top:-4px}
  .pp-row:last-child{border-bottom:0}
}

/* ── 4 · #intelligence ── */
.pp-intgrid{display:grid; grid-template-columns:1fr;
  grid-template-areas:"head" "shot" "note"; gap:0}
.pp-intgrid > *{min-width:0}
.pp-inthead{grid-area:head}
.pp-intshot{grid-area:shot; max-width:1040px; margin-top:30px}
.pp-intgrid .pp-note{grid-area:note}
@media (max-width:900px){ .pp-intshot{margin-top:22px} }

/* ── 5 · #care-plan / 6 · #between-visits shared shot placement ── */
.pp-planshot{max-width:1040px; margin-top:30px}
@media (max-width:900px){ .pp-planshot{margin-top:22px} }

/* ── 7 · #patients ── */
.pp-split{display:grid; grid-template-columns:1.05fr .95fr;
  grid-template-rows:auto 1fr; grid-template-areas:"head fig" "note fig";
  gap:0 64px; align-items:start}
.pp-split > *{min-width:0}
.pp-splithead{grid-area:head}
.pp-splitnote{grid-area:note;align-self:start;margin-top:18px}
.pp-phoneshot{grid-area:fig; width:100%; max-width:390px; justify-self:center}
@media (max-width:900px){
  .pp-split{grid-template-columns:1fr; grid-template-areas:"head" "fig" "note";
    gap:22px}
  .pp-phoneshot{justify-self:start}
  .pp-splitnote{margin-top:0}
}

/* ── 8 · built for functional medicine ── */
.pp-fmgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:#e0dbd4; border:1px solid #e0dbd4; border-radius:5px;
  overflow:hidden; margin-top:30px}
.pp-fmgrid > div{background:#fdfcfc; padding:20px 22px}
.pp-fmgrid .n{display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.11em; color:#8d8880}
.pp-fmgrid .t{display:block; margin-top:8px; font-size:15.5px; font-weight:600;
  line-height:1.35; color:#14140f}
@media (max-width:900px){ .pp-fmgrid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .pp-fmgrid{grid-template-columns:1fr} }

/* ── 9 · closing CTA band ── */
.pp-ctaband{background:#14140f; color:#fdfcfc; padding-top:68px; padding-bottom:68px}
.pp-ctaband-in{display:flex; justify-content:space-between; align-items:flex-end;
  gap:48px; flex-wrap:wrap}
.pp-ctaband .pp-h2{max-width:24ch}
.pp-fine{margin:14px 0 0; font-size:13px; line-height:1.5; color:#b9b4ac; max-width:40ch}
@media (max-width:760px){ .pp-ctaband{padding-top:48px; padding-bottom:48px} }

@media (prefers-reduced-motion:reduce){ .pp *{transition:none !important} }

.pp-sec--thesis{padding-bottom:56px}
.pp-sec--joined{padding-top:44px}
.pp-contrast{margin-top:26px}
.pp-con-col li{padding:9px 0}
.pp-proofline{margin:26px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#4b4842;line-height:2}
.dm-ref{font-family:var(--mono);font-size:10.5px;color:#8a857d;margin:7px 0 2px;letter-spacing:.02em}
@media (max-width:759px){.pp-sec--joined{padding-top:32px}.pp-sec--thesis{padding-bottom:40px}}

/* caption label: interpretation lives outside the app chrome (2026-08-24) */
.pp-notelab{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#8a857d;margin-bottom:5px}
.pp-note{font-size:14.5px}