/* Single source of truth for website typography. Edit this file only.
   Font changes: update the import and --font-heading / --font-body below.
   Role scales resize headings/body/captions/buttons independently (1 = current).
   Low-level size/weight/leading/tracking tokens preserve existing responsive UI.
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Additional main-site feature and policy typography. */
  --leading-1point-1: 1.1;
  --leading-1point-25: 1.25;
  --leading-1point-35: 1.35;
  --leading-1point-6: 1.6;
  --leading-1point-75: 1.75;
  --size-46px: 46px;
  --size-52px: 52px;
  --size-64px: 64px;
  --size-70px: 70px;
  --size-clamp-36px-7vw-64px: clamp(36px, 7vw, 64px);
  --text-0f172a: var(--panel-primary);
  --text-10b981: #10b981;
  --text-1d4ed8: var(--panel-primary);
  --text-1e293b: var(--panel-primary);
  --text-1f2937: var(--panel-text);
  --text-2563eb: var(--panel-primary);
  --text-333: var(--panel-text);
  --text-374151: var(--panel-text);
  --text-3b82f6: var(--panel-primary);
  --text-4338ca: var(--panel-primary);
  --text-475569: var(--panel-text-muted);
  --text-555: var(--panel-text-muted);
  --text-5f6b7a: var(--panel-text-muted);
  --text-666: var(--panel-text-muted);
  --text-8b5cf6: var(--panel-primary);
  --text-eab308: #eab308;
  --text-ec4899: #ec4899;
  --text-f97316: #f97316;
  --text-rgba-255-255-255-0point-88: rgba(255, 255, 255, 0.88);
  --text-rgba-255-255-255-0point-9: rgba(255, 255, 255, 0.9);
  --tracking-point-08em: .08em;
  --weight-900: 900;

  --text-white-muted: rgba(255, 255, 255, 0.9);
  /* Shared palette. Text-specific shades below preserve current contrast. */
  --ink: var(--panel-text);
  --blue: var(--panel-primary);
  --cream: var(--panel-background);
  --muted: var(--panel-text-muted);
  --line: var(--panel-border);
  --text-111827: var(--panel-primary);
  --text-166534: #166534;
  --text-263c4e: var(--panel-primary);
  --text-2946d3: var(--panel-primary);
  --text-31475a: var(--panel-primary);
  --text-3152f4: var(--panel-primary);
  --text-334155: var(--panel-text);
  --text-354b5e: var(--panel-text);
  --text-355c4a: var(--panel-text);
  --text-3730a3: var(--panel-primary);
  --text-426c58: var(--panel-text-muted);
  --text-4b5563: var(--panel-text-muted);
  --text-4f46e5: var(--panel-primary);
  --text-4f6df5: var(--panel-primary);
  --text-5b6c7c: var(--panel-text-muted);
  --text-5f7eac: var(--panel-primary);
  --text-6074a0: var(--panel-text-muted);
  --text-6183b7: var(--panel-primary);
  --text-637b8f: var(--panel-text-muted);
  --text-64748b: var(--panel-text-muted);
  --text-647eae: var(--panel-primary);
  --text-657487: var(--panel-text-muted);
  --text-677e95: var(--panel-text-muted);
  --text-6a8ac8: var(--panel-primary);
  --text-6b7280: var(--panel-text-muted);
  --text-6b7e96: var(--panel-text-muted);
  --text-6d9780: var(--panel-text-muted);
  --text-6e7e93: var(--panel-text-muted);
  --text-70927e: var(--panel-text-muted);
  --text-728e9e: var(--panel-text-muted);
  --text-738496: var(--panel-text-muted);
  --text-73869a: var(--panel-text-muted);
  --text-7390bf: var(--panel-primary);
  --text-758fa1: var(--panel-text-muted);
  --text-778496: var(--panel-text-muted);
  --text-7790a3: var(--panel-text-muted);
  --text-77a286: var(--panel-text-muted);
  --text-7871c6: var(--panel-primary);
  --text-78919e: var(--panel-text-muted);
  --text-798a9a: var(--panel-text-muted);
  --text-79a58e: var(--panel-text-muted);
  --text-7a9d80: var(--panel-text-muted);
  --text-7aa88c: var(--panel-text-muted);
  --text-7b8794: var(--panel-text-muted);
  --text-7b8c9a: var(--panel-text-muted);
  --text-8090a1: var(--panel-text-muted);
  --text-8192a1: var(--panel-text-muted);
  --text-81968a: var(--panel-text-muted);
  --text-8299aa: var(--panel-text-muted);
  --text-8391a5: var(--panel-text-muted);
  --text-8394a6: var(--panel-text-muted);
  --text-8794a4: var(--panel-text-muted);
  --text-8795a5: var(--panel-text-muted);
  --text-8996a4: var(--panel-text-muted);
  --text-8a97a8: var(--panel-text-muted);
  --text-8a99a8: var(--panel-text-muted);
  --text-8b9aab: var(--panel-text-muted);
  --text-8ba1b3: var(--panel-text-muted);
  --text-8c9aa8: var(--panel-text-muted);
  --text-8c9ba6: var(--panel-text-muted);
  --text-8caee9: var(--panel-primary);
  --text-8d99a8: var(--panel-text-muted);
  --text-8da3b6: var(--panel-text-muted);
  --text-8e9ba7: var(--panel-text-muted);
  --text-91a5b5: var(--panel-text-muted);
  --text-91a9bb: var(--panel-text-muted);
  --text-94a0aa: var(--panel-text-muted);
  --text-94a0ae: var(--panel-text-muted);
  --text-94a59b: var(--panel-text-muted);
  --text-95a1af: var(--panel-text-muted);
  --text-99a7b3: var(--panel-text-muted);
  --text-9ba5af: var(--panel-text-muted);
  --text-9eacb7: var(--panel-text-muted);
  --text-9eb2c2: var(--panel-text-muted);
  --text-9fb2c0: var(--panel-text-muted);
  --text-9fd7c0: #9fd7c0;
  --text-a9bdcb: var(--panel-text-muted);
  --text-b18c71: var(--panel-text-muted);
  --text-b2c1cd: var(--panel-text-muted);
  --text-b42318: #b42318;
  --text-b5bfca: var(--panel-text-muted);
  --text-b69a7c: var(--panel-text-muted);
  --text-b8c8d5: var(--panel-text-muted);
  --text-c1cfda: var(--panel-text-muted);
  --text-dce5ec: #dce5ec;
  --text-eef3f6: #eef3f6;
  --text-f0f4f7: #f0f4f7;
  --text-f1f4ef: #f1f4ef;
  --text-f4f5ef: #f4f5ef;
  --text-f4f7fa: #f4f7fa;
  --text-f7f9fa: #f7f9fa;
  --text-fff: #fff;
  --text-ffffff: #ffffff;
  --text-white: white;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-emphasis: var(--font-heading);
  --font-caption: var(--font-body);
  --font-button: var(--font-heading);
  --font-brand: var(--font-heading);
  --heading-scale: 1;
  --body-scale: 1;
  --caption-scale: 1;
  --button-scale: 1;
  --font-size-base: 16px;
  --leading-1: 1;
  --leading-12px: 12px;
  --leading-19px: 19px;
  --leading-1point-02: 1.02;
  --leading-1point-04: 1.04;
  --leading-1point-05: 1.05;
  --leading-1point-07: 1.07;
  --leading-1point-18: 1.18;
  --leading-1point-2: 1.2;
  --leading-1point-3: 1.3;
  --leading-1point-4: 1.4;
  --leading-1point-5: 1.5;
  --leading-1point-65: 1.65;
  --leading-1point-7: 1.7;
  --leading-1point-8: 1.8;
  --leading-1point-85: 1.85;
  --leading-1point-9: 1.9;
  --size-10px: 10px;
  --size-11px: 11px;
  --size-12px: 12px;
  --size-13px: 13px;
  --size-14px: 14px;
  --size-15px: 15px;
  --size-16px: 16px;
  --size-17px: 17px;
  --size-18px: 18px;
  --size-19px: 19px;
  --size-20px: 20px;
  --size-21px: 21px;
  --size-22px: 22px;
  --size-23px: 23px;
  --size-24px: 24px;
  --size-25px: 25px;
  --size-26px: 26px;
  --size-27px: 27px;
  --size-28px: 28px;
  --size-30px: 30px;
  --size-32px: 32px;
  --size-33px: 33px;
  --size-34px: 34px;
  --size-35px: 35px;
  --size-36px: 36px;
  --size-37px: 37px;
  --size-38px: 38px;
  --size-39px: 39px;
  --size-3px: 3px;
  --size-40px: 40px;
  --size-42px: 42px;
  --size-48px: 48px;
  --size-4px: 4px;
  --size-56px: 56px;
  --size-5px: 5px;
  --size-60px: 60px;
  --size-6px: 6px;
  --size-7px: 7px;
  --size-8px: 8px;
  --size-9px: 9px;
  --size-clamp-34px-4point-5vw-64px: calc(clamp(34px,4.5vw,64px) * var(--heading-scale));
  --size-clamp-35px-4vw-59px: calc(clamp(35px,4vw,59px) * var(--heading-scale));
  --size-clamp-35px-8point-3vw-56px: calc(clamp(35px,8.3vw,56px) * var(--heading-scale));
  --size-clamp-38px-5point-2vw-76px: calc(clamp(38px,5.2vw,76px) * var(--heading-scale));
  --size-clamp-39px-4point-4vw-65px: calc(clamp(39px,4.4vw,65px) * var(--heading-scale));
  --size-clamp-43px-9vw-62px: calc(clamp(43px,9vw,62px) * var(--heading-scale));
  --size-clamp-44px-6point-2vw-86px: calc(clamp(44px,6.2vw,86px) * var(--heading-scale));
  --size-clamp-50px-6point-6vw-92px: calc(clamp(50px,6.6vw,92px) * var(--heading-scale));
  --style-italic: italic;
  --style-normal: normal;
  --tracking-0: 0;
  --tracking-1point-3px: 1.3px;
  --tracking-1point-4px: 1.4px;
  --tracking-1point-5px: 1.5px;
  --tracking-1point-6px: 1.6px;
  --tracking-1point-7px: 1.7px;
  --tracking-1px: 1px;
  --tracking-2point-2px: 2.2px;
  --tracking-2px: 2px;
  --tracking-3px: 3px;
  --tracking-minus-1point-2px: -1.2px;
  --tracking-minus-1point-5px: -1.5px;
  --tracking-minus-1point-7px: -1.7px;
  --tracking-minus-1point-8px: -1.8px;
  --tracking-minus-1px: -1px;
  --tracking-minus-2point-5px: -2.5px;
  --tracking-minus-2point-7px: -2.7px;
  --tracking-minus-2px: -2px;
  --tracking-minus-3point-5px: -3.5px;
  --tracking-minus-3px: -3px;
  --tracking-minus-5px: -5px;
  --tracking-minus-point-045em: -.045em;
  --tracking-minus-point-055em: -.055em;
  --tracking-minus-point-2px: -.2px;
  --tracking-minus-point-3px: -.3px;
  --tracking-minus-point-4px: -.4px;
  --tracking-minus-point-5px: -.5px;
  --tracking-minus-point-6px: -.6px;
  --tracking-normal: normal;
  --tracking-point-4px: .4px;
  --tracking-point-7px: .7px;
  --tracking-point-8px: .8px;
  --weight-bold: 700;
  --weight-brand: var(--weight-bold);
  --weight-extra-bold: 800;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-semibold: 600;

}

/* Defaults also cover new content and native form controls. Component CSS
   continues to choose responsive sizes from the shared tokens above. */
html { font-size: var(--font-size-base); }
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
button, input, select, textarea { font: inherit; }
button, .primary-button, .nav-cta, .text-button, .footer-demo-link {
  font-family: var(--font-button);
}
small, figcaption, caption, .scene-label, .story-sample-label,
.footer-product-label, .preview-badge { font-family: var(--font-caption); }
.brand, .brand-symbol { font-family: var(--font-brand); }

/* Explicit semantic roles for section captions and form actions. */
.why-sticky::after, .why-yanova-header > span { font-family: var(--font-caption); }
.demo-form button, .demo-close-btn { font-family: var(--font-button); }

/* Same policy as AppTypography.style: heading/button/metric roles and
   emphasized text (weight >= 600) use Poppins; regular text uses Open Sans. */
b, strong, .eyebrow { font-family: var(--font-emphasis); }