/*
Theme Name: Body Muscle Matters
Theme URI: https://bodymusclematters.com
Author: Body Muscle Matters
Author URI: https://bodymusclematters.com
Description: A bold, energetic, evidence-based fitness blog & reviews theme. Editorial blog-post components (TOC, pros/cons, for/against, list & number tables, Amazon bestsellers, FAQ, affiliate disclaimer), wave hero with featured image, and a legacy-content converter that reflows old WordPress/AAWP posts into the new design. Dark slate base with electric volt-green + orange accents.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: body-muscle-matters
Tags: blog, news, two-columns, custom-menu, featured-images, block-patterns, full-width-template, editor-style
*/

/* ============================================================
   BODY MUSCLE MATTERS — bold, energetic, evidence-based design system
   Dark slate base. Electric volt-green primary + orange accent.
   Condensed athletic headlines (Anton) + clean body (Barlow).
   Token names match the base theme so every component reskins.
   ============================================================ */

:root {
  /* ---- surfaces (dark slate, lightened) ---- */
  --paper:     #2f3645;
  --sky:       #222734;                  /* page base */
  --sky-2:     #2a3040;                  /* alt sections */
  --sky-3:     #3a4252;                  /* tints */
  --card:      #2f3645;

  /* ---- ink / text (light on dark) ---- */
  --ink:       #f6f8fb;                  /* headings */
  --body:      #d6dde7;                  /* body */
  --muted:     #a6afbe;
  --faint:     #6c7686;
  --line:      #454e60;
  --line-soft: #3a4252;

  /* ---- primary: electric volt-green (maps to OHT "blue") ---- */
  --blue:      #c6ff2e;
  --blue-deep: #a6e000;
  --blue-soft: #2c3a18;
  --aqua:      #9fe23a;
  --aqua-deep: #cdfc5e;
  --aqua-soft: #2a3520;

  /* ---- warm accent: orange (maps to OHT "coral") ---- */
  --coral:     #ff5a1e;
  --coral-deep:#e8430a;
  --coral-soft:#3a2416;
  --sun:       #ffb53a;
  --sun-soft:  #3a2c12;
  --mint:      green;                  /* tips / success */
  --mint-soft: #173a2a;
  --grape:     #37a7ff;                  /* info */
  --grape-soft:#16293a;

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
  --shadow:    0 18px 40px -22px rgba(0,0,0,.7);
  --shadow-lg: 0 40px 80px -30px rgba(0,0,0,.8);
  --shadow-coral: 0 8px 20px -10px rgba(255,90,30,.5);
  --shadow-blue:  0 0 30px -6px rgba(198,255,46,.5);

  --maxw: 1180px;
  --nav-h: 40px;

  --display: "Anton", system-ui, sans-serif;
  --sans:    "Barlow", system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 20px); }
body {
  font-family: var(--sans);
  background: var(--sky);
  color: var(--body);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }
::selection { background: oklch(0.58 0.125 42 / 0.18); }

h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.3; font-weight: 400; letter-spacing: .01em; text-wrap: balance; text-transform: uppercase; }

/* ------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 26px; }
.wrap-tight { max-width: 760px; }
section { position: relative; }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section.posts-section {
    padding-top: 40px !important;
}
.section-sm { padding-block: clamp(40px, 5vw, 72px); }
.bg-sky { background: var(--sky-2); }
.bg-blue-soft { background: linear-gradient(180deg, var(--blue-soft), var(--sky)); }

.eyebrow {
  font-weight: 700; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: 0.6; }
.eyebrow.coral { color: var(--coral-deep); }
.eyebrow.aqua { color: var(--aqua-deep); }
.section-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 14px; font-weight: 600; }
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.08rem; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.28rem); color: var(--body); line-height: 1.6; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 100px; font-weight: 700; font-size: 0.96rem;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s, color .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-coral); }
.btn-primary:hover { transform: translateY(-2px); background: var(--coral-deep); box-shadow: 0 12px 26px -14px rgba(255,90,30,.55); }
.btn-blue { background: var(--blue); color: #11140d; box-shadow: var(--shadow-blue); }
.btn-blue:hover { transform: translateY(-2px); background: var(--blue-deep); box-shadow: 0 0 36px -4px rgba(198,255,46,.7); }
.btn-ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--blue), var(--shadow); color: var(--blue); }
.btn-white { background: #fff; color: var(--blue-deep); box-shadow: var(--shadow); }
.btn-white:hover { transform: translateY(-2px); }
.btn-lg { padding: 17px 32px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--blue); transition: gap .25s, color .25s; }
.text-link svg { width: 16px; height: 16px; transition: transform .25s; }
.text-link:hover { color: var(--blue-deep); gap: 11px; }
.text-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------ tags / chips */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--blue-soft); color: var(--blue-deep);
}
.grid .tag {
    position: absolute;
    top: 10px;
    left: 10px;
}

.page-hero:after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    background: #00000045;
    top: 0;
    left: 0;
}

.page-hero {
    position: relative;
}

/*
.tag.cat-reviews    { background: var(--sun-soft);   color: oklch(0.46 0.09 62); }
.tag.cat-recovery   { background: var(--aqua-soft);  color: var(--aqua-deep); }
.tag.cat-training   { background: var(--coral-soft); color: var(--coral-deep); }
.tag.cat-mobility   { background: var(--grape-soft); color: var(--grape); }
.tag.cat-gear       { background: var(--mint-soft);  color: oklch(0.42 0.07 175); }
.tag.cat-nutrition  { background: var(--blue-soft);  color: var(--blue-deep); }
.tag.cat-programs   { background: var(--coral-soft); color: var(--coral-deep); }
*/

/* ============================================================ NAV */
.nav { z-index: 999 !important; height: auto; display: block; position: relative;
  background: rgba(28,33,45,0.86); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(16px) saturate(1.2); transition: box-shadow .3s; }
.nav.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px oklch(0.4 0.1 250 / 0.5); }
.nav .wrap { display: flex; align-items: center; width: 100%; max-width: none; justify-content: center; background: white;}
.nav .wrap-inner { display: flex; align-items: center; gap: 20px; width: 100%; max-width: var(--maxw); justify-content: center;}
.nav-wrap { display: flex; align-items: center; width: 100%; max-width: none; justify-content: center; padding: 10px 0; position: sticky; top: 0; z-index: 999; background: var(--sky); backdrop-filter: blur(16px) saturate(1.2);}
.nav-links { display: flex; align-items: center; gap: 20px; width:  max-content; justify-content: center;}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand .mark {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; position: relative; overflow: hidden;
  background: var(--blue); color: #11140d; box-shadow: var(--shadow-blue);
  display: grid; place-items: center;
}
.brand .mark svg { width: 24px; height: 24px; color: #11140d; position: relative; z-index: 2; }
.brand .mark::after { content:""; position:absolute; left:-20%; right:-20%; bottom:-30%; height:70%; border-radius:50%;
  background: oklch(1 0 0 / 0.10); }
.brand b { font-family: var(--display); font-size: 1.34rem; font-weight: 400; color: var(--ink); letter-spacing: 0.01em; line-height: 1; white-space: nowrap; text-transform: uppercase; }
.brand small { display: block; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aqua-deep); font-weight: 700; margin-top: 3px; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { padding: 9px 14px; border-radius: 100px; font-weight: 600; font-size: 0.95rem; color: var(--body); transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--blue); background: var(--blue-soft); }
.nav-links a.active { color: var(--blue); }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: var(--sky-2); transition: background .2s, transform .2s; }
.icon-btn:hover { background: var(--blue-soft); color: var(--blue); transform: translateY(-2px); }
.icon-btn svg { width: 19px; height: 19px; }
.nav-cta { display: inline-flex; }
.hamburger { display: none; }

@media only screen and (max-width:1024px) {
    .nav-links { display: none; width: 100%; }
    .nav-links a, .nav-links ul.menu > li > a {
        color: black !important;
    }
    .hamburger { display: grid; }
    .nav-links.mobile-open { display: flex; flex-direction: column; align-items: stretch; gap: 3px;
        position: fixed; top: calc(var(--nav-h) + -30px); left: 0; right: 0; z-index: 99; padding: 16px 26px 24px;
        background: oklch(1 0 0 / 0.98); backdrop-filter: blur(18px); box-shadow: var(--shadow-lg); }
    .nav-links.mobile-open a { padding: 13px 15px; font-size: 1.06rem; }
}

/* search overlay */
.search-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding-top: 13vh;
  background: oklch(0.45 0.08 250 / 0.35); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-box { width: min(640px, 90vw); transform: translateY(-12px); transition: transform .35s; }
.search-overlay.open .search-box { transform: none; }
.search-box label { display: block; color: #fff; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; margin-bottom: 12px; }
.search-field { display: flex; align-items: center; gap: 13px; background: #fff; border-radius: var(--radius); padding: 17px 20px; box-shadow: var(--shadow-lg); }
.search-field svg { width: 23px; height: 23px; color: var(--blue); flex-shrink: 0; }
.search-field input { flex: 1; background: none; border: none; outline: none; color: var(--ink); font-size: 1.25rem; }
.search-field input::placeholder { color: var(--faint); }
.search-hint { color: oklch(1 0 0 / 0.85); font-size: 0.84rem; margin-top: 14px; display: flex; gap: 16px; flex-wrap: wrap; }
.search-hint kbd { background: oklch(1 0 0 / 0.2); border-radius: 6px; padding: 2px 8px; font-family: var(--sans); font-size: 0.78rem; }

/* ============================================================ illustration scenes (friendly flat CSS art) */
.scene { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.scene .label { position: absolute; bottom: 9px; right: 11px; z-index: 6;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.02em;
  color: oklch(0.30 0.05 250 / 0.5); background: oklch(1 0 0 / 0.55); padding: 2px 7px; border-radius: 6px; }
/* base tints */
.scene-slate { background: linear-gradient(160deg, var(--sky-3), var(--blue-soft) 70%); }
.scene-aqua  { background: linear-gradient(160deg, oklch(0.92 0.07 195), var(--aqua-soft) 70%); }
.scene-warm  { background: linear-gradient(160deg, var(--sun-soft), var(--coral-soft) 70%); }
.scene-coral { background: linear-gradient(160deg, oklch(0.93 0.06 55), var(--coral-soft) 70%); }
.scene-mint  { background: linear-gradient(160deg, oklch(0.94 0.05 165), var(--mint-soft) 75%); }
.scene-grape { background: linear-gradient(160deg, oklch(0.94 0.04 310), var(--grape-soft) 75%); }
.scene-night { background: linear-gradient(160deg, var(--blue-soft), oklch(0.84 0.08 245)); }
/* legacy names mapped to friendly tints (so older markup still reads ok) */
.scene-dusk  { background: linear-gradient(160deg, var(--coral-soft), var(--blue-soft) 75%); }
.scene-teal  { background: linear-gradient(160deg, var(--aqua-soft), var(--blue-soft) 70%); }
.scene-amber { background: linear-gradient(160deg, var(--sun-soft), var(--coral-soft) 70%); }
.scene-wood  { background: linear-gradient(160deg, oklch(0.90 0.04 70), oklch(0.84 0.06 55)); }
.scene-stone { background: linear-gradient(160deg, oklch(0.94 0.01 230), oklch(0.88 0.02 235)); }

/* friendly illustration bits */
.scene .sun { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, var(--sun) 70%); box-shadow: 0 0 40px oklch(0.83 0.135 78 / 0.55); }
.scene .tub { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); width: 58%; height: 34%;
  border-radius: 0 0 50% 50% / 0 0 90% 90%; background: linear-gradient(180deg, var(--aqua), var(--blue-deep));
  box-shadow: inset 0 6px 14px oklch(1 0 0 / 0.3), 0 10px 24px -10px var(--blue-deep); }
.scene .tub::before { content:""; position:absolute; inset: -10% 0 auto 0; height: 26%; border-radius: 50%;
  background: oklch(0.86 0.09 200); box-shadow: 0 4px 10px -4px var(--blue-deep); }
.scene .wave { position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background:
    radial-gradient(60% 100% at 20% 100%, oklch(1 0 0 / 0.35), transparent 70%),
    radial-gradient(60% 100% at 70% 100%, oklch(1 0 0 / 0.25), transparent 70%);
  mix-blend-mode: soft-light; }
.scene .bubbles i { position: absolute; bottom: 16%; border-radius: 50%; background: oklch(1 0 0 / 0.6);
  animation: bub var(--bd,4s) ease-in infinite; animation-delay: var(--bdl, 0s); }
@keyframes bub { 0%{ transform: translateY(0) scale(0.6); opacity:0 } 25%{opacity:.9} 100%{ transform: translateY(-120px) scale(1); opacity: 0 } }
.scene .orb { position: absolute; border-radius: 50%; left: 50%; top: 26%; transform: translateX(-50%);
  background: radial-gradient(circle at 40% 35%, #fff, var(--sun) 65%, transparent 78%); }
.scene .shimmer { position:absolute; inset:auto 0 0 0; height: 44%;
  background: repeating-linear-gradient(180deg, oklch(1 0 0 / 0.18) 0 2px, transparent 2px 9px);
  mix-blend-mode: soft-light; animation: shimmer 6s ease-in-out infinite alternate; }
@keyframes shimmer { from{ transform: translateY(2px) } to { transform: translateY(-2px) } }
@media (prefers-reduced-motion: reduce){ .scene .shimmer, .scene .bubbles i { animation: none; } }

/* ============================================================ image slots (user-fillable photos) */
image-slot { display: block; width: 100%; height: 100%; }
image-slot::part(frame) { background: linear-gradient(160deg, var(--aqua-soft), var(--blue-soft) 60%, oklch(0.87 0.045 235)); }
image-slot::part(empty) { color: var(--aqua-deep); font-weight: 600; }
/* deep dusk variant for hero / feature imagery */
.slot-dusk::part(frame) { background: linear-gradient(170deg, oklch(0.62 0.07 235) 0%, oklch(0.46 0.07 224) 55%, oklch(0.30 0.055 220) 100%); }
.slot-dusk::part(empty) { color: oklch(0.97 0.012 230 / 0.92); }
.card-media image-slot, .rc-media image-slot, .gitem image-slot { position: absolute; inset: 0; }

/* ============================================================ steam */
.steam { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.steam i { position: absolute; bottom: -30px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, oklch(1 0 0 / 0.5), transparent 65%); filter: blur(12px); opacity: 0;
  animation: steamRise var(--d, 9s) ease-in infinite; animation-delay: var(--delay, 0s); }
@keyframes steamRise { 0%{ transform: translateY(0) scale(0.7); opacity:0 } 20%{opacity:.6} 70%{opacity:.3} 100%{ transform: translateY(-280px) scale(1.5) translateX(var(--drift,30px)); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .steam i { animation: none; opacity: 0.25; } }

/* ============================================================ CARDS / GRID */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card { position: relative; display: flex; flex-direction: column; background: var(--card);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs);
  border: 1px solid var(--line-soft);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.card-media .scene { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-media .scene { transform: scale(1.05); }
.card-media .tag { position: absolute; top: 13px; left: 13px; z-index: 5; background: oklch(1 0 0 / 0.9); }
.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 9px; font-size: 0.8rem; color: var(--faint); font-weight: 600; }
.card-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.card h3 { font-size: 1.2rem; line-height: 1.25; color: var(--ink); font-weight: 600; }
.card h3 a { transition: color .2s; }
.card:hover h3 a { color: var(--blue); }
.card p { color: var(--muted); font-size: 0.96rem; line-height: 1.55; }
.card-foot { margin-top: auto; padding-top: 4px; }
.card-lg .card-media { aspect-ratio: 16/11; }
.card-lg h3 { font-size: 1.6rem; }

/* ============================================================ TOPIC CARDS */
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.topic-card { position: relative; background: var(--card); border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow-xs); transition: transform .3s, box-shadow .3s; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.topic-card::after { content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; opacity:.5; background: var(--tint, var(--blue-soft)); transition: transform .4s; }
.topic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.topic-card:hover::after { transform: scale(1.3); }
.topic-ico { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; position: relative; z-index: 2;
  background: var(--tint, var(--blue-soft)); color: var(--tintfg, var(--blue-deep)); }
.topic-ico svg { width: 28px; height: 28px; }
.topic-card h3 { font-size: 1.3rem; position: relative; z-index: 2; }
.topic-card p { color: var(--muted); font-size: 0.96rem; position: relative; z-index: 2; }
.topic-card .count { position: relative; z-index: 2; margin-top: auto; font-weight: 700; color: var(--blue); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
.topic-card .count svg { width: 15px; height: 15px; transition: transform .25s; }
.topic-card:hover .count svg { transform: translateX(3px); }

/* ============================================================ STAT BAR */
.stat-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-bar .stat { display: flex; align-items: center; gap: 14px; }
.stat-bar .stat .si { width: 50px; height: 50px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--blue-soft); color: var(--blue); }
.stat-bar .stat .si svg { width: 24px; height: 24px; }
.stat-bar .stat b { font-family: var(--display); font-size: 1.7rem; color: var(--ink); line-height: 1; display: block; }
.stat-bar .stat span { font-size: 0.86rem; color: var(--muted); }

/* ============================================================ help-article components */
.callout { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--radius-sm); margin: 1.6em 0; }
.callout .ci { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; }
.callout .ci svg { width: 17px; height: 17px; }
.callout p { margin: 0 !important; font-size: 0.98rem; }
.callout b { color: var(--ink); }
.callout.tip  { background: var(--mint-soft); }
.callout.tip .ci  { background: var(--mint); color: #fff; }
.callout.warn { background: var(--coral-soft); }
.callout.warn .ci { background: var(--coral); color: #fff; }
.callout.info { background: var(--blue-soft); }
.callout.info .ci { background: var(--blue); color: #11140d; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.4em 0; display: flex; flex-direction: column; gap: 16px; }
.steps li { position: relative; padding-left: 56px; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 9px; background: var(--blue); color: #11140d;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; display: grid; place-items: center; box-shadow: var(--shadow-blue); }
.steps li b { color: var(--ink); display: block; font-size: 1.08rem; margin-bottom: 2px; }

/* table of contents */
.toc { background: var(--sky-2); border-radius: var(--radius); padding: 22px 24px; }
.toc h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--body); }
.toc a { transition: color .2s; } .toc a:hover { color: var(--blue); }

/* ============================================================ NEWSLETTER / lead magnet */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 64px);
  background: linear-gradient(150deg, var(--blue-deep), oklch(0.30 0.05 250) 90%); color: #fff; box-shadow: var(--shadow-lg); }
.cta-band h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 600; }
.cta-band p { color: oklch(1 0 0 / 0.86); max-width: 540px; margin: 14px 0 26px; }
.cta-band.center { text-align: center; } .cta-band.center p { margin-inline: auto; }
.lead-form { display: flex; gap: 10px; max-width: 480px; }
.cta-band.center .lead-form { margin-inline: auto; }
.lead-form input { flex: 1; background: #fff; border: none; outline: none; padding: 15px 18px; border-radius: 9px; color: var(--ink); font-size: 1rem; box-shadow: var(--shadow); }
.lead-form input::placeholder { color: var(--faint); }
.nl-note { font-size: 0.84rem; color: oklch(1 0 0 / 0.8); margin-top: 14px; }
.cta-band.center .nl-note { text-align: center; }
.nl-ok { color: #fff; font-weight: 800; margin-top: 14px; min-height: 1.2em; }

/* ============================================================ FORMS */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-weight: 700; font-size: 0.88rem; color: var(--ink); }
.field input, .field textarea, .field select { background: var(--sky-2); border: none; outline: none; padding: 14px 16px; border-radius: var(--radius-sm); color: var(--ink); font-size: 1rem; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s; }
.field input:focus, .field textarea:focus, .field select:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px var(--blue-soft); }
.field textarea { resize: vertical; min-height: 140px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ============================================================ FOOTER */
.footer { background: #171b24; color: oklch(0.82 0.03 240);}
.footer .wrap { padding-block: 64px 0; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 38px; padding-bottom: 48px; }
.footer .brand b { color: #fff; } .footer .brand small { color: var(--aqua); }
.footer h4 { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: oklch(0.80 0.03 240); font-size: 0.95rem; transition: color .2s; }
.footer ul a:hover { color: #fff; }
.footer .f-about p { color: oklch(0.78 0.03 240); font-size: 0.95rem; max-width: 320px; margin-top: 14px; }
.socials { display: flex; gap: 9px; margin-top: 18px; }
.socials a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: oklch(1 0 0 / 0.08); color: #fff; transition: all .2s; }
.socials a:hover { background: var(--coral); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 24px 0; border-top: 1px solid oklch(1 0 0 / 0.1); flex-wrap: wrap; }
.footer-bottom p { color: oklch(0.72 0.03 240); font-size: 0.85rem; }
.footer-bottom .closing { color: #fff; font-weight: 700; }
.footer-legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-legal a { color: oklch(0.80 0.03 240); font-size: 0.85rem; font-weight: 600; transition: color .2s; }
.footer-legal a:hover { color: #fff; }
@media (max-width: 600px){ .footer-legal { gap: 16px; } }

/* ============================================================ scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; } .reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } }

/* ============================================================ fun bits: wavy divider + amazon button */
.wave-divider { display: block; width: 100%; height: 40px; color: var(--sky-2); }
.wave-divider.flip { transform: rotate(180deg); }
.btn-amazon { background: linear-gradient(135deg, var(--sun), oklch(0.66 0.12 58)); color: oklch(0.24 0.05 50) !important; box-shadow: 0 8px 20px -12px oklch(0.66 0.12 58 / 0.6); font-weight: 800; }
.btn-amazon:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px oklch(0.66 0.12 58 / 0.75); }
.btn-amazon svg { width: 17px; height: 17px; }

/* ============================================================ EDITORIAL / BLOG-POST COMPONENTS */
/* affiliate disclaimer */
.disclaimer { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; margin: 1.4em 0; font-size: 0.92rem; color: var(--body); }
.disclaimer .di { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: oklch(0.72 0.095 72); color: #fff; }
.disclaimer .di svg { width: 16px; height: 16px; }
.disclaimer b { color: var(--ink); }

/* ============================================================ ARTICLE LAYOUT — sticky TOC + prose */
.post-wrap { display: grid; grid-template-columns: minmax(0,300px) minmax(0,720px); justify-content: center; gap: 46px; max-width: min(100%, 1112px); margin-inline: auto; padding: 0 22px; }
.post-wrap > .prose { grid-column: 2; }
.post-wrap .toc-side { grid-column: 1; padding-top: 30px; scrollbar-width: none;}

/* no-TOC posts (fewer than 3 headings): single centred column */
.post-wrap.no-toc { grid-template-columns: minmax(0,760px); }
.post-wrap.no-toc > .prose { grid-column: 1; }

/* the sticky behaviour */
.toc-side { position: sticky; top: calc(var(--nav-h) + 50px); align-self: start; max-height: calc(100vh - var(--nav-h) - 32px); overflow: auto; }

/* table of contents card — numbered sidebar with scroll-spy */
.toc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-xs); margin: 0; }
.toc-card h4 { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.toc-card h4 svg { width: 16px; height: 16px; }
.toc-card ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc-card li { counter-increment: toc; margin: 0; }
.toc-card li::marker { content: none; }
.toc-card a { display: flex; align-items: baseline; gap: 11px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--body); font-size: 0.9rem; line-height: 1.4; font-weight: 600; transition: background .18s ease, color .18s ease; }
.toc-card a::before { content: counter(toc, decimal-leading-zero); font-family: var(--display); font-weight: 400; color: var(--coral); font-size: 0.8rem; flex-shrink: 0; }
.toc-card a:hover { background: var(--blue-soft); color: var(--blue); }
.toc-card a.is-active { background: var(--blue-soft); color: var(--blue); }
.toc-card a.is-active::before { color: var(--blue); }


/* collapse to one column on tablet & down: TOC stacks on top, not sticky */
@media (max-width: 1024px){
  .post-wrap { grid-template-columns: 1fr; max-width: 760px; gap: 0; }
  .post-wrap > .prose { grid-column: 1; }
  .post-wrap .toc-side { grid-column: 1; padding-top: 24px; position: static; max-height: none; overflow: visible; }
  .toc-card { margin-bottom: 14px; }
}

/* generic editorial block heading */
.eblock { margin: 1.8em 0; }
.eblock-title { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 1.3rem; margin-bottom: 14px; }
.eblock-title .et-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.eblock-title .et-ico svg { width: 19px; height: 19px; }

/* pros & cons (two cards) */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 1.6em 0; }
.pc-col { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.pc-col .pc-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: #fff; }
.pc-col .pc-head svg { width: 20px; height: 20px; }
.pc-col.pros .pc-head { background: var(--mint); }
.pc-col.cons .pc-head { background: oklch(0.60 0.115 32); }
.pc-col ul { list-style: none; margin: 0; padding: 8px 20px 18px; display: flex; flex-direction: column; gap: 2px; }
.pc-col li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line-soft); color: var(--body); font-size: 0.97rem; }
.pc-col li:last-child { border-bottom: none; }
.pc-col li .lic { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 0.8rem; margin-top: 1px; }
.pc-col.pros li .lic { background: green; color: white; }
.pc-col.cons li .lic { background: var(--coral-soft); color: white; }
@media (max-width: 767px){ .proscons { grid-template-columns: 1fr; } }

/* for & against (versus table) */
.versus { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin: 1.6em 0; background: var(--card); box-shadow: var(--shadow-xs); }
.versus-head { display: grid; grid-template-columns: 1fr 1fr; }
.versus-head > div { padding: 14px 20px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: #11140d; display: flex; align-items: center; gap: 9px; }
.versus-head .vh-for { background: var(--blue); } .versus-head .vh-against { background: var(--aqua-deep); }
.versus-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.versus-row > div { padding: 14px 20px; font-size: 0.96rem; color: var(--body); display: flex; gap: 10px; align-items: flex-start; }
.versus-row > div:first-child { border-right: 1px solid var(--line); }
.versus-row .vd { width: 7px; height: 7px; border-radius: 50%; margin-top: 8px; flex-shrink: 0; }
.versus-row .for .vd { background: var(--blue); } .versus-row .against .vd { background: var(--aqua-deep); }

/* bullet list styled as table */
.list-table { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin: 1.5em 0; background: var(--card); box-shadow: var(--shadow-xs); }
.list-table .lt-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); transition: background .2s; }
.list-table .lt-row:last-child { border-bottom: none; }
.list-table .lt-row:hover { background: var(--sky-2); }
.list-table .lt-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.list-table .lt-ico svg { width: 20px; height: 20px; }
.list-table .lt-body b { display: block; color: var(--ink); font-weight: 600; font-size: 1.02rem; margin-bottom: 2px; }
.list-table .lt-body span { color: var(--muted); font-size: 0.94rem; }

/* numbered list styled as table */
.num-table { counter-reset: nt; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin: 1.5em 0; background: var(--card); box-shadow: var(--shadow-xs); }
.num-table .nt-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.num-table .nt-row:last-child { border-bottom: none; }
.num-table .nt-row::before { counter-increment: nt; content: counter(nt); width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--coral); color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.05rem; display: grid; place-items: center; box-shadow: var(--shadow-coral); }
.num-table .nt-body b { display: block; color: var(--ink); font-weight: 600; font-size: 1.04rem; margin-bottom: 2px; }
.num-table .nt-body span { color: var(--muted); font-size: 0.95rem; }

/* amazon bestseller list
   Product cards are a light surface sitting on the dark page. That is deliberate:
   Amazon thumbnails are cut out on white, so a dark card puts a white rectangle
   behind every product. The card declares its own light tokens instead of
   inheriting the page's dark ones, so nothing inside needs an override and a card
   looks the same whether or not AAWP's .aawp wrapper is still around it.

   Selectors are prefixed with .bestseller on purpose: these cards render inside
   .prose, and .prose's own a / h4 / img / p rules are defined further down this
   file, so an unprefixed .bs-* rule loses the cascade to them on source order. */
.bestseller {
  --bs-surface:   #fff;
  --bs-ink:       #191e27;
  --bs-muted:     #6d7684;
  --bs-line:      #e2e7ee;
  --bs-slate:     #232a38;                                       /* rank chip */
  /* "best for" flag. A tint of --blue can't work here: volt is a very light colour,
     so any mix of it with white lands within ~1.1:1 of the card and the chip
     disappears. Full strength with dark ink is the only version that reads. */
  --bs-flag:      var(--blue);
  --bs-flag-line: color-mix(in oklab, var(--blue) 78%, #2a3a00);
  --bs-flag-ink:  #1b2408;

  display: flex; flex-direction: column; gap: 14px; margin: 1.8em 0;
}
.bestseller .bs-item {
  display: grid; grid-template-columns: auto 124px minmax(0, 1fr) auto; gap: 20px;
  align-items: center; padding: 18px 20px;
  background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(8,12,20,.3), 0 10px 24px -18px rgba(8,12,20,.65);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.bestseller .bs-item:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(8,12,20,.32), 0 22px 42px -20px rgba(8,12,20,.8); }
/* .prose underlines every link it contains, including the text inside buttons. */
.bestseller .bs-item a { text-decoration: none; }

/* the list is a real ranking, so the number leads. #1 wears the volt. */
.bestseller .bs-rank {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.12rem; line-height: 1; letter-spacing: .01em;
  background: var(--bs-slate); color: var(--blue);
}
.bestseller .bs-item.top .bs-rank { background: var(--blue); color: var(--bs-slate); }

/* No frame or mat: Amazon cut-outs are already on white, so on a white card the
   product reads as floating, and a border would just draw a box around nothing.
   object-fit keeps mixed aspect ratios aligned without one. */
.bestseller .bs-img {
  width: 124px; height: 104px; border-radius: 10px; overflow: hidden; position: relative; flex-shrink: 0;
}
.bestseller .bs-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bestseller .bs-img image-slot, .bestseller .bs-img .scene { position: absolute; inset: 0; width: 100%; height: 100%; }

.bestseller .bs-body { min-width: 0; }
/* what a product is best at is the thing readers scan a roundup for, so it sits
   above the name rather than in a column they have to read across to. */
.bestseller .bs-tag {
  display: inline-block; margin: 0 0 9px; padding: 4px 11px; border-radius: 100px;
  background: var(--bs-flag); border: 1px solid var(--bs-flag-line); color: var(--bs-flag-ink);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.45;
}
/* caps are the label's job. The name stays cased so RENPHO reads as a brand and
   MorphoScan as a model, and so it fits on fewer lines. */
.bestseller .bs-body h4 {
  font-size: 1.12rem; line-height: 1.3; color: var(--bs-ink); margin: 0; font-weight: 600;
  text-transform: none; letter-spacing: .005em; text-wrap: initial;
  /* Amazon titles run to 40 words. Two lines, then stop. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.bestseller .bs-body h4 a { color: inherit; font-weight: inherit; }
.bestseller .bs-body h4 a:hover { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bestseller .bs-body p { color: var(--bs-muted); font-size: 0.92rem; margin: 5px 0 0; }
.bestseller .bs-stars { display: inline-flex; align-items: center; gap: 6px; color: var(--bs-muted); font-size: 0.85rem; font-weight: 600; }
.bestseller .bs-stars .st { display: inline-flex; color: var(--sun); }
.bestseller .bs-stars .st svg { width: 14px; height: 14px; }

.bestseller .bs-cta { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; min-width: 156px; }
.bestseller .bs-cta .btn { font-weight: 800; }
.bestseller .bs-cta .price { font-family: var(--display); font-weight: 700; color: var(--bs-ink); font-size: 1.2rem; }
.bestseller .bs-badge { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--coral-deep); }

/* [amazon table] comparisons and standalone [amazon box] products are not
   rankings, so those cards carry no badge and the grid closes the column up.
   Mobile needs no override: the badge is out of flow there anyway. */
.bestseller.unranked .bs-item { grid-template-columns: 124px minmax(0, 1fr) auto; }
.bestseller.unranked .bs-body h4 { -webkit-line-clamp: 3; line-clamp: 3; }

.bestseller .bs-item a:focus-visible { outline: 2px solid var(--bs-slate); outline-offset: 3px; border-radius: 4px; }

/* On a phone a rank column would eat ~50px that the name and the pill need, so the
   badge pins to the thumbnail corner instead and the buy button takes its own row. */
@media (max-width: 767px){
  .bestseller .bs-item { position: relative; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .bestseller .bs-rank {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    width: 30px; height: 30px; font-size: .92rem; box-shadow: 0 2px 8px rgba(8,12,20,.3);
  }
  .bestseller .bs-item.top .bs-rank { box-shadow: 0 2px 8px rgba(8,12,20,.3); }
  .bestseller .bs-img { width: 96px; height: 96px; }
  .bestseller .bs-body h4 { font-size: 1.02rem; -webkit-line-clamp: 3; line-clamp: 3; }
  .bestseller .bs-tag { font-size: 0.66rem; letter-spacing: 0.05em; }
  .bestseller .bs-cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
  .bestseller .bs-cta .btn { flex: 1; }
  /* Must restate: .bestseller.unranked .bs-item outranks .bestseller .bs-item and
     a media query adds no specificity, so the desktop grid would win here. */
  .bestseller.unranked .bs-item { grid-template-columns: 96px minmax(0, 1fr); }
  /* No flag above it and the 96px thumbnail already sets the row height, so the
     extra line is free and keeps trimmed Amazon names whole on a phone. */
  .bestseller.unranked .bs-body h4 { -webkit-line-clamp: 4; line-clamp: 4; }
}
/* 320px phones: give the name back the width it needs to stay unclipped. */
@media (max-width: 360px){
  .bestseller .bs-item { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .bestseller .bs-img { width: 76px; height: 76px; }
  .bestseller .bs-tag { font-size: 0.6rem; letter-spacing: 0.02em; padding: 3px 9px; }
  .bestseller .bs-rank { top: 8px; left: 8px; width: 26px; height: 26px; font-size: .82rem; }
  .bestseller.unranked .bs-item { grid-template-columns: 76px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  .bestseller .bs-item { transition: none; }
  .bestseller .bs-item:hover { transform: none; }
}

.bs-title { display:flex; align-items:center; gap:.5rem; font-weight:700; margin-bottom:1rem; }
.bs-title svg { width:1.15em; height:1.15em; flex:none; }

.bs-rating { display:flex; align-items:center; gap:.4rem; margin-top:.35rem; font-size:.875rem; }
.bs-stars { position:relative; display:inline-block; white-space:nowrap; line-height:1; }
.bs-stars-off { color:#d8d8d8; }
.bs-stars-on { position:absolute; inset:0 auto 0 0; overflow:hidden; color:#f5a623; }
.bs-rating-count { color:#666; }

/* faq accordion (post) */
.faq-block { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin: 1.4em 0; background: var(--card); box-shadow: var(--shadow-xs); }
.faq-block details { border-bottom: 1px solid var(--line-soft); }
.faq-block details:last-child { border-bottom: none; }
.faq-block summary { cursor: pointer; list-style: none; padding: 18px 22px; font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: background .2s; }
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary:hover { background: var(--sky-2); }
.faq-block summary .chev { transition: transform .3s; color: var(--blue); flex-shrink: 0; }
.faq-block details[open] summary .chev { transform: rotate(45deg); }
.faq-block details > p, .faq-block .faq-a { color: var(--muted); padding: 0 22px 20px; margin: 0; font-size: 0.98rem; }
.faq-block .faq-a > :last-child { margin-bottom: 0; }
.faq-block .faq-a p { margin: 0 0 .7em; color: var(--muted); }
.faq-block .faq-a a { color: var(--blue); font-weight: 600; }

/* ============================================================ responsive */
@media (max-width: 1024px) {
  .nav-cta { display: none; }
  .nav-links { gap: 0; } .nav-links a { padding: 9px 11px; }
}
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-bar { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 767px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .topic-grid { grid-template-columns: 1fr; }
  .lead-form { flex-direction: column; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .stat-bar { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; }
  .wrap { padding-inline: 18px; }
}


/* ============================================================ WORDPRESS THEME ADDITIONS */
/* featured image fills the wave hero; sits above the water fallback */
.post-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.post-hero-img { position: relative; }

/* WP core alignments inside .prose */
.prose .alignleft { float: left; margin: 6px 24px 16px 0; max-width: 50%; border-radius: var(--radius-sm); }
.prose .alignright { float: right; margin: 6px 0 16px 24px; max-width: 50%; border-radius: var(--radius-sm); }
.prose .aligncenter { display: block; margin: 1.4em auto; }
.prose img { border-radius: var(--radius-sm); height: auto; }
.prose figure { margin: 1.6em 0; }
.prose figure img { width: 100%; }
.prose figcaption { text-align: center; color: var(--faint); font-size: 0.88rem; margin-top: 10px; display: block !important;}
.prose .wp-block-image { margin: 1.6em 0; }
.alignwide { width: min(100%, 980px); margin-inline: auto; }
.alignfull { width: 100%; }
.prose iframe, .prose .wp-block-embed iframe, .prose figure  { max-width: 100% !important; }
.prose { overflow-wrap: break-word; }

/* generic WP table inside prose → styled like a spec table */
.prose > table, .prose .wp-block-table table { width: 100%; border-collapse: collapse; margin: 1.5em 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs);  }
@media only screen and (max-width:1024px) { .prose > table, .prose .wp-block-table table { box-shadow: none;  } }
.prose table th, .prose table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.prose table thead th { background: var(--sky-2); color: var(--ink); font-family: var(--display); font-weight: 600; }
.prose table tbody tr:hover { background: var(--sky-2); }

/* ---- code / pre blocks (contain ASCII diagrams instead of overflowing) ---- */
.prose pre {
  margin: 1.6em 0;
  padding: 18px 20px;
  background: var(--sky-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  max-width: 100%;
  overflow-x: auto;                 /* horizontal scroll stays inside the box */
  -webkit-overflow-scrolling: touch;
  font-size: 0.9rem;
  line-height: 1.5;
}
.prose pre code {
  display: block;
  white-space: pre;                 /* keep the flowchart alignment intact */
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--body);
  background: none;
  padding: 0;
  border: 0;
  font-size: inherit;
}
/* inline code */
.prose :not(pre) > code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--sky-2);
  color: var(--aqua-deep);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  overflow-wrap: break-word;
}

/* let the prose column shrink below its widest content so pre/table scroll
   containers can actually activate (grid/flex items default to min-width:auto) */
.prose { min-width: 0; }
.post-layout > .prose,
.post-wrap > .prose { min-width: 0; }


/* sticky-aside layout helper for single */
.post-aside .toc-card { position: sticky; top: calc(var(--nav-h) + 20px); }

/* comments (native WP) */
.commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.commentlist .comment { padding: 20px 0; border-bottom: 1px solid var(--line); }
.comment-body { display: flex; gap: 14px; }
.comment .avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; }
.comment .comment-author { font-weight: 700; color: var(--ink); }
.comment .comment-meta { color: var(--faint); font-size: 0.82rem; margin-bottom: 6px; }
.comment .comment-content p { color: var(--body); margin: 0 0 .6em; }
.comment .children { list-style: none; margin: 0 0 0 40px; padding: 0; }
.comment-respond { background: var(--sky-2); border-radius: var(--radius); padding: 26px; margin-top: 24px; }
.comment-respond .comment-reply-title { font-size: 1.3rem; margin-bottom: 14px; }
.comment-form label { display:block; font-weight:700; font-size:0.88rem; color:var(--ink); margin-bottom:6px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
  width:100%; background:#fff; border:none; outline:none; padding:13px 15px; border-radius:var(--radius-sm); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); margin-bottom:14px; font:inherit; }
.comment-form .submit { background:var(--coral); color:#fff; border:none; border-radius:100px; padding:13px 26px; font-weight:700; cursor:pointer; }

/* pagination */
.bmm-pagination { display:flex; justify-content:center; gap:8px; margin-top:44px; flex-wrap:wrap; }
.bmm-pagination .page-numbers { display:grid; place-items:center; min-width:44px; height:44px; padding:0 12px; border-radius:100px; background:var(--card); box-shadow:inset 0 0 0 1.5px var(--line); color:var(--body); font-weight:700; transition:all .2s; }
.bmm-pagination .page-numbers.current { background:var(--blue); color:#11140d; box-shadow:var(--shadow-blue); }
.bmm-pagination a.page-numbers:hover { color:var(--blue); box-shadow:inset 0 0 0 1.5px var(--blue); }

/* admin bar offset */
.admin-bar .nav { top: 32px; }
@media (max-width:767px){ .admin-bar .nav { top: 46px; } }

/* screen-reader */
.screen-reader-text { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:8px; top:8px; z-index:1000; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--shadow); }


/* ---- WordPress nav menu normalisation ---- */
.nav-links { list-style: none; }
.nav-links li { list-style: none; margin: 0; }
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a { color: var(--blue); }
.footer-legal { list-style: none; margin: 0; padding: 0; }
.footer-legal li { list-style: none; margin: 0; }
.footer .menu, .footer ul.menu { list-style: none; margin: 0; padding: 0; }
@media (max-width: 1024px){
  .nav-links.mobile-open li { width: 100%; }
}


/* ============================================================ SINGLE-POST COMPONENTS (bundled for theme) */
.prose { font-size: 1.13rem; line-height: 1.8; color: var(--body); }
.prose > p { margin-bottom: 1.3em; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); color: var(--ink); margin: 1.6em 0 .5em; scroll-margin-top: calc(var(--nav-h) + 20px); }
.prose h3 { font-size: 1.25rem; color: var(--ink); margin: 1.4em 0 .4em; }
.prose h4 { margin: 1.2em 0 .4em; }
.prose a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li { margin-bottom: .5em; line-height: 1.7; }
.prose li::marker { color: var(--aqua-deep); }
.prose blockquote { margin: 1.5em 0; padding: 6px 0 6px 22px; border-left: 4px solid var(--coral); font-family: var(--display); font-size: 1.3rem; line-height: 1.4; color: var(--ink); }
.prose blockquote p { margin: 0; }
.prose > p:first-child { font-size: 1.18rem; }

/* tables (WP block + classic) */
.prose .wp-block-table { margin: 1.5em 0; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); background: var(--card); }
.prose table th, .prose table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.prose table thead th { background: var(--sky-2); color: var(--ink); font-family: var(--display); font-weight: 600; }
.prose table tbody tr:last-child td { border-bottom: none; }
.prose table tbody tr:hover { background: var(--sky-2); }
.prose table strong { color: var(--ink); }

/* crumbs */
.crumbs a:hover { color: var(--blue); }

/* wave hero */
.post-hero { position: relative; margin-bottom: clamp(10px, 2vw, 22px); }
.post-hero-img { position: relative; height: clamp(300px, 40vw, 470px);  overflow: hidden; background: linear-gradient(160deg, var(--sky-2), var(--sky-3)); }
.post-hero-water { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, oklch(0.89 0.07 197) 0%, oklch(0.79 0.10 209) 36%, oklch(0.66 0.12 224) 76%, oklch(0.57 0.12 232) 100%); }
.post-hero-water::before { content:""; position:absolute; inset:-25%;
  background:
    radial-gradient(58px 24px at 18% 28%, oklch(1 0 0 / 0.4), transparent 60%),
    radial-gradient(82px 30px at 58% 18%, oklch(1 0 0 / 0.28), transparent 60%),
    radial-gradient(70px 24px at 82% 46%, oklch(1 0 0 / 0.34), transparent 60%),
    radial-gradient(96px 32px at 40% 68%, oklch(1 0 0 / 0.24), transparent 60%);
  mix-blend-mode: screen; opacity: .75; animation: waterDrift 16s ease-in-out infinite alternate; }
.post-hero-water::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(180deg, oklch(1 0 0 / 0.11) 0 1px, transparent 1px 13px); mix-blend-mode: soft-light; }
.hw-glint { position:absolute; left:62%; top:-14%; width:44%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, oklch(0.99 0.03 95 / 0.7), transparent 64%); filter: blur(6px); z-index:2; }
@keyframes waterDrift { from { transform: translate3d(-3%,0,0) scale(1.04);} to { transform: translate3d(3%,2%,0) scale(1.08);} }
@media (prefers-reduced-motion: reduce){ .post-hero-water::before { animation: none; } }
.post-hero .steam { position: absolute; inset: 0; z-index: 2; }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(46px, 6vw, 80px); display: block; z-index: 3; color: var(--sky); }
.post-hero-card { position: relative; z-index: 4; max-width: 920px; margin: clamp(-108px, -9vw, -74px) auto 0; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(26px, 4vw, 46px); border: 1px solid var(--line-soft); }
.post-hero .meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.post-hero .meta-row .upd { color: var(--muted); font-size: .86rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
.post-hero h1 { color: var(--ink); font-size: clamp(1.9rem, 4vw, 3.3rem); font-weight: 600; line-height: 1.16; }
.post-hero .dek { color: var(--muted); font-size: clamp(1.04rem, 1.5vw, 1.22rem); margin-top: 14px; max-width: 640px; }
.post-hero .hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.post-hero .byline { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.post-hero .byline .av, .post-hero .byline .avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.post-hero .byline b { color: var(--ink); font-size: .96rem; } .post-hero .byline span { display: block; color: var(--faint); font-size: .82rem; }

/* post layout */
.post-layout { display: grid; grid-template-columns: 1fr minmax(0,720px) 1fr; }
.post-layout > .prose { grid-column: 2; }
@media (max-width: 767px){ .post-layout { display: block; } .post-layout > .prose { padding-inline: 20px; } .post-hero-img { height: clamp(220px, 52vw, 320px); } .post-hero-card { margin-top: -56px; } }


/* ============================================================ v3 FIXES — header, prose spacing, tables */
/* brand label never breaks the nav row */
.brand small { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .wrap { flex-wrap: nowrap; }
.nav-links .menu { flex-wrap: wrap !important; row-gap: 15px !important;}

/* prose spacing — robust (descendant selectors, not just direct children) */
.prose { line-height: 1.85; }
.prose p { margin: 0 0 1.35em; }
.prose ul, .prose ol { margin: 0 0 1.5em; padding-left: 1.5em; }
.prose li { margin-bottom: .55em; line-height: 1.75; }
.prose li > ul, .prose li > ol { margin: .55em 0 0; }
.prose h2 { margin: 1.9em 0 .55em; }
.prose h2:first-child, .prose > :first-child { margin-top: 0; }
.prose h3 { margin: 1.55em 0 .4em; }
.prose h4 { margin: 1.3em 0 .4em; }

/* ---- tables: full design ---- */
.prose figure.wp-block-table { margin: 1.7em 0; }
.prose .wp-block-table { overflow-x: auto; }
.prose table {
  width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.7em 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-xs); font-size: 0.99rem;
}
.prose table caption { caption-side: top; text-align: left; font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 1.1rem; margin-bottom: 10px; }
.prose table th, .prose table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.prose table thead th {
  background: var(--blue-soft);
  color: var(--blue-deep); font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  border-bottom: 2px solid var(--line);
}
/* emphasise the first column (row labels) */
.prose table tbody td:first-child, .prose table tbody th { font-weight: 600; color: var(--ink); }
/* zebra + hover */
.prose table tbody tr:nth-child(even) { background: color-mix(in oklab, var(--sky-2) 70%, transparent); }
.prose table tbody tr:hover { background: var(--blue-soft); }
.prose table tbody tr:last-child td { border-bottom: none; }
.prose table a { color: var(--blue); font-weight: 600; }
/* green check / red x cells (common in comparison tables) */
.prose table td:only-child { text-align: center; }
.prose table th:first-child, .prose table td:first-child {
    display: none;
}


/* ---- mobile: collapse each row into its own card (no columns dropped) ---- */
@media (max-width: 767px){
  /* no horizontal scroll needed once rows stack */
  .prose .wp-block-table { overflow-x: visible; }

  /* strip the desktop table chrome — the cards carry their own */
  .prose table { display: block; width: 100%; border: none; box-shadow: none; background: none; font-size: 0.94rem; }

  /* hide the header row visually; its labels are echoed into each cell */
  .prose table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  .prose table tbody, .prose table tr, .prose table td { display: block; width: 100%; }

  /* one row = one card */
  .prose table tbody tr {
    background: white !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    margin: 0 0 14px;
  }
  .prose table tbody tr:nth-child(even) { background: var(--card); } /* cancel desktop zebra */
  .prose table tbody tr:hover { background: var(--card); }

  /* each cell: column label on the left, value on the right */
  .prose table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    text-align: right;
    padding: 11px 15px;
    border: none;
    color: var(--card) !important;
  }
  .prose table td:last-child { border-bottom: none; }
  .prose table tbody td:first-child { display: none; }
/* stays hidden as on desktop */

  .prose table td::before {
    content: attr(data-label);
    font-family: var(--display);
    font-weight: 600;
    color: var(--card);
    text-align: left;
    flex: 0 0 42%;
  }
  .prose table a {
      color: black;
  }
  /* graceful fallback for cells with no label yet */
  .prose table td:not([data-label]) { text-align: left; }
  .prose table td:not([data-label])::before { content: none; }
}


/* ============================================================ v4 — logo size, nav nowrap, Poppins headings */
:root { --display: "Poppins", system-ui, -apple-system, sans-serif; }
.brand .custom-logo, .brand .custom-logo-link img, .brand img.custom-logo { height: 94px !important; width: auto !important; max-width: 190px; object-fit: contain; }
.custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
.nav-links a { white-space: nowrap; }
@media (max-width: 1024px){ .nav-cta { display: none; } }


/* ============================================================ v5 — hero, numbered lists, key takeaways, topic posts, category head */

/* ---- HOME HERO (was missing from the theme bundle) ---- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-scene { position: absolute; inset: 0; z-index: -2; }
.hs-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1c3b44 0%, #243044 52%, var(--sky) 100%); }
.hs-sun { position: absolute; top: 12%; right: 14%; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #fff, var(--sun) 72%); box-shadow: 0 0 70px oklch(0.83 0.12 78 / 0.55); opacity: .9; }
.hs-water { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(180deg, oklch(0.74 0.08 205) 0%, oklch(0.56 0.10 222) 100%); }
.hs-water::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 2px, transparent 2px 11px); }
.hs-tub { position: absolute; left: 58%; bottom: 11%; transform: translateX(-50%); width: 30%; max-width: 330px; aspect-ratio: 2 / 1; }
.hs-tub .rim { position:absolute; inset:0; border-radius: 50% / 42%; background: linear-gradient(180deg, #ecdfce, #c9b59c); box-shadow: 0 18px 32px -14px rgba(0,0,0,.32); }
.hs-tub .wt { position:absolute; inset: 16% 9% 12%; border-radius: 50% / 46%; background: radial-gradient(circle at 50% 28%, oklch(0.82 0.09 205), oklch(0.55 0.11 224)); box-shadow: inset 0 6px 12px rgba(255,255,255,.35); }
.hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, var(--sky) 16%, oklch(0.97 0.012 230 / 0.4) 46%, transparent 64%); }
.hero .steam { z-index: -1; }

.hero-wrap { position: relative; display: flex; align-items: center; min-height: clamp(460px, 56vw, 620px); padding-block: clamp(48px, 7vw, 92px); }
.hero-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 3.4vw, 46px); max-width: 580px; position: relative; box-shadow: var(--shadow-lg); }
.hero-card .eyebrow { margin-bottom: 14px; }
.hero-card h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.08; }
.hero-card .lead { margin-top: 16px; color: var(--body); }
.hero-form { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.hero-trust { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.hero-trust .avs { display: flex; }
.hero-trust .avs span { width: 30px; height: 30px; border-radius: 50%; margin-left: -8px; border: 2px solid #fff; }
.hero-trust .avs span:nth-child(1){ background: var(--coral); }
.hero-trust .avs span:nth-child(2){ background: var(--aqua); }
.hero-trust .avs span:nth-child(3){ background: var(--sun); }
.hero-trust .avs span:nth-child(4){ background: var(--grape); }
.hero .hero-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 54px; color: var(--sky-2); display: block; z-index: 1; }
.hero .hero-wave path { fill: currentColor; }
@media (max-width: 767px){
  .hero-scrim { background: linear-gradient(180deg, oklch(0.97 0.012 230 / 0.5) 26%, transparent 96%); }
  .hero-card { max-width: none; }
  .hs-tub { opacity: .85; }
}

/* ---- NUMBERED LISTS in prose (styled counters) ---- */
.prose ol { list-style: none; counter-reset: olc; padding-left: 0; margin: 1.5em 0; }
.prose ol > li { counter-increment: olc; position: relative; padding-left: 54px; margin-bottom: 16px; min-height: 36px; }
.prose ol > li::before { content: counter(olc); position: absolute; left: 0; top: -1px; width: 36px; height: 36px; border-radius: 11px; background: var(--blue-deep); color: var(--blue-soft); font-family: var(--display); font-weight: 700; font-size: 1.02rem; display: grid; place-items: center; box-shadow: var(--shadow-blue); }
.prose ol > li::marker { content: none; }
.prose ol ol { margin: .6em 0; }
/* keep TOC + steps using their own numbering */
.toc-card ol > li { counter-increment: toc; padding-left: 0; margin-bottom: 4px; min-height: 0; }
.toc-card ol > li::before { content: none; }
.steps li { padding-left: 56px; }
.steps li::before { width: 38px; height: 38px; }

/* ---- KEY TAKEAWAYS pop-out box ---- */
.key-takeaways { position: relative; background: var(--blue-soft); border: 1px solid var(--line); border-left: 5px solid var(--blue-deep); border-radius: var(--radius); padding: 24px 28px 22px 30px; margin: 1.9em 0; box-shadow: var(--shadow); }
.key-takeaways .kt-label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; color: var(--blue-deep); font-size: 1.18rem; margin-bottom: 12px; }
.key-takeaways .kt-label svg { width: 22px; height: 22px; color: var(--blue-deep); }
.key-takeaways > p { margin: 0 0 1em; }
.key-takeaways ul { margin: 6px 0 0; padding-left: 1.25em; }
.key-takeaways ul li { margin-bottom: 10px; line-height: 1.7; }
.key-takeaways ul li::marker { color: var(--coral); }
.key-takeaways > :last-child { margin-bottom: 0; }

/* ---- TOPIC CARD latest posts (internal linking) ---- */
.topic-card { display: flex; flex-direction: column; }
.topic-card h3 a { transition: color .2s; }
.topic-card h3 a:hover { color: var(--blue); }
.topic-card .tc-posts { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 9px; position: relative; z-index: 2; }
.topic-card .tc-posts a { display: flex; gap: 9px; color: var(--body); font-size: 0.92rem; font-weight: 600; line-height: 1.35; transition: color .2s; }
.topic-card .tc-posts a::before { content: ""; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--aqua); flex-shrink: 0; }
.topic-card .tc-posts a:hover { color: var(--blue); }
.topic-card .count { margin-top: 16px; }

/* ---- ARCHIVE / CATEGORY HEAD — compact + lively ---- */
.archive-head { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--blue-soft), var(--sky)); padding-top: clamp(34px,4vw,56px); padding-bottom: clamp(30px,3.5vw,46px); }
.archive-head .wrap { position: relative; z-index: 2; }
.archive-head .eyebrow { margin-bottom: 8px; }
.archive-head h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.archive-head .ah-desc { color: var(--muted); max-width: 580px; margin-top: 10px; }
.archive-head .ah-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.archive-head .ah-chips a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 100px; background: var(--sky-2); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--body); font-weight: 600; font-size: 0.88rem; transition: all .2s; }
.archive-head .ah-chips a:hover { color: var(--blue); transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--blue); }
.archive-head .ah-chips a.is-current { background: var(--blue); color: #11140d; box-shadow: var(--shadow-blue); }
.archive-head .ah-blob { position: absolute; border-radius: 50%; z-index: 1; filter: blur(2px); opacity: .5; }
.archive-head .ah-blob.b1 { width: 180px; height: 180px; right: 6%; top: -40px; background: radial-gradient(circle at 40% 40%, #fff, var(--aqua-soft) 70%); }
.archive-head .ah-blob.b2 { width: 110px; height: 110px; right: 22%; bottom: -30px; background: radial-gradient(circle at 40% 40%, var(--sun-soft), transparent 72%); }
.archive-head .ah-count { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-weight: 700; color: var(--blue-deep); font-size: 0.92rem; }

/* ---- FOOTER: social label ---- */
.footer .social-label { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua); margin: 20px 0 10px; }


/* ---- v6: numbered lists in a box ---- */
.prose .num-box { background: var(--sky-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin: 1.7em 0; box-shadow: var(--shadow-xs); }
.prose .num-box ol { margin: 0; }
.prose .num-box ol > li:last-child { margin-bottom: 0; }
.prose .num-box ol > li::before { box-shadow: var(--shadow-blue), 0 0 0 3px var(--sky-2); }
@media (max-width: 767px){ .prose .num-box { padding: 18px 16px 18px 18px; } }


/* ---- v7: bullet lists in a box (check-circle badges) ---- */
.prose .bullet-box { background: var(--sky-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin: 1.7em 0; box-shadow: var(--shadow-xs); }
.prose .bullet-box ul.bullet-list { list-style: none !important; margin: 0; padding: 0; }
.prose .bullet-box ul.bullet-list > li { list-style: none !important; }
.prose .bullet-box ul.bullet-list > li { position: relative; padding-left: 40px; margin-bottom: 14px; line-height: 1.7; }
.prose .bullet-box ul.bullet-list > li:last-child { margin-bottom: 0; }
.prose .bullet-box ul.bullet-list > li::marker { content: none; }
.prose .bullet-box ul.bullet-list > li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: green url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4L19 7'/></svg>") center / 15px no-repeat;
  box-shadow: 0 0 0 3px var(--sky-2); flex-shrink: 0;
}
@media (max-width: 767px){ .prose .bullet-box { padding: 18px 16px; } }


/* ============================================================ v9 — roomier cards, wider content, verdict boxes */
:root { --maxw: 1240px; }

/* topic cards: more room + line spacing + button-style link */
.topic-card { padding: 32px 30px; }
.topic-card h3 { font-size: 1.42rem; }
.topic-card > p { font-size: 1rem; line-height: 1.7; color: var(--muted); }
.topic-card .tc-posts { gap: 13px; padding-top: 16px; margin-top: 16px; }
.topic-card .tc-posts a { font-size: 0.96rem; line-height: 1.5; }
.topic-card .count { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 20px; padding: 11px 20px; border-radius: 100px; background: var(--volt-deep); color: black; font-weight: 700; font-size: 0.92rem; box-shadow: var(--shadow-blue); transition: transform .2s, background .2s; white-space: nowrap; }
.topic-card .count:hover { background: var(--blue-deep); transform: translateY(-2px); }
.topic-card .count svg { width: 15px; height: 15px; }
.topic-grid { gap: 26px; }

/* recent-guide cards: line spacing + a little bigger */
.card-body { padding: 24px 24px 26px; gap: 12px; }
.card h3 { font-size: 1.3rem; line-height: 1.32; }
.card p { line-height: 1.7; font-size: 0.98rem; }

/* post content: wider so review titles don't wrap so early */

.post-layout { grid-template-columns: 1fr minmax(0, 768px) 1fr !important; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.92rem); text-wrap: balance; }
.prose h3 { text-wrap: balance; }

/* Verdict / Choose if / Skip if boxes (landscape, full width) */
.prose .vbox { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-xs); margin: 1.1em 0; }
.prose .vbox .vbox-head { padding: 11px 18px; font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: #fff; display: flex; align-items: center; gap: 9px; }
.prose .vbox .vbox-head svg { width: 18px; height: 18px; }
.prose .vbox .vbox-body { padding: 15px 18px; color: var(--body); line-height: 1.75; }
.prose .vbox .vbox-body > :last-child { margin-bottom: 0; }
.prose .vbox-verdict .vbox-head { background: orange; }
.prose .vbox-choose .vbox-head { background: var(--mint); }
.prose .vbox-skip .vbox-head { background: var(--coral); }


/* ---- v10: card thumbnails fill their box without stretching ---- */
.card-media { aspect-ratio: 16 / 10; }
.card-media img,
.card-media .wp-post-image,
.card-media a > img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: center;
  display: block; max-width: none;
}
.card-media .scene { position: absolute; inset: 0; width: 100%; height: 100%; }


/* ============================================================ v11 — WordPress primary menu matches the design exactly */
.nav-links { display: flex; align-items: center; }
.nav-links ul.menu,
.nav-links > ul {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links li,
.nav-links ul.menu > li {
  list-style: none; margin: 0; padding: 0; position: relative;
}
.nav-links a, .nav-links ul.menu > li > a {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 0.96rem !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--body);
  padding: 9px 13px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.nav-links a:hover,
.nav-links ul.menu > li > a:hover { color: var(--blue) !important; background: var(--blue-soft) !important; }
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a,
.nav-links a.active { color: var(--blue) !important; }
/* kill any theme/plugin underline or bullet artefacts */
.nav-links a::before, .nav-links a::after { content: none !important; }
.nav-links ul.sub-menu { display: none; } /* depth 1 — no dropdowns */

@media (max-width: 1024px){
.nav-links { display: none; }
.nav-links.mobile-open { display: flex; }
.nav-links.mobile-open ul.menu,
.nav-links.mobile-open > ul { flex-direction: column; align-items: stretch; gap: 3px; width: 100%; }
.nav-links.mobile-open a { padding: 13px 15px !important; font-size: 1.06rem !important; }
}


/* Amazon Choices styles now live in the drop-in module: /amazon-choices/assets/amazon-choices.css */

/* orange "Amazon Picks" primary-menu button (add menu item w/ class "amazon-choices") */
.nav-links .amazon-choices > a,
.nav-links li.amazon-choices a{background:var(--coral) !important;color:#fff !important;border-radius:100px !important;padding:9px 16px !important;font-weight:800 !important;box-shadow:0 6px 16px -8px rgba(210,95,42,.6);}
.nav-links .amazon-choices > a:hover,
.nav-links li.amazon-choices a:hover{background:var(--coral-deep) !important;color:#fff !important;transform:translateY(-1px);}

/* ============================================================
   HOME PARITY PACK — fitness hero, stat strip, reviews
   (bridges the preview's volt token system into this theme)
   ============================================================ */
:root{
  --volt:#c6ff2e; --volt-deep:#a6e000; --volt-soft:#1e2a10;
  --orange:#ff5a1e; --orange-deep:#e8430a; --orange-soft:#2a1810;
  --bg:#222734; --bg-2:#2a3040; --surface:#2f3645; --surface-2:#3a4252;
  --glow:0 0 30px -6px rgba(198,255,46,.5);
  --sh:0 18px 40px -22px rgba(0,0,0,.7);
  --r2:14px; --r-lg2:22px; --r-pill2:100px;
  --disp2:"Anton",system-ui,sans-serif;
  --disp3:"Oswald",system-ui,sans-serif;
}
/* section rhythm used by the ported sections */
.sec{padding-block:clamp(56px,7vw,100px);}
.sec-sm{padding-block:clamp(34px,4vw,60px);}
.bg-2{background:var(--bg-2);}
.sec-head{margin-bottom:clamp(28px,3.5vw,48px);}
.sec-head.center{text-align:center;max-width:660px;margin-inline:auto;}
.sec-head h2{font-family:var(--disp2);font-size:clamp(2.2rem,5vw,3.8rem);margin-top:14px;text-transform:uppercase;line-height:.96;}
.kicker{font-family:var(--sans);font-weight:800;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--volt);display:inline-flex;align-items:center;gap:10px;}
.kicker::before{content:"";width:28px;height:3px;background:var(--volt);box-shadow:var(--glow);}
.kicker.orange{color:var(--orange);}
.kicker.orange::before{background:var(--orange);box-shadow:0 0 22px -6px var(--orange);}
/* buttons */
.btn-volt{background:var(--volt);color:#0c0e12;box-shadow:var(--glow);text-transform:uppercase;font-weight:800;letter-spacing:.04em;}
.btn-volt:hover{transform:translateY(-2px);box-shadow:0 0 36px -4px rgba(198,255,46,.7);color:#0c0e12;}
.btn-lg{padding:17px 34px;font-size:1rem;}

/* ---- HERO (fitness wave hero, overrides the old scene) ---- */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% -10%,#27464f 0%,#222734 64%);isolation:auto;}
.hero .wrap{position:relative;z-index:3;padding-block:clamp(70px,11vw,150px) clamp(120px,16vw,220px);text-align:center;max-width:var(--maxw,1240px);}
.hero-power{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-power .hp-img{position:absolute;inset:0;width:100%;height:100%;}
.hero-power .hp-img .ph{position:absolute;inset:0;background:linear-gradient(135deg,#3a4252,#2a3040);display:grid;place-items:center;color:var(--faint);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.hero-power .hp-img img{width:100%;height:100%;object-fit:cover;}
.hero-power::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 35%,rgba(34,39,52,.5),var(--bg) 80%),linear-gradient(0deg,var(--bg) 1%,transparent 40%);}
@media(max-width:767px){.hero-power::after{background:radial-gradient(140% 90% at 50% 35%,rgba(23,26,33,.5),var(--bg) 72%);}}
.hero-orb{position:absolute;border-radius:50%;z-index:1;filter:blur(8px);pointer-events:none;}
.hero-orb.o1{width:340px;height:340px;top:-60px;left:-80px;background:radial-gradient(circle,rgba(198,255,46,.22),transparent 68%);animation:orbFloat 9s ease-in-out infinite alternate;}
.hero-orb.o2{width:300px;height:300px;bottom:40px;right:-70px;background:radial-gradient(circle,rgba(255,90,30,.18),transparent 68%);animation:orbFloat 11s ease-in-out infinite alternate-reverse;}
@keyframes orbFloat{from{transform:translateY(0)}to{transform:translateY(26px)}}
.hero-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);z-index:0;width:min(760px,92vw);aspect-ratio:1;pointer-events:none;opacity:.5;}
.hero-rings span{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%;}
.hero-rings span:nth-child(2){inset:14%;border-color:rgba(198,255,46,.14);}
.hero-rings span:nth-child(3){inset:30%;}
.hero-rings span:nth-child(4){inset:46%;border-color:rgba(198,255,46,.1);}
.hero-float{position:absolute;z-index:2;background:rgba(34,39,50,.7);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:12px 15px;display:flex;align-items:center;gap:11px;box-shadow:var(--sh);}
.hero-float .hf-ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;}
.hero-float b{display:block;font-family:var(--disp2);font-size:1.15rem;color:var(--ink);line-height:1;}
.hero-float span{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.hero-float.f1{top:24%;left:4%;animation:orbFloat 6s ease-in-out infinite alternate;}
.hero-float.f2{top:42%;right:4%;animation:orbFloat 7.5s ease-in-out infinite alternate-reverse;}
.hero-bars{display:inline-flex;align-items:flex-end;gap:3px;height:26px;}
.hero-bars i{width:4px;background:var(--volt);border-radius:2px;animation:barPulse 1.1s ease-in-out infinite;}
.hero-bars i:nth-child(1){height:40%;animation-delay:0s}.hero-bars i:nth-child(2){height:75%;animation-delay:.15s}.hero-bars i:nth-child(3){height:55%;animation-delay:.3s}.hero-bars i:nth-child(4){height:95%;animation-delay:.45s}.hero-bars i:nth-child(5){height:60%;animation-delay:.6s}
@keyframes barPulse{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.hero-photo{position:absolute;z-index:2;border-radius:42% 58% 56% 44%/52% 44% 56% 48%;overflow:hidden;border:3px solid var(--volt);box-shadow:var(--glow),0 14px 30px -12px rgba(0,0,0,.6);}
.hero-photo .ph{position:absolute;inset:0;background:linear-gradient(135deg,#3a4252,#2a3040);}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo.p1{width:185px;height:210px;top:11%;left:4%;animation:orbFloat 7s ease-in-out infinite alternate;}
.hero-photo.p2{width:140px;height:150px;bottom:15%;left:11%;border-color:var(--orange);box-shadow:0 0 26px -6px var(--orange),0 14px 30px -12px rgba(0,0,0,.6);animation:orbFloat 9s ease-in-out infinite alternate-reverse;}
.hero-photo.p3{width:180px;height:205px;top:15%;right:5%;animation:orbFloat 8s ease-in-out infinite alternate-reverse;}
.hero-photo.p4{width:135px;height:145px;bottom:18%;right:12%;animation:orbFloat 6.5s ease-in-out infinite alternate;}
.hero-photo.p5{width:110px;height:124px;top:6%;left:24%;border-radius:54% 46% 48% 52%/56% 50% 50% 44%;animation:orbFloat 8.5s ease-in-out infinite alternate;}
.hero-photo.p6{width:104px;height:116px;top:4%;right:25%;border-color:var(--orange);box-shadow:0 0 24px -6px var(--orange),0 14px 30px -12px rgba(0,0,0,.6);border-radius:48% 52% 56% 44%/50% 46% 54% 50%;animation:orbFloat 7.5s ease-in-out infinite alternate-reverse;}
@media(max-width:767px){.hero-float,.hero-photo{display:none;}}
@media(prefers-reduced-motion:reduce){.hero-orb,.hero-float,.hero-bars i,.hero-photo,.hero-waves *{animation:none;}}
.hero h1{font-family:var(--disp2);font-size:clamp(2.8rem,9vw,7.5rem);color:var(--ink);letter-spacing:.005em;line-height:.96;text-transform:uppercase;}
.hero h1 .hl{color:#d6ff5e;text-shadow:0 1px 2px rgba(0,0,0,.3);}
.hero .lead{max-width:600px;margin:22px auto 0;font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--body);}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:38px;justify-content:center;margin-top:44px;flex-wrap:wrap;}
.hero-stats .hs b{font-family:var(--disp3);font-size:2.6rem;color:#d6ff5e;line-height:1;display:block;text-shadow:0 1px 1px rgba(0,0,0,.35);}
.hero-stats .hs span{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.hero-waves{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0;pointer-events:none;}
.hero-waves svg{width:100%;height:clamp(120px,18vw,260px);display:block;}
.hero-waves .w1{opacity:.18;animation:waveDrift 14s ease-in-out infinite alternate;}
.hero-waves .w2{opacity:.30;animation:waveDrift 11s ease-in-out infinite alternate-reverse;}
.hero-waves .w3{opacity:.55;animation:waveDrift 8s ease-in-out infinite alternate;}
@keyframes waveDrift{from{transform:translateX(-3%);}to{transform:translateX(3%);}}
.hero-grid-lines{position:absolute;inset:0;z-index:0;opacity:.4;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(120% 80% at 50% 0,#000,transparent 75%);}

/* ---- STAT STRIP ---- */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.stat-strip .st{background:var(--surface);padding:28px 22px;text-align:center;}
.stat-strip .st b{font-family:var(--disp3);font-size:2.6rem;color:#d6ff5e;display:block;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.35);}
.stat-strip .st span{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
@media(max-width:767px){.stat-strip{grid-template-columns:1fr 1fr;}}

/* ---- REVIEWS ---- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:767px){.rev-grid{grid-template-columns:1fr;}}
.rev-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:13px;}
.rev-card .stars{display:inline-flex;gap:2px;color:var(--volt);}
.rev-card .stars svg{width:15px;height:15px;}
.rev-card p{color:var(--body);}
.rev-by{display:flex;align-items:center;gap:11px;margin-top:auto;}
.rev-av{width:42px;height:42px;border-radius:50%;background:var(--volt-soft);color:var(--volt);display:grid;place-items:center;font-family:var(--disp2);font-size:1.1rem;}
.rev-by b{color:var(--ink);font-size:.92rem;display:block;}
.rev-by span{color:var(--faint);font-size:.78rem;}

/* Custom AAWP Styling */

.aawp .aawp-product--horizontal {
    background: white !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    display: block;
    font-size: 15px;
    line-height: 1.6;
    max-width: 100%;
    padding: 25px !important;
    white-space: normal;
}

/* .bs-item used to be forced white here, but that only worked while AAWP's
   .aawp wrapper was still in the markup. The light tokens now live on
   .bestseller itself, so cards built from editorial tables match too. */

.prose .aawp-button:not(.aawp-product *, table *)  {
    width: 100%;
    padding: 20px;
    font-size: 20px;
    font-weight: 500;
    box-shadow: var(--shadow-xs);
    border: solid 1px var(--line);
}

.aawp .aawp-product--horizontal .aawp-product__description {
    margin-bottom: 30px !important;
    color: var(--paper) !important;
}

.aawp .aawp-product--horizontal .aawp-product__title {
    color: var(--card);
}


a.aawp .aawp-button, a.aawp-button {
    background-color: var(--sun) !important;
    border: 0px solid #000 !important;
    border-radius: var(--radius);
    box-sizing: border-box;
    color: #333 !important;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    margin: 0;
    padding: 7px 12px 6px;
    text-align: center;
    text-decoration: none !important;
}

a.aawp .aawp-button:hover, a.aawp-button:hover {
    border: 0px solid #000 !important;
    background-color: var(--ink) !important;
}


.gb-element-5cc54a4d {
	background: var(--card) !important;
}

.gb-element-5cc54a4d svg {
	fill: var(--aqua) !important;
}


/* ============================================================ Contact Form 7 — themed to match the site */
.wpcf7 { max-width: 640px; margin-inline: auto; }
.wpcf7-form { display: flex; flex-direction: column; }

/* CF7 wraps each label+field in a <p> */
.wpcf7-form > p { margin: 0 0 18px; }

.wpcf7-form label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.5;
}
.wpcf7-form-control-wrap { display: block; margin-top: 7px; }

/* inputs + textarea */
.wpcf7-form input.wpcf7-text,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  background: var(--sky-2);
  border: none;
  outline: none;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow .2s, background .2s;
}
.wpcf7-form textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--faint); }

/* focus — brighten the border, stay dark so light text remains readable */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  background: var(--sky-3);
  box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px var(--blue-soft);
}

/* submit button (mirrors .btn-primary) */
.wpcf7-form > p:last-of-type { display: flex; align-items: center; gap: 12px; }
.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 14px 30px;
  border: none;
  border-radius: 100px;
  background: var(--coral);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: var(--shadow-coral);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s, box-shadow .25s;
}
.wpcf7-form .wpcf7-submit:hover {
  background: var(--coral-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(255,90,30,.55);
}
.wpcf7-form .wpcf7-submit:disabled { opacity: .6; cursor: default; transform: none; }

/* invalid fields + inline tips */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid { box-shadow: inset 0 0 0 1.5px var(--coral); }
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 7px;
  color: var(--coral);
  font-size: 0.85rem;
  font-weight: 600;
}

/* response message box */
.wpcf7-response-output {
  margin: 10px 0 0 !important;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line) !important;
  font-size: 0.94rem;
  color: var(--body);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--coral) !important;
  background: var(--coral-soft);
  color: #ffd9cc;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--mint) !important;
  background: var(--mint-soft);
  color: #bff0dd;
}

/* themed loading spinner (replaces CF7's default) */
.wpcf7-spinner {
  width: 22px; height: 22px; margin: 0;
  background: none; border-radius: 50%;
  border: 2px solid var(--blue-soft); border-top-color: var(--blue);
  animation: wpcf7spin .7s linear infinite;
  opacity: 0; visibility: hidden;
}
.wpcf7-spinner::before { display: none; }
.wpcf7-form.submitting .wpcf7-spinner { opacity: 1; visibility: visible; }
@keyframes wpcf7spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .wpcf7-spinner { animation: none; } }


/* Remove underlines everywhere in related posts */
.relpost-block-container a,
.relpost-block-single,
.relpost-block-single-text,
.relpost-block-single-text a {
  text-decoration: none !important;
  border-bottom: none !important;
}
/* Kill the outer box so there's no box-in-box */
a.relpost-block-single,
.relpost-block-container a.relpost-block-single {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Card matches the author box exactly */
.relpost-custom-block-single {
  background: var(--card) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden !important;
}
/* Image flush to top */
.relpost-block-single-image {
  margin: 0 !important;
  display: block !important;
}
/* Override the plugin's fixed-height wrapper, center contents */
.relpost-block-single-text {
  height: auto !important;
  min-height: 0 !important;
  padding: 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* White title, lime on hover */
.relpost-block-container .relpost_card_title {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
}
.relpost-block-single:hover .relpost_card_title {
  color: #c7ff2f !important;
}