.app-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 32px);
  padding-bottom: clamp(40px, 6vw, 72px);
  background: #fff;
  clip-path: inset(0);
  overflow: hidden;
}

.app-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.app-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(28, 25, 23, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 30%, transparent 95%);
}

.app-hero__bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(28, 25, 23, .12) 0%,
      rgba(28, 25, 23, .03) 40%,
      rgba(28, 25, 23, 0) 70%);
  filter: blur(40px);
  transform: translate(-50%, -50%);
  animation: ad-glow 8s ease-in-out infinite alternate;
}

@keyframes ad-glow {
  0% {
    opacity: .6;
    transform: translate(-50%, -50%) scale(.9);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.app-hero>.container {
  position: relative;
  z-index: 1;
}

.ad-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(28px, 4vw, 44px);
  font-size: var(--t-xs);
  color: var(--text-muted);
}

.ad-crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.ad-crumbs a:hover {
  color: var(--text);
}

.ad-crumbs i {
  font-size: .75rem;
  color: var(--text-light);
}

.ad-crumbs span {
  color: var(--text);
  font-weight: 500;
}

/* Hero inner — centered text column, no photo here */
.app-hero__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.app-hero__meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(28, 25, 23, .08);
  border: 1px solid rgba(28, 25, 23, .18);
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--accent);
}

.app-hero__meta-chip i {
  color: var(--accent);
  font-size: .9rem;
}

.app-hero__meta-chip--ghost {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.app-hero__meta-chip--ghost i {
  color: var(--text-muted);
}

.app-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--text);
  margin-bottom: 16px;
}

.app-hero__title em {
  font-style: normal;
  color: var(--accent);
}

.app-hero__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 720px;
}

/* =========================================================
   LEAD BANNER — full-width panoramic photo between hero
   and story sections. Visually separates the text-only hero
   from the two-column story rows that follow.
   ========================================================= */
.ad-banner {
  background: #fff;
  padding-bottom: clamp(40px, 6vw, 72px);
}

.ad-banner__frame {
  margin: 0;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-md);
}

.ad-banner__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   STORY — alternating two-column rows (about.html pattern)
   Each row tells one aspect of the application: substrate,
   workflow, output quality, etc.
   ========================================================= */
.ad-story {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-soft);
}

.ad-secthead {
  margin-bottom: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

.ad-secthead--center {
  text-align: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.ad-secthead__eyebrow {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-muted);
  font-weight: 500;
}

.ad-secthead__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.15;
}

.ad-secthead__sub {
  font-size: var(--t-md);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 620px;
}

.ad-story__rows {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}

.ad-story__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.ad-story__row:nth-child(even) .ad-story__col-text {
  order: 2;
}

.ad-story__row:nth-child(even) .ad-story__col-media {
  order: 1;
}

.ad-story__col-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ad-story__chapter {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--accent);
  font-weight: 500;
}

.ad-story__heading {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 4px;
}

/* ----- PROSE CONTAINER -----
   Class-less semantic HTML inside .ad-story__prose. Backend / CMS
   editor can dump anything (<p>, <ul>, <ol>, <table>, <strong>,
   <em>, <code>, <blockquote>, <a>) and CSS styles it via
   descendant selectors. Same pattern as the legal page and the
   news-detail body. */
.ad-story__prose {
  font-size: var(--t-md);
  color: var(--text-muted);
  line-height: 1.7;
}

/* Block spacing — each child has bottom margin; the last child
   resets to zero (rule below). Headings get extra space when
   they introduce a new section inside the prose. */
.ad-story__prose>* {
  margin-bottom: 1em;
}

.ad-story__prose h2 {
  margin-top: 1.6em;
  margin-bottom: .5em;
}

.ad-story__prose h3,
.ad-story__prose h4 {
  margin-top: 1.2em;
  margin-bottom: .4em;
}

.ad-story__prose>h2:first-child,
.ad-story__prose>h3:first-child,
.ad-story__prose>h4:first-child {
  margin-top: 0;
}

/* Last paragraph (or any final element) doesn't need bottom margin */
.ad-story__prose>*:last-child {
  margin-bottom: 0;
}

.ad-story__prose strong {
  color: var(--text);
  font-weight: 600;
}

.ad-story__prose em {
  font-style: italic;
}

.ad-story__prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease);
}

.ad-story__prose a:hover {
  color: var(--accent-deep, #44403c);
}

.ad-story__prose h2,
.ad-story__prose h3,
.ad-story__prose h4 {
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0;
  font-weight: 600;
}

.ad-story__prose h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
}

.ad-story__prose h3 {
  font-size: 1.1rem;
}

.ad-story__prose h4 {
  font-size: 1rem;
}

.ad-story__prose ul,
.ad-story__prose ol {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

/* Custom marker — small accent dot, vertically centered with the
   first line of text. Cleaner and more on-brand than the default
   disc bullet that the global stylesheet had killed. */
.ad-story__prose li {
  position: relative;
  padding-left: 18px;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

.ad-story__prose ul li::before {
  content: '';
  position: absolute;
  top: .65em;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Ordered lists — keep numbered markers but style them with accent */
.ad-story__prose ol {
  counter-reset: ad-prose-ol;
}

.ad-story__prose ol li {
  counter-increment: ad-prose-ol;
}

.ad-story__prose ol li::before {
  content: counter(ad-prose-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accent);
  line-height: 1.55;
}

.ad-story__prose blockquote {
  margin: 0;
  padding: 14px 18px;
  background: #fff;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  font-style: italic;
  line-height: 1.55;
}

.ad-story__prose blockquote p {
  margin: 0;
}

.ad-story__prose code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
  padding: 2px 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
}

.ad-story__prose pre {
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  font-size: .9em;
}

.ad-story__prose pre code {
  background: none;
  border: none;
  padding: 0;
}

.ad-story__prose hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 1.6em 0;
}

.ad-story__prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.ad-story__prose th,
.ad-story__prose td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.ad-story__prose th {
  background: #fff;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: 600;
}

.ad-story__prose tr:last-child td {
  border-bottom: none;
}

.ad-story__prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.ad-story__col-media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.ad-story__col-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.ad-story__row:hover .ad-story__col-media img {
  transform: scale(1.03);
}

/* ----- Video mode: when [data-video-id] is present on the media,
   JS adds .has-video which shows a play overlay. Click swaps the
   image for a YouTube iframe in the same frame. Same pattern as
   the about page's story media. ----- */
.ad-story__col-media.has-video {
  cursor: pointer;
}

.ad-story__col-media.has-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, .35) 100%);
  pointer-events: none;
  transition: background var(--t-base-d) var(--ease);
}

.ad-story__col-media.has-video:hover::after {
  background: rgba(0, 0, 0, .25);
}

.ad-story__col-media__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .95);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.5rem;
  z-index: 2;
  pointer-events: none;
  transition: transform var(--t-base-d) var(--ease),
    background var(--t-fast) var(--ease);
}

.ad-story__col-media.has-video:hover .ad-story__col-media__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent);
  color: #fff;
}

.ad-story__col-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

.ad-story__col-media.is-playing img,
.ad-story__col-media.is-playing .ad-story__col-media__play {
  display: none;
}

.ad-story__col-media.is-playing::after {
  display: none;
}

/* =========================================================
   GALLERY — clickable thumbs that open a lightbox
   ========================================================= */
.ad-gallery {
  padding: clamp(56px, 8vw, 96px) 0;
  background: #fff;
}

.ad-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ad-gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-soft);
  text-decoration: none;
  transition: transform var(--t-base-d) var(--ease);
}

.ad-gallery__item:hover {
  transform: scale(1.02);
}

.ad-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
  display: block;
}

.ad-gallery__item:hover img {
  transform: scale(1.05);
}

.ad-gallery__item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-base-d) var(--ease);
}

.ad-gallery__item:hover .ad-gallery__item-overlay {
  opacity: 1;
}

.ad-gallery__item-overlay i {
  color: #fff;
  font-size: 1.4rem;
}

/* =========================================================
   LIGHTBOX — same component as news-detail / about
   ========================================================= */
.ad-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(28, 25, 23, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity var(--t-base-d) var(--ease);
}

.ad-lightbox.is-open {
  display: flex;
  opacity: 1;
}

.ad-lightbox__inner {
  position: relative;
  max-width: 1100px;
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.ad-lightbox__img {
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
  display: block;
}

.ad-lightbox__caption {
  color: rgba(255, 255, 255, .85);
  font-size: var(--t-sm);
  text-align: center;
  max-width: 600px;
  line-height: 1.5;
}

.ad-lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.ad-lightbox__close:hover {
  background: rgba(255, 255, 255, .25);
}

.ad-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 5;
  transition: background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.ad-lightbox__nav:hover {
  background: rgba(255, 255, 255, .3);
  transform: translateY(-50%) scale(1.05);
}

.ad-lightbox__nav--prev {
  left: 24px;
}

.ad-lightbox__nav--next {
  right: 24px;
}

.ad-lightbox__counter {
  position: absolute;
  top: -38px;
  left: 0;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .7);
  letter-spacing: .04em;
}

/* =========================================================
   COMPATIBLE MACHINES — compact list view
   NOT a product-list grid. Each machine is a single-row strip
   so the section can hold 5, 15, 30 machines without bloating
   the page. Image left, name + spec chips middle, "view" right.
   ========================================================= */
.ad-machines {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.ad-machines__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 40px);
  flex-wrap: wrap;
}

.ad-machines__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}

.ad-machines__count {
  font-size: var(--t-sm);
  color: var(--text-muted);
}

.ad-machines__count strong {
  color: var(--text);
  font-weight: 600;
}

/* The list — desktop is a 2-column card grid; mobile becomes
   a Swiper carousel (initialised in JS). Visually identical card
   markup either way; only the container behaviour differs. */
.ad-machines__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

/* Each machine card — image left, info+specs right.
   Specs are a 2×2 mini-grid inside the card so each row is a
   compact rectangle, not a tall strip. */
.ad-machine {
  display: grid;
  grid-template-columns: minmax(120px, 30%) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 22px);
  padding: clamp(16px, 2vw, 22px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) var(--ease),
    transform var(--t-base-d) var(--ease),
    box-shadow var(--t-base-d) var(--ease);
  height: 100%;
}

.ad-machine:hover {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Product photo — light background so PNG with transparency reads well */
.ad-machine__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-machine__media img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}

.ad-machine:hover .ad-machine__media img {
  transform: scale(1.04);
}

/* Right column: header (series + name) on top, specs grid below */
.ad-machine__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ad-machine__series {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}

.ad-machine__name {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.25;
  margin: 0;
}

/* Specs — 2×2 grid, each cell has icon + label/value stack
   Same DNA as the product-detail hero spec list, just compact. */
.ad-machine__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.ad-machine__specs li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ad-machine__specs-ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 25, 23, .08);
  color: var(--accent);
  border-radius: 8px;
  font-size: 1rem;
}

/* Icons stay neutral on hover — no state change. */

.ad-machine__specs-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.ad-machine__specs-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.2;
}

.ad-machine__specs-value {
  font-size: var(--t-sm);
  color: var(--text);
  font-weight: 600;
  line-height: 1.25;
  /* Truncate so long values don't overflow the tight 2x2 cell */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer row — "View specs" CTA at the bottom of body */
.ad-machine__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-muted);
  align-self: flex-start;
  transition: color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.ad-machine__cta i {
  font-size: .9rem;
  transition: transform var(--t-base-d) var(--ease);
}

.ad-machine:hover .ad-machine__cta {
  color: var(--accent);
}

.ad-machine:hover .ad-machine__cta i {
  transform: translateX(3px);
}

/* "See more" footer if list is paginated server-side */
.ad-machines__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 32px);
}

/* ----- SWIPER (mobile only) -----
   When .ad-machines__list has class .swiper, treat children as
   slides. We only switch to swiper-mode below 768px so desktop
   keeps its grid; the JS handles enable/disable based on viewport. */
.ad-machines__list.swiper {
  display: block;
  overflow: hidden;
  /* Pull edges so peeking adjacent cards looks intentional */
  margin: 0 calc(var(--container-pad, 20px) * -1);
  padding: 0 var(--container-pad, 20px);
}

.ad-machines__list.swiper .swiper-wrapper {
  align-items: stretch;
}

.ad-machines__list.swiper .swiper-slide {
  height: auto;
  display: flex;
}

.ad-machines__list.swiper .swiper-slide>.ad-machine {
  flex: 1;
}

/* Swiper pagination dots, sober styling */
.ad-machines__list.swiper .swiper-pagination {
  position: static;
  margin-top: 18px;
}

.ad-machines__list.swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  opacity: .4;
  margin: 0 4px !important;
  transition: opacity var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    width var(--t-fast) var(--ease);
}

.ad-machines__list.swiper .swiper-pagination-bullet-active {
  background: var(--accent);
  opacity: 1;
  width: 18px;
  border-radius: 999px;
}

/* =========================================================
   RESPONSIVE — full audit of every section
   ========================================================= */

/* Tablet — 992px and below
   - Story rows collapse to single column (image above text)
   - Gallery 3 → 2 columns
   - Machines drop to single-column grid (swiper not yet active)
   ========================================================= */
@media (max-width: 992px) {
  .app-hero {
    padding-bottom: clamp(32px, 5vw, 56px);
  }

  .ad-banner {
    padding-bottom: clamp(32px, 5vw, 56px);
  }

  .ad-story {
    padding: clamp(40px, 6vw, 72px) 0;
  }

  .ad-story__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Image always above text on tablet/mobile — drop the alternation */
  .ad-story__row:nth-child(even) .ad-story__col-text,
  .ad-story__col-text {
    order: 2;
  }

  .ad-story__row:nth-child(even) .ad-story__col-media,
  .ad-story__col-media {
    order: 1;
  }

  .ad-gallery {
    padding: clamp(40px, 6vw, 72px) 0;
  }

  .ad-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .ad-machines {
    padding: clamp(40px, 6vw, 72px) 0;
  }

  /* Tablets: single-column card grid, each card gets more horizontal
     room. Below 768 the Swiper carousel takes over (JS-driven). */
  .ad-machines__list:not(.swiper) {
    grid-template-columns: 1fr;
  }
}

/* Phone — 768px and below
   - Hero padding tightens
   - Banner aspect taller (21:9 too thin on phone)
   - Story media 4:3 (5:4 too tall)
   - Machine card stacks vertically: photo top, body bottom
   - Lightbox padding tightens
   ========================================================= */
@media (max-width: 768px) {
  .app-hero {
    padding-top: calc(var(--header-h) + 24px);
    padding-bottom: clamp(24px, 4vw, 40px);
  }

  .app-hero__title {
    font-size: clamp(1.65rem, 6vw, 2.2rem);
  }

  .app-hero__subtitle {
    font-size: 1rem;
  }

  /* Banner — hide entirely on mobile.
     The hero already names the category; a second large photo
     here repeats what the page hero just said. The story rows
     below carry their own imagery. */
  .ad-banner {
    display: none;
  }

  /* Story media — 5:4 too tall on phone, 4:3 reads better */
  .ad-story__col-media {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
  }

  .ad-story__heading {
    font-size: clamp(1.15rem, 4.5vw, 1.4rem);
  }

  /* PROSE on mobile — pull the text down a touch so it sits
     comfortably alongside the heading on a phone */
  .ad-story__prose {
    font-size: var(--t-sm);
    line-height: 1.6;
  }

  .ad-story__prose>* {
    margin-bottom: .85em;
  }

  .ad-story__prose li {
    font-size: .9rem;
    line-height: 1.5;
  }

  .ad-story__prose ul li::before {
    top: .55em;
  }

  .ad-story__prose h2 {
    font-size: 1.1rem;
    margin-top: 1.3em;
    margin-bottom: .35em;
  }

  .ad-story__prose h3 {
    font-size: 1.02rem;
  }

  .ad-story__prose h4 {
    font-size: .95rem;
  }

  /* MACHINE CARD MOBILE — vertical stack so the photo and the
     spec grid never fight over horizontal space.
     Layout: photo on top (16:10), body below. */
  .ad-machine {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 14px;
    padding: 14px;
  }

  .ad-machine__media {
    aspect-ratio: 16 / 10;
    width: 100%;
  }

  .ad-machine__body {
    gap: 10px;
  }

  .ad-machine__name {
    font-size: 1.05rem;
  }

  /* Spec grid 2×2 — tighter sizes so the 4 specs fit comfortably
     even inside a 320px-wide swiper slide */
  .ad-machine__specs {
    gap: 10px 12px;
    padding-top: 12px;
  }

  .ad-machine__specs-ico {
    width: 30px;
    height: 30px;
    font-size: .95rem;
  }

  .ad-machine__specs-label {
    font-size: .62rem;
  }

  .ad-machine__specs-value {
    font-size: .85rem;
  }

  /* CTA on mobile — tighter top space so the "View specs" link
     sits closer to the spec grid above it */
  .ad-machine__cta {
    margin-top: 4px;
  }

  /* Lightbox tightens */
  .ad-lightbox {
    padding: 16px;
  }

  .ad-lightbox__close {
    top: -38px;
    right: 0;
  }

  .ad-lightbox__nav {
    width: 40px;
    height: 40px;
  }

  .ad-lightbox__nav--prev {
    left: 12px;
  }

  .ad-lightbox__nav--next {
    right: 12px;
  }
}

/* Small phone — 576px and below
   - Gallery tightens to 8px gap
   - Machine specs 2×2 → 1 column (values were truncating)
   - Hero meta chips wrap cleanly
   ========================================================= */
@media (max-width: 576px) {
  .app-hero__meta {
    gap: 6px;
  }

  .app-hero__meta-chip {
    font-size: .65rem;
    padding: 5px 10px;
  }

  .ad-story__col-media {
    border-radius: var(--r-md);
  }

  .ad-gallery__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Phones too narrow for a 2x2 spec block — stack to a single
     column so values never truncate awkwardly */
  .ad-machine__specs {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ad-machine__specs-ico {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .ad-machine__specs-label {
    font-size: .65rem;
  }

  .ad-machine__specs-value {
    font-size: .9rem;
  }
}