/* ==========================================================================
   PAGE — delivery (delivery.html)
   Lifted from preview/delivery/style.css. Every selector is
   already namespaced, so it cannot reach the other two pages.
   ========================================================================== */



/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* Brand */
  --delivery-gold:         #FFC600;  /* eyebrows, accent rules, nav active */
  --delivery-gold-bright:  #FFC905;  /* the highlighted word in the hero */
  --delivery-disc:         #FDE39B;  /* icon discs */

  /* Dark surfaces */
  --delivery-hero-bg:      #060F1E;
  --delivery-kai-bg:       #0A1424;  /* shows while the band photo loads */

  /* Text */
  --delivery-ink:          #272729;  /* body copy */
  --delivery-ink-strong:   #282525;  /* products heading */
  --delivery-ink-deep:     #0F0F35;  /* capabilities heading */
  --delivery-ink-intro:    #1C1C1C;  /* products intro line */
  --delivery-tile-title:   #333333;
  --delivery-tile-body:    #8C8585;
  --delivery-on-dark:      #FFFFFF;
  --delivery-on-dark-dim:  #D7D7D7;

  /* Light surfaces */
  --delivery-panel:        #F4F7FC;  /* the overview panel */
  --delivery-card-bg:      #F6F6F6;
  --delivery-card-border:  #DEDEDE;
  --delivery-band:         #FAFAFA;  /* products section band */
  --delivery-tile-light:   #FDFDFD;
  --delivery-tile-cream:   #FDF9EA;
  --delivery-hairline:     #F1F1F1;
  --delivery-rule-pale:    #FDFDFD;  /* see .delivery-rule--pale */

  /* Type */
  --delivery-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --delivery-font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --delivery-font-alt:     'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Geometry */
  --delivery-max:       1240px;   /* content width, gutter excluded — as Figma */
  --delivery-gutter:    20px;     /* matches --site-gutter at every width */
  --delivery-radius:    10px;
  --delivery-disc-size: 51px;

  /* Must stay in step with --monk-header-h in the theme's style.css. */
  --delivery-header-h:  76px;
}


/* ==========================================================================
   PAGE SHELL
   ========================================================================== */

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

.delivery-page {
  /* Clears the theme's fixed header. functions.php adds
     `monk-figma-template` to <body>, which stands the theme's generic
     .monk-main offset down so this is the only offset applied. */
  padding-top: var(--delivery-header-h);
  font-family: var(--delivery-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--delivery-ink);
  /* Counts the break opportunity when computing min-content width, which is
     what actually keeps long words out of the horizontal scrollbar. */
  overflow-wrap: anywhere;
}

.delivery-page h2,
.delivery-page h3,
.delivery-page p {
  margin: 0;
}

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

.delivery-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The gutter sits outside the 1240px content, as on every other page. It
   used to be inside a 1232px box with a fixed 16px gutter, which left the
   content 1200px wide and 113px in from the edge at 1440 (Figma: 100px). */
.delivery-container {
  width: 100%;
  max-width: calc(var(--delivery-max) + var(--delivery-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--delivery-gutter);
}

@media (min-width: 480px) {
  :root { --delivery-gutter: 24px; }
}

@media (min-width: 768px) {
  /* Same ramp as --site-gutter: 32px at 768 → 100px at 1440, then holds. */
  :root { --delivery-gutter: clamp(32px, 10.119vw - 45.71px, 100px); }
}

.delivery-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   SHARED — eyebrow + accent rule
   ========================================================================== */

.delivery-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--delivery-font-display);
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.8886rem + 0.2174vw, 1.0625rem);
  line-height: 1.5;
  color: var(--delivery-gold);
}

.delivery-rule {
  flex: 0 0 auto;
  width: 40px;
  height: 2px;
  background: currentColor;
}

/* The Figma draws this one rule in #FDFDFD on a white background, so it is
   invisible by design. Reproduced faithfully rather than "corrected" — flip
   it to var(--delivery-gold) if that was a slip. */
.delivery-rule--pale {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--delivery-rule-pale);
}


/* ==========================================================================
   1. HERO
   ========================================================================== */

/* Hero band — identical geometry on Publishing, Delivery, AI Licensing and
   KAI: same top padding (so the eyebrow and headline start at the same
   height on every page) and the same fixed band height per breakpoint,
   ending at the Figma's 488px from 1024 up. Padding-bottom is only a floor;
   min-height sets the band. Keep all four in step. */
.delivery-hero {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  padding-block: 56px;
  color: var(--delivery-on-dark);
  background-color: var(--delivery-hero-bg);
  /* The amber glow behind the headline — a radial gradient in the Figma,
     centred at 50% 20% with the reach taken from its gradientTransform. */
  background-image: radial-gradient(
    104.5% 91.1% at 50% 20%,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(245, 158, 11, 0) 70%
  );
}

@media (min-width: 768px) {
  .delivery-hero { min-height: 440px; padding-top: 88px; }
}

@media (min-width: 1024px) {
  .delivery-hero { min-height: 488px; padding-top: 113px; }
}

.delivery-hero-title {
  max-width: 17em;
  margin: 14px 0 10px;
  font-family: var(--delivery-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
  line-height: 1.25;
  color: var(--delivery-on-dark);
}

.delivery-hl {
  color: var(--delivery-gold-bright);
}

/* Match the Publishing hero's rhythm: 16px eyebrow → title → lead, lead at
   1.44 line-height. Scoped under .delivery-hero (0,2,0) because the page's
   `.delivery-page h2 / p { margin: 0 }` reset (0,1,1) otherwise strips these
   margins and runs all three lines together. */
.delivery-hero .delivery-hero-title {
  margin: 16px 0 0;
}

.delivery-hero .delivery-hero-sub {
  margin-top: 16px;
  line-height: 1.44;
}

.delivery-hero-sub {
  max-width: 692px;
  font-family: var(--delivery-font-alt);
  font-size: clamp(1rem, 0.9565rem + 0.1932vw, 1.125rem);
  line-height: 1.67;
  color: var(--delivery-on-dark);
}


/* ==========================================================================
   PRODUCT TABS — the five Delivery product pages, under the banner.
   Sticky below the fixed header; a sideways-scrolling row on small screens.
   ========================================================================== */

.delivery-tabs {
  position: sticky;
  top: var(--delivery-header-h);
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #ECEBE6;
  box-shadow: 0 8px 18px -14px rgba(15, 15, 53, .28);
}

.delivery-tabs .delivery-tabs-list {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.delivery-tabs-list::-webkit-scrollbar {
  display: none;
}

/* While the row scrolls, a soft fade on the right edge hints at more tabs. */
@media (max-width: 1023.98px) {
  .delivery-tabs .delivery-tabs-list {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 32px;
  }
}

.delivery-tabs-list li {
  flex: 0 0 auto;
}

.delivery-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 18px;
  font-family: var(--delivery-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--delivery-ink-deep);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}

.delivery-tab svg {
  flex: 0 0 auto;
  color: #A06F00;
  transition: transform .25s ease;
}

/* Gold underline that draws in from the centre on hover / focus. */
.delivery-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--delivery-gold);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.delivery-tab:hover,
.delivery-tab:focus-visible {
  background: #FFFBEF;
}

.delivery-tab:hover::after,
.delivery-tab:focus-visible::after {
  transform: scaleX(1);
}

.delivery-tab:hover svg,
.delivery-tab:focus-visible svg {
  transform: translateY(-1px) scale(1.08);
}

.delivery-tab:focus-visible {
  outline: 2px solid var(--delivery-gold);
  outline-offset: -2px;
}

/* Wide enough for all five in one row: spread them across the content. */
@media (min-width: 1024px) {
  .delivery-tabs .delivery-tabs-list {
    justify-content: space-between;
    overflow-x: visible;
  }

  .delivery-tab {
    font-size: 16px;
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-tab::after,
  .delivery-tab svg {
    transition: none;
  }
}


/* ==========================================================================
   2. WHAT DELIVERY DOES
   ========================================================================== */

.delivery-intro {
  padding-block: clamp(48px, 7vw, 102px) clamp(48px, 7vw, 100px);
}

.delivery-intro-grid {
  display: grid;
  gap: 40px;
  align-items: start;
}

/* --- Left column: the three benefit rows --- */

.delivery-benefits {
  display: grid;
  gap: 31px;
  margin-top: 15px;
}

.delivery-benefit {
  position: relative;
  display: grid;
  grid-template-columns: var(--delivery-disc-size) minmax(0, 1fr);
  gap: 19px;
  align-items: start;
}

/* The hairline between rows. It starts at the copy, not at the disc,
   exactly as the Figma draws it. */
.delivery-benefit + .delivery-benefit::before {
  content: "";
  position: absolute;
  top: -10px;
  left: calc(var(--delivery-disc-size) + 19px);
  right: 0;
  border-top: 1px solid var(--delivery-hairline);
}

.delivery-benefit-icon {
  display: grid;
  place-items: center;
  width: var(--delivery-disc-size);
  height: var(--delivery-disc-size);
  border-radius: 50%;
  background: var(--delivery-disc);
}

.delivery-benefit-icon img {
  width: auto;
  max-width: 22px;
  max-height: 21px;
}

.delivery-benefit-text {
  font-size: 16px;
  line-height: 1.42;
  color: var(--delivery-ink);
}

.delivery-overview {
  margin-top: 28px;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 2.8vw, 30px);
  background: var(--delivery-panel);
  border-radius: var(--delivery-radius);
}

.delivery-overview p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--delivery-ink);
}

/* --- Right column: three summary cards + the product screenshot --- */

.delivery-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
}

.delivery-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 144px;
  padding: 15px 16px;
  background: var(--delivery-card-bg);
  border: 1px solid var(--delivery-card-border);
  border-radius: var(--delivery-radius);
}

.delivery-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 51px;
  border-radius: 50%;
  background: var(--delivery-disc);
}

.delivery-card-icon img {
  width: auto;
  max-width: 28px;
  max-height: 37px;
}

.delivery-card-text {
  font-size: 16px;
  line-height: 1.45;
  color: var(--delivery-ink);
}

.delivery-shot {
  margin: 19px 0 0;
}

.delivery-shot img {
  width: 100%;
  aspect-ratio: 705 / 355;
  object-fit: cover;
  border-radius: var(--delivery-radius);
  box-shadow: 0 0 15px -2px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   3. POWERED BY KAI
   ========================================================================== */

.delivery-kai {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 11.3vw, 162px) clamp(56px, 11.7vw, 168px);
  color: var(--delivery-on-dark);
  background-color: var(--delivery-kai-bg);
}

.delivery-kai-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* The Figma crops this photo slightly above centre. */
  object-position: 50% 45%;
}

/* NOT in the Figma. The band is white text over a photograph, and the crop
   moves as the viewport narrows, so this keeps the copy legible at every
   width. Delete this rule to return to the raw photo. */
.delivery-kai::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(4, 10, 20, 0.62) 0%,
    rgba(4, 10, 20, 0.34) 55%,
    rgba(4, 10, 20, 0.08) 100%
  );
}

.delivery-kai-title {
  margin: 14px 0 12px;
  font-family: var(--delivery-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
  line-height: 1.2;
  color: var(--delivery-on-dark);
}

.delivery-kai-desc {
  max-width: 765px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--delivery-on-dark-dim);
}

.delivery-kai-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(24px, 3.8vw, 55px);
  padding: 6px 0;
  font-family: var(--delivery-font-display);
  font-weight: 700;
  font-size: clamp(1rem, 0.9565rem + 0.1932vw, 1.125rem);
  line-height: 1.4;
  color: var(--delivery-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.delivery-kai-link:hover,
.delivery-kai-link:focus-visible {
  color: var(--delivery-gold);
}

.delivery-kai-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.delivery-kai-link:hover .delivery-kai-arrow,
.delivery-kai-link:focus-visible .delivery-kai-arrow {
  transform: translateX(4px);
}


/* ==========================================================================
   4. SPECIALIZED CAPABILITIES
   ========================================================================== */

.delivery-agents {
  padding-block: clamp(48px, 6.7vw, 97px) clamp(40px, 3.3vw, 47px);
  text-align: center;
}

/* With the dark "Powered by KAI" band removed, this section follows the white
   intro directly; drop its top padding so the two paddings don't stack into
   a double-height gap. */
.delivery-intro + .delivery-agents {
  padding-top: 0;
}

.delivery-agents-title {
  max-width: 854px;
  margin-inline: auto;
  text-align: center;   /* Figma centres the title and its subline over the graphic */
  font-family: var(--delivery-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
  line-height: 1.2;
  color: var(--delivery-ink-deep);
}

/* Scoped under the section so these win over the `.delivery-page h2` /
   `.delivery-page p { margin: 0 }` reset (0,1,1), which otherwise strips the
   auto margins and leaves both lines pinned to the left edge. */
.delivery-agents .delivery-agents-title {
  margin-inline: auto;
}

.delivery-agents .delivery-agents-sub {
  margin: 10px auto 0;
}

.delivery-agents-sub {
  max-width: 640px;
  margin: 10px auto 0;
  text-align: center;
  font-family: var(--delivery-font-display);
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.8886rem + 0.2174vw, 1.0625rem);
  line-height: 1.5;
  color: var(--delivery-gold);
}

/* --- The eight capabilities around the animated AI core ------------------
   Live HTML + SVG (it used to be one flat image). Mobile first: the core on
   top, the cards in a grid under it, no wires. From 1200px the stage takes a
   fixed 1200:520 shape; the wire SVG shares that coordinate space, and the
   cards and core are placed in it by percentage, so every wire lands on its
   card and on the ring at any width. */

.delivery-agents-stage {
  position: relative;
  /* Same content box as .delivery-container: 1240px max, page gutter each side. */
  width: min(var(--delivery-max), 100% - var(--delivery-gutter) * 2);
  margin: clamp(28px, 3.5vw, 48px) auto 0;
  text-align: left;
}

.delivery-agents-wires {
  display: none;
}

.delivery-ai {
  width: min(260px, 70vw);
  margin: 0 auto 28px;
}

.delivery-ai-core {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.delivery-agents-stage .delivery-agents-list {
  display: grid;
  gap: 12px;
}

.delivery-agents-stage .delivery-agents-list + .delivery-agents-list {
  margin-top: 12px;
}

.delivery-agent {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid #ECEBE6;
  border-radius: 14px;
  box-shadow: 0 4px 14px -6px rgba(15, 15, 53, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.delivery-agent:hover {
  transform: translateY(-2px);
  border-color: var(--delivery-gold);
  box-shadow: 0 10px 22px -10px rgba(237, 176, 0, 0.45);
}

.delivery-agent-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #A06F00;
  background: #FDF3D6;
}

.delivery-agent-label {
  font-family: var(--delivery-font-display);
  font-weight: 500;
  font-size: clamp(1rem, 0.93rem + 0.3vw, 1.1875rem);
  line-height: 1.3;
  color: var(--delivery-ink-deep);
}

/* The core: glow, two pulses, a rotating dashed ring with orbiting dots,
   an inner ring, and the chip with its pins and gold "AI". */

.delivery-ai-glow {
  animation: delivery-ai-breathe 4s ease-in-out infinite;
  transform-origin: 170px 170px;
}

.delivery-ai-pulse {
  fill: none;
  stroke: #FFC600;
  stroke-width: 2;
  opacity: 0;
  transform-origin: 170px 170px;
  animation: delivery-ai-pulse 3.6s ease-out infinite;
}

.delivery-ai-pulse--late {
  animation-delay: 1.8s;
}

.delivery-ai-ring {
  fill: none;
  stroke: #E9C25A;
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
  transform-origin: 170px 170px;
  animation: delivery-ai-spin 40s linear infinite;
}

.delivery-ai-ring--inner {
  stroke: rgba(233, 194, 90, 0.55);
  stroke-dasharray: none;
  animation: none;
}

.delivery-ai-orbit {
  fill: #FFC600;
  transform-origin: 170px 170px;
  animation: delivery-ai-spin 14s linear infinite;
}

.delivery-ai-pins {
  stroke: #D9A400;
  stroke-width: 3;
  stroke-linecap: round;
}

.delivery-ai-chip {
  stroke: #FFC600;
  stroke-width: 2;
  filter: drop-shadow(0 10px 18px rgba(6, 15, 30, 0.35));
}

.delivery-ai-chip-edge {
  fill: none;
  stroke: rgba(255, 198, 0, 0.28);
  stroke-width: 1;
}

.delivery-ai-trace {
  fill: none;
  stroke: rgba(255, 198, 0, 0.45);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delivery-ai-text {
  font-family: var(--delivery-font-display);
  font-weight: 800;
  font-size: 62px;
  letter-spacing: 1px;
  animation: delivery-ai-flicker 5s ease-in-out infinite;
}

/* The wires: a faint base line, and a short bright streak that runs along it
   toward the core, staggered per wire by --d. */

.delivery-wire {
  fill: none;
  stroke: #E3C06A;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.delivery-wire-pulse {
  fill: none;
  stroke: #FFC600;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 26 420;
  stroke-dashoffset: 446;
  vector-effect: non-scaling-stroke;
  animation: delivery-wire-flow 3.6s linear infinite;
  animation-delay: var(--d, 0s);
}

.delivery-wire-dot {
  fill: #C9920A;
}

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

@keyframes delivery-ai-breathe {
  0%, 100% { opacity: 0.75; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

@keyframes delivery-ai-pulse {
  0%   { opacity: 0.55; transform: scale(0.9); }
  100% { opacity: 0;    transform: scale(1.9); }
}

@keyframes delivery-ai-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.86; }
}

@keyframes delivery-wire-flow {
  0%   { stroke-dashoffset: 446; opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (min-width: 600px) {
  .delivery-agents-stage .delivery-agents-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .delivery-agents-stage {
    aspect-ratio: 1200 / 520;
  }

  .delivery-agents-wires {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Core centred on (600, 260) with the ring's 165 radius: its 340-unit
     box spans 430–770 x 90–430 of the 1200 x 520 stage. */
  .delivery-ai {
    position: absolute;
    left: 35.8333%;
    top: 17.3077%;
    width: 28.3333%;
    margin: 0;
  }

  .delivery-agents-stage .delivery-agents-list {
    display: block;
  }

  .delivery-agents-stage .delivery-agents-list + .delivery-agents-list {
    margin-top: 0;
  }

  /* Each card is centred on its wire's end: x 0–360 or 840–1200, y 70 / 190
     / 310 / 430 of 520. */
  .delivery-agent {
    position: absolute;
    width: 30%;
    transform: translateY(-50%);
  }

  .delivery-agent:hover {
    transform: translateY(calc(-50% - 2px));
  }

  .delivery-agents-list--left .delivery-agent  { left: 0; }
  .delivery-agents-list--right .delivery-agent { right: 0; }

  .delivery-agent:nth-child(1) { top: 13.4615%; }
  .delivery-agent:nth-child(2) { top: 36.5385%; }
  .delivery-agent:nth-child(3) { top: 59.6154%; }
  .delivery-agent:nth-child(4) { top: 82.6923%; }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-ai-glow,
  .delivery-ai-pulse,
  .delivery-ai-ring,
  .delivery-ai-orbit,
  .delivery-ai-text,
  .delivery-wire-pulse {
    animation: none !important;
  }

  .delivery-ai-pulse,
  .delivery-wire-pulse {
    display: none;
  }
}


/* ==========================================================================
   5. THE PRODUCTS BEHIND THE OUTPUT
   ========================================================================== */

.delivery-products {
  padding-block: clamp(48px, 6.9vw, 99px) clamp(48px, 4vw, 56px);
  background: var(--delivery-band);
}

.delivery-products-title {
  max-width: 944px;
  margin: 14px 0 6px;
  font-family: var(--delivery-font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.405rem + 0.9783vw, 2.1875rem);
  line-height: 1.43;
  color: var(--delivery-ink-strong);
}

.delivery-products-intro {
  max-width: 656px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--delivery-ink-intro);
}

.delivery-stage {
  width: min(1364px, 100% - 32px);
  margin: clamp(28px, 3.5vw, 50px) auto 0;
}

.delivery-stage-figure {
  margin: 0;
}

.delivery-stage-figure img {
  width: 100%;
}

.delivery-products-list {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

/* Below 1280px the cards stack instead of sitting on the infographic. The
   infographic has every product description (and the section heading) drawn
   into it, so showing it above the cards repeated the whole section. Here the
   live cards carry the content alone, aligned to the page's text column.
   From 1280px up nothing changes: the graphic shows and the cards cover it. */
@media (max-width: 1279.98px) {
  .delivery-stage .delivery-stage-figure {
    display: none;
  }

  .delivery-products .delivery-stage {
    width: min(var(--delivery-max), 100% - var(--delivery-gutter) * 2);
  }

  .delivery-stage .delivery-products-list {
    margin-top: 0;
  }
}

.delivery-product {
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

/* The Figma alternates the tint in a repeating run of four — light, cream,
   cream, light — reading left to right, top to bottom. Driving it from row
   position means an editor never has to pick a colour, at the cost of the
   run reshuffling if rows are added or removed. */
.delivery-product:nth-child(4n + 1),
.delivery-product:nth-child(4n + 4) {
  background: var(--delivery-tile-light);
}

.delivery-product:nth-child(4n + 2),
.delivery-product:nth-child(4n + 3) {
  background: var(--delivery-tile-cream);
}

.delivery-product-title {
  font-family: var(--delivery-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--delivery-tile-title);
}

.delivery-product-desc {
  margin-top: 4px;
  font-family: var(--delivery-font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--delivery-tile-body);
}

/* "Read more" into each product's own page. Kept to one short line so the
   overlaid cards at 1280px+ still clear the row beneath them. */
.delivery-product {
  display: flex;
  flex-direction: column;
}

.delivery-product-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 12px;
  font-family: var(--delivery-font-display);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--delivery-ink-strong);
  text-decoration: none;
  border: 1px solid var(--delivery-gold);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

/* Title → description gap. Scoped (0,2,0) so it beats the page's
   `.delivery-page p { margin: 0 }` reset, which was zeroing the 4px above. */
.delivery-product .delivery-product-desc {
  margin-top: 8px;
}

/* Padding, not margin — the page's `p { margin: 0 }` reset outranks this. */
.delivery-product-desc:has(+ .delivery-product-link) {
  padding-bottom: 8px;
}

.delivery-product-link:hover,
.delivery-product-link:focus-visible {
  background: var(--delivery-gold);
}

.delivery-product-link:focus-visible {
  outline: 2px solid var(--delivery-ink-strong);
  outline-offset: 2px;
}

/* Clears the fixed header when a product page links back to #products. */
.delivery-products {
  scroll-margin-top: var(--delivery-header-h);
}


/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

@media (min-width: 768px) {

  .delivery-products-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 1024px) {

  /* Two columns, in the Figma's proportions: 496 / 39 / 705 of 1240. */
  .delivery-intro-grid {
    grid-template-columns: 40% 56.85%;
    gap: 3.15%;
    /* Figma: the overview panel and the screenshot both end at y=1243.
       Stretch the columns to one height and tie each column's last block to
       its floor, so the two bottoms line up whatever the copy does — the
       same approach as the Publishing page's section 2. */
    align-items: stretch;
  }

  .delivery-intro-left,
  .delivery-intro-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* (0,2,0) so it beats the `.delivery-page ul { margin: 0 }` reset. */
  .delivery-intro-left .delivery-benefits {
    margin-bottom: 28px;
  }

  /* The panel drops to the floor if the right-hand column is the taller. */
  .delivery-intro-left .delivery-overview {
    margin-top: auto;
  }

  /* The screenshot takes up whatever height is left and crops from the
     centre, instead of holding its 705:355 box and stopping short. */
  .delivery-shot {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
  }

  .delivery-shot img {
    height: 100%;
    min-height: 300px;
    aspect-ratio: auto;
  }

  .delivery-products-list {
    gap: 20px;
  }
}

/* The six product cards sit on the connector ends drawn into the graphic.
   That composition only holds while each card is wide enough to set its
   description in four or five lines — any narrower and a long card grows into
   the row beneath it. Below this width they stack underneath the graphic
   instead, which is why the threshold is 1280 and not 1024. */
@media (min-width: 1280px) {

  .delivery-stage {
    position: relative;
  }

  .delivery-stage-figure img {
    aspect-ratio: 1364 / 749;
    object-fit: cover;
    object-position: 50% 100%;
  }

  .delivery-products-list {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
  }

  /* Each card fills its box in the graphic from just inside the top edge to
     just inside the bottom one. The graphic still carries the old copy under
     every box, so a card that stopped short let that text show through below
     it; filling the box covers it whatever length the new copy is.
     Box edges measured from diagram-products.png (as % of the cropped stage):
     rows 21.2–44.6, 47.3–68.5, 71.2–92.4. */
  .delivery-product {
    position: absolute;
    width: 31.16%;
    padding: 6px 14px 8px 12px;
    border: 0;
    border-radius: 4px;
  }

  /* Title, description and "Read more" travel as one group, centred in the
     box (level with the icon drawn beside it), with fixed gaps between them
     rather than the button pinned to the card floor. */
  .delivery-product {
    justify-content: center;
  }

  .delivery-product-desc:has(+ .delivery-product-link) {
    padding-bottom: 0;
  }

  .delivery-product .delivery-product-link {
    margin-top: 12px;
    padding: 2px 10px;
    font-size: 12px;
  }

  .delivery-product:nth-child(odd)  { left: 14.3%; }
  .delivery-product:nth-child(even) { left: 62.9%; }

  .delivery-product:nth-child(1),
  .delivery-product:nth-child(2) { top: 22.4%; height: 21.6%; }
  .delivery-product:nth-child(3),
  .delivery-product:nth-child(4) { top: 48.4%; height: 19.8%; }
  .delivery-product:nth-child(5),
  .delivery-product:nth-child(6) { top: 72.4%; height: 19.8%; }
}

/* 1280–1365: the narrowest overlay, where the longer descriptions run to
   four lines. A touch tighter so the group still fits its box. */
@media (min-width: 1280px) and (max-width: 1365.98px) {
  .delivery-product-desc {
    font-size: 12.5px;
    line-height: 1.32;
  }
}

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

  .delivery-page *,
  .delivery-page *::before,
  .delivery-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ftw:new-pages ai-licensing + kai */