/*
 * EDUEX Design Tokens
 * ------------------------------------------------------------------
 * Single source of truth for the EDUEX brand on the front end.
 * Generated from eduex.co.uk-design.md (alpha, 2026).
 *
 * Every other stylesheet in the theme (and the rewritten plugin
 * stylesheet) reads from these --edx-* custom properties. Do not
 * hard-code brand colors anywhere else in the project.
 */

:root {
    /* ---------- Brand colors ---------- */
    --edx-primary:                #ab0c2f;
    --edx-primary-hover:          #8b0820;
    --edx-primary-active:         #7a0820;
    --edx-on-primary:             #ffffff;
    --edx-primary-container:      #f0d5dc;
    --edx-on-primary-container:   #7a0820;
    --edx-inverse-primary:        #ff6b7a;

    --edx-secondary:              #1a73e8;
    --edx-on-secondary:           #ffffff;
    --edx-secondary-container:    #d4e4f7;
    --edx-on-secondary-container: #0d47a1;

    --edx-tertiary:               #ff7162;
    --edx-on-tertiary:            #ffffff;
    --edx-tertiary-container:     #ffe0db;
    --edx-on-tertiary-container:  #b83c2e;

    --edx-error:                  #dc3232;
    --edx-on-error:               #ffffff;
    --edx-error-container:        #f9dedc;
    --edx-on-error-container:     #8b0000;
    --edx-error-tint:             #fff7f7;
    --edx-error-ring:             rgba(220, 50, 50, 0.15);

    --edx-success:                #2da44e;
    --edx-on-success:             #ffffff;
    --edx-success-container:      #e6f4ea;
    --edx-on-success-container:   #1e6e3a;

    /* ---------- Surfaces ---------- */
    --edx-background:               #ffffff;
    --edx-on-background:            #575f5f;
    --edx-surface:                  #ffffff;
    --edx-surface-dim:              #f5f5f5;
    --edx-surface-bright:           #ffffff;
    --edx-surface-container-lowest: #fafafa;
    --edx-surface-container-low:    #f0f0f0;
    --edx-surface-container:        #eeeeee;
    --edx-surface-container-high:   #e9ecef;
    --edx-surface-container-highest:#dfe3e6;
    --edx-surface-variant:          #e9ecef;
    --edx-on-surface:               #575f5f;
    --edx-on-surface-variant:       #6c757d;

    --edx-inverse-surface:          #1e1e2f;
    --edx-inverse-on-surface:       #f5f5f5;

    --edx-outline:                  #8e9192;
    --edx-outline-variant:          #c4c7c8;
    --edx-surface-tint:             #ab0c2f;

    /* ---------- Typography ---------- */
    --edx-font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --edx-fs-display:     60px;
    --edx-fs-headline-lg: 40px;
    --edx-fs-headline-md: 28px;
    --edx-fs-title-lg:    20px;
    --edx-fs-body-lg:     18px;
    --edx-fs-body-md:     16px;
    --edx-fs-label-md:    14px;
    --edx-fs-label-sm:    12px;

    --edx-fw-regular:  400;
    --edx-fw-medium:   500;
    --edx-fw-semibold: 600;
    --edx-fw-bold:     700;

    --edx-lh-display:     68px;
    --edx-lh-headline-lg: 48px;
    --edx-lh-headline-md: 36px;
    --edx-lh-title-lg:    28px;
    --edx-lh-body-lg:     28px;
    --edx-lh-body-md:     24px;
    --edx-lh-label-md:    20px;
    --edx-lh-label-sm:    16px;

    --edx-ls-display:     -0.04em;
    --edx-ls-headline-lg: -0.02em;
    --edx-ls-headline-md: -0.01em;
    --edx-ls-body-lg:      0.02em;
    --edx-ls-body-md:      0.01em;
    --edx-ls-label-sm:     0.03em;

    /* ---------- Shape ---------- */
    --edx-radius-sm:   0.25rem; /*  4px */
    --edx-radius:      0.5rem;  /*  8px — inputs */
    --edx-radius-md:   0.75rem; /* 12px — buttons */
    --edx-radius-lg:   1rem;    /* 16px — cards  */
    --edx-radius-xl:   1.5rem;  /* 24px */
    --edx-radius-pill: 9999px;

    /* ---------- Spacing ---------- */
    --edx-space-xs: 4px;
    --edx-space-sm: 12px;
    --edx-space-md: 24px;
    --edx-space-lg: 40px;
    --edx-space-xl: 64px;
    --edx-container-max: 1280px;

    /* ---------- Elevation ---------- */
    --edx-elev-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --edx-elev-md: 0 3px 8px rgba(0, 0, 0, 0.15);
    --edx-elev-lg: 0 16px 40px rgba(0, 0, 0, 0.12);

    /* ---------- Motion ---------- */
    --edx-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --edx-dur-fast:    150ms;
    --edx-dur-medium:  200ms;

    /* ---------- Focus ring ---------- */
    --edx-focus-ring: 0 0 0 3px rgba(171, 12, 47, 0.18);
}

/* ------------------------------------------------------------------
   Base typography & body
   ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    line-height: var(--edx-lh-body-md);
    letter-spacing: var(--edx-ls-body-md);
    color: var(--edx-on-background);
    background-color: var(--edx-background);
    font-weight: var(--edx-fw-regular);
    margin: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--edx-font-family);
    color: var(--edx-on-background);
    margin: 0 0 var(--edx-space-sm);
    text-wrap: balance;
}
h1 { font-size: var(--edx-fs-display);     font-weight: var(--edx-fw-bold);     line-height: var(--edx-lh-display);     letter-spacing: var(--edx-ls-display); }
h2 { font-size: var(--edx-fs-headline-lg); font-weight: var(--edx-fw-semibold); line-height: var(--edx-lh-headline-lg); letter-spacing: var(--edx-ls-headline-lg); }
h3 { font-size: var(--edx-fs-headline-md); font-weight: var(--edx-fw-semibold); line-height: var(--edx-lh-headline-md); letter-spacing: var(--edx-ls-headline-md); }
h4 { font-size: var(--edx-fs-title-lg);    font-weight: var(--edx-fw-semibold); line-height: var(--edx-lh-title-lg); }
h5, h6 { font-size: var(--edx-fs-body-md);  font-weight: var(--edx-fw-semibold); }
p { margin: 0 0 var(--edx-space-md); }
a {
    color: var(--edx-secondary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--edx-dur-medium) var(--edx-ease);
}
a:hover { color: var(--edx-on-secondary-container); }

/* Always-visible keyboard focus, brand-aligned. */
:focus-visible {
    outline: none;
    box-shadow: var(--edx-focus-ring);
    border-radius: var(--edx-radius-sm);
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------
   The "library rule" — a 2px burgundy hairline at the top of every
   EDUEX card / form / panel. Single ornament, reused. Apply by
   adding the .edx-rule class to any container.
   ------------------------------------------------------------------ */
.edx-rule { position: relative; padding-top: calc(var(--edx-space-md) + 2px); }
.edx-rule::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 2px;
    background: var(--edx-primary);
    border-radius: var(--edx-radius-pill);
}

/* ------------------------------------------------------------------
   .edx-btn — brand button variants. Used by the theme and any
   third-party plugin that opts into the class.
   ------------------------------------------------------------------ */
.edx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--edx-space-xs);
    height: 48px;
    padding: 0px 20px;
    border: 2px solid transparent;
    border-radius: var(--edx-radius-md);
    background: var(--edx-primary);
    color: var(--edx-on-primary);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-body-md);
    font-weight: var(--edx-fw-medium);
    letter-spacing: var(--edx-ls-label-md);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--edx-dur-medium) var(--edx-ease),
        color            var(--edx-dur-medium) var(--edx-ease),
        border-color     var(--edx-dur-medium) var(--edx-ease),
        box-shadow       var(--edx-dur-medium) var(--edx-ease),
        transform        var(--edx-dur-fast)   var(--edx-ease);
}
.edx-btn:hover,
.edx-btn:focus-visible {
    background: var(--edx-primary-hover);
    color: var(--edx-on-primary);
    text-decoration: none;
}
.edx-btn:active {
    background: var(--edx-primary-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.20);
}
.edx-btn:disabled,
.edx-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}
.edx-btn--secondary {
    background: transparent;
    color: var(--edx-primary);
    border-color: var(--edx-primary);
}
.edx-btn--secondary:hover,
.edx-btn--secondary:focus-visible {
    background: var(--edx-primary-container);
    color: var(--edx-on-primary-container);
    border-color: var(--edx-primary);
}
.edx-btn--secondary:active {
    background: var(--edx-primary-container);
    color: var(--edx-primary-active);
}
.edx-btn--ghost {
    background: transparent;
    color: var(--edx-primary);
    border-color: transparent;
}
.edx-btn--ghost:hover,
.edx-btn--ghost:focus-visible {
    background: var(--edx-surface-container-high);
    color: var(--edx-primary);
}

/* ------------------------------------------------------------------
   .edx-card — generic surface used by the layout + blocks.
   ------------------------------------------------------------------ */
.edx-card {
    background: var(--edx-surface);
    border: 1px solid var(--edx-surface-variant);
    border-radius: var(--edx-radius-lg);
    padding: var(--edx-space-md);
    box-shadow: var(--edx-elev-md);
    transition:
        background-color var(--edx-dur-medium) var(--edx-ease),
        box-shadow       var(--edx-dur-medium) var(--edx-ease),
        transform        var(--edx-dur-medium) var(--edx-ease);
}
.edx-card:hover {
    background: var(--edx-surface-container-low);
    box-shadow: var(--edx-elev-lg);
}

/* ------------------------------------------------------------------
   .edx-badge — small pill for status / metadata.
   Two variants per spec: tertiary (warm accent) and primary
   (brand-tinted for audience / status callouts).
   ------------------------------------------------------------------ */
.edx-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--edx-radius-pill);
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-sm);
    font-weight: var(--edx-fw-medium);
    line-height: var(--edx-lh-label-sm);
    letter-spacing: var(--edx-ls-label-sm);
    text-transform: uppercase;
    white-space: nowrap;
}
.edx-badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.edx-badge--primary {
    background: var(--edx-primary-container);
    color: var(--edx-on-primary-container);
}
.edx-badge--tertiary {
    background: var(--edx-tertiary-container);
    color: var(--edx-on-tertiary-container);
}
.edx-badge--success {
    background: var(--edx-success-container);
    color: var(--edx-on-success-container);
}
.edx-badge--success::before {
    background: var(--edx-success);
}

/* ------------------------------------------------------------------
   .edx-divider — 1px hairline in outline-variant.
   ------------------------------------------------------------------ */
.edx-divider {
    height: 1px;
    background: var(--edx-outline-variant);
    border: 0;
    margin: var(--edx-space-md) 0;
}

/* ------------------------------------------------------------------
   .edx-list-item — spec component for key-value rows.
   Transparent by default; lifts to surface-container-high on hover.
   ------------------------------------------------------------------ */
.edx-list-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--edx-space-md);
    padding: var(--edx-space-sm) var(--edx-space-md);
    background: transparent;
    border-radius: var(--edx-radius-md);
    color: var(--edx-on-surface);
    transition: background-color var(--edx-dur-fast) var(--edx-ease);
}
.edx-list-item + .edx-list-item {
    border-top: 1px solid var(--edx-outline-variant);
}
.edx-list-item:hover {
    background: var(--edx-surface-container-high);
}
.edx-list-item__label {
    font-size: var(--edx-fs-label-md);
    line-height: var(--edx-lh-label-md);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-surface-variant);
}
.edx-list-item__value {
    font-size: var(--edx-fs-body-md);
    line-height: var(--edx-lh-body-md);
    color: var(--edx-on-background);
    font-weight: var(--edx-fw-medium);
    text-align: right;
    word-break: break-word;
}

/* ------------------------------------------------------------------
   Form field state primitives — used by every form context
   (EDUEX Payment, WC checkout, comments, search).
   .edx-field--error adds a 1px burgundy-red border + helper row.
   .edx-field--success adds a soft success tint.
   ------------------------------------------------------------------ */
.edx-field {
    display: block;
    margin-bottom: var(--edx-space-sm);
}
.edx-field__label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-md);
    line-height: var(--edx-lh-label-md);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-surface);
    margin-bottom: 6px;
}
.edx-field__required {
    color: var(--edx-primary);
    font-weight: var(--edx-fw-semibold);
    line-height: 1;
}
.edx-field__helper {
    font-size: var(--edx-fs-label-sm);
    line-height: var(--edx-lh-label-sm);
    color: var(--edx-on-surface-variant);
    margin: 6px 0 0;
}
.edx-field__error {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: var(--edx-fs-label-sm);
    line-height: var(--edx-lh-label-sm);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-error);
    margin: 6px 0 0;
}
.edx-field__error::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: var(--edx-error);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 15h-2v-2h2zm0-4h-2V7h2z'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 15h-2v-2h2zm0-4h-2V7h2z'/></svg>") center / contain no-repeat;
}
.edx-field--error input,
.edx-field--error select,
.edx-field--error textarea {
    border-color: var(--edx-error);
    box-shadow: 0 0 0 3px var(--edx-error-ring);
}
.edx-field--error .edx-field__error { display: inline-flex; }
.edx-field--success input,
.edx-field--success select,
.edx-field--success textarea {
    border-color: var(--edx-success);
}

/* ------------------------------------------------------------------
   Elementor — restyle buttons and form fields to consume tokens.
   We can't replace Elementor's stylesheet, but we can read from
   the same tokens so a single change propagates.
   ------------------------------------------------------------------ */
.elementor-button,
.elementor-button.elementor-button {
    background: var(--edx-primary);
    color: var(--edx-on-primary);
    border: 2px solid var(--edx-primary);
    border-radius: var(--edx-radius-md);
    font-family: var(--edx-font-family);
    font-weight: var(--edx-fw-medium);
    font-size: var(--edx-fs-body-md);
    height: 48px;
    padding: 13px 34px;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color var(--edx-dur-medium) var(--edx-ease),
        color            var(--edx-dur-medium) var(--edx-ease),
        border-color     var(--edx-dur-medium) var(--edx-ease),
        box-shadow       var(--edx-dur-medium) var(--edx-ease);
}
.elementor-button:hover,
.elementor-button:focus-visible {
    background: var(--edx-primary-hover);
    color: var(--edx-on-primary);
    border-color: var(--edx-primary-hover);
    text-decoration: none;
}
.elementor-button:active {
    background: var(--edx-primary-active);
    border-color: var(--edx-primary-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.20);
}
.elementor-widget-form .elementor-field,
.elementor-widget-form input.elementor-field,
.elementor-widget-form textarea.elementor-field,
.elementor-widget-form select.elementor-field {
    background: var(--edx-surface);
    color: var(--edx-on-surface);
    border: 1px solid var(--edx-outline-variant);
    border-radius: var(--edx-radius);
    font-family: var(--edx-font-family);
    font-size: 17px;
    font-weight: var(--edx-fw-regular);
    height: 48px;
    padding: 0 16px;
    transition:
        border-color var(--edx-dur-fast) var(--edx-ease),
        box-shadow   var(--edx-dur-fast) var(--edx-ease);
}
.elementor-widget-form textarea.elementor-field {
    height: auto;
    padding: 12px 16px;
}
.elementor-widget-form .elementor-field:focus {
    border-color: var(--edx-primary);
    box-shadow: var(--edx-focus-ring);
    outline: none;
}

/* ------------------------------------------------------------------
   WooCommerce — align high-traffic surfaces with EDUEX tokens.
   We leave the long-tail of WC styles untouched.
   ------------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
    background: var(--edx-primary);
    color: var(--edx-on-primary);
    border: 2px solid var(--edx-primary);
    border-radius: var(--edx-radius-md);
    font-family: var(--edx-font-family);
    font-weight: var(--edx-fw-medium);
    font-size: var(--edx-fs-body-md);
    line-height: 1;
    height: 48px;
    padding: 13px 34px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--edx-dur-medium) var(--edx-ease),
        color            var(--edx-dur-medium) var(--edx-ease),
        border-color     var(--edx-dur-medium) var(--edx-ease),
        box-shadow       var(--edx-dur-medium) var(--edx-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .cart .button:hover,
.woocommerce .cart input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus {
    background: var(--edx-primary-hover);
    color: var(--edx-on-primary);
    border-color: var(--edx-primary-hover);
    text-decoration: none;
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active {
    background: var(--edx-primary-active);
    border-color: var(--edx-primary-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.20);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: var(--edx-surface);
    color: var(--edx-on-surface);
    border: 1px solid var(--edx-outline-variant);
    border-radius: var(--edx-radius);
    font-family: var(--edx-font-family);
    font-size: 16px;
    padding: 0 14px;
    height: 48px;
    box-sizing: border-box;
    transition:
        border-color var(--edx-dur-fast) var(--edx-ease),
        box-shadow   var(--edx-dur-fast) var(--edx-ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--edx-primary);
    box-shadow: var(--edx-focus-ring);
    outline: none;
}
.woocommerce form .form-row label {
    font-family: var(--edx-font-family);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-surface);
    font-size: var(--edx-fs-label-md);
    line-height: var(--edx-lh-label-md);
    margin-bottom: 6px;
}
.woocommerce-info,
.woocommerce-message {
    background: var(--edx-primary-container);
    color: var(--edx-on-primary-container);
    border-top-color: var(--edx-primary);
    border-radius: var(--edx-radius);
}
.woocommerce-error {
    background: var(--edx-error-container);
    color: var(--edx-on-error-container);
    border-top-color: var(--edx-error);
    border-radius: var(--edx-radius);
}
.woocommerce table.shop_table {
    border: 1px solid var(--edx-outline-variant);
    border-radius: var(--edx-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--edx-surface);
}
.woocommerce table.shop_table th {
    background: var(--edx-surface-container-low);
    color: var(--edx-on-surface);
    font-family: var(--edx-font-family);
    font-weight: var(--edx-fw-semibold);
    border-color: var(--edx-outline-variant);
}
.woocommerce table.shop_table td {
    border-color: var(--edx-outline-variant);
    color: var(--edx-on-surface);
}

/* ------------------------------------------------------------------
   Worldpay / WC payment chrome — align surrounding panels only.
   The hosted-fields iframe is opaque; we only touch the chrome.
   ------------------------------------------------------------------ */

#payment .payment_methods {
    border-bottom-color: var(--edx-outline-variant);
}
#payment .payment_methods > li {
    font-family: var(--edx-font-family);
}
#payment .payment_methods li label {
    font-family: var(--edx-font-family);
    font-weight: var(--edx-fw-medium);
    color: var(--edx-on-surface);
}
#payment div.payment_box {
    background: var(--edx-surface-container-lowest);
    color: var(--edx-on-surface);
    border-radius: var(--edx-radius);
    padding: var(--edx-space-sm) var(--edx-space-md);
}
#payment div.payment_box::before {
    border-bottom-color: var(--edx-surface-container-lowest);
}

/* ------------------------------------------------------------------
   Page-level helpers — reusable content sections.
   ------------------------------------------------------------------ */
.edx-page {
    max-width: var(--edx-container-max);
    margin: 0 auto;
    padding: var(--edx-space-lg) var(--edx-space-md);
}
.edx-page__eyebrow {
    display: inline-block;
    font-family: var(--edx-font-family);
    font-size: var(--edx-fs-label-sm);
    font-weight: var(--edx-fw-medium);
    letter-spacing: var(--edx-ls-label-sm);
    text-transform: uppercase;
    color: var(--edx-primary);
    margin-bottom: var(--edx-space-sm);
}
.edx-page__title {
    font-size: var(--edx-fs-headline-lg);
    font-weight: var(--edx-fw-semibold);
    line-height: var(--edx-lh-headline-lg);
    letter-spacing: var(--edx-ls-headline-lg);
    color: var(--edx-on-background);
    margin: 0 0 var(--edx-space-md);
    max-width: 32ch;
}
.edx-page__lede {
    font-size: var(--edx-fs-body-lg);
    line-height: var(--edx-lh-body-lg);
    color: var(--edx-on-surface-variant);
    max-width: 60ch;
    margin: 0 0 var(--edx-space-lg);
}

/* ------------------------------------------------------------------
   Responsive — type scale collapses on small screens; CTAs
   become full-width below 640px.
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
    :root {
        --edx-fs-display:     40px;
        --edx-lh-display:     48px;
        --edx-fs-headline-lg: 32px;
        --edx-lh-headline-lg: 40px;
        --edx-fs-headline-md: 24px;
        --edx-lh-headline-md: 32px;
    }
    .edx-btn { width: 100%; }
    .edx-page { padding: var(--edx-space-md) var(--edx-space-sm); }
}