/* ============================================================
   v2/pages.css

   Owned by the PAGES session (see V2-HANDOVER-PARALLEL.md section 3).
   The homepage session owns v2/styles.css and is appending to it live, so
   nothing here may be moved there. This file is linked AFTER styles.css on
   the pages that need it, which is what gives it source-order priority.

   Linked by: v2/ai-sales-employees.html, v2/ai-sales-employees-b.html

   Sections:
     1. Rhythm / light-surface system   verbatim from v2/services.html
     2. Stat (i) button + source modal  verbatim from v2/services.html
     3. AI sales employees catalogue    new, prefix .ase-
   ============================================================ */

/* ============================================================
   1. RHYTHM / LIGHT-SURFACE SYSTEM
   Verbatim copy of the block in v2/services.html's inline <style>.
   Every page carries its own copy of this because the tokens live in a
   per-page :root, NOT in styles.css. A page without it renders light
   sections with undefined tokens, which is the white-on-white bug.
   Keep in sync with v2/services.html if that block ever changes.
   ============================================================ */
/* ============================================================
   RHYTHM TWEAK - copied scoped subset from index.html so the
   services page alternates dark/light the same way.
   ============================================================ */
:root {
  --light-bg: #F5F0F2;
  --light-surface: #FFFFFF;
  --light-border: #E5E0E2;
  --light-h: #1C1719;
  --light-body: #544548;
  --light-muted: #876E73;
  --light-accent: #A07640;
  --light-accent-deep: #5C3F1F;
  --light-accent-rgb: 160, 118, 64;
}
body[data-rhythm="mixedv4"] { --light-bg: #EDEAEC; }

/* Section-level surface swap */
body[data-rhythm^="mixed"] .section--rhythm-light,
body[data-rhythm^="mixed"] .cta-band--rhythm-light {
  background: var(--light-bg);
  color: var(--light-body);
}
body[data-rhythm^="mixed"] .cta-band--rhythm-light::before { display: none; }
body[data-rhythm^="mixed"] .cta-band--rhythm-light { border-top-color: var(--light-border); }

/* Typography reskin in light sections */
body[data-rhythm^="mixed"] .section--rhythm-light h1,
body[data-rhythm^="mixed"] .section--rhythm-light h2,
body[data-rhythm^="mixed"] .section--rhythm-light h3,
body[data-rhythm^="mixed"] .section--rhythm-light h4,
body[data-rhythm^="mixed"] .section--rhythm-light h6,
body[data-rhythm^="mixed"] .section--rhythm-light .h-section,
body[data-rhythm^="mixed"] .cta-band--rhythm-light .cta-band-text { color: var(--light-h); }

body[data-rhythm^="mixed"] .section--rhythm-light p,
body[data-rhythm^="mixed"] .section--rhythm-light li,
body[data-rhythm^="mixed"] .section--rhythm-light .h-sub { color: var(--light-body); }

body[data-rhythm^="mixed"] .section--rhythm-light .eyebrow { color: var(--light-accent); }
body[data-rhythm^="mixed"] .section--rhythm-light .eyebrow::before { background: var(--light-accent); opacity: .35; }

body[data-rhythm^="mixed"] .section--rhythm-light .btn-primary,
body[data-rhythm^="mixed"] .cta-band--rhythm-light .btn-primary {
  background: var(--light-h); color: #fff; box-shadow: none;
}
body[data-rhythm^="mixed"] .section--rhythm-light .btn-primary:hover,
body[data-rhythm^="mixed"] .cta-band--rhythm-light .btn-primary:hover { background: #000; color: #fff; }
body[data-rhythm^="mixed"] .section--rhythm-light .btn-secondary,
body[data-rhythm^="mixed"] .cta-band--rhythm-light .btn-secondary {
  background: transparent; color: var(--light-h); border: 1.5px solid var(--light-h);
}
body[data-rhythm^="mixed"] .section--rhythm-light .btn-secondary:hover,
body[data-rhythm^="mixed"] .cta-band--rhythm-light .btn-secondary:hover { background: var(--light-h); color: #fff; }

body[data-rhythm^="mixed"] .section--rhythm-light + .cta-band:not(.cta-band--rhythm-light),
body[data-rhythm^="mixed"] .cta-band--rhythm-light + .section:not(.section--rhythm-light) {
  border-top: 1px solid var(--light-border);
}

/* ============================================================
   2. STAT (i) BUTTON AND SOURCE MODAL
   Verbatim copy from v2/services.html's inline <style>, so the (i)
   affordance on the catalogue page is identical to the one on services.
   ============================================================ */
/* Inline (i) info trigger inside stat callouts */

/* Stat-source modal (native <dialog>) */

/* ============================================================
   3. AI SALES EMPLOYEES CATALOGUE  (.ase-)
   ============================================================

   SPECIFICITY NOTE, read before editing:
   the light-surface rules above are (0,2,2), e.g.
     body[data-rhythm^="mixed"] .section--rhythm-light h3
   A plain `.ase-card-name { color: ... }` is (0,1,0) and silently LOSES,
   rendering dark text on a dark card. Every text-colour rule below is
   therefore written as
     body[data-rhythm^="mixed"] .ase-card <target>      -> (0,3,1)
   which outranks it on class count. Do not "simplify" these selectors.

   Colours come from per-context custom properties set on .ase-list, so
   one rule serves both the dark and light sections.
   ============================================================ */

.ase-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- context tokens ------------------------------------------------ */
.ase-list {
  --ase-surface: var(--plum-800, #2C2427);
  --ase-surface-hover: #332A2D;
  --ase-border: var(--plum-700, #3D3236);
  --ase-h: var(--plum-50, #F5F0F2);
  --ase-body: var(--plum-200, #C4B5BA);
  --ase-muted: var(--plum-400, #876E73);
  --ase-accent: var(--cyan-500, #D4A574);
  --ase-panel-bg: rgba(255, 255, 255, .025);
}
body[data-rhythm^="mixed"] .section--rhythm-light .ase-list {
  --ase-surface: var(--light-surface, #FFFFFF);
  --ase-surface-hover: #FBF9FA;
  --ase-border: var(--light-border, #E5E0E2);
  --ase-h: var(--light-h, #1C1719);
  --ase-body: var(--light-body, #544548);
  --ase-muted: #8A7E81;
  --ase-accent: var(--light-accent, #A07640);
  --ase-panel-bg: rgba(28, 23, 25, .022);
}

/* ---- hero ---------------------------------------------------------- */
.ase-hero { padding-top: 160px; padding-bottom: 48px; }
/* .section gives 120px top and bottom, which left ~240px of dead space between
   the hero and category 1. Tightened to ~112px. Scoped with the adjacent
   sibling so only the FIRST category moves; the rhythm between categories,
   and every other page using .section, are untouched. */
.ase-hero + .ase-cat { padding-top: 64px; }
.ase-hero-head { max-width: 860px; }
.ase-h1 { margin-bottom: 0; }

.ase-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.ase-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 11px;
  border: 1px solid var(--plum-700, #3D3236);
  border-radius: 999px;
  background: var(--plum-800, #2C2427);
  color: var(--plum-200, #C4B5BA);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: border-color .15s var(--ease-out, ease), color .15s var(--ease-out, ease), background .15s var(--ease-out, ease);
}
.ase-chip:hover {
  border-color: var(--cyan-500, #D4A574);
  color: var(--plum-50, #F5F0F2);
  background: #332A2D;
}
.ase-chip-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(212, 165, 116, .14);
  color: var(--cyan-500, #D4A574);
  font-size: 11.5px;
  font-weight: 700;
}
body[data-rhythm^="mixed"] .ase-hero .ase-note {
  max-width: 62ch;
  margin: 0;
  color: var(--plum-400, #876E73);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ============================================================
   2. STAT (i) BUTTON AND SOURCE MODAL
   Verbatim copy from v2/services.html's inline <style>, so the (i)
   affordance on the catalogue page is identical to the one on services.
   ============================================================ */
/* Inline (i) info trigger inside stat callouts */
.svc-stat-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--cyan-500-rgb, 212,165,116), .55);
  background: rgba(var(--cyan-500-rgb, 212,165,116), .12);
  color: var(--cyan-500, #D4A574);
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out);
  vertical-align: middle;
  flex-shrink: 0;
}

.svc-stat-info-btn:hover { background: rgba(var(--cyan-500-rgb, 212,165,116), .25); }

body[data-rhythm^="mixed"] .section--rhythm-light .svc-stat-info-btn {
  border-color: rgba(var(--light-accent-rgb), .55);
  background: rgba(var(--light-accent-rgb), .1);
  color: var(--light-accent);
}

body[data-rhythm^="mixed"] .section--rhythm-light .svc-stat-info-btn:hover {
  background: rgba(var(--light-accent-rgb), .2);
}

/* Stat-source modal (native <dialog>) */
.svc-stat-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 560px;
  width: calc(100% - 40px);
  border-radius: 14px;
  color: var(--plum-900, #1C1719);
}

.svc-stat-modal::backdrop {
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.svc-stat-modal-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 36px 32px 32px;
  position: relative;
  font-family: var(--font-body, 'Inter', sans-serif);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

.svc-stat-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(28,23,25,.12);
  color: rgba(28,23,25,.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}

.svc-stat-modal-close:hover { background: rgba(28,23,25,.05); color: var(--plum-900); }

.svc-stat-modal-close svg { width: 14px; height: 14px; }

.svc-stat-modal-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper-700, #A07640);
  margin: 0 0 10px;
}

.svc-stat-modal-heading {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--plum-900, #1C1719);
  margin: 0 0 8px;
}

.svc-stat-modal-source {
  font-size: 13px;
  color: rgba(28,23,25,.6);
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}

.svc-stat-modal-source a {
  color: var(--copper-700, #A07640);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.svc-stat-modal-source a:hover { text-decoration: underline; }

.svc-stat-modal-source a svg { width: 11px; height: 11px; }

.svc-stat-modal-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(28,23,25,.85);
  margin: 0 0 20px;
}

.svc-stat-modal-list-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--plum-900, #1C1719);
  margin: 0 0 12px;
}

.svc-stat-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-stat-modal-list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(28,23,25,.85);
  align-items: flex-start;
}

.svc-stat-modal-list li::before {
  content: "";
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #2F8F4E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

.svc-stat-info-btn { position: relative; z-index: 2; }

/* A plain source modal carries only the heading and the source line, so it
   needs less bottom padding than the rich one with findings under it. */
.svc-stat-modal-card--plain { padding-bottom: 26px; }

.svc-stat-modal-card--plain .svc-stat-modal-source { margin-bottom: 0; }

/* ---- category statistics -------------------------------------------
   A gap figure and its consequence, sitting under the category head.
   Statistics are per CATEGORY, not per agent. A category with no stats
   renders nothing, so this is safe while the set is half filled. */
.ase-cat-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: -40px 0 34px;
  max-width: 880px;
}
/* .ase-cat-bar tucks itself up with margin-top:-34px. Cancel that only where a
   stat strip precedes it, so categories without stats keep the old rhythm. */
.ase-cat-stats + .ase-cat-bar { margin-top: 0; }
.ase-cat-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--ase-border);
  border-radius: 12px;
  background: var(--ase-surface);
}
body[data-rhythm^="mixed"] .ase-cat-stat .ase-cat-stat-num {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ase-accent);
  font-variant-numeric: tabular-nums;
}
body[data-rhythm^="mixed"] .ase-cat-stat--gap .ase-cat-stat-num {
  color: var(--plum-300, #A98F95);
}
body[data-rhythm^="mixed"] .ase-cat-stat .ase-cat-stat-line {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ase-muted);
}
/* ---- category section ---------------------------------------------- */
.ase-cat-head { max-width: 780px; }

.ase-cat-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: -34px 0 26px;
}
body[data-rhythm^="mixed"] .ase-cat .ase-cat-blurb {
  max-width: 68ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--plum-400, #876E73);
}
body[data-rhythm^="mixed"] .section--rhythm-light .ase-cat-blurb { color: var(--light-body, #544548); }

.ase-expand-all {
  flex-shrink: 0;
  padding: 9px 16px;
  border: 1px solid var(--plum-700, #3D3236);
  border-radius: 8px;
  background: transparent;
  color: var(--plum-200, #C4B5BA);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s var(--ease-out, ease), color .15s var(--ease-out, ease);
}
.ase-expand-all:hover { border-color: var(--cyan-500, #D4A574); color: var(--cyan-500, #D4A574); }
body[data-rhythm^="mixed"] .section--rhythm-light .ase-expand-all {
  border-color: var(--light-border, #E5E0E2);
  color: var(--light-body, #544548);
}
body[data-rhythm^="mixed"] .section--rhythm-light .ase-expand-all:hover {
  border-color: var(--light-accent, #A07640);
  color: var(--light-accent, #A07640);
}

/* ---- the card ------------------------------------------------------ */
.ase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ase-card {
  position: relative;
  border: 1px solid var(--ase-border);
  border-radius: 12px;
  background: var(--ase-surface);
  transition: border-color .18s var(--ease-out, ease), background .18s var(--ease-out, ease);
}
.ase-card:hover { border-color: var(--ase-accent); }
.ase-card.open { border-color: var(--ase-accent); background: var(--ase-surface-hover); }

.ase-card-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  gap: 24px;
  padding: 20px 22px;
}

/* The whole head is the hit area. It is a real <button> stretched over the
   head rather than a wrapper <button>, because the (i) is itself a button
   and a button inside a button is invalid HTML. The (i) is lifted above it. */
.ase-card-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}
.ase-card-toggle:focus-visible {
  outline: 2px solid var(--ase-accent);
  outline-offset: 2px;
}

.ase-card-id {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
body[data-rhythm^="mixed"] .ase-card .ase-card-name {
  margin: 0;
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ase-h);
}

/* plus / minus toggle glyph, same idiom as .faq-plus in styles.css */
.ase-plus {
  position: relative;
  justify-self: end;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ase-border);
  border-radius: 50%;
  transition: background .18s var(--ease-out, ease), border-color .18s var(--ease-out, ease);
}
.ase-plus::before,
.ase-plus::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--ase-accent);
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease-out, ease), background .18s var(--ease-out, ease);
}
.ase-plus::before { width: 10px; height: 1.5px; }
.ase-plus::after { width: 1.5px; height: 10px; }
.ase-card.open .ase-plus { background: var(--ase-accent); border-color: var(--ase-accent); }
.ase-card.open .ase-plus::before,
.ase-card.open .ase-plus::after { background: var(--ase-surface); }
.ase-card.open .ase-plus::after { transform: translate(-50%, -50%) scaleY(0); }

/* ---- expanded body ------------------------------------------------- */
.ase-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s var(--ease-out, ease);
}
.ase-card-body-inner { padding: 4px 22px 24px; }
.ase-card-body-inner--plain { padding-bottom: 22px; }

body[data-rhythm^="mixed"] .ase-card .ase-desc {
  max-width: 78ch;
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ase-body);
}
.ase-card-body-inner--plain .ase-desc { margin-bottom: 0; }

.ase-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ase-border);
  border: 1px solid var(--ase-border);
  border-radius: 10px;
  overflow: hidden;
}
.ase-panel { background: var(--ase-surface); padding: 18px 20px 20px; }
.ase-panel--problem { background: var(--ase-panel-bg); }

body[data-rhythm^="mixed"] .ase-card .ase-panel-title {
  margin: 0 0 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ase-muted);
}
body[data-rhythm^="mixed"] .ase-card .ase-panel--outcome .ase-panel-title { color: var(--ase-accent); }

.ase-problem-list,
.ase-outcome-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body[data-rhythm^="mixed"] .ase-card .ase-problem-list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 16px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
}
body[data-rhythm^="mixed"] .ase-card .ase-problem-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 7px; height: 1.5px;
  background: var(--ase-muted);
}
body[data-rhythm^="mixed"] .ase-card .ase-problem { font-weight: 600; color: var(--ase-h); }
body[data-rhythm^="mixed"] .ase-card .ase-consequence { color: var(--ase-muted); font-size: 13.5px; line-height: 1.5; }

body[data-rhythm^="mixed"] .ase-card .ase-outcome-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ase-body);
}
body[data-rhythm^="mixed"] .ase-card .ase-outcome-list li::before {
  content: "";
  flex-shrink: 0;
  width: 17px; height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: #2F8F4E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

body[data-rhythm^="mixed"] .ase-card .ase-who {
  display: inline-block;
  margin: 18px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--ase-border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ase-muted);
}

/* provisional marker inside a placeholder stat's source modal */

/* draft-only variant switcher, removed at cutover */
.ase-variant-switch {
  background: #2C2427;
  border-top: 1px solid #3D3236;
  border-bottom: 1px solid #3D3236;
  padding: 14px 0;
}
.ase-variant-switch p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #C4B5BA;
}
.ase-variant-switch strong { color: #F5F0F2; }
.ase-variant-switch a { color: #D4A574; font-weight: 600; }

/* ---- breakpoints. Only the two already used by the design system. ---- */
@media (max-width: 1100px) {
  .ase-card-head { gap: 18px; }
}

@media (max-width: 780px) {
  .ase-hero { padding-top: 124px; padding-bottom: 36px; }
  .ase-cat-stats { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: -28px 0 26px; }
  .ase-cat-stat { padding: 16px 18px; }
  body[data-rhythm^="mixed"] .ase-cat-stat .ase-cat-stat-num { font-size: 26px; }
  .ase-hero + .ase-cat { padding-top: 48px; }

  .ase-cat-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin: -28px 0 22px;
  }

  .ase-card-head {
    grid-template-columns: minmax(0, 1fr) 26px;
    gap: 14px 16px;
    padding: 18px;
  }
  .ase-card-id { grid-column: 1; grid-row: 1; }
  .ase-plus { grid-column: 2; grid-row: 1; align-self: start; }

  body[data-rhythm^="mixed"] .ase-card .ase-card-name { font-size: 16px; }

  .ase-card-body-inner { padding: 2px 18px 20px; }
  .ase-panels { grid-template-columns: 1fr; }
  .ase-panel { padding: 16px 18px 18px; }

  .ase-chip { font-size: 12.5px; padding: 8px 13px 8px 9px; }
}

/* ============================================================
   4. SHARED NAV + BRIDGE CTA RULES
   Also verbatim from v2/services.html's inline <style>. These are NOT in
   styles.css either. Without them the nav renders BOTH logo variants
   stacked, and the final CTA loses the floating-card bridge treatment
   (the one Karim prefers) and renders as a flat band.
   ============================================================ */

/* Nav logo: dark page = show light-on-dark logo only */
.nav-brand img.brand-logo-for-light-bg { display: none; }
.nav-brand img.brand-logo-for-dark-bg { display: block; }

/* Local var alias so cyan-500-rgb resolves on copper */
body[data-accent="copper"] { --cyan-500-rgb: 212, 165, 116; }

/* ── BRIDGE CTA (dark→light floating card) ────────────────── */
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"].cta-band {
  background: linear-gradient(180deg, var(--plum-900, #1C1719) 0%, var(--plum-900, #1C1719) 50%, var(--light-bg) 50%, var(--light-bg) 100%);
  padding: 56px 0;
  border-top: none;
  border-bottom: none;
  position: relative;
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"].cta-band::before {
  display: none;
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] .cta-band-inner {
  background: var(--plum-800, #2C2427);
  border: 1px solid var(--plum-700, #3D3236);
  border-radius: 12px;
  padding: 28px 36px;
  max-width: 1120px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 24px 60px -30px rgba(0,0,0,.35);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] .cta-band-text {
  color: var(--plum-50, #F5F0F2);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] .btn-primary {
  background: var(--cyan-500, #D4A574);
  color: var(--plum-900, #1C1719);
  border: none;
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] .btn-primary:hover {
  background: var(--cyan-200, #E8C9A4);
  color: var(--plum-900, #1C1719);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] .btn-secondary {
  background: transparent;
  color: var(--cyan-500, #D4A574);
  border: 1.5px solid var(--cyan-500, #D4A574);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] .btn-secondary:hover {
  background: rgba(212,165,116,.08);
  color: var(--cyan-500, #D4A574);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] + .section--rhythm-light,
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] + .section,
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] + .svc-domain {
  border-top: none !important;
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] + .section--rhythm-light .svc-domain-head,
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] + .svc-domain .svc-domain-head {
  border-top: none;
}
@media (max-width: 780px) {
  body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-down"] .cta-band-inner {
    padding: 24px;
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* ============================================================
   5. BRIDGE CTA, UPWARD VARIANT  (light section -> dark footer)
   The stock "bridge-down" above runs dark on top, light underneath, for a
   dark section flowing into a light one. This page ends on category 8,
   which is LIGHT, and is followed by the dark footer, so it needs the
   mirror: light on top, dark underneath. Same floating card, same copper
   buttons, gradient reversed.
   ============================================================ */
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"].cta-band {
  background: linear-gradient(180deg, var(--light-bg) 0%, var(--light-bg) 50%, var(--plum-900, #1C1719) 50%, var(--plum-900, #1C1719) 100%);
  padding: 56px 0;
  border-top: none;
  border-bottom: none;
  position: relative;
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"].cta-band::before { display: none; }
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"] .cta-band-inner {
  background: var(--plum-800, #2C2427);
  border: 1px solid var(--plum-700, #3D3236);
  border-radius: 12px;
  padding: 28px 36px;
  max-width: 1120px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 24px 60px -30px rgba(0,0,0,.35);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"] .cta-band-text { color: var(--plum-50, #F5F0F2); }
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"] .btn-primary {
  background: var(--cyan-500, #D4A574);
  color: var(--plum-900, #1C1719);
  border: none;
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"] .btn-primary:hover {
  background: var(--cyan-200, #E8C9A4);
  color: var(--plum-900, #1C1719);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"] .btn-secondary {
  background: transparent;
  color: var(--cyan-500, #D4A574);
  border: 1.5px solid var(--cyan-500, #D4A574);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"] .btn-secondary:hover {
  background: rgba(212,165,116,.08);
  color: var(--cyan-500, #D4A574);
}
/* the footer sits directly under the dark half, so no seam */
body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"] + .foot { border-top: none; }
@media (max-width: 780px) {
  body[data-rhythm^="mixedv"] [data-rhythm-section="bridge-up"] .cta-band-inner {
    padding: 24px;
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* ============================================================
   6. ALL-DARK PAGE OVERRIDES
   Karim asked for no light background anywhere on this page, so no category
   section carries .section--rhythm-light. One consequence: the gradient
   bridges in 4 and 5 have nothing to bridge between, so the final CTA uses a
   solid dark band that keeps the floating card.
   The light tokens in section 3 are left defined but unused, so reinstating
   an alternating page later is a one-line change in the generator.
   ============================================================ */
body[data-rhythm^="mixedv"] [data-rhythm-section="ase-cta-dark"].cta-band {
  background: var(--plum-900, #1C1719);
  padding: 56px 0;
  border-top: none;
  border-bottom: none;
  position: relative;
}
body[data-rhythm^="mixedv"] [data-rhythm-section="ase-cta-dark"].cta-band::before { display: none; }
body[data-rhythm^="mixedv"] [data-rhythm-section="ase-cta-dark"] .cta-band-inner {
  background: var(--plum-800, #2C2427);
  border: 1px solid var(--plum-700, #3D3236);
  border-radius: 12px;
  padding: 28px 36px;
  max-width: 1120px;
  box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 24px 60px -30px rgba(0,0,0,.35);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="ase-cta-dark"] .cta-band-text { color: var(--plum-50, #F5F0F2); }
body[data-rhythm^="mixedv"] [data-rhythm-section="ase-cta-dark"] .btn-primary {
  background: var(--cyan-500, #D4A574);
  color: var(--plum-900, #1C1719);
  border: none;
}
body[data-rhythm^="mixedv"] [data-rhythm-section="ase-cta-dark"] .btn-primary:hover {
  background: var(--cyan-200, #E8C9A4);
  color: var(--plum-900, #1C1719);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="ase-cta-dark"] .btn-secondary {
  background: transparent;
  color: var(--cyan-500, #D4A574);
  border: 1.5px solid var(--cyan-500, #D4A574);
}
body[data-rhythm^="mixedv"] [data-rhythm-section="ase-cta-dark"] .btn-secondary:hover {
  background: rgba(212,165,116,.08);
  color: var(--cyan-500, #D4A574);
}

/* 8 identical dark sections in a row need some edge between them */
.ase-cat + .ase-cat { border-top: 1px solid rgba(255, 255, 255, .055); }

@media (max-width: 780px) {
  body[data-rhythm^="mixedv"] [data-rhythm-section="ase-cta-dark"] .cta-band-inner {
    padding: 24px;
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* ============================================================
   7. SINGLE-PAGE LAYOUT (was version B)
   Karim picked the description-only card, so the A/B pair is gone.

   The problem this fixes: at the 1200px container an expanded card showed a
   paragraph filling roughly half the row, leaving a large void to the right.
   The homepage FAQ solves this by narrowing its container to 820px
   (.faq-wrap) and letting the answer fill it with no max-width. Same idea
   here, on a slightly wider column because these rows also carry a statistic.
   The FAQ also puts a copper rule down the left of the answer; Karim did not
   want that here, so the description is plain.
   ============================================================ */

/* One column width for the whole page so the category headings, the intro
   line and the cards all share a left edge. */
.ase-hero .wrap,
.ase-cat .wrap { max-width: 1000px; }

.ase-card-head { grid-template-columns: minmax(0, 1fr) minmax(0, 330px) 26px; gap: 20px; }

/* Expanded description: copper rule, filling the column, matching .faq-a-inner */
.ase-card-body-inner {
  padding: 2px 22px 24px;
}
body[data-rhythm^="mixedv"] .ase-card .ase-desc {
  max-width: none;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ase-body);
}

@media (max-width: 1100px) {
  .ase-card-head { grid-template-columns: minmax(0, 1fr) minmax(0, 290px) 26px; gap: 18px; }
}
@media (max-width: 780px) {
  /* stacked head, so the stat column rule from section 3 applies again */
  .ase-card-head { grid-template-columns: minmax(0, 1fr) 26px; gap: 14px 16px; }
  .ase-card-body-inner { padding: 2px 18px 20px; }
}

/* A plain source modal carries only the heading and the source line, so it
   needs less bottom padding than the rich one with findings under it. */