/* ════════════════════════════════════════════════════════════════════
   ARCHITECTURE DECISION RULE — WHEN TO ADD A CSS FALLBACK HERE
   vs. WHEN TO LEAVE A RULE PROMPT-ONLY (in resources/prompts/*.md)
   ════════════════════════════════════════════════════════════════════
   Add a guaranteed CSS rule in this file when the correct behavior has
   a small, fixed number of correct values regardless of page content —
   spacing/padding ceilings, grid stacking at mobile, element centering,
   fixed dimensions (avatars, icons), and similar layout mechanics. These
   are worth hardcoding because there's no content-dependent judgment
   call the model needs to make — there's one right answer, so guarantee
   it.

   Leave a rule prompt-only when the correct behavior depends on page
   content the model is generating in that moment — copy length, image
   choice, color palette decisions, line-count of a specific headline,
   how many cards a specific grid happens to contain. These can't be
   hardcoded into a shared stylesheet because the "correct" CSS value
   is different for every generation.

   When a prompt-only rule turns out not to be followed reliably (a
   confirmed real-world failure), the default response should be: (1)
   reinforce the prompt rule with a sharper example/template first if
   the rule's correctness still depends on content, or (2) promote it to
   a CSS fallback here if it turns out to be one of the small-fixed-
   value cases above after all. Whenever a new class-name-based CSS
   selector is added below, grep resources/prompts/ for that exact class
   name in the same sitting — a CSS rule that expects a class name the
   model is never told to write is silently dead code. See the
   confirmed gaps found and fixed for .nav-inner, .nav-cta,
   .hero-headline/.hero-subhead, and the grid container classes as the
   reference case for this check.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
section .text-center:is(h1, h2, h3, h4, h5, h6, p),
section .text-center :is(h1, h2, h3, h4, h5, h6, p) {
    text-wrap: balance !important;
    max-width: 90% !important;
}
.hero-headline, .hero-subhead {
  max-width: 90% !important;
}
footer.text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center :is(h1, h2, h3, h4, h5, h6, p),
footer [class*="copy"], footer [class*="legal"], footer [class*="disclaimer"] {
    text-wrap: balance !important;
    max-width: 90% !important;
}
}
@media (min-width: 1100px) {
section .text-center:is(h1, h2, h3, h4, h5, h6, p),
section .text-center :is(h1, h2, h3, h4, h5, h6, p) {
    text-wrap: balance !important;
    max-width: 1080px !important;
}
.hero-headline, .hero-subhead {
  max-width: 1080px !important;
}
footer.text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center :is(h1, h2, h3, h4, h5, h6, p),
footer [class*="copy"], footer [class*="legal"], footer [class*="disclaimer"] {
    text-wrap: balance !important;
    max-width: 1080px !important;
}
}
@media (max-width: 767px) {
section .text-center:is(h1, h2, h3, h4, h5, h6, p),
section .text-center :is(h1, h2, h3, h4, h5, h6, p) {
    text-wrap: balance !important;
    max-width: 100% !important;
}
.hero-headline, .hero-subhead {
  max-width: 100% !important;
}
footer.text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center:is(h1, h2, h3, h4, h5, h6, p),
footer .text-center :is(h1, h2, h3, h4, h5, h6, p),
footer [class*="copy"], footer [class*="legal"], footer [class*="disclaimer"] {
    text-wrap: balance !important;
    max-width: 100% !important;
}
}
.section-divider--flipped svg {
    transform: scaleX(-1) !important;
}
@media (max-width: 767px) {
    /* MUST EXCLUDE THE HERO: a confirmed real-world failure — this rule
       forced section:first-of-type to padding-top:50px !important on
       mobile, which silently overrode the hero's own nav-clearance
       padding-top (114px when a nav is present, per HERO PADDING AND
       DIVIDERS in hero.md) since the hero is always the page's first
       <section>. 50px is far less than the 64px mobile nav height alone,
       let alone the 50px clearance gap on top of it — so hero content
       rendered hidden behind/under the fixed nav bar. The hero's own
       pre-computed padding-top value must always win; this generic
       first-of-type rule is for the page's other potential first-section
       cases, never the hero. */
    section:first-of-type:not(.hero):not([class*="hero"]) {
        padding-top: 50px !important;
    }
}
@media (max-width: 767px) {
    /* :first-of-type, not :first-child — see the explanation at the
       body section > div:first-of-type rule further down this file. A
       decorative non-div first child (canvas, svg) breaks :first-child
       matching for the actual content wrapper div. */
    section:first-of-type > div:first-of-type {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}
@media (max-width: 767px) {
    section > div:first-of-type {
        padding-left: min(10px, 5vw);
        padding-right: min(10px, 5vw);
    }
}
[class*="stat"] {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-fade-in { opacity: 0; transition: opacity 0.7s ease; }
.animate-fade-in.is-visible { opacity: 1; }
.animate-slide-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-slide-left.is-visible { opacity: 1; transform: translateX(0); }
.animate-slide-right { opacity: 0; transform: translateX(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-slide-right.is-visible { opacity: 1; transform: translateX(0); }
.animate-scale-in { opacity: 0; transform: scale(0.92); transition: opacity 0.5s ease, transform 0.5s ease; }
.animate-scale-in.is-visible { opacity: 1; transform: scale(1); }

[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }

section:not(.section-divider):not(.hero):not([class*="hero"]):not(footer):not([class*="footer"]):not([class*="stats"]):not([class*="metric"]):not(:first-of-type) {
  padding-top: 100px;
  padding-bottom: 100px;
  border: none;
  outline: none;
  position: relative;
}
main > section:not(:first-of-type):not([class*="stats"]):not([class*="metric"]) {
  padding-top: 100px;
  padding-bottom: 100px;
  border: none;
  outline: none;
  position: relative;
}
@media (max-width: 767px) {
  section:not(.section-divider):not(.hero):not([class*="hero"]):not(footer):not([class*="footer"]):not([class*="stats"]):not([class*="metric"]):not(:first-of-type) {
    padding-top: 75px;
    padding-bottom: 75px;
  }
  main > section:not(:first-of-type):not([class*="stats"]):not([class*="metric"]) {
    padding-top: 75px;
    padding-bottom: 75px;
  }
}
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  width: 100%;
}
.btn--primary {
  padding: 1rem 2.45rem;
}
.btn--sm {
  padding: 0.7rem 1.3rem;
}
.final-cta-btn {
  margin-bottom: 10px;
}
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
}
.card {
  padding: 24px;
}
.pricing-card ul {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.pricing-card ul li {
  text-align: left;
}
.icon-wrap {
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-md);
}
.icon-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.icon-row .icon-wrap {
  margin-bottom: 0;
}
.hero__inner--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
}
@media (max-width: 1024px) {
  .hero__inner--split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}
.eyebrow {
  display: inline-block;
  width: auto;
  max-width: max-content;
  padding: 0.55rem 1.05rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}
.eyebrow-wrap {
  width: 100%;
  margin-bottom: 25px;
}
#registration {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vw, 6rem) var(--space-md);
  overflow: hidden;
}
.reg-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.reg-card {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  position: relative;
}
.field {
  position: relative;
  width: 100%;
  display: block;
  margin-bottom: 1rem;
  box-sizing: border-box;
}
.field-inner {
  position: relative;
  width: 100%;
  display: block;
}
#register-form {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
#register-form input {
  width: 100%;
  text-align: center;
  padding: 0.9rem 2.5rem;
  font-size: 1rem;
  box-sizing: border-box;
}
.field-inner > i.fa, .field-inner > i.fas, .field-inner > i[class*="fa-"] {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1rem;
}
[data-toggle-password] {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  z-index: 3;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
@media (max-width: 767px) {
  #registration {
    padding: clamp(2rem, 8vw, 4rem) var(--space-mobile-edge);
  }
  .reg-card {
    padding: 1.5rem 1rem;
  }
  #register-form input {
    font-size: 16px;
  }
}
.proof-bar {
  padding: var(--space-md) 0;
  overflow: hidden;
}
.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0.75rem var(--space-md);
  transform: translateY(100%);
}
p { line-height: 1.5; }
.btn, button.btn { 
  display:inline-flex;
  align-items:center;
  justify-content:center; 
 min-width: 180px;
min-height: 50px;
padding-left: 24px;
padding-right: 24px;
gap: 0.5rem; 
border: none;
cursor: pointer;
}
.form-group {
  width: 100%;
  max-width: 600px;
  margin-bottom: 1rem;
}
.form-group--icon { position: relative; }
.input-icon-wrap { position: relative; width: 100%; display: block; }
.form-group--icon input, .form-group--icon textarea {
  width: 100%; box-sizing: border-box; font-size: 16px; line-height: normal;
  padding-left: 12px; padding-right: 44px;
}
.form-card {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-box, .pricing-card {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.faq-list {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.form-group--icon input { height: 48px ; }
.form-group--icon textarea { height: auto; padding-top: 12px; padding-bottom: 12px; }
.form-icon {
  position: absolute; right: 0.65rem ; top: 50% ;
  transform: translateY(-50%) ; width: 1.5rem; height: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem ; line-height: 1; pointer-events: none;
  opacity: 0.6; color: var(--color-accent);
}
.input-icon-wrap:has(textarea) .form-icon { top: 1rem ; transform: none ; }

/* === NAV-INNER BASELINE LAYOUT (platform-owned) ===
   navigation.md instructs the model to wrap nav content in <nav class="nav-inner">,
   but no rule anywhere — prompt or static CSS — actually defines this element's layout.
   Without this, the model must reinvent flex/spacing for logo + links + CTA + hamburger
   from scratch on every generation, and when it's omitted the four children default-flow
   as stacked block elements with no enforced row structure, which is what was causing the
   hamburger to render in the wrong place / not visibly function on mobile. This is a
   baseline default the model's own CSS can still override per-page if it writes more
   specific rules — it is not !important. */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-md);
}
@media (max-width: 767px) {
  .nav-inner {
    flex-wrap: nowrap;
  }
  /* On mobile, only the logo and the hamburger occupy the visible row — nav-links is
     hidden by the drawer rule and nav-cta is hidden per navigation.md, but if either
     somehow remains in flow it must not push the hamburger out of the row. */
  .nav-inner > .nav-links,
  .nav-inner > .nav-cta,
  .nav-inner > .btn--primary {
    order: 2;
  }
  .nav-inner > .nav-toggle {
    order: 3;
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  section, header, footer, nav, .section, .hero, .site-nav, .site-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% ; max-width: 100% ; box-sizing: border-box ;
  }
  body .container, body .section__inner, body .hero__inner, body .cta__inner, body .features__inner,
  body .testimonials__inner, body .pricing__inner, body .faq__inner, body .footer__inner,
  /* CLASS-NAME MATCHING, NOT POSITION-BASED (:first-child/:first-of-type) —
     a confirmed real-world failure: position-based selectors broke when
     the hero's decorative element (a <canvas> for particle effects, an
     <svg>) was ITSELF wrapped in its own div (e.g. a ".hero-particles-wrap"
     div containing the canvas) — that wrapper div became the literal first
     div child, so :first-of-type matched IT instead of the real content
     wrapper, leaving the actual content div uncaught regardless. Matching
     by class-name suffix/substring instead works regardless of how many
     decorative wrapper divs precede the content div, and regardless of
     nesting depth, since it's not a direct-child/sibling-position check at
     all — it simply finds every element on the page whose class ends in
     "-inner" or contains "container"/"content", wherever it lives in the
     DOM. */
  body [class*="container"], body [class$="-inner"], body [class*="-content"] {
    padding-left: var(--space-mobile-edge) !important; padding-right: var(--space-mobile-edge) !important;
    width: 100% ; max-width: 100% ; box-sizing: border-box ;
  }
  .features-grid,
  .benefits-grid,
  .testimonials-grid,
  .pricing-grid,
  [class*="grid"] {
      display: flex !important;
      flex-direction: column !important;
      gap: 1rem !important;
  }
  [class*="card"], [class*="box"], .faq-item, .proof-bar, .sticky-cta-bar,
  .reg-card, .reg-inner,
  #capture-form, .form-card, .capture-form-wrap, form[name="capture-form"],
  [class*="form-wrap"], [class*="form-container"], [class*="capture-form"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
.urgency-box {
  max-width: fit-content !important;
}
  .card, .feature-row, .pricing-card, [class*="card"], [class*="col-"] {
    width: 100% ; max-width: 100% ; flex-basis: 100% ;
  }
  /* PRESERVE THE ICON+HEADING 2-COLUMN GRID ON MOBILE — DO NOT LET IT
     COLLAPSE TO 1 COLUMN: model-generated pages frequently include their
     own blanket mobile reset like `* { grid-template-columns: 1fr !important; }`
     intended to stack multi-card GRIDS (modules-grid, bonuses-grid, etc.)
     to a single column. That same universal selector also catches the
     icon+heading 2-column grid INSIDE individual cards (.problem-card,
     .module-card-header, and similar — anything matching [class*="card"]),
     which per the under-40px case of ICON OR BADGE BESIDE A CARD'S HEADING
     in non_negotiable_rules.md must keep its `auto 1fr` columns at EVERY
     breakpoint, never just collapse to 1fr like an outer multi-card grid.
     Once collapsed, the heading's own `grid-column:2` placement (written
     by the model) has no real second track left, so the browser invents
     an undersized implicit column and the heading text wraps down to one
     or two characters per line. A `[class*="card"]` attribute selector has
     higher specificity than a bare `*` selector, so this wins regardless
     of source order even when both are !important — restoring the real
     two-column track without needing to touch any child placement rule. */
  [class*="card"] {
    grid-template-columns: auto 1fr !important;
  }
  [style*="display:flex"], [style*="display: flex"] {
    flex-wrap: wrap ; flex-direction: column ;
  }
  h1, .hero h1, .hero__headline { font-size: clamp(1.75rem, 7vw, 2.1875rem) ; line-height: 1.15 ; }
  h2, .section-headline { font-size: clamp(1.5625rem, 5.5vw, 1.875rem) ; line-height: 1.2 ; }
  h3 { font-size: clamp(1.25rem, 4vw, 1.475rem) ; }
  .btn--primary, a.btn--primary, button.btn--primary {
    width: auto ; max-width: 100% ; padding: 0.875rem 1.5rem ;
    font-size: clamp(16px, 4vw, 18px) ; white-space: normal ;
  }
}
.faq-answer { max-height: none; overflow: hidden; display: block; }
.faq-item.faq-open .faq-answer {
  padding-top: 24px !important;
}
.avatar, [class*="avatar"], [class*="testimonial-photo"], [class*="author-photo"] {
  width: 56px;
  height: 56px;
  min-width: 56px;
  max-width: 56px;
  min-height: 56px;
  max-height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  aspect-ratio: 1/1;
  overflow: hidden;
  object-fit: cover;
}
@media (min-width: 768px) {
  [class*="col-"] h1, [class*="col-"] h2, [class*="col-"] h3, [class*="col-"] h4,
  [class*="columns"] h1, [class*="columns"] h2, [class*="columns"] h3, [class*="columns"] h4,
  [class*="grid"] h1, [class*="grid"] h2, [class*="grid"] h3, [class*="grid"] h4 {
    font-size: min(2.5rem, 100%);
  }
}
@media (max-width: 767px) {
  [class*="col-"] h1, [class*="col-"] h2, [class*="col-"] h3, [class*="col-"] h4,
  [class*="columns"] h1, [class*="columns"] h2, [class*="columns"] h3, [class*="columns"] h4,
  [class*="grid"] h1, [class*="grid"] h2, [class*="grid"] h3, [class*="grid"] h4 {
    font-size: min(1.875rem, 100%);
  }
}
@media (max-width: 900px) {
.grid, .features-grid, .benefits-grid, .testimonials-grid, .pricing-grid,
[class*="grid"], [class*="columns"], [class*="row"] {
  grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 767px) {
.grid, .features-grid, .benefits-grid, .testimonials-grid, .pricing-grid,
[class*="grid"], [class*="columns"], [class*="row"] {
  grid-template-columns: repeat(1, 1fr) !important;
}
}
.grid, .features-grid, .benefits-grid, .testimonials-grid, .pricing-grid,
[class*="grid"], [class*="columns"], [class*="row"] {
  gap: min(25px, 100%);
}

section > *:not(.card):not([class*="card"]):not([class*="pricing"]):not([class*="testimonial"]):not([class*="bonus"]):not([class*="callout"]):not([class*="highlight"]):not(.section-divider) {
  background: transparent;
}
* {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
[class*="pill"]:not([class*="-wrap"]):not([class*="-wrapper"]),
[class*="badge"]:not([class*="-wrap"]):not([class*="-wrapper"]):not([class*="badges"]),
[class*="tag"]:not([class*="-wrap"]):not([class*="-wrapper"]):not([class*="section-tag"]):not([class*="tagline"]),
[class*="eyebrow"]:not([class*="-wrap"]):not([class*="-wrapper"]),
[class*="kicker"]:not([class*="-wrap"]):not([class*="-wrapper"]) {
  display: inline-block;
  width: auto;
  max-width: max-content;
}
@media (min-width: 768px) {
  [class*="stats"], [class*="stat-row"], [class*="metrics"] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  /* MUST WRAP ON MOBILE — a confirmed real-world failure: the desktop rule
     above forces flex-wrap:nowrap to keep stats in a single row, but with
     no mobile override, that nowrap value cascaded unchanged down to
     mobile too. Squeezing 3-5 stat items into a ~375px-wide screen with
     no wrap allowed forces each item's flex-basis so narrow that the
     browser starts breaking the stat NUMBER ITSELF character-by-character
     ("$30K+" rendering as "$", "3", "0", "K", "+" each on their own line)
     rather than wrapping at a word boundary, since there's no room for
     even one full character on some lines. Allowing wrap lets items drop
     to a new row (typically 2 per row) at a readable width instead.
     WIDENED TO `[class*="stats"]` (not just "stats-row"/"stats-bar"): a
     confirmed real-world failure — a real page used the class `hero__stats`
     (BEM double-underscore style, no hyphen, no "-row"/"-bar"/"metrics"
     substring at all), which matched none of the original four wildcards,
     so this fix never fired and the exact same character-by-character
     wrapping bug reproduced untouched. `[class*="stats"]` alone already
     covers `hero__stats`, `stats-row`, and `stats-bar` in one pattern,
     since all three contain the plain substring "stats" — kept the
     narrower originals alongside it only for the singular "stat-row"
     variant and "metrics", which `[class*="stats"]` (plural) wouldn't
     catch on its own. */
  [class*="stats"], [class*="stat-row"], [class*="metrics"] {
    display: flex;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 1rem;
  }
  [class*="stats"] > *:not([class*="divider"]), [class*="stat-row"] > *:not([class*="divider"]), [class*="metrics"] > *:not([class*="divider"]) {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 120px;
  }
  /* Vertical divider/separator elements between stats only make visual
     sense in a single unbroken horizontal row — once items wrap to
     multiple rows on mobile, a thin vertical line sitting between two
     now-stacked items looks like a stray rendering artifact rather than
     an intentional separator. Hide them entirely at this breakpoint. */
  [class*="stats"] > [class*="divider"], [class*="stat-row"] > [class*="divider"], [class*="metrics"] > [class*="divider"] {
    display: none;
  }
}
.pricing__disclaimer,
.pricing-disclaimer,
.hero-note,
.form-note,
.cta-note {
  margin-bottom: 0px !important;
  margin-top: 0px !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-wrap: balance !important;
}
/* GUARANTEE THE GAP BETWEEN A BUTTON AND ITS NOTE/DISCLAIMER TEXT:
   margin alone isn't enough — if the model wraps the button + note in a
   flex/grid container with its own `gap` value, that gap stacks on top
   of the button's own margin-bottom regardless of what margin/padding
   is set on the note itself. Forcing gap:0 on any such parent removes
   that unpredictable second spacing source, leaving the button's
   platform-owned margin-bottom (set on .btn, button below) as the
   only thing creating the visible gap, every time, regardless of what
   the model names the parent or what gap value it would have chosen. */
*:has(> .pricing__disclaimer),
*:has(> .pricing-disclaimer),
*:has(> .hero-note),
*:has(> .form-note),
*:has(> .cta-note),
.pricing-cta-wrap {
  gap: 0 !important;
}
/* GUARANTEE THE HERO'S NAV-CLEARANCE PADDING-TOP AT BOTH BREAKPOINTS:
   A confirmed, twice-repeated real-world failure — the model wrote only
   the desktop value (padding-top:130px on #hero) with no separate mobile
   override, so that value cascaded unchanged into mobile width too,
   producing a 16px excess gap versus the 114px mobile nav actually needs.
   :has(.site-nav) detects whether a nav is present at all; when it is,
   force both pre-computed totals directly regardless of what the model
   wrote, removing the dependency on the model remembering to write a
   distinct mobile override. When no nav is present, this rule simply
   never matches, leaving the model's own no-nav fallback value untouched. */
body:has(.site-nav) #hero,
body:has(.site-nav) section.hero,
body:has(.site-nav) section[class*="hero"] {
  padding-top: 130px !important;
}
@media (max-width: 767px) {
  body:has(.site-nav) #hero,
  body:has(.site-nav) section.hero,
  body:has(.site-nav) section[class*="hero"] {
    padding-top: 114px !important;
  }
}
li {
  line-height: 1.5 !important;
  padding-top: 1px;
  padding-bottom: 1px;
}
ul {
  margin-left: auto !important;
  margin-right: auto !important;
}
.btn, button.btn {
margin-bottom: 10px !important;
}