/* The Alice banner + footer, for the document pages (About, Support, Privacy,
   Terms, Refund).

   Those pages keep their OWN body: style.css, DM Serif Display + Inter, the cream
   document column. Jase, 2026-08-06: "its document and legal, so i decided to keep
   the fonts... However we need to update the Banner and Footer (to be consistent)".
   So this file changes the top and the bottom of the page and nothing in between.

   Everything above the SEAM is EXTRACTED from base.css by scratchpad
   extract-shell.mjs, then scoped to .doc-page - never hand-copied. The shell rules
   are scattered across four media queries, and style.css independently uses
   .footer-links / .footer-brand / .footer-bottom / .footer-wordmark / .skip-link
   for a DIFFERENT design, so the extra class is what settles the collision. If
   base.css_s header or footer changes, re-run the extractor rather than patching
   below. */

@font-face {
  font-family: "Alice Display";
  src: url("../../assets/fonts/alice-display/AliceDisplay-Heavy.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --black: #000;
  --white: #fff;
  --yellow: #fff0b2;
  /* ⛔ The NAME is historical. Jase swapped the bright pink for green
     site-wide on 2026-08-19 ("too pink"); the variable is still called
     --magenta so the ~50 usages did not all have to be touched, and so
     going back is one line. Value = the green already used by the
     "PAID" toast. */
  --magenta: #00a63f;
  --blue: #3b42c4;
  --purple: #7b34ce;
  --green: #00843d;
  --green-soft: #9fd3b4;
  --red: #e8402c;
  --red-deep: #b42318;
  --sky-pale: #ddf3ff;
  --yellow-bright: #fff100;
  --off-white: #edf2ed;
  --lavender: #ceb0dc;
  --line-dark: rgba(0, 0, 0, .1);
  --line-light: rgba(255, 255, 255, .14);
  --display: "Figtree", Arial, sans-serif;
  --headline: "Alice Display", "Arial Black", "Figtree", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --page-pad: clamp(20px, 3.25vw, 64px);
  --header-height: 78px;
}

body.doc-page.menu-open {
  overflow: hidden;
}

.doc-page .skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  translate: 0 -150%;
  background: var(--white);
  color: var(--black);
  font-family: var(--mono);
  text-transform: uppercase;
}

.doc-page .skip-link:focus {
  translate: 0;
}

.doc-page .site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  width: 100%;
  padding: 18px var(--page-pad) 0;
  pointer-events: none;
}

.doc-page .nav-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  min-height: var(--header-height);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 26px;
  color: var(--white);
  transition: min-height .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
  pointer-events: auto;
}

.doc-page .site-header.is-past-hero-cta .nav-shell {
  min-height: 64px;
  border-color: rgba(255, 255, 255, .32);
  background: linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(255, 217, 244, .72));
  box-shadow: 0 16px 50px rgba(0, 0, 0, .09);
  color: var(--black);
  backdrop-filter: blur(18px) saturate(1.2);
}

.doc-page .brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
}

.doc-page .brand-dot {
  width: 14px;
  height: 14px;
  margin-left: -4px;
  object-fit: contain;
}

.doc-page .brand-dot {
  translate: 0 13px;
}

.doc-page .site-header .brand-dot {
  width: 28px;
  height: 28px;
  margin-left: 0;
  translate: none;
}

.doc-page .brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 48px;
  font-size: 60px;
  font-style: italic;
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.12em;
  text-transform: lowercase;
}

.doc-page .desktop-nav {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
  gap: clamp(24px, 3vw, 56px);
}

.doc-page .header-actions {
  display: inline-flex;
  grid-column: 3;
  grid-row: 1;
  align-items: center;
  gap: 24px;
  justify-self: end;
}

.doc-page .header-login {
  display: inline-grid;
  min-height: 52px;
  padding: 10px 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 500 14px/1 var(--mono);
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
  white-space: nowrap;
}

.doc-page .header-login:hover {
  background: rgba(255, 255, 255, .16);
}

.doc-page .header-cta {
  display: inline-grid;
  min-width: 168px;
  min-height: 52px;
  place-items: center;
  border-radius: 999px;
  background: var(--magenta);
  color: var(--white);
  font: 500 13px/1 var(--mono);
  letter-spacing: .02em;
  opacity: 0;
  text-transform: uppercase;
  translate: 0 -8px;
  transition: opacity .25s ease, translate .25s ease, visibility .25s;
  visibility: hidden;
  pointer-events: none;
}

.doc-page .site-header.is-past-hero-cta .header-cta {
  opacity: 1;
  translate: 0;
  visibility: visible;
  pointer-events: auto;
}

.doc-page .desktop-nav a,
.doc-page .nav-actions a,
.doc-page .menu-button {
  font: 500 14px/1 var(--mono);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.doc-page .desktop-nav a,
.doc-page .nav-actions > a:not(.nav-cta) {
  position: relative;
  padding: 10px 0;
}

.doc-page .desktop-nav a::after,
.doc-page .nav-actions > a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  scale: 0 1;
  transform-origin: right;
  transition: scale .25s ease;
}

.doc-page .desktop-nav a:hover::after,
.doc-page .nav-actions > a:not(.nav-cta):hover::after {
  scale: 1 1;
  transform-origin: left;
}

.doc-page .desktop-nav a[aria-current="page"]::after {
  scale: 1 1;
  transform-origin: center;
}

.doc-page .nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.doc-page .menu-button,
.doc-page .mobile-menu {
  display: none;
}

.doc-page .pill:hover,
.doc-page .mega-pill:hover,
.doc-page .nav-cta:hover {
  translate: 0 -2px;
}

.doc-page .grid-bg {
  background-image: none;
}

.doc-page .grid-magenta {
  --grid-color: rgba(255, 255, 255, .36);
  background-color: var(--magenta);
}

.doc-page .site-footer {
  min-height: 1220px;
  padding: 110px var(--page-pad) 80px;
  background: var(--black);
  color: var(--white);
}

.doc-page .footer-links {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 56px;
  max-width: 1320px;
  margin: 0 auto 110px;
}

.doc-page .footer-brand p {
  max-width: 250px;
  margin-top: 24px;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}

.doc-page .footer-brand-mark {
  font-size: 90px;
}

.doc-page .footer-links h3 {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, .4);
  font: 500 12px/1 var(--mono);
  text-transform: uppercase;
}

.doc-page .footer-links > div:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-page .footer-links a {
  font-size: 15px;
}

.doc-page .footer-wordmark {
  display: flex;
  min-height: 360px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  margin-bottom: 90px;
  overflow: hidden;
  font-size: clamp(52px, 8.8vw, 148px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.08em;
  white-space: nowrap;
}

.doc-page .footer-wordmark > * {
  flex: 0 0 auto;
}

.doc-page /* The switch sits in the BLACK above the magenta band,
.doc-page not inside it — it reads as
   "switch it on" and then the band says what you get. It hangs off .footer-links
   rather than a wrapper element because this footer is on all 7 pages,
.doc-page so markup
   would mean overlaying 7 HTML files instead of one stylesheet. .footer-links is a
   4-column grid,
.doc-page hence the span-and-centre.
   ⛔ Its STATIC state is ON — green,
.doc-page knob right — because that is the finished state;
   the keyframes only supply the OFF it starts from. So under reduced motion,
.doc-page or if the
   animation is ever dropped,
.doc-page it still reads as switched on rather than stuck off.

   ⛔ 4s is a SHARED CLOCK,
.doc-page not just this switch's speed. The word below only glitches
   while the switch is ON,
.doc-page and the only way to gate one CSS animation on another is to
   put both on the same period and let the keyframes agree on the windows:
     0-5% off · 5-15% slide on · 15-55% ON · 55-65% slide off · 65-100% off
   so it flips every 2s and the glitch lives inside 15-55%. Change this duration and you
   must change the glitch duration with it,
.doc-page or the word will glitch while it reads off. */
.footer-links {
  --tgl-w: clamp(124px, 14vw, 208px);
  --tgl-h: clamp(66px, 7.4vw, 110px);
  --tgl-pad: calc(var(--tgl-h) * .115);
  --tgl-knob: calc(var(--tgl-h) - var(--tgl-pad) * 2);
  --tgl-on: calc(var(--tgl-w) - var(--tgl-knob) - var(--tgl-pad));
}

.doc-page .footer-links::after {
  content: "";
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: clamp(30px, 4vw, 62px);
  /* .footer-links carries a 110px bottom margin; pull most of it back so the switch
  reads as paired with the band underneath rather than floating in the black. */
  margin-bottom: calc(clamp(28px, 5vw, 70px) * -1);
  width: var(--tgl-w);
  height: var(--tgl-h);
  border-radius: 999px;
  background-color: var(--green);
  background-image: radial-gradient(circle closest-side, #fff 97%, transparent 100%);
  background-repeat: no-repeat;
  background-position: var(--tgl-on) center;
  background-size: var(--tgl-knob) var(--tgl-knob);
  box-shadow: inset 0 calc(var(--tgl-h) * .055) 0 rgba(0, 0, 0, .16);
  animation: footer-toggle-on 4s cubic-bezier(.62, .04, .3, 1) infinite;
}

.doc-page .footer-wordmark strong {
  padding: .2em .12em .28em;
  background: var(--purple);
  color: var(--white);
}

.doc-page /* 21st.dev "Animated Glitch Text",
.doc-page translated to vanilla CSS. Theirs is React +
   framer-motion + Tailwind and stacks three RGB copies of the text,
.doc-page each on its own
   clock (.15s / .13s / .11s) so the three beat against each other and the jitter never
   looks looped. There is no framework here,
.doc-page so the three layers become three animations
   — RGB split,
.doc-page jitter,
.doc-page flicker. steps(1,
.doc-page end) rather than a smooth ease: a glitch snaps.

   ⛔ All three run at 4s,
.doc-page the SWITCH's period,
.doc-page because the word must only glitch while
   the switch reads ON. CSS cannot gate one animation on another,
.doc-page so instead each one
   spends 0-15% and 55-100% pinned to a neutral value (zero-offset shadows,
.doc-page identity
   transform,
.doc-page opacity 1) and only chatters inside the ON window. That is also why they
   are no longer `alternate` — the A/B flip is written into the stops. The three flip
   counts (10 / 16 / 14) are deliberately coprime-ish so they stay out of phase with each
   other exactly as the three original durations did,
.doc-page and the first and last two flips of
   each are scaled down so the glitch arrives and leaves with the knob instead of popping.
   These keyframes are generated,
.doc-page not hand-tuned — re-generate rather than nudge a stop.

   ⛔ On the inner span,
.doc-page NOT on `strong`. `strong` carries the purple block,
.doc-page and a
   transform moves an element together with its background and any pseudo-element — so
   animating `strong` shook the purple along with the word. The span is the text's own
   box: it glitches,
.doc-page the block behind it stays put. inline-block is required,
.doc-page an inline
   element ignores transform entirely. */
.footer-wordmark strong > span {
  display: inline-block;
  animation:
  footer-glitch-rgb 4s steps(1, end) infinite,
  footer-glitch-shift 4s steps(1, end) infinite,
  footer-glitch-flicker 4s steps(1, end) infinite;
}

.doc-page .footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 54px;
}

.doc-page .footer-bottom small {
  align-self: flex-end;
  color: rgba(255, 255, 255, .42);
  font: 500 11px/1 var(--mono);
}

.doc-page .mega-pill {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 168px;
  border-radius: 999px;
  /* Deliberately NOT the pastel --yellow: Jase wants the original ManyChat bright
  yellow on this one closing button. */
  background: var(--yellow-bright);
  color: var(--black);
  font: 500 15px/1 var(--mono);
  text-transform: uppercase;
  transition: translate .2s ease;
}

@media (max-width: 1100px) {
  .doc-page .nav-shell {
    grid-template-columns: 100px 1fr 230px;
  }

  .doc-page .desktop-nav {
    gap: 22px;
  }
}

@media (max-width: 900px) {
  .doc-page .site-header {
    padding: 10px 12px 0;
  }

  .doc-page .nav-shell {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--header-height);
    padding: 0 14px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .doc-page .site-header.is-past-hero-cta .nav-shell {
    min-height: 64px;
    border-color: rgba(255, 255, 255, .65);
    background: linear-gradient(90deg, rgba(255, 255, 255, .88), rgba(255, 222, 246, .82), rgba(255, 224, 190, .8));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .09);
    color: var(--black);
    backdrop-filter: blur(18px) saturate(1.22);
  }

  .doc-page .site-header.menu-active .nav-shell {
    border-color: rgba(255, 255, 255, .65);
    background: linear-gradient(90deg, rgba(255, 255, 255, .88), rgba(255, 222, 246, .82), rgba(255, 224, 190, .8));
    color: var(--black);
    backdrop-filter: blur(18px) saturate(1.22);
  }

  .doc-page .brand-mark {
    width: 40px;
    height: 38px;
    font-size: 45px;
  }

  .doc-page .brand-dot {
    width: 11px;
    height: 11px;
    margin-left: -2px;
    translate: 0 10px;
  }

  .doc-page .desktop-nav,
.doc-page .nav-actions {
    display: none;
  }

  .doc-page .header-actions {
    margin-left: auto;
    margin-right: 14px;
  }

  .doc-page .header-login {
    display: none;
  }

  .doc-page .header-cta {
    position: static;
    min-width: 150px;
    min-height: 48px;
    font-size: 11px;
  }

  .doc-page .menu-button {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 11px 8px;
    border: 0;
    place-content: center;
    gap: 5px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .doc-page .menu-button span {
    display: block;
    width: 28px;
    height: 1.5px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }

  .doc-page .menu-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .doc-page .menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .doc-page .menu-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .doc-page .mobile-menu {
    display: grid;
    margin: 8px 0 0;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 24px;
    gap: 6px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
    color: var(--black);
    pointer-events: auto;
    backdrop-filter: blur(18px);
  }

  .doc-page .mobile-menu[hidden] {
    display: none;
  }

  .doc-page .mobile-menu a {
    display: flex;
    min-height: 48px;
    padding: 0 14px;
    align-items: center;
    border-radius: 15px;
    font: 500 12px/1 var(--mono);
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  .doc-page .mobile-menu a[aria-current="page"] {
    background: var(--yellow);
  }

  .doc-page .mobile-menu .mobile-menu-login {
    justify-content: center;
    background: var(--black);
    color: var(--white);
  }

  .doc-page .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .doc-page .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .doc-page .site-header {
    padding: 10px 12px 0;
  }

  .doc-page .nav-shell,
.doc-page .site-header.is-past-hero-cta .nav-shell {
    min-height: 58px;
    padding: 0 12px 0 14px;
    border-radius: 19px;
  }

  .doc-page .nav-shell {
    border-width: 0;
  }

  .doc-page .site-header.is-past-hero-cta .nav-shell {
    border-width: 1px;
  }

  .doc-page .header-actions {
    margin-right: 4px;
  }

  .doc-page .header-cta {
    min-width: 142px;
    font-size: 10px;
  }

  .doc-page .menu-button {
    width: 44px;
    height: 44px;
  }

  .doc-page .mobile-menu {
    margin: 6px 0 0;
    border-width: 1px;
    border-radius: 19px;
  }

  .doc-page .site-footer {
    min-height: auto;
    padding: 90px 18px 50px;
  }

  .doc-page .footer-links {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 80px;
    gap: 44px 24px;
  }

  .doc-page .footer-wordmark {
    min-height: 220px;
    margin-right: -18px;
    margin-bottom: 60px;
    margin-left: -18px;
    font-size: min(56px, 10.8vw);
  }

  .doc-page .mega-pill {
    min-height: 118px;
  }
}

.doc-page .hero h1,
.doc-page .section-intro h2,
.doc-page .feature-slide h2,
.doc-page .social-content h2,
.doc-page .social-copy h2,
.doc-page .channels h2,
.doc-page .before-after h2,
.doc-page .steps h2,
.doc-page .faq h2,
.doc-page .footer-wordmark,
.doc-page .comparison-card h3 {
  font-family: var(--headline);
  font-weight: 400;
}

.doc-page /* Wide black display type: strong without crushing adjacent lines. */
.hero h1,
.doc-page .section-intro h2,
.doc-page .before-after > h2,
.doc-page .demo-scene-source .section-intro h2,
.doc-page .steps > h2,
.doc-page .faq h2,
.doc-page .social-content h2,
.doc-page .social-copy h2,
.doc-page .channels h2,
.doc-page .footer-wordmark,
.doc-page .comparison-card h3 {
  line-height: .96;
  letter-spacing: -.032em;
}

@keyframes footer-toggle-on {
  0%, 5% {
    /* ⛔ A LIGHT track, not a dark one. The footer is black, so the old rgba(0,0,0,.55)
       was invisible against it and the off state read as a white knob floating in
       space. That went unnoticed while off was a brief blip in a 9s cycle; at 4s it is
       40% of the loop and always on screen. */
    background-color: rgba(255, 255, 255, .2);
    background-position: var(--tgl-pad) center;
  }

  15%, 55% {
    background-color: var(--green);
    background-position: var(--tgl-on) center;
  }

  65%, 100% {
    /* ⛔ A LIGHT track, not a dark one. The footer is black, so the old rgba(0,0,0,.55)
       was invisible against it and the off state read as a white knob floating in
       space. That went unnoticed while off was a brief blip in a 9s cycle; at 4s it is
       40% of the loop and always on screen. */
    background-color: rgba(255, 255, 255, .2);
    background-position: var(--tgl-pad) center;
  }
}

@keyframes footer-glitch-rgb {
  0% { text-shadow: 0 0 #ff0000, 0 0 #00ff00, 0 0 #0000ff; }
  15% { text-shadow: -.0167em 0 #ff0000, .0167em 0 #00ff00, .0053em .0053em #0000ff; }
  19% { text-shadow: .0333em .0107em #ff0000, -.0333em -.0107em #00ff00, -.0213em 0 #0000ff; }
  23% { text-shadow: -.05em 0 #ff0000, .05em 0 #00ff00, .016em .016em #0000ff; }
  27% { text-shadow: .05em .016em #ff0000, -.05em -.016em #00ff00, -.032em 0 #0000ff; }
  31% { text-shadow: -.05em 0 #ff0000, .05em 0 #00ff00, .016em .016em #0000ff; }
  35% { text-shadow: .05em .016em #ff0000, -.05em -.016em #00ff00, -.032em 0 #0000ff; }
  39% { text-shadow: -.05em 0 #ff0000, .05em 0 #00ff00, .016em .016em #0000ff; }
  43% { text-shadow: .05em .016em #ff0000, -.05em -.016em #00ff00, -.032em 0 #0000ff; }
  47% { text-shadow: -.0333em 0 #ff0000, .0333em 0 #00ff00, .0107em .0107em #0000ff; }
  51% { text-shadow: .0167em .0053em #ff0000, -.0167em -.0053em #00ff00, -.0107em 0 #0000ff; }
  55%, 100% { text-shadow: 0 0 #ff0000, 0 0 #00ff00, 0 0 #0000ff; }
}

@keyframes footer-glitch-shift {
  0% { transform: translate3d(0, 0, 0) skewX(0deg); }
  15% { transform: translate3d(-.01em, .0053em, 0) skewX(-.4deg); }
  17.5% { transform: translate3d(.02em, -.0107em, 0) skewX(.8deg); }
  20% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  22.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  25% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  27.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  30% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  32.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  35% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  37.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  40% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  42.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  45% { transform: translate3d(-.03em, .016em, 0) skewX(-1.2deg); }
  47.5% { transform: translate3d(.03em, -.016em, 0) skewX(1.2deg); }
  50% { transform: translate3d(-.02em, .0107em, 0) skewX(-.8deg); }
  52.5% { transform: translate3d(.01em, -.0053em, 0) skewX(.4deg); }
  55%, 100% { transform: translate3d(0, 0, 0) skewX(0deg); }
}

@keyframes footer-glitch-flicker {
  0% { opacity: 1; }
  15% { opacity: 1; }
  17.857% { opacity: .96; }
  20.714% { opacity: 1; }
  23.571% { opacity: .94; }
  26.429% { opacity: 1; }
  29.286% { opacity: .94; }
  32.143% { opacity: 1; }
  35% { opacity: .94; }
  37.857% { opacity: 1; }
  40.714% { opacity: .94; }
  43.571% { opacity: 1; }
  46.429% { opacity: .94; }
  49.286% { opacity: 1; }
  52.143% { opacity: .98; }
  55%, 100% { opacity: 1; }
}

/* ============================ SEAM =========================================
   base.css sets these globally on the Alice pages. Here style.css owns the page,
   so the shell has to carry them itself - scoped, so nothing reaches the legal
   copy in between. */

.doc-page .site-header,
.doc-page .site-footer {
  color: var(--black);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.35;
}

.doc-page .site-footer {
  /* style.css styles the bare <footer> element; the Alice footer has no hairline. */
  border-top: 0;
  color: var(--white);
}

/* :where() keeps these at ONE class of specificity: enough to beat style.css_s
   .footer-links a, not enough to repaint .mega-pill or .header-cta. */
.doc-page :where(.site-header, .site-footer) a {
  color: inherit;
  text-decoration: none;
}

.doc-page :where(.site-header, .site-footer) :where(p, h3, small, span) {
  margin: 0;
}

.doc-page :where(.site-header) button {
  font: inherit;
  color: inherit;
}

@media (max-width: 760px) {
  .doc-page .site-header,
  .doc-page .site-footer {
    font-size: 15px;
  }
}

/* ---- chat widget --------------------------------------------------------
   Jase, 2026-08-06: "keep the Alice Chatbot - but - No Yellow rim outside, and
   no Green pulsating dot". The bubble keeps a neutral lift so it still sits above
   the page; only the gold ring, the gold glow pulse and the green status dot go.
   Scoped to these pages - style.css itself is untouched, so the other legacy pages
   that use the widget are unaffected. */

.doc-page .alice-bubble {
  animation: alice-bubble-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 1400ms both;
  box-shadow: none;
}

.doc-page .alice-bubble-mark {
  border: 0;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .28);
}

.doc-page .alice-bubble-pulse {
  display: none;
}