/* =========================================================================
   Brand foundation — mirrors communityfiber.net/assets/css/global.css

   The checkout flow is where a visitor lands after leaving the main site, so
   the tokens here are copied from that site rather than approximated. Loaded
   BEFORE each page's own stylesheet so pages can still override, but every
   page now shares one palette, one type scale, and one gradient.

   Two things this corrects:
     1. The app only ever had solid greens, so green elements were being placed
        on green surfaces. The brand's actual gradient travels green -> lime ->
        chartreuse, which is what gives it separation.
     2. The app's neutral (#F2F2F2) was slightly off the brand's (#F8FAFC).
   ========================================================================= */

:root {
    /* --- Brand colours (verbatim from the marketing site) --- */
    --cfn-green: #03A63C;
    --cfn-dark-green: #0B8C38;
    --cfn-mute-green: #46A66F;
    --cfn-light-green: #8BD9AD;

    /* The two warm stops that make the brand gradient read as a gradient. */
    --cfn-lime: #73bf4b;
    --cfn-chartreuse: #bdd63a;

    /* Alias: this app spells the token --cfn-dk-green throughout. */
    --cfn-dk-green: var(--cfn-dark-green);

    /* --- Neutrals --- */
    --npt-black: #141414;
    --npt-white: #F8FAFC;
    --npt-grey: #e2e8f0;

    /* --- Typography --- */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    /* --- Gradients --- */
    --cfn-gradient: linear-gradient(45deg, var(--cfn-green), var(--cfn-lime), var(--cfn-chartreuse));
    --cfn-gradient-flat: linear-gradient(90deg, var(--cfn-green), var(--cfn-chartreuse));
    /* Solid-green surfaces (buttons) keep the deeper vertical blend. */
    --cfn-gradient-solid: linear-gradient(135deg, var(--cfn-green) 0%, var(--cfn-dark-green) 100%);
    --cfn-gradient-solid-hover: linear-gradient(135deg, #05b856 0%, #039633 100%);

    /* --- Premium UI tokens --- */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-blur: blur(12px) saturate(180%);
    --glow-green: 0 0 0 1px rgba(3, 166, 60, 0.15), 0 8px 24px rgba(3, 166, 60, 0.18), 0 20px 40px rgba(3, 166, 60, 0.08);
    --glow-green-hover: 0 0 0 1px rgba(3, 166, 60, 0.3), 0 12px 32px rgba(3, 166, 60, 0.28), 0 24px 48px rgba(3, 166, 60, 0.12);
    --transition-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
    --cfn-light-green-dim: rgba(139, 217, 173, 0.15);

    /* --- Contrast rule -------------------------------------------------
       On a green surface, nothing else may be green. These are the two
       treatments the brand uses for controls sitting on colour. */
    --on-green-surface: #ffffff;
    --on-green-surface-muted: rgba(255, 255, 255, 0.82);
}

/* =========================================================================
   Accent utilities, matching the marketing site's vocabulary.
   ========================================================================= */

/* Gradient underline beneath a section heading. */
.brand-underline {
    position: relative;
    padding-bottom: 14px;
}

.brand-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 68px;
    height: 4px;
    border-radius: 999px;
    background: var(--cfn-gradient-flat);
}

.brand-underline.is-centered::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Hairline divider that fades at both ends rather than stopping abruptly. */
.brand-rule {
    border: 0;
    height: 2px;
    margin: 0;
    background: var(--cfn-gradient-flat);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* Ambient glow: the brand's alternative to a solid colour block. */
.brand-glow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.brand-glow > * {
    position: relative;
    z-index: 1;
}

.brand-glow::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: min(52vw, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(3, 166, 60, 0.13), rgba(189, 214, 58, 0.07) 45%, transparent 70%);
    top: -28%;
    right: -14%;
}

.brand-glow--left::before {
    right: auto;
    left: -14%;
}

/* Gradient text for a single emphasised phrase. */
.text-gradient {
    background: -webkit-linear-gradient(45deg, var(--cfn-green), var(--cfn-lime), var(--cfn-chartreuse));
    background: var(--cfn-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cfn-green);
}

/* =========================================================================
   Green-on-green guard.

   Any control inside a surface marked .on-brand-surface drops its green fill
   and becomes white or outlined, which is how the marketing site handles
   controls that sit on colour.
   ========================================================================= */
.on-brand-surface .btn-brand,
.on-brand-surface .action-btn.primary {
    background: var(--on-green-surface);
    color: var(--cfn-dark-green);
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.on-brand-surface .btn-brand:hover,
.on-brand-surface .action-btn.primary:hover {
    background: #ffffff;
    color: var(--cfn-green);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

.on-brand-surface .btn-brand-outline {
    background: transparent;
    color: var(--on-green-surface);
    border: 2px solid rgba(255, 255, 255, 0.55);
}

.on-brand-surface .btn-brand-outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

/* =========================================================================
   Primary button, matching components.css on the marketing site.
   ========================================================================= */
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0.875rem 2rem;
    border: 1px solid transparent;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--cfn-gradient-solid);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(3, 166, 60, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

.btn-brand:hover {
    transform: translateY(-2px);
    background: var(--cfn-gradient-solid-hover);
    box-shadow: 0 12px 24px rgba(3, 166, 60, 0.35), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-brand:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(3, 166, 60, 0.2);
}

.btn-brand:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: #cccccc;
}

@media (prefers-reduced-motion: reduce) {
    .btn-brand,
    .btn-brand:hover,
    .btn-brand:active {
        transform: none;
        transition: none;
    }
}