/* (a)MD™ Preview Widget — loaded by layouts/partials/amd-preview-widget.html. Scoped under .amd-preview-widget. */

@layer widget {

@font-face {
  font-family: 'Sebino';
  src: url('/fonts/sebino-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sebino';
  src: url('/fonts/sebino-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Scoped reset — neutralize inherited theme styles */
.amd-preview-widget,
.amd-preview-widget *,
.amd-preview-widget *::before,
.amd-preview-widget *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-family: 'Sebino', system-ui, sans-serif;
  line-height: 1.4;
  color: inherit;
  text-decoration: none;
  list-style: none;
  background: transparent;
  vertical-align: baseline;
}

.amd-preview-widget {
  color: #000;
  font-size: 16px;
}

.amd-preview-widget button {
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.amd-preview-widget a {
  color: inherit;
}

.amd-preview-widget img,
.amd-preview-widget svg {
  display: block;
  max-width: 100%;
}

.amd-preview-widget h1,
.amd-preview-widget h2,
.amd-preview-widget h3,
.amd-preview-widget h4,
.amd-preview-widget h5,
.amd-preview-widget h6 {
  font-weight: normal;
}
/* ── STAGE + PANEL ───────────────────────────────────────────────────────── */
.amd-preview-widget.amd-stage {
  position: relative;
  width: 100%;
  font-family: 'Sebino', sans-serif;
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 25px;
  margin-top: 0;
}
.amd-preview-widget.amd-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.amd-preview-widget.amd-stage.results-mode { padding-bottom: 80px; }

.amd-preview-widget .amd-panel {
  position: relative;
  z-index: 2;
  /* Footer chrome — 700×700 px from panel top (desktop) */
  --aimd-foot-insight-top: 585px;
  --aimd-foot-insight-bottom: -4px;
  --aimd-foot-insight-height: 92px;
  --aimd-foot-insight-inset-x: 16px;
  --aimd-foot-security-top: 550px;
  --aimd-foot-security-bottom: 104px;
  width: min(92vw, 700px);
  max-width: 700px;
  min-width: 391px;
  aspect-ratio: 700 / 850;
  background-color: transparent;
  background-image: url('/images/amd-pre-wgt-tall.webp?v=20260820');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  overflow: visible;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.amd-preview-widget .amd-panel.hidden-for-results, .amd-lightbox__widget .amd-panel.hidden-for-results { display: none !important; }

/* Lightbox host — desktop: framed panel + wallpaper */
@media (min-width: 901px) {
  .amd-lightbox__widget .amd-preview-widget.amd-stage, .amd-lightbox__widget .amd-panel {
    overflow: visible !important;
  }
  .amd-lightbox__widget .amd-preview-widget.amd-stage {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  .amd-lightbox__widget .amd-panel {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    background-color: transparent !important;
    background-image: url('/images/amd-pre-wgt-tall.webp?v=20260820') !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
}

/* Lightbox host — mobile: full-screen white takeover */
@media (max-width: 900px) {
  .amd-lightbox__widget {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .amd-lightbox__widget .amd-preview-widget.amd-stage {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  .amd-lightbox__widget .amd-preview-widget.amd-stage::before {
    display: none !important;
  }

  .amd-lightbox__widget .amd-panel {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    background-image: none !important;
    border-radius: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* ── HELLO + FLOW SCREENS (locked design) ────────────────────────────────── */
.amd-preview-widget .aimd-hello-screen, .amd-preview-widget .aimd-flow-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  font-family: 'Sebino', sans-serif;
  color: #1a1a1a;
}
.amd-preview-widget .aimd-hello-screen.hidden, .amd-preview-widget .aimd-flow-screen.hidden { display: none !important; }
.amd-preview-widget .aimd-hello-screen {
  opacity: 1 !important;
  visibility: visible !important;
}
.amd-preview-widget .aimd-hello-screen:not(.hidden), .amd-preview-widget .aimd-flow-screen:not(.hidden) { display: block !important; }
.amd-preview-widget .aimd-hello-screen .aimd-topbar, .amd-preview-widget .aimd-hello-screen .aimd-left-col, .amd-preview-widget .aimd-hello-screen .aimd-security, .amd-preview-widget .aimd-hello-screen .aimd-insight {
  opacity: 1 !important;
  visibility: visible !important;
}
.amd-preview-widget .aimd-hello-screen .aimd-main { z-index: 5; }
.amd-preview-widget .aimd-hello-screen.aimd-hello-waking .aimd-hello-lockup, .amd-preview-widget .aimd-hello-screen.aimd-hello-waking .aimd-invite, .amd-preview-widget .aimd-hello-screen.aimd-hello-waking .aimd-start-cta, .amd-preview-widget .aimd-hello-screen.aimd-hello-waking .aimd-nocard {
  opacity: 0 !important;
  filter: blur(10px);
  transition: opacity 0.42s ease, filter 0.42s ease;
}
.amd-preview-widget .aimd-hello-screen.aimd-hello-waking .aimd-hero-in {
  opacity: 1 !important;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .amd-preview-widget .aimd-hello-screen.aimd-hello-waking .aimd-hello-lockup, .amd-preview-widget .aimd-hello-screen.aimd-hello-waking .aimd-invite, .amd-preview-widget .aimd-hello-screen.aimd-hello-waking .aimd-start-cta, .amd-preview-widget .aimd-hello-screen.aimd-hello-waking .aimd-nocard {
    filter: none;
    transition: none;
  }
}
.amd-preview-widget .aimd-hello-screen .aimd-start-desktop {
  display: block !important;
  z-index: 6;
}
.amd-preview-widget .aimd-hello-screen .aimd-start-mobile { display: none !important; }

.amd-preview-widget .aimd-active {
  position: absolute;
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
}
.amd-preview-widget .aimd-topbar {
  position: absolute;
  top: 40px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.amd-preview-widget .aimd-topbar-mark {
  display: block;
  width: 75px;
  height: auto;
  flex-shrink: 0;
}
.amd-preview-widget .aimd-learning {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #202020;
}
.amd-preview-widget .aimd-learning-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #111;
}
.amd-preview-widget .aimd-flow-screen.aimd-learning-active .aimd-learning-dot {
  animation: aimd-status-blink 1.4s steps(1, end) infinite;
  animation-delay: 0.9s;
}
@keyframes aimd-status-blink {
  0%, 45%   { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .amd-preview-widget .aimd-flow-screen.aimd-learning-active .aimd-learning-dot, .amd-preview-widget .aimd-live-dot {
    animation: none;
    opacity: 1;
  }
}
.amd-preview-widget .aimd-question-counter { display: none; }

.amd-preview-widget .aimd-left-col {
  position: absolute;
  left: 20px;
  top: 120px;
  bottom: 104px;
  width: 80px;
  color: #666;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
}
.amd-preview-widget .aimd-left-col {
  display: none !important;
}
.amd-preview-widget .aimd-left-col .aimd-vline {
  display: none;
}
.amd-preview-widget .aimd-left-margin-img {
  display: block;
  position: absolute;
  top: 25px;
  left: 0;
  width: 38px;
  height: auto;
  max-height: calc(100% - 8px);
  object-fit: contain;
  object-position: top left;
  pointer-events: none;
  transform: scale(0.9);
  transform-origin: top left;
}
.amd-preview-widget .aimd-hello-screen .aimd-left-col > div:not(.aimd-vline) {
  display: none;
}
.amd-preview-widget .aimd-flow-screen .aimd-left-margin-img {
  top: 53px;
  max-height: calc(100% - 36px);
}
.amd-preview-widget .aimd-main {
  position: absolute;
}

/* ── HELLO STACK — lockup, invite, CTA, reassurance ───────────────────────────
   Replaces the old Hello!/I'm the/brandmark/copy hero and the image-swap START
   NOW button. One centred column; the desktop block below pins it to the
   700x850 canvas, these values carry mobile. */
.amd-preview-widget .aimd-hello-lockup {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}
.amd-preview-widget .aimd-invite {
  margin: 0;
  text-align: center;
  font-family: 'Sebino', sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.24 !important;
  color: #8b8b8b;
}
.amd-preview-widget .aimd-invite * { line-height: inherit !important; }
.amd-preview-widget .aimd-invite-lead {
  display: block;
  font-weight: 700;
  color: #333333;
}
.amd-preview-widget .aimd-invite-accent { color: #FF8833; }
.amd-preview-widget .aimd-start-cta {
  display: block;
  border: 0 !important;
  /* !important for the same reason as the answer pills: an unlayered
     `button { border-radius: 0 }` outranks normal declarations in @layer. */
  border-radius: 999px !important;
  background: #FF8833;
  color: #ffffff;
  font-family: 'Sebino', sans-serif;
  /* !important throughout: the site's unlayered button reset (font/margin/
     padding: inherit|0) outranks every normal declaration in @layer widget,
     whatever its specificity. Same trap as the answer pills' border-radius. */
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-align: center;
  padding: 17px 40px 15px !important;
  cursor: pointer;
  transition: background 0.18s ease;
}
.amd-preview-widget .aimd-start-cta:hover,
.amd-preview-widget .aimd-start-cta:focus-visible,
.amd-preview-widget .aimd-start-cta:active { background: #e8752a; }
.amd-preview-widget .aimd-nocard {
  margin: 0;
  text-align: center;
  font-family: 'Sebino', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  color: #111;
}

.amd-preview-widget .aimd-hello {
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
  margin: 0;
  font-size: 74px;
  line-height: 0.92;
  font-weight: 400;
  letter-spacing: 0;
}
.amd-preview-widget .aimd-im {
  position: absolute;
  top: 82px;
  left: 2px;
  transform: none;
  margin: 0;
  font-size: 25px;
  line-height: 1;
  color: #29313c;
}
.amd-preview-widget .aimd-brandmark {
  position: absolute;
  top: 126px;
  left: 0;
  transform: none;
  width: 238px;
  max-width: 100%;
  margin: 0;
  display: block;
}
.amd-preview-widget .aimd-copy {
  position: absolute;
  top: 234px;
  left: 0;
  transform: none;
  margin: 0;
  padding-bottom: 25px;
  font-size: 18.75px;
  line-height: 1.45;
  color: #303846;
  max-width: 260px;
}
.amd-preview-widget .aimd-copy strong { font-weight: 400; color: #303846; }

.amd-preview-widget .aimd-start {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.amd-preview-widget .aimd-start img {
  display: block;
  width: 260px;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.2));
}
.amd-preview-widget .aimd-start-mobile { display: none; }
.amd-preview-widget .aimd-start-desktop { display: block; }

.amd-preview-widget .aimd-start.aimd-start--swap {
  width: 260px;
  height: auto;
  position: relative;
}
.amd-preview-widget .aimd-start.aimd-start--swap .aimd-start-swap__img {
  width: 260px;
  height: auto;
  display: block;
  filter: drop-shadow(0 1.25px 4.375px rgba(0, 0, 0, 0.0625));
}
.amd-preview-widget .aimd-start.aimd-start--swap .aimd-start-swap__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.amd-preview-widget .aimd-start.aimd-start--swap:hover .aimd-start-swap__img--hover,
.amd-preview-widget .aimd-start.aimd-start--swap:focus-visible .aimd-start-swap__img--hover,
.amd-preview-widget .aimd-start.aimd-start--swap:active .aimd-start-swap__img--hover {
  opacity: 1;
}

.amd-preview-widget .aimd-security {
  position: absolute;
  bottom: var(--aimd-foot-security-bottom);
  width: 100%;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #292929;
}
.amd-preview-widget .aimd-security::before {
  content: "◬ ";
  font-size: 10px;
}

.amd-preview-widget .aimd-insight {
  position: absolute;
  left: var(--aimd-foot-insight-inset-x);
  right: var(--aimd-foot-insight-inset-x);
  bottom: var(--aimd-foot-insight-bottom);
  height: var(--aimd-foot-insight-height);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 12px 16px 0 16px;
  font-size: 12px;
}
.amd-preview-widget .aimd-insight-title {
  font-size: 11px;
  letter-spacing: 0.03em;
  margin-bottom: 7px;
}
.amd-preview-widget .aimd-insight-title .aimd-red { color: #FF8833; font-weight: 700; }
.amd-preview-widget .aimd-insight-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  color: #373737;
  max-width: 210px;
}
.amd-preview-widget .aimd-right-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3f3f3f;
  margin-top: 4px;
}
.amd-preview-widget .aimd-live {
  display: flex;
  align-items: center;
  gap: 6px;
}
.amd-preview-widget .aimd-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF8833;
  animation: aimd-status-blink 1.4s steps(1, end) infinite;
  animation-delay: 0s;
}
.amd-preview-widget .aimd-scope-wrap {
  margin-top: 12px;
  width: 100%;
  height: 28px;
  display: flex;
  align-items: flex-end;
}
.amd-preview-widget .aimd-blocks {
  display: flex;
  gap: 3px;
  width: 100%;
  align-items: flex-end;
  height: 100%;
}
@keyframes aimd-block-settle {
  0%   { background: #FF8833; }
  100% { background: #333; }
}
.amd-preview-widget .aimd-block {
  flex: 1;
  height: 100%;
  background: rgba(0,0,0,0.12);
  border-radius: 1.5px;
  transition: background 0.25s ease;
}
.amd-preview-widget .aimd-block.is-lit {
  background: #333;
}
.amd-preview-widget .aimd-blocks.is-full .aimd-block.is-lit {
  background: #FF8833;
  transition: background 0.4s ease;
}
/* Grey completion sweep — 2nd pass of #333 overwrites the full orange bar,
   paced to finish as the diagnosis report lands. */
.amd-preview-widget .aimd-blocks.is-full .aimd-block.is-lit.is-settled {
  background: #333;
  transition: background 0.3s ease;
}
.amd-preview-widget .aimd-block.is-lit.is-new {
  animation: aimd-block-settle 0.7s ease forwards;
  transition: none;
}

.amd-preview-widget .aimd-bottom-stack {
  display: contents;
}

/* Question screen — 700×850 band layout (desktop); flex stack (mobile) */
.amd-preview-widget .aimd-question-screen {
  position: absolute;
  inset: 0;
  font-family: 'Sebino', sans-serif;
  color: #111;
}
.amd-preview-widget .amd-panel .aimd-q-response, .amd-preview-widget .amd-panel .aimd-q-text, .amd-preview-widget .amd-panel .aimd-q-options {
  box-sizing: border-box;
  margin: 0;
}
.amd-preview-widget .amd-panel .aimd-q-response {
  color: #FF8833;
  letter-spacing: 0.02em;
  text-transform: none;
}
.amd-preview-widget .aimd-response-prefix {
  color: #000;
}
.amd-preview-widget .amd-panel .aimd-q-text {
  font-family: 'Sebino', sans-serif !important;
  font-weight: 400 !important;
  -webkit-text-stroke: 0.01em currentColor;
  letter-spacing: 0;
  color: #000;
  z-index: 2;
}
.amd-preview-widget .amd-panel .aimd-q-options {
  z-index: 5;
  overflow: hidden;
  pointer-events: auto;
}
.amd-preview-widget .amd-panel .aimd-q-option {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}
.amd-preview-widget .aimd-q-option {
  position: absolute;
  height: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  color: #1f1f1f;
  font-size: 12px;
  line-height: 1;
  border: 0;
  background: transparent;
  font-family: 'Sebino', sans-serif;
  padding: 10px 18px 0 14px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0;
  outline: none !important;
  transition: background 0.18s ease, color 0.18s ease;
}
.amd-preview-widget .aimd-q-option:hover, .amd-preview-widget .aimd-q-option:focus, .amd-preview-widget .aimd-q-option:focus-visible, .amd-preview-widget .aimd-q-option:active, .amd-preview-widget .aimd-q-option.selected {
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.amd-preview-widget .aimd-q-option:hover { background: rgba(0, 0, 0, 0.045); }
.amd-preview-widget .aimd-q-option.selected {
  background: #FF8833;
  color: #ffffff;
}
.amd-preview-widget .aimd-q-option.selected span:first-child, .amd-preview-widget .aimd-q-option.selected span:last-child {
  color: #ffffff !important;
}
.amd-preview-widget .aimd-q-option span:first-child {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.amd-preview-widget .aimd-q-option span:last-child {
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: auto;
  text-align: right;
  color: #777;
  font-size: 9px;
  letter-spacing: 0.12em;
}
/*
 * AIMD_LAYOUT_LOCK_REGISTRY — desktop hello / shared chrome (700×850 .amd-panel,
 * background art amd-pre-wgt-tall.webp as of 2026-08-20 — was 700×700/amd-pre-wgt.webp)
 * DO NOT alter locked rows during refactors, % migrations, or “sync” work unless the
 * user names that row. When moving another element, compute clearance against these boxes.
 * Horizontal (x, w) numbers are still /--aimd-canvas (700). Vertical (y, h) numbers
 * are /--aimd-canvas-h (850) — the bottom chrome cluster (L2 + security) sits ~160px
 * lower than the old 700-canvas numbers, measured directly off the new artwork; the
 * hello screen's own content (L1) did not move.
 *
 * | ID | Selector | Box (x, y, w, h) — y from panel top; x from panel left |
 * |----|----------|-------------------------------------------------------------|
 * | L1 | .aimd-hello-screen .aimd-start-desktop | center X; top 490; img 260×~32 → x 220–480, y 490–522 |
 * | L1 |   img shadow | drop-shadow(0 1.25px 4.375px rgba(0,0,0,0.0625)) — part of L1 |
 * | L2 | .aimd-insight (footer band) | top 725 (850 canvas, was 565/700); h 92; cols aligned via nudge-y 7px both |
 * | L2 |   .aimd-insight > div:first-child | translateY(7px) — aligns (a)MD™ Insight with RTU row |
 * | L2 |   .aimd-insight > div:last-child | translate(calc(-40/700*100% - 20px), 7px); .aimd-right-meta margin-top 0 |
 *
 * Scaled (not px-locked; may change via --aimd-* on .amd-panel):
 *   hero .aimd-main (230,133,300,384) | foot security top 710 (was 550) | topbar 40…
 *
 * L2 vars (desktop .amd-panel): --aimd-foot-insight-top 725; meta-shift-x -40/700;
 *   meta-nudge-x -20px; meta-nudge-y 7px. Do not change L2 without naming insight/footer.
 */
/* Desktop: 700×850 panel coordinate system — scales with .amd-panel */
@media (min-width: 901px) {
  .amd-preview-widget .amd-panel {
    container-type: inline-size;
    container-name: aimd-panel;
    --aimd-canvas: 700;
    /* Vertical reference — the new amd-pre-wgt-tall.webp is 700x850 (was
       700x700). Horizontal math (left/width/cqw) still divides by
       --aimd-canvas; anything vertical (top/bottom/height) divides by
       --aimd-canvas-h instead. Measured directly off the new artwork: the
       footer divider sits at y=725 (was y=565), i.e. the bottom chrome
       cluster (options-bottom/security/insight) was pushed down ~160px and
       that's the room handed to the Q&A band — everything above it (topbar,
       hero, band top) kept its original y. See AIMD_LAYOUT_LOCK_REGISTRY. */
    --aimd-canvas-h: 850;
    /* Q-slide bands */
    --aimd-band-width: calc(505 / var(--aimd-canvas) * 100%);
    --aimd-band-left: calc((100% - var(--aimd-band-width)) / 2);
    --aimd-response-top: calc(125 / var(--aimd-canvas-h) * 100%);
    --aimd-question-top: calc(205 / var(--aimd-canvas-h) * 100%);
    --aimd-options-lift-px: 30;
    --aimd-channels-options-top-px: 283;
    --aimd-channels-options-h-px: auto;
    --aimd-channels-continue-gap-px: 28;
    --aimd-channels-content-bottom: var(--aimd-options-bottom);
    --aimd-content-gap: calc(10 / var(--aimd-canvas) * 100cqw);
    --aimd-content-pad-y: calc(12 / var(--aimd-canvas) * 100cqw);
    --aimd-options-top: calc((370 - var(--aimd-options-lift-px)) / var(--aimd-canvas-h) * 100%);
    --aimd-response-bottom: calc((var(--aimd-canvas-h) - 195) / var(--aimd-canvas-h) * 100%);
    --aimd-question-bottom: calc((var(--aimd-canvas-h) - 355) / var(--aimd-canvas-h) * 100%);
    /* Band bottom: was y=540 (of 700); +160 to match the measured shift = y=700 (of 850). */
    --aimd-options-bottom: calc((var(--aimd-canvas-h) - 700) / var(--aimd-canvas-h) * 100%);
    /* Shared chrome (hello + flow) */
    --aimd-chrome-topbar-top: calc(40 / var(--aimd-canvas-h) * 100%);
    --aimd-chrome-topbar-left: calc(20 / var(--aimd-canvas) * 100%);
    --aimd-chrome-topbar-gap: calc(32 / var(--aimd-canvas) * 100%);
    --aimd-chrome-mark-inset: calc(25 / var(--aimd-canvas) * 100%);
    --aimd-chrome-left-col-left: calc(40 / var(--aimd-canvas) * 100%);
    --aimd-chrome-left-col-top: calc(120 / var(--aimd-canvas-h) * 100%);
    --aimd-chrome-left-col-bottom: calc(104 / var(--aimd-canvas-h) * 100%);
    --aimd-chrome-left-col-w: calc(80 / var(--aimd-canvas) * 100%);
    /* +160 shift, same as options-bottom (was y=550/565, now y=710/725 — 725 matches the measured divider exactly). */
    --aimd-foot-security-top: calc(710 / var(--aimd-canvas-h) * 100%);
    --aimd-foot-insight-top: calc(725 / var(--aimd-canvas-h) * 100%);
    --aimd-foot-insight-height: calc(92 / var(--aimd-canvas-h) * 100%);
    --aimd-foot-insight-inset-x: calc(16 / var(--aimd-canvas) * 100%);
    --aimd-foot-insight-offset-x: calc(25 / var(--aimd-canvas) * 100%);
    --aimd-foot-insight-meta-shift-x: calc(-40 / var(--aimd-canvas) * 100%);
    --aimd-foot-insight-meta-nudge-x: -20px;
    --aimd-foot-insight-meta-nudge-y: 7px;
    /* Hello hero + start (700px design positions) */
    --aimd-hello-hero-left: calc(230 / var(--aimd-canvas) * 100%);
    --aimd-hello-hero-top: calc(133 / var(--aimd-canvas-h) * 100%);
    --aimd-hello-hero-w: calc(300 / var(--aimd-canvas) * 100%);
    --aimd-hello-hero-h: calc(384 / var(--aimd-canvas-h) * 100%);
    /* Question type (Q slides + channels title) — single knob for desktop.
       cqw-scaled (not fixed px) so it shrinks with the panel — the response/
       question boxes above are height-clamped as a % of the panel, so a
       fixed px size overflows and clips text on narrower panels. */
    --aimd-question-font-size: calc(36.73 / var(--aimd-canvas) * 100cqw);
    --aimd-question-line-height: calc(1.16 * 0.92);
  }

  .amd-preview-widget .aimd-hello-screen .aimd-active,
  .amd-preview-widget .aimd-flow-screen .aimd-active {
    width: 100%;
    height: 100%;
    left: -6px;
    top: 0;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-topbar,
  .amd-preview-widget .aimd-flow-screen .aimd-topbar {
    top: var(--aimd-chrome-topbar-top);
    left: var(--aimd-chrome-topbar-left);
    gap: var(--aimd-chrome-topbar-gap);
    font-size: calc(10 / var(--aimd-canvas) * 100cqw);
  }

  .amd-preview-widget .aimd-topbar-mark {
    /* amd-widget-logo.webp (449x214). Was 75px of the 700 canvas on the old
       amd-brandmark.webp, then 105, now 126 (a further 20%) => ~60px tall,
       top 40 -> bottom 100, which still clears the left column (starts at
       y=120) and the counter (its bars end 78/700 from the right edge). */
    width: calc(126 / var(--aimd-canvas) * 100%);
    margin-left: var(--aimd-chrome-mark-inset);
  }

  /* LEARNING MODE sits under the page counter, right-aligned to it, instead of
     inline beside the top-left mark. The flow topbar goes position:static so
     its two children can be placed against .aimd-active (the panel coordinate
     box) rather than against the topbar's own box; both children are absolute,
     so the static topbar collapses to zero height and displaces nothing.
     Hello keeps the inline lockup — it has no counter to sit under. */
  .amd-preview-widget .aimd-flow-screen .aimd-topbar {
    position: static;
  }

  .amd-preview-widget .aimd-flow-screen .aimd-topbar-mark {
    position: absolute;
    top: var(--aimd-chrome-topbar-top);
    left: var(--aimd-chrome-topbar-left);
  }

  .amd-preview-widget .aimd-flow-screen .aimd-learning {
    position: absolute;
    /* counter top (40) + its row height (~14) + 12 of air, on the 850 canvas */
    top: calc(66 / var(--aimd-canvas-h) * 100%);
    /* same right edge as the counter's last bar */
    right: calc(78 / var(--aimd-canvas) * 100%);
    justify-content: flex-end;
    gap: calc(8 / var(--aimd-canvas) * 100cqw);
    /* No longer inherits the topbar's type — restate it, matching the
       counter's tracking since it now reads as one right-hand cluster. */
    font-size: calc(10 / var(--aimd-canvas) * 100cqw);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 25;
  }

  .amd-preview-widget .aimd-left-col {
    left: var(--aimd-chrome-left-col-left);
    top: var(--aimd-chrome-left-col-top);
    bottom: var(--aimd-chrome-left-col-bottom);
    width: var(--aimd-chrome-left-col-w);
    font-size: calc(8 / var(--aimd-canvas) * 100cqw);
  }

  .amd-preview-widget .aimd-security {
    top: var(--aimd-foot-security-top);
    bottom: auto;
    font-size: calc(10 / var(--aimd-canvas) * 100cqw);
  }

  /* L2 — insight footer; see AIMD_LAYOUT_LOCK_REGISTRY */
  .amd-preview-widget .aimd-insight {
    top: var(--aimd-foot-insight-top);
    bottom: auto;
    left: calc(var(--aimd-foot-insight-inset-x) + var(--aimd-foot-insight-offset-x));
    right: var(--aimd-foot-insight-inset-x);
    height: var(--aimd-foot-insight-height);
    font-size: calc(12 / var(--aimd-canvas) * 100cqw);
  }

  .amd-preview-widget .aimd-insight > div:first-child {
    transform: translateY(var(--aimd-foot-insight-meta-nudge-y)) !important;
  }

  .amd-preview-widget .aimd-insight > div:last-child {
    transform: translate(
      calc(var(--aimd-foot-insight-meta-shift-x) + var(--aimd-foot-insight-meta-nudge-x)),
      var(--aimd-foot-insight-meta-nudge-y)
    ) !important;
  }

  .amd-preview-widget .aimd-insight .aimd-right-meta {
    margin-top: 0 !important;
  }

  /* Hello stack — measured off the approved layout, in 700x850 canvas units.
     Vertical gaps use cqw (not %) so they scale with the panel the same way
     the type does; % margins would resolve against the stack's width.
     Lockup, invite and CTA are the approved sizes scaled to 80%; `top` is
     re-anchored so the shorter stack keeps the same optical centre (~372)
     in the band above the footer rule. */
  .amd-preview-widget .aimd-hello-screen .aimd-main {
    left: 50%;
    top: calc(156 / var(--aimd-canvas-h) * 100%);
    width: calc(480 / var(--aimd-canvas) * 100%);
    height: auto;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-hello-lockup {
    width: calc(270.4 / 480 * 100%);
    max-width: none;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-invite {
    margin-top: calc(32 / var(--aimd-canvas) * 100cqw) !important;
    /* Narrower than the stack so the second sentence breaks after
       "5 ways to", as in the approved layout. */
    max-width: calc(288 / 480 * 100%);
    font-size: calc(24 / var(--aimd-canvas) * 100cqw);
    /* !important: unlayered global p line-height wins over @layer widget. */
    line-height: 1.2 !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-start-cta {
    margin-top: calc(60 / var(--aimd-canvas) * 100cqw) !important;
    width: calc(325.6 / 480 * 100%);
    font-size: calc(20.8 / var(--aimd-canvas) * 100cqw) !important;
    /* 17/15 less 6px top and bottom — button height 58 -> 46 on the canvas. */
    padding: calc(8.8 / var(--aimd-canvas) * 100cqw) 0 calc(7.2 / var(--aimd-canvas) * 100cqw) !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-nocard {
    margin-top: calc(8 / var(--aimd-canvas) * 100cqw) !important;
    /* 19 less 4pt (5.33px), in two 2pt passes. */
    font-size: calc(13.66 / var(--aimd-canvas) * 100cqw);
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-hello {
    font-size: calc(74 / var(--aimd-canvas) * 100cqw) !important;
    line-height: 0.92 !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-im {
    top: calc(82 / 384 * 100%);
    left: calc(2 / 300 * 100%);
    font-size: calc(25 / var(--aimd-canvas) * 100cqw);
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-brandmark {
    top: calc(126 / 384 * 100%);
    width: calc(238 / 300 * 100%);
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-copy {
    top: calc(234 / 384 * 100%);
    max-width: calc(260 / 300 * 100%);
    font-size: calc(18.75 / var(--aimd-canvas) * 100cqw);
  }

  /* L1 — canvas-scaled (was px-locked; see AIMD_LAYOUT_LOCK_REGISTRY). Hello screen's own content (hero+button) didn't move when the canvas grew — only the bottom chrome cluster did — so this still divides by the vertical canvas at its original y. */
  .amd-preview-widget .aimd-hello-screen .aimd-start-desktop {
    top: calc(490 / var(--aimd-canvas-h) * 100%) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    transform: translateX(-50%) !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-start-desktop img {
    width: calc(260 / var(--aimd-canvas) * 100cqw) !important;
    max-width: none !important;
    height: auto !important;
    filter: drop-shadow(0 1.25px 4.375px rgba(0, 0, 0, 0.0625)) !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-left-margin-img {
    top: calc(25 / var(--aimd-canvas-h) * 100%);
    width: calc(38 / var(--aimd-canvas) * 100%);
  }

  .amd-preview-widget .aimd-flow-screen .aimd-left-margin-img {
    top: calc(53 / var(--aimd-canvas-h) * 100%);
  }

  .amd-preview-widget .aimd-question-screen {
    z-index: 4;
  }

  /* Clamp the 3-block content window to the 700×850 coordinates.
     Grid (not flex) so the three sections divide the band dynamically instead
     of stacking at their natural content height with dead space left over:
     the three bands split the 125-700 window 1 : 1.4 : 1.4 (response / question
     / options), matching the tall-canvas design: the response band is the
     shortest (it is at most 3-4 lines of 20.79px type), and question and
     options get equal, larger bands. The options row must clear its worst
     case - 3 rows of two-line pills = 3x54.5 + 2x10 row-gap = 183px - which
     1.4fr (~196px of the 531px content box) does; the old 1.3fr gave it 177px
     and two-line labels spilled past the band into the security line.
     Rows resize with the band on any panel width. */
  .amd-preview-widget .aimd-question-screen .aimd-q-group {
    position: absolute !important;
    top: var(--aimd-response-top) !important; /* 125px */
    bottom: var(--aimd-options-bottom) !important; /* ends at options bottom (700px, was 540 on the 700-canvas) */
    left: var(--aimd-band-left) !important;
    width: var(--aimd-band-width) !important;
    display: grid;
    grid-template-rows: 1fr 1.4fr 1.4fr;
    align-items: stretch;
    gap: var(--aimd-content-gap);
    padding: var(--aimd-content-pad-y) 0;
    overflow: visible;
    box-sizing: border-box;
  }

  .amd-preview-widget .amd-panel .aimd-q-response {
    position: relative;
    top: auto;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: auto;
    right: auto;
    padding: 0;
    /* No max-height/overflow:hidden — its grid row IS the size budget now,
       and it's dynamic (not a fixed px cap), so it can't clip the way the
       old fixed-canvas math did.
       Block, not flex: flex made the black "(a)MD™:" prefix its own column,
       so replies hung in an indented text column beside it. As a block the
       prefix is simply the first inline run of the paragraph — it starts the
       reply, and every wrapped line returns to the same left edge. Content
       sits at the top of the band, so a reply always starts at the same y
       whatever its length. */
    overflow: visible;
    display: block;
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    /* cqw-scaled (not fixed px) — see --aimd-question-font-size comment above.
       20.79 + 2pt (2.67px) = 23.46. */
    font-size: calc(23.46 / var(--aimd-canvas) * 100cqw) !important;
    line-height: calc(1.08 * 1.06 * 1.12) !important;
  }

  .amd-preview-widget .aimd-question-screen .aimd-q-text {
    position: relative;
    top: auto;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: auto;
    right: auto;
    padding: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    -webkit-text-stroke: 0.01em currentColor;
    font-size: var(--aimd-question-font-size) !important;
    line-height: var(--aimd-question-line-height) !important;
  }

  .amd-preview-widget .amd-panel .aimd-q-options {
    position: relative;
    top: auto;
    left: 0;
    width: calc(100% + 56px);
    max-width: none;
    margin-left: -28px;
    margin-right: -28px;
    /* Fills its 1.3fr grid row (the band's bottom third) instead of sizing
       to its own content, then centers the 6 buttons within that space. */
    height: 100%;
    min-height: 0;
    bottom: auto;
    right: auto;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    column-gap: 22px;
    row-gap: 10px;
    align-content: center;
    overflow: visible !important;
    z-index: 5;
  }

  .amd-preview-widget .amd-panel .aimd-q-options > .aimd-q-option {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0;
    flex: initial;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding: 13px 18px 12px 20px !important;
    align-items: flex-start !important;
    /* Was calc((11px+4pt)*0.85) ~13.88px — sized up when the taller 700x850
       canvas gave the band real room, then pulled back 2pt (2.67px) from 18
       to 15.33. cqw-scaled so it's still adaptive to panel width like the
       rest of the desktop layout. */
    font-size: calc(15.33 / var(--aimd-canvas) * 100cqw) !important;
    line-height: 1.28 !important;
    display: grid !important;
    /* Single column — the "01/02/…" index suffix is hidden below, so the
       label gets the full width instead of sharing it with a number column. */
    grid-template-columns: minmax(0, 1fr);
    /* !important required: an unlayered `button { border-radius: 0 }` outranks
       every *normal* declaration inside @layer widget, whatever its specificity.
       For important declarations the layer order reverses, so this wins.
       (Same fix as the mobile pill rule below.) */
    border-radius: 999px !important;
    /* 1pt light-grey outline on the six answer pills. Needs !important for
       the same reason as border-radius above (unlayered `button { border: 0 }`),
       and it also has to outrank the .aimd-q-option:hover/:focus/.selected
       `border: 0 !important` reset at the top of the file — this selector is
       (0,4,0) vs that rule's (0,3,0), so it wins. box-sizing is border-box
       and the band has ~5px of slack over its worst case, so the ~2.7px the
       border adds per row does not re-introduce overflow. */
    border: 1pt solid #d7d7d7 !important;
  }

  /* Selected pill fills with #FF8833 — carry the border to the fill colour so
     it doesn't read as a grey ring around an orange button. */
  .amd-preview-widget .amd-panel .aimd-q-options > .aimd-q-option.selected {
    border-color: #FF8833 !important;
  }

  .amd-preview-widget .amd-panel .aimd-q-option span:first-child {
    grid-column: 1;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: left;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  /* Index suffix ("01", "02", …) — hidden per request; label now uses the
     full-width single column above. */
  .amd-preview-widget .amd-panel .aimd-q-option span:last-child {
    display: none;
  }

  .amd-preview-widget .amd-panel .aimd-q-working {
    top: auto;
    bottom: calc(133 / var(--aimd-canvas-h) * 100%);
    left: 50%;
    width: auto;
    transform: translateX(-50%);
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    font-size: calc(11px + 2pt) !important;
    line-height: calc(1.08 * 1.06) !important;
    letter-spacing: 0;
    text-transform: none;
    color: #FF8833 !important;
  }

  .amd-preview-widget .aimd-flow-screen .aimd-question-counter {
    display: flex;
    position: absolute;
    top: var(--aimd-chrome-topbar-top);
    right: calc(78 / var(--aimd-canvas) * 100%);
    z-index: 25;
    align-items: center;
    gap: calc(8 / var(--aimd-canvas) * 100cqw);
    font-size: calc(10 / var(--aimd-canvas) * 100cqw);
    letter-spacing: 0.28em;
    text-transform: uppercase;
  }

  .amd-preview-widget .aimd-flow-screen .aimd-question-counter > span {
    color: #111;
  }

  .amd-preview-widget .aimd-flow-screen .aimd-question-counter i {
    display: block;
    width: 32px;
    height: 2px;
    background: #d7d7d7;
    border-radius: 999px;
  }

  .amd-preview-widget .aimd-flow-screen .aimd-question-counter i.aimd-counter-complete {
    background: #111;
  }

  .amd-preview-widget .aimd-flow-screen .aimd-question-counter i.aimd-counter-current {
    background: #FF8833;
  }
}

.amd-preview-widget .aimd-q-rowline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
  display: none;
}
.amd-preview-widget .aimd-q-rowline-one { top: 33.333%; }
.amd-preview-widget .aimd-q-rowline-two { top: 72.222%; }

.amd-preview-widget .aimd-q-working {
  position: absolute;
  left: 50%;
  width: auto;
  z-index: 12;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: 'Sebino', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #FF8833;
  text-align: center;
  min-height: 20px;
  line-height: 1.08;
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 1;
  bottom: 133px;
  top: auto;
}
.amd-preview-widget .aimd-q-working.aimd-q-working--pulse {
  animation: aimd-working-pulse 1.3s ease-in-out infinite;
}
@keyframes aimd-working-pulse {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .amd-preview-widget .aimd-q-working.aimd-q-working--pulse {
    animation: none;
    opacity: 1;
  }
}
.amd-preview-widget .aimd-q-working[hidden] {
  display: none;
}

.amd-preview-widget .aimd-flow-screen .aimd-insight {
  pointer-events: none;
}


/* Mobile locked — matches static/amd-hello-preview.html @media (max-width: 900px) */
@media (max-width: 900px) {
  .amd-preview-widget .amd-panel {
    --aimd-foot-insight-bottom: -21px;
    --aimd-foot-insight-height: 94px;
    --aimd-foot-insight-inset-x: 8px;
    --aimd-foot-security-bottom: 112px;
    /* Symmetric vertical insets for flex centering (head = topbar/counter band) */
    --aimd-mobile-head-clear: 46px;
    --aimd-mobile-footer-reserve: 83px;  /* = measured height of .aimd-bottom-stack */
    --aimd-mobile-content-pad-y: 20px;
    --aimd-mobile-content-gap: 12px;
    /* Single content gutter — response, question and options all align to it */
    --aimd-mobile-gutter: 20px;
    /* Must stay 0: .aimd-question-screen sets overflow-y:auto, which forces
       overflow-x to compute to `auto` too — any horizontal bleed gets clipped,
       shearing the pills' rounded ends off. Pills span gutter to gutter. */
    --aimd-mobile-opt-bleed: 0px;
    /* Asymmetric inner padding: the label sits well inset from the pill's left
       edge, the number rides close to its right edge. */
    --aimd-mobile-opt-pad-l: 24px;
    --aimd-mobile-opt-pad-r: 16px;
    /* 12px + 1px border keeps a single-line row at ~45px — above the 44px
       touch minimum. Do not reduce without re-checking that. */
    --aimd-mobile-opt-pad-y: 12px;
    /* 999px = stadium ends. Swap for a fixed px radius if 2-line rows read too round. */
    --aimd-mobile-opt-radius: 999px;
    --aimd-mobile-opt-border: #e2e2e2;
    --aimd-mobile-opt-gap: 6px;
    --aimd-mobile-channels-continue-gap: 28px;
    --aimd-mobile-hello-vert-inset: clamp(168px, 26vh, 220px);
  }

  .amd-preview-widget.amd-stage {
    --aimd-mobile-inset-top: 8px;
    --aimd-mobile-inset-bottom: 8px;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    padding-top: 0;
    padding-bottom: 0;
    align-items: stretch;
  }
  .amd-preview-widget.amd-stage.results-mode { padding-bottom: 0; }

  .amd-preview-widget .amd-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    height: 100%;
    min-height: 100dvh;
    max-height: none;
    flex: 1 1 auto;
    padding-top: var(--aimd-mobile-inset-top);
    padding-bottom: var(--aimd-mobile-inset-bottom);
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    background-image: none;
  }

  .amd-lightbox__widget .amd-panel {
    min-height: 0 !important;
    padding-top: var(--aimd-mobile-inset-top) !important;
    padding-bottom: var(--aimd-mobile-inset-bottom) !important;
  }

  .amd-preview-widget .aimd-active {
    width: 100%;
    height: 100%;
    min-height: 0;
    left: 0;
    top: 0;
    border-radius: 0;
    box-sizing: border-box;
  }

  .amd-preview-widget .aimd-hello-screen, .amd-preview-widget .aimd-flow-screen {
    min-height: 0;
  }

  .amd-preview-widget .aimd-topbar {
    top: 20px;
    left: 12px;
    gap: 18px;
    font-size: 8px;
    letter-spacing: 0.2em;
  }

  .amd-preview-widget .aimd-learning {
    font-size: 0;
    gap: 0;
  }

  .amd-preview-widget .aimd-question-counter {
    position: absolute;
    top: 20px;
    right: 56px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8a8a8a;
    font-size: 7px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
  }
  .amd-preview-widget .aimd-question-counter i {
    display: block;
    width: 29px;
    height: 2px;
    background: #d7d7d7;
    border-radius: 999px;
  }
  .amd-preview-widget .aimd-question-counter i.aimd-counter-complete { background: #111; }
  .amd-preview-widget .aimd-question-counter i.aimd-counter-current { background: #FF8833; }

  .amd-preview-widget .aimd-left-col {
    left: 12px;
    top: 132px;
    bottom: 112px;
    width: 52px;
    font-size: 6px;
  }
  .amd-preview-widget .aimd-hello-screen .aimd-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: var(--aimd-mobile-hello-vert-inset);
    padding-bottom: var(--aimd-mobile-hello-vert-inset);
  }

  /* Intro panel — mobile hero centered in viewport band */
  .amd-preview-widget .aimd-hello-screen .aimd-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 24px;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    transform-origin: top center;
    height: auto;
    min-height: 0;
    max-height: none;
    flex: 0 0 auto;
    text-align: center;
    box-sizing: border-box;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main > .aimd-intro-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-intro-group > .aimd-hello, .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-intro-group > .aimd-im, .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-intro-group > .aimd-brandmark, .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-intro-group > .aimd-copy {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main {
    gap: 24px;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-hello-lockup {
    width: min(78%, 320px);
  }

  .amd-preview-widget .aimd-hello-screen .aimd-invite {
    font-size: 20px;
    max-width: 320px;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-start-cta {
    width: min(88%, 340px);
    font-size: 18px !important;
    padding: 16px 0 14px !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-nocard {
    margin-top: -10px !important;
    font-size: 13px;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-hello {
    font-size: 98px !important;
    line-height: 0.92 !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-im {
    font-size: 30px;
    line-height: 1;
    color: #29313c;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-brandmark {
    width: min(calc(238px * 0.8), 80%);
    height: auto;
  }

  .amd-preview-widget .aimd-left-margin-img {
    width: calc(38px * 0.8);
    transform: scale(calc(0.75 * 0.8));
    transform-origin: top left;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-copy {
    font-size: calc(14px * 1.2) !important;
    line-height: 1.42 !important;
    max-width: 280px;
    padding-bottom: 25px;
    color: #303846;
    text-align: center;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main .aimd-copy strong {
    font-weight: 600;
    color: #303846;
  }

  .amd-preview-widget .aimd-start-desktop { display: none; }
  .amd-preview-widget .aimd-start-mobile { display: block; }
  .amd-preview-widget .aimd-hello-screen .aimd-start-desktop { display: none !important; }
  .amd-preview-widget .aimd-hello-screen .aimd-start-mobile { display: block !important; }

  .amd-preview-widget .aimd-bottom-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    box-sizing: border-box;
    padding: 0 8px 10px;
  }

  .amd-preview-widget .aimd-bottom-stack .aimd-start {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    margin: 0;
    flex-shrink: 0;
    height: auto;
  }
  .amd-preview-widget .aimd-bottom-stack .aimd-start img {
    width: 225px;
    filter: drop-shadow(0 calc(4px * 0.25) calc(14px * 0.25) rgba(0, 0, 0, calc(0.2 * 0.25)));
  }
  .amd-preview-widget .aimd-bottom-stack .aimd-start.aimd-start--swap {
    position: relative;
    width: 225px;
  }
  .amd-preview-widget .aimd-bottom-stack .aimd-start.aimd-start--swap .aimd-start-swap__img {
    width: 225px;
  }
  .amd-preview-widget .aimd-bottom-stack .aimd-start.aimd-start--swap .aimd-start-swap__img--hover {
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
  }

  .amd-preview-widget .aimd-bottom-stack .aimd-q-working {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    min-height: 25px;
    margin: 0;
    flex-shrink: 0;
    text-align: center;
  }

  .amd-preview-widget .amd-panel .aimd-q-working {
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    font-size: calc(14px + 2pt) !important;
    line-height: calc(0.9 * 1.1) !important;
    letter-spacing: 0;
    text-transform: none;
    color: #FF8833 !important;
  }

  .amd-preview-widget .aimd-bottom-stack .aimd-security {
    position: static;
    bottom: auto;
    width: auto;
    max-width: 320px;
    text-align: center;
    font-size: 8px;
    letter-spacing: 0.07em;
  }

  .amd-preview-widget .aimd-bottom-stack .aimd-insight {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 374px;
    height: auto;
    padding: 10px 10px 0;
  }

  .amd-preview-widget .aimd-bottom-stack .aimd-insight > div:first-child,
  .amd-preview-widget .aimd-bottom-stack .aimd-insight > div:last-child {
    width: 80%;
    max-width: 80%;
    box-sizing: border-box;
  }

  .amd-preview-widget .aimd-bottom-stack .aimd-insight > div:first-child {
    justify-self: start;
  }

  .amd-preview-widget .aimd-bottom-stack .aimd-insight > div:last-child {
    justify-self: end;
  }

  .amd-preview-widget .aimd-bottom-stack .aimd-insight-copy {
    max-width: calc(210px * 0.8);
  }

  .amd-preview-widget .aimd-insight-title { font-size: 9px; margin-bottom: 6px; }
  .amd-preview-widget .aimd-insight-copy { font-size: 10px; line-height: 1.22; }
  .amd-preview-widget .aimd-right-meta { font-size: 7px; margin-top: 2px; }
  .amd-preview-widget .aimd-scope-wrap { margin-top: 9px; height: 22px; }

  .amd-preview-widget .aimd-flow-screen .aimd-question-screen {
    position: absolute;
    inset: unset;
    top: 0;
    left: var(--aimd-mobile-gutter);
    right: var(--aimd-mobile-gutter);
    bottom: var(--aimd-mobile-footer-reserve);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    overflow-x: visible;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-top: var(--aimd-mobile-head-clear);
    /* 0, not content-pad-y: the group's space-evenly owns the bottom gap. Any
       padding here sits outside the distribution and unbalances it. */
    padding-bottom: 0;
    min-height: 0;
  }

  /*
   * Three content-sized bands — response, question, options — with the slide's
   * free height split into four equal parts: above the response, between each
   * pair, and below the options.
   *
   * row-gap MUST stay 0. space-evenly distributes only the height left over
   * *after* gaps are subtracted, then adds the gap back between rows — so any
   * non-zero row-gap makes the two inner gaps permanently larger than the two
   * outer ones. The gap is the distribution, not an addition to it.
   */
  .amd-preview-widget .aimd-flow-screen .aimd-question-screen .aimd-q-group {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: space-evenly;
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    row-gap: 0;
    box-sizing: border-box;
    margin-block: 0;
    padding: 0;
    min-height: 0;
  }

  .amd-preview-widget .aimd-flow-screen .aimd-q-response:empty {
    display: none;
  }

  .amd-preview-widget .aimd-flow-screen .aimd-q-response:not(:empty) {
    margin-top: 0;
  }

  .amd-preview-widget .amd-panel .aimd-q-response {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    grid-row: 1;
    /* !important: unlayered `p { margin-bottom: 1rem }` outranks any normal
       declaration in @layer widget, and that 16px lands inside the grid gap. */
    margin: 0 !important;
    box-sizing: border-box;
    padding: 0;
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 4.55vw, 21.3px) !important;
    line-height: 1.28 !important;
    letter-spacing: 0;
    text-transform: none;
  }

  .amd-preview-widget .amd-panel .aimd-q-text {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    grid-row: 2;
    /* !important: same reason as .aimd-q-response — unlayered h1 margin. */
    margin: 0 !important;
    box-sizing: border-box;
    padding: 0;
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    -webkit-text-stroke: 0.01em currentColor;
  }

  /* Keep channel question title exactly matched to Q slide title on mobile */
  .amd-preview-widget .amd-panel .aimd-q-text,
  .amd-preview-widget .aimd-channels-title {
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    -webkit-text-stroke: 0.01em currentColor;
    font-size: clamp(23px, 6.7vw, 30px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.005em !important;
  }

  /* Mirrors the orange "(a)MD™:" prefix above it, so the slide reads as two
     turns of a conversation. Delete this rule to drop the Q:. */
  .amd-preview-widget .aimd-flow-screen .aimd-q-text::before {
    content: "Q: ";
    color: #FF8833;
  }

  .amd-preview-widget .amd-panel .aimd-q-options {
    overflow: visible !important;
  }

  .amd-preview-widget .aimd-flow-screen .aimd-q-group .aimd-q-options {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    grid-row: 3;
    width: calc(100% + var(--aimd-mobile-opt-bleed) * 2);
    max-width: none;
    margin-left: calc(var(--aimd-mobile-opt-bleed) * -1);
    margin-right: calc(var(--aimd-mobile-opt-bleed) * -1);
    height: auto;
    margin-top: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    row-gap: var(--aimd-mobile-opt-gap);
    justify-items: stretch;
    overflow: visible;
    padding-bottom: 0;
    background: #ffffff;
    z-index: 20;
  }

  .amd-preview-widget .amd-panel .aimd-q-options > .aimd-q-option {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    font-size: 13.7px !important;
    line-height: 1.3 !important;
    padding: var(--aimd-mobile-opt-pad-y) var(--aimd-mobile-opt-pad-r)
             var(--aimd-mobile-opt-pad-y) var(--aimd-mobile-opt-pad-l) !important;
    overflow: visible;
    box-sizing: border-box;
    /* Resting outline — the base rule forces `border: 0 !important`, so this
       needs !important plus the higher specificity this selector already has. */
    border: 1px solid var(--aimd-mobile-opt-border) !important;
    /* !important required: an unlayered `button { border-radius: 0 }` outranks
       every *normal* declaration inside @layer widget, whatever its specificity.
       For important declarations the layer order reverses, so this wins. */
    border-radius: var(--aimd-mobile-opt-radius) !important;
    background: #ffffff;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  }

  /* Selected: orange fill, white text, and the outline goes white so it
     disappears into the page rather than ringing the pill. */
  .amd-preview-widget .amd-panel .aimd-q-options > .aimd-q-option.selected {
    background: #FF8833 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
  }

  .amd-preview-widget .amd-panel .aimd-q-options > .aimd-q-option:not(.selected):active {
    background: rgba(0, 0, 0, 0.04);
    border-color: #cfcfcf !important;
  }

  .amd-preview-widget .amd-panel .aimd-q-options > .aimd-q-option span:first-child {
    grid-column: 1;
    flex: initial !important;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    text-align: left;
    line-height: 1.3;
  }

  .amd-preview-widget .amd-panel .aimd-q-option:not(.selected):hover { background: transparent; }

  .amd-preview-widget .amd-panel .aimd-q-option span:last-child {
    grid-column: 2;
    flex: initial !important;
    margin-left: 0 !important;
    align-self: center;
    justify-self: end;
    /* Was 28px + 10px gap for a glyph that needs ~15px — the slack was pushing
       the number away from the label and stealing width from it. */
    min-width: 0;
    text-align: right;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: #9a9a9a;
    transform: none;
  }

  .amd-preview-widget .amd-panel .aimd-q-option.selected span:first-child, .amd-preview-widget .amd-panel .aimd-q-option.selected span:last-child {
    color: #ffffff !important;
  }

  .amd-preview-widget .aimd-q-rowline { display: none; }

}

/* ── CONTENT REBUILD ENTER ─────────────────────────────────────────────────── */
@keyframes aimd-content-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes aimd-content-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

.amd-preview-widget .aimd-content-pending {
  opacity: 0 !important;
  pointer-events: none;
}

.amd-preview-widget .aimd-content-enter {
  animation: aimd-content-enter 0.5s ease-out both;
}

.amd-preview-widget .aimd-content-exit {
  animation: aimd-content-exit 0.32s ease-in both;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .amd-preview-widget .aimd-content-enter,
  .amd-preview-widget .aimd-content-exit {
    animation: none !important;
  }
}

/* ── FLOW SLIDES — one visible at a time (.active) ─────────────────────────── */
.amd-preview-widget .aimd-flow-screen .aimd-question-screen,
.amd-preview-widget .aimd-flow-screen .aimd-diagnosis-screen,
.amd-preview-widget .aimd-flow-screen .aimd-channels-screen {
  display: none !important;
}
@media (min-width: 901px) {
  .amd-preview-widget .aimd-flow-screen .aimd-question-screen.active {
    display: block !important;
  }
  .amd-preview-widget .aimd-flow-screen .aimd-diagnosis-screen.active {
    display: flex !important;
  }
  .amd-preview-widget .aimd-flow-screen .aimd-channels-screen.active {
    display: flex !important;
  }
}
@media (max-width: 900px) {
  .amd-preview-widget .aimd-flow-screen .aimd-question-screen.active,
  .amd-preview-widget .aimd-flow-screen .aimd-diagnosis-screen.active,
  .amd-preview-widget .aimd-flow-screen .aimd-channels-screen.active {
    display: flex !important;
  }
}

/* ── CHANNEL SELECT SLIDE ──────────────────────────────────────────────────── */
.amd-preview-widget .aimd-channels-screen {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  font-family: 'Sebino', sans-serif;
  color: #111;
}
.amd-preview-widget .aimd-flow-screen.aimd-channels-active .aimd-question-counter {
  display: none;
}
.amd-preview-widget .aimd-channels-screen .aimd-channels-slot, .amd-preview-widget .aimd-channels-screen .aimd-channels-options, .amd-preview-widget .aimd-channels-screen .aimd-channels-continue {
  pointer-events: auto;
}
.amd-preview-widget .aimd-channels-slot {
  position: absolute;
  top: calc(15% - 20px);
  left: 25%;
  right: 15%;
  bottom: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 14px;
  text-align: center;
}
.amd-preview-widget .aimd-channels-response {
  margin: 0 0 10px;
  padding: 0;
  color: #FF8833;
  font-family: 'Sebino', sans-serif;
  font-weight: 400;
  font-size: calc((14px + 2pt) * 1.3 * 0.9);
  line-height: calc(0.9 * 1.1 * 1.12);
  letter-spacing: 0;
  text-transform: none;
}
.amd-preview-widget .aimd-channels-response:empty {
  display: none;
  margin: 0;
}
.amd-preview-widget .aimd-channels-title {
  margin: 0;
  padding: 0;
  font-family: 'Sebino', sans-serif;
  font-weight: 400;
  -webkit-text-stroke: 0.01em currentColor;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: #111;
}
.amd-preview-widget .aimd-channels-helper {
  margin: 16px 0 0;
  padding: 0;
  font-family: 'Sebino', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  color: #777;
  text-align: center;
}
.amd-preview-widget .aimd-channels-options {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(520px, 72%);
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  justify-items: start;
  transform: translateX(-50%);
}
.amd-preview-widget .aimd-channels-options .aimd-channel-tile {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 19px;
  line-height: 1.2;
}
.amd-preview-widget .aimd-channel-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  color: #ffffff;
  border-radius: 8px;
}
.amd-preview-widget .aimd-channel-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
.amd-preview-widget .aimd-channel-leading {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.amd-preview-widget .aimd-channel-tile.selected .aimd-channel-icon {
  background: transparent;
  color: #ffffff;
}
.amd-preview-widget .aimd-channel-tile .aimd-channel-suffix {
  display: none;
}
@media (min-width: 901px) {
.amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(1), .amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(3), .amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(5) { left: 0; width: 48.333%; }
.amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(2), .amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(4), .amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(6) { left: 53.333%; width: 46.667%; }
.amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(1), .amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(2) { top: 0; }
.amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(3), .amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(4) { top: 33.333%; }
.amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(5), .amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(6) { top: 66.666%; }
.amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(7) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 48px) / 2);
}
}
/* CONTINUE is the same component as the hello screen's START NOW: it carries
   .aimd-start-cta and takes all of its type, fill and radius from there. This
   rule only places it — it must NOT restate background/border/radius, since it
   sits later in the sheet than .aimd-start-cta and would win at equal
   specificity and turn the pill back into a bare image button. */
.amd-preview-widget .aimd-channels-continue {
  margin: 14px auto 0;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
}
@media (min-width: 901px) {
  /* Channels slide — same 125–700px band as Q slides (see .aimd-q-group) */
  .amd-preview-widget .aimd-channels-screen {
    inset: auto;
    top: var(--aimd-response-top);
    bottom: var(--aimd-channels-content-bottom);
    left: var(--aimd-band-left);
    width: var(--aimd-band-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: var(--aimd-content-gap);
    box-sizing: border-box;
    padding: var(--aimd-content-pad-y) 0;
    overflow: hidden;
    pointer-events: auto;
  }

  .amd-preview-widget .aimd-channels-slot {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    text-align: left;
    pointer-events: none;
  }
  .amd-preview-widget .aimd-channels-response {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: 100%;
    max-height: calc(88 / var(--aimd-canvas) * 100cqw);
    transform: none;
    margin: 0;
    overflow: hidden;
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    font-size: calc((11px + 2pt) * 1.3 * 1.3 * 0.9) !important;
    line-height: calc(1.08 * 1.06 * 1.12) !important;
    color: #FF8833;
    text-align: left;
  }
  .amd-preview-widget .aimd-channels-heading {
    flex: 0 0 auto;
    width: 100%;
    text-align: left;
  }
  .amd-preview-widget .aimd-channels-heading.is-hidden {
    display: none !important;
  }
  .amd-preview-widget .aimd-channels-title {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
    margin: 0;
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    -webkit-text-stroke: 0.01em currentColor;
    font-size: var(--aimd-question-font-size) !important;
    line-height: var(--aimd-question-line-height) !important;
    letter-spacing: 0;
    color: #000;
    text-align: left;
  }
  .amd-preview-widget .aimd-channels-helper {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
    margin: 0;
    font-size: 15px !important;
    line-height: calc(1.08 * 1.06) !important;
    text-align: center;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
    min-height: 0;
    width: max-content;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: max-content max-content;
    /* Row gap scales with the tile (14 -> 17.5). The column gap does NOT: the
       two columns are max-content and 25% wider now, and the pair still has to
       fit --aimd-band-width (505 units), so 110 comes down to 48. */
    gap: calc(17.5 / var(--aimd-canvas) * 100cqw) calc(48 / var(--aimd-canvas) * 100cqw);
    justify-content: center;
    align-items: center;
    align-self: center;
    transform: none;
    z-index: 5;
    pointer-events: auto;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options .aimd-channel-tile {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: max-content !important;
    max-width: none !important;
    /* Tile scaled +25%: 34 -> 42.5 canvas units, type (19px+2pt) -> x1.25. */
    height: calc(42.5 / var(--aimd-canvas) * 100cqw) !important;
    min-height: 0 !important;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    font-size: calc((19px + 2pt) * 1.25) !important;
    line-height: 1.2 !important;
    letter-spacing: 0;
    text-transform: none;
    color: #000 !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options .aimd-channel-tile:hover:not(.selected) {
    background: transparent !important;
    color: #FF8833 !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options .aimd-channel-tile.selected {
    background: transparent !important;
    color: #FF8833 !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channel-leading {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: calc(40 / var(--aimd-canvas) * 100cqw);
    width: auto;
    max-width: 100%;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channel-leading > span:not(.aimd-channel-icon) {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    align-self: center;
    min-height: calc(42.5 / var(--aimd-canvas) * 100cqw);
    padding: 0;
    margin: 0;
    color: inherit;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options .aimd-channel-tile.selected .aimd-channel-leading > span:not(.aimd-channel-icon) {
    color: #FF8833 !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options .aimd-channel-tile:hover .aimd-channel-leading > span:not(.aimd-channel-icon) {
    color: #FF8833 !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(7) {
    grid-column: 1 / -1;
    justify-self: center;
    width: max-content !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(1),
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(3),
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(5) {
    left: auto !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(2),
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(4),
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(6) {
    left: auto !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(1),
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(2) {
    top: auto !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(3),
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(4) {
    top: auto !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(5),
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(6) {
    top: auto !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options > .aimd-channel-tile:nth-of-type(7) {
    left: auto !important;
    top: auto !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options .aimd-channel-icon {
    flex: 0 0 calc(42.5 / var(--aimd-canvas) * 100cqw);
    width: calc(42.5 / var(--aimd-canvas) * 100cqw);
    height: calc(42.5 / var(--aimd-canvas) * 100cqw);
    border-radius: 10px;
    overflow: hidden;
    background: #111111 !important;
    color: #ffffff !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options .aimd-channel-icon svg {
    width: calc(23.75 / var(--aimd-canvas) * 100cqw);
    height: calc(23.75 / var(--aimd-canvas) * 100cqw);
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options .aimd-channel-tile.selected .aimd-channel-icon {
    background: transparent !important;
    color: #FF8833 !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-options .aimd-channel-tile:hover .aimd-channel-icon {
    background: transparent !important;
    color: #FF8833 !important;
  }
  .amd-preview-widget .aimd-channels-screen .aimd-channels-continue {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    flex: 0 0 auto;
    align-self: center;
    margin: calc(var(--aimd-channels-continue-gap-px) * 1px) 0 0 !important;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
  }

  /* Same pill geometry as the hello screen's START NOW, restated in canvas
     units against the panel (cqw) rather than against the 480-unit hello
     stack, so both buttons render at the same physical size. */
  .amd-preview-widget .aimd-channels-screen .aimd-channels-continue {
    width: calc(325.6 / var(--aimd-canvas) * 100cqw) !important;
    font-size: calc(20.8 / var(--aimd-canvas) * 100cqw) !important;
    padding: calc(8.8 / var(--aimd-canvas) * 100cqw) 0 calc(7.2 / var(--aimd-canvas) * 100cqw) !important;
  }
}
@media (max-width: 900px) {
  /*
   * Same three-band balance as the Q slide: response / options / continue,
   * with the free height split evenly around and between them. The .active
   * rule forces `display: flex !important`, so this uses flex space-evenly
   * rather than the grid align-content the Q slide uses. gap MUST stay 0 —
   * space-evenly adds gaps back between items, unbalancing the outer two.
   */
  .amd-preview-widget .aimd-flow-screen .aimd-channels-screen {
    position: absolute;
    inset: unset;
    top: 0;
    left: var(--aimd-mobile-gutter);
    right: var(--aimd-mobile-gutter);
    bottom: var(--aimd-mobile-footer-reserve);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
    width: auto;
    min-height: 0;
    max-height: none;
    gap: 0;
    padding-top: var(--aimd-mobile-head-clear);
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    pointer-events: auto;
    z-index: 4;
  }
  /* The old flex spacers would eat the space space-evenly is meant to divide. */
  .amd-preview-widget .aimd-flow-screen .aimd-channels-screen::before,
  .amd-preview-widget .aimd-flow-screen .aimd-channels-screen::after {
    display: none;
  }
  .amd-preview-widget .aimd-channels-slot {
    position: static;
    flex: 0 0 auto;
    align-self: stretch;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    align-items: center;
    /* 0, not 14px — the response aligns to the gutter like the pills below it. */
    padding: 0;
    text-align: center;
    box-sizing: border-box;
  }
  .amd-preview-widget .aimd-channels-heading {
    width: 100%;
    text-align: center;
  }
  .amd-preview-widget .aimd-channels-response,
  .amd-preview-widget .aimd-channels-title,
  .amd-preview-widget .aimd-channels-helper {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    text-align: center !important;
  }
  /* Response matched to the Q-slide response, with a tight margin to the title
     (unlayered `p{margin-bottom:1rem}` would otherwise open a 16px gap). */
  .amd-preview-widget .aimd-channels-response {
    font-size: clamp(16px, 4.55vw, 21.3px) !important;
    margin: 0 0 6px !important;
  }
  /* Own clamp (not the shared Q clamp) so "Which social media channels?" fits
     on one line down to ~360px wide. !important to beat the shared rule. */
  .amd-preview-widget .aimd-channels-title {
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1.14 !important;
  }
  .amd-preview-widget .aimd-channels-helper {
    font-size: 12px !important;
    margin: 8px 0 0 !important;
  }
  .amd-preview-widget .aimd-channels-heading.is-hidden {
    display: none !important;
  }
  /* Single column of 7, identical geometry to the Q-slide option pills. */
  .amd-preview-widget .aimd-channels-options {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 0;
    width: 100%;
    max-width: none;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    column-gap: 0;
    row-gap: var(--aimd-mobile-opt-gap);
    padding: 0;
    justify-items: stretch;
    align-items: stretch;
    transform: none;
    box-sizing: border-box;
  }
  /* Undo the base sheet's absolute 2-column placement (incl. the 7th tile). */
  .amd-preview-widget .aimd-channels-options > .aimd-channel-tile:nth-of-type(n) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    grid-column: auto !important;
    justify-self: stretch !important;
  }
  .amd-preview-widget .aimd-channels-options .aimd-channel-tile {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center !important;
    font-size: 13.7px !important;
    line-height: 1.3 !important;
    /* Tighter top/bottom than the Q pills — the 20px icon already gives the row
       height, so less vertical padding shortens all 7 cells and frees space. */
    padding: 7px var(--aimd-mobile-opt-pad-r) 7px var(--aimd-mobile-opt-pad-l) !important;
    box-sizing: border-box;
    background: #ffffff !important;
    color: #1f1f1f !important;
    border: 1px solid var(--aimd-mobile-opt-border) !important;
    border-radius: var(--aimd-mobile-opt-radius) !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  }
  .amd-preview-widget .aimd-channels-options .aimd-channel-tile:hover:not(.selected) {
    background: #ffffff !important;
    color: #1f1f1f !important;
  }
  .amd-preview-widget .aimd-channels-options .aimd-channel-tile:not(.selected):active {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: #cfcfcf !important;
  }
  /* Selected: orange fill, white outline + label, icon inverts to white-on-orange */
  .amd-preview-widget .aimd-channels-options .aimd-channel-tile.selected {
    background: #FF8833 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
  }
  .amd-preview-widget .aimd-channels-options .aimd-channel-tile.selected .aimd-channel-leading > span:not(.aimd-channel-icon) {
    color: #ffffff !important;
  }
  /*
   * `.amd-panel` is here purely for specificity. The tiles carry BOTH
   * .aimd-q-option and .aimd-channel-tile, so the Q-slide rule
   * `.amd-panel .aimd-q-option.selected span:first-child {color:#fff}` (0,5,1)
   * also matches this icon span and would paint the glyph white on white.
   * This selector is (0,6,0) and wins.
   */
  .amd-preview-widget .amd-panel .aimd-channels-options .aimd-channel-tile.selected .aimd-channel-icon {
    background: #ffffff !important;
    color: #FF8833 !important;
  }
  .amd-preview-widget .aimd-channels-options .aimd-channel-leading {
    display: flex;
    align-items: center;
    gap: 12px !important;
    min-width: 0;
  }
  .amd-preview-widget .aimd-channels-options .aimd-channel-leading > span:not(.aimd-channel-icon) {
    min-height: 0;
    line-height: 1.3;
    color: inherit;
    text-align: left;
  }
  .amd-preview-widget .aimd-channels-options .aimd-channel-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: #111111 !important;
    color: #ffffff !important;
  }
  .amd-preview-widget .aimd-channels-options .aimd-channel-icon svg {
    width: 10px;
    height: 10px;
  }
  .amd-preview-widget .aimd-flow-screen .aimd-channels-screen > .aimd-channels-continue {
    flex: 0 0 auto;
    align-self: center;
    display: block;
    width: min(340px, 88%);
    /* 0 — space-evenly owns the gap above the button. */
    margin: 0 auto !important;
    text-align: center;
    position: relative;
    z-index: 5;
  }
}

/* ── RESULTS PAGE ─────────────────────────────────────────────────────────── */
@keyframes amd-fade-in-up {
  .amd-preview-widget from { opacity: 0; transform: translateY(7px); }
  .amd-preview-widget to { opacity: 1; transform: translateY(0); }
}

.amd-preview-widget .amd-results {
  display: none;
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 48px) clamp(20px, 3vw, 48px);
  box-sizing: border-box;
  font-family: 'Sebino', sans-serif;
  color: #1e3a5f;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(30, 58, 95, 0.08);
  animation: amd-fade-in-up 0.8s ease-out both;
}
.amd-preview-widget .amd-results.active { display: block; }

.amd-preview-widget .amd-r-header { margin-bottom: 18px; }
.amd-preview-widget .amd-r-eyebrow {
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 700;
  color: #0891b2;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.amd-preview-widget .amd-r-headline {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0b1e33;
  line-height: 1.08;
  margin: 0 0 8px;
}
.amd-preview-widget .amd-r-subheading {
  font-size: clamp(13px, 1.1vw, 16px);
  color: #556678;
  line-height: 1.45;
  margin: 0;
}

.amd-preview-widget .amd-r-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .amd-preview-widget .amd-r-grid { grid-template-columns: 1fr; gap: 16px; }
}

.amd-preview-widget .amd-r-main-card, .amd-preview-widget .amd-r-why-card { padding: 0; }

.amd-preview-widget .amd-r-persona {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.amd-preview-widget .amd-r-persona-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.amd-preview-widget .amd-r-persona-icon svg { width: 26px; height: 26px; }
.amd-preview-widget .amd-r-persona-label {
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 800;
  color: #0b1e33;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.amd-preview-widget .amd-r-persona-level {
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 700;
  color: #2563eb;
  margin-top: 2px;
}

.amd-preview-widget .amd-r-statement {
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  color: #334155;
  margin-bottom: 14px;
}
.amd-preview-widget .amd-r-statement p { margin: 0 0 10px 0; }
.amd-preview-widget .amd-r-statement p:last-child { margin-bottom: 0; }

.amd-preview-widget .amd-r-bigidea {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.amd-preview-widget .amd-r-bigidea-icon {
  flex-shrink: 0;
  font-size: 16px;
  color: #2563eb;
  line-height: 1;
  padding-top: 3px;
}
.amd-preview-widget .amd-r-bigidea-text {
  font-size: clamp(13px, 1.05vw, 15px);
  color: #1e3a5f;
  line-height: 1.5;
}
.amd-preview-widget .amd-r-bigidea-label {
  color: #2563eb;
  font-weight: 700;
  margin-right: 4px;
}

.amd-preview-widget .amd-r-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.amd-preview-widget .amd-r-snapshot-card {
  background: #eff8fc;
  border: 1px solid #cae6f0;
  border-radius: 16px;
  padding: clamp(16px, 1.8vw, 22px);
}
.amd-preview-widget .amd-r-snapshot-title, .amd-preview-widget .amd-r-why-title, .amd-preview-widget .amd-r-next-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.amd-preview-widget .amd-r-snapshot-icon, .amd-preview-widget .amd-r-why-icon, .amd-preview-widget .amd-r-next-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.amd-preview-widget .amd-r-snapshot-icon { background: rgba(37, 99, 235, 0.15); color: #2563eb; }
.amd-preview-widget .amd-r-why-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.amd-preview-widget .amd-r-next-icon { background: rgba(34, 197, 94, 0.18); color: #16a34a; }
.amd-preview-widget .amd-r-snapshot-icon svg, .amd-preview-widget .amd-r-why-icon svg, .amd-preview-widget .amd-r-next-icon svg { width: 16px; height: 16px; }

.amd-preview-widget .amd-r-snapshot-heading, .amd-preview-widget .amd-r-why-heading, .amd-preview-widget .amd-r-next-heading {
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 800;
  color: #0b1e33;
  letter-spacing: -0.01em;
}
.amd-preview-widget .amd-r-next-heading { color: #15803d; }

.amd-preview-widget .amd-r-snapshot-list { display: flex; flex-direction: column; }
.amd-preview-widget .amd-r-snapshot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(180, 200, 220, 0.4);
}
.amd-preview-widget .amd-r-snapshot-row:last-child { border-bottom: none; }
.amd-preview-widget .amd-r-snapshot-question {
  flex: 1;
  font-size: clamp(12px, 1vw, 14px);
  color: #556678;
  font-weight: 500;
}
.amd-preview-widget .amd-r-snapshot-answer {
  font-size: clamp(12px, 1vw, 14px);
  color: #0b1e33;
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
  max-width: 60%;
}

.amd-preview-widget .amd-r-why-text {
  font-size: clamp(12px, 1vw, 14.5px);
  color: #334155;
  line-height: 1.55;
}

.amd-preview-widget .amd-r-next-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  padding: clamp(16px, 1.8vw, 22px);
}
.amd-preview-widget .amd-r-next-list { display: flex; flex-direction: column; gap: 8px; }
.amd-preview-widget .amd-r-next-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(12px, 1vw, 14.5px);
  color: #1e3a5f;
  line-height: 1.35;
  font-weight: 500;
}
.amd-preview-widget .amd-r-next-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}

.amd-preview-widget .amd-r-bottom {
  padding: clamp(18px, 2vw, 24px) 0 0 0;
  border-top: 1px solid rgba(180, 200, 220, 0.4);
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
  gap: 18px;
  align-items: center;
}
@media (max-width: 800px) {
  .amd-preview-widget .amd-r-bottom { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .amd-preview-widget .amd-r-bottom-left, .amd-preview-widget .amd-r-bottom-right { justify-content: center; }
}
.amd-preview-widget .amd-r-bottom-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.amd-preview-widget .amd-r-bottom-sparkle {
  flex-shrink: 0;
  color: #2563eb;
  font-size: 18px;
}
.amd-preview-widget .amd-r-bottom-tagline {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 800;
  color: #0b1e33;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 1px;
}
.amd-preview-widget .amd-r-bottom-subhead {
  font-size: clamp(12px, 0.95vw, 13.5px);
  color: #556678;
  line-height: 1.35;
}
.amd-preview-widget .amd-r-bottom-cta {
  background: #FF8833;
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: clamp(11px, 1.3vh, 14px) clamp(22px, 2.8vw, 36px);
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 700;
  font-family: 'Sebino', sans-serif;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 136, 51, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.amd-preview-widget .amd-r-bottom-cta:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 22px rgba(255, 136, 51, 0.4);
}
.amd-preview-widget .amd-r-bottom-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.amd-preview-widget .amd-r-retake {
  color: #2563eb;
  text-decoration: none;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: 'Sebino', sans-serif;
}
.amd-preview-widget .amd-r-retake:hover { text-decoration: underline; }

.amd-preview-widget .amd-results.active:has(.amd-ready) {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  max-width: none;
}

.amd-preview-widget .amd-ready {
  display: block;
  width: 100%;
  max-width: min(560px, 100%);
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
}

.amd-preview-widget .amd-ready:focus-visible {
  outline: 2px solid #FF8833;
  outline-offset: 4px;
}

.amd-preview-widget .amd-ready-media {
  display: block;
  width: 100%;
  line-height: 0;
}

.amd-preview-widget .amd-ready-graphic {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 901px) {
  /* results-d.webp is square (1502x1500) but .amd-lightbox__panel is now
     700x850 (see amd-pre-wgt-tall.webp change) — this graphic no longer
     fills the panel's full height at width:100%, it just centers with some
     panel visible below it. Not broken, just no longer full-bleed; a taller
     results-d/results-m asset would be needed to match again. Do not scale
     past 100%: the panel is overflow:hidden, so any excess would clip. */
  .amd-preview-widget .amd-ready {
    max-width: 100%;
  }

  .amd-preview-widget .amd-ready-graphic {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-left: 0;
  }
}

} /* @layer widget */

/* Mobile overrides — unlayered (beats @layer widget + theme cascade) */
@media (max-width: 900px) {
  .amd-preview-widget #aimd-q-response, .amd-preview-widget #aimd-q-text {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-active {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    padding-top: var(--aimd-mobile-hello-vert-inset) !important;
    padding-bottom: var(--aimd-mobile-hello-vert-inset) !important;
  }

  .amd-preview-widget .aimd-bottom-stack {
    padding-bottom: 15px !important;
  }

  .amd-preview-widget .aimd-bottom-stack .aimd-security {
    margin-top: -30px !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main, .amd-preview-widget .aimd-hello-screen .aimd-main > .aimd-intro-group, .amd-preview-widget .aimd-hello-screen .aimd-main > .aimd-intro-group > * {
    transform: none !important;
    left: auto !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: center !important;
    text-align: center !important;
  }

  .amd-preview-widget .aimd-hello-screen .aimd-main > .aimd-intro-group {
    align-items: center !important;
  }

  .amd-lightbox .amd-preview-widget .amd-panel .aimd-hello-screen .aimd-hello, .amd-preview-widget .amd-panel .aimd-hello-screen .aimd-hello {
    font-size: 98px !important;
    line-height: 0.92 !important;
  }

}

/* ── Diagnosis loading screen ── */
.amd-preview-widget .aimd-diagnosis-screen {
  position: absolute;
  inset: auto;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  font-family: 'Sebino', sans-serif;
  color: #111;
  pointer-events: auto;
}

.amd-preview-widget .aimd-diagnosis-progress {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.amd-preview-widget .aimd-diagnosis-seg { height: 3px; width: 40px; background: rgba(0,0,0,0.12); border-radius: 2px; transition: background 0.4s ease; }
.amd-preview-widget .aimd-diagnosis-seg.is-active, .amd-preview-widget .aimd-diagnosis-seg.is-done { background: #ff8833; }

.amd-preview-widget .aimd-diagnosis-headline {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.amd-preview-widget .aimd-diagnosis-brand {
  color: #FF8833;
}

.amd-preview-widget .aimd-diagnosis-subtext {
  flex: 0 0 auto;
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  margin: 0;
  line-height: 1.5;
}

.amd-preview-widget .aimd-diagnosis-patience {
  flex: 0 0 auto;
  margin: 0;
  color: #FF8833;
}

.amd-preview-widget .aimd-diagnosis-patience[hidden] {
  display: none;
}

/* Ticker — single cycling task row */
@keyframes aimd-ticker-in  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aimd-ticker-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } }
.amd-preview-widget .aimd-diag-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 500;
  opacity: 0;
}
.amd-preview-widget .aimd-diag-ticker.is-entering { animation: aimd-ticker-in  0.28s ease forwards; }
.amd-preview-widget .aimd-diag-ticker.is-leaving  { animation: aimd-ticker-out 0.25s ease forwards; }
/* The JS drops .is-entering when it adds .is-checked, which removes the
   animation and its `forwards` fill — without this the row snaps back to the
   base opacity:0 and the ticker text vanishes 720ms after it appears. */
.amd-preview-widget .aimd-diag-ticker.is-checked  { opacity: 1; }
.amd-preview-widget .aimd-diag-ticker-check {
  color: #FF8833;
  font-size: 17px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  width: 18px;
}
.amd-preview-widget .aimd-diag-ticker.is-checked .aimd-diag-ticker-check { opacity: 1; }


@media (min-width: 901px) {
  .amd-preview-widget .aimd-diagnosis-screen {
    top: var(--aimd-response-top);
    bottom: var(--aimd-options-bottom);
    left: var(--aimd-band-left);
    width: var(--aimd-band-width);
    padding: var(--aimd-content-pad-y) 0;
  }

  .amd-preview-widget .aimd-diagnosis-headline {
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    font-size: calc(var(--aimd-question-font-size) * 0.6) !important;
    line-height: var(--aimd-question-line-height) !important;
  }

  .amd-preview-widget .aimd-diagnosis-subtext {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 900px) {
  .amd-preview-widget .aimd-flow-screen .aimd-diagnosis-screen {
    top: 0;
    left: var(--aimd-mobile-gutter);
    right: var(--aimd-mobile-gutter);
    bottom: var(--aimd-mobile-footer-reserve);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding-top: var(--aimd-mobile-head-clear);
    padding-bottom: 0;
    gap: 22px;
    text-align: left;
  }

  /* Headline matches the Q-slide question type exactly. */
  .amd-preview-widget .aimd-diagnosis-headline {
    font-family: 'Sebino', sans-serif !important;
    font-weight: 400 !important;
    -webkit-text-stroke: 0.01em currentColor;
    font-size: clamp(26px, 7.6vw, 34px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.005em !important;
    margin: 0 !important;
    text-align: left;
  }

  .amd-preview-widget .aimd-diagnosis-subtext {
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.4;
    margin: 0 !important;
    text-align: left;
  }

  .amd-preview-widget .aimd-diag-ticker {
    font-size: clamp(15px, 4.1vw, 18px);
    min-height: 24px;
    justify-content: flex-start;
    text-align: left;
  }

  /* The mock shows no checkmark on mobile — the ticker reads as plain copy. */
  .amd-preview-widget .aimd-diagnosis-screen .aimd-diag-ticker-check {
    display: none;
  }

  .amd-preview-widget .aimd-diagnosis-patience {
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.4;
    margin: 0 !important;
    text-align: left;
  }

  .amd-preview-widget.amd-stage.results-mode {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .amd-preview-widget .amd-results.active:has(.amd-ready) {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 20px 16px;
    box-sizing: border-box;
  }

  .amd-preview-widget .amd-ready {
    max-width: min(100%, 560px);
  }

}

/* ── Diagnosis failure state ──────────────────────────────────────────────
   The error is surfaced on the diagnosis slide itself. It used to be written
   into the question slide, which is display:none by the time an API call can
   fail — so any failure presented as a permanent "still working" hang. */
.amd-preview-widget .aimd-diagnosis-screen.is-error .aimd-diag-ticker-check {
  display: none;
}

.amd-preview-widget .aimd-diagnosis-screen.is-error .aimd-diag-ticker-text {
  color: rgba(0,0,0,0.55);
}

.amd-preview-widget .aimd-diag-error-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #FF8833;
  text-decoration: underline;
  cursor: pointer;
}