/* ============================================================================
   Effortless Admin marketing site — shared styles (base, chrome, reusable page components).
   Tokens live in tokens.css. Page-only rules live in css/pages/*.css, linked from each page's @section Styles.
   ============================================================================ */

/* ---- Base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px); /* sticky header */
}

/* The UA stylesheet's `[hidden] { display: none }` loses to any class rule that sets display, and
   several components here do (cards, panels, the carrier search). Islands toggle .hidden on markup
   Razor rendered, so this has to hold everywhere. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.15;
}

p { margin: 0 0 1em; }

a { color: var(--cta); text-decoration: none; }
a:hover { color: var(--cta-h); }

img, svg { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* ---- Skip link (visible on keyboard focus only) ---- */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: var(--r-btn);
    background: var(--ink);
    color: #fff;
    font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* ---- Layout ---- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
}

/* <main> is full-bleed; page sections own their own width and padding. */
main { min-height: 40vh; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}
.btn--primary { background: var(--cta); color: #fff; }
.btn--primary:hover { background: var(--cta-h); color: #fff; }
.btn--outline { background: #fff; color: var(--ink); border-color: #d5d8de; padding: 10px 18px; }
.btn--outline:hover { background: var(--mist); color: var(--ink); }

/* ============================================================================
   Header. No JavaScript: dropdowns open on hover / keyboard focus,
   the small-screen drawer is a checkbox toggle.
   ============================================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 38px;
}

.site-header__brand { display: flex; align-items: center; flex: none; }
.site-header__brand img { height: 44px; width: auto; }

.site-header__menu { display: contents; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 500;
}

.site-nav__group {
    display: flex;
    align-items: center;
    height: var(--header-h); /* spans the bar so the pointer can travel to the panel without closing it */
}

.site-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: var(--r-btn);
    color: var(--ink);
    white-space: nowrap;
}
.site-nav__link:hover,
.site-nav__group:hover > .site-nav__link,
.site-nav__group:focus-within > .site-nav__link {
    background: var(--mist);
    color: var(--ink);
}

.site-nav__chev { width: 10px; height: 10px; color: var(--steel); }

.site-nav__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(24, 34, 51, .10);
}
.site-nav__group:hover > .site-nav__panel,
.site-nav__group:focus-within > .site-nav__panel { display: block; }

.site-nav__panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 26px 32px 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 44px;
}

.menu-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    color: inherit;
}
.menu-item:hover { background: var(--mist); color: inherit; }

.menu-item__icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--blue-tint);
    color: var(--cta);
}
/* Duotone glyphs (DuotoneIcons.Svg): the design's two-tone blue, sized like its 14px <i>.
   Widths differ per glyph, so height leads and the viewBox sets the width. */
.menu-item__icon .icon-duotone { height: 14px; }

.menu-item__title {
    display: block;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}
.menu-item__desc {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
}

.site-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The drawer toggle is a real checkbox styled as a button, so it works with keyboard and without JS. */
.site-nav-toggle { display: none; }

@media (max-width: 959px) {
    .site-header__inner { gap: 16px; padding: 0 20px; }

    .site-nav-toggle {
        display: block;
        margin: 0 0 0 auto;
        width: 44px;
        height: 44px;
        -webkit-appearance: none;
        appearance: none;
        border: 1px solid #d5d8de;
        border-radius: var(--r-btn);
        background: #fff center / 22px 22px no-repeat
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181923' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
        cursor: pointer;
    }
    .site-nav-toggle:checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181923' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    }

    .site-header__menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-h));
        overflow: auto;
        padding: 12px 20px 24px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 40px rgba(24, 34, 51, .10);
    }
    .site-nav-toggle:checked ~ .site-header__menu { display: block; }

    .site-nav { display: block; font-size: 15px; }
    .site-nav__group { display: block; height: auto; }
    .site-nav__link { padding: 12px 10px; font-family: var(--font-display); font-weight: 600; }
    .site-nav__chev { display: none; }

    /* Groups are expanded lists in the drawer. */
    .site-nav__panel { display: block; position: static; border: 0; box-shadow: none; background: transparent; }
    .site-nav__panel-inner { grid-template-columns: 1fr; gap: 2px; padding: 0 0 8px 8px; }
    .menu-item { padding: 8px 10px; }

    .site-header__actions {
        margin: 12px 0 0;
        padding-top: 16px;
        border-top: 1px solid var(--line);
    }
    .site-header__actions .btn { flex: 1; }
}

/* ============================================================================
   Footer
   ============================================================================ */
.site-footer {
    padding: 80px 32px 36px;
    color: #c2cedd;
    background:
        radial-gradient(50% 80% at 12% 0%, rgba(39, 165, 221, .11) 0%, rgba(39, 165, 221, 0) 70%),
        radial-gradient(42% 70% at 88% 8%, rgba(122, 92, 224, .09) 0%, rgba(122, 92, 224, 0) 72%),
        linear-gradient(180deg, #141d31 0%, var(--dk-2) 55%, var(--dk) 100%);
}

.site-footer__grid {
    max-width: var(--container-narrow);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 44px;
}

.site-footer__brand a { display: inline-block; }
.site-footer__brand img { height: 44px; width: auto; }

.site-footer__tagline {
    margin: 16px 0 0;
    max-width: 260px;
    font-size: 14px;
    line-height: 1.65;
    color: #93a5ba;
}

.site-footer__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}

.site-footer__links {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.site-footer__links a { font-size: 14px; color: #c2cedd; }
.site-footer__links a:hover { color: #fff; }

.site-footer__bottom {
    max-width: var(--container-narrow);
    margin: 56px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #8194ab;
}
.site-footer__bottom span:last-child { margin-left: auto; }

@media (max-width: 959px) {
    .site-footer { padding: 56px 24px 28px; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .site-footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 559px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__bottom span:last-child { margin-left: 0; }
}

/* ============================================================================
   Reusable page components (Phase 2). Rules used by two or more pages live here;
   anything used by a single page stays in css/pages/<page>.css.
   ============================================================================ */

/* ---- Inline icons (MarketingSite.Icons.Svg). Sized by the parent's font-size. ----
   Font Awesome glyphs are not all square, so height leads and each glyph's own viewBox
   sets the width, exactly as Font Awesome's <i> does. Never give .icon a fixed width. */
.icon {
    display: inline-block;
    height: 1em;
    width: auto;
    flex: none;
}

/* ---- Video modal (_VideoModal.cshtml, opened by the video-modal island). ----
   Shared: the home page and /why-effortless/ both use it. */
.video-modal {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    padding: 88px 32px 32px;   /* the top gutter is where the close button sits */
    border: 0;
    background: none;
    overflow: visible;
}
/* showModal() makes the page inert but still lets it scroll behind the backdrop. */
html:has(.video-modal[open]) { overflow: hidden; }
.video-modal::backdrop {
    background: rgba(16, 24, 39, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* 1040px at most, and never taller than the space left after the gutters, so the 16:9 frame
   always fits whole - a short laptop window shrinks the panel rather than cropping the player. */
.video-modal__panel {
    position: relative;
    width: min(1040px, 100%, (100dvh - 120px) * 16 / 9);
    margin: 0 auto;
}
.video-modal__close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s;
}
.video-modal__close:hover { background: rgba(255, 255, 255, .24); }
.video-modal__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-card);
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 959px) {
    .video-modal { padding: 64px 20px 20px; }
    .video-modal__panel { width: min(1040px, 100%, (100dvh - 84px) * 16 / 9); }
}

/* ---- Duotone icons (MarketingSite.DuotoneIcons.Svg). ----
   Two layers: fa-primary is the ink, fa-secondary the wash behind it. The ink is the well's own
   `color`, so a well tints its icon with the colour it already sets; only the wash needs declaring,
   as --duo-secondary (and --duo-opacity where the design differs from .42). This is the same pairing
   the design set per icon with --fa-primary-color / --fa-secondary-color. */
.icon-duotone {
    display: inline-block;
    height: 1em;
    width: auto;
    flex: none;
}
.icon-duotone .fa-primary { fill: currentColor; }
.icon-duotone .fa-secondary { fill: var(--duo-secondary, currentColor); opacity: var(--duo-opacity, .42); }

/* ---- Buttons, large size for heroes and CTA panels ---- */
.btn--lg { padding: 15px 26px; font-size: 15.5px; gap: 10px; }
.btn--primary.btn--lg { box-shadow: 0 8px 22px rgba(28, 132, 179, .25); }
.btn .icon { height: 12px; width: auto; }
.btn-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-row--start { justify-content: flex-start; }

/* ---- Sections ---- */
.section { padding: 104px 32px; }
.section--tight { padding: 84px 32px; }
.section--xl { padding: 110px 32px; }
.section--mist { background: var(--mist); }
.section--rule-top { border-top: 1px solid var(--line); }
.section--rule-bottom { border-bottom: 1px solid var(--line); }
.section--dark { color: #fff; }
.section--navy { background: var(--navy); }
.section--dusk {
    background:
        radial-gradient(52% 70% at 14% 0%, rgba(39, 165, 221, .18) 0%, rgba(39, 165, 221, 0) 70%),
        radial-gradient(44% 64% at 86% 92%, rgba(122, 92, 224, .16) 0%, rgba(122, 92, 224, 0) 72%),
        linear-gradient(180deg, var(--dk-3) 0%, var(--dk-2) 100%);
}
.section__inner { max-width: var(--container-narrow); margin: 0 auto; }
.section__inner--narrow { max-width: 1000px; }
.section__intro { max-width: 800px; }
.section__intro--center { margin: 0 auto; text-align: center; }

.eyebrow {
    font-size: 12.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--blue-d);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--purple { color: var(--purple); }

.section__title { margin-top: 16px; font-size: 42px; line-height: 1.1; font-weight: 700; }
.section__title--md { font-size: 34px; line-height: 1.12; }
.section--dark .section__title { color: #fff; }

.lead {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--muted);
    text-wrap: pretty;
}
.lead + .lead { margin-top: 14px; }
.lead--md { font-size: 16.5px; margin-top: 18px; }
.section--dark .lead { color: var(--dk-text); }

/* Two equal columns, stacking on small screens. */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.split--cards { gap: 24px; align-items: stretch; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* ---- Cards ---- */
.card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 40px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(24, 34, 51, .07);
}
.card--mist { background: var(--mist); }
.card--sm { border-radius: var(--r-card-sm); padding: 26px 24px; box-shadow: none; }
.card--sm.card--shadow { box-shadow: 0 18px 40px rgba(24, 34, 51, .07); }
.card__title { margin-top: 18px; font-size: 18px; font-weight: 700; }
.card__body { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.card .link-arrow { margin-top: 26px; }

/* Square icon well at the top of a card. */
.icon-well {
    width: 40px;
    height: 40px;
    border-radius: var(--r-btn);
    background: var(--blue-tint);
    color: var(--cta);
    --duo-secondary: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

/* ---- Text link with a trailing arrow ---- */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--blue-d);
}
.link-arrow:hover { color: var(--blue); }
.link-arrow .icon { height: 11px; width: auto; }
.link-arrow--light { color: #fff; }
.link-arrow--light:hover { color: var(--blue); }

/* ---- Check list (white rows on a mist card) ---- */
.check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.check-list__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink);
}
.check-list__item .icon { color: var(--green); height: 12px; width: auto; margin-top: 4px; }

/* ---- Big-number stat tiles ---- */
.stat-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.stat-tile {
    border: 1px solid var(--line);
    border-radius: var(--r-card-sm);
    padding: 22px;
    background: var(--blue-tint);
}
.stat-tile__n {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: var(--blue-d);
}
.stat-tile__l { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: #3c6a83; }
.stat-tile--green { background: #eef8e9; }
.stat-tile--green .stat-tile__n { color: var(--green-d); }
.stat-tile--green .stat-tile__l { color: #436b2b; }

/* ---- Logo marquee. CSS animation only; the second copy of the list is aria-hidden. ---- */
.marquee {
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 38s linear infinite;
}
.marquee__group {
    display: flex;
    gap: 12px;
    padding-right: 12px;
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.logo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 175px;
    height: 60px;
    padding: 0 20px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
}
.logo-tile img {
    max-width: 100%;
    max-height: 30px;
    width: auto;
    height: auto;
    object-fit: contain;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee { mask-image: none; -webkit-mask-image: none; }
    .marquee__track { animation: none; width: auto; }
    .marquee__group { flex-wrap: wrap; padding-right: 0; }
    .marquee__group[aria-hidden] { display: none; }
}

/* ---- Live-chat proof card (99% rating + a two-message thread) ---- */
.chat-card {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 34px;
    box-shadow: 0 18px 40px rgba(24, 34, 51, .07);
}
.chat-card__n {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: var(--green);
}
.chat-card__lead { margin: 12px 0 0; font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.chat-card__thread {
    margin-top: 24px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chat-msg { display: flex; gap: 12px; align-items: flex-start; }
.chat-msg--reply { flex-direction: row-reverse; }
.chat-msg__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mist);
    border: 1px solid var(--line);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--steel);
    font-size: 13px;
}
.chat-msg--reply .chat-msg__avatar { background: var(--blue-tint); border-color: #cde9f6; color: var(--blue-d); }
.chat-msg__bubble {
    background: var(--mist);
    border-radius: 12px 12px 12px 3px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #56595b;
}
.chat-msg--reply .chat-msg__bubble { background: var(--blue-tint); border-radius: 12px 12px 3px 12px; color: #20586f; }

/* ---- Demo CTA panel (end of Home and Platform) ---- */
.cta-panel {
    max-width: var(--container-narrow);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: var(--r-card-lg);
    padding: 96px 56px 120px;
    background: linear-gradient(#eef7fc 0%, #e8f6fc 100%);
}
.cta-panel__swoops {
    position: absolute;
    left: -193px;
    top: 365px;
    width: 520px;
    opacity: .2;
    pointer-events: none;
}
.cta-panel__inner { position: relative; max-width: 760px; margin: 0 auto; }
.cta-panel__title { font-size: 42px; line-height: 1.08; font-weight: 700; color: var(--ink); }
.cta-panel .lead { margin-top: 22px; }
.cta-panel .lead + .lead { margin-top: 14px; }
.cta-panel .btn-row { margin-top: 34px; }

/* ---- Sticky sub-navigation bar under the header (Platform anchors, Tools list) ---- */
.subnav {
    position: sticky;
    top: var(--header-h);
    z-index: 50;
    background: linear-gradient(180deg, #1e2a3f 0%, var(--navy) 100%);
}
.subnav__inner { max-width: var(--container); margin: 0 auto; padding: 10px 32px; display: flex; min-width: 0; }
.subnav__list {
    display: flex;
    gap: 4px;
    margin: 0 -13px;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    min-width: 0;
    flex: 1 1 0%;
    /* A scroll container still reports its content's min-content width upward; on phones Chrome then widens the
       layout viewport to fit it (seen on /why-effortless/ at 375px). inline-size containment zeroes that report. */
    contain: inline-size;
    scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__link {
    display: block;
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #a9b6c8;
    white-space: nowrap;
}
.subnav__link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.subnav__link--current { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---- Light hero with a decorative backdrop (Platform, Tools) ---- */
.hero { position: relative; overflow: hidden; padding: 88px 32px 72px; }
.hero__backdrop { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__backdrop > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__glow { position: absolute; inset: 0; }
.hero__scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(48% 62% at 50% 44%, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .42) 55%, rgba(255, 255, 255, 0) 100%);
}
.hero__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .62) 74%, rgba(255, 255, 255, .86) 100%);
}
.hero__inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.hero__title { margin-top: 18px; font-size: 72px; line-height: 1.02; font-weight: 800; color: var(--ink); }
.hero__lead { margin: 24px auto 0; max-width: 700px; font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.hero__lead + .hero__lead { margin-top: 16px; }
.hero .btn-row { margin-top: 32px; }

/* Decorative swoops in the corner of a dark section. */
.section__swoops {
    position: absolute;
    right: 44px;
    top: 48px;
    width: 150px;
    opacity: .95;
    pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 959px) {
    .section, .section--tight, .section--xl { padding: 72px 24px; }
    .section__title { font-size: 34px; }
    .section__title--md { font-size: 28px; }
    .split, .split--cards { grid-template-columns: 1fr; gap: 24px; }
    .grid-3 { grid-template-columns: 1fr; }
    .card { padding: 30px 26px; }
    .hero { padding: 64px 24px 56px; }
    .hero__title { font-size: 48px; }
    .cta-panel { padding: 64px 28px 72px; }
    .cta-panel__title { font-size: 34px; }
    .subnav__inner { padding: 8px 24px; }
    .section__swoops { width: 110px; right: 24px; top: 24px; }
}
@media (max-width: 559px) {
    .section, .section--tight, .section--xl { padding: 56px 20px; }
    .section__title { font-size: 30px; }
    .hero { padding: 48px 20px 44px; }
    .hero__title { font-size: 38px; }
    .stat-tiles { grid-template-columns: 1fr; }
    .btn-row .btn { width: 100%; }
    .btn--lg { white-space: normal; text-align: center; }
    .cta-panel { padding: 48px 20px 56px; border-radius: var(--r-card); }
    .chat-card { padding: 26px 20px; }
    .chat-card__n { font-size: 52px; }
}

/* Purple hero glow, shared by the Platform and Tools heroes ("Hero Backdrop", tone Light). */
.hero__glow--purple {
    background:
        radial-gradient(62% 78% at 50% 6%, rgba(122, 92, 224, .30) 0%, rgba(122, 92, 224, .14) 42%, rgba(122, 92, 224, 0) 74%),
        radial-gradient(70% 58% at 50% 100%, rgba(122, 92, 224, .22) 0%, rgba(122, 92, 224, .11) 46%, rgba(122, 92, 224, 0) 80%),
        linear-gradient(180deg, rgba(122, 92, 224, .10) 0%, rgba(122, 92, 224, 0) 68%);
}

/* ============================================================================
   Tool pages (Phase 3): HSA / HCSA lookup, Coverage cost calculator, Flex re-enrollment toolkit.
   Shared frame only. Widget internals ship with each island (Client/*.css -> compiled/assets/).
   ============================================================================ */

/* Hero, same as the design's tool heroes: tighter than the marketing heroes. */
.hero--tool { padding: 76px 32px 60px; }
.hero--tool .hero__inner { max-width: 860px; }
.hero--tool .hero__title { font-size: 58px; line-height: 1.05; }
.hero--tool .hero__lead { margin-top: 26px; font-size: 17.5px; }
.eyebrow--green { color: #4a8a2c; }
.eyebrow--amber { color: #a06a12; }

/* Body section that holds the island. */
.tool-body { padding: 56px 32px 24px; }
.tool-body__inner { max-width: var(--container-narrow); margin: 0 auto; }

/* What the island's mount shows until (or unless) the script runs. A dead widget is the correct failure mode. */
.island-fallback {
    border: 1px dashed #d5d8de;
    border-radius: var(--r-card);
    background: var(--mist);
    padding: 28px 24px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}
.island-fallback p { margin: 0; }
.island-fallback p + p { margin-top: 8px; }

/* Closing split: "Why it matters" / "How eligibility works" beside a Related panel. */
.tool-foot { padding: 56px 32px 88px; }
.tool-foot__inner {
    max-width: var(--container-narrow);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
.tool-foot__copy { min-width: 0; }
.tool-foot__title { font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.tool-foot .lead { margin-top: 16px; line-height: 1.7; }
.tool-foot .lead + .lead { margin-top: 14px; }
.tool-foot .btn-row { margin-top: 24px; justify-content: flex-start; }
.tool-foot .btn--lg { padding: 14px 24px; font-size: 15px; }
.tool-related {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--mist);
    padding: 26px 28px;
}
.tool-related__label {
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--steel);
}
.tool-related__links { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tool-related__links a { font-size: 15px; font-weight: 600; color: var(--cta); }
.tool-related__links a:hover { color: var(--blue); }

/* Purple call-out panel (Tools index, Toolkit). */
.tools-cta__panel {
    border: 1px solid rgba(122, 92, 224, .26);
    border-radius: var(--r-card);
    background: rgba(122, 92, 224, .06);
    padding: 34px 36px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.tools-cta__copy { flex: 1; min-width: 260px; }
.tools-cta__title { font-size: 24px; line-height: 1.25; font-weight: 700; color: #2f2452; }
.tools-cta__body { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: #4a3a86; text-wrap: pretty; }

@media (max-width: 959px) {
    .hero--tool { padding: 60px 24px 48px; }
    .hero--tool .hero__title { font-size: 44px; }
    .tool-body { padding: 40px 24px 16px; }
    .tool-foot { padding: 40px 24px 64px; }
    .tool-foot__inner { grid-template-columns: 1fr; gap: 28px; }
    .tools-cta__panel { padding: 28px 24px; }
}
@media (max-width: 559px) {
    .hero--tool { padding: 48px 20px 40px; }
    .hero--tool .hero__title { font-size: 34px; }
    .tool-body { padding: 32px 16px 12px; }
    .tool-foot { padding: 32px 20px 56px; }
    .tool-related { padding: 22px 20px; }
}

/* ============================================================================
   Shared rules consolidated in Phase 4. Each rule below was written identically by two or more
   page stylesheets (dark page frame, gold buttons, legal-page layout, the _PlatformMore strip,
   hero glow tones, the visually-hidden helper). Page files keep only what is unique to them.
   ============================================================================ */

/* Anchor links on pages with a sticky .subnav must land below header + sub-nav. */
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 56px + 16px); }
@media (max-width: 959px) {
    html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 50px + 12px); }
}

.hero--dark { background: var(--dk-2); }
.hero--dark .hero__inner { max-width: 920px; }
.hero--dark .btn-row { margin-top: 34px; }
.hero__glow--dark {
    background:
        radial-gradient(62% 78% at 50% 4%, rgba(250, 175, 66, .22) 0%, rgba(250, 175, 66, .08) 44%, rgba(250, 175, 66, 0) 74%),
        radial-gradient(70% 58% at 50% 100%, rgba(39, 165, 221, .16) 0%, rgba(39, 165, 221, .06) 48%, rgba(39, 165, 221, 0) 80%),
        linear-gradient(180deg, #16203a 0%, #101827 62%, #0d1420 100%);
}
.hero--dark .hero__scrim { background: radial-gradient(46% 60% at 50% 42%, rgba(16, 24, 39, .86) 0%, rgba(16, 24, 39, .46) 56%, rgba(16, 24, 39, 0) 100%); }
.hero--dark .hero__fade { background: linear-gradient(180deg, rgba(13, 20, 32, 0) 0%, rgba(13, 20, 32, .62) 74%, rgba(13, 20, 32, .92) 100%); }
.subnav--dark {
    background: rgba(13, 20, 32, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(250, 175, 66, .22);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.subnav--dark .subnav__link { color: var(--dk-dim); }
.subnav--dark .subnav__link:hover { background: rgba(250, 175, 66, .14); color: var(--gold); }
.section--dk { background: var(--dk); }
.section--dk-2 { background: var(--dk-2); }
.section--rule-top-dk { border-top: 1px solid rgba(255, 255, 255, .08); }
.btn--gold { background: var(--gold); color: #231a06; font-weight: 700; }
.btn--gold:hover { background: #ffc061; color: #231a06; }
.btn--gold.btn--lg { box-shadow: 0 10px 26px rgba(250, 175, 66, .24); }
.btn--ghost-dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .20); color: #fff; }
.btn--ghost-dark:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.dk-tile {
    min-width: 0;
    border: 1px solid var(--dk-line);
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .04);
    padding: 28px 26px;
}
.dk-tile__n { font-family: var(--font-display); font-size: 44px; line-height: 1; font-weight: 800; color: #fff; }
.dk-tile__l { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--dk-dim); text-wrap: pretty; }
.dk-tile--green { border-color: rgba(112, 190, 68, .28); background: rgba(112, 190, 68, .10); }
.dk-tile--green .dk-tile__n { color: var(--green-l); }
.dk-tile--green .dk-tile__l { color: #cfe6bd; }
.icon-well--gold { background: rgba(250, 175, 66, .14); border: 1px solid rgba(250, 175, 66, .32); color: var(--gold); --duo-secondary: #ffd694; --duo-opacity: .34; }
.cta-panel--dark {
    border: 1px solid rgba(250, 175, 66, .28);
    background:
        radial-gradient(62% 90% at 50% 0%, rgba(250, 175, 66, .18) 0%, rgba(250, 175, 66, 0) 70%),
        linear-gradient(180deg, #16203a 0%, #101827 100%);
    padding: 84px 56px 92px;
}
.cta-panel--dark .cta-panel__inner { max-width: 740px; }
.cta-panel--dark .cta-panel__title { color: #fff; }
.cta-panel--dark .lead { color: var(--dk-text); }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hero__glow--blue {
    background:
        radial-gradient(62% 78% at 50% 6%, rgba(39, 165, 221, .30) 0%, rgba(39, 165, 221, .14) 42%, rgba(39, 165, 221, 0) 74%),
        linear-gradient(180deg, rgba(39, 165, 221, .10) 0%, rgba(39, 165, 221, 0) 68%);
}
.hero__glow--green {
    background:
        radial-gradient(62% 78% at 50% 6%, rgba(112, 190, 68, .30) 0%, rgba(112, 190, 68, .14) 42%, rgba(112, 190, 68, 0) 74%),
        linear-gradient(180deg, rgba(112, 190, 68, .10) 0%, rgba(112, 190, 68, 0) 68%);
}
.hero--dark .hero__glow--dark {
    background:
        radial-gradient(62% 78% at 50% 4%, rgba(250, 175, 66, .22) 0%, rgba(250, 175, 66, .08) 44%, rgba(250, 175, 66, 0) 74%),
        radial-gradient(70% 58% at 50% 100%, rgba(39, 165, 221, .16) 0%, rgba(39, 165, 221, .06) 48%, rgba(39, 165, 221, 0) 80%),
        linear-gradient(180deg, #16203a 0%, #101827 62%, #0d1420 100%);
}
.btn--ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .20); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.section--dk2 { background: var(--dk-2); }
.section--dk-rule { border-top: 1px solid rgba(255, 255, 255, .08); }
.dk-panel {
    max-width: var(--container-narrow);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(250, 175, 66, .28);
    border-radius: var(--r-card-lg);
    padding: 84px 56px 92px;
    background:
        radial-gradient(62% 90% at 50% 0%, rgba(250, 175, 66, .18) 0%, rgba(250, 175, 66, 0) 70%),
        linear-gradient(180deg, #16203a 0%, #101827 100%);
}
.dk-panel__inner { position: relative; max-width: 720px; margin: 0 auto; }
.dk-panel__title { font-size: 42px; line-height: 1.08; font-weight: 700; color: #fff; }
.dk-panel .lead { margin-top: 22px; color: var(--dk-text); }
.dk-panel .btn-row { margin-top: 34px; }
.platform-more { padding: 72px 32px 0; }
.platform-more__list {
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
/* The three rows line up across the cards: the label always occupies two lines, so every
   title starts at the same height, and the link is pushed to the bottom of a stretched
   card, so every link sits on one line too - whether the title above it ran to one line
   or two. Hover lifts the card the way the home page's article cards do. */
.platform-more__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card-sm);
    background: #fff;
    padding: 20px 20px 22px;
    color: var(--ink);
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.platform-more__item:hover {
    border-color: rgba(122, 92, 224, .42);
    color: var(--ink);
    box-shadow: 0 14px 34px rgba(24, 34, 51, .10);
    transform: translateY(-3px);
}
.platform-more__label {
    display: block;
    font-size: 11.5px;
    line-height: 1.35;
    min-height: 2.7em;   /* two lines: "Billing & reconciliation" wraps, "Overview" does not */
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--steel);
}
.platform-more__title { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 16px; line-height: 1.3; font-weight: 700; }
.platform-more__more { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--cta); }
.platform-more__more .icon { height: 10px; width: auto; }
.pf-demo .cta-panel { padding: 84px 56px 96px; }
.pf-demo .cta-panel__inner { max-width: 720px; }
.pf-demo .cta-panel__swoops { top: auto; bottom: -40px; left: -190px; }
.legal-hero { padding: 76px 32px 60px; }
.legal-hero .hero__inner { max-width: 820px; }
.legal-hero .hero__title { font-size: 58px; line-height: 1.05; }
.legal-hero .hero__lead { max-width: 660px; font-size: 17.5px; }
.legal-principles { padding: 0 32px 24px; }
.legal-principles__inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.legal-principle {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card-sm);
    background: #fff;
    padding: 22px 22px 24px;
    box-shadow: 0 12px 28px rgba(24, 34, 51, .05);
}
.legal-principle__icon { width: 38px; height: 38px; border-radius: 10px; font-size: 15px; }
.legal-principle__title {
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-size: 15.5px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}
.legal-principle__body { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.legal-body { padding: 72px 32px 96px; }
/* Contents rail on the left, sections on the right - the same shape /brand/ and /security-trust/
   use. Below 959px it collapses to a row of pills above the text (see the media query). */
.legal-body__inner {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.legal-toc { position: sticky; top: calc(var(--header-h) + 38px); min-width: 0; }
.legal-toc__label {
    margin: 0;
    padding: 0 12px 8px;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--steel);
}
.legal-toc__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.legal-toc__list a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}
.legal-toc__list a:hover { background: var(--mist); color: var(--ink); }
.legal-body__main { min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.legal-section__title { font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.legal-section__text { margin: 16px 0 0; font-size: 17px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.legal-section__text + .legal-section__text { margin-top: 14px; }
.legal-section__btn { margin-top: 18px; padding: 13px 22px; font-size: 15px; gap: 10px; }
.legal-section__btn .icon { height: 11px; width: auto; }
.legal-panel { padding: 30px 32px; }
.legal-panel .tools-cta__title { font-size: 22px; }
.legal-panel .btn--lg { padding: 14px 24px; font-size: 15px; }
.legal-panel .btn .icon { height: 11px; width: auto; }