/* ══════════════════════════════════════
       RESET & TOKENS (Sandbox 2 Design System)
       ══════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
    a { color: inherit; text-decoration: none; }
    ul, li { list-style: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    input[type="range"] { font-family: inherit; }

    :root {
      --white: #FFFFFF;
      --off-white: #F4F4F2;
      --dark: #0a0a0a;
      --blue: #306BFF;
      --blue-700: #1a3bcc;
      --blue-glow: rgba(48,107,255,0.40);
      --zinc-300: #d4d4d8;
      --zinc-400: #a1a1aa;
      --zinc-500: #71717a;
      --zinc-700: #3f3f46;
      --zinc-800: #27272a;
      --zinc-900: #18181b;
      --font-heading: 'DM Sans', sans-serif;
      --font-accent: 'Cormorant Garamond', Georgia, serif;
      --font-body: 'Rubik', sans-serif;
      --gm: 196px;
      --mw: 1920px;
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    body {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--white);
      background: var(--dark);
      overflow-x: hidden;
    }

    /* ══════════════════════════════════════
       SCROLL REVEAL
       ══════════════════════════════════════ */
    .sr {
      opacity: 0;
      transform: translateY(44px);
      transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    }
    .sr.vis { opacity: 1; transform: translateY(0); }
    .sr-d1 { transition-delay: 0.1s; }
    .sr-d2 { transition-delay: 0.2s; }
    .sr-d3 { transition-delay: 0.3s; }
    .sr-d4 { transition-delay: 0.4s; }
    .sr-d5 { transition-delay: 0.5s; }

    /* ══════════════════════════════════════
       INNER WRAPPER (Grid-locked)
       ══════════════════════════════════════ */
    .inner {
      max-width: var(--mw);
      margin: 0 auto;
      padding-left: var(--gm);
      padding-right: var(--gm);
    }

    /* ══════════════════════════════════════
       DIVIDER COMPONENT
       ══════════════════════════════════════ */
    .divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.30);
    }
    .divider--dark {
      background: rgba(0, 0, 0, 0.12);
    }

    /* ══════════════════════════════════════
       HERO SECTION
       ══════════════════════════════════════ */
    #hero-main {
      background: var(--dark);
      position: relative;
      overflow: visible;
    }

    .h2-hero-gradient {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1400px;
      height: 1400px;
      object-fit: contain;
      pointer-events: none;
      z-index: 0;
      opacity: 0.85;
    }

    .h2-wrap {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      align-items: stretch;
      overflow: visible;
      width: 100%;
      max-width: 1920px;
      margin: 0 auto;
    }

    .h2-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: flex-start;
      padding: 184px var(--gm) 10px;
      position: relative;
      z-index: 2;
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
    }

    .h2-right { display: none; }

    .h2-gradient {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1270px;
      height: 1270px;
      object-fit: contain;
      pointer-events: none;
      z-index: 0;
    }

    .h2-visual {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      will-change: transform;
    }
    .h2-visual.tilt-active {
      transition: transform 0.08s linear;
    }
    .h2-visual.tilt-reset {
      transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .h2-object {
      display: block;
      height: 590px;
      width: auto;
      object-fit: contain;
      animation: h2-orb-float 8s ease-in-out infinite;
    }

    @keyframes h2-orb-float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      33%       { transform: translateY(-18px) rotate(3deg); }
      66%       { transform: translateY(10px) rotate(-2deg); }
    }

    .h2-title {
      font-family: var(--font-heading);
      font-size: 100px;
      font-weight: 300;
      line-height: 1;
      text-transform: uppercase;
      color: var(--white);
      margin: 0 0 48px 0;
      max-width: 1200px;
    }

    .h2-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      font-size: 110px;
      display: inline;
      line-height: 1;
    }

    .h2-badge {
      display: inline-block;
      padding: 8px 16px;
      border-radius: 9999px;
      background: rgba(48, 107, 255, 0.1);
      border: 1px solid rgba(48, 107, 255, 0.2);
      font-size: 13px;
      font-weight: 600;
      color: var(--zinc-400);
      margin-bottom: 24px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .h2-divider {
      grid-column: 1 / -1;
      grid-row: 2;
      height: 1px;
      background: rgba(255, 255, 255, 0.30);
      margin: 0 var(--gm);
      align-self: end;
    }

    .h2-bottom {
      grid-column: 1 / -1;
      grid-row: 3;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 16px;
      padding: 45px var(--gm);
    }

    .h2-bottom-left {
      grid-column: 1 / 5;
      display: flex;
      align-items: center;
    }

    .h2-bottom-left p {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--white);
      width: 430px;
      margin: 0;
    }

    .h2-bottom-right {
      grid-column: 9 / 13;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 64px;
    }

    .h2-stat-num {
      display: block;
      font-family: var(--font-heading);
      font-size: 92px;
      font-weight: 400;
      color: var(--white);
      line-height: 1;
    }

    .h2-stat-label {
      display: block;
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.1;
      text-transform: uppercase;
      color: var(--white);
      margin-top: 8px;
      letter-spacing: 0;
    }

    /* ══════════════════════════════════════
       SETUP WHITE PANEL
       ══════════════════════════════════════ */
    .platform-section {
      padding: 80px 0;
      position: relative;
      z-index: 1;
    }

    /* Stacked panel layers */
    .about-panel-stack {
      position: relative;
      padding-top: 24px;
    }
    .about-panel-stack::before {
      content: '';
      position: absolute;
      top: 0; left: 40px; right: 40px;
      height: 100%;
      border-radius: 24px;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .about-panel-stack::after {
      content: '';
      position: absolute;
      top: 12px; left: 20px; right: 20px;
      height: calc(100% - 12px);
      border-radius: 24px;
      background: rgba(255,255,255,0.10);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,0.12);
    }
    .about-panel {
      position: relative;
      z-index: 1;
      background: #FFFFFF;
      border-radius: 24px;
      overflow: hidden;
    }

    /* Scrolling credentials ticker */
    .about-credentials {
      overflow: hidden;
      padding: 20px 0;
      border-bottom: 1px solid #e5e5e5;
    }
    .about-credentials-track {
      display: flex;
      align-items: center;
      gap: 24px;
      width: max-content;
      animation: cred-scroll 25s linear infinite;
    }
    @keyframes cred-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .cred-item {
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: #888;
      white-space: nowrap;
    }
    .cred-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #b0b0b0;
      flex-shrink: 0;
    }

    /* Inner content area */
    .setup-inner {
      /* bottom matched to the sides; it used to carry 16px more */
      padding: 56px 48px 48px;
    }

    /* Title inside white panel — dark text */
    .setup-title {
      font-family: var(--font-heading);
      font-size: 85px;
      font-weight: 400;
      text-transform: uppercase;
      color: #0a0a0a;
      line-height: 1;
      text-align: center;
      margin-bottom: 20px;
    }
    .setup-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      /* +10px on the regular size, per templates/blocks/section-heading.html */
      font-size: 95px;
      line-height: 1;
      color: #0a0a0a;
    }

    /* Cards inside white panel — light theme */
    .about-panel .service-card {
      background: rgba(0,0,0,0.03);
      border-color: rgba(0,0,0,0.10);
      height: auto;
      min-height: unset;
      /* hidden so a full-bleed visual clips to the card's rounded corners */
      overflow: hidden;
      /* exposed as a variable so .platform-shot--bleed can cancel it exactly,
         at every breakpoint, without duplicating the number */
      --card-pad: 32px;
      padding: var(--card-pad);
    }
    .about-panel .card-title {
      color: #0a0a0a;
      font-family: var(--font-heading);
      font-size: 30px;
      font-weight: 500;
      line-height: 1.15;
      text-transform: none;
    }
    .about-panel .card-desc  { color: #0a0a0a; }
    .about-panel .service-card { border: none; }
    .about-panel .code-snippet {
      background: rgba(0,0,0,0.05);
      border-color: rgba(0,0,0,0.10);
      color: #306BFF;
    }
    .about-panel .card-step-icon {
      width: 111px;
      height: 55px;
      object-fit: contain;
      margin-bottom: 24px;
      display: block;
    }

    @media (max-width: 768px) {
      .about-panel-stack::before { left: 20px; right: 20px; }
      .about-panel-stack::after  { left: 10px; right: 10px; top: 8px; }
      .setup-inner { padding: 40px 32px 32px; }
    }
    @media (max-width: 480px) {
      .platform-section { padding: 40px 0; }
      .about-panel-stack::before { left: 12px; right: 12px; }
      .about-panel-stack::after  { left: 6px; right: 6px; top: 6px; }
      .setup-inner { padding: 28px 20px 20px; }
      .about-panel .service-card { --card-pad: 24px; max-width: 100%; }
      .code-snippet { white-space: pre-wrap; word-break: break-all; }
    }

    /* ══════════════════════════════════════
       SERVICES SECTION (SETUP)
       ══════════════════════════════════════ */
    .services {
      padding: 80px 0;
      position: relative;
      overflow: visible;
    }

    .services-gradient {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 900px;
      height: 900px;
      object-fit: contain;
      pointer-events: none;
      z-index: 0;
      transition: transform 0.08s linear;
    }

    .services-gradient.tilt-reset {
      transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .services > .inner {
      position: relative;
      z-index: 1;
    }

    .services-header {
      margin-bottom: 16px;
    }

    .services-title {
      font-family: var(--font-heading);
      font-size: 85px;
      font-weight: 400;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1;
      text-align: center;
      margin-bottom: 48px;
    }

    .services-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      font-size: 95px;
      line-height: 1;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .service-card {
      position: relative;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.10);
      padding: 32px;
      background: rgba(24,24,27,0.45);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      height: 400px;
      overflow: hidden;
      /* no hover state and no transition: these cards are not interactive, and a
         `transition: all` here was overriding the .sr scroll-reveal easing */
    }

    .card-3d {
      width: 120px;
      height: 120px;
      object-fit: contain;
      margin-bottom: auto;
    }


    .card-arrow-btn {
      position: absolute;
      top: 32px;
      right: 32px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.20);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      transition: background 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s cubic-bezier(0.4,0,0.2,1);
      padding: 0;
    }

    .card-arrow-btn svg {
      width: 30px;
      height: 30px;
      color: var(--white);
    }

    .card-arrow-btn:hover {
      background: var(--blue);
      border-color: var(--blue);
    }

    .card-arrow-btn.cab-fwd svg { animation: btn-cta-icon-fwd 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
    .card-arrow-btn.cab-bwd svg { animation: btn-cta-icon-bwd 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }

    @keyframes btn-cta-icon-fwd {
      0%   { transform: translateX(0);     opacity: 1; }
      18%  { transform: translateX(150%);  opacity: 0; }
      21%  { transform: translateX(-150%); opacity: 0; }
      100% { transform: translateX(0);     opacity: 1; }
    }

    @keyframes btn-cta-icon-bwd {
      0%   { transform: translateX(0);      opacity: 1; }
      18%  { transform: translateX(-150%);  opacity: 0; }
      21%  { transform: translateX(150%);   opacity: 0; }
      100% { transform: translateX(0);      opacity: 1; }
    }

    .card-body {
      margin-top: auto;
    }

    .card-title {
      font-family: var(--font-heading);
      font-size: 40px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .card-desc {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--white);
    }

    .code-snippet {
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: var(--zinc-300);
      overflow-x: auto;
      line-height: 1.4;
    }

    /* ══════════════════════════════════════
       DEMO SECTION
       ══════════════════════════════════════ */
    .section-gradient {
      position: absolute;
      width: 1200px;
      height: 1200px;
      object-fit: contain;
      pointer-events: none;
      z-index: 0;
      opacity: 0.5;
    }

    .demo-section {
      padding: 80px 0;
      position: relative;
      overflow: visible;
    }

    .demo-header {
      text-align: center;
      margin-bottom: 64px;
    }

    .section-label {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--zinc-500);
      margin-bottom: 12px;
    }

    .section-title {
      font-family: var(--font-heading);
      font-size: 85px;
      font-weight: 400;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1;
      margin-bottom: 20px;
    }

    .section-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      /* +10px on the regular size, per templates/blocks/section-heading.html */
      font-size: 95px;
      line-height: 1;
    }

    .section-desc {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      color: var(--zinc-500);
      max-width: 680px;
      margin: 0 auto;
    }

    /* ══════════════════════════════════════
       PLATFORM OVERVIEW
       Lives inside the white stacked panel, so cards reuse
       .about-panel .service-card for the grey treatment and .card-step-icon
       for the numbered double-icon header. Two cards, then one full-width
       card with copy left and visual right.
       ══════════════════════════════════════ */
    .platform-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .about-panel .platform-card--wide {
      grid-column: 1 / -1;
      display: grid;
      /* copy takes the bulk, and the visual gets a fixed width so its size does not
         drift with the card. The image is 3:1, and because it keeps that ratio it also
         sets the card's height, so this number is the lever for how tall the card is. */
      grid-template-columns: 1fr 600px;
      align-items: center;
      gap: 48px;
      /* no padding on the card itself: the copy carries its own, which lets the
         visual sit flush to the top, bottom and right edges */
      padding: 0;
    }

    /* keeps a floor under the gap when a description runs short */
    .about-panel .platform-copy { margin-bottom: 24px; }
    .about-panel .platform-card--wide .platform-copy {
      margin-bottom: 0;
      padding: var(--card-pad);
    }

    /* Screenshot slot. Empty for now; a <picture> or <img> dropped inside fills it
       without shifting layout, because the frame owns the aspect ratio.
       margin-top:auto pins it to the card bottom so slots align across a row. */
    .about-panel .platform-shot {
      margin-top: auto;
      aspect-ratio: 16 / 10;
      border-radius: 14px;
      background: #FFFFFF;
      border: 1px solid rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }

    /* Full-bleed variant: the visual runs to the card's left, right and bottom
       edges while the copy above keeps the card padding. margin-top is left alone
       so the existing auto still pins it to the bottom of the card. */
    .about-panel .platform-shot--bleed {
      margin-left: calc(-1 * var(--card-pad));
      margin-right: calc(-1 * var(--card-pad));
      margin-bottom: calc(-1 * var(--card-pad));
      border: none;
      border-radius: 0;
    }

    /* Flush to the card's top, bottom and right. The image's own 3:1 ratio is kept
       rather than stretching to the card height, because this visual is a diagram and
       object-fit: cover would crop the flow. So the image defines the card's height. */
    .about-panel .platform-card--wide .platform-shot {
      aspect-ratio: 3 / 1;
      margin: 0;
      width: 100%;
      border: none;
      border-radius: 0;
    }

    /* the img inside a <picture> is a grandchild, so it needs its own selector:
       a `> img` rule alone leaves the image at its intrinsic size */
    .platform-shot > picture,
    .platform-shot > img,
    .platform-shot > picture > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
    }


    @media (max-width: 1024px) {
      .platform-grid { grid-template-columns: 1fr; }
      .about-panel .platform-card--wide { grid-template-columns: 1fr; gap: 0; }
      .about-panel .platform-card--wide .platform-copy { margin-bottom: 0; padding: var(--card-pad); }
      .about-panel .platform-card--wide .platform-shot { justify-self: stretch; }
    }

    /* ══════════════════════════════════════
       AI INTELLIGENCE LAYER
       Five cards as 2 + 3: two across the top, then a tall visual card bottom left
       beside two more on the right. Reuses .about-panel .service-card for the grey
       treatment and .platform-shot for the visual slot.
       ══════════════════════════════════════ */
    .intel-section {
      padding: 80px 0;
      position: relative;
      z-index: 1;
    }

    /* Editorial header: title left, body right and vertically centred against it. Same
       pattern as the Key Numbers section, with two differences: the text is dark because
       this sits on the white panel, and the title keeps its two-line break rather than
       running nowrap, since ACCURATE BY DESIGN on one line would leave the body almost
       no width. */
    .intel-header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 64px;
      align-items: center;
      margin-bottom: 56px;
    }
    /* nowrap so the title holds one line on desktop even as the column narrows; the
       auto column then sizes to the full phrase and the body takes what is left */
    .intel-header .setup-title { text-align: left; margin-bottom: 0; white-space: nowrap; }
    /* Cormorant's italic leans right, so its last letter crowds the upright word that
       follows and the word space alone is not enough. In em units, so the gap tracks
       the title's font size through every breakpoint. */
    .intel-header .setup-title em { margin-right: 0.12em; }
    /* the box is pushed flush to the grid's right edge, lining up with the cards below,
       while the text inside it still reads left-aligned */
    .intel-header .intel-desc {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      color: #0a0a0a;
      text-align: left;
      max-width: 520px;
      margin: 0 0 0 auto;
    }

    .intel-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* one gap value everywhere, so the gutters stay even. The reference layout this
         follows has uneven ones; that was deliberately not copied. */
      gap: 24px;
    }

    /* The tall card SPANS rows 2 and 3, which is the only way its height can equal the
       two cards beside it at every width. A fixed pixel height cannot: it is measured at
       one viewport and the copy rewraps at others, so the two drift apart.
       For the span to work, rows 2 and 3 must be sized by those two cards, which means
       nothing inside the tall card may set a height floor. See min-height: 0 below. */
    .intel-grid > .service-card:nth-child(1) { grid-area: 1 / 1; }
    .intel-grid > .service-card:nth-child(2) { grid-area: 1 / 2; }
    /* stretch, not start: where the two cards beside it are taller than the artwork,
       the card fills the rows it spans instead of stopping at the image. The slot keeps
       the inherited margin-top: auto, so the extra height opens up between the copy and
       the illustration and the image stays pinned to the card's bottom edge. Where the
       artwork is the taller one, the rows grow to it and this is a no-op. */
    .intel-grid > .service-card:nth-child(3) { grid-area: 2 / 1 / 4 / 2; }  /* tall */
    .intel-grid > .service-card:nth-child(4) { grid-area: 2 / 2; }
    .intel-grid > .service-card:nth-child(5) { grid-area: 3 / 2; }

    /* The tall card spans the two right-hand cards, so its height comes from them.
       The visual then absorbs whatever is left below the copy, which is why the slot
       drops its aspect ratio here instead of setting its own height. */
    /* Small icon plus category label above a title. House eyebrow spec (13px, 600,
       uppercase, 1.5px tracking) recoloured to brand blue. Shared by the Accuracy First
       cards and the Magento Integration blocks; the class only appears where it is
       deliberately placed, so it is left unscoped rather than duplicated. */
    .card-eyebrow {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--blue);
    }
    .card-eyebrow-icon {
      display: flex;
      flex-shrink: 0;
    }
    .card-eyebrow-icon svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .about-panel .intel-card--tall {
      display: flex;
      flex-direction: column;
    }
    /* The illustration fills the card's width and its own ratio sets the height, so
       nothing here constrains either. That means the card is as tall as the artwork
       needs, rather than being sized to the two cards beside it. */
    .about-panel .intel-card--tall .platform-shot {
      aspect-ratio: auto;
      flex: none;
      min-height: 0;
      background: none;
      border: none;
      border-radius: 0;
    }
    .about-panel .intel-card--tall .platform-shot > picture,
    .about-panel .intel-card--tall .platform-shot > picture > img {
      display: block;
      width: 100%;
      /* auto, not 100%: the height has to come from the image's ratio. The shared
         .platform-shot rule stretches images to a fixed slot with object-fit cover,
         which would crop this diagram. */
      height: auto;
      object-fit: fill;
    }

    @media (max-width: 1024px) {
      /* stacked and centred, matching how the Key Numbers header collapses */
      .intel-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
      .intel-header .setup-title { text-align: center; white-space: normal; }
      .intel-header .intel-desc { text-align: center; margin: 0 auto; }
      .intel-grid { grid-template-columns: 1fr; }
      /* back to source order, one per row */
      .intel-grid > .service-card:nth-child(1),
      .intel-grid > .service-card:nth-child(2),
      .intel-grid > .service-card:nth-child(3),
      .intel-grid > .service-card:nth-child(4),
      .intel-grid > .service-card:nth-child(5) { grid-area: auto; }
      /* The illustration is dropped rather than shrunk. It is a dense diagram with
         three side-by-side tiers and a results table; at one-column width the labels
         and part numbers stop being legible, so it stops being information. */
      .about-panel .intel-card--tall .platform-shot { display: none; }
      /* and without it the copy would still carry its bottom margin, leaving the card
         with dead space the other four do not have */
      .about-panel .intel-card--tall .platform-copy { margin-bottom: 0; }
    }

    @media (max-width: 480px) {
      .intel-section { padding: 40px 0; }
    }

    /* ══════════════════════════════════════
       WHY ZESTIQ
       Bento inside the white stacked panel. Card 1 is full width with copy left and a
       visual right, card 3 is tall in the left column with its visual beneath the copy,
       and the four plain cards fill around them. Reuses .about-panel .service-card and
       .platform-shot rather than introducing new card styles.
       ══════════════════════════════════════ */
    .why-section {
      padding: 80px 0;
      position: relative;
      z-index: 1;
    }

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

    /* Explicit placement, so the DOM keeps the slide's 01 to 06 order while the two
       illustrated cards sit diagonally opposite: card 1 tall at top left, card 3 tall at
       bottom right, the four short cards filling around them. */
    .why-grid > .service-card:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }  /* tall */
    .why-grid > .service-card:nth-child(2) { grid-area: 1 / 2; }
    .why-grid > .service-card:nth-child(3) { grid-area: 3 / 2 / 5 / 3; }  /* tall */
    .why-grid > .service-card:nth-child(4) { grid-area: 2 / 2; }
    .why-grid > .service-card:nth-child(5) { grid-area: 3 / 1; }
    .why-grid > .service-card:nth-child(6) { grid-area: 4 / 1; }


    /* Tall card. Three things have to hold at once: the artwork must never crop, the
       card must still equal the two cards beside it, and those two must keep hugging
       their copy.
       The slot takes the artwork's exact ratio, so its height follows its width and the
       image is never cut. The card itself still stretches to the rows it spans, which is
       what keeps it equal to its neighbours. The difference between the two lands in the
       auto top margin, opening as space between the copy and the image rather than being
       forced onto either. flex: none is what stops the slot swallowing that difference. */
    .about-panel .why-card--tall {
      display: flex;
      flex-direction: column;
    }
    .about-panel .why-card--tall .platform-shot {
      aspect-ratio: 1408 / 458;
      flex: none;
      min-height: 0;
      margin-top: auto;
    }
    /* ratio matches the artwork exactly, so cover crops nothing */
    .about-panel .why-card--tall .platform-shot > picture,
    .about-panel .why-card--tall .platform-shot > picture > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* placeholders, visible against the white panel until the artwork lands. An image
       dropped in covers this, so it costs nothing later. */
    .about-panel .why-card--tall .platform-shot {
      background: rgba(0, 0, 0, 0.06);
      position: relative;
      overflow: hidden;
    }


    @media (max-width: 1024px) {
      .why-grid { grid-template-columns: 1fr; }
      .why-grid > .service-card:nth-child(1),
      .why-grid > .service-card:nth-child(2),
      .why-grid > .service-card:nth-child(3),
      .why-grid > .service-card:nth-child(4),
      .why-grid > .service-card:nth-child(5),
      .why-grid > .service-card:nth-child(6) { grid-area: auto; }
      /* the pinned ratio already governs the slot, and with nothing left to span the
         auto top margin has no slack to absorb, so the card simply hugs its content */
    }
    @media (max-width: 480px) {
      .why-section { padding: 40px 0; }
    }

    /* ══════════════════════════════════════
       MAGENTO INTEGRATION
       Two blocks, copy one side and a mockup panel the other, alternating. Chosen over a
       fourth grid of cards because Platform Overview, Accuracy First and Admin Panel are
       all card grids and the page needed a different beat here.
       ══════════════════════════════════════ */
    .mag-section {
      padding: 80px 0;
      position: relative;
      z-index: 1;
    }

    .mag-header { text-align: center; margin-bottom: 72px; }
    .mag-lede {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--white);
      max-width: 640px;
      margin: 16px auto 0;
    }

    .mag-block {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 64px;
      align-items: center;
    }
    .mag-block + .mag-block { margin-top: 80px; }
    /* order, not a column swap, so the copy still comes first in the DOM on both blocks
       and the reading order stays copy then visual */
    .mag-block--flip .mag-copy { order: 2; }

    /* The article H2, copied from .article-prose h2 in article.css: 40px, weight 500,
       title case, no italic accent, and it holds 40px at every breakpoint there so it
       needs no responsive steps here either. The one deviation is the top margin: the
       article's 64px separates an h2 from the paragraph above it, whereas this is the
       first element in its column. */
    .mag-block-title {
      font-family: var(--font-heading);
      font-size: 40px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.15;
      text-transform: none;
      letter-spacing: 0;
      /* wider than the article's 20px: the block title is a sentence here and needs
         clear separation from the first item, which carries its own icon */
      margin: 0 0 40px;
    }

    .mag-list { display: flex; flex-direction: column; gap: 32px; }
    /* Same shape as the Customer Experience accordion: icon and title on one row, the
       description on its own row beneath, flush left rather than indented past the icon. */
    .mag-item { display: flex; flex-direction: column; gap: 12px; }
    .mag-item-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .mag-item-title {
      font-family: var(--font-heading);
      font-size: 25px;
      font-weight: 600;
      line-height: 1.25;
      color: var(--white);
    }
    .mag-item-desc {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.55;
      color: var(--zinc-400);
    }

    /* Dark glass rather than the blue gradient, which is kept for the Admin and CTA
       panels. A faint blue bloom stops it reading as a flat grey box. */
    .mag-panel {
      position: relative;
      border-radius: 20px;
      border: 1px solid var(--dark-card-border);
      background:
        radial-gradient(circle at 70% 20%, rgba(48, 107, 255, 0.16) 0%, transparent 60%),
        rgba(24, 24, 27, 0.45);
      padding: 24px;
      overflow: hidden;
    }
    /* For panels holding a rendered image rather than inline artwork. The image carries
       its own background and floating cards, so the panel's padding and blue bloom would
       double-frame it. overflow: hidden on .mag-panel still clips it to the radius. */
    .mag-panel--shot { padding: 0; background: none; }
    .mag-panel--shot picture,
    .mag-panel--shot picture > img {
      display: block;
      width: 100%;
      height: auto;
    }

    .mag-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      /* sits under the lede now, so it needs the lede's spacing rather than the big
         gap it had when it closed the section */
      margin-top: 28px;
    }
    .mag-pill {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--white);
      padding: 8px 16px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.20);
    }

    @media (max-width: 1024px) {
      .mag-block { grid-template-columns: 1fr; gap: 40px; }
      /* order reset, so the copy leads on both blocks once they stack */
      .mag-block--flip .mag-copy { order: 0; }
      .mag-block + .mag-block { margin-top: 56px; }
      .mag-header { margin-bottom: 48px; }
    }
    @media (max-width: 480px) {
      .mag-section { padding: 40px 0; }
      .mag-panel { padding: 14px; }
      .mag-pills { margin-top: 20px; }
    }

    /* ══════════════════════════════════════
       ADMIN PANEL
       Blue panel, the same blue and radius as the Key Numbers result cards. Three
       columns: title plus CTA, then the eight items in two columns of four.
       ══════════════════════════════════════ */
    .admin-section {
      padding: 80px 0;
      position: relative;
      z-index: 1;
    }

    .admin-panel {
      /* same gradient as .cta-panel, so the two blue panels on the page match */
      background: linear-gradient(135deg, #3061F6, #1E2DAF);
      border-radius: 24px;
      padding: 56px 48px;
      display: grid;
      /* Title column sizes to its own glyphs, the two item columns split what is left.
         A fixed fr ratio cannot work here: the title needs about 450px at 64px and 590px
         at 85px, so any ratio that holds two lines at one breakpoint breaks at another. */
      grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
      /* the only gap this creates is intro to card list, since .admin-list spans
         columns 2 and 3 and the two card columns space themselves */
      column-gap: 96px;
      position: relative;
      overflow: hidden;
    }
    /* The same glow .cta-panel-glow carries, as a pseudo-element so it stays out of the
       grid flow instead of becoming a grid item. It also gives the cards' backdrop-filter
       something to soften: over a flat field of one colour the frosting reads as nothing
       more than a lighter tint. */
    .admin-panel::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 60%);
      pointer-events: none;
      filter: blur(80px);
    }
    /* Fine dot lattice behind everything. Two jobs: texture in the empty left half, and
       high-frequency detail for the cards' backdrop-filter to actually soften. The glow
       above only varies over hundreds of pixels, so blurring it changes almost nothing;
       a 22px lattice is the scale an 18px blur can visibly work on.
       ::after rather than a child element, so it stays out of the grid flow. */
    .admin-panel::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.6px);
      background-size: 22px 22px;
      pointer-events: none;
      /* Fades left to right: barely there behind the title and body copy, full strength
         behind the cards. The ramp reaches full by 44%, which is where the first card
         column starts (the copy column ends at 40%), so the cards are never in the
         fade and the copy is never out of it.
         The mask makes this element a backdrop root, which is harmless here because it
         is a sibling of the cards rather than an ancestor of them. */
      -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.30) 32%, #000 44%);
      mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.30) 32%, #000 44%);
    }

    /* .sr leaves transform: translateY(0) behind after the reveal, and any transformed
       ancestor makes Chrome sample the backdrop inside it, which kills the frosting on
       every card. Resetting to none on the revealed state is what keeps it working. */
    .admin-panel.vis { transform: none; }
    /* above the glows */
    .admin-intro,
    .admin-list { position: relative; z-index: 1; }

    .admin-intro {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
    }
    /* Size is left entirely to .section-title and its breakpoint steps. Only layout
       lives here, so the title stays on the standard scale.
       nowrap keeps each half on its own line, so the only break is the explicit one. */
    .admin-title { margin-bottom: 0; text-align: left; white-space: nowrap; }
    /* Capped well under the title's width on purpose. The title column is auto-sized to
       its max-content, so an uncapped paragraph here would widen the column and steal
       width from the two card columns. */
    .admin-desc {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.92);
      max-width: 400px;
    }

    /* align-self restated because .admin-intro is a flex column, where the button would
       otherwise stretch to full width. margin-top: auto drops it to the bottom of the
       column, which stretches to the item list's height, so the button lands on the
       panel's bottom padding line. Below 1024px the column is content-height, so the
       auto margin has no free space to absorb and the button simply follows the title. */
    .admin-intro .btn-cta { align-self: flex-start; margin-top: auto; }

    /* Column flow, not row flow: items 1 to 4 fill the first column and 5 to 8 the
       second, which is the order the slide reads in. Row flow would put items 1 and 2
       side by side instead. */
    .admin-list {
      grid-column: 2 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(4, auto);
      grid-auto-flow: column;
      column-gap: 10px;
      row-gap: 10px;
    }

    .admin-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.13);
      backdrop-filter: blur(18px) saturate(1.3);
      -webkit-backdrop-filter: blur(18px) saturate(1.3);
      /* 1px stroke, the same value the chat bubbles and the composer carry in their
         shared glass rule. box-shadow stays none: no inner highlight on these. */
      border: 1px solid rgba(255, 255, 255, 0.32);
      box-shadow: none;
    }
    .admin-icon {
      width: 40px;
      height: 40px;
      /* round, like .cx-icon in the accordion and the Magento item icons */
      border-radius: 50%;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .admin-icon svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: var(--blue);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .admin-item-title {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 700;
      line-height: 1.3;
      color: #FFFFFF;
    }
    .admin-item-desc {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.85);
      margin-top: 4px;
    }

    @media (max-width: 1280px) {
      .admin-panel { column-gap: 64px; }
      .admin-list { column-gap: 10px; }
    }
    @media (max-width: 1024px) {
      /* title above, items in two columns beneath it */
      .admin-panel { grid-template-columns: 1fr; row-gap: 40px; padding: 40px 32px; }
      /* h2-title-br is hidden at this width, so the phrase becomes one line and has to
         be allowed to wrap or it overflows */
      .admin-title { white-space: normal; }
      .admin-list { grid-column: 1 / -1; }
      .admin-intro { align-items: flex-start; }
    }
    @media (max-width: 768px) {
      /* one item per row: two columns leaves the descriptions too narrow to read */
      .admin-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
    }
    @media (max-width: 480px) {
      .admin-section { padding: 40px 0; }
      .admin-panel { padding: 28px 20px; }
    }

    /* ══════════════════════════════════════
       KEY NUMBERS
       Same component as the case study result cards, values copied verbatim from
       case-studies/catalyst-rent-reporting.html so the two stay identical.
       ══════════════════════════════════════ */
    .results-section { padding: 80px 0; position: relative; }

    /* Editorial header: title left, body right. Deliberately not reusing
       .compare-header, which only splits above 1800px and centres below that. */
    .results-header {
      display: grid;
      /* title column sizes to its own glyphs so the body gets the remaining width,
         which is what lets the body set in two lines rather than three */
      grid-template-columns: auto minmax(0, 1fr);
      gap: 64px;
      /* title and body centred against each other on the horizontal axis */
      align-items: center;
      margin-bottom: 56px;
    }
    .results-header .section-title { text-align: left; margin-bottom: 0; white-space: nowrap; }
    /* Body block sits flush to the grid's right edge, lining up with the cards below,
       but the text inside it reads left-aligned. The base .section-desc caps at 680px
       and auto-centres, so both are overridden: margin-left:auto pushes the box right,
       and the cap is wide enough to keep two lines but narrow enough that wide
       viewports do not collapse it to one. */
    .results-header .section-desc {
      text-align: left;
      max-width: 720px;
      margin: 0 0 0 auto;
      color: var(--white);
    }

    .results-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    /* --result-title drives both the title and the number, so the number is always
       exactly three times the title size */
    .result-card { --result-title: 22px; background: var(--blue); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; min-height: 300px; }
    .result-card-top { display: flex; align-items: center; justify-content: space-between; }
    .result-icon { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .result-icon svg { width: 24px; height: 24px; stroke: var(--blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .result-tag { font-family: var(--font-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #fff; padding: 8px 16px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.40); background: rgba(255,255,255,0.10); }
    /* No margin-top:auto here. Bottom-aligning the body made the gap above the number
       depend on how many lines the title wrapped to, so the three numbers sat at
       different heights. Top-aligning keeps the gap a fixed 32px on every card and
       lines the numbers up across the row. */
    .result-body { padding-top: 32px; }
    .result-num { font-family: var(--font-heading); font-size: calc(var(--result-title) * 3); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -2px; }
    .result-label { font-family: var(--font-heading); font-size: var(--result-title); font-weight: 700; color: #fff; margin-top: 10px; }
    .result-divider { height: 1px; background: rgba(255,255,255,0.25); margin: 24px 0 16px; }
    .result-desc { font-family: var(--font-heading); font-size: 16px; font-weight: 400; color: #fff; line-height: 1.5; }

    @media (max-width: 1280px) {
      .results-row { gap: 32px; }
    }
    @media (max-width: 1024px) {
      .results-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
      .results-header .section-title { text-align: center; }
      .results-header .section-desc { text-align: center; margin: 0 auto; }
    }
    @media (max-width: 768px) {
      .results-row { grid-template-columns: 1fr; gap: 40px; }
    }
    @media (max-width: 480px) {
      .results-section { padding: 40px 0; }
    }

    .demo-container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 16px;
      row-gap: 24px;
      align-items: start;
    }

    /* equal halves of the 12-column grid, so the cards and the chat match in width */
    .cx-list { grid-column: 1 / 7; }
    .demo-window { grid-column: 7 / 13; }

    /* Chat matches the card list's height rather than its own content height.
       height:0 keeps the chat out of the grid row-height calculation, so the card
       list alone defines the row; min-height:100% then fills it. The min-height:0
       on the flex children is what lets .chat-msgs actually scroll instead of
       pushing the window taller. */
    .demo-window { height: 0; min-height: 100%; }
    .demo-win-body { min-height: 0; }
    .chat-widget { min-height: 0; }

    .demo-sidebar {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* ══════════════════════════════════════
       CUSTOMER EXPERIENCE ACCORDION
       Eight capabilities, one open at a time so the column never grows taller than
       the chat window beside it. Auto-advances on a timer, see the JS at the foot of
       the page for the pause and reduced-motion rules.
       ══════════════════════════════════════ */
    .cx-list { display: flex; flex-direction: column; gap: 12px; }

    .cx-item {
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(24,24,27,0.45);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      overflow: hidden;
      transition: border-color 0.4s ease, background 0.4s ease;
    }

    .cx-item:hover { border-color: rgba(255,255,255,0.18); background: rgba(28,28,32,0.55); }

    .cx-item--open {
      border-color: var(--blue);
      background: rgba(48, 107, 255, 0.08);
    }

    /* Hovering the open item must not steal its blue outline. .cx-item:hover is
       (0,2,0) and .cx-item--open only (0,1,0), so hover wins on specificity no matter
       the source order. This restates the open state at equal specificity, placed
       after the hover rule so it wins on order. */
    .cx-item--open:hover {
      border-color: var(--blue);
      background: rgba(48, 107, 255, 0.08);
    }

    /* icon + title on the left, chevron on the right */
    .cx-head { display: flex; align-items: center; gap: 14px; min-width: 0; }

    /* 36px circle inside 18px padding keeps the row at the same 72px it was before
       the icons were added, which the height budget against the chat depends on */
    .cx-icon,
    .mag-item-icon,
    .compare-table .feature-name .cx-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--blue);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cx-icon svg,
    .mag-item-icon svg {
      width: 17px; height: 17px;
      stroke: #FFFFFF; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }

    .cx-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 18px 24px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.2;
      color: var(--white);
    }

    .cx-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

    .cx-chevron {
      flex-shrink: 0;
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.20);
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.4s var(--ease), border-color 0.3s ease;
    }
    .cx-chevron svg { width: 13px; height: 13px; }
    .cx-item--open .cx-chevron { transform: rotate(180deg); border-color: var(--blue); }

    /* collapsed by default; max-height is set from JS so it animates to real content height */
    .cx-panel {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.45s var(--ease);
    }

    .cx-desc {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--zinc-300);
      margin: 0 24px 18px;
    }

    /* dwell indicator for the auto-advance, width driven by the JS timer */
    .cx-progress { height: 2px; margin: 0 24px 20px; background: rgba(255,255,255,0.12); border-radius: 2px; }
    .cx-progress > span { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 2px; }
    .cx-item--open .cx-progress > span { transition: width 0.2s linear; }
    /* Hovering only freezes the dwell bar, it does not hide it: the JS stops adding
       to elapsed while paused but keeps the width it had, so it resumes from the same
       point on mouse-out. The grey track is always visible as a rule under the open
       card's text; the blue fill sits on top of it and only moves while the dwell is
       actually counting. */

    @media (prefers-reduced-motion: reduce) {
      .cx-panel { transition: none; }
      .cx-chevron { transition: none; }
      .cx-progress { display: none; }
    }

    @media (max-width: 768px) {
      .cx-btn { font-size: 19px; padding: 16px 20px; }
      .cx-head { gap: 12px; }
      .cx-icon { width: 32px; height: 32px; }
      .cx-icon svg { width: 15px; height: 15px; }
      .cx-desc { font-size: 16px; margin: 0 20px 16px; }
      .cx-progress { margin: 0 20px 16px; }
    }

    .demo-nav-btn {
      position: relative;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.10);
      padding: 32px;
      background: rgba(24,24,27,0.45);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      height: auto;
      overflow: hidden;
      transition: all 0.5s ease;
      cursor: pointer;
      color: var(--white);
      text-align: left;
      font-family: var(--font-heading);
      width: 100%;
    }

    .demo-nav-btn:hover {
      border-color: rgba(255,255,255,0.18);
      background: rgba(28,28,32,0.55);
    }

    .demo-nav-btn.active {
      border-color: var(--blue);
      background: rgba(48, 107, 255, 0.08);
    }

.demo-nav-btn .card-arrow-btn {
      position: absolute;
      top: 32px;
      right: 32px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.20);
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      transition: background 0.35s ease, border-color 0.35s ease;
      padding: 0;
    }

    .demo-nav-btn .card-arrow-btn svg {
      width: 22px;
      height: 22px;
      color: var(--white);
    }

    .demo-nav-btn:hover .card-arrow-btn,
    .demo-nav-btn.active .card-arrow-btn {
      background: var(--blue);
      border-color: var(--blue);
    }

    .demo-nav-btn .card-body {
      margin-top: auto;
    }

    .demo-nav-btn .card-title {
      font-family: var(--font-heading);
      font-size: 30px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .demo-nav-btn .card-title-icon {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
    }

    .demo-nav-btn .card-desc {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--white);
    }

    .demo-nav-btn .card-desc-short {
      display: none;
      font-family: var(--font-heading);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
      color: rgba(255,255,255,0.70);
    }

    .demo-nav-btn .card-body {
      padding-right: 62px;
    }

    .demo-window {
      position: relative;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      /* no fill and no backdrop blur: the photo is the background now */
      overflow: hidden;
      align-self: stretch;
      display: flex;
      flex-direction: column;
    }

    /* Blurred photo backdrop inside the chat window.
       The blur lives here rather than on backdrop-filter, because backdrop-filter
       blurs what is behind the element, not its own background.
       inset is negative so the blur has no soft edge at the window's rounded corners.
       Swap the image by changing both background-image lines: the plain url() first
       for browsers without image-set, then the WebP. */
    .demo-photo {
      position: absolute;
      inset: -12%;
      z-index: 0;
      pointer-events: none;
      background-image: url('img/AI Sales Agent/chat-background.jpg');
      background-image: image-set(url('img/AI Sales Agent/chat-background.webp') type('image/webp'),
                                  url('img/AI Sales Agent/chat-background.jpg') type('image/jpeg'));
      background-size: cover;
      background-position: center;
      filter: blur(var(--photo-blur));
      opacity: 1;
    }

    /* Transparent black dimmer over the photo. It paints inside .demo-photo, so it
       lands above the picture but below the chat, which means the bubbles'
       backdrop-filter samples the already dimmed and blurred image. Tune --photo-dim
       and --photo-blur on .demo-window. */
    .demo-photo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, var(--photo-dim));
      pointer-events: none;
    }

    /* chat chrome sits above both the photo and the dimmer */
    .demo-win-header,
    .demo-win-body { position: relative; z-index: 1; }

    .demo-win-header {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(48, 107, 255, 0.05);
    }

    .demo-win-dots {
      display: flex;
      gap: 8px;
    }

    .demo-win-dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
    }

    .demo-win-dots span:first-child { background: #ff5f56; }
    .demo-win-dots span:nth-child(2) { background: #ffbd2e; }
    .demo-win-dots span:nth-child(3) { background: #27c93f; }

    .demo-win-title {
      font-size: 13px;
      color: var(--zinc-400);
      margin-left: auto;
    }

    .demo-win-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--zinc-400);
    }

    .demo-win-badge .live {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .demo-win-body {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .demo-store-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      margin-bottom: 16px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 13px;
      color: var(--zinc-500);
      font-weight: 500;
    }

    .chat-widget {
      background: rgba(6, 8, 15, 0.5);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .chat-w-header {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, rgba(57, 74, 255, 0.12), rgba(48, 107, 255, 0.06));
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .chat-w-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3961D4, var(--blue));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: white;
    }

    .chat-w-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--white);
    }

    .chat-w-status {
      font-size: 10px;
      color: var(--zinc-500);
    }

    /* overflow is visible, not auto, deliberately. A scroll container becomes the
       backdrop root in Chrome, which left the bubbles' backdrop-filter sampling the
       scroller's transparent contents instead of the photo, so no blur rendered.
       The trade-off: the message list cannot scroll internally, so each conversation
       has to be short enough to fit the window. */
    .chat-msgs {
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      overflow: visible;
    }

    .c-msg {
      max-width: 85%;
    }

    .c-msg.agent { align-self: flex-start; }
    .c-msg.customer { align-self: flex-end; }

    .c-msg .sender {
      font-size: 10px;
      font-weight: 600;
      margin-bottom: 3px;
    }

    .c-msg.agent .sender { color: var(--blue); }
    .c-msg.customer .sender { color: var(--zinc-500); text-align: right; }

    .c-bubble {
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.55;
    }

    .c-bubble.a {
      background: rgba(48, 107, 255, 0.1);
      border: 1px solid rgba(48, 107, 255, 0.15);
      border-bottom-left-radius: 4px;
      color: var(--white);
    }

    .c-bubble.c {
      background: rgba(164, 232, 200, 0.07);
      border: 1px solid rgba(164, 232, 200, 0.1);
      border-bottom-right-radius: 4px;
      color: var(--white);
    }


    /* ── Chat over the photo: only the bubbles are opaque ──
       Every panel behind the messages is stripped so the photo shows through, and the
       chrome (window dots, store bar, agent header) is hidden because their text would
       sit directly on an arbitrary image with no reliable contrast. */
    .demo-win-header,
    .demo-store-bar,
    .chat-w-header { display: none; }

    .chat-widget {
      background: none;
      border: none;
      border-radius: 0;
    }

    /* 50px either side insets the whole chat so it reads as centred on the photo */
    .demo-win-body { padding: 18px 50px; }

    /* single source for the frosted blur, so the bubbles and the composer cannot drift */
    .demo-window { --glass-blur: 34px; --photo-blur: 10px; --photo-dim: 0.35; }

    /* Once revealed, clear the transform the scroll-reveal leaves behind.
       .sr.vis keeps transform: translateY(0), and a transformed ancestor makes Chrome
       sample the backdrop inside that ancestor, so every backdrop-filter inside this
       window, the bubbles and the composer, had nothing to blur. Declared after
       .sr.vis, which it matches on specificity, so source order decides. */
    .demo-window.vis { transform: none; }

    /* Messages sit at the bottom and grow upward, like a real chat.
       margin-top:auto on the first message rather than justify-content:flex-end,
       because flex-end can make the top of an overflowing list unreachable. */
    .chat-msgs > .c-msg:first-child { margin-top: auto; }

    /* Decorative composer pinned below the conversation. Frosted rather than solid
       white so it reads as chrome and not as another message. */
    .demo-ask {
      margin-top: 12px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 18px;
      border-radius: 9999px;
      font-family: var(--font-heading);
      font-size: 14px;
    }
    /* ONE definition of the glass, shared by the composer and the chat bubbles, so
       they cannot drift apart. Change it here and both move together. */
    .demo-ask,
    .c-bubble.a,
    .c-bubble.c {
      background: rgba(255, 255, 255, 0.20);
      backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
      border: 1px solid rgba(255, 255, 255, 0.32);
      color: rgba(255, 255, 255, 0.88);
    }

    /* Neon blue edge on the agent's replies only, so the AI side of the conversation
       reads as the branded one. Must stay after the shared glass rule above: both
       selectors are two classes, so the later one wins on source order alone. The
       glass properties themselves are untouched, only the border colour and the glow. */
    .c-bubble.a {
      border-color: rgba(48, 107, 255, 0.55);
      box-shadow: 0 0 0 1px rgba(48, 107, 255, 0.14),
                  0 0 14px rgba(48, 107, 255, 0.16),
                  inset 0 0 12px rgba(48, 107, 255, 0.05);
    }

    .demo-ask svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }

    /* Frosted glass, same treatment as the Ask anything input: translucent white over
       the photo with a blur behind it, so the image reads through the conversation. */
    .c-bubble.a,
    .c-bubble.c {
      border-radius: 16px;
      padding: 13px 18px;
      font-size: 14px;
    }

    /* sender name stays inside the bubble, where the frosted panel guarantees contrast
       rather than depending on whatever the photo happens to be behind it */
    .c-msg .sender { display: none; }
    .c-bubble .who {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: rgba(255, 255, 255, 0.70);
      margin-bottom: 4px;
    }

    /* AI sparkle mark, sized off the label and inheriting its colour */
    .c-bubble .who-ai {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      fill: currentColor;
    }

    /* product card, light-on-dark now that the bubble is glass rather than white */

    .product-chip {
      display: flex;
      gap: 10px;
      margin-top: 8px;
      padding: 10px;
      border-radius: 8px;
      /* heavier veil than the 0.03 this started at: the card has to read as a solid
         panel against the bubble's own 0.20 glass, not as a faint outline */
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.22);
    }

    /* The tile fills the card's height rather than setting it: a fixed width plus
       align-self stretch means the text block decides how tall the card is and the
       photo follows, so the 10px chip padding stays even on all four sides. Give the
       tile a width larger than the text block's height and it starts driving the
       height instead, growing the card. */
    .product-chip-img {
      width: 56px;
      height: auto;
      align-self: stretch;
      border-radius: 6px;
      background: linear-gradient(135deg, #1530a0, var(--blue));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      overflow: hidden;
    }

    /* the gradient above stays as the placeholder for chips that still use an emoji;
       a real photo fills the tile completely and crops rather than distorts */
    .product-chip-img picture,
    .product-chip-img img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .product-chip-info {
      font-size: 12px;
    }

    .product-chip-info .n {
      font-weight: 600;
      color: var(--white);
    }

    /* white, not tinted: this text sits over a photo, where --zinc-500 vanished
       completely against the lighter patches */
    .product-chip-info .p {
      color: #FFFFFF;
      font-weight: 700;
      margin-top: 1px;
    }

    .product-chip-info .d {
      color: #FFFFFF;
      margin-top: 1px;
    }

    /* Icon-only add-to-cart: the btn-cta-circle piece of the header.js component,
       reused as is. Only placement here, pushed to the far end of the card's flex row
       and centred against the photo. */
    .product-chip > .btn-cta-circle {
      margin-left: auto;
      align-self: center;
    }

    /* ══════════════════════════════════════
       COMPARISON TABLE
       ══════════════════════════════════════ */
    .compare-section {
      padding: 80px 0;
      position: relative;
      overflow: visible;
    }

    .compare-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 48px;
      margin-bottom: 48px;
    }

    .compare-table-wrap {
      width: 100%;
      overflow-x: auto;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(24,24,27,0.45);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .compare-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    .compare-table th, .compare-table td {
      padding: 18px 24px;
      text-align: left;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      color: var(--white);
    }

    .compare-table thead th {
      background: rgba(255, 255, 255, 0.04);
      color: var(--white);
      /* the divider colour documented for dark backgrounds, rather than solid white,
         which reads as a slab at 1px across the full table width */
      border-bottom-color: rgba(255, 255, 255, 0.30);
      font-weight: 600;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      position: sticky;
      top: 0;
    }

    .compare-table td .card-eyebrow-icon {
      display: inline-flex;
      vertical-align: -3px;
      margin-right: 8px;
    }
    .compare-table .feature-name .cx-icon {
      display: inline-flex;
      vertical-align: middle;
      margin-right: 12px;
    }

    /* Above 1280px there were no width rules, so columns sized to their content and the
       ZestIQ column came out narrow because its header is short. Fixed layout with an
       explicit split makes the four value columns equal. 32 + 4 x 17 = 100. */
    .compare-table { table-layout: fixed; }
    .compare-table th:first-child,
    .compare-table td:first-child { width: 32%; }
    .compare-table th:nth-child(n+2),
    .compare-table td:nth-child(n+2) { width: 17%; }
    /* tighter sides than the 24px the first column keeps: the values are centred, so the
       padding buys nothing, and the widest of them needs the room */
    .compare-table .compare-val,
    .compare-table thead th:not(:first-child) { padding-left: 12px; padding-right: 12px; }

    /* Vertical dividers, same hairline as the row rules so the grid reads as one system.
       Left border on every cell after the first, rather than right borders, which would
       leave a stray line down the table's outer edge. border-collapse is separate here,
       so nothing doubles up. */
    .compare-table th + th,
    .compare-table td + td {
      border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .compare-table .compare-val,
    .compare-table thead th:not(:first-child) {
      text-align: center;
    }

    .compare-table .feature-name {
      font-weight: 600;
      color: var(--white);
    }

    /* White band, at 0.07 rather than the 0.03 it started at, which was almost
       invisible. The header cell carries the class too, so the band runs the full column
       height rather than starting below the header. */
    .compare-table .zestiq-col {
      background: rgba(255, 255, 255, 0.07);
    }

    /* Values read muted by default. Blue marks a capability the column genuinely has,
       which is what the slide uses green for, so it appears on competitor categories too
       rather than only on the ZestIQ column. */
    .compare-table td.compare-val { color: var(--zinc-400); }
    .compare-table td.compare-val.is-yes { color: var(--blue); font-weight: 600; }

    /* ══════════════════════════════════════
       COMPLIANCE SECTION
       ══════════════════════════════════════ */
    .compliance-section {
      padding: 80px 0;
      position: relative;
      overflow: visible;
    }

    .compliance-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 1fr;
      gap: 24px;
    }

    .compliance-card {
      position: relative;
      padding: 32px;
      border-radius: 20px;
      background: rgba(24, 24, 27, 0.45);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.10);
      display: flex;
      flex-direction: column;
    }

    .compliance-card .card-3d {
      width: 120px;
      height: 120px;
      object-fit: contain;
      margin-bottom: 16px;
    }

    .compliance-card .card-body {
      padding-right: 0;
    }

    .compliance-card h3 {
      font-family: var(--font-heading);
      font-size: 30px;
      font-weight: 500;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .compliance-card p {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 400;
      color: var(--white);
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .compliance-badges {
      display: flex;
      gap: 12px;
      flex-wrap: nowrap;
      margin-top: auto;
    }

    .compliance-badge {
      padding: 6px 12px;
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: var(--zinc-400);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }
    .compliance-badge:nth-child(n+3) { display: none; }

    /* ══════════════════════════════════════
       LIVE CHAT SECTION
       ══════════════════════════════════════ */


    /* ── btn-cta component (from components.html) ── */
    .btn-cta {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      height: 70px;
      padding: 0 15px 0 40px;
      background: #ffffff;
      color: #0a0a0a;
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 700;
      text-decoration: none;
      border-radius: 9999px;
      cursor: pointer;
      gap: 20px;
      white-space: nowrap;
    }
    .btn-cta-label {
      display: block;
      white-space: nowrap;
      overflow: hidden;
    }
    .btn-cta-label span {
      display: block;
    }
    .btn-cta-circle {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: #306BFF;
      border: 2px solid #306BFF;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      transition: background 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .btn-cta-circle svg {
      width: 16px; height: 16px;
      display: block;
      stroke: #ffffff;
      transition: stroke 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .btn-cta-hover-active .btn-cta-circle {
      background: #ffffff;
      border-color: #306BFF;
    }
    .btn-cta-hover-active .btn-cta-circle svg {
      stroke: #306BFF;
    }
    .btn-cta-fwd .btn-cta-label span { animation: btn-cta-label-fwd 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
    .btn-cta-fwd .btn-cta-circle svg { animation: btn-cta-icon-fwd 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
    .btn-cta-bwd .btn-cta-label span { animation: btn-cta-label-bwd 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
    .btn-cta-bwd .btn-cta-circle svg { animation: btn-cta-icon-bwd 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
    @keyframes btn-cta-label-fwd {
      0%   { transform: translateY(0);     opacity: 1; }
      18%  { transform: translateY(115%);  opacity: 0; }
      21%  { transform: translateY(-115%); opacity: 0; }
      100% { transform: translateY(0);     opacity: 1; }
    }
    @keyframes btn-cta-label-bwd {
      0%   { transform: translateY(0);      opacity: 1; }
      18%  { transform: translateY(-115%);  opacity: 0; }
      21%  { transform: translateY(115%);   opacity: 0; }
      100% { transform: translateY(0);      opacity: 1; }
    }


    /* Chat highlight pulse */


    @keyframes pulse-green {
      0%, 100% { opacity: 1; box-shadow: 0 0 6px #4ade80; }
      50% { opacity: 0.6; box-shadow: 0 0 12px #4ade80; }
    }


    @keyframes lcwMsgIn {
      from { opacity: 0; transform: translateY(10px) scale(0.96); }
      to { opacity: 1; transform: none; }
    }


    @keyframes lcwDot {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
      30% { transform: translateY(-5px); opacity: 1; }
    }


    /* Visible keyboard focus (the base rule sets outline:none) */

    /* Visible keyboard focus (the rule above sets outline:none) */


    /* ══════════════════════════════════════
       CTA SECTION (FINAL)
       ══════════════════════════════════════ */
    .cta-section {
      padding: 80px 0;
    }

    .cta-panel-stack {
      position: relative;
      padding-top: 24px;
    }

    .cta-panel-stack::before {
      content: '';
      position: absolute;
      top: 0;
      left: 40px;
      right: 40px;
      height: 100%;
      border-radius: 24px;
      background: rgba(48, 107, 255, 0.12);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(48, 107, 255, 0.15);
    }

    .cta-panel-stack::after {
      content: '';
      position: absolute;
      top: 12px;
      left: 20px;
      right: 20px;
      height: calc(100% - 12px);
      border-radius: 24px;
      background: rgba(48, 107, 255, 0.18);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(48, 107, 255, 0.20);
    }

    .cta-panel {
      position: relative;
      z-index: 1;
      background: linear-gradient(135deg, #3061F6, #1E2DAF);
      border-radius: 24px;
      overflow: hidden;
      padding: 100px 48px 80px;
      text-align: center;
    }
    /* Dot lattice behind the panel copy. On ::before so it paints above the panel
       background but below .cta-content, which carries z-index 2. The mask is
       symmetric because the copy is centred: faint through the middle, full
       strength out at both edges. */
    .cta-panel::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1.6px);
      background-size: 22px 22px;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.16) 50%, #000 100%);
              mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.16) 50%, #000 100%);
    }

    .cta-marquee {
      background: transparent;
      padding: 18px 0;
      overflow: hidden;
      margin: -100px -48px 60px -48px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .cta-marquee-track {
      display: flex;
      gap: 40px;
      animation: cta-marquee-scroll 28s linear infinite;
      width: max-content;
    }

    .cta-marquee-item {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.55);
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .cta-marquee-dot {
      color: rgba(255, 255, 255, 0.35);
    }

    @keyframes cta-marquee-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .cta-panel-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 60%);
      pointer-events: none;
      filter: blur(80px);
    }

    .cta-content {
      position: relative;
      z-index: 2;
    }

    .cta-title {
      font-family: var(--font-heading);
      font-size: 85px;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 20px;
      line-height: 1;
      text-transform: uppercase;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-title em {
      font-family: var(--font-accent);
      font-style: italic;
      font-weight: 600;
      /* +10px on the regular size, per templates/blocks/section-heading.html */
      font-size: 95px;
      line-height: 1;
    }

    .cta-desc {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 400;
      color: var(--white);
      max-width: 680px;
      margin: 0 auto 40px;
      line-height: 1.5;
    }

    .cta-btn-group {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 16px 40px;
      border-radius: 9999px;
      background: var(--white);
      color: var(--blue);
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
    }

    .cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    .cta-btn.secondary {
      background: transparent;
      color: var(--white);
      border: 1px solid var(--white);
    }

    .cta-btn.secondary:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* ══════════════════════════════════════
       RESPONSIVE OVERRIDES
       ══════════════════════════════════════ */

    @media (max-width: 1800px) {
      :root { --gm: 140px; }
      .compare-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
      }
      .compare-header .section-title {
        text-align: center !important;
      }
      .compare-header .section-desc {
        text-align: center !important;
        margin: 0 auto !important;
        max-width: 860px !important;
      }
    }

    @media (max-width: 1600px) {
      :root { --gm: 100px; }

      .h2-title { font-size: 88px; }
      .h2-title em { font-size: 93px; }
      .h2-object { height: 470px; }
      .h2-gradient { width: 1000px; height: 1000px; }
      .h2-stat-num { font-size: 76px; }

      /* H2 section titles */
      .section-title, .setup-title, .cta-title { font-size: 72px; }
      .section-title em, .setup-title em, .cta-title em { font-size: 82px; }
    }

    @media (max-width: 1440px) {
      :root { --gm: 100px; }
      .h2-title { font-size: 80px; }
      .h2-title em { font-size: 85px; }
      .h2-object { height: 450px; }
      .h2-gradient { width: 1000px; height: 1000px; }
      .h2-stat-num { font-size: 72px; }
      .section-title, .setup-title, .cta-title { font-size: 64px; }
      .section-title em, .setup-title em, .cta-title em { font-size: 74px; }
    }

    @media (max-width: 1280px) {
      :root { --gm: 60px; }
      .h2-left { padding-bottom: 0; }
      .h2-bottom { padding-top: 40px; padding-bottom: 40px; }
      .h2-title { font-size: 72px; max-width: 1000px; }
      .h2-title em { font-size: 77px; }
      .h2-object { height: 370px; }
      .h2-gradient { width: 800px; height: 800px; }
      .h2-stat-num { font-size: 56px; }
      .section-title, .setup-title, .cta-title { font-size: 56px; }
      .section-title em, .setup-title em, .cta-title em { font-size: 66px; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .setup-inner .services-grid { grid-template-columns: repeat(3, 1fr); }
      .service-card { height: 380px; }
      .service-card:last-child { grid-column: 1 / -1; }
      .setup-inner .service-card:last-child { grid-column: auto; }
      .compliance-grid { grid-template-columns: repeat(2, 1fr); }
      .compare-table { table-layout: fixed; }
      .compare-table th:first-child, .compare-table td:first-child { width: 480px; }
      .compare-table th:nth-child(n+2), .compare-table td:nth-child(n+2) { width: 18%; }
      .demo-container { align-items: stretch; }
      .demo-window { align-self: stretch; }
      .demo-nav-btn { padding: 24px; }
      .demo-nav-btn .card-title { font-size: 24px; }
      .demo-nav-btn .card-desc { font-size: 17px; }
      .demo-nav-btn .card-arrow-btn { width: 44px; height: 44px; top: 24px; right: 24px; }
      .demo-nav-btn .card-arrow-btn svg { width: 18px; height: 18px; }
    }

    @media (max-width: 1024px) {
      :root { --gm: 40px; }
      .h2-wrap { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
      .h2-left { grid-column: 1; grid-row: 1; padding-bottom: 0; }
      .h2-right { grid-column: 1; grid-row: 2; padding-top: 0; padding-bottom: 0; justify-content: center; min-height: 300px; }
      .h2-divider { grid-column: 1; grid-row: 3; }
      .h2-bottom { grid-column: 1; grid-row: 4; grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; }
      .h2-bottom-right { grid-column: 1; justify-content: flex-start; gap: 32px; }
      .h2-title { font-size: 64px; }
      .h2-title em { font-size: 69px; }
      .h2-title-br { display: none; }
      .h2-object { height: 300px; }
      .h2-gradient { width: 600px; height: 600px; }
      .h2-stat-num { font-size: 48px; }
      .section-title, .setup-title, .cta-title { font-size: 48px; }
      .section-title em, .setup-title em, .cta-title em { font-size: 58px; }
      .services-grid { grid-template-columns: 1fr; }
      .setup-inner .services-grid { grid-template-columns: 1fr; }
      .service-card { height: auto; min-height: 300px; }
      .compliance-grid { grid-template-columns: repeat(2, 1fr); }
      .demo-container { grid-template-columns: 1fr; }
      .cx-list { grid-column: 1 / -1; }
      .demo-window { grid-column: 1 / -1; }
      .demo-nav-btn { flex: 1 1 0; min-width: 0; width: auto; }
      .demo-nav-btn .card-arrow-btn { display: none; }
      .demo-nav-btn .card-body { padding-right: 0; }
      .demo-nav-btn .card-desc { display: none; }
      .demo-nav-btn .card-desc-short { display: block; }
      .demo-nav-btn .card-title { flex-direction: column; align-items: flex-start; gap: 8px; }
      .demo-nav-btn .card-body { margin-top: 0; }
    }

    @media (max-width: 768px) {
      :root { --gm: 24px; }
      .h2-left { padding-bottom: 0; }
      .h2-right { min-height: 240px; }
      .h2-bottom { padding-top: 28px; padding-bottom: 28px; }
      .h2-title { font-size: 68px; margin-bottom: 32px; }
      .h2-title em { font-size: 73px; }
      .h2-object { height: 200px; }
      .h2-gradient { width: 500px; height: 500px; }
      .section-title, .setup-title { font-size: 60px; }
      .section-title em, .setup-title em { font-size: 70px; }
      .h2-stat-num { font-size: 40px; }
      .section-desc { font-size: 18px; }
      .card-title { font-size: 28px; }
      .card-desc { font-size: 15px; }
      .demo-nav-btn .card-desc { font-size: 17px; }
      .compare-table th:first-child, .compare-table td:first-child { width: 380px; }
      .compliance-badges { display: none; }
      .demo-sidebar { gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
      .demo-nav-btn { flex: 0 0 170px; min-width: 170px; }
      .demo-window { width: calc(100vw - 2 * var(--gm)); max-width: calc(100vw - 2 * var(--gm)); }
      .cta-title { font-size: 68px; }
      .cta-title em { font-size: 78px; }
      .cta-panel { padding: 60px var(--gm); }
      .cta-marquee { margin: -60px calc(-1 * var(--gm)) 32px calc(-1 * var(--gm)); padding: 12px 0; }
      .cta-panel-stack::before { left: 16px; right: 16px; }
      .cta-panel-stack::after { left: 8px; right: 8px; }
    }

    @media (max-width: 640px) {
      .h2-title { font-size: 63px; }
      .h2-title em { font-size: 68px; }
      .section-title, .setup-title { font-size: 56px; }
      .section-title em, .setup-title em { font-size: 66px; }
      .cta-title { font-size: 63px; }
      .cta-title em { font-size: 73px; }
    }

    @media (max-width: 480px) {
      :root { --gm: 16px; }
      .h2-left { padding-top: 184px; padding-bottom: 0; }
      .h2-right { min-height: 180px; }
      .h2-bottom { padding-top: 24px; padding-bottom: 24px; }
      .h2-title { font-size: 58px; }
      .h2-title em { font-size: 63px; }
      .h2-object { height: 140px; }
      .h2-gradient { width: 360px; height: 360px; }
      .h2-stat-num { font-size: 40px; }
      .section-title, .setup-title { font-size: 52px; }
      .section-title em, .setup-title em { font-size: 62px; }
      body { font-size: 16px; }
      .card-title { font-size: 24px; }
      .cta-title { font-size: 58px; }
      .cta-title em { font-size: 68px; }
      .cta-panel { padding: 48px var(--gm); }
      .cta-marquee { margin: -48px calc(-1 * var(--gm)) 24px calc(-1 * var(--gm)); }
      .cta-btn-group { flex-direction: column; }
      .cta-btn { width: 100%; }
      .compare-table th:first-child, .compare-table td:first-child { width: 190px; }
      .compare-table th:nth-child(n+2), .compare-table td:nth-child(n+2) { width: 90px; }
      .compare-table th:last-child, .compare-table td:last-child { width: 110px; }
      .compliance-grid { grid-template-columns: 1fr; gap: 16px; }
      .compliance-badges { display: none; }
      .compliance-card { overflow: hidden; max-width: 100%; padding: 24px; }
      /* Reduce section padding on small mobile — matches sandbox2 */
      .platform-section, .demo-section, .compare-section, .compliance-section,
      .cta-section { padding: 40px 0; }
    }

    /* ══════════════════════════════════════
       MARQUEE TICKER
       ══════════════════════════════════════ */
    .marquee-section {
      padding: 20px 0;
      margin: 80px 0;
      overflow: hidden;
      border-top: 1px solid rgba(255,255,255,0.30);
      border-bottom: 1px solid rgba(255,255,255,0.30);
    }
    .marquee-track {
      display: flex;
      gap: 48px;
      animation: marquee-scroll 30s linear infinite;
      width: max-content;
    }
    @keyframes marquee-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .marquee-item {
      font-family: var(--font-heading);
      font-size: 20px;
      font-weight: 600;
      color: rgba(255,255,255,0.8);
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .marquee-dot {
      color: var(--blue);
      opacity: 1;
    }
    @media (max-width: 1024px) {
      .marquee-section { margin: 60px 0; }
      .marquee-item { font-size: 18px; }
    }
    @media (max-width: 768px) {
      .marquee-section { margin: 50px 0; padding: 16px 0; }
      .marquee-track { gap: 36px; }
      .marquee-item { font-size: 16px; letter-spacing: 1.5px; }
    }
    @media (max-width: 480px) {
      .marquee-section { margin: 40px 0; padding: 12px 0; }
      .marquee-track { gap: 28px; }
      .marquee-item { font-size: 14px; letter-spacing: 1px; }
    }
  
    /* ── FAQ ── */
    /* FAQ — mirrors the AI Site Audit page FAQ exactly */
    /* No background here on purpose: body already paints var(--dark), and an opaque
       background would chop the preceding section's gradient where it bleeds down. */
    .faq-section { padding: 100px 0; position: relative; }
    .faq-list { margin: 56px 0 0; display: flex; flex-direction: column; }
    .faq-item { border-bottom: 1px solid rgba(255,255,255,0.10); }
    .faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.10); }
    .faq-btn {
      width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
      padding: 24px 0; background: none; border: none; cursor: pointer; text-align: left;
      font-family: var(--font-heading, 'DM Sans', sans-serif);
      font-size: 20px; font-weight: 500; color: var(--white, #fff);
    }
    .faq-btn:hover { color: var(--zinc-300, #d4d4d8); }
    .faq-icon {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.20);
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.3s var(--ease, cubic-bezier(0.16,1,0.3,1)), border-color 0.3s ease;
    }
    .faq-btn[aria-expanded="true"] .faq-icon { transform: rotate(180deg); border-color: rgba(255,255,255,0.40); }
    .faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease, cubic-bezier(0.16,1,0.3,1)); }
    .faq-answer p {
      padding-bottom: 24px; margin: 0; max-width: 760px;
      font-family: var(--font-heading, 'DM Sans', sans-serif); font-size: 17px; line-height: 1.7; color: var(--zinc-300, #d4d4d8);
    }
    .faq-answer code {
      font-family: ui-monospace, Menlo, monospace; font-size: 14px;
      background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 5px; color: #d4d4d8;
    }
    @media (max-width: 768px) {
      .faq-section { padding: 64px 0; }
    }

/* Breadcrumbs — top-left of the hero (matches case study) */
.breadcrumbs { align-self: flex-start; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; font-family: var(--font-heading); font-size: 16px; font-weight: 500; color: var(--zinc-400); margin: 0 0 66px 0; position: relative; z-index: 2; text-align: left; min-width: 0; max-width: 100%; }
.breadcrumbs a { color: var(--zinc-400); transition: color 0.3s ease; flex-shrink: 0; white-space: nowrap; }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumb-sep { color: rgba(255,255,255,0.30); flex-shrink: 0; }
.breadcrumb-current { color: var(--white); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .breadcrumbs { font-size: 14px; gap: 8px; margin-bottom: 40px; } }

/* Breadcrumb: 130px from top, header-edge aligned, compact 24px block */
#hero-main { position: relative; }
#hero-main > .breadcrumbs { position: absolute; top: 130px; left: 0; right: 0; margin: 0 auto; max-width: var(--mw, 1920px); padding: 0 var(--gm, 196px); height: 24px; z-index: 3; }
/* 20px gap between breadcrumb and page title */
#hero-main .h2-title { margin-top: 20px; }

    /* Decorative gradients moved from <img> to CSS backgrounds (a11y-correct, clears Ahrefs missing-alt) */
    .h2-hero-gradient, .section-gradient {
      background-image: url("img/Blue gradient 1.png");
      background-image: image-set(url("img/Blue gradient 1.webp") type("image/webp"), url("img/Blue gradient 1.png") type("image/png"));
      background-repeat: no-repeat; background-position: center; background-size: contain;
    }

    /* Checkmark markers moved from <img> to CSS backgrounds (a11y-correct, clears Ahrefs missing-alt) */
    .ck-icon {
      display: inline-block; width: 24px; height: 24px; flex-shrink: 0;
      background-image: url("img/Checkmark.svg");
      background-repeat: no-repeat; background-position: center; background-size: contain;
      filter: brightness(0) invert(1);
    }