/* YLT7 — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f4f1e8;
  --surface-sand: #e7e2d3;
  --surface-deep: #0e0e0a;
  --nav-glass: rgba(244,241,232,0.92);
  --ink: #14140f;
  --ink-muted: rgba(20,20,15,0.65);
  --ink-lead: rgba(20,20,15,0.65);
  --ink-subtle: rgba(20,20,15,0.55);
  --hairline: rgba(20,20,15,0.1);
  --outline: rgba(20,20,15,0.3);
  --lime: #b8ff5c;
  --on-accent: #14140f;
  --yellow: #f5e663;
  --blue: #7cc4ff;
  --rust: #b85c2e;
  --sky-la: #1b2a2e;
  --sky-hk: #14232b;
  --harbor-hk: #0e1a20;
  --sky-world: #1a1e14;
}
[data-theme="dark"] {
  --surface: #14140f;
  --surface-sand: #e7e2d3;
  --surface-deep: #0e0e0a;
  --nav-glass: rgba(244,241,232,0.92);
  --ink: #f4f1e8;
  --ink-muted: rgba(244,241,232,0.72);
  --ink-lead: rgba(244,241,232,0.75);
  --ink-subtle: rgba(244,241,232,0.6);
  --hairline: rgba(244,241,232,0.1);
  --outline: rgba(244,241,232,0.3);
}
:root {
  --space-gutter: 64px;
  --space-section: 140px;
  --space-hero-top: 160px;
  --space-cta: 88px;
  --space-56: 56px;
  --space-48: 48px;
  --space-40: 40px;
  --space-32: 32px;
  --space-28: 28px;
  --space-24: 24px;
  --space-20: 20px;
  --space-16: 16px;
  --space-12: 12px;
  --space-6: 6px;
  --radius-none: 0;
  --radius-tile: 16px;
  --radius-card: 24px;
  --radius-band: 32px;
  --skew-display: skewX(-6deg);
  --tilt-label: rotate(-1deg);
  --tilt-button-text: perspective(120px) rotateX(-10deg);
  --lift-card: translateY(-4px);
  --opacity-watermark: 0.07;
  --opacity-button-hover: 0.82;
  --opacity-link-hover: 0.65;
  --canvas: 1440px;
  --measure-hero-headline: 920px;
  --measure-hero-body: 680px;
  --measure-intro: 640px;
  --measure-cta: 560px;
  --card-image-height: 360px;
  --font-display: "Boldonse", sans-serif;
  --font-heading: "Bricolage Grotesque", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
}
/* Phone (max-width 760px): tighter spacing; every band and component reads these. */
@media (max-width: 760px) {
  :root {
    --space-gutter: 20px;
    --space-section: 72px;
    --space-hero-top: 72px;
    --space-cta: 40px;
    --space-56: 36px;
    --space-48: 32px;
    --space-40: 28px;
    --space-32: 24px;
    --space-28: 20px;
    --card-image-height: 240px;
  }
}
@container y7-phone (max-width: 760px) {
  [data-theme] {
    --space-gutter: 20px;
    --space-section: 72px;
    --space-hero-top: 72px;
    --space-cta: 40px;
    --space-56: 36px;
    --space-48: 32px;
    --space-40: 28px;
    --space-32: 24px;
    --space-28: 20px;
    --card-image-height: 240px;
  }
}
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 1.28; font-weight: 400; letter-spacing: 0.0158em; }
.display-lg { font-family: var(--font-display); font-size: 38px; line-height: 1.25; font-weight: 400; letter-spacing: 0.0158em; }
.display-cta { font-family: var(--font-display); font-size: 32px; line-height: 1.25; font-weight: 400; letter-spacing: 0.0158em; }
.display-md { font-family: var(--font-display); font-size: 30px; line-height: 1.3; font-weight: 400; letter-spacing: 0.0158em; }
.display-sm { font-family: var(--font-display); font-size: 24px; line-height: 1.3; font-weight: 400; letter-spacing: 0.0318em; }
.label { font-family: var(--font-heading); font-size: 22px; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; }
.logo { font-family: var(--font-heading); font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.body-lead { font-family: var(--font-body); font-size: 20px; line-height: 1.5; font-weight: 400; }
.body-lg { font-family: var(--font-body); font-size: 17px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-weight: 400; }
.body-sm { font-family: var(--font-body); font-size: 15px; line-height: 1.5; font-weight: 400; }
.button { font-family: var(--font-body); font-size: 18px; line-height: 1.2; font-weight: 600; }
.nav { font-family: var(--font-body); font-size: 15px; line-height: 1.2; font-weight: 500; }
.link-sm { font-family: var(--font-body); font-size: 14px; line-height: 1.4; font-weight: 600; }
.caption { font-family: var(--font-body); font-size: 14px; line-height: 1.4; font-weight: 400; }
@font-face { font-family: 'Boldonse'; src: url('fonts/Boldonse-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/BricolageGrotesque-Variable.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }