/* ==========================================================================
   ADPILOT · page layer
   --------------------------------------------------------------------------
   Loaded last. Everything specific to the AdPilot story: the hero's Monday
   brief, the six-questions card, the before/after Monday, the loop diagram's
   new stages, the capability vignettes, the control levels, the "Ask" chat
   mockup, the network list and the demo form.

   One visual rule runs through the page: the three autonomy levels are
   always the same colour, wherever they appear (hero, timeline, policy
   table): jade = runs on its own, ember = needs a person, grey = suggestion.
   No literal colours: everything resolves to a token.
   ========================================================================== */

/* ---------------------------------------------------------------- BASICS */
html { scroll-behavior: smooth; }
h1, h2, h3 { text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
main [id], #top { scroll-margin-top: calc(var(--nav-h) + var(--nav-float) + 16px); }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--grey-900); color: var(--paper); text-decoration: none;
}
.skip:focus { top: 16px; }

.pview [hidden], .cta [hidden] { display: none !important; }

/* ------------------------------------------------------- AUTONOMY TAGS */
.mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--m) 15%, var(--white));
  font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.3;
  color: var(--m-ink); white-space: nowrap;
}
.mode::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--m); }
.mode--auto    { --m: var(--ill-jade);     --m-ink: var(--pixel-green); }
.mode--ask     { --m: var(--ember-orange); --m-ink: var(--ember-orange-ink); }
.mode--suggest { --m: var(--grey-500);     --m-ink: var(--grey-700); }

/* --------------------------------------------------------------- HERO
   The hero is copy only: one full screen, the meadow rising from the foot.
   The headline is the whole pitch in two lines. The old way is quiet and
   gets struck through; the new way is ink and gets underlined in green.
   Both marks draw once, on load. */
.hero.scene.hero--open {
  min-height: 100svh;
  padding-bottom: clamp(260px, 38svh, 440px);
}
.hero--open .scene__art {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, black 20%, transparent) 30%, black 66%);
          mask-image: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, black 20%, transparent) 30%, black 66%);
}
.hero .hero__title {
  max-width: none;
  font-size: clamp(44px, 6.6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.hero__line { display: block; }
.hero__line--old { color: color-mix(in srgb, var(--heading) 42%, var(--ground)); }
.strike, .underline { position: relative; display: inline-block; }
.strike svg, .underline svg {
  position: absolute; left: -3%; width: 106%;
  overflow: visible; pointer-events: none;
}
.strike svg    { top: 46%; height: 0.22em; }
.underline svg { top: 88%; height: 0.2em; }
.strike path, .underline path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.strike path    { stroke: var(--ill-flame); stroke-width: 4; }
.underline path { stroke: var(--ill-jade); stroke-width: 5; }
/* Drawn on by a left-to-right reveal, so the timing doesn't depend on how
   long the line ends up at this screen width. */
@media (prefers-reduced-motion: no-preference) {
  .strike svg    { clip-path: inset(0 100% 0 0); animation: ap-draw 600ms cubic-bezier(0.6, 0, 0.2, 1) 450ms forwards; }
  .underline svg { clip-path: inset(0 100% 0 0); animation: ap-draw 700ms cubic-bezier(0.6, 0, 0.2, 1) 1100ms forwards; }
}
@keyframes ap-draw { to { clip-path: inset(0 0 0 0); } }
.hero--open .lede { max-width: 52ch; }
@media (max-width: 720px) {
  .hero.scene.hero--open { min-height: 0; padding-bottom: clamp(220px, 60vw, 300px); }
  .strike path { stroke-width: 3; }
  .underline path { stroke-width: 4; }
}

/* ------------------------------------------------------ THE MONDAY BRIEF
   The product window, in its own section, standing on the pixel meadow. */
.brief { overflow-x: clip; }
.brief__stage { position: relative; isolation: isolate; padding-bottom: clamp(40px, 6vw, 96px); }
.brief__stage::before {
  content: ''; position: absolute; z-index: -1;
  left: -8%; right: -8%; bottom: 0; aspect-ratio: 1356 / 768;
  background: url(../img/art/hero-pixel.webp) 50% 100% / cover no-repeat;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 45%, black 82%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, black 45%, black 82%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-composite: intersect;
}
.brief .pview { margin-top: var(--space-7); }
@media (max-width: 760px) { .brief__stage::before { left: -40%; right: -40%; } }

/* ------------------------------------------------------ HERO · BRIEF */
.pview__nav.is-on {
  background: var(--soft-card); color: var(--grey-900); font-weight: 500;
  box-shadow: 0 0 0 1px var(--soft-edge);
}
.pview__item b { font-size: 12.5px; }
.pview__watch {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  padding: 16px 8px 2px; font-size: 11.5px; color: var(--grey-600);
}
.pview__watch i {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ill-jade);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ill-jade) 22%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .pview__watch i { animation: ap-pulse 2.4s var(--motion-ease, ease) infinite; }
}
@keyframes ap-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ill-jade) 0%, transparent); } }

/* One column that never grows past its track: the stage tracker used to
   size the column to its own width and push the cards under the rail. */
.pview__main { grid-template-columns: minmax(0, 1fr); }
.pview__heading { font-size: 26px; text-wrap: balance; }
.pview__path { flex-wrap: wrap; row-gap: 6px; }
.pview__path li + li::before { width: 16px; margin-inline: 4px; }
.pview__changed {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px;
  gap: 20px; align-items: center;
}
.pview__req { font-size: 15px; line-height: 1.5; }
.pview__req b { font-weight: 600; }

.spark { display: block; width: 100%; height: auto; overflow: visible; }
.spark__win    { fill: color-mix(in srgb, var(--ill-flame) 9%, transparent); }
.spark__target { fill: none; stroke: var(--grey-500); stroke-width: 1; stroke-dasharray: 3 3; }
.spark__line   { fill: none; stroke: var(--ill-flame); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.spark__line--flat { stroke: var(--grey-700); }
.spark__pt     { fill: var(--white); stroke: var(--ill-flame); stroke-width: 2; }
.spark__lbl    { font-family: var(--font-label); font-size: 9.5px; fill: var(--grey-600); }
.spark__lbl--end { text-anchor: end; fill: var(--ember-orange-ink); }

/* Decision rail. */
.pview__decision { display: flex; flex-direction: column; align-items: flex-start; }
.pview__decision .mode { margin: 2px 0 12px; }
.pview__decision p.pview__move {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; color: var(--grey-900);
}
.pview__decision p.pview__why { margin: 8px 0 14px; font-size: 13px; line-height: 1.45; color: var(--grey-600); }
.pview__impact {
  display: grid; width: 100%; margin: 0 0 14px;
  border: 1px solid var(--soft-edge); border-radius: 10px; background: var(--soft-card);
}
.pview__impact div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; font-size: 12.5px; }
.pview__impact div + div { border-top: 1px solid var(--soft-edge); }
.pview__impact dt { color: var(--grey-600); }
.pview__impact dd { margin: 0; font-weight: 600; color: var(--grey-900); text-align: right; }
.pview__impact div:first-child dd { color: var(--pixel-green); }
@media (prefers-reduced-motion: no-preference) {
  .pview__decision.is-flash [data-amt], .pview__decision.is-flash .pview__impact dd { animation: ap-flash 700ms var(--motion-ease, ease); }
}
@keyframes ap-flash { 0% { background: color-mix(in srgb, var(--ill-butter) 55%, transparent); } 100% { background: transparent; } }

.pview__act { display: flex; gap: 8px; width: 100%; }
.pbtn {
  flex: 1; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--grey-900) 16%, transparent); border-radius: 999px;
  background: var(--soft-card);
  font: 500 13px/1.2 var(--font-button, var(--font-body)); color: var(--grey-900);
  cursor: pointer;
  transition: background 200ms var(--motion-ease), transform 200ms var(--motion-ease);
}
.pbtn:hover { background: color-mix(in srgb, var(--grey-900) 5%, var(--soft-card)); }
.pbtn--go { border-color: var(--grey-900); background: var(--grey-900); color: var(--paper); }
.pbtn--go:hover { background: var(--grey-800); transform: translateY(-1px); }
.pbtn:focus-visible, .pview__undo:focus-visible { outline: 2px solid var(--pixel-green); outline-offset: 2px; }

.pview__decision p.pview__done {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin: 0; padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--ill-sage) 18%, var(--soft-card));
  font-size: 13px; font-weight: 500; color: var(--pixel-green);
}
.pview__undo {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px;
  border: 0; background: none; font: inherit; font-weight: 500; color: var(--grey-700);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  --icon-size: 13px;
}
@media (prefers-reduced-motion: no-preference) {
  .pview__done:not([hidden]) { animation: ap-in 360ms var(--motion-ease, ease); }
}
@keyframes ap-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pview__cap--also { margin-top: 22px; }
.pview__decision ul { width: 100%; }
.pview__decision li { grid-template-columns: auto minmax(0, 1fr) auto; font-size: 12px; line-height: 1.35; }
.pview__decision li .icon:last-child { color: var(--grey-600); }
.pview__decision li .mode { margin: 0; padding: 2px 7px; font-size: 11px; }

@media (max-width: 760px) {
  .pview__path { gap: 4px; }
  .pview__path li + li::before { display: none; }
  .pview__changed { grid-template-columns: 1fr; }
  .spark { max-width: 280px; }
}

/* ------------------------------------------------------------ PROBLEM */
.problem__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.problem h2 { font-size: var(--size-h2); letter-spacing: var(--display-tracking); }
.problem__lede { margin: var(--space-5) 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--grey-600); }

.qcard {
  margin: 0; padding: 22px 26px 12px;
  border: 1px solid var(--soft-edge); border-radius: 20px;
  background: var(--soft-card); box-shadow: var(--soft-shadow);
}
.qcard__cap {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--soft-edge);
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey-600);
}
.qcard__cap span:last-child { color: var(--pixel-green); }
.qcard__list { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.qcard__list li {
  counter-increment: q;
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 13px 0;
}
.qcard__list li + li { border-top: 1px solid var(--soft-edge); }
.qcard__list li::before { content: counter(q, decimal-leading-zero); font-family: var(--font-label); font-size: 11px; color: var(--grey-500); }
.qcard__list li > span { font-family: var(--font-display); font-size: 20px; line-height: 1.25; color: var(--grey-900); }
.qcard__list li > i {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--ill-sage) 14%, var(--white));
  font-style: normal; font-size: 13px; font-weight: 500; color: var(--pixel-green); white-space: nowrap;
  --icon-size: 13px;
}
/* The answers arrive one by one when the card scrolls in (adpilot.js arms
   the card only when it starts below the fold). */
@media (prefers-reduced-motion: no-preference) {
  .qcard.is-armed .qcard__list li > i { opacity: 0; transform: translateX(-6px); }
  .qcard.is-in .qcard__list li > i {
    opacity: 1; transform: none;
    transition: opacity 360ms var(--motion-ease), transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .qcard.is-in li:nth-child(2) > i { transition-delay: 120ms; }
  .qcard.is-in li:nth-child(3) > i { transition-delay: 240ms; }
  .qcard.is-in li:nth-child(4) > i { transition-delay: 360ms; }
  .qcard.is-in li:nth-child(5) > i { transition-delay: 480ms; }
  .qcard.is-in li:nth-child(6) > i { transition-delay: 600ms; }
}
@media (max-width: 860px) { .problem__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .qcard { padding: 18px 16px 8px; }
  .qcard__list li { grid-template-columns: 22px minmax(0, 1fr); row-gap: 6px; }
  .qcard__list li > i { grid-column: 2; justify-self: start; }
  .qcard__list li > span { font-size: 18px; }
}

/* -------------------------------------------------------------- SHIFT */
.shift {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-top: var(--space-7);
}
.shift__col {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 28px 28px 22px;
  border: 1px solid var(--soft-edge); border-radius: 20px;
}
.shift__col--before { background: color-mix(in srgb, var(--grey-900) 4%, var(--paper)); }
.shift__col--after { background: var(--soft-card); box-shadow: var(--soft-shadow); }
.shift__col--after::before {                     /* a breath of meadow green */
  content: ''; position: absolute; z-index: -1; right: -20%; top: -40%; width: 70%; height: 70%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ill-sage) 22%, transparent), transparent);
  filter: blur(10px);
}
.shift__head { margin-bottom: 14px; }
.shift__tag {
  display: inline-block; font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-600);
}
.shift__col--after .shift__tag { color: var(--pixel-green); }
.shift__head h3 { margin: 8px 0 0; font-size: 28px; line-height: 1.15; color: var(--grey-900); }
.shift__col--before .shift__head h3 { color: var(--grey-700); }

.shift__steps { margin: 0; padding: 0; list-style: none; display: grid; }
.shift__steps li {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: start; gap: 4px 14px;
  padding: 13px 0; border-top: 1px dashed color-mix(in srgb, var(--grey-900) 12%, transparent);
}
.shift__steps time { padding-top: 3px; font-family: var(--font-label); font-size: 12px; color: var(--grey-600); }
.shift__steps p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--grey-700); }
.shift__steps b { font-weight: 600; color: var(--grey-900); }
.shift__col--before .shift__steps p { color: var(--grey-600); }
.shift__col--before .shift__steps b { color: var(--grey-800); }
.shift__steps .mode { margin-top: 1px; }
.shift__apps { display: flex; gap: 4px; padding-top: 1px; }
.shift__apps i {
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--grey-900) 12%, transparent);
  background: var(--soft-card);
  font-style: normal; font-size: 11px; color: var(--grey-600);
}
.shift__foot {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--soft-edge);
}
.shift__foot b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--grey-700);
}
.shift__col--after .shift__foot b { color: var(--pixel-green); }
.shift__foot span { font-size: 13px; color: var(--grey-600); }
.shift__note { margin: 16px 0 0; font-size: 13px; color: var(--grey-600); text-align: center; }
@media (max-width: 960px) { .shift { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .shift__col { padding: 22px 18px 18px; }
  .shift__steps li { grid-template-columns: 60px minmax(0, 1fr); }
  .shift__steps li > :nth-child(3) { grid-column: 2; justify-self: start; }
  .shift__foot b { font-size: 22px; }
}

/* ---------------------------------------------------------------- HOW
   The loop's notes take the module notes' places: Observe, Understand and
   Recommend share the slot under the input; Learn hangs below the frame. */
#arch-note-observe,
#arch-note-understand,
#arch-note-recommend { left: 0; right: auto; bottom: auto; top: calc(var(--pad-t) + 250px); width: 244px; }
#arch-note-learn { right: 24px; top: calc(100% - var(--pad-b) + 24px); }

.arch__rise--down i::after {
  top: auto; bottom: 0;
  border: 5px solid transparent; border-bottom-width: 0; border-top: 6px solid var(--arch-line);
}
.arch__rise--down i::before { transform-origin: center top; }
.arch__back {
  display: flex; align-items: center; gap: 8px;
  margin: var(--space-5) 0 0; padding-top: var(--space-4);
  border-top: 1px dashed var(--arch-dash);
  font-family: var(--font-mono, var(--font-body)); font-size: 12px; color: var(--ink-muted);
  --icon-size: 14px;
}
.arch__back .icon { color: var(--pixel-green); }
@media (max-width: 900px) {
  #arch-note-observe, #arch-note-understand, #arch-note-recommend, #arch-note-learn { width: auto; }
}

/* ------------------------------------------------------- CAPABILITIES */
.mtile--budget  .mtile__scene { --mt-bg: url(../img/art/hero-meadow.webp);  --mt-pos: 100% 100%; }
.mtile--insight .mtile__scene { --mt-bg: url(../img/art/hero-pixel.webp);   --mt-pos: 0% 100%; }
.mtile--create  .mtile__scene { --mt-bg: url(../img/art/hero-meadow.webp);  --mt-pos: 30% 100%; }
.mtile--execute .mtile__scene { --mt-bg: url(../img/art/footer-pixel.webp); --mt-pos: 12% 100%; --mt-size: auto 135%; }

.mtile .vchart__tip { white-space: nowrap; }
/* Budget tile: the chart sits under its legend instead of behind it, and
   keeps real stroke weights at tile size. */
.mtile--budget .vchart { padding-top: 62px; }
.mtile--budget .vchart__tip { top: 0; }
.mtile--budget .vchart svg { overflow: hidden; border-radius: 8px; }
.mtile--budget .vchart .ln { stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mtile--budget .vchart .grid, .mtile--budget .vchart .mark { vector-effect: non-scaling-stroke; }
.mtile--budget .vchart .pt { stroke-width: 2; vector-effect: non-scaling-stroke; }
.mtile--budget .vchart__axis { display: none; }
.vchart .stop-sa { stop-color: var(--ill-sage); stop-opacity: 0.3; }
.vchart .stop-sb { stop-color: var(--ill-sage); stop-opacity: 0; }
.mtile .vcard b { line-height: 1.25; }
.vsub { font-size: 10.5px; color: var(--grey-600); }
.vline .vtxt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono, var(--font-body)); font-size: 10.5px; color: var(--ink);
}
.vline--add .vtxt { color: color-mix(in srgb, var(--ill-sage) 75%, var(--white)); }
.vline--del .vtxt { color: color-mix(in srgb, var(--ill-flame) 65%, var(--white)); }
.mtile .vline { padding-block: 2px; }
.mtile .vline i { width: 18px; }
.mtile .veditor__foot .vtoggle { background: var(--ember-orange); }

/* ------------------------------------------------------------ CONTROL */
.policy {
  margin: 0; padding: 0; list-style: none; overflow: hidden;
  border: 1px solid var(--soft-edge); border-radius: 14px; background: var(--soft-card);
}
.policy li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 16px; font-size: 15px; line-height: 1.4; color: var(--grey-800);
}
.policy li + li { border-top: 1px solid var(--soft-edge); }
.policy .policy__head {
  padding-block: 9px;
  background: color-mix(in srgb, var(--grey-900) 3%, var(--soft-card));
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey-600);
}
.fitx__panel p.policy__note { margin-top: 12px; font-size: 13px; color: var(--grey-600); }

.anatomy {
  display: grid; margin: 0; overflow: hidden;
  border: 1px solid var(--soft-edge); border-radius: 14px; background: var(--soft-card);
}
.anatomy div {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: baseline;
  padding: 13px 16px;
}
.anatomy div + div { border-top: 1px solid var(--soft-edge); }
.anatomy dt {
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey-600);
}
.anatomy dd { margin: 0; font-size: 15px; color: var(--grey-900); }
.anatomy div:nth-child(4) dd { font-weight: 600; color: var(--pixel-green); }
@media (max-width: 600px) {
  .policy li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .policy .policy__head { display: none; }
  .anatomy div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------------------------------------------------- SURFACES · ASK */
.app__main.app__main--chat {
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
  place-content: normal; gap: 1.2em; padding: 1.8em 2.2em 1.6em;
}
.chat { display: grid; gap: 1em; }
.chat__q {
  justify-self: end; max-width: 72%;
  padding: 0.75em 1.1em; border-radius: 1em 1em 0.3em 1em;
  background: var(--grey-900); color: var(--paper);
}
.chat__a {
  display: grid; gap: 0.75em; max-width: 90%;
  padding: 1em 1.15em; border-radius: 1em;
  border: 1px solid color-mix(in srgb, var(--grey-900) 10%, var(--paper));
  background: var(--white);
  box-shadow: 0 0.8em 2em -1.2em color-mix(in srgb, var(--grey-900) 25%, transparent);
}
.chat__who { display: flex; align-items: center; gap: 0.5em; font-weight: 600; }
.chat__logo { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 0.4em; background: var(--grey-900); }
.chat__logo i {
  width: 0.8em; height: 0.8em; background: var(--paper);
  -webkit-mask: url(../img/brand/mark.svg) center / contain no-repeat;
          mask: url(../img/brand/mark.svg) center / contain no-repeat;
}
.chat__a p { margin: 0; line-height: 1.45; color: var(--grey-700); }
.chat__rows { display: grid; overflow: hidden; border: 1px solid color-mix(in srgb, var(--grey-900) 10%, var(--paper)); border-radius: 0.6em; }
.chat__rows div { display: flex; justify-content: space-between; gap: 1em; padding: 0.5em 0.8em; }
.chat__rows div + div { border-top: 1px solid color-mix(in srgb, var(--grey-900) 8%, var(--paper)); }
.chat__rows span { color: var(--grey-700); }
.chat__rows b { font-weight: 600; color: var(--grey-700); }
.chat__rows b.is-up { color: var(--ember-orange-ink); }
.chat__acts { display: flex; flex-wrap: wrap; gap: 0.5em; }
.chat__acts span {
  padding: 0.45em 0.95em; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--grey-900) 16%, var(--paper));
  font-size: 0.92em; color: var(--grey-900);
}
.chat__acts .is-go { border-color: var(--grey-900); background: var(--grey-900); color: var(--paper); }
.chat__box {
  position: relative; padding: 0.9em 1.1em; border-radius: 0.8em;
  border: 1px solid color-mix(in srgb, var(--grey-900) 16%, var(--paper));
  background: var(--white); color: var(--grey-500);
}
.chat__box .app__send { top: 50%; bottom: auto; translate: 0 -50%; border-radius: 50%; }
.app__brand .app__logo { border-radius: 0.3em; }
.slack__card dl { gap: 0.4em 1em; }

/* ------------------------------------------------------------ NETWORKS */
.netlogo {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--net, var(--grey-900));
  font: 700 11px/1 var(--font-body); color: var(--white);
}
.netlogo--meta   { --net: var(--net-meta); }
.netlogo--tiktok { --net: var(--net-tiktok); }
.netlogo--google { --net: var(--net-google); }
.netlogo--snap   { --net: var(--net-snap); color: var(--grey-900); }
.netlogo--dsp    { --net: var(--grey-400); }
.lx__meta { font-size: 12px; color: var(--grey-600); }
.lx__agent:has(.lx__toggle:not(.is-on)) b { color: var(--grey-600); }

/* ---------------------------------------------------------------- CTA */
.section.cta .cta__inner.cta__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.cta__eyebrow {
  display: block; margin-bottom: var(--space-4);
  font-family: "Caveat", "Comic Neue", cursive; font-size: 24px; font-weight: 600; line-height: 1.1;
  letter-spacing: 0; text-transform: none; color: var(--pixel-green);
}
.cta .cta__copy h2 { max-width: 14ch; }
.cta__points { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.cta__points li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--grey-800); --icon-size: 18px; }
.cta__points .icon { color: var(--pixel-green); }

.dform {
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--white) 70%, transparent); border-radius: 20px;
  background: var(--soft-card);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--white) 35%, transparent),
    0 30px 60px -30px color-mix(in srgb, var(--grey-900) 35%, transparent);
}
.dform__fields { display: grid; gap: 16px; }
.dform__f { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dform__f > span, .dform__f legend { padding: 0; font-size: 13px; font-weight: 500; color: var(--grey-800); }
.dform__f legend { margin-bottom: 8px; }
.dform input[type="email"],
.dform input[type="text"],
.dform select {
  width: 100%; padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--grey-900) 16%, var(--paper)); border-radius: 10px;
  background: var(--white);
  font: 15px/1.3 var(--font-body); color: var(--grey-900);
  transition: border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease);
}
.dform input::placeholder { color: var(--grey-500); }
.dform input:focus, .dform select:focus {
  outline: none; border-color: var(--pixel-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ill-sage) 30%, transparent);
}
.dform input[aria-invalid="true"] { border-color: var(--ember-orange-ink); }
.dform__nets > div { display: flex; flex-wrap: wrap; gap: 8px; }
.dform__nets label { position: relative; }
.dform__nets input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.dform__nets span {
  display: inline-flex; padding: 7px 13px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--grey-900) 16%, var(--paper));
  background: var(--white); font-size: 13px; color: var(--grey-700);
  transition: background 160ms var(--motion-ease), border-color 160ms var(--motion-ease), color 160ms var(--motion-ease);
}
.dform__nets input:checked + span {
  border-color: color-mix(in srgb, var(--pixel-green) 50%, transparent);
  background: color-mix(in srgb, var(--ill-sage) 16%, var(--white)); color: var(--pixel-green); font-weight: 500;
}
.dform__nets input:focus-visible + span { outline: 2px solid var(--pixel-green); outline-offset: 2px; }
.dform__err { margin: 12px 0 0; font-size: 13px; color: var(--ember-orange-ink); }
.btn.dform__go { width: 100%; margin-top: 20px; min-height: 46px; font-size: 15px; }
.dform__fine { margin: 12px 0 0; font-size: 12px; color: var(--grey-600); text-align: center; }
.dform--done { display: grid; justify-items: center; gap: 10px; padding-block: 44px; text-align: center; }
.dform--done .icon { width: 44px; height: 44px; color: var(--pixel-green); }
.dform--done h3 { margin: 0; font-size: 30px; color: var(--grey-900); }
.dform--done p { margin: 0; max-width: 34ch; color: var(--grey-700); }
.dform--done:focus { outline: none; }
@media (max-width: 900px) {
  .section.cta .cta__inner.cta__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .dform { padding: 20px; } }