/* ==========================================================================
   PAGE — publish (publish.html)
   Lifted from preview/publishing/style.css. Every selector is
   already namespaced, so it cannot reach the other two pages.
   ========================================================================== */
:root {
  /* brand ---------------------------------------------------------------- */
  --publishing-amber:            #ffc600;
  --publishing-amber-alt:        #ffc905;
  --publishing-amber-workflow:   #edb000;
  --publishing-orange:           #e28f01;

  /* dark grounds --------------------------------------------------------- */
  --publishing-dark:             #02021b;
  --publishing-dark-hero:        #060f1e;
  --publishing-dark-footer:      #03041b;
  --publishing-dark-card:        #05051f;

  /* light grounds -------------------------------------------------------- */
  --publishing-cream:            #fdfbf9;
  --publishing-cream-card:       #fefaee;
  --publishing-cream-border:     #fdf3db;
  --publishing-grey-card:        #f6f6f6;
  --publishing-grey-border:      #dedede;
  --publishing-white-card:       #fefefe;
  --publishing-white-border:     #d7d7d7;

  /* text ----------------------------------------------------------------- */
  --publishing-heading:          #0f0f35;
  --publishing-body:             #333333;
  --publishing-dark-text:        #1b1b1b;
  --publishing-muted-dark:       #b7b6b9;
  --publishing-muted:            #8c8585;
  --publishing-number:           #6c561f;
  --publishing-step-number:      #f3f3f3;

  /* lines ---------------------------------------------------------------- */
  --publishing-border-dark:      #64748b;
  --publishing-divider-dark:     #2d2b2b;

  /* type ----------------------------------------------------------------- */
  --publishing-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto,
                     'Helvetica Neue', Arial, sans-serif;

  /* layout --------------------------------------------------------------- */
  --publishing-container: 1240px;
  --publishing-gutter:    20px;   /* matches --site-gutter at every width */
  --publishing-radius:    10px;
  --publishing-header-h:  76px;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

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

.publishing-page {
  /* clears the theme's position:fixed 76px header — flush, because the hero
     is a dark band and any gap would show as a stripe of body background */
  padding-top: var(--publishing-header-h);
  margin: 0;
  font-family: var(--publishing-font);
  color: var(--publishing-body);
  background: #ffffff;
  overflow-x: clip;
  /* inherited, so one declaration covers every descendant — and it keeps the
     reset above free of anything but `margin` */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.publishing-page img {
  max-width: 100%;
  height: auto;
}

/* Margin reset deliberately written as `.publishing-page *` — specificity
   (0,1,0), the same weight as every component class below it, so source order
   decides and each component's own margin wins.

   The obvious form, `.publishing-page p, .publishing-page h1, …`, is (0,1,1):
   one class plus one element. That silently outranks a single-class rule like
   `.publishing-hero-lead { margin-top: 16px }`, so every margin on a p, h1,
   h2, h3, ul or ol on this page was being thrown away — collapsing the
   vertical rhythm everywhere at once. */
.publishing-page * { margin: 0; }

/* `:where()` contributes no specificity, so this lands at (0,1,0) like the
   margin reset above and for the same reason: as a plain
   `.publishing-page ul` it was (0,1,1) and outranked component rules such as
   `.publishing-workflow-track { padding-bottom: 8px }`. */
.publishing-page :where(ul, ol) {
  padding: 0;
  list-style: none;
}

.publishing-container {
  width: 100%;
  max-width: calc(var(--publishing-container) + var(--publishing-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--publishing-gutter);
}

/* --------------------------------------------------------------------------
   Shared — eyebrow + accent rule
   -------------------------------------------------------------------------- */

.publishing-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.publishing-accent-line {
  display: block;
  flex: none;
  width: 40px;
  height: 2px;
  background: currentColor;
}

.publishing-eyebrow--amber      { color: var(--publishing-amber); }
.publishing-eyebrow--amber-alt  { color: var(--publishing-amber-alt); }
.publishing-eyebrow--orange     { color: var(--publishing-orange); }
.publishing-eyebrow--workflow   { color: var(--publishing-amber-workflow); }

/* Shared icon composition: a circle asset with a glyph centred on top.
   Both keep their intrinsic width/height — never stretched to the box.

   `width: max-content` is load-bearing, not tidiness. The card and step
   wrappers are items in a COLUMN flex container, whose default
   `align-items: stretch` would otherwise blow this box out to the full card
   width — leaving the circle at the left edge and the absolutely-centred
   glyph stranded in the middle of the card, well clear of it. An explicit
   cross-axis size opts out of that stretch, in both row and column parents. */
.publishing-feature-icon,
.publishing-card-icon,
.publishing-step-icon {
  position: relative;
  display: inline-block;
  width: max-content;
  flex: none;
  line-height: 0;
}

.publishing-icon-circle { display: block; }

.publishing-icon-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* The "more control" icon is four stacked Figma layers, kept at their exact
   relative offsets. The stack is sized to its widest layer and centred. */
.publishing-icon-stack {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 27px;
  height: 27px;
}

.publishing-icon-layer      { position: absolute; }
.publishing-icon-layer--a   { top: 0;   left: 0; }
.publishing-icon-layer--b   { top: 3px; left: 3px; }
.publishing-icon-layer--c   { top: 6px; left: 13px; }
.publishing-icon-layer--d   { top: 6px; left: 6px; }

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

.publishing-hero {
  position: relative;
  background-color: var(--publishing-dark-hero);
  background-image: radial-gradient(
    1504px 444px at 50% 20%,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(245, 158, 11, 0) 70%
  );
  /* Same band geometry as the Delivery / AI Licensing / KAI heroes. */
  min-height: 420px;
  padding-block: 56px;
  color: #ffffff;
}

.publishing-hero-title {
  margin-top: 16px;
  font-size: clamp(28px, 5.2vw, 40px);
  line-height: 1.25;
  font-weight: 700;
  color: #ffffff;
  max-width: 988px;
}

.publishing-hero-title-accent { color: var(--publishing-amber-alt); }

/* Figma sets "with agentic AI" on a line of its own, at every width. */
.publishing-hero-title-line { display: block; }

.publishing-hero-lead {
  margin-top: 16px;
  max-width: 692px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.45;
  color: #ffffff;
}

/* ==========================================================================
   2. A CONNECTED OPERATING ENVIRONMENT
   ========================================================================== */

.publishing-environment {
  background: var(--publishing-cream);
  padding-block: 56px;
}

.publishing-environment-title {
  font-size: clamp(24px, 3.8vw, 35px);
  line-height: 1.29;
  font-weight: 700;
  color: var(--publishing-heading);
  max-width: 719px;
}

.publishing-environment-grid {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

/* left column ------------------------------------------------------------- */

.publishing-feature-list {
  display: grid;
  gap: 0;
}

.publishing-feature-inner {
  display: flex;
  align-items: center;
  gap: 23px;
  padding-block: 16px;
}

/* The rule between feature rows is a real Figma asset (425 × 1), not a CSS
   border, so it keeps the design's exact colour and opacity. It is the one
   image here given an explicit height: at its natural 425:1 ratio, `height:
   auto` would render it as a sub-pixel line — and vanish — in any column
   narrower than the design's 424px. */
.publishing-feature-divider {
  display: block;
  width: calc(100% - 74px);
  height: 1px;
  margin-left: 74px;
}

.publishing-feature:last-child .publishing-feature-divider { display: none; }

.publishing-feature-text {
  font-size: 16px;
  line-height: 1.42;
  color: var(--publishing-body);
}

.publishing-environment-body {
  margin-top: 24px;
  padding: 31px 32px;
  background: var(--publishing-grey-card);
  border: 1px solid var(--publishing-grey-border);
  border-radius: var(--publishing-radius);
}

.publishing-environment-body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--publishing-body);
}

/* right column ------------------------------------------------------------ */

.publishing-card-row {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.publishing-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 159px;
  padding: 13px 16px 16px;
  background: var(--publishing-grey-card);
  border: 1px solid var(--publishing-grey-border);
  border-radius: var(--publishing-radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.publishing-environment-figure {
  margin: 24px 0 0;
}

.publishing-environment-figure img {
  display: block;
  width: 100%;
  border-radius: var(--publishing-radius);
  box-shadow: 0 0 15px -2px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   3. KAI FOR PUBLISHING
   ========================================================================== */

.publishing-kai {
  background: #ffffff;
  padding-block: 56px;
}

.publishing-kai-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

.publishing-kai-title {
  margin-top: 20px;
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--publishing-heading);
}

.publishing-kai-body {
  margin-top: 16px;
  max-width: 499px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--publishing-body);
}

.publishing-kai-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 700;
  color: var(--publishing-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.publishing-kai-link-arrow {
  display: inline-block;
  color: #000000;
  transition: transform 0.2s ease;
}

/* "Explore KAI and its 40+ specialized agents →": only the words are
   underlined, and the arrow stays with the last word. PHONES ONLY (below
   768px): tablets, laptops and desktop keep their original rules.
   The link used to be a flex row, which gave the arrow span its own
   underline; once the words wrapped on phones the arrow was also stranded at
   the far right, reading as a second underlined link. Browsers would still
   break a line between the words and a separate arrow element, so the arrow
   is now drawn at the end of the label itself (::after), joined to the last
   word by a no-break space. The underline is drawn as a background on the
   label, which the arrow's own background (the section's white) covers, so
   the underline stops at the last word. The original arrow span stays in the
   markup (it is aria-hidden) but is not shown. */
@media (max-width: 767.98px) {
  .publishing-kai .publishing-kai-link {
    display: inline-block;
    text-decoration: none;
  }

  .publishing-kai .publishing-kai-link-arrow {
    display: none;
  }

  .publishing-kai .publishing-kai-link-label {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 1px);
    background-size: 100% 1.5px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .publishing-kai .publishing-kai-link-label::after {
    /* no-break space + arrow; widened so the gap matches the old 8px */
    content: "\00a0\2192";
    content: "\00a0\2192" / "";
    position: relative;
    left: 0;
    word-spacing: calc(8px - 0.25em);
    color: #000000;
    background: #ffffff;   /* = .publishing-kai background; hides the underline here */
    transition: left 0.2s ease;
  }

  @media (hover: hover) {
    .publishing-kai .publishing-kai-link:hover .publishing-kai-link-label::after,
    .publishing-kai .publishing-kai-link:focus-visible .publishing-kai-link-label::after {
      left: 4px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .publishing-kai .publishing-kai-link-label::after {
      transition: none;
    }

    .publishing-kai .publishing-kai-link:hover .publishing-kai-link-label::after {
      left: 0;
    }
  }
}

/* The source PNG is 2005x784 and contains the whole section mocked up —
   eyebrow, heading, body copy and button — with the dark diagram panel on its
   right-hand side. Figma shows only that panel, by scaling the image to 166.77%
   of this box and sliding it left, then clipping. Reproduced exactly from the
   design context (w 166.77%, h 118.49%, left -66.76%, top -9%); rendering the
   whole image instead brings the mock's miniature text back on screen. */
.publishing-kai-figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 750 / 413;
  border-radius: var(--publishing-radius);
}

.publishing-kai-figure img {
  position: absolute;
  top: -9%;
  left: -66.76%;
  width: 166.77%;
  height: 118.49%;
  max-width: none;
  border-radius: 0;
}

/* ==========================================================================
   4. WHAT THE PLATFORM IS BUILT ON
   ========================================================================== */

.publishing-platform {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--publishing-dark);
  padding-block: 56px;
  color: #ffffff;
}

.publishing-platform-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.publishing-platform-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center right;
}

/* Mobile: the photo spans the full band, so the scrim runs top-to-bottom to
   keep the text legible. The desktop rule below restores the Figma's
   left-to-right gradient once the photo is confined to the right-hand side. */
.publishing-platform::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--publishing-dark) 30%,
    rgba(2, 2, 29, 0.72) 100%
  );
}

.publishing-platform-inner {
  position: relative;
  z-index: 2;
}

.publishing-platform-title {
  margin-top: 20px;
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.25;
  font-weight: 700;
  color: #ffffff;
}

.publishing-platform-list {
  display: grid;
  gap: 18px;
  margin-top: 40px;
}

.publishing-platform-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--publishing-dark-card);
  border: 1px solid var(--publishing-border-dark);
  border-radius: 12px;
}

.publishing-platform-number {
  flex: none;
  width: 56px;
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.9px;
  color: var(--publishing-number);
}

.publishing-platform-content {
  border-left: 1px solid var(--publishing-divider-dark);
  padding-left: 20px;
}

.publishing-platform-item-title {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.2;
  font-weight: 700;
  color: #ffffff;
}

.publishing-platform-item-text {
  margin-top: 11px;
  font-size: 16px;
  line-height: 1.42;
  color: var(--publishing-muted-dark);
}

/* ==========================================================================
   5. FROM FIRST IDEA TO PUBLICATION
   ========================================================================== */

.publishing-workflow {
  background: #ffffff;
  padding-block: 56px;
}

.publishing-workflow-title {
  margin-top: 20px;
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--publishing-dark-text);
}

.publishing-workflow-intro {
  margin-top: 16px;
  max-width: 845px;
  font-size: 16px;
  line-height: 1.55;
  color: #1c1c1c;
}

.publishing-workflow-steps { margin-top: 40px; }

/* A plain grid that reflows: one card per row, two from 768px, and the
   Figma's static 4-up row at 1024px. No carousel, so nothing here depends on
   JavaScript and the page needs none. */
.publishing-workflow-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}

.publishing-step {
  position: relative;
  display: flex;
}

.publishing-step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px 21px 28px;
  background: var(--publishing-white-card);
  border: 1px solid var(--publishing-white-border);
  border-radius: var(--publishing-radius);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.publishing-step-number {
  position: absolute;
  top: 11px;
  right: 21px;
  font-size: clamp(38px, 5vw, 50px);
  font-weight: 600;
  line-height: 1.14;
  color: var(--publishing-step-number);
}

.publishing-step-title {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--publishing-dark-text);
}

.publishing-step-subtitle {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--publishing-muted);
}

.publishing-step-text {
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--publishing-body);
}

/* The flow connectors belong to the 4-up desktop row only — once the cards
   wrap onto separate rows they would point at nothing. */
.publishing-step-connector { display: none; }

/* Keep focus visible for keyboard users in all four engines. */
.publishing-page :focus-visible {
  outline: 2px solid var(--publishing-amber-workflow);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Hover polish — pointer devices only, so a tap on touch doesn't stick
   -------------------------------------------------------------------------- */

@media (hover: hover) {
  .publishing-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px 2px rgba(0, 0, 0, 0.12);
  }

  .publishing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.14);
  }

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

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

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

  .publishing-environment,
  .publishing-kai,
  .publishing-platform,
  .publishing-workflow      { padding-block: 72px; }

  .publishing-eyebrow       { font-size: 16px; }
}

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

  .publishing-hero          { min-height: 440px; padding-top: 88px; }
  .publishing-environment,
  .publishing-kai,
  .publishing-platform,
  .publishing-workflow      { padding-block: 88px; }

  .publishing-eyebrow       { font-size: 17px; }

  .publishing-card-row      { grid-template-columns: repeat(3, 1fr); }
  .publishing-environment-grid { gap: 48px; }

  /* Figma row geometry (nodes 65:8164…65:8196): number box 18→71px, divider
     at 89px, copy from 116px, 20px clear on the right. The old 24/72/24/27
     set the copy at 149px, which pushed the descriptions onto a third line,
     made every card ~130-153px tall instead of 116px, and stretched the whole
     section — and with it the cover-fitted photo — well past the Figma. */
  .publishing-platform-item { gap: 18px; padding: 19px 20px 11px 18px; min-height: 116px; }   /* 116 incl. 1px borders */
  .publishing-platform-number { width: 53px; }
  .publishing-platform-content { padding-left: 26px; }
  .publishing-platform-item-text { margin-top: 10px; line-height: 1.5625; }

  /* two stage cards per row — a 291px card stops feeling cramped here */
  .publishing-workflow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 1024px — the design's real layout returns ----------------------------- */
@media (min-width: 1024px) {
  .publishing-hero { min-height: 488px; padding-top: 113px; }   /* Figma band: 488px */

  .publishing-environment { padding-block: 85px 102px; }
  /* Figma: white band 1477–2035, image 1546–1959 → 69px above, 76px below */
  .publishing-kai         { padding-block: 69px 76px; }
  .publishing-platform    { padding-block: 94px 100px; }
  .publishing-workflow    { padding-block: 93px 102px; }

  /* Figma: eyebrow → title 13px, title → first card 44px, so the band comes
     out at the design's 844px (94 + 26 + 13 + 50 + 44 + 518 + 100). */
  .publishing-platform-title { margin-top: 13px; }
  .publishing-platform-list  { margin-top: 44px; }

  /* photo returns to the right-hand 41%, scrim returns to left-to-right.
     Anchored bottom-right: the hand and tablet sit in that corner of the
     source, so whenever the band's proportions differ from the 593x844 Figma
     box and `cover` has to crop, it crops the empty top-left instead. */
  .publishing-platform-bg img {
    left: auto;
    right: 0;
    width: 41.17%;
    object-position: right bottom;
  }

  .publishing-platform::after {
    background: linear-gradient(
      to right,
      var(--publishing-dark) 43.269%,
      rgba(2, 2, 29, 0.33) 100%
    );
  }

  /* The cards take 930px of the Figma's 1240px content column (x100–1030) —
     three quarters of it. Held as a proportion rather than the raw 930px:
     a fixed width only matches the design at exactly 1440, and on any
     narrower desktop it eats into the open right-hand third where the
     background photo reads through (at 1280 that gap fell from 28% to 19%).
     At 1440 and above the container caps at 1240, so this still computes to
     exactly 930px. */
  .publishing-platform-list { max-width: 75%; }

  /* section 2 — 499px / 705px two-column split.

     In the Figma the cream copy block and the photo both end at y=1375; the
     photo simply starts higher to get there. Reproducing those offsets
     literally only holds at 1440px with the exact Figma copy — any rewrap and
     the two columns drift apart. So the columns are stretched to equal height
     instead and their last blocks are tied to the bottom edge, which keeps
     the baselines together whatever the text does.

     Whichever column is shorter takes up the slack: the photo grows into it
     (cropping from a 1478x732 source, centred), and the copy block drops to
     the bottom. In practice the left column is the taller one. */
  .publishing-environment-grid {
    grid-template-columns: minmax(0, 499fr) minmax(0, 705fr);
    gap: 36px;
    align-items: stretch;
    /* Figma: title 693 → first feature row 826, but the title's text box is
       drawn 52px tall for two 45px lines, so the real gap is ~43px, not the
       81px the box geometry suggests. 48px keeps it in the page's rhythm. */
    margin-top: 48px;
  }

  .publishing-environment-main,
  .publishing-environment-aside {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* the Figma's 42px between the last feature row and the copy block */
  .publishing-feature-list { margin-bottom: 42px; }

  /* pinned to the bottom of its column */
  .publishing-environment-body {
    margin-top: auto;
    padding: 31px 32px;
  }

  /* grows to fill its column, so its bottom meets the copy block's.
     The image is taken out of flow and pinned to the figure's box: that
     resolves identically in all four engines, whereas a percentage height
     against a flex-sized parent is the kind of thing Safari and Firefox
     have historically disagreed about. min-height keeps the Figma's 349px
     as a floor so the photo can never be squashed below its drawn size. */
  .publishing-environment-figure {
    position: relative;
    flex: 1 1 auto;
    /* the Figma's 28px between the small cards and the photo */
    margin-top: 28px;
    /* a floor only — well under the proportional height at 1024px, so it
       never forces the photo taller than its column can give */
    min-height: 240px;
  }

  .publishing-environment-figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .publishing-feature-inner { padding-block: 18px; }

  /* section 3 — text beside the diagram, vertically centred as drawn */
  .publishing-kai-grid {
    grid-template-columns: minmax(0, 499fr) minmax(0, 750fr);
    gap: 32px;
  }

  /* section 5 — the Figma's 4-up row, connectors visible */
  .publishing-workflow-steps { margin-top: 45px; }

  .publishing-workflow-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
  }

  .publishing-step-connector {
    display: block;
    position: absolute;
    top: 180px;
    left: calc(100% - 9px);
    width: 43px;
    height: 24px;
    z-index: 2;
  }

  .publishing-connector-line   { position: absolute; top: 11px; left: 0; }
  .publishing-connector-circle { position: absolute; top: 0;    left: 9px; }
  .publishing-connector-arrow  { position: absolute; top: 6px;  left: 14px; }

  .publishing-step-text { margin-top: 30px; }
}

/* --- 1280px --------------------------------------------------------------- */
@media (min-width: 1280px) {
  .publishing-hero-title   { font-size: 40px; line-height: 1.25; }
  .publishing-hero-lead     { font-size: 18px; line-height: 1.44; }
  .publishing-environment-title { font-size: 35px; line-height: 1.29; }
}

/* --------------------------------------------------------------------------
   Reduced motion — no transitions, no smooth scrolling, no hover travel
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .publishing-page *,
  .publishing-page *::before,
  .publishing-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .publishing-step-card:hover,
  .publishing-card:hover { transform: none; }

  .publishing-kai-link:hover .publishing-kai-link-arrow { transform: none; }
}