/* ==========================================================================
   Our additions to the design's navbar and footer. Loaded on every page, straight
   after design.css, because the chrome is the same on all of them: the home page
   doesn't load styles.css, and inner pages don't load home.css.
   ========================================================================== */

/* Someone tabbing through the bar must be able to see it, even if it hid on the way down. */
.nav.is-hidden:has(:focus-visible) { transform: none; }

/* The navbar's menus (nav.js). The buttons copy the design's link states, on each of
   the bar's three looks: over the dark opening, settled white, and settled dark. */
.nav__links a { white-space: nowrap; }
.nav__group { position: relative; display: flex; }
.nav__group-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 16px; border-radius: var(--radius-pill); font-size: var(--text-base); font-weight: 600; white-space: nowrap; color: rgba(255,255,255,.82); transition: color .3s, background-color .3s; }
.nav__group-btn svg { width: 11px; height: 11px; transition: transform .25s var(--ease); }
.nav__group.is-open .nav__group-btn svg { transform: rotate(180deg); }
.nav__group-btn:hover, .nav__group.is-open .nav__group-btn { color: var(--white); background: rgba(255,255,255,.1); }
.nav.is-scrolled .nav__group-btn { color: var(--ink-2); }
.nav.is-scrolled .nav__group-btn:hover, .nav.is-scrolled .nav__group.is-open .nav__group-btn { color: var(--azure); background: var(--ice); }
.nav.is-scrolled.is-dark .nav__group-btn { color: rgba(255,255,255,.8); }
.nav.is-scrolled.is-dark .nav__group-btn:hover, .nav.is-scrolled.is-dark .nav__group.is-open .nav__group-btn { color: var(--white); background: rgba(255,255,255,.1); }
/* Its own rules: a browser without :has() drops the whole selector list it appears in. */
.nav__group:has(a[aria-current="true"]) .nav__group-btn { color: var(--white); background: rgba(255,255,255,.1); }
.nav.is-scrolled .nav__group:has(a[aria-current="true"]) .nav__group-btn { color: var(--azure); background: var(--ice); }
.nav.is-scrolled.is-dark .nav__group:has(a[aria-current="true"]) .nav__group-btn { color: var(--white); background: rgba(255,255,255,.1); }
/* The section highlight on a link that leads to another page: it looks like aria-current
   in design.css, without telling a screen reader that the link is where they are. */
.nav__links a.is-section { color: var(--white); background: rgba(255,255,255,.1); }
.nav.is-scrolled .nav__links a.is-section { color: var(--azure); background: var(--ice); }
.nav.is-scrolled.is-dark .nav__links a.is-section { color: var(--white); background: rgba(255,255,255,.1); }

/* Solid, because a blur here would sample nothing: the settled bar has its own backdrop filter. */
.nav__panel { position: absolute; top: calc(100% + 14px); left: 0; display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 8px; border-radius: var(--radius-md); background: var(--navy-950); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px -16px rgba(0,18,31,.55); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
/* Carries the pointer across the gap between the button and the panel. */
.nav__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; }
.nav.is-scrolled .nav__panel { background: var(--white); border-color: rgba(15,23,42,.08); box-shadow: 0 18px 40px -16px rgba(0,40,80,.3); }
.nav.is-scrolled.is-dark .nav__panel { background: var(--navy-950); border-color: rgba(255,255,255,.12); box-shadow: 0 18px 40px -16px rgba(0,18,31,.55); }
.nav__links .nav__panel a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); }
.nav__group.is-open .nav__panel, html:not(.nav-js) .nav__group:hover .nav__panel, html:not(.nav-js) .nav__group:focus-within .nav__panel { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-duration: .2s, .2s, 0s; }
@media (prefers-reduced-motion: reduce) {
    .nav__panel, .nav__group-btn svg { transition: none; }
}

/* The mobile menu's groups. An open group can outgrow a phone's height, so the links
   scroll on their own, between the bar and the button, and nothing passes behind the logo. */
.mobile-menu nav { flex: 0 1 auto; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.mobile-menu > :not(nav) { flex: none; }
/* Drawn inside the row, because the scrolling list clips anything outside it. */
.mobile-menu nav :focus-visible { outline-color: var(--cyan); outline-offset: -3px; }
.mobile-menu details { border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-menu summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: var(--text-h3); font-weight: 800; letter-spacing: -.03em; color: var(--white); cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary svg { flex: none; width: 20px; height: 20px; transition: transform .25s var(--ease); }
.mobile-menu details[open] summary svg { transform: rotate(180deg); }
.mobile-menu nav details a { display: flex; align-items: center; min-height: 44px; padding: 4px 0 4px 16px; font-size: var(--text-xl); font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.82); border-bottom: 0; }
.mobile-menu details[open] { padding-bottom: 10px; }

/* Back to top. Kept off the mobile menu, which sits beneath it in the stacking order. */
.to-top { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--white); background: linear-gradient(135deg, #3fb6ff 0%, var(--azure) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 12px 30px -10px rgba(0,60,120,.6); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease); }
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top.is-visible:hover { transform: translateY(-2px); }
/* Steps aside for anything that takes the same corner (main.js: the home story's day counter). */
.to-top.is-yielding, body.menu-open .to-top { opacity: 0; visibility: hidden; }
@media (max-width: 719px) { .to-top { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* Links to the pages that rank under their own URLs, under the copyright line. */
.footer__more { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: var(--text-md); }
.footer__more a { color: inherit; transition: color .3s; }
.footer__more a:hover { color: var(--white); }
@media (max-width: 719px) {
    .footer__more { gap: 4px 24px; }
    .footer__more a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The site's primary button (owner, 2026-11-06): white text on navy to just past azure, on every
   page and every background, in place of the design's navy on cyan. White passes 4.5:1 at every
   point of it, where on the design's cyan it is about 1.5:1. It covers the design's .btn--primary,
   the inner pages' .btn-primary and the /payments form's .btn-next; outline and ghost buttons are
   left alone. The extra .btn (button. on .btn-next) outranks styles.css's hover and focus colours
   and payments.css, which load after this file. */
:root {
    --ep-mkt-btn: linear-gradient(100deg, var(--navy-700) 0%, var(--azure) 60%, #0a74de 100%);
    --ep-mkt-btn-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 12px 32px -10px rgba(0, 102, 204, .6);
    --ep-mkt-btn-shadow-hover: 0 0 0 1px rgba(255, 255, 255, .28) inset, 0 18px 44px -10px rgba(0, 102, 204, .75);
}
.btn.btn--primary, .btn.btn-primary, button.btn-next,
.btn.btn--primary:hover, .btn.btn--primary:active, .btn.btn--primary:focus,
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus,
button.btn-next:hover, button.btn-next:active, button.btn-next:focus {
    --fg: var(--white);
    color: var(--white);
    background: var(--ep-mkt-btn);
}
.btn.btn--primary, .btn.btn-primary, button.btn-next { box-shadow: var(--ep-mkt-btn-shadow); }
.btn.btn--primary:hover, .btn.btn-primary:hover, button.btn-next:hover { box-shadow: var(--ep-mkt-btn-shadow-hover); }
.btn.btn--primary::after, .btn.btn-primary::after {
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
}
/* The /payments buttons were square-cornered teal; the primary one takes the site's pill. */
button.btn-next { border-radius: var(--radius-pill); }

/* The demo dialog's submit carries a send icon; the spinner takes its place while it sends. */
.btn.demo__submit:hover .btn__icon { transform: translate(2px, -2px); }
.btn.demo__submit .spinner { border-color: rgba(255, 255, 255, .3); border-top-color: var(--white); }
.btn.demo__submit.is-loading .btn__icon { display: none; }

.demo__human { margin-top: 20px; }
.demo__human:empty { display: none; }