/* ============================================================
   Revenue Leak Assessment, self-contained stylesheet
   ============================================================

   DELIBERATELY NOT LINKING /styles.css.

   The v2 cutover of 2026-10-12 moved v2/styles.css onto /styles.css,
   which is exactly the swap this page was built to be immune to: a page
   linking the shared sheet would have changed design underneath itself
   that day. The old /scorecard does link it and carries a block of
   "legacy alias" rules because of that coupling; this page does not.

   So the tokens below are COPIED from v2/styles.css as of 2026-10-12.
   If the brand ramp ever changes, this file needs the same edit.
   ============================================================ */

:root {
  /* Obsidian Plum */
  --plum-900: #1C1719;
  --plum-800: #2C2427;
  --plum-700: #3D3236;
  --plum-600: #544548;
  --plum-400: #876E73;
  --plum-200: #C4B5BA;
  --plum-50:  #F5F0F2;

  /* Copper accent */
  --cyan-900: #5C3F1F;
  --cyan-700: #A07640;
  --cyan-500: #D4A574;
  --cyan-200: #EED9BF;
  --cyan-100: #F8EFE0;
  --accent-rgb: 212, 165, 116;
  --accent-deep-rgb: 160, 118, 64;

  /* Light surfaces. On the homepage these live in a per-page inline
     <style>, not in styles.css, which is why a new page that only links
     the stylesheet renders white-on-white. Inlined here on purpose. */
  --light-bg: #EDEAEC;
  --light-surface: #FFFFFF;
  --light-border: #D5CFD2;
  --light-h: #1C1719;
  --light-body: #544548;
  --light-muted: #876E73;
  --light-accent: #A07640;
  --light-accent-deep: #5C3F1F;

  --ease-out: cubic-bezier(.2,.7,.1,1);
  --content: 1200px;

  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plum-900);
  color: var(--plum-200);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 36px;
}

/* ───────────────────────── Sections ───────────────────────── */

.asx-section { padding: 112px 0; position: relative; }
.asx-section--light { background: var(--light-bg); color: var(--light-body); }
.asx-section--light .asx-h2 { color: var(--light-h); }
.asx-section--light .asx-eyebrow { color: var(--light-accent); }

.asx-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.asx-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.asx-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--plum-50);
  margin: 0 0 20px;
  max-width: 24ch;
}

/* Keeps "3 things" from breaking so "things" never lands alone on its
   own line. Karim asked for it on the same line as the number. */
.asx-nowrap { white-space: nowrap; }

.asx-lead { font-size: clamp(17px, 1.5vw, 19px); max-width: 60ch; margin: 0; }

.accent { color: var(--cyan-500); }
.asx-section--light .accent { color: var(--light-accent); }

/* ───────────────────────── Buttons ───────────────────────── */

.asx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 18px 30px;
  border: 0;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  background: var(--cyan-500);
  color: var(--plum-900);
  transition: transform var(--ease-out) .18s, background .18s;
}
.asx-btn:hover { background: var(--cyan-200); transform: translateY(-1px); }
.asx-btn:focus-visible { outline: 3px solid var(--cyan-500); outline-offset: 3px; }
.asx-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ───────────────────────── Nav ─────────────────────────────
   Logo only. A lead-magnet page should not offer a way out, and it
   also keeps this page out of the 14-file nav/footer sweep.
   ----------------------------------------------------------- */

.asx-nav { padding: 26px 0; }
.asx-nav .wrap { display: flex; align-items: center; }
.asx-nav img { width: 172px; height: auto; }

/* ───────────────────────── Hero ───────────────────────────── */

.asx-hero { padding: 72px 0 108px; position: relative; overflow: hidden; }

/* Copper glow behind the headline, same device as the v2 hero. */
.asx-hero::before {
  content: "";
  position: absolute;
  top: -22%;
  left: 50%;
  transform: translateX(-50%);
  width: 920px;
  height: 620px;
  background: radial-gradient(ellipse at center,
              rgba(var(--accent-deep-rgb), .20) 0%,
              rgba(var(--accent-deep-rgb), 0) 68%);
  pointer-events: none;
}
.asx-hero .wrap { position: relative; }

.asx-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--plum-50);
  margin: 0 0 22px;
  max-width: 19ch;
}

.asx-hero-sub {
  font-size: clamp(18px, 1.7vw, 21px);
  color: var(--plum-200);
  margin: 0 0 36px;
  max-width: 46ch;
}

/* Reassurance chips. NOT a CTA: Karim's landing page has exactly two,
   the hero button and the long line at the bottom. */
.asx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--plum-400);
}
.asx-meta li { display: flex; align-items: center; gap: 8px; }
.asx-meta svg { width: 15px; height: 15px; color: var(--cyan-700); flex: 0 0 auto; }

/* ───────────────────── Benefits (light) ───────────────────── */

.asx-benefits { counter-reset: ben; display: grid; gap: 18px; margin: 40px 0 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .asx-benefits { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.asx-benefit {
  counter-increment: ben;
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  border-radius: 14px;
  padding: 30px 26px 28px;
}
.asx-benefit::before {
  content: counter(ben, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--light-accent);
  margin-bottom: 14px;
}
.asx-benefit p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--light-h);
}

.asx-benefits-foot {
  margin: 34px 0 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.75vw, 23px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--light-h);
  max-width: 34ch;
}

/* ───────────────────── Authority (dark) ───────────────────── */

.asx-bio { display: grid; gap: 34px; align-items: start; }
@media (min-width: 860px) { .asx-bio { grid-template-columns: 208px 1fr; gap: 44px; } }

/* Portrait 4/5, matching the about page's hero portrait, which is the
   proportion Karim asked for. The file is SHARED with about.html and
   v2/about.html, so the crop is done here in CSS, never by re-cutting it.

   WHY THE TRANSFORM AND NOT object-position: in a PORTRAIT box, cover
   fits the image to the box's HEIGHT, so nothing overflows vertically and
   object-position has no vertical effect at all. Scaling from the bottom
   edge is what actually removes the empty space above his head, and the
   wrapper's overflow:hidden is what clips it. The about page documents
   the same finding: his hair starts 12.3% down the source, so scale 1.14
   leaves 0.4px of headroom and 1.07 leaves about 6% of the frame. */
.asx-bio-photo {
  width: 208px;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--plum-700);
  overflow: hidden;
  background: var(--plum-800);
}
.asx-bio-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.07);
  transform-origin: 50% 100%;
}

.asx-bio-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--plum-50);
  margin: 0 0 4px;
}
.asx-bio-role { font-size: 14px; color: var(--plum-400); margin: 0 0 22px; }
.asx-bio p.asx-bio-text { margin: 0; font-size: 17px; color: var(--plum-200); }

.asx-research {
  margin: 34px 0 0;
  padding: 22px 24px;
  background: var(--plum-800);
  border: 1px solid var(--plum-700);
  border-radius: 12px;
}
.asx-research h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-500);
  margin: 0 0 8px;
}
.asx-research p { margin: 0; font-size: 15.5px; color: var(--plum-200); }

/* ─────────────── Final CTA: dark card on light ───────────────
   The floating dark card on a light surface is the treatment Karim
   prefers over a flat band. Do not replace it with a flat band.
   ------------------------------------------------------------- */

.asx-cta-band { background: var(--light-bg); padding: 96px 0; }

.asx-cta-card {
  background: var(--plum-900);
  border: 1px solid var(--plum-700);
  border-radius: 18px;
  padding: 52px 48px;
  display: grid;
  gap: 28px;
  align-items: center;
  box-shadow: 0 24px 60px -24px rgba(28, 23, 25, .45);
}
@media (min-width: 980px) { .asx-cta-card { grid-template-columns: 1fr auto; gap: 40px; } }

.asx-cta-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.38;
  color: var(--plum-50);
  max-width: 34ch;
}
.asx-cta-card .asx-btn { white-space: nowrap; }

/* ───────────────────────── Footer ─────────────────────────── */

.asx-foot { padding: 46px 0 56px; border-top: 1px solid var(--plum-800); }
.asx-foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between; }
.asx-foot p { margin: 0; font-size: 13.5px; color: var(--plum-400); }
.asx-foot nav { display: flex; gap: 22px; font-size: 13.5px; }
.asx-foot nav a { color: var(--plum-400); text-decoration: none; }
.asx-foot nav a:hover { color: var(--plum-200); text-decoration: underline; }

/* ───────────────────────── Phone ─────────────────────────── */

@media (max-width: 780px) {
  .wrap { padding: 0 20px; }
  .asx-section { padding: 76px 0; }
  .asx-hero { padding: 48px 0 76px; }
  .asx-cta-band { padding: 68px 0; }
  .asx-cta-card { padding: 34px 26px; }
  .asx-h1 { max-width: none; }
  .asx-h2 { max-width: none; }
  .asx-btn { width: 100%; }
  .asx-bio-photo { width: 148px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   QUIZ  (/assessment/quiz)
   Intake screen + 15 questions, one per screen, Next on every
   one, matching the old scorecard's rhythm.
   ============================================================ */

.asx-quiz-body { background: var(--plum-900); }

.asx-quiz-main { padding: 20px 0 110px; }

.asx-quiz-shell { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; }

.asx-card {
  background: var(--plum-800);
  border: 1px solid var(--plum-700);
  border-radius: 18px;
  padding: 0 0 30px;
  overflow: hidden;
}

/* ───────────────── Progress ───────────────── */

.asx-progress {
  height: 4px;
  background: var(--plum-700);
  border-radius: 0;
  overflow: hidden;
}
.asx-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--cyan-500);
  transition: width .32s var(--ease-out);
}

.asx-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 24px 34px 0;
}
.asx-step-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cyan-500);
}

/* ───────────────── Question ───────────────── */

.asx-q-body { padding: 14px 34px 0; }

.asx-q-prompt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.26;
  letter-spacing: -.015em;
  color: var(--plum-50);
  margin: 0 0 8px;
}
.asx-q-prompt:focus { outline: none; }

.asx-q-hint { margin: 0 0 20px; font-size: 14px; color: var(--plum-400); }

/* ───────────────── Options ───────────────── */

.asx-opts { display: grid; gap: 10px; }

.asx-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: var(--plum-900);
  border: 1px solid var(--plum-700);
  border-radius: 12px;
  color: var(--plum-200);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}
.asx-opt:hover { border-color: var(--cyan-700); background: #231d20; }
.asx-opt:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }
.asx-opt.is-on {
  border-color: var(--cyan-500);
  background: rgba(var(--accent-rgb), .08);
  color: var(--plum-50);
}

.asx-opt-mark {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin-top: 1px;
  border: 1.5px solid var(--plum-400);
  border-radius: 50%;
  position: relative;
  transition: border-color .16s;
}
.asx-opt-mark--box { border-radius: 5px; }
.asx-opt.is-on .asx-opt-mark { border-color: var(--cyan-500); }
.asx-opt.is-on .asx-opt-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--cyan-500);
}
.asx-opt-mark--box::after { border-radius: 2px; }

.asx-opt-text { flex: 1 1 auto; }

/* ───────────────── Intake fields ───────────────── */

.asx-fields { display: grid; gap: 16px; }
@media (min-width: 620px) { .asx-fields { grid-template-columns: 1fr 1fr; } }
/* The last two (role, team size) read better full width */
.asx-field:nth-child(n+5) { grid-column: 1 / -1; }

.asx-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--plum-200);
  margin-bottom: 7px;
}

.asx-input, .asx-select, .asx-textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--plum-900);
  border: 1px solid var(--plum-700);
  border-radius: 10px;
  color: var(--plum-50);
  font-family: var(--font-body);
  font-size: 16px;   /* 16px or iOS Safari zooms the page on focus */
  line-height: 1.4;
}
.asx-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23876E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 18px;
  padding-right: 42px;
}
.asx-input:focus, .asx-select:focus, .asx-textarea:focus {
  outline: none;
  border-color: var(--cyan-500);
}
.asx-textarea { resize: vertical; min-height: 120px; }

.asx-field.has-error .asx-input,
.asx-field.has-error .asx-select { border-color: #F0697B; }
.asx-field-error { margin: 7px 0 0; font-size: 13px; color: #F0697B; }

.asx-consent {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--plum-400);
}
.asx-consent a { color: var(--plum-200); }

/* ───────────────── Honeypot ─────────────────
   Visually hidden by CLIPPING, never display:none, which bots
   check for before deciding whether to fill a field in.
   ------------------------------------------------------------ */
.asx-hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───────────────── Nav buttons ───────────────── */

.asx-q-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 26px 34px 0;
  margin-top: 26px;
  border-top: 1px solid var(--plum-700);
}

.asx-btn-ghost {
  background: none;
  border: 0;
  padding: 12px 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--plum-400);
  cursor: pointer;
}
.asx-btn-ghost:hover:not(:disabled) { color: var(--plum-50); }
.asx-btn-ghost:disabled { opacity: .35; cursor: default; }

.asx-q-nav .asx-btn { padding: 15px 26px; }
.asx-btn:disabled { opacity: .4; cursor: default; transform: none; }
.asx-btn:disabled:hover { background: var(--cyan-500); transform: none; }

.asx-quiz-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--plum-400);
}

/* ───────────────── Interstitial ───────────────── */

.asx-interstitial {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 23, 25, .92);
  z-index: 50;
}
.asx-interstitial.is-on { display: flex; }

.asx-interstitial-card { text-align: center; max-width: 380px; }
.asx-interstitial-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--plum-50);
  margin: 20px 0 8px;
}
.asx-interstitial-sub { margin: 0; font-size: 14.5px; color: var(--plum-400); }

.asx-spinner {
  display: inline-block;
  width: 34px; height: 34px;
  border: 3px solid var(--plum-700);
  border-top-color: var(--cyan-500);
  border-radius: 50%;
  animation: asx-spin .9s linear infinite;
}
@keyframes asx-spin { to { transform: rotate(360deg); } }

/* ───────────────── Phone ───────────────── */

@media (max-width: 780px) {
  .asx-quiz-main { padding: 8px 0 72px; }
  .asx-quiz-shell { padding: 0 14px; }
  .asx-card { border-radius: 14px; padding-bottom: 24px; }
  .asx-step-meta { padding: 20px 20px 0; }
  .asx-q-body { padding: 12px 20px 0; }
  .asx-q-nav { padding: 22px 20px 0; margin-top: 22px; }
  .asx-opt { padding: 15px 15px; font-size: 15px; }
  /* The nav buttons share a row; the Next button must not go full width
     here the way the landing page's does. */
  .asx-q-nav .asx-btn { width: auto; }
}

/* ============================================================
   REPORT  (/assessment/results)

   EVERY SURFACE AND TEXT COLOUR ON THIS PAGE IS A TOKEN, set once on
   .asx-report-body and overridable per theme further down. That exists
   because the first two attempts (tinted page + white cards, then white
   page + tinted cards) were both wrong, and swapping them by hand meant
   touching the card, the answer box inside it and the agent chips
   separately, which is how a nested surface ends up invisible against
   the thing it sits in.

   Red, amber and green appear in this block and nowhere else on the
   site. Karim's call: "these colors mean something they're not branding
   colors." They come inline from report-content.js so the PDF reuses the
   exact values; the rules here only position them.
   ============================================================ */

.asx-report-body {
  /* LIGHT is the default, the "paper" variant Karim picked: a warm
     off-white page with white cards lifted on a soft shadow rather than
     outlined with a border. The reader can switch to dark with the
     toggle in the nav, and that choice is remembered. */
  --asx-page:        #FAF8F7;   /* the page itself          */
  --asx-card:        #FFFFFF;   /* one question panel       */
  --asx-card-border: transparent;
  --asx-card-shadow: 0 1px 2px rgba(28,23,25,.04),
                     0 8px 24px -12px rgba(28,23,25,.10);
  --asx-inner:       #F7F4F5;   /* answer box + agent chips */
  --asx-inner-border:transparent;
  --asx-rule:        #EAE4E6;   /* hairlines and dividers   */
  --asx-h:           #1C1719;   /* headings                 */
  --asx-body:        #544548;   /* paragraphs               */
  --asx-muted:       #8A777C;   /* labels and meta          */
  --asx-accent:      #A07640;   /* copper                   */
  --gauge-track:     #EAE4E6;   /* the unfilled arc         */
  --asx-cta-bg:      #1C1719;   /* the dark CTA card        */
  --asx-cta-border:  #3D3236;

  /* The toggle needs its OWN border, several steps darker than the
     hairlines used elsewhere. At --asx-rule it sat at #EAE4E6 on a
     #FAF8F7 page, which is a 1.5% difference and effectively invisible.
     Karim could not see the control. */
  --asx-toggle-bg:     #EFEAEC;
  --asx-toggle-border: #CFC6CA;
  --asx-toggle-knob:   #FFFFFF;

  background: var(--asx-page);
  color: var(--asx-body);
}

.asx-nav--report { border-bottom: 1px solid var(--asx-rule); }
.asx-report-body .asx-eyebrow { color: var(--asx-accent); }

/* ───────────────── Gate ───────────────── */

.asx-gate { padding: 90px 0 120px; }
.asx-gate .asx-h1 { max-width: 16ch; color: var(--asx-h); }
.asx-gate .asx-lead { margin: 0 0 32px; color: var(--asx-body); }

/* ───────────────── Report hero ───────────────── */

.asx-report-hero { padding: 54px 0 0; }

/* Title left, PDF button right. The button also fills the empty right
   side of the hero, which is the gap Karim pointed at earlier. */
.asx-report-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px 28px;
}
.asx-report-head-copy { min-width: 0; flex: 1 1 320px; }
.asx-report-head .asx-btn { flex: 0 0 auto; }

/* Quieter than the primary CTA on purpose: downloading is a secondary
   action next to booking a call. */
.asx-btn--outline {
  background: transparent;
  color: var(--asx-h);
  border: 1.5px solid var(--asx-toggle-border);
  padding: 14px 22px;
  font-size: 15px;
}
.asx-btn--outline:hover {
  background: var(--asx-card);
  color: var(--asx-h);
  border-color: var(--asx-muted);
}

.asx-report-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--asx-h);
  margin: 0 0 12px;
}
.asx-report-meta { margin: 0; font-size: 14.5px; color: var(--asx-muted); }

/* ───────────────── Score + gauge ─────────────────
   Two columns from 880px up. Before that the gauge sat alone above a
   narrow measure, leaving most of the container empty to its right.
   ------------------------------------------------------------------- */

.asx-score { padding: 40px 0 56px; }
.asx-score-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 880px) {
  .asx-score-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
}

.asx-gauge { position: relative; width: 280px; max-width: 100%; }
.asx-gauge-svg { display: block; width: 100%; height: auto; }

/* Sits in the mouth of the arc. The arc bottoms out at y=140 of 158, so
   the text is anchored from the bottom rather than centred. */
.asx-gauge-mid {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.asx-gauge-pct {
  font-family: var(--font-display);
  font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.03em;
}
.asx-gauge-tier {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.asx-score-line {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 600; line-height: 1.35;
  color: var(--asx-h);
}
.asx-score-line strong { color: var(--asx-accent); font-weight: 700; }
.asx-score-sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--asx-body); }

/* ───────────────── Tiers ───────────────── */

.asx-tiers { padding-bottom: 20px; }
.asx-tier { margin: 0 0 56px; }
.asx-tier-head {
  padding: 0 0 20px;
  border-bottom: 1px solid var(--asx-rule);
  margin-bottom: 26px;
}
.asx-tier-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -.02em;
  color: var(--asx-h);
  margin: 0 0 8px;
}
.asx-tier-count {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--asx-muted);
}
.asx-tier-intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--asx-body); max-width: 72ch; }

/* ───────────────── Question rows ───────────────── */

.asx-rows { display: grid; gap: 16px; }

.asx-row {
  background: var(--asx-card);
  border: 1px solid var(--asx-card-border);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: var(--asx-card-shadow);
}

.asx-row-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }

.asx-light { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; margin-top: 5px; }

.asx-row-n {
  margin: 0 0 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--asx-muted);
}
.asx-row-q {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17.5px; font-weight: 600; line-height: 1.34;
  color: var(--asx-h);
}

.asx-row-answer {
  margin: 0 0 16px;
  padding: 12px 15px;
  background: var(--asx-inner);
  border: 1px solid var(--asx-inner-border);
  border-radius: 9px;
  font-size: 15px;
  color: var(--asx-body);
}
.asx-row-answer-label {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--asx-muted);
  margin-bottom: 4px;
}

.asx-row-consequence,
.asx-row-line { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--asx-body); }

.asx-src { margin: -8px 0 16px; font-size: 13px; color: var(--asx-muted); }
.asx-src a { color: var(--asx-accent); }
.asx-src-detail { display: block; margin-top: 2px; font-size: 12.5px; opacity: .85; }

.asx-row-agents { padding-top: 16px; border-top: 1px solid var(--asx-rule); }
.asx-row-agents-label {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--asx-accent);
}
.asx-row-agents ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.asx-row-agents li {
  font-size: 13.5px;
  color: var(--asx-h);
  background: var(--asx-inner);
  border: 1px solid var(--asx-inner-border);
  border-radius: 999px;
  padding: 7px 14px;
}

/* ───────────── Next step: the dark CTA card ───────────── */

.asx-next { padding: 20px 0 110px; }
.asx-next-card {
  background: var(--asx-cta-bg);
  border: 1px solid var(--asx-cta-border);
  border-radius: 18px;
  padding: 44px 42px;
  box-shadow: 0 24px 60px -24px rgba(28, 23, 25, .35);
}
.asx-next-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em;
  color: var(--plum-50);
}
.asx-next-body { margin: 0 0 28px; font-size: 16.5px; line-height: 1.6; color: var(--plum-200); max-width: 62ch; }
.asx-next-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.asx-btn--quiet {
  background: transparent;
  color: var(--plum-50);
  border: 1.5px solid var(--plum-600);
}
.asx-btn--quiet:hover { background: var(--plum-700); color: var(--plum-50); }

.asx-pdf-note { margin: 12px 0 0; font-size: 13px; color: var(--plum-400); width: 100%; }
.asx-next-foot { margin: 24px 0 0; font-size: 14.5px; color: var(--plum-400); }
.asx-next-foot a { color: var(--cyan-500); }

/* ───────────── Footer ───────────── */

.asx-report-body .asx-foot { border-top: 1px solid var(--asx-rule); }
.asx-report-body .asx-foot p,
.asx-report-body .asx-foot nav a { color: var(--asx-muted); }
.asx-report-body .asx-foot nav a:hover { color: var(--asx-h); }/* ============================================================
   DARK, the original plum report, offered as a reader choice.

   The attribute is set on <html> by a tiny script in the page head so
   it lands BEFORE first paint and there is no flash of the light theme.
   Each selector below is (0,2,0) and names .asx-report-body directly,
   which is what lets it beat the base tokens that body sets on itself.
   A theme only restates tokens, so it cannot alter layout.
   ============================================================ */

[data-asx-theme="dark"] .asx-report-body,
.asx-report-body[data-asx-theme="dark"] {
  --asx-page:        #1C1719;
  --asx-card:        #2C2427;
  --asx-card-border: #3D3236;
  --asx-card-shadow: none;
  --asx-inner:       #1C1719;
  --asx-inner-border:#3D3236;
  --asx-rule:        #3D3236;
  --asx-h:           #F5F0F2;
  --asx-body:        #C4B5BA;
  --asx-muted:       #876E73;
  --asx-accent:      #D4A574;
  --gauge-track:     #3D3236;
  --asx-cta-bg:      #2C2427;
  --asx-cta-border:  #5C3F1F;
  --asx-toggle-bg:     #231D20;
  --asx-toggle-border: #4A3E43;
  --asx-toggle-knob:   #3D3236;
}

/* ───────── Logo, one per surface ─────────
   Both ship in the markup and CSS picks. Swapping `src` in JS would
   repaint after first paint and flash the wrong logo. */
.asx-logo-dark { display: none; }
[data-asx-theme="dark"] .asx-logo-light,
.asx-report-body[data-asx-theme="dark"] .asx-logo-light { display: none; }
[data-asx-theme="dark"] .asx-logo-dark,
.asx-report-body[data-asx-theme="dark"] .asx-logo-dark { display: block; }

/* ───────── The toggle ───────── */

.asx-nav--report .wrap { justify-content: space-between; gap: 16px; }

.asx-theme-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  border: 1.5px solid var(--asx-toggle-border);
  background: var(--asx-toggle-bg);
}
.asx-theme-toggle button {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--asx-muted);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.asx-theme-toggle button:hover { color: var(--asx-h); }
.asx-theme-toggle button[aria-pressed="true"] {
  background: var(--asx-toggle-knob);
  color: var(--asx-h);
  box-shadow: 0 1px 1px rgba(28,23,25,.06),
              0 2px 6px -1px rgba(28,23,25,.16);
}
.asx-theme-toggle button:focus-visible {
  outline: 2px solid var(--asx-accent);
  outline-offset: 2px;
}

/* ───────────────── Phone ───────────────── */

@media (max-width: 780px) {
  .asx-report-hero { padding-top: 34px; }
  .asx-score { padding: 28px 0 40px; }
  .asx-gauge { margin-left: auto; margin-right: auto; }
  .asx-gauge-pct { font-size: 40px; }
  .asx-tier { margin-bottom: 42px; }
  .asx-row { padding: 20px 18px; }
  .asx-next { padding-bottom: 72px; }
  .asx-next-card { padding: 30px 22px; }
  .asx-next-actions .asx-btn { width: 100%; }
  .asx-gate { padding: 56px 0 80px; }
  .asx-nav--report img { width: 140px; }
  .asx-report-head .asx-btn { width: 100%; }
  .asx-theme-toggle button { padding: 7px 12px; font-size: 12px; }
}

/* ───────────────── Print ─────────────────
   Always print the LIGHT theme. Someone reading on dark still wants
   paper that is paper, and a dark page would empty a toner cartridge.
   ----------------------------------------------------------------- */

@media print {
  .asx-nav, .asx-foot, .asx-next, .asx-interstitial,
  .asx-report-head .asx-btn { display: none !important; }

  [data-asx-theme="dark"] .asx-report-body,
  .asx-report-body[data-asx-theme="dark"],
  .asx-report-body {
    --asx-page: #FFFFFF;
    --asx-card: #FFFFFF;
    --asx-card-border: #E0DADD;
    --asx-card-shadow: none;
    --asx-inner: #F7F4F5;
    --asx-inner-border: #E6E1E3;
    --asx-rule: #E0DADD;
    --asx-h: #1C1719;
    --asx-body: #544548;
    --asx-muted: #8A777C;
    --asx-accent: #A07640;
    --gauge-track: #EAE4E6;
  }

  .asx-row { break-inside: avoid; page-break-inside: avoid; }
  .asx-tier { break-inside: auto; }
  .asx-light, .asx-gauge-svg path {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

/* ============================================================
   TABLE LAYOUT  (?layout=table)

   One table per section instead of one card per question. Lives
   alongside the card layout while Karim compares them.

   DEFINED AS A TABLE, deliberately. The first pass used horizontal
   rules only and read as a styled list: Karim's note was that it
   "barely feels a table". So it now has an outer frame, vertical
   dividers between every column, a filled header band and banded rows.
   The grid colour is its OWN token, a few steps stronger than the
   hairlines used elsewhere on the page, because a table's structure
   has to be legible at a glance where a divider between paragraphs
   should not be.
   ============================================================ */

.asx-report-body {
  --asx-grid:     #D7CFD2;   /* every line in the table           */
  --asx-thead-bg: #EFEAEC;   /* the header band                   */
  --asx-zebra:    #FBF9FA;   /* every second row                  */
}
[data-asx-theme="dark"] .asx-report-body,
.asx-report-body[data-asx-theme="dark"] {
  --asx-grid:     #43373C;
  --asx-thead-bg: #241E21;
  --asx-zebra:    #272023;
}

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

/* The frame lives on the WRAPPER, not the table, so the rounded
   corners can clip the header band's fill. A radius on the table
   itself leaves square corners behind any filled cell. */
.asx-tbl-wrap {
  width: 100%;
  background: var(--asx-card);
  border: 1px solid var(--asx-grid);
  border-radius: 12px;
  overflow: hidden;
}

.asx-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.5;
}

/* ── header band ── */
.asx-tbl thead th {
  text-align: left;
  vertical-align: bottom;
  padding: 13px 16px;
  background: var(--asx-thead-bg);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  /* Tracking eased off as the size went up: .12em at 12px pushes
     "What it's costing you" into a second line in its fixed column. */
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--asx-h);
  border-right: 1px solid var(--asx-grid);
  border-bottom: 1px solid var(--asx-grid);
}
.asx-tbl thead th:last-child { border-right: 0; }

/* ── body cells: a full grid ── */
.asx-tbl tbody td {
  padding: 16px;
  vertical-align: top;
  color: var(--asx-body);
  border-right: 1px solid var(--asx-grid);
  border-bottom: 1px solid var(--asx-grid);
}
.asx-tbl tbody td:last-child { border-right: 0; }
.asx-tbl tbody tr:last-child td { border-bottom: 0; }

/* Banding, so the eye can track a long row across five columns. */
.asx-tbl tbody tr:nth-child(even) { background: var(--asx-zebra); }

/* Column widths. table-layout:fixed honours these exactly rather than
   negotiating from content, which keeps all three tables aligned to
   each other down the page. */
/* Column widths. table-layout:fixed honours these exactly rather than
   negotiating from content, which keeps all three tables aligned to
   each other down the page. */
.asx-tbl-dot { width: 64px; }
.asx-tbl thead th:nth-child(2) { width: 26%; }
.asx-tbl thead th:nth-child(3) { width: 17%; }
.asx-tbl thead th:nth-child(4) { width: 31%; }

.asx-tbl-dot { text-align: center; }
.asx-tbl-dot .asx-light { display: inline-block; margin: 2px 0 0; }
.asx-tbl-n {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--asx-muted);
}

.asx-tbl-q {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--asx-h);
}
.asx-tbl-a { color: var(--asx-body); }
.asx-tbl-m { color: var(--asx-body); }

.asx-tbl-src { display: block; margin-top: 8px; font-size: 12.5px; color: var(--asx-muted); }
.asx-tbl-src a { color: var(--asx-accent); }

.asx-tbl-ag ul { margin: 0; padding: 0; list-style: none; }
.asx-tbl-ag li {
  font-size: 13px;
  color: var(--asx-h);
  padding: 4px 0 4px 14px;
  position: relative;
}
.asx-tbl-ag li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--asx-accent);
}

/* The section head sits closer to its table now that the table has a
   frame of its own to separate it from what follows. */
.asx-tbl-wrap + * { margin-top: 0; }

/* ─────────── Narrow: stack it ───────────
   A five-column table cannot be read at phone width, and sideways
   scrolling on a page people open on their phone is worse than no
   table. Each row becomes its own bordered block and the column
   headings return as labels, so no information is lost.

   1019px, not 900. Measured with the column widths above: every
   heading holds one line down to 1020px, and "AI SALES EMPLOYEES"
   takes a second line at 1000px and below. So the table stops exactly
   where it stops fitting. The alternative was narrowing the columns to
   buy those widths back, which Karim did not want.
   --------------------------------------------------------------- */
@media (max-width: 1019px) {
  .asx-tbl-wrap {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .asx-tbl, .asx-tbl tbody, .asx-tbl tr, .asx-tbl td { display: block; width: auto; }
  .asx-tbl thead { display: none; }

  .asx-tbl tbody tr,
  .asx-tbl tbody tr:nth-child(even) {
    background: var(--asx-card);
    border: 1px solid var(--asx-card-border);
    border-radius: 14px;
    box-shadow: var(--asx-card-shadow);
    padding: 18px 18px 8px;
    margin-bottom: 14px;
  }

  .asx-tbl tbody td,
  .asx-tbl tbody tr:last-child td {
    padding: 0 0 14px;
    border: 0;
  }
  .asx-tbl tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--asx-muted);
  }

  .asx-tbl-dot { padding-bottom: 12px; text-align: left; }
  .asx-tbl-dot .asx-light { margin: 0 8px 0 0; vertical-align: middle; }
  .asx-tbl-n { display: inline; margin: 0; vertical-align: middle; }
}

@media print {
  /* Keep a question's row intact across a page break, repeat the
     header band on each page, and keep the fills that make it a grid. */
  .asx-tbl tbody tr { break-inside: avoid; page-break-inside: avoid; }
  .asx-tbl thead { display: table-header-group; }
  .asx-tbl thead th, .asx-tbl tbody tr:nth-child(even) {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}