/* Shared homepage typography, also loaded by the isolated hero document.
   Scoped to marketing surfaces: Studio and the demo2 experiment stay unchanged. */
.kv-site, .cinema-hero {
  --home-display: 'Space Grotesk', Arial, sans-serif;
  --home-body: 'DM Sans', Arial, sans-serif;
  --home-heading: clamp(32px, 4vw, 60px);
  --home-card-heading: clamp(20px, 1.9vw, 24px);
  --home-body-size: clamp(15px, 1.25vw, 17px);
  --home-label-size: 14px;
  --home-caption-size: 13px;
  --home-ink: #f4f6fb;
  --home-ink-secondary: #b8c0ce;
  --home-ink-muted: #929fb3;
  --home-orange: #ff6a33;
  --home-heading-gradient: linear-gradient(100deg, var(--home-ink), #ffd6c4 35%, var(--home-orange) 88%);
  --font-display: var(--home-display);
  --font-body: var(--home-body);
}
.kv-site #sv11 .sv-title,
.kv-site #wv4 #wv4-title,
.kv-site #pv1 .ttl,
.kv-site #cv1 .ttl {
  font-family: var(--home-display);
  font-size: var(--home-heading);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
}
.kv-site #sv11 .sv-current-type {
  font-family: var(--home-display);
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.kv-site #wv4 .simple-steps h3, .kv-site #pv1 .nm {
  font-family: var(--home-display);
  font-size: var(--home-card-heading);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.kv-site #sv11 .sv-idea, .kv-site #wv4 .simple-steps p, .kv-site #cv1 .sub {
  font-family: var(--home-body);
  font-size: var(--home-body-size);
  line-height: 1.6;
  color: var(--ink-2);
}
.kv-site #sv11 .sv-category, .kv-site #sv11 .sv-description,
.kv-site #cv1 .msg, .kv-site #sv11 .sv-status {
  font-family: var(--home-body);
  font-size: var(--home-caption-size);
  line-height: 1.5;
}
.kv-site #sv11 .sv-category { color: var(--accent); }
.kv-site #sv11 .sv-description, .kv-site #cv1 .msg { color: var(--ink-3); }
.kv-site #cv1 .msg.bad { color: var(--bad); }
.kv-site #sv11 .sv-product-name, .kv-site #pv1 .for,
.kv-site #pv1 .cr, .kv-site #pv1 .mdl b, .kv-site #pv1 .inc li {
  font-family: var(--home-body);
  font-size: var(--home-label-size);
  line-height: 1.5;
}
.kv-site #pv1 .inc h3 { font-size: var(--home-label-size); }
.kv-site #pv1 .mdl span, .kv-site #pv1 .badge {
  font-family: var(--home-body);
  font-size: var(--home-caption-size);
  letter-spacing: .02em;
}
.kv-site #sv11 .sv-create, .kv-site #pv1 .go, .kv-site #cv1 .go {
  font-family: var(--home-body);
  font-size: var(--home-label-size);
  font-weight: 600;
  line-height: 1.3;
}
.kv-site .kv-top .kv-link { font-family: var(--home-body); font-size: var(--home-label-size); }
.kv-site .kv-top .kv-signin, .kv-site .kv-top .kv-open,
.kv-site .kv-foot .kv-links { font-family: var(--home-body); font-size: var(--home-caption-size); }
.kv-site #cv1 .cmp { border-color: var(--line-2); }
.kv-site #cv1 .cmp input { font-size: var(--home-label-size); }
.kv-site #cv1 .cmp input::placeholder { color: var(--ink-3); }

/* Keep the hero's fitted headline size and position; normalize its supporting copy. */
.cinema-hero { --ink: var(--home-ink); --muted: var(--home-ink-muted); --signal: var(--home-orange); }
.cinema-hero .cinema-heading h1 { font-family: var(--home-display); font-weight: 500; }
.cinema-hero .cinema-heading h1 em { background-image: var(--home-heading-gradient); }
.cinema-hero .cinema-heading p { font: 400 var(--home-body-size)/1.6 var(--home-body); color: var(--home-ink-secondary); }
.cinema-hero .entry input, .cinema-hero .entry button { font-family: var(--home-body); font-size: var(--home-label-size); }
.cinema-hero .sample { font-family: var(--home-body); font-size: var(--home-caption-size); }
.cinema-hero :is(.source-caption, .output-caption) strong,
.cinema-hero #whisper-copy, .cinema-hero .entry-feedback { font: 400 var(--home-caption-size)/1.5 var(--home-body); color: var(--home-ink-secondary); }
/* viewport.ts sets this attribute in both homepage documents. */
[data-viewport='mobile'] .kv-site, [data-viewport='mobile'] .cinema-hero { --home-heading: clamp(30px, 8vw, 38px); --home-body-size: 15px; }
[data-viewport='mobile'] .kv-site #cv1 .cmp input,
[data-viewport='mobile'] .cinema-hero .entry input { font-size: 16px; }
[data-viewport='mobile'] .cinema-hero .entry button,
[data-viewport='mobile'] .cinema-hero .sample { font-size: 12px; }
[data-viewport='mobile'] .kv-site .kv-top .kv-open { font-size: 12px; }