/* =========================================================================
   REFRESH (8 Oct) — the design changes made on the OneFlux pixel page
   (index-v2), applied to AdPilot. Loaded last, after the page's own style.
     · header: open at the top, a floating pill once scrolled (mark only),
       dark over dark sections, compact drawers  (header-scroll.js,
       header-tone.js)
     · type: Hanken Grotesk headings, h2 36px, two lines at most, section
       intros up to 56ch beside the heading
     · hero: shorter, the fit line under the buttons
     · interfaces as a card stack  (ixs.js)
     · footer ends the page as a card; small things: no FAQ dot, no icons
       in the capability titles
   ========================================================================= */

/* ------------------------------------------------------------- TYPE */
[data-theme="slate"] {
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.03em;
}
:root { --size-h2: clamp(28px, 7vw, 36px); }
/* Hero copy at the source's measure: a 72px headline in two lines and the
   lede in three at desktop, so the hero fits the first screen. */
.hero .hero__title { font-size: 72px; letter-spacing: var(--display-tracking); }
.hero.hero--open .lede { max-width: 64ch; font-size: 18px; }
@media (max-width: 720px) { .hero .hero__title { font-size: var(--size-h1); } }
.section-head h2, .problem h2, .agx__copy h2 { text-wrap: balance; }
.section-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.section-head p { max-width: 56ch; font-size: 16px; line-height: 1.6; }
@media (min-width: 861px) and (max-width: 1200px) {
  .section-head { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ------------------------------------------------------------- HERO
   Shorter: the meadow's lower foreground drops below the hero's edge, so
   the copy sits on the sky and only a band of hills shows. The fit line
   follows the buttons as a quiet note. */
.hero.scene.hero--open .scene__art {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, black 15%, transparent) 22%, color-mix(in srgb, black 55%, transparent) 40%, black 62%);
          mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, black 15%, transparent) 22%, color-mix(in srgb, black 55%, transparent) 40%, black 62%);
}
@media (min-width: 721px) {
  .hero.scene.hero--open { min-height: 0; padding-bottom: clamp(200px, 17vw, 340px); }
  .hero.scene.hero--open .scene__art { bottom: -13vw; }
}
@media (max-width: 720px) {
  .hero.scene.hero--open { min-height: 0; padding-bottom: clamp(200px, 34svh, 320px); }
  .hero.scene.hero--open .scene__art {
    top: auto; bottom: 0; height: auto; object-fit: fill;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 45%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 45%);
  }
}
.hero .hero__copy p.hero__note { display: inline-flex; align-items: center; gap: 8px; margin: var(--space-6) 0 0; font-size: 14px; color: var(--ink-muted); }
.hero__note .icon { flex: none; width: 16px; height: 16px; color: var(--pixel-green); }
@media (max-width: 720px) {
  .hero .hero__copy p.hero__note { display: block; max-width: 34ch; text-align: center; }
  .hero__note .icon { display: inline-block; margin-right: 6px; vertical-align: -3px; }
}

/* ----------------------------------------------------------- HEADER
   The floating pill doesn't need header.css's cover strip above a flush
   bar (it showed as a light line over dark sections). */
.site-header::before { display: none; }

/* Two states. Top of page: open, full content width, no glass. Scrolled
   (.is-scrolled): a glass pill that shrinks to its contents, the name
   folding away to leave the mark. One layout for both states, so only the
   width animates and the buttons slide rather than jump. */
:root { interpolate-size: allow-keywords; }
.site-header {
  transition-property: width, background-color, border-color, box-shadow, color, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 420ms, 320ms, 320ms, 320ms, 320ms, 320ms, 320ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease, ease, ease, ease, ease, ease;
}
.site-header:not(.is-scrolled):not(.is-open):not(:has(.nav-panel:not([hidden]))) {
  background: transparent; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); }
.site-header .wordmark { flex: 0 0 auto; gap: 0; }
.site-header .wordmark__text {
  display: inline-block; overflow: hidden; white-space: nowrap; max-width: 6em; margin-left: 0.5em;
  transition: max-width 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease, margin 420ms ease;
}
.site-header.is-scrolled .wordmark__text { max-width: 0; margin-left: 0; opacity: 0; }
@media (min-width: 992px) {
  .site-header .site-nav { margin-inline: 40px 48px; }
  .site-header .site-actions { margin-left: auto; }
  .site-header.is-scrolled { width: fit-content; }
  .site-header .nav-panel { left: 50%; right: auto; translate: -50% 0; }
}
.site-header .nav-link, .site-header .wordmark, .site-header .site-actions .btn, .site-header .nav-toggle {
  transition: color 320ms ease, background 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .wordmark__text { transition: none; }
}

/* Dark variant (.is-dark, header-tone.js) over the dark Connections card
   and the footer: night glass, light text, a dark glass secondary and the
   footer's light primary; the drawer and phone menu follow. */
.site-header.is-dark {
  --ground: var(--night);
  --ground-2: color-mix(in srgb, var(--paper) 6%, var(--night));
  --heading: var(--paper);
  --ink: color-mix(in srgb, var(--paper) 82%, var(--night));
  --ink-muted: color-mix(in srgb, var(--paper) 60%, var(--night));
  --line: color-mix(in srgb, var(--paper) 12%, var(--night));
  --mark: var(--paper);
  --brand: var(--paper);
  --brand-on: var(--grey-900);
  --accent: var(--ill-sage);
  --accent-text: var(--ill-sage);
  color-scheme: dark;
  color: var(--ink);
}
.site-header.is-dark.is-scrolled {
  background: color-mix(in srgb, var(--night) 82%, transparent);
  border-color: color-mix(in srgb, var(--paper) 10%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black) 30%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--black) 60%, transparent);
}
.site-header.is-dark .nav-link { color: var(--ink); }
.site-header.is-dark .nav-link:hover, .site-header.is-dark .nav-link[aria-expanded="true"] { color: var(--paper); }
.site-header.is-dark .site-actions .btn:not(.btn--brand) {
  background: color-mix(in srgb, var(--paper) 10%, transparent);
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 14%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 12%, transparent);
}
.site-header.is-dark .site-actions .btn:not(.btn--brand):hover { background: color-mix(in srgb, var(--paper) 16%, transparent); color: var(--paper); }
.site-header.is-dark .site-actions .btn--brand {
  background: linear-gradient(180deg, var(--white), color-mix(in srgb, var(--grey-900) 6%, var(--paper)));
  color: var(--grey-900); border-color: transparent;
  box-shadow: inset 0 1px 0 var(--white), 0 6px 16px -8px color-mix(in srgb, var(--black) 70%, transparent);
}
.site-header.is-dark .nav-toggle { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 30%, transparent); }
.site-header.is-dark .nav-panel {
  background: var(--night);
  border-color: color-mix(in srgb, var(--paper) 10%, transparent);
  box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--black) 70%, transparent);
}
.nav.site-header.is-dark:has(.nav-panel:not([hidden])) { background: color-mix(in srgb, var(--night) 82%, transparent); }
@media (max-width: 991px) { .site-header.is-dark.is-open { background: var(--night); } }

/* Compact drawer (amplemarket.com): a rounded card centred under the bar,
   two columns of name + one-line rows, the hovered row on a white pill, no
   section labels; the feature card becomes a plain row along the bottom. */
@media (min-width: 992px) {
  .site-header .nav-panel {
    width: fit-content; max-width: min(880px, calc(100vw - 32px));
    padding: 10px;
    background: color-mix(in srgb, var(--grey-900) 4%, var(--paper));
    border-radius: 16px;
  }
  .site-header .nav-panel .container.mega { display: grid; grid-template-columns: repeat(2, 380px); gap: 0; padding: 0; }
  .site-header .mega__col { gap: 2px; padding: 4px; }
  .site-header .mega__col + .mega__col { border-left: 1px solid var(--line); padding-left: 12px; margin-left: 8px; }
  .site-header .mega__label { display: none; }
  .site-header :is(.mega__col a, .mega__card) {
    display: block; min-height: 0; padding: 12px 16px; border: 0; border-radius: 12px;
    background: none; opacity: 1 !important; font-family: var(--font-nav, var(--font-control));
    transition: background 160ms ease, box-shadow 160ms ease;
  }
  .site-header :is(.mega__col a, .mega__card):is(:hover, :focus-visible) {
    background: var(--soft-card);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 6%, transparent);
  }
  .site-header :is(.mega__col, .mega__card) strong { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--heading); }
  .site-header :is(.mega__col, .mega__card) span { max-width: 40ch; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
  .site-header .mega__card { grid-column: 1 / -1; margin: 8px 4px 0; position: relative; }
  .site-header .mega__card::before { display: none; }
  .site-header .mega__card::after { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 1px; background: var(--line); }
  .site-header.is-dark .nav-panel { background: color-mix(in srgb, var(--paper) 4%, var(--night)); }
  .site-header.is-dark :is(.mega__col a, .mega__card):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--paper) 9%, var(--night)); box-shadow: none; }
}

/* ------------------------------------------------ WHERE IT WORKS · STACK
   Three cards, the chosen one in front (data-pos 0), the others behind it
   as labelled strips stepping up 34px and in 56px a side. Click a strip
   and that card comes to the front; top/left/right animate. */
.ixs { --ixs-h: 540px; --ixs-step: 34px; --ixs-in: 56px; position: relative; height: calc(var(--ixs-h) + 2 * var(--ixs-step)); margin-top: var(--space-8); }
.ixs__card {
  position: absolute; top: calc((2 - var(--p)) * var(--ixs-step)); left: calc(var(--p) * var(--ixs-in)); right: calc(var(--p) * var(--ixs-in));
  height: var(--ixs-h); display: flex; flex-direction: column; overflow: hidden;
  background: var(--soft-card); border: 1px solid var(--soft-edge); border-radius: 16px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent), 0 18px 40px -20px color-mix(in srgb, var(--grey-900) 22%, transparent);
  transition: top 560ms cubic-bezier(0.2, 0.8, 0.2, 1), left 560ms cubic-bezier(0.2, 0.8, 0.2, 1), right 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ixs__card[data-pos="0"] { --p: 0; z-index: 3; }
.ixs__card[data-pos="1"] { --p: 1; z-index: 2; }
.ixs__card[data-pos="2"] { --p: 2; z-index: 1; }
.ixs__head {
  flex: none; display: flex; align-items: center; gap: 12px; width: 100%; height: var(--ixs-step);
  padding: 0 24px; border: 0; border-bottom: 1px solid var(--soft-edge);
  background: color-mix(in srgb, var(--grey-900) 3%, var(--soft-card));
  font: inherit; font-size: 15px; text-align: left; color: var(--ink-muted); cursor: pointer;
  transition: color 240ms ease, height 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ixs__card[data-pos="0"] .ixs__head { height: 52px; color: var(--heading); cursor: default; }
.ixs__card:not([data-pos="0"]) .ixs__head:hover { color: var(--heading); }
.ixs__head:focus-visible { outline: 2px solid var(--pixel-green); outline-offset: -2px; }
.ixs__dot { width: 10px; height: 10px; border-radius: 2px; rotate: 45deg; background: var(--dot); }
.ixs__card--desktop  { --dot: var(--ill-flame); --ifx-bg: url(../img/art/hero-pixel.webp);   --ifx-pos: 50% 100%;  --ifx-size: cover; }
.ixs__card--log      { --dot: var(--ill-sage);  --ifx-bg: url(../img/art/footer-pixel.webp); --ifx-pos: 0% 100%;   --ifx-size: 150% auto; }
.ixs__card--slack    { --dot: var(--ill-teal);  --ifx-bg: url(../img/art/hero-pixel.webp);   --ifx-pos: 100% 100%; --ifx-size: 170% auto; }
.ixs__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); transition: opacity 320ms ease; }
.ixs__card:not([data-pos="0"]) .ixs__body { opacity: 0; }
.ixs__copy { padding: 44px 40px; }
.ixs__copy h3 { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: var(--display-tracking); color: var(--heading); }
.ixs__copy p { margin: 16px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.ixs__shot { position: relative; overflow: hidden; isolation: isolate; }
.ixs__shot::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.55;
  background: var(--ifx-bg) var(--ifx-pos) / var(--ifx-size) no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 60%); mask-image: linear-gradient(to bottom, transparent, black 60%);
}
.ixs__shot > .win {
  position: absolute; top: 44px; left: 0; width: 900px; font-size: 12px;
  border: 1px solid var(--soft-edge); border-radius: 12px 0 0 0;
  translate: 24px 16px; transition: translate 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ixs__card[data-pos="0"] .ixs__shot > .win { translate: 0 0; }
@media (max-width: 860px) {
  .ixs { --ixs-h: 600px; --ixs-in: 20px; }
  .ixs__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ixs__copy { padding: 24px 20px 8px; }
  .ixs__copy h3 { font-size: 26px; }
  .ixs__shot > .win { top: 20px; left: 20px; width: 640px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .ixs__card, .ixs__head, .ixs__body, .ixs__shot > .win { transition: none; }
}

/* ----------------------------------------------------------- FOOTER
   The footer card ends the page (the lake scene is gone): the wordmark,
   the statement at 16px, the action, then the copyright bar inside the
   card. 12px of paper under it, as at its sides. */
.site-footer__brand .wordmark { color: var(--heading); font-size: 1.5rem; }
.site-footer__statement {
  max-width: 34ch; margin: var(--space-4) 0 0;
  font-family: var(--font-body); font-weight: 400;
  font-size: 16px; line-height: 1.55; letter-spacing: 0;
  color: var(--ink);
}
footer.footer { margin-bottom: var(--inset); border-radius: var(--card-radius); }

/* ------------------------------------------------------------ SMALL */
.faq__label::before { display: none; }
.faq__label { padding-left: 0; }

/* The problem heading is long; its column gets the larger share so it
   holds two lines beside the questions card. */
@media (min-width: 1100px) {
  .problem__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}

/* ------------------------------------------------------ HOW IT WORKS · CYCLE
   The five stages on a ring. The green arc is the step into the selected
   stage (it moves forward round the ring); the approval gate sits on the
   ring between Recommend and Execute, in the "needs a person" ember; small
   chevrons give the direction. Beside it, the selected stage: what it does,
   and what it did in the Monday example. assets/js/cycle.js. */
.cycle {
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
  margin-block: var(--space-8) var(--space-6); padding-bottom: 32px;   /* room for the gate */
}
.cycle__ring { position: relative; width: 100%; aspect-ratio: 1; --r: 38.64%; }   /* 170 / 440 */
.cycle__ring::before {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ill-sage) 16%, transparent), transparent);
}
.cycle__track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cycle__base { fill: none; stroke: color-mix(in srgb, var(--grey-900) 18%, transparent); stroke-width: 1.5; stroke-dasharray: 4 6; }
.cycle__arc {
  fill: none; stroke: var(--pixel-green); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 20 80; stroke-dashoffset: 20;
  transform: rotate(-90deg); transform-origin: 220px 220px;
  transition: stroke-dashoffset 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cycle__dir {
  position: absolute; display: grid;
  left: calc(50% + var(--r) * cos(var(--a))); top: calc(50% + var(--r) * sin(var(--a)));
  translate: -50% -50%; rotate: var(--a);
  color: color-mix(in srgb, var(--grey-900) 35%, transparent); --icon-size: 14px;
}
.cycle__core {
  position: absolute; inset: 30%; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center;
  border: 1px solid var(--soft-edge); background: var(--soft-card); box-shadow: var(--soft-shadow);
}
.cycle__mark {
  width: 24px; height: 24px; margin-bottom: 6px; background: var(--grey-900);
  -webkit-mask: url(../img/brand/mark.svg) center / contain no-repeat;
          mask: url(../img/brand/mark.svg) center / contain no-repeat;
}
.cycle__core b { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: var(--display-tracking); color: var(--grey-900); }
.cycle__core span:last-child { font-size: 13px; line-height: 1.35; color: var(--grey-600); }
/* The gate hangs just under the ring, clear of the Execute and Recommend
   pills, tied to the track by a short dashed line and a dot on the ring. */
.cycle__gate {
  position: absolute; left: 50%; top: calc(50% + var(--r) + 30px); translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ember-orange) 45%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--ember-orange) 16%, var(--paper));
  font-size: 12px; font-weight: 500; color: var(--ember-orange-ink); --icon-size: 13px;
}
.cycle__gate::before {
  content: ''; position: absolute; left: 50%; bottom: 100%; height: 17px;
  border-left: 1.5px dashed color-mix(in srgb, var(--ember-orange) 70%, transparent);
}
.cycle__gate::after {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 13px); translate: -50% 0;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ember-orange);
  box-shadow: 0 0 0 3px var(--paper);
}
.cycle__stations { position: absolute; inset: 0; }
.cycle__st {
  --a: calc(-90deg + var(--i) * 72deg);
  position: absolute; left: calc(50% + var(--r) * cos(var(--a))); top: calc(50% + var(--r) * sin(var(--a)));
  translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; white-space: nowrap;
  border: 1px solid var(--soft-edge); border-radius: 999px; background: var(--soft-card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--grey-900) 35%, transparent);
  font: 500 15px/1.2 var(--font-body); color: var(--grey-800); cursor: pointer;
  transition: background 240ms var(--motion-ease), color 240ms var(--motion-ease), border-color 240ms var(--motion-ease), transform 240ms var(--motion-ease);
}
.cycle__st:hover { transform: translateY(-1px); }
.cycle__ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--ill-sage) 18%, var(--white)); color: var(--pixel-green); --icon-size: 16px;
  transition: background 240ms var(--motion-ease), color 240ms var(--motion-ease);
}
.cycle__st[aria-selected="true"] { border-color: var(--grey-900); background: var(--grey-900); color: var(--paper); }
.cycle__st[aria-selected="true"] .cycle__ico { background: color-mix(in srgb, var(--paper) 14%, var(--grey-900)); color: var(--ill-sage); }
.cycle__st:focus-visible { outline: 2px solid var(--pixel-green); outline-offset: 3px; }

.cycle__detail {
  display: flex; flex-direction: column; min-height: 380px;
  padding: 36px 36px 28px;
  border: 1px solid var(--soft-edge); border-radius: 20px;
  background: var(--soft-card); box-shadow: var(--soft-shadow);
}
.cycle__panel[hidden] { display: none; }
.cycle__count { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.08em; color: var(--grey-600); }
.cycle__panel h3 { margin: 10px 0 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: var(--display-tracking); color: var(--grey-900); }
.cycle__panel > p { margin: 14px 0 0; max-width: 48ch; font-size: 17px; line-height: 1.6; color: var(--grey-700); }
.cycle__ex {
  margin-top: 24px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ill-jade) 22%, transparent);
  background: color-mix(in srgb, var(--ill-sage) 14%, var(--soft-card));
}
.cycle__ex-cap {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pixel-green); --icon-size: 13px;
}
.cycle__ex p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--grey-800); }
.cycle__progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: auto; padding-top: 28px; }
.cycle__progress i { position: relative; height: 3px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--grey-900) 10%, transparent); }
.cycle__progress i::after { content: ''; position: absolute; inset: 0; background: var(--pixel-green); transform: scaleX(0); transform-origin: left; }
.cycle__progress i.is-done::after, .cycle__progress i.is-now::after { transform: scaleX(1); }
.cycle.is-auto .cycle__progress i.is-now::after { animation: cycle-tick 5s linear forwards; }
@keyframes cycle-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .cycle__panel:not([hidden]) { animation: fitx-in 320ms var(--motion-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .cycle__arc, .cycle__st, .cycle__ico { transition: none; }
}
@media (max-width: 960px) {
  .cycle { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cycle__ring { max-width: 440px; }
  .cycle__detail { width: 100%; min-height: 0; }
}
@media (max-width: 520px) {
  .cycle__ring { --r: 36%; }
  .cycle__base, .cycle__arc { r: 158px; }                       /* 36% of 440 */
  .cycle__st { gap: 6px; padding: 4px 10px 4px 4px; font-size: 12.5px; }
  .cycle__ico { width: 24px; height: 24px; --icon-size: 13px; }
  .cycle__core { inset: 31%; }
  .cycle__core b { font-size: 18px; }
  .cycle__core span:last-child { font-size: 11px; }
  .cycle__mark { width: 18px; height: 18px; margin-bottom: 2px; }
  .cycle__gate { font-size: 11px; }
  .cycle__detail { padding: 24px 20px 20px; }
}

/* --------------------------------------------- WHERE IT WORKS · ACTIVITY
   The log as product UI, not a terminal: filter chips, then one row per
   change with when, what, who (the page's autonomy tags), the measured
   result and an Undo. Lengths in em off the window's font size, like the
   other windows; the window runs 24px past the card's edge. */
.alog { background: var(--white); color: var(--grey-900); }
.alog .win__bar { border-bottom: 1px solid color-mix(in srgb, var(--grey-900) 8%, var(--paper)); background: color-mix(in srgb, var(--grey-900) 3%, var(--paper)); }
.alog .win__title { font-weight: 500; font-size: 0.95em; color: var(--grey-600); }
.alog__body { display: flex; flex-direction: column; min-height: 0; padding: 1.2em 1.6em; }
.alog__tools { display: flex; align-items: center; gap: 0.5em; margin-bottom: 1em; }
.alog__chip { padding: 0.35em 0.85em; border: 1px solid color-mix(in srgb, var(--grey-900) 12%, transparent); border-radius: 999px; font-size: 0.92em; color: var(--grey-700); }
.alog__chip.is-on { border-color: var(--grey-900); background: var(--grey-900); color: var(--paper); }
.alog__range { display: inline-flex; align-items: center; gap: 0.4em; margin-left: auto; padding: 0.35em 0.8em; border: 1px solid color-mix(in srgb, var(--grey-900) 12%, transparent); border-radius: 0.5em; font-size: 0.92em; color: var(--grey-700); }
.alog__head, .alog__rows li {
  display: grid; grid-template-columns: 6.2em minmax(0, 1fr) 7.6em 10.4em 5em;
  align-items: center; column-gap: 1em;
}
.alog__head { padding: 0 0.8em 0.6em; border-bottom: 1px solid color-mix(in srgb, var(--grey-900) 8%, transparent); }
.alog__head span { font-family: var(--font-label); font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-500); }
.alog__rows { margin: 0; padding: 0; list-style: none; }
.alog__rows li { padding: 0.75em 0.8em; border-bottom: 1px solid color-mix(in srgb, var(--grey-900) 6%, transparent); }
.alog__rows li.is-hot { border-radius: 0.6em; border-bottom-color: transparent; background: color-mix(in srgb, var(--ill-sage) 12%, var(--white)); }
.alog__rows time { font-family: var(--font-label); font-size: 0.9em; color: var(--grey-600); }
.alog__what { min-width: 0; }
.alog__what b { display: block; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.alog__what small { display: block; margin-top: 0.15em; overflow: hidden; font-size: 0.88em; white-space: nowrap; text-overflow: ellipsis; color: var(--grey-600); }
.alog .mode { justify-self: start; padding: 0.2em 0.65em; font-size: 0.9em; }
.alog__res { font-size: 0.95em; color: var(--grey-700); }
.alog__res.is-good { font-weight: 600; color: var(--pixel-green); }
.alog__act {
  justify-self: end; display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.35em 0.75em; border: 1px solid color-mix(in srgb, var(--grey-900) 16%, transparent); border-radius: 999px;
  font-size: 0.9em; font-weight: 500;
}
.alog__rows li.is-hot .alog__act { border-color: var(--grey-900); background: var(--grey-900); color: var(--paper); }
.alog__foot { display: flex; align-items: center; gap: 0.4em; margin: auto 0 0; padding-top: 1em; font-size: 0.9em; color: var(--grey-600); }
.ixs__card--log .ixs__shot > .win { width: calc(100% + 24px); }
@media (max-width: 860px) {
  .ixs__card--log .ixs__shot > .win { width: calc(100% + 4px); }
  .alog__head, .alog__rows li { grid-template-columns: 5.6em minmax(0, 1fr) 7.4em 4.8em; }
  .alog__head span:nth-child(4), .alog__res { display: none; }
}

/* Nav drawers (8 Oct): Product, Solutions and Resources open as labelled
   columns of icon rows (name and one line), with a feature row along the
   bottom that jumps to a section of this page. The rows link to pages that
   don't exist yet; adpilot.js keeps a click on them in place. */
.mega__ico {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: color-mix(in srgb, var(--heading) 6%, transparent);
  color: var(--heading); font-style: normal;
}
.mega__ico .icon { width: 18px; height: 18px; }
.site-header .mega__ico--net { background: var(--net); color: var(--white); font: 700 13px/1 var(--font-body); }
.site-header .mega__ico--net.netlogo--snap { color: var(--grey-900); }
.mega--rich .mega__items a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start;
}
.mega--rich .mega__items a > .mega__ico { grid-row: 1 / span 2; }
.mega--rich .mega__items a > :is(strong, span) { grid-column: 2; }
.mega__card strong .icon { width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; transition: translate 200ms ease; }
.mega__card:is(:hover, :focus-visible) strong .icon { translate: 3px 0; }

@media (min-width: 992px) {
  .site-header .nav-panel:has(.mega--rich) { max-width: min(1040px, calc(100vw - 32px)); padding: 12px; }
  .site-header .nav-panel .container.mega.mega--rich { grid-template-columns: repeat(2, auto); }
  .site-header .nav-panel .container.mega.mega--rich:has(> .mega__col:nth-of-type(3)) { grid-template-columns: repeat(3, auto); }
  .site-header .mega--rich .mega__label {
    display: block; padding: 6px 12px 10px;
    font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-muted);
  }
  .site-header .mega--rich .mega__items { display: grid; gap: 2px; }
  .site-header .mega--rich .mega__col--wide .mega__items { grid-template-columns: repeat(2, 268px); }
  .site-header .mega--rich .mega__items a { width: 268px; padding: 10px 12px; }
  .site-header .mega--rich .mega__col--compact .mega__items a { width: 220px; padding-block: 8px; }
  .site-header .mega--rich .mega__items strong { font-size: 15px; }
  .site-header .mega--rich .mega__items span { font-size: 13px; line-height: 1.4; }
  .site-header .mega--rich .mega__items a:is(:hover, :focus-visible) .mega__ico:not(.mega__ico--net) { background: color-mix(in srgb, var(--heading) 10%, transparent); }
  .site-header .mega--rich .mega__card { margin-top: 10px; padding-block: 14px; }
}
@media (max-width: 991px) {
  .mega--rich .mega__items { display: grid; gap: 4px; }
  .mega--rich .mega__items a { padding: 6px 0; }
  .mega--rich .mega__items strong { font-size: 16px; }
  .mega--rich .mega__items span { margin-top: 0; font-size: 13px; }
}

/* Centred nav (8 Oct): on desktop the bar is three columns, the wordmark
   left, the menu in the middle and Book a demo right, so the menu sits on
   the page's centre line whether the bar is full width or scrolled. */
@media (min-width: 992px) {
  .site-header .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .site-header .wordmark { justify-self: start; }
  /* The bar is padded 24px left and 12px right; the uneven margins cancel
     that out so the menu's centre is the bar's centre. */
  .site-header .site-nav { margin-inline: 26px 38px; }
  .site-header .site-actions { justify-self: end; margin-left: 0; }
}

/* Footer legal links (8 Oct), in place of the old disclaimer line. */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer__legal a { color: inherit; text-decoration: none; }
.site-footer__legal a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }

.dform__fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* How it works · stage windows (8 Oct). Each stage's panel ends in a small
   window of the product doing that step on Monday's account: the signal
   feed, the causes checked, the move, the change log, forecast against
   result. The panel's ground is tinted so the white window reads as UI;
   rows rise in one after another when a stage is shown. */
/* The five panels share one grid cell, so the card is always as tall as
   the tallest stage and the ring beside it never shifts while it plays. */
.cycle__detail {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 0; padding: 32px 32px 24px;
  container-type: inline-size;
  background: color-mix(in srgb, var(--ill-sage) 8%, var(--paper));
}
.cycle__panel { grid-area: 1 / 1; }
.cycle__panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.cycle__progress { grid-area: 2 / 1; }
.cyx__foot { max-width: none; }
.cycle__panel h3 { font-size: clamp(28px, 2.6vw, 36px); }
.cycle__panel > p { margin-top: 10px; font-size: 16px; line-height: 1.55; }
.cyx {
  --cyx-line: color-mix(in srgb, var(--grey-900) 8%, transparent);
  margin-top: 22px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--grey-900) 9%, transparent); border-radius: 14px;
  background: var(--white);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent), 0 24px 48px -32px color-mix(in srgb, var(--grey-900) 40%, transparent);
  font-size: 14px; color: var(--grey-900);
}
.cyx__bar {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--cyx-line);
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-600);
}
.cyx b { display: block; font-weight: 500; font-size: 14px; line-height: 1.3; }
.cyx small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--grey-600); }
.cyx ul, .cyx ol { margin: 0; padding: 0; list-style: none; }
.cyx :is(.cyx__rows, .cyx__checks, .cyx__steps) > li { display: grid; align-items: center; gap: 12px; padding: 11px 16px; }
.cyx :is(.cyx__rows, .cyx__checks, .cyx__steps) > li + li { border-top: 1px solid var(--cyx-line); }
.cyx__foot {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px;
  border-top: 1px solid var(--cyx-line); background: color-mix(in srgb, var(--grey-900) 2%, var(--white));
  font-size: 12.5px; color: var(--grey-600); --icon-size: 14px;
}

/* Observe: one row per network, the changed one flagged. */
.cyx__rows > li { grid-template-columns: 22px minmax(0, 1fr) 60px auto; }
.cyx__rows > li.is-hot { background: color-mix(in srgb, var(--ember-orange) 6%, var(--white)); }
.cyx__spark { width: 60px; height: 20px; overflow: visible; }
.cyx__spark path { fill: none; stroke: var(--grey-400); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cyx__rows > li.is-hot .cyx__spark path { stroke: var(--ember-orange); stroke-width: 2; }

/* Understand: the causes it checked, one confirmed, the rest ruled out. */
.cyx__checks > li { grid-template-columns: 22px minmax(0, 1fr) auto; }
.cyx__mark {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--grey-900) 6%, var(--white)); color: var(--grey-500); --icon-size: 12px;
}
.cyx__checks > li:not(.is-cause) b { color: var(--grey-600); }
.cyx__checks > li.is-cause { align-items: start; background: color-mix(in srgb, var(--ember-orange) 6%, var(--white)); }
.cyx__checks > li.is-cause .cyx__mark { background: var(--ember-orange); color: var(--white); }
.cyx__out { font-size: 12px; color: var(--grey-500); white-space: nowrap; }
.cyx__chart { padding: 12px 16px 14px; border-top: 1px solid var(--cyx-line); }
.cyx__chart-cap { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-600); }
.cyx__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; height: 64px; margin-top: 10px; }
.cyx__cols i {
  position: relative; height: var(--h); border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--ill-jade) 30%, var(--white)); font-style: normal;
}
.cyx__cols i.is-low { background: color-mix(in srgb, var(--ember-orange) 55%, var(--white)); }
.cyx__cols b { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font: 11px var(--font-label); color: var(--grey-600); }
.cyx__cols em { position: absolute; left: 50%; bottom: calc(100% + 4px); translate: -50% 0; font: 600 11px var(--font-body); font-style: normal; color: var(--ember-orange-ink); white-space: nowrap; }
.cyx__chart { padding-bottom: 30px; }

/* Recommend: the move, its impact, the decision. */
.cyx__move { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 16px; }
.cyx__end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cyx__end:last-child { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.cyx__end small { margin: 0; font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.cyx__amt { display: grid; justify-items: center; padding: 6px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ill-sage) 18%, var(--white)); color: var(--pixel-green); --icon-size: 16px; }
.cyx__amt b { font-family: var(--font-display); font-size: 22px; letter-spacing: var(--display-tracking); color: var(--grey-900); }
.cyx__amt small { margin: 0 0 2px; }
.cyx__impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--cyx-line); }
.cyx__impact > div { padding: 12px 16px; }
.cyx__impact > div + div { border-left: 1px solid var(--cyx-line); }
.cyx__impact dt { font-size: 12px; color: var(--grey-600); }
.cyx__impact dd { margin: 3px 0 0; font-size: 15px; font-weight: 500; }
.cyx__impact dd.is-up { color: var(--pixel-green); }
.cyx__acts { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--cyx-line); }
.cyx__acts .mode { margin-right: auto; }
.cyx__btn { padding: 6px 16px; border: 1px solid color-mix(in srgb, var(--grey-900) 14%, transparent); border-radius: 999px; font-size: 13px; font-weight: 500; }
.cyx__btn--go { border-color: var(--grey-900); background: var(--grey-900); color: var(--paper); }

/* Execute: the change log, time first. */
.cyx__steps > li { grid-template-columns: 44px minmax(0, 1fr) auto; }
.cyx__steps time { font: 12px var(--font-label); color: var(--grey-600); }

/* Learn: forecast against the measured result. */
.cyx__vs { display: grid; gap: 4px; padding: 14px 16px 10px; }
.cyx__vrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) 96px; align-items: center; gap: 12px; padding: 6px 0; }
.cyx__vrow span { font-size: 12.5px; color: var(--grey-600); }
.cyx__vrow i { position: relative; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--grey-900) 5%, var(--white)); }
.cyx__vrow i::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit;
  background: repeating-linear-gradient(-45deg, var(--grey-400) 0 3px, color-mix(in srgb, var(--grey-400) 45%, var(--white)) 3px 6px);
  transform-origin: left;
}
.cyx__vrow.is-actual i::after { background: var(--ill-jade); }
.cyx__vrow b { text-align: right; }
.cyx__vrow.is-actual b { color: var(--pixel-green); }
.cyx__notes { border-top: 1px solid var(--cyx-line); }
.cyx__notes li { display: flex; align-items: center; gap: 10px; padding: 11px 16px; font-size: 13.5px; color: var(--grey-800); --icon-size: 15px; }
.cyx__notes li + li { border-top: 1px solid var(--cyx-line); }
.cyx__notes li .icon { color: var(--pixel-green); }

@media (prefers-reduced-motion: no-preference) {
  .cycle__panel:not([hidden]) .cyx :is(.cyx__rows > li, .cyx__checks > li, .cyx__steps > li, .cyx__move, .cyx__impact, .cyx__acts, .cyx__vrow, .cyx__notes li) {
    animation: cyx-in 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .cycle__panel:not([hidden]) .cyx :is(li, .cyx__vrow):nth-child(2), .cycle__panel:not([hidden]) .cyx__impact { animation-delay: 90ms; }
  .cycle__panel:not([hidden]) .cyx :is(li, .cyx__vrow):nth-child(3), .cycle__panel:not([hidden]) .cyx__acts { animation-delay: 180ms; }
  .cycle__panel:not([hidden]) .cyx li:nth-child(4) { animation-delay: 270ms; }
  .cycle__panel:not([hidden]) .cyx__cols i { animation: cyx-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms both; transform-origin: bottom; }
  .cycle__panel:not([hidden]) .cyx__vrow i::after { animation: cyx-grow 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both; }
  .cycle__panel:not([hidden]) .cyx__vrow.is-actual i::after { animation-delay: 450ms; }
}
@keyframes cyx-in { from { opacity: 0; translate: 0 6px; } }
@keyframes cyx-rise { from { scale: 1 0; } }
@keyframes cyx-grow { from { scale: 0 1; } }

@media (min-width: 961px) and (max-width: 1180px) {
  .cycle { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px; }
}
@container (max-width: 470px) {
  .cyx__rows > li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .cyx__spark { display: none; }
  .cyx__move { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .cyx__end:last-child { flex-direction: row; text-align: left; }
  .cyx__amt { justify-items: start; grid-auto-flow: column; align-items: baseline; gap: 6px; }
  .cyx__amt .icon { rotate: 90deg; align-self: center; }
  .cyx__impact { grid-template-columns: minmax(0, 1fr); }
  .cyx__impact > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 9px; }
  .cyx__impact > div + div { border-left: 0; border-top: 1px solid var(--cyx-line); }
  .cyx__impact dd { margin: 0; }
  .cyx__vrow { grid-template-columns: 64px minmax(0, 1fr) 84px; gap: 8px; }
}

/* Section rhythm (8 Oct): open paper sections alternate with inset cards,
   so the top of the page isn't one long run of paper. The Monday brief is
   a dark card (the product window lit against it, the meadow dimmed to a
   night scene), and How it works is a soft sage card. */
.section--tint {
  --ground: color-mix(in srgb, var(--ill-sage) 16%, var(--paper));
  background: var(--ground);
  margin-inline: var(--inset); border-radius: var(--card-radius); overflow: clip;
}
.section--tint .cycle__detail { background: var(--paper); }
.section--tint .cycle__ring::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--white) 55%, transparent), transparent); }
.section--tint .cycle__gate::after { box-shadow: 0 0 0 3px var(--ground); }
.section--ground.brief .brief__stage::before { filter: brightness(0.5) saturate(0.85); opacity: 0.9; }
.section--ground.brief .pview { box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--black) 70%, transparent); }

/* Illustrations (8 Oct). Line drawings in the Trust and control style tell
   the story where product UI was crowding the page: the Monday problem,
   the four capabilities and the Connections map. 1.5px ink strokes, light
   hatching, one accent at a time: ember for what's wrong, jade for the fix.
   --ill-bg fills the shapes so overlapping drawings occlude cleanly. */
.ill { display: block; width: 100%; height: auto; overflow: visible; color: var(--grey-900); --ill-bg: var(--white); }
.ill * { vector-effect: non-scaling-stroke; }
.ill .s  { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ill .g  { fill: var(--ill-bg); stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.ill .gd { fill: var(--ill-bg); stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 4 4; }
.ill .d  { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-dasharray: 4 5; stroke-linecap: round; opacity: 0.5; }
.ill .hl { stroke: currentColor; stroke-width: 1; opacity: 0.45; }
.ill .f  { fill: currentColor; }
.ill .ln { stroke-width: 2; }
.ill .thick { stroke-width: 4; }
.ill .handle { stroke-width: 5; }
.ill .lens { fill: color-mix(in srgb, var(--white) 35%, transparent); stroke: currentColor; stroke-width: 1.5; }
.ill .e  { fill: none; stroke: var(--ember-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill .ge { fill: color-mix(in srgb, var(--ember-orange) 14%, var(--ill-bg)); stroke: var(--ember-orange); stroke-width: 1.5; }
.ill .eh { fill: color-mix(in srgb, var(--ember-orange) 22%, var(--ill-bg)); }
.ill .gr { stroke: var(--ill-jade); opacity: 1; }
.ill .grf { fill: color-mix(in srgb, var(--ill-jade) 20%, var(--ill-bg)); }
.ill .grf2 { fill: var(--ill-jade); }
.ill .ck { fill: none; stroke: var(--ill-bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ill .okc { fill: var(--ill-jade); }
.ill .ok { fill: none; stroke: var(--white); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ill .nb--meta   { fill: var(--net-meta); }
.ill .nb--tiktok { fill: var(--net-tiktok); }
.ill .nb--google { fill: var(--net-google); }
.ill .nb--snap   { fill: var(--net-snap); }
.ill .nb--dsp    { fill: var(--grey-500); }
.ill .nbt { fill: var(--white); font-family: var(--font-body); font-weight: 700; }
.ill .nbt--dark { fill: var(--grey-900); }
.ill text { font-family: var(--font-body); }
.ill .t  { fill: currentColor; opacity: 0.7; font-family: var(--font-label); font-size: 10px; letter-spacing: 0.04em; }
.ill .t--hot { fill: var(--ember-orange-ink); opacity: 1; }
.ill .tv { fill: currentColor; font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.ill .tv--sm { font-size: 15px; }
.ill .tv--hot { fill: var(--ember-orange-ink); }
.ill .tv--ok { fill: var(--pixel-green); }
.ill .tc { fill: currentColor; font-size: 9px; font-weight: 600; }
.ill .tq { fill: var(--ember-orange-ink); font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.ill .tn { fill: currentColor; font-size: 15px; font-weight: 500; }

.ill-fig { margin: 0; }
.ill-fig--problem { justify-self: end; width: min(100%, 540px); }
.ill-fig--net { max-width: 980px; margin: var(--space-7) auto 0; }
.ill--net { color: var(--paper); --ill-bg: var(--night); }
.ill--net .gr { stroke: var(--ill-sage); }
.ill--net .grf2 { fill: var(--ill-sage); }
.ill--tall { display: none; }
@media (max-width: 640px) {
  .ill--wide { display: none; }
  .ill--tall { display: block; max-width: 420px; margin-inline: auto; }
  .ill-fig--problem { justify-self: stretch; }
}
.mtile__pane .ill { max-width: 280px; }

/* How it works · centre ring (9 Oct). The ring sits in the middle of the
   section; the selected stage's name and line show inside it, and a small
   data label beside each station says what that stage did on Monday. The
   label for the selected stage lights up. Under 1100px the labels leave the
   ring and stack as a list under it. The earlier side card is in the
   cycle-detail-windows template. */
.cycle { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-block: var(--space-7) var(--space-5); padding-bottom: 72px; }
.cycle__stage { position: relative; width: min(100%, 480px); --r: 38.64%; }
.cycle__core { inset: 23%; padding: 18px; gap: 0; }
.cycle__core > .cycle__panel { grid-area: 1 / 1; text-align: center; }
.cycle__core > .cycle__progress { grid-area: 2 / 1; justify-self: center; width: 96px; margin: 14px 0 0; padding: 0; }
.cycle__core .cycle__count { font-size: 11px; }
.cycle__core .cycle__panel h3 { margin: 4px 0 0; font-size: 24px; line-height: 1.1; }
.cycle__core .cycle__panel > p { margin: 6px auto 0; max-width: 22ch; font-size: 13.5px; line-height: 1.45; color: var(--grey-700); }

.cycle__labels { position: absolute; inset: 0; pointer-events: none; }
.cycle__label {
  --a: calc(-90deg + var(--i) * 72deg);
  position: absolute; left: calc(50% + var(--r) * cos(var(--a))); top: calc(50% + var(--r) * sin(var(--a)));
  width: 196px; margin: 0; padding: 9px 12px 10px;
  border: 1px solid var(--soft-edge); border-radius: 12px; background: var(--soft-card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent);
  opacity: 0.55; transition: opacity 300ms var(--motion-ease), border-color 300ms var(--motion-ease), box-shadow 300ms var(--motion-ease);
}
.cycle__label small { display: block; font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-600); }
.cycle__label b { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--grey-900); }
.cycle__label--0 { --i: 0; translate: -50% calc(-100% - 34px); text-align: center; }
.cycle__label--1 { --i: 1; translate: 84px -50%; }
.cycle__label--2 { --i: 2; translate: -10% 34px; }
.cycle__label--3 { --i: 3; translate: -90% 34px; }
.cycle__label--4 { --i: 4; translate: calc(-100% - 64px) -50%; text-align: right; }
.cycle:has(#cycle-tab-observe[aria-selected="true"]) .cycle__label--0,
.cycle:has(#cycle-tab-understand[aria-selected="true"]) .cycle__label--1,
.cycle:has(#cycle-tab-recommend[aria-selected="true"]) .cycle__label--2,
.cycle:has(#cycle-tab-execute[aria-selected="true"]) .cycle__label--3,
.cycle:has(#cycle-tab-learn[aria-selected="true"]) .cycle__label--4 {
  opacity: 1; border-color: color-mix(in srgb, var(--grey-900) 30%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 6%, transparent), 0 16px 32px -20px color-mix(in srgb, var(--grey-900) 45%, transparent);
}
.cycle:has(#cycle-tab-observe[aria-selected="true"]) .cycle__label--0 small,
.cycle:has(#cycle-tab-understand[aria-selected="true"]) .cycle__label--1 small,
.cycle:has(#cycle-tab-recommend[aria-selected="true"]) .cycle__label--2 small,
.cycle:has(#cycle-tab-execute[aria-selected="true"]) .cycle__label--3 small,
.cycle:has(#cycle-tab-learn[aria-selected="true"]) .cycle__label--4 small { color: var(--pixel-green); }

@media (max-width: 1099px) {
  .cycle { padding-bottom: 0; }
  .cycle__stage { width: 100%; }
  .cycle__stage > .cycle__ring { max-width: 480px; margin-inline: auto; }
  .cycle__labels {
    position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    max-width: 640px; margin: 64px auto 0;
  }
  .cycle__label { position: static; width: auto; translate: none; text-align: left; }
}
@media (max-width: 520px) {
  .cycle__labels { grid-template-columns: minmax(0, 1fr); }
  .cycle__core { inset: 21%; padding: 10px; }
  .cycle__core .cycle__panel h3 { font-size: 19px; }
  .cycle__core .cycle__panel > p { font-size: 12px; max-width: 20ch; }
  .cycle__core > .cycle__progress { width: 72px; margin-top: 8px; }
}
@media (min-width: 1100px) {
  .cycle { margin-top: calc(var(--space-7) + 72px); padding-bottom: 24px; }   /* the Observe label rises above the ring */
}

/* Demo form button (9 Oct): no lift on hover or press, the colour change is enough. */
.btn.dform__go:is(:hover, :active) { transform: none; }

/* Before / after (9 Oct). Each card leads with the time to a decision,
   then a bar of the morning from 8:00 to 13:00: the old way fills most of
   it in grey blocks, the new way is a green sliver and the rest is free.
   Four short steps, then one line in place of the stats row. */
.shift__head { margin-bottom: 18px; }
.shift__big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.shift__big b { font-family: var(--font-display); font-size: clamp(44px, 5vw, 64px); font-weight: 500; line-height: 1; letter-spacing: var(--display-tracking); color: var(--grey-500); }
.shift__col--after .shift__big b { color: var(--pixel-green); }
.shift__big span { font-size: 15px; color: var(--grey-600); }
.shift__bar { margin: 22px 0 18px; }
.shift__track {
  position: relative; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--grey-900) 5%, transparent);
}
.shift__col--after .shift__track { background: color-mix(in srgb, var(--ill-sage) 10%, var(--white)); }
.shift__track i {
  position: absolute; top: 3px; bottom: 3px; left: var(--s); width: calc(var(--e) - var(--s) - 0.6%);
  border-radius: 5px;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--grey-900) 26%, var(--paper)) 0 4px, color-mix(in srgb, var(--grey-900) 16%, var(--paper)) 4px 8px);
}
.shift__track i.is-done { width: max(6px, calc(var(--e) - var(--s))); background: var(--ill-jade); }
.shift__track i.is-free { background: none; border: 1px dashed color-mix(in srgb, var(--ill-jade) 45%, transparent); }
.shift__track em {
  position: absolute; left: 6%; top: 50%; translate: 0 -50%;
  font-style: normal; font-size: 12px; color: var(--pixel-green); white-space: nowrap;
}
.shift__ticks { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-label); font-size: 10.5px; color: var(--grey-500); }
.shift__steps li { grid-template-columns: 62px minmax(0, 1fr) auto; padding: 11px 0; }
.shift__steps p { font-size: 15px; }
.shift__sum {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--soft-edge);
  font-size: 14px; line-height: 1.5; color: var(--grey-600);
}
.shift__col--after .shift__sum { color: var(--grey-800); }
@media (prefers-reduced-motion: no-preference) {
  .shift__track i { transform-origin: left; animation: shift-grow 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
}
@keyframes shift-grow { from { scale: 0 1; } }
@media (max-width: 520px) {
  .shift__ticks span:nth-child(even) { visibility: hidden; }
  .shift__steps li { grid-template-columns: 52px minmax(0, 1fr); }
}

/* Monday brief window, v2 (9 Oct): the shadcn grammar — one neutral border
   token, 8–14px radii, quiet muted text, soft badges, a single dark primary
   button. Top app bar (brand, workspace, search, date, bell, avatar), a
   sidebar of today's findings, the main pane (greeting, three stat cards,
   the priority card) and the decision rail. The old window is kept in
   template#pview-win-v1; adpilot.js drives the same data- hooks. */
.pv {
  --pvb: color-mix(in srgb, var(--grey-900) 11%, transparent);        /* border */
  --pvb-soft: color-mix(in srgb, var(--grey-900) 7%, transparent);    /* hairline */
  --pv-soft: color-mix(in srgb, var(--grey-900) 3.5%, var(--white));  /* muted bg */
  font-size: 13px;
}
.pv .icon { color: var(--grey-500); }

/* ------------------------------------------------------------ app bar */
.pv-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--pvb-soft); }
.pv-brandmark {
  width: 20px; height: 20px; background: var(--grey-900);
  -webkit-mask: url(../img/brand/mark.svg) center / contain no-repeat;
          mask: url(../img/brand/mark.svg) center / contain no-repeat;
}
.pv-brand { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--grey-900); }
.pv-vr { width: 1px; height: 18px; background: var(--pvb); }
.pv-ws {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px;
  border: 1px solid var(--pvb); border-radius: 8px; background: var(--white);
  font-size: 12.5px; font-weight: 500; color: var(--grey-900);
}
.pv-ws .icon { --icon-size: 12px; }
.pv-ws-logo {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  background: var(--grey-900); color: var(--paper); font-style: normal; font-size: 10px; font-weight: 700;
}
.pv-search {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 330px; margin-left: 8px;
  padding: 6px 8px 6px 10px; border: 1px solid var(--pvb-soft); border-radius: 8px;
  background: var(--pv-soft); font-size: 12px; color: var(--grey-500);
}
.pv-search .icon { --icon-size: 13px; }
.pv-search kbd {
  margin-left: auto; padding: 1px 5px; border: 1px solid var(--pvb); border-radius: 5px;
  background: var(--white); font-family: var(--font-label); font-size: 10px; color: var(--grey-500);
}
.pv-date {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 4px 9px; border: 1px solid var(--pvb); border-radius: 7px;
  font-size: 12px; font-weight: 500; color: var(--grey-700);
}
.pv-date .icon { --icon-size: 13px; }
.pv-bell {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--pvb); border-radius: 8px; --icon-size: 14px;
}
.pv-bell > i { position: absolute; top: 3px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ember-orange); box-shadow: 0 0 0 2px var(--white); }
.pv-avatar {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grey-900); color: var(--paper); font-size: 11px; font-weight: 600;
}

/* --------------------------------------------------------------- panes */
.pv-body { display: grid; grid-template-columns: 224px minmax(0, 1fr) 312px; min-height: 480px; }
.pv-side { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--pvb-soft); background: color-mix(in srgb, var(--grey-900) 2%, var(--white)); }
.pv-nav { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--grey-700); --icon-size: 15px; }
.pv-nav.is-on { background: color-mix(in srgb, var(--grey-900) 5.5%, var(--white)); color: var(--grey-900); }
.pv-nav.is-on .icon { color: var(--grey-900); }
.pv-count {
  display: inline-grid; place-items: center; margin-left: auto; min-width: 18px; padding: 1px 5px;
  border-radius: 999px; background: var(--grey-900); color: var(--paper);
  font-style: normal; font-size: 10.5px; font-weight: 600;
}
.pv-side-label { margin: 14px 9px 6px; font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grey-500); }
.pv-item { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; }
.pv-item b { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--grey-800); }
.pv-item small { font-family: var(--font-label); font-size: 11px; color: var(--grey-500); }
.pv-item.is-on { border-color: var(--pvb); background: var(--white); box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent); }
.pv-item.is-on b { color: var(--grey-900); }
.pv-watch { display: flex; gap: 10px; align-items: center; margin-top: auto; padding: 11px 12px; border: 1px solid var(--pvb); border-radius: 12px; background: var(--white); }
.pv-watch i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ill-jade); }
.pv-watch b { display: block; font-size: 12px; font-weight: 600; color: var(--grey-900); }
.pv-watch small { font-size: 11px; color: var(--grey-500); }
@media (prefers-reduced-motion: no-preference) {
  .pv-watch i { animation: ap-pulse 2.4s var(--motion-ease, ease) infinite; }
}

/* ---------------------------------------------------------------- main */
.pv-main { display: grid; align-content: start; gap: 14px; padding: 18px 20px 22px; }
.pv-greet { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pv-hi { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--grey-900); }
.pv-sub { margin: 2px 0 0; font-size: 12px; color: var(--grey-500); }
.pv-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--pvb); border-radius: 999px; background: var(--white);
  font-size: 11.5px; font-weight: 500; color: var(--grey-700); white-space: nowrap; --icon-size: 12px;
}
.pv-chip--dark { background: var(--grey-900); border-color: var(--grey-900); color: var(--paper); }
.pv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pv-stat { display: grid; justify-items: start; gap: 2px; padding: 12px 14px; border: 1px solid var(--pvb); border-radius: 12px; background: var(--white); }
.pv-stat small { font-size: 11.5px; color: var(--grey-500); }
.pv-stat b {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: var(--display-tracking); color: var(--grey-900);
}
.pv-stat em { font-family: var(--font-body); font-style: normal; font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: var(--grey-500); }
.pv-delta { margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: var(--pv-soft); font-size: 11px; font-weight: 500; color: var(--grey-600); }
.pv-delta--up { background: color-mix(in srgb, var(--ill-jade) 13%, var(--white)); color: var(--pixel-green); }
.pv-delta--warn { background: color-mix(in srgb, var(--ember-orange) 13%, var(--white)); color: var(--ember-orange-ink); }

.pv-card { border: 1px solid var(--pvb); border-radius: 14px; background: var(--white); }
.pv-pri { display: grid; gap: 12px; padding: 14px 16px 16px; }
.pv-pri-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pv .pview__path { font-size: 12px; }
.pv .pview__path li > * { padding: 4px 9px; }
.pv .pview__path li + li::before { width: 14px; margin-inline: 2px; }
.pv-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--grey-900); text-wrap: balance; }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pv-ev { display: grid; align-content: start; gap: 8px; padding: 12px 14px 14px; border-color: var(--pvb-soft); border-radius: 12px; }
.pv-cap { display: flex; align-items: center; gap: 6px; font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grey-500); --icon-size: 13px; }
.pv-req { margin: 0; font-size: 13px; line-height: 1.55; color: var(--grey-700); }
.pv-req b { font-weight: 600; color: var(--grey-900); }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pv-chips span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--pvb-soft); border-radius: 6px; font-size: 11px; color: var(--grey-600); --icon-size: 11px; }

/* -------------------------------------------------------- decision rail */
.pv-rail { display: flex; flex-direction: column; align-items: stretch; padding: 16px; border-left: 1px solid var(--pvb-soft); background: color-mix(in srgb, var(--grey-900) 2%, var(--white)); }
.pv-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-rail-head .pv-cap { white-space: nowrap; }
.pv-rail-head .mode { font-size: 11px; }
.pv-move { margin: 12px 0 0; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--grey-900); text-wrap: balance; }
.pv-why { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--grey-500); }
.pv-kv { margin: 0; border: 1px solid var(--pvb); border-radius: 10px; background: var(--white); overflow: hidden; }
.pv-kv > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px; font-size: 12.5px; }
.pv-kv > div + div { border-top: 1px solid var(--pvb-soft); }
.pv-kv dt { color: var(--grey-500); }
.pv-kv dd { margin: 0; font-weight: 600; color: var(--grey-900); text-align: right; }
.pv-kv dd.is-up { color: var(--pixel-green); }
.pv-act { display: grid; grid-auto-flow: column; gap: 8px; margin-top: 12px; }
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border: 1px solid var(--pvb); border-radius: 9px; background: var(--white);
  font: 500 13px/1.2 var(--font-body); color: var(--grey-900); cursor: pointer; --icon-size: 14px;
  transition: background 160ms ease, border-color 160ms ease;
}
.pv-btn:hover { background: var(--pv-soft); }
.pv-btn .icon { color: inherit; }
.pv-btn--primary { border-color: var(--grey-900); background: var(--grey-900); color: var(--paper); }
.pv-btn--primary:hover { background: var(--grey-800); border-color: var(--grey-800); }
.pv-btn--ghost { padding: 4px 8px; border-color: transparent; background: none; color: var(--grey-600); }
.pv-btn--ghost:hover { background: color-mix(in srgb, var(--grey-900) 6%, transparent); }
.pv-btn:focus-visible { outline: 2px solid var(--pixel-green); outline-offset: 2px; }
.pv-done {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 12px 0 0; padding: 7px 7px 7px 11px;
  border: 1px solid color-mix(in srgb, var(--ill-jade) 40%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--ill-jade) 10%, var(--white));
}
.pv-done > span { font-size: 12.5px; font-weight: 600; color: var(--pixel-green); }
.pv-hr { height: 1px; margin: 16px -16px 14px; background: var(--pvb-soft); }
.pv-also { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pv-also li { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 9px; font-size: 12.5px; line-height: 1.35; color: var(--grey-700); --icon-size: 14px; }
.pv-also li > span:first-of-type { flex: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pv-rail.is-flash [data-amt], .pv-rail.is-flash .pv-kv dd { animation: ap-flash 700ms var(--motion-ease, ease); }
  .pv-done:not([hidden]) { animation: ap-in 360ms var(--motion-ease, ease); }
}

/* ----------------------------------------------------------- narrower */
@media (max-width: 1120px) { .pv-search { display: none; } }
@media (max-width: 1020px) {
  .pv-body { grid-template-columns: 208px minmax(0, 1fr); }
  .pv-rail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--pvb-soft); }
}
@media (max-width: 760px) {
  .pv-side, .pv-ws, .pv-vr { display: none; }
  .pv-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pv-main { padding: 16px 14px 18px; }
  .pv-rail { padding: 14px; }
  .pv-hr { margin-inline: -14px; }
  .pv-stats { grid-template-columns: minmax(0, 1fr); }
  .pv-stat { grid-template-columns: 1fr auto; grid-template-areas: 'a c' 'b c'; align-items: center; }
  .pv-stat small { grid-area: a; }
  .pv-stat b { grid-area: b; }
  .pv-stat .pv-delta { grid-area: c; margin: 0; }
  .pv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------- network logos (9 Oct) */
/* The real Meta, Google Ads, TikTok, Snapchat and Slack marks replace the
   letter badges wherever a network is named in the product UI. */
.pv-logo { width: 12px; height: 12px; flex: none; vertical-align: -2px; margin-right: 5px; }
.pv-item small { display: flex; align-items: center; }
.pv-chips .pv-logo { margin-right: 0; }
.pv-stat { position: relative; }
.pv-logos { position: absolute; top: 12px; right: 12px; display: flex; }
.pv-logos img { width: 20px; height: 20px; padding: 3px; border: 1px solid var(--pvb); border-radius: 50%; background: var(--white); }
.pv-logos img + img { margin-left: -6px; }
.cycle__logo { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
.ixs__logo { width: 18px; height: 18px; flex: none; }
@media (max-width: 760px) { .pv-logos { display: none; } }
.cycle__label small { white-space: nowrap; }
.ill .nbi { fill: var(--grey-900); }
.ill--net .nbi { fill: var(--white); }

/* --------------------------------------------------- logo wall (9 Oct) */
/* A slow marquee of customer logos between the hero and the problem. Logos
   sit in one ink colour and take their own colours on hover; each has its
   own height so wide wordmarks and compact marks carry the same weight. */
.logowall { padding-block: 56px 0; }
.logowall__label { max-width: none; margin: 0 0 22px; text-align: center; font-size: 14px; color: var(--grey-600); }
.logowall__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--grey-900) 12%, var(--grey-900) 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--grey-900) 12%, var(--grey-900) 88%, transparent);
}
.logowall__track { display: flex; width: max-content; animation: logowall 42s linear infinite; }
.logowall__viewport:hover .logowall__track { animation-play-state: paused; }
.logowall__set { display: flex; align-items: center; gap: 72px; margin: 0; padding: 0 72px 0 0; list-style: none; }
.logowall__item { display: flex; align-items: center; height: 40px; }
.logowall__item img {
  display: block; width: auto; height: var(--h, 28px);
  filter: grayscale(1) brightness(0); opacity: 0.5;
  transition: filter 240ms var(--motion-ease, ease), opacity 240ms var(--motion-ease, ease);
}
.logowall__item:hover img { filter: none; opacity: 1; }
.logowall__item--duolingo     { --h: 27px; }
.logowall__item--airbnb       { --h: 29px; }
.logowall__item--allbirds     { --h: 30px; }
.logowall__item--headspace    { --h: 26px; }
.logowall__item--liquid-death { --h: 28px; }
.logowall__item--lenskart     { --h: 20px; }
.logowall__item--huel         { --h: 24px; }
.logowall__item--boat         { --h: 30px; }
.logowall + .problem { padding-top: 40px; }
@keyframes logowall { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .logowall { padding-top: 40px; }
  .logowall + .problem { padding-top: 32px; }
  .logowall__set { gap: 44px; padding-right: 44px; }
  .logowall__item img { height: calc(var(--h, 28px) * 0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .logowall__track { animation: none; width: auto; }
  .logowall__set { flex-wrap: wrap; justify-content: center; row-gap: 20px; padding: 0; }
  .logowall__set[aria-hidden] { display: none; }
  .logowall__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================================
   CALM (9 Oct), after amplemarket.com: one typeface at regular weight with
   tight tracking, centred section heads with one short line, one warm
   off-white ground, a single dark block mid-page and a dark close. The
   product is shown once, large, in the hero.
   ========================================================================= */
[data-theme="slate"] {
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-control: "Hanken Grotesk", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.04em;
}
:root { --size-h2: clamp(32px, 4.6vw, 48px); --calm-line: color-mix(in srgb, var(--grey-900) 10%, transparent); }
body, .site-nav, .nav-link, .site-nav a, .btn, input, select, textarea, button { font-family: "Hanken Grotesk", system-ui, sans-serif; }
h1, h2, h3, .display { font-weight: 400; }
h2 { letter-spacing: -0.04em; line-height: 1.06; }

/* Section heads: centred, heading over one short line. */
.section-head {
  display: block; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center;
}
.section-head > div { display: contents; }
.section-head h2 { font-size: var(--size-h2); letter-spacing: -0.04em; line-height: 1.06; }
.section-head p {
  max-width: 54ch; margin: 18px auto 0; font-size: 18px; line-height: 1.55; color: var(--grey-600);
}
.section--ground .section-head p { color: color-mix(in srgb, var(--paper) 62%, transparent); }

/* Buttons: flat ink, small radius. */
.btn--brand, .btn--brand:hover {
  background: var(--grey-900); border-color: var(--grey-900); box-shadow: none; filter: none; transform: none;
}
.btn--brand:hover { background: var(--grey-800); }
.btn { border-radius: 10px; }

/* ----------------------------------------------------------- hero */
.section.hero2 { padding-top: clamp(132px, 14vw, 168px); padding-bottom: 0; text-align: center; }
.hero2__copy { display: flex; flex-direction: column; align-items: center; max-width: 860px; margin-inline: auto; }
.hero2__pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--calm-line); border-radius: 999px; background: var(--white);
  font-size: 13px; color: var(--grey-700); text-decoration: none; --icon-size: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 6%, transparent);
  transition: border-color 200ms var(--motion-ease, ease);
}
.hero2__pill:hover { border-color: color-mix(in srgb, var(--grey-900) 25%, transparent); }
.hero2__pill b { padding: 2px 8px; border-radius: 999px; background: var(--grey-900); color: var(--paper); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.hero2__title {
  margin: 28px 0 0; font-size: clamp(42px, 6.2vw, 76px); font-weight: 400; line-height: 1.02;
  letter-spacing: -0.05em; color: var(--grey-900); text-wrap: balance;
}
.hero2__title span { display: block; }
.hero2__lede { max-width: 44ch; margin-top: 22px; font-size: 19px; line-height: 1.5; color: var(--grey-600); }
.hero2__form {
  display: flex; flex-wrap: wrap; gap: 6px; width: min(100%, 460px); margin-top: 34px; padding: 5px;
  border: 1px solid var(--calm-line); border-radius: 14px; background: var(--white);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent);
  transition: border-color 200ms var(--motion-ease, ease), box-shadow 200ms var(--motion-ease, ease);
}
.hero2__form:focus-within { border-color: color-mix(in srgb, var(--grey-900) 35%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--grey-900) 6%, transparent); }
.hero2__form input {
  flex: 1 1 180px; min-width: 0; padding: 0 12px; border: 0; background: transparent;
  font-size: 15px; color: var(--grey-900); outline: none;
}
.hero2__form input::placeholder { color: var(--grey-500); }
.hero2__form .btn { flex: none; min-height: 42px; padding-inline: 18px; border-radius: 10px; }
.hero2__err { flex-basis: 100%; padding: 2px 12px 4px; font-size: 13px; text-align: left; color: var(--ember-orange-ink, var(--grey-900)); }
.hero2__done { margin-top: 34px; padding: 14px 18px; border: 1px solid var(--calm-line); border-radius: 14px; background: var(--white); font-size: 15px; color: var(--grey-800); }
.hero2__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 18px 0 0; padding: 0;
  list-style: none; font-size: 13px; color: var(--grey-500);
}
.hero2__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero2__trust li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--pixel-green); }
.hero2__shot { margin-top: clamp(56px, 7vw, 88px); }
.hero2 .pview { max-width: 1200px; margin-inline: auto; box-shadow: 0 50px 100px -50px color-mix(in srgb, var(--grey-900) 35%, transparent); }

/* ---------------------------------------------------------- logo wall */
.logowall { padding-top: clamp(72px, 8vw, 104px); }
.logowall__label { font-size: 15px; color: var(--grey-600); }

/* -------------------------------------------------------------- quote */
.section.quote { padding-block: clamp(80px, 9vw, 128px) clamp(24px, 3vw, 40px); }
.quote__fig { max-width: 720px; margin: 0 auto; }
.quote__fig blockquote { margin: 0; }
.quote__fig blockquote p {
  max-width: none; font-family: var(--font-display); font-size: clamp(26px, 3.3vw, 38px); font-weight: 400;
  line-height: 1.2; letter-spacing: -0.035em; color: var(--grey-900); text-wrap: pretty;
}
.quote__fig figcaption {
  display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 24px;
  border-top: 1px solid var(--calm-line);
}
.quote__avatar {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--lime-100); color: var(--grey-900); font-size: 14px; font-weight: 500;
}
.quote__who { display: grid; gap: 1px; font-size: 15px; color: var(--grey-900); }
.quote__who b { font-weight: 500; }
.quote__who small { font-size: 14px; color: var(--grey-600); }
.quote__brand { margin-left: auto; font-family: "Source Serif 4", Georgia, serif; font-size: 22px; font-style: italic; letter-spacing: -0.02em; color: var(--grey-900); }

/* -------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 232px; padding: 24px; border-radius: 16px;
}
.stat b { font-family: var(--font-display); font-size: clamp(40px, 4vw, 54px); font-weight: 400; line-height: 1; letter-spacing: -0.05em; color: var(--grey-900); }
.stat span { max-width: 24ch; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--grey-900) 72%, transparent); }
.stat--a { background: var(--lime-100); }
.stat--b { background: color-mix(in srgb, var(--ill-butter) 45%, var(--white)); }
.stat--c { background: color-mix(in srgb, var(--violet-100) 70%, var(--white)); }
.stat--d { background: color-mix(in srgb, var(--teal-100) 70%, var(--white)); }
@media (max-width: 1020px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stats { grid-template-columns: minmax(0, 1fr); } .stat { min-height: 0; gap: 24px; } }

/* ------------------------------------------------- closing call to action
   Dark, centred, and running straight into the footer as one block. */
.section.cta2 {
  margin-inline: var(--inset); padding-block: clamp(96px, 11vw, 152px) clamp(72px, 8vw, 104px);
  border-radius: var(--card-radius) var(--card-radius) 0 0; background: var(--grey-900); color: var(--paper); text-align: center;
}
.cta2 .container { display: flex; flex-direction: column; align-items: center; }
.cta2__title { margin: 0; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.05em; color: var(--paper); }
.cta2__lede { max-width: 50ch; margin-top: 18px; font-size: 18px; line-height: 1.55; color: color-mix(in srgb, var(--paper) 62%, transparent); }
.cta2 .hero2__form { background: color-mix(in srgb, var(--paper) 7%, var(--grey-900)); border-color: color-mix(in srgb, var(--paper) 14%, transparent); box-shadow: none; }
.cta2 .hero2__form:focus-within { border-color: color-mix(in srgb, var(--paper) 35%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper) 8%, transparent); }
.cta2 .hero2__form input { color: var(--paper); }
.cta2 .hero2__form input::placeholder { color: color-mix(in srgb, var(--paper) 45%, transparent); }
.cta2 .btn--brand, .cta2 .btn--brand:hover { background: var(--paper); border-color: var(--paper); color: var(--grey-900); }
.cta2 .btn--brand:hover { background: var(--white); }
.cta2 .hero2__trust { color: color-mix(in srgb, var(--paper) 50%, transparent); }
.cta2 .hero2__done { background: color-mix(in srgb, var(--paper) 7%, var(--grey-900)); border-color: color-mix(in srgb, var(--paper) 14%, transparent); color: var(--paper); }
.cta2 + * , main:has(> .cta2:last-child) + footer.footer { margin-top: 0; }
footer.footer { border-top-left-radius: 0; border-top-right-radius: 0; }
footer.footer .site-footer__top { border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); padding-top: clamp(48px, 6vw, 72px); }
/* calm fixes: hero headline in two lines, legible primary buttons, one dark
   for the close and the footer, and no second demo button in the footer. */
.hero2__copy { max-width: 1040px; }
.hero2__title { font-size: clamp(40px, 5.6vw, 72px); }
.btn--brand { color: var(--paper); }
.section.hero2 { padding-top: clamp(120px, 11vw, 148px); }
.section.cta2, footer.footer { background: var(--grey-900); }
.cta2 .hero2__trust li::before { background: color-mix(in srgb, var(--pixel-green) 50%, var(--paper)); }
footer.footer .site-footer__brand .btns { display: none; }
.section.hero2 { padding-top: clamp(112px, 9vw, 124px); }
@media (max-width: 480px) { .hero2__title { font-size: 36px; } .hero2__lede { font-size: 17px; } }
@media (max-width: 480px) { .hero2__pill { gap: 8px; font-size: 12px; white-space: nowrap; } }

/* =========================================================================
   VOICEFLOW SECTIONS (9 Oct): the hero card, the product on the meadow and
   the footer that carries the call to action, as on voiceflow.com. The rest
   of the page keeps the calm pass above.
   ========================================================================= */
/* Hero: one white card. Headline on white, the meadow fading in under it
   with the email field on the seam, a customer story on the art, and the
   customer logos along the bottom. */
.section.hero3 { padding: var(--inset) var(--inset) 0; text-align: center; }
.hero3__card {
  overflow: clip; padding-top: clamp(116px, 10vw, 136px);
  border: 1px solid var(--calm-line); border-radius: var(--card-radius); background: var(--white);
}
.hero3__copy { display: flex; flex-direction: column; align-items: center; max-width: 1040px; }
.hero3__art { position: relative; margin: clamp(8px, 1vw, 16px) 12px 0; aspect-ratio: 1372 / 600; border-radius: calc(var(--card-radius) - 2px); overflow: clip; }
.hero3__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--grey-900) 34%);
          mask-image: linear-gradient(to bottom, transparent 0%, var(--grey-900) 34%);
}
.hero3__ask { position: relative; display: flex; justify-content: center; padding: clamp(20px, 2.4vw, 32px) 16px 0; }
.hero3__ask .hero2__form, .hero3__ask .hero2__done { margin-top: 0; }
.hero3__ask .hero2__form { box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--grey-900) 30%, transparent); }
.hero3__story {
  position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px);
  display: grid; gap: 14px; width: min(360px, calc(100% - 32px)); padding: 22px 24px;
  border-radius: 12px; background: var(--white); text-align: left; text-decoration: none;
  box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--grey-900) 40%, transparent);
  transition: transform 240ms var(--motion-ease, ease);
}
.hero3__story:hover { transform: translateY(-2px); }
.hero3__story span { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; color: var(--grey-900); }
.hero3__story b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--pixel-green); --icon-size: 13px; }
.hero3__logos { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; padding: 14px 28px 16px; }
.hero3__logos-label { margin: 0; font-size: 13px; color: var(--grey-600); white-space: nowrap; }
.hero3__logos .logowall__item { height: 36px; }
.hero3__logos .logowall__item img { height: calc(var(--h, 28px) * 0.86); }

/* The brief window standing on the soft meadow, inside a rounded card. */
.brief2 .section-head h2 br { display: none; }
@media (min-width: 761px) { .brief2 .section-head h2 br { display: inline; } }
.brief2__stage {
  padding: clamp(14px, 5vw, 72px); border-radius: calc(var(--card-radius) + 8px);
  background: var(--sage-mist, var(--paper)) url(../img/art/hero-pixel.webp) 50% 100% / cover no-repeat;
}
.brief2 .pview { max-width: 1200px; margin: 0 auto; box-shadow: 0 40px 80px -36px color-mix(in srgb, var(--grey-900) 45%, transparent); }

/* Footer: one dark card. The call to action on the left, links on the
   right, the wordmark and legal links along the bottom. */
footer.footer { margin-top: clamp(56px, 7vw, 96px); border-radius: var(--card-radius); }
footer.footer .site-footer__top { border-top: 0; padding-top: clamp(56px, 6vw, 88px); }
.site-footer__cta { display: grid; align-content: start; justify-items: start; gap: 0; max-width: 460px; }
.site-footer .site-footer__cta h2.site-footer__title {
  margin: 0; font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 44px); font-weight: 400;
  line-height: 1.05; letter-spacing: -0.04em; text-transform: none; color: var(--paper);
}
.site-footer__lede { margin-top: 14px; font-size: 16px; line-height: 1.5; color: color-mix(in srgb, var(--paper) 60%, transparent); }
.site-footer__cta .hero2__form { margin-top: 28px; background: color-mix(in srgb, var(--paper) 7%, var(--grey-900)); border-color: color-mix(in srgb, var(--paper) 14%, transparent); box-shadow: none; }
.site-footer__cta .hero2__form:focus-within { border-color: color-mix(in srgb, var(--paper) 35%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper) 8%, transparent); }
.site-footer__cta .hero2__form input { color: var(--paper); }
.site-footer__cta .hero2__form input::placeholder { color: color-mix(in srgb, var(--paper) 45%, transparent); }
.site-footer__cta .btn--brand, .site-footer__cta .btn--brand:hover { background: var(--paper); border-color: var(--paper); color: var(--grey-900); }
.site-footer__cta .hero2__done { margin-top: 28px; background: color-mix(in srgb, var(--paper) 7%, var(--grey-900)); border-color: color-mix(in srgb, var(--paper) 14%, transparent); color: var(--paper); }
.site-footer__bar .container { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.site-footer__bar .wordmark { color: var(--paper); }
.site-footer__bar .site-footer__legal { margin-left: auto; }
.site-footer__bar .site-footer__copy { flex-basis: 100%; margin: 0; font-size: 13px; color: color-mix(in srgb, var(--paper) 45%, transparent); }

@media (max-width: 760px) {
  .hero3__art { aspect-ratio: 4 / 5; margin-inline: 8px; }
  .hero3__story { left: 16px; right: 16px; width: auto; padding: 18px; }
  .hero3__story span { font-size: 15px; }
  .hero3__logos { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 12px; }
  .site-footer__bar .site-footer__legal { margin-left: 0; }
}
footer.footer .site-footer__bar .container { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 32px; }
footer.footer .site-footer__bar .wordmark { grid-column: 1; grid-row: 1; }
footer.footer .site-footer__bar .site-footer__legal { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; font-size: 14px; }
footer.footer .site-footer__bar .site-footer__copy { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 760px) {
  footer.footer .site-footer__bar .container { grid-template-columns: minmax(0, 1fr); }
  footer.footer .site-footer__bar .site-footer__legal { grid-column: 1; grid-row: 2; justify-self: start; }
  footer.footer .site-footer__bar .site-footer__copy { grid-row: 3; }
}

/* Header and drawers (9 Oct, after amplemarket.com): a shorter bar with
   16px links, and drawer rows as a name over one line, with no icons. The
   icon markup stays in the page; it is only hidden here. */
:root { --nav-h: 56px; --nav-float: 12px; }
.site-header .site-nav .nav-link, .site-header .site-nav a.nav-link { font-size: 16px; font-weight: 400; letter-spacing: -0.01em; color: var(--grey-800); }
.site-header .site-nav .nav-link:is(:hover, [aria-expanded="true"]) { color: var(--grey-900); }
.site-header.is-dark .site-nav .nav-link { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.site-header.is-dark .site-nav .nav-link:is(:hover, [aria-expanded="true"]) { color: var(--paper); }
.site-header .wordmark__text { font-size: 19px; }
.site-header .site-actions .btn { min-height: 40px; padding-inline: 16px; font-size: 15px; }
.site-header .mega__ico { display: none; }
.mega--rich .mega__items a { display: block; }
@media (min-width: 992px) {
  .site-header .mega--rich .mega__items a { width: 280px; padding: 12px 16px; }
  .site-header .mega--rich .mega__col--wide .mega__items { grid-template-columns: repeat(2, 280px); }
  .site-header .mega--rich .mega__col--compact .mega__items a { width: 240px; padding-block: 12px; }
  .site-header .mega--rich .mega__items strong, .site-header .mega--rich .mega__card strong { font-size: 16px; font-weight: 500; }
  .site-header .mega--rich .mega__items span, .site-header .mega--rich .mega__card span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; }
}
@media (max-width: 991px) { :root { --nav-float: 10px; } }
/* The bar sits inside the hero card, as on voiceflow.com: main is not
   pushed down under it when the hero card comes first. */
#navbar-placeholder + main:has(> .hero3:first-of-type) { margin-top: 0; }
@media (max-width: 991px) {
  .site-header.is-open, .site-header.is-open.is-scrolled { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header.is-open .mega__label { font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--grey-500); }
}

/* Primary button (9 Oct, after voiceflow.com): blue, 8px corners, semibold,
   a soft navy shadow, a darker edge underneath and a light one on top. The
   same on light and dark grounds. */
.btn.btn--brand,
.site-header .site-actions .btn.btn--brand,
.site-header.is-dark .site-actions .btn.btn--brand,
.site-footer__cta .btn.btn--brand {
  border: 0; border-radius: 8px; background: var(--blue-500); color: var(--white);
  font-weight: 600; letter-spacing: -0.005em;
  box-shadow:
    0 6px 16px -8px color-mix(in srgb, var(--blue-shadow) 8%, transparent),
    0 4px 12px -6px color-mix(in srgb, var(--blue-shadow) 6%, transparent),
    0 3px 8px -4px color-mix(in srgb, var(--blue-shadow) 6%, transparent),
    0 2px 6px -3px color-mix(in srgb, var(--blue-shadow) 4%, transparent),
    0 1px 4px -2px color-mix(in srgb, var(--blue-shadow) 4%, transparent),
    inset 0 -1px 0 1px color-mix(in srgb, var(--blue-600) 32%, transparent),
    inset 0 1px 2px -1px color-mix(in srgb, var(--white) 32%, transparent);
  transition: background-color 200ms var(--motion-ease, ease), box-shadow 200ms var(--motion-ease, ease);
}
.btn.btn--brand:is(:hover, :focus-visible),
.site-header .site-actions .btn.btn--brand:is(:hover, :focus-visible),
.site-header.is-dark .site-actions .btn.btn--brand:is(:hover, :focus-visible),
.site-footer__cta .btn.btn--brand:is(:hover, :focus-visible) {
  background: var(--blue-600); color: var(--white);
  box-shadow:
    0 6px 32px -12px color-mix(in srgb, var(--blue-shadow) 16%, transparent),
    0 4px 24px -12px color-mix(in srgb, var(--blue-shadow) 12%, transparent),
    0 4px 12px -4px color-mix(in srgb, var(--blue-shadow) 8%, transparent),
    0 2px 4px -2px color-mix(in srgb, var(--blue-shadow) 4%, transparent),
    inset 0 -1px 0 1px color-mix(in srgb, var(--blue-700) 32%, transparent),
    inset 0 1px 2px -1px color-mix(in srgb, var(--white) 32%, transparent);
}
.btn.btn--brand:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.btn.btn--brand:active { background: var(--blue-700); }
.hero2__form .btn.btn--brand { border-radius: 8px; }
.hero2__form:focus-within { border-color: color-mix(in srgb, var(--blue-500) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-500) 12%, transparent); }
.site-footer__cta .hero2__form:focus-within { border-color: color-mix(in srgb, var(--blue-500) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-500) 18%, transparent); }
.hero3__story b { color: var(--blue-600); }

/* Hero pill (9 Oct, from the user's reference): a soft grey pill, the line
   of text, and a round black button with a chevron. On hover the button
   stretches into an orange oval and the chevron becomes an arrow. */
.hero2__pill {
  gap: 14px; padding: 5px 5px 5px 20px; border: 1px solid var(--calm-line); border-radius: 999px;
  background: color-mix(in srgb, var(--grey-900) 3%, var(--white)); box-shadow: none;
  font-size: 16px; letter-spacing: -0.01em; color: var(--grey-900);
}
.hero2__pill:hover { border-color: color-mix(in srgb, var(--grey-900) 16%, transparent); background: var(--white); }
.hero2__pill b { display: none; }
.hero2__pill-go {
  position: relative; display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 999px; background: var(--grey-900); color: var(--white);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 240ms ease;
}
.hero2__pill-go .icon { grid-area: 1 / 1; width: 14px; height: 14px; transition: opacity 200ms ease, translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.hero2__pill-hover { opacity: 0; translate: -6px 0; }
.hero2__pill:is(:hover, :focus-visible) .hero2__pill-go { width: 46px; background: var(--orange-500); }
.hero2__pill:is(:hover, :focus-visible) .hero2__pill-rest { opacity: 0; translate: 6px 0; }
.hero2__pill:is(:hover, :focus-visible) .hero2__pill-hover { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .hero2__pill-go, .hero2__pill-go .icon { transition: none; } }
@media (max-width: 480px) { .hero2__pill { gap: 10px; padding-left: 14px; font-size: 14px; } .hero2__pill-go { width: 26px; height: 26px; } }

/* Hero headline at 48px (36px on phones). */
.hero2__title { font-size: 48px; line-height: 1.06; letter-spacing: -0.04em; }
@media (max-width: 480px) { .hero2__title { font-size: 36px; } }

/* Logo marquee: hover slows it down (adpilot.js eases the playback rate),
   instead of pausing it. */
.logowall__viewport:hover .logowall__track { animation-play-state: running; }

/* ---------------------------------------------------------- 9 Oct, pass 3 */
/* The meadow behind the brief window, blurred so the window reads first. */
.brief2__stage { position: relative; isolation: isolate; overflow: clip; background: var(--sage-mist, var(--paper)); }
.brief2__stage::before {
  content: ''; position: absolute; inset: -40px; z-index: -1;
  background: url(../img/art/hero-pixel.webp) 50% 100% / cover no-repeat;
  filter: blur(18px) saturate(1.1);
}

/* Product UI in Inter: the app's own face, apart from the site's type. No
   monospace inside the window; small labels are Inter caps. */
.pv, .pv * , .pv .spark text { font-family: "Inter", system-ui, sans-serif; }
.pv { font-feature-settings: "cv11", "ss01"; letter-spacing: -0.006em; }
.pv :is(.pv-cap, .pv-side-label, .pv-rail-head > span:first-child, .pv-also-head) { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.pv :is(.pv-item small, .pv-kv, .pv-stat, .pv-delta, .spark__lbl) { font-variant-numeric: tabular-nums; }
.pv .pv-item small { font-size: 12px; }

/* Section headings at 36px. */
:root { --size-h2: 36px; }
.section-head h2, .problem h2, .faq__head h2, .site-footer .site-footer__cta h2.site-footer__title { font-size: 36px; line-height: 1.1; letter-spacing: -0.035em; }
@media (max-width: 480px) { :root { --size-h2: 30px; } .section-head h2, .problem h2, .faq__head h2, .site-footer .site-footer__cta h2.site-footer__title { font-size: 30px; } }

/* Hero pill: smaller, and the hover oval in the primary blue. */
.hero2__pill { gap: 10px; padding: 3px 3px 3px 14px; font-size: 14px; }
.hero2__pill-go { width: 24px; height: 24px; }
.hero2__pill-go .icon { width: 12px; height: 12px; }
.hero2__pill:is(:hover, :focus-visible) .hero2__pill-go { width: 36px; background: var(--blue-500); }
@media (max-width: 480px) { .hero2__pill { font-size: 13px; padding-left: 12px; } .hero2__pill-go { width: 22px; height: 22px; } }

/* Avatar in the product window: a photo that links out. */
.pv-avatar { overflow: hidden; width: 28px; height: 28px; padding: 0; background: var(--grey-100, var(--paper)); box-shadow: 0 0 0 1px var(--pvb); transition: box-shadow 160ms ease; }
.pv-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-avatar:is(:hover, :focus-visible) { box-shadow: 0 0 0 2px var(--blue-500); }

/* Quote: Maya's photo and the customer's logo. */
img.quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: none; }
img.quote__brand { width: auto; height: 26px; margin-left: auto; }
.pv :is(kbd, small, b, em, strong, span, p, dd, dt, li, button, text) { font-family: "Inter", system-ui, sans-serif; }
.pv :is(.pv-cap, .pv-side-label) { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--grey-500); }
.pv .pv-rail-head { gap: 6px; }
.pv .pv-rail-head .mode { padding-inline: 7px; }

/* Product window, Headspace pass (9 Oct): the sidebar collapsed to an icon
   rail, Headspace as the workspace, and a static screen (no behaviour on
   Approve or Adjust). */
.pv-body { grid-template-columns: 60px minmax(0, 1fr) 312px; }
.pv-side--rail { align-items: center; gap: 4px; padding: 12px 0; }
.pv-side--rail .pv-nav { position: relative; justify-content: center; width: 38px; height: 38px; padding: 0; --icon-size: 18px; }
.pv-side--rail .pv-count {
  position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 4px; margin: 0;
  font-size: 9.5px; line-height: 15px; text-align: center;
}
.pv-side--rail .pv-nav--end { margin-top: auto; }
.pv-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ill-jade); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ill-jade) 20%, transparent); }
.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pv-ws { gap: 8px; padding-block: 5px; }
.pv-ws-brand { display: block; width: auto; height: 17px; }
.pv-btn { cursor: default; }
@media (max-width: 1020px) { .pv-body { grid-template-columns: 60px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .pv-body { grid-template-columns: minmax(0, 1fr); }
  .pv-ws { display: inline-flex; }
  .pv-date { display: none; }
}

/* Problem illustration (9 Oct): four flat dashboard cards that disagree.
   Sizes follow the stage's width (cqw) so the cluster scales as one piece.
   Hover the stage and the cards fan out; hover one card and it straightens,
   comes to the front and redraws its line. */
.prob { width: min(100%, 520px); }
.prob__stage { position: relative; aspect-ratio: 46 / 40; container-type: inline-size; }
.pcard {
  --x: 0%; --y: 0%; --r: 0deg; --s: 1;
  position: absolute; display: grid; gap: 0.6cqw; width: 52%; padding: 3.6cqw 3.8cqw 3.2cqw;
  border: 1px solid var(--calm-line); border-radius: 3cqw; background: var(--white);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--grey-900) 22%, transparent);
  transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s));
  transition: transform 520ms cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 300ms ease;
}
.pcard--meta   { left: 0;   top: 5%;  --r: -3deg;   z-index: 2; }
.pcard--tiktok { left: 46%; top: 0;   --r: 2.5deg;  z-index: 1; }
.pcard--google { left: 5%;  top: 49%; --r: 1.5deg;  z-index: 3; }
.pcard--mmp    { left: 45%; top: 44%; --r: -2deg;   z-index: 4; }
.pcard__top { display: flex; align-items: center; gap: 1.6cqw; font-size: max(10px, 2.7cqw); font-weight: 500; color: var(--grey-700); --icon-size: max(12px, 3.4cqw); }
.pcard__top img { width: max(12px, 3.4cqw); height: auto; }
.pcard__label { margin-top: 1.4cqw; font-size: max(10px, 2.5cqw); color: var(--grey-500); }
.pcard__value { font-family: var(--font-display); font-size: max(18px, 6.4cqw); font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--grey-900); }
.pcard__value.is-down { color: var(--ember-orange-ink); }
.pcard__chart { width: 100%; height: 9cqw; margin-top: 1.6cqw; overflow: visible; }
.pcard__line { fill: none; stroke: var(--grey-500); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pcard__line.is-down { stroke: var(--ill-ember); }
.pcard__line.is-up { stroke: var(--ill-jade); }
.pcard__area { fill: color-mix(in srgb, var(--grey-900) 4%, transparent); }
.pcard--meta .pcard__area { fill: color-mix(in srgb, var(--ill-ember) 12%, transparent); }
.pcard--google .pcard__area { fill: color-mix(in srgb, var(--ill-jade) 12%, transparent); }
.pcard__note { margin-top: 1cqw; font-size: max(10px, 2.4cqw); color: var(--grey-500); }
.prob__chip {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 1.4cqw;
  padding: 1.4cqw 2.6cqw; border-radius: 999px; font-size: max(10px, 2.6cqw); font-weight: 500;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--grey-900) 30%, transparent);
  transition: transform 520ms cubic-bezier(0.34, 1.4, 0.5, 1); --icon-size: max(11px, 3cqw);
}
.prob__chip--file { left: 22%; bottom: -1%; border: 1px solid var(--calm-line); background: var(--white); color: var(--grey-700); rotate: -2deg; }
.prob__chip--ask { right: -2%; bottom: 5%; background: var(--grey-900); color: var(--paper); rotate: 3deg; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .prob__stage:hover .pcard--meta   { --x: -5%; --y: -4%; --r: -6deg; }
  .prob__stage:hover .pcard--tiktok { --x: 5%;  --y: -5%; --r: 5deg; }
  .prob__stage:hover .pcard--google { --x: -6%; --y: 5%;  --r: 4deg; }
  .prob__stage:hover .pcard--mmp    { --x: 5%;  --y: 4%;  --r: -5deg; }
  .prob__stage:hover .prob__chip--ask { transform: translateY(-6px) rotate(-4deg); }
  .prob__stage:hover .prob__chip--file { transform: translate(-4px, 6px); }
  .prob__stage .pcard:hover {
    --r: 0deg; --s: 1.05; z-index: 6;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 6%, transparent), 0 26px 50px -20px color-mix(in srgb, var(--grey-900) 35%, transparent);
  }
  .pcard:hover .pcard__line { animation: pcard-draw 900ms cubic-bezier(0.3, 0.7, 0.2, 1) both; }
}
@keyframes pcard-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 860px) { .prob { justify-self: center; margin-top: 8px; } }
.prob__stage { aspect-ratio: 46 / 43; }
.pcard { width: 49%; }
.pcard--meta   { left: 0;   top: 4%; }
.pcard--tiktok { left: 50%; top: 0; }
.pcard--google { left: 3%;  top: 50%; }
.pcard--mmp    { left: 50%; top: 46%; }
.prob__chip--file { left: 26%; bottom: -2%; }
.prob__chip--ask { right: 1%; bottom: -3%; }
.pcard__chart { height: auto; }
.pcard__line { vector-effect: none; stroke-width: 1.8; }
@container (max-width: 380px) { .pcard__note { display: none; } }

/* Eyebrows (9 Oct, after voiceflow.com): a short handwritten label in
   Caveat above each section heading, in place of a description line. */
.eyebrow {
  max-width: none; margin: 0 0 6px; font-family: "Caveat", cursive; font-size: 24px; font-weight: 600;
  line-height: 1.1; letter-spacing: 0; color: var(--blue-600);
}
.section--ground .eyebrow { color: color-mix(in srgb, var(--blue-500) 55%, var(--paper)); }
.section-head .eyebrow { text-align: center; }
.problem .eyebrow { margin-bottom: 8px; }
.faq__head .eyebrow { margin-bottom: 6px; }
.section-head h2 { margin: 0; }
.section-head p.eyebrow, .faq__head p.eyebrow, .problem p.eyebrow {
  max-width: none; margin: 0 0 6px; font-family: "Caveat", cursive; font-size: 24px; font-weight: 600;
  line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--blue-600);
}
.section--ground .section-head p.eyebrow { color: color-mix(in srgb, var(--blue-500) 55%, var(--paper)); }
.section-head p.eyebrow, .faq__head p.eyebrow, .problem p.eyebrow, .eyebrow { font-size: 28px; margin-bottom: 4px; }

/* Product window, type and parts (9 Oct). The user's scale: stat numbers
   24/500, greeting 18/600, card title 16/600, everything else 12. Selectors
   start at .pview__win.pv so they win over the older rules above. */
.pview__win.pv .pv-hi { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
.pview__win.pv .pv-title { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.pview__win.pv .pv-move { font-size: 16px; font-weight: 600; line-height: 1.35; }
.pview__win.pv :is(.pv-sub, .pv-search, .pv-date, .pv-req, .pv-why, .pv-kv dt, .pv-kv dd, .pv-also span, .pv-chip, .pv-chips span, .pv-btn, kbd) { font-size: 12px; }
.pview__win.pv .pv-req { line-height: 1.6; }
.pview__win.pv .pv-cap { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--grey-500); }
.pview__win.pv .pv-btn { font-weight: 500; }
.pview__win.pv .spark__lbl { font-size: 13.5px; }
.pview__win.pv .pv-count { min-width: 18px; height: 18px; font-size: 12px; line-height: 18px; top: 1px; right: 1px; }

/* Status: no dot, no fill; an icon before the word, in the status colour. */
.pview__win.pv .mode { gap: 4px; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; color: var(--m-ink); --icon-size: 13px; }
.pview__win.pv .mode::before { display: none; }
.pview__win.pv .mode .icon { flex: none; width: 13px; height: 13px; }

/* Primary action in the product: the brand blue, no icon. */
.pview__win.pv .pv-btn--primary { border-color: var(--blue-500); background: var(--blue-500); color: var(--white); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 20%, transparent), 0 1px 2px color-mix(in srgb, var(--blue-shadow) 20%, transparent); }
.pview__win.pv .pv-btn--primary:hover { border-color: var(--blue-600); background: var(--blue-600); }

/* "Priority 1 of 4": an outline chip, no fill. */
.pview__win.pv .pv-chip--dark { border-color: var(--pvb); background: none; color: var(--grey-900); font-weight: 500; }

/* Stat cards: label and icon on top, the number, then a trend line. */
.pview__win.pv .pv-stat { display: grid; gap: 6px; justify-items: stretch; padding: 14px 16px; border-radius: 12px; }
.pv-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.pview__win.pv .pv-stat small { font-size: 12px; font-weight: 500; color: var(--grey-600); }
.pv-stat-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--pv-soft); color: var(--grey-600); --icon-size: 13px; }
.pv-stat-ico .icon { width: 13px; height: 13px; }
.pview__win.pv .pv-stat b { display: flex; align-items: baseline; gap: 5px; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--grey-900); }
.pview__win.pv .pv-stat em { font-size: 12px; font-weight: 400; font-style: normal; letter-spacing: 0; color: var(--grey-500); }
.pv-stat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 0; font-size: 12px; color: var(--grey-500); }
.pv-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; color: var(--grey-700); }
.pv-trend .icon { width: 13px; height: 13px; }
.pv-trend--up { color: var(--pixel-green); }
.pv-trend--warn { color: var(--ember-orange-ink); }
.pview__win.pv .pv-stat .pv-logos { position: static; }
.pview__win.pv .pv-stat .pv-logos img { width: 22px; height: 22px; padding: 4px; }
@media (max-width: 760px) {
  .pview__win.pv .pv-stat { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .pview__win.pv .pv-stat > * { grid-area: auto; }
}
.pview__win.pv span.pv-cap { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pview__win.pv .spark__lbl { font-size: 10px; } /* the chart draws at about 1.2x its viewBox, so this renders near 12px */
.pv-stat-foot { flex-wrap: nowrap; white-space: nowrap; }

/* Product window spacing and the "Also in this brief" list (9 Oct). */
.pview__win.pv .pv-main { padding: 12px; gap: 12px; }
.pview__win.pv .pv-rail { padding: 12px; }
.pview__win.pv .pv-hr { margin: 14px -12px 12px; }
.pview__win.pv .pv-pri { padding: 10px; gap: 10px; }
.pview__win.pv .pv-stat { padding: 10px; }
.pview__win.pv .pv-also { gap: 0; margin-top: 8px; border: 1px solid var(--pvb); border-radius: 10px; background: var(--white); overflow: hidden; }
.pview__win.pv .pv-also li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 12px; align-items: center; gap: 10px;
  padding: 10px; border-radius: 0; color: var(--grey-900);
}
.pview__win.pv .pv-also li + li { border-top: 1px solid var(--pvb-soft); }
.pv-also-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--pv-soft); color: var(--grey-700); }
.pv-also-ico .icon { width: 14px; height: 14px; }
.pv-also-txt { display: grid; gap: 2px; min-width: 0; }
.pview__win.pv .pv-also-txt b { font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--grey-900); }
.pview__win.pv .pv-also-txt .mode { justify-self: start; }
.pv-also-go { width: 12px; height: 12px; color: var(--grey-400, var(--grey-500)); }
@media (max-width: 760px) {
  .pview__win.pv .pv-main, .pview__win.pv .pv-rail { padding: 12px; }
  .pview__win.pv .pv-hr { margin-inline: -12px; }
}
.pview__win.pv .pv-rail > .pv-move:first-child { margin-top: 0; }

/* Section head rhythm (9 Oct): 10px between the eyebrow and the heading,
   40px from the heading to the content (32px on phones). Content no longer
   adds its own top margin, except the ring, whose top label hangs above it. */
.section-head p.eyebrow, .faq__head p.eyebrow, .problem p.eyebrow { margin-bottom: 10px; }
.section-head { margin-bottom: 40px; }
.section-head + :not(.cycle):not(template) { margin-top: 0; }
/* (the fitx card keeps its own 12px inner padding) */
@media (min-width: 1100px) { .section-head + .cycle { margin-top: 96px; } }
@media (max-width: 760px) { .section-head { margin-bottom: 32px; } }

/* h3 at 24px everywhere on the site (9 Oct): the control tab headings were
   40px and the card-stack headings 32px. The product window has no h3. */
h3,
.section .fitx .fitx__panel .fitx__lead h3,
.section .ixs .ixs__card .ixs__copy h3,
.section .cycle .cycle__panel h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.03em; }

/* Networks diagram with animated beams (9 Oct). Light nodes so every logo
   shows in its own colours; faint base lines; a beam (a moving gradient)
   runs along each line: blue for results coming in, green for budget going
   back out. */
.net .net-node { fill: var(--paper); stroke: none; }
.net .net-hub { fill: var(--paper); }
.net .net-halo { fill: color-mix(in srgb, var(--blue-500) 14%, transparent); stroke: color-mix(in srgb, var(--paper) 16%, transparent); stroke-width: 1; stroke-dasharray: 3 5; }
.net .net-mark { fill: var(--grey-900); }
.net .net-name { fill: var(--grey-900); font-family: var(--font-body); font-size: 15px; font-weight: 500; }
.net .net-name--hub { font-size: 13px; font-weight: 600; }
.net .net-sub { fill: var(--grey-600); font-family: var(--font-body); font-size: 11.5px; }
.net .net-label { fill: color-mix(in srgb, var(--paper) 60%, transparent); font-family: var(--font-body); font-size: 12px; }
.net .net-ring { fill: none; stroke: var(--grey-900); stroke-width: 1.5; }
.net .net-dot { fill: var(--ill-jade); }
.net .net-dsp { fill: var(--grey-900); }
.net .net-base { fill: none; stroke: color-mix(in srgb, var(--paper) 16%, transparent); stroke-width: 1.5; }
.net .net-base--out { stroke-dasharray: 3 5; stroke: color-mix(in srgb, var(--ill-jade) 40%, transparent); }
.net .net-beam { fill: none; stroke-width: 2.25; stroke-linecap: round; }
.net .net-key { fill: none; stroke: var(--blue-500); stroke-width: 2; stroke-linecap: round; }
.net .net-key--out { stroke: var(--ill-jade); }
.net .beam-g .b0 { stop-color: var(--paper); stop-opacity: 0; }
.net .beam-g .b1 { stop-color: var(--paper); stop-opacity: 1; }
.net .beam-g--in .b2 { stop-color: var(--blue-500); stop-opacity: 1; }
.net .beam-g--in .b3 { stop-color: var(--blue-500); stop-opacity: 0; }
.net .beam-g--out .b2 { stop-color: var(--ill-jade); stop-opacity: 1; }
.net .beam-g--out .b3 { stop-color: var(--ill-jade); stop-opacity: 0; }
.net.is-still .net-beam { display: none; }

/* Control panels (9 Oct): no top rule, no top margin, 32px all round. */
.fitx .fitx__panel { margin-top: 0; border-top: 0; padding: 32px; }
@media (max-width: 760px) { .fitx .fitx__panel { padding: 20px; } }

/* The ring no longer carries labels beside its stations, so it needs no
   extra room above it. */
.section-head + .cycle, .cycle { margin-top: 0; }
@media (min-width: 1100px) { .section-head + .cycle, .cycle { margin-top: 0; } }

/* Drawers (9 Oct, after voiceflow.com): a white card with hairline column
   dividers and a soft shadow; the hovered row turns light grey. The dark
   header variant keeps its night drawer. */
@media (min-width: 992px) {
  .site-header:not(.is-dark) .nav-panel {
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--grey-900) 8%, transparent);
    border-radius: 16px;
    box-shadow:
      0 1px 2px color-mix(in srgb, var(--grey-900) 4%, transparent),
      0 12px 24px -12px color-mix(in srgb, var(--grey-900) 12%, transparent),
      0 32px 64px -24px color-mix(in srgb, var(--grey-900) 18%, transparent);
  }
  .site-header:not(.is-dark) .mega__col + .mega__col { border-left-color: color-mix(in srgb, var(--grey-900) 8%, transparent); }
  .site-header:not(.is-dark) :is(.mega__col a, .mega__card):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--grey-900) 4%, var(--white)); box-shadow: none;
  }
  .site-header:not(.is-dark) .mega--rich .mega__card { border-top: 1px solid color-mix(in srgb, var(--grey-900) 8%, transparent); border-radius: 0 0 12px 12px; }
}

/* Product window: shadcn-style shadow-sm on the cards in the main pane. */
.pview__win.pv :is(.pv-stat, .pv-pri) {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent), 0 1px 3px color-mix(in srgb, var(--grey-900) 4%, transparent);
}
.pview__win.pv .pv-ev { box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 4%, transparent); }
.pview__win.pv .pv-chip { box-shadow: 0 1px 1px color-mix(in srgb, var(--grey-900) 4%, transparent); }

/* Count-up (9 Oct): the good numbers in the product window (ad sets paused,
   money saved, campaigns watched, expected revenue) count up from 0 when the
   window scrolls in. Tabular figures and a min-width set by adpilot.js keep
   the text around them still while the digits change. */
.pview__win.pv [data-count] { display: inline-block; font-variant-numeric: tabular-nums; }
/* Moved (9 Oct, later): the product window stays still and the Time back
   cards count instead (+$3.9k and 37, the two where a bigger number is good). */
.stat [data-count] { display: inline-block; font-variant-numeric: tabular-nums; }

/* Rail move and priority title at 14px (9 Oct). */
.pview__win.pv :is(.pv-title, .pv-move) { font-size: 14px; }

/* Product polish (9 Oct). One colour per meaning inside the window:
   blue = needs you (Approve, Review, the bell), flame = a problem (the
   chart, "4 findings"), green = done or gained, grey = everything else.
   --pv-alert is the chart's flame darkened enough to read as 12px text. */
.pview__win.pv { --pv-alert: color-mix(in srgb, var(--ill-flame) 72%, var(--grey-900)); }
.pview__win.pv .pv-trend--warn { color: var(--pv-alert); }
/* "Review" went back to its amber (9 Oct, later): blue there wasn't liked. */
.pview__win.pv .pv-bell > i { background: var(--blue-500); }

/* The rail names the priority it fixes, and says what happens after Approve. */
.pview__win.pv .pv-rail > .pv-cap--fix:first-child { margin: 0 0 6px; }
.pview__win.pv .pv-cap--fix { color: var(--grey-500); }
.pview__win.pv .pv-cap--fix + .pv-move { margin-top: 0; }
.pview__win.pv .pv-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--grey-500); --icon-size: 13px; }
.pview__win.pv .pv-note .icon { flex: none; }

/* Chart labels sit clear of the lines: the target above its dashed line,
   the window name and the closing value along the bottom. */
.pview__win.pv .spark__lbl--win { fill: var(--pv-alert); }
.pview__win.pv .spark__lbl--val { fill: var(--pv-alert); font-weight: 600; }

/* Evidence chips stay on one row. */
.pview__win.pv .pv-chips { gap: 4px; }
.pview__win.pv .pv-chips span { padding: 3px 7px; gap: 4px; white-space: nowrap; }

/* Inactive rail icons share one lighter grey, Settings included, so the
   current page is the only dark one. */
.pview__win.pv .pv-side--rail .pv-nav:not(.is-on) { color: var(--grey-500); }
.pview__win.pv .pv-side--rail .pv-nav:not(.is-on) .icon { color: inherit; }

/* Narrow stat cards (about 1024px wide windows): the network logos make way
   for the label, and the footer may take two lines instead of spilling out. */
.pview__win.pv .pv-stat { container-type: inline-size; }
@container (max-width: 230px) {
  .pview__win.pv .pv-stat .pv-logos { display: none; }
  .pview__win.pv .pv-stat-foot { flex-wrap: wrap; white-space: normal; }
}

/* Mid widths (about 1024px): a slimmer rail, and when the main pane is
   narrow the two evidence cards stack so the chart stays readable and the
   chips keep one row. */
@media (min-width: 1021px) and (max-width: 1199px) {
  .pview__win.pv .pv-body { grid-template-columns: 60px minmax(0, 1fr) 280px; }
}
.pview__win.pv .pv-main { container-type: inline-size; }
@container (max-width: 640px) {
  .pview__win.pv .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .pview__win.pv .pv-grid .spark { max-width: 300px; } /* its labels scale with it, so it stops at about 12px text */
}

/* =========================================================================
   BLOBS (9 Oct, after amplemarket.com): soft colour fields that drift slowly
   behind a section's content. Three per section, each on its own path and
   clock, so the motion never visibly repeats. Under the hood, Workflow and
   Customers carry them. Still with reduced motion. */
.has-blobs { position: relative; isolation: isolate; overflow: clip; }
.has-blobs > .padding-global { position: relative; z-index: 1; }
.blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.blobs i {
  position: absolute; width: var(--s); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  filter: blur(30px); will-change: transform;
  animation: blob-a var(--d) ease-in-out infinite alternate;
}
.blobs i:nth-child(1) { --s: clamp(320px, 42vw, 640px); --d: 26s; left: -12%; top: 4%; }
.blobs i:nth-child(2) { --s: clamp(280px, 36vw, 560px); --d: 31s; right: -10%; top: 28%; animation-name: blob-b; animation-delay: -9s; }
.blobs i:nth-child(3) { --s: clamp(260px, 30vw, 480px); --d: 37s; left: 30%; bottom: -22%; animation-name: blob-c; animation-delay: -17s; }
@keyframes blob-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(38%, 18%) scale(1.18); } 100% { transform: translate(14%, -12%) scale(0.92); } }
@keyframes blob-b { 0% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-32%, -20%) scale(0.88); } 100% { transform: translate(-48%, 14%) scale(1.15); } }
@keyframes blob-c { 0% { transform: translate(0, 0) scale(0.95); } 50% { transform: translate(-26%, -30%) scale(1.2); } 100% { transform: translate(30%, -14%) scale(1); } }
/* Light sections: pastel blue, violet and teal. */
.blobs i:nth-child(1) { --c: color-mix(in srgb, var(--blue-500) 22%, transparent); }
.blobs i:nth-child(2) { --c: color-mix(in srgb, var(--violet-200) 50%, transparent); }
.blobs i:nth-child(3) { --c: color-mix(in srgb, var(--teal-200) 50%, transparent); }
/* Dark sections: deeper glows of the same three. */
.section--ground .blobs i:nth-child(1) { --c: color-mix(in srgb, var(--blue-500) 30%, transparent); }
.section--ground .blobs i:nth-child(2) { --c: color-mix(in srgb, var(--violet-400) 30%, transparent); }
.section--ground .blobs i:nth-child(3) { --c: color-mix(in srgb, var(--teal-600) 20%, transparent); }
@media (prefers-reduced-motion: reduce) { .blobs i { animation: none; } }

/* =========================================================================
   UNDER THE HOOD, DARK (9 Oct): the loop on a night card. The ring and the
   pills go dark glass, the chosen stage turns light, and the arc glows in
   the product blue. */
.section--ground .cycle__ring::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-500) 20%, transparent), transparent); }
.section--ground .cycle__base { stroke: color-mix(in srgb, var(--paper) 20%, transparent); }
.section--ground .cycle__arc { stroke: var(--blue-500); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blue-500) 60%, transparent)); }
.section--ground .cycle__dir { color: color-mix(in srgb, var(--paper) 40%, transparent); }
.section--ground .cycle__core {
  border-color: color-mix(in srgb, var(--paper) 12%, transparent);
  background: color-mix(in srgb, var(--paper) 6%, var(--grey-900));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 8%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--black) 70%, transparent);
}
.section--ground .cycle__mark { background: var(--paper); }
.section--ground .cycle__core .cycle__panel h3 { color: var(--paper); }
.section--ground .cycle__core .cycle__panel > p { color: color-mix(in srgb, var(--paper) 66%, transparent); }
.section--ground .cycle__count { color: color-mix(in srgb, var(--paper) 50%, transparent); }
.section--ground .cycle__progress i { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.section--ground .cycle__progress i::after { background: var(--blue-500); }
.section--ground .cycle__st {
  border-color: color-mix(in srgb, var(--paper) 12%, transparent);
  background: color-mix(in srgb, var(--paper) 7%, var(--grey-900)); color: color-mix(in srgb, var(--paper) 86%, transparent);
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--black) 70%, transparent);
}
.section--ground .cycle__ico { background: color-mix(in srgb, var(--paper) 8%, transparent); color: color-mix(in srgb, var(--blue-500) 55%, var(--paper)); }
.section--ground .cycle__st[aria-selected="true"] { border-color: var(--paper); background: var(--paper); color: var(--grey-900); }
.section--ground .cycle__st[aria-selected="true"] .cycle__ico { background: color-mix(in srgb, var(--blue-500) 14%, var(--paper)); color: var(--blue-600); }
.section--ground .cycle__st:focus-visible { outline-color: var(--paper); }
.section--ground .cycle__gate {
  border-color: color-mix(in srgb, var(--ember-orange) 40%, transparent);
  background: color-mix(in srgb, var(--ember-orange) 14%, var(--grey-900)); color: var(--ember-orange);
}
.section--ground .cycle__gate::after { box-shadow: 0 0 0 3px var(--grey-900); }

/* =========================================================================
   CUSTOMERS (9 Oct): a dark card that runs into the dark footer as one
   block. A featured story with a portrait and two numbers, and two shorter
   stories beside it. Logos are shown in white. */
.section.tst { background: var(--grey-900); color: var(--paper); }
.tst__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.tst__card {
  display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 28px;
  border: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); border-radius: 20px;
  background: color-mix(in srgb, var(--paper) 5%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tst__card--lead { grid-row: span 2; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 0; padding: 0; overflow: clip; }
.tst__body { display: flex; flex-direction: column; gap: 22px; padding: 32px; }
.tst__photo { display: block; width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.tst__ph {
  display: grid; place-items: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--blue-500) 34%, var(--grey-900)), color-mix(in srgb, var(--violet-400) 30%, var(--grey-900)));
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.03em; color: color-mix(in srgb, var(--paper) 72%, transparent);
}
.tst__photo.tst__ph { font-size: 64px; }
.tst__logo { display: block; align-self: flex-start; width: auto; height: 20px; filter: brightness(0) invert(1); opacity: 0.88; }
.tst blockquote { margin: 0; }
.tst blockquote p { margin: 0; font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--paper) 84%, transparent); }
.tst__card--lead blockquote p { font-family: var(--font-display); font-size: 24px; line-height: 1.35; letter-spacing: -0.015em; color: var(--paper); }
.tst__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: auto 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); }
.tst__nums b { display: block; font-family: var(--font-display); font-size: 32px; font-weight: 400; line-height: 1.1; letter-spacing: -0.04em; color: var(--paper); }
.tst__nums span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--paper) 60%, transparent); }
.tst figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tst__card--lead figcaption { display: block; margin-top: 0; }
.tst figcaption b { display: block; font-size: 15px; font-weight: 600; color: var(--paper); }
.tst figcaption span:not(.tst__avatar) { display: block; font-size: 14px; color: color-mix(in srgb, var(--paper) 60%, transparent); }
.tst__who { display: block; }
.tst__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; font-size: 15px; }
.tst__avatar.tst__ph { display: grid; }
/* Into the footer: no gap, no radius where they meet, one hairline. */
.section.tst { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 2px 0 var(--grey-900); } /* the shadow covers the half-pixel seam where they meet */
main:has(> .tst) + footer.footer { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
main:has(> .tst) + footer.footer .site-footer__top { border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); }
@media (max-width: 900px) {
  .tst__grid { grid-template-columns: minmax(0, 1fr); }
  .tst__card--lead { grid-row: auto; grid-template-columns: minmax(0, 1fr); }
  .tst__photo { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .tst__card:not(.tst__card--lead), .tst__body { padding: 22px; }
  .tst__card--lead blockquote p { font-size: 20px; }
  .tst__nums b { font-size: 28px; }
}

/* Connections access note (9 Oct): three short points centred under the
   diagram, in place of a one-line footnote at the left. */
.net-note {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px;
  margin: 32px 0 0; padding: 0; list-style: none;
  font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--paper) 64%, transparent);
}
.net-note li { display: inline-flex; align-items: center; gap: 8px; --icon-size: 16px; }
.net-note .icon { color: color-mix(in srgb, var(--blue-500) 55%, var(--paper)); }
@media (max-width: 560px) { .net-note { flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; } }

/* =========================================================================
   TYPE SCALE (9 Oct). Even sizes only. Desktop steps: 48 (h1, big stats),
   36 (h2), 32 (quote, numbers), 24 (h3, featured quote), 18 (ledes, FAQ,
   h4), 16 (body, eyebrows), 14 (captions, pills, small print), 12 (ring
   detail). Phones (up to 560px) step each one down: 48 to 36, 36 to 28,
   32 to 24, 24 to 20, 18 to 16, 16 stays 16, 14 stays 14 (small print 12),
   12 stays 12. The product window keeps its own scale. */
.section-head p.eyebrow, .faq__head p.eyebrow, .problem p.eyebrow, .eyebrow { font-size: 16px; }
.stat b { font-size: 48px; }
.quote__fig blockquote p { font-size: 32px; }
.pcard__value { font-size: 32px; }
.pcard__top, .pcard__label, .pcard__note, .prob__chip { font-size: 12px; }
.faq__item summary { font-size: 18px; }
.hero2__lede, .problem__lede { font-size: 18px; }
.stat span, .cycle__st, .ixs__head, .fitx__points p, .quote__who, .tst figcaption b { font-size: 14px; }
.hero3__logos-label, .site-footer__bar .site-footer__copy { font-size: 14px; }
.cycle__core .cycle__panel > p, .cycle__core .cycle__count, .cycle__gate { font-size: 12px; }
@media (max-width: 1199px) { .pcard__value { font-size: 24px; } }
@media (max-width: 560px) {
  .hero2__title { font-size: 36px; }
  .stat b { font-size: 36px; }
  .section-head h2, .problem h2, .faq__head h2, .site-footer .site-footer__cta h2.site-footer__title { font-size: 28px; }
  .quote__fig blockquote p { font-size: 24px; }
  .tst__nums b { font-size: 24px; }
  h3, .section .fitx .fitx__panel .fitx__lead h3, .section .ixs .ixs__card .ixs__copy h3, .section .cycle .cycle__panel h3 { font-size: 20px; }
  .cycle__core .cycle__panel h3 { font-size: 20px; }
  .tst__card--lead blockquote p { font-size: 20px; }
  .pcard__value { font-size: 20px; }
  .pcard__top, .pcard__label, .pcard__note, .prob__chip { font-size: 10px; }
  .faq__item summary, .hero2__lede, .problem__lede, .fitx__points h4 { font-size: 16px; }
  .fitx__label { font-size: 14px; }
  .cycle__st { font-size: 12px; }
  .hero2__pill { font-size: 12px; }
  .quote__who small, .hero3__logos-label, .site-footer__bar .site-footer__copy { font-size: 12px; }
}
/* The last odd sizes: header wordmark 19 to 18, header button 15 to 14,
   avatar initials 15 to 14. */
.site-header .wordmark__text { font-size: 18px; }
.site-header .site-actions .btn { font-size: 14px; }
.tst__avatar { font-size: 14px; }
/* The counting number sits in a span inside the stat's <b>, so it must not
   take the caption style meant for the stat's own <span>. */
.stat b span { max-width: none; font-size: inherit; line-height: inherit; color: inherit; }

/* Network nodes, redesigned (9 Oct): dark glass cards on the night card,
   each logo on a small white tile so it keeps its own colours, a line of
   detail under the name, and a green dot for a live connection. The hub
   sits inside two faint orbits instead of a dashed halo. Sizes are in
   viewBox units: at full width (980px for 760 units) 12.4 renders at 16px
   and 10.85 at 14px. */
.net .net-node { fill: color-mix(in srgb, var(--paper) 6%, var(--grey-900)); stroke: color-mix(in srgb, var(--paper) 12%, transparent); stroke-width: 1; }
.net .net-tile { fill: var(--white); }
.net .net-name { fill: var(--paper); font-size: 12.4px; font-weight: 500; }
.net .net-sub { fill: color-mix(in srgb, var(--paper) 55%, transparent); font-size: 10.85px; }
.net .net-live { fill: var(--ill-jade); }
.net .net-hub { fill: var(--paper); }
.net .net-name--hub { fill: var(--grey-900); font-size: 10.85px; font-weight: 600; }
.net .net-orbit { fill: none; stroke: color-mix(in srgb, var(--paper) 7%, transparent); stroke-width: 1; }
.net .net-orbit--in { fill: color-mix(in srgb, var(--blue-500) 10%, transparent); stroke: color-mix(in srgb, var(--paper) 12%, transparent); }
.net .net-ring { stroke: var(--grey-900); stroke-width: 1.4; }
.net .net-dsp { fill: var(--grey-900); }

/* The loop (9 Oct): no counter and no progress bar. cycle.js moves the arc
   and a glowing head round the ring frame by frame, so the arc has no CSS
   transition of its own. */
.cycle.is-js .cycle__arc { transition: none; }
.cycle__head { fill: var(--pixel-green); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--pixel-green) 60%, transparent)); }
.section--ground .cycle__head { fill: var(--white); filter: drop-shadow(0 0 6px var(--blue-500)) drop-shadow(0 0 2px var(--blue-500)); }
.cycle:not(.is-js) .cycle__head { display: none; }
.cycle__core > .cycle__panel { align-self: center; }

/* Ring text on phones: 14px for the stage pills and the centre text. */
@media (max-width: 560px) {
  .cycle__st { font-size: 14px; }
  .cycle__core .cycle__panel > p { font-size: 14px; max-width: 18ch; }
}

/* One family for the whole site: the footer and the header button were in
   Inter and Instrument Sans. */
footer.footer, footer.footer :is(h2, p, a, li, input, button, small, span),
.site-header .site-actions .btn { font-family: var(--font-display); }  /* Hanken Grotesk */

/* =========================================================================
   LIGHT FOOTER (9 Oct): the footer is a white card on the paper page, with
   a hairline edge, dark text and the blue primary button, like the hero
   card. The Customers section that ran into it is in a template, and the
   header no longer turns dark over it. */
footer.footer {
  --ground: var(--white);
  --heading: var(--grey-900);
  --ink: var(--grey-700);
  --ink-muted: var(--grey-600);
  --line: color-mix(in srgb, var(--grey-900) 10%, var(--white));
  --mark: var(--grey-900);
  color-scheme: light;
  margin-top: clamp(56px, 7vw, 96px);
  border: 1px solid var(--calm-line); border-radius: var(--card-radius);
  background: var(--white); color: var(--grey-700);
}
.site-footer .site-footer__cta h2.site-footer__title { color: var(--grey-900); }
.site-footer__lede { color: var(--grey-600); }
.site-footer__cta .hero2__form { background: var(--white); border-color: color-mix(in srgb, var(--grey-900) 12%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent); }
.site-footer__cta .hero2__form:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-500) 14%, transparent); }
.site-footer__cta .hero2__form input { color: var(--grey-900); }
.site-footer__cta .hero2__form input::placeholder { color: var(--grey-500); }
.site-footer__cta .btn--brand { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.site-footer__cta .btn--brand:hover { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }
.site-footer__cta .hero2__done { background: color-mix(in srgb, var(--grey-900) 3%, var(--white)); border-color: var(--calm-line); color: var(--grey-900); }
footer.footer .site-footer__cols h2 { color: var(--grey-500); }
footer.footer .site-footer__cols a { color: var(--grey-700); }
footer.footer .site-footer__cols a:is(:hover, :focus-visible) { color: var(--grey-900); }
footer.footer .site-footer__top { border-top: 0; }
footer.footer .site-footer__bar { border-top-color: var(--calm-line); }
.site-footer__bar .wordmark { color: var(--grey-900); }
footer.footer .site-footer__legal a { color: var(--grey-600); }
footer.footer .site-footer__legal a:is(:hover, :focus-visible) { color: var(--grey-900); }
.site-footer__bar .site-footer__copy { color: var(--grey-500); }

/* =========================================================================
   WORKFLOW WINDOWS (9 Oct): Ask AdPilot and the Activity log are now the
   same product as the Monday brief window (top bar, Headspace workspace,
   icon rail, Inter, soft cards), each with its own page open. They use
   the .pview__win.pv styles; what follows is their frame inside the card
   and the parts only they have. */
.ixs__shot > .pvx {
  aspect-ratio: auto; height: calc(100% - 44px); width: calc(100% + 24px);
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--calm-line); border-radius: 12px 0 0 0; background: var(--white);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent), 0 24px 48px -24px color-mix(in srgb, var(--grey-900) 30%, transparent);
}
.pvx .pv-body { grid-template-columns: 60px minmax(0, 1fr); min-height: 0; }
.pvx .pv-main { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.pvx .pv-greet { margin: 0; }
.pvx .pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pvx .pv-btn--primary .icon { color: var(--white); }
.pvx :is(.pvx-a, .pvx-rows) { box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent), 0 1px 3px color-mix(in srgb, var(--grey-900) 4%, transparent); }

/* Ask: a question, an answer card with its evidence and two moves,
   suggested follow-ups and the composer. */
.pvx-q { align-self: flex-end; display: flex; align-items: flex-end; gap: 8px; }
.pvx-q p { margin: 0; padding: 8px 12px; border-radius: 12px 12px 4px 12px; background: color-mix(in srgb, var(--grey-900) 5%, var(--white)); font-size: 12px; color: var(--grey-900); }
.pvx-me { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.pvx-a { display: grid; gap: 10px; max-width: 560px; padding: 12px; }
.pvx-a-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--grey-900); }
.pvx-a-top .pv-brandmark { width: 14px; height: 14px; }
.pvx-src { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 8px; border: 1px solid var(--pvb-soft); border-radius: 999px; color: var(--grey-600); --icon-size: 12px; }
.pvx-txt { margin: 0; font-size: 12px; line-height: 1.55; color: var(--grey-700); }
.pvx-txt b { font-weight: 600; color: var(--grey-900); }
.pvx-table { border: 1px solid var(--pvb-soft); border-radius: 8px; overflow: hidden; }
.pvx-table > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; font-size: 12px; }
.pvx-table > div + div { border-top: 1px solid var(--pvb-soft); }
.pvx-table span { display: inline-flex; align-items: center; color: var(--grey-700); }
.pvx-table b { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--grey-600); font-variant-numeric: tabular-nums; --icon-size: 12px; }
.pvx-table b.pvx-bad, .pvx-table b.pvx-bad .icon { color: var(--pv-alert); }
.pvx-acts { display: flex; gap: 8px; }
.pvx-follow { display: flex; flex-wrap: wrap; gap: 6px; }
.pvx-follow span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--pvb); border-radius: 999px; font-size: 12px; color: var(--grey-700); --icon-size: 12px; }
.pvx-follow .icon { color: var(--blue-500); }
.pvx-box {
  display: flex; align-items: center; gap: 8px; max-width: 560px; margin-top: auto; padding: 6px 6px 6px 12px;
  border: 1px solid var(--pvb); border-radius: 12px; background: var(--white); font-size: 12px; color: var(--grey-500);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent); --icon-size: 14px;
}
.pvx-send { display: grid; place-items: center; width: 26px; height: 26px; margin-left: auto; border-radius: 8px; background: var(--blue-500); }
.pvx-send .icon { color: var(--white); }

/* Activity log: a segmented filter and the change table. */
.pvx-seg { align-self: flex-start; display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: color-mix(in srgb, var(--grey-900) 5%, var(--white)); }
.pvx-seg span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--grey-600); }
.pvx-seg .is-on { background: var(--white); color: var(--grey-900); box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 10%, transparent); }
.pvx-seg i { font-style: normal; color: var(--grey-500); }
.pvx-rows { padding: 0; overflow: hidden; }
.pvx-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 136px 64px 60px; align-items: center; gap: 12px; padding: 8px 12px; font-size: 12px; }
.pvx-row + .pvx-row { border-top: 1px solid var(--pvb-soft); }
.pvx-row--head { padding-block: 7px; background: color-mix(in srgb, var(--grey-900) 2.5%, var(--white)); font-weight: 500; color: var(--grey-500); }
.pvx-row.is-hot { background: color-mix(in srgb, var(--blue-500) 4%, var(--white)); }
.pvx-what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pvx-what .pv-logo { width: 16px; height: 16px; margin: 0; }
.pvx-what > span { min-width: 0; }
.pvx-what b, .pvx-what small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.pvx-what b { font-weight: 600; color: var(--grey-900); }
.pvx-what small { color: var(--grey-500); }
.pvx-by { display: inline-flex; align-items: center; gap: 5px; color: var(--grey-700); --icon-size: 13px; }
.pvx-by img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.pvx-by--auto .icon { color: var(--pixel-green); }
.pvx-by--learn .icon { color: var(--blue-500); }
.pvx-by--draft .icon { color: var(--violet-400); }
.pvx-res { color: var(--grey-600); }
.pvx-res.is-good { font-weight: 500; color: var(--pixel-green); }
.pvx-row time { color: var(--grey-500); font-variant-numeric: tabular-nums; }
.pvx-go { justify-self: end; }
.pv-btn.pvx-mini { padding: 3px 8px; font-size: 12px; --icon-size: 12px; }
.pvx-foot { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--grey-500); --icon-size: 13px; }
.ixs__card--log .ixs__shot > .pvx { width: calc(100% + 24px); }

/* Phones: the window keeps its desktop layout, scaled down to fit. */
@media (max-width: 860px) {
  .ixs__shot > .pvx, .ixs__card--log .ixs__shot > .pvx { top: 16px; left: 16px; width: 760px; height: 640px; zoom: 0.56; }
}

/* Ring beam (9 Oct, v3): a comet in place of the arc. A conic gradient
   (clear, then blue, then a white head at the top) is masked down to the
   ring's line and turned by cycle.js. The glow sits on the outer element,
   because a mask would cut off a filter on the same element. */
.cycle.is-js .cycle__arc { display: none; }
.cycle__beam { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blue-500) 80%, transparent)); }
.cycle__beam i {
  --rp: calc(var(--r) * 2);
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg 230deg,
    color-mix(in srgb, var(--blue-500) 25%, transparent) 290deg,
    var(--blue-500) 345deg,
    var(--white) 359.5deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(var(--rp) - 1%), var(--black) calc(var(--rp) - 0.45%), var(--black) calc(var(--rp) + 0.45%), transparent calc(var(--rp) + 1%));
          mask: radial-gradient(closest-side, transparent calc(var(--rp) - 1%), var(--black) calc(var(--rp) - 0.45%), var(--black) calc(var(--rp) + 0.45%), transparent calc(var(--rp) + 1%));
}
.cycle:not(.is-js) .cycle__beam { display: none; }
.section--ground .cycle__head { r: 4; }

/* Eyebrows at 20px (18 on phones). */
.section-head p.eyebrow, .faq__head p.eyebrow, .problem p.eyebrow, .eyebrow { font-size: 20px; }
@media (max-width: 560px) { .section-head p.eyebrow, .faq__head p.eyebrow, .problem p.eyebrow, .eyebrow { font-size: 18px; } }
/* Fit inside the card: the window runs 24px past the card's right edge,
   so its content keeps clear of that strip; no date in the top bar; the
   log's rows are a little tighter so all five show. */
.pvx .pv-top { padding-right: 36px; }
.pvx .pv-date { display: none; }
.pvx .pv-search { flex: 1 1 auto; max-width: 300px; margin-left: auto; }
.pvx .pv-main { gap: 10px; padding-right: 36px; }
.pvx--log .pv-sub { display: none; }
.pvx .pvx-row { padding-block: 6px; }
.pvx .pvx-row--head { padding-block: 6px; }
.pview__win.pvx .pv-main { padding-right: 36px; }
.pvx-hdr-r { display: flex; align-items: center; gap: 8px; }
.pvx--log .pv-greet { align-items: center; }
/* Phones: the scaled window keeps its rail, workspace and divider (the
   phone rules for the Monday brief window hide them). */
@media (max-width: 760px) {
  .pvx .pv-body { grid-template-columns: 60px minmax(0, 1fr); }
  .pvx .pv-side { display: flex; }
  .pvx .pv-ws { display: inline-flex; }
  .pvx .pv-vr { display: block; }
}
/* Two columns at every width: the Monday brief window's tablet rule adds a
   third (rail) column these windows don't have. */
.pview__win.pv.pvx .pv-body { grid-template-columns: 60px minmax(0, 1fr); }
@media (max-width: 860px) {
  .ixs__shot > .pvx, .ixs__card--log .ixs__shot > .pvx { width: 620px; }
  .pview__win.pvx .pv-main, .pvx .pv-top { padding-right: 16px; }
}
@media (max-width: 860px) {
  .pvx-row { grid-template-columns: minmax(0, 1fr) 96px 64px 60px; }
  .pvx-row > .pvx-res, .pvx-row--head > span:nth-child(3) { display: none; }
}

/* Hero art, after the TBSP index-v2 hero (9 Oct): the meadow runs edge to
   edge inside the card and is pulled up behind the copy, fading in from
   clear so the lede and the email form sit on its sky. A wide crop keeps
   the whole hero, logo strip included, within one screen. The form moved
   up under the lede; the earlier art block is in template hero-art-v1. */
.hero3__copy { position: relative; z-index: 1; }
.hero3__ask { width: 100%; padding: 28px 0 0; }
.hero3__art {
  margin: -200px 0 0; aspect-ratio: 1372 / 520; border-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--black) 15%, transparent) 22%, color-mix(in srgb, var(--black) 55%, transparent) 40%, var(--black) 62%);
          mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--black) 15%, transparent) 22%, color-mix(in srgb, var(--black) 55%, transparent) 40%, var(--black) 62%);
}
.hero3__img { -webkit-mask-image: none; mask-image: none; object-position: 50% 80%; }
@media (max-width: 760px) {
  .hero3__art {
    margin: -48px 0 0; aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--black) 45%);
            mask-image: linear-gradient(to bottom, transparent 0%, var(--black) 45%);
  }
  .hero3__img { object-position: 50% 90%; }
  .hero3__ask { padding-top: 24px; }
}

/* Footer navigation (9 Oct): every header link, in five columns under the
   call to action, so the footer works as a site map. */
footer.footer .site-footer__top { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
.site-footer__cols--full { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; padding-top: 40px; border-top: 1px solid var(--calm-line); }
.site-footer__cols--full ul { gap: 12px; }
footer.footer .site-footer__cols--full a { font-size: 14px; line-height: 1.4; }
@media (max-width: 900px) { .site-footer__cols--full { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .site-footer__cols--full { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }

/* Hero height (9 Oct): the meadow is cut down and sized to the screen, so
   the logo wall always shows in the first view, with room under it. The
   art takes what is left of the screen after the copy, between 220 and
   380px tall. */
.hero3__art { aspect-ratio: auto; height: clamp(220px, calc(100svh - 470px), 380px); }
.hero3__img { object-position: 50% 72%; }
@media (max-width: 760px) {
  .hero3__art { height: clamp(160px, calc(100svh - 640px), 220px); }
  .hero3__img { object-position: 50% 85%; }
}
@media (max-width: 760px) {
  footer.footer .site-footer__cols--full a { padding-block: 6px; }
  .site-footer__cols--full ul { gap: 2px; }
  .site-footer__cols--full h2 { margin-bottom: 8px; }
}

/* Logo wall hover (9 Oct): hover only slows the marquee (adpilot.js). The
   logos stay grey and still; no colour pop. */
.logowall__item:hover img { filter: grayscale(1) brightness(0); opacity: 0.5; }

/* Footer, after voiceflow.com (9 Oct): the call to action and email on the
   left, the link columns on the right, and a bottom bar with the wordmark
   and copyright, the legal links lined up with the first column, and the
   social links at the far right. */
footer.footer .site-footer__top {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr); column-gap: 64px; row-gap: 48px;
  padding-bottom: 56px;
}
.site-footer__cols--full { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; padding-top: 0; border-top: 0; }
footer.footer .site-footer__cols--full h2 { margin-bottom: 16px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--grey-500); }
footer.footer .site-footer__cols--full a { color: var(--grey-900); }
footer.footer .site-footer__cols--full a:is(:hover, :focus-visible) { color: var(--blue-600); }
footer.footer .site-footer__bar { border-top: 0; }
footer.footer .site-footer__bar .container {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr) auto; column-gap: 64px; row-gap: 12px; align-items: center;
  padding-top: 32px; padding-bottom: 32px; border-top: 1px solid var(--calm-line);
}
footer.footer .site-footer__bar .wordmark { grid-column: 1; grid-row: 1; }
footer.footer .site-footer__bar .site-footer__legal { grid-column: 2; grid-row: 1; justify-self: start; display: flex; gap: 24px; margin: 0; font-size: 14px; }
footer.footer .site-footer__bar .site-footer__social { grid-column: 3; grid-row: 1; display: flex; gap: 20px; margin: 0; }
.site-footer__social a { display: grid; place-items: center; color: var(--grey-600); --icon-size: 20px; }
.site-footer__social a:is(:hover, :focus-visible) { color: var(--grey-900); }
footer.footer .site-footer__bar .site-footer__copy { grid-column: 1 / -1; grid-row: 2; margin: 0; }
@media (max-width: 1199px) {
  footer.footer .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer__cols--full { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  footer.footer .site-footer__bar .container { grid-template-columns: auto minmax(0, 1fr) auto; }
  footer.footer .site-footer__bar .site-footer__legal { justify-self: center; }
}
@media (max-width: 900px) { .site-footer__cols--full { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .site-footer__cols--full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer.footer .site-footer__bar .container { grid-template-columns: minmax(0, 1fr) auto; }
  footer.footer .site-footer__bar .site-footer__social { grid-column: 2; }
  footer.footer .site-footer__bar .site-footer__legal { grid-column: 1 / -1; grid-row: 2; justify-self: start; flex-wrap: wrap; gap: 8px 20px; }
  footer.footer .site-footer__bar .site-footer__copy { grid-row: 3; }
}
/* "3 hr 30 min" needs room at 48px: the stat cards go two across below
   1200px, and the number never wraps. */
.stat b [data-count] { white-space: nowrap; }
@media (max-width: 1199px) and (min-width: 561px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Wide screens: each link column as wide as its longest link, spread
   across the space, so no label wraps. */
@media (min-width: 901px) {
  .site-footer__cols--full { grid-template-columns: repeat(5, max-content); justify-content: space-between; column-gap: 32px; }
}
footer.footer .site-footer__copy a { color: var(--grey-700); text-decoration: underline; text-decoration-color: var(--calm-line); text-underline-offset: 3px; }
footer.footer .site-footer__copy a:is(:hover, :focus-visible) { color: var(--grey-900); text-decoration-color: currentColor; }
footer.footer .site-footer__copy a { font-size: inherit; }

/* Footer social logos (9 Oct): the supplied LinkedIn, Behance and Dribbble
   marks, drawn as masks so they take the link colour like the Phosphor globe
   beside them (grey, darker on hover). Files in assets/img/logos/social. */
.soc { display: block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.soc--linkedin { --m: url(../img/logos/social/linkedin.svg); width: 18px; height: 18px; }
.soc--behance  { --m: url(../img/logos/social/behance.svg); width: 22px; }
.soc--dribbble { --m: url(../img/logos/social/dribbble.svg); width: 18px; height: 18px; }
.site-footer__social { align-items: center; }

/* Footer legal links at 14px; no gap above the footer. */
footer.footer .site-footer__legal a { font-size: 14px; }
footer.footer { margin-top: 0; }

/* Hero fills the screen (9 Oct): the card, logo wall included, is exactly
   the viewport less the page inset above and below. The meadow takes
   whatever height is left after the copy and the logo wall (200px at the
   least), so the logo wall always sits on the bottom edge of the first
   view. Replaces the fixed 220 to 380px art height. */
.hero3__card { display: flex; flex-direction: column; min-height: calc(100svh - 2 * var(--inset)); }
.hero3__art { flex: 1 1 auto; height: auto; min-height: 200px; }
.hero3__logos { flex: none; }
@media (max-width: 760px) { .hero3__art { height: auto; min-height: 160px; } }

/* Section reveal (9 Oct): adpilot.js marks each section's blocks .rv and
   adds .is-in as they scroll into view. They rise 24px and fade in over
   700ms, a beat apart (--rv-d). Uses the translate property so it never
   fights a block's own transform. */
.rv-on .rv {
  opacity: 0; translate: 0 24px;
  transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--rv-d, 0ms), translate 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--rv-d, 0ms);
}
.rv-on .rv.is-in { opacity: 1; translate: 0 0; }

/* Product window on phones (9 Oct): a scaled-down picture of the desktop
   window (assets/img/product/monday-brief.webp, captured at 2x) instead of
   the live window reflowed into one long column. */
.pview__shot { display: none; }
@media (max-width: 760px) {
  .pview > .pview__win { display: none; }
  .pview__shot {
    display: block; width: 100%; height: auto; border-radius: 10px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--white) 45%, transparent), 0 0 0 5px color-mix(in srgb, var(--grey-900) 6%, transparent), 0 24px 48px -24px color-mix(in srgb, var(--grey-900) 35%, transparent);
  }
}

/* Workflow cards: no picture behind the windows. */
.ixs__shot::before { display: none; }

/* Footer: the social links sit under the email form; the legal links take
   their place at the right of the bottom bar. */
.site-footer__cta .site-footer__social { display: flex; align-items: center; gap: 20px; margin: 28px 0 0; }
footer.footer .site-footer__bar .container { grid-template-columns: minmax(0, 1fr) auto; }
footer.footer .site-footer__bar .site-footer__legal { grid-column: 2; grid-row: 1; justify-self: end; }
@media (max-width: 1199px) { footer.footer .site-footer__bar .container { grid-template-columns: minmax(0, 1fr) auto; } footer.footer .site-footer__bar .site-footer__legal { justify-self: end; } }
@media (max-width: 560px) {
  footer.footer .site-footer__bar .container { grid-template-columns: minmax(0, 1fr); }
  footer.footer .site-footer__bar .site-footer__legal { grid-column: 1; grid-row: 2; justify-self: start; }
  footer.footer .site-footer__bar .site-footer__copy { grid-row: 3; }
}

/* Phone hero (9 Oct): headline and lede balanced so no line is left with
   one word, a little less air, and the email form stacked: a full-width
   field over a full-width button. */
@media (max-width: 560px) {
  .hero3__card { padding-top: 104px; }
  .hero2__title { text-wrap: balance; }
  .hero2__title span { display: block; }
  .hero2__lede { margin-top: 16px; text-wrap: pretty; }
  .hero3__ask { padding-top: 24px; }
  .hero3__ask .hero2__form { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: 16px; }
  .hero3__ask .hero2__form input { width: 100%; min-height: 44px; padding-inline: 12px; }
  .hero3__ask .hero2__form .btn { width: 100%; min-height: 44px; justify-content: center; }
}
@media (max-width: 560px) { .hero3__ask .hero2__form input, .hero3__ask .hero2__form .btn { flex: none; } }

/* =========================================================================
   GLIDE LOGO (9 Oct): a paper plane in two folds, the brief in ink and the
   move in product blue (chosen from brief/logo-options.html).
   assets/img/brand/mark.svg is now the whole plane, so every mask that used the
   old triangle draws the plane in its text colour. The marks that carry
   the brand (header and footer wordmark, the product window's brand mark)
   add the blue fold on top from mark-fold.svg. The old triangle is kept as
   archive/unused/img/mark-triangle.svg. */
.wordmark__mark, .pv-brandmark, .cycle__mark { position: relative; }
.wordmark__mark::after, .pv-brandmark::after {
  content: ''; position: absolute; inset: 0; background: var(--blue-500);
  -webkit-mask: url(../img/brand/mark-fold.svg) center / contain no-repeat;
          mask: url(../img/brand/mark-fold.svg) center / contain no-repeat;
}
.wordmark__mark { width: 1.2em; height: 1.2em; }
.net .net-mark-fold { fill: var(--blue-500); }

/* Slack card avatar (9 Oct): the Glide mark on the blue tile, as the app
   icon: the plane in white with its fold in ink. */
.slack__av--brand { position: relative; background: var(--blue-500); }
.slack__av--brand i { position: relative; width: 1.7em; height: 1.7em; background: var(--white); -webkit-mask: url(../img/brand/mark.svg) center / contain no-repeat; mask: url(../img/brand/mark.svg) center / contain no-repeat; }
.slack__av--brand i::after { content: ''; position: absolute; inset: 0; background: var(--grey-900); -webkit-mask: url(../img/brand/mark-fold.svg) center / contain no-repeat; mask: url(../img/brand/mark-fold.svg) center / contain no-repeat; }
img.quote__brand--headspace { height: 22px; }

/* =========================================================================
   CAPABILITIES (9 Oct): "One system for the whole loop". A Built for row,
   then five tiles, one per stage of the loop, each with a small product
   visual in the product's own type (Inter). Watch and Make are the large
   tiles: competitor signals and the creative drafted from them. */
.built { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; padding: 0; list-style: none; }
.built li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start; padding: 16px; border: 1px solid var(--calm-line); border-radius: 14px; background: color-mix(in srgb, var(--white) 60%, transparent); --icon-size: 18px; }
.built .icon { grid-row: span 2; margin-top: 1px; color: var(--blue-500); }
.built b { font-size: 16px; font-weight: 500; color: var(--grey-900); }
.built span { font-size: 14px; line-height: 1.45; color: var(--grey-600); }

.caps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cap { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--calm-line); border-radius: 20px; background: var(--white); }
.cap--watch, .cap--make { grid-column: span 4; }
.cap--decide, .cap--act { grid-column: span 2; }
.cap--learn { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 40px; align-items: center; }
.cap--learn .cap__vis { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
.cap__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cap__stage { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--blue-500) 9%, var(--white)); font-size: 14px; font-weight: 500; color: var(--blue-700); --icon-size: 14px; }
.cap__caps { font-size: 14px; color: var(--grey-500); }
.cap h3 { margin: 16px 0 0; }
.cap > p { margin: 8px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.55; color: var(--grey-600); }
.cap__vis {
  margin-top: 24px; padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--grey-900) 3%, var(--white));
  font-family: "Inter", system-ui, sans-serif; font-size: 12px; color: var(--grey-700); letter-spacing: -0.006em;
}
.cap__vis .icon { --icon-size: 14px; }
.cap__vis b { font-weight: 600; color: var(--grey-900); }
.cap__vis small { display: block; font-size: 12px; color: var(--grey-500); }

/* Watch: the competitor feed. */
.cw { display: grid; gap: 8px; }
.cw__head { display: flex; align-items: center; gap: 6px; padding-bottom: 4px; }
.cw__head span { margin-left: auto; color: var(--grey-500); }
.cw__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 56px 52px; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--white); box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent); }
.cw__av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--blue-500) 70%, var(--violet-400)); font-style: normal; font-weight: 600; color: var(--white); }
.cw__av--fmt { background: var(--grey-900); }
.cw__av .icon { color: var(--white); }
.cw__bars { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.cw__bars i { flex: 1; height: var(--h); min-height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--grey-900) 14%, transparent); }
.cw__bars i:last-child { background: var(--blue-500); }
.cw__row em { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; font-style: normal; font-weight: 600; color: var(--pixel-green); --icon-size: 12px; }
.cw__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--blue-500) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--blue-500) 5%, var(--white)); }
.cw__go > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--grey-900); }
.cw__go .icon { color: var(--blue-500); }
.cw__btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; background: var(--blue-500); font-weight: 500; color: var(--white); }
.cw__btn .icon { color: var(--white); --icon-size: 12px; }

/* Decide: the move and its signal. */
.cd { display: grid; justify-items: start; gap: 6px; }
.cd__move { display: flex; align-items: center; gap: 8px; }
.cd__net { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--white); box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 6%, transparent); font-weight: 500; color: var(--grey-900); }
.cd__arrow { display: grid; color: var(--grey-500); }
.cd__amt { margin-top: 8px; font-family: "Inter", system-ui, sans-serif; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.cd__why { color: var(--grey-600); }
.cd__sig { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ill-flame) 10%, var(--white)); color: color-mix(in srgb, var(--ill-flame) 72%, var(--grey-900)); }
.cd__sig .icon { color: inherit; }

/* Make: three drafted variations, phone-shaped. */
.cm__set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cm__ad { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 9 / 13; margin: 0; padding: 12px; overflow: hidden; border-radius: 12px; color: var(--white); }
.cm__ad b { position: relative; font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--white); }
.cm__ad--a { background: linear-gradient(160deg, var(--violet-400), color-mix(in srgb, var(--violet-800) 80%, var(--grey-900))); }
.cm__ad--b { background: linear-gradient(160deg, var(--teal-500), color-mix(in srgb, var(--teal-900) 85%, var(--grey-900))); }
.cm__ad--c { background: linear-gradient(160deg, color-mix(in srgb, var(--ill-flame) 80%, var(--ill-butter)), color-mix(in srgb, var(--ill-flame) 50%, var(--grey-900))); }
.cm__fmt { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--grey-900) 35%, transparent); font-weight: 500; color: var(--white); --icon-size: 12px; }
.cm__fmt .icon, .cm__play .icon { color: var(--white); }
.cm__cta { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--white); font-weight: 600; color: var(--grey-900); }
.cm__frames { position: absolute; top: 44px; left: 10px; right: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.cm__frames i { aspect-ratio: 3 / 4; border-radius: 4px; background: color-mix(in srgb, var(--white) 22%, transparent); border: 1px solid color-mix(in srgb, var(--white) 35%, transparent); }
.cm__play { position: absolute; top: 50%; left: 50%; translate: -50% -70%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--white) 25%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); --icon-size: 18px; }
.cm__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.cm__foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--grey-600); }
.cm__foot .icon { color: var(--blue-500); }
.cm__acts { display: flex; gap: 6px; }
.cm__btn { padding: 5px 10px; border: 1px solid var(--calm-line); border-radius: 8px; background: var(--white); font-weight: 500; color: var(--grey-900); }
.cm__btn--go { border-color: var(--blue-500); background: var(--blue-500); color: var(--white); }

/* Act: changes made through each network. */
.ca { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ca li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--white); box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 5%, transparent); }
.ca li > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--grey-900) 5%, var(--white)); }
.ca__ok { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ill-jade) 16%, var(--white)); font-weight: 500; color: var(--pixel-green); }

/* Learn: forecast against what was measured. */
.cl__bars { display: grid; gap: 10px; }
.cl__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 96px; align-items: center; gap: 12px; }
.cl__row span { color: var(--grey-500); }
.cl__row i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--grey-900) 22%, transparent) var(--w), color-mix(in srgb, var(--grey-900) 6%, transparent) var(--w)); }
.cl__row--real i { background: linear-gradient(90deg, var(--blue-500) var(--w), color-mix(in srgb, var(--grey-900) 6%, transparent) var(--w)); }
.cl__row b { text-align: right; font-variant-numeric: tabular-nums; }
.cl__note { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--grey-600); }
.cl__note .icon { flex: none; color: var(--blue-500); }

@media (max-width: 1023px) {
  .built { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap--watch, .cap--make, .cap--learn { grid-column: span 2; }
  .cap--decide, .cap--act { grid-column: span 1; }
}
@media (max-width: 640px) {
  .built, .caps { grid-template-columns: minmax(0, 1fr); }
  .cap--watch, .cap--make, .cap--learn, .cap--decide, .cap--act { grid-column: auto; }
  .cap { padding: 20px; }
  .cap--learn { display: flex; }
  .cw__row { grid-template-columns: 28px minmax(0, 1fr) 44px; }
  .cw__bars { display: none; }
  .cm__set { gap: 8px; }
  .cm__ad { padding: 8px; }
  .cm__ad b { font-size: 12px; }
  .cm__fmt { font-size: 10px; padding: 2px 6px; }
  .cl__row { grid-template-columns: 64px minmax(0, 1fr) 84px; }
}
/* Visuals sit on the bottom edge, so tiles in a row line up at the foot. */
.cap > p { margin-bottom: 24px; }
.cap:not(.cap--learn) .cap__vis { margin-top: auto; }
.cap--learn > p { margin-bottom: 0; }
@media (max-width: 640px) {
  .built { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .built li { grid-template-columns: minmax(0, 1fr); padding: 12px; row-gap: 4px; }
  .built .icon { grid-row: auto; }
  .built b { font-size: 14px; }
  .built span { font-size: 12px; }
  .cm__cta { display: none; }
}

/* =========================================================================
   CAPABILITIES, ElevenLabs layout (9 Oct, after the ElevenCreative section
   on elevenlabs.io). A split head (title and button left, paragraph right),
   two big cards where a white product panel floats on a colour field with
   a caption underneath, four small cards whose icon does something small
   and playful on hover, and a customer strip. */
.capx__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; margin-bottom: 40px; text-align: left; }
.capx__head .eyebrow { margin: 0 0 10px; text-align: left; }
.capx__head h2 { margin: 0; }
.capx__head > p { margin: 40px 0 0; max-width: 52ch; font-size: 18px; line-height: 1.55; color: var(--grey-600); }
.capx__btn { margin-top: 24px; border-color: var(--grey-900); background: var(--grey-900); color: var(--paper); }
.capx__btn:hover { background: var(--grey-800); border-color: var(--grey-800); color: var(--paper); }

.capx__big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.capx-card { display: flex; flex-direction: column; overflow: clip; border: 1px solid var(--calm-line); border-radius: 20px; background: var(--white); }
.capx-card__art { position: relative; display: grid; place-items: center; min-height: 360px; padding: 40px 32px; overflow: clip; }
.capx-card--watch .capx-card__art {
  background:
    radial-gradient(60% 70% at 15% 20%, color-mix(in srgb, var(--blue-500) 70%, transparent), transparent 70%),
    radial-gradient(50% 60% at 90% 85%, color-mix(in srgb, var(--violet-400) 80%, transparent), transparent 70%),
    radial-gradient(40% 50% at 80% 10%, color-mix(in srgb, var(--teal-300) 70%, transparent), transparent 70%),
    var(--blue-700);
}
.capx-card--make .capx-card__art {
  background:
    radial-gradient(60% 70% at 85% 15%, color-mix(in srgb, var(--ill-butter) 90%, transparent), transparent 70%),
    radial-gradient(55% 65% at 10% 90%, color-mix(in srgb, var(--violet-400) 70%, transparent), transparent 70%),
    var(--ill-flame);
}
/* Grain over the colour field, as on the reference. */
.capx-card__art::before {
  content: ''; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: overlay; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 30% 40%, var(--white) 0 1px, transparent 1px 3px);
}
.capx-card__art > * { position: relative; width: 100%; max-width: 480px; transition: translate 400ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.capx-card:hover .capx-card__art > * { translate: 0 -4px; }
.capx-card .cw, .capx-card .cm {
  padding: 16px; border-radius: 14px; background: var(--white);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--grey-900) 8%, transparent), 0 24px 48px -20px color-mix(in srgb, var(--grey-900) 45%, transparent);
  font-family: "Inter", system-ui, sans-serif; font-size: 12px; color: var(--grey-700); letter-spacing: -0.006em;
}
.capx-card .cw__row { background: color-mix(in srgb, var(--grey-900) 3%, var(--white)); box-shadow: none; }
.capx-card .cm__ad { aspect-ratio: 9 / 12; }
.capx-card .icon { --icon-size: 14px; }
.capx-card b { font-weight: 600; color: var(--grey-900); }
.capx-card small { display: block; font-size: 12px; color: var(--grey-500); }
.capx-card__cap { display: grid; gap: 4px; padding: 20px 24px 24px; }
.capx-card__cap b { font-size: 16px; font-weight: 500; }
.capx-card__cap span { max-width: 52ch; font-size: 16px; line-height: 1.5; color: var(--grey-600); }

.capx__small { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.capx-mini { display: flex; flex-direction: column; gap: 4px; min-height: 196px; padding: 20px; border: 1px solid var(--calm-line); border-radius: 20px; background: color-mix(in srgb, var(--grey-900) 2.5%, var(--white)); transition: background 240ms ease; }
.capx-mini:hover { background: var(--white); }
.capx-mini__ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: auto; border: 1px solid var(--calm-line); border-radius: 10px; background: var(--white); color: var(--grey-900); --icon-size: 18px; transition: background 240ms ease, border-color 240ms ease, color 240ms ease; }
.capx-mini b { margin-top: 32px; font-size: 16px; font-weight: 500; color: var(--grey-900); }
.capx-mini span { font-size: 14px; line-height: 1.5; color: var(--grey-600); }
.capx-mini:hover .capx-mini__ico { border-color: var(--blue-500); background: var(--blue-500); color: var(--white); }
.capx-mini:hover .capx-mini__ico .icon { color: var(--white); }
/* The small fun: each icon moves in its own way on hover. */
@media (prefers-reduced-motion: no-preference) {
  .capx-mini--budget:hover .icon { animation: capx-drop 700ms cubic-bezier(0.3, 1.6, 0.5, 1); }
  .capx-mini--creative:hover .icon { animation: capx-blink 900ms ease; }
  .capx-mini--act:hover .icon { animation: capx-zap 500ms ease; }
  .capx-mini--learn:hover .icon { animation: capx-grow 800ms cubic-bezier(0.3, 1.6, 0.5, 1); }
}
@keyframes capx-drop { 0% { translate: 0 -10px; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes capx-blink { 0%, 100% { scale: 1 1; } 20% { scale: 1 0.1; } 40% { scale: 1 1; } 60% { scale: 1 0.1; } 80% { scale: 1 1; } }
@keyframes capx-zap { 0%, 100% { rotate: 0deg; } 20% { rotate: -14deg; } 45% { rotate: 12deg; } 70% { rotate: -6deg; } }
@keyframes capx-grow { 0% { scale: 0.6; translate: -3px 3px; } 100% { scale: 1; translate: 0 0; } }

.capx__strip { display: flex; align-items: center; gap: 24px; margin-top: 16px; padding: 16px 16px 16px 24px; border: 1px solid var(--calm-line); border-radius: 20px; background: var(--white); }
.capx__strip-logo { width: auto; height: 22px; }
.capx__strip p { margin: 0; font-size: 16px; color: var(--grey-600); }
.capx__strip p b { font-weight: 500; color: var(--grey-900); }
.capx__strip-btn { margin-left: auto; }

@media (max-width: 1023px) {
  .capx__small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capx-card__art { min-height: 320px; padding: 32px 20px; }
}
@media (max-width: 760px) {
  .capx__head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .capx__head > p { margin-top: 0; font-size: 16px; }
  .capx__big { grid-template-columns: minmax(0, 1fr); }
  .capx__strip { flex-wrap: wrap; gap: 12px; padding: 20px; }
  .capx__strip-btn { margin-left: 0; }
}
@media (max-width: 560px) {
  .capx__small { grid-template-columns: minmax(0, 1fr); }
  .capx-mini { min-height: 0; }
  .capx-mini b { margin-top: 20px; }
  .capx-card__art { min-height: 0; padding: 24px 12px; }
  .capx-card .cw__row { grid-template-columns: 28px minmax(0, 1fr) 44px; }
  .capx-card .cw__bars { display: none; }
  .capx-card .cm__ad b { font-size: 12px; }
}
/* Fixes: no ring "grain" (it showed as moiré); equal art height so the two
   captions line up; small-card titles on one line across the row. */
.capx-card__art::before { display: none; }
.capx-card__art { height: 400px; min-height: 0; }
.capx-mini__ico { margin-bottom: 0; }
.capx-mini b { margin-top: 56px; }
@media (max-width: 1023px) { .capx-card__art { height: 360px; } }
@media (max-width: 560px) { .capx-card__art { height: auto; } .capx-mini b { margin-top: 24px; } }
@media (max-width: 560px) {
  .capx__small { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .capx-mini { padding: 16px; }
  .capx-mini b { margin-top: 16px; font-size: 14px; }
  .capx-mini span { font-size: 12px; }
}

/* Capabilities, revised (9 Oct): the big cards sit on our own pixel art,
   heavily blurred into a colour field (the meadow for competitors, the
   lake for creative), and nothing moves or changes on hover. */
.capx-card__art { background: var(--grey-900); }
.capx-card--watch .capx-card__art, .capx-card--make .capx-card__art { background: var(--grey-900); }
.capx-card__art::before {
  display: block; content: ''; position: absolute; inset: -40px; z-index: 0; opacity: 1; mix-blend-mode: normal;
  background: var(--art) var(--art-pos, 50% 50%) / cover no-repeat;
  filter: blur(18px) saturate(1.15);
}
.capx-card--watch { --art: url(../img/art/hero-pixel.webp); --art-pos: 50% 70%; }
.capx-card--make  { --art: url(../img/art/footer-pixel.webp); --art-pos: 30% 80%; }
.capx-card__art > * { z-index: 1; transition: none; }
.capx-card:hover .capx-card__art > * { translate: none; }
.capx-mini, .capx-mini__ico { transition: none; }
.capx-mini:hover { background: color-mix(in srgb, var(--grey-900) 2.5%, var(--white)); }
.capx-mini:hover .capx-mini__ico { border-color: var(--calm-line); background: var(--white); color: var(--grey-900); }
.capx-mini:hover .capx-mini__ico .icon { color: inherit; animation: none; }
/* Zoom into the colourful foot of each picture: flowers and the tree for
   competitors, lilies, water and reeds for creative. */
.capx-card__art::before { background-size: var(--art-size, cover); filter: blur(16px) saturate(1.35); }
.capx-card--watch { --art-pos: 85% 100%; --art-size: 240% auto; }
.capx-card--make  { --art-pos: 35% 100%; --art-size: 260% auto; }

/* Competitors card, after the ElevenLabs editor card (9 Oct): the picture
   fills the whole card, the product panel is pinned to the top right and
   runs off both edges (only its lower left corner is rounded), and the
   caption sits on the picture in white over a soft dark fade. */
.capx-card--watch { position: relative; }
.capx-card--watch .capx-card__art { flex: 1; height: auto; min-height: 500px; display: block; padding: 0; }
.capx-card--watch .capx-card__art::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--grey-900) 62%, transparent));
}
.capx-card--watch .capx-card__art > .cw {
  position: absolute; top: 0; right: 0; left: 48px; z-index: 1; width: auto; max-width: none;
  border-radius: 0 0 0 16px; padding: 20px 24px 20px 20px;
}
.capx-card--watch .capx-card__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 48px 28px; }
.capx-card--watch .capx-card__cap b { color: color-mix(in srgb, var(--white) 78%, transparent); font-weight: 400; }
.capx-card--watch .capx-card__cap span { color: var(--white); }
@media (max-width: 1023px) {
  .capx-card--watch .capx-card__art { min-height: 480px; }
  .capx-card--watch .capx-card__art > .cw { left: 32px; }
  .capx-card--watch .capx-card__cap { padding: 20px 32px 24px; }
}
@media (max-width: 560px) {
  .capx-card--watch .capx-card__art { min-height: 560px; }
  .capx-card--watch .capx-card__art > .cw { left: 20px; padding: 14px; }
  .capx-card--watch .capx-card__cap { padding: 16px 20px 20px; }
}

/* Drafted ads with real photos (9 Oct): each card is a stock photo with a
   colour layer over it (violet, teal, warm), darker at the foot so the
   white headline reads. Photos in assets/img/ads; originals in
   brief/sources/ad-photos (Pexels and Unsplash). */
.cm__ad { background-color: var(--grey-900); background-size: cover; background-position: 50% 30%; }
.cm__ad--a { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--violet-500) 30%, transparent), color-mix(in srgb, var(--violet-900) 85%, transparent)), url(../img/ads/static.jpg); }
.cm__ad--b { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--teal-700) 45%, transparent), color-mix(in srgb, var(--teal-900) 88%, transparent)), url(../img/ads/story.jpg); background-position: 30% 50%; }
.cm__ad--c { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--ill-flame) 25%, transparent), color-mix(in srgb, var(--ill-flame) 40%, var(--grey-900)) 95%), url(../img/ads/video.jpg); }
.cm__frames i { background: var(--grey-900) center / cover no-repeat; border-color: color-mix(in srgb, var(--white) 55%, transparent); }
.cm__frames i:nth-child(1) { background-image: url(../img/ads/frame-1.jpg); }
.cm__frames i:nth-child(2) { background-image: url(../img/ads/frame-2.jpg); }
.cm__frames i:nth-child(3) { background-image: url(../img/ads/frame-3.jpg); }

/* Creative card in the same layout as the competitors card: the picture
   fills the card, the panel is pinned top right and runs off both edges,
   and the caption sits on the picture in white. */
.capx-card--make { position: relative; }
.capx-card--make .capx-card__art { flex: 1; height: auto; min-height: 500px; display: block; padding: 0; }
.capx-card--make .capx-card__art::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--grey-900) 62%, transparent));
}
.capx-card--make .capx-card__art > .cm {
  position: absolute; top: 0; right: 0; left: 48px; z-index: 1; width: auto; max-width: none;
  border-radius: 0 0 0 16px; padding: 20px 24px 20px 20px;
}
.capx-card--make .capx-card__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 48px 28px; }
.capx-card--make .capx-card__cap b { color: color-mix(in srgb, var(--white) 78%, transparent); font-weight: 400; }
.capx-card--make .capx-card__cap span { color: var(--white); }
@media (max-width: 1023px) {
  .capx-card--make .capx-card__art { min-height: 480px; }
  .capx-card--make .capx-card__art > .cm { left: 32px; }
  .capx-card--make .capx-card__cap { padding: 20px 32px 24px; }
}
@media (max-width: 560px) {
  .capx-card--make .capx-card__art { min-height: 480px; }
  .capx-card--make .capx-card__art > .cm { left: 20px; padding: 14px; }
  .capx-card--make .capx-card__cap { padding: 16px 20px 20px; }
}
.capx-card .cm__ad b { color: var(--white); text-shadow: 0 1px 8px color-mix(in srgb, var(--grey-900) 50%, transparent); }
@media (max-width: 560px) { .capx-card--make .capx-card__art { min-height: 400px; } }
/* Competitor feed rows lead with an icon for the kind of signal: a new
   theme (moon and stars, sleep stories), a new format (video), volume
   (stacked layers). One tile style for all three. */
.cw__av, .cw__av--fmt, .cw__av--vol { background: color-mix(in srgb, var(--blue-500) 10%, var(--white)); color: var(--blue-600); --icon-size: 16px; }
.cw__av .icon { color: var(--blue-600); }