/* =========================================================================
   placy.com — shared section & page patterns
   Builds on tokens/classes in css/placy.css (link that file FIRST).
   Every class here is reusable across the 5 pages.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------- */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}
.container--narrow { max-width: 760px; }

.section { padding: var(--s-9) 0; }
.section--tight { padding: var(--s-8) 0; }

/* Editorial section opener: rule + kicker + big index number */
.section-head { margin-bottom: var(--s-7); }
.section-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
}
.section-head .placy-index { font-size: clamp(64px, 9vw, 120px); }

.section-h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0 0 var(--s-5);
}
.section-h2 .line-grey { color: var(--fg2); display: block; }

.section-body {
  max-width: 640px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--placy-black);
  color: var(--placy-white);
  padding: 10px 18px;
  border-radius: 0 0 var(--r-md) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Horizontal-scroll guard for wide tables / code / diagrams */
.scroll-x { overflow-x: auto; max-width: 100%; }

/* Anchor targets land clear of the 56px sticky header (all pages) */
main [id] { scroll-margin-top: 76px; }

/* -------------------------------------------------------------------------
   Sources / footnotes (per-section, 13px light grey)
   ------------------------------------------------------------------------- */
.sources {
  font-size: 13px;
  color: var(--fg2-strong);
  line-height: 1.5;
  margin-top: var(--s-5);
  max-width: 720px;
}
sup.fn {
  font-size: 0.62em;
  color: var(--fg2-strong);
  font-weight: var(--fw-semibold);
  line-height: 0;
  vertical-align: super;
}
sup.fn a, .sources a { color: inherit; text-decoration: none; }
sup.fn a:hover, .sources a:hover { text-decoration: underline; }
.on-dark .sources, .on-dark sup.fn { color: var(--placy-light-grey); }

/* -------------------------------------------------------------------------
   Header — 56px sticky, blurred cream
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 56px;
  background: rgba(249, 251, 252, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.site-header__inner {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 19px; width: auto; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.site-nav a:not(.placy-btn) {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--fg1);
  text-decoration: none;
  transition: opacity var(--dur) var(--ease-out);
}
.site-nav a:not(.placy-btn):hover { opacity: 0.7; }
.site-nav a[aria-current="page"]:not(.placy-btn) { font-weight: var(--fw-bold); }

.placy-btn--sm { height: 34px; padding: 0 16px; font-size: 13px; }

/* Mobile nav — pure-CSS toggle (checkbox hack: works with zero JS) */
.nav-toggle-box {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  border-radius: var(--r-md);
}
.nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--fg1);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.nav-toggle-box:focus-visible + .nav-toggle { outline: 2px solid var(--fg1); outline-offset: 2px; }

@media (max-width: 840px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute;
    top: 56px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--s-3) var(--s-5) var(--s-5);
    display: none;
  }
  .nav-toggle-box:checked ~ .site-nav { display: flex; }
  .nav-toggle-box:checked + .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle-box:checked + .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-toggle-box:checked + .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav a:not(.placy-btn) {
    padding: 14px 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
  }
  .site-nav .placy-btn { margin-top: var(--s-4); justify-content: center; }
}
@media (min-width: 841px) {
  .nav-toggle-box { display: none; }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero { padding: var(--s-9) 0 var(--s-8); }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2-strong);
  margin-bottom: var(--s-5);
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--placy-green-warm);
  flex: none;
}

.hero-h1 {
  font-size: clamp(48px, 8vw, 112px);
  font-weight: var(--fw-heavy);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s-6);
}
.hero-h1 .line-grey { color: var(--fg2); display: block; }

.hero-sub {
  max-width: 640px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  margin-bottom: var(--s-6);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* Trust micro-line under mailto CTA rows on cream surfaces */
.cta-note {
  margin-top: var(--s-4);
  font-size: 13px;
  color: var(--fg2-strong);
}

/* -------------------------------------------------------------------------
   Dark showcase card (hero product evidence)
   ------------------------------------------------------------------------- */
.showcase {
  position: relative;
  margin: var(--s-8) 0 0;
  background: var(--placy-dark-bg);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
  color: var(--placy-white);
}
.showcase .placy-glow {
  top: -55%;
  right: -25%;
  --glow-size: 720px;
  --glow-tint: rgba(239, 169, 67, 0.2);
}
.showcase__grid {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.showcase figcaption {
  position: relative;
  margin-top: var(--s-6);
  font-size: 13px;
  color: var(--placy-light-grey);
  max-width: 640px;
}

/* Chat transcript (on dark) */
.chat { display: flex; flex-direction: column; gap: var(--s-4); }
.chat__user {
  align-self: flex-end;
  max-width: 85%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px 16px 4px 16px;
  padding: 12px 16px;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
}
.chat__system {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  color: var(--placy-light-grey);
}
.ginger-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--placy-ginger);
  flex: none;
}
.chat__assistant {
  align-self: flex-start;
  max-width: 92%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--placy-white);
}

/* Listing evidence cards (white on dark) */
.listing-stack { display: flex; flex-direction: column; gap: var(--s-3); }
.listing-card {
  background: var(--placy-white);
  color: var(--placy-black);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  font-size: 13px;
  line-height: 1.45;
}
.listing-card__title { font-weight: var(--fw-bold); margin-bottom: 4px; }
.listing-card__meta { color: var(--fg2-strong); margin-bottom: 2px; }
.listing-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.listing-card__agency { color: var(--fg2-strong); font-size: var(--fs-label); }
.listing-card .placy-btn--ghost { height: 30px; padding: 0 12px; font-size: var(--fs-label); }
.lead-strip {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--placy-light-grey);
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   Stat rows — numbers as graphics, always footnoted
   ------------------------------------------------------------------------- */
.stat-row {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-7);
  margin-bottom: 0;
}
.stat-block .stat {
  display: block;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-tight);
}
.stat-block__label {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-body-sm);
  color: var(--fg2-strong);
  max-width: 260px;
}
.on-dark .stat { color: var(--placy-white); }

/* -------------------------------------------------------------------------
   The wall — audit-block grid (blocked portals visual)
   ------------------------------------------------------------------------- */
.wall { margin: var(--s-7) 0 0; }
.wall-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-3);
}
.wall-block {
  border-radius: var(--r-lg);
  background: var(--placy-warm-grey);
  min-height: 64px;
  display: flex;
  align-items: flex-end;
  padding: 8px 10px;
  font-size: var(--fs-footnote);
  color: var(--fg2-strong);
  position: relative;
  overflow: hidden;
}
.wall-block--struck {
  background:
    linear-gradient(to top right,
      transparent calc(50% - 0.5px),
      var(--placy-light-grey) calc(50% - 0.5px),
      var(--placy-light-grey) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    var(--placy-warm-grey);
}
.wall-block--readable {
  background: var(--placy-white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--placy-black);
  color: var(--fg1);
}
.wall figcaption {
  margin-top: var(--s-4);
  font-size: var(--fs-body-sm);
  color: var(--fg2-strong);
  max-width: 560px;
}

/* -------------------------------------------------------------------------
   Objection strip (bordered inline strip)
   ------------------------------------------------------------------------- */
.objection-strip {
  margin-top: var(--s-7);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}

/* -------------------------------------------------------------------------
   Evidence cards (white, eyebrow + fact + date)
   ------------------------------------------------------------------------- */
.evidence-grid {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.evidence-card {
  background: var(--placy-white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.evidence-card__eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.evidence-card__fact { font-size: var(--fs-body); line-height: var(--lh-body); flex: 1; }
.evidence-card__date {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--fg2-strong);
}
.evidence-close {
  margin-top: var(--s-6);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  max-width: 720px;
  letter-spacing: var(--tracking-tight);
}

/* -------------------------------------------------------------------------
   Big statement — full-bleed dark section
   ------------------------------------------------------------------------- */
.statement {
  background: var(--placy-dark-bg);
  color: var(--placy-white);
  padding: clamp(96px, 12vw, 160px) 0;
  text-align: center;
}
.statement__kicker {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--placy-ginger);
  margin-bottom: var(--s-6);
  display: block;
}
.statement__line {
  font-size: clamp(32px, 5.5vw, 68px);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  margin: 0 auto;
  max-width: 20ch;
}
.statement__cont {
  color: var(--placy-light-grey);
  font-size: clamp(17px, 2vw, 21px);
  line-height: var(--lh-body);
  max-width: 640px;
  margin: var(--s-6) auto 0;
}
.statement__cta { margin-top: var(--s-7); }
/* when the statement carries a ginger CTA, the kicker yields the section's one accent */
.statement__kicker--muted { color: var(--placy-light-grey); }
.statement__micro {
  font-size: 13px;
  color: var(--placy-light-grey);
  margin-top: var(--s-4);
}

/* -------------------------------------------------------------------------
   Pipeline diagram (semantic: figure > ol)
   ------------------------------------------------------------------------- */
.pipeline { margin: var(--s-7) 0 0; }
.pipeline-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  column-gap: 56px;
  align-items: center;
}
.pipe-node { position: relative; }
/* connector: 1px rule + CSS-triangle arrowhead, drawn in the column gap */
.pipe-node + .pipe-node::before {
  content: "";
  position: absolute;
  left: -48px;
  top: 50%;
  width: 40px;
  height: 1px;
  background: var(--border);
}
.pipe-node + .pipe-node::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-2.5px);
  border-left: 6px solid var(--placy-light-grey);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.pipe-card {
  background: var(--placy-white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
}
.pipe-card__title { font-weight: var(--fw-bold); font-size: var(--fs-body); }
.pipe-card__sub { font-size: var(--fs-label); color: var(--fg2-strong); margin-top: 4px; }
.pipe-steps {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pipe-steps li {
  font-size: var(--fs-body-sm);
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.pipe-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pipe-chips li {
  border: 1px solid var(--border);
  background: var(--placy-white);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  text-align: center;
}
.pipe-return {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.pipe-return::before {
  content: "";
  flex: none;
  border-right: 6px solid var(--placy-light-grey);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
}
.pipe-return__line { flex: 1; height: 1px; background: var(--border); }
.pipe-return__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--fg2-strong);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* accent variant (how-it-works page budget only) */
.pipe-return--accent::before { border-right-color: var(--placy-ginger); }
.pipe-return--accent .pipe-return__line { background: var(--placy-ginger); }
.pipeline figcaption {
  margin-top: var(--s-5);
  font-size: 13px;
  color: var(--fg2-strong);
  max-width: 640px;
}

/* -------------------------------------------------------------------------
   Card trio (three white cards in a row)
   ------------------------------------------------------------------------- */
.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.trio-card {
  background: var(--placy-white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
}
.trio-card h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); margin-bottom: var(--s-3); }
.trio-card p { font-size: var(--fs-body-sm); color: var(--fg1); }
.trio-close {
  margin-top: var(--s-6);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}

/* -------------------------------------------------------------------------
   Two-door split (60/40)
   ------------------------------------------------------------------------- */
.split-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.door-card {
  background: var(--placy-white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
}
.door-card__eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2-strong);
  margin-bottom: var(--s-4);
}
.door-card__belief {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
  margin-bottom: var(--s-5);
}
.door-card__list {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.door-card__list li {
  font-size: var(--fs-body-sm);
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

/* Text link with icon arrow */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--fg1);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  transition: opacity var(--dur) var(--ease-out);
}
.text-link:hover { opacity: 0.7; }
.text-link:active { transform: scale(0.98); }
.text-link i { font-size: 1.1em; line-height: 1; }
.section-link { margin-top: var(--s-6); }

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */
.faq-list { max-width: 760px; }
.faq-item { padding: var(--s-5) 0; border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); margin-bottom: var(--s-2); }
.faq-item p { color: var(--fg1); font-size: var(--fs-body); max-width: 680px; }

/* -------------------------------------------------------------------------
   Final CTA — dark rounded card inside cream section
   ------------------------------------------------------------------------- */
.cta-card {
  position: relative;
  background: var(--placy-black);
  color: var(--placy-white);
  border-radius: 28px;
  padding: clamp(48px, 8vw, 96px) clamp(24px, 6vw, 80px);
  overflow: hidden;
  text-align: center;
}
.cta-card .placy-glow {
  bottom: -60%;
  left: -20%;
  --glow-size: 700px;
  --glow-tint: rgba(239, 169, 67, 0.22);
}
.cta-card__inner { position: relative; }
.cta-card__h {
  font-size: clamp(30px, 4.5vw, 56px);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  margin: 0 0 var(--s-6);
}
.cta-card__h .line-grey { color: var(--placy-light-grey); display: block; }
.cta-card__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}
.cta-card__micro {
  font-size: 13px;
  color: var(--placy-light-grey);
  margin-top: var(--s-4);
}

/* -------------------------------------------------------------------------
   Footer — cream, 1px top border, 3 link columns + coordinates device
   ------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--s-8) 0 var(--s-6);
  margin-top: var(--s-9);
}
.site-footer__strap {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-7);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}
.footer-col h2 {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2-strong);
  margin-bottom: var(--s-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--s-3); }
.footer-col a {
  font-size: var(--fs-body-sm);
  color: var(--fg2-strong);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.footer-col a:hover { color: var(--fg1); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: var(--s-5);
}
.footer-bottom__legal {
  font-size: var(--fs-label);
  color: var(--fg2-strong);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.footer-bottom__legal a { color: var(--fg2-strong); text-decoration: none; }
.footer-bottom__legal a:hover { color: var(--fg1); }
.footer-bottom img { height: 16px; width: auto; display: block; }

/* -------------------------------------------------------------------------
   Bento grid (agencies / platforms pages)
   ------------------------------------------------------------------------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.bento-card {
  background: var(--placy-white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.bento-card--dark {
  background: var(--placy-black);
  border-color: var(--placy-black);
  color: var(--placy-white);
}
.bento-card--dark .bento-card__eyebrow, .bento-card--dark p { color: var(--placy-light-grey); }
.bento-card--accent {
  background: var(--placy-ginger);
  border-color: var(--placy-ginger);
  color: var(--placy-black);
}
.bento-card--accent .bento-card__eyebrow, .bento-card--accent p { color: var(--placy-black); }
.bento-card__eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg2-strong);
}
.bento-card h3 { font-size: var(--fs-subhead); font-weight: var(--fw-bold); }
.bento-card p { font-size: var(--fs-body-sm); color: var(--fg1); }
.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }
.bento-span-4 { grid-column: span 4; }
.bento-span-6 { grid-column: span 6; }

/* -------------------------------------------------------------------------
   Quote block + muted logo wall
   ------------------------------------------------------------------------- */
.quote-block { text-align: center; max-width: 880px; margin: 0 auto; }
.quote-block blockquote {
  margin: 0;
  font-size: clamp(24px, 4vw, 44px);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}
.quote-block cite {
  display: block;
  font-style: normal;
  margin-top: var(--s-5);
  font-size: var(--fs-body-sm);
  color: var(--fg2-strong);
}
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  justify-content: center;
  margin-top: var(--s-7);
  opacity: 0.72;
}
.logo-wall span {
  font-weight: var(--fw-heavy);
  font-size: var(--fs-body-lg);
  color: var(--placy-light-grey);
  letter-spacing: var(--tracking-tight);
}

/* -------------------------------------------------------------------------
   Code / schema snippet (dark, monospace)
   ------------------------------------------------------------------------- */
.code-block {
  background: var(--placy-dark-bg);
  color: var(--placy-white);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  overflow-x: auto;
}
.code-block pre, .code-block code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}
.code-block .tok-key { color: var(--placy-light-grey); }
.code-block .tok-str { color: var(--placy-white); }
.code-block .tok-accent { color: var(--placy-ginger); } /* ONE accent value max */

/* -------------------------------------------------------------------------
   State-machine strip (chips + arrows)
   ------------------------------------------------------------------------- */
.state-strip {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.state-strip li {
  border: 1px solid var(--border);
  background: var(--placy-white);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}
.state-strip li + li { position: relative; margin-left: 20px; }
.state-strip li + li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--border-strong);
}

/* -------------------------------------------------------------------------
   2x2 matrix (why-placy)
   ------------------------------------------------------------------------- */
.matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.matrix-cell {
  background: var(--placy-white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  min-height: 140px;
}
.matrix-cell--accent {
  background: var(--placy-ginger);
  border-color: var(--placy-ginger);
  color: var(--placy-black);
}
.matrix-cell h3 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); margin-bottom: var(--s-2); }
.matrix-cell p { font-size: var(--fs-body-sm); }

/* -------------------------------------------------------------------------
   Responsive — 1080px and 720px
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-span-2, .bento-span-3, .bento-span-4, .bento-span-6 { grid-column: span 2; }
  .split-grid { grid-template-columns: 1fr; }
  .showcase__grid { grid-template-columns: 1fr; }
  .trio-grid, .evidence-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .section { padding: var(--s-8) 0; }
  .stat-row { grid-template-columns: 1fr; gap: var(--s-6); }
  .trio-grid, .evidence-grid { grid-template-columns: 1fr; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-span-2, .bento-span-3, .bento-span-4, .bento-span-6 { grid-column: span 1; }
  .wall-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-cols { grid-template-columns: 1fr; }
  .matrix { grid-template-columns: 1fr; }
  .hero-ctas .placy-btn { min-height: 44px; }

  /* pipeline rotates vertical */
  .pipeline-flow {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
  .pipe-node + .pipe-node::before {
    left: 50%;
    top: -40px;
    width: 1px;
    height: 32px;
  }
  .pipe-node + .pipe-node::after {
    left: 50%;
    top: -12px;
    transform: translateX(-2.5px);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 6px solid var(--placy-light-grey);
    border-bottom: none;
  }
  .pipe-return { border-left: 2px solid var(--placy-light-grey); padding-left: var(--s-4); }
  .pipe-return--accent { border-left-color: var(--placy-ginger); }
  .pipe-return::before { display: none; }
  .cta-card__ctas { flex-direction: column; align-items: stretch; }
  .cta-card__ctas .placy-btn { justify-content: center; }
}