/* Platform-native UI typography. Apple devices use their system face;
   Windows uses Segoe UI Variable, without shipping proprietary font files. */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--sans);
  --ink: #1d1d1f;
  --muted: #6e6e73;
}
body { font-family:var(--sans); font-size:17px; line-height:1.5; letter-spacing:-.015em; text-rendering:optimizeLegibility; }
button,input,textarea,select { font-family:var(--sans); }
h1,h2,h3 { font-family:var(--sans); font-style:normal; font-weight:600; color:var(--ink); }
.hero-copy { max-width:1160px; }
.hero-copy h1 { font-size:clamp(54px,6.2vw,88px); line-height:1.045; letter-spacing:-.055em; font-weight:650; }
.headline-end { font-style:normal; color:#416daa; }
.headline-end .underline { display:none; }
.hero-copy>p { font-size:20px; line-height:1.5; letter-spacing:-.025em; color:#6e6e73; margin:25px auto 0; max-width:720px; }
.hero-copy .eyebrow { font-size:11px; line-height:1.4; font-weight:600; letter-spacing:.065em; color:#6e6e73; }
.hero-meta { font-size:12px; letter-spacing:0; color:#77777c; }
.brand { font-family:var(--sans); font-size:22px; font-weight:650; letter-spacing:-1px; }
.nav-links { font-size:12px; letter-spacing:-.01em; }
.button { font-size:14px; font-weight:500; letter-spacing:-.015em; min-height:46px; padding:12px 19px; }
.button.small { font-size:12px; min-height:36px; }
h2 { font-size:48px; line-height:1.08; letter-spacing:-.045em; font-weight:600; }
.intro h2 em { font-style:normal; font-weight:600; color:#778c85; }
.section-heading h2 { font-size:48px; }
.tag,.tile-topline,.feature-number,.price-label { font-family:var(--sans); font-size:10px; line-height:1.4; letter-spacing:.075em; font-weight:600; }
.section-lead,.section-heading>p,.pricing>div>p,.faq>div>p { font-size:17px; line-height:1.55; letter-spacing:-.018em; color:#6e6e73; }
.play-tile h3 { font-family:var(--sans); font-size:25px; font-weight:600; line-height:1.15; letter-spacing:-.035em; }
.stack-tile h3 { font-size:34px; letter-spacing:-.04em; }
.play-tile p { font-size:14px; line-height:1.5; letter-spacing:-.012em; }
.frame-controls button,.mood-controls button { font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:-.01em; }
.price { font-family:var(--sans); font-weight:600; letter-spacing:-.065em; font-variant-numeric:lining-nums; }
.price>span { font-weight:400; letter-spacing:-.015em; }
.price-card p { font-size:16px; line-height:1.5; letter-spacing:-.018em; }
.price-card small { font-size:11px; line-height:1.5; letter-spacing:0; }
.faq summary { font-family:var(--sans); font-size:16px; font-weight:500; letter-spacing:-.02em; }
.faq details p { font-size:15px; line-height:1.6; letter-spacing:-.015em; }
.closing h2 { font-size:56px; line-height:1.06; letter-spacing:-.045em; }
.closing>p { font-size:18px; letter-spacing:-.02em; }
dialog h2 { font-size:34px; line-height:1.12; letter-spacing:-.035em; }
dialog p,dialog li { font-size:14px; line-height:1.55; letter-spacing:-.01em; }
.visual-caption,.visual-facts,.footer { font-family:var(--sans); letter-spacing:-.01em; }
/* The demo's handwritten paper and image captions retain their physical character. */
.text-tool-icon { font-family:var(--sans); font-weight:600; }
@media(max-width:900px) {
  .hero-copy h1 { font-size:64px; }
  h2,.section-heading h2 { font-size:40px; }
  .hero-copy>p { font-size:18px; }
}
@media(max-width:700px) {
  .hero-copy { padding:0 21px; }
  .hero-copy h1 { font-size:clamp(36px,9.8vw,52px); line-height:1.08; letter-spacing:-.05em; }
  .hero-copy>p { font-size:17px; line-height:1.5; max-width:360px; }
  .hero-copy>p br { display:none; }
  .hero-copy .eyebrow { font-size:9px; letter-spacing:.055em; }
  .hero-meta { font-size:10px; }
  .hero-actions .button { font-size:11px; padding:11px 12px; gap:7px; }
  .nav .brand { font-size:20px; }
  .nav-links>a { font-size:10px; }
  .nav .button.small { font-size:10px; }
  h2,.section-heading h2 { font-size:34px; line-height:1.1; }
  .section-lead,.section-heading>p,.pricing>div>p,.faq>div>p { font-size:16px; }
  .play-tile h3,.stack-tile h3 { font-size:24px; }
  .closing h2 { font-size:38px; }
  .faq summary { font-size:14px; }
  dialog h2 { font-size:28px; }
}