:root {
    --primary: #F2C300;
    --accent: #F2C300;
    --nav_bg: #D2D2D25C;
    /* 1 design pixel: the layout is drawn on a 1055px wide canvas and scales with the viewport width (up to 1440px),
       but never so much that the hero CTA drops below the fold on short screens */
    --u: clamp(0.9px, min(100vw / 1055, 100vh / 650), 1.365px);
    --header_h: calc(97 * var(--u));
    /* width of the nav + hero content; wider than the 1055px mockup so large screens get less empty margin */
    --page_w: calc(1320 * var(--u));
    /* width of the sectionOne content (kept narrower than the hero) */
    --choice_w: calc(880 * var(--u));
}

/* Black text on every button except the nav CTA (.d2c_nav_cta).
   This file loads before the templates' inline <style> blocks, so !important is needed,
   and the body prefix outranks the cancel page's own !important span rule */
body .d2c_hero_cta,
body .d2c_hero_cta:hover,
body .d2c_hero_cta:focus-visible,
body .d2c_choice_cta,
body .d2c_choice_cta:hover,
body .d2c_choice_cta:focus-visible,
body .d2c_goals_btn,
body .main-button,
body .main-button:hover,
body .main-button:focus,
body .main-button:active,
body .form-card .main-button span,
body .form-card .main-button span.text-light,
body #signup-form .main-button span,
body .button-spec {
    color: #000 !important;
}

/* Signup / login / cancel buttons use the brand colour (their black text is set above).
   This file loads before the templates' inline <style> blocks, so !important is needed */
body .main-button,
body .main-button:hover,
body .main-button:focus,
body .main-button:active {
    background: var(--primary) !important;
}