/* GENERATED — do not edit by hand. Run `npm run design:export` after editing DESIGN.md. */
/* source: DESIGN.md (Reference Clinical Funnel) valpha */

:root {
    /* colors */
    --wag-color-primary: #05727a;
    --wag-color-primary-deep: #0d6e75;
    --wag-color-primary-soft: #6cc1b6;
    --wag-color-accent-coral: #ff5c39;
    --wag-color-accent-coral-deep: #e8462b;
    --wag-color-surface: #f6f4ee;
    --wag-color-surface-card-white: #ffffff;
    --wag-color-surface-mint: #b4e0d8;
    --wag-color-surface-mint-pale: #dcf5f0;
    --wag-color-surface-input-mint: #e8f0fe;
    --wag-color-surface-pill-deselected: #eae7e2;
    --wag-color-surface-warm-tan: #d3c9b4;
    --wag-color-navy-deep: #1d3a44;
    --wag-color-ink: #191717;
    --wag-color-ink-slate: #2e3644;
    --wag-color-on-dark: #f6f4ee;
    --wag-color-outline: #dcdcdc;
    --wag-color-outline-strong: #bdbdbd;
    --wag-color-success-green: #799f2d;
    /* rounded */
    --wag-rounded-none: 0px;
    --wag-rounded-sm: 4px;
    --wag-rounded-md: 16px;
    --wag-rounded-lg: 32px;
    --wag-rounded-xl: 72px;
    --wag-rounded-full: 9999px;
    /* spacing */
    --wag-spacing-none: 0px;
    --wag-spacing-xs: 4px;
    --wag-spacing-sm: 8px;
    --wag-spacing-md: 16px;
    --wag-spacing-gutter: 24px;
    --wag-spacing-lg: 32px;
    --wag-spacing-xl: 48px;
    --wag-spacing-xxl: 64px;
    /* typography */
    /* Display tier — fluid sizing.

     Both display tokens use clamp() so editorial headlines scale
     with the viewport (matching the Reference pattern where a headline
     occupies roughly the same number of lines on a 309×687 phone
     as on a 1280px desktop). Keeping the scaling at the token tier
     means every consumer (interstitial headlines, recipe-b
     floating headline, recipe-c testimonial headline, thanks
     headline, cream-tab card h2, dark-tab card h2, FHA exterior
     headline, etc.) inherits the responsive curve without
     per-rule overrides.

     display-md range:
       320px viewport → 22px (4ch wider lines avg vs 28px lock)
       500px viewport → 28px (desktop reference)
     display-lg range:
       320px viewport → 28px
       500px viewport → 40px

     line-heights are also clamp()'d to track size; we keep them
     in px so they scale linearly with font-size rather than
     compounding via a unitless ratio. */
    --wag-typography-display-lg-font-family: 'Source Serif 4', 'Tiempos Headline', Georgia, serif;
    --wag-typography-display-lg-font-size: clamp(28px, 8vw, 40px);
    --wag-typography-display-lg-font-weight: 600;
    --wag-typography-display-lg-line-height: clamp(34px, 9.2vw, 46px);
    --wag-typography-display-lg-letter-spacing: -0.01em;
    --wag-typography-display-md-font-family: 'Source Serif 4', 'Tiempos Headline', Georgia, serif;
    --wag-typography-display-md-font-size: clamp(22px, 5.6vw, 28px);
    --wag-typography-display-md-font-weight: 600;
    --wag-typography-display-md-line-height: clamp(28px, 6.7vw, 34px);
    --wag-typography-display-md-letter-spacing: -0.005em;
    --wag-typography-headline-lg-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-typography-headline-lg-font-size: 28px;
    --wag-typography-headline-lg-font-weight: 700;
    --wag-typography-headline-lg-line-height: 1.25;
    --wag-typography-headline-md-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-typography-headline-md-font-size: 20px;
    --wag-typography-headline-md-font-weight: 700;
    --wag-typography-headline-md-line-height: 1.3;
    /* Body tier — fluid sizing.

     Scaled less aggressively than the display tier on purpose: body
     copy lives at the legibility floor and shouldn't drop below 14px
     even on the narrowest phones (iOS browsers also stop zooming
     focus inputs at 16px → keep input fields at body-lg or higher).

     body-lg range:
       320px viewport → 16px
       500px+ viewport → 18px (desktop reference)
     body-md range:
       320px viewport → 14px
       500px+ viewport → 16px (desktop reference)

     Line-heights stay unitless (1.5) so they track the clamped
     font-size without a separate clamp — preserves the 1.5 ratio
     that body copy relies on across the whole curve. */
    --wag-typography-body-lg-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-typography-body-lg-font-size: clamp(16px, 4vw, 18px);
    --wag-typography-body-lg-font-weight: 400;
    --wag-typography-body-lg-line-height: 1.5;
    --wag-typography-body-md-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-typography-body-md-font-size: clamp(14px, 3.5vw, 16px);
    --wag-typography-body-md-font-weight: 400;
    --wag-typography-body-md-line-height: 1.5;
    --wag-typography-body-sm-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-typography-body-sm-font-size: 14px;
    --wag-typography-body-sm-font-weight: 400;
    --wag-typography-body-sm-line-height: 1.45;
    --wag-typography-label-lg-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-typography-label-lg-font-size: 16px;
    --wag-typography-label-lg-font-weight: 600;
    --wag-typography-label-lg-line-height: 1.2;
    --wag-typography-label-md-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-typography-label-md-font-size: 14px;
    --wag-typography-label-md-font-weight: 600;
    --wag-typography-label-md-line-height: 1.2;
    --wag-typography-eyebrow-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-typography-eyebrow-font-size: 12px;
    --wag-typography-eyebrow-font-weight: 700;
    --wag-typography-eyebrow-line-height: 1;
    --wag-typography-eyebrow-letter-spacing: 0.1em;
    --wag-typography-caption-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-typography-caption-font-size: 12px;
    --wag-typography-caption-font-weight: 400;
    --wag-typography-caption-line-height: 1.4;
    /* components */
    /* component: button-primary */
    --wag-component-button-primary-background-color: #ff5c39;
    --wag-component-button-primary-text-color: #ffffff;
    --wag-component-button-primary-rounded: 9999px;
    --wag-component-button-primary-padding: 16px 32px;
    --wag-component-button-primary-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-button-primary-font-size: 16px;
    --wag-component-button-primary-font-weight: 600;
    --wag-component-button-primary-line-height: 1.2;
    /* component: button-primary-hover */
    --wag-component-button-primary-hover-background-color: #e8462b;
    --wag-component-button-primary-hover-text-color: #ffffff;
    /* component: button-secondary */
    --wag-component-button-secondary-background-color: #eae7e2;
    --wag-component-button-secondary-text-color: #191717;
    --wag-component-button-secondary-rounded: 9999px;
    --wag-component-button-secondary-padding: 16px 32px;
    --wag-component-button-secondary-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-button-secondary-font-size: 16px;
    --wag-component-button-secondary-font-weight: 600;
    --wag-component-button-secondary-line-height: 1.2;
    /* component: quiz-option */
    --wag-component-quiz-option-background-color: #f6f4ee;
    --wag-component-quiz-option-text-color: #191717;
    --wag-component-quiz-option-rounded: 9999px;
    --wag-component-quiz-option-padding: 16px 24px;
    --wag-component-quiz-option-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-quiz-option-font-size: 16px;
    --wag-component-quiz-option-font-weight: 400;
    --wag-component-quiz-option-line-height: 1.2;
    /* component: quiz-option-selected */
    --wag-component-quiz-option-selected-background-color: #05727a;
    --wag-component-quiz-option-selected-text-color: #f6f4ee;
    --wag-component-quiz-option-selected-rounded: 9999px;
    --wag-component-quiz-option-selected-padding: 16px 24px;
    --wag-component-quiz-option-selected-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-quiz-option-selected-font-size: 16px;
    --wag-component-quiz-option-selected-font-weight: 400;
    --wag-component-quiz-option-selected-line-height: 1.2;
    /* component: card-cream-tab */
    --wag-component-card-cream-tab-background-color: #f6f4ee;
    --wag-component-card-cream-tab-text-color: #191717;
    --wag-component-card-cream-tab-rounded: 32px;
    --wag-component-card-cream-tab-padding: 32px;
    /* component: card-dark-tab */
    --wag-component-card-dark-tab-background-color: #1d3a44;
    --wag-component-card-dark-tab-text-color: #f6f4ee;
    --wag-component-card-dark-tab-rounded: 32px;
    --wag-component-card-dark-tab-padding: 32px;
    /* component: card-mint */
    --wag-component-card-mint-background-color: #b4e0d8;
    --wag-component-card-mint-text-color: #191717;
    --wag-component-card-mint-rounded: 16px;
    --wag-component-card-mint-padding: 24px;
    /* component: callout-cream
     The cream supporting card used in clinical-team interstitials
     (e.g. travel, pet-rent). Sits inside teal pages; chosen to
     visually echo the cream surface used on quiz question pages so
     the interstitial feels continuous with the questions around it. */
    --wag-component-callout-cream-background-color: #f6f4ee;
    --wag-component-callout-cream-text-color: #191717;
    --wag-component-callout-cream-rounded: 16px;
    --wag-component-callout-cream-padding: 24px;
    /* component: card-plan */
    --wag-component-card-plan-background-color: #dcf5f0;
    --wag-component-card-plan-text-color: #191717;
    --wag-component-card-plan-rounded: 32px;
    --wag-component-card-plan-padding: 32px;
    /* component: input-text */
    --wag-component-input-text-background-color: #ffffff;
    --wag-component-input-text-text-color: #191717;
    --wag-component-input-text-rounded: 4px;
    --wag-component-input-text-padding: 12px 16px;
    --wag-component-input-text-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-input-text-font-size: 16px;
    --wag-component-input-text-font-weight: 400;
    --wag-component-input-text-line-height: 1.5;
    /* component: input-checkout */
    --wag-component-input-checkout-background-color: #e8f0fe;
    --wag-component-input-checkout-text-color: #191717;
    --wag-component-input-checkout-rounded: 4px;
    --wag-component-input-checkout-padding: 12px 16px;
    --wag-component-input-checkout-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-input-checkout-font-size: 16px;
    --wag-component-input-checkout-font-weight: 400;
    --wag-component-input-checkout-line-height: 1.5;
    /* component: progress-segment-active */
    --wag-component-progress-segment-active-background-color: #05727a;
    --wag-component-progress-segment-active-rounded: 9999px;
    --wag-component-progress-segment-active-height: 6px;
    /* component: progress-segment-complete */
    --wag-component-progress-segment-complete-background-color: #6cc1b6;
    --wag-component-progress-segment-complete-rounded: 9999px;
    --wag-component-progress-segment-complete-height: 6px;
    /* component: progress-segment-upcoming */
    --wag-component-progress-segment-upcoming-background-color: #eae7e2;
    --wag-component-progress-segment-upcoming-rounded: 9999px;
    --wag-component-progress-segment-upcoming-height: 6px;
    /* component: progress-bar-fill */
    --wag-component-progress-bar-fill-background-color: #ff5c39;
    --wag-component-progress-bar-fill-text-color: #191717;
    --wag-component-progress-bar-fill-rounded: 9999px;
    --wag-component-progress-bar-fill-height: 40px;
    /* component: eyebrow-label */
    --wag-component-eyebrow-label-background-color: transparent;
    --wag-component-eyebrow-label-text-color: #05727a;
    --wag-component-eyebrow-label-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-eyebrow-label-font-size: 12px;
    --wag-component-eyebrow-label-font-weight: 700;
    --wag-component-eyebrow-label-line-height: 1;
    --wag-component-eyebrow-label-letter-spacing: 0.1em;
    /* component: link-inline */
    --wag-component-link-inline-background-color: transparent;
    --wag-component-link-inline-text-color: #05727a;
    --wag-component-link-inline-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-link-inline-font-size: 16px;
    --wag-component-link-inline-font-weight: 400;
    --wag-component-link-inline-line-height: 1.5;
    /* component: surface-page-teal */
    --wag-component-surface-page-teal-background-color: #0d6e75;
    --wag-component-surface-page-teal-text-color: #f6f4ee;
    --wag-component-surface-page-teal-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-surface-page-teal-font-size: 16px;
    --wag-component-surface-page-teal-font-weight: 400;
    --wag-component-surface-page-teal-line-height: 1.5;
    /* component: surface-page-navy */
    --wag-component-surface-page-navy-background-color: #1d3a44;
    --wag-component-surface-page-navy-text-color: #f6f4ee;
    --wag-component-surface-page-navy-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-surface-page-navy-font-size: 16px;
    --wag-component-surface-page-navy-font-weight: 400;
    --wag-component-surface-page-navy-line-height: 1.5;
    /* component: surface-page-white */
    --wag-component-surface-page-white-background-color: #ffffff;
    --wag-component-surface-page-white-text-color: #191717;
    --wag-component-surface-page-white-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-surface-page-white-font-size: 16px;
    --wag-component-surface-page-white-font-weight: 400;
    --wag-component-surface-page-white-line-height: 1.5;
    /* component: body-text-secondary */
    --wag-component-body-text-secondary-background-color: transparent;
    --wag-component-body-text-secondary-text-color: #2e3644;
    --wag-component-body-text-secondary-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-body-text-secondary-font-size: 14px;
    --wag-component-body-text-secondary-font-weight: 400;
    --wag-component-body-text-secondary-line-height: 1.45;
    /* component: divider-footnote */
    --wag-component-divider-footnote-background-color: #d3c9b4;
    --wag-component-divider-footnote-rounded: 4px;
    --wag-component-divider-footnote-height: 1px;
    /* component: divider-hairline */
    --wag-component-divider-hairline-background-color: #dcdcdc;
    --wag-component-divider-hairline-height: 1px;
    /* component: divider-hairline-strong */
    --wag-component-divider-hairline-strong-background-color: #bdbdbd;
    --wag-component-divider-hairline-strong-height: 1px;
    /* component: photo-placeholder */
    --wag-component-photo-placeholder-background-color: #eae7e2;
    --wag-component-photo-placeholder-text-color: #2e3644;
    --wag-component-photo-placeholder-rounded: 16px;
    --wag-component-photo-placeholder-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-photo-placeholder-font-size: 12px;
    --wag-component-photo-placeholder-font-weight: 400;
    --wag-component-photo-placeholder-line-height: 1.4;
    /* component: included-feature-card */
    --wag-component-included-feature-card-background-color: #dcf5f0;
    --wag-component-included-feature-card-text-color: #191717;
    --wag-component-included-feature-card-rounded: 16px;
    --wag-component-included-feature-card-padding: 16px;
    /* component: what-to-expect-card */
    --wag-component-what-to-expect-card-background-color: #dcf5f0;
    --wag-component-what-to-expect-card-text-color: #191717;
    --wag-component-what-to-expect-card-rounded: 16px;
    --wag-component-what-to-expect-card-padding: 32px;
    /* component: numbered-step-marker */
    --wag-component-numbered-step-marker-background-color: #b4e0d8;
    --wag-component-numbered-step-marker-text-color: #0d6e75;
    --wag-component-numbered-step-marker-rounded: 9999px;
    --wag-component-numbered-step-marker-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-numbered-step-marker-font-size: 16px;
    --wag-component-numbered-step-marker-font-weight: 600;
    --wag-component-numbered-step-marker-line-height: 1.2;
    /* component: numbered-step-marker-complete */
    --wag-component-numbered-step-marker-complete-background-color: #799f2d;
    --wag-component-numbered-step-marker-complete-text-color: #ffffff;
    --wag-component-numbered-step-marker-complete-rounded: 9999px;
    --wag-component-numbered-step-marker-complete-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-numbered-step-marker-complete-font-size: 16px;
    --wag-component-numbered-step-marker-complete-font-weight: 600;
    --wag-component-numbered-step-marker-complete-line-height: 1.2;
    /* component: numbered-step-marker-active */
    --wag-component-numbered-step-marker-active-background-color: #ff5c39;
    --wag-component-numbered-step-marker-active-text-color: #ffffff;
    --wag-component-numbered-step-marker-active-rounded: 9999px;
    --wag-component-numbered-step-marker-active-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-numbered-step-marker-active-font-size: 16px;
    --wag-component-numbered-step-marker-active-font-weight: 600;
    --wag-component-numbered-step-marker-active-line-height: 1.2;
    /* component: numbered-step-marker-upcoming */
    --wag-component-numbered-step-marker-upcoming-background-color: #05727a;
    --wag-component-numbered-step-marker-upcoming-text-color: #ffffff;
    --wag-component-numbered-step-marker-upcoming-rounded: 9999px;
    --wag-component-numbered-step-marker-upcoming-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-numbered-step-marker-upcoming-font-size: 16px;
    --wag-component-numbered-step-marker-upcoming-font-weight: 600;
    --wag-component-numbered-step-marker-upcoming-line-height: 1.2;
    /* component: numbered-step-marker-square */
    --wag-component-numbered-step-marker-square-background-color: #ffffff;
    --wag-component-numbered-step-marker-square-text-color: #191717;
    --wag-component-numbered-step-marker-square-rounded: 4px;
    --wag-component-numbered-step-marker-square-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-numbered-step-marker-square-font-size: 12px;
    --wag-component-numbered-step-marker-square-font-weight: 700;
    --wag-component-numbered-step-marker-square-line-height: 1;
    --wag-component-numbered-step-marker-square-letter-spacing: 0.1em;
    /* component: payment-card */
    --wag-component-payment-card-background-color: #ffffff;
    --wag-component-payment-card-text-color: #191717;
    --wag-component-payment-card-rounded: 16px;
    --wag-component-payment-card-padding: 16px 24px;
    --wag-component-payment-card-font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --wag-component-payment-card-font-size: 16px;
    --wag-component-payment-card-font-weight: 600;
    --wag-component-payment-card-line-height: 1.2;
    /* component: headline-underline-coral */
    --wag-component-headline-underline-coral-background-color: transparent;
    --wag-component-headline-underline-coral-text-color: #ff5c39;
}