/* type-calm · a calmer type layer, on trial on /compare and its vendor pages (user, 2026-10-03: "both cursor and elevenlabs have a very pleasing
   font, better letter spacings and layout on the eye ... everything is very clean, not very flashy"). Scoped to body.type-calm, so rolling it out
   is adding that class to a page's <body>. Loaded before a page's own CSS; /compare's compare.css (v3) then sets its own display scale
   (light 300 headings, as ElevenLabs sets its display type).
   Measured references (2026-10-03):
     Cursor (cursor.com): one family, every style at weight 400. H1 26/32.5 -0.0125em; section H2 36/43.2 -0.02em; closing H2 72/79 -0.03em;
       H3 22/28.6 -0.005em with its description in the same size at 60% ink; body 16/24 +0.005em; nav 14/21 +0.01em. Warm ink #26251e on
       #f7f7f4, secondary text as ink at 60%/50% (no separate greys). Text measure about 580px.
     ElevenLabs (mobbin-references/_favorites/elevenlabs/*-measured.json): display Waldenburg 300 at 36/42 (H1-H3 alike); H3 Inter 18/26
       +0.01em at 400; body Inter 16/24 +0.01em; secondary text in warm greys (#777169, #a59f97).
   What we take: one family (Inter, the free kin of both, with its display optical size at large sizes), weight 400 throughout, hierarchy by
   size and tone, tracking that tightens as size grows and opens slightly below 16px, warm ink with opacity tiers, a calmer scale.
   ?font=instrument swaps the family for Instrument Sans (the runner-up), for comparison on the real page. */
body.type-calm{
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ink:#1c1b18; --ink-80:rgba(28,27,24,.82); --ink-60:rgba(28,27,24,.62); --ink-40:rgba(28,27,24,.46); --ink-15:rgba(28,27,24,.15);
  --ink-08:rgba(28,27,24,.08); --ink-06:rgba(28,27,24,.06); --hair:#ebeae6;
  --calm-dk-60:rgba(255,255,255,.62); --calm-dk-45:rgba(255,255,255,.46);
  font-optical-sizing:auto; letter-spacing:.005em;
}
html.font-alt body.type-calm{--sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
/* one weight */
body.type-calm *{font-weight:400}

/* ---- the scale ---- */
body.type-calm .h2{font-size:36px;line-height:44px;letter-spacing:-.02em}
body.type-calm .h2 .dim{color:var(--ink-40)}
body.type-calm .dark .h2 .dim,body.type-calm .h2.on-dark .dim{color:var(--calm-dk-45)}
body.type-calm .body{font-size:16px;line-height:26px;letter-spacing:.003em;color:var(--ink-60)}
body.type-calm .dark .body{color:var(--calm-dk-60)}
body.type-calm .eyebrow{font-size:14px;line-height:20px;letter-spacing:.01em}
body.type-calm .tlink{font-size:15px;line-height:22px;letter-spacing:.005em}
body.type-calm .btn{font-size:15px;letter-spacing:.005em}
body.type-calm .btn-sm{font-size:14px}
body.type-calm summary{font-size:17px;line-height:26px;letter-spacing:-.003em}
body.type-calm details p{font-size:16px;line-height:26px;letter-spacing:.003em}

/* ---- nav and footer ---- */
body.type-calm .nav-btn,body.type-calm .signin{font-size:14px;letter-spacing:.01em}
body.type-calm .mi{font-size:16px;letter-spacing:-.003em}
body.type-calm .mp-t{font-size:18px;letter-spacing:-.01em}
body.type-calm .fg h2{font-size:14px;line-height:20px;letter-spacing:.01em}
body.type-calm .fg a{letter-spacing:.005em}
body.type-calm .fllm p{letter-spacing:-.003em}
body.type-calm .fstate{letter-spacing:-.025em}

@media (max-width:760px){
  body.type-calm .h2{font-size:30px;line-height:36px;letter-spacing:-.018em}
}