/**
 * Site redesign system styles (homepage, conversion, pricing).
 * Does not alter legacy marketing CSS (styles.css/output.css).
 */

/* In-page hash anchors: smooth scroll, offset for sticky nav */
html.site {
  --w-scroll-margin: 5rem; /* sticky nav ~4–5.5rem */
  /*
   * Horizontal clip at the document element only.
   * Do NOT set overflow-x on body.site-page: any non-visible overflow on the
   * sticky nav’s ancestor (body) is a known sticky/compositor thrash source in
   * Chrome + Safari and presents as 1px scroll “vibration”. Clip here keeps FUI
   * float hang from making a horizontal scrollbar without nesting sticky.
   */
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html.site {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.site {
    scroll-behavior: auto;
  }
}

.site-page #what,
.site-page #practice,
.site-page #proof,
.site-page #faq {
  scroll-margin-top: var(--w-scroll-margin);
}

.site-page {
  --w-ink: #111318;
  --w-carbon: #203340;
  /*
   * ═══════════════════════════════════════════════════════════════════════
   * LOCKED: paper / cream surface ramp (homepage + conversion + site chrome)
   * ═══════════════════════════════════════════════════════════════════════
   * Bright floor for air and cleanliness — do not drift back to dingy creams.
   * Lightest fills are pure white; page ground is super-near-white; washes
   * step warmer only as needed for section rhythm.
   *
   * Surfaces for large section backgrounds:
   *   paper (default) · wash (neutral-150) · ink  — never full-bleed marker.
   * Marker (#dce64a) is for accents only: buttons, marks, focus, small chrome.
   *
   * Cascade (light → deep): N0 white → paper near-white → 50 → 100 → 150 → 200
   * Prefer var(--w-paper) / var(--w-neutral-*) over hard-coded cream hexes.
   */
  --w-paper: #faf9f7;          /* page ground — near-white, not yellow-cream */
  --w-paper-rgb: 250, 249, 247;
  --w-marker: #dce64a;         /* accent only — never section / page fill */
  --w-rule: #edebe5;
  /* Warm neutral ramp (paper-tinted — never cool blue-grey) */
  --w-neutral-0: #ffffff;      /* pure white lifts / elevated fills */
  --w-neutral-50: #f5f3ef;     /* soft wash under paper */
  --w-neutral-100: #f0ede7;    /* hairline / warm rule family */
  --w-neutral-150: #edebe5;    /* alternating paper section wash */
  --w-neutral-200: #e6e2d9;    /* deepest cream plate */
  --w-text-muted: #4a5a64; /* warm, carbon-leaning muted — not cool slate gray */
  --w-carbon-soft: #2a3f4d;
  --w-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --w-shadow-raised: 0 24px 48px -20px rgba(17, 19, 24, 0.28),
    0 8px 16px -10px rgba(17, 19, 24, 0.12);
  --w-container: 73.75rem; /* 1180px */
  color: var(--w-ink);
  background-color: var(--w-paper);
  font-family: "DM Sans", sans-serif;
}

/* Faux product stages: composition chrome that sits alongside .fui-* kit pieces */
.site-hero__board,
.site-hero__float-msg,
.site-hero__float-pills,
.site-practice__board,
.site-practice__stage,
.site-practice__notify,
.site-cap__fui,
.site-define__visual,
[class^="w-def-"],
[class*=" w-def-"] {
  -webkit-user-select: none;
  user-select: none;
}

.site-page .font-display {
  font-family: "Playfair Display", Georgia, serif;
}

/*
 * Marketing + conversion page headings — shared weight / lead / track.
 * Scoped to page headings and known title BEM classes. Excludes FUI chrome
 * (fui-matrix, fui-message, pills, mock labels use other tags or fui-* classes).
 */
.site-page :is(h1, h2, h3):not([class^="fui-"]):not([class*=" fui-"]),
.site-hero__title,
.site-define__title,
.site-define__item-title,
.site-proof__title,
.site-practice__title,
.site-practice__step-title,
.site-cap__title,
.site-cap__beat-title,
.site-cta__title,
.site-voices__title,
.site-faq__title,
.site-final-cta__title,
.w-conv-title,
.w-conv-block__title,
.w-conv-workflow__title,
.w-conv-rule-item__title,
.w-conv-onboard__title {
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Paper grain — default marketing wash */
.site-page .w-texture-grain {
  background-color: var(--w-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

/* Marker highlight — same recipe as live .mark (styles.css) */
.site-page .w-mark {
  background-color: #dce64a;
  color: #111318;
  line-height: 1.35;
  padding: 0 0.18em;
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Eyebrow */
.site-page .w-eyebrow {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-text-muted);
}

.site-page .w-eyebrow-rule {
  display: block;
  width: 3.5rem; /* 56px */
  height: 3px;
  margin-top: 0.5rem;
  background: var(--w-marker);
  border-radius: 2px;
}

/* Buttons */
.site-page .w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color 140ms var(--w-ease),
    color 140ms var(--w-ease),
    border-color 140ms var(--w-ease),
    transform 140ms var(--w-ease),
    filter 140ms var(--w-ease);
}

.site-page .w-btn:active {
  transform: scale(0.985);
}

.site-page .w-btn-marker {
  background: var(--w-marker);
  color: var(--w-ink);
  padding: 0.8rem 1.4rem;
}

.site-page .w-btn-marker:hover {
  filter: brightness(1.04);
}

.site-page .w-btn-ink {
  background: var(--w-ink);
  color: var(--w-paper);
  padding: 0.85rem 1.5rem;
}

.site-page .w-btn-ink:hover {
  background: var(--w-carbon);
}

.site-page .w-btn-ghost {
  background: transparent;
  color: var(--w-carbon);
  padding: 0.85rem 0.25rem;
  font-weight: 500;
  border-radius: 0;
  gap: 0.35rem;
}

.site-page .w-btn-ghost:hover {
  color: var(--w-ink);
}

/* Link hover: short marker swipe → longer fill */
.site-page .w-link-underline {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.site-page .w-link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 6px;
  background: var(--w-marker);
  border-radius: 1px;
  transition: width 140ms var(--w-ease);
}

.site-page .w-link-underline:hover::after,
.site-page .w-link-underline:focus-visible::after {
  width: 40%;
}

/* Focus ring — marker halo + ink hairline */
.site-page a:focus-visible,
.site-page button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--w-paper), 0 0 0 4px var(--w-marker),
    0 0 0 5px var(--w-ink);
}

/* —— Nav —— */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  /*
   * Slightly more opaque paper so backdrop sampling is cheaper while scrolling.
   * Prefer solid-ish paper + light blur over a highly translucent frosted bar —
   * the latter with sticky + page filters often reads as full-page vibration.
   * Uses locked --w-paper (near-white), never the old dingy cream rgba.
   */
  background: rgba(var(--w-paper-rgb), 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--w-rule);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav {
    background: var(--w-paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.site-nav__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

.site-nav__logo img {
  height: 1.35rem;
  width: auto;
}

@media (min-width: 768px) {
  .site-nav__logo img {
    height: 1.5rem;
  }
}

.site-nav__links {
  display: none;
  align-items: center;
  gap: 0.15rem;
}

@media (min-width: 900px) {
  .site-nav__links {
    display: flex;
  }
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--w-carbon);
  text-decoration: none;
  border-radius: 9999px;
  transition: color 140ms var(--w-ease), background-color 140ms var(--w-ease);
}

.site-nav__link:hover {
  color: var(--w-ink);
  background: rgba(255, 255, 255, 0.7);
}

.site-nav__link.is-active {
  color: var(--w-ink);
  background: rgba(255, 255, 255, 0.85);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.site-nav__login {
  display: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--w-carbon);
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  transition: color 140ms var(--w-ease);
}

.site-nav__login:hover {
  color: var(--w-ink);
}

@media (min-width: 640px) {
  .site-nav__login {
    display: inline-flex;
  }
}

.site-nav__cta {
  padding: 0.55rem 1rem !important;
  font-size: 0.8125rem !important;
}

@media (min-width: 640px) {
  .site-nav__cta {
    padding: 0.65rem 1.15rem !important;
    font-size: 0.875rem !important;
  }
}

.site-nav__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--w-ink);
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0;
}

@media (min-width: 900px) {
  .site-nav__menu-btn {
    display: none;
  }
}

/* Desktop solutions dropdown */
.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 15.5rem;
  padding: 0.4rem 0;
  background: #fff;
  border: 1px solid var(--w-rule);
  border-radius: 1rem; /* 16px */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 140ms var(--w-ease), transform 140ms var(--w-ease),
    visibility 140ms var(--w-ease);
  z-index: 60;
}

.site-nav__dropdown:hover .site-nav__dropdown-panel,
.site-nav__dropdown:focus-within .site-nav__dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__dropdown-panel a {
  display: block;
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--w-carbon);
  text-decoration: none;
  transition: background-color 140ms var(--w-ease), color 140ms var(--w-ease);
}

.site-nav__dropdown-panel a:hover {
  background: var(--w-paper);
  color: var(--w-ink);
}

/* Mobile drawer */
.site-nav__mobile {
  display: none;
  border-top: 1px solid var(--w-rule);
  background: #fff;
  padding: 0.75rem 1.5rem 1.25rem;
}

.site-nav__mobile.is-open {
  display: block;
}

@media (min-width: 900px) {
  .site-nav__mobile {
    display: none !important;
  }
}

.site-nav__mobile a {
  display: block;
  padding: 0.7rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--w-carbon);
  text-decoration: none;
  border-bottom: 1px solid var(--w-neutral-100);
}

.site-nav__mobile a:hover {
  color: var(--w-ink);
}

.site-nav__mobile-sub {
  padding-left: 0.75rem;
}

.site-nav__mobile-sub a {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--w-text-muted);
}

/* —— Hero (stacked: copy over product) —— */
/*
 * Vertical stack so the headline can use a wide measure (“communications”
 * no longer fights a narrow left column). Brand tokens stay: paper grain,
 * Playfair, marker on “memory.” Product stage is full-width under the CTA.
 */
.site-hero {
  position: relative;
  overflow: visible;
  z-index: 1;
  padding: 3.25rem 1.5rem 4rem;
}

/* Fine planning grid under product UI — ink hairlines on paper + grain */
.site-hero.w-texture-grain {
  background-color: var(--w-paper);
  background-image:
    linear-gradient(rgba(17, 19, 24, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 19, 24, 0.035) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 28px 28px, 28px 28px, auto;
}

@media (min-width: 768px) {
  .site-hero {
    padding: 4rem 1.5rem 4.75rem;
  }
}

@media (min-width: 1024px) {
  .site-hero {
    padding: 4.25rem 1.5rem 5.25rem;
  }
}

.site-hero__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  display: grid;
  gap: 2.75rem;
  align-items: center;
}

/* Two-column: copy left / product right — media slightly wider for 4-week board */
@media (min-width: 1024px) {
  .site-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 3.25rem 3rem;
    align-items: center;
  }
}

/* Stacked (mobile/tablet): centered copy; two-col at 1024px flips to left */
.site-hero__copy {
  text-align: center;
  max-width: none;
  margin: 0;
  width: 100%;
  min-width: 0;
}

.site-hero__eyebrow-wrap {
  margin-bottom: 1.25rem;
}

/* Marker rule under the eyebrow — centered when copy is stacked */
.site-hero__eyebrow-wrap .w-eyebrow-rule {
  width: 4.25rem;
  height: 4px;
  margin-top: 0.55rem;
  margin-left: auto;
  margin-right: auto;
}

.site-hero__title,
.site-page h1.site-hero__title {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  /* Stacked: larger; two-col (1024px) locks the prior clamp */
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  font-weight: 400;
  /* Slight gutter above shared title 1.02 so mark band never kisses prior line */
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--w-ink);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .site-hero__title,
  .site-page h1.site-hero__title {
    font-size: clamp(2.625rem, 4.75vw, 4.25rem);
  }
}

/*
 * Hero H1 mark: do not paint background-color on the full line box — at tight
 * title leading that yellow box collides with the prior line (“align” / “g”).
 * Gradient band hugs Playfair 600 glyphs instead of expanding the line box.
 */
.site-hero__title .w-mark {
  background-color: transparent;
  background-image: linear-gradient(var(--w-marker, #dce64a), var(--w-marker, #dce64a));
  background-repeat: no-repeat;
  background-size: 100% 0.72em;
  background-position: 0 58%;
  padding: 0 0.12em;
  line-height: inherit;
  border-radius: 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: #111318;
}

.site-hero__lead {
  margin: 1.25rem auto 0;
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: 400;
  color: var(--w-text-muted);
}

.site-hero__actions {
  margin-top: 1.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
}

@media (min-width: 1024px) {
  .site-hero__copy {
    text-align: left;
  }

  .site-hero__eyebrow-wrap .w-eyebrow-rule {
    margin-left: 0;
    margin-right: 0;
  }

  .site-hero__lead {
    margin-left: 0;
    margin-right: 0;
  }

  .site-hero__actions {
    justify-content: flex-start;
  }
}

.site-hero__media {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Composed hero product illustration */
.site-hero__stage {
  position: relative;
  overflow: visible;
}

.site-hero__composition {
  position: relative;
  min-height: 0;
  overflow: visible;
  /*
   * Mobile: light pad so top-left callouts + bottom floats can hang past
   * the matrix edge without parking cards in empty space.
   */
  padding: 0.35rem 0.15rem 1.65rem;
}

@media (min-width: 768px) {
  .site-hero__composition {
    /*
     * Asymmetric: left pad anchors board + channel pills; extra right pad is an
     * empty hang track so callouts/VBS can sit further past the board without
     * shifting the matrix left edge or the media column.
     */
    padding: 0.75rem 3.25rem 1.5rem 2rem;
  }
}

@media (min-width: 1024px) {
  .site-hero__composition {
    /* Two-col media: keep left anchor; more right gutter for hang floats */
    padding: 0.65rem 3.5rem 1.5rem 1.75rem;
  }
}

/* Soft carbon wash behind the board — atmosphere, not a hard frame */
.site-hero__blob {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 6%;
  width: 92%;
  height: 88%;
  transform: translateX(-50%);
  border-radius: 42% 58% 48% 52% / 48% 42% 58% 52%;
  background:
    radial-gradient(circle at 48% 38%, rgba(32, 51, 64, 0.16), transparent 58%),
    radial-gradient(circle at 72% 68%, rgba(17, 19, 24, 0.08), transparent 62%),
    radial-gradient(circle at 30% 70%, rgba(220, 230, 74, 0.09), transparent 50%);
  filter: blur(3px);
  pointer-events: none;
}

.site-hero__board {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
}

@media (min-width: 768px) {
  /*
   * Board left-aligned in the content box; tight right margin so the board
   * can run a bit wider for 4 week cols without eating the float hang track.
   */
  .site-hero__board {
    width: calc(100% - 0.85rem);
    max-width: none;
    margin-right: 0.85rem;
    margin-left: 0;
  }
}

.site-hero__board .fui-matrix {
  width: 100%;
}

/*
 * Hero 4-col density: slightly tighter cells + smaller sm pills so four weeks
 * read clearly without becoming tiny.
 */
.site-hero__board .fui-matrix__cell {
  min-height: 3.05rem;
  padding: 0.28rem 0.26rem;
  gap: 0.22rem;
}

.site-hero__board .fui-matrix__cell .fui-stack {
  gap: 0.22rem;
}

.site-hero__board .fui-matrix__cell .fui-pill--sm {
  padding: 0.1rem 0.3rem 0.1rem 0.24rem;
  font-size: 0.5625rem; /* 9px — a touch under default sm (10px) */
  gap: 0.16rem;
  border-radius: 0.3125rem;
}

.site-hero__board .fui-matrix__cell .fui-pill--sm .fui-pill__icon svg {
  width: 0.55rem;
  height: 0.55rem;
}

.site-hero__board .fui-matrix__cell .fui-pill--sm .fui-pill__icon--fb svg {
  width: 0.58rem;
  height: 0.58rem;
}

.site-hero__board .fui-matrix__hd {
  padding: 0.45rem 0.28rem;
  font-size: 0.5625rem;
}

.site-hero__board .fui-matrix__title {
  font-size: 0.875rem;
}

.site-hero__board .fui-matrix__top {
  padding: 0.62rem 0.75rem;
}

.site-hero__board .fui-matrix__group {
  padding: 0.22rem 0.45rem;
  font-size: 0.5625rem;
}

@media (min-width: 1024px) {
  .site-hero__board .fui-matrix__cell {
    min-height: 3.25rem;
  }
}

@media (max-width: 520px) {
  .site-hero__board .fui-matrix > .fui-rail {
    display: none;
  }
}

/*
 * Stacked (mobile <768): calendar base + overlays
 *  · top-left  — vertical callout stack (Megan + Upcoming)
 *  · bottom    — larger channel pills LEFT · VBS message card RIGHT
 * Desktop (≥768) restores side hang positions (largely intact).
 */
.site-hero__float-msg {
  display: block;
  right: -0.1rem;
  bottom: -0.45rem;
  width: min(11.5rem, 49%);
  z-index: 4;
  filter: drop-shadow(0 14px 24px rgba(17, 19, 24, 0.26));
}

/* Tighter VBS paper on narrow stages so it overlays edges without dominating */
.site-hero__float-msg .fui-message {
  padding: 0.62rem 0.68rem;
  border-radius: 0.7rem;
}

.site-hero__float-msg .fui-message__title {
  font-size: 0.78rem;
}

.site-hero__float-msg .fui-message__media {
  margin-top: 0.35rem;
  gap: 0.3rem;
}

.site-hero__float-msg .fui-message__thumb {
  width: 2.15rem;
  height: 1.7rem;
}

.site-hero__float-msg .fui-message__copy {
  margin-top: 0.4rem;
  padding: 0.4rem 0.45rem;
  font-size: 0.625rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.site-hero__float-msg .fui-message__foot {
  margin-top: 0.5rem;
}

.site-hero__float-msg .fui-message__btn {
  padding: 0.28rem 0.6rem;
  font-size: 0.625rem;
}

.site-hero__float-msg .fui-assign {
  padding: 0.22rem 0.45rem 0.22rem 0.32rem;
  font-size: 0.625rem;
  gap: 0.25rem;
}

.site-hero__float-msg .fui-assign__icon {
  width: 0.85rem;
  height: 0.85rem;
}

.site-hero__float-msg .fui-assign__icon svg {
  width: 0.65rem;
  height: 0.65rem;
}

/* Hero VBS float only — slightly compact meta chips (practice untouched) */
.site-hero__float-msg .fui-message__meta {
  gap: 0.24rem;
  margin-top: 0.28rem;
}

.site-hero__float-msg .fui-tag {
  padding: 0.12rem 0.38rem;
  font-size: 0.625rem; /* 10px */
  line-height: 1.15;
  gap: 0.16rem;
}

.site-hero__float-msg .fui-status {
  padding: 0.12rem 0.38rem 0.12rem 0.3rem;
  font-size: 0.625rem;
  line-height: 1.15;
  gap: 0.24rem;
}

.site-hero__float-msg .fui-status--draft {
  border-style: dashed;
}

.site-hero__float-msg .fui-status__dot {
  width: 0.3rem;
  height: 0.3rem;
}

@media (min-width: 768px) {
  .site-hero__float-msg {
    /* Hang further past board right edge into composition right gutter */
    right: -1.5rem;
    bottom: -0.5rem;
    width: 15.5rem;
    filter: drop-shadow(0 16px 28px rgba(17, 19, 24, 0.28));
  }

  .site-hero__float-msg .fui-message {
    padding: 0.85rem 0.95rem;
    border-radius: 0.85rem;
  }

  .site-hero__float-msg .fui-message__title {
    font-size: 0.85rem;
  }

  .site-hero__float-msg .fui-message__media {
    margin-top: 0.45rem;
    gap: 0.4rem;
  }

  .site-hero__float-msg .fui-message__thumb {
    width: 2.55rem;
    height: 2rem;
  }

  .site-hero__float-msg .fui-message__copy {
    margin-top: 0.55rem;
    padding: 0.55rem 0.6rem;
    font-size: 0.7rem;
    line-height: 1.45;
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .site-hero__float-msg .fui-message__foot {
    margin-top: 0.7rem;
  }

  .site-hero__float-msg .fui-message__btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.6875rem;
  }

  .site-hero__float-msg .fui-assign {
    padding: 0.28rem 0.6rem 0.28rem 0.4rem;
    font-size: 0.6875rem;
    gap: 0.35rem;
  }

  .site-hero__float-msg .fui-assign__icon {
    width: 1rem;
    height: 1rem;
  }

  .site-hero__float-msg .fui-assign__icon svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .site-hero__float-msg .fui-message__meta {
    margin-top: 0.32rem;
  }
}

@media (min-width: 1024px) {
  .site-hero__float-msg {
    right: -2rem;
    width: 16rem;
  }
}

/* Mobile: larger channel/message pills, bottom-left of stage (left of VBS) */
.site-hero__float-pills {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.38rem;
  left: 0.05rem;
  /* Sit mid-height of the VBS card rather than flush on the stage floor */
  bottom: 0.75rem;
  top: auto;
  z-index: 3;
  max-width: min(10.25rem, 46%);
  filter: drop-shadow(0 12px 20px rgba(17, 19, 24, 0.22));
}

/* Bigger than matrix cell pills — mobile visual weight + touch scale */
.site-hero__float-pills .fui-pill {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.32rem 0.58rem 0.32rem 0.44rem;
  gap: 0.36rem;
  border-radius: 0.5rem;
  max-width: 100%;
}

.site-hero__float-pills .fui-pill__icon svg {
  width: 0.9rem;
  height: 0.9rem;
}

.site-hero__float-pills .fui-pill__icon--fb svg {
  width: 0.94rem;
  height: 0.94rem;
}

@media (min-width: 768px) {
  .site-hero__float-pills {
    gap: 0.5rem;
    left: 0;
    top: 3.5rem;
    bottom: auto;
    max-width: none;
    z-index: 2;
    /* Hero spotlight: pulled from product, scaled for legibility */
    filter: drop-shadow(0 14px 24px rgba(17, 19, 24, 0.26));
  }

  /* ~1.2× product pill — intentional hero readout, not accidental zoom */
  .site-hero__float-pills .fui-pill {
    font-size: 0.8125rem;
    padding: 0.28rem 0.55rem 0.28rem 0.42rem;
    gap: 0.34rem;
    border-radius: 0.5rem;
    max-width: none;
  }

  .site-hero__float-pills .fui-pill__icon svg {
    width: 0.88rem;
    height: 0.88rem;
  }

  .site-hero__float-pills .fui-pill__icon--fb svg {
    width: 0.92rem;
    height: 0.92rem;
  }
}

@media (min-width: 1024px) {
  .site-hero__float-pills {
    left: 0.15rem;
    top: 3.75rem;
  }

  .site-hero__float-pills .fui-pill {
    font-size: 0.875rem;
    padding: 0.32rem 0.62rem 0.32rem 0.48rem;
    gap: 0.38rem;
    border-radius: 0.5625rem;
  }

  .site-hero__float-pills .fui-pill__icon svg {
    width: 0.95rem;
    height: 0.95rem;
  }

  .site-hero__float-pills .fui-pill__icon--fb svg {
    width: 1rem;
    height: 1rem;
  }
}

/* Callouts: stacked top-left on mobile; column stack top-right on desktop */
.site-hero__callouts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  position: absolute;
  left: 0.12rem;
  right: auto;
  top: 0.3rem;
  bottom: auto;
  width: min(11.25rem, 58%);
  z-index: 5;
  pointer-events: none;
}

.site-hero__callouts > .site-hero__card {
  flex: none;
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  pointer-events: auto;
  transition:
    transform 140ms var(--w-ease),
    box-shadow 140ms var(--w-ease);
}

@media (hover: hover) and (pointer: fine) {
  .site-hero__callouts > .site-hero__card:hover {
    transform: translate3d(0, -2px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-hero__callouts > .site-hero__card {
    transition: none;
  }

  .site-hero__callouts > .site-hero__card:hover {
    transform: none;
  }
}

.site-hero__callouts .site-hero__card-body {
  font-size: 0.6875rem;
  line-height: 1.3;
}

.site-hero__callouts .site-hero__card-name,
.site-hero__callouts .site-hero__card-title {
  font-size: 0.7rem;
}

.site-hero__callouts .site-hero__card-time {
  font-size: 0.625rem;
}

.site-hero__callouts .site-hero__avatar {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.5625rem;
}

.site-hero__callouts .site-hero__icon-bubble {
  width: 1.5rem;
  height: 1.5rem;
}

.site-hero__callouts .site-hero__icon-bubble svg {
  width: 12px;
  height: 12px;
}

@media (min-width: 768px) {
  .site-hero__callouts {
    left: auto;
    /* Hang further past board right edge (top-right stack) */
    right: -1.25rem;
    top: 0.35rem;
    width: 12.75rem;
    gap: 0.65rem;
  }

  .site-hero__callouts > .site-hero__card {
    padding: 0.7rem 0.8rem;
  }

  .site-hero__callouts .site-hero__card-body {
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .site-hero__callouts .site-hero__card-name,
  .site-hero__callouts .site-hero__card-title {
    font-size: 0.75rem;
  }

  .site-hero__callouts .site-hero__card-time {
    font-size: 0.6875rem;
  }

  .site-hero__callouts .site-hero__avatar {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
  }

  .site-hero__callouts .site-hero__icon-bubble {
    width: 1.75rem;
    height: 1.75rem;
  }

  .site-hero__callouts .site-hero__icon-bubble svg {
    width: 14px;
    height: 14px;
  }
}

@media (min-width: 1024px) {
  .site-hero__callouts {
    top: 0.4rem;
    right: -1.75rem;
    width: 12.5rem;
  }
}

/* Calm first-paint presence — hierarchy via motion, not noise */
@keyframes site-hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Float layers: fade only — leave transform free for hover lift */
@keyframes site-hero-float-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.site-hero__copy {
  animation: site-hero-rise 0.75s var(--w-ease) both;
}

.site-hero__board {
  animation: site-hero-rise 0.75s 0.14s var(--w-ease) both;
}

.site-hero__float-pills {
  animation: site-hero-float-in 0.8s 0.28s var(--w-ease) both;
}

.site-hero__float-msg,
.site-hero__callouts {
  animation: site-hero-float-in 0.8s 0.38s var(--w-ease) both;
}

/*
 * Explicit float lifts.
 * - Entrance uses opacity-only keyframes so transform stays free for hover
 *   (site-hero-rise + fill:both previously locked translate on these nodes).
 * - Kit hover for these layers lives in fui.css (loads after; has
 *   the final compound selectors for VBS + the 3 enlarged channel pills).
 * - Matrix / board pills (.fui-matrix__cell .fui-pill) are intentionally untouched.
 */
/* (hero float hover: see fui.css .fui-float.site-hero__*) */

@media (prefers-reduced-motion: reduce) {
  .site-hero__copy,
  .site-hero__board,
  .site-hero__float-pills,
  .site-hero__float-msg,
  .site-hero__callouts {
    animation: none;
  }
}

/*
 * Mid/late-page entrance moments — opacity only (same calm vocabulary as hero
 * float layers). Avoid transform on [data-w-reveal]: several observed blocks
 * wrap position:sticky descendants (practice steps, etc.). A non-none transform
 * creates a containing block and breaks/jitters sticky during scroll.
 * Hidden only when JS enables .w-motion (no-JS / SEO: content stays visible).
 * One-time; powered by a tiny IntersectionObserver in site.js.
 */
html.w-motion [data-w-reveal] {
  opacity: 0;
  transition: opacity 0.75s var(--w-ease);
}

html.w-motion [data-w-reveal].is-in {
  opacity: 1;
}

/* Define object cards: grid observes once; children stagger slightly */
html.w-motion [data-w-reveal][data-w-reveal-stagger] {
  opacity: 1;
  transition: none;
}

html.w-motion [data-w-reveal][data-w-reveal-stagger] > .site-define__item {
  opacity: 0;
  transition: opacity 0.75s var(--w-ease);
}

html.w-motion [data-w-reveal][data-w-reveal-stagger].is-in > .site-define__item {
  opacity: 1;
}

html.w-motion [data-w-reveal][data-w-reveal-stagger].is-in > .site-define__item:nth-child(1) {
  transition-delay: 0ms;
}
html.w-motion [data-w-reveal][data-w-reveal-stagger].is-in > .site-define__item:nth-child(2) {
  transition-delay: 120ms;
}
html.w-motion [data-w-reveal][data-w-reveal-stagger].is-in > .site-define__item:nth-child(3) {
  transition-delay: 240ms;
}
html.w-motion [data-w-reveal][data-w-reveal-stagger].is-in > .site-define__item:nth-child(4) {
  transition-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  html.w-motion [data-w-reveal],
  html.w-motion [data-w-reveal][data-w-reveal-stagger] > .site-define__item {
    opacity: 1;
    transition: none;
  }

  html.w-motion [data-w-reveal][data-w-reveal-stagger].is-in > .site-define__item:nth-child(n) {
    transition-delay: 0ms;
  }
}

.site-hero__card {
  background: #fff;
  border: 1px solid var(--w-rule);
  border-radius: 0.75rem;
  padding: 0.7rem 0.8rem;
  box-shadow: 0 14px 30px -16px rgba(17, 19, 24, 0.35);
}

.site-hero__card--row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.site-hero__card--tight {
  align-items: center;
  padding: 0.65rem 0.8rem;
}

.site-hero__card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.site-hero__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--w-carbon);
  color: var(--w-paper);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
}

.site-hero__card-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--w-ink);
}

.site-hero__card-time {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--w-text-muted);
}

.site-hero__card-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--w-ink);
  line-height: 1.25;
}

.site-hero__card-body {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--w-carbon);
}

.site-hero__icon-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: rgba(220, 230, 74, 0.28);
  color: #8a9220;
}

.site-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.1rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #8a9220;
}

.site-hero__status-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 9999px;
  background: #a8b01c;
}

/*
 * Full-width trust strip under the two-column hero layout —
 * not nested under the product stage (keeps first viewport calmer).
 */
.site-hero__trust {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1.5rem;
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .site-hero__trust {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.65rem 1.75rem;
    padding-top: 0.5rem;
  }

  .site-hero__trust li {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.site-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--w-carbon);
}

.site-hero__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--w-carbon);
  color: var(--w-marker);
}

/* —— What it is (category education) —— */
/* Intro first, then dark object cards at bottom of section (no hero bridge). */
.site-define {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding: 5.5rem 1.5rem;
  color: var(--w-paper);
  /* Ink → carbon gradient (brand secondary dark) — no grid */
  background-color: var(--w-ink);
  background-image: linear-gradient(
    180deg,
    var(--w-ink) 0%,
    var(--w-ink) 42%,
    var(--w-carbon) 100%
  );
}

@media (min-width: 768px) {
  .site-define {
    padding: 6.75rem 1.5rem;
  }
}

.site-define__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  overflow: visible;
}

/* Product objects — sit after intro, on dark define surface */
.site-define__grid {
  position: relative;
  z-index: 1;
  margin-top: 3.75rem;
  margin-bottom: 0;
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .site-define__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.25rem;
  }
}

@media (min-width: 1024px) {
  .site-define__grid {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 4.25rem;
  }
}

/* Solid carbon cards on ink define — hairline only, no frosted glass */
.site-define__item {
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.2rem 1.3rem;
  background: var(--w-carbon);
  border: 1px solid rgba(245, 243, 239, 0.12);
  border-radius: 1rem;
  text-align: left;
  box-shadow: none;
}

/* Compact faux-UI stage above title — flat FUI scraps, full card width */
.site-define__visual {
  display: flex;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  min-height: 4.75rem;
  margin: 0 0 0.95rem;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.site-define__item-title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--w-paper);
}

.site-define__item-body {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(245, 243, 239, 0.62);
}

/* —— Campaigns: horizontal span bar + connected comm pills —— */
/* FUI pill chrome: ~7px / sm radius, filled + border dual chrome */
.w-def-camp {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}

.w-def-camp__span {
  display: block;
  width: 100%;
  height: 0.85rem;
  border-radius: 0.4375rem; /* match .fui-pill */
  /* Calmer top bar: soft marker paper wash, not full pop */
  background: #f0f3d4;
  border: 1px solid rgba(220, 230, 74, 0.45);
  box-shadow: 0 1px 0 rgba(17, 19, 24, 0.05);
}

.w-def-camp__comms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  padding-top: 0.55rem;
  gap: 0.4rem;
}

.w-def-camp__comm {
  position: relative;
  justify-self: center;
  width: 1.75rem;
  max-width: 100%;
  height: 1.15rem;
  border-radius: 0.375rem; /* match .fui-pill--sm */
  /* Loud marker energy: rich fill + true marker border */
  background: #e3eb6e;
  border: 1px solid var(--w-marker);
  box-shadow: 0 1px 0 rgba(17, 19, 24, 0.05);
}

/* Vertical stub from campaign bar down to each comm */
.w-def-camp__comm::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 0.55rem;
  background: rgba(245, 243, 239, 0.28);
  transform: translateX(-50%);
}

/* —— Content: three-slot cascade (doc + 2 photos), ~16:9 cards —— */
.w-def-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-left: 0.1rem;
}

.w-def-content__card {
  position: relative;
  flex: 0 0 auto;
  /* Larger stage fill (~55% wider / same 16:9) vs prior 3.35rem */
  width: 5.2rem;
  aspect-ratio: 16 / 9;
  border-radius: 0.4rem;
  border: 1px solid var(--w-rule);
  box-sizing: border-box;
}

/* Aligned L→R overlap (stack cascade, not scattered) — ~31% width step */
.w-def-content__card + .w-def-content__card {
  margin-left: -1.6rem;
}

.w-def-content__card:nth-child(1) { z-index: 3; }
.w-def-content__card:nth-child(2) { z-index: 2; }
.w-def-content__card:nth-child(3) { z-index: 1; }

/* Doc: pure-light plate — reads as document vs photo cards */
.w-def-content__doc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.4rem 0.48rem;
  background: var(--w-neutral-0);
}

.w-def-content__line {
  display: block;
  height: 0.18rem;
  width: 100%;
  border-radius: 2px;
  background: var(--w-neutral-200);
}

.w-def-content__line--mid {
  width: 82%;
  background: var(--w-neutral-150);
}

.w-def-content__line--short {
  width: 64%;
  background: var(--w-neutral-100);
}

.w-def-content__line--tiny {
  width: 44%;
  background: var(--w-neutral-50);
}

/* Photo: two-tone missing-image — sky + one shape gray (peaks + sun) */
.w-def-content__photo {
  --w-content-photo-sky: #e4e6e7;
  --w-content-photo-shape: #c5c9cb;
  overflow: hidden;
  background: var(--w-content-photo-sky);
}

/* Classic missing-image sun — solid circle, upper-right */
.w-def-content__sun {
  position: absolute;
  top: 0.22rem;
  right: 0.4rem;
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background: var(--w-content-photo-shape);
  z-index: 1;
}

/* Soft mountain geometry — same shape gray as sun */
.w-def-content__peak {
  position: absolute;
  bottom: 0;
  left: -8%;
  width: 68%;
  height: 58%;
  background: var(--w-content-photo-shape);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.w-def-content__peak--sm {
  left: auto;
  right: -4%;
  width: 52%;
  height: 42%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* —— Channels: single horizontal row, 6 tiles + add, 3 doubled brand colors —— */
/* A elevated carbon: FB+IG · B paper: Email+Text · C marker: Video+Bullhorn · + add */
.w-def-channels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.35rem;
}

.w-def-channels__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  max-width: 2.35rem;
  aspect-ratio: 1;
  min-width: 0;
  height: auto;
  border-radius: 0.5rem;
  color: var(--w-paper);
  background: var(--w-carbon);
  border: 1px solid rgba(17, 19, 24, 0.35);
  box-sizing: border-box;
}

.w-def-channels__tile svg {
  width: 52%;
  height: 52%;
  max-width: 0.95rem;
  max-height: 0.95rem;
  display: block;
}

/* First tile (FB) slightly larger mark, same as prior fb tweak */
.w-def-channels__tile--a:first-child svg {
  width: 58%;
  height: 58%;
  max-width: 1.05rem;
  max-height: 1.05rem;
}

/* Pair A: softer elevated carbon (few steps lighter than card / --w-carbon)
   so monochrome icons read on dark define cards — still brand-flat, no FB/IG hue */
.w-def-channels__tile--a {
  background: #3a5262;
  border-color: rgba(245, 243, 239, 0.14);
  color: var(--w-paper);
}

.w-def-channels__tile--b {
  background: var(--w-paper);
  border-color: var(--w-rule);
  color: var(--w-carbon);
}

.w-def-channels__tile--c {
  background: var(--w-marker);
  border-color: #c8d03e;
  color: var(--w-ink);
}

/* Add tile: same size square, transparent fill, dashed paper border, “+” */
.w-def-channels__tile--add {
  background: transparent;
  border: 1.5px dashed rgba(245, 243, 239, 0.45);
  color: rgba(245, 243, 239, 0.72);
  font-family: "DM Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

/* —— Owners: larger avatar stack + status dropdown (one row) —— */
/* Avatar photos keep real color; chips / borders brand-only */
.w-def-owners {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
}

.w-def-owners__avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.w-def-owners__avatar {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid var(--w-ink);
  margin-left: -0.64rem;
  background: var(--w-carbon);
}

.w-def-owners__avatar:first-child {
  margin-left: 0;
}

.w-def-owners__avatar:nth-child(1) { z-index: 4; }
.w-def-owners__avatar:nth-child(2) { z-index: 3; }
.w-def-owners__avatar:nth-child(3) { z-index: 2; }
.w-def-owners__avatar:nth-child(4) { z-index: 1; }

.w-def-owners__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--w-ink);
  background: var(--w-marker);
  border-color: var(--w-ink);
}

.w-def-owners__status {
  flex-shrink: 0;
  min-width: 0;
}

.w-def-owners__select {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.32rem 0.45rem 0.32rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--w-paper);
  border: 1px solid var(--w-rule);
  font-family: "DM Sans", sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--w-carbon);
  white-space: nowrap;
}

/* Restrained info blue — status indicator only (~1.7× prior size) */
.w-def-owners__dot {
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  background: #5b8fd4;
}

.w-def-owners__select-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-def-owners__chevron {
  flex-shrink: 0;
  color: var(--w-text-muted);
  display: block;
}

.site-define__intro {
  display: grid;
  gap: 2rem;
  align-items: start;
  text-align: left;
}

@media (min-width: 900px) {
  .site-define__intro {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 3rem 3.5rem;
    align-items: center;
  }
}

.site-define__header {
  max-width: none;
  text-align: left;
}

.site-define__eyebrow {
  color: rgba(245, 243, 239, 0.55);
  margin: 0;
}

.site-define__header .w-eyebrow-rule {
  margin-bottom: 1.1rem;
}

.site-define__title {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 3.5vw, 2.85rem);
  color: var(--w-paper);
  text-align: left;
}

.site-define__lead {
  margin: 1.1rem 0 0;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(245, 243, 239, 0.68);
}

.site-define__lead strong {
  color: var(--w-paper);
  font-weight: 600;
}

/* Instead of / You get — stacked inside right column */
.site-define__contrast {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(245, 243, 239, 0.18);
  background: transparent;
  text-align: left;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.35);
}

.site-define__contrast-block {
  padding: 1.2rem 1.35rem;
}

/* Light panel so “Instead of” lifts off the dark section, not melts into it */
.site-define__contrast-block:first-child {
  background: var(--w-paper);
  border-bottom: 1px solid var(--w-rule);
}

.site-define__contrast-block:first-child .site-define__contrast-label {
  color: rgba(32, 51, 64, 0.55);
}

.site-define__contrast-block:first-child .site-define__contrast-from {
  color: var(--w-carbon);
}

/* Marker wash on the payoff half — the section’s signature yellow */
.site-define__contrast-block--marker {
  background: var(--w-marker);
  border-top: none;
}

.site-define__contrast-block--marker .site-define__contrast-label {
  color: rgba(17, 19, 24, 0.55);
}

.site-define__contrast-block--marker .site-define__contrast-to {
  color: var(--w-ink);
  font-weight: 500;
}

.site-define__contrast-label {
  margin: 0 0 0.4rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, 0.45);
}

.site-define__contrast-from,
.site-define__contrast-to {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.5;
}

.site-define__contrast-from {
  color: rgba(245, 243, 239, 0.55);
}

.site-define__contrast-to {
  color: var(--w-paper);
}

.site-define__close {
  margin: 3.25rem 0 0;
  max-width: 36rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--w-paper);
}

.site-define__close em {
  font-style: italic;
  color: var(--w-marker);
}

/* —— Video proof (videos only) —— */
/* Stay on paper, but ease the bottom edge into the next section wash */
.site-proof {
  position: relative;
  padding: 5.25rem 1.5rem 5.75rem;
  border-top: 1px solid var(--w-rule);
  background-color: var(--w-paper);
  background-image: linear-gradient(
    to bottom,
    var(--w-paper) 0%,
    var(--w-paper) 78%,
    var(--w-neutral-50) 100%
  );
}

@media (min-width: 768px) {
  .site-proof {
    padding: 6.5rem 1.5rem 7rem;
  }
}

.site-proof__inner {
  max-width: var(--w-container);
  margin: 0 auto;
}

.site-proof__header {
  max-width: none;
  width: 100%;
  margin-bottom: 3rem;
  text-align: left;
}

.site-proof__header .w-eyebrow {
  margin: 0;
  color: var(--w-carbon);
}

.site-proof__header .w-eyebrow-rule {
  margin-bottom: 1rem;
}

.site-proof__title {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 3.4vw, 2.85rem);
  color: var(--w-ink);
  text-align: left;
}

.site-proof__lead {
  margin: 0.85rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--w-carbon);
  opacity: 0.85;
  max-width: 32rem;
}

.site-proof__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--w-ink);
  line-height: 1.3;
}

.site-proof__church {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--w-carbon);
  opacity: 0.75;
}

.site-proof__videos {
  display: grid;
  gap: 2.25rem 1.35rem;
  justify-items: center;
}

.site-proof__video {
  min-width: 0;
  width: 100%;
  /* Stacked: large centered portrait; desktop trio keeps 17rem + start/center/end */
  max-width: min(100%, 22rem);
  margin-inline: auto;
  text-align: left;
}

@media (min-width: 768px) {
  .site-proof__videos {
    /*
     * Full container span: left video flush with section text, right flush
     * with container edge, middle centered — not a centered trio island.
     */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem clamp(1.5rem, 4vw, 3rem);
    justify-items: stretch;
  }

  .site-proof__video {
    max-width: 17rem;
    margin-inline: 0;
  }

  .site-proof__video:nth-child(1) {
    justify-self: start;
  }

  .site-proof__video:nth-child(2) {
    justify-self: center;
  }

  .site-proof__video:nth-child(3) {
    justify-self: end;
  }
}

.site-proof__video-poster {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(32, 51, 64, 0.2);
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 9 / 14;
  background: var(--w-carbon);
  cursor: pointer;
  transition: transform 140ms var(--w-ease), box-shadow 140ms var(--w-ease);
}

.site-proof__video-poster:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -18px rgba(32, 51, 64, 0.45);
}

.site-proof__video-poster:active {
  transform: scale(0.985);
}

.site-proof__video-poster:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--w-paper), 0 0 0 4px var(--w-marker),
    0 0 0 5px var(--w-ink);
}

.site-proof__video-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Soft vignette so the play control stays readable on light photos */
.site-proof__video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(17, 19, 24, 0.12) 0%,
    transparent 35%,
    transparent 55%,
    rgba(17, 19, 24, 0.35) 100%
  );
}

.site-proof__play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--w-marker);
  color: var(--w-ink);
  border: 2px solid var(--w-ink);
  box-shadow: 0 8px 20px -8px rgba(17, 19, 24, 0.45);
  pointer-events: none;
}

.site-proof__play svg {
  margin-left: 2px;
}

.site-proof__video-meta {
  margin-top: 0.9rem;
  width: 100%;
  max-width: none;
  padding-left: 0.65rem;
  border-left: 3px solid var(--w-marker);
}

.site-proof__video-quote {
  margin: 0 0 0.75rem;
}

.site-proof__video-quote p {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--w-ink);
}

/* —— Product practice (mid-page) —— */
/*
 * After video proof: warm-neutral wash, then softens toward paper.
 * Fine grid adds texture, not a hard stripe.
 */
.site-practice {
  position: relative;
  padding: 5.5rem 1.5rem 6rem;
  border-top: none; /* seam handled by gradients, not a second hairline */
  background-color: var(--w-neutral-50);
  background-image:
    linear-gradient(
      rgba(17, 19, 24, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17, 19, 24, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      var(--w-neutral-150) 0%,
      var(--w-neutral-50) 5.5rem,
      var(--w-neutral-50) 72%,
      var(--w-paper) 100%
    );
  background-size: 28px 28px, 28px 28px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
}

@media (min-width: 768px) {
  .site-practice {
    padding: 6.5rem 1.5rem 7rem;
  }
}

.site-practice__inner {
  max-width: var(--w-container);
  margin: 0 auto;
}

.site-practice__header {
  max-width: none;
  width: 100%;
  margin-bottom: 3.25rem;
  text-align: left;
}

.site-practice__header .w-eyebrow {
  margin: 0;
  color: var(--w-carbon);
}

.site-practice__header .w-eyebrow-rule {
  margin-bottom: 1rem;
}

.site-practice__title {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 3.4vw, 2.85rem);
  color: var(--w-ink);
  text-align: left;
}

.site-practice__lead {
  margin: 0.9rem 0 0;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--w-carbon);
  opacity: 0.88;
}

.site-practice__layout {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

@media (min-width: 960px) {
  .site-practice__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: 3rem;
  }
}

/* Faux-UI stage (replaces product screenshot) */
.site-practice__shot {
  min-width: 0;
  width: 100%;
}

.site-practice__stage {
  position: relative;
  width: 100%;
}

.site-practice__composition {
  position: relative;
  width: 100%;
  min-height: 20rem;
  /* Extra bottom room so the notify float can pin over the matrix edge */
  padding: 0.25rem 0 2.75rem;
}

@media (min-width: 960px) {
  .site-practice__composition {
    min-height: 24rem;
    padding: 0.5rem 0.75rem 2rem 0;
  }
}

.site-practice__blob {
  position: absolute;
  z-index: 0;
  left: -4%;
  top: 12%;
  width: 78%;
  height: 72%;
  border-radius: 48% 52% 55% 45% / 52% 48% 52% 48%;
  background:
    radial-gradient(circle at 55% 35%, rgba(32, 51, 64, 0.09), transparent 58%),
    radial-gradient(circle at 30% 70%, rgba(220, 230, 74, 0.22), transparent 55%);
  filter: blur(2px);
  pointer-events: none;
}

.site-practice__board {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 36rem;
}

.site-practice__board .fui-matrix {
  width: 100%;
}

/* Tighter matrix in the practice column — half-width at desktop */
.site-practice__board .fui-matrix__top {
  padding: 0.65rem 0.8rem;
}

.site-practice__board .fui-matrix__title {
  font-size: 0.875rem;
}

.site-practice__board .fui-matrix__cell {
  min-height: 3rem;
  padding: 0.3rem;
}

.site-practice__board .fui-matrix__hd {
  padding: 0.45rem 0.35rem;
  font-size: 0.575rem;
}

.site-practice__board .fui-matrix__group {
  padding: 0.2rem 0.45rem;
  font-size: 0.6rem;
}

@media (min-width: 960px) {
  .site-practice__board {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .site-practice__board .fui-matrix > .fui-rail {
    display: none;
  }
}

/* Notifications float — same corner slot as former Fall Kickoff email card */
.site-practice__float-msg {
  left: 0.35rem;
  right: 0.35rem;
  bottom: -0.35rem;
  width: auto;
  max-width: 16.5rem;
  z-index: 4;
  filter: drop-shadow(0 10px 18px rgba(17, 19, 24, 0.16));
}

@media (min-width: 520px) {
  .site-practice__float-msg {
    left: auto;
    right: 0.15rem;
    bottom: 0.15rem;
    width: 14.25rem;
    max-width: none;
  }
}

@media (min-width: 960px) {
  .site-practice__float-msg {
    right: -0.15rem;
    bottom: 0.35rem;
    width: 15.25rem;
  }
}

.site-practice__float-chip {
  display: none;
}

@media (min-width: 960px) {
  .site-practice__float-chip {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    left: 3.5rem;
    top: 0.35rem;
    z-index: 3;
    padding: 0.4rem 0.55rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid var(--w-rule);
    box-shadow: 0 10px 22px -14px rgba(17, 19, 24, 0.28);
  }
}

.site-practice__chip-label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--w-carbon);
  white-space: nowrap;
}

.site-practice__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Sticky step list while the FUI board scrolls past (FAQ sticky feel) */
@media (min-width: 960px) {
  .site-practice__steps {
    position: sticky;
    top: 5.5rem;
    align-self: start;
  }
}

.site-practice__steps li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--w-rule);
  text-align: left;
}

.site-practice__steps li:first-child {
  border-top: 1px solid var(--w-rule);
}

.site-practice__step-num {
  display: inline-block;
  width: fit-content;
  margin-top: 0.15rem;
  padding: 0 0 0.2rem;
  border-bottom: 1.5px solid var(--w-carbon);
  background: none;
  border-radius: 0;
  color: var(--w-carbon);
  font-family: "DM Sans", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.site-practice__step-title {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  color: var(--w-ink);
}

.site-practice__steps p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--w-carbon);
  opacity: 0.88;
}

/* Compact notification float card — line-formatted, flat paper FUI */
.w-notify {
  width: 100%;
  background: #fff;
  border: 1px solid var(--fui-rule, #d8dde3);
  border-radius: 0.65rem;
  padding: 0.55rem 0.65rem 0.5rem;
  color: var(--w-ink);
  box-shadow: 0 12px 24px -16px rgba(17, 19, 24, 0.28);
  text-align: left;
}

.w-notify__title {
  margin: 0 0 0.4rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w-carbon);
  opacity: 0.72;
}

.w-notify__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.w-notify__row {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.32rem 0;
  border-top: 1px solid rgba(17, 19, 24, 0.08);
  min-width: 0;
}

.w-notify__row:first-child {
  border-top: 0;
  padding-top: 0.1rem;
}

.w-notify__glyph {
  font-family: "DM Sans", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--w-carbon);
  opacity: 0.55;
  text-align: center;
}

.w-notify__row:first-child .w-notify__glyph {
  color: var(--w-ink);
  opacity: 0.85;
}

.w-notify__line {
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--w-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-notify__time {
  font-family: "DM Sans", sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--w-carbon);
  opacity: 0.55;
  white-space: nowrap;
  flex-shrink: 0;
}

/* —— Capabilities (three product beats) —— */
/*
 * Sits after practice (which softens to paper) and before the ink convert CTA.
 * Warm neutral wash + hairline top seam so two paper sections don’t bleed.
 * Marker used once in the section header only.
 */
.site-cap {
  position: relative;
  padding: 5.5rem 1.5rem 6rem;
  background-color: var(--w-paper);
  background-image:
    linear-gradient(
      to bottom,
      var(--w-neutral-100) 0%,
      var(--w-paper) 4.5rem,
      var(--w-paper) 88%,
      var(--w-neutral-50) 100%
    );
  border-top: 1px solid var(--w-neutral-150);
}

@media (min-width: 768px) {
  .site-cap {
    padding: 6.5rem 1.5rem 7rem;
  }
}

.site-cap__inner {
  max-width: var(--w-container);
  margin: 0 auto;
}

.site-cap__header {
  max-width: none;
  width: 100%;
  margin-bottom: 3.5rem;
  text-align: left;
}

.site-cap__header .w-eyebrow {
  margin: 0;
  color: var(--w-carbon);
}

.site-cap__header .w-eyebrow-rule {
  margin-bottom: 1rem;
}

.site-cap__title {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 3.4vw, 2.85rem);
  color: var(--w-ink);
  text-align: left;
}

.site-cap__lead {
  margin: 0.9rem 0 0;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--w-carbon);
  opacity: 0.88;
}

/*
 * Beats system: numbered carbon markers + continuous left spine,
 * each beat’s copy + FUI sharing one plinth so they read as a unit.
 */
.site-cap__beats {
  --cap-rail-x: 1.1rem; /* centerline of number circle / spine */
  --cap-num-size: 2.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Full --w-container width (via .site-cap__inner) */
  width: 100%;
}

/* Continuous hairline spine through the three beats */
.site-cap__beats::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  bottom: 1.1rem;
  left: var(--cap-rail-x);
  width: 1px;
  background: var(--w-neutral-200);
  transform: translateX(-0.5px);
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 768px) {
  .site-cap__beats {
    --cap-rail-x: 1.25rem;
    --cap-num-size: 2.5rem;
    gap: 1.75rem;
  }
}

.site-cap__beat {
  position: relative;
  display: grid;
  grid-template-columns: var(--cap-num-size) minmax(0, 1fr);
  gap: 0.85rem 1rem;
  align-items: start;
  text-align: left;
  z-index: 1;
}

@media (min-width: 768px) {
  .site-cap__beat {
    gap: 1rem 1.35rem;
  }
}

.site-cap__num {
  display: grid;
  place-items: center;
  width: var(--cap-num-size);
  height: var(--cap-num-size);
  margin-top: 1.15rem; /* align with plinth padding + title baseline */
  border-radius: 9999px;
  background: var(--w-carbon);
  color: var(--w-paper);
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  box-shadow: 0 0 0 4px var(--w-paper); /* break spine through the circle */
  flex-shrink: 0;
  z-index: 1;
}

@media (min-width: 768px) {
  .site-cap__num {
    margin-top: 1.35rem;
    font-size: 0.75rem;
  }
}

/* Shared surface: copy + FUI as one unit */
.site-cap__plinth {
  display: grid;
  gap: 1.25rem;
  align-items: start;
  min-width: 0;
  padding: 1.15rem 1.15rem 1.25rem;
  background: var(--w-neutral-0);
  border: 1px solid var(--w-neutral-150);
  border-radius: 1rem; /* 16px */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

@media (min-width: 640px) {
  .site-cap__plinth {
    padding: 1.35rem 1.4rem 1.45rem;
    border-radius: 1.125rem; /* 18px */
  }
}

@media (min-width: 900px) {
  .site-cap__plinth {
    /* copy | UI — UI-dominant (same split as Campaign / Assignments) */
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 1.5rem 1.75rem; /* tighter pairing than prior 2.75rem free float */
    padding: 1.5rem 1.55rem 1.55rem;
    border-radius: 1.25rem; /* 20px */
    align-items: start; /* title baseline near top of visual */
  }

  /* Flip puts visual in track 1 via order — reverse fr so UI stays larger */
  .site-cap__beat--flip .site-cap__plinth {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  .site-cap__beat--flip .site-cap__copy {
    order: 2;
  }

  .site-cap__beat--flip .site-cap__visual {
    order: 1;
  }
}

.site-cap__copy {
  min-width: 0;
  padding-top: 0.15rem; /* nudge title to FUI top edge */
}

.site-cap__beat-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  color: var(--w-ink);
}

.site-cap__beat-body {
  margin: 0.65rem 0 0;
  max-width: 26rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--w-carbon);
  opacity: 0.9;
}

.site-cap__visual {
  min-width: 0;
  width: 100%;
}

/* —— Cap FUI: campaign brief / hub —— */
.site-cap__fui--campaigns {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-cap__brief {
  background: #fff;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  /* Soft lift only — plinth is the shared unit, not competing shadows */
  box-shadow: 0 8px 20px -12px rgba(17, 19, 24, 0.18);
  text-align: left;
}

/* Browser-style carbon chrome — same as hero calendar left rail */
.site-cap__brief::before {
  content: "";
  display: block;
  height: 1.25rem;
  background-color: var(--w-carbon);
  background-image:
    radial-gradient(circle, rgba(245, 243, 239, 0.55) 1.35px, transparent 1.5px),
    radial-gradient(circle, rgba(245, 243, 239, 0.45) 1.35px, transparent 1.5px),
    radial-gradient(circle, rgba(245, 243, 239, 0.35) 1.35px, transparent 1.5px);
  background-size: 7px 7px;
  background-position: 0.7rem 50%, 1.25rem 50%, 1.8rem 50%;
  background-repeat: no-repeat;
}

/* Header strip */
.site-cap__brief-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.9rem 1rem 0.85rem;
  border-bottom: 1px solid var(--w-rule);
  background: var(--w-paper);
}

.site-cap__brief-head-main {
  min-width: 0;
  flex: 1 1 10rem;
}

.site-cap__brief-kicker {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w-text-muted);
}

.site-cap__brief-name {
  margin: 0.28rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--w-ink);
}

.site-cap__brief-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.35rem;
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--w-text-muted);
  line-height: 1.3;
}

.site-cap__brief-cal {
  display: inline-flex;
  color: var(--w-carbon);
  opacity: 0.7;
  line-height: 0;
}

.site-cap__brief-cal svg {
  width: 0.7rem;
  height: 0.7rem;
  display: block;
}

.site-cap__brief-dot {
  opacity: 0.55;
}

.site-cap__brief-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Brief body: fields | assets + links */
.site-cap__brief-body {
  display: grid;
  gap: 0.9rem;
  padding: 0.85rem 1rem 0.85rem;
}

@media (min-width: 520px) {
  .site-cap__brief-body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0.85rem 1.1rem;
    align-items: start;
  }
}

.site-cap__brief-fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.site-cap__brief-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.site-cap__brief-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-text-muted);
  line-height: 1.2;
}

.site-cap__brief-value {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--w-carbon);
}

.site-cap__brief-value--clip {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.site-cap__brief-links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.site-cap__brief-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--w-ink);
}

.site-cap__brief-link-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: var(--w-ink);
  display: inline-flex;
}

.site-cap__brief-link-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Side column: assets + links (links replace old slim schedule) */
.site-cap__brief-side {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.site-cap__brief-assets {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.85fr;
  gap: 0.35rem;
  min-height: 3.4rem;
}

.site-cap__brief-asset {
  position: relative;
  display: block;
  min-height: 3.4rem;
  border-radius: 0.375rem;
  border: 1px solid var(--w-rule);
  overflow: hidden;
  background: var(--w-neutral-50);
}

.site-cap__brief-asset--a {
  background: #e8e4db;
}

.site-cap__brief-asset--b {
  background: #dfe8e2;
}

.site-cap__brief-asset--c {
  background: #e7e2f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
}

/* Soft landscape placeholders (match define content visual language) */
.site-cap__brief-asset-sun {
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: rgba(17, 19, 24, 0.12);
}

.site-cap__brief-asset-peak {
  position: absolute;
  left: -10%;
  bottom: 0;
  width: 70%;
  height: 55%;
  background: rgba(32, 51, 64, 0.12);
  clip-path: polygon(0 100%, 50% 12%, 100% 100%);
}

.site-cap__brief-asset-peak--sm {
  left: auto;
  right: -8%;
  width: 55%;
  height: 42%;
  background: rgba(32, 51, 64, 0.09);
  clip-path: polygon(0 100%, 45% 28%, 100% 100%);
}

.site-cap__brief-asset-lines {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  width: 100%;
}

.site-cap__brief-asset-lines span {
  display: block;
  height: 0.28rem;
  border-radius: 9999px;
  background: rgba(53, 36, 80, 0.14);
}

.site-cap__brief-asset-lines span:nth-child(1) { width: 92%; }
.site-cap__brief-asset-lines span:nth-child(2) { width: 70%; }
.site-cap__brief-asset-lines span:nth-child(3) { width: 48%; }

/*
 * Full-width mini 2-week calendar under brief body
 * Sun-start columns; Sun + Sat slightly darker wash
 */
.site-cap__brief-minical {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--w-rule);
  background: #fff;
  min-width: 0;
}

.site-cap__brief-minical-head,
.site-cap__brief-minical-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
}

.site-cap__brief-minical-dow {
  padding: 0.4rem 0.2rem 0.35rem;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--w-text-muted);
  line-height: 1.2;
  border-bottom: 1px solid var(--w-rule);
  background: var(--w-paper);
}

.site-cap__brief-minical-dow--weekend {
  background: var(--w-neutral-50);
  color: var(--w-carbon);
}

.site-cap__brief-minical-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.18rem;
  min-width: 0;
  min-height: 2.85rem;
  padding: 0.28rem 0.22rem 0.32rem;
  border-right: 1px solid var(--w-rule);
  border-bottom: 1px solid var(--w-rule);
  background: #fff;
  overflow: hidden;
}

.site-cap__brief-minical-cell:nth-child(7n) {
  border-right: none;
}

.site-cap__brief-minical-week:last-child .site-cap__brief-minical-cell {
  border-bottom: none;
}

.site-cap__brief-minical-cell--weekend {
  background: var(--w-neutral-50);
}

.site-cap__brief-minical-day {
  display: block;
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--w-text-muted);
  font-variant-numeric: tabular-nums;
  padding-left: 0.08rem;
}

.site-cap__brief-minical-cell .fui-pill {
  max-width: 100%;
  min-width: 0;
  width: 100%;
  box-shadow: none;
}

/* Tiny pills so many fit in narrow day cells without spilling */
.site-cap__brief-minical-cell .fui-pill--sm {
  padding: 0.08rem 0.22rem 0.08rem 0.18rem;
  font-size: 0.5625rem;
  gap: 0.14rem;
  border-radius: 0.3rem;
}

.site-cap__brief-minical-cell .fui-pill--sm .fui-pill__icon svg {
  width: 0.52rem;
  height: 0.52rem;
}

.site-cap__brief-minical-cell .fui-pill--sm .fui-pill__icon--fb svg {
  width: 0.56rem;
  height: 0.56rem;
}

@media (max-width: 420px) {
  .site-cap__brief-minical-cell {
    min-height: 2.55rem;
    padding: 0.22rem 0.12rem 0.26rem;
  }

  .site-cap__brief-minical-cell .fui-pill--sm .fui-pill__icon {
    display: none;
  }

  .site-cap__brief-minical-cell .fui-pill--sm {
    padding: 0.08rem 0.16rem;
    justify-content: center;
  }
}

/* —— Cap FUI: matrix scrap (legacy; practice board uses matrix-calendar) —— */
.site-cap__matrix {
  width: 100%;
  max-width: 100%;
}

.site-cap__matrix .fui-matrix__top {
  padding: 0.65rem 0.8rem;
}

.site-cap__matrix .fui-matrix__title {
  font-size: 0.8125rem;
}

.site-cap__matrix .fui-matrix__cell {
  min-height: 3.1rem;
  padding: 0.32rem;
}

.site-cap__matrix .fui-matrix__hd {
  padding: 0.45rem 0.35rem;
  font-size: 0.575rem;
}

.site-cap__matrix .fui-matrix__group {
  padding: 0.2rem 0.45rem;
  font-size: 0.6rem;
}

/* —— Cap FUI: mentions (thread scrap + assign | notify split) —— */
.site-cap__fui--mentions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.site-cap__mention {
  background: #fff;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 0.65rem;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 6px 16px -12px rgba(17, 19, 24, 0.16);
}

.site-cap__mention-head {
  padding: 0.7rem 0.8rem 0.65rem;
  border-bottom: 1px solid var(--w-rule);
  background: var(--w-paper);
}

.site-cap__mention-kicker {
  margin: 0;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w-text-muted);
}

.site-cap__mention-title {
  margin: 0.25rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--w-ink);
  line-height: 1.2;
}

.site-cap__mention-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.site-cap__thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.site-cap__thread-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--w-rule);
  align-items: start;
}

.site-cap__thread-row:last-child {
  border-bottom: 0;
}

.site-cap__thread-row--you {
  background: rgba(220, 230, 74, 0.08);
}

.site-cap__thread-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: #eef1f4;
  border: 1px solid #dde3e8;
  color: var(--w-carbon);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
}

.site-cap__thread-avatar--you {
  background: var(--w-carbon);
  border-color: var(--w-carbon);
  color: var(--w-marker);
  font-size: 0.5rem;
}

.site-cap__thread-body {
  min-width: 0;
}

.site-cap__thread-who {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--w-text-muted);
  line-height: 1.3;
}

.site-cap__thread-who strong {
  font-weight: 600;
  color: var(--w-ink);
}

.site-cap__thread-text {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--w-carbon);
}

.site-cap__at {
  font-weight: 600;
  color: var(--w-ink);
  background: rgba(220, 230, 74, 0.35);
  padding: 0.05rem 0.25rem;
  border-radius: 0.2rem;
}

/* Bottom row: Assignments | Notifications */
.site-cap__mention-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  min-width: 0;
}

@media (min-width: 420px) {
  .site-cap__mention-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: stretch;
  }
}

.site-cap__mention-panel {
  background: #fff;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 0.65rem;
  padding: 0.55rem 0.6rem 0.55rem;
  text-align: left;
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px -10px rgba(17, 19, 24, 0.14);
}

/* Notifications: light body, dark header + ink bullet dots for intentional weight */
.site-cap__mention-panel--notify {
  padding: 0;
  overflow: hidden;
  background: var(--w-neutral-0);
  border-color: rgba(17, 19, 24, 0.1);
  box-shadow: 0 4px 12px -10px rgba(17, 19, 24, 0.14);
}

.site-cap__mention-panel--notify .site-cap__mention-panel-label {
  margin: 0;
  padding: 0.48rem 0.65rem;
  background: var(--w-carbon);
  color: var(--w-paper);
  letter-spacing: 0.08em;
}

.site-cap__mention-panel--notify .site-cap__notify-list {
  padding: 0.35rem 0.55rem 0.5rem;
}

.site-cap__mention-panel-label {
  margin: 0 0 0.4rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-text-muted);
  flex-shrink: 0;
}

/* Mini assignment scraps — not full owners rows */
.site-cap__assign-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.site-cap__assign-card {
  margin: 0;
  padding: 0.4rem 0.45rem;
  background: var(--w-paper);
  border: 1px solid var(--w-rule);
  border-radius: 0.4rem;
  min-width: 0;
}

.site-cap__assign-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--w-ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-cap__assign-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.28rem;
}

.site-cap__fui--mentions .site-cap__assign-meta .fui-tag,
.site-cap__fui--mentions .site-cap__assign-meta .fui-status {
  font-size: 0.55rem;
  padding: 0.12rem 0.35rem;
  line-height: 1.2;
}

.site-cap__fui--mentions .site-cap__assign-meta .fui-status__dot {
  width: 0.3rem;
  height: 0.3rem;
}

/* Soft filled assignment progress on mini cards (same language as beat 03) */
.site-cap__fui--mentions .site-cap__assign-meta .fui-status--received {
  background: #eef1f4;
  border-color: #d5dae0;
  color: #3a4550;
}

.site-cap__fui--mentions .site-cap__assign-meta .fui-status--progress {
  background: #fdf3d0;
  border-color: #e0c24a;
  color: #5c4e0a;
}

.site-cap__fui--mentions .site-cap__assign-meta .fui-status--hold {
  background: #f8e4e4;
  border-color: #d07070;
  color: #5a2424;
}

.site-cap__fui--mentions .site-cap__assign-meta .fui-status--complete {
  background: #dcefe6;
  border-color: #5aaa80;
  color: #164a30;
}

/* Compact notification lines (practice notify language) */
.site-cap__notify-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.site-cap__notify-row {
  display: grid;
  grid-template-columns: 0.65rem minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.35rem 0;
  border-top: 1px solid rgba(17, 19, 24, 0.08);
  min-width: 0;
}

.site-cap__notify-row:first-child {
  border-top: 0;
  padding-top: 0.15rem;
}

/* Medium-neutral bullet — brand greys, not full ink */
.site-cap__notify-glyph {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--w-carbon) 45%, var(--w-neutral-200) 55%);
  flex-shrink: 0;
  justify-self: center;
  font-size: 0;
  line-height: 0;
  opacity: 1;
  color: transparent;
}

.site-cap__notify-row:first-child .site-cap__notify-glyph {
  background: color-mix(in srgb, var(--w-carbon) 45%, var(--w-neutral-200) 55%);
  opacity: 1;
  color: transparent;
}

.site-cap__notify-line {
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--w-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-cap__notify-time {
  font-size: 0.55rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--w-carbon);
  opacity: 0.55;
  white-space: nowrap;
  flex-shrink: 0;
}

/* —— Cap FUI: status + owners —— */
.site-cap__fui--status {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.site-cap__pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.45rem;
  padding: 0.75rem 0.9rem;
  background: var(--w-paper);
  border: 1px solid rgba(17, 19, 24, 0.08);
  border-radius: 0.65rem;
  box-shadow: none;
}

.site-cap__pipeline-arrow {
  font-size: 0.75rem;
  color: rgba(17, 19, 24, 0.28);
  line-height: 1;
  font-weight: 600;
}

/*
 * Pipeline chips carry the dark/color weight for this beat —
 * each status owns a soft filled face (not a decorative border).
 */
.site-cap__pipeline .fui-status {
  padding: 0.32rem 0.65rem 0.32rem 0.5rem;
  border-width: 1px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(17, 19, 24, 0.04);
}

.site-cap__pipeline .fui-status--received {
  background: #e4e8ec;
  border-color: #c5cdd4;
  color: #2a333c;
}

.site-cap__pipeline .fui-status--progress {
  background: #f5e6a8;
  border-color: #d4b73a;
  color: #4a3f08;
}

.site-cap__pipeline .fui-status--hold {
  background: #f0c9c9;
  border-color: #c44b4b;
  color: #5a1f1f;
}

.site-cap__pipeline .fui-status--complete {
  background: #bfe3d0;
  border-color: #2f9b63;
  color: #0f3d28;
}

.site-cap__pipeline .fui-status--received .fui-status__dot { background: #5a6570; }
.site-cap__pipeline .fui-status--progress .fui-status__dot { background: #8a7000; }
.site-cap__pipeline .fui-status--hold .fui-status__dot { background: #a03030; }
.site-cap__pipeline .fui-status--complete .fui-status__dot { background: #1f6b45; }

.site-cap__owners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-cap__owner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.75rem 0.9rem;
  background: #fff;
  border: 1px solid rgba(17, 19, 24, 0.1);
  border-radius: 0.65rem;
  box-shadow: 0 4px 12px -10px rgba(17, 19, 24, 0.12);
  text-align: left;
}

/* Match pipeline language on assignment rows (softer than pipeline bar) */
.site-cap__owners .fui-status--received {
  background: #eef1f4;
  border-color: #d5dae0;
  color: #3a4550;
}

.site-cap__owners .fui-status--progress {
  background: #fdf3d0;
  border-color: #e0c24a;
  color: #5c4e0a;
}

.site-cap__owners .fui-status--hold {
  background: #f8e4e4;
  border-color: #d07070;
  color: #5a2424;
}

.site-cap__owners .fui-status--complete {
  background: #dcefe6;
  border-color: #5aaa80;
  color: #164a30;
}

.site-cap__owner-main {
  min-width: 0;
  flex: 1 1 12rem;
}

.site-cap__owner-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--w-ink);
  line-height: 1.3;
}

.site-cap__owner-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

/*
 * Primary convert band: recognition + convert after capabilities.
 * Solid ink with real vertical mass — not a thin strip. Paper voices below.
 * Single marker button — no mark highlight, no dual yellow. No “memory” copy.
 */
.site-cta {
  position: relative;
  padding: 6rem 1.5rem 6.25rem;
  color: var(--w-paper);
  background-color: var(--w-ink);
  /* Paper-alpha hairline grid (hero language, dark) over ink→carbon fill */
  background-image:
    linear-gradient(rgba(245, 243, 239, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 243, 239, 0.04) 1px, transparent 1px),
    radial-gradient(ellipse 80% 55% at 12% 0%, rgba(32, 51, 64, 0.55), transparent 55%),
    linear-gradient(180deg, var(--w-ink) 0%, #14171d 55%, var(--w-ink) 100%);
  background-size: 28px 28px, 28px 28px, auto, auto;
  border-top: 1px solid var(--w-neutral-150);
  box-shadow: inset 0 1px 0 rgba(245, 243, 239, 0.06);
}

@media (min-width: 768px) {
  .site-cta {
    padding: 7.25rem 1.5rem 7.5rem;
  }
}

.site-cta__inner {
  max-width: var(--w-container);
  margin: 0 auto;
}

.site-cta__copy {
  max-width: none;
  width: 100%;
  text-align: left;
}

/* Hallway recognition — lead-in above convert H2, not a second slogan stack */
.site-cta__recognize {
  margin: 0 0 1.15rem;
  max-width: 34rem;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: rgba(245, 243, 239, 0.55);
}

.site-cta__title {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.1rem, 3.5vw, 2.85rem);
  color: var(--w-paper);
  text-align: left;
}

.site-cta__lead {
  margin: 1.15rem 0 0;
  max-width: 32rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(245, 243, 239, 0.68);
}

.site-cta__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
}

/* Soften focus ring paper halo on dark ink surface */
.site-cta a:focus-visible {
  box-shadow: 0 0 0 2px var(--w-ink), 0 0 0 4px var(--w-marker),
    0 0 0 5px var(--w-paper);
}

/* —— Written voices —— */
/*
 * Paper trust band. Launch: static 3-up grid (--static).
 * Carousel track/controls kept below for when more quotes return.
 */
.site-voices {
  --voices-gap: 1.15rem;
  /* Divisor so ~22% of the next card peeks (N full slots + 0.22) */
  --voices-slots: 1.22;
  padding: 6.5rem 1.5rem 6.5rem;
  color: var(--w-ink);
  background-color: var(--w-paper);
  background-image: linear-gradient(
    to bottom,
    var(--w-neutral-50) 0%,
    var(--w-paper) 4rem,
    var(--w-paper) 100%
  );
  border-top: 1px solid var(--w-rule);
}

/* Launch: three quotes, no carousel chrome */
.site-voices--static .site-voices__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--voices-gap);
}

@media (min-width: 900px) {
  .site-voices--static .site-voices__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site-voices--static .site-voices__card {
  flex: none;
  width: auto;
  height: 100%;
}

@media (min-width: 768px) {
  .site-voices {
    padding: 7.5rem 1.5rem 7.5rem;
  }
}

.site-voices__inner {
  max-width: var(--w-container);
  margin: 0 auto;
}

.site-voices__header {
  max-width: none;
  width: 100%;
  text-align: left;
  margin-bottom: 3rem;
}

.site-voices__eyebrow {
  margin: 0;
  color: var(--w-carbon);
}

.site-voices__header .w-eyebrow-rule {
  margin-bottom: 1rem;
}

.site-voices__title {
  margin: 0;
  max-width: none;
  width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 3.4vw, 2.85rem);
  color: var(--w-ink);
  text-align: left;
}

.site-voices__carousel {
  position: relative;
}

.site-voices__stage {
  position: relative;
}

.site-voices__viewport {
  overflow: hidden;
  margin: 0 -0.2rem;
  padding: 0.35rem 0.2rem 0.5rem;
}

.site-voices__track {
  display: flex;
  gap: var(--voices-gap);
  transition: transform 650ms var(--w-ease);
  will-change: transform;
}

.site-voices__card {
  margin: 0;
  /* 1 card + ~22% peek of next */
  flex: 0 0 calc(100% / var(--voices-slots));
  min-width: 0;
  box-sizing: border-box;
  padding: 1.65rem 1.55rem 1.75rem;
  background: #fff;
  border: 1px solid var(--w-neutral-150);
  border-top: 3px solid var(--w-marker);
  border-radius: 1.125rem;
  box-shadow:
    0 18px 40px -22px rgba(17, 19, 24, 0.22),
    0 6px 14px -10px rgba(17, 19, 24, 0.08);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

@media (min-width: 640px) {
  .site-voices {
    --voices-slots: 2.22;
  }

  .site-voices__card {
    /* 2 cards + ~22% peek of next */
    flex: 0 0 calc((100% - var(--voices-gap)) / var(--voices-slots));
    padding: 1.75rem 1.65rem 1.85rem;
  }
}

@media (min-width: 960px) {
  .site-voices {
    --voices-slots: 3.22;
  }

  .site-voices__card {
    /* 3 cards + ~22% peek of next */
    flex: 0 0 calc((100% - (2 * var(--voices-gap))) / var(--voices-slots));
  }
}

/* Overlay arrows on the right (peek zone) */
.site-voices__controls {
  position: absolute;
  z-index: 2;
  right: 0.65rem;
  bottom: 1.25rem;
  display: flex;
  gap: 0.5rem;
  pointer-events: none;
}

.site-voices__nav {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  border: 2px solid var(--w-ink);
  background: var(--w-marker);
  color: var(--w-ink);
  cursor: pointer;
  box-shadow:
    0 8px 22px rgba(17, 19, 24, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.45) inset;
  transition: background-color 140ms var(--w-ease),
    border-color 140ms var(--w-ease), color 140ms var(--w-ease),
    transform 140ms var(--w-ease), box-shadow 140ms var(--w-ease),
    opacity 140ms var(--w-ease);
}

.site-voices__nav:hover:not(:disabled) {
  background: var(--w-ink);
  border-color: var(--w-ink);
  color: var(--w-paper);
  box-shadow:
    0 10px 26px rgba(17, 19, 24, 0.18),
    0 0 0 1px rgba(17, 19, 24, 0.06);
}

.site-voices__nav:active:not(:disabled) {
  transform: scale(0.97);
}

.site-voices__nav:focus-visible {
  outline: 2px solid var(--w-ink);
  outline-offset: 3px;
}

.site-voices__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.site-voices__person {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--w-rule);
}

.site-voices__avatar {
  flex-shrink: 0;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 2px solid var(--w-marker);
  object-fit: cover;
  object-position: center;
}

.site-voices__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--w-ink);
}

.site-voices__church {
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--w-text-muted);
}

.site-voices__text-cite {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--w-rule);
}

.site-voices__card blockquote {
  margin: 0;
}

.site-voices__card blockquote p {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--w-ink);
}

.site-voices__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
}

.site-voices__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--w-neutral-200);
  cursor: pointer;
  transition: background-color 140ms var(--w-ease), transform 140ms var(--w-ease);
}

.site-voices__dot.is-active {
  background: var(--w-marker);
  transform: scale(1.25);
}

.site-voices__status {
  margin: 0.95rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--w-text-muted);
}

/* —— FAQ (lean accordion after voices) —— */
/*
 * Late-page dark break: paper voices above, paper final CTA below.
 * Soft ink → carbon (not solid ink like primary CTA). One marker: eyebrow rule.
 * Same container / two-column desktop layout as before — only surface inverted.
 */
.site-faq {
  position: relative;
  padding: 5.5rem 1.5rem 6.5rem;
  color: var(--w-paper);
  border-top: 1px solid rgba(245, 243, 239, 0.08);
  box-shadow: inset 0 1px 0 rgba(245, 243, 239, 0.05);
  background-color: var(--w-ink);
  background-image: linear-gradient(
    165deg,
    var(--w-ink) 0%,
    #161a20 48%,
    var(--w-carbon) 100%
  );
}

@media (min-width: 768px) {
  .site-faq {
    padding: 6.5rem 1.5rem 7.5rem;
  }
}

.site-faq__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.site-faq__header {
  width: 100%;
  max-width: none;
  text-align: left;
  margin-bottom: 2.75rem;
}

.site-faq__header .w-eyebrow {
  color: rgba(245, 243, 239, 0.58);
}

.site-faq__header .w-eyebrow-rule {
  margin-left: 0;
  margin-right: 0;
  background: var(--w-marker);
}

@media (min-width: 768px) {
  .site-faq__header {
    margin-bottom: 3.25rem;
  }
}

.site-faq__title {
  margin: 0.85rem 0 0;
  max-width: none;
  width: 100%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 3.4vw, 2.85rem);
  color: var(--w-paper);
  text-align: left;
}

.site-faq__lead {
  margin: 0.85rem 0 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(245, 243, 239, 0.72);
  max-width: 32rem;
}

/* Full readable list width within the page frame */
.site-faq__list {
  width: 100%;
  max-width: 42rem;
  margin: 0;
}

@media (min-width: 900px) {
  .site-faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.22fr);
    gap: 2.75rem 3.5rem;
    align-items: start;
  }

  .site-faq__header {
    max-width: none;
    text-align: left;
    margin-bottom: 0;
    position: sticky;
    top: 5.5rem;
  }

  .site-faq__list {
    max-width: none;
  }
}

.site-faq__item {
  border-bottom: 1px solid rgba(245, 243, 239, 0.14);
}

.site-faq__item:first-child {
  border-top: 1px solid rgba(245, 243, 239, 0.14);
}

.site-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0.15rem 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: "DM Sans", sans-serif;
  font-size: 1.015rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--w-paper);
  border-radius: 0.25rem;
  transition: color 140ms var(--w-ease);
}

.site-faq__question::-webkit-details-marker {
  display: none;
}

.site-faq__question::marker {
  content: "";
}

.site-faq__question:hover {
  color: rgba(245, 243, 239, 0.88);
}

.site-faq__question:focus {
  outline: none;
}

.site-faq__question:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--w-ink), 0 0 0 4px var(--w-marker);
}

.site-faq__icon {
  flex-shrink: 0;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  color: rgba(245, 243, 239, 0.55);
  transition: color 140ms var(--w-ease), transform 140ms var(--w-ease);
}

/* Plus → minus via two hairlines */
.site-faq__icon::before,
.site-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
  transition: transform 140ms var(--w-ease), opacity 140ms var(--w-ease);
}

.site-faq__icon::before {
  width: 12px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.site-faq__icon::after {
  width: 1.5px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.site-faq__item[open] .site-faq__icon {
  color: var(--w-marker);
}

.site-faq__item[open] .site-faq__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

.site-faq__answer {
  padding: 0 1.75rem 1.25rem 0;
}

.site-faq__answer p {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.6;
  color: rgba(245, 243, 239, 0.7);
  max-width: 40rem;
}

/* —— Final CTA (paper; after dark FAQ) —— */
/*
 * Calm close after dark FAQ. Primary mid-page CTA uses ink + marker button;
 * this stays paper with a single marker control — no second yellow slab.
 * Left-aligned full-width title on the shared container measure.
 */
.site-final-cta {
  padding: 5rem 1.5rem 5.5rem;
  background-color: var(--w-paper);
  background-image:
    linear-gradient(
      to bottom,
      var(--w-neutral-50) 0%,
      var(--w-paper) 3.5rem,
      var(--w-paper) 100%
    );
  color: var(--w-ink);
  border-top: 1px solid var(--w-rule);
}

@media (min-width: 768px) {
  .site-final-cta {
    padding: 6.25rem 1.5rem 6.75rem;
  }
}

/*
 * Final CTA is title-primary (headline + one button only) — center the band.
 * H2 still spans full container width (no skinny max-width).
 */
.site-final-cta__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-final-cta__title {
  margin: 0;
  width: 100%;
  max-width: none;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 3.4vw, 2.85rem);
  color: var(--w-ink);
  text-align: center;
  text-wrap: balance;
}

.site-final-cta__actions {
  margin-top: 1.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem 1.25rem;
}

/* —— Site footer (ink band) —— */
.site-footer {
  position: relative;
  padding: 3.25rem 1.5rem 3.5rem;
  background-color: var(--w-ink);
  color: rgba(245, 243, 239, 0.68);
  border-top: 1px solid rgba(245, 243, 239, 0.08);
}

@media (min-width: 768px) {
  .site-footer {
    padding: 3.75rem 1.5rem 4rem;
  }
}

.site-footer__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.55fr);
    gap: 3rem 3.5rem;
  }
}

.site-footer__brand {
  text-align: left;
  max-width: 22rem;
}

.site-footer__logo {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.site-footer__logo img {
  display: block;
  width: auto;
  height: 1.35rem;
  max-width: 11rem;
  filter: brightness(0) invert(1);
}

@media (min-width: 768px) {
  .site-footer__logo img {
    height: 1.5rem;
  }
}

.site-footer__tagline {
  margin: 1.15rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(245, 243, 239, 0.62);
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.35rem;
}

.site-footer__social-label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 243, 239, 0.42);
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: rgba(245, 243, 239, 0.68);
  transition: color 140ms var(--w-ease);
}

.site-footer__social-link:hover {
  color: var(--w-marker);
}

.site-footer__social-link svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.site-footer__copy {
  margin: 1.25rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(245, 243, 239, 0.42);
}

.site-footer__nav {
  text-align: left;
  min-width: 0;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .site-footer__cols {
    gap: 2rem 2.5rem;
  }
}

.site-footer__col {
  min-width: 0;
}

.site-footer__heading {
  margin: 0 0 0.85rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(245, 243, 239, 0.92);
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  justify-items: start;
}

.site-footer__links a {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(245, 243, 239, 0.72);
  text-decoration: none;
  transition: color 140ms var(--w-ease);
}

.site-footer__links a:hover {
  color: var(--w-marker);
}

/* Quiet secondary legal / consent row */
.site-footer__legal {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid rgba(245, 243, 239, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.1rem;
}

.site-footer__legal a {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(245, 243, 239, 0.48);
  text-decoration: none;
  transition: color 140ms var(--w-ease);
}

.site-footer__legal a:hover {
  color: rgba(245, 243, 239, 0.82);
}

.site-footer a:focus-visible {
  box-shadow: 0 0 0 2px var(--w-ink), 0 0 0 4px var(--w-marker),
    0 0 0 5px var(--w-paper);
}


/* ==========================================================================
   Conversion pages — article prose + helpers
   Namespace: .w-conv  (page-local; do not restyle homepage sections here)

   Layout rules:
   - Shell is full --w-container (wide)
   - Header/title/lead may use a reading measure
   - Grids, tables, duos, stages live in full shell width (not nested under 36rem)

   Section backgrounds (LOCKED with paper ramp):
   - default  → paper / page ground
   - --wash   → neutral-150 alternate
   - --ink    → dark break
   - NEVER full-bleed --marker / yellow as a section fill
     (marker is buttons, .w-mark, focus rings, accents only)
   ========================================================================== */

.w-conv {
  color: var(--w-ink);
}

/* GEO short answers — understated editorial note (not a boxed callout card) */
.w-conv-geo {
  margin: 1.15rem 0 0;
  padding: 0.15rem 0 0.15rem 0.95rem;
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--w-carbon);
  background: transparent;
  border-left: 3px solid var(--w-marker);
}

.w-conv-duo__aside .w-conv-geo,
.w-conv-duo__main .w-conv-geo {
  max-width: none;
}

.w-conv-geo--center {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.w-conv-geo--on-ink {
  color: rgba(245, 243, 239, 0.88);
  background: transparent;
  border-left-color: var(--w-marker);
}

.w-conv-hero .w-conv-geo {
  margin-top: 1rem;
  max-width: 36rem;
}

/* —— Section shell (homepage cadence) —— */
.w-conv-section {
  padding: 5.5rem 1.5rem;
  background: transparent; /* inherits page paper */
  color: var(--w-ink);
}

@media (min-width: 768px) {
  .w-conv-section {
    padding: 6.75rem 1.5rem;
  }
}

.w-conv-section--wash {
  background: var(--w-neutral-150);
  color: var(--w-ink);
}

/*
 * Deprecated: was full-bleed marker yellow (too loud on conversion pages).
 * Kept as a wash alias so any leftover markup never reintroduces a yellow slab.
 * Prefer --wash / default paper / --ink over this class going forward.
 */
.w-conv-section--marker {
  background: var(--w-neutral-150);
  color: var(--w-ink);
}

.w-conv-section--wash .w-conv-title,
.w-conv-section--marker .w-conv-title,
.w-conv-section:not(.w-conv-section--ink) .w-conv-title {
  color: var(--w-ink);
}

.w-conv-section--wash .w-conv-lead,
.w-conv-section--marker .w-conv-lead,
.w-conv-section:not(.w-conv-section--ink) .w-conv-lead {
  color: var(--w-carbon);
}

.w-conv-section--wash .w-conv-prose,
.w-conv-section--marker .w-conv-prose {
  color: var(--w-carbon);
}

.w-conv-section--ink {
  background-color: var(--w-ink);
  background-image: linear-gradient(
    180deg,
    var(--w-ink) 0%,
    var(--w-ink) 42%,
    var(--w-carbon) 100%
  );
  color: var(--w-paper);
}

.w-conv-section--ink .w-conv-title,
.w-conv-section--ink .w-conv-block__title,
.w-conv-section--ink .w-conv-workflow__title,
.w-conv-section--ink .w-conv-rule-item__title,
.w-conv-section--ink .w-conv-onboard__title {
  color: var(--w-paper);
}

.w-conv-section--ink .w-conv-lead,
.w-conv-section--ink .w-conv-prose,
.w-conv-section--ink .w-conv-workflow p,
.w-conv-section--ink .w-conv-rule-item p,
.w-conv-section--ink .w-conv-workflow ol,
.w-conv-section--ink .w-conv-onboard p {
  color: rgba(245, 243, 239, 0.78);
}

/* Wide shell — never constrain all content to half-viewport */
.w-conv-section__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  width: 100%;
}

/* legacy — map to full shell (avoid half-empty pages) */
.w-conv-section__inner--narrow,
.w-conv-section__inner--mid {
  max-width: var(--w-container);
}

/* Header: reading measure ONLY for title stack — never wrap whole sections */
.w-conv-header {
  margin-bottom: 2.75rem;
  max-width: 42rem;
  width: 100%;
  text-align: left;
}

/* Inside a duo column, title may fill the column (column is already half-shell) */
.w-conv-duo .w-conv-header {
  max-width: none;
}

.w-conv-header--wide {
  max-width: 48rem;
}

.w-conv-header--wide .w-conv-title {
  max-width: 48rem;
}

.w-conv-header .w-eyebrow {
  margin: 0;
}

.w-conv-header .w-eyebrow-rule {
  margin-bottom: 1rem;
}

.w-conv-header--center {
  text-align: left;
}

.w-conv-header--center .w-eyebrow-rule {
  margin-left: 0;
  margin-right: 0;
}

.w-conv-title {
  margin: 0;
  max-width: none;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 3.4vw, 2.85rem);
  line-height: 1.12;
  color: var(--w-ink);
  text-align: left;
  text-wrap: balance;
}

.w-conv-header .w-conv-title {
  margin-top: 0;
}

.w-conv-lead {
  margin: 0.9rem 0 0;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--w-carbon);
  text-align: left;
}

.w-conv-header--wide .w-conv-lead {
  max-width: 42rem;
}

.w-conv-lead--on-ink {
  color: rgba(245, 243, 239, 0.78);
}

.w-eyebrow--on-ink {
  color: rgba(245, 243, 239, 0.62);
}

/* Full-width body region under headers */
.w-conv-content {
  width: 100%;
  max-width: none;
  margin-top: 0.75rem;
  min-width: 0;
}

/* —— True two-column composition (full shell width; left-aligned) —— */
.w-conv-duo {
  display: grid;
  gap: 2.75rem;
  align-items: start;
  width: 100%;
  min-width: 0;
}

@media (min-width: 900px) {
  .w-conv-duo {
    /* Slightly prefer copy; FUI still gets a real half — never single 36rem strip */
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 3.25rem 3.25rem;
  }

  .w-conv-duo--top {
    align-items: start;
  }

  /* Visual / table first-weight when aside is the product board or a wide table */
  .w-conv-duo:has(.w-conv-table-wrap),
  .w-conv-duo:has(.w-conv-stage) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.w-conv-duo__main,
.w-conv-duo__aside {
  min-width: 0;
}

/* Aside panel (definition links) */
.w-conv-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .w-conv-aside {
    padding-top: 2.75rem; /* align under title stack */
  }
}

.w-conv-aside__links {
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--w-text-muted);
}

.w-conv-aside__links a {
  color: var(--w-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.w-conv-aside__links a:hover {
  color: var(--w-carbon);
}

/* Prose — measure when alone; fill duo column when inside split */
.w-conv-prose {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--w-carbon);
  max-width: 42rem;
}

.w-conv-duo .w-conv-prose {
  max-width: none;
}

.w-conv-prose p + p {
  margin-top: 1.1rem;
}

.w-conv-prose a {
  color: var(--w-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.w-conv-prose a:hover {
  color: var(--w-carbon);
}

.w-conv-prose__muted {
  font-size: 0.95rem;
  color: var(--w-text-muted);
}

.w-conv-prose--center {
  margin-top: 1.75rem;
  text-align: left;
  max-width: 42rem;
  margin-left: 0;
  margin-right: 0;
}

.w-conv-prose--strong {
  font-weight: 600;
  color: var(--w-ink);
  font-size: 1.125rem;
  max-width: 36rem;
}

.w-conv-section--marker .w-conv-prose--strong {
  color: var(--w-ink);
}

/* Tables — full column / shell; soft plate (never paper-on-paper) */
.w-conv-table-wrap {
  margin-top: 0;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--w-rule);
  border-radius: 1rem;
  background: #fff;
}

.w-conv-section--wash .w-conv-table-wrap {
  /* Cool slightly off the wash so wash ≠ table fill */
  background: #fff;
  border-color: var(--w-neutral-200);
}

.w-conv-table {
  width: 100%;
  min-width: 28rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--w-ink);
}

.w-conv-table th,
.w-conv-table td {
  padding: 0.75rem 0.85rem;
  text-align: center;
  border-bottom: 1px solid var(--w-rule);
  vertical-align: middle;
  color: var(--w-carbon);
}

.w-conv-table thead th {
  background: var(--w-ink);
  color: var(--w-paper);
  font-weight: 600;
  text-align: center;
  border-bottom: 0;
}

.w-conv-table thead th:first-child,
.w-conv-table tbody th {
  text-align: left;
}

.w-conv-table tbody th {
  font-weight: 600;
  color: var(--w-ink);
  background: transparent;
}

.w-conv-table tbody tr:nth-child(even) {
  background: var(--w-neutral-0);
}

.w-conv-table tbody tr:last-child th,
.w-conv-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Soft clip so rounded table wrap doesn't square the ink header corners */
.w-conv-table-wrap .w-conv-table thead th:first-child {
  border-top-left-radius: 0.95rem;
}

.w-conv-table-wrap .w-conv-table thead th:last-child {
  border-top-right-radius: 0.95rem;
}

.w-conv-table--compare {
  min-width: 22rem;
}

.w-conv-yes {
  font-weight: 600;
  color: var(--w-ink);
}

.w-conv-no {
  color: var(--w-text-muted);
}

.w-conv-partial {
  font-weight: 500;
  color: var(--w-carbon);
}

/* Feature checks — column fill (inside duo or full shell) */
.w-conv-feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 1.75rem 0 0;
  max-width: none;
  width: 100%;
}

.w-conv-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--w-rule);
  font-size: 0.975rem;
  line-height: 1.5;
  color: var(--w-carbon);
}

.w-conv-feature:first-child {
  border-top: 0;
  padding-top: 0;
}

.w-conv-feature p {
  margin: 0;
  color: inherit;
}

.w-conv-feature__check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border-radius: 9999px;
  color: var(--w-marker);
  background: var(--w-carbon);
}

/* Steps — fill duo column; optional 2-col when full-shell alone */
.w-conv-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  width: 100%;
}

.w-conv-steps--5 {
  grid-template-columns: 1fr;
}

.w-conv-steps li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(245, 243, 239, 0.18);
}

.w-conv-steps li:first-child {
  border-top: 0;
  padding-top: 0;
}

.w-conv-steps__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--w-ink);
  background: var(--w-marker);
}

.w-conv-section--ink .w-conv-steps p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(245, 243, 239, 0.88);
}

.w-conv-steps p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--w-ink);
}

.w-conv-section__cta {
  margin-top: 2.5rem;
  text-align: left;
  max-width: 36rem;
}

.w-conv-section__cta-lead {
  margin: 0 0 1.15rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--w-ink);
  max-width: 32rem;
}

.w-conv-section--ink .w-conv-section__cta-lead {
  color: rgba(245, 243, 239, 0.88);
}

.w-conv-section--marker .w-conv-section__cta-lead {
  color: var(--w-ink);
}

/* Signal list — editorial list with marker rule (not ink card slabs) */
.w-conv-signal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  width: 100%;
}

.w-conv-signal-list li {
  padding: 1rem 0 1rem 1rem;
  background: transparent;
  color: var(--w-carbon);
  font-size: 0.95rem;
  line-height: 1.5;
  border-top: 1px solid var(--w-rule);
  border-left: 3px solid var(--w-marker);
}

.w-conv-signal-list li:first-child {
  border-top: 0;
  padding-top: 0.15rem;
}

.w-conv-signal-list__wide {
  grid-column: auto;
}

/* 4-up grid = true 2×2 across full shell (matches 4 blocks) */
.w-conv-grid-2 {
  display: grid;
  gap: 2rem 2.5rem;
  margin-top: 2.75rem;
  width: 100%;
  max-width: none;
}

@media (min-width: 800px) {
  .w-conv-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 2.5rem;
  }
}

.w-conv-block {
  padding-top: 1.15rem;
  border-top: 1px solid var(--w-rule);
  min-width: 0;
}

.w-conv-block__title {
  margin: 0 0 0.7rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--w-ink);
}

.w-conv-block p {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.65;
  color: var(--w-carbon);
}

.w-conv-block p + p {
  margin-top: 0.85rem;
}

/* Workflows — 3 columns on large shell (full width, not 40rem strip) */
.w-conv-workflow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 2rem 0 0;
  max-width: none;
  width: 100%;
}

@media (min-width: 960px) {
  .w-conv-workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 2rem;
  }
}

.w-conv-workflow__item {
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(245, 243, 239, 0.18);
  min-width: 0;
}

@media (max-width: 959px) {
  .w-conv-workflow__item:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

@media (min-width: 960px) {
  .w-conv-workflow__item {
    padding-top: 1.25rem;
  }
}

.w-conv-section--ink .w-conv-workflow__title {
  margin: 0 0 0.85rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  color: var(--w-paper);
}

.w-conv-workflow__title {
  margin: 0 0 0.85rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  color: var(--w-ink);
}

.w-conv-section--ink .w-conv-workflow p,
.w-conv-section--ink .w-conv-workflow ol {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(245, 243, 239, 0.78);
}

.w-conv-workflow p,
.w-conv-workflow ol {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--w-carbon);
}

.w-conv-workflow ol {
  margin: 0.75rem 0;
  padding-left: 1.15rem;
}

.w-conv-workflow li + li {
  margin-top: 0.35rem;
}

.w-conv-workflow p + p {
  margin-top: 0.75rem;
}

/* 3-col rule grid — full shell thirds */
.w-conv-split-3 {
  display: grid;
  gap: 2rem;
  margin-top: 2.75rem;
  width: 100%;
  max-width: none;
}

@media (min-width: 800px) {
  .w-conv-split-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2.25rem;
  }
}

/* Stacked variant inside a duo column */
.w-conv-split-3--stack {
  margin-top: 1.75rem;
}

@media (min-width: 800px) {
  .w-conv-split-3--stack {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .w-conv-split-3--stack .w-conv-rule-item {
    padding: 1.05rem 0;
  }

  .w-conv-split-3--stack .w-conv-rule-item:first-child {
    padding-top: 0;
  }
}

.w-conv-rule-item {
  padding-top: 1.2rem;
  border-top: 1px solid var(--w-ink);
  min-width: 0;
}

.w-conv-split-3--on-ink .w-conv-rule-item {
  border-top-color: rgba(245, 243, 239, 0.28);
}

.w-conv-rule-item__title {
  margin: 0 0 0.6rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--w-ink);
}

.w-conv-rule-item p {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.65;
  color: var(--w-carbon);
}

.w-conv-split-3--on-ink .w-conv-rule-item__title {
  color: var(--w-paper);
}

.w-conv-split-3--on-ink .w-conv-rule-item p {
  color: rgba(245, 243, 239, 0.72);
}

/* Collab band: copy + bounded FUI */
.w-conv-collab-band {
  display: grid;
  gap: 2.25rem;
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--w-rule);
  align-items: start;
  width: 100%;
}

@media (min-width: 900px) {
  .w-conv-collab-band {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.75rem;
    align-items: center;
  }
}

.w-conv-collab-band__copy .w-conv-block__title {
  margin-bottom: 0.85rem;
}

.w-conv-collab-band__copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--w-carbon);
  max-width: 40rem;
}

.w-conv-collab-band__copy p + p {
  margin-top: 1rem;
}

.w-conv-collab-band__visual {
  min-width: 0;
  max-width: 22rem;
  width: 100%;
}

/* Onboarding — 2×2-ish across full shell (5 items → 2-col, last full) */
.w-conv-onboard {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  width: 100%;
}

@media (min-width: 800px) {
  .w-conv-onboard {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }

  .w-conv-onboard li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 36rem;
  }
}

.w-conv-onboard li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.2rem 0;
  border-top: 1px solid var(--w-rule);
  min-width: 0;
}

.w-conv-onboard li:first-child {
  border-top: 1px solid var(--w-rule);
}

@media (min-width: 800px) {
  .w-conv-onboard li:nth-child(1),
  .w-conv-onboard li:nth-child(2) {
    border-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 799px) {
  .w-conv-onboard li:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

.w-conv-onboard__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.15rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--w-ink);
  background: var(--w-marker);
}

.w-conv-section--wash .w-conv-onboard__num {
  color: var(--w-ink);
  background: var(--w-marker);
}

.w-conv-onboard__title {
  margin: 0 0 0.4rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--w-ink);
}

.w-conv-onboard p {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--w-carbon);
}

/* —— FUI embeds: compact product chrome (support, don’t dominate) —— */
.w-conv-stage {
  margin-top: 0;
  width: 100%;
  max-width: 26rem;
  overflow: hidden;
  min-width: 0;
  /* No paper plate on paper/wash — only product chrome */
  background: transparent;
}

.w-conv-stage--practice {
  max-width: 24.5rem;
}

.w-conv-stage--cap {
  max-width: 22rem;
  margin-left: 0;
  margin-right: 0;
}

/* When stage sits under a full-width content block, left-align + keep bound */
.w-conv-content > .w-conv-stage {
  margin-top: 2.5rem;
}

/* Ink sections need a light plate so FUI ink/rule stays legible — not paper-on-paper */
.w-conv-section--ink .w-conv-stage {
  background: rgba(245, 243, 239, 0.96);
  color: var(--w-ink);
  border: 1px solid rgba(245, 243, 239, 0.2);
  border-radius: 0.65rem;
  padding: 0.45rem;
}

/* Compact practice matrix in conversion embeds */
.w-conv-stage .site-practice__composition {
  min-height: 12.5rem;
  padding: 0.1rem 0 1.75rem;
}

@media (min-width: 960px) {
  .w-conv-stage .site-practice__composition {
    min-height: 14rem;
    padding: 0.25rem 0.35rem 1.35rem 0;
  }
}

.w-conv-stage .site-practice__board {
  max-width: 100%;
}

.w-conv-stage .site-practice__board .fui-matrix__top {
  padding: 0.5rem 0.65rem;
}

.w-conv-stage .site-practice__board .fui-matrix__title {
  font-size: 0.8rem;
}

.w-conv-stage .site-practice__board .fui-matrix__cell {
  min-height: 2.15rem;
  padding: 0.22rem;
}

.w-conv-stage .site-practice__board .fui-matrix__hd {
  padding: 0.35rem 0.28rem;
  font-size: 0.55rem;
}

.w-conv-stage .site-practice__board .fui-matrix__group {
  padding: 0.15rem 0.35rem;
  font-size: 0.55rem;
}

.w-conv-stage .fui-float {
  transform-origin: bottom right;
}

@media (max-width: 520px) {
  .w-conv-stage .site-practice__float-msg {
    max-width: 12rem;
  }
}

/* Capability FUI scraps inside conv stages — keep secondary to copy */
.w-conv-stage .site-cap__visual,
.w-conv-collab-band__visual .site-cap__visual,
.w-conv-stage > * {
  max-width: 100%;
}

.w-conv-stage .site-cap__visual,
.w-conv-collab-band__visual .site-cap__visual {
  font-size: 0.92em;
}

.w-conv-collab-band__visual {
  max-width: 22rem;
}

/* Final CTA extras on conversion */
.w-conv-final-lead {
  margin: 0.85rem auto 0;
  max-width: 32rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--w-carbon);
  text-align: center;
}

.w-conv-final-note {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--w-carbon);
  text-align: center;
}

.w-conv-final-trust {
  justify-content: center;
  margin-top: 1.25rem;
}

/* sr-only fallback if utility missing */
.w-conv .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll targets for conversion anchors */
.site-page #what,
.site-page #spreadsheet,
.site-page #faq,
.site-page #trusted {
  scroll-margin-top: var(--w-scroll-margin);
}

/* ==========================================================================
   Pricing page — namespace: .w-pricing (do not alter homepage)
   Centered pricing composition: no left-stuck text with empty right gutters.
   Billing toggle JS IDs unchanged (billing-toggle, *-price, *-annual).
   ========================================================================== */

.w-pricing {
  color: var(--w-ink);
}

.site-page #plans,
.site-page #top {
  scroll-margin-top: var(--w-scroll-margin);
}

/* —— Pricing hero (left copy / right team FUI — homepage rhythm) —— */
.w-pricing-hero {
  position: relative;
  overflow: visible;
  padding: 3.25rem 1.5rem 3.5rem;
  border-bottom: 1px solid var(--w-rule);
}

@media (min-width: 768px) {
  .w-pricing-hero {
    padding: 4.25rem 1.5rem 4.5rem;
  }
}

@media (min-width: 1024px) {
  .w-pricing-hero {
    padding: 4.5rem 1.5rem 5rem;
  }
}

.w-pricing-hero__inner {
  max-width: var(--w-container);
  margin: 0 auto;
  display: grid;
  gap: 2.75rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .w-pricing-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem 2.75rem;
    align-items: center;
  }
}

.w-pricing-hero__copy {
  max-width: none;
  width: 100%;
  text-align: center;
}

.w-pricing-hero__copy .site-hero__eyebrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.w-pricing-hero__copy .site-hero__eyebrow-wrap .w-eyebrow-rule {
  margin-left: auto;
  margin-right: auto;
}

.w-pricing-hero__title,
.site-page h1.w-pricing-hero__title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.45rem, 5.5vw, 3.65rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--w-ink);
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .w-pricing-hero__title,
  .site-page h1.w-pricing-hero__title {
    font-size: clamp(2.5rem, 4.2vw, 3.5rem);
  }
}

.w-pricing-hero__title .w-mark {
  background-color: transparent;
  background-image: linear-gradient(var(--w-marker), var(--w-marker));
  background-repeat: no-repeat;
  background-size: 100% 0.72em;
  background-position: 0 58%;
  padding: 0 0.12em;
  border-radius: 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--w-ink);
}

.w-pricing-hero__lead {
  margin: 1.15rem auto 0;
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--w-text-muted);
}

.w-pricing-hero__actions {
  margin-top: 1.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem 1.25rem;
}

.w-pricing-hero__trust {
  list-style: none;
  margin: 1.65rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem 1.35rem;
}

.w-pricing-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--w-carbon);
}

@media (min-width: 1024px) {
  .w-pricing-hero__copy {
    text-align: left;
  }

  .w-pricing-hero__copy .site-hero__eyebrow-wrap {
    align-items: flex-start;
  }

  .w-pricing-hero__copy .site-hero__eyebrow-wrap .w-eyebrow-rule {
    margin-left: 0;
    margin-right: 0;
  }

  .w-pricing-hero__lead {
    margin-left: 0;
    margin-right: 0;
  }

  .w-pricing-hero__actions {
    justify-content: flex-start;
  }

  .w-pricing-hero__trust {
    justify-content: flex-start;
  }
}

.w-pricing-hero__media {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .w-pricing-hero__media {
    max-width: none;
    margin: 0;
  }
}

/* —— Pricing team FUI stage —— */
.w-pricing-team,
.w-pricing-team__board,
.w-pricing-team__float,
.w-pricing-team__list {
  -webkit-user-select: none;
  user-select: none;
}

.w-pricing-team {
  position: relative;
  width: 100%;
}

.w-pricing-team__composition {
  position: relative;
  padding: 0.85rem 0.35rem 1.75rem;
}

@media (min-width: 1024px) {
  .w-pricing-team__composition {
    padding: 0.5rem 2.85rem 1.95rem 1.35rem;
  }
}

.w-pricing-team__blob {
  position: absolute;
  z-index: 0;
  inset: 8% 6% 4% 10%;
  border-radius: 42% 58% 48% 52% / 48% 42% 58% 52%;
  background:
    radial-gradient(ellipse at 30% 28%, rgba(32, 51, 64, 0.14), transparent 58%),
    radial-gradient(ellipse at 78% 72%, rgba(220, 230, 74, 0.18), transparent 52%);
  pointer-events: none;
}

.w-pricing-team__board {
  position: relative;
  z-index: 1;
  background: var(--w-neutral-0);
  border: 1px solid var(--w-rule);
  border-radius: 1.125rem;
  box-shadow: var(--w-shadow-raised);
  overflow: hidden;
}

.w-pricing-team__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem 0.95rem;
  border-bottom: 1px solid var(--w-rule);
  background: linear-gradient(
    to bottom,
    var(--w-neutral-50) 0%,
    var(--w-neutral-0) 100%
  );
}

.w-pricing-team__kicker {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w-text-muted);
}

.w-pricing-team__title {
  margin: 0.2rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--w-ink);
  line-height: 1.2;
}

.w-pricing-team__seats {
  flex-shrink: 0;
  margin-top: 0.15rem;
  padding: 0.28rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--w-ink);
  background: var(--w-marker);
}

.w-pricing-team__list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}

.w-pricing-team__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem 0.75rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
}

.w-pricing-team__row + .w-pricing-team__row {
  border-top: 1px solid var(--w-rule);
}

.w-pricing-team__row--invite {
  grid-template-columns: auto minmax(0, 1fr);
  opacity: 0.78;
}

.w-pricing-team__avatar {
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid var(--w-neutral-0);
  box-shadow: 0 0 0 1px var(--w-rule);
}

.w-pricing-team__avatar--initials,
.w-pricing-team__avatar--add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--w-paper);
  background: var(--w-carbon);
  box-shadow: none;
  border: 0;
}

.w-pricing-team__avatar--add {
  color: var(--w-ink);
  background: var(--w-marker);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.w-pricing-team__who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.w-pricing-team__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--w-ink);
  line-height: 1.25;
}

.w-pricing-team__role {
  font-size: 0.75rem;
  color: var(--w-text-muted);
  line-height: 1.3;
}

.w-pricing-team__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.w-pricing-team__meta .fui-tag {
  font-size: 0.625rem;
}

.w-pricing-team__float {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.w-pricing-team__float--assign {
  right: 0;
  bottom: 0.15rem;
  width: min(13.5rem, 72%);
  padding: 0.75rem 0.85rem 0.8rem;
  background: var(--w-neutral-0);
  border: 1px solid var(--w-rule);
  border-radius: 0.85rem;
  box-shadow: 0 14px 30px -16px rgba(17, 19, 24, 0.35);
}

@media (min-width: 1024px) {
  .w-pricing-team__float--assign {
    right: -0.35rem;
    bottom: 0.35rem;
  }
}

.w-pricing-team__float-label {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w-text-muted);
}

.w-pricing-team__float-title {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--w-ink);
  line-height: 1.3;
}

.w-pricing-team__float-foot {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.w-pricing-team__float--roles {
  left: 0.15rem;
  top: auto;
  bottom: 4.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

@media (min-width: 1024px) {
  .w-pricing-team__float--roles {
    left: -0.95rem;
    top: 6.35rem;
    bottom: auto;
  }
}

@media (max-width: 639px) {
  .w-pricing-team__float--roles {
    display: none;
  }

  .w-pricing-team__composition {
    padding-bottom: 2.35rem;
  }

  .w-pricing-team__float--assign {
    width: min(12.5rem, 78%);
  }
}

.w-pricing-team__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--w-ink);
  background: var(--w-neutral-0);
  border: 1px solid var(--w-rule);
  box-shadow: 0 8px 18px -14px rgba(17, 19, 24, 0.35);
}

.w-pricing-team__chip:nth-child(1) {
  background: var(--w-ink);
  border-color: var(--w-ink);
  color: var(--w-paper);
}

.w-pricing-team__chip:nth-child(2) {
  background: var(--w-marker);
  border-color: var(--w-marker);
}

/* Calm entrance — matches homepage hero pacing */
.w-pricing-hero__copy {
  animation: site-hero-rise 0.75s var(--w-ease) both;
}

.w-pricing-team__board {
  animation: site-hero-rise 0.75s 0.14s var(--w-ease) both;
}

.w-pricing-team__float--roles {
  animation: site-hero-float-in 0.8s 0.28s var(--w-ease) both;
}

.w-pricing-team__float--assign {
  animation: site-hero-float-in 0.8s 0.38s var(--w-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .w-pricing-hero__copy,
  .w-pricing-team__board,
  .w-pricing-team__float--roles,
  .w-pricing-team__float--assign {
    animation: none;
  }
}

/* —— Plans section —— */
.w-pricing-plans {
  padding: 4.5rem 1.5rem 5.5rem;
  background: var(--w-paper);
}

@media (min-width: 768px) {
  .w-pricing-plans {
    padding: 5.75rem 1.5rem 6.5rem;
  }
}

.w-pricing-plans__inner {
  max-width: 52rem; /* focused plan pair — no stretched empty wings */
  margin: 0 auto;
}

.w-pricing-plans__header {
  max-width: 36rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.w-pricing-plans__header .w-eyebrow-rule {
  margin-left: auto;
  margin-right: auto;
}

.w-pricing-plans__title {
  margin: 0.85rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.05rem, 3.4vw, 2.75rem);
  color: var(--w-ink);
  text-wrap: balance;
}

.w-pricing-plans__lead {
  margin: 0.85rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--w-carbon);
  max-width: 34rem;
}

/* Billing toggle */
.w-pricing-billing {
  margin-top: 1.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 0.9rem;
}

.w-pricing-billing__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--w-carbon);
}

.w-pricing-billing__save {
  color: var(--w-ink);
  font-weight: 600;
}

.w-pricing-billing__toggle {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--w-neutral-200);
  cursor: pointer;
  transition: background-color 160ms var(--w-ease);
  flex-shrink: 0;
}

.w-pricing-billing__toggle.is-annual {
  background: var(--w-ink);
}

.w-pricing-billing__dot {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  background: var(--w-paper);
  box-shadow: 0 1px 3px rgba(17, 19, 24, 0.2);
  transition: transform 160ms var(--w-ease);
}

.w-pricing-billing__toggle.is-annual .w-pricing-billing__dot {
  transform: translateX(1.25rem);
}

/* 2-col for 2 plans */
.w-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 800px) {
  .w-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
  }
}

/* Plan cards — interaction containers (choose + CTA) */
.w-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.85rem 1.55rem 1.95rem;
  background: var(--w-neutral-0);
  border: 1px solid var(--w-rule);
  border-radius: 1.125rem;
  text-align: left;
}

@media (min-width: 640px) {
  .w-pricing-card {
    padding: 2.1rem 1.85rem 2.2rem;
  }
}

.w-pricing-card--featured {
  background-color: var(--w-ink);
  background-image: linear-gradient(
    180deg,
    var(--w-ink) 0%,
    var(--w-ink) 48%,
    var(--w-carbon) 100%
  );
  border-color: var(--w-ink);
  color: var(--w-paper);
  box-shadow: var(--w-shadow-raised);
}

.w-pricing-card__badge {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  margin: 0;
  padding: 0.28rem 0.65rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--w-ink);
  background: var(--w-marker);
  border-radius: 9999px;
}

.w-pricing-card__header {
  margin-bottom: 1.35rem;
  padding-right: 6.5rem; /* room for badge on featured */
}

.w-pricing-card:not(.w-pricing-card--featured) .w-pricing-card__header {
  padding-right: 0;
}

.w-pricing-card__name {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--w-ink);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.w-pricing-card--featured .w-pricing-card__name {
  color: var(--w-paper);
}

.w-pricing-card__for {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--w-text-muted);
  max-width: 22rem;
}

.w-pricing-card--featured .w-pricing-card__for {
  color: rgba(245, 243, 239, 0.72);
}

.w-pricing-card__price-row {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.45rem;
}

.w-pricing-card__amount {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.75rem, 5vw, 3.35rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--w-ink);
  font-variant-numeric: tabular-nums;
}

.w-pricing-card--featured .w-pricing-card__amount {
  color: var(--w-paper);
}

.w-pricing-card__period {
  font-size: 1rem;
  font-weight: 500;
  color: var(--w-text-muted);
}

.w-pricing-card--featured .w-pricing-card__period {
  color: rgba(245, 243, 239, 0.62);
}

.w-pricing-card__annual {
  margin: 0.45rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--w-carbon);
}

.w-pricing-card--featured .w-pricing-card__annual {
  color: var(--w-marker);
}

.w-pricing-card__annual[hidden] {
  display: none;
}

.w-pricing-card__cta {
  width: 100%;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-sizing: border-box;
}

.w-pricing-card:not(.w-pricing-card--featured) .w-pricing-card__cta.w-btn-ghost {
  border: 1px solid var(--w-ink);
  border-radius: 9999px;
  color: var(--w-ink);
  background: transparent;
  padding: 0.85rem 1.4rem;
  font-weight: 600;
}

.w-pricing-card:not(.w-pricing-card--featured) .w-pricing-card__cta.w-btn-ghost:hover {
  background: var(--w-ink);
  color: var(--w-paper);
}

.w-pricing-card__includes {
  margin: 0 0 0.85rem;
  padding: 0.15rem 0 0.15rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--w-paper);
  background: transparent;
  border-left: 3px solid var(--w-marker);
}

.w-pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.w-pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--w-carbon);
}

.w-pricing-card--featured .w-pricing-card__features li {
  color: rgba(245, 243, 239, 0.88);
}

.w-pricing-card__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  border-radius: 9999px;
  color: var(--w-marker);
  background: var(--w-carbon);
}

.w-pricing-card--featured .w-pricing-card__check {
  color: var(--w-ink);
  background: var(--w-marker);
}

/* Pricing FAQ: stack (avoid sticky 2-col empty left column) */
.w-pricing .site-faq__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.w-pricing .site-faq__header {
  position: static;
  max-width: none;
  margin-bottom: 2.5rem;
  text-align: center;
}

.w-pricing .site-faq__header .w-eyebrow-rule {
  margin-left: auto;
  margin-right: auto;
}

.w-pricing .site-faq__title,
.w-pricing .site-faq__lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.w-pricing .site-faq__list {
  max-width: none;
  width: 100%;
}

@media (min-width: 900px) {
  .w-pricing .site-faq__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .w-pricing .site-faq__header {
    position: static;
    margin-bottom: 2.75rem;
  }
}

/* Voices on pricing: keep header centered with page rhythm */
.w-pricing .site-voices__header {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.w-pricing .site-voices__header .w-eyebrow-rule {
  margin-left: auto;
  margin-right: auto;
}

.w-pricing .site-voices__title {
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .w-pricing-billing__toggle,
  .w-pricing-billing__dot {
    transition: none;
  }
}