/* Scapium headline face: the same plain sans as the landing-page hero,
   weight 600, tight tracking. (Was Source Serif 4 until 2026-09-29.)
   One file so a heading anywhere in the product looks the same, and so a new
   page only has to link this instead of repeating a font stack. Loaded last in
   <head> on purpose: it has to win over each page's own <style> block at equal
   specificity.

   Small tracked-out labels (.section-label, .imp-h, .value-num, .marq-title,
   the eyebrows, .fm-col-head) deliberately stay on the body sans — a text serif at 11px in
   all caps reads as a mistake, not as a heading. So do the headlines inside
   the template mockups (.tpl-h, .turn-h): those stand for a customer's
   website, not for ours. */
:root{ --font-head:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif; }

h1,h2,h3,h4,
.page-title,.hero h1,.section-title,.cta-title,.home-greeting,
.brief-title,.sv-modal .brief-title,.cmp-head h2,.tpl-head h2,
.value-title,.feature-title,.quick-title,.step-title,
.team-title,.faq-title,.compare-title,.info-title,
.teaser-title,.teaser-unlock-title,.plan-name,.onb-q{
  font-family:var(--font-head);
  font-weight:600;
  letter-spacing:-0.02em;
  text-transform:none;
}

/* Anton was a heavy display face and the old sizes were tuned for it. A text
   serif at the same size reads smaller, so the two biggest ones get a nudge. */
.page-title{ font-size:34px; }
.home-greeting{ font-size:38px; }

/* One deliberate exception: the landing hero keeps the sans it always had.
   Everything else on the page is the serif — this headline is not. */
.hero-inner h1{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400; letter-spacing:-0.02em; }

/* The logo mark. Every page writes the word "Scapium" with an empty element
   in front of it; that element takes the shape of the mark (static/logo-mark.svg)
   and the colour of the word, so it is white in dark mode and dark in light
   mode without a second file. !important because several pages and the
   footer partial still carry the old pill-shaped dot in their own styles. */
.nav-logo-dot,.ft-logo span,.auth-logo .dot,.mobile-bar-dot,.brand-dot{
  display:inline-block!important;flex:none!important;
  width:1.53em!important;height:1.05em!important;border-radius:0!important;
  background:currentColor!important;
  -webkit-mask:url(/static/logo-mark.svg) center/contain no-repeat;
  mask:url(/static/logo-mark.svg) center/contain no-repeat;
}

/* Actions are pills, never underlined text (Jan, 2026-10-10). One grey fill
   that reads on both themes; links that are data — an address, a mail
   address, the business's own URL — stay links. A new text action gets
   .pill-link instead of its own underline. */
.pill-link,
.lead-lock,.gc-more,.task-clear,.wb-tp-more,.dash-foot button,.as-dlink,.glb-reset,
.fv-more,.try-link,.resend-link a,.ld2-more,.asp-cont a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:32px;padding:0 14px;border-radius:999px;border:0;
  background:var(--pill-bg,rgba(128,128,128,.14));color:var(--pill-ink,var(--text,currentColor));
  font:inherit;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease}
.pill-link:hover,
.lead-lock:hover,.gc-more:hover,.task-clear:hover,.wb-tp-more:hover,.dash-foot button:hover,.as-dlink:hover,
.glb-reset:hover,.fv-more:hover,.try-link:hover,.resend-link a:hover,.ld2-more:hover,.asp-cont a:hover{
  background:var(--pill-bg-h,rgba(128,128,128,.24));text-decoration:none;color:var(--pill-ink,var(--text,currentColor))}
.try-link{display:flex;width:max-content;margin-left:auto;margin-right:auto}