/*
 * Kate Angelo — About page (id 7778) lower-section fix — v1.2.4 / v1.2.5
 * -----------------------------------------------------------------------------
 * v1.2.5 UPDATE — ALTERNATING RHYTHM (corrects a v1.2.4 mistake):
 * v1.2.4 unified every section below to one flat royal-blue solid
 * (#0d3170). That was wrong — Kate wants the ALTERNATING rhythm already
 * established on the home page: royal-blue and dark-navy trade off as
 * partners, never repeating on two adjacent sections. Verified live
 * against kateangelo.com/ before applying this: the home page itself
 * currently reads mostly as one repeated flat royal-blue (#0d3170) across
 * its .books/.speaking/.think sections with a single gold accent
 * (.quotes-zone) and no live use of #020F24 as a section background —
 * i.e. home does NOT currently demonstrate a strict blue/navy alternation
 * either (flagged separately for Kate/Ava; NOT fixed here, home is
 * explicitly out of scope this round). Regardless of that finding, this
 * file implements the exact rule given for the About page: adjacent
 * sections must never share a tone, using the two literal values
 * specified — the royal-blue gradient
 * `linear-gradient(180deg, #1A4A90 0%, #0D3170 50%, #08204d 100%)` and
 * flat dark-navy `#020F24`.
 *
 * FINAL ASSIGNMENT (top to bottom; hero + pinned story remain untouched,
 * out of scope, and are treated as the "royal-blue" bookends this chain
 * alternates against):
 *   .ka-about-hero        royal-blue  (untouched, out of scope)
 *   .ka-about-hook        DARK-NAVY   (new — breaks up the hero→story
 *                                       blue sandwich; hook was not named
 *                                       in Kate's 4-item suggested list but
 *                                       IS one of this file's 5 in-scope
 *                                       selectors, so it needs an explicit
 *                                       tone; navy is the only choice that
 *                                       keeps both neighbors alternating)
 *   .ka-about-story(-wrap) royal-blue (untouched, out of scope)
 *   .ka-about-bio         DARK-NAVY   (per Kate's suggested mapping)
 *   .ka-about-endorsements royal-blue (chose blue over the optional gold-
 *                                       feature idea — see note in that
 *                                       section below for why)
 *   CTA .ka-about__section DARK-NAVY  (per Kate's suggested mapping)
 *   .ka-about-newsletter   royal-blue (per Kate's suggested mapping)
 * Result: BLUE - NAVY - BLUE - NAVY - BLUE - NAVY - BLUE, i.e. strict
 * alternation end to end with zero adjacent repeats.
 *
 * v1.2.4 ROOT CAUSE (verified empirically against the live page, 2026-07-07):
 * the v1.2.2 About rebuild's ~24KB of section CSS (hero/hook/bio/
 * endorsements/CTA/newsletter — see about-page/about-page.css in the
 * project root for the original authored source) was delivered as a
 * literal <style> tag inside the page's own post content. That content
 * passes through WordPress's wpautop() filter, which blindly wraps every
 * blank double-line-break in the raw text — INCLUDING inside a <style>
 * tag it has no awareness of — in literal `<p>`/`</p>` tags. Counted on
 * the live page: 43 stray `<p>` / 44 stray `</p>` tags landing directly
 * between CSS rules (e.g. literally `}</p>\n<p>.ka-about-hook__quote {`).
 * A browser's CSS parser treats `<`, `/`, `p`, `>` as tokens that make the
 * following selector prelude invalid, so EVERY rule preceded by one of
 * these stray tags — i.e. almost every rule in that stylesheet separated
 * from its neighbor by a blank line, per the original file's formatting —
 * is silently dropped by the browser as an invalid qualified rule. That
 * is why everything below the top hero/pinned story (which are styled by
 * the SEPARATELY ENQUEUED, wpautop-immune assets/about-scroll-story.css)
 * renders with no background, default/dark heading text, no marquee
 * layout, and Astra's default font instead of Poppins — none of the
 * original CSS ever actually executes in the browser.
 *
 * FIX: reproduce the same, already-correct design (background gradient
 * tokens, gold/pink accents, Poppins/Fjalla One pairing, marquee
 * mechanics) here, in a normally-enqueued theme file that is never passed
 * through wpautop. Values are hardcoded (not `var(--ka-navy-1)` etc.)
 * because the custom-property-defining rule on `.ka-about` is itself one
 * of the dropped rules, so those variables are never actually defined in
 * the live DOM.
 *
 * SCOPE: only the sections explicitly identified as broken — .ka-about-
 * hook, .ka-about-bio (+ its shared .ka-about__section sibling class),
 * .ka-about-endorsements, the CTA .ka-about__section, and .ka-about-
 * newsletter (+ its .ka-about__section sibling class). The top hero
 * (.ka-about-hero) and the pinned scroll-story (.ka-about-story-wrap /
 * .ka-about-story) are DELIBERATELY NOT touched here — confirmed working,
 * out of scope for this round, and styled by a different, unaffected
 * file. Do not add hero/story rules to this file.
 *
 * Enqueued only on is_page('about') in functions.php, after
 * kate-angelo-child and ka-about-scroll-story.
 *
 * ── v1.2.0 (sitewide type-unification round) ────────────────────────────
 * Two DIFFERENT swaps in this round, not one blanket find/replace:
 *   1. True section HEADINGS (.ka-about__heading, .ka-about-cta-card__
 *      heading, .ka-about-newsletter__heading) — 'Fjalla One' -> 'Oswald'
 *      (Impact fallback kept), matching the new sitewide heading face.
 *   2. Italic PULL-QUOTES (.ka-about-hook__quote, .ka-about-marquee-item__
 *      quote) — these were ALSO on 'Fjalla One' before this round, but per
 *      this round's brief they belong to the site's "serif accent" family
 *      instead (Cormorant Garamond italic — the same treatment as the
 *      original about-preview.html mockup's `.hook__quote` /
 *      `.story-content__pull`, and as the 404 page's own italic headline).
 *      Swapped to 'Cormorant Garamond', Georgia, serif here — font-style:
 *      italic was already set on both, so this is a font-family-only
 *      change; weight (400) is unchanged and is already covered by the
 *      italic 400 weight loaded in functions.php's ka-fonts request.
 * Every heading/quote COLOR rule below is untouched — all already-solid
 * (#EEF2F8 / #DF6176 / #F5D000) against this page's navy/royal-blue
 * backgrounds, already verified safe, so contrast is unaffected by this
 * font-only round.
 */

/* ── shared tokens used literally throughout this file ───────────────────
   --ka-navy-1 #1a4a90 / --ka-navy-2 #0d3170 / --ka-navy-3 #08204d
   --ka-gold   #F5D000  (primary accent)
   --ka-pink   #DF6176  (Kate's established feminine secondary accent)
   --ka-text   #EEF2F8  (light body text)
   --ka-muted  rgba(238,242,248,.72) / --ka-muted-2 rgba(238,242,248,.52)
   --ka-border rgba(238,242,248,.14)
   Fonts: 'Oswald' (headings, Impact fallback) / 'Cormorant Garamond'
   (italic pull-quotes) / 'Poppins' (body) — all loaded sitewide via
   functions.php's ka-fonts enqueue. */

body.page-id-7778 .ka-about-hook,
body.page-id-7778 .ka-about-bio,
body.page-id-7778 .ka-about-endorsements,
body.page-id-7778 .ka-about__section,
body.page-id-7778 .ka-about-newsletter {
  font-family: 'Poppins', sans-serif !important;
}

/* ────────────────────────────────────────────────────────────────────────
   HOOK — DARK-NAVY (v1.2.5). Sits between the royal-blue hero above and
   the royal-blue pinned story below; navy here is what keeps both of
   those out-of-scope neighbors properly alternating instead of three
   blue sections running together.
──────────────────────────────────────────────────────────────────────── */
body.page-id-7778 .ka-about-hook {
  background: #020F24 !important;
  padding: 5.5rem clamp(1.5rem, 6vw, 5rem);
  text-align: center;
}
body.page-id-7778 .ka-about-hook__quote {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  color: #EEF2F8 !important;
  line-height: 1.3;
  max-width: 760px;
  /* !important required: the root reset `body.page-id-7778 .ka-about p {
     margin: 0; }` in about-hero-fix.css has HIGHER specificity than this
     selector (two element-type selectors — body + p — vs. this rule's one
     — body only, since ka-about-hook__quote is a class) despite loading
     first, and would otherwise silently zero out the auto side-margins
     below that actually center this quote in its now-full-width parent
     section. Confirmed via browser measurement — without !important this
     rule's max-width takes effect but the quote renders flush-left, not
     centered. */
  margin: 0 auto 1.1rem !important;
}
body.page-id-7778 .ka-about-hook__attr {
  font-family: 'Poppins', sans-serif !important;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #DF6176 !important;
}

/* ────────────────────────────────────────────────────────────────────────
   FULL BIO — DARK-NAVY (v1.2.5, per Kate's mapping). Text Editor widget;
   restores the Poppins body font (was silently falling back to Astra's
   default heading/body font stack with this stylesheet dropped) and the
   pink accent on the author photo.
──────────────────────────────────────────────────────────────────────── */
body.page-id-7778 .ka-about-bio {
  background: #020F24 !important;
  /* v1.3.1: the section box itself is now full page width (no max-width/
     margin:auto on the box) so the navy background reaches the edges like
     every other section — but the actual reading column (bio paragraphs +
     the inset photo, which are direct children with no separate wrapper
     div in this page's markup) is kept at a comfortable ~680px measure via
     LEFT/RIGHT PADDING math instead of a width cap on the box: padding-
     inline = max(1.5rem, (100% - 680px) / 2). On a full-width box this
     produces the exact same 680px content column centering a max-width+
     auto-margin approach would, without shrinking the box (and therefore
     the background) itself. The max() guards against the calc() going
     negative on narrow/mobile viewports, where it falls back to a plain
     1.5rem gutter (full-width reading column, same as before).
     !important required: this selector (body.page-id-7778 .ka-about-bio,
     specificity 0-2-1) ties exactly with the shared .ka-about__section
     rule below (0-2-1) that ALSO sets `padding` — and since that shared
     rule is defined later in this file, it would otherwise silently win
     the tie and overwrite this padding back down to the shared
     clamp(1.5rem,6vw,5rem) value, collapsing the comfortable reading
     column back to nearly full width. Confirmed via browser measurement
     before this !important was added. */
  padding: 5.5rem max(1.5rem, calc((100% - 680px) / 2)) !important;
  color: #EEF2F8 !important;
}
body.page-id-7778 .ka-about-bio__photo {
  width: 260px;
  float: right;
  margin: 0 0 2rem 2.25rem;
  border-radius: 3px;
  box-shadow: 10px 10px 0 0 #DF6176, 0 20px 50px rgba(0,0,0,.5);
}
body.page-id-7778 .ka-about-bio p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.06rem;
  line-height: 1.85;
  font-weight: 300;
  color: rgba(238,242,248,.85) !important;
  margin: 0;
}
body.page-id-7778 .ka-about-bio p + p { margin-top: 1.4rem; }
body.page-id-7778 .ka-about-bio em { font-style: italic; color: #EEF2F8 !important; }
@media (max-width: 600px) {
  body.page-id-7778 .ka-about-bio__photo {
    float: none;
    width: 100%;
    margin: 0 0 1.75rem;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   ENDORSEMENTS MARQUEE — ROYAL-BLUE (v1.2.5). Kate offered a "gold
   feature" option here (mirroring home's gold .quotes-zone reviews
   section). Not used: home's gold treatment relies on DARK text
   (#111111/navy) on the bright gold fill, which would mean re-doing this
   section's quote/attribution text colors and would put the pink
   #DF6176 attribution accent on gold — a combination not required to be
   verified this round and worse-contrast territory than pink-on-navy.
   Royal-blue keeps the required light-text-on-dark formula intact,
   satisfies the strict alternation rule identically (differs from navy
   on both sides), and needs no accent-color rework. Kept as a candidate
   for a future dedicated "gold feature" pass if Kate still wants one.
   Diagnosed bug (still fixed here, unchanged from v1.2.4): with the
   original CSS dropped, the two marquee rows' markup (each row's quote
   list is deliberately DUPLICATED once in the HTML — a standard
   seamless-loop marquee technique) had no flex/nowrap/overflow/animation
   rules applied at all, so the browser fell back to normal block flow:
   every quote (and its exact duplicate, immediately after it) rendered
   as a full-width stacked block — the "duplicated/stacked" artifact —
   with no `overflow:hidden` on the container to contain any of it, which
   is what let it spill past the page's normal content edge ("clipped at
   the left viewport edge"). This is not a logic bug in the original
   marquee CSS (it's a standard, correct technique) — restoring it here
   fixes the bug entirely.
──────────────────────────────────────────────────────────────────────── */
body.page-id-7778 .ka-about-endorsements {
  background: linear-gradient(180deg, #1A4A90 0%, #0D3170 50%, #08204d 100%) !important;
  position: relative;
  padding: 3.5rem 0;
  overflow: hidden !important;
  color: #EEF2F8;
}
body.page-id-7778 .ka-about-endorsements::before,
body.page-id-7778 .ka-about-endorsements::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
body.page-id-7778 .ka-about-endorsements::before {
  left: 0;
  /* v1.2.5: sampled from the section's own new gradient mid-stop
     (#0D3170) rather than its darkest stop (#08204d) — with a real
     vertical gradient now behind it (vs. the old flat solid), the mid
     stop is the closer match across the section's actual visible range
     for this horizontal edge-vignette. */
  background: linear-gradient(to right, #0D3170, transparent);
}
body.page-id-7778 .ka-about-endorsements::after {
  right: 0;
  background: linear-gradient(to left, #0D3170, transparent);
}
body.page-id-7778 .ka-about-marquee-row {
  display: flex !important;
  gap: 3.5rem;
  white-space: nowrap;
  margin-bottom: 1.5rem;
  width: max-content;
}
body.page-id-7778 .ka-about-marquee-row--1 { animation: ka-about-marquee-l 42s linear infinite; }
body.page-id-7778 .ka-about-marquee-row--2 { animation: ka-about-marquee-r 56s linear infinite; }
@keyframes ka-about-marquee-l { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes ka-about-marquee-r { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
body.page-id-7778 .ka-about-marquee-item {
  display: inline-flex !important;
  flex-direction: column;
  gap: .35rem;
  flex-shrink: 0;
}
body.page-id-7778 .ka-about-marquee-item__quote {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: #EEF2F8 !important;
}
body.page-id-7778 .ka-about-marquee-item__attr {
  font-family: 'Poppins', sans-serif !important;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #DF6176 !important;
}
@media (prefers-reduced-motion: reduce) {
  body.page-id-7778 .ka-about-marquee-row--1,
  body.page-id-7778 .ka-about-marquee-row--2 { animation: none; }
}

/* ────────────────────────────────────────────────────────────────────────
   SHARED SECTION LAYOUT — `.ka-about__section` is a shared class across
   THREE different sections on this page (bio, the bare CTA block, and
   newsletter), used here only for the layout properties truly common to
   all three (padding/max-width/margin/text color). v1.2.5: `background`
   is deliberately NOT set here anymore — bio, CTA, and newsletter now
   each carry a DIFFERENT tone (navy/navy/blue) as part of the alternating
   rhythm, so a single shared background rule would clobber whichever of
   the three loads last in the cascade. Each section sets its own
   background via its own more specific selector below instead (bio and
   newsletter already have one; CTA gets a dedicated `:not()` rule since
   it has no unique class of its own on this page — verified against the
   live markup).
──────────────────────────────────────────────────────────────────────── */
body.page-id-7778 .ka-about__section {
  /* v1.3.1: removed max-width:1080px/margin:0 auto — that was the actual
     bug: it capped this shared wrapper's own box (which also carries each
     section's BACKGROUND — bio's #020F24, CTA's #020F24, newsletter's
     royal-blue gradient) to a narrow floating column, leaving a large
     empty gutter of the page's base gradient visible on both sides at
     desktop widths (confirmed live: ~180px each side at 1440px). This
     section is now full page width, matching the hero/endorsements model
     (full-bleed background, width control moved to each section's own
     INNER content — see .ka-about-bio's padding-calc reading column,
     .ka-about-cta__grid's own max-width, and .ka-about-newsletter__inner's
     own max-width, all below). */
  position: relative;
  padding: 5.5rem clamp(1.5rem, 6vw, 5rem);
  color: #EEF2F8;
}

/* ────────────────────────────────────────────────────────────────────────
   CLOSING CTA — DARK-NAVY (v1.2.5, per Kate's mapping). Bare
   `.ka-about__section` wrapper with no unique class of its own on this
   page — targeted via :not() so this background rule can never
   accidentally match the bio or newsletter sections, which also carry
   `.ka-about__section` but get their own distinct tone below. Two cards:
   gold-top-border (primary / Books) and pink-top-border (secondary /
   Speaking) — the alternating gold/pink convention already established
   in the original design and reused verbatim.
──────────────────────────────────────────────────────────────────────── */
body.page-id-7778 .ka-about__section:not(.ka-about-bio):not(.ka-about-newsletter) {
  background: #020F24 !important;
}
body.page-id-7778 .ka-about__eyebrow {
  font-family: 'Poppins', sans-serif !important;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #F5D000 !important;
  margin-bottom: 1rem;
  text-align: center;
  display: block;
}
body.page-id-7778 .ka-about__eyebrow--pink { color: #DF6176 !important; }
body.page-id-7778 .ka-about__heading {
  font-family: 'Oswald', Impact, sans-serif !important;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #EEF2F8 !important;
  text-align: center;
  line-height: 1.08;
  margin-bottom: 1.1rem;
}
body.page-id-7778 .ka-about__divider {
  width: 64px;
  height: 3px;
  margin: 0 auto 3rem;
  background: linear-gradient(90deg, #F5D000 0%, #DF6176 100%);
  border-radius: 2px;
}
body.page-id-7778 .ka-about-cta__grid {
  /* v1.3.1: explicit max-width now that the parent .ka-about__section is
     full-bleed — the two cards are structural/non-text elements, so per
     the width-fix brief they get MORE room than the old 1080px section
     cap allowed (each card was ~516px; now ~586px at 1440px), while still
     stopping short of the literal section edge so a 2-card row doesn't
     stretch to an awkward, oversized shape on wide screens. */
  max-width: 1200px;
  margin: 1rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}
@media (max-width: 760px) {
  body.page-id-7778 .ka-about-cta__grid { grid-template-columns: 1fr; }
}
body.page-id-7778 .ka-about-cta-card {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(238,242,248,.14);
  border-top: 3px solid #F5D000;
  border-radius: 6px;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  text-align: left;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.page-id-7778 .ka-about-cta-card--pink { border-top-color: #DF6176; }
body.page-id-7778 .ka-about-cta-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.075) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
body.page-id-7778 .ka-about-cta-card__eyebrow {
  font-family: 'Poppins', sans-serif !important;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #F5D000 !important;
}
body.page-id-7778 .ka-about-cta-card--pink .ka-about-cta-card__eyebrow { color: #DF6176 !important; }
body.page-id-7778 .ka-about-cta-card__heading {
  font-family: 'Oswald', Impact, sans-serif !important;
  font-size: 1.55rem;
  text-transform: none;
  color: #EEF2F8 !important;
  line-height: 1.2;
}
body.page-id-7778 .ka-about-cta-card__text {
  font-family: 'Poppins', sans-serif !important;
  font-size: .96rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(238,242,248,.72) !important;
}
body.page-id-7778 .ka-about-cta-card__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .4rem;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .03em;
  text-decoration: none;
  padding: .8rem 1.6rem;
  border-radius: 3px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
body.page-id-7778 .ka-about-cta-card__btn--primary {
  background: #F5D000 !important;
  color: #08204d !important;
}
body.page-id-7778 .ka-about-cta-card__btn--primary:hover { background: #ffe033 !important; transform: translateY(-2px); }
body.page-id-7778 .ka-about-cta-card__btn--secondary {
  background: transparent !important;
  color: #DF6176 !important;
  border: 1.5px solid #DF6176;
}
body.page-id-7778 .ka-about-cta-card__btn--secondary:hover {
  background: #DF6176 !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* ────────────────────────────────────────────────────────────────────────
   NEWSLETTER — ROYAL-BLUE (v1.2.5, per Kate's mapping). Matches the
   sitewide blue-field / gold-button pattern (same family as the footer
   newsletter field + Formidable forms).
──────────────────────────────────────────────────────────────────────── */
body.page-id-7778 .ka-about-newsletter {
  background: linear-gradient(180deg, #1A4A90 0%, #0D3170 50%, #08204d 100%) !important;
  border-top: 1px solid rgba(238,242,248,.14);
  padding-top: 4rem;
  padding-bottom: 6rem;
  color: #EEF2F8;
}
body.page-id-7778 .ka-about-newsletter__inner {
  /* v1.3.1: 1080px -> 1300px now that .ka-about-newsletter (the section)
     is full-bleed — the heading/sub copy is short marketing copy (not
     long-form body text), and the form fields are non-text elements that
     benefit from the extra room, so a wider inner grid is the right call
     here (matches the CTA grid's same reasoning). */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
}
@media (max-width: 760px) {
  body.page-id-7778 .ka-about-newsletter__inner { grid-template-columns: 1fr; }
}
body.page-id-7778 .ka-about-newsletter__heading {
  font-family: 'Oswald', Impact, sans-serif !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  color: #EEF2F8 !important;
  margin-bottom: .8rem;
}
body.page-id-7778 .ka-about-newsletter__sub {
  font-family: 'Poppins', sans-serif !important;
  font-size: .96rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(238,242,248,.72) !important;
}
body.page-id-7778 .ka-about-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
body.page-id-7778 .ka-about-newsletter__row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
body.page-id-7778 .ka-about-newsletter__input {
  flex: 1 1 200px;
  font-family: 'Poppins', sans-serif !important;
  font-size: .92rem;
  color: #F5D000 !important; /* matches the sitewide gold-typed-text-on-navy-field convention */
  /* v1.3.2 COLOR FIX: was #0F3271 (the OLD, RETIRED royal-blue field tone —
     see assets/formidable-theme.css's own v1.2.0 changelog note: that round
     explicitly retired #0F3271 as a form-field background sitewide, flipping
     every Formidable field to the flat dark #020F24 instead, specifically
     because #0F3271 sits too close in tone to this page's own royal-blue
     gradient stops (#1A4A90/#0D3170) to read as a distinct field — a muddy,
     low-differentiation pairing. This hand-coded newsletter form (a
     different, non-Formidable form on this same page) was missed by that
     retune and was still carrying the stale #0F3271 value, which is very
     likely a real contributor to Kate's "colors feel off" report on this
     page — the newsletter section's own background passes directly through
     #0D3170 as its gradient's mid-stop, nearly identical to the field's old
     #0F3271, so the input barely read as a field at all against its own
     section. Flipped to #020F24 to match the current sitewide field
     convention: dark, and clearly darker than every stop of this section's
     royal-blue gradient background, restoring visible field/section
     separation. */
  background: #020F24 !important;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 3px;
  padding: .85rem 1.1rem;
  outline: none;
  transition: border-color .2s ease;
}
body.page-id-7778 .ka-about-newsletter__input::placeholder { color: rgba(238,242,248,.52) !important; }
body.page-id-7778 .ka-about-newsletter__input:focus { border-color: #DF6176; }
body.page-id-7778 .ka-about-newsletter__submit {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #08204d !important;
  background: #F5D000 !important;
  border: none;
  border-radius: 3px;
  padding: .85rem 1.4rem;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
  align-self: flex-start;
}
body.page-id-7778 .ka-about-newsletter__submit:hover { background: #ffe033 !important; transform: translateY(-2px); }
body.page-id-7778 .ka-about-newsletter__note {
  font-family: 'Poppins', sans-serif !important;
  font-size: .68rem;
  letter-spacing: .05em;
  color: rgba(238,242,248,.52) !important;
}

@media (max-width: 600px) {
  body.page-id-7778 .ka-about__section,
  body.page-id-7778 .ka-about-hook {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}