/* M11 audit page styles.
   Tokens come from m11-tokens.css (canonical
   m11-design-system/project/colors_and_type.css).

   Local named tokens for accent colors not in the design system but
   used consistently across the audit surface:
     --accent-amber-warm  - warning tone (warn score, lagging label)
     --accent-red-warm    - accuracy / exposure tag tone */
/* =============================================================
   0. Print + screenshot guards. The audit page is a live demo of
   the M11 swarm output; we don't want it walking around as a
   static PDF/PNG without context. CSS-only blocks are best-effort
   (a determined user can override) but stops the casual case.
   ============================================================= */
@media print {
  html, body { display: none !important; }
}
body {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Inputs still need to be selectable so users can type into them
   and read what they've typed. */
input, textarea, .audit-chat-line.you {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

:root {
  --accent-amber-warm: #b56a13;
  --accent-red-warm:   #b24a2c;
  /* The canonical design-system spacing scale skips the "5" slot
     (--space-4 = 16px, --space-6 = 24px). The audit surface uses 20px
     in several places as a middle step. Defining it locally avoids the
     silent-fallback-to-0 bug that was leaving stripes and gaps collapsed
     against their neighbours. */
  --space-5: 1.25rem;
}


   Hard rules enforced here (M11 design system README):
     1. Light theme, sans-serif only - Manrope display + Inter body.
     2. The No-Line Rule. Sections separate via surface-step backgrounds,
        not 1px borders.
     3. Aggressive whitespace - 4rem (--space-16) to 5rem (--space-20)
        between major blocks.
     4. Industrial motion - 250ms cubic-bezier(0.4, 0, 0.2, 1).
     5. Editorial corner-radius rail for Portal/Audit surfaces - tight
        radii (xs 2px / sm 4px / md 8px / lg 12px). NEVER soft 24-32px.
   The card pattern follows preview/comp-signal-cards.html: white card on
   warm stage, NO border, two-layer drop shadow.
*/

/* =============================================================
   1. Page shell
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal, 1.5);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--m11-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* First-visit help modal. Backdrop + centered card. Slides + fades
   in on mount. Dismissed via the "Got it" button, the X, the
   backdrop, or Escape. Once dismissed, localStorage prevents it
   showing again for this browser. */
.help-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  animation: help-modal-fade 280ms var(--ease-out);
}
@keyframes help-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.help-modal[hidden] { display: none; }
.help-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 26, 23, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.help-modal-card {
  position: relative;
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-10) var(--space-8);
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 60px -16px rgba(28, 26, 23, 0.45),
              0 4px 12px -4px rgba(28, 26, 23, 0.18);
  animation: help-modal-rise 320ms var(--ease-out);
}
@media (max-width: 600px) {
  .help-modal-card { padding: var(--space-6); }
}
@keyframes help-modal-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.help-modal-close {
  position: absolute; top: var(--space-3); right: var(--space-4);
  background: transparent; border: 0;
  font-size: 26px; line-height: 1;
  color: var(--fg-3); cursor: pointer;
  padding: 4px 8px;
  transition: color var(--duration-fast) var(--ease-industrial);
}
.help-modal-close:hover { color: var(--fg-1); }
.help-modal-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--m11-primary);
  margin: 0 0 var(--space-3);
}
.help-modal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--m11-primary-fixed);
  animation: chat-dot-pulse 1.6s var(--ease-industrial) infinite;
}
.help-modal-title {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
.help-modal-lead {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 var(--space-6);
}
.help-modal-steps {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex; flex-direction: column;
  gap: var(--space-4);
}
.help-modal-steps li {
  display: flex; align-items: flex-start;
  gap: var(--space-4);
}
.help-modal-step-num {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--m11-primary);
  color: var(--m11-on-primary);
  font-family: var(--font-display);
  font-size: var(--text-body-md);
  font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.help-modal-step-title {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin-bottom: 2px;
}
.help-modal-step-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: var(--fg-2);
}
.help-modal-cta {
  width: 100%;
  margin-top: var(--space-2);
}

/* Topbar - absolutely positioned top-left so the logo does NOT
   consume its own vertical row. The hero / chat starts at the top
   of the page and the logo just sits in the corner alongside it. */
.audit-topbar {
  position: absolute;
  top: var(--space-3);
  left: var(--space-6);
  display: inline-flex; align-items: center;
  z-index: 5;
}
@media (max-width: 720px) {
  .audit-topbar { top: var(--space-2); left: var(--space-3); }
}
.audit-logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg-1); }
.audit-logo img { height: 22px; width: auto; display: block; }
.audit-logo-mark {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-body-lg);
  letter-spacing: var(--tracking-tightest);
}
.audit-topbar-spacer { flex: 1; }
.audit-topbar-label {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}
.audit-admin-delete {
  margin-left: var(--space-4);
  padding: 8px 14px;
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--m11-error);
  background: transparent;
  border: 1px solid var(--m11-error);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-industrial),
              color var(--duration-fast) var(--ease-industrial);
}
.audit-admin-delete:hover:not(:disabled) {
  background: var(--m11-error);
  color: var(--m11-on-error, #fff);
}
.audit-admin-delete:disabled { opacity: 0.55; cursor: progress; }

/* Shell */
.audit-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8) var(--space-20);
}
.audit-shell-narrow { max-width: 640px; }
@media (max-width: 720px) {
  .audit-shell { padding: var(--space-8) var(--space-4) var(--space-16); }
}

/* Landing viewport-fit (all heights). Whole conversation on screen,
   no page-level scroll. Chat thread absorbs whatever space is left
   and scrolls internally. Compression tiers below cascade as the
   viewport shrinks - chat ALWAYS gets first-class real estate. */
body[data-page="landing"] {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;                  /* anchors the absolutely-placed topbar */
}
body[data-page="landing"] .audit-topbar { flex: 0 0 auto; }
body[data-page="landing"] .audit-footer { flex: 0 0 auto; margin-top: 0; }
body[data-page="landing"] .audit-shell {
  flex: 1 1 auto;
  min-height: 0;                       /* critical for child flex-grow */
  display: flex;
  flex-direction: column;
  /* Top padding clears the absolutely-positioned logo AND adds a
     deliberate breathing gap above the eyebrow so the page does
     not feel pushed up against the top of the viewport. */
  padding-top: var(--space-12);
  padding-bottom: var(--space-6);
  overflow: hidden;
}
body[data-page="landing"] .audit-chat {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--space-6);
}
body[data-page="landing"] .audit-thread {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-bottom: 0;
}
body[data-page="landing"] .audit-subhero { margin-bottom: var(--space-6); }
body[data-page="landing"] .audit-depth {
  margin: var(--space-6) 0;
  padding-top: var(--space-4);
}
body[data-page="landing"] .audit-depth-grid { gap: var(--space-3); }
body[data-page="landing"] .audit-depth-card { padding: var(--space-4); }

/* Standard-laptop compression - applies to ALL viewports >= 800px.
   The chat is the page. Marketing chrome gets aggressively reduced
   even on bigger screens so the conversation always has real
   estate, never feels like the page is mostly above the fold. */
@media (min-height: 800px) {
  body[data-page="landing"] .audit-hero {
    font-size: var(--text-display-md);     /* 40px instead of 56px */
    margin-bottom: var(--space-2);
    max-width: 22ch;
  }
  body[data-page="landing"] .audit-eyebrow { margin-bottom: var(--space-2); }
  body[data-page="landing"] .audit-subhero {
    font-size: var(--text-body-md);        /* 14px */
    margin-bottom: var(--space-3);
    max-width: 68ch;
  }
  /* Depth strip stays as three columns but tighter: drop the
     headline above, slim the cards, keep the aggressive sub-line
     visible since that's where the value-prop lands. */
  body[data-page="landing"] .audit-depth {
    margin: var(--space-3) 0;
    padding-top: var(--space-2);
  }
  body[data-page="landing"] .audit-depth-headline { display: none; }
  body[data-page="landing"] .audit-depth-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
  body[data-page="landing"] .audit-depth-card {
    padding: var(--space-3) var(--space-4);
    box-shadow: none;
    background: transparent;
  }
  body[data-page="landing"] .audit-depth-col-label {
    font-size: var(--text-label-xs);
    margin-bottom: var(--space-1);
  }
  body[data-page="landing"] .audit-depth-col-title {
    font-size: var(--text-body-lg);        /* 16px */
    line-height: 1.25;
    margin: 0 0 var(--space-1);
  }
  body[data-page="landing"] .audit-depth-col-sub {
    font-size: var(--text-body-sm);        /* 13px */
    line-height: 1.45;
    max-width: 28ch;
    color: var(--fg-2);
  }
  body[data-page="landing"] .audit-shell {
    padding-top: var(--space-10);
    padding-bottom: var(--space-4);
  }
  body[data-page="landing"] .audit-chat { margin-top: var(--space-3); }
}

/* Tight-laptop squeeze: viewport <= 800px tall (1366x768 with chrome,
   smaller laptops). Marketing cards hidden; chat is the page. */
@media (max-height: 800px) {
  body[data-page="landing"] .audit-eyebrow {
    margin-bottom: var(--space-1);
    font-size: var(--text-label-md);
  }
  body[data-page="landing"] .audit-hero {
    font-size: var(--text-headline-lg);    /* 32px */
    line-height: 1.1;
    margin: 0 0 var(--space-2);
    max-width: 24ch;
  }
  body[data-page="landing"] .audit-subhero {
    font-size: var(--text-body-sm);        /* 13px */
    line-height: 1.5;
    margin-bottom: var(--space-3);
    max-width: 70ch;
  }
  body[data-page="landing"] .audit-depth { display: none; }
  body[data-page="landing"] .audit-shell {
    padding-top: var(--space-8);
    padding-bottom: var(--space-3);
  }
  body[data-page="landing"] .audit-chat { margin-top: var(--space-3); }
  body[data-page="landing"] .audit-footer {
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-label-xs);
  }
}

/* Ultra-tight: mobile-landscape and pop-up windows (< 600px tall).
   Hero collapses to a single line, subhero hidden, topbar tucked
   smaller. The chat is essentially the entire page. */
@media (max-height: 600px) {
  body[data-page="landing"] .audit-topbar {
    top: var(--space-1);
    left: var(--space-3);
  }
  body[data-page="landing"] .audit-logo img { height: 18px; }
  body[data-page="landing"] .audit-logo-mark { font-size: var(--text-body-md); }
  body[data-page="landing"] .audit-eyebrow { display: none; }
  body[data-page="landing"] .audit-hero {
    font-size: var(--text-headline-md);    /* 24px */
    margin: 0 0 var(--space-1);
    max-width: none;
  }
  body[data-page="landing"] .audit-subhero { display: none; }
  body[data-page="landing"] .audit-shell {
    padding: var(--space-3) var(--space-4);
  }
  body[data-page="landing"] .audit-chat { margin-top: var(--space-2); }
  body[data-page="landing"] .audit-footer {
    padding: var(--space-1) var(--space-4);
    font-size: 10px;
  }
}

/* Footer - minimal. Single line of copy, compact padding so it
   doesn't eat vertical budget on laptop viewports. */
.audit-footer {
  max-width: 1080px; margin: var(--space-12) auto 0;
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  color: var(--fg-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
}
.audit-footer a { color: var(--fg-3); }
.audit-footer a:hover { color: var(--m11-primary); text-decoration: none; }

/* =============================================================
   1b. Result page header - eyebrow + display title + subhead.
       Distinct from the landing hero so the result page has its
       own clear "this is your audit for X" framing.
   ============================================================= */
.audit-page-head { margin-bottom: var(--space-12); }
.audit-page-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--m11-primary);
  margin: 0 0 var(--space-4);
}
.audit-page-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--m11-primary);
}
.audit-page-title {
  font-family: var(--font-display);
  font-size: var(--text-display-md);         /* 40px - H1, sits above 32px H2 */
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tightest);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}
@media (max-width: 720px) {
  .audit-page-title { font-size: var(--text-headline-lg); }
}
.audit-page-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);            /* 16px */
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  margin: 0;
  max-width: 56ch;
}

/* =============================================================
   2. Hero stack (landing page)
   ============================================================= */
.audit-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-label);
  font-size: var(--text-label-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--space-4);
}
.audit-eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--m11-primary);
  box-shadow: 0 0 0 4px rgba(0, 84, 64, 0.10);
}
.audit-hero {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--leading-tight, 1.1);
  letter-spacing: var(--tracking-tightest);
  font-weight: var(--fw-extrabold);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
  max-width: 14ch;
}
@media (max-width: 720px) { .audit-hero { font-size: var(--text-display-md); } }
.audit-subhero {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed, 1.65);
  color: var(--fg-2);
  max-width: 56ch;
  margin: 0 0 var(--space-12);
}

/* =============================================================
   3. Depth strip (landing) - surface-step cards, no borders
   ============================================================= */
.audit-depth {
  margin: var(--space-12) 0;
  padding-top: var(--space-10);
  /* surface-step instead of border per No-Line Rule */
  background: linear-gradient(to bottom, transparent 0, transparent calc(1px), var(--bg-0) calc(1px));
}
.audit-depth-headline {
  font-family: var(--font-label);
  font-size: var(--text-label-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--space-6);
}
.audit-depth-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
@media (min-width: 720px) { .audit-depth-grid { grid-template-columns: repeat(3, 1fr); } }
.audit-depth-card {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
  transition: transform var(--duration-base) var(--ease-industrial),
              box-shadow var(--duration-base) var(--ease-industrial);
}
.audit-depth-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.04),
              0 22px 48px -24px rgba(28, 26, 23, 0.18);
}
.audit-depth-col-label {
  font-family: var(--font-label);
  font-size: var(--text-label-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--m11-primary);
  margin-bottom: var(--space-3);
}
.audit-depth-col-title {
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug, 1.25);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
.audit-depth-col-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-relaxed, 1.65);
  color: var(--fg-2);
  margin: 0;
}

/* =============================================================
   4. Conversational chat thread (landing) - speaker-grouped bubbles
   with asymmetric tails, live status dot, quick-reply chips. Tighter
   gaps WITHIN a turn, looser BETWEEN turns so M11's consecutive lines
   read as one voice, not three.
   ============================================================= */
.audit-chat {
  margin-top: var(--space-12);
  display: flex; flex-direction: column;
  gap: var(--space-4);
}
.audit-thread {
  display: flex; flex-direction: column;
  gap: var(--space-6);                  /* BETWEEN-TURN rhythm */
  margin-bottom: var(--space-4);
  /* Internal scroll for the chat thread - so the rest of the page
     stays anchored and the conversation feels like a contained
     chat surface instead of an ever-growing scroll. Hide the
     scrollbar visually; users still scroll naturally. */
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: none;                /* Firefox */
  scroll-behavior: smooth;
  scroll-padding-bottom: var(--space-6);
  position: relative;
}
.audit-thread::-webkit-scrollbar { display: none; }       /* Safari/Chrome */

/* One conversational "turn" - avatar column + stack of bubbles for
   the same speaker. Consecutive turns from the same speaker collapse
   into a single turn so the avatar appears once. */
.chat-turn {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.chat-turn-m11 { justify-content: flex-start; }
.chat-turn-user { justify-content: flex-end; }

/* Avatar - left for M11, right for user. */
.chat-avatar {
  position: relative;
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tightest);
  line-height: 1;
  color: var(--m11-on-primary);
  background: var(--m11-primary);
}
.chat-turn-user .chat-avatar {
  background: var(--m11-surface-container);
  color: var(--fg-1);
  order: 2;
}
/* Live status dot - pulses to signal "the swarm is actually working".
   Uses --m11-primary-fixed (bright mint from the M11 palette) so the
   dot reads as a status, not part of the logo. Pure design-system
   tokens, no off-palette hex. */
.chat-avatar-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--m11-primary-fixed);
  box-shadow: 0 0 0 2px var(--bg-0);
  animation: chat-dot-pulse 1.6s var(--ease-industrial) infinite;
}
@keyframes chat-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.2); opacity: 0.6; }
}

/* Stack of bubbles for a single turn. Tighter gap WITHIN the turn. */
.chat-stack {
  display: flex; flex-direction: column;
  gap: var(--space-2);                  /* WITHIN-TURN rhythm */
  max-width: 60ch;
  min-width: 0;
}
.chat-turn-user .chat-stack { align-items: flex-end; }

/* Tiny eyebrow above the very first M11 bubble in a turn. */
.chat-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-label);
  font-size: var(--text-label-md);      /* 12px */
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--space-1);
}
.chat-meta::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--m11-primary-fixed);
}

/* Bubble - asymmetric corner radii give it a tail anchor without
   needing a real CSS triangle. */
.chat-bubble {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);       /* 16px */
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  padding: 12px 18px;
  background: var(--bg-2);
  word-break: break-word;
  opacity: 0; transform: translateY(8px); filter: blur(4px);
  animation: audit-line-rise 420ms var(--ease-out) forwards;
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 6px 18px -10px rgba(28, 26, 23, 0.12);
}
/* M11 bubble - left tail; user bubble - right tail. The "tail" is just
   one squared-off corner facing the avatar. */
.chat-turn-m11  .chat-bubble {
  border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.chat-turn-user .chat-bubble {
  background: var(--m11-primary);
  color: var(--m11-on-primary);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg);
}

/* Typing indicator - same bubble geometry, dots inside. */
.chat-typing {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-lg);
  width: fit-content;
  opacity: 0; transform: translateY(8px); filter: blur(4px);
  animation: audit-line-rise 420ms var(--ease-out) forwards;
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 6px 18px -10px rgba(28, 26, 23, 0.12);
}
.chat-typing .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--m11-primary);
  animation: audit-dot-bounce 1.2s ease-in-out infinite;
}
.chat-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing .dot:nth-child(3) { animation-delay: 0.30s; }

/* Background-work chip - "Pulling 3 sources" pill that visualises
   the parallel work the copy is referencing. Fades out after a few
   seconds; pulse dot signals live activity. */
.chat-work-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(0, 84, 64, 0.08);
  color: var(--m11-primary);
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  width: fit-content;
  opacity: 0;
  animation: audit-line-rise 420ms var(--ease-out) forwards;
  transition: opacity 600ms var(--ease-industrial);
}
.chat-work-chip.fading { opacity: 0.4; }
.chat-work-chip::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--m11-primary);
  animation: chat-dot-pulse 1.4s var(--ease-industrial) infinite;
}

/* Quick-reply chips - tappable contextual options under an M11 question
   to reduce cold-start. Pre-baked per chat step (no AI required). */
.chat-chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-2);
  opacity: 0;
  animation: audit-line-rise 420ms var(--ease-out) 200ms forwards;
}
.chat-chip {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 4px 12px -8px rgba(28, 26, 23, 0.18);
  transition: background var(--duration-fast) var(--ease-industrial),
              transform var(--duration-fast) var(--ease-industrial);
}
.chat-chip:hover {
  background: rgba(0, 84, 64, 0.06);
  transform: translateY(-1px);
}
.chat-chip:active { transform: translateY(0); }

/* "Scroll to latest" floating affordance. Sits inside a scrollable
   container's parent (position: sticky/relative pattern) and only
   shows when JS sees the user has scrolled away from the bottom.
   Two variants: chat-thread and swarm-rail share the same look. */
.scroll-jump {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--m11-primary);
  color: var(--m11-on-primary);
  border: 0;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(4px);
  transition: opacity 200ms var(--ease-industrial),
              transform 200ms var(--ease-industrial);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,84,64,0.25);
  z-index: 2;
}
.scroll-jump.visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
.scroll-jump::after {
  content: "";
  width: 8px; height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -2px);
}
.audit-chat, .swarm-panel { position: relative; }
/* Inside the landing chat, the form input sits at the bottom of
   .audit-chat, so the scroll-jump button needs to clear it. Bump
   up enough that they never overlap on any input height. */
.audit-chat .scroll-jump {
  bottom: 84px;
}

/* Cursor blink on streaming M11 lines. */
.chat-bubble .cursor {
  display: inline-block; width: 1.5px; height: 0.95em;
  background: var(--m11-primary);
  margin-left: 3px; vertical-align: -2px;
  animation: audit-blink 0.9s steps(1) infinite;
}

@keyframes audit-line-rise  { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes audit-blink      { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes audit-dot-bounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
                              30%           { opacity: 1;   transform: translateY(-4px); } }

/* Keep the inbox-check countdown line readable below the chat. */
.audit-chat-line-mut {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--fg-2);
  margin: var(--space-3) 0 0;
  max-width: 60ch;
}

/* =============================================================
   4b. Swarm-running panel - agent rail with phase bar, per-agent
       status icons + streaming text, footer summary chips. Replaces
       the old orchestrator orb during the live run.
   ============================================================= */
.swarm-panel {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-10);
  margin: var(--space-8) 0 var(--space-12);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
  transition: opacity 500ms var(--ease-industrial),
              transform 500ms var(--ease-industrial);
}
@media (max-width: 720px) { .swarm-panel { padding: var(--space-6); } }
/* Finished state - panel stays visible (rail acts as a "what just
   happened" summary) but the live-activity affordances calm down. */
.swarm-panel.finished .swarm-eyebrow-dot,
.swarm-panel.finished .swarm-next-dot {
  animation: none;
  background: var(--m11-primary);
}
.swarm-panel.finished .swarm-next {
  color: var(--m11-primary);
}
.swarm-panel.finished .swarm-phaseseg.active {
  background: var(--m11-primary);
}
.swarm-panel.finished .swarm-phaseseg.active::after { display: none; }

/* Head: eyebrow + title + sub on the left, phase counter + elapsed
   on the right. */
.swarm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.swarm-head-left { min-width: 0; }
.swarm-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--m11-primary);
  margin: 0 0 var(--space-3);
}
.swarm-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--m11-primary-fixed);
  animation: chat-dot-pulse 1.6s var(--ease-industrial) infinite;
}
.swarm-title {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);     /* 24px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}
.swarm-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--fg-2);
  margin: 0;
}
.swarm-sub-sep { margin: 0 6px; color: var(--fg-3); }
.swarm-head-right {
  text-align: right;
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  color: var(--m11-primary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  line-height: 1.4;
}
.swarm-elapsed {
  color: var(--fg-3);
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-medium);
  margin-top: 4px;
}

/* Phase bar - 4 segments. CSS classes added by JS: .active for the
   currently running phase (animates), .done for completed. */
.swarm-phasebar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.swarm-phaseseg {
  height: 4px;
  border-radius: 2px;
  background: var(--m11-surface-container);
  position: relative;
  overflow: hidden;
}
.swarm-phaseseg.done {
  background: var(--m11-primary);
}
.swarm-phaseseg.active {
  background: var(--m11-primary-fixed);
}
.swarm-phaseseg.active::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--m11-primary), transparent);
  animation: swarm-phase-shimmer 1.8s linear infinite;
}
@keyframes swarm-phase-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Agent rail - ordered list of agent rows with a faint timeline line
   running down the icon column. Internal scroll keeps the panel a
   bounded surface so the rest of the page stays anchored. */
.swarm-rail {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.swarm-rail::-webkit-scrollbar { display: none; }
.swarm-rail::before {
  /* Faint vertical timeline rail behind the icons. */
  content: "";
  position: absolute;
  left: 9px; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--m11-surface-container);
  border-radius: 1px;
}
.swarm-agent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-3) 0;
  position: relative;
}

/* Status icon - same 20x20 slot for all three states, swap shape
   via CSS based on data-status. */
.swarm-agent-icon {
  position: relative;
  width: 20px; height: 20px;
  flex: 0 0 20px;
  display: inline-block;
  margin-top: 2px;
  z-index: 1;
}
/* Queued: dashed outline circle. */
.swarm-agent[data-status="queued"] .swarm-agent-icon::before {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 50%;
  border: 1.5px dashed var(--fg-3);
  background: var(--bg-2);
}
/* Running: pulsing solid ring around primary-fixed mint core. */
.swarm-agent[data-status="running"] .swarm-agent-icon::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--m11-primary-fixed);
  opacity: 0.35;
  animation: swarm-icon-pulse 1.5s var(--ease-industrial) infinite;
}
.swarm-agent[data-status="running"] .swarm-agent-icon::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: var(--m11-primary);
  box-shadow: 0 0 0 2px var(--bg-2);
}
@keyframes swarm-icon-pulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50%      { transform: scale(1.3); opacity: 0; }
}
/* Done: filled primary circle with a tick glyph. */
.swarm-agent[data-status="done"] .swarm-agent-icon::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--m11-primary);
  box-shadow: 0 0 0 2px var(--bg-2);
}
.swarm-agent[data-status="done"] .swarm-agent-icon::after {
  content: "";
  position: absolute;
  left: 6px; top: 9px;
  width: 5px; height: 9px;
  border: solid var(--m11-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.swarm-agent-body { min-width: 0; }
.swarm-agent-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.swarm-agent-label {
  font-family: var(--font-label);
  font-size: var(--text-label-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-1);
}
.swarm-agent[data-status="queued"] .swarm-agent-label { color: var(--fg-3); }
.swarm-agent-state {
  font-family: var(--font-mono);
  font-size: var(--text-label-md);
  color: var(--fg-3);
}
.swarm-agent-text {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  max-width: 70ch;
}
.swarm-agent[data-status="queued"] .swarm-agent-text { color: var(--fg-3); }
.swarm-agent[data-status="done"] .swarm-agent-text { color: var(--fg-2); }
.swarm-agent[data-status="running"] .swarm-agent-text { color: var(--fg-1); }
/* Live cursor on the running row's last line. */
.swarm-agent[data-status="running"] .swarm-agent-text::after {
  content: "";
  display: inline-block;
  width: 6px; height: 14px;
  background: var(--m11-primary);
  margin-left: 4px;
  vertical-align: -2px;
  animation: audit-blink 0.9s steps(1) infinite;
}

/* Inline data chips inside agent text. JS wraps numbers + entity
   names with .swarm-chip when it detects them. */
.swarm-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  border-radius: var(--radius-full);
  background: rgba(0, 84, 64, 0.10);
  color: var(--m11-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  vertical-align: 1px;
  white-space: nowrap;
}

/* Footer summary - metric chips + next-beat status. */
.swarm-foot {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  /* surface-step separator instead of a 1px line */
  background: linear-gradient(to bottom,
    var(--m11-outline-variant) 0,
    var(--m11-outline-variant) 1px,
    transparent 1px);
  flex-wrap: wrap;
}
.swarm-metrics {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.swarm-metric {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--m11-surface-container);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}
.swarm-metric strong {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.swarm-next {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--accent-amber-warm);
  font-weight: var(--fw-medium);
}
.swarm-next-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-amber-warm);
  animation: chat-dot-pulse 1.6s var(--ease-industrial) infinite;
}

/* =============================================================
   5. Inputs + buttons
   ============================================================= */
.audit-input-row { display: flex; gap: var(--space-3); flex-direction: column; }
@media (min-width: 600px) { .audit-input-row { flex-direction: row; } }
.audit-input {
  flex: 1 1 auto;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  background: var(--bg-2);
  border: 1px solid var(--m11-outline-variant);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-industrial),
              box-shadow var(--duration-fast) var(--ease-industrial);
}
.audit-input::placeholder { color: var(--fg-3); }
.audit-input:focus {
  border-color: var(--m11-primary);
  box-shadow: 0 0 0 3px rgba(0, 84, 64, 0.08);
}
.audit-btn {
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--fw-semibold);
  background: var(--m11-primary);
  color: var(--m11-on-primary);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-industrial),
              transform var(--duration-fast) var(--ease-industrial);
}
.audit-btn:hover:not(:disabled) {
  background: var(--m11-primary-container);
  transform: translateY(-1px);
}
.audit-btn:disabled { opacity: 0.55; cursor: progress; }
.audit-error { font-size: var(--text-body-md); color: var(--m11-error); }

/* =============================================================
   6. M11 Orchestration orb (result page during run)
   ============================================================= */
.orchestrator {
  display: flex; align-items: center; gap: var(--space-6);
  margin: var(--space-8) 0 var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
  transition: opacity 500ms var(--ease-industrial),
              transform 500ms var(--ease-industrial);
}
.orchestrator.done {
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  height: 0; padding: 0; margin: 0; overflow: hidden;
}
.orb {
  position: relative; width: 64px; height: 64px; flex: 0 0 64px;
  display: flex; align-items: center; justify-content: center;
}
.orb-core {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--m11-primary);
  color: var(--m11-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 11px; font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tightest);
  line-height: 1;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 84, 64, 0.25);
  animation: orb-pulse 1.8s var(--ease-industrial) infinite;
}
.orb-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--m11-primary);
  opacity: 0;
}
.orb-ring.r1 { animation: orb-ring 2.4s var(--ease-out) infinite; }
.orb-ring.r2 { animation: orb-ring 2.4s var(--ease-out) infinite; animation-delay: 0.8s; }
.orb-ring.r3 { animation: orb-ring 2.4s var(--ease-out) infinite; animation-delay: 1.6s; }
@keyframes orb-ring  { 0% { transform: scale(0.4); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes orb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.orchestrator-meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.orchestrator-status {
  font-family: var(--font-display);
  font-size: var(--text-title-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.orchestrator-detail {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--fg-2);
  margin-top: 4px;
}
.orchestrator-elapsed {
  font-family: var(--font-mono);
  font-size: var(--text-label-md);
  color: var(--fg-3);
  margin-top: var(--space-2);
}

/* =============================================================
   7. Live narration stream - also persists as transcript on the
      completed result page so the conversational voice anchors the
      audit even on reload.
   ============================================================= */
/* Swarm live-commentary: a single M11 chat turn (avatar + bubble)
   whose bubble text swaps as new narration arrives. Visual chrome
   matches the landing-page chat. No card; just the chat turn on
   the page background. */
.swarm-commentary {
  margin: var(--space-6) 0 var(--space-10);
}
.swarm-commentary-bubble {
  transition: opacity 220ms var(--ease-industrial),
              transform 220ms var(--ease-industrial),
              filter 220ms var(--ease-industrial);
}
.swarm-commentary-bubble.swap-out {
  opacity: 0;
  transform: translateY(-4px);
  filter: blur(2px);
}
.swarm-commentary-bubble.swap-in {
  animation: audit-line-rise 360ms var(--ease-out);
}
.audit-stream {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.audit-stream-line {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);            /* 16px */
  line-height: var(--leading-relaxed, 1.65);
  color: var(--fg-1);
  margin: 0;
  max-width: 70ch;
  opacity: 0; transform: translateY(8px); filter: blur(4px);
  animation: audit-line-rise 420ms var(--ease-out) forwards;
  transition: opacity 300ms var(--ease-industrial),
              transform 300ms var(--ease-industrial),
              filter 300ms var(--ease-industrial);
}
/* Live-commentary swap-out: the previous line crossfades out as a new
   line appears. JS adds .swap-out then removes the node after the
   transition; the new line crossfades IN via the rise animation. */
.audit-stream-line.swap-out {
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(3px);
  animation: none;
}
/* Recency cascade. JS tags each line with aged-N based on position from
   the newest. Newest 2 stay full-opacity; older lines fade so the latest
   narration is always the easiest to read. */
.audit-stream-line.aged-1 { opacity: 0.70; }
.audit-stream-line.aged-2 { opacity: 0.50; }
.audit-stream-line.aged-3 { opacity: 0.32; }
.audit-stream-line.aged-4 { opacity: 0.20; }
.audit-stream-line.fade { color: var(--fg-2); font-style: italic; }
/* Closing CTA line - emphasised, always full-opacity, primary tinted. */
.audit-stream-line.audit-stream-cta {
  font-weight: var(--fw-semibold);
  color: var(--m11-primary);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  opacity: 1 !important;                      /* never dim, even as more lines append */
}
.audit-stream-line.audit-stream-cta::before {
  content: "↓ ";
  font-weight: var(--fw-bold);
}
.audit-stream-line .cursor {
  display: inline-block; width: 1.5px; height: 0.95em;
  background: var(--m11-primary);
  margin-left: 2px; vertical-align: -2px;
  animation: audit-blink 0.9s steps(1) infinite;
}

/* =============================================================
   8. Result page - major section header pattern
   ============================================================= */
.audit-result { margin-top: var(--space-12); }

.audit-section { margin-top: var(--space-16); }      /* 4rem block-to-block */
.audit-section:first-child { margin-top: 0; }

.audit-section-head { margin-bottom: var(--space-6); }
.audit-section-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-label);
  /* Bumped from --text-label-xs (10px) → --text-label-md (12px) so the
     eyebrow is comfortably readable at 0.12em tracking. */
  font-size: var(--text-label-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--m11-primary);
  margin: 0 0 var(--space-3);
}
.audit-section-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--m11-primary);
}
.audit-section-title {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);        /* 24px - H2, matches onepager .section-question */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
.audit-section-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  /* Body / paragraph text always uses --leading-relaxed for breathing room */
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  margin: 0;
  max-width: 60ch;
}

/* =============================================================
   8b. Result brand header - brand mark + name + desc above the
       score block, repeated below the transcript so the findings
       sit with brand context next to them (not scrolled away).
   ============================================================= */
.result-brand {
  display: flex; align-items: center; gap: var(--space-5);
  margin: 0 0 var(--space-8);
}
.result-brand-mark {
  width: 56px; height: 56px; flex: 0 0 56px;
  border-radius: var(--radius-md);
  background: var(--m11-primary);
  color: var(--m11-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 24px;
  letter-spacing: var(--tracking-tightest);
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0,84,64,0.20),
              inset 0 1px 0 rgba(255,255,255,0.10);
}
.result-brand-meta {
  display: flex; flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.result-brand-name {
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);        /* 20px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg-1);
}
.result-brand-desc {
  font-family: var(--font-body);
  font-size: var(--text-body-md);            /* 14px */
  line-height: var(--leading-snug);
  color: var(--fg-2);
  max-width: 64ch;
}

/* =============================================================
   9. Score block - hero card, display-xl score
   ============================================================= */
.score-block {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  margin-bottom: 0;
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
}
@media (max-width: 720px) { .score-block { padding: var(--space-8); } }
.score-row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
@media (max-width: 720px) {
  .score-row { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
}
/* Left column wraps the eyebrow ABOVE the score number so the label
   sits with the value, not with the verdict on the right. */
.score-value-wrap {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 auto;
}
.score-value-label {
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--m11-primary);
  margin: 0;
  line-height: 1;
}
.score-value {
  font-family: var(--font-display);
  font-size: var(--text-display-xl);          /* 72px */
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tightest);
  line-height: var(--leading-none);
  color: var(--m11-primary);
  flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.score-den {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);        /* 24px - paired with display number */
  font-weight: var(--fw-medium);
  color: var(--fg-3);
  letter-spacing: 0;
  line-height: 1;
}
.score-value.warn { color: var(--accent-amber-warm); }
.score-value.risk { color: var(--m11-error); }
.score-verdict {
  /* Prose, not a headline - use body font with relaxed leading so the
     multi-sentence verdict reads comfortably. Semibold gives it weight
     without making it feel like a packed display headline. */
  font-family: var(--font-body);
  font-size: var(--text-body-lg);             /* 16px */
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-relaxed);        /* 1.625 */
  color: var(--fg-1);
  margin: 0;
  max-width: 56ch;
  flex: 1 1 auto;
}
.score-verdict strong {
  font-weight: var(--fw-bold);
  color: var(--m11-primary);
}

/* =============================================================
   10. Tiles - surface-step cards, big stat numbers
   ============================================================= */
.tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-8);                   /* 32px - breathing card padding */
  display: flex; flex-direction: column; gap: var(--space-4);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
  transition: transform var(--duration-base) var(--ease-industrial),
              box-shadow var(--duration-base) var(--ease-industrial);
}
.tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.04),
              0 22px 48px -24px rgba(28, 26, 23, 0.18);
}
.tile-type {
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px - readable eyebrow */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
.tile-score {
  font-family: var(--font-display);
  font-size: var(--text-display-md);         /* 40px */
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tightest);
  line-height: 1;
  color: var(--fg-1);
  margin: var(--space-1) 0;
}
.tile-label {
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  display: inline-flex; align-self: flex-start;
  padding: 8px 14px;                          /* breathing pill */
  border-radius: var(--radius-full);
  background: rgba(0, 84, 64, 0.10);
  color: var(--m11-primary);
  line-height: 1;
}
.tile-label.label-on-track { background: rgba(0, 72, 145, 0.10); color: var(--m11-tertiary); }
.tile-label.label-lagging  { background: rgba(186, 138, 30, 0.15); color: var(--accent-amber-warm); }
.tile-label.label-critical { background: rgba(186, 26, 26, 0.10); color: var(--m11-error); }
.tile-open-count {
  font-family: var(--font-body);
  font-size: var(--text-body-md);            /* 14px */
  line-height: var(--leading-snug);
  color: var(--fg-2);
  margin: 0;
}

/* =============================================================
   11. Signal cards - canonical pattern from preview/comp-signal-cards
   tag (top-left) + meta (top-right) → big title → score (bottom-left) + chev (bottom-right)
   ============================================================= */
.signal {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
  transition: transform var(--duration-base) var(--ease-industrial),
              box-shadow var(--duration-base) var(--ease-industrial);
}
.signal:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.04),
              0 22px 48px -24px rgba(28, 26, 23, 0.18);
}
.signal-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.signal-tag {
  font-family: var(--font-label);
  font-size: var(--text-label-md);          /* 12px - readable, not 10px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--m11-primary);
}
.signal-tag.tag-presence    { color: var(--m11-primary); }
.signal-tag.tag-accuracy    { color: var(--accent-red-warm); }
.signal-tag.tag-completion  { color: var(--m11-tertiary); }
.signal-tag.tag-competition { color: var(--m11-secondary); }
.signal-meta {
  font-family: var(--font-label);
  font-size: var(--text-label-md);          /* 12px to match tag baseline */
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1.2;
}
.signal-title {
  font-family: var(--font-display);
  font-size: var(--text-title-md);          /* 18 - canonical sub-header */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug, 1.3);
  color: var(--fg-1);
  margin: 0;
}
.signal-bottom {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto; padding-top: var(--space-3);
}
.signal-score {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tightest);
  line-height: 1;
  font-size: 2.5rem;                         /* 40px - display-md, prominent */
  color: var(--m11-primary);
  display: inline-flex; align-items: baseline; gap: 2px;
}
.signal-score.tag-presence    { color: var(--m11-primary); }
.signal-score.tag-accuracy    { color: var(--accent-red-warm); }
.signal-score.tag-completion  { color: var(--m11-tertiary); }
.signal-score.tag-competition { color: var(--m11-secondary); }
.signal-score .den {
  font-size: var(--text-body-md);            /* 14px */
  color: var(--fg-3);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
/* Chev sits inline at bottom-right of the collapsed signal. We only
   rotate the ARROW glyph on open, never the surrounding label, so the
   "See what I found" text doesn't rotate sideways and crash into body
   copy. Text content is swapped via CSS pseudo (collapsed: "See what
   I found", open: "Collapse"). */
.signal-chev {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-md);            /* 14px */
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--m11-primary);
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: rgba(0, 84, 64, 0.06);
  transition: background var(--duration-fast) var(--ease-industrial);
}
.signal:hover .signal-chev { background: rgba(0, 84, 64, 0.10); }
.signal-chev .arrow {
  display: inline-block;
  font-size: 12px;
  transition: transform var(--duration-fast) var(--ease-industrial);
}
.signal.open .signal-chev .arrow { transform: rotate(90deg); }
.signal-chev .chev-label-open { display: none; }
.signal.open .signal-chev .chev-label-collapsed { display: none; }
.signal.open .signal-chev .chev-label-open { display: inline; }

/* Expanded body (click to open). Generous internal spacing so each
   lane (blurb / examples / inside-read / play / locked-row) breathes.
   Separation from the collapsed row is pure space - no line. */
.signal-expand {
  display: none;
  margin-top: var(--space-4);
  padding-top: var(--space-2);
}
.signal.open .signal-expand { display: block; }
.signal-blurb {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);            /* 16px - readable body */
  line-height: var(--leading-relaxed, 1.65);
  color: var(--fg-2);
  margin: 0 0 var(--space-6);
  max-width: 64ch;
}
.signal-examples {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.signal-examples li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);            /* 14px */
  line-height: var(--leading-relaxed, 1.65);
  color: var(--fg-1);
}
.signal-examples li::before {
  content: "";
  position: absolute; left: 8px; top: 0.65em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--m11-primary);
  opacity: 0.6;
}
/* Inline recommendation card - eyebrow + body, primary-tinted bg,
   the same pattern as onepager's counter-intel callout. */
.signal-play {
  background: rgba(0, 84, 64, 0.06);
  padding: var(--space-6) var(--space-8);    /* 24px 32px - proper card breathing */
  border-radius: var(--radius-md);
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.signal-play-label {
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  color: var(--m11-primary);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.signal-play-text {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);            /* 16px */
  font-weight: var(--fw-medium);
  line-height: var(--leading-relaxed, 1.65);
  color: var(--m11-primary);
  margin: 0;
  max-width: 64ch;
}
/* Inline inside-read panel - high-value contrarian intelligence.
   Same geometry as .signal-play so the two read as a pair, but tinted
   with the secondary (Knowledge Graph purple) family so it visually
   reads as a distinct, higher-stakes lane. */
.inside-read {
  background: rgba(88, 79, 188, 0.07);       /* soft purple tint, low alpha */
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-6) 0 0;
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.inside-read + .signal-play,
.signal-play + .inside-read {
  margin-top: var(--space-6);                 /* explicit gap when adjacent */
}
.inside-read-label {
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--m11-secondary);
  line-height: 1;
  margin: 0;
}
.inside-read-headline {
  font-family: var(--font-display);
  font-size: var(--text-title-md);           /* 18px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug, 1.3);
  color: var(--fg-1);
  margin: 0;
  max-width: 56ch;
}
.inside-read-body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);            /* 14px */
  line-height: var(--leading-relaxed, 1.65);
  color: var(--fg-2);
  margin: 0;
  max-width: 64ch;
}

/* Locked-evidence chips - pills that hint at what's gated behind sign-up.
   Pill pattern follows onepager's .chip - proper padding so text never
   hugs the edge. */
.signal-locked-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-6);
}
.signal-locked {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--m11-surface-container);
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: 1;
}
.signal-locked::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fg-3);
}
.signal-locked.hot {
  background: rgba(0, 84, 64, 0.10);
  color: var(--m11-primary);
}
.signal-locked.hot::before { background: var(--m11-primary); }

/* Locked count callout below the signal list. Badge counter on the
   left as a discrete tile, body text to its right with a clean gap. */
.locked-row {
  display: flex; gap: var(--space-6); align-items: center;
  background: rgba(0, 84, 64, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);   /* match .signal / .signal-play / .inside-read rhythm */
  margin-top: var(--space-6);
}
@media (max-width: 720px) {
  .locked-row { padding: var(--space-5) var(--space-6); gap: var(--space-5); }
}
.locked-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--m11-primary);
  color: var(--m11-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-title-md);           /* 18px */
  letter-spacing: var(--tracking-tightest);
  line-height: 1;
}
.locked-text {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);            /* 16px */
  line-height: var(--leading-relaxed, 1.65);
  color: var(--m11-primary);
  flex: 1 1 auto;
  font-weight: var(--fw-medium);
  max-width: 60ch;
  margin: 0;
}

/* =============================================================
   12. Next steps (numbered list) - surface-step inside card
   ============================================================= */
.next-steps {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-12);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
}
@media (max-width: 720px) { .next-steps { padding: var(--space-6); } }
.next-steps ol {
  margin: 0; padding: 0; list-style: none; counter-reset: step;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.next-steps li {
  position: relative;
  padding-left: 56px;
  min-height: 36px;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);            /* 16px */
  line-height: var(--leading-relaxed, 1.65);
  counter-increment: step;
  color: var(--fg-1);
  max-width: 64ch;
}
.next-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--m11-primary);
  color: var(--m11-on-primary);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

/* =============================================================
   13. Competitors strip
   ============================================================= */
.competitor-strip {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
}
@media (min-width: 600px) { .competitor-strip { grid-template-columns: repeat(3, 1fr); } }
.competitor {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-4);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
  transition: transform var(--duration-base) var(--ease-industrial),
              box-shadow var(--duration-base) var(--ease-industrial);
}
.competitor:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.04),
              0 22px 48px -24px rgba(28, 26, 23, 0.18);
}
.competitor-head {
  display: flex; align-items: center; gap: var(--space-4);
  margin: 0;
}
.competitor-logo {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--radius-md);
  background: var(--bg-1);
  object-fit: contain;
  padding: 6px;
}
.competitor-logo.placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--m11-primary);
  color: var(--m11-on-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 20px;
  padding: 0;
  line-height: 1;
}
.competitor-name-block {
  display: flex; flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.competitor-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-title-md);           /* 18px */
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  color: var(--fg-1);
  margin: 0;
}
.competitor-host {
  font-family: var(--font-mono);
  font-size: var(--text-label-md);           /* 12px - readable */
  color: var(--fg-3);
  line-height: 1.2;
  margin: 0;
}
.competitor-delta {
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  display: inline-flex; align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  line-height: 1;
}
.competitor-delta.pos {
  background: rgba(186, 138, 30, 0.15);
  color: var(--accent-amber-warm);
}
.competitor-delta.neg {
  background: rgba(0, 84, 64, 0.10);
  color: var(--m11-primary);
}

/* =============================================================
   14. Category insight, what's-working, ongoing callout
   ============================================================= */
.category-insight {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  /* Left padding leaves 24px breathing space between the accent stripe
     (sits at left: var(--space-6) = 24px, width 3px) and the body copy. */
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-12);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
  position: relative;
}
.category-insight::before {
  content: "";
  position: absolute;
  left: var(--space-6);
  top: var(--space-6); bottom: var(--space-6);
  width: 3px; border-radius: 2px;
  background: var(--m11-secondary);
}
.category-insight-body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);            /* 16px - readable */
  line-height: var(--leading-relaxed, 1.65);
  color: var(--fg-1);
  margin: 0;
  max-width: 64ch;
}
.category-insight-body strong {
  color: var(--m11-secondary);
  font-weight: var(--fw-bold);
}
.category-insight-summary {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-body-md);            /* 14px */
  line-height: var(--leading-relaxed, 1.65);
  color: var(--fg-2);
  font-style: italic;
  max-width: 60ch;
}
.whats-working {
  background: rgba(0, 84, 64, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);            /* 16px */
  line-height: var(--leading-relaxed, 1.65);
  color: var(--m11-primary);
  font-weight: var(--fw-medium);
  max-width: 70ch;
}
.ongoing-callout {
  padding: var(--space-8) var(--space-10);
  background: linear-gradient(135deg, rgba(0, 84, 64, 0.06) 0%, rgba(88, 79, 188, 0.04) 100%);
  border-radius: var(--radius-lg);
}
.ongoing-callout-head {
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px - readable */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--m11-primary);
  margin: 0 0 var(--space-3);
}
.ongoing-callout-body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);            /* 16px */
  line-height: var(--leading-relaxed, 1.65);
  color: var(--fg-1);
  margin: 0;
  max-width: 64ch;
}
.ongoing-callout-body strong { color: var(--m11-primary); font-weight: var(--fw-semibold); }

/* =============================================================
   15. Unlock panel
   ============================================================= */
.unlock {
  padding: var(--space-10) var(--space-12);
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(28, 26, 23, 0.03),
              0 14px 36px -22px rgba(28, 26, 23, 0.15);
}
@media (max-width: 720px) { .unlock { padding: var(--space-8) var(--space-6); } }
.unlock-headline {
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);        /* 20px */
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug, 1.3);
  color: var(--fg-1);
  margin: 0 0 var(--space-8);
  max-width: 56ch;
}
.unlock-tiers {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (min-width: 720px) { .unlock-tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  background: var(--bg-1);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6) var(--space-6);
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: var(--space-3);
  transition: background var(--duration-fast) var(--ease-industrial),
              transform var(--duration-fast) var(--ease-industrial),
              box-shadow var(--duration-fast) var(--ease-industrial);
}
.tier:hover {
  background: var(--m11-surface-container-high);
  transform: translateY(-1px);
}
.tier.selected {
  background: rgba(0, 84, 64, 0.06);
  box-shadow: inset 0 0 0 2px var(--m11-primary);
}
.tier-name {
  font-family: var(--font-label);
  font-size: var(--text-label-md);           /* 12px - readable eyebrow */
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--m11-primary);
  margin: 0;
  line-height: 1.2;
}
.tier-price {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);        /* 24px */
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg-1);
  line-height: 1;
  margin: 0;
}
.tier-tag {
  font-family: var(--font-body);
  font-size: var(--text-body-md);            /* 14px - readable */
  color: var(--fg-2);
  line-height: var(--leading-snug, 1.4);
  margin: 0;
}