/* ============================================================
   INSIGHTS TOOLS — homepage light-theme / design-system rollout
   Applies the homepage design rules to the two interactive tool
   pages under /insights/:

     /insights/automation-roi-calculator/  (template page-roi-calculator)
     /insights/ai-readiness-quiz/          (template page-ai-readiness-quiz)

   Every rule is scoped to those two template body classes, so the
   patterns' own <style> blocks keep working anywhere else.

     1. COLOUR — light theme: white grounds, #08222E ink
        (dark-tone standard), #5A6B75 grey intros, white cards with
        the homepage border/shadow, soft-cyan conversion panels and
        the coral "attention" accent on the final CTA. The quiz
        intro photo panel stays a deliberate dark-on-photo tile
        (same idea as the homepage framed industries band), retoned
        to #08222E. The lead-form band deliberately keeps its DARK
        card — it is the page's contrast band, exactly like
        /insights/ and the homepage.
     2. SPACING — 9rem side gutters (→3rem ≤960, →1.25rem ≤600),
        the homepage 7rem/5rem/3.5rem vertical rhythm, and a raised
        top padding on the tool band because these pages have NO
        hero: the first band sits under the fixed nav pill (which
        ends at ~90px) and needs to clear it.
     3. TYPE — homepage scales: page H1 clamp(2.2rem,5vw,64px)/800/
        1.11/-0.02em, 24px/1.7 grey intro, the ONE plain-caps
        eyebrow spec (no pill), 20px card/option body copy, and the
        header-stack rhythm (eyebrow →1.25rem→ heading →20px→ intro;
        header block →4rem→ content).
     4. WIDTH — the tool inners join the homepage measure: the ROI
        calculator's grid runs to 1680px; the quiz keeps a 1100px
        panel measure (the site's tool-panel measure — a single
        question row at 1680px would be unreadable), the same kind
        of reading-measure exception the FAQ accordion gets.

   Both tools are CONVERSION PANELS, so — like the homepage's ROI
   embed and final CTA — their headers keep their CENTRED
   composition instead of the left-aligned section-header rule.

   The patterns carry in-body <style> blocks and a lot of inline
   style attrs (incl. JS-written ones), so the overrides here lean
   on body-scoped selectors + !important. Loads AFTER
   ac-interior-system (same 101-priority block). Fully reversible:
   delete this file + its wp_enqueue_style(). Applied 2026-07-30.
   Modelled on ac-insights-system.css.
   ============================================================ */

body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) {
  --lt-page:      #FFFFFF;
  --lt-surface:   #FFFFFF;
  --lt-tint:      #E9F3F7;
  --lt-tint-soft: rgba(7, 169, 209, 0.05);
  --lt-ink:       #08222E;
  --lt-grey:      #5A6B75;
  --lt-border:    rgba(9, 32, 42, 0.10);
  --lt-border-brand: rgba(7, 169, 209, 0.22);
  --lt-brand-ink: #0B6F88;   /* readable cyan for small labels on white */
  --lt-attn:        #E5484D;
  --lt-attn-strong: #C62B30;
  --lt-card-shadow: 0 4px 20px rgba(12, 40, 55, 0.06);
  --lt-card-shadow-hover: 0 10px 32px rgba(7, 169, 209, 0.14);

  background-color: var(--lt-page) !important;
  color: var(--lt-ink) !important;
}

/* ============================================================
   1. BANDS — 9rem side gutters + the homepage vertical rhythm.
      These pages have no hero, so the tool band carries extra top
      padding to clear the fixed nav pill (ends ~90px).
   ============================================================ */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  #ac-roi-calculator,
  #ac-readiness-quiz,
  .ac-lead-form,
  .ac-footer
) {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  #ac-roi-calculator,
  #ac-readiness-quiz
) {
  padding-top: 13rem !important;
  padding-bottom: 7rem !important;
}
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-lead-form {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}
@media (max-width: 960px) {
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
    #ac-roi-calculator, #ac-readiness-quiz, .ac-lead-form, .ac-footer
  ) {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
    #ac-roi-calculator, #ac-readiness-quiz
  ) {
    padding-top: 11rem !important;
    padding-bottom: 5rem !important;
  }
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-lead-form {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}
@media (max-width: 600px) {
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
    #ac-roi-calculator, #ac-readiness-quiz, .ac-lead-form, .ac-footer
  ) {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
    #ac-roi-calculator, #ac-readiness-quiz
  ) {
    padding-top: 10rem !important;
    padding-bottom: 3.5rem !important;
  }
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-lead-form {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* Tool bands → white ground; their top hairline is replaced by the
   system's inset divider below. */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  #ac-roi-calculator,
  #ac-readiness-quiz
) {
  background: var(--lt-page) !important;
}
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  #ac-roi-calculator,
  #ac-readiness-quiz
)::before {
  display: none !important;
}

/* Content measures (see header note: 1680 for the ROI grid, the
   1100px tool-panel measure for the quiz). */
body.page-template-page-roi-calculator .arc-inner {
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.page-template-page-ai-readiness-quiz .arq-inner {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   2. TYPE — shared header stack (both tools use the same shape:
      eyebrow → h1 → intro, centred conversion-panel composition).
   ============================================================ */

/* Eyebrow — the ONE homepage spec: plain Inter caps, no pill. */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  .arc-badge,
  .arq-badge
) {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: var(--lt-ink) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  display: inline-block !important;
}

/* Page title — homepage hero scale. */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  .arc-title,
  .arq-title
) {
  font-size: clamp(2.2rem, 5vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.11 !important;
  letter-spacing: -0.02em !important;
  color: var(--lt-ink) !important;
  margin: 0 !important;
  text-wrap: balance;
}
/* Intro — homepage section-intro standard. */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  .arc-subtitle,
  .arq-subtitle
) {
  font-size: 24px !important;
  line-height: 1.7 !important;
  color: var(--lt-grey) !important;
  max-width: 820px !important;
  margin: 20px auto 0 !important;
}
/* Header block →4rem→ content (2.5rem ≤768). */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  .arc-header,
  .arq-header
) {
  margin-bottom: 4rem !important;
}
@media (max-width: 768px) {
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
    .arc-header, .arq-header
  ) {
    margin-bottom: 2.5rem !important;
  }
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
    .arc-subtitle, .arq-subtitle
  ) {
    font-size: 20px !important;
  }
}

/* ============================================================
   3. ROI CALCULATOR
   ============================================================ */

/* ── "One process" field ── */
body.page-template-page-roi-calculator .ac-calc-process-field {
  max-width: 720px !important;
  margin: 0 auto 3rem !important;
}
body.page-template-page-roi-calculator .ac-calc-process-field label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--lt-grey) !important;
  margin-bottom: 14px !important;
}
body.page-template-page-roi-calculator #ac-calc-process {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--lt-ink) !important;
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 12px !important;
  padding: 15px 22px !important;
  box-shadow: var(--lt-card-shadow) !important;
}
body.page-template-page-roi-calculator #ac-calc-process:focus {
  border-color: var(--ac-primary, #07A9D1) !important;
  box-shadow: 0 0 0 3px rgba(7, 169, 209, 0.12) !important;
}
body.page-template-page-roi-calculator #ac-calc-process::placeholder {
  color: var(--lt-grey) !important;
  opacity: 0.7;
}
body.page-template-page-roi-calculator .ac-calc-process-field p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--lt-grey) !important;
  margin-top: 10px !important;
}

/* ── Industry selector — 7 tiles on one row at the 1680 measure ── */
body.page-template-page-roi-calculator .arc-industry-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--lt-grey) !important;
  margin-bottom: 14px !important;
}
body.page-template-page-roi-calculator .arc-industries {
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 0;
}
body.page-template-page-roi-calculator .arc-ind-tile {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  padding: 18px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--lt-ink);
  box-shadow: var(--lt-card-shadow);
}
body.page-template-page-roi-calculator .arc-ind-tile:hover {
  border-color: var(--lt-border-brand);
  background: rgba(7, 169, 209, 0.04);
  color: var(--lt-ink);
  box-shadow: var(--lt-card-shadow-hover);
}
body.page-template-page-roi-calculator .arc-ind-tile.arc-active {
  border-color: var(--ac-primary, #07A9D1);
  background: rgba(7, 169, 209, 0.08);
  color: var(--lt-brand-ink);
}
@media (max-width: 1200px) {
  body.page-template-page-roi-calculator .arc-industries { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  body.page-template-page-roi-calculator .arc-industries { grid-template-columns: repeat(2, 1fr); }
}

/* ── Calculator body ── */
body.page-template-page-roi-calculator .arc-body {
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 40px;
}
@media (max-width: 960px) {
  body.page-template-page-roi-calculator .arc-body { grid-template-columns: 1fr; gap: 32px; }
}

/* Sliders — the canonical ac-roi-embed slider spec, light variant */
body.page-template-page-roi-calculator .arc-sliders { gap: 32px; }
body.page-template-page-roi-calculator .arc-slider-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--lt-grey) !important;
  margin-bottom: 14px !important;
}
body.page-template-page-roi-calculator .arc-slider-row input[type=range] {
  height: 5px;
  background: rgba(9, 32, 42, 0.12);
  border-radius: 3px;
}
body.page-template-page-roi-calculator .arc-slider-row input[type=range]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  background: var(--ac-primary, #07A9D1);
  border: 3px solid var(--lt-surface);
  box-shadow: 0 0 0 2px var(--ac-primary, #07A9D1);
  transition: transform 0.1s;
}
body.page-template-page-roi-calculator .arc-slider-row input[type=range]::-webkit-slider-thumb:active {
  transform: scale(1.15);
}
body.page-template-page-roi-calculator .arc-slider-row input[type=range]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--ac-primary, #07A9D1);
  border: 3px solid var(--lt-surface);
  box-shadow: 0 0 0 2px var(--ac-primary, #07A9D1);
}
body.page-template-page-roi-calculator .arc-slider-val {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 17px;
  font-weight: 600;
  color: var(--lt-brand-ink);
  /* LEFT-aligned (pattern right-aligns it): at the wide 1680 measure —
     and stacked full-width below 960px — right-alignment parked the
     value at the far edge, visually detached from its track. Left-
     aligned it sits 14px off the track end and the fixed min-width
     still keeps all five values in one tidy column. */
  min-width: 72px;
  text-align: left;
}

/* Results panel — homepage white card */
body.page-template-page-roi-calculator .arc-results {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border-brand);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: var(--lt-card-shadow);
}
body.page-template-page-roi-calculator .arc-savings-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--lt-grey) !important;
  margin-bottom: 10px !important;
}
body.page-template-page-roi-calculator .arc-savings-num {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(40px, 5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ac-primary, #07A9D1) !important;
  margin-bottom: 8px !important;
}
body.page-template-page-roi-calculator .arc-savings-sub {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--lt-grey) !important;
  margin-bottom: 28px !important;
}
body.page-template-page-roi-calculator .arc-stats { gap: 12px; margin-bottom: 24px; }
body.page-template-page-roi-calculator .arc-stat {
  background: var(--lt-tint-soft);
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  padding: 18px;
}
body.page-template-page-roi-calculator .arc-stat-val {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--lt-ink) !important;
  margin-bottom: 8px !important;
}
body.page-template-page-roi-calculator .arc-stat-lbl {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--lt-grey) !important;
}
/* Payback sentence (inline-styled) */
body.page-template-page-roi-calculator #ac-calc-payback-sentence {
  background: var(--lt-tint) !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--lt-ink) !important;
  margin-top: 0 !important;
}
body.page-template-page-roi-calculator #ac-calc-payback-sentence strong,
body.page-template-page-roi-calculator #ac-calc-combined-sentence strong {
  color: var(--lt-ink) !important;
  font-weight: 700 !important;
}

/* ── Breakdown cards ── */
body.page-template-page-roi-calculator .arc-breakdown {
  gap: 16px;
  margin-top: 40px;
}
body.page-template-page-roi-calculator .arc-bk-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: var(--lt-card-shadow);
}
body.page-template-page-roi-calculator .arc-bk-val {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--lt-ink) !important;
  margin-bottom: 8px !important;
}
body.page-template-page-roi-calculator .arc-bk-lbl {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--lt-grey) !important;
}
@media (max-width: 900px) {
  body.page-template-page-roi-calculator .arc-breakdown { grid-template-columns: 1fr; }
}

/* ── "Add another process" prompt (inline-styled) ── */
body.page-template-page-roi-calculator #ac-calc-add-process {
  margin-top: 16px !important;
  padding: 28px !important;
  background: var(--lt-surface) !important;
  border: 1.5px dashed var(--lt-border-brand) !important;
  border-radius: 16px !important;
}
body.page-template-page-roi-calculator #ac-calc-add-process p:first-child {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--lt-ink) !important;
  margin-bottom: 6px !important;
}
body.page-template-page-roi-calculator #ac-calc-add-process p:nth-child(2) {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--lt-grey) !important;
  margin-bottom: 20px !important;
}

/* ── Combined-value dashboard (inline-styled) ── */
body.page-template-page-roi-calculator #ac-calc-dashboard > div {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--lt-card-shadow) !important;
}
body.page-template-page-roi-calculator #ac-calc-dashboard > div:first-child > div:first-child {
  background: var(--lt-tint) !important;
  border-bottom: 1px solid var(--lt-border) !important;
  padding: 18px 24px !important;
}
body.page-template-page-roi-calculator #ac-calc-dashboard > div:first-child > div:first-child > span:first-child {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--lt-ink) !important;
}
body.page-template-page-roi-calculator #ac-calc-process-count {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--lt-brand-ink) !important;
  background: rgba(7, 169, 209, 0.10) !important;
  border-radius: 40px !important;
  padding: 5px 14px !important;
}
/* JS-written portfolio rows */
body.page-template-page-roi-calculator .arc-dash-row {
  border-bottom: 1px solid var(--lt-border) !important;
  padding: 16px 24px !important;
}
body.page-template-page-roi-calculator .arc-dash-row > div:first-child > span:first-child {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--lt-ink) !important;
}
body.page-template-page-roi-calculator .arc-dash-row > div:first-child > span:nth-child(2),
body.page-template-page-roi-calculator .arc-dash-row > div:last-child > span:nth-child(2) {
  font-size: 15px !important;
  color: var(--lt-grey) !important;
}
body.page-template-page-roi-calculator .arc-dash-row > div:last-child > span:first-child {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--lt-brand-ink) !important;
}
body.page-template-page-roi-calculator .arc-dash-row button {
  color: var(--lt-grey) !important;
}
body.page-template-page-roi-calculator .arc-dash-row button:hover {
  color: var(--lt-attn-strong) !important;
}
/* Combined totals block */
body.page-template-page-roi-calculator #ac-calc-dashboard > div:last-child { padding: 32px !important; }
body.page-template-page-roi-calculator #ac-calc-dashboard > div:last-child > p:first-child {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--lt-grey) !important;
  margin-bottom: 14px !important;
}
body.page-template-page-roi-calculator #ac-calc-combined-total {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(36px, 4.5vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--ac-primary, #07A9D1) !important;
}
body.page-template-page-roi-calculator #ac-calc-dashboard > div:last-child > p:nth-of-type(2) {
  font-size: 16px !important;
  color: var(--lt-grey) !important;
  margin-bottom: 20px !important;
}
body.page-template-page-roi-calculator .arc-dash-totals-grid { gap: 12px !important; }
body.page-template-page-roi-calculator .arc-dash-totals-grid > div {
  background: var(--lt-tint-soft) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 12px !important;
  padding: 18px !important;
}
body.page-template-page-roi-calculator .arc-dash-totals-grid > div > div:first-child {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--lt-ink) !important;
}
body.page-template-page-roi-calculator .arc-dash-totals-grid > div > div:last-child {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  color: var(--lt-grey) !important;
  margin-top: 6px !important;
}
body.page-template-page-roi-calculator #ac-calc-combined-sentence {
  background: var(--lt-tint) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--lt-ink) !important;
}

/* ── Final conversion panel — the homepage soft-cyan CTA panel, laid
      out as TWO COLUMNS: copy left, the single CTA right (user request
      2026-07-30; the secondary "talk to our team directly" booking
      link was removed from the pattern at the same time, so this panel
      now has exactly one action). Markup carries no inline styles any
      more, so these are plain declarations. ── */
body.page-template-page-roi-calculator .arc-convert {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: 40px;
  padding: 3.5rem;
  background: linear-gradient(180deg, #EAF6FA 0%, #DCEFF4 45%, #CDE7EF 100%);
  border-radius: 24px;
  text-align: left;
}
/* !important on size/leading: ac-mobile-fixes.css forces EVERY <p> to
   16px/1.7 below 768px, which flattened this heading to body size. (The
   __sub below deliberately keeps no !important, so it does pick up that
   16px mobile body size — that rule is intentional for reading text.) */
body.page-template-page-roi-calculator .arc-convert__title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
  color: var(--lt-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
body.page-template-page-roi-calculator .arc-convert__sub {
  font-size: 20px;
  line-height: 1.65;
  color: var(--lt-ink);
  max-width: 720px;
  margin: 0;
}
/* The pill must not stretch to the grid track's height. */
body.page-template-page-roi-calculator .arc-convert__btn {
  justify-self: end;
  white-space: nowrap;
}
/* Stack below the tablet breakpoint — copy then button, both left. */
@media (max-width: 900px) {
  body.page-template-page-roi-calculator .arc-convert {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 2rem;
  }
  body.page-template-page-roi-calculator .arc-convert__btn {
    justify-self: start;
  }
}
/* Assumptions fine print */
body.page-template-page-roi-calculator .arc-assumptions {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--lt-grey) !important;
  margin-top: 2rem !important;
}

/* ============================================================
   4. READINESS QUIZ
   ============================================================ */

/* ── Card ── */
body.page-template-page-ai-readiness-quiz .arq-card {
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 24px !important;
  padding: 40px !important;
  box-shadow: var(--lt-card-shadow) !important;
}
@media (max-width: 600px) {
  body.page-template-page-ai-readiness-quiz .arq-card { padding: 24px 18px !important; }
}

/* ── Intro screen — kept as a deliberate dark-on-photo tile (the
      homepage framed-industries idea), overlay retoned to #08222E ── */
body.page-template-page-ai-readiness-quiz #ac-quiz-intro {
  border-radius: 16px !important;
  padding: 3.5rem 2rem !important;
}
body.page-template-page-ai-readiness-quiz #ac-quiz-intro > div:first-child {
  background: rgba(8, 34, 46, 0.66) !important;
  border-radius: 16px !important;
}
body.page-template-page-ai-readiness-quiz #ac-quiz-intro p:first-child {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #FFFFFF !important;
  margin-bottom: 10px !important;
}
body.page-template-page-ai-readiness-quiz #ac-quiz-intro p:nth-child(2) {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-bottom: 28px !important;
}
body.page-template-page-ai-readiness-quiz #ac-quiz-intro label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 14px !important;
}
body.page-template-page-ai-readiness-quiz #ac-quiz-painpoint {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--lt-ink) !important;
  background: var(--lt-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 12px !important;
  padding: 15px 22px !important;
  max-width: 520px !important;
}
body.page-template-page-ai-readiness-quiz #ac-quiz-painpoint:focus {
  border-color: var(--ac-primary, #07A9D1) !important;
  box-shadow: 0 0 0 3px rgba(7, 169, 209, 0.25) !important;
}
body.page-template-page-ai-readiness-quiz #ac-quiz-painpoint::placeholder {
  color: var(--lt-grey) !important;
  opacity: 0.75;
}
body.page-template-page-ai-readiness-quiz #arq-intro-skip {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-top: 16px !important;
}
body.page-template-page-ai-readiness-quiz #arq-intro-skip:hover {
  color: #FFFFFF !important;
}

/* ── Progress ── */
body.page-template-page-ai-readiness-quiz .arq-prog { margin-bottom: 32px; }
body.page-template-page-ai-readiness-quiz .arq-prog-track {
  background: rgba(9, 32, 42, 0.10);
}
body.page-template-page-ai-readiness-quiz .arq-prog-text {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--lt-grey);
}

/* ── Question ── */
body.page-template-page-ai-readiness-quiz .arq-dim-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--lt-brand-ink) !important;
  margin: 0 0 1.25rem !important;
}
body.page-template-page-ai-readiness-quiz .arq-q-text {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--lt-ink) !important;
  margin: 0 0 28px !important;
  text-wrap: balance;
}

/* ── Options ── */
body.page-template-page-ai-readiness-quiz .arq-options { gap: 12px; margin-bottom: 32px; }
body.page-template-page-ai-readiness-quiz .arq-opt {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--lt-ink);
  box-shadow: var(--lt-card-shadow);
}
body.page-template-page-ai-readiness-quiz .arq-opt:hover {
  border-color: var(--lt-border-brand);
  background: rgba(7, 169, 209, 0.04);
  box-shadow: var(--lt-card-shadow-hover);
}
body.page-template-page-ai-readiness-quiz .arq-opt.arq-selected {
  border-color: var(--ac-primary, #07A9D1);
  background: rgba(7, 169, 209, 0.08);
  color: var(--lt-ink);
}
body.page-template-page-ai-readiness-quiz .arq-radio {
  border: 2px solid rgba(9, 32, 42, 0.25);
}

/* ── Nav buttons — homepage pill cut ── */
body.page-template-page-ai-readiness-quiz :is(.arq-btn-back, .arq-btn-next) {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-radius: 40px !important;
  padding: 12px 28px !important;
  min-height: 44px !important;
}
body.page-template-page-ai-readiness-quiz .arq-btn-back {
  border: 1.5px solid rgba(8, 34, 46, 0.20) !important;
  color: var(--lt-ink) !important;
  background: transparent !important;
}
body.page-template-page-ai-readiness-quiz .arq-btn-back:hover {
  border-color: var(--ac-primary, #07A9D1) !important;
  color: var(--ac-primary, #07A9D1) !important;
}
body.page-template-page-ai-readiness-quiz .arq-btn-next {
  background: linear-gradient(135deg, #07A9D1 0%, #06CFC3 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(7, 169, 209, 0.25) !important;
}
body.page-template-page-ai-readiness-quiz .arq-btn-next:hover {
  box-shadow: 0 10px 28px rgba(7, 169, 209, 0.35) !important;
}

/* ── Results — score block ── */
body.page-template-page-ai-readiness-quiz .arq-score-block { margin-bottom: 40px; }
body.page-template-page-ai-readiness-quiz .arq-score-num {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(56px, 7vw, 76px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 10px !important;
}
body.page-template-page-ai-readiness-quiz .arq-tier-name {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px !important;
}
body.page-template-page-ai-readiness-quiz .arq-tier-desc {
  font-size: 20px !important;
  line-height: 1.65 !important;
  color: var(--lt-grey) !important;
  max-width: 720px !important;
}
body.page-template-page-ai-readiness-quiz #arq-pain-line {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--lt-brand-ink) !important;
  max-width: 720px !important;
  margin-top: 20px !important;
}
body.page-template-page-ai-readiness-quiz #arq-pain-line strong { color: var(--lt-ink) !important; }
/* PDF download button + its caption (inline-styled) */
body.page-template-page-ai-readiness-quiz button[onclick="generateQuizPDF()"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--lt-ink) !important;
  background: var(--lt-surface) !important;
  border: 1.5px solid rgba(8, 34, 46, 0.20) !important;
  border-radius: 40px !important;
  padding: 12px 28px !important;
  min-height: 44px !important;
}
body.page-template-page-ai-readiness-quiz button[onclick="generateQuizPDF()"]:hover {
  border-color: var(--ac-primary, #07A9D1) !important;
  color: var(--ac-primary, #07A9D1) !important;
}
body.page-template-page-ai-readiness-quiz .arq-score-block div:has(> button[onclick="generateQuizPDF()"]) p {
  font-size: 15px !important;
  color: var(--lt-grey) !important;
  margin-top: 12px !important;
}

/* ── Results — dimension grid ── */
body.page-template-page-ai-readiness-quiz .arq-dims {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 32px;
}
body.page-template-page-ai-readiness-quiz .arq-dim-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--lt-card-shadow);
}
body.page-template-page-ai-readiness-quiz .arq-dim-name {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--lt-grey);
  margin-bottom: 12px;
}
body.page-template-page-ai-readiness-quiz .arq-dim-bar-track {
  background: rgba(9, 32, 42, 0.10);
}
body.page-template-page-ai-readiness-quiz .arq-dim-pct {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px;
  font-weight: 700;
}
@media (max-width: 1000px) {
  body.page-template-page-ai-readiness-quiz .arq-dims { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body.page-template-page-ai-readiness-quiz .arq-dims { grid-template-columns: 1fr; }
}

/* ── Results — recommendations ── */
body.page-template-page-ai-readiness-quiz .arq-recs {
  background: var(--lt-tint);
  border: 1px solid var(--lt-border-brand);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
}
body.page-template-page-ai-readiness-quiz .arq-recs-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--lt-ink) !important;
  margin: 0 0 1.25rem !important;
}
body.page-template-page-ai-readiness-quiz .arq-rec-item {
  border-bottom: 1px solid var(--lt-border);
  padding: 16px 0;
}
/* Last item has no rule (pattern) — drop its padding too so the panel's
   own 32px is the only bottom space. */
body.page-template-page-ai-readiness-quiz .arq-rec-item:last-child { padding-bottom: 0; }
body.page-template-page-ai-readiness-quiz .arq-rec-arrow { color: var(--ac-primary, #07A9D1); }
body.page-template-page-ai-readiness-quiz .arq-rec-strong {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--lt-ink);
  margin-bottom: 6px;
}
body.page-template-page-ai-readiness-quiz .arq-rec-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--lt-grey);
}

/* ── Results — cross-sell strip to the ROI calculator (inline-styled) ── */
body.page-template-page-ai-readiness-quiz #arq-results > div:has(> a[href*="automation-roi-calculator"]) {
  max-width: none !important;
  padding: 28px !important;
  background: var(--lt-surface) !important;
  border: 1px solid var(--lt-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--lt-card-shadow) !important;
  margin: 0 0 24px !important;
}
body.page-template-page-ai-readiness-quiz #arq-results > div:has(> a[href*="automation-roi-calculator"]) p {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--lt-ink) !important;
  margin-bottom: 16px !important;
}
body.page-template-page-ai-readiness-quiz a[href*="automation-roi-calculator"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--lt-ink) !important;
  border: 1.5px solid rgba(8, 34, 46, 0.20) !important;
  border-radius: 40px !important;
  padding: 12px 28px !important;
}
body.page-template-page-ai-readiness-quiz a[href*="automation-roi-calculator"]:hover {
  border-color: var(--ac-primary, #07A9D1) !important;
  color: var(--ac-primary, #07A9D1) !important;
}

/* ── Results — final conversion panel (homepage soft-cyan CTA) ── */
body.page-template-page-ai-readiness-quiz .arq-cta {
  background: linear-gradient(180deg, #EAF6FA 0%, #DCEFF4 45%, #CDE7EF 100%) !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 3.5rem 2.5rem !important;
}
body.page-template-page-ai-readiness-quiz .arq-cta-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--lt-ink) !important;
  margin: 0 0 16px !important;
}
body.page-template-page-ai-readiness-quiz .arq-cta-sub {
  font-size: 20px !important;
  line-height: 1.65 !important;
  color: var(--lt-ink) !important;
  max-width: 640px !important;
  margin: 0 auto 32px !important;
}
body.page-template-page-ai-readiness-quiz .arq-retake {
  font-size: 15px !important;
  color: var(--lt-grey) !important;
  margin-top: 20px !important;
}
body.page-template-page-ai-readiness-quiz .arq-retake:hover { color: var(--lt-attn-strong) !important; }

/* ============================================================
   5. SHARED CTA BUTTONS — homepage pill cut. The PRIMARY
      "#lead-form" action on both tools is the page's conversion
      moment, so it gets the coral "attention" accent (homepage
      final-CTA rule); the secondary "talk to us" option stays the
      calm ink outline, same pairing as the homepage CTA.
   ============================================================ */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  #ac-calc-cta-primary,
  .arq-cta-btn,
  .arc-cta-btn
) {
  /* inline-flex + centring so the 44px min tap target actually applies
     (the ROI pill lost its inline `display:inline-block` when the panel
     markup was cleaned up). */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FF6B5E 0%, var(--lt-attn) 100%) !important;
  border: none !important;
  border-radius: 40px !important;
  padding: 14px 32px !important;
  min-height: 44px !important;
  box-shadow: 0 6px 20px rgba(229, 72, 77, 0.25) !important;
  transition: background 0.2s, box-shadow 0.2s !important;
}
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  #ac-calc-cta-primary,
  .arq-cta-btn,
  .arc-cta-btn
):hover {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--lt-attn) 0%, var(--lt-attn-strong) 100%) !important;
  box-shadow: 0 10px 30px rgba(229, 72, 77, 0.35) !important;
  opacity: 1 !important;
}
/* Secondary "book / talk to us directly" links (inline-styled) +
   the "save this process" button — calm ink outline pills. */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  a[href*="bookwithme"],
  #ac-calc-add-process button
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--lt-ink) !important;
  background: var(--lt-surface) !important;
  border: 1.5px solid rgba(8, 34, 46, 0.20) !important;
  border-radius: 40px !important;
  padding: 12px 28px !important;
  min-height: 44px !important;
  transition: border-color 0.2s, color 0.2s !important;
}
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  a[href*="bookwithme"],
  #ac-calc-add-process button
):hover {
  color: var(--ac-primary, #07A9D1) !important;
  border-color: var(--ac-primary, #07A9D1) !important;
  background: var(--lt-surface) !important;
}
/* In the quiz CTA the two buttons sit on ONE inline row (the ROI panel
   separates them with a <br>), so the inline `margin-top:12px` on the
   secondary link knocked it out of alignment with the coral pill. Zero
   it and use a horizontal gap + shared baseline instead. */
body.page-template-page-ai-readiness-quiz .arq-cta :is(.arq-cta-btn, a[href*="bookwithme"]) {
  vertical-align: middle !important;
}
body.page-template-page-ai-readiness-quiz .arq-cta a[href*="bookwithme"] {
  margin-top: 0 !important;
  margin-left: 12px !important;
}
/* The quiz intro's "Start the assessment" button lives on the dark
   photo tile, so it keeps the brand teal (not coral). */
body.page-template-page-ai-readiness-quiz #arq-intro-start {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #07A9D1 0%, #06CFC3 100%) !important;
  border: none !important;
  border-radius: 40px !important;
  padding: 14px 32px !important;
  min-height: 44px !important;
  box-shadow: 0 6px 20px rgba(7, 169, 209, 0.30) !important;
}
body.page-template-page-ai-readiness-quiz #arq-intro-start:hover {
  box-shadow: 0 10px 28px rgba(7, 169, 209, 0.40) !important;
  opacity: 1 !important;
}

/* ============================================================
   6. FOOTER — homepage light footer treatment (mirrors
      ac-insights-system.css)
   ============================================================ */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer {
  background: #FFFFFF !important;
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) :is(
  .ac-footer__heading,
  .ac-footer__desc,
  .ac-footer__reach-cta
) { color: var(--lt-ink) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer__brand .ac-logo span { color: var(--lt-ink) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer a { color: var(--lt-ink) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer a:hover { color: var(--ac-primary) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer a.ac-footer__email-link,
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer a.ac-footer__phone { color: var(--lt-ink) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer__email svg { stroke: var(--lt-ink) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer a.ac-pill-cta.ac-footer__map-pill {
  color: var(--lt-ink) !important;
  border: 1.5px solid rgba(8, 34, 46, 0.18);
}
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer__linkedin svg path { fill: var(--lt-ink) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer__linkedin--min { border-color: var(--lt-ink) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer__linkedin--min:hover { border-color: var(--ac-primary) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer__linkedin--min:hover svg path { fill: var(--ac-primary) !important; }
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-footer__divider {
  background-color: var(--lt-border) !important;
  color: var(--lt-border) !important;
  opacity: 1 !important;
}

/* ============================================================
   7. SECTION DIVIDER — the homepage's inset hairline on the
      white→white boundary between the tool band and the lead
      form. (The footer follows the lead form's dark card, so it
      separates itself — same as the homepage.)
   ============================================================ */
body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) { --ac-divider-inset: 9rem; }
@media (max-width: 960px) { body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) { --ac-divider-inset: 2rem; } }
@media (max-width: 600px) { body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) { --ac-divider-inset: 1.5rem; } }

body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) .ac-lead-form {
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    transparent var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) calc(100% - var(--ac-divider-inset)),
    transparent calc(100% - var(--ac-divider-inset))
  ) 1;
}

/* ── Accessibility: reduced motion (homepage system parity) ── */
@media (prefers-reduced-motion: reduce) {
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) *,
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) *::before,
  body:is(.page-template-page-roi-calculator, .page-template-page-ai-readiness-quiz) *::after {
    transition: none !important;
    animation: none !important;
  }
}