/* ================================================================
   pages/legal.css — shared structure for /legal/privacy-policy and
   /legal/terms-of-service (`her` + `info` sections). Both pages are
   byte-identical in structure; only copy differs.

   SOURCES
   - DOM: research/fragments/legal--privacy-policy/{her,info}.html
          (identical to the terms-of-service fragments — diffed byte-
          for-byte, only inner text differs)
   - CSS: *** NOT _stylesheet.css *** — that file only carries the HOME
     page's generated rules (see SHARED-NOTES.md landmine). Every value
     below was extracted from the inline <style> blocks of
     research/raw/{desktop,tablet,phone}/legal--privacy-policy.html with
     scratchpad/pagecss.mjs (values identical across all 3 raw files —
     the desktop capture carries every media block).
   - Rich-text presets (h4/p in `info`) are NOT in the fragment's own
     classes and were pulled directly from the raw stylesheet:
       preset 1kug8un (h4): Inter 500 24px/130% -.04em #000, spacing 30px
       preset 1f8fpc2 (p):  Inter 400 14px/140% -.05em #616060, spacing 20px

   HEIGHT MATH (verified against research/reference-heights.json)
   `her` is viewport-height based, same idea as inner-annual's 100vh trick
   (see SHARED-NOTES.md landmine "Some reference heights are 100vh"):
     main:  height:50vh; min-height:400px   (phone: 40vh; min-height:300px)
     hr:    1px
     desc:  height:20vh; min-height:200px   (tablet: 12vh, no min; phone: min-content)
   Capture viewport HEIGHTS (clone.config.json, NOT SHARED-NOTES' 1024
   tablet figure, which is stale — the real capture is 810x1080):
     desktop 1440x900 / laptop 1280x832 / tablet 810x1080 / phone 390x844
     desktop: 450+1+200      = 651  == oracle desktop her ✔
     laptop:  416+1+200      = 617  == oracle laptop her  ✔
     tablet:  540+1+129.6    = 670.6 ≈ oracle tablet her 671 ✔

   KNOWN, LOGGED OMISSIONS (see docs/KNOWN-DIFFERENCES.md)
   - Two decorative 1px vlines exist ONLY in the phone/tablet SSR variant
     of `her`/`info` (framer-k3w7sf, framer-1shdv4t) and are absent from
     the desktop capture entirely — Framer swaps subtrees per breakpoint
     here rather than just toggling a hidden-* class. Both are pure
     decoration (height:100% dividers, zero layout effect); omitted to
     keep one semantic DOM, per BUILD-PLAN's collapse guidance.
   ================================================================ */

/* ---------------------------------------------------------------
   Shared vline modifiers, scoped to .her / .info (mirrors the
   `.footer .vline--solid` pattern in sections/footer.css).
   --------------------------------------------------------------- */
.her .vline,
.info .vline {
  height: 100%;
  width: 1px;
  flex: none;
  position: relative;
  overflow: var(--overflow-clip-fallback, clip);
}
.her .vline--hair,
.info .vline--hair {
  --border-top-width: 1px;    --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-stone-cool-50);   /* #cfcecc80 */
}
.her .vline--dash,
.info .vline--dash {
  --border-top-width: 3px;    --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-stone-85);        /* #d2cecad9 */
}
.her .vline--peach-dash,
.info .vline--peach-dash {
  --border-top-width: 3px;    --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-peach);           /* #e68c55 */
}
.her .hline,
.info .hline {
  position: relative;
  flex: none;
  overflow: var(--overflow-clip-fallback, clip);
}

/* =================================================================
   1. `her`  —  data-section="her"
   ================================================================= */
.her {
  background-color: var(--c-cream);
  z-index: 1;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: visible;
}

.her__gradient {
  z-index: 3;
  background: linear-gradient(var(--c-cream) 39%, rgba(242, 240, 238, 0) 100%);
  flex: none;
  height: 449px;
  position: absolute;
  top: 0; left: 0; right: 0;
}

.her__main {
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 50vh;
  min-height: 400px;
  padding: 0 var(--page-pad-desktop);
  position: relative;
  overflow: visible;
}
@media (max-width: 809.98px) {
  .her__main { height: 40vh; min-height: 300px; padding: 0 var(--page-pad-phone); }
}

.her__main-inner {
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

/* -- left decorative gap column, visible only >=1200px -- */
.her__gaps-a {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
@media (max-width: 1199.98px) { .her__gaps-a { display: none; } }

.her__gap {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}
.her__gap--g8 { gap: 8px; }

.her__part {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.her__subheader {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}
@media (max-width: 809.98px) { .her__subheader { display: none; } }

.her__subheader-line { }
@media (min-width: 810px) and (max-width: 1199.98px) {
  .her__subheader-line { --border-color: var(--c-stone-cool-50); --border-style: solid; }
}

.her__subheader-box {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 1px;
  padding: 62px 0 0;
  position: relative;
}

.her__badge {
  height: 31px;
  overflow: var(--overflow-clip-fallback, clip);
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  padding: 0 10px;
  position: relative;
  background-color: var(--c-orange);
}
.her__badge-text { white-space: pre; }

.her__gaps-b {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}
@media (max-width: 1199.98px) { .her__gaps-b { display: none; } }

.her__gaps-c {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start space-between;
  align-items: flex-start;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
.her__gap-line3 { }
@media (max-width: 809.98px) {
  .her__gap-line3 {
    --border-top-width: 2px;    --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    --border-style: dashed;
    --border-color: var(--c-peach);
  }
}

.her__gaps-d {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start space-between;
  align-items: flex-start;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
@media (max-width: 1199.98px) { .her__gaps-d { display: none; } }

.her__title {
  --framer-paragraph-spacing: 0px;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
  z-index: 1;
  flex: none;
  width: 100%;
  max-width: 560px;
  height: auto;
  position: absolute;
  bottom: -8px;
  left: -3px;
}
@media (min-width: 1200px) and (max-width: 1439.98px) { .her__title { max-width: 460px; left: 0; } }
@media (min-width: 810px) and (max-width: 1199.98px)  { .her__title { max-width: 440px; bottom: -6px; } }
@media (max-width: 809.98px) { .her__title { width: 90%; max-width: 440px; bottom: -6px; left: 0; } }
/* The reference draws the one-line H1 at the bottom of the title box
   (box is taller than the line); the clone was leaving it at the top,
   ~28px higher than the reference at phone. */
.her__title { display: flex; }
.her__title h1 { margin-top: auto; }

.her__bgwrap {
  opacity: .9;
  z-index: 0;
  flex: none;
  position: absolute;
  inset: -226px -805px -49px -712px;
  pointer-events: none;
}
.her__bg {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--c-cream);
  transform: scale(1.05527);
}
/* .marquee / .marquee__item reused verbatim from sections/footer.css
   (shared, always loaded) per SHARED-NOTES.md's marquee-reuse landmine. */
.her__bg .marquee { position: absolute; top: 0; left: 0; }

/* Note the doubled `.her .her__hr` selector: it needs to out-specificity the
   shared `.her .vline { height:100% }` rule above (also 2 classes deep), or
   the generic rule wins and the hairline collapses to 0px. */
.her .her__hr {
  --border-top-width: 1px;    --border-right-width: 1px;
  --border-bottom-width: 1px; --border-left-width: 1px;
  --border-style: solid;
  --border-color: var(--c-stone);
  height: 1px;
  overflow: var(--overflow-clip-fallback, clip);
  z-index: 4;
  flex: none;
  width: 100%;
  position: relative;
}

.her__desc {
  background-color: var(--c-cream);
  z-index: 4;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 20vh;
  min-height: 200px;
  padding: 0 var(--page-pad-desktop);
  position: relative;
  overflow: visible;
}
@media (min-width: 810px) and (max-width: 1199.98px) { .her__desc { height: 12vh; min-height: unset; } }
/* The raw stylesheet's phone rule literally reads
   `height:min-content; min-height:unset`, which — given `.her__text` is the
   only in-flow-adjacent content and it is `position:absolute` — collapses
   this box to ~0 in a static reading of the CSS. Measured against the
   reference (539px `her` at phone, verified in a real browser), the box
   keeps behaving as if min-height:200px still applied; we keep the 200px
   floor here since it hits the oracle exactly and 200px is literally the
   component's own un-overridden default (the reference likely resizes this
   via its component's internal JS auto-height, which isn't visible in a
   static CSS/HTML capture). Do not "clean this up" to match the raw text. */
@media (max-width: 809.98px) { .her__desc { height: min-content; min-height: 200px; padding: 0 var(--page-pad-phone); } }

.her__desc-inner {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--page-max);
  height: 1px;
  padding: 0;
  position: relative;
  overflow: visible;
}
@media (max-width: 809.98px) { .her__desc-inner { flex: none; height: min-content; } }

.her__desc-gaps {
  z-index: 2;
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
@media (max-width: 1199.98px) { .her__desc-gaps { display: none; } }

.her__desc-gap {
  height: 1px;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  position: relative;
}

.her .her__desc-hr {
  --border-top-width: 3px;    --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-stone-85);
  height: 1px;
  overflow: var(--overflow-clip-fallback, clip);
  z-index: 8;
  flex: none;
  position: absolute;
  bottom: 1px; left: 0; right: 0;
}

.her__info {
  z-index: 2;
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}
@media (max-width: 809.98px) {
  .her__info { gap: unset; flex: 1 0 0; justify-content: space-between; height: min-content; }
}

.her__buttons {
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  position: absolute;
  bottom: 0; left: 1px; right: 0;
}
@media (min-width: 810px) and (max-width: 1199.98px) { .her__buttons { flex-direction: column; gap: 22px; } }
@media (max-width: 809.98px) { .her__buttons { display: none; } }

.her__num-slot {
  height: min-content;
  min-height: 47px;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  padding: 0 0 4px;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1199.98px) { .her__num-slot { flex: none; width: 100%; } }

.her .her__buttons-hr {
  --border-top-width: 3px;    --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-stone-85);
  height: 1px;
  overflow: var(--overflow-clip-fallback, clip);
  z-index: 8;
  flex: none;
  width: 50%;
  position: absolute;
  bottom: 1px; left: 0;
}
@media (min-width: 810px) and (max-width: 1199.98px) { .her__buttons-hr { display: none; } }

.her__text {
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 36px 0 0;
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
}
/* The reference balances the intro's line lengths (its RichTextContainer
   carries --framer-text-wrap-override:balance) — without this the paragraph
   fills each line and wraps one line earlier than the reference. */
.her__text p { text-wrap: balance; }
@media (min-width: 810px) and (max-width: 1199.98px) { .her__text { max-width: 490px; } }
/* Phone: `.her__desc-inner` collapses to 0 height (its only child is this
   absolute block) and `.her__desc { place-content:center }` then parks that
   0-height anchor at the vertical center, dragging the intro 100px down
   where it overlaps the date row. The reference top-anchors the intro to the
   desc box (+36px padding). Anchor to `.her__desc` directly instead — it is
   the padding box we must not overlap, so re-create the 26px side insets. */
@media (max-width: 809.98px) {
  .her__desc-inner, .her__info { position: static; }
  .her__text {
    left: var(--page-pad-phone);
    width: calc(100% - 2 * var(--page-pad-phone));
  }
}

.her__gap-line1 {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}
@media (max-width: 809.98px) { .her__gap-line1 { display: none; } }

.her .her__gap-orange {
  height: 80vh;
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .her__gap-orange { --border-color: var(--c-stone-cool-50); --border-style: solid; }
}

.her__gaps4b {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start space-between;
  align-items: flex-start;
  width: 1px;
  padding: 0;
  position: relative;
}
@media (max-width: 1199.98px) { .her__gaps4b { display: none; } }

.her .her__gaps4b-hr {
  --border-top-width: 3px;    --border-right-width: 3px;
  --border-bottom-width: 3px; --border-left-width: 3px;
  --border-style: dashed;
  --border-color: var(--c-stone-85);
  height: 1px;
  overflow: var(--overflow-clip-fallback, clip);
  z-index: 8;
  flex: none;
  width: 100%;
  position: absolute;
  bottom: 1px; left: 0;
}

/* =================================================================
   2. `info`  —  data-section="info"
   ================================================================= */
.info {
  background-color: var(--c-cream);
  z-index: 1;
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center flex-start;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 809.98px) { .info { overflow: visible; } }

.info__gap {
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: 5vh;
  padding: 0 var(--page-pad-desktop);
  position: relative;
  overflow: visible;
}
@media (max-width: 809.98px) { .info__gap { display: none; } }

.info__gap-inner {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.info__gap-line {
  height: 100%;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
  width: 1px;
  padding: 0;
  position: relative;
}

.info__gaps2 {
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start space-between;
  align-items: flex-start;
  width: 1px;
  height: 100%;
  padding: 0;
  position: relative;
  overflow: visible;
}

.info__form {
  display: flex;
  flex-flow: column;
  flex: none;
  place-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0 var(--page-pad-desktop);
  position: relative;
  overflow: visible;
}
@media (max-width: 809.98px) { .info__form { padding: 0; } }

.info__content {
  z-index: 4;
  display: flex;
  flex-flow: row;
  flex: none;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: var(--page-max);
  height: min-content;
  min-height: 400px;
  padding: 0;
  position: relative;
  overflow: visible;
}
@media (min-width: 810px) and (max-width: 1199.98px) { .info__content { min-height: unset; } }
@media (max-width: 809.98px) {
  .info__content { min-height: unset; flex-direction: column; padding: 0 var(--page-pad-phone); }
}

.info__header {
  display: flex;
  flex-flow: row;
  flex: 1 0 0;
  place-content: flex-start;
  align-self: stretch;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  height: auto;
  padding: 0;
  position: relative;
  overflow: visible;
}
@media (max-width: 809.98px) {
  .info__header { align-self: unset; gap: unset; flex: none; justify-content: space-between; width: 100%; height: min-content; }
}

.info__header-line { }
@media (max-width: 809.98px) {
  .info__header-line {
    --border-top-width: 2px;    --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    --border-style: dashed;
    --border-color: var(--c-peach);
    align-self: stretch; height: auto;
  }
}

.info__date {
  --framer-paragraph-spacing: 0px;
  white-space: pre-wrap;
  word-break: break-word;
  word-wrap: break-word;
  flex: 1 0 0;
  width: 1px;
  height: auto;
  position: relative;
}
.info__date-rtc { justify-content: center; }

.info__form-part {
  height: auto;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: row;
  flex: 2 0 0;
  place-content: flex-start;
  align-self: stretch;
  align-items: flex-start;
  gap: 0;
  width: 1px;
  padding: 0;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1199.98px) { .info__form-part { align-self: unset; height: min-content; } }
@media (max-width: 809.98px) { .info__form-part { align-self: unset; flex: none; width: 100%; height: min-content; } }

.info__form-line { }
@media (min-width: 810px) and (max-width: 1199.98px) { .info__form-line { align-self: stretch; height: auto; } }
@media (max-width: 809.98px) {
  .info__form-line {
    --border-top-width: 2px;    --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
    align-self: stretch; height: auto;
  }
}

.info__texts {
  height: min-content;
  overflow: var(--overflow-clip-fallback, clip);
  display: flex;
  flex-flow: column;
  flex: 1 0 0;
  place-content: flex-start center;
  align-items: flex-start;
  gap: 32px;
  width: 1px;
  padding: 0 0 92px;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1199.98px) { .info__texts { padding: 0 0 72px; } }
@media (max-width: 809.98px) { .info__texts { padding: 32px 0 60px; } }

.info__hr {
  }
@media (max-width: 809.98px) { .info__hr { align-self: stretch; height: auto; } }

.info__body {
  --framer-paragraph-spacing: 0px;
  /* The reference sets white-space:pre-wrap here (harmless in Framer's own
     tightly-packed generated markup). This is hand-authored, pretty-printed
     HTML instead: pre-wrap would preserve the newline/indentation
     whitespace between every <h4>/<p>/<ul> as a rendered line break,
     roughly doubling every gap. Use normal collapsing instead — it does
     not change how the visible prose wraps, only how inter-tag
     whitespace in the source is treated. */
  white-space: normal;
  word-break: break-word;
  word-wrap: break-word;
  flex: none;
  width: 100%;
  max-width: 710px;
  height: auto;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1199.98px) { .info__body { max-width: 480px; } }
@media (max-width: 809.98px) { .info__body { max-width: 320px; } }

.info__body h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 130%;
  letter-spacing: -.04em;
  color: var(--c-black);
}
.info__body p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -.05em;
  color: var(--c-body);
}
.info__body a {
  color: var(--c-black);
  text-decoration: none;
}
.info__body a:hover,
.info__body a:focus-visible {
  color: var(--c-orange);
}
/* Framer's paragraph-spacing is per-preset, not uniform: h4 (preset
   1kug8un) carries --framer-paragraph-spacing:30px, p (preset 1f8fpc2)
   carries 20px, but <ul> has no preset of its own and inherits the
   *container's* --framer-paragraph-spacing, which framer-197926o (this
   element) sets to 0px — so a list sits flush under its intro line with
   no extra gap. Confirmed against the reference screenshot: verified,
   don't "fix" the list gap back to 20px. */
.info__body > p:not(:first-child)  { margin-top: 20px; }
.info__body > h4:not(:first-child) { margin-top: 30px; }
.info__body > ul:not(:first-child) { margin-top: 0; }
.info__body ul {
  /* Reset white-space to normal: .info__body inherits Framer's
     `white-space: pre-wrap` (harmless for single-text-node paragraphs), but
     it would otherwise preserve the indentation whitespace between <li>
     elements in this hand-authored markup as rendered line breaks. */
  white-space: normal;
  margin: 0;
  padding: 0;
  list-style: none;
}
.info__body li {
  display: block;
  position: relative;
  padding-left: 1.5em;
}
.info__body li::before {
  /* Drawn dot instead of a "•" glyph: the glyph inherits the li's smaller
     font metrics and rides high; the reference paints a ~4px disc vertically
     centered on the first text line. */
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  position: absolute;
  left: 5px;
  top: 0.55em;
}
.info__body li p { margin-top: 0; }

.info__plus {
  z-index: 3;
  flex: none;
  width: 15px;
  height: 15px;
  position: absolute;
  top: -8px; left: -7px;
}
@media (max-width: 809.98px) { .info__plus { top: -6px; left: 19px; } }

/* ================================================================
   HER INTRO BUILD  (measured on the LIVE reference, 2026-08-19,
   both /legal/privacy-policy and /legal/terms-of-service)
   ----------------------------------------------------------------
   Probed with a style-MutationObserver from DOMContentLoaded:
   - H1 letters (~30ms stagger) and the lede words start together at
     hydration; the lede fades word-by-word at ~50ms/word (23 words
     over ~1.1s on both pages). The clone's IO-triggered split reveal
     reproduces the ordering (starting at load instead of after
     hydration is the documented deliberate deviation).
   - The orange "legal" badge joins ~0.4-0.5s in: Framer springs the
     pill's WIDTH from ~59% to 100% (outer scaleX .59 -> 1 with the
     LEFT edge held fixed, children counter-scaled so the label never
     squashes — i.e. the pill wipes open left-to-right over the
     stationary label). Settles ~350-400ms later with a slight spring.
     Reproduced as a left-anchored clip-path wipe: same left-edge-fixed
     reveal, no glyph distortion, paint-only (zero layout impact).
   - The annual/pricing noise overlay plays the shared zoom preset at
     hydration on live (op .001->1, scale 1.2->1 over ~1.1s, measured
     on framer-1nah8ke-container); the clone's existing
     data-appear="zoom" on .annual__noise covers it.
   Armed by html.js-appear (js/main.js): with JS off nothing here
   applies and the badge renders at rest, fully visible.
   ================================================================ */
html.js-appear .her__badge {
  animation: her-badge-wipe .4s cubic-bezier(.3, 1.2, .5, 1) .45s both;
}
@keyframes her-badge-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  /* js-appear is armed even under reduced motion — never hide the badge */
  html.js-appear .her__badge { animation: none !important; }
}

/* lede word-fade stagger: live measures ~50ms/word here (vs the shared
   words preset's 120ms, which stays for the footer captions). */
.her__text p[data-split-text] { --sr-stagger: .05s; }