/* Vertex Medic · reference-home · homepage prototype
   Identity carried forward from production/home.css (fonts, tokens, semantics).
   Composition follows the captured reference sections, not the old homepage. */

@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400 500; font-display:swap; src:url("../fonts/newsreader-roman-latin-var.woff2") format("woff2"); }
@font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 600; font-display:swap; src:url("../fonts/hankengrotesk-roman-latin-var.woff2") format("woff2"); }
@font-face { font-family:"Fragment Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/fragmentmono-roman-latin-400.woff2") format("woff2"); }

:root{
  --paper:#F7F5F0; --paper-raised:#EFECE4; --paper-sunk:#E7E3DA;
  --ink:#121417; --ink-2:#42474F; --ink-3:#5F656E;
  --rule:#D8D3C8; --rule-strong:#BFB9AB;
  --open:#925708; --open-bg:#F7E9CF;
  --verified:#186A47; --verified-bg:#E1EEE6;
  --clinical:#3A5876;
  --stop:#A3251B;
  /* product surface (cool) */
  --prod-canvas:#F4F5F7; --prod-surface:#FFFFFF; --prod-rule:#E4E7EB; --prod-chrome:#23272E;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:20px;
  --w:1160px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ---------- chrome ---------- */
.mast{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; padding:13px var(--gut); background:var(--paper); border-bottom:1px solid var(--rule); }
.mast .mark{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.mast .mark .glyph{ display:flex; }
.mast .name{ font-family:var(--serif); font-size:19px; font-weight:500; }
.mast .name em{ font-style:italic; }
.mast .spacer{ flex:1; }
.mast .nav{ display:flex; gap:4px; align-items:center; }
.mast .nav a{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-decoration:none; padding:7px 10px; border-radius:6px; }
.mast .nav a:hover{ color:var(--ink); }
.mast .nav .btn{ background:var(--ink); color:var(--paper); border-radius:6px; padding:9px 15px; font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:0; text-transform:none; }
.mast .nav .btn:hover{ background:#2A2D33; color:#fff; }
@media (max-width:600px){ .mast .nav a:not(.btn){ display:none; } }

.wrap{ max-width:var(--w); margin:0 auto; padding:0 var(--gut); }
section{ padding:clamp(56px,9vw,104px) 0; }
section.tint{ background:var(--paper-raised); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }

.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 18px; }
.lede{ font-family:var(--serif); font-weight:500; line-height:1.06; letter-spacing:-.01em; }
.body{ font-size:16.5px; color:var(--ink-2); max-width:60ch; }
.k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* buttons */
.cta{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--paper); background:var(--ink); padding:14px 22px; border-radius:7px; text-decoration:none; }
.cta .arr{ font-family:var(--mono); font-weight:400; }
.cta:hover{ background:#2A2D33; }
.cta.ghost{ background:transparent; color:var(--ink); border:1px solid var(--rule-strong); }
.cta.ghost:hover{ border-color:var(--ink); background:transparent; }

/* provenance mark */
.prov{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; padding:3px 7px; border:1px solid var(--open); color:var(--open); border-radius:4px; line-height:1; white-space:nowrap; }

/* ---------- product surface (no browser frame, no device mock) ---------- */
.product{ background:var(--prod-canvas); border:1px solid var(--prod-rule); border-radius:12px; overflow:hidden; box-shadow:0 1px 0 rgba(18,20,23,.03), 0 30px 60px -34px rgba(18,20,23,.28); }
.product img{ width:100%; height:auto; }
.product figcaption{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:12px 14px; font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.03em; background:var(--prod-surface); border-top:1px solid var(--prod-rule); }

/* ---------- 01 · HERO (Attio geometry) ---------- */
.hero{ padding-top:clamp(40px,6vw,72px); text-align:center; }
.hero .eyebrow{ color:var(--open); }
.hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(44px,9.5vw,86px); line-height:1.0; letter-spacing:-.015em; max-width:14ch; margin:0 auto; text-wrap:balance; }
.hero .sub{ font-size:clamp(17px,3.6vw,21px); line-height:1.5; color:var(--ink-2); max-width:56ch; margin:22px auto 0; text-wrap:balance; }
.hero .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.hero .shot{ margin:clamp(40px,7vw,64px) auto 0; max-width:1080px; text-align:left; }

/* ---------- 02 · PROBLEM → VERTEX (HighLevel matched pairs) ---------- */
.gap .lede{ font-size:clamp(32px,6.5vw,52px); max-width:22ch; }
.gap .pairs{ margin-top:clamp(32px,5vw,52px); border-top:1px solid var(--rule-strong); }
.pair{ display:grid; grid-template-columns:1fr 48px 1fr; align-items:center; gap:20px; padding:26px 0; border-bottom:1px solid var(--rule-strong); }
.pair .p-p{ display:flex; gap:14px; align-items:baseline; }
.pair .p-p .n{ font-family:var(--mono); font-size:12px; color:var(--rule-strong); flex:0 0 auto; padding-top:2px; }
.pair .p-p p{ font-size:17px; line-height:1.4; color:var(--ink); }
.pair .p-link{ font-family:var(--mono); font-size:18px; color:var(--open); text-align:center; }
.pair .p-v{ display:flex; flex-direction:column; gap:6px; padding-left:20px; border-left:2px solid var(--open); }
.pair .p-v .t{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--open); }
.pair .p-v p{ font-size:16px; color:var(--ink-2); line-height:1.45; }
@media (max-width:720px){
  .pair{ grid-template-columns:1fr; gap:12px; padding:22px 0; }
  .pair .p-link{ text-align:left; transform:rotate(90deg); }
  .pair .p-v{ padding-left:16px; }
}

/* ---------- 03 · HOW VERTEX WORKS (HighLevel three steps) ---------- */
.how .lede{ font-size:clamp(32px,6.5vw,52px); }
.how .sub{ margin-top:12px; font-family:var(--serif); font-size:clamp(20px,3vw,24px); color:var(--ink-2); font-weight:400; }
.how .steps{ margin-top:clamp(28px,4.5vw,44px); display:flex; flex-direction:column; gap:clamp(20px,3vw,32px); }
.step{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.9fr); gap:clamp(20px,3.5vw,36px); align-items:center; }
.step:nth-child(even){ grid-template-columns:minmax(0,0.9fr) minmax(0,1fr); }
.step:nth-child(even) .step-txt{ order:2; }
.step .no{ font-family:var(--mono); font-size:12px; color:var(--rule-strong); letter-spacing:.1em; }
.step h3{ font-family:var(--sans); font-weight:600; font-size:clamp(19px,2.6vw,22px); letter-spacing:-.01em; margin:6px 0 8px; }
.step .flow{ font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--open); margin:0 0 10px; }
.step p{ font-size:15.5px; color:var(--ink-2); max-width:50ch; line-height:1.45; }
.step p + p{ margin-top:8px; }
.step p b{ color:var(--ink); font-weight:600; }
.step .media{ }
.how .boundary{ margin-top:clamp(36px,5.5vw,56px); display:flex; gap:0; border:1px solid var(--rule-strong); border-radius:10px; overflow:hidden; }
.how .boundary div{ flex:1; padding:22px clamp(16px,3vw,28px); }
.how .boundary div + div{ border-left:1px solid var(--rule-strong); }
.how .boundary .b-k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--open); margin-bottom:6px; }
.how .boundary .b-t{ font-family:var(--serif); font-size:clamp(20px,3vw,24px); font-weight:500; }
.how .boundary .b-s{ font-size:14px; color:var(--ink-2); margin-top:4px; }
@media (max-width:760px){ .step, .step:nth-child(even){ grid-template-columns:1fr; } .step:nth-child(even) .step-txt{ order:0; } .how .boundary{ flex-direction:column; } .how .boundary div + div{ border-left:0; border-top:1px solid var(--rule-strong); } }

/* ---------- 04 · THE COMMERCIAL ACCOUNT (Ramp outcome-first) ---------- */
.account .lede{ font-size:clamp(32px,6.5vw,52px); max-width:20ch; }
.account .sub{ margin-top:14px; font-size:17px; color:var(--ink-2); max-width:52ch; }
.account .grid{ margin-top:clamp(32px,5vw,48px); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.stat{ background:var(--prod-surface); border:1px solid var(--prod-rule); border-radius:12px; padding:20px 20px 18px; }
.stat .n{ font-family:var(--mono); font-size:clamp(26px,3.4vw,34px); font-weight:600; letter-spacing:-.02em; line-height:1; color:var(--ink); }
.stat .t{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:9px; line-height:1.4; }
.stat .tag{ display:inline-block; margin-top:13px; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor; border-radius:4px; padding:2px 7px; }
.tag--calc{ color:var(--clinical); } .tag--rec{ color:var(--verified); } .tag--mod{ color:var(--ink-3); } .tag--ver{ color:var(--verified); }
.account .mark{ margin-top:18px; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.account .payoff{ margin-top:24px; font-family:var(--serif); font-weight:500; font-size:clamp(21px,3vw,26px); line-height:1.3; letter-spacing:-.01em; color:var(--ink); max-width:36ch; }
@media (max-width:820px){ .account .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .account .grid{ grid-template-columns:1fr 1fr; gap:10px; } .stat{ padding:16px; } .stat .n{ font-size:22px; } }

/* ---------- 05 · PROOF ---------- */
.proof .lede{ font-size:clamp(32px,6.5vw,52px); max-width:22ch; }
.proof .sub{ margin-top:14px; font-size:17px; color:var(--ink-2); max-width:56ch; }
.proof .mark{ margin-top:16px; display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.proof .cmp{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:stretch; }
.cohort{ background:var(--prod-surface); border:1px solid var(--prod-rule); border-radius:12px; padding:22px; }
.cohort .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.cohort .big{ font-family:var(--serif); font-weight:500; font-size:clamp(44px,6vw,64px); line-height:1; margin-top:12px; letter-spacing:-.01em; }
.cohort .big small{ font-family:var(--mono); font-size:.34em; color:var(--ink-3); font-weight:400; letter-spacing:0; }
.cohort .bar{ height:8px; border-radius:4px; background:var(--prod-rule); margin-top:16px; overflow:hidden; }
.cohort .bar i{ display:block; height:100%; background:var(--open); border-radius:4px; }
.cohort.held .bar i{ background:var(--rule-strong); }
.diff{ background:var(--ink); color:var(--paper); border-radius:12px; padding:22px 24px; display:flex; flex-direction:column; justify-content:center; min-width:150px; }
.diff .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#9AA0A8; }
.diff .n{ font-family:var(--serif); font-weight:500; font-size:clamp(44px,6vw,64px); line-height:1; margin-top:10px; }
.proof .claim{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.proof .claim div{ padding:18px 20px; border:1px solid var(--rule); border-radius:10px; background:var(--paper); }
.proof .claim .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.proof .claim .can .k{ color:var(--verified); }
.proof .claim .cannot .k{ color:var(--ink-3); }
.proof .claim p{ font-size:15px; color:var(--ink-2); }
.proof .support{ margin-top:28px; }
@media (max-width:820px){ .proof .cmp{ grid-template-columns:1fr 1fr; } .diff{ grid-column:1 / -1; min-width:0; } }
@media (max-width:560px){ .proof .claim{ grid-template-columns:1fr; } }

/* ---------- 06 · START ---------- */
.start{ background:var(--ink); color:var(--paper); }
.start .eyebrow{ color:#9AA0A8; }
.start .lede{ color:var(--paper); font-size:clamp(32px,6.5vw,52px); max-width:20ch; }
.start .stages{ margin-top:clamp(32px,5vw,48px); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.start .stage{ border:1px solid #34373E; border-radius:12px; padding:22px; }
.start .stage .no{ font-family:var(--mono); font-size:12px; color:#9AA0A8; letter-spacing:.1em; }
.start .stage h3{ font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin:12px 0 10px; font-weight:600; }
.start .stage p{ font-size:15px; color:#D7DADF; line-height:1.5; }
.start .stage p small{ display:block; color:#9AA0A8; font-family:var(--mono); font-size:12px; margin-bottom:6px; }
.start .actions{ margin-top:30px; }
.start .cta{ background:var(--paper); color:var(--ink); }
.start .cta:hover{ background:#E8E4DB; }
.start .trust{ margin-top:16px; font-family:var(--mono); font-size:12px; color:#9AA0A8; }
@media (max-width:760px){ .start .stages{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--rule); padding:26px var(--gut) 46px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; }
footer .fname{ font-family:var(--serif); font-size:16px; }
footer .fnote{ font-size:13px; color:var(--ink-3); }
footer .flink{ margin-left:auto; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--ink-3); }

@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } }