/* Sonia's sandbox overrides — loaded last on Sonia-Sandbox.html,
   after tokens.css / homepage.css / sandbox.css / platform-diagram.css,
   so anything added here wins without editing the shared files. */

/* ---------- Hero: full dark background + grid ---------- */

.hero-section--sandbox {
  position: relative;
  isolation: isolate;
  background: #0D2828;
}

/* Vertical and horizontal grid lines, on two layers. The mask stands in for the Figma
   "Hero gradient" overlay that fades the grid out behind the headline. */
.hero-section--sandbox::before,
.hero-section--sandbox::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.8) 58%, #000 75%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.8) 58%, #000 75%);
}

.hero-section--sandbox::before {
  background-image: repeating-linear-gradient(to right, rgba(12,80,93,.6) 0 1px, transparent 1px 36px);
}

.hero-section--sandbox::after {
  background-image: repeating-linear-gradient(to bottom, rgba(12,80,93,.6) 0 1px, transparent 1px 36px);
}

/* Canvas version of the grid (js/sonia-hero.js): same lines and mask, grown
   in from the Stensul badge. The CSS layers step aside once it runs (and from
   first paint when motion is allowed, so the grid can build in). */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.8) 58%, #000 75%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.8) 58%, #000 75%);
}

.ph-anim .hero-section--sandbox::before,
.ph-anim .hero-section--sandbox::after,
.hero-section--sandbox.has-grid::before,
.hero-section--sandbox.has-grid::after {
  content: none;
}

.hero-section--sandbox .hero-inner,
.hero-section--sandbox .hero-image-wrap {
  position: relative;
  z-index: 1;
}

/* On desktop the diagram's empty top band tucks up beside the CTA (as in
   Figma), so the copy must stay above it to keep the button clickable. */
.hero-section--sandbox .hero-inner {
  z-index: 2;
}

.hero-section--sandbox .hero-title {
  color: #ffffff;
}

/* A plain inline background paints the font's full content area (~1.3-1.4em)
   on every wrapped line, taller than the 1.1 line box, so the yellow boxes of
   consecutive lines overlapped. The fill is instead a gradient band one line
   tall, sitting on the glyphs, so wrapped lines keep a gap between bands. */
.hero-section--sandbox .hero-title {
  line-height: 1.1;
}

.hero-section--sandbox .hero-title .highlight {
  color: #201F1D;
}

.hero-section--sandbox .hero-desc {
  color: #ffffff;
  font-weight: 600;
}

/* Desktop: the canvas already carries Figma's side margins, so let it run
   to 1440px (1:1 with the artboard) and pull it up so canvas y=117 (Figma
   y=328, the CTA's bottom edge) sits level with the button. A vertical %
   margin resolves against the wrap's width, which equals the diagram's.
   The mobile block at the end of this file restores the stacked spacing. */
.hero-section--sandbox .hero-image-wrap {
  max-width: 1440px;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Homepage: more room under the diagram, whose gate checklists hang below
   it (80px -> 150px at 920, ~166px at 1440). Phones use the .phm layout. */
@media (min-width: 901px) {
  .hero-section--sandbox .hero-image-wrap--roles { padding-bottom: clamp(150px, 11.5vw, 184px); }
}

.hero-section--sandbox .ph-diagram {
  margin-top: calc(-117 / 1440 * 100%);
}

/* Breathing room under the CTA before the diagram starts. */
.hero-section--sandbox .hero-inner {
  padding-bottom: 48px;
}


/* ---------- Hero diagram: homepage.ai Figma, artboard "V2_Claude" ---------- */
/* Hero frame 67:21395 is 1440x935, but nothing sits above its "Brief" card,
   so the canvas is cropped to 1440x724 (top 211 units removed). Every size
   and position below is the Figma value in design units, via --u (one
   Figma pixel at the diagram's current width), so the diagram scales as an
   exact proportional copy of the artboard. The two SVG layers share the
   same 0 0 1440 724 space. */

.ph-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ph-diagram {
  position: relative;
  max-width: 1440px;
  aspect-ratio: 1440 / 724;
  margin: 0 auto;
  container-type: inline-size;
  --u: calc(100cqw / 1440);
}

.ph-lines,
.ph-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ph-lines { z-index: 1; }
.ph-dots  { z-index: 4; }

.ph-lines path {
  fill: none;
  stroke: #A8A39F;
  stroke-width: 1;
  stroke-dasharray: 1;
}

.ph-dots circle {
  fill: #F8F7F7;
  stroke: #A8A39F;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Tiles ---------- */

.ph-card {
  position: absolute;
  z-index: 2;
  width: calc(213.559 * var(--u));
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: calc(0.879 * var(--u)) solid;
  border-radius: calc(10.546 * var(--u));
  overflow: hidden;
  color: #000000;
}

.ph-card--teal    { border-color: #0C505D; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(229,255,255,.5); }
.ph-card--magenta { border-color: #4C1B40; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(255,219,252,.5); }
.ph-card--citron  { border-color: #475309; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(255,253,199,.5); }

.ph-card--brief   { left: calc(87 * var(--u));   top: calc(106 * var(--u)); }
/* Brief carries a third row (Jasper) that the Figma file doesn't have, so
   Design sits one row (38.669) lower than its Figma y=473 to keep the gap. */
.ph-card--design  { left: calc(87 * var(--u));   top: calc(300.669 * var(--u)); }
.ph-card--write   { left: calc(383 * var(--u));  top: calc(153 * var(--u)); }
.ph-card--segment { left: calc(750 * var(--u));  top: calc(209 * var(--u)); }
.ph-card--esp     { left: calc(1103 * var(--u)); top: calc(306 * var(--u)); }

.ph-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(43.942 * var(--u));
  padding: 0 calc(15.819 * var(--u));
  flex: none;
}

.ph-card-title-group {
  display: flex;
  align-items: center;
  gap: calc(7.031 * var(--u));
  min-width: 0;
}

.ph-card--esp .ph-card-title-group {
  gap: calc(9.23 * var(--u));
}

.ph-card-icon {
  display: block;
  flex: none;
  width: calc(21.092 * var(--u));
  height: calc(21.092 * var(--u));
}

.ph-card-icon--pen {
  width: calc(17.577 * var(--u));
  height: calc(17.577 * var(--u));
}

.ph-card-icon--segment {
  width: calc(17.137 * var(--u));
  height: calc(18.895 * var(--u));
}

.ph-card-title {
  font-family: 'Synapse', sans-serif;
  font-weight: 600;
  font-size: calc(17.577 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}

.ph-card-divider {
  height: calc(0.879 * var(--u));
  background: #E4E1DF;
  flex: none;
}

.ph-card-list {
  display: flex;
  flex-direction: column;
  padding: calc(5.273 * var(--u)) 0;
  background: #F8F7F7;
}

.ph-card--brief .ph-card-list {
  padding: calc(7 * var(--u)) 0;
}

.ph-card-row {
  display: flex;
  align-items: center;
  gap: calc(8.788 * var(--u));
  height: calc(38.669 * var(--u));
  padding: 0 calc(12.304 * var(--u));
  border-bottom: calc(0.879 * var(--u)) solid #F0EEED;
  flex: none;
}

.ph-card-list .ph-card-row:last-child {
  border-bottom: 0;
}

.ph-card-row--lead  { background: #F8F7F7; }
.ph-card-row--cool  { border-bottom-color: #E2E4E8; }
.ph-card-row--thick { border-bottom-width: calc(1.758 * var(--u)); }

/* Row icons are the exact Figma frame exports (assets/hero-pipeline/),
   white rounded background included, so each fills its box. */
.ph-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(26.365 * var(--u));
  height: calc(26.365 * var(--u));
}

.ph-card--write .ph-row-icon {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.ph-row-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Gemini's mark is an image fill Figma won't flatten into its frame, so its
   white box is drawn here (Figma frame 67:21745). */
.ph-row-icon--gemini {
  background: #ffffff;
  border-radius: calc(4.394 * var(--u));
}

.ph-row-icon--gemini img {
  width: 62.25%;
  height: 62.25%;
}

.ph-row-label {
  font-family: 'Inter', sans-serif;
  font-size: calc(12.304 * var(--u));
  line-height: 1.16;
  color: #000000;
}

/* ---------- Stage pills, bar, badge, send node ---------- */

.ph-pill {
  position: absolute;
  z-index: 2;
  top: calc(555 * var(--u));
  height: calc(55 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(9.123 * var(--u));
  color: #ffffff;
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-weight: 400;
  font-size: calc(21.287 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ph-pill svg {
  display: block;
  flex: none;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.ph-pill--create      { left: calc(401 * var(--u));  width: calc(168 * var(--u)); gap: calc(13 * var(--u));    background: #0C505D; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(229,255,255,.5); }
.ph-pill--personalize { left: calc(751 * var(--u));  width: calc(211 * var(--u)); gap: calc(6.082 * var(--u)); background: #4C1B40; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(255,219,252,.5); }
.ph-pill--deploy      { left: calc(1131 * var(--u)); width: calc(158 * var(--u)); gap: calc(11 * var(--u));    background: #475309; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(255,253,199,.5); }

/* In Figma the Personalize and Deploy contents sit left of centre (nested
   auto-layout insets). "Personalize" in DM Mono nearly fills its pill, so it
   is centred instead; Deploy keeps the Figma inset. */
.ph-pill--deploy {
  justify-content: flex-start;
  padding-left: calc(13.685 * var(--u));
  gap: 0;
}

.ph-pill--deploy span {
  width: calc(88.95 * var(--u));
  text-align: center;
}

.ph-bar {
  position: absolute;
  z-index: 3;
  left: calc(164 * var(--u));
  top: calc(649 * var(--u));
  width: calc(1198 * var(--u));
  height: calc(11 * var(--u));
  background: #FFFA66;
  transform-origin: left center;
  transform: scaleX(var(--bar, 1));
}

.ph-badge {
  position: absolute;
  z-index: 5;
  left: calc(114 * var(--u));
  top: calc(607 * var(--u));
  width: calc(81 * var(--u));
  height: calc(81 * var(--u));
  display: block;
}

/* End of the rail: the send node, centred where the rail ends (x=1362).
   Static: citron with the paper plane (sent). Under .ph-anim it waits dark
   until the campaign arrives, then fires: turns citron, rings once, and a
   paper plane lifts off up and to the right. */
.ph-send {
  position: absolute;
  z-index: 6;
  left: calc(1340 * var(--u));
  top: calc(632.5 * var(--u));
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
}

.ph-send-off,
.ph-send-on,
.ph-send-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.ph-send-off,
.ph-send-on {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ph-send-off {
  background: #0D2828;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .5);
}

.ph-send-on {
  background: #FFFA66;
  color: #201F1D;
}

.ph-send svg {
  display: block;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}

.ph-send-ring {
  border: calc(2 * var(--u)) solid #FFFA66;
  opacity: 0;
  pointer-events: none;
}

/* The plane that flies off (Web Animations, JS). */
.ph-send-plane {
  position: absolute;
  z-index: 7;
  left: calc(1351 * var(--u));
  top: calc(643.5 * var(--u));
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  color: #FFFA66;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Governance rail: track, gates, token ---------- */
/* The rail is the Stensul layer. Without motion (reduced motion, or before
   js/sonia-hero.js runs) it shows the governed end state: citron rail, all
   three gates checked. Under .ph-anim the rail starts as a thin neutral
   track and the loop in js/sonia-hero.js fills it. Everything that moves
   animates transform or opacity only. */

.ph-track {
  position: absolute;
  z-index: 2;
  left: calc(164 * var(--u));
  top: calc(653 * var(--u));
  width: calc(1198 * var(--u));
  height: calc(3 * var(--u));
  border-radius: calc(2 * var(--u));
  background: rgba(255, 255, 255, .16);
}

/* A checkpoint on the rail where a stage's connector lands. */
.ph-gate {
  position: absolute;
  z-index: 6;
  left: calc((var(--x) - 14) * var(--u));
  top: calc(640.5 * var(--u));
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: #0D2828;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, .35);
}

.ph-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) #FFFA66;
}

.ph-gate-check {
  position: absolute;
  top: 21%;
  left: 21%;
  width: 58%;
  height: 58%;
  color: #FFFA66;
}

/* Closes in around the gate at the checkpoint (Web Animations, JS). */
.ph-gate-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: calc(2 * var(--u)) solid #FFFA66;
  opacity: 0;
  pointer-events: none;
}

/* The campaign: rides the rail from under the badge, passes under each
   gate, and ends inside the send node. Its left edge puts its centre on the
   rail start (x=164), so --tx is also where the citron fill ends. */
.ph-token {
  position: absolute;
  z-index: 4;
  left: calc(143 * var(--u));
  top: calc(639.5 * var(--u));
  width: calc(42 * var(--u));
  height: calc(30 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: calc(7 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .35);
  color: #0C505D;
  opacity: 0;
  transform: translateX(calc(var(--tx, 0) * var(--u)));
  transition: transform var(--tok-ms, 1s) cubic-bezier(.65, 0, .35, 1), opacity .3s ease;
}

.ph-token > svg {
  display: block;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.ph-token-ok {
  position: absolute;
  top: calc(-6 * var(--u));
  right: calc(-6 * var(--u));
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFA66;
  color: #201F1D;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.ph-token-ok svg {
  display: block;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
}

.ph-token.is-on { opacity: 1; }
.ph-token.is-ok .ph-token-ok { opacity: 1; transform: none; }

/* Soft ring off the badge as each campaign leaves it (Web Animations, JS). */
.ph-badge-ring {
  position: absolute;
  z-index: 4;
  left: calc(114 * var(--u));
  top: calc(607 * var(--u));
  width: calc(81 * var(--u));
  height: calc(81 * var(--u));
  border-radius: calc(15.17 * var(--u));
  border: calc(2 * var(--u)) solid #FFFA66;
  opacity: 0;
  pointer-events: none;
}

/* Light travelling down a connector into its stage (created by JS). */
.ph-pulse {
  position: absolute;
  z-index: 1;
  left: calc((var(--x) - 3.5) * var(--u));
  top: calc((var(--y) - 3.5) * var(--u));
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: #FFFA66;
  box-shadow: 0 0 calc(8 * var(--u)) rgba(255, 250, 102, .8);
  opacity: 0;
  pointer-events: none;
}

/* Tool row picked out during its stage's beat. */
.ph-card-row {
  position: relative;
  isolation: isolate;
}

.ph-card-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FFFDC7;
  opacity: 0;
  transition: opacity .35s ease;
}

.ph-card-row.is-lit::before { opacity: 1; }

/* Screen-reader description of the pipeline (desktop; mobile has real tabs). */
.ph-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Loop states (only while <html> has .ph-anim) ---------- */

.ph-anim .ph-bar {
  --bar: 0;
  transition: transform var(--bar-ms, 1s) cubic-bezier(.65, 0, .35, 1), opacity .8s ease;
}

.ph-anim .ph-bar.is-fading { opacity: 0; }
.ph-anim .ph-bar.is-snap,
.ph-anim .ph-token.is-snap { transition: none; }

.ph-anim .ph-gate::before,
.ph-anim .ph-gate-check {
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.ph-anim .ph-gate-check { transform: scale(.4); }
.ph-anim .ph-gate.is-ok::before { opacity: 1; }
.ph-anim .ph-gate.is-ok .ph-gate-check { opacity: 1; transform: none; }

.ph-anim .ph-send-on {
  opacity: 0;
  transition: opacity .35s ease;
}

.ph-anim .ph-send.is-sent .ph-send-on { opacity: 1; }

/* During a stage's beat, the cards that feed it stay bright; the rest recede
   under a veil of the hero background (the card itself stays opaque, so the
   grid never shows through it). */
.ph-anim .ph-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0D2828;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

.ph-anim .ph-diagram.is-focus .ph-card:not(.is-active)::after { opacity: .5; }

/* ---------- Mobile: stage tabs, swipeable panels, governance rail ---------- */
/* Below 900px the wide diagram is swapped for .phm: a segmented tab bar
   (Create / Personalize / Deploy) over horizontally swipeable panels, with
   the Stensul rail underneath as progress. The panels scroll-snap natively,
   so swiping works without JS; js/sonia-hero.js adds the tabs, one autoplay
   pass and the rail states (.is-live). Without JS, or with reduced motion,
   the rail shows the governed end state. */

.phm {
  display: none;
}

@media (max-width: 900px) {
  .hero-section--sandbox .hero-image-wrap {
    max-width: 1280px;
    margin-top: 48px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .ph-diagram,
  .ph-sr {
    display: none;
  }

  .phm {
    display: block;
    position: relative;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ----- Tab bar ----- */

.phm-tabs {
  --k: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
}

/* One indicator slides under the chosen tab; its stage colour cross-fades. */
.phm-tab-ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 16px) / 3);
  transform: translateX(calc(var(--k) * (100% + 4px)));
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}

.phm-tab-ind i {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  opacity: 0;
  transition: opacity .35s ease;
}

.phm-tab-ind i:nth-child(1) { background: #0C505D; }
.phm-tab-ind i:nth-child(2) { background: #4C1B40; }
.phm-tab-ind i:nth-child(3) { background: #475309; }

.phm-tabs[data-stage="create"]      .phm-tab-ind i:nth-child(1),
.phm-tabs[data-stage="personalize"] .phm-tab-ind i:nth-child(2),
.phm-tabs[data-stage="deploy"]      .phm-tab-ind i:nth-child(3) { opacity: 1; }

.phm-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 40px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(255, 255, 255, .62);
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.phm-tab[aria-selected="true"] {
  color: #ffffff;
}

.phm-tab:focus-visible {
  outline: 2px solid #FFFA66;
  outline-offset: 2px;
}

.phm-tab svg {
  display: block;
  flex: none;
  width: 17px;
  height: 17px;
  opacity: .62;
}

.phm-tab[aria-selected="true"] svg {
  opacity: 1;
}

@media (max-width: 360px) {
  .phm-tab svg { display: none; }
}

/* ----- Panels ----- */

.phm-panels {
  display: flex;
  margin-top: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.phm-panels::-webkit-scrollbar {
  display: none;
}

.phm-panel {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Keep each panel's card glow from bleeding into its neighbours. */
  clip-path: inset(-24px 0);
}

.phm-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.phm-caption span {
  color: #FFFA66;
}

/* Every panel is as tall as the tallest (Create), so the rail below never
   moves; shorter stages sit centred in the space. */
.phm-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-block: auto;
}

.phm-group {
  min-width: 0;
  background: #ffffff;
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
  color: #201F1D;
}

.phm-group--full    { grid-column: 1 / -1; }
.phm-group--teal    { border-color: #0C505D; box-shadow: 1px 1px 10px 1px rgba(229,255,255,.35); }
.phm-group--magenta { border-color: #4C1B40; box-shadow: 1px 1px 10px 1px rgba(255,219,252,.35); }
.phm-group--citron  { border-color: #475309; box-shadow: 1px 1px 10px 1px rgba(255,253,199,.35); }

.phm-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border-bottom: 1px solid #E4E1DF;
}

.phm-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Synapse', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

.phm-group-title svg {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
}

.phm-group-actions {
  display: flex;
  gap: 5px;
}

.phm-hl,
.phm-hl svg {
  display: block;
  width: 15px;
  height: 15px;
}

.phm-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 4px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #F8F7F7;
}

.phm-panel--personalize .phm-chips,
.phm-panel--deploy .phm-chips {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.phm-chips li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 32px;
  padding: 5px 7px;
  border-radius: 6px;
  background: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.2;
}

.phm-chips img {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}

.phm-chip-icon--gemini {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
}

.phm-chip-icon--gemini img {
  width: 11px;
  height: 11px;
}

/* ----- Rail: the Stensul layer, filled as far as the campaign has got ----- */
/* Gates sit under the tab centres (1/6, 1/2, 5/6), so the fill scale for a
   gate is simply its position. */

.phm-rail {
  --fill: 1;
  position: relative;
  height: 44px;
  margin-top: 16px;
}

.phm-track {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1.5px);
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .16);
}

.phm-fill {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 7px;
  background: #FFFA66;
  transform-origin: left center;
  transform: scaleX(var(--fill));
}

.phm-badge {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 4px;
  width: 36px;
  height: 36px;
  display: block;
}

.phm-send {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 7px;
  width: 30px;
  height: 30px;
}

.phm-send-off,
.phm-send-on {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.phm-send-off {
  background: #0D2828;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .5);
}

.phm-send-on {
  background: #FFFA66;
  color: #201F1D;
}

.phm-send svg {
  display: block;
  width: 16px;
  height: 16px;
}

.phm-send-plane {
  position: absolute;
  z-index: 3;
  right: 7px;
  top: 14px;
  width: 16px;
  height: 16px;
  color: #FFFA66;
  opacity: 0;
  pointer-events: none;
}

.phm-gate {
  position: absolute;
  z-index: 2;
  top: 10px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: #0D2828;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
}

.phm-gate--create      { left: calc(100% / 6); }
.phm-gate--personalize { left: 50%; }
.phm-gate--deploy      { left: calc(100% * 5 / 6); }

.phm-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #FFFA66;
}

.phm-gate svg {
  position: absolute;
  top: 21%;
  left: 21%;
  width: 58%;
  height: 58%;
  color: #FFFA66;
}

.phm.is-live .phm-rail { --fill: 0; }
.phm.is-live .phm-fill { transition: transform .7s cubic-bezier(.65, 0, .35, 1); }

.phm.is-live .phm-gate::before,
.phm.is-live .phm-gate svg {
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}

.phm.is-live .phm-gate svg { transform: scale(.4); }
.phm.is-live .phm-gate.is-ok::before { opacity: 1; }
.phm.is-live .phm-gate.is-ok svg { opacity: 1; transform: none; }

.phm.is-live .phm-send-on {
  opacity: 0;
  transition: opacity .35s ease;
}

.phm.is-live .phm-send.is-sent .phm-send-on { opacity: 1; }

.phm-hint {
  margin: 8px 0 0;
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
  .phm *,
  .phm *::before,
  .phm *::after {
    transition: none !important;
  }
}

/* ---------- Brand gradients (after calendly.com) ---------- */
/* Soft washes in the brand palette, kept to section corners: Teal
   Highlight #C9FEFF and Citron Tint #FFFDC7 on the light sections, Teal
   Medium #0A7891 on the dark ones. Rule: a gradient never sits behind a
   text highlight block, and diagrams and figure panels stay flat. On
   phones, where headings run the full width, the top glows are dropped. */

:root {
  /* Dot grid after ramp.com: light 1px dots on a 16px pitch. */
  --gw-dots: radial-gradient(circle, rgba(32, 31, 29, .09) 1px, rgba(32, 31, 29, 0) 1.4px) 0 0 / 16px 16px;
  --gw-corner-teal: radial-gradient(40% 50% at 100% 0%, rgba(201, 254, 255, .75), rgba(201, 254, 255, 0) 100%);
  --gw-corner-citron: radial-gradient(40% 45% at 0% 100%, rgba(255, 253, 199, .8), rgba(255, 253, 199, 0) 100%);
}

/* MCP (dark): its glow now sits behind the product video (see the web
   system block below), so the section ground is plain Teal Dark. */
.mcp-section {
  background: #0D2828;
}

/* Start building and Perspective: teal top right, citron bottom left. */
.connect-embed {
  background: var(--gw-corner-teal), var(--gw-corner-citron), #ffffff;
}

.connect-embed > .hero-section {
  background: transparent;
}

.stops-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gw-corner-teal), var(--gw-corner-citron), #ffffff;
}

/* The dots sit on their own layer and drift one grid step diagonally every
   14s; the pattern repeats every 16px, so the loop is seamless. Transform
   only, and still for reduced motion. */
.stops-section::before {
  content: "";
  position: absolute;
  inset: -16px 0 0 -16px;
  z-index: -1;
  background: var(--gw-dots);
  pointer-events: none;
  animation: gw-dots-drift 14s linear infinite;
}

@keyframes gw-dots-drift {
  to { transform: translate(16px, 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .stops-section::before { animation: none; }
}

@media (max-width: 760px) {
  .connect-embed {
    background: var(--gw-corner-citron), #ffffff;
  }

  .stops-section {
    background: var(--gw-corner-citron), #ffffff;
  }
}

/* Request a demo (teal): lighter teal at the top right, a warm citron hint
   low on the right, deeper teal bottom left. */
.demo-section {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(10, 120, 145, .9), rgba(10, 120, 145, 0) 70%),
    radial-gradient(35% 60% at 88% 100%, rgba(255, 250, 102, .12), rgba(255, 250, 102, 0) 70%),
    radial-gradient(55% 80% at 0% 100%, rgba(13, 40, 40, .75), rgba(13, 40, 40, 0) 70%),
    #0C505D;
}

/* ---------- Web system: the technical layer (hero + agentic workflow) ---------- */
/* The Stensul Web System's components, with its dark-section values: mono
   eyebrows, gradient-border buttons, status chips, corner-marked product
   frames with a glow behind them, a faded dot grid and the workflow trace.
   Gradients stay behind product visuals only, never behind highlights. */

.hero-section--sandbox,
.mcp-section {
  --sw-label: #C9FEFF;
  --sw-ink-muted: rgba(255, 255, 255, .72);
  --sw-line-strong: rgba(201, 254, 255, .16);
  --sw-tick: rgba(201, 254, 255, .42);
  --sw-dot: rgba(201, 254, 255, .10);
  --sw-surface: #0D2828;
  --sw-raised: rgba(255, 255, 255, .04);
}

/* Mono eyebrow: DM Mono 12px, uppercase, tracked. */
.sw-eyebrow {
  display: inline-block;
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sw-label, #0A7891);
}

/* Gradient-border secondary button (Large, 52px), on the dark ground. */
.btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 17px;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(#0D2828, #0D2828) padding-box,
    linear-gradient(100deg, #C9FEFF, #0A7891 45%, #FFFA66) border-box;
  color: #ffffff;
  font-family: 'Synapse', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  transition: background .15s ease;
}

.btn-gradient:hover {
  background:
    linear-gradient(#0C505D, #0C505D) padding-box,
    linear-gradient(100deg, #C9FEFF, #0A7891 45%, #FFFA66) border-box;
  color: #ffffff; /* the site-wide a:hover would turn it Teal Shade, the fill colour */
}

.btn-gradient:focus-visible {
  outline: 2px solid #C9FEFF;
  outline-offset: 2px;
}

/* Status chip. */
.sw-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--sw-line-strong);
  border-radius: 999px;
  background: var(--sw-raised);
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
}

.sw-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sw-label);
}

/* ----- Hero diagram: glow, corner marks, annotations ----- */

.ph-glow,
.ph-frame {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Restrained teal glow behind the lower half of the figure, well clear of
   the headline and its highlight. */
.ph-glow {
  inset: 32% 0 -6%;
  background:
    radial-gradient(42% 58% at 50% 70%, rgba(10, 120, 145, .42), rgba(10, 120, 145, 0) 70%),
    radial-gradient(30% 40% at 24% 82%, rgba(201, 254, 255, .09), rgba(201, 254, 255, 0) 70%);
}

/* Corner marks framing the figure, like a blueprint's registration ticks. */
.ph-frame {
  left: calc(56 * var(--u));
  top: calc(40 * var(--u));
  width: calc(1348 * var(--u));
  height: calc(676 * var(--u));
  --t: var(--sw-tick);
  background:
    linear-gradient(var(--t), var(--t)) left top / 14px 1px,
    linear-gradient(var(--t), var(--t)) left top / 1px 14px,
    linear-gradient(var(--t), var(--t)) right top / 14px 1px,
    linear-gradient(var(--t), var(--t)) right top / 1px 14px,
    linear-gradient(var(--t), var(--t)) left bottom / 14px 1px,
    linear-gradient(var(--t), var(--t)) left bottom / 1px 14px,
    linear-gradient(var(--t), var(--t)) right bottom / 14px 1px,
    linear-gradient(var(--t), var(--t)) right bottom / 1px 14px;
  background-repeat: no-repeat;
}

/* ----- The hero diagram (.ph-diagram--roles; src/components/HeroDiagram.astro,
   on the homepage and /lp/charity): quieter stage pills and "People" /
   "AI agents" tags on each stage's connector. These refine the base rules
   above. (The older diagram's card icons, key and rail note were removed
   2026-10-11.) ----- */

/* Cards only as wide as their tool rows (the header icons are gone).
   Create is three columns, Brief | Design | Write, 48 units apart and
   centred on their connectors (129, 309, 489) and sharing a bottom edge at y=480.8, so all
   three lines drop the same distance; Segment 857, ESP 1210. Segment and ESP wrap "Adobe Journey / Optimizer"
   like the Salesforce row, so the row heights don't change. */
.ph-diagram--roles .ph-card { width: calc(var(--cw) * var(--u)); left: calc((var(--cx) - var(--cw) / 2) * var(--u)); }
.ph-diagram--roles .ph-card--brief   { --cx: 129;  --cw: 132; }
.ph-diagram--roles .ph-card--design  { --cx: 309;  --cw: 132; }
.ph-diagram--roles .ph-card--write   { --cx: 490;  --cw: 132; }
.ph-diagram--roles .ph-card--segment { --cx: 857;  --cw: 160; }
.ph-diagram--roles .ph-card--esp     { --cx: 1210; --cw: 160; }
/* Bottoms at Write's (153 + 327.8 = 480.8): Brief is 215.3 tall (four
   rows), Design 250.5 (five). */
.ph-diagram--roles .ph-card--brief  { top: calc(265.55 * var(--u)); }
.ph-diagram--roles .ph-card--design { top: calc(230.33 * var(--u)); }
/* ESP lists five platforms (AJO, Salesforce, Marketo, Eloqua, Responsys):
   three rows (116.007) more, so it starts that much higher and still ends at
   y=440, where its connector to Deploy starts. */
.ph-diagram--roles .ph-card--esp { top: calc(189.993 * var(--u)); }

/* Small and quiet: centred on the stage's x (--x), 40 units tall (512-552, where
   the connectors end; raised from 560 to make room for the People / AI agents
   tags beneath), a dark solid tint of the stage colour with a thin
   border (solid, because the connectors run underneath). */
.ph-diagram--roles .ph-pill {
  left: calc(var(--x) * var(--u));
  top: calc(512 * var(--u));
  width: auto;
  height: calc(40 * var(--u));
  transform: translateX(-50%);
  justify-content: center;
  gap: max(6px, calc(9 * var(--u)));
  padding: 0 max(10px, calc(15 * var(--u))) 0 max(9px, calc(13 * var(--u)));
  border: 1px solid var(--pill-line);
  border-radius: calc(8 * var(--u));
  background: var(--pill-bg);
  box-shadow: none;
  color: rgba(255, 255, 255, .88);
  font-size: max(10px, calc(13.5 * var(--u)));
  letter-spacing: .06em;
}

.ph-diagram--roles .ph-pill svg {
  width: max(13px, calc(19 * var(--u)));
  height: max(13px, calc(19 * var(--u)));
  opacity: .85;
}

.ph-diagram--roles .ph-pill--create      { --x: 489;  --pill-bg: #0E3A42; --pill-line: rgba(80, 170, 186, .45); }
.ph-diagram--roles .ph-pill--personalize { --x: 856;  --pill-bg: #33182E; --pill-line: rgba(200, 120, 180, .4); }
.ph-diagram--roles .ph-pill--deploy      { --x: 1210; --pill-bg: #2F370B; --pill-line: rgba(200, 214, 90, .4); }
.ph-diagram--roles .ph-pill--deploy span { width: auto; }

/* Under each gate, what Stensul checks there: four items with a small citron
   check, the list centred on the gate's x and left-aligned inside, top at
   y=688 (below the gate, 640.5-668.5, and its check ripple). The lists run
   past the diagram's bottom edge (724) into the hero's 80px bottom space.
   With motion each list ticks in when its gate checks, at the end of its
   stage, items one at a time 500ms apart, and clears with the pass. */
.ph-gate-note {
  position: absolute;
  z-index: 3;
  left: calc(var(--x) * var(--u));
  top: calc(688 * var(--u));
  margin: 0;
  transform: translateX(-50%);
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  font-size: max(9.5px, calc(10.5 * var(--u)));
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sw-label, #C9FEFF);
}

/* Bigger than the other mono notes so the checks read at a glance:
   13-unit text (12px min) and 16-unit checks. */
.ph-checks {
  display: grid;
  gap: max(8px, calc(10 * var(--u)));
  padding: 0;
  list-style: none;
  font-size: max(12px, calc(13 * var(--u)));
  letter-spacing: .06em;
}

.ph-checks li {
  display: flex;
  align-items: center;
  gap: max(7px, calc(9 * var(--u)));
}

.ph-checks svg {
  flex: none;
  width: max(13px, calc(16 * var(--u)));
  height: max(13px, calc(16 * var(--u)));
  color: #FFFA66;
}

/* The corner marks reach down to y=830 so the (larger) lists sit inside the
   frame. */
.ph-diagram--roles .ph-frame { height: calc(790 * var(--u)); }

.ph-anim .ph-checks li { opacity: 0; translate: 0 calc(4 * var(--u)); }
.ph-anim .ph-checks.is-shown li { opacity: 1; translate: none; transition: opacity .35s ease-out, translate .35s ease-out; }
/* One check at a time, 500ms apart (js/sonia-hero.js allows for the 1.5s). */
.ph-anim .ph-checks.is-shown li:nth-child(2) { transition-delay: .5s; }
.ph-anim .ph-checks.is-shown li:nth-child(3) { transition-delay: 1s; }
.ph-anim .ph-checks.is-shown li:nth-child(4) { transition-delay: 1.5s; }

.ph-anim .ph-gate-note { opacity: 0; }
.ph-anim .ph-gate-note.is-shown { opacity: 1; transition: opacity .5s ease-out .15s; }

/* Who does the step: under each stage pill, "People" left of the line down
   to the gate and "AI agents" right of it, level at y=596 (the pill ends at
   552, the gate starts at 640.5). With motion each pair is revealed in the intro, People first and
   AI agents ~.4s later (.is-on from js/sonia-hero.js), and then stays. */
.ph-role {
  position: absolute;
  z-index: 3;
  top: calc(596 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: max(5px, calc(7 * var(--u)));
  padding: max(4px, calc(6 * var(--u))) max(7px, calc(10 * var(--u)));
  border: 1px solid rgba(201, 254, 255, .22);
  border-radius: 999px;
  background: rgba(13, 40, 40, .92);
  color: rgba(255, 255, 255, .82);
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  font-size: max(10px, calc(12 * var(--u)));
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}

.ph-role svg {
  flex: none;
  width: max(11px, calc(14 * var(--u)));
  height: max(11px, calc(14 * var(--u)));
  filter: invert(1); /* the sprite icons are drawn in black */
  opacity: .85;
}

.ph-role--people { right: calc((1440 - var(--x) + 14) * var(--u)); transform-origin: right center; }
.ph-role--ai     { left: calc((var(--x) + 14) * var(--u)); transform-origin: left center; }

.ph-anim .ph-role { opacity: 0; transform: translateY(-50%) scale(.8); }
.ph-anim .ph-role.is-on {
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity .3s ease-out, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

/* Reveal (js/sonia-hero.js, homepage, with motion only): pills, tool cards,
   their connectors and dots start hidden and get .is-shown one by one as
   the token reaches each stage, inside the single loop. Uses the individual translate/scale properties so the
   pills keep their centring transform. */
.ph-anim .ph-diagram--roles :is(.ph-pill, .ph-card) { opacity: 0; }
.ph-anim .ph-diagram--roles .ph-pill { scale: .92; }
.ph-anim .ph-diagram--roles .ph-card { translate: 0 calc(10 * var(--u)); }
.ph-anim .ph-diagram--roles :is(.ph-pill, .ph-card).is-shown {
  opacity: 1;
  scale: none;
  translate: none;
  transition: opacity .45s ease-out, scale .45s cubic-bezier(.34, 1.4, .64, 1), translate .45s ease-out;
}
.ph-anim .ph-diagram--roles .ph-lines path { stroke-dashoffset: 1; }
.ph-anim .ph-diagram--roles .ph-lines path.is-shown { stroke-dashoffset: 0; transition: stroke-dashoffset .55s ease-out .1s; }
.ph-anim .ph-diagram--roles .ph-dots circle { opacity: 0; scale: .4; }
.ph-anim .ph-diagram--roles .ph-dots circle.is-shown { opacity: 1; scale: none; transition: opacity .25s ease-out, scale .3s cubic-bezier(.34, 1.56, .64, 1); }
/* End of a pass: everything the pass revealed fades out together (the rail
   fades with it); js/sonia-hero.js then drops .is-shown / .is-on unseen and
   the next pass starts from the bare rail. */
.ph-anim .ph-diagram--roles.is-clearing :is(.ph-pill, .ph-card, .ph-role, .ph-gate-note, .ph-lines path, .ph-dots circle) {
  opacity: 0;
  transition: opacity .7s ease-out;
}

/* ----- Agentic workflow section ----- */

.mcp-section {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* the video's glow reaches past the column; clip it at the section */
}

/* Faded dot grid behind the section. */
.mcp-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, var(--sw-dot) 1px, transparent 1.4px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(70% 65% at 50% 50%, #000 40%, transparent 100%);
}

.mcp-inner--centered .mcp-copy .sw-eyebrow {
  margin-bottom: -8px; /* 16px to the headline inside the 24px column gap */
}

.mcp-figure {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 960px;
  margin: 12px 0 0;
}

/* Teal-to-cyan glow behind the product video only. */
.mcp-glow {
  position: absolute;
  inset: -12% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44% 52% at 50% 56%, rgba(10, 120, 145, .5), rgba(10, 120, 145, 0) 70%),
    radial-gradient(55% 65% at 34% 42%, rgba(201, 254, 255, .12), rgba(201, 254, 255, 0) 72%);
}

/* The video's frame: hairline border, 6px mat, corner marks outside. */
.mcp-frame {
  position: relative;
  padding: 6px;
  border: 1px solid var(--sw-line-strong);
  border-radius: 6px;
  background: #0D2828;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}

.mcp-frame::before {
  content: "";
  position: absolute;
  inset: -8px;
  pointer-events: none;
  --t: var(--sw-tick);
  background:
    linear-gradient(var(--t), var(--t)) left top / 14px 1px,
    linear-gradient(var(--t), var(--t)) left top / 1px 14px,
    linear-gradient(var(--t), var(--t)) right top / 14px 1px,
    linear-gradient(var(--t), var(--t)) right top / 1px 14px,
    linear-gradient(var(--t), var(--t)) left bottom / 14px 1px,
    linear-gradient(var(--t), var(--t)) left bottom / 1px 14px,
    linear-gradient(var(--t), var(--t)) right bottom / 14px 1px,
    linear-gradient(var(--t), var(--t)) right bottom / 1px 14px;
  background-repeat: no-repeat;
}

.mcp-frame .video-embed {
  border-radius: 3px;
}

/* ----- Workflow trace: brief, build, review, approve, send ----- */
/* A faint light runs the line on a 6s loop and each step lights as it is
   reached. Transform and opacity only; still for reduced motion. */
.sw-trace {
  --cycle: 6s;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  max-width: 760px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.sw-trace-track {
  position: absolute;
  top: 6px;
  left: 10%;
  right: 10%;
  height: 1px;
  overflow: hidden;
  background: var(--sw-line-strong);
}

.sw-trace-runner {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  animation: sw-run var(--cycle) cubic-bezier(.45, 0, .55, 1) infinite;
}

.sw-trace-runner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 254, 255, 0), #C9FEFF);
}

@keyframes sw-run {
  0% { transform: translateX(-100%); }
  80%, 100% { transform: translateX(0); }
}

.sw-trace-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sw-trace-dot {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 1px solid var(--sw-tick);
  border-radius: 50%;
  background: #0D2828;
}

.sw-trace-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #C9FEFF;
  opacity: 0;
  animation: sw-lit var(--cycle) ease infinite;
  animation-delay: calc(var(--i) * var(--cycle) * .2);
}

@keyframes sw-lit {
  0%, 2% { opacity: 0; }
  6%, 55% { opacity: 1; }
  70%, 100% { opacity: .25; }
}

.sw-trace-name {
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sw-ink-muted);
}

@media (max-width: 560px) {
  .sw-trace-name { font-size: 10px; letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
  .sw-trace-runner { animation: none; transform: none; }
  .sw-trace-dot::after { animation: none; opacity: 1; }
}

/* ---------- Platform diagram: blueprint treatment ---------- */
/* The web system applied to the platform diagram: hairlines instead of the
   grey mat and heavy rules, DM Mono for structure (stages, band titles,
   policies, context), Synapse kept for the item names, corner
   marks on the frame and a faded dot grid behind it. No gradients. */

.compare-section--sandbox {
  position: relative;
  isolation: isolate;
}

/* Dot grid behind the figure, faded out at the edges. */
.compare-section--sandbox::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(32, 31, 29, .10) 1px, transparent 1.4px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(62% 58% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(62% 58% at 50% 50%, #000 35%, transparent 100%);
}

.compare-section--sandbox .pdiagram {
  --pd-line: rgba(32, 31, 29, .14);
  --pd-rule: rgba(32, 31, 29, .12);
  --pd-tick: rgba(32, 31, 29, .38);
  font-family: 'Synapse', 'Inter', sans-serif;
}

.compare-section--sandbox .pdiagram .pd-num,
.compare-section--sandbox .pdiagram .pd-stage button,
.compare-section--sandbox .pdiagram .pd-stage--static,
.compare-section--sandbox .pdiagram .pd-zone .pd-zone-title,
.compare-section--sandbox .pdiagram .pd-gov-pills span,
.compare-section--sandbox .pdiagram .pd-context .pd-context-title,
.compare-section--sandbox .pdiagram .pd-context-sub span,
.compare-section--sandbox .pdiagram .pd-pii {
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  text-transform: uppercase;
}

/* The frame: white, 1px hairline, corner marks outside it. */
.compare-section--sandbox .pdiagram .pd-shell {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--pd-line);
  border-radius: 6px;
}

.compare-section--sandbox .pdiagram .pd-shell::before {
  content: "";
  position: absolute;
  inset: -8px;
  pointer-events: none;
  --t: var(--pd-tick);
  background:
    linear-gradient(var(--t), var(--t)) left top / 14px 1px,
    linear-gradient(var(--t), var(--t)) left top / 1px 14px,
    linear-gradient(var(--t), var(--t)) right top / 14px 1px,
    linear-gradient(var(--t), var(--t)) right top / 1px 14px,
    linear-gradient(var(--t), var(--t)) left bottom / 14px 1px,
    linear-gradient(var(--t), var(--t)) left bottom / 1px 14px,
    linear-gradient(var(--t), var(--t)) right bottom / 14px 1px,
    linear-gradient(var(--t), var(--t)) right bottom / 1px 14px;
  background-repeat: no-repeat;
}

/* Governance outline: 1.5px Citron instead of 3px. */
.compare-section--sandbox .pdiagram .pd-gold {
  border-width: 1.5px;
  border-color: #E7DE22;
  border-radius: 10px;
}

/* Hairline rules between the rows and down the stage rail. */
.compare-section--sandbox .pdiagram .pd-stage::after,
.compare-section--sandbox .pdiagram .pd-band:not(.pd-band--gov)::before {
  height: 1px;
  background: var(--pd-rule);
}

.compare-section--sandbox .pdiagram .pd-stage-line,
.compare-section--sandbox .pdiagram .pd-stage-line-tail {
  border-left-width: 1px;
}

.compare-section--sandbox .pdiagram .pd-stage-line-tail::after {
  border-width: 0 1px 1px 0;
}

.compare-section--sandbox .pdiagram .pd-zone--side {
  background: #FBFAFA;
  border-left: 1px dashed var(--pd-line);
}

.compare-section--sandbox .pdiagram .pd-dot {
  width: 9px;
  height: 9px;
  border-width: 1px;
}

/* Stage rail in mono: 00 GOVERNANCE, 01 CREATION... */
.compare-section--sandbox .pdiagram .pd-stage button,
.compare-section--sandbox .pdiagram .pd-stage--static {
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .09em;
  color: #201F1D;
}

.compare-section--sandbox .pdiagram .pd-stage--static {
  display: flex;
  align-items: center;
  padding-top: 6px;
}

.compare-section--sandbox .pdiagram .pd-num {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  color: #0A7891;
}

/* Band titles as mono labels (Label S, css/type.css). */
.compare-section--sandbox .pdiagram .pd-zone .pd-zone-title {
  font-size: var(--type-label-s);
  font-weight: 500;
  letter-spacing: var(--type-label-tracking);
  line-height: 1.4;
  color: #201F1D;
}

/* Governance policies as hairline chips. */
.compare-section--sandbox .pdiagram .pd-gov-pills {
  gap: 6px;
  margin-top: 4px;
}

.compare-section--sandbox .pdiagram .pd-gov-pills i,
.compare-section--sandbox .pdiagram .pd-context-sub i {
  display: none;
}

.compare-section--sandbox .pdiagram .pd-gov-pills span,
.compare-section--sandbox .pdiagram .pd-context-sub span {
  padding: 4px 9px;
  border: 1px solid var(--pd-line);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.2;
  color: #332F2A;
}

.compare-section--sandbox .pdiagram .pd-context-sub {
  gap: 6px;
  margin-bottom: 12px;
}

/* Tiles are a static figure: a balanced grid (js/platform-diagram.js sets
   the columns so no icon sits alone on a row), no hover or focus effects,
   nothing that looks clickable. */
.compare-section--sandbox .pdiagram .pd-tiles {
  display: grid;
  justify-content: center;
  row-gap: 10px;
}

.compare-section--sandbox .pdiagram .pd-tile,
.compare-section--sandbox .pdiagram .pd-tiles--partners .pd-tile {
  width: auto;
  min-width: 0;
  padding: 4px 0;
  cursor: default;
}

.compare-section--sandbox .pdiagram .pd-tile:hover {
  background: transparent;
  transform: none;
}

/* "And more" under each partner group: a caption, not a tile. */
.compare-section--sandbox .pdiagram .pd-more {
  margin: 10px 0 0;
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
  color: #6B665E;
}

/* Tile names stay Synapse, a touch larger for legibility. */
.compare-section--sandbox .pdiagram .pd-lbl {
  font-family: 'Synapse', 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: normal;
  color: #332F2A;
}

/* Context layer: 1px dashed, mono title, chips. */
.compare-section--sandbox .pdiagram .pd-context {
  border: 1px dashed var(--pd-line);
  border-radius: 6px;
}

.compare-section--sandbox .pdiagram .pd-context .pd-context-title {
  margin-bottom: 10px;
  font-size: var(--type-label-s);
  font-weight: 500;
  letter-spacing: var(--type-label-tracking);
  color: #201F1D;
}

.compare-section--sandbox .pdiagram .pd-flow svg {
  stroke-width: 1;
}

.compare-section--sandbox .pdiagram .pd-pii {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .09em;
  color: #6B665E;
}

@media (max-width: 640px) {
  .compare-section--sandbox .pdiagram .pd-band:not(.pd-band--gov) .pd-zone--main::before {
    font-family: 'DM Mono', 'SF Mono', monospace;
    font-synthesis-weight: none;
    font-weight: 500;
    letter-spacing: .09em;
    color: #0A7891;
  }
}

/* ---------- Where enterprise AI stops: one timeline, 1/5 vs 4/5 ---------- */
/* Making the asset takes about a fifth of the line (four steps packed
   close, labels alternating above and below); at the dotted line the work
   is handed to people, and reaching the market takes the other four fifths (Approve, Vary, Measure, Own, far apart), and the
   line trails off dashed after Own. Phones get the same timeline running
   down the page. The panel itself stays flat; the dots are on the section. */

.st-fig {
  margin: 0; /* <figure> defaults to 40px side margins */
  position: relative;
  border-color: #D9D5D2;
  border-radius: 4px;
  --tl-head: 100px;    /* duration subhead + part titles above the line */
  --tl-gap: 22px;      /* titles to the label row */
  --tl-above: 42px;    /* label row above the line */
  --tl-mark: 28px;     /* row the line runs through */
  --tl-handoff: 128px; /* the handoff column on the dotted line */
}

/* Square markers on the frame's corners, like a selected block in an editor. */
.st-corners i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #A8A39F;
  border-radius: 2px;
  background: #FDFDFC;
}

.st-corners i:nth-child(1) { top: -6px; left: -6px; }
.st-corners i:nth-child(2) { top: -6px; right: -6px; }
.st-corners i:nth-child(3) { bottom: -6px; left: -6px; }
.st-corners i:nth-child(4) { bottom: -6px; right: -6px; }

/* Making the asset gets as little width as its pills allow (136px keeps
   Brief / Imagery and Copy / Concept ~10px apart); reaching the market takes
   the rest, about 1:6 at 1440 and 1:7 at 1920. */
.tl {
  display: grid;
  grid-template-columns: minmax(136px, 1fr) var(--tl-handoff) 7fr;
}

.tl-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  height: var(--tl-head);
  margin-bottom: var(--tl-gap);
}

/* ----- The handoff: where AI stops and people take over ----- */
/* A node on the timeline at the dotted line, where the teal AI line ends
   and the grey line begins; the bottleneck starts here. */
.tl-handoff {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tl-handoff::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed rgba(32, 31, 29, .3);
}

.tl-handoff-mark {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-top: calc(var(--tl-head) + var(--tl-gap) + var(--tl-above) + var(--tl-mark) / 2 - 22px);
  border-radius: 50%;
  background: #FDFDFC; /* the panel colour, so the rails stop at the icon */
}

/* Brand marketing icon user-circle, Citron on light: fill #FFFA66, line #201F1D */
.tl-handoff-mark svg {
  display: block;
  width: 44px;
  height: 44px;
}

.tl-handoff-text {
  position: relative;
  z-index: 1;
  margin-top: 40px; /* below the asset pills that hang under the line */
  padding: 4px 6px;
  background: #FDFDFC; /* sits over the dotted line */
  text-align: center;
}

.tl-handoff-label,
.tl-handoff-note {
  margin: 0;
}

.tl-handoff-label {
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #201F1D;
}

.tl-handoff-note {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: #4A453F;
}

/* Duration subhead above each half ("One week", "Five months"), H4 style. */
.tl-dur {
  margin: 0 0 4px;
  font-family: 'Synapse', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--type-h4, 20px);
  font-weight: 600;
  line-height: var(--type-h4-lh, 1.3);
  letter-spacing: var(--type-h4-ls, -.01em);
  color: #201F1D;
}

.st-name,
.st-note {
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
}

.st-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #201F1D;
}

.st-note {
  font-size: 10.5px;
  line-height: 1.4;
  color: #A8A39F;
}

/* ----- The line and its points ----- */

.tl-points {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-part--make .tl-points   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-part--market .tl-points { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.tl-points::before,
.tl-points::after {
  content: "";
  position: absolute;
  top: calc(var(--tl-above) + var(--tl-mark) / 2 - 1.5px);
  height: 3px;
  border-radius: 2px;
  transform-origin: left center;
}

/* Asset: solid teal, from the start of the line into the handoff node. */
.tl-part--make .tl-points::before {
  left: 0;
  right: calc(var(--tl-handoff) / -2);
  background: #0A7891;
}

/* Market: solid grey from the handoff node up to Own (mid last column),
   then dashed. */
.tl-part--market .tl-points::before {
  left: calc(var(--tl-handoff) / -2);
  right: 10%;
  background: #A8A39F;
}

.tl-part--market .tl-points::after {
  left: 90%;
  right: 0;
  height: 2px;
  margin-top: .5px;
  background: repeating-linear-gradient(to right, #A8A39F 0 6px, transparent 6px 12px);
}

.tl-pt {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: var(--tl-above) var(--tl-mark) auto;
  min-width: 0;
}

.tl-name { grid-row: 1; }
.tl-mark { grid-row: 2; }
.tl-below { grid-row: 3; }

/* Labels are the hero's stage pills (Create / Personalize / Deploy): a
   solid shade, white icon, white DM Mono caps. Teal Shade for the asset
   steps, Ivory Dark for the market steps, matching their lines. */
.tl-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  justify-self: start;
  height: 28px;
  margin-bottom: 8px;
  padding: 0 10px 0 8px;
  border-radius: 6px;
  background: #6B665E;
  box-shadow: 0 2px 8px rgba(32, 31, 29, .14);
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  font-size: 11.5px;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
}

.tl-name svg {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
}

.tl-name svg.st-icon--pen {
  width: 12px;
  height: 12px;
}

/* Asset points: close together, pills alternating above and below. */
.tl-part--make .tl-pt {
  justify-items: center;
}

.tl-part--make .tl-name {
  justify-self: center;
  height: 24px;
  padding: 0 8px 0 7px;
  gap: 5px;
  background: #0C505D;
  box-shadow: 0 2px 8px rgba(12, 80, 93, .18);
  font-size: 10px;
}

.tl-part--make .tl-name svg {
  width: 12px;
  height: 12px;
}

.tl-part--make .tl-name svg.st-icon--pen {
  width: 10px;
  height: 10px;
}

.tl-part--make .tl-pt:nth-child(even) .tl-name {
  grid-row: 3;
  align-self: start;
  margin: 8px 0 0;
}

/* Dots on the line, as in the sketch. */
.tl-mark {
  align-self: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
}

.tl-part--make .tl-mark {
  border: 2px solid #0A7891;
}

.tl-part--market .tl-mark {
  border: 2px solid #6B665E;
}

/* Market points: centred in their columns, like the asset points: pill
   above the dot, note below, all on one vertical axis. */
.tl-part--market .tl-pt {
  justify-items: center;
  text-align: center;
}

.tl-part--market .tl-name {
  justify-self: center;
}

.tl-below {
  position: relative;
  justify-self: stretch;
  padding: 66px 12px 0; /* room for the legal bracket, so every note lines up */
}

.tl-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4A453F;
}

/* Legal review: a bracket from Approve to Vary (about a fifth to a quarter
   of the whole timeline). */
/* From the Approve dot to the Vary dot: mid column to mid next column. */
.tl-legal {
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  margin: 0;
  padding: 7px 0 0;
  border-top: 1px solid #6B665E;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap; /* two set lines (<br>), so it never runs into the notes below */
  color: #4A453F;
}

.tl-legal::before,
.tl-legal::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 1px;
  height: 6px;
  background: #6B665E;
}

.tl-legal::before { left: 0; }
.tl-legal::after  { right: 0; }

@media (max-width: 1100px) {
  .st-fig { --tl-handoff: 104px; }
  .tl-desc { font-size: 13px; }
  .tl-below { padding-right: 12px; }
}

/* ----- Phones: the same timeline, running down the page ----- */
@media (max-width: 760px) {
  .tl {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Titles sit beside the line, level with the pills. */
  .tl-head {
    height: auto;
    margin-bottom: 16px;
    padding-left: calc(var(--tl-mark) + 14px);
  }

  .tl-part--market .tl-head { height: 96px; } /* subhead + title + note (3 lines at 360) */

  /* The handoff becomes a row across the timeline, on a dashed rule. */
  .tl-handoff {
    flex-direction: row;
    gap: 12px;
    margin: 6px 0 22px;
    padding: 16px 0;
  }

  .tl-handoff::before {
    top: 0;
    bottom: 0;
    left: calc(var(--tl-mark) / 2 - 1.5px);
    width: 3px;
    border: 0;
    background: linear-gradient(#0A7891 50%, #A8A39F 50%);
  }

  .tl-handoff::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px dashed rgba(32, 31, 29, .3);
  }

  .tl-handoff-mark {
    margin: 0 0 0 calc(var(--tl-mark) / 2 - 22px);
  }

  .tl-handoff-text {
    margin: 0;
    padding: 2px 8px 2px 4px;
    text-align: left;
  }

  .tl-points,
  .tl-part--make .tl-points,
  .tl-part--market .tl-points {
    display: flex;
    flex-direction: column;
  }

  .tl-points::before,
  .tl-points::after {
    top: 0;
    left: calc(var(--tl-mark) / 2 - 1.5px);
    width: 3px;
    height: auto;
    transform-origin: top center;
  }

  .tl-part--make .tl-points::before { left: calc(var(--tl-mark) / 2 - 1.5px); right: auto; bottom: 0; }

  .tl-part--market .tl-points::before {
    left: calc(var(--tl-mark) / 2 - 1.5px);
    right: auto;
    top: -134px; /* up through the head (96 + 16) and the gap (22) to the handoff row */
    bottom: 56px;
  }

  .tl-part--market .tl-points::after {
    left: calc(var(--tl-mark) / 2 - 1px);
    right: auto;
    top: auto;
    bottom: 0;
    width: 2px;
    height: 56px;
    margin-top: 0;
    background: repeating-linear-gradient(to bottom, #A8A39F 0 6px, transparent 6px 12px);
  }

  .tl-pt,
  .tl-part--make .tl-pt,
  .tl-part--market .tl-pt {
    grid-template-columns: var(--tl-mark) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    justify-items: start;
  }

  .tl-name,
  .tl-part--make .tl-name,
  .tl-part--market .tl-name,
  .tl-part--make .tl-pt:nth-child(even) .tl-name {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    margin: 0;
  }

  .tl-mark { grid-column: 1; grid-row: 1; justify-self: center; }
  .tl-below { grid-column: 2; grid-row: 2; padding: 4px 0 0; }

  /* Tight for the asset, long gaps for the market: about 1 to 4. */
  .tl-part--make .tl-pt + .tl-pt { margin-top: 6px; }
  .tl-part--market .tl-pt { padding-bottom: 34px; }
  .tl-part--market .tl-pt:last-child { padding-bottom: 72px; }

  .tl-part--market .tl-pt { text-align: left; }
  .tl-below { justify-self: start; }

  .tl-legal {
    position: static;
    display: inline-block;
    margin: 4px 0 8px;
    padding: 4px 10px;
    border-top: 0;
    border-left: 2px solid #6B665E;
    background: rgba(32, 31, 29, .04);
  }

  .tl-legal::before,
  .tl-legal::after { content: none; }
}

/* ----- Scroll-in (js/sonia-hero.js arms it unless reduced motion) ----- */
/* Plays once, step by step, so it can be followed: the teal line grows
   through the asset steps, and as it reaches each one its dot pops, its
   pill rises in, then its note. The handoff node lands where the teal ends,
   then the grey line crawls through Approve, Vary, Measure, and Own the
   same way, slower. --at on each step is where it sits along its line
   (0 to 1); --t0 and --dur are that line's start and length. */

.tl-part--make   { --t0: .3s;  --dur: 1.4s; }
.tl-part--market { --t0: 1.95s; --dur: 3.2s; }

.st-fig.is-armed .tl-points::before { transform: scaleX(0); }
.st-fig.is-armed .tl-part--market .tl-points::after,
.st-fig.is-armed .tl-handoff-text { opacity: 0; }
.st-fig.is-armed .tl-mark,
.st-fig.is-armed .tl-handoff-mark { transform: scale(0); }
.st-fig.is-armed .tl-name { opacity: 0; transform: translateY(8px) scale(.85); }
.st-fig.is-armed .tl-part--make .tl-pt:nth-child(even) .tl-name { transform: translateY(-8px) scale(.85); }
.st-fig.is-armed .tl-below { opacity: 0; transform: translateY(6px); }

@media (max-width: 760px) {
  .st-fig.is-armed .tl-points::before { transform: scaleY(0); }
  .st-fig.is-armed .tl-name,
  .st-fig.is-armed .tl-part--make .tl-pt:nth-child(even) .tl-name { transform: translateX(-8px) scale(.9); }
}

.tl-name { transform-origin: center bottom; }
.tl-part--make .tl-pt:nth-child(even) .tl-name { transform-origin: center top; }

@media (max-width: 760px) {
  .tl-name,
  .tl-part--make .tl-pt:nth-child(even) .tl-name { transform-origin: left center; }
}

.st-fig.is-in .tl-points::before,
.st-fig.is-in .tl-mark,
.st-fig.is-in .tl-handoff-mark,
.st-fig.is-in .tl-name,
.st-fig.is-in .tl-part--make .tl-pt:nth-child(even) .tl-name,
.st-fig.is-in .tl-below,
.st-fig.is-in .tl-handoff-text,
.st-fig.is-in .tl-part--market .tl-points::after {
  opacity: 1;
  transform: none;
}

/* The lines. */
.st-fig.is-in .tl-points::before { transition: transform var(--dur) linear var(--t0); }
.st-fig.is-in .tl-part--market .tl-points::after { transition: opacity .6s ease calc(var(--t0) + var(--dur)); }

/* Each step, keyed to when the line reaches it. */
.st-fig.is-in .tl-mark {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--t0) + var(--at, 0) * var(--dur));
}

.st-fig.is-in .tl-name {
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--t0) + var(--at, 0) * var(--dur) + .1s);
}

.st-fig.is-in .tl-below {
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: calc(var(--t0) + var(--at, 0) * var(--dur) + .3s);
}

/* The handoff lands as the teal line ends. */
.st-fig.is-in .tl-handoff-mark { transition: transform .45s cubic-bezier(.22, 1, .36, 1) 1.7s; }
.st-fig.is-in .tl-handoff-text { transition: opacity .4s ease 1.85s; }

/* Yellow highlight on the dark MCP heading: dark text on the band, and the
   same side padding as the section-heading highlight. */
.mcp-heading .highlight {
  padding: 0 .06em;
  color: #201F1D;
  transition: background-size 1.2s cubic-bezier(.45, 0, .25, 1), color .8s ease .3s;
}
/* Until the band has drawn, keep the words white so they stay readable on
   the dark background, then fade them to dark as the band sweeps under. */
.hl-anim .mcp-heading .highlight:not(.is-drawn) {
  color: #ffffff;
}

/* White on the dark MCP section (the shared style sets it in cyan). */
.mcp-desc {
  color: #ffffff;
}

/* ---------- Proof mosaic: stensul.com column layout ---------- */
/* Matches the stensul.com home grid: four columns (41% / 17% / rest / 17%),
   the first split into two sub-columns over a full-width tile. Columns
   stretch to one height and each column's .proof-grow tile takes the slack,
   so every column ends on the same line. Linked tiles lift on hover and
   their corner arrow nudges toward the corner. */

.proof-cols {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.proof-col,
.proof-subcols {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.proof-col {
  flex-direction: column;
}

.proof-subcols {
  flex: 1;
}

.proof-subcols > .proof-col {
  flex: 1 1 0;
}

.proof-col--wide   { flex: 0 0 calc(41% - 9px); }
.proof-col--narrow { flex: 0 0 calc(17% - 9px); }
.proof-col--mid    { flex: 1 1 0; }

.proof-cols .proof-cell {
  padding: 20px 22px;
}

.proof-cols .proof-grow {
  flex-grow: 1;
}

.proof-cols .proof-cell--logo {
  justify-content: center;
  min-height: 96px;
}

.proof-cols .proof-logo-center .proof-logo-box,
.proof-cols .proof-logo-center img {
  max-width: 200px;
  margin: 0 auto;
}

a.proof-cell--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .2s ease;
}

a.proof-cell--link:hover {
  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, .10);
}

a.proof-cell--link:focus-visible {
  outline: 2px solid #0C505D;
  outline-offset: 2px;
}

a.proof-cell--link .proof-arrow {
  top: 14px;
  right: 15px;
  opacity: 1;
  transition: transform .2s ease;
}

a.proof-cell--link:hover .proof-arrow,
a.proof-cell--link:focus-visible .proof-arrow {
  transform: translate(3px, -3px);
}

/* Keep copy clear of the corner arrow. */
.proof-cols .mosaic-text,
.proof-cols .mosaic-quote,
.proof-cols .mosaic-heading {
  padding-right: 10px;
}

.proof-cols .stat-number {
  font-size: 56px;
}

.proof-cols .mosaic-heading {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  font-weight: 500;
}

/* Logos under stats and quotes keep a fixed size instead of filling the
   tile, which blew them up on the full-width phone tiles. */
.proof-cols .stat-logo-slot .proof-logo-box,
.proof-cols .logo-slot .proof-logo-box {
  max-width: 150px;
}

.proof-bucks {
  display: block;
  width: 96px;
  height: auto;
}

/* Tablet: the wide column takes a full row; the other three share the next. */
@media (max-width: 1024px) {
  .proof-cols {
    flex-wrap: wrap;
  }

  .proof-col--wide {
    flex: 0 0 100%;
  }

  .proof-col--narrow,
  .proof-col--mid {
    flex: 1 1 0;
  }

  .proof-cols .stat-number {
    font-size: 40px;
  }
}

/* Phones: one column, the first block's two sub-columns kept side by side
   until there is no room for them either. */
@media (max-width: 640px) {
  .proof-col--narrow,
  .proof-col--mid {
    flex: 0 0 100%;
  }

  .proof-cols .proof-grow {
    flex-grow: 0;
  }
}

@media (max-width: 480px) {
  .proof-subcols {
    flex-direction: column;
  }

  .proof-cols .proof-cell {
    padding: 16px 18px;
  }

  .proof-cols .proof-logo-center .proof-logo-box,
  .proof-cols .proof-logo-center img {
    max-width: 160px;
  }
}