. position: sticky keeps it on the bottom edge while
you scroll, then it docks in its own place just above the footer, so it never covers the footer. */
.sec-sticky-cta {
position: sticky; bottom: 0; z-index: 40;
padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
background: rgba(245, 239, 230, 0.94); /* --beige, nearly solid so text under it never shows through */
-webkit-backdrop-filter: saturate(1.2) blur(10px);
backdrop-filter: saturate(1.2) blur(10px);
border-top: 1px solid var(--line);
}
.sec-sticky-cta .cta-pill { width: 100%; min-height: 52px; padding-block: 12px; }
/* keyboard focus is never hidden behind the bar (WCAG 2.4.11) */
@media (max-width: 719px) { html:has(.sec-sticky-cta) { scroll-padding-bottom: 96px; } }
@media (min-width: 720px) { .sec-sticky-cta { display: none; } }
/* Out of the way where the page already shows its own buttons (2026-10-17, CSS only):
- while the hero is on screen (its pill and price line sit there; the bar used to cover them on a 375 x 667 phone)
- while the plan cards are on screen: #pricing on buyer pages, #price on academy.
Two scroll-driven animations on opacity and visibility, so a hidden pill can not be tabbed to. Fill mode stays none:
each one only acts inside its own range, so they never fight. Browsers without timeline-scope keep the bar showing. */
@keyframes sticky-away { 0%, 100% { opacity: 1; visibility: visible; } 8%, 92% { opacity: 0; visibility: hidden; } }
@keyframes sticky-hero { 0%, 92% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } /* fades in as the hero's last strip leaves */
@supports (timeline-scope: none) {
body { timeline-scope: --pricing, --hero; }
:is(#pricing, #price) { view-timeline: --pricing; }
:is(.sec-hero-split, .sec-hero-center) { view-timeline: --hero; }
.sec-sticky-cta { animation: sticky-away linear, sticky-hero linear; animation-timeline: --pricing, --hero; animation-range: cover, cover; }
/* the Pause toggle (styles.css 19d) pauses every animation; paused here, the bar froze hidden for the rest of the page */
html[data-motion="paused"] .sec-sticky-cta { animation-play-state: running !important; }
}
/* Optional, older pattern (academy.html still has it, harmless): everything after the hero inside
with the bar as that div's LAST child. Sticky can not rise above its parent's top, so the bar waits for the hero to
leave. Not needed any more: the --hero timeline above does the same on every page. Plain block, no CSS. */
/* Fix (P6, 2026-10-17): accent words in a charcoal band title were charcoal on charcoal, i.e. invisible */
.sec-cta-band .accent-box { color: inherit; }
/* Fix (P3): the Draft tag is unreadable on dark green bands */
.sec-cta-band .tag--draft { color: var(--cream); border-color: var(--cream); }