:root {
    --primary: #B547A3;
    --accent: #B547A3;
    --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));
}

/* Signup / login / cancel buttons use the brand colour, with white text so the label stays readable.
   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 .main-button,
body .main-button:hover,
body .main-button:focus,
body .main-button:active {
    background: var(--primary) !important;
    color: #fff !important;
}
body .form-card .main-button span,
body .form-card .main-button span.text-light,
body #signup-form .main-button span {
    color: #fff !important;
}