/* GENERATED by packages/design-tokens/scripts/generate.mjs from tokens.json. Do not edit. */
/* Manrope and Unbounded (SIL OFL 1.1, fonts/<family>/OFL.txt), bundled as WOFF2 and never fetched at runtime. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Manrope-Regular.2eb87f0b76.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Manrope-Medium.5487d9dcc0.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Manrope-SemiBold.da12e252f5.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Manrope-Bold.6a5c08ca1d.woff2") format("woff2");
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/Unbounded-Medium.d3461cefa3.woff2") format("woff2");
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/Unbounded-SemiBold.f7e7ee744e.woff2") format("woff2");
}

/* GENERATED by packages/design-tokens/scripts/generate.mjs from tokens.json. Do not edit. */
:root {
  color-scheme: light;
  --vpa-color-background: #F4F5F8;
  --vpa-color-surface: #FFFFFF;
  --vpa-color-surface-raised: #FFFFFF;
  --vpa-color-surface-raised-end: #F9FAFC;
  --vpa-color-surface-sunken: #ECEEF3;
  --vpa-color-surface-peek: #F9FAFC;
  --vpa-color-hairline: #0B0C1114;
  --vpa-color-outline: #0B0C1129;
  --vpa-color-track: #E1E4EA;
  --vpa-color-track-strong: #C5C9D3;
  --vpa-color-text-primary: #0B0C11;
  --vpa-color-text-secondary: #4A5063;
  --vpa-color-text-tertiary: #5F6578;
  --vpa-color-text-spoken-muted: #858B9B;
  --vpa-color-live: #1F5FD6;
  --vpa-color-live-soft: #E6EEFB;
  --vpa-color-learned: #6A4FD0;
  --vpa-color-voice-magenta: #B8479F;
  --vpa-color-attention: #B3424C;
  --vpa-color-on-attention: #FFFFFF;
  --vpa-color-attention-soft: #FBEAEA;
  --vpa-color-on-attention-soft: #8E3A40;
  --vpa-color-success: #1F7A52;
  --vpa-color-on-success: #FFFFFF;
  --vpa-color-success-soft: #E3F3EB;
  --vpa-color-on-success-soft: #145C3B;
  --vpa-color-on-light: #F4F5F8;
  --vpa-color-primary-fill: #0B0C11;
  --vpa-color-chrome-highlight: #DCE2F08C;
  --vpa-color-chrome-shade: #5A607840;
  --vpa-color-chrome-magenta: #F040BE59;
  --vpa-color-chrome-coral: #FA707180;
  --vpa-color-chrome-clash: #FA9C95B3;
  --vpa-color-chrome-violet: #675DF673;
  --vpa-color-orb-core: #D6EEFF;
  --vpa-color-orb-sky: #5CB8FF;
  --vpa-color-orb-deep: #0A1440;
  --vpa-color-aura-violet: #675DF624;
  --vpa-color-aura-blue: #1049FC0E;
  --vpa-color-aura-clear: #675DF600;
  --vpa-color-bg: #F4F5F8;
  --vpa-color-surface-muted: #ECEEF3;
  --vpa-color-surface-glass: #FFFFFFB8;
  --vpa-color-glass-border: #0B0C1114;
  --vpa-color-hairline-highlight: #FFFFFF00;
  --vpa-color-border: #E1E4EA;
  --vpa-color-border-strong: #7C8192;
  --vpa-color-text: #0B0C11;
  --vpa-color-text-muted: #4A5063;
  --vpa-color-text-subtle: #5F6578;
  --vpa-color-text-inverse: #F4F5F8;
  --vpa-color-inverse-surface: #0B0C11;
  --vpa-color-primary: #675DF6;
  --vpa-color-on-primary: #FFFFFF;
  --vpa-color-primary-text: #1F5FD6;
  --vpa-color-primary-soft: #ECEBFE;
  --vpa-color-on-primary-soft: #4338C8;
  --vpa-color-focus-ring: #1F5FD6;
  --vpa-color-accent-coral: #FA9C95;
  --vpa-color-on-accent-coral: #0B0C11;
  --vpa-color-accent-coral-text: #B3424C;
  --vpa-color-accent-sky: #9CCBFF;
  --vpa-color-on-accent-sky: #0B0C11;
  --vpa-color-gradient-blue: #1049FC;
  --vpa-color-gradient-violet: #675DF6;
  --vpa-color-gradient-magenta: #F040BE;
  --vpa-color-gradient-coral: #FA7071;
  --vpa-color-glow-violet: #675DF624;
  --vpa-color-glow-sky: #9CCBFF24;
  --vpa-color-glow-coral: #FA9C9514;
  --vpa-color-shadow: #0B0C11;
  --vpa-color-warning: #8A5A00;
  --vpa-color-on-warning: #FFFFFF;
  --vpa-color-warning-soft: #FDF1DC;
  --vpa-color-on-warning-soft: #6B4600;
  --vpa-color-danger: #B42318;
  --vpa-color-on-danger: #FFFFFF;
  --vpa-color-danger-soft: #FDEBEA;
  --vpa-color-on-danger-soft: #8C1B13;
  --vpa-color-info: #1F5FD6;
  --vpa-color-on-info: #FFFFFF;
  --vpa-color-info-soft: #E6EEFB;
  --vpa-color-on-info-soft: #17458F;
  --vpa-color-handoff: #0E6B66;
  --vpa-color-on-handoff: #FFFFFF;
  --vpa-color-handoff-soft: #DDF2EF;
  --vpa-color-on-handoff-soft: #0A4E4A;
  --vpa-color-pending: #8A3A73;
  --vpa-color-on-pending: #FFFFFF;
  --vpa-color-pending-soft: #F8E7F2;
  --vpa-color-on-pending-soft: #6A2A58;
  --vpa-color-scrim: #0B0C1166;
  --vpa-risk-low-fg: var(--vpa-color-on-info-soft);
  --vpa-risk-low-bg: var(--vpa-color-info-soft);
  --vpa-risk-low-accent: var(--vpa-color-info);
  --vpa-risk-medium-fg: var(--vpa-color-on-warning-soft);
  --vpa-risk-medium-bg: var(--vpa-color-warning-soft);
  --vpa-risk-medium-accent: var(--vpa-color-warning);
  --vpa-risk-high-fg: var(--vpa-color-on-danger-soft);
  --vpa-risk-high-bg: var(--vpa-color-danger-soft);
  --vpa-risk-high-accent: var(--vpa-color-danger);
  --vpa-action-state-pending-fg: var(--vpa-color-on-primary-soft);
  --vpa-action-state-pending-bg: var(--vpa-color-primary-soft);
  --vpa-action-state-pending-accent: var(--vpa-color-primary);
  --vpa-action-state-failed-fg: var(--vpa-color-on-danger-soft);
  --vpa-action-state-failed-bg: var(--vpa-color-danger-soft);
  --vpa-action-state-failed-accent: var(--vpa-color-danger);
  --vpa-action-state-verified-fg: var(--vpa-color-on-success-soft);
  --vpa-action-state-verified-bg: var(--vpa-color-success-soft);
  --vpa-action-state-verified-accent: var(--vpa-color-success);
  --vpa-action-state-uncertain-fg: var(--vpa-color-on-warning-soft);
  --vpa-action-state-uncertain-bg: var(--vpa-color-warning-soft);
  --vpa-action-state-uncertain-accent: var(--vpa-color-warning);
  --vpa-attention-item-fg: var(--vpa-color-on-attention-soft);
  --vpa-attention-item-bg: var(--vpa-color-attention-soft);
  --vpa-attention-item-accent: var(--vpa-color-attention);
  --vpa-capability-book-in-vaipa-fg: var(--vpa-color-on-primary-soft);
  --vpa-capability-book-in-vaipa-bg: var(--vpa-color-primary-soft);
  --vpa-capability-book-in-vaipa-accent: var(--vpa-color-primary);
  --vpa-capability-continue-with-provider-fg: var(--vpa-color-on-handoff-soft);
  --vpa-capability-continue-with-provider-bg: var(--vpa-color-handoff-soft);
  --vpa-capability-continue-with-provider-accent: var(--vpa-color-handoff);
  --vpa-capability-cart-ready-fg: var(--vpa-color-on-handoff-soft);
  --vpa-capability-cart-ready-bg: var(--vpa-color-handoff-soft);
  --vpa-capability-cart-ready-accent: var(--vpa-color-handoff);
  --vpa-capability-information-only-fg: var(--vpa-color-text-muted);
  --vpa-capability-information-only-bg: var(--vpa-color-surface-muted);
  --vpa-capability-information-only-accent: var(--vpa-color-border-strong);
  --vpa-commerce-state-pending-fg: var(--vpa-color-on-pending-soft);
  --vpa-commerce-state-pending-bg: var(--vpa-color-pending-soft);
  --vpa-commerce-state-pending-accent: var(--vpa-color-pending);
  --vpa-commerce-state-handoff-fg: var(--vpa-color-on-handoff-soft);
  --vpa-commerce-state-handoff-bg: var(--vpa-color-handoff-soft);
  --vpa-commerce-state-handoff-accent: var(--vpa-color-handoff);
  --vpa-commerce-state-confirmed-fg: var(--vpa-color-on-success-soft);
  --vpa-commerce-state-confirmed-bg: var(--vpa-color-success-soft);
  --vpa-commerce-state-confirmed-accent: var(--vpa-color-success);
  --vpa-commerce-state-mocked-fg: var(--vpa-color-text-inverse);
  --vpa-commerce-state-mocked-bg: var(--vpa-color-inverse-surface);
  --vpa-commerce-state-mocked-accent: var(--vpa-color-inverse-surface);
  --vpa-gradient-brand: linear-gradient(135deg, var(--vpa-color-gradient-blue) 0%, var(--vpa-color-gradient-violet) 38%, var(--vpa-color-gradient-magenta) 72%, var(--vpa-color-gradient-coral) 100%);
  --vpa-gradient-primary: linear-gradient(135deg, var(--vpa-color-gradient-blue) 0%, var(--vpa-color-gradient-violet) 100%);
  --vpa-gradient-accent: linear-gradient(135deg, var(--vpa-color-gradient-violet) 0%, var(--vpa-color-gradient-coral) 100%);
  --vpa-gradient-progress: linear-gradient(90deg, var(--vpa-color-gradient-blue) 0%, var(--vpa-color-gradient-violet) 100%);
  --vpa-gradient-brand-ring: conic-gradient(from 200deg, var(--vpa-color-gradient-blue) 0%, var(--vpa-color-gradient-violet) 25%, var(--vpa-color-gradient-magenta) 50%, var(--vpa-color-gradient-coral) 75%, var(--vpa-color-gradient-blue) 100%);
  --vpa-gradient-chrome-edge: linear-gradient(150deg, var(--vpa-color-chrome-highlight) 0%, var(--vpa-color-chrome-shade) 35%, var(--vpa-color-chrome-magenta) 80%, var(--vpa-color-chrome-coral) 100%);
  --vpa-gradient-chrome-clash: linear-gradient(150deg, var(--vpa-color-chrome-clash) 0%, var(--vpa-color-chrome-shade) 50%, var(--vpa-color-chrome-magenta) 100%);
  --vpa-gradient-chrome-live: linear-gradient(150deg, var(--vpa-color-chrome-highlight) 0%, var(--vpa-color-chrome-shade) 40%, var(--vpa-color-chrome-violet) 100%);
  --vpa-gradient-raised: linear-gradient(180deg, var(--vpa-color-surface-raised) 0%, var(--vpa-color-surface-raised-end) 100%);
  --vpa-gradient-ai-orb: radial-gradient(circle at 38% 32%, var(--vpa-color-orb-core) 0%, var(--vpa-color-orb-sky) 18%, var(--vpa-color-gradient-blue) 55%, var(--vpa-color-orb-deep) 90%);
  --vpa-gradient-aura: radial-gradient(circle at 50% 50%, var(--vpa-color-aura-violet) 0%, var(--vpa-color-aura-blue) 45%, var(--vpa-color-aura-clear) 100%);
  --vpa-font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vpa-font-display: "Unbounded", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vpa-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --vpa-font-weight-regular: 400;
  --vpa-font-weight-medium: 500;
  --vpa-font-weight-semibold: 600;
  --vpa-font-weight-bold: 700;
  --vpa-text-spoken-hero-family: var(--vpa-font-display);
  --vpa-text-spoken-hero-size: 24px;
  --vpa-text-spoken-hero-line-height: 33px;
  --vpa-text-spoken-hero-weight: 500;
  --vpa-text-spoken-hero-tracking: -0.4px;
  --vpa-text-screen-title-family: var(--vpa-font-display);
  --vpa-text-screen-title-size: 22px;
  --vpa-text-screen-title-line-height: 28px;
  --vpa-text-screen-title-weight: 500;
  --vpa-text-screen-title-tracking: -0.3px;
  --vpa-text-spoken-family: var(--vpa-font-display);
  --vpa-text-spoken-size: 21px;
  --vpa-text-spoken-line-height: 30px;
  --vpa-text-spoken-weight: 500;
  --vpa-text-spoken-tracking: 0;
  --vpa-text-wordmark-family: var(--vpa-font-display);
  --vpa-text-wordmark-size: 13px;
  --vpa-text-wordmark-line-height: 16px;
  --vpa-text-wordmark-weight: 600;
  --vpa-text-wordmark-tracking: 3px;
  --vpa-text-wordmark-transform: uppercase;
  --vpa-text-card-title-family: var(--vpa-font-sans);
  --vpa-text-card-title-size: 19px;
  --vpa-text-card-title-line-height: 25px;
  --vpa-text-card-title-weight: 600;
  --vpa-text-card-title-tracking: 0;
  --vpa-text-body-strong-family: var(--vpa-font-sans);
  --vpa-text-body-strong-size: 15px;
  --vpa-text-body-strong-line-height: 22px;
  --vpa-text-body-strong-weight: 600;
  --vpa-text-body-strong-tracking: 0;
  --vpa-text-body-family: var(--vpa-font-sans);
  --vpa-text-body-size: 14px;
  --vpa-text-body-line-height: 20px;
  --vpa-text-body-weight: 400;
  --vpa-text-body-tracking: 0;
  --vpa-text-caption-family: var(--vpa-font-sans);
  --vpa-text-caption-size: 12px;
  --vpa-text-caption-line-height: 16px;
  --vpa-text-caption-weight: 500;
  --vpa-text-caption-tracking: 0;
  --vpa-text-tag-family: var(--vpa-font-sans);
  --vpa-text-tag-size: 11px;
  --vpa-text-tag-line-height: 14px;
  --vpa-text-tag-weight: 700;
  --vpa-text-tag-tracking: 1.6px;
  --vpa-text-tag-transform: uppercase;
  --vpa-text-display-hero-family: var(--vpa-font-display);
  --vpa-text-display-hero-size: 28px;
  --vpa-text-display-hero-line-height: 36px;
  --vpa-text-display-hero-weight: 500;
  --vpa-text-display-hero-tracking: -0.5px;
  --vpa-text-display-family: var(--vpa-font-display);
  --vpa-text-display-size: 24px;
  --vpa-text-display-line-height: 33px;
  --vpa-text-display-weight: 500;
  --vpa-text-display-tracking: -0.4px;
  --vpa-text-title-family: var(--vpa-font-display);
  --vpa-text-title-size: 22px;
  --vpa-text-title-line-height: 28px;
  --vpa-text-title-weight: 500;
  --vpa-text-title-tracking: -0.3px;
  --vpa-text-headline-family: var(--vpa-font-sans);
  --vpa-text-headline-size: 19px;
  --vpa-text-headline-line-height: 25px;
  --vpa-text-headline-weight: 600;
  --vpa-text-headline-tracking: 0;
  --vpa-text-body-large-family: var(--vpa-font-sans);
  --vpa-text-body-large-size: 16px;
  --vpa-text-body-large-line-height: 24px;
  --vpa-text-body-large-weight: 400;
  --vpa-text-body-large-tracking: 0;
  --vpa-text-body-small-family: var(--vpa-font-sans);
  --vpa-text-body-small-size: 13px;
  --vpa-text-body-small-line-height: 18px;
  --vpa-text-body-small-weight: 400;
  --vpa-text-body-small-tracking: 0;
  --vpa-text-label-family: var(--vpa-font-sans);
  --vpa-text-label-size: 15px;
  --vpa-text-label-line-height: 20px;
  --vpa-text-label-weight: 600;
  --vpa-text-label-tracking: 0;
  --vpa-text-overline-family: var(--vpa-font-sans);
  --vpa-text-overline-size: 11px;
  --vpa-text-overline-line-height: 14px;
  --vpa-text-overline-weight: 700;
  --vpa-text-overline-tracking: 1.6px;
  --vpa-text-overline-transform: uppercase;
  --vpa-space-0: 0;
  --vpa-space-1: 4px;
  --vpa-space-2: 8px;
  --vpa-space-3: 12px;
  --vpa-space-4: 16px;
  --vpa-space-5: 20px;
  --vpa-space-6: 24px;
  --vpa-space-7: 28px;
  --vpa-space-8: 32px;
  --vpa-space-9: 36px;
  --vpa-space-10: 40px;
  --vpa-space-12: 48px;
  --vpa-space-14: 56px;
  --vpa-space-16: 64px;
  --vpa-space-18: 72px;
  --vpa-space-gutter: 24px;
  --vpa-space-gutter-wide: 24px;
  --vpa-space-card-inset: 20px;
  --vpa-radius-none: 0;
  --vpa-radius-sm: 8px;
  --vpa-radius-md: 12px;
  --vpa-radius-lg: 16px;
  --vpa-radius-xl: 24px;
  --vpa-radius-pill: 999px;
  --vpa-radius-control: 14px;
  --vpa-radius-chip: 14px;
  --vpa-radius-input: 14px;
  --vpa-radius-row: 16px;
  --vpa-radius-card: 16px;
  --vpa-radius-proposal: 22px;
  --vpa-radius-decision: 24px;
  --vpa-radius-sheet: 24px;
  --vpa-size-touch-target: 44px;
  --vpa-size-icon-sm: 16px;
  --vpa-size-icon-md: 20px;
  --vpa-size-icon-lg: 24px;
  --vpa-size-icon-xl: 32px;
  --vpa-size-focus-ring-width: 2px;
  --vpa-size-content-max-width: 720px;
  --vpa-size-button-height: 48px;
  --vpa-size-button-height-compact: 44px;
  --vpa-size-voice-pill: 60px;
  --vpa-size-orb: 44px;
  --vpa-size-listening-orb: 84px;
  --vpa-size-confidence-ring: 44px;
  --vpa-size-mascot-home: 132px;
  --vpa-size-mascot-assistant: 172px;
  --vpa-size-mascot-meet: 210px;
  --vpa-size-mascot-inline: 44px;
  --vpa-size-nav-bar-height: 44px;
  --vpa-size-avatar-md: 44px;
  --vpa-size-blur-glass: 24px;
  --vpa-size-blur-glow: 96px;
  --vpa-elevation-0: none;
  --vpa-elevation-1: 0 1px 3px 0 rgba(11, 12, 17, 0.06);
  --vpa-elevation-2: 0 8px 24px 0 rgba(11, 12, 17, 0.08);
  --vpa-elevation-3: 0 16px 40px 0 rgba(11, 12, 17, 0.12);
  --vpa-duration-instant: 0ms;
  --vpa-duration-fast: 180ms;
  --vpa-duration-base: 280ms;
  --vpa-duration-slow: 450ms;
  --vpa-duration-micro: 180ms;
  --vpa-duration-transition: 280ms;
  --vpa-duration-hero: 450ms;
  --vpa-duration-breath: 6000ms;
  --vpa-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --vpa-easing-enter: cubic-bezier(0, 0, 0, 1);
  --vpa-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --vpa-easing-ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --vpa-easing-ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
}

[data-theme="dark"] {
  color-scheme: dark;
  --vpa-color-background: #0B0C11;
  --vpa-color-surface: #14161E;
  --vpa-color-surface-raised: #1E2230;
  --vpa-color-surface-raised-end: #151823;
  --vpa-color-surface-sunken: #10121A;
  --vpa-color-surface-peek: #181B25;
  --vpa-color-hairline: #FFFFFF0F;
  --vpa-color-outline: #FFFFFF24;
  --vpa-color-track: #23262F;
  --vpa-color-track-strong: #3A3E4C;
  --vpa-color-text-primary: #EDEFF5;
  --vpa-color-text-secondary: #A9AEBE;
  --vpa-color-text-tertiary: #8A90A2;
  --vpa-color-text-spoken-muted: #5A5F70;
  --vpa-color-live: #9CCBFF;
  --vpa-color-live-soft: #1C232E;
  --vpa-color-learned: #B9A6FF;
  --vpa-color-voice-magenta: #E7A0DA;
  --vpa-color-attention: #FA9C95;
  --vpa-color-on-attention: #0B0C11;
  --vpa-color-attention-soft: #2C1E22;
  --vpa-color-on-attention-soft: #FBC4C2;
  --vpa-color-success: #7FE0B5;
  --vpa-color-on-success: #0B0C11;
  --vpa-color-success-soft: #1C2C2A;
  --vpa-color-on-success-soft: #A8EBCB;
  --vpa-color-on-light: #0B0C11;
  --vpa-color-primary-fill: #EDEFF5;
  --vpa-color-chrome-highlight: #DCE2F08C;
  --vpa-color-chrome-shade: #5A607840;
  --vpa-color-chrome-magenta: #F040BE59;
  --vpa-color-chrome-coral: #FA707180;
  --vpa-color-chrome-clash: #FA9C95B3;
  --vpa-color-chrome-violet: #675DF673;
  --vpa-color-orb-core: #D6EEFF;
  --vpa-color-orb-sky: #5CB8FF;
  --vpa-color-orb-deep: #0A1440;
  --vpa-color-aura-violet: #675DF659;
  --vpa-color-aura-blue: #1049FC24;
  --vpa-color-aura-clear: #675DF600;
  --vpa-color-bg: #0B0C11;
  --vpa-color-surface-muted: #181B25;
  --vpa-color-surface-glass: #14161EB3;
  --vpa-color-glass-border: #FFFFFF14;
  --vpa-color-hairline-highlight: #FFFFFF0F;
  --vpa-color-border: #23262F;
  --vpa-color-border-strong: #6E7385;
  --vpa-color-text: #EDEFF5;
  --vpa-color-text-muted: #A9AEBE;
  --vpa-color-text-subtle: #8A90A2;
  --vpa-color-text-inverse: #0B0C11;
  --vpa-color-inverse-surface: #EDEFF5;
  --vpa-color-primary: #7C73F8;
  --vpa-color-on-primary: #0B0C11;
  --vpa-color-primary-text: #9CCBFF;
  --vpa-color-primary-soft: #1F1E36;
  --vpa-color-on-primary-soft: #CFCBFD;
  --vpa-color-focus-ring: #9CCBFF;
  --vpa-color-accent-coral: #FA9C95;
  --vpa-color-on-accent-coral: #0B0C11;
  --vpa-color-accent-coral-text: #FA9C95;
  --vpa-color-accent-sky: #9CCBFF;
  --vpa-color-on-accent-sky: #0B0C11;
  --vpa-color-gradient-blue: #1049FC;
  --vpa-color-gradient-violet: #675DF6;
  --vpa-color-gradient-magenta: #F040BE;
  --vpa-color-gradient-coral: #FA7071;
  --vpa-color-glow-violet: #675DF647;
  --vpa-color-glow-sky: #9CCBFF14;
  --vpa-color-glow-coral: #FA9C951A;
  --vpa-color-shadow: #000000;
  --vpa-color-warning: #F0B849;
  --vpa-color-on-warning: #2B1D00;
  --vpa-color-warning-soft: #2E2819;
  --vpa-color-on-warning-soft: #F6D38E;
  --vpa-color-danger: #F28B82;
  --vpa-color-on-danger: #3A0B07;
  --vpa-color-danger-soft: #2E1C1F;
  --vpa-color-on-danger-soft: #F8BDB7;
  --vpa-color-info: #9CCBFF;
  --vpa-color-on-info: #0B0C11;
  --vpa-color-info-soft: #1C232E;
  --vpa-color-on-info-soft: #C4E0FE;
  --vpa-color-handoff: #5CCFC4;
  --vpa-color-on-handoff: #062624;
  --vpa-color-handoff-soft: #15282B;
  --vpa-color-on-handoff-soft: #A6E8E1;
  --vpa-color-pending: #E3A2D2;
  --vpa-color-on-pending: #33102A;
  --vpa-color-pending-soft: #2A1D2B;
  --vpa-color-on-pending-soft: #F0C8E5;
  --vpa-color-scrim: #000000A3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --vpa-color-background: #0B0C11;
    --vpa-color-surface: #14161E;
    --vpa-color-surface-raised: #1E2230;
    --vpa-color-surface-raised-end: #151823;
    --vpa-color-surface-sunken: #10121A;
    --vpa-color-surface-peek: #181B25;
    --vpa-color-hairline: #FFFFFF0F;
    --vpa-color-outline: #FFFFFF24;
    --vpa-color-track: #23262F;
    --vpa-color-track-strong: #3A3E4C;
    --vpa-color-text-primary: #EDEFF5;
    --vpa-color-text-secondary: #A9AEBE;
    --vpa-color-text-tertiary: #8A90A2;
    --vpa-color-text-spoken-muted: #5A5F70;
    --vpa-color-live: #9CCBFF;
    --vpa-color-live-soft: #1C232E;
    --vpa-color-learned: #B9A6FF;
    --vpa-color-voice-magenta: #E7A0DA;
    --vpa-color-attention: #FA9C95;
    --vpa-color-on-attention: #0B0C11;
    --vpa-color-attention-soft: #2C1E22;
    --vpa-color-on-attention-soft: #FBC4C2;
    --vpa-color-success: #7FE0B5;
    --vpa-color-on-success: #0B0C11;
    --vpa-color-success-soft: #1C2C2A;
    --vpa-color-on-success-soft: #A8EBCB;
    --vpa-color-on-light: #0B0C11;
    --vpa-color-primary-fill: #EDEFF5;
    --vpa-color-chrome-highlight: #DCE2F08C;
    --vpa-color-chrome-shade: #5A607840;
    --vpa-color-chrome-magenta: #F040BE59;
    --vpa-color-chrome-coral: #FA707180;
    --vpa-color-chrome-clash: #FA9C95B3;
    --vpa-color-chrome-violet: #675DF673;
    --vpa-color-orb-core: #D6EEFF;
    --vpa-color-orb-sky: #5CB8FF;
    --vpa-color-orb-deep: #0A1440;
    --vpa-color-aura-violet: #675DF659;
    --vpa-color-aura-blue: #1049FC24;
    --vpa-color-aura-clear: #675DF600;
    --vpa-color-bg: #0B0C11;
    --vpa-color-surface-muted: #181B25;
    --vpa-color-surface-glass: #14161EB3;
    --vpa-color-glass-border: #FFFFFF14;
    --vpa-color-hairline-highlight: #FFFFFF0F;
    --vpa-color-border: #23262F;
    --vpa-color-border-strong: #6E7385;
    --vpa-color-text: #EDEFF5;
    --vpa-color-text-muted: #A9AEBE;
    --vpa-color-text-subtle: #8A90A2;
    --vpa-color-text-inverse: #0B0C11;
    --vpa-color-inverse-surface: #EDEFF5;
    --vpa-color-primary: #7C73F8;
    --vpa-color-on-primary: #0B0C11;
    --vpa-color-primary-text: #9CCBFF;
    --vpa-color-primary-soft: #1F1E36;
    --vpa-color-on-primary-soft: #CFCBFD;
    --vpa-color-focus-ring: #9CCBFF;
    --vpa-color-accent-coral: #FA9C95;
    --vpa-color-on-accent-coral: #0B0C11;
    --vpa-color-accent-coral-text: #FA9C95;
    --vpa-color-accent-sky: #9CCBFF;
    --vpa-color-on-accent-sky: #0B0C11;
    --vpa-color-gradient-blue: #1049FC;
    --vpa-color-gradient-violet: #675DF6;
    --vpa-color-gradient-magenta: #F040BE;
    --vpa-color-gradient-coral: #FA7071;
    --vpa-color-glow-violet: #675DF647;
    --vpa-color-glow-sky: #9CCBFF14;
    --vpa-color-glow-coral: #FA9C951A;
    --vpa-color-shadow: #000000;
    --vpa-color-warning: #F0B849;
    --vpa-color-on-warning: #2B1D00;
    --vpa-color-warning-soft: #2E2819;
    --vpa-color-on-warning-soft: #F6D38E;
    --vpa-color-danger: #F28B82;
    --vpa-color-on-danger: #3A0B07;
    --vpa-color-danger-soft: #2E1C1F;
    --vpa-color-on-danger-soft: #F8BDB7;
    --vpa-color-info: #9CCBFF;
    --vpa-color-on-info: #0B0C11;
    --vpa-color-info-soft: #1C232E;
    --vpa-color-on-info-soft: #C4E0FE;
    --vpa-color-handoff: #5CCFC4;
    --vpa-color-on-handoff: #062624;
    --vpa-color-handoff-soft: #15282B;
    --vpa-color-on-handoff-soft: #A6E8E1;
    --vpa-color-pending: #E3A2D2;
    --vpa-color-on-pending: #33102A;
    --vpa-color-pending-soft: #2A1D2B;
    --vpa-color-on-pending-soft: #F0C8E5;
    --vpa-color-scrim: #000000A3;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vpa-duration-instant: 0ms;
    --vpa-duration-fast: 0ms;
    --vpa-duration-base: 0ms;
    --vpa-duration-slow: 0ms;
    --vpa-duration-micro: 0ms;
    --vpa-duration-transition: 0ms;
    --vpa-duration-hero: 0ms;
    --vpa-duration-breath: 0ms;
  }
}

/* GENERATED by packages/design-tokens/scripts/generate.mjs from tokens.json. Do not edit. */
/* One class per type style (VISUAL_LANGUAGE §3). In the components layer, so Tailwind utilities (colour, weight) still win. */
@layer components {
  .vpa-text-spoken-hero {
    font-family: var(--vpa-text-spoken-hero-family);
    font-size: var(--vpa-text-spoken-hero-size);
    line-height: var(--vpa-text-spoken-hero-line-height);
    font-weight: var(--vpa-text-spoken-hero-weight);
    letter-spacing: var(--vpa-text-spoken-hero-tracking);
  }
  .vpa-text-screen-title {
    font-family: var(--vpa-text-screen-title-family);
    font-size: var(--vpa-text-screen-title-size);
    line-height: var(--vpa-text-screen-title-line-height);
    font-weight: var(--vpa-text-screen-title-weight);
    letter-spacing: var(--vpa-text-screen-title-tracking);
  }
  .vpa-text-spoken {
    font-family: var(--vpa-text-spoken-family);
    font-size: var(--vpa-text-spoken-size);
    line-height: var(--vpa-text-spoken-line-height);
    font-weight: var(--vpa-text-spoken-weight);
    letter-spacing: var(--vpa-text-spoken-tracking);
  }
  .vpa-text-wordmark {
    font-family: var(--vpa-text-wordmark-family);
    font-size: var(--vpa-text-wordmark-size);
    line-height: var(--vpa-text-wordmark-line-height);
    font-weight: var(--vpa-text-wordmark-weight);
    letter-spacing: var(--vpa-text-wordmark-tracking);
    text-transform: var(--vpa-text-wordmark-transform);
  }
  .vpa-text-card-title {
    font-family: var(--vpa-text-card-title-family);
    font-size: var(--vpa-text-card-title-size);
    line-height: var(--vpa-text-card-title-line-height);
    font-weight: var(--vpa-text-card-title-weight);
    letter-spacing: var(--vpa-text-card-title-tracking);
  }
  .vpa-text-body-strong {
    font-family: var(--vpa-text-body-strong-family);
    font-size: var(--vpa-text-body-strong-size);
    line-height: var(--vpa-text-body-strong-line-height);
    font-weight: var(--vpa-text-body-strong-weight);
    letter-spacing: var(--vpa-text-body-strong-tracking);
  }
  .vpa-text-body {
    font-family: var(--vpa-text-body-family);
    font-size: var(--vpa-text-body-size);
    line-height: var(--vpa-text-body-line-height);
    font-weight: var(--vpa-text-body-weight);
    letter-spacing: var(--vpa-text-body-tracking);
  }
  .vpa-text-caption {
    font-family: var(--vpa-text-caption-family);
    font-size: var(--vpa-text-caption-size);
    line-height: var(--vpa-text-caption-line-height);
    font-weight: var(--vpa-text-caption-weight);
    letter-spacing: var(--vpa-text-caption-tracking);
  }
  .vpa-text-tag {
    font-family: var(--vpa-text-tag-family);
    font-size: var(--vpa-text-tag-size);
    line-height: var(--vpa-text-tag-line-height);
    font-weight: var(--vpa-text-tag-weight);
    letter-spacing: var(--vpa-text-tag-tracking);
    text-transform: var(--vpa-text-tag-transform);
  }
  .vpa-text-display-hero {
    font-family: var(--vpa-text-display-hero-family);
    font-size: var(--vpa-text-display-hero-size);
    line-height: var(--vpa-text-display-hero-line-height);
    font-weight: var(--vpa-text-display-hero-weight);
    letter-spacing: var(--vpa-text-display-hero-tracking);
  }
  .vpa-text-display {
    font-family: var(--vpa-text-display-family);
    font-size: var(--vpa-text-display-size);
    line-height: var(--vpa-text-display-line-height);
    font-weight: var(--vpa-text-display-weight);
    letter-spacing: var(--vpa-text-display-tracking);
  }
  .vpa-text-title {
    font-family: var(--vpa-text-title-family);
    font-size: var(--vpa-text-title-size);
    line-height: var(--vpa-text-title-line-height);
    font-weight: var(--vpa-text-title-weight);
    letter-spacing: var(--vpa-text-title-tracking);
  }
  .vpa-text-headline {
    font-family: var(--vpa-text-headline-family);
    font-size: var(--vpa-text-headline-size);
    line-height: var(--vpa-text-headline-line-height);
    font-weight: var(--vpa-text-headline-weight);
    letter-spacing: var(--vpa-text-headline-tracking);
  }
  .vpa-text-body-large {
    font-family: var(--vpa-text-body-large-family);
    font-size: var(--vpa-text-body-large-size);
    line-height: var(--vpa-text-body-large-line-height);
    font-weight: var(--vpa-text-body-large-weight);
    letter-spacing: var(--vpa-text-body-large-tracking);
  }
  .vpa-text-body-small {
    font-family: var(--vpa-text-body-small-family);
    font-size: var(--vpa-text-body-small-size);
    line-height: var(--vpa-text-body-small-line-height);
    font-weight: var(--vpa-text-body-small-weight);
    letter-spacing: var(--vpa-text-body-small-tracking);
  }
  .vpa-text-label {
    font-family: var(--vpa-text-label-family);
    font-size: var(--vpa-text-label-size);
    line-height: var(--vpa-text-label-line-height);
    font-weight: var(--vpa-text-label-weight);
    letter-spacing: var(--vpa-text-label-tracking);
  }
  .vpa-text-overline {
    font-family: var(--vpa-text-overline-family);
    font-size: var(--vpa-text-overline-size);
    line-height: var(--vpa-text-overline-line-height);
    font-weight: var(--vpa-text-overline-weight);
    letter-spacing: var(--vpa-text-overline-tracking);
    text-transform: var(--vpa-text-overline-transform);
  }
  .vpa-tabular {
    font-variant-numeric: tabular-nums;
  }
}

/* VAIPA marketing site, The Core (Docs/design/VISUAL_LANGUAGE.md v2).
   Colours, type, spacing, radii and motion come only from packages/design-tokens (generated tokens.css, bundled
   before this file). The build fails on a raw colour here. Display sizes scale up from the type tokens for large
   screens; nothing else is invented. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--vpa-size-touch-target) + var(--vpa-space-8));
}

body {
  margin: 0;
  background: var(--vpa-color-background);
  color: var(--vpa-color-text-primary);
  font-family: var(--vpa-font-sans);
  font-size: var(--vpa-text-body-large-size);
  line-height: var(--vpa-text-body-large-line-height);
  font-weight: var(--vpa-font-weight-regular);
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--vpa-color-live);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--vpa-size-focus-ring-width) solid var(--vpa-color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--vpa-radius-sm);
}

main:focus {
  outline: none;
}

h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--vpa-space-4);
}

@media (min-width: 600px) {
  .wrap {
    padding-inline: var(--vpa-space-gutter);
  }
}

.muted {
  color: var(--vpa-color-text-secondary);
}

.small {
  font-size: var(--vpa-text-body-small-size);
  line-height: var(--vpa-text-body-small-line-height);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--vpa-space-4);
  top: calc(-1 * var(--vpa-space-16));
  z-index: 10;
  padding: var(--vpa-space-3) var(--vpa-space-4);
  background: var(--vpa-color-primary-fill);
  color: var(--vpa-color-on-light);
  border-radius: var(--vpa-radius-control);
  font-weight: var(--vpa-font-weight-semibold);
}

.skip-link:focus {
  top: var(--vpa-space-3);
}

/* Icons: stroke line icons in currentColor. */
.icon {
  width: var(--vpa-size-icon-lg);
  height: var(--vpa-size-icon-lg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.icon .fill {
  fill: currentColor;
  stroke: none;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--vpa-color-surface-glass);
  -webkit-backdrop-filter: blur(var(--vpa-size-blur-glass));
  backdrop-filter: blur(var(--vpa-size-blur-glass));
  border-bottom: 1px solid var(--vpa-color-hairline);
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vpa-space-2) var(--vpa-space-6);
  min-height: calc(var(--vpa-size-touch-target) + var(--vpa-space-4));
  padding-block: var(--vpa-space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--vpa-space-3);
  min-height: var(--vpa-size-touch-target);
  color: var(--vpa-color-text-primary);
  text-decoration: none;
}

/* The V mark's navy lower stroke needs a light ground (VISUAL_LANGUAGE §6), so it sits on a light tile in both themes. */
.mark-tile {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--vpa-radius-md);
  background: var(--vpa-color-surface);
  border: 1px solid var(--vpa-color-hairline);
}

[data-theme="dark"] .mark-tile {
  background: var(--vpa-color-inverse-surface);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark-tile {
    background: var(--vpa-color-inverse-surface);
  }
}

.site-nav {
  margin-inline-start: auto;
}

.site-nav ul {
  display: flex;
  gap: var(--vpa-space-1);
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--vpa-size-touch-target);
  padding-inline: var(--vpa-space-3);
  color: var(--vpa-color-text-secondary);
  font-weight: var(--vpa-font-weight-medium);
  text-decoration: none;
  border-radius: var(--vpa-radius-control);
}

.site-nav a:hover {
  color: var(--vpa-color-text-primary);
}

.site-nav a[aria-current="page"] {
  color: var(--vpa-color-text-primary);
  font-weight: var(--vpa-font-weight-bold);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--vpa-space-2);
  min-height: var(--vpa-size-touch-target);
  min-width: var(--vpa-size-touch-target);
  justify-content: center;
  padding-inline: var(--vpa-space-3);
  background: transparent;
  color: var(--vpa-color-text-secondary);
  border: 1px solid var(--vpa-color-outline);
  border-radius: var(--vpa-radius-pill);
  font: inherit;
  font-size: var(--vpa-text-body-small-size);
  cursor: pointer;
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover {
  color: var(--vpa-color-text-primary);
}

.theme-toggle .icon {
  width: var(--vpa-size-icon-md);
  height: var(--vpa-size-icon-md);
}

@media (max-width: 719px) {
  .header-row {
    justify-content: space-between;
  }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    margin-inline: calc(-1 * var(--vpa-space-3));
  }
  .theme-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .theme-toggle {
    padding-inline: 0;
  }
}

/* ---------------------------------------------------------------- type */

.display {
  font-family: var(--vpa-font-display);
  font-weight: var(--vpa-text-display-hero-weight);
  font-size: clamp(var(--vpa-text-display-hero-size), 5.2vw, calc(var(--vpa-text-display-hero-size) * 2));
  line-height: 1.14;
  letter-spacing: var(--vpa-text-display-hero-tracking);
  text-wrap: balance;
}

.section-title {
  font-family: var(--vpa-font-display);
  font-weight: var(--vpa-text-screen-title-weight);
  font-size: clamp(var(--vpa-text-screen-title-size), 3.4vw, calc(var(--vpa-text-screen-title-size) * 1.6));
  line-height: 1.2;
  letter-spacing: var(--vpa-text-screen-title-tracking);
  text-wrap: balance;
}

.lede {
  font-size: calc(var(--vpa-text-body-large-size) * 1.125);
  line-height: 1.6;
  color: var(--vpa-color-text-secondary);
  max-width: 62ch;
}

.card-title {
  font-family: var(--vpa-text-card-title-family);
  font-size: var(--vpa-text-card-title-size);
  line-height: var(--vpa-text-card-title-line-height);
  font-weight: var(--vpa-text-card-title-weight);
}

.overline {
  display: block;
  font-size: var(--vpa-text-overline-size);
  line-height: var(--vpa-text-overline-line-height);
  font-weight: var(--vpa-text-overline-weight);
  letter-spacing: var(--vpa-text-overline-tracking);
  text-transform: uppercase;
  color: var(--vpa-color-live);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--vpa-space-1);
  padding: var(--vpa-space-1) var(--vpa-space-2);
  border-radius: var(--vpa-radius-pill);
  font-size: var(--vpa-text-tag-size);
  line-height: var(--vpa-text-tag-line-height);
  font-weight: var(--vpa-text-tag-weight);
  letter-spacing: var(--vpa-text-tag-tracking);
  text-transform: uppercase;
  background: var(--vpa-color-info-soft);
  color: var(--vpa-color-on-info-soft);
  white-space: nowrap;
}

.tag-later {
  background: var(--vpa-color-surface-sunken);
  color: var(--vpa-color-text-secondary);
}

.tag-draft {
  background: var(--vpa-color-warning-soft);
  color: var(--vpa-color-on-warning-soft);
}

/* ---------------------------------------------------------------- buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vpa-space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vpa-space-2);
  min-height: var(--vpa-size-button-height);
  padding-inline: var(--vpa-space-5);
  border-radius: var(--vpa-radius-control);
  font-family: var(--vpa-font-sans);
  font-size: var(--vpa-text-label-size);
  font-weight: var(--vpa-text-label-weight);
  text-decoration: none;
  transition: transform var(--vpa-duration-fast) var(--vpa-easing-standard);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--vpa-color-primary-fill);
  color: var(--vpa-color-on-light);
}

.btn-secondary {
  color: var(--vpa-color-text-primary);
  border: 1px solid var(--vpa-color-outline);
}

/* ---------------------------------------------------------------- layout blocks */

.section {
  padding-block: clamp(var(--vpa-space-12), 8vw, calc(var(--vpa-space-18) * 1.5));
}

.section + .section {
  border-top: 1px solid var(--vpa-color-hairline);
}

.section-head {
  display: grid;
  gap: var(--vpa-space-3);
  margin-bottom: var(--vpa-space-10);
  max-width: 760px;
}

.grid {
  display: grid;
  gap: var(--vpa-space-4);
  padding: 0;
  list-style: none;
}

.card > .tag,
.platform > .tag {
  justify-self: start;
}

@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card {
  display: grid;
  align-content: start;
  gap: var(--vpa-space-3);
  padding: var(--vpa-space-card-inset);
  background: var(--vpa-color-surface);
  border: 1px solid var(--vpa-color-hairline);
  border-radius: var(--vpa-radius-row);
}

.card p {
  color: var(--vpa-color-text-secondary);
}

.card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--vpa-space-3);
}

.icon-badge {
  display: inline-grid;
  place-items: center;
  width: var(--vpa-size-touch-target);
  height: var(--vpa-size-touch-target);
  border-radius: var(--vpa-radius-control);
  background: var(--vpa-color-live-soft);
  color: var(--vpa-color-live);
}

/* The chrome edge: one attention surface per page (VISUAL_LANGUAGE §1). */
.chrome {
  border: 1px solid transparent;
  border-radius: var(--vpa-radius-decision);
  background:
    var(--vpa-gradient-raised) padding-box,
    var(--vpa-gradient-chrome-edge) border-box;
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-block: clamp(var(--vpa-space-10), 7vw, var(--vpa-space-18)) clamp(var(--vpa-space-12), 8vw, calc(var(--vpa-space-18) * 1.4));
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: var(--vpa-space-10);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.hero-copy {
  display: grid;
  gap: var(--vpa-space-6);
  justify-items: start;
}

.hero-note {
  color: var(--vpa-color-text-tertiary);
  font-size: var(--vpa-text-body-small-size);
}

.core {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 420px);
  isolation: isolate;
}

.core::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--vpa-color-aura-violet) 0%, var(--vpa-color-aura-blue) 55%, var(--vpa-color-aura-clear) 100%);
  animation: breathe var(--vpa-duration-breath) ease-in-out infinite;
}

.core img {
  width: 72%;
}

@media (max-width: 899px) {
  .core {
    width: min(70%, 300px);
    order: -1;
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .core::before {
    animation: none;
  }
  .btn {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}

.spoken {
  font-family: var(--vpa-font-display);
  font-weight: var(--vpa-text-spoken-weight);
  font-size: var(--vpa-text-spoken-size);
  line-height: var(--vpa-text-spoken-line-height);
}

/* ---------------------------------------------------------------- Smart Note illustration */

.note-demo {
  display: grid;
  gap: var(--vpa-space-4);
  padding: var(--vpa-space-6);
  max-width: 560px;
}

.note-demo .row {
  display: flex;
  align-items: flex-start;
  gap: var(--vpa-space-3);
  padding-block: var(--vpa-space-3);
  border-top: 1px solid var(--vpa-color-hairline);
}

.note-demo .row p {
  color: var(--vpa-color-text-primary);
}

.note-demo .who {
  display: block;
  color: var(--vpa-color-text-tertiary);
  font-size: var(--vpa-text-caption-size);
  line-height: var(--vpa-text-caption-line-height);
  font-weight: var(--vpa-text-caption-weight);
}

.note-demo .check {
  width: var(--vpa-size-icon-md);
  height: var(--vpa-size-icon-md);
  margin-top: 2px;
  color: var(--vpa-color-live);
}

.note-demo .ask {
  display: grid;
  gap: var(--vpa-space-3);
  padding: var(--vpa-space-4);
  border-radius: var(--vpa-radius-row);
  background: var(--vpa-color-surface-sunken);
}

.fake-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--vpa-size-button-height-compact);
  padding-inline: var(--vpa-space-4);
  border-radius: var(--vpa-radius-control);
  font-weight: var(--vpa-font-weight-semibold);
  font-size: var(--vpa-text-body-small-size);
}

.fake-btn.primary {
  background: var(--vpa-color-primary-fill);
  color: var(--vpa-color-on-light);
}

.fake-btn.secondary {
  border: 1px solid var(--vpa-color-outline);
}

.figure-caption {
  margin-top: var(--vpa-space-3);
  color: var(--vpa-color-text-tertiary);
  font-size: var(--vpa-text-caption-size);
}

.split {
  display: grid;
  gap: var(--vpa-space-10);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.split-copy {
  display: grid;
  gap: var(--vpa-space-5);
}

/* ---------------------------------------------------------------- lists */

.check-list {
  display: grid;
  gap: var(--vpa-space-3);
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  gap: var(--vpa-space-3);
  align-items: flex-start;
}

.check-list .icon {
  width: var(--vpa-size-icon-md);
  height: var(--vpa-size-icon-md);
  margin-top: 2px;
  color: var(--vpa-color-success);
}

.stages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vpa-space-2);
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.stages li {
  display: inline-flex;
  align-items: center;
  gap: var(--vpa-space-2);
  padding: var(--vpa-space-2) var(--vpa-space-3);
  border-radius: var(--vpa-radius-pill);
  background: var(--vpa-color-surface);
  border: 1px solid var(--vpa-color-hairline);
  font-weight: var(--vpa-font-weight-semibold);
  font-size: var(--vpa-text-body-small-size);
}

.stages li:last-child {
  border-color: transparent;
  background:
    var(--vpa-gradient-raised) padding-box,
    var(--vpa-gradient-chrome-live) border-box;
}

.steps {
  display: grid;
  gap: var(--vpa-space-4);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 720px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--vpa-space-2);
  font-family: var(--vpa-font-display);
  font-size: var(--vpa-text-card-title-size);
  color: var(--vpa-color-live);
  font-variant-numeric: tabular-nums;
}

.platforms {
  display: grid;
  gap: var(--vpa-space-3);
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .platforms {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.platform {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--vpa-space-2);
  padding: var(--vpa-space-card-inset);
  background: var(--vpa-color-surface);
  border: 1px solid var(--vpa-color-hairline);
  border-radius: var(--vpa-radius-row);
}

.platform .icon {
  color: var(--vpa-color-text-secondary);
}

.platform p {
  color: var(--vpa-color-text-secondary);
  font-size: var(--vpa-text-body-small-size);
  line-height: var(--vpa-text-body-small-line-height);
}

.cta {
  display: grid;
  gap: var(--vpa-space-5);
  justify-items: center;
  text-align: center;
  padding: clamp(var(--vpa-space-8), 6vw, var(--vpa-space-16));
}

.cta p {
  max-width: 56ch;
}

/* ---------------------------------------------------------------- feature detail + prose */

.feature {
  display: grid;
  gap: var(--vpa-space-6);
  padding-block: var(--vpa-space-12);
  border-top: 1px solid var(--vpa-color-hairline);
}

.feature:first-of-type {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 900px) {
  .feature {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--vpa-space-12);
  }
}

.feature-head {
  display: grid;
  gap: var(--vpa-space-3);
  align-content: start;
  justify-items: start;
}

.feature-body {
  display: grid;
  gap: var(--vpa-space-4);
  color: var(--vpa-color-text-secondary);
}

.feature-body strong {
  color: var(--vpa-color-text-primary);
  font-weight: var(--vpa-font-weight-semibold);
}

.page-head {
  display: grid;
  gap: var(--vpa-space-4);
  padding-block: clamp(var(--vpa-space-10), 6vw, var(--vpa-space-16)) var(--vpa-space-10);
  justify-items: start;
}

.prose {
  display: grid;
  gap: var(--vpa-space-4);
  max-width: 72ch;
  color: var(--vpa-color-text-secondary);
}

.prose h2 {
  margin-top: var(--vpa-space-6);
  color: var(--vpa-color-text-primary);
  font-family: var(--vpa-text-card-title-family);
  font-size: var(--vpa-text-card-title-size);
  line-height: var(--vpa-text-card-title-line-height);
  font-weight: var(--vpa-text-card-title-weight);
}

.prose ul {
  display: grid;
  gap: var(--vpa-space-2);
  padding-inline-start: var(--vpa-space-6);
}

.prose strong {
  color: var(--vpa-color-text-primary);
}

.draft-banner {
  display: grid;
  gap: var(--vpa-space-2);
  padding: var(--vpa-space-card-inset);
  border-radius: var(--vpa-radius-row);
  background: var(--vpa-color-warning-soft);
  color: var(--vpa-color-on-warning-soft);
  max-width: 72ch;
}

.draft-banner strong {
  color: var(--vpa-color-on-warning-soft);
}

.tbc {
  padding-inline: var(--vpa-space-1);
  border-radius: var(--vpa-radius-sm);
  background: var(--vpa-color-surface-sunken);
  color: var(--vpa-color-text-primary);
}

.principles {
  display: grid;
  gap: var(--vpa-space-4);
  padding: 0;
  list-style: none;
  counter-reset: principle;
}

.principle {
  display: grid;
  gap: var(--vpa-space-3);
  padding: var(--vpa-space-6);
  background: var(--vpa-color-surface);
  border: 1px solid var(--vpa-color-hairline);
  border-radius: var(--vpa-radius-row);
}

@media (min-width: 900px) {
  .principle {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--vpa-space-8);
  }
}

.principle p + p,
.principle p + ul {
  margin-top: var(--vpa-space-3);
}

.principle-body {
  color: var(--vpa-color-text-secondary);
}

.principle-body ul {
  display: grid;
  gap: var(--vpa-space-2);
  padding-inline-start: var(--vpa-space-6);
}

.quote {
  padding: var(--vpa-space-6);
  display: grid;
  gap: var(--vpa-space-3);
}

.quote p.muted {
  font-size: var(--vpa-text-body-small-size);
}

.permission {
  display: grid;
  gap: var(--vpa-space-2);
  padding: var(--vpa-space-5);
  background: var(--vpa-color-surface-sunken);
  border-radius: var(--vpa-radius-row);
}

/* ---------------------------------------------------------------- 404 */

.not-found {
  display: grid;
  gap: var(--vpa-space-6);
  justify-items: center;
  text-align: center;
  padding-block: var(--vpa-space-16);
}

.not-found .actions {
  justify-content: center;
}

.not-found .core {
  width: min(60%, 220px);
  order: 0;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: var(--vpa-space-12);
  padding-block: var(--vpa-space-10);
  border-top: 1px solid var(--vpa-color-hairline);
  background: var(--vpa-color-surface-sunken);
}

.footer-grid {
  display: grid;
  gap: var(--vpa-space-8);
  margin-bottom: var(--vpa-space-8);
}

.footer-grid > div {
  display: grid;
  gap: var(--vpa-space-2);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.footer-links {
  display: grid;
  gap: 0 var(--vpa-space-6);
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--vpa-size-touch-target);
  color: var(--vpa-color-text-secondary);
}

.footer-links a:hover {
  color: var(--vpa-color-text-primary);
}

.nowrap {
  white-space: nowrap;
}