/* ==========================================================================
   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: var(--text-secondary-marketing, #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: var(--text-muted-marketing, #725E46);
  --text-on-dark-muted: rgba(255, 255, 255, 0.8);
  /* The blog card lift. Shadows are layout config rather than brand
     vocabulary, so by the rule stated at the top of tokens.css they belong
     in the stylesheet that uses them, not in the token file.

     It was a flat rgba(0, 0, 0, 0.06): a literal, and the wrong colour. A
     neutral black shade under a warm card greys it, because the shadow is
     the only cool thing touching a parchment ground. Deriving the tint from
     --text-primary keeps it in the brand's own hue and lets it follow the
     brand: espresso under Nibblr, damson under Canoli. The geometry is
     unchanged, so nothing moves. */
  --shadow-blog-card: 0 4px 16px color-mix(in srgb, var(--text-primary) 6%, transparent);
  /* #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;
}

/* Anchors inherit their surrounding colour, which is what lets a link inside
   a dark section read as that section's text.

   The :not() is load bearing. This selector is (0,1,1); a bare .btn--x colour
   rule is (0,1,0), so without the exclusion this silently outranks every
   button that happens to be an anchor and they inherit body brown instead of
   their own token. Not hypothetical: .btn--primary-sm rendered #5C4033 on
   butter, which passes at rest and fails AA at 4.15:1 on hover. */
/* :where(), NOT :not(), and that distinction is the whole point.
   :not() carries the specificity of its argument, so writing this as
   a:not(.btn):not([class*="btn--"]) took the selector from (0,1,1) to (0,3,1)
   and it then outranked .footer--columns .footer__link at (0,2,0). Every
   footer anchor inherited body brown on damson and vanished; the Cookies
   control survived only because it is a button rather than an anchor, which
   is what gave the cause away. :where() negates at zero specificity, so this
   stays (0,1,1) exactly as it was before the exclusion existed. */
.marketing-page a:where(:not(.btn)):where(:not([class*="btn--"])) {
  color: inherit;
  text-decoration: none;
}

/* Buttons still want the underline gone, just not the colour. */
.marketing-page a.btn,
.marketing-page a[class*="btn--"] {
  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 color-mix(in srgb, var(--brand-gold) 35%, transparent);
  animation: none;
}

.btn--shimmer:active {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-gold) 25%, transparent);
}

.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: color-mix(in srgb, var(--brand-gold) 20%, transparent);
}

.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(--accent-teal-text);
  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,
    color-mix(in srgb, var(--text-primary) 70%, transparent) 0%,
    color-mix(in srgb, var(--text-primary) 45%, transparent) 50%,
    color-mix(in srgb, var(--text-primary) 15%, transparent) 100%
  ),
  url('/img/marketing/hero-bg.jpg');
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--text-primary) 70%, transparent) 0%,
    color-mix(in srgb, var(--text-primary) 45%, transparent) 50%,
    color-mix(in srgb, var(--text-primary) 15%, transparent) 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%,
    color-mix(in srgb, var(--brand-gold) 60%, transparent) 0%,
    color-mix(in srgb, var(--brand-gold) 35%, transparent) 30%,
    color-mix(in srgb, var(--brand-gold) 15%, transparent) 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: color-mix(in srgb, var(--status-pass) 15%, transparent);
  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;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

/* Skip link: off-screen until focused, never display:none, which would take
   it out of the tab order and defeat the point. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 2px solid var(--brand-gold);
  border-radius: var(--radius-md);
  font-size: 16px;
  text-decoration: none;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Focus was branded on buttons and left to the browser default on links, so
   the ring changed appearance depending on what you tabbed to. One ring. */
.footer__link:focus-visible,
.nav a:focus-visible,
.nav__menu a:focus-visible,
.privacy-card a:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Footer, columns variant (brand.marketing-footer = "columns")
   --------------------------------------------------------------------------
   Lives here rather than in marketing-canoli.css because it has to render on
   /terms, /privacy, /about and /blog, none of which load that stylesheet or
   sit inside its .cnl scope. Every colour is a token, so it follows whichever
   brand asks for it rather than being Canoli-specific in itself.
   -------------------------------------------------------------------------- */

.footer--columns {
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Brand block left, three link columns right, as the comp has it: a single
   inline row of links cannot carry twelve destinations legibly. */
.footer--columns .footer__brand {
  display: flex;
  flex-direction: column;
  /* Without this the anchor stretches to the column width and the mark
     drifts to the middle of it, away from the legal line beneath. */
  align-items: flex-start;
  gap: 20px;
  flex: 0 1 420px;
}

.footer--columns .footer__logo { display: inline-flex; }
.footer--columns .footer__logo-img { height: 26px; width: auto; display: block; }

.footer--columns .footer__legal {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-on-dark-subtle);
  max-width: 420px;
}

.footer--columns .footer__cols {
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.footer--columns .footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer--columns .footer__heading {
  font-family: var(--font-primary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin: 0;
}

.footer--columns .footer__link {
  font-size: 14px;
  color: var(--text-on-dark-subtle);
  text-decoration: none;
  background: none;
  border: 0;
  /* 3px block padding, not 0: the link box was 21px against the 24px floor
     in WCAG 2.5.8 Target Size (Minimum, AA). Inline links inside a sentence
     are exempt from that rule, but a column of navigation links is not a
     sentence. Set here rather than in a separate rule because this one also
     declares padding, at equal specificity and later in the file, so it wins
     and a competing rule elsewhere is simply inert. */
  padding: 3px 0;
  font-family: var(--font-primary);
  text-align: left;
  cursor: pointer;
}
.footer--columns .footer__link:hover { color: var(--text-on-dark); }

/* Social icons, under the legal line in the brand block.

   Colour comes from --text-on-dark-subtle rather than the butter accent,
   which the September contrast audit established is a FILL and never a
   foreground: at ~2:1 on the plum ground it fails both the 4.5:1 text bar
   and the 3:1 non-text bar in WCAG 2.1 AA. Subtle clears both.

   The 6px padding with a matching negative margin is a hit area, not a gap:
   it takes the target from the icon's 24px to 36px, comfortably over the
   24px floor in WCAG 2.5.8, while the negative margin keeps the icons
   optically flush with the legal line above them. */
.footer--columns .footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -6px;
}

.footer--columns .footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  color: var(--text-on-dark-subtle);
  text-decoration: none;
  transition: color 0.15s;
}

.footer--columns .footer__social-link:hover { color: var(--text-on-dark); }

/* The svg carries fill="currentColor", so it inherits both states from the
   anchor above and needs no colour of its own. display: block stops the
   inline baseline gap adding a phantom 4px to the anchor's height. */
.footer--columns .footer__social-icon {
  display: block;
  width: 20px;
  height: 20px;
}

@media (max-width: 900px) {
  .footer--columns {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  /* flex-basis applies to the MAIN axis, and the main axis just became
     vertical. The 420px above is a WIDTH for the row layout; left alone it
     silently becomes a 420px HEIGHT here, which rendered an 88px logo and
     legal line inside a 420px box and put a 330px void between the brand
     and the links. Reset to auto so the block is content-sized. */
  .footer--columns .footer__brand { flex: 0 1 auto; }

  .footer--columns .footer__cols { gap: 32px; flex-wrap: wrap; }
  /* Two by two, with four columns. */
  .footer--columns .footer__col { flex: 1 1 40%; }
}

.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,
    color-mix(in srgb, var(--brand-gold) 12%, transparent) 0%,
    color-mix(in srgb, var(--brand-gold) 4%, transparent) 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%,
    color-mix(in srgb, var(--brand-gold) 15%, transparent) 0%,
    color-mix(in srgb, var(--brand-clay) 8%, transparent) 40%,
    transparent 75%
  );
  filter: blur(32px);
}

/* Feature image glow variants */
.glow--warm::before {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--brand-gold) 10%, transparent) 0%,
    color-mix(in srgb, var(--brand-parchment) 30%, transparent) 50%,
    transparent 80%
  );
}

.glow--cool::before {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--status-pass) 8%, transparent) 0%,
    color-mix(in srgb, var(--brand-parchment) 20%, transparent) 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 color-mix(in srgb, var(--brand-gold) 20%, transparent); }
  50% { box-shadow: 0 5px 28px color-mix(in srgb, var(--brand-gold) 35%, transparent), 0 0 40px color-mix(in srgb, var(--brand-gold) 8%, transparent); }
}

/* 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(--status-fail-text);
  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);
}

/* Body copy is 16px, not the 14px this card used to set.
   These are the longest continuous prose on the site and they were carrying
   its SMALLEST type, which is the wrong way round: /about and /trust, which
   are mostly cards and grids, set 16.8px. Measured at 14px the column ran 75
   characters; at 16px it runs about 63, which sits mid-range for prose
   rather than at the top of it.

   The headings move with it. h3 was 0.9rem, which is 14.4px and would have
   been SMALLER than its own paragraphs after the bump, and h2 at 1.15rem
   would then have been within a pixel of h3. Raising body text alone would
   have inverted the hierarchy, so the card steps 16 / 18 / 22 together. */
.privacy-card h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 8px;
}

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

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

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

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

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

/* Was --brand-gold, which is butter on this brand and 1.39:1 against the
   white card. AA body text needs 4.5:1. See --link-on-surface in the token
   files for the derivation and for why the hover darkens rather than fades. */
.privacy-card a {
  color: var(--link-on-surface);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy-card a:hover {
  color: var(--link-on-surface-hover);
}

.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(--accent-teal-text);
  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 color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.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 color-mix(in srgb, var(--brand-gold) 16%, transparent);
  transform: translateY(-8px);
  z-index: 1;
}

.pricing-card--featured:hover {
  box-shadow: 0 16px 36px color-mix(in srgb, var(--brand-gold) 22%, transparent);
}

.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 color-mix(in srgb, var(--brand-gold) 30%, transparent);
}

/* 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 color-mix(in srgb, var(--text-primary) 25%, transparent);
}

.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: color-mix(in srgb, var(--status-pass) 15%, transparent);
  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: color-mix(in srgb, var(--brand-gold) 18%, transparent);
  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 color-mix(in srgb, var(--text-primary) 4%, transparent),
    0 8px 32px color-mix(in srgb, var(--text-primary) 12%, transparent);
  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;
  /* Matches the anchors' 3px block padding rather than zeroing it. This rule
     is (0,2,0) and later than the columns rule, so a plain padding: 0 here
     left the Cookies button as the one 21px target in a row of 27px ones. */
  padding: 3px 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;
}

/* The blog's accent is --link-on-surface, NOT --brand-terracotta.
   ---------------------------------------------------------------------------
   Every accent here was written against the Nibblr terracotta #C9472A, which
   measured 4.61:1 on the blog ground and passed. Canoli redefines the SAME
   variable to punch #FF5A75, which measures 2.92:1. Nothing in this file
   changed; the token underneath it did, and eleven pieces of blog text went
   from passing to failing at once. Titles on hover, eyebrows, crumbs, tags,
   pagination and list numbers were all affected.

   This is the failure mode of a shared stylesheet under a rebrand: a rule
   whose contrast was solved for one palette silently inherits another. The
   same bug reached the marketing links, and was fixed there first.

   --link-on-surface exists for exactly this and is defined per brand, so the
   swap improves BOTH: default 4.61 -> 5.24, Canoli 2.92 -> 5.63.

   Terracotta is still correct where it carries no text: the 24x1 eyebrow
   rule, the 36x2 title bar, the byline dot, the animated underline on a
   dark-text link, and the "dot dot dot" section divider. Those are
   decoration and have no contrast duty, so the blog keeps its punch accent.

   The newsletter error is --status-fail-text instead: it is a failure
   message, not a link, and it was only terracotta because terracotta used to
   be the reddest thing available.

   SIZES: the mono labels here were 11px, which is not on the ramp. 10 and 12
   are, and they sit either side of it, so "nearest step" does not decide it.
   Two things do.

   First, 10px would make a real problem worse to settle a bookkeeping one:
   the detector separately reports 9px and 10px text as undersized, 39 times
   across this surface, and that finding is genuine. Second, these labels are
   DM Mono, while the ramp's 10px Label step is specified as Figtree Bold.
   Mono is denser at the same nominal size, so a mono label at 10px reads
   smaller than the step intends.

   12px is also what the blog already used in five other places, so this
   consolidates two neighbouring sizes into one rather than adding a size. */

/* ---- 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: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--link-on-surface);
  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(--link-on-surface);
  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: var(--shadow-blog-card);
}

.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: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--link-on-surface);
  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: 12px;
  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(--link-on-surface);
}

.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(--link-on-surface);
}

.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(--link-on-surface);
}

.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: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--link-on-surface);
  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;
  /* Cap was 3.25rem (52px), which is not on the ramp; 36px and 56px are,
     and 56 is the nearer of the two. It is also the right role: DESIGN.md
     gives 56 to "the one headline above the fold", and on a post page this
     is exactly that. The 5vw middle term is untouched, so only viewports
     past ~1120px see any change at all. */
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  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: 12px;
  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(--link-on-surface);
  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.4375rem; 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(--link-on-surface);
  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: 12px;
  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(--link-on-surface);
  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(--link-on-surface);
}

.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: color-mix(in srgb, var(--status-warning) 15%, transparent);
  color: var(--accent-orange-text);
  border: 1px solid color-mix(in srgb, var(--status-warning) 35%, transparent);
  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; }
}