/* Wordnerds site — universal CSS
   Section scaffold: .wn-section / .wn-container / .wn-grid / .wn-col-* (Grid System Phase 0d)
   Typography: --fs-* Utopia tokens from tokens.css
   Spacing: --space-* Utopia tokens from tokens.css
   NOTE: The legacy --space-xs/sm/md/lg/xl local variables have been removed.
         They shadowed the Utopia --space-* tokens from tokens.css — see GRID.md §8.
   Phase 6: refactor inline CSS to linked stylesheets for Astro. */

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--wn-font-regular);
  font-size: var(--fs-base);
  color: var(--wn-dark-grey);
  line-height: 1.65;
  background: var(--wn-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--wn-brand-yellow); color: var(--wn-off-black); }


/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--wn-font-rounded); line-height: 1.1; font-weight: 700; color: var(--wn-off-black); }
.wn-section--dark h1,
.wn-section--dark h2,
.wn-section--dark h3,
.wn-section--dark h4 { color: var(--wn-white); }
h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-l); letter-spacing: -0.025em; line-height: 1.05; font-weight: 800; }
h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-l); letter-spacing: -0.025em; line-height: 1.05; font-weight: 800; max-width: 20ch; }
h3 { font-size: var(--fs-lg); margin-bottom: 8px; font-weight: 700; letter-spacing: -0.005em; }
h4 { font-size: var(--fs-sm); }
p  { margin-bottom: var(--space-s); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--wn-font-regular);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wn-brand-blue);
  margin-bottom: var(--space-s);
}
.wn-section--dark .eyebrow   { color: var(--wn-brand-yellow); }
.wn-section--yellow .eyebrow { color: var(--wn-off-black); }

/* Answer-capsule = the section's lead/thesis paragraph after H2.
   Standardised 2026-05-28: same colour as body text; bigger size + italic for
   hierarchy; yellow left border as the consistent "this is the lede" marker.
   Applies globally — problem-elaboration, consumption-split, proof-outcome,
   wherever a capsule sits between H2 and body. */
.answer-capsule {
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--wn-dark-grey);
  border-left: 3px solid var(--wn-brand-yellow);
  padding-left: var(--space-s);
  margin-bottom: var(--space-l);
  max-width: 68ch;
  line-height: 1.55;
}
.wn-section--dark .answer-capsule   { color: var(--wn-white); border-color: var(--wn-brand-blue); }
.wn-section--yellow .answer-capsule { color: var(--wn-off-black); border-color: var(--wn-off-black); }

/* Blockquotes = real customer quotes. Iterated 2026-05-28 to the Sainsbury's
   `.proof-stat` treatment: white card, brand-yellow top border, yellow
   `<mark>` highlight on the quote text itself, larger Rounded font.
   Same idiom as `.proof-stat__figure mark`. This is now the canonical voice
   container site-wide. */
blockquote {
  background: var(--wn-white);
  border-top: 4px solid var(--wn-brand-yellow);
  border-radius: var(--wn-radius-card);
  padding: var(--space-l);
  margin: var(--space-l) 0;
  box-shadow: var(--wn-shadow-card);
  position: relative;
}
blockquote::before { display: none; }
.wn-section--dark blockquote { background: var(--wn-off-black); border-top-color: var(--wn-brand-yellow); }
blockquote p {
  font-family: var(--wn-font-rounded);
  font-size: var(--fs-xl);
  font-style: normal;
  font-weight: 800;
  color: var(--wn-off-black);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: none;
  padding-left: 0;
  margin: 0 0 var(--space-m);
}
blockquote p mark {
  background: var(--wn-brand-yellow);
  color: var(--wn-off-black);
  padding: 0.06em 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.wn-section--dark blockquote p { color: var(--wn-white); }
.wn-section--dark blockquote p mark { background: var(--wn-brand-yellow); color: var(--wn-off-black); }

/* Inline emphasis — [[blue]]…[[/blue]] token rendered by renderRichText().
   Semantic rule: yellow mark = customer voice (quotes); blue mark = value
   translation — the customer-value half of a capability→value pair only. */
.wn-mark-blue {
  background: var(--wn-brand-blue);
  color: var(--wn-white);
  padding: 0.06em 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

blockquote cite {
  display: block;
  margin-top: 0;
  font-family: var(--wn-font-regular);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--wn-mid-grey);
  font-style: normal;
}
.wn-section--dark blockquote cite { color: rgba(255,255,255,0.78); }

.blockquote__attribution { display: flex; align-items: center; gap: var(--space-xs); }
.blockquote__headshot {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--wn-border-grey);
}
.blockquote__headshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blockquote__headshot .img-placeholder { min-height: unset; height: 100%; border-radius: 50%; border: none; }
.blockquote__headshot .img-placeholder::before { display: none; }
.blockquote__headshot .img-placeholder span { display: none; }

ul.feature-list { list-style: none; margin: var(--space-l) 0; }
ul.feature-list li { padding: 8px 0 8px 1.5rem; position: relative; }
ul.feature-list li::before { content: "→"; position: absolute; left: 0; color: var(--wn-brand-yellow); font-weight: 700; }


/* ── Buttons (.wn-btn — canonical: design-system/components/form-inputs.html) ── */
.wn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--wn-radius-card);
  font-family: var(--wn-font-rounded);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: opacity 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}
.wn-btn:focus-visible { outline: 2px solid var(--wn-brand-yellow); outline-offset: 3px; }
.wn-btn--primary { background: var(--wn-brand-yellow); color: var(--wn-off-black); }
.wn-btn--primary:hover { opacity: 0.9; box-shadow: 0 4px 16px rgba(250,179,22,0.35); }
.wn-btn--primary:active { transform: translateY(1px); opacity: 1; box-shadow: none; }
.wn-section--yellow .wn-btn--primary { background: var(--wn-off-black); color: var(--wn-brand-yellow); }
.wn-section--yellow .wn-btn--primary:hover { background: var(--wn-white); color: var(--wn-off-black); }
.wn-btn--secondary { background: var(--wn-off-black); color: var(--wn-white); }
.wn-btn--secondary:hover { opacity: 0.85; }
.wn-btn--secondary:active { transform: translateY(1px); }
.wn-btn--ghost { background: transparent; color: var(--wn-off-black); border: 1.5px solid var(--wn-off-black); }
.wn-btn--ghost:hover { background: var(--wn-off-black); color: var(--wn-white); }
.wn-section--dark .wn-btn--ghost,
.hero .wn-btn--ghost { color: var(--wn-white); border-color: rgba(255,255,255,0.65); }
.wn-section--dark .wn-btn--ghost:hover,
.hero .wn-btn--ghost:hover { background: var(--wn-white); color: var(--wn-off-black); border-color: var(--wn-white); }
.wn-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.wn-btn--lg { padding: 18px 36px; font-size: var(--fs-md); border-radius: var(--wn-radius-input); }
.wn-btn--full { width: 100%; }

/* Arrow-link secondary CTA */
.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--wn-brand-blue);
  font-weight: 600;
  font-size: var(--fs-sm);
  position: relative;
  padding-bottom: 2px;
  transition: color 200ms ease, gap 200ms ease;
}
.cta-secondary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 280ms ease;
}
.cta-secondary:hover { gap: 0.6rem; color: var(--wn-off-black); }
.wn-section--dark .cta-secondary { color: var(--wn-brand-blue); }
.wn-section--dark .cta-secondary:hover { color: var(--wn-brand-yellow); }
.wn-section--yellow .cta-secondary { color: var(--wn-off-black); }
.wn-section--yellow .cta-secondary:hover { color: var(--wn-white); }

.cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }


/* ── Image placeholders ─────────────────────────────────────── */
/* Rendered by renderImage() when src starts with "PLACEHOLDER:" */
.img-placeholder {
  background: var(--wn-background-grey);
  border: 2px dashed var(--wn-border-grey);
  border-radius: var(--wn-radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 200px;
  width: 100%;
  padding: var(--space-m);
  color: var(--wn-mid-grey);
  font-family: var(--wn-font-regular);
  font-size: var(--fs-sm);
  text-align: center;
}
.img-placeholder::before {
  content: "[ IMAGE PLACEHOLDER ]";
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wn-border-grey);
}
.img-placeholder span { max-width: 24ch; }
.wn-section--dark .img-placeholder {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4);
}
.wn-section--dark .img-placeholder::before { color: rgba(255,255,255,0.2); }
.hero__visual .img-placeholder { min-height: 360px; }
.integration-callout__visual .img-placeholder { aspect-ratio: 4/3; min-height: auto; }


/* ── Navigation ─────────────────────────────────────────────── */
/* Sticky lives on <header role="banner">, not on .site-nav.
   Reason: sticky only works while the containing block is in the viewport.
   With <header> as parent, <body> becomes the scroll container — nav stays pinned. */
header[role="banner"] { position: sticky; top: 0; z-index: 100; }
.site-nav {
  background: var(--wn-black);
  color: var(--wn-white);
  transition: padding 250ms ease, box-shadow 250ms ease, background 250ms ease;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-nav.is-scrolled { box-shadow: 0 6px 20px -10px rgba(0,0,0,0.5); }
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-l);
  max-width: var(--wn-content-max);
  margin: 0 auto;
  transition: padding 250ms ease;
}
.site-nav.is-scrolled .site-nav__inner { padding-top: 0.65rem; padding-bottom: 0.65rem; }
.site-nav__logo { display: inline-flex; align-items: center; }
.site-nav__logo img { height: 34px; width: auto; display: block; transition: height 250ms ease; }
.site-nav.is-scrolled .site-nav__logo img { height: 28px; }
.site-nav__links { display: flex; gap: var(--space-l); align-items: center; list-style: none; }
.site-nav__links a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  transition: color 200ms ease;
  padding: 0.25rem 0;
  position: relative;
}
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--wn-brand-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms ease;
}
.site-nav__links a:hover { color: var(--wn-white); }
.site-nav__links a:hover::after { transform: scaleX(1); }
.site-nav__links a.is-active { color: var(--wn-white); }
.site-nav__links a.is-active::after { background: var(--wn-brand-yellow); transform: scaleX(1); }
.site-nav__cta {
  background: var(--wn-brand-yellow);
  color: var(--wn-off-black);
  padding: 0.6em 1.2em;
  border-radius: var(--wn-radius-card);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.site-nav__cta:hover {
  background: var(--wn-white);
  color: var(--wn-off-black);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -6px rgba(250,179,22,0.5);
}


/* ── Hero ───────────────────────────────────────────────────── */
/* Gradient: atmospheric yellow at right-centre (behind product visual area),
   subtle blue accent at bottom-left. Both stay atmospheric — not flat shapes. */
.hero {
  background:
    radial-gradient(ellipse 60% 75% at 75% 55%, rgba(250,179,22,0.28) 0%, rgba(250,179,22,0.06) 50%, transparent 70%),
    radial-gradient(ellipse 45% 55% at 12% 88%, rgba(57,184,225,0.14) 0%, transparent 55%),
    var(--wn-off-black);
  color: var(--wn-white);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Hero headline — always --fs-3xl, dramatic size statement */
.hero h1 {
  font-size: var(--fs-3xl);
  color: var(--wn-white);
  margin-bottom: var(--space-l);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
}

/* Option A — centred layout (default; use when no real product visual) */
.hero__copy { align-self: center; padding-bottom: var(--space-2xl); }
.hero__copy--centred { text-align: center; }
.hero__copy--centred h1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero__body {
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-l);
  line-height: 1.6;
}
.hero__copy--centred .hero__body { max-width: 52ch; margin-left: auto; margin-right: auto; }
.hero__copy--centred .cta-group  { justify-content: center; }

/* Option B — split layout (use once real product visual is available) */
.hero__entity-canonical {
  font-size: var(--fs-base);
  color: rgba(255,255,255,0.75);
  margin-bottom: var(--space-l);
  max-width: 56ch;
  line-height: 1.6;
}
/* Visual fills to the bottom edge of the dark section; overflow:hidden on .hero clips it cleanly */
.hero__visual { margin: 0 auto; align-self: stretch; }
.hero__visual img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--wn-radius-card); }
/* height: 100% fills the figure so the placeholder reaches the section edge */
.hero__visual .img-placeholder { height: 100%; min-height: 420px; }

/* Centred hero variant — landscape screenshot bleeds to the bottom section edge */
.hero--centred { padding-top: var(--space-xl); padding-bottom: 0; }
.hero--centred h1 { font-size: var(--fs-2xl); max-width: 22ch; }
.hero--centred .hero__copy { padding-bottom: var(--space-l); }
.hero__visual--centred { margin: var(--space-l) 0 0; }
.hero__visual--centred img {
  height: auto;
  object-fit: unset;
  border-radius: var(--wn-radius-card) var(--wn-radius-card) 0 0;
}
.hero__visual--centred .img-placeholder {
  height: auto;
  min-height: unset;
}


/* ── Problem statement ──────────────────────────────────────── */
.problem-elaboration h2 { margin-bottom: var(--space-s); }
.problem-elaboration__visual {
  border-radius: var(--wn-radius-card);
  overflow: hidden;
  margin-bottom: var(--space-l);
  box-shadow: var(--wn-shadow-card);
}
.problem-elaboration__visual img { display: block; width: 100%; height: auto; }


/* ── Problem statement: column alignment ────────────────────── */
/* Top-align so the body paragraphs flow naturally from the answer-capsule
   above the grid, and the blockquote sits level with the top of the body.
   Whitespace at the bottom of the shorter column is intentional.
   The blockquote's default top margin is stripped here so its top edge
   lines up exactly with the body's first paragraph. */
.problem-elaboration .wn-grid { align-items: start; }
.problem-elaboration__inner blockquote { margin-top: 0; }


/* ── Feature pillars ────────────────────────────────────────── */
.guide-proof__pillars { list-style: none; margin-top: var(--space-xl); grid-template-rows: auto auto 1fr; align-items: start; }
/* 4-up icon-grid variant: each pillar is wn-col-6 (2×2 grid). Header row
   = blue numbered chip + h3 on one line; body sits below. Numbers (1-4)
   are computed from the index in the fragment, not from data. Iterated
   2026-05-28 per Pete: replaces the icon-image chip — no per-pillar image
   used in this variant. */
.guide-proof__pillars--icon-grid { grid-template-rows: auto; align-items: start; }
.guide-proof__pillars--icon-grid .guide-proof__pillar {
  display: block;
  padding-top: 0;
}
.guide-proof__pillars--icon-grid .guide-proof__pillar::before { display: none; }
.guide-proof__pillar-header {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
}
/* Numbered circle chip — two sizes/colours by surface.
   FeaturePillars 4-up (actionable methods): 40px, brand-blue, white digit
     — works in the wider 2×2 columns and reads as "this is a list".
   StepCards (how-it-works): 28px, brand-yellow, off-black digit
     — fits the narrower 3-up columns; yellow ties step numbers to the
     "this is the action arc" register of the page.
*/
.guide-proof__pillar-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wn-brand-blue);
  color: var(--wn-white);
  font-family: var(--wn-font-rounded);
  font-weight: 800;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.step__number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wn-brand-yellow);
  color: var(--wn-off-black);
  font-family: var(--wn-font-rounded);
  font-weight: 800;
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.guide-proof__pillars--icon-grid .guide-proof__pillar h3 { margin: 0; }
.guide-proof__pillar { padding-top: var(--space-s); position: relative; }
.guide-proof__pillar--with-image { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
.guide-proof__pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 84px; height: 3px;
  background: var(--wn-brand-yellow);
}
.guide-proof__pillar:nth-child(2)::before { background: var(--wn-brand-blue); }
.guide-proof__pillar:nth-child(3)::before { background: var(--wn-brand-yellow); }
.guide-proof__pillar h3 { color: var(--wn-off-black); margin: 0.75rem 0 0.5rem; }
.guide-proof__pillar p  { font-size: var(--fs-base); color: var(--wn-mid-grey); line-height: 1.6; }
.guide-proof__pillar--with-image { padding-top: 0; }
.guide-proof__pillar--with-image::before { display: none; }

/* Pillar icon — 40×40 rounded square, yellow (pillar 1+3) or blue (pillar 2) */
.guide-proof__pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--wn-radius-card);
  background: var(--wn-brand-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-s);
  color: var(--wn-off-black);
  flex-shrink: 0;
}

.guide-proof__pillar-image {
  border-radius: var(--wn-radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-s);
  aspect-ratio: 16/9;
}
.guide-proof__pillar-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide-proof__pillar-image .img-placeholder { aspect-ratio: 16/9; min-height: auto; height: 100%; }

/* ── Logo bar (coded — replaces single logo-strip image) ────── */
.logo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-l) var(--space-xl);
  list-style: none;
  margin-top: var(--space-xl);
  padding: var(--space-l) var(--space-xl);
  background: var(--wn-lighter-grey);
  border-radius: var(--wn-radius-card);
}
.logo-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 1 160px;
}
.logo-bar__item img {
  max-height: 40px;
  width: auto;
  max-width: 120px;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: opacity 200ms ease, filter 200ms ease;
}
.logo-bar__item:hover img { opacity: 1; filter: none; }
.logo-bar__stat {
  font-size: var(--fs-sm);
  color: var(--wn-mid-grey);
  text-align: center;
  max-width: 18ch;
  line-height: 1.4;
}
.logo-bar__item .img-placeholder {
  min-height: 40px;
  height: 40px;
  width: 120px;
  padding: var(--space-2xs);
}
.logo-bar__item .img-placeholder::before { display: none; }
.logo-bar__item .img-placeholder span { font-size: var(--fs-xs); }


/* ── Step cards ─────────────────────────────────────────────── */
.how-it-works__steps { margin-top: var(--space-xl); }
.step {
  background: var(--wn-white);
  border: 1px solid var(--wn-border-grey);
  border-radius: var(--wn-radius-card);
  padding: var(--space-l);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -16px rgba(0,0,0,0.15); }
.step__image {
  margin: calc(-1 * var(--space-l));
  margin-bottom: var(--space-s);
  line-height: 0;
}
.step__image img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.step__image .img-placeholder {
  aspect-ratio: 16/9;
  min-height: auto;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.step__image .img-placeholder::before { display: none; }
.step__image .img-placeholder span { display: none; }
/* Step card header row: yellow circular number chip + h3 heading.
   Top-aligned (flex-start) so the chip sits by the FIRST line of the
   heading when it wraps — not centred against all wrapped lines.
   Iterated 2026-05-28: smaller chip + yellow background. */
.step__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
}
.step h3 { color: var(--wn-off-black); font-weight: 700; margin: 0; }
.step p  { font-size: var(--fs-base); color: var(--wn-mid-grey); }


/* ── Pathway cards ──────────────────────────────────────────── */
.persona-pathways__cards { margin-top: var(--space-xl); }
.persona-card {
  background: var(--wn-white);
  border: 1px solid var(--wn-border-grey);
  border-radius: var(--wn-radius-card);
  padding: var(--space-l);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.persona-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--wn-brand-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms ease;
}
.persona-card:hover { border-color: var(--wn-off-black); transform: translateY(-8px); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.18); }
.persona-card:hover::before { transform: scaleX(1); }
.persona-card h3 { color: var(--wn-off-black); font-weight: 700; }
.persona-card p  { font-size: var(--fs-base); color: var(--wn-mid-grey); margin: var(--space-s) 0 var(--space-m); }
.persona-card__footer { display: flex; align-items: center; gap: var(--space-s); margin-top: auto; }
.persona-card__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--wn-border-grey);
}
.persona-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona-card__avatar .img-placeholder { min-height: unset; height: 100%; border-radius: 50%; border: none; }
.persona-card__avatar .img-placeholder::before { display: none; }
.persona-card__avatar .img-placeholder span { display: none; }
.persona-card .cta-secondary { font-size: var(--fs-sm); }


/* ── Proof outcome ──────────────────────────────────────────── */
/* Note: the .proof-outcome-specific answer-capsule overrides were removed
   2026-05-28 — the global .answer-capsule now uses --fs-md + italic + body
   colour, so the proof-outcome treatment is the same as everywhere else. */
/* Stat panel: right column — large metric as the focal proof element */
.proof-stat-panel { display: flex; flex-direction: column; }
.proof-stat {
  background: var(--wn-white);
  border-radius: var(--wn-radius-card);
  padding: var(--space-l);
  box-shadow: var(--wn-shadow-card);
  border-top: 4px solid var(--wn-brand-yellow);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  height: 100%;
}
.proof-stat__figure {
  font-family: var(--wn-font-rounded);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--wn-off-black);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: none;
}
.proof-stat__figure mark {
  background: var(--wn-brand-yellow);
  color: var(--wn-off-black);
  padding: 0.06em 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.proof-stat__attribution {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--wn-border-grey);
}
.proof-stat__logo { width: 72px; height: 36px; flex-shrink: 0; display: flex; align-items: center; }
.proof-stat__logo img { max-width: 72px; max-height: 32px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.7; }
.proof-stat__logo .img-placeholder { min-height: 32px; height: 32px; width: 72px; padding: 4px; }
.proof-stat__logo .img-placeholder::before { display: none; }
.proof-stat__logo .img-placeholder span { font-size: 9px; }
.proof-stat__customer strong { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--wn-off-black); line-height: 1.3; }
.proof-stat .cta-secondary { margin-top: 0; font-size: var(--fs-sm); align-self: flex-start; }

.wn-verbatim {
  background: var(--wn-lighter-grey);
  border-radius: var(--wn-radius-card);
  padding: 0;
  overflow: hidden;
  margin: var(--space-m) 0;
}
.wn-verbatim__inner { background: var(--wn-white); margin: 12px; padding: 16px 20px; border-radius: var(--wn-radius-sm); }
.wn-verbatim__header { font-family: var(--wn-font-regular); font-size: var(--fs-sm); font-weight: 500; color: var(--wn-dark-grey); }
.wn-verbatim__meta   { font-family: var(--wn-font-regular); font-size: var(--fs-xs); font-weight: 300; color: var(--wn-mid-grey); margin: 2px 0 10px; }
.wn-verbatim__body   { font-family: var(--wn-font-regular); font-size: var(--fs-base); font-style: italic; color: var(--wn-dark-grey); line-height: 1.55; margin: 0; }

.success-vision {
  background: var(--wn-lighter-grey);
  border-radius: var(--wn-radius-card);
  padding: var(--space-l);
  border-top: 3px solid var(--wn-brand-blue);
}
.success-vision p { font-size: var(--fs-sm); color: var(--wn-mid-grey); margin: 0; max-width: none; line-height: 1.65; }


/* ── Integration callout ────────────────────────────────────── */
.integration-callout__visual {
  background: var(--wn-white);
  border-radius: var(--wn-radius-card);
  padding: var(--space-xl) var(--space-l);
  display: flex;
  align-items: center;
  justify-content: center;
}
.integration-callout__visual img { display: block; width: 100%; max-width: 460px; height: auto; }


/* ── Diagram explainer ──────────────────────────────────────── */
/* A large centred diagram as the section centrepiece, framed by a heading +
   AEO answer-capsule above and explanatory prose below. */
.diagram-explainer__intro { text-align: center; }
.diagram-explainer__intro .answer-capsule {
  /* keep the capsule readable (left-bordered, left-aligned text) inside the
     centred intro block */
  text-align: left;
  display: inline-block;
  margin-top: var(--space-m);
  margin-bottom: 0;
}
.diagram-explainer__visual {
  margin: var(--space-xl) auto 0;
  max-width: 960px;
}
.diagram-explainer__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wn-radius-card);
  box-shadow: var(--wn-shadow-card);
}
.diagram-explainer__visual .img-placeholder { width: 100%; min-height: 320px; }
.diagram-explainer__visual figcaption {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--wn-mid-grey);
  margin-top: var(--space-s);
}
.diagram-explainer__body { margin-top: var(--space-xl); }
.wn-section--dark .diagram-explainer__visual figcaption { color: var(--wn-light-grey); }


/* ── FAQ ────────────────────────────────────────────────────── */
.faq__list { margin-top: var(--space-l); }
details { border-bottom: 1px solid var(--wn-border-grey); transition: padding 200ms ease; }
details:first-child { border-top: 1px solid var(--wn-border-grey); }
details[open] { padding-bottom: 8px; }
summary {
  cursor: pointer;
  padding: 1.1rem 0;
  font-family: var(--wn-font-rounded);
  font-weight: 700;
  font-size: var(--fs-base);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--wn-off-black);
  gap: var(--space-l);
  transition: color 200ms ease;
}
summary:hover { color: var(--wn-brand-blue); }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  width: 14px; height: 14px;
  flex-shrink: 0;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px, 2px 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--wn-brand-yellow);
  transition: transform 280ms ease;
}
details[open] summary::after { transform: rotate(45deg); background-size: 100% 2px, 0 100%; }
.faq__answer { padding: 0 0 1.25rem; max-width: 72ch; }
.faq__answer p { color: var(--wn-mid-grey); font-size: var(--fs-sm); line-height: 1.65; }


/* ── Footer CTA ─────────────────────────────────────────────── */
.footer-cta .wn-col-8-centred { text-align: center; }
.footer-cta h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.footer-cta p  { margin: 0 auto var(--space-l); max-width: 52ch; font-size: var(--fs-base); }
.footer-cta .cta-group { justify-content: center; }


/* ── Resources row ──────────────────────────────────────────── */
.resources-row__image {
  border-radius: var(--wn-radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-s);
  aspect-ratio: 16/9;
}
.resources-row__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.resources-row__image .img-placeholder { aspect-ratio: 16/9; min-height: auto; }
.resources-row__image .img-placeholder::before { display: none; }
.resources-row__col h3 { margin-bottom: var(--space-s); }
.resources-row__items { list-style: none; margin-bottom: var(--space-s); }
.resources-row__items li { padding: 6px 0; border-bottom: 1px solid var(--wn-border-grey); }
.resources-row__items a { font-size: var(--fs-sm); color: var(--wn-dark-grey); transition: color 150ms ease; }
.resources-row__items a:hover { color: var(--wn-brand-blue); }
.resources-row__cta { margin-top: var(--space-s); }


/* ── CX Corner band (above footer, distinct colour) ─────────── */
.cx-corner-band {
  background: var(--wn-dark-grey);
  color: rgba(255,255,255,0.9);
  padding: var(--space-l) 0;
}
.cx-corner-band__inner { display: flex; align-items: center; gap: var(--space-l); }
.cx-corner-band p { font-size: var(--fs-sm); max-width: 72ch; margin-bottom: 0; flex: 1; }
.cx-corner-band a { color: var(--wn-brand-yellow); font-weight: 600; }
.cx-corner-band a:hover { text-decoration: underline; }
.cx-corner-band__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.15);
}
.cx-corner-band__avatar .img-placeholder {
  min-height: unset;
  height: 100%;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
}
.cx-corner-band__avatar .img-placeholder::before { display: none; }
.cx-corner-band__avatar .img-placeholder span { font-size: var(--fs-xs); color: rgba(255,255,255,0.4); }

/* ── Footer ─────────────────────────────────────────────────── */

.site-footer {
  background: var(--wn-off-black);
  color: rgba(255,255,255,0.75);
  padding: var(--space-xl) 0 var(--space-l);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-l);
}
.site-footer__brand { display: inline-flex; align-items: center; }
.site-footer__brand img { height: 32px; width: auto; display: block; }
.site-footer__tagline { font-size: var(--fs-sm); margin-top: 0.5rem; max-width: none; }
.site-footer__nav h4 { color: var(--wn-white); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; font-weight: 700; font-family: var(--wn-font-regular); }
.site-footer__nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-l); }
.site-footer__nav a { font-size: var(--fs-sm); transition: color 120ms ease; }
.site-footer__nav a:hover { color: var(--wn-brand-yellow); }
.site-footer__social a { font-size: var(--fs-sm); }
.site-footer__social a:hover { color: var(--wn-brand-yellow); }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-s);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.55);
}
.site-footer__legal a:hover { color: var(--wn-brand-yellow); }


/* ── Form inputs (canonical: design-system/components/form-inputs.html) ── */
.wn-form-group { display: flex; flex-direction: column; gap: 6px; }
.wn-form-label { font-family: var(--wn-font-regular); font-size: var(--fs-sm); font-weight: 500; color: var(--wn-dark-grey); line-height: 1.4; }
.wn-form-input {
  appearance: none;
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--wn-white);
  border: 1.5px solid var(--wn-border-grey);
  border-radius: var(--wn-radius-input);
  font-family: var(--wn-font-regular);
  font-size: var(--fs-base);
  color: var(--wn-dark-grey);
  line-height: 1.4;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: border-color 150ms ease, outline-color 150ms ease;
}
.wn-form-input::placeholder { color: var(--wn-mid-grey); }
.wn-form-input:focus { border-color: var(--wn-brand-yellow); outline-color: var(--wn-brand-yellow); }
.wn-form-input--error { border-color: var(--wn-dark-grey); }
.wn-form-input:disabled { background: var(--wn-background-grey); border-color: var(--wn-background-grey); color: var(--wn-mid-grey); cursor: not-allowed; }
.wn-form-textarea {
  appearance: none;
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--wn-white);
  border: 1.5px solid var(--wn-border-grey);
  border-radius: var(--wn-radius-card);
  font-family: var(--wn-font-regular);
  font-size: var(--fs-base);
  color: var(--wn-dark-grey);
  line-height: 1.6;
  resize: vertical;
  min-height: 120px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: border-color 150ms ease, outline-color 150ms ease;
}
.wn-form-textarea::placeholder { color: var(--wn-mid-grey); }
.wn-form-textarea:focus { border-color: var(--wn-brand-yellow); outline-color: var(--wn-brand-yellow); }
.wn-form-textarea--error { border-color: var(--wn-dark-grey); }
.wn-form-textarea:disabled { background: var(--wn-background-grey); border-color: var(--wn-background-grey); color: var(--wn-mid-grey); cursor: not-allowed; }
.wn-form-hint { font-family: var(--wn-font-regular); font-size: var(--fs-xs); color: var(--wn-mid-grey); line-height: 1.4; }
.wn-form-error {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-family: var(--wn-font-regular);
  font-size: var(--fs-xs);
  color: var(--wn-dark-grey);
  line-height: 1.4;
}
.wn-form-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--wn-dark-grey);
  color: var(--wn-white);
  font-size: 8px;
  font-weight: 900;
  margin-top: 1px;
}


/* ── Grid system (Phase 0d — Utopia-aligned, 12-col) ────────── */
.wn-section           { position: relative; padding-block: var(--space-2xl); }
.wn-section--generous { padding-block: var(--space-2xl-3xl); }
.wn-section--hero     { padding-top: var(--space-3xl); padding-bottom: 0; }
.wn-section--alt          { background: var(--wn-light-grey); }
.wn-section--lighter-grey { background: var(--wn-lighter-grey); }
.wn-section--dark         { background: var(--wn-off-black); color: var(--wn-white); }
.wn-section--yellow       { background: var(--wn-brand-yellow); color: var(--wn-off-black); }
.wn-section--yellow-tint  { background: var(--wn-section-yellow-tint); }
.wn-section--blue-tint    { background: var(--wn-section-blue-tint); }
.wn-section--alt          + .wn-section--alt,
.wn-section--lighter-grey + .wn-section--lighter-grey,
.wn-section--dark         + .wn-section--dark,
.wn-section--yellow       + .wn-section--yellow,
.wn-section--yellow-tint  + .wn-section--yellow-tint,
.wn-section--blue-tint    + .wn-section--blue-tint   { padding-top: 0; }

/* Two consecutive white sections: collapse the second section's top padding so the
   join reads as a single section gap, not a double one. Background modifiers and
   hero (which has its own dark gradient) are excluded from this rule. */
.wn-section:not(.wn-section--alt):not(.wn-section--lighter-grey):not(.wn-section--dark):not(.wn-section--yellow):not(.wn-section--yellow-tint):not(.wn-section--blue-tint):not(.wn-section--hero)
+ .wn-section:not(.wn-section--alt):not(.wn-section--lighter-grey):not(.wn-section--dark):not(.wn-section--yellow):not(.wn-section--yellow-tint):not(.wn-section--blue-tint):not(.wn-section--hero)
{ padding-top: 0; }

.wn-container         { max-width: var(--wn-content-max); margin-inline: auto; padding-inline: var(--space-l); }
.wn-container--narrow { max-width: 1180px; }

.wn-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-m);
}

.wn-col-3  { grid-column: span 3; }
.wn-col-4  { grid-column: span 4; }
.wn-col-5  { grid-column: span 5; }
.wn-col-6  { grid-column: span 6; }
.wn-col-7  { grid-column: span 7; }
.wn-col-8  { grid-column: span 8; }
.wn-col-10 { grid-column: span 10; }
.wn-col-12 { grid-column: span 12; }
.wn-col-10-centred { grid-column: 2 / 12; }
.wn-col-8-centred  { grid-column: 3 / 11; }

@media (max-width: 768px) {
  .wn-col-3, .wn-col-4, .wn-col-5, .wn-col-6,
  .wn-col-7, .wn-col-8, .wn-col-10, .wn-col-12,
  .wn-col-10-centred, .wn-col-8-centred { grid-column: 1 / -1; }
  .wn-container { padding-inline: var(--space-s); }
}


/* ── Reveal-on-scroll ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }


/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-nav__links { display: none; }
  .hero__visual { max-width: 280px; }
}


/* ── AlternatingWalkthroughTemplate ─────────────────────────── */
/* Linear-pattern method walkthrough: each step gets a full-width row
   with text + visual on alternating sides. */
.walkthrough h2 {
  text-align: center;
  max-width: 26ch;
  margin: 0 auto var(--space-s);
}
.walkthrough__intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--space-2xl);
  color: var(--wn-mid-grey);
  font-size: var(--fs-md);
}
.walkthrough__step {
  align-items: center;
  margin-block: var(--space-2xl);
}
.walkthrough__step:first-of-type { margin-block-start: 0; }
.walkthrough__step:last-of-type  { margin-block-end: 0; }
.walkthrough__number {
  font-family: var(--wn-font-rounded);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--wn-brand-yellow);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2xs);
}
.walkthrough__heading {
  font-family: var(--wn-font-rounded);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-s);
}
.walkthrough__body {
  font-size: var(--fs-base);
  color: var(--wn-dark-grey);
  max-width: 48ch;
}
.walkthrough__visual {
  margin: 0;
  border-radius: var(--wn-radius-card);
  overflow: hidden;
  background: var(--wn-light-grey);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.walkthrough__visual img,
.walkthrough__visual .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.walkthrough__cta {
  justify-content: center;
  margin-top: var(--space-2xl);
}

@media (max-width: 768px) {
  /* On mobile the grid collapses to one column; preserve visual-then-text
     order regardless of flipped flag so steps read top-down consistently. */
  .walkthrough__step--flipped .walkthrough__visual { order: -1; }
  .walkthrough__step { row-gap: var(--space-m); }
}


/* ── Proof-stat headshot ─────────────────────────────────────── */
/* Renders the verbatim speaker's headshot as an 80×80 circle inside the
   proof-outcome stat panel. Placeholder shows the spec'd dimensions visibly. */
.proof-stat__headshot {
  width: 80px;
  height: 80px;
  margin: 0 var(--space-xs) 0 0;
  flex-shrink: 0;
}
.proof-stat__headshot img,
.proof-stat__headshot .img-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.proof-stat__headshot .img-placeholder {
  min-height: 80px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--wn-border-grey);
  overflow: hidden;
  white-space: nowrap;
}
.proof-stat__headshot .img-placeholder span {
  display: block;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wn-mid-grey);
}
.proof-stat__headshot .img-placeholder::before { display: none; }
.proof-stat__attribution {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}


/* ── StepCards intro — lead paragraph, not a quote ────────────── */
/* Replaces the old .how-it-works__intro blockquote treatment.
   Renders as a centred lead paragraph above the step cards. */
.step-cards__intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto var(--space-2xl);
  font-size: var(--fs-md);
  color: var(--wn-mid-grey);
  line-height: 1.55;
}