/*
Theme Name:   Everthrive Child
Description:  Child theme for Astra
Author:       Francois Van Der Elst
Template:     astra
Version:      1.0.8
Text Domain:  everthrive-child
*/

/* ─── Design Tokens ───────────────────────────────────────────────
   Palette sampled directly from the logo: coral #f0866f, teal
   #66aca2, gold #d8aa62. Everything else is a tint or shade of
   those three, so the page can't drift away from the mark.
────────────────────────────────────────────────────────────────── */
:root {
  --coral:      #f0866f;
  --coral-dark: #dd6b52;
  --coral-soft: #fbe0d8;

  --teal:       #66aca2;
  --teal-dark:  #4a8b82;
  --teal-deep:  #1e403a;
  --teal-soft:  #dcece9;

  --gold:       #d8aa62;
  --gold-soft:  #f7ecd8;

  --cream:      #fdfaf5;
  --sand:       #f5eee2;
  --white:      #ffffff;

  --ink:        #22302d;
  --body:       #4e615d;
  --muted:      #7d908c;
  --line:       #e7ded0;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-w:  1180px;
  --wide-w: 1360px;
  --gutter: 40px;

  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   32px;
  --r-pill: 88px;

  --nav-h: 88px;

  --shadow-card: 0 2px 4px rgba(30, 64, 58, 0.03), 0 12px 32px rgba(30, 64, 58, 0.06);
  --shadow-lift: 0 4px 8px rgba(30, 64, 58, 0.05), 0 22px 48px rgba(30, 64, 58, 0.10);
}

/* ─── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.68;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; }

/* Neutralise any WordPress/Astra wrappers that may wrap our content */
#page, #content, .site, .site-content, .ast-container,
.entry-content, .ast-article-single {
  background: transparent !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.skip-link {
  position: absolute; left: -9999px;
  z-index: 999; padding: 12px 20px;
  background: var(--teal-deep); color: var(--white);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; top: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ─── Typography ──────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
}
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.2; }
p + p { margin-top: 1.05em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 18px;
}
.eyebrow--gold  { color: var(--gold); }
.eyebrow--light { color: var(--teal); }
.h2--light { color: var(--cream); }

/* ─── Layout ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(72px, 10vw, 140px); }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand); }
.section--deep  { background: var(--teal-deep); color: rgba(253, 250, 245, 0.82); }

/* Wide enough for the longest heading line ("Trapped in the cycle of",
   ~566px at the capped display size) so the <br> controls the break. */
.section-head { max-width: 44rem; margin-bottom: 56px; }
/* Wide enough that "From chasing symptoms" holds one line at the capped
   3.4rem display size (~616px), so the <br> controls the break, not wrapping. */
.section-head--center { max-width: 44rem; margin-inline: auto; text-align: center; }
/* Keep the intro paragraph at a readable measure even though its
   container is now sized for headings. */
.section-intro { max-width: 52ch; margin-top: 22px; font-size: 1.12rem; color: var(--muted); }

/* ─── Sunburst motif ──────────────────────────────────────────── */
.sunburst { display: block; }
.sunburst--sm { width: 44px; }
.sunburst--md { width: 76px; margin-inline: auto; }
.sunburst--lg { width: 96px; margin-inline: auto; }

/* ─── Buttons & links ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn--coral {
  background: var(--coral);
  color: var(--teal-deep);
  box-shadow: 0 8px 20px rgba(240, 134, 111, 0.32);
}
.btn--coral:hover {
  background: var(--coral-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(240, 134, 111, 0.4);
}
.btn--block { width: 100%; justify-content: center; }
.btn-arrow { transition: transform 0.25s; }
.btn:hover .btn-arrow { transform: translateX(4px); }

.link-soft {
  font-size: 0.98rem;
  color: var(--teal-dark);
  border-bottom: 1px solid rgba(74, 139, 130, 0.35);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.link-soft:hover { color: var(--coral); border-color: var(--coral); }

.badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--teal-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 24px;
}

/* ─── Scroll-reveal ───────────────────────────────────────────── */
.sr { opacity: 0; transform: translateY(34px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.sr.sr--in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .sr, .sr.sr--in { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  background: rgba(253, 250, 245, 0.9);
  backdrop-filter: blur(12px);
  transition: box-shadow 0.3s, background 0.3s;
}
.nav.scrolled {
  background: rgba(253, 250, 245, 0.97);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(30, 64, 58, 0.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--wide-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav-logo img { height: 46px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--teal-deep);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--coral); }

.nav-cta {
  padding: 12px 26px;
  white-space: nowrap;
  border-radius: var(--r-pill);
  background: var(--teal-deep);
  color: var(--cream) !important;
  transition: background 0.25s;
}
.nav-cta:hover { background: var(--coral); color: var(--teal-deep) !important; }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-hamburger span {
  display: block; width: 26px; height: 2px;
  background: var(--teal-deep); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 104px));
  padding-bottom: clamp(72px, 9vw, 120px);
  background: var(--cream);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  top: -22%; right: -12%;
  width: min(760px, 78vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(102, 172, 162, 0.20) 0%, rgba(240, 134, 111, 0.10) 45%, transparent 68%);
  pointer-events: none;
}
.hero-inner { position: relative; }

.hero-title {
  font-size: clamp(2.9rem, 7.2vw, 5.4rem);
  margin-bottom: 22px;
}
.hero-title-accent {
  display: block;
  color: var(--teal);
}
.hero-kicker {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-style: italic;
  color: var(--coral);
  margin-bottom: 26px;
}
.hero-sub {
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--body);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin-top: 40px;
}

.hero-credential {
  max-width: 62ch;
  margin-top: 64px;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.hero-credential p { font-size: 0.98rem; color: var(--muted); }

/* Three-bar colour strip — echoes the logo's coral / teal / gold */
.hero-strip { display: flex; height: 10px; margin-top: clamp(40px, 6vw, 72px); }
.hero-strip span { flex: 1; }
.hero-strip span:nth-child(1) { background: var(--coral); }
.hero-strip span:nth-child(2) { background: var(--teal); }
.hero-strip span:nth-child(3) { background: var(--gold); }

/* ══════════════════════════════════════════════════════════════
   THE CYCLE
══════════════════════════════════════════════════════════════ */
.cycle-lead { max-width: 60ch; margin-bottom: 52px; font-size: 1.12rem; }
.cycle-lead-strong {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-style: italic;
  color: var(--ink);
}

.tried-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.tried-card {
  position: relative;
  padding: 38px 32px 34px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.3s, box-shadow 0.3s;
}
.tried-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tried-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
  color: var(--coral);
  margin-bottom: 18px;
}
.tried-card h3 { margin-bottom: 10px; }
.tried-card p { font-size: 0.98rem; color: var(--muted); }

.cycle-close {
  max-width: 56ch;
  margin-top: 52px;
  padding-left: 26px;
  border-left: 3px solid var(--gold);
  font-size: 1.1rem;
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════
   THE SHIFT  (dark teal block)
══════════════════════════════════════════════════════════════ */
.section--deep h2 { color: var(--cream); }
.section--deep em { color: var(--teal); font-style: italic; }

.shift-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.shift-col { font-size: 1.1rem; }

.shift-quote {
  padding: 44px 38px;
  background: rgba(253, 250, 245, 0.05);
  border: 1px solid rgba(216, 170, 98, 0.3);
  border-radius: var(--r-lg);
  text-align: center;
}
.shift-quote blockquote {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-style: italic;
  line-height: 1.32;
  color: var(--gold-soft);
}

.shift-pivot {
  max-width: 58ch;
  margin: clamp(48px, 6vw, 76px) auto 0;
  text-align: center;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.5;
}
.shift-pivot strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  color: var(--cream);
}

/* ══════════════════════════════════════════════════════════════
   THE ECOSYSTEM
══════════════════════════════════════════════════════════════ */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.eco-card {
  padding: 34px 30px;
  background: var(--white);
  border-radius: var(--r-md);
  border-top: 4px solid var(--teal);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s, box-shadow 0.3s;
}
.eco-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.eco-card:nth-child(3n + 2) { border-top-color: var(--coral); }
.eco-card:nth-child(3n + 3) { border-top-color: var(--gold); }

.eco-num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 16px;
}
.eco-card h3 { margin-bottom: 10px; }
.eco-card p { font-size: 0.97rem; color: var(--muted); }

.eco-close {
  max-width: 62ch;
  margin: 56px auto 0;
  text-align: center;
  font-size: 1.08rem;
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════
   MEET DR. MEL
══════════════════════════════════════════════════════════════ */
.mel-top {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  margin-bottom: clamp(56px, 7vw, 88px);
}
.mel-intro h2 { margin-bottom: 26px; }
.mel-hello {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--teal-dark);
  margin-bottom: 18px;
}

.mel-portrait { position: sticky; top: calc(var(--nav-h) + 32px); }
.mel-portrait img {
  width: 100%;
  aspect-ratio: 780 / 986;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--teal-soft);
  box-shadow: var(--shadow-card);
}

.mel-story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 64px);
}
.mel-block h3 {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--gold);
}

.mel-quote {
  margin-top: clamp(56px, 7vw, 88px);
  padding: clamp(40px, 5vw, 60px);
  background: var(--teal-soft);
  border-radius: var(--r-lg);
  text-align: center;
}
.mel-quote blockquote {
  max-width: 24ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-style: italic;
  line-height: 1.22;
  color: var(--teal-deep);
}
.mel-quote figcaption {
  margin-top: 22px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal-dark);
}

/* ══════════════════════════════════════════════════════════════
   ASSESSMENT  (coral block)
══════════════════════════════════════════════════════════════ */
.assessment {
  padding-block: clamp(72px, 10vw, 130px);
  background: var(--coral);
}
.assessment-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(44px, 6vw, 80px);
  align-items: start;
}
/* Coral is too light to carry white text, so this block runs dark-on-warm. */
.assessment h2 { color: var(--teal-deep); max-width: 18ch; }
.assessment-lead {
  max-width: 46ch;
  margin-top: 24px;
  font-size: 1.1rem;
  color: rgba(30, 64, 58, 0.86);
}

.assessment-benefits { margin-top: 34px; display: grid; gap: 16px; }
.assessment-benefits li {
  position: relative;
  padding-left: 34px;
  font-size: 1rem;
  color: rgba(30, 64, 58, 0.86);
}
.assessment-benefits li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--teal-deep);
}
.assessment-benefits strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--teal-deep);
}

.assessment-form-wrap {
  padding: clamp(32px, 4vw, 44px);
  background: var(--cream);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(30, 64, 58, 0.18);
}
.optin-form .field { display: block; margin-bottom: 20px; }
.optin-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.optin-form input[type="text"],
.optin-form input[type="email"] {
  width: 100%;
  padding: 15px 18px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.optin-form input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(102, 172, 162, 0.18);
}
.optin-form .btn { margin-top: 8px; }
.form-small { margin-top: 16px; text-align: center; font-size: 0.85rem; color: var(--muted); }

/* Honeypot — visually hidden but still reachable by bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note {
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: var(--r-sm);
  font-size: 0.95rem;
}
.form-note strong { display: block; font-weight: 700; }
.form-note--ok  { background: var(--teal-soft); color: var(--teal-deep); }
.form-note--err { background: var(--coral-soft); color: #8c3620; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.footer { background: var(--teal-deep); color: rgba(253, 250, 245, 0.72); }
.footer a { transition: color 0.2s; }
.footer a:hover { color: var(--coral); }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-top: clamp(56px, 7vw, 80px);
  padding-bottom: 44px;
}
.footer-brand img {
  height: 52px; width: auto;
  margin-bottom: 16px;
  /* The logo is dark-on-light; lift it slightly so it sits on the deep teal. */
  filter: brightness(1.06);
}
.footer-email { font-size: 0.95rem; border-bottom: 1px solid rgba(253, 250, 245, 0.25); padding-bottom: 2px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 28px; font-size: 0.95rem; }

.footer-legal { padding-bottom: 44px; border-top: 1px solid rgba(253, 250, 245, 0.12); padding-top: 32px; }
.footer-policies { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.88rem; margin-bottom: 20px; }
.footer-policies span { opacity: 0.4; }
.footer-disclaimer { max-width: 78ch; font-size: 0.83rem; line-height: 1.6; opacity: 0.6; }
.footer-copy { margin-top: 20px; font-size: 0.83rem; opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════
   LEGAL PAGES  (privacy · terms · refund)
══════════════════════════════════════════════════════════════ */
.legal-head {
  padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 84px));
  padding-bottom: clamp(40px, 5vw, 64px);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
/* Match the prose column so the title and body share a left edge. */
.legal-head .container { max-width: 76ch; }
.legal-head h1 { font-size: clamp(2.4rem, 5.2vw, 3.8rem); }
.legal-updated {
  margin-top: 18px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.legal-body {
  max-width: 76ch;
  padding-block: clamp(56px, 7vw, 88px);
}
.legal-lead {
  font-size: 1.15rem;
  color: var(--ink);
  padding-bottom: 34px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--gold);
}
.legal-body h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-top: 52px;
  margin-bottom: 16px;
}
.legal-body ul {
  margin: 18px 0;
  display: grid;
  gap: 12px;
}
.legal-body li {
  position: relative;
  padding-left: 26px;
}
.legal-body li::before {
  content: '';
  position: absolute;
  left: 2px; top: 11px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a {
  color: var(--teal-dark);
  border-bottom: 1px solid rgba(74, 139, 130, 0.35);
  transition: color 0.2s, border-color 0.2s;
}
.legal-body a:hover { color: var(--coral); border-color: var(--coral); }

/* Pulled-out block for the clauses that matter most — the veterinary
   disclaimer and the pre-purchase note. */
.legal-callout {
  margin: 44px 0;
  padding: clamp(28px, 3.5vw, 40px);
  background: var(--sand);
  border-left: 4px solid var(--coral);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.legal-callout h2 { margin-top: 0; }
.legal-callout p + p { margin-top: 1em; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .shift-grid,
  .mel-top,
  .assessment-inner { grid-template-columns: 1fr; }

  .mel-portrait { position: static; max-width: 420px; }
  .assessment h2 { max-width: none; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }

  .nav-hamburger { display: flex; }

  /* backdrop-filter turns .nav into the containing block for fixed-position
     children, which would trap the menu panel inside the 88px bar. The bar is
     effectively opaque anyway, so drop the blur here and let the panel
     resolve against the viewport. */
  .nav { backdrop-filter: none; background: var(--cream); }

  .nav-links {
    display: none;
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 22px var(--gutter) 40px;
    background: var(--cream);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 14px 28px rgba(30, 64, 58, 0.1);
  }
  .nav--open .nav-links { display: flex; }
  .nav-links a { padding: 10px 0; font-size: 1.05rem; }
  /* Needs the `a` in the selector to outrank `.nav-links a` above,
     which would otherwise strip the pill's horizontal padding. */
  .nav-links a.nav-cta {
    align-self: flex-start;
    margin-top: 16px;
    padding: 15px 34px;
    font-size: 1rem;
  }

  .nav--open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav--open .nav-hamburger span:nth-child(2) { opacity: 0; }
  .nav--open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .footer-inner { flex-direction: column; }
}

@media (max-width: 520px) {
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .btn { justify-content: center; }
  .hero-actions .link-soft { text-align: center; }
}