/* BMOS landing — section styles for the home, /product/*, 404 and the shared blocks other pages reuse.
   Tokens only (see /DESIGN.md): no hex, no raw font-size, no raw radius, one shadow, sentence-case labels.
   Order in every page: tokens → app → landing → sections → nav.
   Map:  rhythm · icons · hero · hero demo · hero live read · read-by row · store-read · how it works ·
         checkout before/after · store agent · agents diagram · storefronts · integrations · live cart ·
         payments · agent pays · dashboard · dev sandbox · prompts · tools/pricing/compare/merchants ·
         timeline · page heroes · lists · home blocks */

/* ─── rhythm: every section breathes the same ─────────────────────────────────────────────── */
main > section { padding-block: var(--section-y) 0; }
main > section:last-of-type, .pg-final { padding-bottom: var(--section-y); }
.sec, .pg-hero, .hx-hero { padding-block: var(--section-y) 0; }
.eyebrow { display: block; margin: 0; }

/* ─── icons: one 16px line set (sprite in the page), always currentColor ─────────────────── */
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ─── hero ────────────────────────────────────────────────────────────────────────────────── */
.hx-grid {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: var(--s-7);
  align-items: center;
}
.hx-hero h1 { font-size: var(--t-56); margin: var(--s-3) 0 var(--s-4); }
.hx-lead { font-size: var(--t-18); color: var(--n6); max-width: 520px; margin-bottom: var(--s-5); }
.hx-micro { margin-top: var(--s-2); font-size: var(--t-14); color: var(--n5); }
.hx-right { min-width: 0; position: relative; }

/* ─── hero demo: a browser window that plays five scenes ────────────────────────────────── */
.hx-stage,
.hx-live {
  position: relative;
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hx-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--n2);
  background: var(--n0);
}
.hx-dots { display: flex; gap: var(--s-1); }
.hx-dots i { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--n2); display: block; }
.hx-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--n9);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  min-height: 30px;
  box-sizing: border-box;
}
.hx-cur {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--brand-soft);
  vertical-align: -2px;
  animation: hx-blink 1s steps(1) infinite;
}
@keyframes hx-blink { 50% { opacity: 0; } }
.hx-scenes { position: relative; height: 430px; }
.hx-scene {
  position: absolute;
  inset: 0;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
  visibility: hidden;
}
.hx-scene.hx-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.hx-tabs { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--n2); }
.hx-tab {
  appearance: none;
  border: 0;
  background: var(--white);
  font: inherit;
  white-space: nowrap;
  text-align: left;
  padding: var(--s-2) var(--s-2) var(--s-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-height: 56px;
  color: var(--n5);
  font-size: var(--t-12);
  font-weight: 700;
  min-width: 0;
}
.hx-tab+.hx-tab { border-left: 1px solid var(--n2); }
.hx-tab:hover { color: var(--n6); }
.hx-tr { height: 3px; border-radius: var(--r-sm); background: var(--n1); overflow: hidden; display: block; }
.hx-tr i { display: block; height: 100%; width: 0; background: var(--brand); }
.hx-tab.hx-on { color: var(--n9); }
.hx-tab.hx-done .hx-tr i { width: 100%; }
.hx-tab.hx-on .hx-tr i { animation: hx-fill var(--hx-dur,4s) linear forwards; }
.hx-stage.hx-paused .hx-tab.hx-on .hx-tr i { animation-play-state: paused; }
@keyframes hx-fill { to { width: 100%; } }
.hx-fade {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hx-fade.hx-in { opacity: 1; transform: none; }
.hx-pop {
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hx-pop.hx-in { opacity: 1; transform: none; }

/* scene 1 · read */
.hx-prog { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-14); color: var(--n6); }
.hx-pb { flex: 1; height: 8px; border-radius: var(--r-sm); background: var(--n1); overflow: hidden; }
.hx-pb i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-soft),var(--brand-soft));
  transition: width 2.6s var(--ease);
}
.hx-cnt { font-family: var(--mono); font-weight: 700; color: var(--n9); min-width: 96px; text-align: right; }
.hx-pgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-2); }
.hx-pc {
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  opacity: 0;
  transform: scale(.9) translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hx-pc.hx-in { opacity: 1; transform: none; }
.hx-pc .hx-im { height: 92px; background: var(--n1) center/contain no-repeat; }
.hx-tx {
  padding: var(--s-2) var(--s-2);
  font-size: var(--t-12);
  font-weight: 600;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hx-tx b { font-family: var(--mono); font-size: var(--t-12); }
.hx-found { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: auto; }

/* scene 2 · fix and publish */
.hx-issue {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-3);
  background: var(--white);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hx-issue.hx-in { opacity: 1; transform: none; }
.hx-ic.bad { background: var(--bad-bg); color: var(--bad); }
.hx-ic.warn { background: var(--warn-bg); color: var(--warn); }
.hx-ic {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--n6);
  background: var(--n1);
}
.hx-bd { flex: 1; min-width: 0; font-size: var(--t-14); }
.hx-bd b { display: block; font-size: var(--t-14); }
.hx-raw { font-family: var(--mono); font-size: var(--t-12); }
.hx-raw s { color: var(--bad); }
.hx-raw .hx-ok { color: var(--ok); font-weight: 700; opacity: 0; transition: opacity var(--dur) var(--ease); }
.hx-issue.hx-fixed .hx-raw .hx-ok { opacity: 1; }
.hx-st { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hx-pubrow { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; }
.hx-pubbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: var(--t-14);
  transition: transform var(--dur-fast) var(--ease);
}
.hx-press { transform: scale(.94) !important; }
.hx-feedurl { font-family: var(--mono); font-size: var(--t-12); color: var(--n6); }

/* scenes 3 and 5 · chat */
.hx-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-12);
  color: var(--n6);
  font-weight: 700;
  min-height: 26px;
}
.hx-chat { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; min-height: 0; }
.hx-bub {
  max-width: 84%;
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-14);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hx-bub.hx-in { opacity: 1; transform: none; }
.hx-me {
  align-self: flex-end;
  background: var(--brand);
  color: var(--on-brand);
  border-bottom-right-radius: var(--r-sm);
}
.hx-ai {
  align-self: flex-start;
  background: var(--n1);
  border-bottom-left-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.hx-ai.hx-wide { max-width: 92%; }
.hx-who {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--n6);
  flex-wrap: wrap;
}
.hx-faint { color: var(--n5); font-weight: 600; }
.hx-ans { display: none; flex-direction: column; gap: var(--s-2); }
.hx-said .hx-ans { display: flex; }
.hx-said .hx-typing { display: none; }
.hx-pcard {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2);
}
.hx-pcard .hx-im {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  background: var(--n1) center/contain no-repeat;
  flex-shrink: 0;
}
.hx-pmeta { flex: 1; min-width: 0; }
.hx-t { font-weight: 700; font-size: var(--t-14); line-height: 1.25; }
.hx-m { font-size: var(--t-12); color: var(--n6); }
.hx-pr { font-family: var(--mono); font-weight: 700; font-size: var(--t-14); }
.hx-mini {
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hx-mini.hx-in { opacity: 1; transform: none; }
.hx-mini .hx-im { width: 46px; height: 46px; }
.hx-buybtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 38px;
  border-radius: var(--r-md);
  background: var(--n9);
  color: var(--white);
  font-size: var(--t-12);
  font-weight: 700;
  padding: 0 var(--s-3);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  text-decoration: none;
  align-self: flex-start;
}
a.hx-buybtn:hover { color: var(--white); background: var(--n9); }
.hx-glow { outline: 2px solid var(--brand-soft); outline-offset: 2px; }
.hx-typing { display: inline-flex; gap: 3px; }
.hx-typing i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--n5);
  animation: hx-tp 1s infinite;
}
.hx-typing i:nth-child(2) { animation-delay: .15s; }
.hx-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hx-tp { 0%,60%,100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.hx-agentswap { display: flex; gap: var(--s-1); margin-left: auto; }
.hx-agentswap span {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--n2);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .35;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hx-agentswap span.hx-on { opacity: 1; border-color: var(--brand-soft); transform: scale(1.08); }
.hx-storeav {
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: var(--brand-bg);
  border: 1px solid var(--brand-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-ink);
}
.hx-tot { font-weight: 700; }
.hx-orig { font-size: var(--t-12); }
.hx-onsite { margin-left: auto; font-size: var(--t-12); }

/* scene 4 · order */
.hx-co {
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--white);
}
.hx-origin {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--brand-ink);
}
.hx-row2 { display: flex; justify-content: space-between; font-size: var(--t-14); }
.hx-row2 b { font-family: var(--mono); }
.hx-paybtn { transition: transform var(--dur-fast) var(--ease); }
.hx-apay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--n9);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--t-18);
  font-weight: 500;
}
.hx-paid {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  color: var(--ok);
  font-size: var(--t-14);
}
.hx-dash {
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  background: var(--n0);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.hx-dh {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--n6);
}
.hx-ord {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-2);
  font-size: var(--t-12);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hx-ord.hx-in { opacity: 1; transform: none; }
.hx-ord.hx-new { border-color: var(--brand-soft); box-shadow: none; }
.hx-id { font-family: var(--mono); font-weight: 700; }
.hx-amt { font-family: var(--mono); margin-left: auto; font-weight: 700; }
.hx-kpi { display: flex; gap: var(--s-2); }
.hx-kpi div {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-2);
}
.hx-kpi small { display: block; font-size: var(--t-12); color: var(--n5); font-weight: 500; }
.hx-kpi b { font-size: var(--t-22); font-family: var(--mono); display: inline-block; }
.hx-bump { animation: hx-bump .5s var(--ease); }
@keyframes hx-bump { 40% { transform: scale(1.18); color: var(--brand-soft); } }

/* ─── hero live read: replaces the demo once a visitor pastes an address ─────────────────── */
.hx-live[hidden], .hx-stage[hidden] { display: none; }
.hx-x {
  appearance: none;
  border: 0;
  background: transparent;
  width: 44px;
  height: 44px;
  margin: -8px -8px -8px 0;
  border-radius: var(--r-md);
  font-size: var(--t-16);
  color: var(--n6);
  cursor: pointer;
}
.hx-x:hover { background: var(--n1); color: var(--n9); }
.hx-lbody {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 436px;
  box-sizing: border-box;
}
.hx-lread { display: flex; flex-direction: column; gap: var(--s-3); }
.hx-lphase { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-16); }
.hx-lpct { margin-left: auto; font-family: var(--mono); font-size: var(--t-14); color: var(--n6); }
.hx-spin {
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  border: 2px solid var(--brand-line);
  border-top-color: var(--brand-soft);
  animation: hx-rot .8s linear infinite;
  flex-shrink: 0;
}
@keyframes hx-rot { to { transform: rotate(360deg); } }
.hx-lbar { height: 8px; border-radius: var(--r-sm); background: var(--n1); overflow: hidden; position: relative; }
.hx-lbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-soft),var(--brand-soft));
  transition: width .8s var(--ease);
}
.hx-lbar.hx-indet i { width: 35%; animation: hx-indet 1.3s var(--ease) infinite; }
@keyframes hx-indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.hx-lnums { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-2); }
.hx-lnums div {
  background: var(--n0);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hx-lnums b {
  font-family: var(--mono);
  font-size: var(--t-22);
  letter-spacing: var(--display-tracking);
  font-variant-numeric: tabular-nums;
}
.hx-lnums span { font-size: var(--t-12); color: var(--n6); }
.hx-lthumbs { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--s-2); }
.hx-sk {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--n1);
  animation: hx-shim 1.4s var(--ease) infinite;
  border: 1px solid var(--n2);
}
@keyframes hx-shim { 50% { opacity: .5; } }
.hx-th {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  border: 1px solid var(--n2);
  background: var(--n1);
  overflow: hidden;
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hx-th.hx-in { opacity: 1; transform: none; }
.hx-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hx-lres { display: flex; flex-direction: column; gap: var(--s-3); }
.hx-lres[hidden], .hx-lerr[hidden], .hx-lread[hidden], .hx-lthumbs[hidden] { display: none; }
.hx-okline {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: var(--t-16);
  flex-wrap: wrap;
}
.hx-okline .hx-chk { color: var(--ok); }
.hx-okline .hx-ms { font-weight: 500; color: var(--n6); font-size: var(--t-14); }
.hx-rnums { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-2); }
.hx-rnums div {
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--white);
}
.hx-rnums b { font-family: var(--mono); font-size: var(--t-22); letter-spacing: var(--display-tracking); }
.hx-rnums span { font-size: var(--t-12); color: var(--n6); }
.hx-rnums .hx-g b { color: var(--ok); }
.hx-iss { display: flex; flex-direction: column; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.hx-iss li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-14);
  border-bottom: 1px dashed var(--n2);
  padding: var(--s-1) 0;
}
.hx-iss li:last-child { border-bottom: 0; }
.hx-iss .hx-n { font-family: var(--mono); font-weight: 700; margin-left: auto; padding-left: var(--s-2); }
.hx-iss .hx-it { min-width: 0; flex: 1; }
.hx-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--warn); flex-shrink: 0; }
.hx-dot.hx-red { background: var(--bad); }
.hx-ract { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.hx-lerr { display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.hx-lerr h3 { margin: 0; font-size: var(--t-18); }
.hx-lerr .hx-det { font-family: var(--mono); font-size: var(--t-12); color: var(--n5); overflow-wrap: anywhere; }
.hx-lnote { font-size: var(--t-12); color: var(--n5); margin-top: auto; }

/* ─── hero · read by: the only place agent logos appear on the home ─────────────────────── */
.hx-by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-5); }
.hx-bylbl { font-size: var(--t-12); font-weight: 500; color: var(--n6); margin-right: var(--s-1); }
.hx-mchip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 28px;
  padding: 0 var(--s-2);
  border: 1px solid var(--n2);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--n7);
  font-size: var(--t-12);
  font-weight: 600;
  white-space: nowrap;
  opacity: .8;
}
.hx-mchip svg { width: 14px; height: 14px; flex-shrink: 0; filter: grayscale(.6); }
@media (max-width: 640px) {
  .hx-by { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-bylbl { grid-column: 1 / -1; }
  .hx-mchip { justify-content: center; min-width: 0; }
}
@media (max-width: 860px) {
  .hx-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .hx-hero h1 { font-size: var(--t-40); }
  .hx-lead { font-size: var(--t-16); margin-bottom: var(--s-4); }
  .hx-scenes { height: 452px; }
  .hx-tab { font-size: var(--t-12); padding: var(--s-2) var(--s-1) var(--s-2); min-height: 52px; }
  .hx-scene { padding: var(--s-3); gap: var(--s-2); }
  .hx-issue { padding: var(--s-2) var(--s-2); }
  .hx-bd { font-size: var(--t-12); }
  .hx-bd b { font-size: var(--t-12); }
  .hx-hm { display: none; }
  .hx-raw { font-size: var(--t-12); }
  .hx-issue .pill { font-size: var(--t-12); padding: 2px var(--s-2); }
  .hx-feedurl { font-size: var(--t-12); }
  .hx-co { padding: var(--s-2); gap: var(--s-2); }
  .hx-dash { padding: var(--s-2); gap: var(--s-1); }
  .hx-kpi b { font-size: var(--t-18); }
  .hx-bub { font-size: var(--t-12); max-width: 90%; }
  .hx-ai.hx-wide { max-width: 100%; }
  .hx-pcard .hx-im { width: 52px; height: 52px; }
  .hx-mini .hx-im { width: 40px; height: 40px; }
  .hx-pgrid { gap: var(--s-2); }
  .hx-pc .hx-im { height: 70px; }
  .hx-cnt { min-width: 86px; }
  .hx-lbody { padding: var(--s-4); min-height: 0; }
  .hx-lthumbs { grid-template-columns: repeat(3,1fr); }
  .hx-lnums b, .hx-rnums b { font-size: var(--t-22); }
  .hx-lnums div, .hx-rnums div { padding: var(--s-2) var(--s-2); }
  .hx-ract .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-scene,
  .hx-pc,
  .hx-issue,
  .hx-bub,
  .hx-ord,
  .hx-pop,
  .hx-fade,
  .hx-mini,
  .hx-th,
  .hx-lbar i {
    transition: none !important;
  }
  .hx-cur, .hx-typing i, .hx-spin, .hx-sk, .hx-tab .hx-tr i { animation: none !important; }
  .hx-lbar.hx-indet i { animation: none; width: 100%; opacity: .35; }
}

/* ─── mockup chrome shared by store-read, how it works and before/after ─────────────────── */
.st-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--n2);
  background: var(--n0);
}
.st-dots { display: flex; gap: var(--s-1); }
.st-dots i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--n2); display: block; }
.st-url {
  flex: 1;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--n6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-replay {
  appearance: none;
  font: inherit;
  font-size: var(--t-14);
  font-weight: 700;
  color: var(--brand-ink);
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-pill);
  min-height: 44px;
  padding: 0 var(--s-4);
  cursor: pointer;
}
.st-replay:hover { background: var(--brand-bg); border-color: var(--brand-line); }

/* ─── store-read: we read one real store, three things stopped agents ────────────────────── */
.st-phd { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.st-phl { min-width: 0; max-width: 760px; }
.st-phl .sub { margin: 0; }
.st-phd .st-replay { flex-shrink: 0; }
.st-cards {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-rows: auto auto auto auto;
  gap: 0 var(--s-4);
}
.st-c {
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  overflow: hidden;
  min-width: 0;
}
.st-chd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.st-cname { font-size: var(--t-18); font-weight: 800; letter-spacing: var(--display-tracking); }
.st-cstat { font-size: var(--t-14); color: var(--n6); text-align: right; }
.st-cstat b { font-family: var(--mono); color: var(--bad); font-size: var(--t-16); }
.st-c[data-c="gtin"] .st-cstat b { color: var(--warn); } /* lowers reach, never blocks */
.st-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--n2);
  min-width: 0;
}
.st-rl { font-size: var(--t-12); font-weight: 500; color: var(--n5); }
.st-on { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.st-oimg {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  border: 1px solid var(--n2);
  background: var(--n1) center/contain no-repeat;
  flex-shrink: 0;
}
.st-otx { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; font-size: var(--t-14); }
.st-otx>b { font-size: var(--t-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-oprice {
  font-family: var(--mono);
  font-size: var(--t-22);
  font-weight: 700;
  letter-spacing: var(--display-tracking);
}
.st-osub { font-family: var(--mono); font-size: var(--t-14); color: var(--n6); }
.st-gtin {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--n6);
  border: 1px dashed var(--n3);
  background: var(--n1);
  border-radius: var(--r-sm);
  padding: 3px var(--s-2);
}
.st-gtin b { color: var(--n6); }
.st-dead { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.st-deadbtn {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  background: var(--n9);
  color: var(--white);
  font-weight: 700;
  font-size: var(--t-12);
  white-space: nowrap;
}
.st-dead em { font-style: normal; font-size: var(--t-12); color: var(--bad); font-weight: 600; }
.st-rg { background: var(--n0); }
.st-stage {
  position: relative;
  height: 164px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  min-width: 0;
}
.st-cost { margin: 0; font-size: var(--t-16); font-weight: 600; line-height: 1.45; color: var(--n9); }
.st-bridge { margin: var(--s-5) 0 0; font-size: var(--t-16); color: var(--n6); text-align: center; }

/* card 1 · the price falls to $1 */
.st-s-price { align-items: center; text-align: center; }
.st-read,
.st-parse {
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--n6);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-read b { color: var(--n9); }
.st-read { opacity: 0; transform: translateY(6px); }
.st-parse { opacity: 0; }
.st-num {
  font-family: var(--mono);
  font-weight: 800;
  font-size: var(--t-40);
  letter-spacing: var(--display-tracking);
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  justify-content: center;
  border-radius: var(--r-md);
  padding: var(--s-1) var(--s-2);
  transition: font-size var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.st-fall { display: inline-flex; max-width: 7.5ch; transition: max-width var(--dur) var(--ease) .7s; }
.st-fall i {
  font-style: normal;
  display: inline-block;
  transition: transform .75s var(--ease), opacity .75s var(--ease);
}
.st-c.a1 .st-read { opacity: 1; transform: none; }
.st-c.a1 .st-num { background: var(--brand-bg); }
.st-c.a2 .st-parse { opacity: 1; }
.st-c.a2 .st-fall { max-width: 0; }
.st-c.a2 .st-fall i { opacity: 0; transform: translateY(90px) rotate(24deg); }
.st-c.a2 .st-fall i:nth-child(2n) { transform: translateY(100px) rotate(-30deg); }
.st-c.a2 .st-fall i:nth-child(2) { transition-delay: .05s; }
.st-c.a2 .st-fall i:nth-child(3) { transition-delay: .1s; }
.st-c.a2 .st-fall i:nth-child(4) { transition-delay: .14s; }
.st-c.a2 .st-fall i:nth-child(5) { transition-delay: .18s; }
.st-c.a2 .st-fall i:nth-child(6) { transition-delay: .22s; }
.st-c.a2 .st-fall i:nth-child(7) { transition-delay: .26s; }
.st-c.a2 .st-num { background: transparent; }
.st-c.a3 .st-num { font-size: var(--t-56); color: var(--bad); }
.st-c.a3 .st-read { opacity: .55; }

/* card 2 · the agent matches another store by barcode */
.st-m {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-2);
  min-width: 0;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.st-mi {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  border: 1px solid var(--n2);
  background: var(--n1) center/contain no-repeat;
  flex-shrink: 0;
}
.st-mt { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: var(--t-14); }
.st-mt b, .st-mt em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-mt em { font-style: normal; font-size: var(--t-12); color: var(--n5); }
.st-gt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 700;
  border-radius: var(--r-sm);
  padding: 3px var(--s-1);
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--n6);
  background: var(--n1);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.st-bc {
  display: inline-block;
  width: 20px;
  height: 12px;
  background: repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 3px,currentColor 3px 5px,transparent 5px 6px);
}
.st-res {
  position: absolute;
  top: -9px;
  right: 10px;
  font-size: var(--t-12);
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 2px var(--s-2);
  border: 1px solid;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-res { color: var(--n6); background: var(--white); border-color: var(--n3); }
.st-res.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.st-ag {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--n6);
  align-self: center;
  opacity: 0;
  transform: scale(.9);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-agm {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--n2);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-c.a1 .st-ag { opacity: 1; transform: none; }
.st-c.a2 .st-gt { outline: 2px solid var(--brand-soft); }
.st-c.a3 .st-gt.no { color: var(--n5); background: var(--n1); }
.st-c.a3 .st-gt.yes { color: var(--n9); background: var(--n1); }
.st-c.a3 .st-ma { opacity: .55; border-style: dashed; }
.st-c.a3 .st-mb { border-color: var(--n3); }
.st-c.a3 .st-res { opacity: 1; transform: none; }

/* card 3 · the agent tries to buy and lands on Amazon */
.st-ag3 { align-self: flex-start; }
.st-mbw {
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.st-mbar { padding: var(--s-2) var(--s-2); border-bottom: 1px solid var(--n2); background: var(--n0); }
.st-murl {
  display: grid;
  font-family: var(--mono);
  font-size: var(--t-12);
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-sm);
  padding: 3px var(--s-2);
  color: var(--n6);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.st-murl>span {
  grid-area: 1/1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-ub { opacity: 0; transform: translateY(8px); color: var(--bad); font-weight: 700; }
.st-mbody { display: grid; padding: var(--s-2); min-height: 58px; }
.st-mbody>div {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-mbuy {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  background: var(--n9);
  color: var(--white);
  font-weight: 700;
  font-size: var(--t-12);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.st-mpb {
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 2px !important;
  opacity: 0;
  transform: translateX(24px);
}
.st-mpb b { font-family: var(--mono); font-size: var(--t-16); color: var(--bad); }
.st-mpb span { font-size: var(--t-12); color: var(--n6); }
.st-out {
  align-self: flex-end;
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--bad);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-c.a1 .st-mbuy { outline: 2px solid var(--brand-soft); outline-offset: 2px; }
.st-c.a2 .st-mbuy { transform: scale(.92); }
.st-c.a3 .st-mbuy { transform: none; outline: none; }
.st-c.a3 .st-mbw { border-color: var(--bad-line); animation: st-bounce .6s var(--ease); }
@keyframes st-bounce { 0% { transform: none; } 35% { transform: translateX(14px); } 65% { transform: translateX(-5px); } 100% { transform: none; } }
.st-c.a3 .st-murl { border-color: var(--bad-line); background: var(--bad-bg); }
.st-c.a3 .st-ua { opacity: 0; transform: translateY(-8px); }
.st-c.a3 .st-ub { opacity: 1; transform: none; }
.st-c.a3 .st-mpa { opacity: 0; transform: translateX(-24px); }
.st-c.a3 .st-mpb { opacity: 1; transform: none; }
.st-c.a3 .st-out { opacity: 1; transform: none; }

/* ─── how it works: steps on the left (timeline), the matching mockup on the right ─────────── */
.st-howl { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.st-howhd h2 { margin-top: var(--s-2); }
.st-howgrid {
  display: grid;
  grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  gap: var(--s-6);
  align-items: center;
}
.st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.st-step {
  position: relative;
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.st-sbtn {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  width: 100%;
  padding: var(--s-4) var(--s-4) var(--s-4);
  cursor: pointer;
  border-radius: var(--r-md);
  min-height: 44px;
}
.st-sbtn:hover .st-stx b { color: var(--n9); }
.st-stx { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.st-stx b {
  font-size: var(--t-18);
  letter-spacing: var(--display-tracking);
  color: var(--n5);
  transition: color var(--dur) var(--ease);
}
.st-stx span {
  font-size: var(--t-14);
  color: var(--n5);
  line-height: 1.5;
  transition: color var(--dur) var(--ease), max-height var(--dur) var(--ease), opacity var(--dur) var(--ease);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.st-step.on { background: var(--white); box-shadow: var(--shadow); }
.st-step.on .st-stx b { color: var(--n9); }
.st-step.on .st-stx span { color: var(--n6); max-height: 120px; opacity: 1; }
.st-sbar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 3px;
  border-radius: var(--r-sm);
  background: var(--n1);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.st-sbar i { display: block; height: 100%; width: 0; background: var(--brand); }
.st-step.on .st-sbar { opacity: 1; }
.st-vin { display: none; }
.st-vstage { position: relative; height: 384px; }
.st-vstage .st-vg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.st-vstage .st-vg.on { opacity: 1; transform: none; }
.st-vg {
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.st-vpad {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
  justify-content: center;
}
.st-vprog { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-14); color: var(--n6); }
.st-vpb { flex: 1; height: 8px; border-radius: var(--r-sm); background: var(--n1); overflow: hidden; }
.st-vpb i { display: block; height: 100%; width: 0; background: var(--brand-soft),var(--brand-soft)); }
.st-vcnt { white-space: nowrap; }
.st-vcnt b { font-family: var(--mono); color: var(--n9); }
.st-vg.go .st-vpb i { transition: width 2.2s var(--ease); width: 100%; }
.st-vthumbs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-2); }
.st-vt {
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: var(--t-12);
  font-weight: 600;
  opacity: 0;
  transform: scale(.9) translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-vt span { height: 84px; background: var(--n1) center/contain no-repeat; display: block; }
.st-vt em {
  font-style: normal;
  padding: var(--s-1) var(--s-2) 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-vt b { font-family: var(--mono); padding: 0 var(--s-2) var(--s-2); }
.st-vt.in { opacity: 1; transform: none; }
.st-vfound,
.st-vpub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  align-items: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-vfound.in, .st-vpub.in { opacity: 1; transform: none; }
.st-vi {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-3);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-vi.in { opacity: 1; transform: none; }
.st-vic {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-vic.bad, .st-vic.warn { color: var(--bad); }
.st-vic.warn { color: var(--warn); }
.st-vic.bad { background: var(--bad-bg); }
.st-vic.warn { background: var(--warn-bg); }
.st-vib { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-12); color: var(--n6); }
.st-vib b { font-size: var(--t-14); color: var(--n9); }
.st-vst { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (max-width: 480px) {   /* phones: the status pill drops under the issue text instead of squeezing it */
  .st-vi { flex-wrap: wrap; }
  .st-vib { flex-basis: calc(100% - 30px - var(--s-2)); }
  .st-vi .st-vst { margin-left: calc(30px + var(--s-2)); }
}
.st-pubbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: var(--t-14);
  transition: transform var(--dur-fast) var(--ease);
}
.st-pubbtn.press { transform: scale(.94); }
.st-live {
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-live.in { opacity: 1; transform: none; }
.st-vfeed {
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--n6);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.st-vfeed.in { opacity: 1; }
.st-vch {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-14);
}
.st-vch b { font-size: var(--t-14); }
.st-vch span:not(.st-sw) { color: var(--n6); font-size: var(--t-12); }
.st-sw {
  width: 38px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--n2);
  position: relative;
  transition: background var(--dur) var(--ease);
  flex-shrink: 0;
  margin-left: auto;
}
.st-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--white);
  transition: transform var(--dur) var(--ease);
  box-shadow: var(--shadow);
}
.st-sw.on { background: var(--brand); }
.st-sw.on::after { transform: translateX(16px); }
.st-vsite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-2);
  border: 1px dashed var(--brand-line);
  background: var(--brand-bg);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-14);
  font-weight: 700;
}
.st-vsn { display: inline-flex; align-items: center; gap: var(--s-2); }
.st-vsite code {
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--brand-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.st-vsok { opacity: 0; transition: opacity var(--dur) var(--ease); }
.st-vsok.in { opacity: 1; }

/* ─── checkout before / after ─────────────────────────────────────────────────────────── */
.st-page {
  position: relative;
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.st-pbody {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s-4);
  padding: var(--s-4);
  align-items: center;
  flex: 1;
}
.st-pimg { aspect-ratio: 1; border-radius: var(--r-md); background: var(--n1) center/contain no-repeat; }
.st-pinfo { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.st-brand { font-size: var(--t-12); font-weight: 500; color: var(--n5); }
.st-ptitle { font-size: var(--t-18); line-height: 1.2; letter-spacing: var(--display-tracking); }
.st-pprice { font-family: var(--mono); font-size: var(--t-22); font-weight: 700; align-self: flex-start; }
.st-mini {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid var(--n2);
  background: var(--n1) center/contain no-repeat;
  flex-shrink: 0;
}
.st-band { margin-top: var(--s-5); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--s-3); }
.st-ba {
  margin-top: var(--s-4);
  background: var(--n0);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.st-bahead { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: space-between; }
.st-seg {
  display: flex;
  gap: var(--s-1);
  background: var(--n1);
  border-radius: var(--r-md);
  padding: var(--s-1);
  flex-wrap: wrap;
}
.st-segb {
  appearance: none;
  border: 0;
  font: inherit;
  font-size: var(--t-14);
  font-weight: 700;
  color: var(--n6);
  background: transparent;
  border-radius: var(--r-md);
  min-height: 44px;
  padding: 0 var(--s-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.st-segb.on { background: var(--white); color: var(--n9); box-shadow: none; outline: 1px solid var(--n2); }
.st-dotb { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--n4); }
.st-dotb.brand { background: var(--brand-soft); }
.st-babody {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s-4);
  margin-top: var(--s-3);
  align-items: stretch;
}
.st-bapage .st-pbody { align-items: start; }
.st-bapage .st-ptitle { font-size: var(--t-18); }
.st-cta {
  position: relative;
  display: grid;
  margin-top: var(--s-2);
  min-height: 44px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--n9);
  color: var(--white);
  font-weight: 700;
  font-size: var(--t-14);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.st-cta>span {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-cta small { font-weight: 500; font-size: var(--t-12); opacity: .75; }
.st-cta-b { opacity: 0; transform: translateY(12px); }
.st-cta.press { transform: scale(.95); }
.st-cta.glow { outline: 2px solid var(--brand-soft); outline-offset: 2px; }
.st-ctanote { display: grid; font-size: var(--t-12); color: var(--n6); }
.st-ctanote>span { grid-area: 1/1; transition: opacity var(--dur) var(--ease); }
.st-cn-b { opacity: 0; }
.st-ba[data-mode="after"] .st-cta { background: var(--brand); }
.st-ba[data-mode="after"] .st-cta-a { opacity: 0; transform: translateY(-12px); }
.st-ba[data-mode="after"] .st-cta-b { opacity: 1; transform: none; }
.st-ba[data-mode="after"] .st-cn-a { opacity: 0; }
.st-ba[data-mode="after"] .st-cn-b { opacity: 1; }
.st-baside { position: relative; min-height: 300px; overflow: hidden; border-radius: var(--r-md); }
.st-journey,
.st-drawer {
  position: absolute;
  inset: 0;
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.st-journey { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.st-jh { font-size: var(--t-12); font-weight: 500; color: var(--n5); }
.st-journey ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.st-journey li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-14);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.st-journey li>span {
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 700;
  width: auto;
  height: auto;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--n5);
}
.st-journey li em { font-style: normal; min-width: 0; }
.st-journey li.in { opacity: 1; transform: none; }
.st-journey li.st-wall { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad); }
.st-jsum {
  margin: auto 0 0;
  font-size: var(--t-14);
  color: var(--n9);
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.st-jsum.in { opacity: 1; }
.st-jsum b { font-family: var(--mono); }
.st-drawer {
  transform: translateX(104%);
  box-shadow: none;
  border-color: var(--brand-line);
  transition: transform var(--dur) var(--ease);
  gap: var(--s-2);
}
.st-ba[data-mode="after"] .st-drawer.open { transform: none; box-shadow: var(--shadow); }
.st-ba[data-mode="after"] .st-journey { opacity: .25; transform: translateX(-14px); }
.st-dh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  border-bottom: 1px solid var(--n2);
  padding-bottom: var(--s-2);
}
.st-dh b { font-size: var(--t-16); }
.st-dh span { font-size: var(--t-12); color: var(--n5); }
.st-dline2 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-14); }
.st-dline2 b { font-family: var(--mono); margin-left: auto; }
.st-dt { display: flex; flex-direction: column; font-weight: 600; }
.st-dt small { font-weight: 500; color: var(--n5); font-size: var(--t-12); }
.st-drow { display: flex; justify-content: space-between; font-size: var(--t-14); color: var(--n6); }
.st-drow b { font-family: var(--mono); color: var(--n9); }
.st-dtot { font-weight: 800; color: var(--n9); border-top: 1px solid var(--n2); padding-top: var(--s-2); }
.st-dtot b { font-size: var(--t-18); }
.st-dpay { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.st-dco {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: var(--t-14);
}
.st-dsum { margin: 0; font-size: var(--t-14); color: var(--brand-ink); font-weight: 600; }
.st-dsum b { font-family: var(--mono); }
.st-under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--t-14); }
.st-under a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.st-under a:hover { text-decoration: underline; }
@media (max-width: 1100px) and (min-width: 861px) {
  .st-chd { flex-direction: column; gap: 2px; }
  .st-cstat { text-align: left; }
}
@media (max-width: 980px) {
  .st-howgrid { grid-template-columns: 1fr; gap: 0; }
  .st-vstage { display: none; }
  .st-steps { gap: var(--s-3); margin-top: var(--s-1); }
  .st-step { background: var(--white); border: 1px solid var(--n2); box-shadow: var(--shadow); }
  .st-step .st-stx b, .st-step .st-stx span { color: var(--n9); }
  .st-step .st-stx span { color: var(--n6); max-height: none; opacity: 1; }
  .st-step .st-sbar { display: none; }
  .st-sbtn { cursor: default; padding: var(--s-4) var(--s-4) var(--s-3); }
  .st-vin { display: block; padding: 0 var(--s-3) var(--s-3); }
  .st-vin .st-vg { box-shadow: none; border-radius: var(--r-md); }
}
@media (max-width: 860px) {
  .st-phd { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .st-cards { grid-template-columns: minmax(0,1fr); grid-template-rows: none; gap: var(--s-3); }
  .st-c { grid-row: auto; display: flex; flex-direction: column; }
  .st-chd { padding: var(--s-3) var(--s-4) var(--s-2); flex-wrap: wrap; }
  .st-cname { white-space: nowrap; }
  .st-row { padding: var(--s-3) var(--s-4); }
  .st-stage { height: 188px; }
  .st-bridge { text-align: left; font-size: var(--t-16); }
  .st-babody { grid-template-columns: 1fr; }
  .st-pbody { grid-template-columns: 120px minmax(0,1fr); gap: var(--s-3); padding: var(--s-3); }
  .st-ptitle { font-size: var(--t-16); }
  .st-pprice { font-size: var(--t-22); }
  .st-vthumbs { gap: var(--s-2); }
  .st-vt span { height: 64px; }
  .st-vpad { padding: var(--s-3); }
  .st-vch span:not(.st-sw) { display: none; }
  .st-band { grid-template-columns: 1fr 1fr; }
  .st-ba { padding: var(--s-3); }
  .st-cta small { display: none; }
  .st-bapage .st-pbody { grid-template-columns: 96px minmax(0,1fr); }
  .st-seg { width: 100%; flex-wrap: nowrap; }
  .st-segb { flex: 1 1 0; justify-content: center; }
  .st-bahead .st-replay { margin-left: auto; }
  .st-baside { min-height: 0; display: grid; overflow: visible; }
  .st-journey, .st-drawer { position: relative; inset: auto; grid-area: 1/1; }
  .st-drawer {
    transform: translateY(24px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .st-ba[data-mode="after"] .st-drawer.open { opacity: 1; transform: none; pointer-events: auto; }
  .st-ba[data-mode="after"] .st-journey { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .st-prob *, .st-how *, .st-case * { transition: none !important; animation: none !important; }
}
/* ─── store agent chat (used on /roadmap) ─────────────────────────────────────────────── */

/* chat window */
.ag-chat {
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.ag-ch {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--n2);
  background: var(--n0);
}
.ag-log {
  position: relative;
  height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  scroll-behavior: smooth;
  background: var(--white);
}
.ag-b {
  max-width: 88%;
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-14);
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ag-b.ag-in { opacity: 1; transform: none; }
.ag-me {
  align-self: flex-end;
  background: var(--brand);
  color: var(--on-brand);
  border-bottom-right-radius: var(--r-sm);
}
.ag-ai {
  align-self: flex-start;
  background: var(--n1);
  border-bottom-left-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.ag-ai.ag-wide { max-width: 100%; width: 100%; }
.ag-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-2); }
.ag-pc {
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.ag-im {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--n1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: var(--t-22);
}
.ag-im img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ag-pt {
  font-weight: 700;
  font-size: var(--t-12);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.ag-pm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  font-size: var(--t-12);
  color: var(--n6);
}
.ag-pr { font-family: var(--mono); font-weight: 700; color: var(--n9); font-size: var(--t-14); }
.ag-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--r-md);
  background: var(--n9);
  color: var(--white);
  font-weight: 700;
  font-size: var(--t-14);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.ag-buy:hover { background: var(--brand); color: var(--on-brand); }
.ag-buy:focus-visible { outline: 3px solid var(--brand); }
.ag-aff {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--r-md);
  border: 1px dashed var(--n2);
  color: var(--n6);
  font-size: var(--t-12);
  font-weight: 600;
  text-align: center;
  padding: 0 var(--s-1);
}
.ag-typing { display: inline-flex; gap: var(--s-1); padding: var(--s-1) 2px; }
.ag-typing i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--n5);
  animation: ag-tp 1s infinite;
}
.ag-typing i:nth-child(2) { animation-delay: .15s; }
.ag-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ag-tp { 0%,60%,100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.ag-chips {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4) 0;
  flex-wrap: wrap;
  border-top: 1px solid var(--n2);
}
.ag-chip {
  font: inherit;
  font-size: var(--t-14);
  font-weight: 600;
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-line);
  background: var(--brand-bg);
  color: var(--brand-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ag-chip:hover { background: var(--white); border-color: var(--brand-soft); }
.ag-form { display: flex; gap: var(--s-2); padding: var(--s-2) var(--s-4) var(--s-4); }
.ag-form input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--n3);
  border-radius: var(--r-md);
  padding: 0 var(--s-3);
  font: inherit;
  font-size: var(--t-16);
  background: var(--white);
  color: var(--n9);
}
.ag-form input:focus { border-color: var(--brand-soft); }

/* .agent name terminal (roadmap) */
.ag-term { background: var(--n9); color: var(--on-dark); border-radius: var(--r-md); overflow: hidden; min-width: 0; }
.ag-th {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--n8);
  font-size: var(--t-12);
  color: var(--n4);
}
.ag-th i { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--n7); }
.ag-th span { margin-left: var(--s-1); font-family: var(--mono); }
.ag-replay {
  margin-left: auto;
  font: inherit;
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--on-brand-sub);
  background: transparent;
  border: 1px solid var(--n7);
  border-radius: var(--r-md);
  min-height: 44px;
  padding: 0 var(--s-3);
  cursor: pointer;
}
.ag-replay:hover { background: var(--n8); }
.ag-replay:focus-visible { outline: 2px solid var(--brand-line); }
.ag-l { margin: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ag-term.ag-armed .ag-l { opacity: 0; transform: translateY(4px); }
.ag-term.ag-armed .ag-l.ag-show { opacity: 1; transform: none; }
.ag-cmd b { color: var(--white); font-weight: 600; }
.ag-get { color: var(--n4); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .ag-log { height: 440px; padding: var(--s-3) var(--s-3); }
  .ag-b { max-width: 92%; }
  .ag-cards { grid-template-columns: 1fr; }
  .ag-pc {
    display: grid;
    grid-template-columns: 64px minmax(0,1fr);
    grid-template-areas: "im t" "im m" "b b";
    gap: var(--s-1) var(--s-2);
    align-items: center;
  }
  .ag-pc .ag-im { grid-area: im; width: 64px; height: 64px; }
  .ag-pc .ag-pt { grid-area: t; min-height: 0; }
  .ag-pc .ag-pm { grid-area: m; }
  .ag-pc .ag-buy, .ag-pc .ag-aff { grid-area: b; margin-top: var(--s-1); }
  .ag-chips { flex-wrap: nowrap; overflow-x: auto; padding: var(--s-2) var(--s-3) 0; scrollbar-width: none; }
  .ag-chips::-webkit-scrollbar { display: none; }
  .ag-chip { flex-shrink: 0; }
  .ag-form { padding: var(--s-2) var(--s-3) var(--s-3); }
}
@media (prefers-reduced-motion: reduce) {
  .ag-b, .ag-l { transition: none !important; }
  .ag-typing i { animation: none !important; }
  .ag-log { scroll-behavior: auto; }
}

/* ─── agents diagram (/product/agents) ─────────────────────────────────────────────────── */
.pf-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.25fr);
  gap: var(--s-8);
  align-items: center;
  margin-top: var(--s-5);
}
.pf-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.pf-wires path {
  fill: none;
  stroke: var(--brand-line);
  stroke-width: 2;
  stroke-dasharray: 5 6;
  transition: stroke var(--dur) var(--ease), opacity var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.pf-wires path.on { stroke: var(--brand-soft); stroke-width: 2.5; stroke-dasharray: none; }
.pf-flow.act .pf-wires path:not(.on) { opacity: .35; }
.pf-dotlayer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pf-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  box-shadow: none;
  offset-rotate: 0deg;
  opacity: 0;
}
.pf-dot.run { animation: pf-travel 1.9s var(--ease) infinite; }
.pf-dot#pf-dot2.run { animation-delay: .95s; }
@keyframes pf-travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.pf-agents, .pf-core, .pf-outs { position: relative; z-index: 2; }
.pf-agents { display: flex; flex-direction: column; gap: var(--s-2); }
.pf-ag {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0 var(--s-3);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  background: var(--white);
  font: inherit;
  font-size: var(--t-14);
  font-weight: 600;
  color: var(--n9);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pf-ag:hover { border-color: var(--brand-line); }
.pf-ag.on { border-color: var(--brand-soft); box-shadow: none; transform: translateX(3px); }
.pf-flow.act .pf-ag:not(.on) { opacity: .55; }
.pf-core {
  background: var(--white);
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.pf-core b { font-size: var(--t-16); }
.pf-core-url { color: var(--brand-ink); }
.pf-outs { display: flex; flex-direction: column; gap: var(--s-3); }
.pf-out {
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pf-out-h { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pf-out-h b { font-size: var(--t-14); margin-right: auto; }
.pf-out.on { border-color: var(--brand-soft); }
.pf-flow.act .pf-out:not(.on) { opacity: .45; }
.pf-cap {
  min-height: 48px;
  margin: var(--s-5) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pf-cap-in {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--t-14);
  color: var(--n6);
}
.pf-cap-in b { color: var(--n9); }
.pf-cap-in svg { flex-shrink: 0; }

/* ─── storefronts (/product/storefronts) ───────────────────────────────────────────────── */
.pf-cat {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.6fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
  align-items: start;
}
.pf-tree { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.pf-master {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-weight: 700;
  font-size: var(--t-16);
}
.pf-master .mono {
  background: var(--brand-strong);
  border-radius: var(--r-sm);
  padding: 1px var(--s-2);
  font-size: var(--t-14);
}
.pf-branches {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-left: var(--s-5);
  padding-left: var(--s-5);
  border-left: 2px solid var(--brand-line);
  padding-top: var(--s-4);
}
.pf-site {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 56px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  background: var(--white);
  font: inherit;
  color: var(--n9);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pf-site::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 50%;
  width: 22px;
  height: 2px;
  background: var(--brand-line);
  transition: background var(--dur-fast) var(--ease);
}
.pf-site b { font-size: var(--t-14); }
.pf-site.on { border-color: var(--brand-soft); box-shadow: none; }
.pf-site.on::before { background: var(--brand-soft); }
.pf-shop {
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pf-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--n2);
  background: var(--n0);
}
.pf-dots { display: flex; gap: var(--s-1); }
.pf-dots i { width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--n2); display: block; }
.pf-url {
  flex: 1;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
  font-size: var(--t-12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-shown { color: var(--n6); font-weight: 700; white-space: nowrap; }
.pf-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-2); padding: var(--s-3); }
.pf-tile {
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pf-tile .pf-im { height: 112px; background: var(--n1) center/contain no-repeat; border-bottom: 1px solid var(--n2); }
.pf-tx {
  padding: var(--s-2) var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--t-12);
  font-weight: 600;
  line-height: 1.25;
}
.pf-tt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.pf-pr { display: flex; align-items: center; gap: var(--s-1); min-height: 22px; }
.pf-pr b { font-size: var(--t-12); }
.pf-whole { display: none; font-size: var(--t-12); padding: 1px var(--s-2); }
.pf-shop.dist .pf-whole { display: inline-flex; }
.pf-shop.dist .pf-retail { display: none; }
.pf-tile.off { opacity: .16; filter: grayscale(1); transform: scale(.96); }
.pf-tile.lit { border-color: var(--brand-soft); }

/* ─── integrations sync demo (/product/integrations) ─────────────────────────────────────── */
.pf-sync { margin-top: var(--s-5); padding: 0; }
.pf-plat { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pf-pt {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  background: var(--white);
  font: inherit;
  font-weight: 700;
  font-size: var(--t-14);
  color: var(--n9);
  cursor: pointer;
}
.pf-pt.on { border-color: var(--brand-soft); box-shadow: none; }
.pf-sync-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr);
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-4);
}
.pf-pane {
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
.pf-pane-h { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-14); }
.pf-pane-h b { margin-right: auto; }
.pf-src-mark { display: inline-flex; min-width: 24px; height: 24px; align-items: center; justify-content: center; }
.pf-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px dashed var(--n2);
  padding-bottom: var(--s-2);
}
.pf-kv b { font-size: var(--t-22); }
.pf-prod { display: flex; align-items: center; gap: var(--s-2); }
.pf-prod-im {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--n2);
  background: var(--n1) center/contain no-repeat;
  flex-shrink: 0;
}
.pf-prod-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-prod-tx .xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-price {
  font-size: var(--t-16);
  transition: color var(--dur) var(--ease);
  align-self: flex-start;
  padding: 0 3px;
  margin-left: -3px;
}
.pf-price.chg, .pf-json .chg { color: var(--brand-ink); background: var(--brand-bg); border-radius: var(--r-sm); }
.pf-note { min-height: 1.2em; color: var(--brand-ink) !important; font-weight: 600; }
.pf-upd {
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pf-upd.in { opacity: 1; transform: none; }
.pf-json {
  margin: 0;
  background: var(--n1);
  color: var(--n9);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-12);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--n2);
}
.pf-json span { padding: 0 2px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.pf-json .chg { color: var(--brand-ink); background: var(--brand-bg); }
.pf-arrows { display: flex; flex-direction: column; gap: var(--s-4); }
.pf-arr {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  color: var(--n6);
  text-align: center;
}
.pf-arr::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  background: none;
  border-top: 2px dashed var(--brand-line);
}
.pf-arr::after { content: ''; position: absolute; top: -4px; width: 0; height: 0; border: 5px solid transparent; }
.pf-fwd::after { right: -2px; border-left: 8px solid var(--brand-soft); }
.pf-back::after { left: -2px; border-right: 8px solid var(--brand-line); }
.pf-arr i {
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  box-shadow: none;
  opacity: 0;
}
.pf-sync.run .pf-fwd i { animation: pf-slide 1.6s linear infinite; }
.pf-sync.run .pf-back i {
  animation: pf-slide-b 3.2s linear infinite;
  background: var(--brand-line);
  box-shadow: none;
}
@keyframes pf-slide { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes pf-slide-b { 0% { left: calc(100% - 10px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.pf-live { min-height: 1.4em; margin: var(--s-3) 0 0; font-size: var(--t-14); color: var(--n6); text-align: center; }

.pf-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-7); }
.pf-more > div { border-top: 1px solid var(--n2); padding-top: var(--s-5); }
.pf-more h3 { margin-bottom: var(--s-2); }
.pf-more a { white-space: nowrap; }

/* ─── live cart + the agent's request (/product/checkout) ───────────────────────────────── */
.pf-buygrid {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
  align-items: stretch;
}
.pf-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pf-card-im {
  background: var(--white) center/contain no-repeat;
  height: 230px;
  border-bottom: 1px solid var(--n2);
  flex-shrink: 0;
}
.pf-card-bd { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
.pf-card-t { margin: 0; font-size: var(--t-18); line-height: 1.25; letter-spacing: var(--display-tracking); }
.pf-card-pr { display: flex; align-items: center; gap: var(--s-2); }
.pf-card-pr b { font-size: var(--t-22); }
.pf-card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-1); }
.pf-card-btns .btn { width: 100%; }
.pf-add[aria-disabled="true"] { opacity: .7; cursor: progress; }
.pf-card .testbar { margin-top: auto; }
.pf-term {
  background: var(--n9);
  color: var(--on-dark);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pf-term-h {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--n8);
  color: var(--n4);
}
.pf-term-h .pf-dots i { background: var(--n7); }
.pf-term-st { margin-left: auto; color: var(--ok-line); font-weight: 700; }
.pf-code {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-12);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
  min-height: 340px;
  max-height: 460px;
  overflow: auto;
}
.pf-c-m { color: var(--n4); }
.pf-c-k { color: var(--brand-line); }
.pf-c-s { color: var(--on-dark); }
.pf-c-n { color: var(--white); }
.pf-c-v { color: var(--white); font-weight: 700; }
.pf-c-pay { background: var(--brand); border-radius: var(--r-sm); padding: 0 3px; color: var(--white); }
.pf-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--brand-soft);
  vertical-align: -2px;
  animation: pf-blink 1s steps(1) infinite;
}
@keyframes pf-blink { 50% { opacity: 0; } }

/* product demos · phones */
@media (max-width: 860px) {
  .pf-flow { grid-template-columns: 1fr; gap: var(--s-6); }
  .pf-agents { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-2); }
  .pf-ag { padding: 0 var(--s-2); font-size: var(--t-14); }
  .pf-ag.on { transform: none; }
  .pf-outs { margin-left: var(--s-5); }
  .pf-cat { grid-template-columns: 1fr; gap: var(--s-4); }
  .pf-branches {
    flex-direction: row;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    padding-top: var(--s-3);
    gap: var(--s-2);
    position: relative;
  }
  .pf-branches::before {
    content: '';
    position: absolute;
    left: 16.6%;
    right: 16.6%;
    top: 0;
    height: 2px;
    background: var(--brand-line);
  }
  .pf-master { align-self: center; }
  .pf-site { flex: 1; min-width: 0; padding: var(--s-2) var(--s-2); min-height: 60px; }
  .pf-site::before { left: 50%; top: -14px; width: 2px; height: 14px; }
  .pf-site .xs {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--t-12);
  }
  .pf-site b { font-size: var(--t-14); }
  .pf-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-2); padding: var(--s-2); }
  .pf-tile .pf-im { height: 78px; }
  .pf-tx { padding: var(--s-1) var(--s-2); font-size: var(--t-12); }
  .pf-pr b { font-size: var(--t-12); }
  .pf-shown { display: none; }
  .pf-plat { flex-wrap: nowrap; gap: var(--s-1); }
  .pf-pt { padding: 0 var(--s-2); gap: var(--s-1); font-size: var(--t-14); flex: 1 1 auto; justify-content: center; }
  .pf-pt svg { flex-shrink: 0; }
  .pf-sync-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .pf-arrows { flex-direction: row; justify-content: center; gap: var(--s-4); padding: var(--s-1) 0; }
  .pf-arr { width: 140px; padding-top: var(--s-7); }
  .pf-arr::before {
    position: absolute;
    left: calc(50% - 1px);
    top: 0;
    width: 0;
    height: 40px;
    background: none;
    border-top: 0;
    border-left: 2px dashed var(--brand-line);
  }
  .pf-fwd::after {
    right: auto;
    left: calc(50% - 5px);
    top: 38px;
    border: 5px solid transparent;
    border-top: 8px solid var(--brand-soft);
  }
  .pf-back::after {
    left: calc(50% - 5px);
    top: -10px;
    border: 5px solid transparent;
    border-bottom: 8px solid var(--brand-line);
  }
  .pf-arr i { left: calc(50% - 5px) !important; }
  .pf-sync.run .pf-fwd i { animation-name: pf-slide-v; }
  .pf-sync.run .pf-back i { animation-name: pf-slide-vb; }
  @keyframes pf-slide-v { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 30px; opacity: 0; } }
  @keyframes pf-slide-vb { 0% { top: 30px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 0; opacity: 0; } }
  .pf-buygrid { grid-template-columns: 1fr; }
  .pf-more { grid-template-columns: 1fr; gap: 0; margin-top: var(--s-6); }
  .pf-card-im { height: 200px; }
  .pf-card-btns { grid-template-columns: 1fr; }
  .pf-code { min-height: 260px; font-size: var(--t-12); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-dot, .pf-arr i, .pf-caret { animation: none !important; opacity: 0 !important; }
  .pf-tile, .pf-ag, .pf-out, .pf-upd, .pf-wires path { transition: none !important; }
}
/* ─── payments (/product/checkout) ─────────────────────────────────────────────────────── */
.pay-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 var(--s-3);
  border: 1px solid var(--n3); border-radius: var(--r-sm); background: var(--white); color: var(--n9);
  font-size: var(--t-16); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none;
}
.pay-btn svg { display: block; flex-shrink: 0; }
.pay-applepay { background: var(--n9); border-color: var(--n9); color: var(--white); }
.pay-w { line-height: 1; }
.pay-marks { display: flex; align-items: center; }
.pay-mark2 { display: flex; margin-left: calc(var(--s-1) * -1); border-radius: var(--r-pill); outline: 2px solid var(--white); }
.dp-test { margin-top: var(--s-3); }

/* ─── demo cards ──────────────────────────────────────────────────────────────────────── */
.dp-card {
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.dp-card h3 { margin: 0; font-size: var(--t-18); letter-spacing: var(--display-tracking); }
.dp-mt1 { margin-top: var(--s-3); }
.dp-ok { color: var(--ok); font-weight: 700; }
/* pay with: the one place payment and USDC logos appear (/product/checkout) */
.dp-with { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.dp-wrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.dp-wrow ul { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.dp-wlbl { font-size: var(--t-12); font-weight: 500; color: var(--n6); min-width: 64px; }
.dp-with .hx-mchip { opacity: 1; color: var(--n9); }
.dp-with .hx-mchip svg { filter: none; }
.hx-card { font-weight: 700; }
.dp-pay {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.dp-tot { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; }
.dp-tot b { font-family: var(--mono); font-size: var(--t-22); }
.dp-methods { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.dp-methods .pay-btn {
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity: .7;   /* dimmed but ≥ 4.5:1 — these are focusable */
}
.dp-methods .pay-btn.sel { opacity: 1; border-color: var(--brand-soft); }
.dp-screen {
  min-height: 120px;
  border-radius: var(--r-md);
  background: var(--n0);
  border: 1px dashed var(--n2);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  font-size: var(--t-14);
}
.dp-ln { display: flex; align-items: center; gap: var(--s-2); }
.dp-rails { display: flex; flex-direction: column; gap: var(--s-2); }
.dp-rail { display: flex; align-items: center; gap: var(--s-2); }
.dp-rail b { font-size: var(--t-14); }
.dp-tempo {
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--n9);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-12);
  font-weight: 800;
  flex-shrink: 0;
}
.dp-x { margin-top: var(--s-4); gap: var(--s-4); }
.dp-step {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  padding: var(--s-2) var(--s-2);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  opacity: .4;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dp-step div { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-14); min-width: 0; }
.dp-step b { font-size: var(--t-14); }
.dp-step.on { opacity: 1; background: var(--brand-bg); border-color: var(--brand-line); }
.dp-step.done { opacity: 1; }
.dp-dot {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.dp-dot i {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--brand-line);
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.dp-dot.on i { background: var(--brand-soft); width: 22px; border-radius: var(--r-pill); }

/* dashboard */
.dp-dash { margin-top: var(--s-5); gap: var(--s-4); }
.dp-dhead { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.dp-live {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
}
.dp-live i {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--ok);
  animation: dp-pulse 1.8s var(--ease) infinite;
}
.dp-live.dp-ex { color: var(--n6); background: var(--n1); border-color: var(--n2); }
.dp-live.dp-ex i { background: var(--n4); animation: none; }
@keyframes dp-pulse { 50% { opacity: .35; } }
.dp-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--s-2); }
.dp-kpi {
  background: var(--n0);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.dp-kpi b {
  font-size: var(--t-28);
  letter-spacing: var(--display-tracking);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-kpi span { font-size: var(--t-12); color: var(--n6); }
.dp-dgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: var(--s-5); }
.dp-dgrid h4 { margin: 0 0 var(--s-2); font-size: var(--t-14); color: var(--n6); font-weight: 700; }
.dp-bars { display: flex; flex-direction: column; gap: var(--s-2); }
.dp-bar {
  display: grid;
  grid-template-columns: 118px minmax(0,1fr) 32px;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-14);
}
.dp-bl { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.dp-bt { height: 14px; border-radius: var(--r-pill); background: var(--n1); overflow: hidden; }
.dp-bt i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--brand-soft),var(--brand-soft));
  transition: width 1.1s var(--ease) .2s;
}
.dp-dash.go .dp-bt i { width: var(--w); }
.dp-bar b { text-align: right; }
.dp-orders { display: flex; flex-direction: column; gap: var(--s-2); }
.dp-ord {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr) auto;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  font-size: var(--t-14);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity var(--dur) var(--ease) var(--d), transform var(--dur) var(--ease) var(--d);
}
.dp-dash.go .dp-ord { opacity: 1; transform: none; }
.dp-oid { font-size: var(--t-12); color: var(--n5); }
.dp-opay { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* dev sandbox — the one dark block on /product/integrations */
.dp-term {
  margin-top: var(--s-5);
  background: var(--n9);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--n1);
}
.dp-tbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--n8);
  background: var(--n8);
}
.dp-lights { display: flex; gap: var(--s-1); }
.dp-lights i { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--n7); }
.dp-tabs { display: flex; gap: 2px; overflow: hidden; }
.dp-tab {
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 0;
  background: none;
  color: var(--n4);
  font: inherit;
  font-size: var(--t-14);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.dp-tab.on { color: var(--white); border-bottom-color: var(--brand-line); }
.dp-tab:focus-visible { outline: 2px solid var(--brand-line); }
.dp-cmdrow { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-4) var(--s-1); }
.dp-cmd {
  flex: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-14);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 21px;
  color: var(--white);
}
.dp-pr { color: var(--brand-line); user-select: none; }
.dp-caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--brand-line);
  vertical-align: -2px;
  animation: dp-blink 1s steps(1) infinite;
}
@keyframes dp-blink { 50% { opacity: 0; } }
.dp-copy {
  min-height: 36px;
  min-width: 64px;
  padding: 0 var(--s-3);
  border: 1px solid var(--n7);
  border-radius: var(--r-sm);
  background: var(--n8);
  color: var(--n1);
  font: inherit;
  font-size: var(--t-12);
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.dp-copy:hover { background: var(--n8); }
.dp-meta {
  padding: var(--s-1) var(--s-4) var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--n4);
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.dp-okd { color: var(--ok-line); }
.dp-live2 {
  border: 1px solid var(--ok);
  color: var(--ok-line);
  border-radius: var(--r-pill);
  padding: 1px var(--s-2);
  font-size: var(--t-12);
}
.dp-spin {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  border: 2px solid var(--n5);
  border-top-color: var(--brand-line);
  animation: dp-rot .8s linear infinite;
}
@keyframes dp-rot { to { transform: rotate(360deg); } }
.dp-out {
  margin: 0;
  padding: var(--s-1) var(--s-4) var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-12);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  height: 380px;
  overflow-y: auto;
  color: var(--n3);
}
.dp-k { color: var(--brand-line); }
.dp-s { color: var(--on-dark); }
.dp-nm { color: var(--white); }
.dp-b { color: var(--on-dark); }
.dp-c { color: var(--n4); font-style: italic; }

/* prompts (/product/agents) */
.dp-prompts {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
  align-items: start;
}
.dp-pcards { display: flex; flex-direction: column; gap: var(--s-3); }
.dp-pc {
  gap: var(--s-2);
  padding: var(--s-4);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dp-pc.on { border-color: var(--brand-soft); box-shadow: var(--shadow); }
.dp-pc.send { transform: translateX(6px); }
.dp-pch { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-16); }
.dp-ptext {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-12);
  line-height: 1.55;
  color: var(--n9);
  background: var(--n0);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  overflow-wrap: anywhere;
}
.dp-pbtns { display: flex; gap: var(--s-2); }
.dp-run,
.dp-copy2 {
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--t-14);
  font-weight: 700;
  cursor: pointer;
}
.dp-run { background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); }
.dp-copy2 { background: var(--white); color: var(--n9); border: 1px solid var(--n2); }
.dp-chat { position: sticky; top: 84px; min-height: 420px; }
.dp-chead {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--n2);
}
.dp-chead .xs { margin-left: auto; text-align: right; }
.dp-msgs { display: flex; flex-direction: column; gap: var(--s-3); }
.dp-u {
  align-self: flex-end;
  max-width: 88%;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-md); border-bottom-right-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-14);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.dp-a {
  align-self: flex-start;
  max-width: 96%;
  background: var(--n0);
  border: 1px solid var(--n2);
  border-radius: var(--r-md); border-bottom-left-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-14);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.dp-a p { margin: 0; }
.dp-a.in { animation: dp-in .4s var(--ease); }
@keyframes dp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dp-pi {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: var(--s-1);
}
.dp-pi img,
.dp-noimg {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--n1);
  flex-shrink: 0;
}
.dp-pi div { display: flex; flex-direction: column; min-width: 0; }
.dp-pi b { font-size: var(--t-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-colink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--on-brand);
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
}
.dp-dots { display: inline-flex; gap: var(--s-1); vertical-align: middle; }
.dp-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--n5);
  animation: dp-bounce 1s infinite;
}
.dp-dots i:nth-child(2) { animation-delay: .15s; }
.dp-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dp-bounce { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }
@media (max-width: 860px) {
  .dp-pay, .dp-dgrid, .dp-prompts { grid-template-columns: 1fr; }
  .dp-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dp-kpi:last-child { grid-column: 1/-1; }
  .dp-kpi b { font-size: var(--t-22); }
  .dp-chat { position: static; min-height: 0; }
  .dp-out { height: 320px; font-size: var(--t-12); }
  .dp-cmd { font-size: var(--t-12); }
  .dp-tab { padding: 0 var(--s-2); font-size: var(--t-14); }
  .dp-lights { display: none; }
  .dp-copy { min-height: 44px; }
  .dp-ord { grid-template-columns: auto minmax(0,1fr) auto; row-gap: var(--s-1); }
  .dp-oid { display: none; }
  .dp-bar { grid-template-columns: 104px minmax(0,1fr) 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-card *, .dp-dash *, .dp-term * { transition: none !important; animation: none !important; }
  .dp-ord { opacity: 1; transform: none; }
}
/* ─── tools, pricing, compare, merchants, trust, final CTA (shared blocks) ─────────────────── */
.bt-form { display: flex; gap: var(--s-2); align-self: end; grid-column: 1; }
.bt-form input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--n2);
  border-radius: var(--r-md);
  padding: 0 var(--s-3);
  font: inherit;
  font-size: var(--t-16);
  background: var(--white);
  color: var(--n9);
}
.bt-form .btn { min-height: 48px; }
.bt-err { grid-column: 1; color: var(--bad); font-size: var(--t-14); margin-top: -8px; }
.bt-ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.bt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bt-ring circle { fill: none; stroke-width: 10; }
.bt-ring-fg {
  stroke: var(--brand-soft);
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.4s var(--ease), stroke var(--dur) var(--ease);
}
.bt-ring.bt-busy svg { animation: bt-spin 1.6s linear infinite; }
.bt-ring.bt-busy .bt-ring-fg { stroke-dashoffset: 250; }
@keyframes bt-spin { to { transform: rotate(270deg); } }
.bt-status { font-weight: 700; }
.bt-fixes {
  margin: var(--s-2) 0 0;
  padding: 0 0 0 var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: var(--t-14);
  color: var(--n6);
}
.bt-fixes b { color: var(--n9); }
.bt-fixes li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bt-fixes li.in { opacity: 1; transform: none; }
.bt-full {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  font-weight: 700;
  margin-top: var(--s-1);
}
.bt-picker { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.bt-why { margin-top: var(--s-3); color: var(--n6); min-height: 24px; }
.bt-plan {
  position: relative;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity: .72;
}
.bt-plan.on { opacity: 1; border-color: var(--brand-soft); box-shadow: var(--shadow); transform: translateY(-4px); }
.bt-tr {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 var(--s-6);
  margin-top: var(--s-5);
  margin: var(--s-5) 0 0;
}
.bt-tr dt { font-weight: 700; }
.bt-tr dd { margin: var(--s-1) 0 0; color: var(--n6); }
.bt-tr > div { border-top: 1px solid var(--n2); padding: var(--s-4) 0; }
.bt-mer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.bt-mgrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.bt-mc {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bt-mc.in { opacity: 1; transform: none; }
.bt-mc img,
.bt-mc .bt-noimg {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  object-fit: contain;
  background: var(--white);
  border: 1px solid var(--n2);
  flex-shrink: 0;
}
.bt-mc h3 { font-size: var(--t-16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-mc .bt-mi { min-width: 0; flex: 1; }
.bt-mc .bt-ml { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: 2px; }
.bt-mc .bt-ml a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: var(--t-14);
}
.bt-final .final { margin-top: var(--s-7); }
.bt-founder { margin-top: var(--s-5); text-align: center; color: var(--n6); font-size: var(--t-14); }
.bt-mer:has(.bt-mgrid > p) { display: none; }
.bt-faq .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); margin-top: var(--s-5); border-top: 1px solid var(--n2); }
@media (max-width: 860px) { .bt-faq .faq { grid-template-columns: 1fr; } }
.bt-faq .faq details { background: none; border: 0; border-bottom: 1px solid var(--n2); border-radius: 0; padding: 0; }
.bt-faq .faq details p { max-width: 620px; }
@media (max-width: 1000px) {
  .bt-mgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .bt-tr, .bt-mgrid { grid-template-columns: 1fr; }
  .bt-form, .bt-err { grid-column: 1; grid-row: auto; }
  .bt-form { flex-direction: column; }
  .bt-fixes { text-align: left; }
  .bt-picker { flex-direction: column; }
  .bt-plan.on { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-ring-fg, .bt-plan, .bt-fixes li, .bt-mc { transition: none; }
  .bt-ring.bt-busy svg { animation: none; }
  .bt-mc { opacity: 1; transform: none; }
}

/* ─── how it works · timeline: a 1px line with small dots (no numbered circles) ───────────── */
.st-steps.st-tl { position: relative; gap: 0; }
.st-tl::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 26px;
  bottom: 34px;
  width: 1px;
  background: var(--n2);
}
.st-tl .st-step, .st-tl .st-step.on { background: none; box-shadow: none; border: 0; border-radius: 0; }
.st-tl .st-sbtn { gap: var(--s-4); padding: var(--s-4) 0 var(--s-4); border-radius: var(--r-sm); }
.st-dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--n0);
  border: 1px solid var(--n5);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.st-tl .st-step.on .st-dot { background: var(--brand); border-color: var(--brand); box-shadow: none; }
.st-tl .st-sbar { left: 29px; right: 0; bottom: 8px; height: 1px; background: var(--n2); }
@media (max-width: 980px) {
  .st-tl::before { bottom: 24px; }
  .st-tl .st-step { background: none; border: 0; box-shadow: none; }
  .st-tl .st-dot { background: var(--brand); border-color: var(--brand); }
  .st-tl .st-sbtn { padding: var(--s-3) 0 var(--s-3); }
  .st-tl .st-vin { margin-left: var(--s-6); }
}
@media (prefers-reduced-motion: reduce) {
  .st-dot { transition: none; }
}

/* ─── page heroes: eyebrow, h1, one lead, one button — same on every product page ────────── */
.pg-hero { padding-block: var(--section-y); }
.pg-hero:has(+ .sec) { padding-bottom: 0; }   /* the next section's padding-top is the rhythm; no double gap */
.pg-hero h1 { font-size: var(--t-56); margin: var(--s-3) 0 var(--s-4); max-width: 820px; }
.pg-lead { font-size: var(--t-18); color: var(--n6); max-width: 620px; margin-bottom: var(--s-6); }
.pg-final .final { margin-top: 0; }
.pg-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-5); color: var(--n6); font-size: var(--t-14); }
.pg-404-links { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center; }
.pg-404-links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 860px) {
  .pg-hero h1 { font-size: var(--t-40); }
  .pg-lead { font-size: var(--t-16); margin-bottom: var(--s-5); }
}

/* ─── lists: hairline rows instead of identical cards (roadmap, /product) ─────────────────── */
.rm-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--n2); max-width: 820px; }
.rm-list li { border-bottom: 1px solid var(--n2); }
.rm-list li,
.rm-list li>a {
  display: grid;
  grid-template-columns: minmax(0,220px) minmax(0,1fr);
  gap: var(--s-2) var(--s-5);
  padding: var(--s-4) 0;
  align-items: baseline;
}
.rm-list li:has(>a) { padding: 0; }
.rm-list li>a {
  color: inherit;
  text-decoration: none;
  padding: var(--s-4) var(--s-2);
  margin: 0 -8px;
  border-radius: var(--r-sm);
}
.rm-list li>a:hover { background: var(--n1); }
.rm-list b { font-size: var(--t-16); font-weight: 700; color: var(--n9); }
.rm-list span { color: var(--n6); }
@media (max-width: 640px) {
  .rm-list li, .rm-list li>a { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ─── home blocks ─────────────────────────────────────────────────────────────────────── */
.ch-h { margin-top: var(--s-7); }
.chtable { border-top: 1px solid var(--n2); }
.chtable .chrow { padding-inline: 0; }
.hm-more { margin-top: var(--s-4); font-weight: 600; }
.hm-more a { text-decoration: none; }
.hm-more a:hover { text-decoration: underline; }
.bt-open { margin-top: var(--s-3); }
.bt-open a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.bt-open a:hover { text-decoration: underline; }