/**
 * Sections — shared layout primitives + per-section blocks
 * (band, features, quote/testimonials, values).
 *
 * Tokens come from tokens.css. Anything dark-on-cream uses the
 * --color-luxe-* palette; anything bright is the original light tokens.
 */

.section {
  padding-block: var(--space-16);
}

.section--tight {
  padding-block: var(--space-12);
}

/* "Why Dear Jane feels different" — extra breathing room above the kicker. */
#how-it-works {
  padding-top: calc(var(--space-12) + 80px);
}

/* "Member stories" — extra breathing room below the cards so the next
   section doesn't crowd up against the attribution lines. */
#stories {
  padding-bottom: calc(var(--space-12) + 100px);
}

.section__inner {
  width: min(100% - var(--space-6), var(--content-max));
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section__header {
  max-width: 640px;
  margin-bottom: var(--space-10);
}

.section__header--center {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-12);
}

.section__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}

.section__kicker--on-dark {
  color: var(--color-luxe-gold);
}

.section__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.6vw, 2.625rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* Serif treatment used by Seeking-style premium sections. */
.section__title--serif {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3rem);
  letter-spacing: -0.012em;
  line-height: 1.08;
}

.section__title--on-dark {
  color: var(--color-luxe-cream);
}

.section__lede {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 56ch;
}

.section__header--center .section__lede {
  margin-inline: auto;
}

.section__lede--on-dark {
  color: var(--color-luxe-cream-soft);
}

/* ───────────────────────────────────────────────────────────────
   Feature tiles (Benefits grid — 3 or 4 columns)
   ─────────────────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 720px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
  .feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.feature-tile {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

.feature-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-luxe-gold) 30%, var(--color-line));
}

@media (prefers-reduced-motion: reduce) {
  .feature-tile:hover { transform: none; }
}

/* Flat single-color glyph — no chip / tint behind it. */
.feature-tile__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  margin-bottom: var(--space-5);
  color: var(--color-luxe-gold-deep);
}

.feature-tile__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.feature-tile__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feature-tile__text {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ───────────────────────────────────────────────────────────────
   Testimonials (3-card grid replacing the single quote-panel)
   ─────────────────────────────────────────────────────────────── */

.testimonial-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 800px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}

.testimonial-card {
  margin: 0;
  padding: var(--space-6) var(--space-6) var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fff, var(--color-bg-subtle));
  border: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
  /* Column-flex so .testimonial-card__cite (with margin-top:auto) is
     anchored to the bottom of the card. Combined with the grid's default
     stretch behaviour, this guarantees the three cards visually share a
     baseline regardless of how many lines the quote wraps onto. */
  display: flex;
  flex-direction: column;
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}

@media (min-width: 800px) {
  .testimonial-grid {
    align-items: stretch;
  }
}

/* Decorative opening quote — sits in the top padding band only; body copy
   is offset with .testimonial-card__text padding-top so lines never run
   underneath the glyph. */
.testimonial-card::before {
  content: "“";
  position: absolute;
  left: var(--space-5);
  top: var(--space-4);
  font-family: var(--font-heading);
  font-size: 5.25rem;
  line-height: 0.85;
  color: var(--color-luxe-gold);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.testimonial-card__text {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--space-5);
  /* Clear the decorative quote (font-size 2.75rem + breathing room). */
  padding-top: calc(2.75rem + var(--space-3));
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-ink);
}

.testimonial-card__cite {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  font-style: normal;
  margin-top: auto;
}

.testimonial-card__name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--color-ink);
}

.testimonial-card__meta {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-ink-soft);
}

/* Keep legacy quote-panel styling intact in case other pages still
   reference it. Safe to leave; not loaded by the new homepage flow. */
.quote-panel {
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  background: linear-gradient(135deg, var(--color-bg-subtle), #fff);
  border: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
}

.quote-panel::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -80px;
  top: -100px;
  background: radial-gradient(circle, var(--color-accent-soft), transparent 70%);
  pointer-events: none;
}

.quote-panel__text {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 52ch;
}

.quote-panel__cite {
  position: relative;
  margin: var(--space-6) 0 0;
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
}

/* ───────────────────────────────────────────────────────────────
   Mindset band (slim, centered)
   ─────────────────────────────────────────────────────────────── */

.band {
  padding-block: var(--space-10);
  border-block: 1px solid var(--color-line);
  background: linear-gradient(180deg, #fff, var(--color-bg-subtle));
}

.band__inner {
  width: min(100% - var(--space-6), var(--content-max));
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 800px) {
  .band__inner {
    grid-template-columns: 1fr auto;
  }
}

.band__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.band__text {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-muted);
  max-width: 56ch;
}

/* Luxe variant for the mindset band — centered serif headline,
   sits between the dark hero and the white benefits grid as a
   quiet typographic moment. Now hosts a scroll-driven roses canvas
   behind the copy (see js/band-scrub.js). */
.band--luxe {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: calc(var(--space-16) + 150px);
  border-block: 1px solid var(--color-line);
  background: #faf6ee;
}

.band--luxe .band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: saturate(0.92) contrast(0.98);
}

.band--luxe .band__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      90% 70% at 50% 50%,
      rgba(250, 246, 238, 0.58) 0%,
      rgba(250, 246, 238, 0.76) 60%,
      rgba(250, 246, 238, 0.9) 100%
    );
}

/* Mobile: text-block sits closer to the edges of the roses, so push the
   cream wash a touch denser to keep the copy comfortably legible. */
@media (max-width: 799px) {
  .band--luxe .band__veil {
    background:
      radial-gradient(
        90% 70% at 50% 50%,
        rgba(250, 246, 238, 0.7) 0%,
        rgba(250, 246, 238, 0.86) 60%,
        rgba(250, 246, 238, 0.96) 100%
      );
  }
}

.band--luxe .band__inner {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  max-width: 760px;
}

.band--luxe .band__kicker {
  margin: 0 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-luxe-gold-deep);
}

.band--luxe .band__title {
  margin: 0 auto var(--space-5);
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.875rem, 3.6vw, 2.625rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 22ch;
}

.band--luxe .band__text {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink-muted);
}

/* ───────────────────────────────────────────────────────────────
   Values section (Seeking's "Our Values" — dark band with 5 cards)
   ─────────────────────────────────────────────────────────────── */

.values-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 0%, #1a2030 0%, var(--color-luxe-ink) 70%);
  color: var(--color-luxe-cream);
  padding-block: clamp(var(--space-16), 10vw, calc(var(--space-20) * 1.4));
}

/* Drifting gold embers — invisible most of the cycle, then flare up,
   rise while fading, and burn out. Each particle has its own --sway
   so the rise direction feels natural rather than choreographed. */
.values-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.values-particles span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(250, 232, 188, 1) 0%,
    rgba(220, 184, 110, 0.9) 35%,
    rgba(200, 164, 92, 0) 75%
  );
  box-shadow:
    0 0 6px rgba(220, 184, 110, 0.7),
    0 0 14px rgba(200, 164, 92, 0.35);
  opacity: 0;
  animation: valuesEmber var(--dur) ease-in-out var(--delay) infinite;
  transform-origin: center;
  will-change: opacity, transform, filter;
}

/* Ember lifecycle moved to the very start of each cycle, so the panel
   begins shimmering immediately on page-load rather than after the
   full duration. Sequence: dark → flare (~6%) → drift up & dim → burn
   out (~22%) → dark for the rest of the loop. --sway adds the per-
   particle horizontal drift; the blur ramp at the tail makes the
   particle "smear" as it dies, like a real ember losing focus. */
@keyframes valuesEmber {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
    filter: blur(0);
  }
  6% {
    opacity: 1;
    transform: translate(calc(var(--sway, 0px) * 0.1), -2px) scale(1.2);
    filter: blur(0);
  }
  14% {
    opacity: 0.55;
    transform: translate(calc(var(--sway, 0px) * 0.5), -14px) scale(1);
    filter: blur(0.5px);
  }
  22% {
    opacity: 0;
    transform: translate(var(--sway, 0px), -32px) scale(0.55);
    filter: blur(1.4px);
  }
  22.01%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
    filter: blur(0);
  }
}

/* Anchor real content above the decorative motes. */
.values-section > .section__inner {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .values-particles span {
    animation: none;
    opacity: 0.25;
    transform: none;
  }
}

.values-section__header {
  margin-bottom: var(--space-16);
}

.values-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .values-grid {
    /* 3 across on the top row, 2 across on the bottom (centered look).
       We just use 6-col grid math and span individual cards. */
    grid-template-columns: repeat(6, 1fr);
  }
  .values-grid > .value-card:nth-child(1),
  .values-grid > .value-card:nth-child(2),
  .values-grid > .value-card:nth-child(3) {
    grid-column: span 2;
  }
  .values-grid > .value-card:nth-child(4),
  .values-grid > .value-card:nth-child(5) {
    grid-column: span 3;
  }
}

.value-card {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-lg);
  /* Opaque dark panel — just a touch lighter than the section's luxe
     ink so the cards register as solid tiles. Critical for the embers
     animation: particles drift behind the cards (lower z-index), so
     the cards must be opaque to actually occlude them. */
  background: #131820;
  /* Transparent border keeps the box footprint identical to the previous
     solid-border version; the visible 1px ring is painted by ::before
     using a diagonal gold gradient that fades to transparent past the
     midpoint. */
  border: 1px solid transparent;
  /* Clip the corner glow auras drawn by ::after so they don't bleed
     past the rounded edges. */
  overflow: hidden;
}

/* Keep the actual card content (icon, title, copy) above the two
   decorative pseudo-layers (gradient border + corner glow). */
.value-card > * {
  position: relative;
  z-index: 1;
}

/* Single big, very-soft gold aura drifting in from the top-left corner
   only — set to the icon color, just bright enough to feel like a warm
   wash without becoming a glow effect. */
.value-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 78% 68% at -8% -12%,
    rgba(200, 164, 92, 0.28) 0%,
    rgba(200, 164, 92, 0.1) 35%,
    transparent 70%
  );
  filter: blur(18px);
}

.value-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    155deg,
    rgba(200, 164, 92, 0.22) 0%,
    rgba(200, 164, 92, 0.11) 35%,
    rgba(200, 164, 92, 0) 65%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Premium value-card glyph (replaces the old "01..05" italic serif
   numbers). Flat single-color line icon, gold currentColor, no chip
   behind it — matches the feature-tile icons up top. */
.value-card__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  margin-bottom: var(--space-5);
  color: var(--color-luxe-gold);
  position: relative;
  z-index: 1;
}

.value-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.value-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.625rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--color-luxe-cream);
}

.value-card__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-luxe-cream-soft);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-card:hover { transform: none; }
}