/* ==========================================================================
   Nibblr Marketing Page Styles
   Combined from: tokens.css, base.css, components.css, layout.css, animations.css
   Scoped under .marketing-page to avoid conflicts with app.css
   ========================================================================== */

/* --- Tokens --- */

:root {
  --text-secondary: #5C4033;
  /* Unlike app.css, where --text-muted is decorative-only, marketing.css
     uses this as a real text colour in 15 rules (eyebrows, captions, meta
     lines). Was #8B7355: 4.38:1 on --bg-primary and 4.14:1 on parchment. */
  --text-muted: #725E46;
  --text-on-dark-muted: rgba(255, 255, 255, 0.8);
  /* #1065: marketing pages load ONLY this stylesheet, so the label-colour
     tokens have to be repeated here. Values are copied from the :root in
     app.css, which stays the source of truth. Identity colours (--status-pass
     and friends) are fills; the -text variants are the only legal label
     colour on a tint of the same hue. */
  /* Families come from the brand token stylesheet (BRAND-001 palette
     track); see the note in app.css. --font-body stays as this bundle's
     own alias, but WITHOUT a hardcoded fallback: a literal 'DM Sans'
     here is a Nibblr face that would silently apply under any brand. */
  --font-body: var(--font-primary);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --max-width: 1312px;
  --page-padding: 64px;
}

@media (max-width: 768px) {
  :root {
    --page-padding: 24px;
  }
}

/* --- Base (scoped under .marketing-page) --- */

.marketing-page *, .marketing-page *::before, .marketing-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.marketing-page {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html:has(.marketing-page) {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.marketing-page h1, .marketing-page h2, .marketing-page h3, .marketing-page h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
}

.marketing-page img:not(.nav__logo-img):not(.footer__logo-img) {
  max-width: 100%;
  height: auto;
  display: block;
}

.marketing-page a {
  color: inherit;
  text-decoration: none;
}

/* --- Components --- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
  border: none;
  text-decoration: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background-color: var(--brand-gold);
  color: var(--brand-espresso);
  padding: 16px 32px;
  font-size: 16px;
}

.btn--primary:hover {
  background-color: var(--brand-gold-hover);
}

.btn--primary-sm {
  background-color: var(--brand-gold);
  color: var(--brand-espresso);
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
}

.btn--primary-sm:hover {
  background-color: var(--brand-gold-hover);
}

.btn--primary-lg {
  background-color: var(--brand-gold);
  color: var(--brand-espresso);
  padding: 18px 40px;
  font-size: 18px;
}

.btn--primary-lg:hover {
  background-color: var(--brand-gold-hover);
}

/* Shimmer CTA button */
.btn--shimmer {
  background-color: #E8A230; /* hex-ok: decorative shimmer art, one-off gradient */
  padding: 18px 42px;
  font-size: 17px;
  font-weight: 500;
  border-radius: var(--radius-md);
  box-shadow: none;
  animation: btn-pulse 2.5s ease-in-out infinite;
  transition: box-shadow 0.2s ease;
}

.btn--shimmer span {
  background: linear-gradient(
    120deg,
    var(--brand-espresso) 0%,
    var(--brand-espresso) 20%,
    #2e2a24 28%, /* hex-ok: decorative shimmer art, one-off gradient */
    #3a3228 33%, /* hex-ok: decorative shimmer art, one-off gradient */
    #5a4d3a 38%, /* hex-ok: decorative shimmer art, one-off gradient */
    #8a7a5a 43%, /* hex-ok: decorative shimmer art, one-off gradient */
    #c4b488 47%, /* hex-ok: decorative shimmer art, one-off gradient */
    #fdf0d0 49.5%, /* hex-ok: decorative shimmer art, one-off gradient */
    #fffdf6 50%, /* hex-ok: decorative shimmer art, one-off gradient */
    #fdf0d0 50.5%, /* hex-ok: decorative shimmer art, one-off gradient */
    #c4b488 53%, /* hex-ok: decorative shimmer art, one-off gradient */
    #8a7a5a 57%, /* hex-ok: decorative shimmer art, one-off gradient */
    #5a4d3a 62%, /* hex-ok: decorative shimmer art, one-off gradient */
    #3a3228 67%, /* hex-ok: decorative shimmer art, one-off gradient */
    #2e2a24 72%, /* hex-ok: decorative shimmer art, one-off gradient */
    var(--brand-espresso) 80%,
    var(--brand-espresso) 100%
  );
  background-size: 600% 100%;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 11s ease-in-out infinite;
}

.btn--shimmer:hover {
  box-shadow: 0 8px 28px rgba(232, 162, 48, 0.35);
  animation: none;
}

.btn--shimmer:active {
  box-shadow: 0 4px 16px rgba(232, 162, 48, 0.25);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  border: 2px solid var(--text-secondary);
}

.btn--ghost:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* Problem cards */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.problem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-radius: 14px;
}

.problem-card__icon {
  color: var(--brand-gold);
  line-height: 0;
}

.problem-card__icon svg {
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
}

.problem-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.problem-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.problem-card__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.problem-bridge {
  margin-top: var(--space-2xl);
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Feature rows */
.feature-row {
  display: flex;
  gap: var(--space-2xl);
  align-items: center;
}

.feature-row--reverse {
  flex-direction: row-reverse;
}

.feature-row__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.feature-row__num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  color: rgba(240, 165, 0, 0.2);
}

.feature-row__title {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.feature-row__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.feature-row__image {
  flex: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 560px;
  position: relative;
}

.feature-row__image img {
  width: 100%;
  height: auto;
  display: block;
}

.feature-row__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
  pointer-events: none;
}

/* Quote cards */
.quote-card {
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.quote-card__text {
  font-size: 16px;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
}

.quote-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.quote-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-muted);
}

.quote-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.quote-card__role {
  font-size: 13px;
  color: var(--text-muted);
}

/* Customer logo marquee (homepage social-proof section). The track holds
   the brand set twice and scrolls -50% on a linear loop for a seamless
   last-to-first effect. Items carry their own right margin (not flex gap)
   so the duplicate set lines up exactly at the -50% loop point. */
.logo-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* Soft fade at both edges so logos ease in and out rather than clip. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); /* hex-ok: mask gradient stop, alpha not colour */
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); /* hex-ok: mask gradient stop, alpha not colour */
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee-scroll 45s linear infinite;
}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
  animation-play-state: paused;
}
.logo-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-right: 4.5rem;
}
/* Specificity matches the global `.marketing-page img:not(...)` reset
   (which forces height:auto); the 3-class chain ties it and wins on
   source order so the marquee logos hold a fixed 44px height. */
.marketing-page .logo-marquee .logo-marquee__item img {
  height: 44px;
  width: auto;
  display: block;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Respect reduced-motion: stop the scroll, lay the brands out as a static
   centred row, and drop the duplicate set. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .logo-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 1.75rem 3.5rem;
  }
  .logo-marquee__item { margin-right: 0; }
  .logo-marquee__item[aria-hidden="true"] { display: none; }
}

/* Stat items */
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat__value {
  font-family: var(--font-body);
  font-size: 45px;
  font-weight: 900;
  color: var(--brand-clay);
  line-height: 1;
}

.stat__unit {
  font-size: 28px;
}

.stat__label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--brand-clay);
}

/* --- Layout --- */

/* Section container */
.section {
  width: 100%;
  padding: var(--space-4xl) var(--page-padding);
  overflow: hidden;
}

.section--surface {
  background-color: var(--bg-surface);
}

.section--parchment {
  background-color: var(--bg-primary);
}

.section--espresso {
  background-color: var(--brand-espresso);
}

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Section header (centered titles) */
.section-header {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

/* Wider variant: fits a longer headline on one line at desktop widths,
   and balances the wrap (no orphan word) when it must break. */
.section-header--wide {
  max-width: 900px;
}

.section-header--wide .section-header__title {
  text-wrap: balance;
}

.section-header__tag {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.section-header__title {
  font-size: 36px;
  font-weight: 600;
}

.section-header__desc {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-padding);
  height: 72px;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--bg-muted);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 20px;
  position: relative;
  padding: 0;
}

.nav__toggle-bar {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--brand-espresso);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav__toggle-bar:nth-child(1) { top: 0; }
.nav__toggle-bar:nth-child(2) { top: 9px; }
.nav__toggle-bar:nth-child(3) { top: 18px; }

.nav__toggle.is-open .nav__toggle-bar:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.nav__toggle.is-open .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle.is-open .nav__toggle-bar:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__logo {
  display: flex;
  align-items: center;
}

.nav__logo-img {
  height: 28px;
  width: auto;
}

/* Hero.
   The background ships as a 1920px WebP via image-set() with a
   recompressed progressive JPG fallback. Browsers without image-set()
   support drop the second declaration and keep the JPG from the first. */
.hero-wrap {
  background: linear-gradient(
    to right,
    rgba(30, 23, 18, 0.7) 0%,
    rgba(30, 23, 18, 0.45) 50%,
    rgba(30, 23, 18, 0.15) 100%
  ),
  url('/img/marketing/hero-bg.jpg');
  background-image: linear-gradient(
    to right,
    rgba(30, 23, 18, 0.7) 0%,
    rgba(30, 23, 18, 0.45) 50%,
    rgba(30, 23, 18, 0.15) 100%
  ),
  image-set(
    url('/img/marketing/hero-bg.webp') type('image/webp'),
    url('/img/marketing/hero-bg.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
}

.hero {
  display: flex;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) var(--page-padding);
  max-width: calc(var(--max-width) + var(--page-padding) * 2);
  margin: 0 auto;
  overflow: visible;
}

.hero__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.hero-wrap .hero__headline {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-on-dark);
}

.hero-wrap .hero__subheadline {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.hero__ctas {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.marketing-page .hero-wrap .btn.btn--ghost-light {
  color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: var(--brand-espresso);
  padding: 18px 42px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 17px;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  z-index: 2;
}

.marketing-page .hero-wrap .btn.btn--ghost-light:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--text-on-dark);
}

.hero__right {
  flex: 1;
  min-height: 400px;
  margin-bottom: calc(-1 * var(--space-3xl) - 40px);
  position: relative;
}

.hero__glow {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(240, 165, 0, 0.6) 0%,
    rgba(240, 165, 0, 0.35) 30%,
    rgba(240, 165, 0, 0.15) 50%,
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
}

.hero__right img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Stats bar */
.stats-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: var(--space-xl) var(--page-padding);
  background-color: var(--brand-espresso);
  position: relative;
  z-index: 1;
}

/* Section content gap (below header) */
.section__content {
  margin-top: var(--space-2xl);
}


/* Quote grid */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* Features */
.features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Vision cards */
.vision-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.vision-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.vision-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vision-card__badge {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--status-pass-text);
  background: rgba(74, 124, 63, 0.15);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.vision-card__badge--later {
  color: var(--source-user-text);
  background: rgba(0, 0, 0, 0.05);
}

.vision-card__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.vision-card__desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Home: security and trust band */
.home-trust-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.home-trust-cta {
  margin-top: var(--space-xl);
  text-align: center;
}

/* Final CTA */
.final-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-5xl) var(--page-padding);
  max-width: 860px;
  margin: 0 auto;
}

.marketing-page .final-cta__title {
  font-size: 40px;
  font-weight: 600;
  color: var(--text-on-dark);
  line-height: 1.2;
}

.final-cta__sub {
  font-size: 18px;
  color: var(--text-on-dark);
  line-height: 1.6;
}

.final-cta__note {
  font-size: 14px;
  color: var(--text-on-dark-muted);
}

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--page-padding);
  background-color: var(--brand-espresso);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__logo {
  display: flex;
  align-items: center;
}

.footer__logo-img {
  height: 20px;
  width: auto;
  opacity: 0.8;
}

.footer__copy {
  font-size: 13px;
  color: var(--text-on-dark-subtle);
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__sep {
  color: var(--text-on-dark-subtle);
  opacity: 0.4;
  font-size: 13px;
}

.footer__right {
  display: flex;
  align-items: center;
}

.marketing-page .footer__email {
  font-size: 13px;
  color: var(--text-on-dark-subtle);
  transition: color 0.15s;
}

.marketing-page .footer__email:hover {
  color: var(--text-on-dark);
}

.marketing-page .footer__link {
  font-size: 13px;
  color: var(--text-on-dark-subtle);
  transition: color 0.15s;
}

.marketing-page .footer__link:hover {
  color: var(--text-on-dark);
}

/* Responsive */
@media (max-width: 1120px) {
  .hero {
    flex-direction: column;
    padding-bottom: var(--space-xl);
  }

  .hero-wrap .hero__headline {
    font-size: 40px;
  }

  .hero__right {
    width: 100%;
    min-height: 300px;
  }

  /* Feature rows: num -> title -> image -> description */
  .feature-row,
  .feature-row--reverse {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .feature-row__text {
    display: contents;
  }

  .feature-row__num {
    order: 1;
  }

  .feature-row__title {
    order: 2;
  }

  .feature-row__image {
    order: 3;
    width: 100%;
    max-height: none;
    aspect-ratio: 1 / 1;
  }

  .feature-row__image img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .feature-row__desc {
    order: 4;
  }
}

@media (max-width: 768px) {
  .nav__toggle {
    display: block;
  }

  .nav__menu {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--bg-primary);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--bg-muted);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }

  .nav__menu.is-open {
    display: flex;
  }

  .hero__headline {
    font-size: 36px;
  }

  .section-header__title {
    font-size: 28px;
  }

  .final-cta__title {
    font-size: 32px;
  }

  .stats-bar {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-lg) var(--page-padding);
    gap: var(--space-lg) 0;
  }

  .stats-bar .stat {
    flex: 0 0 50%;
    text-align: center;
  }

  .stat__value {
    font-size: 32px;
  }

  .stat__unit {
    font-size: 20px;
  }

  .problem-grid {
    grid-template-columns: 1fr;
  }

  .quote-grid {
    grid-template-columns: 1fr;
  }

  .vision-cards {
    grid-template-columns: 1fr;
  }

  .home-trust-cards {
    grid-template-columns: 1fr;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .btn--shimmer, .btn--primary, .btn--ghost, .btn--ghost-light {
    text-align: center;
  }

  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--page-padding);
  }

  .footer__left {
    flex-direction: column;
    gap: 8px;
  }
}

/* --- Animations --- */

/* Progressive disclosure animations */

/* Base state: hidden, shifted down */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children: each child delays slightly */
.reveal-stagger > .reveal {
  transition-delay: 0s;
}

.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.25s; }

/* Problem cards: stagger reveal as they scroll in */
.problem-grid > .problem-card.reveal:nth-child(1) { transition-delay: 0s; }
.problem-grid > .problem-card.reveal:nth-child(2) { transition-delay: 0.15s; }
.problem-grid > .problem-card.reveal:nth-child(3) { transition-delay: 0.3s; }

/* Bridge line: lands as a beat after the three cards have settled */
.problem-bridge.reveal { transition-delay: 1s; }

/* Slide from left (for feature text) */
.reveal--left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal--left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right (for feature images) */
.reveal--right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal--right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Hero specific: fade up faster, no delay */
.hero__left .reveal {
  transition-duration: 0.5s;
}

.hero__left .reveal:nth-child(1) { transition-delay: 0.1s; }
.hero__left .reveal:nth-child(2) { transition-delay: 0.25s; }
.hero__left .reveal:nth-child(3) { transition-delay: 0.4s; }

/* Stats bar: count-up feel with stagger */
.stats-bar .reveal:nth-child(1) { transition-delay: 0s; }
.stats-bar .reveal:nth-child(2) { transition-delay: 0.1s; }
.stats-bar .reveal:nth-child(3) { transition-delay: 0.2s; }
.stats-bar .reveal:nth-child(4) { transition-delay: 0.3s; }

/* Feature image: subtle scale on reveal */
.feature-row__image-wrap {
  position: relative;
}

.feature-row__image-wrap .feature-row__image {
  position: relative;
  z-index: 1;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* Gradient glow behind images */
.glow {
  position: relative;
}

.glow::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: var(--radius-xl);
  background: radial-gradient(
    ellipse at center,
    rgba(240, 165, 0, 0.12) 0%,
    rgba(240, 165, 0, 0.04) 50%,
    transparent 80%
  );
  z-index: 0;
  filter: blur(24px);
  transition: opacity 0.8s ease-out;
  opacity: 0;
}

.glow.is-visible::before {
  opacity: 1;
}

/* Hero image glow: slightly warmer and larger */
.hero__right.glow::before {
  inset: -24px;
  background: radial-gradient(
    ellipse at 60% 40%,
    rgba(240, 165, 0, 0.15) 0%,
    rgba(185, 149, 120, 0.08) 40%,
    transparent 75%
  );
  filter: blur(32px);
}

/* Feature image glow variants */
.glow--warm::before {
  background: radial-gradient(
    ellipse at center,
    rgba(240, 165, 0, 0.1) 0%,
    rgba(247, 240, 230, 0.3) 50%,
    transparent 80%
  );
}

.glow--cool::before {
  background: radial-gradient(
    ellipse at center,
    rgba(74, 124, 63, 0.08) 0%,
    rgba(247, 240, 230, 0.2) 50%,
    transparent 80%
  );
}

/* Shimmer button animations */
@keyframes text-shimmer {
  0%, 10% { background-position: 0% center; }
  70%, 100% { background-position: 100% center; }
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(232, 162, 48, 0.2); }
  50% { box-shadow: 0 5px 28px rgba(232, 162, 48, 0.35), 0 0 40px rgba(232, 162, 48, 0.08); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .glow::before {
    opacity: 1;
    transition: none;
  }

  .btn--shimmer {
    animation: none;
  }

  .btn--shimmer span {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--brand-espresso);
  }
}

/* ── Newsletter section ── */

.newsletter {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.newsletter__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.newsletter__desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.newsletter__field {
  display: flex;
  gap: var(--space-sm);
}

.newsletter__input {
  flex: 1;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 16px;
  border: 1px solid var(--bg-muted);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.newsletter__input:focus {
  border-color: var(--brand-gold);
}

.newsletter__input::placeholder {
  color: var(--text-secondary);
}

.newsletter__btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.newsletter__hp-wrap {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.newsletter__fine {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--space-sm);
}

.newsletter__error {
  font-size: 14px;
  color: var(--brand-terracotta);
  min-height: 20px;
}

.newsletter__thanks {
  display: none;
}

.newsletter__thanks.is-visible {
  display: block;
}

.newsletter__form-wrap.is-hidden {
  display: none;
}

@media (max-width: 768px) {
  .newsletter__title {
    font-size: 26px;
  }

  .newsletter__field {
    flex-direction: column;
  }

  .newsletter__btn {
    width: 100%;
  }
}

/* ── Privacy page (public view) ── */

.privacy-content {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--page-padding);
}

.privacy-card {
  /* --bg-cream is not defined anywhere; the three sibling rules already
     carry this fallback and this one was missed, so .privacy-card rendered
     with a transparent surface. Pre-existing, fixed in passing (#1065). */
  background: var(--bg-cream, var(--bg-surface));
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  line-height: 1.7;
  color: var(--brand-espresso);
}

.privacy-card h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 8px;
}

.privacy-card h3 {
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 16px;
  margin-bottom: 4px;
}

.privacy-card p {
  font-size: 0.875rem;
  margin-bottom: 12px;
  opacity: 0.85;
}

.privacy-card ul,
.privacy-card ol {
  padding-left: 1.25rem;
  margin-bottom: 12px;
}

.privacy-card li {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 6px;
  opacity: 0.85;
}

.privacy-card li:last-child {
  margin-bottom: 0;
}

.privacy-card a {
  color: var(--brand-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy-card a:hover {
  opacity: 0.8;
}

.privacy-page-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--brand-espresso);
  margin-bottom: 8px;
}

.privacy-page-subtitle {
  text-align: center;
  font-size: 0.875rem;
  color: var(--brand-espresso);
  opacity: 0.6;
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   PLAT-008 Phase 7.2, Marketing pricing section
   Re-uses existing tokens (brand-gold, bg-surface, border-soft, space-*).
   Lives here (not app.css) because the marketing layout only loads marketing.css.
   ========================================================================== */

/* x-cloak hides Alpine-driven elements until Alpine has booted, preventing
   the brief flash where both monthly + annual prices show simultaneously. */
[x-cloak] { display: none !important; }

.pricing-section .section-header__desc {
  max-width: 720px;
  margin: 0 auto;
}

/* Toggle row: strapline + Monthly/Annual segmented control */
.pricing-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.pricing-toggle__strap {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-gold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pricing-toggle__group {
  display: inline-flex;
  background: var(--bg-muted);
  border-radius: 999px;
  padding: 4px;
  border: 1px solid var(--border-soft);
}

.pricing-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pricing-toggle__btn:hover {
  color: var(--text-primary);
}

.pricing-toggle__btn--active {
  background: var(--brand-espresso);
  color: var(--text-on-dark);
}

/* Card grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
}

@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* Cards */
.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-card:hover {
  box-shadow: 0 6px 20px rgba(30, 23, 18, 0.06);
}

.pricing-card--featured {
  border-color: var(--brand-gold);
  border-width: 2px;
  padding: calc(var(--space-lg) - 1px) calc(var(--space-lg) - 1px) calc(var(--space-xl) - 1px);
  box-shadow: 0 12px 32px rgba(240, 165, 0, 0.16);
  transform: translateY(-8px);
  z-index: 1;
}

.pricing-card--featured:hover {
  box-shadow: 0 16px 36px rgba(240, 165, 0, 0.22);
}

.pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* White on brand gold is 2.08:1. Gold is a light fill, so it takes the
     espresso label the brand book already specifies for it (7.79:1). */
  color: var(--brand-espresso, var(--brand-espresso));
  background: var(--brand-gold);
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(240, 165, 0, 0.3);
}

/* On the select-plan reactivation page the badge wears a different word
   ("Current plan" rather than "Most popular") so the user knows we
   remembered their signup choice. Same visual treatment, different text. */
.select-plan-page .pricing-card__badge {
  background: var(--brand-espresso, var(--brand-espresso));
  color: var(--bg-surface);
  box-shadow: 0 4px 12px rgba(30, 23, 18, 0.25);
}

.pricing-card__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pricing-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  font-variation-settings: "opsz" 28;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.1;
}

.pricing-card__best-for {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  min-height: 42px;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 4px;
}

.pricing-card__currency {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--text-primary);
  margin-right: 2px;
}

.pricing-card__price-value {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  font-variation-settings: "opsz" 48;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.pricing-card__price-value--custom {
  font-size: 40px;
  font-style: italic;
  font-weight: 500;
}

.pricing-card__price-suffix {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 6px;
}

.pricing-card__cadence-line {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  min-height: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pricing-card__saving {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--status-pass-text);
  background: rgba(74, 124, 63, 0.15);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Divider between price block and features */
.pricing-card__divider {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 0;
}

.pricing-card__includes-lead {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.01em;
}

.pricing-card__includes-lead strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Feature list */
.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-primary);
  line-height: 1.45;
}

.pricing-card__feature-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--status-pass, var(--status-pass));
  stroke-width: 3;
}

.pricing-card__feature-label {
  flex: 1;
}

.pricing-card__feature--coming-soon .pricing-card__feature-icon {
  color: var(--text-muted);
  opacity: 0.55;
}

.pricing-card__feature--coming-soon .pricing-card__feature-label {
  color: var(--text-secondary);
}

/* Coming-soon marker: superscript asterisk that ties to the single footnote
   below the pricing grid. Quieter than the prior inline "soon" tag, doesn't
   anchor every gated row as "incomplete", and reads well in the editorial
   serif typography of the rest of the section. */
.pricing-card__feature-soon-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-gold);
  margin-left: 2px;
  line-height: 1;
  vertical-align: super;
}

/* Single footnote that explains the asterisks. One per section, sits below
   the grid in matching color but smaller weight than the headlines. */
.pricing-grid__footnote {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-grid__footnote span[aria-hidden] {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--brand-gold);
  font-weight: 600;
  margin-right: 4px;
}

/* "UK first" mini-tag for the NPM 2018 USP bullet. Subtle pill that signals
   exclusivity without screaming. Uses the existing brand-gold token at
   reduced opacity so it reads as a quiet badge, not a CTA. */
.pricing-card__feature-uk-first {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-espresso, var(--brand-espresso));
  background: rgba(240, 165, 0, 0.18);
  padding: 1px 6px 2px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* CTA */
.pricing-card__cta {
  margin-top: var(--space-md);
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* ==========================================================================
   PLAT-008 Phase 7.3, Pricing footer copy + FAQ teasers + /faq page
   ========================================================================== */

/* Three short explanatory blocks under the pricing grid */
.pricing-footnotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .pricing-footnotes { grid-template-columns: 1fr; }
}

.pricing-footnote__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-espresso);
  margin: 0 0 var(--space-sm);
}

.pricing-footnote__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  opacity: 0.85;
  margin: 0;
}

/* FAQ teasers strip, the home page block. .faq-teaser uses native
   <details>/<summary> so disclosure works without JS. */
.faq-teasers {
  max-width: 760px;
  margin: var(--space-2xl) auto 0;
  text-align: left;
}

.faq-teasers__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--brand-espresso);
  margin: 0 0 var(--space-md);
  text-align: center;
}

.faq-teasers__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq-teaser {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.faq-teaser[open] {
  background: var(--bg-cream, var(--bg-surface));
}

.faq-teaser__q {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-espresso);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.faq-teaser__q::-webkit-details-marker { display: none; }

.faq-teaser__q::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--brand-gold);
  line-height: 1;
}

.faq-teaser[open] .faq-teaser__q::after {
  content: "\2212"; /* en-dash style minus for visual close */
}

.faq-teaser__a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  opacity: 0.85;
  margin: var(--space-sm) 0 0;
}

.faq-teasers__more {
  text-align: center;
  margin: var(--space-md) 0 0;
}

.faq-teasers__more-link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-gold);
  text-decoration: none;
}

.faq-teasers__more-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* /faq page, fuller layout reusing the same disclosure pattern */
.faq-page__inner {
  max-width: 820px;
}

.faq-group {
  margin-top: var(--space-2xl);
}

.faq-group__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brand-espresso);
  margin: 0 0 var(--space-md);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--space-sm);
}

.faq-group__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.faq-item[open] {
  background: var(--bg-cream, var(--bg-surface));
}

.faq-item__q {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-espresso);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--brand-gold);
  line-height: 1;
}

.faq-item[open] .faq-item__q::after { content: "\2212"; }

.faq-item__a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  opacity: 0.9;
  margin: var(--space-sm) 0 0;
}

.faq-item__link {
  color: var(--brand-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Inline 'Read more on our Trust page ->' style for the home FAQ teaser.
   Uses dark text + underline (gold reserved for accents, not body text per
   the brand system) and treats the arrow as a small affordance that lifts
   on hover. */
.faq-teaser__link {
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brand-gold);
  text-decoration-thickness: 1.5px;
  white-space: nowrap;
  transition: text-decoration-color 0.15s ease;
}

.faq-teaser__link:hover {
  text-decoration-color: var(--text-primary);
}

.faq-teaser__link span[aria-hidden] {
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.18s ease;
}

.faq-teaser__link:hover span[aria-hidden] {
  transform: translateX(3px);
}

.faq-page__cta {
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) var(--space-xl);
  background: var(--bg-cream, var(--bg-surface));
  border-radius: var(--radius-lg);
  text-align: center;
}

.faq-page__cta-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--brand-espresso);
  margin: 0 0 var(--space-sm);
}

.faq-page__cta-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  opacity: 0.85;
  margin: 0 0 var(--space-md);
}

/* =====================================================================
   Cookie consent banner (closes #137 + #134)

   Bottom-pinned, full-width on mobile, max-width pill on desktop. Sits
   above the footer with a soft warm shadow so it reads as a separate
   surface but does not break the parchment aesthetic. Both buttons
   carry equal visual weight per UK PECR rules: reject must be as
   prominent as accept. [x-cloak] hide rule is already declared near the
   pricing-toggle styles above.
   ===================================================================== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.cookie-banner__inner {
  pointer-events: auto;
  max-width: 1024px;
  margin: 0 auto;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--bg-muted);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow:
    0 1px 2px rgba(30, 23, 18, 0.04),
    0 8px 32px rgba(30, 23, 18, 0.12);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.cookie-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
}

.cookie-banner__title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}

.cookie-banner__body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.cookie-banner__link {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.15s;
}

.cookie-banner__link:hover,
.cookie-banner__link:focus-visible {
  color: var(--brand-cocoa);
}

.cookie-banner__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
}

.cookie-banner__btn {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 10px 18px;
  min-width: 96px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.05s ease-out;
}

.cookie-banner__btn:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

.cookie-banner__btn:active {
  transform: translateY(1px);
}

/* PECR compliance: reject must be as easy as accept. Both buttons are
   solid-filled with matched contrast (gold for accept, espresso for
   reject) so neither dominates by visual weight. Equal padding, font
   weight, min-width inherited from the base rule above. */
.cookie-banner__btn--primary {
  background-color: var(--brand-gold);
  color: var(--brand-espresso);
}

.cookie-banner__btn--primary:hover {
  background-color: var(--brand-gold-hover);
}

.cookie-banner__btn--secondary {
  background-color: var(--brand-espresso);
  color: var(--bg-primary);
}

.cookie-banner__btn--secondary:hover {
  background-color: var(--brand-cocoa);
}

@media (max-width: 720px) {
  .cookie-banner {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 16px;
    border-radius: 12px;
  }

  .cookie-banner__actions {
    flex-direction: row;
    justify-content: stretch;
    gap: 8px;
  }

  .cookie-banner__btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 12px;
  }
}

@media (max-width: 360px) {
  .cookie-banner__title { font-size: 0.9rem; }
  .cookie-banner__body  { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner__btn { transition: none; }
  .cookie-banner__btn:active { transform: none; }
}

/* Footer "Cookie preferences" trigger.
   Styled as the existing footer__link, plus a button reset so the
   <button> element inherits the same dark-surface link treatment.

   NOTE: the previous `font: inherit` shorthand inherited every font
   property from the parent <div class="footer__links">, which has no
   font-size of its own and so resolved to the user-agent default
   (~16px). That overrode the `.footer__link` rule's font-size: 13px
   and rendered "Cookie preferences" visibly larger than the sibling
   <a> links. Inherit only what we need (family + weight) and let the
   .footer__link cascade keep its font-size. */
.marketing-page .footer__link--button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* =============================================================
   GROW-002: Blog index + post editorial styling
   ============================================================= */

/* ---- Page shell ---- */

.blog-page {
  padding-block: var(--space-xl);
  /* Keep the section tall enough that a sparsely-populated index doesn't
     leave the footer floating mid-viewport. Calc subtracts nav (~80px) +
     footer (~80px) + breathing room so the footer lands close to the
     viewport edge on a typical desktop. */
  min-height: calc(100vh - 160px);
}

.blog-page__inner {
  /* The marketing .section__inner is 1312px wide. Editorial reads better
     narrower; the index list constrains itself to 880px and the post
     column to 680px. Both still live inside .section__inner so the page
     padding chain is undisturbed. */
  max-width: 880px;
  margin: 0 auto;
}

/* ---- Index header strip ---- */

.blog-header {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.blog-header__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-terracotta);
  margin-bottom: var(--space-md);
}

.blog-header__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
}

.blog-header__lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0;
}

.blog-header__lede a {
  color: var(--brand-terracotta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---- Featured hero (page 1 only, if any post has featured=true) ---- */

.blog-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl) 0 calc(var(--space-xl) + var(--space-md));
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .blog-featured {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--space-xl);
  }
}

.blog-featured__cover {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.blog-featured__cover-placeholder {
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-secondary);
}

.blog-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.blog-featured__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-terracotta);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.blog-featured__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--brand-terracotta);
  display: inline-block;
}

.blog-featured__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.blog-featured__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--brand-terracotta), var(--brand-terracotta));
  background-position: 0 100%;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition: background-size 0.28s ease;
}

.blog-featured__title a:hover {
  background-size: 100% 1px;
}

.blog-featured__summary {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.blog-featured__cta {
  margin-top: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}

.blog-featured__cta::after {
  content: "→";
  transition: transform 0.2s ease;
}

.blog-featured__cta:hover::after {
  transform: translateX(4px);
}

.blog-featured__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* ---- Read-down list ---- */

.blog-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-list__item {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--border-soft);
}

.blog-list__item:first-child {
  padding-top: 0;
}

.blog-list__item:last-child {
  border-bottom: 0;
}

.blog-list__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
}

@media (min-width: 768px) {
  /* thumb | body | date. The thumb sits flush left, the title +
     summary fill the central reading column, and the mono date
     anchors the top-right corner. Posts without a cover_image_path
     get an empty placeholder div in the same slot so consecutive
     items don't shimmer width. */
  .blog-list__link {
    grid-template-columns: 200px 1fr auto;
    gap: var(--space-xl);
    align-items: start;
  }
}

.blog-list__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  transition: transform 0.3s ease;
}

.blog-list__link:hover .blog-list__thumb {
  transform: scale(1.02);
}

/* On mobile, the thumb sits above the body as a 16:9 banner. */
@media (max-width: 767px) {
  .blog-list__thumb {
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-sm);
  }
}

.blog-list__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 0.35em;
}

@media (max-width: 767px) {
  /* On mobile the date sits below the summary so it doesn't compete
     with the title for the top-of-card visual weight. */
  .blog-list__date {
    padding-top: 0;
    order: 99;
  }
  .blog-list__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
}

.blog-list__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.3vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm) 0;
  transition: color 0.2s ease;
}

.blog-list__link:hover .blog-list__title {
  color: var(--brand-terracotta);
}

.blog-list__summary {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 56ch;
}

/* ---- Pagination ---- */

.blog-pagination {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blog-pagination__link {
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  transition: color 0.2s ease;
}

.blog-pagination__link:hover {
  color: var(--brand-terracotta);
}

.blog-pagination__current {
  color: var(--text-muted);
  font-feature-settings: "tnum" 1;
}

.blog-pagination__current strong {
  color: var(--text-primary);
  font-weight: 500;
}

.blog-pagination__spacer {
  flex: 1;
}

/* ---- Empty state ---- */

.blog-empty {
  padding: var(--space-xl) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 36ch;
  margin: 0 auto;
}

/* =============================================================
   Post page
   ============================================================= */

.blog-post {
  padding-block: var(--space-xl);
}

.blog-post__inner {
  /* Same outer width as the index so the spine is consistent. The
     reading column inside is narrower (680px). */
  max-width: 880px;
  margin: 0 auto;
}

.blog-post__crumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-xl) 0;
}

.blog-post__crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-post__crumbs a:hover {
  color: var(--brand-terracotta);
}

.blog-post__header {
  max-width: 680px;
  margin: 0 auto var(--space-xl) auto;
  text-align: left;
}

.blog-post__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-terracotta);
  margin-bottom: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.blog-post__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.blog-post__eyebrow a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-post__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 var(--space-lg) 0;
}

.blog-post__byline {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding-top: var(--space-md);
  position: relative;
}

/* The single ownable brand detail: a terracotta rule above the byline,
   echoing the dot on the 'i' in the wordmark. */
.blog-post__byline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--brand-terracotta);
}

.blog-post__byline a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
}

.blog-post__byline time {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.blog-post__cover-wrap {
  margin: var(--space-xl) auto;
  max-width: 880px;
}

.blog-post__cover {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.blog-post__cover-caption {
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

/* ---- Body prose (the 680px column) ---- */

.blog-post__body {
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text-primary);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

.blog-post__body > * + * {
  margin-top: 1.15em;
}

.blog-post__body p {
  margin: 0;
}

.blog-post__body strong {
  font-weight: 600;
  color: var(--text-primary);
}

.blog-post__body em {
  font-style: italic;
}

.blog-post__body a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--brand-terracotta);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 0.2s ease;
}

.blog-post__body a:hover {
  text-decoration-thickness: 2px;
}

.blog-post__body h2,
.blog-post__body h3,
.blog-post__body h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin-top: 2em;
  margin-bottom: 0.5em;
  scroll-margin-top: var(--space-xl);
}

.blog-post__body h2 { font-size: 1.875rem; line-height: 1.2; }
.blog-post__body h3 { font-size: 1.5rem;   line-height: 1.25; }
.blog-post__body h4 { font-size: 1.25rem;  line-height: 1.3; }

/* Lists */

.blog-post__body ul,
.blog-post__body ol {
  padding-left: 1.5em;
  margin: 0;
}

.blog-post__body ul > li,
.blog-post__body ol > li {
  padding-left: 0.25em;
  margin: 0;
}

.blog-post__body ul > li + li,
.blog-post__body ol > li + li {
  margin-top: 0.4em;
}

.blog-post__body ul {
  list-style: none;
}

.blog-post__body ul > li {
  position: relative;
}

.blog-post__body ul > li::before {
  content: "";
  position: absolute;
  left: -1em;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-terracotta);
}

.blog-post__body ol {
  list-style: none;
  counter-reset: blog-ol;
  padding-left: 0;
}

/* Flex layout so the mono `01.` counter shares a baseline with the body
   text. The earlier absolute-positioned ::before with `top: 0` parked
   the counter at the top of the line-box, well above the body text's
   x-height (because the body line-height is 1.75 and the counter font
   is 0.875rem - the two never line up via static top values). Flex
   with align-items: baseline aligns them by glyph baseline regardless
   of font size or leading. */

.blog-post__body ol > li {
  counter-increment: blog-ol;
  display: flex;
  align-items: baseline;
  gap: 0.875em;
  padding-left: 0;
}

.blog-post__body ol > li::before {
  content: counter(blog-ol, decimal-leading-zero);
  flex: 0 0 1.75em;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-terracotta);
  letter-spacing: 0.04em;
}

/* Callout (rendered as <blockquote>). Modelled on the in-app Allergens
   panel: warm tonal background, hairline border, sentence-case body
   text in DM Sans. The emoji at the start carries the meaning; the
   panel is calm by default and does not signal "something is wrong". */

.blog-post__body blockquote {
  margin: 1.75em 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-style: normal;
  color: var(--text-primary);
}

.blog-post__body blockquote p {
  margin: 0;
}

.blog-post__body blockquote p + p {
  margin-top: 0.75em;
}

/* Inline bold inside a callout stays in the body family/weight; no
   uppercase, no terracotta, no block display. The bold opener Notion
   sends now reads as regular emphasised body text. */
.blog-post__body blockquote strong {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  display: inline;
  margin-bottom: 0;
}

/* Code */

.blog-post__body pre {
  background: var(--brand-espresso);
  color: var(--text-on-dark);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.55;
}

.blog-post__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  color: var(--brand-cocoa);
}

.blog-post__body pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Horizontal rule: three terracotta dots, centred. The single brand
   detail (the terracotta dot on the 'i') multiplied as a divider. */

.blog-post__body hr {
  border: 0;
  height: 32px;
  margin: 2.5em auto;
  position: relative;
}

.blog-post__body hr::before {
  content: "•  •  •";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0.5em;
  color: var(--brand-terracotta);
  font-size: 0.875rem;
}

/* Inline body images stay at the body-column width, centred. The earlier
   negative-margin breakout to the 880px outer rendered asymmetrically
   under the .blog-post__inner constraints; column-width keeps the
   reading rhythm and matches how the cover image is sized. */

.blog-post__body img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 2em auto;
  border-radius: var(--radius-md);
}

/* Table */

.blog-post__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9375rem;
}

.blog-post__body th,
.blog-post__body td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-soft);
}

.blog-post__body thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-soft);
}

/* ---- Post footer ---- */

.blog-post__tags {
  max-width: 680px;
  margin: var(--space-xl) auto 0 auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-post__tags-label {
  color: var(--text-muted);
  margin-right: var(--space-sm);
}

.blog-post__tag {
  color: var(--brand-terracotta);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.blog-post__tag:hover {
  background: var(--bg-surface);
  border-color: var(--brand-terracotta);
}

.blog-post__footer {
  max-width: 680px;
  margin: var(--space-xl) auto 0 auto;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.blog-post__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}

.blog-post__back::before {
  content: "←";
  transition: transform 0.2s ease;
}

.blog-post__back:hover::before {
  transform: translateX(-4px);
}

/* ---- Gone / Not found ---- */

.blog-gone__inner,
.blog-not-found__inner {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  padding-block: var(--space-xl);
}

.blog-gone code,
.blog-not-found code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0.15em 0.4em;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  color: var(--brand-cocoa);
}

/* =============================================================
   GROW-002: draft preview pill (shown on /blog/{slug} only when an
   admin views a draft post). Warm amber tone keyed to the design
   system's --semantic-warning so it reads as "in progress" without
   the alarm-bells red.
   ============================================================= */

.blog-post__draft {
  margin: 0 0 var(--space-md, 16px) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm, 8px);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
}

.blog-post__draft-pill {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(212, 137, 10, 0.15);
  color: var(--accent-orange-text);
  border: 1px solid rgba(212, 137, 10, 0.35);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Pagination placeholder: reserves the layout slot for a missing
   newer/older link without breaking the centred page indicator's
   flex spacing. Replaces an inline style="visibility:hidden". */
.blog-pagination__link--placeholder {
  visibility: hidden;
  pointer-events: none;
}

/* prefers-reduced-motion: pause new blog motion. The .reveal family
   was already guarded earlier in the file; this block adds the
   thumbnail hover scale that landed with the editorial restyle. */
@media (prefers-reduced-motion: reduce) {
  .blog-list__thumb { transition: none; }
  .blog-list__link:hover .blog-list__thumb { transform: none; }
  .blog-featured__cta::after { transition: none; }
  .blog-featured__cta:hover::after { transform: none; }
}