/* Marketing site styles. Only CSS custom properties from tokens.css (copied at build time); no colour literals (test/site.test.ts enforces it).
   Brand rules carried over from the app: the brand colour is solid and only for the logo, the minted ID, the primary action and one loud band; errors never use it. */

@font-face { font-family: "Bricolage Grotesque Variable"; src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Page-level values the shared tokens do not define. */
:root {
  --section-pad: clamp(3rem, 7vw, 5.5rem);
  --measure: 40rem;
  --nav-underline: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.2em; }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
code { font-family: var(--font-mono); font-size: 0.92em; color: var(--color-text); background: var(--color-surface-sunken); padding: 0.05em 0.35em; border-radius: var(--radius-id); overflow-wrap: anywhere; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-3); top: -4rem; background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); z-index: 10; }
.skip:focus { top: var(--space-3); color: var(--color-on-ink); }

.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-5); }
.narrow { max-width: 48rem; }

/* Minted ID: brand mono on ink, as in the app. The chip also works on a span inside code. */
.kd, code.kd { font-family: var(--font-mono); background: var(--color-id-bg); color: var(--color-id-text); padding: 0.1em 0.4em; border-radius: var(--radius-id); font-size: 0.92em; white-space: nowrap; }
code .kd { font-size: 1em; padding: 0.05em 0.3em; }

/* Highlighter: a categorical marker, always ink text. */
.hl { color: var(--hl-ink); padding: 0 0.18em; border-radius: var(--radius-id); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl-activation { background: var(--hl-activation); }

/* ---- Header ---- */
.bar { position: sticky; top: 0; z-index: 5; background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
.bar-in { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-2); flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.logo img { display: block; height: 1.5rem; width: auto; max-width: 100%; }
.nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-inline-end: auto; }
.nav a { display: inline-flex; align-items: center; min-height: var(--touch-target); padding-inline: var(--space-1); color: var(--color-text-muted); font-weight: var(--weight-medium); text-decoration: none; border-bottom: var(--nav-underline) solid transparent; }
.nav a:hover { color: var(--color-text); }
.nav a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-brand); }
.bar-cta { display: flex; align-items: center; gap: var(--space-3); }
.link { display: inline-flex; align-items: center; min-height: var(--touch-target); padding-inline: var(--space-2); font-weight: var(--weight-medium); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch-target); padding: var(--space-2) var(--space-5);
  background: var(--color-ink); color: var(--color-on-ink);
  border: var(--border-pop); border-radius: var(--radius-sm); box-shadow: var(--pop-sm);
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-bold); text-decoration: none; text-align: center;
  transition: transform var(--duration), box-shadow var(--duration);
}
.btn:hover { color: var(--color-on-ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--pop-pressed); }
.btn-brand { background: var(--color-brand-fill); color: var(--color-on-brand); }
.btn-brand:hover { background: var(--color-brand-fill-strong); color: var(--color-on-brand); }
.btn-quiet { background: var(--color-surface); color: var(--color-ink); }
.btn-quiet:hover { color: var(--color-ink); }
.btn-sm { padding-inline: var(--space-4); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.more { font-weight: var(--weight-bold); }

/* ---- Type ---- */
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
h1 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(2.25rem, 6vw, 3rem); line-height: 1.08; letter-spacing: var(--tracking-brand); text-wrap: balance; }
.sec-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(1.625rem, 4vw, 2.375rem); line-height: 1.12; letter-spacing: var(--tracking-tight); text-wrap: balance; max-width: 44rem; }
h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.lede { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: var(--color-text-muted); margin-top: var(--space-5); max-width: var(--measure); }
.sec-lede { font-size: var(--text-lg); color: var(--color-text-muted); margin-top: var(--space-4); max-width: var(--measure); }
.fine { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 52rem; }
.sec-title + *:not(.sec-lede), .sec-lede + *:not(p) { margin-top: var(--space-6); }
.sec-title + p:not(.sec-lede) { margin-top: var(--space-4); }
.sec-lede + p { margin-top: var(--space-4); }

/* ---- Hero and page heads ---- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-pad); }
.hero-copy { max-width: 52rem; }
.hero h1 { font-size: clamp(2.5rem, 7.5vw, var(--text-3xl)); line-height: 1.04; }
.hero .lede { max-width: 44rem; }
.hero .fine { margin-top: var(--space-5); }
.shot-hero { margin-top: clamp(2rem, 5vw, 3.5rem); border: var(--border-pop); box-shadow: var(--pop-lg); }
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--space-6); }
.page-head h1 { max-width: 46rem; }
.toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.toc a { display: inline-flex; align-items: center; min-height: var(--touch-target); padding-inline: var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); text-decoration: none; font-weight: var(--weight-medium); font-size: var(--text-sm); }
.toc a:hover { border-color: var(--color-ink); }

/* ---- Sections ---- */
.sec { padding-block: var(--section-pad); }
.sec-alt { background: var(--color-surface-sunken); border-block: var(--border-width) solid var(--color-border); }
.sec > .wrap > .feature + .feature { margin-top: var(--section-pad); }

.problems, .cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-5); }
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-5); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-5); }
.problems li, .cols3 li { border-top: var(--border-pop); padding-top: var(--space-4); }
.problems h3, .cols3 h3, .card h3, .steps h3 { margin-bottom: var(--space-2); }
.problems p, .cols3 p, .card p, .steps p { color: var(--color-text-muted); }
.card { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.card p + p, .card .more { margin-top: var(--space-3); }
.card .ticks { margin-top: var(--space-3); }

/* Numbered steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-5); }
.steps li { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.steps-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: var(--space-3); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-ink); font-family: var(--font-display); font-weight: var(--weight-display); }
.sec-title + .steps { margin-top: var(--space-6); }

/* Feature rows: copy beside a screenshot, alternating sides on wide screens */
.feature { display: grid; gap: var(--space-6); align-items: center; }
.cols3 .card { border: var(--border-width) solid var(--color-border); padding: var(--space-5); }
.feature-copy > * + * { margin-top: var(--space-4); }
.feature-copy > .eyebrow { margin-top: 0; margin-bottom: var(--space-3); }
.feature-copy > .sec-title + * { margin-top: var(--space-4); }
.feature-copy p { color: var(--color-text-muted); }
.feature-copy strong { color: var(--color-text); }
@media (min-width: 62rem) {
  .feature { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); }
  .feature-flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .feature-flip .feature-copy { order: 2; }
}

/* Product screenshots in a window frame */
.shot { border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-md); }
.shot picture, .shot img { display: block; width: 100%; height: auto; }
.shot-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-surface-sunken); border-bottom: var(--border-width) solid var(--color-border); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.shot-bar::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--color-border-strong); box-shadow: 0.9rem 0 0 var(--color-border-strong), 1.8rem 0 0 var(--color-border-strong); margin-inline-end: 1.8rem; }
.shot-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ticked lists */
.ticks li { position: relative; padding-inline-start: 1.6rem; color: var(--color-text-muted); }
.ticks li + li { margin-top: var(--space-2); }
.ticks li::before { content: ""; position: absolute; left: 0.3rem; top: 0.38em; width: 0.4rem; height: 0.7rem; border-right: 2px solid var(--color-live); border-bottom: 2px solid var(--color-live); transform: rotate(45deg); }
.ticks strong { color: var(--color-text); }
.feature-copy .ticks { margin-top: var(--space-4); }
.code-list li::before { top: 0.5em; }

/* Definitions (touch status) and FAQ */
.defs { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.defs div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-3); align-items: baseline; }
.defs dt { font-weight: var(--weight-bold); color: var(--color-text); }
.defs dd { color: var(--color-text-muted); }
.faq { display: grid; gap: 0; max-width: 52rem; }
.faq div { padding-block: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.faq div:last-child { border-bottom: var(--border-width) solid var(--color-border); }
.faq dt { font-weight: var(--weight-bold); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.faq dd { color: var(--color-text-muted); }

/* ---- The loud band: one key, from plan to warehouse ---- */
.band { background: var(--color-brand-fill); color: var(--color-on-brand); padding-block: var(--section-pad); }
.band .eyebrow, .band .sec-title, .band-lede, .band-note { color: var(--color-on-brand); }
.band .eyebrow { opacity: 1; }
.band-lede { font-size: var(--text-lg); margin-top: var(--space-4); max-width: var(--measure); }
.band a { color: var(--color-on-brand); }
.trace { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-5); margin-top: var(--space-6); counter-reset: trace; }
.trace li { position: relative; background: var(--color-surface); color: var(--color-text); border: var(--border-pop); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--pop-sm); }
.trace-h { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.trace-t { font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.trace-t code { display: inline-block; background: var(--color-surface-sunken); font-weight: var(--weight-medium); line-height: 1.7; }
.trace-s { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.band-note { margin-top: var(--space-5); font-size: var(--text-sm); }
@media (min-width: 62rem) {
  .trace li:not(:last-child)::after { content: "\2192"; position: absolute; right: calc(var(--space-5) * -0.85); top: 50%; z-index: 1; transform: translateY(-50%); font-weight: var(--weight-bold); font-size: var(--text-xl); color: var(--color-on-brand); }
}

/* ---- Business models ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); margin-bottom: var(--space-5); }
.chips a { display: inline-flex; align-items: center; min-height: var(--touch-target); padding-inline: var(--space-5); border: var(--border-width) solid var(--hl-ink); border-radius: var(--radius-pill); background: var(--hl-awareness); color: var(--hl-ink); font-weight: var(--weight-bold); text-decoration: none; transition: transform var(--duration); }
.chips li:nth-child(6n+2) a { background: var(--hl-consideration); }
.chips li:nth-child(6n+3) a { background: var(--hl-conversion); }
.chips li:nth-child(6n+4) a { background: var(--hl-activation); }
.chips li:nth-child(6n+5) a { background: var(--hl-retention); }
.chips li:nth-child(6n+6) a { background: var(--hl-advocacy); }
.chips a:hover { color: var(--hl-ink); transform: translateY(-2px); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-5); }
.cards li { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.cards li:target { border: var(--border-pop); box-shadow: var(--pop-sm); }
.cards p { color: var(--color-text-muted); }
.cards .counts { margin-top: auto; padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- Pricing ---- */
.price-teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-4); }
.price-teaser li { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.pt-name { font-weight: var(--weight-bold); }
.pt-price { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); margin-block: var(--space-1); }
.pt-note { color: var(--color-text-muted); font-size: var(--text-sm); }
.price-teaser + .fine { margin-top: var(--space-5); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: var(--space-5); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.plan h2 { font-size: var(--text-xl); font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-tight); }
.plan-price { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.plan-sub { color: var(--color-text-muted); font-size: var(--text-sm); min-height: 2.5em; }
.plan .ticks { flex: 1; }
.plan .btn { width: 100%; }
.plan-lead { border: var(--border-pop); box-shadow: var(--pop-sm); }
.plan-flag { position: absolute; top: calc(var(--space-3) * -1); right: var(--space-4); padding: 0.1rem var(--space-3); border-radius: var(--radius-pill); background: var(--hl-activation); color: var(--hl-ink); border: var(--border-width) solid var(--hl-ink); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.plans + .fine { margin-top: var(--space-6); }
.table-wrap { overflow-x: auto; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); max-width: 36rem; margin-top: var(--space-5); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
thead th { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--weight-bold); background: var(--color-surface-sunken); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: var(--weight-bold); }

/* ---- Closing call to action ---- */
.cta { background: var(--color-ink); color: var(--color-on-ink); padding-block: var(--section-pad); }
.cta-in { max-width: 56rem; }
.cta-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(1.875rem, 5vw, 3rem); line-height: 1.08; letter-spacing: var(--tracking-brand); text-wrap: balance; }
.cta-lede { margin-top: var(--space-4); font-size: var(--text-lg); max-width: var(--measure); }
.cta .btn-brand { border-color: var(--color-on-ink); }
.cta .btn-quiet { border-color: var(--color-on-ink); }
.cta .actions { margin-top: var(--space-6); }

/* ---- Footer ---- */
.foot { border-top: var(--border-width) solid var(--color-border); padding-block: var(--space-7); font-size: var(--text-sm); color: var(--color-text-muted); }
.foot-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-6); }
.foot-brand { max-width: 22rem; }
.foot-tag { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-lg); color: var(--color-text); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); }
.foot nav { display: flex; flex-direction: column; }
.foot-h { font-weight: var(--weight-bold); color: var(--color-text); margin-bottom: var(--space-2); }
.foot nav a { display: inline-flex; align-items: center; min-height: var(--touch-target); overflow-wrap: anywhere; align-self: flex-start; }

@media (max-width: 40rem) {
  .wrap { padding-inline: var(--space-4); }
  .bar-in { gap: var(--space-2) var(--space-4); }
  .bar-cta { margin-inline-start: auto; }
  .bar-cta .link { display: none; }
  .actions .btn { width: calc(100% - 4px); }
  .defs div { grid-template-columns: 1fr; gap: 0; }
  .shot-hero { box-shadow: var(--pop-sm); }
}

/* ---- Menu for narrow screens: a details element, so it needs no script ---- */
.menu { display: none; position: relative; }
.menu summary { display: inline-flex; align-items: center; min-height: var(--touch-target); padding-inline: var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); font-weight: var(--weight-bold); cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 6; min-width: 15rem; display: flex; flex-direction: column; background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2); }
.menu-list a { display: flex; align-items: center; min-height: var(--touch-target); padding-inline: var(--space-3); text-decoration: none; font-weight: var(--weight-medium); border-radius: var(--radius-sm); }
.menu-list a:hover { background: var(--color-surface-sunken); }
.menu-list a[aria-current="page"] { font-weight: var(--weight-bold); }
@media (max-width: 62rem) {
  .nav { display: none; }
  .menu { display: block; }
  .bar-cta { margin-inline-start: auto; }
  .bar-cta .link { display: none; }
}

/* ---- Hero: copy beside the product ---- */
.hero-in { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .hero-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.hero .shot-hero { margin-top: 0; }
.hero h1 { font-size: clamp(2.375rem, 6.5vw, 3.75rem); }

/* Page heads with a visual beside them */
.head-split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .head-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.head-split .lede { margin-top: var(--space-4); }

/* ---- Before and after ---- */
.versus { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 52rem) { .versus { grid-template-columns: 1fr 1fr; } }
.versus-side { border-radius: var(--radius-md); padding: var(--space-5); border: var(--border-width) solid var(--color-border); background: var(--color-surface-sunken); }
.versus-with { background: var(--color-surface); border: var(--border-pop); box-shadow: var(--pop-sm); }
.versus-h { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.versus-list { display: grid; gap: var(--space-4); }
.versus-list li { display: grid; gap: var(--space-2); }
.versus-list code { justify-self: start; }
.versus-n { font-size: var(--text-sm); color: var(--color-text-muted); }
.slide { display: block; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: var(--leading-normal); }
.versus-without .slide { color: var(--color-text-muted); border-style: dashed; }

/* ---- Product shots with numbered pins ---- */
.pinned { position: relative; }
.pin { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex: none; border-radius: var(--radius-pill); background: var(--color-brand-fill); color: var(--color-on-brand); border: 2px solid var(--color-surface); box-shadow: var(--shadow-sm); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1; }
.pinned .pin { position: absolute; transform: translate(-50%, -50%); }
.at-st1 { left: 6%; top: 17%; } .at-st2 { left: 41%; top: 64%; } .at-st3 { left: 93%; top: 71%; }
.at-im1 { left: 50%; top: 24%; } .at-im2 { left: 66%; top: 24%; } .at-im3 { left: 80%; top: 26%; }
.callouts { display: grid; gap: var(--space-3); }
.callouts li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-muted); }
.callouts .pin { margin-top: 0.1rem; }
.feature-h { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); line-height: 1.15; }
.feature-copy .callouts { margin-top: var(--space-4); }
.shot-wide { margin-bottom: var(--space-6); }

/* ---- The ID trace: each stop lights up in turn ---- */
@keyframes trace-lit { 0%, 3% { background: var(--color-surface); } 8%, 22% { background: var(--hl-activation); color: var(--hl-ink); } 28%, 100% { background: var(--color-surface); } }
@keyframes trace-lit-text { 0%, 3% { color: var(--color-text-muted); } 8%, 22% { color: var(--hl-ink); } 28%, 100% { color: var(--color-text-muted); } }
.trace-live li { animation: trace-lit 8s ease-in-out infinite; }
.trace-live li:nth-child(2) { animation-delay: 2s; }
.trace-live li:nth-child(3) { animation-delay: 4s; }
.trace-live li:nth-child(4) { animation-delay: 6s; }
.trace-live .trace-h, .trace-live .trace-s { animation: trace-lit-text 8s ease-in-out infinite; animation-delay: inherit; }
.trace-live li:nth-child(2) .trace-h, .trace-live li:nth-child(2) .trace-s { animation-delay: 2s; }
.trace-live li:nth-child(3) .trace-h, .trace-live li:nth-child(3) .trace-s { animation-delay: 4s; }
.trace-live li:nth-child(4) .trace-h, .trace-live li:nth-child(4) .trace-s { animation-delay: 6s; }
.trace-live li:nth-child(1) .trace-h, .trace-live li:nth-child(1) .trace-s { animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .trace-live li, .trace-live .trace-h, .trace-live .trace-s { animation: none; } }

/* ---- An illustrative assistant conversation ---- */
.chat { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: var(--border-pop); border-radius: var(--radius-lg); box-shadow: var(--pop-sm); }
.msg { max-width: 92%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.msg p + p { margin-top: var(--space-2); }
.msg-user { align-self: flex-end; background: var(--color-ink); color: var(--color-on-ink); border-bottom-right-radius: var(--radius-id); }
.msg-ai { align-self: flex-start; background: var(--color-surface-sunken); border: var(--border-width) solid var(--color-border); border-bottom-left-radius: var(--radius-id); }
.tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tools code { background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); font-size: var(--text-xs); }
.chat-link { font-weight: var(--weight-bold); }
.chat figcaption { font-size: var(--text-xs); color: var(--color-text-muted); }
.stack { display: grid; gap: var(--space-5); }
.asks p { font-style: italic; }

/* ---- Misc blocks ---- */
.regrow { padding: var(--space-5); }
.regrow-h { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.regrow dl { display: grid; gap: 0; font-family: var(--font-mono); font-size: var(--text-sm); }
.regrow dl div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-3); padding-block: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); }
.regrow dt { color: var(--color-text-muted); }
.regrow figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-5); }
.qa li { border-top: var(--border-pop); padding-top: var(--space-4); }
.qa h3 { margin-bottom: var(--space-2); }
.qa p { color: var(--color-text-muted); }
.defs-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-4) var(--space-6); margin-top: var(--space-6); }
.defs-wide div { grid-template-columns: 7rem 1fr; }
.nums { counter-reset: n; }
.nums li::before { counter-increment: n; content: counter(n); border: 0; transform: none; width: auto; height: auto; left: 0; top: 0; font-weight: var(--weight-bold); color: var(--color-text); }
.more-details summary { cursor: pointer; font-weight: var(--weight-bold); min-height: var(--touch-target); display: flex; align-items: center; }
.sec-title + .more-details, .more-details { margin-top: 0; }
@media (max-width: 40rem) { .regrow dl div { grid-template-columns: 1fr; gap: 0; } .chat { padding: var(--space-4); } .msg { max-width: 100%; } }

/* ---- Tour video ---- */
.sec-tight { padding-block: 0 var(--section-pad); }
.video { margin-top: var(--space-5); }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--color-ink); border: var(--border-pop); border-radius: var(--radius-md); box-shadow: var(--pop-lg); }
.video figcaption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 44rem; }
.feature-top { align-items: start; }
@media (max-width: 62rem) {
  .bar-in { flex-wrap: nowrap; gap: var(--space-3); }
  .logo img { height: 1.25rem; }
  .bar-cta { gap: 0; }
}

/* ---- "Who it's for" drop-down: a details element, no script ---- */
.drop { position: relative; }
.drop summary { display: inline-flex; align-items: center; min-height: var(--touch-target); padding-inline: var(--space-1); color: var(--color-text-muted); font-weight: var(--weight-medium); cursor: pointer; list-style: none; border-bottom: var(--nav-underline) solid transparent; }
.drop summary::-webkit-details-marker { display: none; }
.drop summary::after { content: ""; width: 0.4rem; height: 0.4rem; margin-inline-start: var(--space-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.drop[open] summary, .drop summary:hover { color: var(--color-text); }
.drop-list { position: absolute; left: 0; top: 100%; z-index: 6; min-width: 13rem; display: flex; flex-direction: column; background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2); }
.drop-list a { min-height: var(--touch-target); padding-inline: var(--space-3); border-bottom: 0; border-radius: var(--radius-sm); }
.drop-list a:hover { background: var(--color-surface-sunken); }

.hero-ai { margin-top: var(--space-5); font-weight: var(--weight-medium); }
.hero-ai q { font-style: italic; color: var(--color-text-muted); }

/* ---- Storyboard: four small animated versions of the real screens. Everything shows its final state when motion is reduced. ---- */
.story-h { margin-top: var(--space-7); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.story { margin-top: var(--space-5); }
.story figcaption, .connect + .fine { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.sb, .connect { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); }
.sb > li, .connect > li { background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.sb-t { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); }
.sb-n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-xs); }
.sb-s { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: auto; }
.mini { min-height: 8.5rem; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface-sunken); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-sm); overflow: hidden; }
.mini p { margin: 0; }
.mini-h { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.bubble { align-self: flex-end; padding: var(--space-2) var(--space-3); background: var(--color-ink); color: var(--color-on-ink); border-radius: var(--radius-md) var(--radius-md) var(--radius-id) var(--radius-md); max-width: 100%; }
.bubble-sm { font-size: var(--text-xs); }
.type { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; }
.caret { display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px; vertical-align: text-bottom; background: var(--color-on-ink); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); }
.lvl { font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-muted); }
.st { margin-inline-start: auto; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-planned-soft); color: var(--color-planned); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.prev-h b { font-family: var(--font-display); font-size: var(--text-xl); }
.ph, .ph2 { font-family: var(--font-mono); font-size: var(--text-xs); padding: 0 0.3em; border: 1px dashed var(--color-id-placeholder); border-radius: var(--radius-id); background: transparent; color: var(--color-text-muted); }
.pubbtn { align-self: flex-start; padding: var(--space-2) var(--space-3); background: var(--color-brand-fill); color: var(--color-on-brand); border: var(--border-pop); border-radius: var(--radius-sm); box-shadow: var(--pop-sm); font-weight: var(--weight-bold); }
.ids { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.idwrap { position: relative; display: inline-grid; }
.idwrap > * { grid-area: 1 / 1; }
.idwrap .ph2 { opacity: 0; }
.idwrap .real { align-self: center; font-size: var(--text-xs); }

@keyframes sb-card { 0%, 2% { box-shadow: none; transform: none; } 6%, 24% { box-shadow: var(--pop-sm); transform: translate(-2px, -2px); } 28%, 100% { box-shadow: none; transform: none; } }
@keyframes sb-type { 0% { width: 0; } 14%, 92% { width: 24ch; } 100% { width: 0; } }
@keyframes sb-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sb-pop { 0%, 24% { opacity: 0; transform: translateY(6px); } 28%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sb-pop3 { 0%, 49% { opacity: 0; transform: translateY(6px); } 53%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sb-btn { 0%, 74% { transform: none; box-shadow: var(--pop-sm); } 76%, 80% { transform: translate(2px, 2px); box-shadow: var(--pop-pressed); } 82%, 100% { transform: none; box-shadow: var(--pop-sm); } }
@keyframes sb-ph { 0%, 80% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes sb-real { 0%, 80% { opacity: 0; transform: scale(1.3); } 86%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sb > li { animation: sb-card 12s linear infinite; }
.sb > .sb-2 { animation-delay: 3s; } .sb > .sb-3 { animation-delay: 6s; } .sb > .sb-4 { animation-delay: 9s; }
.sb .type { animation: sb-type 12s steps(24, end) infinite; }
.sb .caret { animation: sb-caret 1s steps(1) infinite; }
.sb .r1, .sb .r2, .sb .r3 { animation: sb-pop 12s ease-out infinite backwards; }
.sb .r2 { animation-delay: 0.5s; } .sb .r3 { animation-delay: 1s; }
.sb .prev-h, .sb .p1, .sb .p2 { animation: sb-pop3 12s ease-out infinite backwards; }
.sb .p1 { animation-delay: 0.5s; } .sb .p2 { animation-delay: 1s; }
.sb .pubbtn { animation: sb-btn 12s linear infinite; }
.sb .idwrap .ph2 { animation: sb-ph 12s linear infinite; }
.sb .idwrap .real { animation: sb-real 12s ease-out infinite backwards; }
.sb .ph2 { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sb > li, .sb .type, .sb .caret, .sb .row, .sb .prev-h, .sb .pubbtn, .sb .idwrap > * { animation: none !important; } .sb .type { width: auto; } .sb .caret { display: none; } }

/* ---- Connect steps ---- */
.mini-copy .copybox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mini code { font-size: var(--text-xs); overflow-wrap: anywhere; }
.mbtn { display: inline-flex; padding: 0.15rem var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.mbtn-ink { align-self: flex-start; background: var(--color-ink); color: var(--color-on-ink); border-color: var(--color-ink); }
.mini-dialog { background: var(--color-surface); }
.field { display: grid; gap: 0.1rem; font-size: var(--text-xs); }
.field span { color: var(--color-text-muted); }
.field b { padding: 0.2rem var(--space-2); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: var(--weight-regular); overflow-wrap: anywhere; }
.who { display: flex; align-items: center; gap: var(--space-2); line-height: var(--leading-tight); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: none; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-on-ink); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.muted { color: var(--color-text-muted); }

/* ---- Channels and platforms ---- */
.chan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); margin-top: var(--space-6); }
.chan-grid li { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.chan-grid h3 { font-size: var(--text-md); margin-bottom: var(--space-1); }
.chan-grid p { font-size: var(--text-sm); color: var(--color-text-muted); }
.chan-grid li:nth-child(6n+1) { border-top: 4px solid var(--hl-awareness); } .chan-grid li:nth-child(6n+2) { border-top: 4px solid var(--hl-consideration); }
.chan-grid li:nth-child(6n+3) { border-top: 4px solid var(--hl-conversion); } .chan-grid li:nth-child(6n+4) { border-top: 4px solid var(--hl-activation); }
.chan-grid li:nth-child(6n+5) { border-top: 4px solid var(--hl-retention); } .chan-grid li:nth-child(6n+6) { border-top: 4px solid var(--hl-advocacy); }

/* ---- Tool table, wide FAQ, small-screen screenshots ---- */
.table-wide { max-width: none; }
.tooltable th, .tooltable td { vertical-align: top; font-size: var(--text-sm); }
.tooltable tbody th { font-weight: var(--weight-regular); font-style: italic; min-width: 14rem; }
.tooltable code { white-space: nowrap; }
.faq-wide { max-width: 52rem; }
@media (max-width: 40rem) {
  .shot:not(.shot-hero) { overflow-x: auto; }
  .shot:not(.shot-hero) picture { min-width: 40rem; }
}