/* ============================================================
   /showcase — pre-sale walkthrough + client-portal replica
   Uses the site design tokens from styles.css. Two namespaces:
     .shw-*   marketing page (warm cream, editorial)
     .shwd-*  portal replica (neutral product UI, inside a browser frame)
   No pricing appears anywhere on this page — by design.
   ============================================================ */

/* ---------- hero ---------- */
.shw-hero { padding-top: calc(150px * var(--pad-scale)); padding-bottom: calc(72px * var(--pad-scale)); }
.shw-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 60px; align-items: center;
}
.shw-hero__title { max-width: 15ch; font-size: clamp(40px, 4.9vw, 66px); }
.shw-hero__lead { max-width: 52ch; margin-top: 22px; font-size: 17.5px; color: var(--muted); }

/* hero proof tiles — a 3-up miniature of the /case-studies grid: dark panel,
   grayscale image, big serif metric centred over it (which also masks the SH
   watermark baked into these photos, same as the real cards), colour returning
   on hover. Metrics come from stories.js so they can't drift from that page. */
.shw-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shw-proof__tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; padding: 16px 14px; text-align: center;
  border-radius: 14px; background: #14161b;
  text-decoration: none; color: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}
.shw-proof__tile img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) brightness(.44) contrast(1.06); opacity: .58;
  transition: transform .5s ease, opacity .4s ease, filter .4s ease;
}
.shw-proof__tile:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -26px rgba(0,0,0,.5); }
.shw-proof__tile:hover img { transform: scale(1.05); opacity: .72; filter: grayscale(40%) brightness(.62); }
.shw-proof__cat {
  position: absolute; left: 12px; top: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.28);
  padding: 3px 8px; border-radius: 999px;
}
.shw-proof__metric {
  font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1; letter-spacing: -.02em; text-shadow: 0 6px 26px rgba(0,0,0,.45);
}
.shw-proof__label {
  margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.74);
}
.shw-proof__read {
  position: absolute; left: 0; right: 0; bottom: 12px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.5); opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.shw-proof__tile:hover .shw-proof__read { opacity: 1; transform: none; }
.shw-proof__more {
  grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent-deep);
}
.shw-proof__more svg { width: 16px; height: 16px; transition: transform .25s ease; }
.shw-proof__more:hover svg { transform: translateX(4px); }
.shw-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.shw-hero__trust {
  display: flex; flex-wrap: wrap; gap: 44px;
  margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line);
}
.shw-hero__trust div { display: flex; flex-direction: column; gap: 2px; }
.shw-hero__trust strong { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.01em; }
.shw-hero__trust span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }

/* ---------- fixed site header: stop the flicker ----------
   The header is fixed and semi-transparent with a 20px backdrop blur, so it
   re-samples whatever sits under it. Two things under it never stop moving:
   `body::before` (a fixed, 200vh, 76s-looping particle layer) and the footer's
   animated pseudo-element. Re-blurring a moving backdrop makes the bar shimmer,
   worst where backdrop contrast is highest — the dark panels and footer at the
   end of this page. Fix: on /showcase the header is fully opaque with no
   backdrop-filter (nothing to re-sample), so the ambient particle layer is free
   to keep drifting — the header simply doesn't look at it any more. Also drop
   `will-change` once a reveal has finished, so this long page stops holding a
   dozen permanent compositing layers.
   Both are scoped to /showcase — showcase.css loads nowhere else. */
.nav--scrolled {
  background: var(--cream-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.shw .reveal.in,
.shw .section-head.reveal.in > * { will-change: auto; }

/* ---------- section heads ----------
   Centred: the number badge, the display heading and the lead all sit on
   the page's centre line, matching .section-head on the rest of the site.
   The `margin-inline: auto` on the head AND on the lead is what does it —
   both carry a max-width, so text-align alone would leave them flush left. */
.shw-sec__head {
  max-width: 68ch; margin-bottom: 44px;
  margin-inline: auto; text-align: center;
}
/* Section number, built as a replica of the logomark: the same near-black
   square holding a cream glyph. So each section opens with the brand mark
   carrying its number, instead of a generic badge. Corners are near-square
   (2px) because the real logomark has none — a pill radius breaks the echo.
   The number is set in the mono, not the logo's serif: the square is small and
   the angular, even-width digits stay legible where serif ones went mushy. */
.shw-sec__n {
  display: inline-flex; align-items: flex-end; justify-content: flex-start;
  width: 54px; height: 54px; margin-bottom: 20px;
  background: var(--ink); color: var(--btn-text);
  border: none; border-radius: 2px; padding: 0 0 9px 10px;
  font-family: var(--mono); font-weight: 500; font-size: 17px;
  letter-spacing: 0.04em; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 22px -12px rgba(29,26,20,.55);
}
.shw-sec__head .display { margin-bottom: 14px; }
.shw-sec__head .lead { color: var(--muted); max-width: 62ch; margin-inline: auto; }

/* ---------- panel (inputs + outputs) ---------- */
.shw-panel {
  background: var(--cream-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--ring-top), var(--shadow-soft);
  padding: 30px;
}
.shw-panel__inputs { display: grid; gap: 26px; }
.shw-panel__inputs--3 { grid-template-columns: repeat(3, 1fr); }
.shw-panel__inputs--4 { grid-template-columns: repeat(4, 1fr); }
.shw-panel__out {
  display: grid; gap: 1px; margin-top: 30px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.shw-panel__out--3 { grid-template-columns: repeat(3, 1fr); }

.shw-field { display: flex; flex-direction: column; gap: 8px; }
.shw-field__label {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted-2);
}
.shw-field__hint { font-size: 13px; color: var(--muted-2); line-height: 1.45; }
.shw-field select,
.shw-field input {
  appearance: none;
  width: 100%; padding: 13px 15px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.shw-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%236A6155' stroke-width='2' stroke-linecap='round'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px; cursor: pointer;
}
.shw-field select:focus,
.shw-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* range sliders */
.shw-slider { display: flex; flex-direction: column; gap: 10px; }
.shw-slider__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.shw-slider__val { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.shw-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--line-strong); border-radius: 99px; }
.shw-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--paper);
  box-shadow: 0 1px 6px rgba(40,34,20,.3); cursor: pointer;
}
.shw-slider input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--paper); cursor: pointer;
}

/* ---------- stat tiles ---------- */
.shw-stat { background: var(--cream-raised); padding: 20px 22px; }
.shw-stat__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px;
}
.shw-stat__value {
  font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1;
  letter-spacing: -0.015em; font-variant-numeric: tabular-nums;
}
.shw-stat--accent .shw-stat__value { color: var(--accent-deep); }
.shw-stat__sub { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.4; }

.shw-fine { margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted-2); max-width: 78ch; font-style: italic; }

/* assumptions disclosure */
.shw-assume { margin-top: 14px; }
.shw-assume summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-deep);
}
.shw-assume summary::-webkit-details-marker { display: none; }
.shw-assume summary::after { content: " +"; }
.shw-assume[open] summary::after { content: " −"; }
.shw-assume ul { margin: 14px 0 0; padding-left: 18px; max-width: 80ch; }
.shw-assume li { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-bottom: 9px; }

/* ---------- engine picker ---------- */
.shw-engines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.shw-engine {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  text-align: left; padding: 20px 20px 18px;
  background: var(--cream-raised); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--ring-top), var(--shadow-soft);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease, background .18s ease;
}
.shw-engine:hover { transform: translateY(-2px); box-shadow: var(--ring-top), var(--shadow-lift); }
.shw-engine--on { border-color: var(--accent); background: var(--paper); box-shadow: var(--ring-top), var(--shadow-lift), 0 0 0 2px var(--accent-soft); }
.shw-engine__flag {
  position: absolute; top: -10px; right: 16px;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
}
.shw-engine__vol { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.shw-engine__vol em { font-family: var(--sans); font-size: 14px; font-style: normal; font-weight: 500; color: var(--muted-2); }
.shw-engine__seats { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }
.shw-engine__term {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
}
.shw-engine__mtg {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1;
  color: var(--accent-deep); font-variant-numeric: tabular-nums;
}
.shw-engine__mtg em {
  display: block; margin-top: 5px; font-family: var(--mono); font-size: 10px;
  font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2);
}
.shw-engine__note { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--muted-2); }
.shw-engine--on .shw-engine__term { color: var(--accent-deep); }

.shw-included {
  margin-top: 26px; padding: 26px 28px;
  background: var(--cream-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.shw-included__head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px;
}
.shw-included__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 26px;
}
.shw-included__list li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.shw-included__check { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--accent); }

/* ---------- funnel ---------- */
.shw-funnel { display: flex; flex-direction: column; gap: 14px; }
.shw-fchan {
  background: var(--cream-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--ring-top), var(--shadow-soft);
}
.shw-fchan__head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--paper);
}
/* the channel glyph sits in a tile, cornered bottom-left like the logomark.
   The padding is asymmetric because an SVG scales into its content box, so
   uneven padding is what pushes the glyph into the corner. */
.shw-fchan__ico {
  flex: none; box-sizing: border-box; width: 38px; height: 38px;
  padding: 11px 12px 6px 6px; border-radius: 2px;
  background: var(--accent-deep); color: #EAF3EE;
}
.shw-fchan__label { font-size: 16px; font-weight: 600; }
.shw-fchan__sub { font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.shw-fchan__mtg { margin-left: auto; text-align: right; }
.shw-fchan__mtg strong { display: block; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1; }
.shw-fchan__mtg span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); }
.shw-fsteps { display: grid; grid-template-columns: repeat(4, 1fr); }
.shw-fstep { padding: 20px 24px; border-right: 1px solid var(--line); }
.shw-fstep:last-child { border-right: none; }
.shw-fstep span { display: block; font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.shw-fstep em {
  display: block; margin-top: 6px; font-style: normal;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted-2);
}
.shw-fstep--end { background: var(--accent-soft); }
.shw-fstep--end span { color: var(--accent-deep); }

.shw-ftotal {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 30px; align-items: center;
  background: var(--btn); color: var(--btn-text);
  border-radius: var(--radius-lg); padding: 28px 30px;
}
.shw-ftotal__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; opacity: .62; }
.shw-ftotal__value { font-family: var(--serif); font-size: clamp(38px, 5vw, 58px); font-weight: 500; line-height: 1.05; margin-top: 8px; }
.shw-ftotal__sub { margin-top: 6px; font-size: 13.5px; opacity: .66; }
.shw-ftotal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--radius); overflow: hidden; }
.shw-ftotal__grid .shw-stat { background: rgba(255,255,255,.05); color: var(--btn-text); padding: 18px; }
.shw-ftotal__grid .shw-stat__label { color: rgba(251,248,240,.55); }
.shw-ftotal__grid .shw-stat__value { font-size: 27px; }
.shw-ftotal__grid .shw-stat--accent .shw-stat__value { color: var(--gold-2); }

.shw-realloc {
  display: flex; gap: 16px; align-items: center;
  margin-top: 22px; padding: 22px 24px;
  background: var(--accent-soft); border: 1px solid rgba(31,122,87,.22); border-radius: var(--radius);
}
/* dark-green tile with the spark cornered bottom-left — the same construction
   as the section-number marks, so the callout reads as part of the same set */
.shw-realloc__mark {
  flex: none; display: flex; align-items: flex-end; justify-content: flex-start;
  width: 40px; height: 40px; border-radius: 2px;
  background: var(--accent-deep); padding: 0 0 4px 4px;
}
.shw-realloc__ico { flex: none; width: 16px; height: 16px; color: #EAF3EE; }
.shw-realloc p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- ramp steps ---------- */
.shw-ramp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.shw-step { display: flex; gap: 16px; padding: 22px 0 0; border-top: 2px solid var(--line-strong); }
.shw-step__n {
  flex: none; box-sizing: border-box; width: 32px; height: 32px; border-radius: 2px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 0 0 4px 5px;
  background: var(--btn); color: var(--btn-text);
  font-family: var(--mono); font-size: 13px; line-height: 1;
}
.shw-step__title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.shw-step__body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ---------- value chain + verdict ---------- */
.shw-caption {
  margin: 30px 0 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2);
}
.shw-chain {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.shw-chain__cell { background: var(--paper); padding: 22px 24px; }
.shw-chain__cell span {
  display: block; font-family: var(--serif); font-size: 32px; font-weight: 500;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.shw-chain__cell em {
  display: block; margin-top: 8px; font-style: normal;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
}
.shw-chain__cell--end { background: var(--accent); }
.shw-chain__cell--end span { color: #fff; }
.shw-chain__cell--end em { color: rgba(255,255,255,.72); }

.shw-verdict {
  margin-top: 22px; padding: 28px 30px;
  background: var(--btn); color: var(--btn-text); border-radius: var(--radius-lg);
}
.shw-verdict__main { display: flex; gap: 30px; align-items: flex-start; }
.shw-verdict__roi {
  flex: none; max-width: 40%;
  font-family: var(--serif); font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.025em; color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}
.shw-verdict__dash { opacity: .6; margin: 0 2px; }
.shw-verdict__head { font-family: var(--serif); font-size: 26px; font-weight: 500; margin-bottom: 8px; }
.shw-verdict__body { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(251,248,240,.8); max-width: 62ch; }
.shw-verdict__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 26px; background: rgba(255,255,255,.12); border-radius: var(--radius); overflow: hidden;
}
.shw-verdict__stats .shw-stat { background: rgba(255,255,255,.05); color: var(--btn-text); padding: 18px; }
.shw-verdict__stats .shw-stat__label { color: rgba(251,248,240,.55); }
.shw-verdict__stats .shw-stat__value { font-size: 24px; }
.shw-verdict__stats .shw-stat--accent .shw-stat__value { color: var(--gold-2); }

/* ---------- portal notes ---------- */
.shw-dashwrap { margin-top: 8px; }
.shw-dashnotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.shw-dashnote {
  padding: 20px 22px; background: var(--cream-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}
.shw-dashnote strong { display: block; color: var(--ink); margin-bottom: 5px; font-size: 15px; }

/* ---------- final CTA ---------- */
.shw-final__inner {
  background: var(--cream-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--ring-top), var(--shadow-soft);
  padding: 52px 46px; text-align: center;
}
.shw-final__title { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.shw-final__inner .lead { max-width: 58ch; margin: 0 auto; color: var(--muted); }
.shw-final__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-top: 32px; }
.shw-final__recap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.shw-final__recap span {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--muted);
}

/* ============================================================
   Portal replica
   ============================================================ */

.shwd {
  --d-bg: #FFFFFF;
  --d-side: #FAFAF9;
  --d-line: #E7E5E2;
  --d-ink: #1B1B19;
  --d-muted: #71716C;
  --d-faint: #A3A29C;
  --d-soft: #F5F5F3;
  --d-good: #157F50;
  --d-goodbg: #E9F5EF;
  --d-red: #C0392B;
  --d-amber: #B07A18;

  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--d-bg);
  box-shadow: 0 30px 70px -34px rgba(40,34,20,.42), 0 6px 16px -8px rgba(40,34,20,.16);
  color: var(--d-ink);
  font-size: 13px;
}
/* Buttons inside the replica inherit the app font; each control sets its own
   colour. Keep this selector's specificity low so single-class state rules
   (e.g. .shwd__nav--on) still win. */
.shwd button { font-family: var(--sans); }
.shwd__chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px; background: #EFEDE8; border-bottom: 1px solid var(--d-line);
}
.shwd__dot { width: 10px; height: 10px; border-radius: 50%; background: #D2CFC8; }
.shwd__url {
  margin-left: 12px; padding: 4px 14px; border-radius: 99px;
  background: #fff; border: 1px solid var(--d-line);
  font-family: var(--mono); font-size: 11.5px; color: var(--d-muted);
}
.shwd__badge {
  flex: none; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted);
}
.shwd__body { display: grid; grid-template-columns: 192px 1fr; min-height: 680px; }

/* sidebar */
.shwd__side { background: var(--d-side); border-right: 1px solid var(--d-line); padding: 14px 10px; display: flex; flex-direction: column; }
.shwd__brand { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 6px; }
.shwd__logo { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; flex: none; }
.shwd__brandname { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.shwd__nav-wrap { margin-top: 10px; }
.shwd__group { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
.shwd__grouplabel {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--d-faint); padding: 6px 9px;
}
.shwd__nav {
  display: flex; align-items: center; gap: 9px;
  width: 100%; text-align: left; padding: 7px 9px;
  background: none; border: none; border-radius: 8px;
  font-size: 13px; cursor: pointer; color: var(--d-ink);
  transition: background .15s ease, color .15s ease;
}
.shwd__nav:hover { background: #EBEAE6; }
.shwd__nav--on { background: var(--d-ink); color: #fff; }
.shwd__nav--quiet { color: var(--d-muted); font-size: 12.5px; }
.shwd__navico { flex: none; width: 15px; height: 15px; opacity: .85; }
.shwd__sidefoot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 1px; }
.shwd__company { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 9px; }
.shwd__companyav {
  flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--d-soft);
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--d-ink);
}
.shwd__companyname { font-size: 12px; font-weight: 600; line-height: 1.25; min-width: 0; }
.shwd__companyname em { display: block; font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--d-muted); margin-top: 1px; }

/* main + topbar */
.shwd__main { padding: 0 0 30px; background: var(--d-bg); min-width: 0; }
.shwd__topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: 54px; padding: 0 20px; border-bottom: 1px solid var(--d-line);
}
.shwd__crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; }
.shwd__crumb {
  background: none; border: none; padding: 2px 3px; font-size: 12.5px;
  color: var(--d-muted); cursor: pointer; white-space: nowrap;
}
.shwd__crumb--mute { cursor: default; }
.shwd__crumb--on { color: var(--d-ink); font-weight: 600; cursor: default; }
.shwd__crumbsep { width: 13px; height: 13px; color: #C7C6C1; flex: none; }
.shwd__topright { display: flex; align-items: center; gap: 10px; }
.shwd__chips { display: inline-flex; gap: 3px; padding: 2px; background: var(--d-soft); border-radius: 8px; }
.shwd__chip {
  border: none; background: none; cursor: pointer;
  font-size: 11.5px; padding: 4px 9px; border-radius: 6px; color: var(--d-muted);
  white-space: nowrap;
}
.shwd__chip--on { background: #fff; color: var(--d-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.shwd__bellwrap { position: relative; }
.shwd__icobtn {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: none; border: 1px solid transparent; cursor: pointer; color: var(--d-muted);
}
.shwd__icobtn:hover, .shwd__icobtn--on { background: var(--d-soft); color: var(--d-ink); }
.shwd__belldot { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--d-red); }
.shwd__bellmenu {
  position: absolute; right: 0; top: 36px; z-index: 5; width: 250px;
  background: #fff; border: 1px solid var(--d-line); border-radius: 10px;
  box-shadow: 0 16px 34px -18px rgba(40,34,20,.4); overflow: hidden;
}
.shwd__bellhead { padding: 9px 12px; border-bottom: 1px solid var(--d-line); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--d-muted); }
.shwd__bellrow { color: var(--d-ink);
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  background: none; border: none; border-bottom: 1px solid var(--d-line);
  font-size: 12.5px; cursor: pointer;
}
.shwd__bellrow:last-child { border-bottom: none; }
.shwd__bellrow:hover { background: var(--d-soft); }
.shwd__avatar--me { width: 28px; height: 28px; border-radius: 50%; background: var(--d-ink); color: #fff; font-size: 10.5px; font-weight: 600; }

.shwd__pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 18px 20px 14px; }
.shwd__h1 { margin: 0; font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.shwd__topmeta { font-size: 11.5px; color: var(--d-muted); white-space: nowrap; }
.shwd__stack { display: flex; flex-direction: column; gap: 14px; padding: 0 20px; }

/* kpi cards */
.shwd__kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.shwd__kpis--4 { grid-template-columns: repeat(4, 1fr); }
.shwd-kpi { border: 1px solid var(--d-line); border-radius: 10px; padding: 11px 12px; background: #fff; }
.shwd-kpi__label { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--d-muted); }
.shwd-kpi__row { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.shwd-kpi__value { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.shwd-kpi__value--good { color: var(--d-good); }
.shwd-pill { font-family: var(--mono); font-size: 9.5px; color: var(--d-good); background: var(--d-goodbg); padding: 2px 6px; border-radius: 99px; }

/* cards */
.shwd__card { border: 1px solid var(--d-line); border-radius: 10px; background: #fff; overflow: hidden; }
.shwd__cardhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 15px; border-bottom: 1px solid var(--d-line); background: #FCFCFB;
  font-size: 13px; font-weight: 600;
}
.shwd__cardmeta { font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--d-muted); letter-spacing: .04em; }
.shwd__cardpad { padding: 15px; }
.shwd__rows { display: flex; flex-direction: column; }
.shwd__row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; border-top: 1px solid var(--d-line); }
.shwd__row:first-child { border-top: none; }
.shwd__sev {
  flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 5px;
}
.shwd__sev--red { background: #FBEBE8; color: var(--d-red); }
.shwd__sev--amber { background: #FBF3E1; color: var(--d-amber); }
.shwd__sev--gray { background: var(--d-soft); color: var(--d-muted); }
.shwd__rowtext { flex: 1; line-height: 1.5; }
.shwd__rowact {
  flex: none; font-size: 11.5px; color: var(--d-muted); background: #fff;
  border: 1px solid var(--d-line); border-radius: 7px; padding: 4px 9px; cursor: pointer;
}
.shwd__rowact:hover { background: var(--d-soft); color: var(--d-ink); }
.shwd__rowact--done { background: var(--d-goodbg); border-color: #BFE3D1; color: var(--d-good); }

/* tables */
.shwd__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shwd__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.shwd__table th {
  text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--d-muted);
  padding: 9px 15px; background: #FCFCFB; border-bottom: 1px solid var(--d-line);
  white-space: nowrap;
}
.shwd__table td { padding: 10px 15px; border-bottom: 1px solid var(--d-line); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shwd__table tr:last-child td { border-bottom: none; }
.shwd__table .r { text-align: right; }
.shwd__table .mute { color: var(--d-muted); }
.shwd__table .good { color: var(--d-good); font-weight: 600; }
.shwd__table td em { display: block; font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--d-faint); margin-top: 2px; }
.shwd__table--click tbody tr { cursor: pointer; }
.shwd__table--click tbody tr:hover { background: #FCFCFB; }
.shwd__total td { background: #FCFCFB; font-weight: 600; }
.shwd__chan { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.shwd__chanico { width: 15px; height: 15px; color: var(--accent); flex: none; }
.shwd__status { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; background: var(--d-goodbg); color: var(--d-good); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.shwd__status--test { background: #FBF3E1; color: var(--d-amber); }
.shwd__status--neutral { background: var(--d-soft); color: var(--d-muted); }

/* charts */
.shwd__chartpad { padding: 18px 15px 12px; }
.shwd-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.shwd-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 7px; }
.shwd-bars__bar {
  position: relative; width: 100%; max-width: 46px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(31,122,87,.62) 100%);
  transition: height .35s cubic-bezier(.16,.84,.44,1);
}
.shwd-bars__tip {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--d-muted); white-space: nowrap;
}
.shwd-bars__x { font-family: var(--mono); font-size: 9.5px; color: var(--d-faint); }
.shwd__chartnote { margin: 14px 0 0; font-size: 12px; color: var(--d-muted); }

/* campaigns */
.shwd__crow { color: var(--d-ink);
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 15px; background: none; border: none; border-top: 1px solid var(--d-line);
  cursor: pointer; font-size: 12.5px;
}
.shwd__crow:first-child { border-top: none; }
.shwd__crow:hover, .shwd__crow--on { background: #FCFCFB; }
.shwd__crowchev { width: 13px; height: 13px; color: var(--d-faint); flex: none; transition: transform .2s ease; }
.shwd__crowchev--open { transform: rotate(90deg); }
.shwd__crowname { flex: 1; font-weight: 500; min-width: 0; }
.shwd__crowstat { font-variant-numeric: tabular-nums; color: var(--d-muted); white-space: nowrap; }
.shwd__crowstat.good { color: var(--d-good); font-weight: 600; }
.shwd__cbody { padding: 4px 15px 16px 40px; background: #FCFCFB; border-top: 1px solid var(--d-line); }
.shwd__cbodylabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--d-muted); margin: 12px 0 8px; }
.shwd__seq { margin: 0; padding-left: 18px; }
.shwd__seq li { font-size: 12.5px; line-height: 1.7; }
.shwd__approve { padding: 15px; }
.shwd__approvehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.shwd__approvename { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.shwd__approvebtns { display: flex; gap: 8px; }
.shwd__btn { font-size: 11.5px; padding: 6px 12px; border-radius: 7px; background: var(--d-ink); color: #fff; border: 1px solid var(--d-ink); cursor: pointer; }
.shwd__btn--ghost { background: #fff; color: var(--d-ink); border-color: var(--d-line); }
.shwd__btn--done { background: var(--d-goodbg); border-color: #BFE3D1; color: var(--d-good); }
.shwd__mailpreview { margin-top: 14px; padding: 15px; background: #FCFCFB; border: 1px solid var(--d-line); border-radius: 9px; }
.shwd__mailsubject { font-weight: 600; margin-bottom: 9px; }
.shwd__mailpreview p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.6; color: #3A3A36; }
.shwd__mailpreview p:last-child { margin-bottom: 0; }

/* leads + detail */
.shwd__back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  background: none; border: 1px solid var(--d-line); border-radius: 7px;
  padding: 5px 10px; font-size: 11.5px; color: var(--d-muted); cursor: pointer;
}
.shwd__back:hover { background: var(--d-soft); color: var(--d-ink); }
.shwd__leadgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.shwd__leadval { margin-top: 5px; font-size: 14px; font-weight: 600; }
.shwd__timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--d-line); }
.shwd__timeline li { position: relative; padding: 0 0 14px 14px; }
.shwd__timeline li::before {
  content: ""; position: absolute; left: -21px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid #fff;
}
.shwd__timeline span { font-size: 12.5px; font-weight: 600; }
.shwd__timeline em { display: block; font-style: normal; font-size: 11.5px; color: var(--d-muted); margin-top: 2px; }

/* kanban */
.shwd__kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 15px; }
.shwd__kcol { background: #FCFCFB; border: 1px solid var(--d-line); border-radius: 9px; padding: 9px; min-height: 150px; }
.shwd__khead {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--d-muted);
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--d-line);
}
.shwd__khead span { background: var(--d-soft); border-radius: 99px; padding: 1px 6px; font-family: var(--mono); }
.shwd__kcard { background: #fff; border: 1px solid var(--d-line); border-radius: 7px; padding: 8px 9px; margin-bottom: 7px; }
.shwd__kcard strong { display: block; font-size: 12px; }
.shwd__kcard em { display: block; font-style: normal; font-size: 11px; color: var(--d-muted); margin-top: 2px; }

/* replies + thread */
.shwd__reply { display: flex; gap: 11px; padding: 12px 15px; border-top: 1px solid var(--d-line); text-align: left; }
.shwd__reply:first-child { border-top: none; }
.shwd__reply--btn { color: var(--d-ink); width: 100%; background: none; border-left: none; border-right: none; border-bottom: none; cursor: pointer; align-items: center; }
.shwd__reply--btn:hover { background: #FCFCFB; }
.shwd__avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--d-soft);
  font-family: var(--mono); font-size: 10.5px; color: var(--d-muted);
}
.shwd__replybody { min-width: 0; flex: 1; display: block; }
.shwd__replytop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shwd__replytop strong { font-size: 13px; }
.shwd__tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; background: var(--d-soft); color: var(--d-muted); padding: 2px 6px; border-radius: 5px; }
.shwd__tag--good { background: var(--d-goodbg); color: var(--d-good); }
.shwd__replychan { width: 13px; height: 13px; color: var(--d-faint); }
.shwd__replyago { font-family: var(--mono); font-size: 10px; color: var(--d-faint); }
.shwd__replytitle { display: block; font-size: 11.5px; color: var(--d-muted); margin-top: 2px; }
.shwd__replytext { display: block; margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; }
.shwd__replychev { width: 14px; height: 14px; color: var(--d-faint); flex: none; }
.shwd__thread { display: flex; flex-direction: column; gap: 10px; }
.shwd__msg { max-width: 78%; padding: 11px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; }
.shwd__msg p { margin: 0; }
.shwd__msgwho { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; opacity: .7; }
.shwd__msg--them { background: var(--d-soft); align-self: flex-start; }
.shwd__msg--us { background: var(--accent-soft); align-self: flex-end; }
.shwd__threadfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--d-line); }

/* knowledge / roi / billing */
.shwd__note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid rgba(31,122,87,.24); background: #F1F8F4;
  border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: #1F4C3B;
}
.shwd__noteico { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--accent-deep); }
.shwd__kv { display: flex; flex-direction: column; gap: 10px; }
.shwd__kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 9px; border-bottom: 1px solid var(--d-line); }
.shwd__kv > div:last-child { border-bottom: none; padding-bottom: 0; }
.shwd__kv span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--d-muted); }
.shwd__kv strong { font-size: 12.5px; text-align: right; }
.shwd__roigrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shwd__roilabel { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--d-muted); }
.shwd__roival { margin-top: 7px; font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.shwd__roival--sm { font-size: 22px; }
.shwd__scenario { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shwd__scen { border: 1px solid var(--d-line); border-radius: 9px; padding: 12px; background: #FCFCFB; }
.shwd__scen--on { border-color: var(--accent); background: #F1F8F4; }
.shwd__meters { display: flex; flex-direction: column; gap: 16px; }
.shwd__meterhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; }
.shwd__metermeta { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--d-muted); }
.shwd__metertrack { height: 7px; border-radius: 99px; background: var(--d-soft); overflow: hidden; }
.shwd__meterfill { height: 100%; border-radius: 99px; background: var(--accent); }

/* ============================================================
   Portal motion — the demo should feel alive to click through.
   Transform/opacity only, plus two height/width grow-ins that run once on
   mount. All of it is switched off under prefers-reduced-motion at the bottom
   of this file, and the tween hook in Showcase.jsx bails out there too.
   ============================================================ */

@keyframes shwd-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes shwd-grow { from { height: 0; } }
@keyframes shwd-widen { from { width: 0; } }
@keyframes shwd-pop { from { opacity: 0; transform: scale(.96); } }
@keyframes shwd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}
@keyframes shwd-ring {
  0% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); }
  70% { box-shadow: 0 0 0 7px rgba(192,57,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); }
}

/* each view fades up, its cards cascading, when you switch tabs */
.shwd__stack > * { animation: shwd-rise .34s cubic-bezier(.16,.84,.44,1) both; }
.shwd__stack > *:nth-child(2) { animation-delay: .05s; }
.shwd__stack > *:nth-child(3) { animation-delay: .1s; }
.shwd__stack > *:nth-child(4) { animation-delay: .15s; }
.shwd__stack > *:nth-child(5) { animation-delay: .2s; }

.shwd-bars__bar { animation: shwd-grow .55s cubic-bezier(.16,.84,.44,1) both; }
.shwd__meterfill { animation: shwd-widen .8s cubic-bezier(.16,.84,.44,1) both; }
.shwd__kcard { animation: shwd-pop .34s cubic-bezier(.16,.84,.44,1) both; }
.shwd__msg { animation: shwd-rise .38s cubic-bezier(.16,.84,.44,1) both; }
.shwd__msg--us { animation-delay: .12s; }
.shwd__cbody { animation: shwd-rise .26s cubic-bezier(.16,.84,.44,1) both; }
.shwd__bellmenu { animation: shwd-rise .18s cubic-bezier(.16,.84,.44,1) both; }
.shwd__belldot { animation: shwd-ring 2.6s ease-out infinite; }

/* live activity line in the browser chrome */
.shwd__ticker {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
  margin-left: 14px; overflow: hidden;
}
.shwd__live {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--d-good); animation: shwd-pulse 2.1s ease-in-out infinite;
}
.shwd__tickeritem {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 11.5px; color: var(--d-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  animation: shwd-rise .4s cubic-bezier(.16,.84,.44,1) both;
}
.shwd__tickerico { width: 13px; height: 13px; flex: none; color: var(--accent); }

/* hover feedback on the things worth clicking */
.shwd-kpi { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.shwd-kpi:hover { border-color: #D6D4CF; box-shadow: 0 2px 10px -6px rgba(40,34,20,.28); transform: translateY(-1px); }
.shwd__kcard { transition: transform .16s ease, box-shadow .16s ease; }
.shwd__kcard:hover { transform: translateY(-2px); box-shadow: 0 4px 12px -6px rgba(40,34,20,.3); }
.shwd__nav, .shwd__chip, .shwd__rowact, .shwd__btn, .shwd__back { transition: background .16s ease, color .16s ease, border-color .16s ease; }
.shwd__reply--btn, .shwd__crow { transition: background .16s ease; }
.shwd__table--click tbody tr { transition: background .14s ease; }

@media (prefers-reduced-motion: reduce) {
  .shwd__stack > *,
  .shwd-bars__bar,
  .shwd__meterfill,
  .shwd__kcard,
  .shwd__msg,
  .shwd__cbody,
  .shwd__bellmenu,
  .shwd__belldot,
  .shwd__live,
  .shwd__tickeritem { animation: none; }
  .shwd-kpi:hover, .shwd__kcard:hover { transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .shwd__kpis { grid-template-columns: repeat(3, 1fr); }
  .shwd__kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .shw-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .shw-hero__title { max-width: 20ch; }
  .shw-hero__lead { max-width: 62ch; }
  .shw-panel__inputs--4 { grid-template-columns: repeat(2, 1fr); }
  .shw-engines { grid-template-columns: repeat(2, 1fr); }
  .shw-included__list { grid-template-columns: repeat(2, 1fr); }
  .shw-ftotal { grid-template-columns: 1fr; }
  .shw-dashnotes, .shw-ramp { grid-template-columns: 1fr; }
  .shwd__body { grid-template-columns: 1fr; }
  .shwd__side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; border-right: none; border-bottom: 1px solid var(--d-line); padding: 12px; }
  .shwd__brand { height: auto; width: 100%; padding: 0 0 4px; }
  /* one horizontally-scrollable row of tabs instead of four wrapped rows.
     min-width:0 on the grid children is load-bearing: without it the sidebar
     stretches to its widest content and the whole demo scrolls sideways. */
  .shwd__body > * { min-width: 0; }
  .shwd__side { position: relative; flex-wrap: nowrap; width: 100%; min-width: 0; }
  .shwd__nav-wrap {
    display: flex; flex-wrap: nowrap; gap: 6px; margin: 0;
    flex: 1 1 auto; min-width: 0; max-width: 100%;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .shwd__nav-wrap::-webkit-scrollbar { display: none; }
  .shwd__group { flex-direction: row; flex-wrap: nowrap; gap: 6px; margin-bottom: 0; }
  .shwd__nav { white-space: nowrap; scroll-snap-align: start; }
  /* fade at the right edge so it reads as scrollable */
  .shwd__side::after {
    content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 100%;
    pointer-events: none; background: linear-gradient(to right, rgba(250,250,249,0), var(--d-side));
  }
  .shwd__grouplabel { display: none; }
  .shwd__nav { width: auto; }
  .shwd__sidefoot { display: none; }
  .shwd__leadgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* narrow-but-not-phone (tablet portrait): the four-across rows are the first
     things to break, so they fold here rather than waiting for the phone block */
  .shw-chain, .shw-verdict__stats, .shw-ftotal__grid { grid-template-columns: repeat(2, 1fr); }
  /* three tiles in two columns leaves an empty cell — let the last one span */
  .shw-ftotal__grid .shw-stat:last-child { grid-column: 1 / -1; }
  .shw-fsteps { grid-template-columns: repeat(2, 1fr); }
  .shw-fstep { border-bottom: 1px solid var(--line); }
  .shw-verdict__main { flex-direction: column; gap: 14px; }
  .shw-verdict__roi { max-width: 100%; }
  .shw-verdict, .shw-ftotal { padding: 22px 20px; }
  .shw-included__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .shw-panel { padding: 22px 18px; }
  .shw-panel__inputs--3, .shw-panel__inputs--4 { grid-template-columns: 1fr; }
  .shw-panel__out--3 { grid-template-columns: 1fr; }
  .shw-hero__trust { gap: 24px; }
  .shw-proof__tile { padding: 12px 10px; }
  .shw-proof__label { font-size: 10.5px; }
  .shw-proof__read { display: none; }
  .shw-included { padding: 22px 18px; }
  .shw-included__list { grid-template-columns: 1fr; }
  .shw-engine { padding: 16px 15px 15px; }
  .shw-engine__vol { font-size: 28px; }
  .shw-engine__seats { font-size: 13.5px; }
  .shw-final__inner { padding: 34px 20px; }
  
  .shwd__kpis, .shwd__kpis--4 { grid-template-columns: repeat(2, 1fr); }
  .shwd__roigrid, .shwd__scenario { grid-template-columns: 1fr; gap: 16px; }
  .shwd__kanban { grid-template-columns: 1fr; }
  .shwd__stack { padding: 0 12px; }
  .shwd__pagehead, .shwd__topbar { padding-left: 12px; padding-right: 12px; }
  .shwd__pagehead { flex-direction: column; align-items: flex-start; gap: 4px; }
  .shwd__badge { display: none; }
  /* no room for the activity line on a phone — keep the live dot, drop the text
     rather than showing a two-word fragment */
  .shwd__ticker { margin-left: 10px; flex: none; }
  .shwd__tickeritem { display: none; }
  .shwd__url { font-size: 10.5px; padding: 3px 10px; margin-left: 8px; }
  /* comfortable taps: 34px pills, 30px chips and row actions */
  .shwd__nav { font-size: 12.5px; padding: 8px 11px; min-height: 34px; }
  .shwd__chip { padding: 7px 11px; min-height: 30px; }
  .shwd__rowact { padding: 7px 11px; min-height: 30px; }
  .shwd__icobtn { width: 34px; height: 34px; }
  .shwd__btn { padding: 8px 13px; }
  .shw-proof__more { padding: 6px 0; }

  /* the breadcrumb has no room and the page title below says the same thing */
  .shwd__crumbs { display: none; }
  .shwd__topright { margin-left: auto; }

  /* card headers stack instead of squeezing the title into two words */
  .shwd__cardhead { flex-direction: column; align-items: flex-start; gap: 3px; }

  /* action rows: badge + button on one line, the sentence full width below */
  .shwd__row {
    display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "sev act" "text text"; gap: 9px 10px; align-items: center;
  }
  .shwd__sev { grid-area: sev; justify-self: start; }
  .shwd__rowact { grid-area: act; justify-self: end; }
  .shwd__rowtext { grid-area: text; }

  /* wide tables: keep the swipe, fade the right edge so it's obvious */
  .shwd__tablewrap { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); }

  .shwd__reply { align-items: flex-start; }

  /* the chrome bar above already says user.stonehaven.capital — drop the
     wordmark and give the width to the tab row */
  .shwd__brandname { display: none; }
  .shwd__brand { padding: 0 4px 0 0; }
  .shwd__leadgrid { grid-template-columns: 1fr; }
  .shwd__crowstat { display: none; }
  .shwd__topmeta { display: none; }
  /* topbar gets tight on phones — keep the current page, drop the trail */
  .shwd__crumbs .shwd__crumb:not(.shwd__crumb--on),
  .shwd__crumbsep { display: none; }
  .shwd__msg { max-width: 92%; }
}

/* ---------- very small phones (360 and under) ----------
   The four-step value chain is the tightest thing on the page; at 360px its
   cells need less padding and a smaller figure or the grid overflows. */
@media (max-width: 420px) {
  .shw-chain__cell { padding: 16px 13px; min-width: 0; }
  .shw-chain__cell span { font-size: 25px; }
  .shw-chain__cell em { font-size: 9.5px; letter-spacing: .1em; }
  .shw-stat { padding: 16px; }
  .shw-stat__value { font-size: 27px; }
  .shw-verdict__stats .shw-stat__value,
  .shw-ftotal__grid .shw-stat__value { font-size: 21px; }
  .shw-verdict__roi { font-size: 30px; }
  .shw-verdict__head { font-size: 22px; }
  .shw-engine__vol { font-size: 25px; }
  .shw-engine__seats { font-size: 12.5px; }
  .shw-proof__metric { font-size: 21px; }
  .shw-proof__label { font-size: 9.5px; }
  .shw-hero__trust strong { font-size: 25px; }
}

/* ============================================================
   Capability sections (02 data engine, 03 old-vs-new,
   07 onboarding, 08 roster) — added 2026-07-27 off Sabo's brief.
   Same tokens and rhythm as the sections above; no pricing of ours
   appears here (the $6-8k figure is what an in-house SDR costs).
   ============================================================ */

/* ---------- 02 · data engine ---------- */
.shw-dstats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 26px;
}
.shw-dstat { background: var(--cream-raised); padding: 26px 24px; }
.shw-dstat strong {
  display: block; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.shw-dstat span {
  display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted);
  max-width: 34ch;
}

/* ---------- 02 · the engine: one stage at a time ----------
   A carousel, not a two-column list: the active stage is a single paper card
   in the middle of the block, the stages either side of it stay in frame as
   silhouettes, and the machine running that stage sits in a dark well at the
   foot of the card — the proof directly under the claim it belongs to. The
   card is cream and the well is dark because that is the site's own pairing;
   nothing here borrows another product's look. */
.shw-eng { position: relative; }
.shw-eng__slab {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  margin: 0 0 16px; padding: 0 2px;
}
.shw-eng__slab b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 600;
}
.shw-eng__slab span { font-size: 12.5px; color: var(--muted-2); }

/* the three-across frame: silhouette · card · silhouette.
   --peek is how much of a neighbour clears the centre card; the rest of it
   runs underneath, which is what makes the three read as one deck. */
.shw-caro {
  position: relative; display: flex; justify-content: center;
  --card-w: 660px; --peek: 120px;
}

/* Silhouettes — they sit BEHIND the centre card, peeking out just enough to
   read as "there is more". --peek controls how many px of silhouette clear
   the card edge. On hover they slide out a little more. */
.shw-side {
  position: absolute; top: 50%; z-index: 1;
  width: calc(var(--card-w) * .82); height: 88%;
  display: flex; flex-direction: column; overflow: hidden;
  cursor: pointer; text-align: left;
  padding: 26px 26px 0; border-radius: var(--radius-lg);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -36px rgba(40,34,20,.7);
  font: inherit; color: inherit; opacity: .88; filter: blur(1.2px);
  padding: 0;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1),
              transform .5s cubic-bezier(.22,.61,.36,1),
              filter .5s cubic-bezier(.22,.61,.36,1);
  animation: shwSideIn .7s cubic-bezier(.22,.61,.36,1) both;
}
.shw-side--prev {
  right: calc(50% + var(--card-w) / 2 - var(--peek));
  transform: translateY(-50%) scale(.96);
  transform-origin: right center;
}
.shw-side--next {
  left: calc(50% + var(--card-w) / 2 - var(--peek));
  transform: translateY(-50%) scale(.96);
  transform-origin: left center;
}
.shw-side:hover { opacity: 1; filter: blur(.6px); }
.shw-side--prev:hover { transform: translateY(-50%) translateX(-20px) scale(.96); }
.shw-side--next:hover { transform: translateY(-50%) translateX(20px) scale(.96); }
@keyframes shwSideIn { from { opacity: 0; filter: blur(4px); } to { opacity: .88; filter: blur(1.2px); } }
/* real content inside silhouettes — mirrors the main card structure */
.shw-side__content {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  padding: 26px 26px 0; pointer-events: none;
}
.shw-side__content .shw-scard__title { font-size: 20px; }
.shw-side__content .shw-scard__body { font-size: 12px; }
.shw-side__content .shw-well { font-size: 11px; }
.shw-side__content .shw-well--side { margin: auto -26px 0; flex: 1; min-height: 0; }
.shw-side__content .shw-leads__row { padding: 6px 16px; }
.shw-side__content .shw-leads__hd { padding: 6px 16px; }
.shw-side__content .shw-eng__stage { transform: scale(.88); transform-origin: top center; }

/* the active stage */
.shw-scard {
  position: relative; z-index: 3; overflow: hidden;
  width: min(100%, var(--card-w));
  display: flex; flex-direction: column;
  padding: 30px 32px 0; border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(660px 280px at 88% 2%, var(--accent-soft), transparent 66%),
    var(--cream-raised);
  box-shadow:
    0 2px 4px rgba(40,34,20,.04),
    0 12px 24px -8px rgba(40,34,20,.12),
    0 48px 80px -40px rgba(40,34,20,.5);
  /* slides in from whichever side the deck moved — --from is +1 / -1 */
  animation: shwSlide .72s cubic-bezier(.16,1,.3,1) both;
}
@keyframes shwSlide {
  0% { opacity: 0; transform: translateX(calc(var(--from, 1) * 100px)) scale(.94); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.shw-scard__hd { display: flex; align-items: center; gap: 14px; }
.shw-scard__n {
  font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums;
  opacity: .18;
}
.shw-scard__kick {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: rgba(31,122,87,.09); border: 1px solid rgba(31,122,87,.2);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-deep);
}
.shw-scard__ico { width: 14px; height: 14px; }
/* auto-advance progress — along the top edge, clipped by the card radius */
.shw-scard__tick { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; }
.shw-scard__tick::after {
  content: ""; position: absolute; inset: 0; transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--gold, #B89968));
  animation: shwStep 5.2s linear both;
}
@keyframes shwStep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.shw-scard__title {
  margin: 15px 0 0; font-family: var(--serif); font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 600; line-height: 1.26; letter-spacing: -0.02em; color: var(--ink);
  text-align: center;
}
.shw-scard__body {
  margin: 11px auto 24px; font-size: 15px; line-height: 1.65; color: var(--ink-soft); max-width: 64ch;
  text-align: center;
}

/* the machine, bled to the card edges at its foot */
/* margin-top:auto pins the well to the foot of the card, so a fixed card
   height absorbs the difference between stages instead of the page jumping. */
.shw-well {
  margin: 24px -32px 0; margin-top: auto; padding: 20px 24px 18px;
  border-top: 1px solid rgba(20,23,15,.08);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(700px 300px at 84% -20%, rgba(31,122,87,.18), transparent 66%),
    radial-gradient(560px 320px at 6% 118%, rgba(184,153,104,.10), transparent 64%),
    linear-gradient(180deg, #1A1610, #11100B);
  color: #F5F1E6;
}
/* the leads table — a pixel-faithful echo of the real SH dashboard */
.shw-leads {
  margin-bottom: 14px; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.shw-leads__hd {
  display: grid; grid-template-columns: 1.3fr 1fr .8fr auto auto;
  gap: 0 10px; padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.shw-leads__hd span {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(245,241,230,.36);
}
.shw-leads__row {
  display: grid; grid-template-columns: 1.3fr 1fr .8fr auto auto;
  gap: 0 10px; align-items: center; padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  opacity: 0; transform: translateY(3px);
}
.shw-leads__row:last-child { border-bottom: 0; }
.is-live .shw-leads__row {
  animation: shwPop .32s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i) * .08s);
}
.shw-leads__who b {
  display: block; font-size: 11.5px; font-weight: 600; color: #F5F1E6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shw-leads__who i {
  display: block; margin-top: 1px; font-style: normal; font-size: 9.5px;
  color: rgba(245,241,230,.38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shw-leads__co, .shw-leads__ti {
  font-size: 10.5px; color: rgba(245,241,230,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.shw-leads__st {
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.shw-leads__st--contacted { color: #58D69C; background: rgba(88,214,156,.15); }
.shw-leads__st--replied { color: #E8A838; background: rgba(232,168,56,.15); }
.shw-leads__st--bounced { color: #E85A5A; background: rgba(232,90,90,.15); }
.shw-leads__step {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: rgba(245,241,230,.45); text-align: center;
}

.shw-eng__av {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-size: 17px; color: #F5F1E6;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
}
.shw-eng__who { display: block; min-width: 0; }
.shw-eng__who b { display: block; font-size: 14.5px; font-weight: 600; }
.shw-eng__who em {
  display: block; font-style: normal; font-size: 12.5px; color: rgba(245,241,230,.6); margin-top: 2px;
}
.shw-eng__meta {
  grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(245,241,230,.42);
}
/* Every stage reserves the same height so the card does not resize under the
   visitor as the stages auto-advance. Sized to the tallest (verification). */
.shw-eng__stage { min-height: 180px; padding: 10px 0 2px; }
@keyframes shwFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* the tab strip under the carousel — the four stages, always countable */
.shw-caro__dots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px;
}
.shw-dot {
  padding: 8px 15px; border-radius: 999px; cursor: pointer; font: inherit;
  background: var(--paper); border: 1px solid var(--line);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.shw-dot span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); transition: color .25s ease;
}
.shw-dot:hover { border-color: var(--line-strong); }
.shw-dot--on { background: var(--accent); border-color: var(--accent); }
.shw-dot--on span { color: #fff; }

.shw-viz__bar {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(245,241,230,.62); margin-bottom: 14px;
}
.shw-viz__pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #58D69C; flex: none;
  box-shadow: 0 0 0 0 rgba(88,214,156,.55); animation: shwPulse 1.9s ease-out infinite;
}
@keyframes shwPulse {
  0% { box-shadow: 0 0 0 0 rgba(88,214,156,.5); }
  70% { box-shadow: 0 0 0 7px rgba(88,214,156,0); }
  100% { box-shadow: 0 0 0 0 rgba(88,214,156,0); }
}
.shw-viz__verdict {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09);
}
.shw-viz__verdict--tight { margin-top: 12px; }
.shw-viz__verdict strong {
  display: block; font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: -.01em; color: #58D69C;
}
.shw-viz__verdict span {
  display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: rgba(245,241,230,.55);
}

/* stage 1 — sources.
   A wall of twelve brand-coloured chips read as a sticker sheet, and these
   marks are not transparent glyphs, so they cannot be flattened to one colour
   either. The stage is a query log instead: one contact at the top, then a
   rail of source rows underneath it — logo, name, verdict — which is exactly
   what the panel claims is happening. Hits stay lit, misses fade back. */
/* A compact query log — two columns of rows, each with a status dot, the
   source mark and its verdict. Small on purpose: it is evidence under the
   claim, not the headline. */
.shw-srcs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 16px; }
.shw-src {
  position: relative; display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 3px 8px 3px 17px; border-radius: 8px;
  opacity: 0; transform: translateY(4px);
  transition: background .25s ease;
}
.shw-src:hover { background: rgba(255,255,255,.04); }
.is-live .shw-src { animation: shwPop .32s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i) * .06s); }
@keyframes shwPop { to { opacity: 1; transform: none; } }
.shw-src__dot {
  position: absolute; left: 3px; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: rgba(245,241,230,.22);
}
.shw-src__chip {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  background: #fff; border-radius: 5px;
}
.shw-src__chip img { width: 15px; height: 15px; object-fit: contain; }
.shw-src__n {
  font-size: 12px; font-weight: 500; color: rgba(245,241,230,.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.shw-src__n em {
  font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: .1em;
  text-transform: uppercase; color: #58D69C; margin-left: 6px;
  padding: 1px 4px; border-radius: 4px;
  background: rgba(88,214,156,.14); border: 1px solid rgba(88,214,156,.28);
}
.shw-src__s {
  margin-left: auto; flex: none; font-style: normal;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245,241,230,.28);
}
.shw-src--hit .shw-src__dot { background: #58D69C; }
.shw-src--hit .shw-src__s { color: #58D69C; }
.shw-src--miss { opacity: 0; }
.shw-src--miss .shw-src__chip { filter: grayscale(1); opacity: .45; }
.shw-src--miss .shw-src__n { color: rgba(245,241,230,.4); }
.is-live .shw-src--miss { animation: shwPopMiss .32s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i) * .06s); }
@keyframes shwPopMiss { to { opacity: .55; transform: none; } }
/* our own source is the point of the stage — it gets the only filled row */
.shw-src--own { background: rgba(31,122,87,.2); box-shadow: inset 0 0 0 1px rgba(88,214,156,.3); }
.shw-src--own .shw-src__dot { box-shadow: 0 0 9px rgba(88,214,156,.8); }

/* stage 2 — own database */
.shw-db__count strong {
  display: block; font-family: var(--serif); font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 600; letter-spacing: -.02em; color: #F5F1E6; font-variant-numeric: tabular-nums;
}
.shw-db__count span {
  display: block; margin-top: 4px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(245,241,230,.5);
}
.shw-db__cmp { display: grid; gap: 12px; margin-top: 22px; }
.shw-db__row { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.shw-db__lab { font-size: 12.5px; color: rgba(245,241,230,.6); }
.shw-db__track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
.shw-db__fill { display: block; height: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(0); }
.is-live .shw-db__fill--them { background: rgba(245,241,230,.32); animation: shwBar .8s cubic-bezier(.22,.61,.36,1) .15s both; --w: .1; }
.is-live .shw-db__fill--us { background: linear-gradient(90deg, var(--accent), #58D69C); animation: shwBar 1.1s cubic-bezier(.22,.61,.36,1) .3s both; --w: 1; }
@keyframes shwBar { to { transform: scaleX(var(--w)); } }
.shw-db__row b { font-family: var(--serif); font-size: 17px; color: rgba(245,241,230,.6); font-variant-numeric: tabular-nums; }
.shw-db__row--ours b { color: #58D69C; }
.shw-db__note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(245,241,230,.55); }

/* stage 3 — verification passes */
.shw-passes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.shw-passes li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  opacity: 0;
}
.is-live .shw-passes li { animation: shwSlide .42s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i) * .28s); }
@keyframes shwSlide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.shw-passes__tick {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(88,214,156,.16); color: #58D69C; margin-top: 1px;
}
.shw-passes__tick svg { width: 11px; height: 11px; }
.shw-passes__txt b { display: block; font-size: 13.5px; font-weight: 600; }
.shw-passes__txt em {
  display: block; font-style: normal; font-size: 12px; line-height: 1.45; margin-top: 2px;
  color: rgba(245,241,230,.55);
}

/* stage 4 — research + opener */
.shw-sig { display: flex; flex-wrap: wrap; gap: 7px; }
.shw-sig__chip {
  font-size: 12px; padding: 7px 11px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.11);
  color: rgba(245,241,230,.82); opacity: 0;
}
.is-live .shw-sig__chip { animation: shwPop .34s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i) * .13s); }
.shw-opener {
  margin-top: 18px; padding: 15px 16px; border-radius: 13px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-left: 2px solid var(--accent);
}
.shw-opener__lab {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(245,241,230,.45); margin-bottom: 7px;
}
.shw-opener p {
  margin: 0; font-size: 14px; line-height: 1.62; color: rgba(245,241,230,.9);
}
.is-live .shw-opener p { animation: shwFade .5s ease .55s both; }

/* panel footer — the output */
.shw-eng__out {
  margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.09);
  display: grid; gap: 8px;
}
.shw-eng__outlab {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,241,230,.45);
}
/* min-width:0 — the row is a grid item, and grid items default to min-width
   auto, which lets the mono address push the badge out of the panel instead
   of letting it ellipsis. */
.shw-eng__outrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shw-eng__outico { width: 15px; height: 15px; color: rgba(245,241,230,.5); flex: none; }
.shw-eng__outrow code {
  font-family: var(--mono); font-size: 12.5px; color: #F5F1E6;
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shw-eng__ok {
  margin-left: auto; flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: #58D69C;
  background: rgba(88,214,156,.13); border: 1px solid rgba(88,214,156,.28);
  padding: 3px 8px; border-radius: 999px;
}
.shw-eng__disc {
  margin: 16px auto 0; max-width: 660px; text-align: center;
  font-size: 11.5px; line-height: 1.5; color: var(--muted-2);
}

/* Below the point where the silhouettes still have room, they stop earning
   their space — the card takes the full width and the tab strip carries the
   sequence on its own. */
/* one height for all four stages, so switching never moves the page */
@media (min-width: 1081px) {
  .shw-scard { min-height: 960px; }
}
@media (max-width: 1080px) {
  .shw-side { display: none; }
}
@media (max-width: 700px) {
  .shw-scard { padding: 24px 20px 0; }
  .shw-well { margin: 20px -20px 0; padding: 16px 16px 14px; }
  .shw-srcs { grid-template-columns: 1fr; }
  .shw-db__row { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .shw-eng__stage { min-height: 0; }
  .shw-leads__hd, .shw-leads__row { grid-template-columns: 1.3fr auto auto; }
  .shw-leads__co, .shw-leads__ti { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shw-scard__tick::after, .shw-viz__pulse { animation: none; }
  .shw-scard, .shw-side { animation: none; opacity: 1; transform: none; }
  .shw-side--prev { transform: translateY(-50%); }
  .shw-side--next { transform: translateY(-50%); }
  .is-live .shw-src, .is-live .shw-src--miss,
  .is-live .shw-db__fill--them, .is-live .shw-db__fill--us,
  .is-live .shw-passes li, .is-live .shw-sig__chip, .is-live .shw-opener p,
  .shw-eng__stage { animation: none !important; opacity: 1; transform: none; }
  .is-live .shw-db__fill--them { transform: scaleX(.1); }
  .is-live .shw-db__fill--us { transform: scaleX(1); }
  .shw-src--miss { opacity: .55; }
  /* 07 · the rail draws instantly instead of animating */
  .shw-onb__n::after { animation: none; }
  .shw-onb__rail::after { transition: none; transform: scaleY(1); }
  .shw-onb__n { transition: none; transform: scale(1); }
  .shw-onb__body, .shw-onb__points li { transition: none; opacity: 1; transform: none; }
}

.shw-owned {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 34px; align-items: center;
  margin-top: 22px; padding: 30px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background:
    radial-gradient(620px 260px at 88% 10%, var(--accent-soft), transparent 68%),
    var(--paper);
}
.shw-owned__title {
  font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.015em; margin: 0 0 10px;
}
.shw-owned__body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.shw-owned__items { display: grid; gap: 10px; }
.shw-owned__item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 16px; background: var(--cream-raised);
  border: 1px solid var(--line); border-radius: 12px;
}
.shw-owned__item strong { font-size: 15px; font-weight: 600; flex: none; }
.shw-owned__item span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }

/* ---------- 03 · old way vs our way ----------
   Each side is a lane of two rows: the label, then the card. The lanes
   stretch to equal height, so `auto 1fr` puts both labels on one line
   however tall the cards are, and `align-self: center` keeps the shorter
   card centred against the taller one. */
.shw-vs {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 24px;
  align-items: stretch;
}
.shw-vs__lane { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.shw-vs__col {
  align-self: center;
  padding: 24px 22px 26px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--cream-raised);
  opacity: .7;
}
.shw-vs__col--ours {
  border: none; opacity: 1;
  background: linear-gradient(165deg, #1B1712 0%, #12100B 100%);
  color: #F5F1E6;
  padding: 42px 40px 46px;
  border-radius: calc(var(--radius-lg) + 4px);
  box-shadow: 0 40px 80px -20px rgba(18,16,11,.55), 0 0 0 1px rgba(245,241,230,.08);
  position: relative;
}
/* a faint cream wash rising from the bottom edge, so the card doesn't end on
   flat black. Sits under the content and ignores pointer events. */
.shw-vs__col--ours::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(to top, rgba(247,242,231,.085) 0%, rgba(247,242,231,.03) 45%, transparent 100%);
}
.shw-vs__col--ours > * { position: relative; z-index: 1; }
/* now a standalone label above the card, so it carries more weight than
   the in-card kickers elsewhere on the page */
.shw-vs__kicker {
  align-self: end; text-align: center;
  /* the 0.22em tracking hangs off the last letter, which drags centred text
     visually to the left; the matching indent puts it back */
  text-indent: 0.22em;
  font-family: var(--mono); font-size: 16px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 0; padding-left: 0;
}
.shw-vs__lane--ours .shw-vs__kicker { color: var(--accent-deep); font-weight: 600; }
.shw-vs__title {
  font-family: var(--serif); font-size: clamp(24px, 2.6vw, 31px); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px;
}
.shw-vs__col--ours .shw-vs__title { color: #F5F1E6; font-size: clamp(28px, 3vw, 36px); }
.shw-vs__cost {
  font-size: 14px; color: var(--muted); padding-bottom: 18px;
  border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.shw-vs__col--ours .shw-vs__cost {
  color: rgba(125,211,160,.9); font-weight: 600;
  border-bottom-color: rgba(245,241,230,.12);
}
.shw-vs__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.shw-vs__rows li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.shw-vs__col--ours .shw-vs__rows li { font-size: 15.5px; color: rgba(245,241,230,.82); }
.shw-vs__ico { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--muted-2); }
.shw-vs__col--ours .shw-vs__ico { color: rgba(125,211,160,.9); }

/* ---------- 07 · onboarding steps ----------
   The rail is the whole idea here: a hairline that DRAWS itself downward as
   each step scrolls in (.is-on, set by an IntersectionObserver in Onboarding),
   with the number switching from a ghosted outline to a filled accent chip.
   Numbers are set in --sans, matching the "Forget leads." hero cut. */
.shw-onb { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.shw-onb__step { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 28px; }
.shw-onb__rail { position: relative; display: flex; justify-content: center; }

/* the static groove the accent line travels down */
.shw-onb__rail::before {
  content: ""; position: absolute; top: 0; bottom: -6px; left: 50%;
  width: 2px; margin-left: -1px; border-radius: 2px;
  background: var(--line);
}
/* the accent line itself — scaled to 0 until the step lights up */
.shw-onb__rail::after {
  content: ""; position: absolute; top: 0; bottom: -6px; left: 50%;
  width: 2px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, var(--ink), rgba(29,26,20,.22));
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1) .1s;
}
.shw-onb__step.is-on .shw-onb__rail::after { transform: scaleY(1); }
.shw-onb__step:last-child .shw-onb__rail::before,
.shw-onb__step:last-child .shw-onb__rail::after { bottom: auto; height: 30px; }

.shw-onb__n {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: flex-start;
  box-sizing: border-box; width: 54px; height: 54px; border-radius: 2px;
  padding: 0 0 8px 9px; line-height: 1;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  font-family: var(--sans); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  transform: scale(.9);
  transition: color .5s cubic-bezier(.22,.61,.36,1),
              box-shadow .5s cubic-bezier(.22,.61,.36,1),
              background .5s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.34,1.56,.64,1);
}
/* lit = the filled house mark; unlit stays a pale outline, so the rail still
   reads as a path being completed rather than four identical tiles */
.shw-onb__step.is-on .shw-onb__n {
  color: var(--btn-text); transform: scale(1);
  background: var(--ink);
  box-shadow: 0 10px 22px -12px rgba(29,26,20,.55);
}
/* one soft ping the moment a step lights up */
.shw-onb__n::after {
  content: ""; position: absolute; inset: -2px; border-radius: 3px;
  border: 2px solid var(--ink); opacity: 0;
}
.shw-onb__step.is-on .shw-onb__n::after { animation: shwPing 1.5s cubic-bezier(.22,.61,.36,1) .25s 1; }
@keyframes shwPing {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.85); }
}

/* body slides in behind the number */
.shw-onb__body {
  padding: 0 0 52px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1) .12s,
              transform .7s cubic-bezier(.22,.61,.36,1) .12s;
}
.shw-onb__step.is-on .shw-onb__body { opacity: 1; transform: none; }
.shw-onb__step:last-child .shw-onb__body { padding-bottom: 0; }
.shw-onb__when {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 19px 0 8px;
}
/* set in --sans (not the section serif) so the step reads as a UI label,
   the same cut as the "Forget leads." half of the hero */
.shw-onb__title {
  font-family: var(--sans); font-size: clamp(20px, 2.15vw, 25px); font-weight: 700;
  line-height: 1.25; letter-spacing: -0.025em; margin: 0 0 10px;
}
.shw-onb__lead { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); max-width: 62ch; }
.shw-onb__points {
  list-style: none; margin: 20px 0 0; padding: 22px 24px;
  display: grid; gap: 12px;
  background: var(--cream-raised); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.shw-onb__points li {
  display: flex; gap: 11px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .5s ease calc(.3s + var(--j, 0) * .08s),
              transform .5s cubic-bezier(.22,.61,.36,1) calc(.3s + var(--j, 0) * .08s);
}
.shw-onb__step.is-on .shw-onb__points li { opacity: 1; transform: none; }
.shw-onb__ico { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--accent-deep); }

/* ---------- 08 · the bench ---------- */
.shw-slas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 26px;
}
.shw-sla { background: var(--cream-raised); padding: 22px 20px; }
.shw-sla strong {
  display: block; font-family: var(--serif); font-size: 27px; font-weight: 500;
  line-height: 1; letter-spacing: -0.02em; color: var(--accent-deep);
}
.shw-sla span { display: block; margin-top: 9px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

/* flex, not grid: nine roles across four columns leave a lone card on the last
   row, and grid would strand it against the left edge. Wrapped flex items with
   a fixed basis centre the remainder instead. */
.shw-roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.shw-roster > * { flex: 0 0 calc((100% - 42px) / 4); max-width: calc((100% - 42px) / 4); }
.shw-role {
  display: flex; gap: 13px; padding: 20px 18px;
  background: var(--cream-raised); border: 1px solid var(--line); border-radius: 14px;
}
.shw-role__ico { flex: none; width: 19px; height: 19px; margin-top: 2px; color: var(--accent-deep); }
.shw-role__name { font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.shw-role__note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .shw-roster > * { flex-basis: calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); }
}
@media (max-width: 900px) {
  .shw-dstats { grid-template-columns: 1fr; }
  .shw-dgrid { grid-template-columns: 1fr; }
  .shw-owned { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
  .shw-vs { grid-template-columns: 1fr; }
  .shw-slas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .shw-dcard { padding: 22px 20px 24px; }
  .shw-vs__col { padding: 24px 20px 26px; }
  .shw-onb__step { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .shw-onb__n { width: 44px; height: 44px; font-size: 15px; }
  .shw-onb__when { margin-top: 12px; }
  .shw-onb__body { padding-bottom: 38px; }
  .shw-onb__points { padding: 16px 16px; }
  .shw-roster > * { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 420px) {
  .shw-dstat strong { font-size: 28px; }
  .shw-sla strong { font-size: 23px; }
  .shw-onb__points li,
  .shw-vs__rows li { font-size: 14px; }
}

/* ============================================================
   HEADINGS IN --sans
   The page moves off the Newsreader display face onto Hanken Grotesk —
   the cut already used for the .em line of the hero ("Forget the pitch
   deck."). Kept as one block at the end of the file so it is a single
   revert, and scoped to .shw because showcase.css is only linked from
   /showcase — the rest of the site keeps the serif.

   Only headings move. The big stat numerals (--shw-dstat strong,
   .shw-ftotal__value, .shw-engine__vol, .shw-verdict__roi, …) stay in
   the serif on purpose: they are the editorial device the page is built
   around, and flattening them too would leave nothing to contrast against.
   The display sizes are stepped down ~10% from the .h1/.h2 clamps in
   styles.css: Hanken Grotesk runs wider and optically larger than
   Newsreader at the same px, and without this the hero broke from two
   lines onto four.
   ============================================================ */
.shw .display {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.07;
}
.shw .display.h1 { font-size: clamp(39px, 5.4vw, 74px); }
.shw .display.h2 { font-size: clamp(30px, 3.9vw, 53px); }
/* the two-part title no longer flips to italic — that was a serif idiom.
   The contrast now comes from weight: bold opener, lighter follow-through. */
.shw .display:has(.em) { font-style: normal; font-weight: 500; }
.shw .display .em {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.034em;
}

/* card + panel titles */
.shw-scard__title,
.shw-owned__title,
.shw-vs__title,
.shw-verdict__head {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.028em;
}
.shw-verdict__head { font-weight: 600; }
/* the stage number on the block-02 card, to match the block-07 rail numbers */
.shw-scard__n {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}