/* =====================================================================
 * ABACASYS ORACLE AI MODERNIZATION WIZARD - SHARED DESIGN SYSTEM
 * Phase 1: reusable tokens + components for BOTH wizards.
 *
 * Everything is scoped under .ai-wizard-page (added as a Page CSS Class
 * in Phase 2) so nothing here affects Home, Login, or the containing
 * website shell until a page opts in.
 *
 * Reference: design.md sections 3-22.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. DESIGN TOKENS  (design.md 3 + 16)
 * ------------------------------------------------------------------- */
.ai-wizard-page {
  --abaca-red: #ed1c24;
  --abaca-red-dark: #d9151d;
  --abaca-red-soft: #fff0f1;
  --abaca-pink: #ffd8dc;
  --abaca-pink-strong: #ff9ca4;
  --abaca-cream: #fdf3e0;
  --abaca-cream-line: #f0e2c4;
  --pos: #0f8a5f;
  --neg: #d9151d;

  --ink: #111111;
  --text: #171717;
  --muted: #646464;

  --page-bg: #ffffff;
  --panel-bg: #f7f7f9;
  --option-bg: #ffffff;
  --line: #e3e3e3;
  --line-strong: #d4d4d4;
  --step-idle: #eeeeee;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-soft: 0 8px 30px rgba(20, 20, 20, 0.025);

  --content-max: 1580px;
  --wizard-inner-max: 1180px;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  --wizard-font: "Century Gothic", "Avenir Next", "Futura",
                 "Trebuchet MS", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
 * 2. PAGE CANVAS + DECORATIVE PINK ARTWORK  (design.md 5)
 *
 * IMPORTANT: do NOT set width/margin/display on .t-Body* - the Universal
 * Theme lays those out in a CSS grid with negative margins; overriding
 * width there blows the grid track out and shoves the panel off-screen.
 * We only touch background here and let the theme own the outer layout.
 * ------------------------------------------------------------------- */
.ai-wizard-page {
  position: relative;
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--wizard-font);
  background: var(--page-bg);
}
.ai-wizard-page .t-Body,
.ai-wizard-page .t-Body-content,
.ai-wizard-page .t-Body-mainContent { background: transparent; }

/* Optional: allow the theme content column to run a little wider than the
 * default. max-width only - never width - so the grid is undisturbed. */
.ai-wizard-page .t-Body-contentInner { max-width: var(--content-max); }

/* ---- decorative page background (design.md 5) --------------------------
 * Supplied brand artwork, stored beside this file as static app files:
 *   wizard-bg.png         desktop / landscape  (~1512 x 1000)
 *   wizard-bg-mobile.png  narrow / portrait    (~857 x 1834)
 * Relative url() resolves against wizard.css' own location (#APP_FILES#).
 * Fixed, behind everything; a pale radial-gradient shows if the image 404s.
 * -------------------------------------------------------------------- */
.ai-wizard-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--page-bg);
  background-image:
    url("wizard-bg.png"),
    radial-gradient(120% 80% at 100% 0%,
      var(--abaca-pink-strong) 0%, var(--abaca-pink) 22%,
      rgba(255, 216, 220, 0) 55%);
  background-repeat: no-repeat, no-repeat;
  background-position: top right, top right;
  background-size: cover, cover;
}

@media (max-width: 767px) {
  .ai-wizard-page::before {
    background-image:
      url("wizard-bg-mobile.png"),
      radial-gradient(140% 45% at 100% 0%,
        var(--abaca-pink-strong) 0%, var(--abaca-pink) 22%,
        rgba(255, 216, 220, 0) 55%);
  }
}

/* Keep functional content above the fixed decorative layer */
.ai-wizard-page .t-Body-main { position: relative; z-index: 1; }

/* The custom AI Wizard page template omits the APEX header entirely;
 * this is just belt-and-braces if the template ever falls back. */
.ai-wizard-page .t-Header { display: none !important; }
.ai-wizard-page .t-Body-title:empty { display: none; }

/* ---------------------------------------------------------------------
 * 3. CONTENT SHELL WIDTH  (design.md 6)
 *    Applied to the hero + panel directly (see sections 4 and 5), NOT to
 *    the theme's .t-Body-contentInner (see the warning in section 2).
 * ------------------------------------------------------------------- */
.ai-wizard-shell {
  width: min(84vw, var(--content-max));
  margin-inline: auto;
}
@media (max-width: 1199px) { .ai-wizard-shell { width: 92vw; } }
@media (max-width: 767px)  { .ai-wizard-shell { width: calc(100% - 28px); } }

/* ---------------------------------------------------------------------
 * 4. HERO / CALCULATOR TITLE BLOCK  (design.md 7)
 *    Markup added on the Global Page in Phase 2:
 *    <section class="wizard-hero">
 *      <span class="wizard-hero__rule" aria-hidden="true"></span>
 *      <div><h1 class="wizard-title">..</h1><p class="wizard-subtitle">..</p></div>
 *    </section>
 * ------------------------------------------------------------------- */
.ai-wizard-page .wizard-hero {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(14px, 1.8vw, 26px);
  align-items: stretch;
  width: 100%;
  max-width: var(--content-max);
  margin: clamp(16px, 2.4vw, 34px) 0 clamp(14px, 2vw, 26px);
}
.ai-wizard-page .wizard-hero__text { align-self: center; }

.ai-wizard-page .wizard-hero__rule {
  flex: 0 0 auto;
  width: 5px;
  border-radius: var(--radius-pill);
  background: var(--abaca-red);
}

.ai-wizard-page .wizard-title {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: var(--wizard-font);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.ai-wizard-page .wizard-subtitle {
  margin: 0;
  max-width: 52ch;
  color: var(--text);
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.35;
}

@media (max-width: 767px) {
  .ai-wizard-page .wizard-hero { gap: 12px; margin-top: 14px; }
  .ai-wizard-page .wizard-hero__rule { width: 4px; }
}

/* ---------------------------------------------------------------------
 * 5. WIZARD PANEL  (design.md 8)  -  APEX renders the region as .t-Wizard
 * ------------------------------------------------------------------- */
.ai-wizard-page .t-Wizard {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto clamp(24px, 3.5vw, 48px);
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-none);
  padding: clamp(22px, 3vw, 44px) clamp(20px, 5vw, 72px);
}

@media (max-width: 1199px) {
  .ai-wizard-page .t-Wizard { padding: clamp(20px, 3vw, 36px) clamp(18px, 4vw, 44px); }
}
@media (max-width: 767px) {
  .ai-wizard-page .t-Wizard { padding: 18px 16px 22px; }
}

/* Custom AI Wizard Container region template (@ai-wizard-container) lays out
 * the panel in natural DOM order:  progress -> question/answers -> actions.
 * No flex reordering needed. */
.ai-wizard-page .t-Wizard-title { /* APEX also adds .u-vh */ }

/* progress strip - centered, breathing room below (design.md 9 + 16) */
.ai-wizard-page .t-Wizard-progress {
  display: block;
  margin: 0 auto clamp(22px, 3.5vw, 44px);
}

/* question + answer cards live here (#SUB_REGIONS#) */
.ai-wizard-page .t-Wizard-body {
  max-width: var(--wizard-inner-max);
  margin-inline: auto;
  padding: 0;
}

/* bottom action row - validation message left, Back/Next right (design.md 14) */
.ai-wizard-page .t-Wizard-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--wizard-inner-max);
  margin: clamp(16px, 2.5vw, 30px) auto 0;
}
.ai-wizard-page .t-Wizard-actions-msg:empty { display: none; }
.ai-wizard-page .t-Wizard-actions-msg { flex: 1 1 auto; }
.ai-wizard-page .t-Wizard-actions-btns {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
/* Cancel is not part of the reference design - keep it reachable but quiet */
.ai-wizard-page .t-Wizard-actions-cancel .t-Button {
  min-height: 0;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * 6. PROGRESS STEPPER  (design.md 9)
 *    ul.t-WizardSteps > li.t-WizardSteps-step(.is-active/.is-complete)
 *      > .t-WizardSteps-wrap > .t-WizardSteps-marker + .t-WizardSteps-label
 * ------------------------------------------------------------------- */
.ai-wizard-page .t-WizardSteps {
  --wiz-node: 30px;          /* active / completed circle diameter        */
  --wiz-dot: 9px;            /* future step dot diameter                  */
  --wiz-line: 4px;           /* connector thickness                       */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: wizstep;
  background: transparent;
}

.ai-wizard-page .t-WizardSteps-step {
  position: relative;
  flex: 1 1 0;
  display: grid;
  place-items: center;
  min-width: 0;
  height: var(--wiz-node);
  counter-increment: wizstep;
  background: transparent;
}

/* connector - runs from this node centre to the next node centre */
.ai-wizard-page .t-WizardSteps-step::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: var(--wiz-line);
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: var(--step-idle);
  z-index: 0;
}
.ai-wizard-page .t-WizardSteps-step:last-child::after { display: none; }
.ai-wizard-page .t-WizardSteps-step.is-complete::after { background: var(--abaca-red); }

.ai-wizard-page .t-WizardSteps-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
}

/* node - default = future grey dot */
.ai-wizard-page .t-WizardSteps-marker {
  display: grid;
  place-items: center;
  width: var(--wiz-dot);
  height: var(--wiz-dot);
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--step-idle);
  color: transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transform: none;           /* Universal Theme scales the active marker 1.5x */
}
.ai-wizard-page .t-WizardSteps-step.is-active .t-WizardSteps-marker,
.ai-wizard-page .t-WizardSteps-step.is-complete .t-WizardSteps-marker { transform: none; }
.ai-wizard-page .t-WizardSteps-marker::before { content: ""; }

/* active + completed = red circle with white number */
.ai-wizard-page .t-WizardSteps-step.is-active .t-WizardSteps-marker,
.ai-wizard-page .t-WizardSteps-step.is-complete .t-WizardSteps-marker {
  width: var(--wiz-node);
  height: var(--wiz-node);
  background: var(--abaca-red);
  color: #fff;
  box-shadow: 0 0 0 3px var(--abaca-red-soft);
}
.ai-wizard-page .t-WizardSteps-step.is-active .t-WizardSteps-marker::before,
.ai-wizard-page .t-WizardSteps-step.is-complete .t-WizardSteps-marker::before {
  content: counter(wizstep);
  font: inherit;
}
/* APEX puts a check glyph on completed steps (::after / child icon) - drop it,
 * we always show the number per the reference */
.ai-wizard-page .t-WizardSteps-marker::after { content: none !important; }
.ai-wizard-page .t-WizardSteps-marker .t-Icon,
.ai-wizard-page .t-WizardSteps-marker > span { display: none !important; }

/* labels hidden in the compact design; kept for a11y */
.ai-wizard-page .t-WizardSteps-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ai-wizard-page .t-WizardSteps { width: 100%; --wiz-node: 26px; --wiz-dot: 8px; --wiz-line: 3px; }
}

/* ---------------------------------------------------------------------
 * 7. QUESTION HEADING  (design.md 10)
 *
 * Real APEX markup for a radioGroup / checkboxGroup with @optional-floating:
 *   #Pn_ITEM_CONTAINER .t-Form-fieldContainer.t-Form-fieldContainer--floatingLabel
 *     > .t-Form-labelContainer > label.t-Form-label      <- the question
 *     > .t-Form-inputContainer > .t-Form-itemWrapper
 *         > .apex-item-group[role=radiogroup] > .apex-item-option > input + label.u-radio
 *     > span.a-Form-error
 *
 * Neutralise the floating-label behaviour and blow the label up to the
 * geometric question size from the reference.
 * ------------------------------------------------------------------- */
.ai-wizard-page .t-Wizard-body .t-Form-fieldContainer {
  display: block;
  max-width: var(--wizard-inner-max);
  margin: 0 auto clamp(14px, 2vw, 24px);
  padding: 0;
}
.ai-wizard-page .t-Wizard-body .t-Form-fieldContainer + .t-Form-fieldContainer {
  margin-top: clamp(24px, 3.5vw, 44px);
}

.ai-wizard-page .t-Wizard-body .t-Form-labelContainer {
  position: static;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  width: auto;
  max-width: none;
  height: auto;
  margin: 0 0 clamp(14px, 2vw, 26px);
  padding: 0;
  text-align: left;
}

/* pale-pink circular icon badge slot (populated by wizard.js) */
.ai-wizard-page .wizard-q-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(38px, 3.4vw, 48px);
  height: clamp(38px, 3.4vw, 48px);
  border-radius: 50%;
  background: var(--abaca-red-soft);
  color: var(--abaca-red);
  font-size: clamp(16px, 1.6vw, 21px);
}

.ai-wizard-page .t-Wizard-body .t-Form-label {
  position: static;
  transform: none;
  margin: 0;
  padding: 0;
  max-width: none;
  color: var(--ink);
  font-family: var(--wizard-font);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow: visible;
  text-transform: capitalize;
  cursor: default;
}

/* kill APEX's floating-label active/scale states inside the wizard */
.ai-wizard-page .t-Wizard-body .t-Form-fieldContainer--floatingLabel .t-Form-label,
.ai-wizard-page .t-Wizard-body .t-Form-fieldContainer--floatingLabel.is-active .t-Form-label {
  transform: none !important;
  font-size: clamp(18px, 1.5vw, 26px) !important;
}

.ai-wizard-page .t-Wizard-body .t-Form-inputContainer,
.ai-wizard-page .t-Wizard-body .t-Form-itemWrapper {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
}

/* ---------------------------------------------------------------------
 * 8. ANSWER OPTION CARDS  (design.md 11 + 12)
 *    .apex-item-group > .apex-item-option > input[type=radio|checkbox]
 *                                         + label.u-radio | label.u-checkbox
 * ------------------------------------------------------------------- */
.ai-wizard-page .t-Wizard-body .apex-item-group {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 14px);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.ai-wizard-page .t-Wizard-body .apex-item-option {
  position: relative;
  margin: 0;
  padding: 0;
}

/* visually hide the native control, keep it operable + accessible */
.ai-wizard-page .t-Wizard-body .apex-item-option > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* the label IS the card */
.ai-wizard-page .t-Wizard-body .apex-item-option > label {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(11px, 1.3vw, 17px) clamp(14px, 1.8vw, 22px);
  background: var(--option-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* remove APEX's fake radio/checkbox glyph - the whole card is the control */
.ai-wizard-page .t-Wizard-body .apex-item-option > label.u-radio,
.ai-wizard-page .t-Wizard-body .apex-item-option > label.u-checkbox {
  padding-left: clamp(14px, 1.8vw, 22px);
}
.ai-wizard-page .t-Wizard-body .apex-item-option > label.u-radio::before,
.ai-wizard-page .t-Wizard-body .apex-item-option > label.u-radio::after,
.ai-wizard-page .t-Wizard-body .apex-item-option > label.u-checkbox::before,
.ai-wizard-page .t-Wizard-body .apex-item-option > label.u-checkbox::after {
  content: none !important;
  display: none !important;
}

/* bold lead-in ("Manual Data Entry:", ...) - wrapped by wizard.js */
.ai-wizard-page .wizard-option__lead { font-weight: 700; color: var(--ink); }

/* hover / keyboard focus */
.ai-wizard-page .t-Wizard-body .apex-item-option > input:hover + label,
.ai-wizard-page .t-Wizard-body .apex-item-option > label:hover {
  border-color: var(--abaca-pink-strong);
}
.ai-wizard-page .t-Wizard-body .apex-item-option > input:focus-visible + label {
  outline: 3px solid var(--abaca-red);
  outline-offset: 2px;
}

/* selected: white bg, 2px red border, text stays black (design.md 11) */
.ai-wizard-page .t-Wizard-body .apex-item-option > input:checked + label {
  border-color: var(--abaca-red);
  box-shadow: inset 0 0 0 1px var(--abaca-red);
}

/* ---------------------------------------------------------------------
 * 9. VALIDATION STATE  (design.md 13)
 *    Server-side "itemIsNotNull" validations on every question item show
 *    "Select One Option To Continue". wizard.js lifts the message onto the
 *    action row (.t-Wizard-actions-msg) and clears the inline copies.
 * ------------------------------------------------------------------- */
/* suppress APEX's top-of-page error banner - we show it on the action row */
.ai-wizard-page .t-Body-alert { display: none; }
.ai-wizard-page .t-Wizard-body .a-Form-error.u-hidden,
.ai-wizard-page .t-Wizard-body .t-Form-error.u-hidden { display: none !important; }

.ai-wizard-page .wizard-validation,
.ai-wizard-page .t-Wizard-actions-msg:not(:empty),
.ai-wizard-page .t-Wizard-body .a-Form-error:not(:empty) {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--abaca-red);
  font-size: clamp(17px, 1.3vw, 24px);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ai-wizard-page .wizard-validation::before,
.ai-wizard-page .t-Wizard-actions-msg:not(:empty)::before,
.ai-wizard-page .t-Wizard-body .a-Form-error:not(:empty)::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  background: var(--abaca-red);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------------
 * 10. NAVIGATION BUTTONS  (design.md 14)
 * ------------------------------------------------------------------- */
.ai-wizard-page .t-Wizard-actions-btns .t-Button {
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-family: var(--wizard-font);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 500;
  box-shadow: none;
}
/* Next / Finish = solid red (APEX hot button) */
.ai-wizard-page .t-Wizard-actions-btns .t-Button--hot {
  background: var(--abaca-red);
  border: 1px solid var(--abaca-red);
  color: #fff;
  padding-inline: 22px;
}
.ai-wizard-page .t-Wizard-actions-btns .t-Button--hot:hover {
  background: var(--abaca-red-dark);
  border-color: var(--abaca-red-dark);
}
/* Back = white, thin red border, red arrow (icon-only previous button) */
.ai-wizard-page .t-Wizard-actions-btns .t-Button--icon:not(.t-Button--hot),
.ai-wizard-page .t-Wizard-actions-btns .t-Button--iconLeft:not(.t-Button--hot) {
  min-width: 44px;
  padding-inline: 12px;
  background: #fff;
  border: 1px solid var(--abaca-red);
  color: var(--abaca-red);
}
.ai-wizard-page .t-Wizard-actions-btns .t-Button--icon:not(.t-Button--hot):hover {
  background: var(--abaca-red-soft);
}

/* ---------------------------------------------------------------------
 * 11. RESULT / RECOMMENDATION SCREENS  (design.md 15)
 *
 * Both result pages keep their APEX PL/SQL-generated markup and every
 * computed $ value untouched - this only restyles the emitted classes.
 *   p9 roadmap  : .ai-roadmap-result   > .roadmap-header/.roadmap-kicker
 *                 .roadmap-meta > div (summary chips), .security-callout,
 *                 .investment-table, .selected-features,
 *                 .transition-timeline, .pricing-formulas/.formula-card
 *   p5 compare  : .abacasys-calculation-result > .calculation-summary-item,
 *                 .abacasys-comparison-table, .calculation-formulas/.formula-block
 * ------------------------------------------------------------------- */
.ai-wizard-page .ai-roadmap-result,
.ai-wizard-page .abacasys-calculation-result {
  width: 100%;
  max-width: var(--wizard-inner-max);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--wizard-font);
  color: var(--text);
}

/* -- heading + recommended pathway (design.md 15.2-15.4) ------------- */
.ai-wizard-page .roadmap-header { padding-left: 20px; border-left: 5px solid var(--abaca-red); border-radius: 2px; }
.ai-wizard-page .roadmap-kicker {
  display: block; margin-bottom: 12px;
  color: var(--muted); font-size: 14px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.ai-wizard-page .roadmap-header h2 {
  margin: 0 0 12px; color: var(--ink);
  font-weight: 500; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.25;
}
.ai-wizard-page .roadmap-header h2 span { color: var(--abaca-red); }
.ai-wizard-page .roadmap-description {
  max-width: 74ch; margin: 0 0 16px;
  color: var(--text); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.55;
}

/* -- two outlined summary chips (design.md 15.5) -------------------- */
.ai-wizard-page .roadmap-meta {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 0;
}
.ai-wizard-page .roadmap-meta > div {
  flex: 0 1 auto; padding: 12px 20px;
  background: #fff; border: 1px solid var(--abaca-red); border-radius: var(--radius-pill);
}
.ai-wizard-page .roadmap-meta span {
  display: block; margin-bottom: 2px;
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.ai-wizard-page .roadmap-meta strong { color: var(--ink); font-size: 15px; }

/* -- security callout (design.md 15 "Security callout") ------------- */
.ai-wizard-page .security-callout {
  margin: 18px 0; padding: 13px 16px;
  background: var(--abaca-red-soft); border: 0; border-radius: var(--radius-md);
  line-height: 1.5; font-size: clamp(13px, 1.05vw, 16px);
}
.ai-wizard-page .security-callout strong { color: var(--ink); margin-right: 6px; }

.ai-wizard-page .roadmap-section { margin-top: 22px; }
/* PDF export only (design.md / results-email PDF): force this section onto its
   own page instead of letting html2pdf split it across a page break. No effect
   on normal screen layout - these properties only apply during pagination. */
.ai-wizard-page .roadmap-section.pdf-break-before {
  page-break-before: always;
  break-before: page;
}
.ai-wizard-page .roadmap-section h3,
.ai-wizard-page .pricing-formulas h3,
.ai-wizard-page .calculation-formulas h3 {
  margin: 0 0 12px; color: var(--ink);
  font-weight: 500; font-size: clamp(17px, 1.5vw, 22px);
}

/* -- investment / comparison tables (design.md 15 "Investment table") */
.ai-wizard-page .investment-table-wrapper,
.ai-wizard-page .comparison-table-container { width: 100%; overflow-x: auto; }
.ai-wizard-page .investment-table { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; }
.ai-wizard-page .abacasys-comparison-table { width: 100%; min-width: 780px; border-collapse: collapse; background: #fff; }
.ai-wizard-page .investment-table th,
.ai-wizard-page .investment-table td,
.ai-wizard-page .abacasys-comparison-table th,
.ai-wizard-page .abacasys-comparison-table td {
  padding: 11px 13px; border: 1px solid var(--line); vertical-align: top; text-align: left;
}
.ai-wizard-page .investment-table thead th,
.ai-wizard-page .abacasys-comparison-table thead th {
  background: #fafafa; color: var(--ink); font-size: 14px; font-weight: 700;
}
.ai-wizard-page .investment-table tbody th,
.ai-wizard-page .abacasys-comparison-table tbody th {
  background: #fcfcfc; color: var(--ink); font-size: 14px; font-weight: 700;
}
.ai-wizard-page .investment-table td strong,
.ai-wizard-page .abacasys-comparison-table td strong {
  display: block; margin-bottom: 4px; color: var(--ink); font-size: 17px; font-weight: 700;
}
.ai-wizard-page .investment-table td em,
.ai-wizard-page .abacasys-comparison-table td em {
  display: block; color: var(--muted); font-size: 13px; line-height: 1.5; font-style: normal;
}
.ai-wizard-page .year-total-row th,
.ai-wizard-page .year-total-row td,
.ai-wizard-page .abacasys-comparison-table .total-row th,
.ai-wizard-page .abacasys-comparison-table .total-row td,
.ai-wizard-page .abacasys-comparison-table .saving-row th,
.ai-wizard-page .abacasys-comparison-table .saving-row td {
  background: var(--abaca-red-soft);
}
.ai-wizard-page .positive-value { color: var(--pos) !important; }
.ai-wizard-page .negative-value { color: var(--neg) !important; }

/* -- summary tiles (p5) -------------------------------------------- */
.ai-wizard-page .calculation-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px;
}
.ai-wizard-page .calculation-summary-item {
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.ai-wizard-page .calculation-summary-item span {
  display: block; margin-bottom: 6px;
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.ai-wizard-page .calculation-summary-item strong { color: var(--ink); font-size: 18px; }

/* -- selected pilot features card (design.md 15.8) ----------------- */
.ai-wizard-page .selected-features {
  margin: 0; padding: 12px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  line-height: 1.6; font-size: clamp(13px, 1.05vw, 16px);
}

/* -- 90-day timeline (design.md 15.9) ------------------------------ */
.ai-wizard-page .transition-timeline {
  margin: 0; padding: 0; list-style: none; counter-reset: tl;
}
.ai-wizard-page .transition-timeline li {
  position: relative; margin: 0 0 14px; padding-left: 40px; counter-increment: tl;
}
.ai-wizard-page .transition-timeline li::before {
  content: counter(tl); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--abaca-red); color: #fff; border-radius: 50%;
  font-size: 13px; font-weight: 600;
}
.ai-wizard-page .transition-timeline strong {
  display: block; margin-bottom: 3px; color: var(--ink); font-size: 15px;
}
.ai-wizard-page .transition-timeline span { color: var(--text); font-size: 13px; line-height: 1.55; }

/* -- formula breakdown sections hidden at client request -----------
 * p9 "Pricing Calculation" (.pricing-formulas) and p5 "Formula A/B/C"
 * (.calculation-formulas). The PL/SQL still computes them - only the
 * rendered output is suppressed, so re-enabling is a one-line change. */
.ai-wizard-page .pricing-formulas,
.ai-wizard-page .calculation-formulas { display: none !important; }

/* -- pricing calculation cards (design.md 15 "Pricing cards") ------ */
.ai-wizard-page .pricing-formulas,
.ai-wizard-page .calculation-formulas {
  margin-top: 34px; padding: 0; background: transparent; color: var(--text);
}
.ai-wizard-page .pricing-formula-grid,
.ai-wizard-page .calculation-formulas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.ai-wizard-page .calculation-formulas { grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.ai-wizard-page .formula-card,
.ai-wizard-page .formula-block {
  padding: 16px; background: var(--abaca-cream);
  border: 1px solid var(--abaca-cream-line); border-radius: var(--radius-md); color: var(--text);
}
.ai-wizard-page .formula-card strong,
.ai-wizard-page .formula-block strong {
  display: inline-block; margin-bottom: 14px; padding: 5px 14px;
  background: var(--ink); color: #fff; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.ai-wizard-page .formula-card span,
.ai-wizard-page .formula-block span {
  display: block; color: var(--muted); font-size: 13px; line-height: 1.55;
}
.ai-wizard-page .formula-card b {
  display: block; margin-top: 14px; color: var(--ink);
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 700;
}

@media (max-width: 767px) {
  .ai-wizard-page .calculation-summary,
  .ai-wizard-page .pricing-formula-grid,
  .ai-wizard-page .calculation-formulas { grid-template-columns: 1fr; }
  .ai-wizard-page .roadmap-meta > div { flex-basis: 100%; }
}

.ai-wizard-page .custom-range-slider { accent-color: var(--abaca-red); }

/* ---------------------------------------------------------------------
 * 12. RESPONSIVE ACTION ROW  (design.md 17)
 * ------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* validation message drops above the buttons (design.md 17) */
  .ai-wizard-page .t-Wizard-actions { flex-wrap: wrap; }
  .ai-wizard-page .t-Wizard-actions-msg { flex-basis: 100%; order: -1; }
  .ai-wizard-page .t-Wizard-actions-btns { width: 100%; }
  .ai-wizard-page .t-Wizard-actions-btns .t-Button--hot { flex: 1 1 auto; }
  .ai-wizard-page .t-Wizard-actions-btns .t-Button { min-height: 54px; }
}

/* ---------------------------------------------------------------------
 * 13. ACCESSIBILITY  (design.md 22)
 * ------------------------------------------------------------------- */
.ai-wizard-page :focus-visible {
  outline: 3px solid var(--abaca-red);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ai-wizard-page * { transition: none !important; }
}

/* ---------------------------------------------------------------------
 * 14. LEAD-CAPTURE GATE + FORM DIALOG  (result pages)
 *     Built by wizard.js initLeadGate(); markup: <dialog.lead-modal>.
 *     Field look follows the supplied contact-form reference: light-grey
 *     filled inputs, 12px radius, full-width red Submit.
 * ------------------------------------------------------------------- */
/* card shown in the panel while the results are locked / dialog is closed */
:is(.ai-wizard-page, .ams-page) .lead-gate { max-width: var(--wizard-inner-max); margin: 0 auto; }
:is(.ai-wizard-page, .ams-page) .lead-gate__card {
  padding: clamp(22px, 3vw, 36px); text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
}
:is(.ai-wizard-page, .ams-page) .lead-gate__title {
  margin: 0 0 6px; color: var(--ink); font-weight: 500;
  font-size: clamp(19px, 1.8vw, 26px);
}
:is(.ai-wizard-page, .ams-page) .lead-gate__text { margin: 0 0 16px; color: var(--muted); font-size: clamp(14px, 1.1vw, 17px); }
:is(.ai-wizard-page, .ams-page) .lead-gate__open {
  min-height: 44px; padding: 0 26px; border: 0; border-radius: var(--radius-sm);
  background: var(--abaca-red); color: #fff; cursor: pointer;
  font: 500 clamp(14px, 1.1vw, 17px) var(--wizard-font);
}
:is(.ai-wizard-page, .ams-page) .lead-gate__open:hover { background: var(--abaca-red-dark); }

/* the dialog (appended to <body>, so it inherits the .ai-wizard-page scope) */
:is(.ai-wizard-page, .ams-page) .lead-modal {
  width: min(680px, calc(100vw - 28px)); max-height: calc(100vh - 28px);
  padding: 0; border: 0; border-radius: var(--radius-lg); overflow: auto;
  background: #fff; color: var(--text); font-family: var(--wizard-font);
  box-shadow: 0 24px 70px rgba(17, 17, 17, .28);
}
:is(.ai-wizard-page, .ams-page) .lead-modal::backdrop { background: rgba(17, 17, 17, .5); backdrop-filter: blur(3px); }
:is(.ai-wizard-page, .ams-page) .lead-form { position: relative; padding: clamp(22px, 3vw, 36px); }
:is(.ai-wizard-page, .ams-page) .lead-head { margin: 0 32px 18px 0; }
:is(.ai-wizard-page, .ams-page) .lead-title { margin: 0 0 4px; color: var(--ink); font-weight: 500; font-size: clamp(20px, 2vw, 26px); }
:is(.ai-wizard-page, .ams-page) .lead-sub { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
:is(.ai-wizard-page, .ams-page) .lead-close {
  position: absolute; top: 12px; right: 14px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted);
  font-size: 26px; line-height: 1; cursor: pointer;
}
:is(.ai-wizard-page, .ams-page) .lead-close:hover { background: #f1f1f1; color: var(--ink); }

:is(.ai-wizard-page, .ams-page) .lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
:is(.ai-wizard-page, .ams-page) .lead-field { min-width: 0; }
:is(.ai-wizard-page, .ams-page) .lead-field--full { grid-column: 1 / -1; }
:is(.ai-wizard-page, .ams-page) .lead-input {
  width: 100%; height: 52px; padding: 0 16px; box-sizing: border-box;
  background: #f4f4f4; border: 1px solid #e6e6e6; border-radius: 12px;
  color: var(--ink); font: 400 15px var(--wizard-font); outline: none;
  transition: border-color .15s, background .15s;
}
:is(.ai-wizard-page, .ams-page) .lead-input::placeholder { color: #8b8b8b; }
:is(.ai-wizard-page, .ams-page) .lead-input:focus { background: #fff; border-color: var(--abaca-red); box-shadow: 0 0 0 3px var(--abaca-red-soft); }
:is(.ai-wizard-page, .ams-page) .lead-input.is-invalid { border-color: var(--abaca-red); background: #fff8f8; }
:is(.ai-wizard-page, .ams-page) select.lead-input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23777' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
}
:is(.ai-wizard-page, .ams-page) select.lead-input:invalid { color: #8b8b8b; }
:is(.ai-wizard-page, .ams-page) .lead-label {
  display: block; margin: 0 0 6px 2px; color: var(--ink);
  font: 500 13.5px var(--wizard-font);
}
:is(.ai-wizard-page, .ams-page) textarea.lead-input {
  height: auto; min-height: 84px; padding: 12px 16px; resize: vertical;
  font-family: var(--wizard-font);
}
:is(.ai-wizard-page, .ams-page) .lead-err { min-height: 0; margin: 4px 4px 0; color: var(--abaca-red); font-size: 12.5px; }
:is(.ai-wizard-page, .ams-page) .lead-err:empty { display: none; }

:is(.ai-wizard-page, .ams-page) .lead-consent__label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
:is(.ai-wizard-page, .ams-page) .lead-consent__label input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--abaca-red); }

:is(.ai-wizard-page, .ams-page) .lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
:is(.ai-wizard-page, .ams-page) .lead-status { margin-top: 12px; color: var(--abaca-red); font-size: 13.5px; }
:is(.ai-wizard-page, .ams-page) .lead-status:empty { display: none; }
:is(.ai-wizard-page, .ams-page) .lead-submit {
  width: 100%; height: 50px; margin-top: 16px; border: 0; border-radius: 10px;
  background: var(--abaca-red); color: #fff; cursor: pointer;
  font: 500 17px var(--wizard-font);
}
:is(.ai-wizard-page, .ams-page) .lead-submit:hover { background: var(--abaca-red-dark); }
:is(.ai-wizard-page, .ams-page) .lead-submit:disabled { opacity: .7; cursor: wait; }

@media (max-width: 560px) {
  :is(.ai-wizard-page, .ams-page) .lead-grid { grid-template-columns: 1fr; }
  :is(.ai-wizard-page, .ams-page) .lead-input { height: 48px; }
}
:is(.ai-wizard-page, .ams-page) .lead-consent__label a { color: var(--abaca-red); text-decoration: underline; }
:is(.ai-wizard-page, .ams-page) .lead-consent__label a:hover { color: var(--abaca-red-dark); }