/*=====================================================*/
/*  AI POWERED ERP HUB — SHARED DESIGN SYSTEM          */
/*  Used by every page under /ai-powered-erp/          */
/*  Pages: ai-powered-erp, the-versa-ai-approach,      */
/*         versa-ai-opsengine, beyond-erp              */
/*=====================================================*/

:root {
  --ai-primary: #FD8200;
  --ai-primary-rgb: 253, 130, 0;
  --ai-primary-deep: #ce6a00;
  --ai-ink: #141414;
  --ai-ink-soft: #2B2F35;
  --ai-muted: #5C6470;
  --ai-paper: #FFFFFF;
  --ai-cream: #FAF7F1;
  --ai-line: #E8E2D8;
  --ai-line-rgb: 232, 226, 216;
  --ai-line-dark: rgba(255, 255, 255, 0.14);
  --ai-green-rgb: 14, 188, 107;
  --ai-green: #0ebc6b;
  --ai-amber: #B97700;
  --ai-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ai-heading: Montserrat, Raleway, sans-serif;
  --ai-body: Raleway, sans-serif;
}

/*----------------------------*/
/* PAGE BASE                  */
/*----------------------------*/
.ai-page {
  background: var(--ai-paper);
  color: var(--ai-ink);
  font-family: var(--ai-body);
  overflow: hidden;
}

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

.ai-page a {
  text-decoration: none;
}

.ai-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Inline accents must not carry their own line-height. The live theme sets a
   taller one on <em>, which inflates the line box of every wrapped line that
   contains one — visible as uneven leading on multi-line headings. */
.ai-page em,
.ai-hero__copy h1 span {
  line-height: inherit !important;
}

.ai-wrap {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.ai-section {
  position: relative;
  padding: 96px 0;
}

.ai-section--alt {
  background: var(--ai-cream);
}

.ai-section--dark {
  background: var(--ai-ink);
}

/* Faint square grid on light sections. Masked inside-out: clear behind the
   copy, texture only toward the edges. Pairs with .ai-hero::before. */
.ai-section--pattern {
  --ai-grid-x: 50%;
  --ai-grid-y: 46%;
  --ai-grid-mask: radial-gradient(ellipse 78% 66% at var(--ai-grid-x) var(--ai-grid-y), transparent 26%, #000 96%);
  --ai-beam-mid: rgba(var(--ai-primary-rgb), 0.25);
  --ai-beam-head: rgba(var(--ai-primary-rgb), 0.8);
}

.ai-section--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(20, 20, 20, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 20, 0.075) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: var(--ai-grid-mask);
  mask-image: var(--ai-grid-mask);
  pointer-events: none;
}

.ai-section--pattern>.ai-wrap {
  position: relative;
  z-index: 1;
}

/*----------------------------*/
/* GRID BEAMS                 */
/* A few grid lines light up  */
/* and fall, one at a time.   */
/* Layer built by             */
/* initGridLife() in          */
/* common.js.                 */
/*----------------------------*/
.ai-grid-beams {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Fades with the same envelope as the grid it travels on */
  -webkit-mask-image: var(--ai-grid-mask);
  mask-image: var(--ai-grid-mask);
}

.ai-grid-beam {
  position: absolute;
  opacity: 0;
  animation: ai-beam-fall var(--beam-dur, 6s) linear var(--beam-delay, 0s) infinite;
}

/* Off-screen surfaces stop animating (toggled by initGridLife) */
.ai-grid-beams.is-paused .ai-grid-beam {
  animation-play-state: paused;
}

/* Column beam — falls down a vertical grid line */
.ai-grid-beam--v {
  top: 0;
  left: var(--beam-x, 0);
  width: 1px;
  height: var(--beam-len, 190px);
  background: linear-gradient(to bottom,
      transparent 0%,
      var(--ai-beam-mid) 55%,
      var(--ai-beam-head) 93%,
      transparent 100%);
  transform: translate3d(0, calc(-1 * var(--beam-len, 190px)), 0);
}

/* Row beam — sweeps along a horizontal grid line */
.ai-grid-beam--h {
  top: var(--beam-y, 0);
  left: 0;
  width: var(--beam-len, 190px);
  height: 1px;
  background: linear-gradient(to right,
      transparent 0%,
      var(--ai-beam-mid) 55%,
      var(--ai-beam-head) 93%,
      transparent 100%);
  transform: translate3d(calc(-1 * var(--beam-len, 190px)), 0, 0);
  animation-name: ai-beam-sweep;
}

/* The run occupies only the first slice of the cycle; the rest is the pause
   before this beam goes again, so no single line is constantly lit. */
@keyframes ai-beam-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(-1 * var(--beam-len, 190px)), 0);
  }

  6% {
    opacity: 1;
  }

  38% {
    opacity: 1;
  }

  46% {
    opacity: 0;
    transform: translate3d(0, var(--beam-travel, 900px), 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, var(--beam-travel, 900px), 0);
  }
}

@keyframes ai-beam-sweep {
  0% {
    opacity: 0;
    transform: translate3d(calc(-1 * var(--beam-len, 190px)), 0, 0);
  }

  6% {
    opacity: 1;
  }

  38% {
    opacity: 1;
  }

  46% {
    opacity: 0;
    transform: translate3d(var(--beam-travel, 900px), 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--beam-travel, 900px), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-grid-beams {
    display: none;
  }
}

.ai-section--dark h2,
.ai-section--dark h3,
.ai-section--dark p,
.ai-section--dark span {
  color: #FFF;
}

/*----------------------------*/
/* TYPOGRAPHY                 */
/*----------------------------*/
.ai-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ai-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ai-primary-deep);
}

.ai-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--ai-primary);
  flex-shrink: 0;
}

.ai-section--dark .ai-kicker {
  color: var(--ai-primary);
}

.ai-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  margin: 0 0 56px;
}

.ai-head.centered {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.ai-head h2 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ai-ink);
}

.ai-head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

/* .ai-head h2 declares ink later in this file at the same specificity as
   `.ai-section--dark h2`, so dark sections need this to win it back. */
.ai-section--dark .ai-head h2 {
  color: #FFF;
}

.ai-section--dark .ai-head p {
  color: rgba(255, 255, 255, 0.72);
}

/* Emphasised terms need to clear the dimmed body colour on ink, otherwise
   they read as the same grey as the sentence around them. */
.ai-section--dark .ai-head p strong,
.ai-section--dark .ai-head p em {
  color: #FFF;
  font-style: normal;
}

/*----------------------------*/
/* BUTTONS & LINKS            */
/*----------------------------*/
.ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  padding: 16px 26px;
  background: var(--ai-primary);
  border: 2px solid var(--ai-primary);
  border-radius: 12px;
  box-shadow: 0 4px 0 0 var(--ai-primary-deep);
  color: #FFF !important;
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ai-btn:hover,
.ai-btn:focus {
  color: #FFF !important;
  text-decoration: none;
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--ai-primary-deep);
}

.ai-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 var(--ai-primary-deep);
}

.ai-btn i,
.ai-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.ai-btn--inverse {
  background: #FFF;
  border-color: #FFF;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.35);
  color: var(--ai-ink) !important;
}

.ai-btn--inverse:hover,
.ai-btn--inverse:focus {
  color: var(--ai-ink) !important;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.35);
}

.ai-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border-bottom: 2px solid rgba(var(--ai-primary-rgb), 0.35);
  color: var(--ai-ink) !important;
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* Same link, used as the trigger for the expert popup */
button.ai-arrow-link {
  padding-left: 0;
  padding-right: 0;
  background: none;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  cursor: pointer;
}

.ai-arrow-link i,
.ai-arrow-link svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
  color: var(--ai-primary);
  transition: transform 0.25s ease;
}

.ai-arrow-link:hover,
.ai-arrow-link:focus {
  color: var(--ai-primary-deep) !important;
  border-color: var(--ai-primary);
  text-decoration: none;
}

.ai-arrow-link:hover i,
.ai-arrow-link:hover svg {
  transform: translateX(4px);
}

.ai-section--dark .ai-arrow-link {
  color: #FFF !important;
}

.ai-section--dark .ai-arrow-link:hover {
  color: var(--ai-primary) !important;
}

/*----------------------------*/
/* HERO (ink + orange)        */
/*----------------------------*/
.ai-hero {
  position: relative;
  background: var(--ai-ink);
  overflow: hidden;
  /* Mask focal point — nudged by initGridLife() in common.js */
  --ai-grid-x: 74%;
  --ai-grid-y: 40%;
  --ai-grid-mask: radial-gradient(ellipse 75% 95% at var(--ai-grid-x) var(--ai-grid-y), #000 12%, transparent 70%);
  --ai-beam-mid: rgba(255, 255, 255, 0.32);
  --ai-beam-head: var(--ai-primary);
}

.ai-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: var(--ai-grid-mask);
  mask-image: var(--ai-grid-mask);
  pointer-events: none;
}

/* Solid orange corner accent */
.ai-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 6px;
  background: var(--ai-primary);
  pointer-events: none;
}

.ai-hero .ai-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr);
  align-items: center;
  gap: 72px;
  padding-top: 125px;
  padding-bottom: 90px;
}

.ai-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.ai-hero__copy .ai-kicker {
  color: var(--ai-primary);
}

.ai-hero__copy h1 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(40px, 5vw, 55px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #FFF;
}

/* The accent inherits the heading's type — but says so explicitly, because an
   element-level rule on <em> in the live theme would otherwise beat the value
   the em only inherited. Declaring `inherit` keeps it tracking the h1's
   clamp() while still winning the cascade. Same defence as the line-height
   rule above. */
.ai-hero__copy h1 em {
  font-style: normal;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--ai-primary);
}

.ai-hero__copy .ai-lede {
  margin: 0;
  max-width: 540px;
  font-size: 18.5px;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.72);
}

.ai-hero__copy .ai-lede strong {
  color: #FFF;
}

.ai-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 12px;
}

.ai-hero .ai-arrow-link {
  color: #FFF !important;
  border-bottom-color: rgba(var(--ai-primary-rgb), 0.5);
}

.ai-hero .ai-arrow-link:hover,
.ai-hero .ai-arrow-link:focus {
  color: var(--ai-primary) !important;
  border-bottom-color: var(--ai-primary);
}

/* Scroll cue */
.ai-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: var(--ai-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/* The label carries its own type instead of inheriting it from the cue. The
   live theme styles bare spans, and a direct declaration always beats an
   inherited one — the same reason .ai-console__bar sets its type on the span
   rather than on the bar. */
.ai-hero__scroll span {
  font-family: var(--ai-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.ai-hero__scroll i,
.ai-hero__scroll svg {
  width: 18px;
  height: 18px;
  color: var(--ai-primary);
  stroke-width: 2.4;
  animation: ai-bob 1.8s ease-in-out infinite;
}

@keyframes ai-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }
}

/* Floating chips around the hero visual */
.ai-hero__visual {
  position: relative;
}

.ai-float-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 999px;
  font-family: var(--ai-heading);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  color: var(--ai-ink);
  white-space: nowrap;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
  animation: ai-float 4.2s ease-in-out infinite;
}

.ai-float-chip i,
.ai-float-chip svg {
  width: 15px;
  height: 15px;
  color: var(--ai-primary);
  stroke-width: 2.6;
  flex-shrink: 0;
}

.ai-float-chip--orange {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  color: #FFF;
  box-shadow: 0 16px 34px rgba(var(--ai-primary-rgb), 0.35);
}

.ai-float-chip--orange i,
.ai-float-chip--orange svg {
  color: #FFF;
}

.ai-float-chip.pos-tl {
  top: -20px;
  left: -30px;
}

.ai-float-chip.pos-tr {
  top: -18px;
  right: -22px;
}

.ai-float-chip.pos-bl {
  bottom: -18px;
  left: -26px;
}

.ai-float-chip.pos-br {
  bottom: 34px;
  right: -30px;
}

/* Lifts a chip fully clear of the card it floats beside, instead of resting on
   its corner. Needed wherever the card's top bar or footer carries text — a
   status, a run label — that the chip would otherwise sit on top of. */
.ai-float-chip--clear.pos-tl,
.ai-float-chip--clear.pos-tr {
  top: -44px;
}

.ai-float-chip--clear.pos-bl,
.ai-float-chip--clear.pos-br {
  bottom: -44px;
}

@keyframes ai-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

/*----------------------------*/
/* CAPABILITY TICKER          */
/* Orange-on-ink marquee band */
/*----------------------------*/
.ai-ticker {
  position: relative;
  z-index: 2;
  background: var(--ai-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 4px solid var(--ai-primary);
  padding: 15px 0;
  overflow: hidden;
  /* Subtle diagonal tilt. Rotating about the centre lifts one pair of corners
     and drops the other, so the band vacates a thin wedge at each end of its
     own box. The negative margins bleed the band into the neighbouring
     sections by slightly more than that wedge (50vw * tan(0.8deg) = 0.7vw),
     so the wedges expose the hero / next section instead of the white page. */
  margin: -0.75vw 0;
  transform: rotate(-0.8deg);
}

.ai-ticker__track {
  display: flex;
  width: max-content;
  animation: ai-marquee 30s linear infinite;
}

.ai-ticker:hover .ai-ticker__track {
  animation-play-state: paused;
}

.ai-ticker ul {
  display: flex;
  align-items: center;
  gap: 46px;
  padding-right: 46px;
}

.ai-ticker li {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--ai-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}

.ai-ticker li i,
.ai-ticker li svg {
  width: 14px;
  height: 14px;
  color: var(--ai-primary);
  stroke-width: 2.6;
  flex-shrink: 0;
}

@keyframes ai-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-ticker__track {
    animation: none;
  }
}

/*----------------------------*/
/* HUB NAV (sticky strip)     */
/*----------------------------*/
.ai-hubnav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ai-line);
  transition: box-shadow 0.25s ease;
}

.ai-hubnav.is-stuck {
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.08);
}

.ai-hubnav .ai-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ai-hubnav .ai-wrap::-webkit-scrollbar {
  display: none;
}

.ai-hubnav__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  padding: 18px 0;
  font-family: var(--ai-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ai-ink);
  white-space: nowrap;
}

.ai-hubnav__label i,
.ai-hubnav__label svg {
  width: 15px;
  height: 15px;
  color: var(--ai-primary);
  stroke-width: 2.4;
}

.ai-hubnav a {
  position: relative;
  display: inline-block;
  padding: 20px 14px;
  color: var(--ai-muted) !important;
  font-family: var(--ai-heading);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.ai-hubnav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  background: var(--ai-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.ai-hubnav a:hover {
  color: var(--ai-ink) !important;
  text-decoration: none;
}

.ai-hubnav a:hover::after {
  transform: scaleX(1);
}

.ai-hubnav a.is-current {
  color: var(--ai-ink) !important;
}

.ai-hubnav a.is-current::after {
  transform: scaleX(1);
}

/*----------------------------*/
/* CONSOLE CARD (hero visual) */
/*----------------------------*/
.ai-console {
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 4px 0 0 var(--ai-primary);
  overflow: hidden;
}

.ai-console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--ai-ink);
}

.ai-console__bar i,
.ai-console__bar svg {
  width: 15px;
  height: 15px;
  color: var(--ai-primary);
  stroke-width: 2.4;
  flex-shrink: 0;
}

.ai-console__bar span {
  font-family: var(--ai-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.ai-console__bar em {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ai-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6EE7A8;
}

.ai-console__bar em::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6EE7A8;
  animation: ai-pulse 1.8s ease-in-out infinite;
}

@keyframes ai-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }
}

.ai-console__body {
  display: flex;
  flex-direction: column;
}

.ai-console__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-top: 1px solid var(--ai-line);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease;
}

.ai-console__row:first-child {
  border-top: 0;
}

.ai-console__row.is-on {
  opacity: 1;
  transform: translateY(0);
}

.ai-console__row.is-live {
  background: rgba(var(--ai-primary-rgb), 0.06);
  box-shadow: inset 3px 0 0 0 var(--ai-primary);
}

/* Row freshly rotated to the top of the live feed */
.ai-console__row.is-new {
  animation: ai-row-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes ai-row-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-console__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ai-line);
  border-radius: 9px;
  background: var(--ai-cream);
  flex-shrink: 0;
}

.ai-console__icon i,
.ai-console__icon svg {
  width: 17px;
  height: 17px;
  color: var(--ai-primary-deep);
  stroke-width: 2.2;
}

.ai-console__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ai-console__text strong {
  font-family: var(--ai-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ai-ink);
  line-height: 1.35;
}

.ai-console__text span {
  font-size: 12.5px;
  line-height: 1.5 !important;
  color: var(--ai-muted);
}

.ai-console__tag {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--ai-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.ai-console__tag.t-action {
  background: rgba(var(--ai-primary-rgb), 0.12);
  color: var(--ai-primary-deep);
}

.ai-console__tag.t-done {
  background: rgba(30, 142, 90, 0.12);
  color: var(--ai-green);
}

.ai-console__tag.t-watch {
  background: rgba(185, 119, 0, 0.12);
  color: var(--ai-amber);
}

.ai-console__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--ai-line);
  background: var(--ai-cream);
  font-family: var(--ai-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ai-muted);
}

.ai-console__foot i,
.ai-console__foot svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
  color: var(--ai-primary-deep);
}

/*-----------------------------------*/
/* PANEL                             */
/* The large content surface used    */
/* across the hub — definition       */
/* blocks, side-by-side comparisons, */
/* explainer boxes.                  */
/*                                   */
/* One accent colour drives both the */
/* hard edge and the border, held    */
/* back at rest and taken to full    */
/* opacity on hover, so every panel  */
/* reacts the same way whatever its  */
/* colour. Set --ai-panel-rgb and    */
/* --ai-panel-rest to add a variant. */
/*                                   */
/* Structure (all optional):         */
/*   .ai-panel__head--sm   eyebrow   */
/*   .ai-panel__icon       badge     */
/*   .ai-panel__head       title     */
/*   ...body...                      */
/*   .ai-panel__foot       closing   */
/*-----------------------------------*/
.ai-panel {
  --ai-panel-rgb: var(--ai-line-rgb);
  --ai-panel-rest: 1;
  position: relative;
  padding: 32px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  box-shadow:
    0 4px 0 0 rgba(var(--ai-panel-rgb), var(--ai-panel-rest)),
    0 18px 40px rgba(20, 20, 20, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ai-panel:hover {
  box-shadow:
    0 4px 0 0 rgb(var(--ai-panel-rgb)),
    0 18px 40px rgba(20, 20, 20, 0.08);
}

/* ---- surface variants ---- */
.ai-panel--primary {
  --ai-panel-rgb: var(--ai-primary-rgb);
  --ai-panel-rest: 0.3;
  border-color: rgba(var(--ai-primary-rgb), 0.5);
}

.ai-panel--primary:hover {
  border-color: var(--ai-primary);
}

.ai-panel--success {
  --ai-panel-rgb: var(--ai-green-rgb);
  --ai-panel-rest: 0.35;
}

/* Ink surface. Orange is the only accent that carries on it, so the dark
   variant keeps the primary edge and varies the fill instead. */
.ai-panel--dark {
  --ai-panel-rgb: var(--ai-primary-rgb);
  --ai-panel-rest: 0.55;
  background: var(--ai-ink);
  border-color: var(--ai-ink);
  box-shadow:
    0 4px 0 0 rgba(var(--ai-panel-rgb), var(--ai-panel-rest)),
    0 18px 40px rgba(20, 20, 20, 0.18);
}

.ai-panel--dark:hover {
  box-shadow:
    0 4px 0 0 rgb(var(--ai-panel-rgb)),
    0 18px 40px rgba(20, 20, 20, 0.22);
}

/* Translucent panel for use *inside* a dark section, where an ink fill would
   disappear into the background */
.ai-panel--glass {
  --ai-panel-rgb: var(--ai-primary-rgb);
  --ai-panel-rest: 0.35;
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--ai-line-dark);
  box-shadow: 0 4px 0 0 rgba(var(--ai-panel-rgb), var(--ai-panel-rest));
}

.ai-panel--glass:hover {
  box-shadow: 0 4px 0 0 rgb(var(--ai-panel-rgb));
}

.ai-panel--cream {
  background: var(--ai-cream);
}

/* Roomier padding for panels that carry a whole section of content */
.ai-panel--roomy {
  padding: 40px 44px;
}

/* Stacked contents. --ai-panel-gap tunes the rhythm per instance. */
.ai-panel--stack {
  display: flex;
  flex-direction: column;
  gap: var(--ai-panel-gap, 14px);
}

/* Lifts on hover — for panels the reader is meant to compare or choose between */
.ai-panel--lift:hover {
  transform: translateY(-4px);
}

/* ---- eyebrow (small header) ---- */
.ai-panel__head--sm {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-family: var(--ai-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ai-muted);
}

.ai-panel__head--sm i,
.ai-panel__head--sm svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  flex-shrink: 0;
}

.ai-panel--primary .ai-panel__head--sm {
  color: var(--ai-primary-deep);
}

.ai-panel--dark .ai-panel__head--sm,
.ai-panel--glass .ai-panel__head--sm {
  color: var(--ai-primary);
}

/* ---- title ---- */
.ai-panel__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  font-family: var(--ai-heading);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ai-ink);
}

.ai-panel__head i,
.ai-panel__head svg {
  width: 23px;
  height: 23px;
  color: var(--ai-primary);
  stroke-width: 2.2;
  flex-shrink: 0;
}

.ai-panel--dark .ai-panel__head,
.ai-panel--glass .ai-panel__head {
  color: #FFF;
}

/* ---- large title, for panels that lead with an icon badge ---- */
.ai-panel__title {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ai-ink);
}

/* ---- opening line under a title ---- */
.ai-panel__lede {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65 !important;
  color: var(--ai-muted);
}

/* ---- icon badge ---- */
.ai-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 13px;
}

.ai-panel__icon i,
.ai-panel__icon svg {
  width: 24px;
  height: 24px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

.ai-panel--dark .ai-panel__icon,
.ai-panel--glass .ai-panel__icon {
  background: rgba(var(--ai-primary-rgb), 0.14);
  border-color: rgba(var(--ai-primary-rgb), 0.4);
}

.ai-panel--dark .ai-panel__icon i,
.ai-panel--dark .ai-panel__icon svg,
.ai-panel--glass .ai-panel__icon i,
.ai-panel--glass .ai-panel__icon svg {
  color: var(--ai-primary);
}

/* ---- footer ---- */
.ai-panel__foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--ai-line);
  font-size: 14.5px;
  line-height: 1.65 !important;
  color: var(--ai-muted);
}

/* Pushes the footer to the bottom when the panel is a flex column */
.ai-panel__foot--push {
  margin-top: auto !important;
}

.ai-panel--dark .ai-panel__foot {
  border-top-color: var(--ai-line-dark);
  color: rgba(255, 255, 255, 0.72);
}

.ai-panel--dark .ai-panel__foot strong {
  color: #FFF;
}

/* ---- copy ---- */
.ai-panel h2,
.ai-panel h3,
.ai-panel h4 {
  color: var(--ai-ink);
}

/* ---- copy inside a dark or glass panel ---- */
.ai-panel--dark h2,
.ai-panel--dark h3,
.ai-panel--dark h4,
.ai-panel--dark p,
.ai-panel--glass h2,
.ai-panel--glass h3,
.ai-panel--glass h4,
.ai-panel--glass p {
  color: #FFF;
}

.ai-panel--dark p,
.ai-panel--dark .ai-panel__lede,
.ai-panel--glass p,
.ai-panel--glass .ai-panel__lede {
  color: rgba(255, 255, 255, 0.72);
}

.ai-panel--dark .ai-checklist li,
.ai-panel--glass .ai-checklist li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}

@media (max-width: 767px) {

  .ai-panel,
  .ai-panel--roomy {
    padding: 26px 22px;
  }
}

/*----------------------------*/
/* CARDS & GRIDS              */
/*----------------------------*/
.ai-grid {
  display: grid;
  gap: 20px;
}

.ai-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ai-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--ai-primary-rgb), 0.45);
  box-shadow: 0 18px 40px rgba(20, 20, 20, 0.08);
}

.ai-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 12px;
}

.ai-card__icon i,
.ai-card__icon svg {
  width: 22px;
  height: 22px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

.ai-card h3 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ai-ink);
}

/* Hovering a card carries through to its contents — the same response the
   linked page cards already had: the heading warms up and any arrow inside
   leans forward. Deliberately no cursor change; most cards are not links. */
.ai-card h3,
.ai-card h4 {
  transition: color 0.2s ease;
}

.ai-card:hover h3,
.ai-card:hover h4 {
  color: var(--ai-primary-deep);
}

.ai-card:hover .ai-arrow-link i,
.ai-card:hover .ai-arrow-link svg {
  transform: translateX(4px);
}

.ai-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65 !important;
  color: var(--ai-muted);
}

.ai-card .ai-arrow-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 14px;
}

.ai-index {
  font-family: var(--ai-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ai-primary-deep);
}

/* Tag chips (topics, functions) */
.ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-tags li,
.ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 999px;
  font-family: var(--ai-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ai-ink-soft);
  white-space: nowrap;
}

/* Checklist */
.ai-checklist {
  display: grid;
  gap: 12px;
}

.ai-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ai-ink-soft);
}

.ai-checklist li i,
.ai-checklist li svg {
  width: 21px;
  height: 21px;
  margin-top: 1px;
  color: var(--ai-green);
  stroke-width: 2.6;
  flex-shrink: 0;
}

.ai-checklist--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 26px;
  margin: 8px 0;
}

.ai-checklist--2col li {
  font-size: 15px;
}

/*-----------------------------------*/
/* WHAT YOU'LL LEARN BAND            */
/* Chapter contents, sitting just    */
/* below the hero: a narrow label     */
/* column with the points beside it.  */
/* Points stagger in off the shared   */
/* reveal — no page script needed,    */
/* the delay is read from --ai-i.     */
/*-----------------------------------*/
.ai-learn {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 2fr);
  align-items: start;
  gap: 24px 52px;
  padding: 38px 42px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  box-shadow:
    0 4px 0 0 rgba(var(--ai-primary-rgb), 0.3),
    0 18px 40px rgba(20, 20, 20, 0.05);
}

.ai-learn__label {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-learn__label h2 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ai-ink);
}

.ai-learn__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}

.ai-learn__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ai-ink-soft);
}

.ai-learn.is-visible .ai-learn__list li {
  animation: ai-reveal-up 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--ai-i, 0) * 80ms);
}

.ai-learn__list li i,
.ai-learn__list li svg {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--ai-green);
  stroke-width: 2.8;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .ai-learn {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px 28px;
  }
}

@media (max-width: 767px) {
  .ai-learn {
    padding: 26px 22px;
  }

  .ai-learn__list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-learn__list li {
    animation: none !important;
    opacity: 1 !important;
  }
}

/*----------------------------*/
/* OPERATIONAL FLOW DIAGRAM   */
/*----------------------------*/
.ai-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
}

.ai-flow__step {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 14px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.ai-flow__step .ai-index {
  min-width: 34px;
}

.ai-flow__step h3 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--ai-ink);
  line-height: 1.3;
}

.ai-flow__step p {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.55 !important;
  color: var(--ai-muted);
}

.ai-flow__step i.ai-flow__glyph,
.ai-flow__step svg.ai-flow__glyph {
  width: 22px;
  height: 22px;
  margin-left: auto;
  color: var(--ai-line);
  stroke-width: 2;
  flex-shrink: 0;
  transition: color 0.4s ease;
}

.ai-flow__step.is-on {
  border-color: rgba(var(--ai-primary-rgb), 0.6);
  box-shadow: 0 4px 0 0 rgba(var(--ai-primary-rgb), 0.25), 0 14px 34px rgba(20, 20, 20, 0.07);
}

.ai-flow__step.is-on .ai-flow__glyph {
  color: var(--ai-primary);
}

.ai-flow__step.is-final {
  background: var(--ai-ink);
  border-color: var(--ai-ink);
}

.ai-flow__step.is-final h3 {
  color: #FFF;
}

.ai-flow__step.is-final p {
  color: rgba(255, 255, 255, 0.65);
}

.ai-flow__step.is-final .ai-index {
  color: var(--ai-primary);
}

.ai-flow__step.is-final.is-on {
  box-shadow: 0 4px 0 0 var(--ai-primary), 0 14px 34px rgba(20, 20, 20, 0.2);
}

.ai-flow__link {
  position: relative;
  width: 2px;
  height: 38px;
  background: var(--ai-line);
  flex-shrink: 0;
}

.ai-flow__link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--ai-primary);
  transition: height 0.45s ease;
}

.ai-flow__link.is-on::after {
  height: 100%;
}

/* Traveling "data packet" once the connector is live */
.ai-flow__link::before {
  content: "";
  position: absolute;
  top: -12%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #FFF;
  border: 1.5px solid var(--ai-primary);
  box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.25);
  opacity: 0;
  z-index: 1;
}

.ai-flow__link.is-on::before {
  animation: ai-packet 2s ease-in-out infinite;
}

@keyframes ai-packet {
  0% {
    top: -12%;
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    top: 96%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-flow__link.is-on::before {
    animation: none;
  }
}

/*-----------------------------------*/
/* STACK DIAGRAM                     */
/* Centred plates joined by a live   */
/* pipe — what feeds what. Use this  */
/* where the shape of the idea is a  */
/* stack of layers; use .ai-flow     */
/* where it is a sequence of steps.  */
/*                                   */
/* Structure (all optional):         */
/*   .ai-stack__plate  a layer       */
/*     .ai-stack__badge   icon       */
/*     .ai-stack__title   name       */
/*     .ai-stack__sub     one-liner  */
/*     .ai-stack__chips   verbs      */
/*   .ai-stack__pipe   the joint     */
/*                                   */
/* Plate variants: --ink (the        */
/* engine), --accent (what it        */
/* produces), --glass (for use on a  */
/* dark section).                    */
/*-----------------------------------*/
.ai-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
}

.ai-stack__plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 28px 30px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  text-align: center;
}

.ai-stack__plate--ink {
  background: var(--ai-ink);
  border-color: var(--ai-ink);
  box-shadow: 0 4px 0 0 var(--ai-primary), 0 22px 46px rgba(20, 20, 20, 0.18);
}

.ai-stack__plate--accent {
  border-color: rgba(var(--ai-primary-rgb), 0.5);
  box-shadow: 0 4px 0 0 rgba(var(--ai-primary-rgb), 0.3), 0 18px 40px rgba(20, 20, 20, 0.06);
}

.ai-stack__plate--glass {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--ai-line-dark);
  box-shadow: 0 4px 0 0 rgba(var(--ai-primary-rgb), 0.4);
}

.ai-stack__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 15px;
}

.ai-stack__badge i,
.ai-stack__badge svg {
  width: 25px;
  height: 25px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

.ai-stack__plate--ink .ai-stack__badge,
.ai-stack__plate--glass .ai-stack__badge {
  background: rgba(var(--ai-primary-rgb), 0.14);
  border-color: rgba(var(--ai-primary-rgb), 0.42);
}

.ai-stack__plate--ink .ai-stack__badge i,
.ai-stack__plate--ink .ai-stack__badge svg,
.ai-stack__plate--glass .ai-stack__badge i,
.ai-stack__plate--glass .ai-stack__badge svg {
  color: var(--ai-primary);
}

.ai-stack__title {
  font-family: var(--ai-heading);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ai-ink);
}

.ai-stack__plate--ink .ai-stack__title,
.ai-stack__plate--glass .ai-stack__title {
  color: #FFF;
}

.ai-stack__sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ai-muted);
}

.ai-stack__plate--ink .ai-stack__sub,
.ai-stack__plate--glass .ai-stack__sub {
  color: rgba(255, 255, 255, 0.7);
}

/* Needs .ai-page to outrank the `.ai-page ul { margin: 0 }` reset */
.ai-page .ai-stack__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 0 !important;
  padding: 0;
  list-style: none;
}

.ai-stack__chips li {
  padding: 7px 14px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 999px;
  font-family: var(--ai-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ai-ink-soft);
}

.ai-stack__plate--ink .ai-stack__chips li,
.ai-stack__plate--glass .ai-stack__chips li {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--ai-line-dark);
  color: rgba(255, 255, 255, 0.86);
}

/* The joint between two plates, with a packet running down it */
.ai-stack__pipe {
  position: relative;
  width: 2px;
  height: 44px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, var(--ai-primary), rgba(var(--ai-primary-rgb), 0.3));
}

.ai-stack__pipe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #FFF;
  border: 1.5px solid var(--ai-primary);
  box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.22);
  animation: ai-stack-packet 2.4s ease-in-out infinite;
}

@keyframes ai-stack-packet {
  0% {
    top: -6px;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    top: 42px;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-stack__pipe::after {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .ai-stack__plate {
    padding: 24px 20px;
  }
}

/*-----------------------------------*/
/* ASK LIST                          */
/* Two-up rows of questions, each    */
/* led by an icon. Default sits on a */
/* cream section; --cream flips the  */
/* row fill for white sections.      */
/*-----------------------------------*/
.ai-asklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 960px;
  margin: 0 auto !important;
}

.ai-asklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 13px;
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ai-ink);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ai-asklist--cream li {
  background: var(--ai-cream);
}

.ai-asklist li:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--ai-primary-rgb), 0.45);
  box-shadow: 0 14px 30px rgba(20, 20, 20, 0.07);
}

.ai-asklist li i,
.ai-asklist li svg {
  width: 20px;
  height: 20px;
  color: var(--ai-primary);
  stroke-width: 2.2;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .ai-asklist {
    grid-template-columns: 1fr;
  }
}

/*-----------------------------------*/
/* TILE LIST                         */
/* A grid of short capability tiles. */
/* Each tile leads with either an    */
/* .ai-index number or an icon.      */
/* Modifiers:                        */
/*  --3 / --4 / --5  column count    */
/*     (a class, not an inline var,  */
/*     so the responsive caps below  */
/*     can still win)                */
/*  --centered  icon above centred   */
/*     copy, for short labels        */
/*  --cream  cream tiles that turn   */
/*     white on hover                */
/*-----------------------------------*/
.ai-tilelist {
  --ai-tilelist-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--ai-tilelist-cols), minmax(0, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto !important;
  /* Some of these are <ol>, which the .ai-page list reset does not cover */
  padding: 0;
  list-style: none;
}

.ai-tilelist--3 {
  --ai-tilelist-cols: 3;
  max-width: 960px;
}

/* Matches the default, but stating it keeps four-across markup explicit
   rather than relying on the base value staying at four */
.ai-tilelist--4 {
  --ai-tilelist-cols: 4;
}

.ai-tilelist--5 {
  --ai-tilelist-cols: 5;
  max-width: 1040px;
}

.ai-tilelist li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 14px;
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ai-ink);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ai-tilelist li:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--ai-primary-rgb), 0.45);
  box-shadow: 0 16px 34px rgba(20, 20, 20, 0.08);
}

.ai-tilelist .ai-index {
  font-size: 13px;
}

.ai-tilelist li i,
.ai-tilelist li svg {
  width: 22px;
  height: 22px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

/* Icon-led tiles: narrower, centred, tighter type */
.ai-tilelist--centered li {
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: center;
}

/* Cream tiles lift to white, so the hover reads on a white section */
.ai-tilelist--cream li {
  background: var(--ai-cream);
}

.ai-tilelist--cream li:hover {
  background: #FFF;
}

/* Cap the columns rather than let narrow screens squeeze five across.
   Declared after the count modifiers so these win. */
@media (max-width: 1023px) {
  .ai-tilelist {
    --ai-tilelist-cols: 3;
  }
}

@media (max-width: 767px) {
  .ai-tilelist {
    --ai-tilelist-cols: 2;
  }
}

/*-----------------------------------*/
/* CYCLE / LIFECYCLE STEPPER         */
/* Tabbed stages that auto-advance   */
/* while in view. Built for dark     */
/* sections. Two knobs:              */
/*  - .ai-cycle__num is optional;    */
/*    include it for a numbered      */
/*    sequence, omit it for a set of */
/*    peer stages.                   */
/*  - .ai-cycle--centered centres    */
/*    the tab contents; the default  */
/*    is left-aligned.               */
/* Driven by initCycles() in         */
/* common.js.                        */
/*-----------------------------------*/
.ai-cycle {
  /* Tab count, so a cycle with four or six stages still divides evenly */
  --ai-cycle-tabs: 5;
  max-width: 1000px;
  margin: 0 auto;
}

.ai-cycle__tabs {
  display: grid;
  grid-template-columns: repeat(var(--ai-cycle-tabs), minmax(0, 1fr));
  gap: 10px;
}

.ai-cycle__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ai-line-dark);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.ai-cycle--centered .ai-cycle__tab {
  align-items: center;
  text-align: center;
}

.ai-cycle__tab:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-3px);
}

.ai-cycle__tab.is-active {
  background: rgba(var(--ai-primary-rgb), 0.14);
  border-color: rgba(var(--ai-primary-rgb), 0.65);
}

/* Scoped to the tab so it outranks `.ai-section--dark span` */
.ai-cycle__tab .ai-cycle__num {
  font-family: var(--ai-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}

.ai-cycle__tab.is-active .ai-cycle__num {
  color: var(--ai-primary);
}

.ai-cycle__tab i,
.ai-cycle__tab svg {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.6);
  stroke-width: 2.1;
  transition: color 0.25s ease;
}

.ai-cycle__tab.is-active i,
.ai-cycle__tab.is-active svg {
  color: var(--ai-primary);
}

.ai-cycle__name {
  font-family: var(--ai-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: #FFF !important;
}

/* Timer for the auto-advancing tour */
.ai-cycle__track {
  height: 3px;
  margin: 18px 0 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.ai-cycle__progress {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ai-primary);
  border-radius: 999px;
}

.ai-cycle__panels {
  position: relative;
  margin-top: 22px;
}

.ai-cycle__panel {
  display: none;
  gap: 26px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ai-line-dark);
  border-radius: 18px;
}

.ai-cycle__panel.is-active {
  display: flex;
  animation: ai-cycle-panel-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes ai-cycle-panel-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-cycle__panel.is-active {
    animation: none;
  }
}

.ai-cycle__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  background: rgba(var(--ai-primary-rgb), 0.14);
  border: 1px solid rgba(var(--ai-primary-rgb), 0.4);
  border-radius: 16px;
}

.ai-cycle__icon i,
.ai-cycle__icon svg {
  width: 28px;
  height: 28px;
  color: var(--ai-primary);
  stroke-width: 2;
}

.ai-cycle__copy h3 {
  margin: 0 0 12px;
  font-family: var(--ai-heading);
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #FFF;
  margin: 0;
}

.ai-cycle__copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.72);
}

.ai-cycle__list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 25px !important;
}

.ai-cycle__list li {
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--ai-line-dark);
  border-radius: 999px;
  font-family: var(--ai-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #FFF;
}

@media (max-width: 1023px) {
  .ai-cycle__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .ai-cycle__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Without a number to stack, a centred tab reads better as one compact row */
  .ai-cycle--centered .ai-cycle__tab {
    flex-direction: row;
    justify-content: center;
    padding: 13px 10px;
  }

  .ai-cycle__panel {
    flex-direction: column;
    gap: 18px;
    padding: 26px 22px;
  }
}

/*----------------------------*/
/* COMPARISON TABLE           */
/*----------------------------*/
.ai-compare {
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  overflow: hidden;
  background: #FFF;
}

.ai-compare__head,
.ai-compare__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ai-compare__head>div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.ai-compare__head>div:first-child {
  background: var(--ai-cream);
  color: var(--ai-muted);
  border-right: 1px solid var(--ai-line);
}

.ai-compare__head>div:last-child {
  background: var(--ai-ink);
  color: #FFF;
}

.ai-compare__head i,
.ai-compare__head svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  flex-shrink: 0;
}

.ai-compare__head>div:last-child i,
.ai-compare__head>div:last-child svg {
  color: var(--ai-primary);
}

.ai-compare__row {
  border-top: 1px solid var(--ai-line);
}

.ai-compare__row>div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  font-size: 15px;
  line-height: 1.55;
}

.ai-compare__row>div:first-child {
  color: var(--ai-muted);
  border-right: 1px solid var(--ai-line);
}

.ai-compare__row>div:last-child {
  color: var(--ai-ink);
  font-weight: 700;
  background: rgba(var(--ai-primary-rgb), 0.04);
}

.ai-compare__row i,
.ai-compare__row svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
  flex-shrink: 0;
}

.ai-compare__row>div:first-child i,
.ai-compare__row>div:first-child svg {
  color: #B9B2A6;
}

.ai-compare__row>div:last-child i,
.ai-compare__row>div:last-child svg {
  color: var(--ai-green);
}

/*-----------------------------------*/
/* ADVISOR CTA CARD (animated)       */
/* Matches the "Ask Richard" FAB:    */
/* floating avatar, pulse ring,      */
/* status dot, typing speech bubble. */
/*-----------------------------------*/
.ai-advisor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 38px;
  background: var(--ai-ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--ai-primary);
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(20, 20, 20, 0.22);
  overflow: hidden;
}

.ai-advisor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.ai-advisor__avatar {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  animation: ai-advisor-float 3.2s ease-in-out infinite;
}

@keyframes ai-advisor-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.ai-advisor__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #FFF;
  background: var(--ai-cream);
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.ai-advisor__ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid var(--ai-primary);
  opacity: 0.9;
  animation: ai-advisor-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes ai-advisor-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  70% {
    transform: scale(1.4);
    opacity: 0;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.ai-advisor__dot {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #2ECC71;
  border: 2.5px solid var(--ai-ink);
}

.ai-advisor__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.ai-advisor__typing {
  display: flex;
  align-items: center;
  min-height: 18px;
  font-family: var(--ai-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ai-primary);
}

/* Declared on the text span itself, not just inherited from .ai-advisor__typing:
   the live theme targets these spans directly, and inheritance always loses to
   a direct declaration no matter how specific the ancestor rule is. */
.ai-advisor__typing,
.ai-advisor__typing-text {
  color: var(--ai-primary) !important;
}

.ai-advisor__caret {
  display: inline-block;
  width: 2px;
  height: 14px;
  margin-left: 4px;
  background: var(--ai-primary);
  animation: ai-caret-blink 0.9s steps(1) infinite;
}

@keyframes ai-caret-blink {
  50% {
    opacity: 0;
  }
}

.ai-advisor__copy strong {
  font-family: var(--ai-heading);
  font-size: 20px;
  font-weight: 800;
  color: #FFF;
  line-height: 1.3;
}

.ai-advisor__copy>span:last-of-type {
  font-size: 14.5px;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.68);
}

.ai-advisor .ai-btn {
  position: relative;
  z-index: 1;
  margin-left: auto;
  flex-shrink: 0;
  min-height: 50px;
  padding: 14px 22px;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {

  .ai-advisor__avatar,
  .ai-advisor__ring,
  .ai-advisor__caret {
    animation: none !important;
  }
}

/*-----------------------------------*/
/* CUSTOMIZED QUOTE BAND             */
/* Mid-page contact break: phone,    */
/* email and the expert popup.       */
/* Sits on both white and cream      */
/* sections, so it leans on the      */
/* border, the hard orange edge and  */
/* the corner tick to read on either */
/* rather than on a fill colour.     */
/*-----------------------------------*/
.ai-quoteband {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 940px;
  margin: 0 auto;
  padding: 44px 46px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  box-shadow: 0 4px 0 0 var(--ai-primary), 0 20px 44px rgba(20, 20, 20, 0.08);
  text-align: center;
  overflow: hidden;
}

/* Faint square grid, masked inside-out so it only shows toward the edges and
   stays clear behind the centred copy — the same texture the heroes use, and
   the same envelope as .ai-section--pattern */
.ai-quoteband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(20, 20, 20, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 20, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 62% 74% at 50% 50%, transparent 32%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 74% at 50% 50%, transparent 32%, #000 100%);
  pointer-events: none;
}

.ai-quoteband__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Medallion above the kicker. The ring is a second, softer orange edge drawn
   with a spread shadow, so the badge reads as a focal point without needing
   an extra element. */
.ai-quoteband__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 10px;
  border: 1px solid rgba(var(--ai-primary-rgb), 0.35);
  border-radius: 18px;
  box-shadow: 0 0 0 6px rgba(var(--ai-primary-rgb), 0.06);
}

.ai-quoteband__badge i,
.ai-quoteband__badge svg {
  width: 27px;
  height: 27px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

.ai-quoteband h3 {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(24px, 2.8vw, 33px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ai-ink);
}

.ai-quoteband__copy p {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.65 !important;
  color: var(--ai-muted);
}

/* Two equal contacts on the top row; the CTA spans both beneath them */
.ai-quoteband__actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(570px, 100%);
}

.ai-quoteband__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 11px 14px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 12px;
  color: var(--ai-ink) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ai-quoteband__contact:hover {
  transform: translateY(-2px);
  background: #FFF;
  border-color: rgba(var(--ai-primary-rgb), 0.55);
  box-shadow: 0 10px 22px rgba(20, 20, 20, 0.07);
  text-decoration: none;
}

.ai-quoteband__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 10px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ai-quoteband__contact:hover .ai-quoteband__contact-icon {
  background: rgba(var(--ai-primary-rgb), 0.1);
  border-color: rgba(var(--ai-primary-rgb), 0.4);
}

.ai-quoteband__contact-icon i,
.ai-quoteband__contact-icon svg {
  width: 17px;
  height: 17px;
  color: var(--ai-primary-deep);
  stroke-width: 2.2;
}

.ai-quoteband__contact-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-family: var(--ai-heading);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  /* The email is the longest string here; let it shrink rather than overflow */
  overflow-wrap: anywhere;
}

.ai-quoteband__contact-text em {
  font-family: var(--ai-mono);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ai-muted);
}

/* Spans both contacts, so the action block reads as one unit */
.ai-quoteband .ai-btn {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 2px;
}

@media (max-width: 1023px) {
  .ai-quoteband {
    padding: 36px 32px;
  }
}

@media (max-width: 767px) {
  .ai-quoteband {
    padding: 28px 22px;
  }

  /* Too narrow for two across without the email wrapping awkwardly */
  .ai-quoteband__actions {
    grid-template-columns: 1fr;
  }
}

/*----------------------------*/
/* FAQ                        */
/*----------------------------*/
.ai-faq {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  background: #FFF;
  overflow: hidden;
}

.ai-faq__item+.ai-faq__item {
  border-top: 1px solid var(--ai-line);
}

.ai-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 28px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--ai-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--ai-ink);
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.2s ease;
}

.ai-faq__q:hover {
  color: var(--ai-primary-deep);
}

.ai-faq__q i,
.ai-faq__q svg {
  width: 19px;
  height: 19px;
  color: var(--ai-primary);
  stroke-width: 2.6;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.ai-faq__item.is-open .ai-faq__q i,
.ai-faq__item.is-open .ai-faq__q svg {
  transform: rotate(45deg);
}

.ai-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.ai-faq__a>div {
  overflow: hidden;
}

.ai-faq__a p {
  margin: 0;
  padding: 0 28px 24px;
  font-size: 15.5px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

.ai-faq__item.is-open .ai-faq__a {
  grid-template-rows: 1fr;
}

/*-----------------------------------*/
/* JOURNEY NAV (prev / next)         */
/* Sequential nav for the four pages */
/* under The Versa AI Approach.      */
/*-----------------------------------*/
/* Its own section, sitting directly above the final CTA. The rule is drawn on
   the section itself, not on the wrap, so it runs edge to edge across the
   viewport. The reduced top padding keeps it reading as the boundary with the
   section above rather than as a line floating inside this one. */
.ai-section--journey {
  border-top: 1px solid var(--ai-line);
  padding-top: 60px;
}

.ai-journeynav {
  max-width: 980px;
  margin: 0 auto;
}

.ai-journeynav__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.ai-journeynav__steps {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ai-journeynav__steps span {
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: var(--ai-line);
}

.ai-journeynav__steps span.is-current {
  background: var(--ai-primary);
}

.ai-journeynav__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ai-journeynav__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Hover keeps the "next" card's own hard orange edge and simply takes it, and
   the border, to full opacity — rather than swapping in a soft black shadow */
.ai-journeynav__card:hover {
  transform: translateY(-4px);
  border-color: var(--ai-primary);
  box-shadow: 0 4px 0 0 var(--ai-primary);
  text-decoration: none;
}

/* The "next" card leads, so it carries the accent */
.ai-journeynav__card--next {
  align-items: flex-end;
  text-align: right;
  border-color: rgba(var(--ai-primary-rgb), 0.5);
  box-shadow: 0 4px 0 0 rgba(var(--ai-primary-rgb), 0.3);
}

.ai-journeynav__dir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ai-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ai-muted);
}

.ai-journeynav__card--next .ai-journeynav__dir {
  color: var(--ai-primary-deep);
}

.ai-journeynav__dir i,
.ai-journeynav__dir svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
  color: var(--ai-primary);
  flex-shrink: 0;
}

.ai-journeynav__card strong {
  font-family: var(--ai-heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ai-ink);
}

/* A single neighbour shouldn't stretch across the whole band. It keeps the
   side it would sit on in a full pair: previous left, next right. */
.ai-journeynav__pair--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 520px;
  margin-right: auto;
}

.ai-journeynav__pair--solo.is-first {
  margin-right: 0;
  margin-left: auto;
}

/*----------------------------*/
/* FINAL CTA BAND             */
/*----------------------------*/
.ai-endcta {
  position: relative;
  background: var(--ai-ink);
  border-top: 4px solid var(--ai-primary);
  overflow: hidden;
  --ai-grid-x: 84%;
  --ai-grid-y: 50%;
  --ai-grid-mask: radial-gradient(ellipse 58% 135% at var(--ai-grid-x) var(--ai-grid-y), #000 8%, transparent 70%);
  --ai-beam-mid: rgba(255, 255, 255, 0.3);
  --ai-beam-head: var(--ai-primary);
}

/* Same square grid as the hero, weighted to the action side */
.ai-endcta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.085) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: var(--ai-grid-mask);
  mask-image: var(--ai-grid-mask);
  pointer-events: none;
}

.ai-endcta .ai-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 40px;
  padding-top: 84px;
  padding-bottom: 84px;
}

.ai-endcta h2 {
  margin: 0 0 14px;
  font-family: var(--ai-heading);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #FFF;
}

.ai-endcta p {
  margin: 0;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.72);
}

.ai-endcta__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

/*----------------------------*/
/* EXPERT FORM MODAL          */
/*----------------------------*/
.ai-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 20, 20, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ai-modal.is-open {
  display: flex;
  animation: ai-fade-in 0.25s ease;
}

@keyframes ai-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ai-modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #FFF;
  border-radius: 18px;
  border-top: 5px solid var(--ai-primary);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
  animation: ai-rise 0.3s ease;
}

@keyframes ai-rise {
  from {
    transform: translateY(26px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.ai-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 30px 6px;
}

.ai-modal__head h3 {
  margin: 0 0 6px;
  font-family: var(--ai-heading);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ai-ink);
}

.ai-modal__head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6 !important;
  color: var(--ai-muted);
}

.ai-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ai-line);
  border-radius: 10px;
  background: var(--ai-cream);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ai-modal__close:hover {
  background: #FFF;
  transform: rotate(90deg);
}

.ai-modal__close i,
.ai-modal__close svg {
  width: 18px;
  height: 18px;
  color: var(--ai-ink);
  stroke-width: 2.4;
}

.ai-modal__body {
  padding: 18px 30px 30px;
}

.ai-modal__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px 0;
  font-family: var(--ai-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ai-muted);
}

.ai-modal__loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--ai-line);
  border-top-color: var(--ai-primary);
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
}

@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}

/* HubSpot form styling inside the modal */
.ai-modal__body .hs-form fieldset {
  border: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

.ai-modal__body .hs-form .form-columns-2 {
  display: flex;
  gap: 12px;
}

.ai-modal__body .hs-form .form-columns-2 .hs-form-field {
  width: 50%;
}

.ai-modal__body .hs-form .hs-form-field {
  margin: 0 0 12px;
}

.ai-modal__body .hs-form .hs-form-field>label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ai-ink-soft);
}

.ai-modal__body .hs-form .hs-input {
  width: 100% !important;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--ai-line);
  border-radius: 10px;
  background: #FFF;
  color: var(--ai-ink);
  font-family: var(--ai-body);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-modal__body .hs-form .hs-input:focus {
  outline: 0;
  border-color: var(--ai-primary);
  box-shadow: 0 0 0 3px rgba(var(--ai-primary-rgb), 0.18);
}

.ai-modal__body .hs-form textarea.hs-input {
  min-height: 96px;
  resize: vertical;
}

.ai-modal__body .hs-form .hs-error-msg {
  color: #D93025;
  font-size: 12px;
}

.ai-modal__body .hs-form .legal-consent-container .hs-richtext p,
.ai-modal__body .hs-form .cookie-reset-container {
  color: var(--ai-muted);
  font-size: 11px;
  line-height: 1.55 !important;
  margin: 0 0 10px;
}

.ai-modal__body .hs-form .hs_recaptcha {
  display: none;
}

.ai-modal__body .hs-form .hs-submit .hs-button.primary.large {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--ai-primary);
  box-shadow: 0 4px 0 0 var(--ai-primary-deep);
  color: #FFF;
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-modal__body .hs-form .hs-submit .hs-button.primary.large:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--ai-primary-deep);
}

/*----------------------------*/
/* SCROLL REVEAL              */
/*----------------------------*/
/* The reveal runs as an animation, not a transition, and moves the element
   with `translate` rather than `transform`. Both details matter: a
   transition-based reveal would overwrite the `transition` shorthand of any
   component it lands on (killing its hover easing), and a `transform`-based
   one would outrank that component's own :hover transform, since
   `[data-ai-animate].is-visible` and `.ai-card:hover` score the same and the
   reveal is declared later. Keeping the two on separate properties and
   separate systems lets a card reveal and lift independently. */
[data-ai-animate] {
  opacity: 0;
}

[data-ai-animate].is-visible {
  animation: ai-reveal-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

[data-ai-animate="left"].is-visible {
  animation-name: ai-reveal-left;
}

[data-ai-animate="right"].is-visible {
  animation-name: ai-reveal-right;
}

@keyframes ai-reveal-up {
  from {
    opacity: 0;
    translate: 0 26px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes ai-reveal-left {
  from {
    opacity: 0;
    translate: -32px 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes ai-reveal-right {
  from {
    opacity: 0;
    translate: 32px 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  [data-ai-animate],
  .ai-console__row,
  .ai-flow__link::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }
}

/*----------------------------*/
/* RESPONSIVE                 */
/*----------------------------*/
@media (max-width: 1023px) {
  .ai-section {
    padding: 72px 0;
  }

  .ai-hero .ai-wrap {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 64px;
    padding-bottom: 96px;
  }

  .ai-hero__visual {
    max-width: 560px;
  }

  .ai-float-chip.pos-tl {
    left: -8px;
  }

  .ai-float-chip.pos-br,
  .ai-float-chip.pos-tr {
    right: -8px;
  }

  .ai-float-chip.pos-bl {
    left: -8px;
  }

  .ai-grid--3,
  .ai-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-endcta .ai-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ai-endcta__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .ai-wrap {
    width: calc(100% - 40px);
  }

  .ai-section {
    padding: 60px 0;
  }

  .ai-grid--2,
  .ai-grid--3,
  .ai-grid--4,
  .ai-checklist--2col {
    grid-template-columns: 1fr;
  }

  .ai-hero__cta {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .ai-hero__cta .ai-btn {
    width: 100%;
  }

  .ai-hero__cta .ai-arrow-link {
    align-self: center;
  }

  .ai-float-chip,
  .ai-hero__scroll {
    display: none;
  }

  .ai-ticker ul {
    gap: 30px;
    padding-right: 30px;
  }

  .ai-advisor {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .ai-advisor .ai-btn {
    margin-left: 0;
    width: 100%;
  }

  .ai-compare__head,
  .ai-compare__row {
    grid-template-columns: 1fr;
  }

  .ai-compare__head>div:first-child,
  .ai-compare__row>div:first-child {
    border-right: 0;
    border-bottom: 1px dashed var(--ai-line);
  }

  .ai-journeynav__pair {
    grid-template-columns: 1fr;
  }

  .ai-journeynav__card--next {
    align-items: flex-start;
    text-align: left;
  }

  .ai-faq__q {
    padding: 18px 20px;
    font-size: 15.5px;
  }

  .ai-faq__a p {
    padding: 0 20px 20px;
  }

  .ai-endcta__actions {
    flex-direction: column;
  }

  .ai-endcta__actions .ai-btn {
    width: 100%;
  }
}