/* type-calm-home · / onto the calm type layer (user, 2026-10-04: "fix the typography on home page and agent page based on our new style").
   Type only: family, weight, size, line height, tracking, and a text colour where contrast needed it. No layout, spacing, copy, motion or
   asset change. Loaded last (after type-calm.css, the hm-* assets and home.css). The body carries "pg-hm type-calm" but not "elv":
   calm.css restyles .btn heights, which would move this page.
   Page text (headings, ledes, captions, the two product columns, the enterprise track, the close) takes Inter, one weight (400) with light
   300 display; product UI inside the mock-ups (chat, phone, deploy window, browser, feature-card art) keeps Geist, v4's inks and its own
   weights, and mono stays Geist Mono. */
body.pg-hm{--sans-ui:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}

/* ---- product UI: back to Geist and v4's inks, with no inherited calm tracking ---- */
body.pg-hm :where(.hm-br-art,.hm-duo-tray,.hm-fg-art){
  --sans:var(--sans-ui);font-family:var(--sans);letter-spacing:normal;
  --ink:#0a0a0a;--ink-80:rgba(10,10,10,.8);--ink-60:rgba(10,10,10,.6);--ink-40:rgba(10,10,10,.42);--ink-15:rgba(10,10,10,.15);
  --ink-08:rgba(10,10,10,.08);--ink-06:rgba(10,10,10,.06);--hair:#e6e6e3}
/* type-calm's one-weight rule (body.type-calm *) outranks some of the mock-ups' own weights; give them back */
body.pg-hm .hm-bridge .hm-br-sb *{font-weight:600}
body.pg-hm .hm-duo-tray .hm-duo-pn .lg{font-weight:450}
body.pg-hm .hm-duo-col .hm-duo-n{font-weight:500}   /* the mono step number keeps its weight */
body.pg-hm :is(.hm-duo-new,.hm-duo-an,.fa5-st .on,.fp1-u b *,.fp2-h,.fp2-btn,.fp3-t,.fp3-pf,.fp4-r b *){font-weight:500}

/* ---- hero: H1 52/58 light, the second line dim in the same family; lede 17/27 ---- */
body.pg-hm .hero.home .h1{font-size:52px;line-height:58px;letter-spacing:-.032em}
body.pg-hm .hero.home .h1,body.pg-hm .hero.home .h1 *{font-weight:300}
body.pg-hm .hero.home .h1 .l2{margin-top:0;font-family:var(--sans);font-size:inherit;line-height:inherit;letter-spacing:inherit;
  font-variation-settings:normal;color:rgba(255,255,255,.55)}
body.pg-hm .hm-top .sub.hm-top-r{font-size:17px;line-height:27px;letter-spacing:-.002em;color:rgba(255,255,255,.62)}
/* the two product cards: titles light, the line under them one weight */
body.pg-hm .hm-bridge .hm-br-t{font-weight:300;letter-spacing:-.02em}

/* ---- section heads: H2 38/44 light, the dim line at 4.5:1; the paragraph beside it 16/25 ---- */
body.pg-hm .h2{font-size:38px;line-height:44px;letter-spacing:-.025em}
body.pg-hm .h2,body.pg-hm .h2 *{font-weight:300}
body.pg-hm .h2 .dim{display:block;color:var(--ink-60)}   /* its own block, so text-wrap:balance sets it without a one-word last line */
body.pg-hm .dark .h2 .dim{color:rgba(255,255,255,.55)}
body.pg-hm .hm-fg-lede,body.pg-hm .hm-en-p{font-size:16px;line-height:25px;letter-spacing:.003em}

/* ---- #how: the two product columns ---- */
body.pg-hm .hm-duo-col h3{font-weight:300;letter-spacing:-.015em}
body.pg-hm .hm-duo-col p{font-size:16px;line-height:25px;letter-spacing:.003em}

/* ---- #ai-agents / #passwordless: the card captions, one weight ---- */
body.pg-hm .hm-fg-cap h3{font-weight:400;color:var(--fg-60)}   /* was fg-45: 3.3:1 on the light cards */
body.pg-hm .hm-fg-grain-blue .hm-fg-cap h3{color:rgba(255,255,255,.72)}

/* ---- #enterprise: the track's three steps ---- */
body.pg-hm .hm-en-track h3{font-weight:300;letter-spacing:-.015em}
body.pg-hm .hm-en-track p{font-size:15px;line-height:23px;letter-spacing:.003em}

/* ---- #close ---- */
body.pg-hm #close .hm-close-h .dim{color:rgba(255,255,255,.62)}   /* home.css's value on the painted panel */

@media (max-width:1100px){
  body.pg-hm .hero.home .h1{font-size:46px;line-height:52px}
}
@media (max-width:760px){
  body.pg-hm .hero.home .h1{font-size:36px;line-height:42px;letter-spacing:-.026em}
  body.pg-hm .h2{font-size:30px;line-height:36px}
}