/* ============================================================
   MarketStarter — service pages · shared styles
   Loaded AFTER /styles.css on /services/* pages only.
   Adds: service hero, dark act variant, capability/industry
   tiles, scope drivers, FAQ, outbound email scene (act 04),
   pipeline board scene (act 05), booked-week scene (act 06),
   migration/merge scene (act 07), attribution trail scene
   (act 08), closed-loop ledger scene (act 09), system index
   rows (/services/).
   Root design system untouched.
   ============================================================ */

/* Anchor targets clear the fixed nav — subpages scroll natively (no Lenis). */
[id] { scroll-margin-top: 84px; }

/* The gradient-underline highlight looks broken when it wraps mid-phrase. */
.act h2 em { white-space: nowrap; }

/* ---------- service hero ---------- */
.svc-hero {
  position: relative;
  background:
    radial-gradient(1000px 480px at 80% 10%, rgba(0, 194, 110, 0.08), transparent 62%),
    radial-gradient(700px 420px at 8% 100%, rgba(0, 194, 110, 0.05), transparent 60%),
    var(--navy);
  color: var(--on-dark);
  padding-top: clamp(132px, 18vh, 184px);
  padding-bottom: clamp(76px, 9vw, 116px);
  overflow: clip;
}
.svc-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  color: var(--on-dark-muted); margin-bottom: 30px;
}
.svc-crumb a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
.svc-crumb a:hover { color: var(--green-bright); }
.svc-crumb i { font-style: normal; color: var(--on-dark-faint); }
.svc-crumb b {
  font-weight: 500; color: var(--cta-ink); background: var(--green-bright);
  padding: 2px 9px; border-radius: 999px;
}
.svc-hero h1 {
  font-size: clamp(38px, 5.8vw, 76px);
  line-height: 1.04;
  font-weight: 750;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.025em;
  color: var(--paper);
  max-width: 13em;
}
.svc-hero .hero-sub { max-width: 640px; }

/* ---------- dark act variant (subpages only) ---------- */
.act--dark { background: var(--navy); color: var(--on-dark); }
.act--dark .act-label { color: var(--green-bright); }
.act--dark h2 { color: var(--paper); }
.act--dark .hook { color: var(--on-dark); }
.act--dark .body-copy { color: var(--on-dark-muted); }
.act--dark .act-num { -webkit-text-stroke: 1px rgba(233, 236, 239, 0.09); }

/* ---------- capability / industry tiles ---------- */
.tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: clamp(36px, 5vw, 56px);
  position: relative; z-index: 2;
}
@media (max-width: 960px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  border-radius: var(--r-xl); padding: 22px 22px 24px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.tile .tile-k { display: block; color: var(--green-text-light); }
.tile h3 { font-size: 18.5px; font-weight: 680; letter-spacing: -0.01em; margin-top: 10px; }
.tile p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.act--dark .tile { background: var(--ink-deep); box-shadow: inset 0 0 0 1px rgba(233, 236, 239, 0.09); }
.act--dark .tile .tile-k { color: var(--green-bright); }
.act--dark .tile h3 { color: var(--paper); }
.act--dark .tile p { color: var(--on-dark-muted); }

/* ---------- scope drivers ---------- */
.svc-scope { background: var(--surface-subtle); }
.drivers { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); max-width: 860px; }
.drivers li {
  display: grid; grid-template-columns: 52px 230px 1fr; gap: 18px; align-items: baseline;
  padding: 18px 6px; border-bottom: 1px solid var(--line);
}
.drivers .d-n { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.09em; color: var(--green-text-light); }
.drivers b { font-family: var(--f-display); font-weight: 650; font-size: 17.5px; letter-spacing: -0.01em; }
.drivers span { color: var(--ink-muted-strong); font-size: 14.5px; }
@media (max-width: 720px) {
  .drivers li { grid-template-columns: 40px 1fr; }
  /* .d-n is also a span — place all three cells explicitly so the title
     never lands in the 40px number column */
  .drivers .d-n { grid-column: 1; grid-row: 1; }
  .drivers b { grid-column: 2; grid-row: 1; }
  .drivers li > span:not(.d-n) { grid-column: 2; grid-row: 2; }
}
.scope-note { margin-top: 30px; color: var(--ink-muted-strong); max-width: 38em; }
.scope-note b { color: var(--navy); font-weight: 600; }

/* ---------- FAQ (native details/summary — works with zero JS) ---------- */
.svc-faq { background: var(--paper); }
.faq { margin-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 19px 6px;
  font-family: var(--f-display); font-weight: 640; font-size: 17.5px; letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
}
.faq summary:hover { color: var(--green-deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); font-size: 15px; color: var(--green-text-light); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq .faq-a { padding: 0 6px 22px; color: var(--ink-muted-strong); font-size: 15px; line-height: 1.65; max-width: 50em; }

/* ---------- section tint helper ---------- */
.how--tint { background: var(--surface-subtle); }

/* ---------- ACT 04 · outbound email scene (cold-outreach page) ----------
   Light-surface card in the .answer aesthetic. Static render = the full
   thread (email text, reply, results, all funnel stages lit); the fx
   builder empties/hides and replays the story. */
.mailer {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 80px -30px rgba(14, 17, 22, 0.28), 0 0 0 1px var(--border);
  max-width: 560px; margin-inline: auto;
  overflow: hidden;
}
.mailer-head {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.mailer-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mailer-tag { margin-left: 12px; color: var(--ink-muted-strong); font-size: 10px; }
.mailer-head .run {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  background: var(--mint-wash); border: 1px solid var(--mint-tint);
  border-radius: 999px; padding: 4px 11px;
}
.mailer-head .run .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: none; }

.mailer-body { padding: 20px 22px; display: grid; gap: 13px; }
.mail { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--paper); }
.mail-meta {
  display: flex; flex-wrap: wrap; gap: 5px 14px;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-muted);
}
.mail-meta b, .mail-subject b {
  color: var(--ink-muted); font-weight: 500; margin-right: 5px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase;
}
.mail-day { margin-left: auto; color: var(--ink-muted); }
.mail-subject { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.mail-subject .t { min-height: 1.4em; display: inline; }
.mail-text { margin-top: 9px; display: grid; gap: 8px; }
.mail-text p { font-size: 13.5px; line-height: 1.6; color: var(--ink-strong); min-height: 1.4em; }
.mailer .t.typing::after { background: var(--green-deep); }
.mail--reply { background: var(--mint-wash); border-color: var(--mint-tint); }
.mail--reply .reply-text { margin-top: 9px; font-size: 14px; font-weight: 500; color: var(--navy); line-height: 1.55; }

.mail-results { display: grid; gap: 9px; }
.mail-result {
  display: flex; align-items: center; gap: 10px;
  background: var(--mint-wash);
  border: 1px solid rgba(0, 194, 110, 0.35);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px; color: var(--navy);
}
.mail-result svg { color: var(--green-deep); flex: none; }
.mail-result .ok {
  margin-left: auto; font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--green-text-light); font-weight: 500;
}

.mailer-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 15px 22px 18px;
  border-top: 1px solid var(--border);
}
.mailer-foot .mono-label { color: var(--ink-muted); font-size: 9.5px; }
.stages { display: flex; flex-wrap: wrap; gap: 7px; }
.stage {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-muted); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 11px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.stage .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); box-shadow: none; }
.stage.lit { color: var(--navy); border-color: rgba(0, 194, 110, 0.5); }
.stage.lit .dot { background: var(--green); }
html:not(.fx) .stage { color: var(--navy); border-color: rgba(0, 194, 110, 0.5); }
html:not(.fx) .stage .dot { background: var(--green); }

/* ---------- ACT 05 · pipeline board scene (crm-quickstart page) ----------
   Light-surface card in the .mailer/.answer aesthetic. Static render = the
   full board (every deal placed, notes visible, dashboard total, all stage
   chips lit via the shared .stage default); the fx builder clears it and
   replays the Monday morning. */
.pipe {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 80px -30px rgba(14, 17, 22, 0.28), 0 0 0 1px var(--border);
  max-width: 560px; margin-inline: auto;
  overflow: hidden;
}
.pipe-head {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.pipe-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.pipe-tag { margin-left: 12px; color: var(--ink-muted-strong); font-size: 10px; }
.pipe-head .run {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  background: var(--mint-wash); border: 1px solid var(--mint-tint);
  border-radius: 999px; padding: 4px 11px;
}
.pipe-head .run .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: none; }

.pipe-board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 18px 18px 4px;
}
.pipe-col { display: grid; gap: 8px; align-content: start; }
.pipe-col-k {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.deal {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; background: var(--paper);
  display: grid; gap: 2px;
}
.deal > b { font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.deal-v { font-family: var(--f-mono); font-size: 11px; color: var(--ink-muted); }
.deal--hot { border-color: rgba(0, 194, 110, 0.35); }
.deal--won { background: var(--green-bright); border-color: var(--green-bright); }
.deal--won > b, .deal--won .deal-v { color: var(--cta-ink); }
.deal-note {
  margin-top: 5px; padding-top: 6px; border-top: 1px dashed var(--mint-tint);
  font-style: normal; font-family: var(--f-mono); font-size: 9.5px; line-height: 1.4;
  color: var(--green-text-light);
  display: flex; align-items: center; gap: 6px;
}
.deal-note .ok { margin-left: auto; font-size: 8.5px; letter-spacing: 0.08em; font-weight: 500; }

.pipe-dash {
  margin: 12px 18px 0; padding: 11px 14px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  background: var(--navy); border-radius: 12px;
}
.pipe-dash .mono-label { color: var(--on-dark-muted); font-size: 9.5px; }
.pipe-total { font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--green-bright); }

.pipe-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 15px 18px 18px;
}
.pipe-foot .mono-label { color: var(--ink-muted); font-size: 9.5px; }

@media (max-width: 440px) {
  .pipe-board { gap: 7px; padding: 14px 14px 2px; }
  .deal { padding: 8px 9px; }
  .deal > b { font-size: 11.5px; }
  .pipe-dash { margin: 10px 14px 0; }
  .pipe-foot { padding: 13px 14px 16px; }
}

/* ---------- ACT 06 · booked-week scene (appointment-setting page) ----------
   Same light-surface card language as .mailer/.pipe. Static render = the
   full week (six slots placed, dashboard totals at their final values,
   all funnel chips lit via the shared .stage default); the fx builder
   empties it and replays the week being booked.
   Day rows are an agenda, not five narrow columns — company names stay
   readable inside the 560px card and on a phone. */
.cal {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 80px -30px rgba(14, 17, 22, 0.28), 0 0 0 1px var(--border);
  max-width: 560px; margin-inline: auto;
  overflow: hidden;
}
.cal-head {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.cal-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.cal-tag { margin-left: 12px; color: var(--ink-muted-strong); font-size: 10px; }
.cal-head .run {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  background: var(--mint-wash); border: 1px solid var(--mint-tint);
  border-radius: 999px; padding: 4px 11px;
}
.cal-head .run .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: none; }

.cal-week { padding: 17px 18px 4px; display: grid; gap: 9px; }
.cal-day { display: grid; grid-template-columns: 42px 1fr; gap: 10px; }
/* A day can hold more than one slot — place both cells explicitly so the
   second slot stacks under the first instead of landing in the day column. */
.cal-d {
  grid-column: 1; grid-row: 1;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); padding-top: 11px;
}
.cal-day .slot { grid-column: 2; }
.cal-day .slot + .slot { margin-top: 7px; }

.slot {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 11px; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; background: var(--paper); font-weight: 400;
}
.slot-t { font-family: var(--f-mono); font-size: 11px; color: var(--green-text-light); }
.slot-c { font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.slot-s {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px;
}

.cal-dash {
  margin: 13px 18px 0; padding: 11px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: var(--navy); border-radius: 12px;
}
.cal-dash .mono-label { color: var(--on-dark-muted); font-size: 9.5px; }
.cal-total { margin-left: auto; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--green-bright); }
.cal-screen { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-dark-muted); }

.cal-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 15px 18px 18px;
}
.cal-foot .mono-label { color: var(--ink-muted); font-size: 9.5px; }

@media (max-width: 440px) {
  .cal-week { padding: 14px 14px 2px; }
  .cal-day { grid-template-columns: 36px 1fr; gap: 8px; }
  /* the source chip drops to its own row rather than squeezing the name */
  .slot { grid-template-columns: auto 1fr; padding: 8px 10px; }
  .slot-s { grid-column: 2; grid-row: 2; justify-self: start; }
  .slot-c { font-size: 12px; }
  .cal-dash { margin: 11px 14px 0; }
  .cal-foot { padding: 13px 14px 16px; }
}

/* ---------- ACT 07 · migration & merge scene (crm-implementation page) ----------
   Same light-surface card language as .mailer/.pipe/.cal. Static render =
   the finished dry run (every source mapped, the merged record assembled,
   both counters at their final values, all stage chips lit via the shared
   .stage default); the fx builder zeroes it and replays the merge.
   Source rows carry their row count in data-rows so the visible, formatted
   number stays the single source of truth for the static render. */
.mig {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 80px -30px rgba(14, 17, 22, 0.28), 0 0 0 1px var(--border);
  max-width: 560px; margin-inline: auto;
  overflow: hidden;
}
.mig-head {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.mig-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mig-tag { margin-left: 12px; color: var(--ink-muted-strong); font-size: 10px; }
.mig-head .run {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  background: var(--mint-wash); border: 1px solid var(--mint-tint);
  border-radius: 999px; padding: 4px 11px;
}
.mig-head .run .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: none; }

.mig-src { padding: 17px 18px 0; display: grid; gap: 7px; }
/* ⚠️ Scoped to .mig-src on purpose (fixed 2026-08-06). This rule shipped
   unscoped with the CRM Implementation scene on 2026-07-30, and since
   service.css loads AFTER styles.css it silently overrode the CITATION PILL
   `.src` of the AI SEO/AEO answer scene on every service page: measured
   display:grid + 10px radius instead of the 999px pill. Keep every .mig-*
   scene selector inside its own block — the answer scene owns `.src` first,
   in styles.css, because the homepage renders it without this file. */
.mig-src .src {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 11px; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; background: var(--paper);
}
.src-n { font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.src-v { font-family: var(--f-mono); font-size: 11px; color: var(--ink-muted); }
.src-s {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  border: 1px solid var(--mint-tint); border-radius: 999px; padding: 3px 8px;
}

.mig-join {
  margin: 11px 18px 0; padding: 8px 12px;
  background: var(--mint-wash); border: 1px solid var(--mint-tint); border-radius: 10px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-text-light); text-align: center;
}
.mig-join i { font-style: normal; padding: 0 4px; color: var(--green); }

.mig-rec {
  margin: 11px 18px 0; padding: 12px 14px;
  border: 1px solid rgba(0, 194, 110, 0.35); border-radius: 12px; background: var(--paper);
}
.mig-rec .rec-k { color: var(--ink-muted); font-size: 9.5px; }
.rec-n {
  display: block; margin-top: 3px;
  font-family: var(--f-display); font-weight: 650; font-size: 14.5px; letter-spacing: -0.015em; color: var(--navy);
}
.rec-rows { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rec-rows li { display: grid; gap: 2px; }
.rec-rows span {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-muted);
}
.rec-rows b { font-family: var(--f-mono); font-size: 13px; font-weight: 500; color: var(--green-text-light); }
.rec-src {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--mint-tint);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 9.5px; line-height: 1.4; color: var(--green-text-light);
}
.rec-src .ok { margin-left: auto; font-size: 8.5px; letter-spacing: 0.08em; font-weight: 500; flex: none; }

.mig-dash {
  margin: 12px 18px 0; padding: 11px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: var(--navy); border-radius: 12px;
}
.mig-dash .mono-label { color: var(--on-dark-muted); font-size: 9.5px; }
.mig-total { margin-left: auto; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--green-bright); }
.mig-dupe { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-dark-muted); }

.mig-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 15px 18px 18px;
}
.mig-foot .mono-label { color: var(--ink-muted); font-size: 9.5px; }

@media (max-width: 440px) {
  .mig-src { padding: 14px 14px 0; }
  /* the "Mapped" chip drops to its own row rather than squeezing the source name.
     ⚠️ SCOPED to .mig-src (fixed 2026-08-09). This rule shipped bare with the
     scene on 2026-07-30 and the 06/08 fix only scoped its non-media twin, so
     the citation pill `.src` of the AI SEO/AEO answer scene still inherited
     this padding below 440px: measured 8px 10px instead of the pill's
     5px 12px, on both the EN and EL pages. Same specificity (0,1,0) and
     service.css loads after styles.css, so the bare selector won.
     .src-n / .src-v / .src-s below need no scoping — those class names exist
     only in this scene, and the citation pill uses `.src i` instead. */
  .mig-src .src { grid-template-columns: 1fr auto; padding: 8px 10px; }
  .src-n { grid-column: 1; grid-row: 1; font-size: 12px; }
  .src-v { grid-column: 2; grid-row: 1; }
  .src-s { grid-column: 1; grid-row: 2; justify-self: start; }
  .mig-join, .mig-rec, .mig-dash { margin-inline: 14px; }
  .rec-rows { grid-template-columns: repeat(2, 1fr); gap: 8px 10px; }
  .mig-foot { padding: 13px 14px 16px; }
}

/* ---------- ACT 08 · attribution trail scene (inbound-engine page) ----------
   Same light-surface card language as .mailer/.pipe/.cal/.mig. Static render =
   the finished month (every channel traced, the account's four touches listed,
   all three counters at their final values, all stage chips lit via the shared
   .stage default); the fx builder zeroes it and replays the trail.
   .rec-n and .rec-src are shared with the ACT 07 card on purpose — the two
   scenes are the same object language, one merging records and one tracing
   them. Only .rec-k needs re-scoping, since ACT 07 scoped it to .mig-rec. */
.fnl {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 80px -30px rgba(14, 17, 22, 0.28), 0 0 0 1px var(--border);
  max-width: 560px; margin-inline: auto;
  overflow: hidden;
}
.fnl-head {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.fnl-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.fnl-tag { margin-left: 12px; color: var(--ink-muted-strong); font-size: 10px; }
.fnl-head .run {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  background: var(--mint-wash); border: 1px solid var(--mint-tint);
  border-radius: 999px; padding: 4px 11px;
}
.fnl-head .run .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: none; }

.fnl-src { padding: 17px 18px 0; display: grid; gap: 7px; }
.fsrc {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 11px; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; background: var(--paper);
}
.fsrc-n { font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.fsrc-v { font-family: var(--f-mono); font-size: 11px; color: var(--ink-muted); }
.fsrc-s {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  border: 1px solid var(--mint-tint); border-radius: 999px; padding: 3px 8px;
}

.fnl-join {
  margin: 11px 18px 0; padding: 8px 12px;
  background: var(--mint-wash); border: 1px solid var(--mint-tint); border-radius: 10px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--green-text-light); text-align: center;
}
.fnl-join i { font-style: normal; padding: 0 3px; color: var(--green); }

.fnl-rec {
  margin: 11px 18px 0; padding: 12px 14px;
  border: 1px solid rgba(0, 194, 110, 0.35); border-radius: 12px; background: var(--paper);
}
.fnl-rec .rec-k { color: var(--ink-muted); font-size: 9.5px; }

/* The trail is a timeline: a hairline runs behind the day markers so four
   separate touches read as one journey rather than four unrelated rows. */
.trail { margin-top: 10px; display: grid; gap: 7px; position: relative; }
.trail::before {
  content: ""; position: absolute; left: 21px; top: 6px; bottom: 6px;
  width: 1px; background: var(--mint-tint);
}
.touch {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 3px 10px; align-items: center;
  position: relative;
}
.touch-d {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--paper); /* masks the hairline so the marker sits on the line */
  position: relative; z-index: 1; padding: 2px 0;
}
.touch-n { font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.touch-s {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em;
  color: var(--green-text-light);
}
.touch:first-child .touch-s { font-weight: 500; }

.fnl-dash {
  margin: 12px 18px 0; padding: 11px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: var(--navy); border-radius: 12px;
}
.fnl-dash .mono-label { color: var(--on-dark-muted); font-size: 9.5px; }
.fnl-total { margin-left: auto; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--green-bright); }
.fnl-mtg { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-dark-muted); }

.fnl-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 15px 18px 18px;
}
.fnl-foot .mono-label { color: var(--ink-muted); font-size: 9.5px; }

@media (max-width: 440px) {
  .fnl-src { padding: 14px 14px 0; }
  /* the "Traced" chip drops to its own row rather than squeezing the channel name */
  .fsrc { grid-template-columns: 1fr auto; padding: 8px 10px; }
  .fsrc-n { grid-column: 1; grid-row: 1; font-size: 12px; }
  .fsrc-v { grid-column: 2; grid-row: 1; }
  .fsrc-s { grid-column: 1; grid-row: 2; justify-self: start; }
  .fnl-join, .fnl-rec, .fnl-dash { margin-inline: 14px; }
  .fnl-join { font-size: 9px; letter-spacing: 0.05em; }
  /* the outcome wraps under the touch name instead of squeezing both */
  .touch { grid-template-columns: 38px 1fr; }
  .touch-n { grid-column: 2; grid-row: 1; font-size: 12px; }
  .touch-s { grid-column: 2; grid-row: 2; }
  .trail::before { left: 19px; }
  .fnl-foot { padding: 13px 14px 16px; }
}

/* ---------- ACT 09 · closed-loop ledger scene (ai-performance-ads page) ----------
   Same light-surface card language as .mailer/.pipe/.cal/.mig/.fnl, but the
   signature element is different on purpose: every campaign row carries TWO
   bars — what the platform counted, and who actually bought — so the mismatch
   that the whole system exists to fix is visible rather than described.
   Static render = the finished month (both bars at full width via the inline
   --w, the upload record assembled, the dashboard at its final values, all
   stage chips lit via the shared .stage default); the fx builder collapses the
   bars and zeroes the counters, then replays it.
   .rec-n, .rec-rows and .rec-src are shared with the ACT 07/08 cards on
   purpose — same object language. Only .rec-k needs re-scoping, since ACT 07
   scoped it to .mig-rec. */
.loop {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 80px -30px rgba(14, 17, 22, 0.28), 0 0 0 1px var(--border);
  max-width: 560px; margin-inline: auto;
  overflow: hidden;
}
.loop-head {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.loop-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.loop-tag { margin-left: 12px; color: var(--ink-muted-strong); font-size: 10px; }
.loop-head .run {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  background: var(--mint-wash); border: 1px solid var(--mint-tint);
  border-radius: 999px; padding: 4px 11px;
}
.loop-head .run .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: none; }

/* legend — the two bars mean different things, so they are named once */
.loop-key {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 15px 18px 0;
}
.loop-key .k {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-muted);
}
.loop-key .k i { width: 14px; height: 4px; border-radius: 999px; background: var(--ink-faint); flex: none; }
.loop-key .k--real { color: var(--green-text-light); }
.loop-key .k--real i { background: var(--green); }

.loop-src { padding: 11px 18px 0; display: grid; gap: 7px; }
.lsrc {
  display: grid; grid-template-columns: 1fr 86px; gap: 7px 11px; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; background: var(--paper);
}
.lsrc-n { grid-column: 1; grid-row: 1; font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.lsrc-s {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 7px; white-space: nowrap;
}
.lsrc-s--over { color: var(--ink-muted-strong); border-color: var(--line); }
.lsrc-s--under { color: var(--green-text-light); border-color: var(--mint-tint); background: var(--mint-wash); }

/* the two proportion bars — scaled by the inline --w so the static render is
   complete; the fx builder animates scaleX from 0 (transform, not width) */
.lbar { display: block; height: 4px; border-radius: 999px; background: var(--border); align-self: center; }
.lbar .bar-f { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--ink-faint); transform-origin: left center; }
.lbar--counted { grid-column: 1; grid-row: 2; }
.lbar--real { grid-column: 1; grid-row: 3; }
.lbar--real .bar-f { background: var(--green); }
.lsrc-v, .lsrc-r { font-family: var(--f-mono); font-size: 10.5px; text-align: right; white-space: nowrap; }
.lsrc-v { grid-column: 2; grid-row: 2; color: var(--ink-muted); }
.lsrc-r { grid-column: 2; grid-row: 3; color: var(--green-text-light); font-weight: 500; }

.loop-join {
  margin: 11px 18px 0; padding: 8px 12px;
  background: var(--mint-wash); border: 1px solid var(--mint-tint); border-radius: 10px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--green-text-light); text-align: center;
}
.loop-join i { font-style: normal; padding: 0 3px; color: var(--green); }

.loop-rec {
  margin: 11px 18px 0; padding: 12px 14px;
  border: 1px solid rgba(0, 194, 110, 0.35); border-radius: 12px; background: var(--paper);
}
.loop-rec .rec-k { color: var(--ink-muted); font-size: 9.5px; }

.loop-dash {
  margin: 12px 18px 0; padding: 11px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: var(--navy); border-radius: 12px;
}
.loop-dash .mono-label { color: var(--on-dark-muted); font-size: 9.5px; }
.loop-total { margin-left: auto; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--green-bright); }
.loop-cpa { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-dark-muted); }

.loop-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 15px 18px 18px;
}
.loop-foot .mono-label { color: var(--ink-muted); font-size: 9.5px; }

@media (max-width: 440px) {
  .loop-key { padding: 13px 14px 0; gap: 5px 12px; }
  .loop-src { padding: 10px 14px 0; }
  /* the verdict chip drops under the campaign name rather than squeezing it */
  .lsrc { grid-template-columns: 1fr 74px; padding: 8px 10px; gap: 6px 9px; }
  .lsrc-n { font-size: 12px; }
  .lsrc-v, .lsrc-r { font-size: 9.5px; }
  .lsrc-s { font-size: 8px; padding: 3px 6px; }
  .loop-join, .loop-rec, .loop-dash { margin-inline: 14px; }
  .loop-join { font-size: 9px; letter-spacing: 0.05em; }
  .loop-foot { padding: 13px 14px 16px; }
}

/* ---------- ACT 10 · storefront funnel scene (eshop-launch page) ----------
   Same light-surface card language as .mailer/.pipe/.cal/.mig/.fnl/.loop, but
   the signature shape is a DRAINING funnel rather than paired bars: four rows
   whose single bar shrinks toward a 2.1% nub, then the abandoned-cart line, then
   the recovery card that puts orders back. The point is read off the geometry —
   the storefront's month ends at the nub, the system's does not.
   Static render = the finished month (bars at full width via the inline --w,
   recovery card assembled, dashboard at its final values, all stage chips lit
   via the shared .stage default); the fx builder collapses the bars and zeroes
   the counters, then replays it.
   .rec-n, .rec-rows, .rec-src and .stage are shared with the ACT 07/08/09 cards
   on purpose — same object language. Only .rec-k needs re-scoping (ACT 07
   scoped it to .mig-rec), and .rec-rows--3 exists because this card names three
   flows where the others name four columns. */
.shop {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 80px -30px rgba(14, 17, 22, 0.28), 0 0 0 1px var(--border);
  max-width: 560px; margin-inline: auto;
  overflow: hidden;
}
.shop-head {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.shop-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.shop-tag { margin-left: 12px; color: var(--ink-muted-strong); font-size: 10px; }
.shop-head .run {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  background: var(--mint-wash); border: 1px solid var(--mint-tint);
  border-radius: 999px; padding: 4px 11px;
}
.shop-head .run .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: none; }

.shop-fn { padding: 15px 18px 0; display: grid; gap: 7px; }
.sfn {
  display: grid; grid-template-columns: 1fr 74px; gap: 6px 11px; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; background: var(--paper);
}
.sfn-n { grid-column: 1; grid-row: 1; font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.sfn-v {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--navy); white-space: nowrap;
}
/* the funnel bar — scaled by the inline --w so the static render is complete;
   the fx builder animates scaleX from 0 (transform, not width). min-width keeps
   the 2.1% row a visible nub instead of a hairline, which is the whole reveal. */
.sbar { grid-column: 1; grid-row: 2; display: block; height: 4px; border-radius: 999px; background: var(--border); align-self: center; }
.sbar .bar-f {
  display: block; height: 100%; width: var(--w); min-width: 6px;
  border-radius: 999px; background: var(--ink-faint); transform-origin: left center;
}
.sfn-p {
  grid-column: 2; grid-row: 2; justify-self: end;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-muted); white-space: nowrap;
}
/* the row the storefront's month stops at */
.sfn--end { border-color: rgba(0, 194, 110, 0.35); }
.sfn--end .bar-f { background: var(--green); }
.sfn--end .sfn-p { color: var(--green-text-light); font-weight: 500; }

.shop-leak {
  margin: 11px 18px 0; padding: 8px 12px;
  background: var(--surface-subtle); border: 1px dashed var(--line); border-radius: 10px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-muted-strong); text-align: center;
}
.shop-leak b { color: var(--navy); font-weight: 500; }
.shop-leak i { font-style: normal; padding: 0 4px; color: var(--line); }

.shop-rec {
  margin: 11px 18px 0; padding: 12px 14px;
  border: 1px solid rgba(0, 194, 110, 0.35); border-radius: 12px; background: var(--paper);
}
.shop-rec .rec-k { color: var(--ink-muted); font-size: 9.5px; }
.rec-rows--3 { grid-template-columns: repeat(3, 1fr); }

.shop-dash {
  margin: 12px 18px 0; padding: 11px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: var(--navy); border-radius: 12px;
}
.shop-dash .mono-label { color: var(--on-dark-muted); font-size: 9.5px; }
.shop-total { margin-left: auto; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--green-bright); }
.shop-rate { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-dark-muted); }

.shop-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 15px 18px 18px;
}
.shop-foot .mono-label { color: var(--ink-muted); font-size: 9.5px; }

@media (max-width: 440px) {
  .shop-fn { padding: 13px 14px 0; }
  .sfn { grid-template-columns: 1fr 64px; padding: 8px 10px; gap: 6px 9px; }
  .sfn-n { font-size: 12px; }
  .sfn-v { font-size: 11px; }
  .sfn-p { font-size: 9.5px; }
  .shop-leak, .shop-rec, .shop-dash { margin-inline: 14px; }
  .shop-leak { font-size: 9px; letter-spacing: 0.05em; }
  /* three named flows will not sit on one line at this width */
  .rec-rows--3 { grid-template-columns: repeat(2, 1fr); }
  .shop-foot { padding: 13px 14px 16px; }
}

/* ---------- ACT 11 · inbox composition scene (ai-support-concierge page) ----------
   Same light-surface card language as .mailer/.pipe/.cal/.mig/.fnl/.loop/.shop,
   but the signature shape is a COMPOSITION rather than a funnel or a pair of
   bars: five rows that add up to one month, sorted by what was actually being
   asked, each carrying the source the answer came out of. The argument is read
   off the chips, not the geometry — four rows resolve from the shop's own data
   and one is routed to a person on purpose, which is why that row is styled as
   a deliberate destination (solid navy bar) rather than as leakage.
   Static render = the finished month (bars at full width via the inline --w,
   escalation card assembled, dashboard at its final values, all stage chips lit
   via the shared .stage default); the fx builder collapses the bars and zeroes
   the counters, then replays it.
   .rec-n, .rec-rows, .rec-src and .stage are shared with the ACT 07/08/09/10
   cards on purpose — same object language. Only .rec-k needs re-scoping, since
   ACT 07 scoped it to .mig-rec. */
.inbx {
  background: var(--surface);
  border-radius: var(--r-2xl);
  box-shadow: 0 32px 80px -30px rgba(14, 17, 22, 0.28), 0 0 0 1px var(--border);
  max-width: 560px; margin-inline: auto;
  overflow: hidden;
}
.inbx-head {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.inbx-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.inbx-tag { margin-left: 12px; color: var(--ink-muted-strong); font-size: 10px; }
.inbx-head .run {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  background: var(--mint-wash); border: 1px solid var(--mint-tint);
  border-radius: 999px; padding: 4px 11px;
}
.inbx-head .run .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: none; }

/* legend — the two bar colours are two intended outcomes, not good and bad */
.inbx-key {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 15px 18px 0;
}
.inbx-key .k {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-muted);
}
.inbx-key .k i { width: 14px; height: 4px; border-radius: 999px; background: var(--navy); flex: none; }
.inbx-key .k--auto { color: var(--green-text-light); }
.inbx-key .k--auto i { background: var(--green); }

.inbx-src { padding: 11px 18px 0; display: grid; gap: 7px; }
.isrc {
  display: grid; grid-template-columns: 1fr 104px; gap: 7px 11px; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; background: var(--paper);
}
.isrc-n { grid-column: 1; grid-row: 1; font-size: 12.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.isrc-v {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--navy); white-space: nowrap;
}
.isrc-v i { font-style: normal; font-size: 10px; color: var(--ink-muted); padding-left: 2px; }
/* the share bar — scaled by the inline --w so the static render is complete;
   the fx builder animates scaleX from 0 (transform, not width). min-width keeps
   the 5% row a visible nub instead of a hairline. */
.ibar { grid-column: 1; grid-row: 2; display: block; height: 4px; border-radius: 999px; background: var(--border); align-self: center; }
.ibar .bar-f {
  display: block; height: 100%; width: var(--w); min-width: 6px;
  border-radius: 999px; background: var(--green); transform-origin: left center;
}
.isrc-s {
  grid-column: 2; grid-row: 2; justify-self: end;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  color: var(--green-text-light);
  border: 1px solid var(--mint-tint); background: var(--mint-wash);
  border-radius: 999px; padding: 3px 7px; white-space: nowrap;
}
/* the row that is meant to reach a person — a destination, not a leak */
.isrc--esc { border-color: var(--line); }
.isrc--esc .bar-f { background: var(--navy); }
.isrc--esc .isrc-s { color: var(--ink-muted-strong); border-color: var(--line); background: var(--surface-subtle); }

.inbx-line {
  margin: 11px 18px 0; padding: 8px 12px;
  background: var(--mint-wash); border: 1px solid var(--mint-tint); border-radius: 10px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--green-text-light); text-align: center;
}
.inbx-line i { font-style: normal; padding: 0 3px; color: var(--green); }

.inbx-rec {
  margin: 11px 18px 0; padding: 12px 14px;
  border: 1px solid rgba(0, 194, 110, 0.35); border-radius: 12px; background: var(--paper);
}
.inbx-rec .rec-k { color: var(--ink-muted); font-size: 9.5px; }

.inbx-dash {
  margin: 12px 18px 0; padding: 11px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  background: var(--navy); border-radius: 12px;
}
.inbx-dash .mono-label { color: var(--on-dark-muted); font-size: 9.5px; }
.inbx-total { margin-left: auto; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--green-bright); }
.inbx-rate { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-dark-muted); }

.inbx-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 15px 18px 18px;
}
.inbx-foot .mono-label { color: var(--ink-muted); font-size: 9.5px; }

@media (max-width: 440px) {
  .inbx-key { padding: 13px 14px 0; gap: 5px 12px; }
  .inbx-src { padding: 10px 14px 0; }
  /* the source chip is the longest string in the right column, so the column
     shrinks with it rather than squeezing the question on the left */
  .isrc { grid-template-columns: 1fr 88px; padding: 8px 10px; gap: 6px 9px; }
  .isrc-n { font-size: 12px; }
  .isrc-v { font-size: 11px; }
  .isrc-v i { font-size: 9px; }
  .isrc-s { font-size: 8px; padding: 3px 6px; }
  .inbx-line, .inbx-rec, .inbx-dash { margin-inline: 14px; }
  .inbx-line { font-size: 9px; letter-spacing: 0.05em; }
  .inbx-foot { padding: 13px 14px 16px; }
}

/* ---------- 04-vs-06, 05-vs-07, 03-vs-outbound-vs-08, 09-vs-organic-vs-outbound,
   10-vs-03-vs-09 and 11-vs-inbox-vs-01 comparison rows ----------
   Reuses .drivers geometry; only the tint and the emphasis differ. */
.svc-compare { background: var(--surface-subtle); }
.drivers.compare { margin-inline: auto; }
.drivers.compare span em { font-style: normal; font-weight: 600; color: var(--navy); }

/* ---------- system index rows (/services/ menu page) ----------
   Dark directory of the five systems. Static render = the full
   list; fx adds only the standard group reveal — no scene JS. */
.sys-index {
  margin-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid rgba(233, 236, 239, 0.14);
  position: relative; z-index: 2;
  text-align: left;
}
.sys-index li { border-bottom: 1px solid rgba(233, 236, 239, 0.14); }
.sys-index a {
  display: grid; grid-template-columns: 52px 1fr auto auto; gap: 8px 22px; align-items: center;
  padding: 24px 10px; text-decoration: none; color: inherit;
  transition: background var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.sys-index a:hover { background: rgba(0, 194, 110, 0.07); translate: 4px 0; }
.sys-n { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.09em; color: var(--green-bright); }
.sys-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 680; font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: -0.015em; color: var(--paper); line-height: 1.15;
  transition: color var(--dur) var(--ease);
}
.sys-index a:hover .sys-name { color: var(--green-bright); }
.sys-flag {
  font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 500;
  color: var(--cta-ink); background: var(--green-bright);
  border-radius: 999px; padding: 3px 9px;
}
.sys-out {
  display: block; margin-top: 6px;
  color: var(--on-dark-muted); font-size: 14.5px; line-height: 1.55; max-width: 46em;
}
.sys-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; font-weight: 500;
  color: var(--on-dark-muted);
  border: 1px solid rgba(233, 236, 239, 0.16); border-radius: 999px; padding: 5px 11px;
}
.sys-live .dot { width: 6px; height: 6px; background: var(--green); box-shadow: none; }
.sys-arrow { color: var(--green-bright); }
@media (max-width: 720px) {
  .sys-index a { grid-template-columns: 34px 1fr auto; padding: 20px 6px; gap: 8px 14px; }
  .sys-main { grid-column: 2; grid-row: 1; }
  .sys-live { grid-column: 2; grid-row: 2; justify-self: start; }
  .sys-arrow { grid-column: 3; grid-row: 1; }
}