/* ai.mkrst.co typography pass (2026-09-09). Loaded after sprint.css.
   One heading scale, one eyebrow style, one section-lead style, and
   placement fixes. Overlay-only: survives sync.sh. */
:root{
  --t-h2:clamp(38px,4.4vw,64px);
  --t-lead:clamp(17px,1.3vw,20px);
  --t-muted:#686868;
  --t-muted-dark:#bdbdbd;
}

/* ---- Section labels: sentence case, quiet, no tracking ---- */
.section-kicker,
.lab-top p.lab-label,
.lp-close>.lp-left,
.enquiry-shell .lab-label{
  font-size:15px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  color:var(--t-muted);
  margin:0 0 16px;
}
.lp-close>.lp-left{color:var(--t-muted-dark);padding-top:.55em}

/* ---- Header wordmark (text, like mkrst.co) ---- */
/* 2026-09-17: weight/size/smoothing matched to the mkrst.co header wordmark
   (400/15px). Was 500/18px, which reads heavier again as white-on-dark under
   macOS subpixel smoothing, hence the explicit antialiased/grayscale here. */
.campaign-header>a.wordmark{font-size:18px;font-weight:400;letter-spacing:normal;line-height:1.2;color:#fff;text-decoration:none;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.campaign-header>a.wordmark:hover{text-decoration:underline;text-underline-offset:.2em}

/* ---- Hero: heavier headline, calmer intro ---- */
.loud-hero h1{font-weight:500;margin-top:0}
.hero-under>p{font-size:clamp(18px,1.5vw,22px);line-height:1.45;max-width:52ch}

/* ---- Section headings: one size, one rhythm ---- */
.lab-top h2,
.lp-section .lead,
.process-intro h2,
.portfolio-intro h2,
.lp-section.lp-grid>h2,
.lp-close h2{
  font-size:var(--t-h2);
  line-height:1.04;
  letter-spacing:normal;
  font-weight:400;
  max-width:18ch;
  margin:0 0 24px;
}
.lp-section .lead{margin-bottom:40px}
.lp-close h2{margin-bottom:20px}
.lab-top h2{margin-top:0}

/* ---- Section leads (the sentence under a heading): one style ---- */
.lab-top>span.lab-label,
.process-intro>p:last-child,
.portfolio-intro>p:last-child,
.closing-support,
#system .lp-left p{
  font-size:var(--t-lead);
  line-height:1.5;
  letter-spacing:normal;
  text-transform:none;
  font-weight:400;
  max-width:46ch;
  color:inherit;
}
#system .lp-left p{font-weight:500;max-width:22ch}

/* Brand-workspace intro: subtitle sits under the heading, not pinned bottom-right */
.lab-top{display:block;margin-bottom:40px}
.lab-top>span.lab-label{display:block;margin:0}

/* Hero: secondary link sized to sit with the button */
.hero-demo-link{font-size:18px;text-underline-offset:.2em}

/* Enquiry modal heading joins the same scale (one step down) */
#enquiry-title{font-size:clamp(30px,3vw,40px);line-height:1.08;letter-spacing:normal;max-width:18ch;margin:0 0 16px}

@media(max-width:767px){
  :root{--t-h2:clamp(34px,9vw,40px)}
  .hero-under>p{font-size:18px}
  .campaign-header>a.wordmark{font-size:16px}
  .lab-top{margin-bottom:28px}
  .lp-close>.lp-left{padding-top:0;margin-bottom:12px}
}

/* ---- "What is AI branding?" section ---- */
.ai-branding .ai-answer{font-size:var(--t-lead);line-height:1.5;max-width:52ch}
.ai-branding p{max-width:60ch}
.ai-compare{width:100%;border-collapse:collapse;margin-top:32px;font-size:15px;line-height:1.4}
.ai-compare caption{text-align:left;color:var(--t-muted);font-size:13px;margin-bottom:12px}
.ai-compare th,.ai-compare td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-top:1px solid #d7d7d7}
.ai-compare thead th{border-top:0;color:var(--t-muted);font-weight:500;font-size:13px;padding-top:0}
.ai-compare tbody th{font-weight:500;width:22%}
.ai-branding p a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.lp-footer .lp-small{color:var(--t-muted);margin-top:8px}
@media(max-width:767px){.ai-compare{font-size:14px}.ai-compare th,.ai-compare td{padding:10px 10px 10px 0}}