/* ============================================================
   VENVITY — System Page Styles
   ============================================================ */

/* ---- Hero ---- */
.system-hero {
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.system-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding-top: 2rem;
}

/* ---- Ecosystem Diagram ---- */
.ecosystem-diagram {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 0 auto;
}

.eco-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(111,143,134,.4);
}

.eco-center span {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
}

.eco-orbit {
  position: absolute;
  inset: 0;
}

.eco-orbit::before {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(111,143,134,.2);
  border-radius: 50%;
}

.eco-node {
  position: absolute;
  width: 72px; height: 72px;
  background: var(--bg-white);
  border: 1.5px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.eco-node span {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.3;
  padding: 0 5px;
}

/* 5 nodes at 72° intervals on r=120px, center=170px (container 340px) */
/* Angles: -90°, -18°, 54°, 126°, 198° */
.eco-node--1 { top:  50px; left: 170px; } /* top         0° offset */
.eco-node--2 { top: 133px; left: 284px; } /* top-right  72° offset */
.eco-node--3 { top: 267px; left: 241px; } /* btm-right 144° offset */
.eco-node--4 { top: 267px; left:  99px; } /* btm-left  216° offset */
.eco-node--5 { top: 133px; left:  56px; } /* top-left  288° offset */

/* ---- System Products ---- */
.sys-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 0.5rem 0;
}

/* Tighten the vertical rhythm between product blocks (refinement
   pass): scoped to the "5 products" list only via .system-products,
   so the shared/global .divider rule used elsewhere stays untouched.
   Was ~8rem of combined padding+margin between two product blocks;
   now a calmer ~5rem, still with clear breathing room between
   sections but without the previous over-generous gap. */
.system-products .divider {
  margin: 1.75rem 0;
}

.sys-product--reversed .sys-product__visual {
  order: 2;
}

.sys-product--reversed .sys-product__content {
  order: 1;
}

.sys-product__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.sys-product__visual .visual-hero {
  height: 320px;
}

.sys-product__number {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.875rem;
}

.sys-product__features {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
}

.sys-product__features li {
  font-size: 0.9rem;
  color: var(--text-mid);
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.5;
}

.sys-product__features li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-size: 0.75rem;
}

.sys-product__meta {
  display: flex;
  gap: 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.sys-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sys-meta-item span:last-child {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-dark);
}

.sys-product__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   DESKTOP DUPLICATION BUG FIX — mobile-only elements must be
   hidden by default (desktop/tablet, >768px) and only revealed
   inside the existing @media (max-width:768px) block below.

   Root cause: `.sys-product__num-mobile` (a <span>) and
   `.sys-product__mobile-foot` (a <div>) were added to system.html
   for the approved mobile vertical-editorial redesign. Their
   `display: block` / `display: flex` styling only ever existed
   INSIDE `@media (max-width: 768px)` — there was never a base
   (non-media-query) rule hiding them above that width. Because a
   bare <span> defaults to `display: inline` and a bare <div>
   defaults to `display: block` in the absence of any other CSS,
   both elements rendered on desktop and tablet too, duplicating
   the product number/role line and the price + "View" row
   alongside the original desktop number/tag/meta/actions block.

   Fix: hide both elements by default here (applies at every width,
   including tablet, since no separate tablet-only override exists
   for the product section — tablet uses the same desktop grid as
   `.sys-product`'s own base rule above). The existing
   `@media (max-width: 768px)` block further below still switches
   them back to visible for the approved mobile layout — that rule
   is untouched. Scoped to these two page-specific classes only
   (both unique to system.html), so no other page is affected. */
.sys-product__num-mobile,
.sys-product__mobile-foot {
  display: none;
}

/* ---- Connection Timeline ---- */
.timeline {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 15px;
  width: 1px;
  background: linear-gradient(to bottom, var(--primary), var(--accent), var(--primary));
  opacity: 0.3;
}

.timeline-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
  position: relative;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-marker {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--bg-white);
  box-shadow: 0 0 0 2px var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.timeline-marker--accent {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.timeline-content {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.timeline-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .system-hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ecosystem-diagram {
    width: 280px;
    height: 280px;
  }

  /* 5 nodes at 72° intervals on r=100px, center=140px (container 280px) */
  .eco-node--1 { top:  40px; left: 140px; }
  .eco-node--2 { top: 109px; left: 235px; }
  .eco-node--3 { top: 221px; left: 199px; }
  .eco-node--4 { top: 221px; left:  81px; }
  .eco-node--5 { top: 109px; left:  45px; }
}

@media (max-width: 768px) {
  .timeline::before { left: 12px; }
  .timeline-item { grid-template-columns: 36px 1fr; }
  .timeline-marker { width: 24px; height: 24px; }
}

/* ============================================================
   SYSTEM PAGE — Mobile refinement (≤768px): ecosystem diagram
   sizing/positioning + reduced gap before "The complete framework".
   Does NOT touch the 5-product list below (.sys-product / .divider
   / .ed-sys-product* rules above) — out of scope for this task.
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Ecosystem diagram: fully responsive canvas ----
     Root cause of the reported cropping: `.ecosystem-diagram` had a
     FIXED 280px width/height (set by the existing
     @media (max-width: 1024px) rule above, which also applies to
     every mobile width since 1024px is a superset of the tested
     320-430px range), while its 5 `.eco-node` children were
     positioned with fixed pixel top/left offsets calculated for that
     exact 280px canvas. On narrow phones, the surrounding
     `.ed-eco-card`'s own padding (clamp(2rem,3vw,2.75rem) ≈ 32-44px,
     css/editorial.css) plus the shared `.container`'s own gutter
     (≈20-40px) left less than 280px of actual available width inside
     the card at 320-375px (e.g. only ≈216px available at 320px) — so
     the fixed-size diagram overflowed its card, and since
     `body { overflow-x: hidden; }` (css/style.css, sitewide) clips
     horizontal overflow instead of producing a scrollbar, part of
     the diagram (its right-hand nodes/labels) was silently cropped
     off-screen instead of visibly overflowing.
     Fix: give `.ecosystem-diagram` a fluid, viewport-based size
     (clamp between 200-250px) and switch every `.eco-node`'s
     top/left from fixed pixels to PERCENTAGES of the diagram's own
     box (already the containing block for these absolutely
     positioned children, via the existing
     `.eco-orbit { position:absolute; inset:0; }` wrapper). Percentage
     offsets are resolved against whatever size the diagram box
     actually renders at, so the whole radial layout automatically
     stays correctly proportioned at any width in the clamp range —
     no separate "recalculated pixel set per breakpoint" is needed
     (unlike the existing 1024px tier above, which keeps its own
     fixed pixel set, untouched, still governing 769-1024px).
     `.eco-center`'s own positioning was already percentage-based
     (`top/left:50%` + `translate(-50%,-50%)`), so it needed no
     change; only its and `.eco-node`'s DIAMETER are reduced slightly
     (100px/72px → 70px/56px) so neither the center mark nor the 5
     nodes crowd or overlap each other, or bleed past the smaller
     mobile canvas edge. `.eco-orbit::before`'s decorative ring inset
     is likewise switched from a fixed 24px to the equivalent
     percentage (8.6%) so it scales with the fluid canvas too.
     Desktop/tablet (>768px) are completely unaffected — none of the
     base rules or the existing @media (max-width:1024px) tier above
     are edited. */
  .ecosystem-diagram {
    width: clamp(200px, 62vw, 250px);
    height: clamp(200px, 62vw, 250px);
  }

  .eco-orbit::before {
    inset: 8.6%;
  }

  .eco-center {
    width: 70px;
    height: 70px;
  }

  .eco-node {
    width: 56px;
    height: 56px;
  }

  .eco-node span {
    font-size: 0.56rem;
    padding: 0 3px;
  }

  /* Same 5 angular positions as the desktop/1024px tiers above,
     expressed as percentages of the diagram's own box instead of
     fixed pixels (see explanation above) — a unit change only, not a
     layout redesign; the diagram reads identically, just fully
     visible and correctly proportioned at every mobile width instead
     of overflowing/cropping. */
  .eco-node--1 { top: 14.29%; left: 50%; }
  .eco-node--2 { top: 38.93%; left: 83.93%; }
  .eco-node--3 { top: 78.93%; left: 71.07%; }
  .eco-node--4 { top: 78.93%; left: 28.93%; }
  .eco-node--5 { top: 38.93%; left: 16.07%; }

  /* ---- Reduced gap before "THE COMPLETE FRAMEWORK" ----
     Root cause: both the quote's section
     (`<section class="section bg-white" aria-labelledby="what-heading">`)
     and the products section
     (`<section class="section system-products" aria-labelledby="products-heading">`)
     use the shared `.section` class with no page-specific mobile
     override existing before now — its desktop-tuned
     `padding: clamp(4rem,8vw,8rem) 0` (css/style.css) clamps to a
     flat 64px top+bottom at every tested mobile width (8vw stays
     below the 4rem/64px floor up to ~800px viewport width). Stacked
     with the quote-block's own unmodified 40px bottom margin
     (`.quote-block` + `.mt-lg`, css/style.css — both left completely
     untouched here), the total space between the visible bottom edge
     of the quote card and the "THE COMPLETE FRAMEWORK" eyebrow text
     was ≈40+64+64 = 168px — a near-empty screen on a phone.
     Selectors below are scoped narrowly: the quote's section is
     targeted via its own unique `aria-labelledby="what-heading"`
     attribute (it has no class of its own to hook onto, and this
     attribute value is unique to this one section on this one page —
     the shared `.section`/`.bg-white` classes themselves are never
     touched, so no other page/section using them is affected); the
     products section is targeted via its own already-page-specific
     `.system-products` class (also used, unmodified, by the
     pre-existing `.system-products .divider` rule above — this task
     does not touch that rule or anything inside the product
     articles, per scope). Only the two sections' own top/bottom
     padding is reduced; the quote-block's design, text, typography,
     border and background, the framework heading/copy, and every
     product entry below are all left exactly as they are. Result:
     ≈40 (unchanged quote margin) + 8-16 (this section's reduced
     bottom padding) + 16-24 (next section's reduced top padding) ≈
     64-80px at the tested 320-430px widths — a normal, deliberate
     section gap instead of an almost-empty screen. */
  section[aria-labelledby="what-heading"] {
    padding-bottom: clamp(0.5rem, 2vw, 1rem);
  }

  /* ---- (Spacing-refinement task, added later) Reduced gap between
     "The Five Tools" strip and "THE FOUNDATION" ----
     This is the SAME `section[aria-labelledby="what-heading"]`
     element as above — only its TOP padding was still unreduced
     (still the shared `.section` 64px-flat default), which combined
     with `.ed-tools-strip`'s own bottom padding (reduced in
     css/editorial.css, see the paired comment there) to form the
     reported "Reset Kit intro → THE FOUNDATION" excessive gap. The
     bottom-padding rule directly above (pre-existing, governing the
     gap AFTER this section, before "THE COMPLETE FRAMEWORK") is left
     completely untouched. */
  section[aria-labelledby="what-heading"] {
    padding-top: clamp(1.5rem, 4vw, 2rem);
  }

  .system-products {
    padding-top: clamp(1rem, 3vw, 1.5rem);
  }

  /* ---- (Spacing-refinement task) Reduced gap between "THE COMPLETE
     FRAMEWORK" / "The five parts of the system" heading block and
     the first product image ----
     Root cause: the heading's wrapper (`<div class="text-center
     mb-xl">`) uses the shared, sitewide `.mb-xl` utility class
     (margin-bottom: 4rem / 64px, css/style.css — used on many pages,
     never edited directly), combined with `.system-products`'s own
     reduced top padding above (≈16-24px) for a total of ≈80-88px —
     more than requested. Scoped via `.system-products .mb-xl`, a
     descendant selector that only matches this ONE heading wrapper
     on this ONE page (the products-heading block is the only
     `.mb-xl` element inside `.system-products`) — the shared
     `.mb-xl` utility class itself, and every other page/section that
     uses it, is completely unaffected. `.sys-product:first-child`'s
     existing `padding-top: 0` (below) is untouched, so the first
     product image begins immediately after this reduced margin.
     Result: ≈16-24px (.system-products padding-top) + ≈32-40px
     (this reduced margin) ≈ 48-64px — matching the requested
     48-64px target, down from ≈80-88px. */
  .system-products .mb-xl {
    margin-bottom: clamp(2rem, 5vw, 2.5rem);
  }
}

/* ============================================================
   SYSTEM PAGE — Five-product section, MOBILE-ONLY vertical
   editorial redesign (≤768px).

   Reproduces, on system.html, the exact same computed mobile
   product-card design already approved on the homepage's "The
   Venvity System" section (index.html's .ed-feature / .ed-index
   .ed-row, styled in css/editorial.css's own
   @media (max-width:767px) block — the reference component this
   task was required to match, not approximate):
     - full-width landscape image, aspect-ratio 16/10, radius-md
     - small uppercase number+role line (0.66rem/600/0.11em,
       var(--text-light))
     - title at 1.3rem (same as .ed-system-intro .ed-feature .title)
     - existing System-page description, unchanged
     - price left (1.1rem) + outlined "VIEW →" button right,
       44px min-height tap target, same gap/nowrap/no-shrink
       behaviour as .ed-feature__mobile-foot / .ed-index .ed-row__foot
     - subtle divider between products (reuses the pre-existing,
       page-scoped `.system-products .divider` rule above —
       untouched)

   Scope & safety:
   - Every rule below targets ONLY system.html markup: `.sys-product`
     (page-specific, not shared with any other page), the new
     `.sys-product__num-mobile` / `.sys-product__mobile-foot`
     elements added to system.html for this task only, and existing
     descendant classes of `.sys-product` (`.sys-product__visual`,
     `.sys-product__content`, `.sys-product__features`,
     `.sys-product__meta`, `.sys-product__actions`, `.sys-product__
     number`). None of these classes are used by index.html, shop.html,
     the product detail pages, or cart/checkout.
   - `.ed-sys-product__visual .ed-frame__img-wrap` IS shared with the
     desktop/tablet zig-zag layout above (>768px) via
     css/editorial.css, but the override below applies only inside
     this same ≤768px query and only changes the aspect-ratio value
     (portait 3/4 → landscape 16/10, to match the homepage reference)
     — desktop/tablet keep the original 3/4-free desktop sizing
     (height:390px, no aspect-ratio) untouched.
   - No `order` property is used anywhere in this block. All 5
     products keep their exact DOM/source order (Annual System,
     Reset Kit, Focus Modules, Quarterly Reset, Seasonal Reset) and
     their exact visual order — the previous
     `.sys-product--reversed ... { order: 0 !important; }` rule that
     neutralised the desktop zig-zag on mobile is intentionally NOT
     recreated here because with this single-column vertical layout
     there are no longer two flex/grid tracks to reorder in the first
     place; content simply follows DOM order top-to-bottom.
   - Prices, hrefs, product names and the desktop/tablet "View Full
     Product" + "Add to Cart" buttons are untouched — this block only
     hides the desktop actions row and unhides a new, purely visual
     mobile-only price+VIEW row that points at the exact same URLs.
   - The ecosystem diagram, gap fixes, and the .timeline rules above
     (from the previous approved task) are not modified.
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Card container: simple vertical block, no grid/flex
     columns, one product per full-width block. ----
     (Spacing-refinement task) Padding reduced from the original
     clamp(1.5rem, 5vw, 1.85rem) — combined with the pre-existing
     unconditional `.system-products .divider { margin: 1.75rem 0; }`
     rule (28px top+bottom, defined once near the top of this file
     and used at every width, including desktop/tablet), the total
     space between one product's action row and the next product's
     image was ≈24-30px (this padding) + 56px (divider's two 28px
     margins) + 1px (divider line) + 24-30px (next product's own top
     padding) ≈ 105-117px — well past the requested ~64-88px target.
     Reduced here to clamp(1rem, 4vw, 1.25rem) (≈16-20px), paired with
     a new MOBILE-ONLY divider-margin override just below (the
     unconditional desktop/tablet-facing divider rule itself is left
     completely untouched, since editing it directly would also
     affect >768px). New total: ≈16-20px + 33px (divider, see below)
     + 16-20px ≈ 65-73px — within the requested 64-88px range, and
     identical for all 4 product-to-product transitions since every
     product uses this same padding value (a single consistent
     mobile rhythm, not per-transition tuning). */
  .sys-product {
    display: block;
    padding: clamp(1rem, 4vw, 1.25rem) 0;
  }

  .sys-product:first-child {
    padding-top: 0;
  }

  /* Mobile-only override of the divider margin used between
     products. The base `.system-products .divider { margin: 1.75rem
     0; }` rule (near the top of this file) is NOT edited directly —
     it continues to govern desktop/tablet (>768px) unchanged. This
     rule has equal selector specificity but appears later in the
     source and is gated by this same max-width:768px query, so it
     correctly wins the cascade only at mobile widths. 1rem (16px)
     top+bottom + the divider's own 1px line ≈ 33px total, integrating
     the divider naturally into the tightened rhythm above instead of
     stacking a separate large margin on top of it. */
  .system-products .divider {
    margin: 1rem 0;
  }

  /* ---- Image: full width, landscape 16/10 (matches homepage's
     .ed-system-intro .ed-feature .ed-frame__img-wrap /
     .ed-index .ed-row__thumb exactly), rounded var(--radius-md). ---- */
  .sys-product__visual {
    border-radius: var(--radius-md);
    box-shadow: none;
    margin-bottom: 1.1rem;
  }

  /* Higher-specificity selector (.sys-product__visual.ed-sys-product__visual,
     matching both classes actually present together on this element in
     system.html) is used deliberately here so this rule reliably beats
     css/editorial.css's own `.ed-sys-product__visual .ed-frame__img-wrap`
     mobile override (aspect-ratio: 3/4 !important — tuned for the OLD
     two-column layout) regardless of stylesheet load order: both rules
     are !important, so at equal specificity the later-loaded stylesheet
     (editorial.css, loaded after system.css in system.html's <head>)
     would otherwise win and keep the old portrait ratio. Raising this
     selector's specificity above that of the editorial.css rule removes
     that ambiguity entirely. */
  .sys-product__visual.ed-sys-product__visual .ed-frame__img-wrap {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    width: 100% !important;
    border-radius: var(--radius-md);
  }

  /* ---- Content: single column, natural reading order. ---- */
  .sys-product__content {
    display: block;
    max-width: 100%;
  }

  /* Number+role: existing desktop `.sys-product__number` +
     `.tag` pairing is replaced visually on mobile by one combined
     uppercase line, styled identically to the homepage's
     `.ed-feature__num-mobile` / `.ed-row__num` (0.66rem / 600 /
     0.11em / var(--text-light)). Desktop number + tag pill are
     hidden here only. */
  .sys-product__number,
  .sys-product__content > .tag {
    display: none;
  }

  .sys-product__num-mobile {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.4rem;
  }

  /* font-size only, matching .ed-system-intro .ed-feature .title
     exactly — margin-top is left to the existing .mt-sm utility
     class already present on this element in the markup (same as
     the homepage reference, which also relies on .mt-sm and adds
     no separate margin override here). */
  .sys-product__content .title {
    font-size: 1.3rem;
  }

  /* Feature bullet list + full meta row (Format/Price) hidden on
     mobile only — same compacting approach as before, copy stays
     untouched in the markup, unaffected on desktop/tablet. */
  .sys-product__features,
  .sys-product__meta,
  .sys-product__actions {
    display: none;
  }

  /* ---- Mobile-only compact action row: price left, outlined
     "VIEW →" button right — exact structure/values of the
     homepage's `.ed-feature__mobile-foot` / `.ed-index .ed-row__foot`. ---- */
  .sys-product__mobile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: nowrap;
    margin-top: 1.1rem;
  }

  .sys-product__mobile-foot .product-card__price {
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .sys-product__mobile-foot .btn {
    min-height: 44px;
    padding: 0.6rem 1.05rem;
    font-size: clamp(0.66rem, 2.6vw, 0.78rem);
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  /* "→" arrow appended purely via CSS, exactly as on the homepage's
     .ed-index .ed-row__foot .btn::after — the anchor's own text stays
     "View" in the HTML; the visible "VIEW →" label is a rendering-only
     combination of the button's own uppercase text-transform (inherited
     from .btn) plus this generated arrow. Desktop is unaffected since
     this rule lives inside this max-width:768px query only. */
  .sys-product__mobile-foot .btn::after {
    content: ' →';
  }

  /* ---- (Spacing-refinement task) Reduced gap between the final
     product (Seasonal Reset, including its $29 price + VIEW →
     button) and the "HOW IT CONNECTS" / "The discipline timeline"
     section ----
     Root cause: `.sys-product:last-child` has no divider after it
     (there are only 4 dividers for 5 products), so the gap here was
     purely: this product's own bottom padding (already reduced above
     to ≈16-20px) + `.system-products`'s own BOTTOM padding (still
     the shared `.section` desktop default, clamp(4rem,8vw,8rem)
     ≈64px flat — only its TOP padding had a mobile override before
     this task) + `.connection-section`'s own TOP padding (same
     shared `.section` default, ≈64px flat, no mobile override
     existed before now) ≈ 16-20 + 64 + 64 = 144-148px — a very large
     blank band.
     Both new overrides below are scoped narrowly: `.system-products`
     is already this page's own dedicated class (used, unmodified,
     elsewhere in this same file); `.connection-section` is a unique,
     single-use class found only on this one section of system.html
     (confirmed via a project-wide search) — so neither touches any
     other page or the shared `.section` class itself. Result:
     ≈16-20px (product's own padding) + ≈20-28px (.system-products
     reduced bottom padding) + ≈28-36px (.connection-section reduced
     top padding) ≈ 64-84px — within the requested 64-88px target,
     down from ≈144-148px. The timeline's own internal design
     (markers, cards, copy) and everything below it are untouched. */
  .system-products {
    padding-bottom: clamp(1.25rem, 3.5vw, 1.75rem);
  }

  .connection-section {
    padding-top: clamp(1.75rem, 4.5vw, 2.25rem);
  }
}