/* ==========================================================================
   /ad_optimization/ — page-specific layout
   Links after site.css (tokens/buttons) + inner.css (shared inner-page bits).
   The bulk of this page is shared components from inner.css: the dark-art
   `.ihero`, `.grad-head`, `.ipanel`, the `.cmp--refresh` + `.cmp--factors`
   comparison tables and the `.inner-cta` CTA band. Only the per-section
   arrangement, the hero variant (centred split title, illustration instead
   of the framed video) and the numbered `.step-list` live here.
   ========================================================================== */

/* Body offset: fixed 82px header + fixed 50px 2nd-level strip (>=1200px).
   Below 1200px the strip is hidden and the header collapses to the 60px
   mobile bar, so the strip's 50px is dropped. (matches monetization.css) */
body { padding-top: 132px; }
@media screen and (max-width: 1199px) { body { padding-top: 60px; } }

/* ============================================================= 01 hero variant
   Same dark-art `.ihero` template, but: title is a centred two-run split
   (coral line on top via <em>, white line below), and the left cell holds a
   plain illustration (no white video frame) with copy + one CTA on the right. */
.ihero-inner { position: relative; z-index: 1; }

/* Active item in the 2nd-level strip. The partial's inline script normally
   bolds the item matching the pathname, but it collides with another global
   `path` declaration on the page (pre-existing SyntaxError), so mark it here
   page-scoped instead of editing the shared partial. */
#menu-2nd #to-ad-optimization a { font-weight: 900; }
.ao-hero-grid { align-items: center; }
.ao-hero-visual { text-align: center; }
/* beat inner.css `.two-col .col-visual img { width:100% }` is n/a here (not
   inside .two-col); size the illustration explicitly */
.ao-hero-illus { width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.ao-hero-sub { max-width: 520px; }

/* ==================================================== 02 Smart Ad Refresh
   Reuses `.cmp--refresh` from inner.css verbatim. The variant vs monetization
   is the numbered step list (instead of the green-check list) and a composed
   browser illustration with two floating accents. */
.refresh-top { align-items: center; margin: 26px 0 46px; gap: 48px; }

.refresh-visual { position: relative; }
/* Frame + animation stack. Live (Tilda rec776671828) layers an animated GIF
   (comp-11_2.gif, 550x350) over the static browser-chrome SVG; the wrapper is
   the positioning context so the video keeps the same relative slot at every
   width. Percentages are live's render (41/489 left, 53/369.9 top,
   408/489 wide, 259.6/369.9 tall) against the frame box. */
.refresh-frame { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
/* selectors must beat inner.css `.two-col .col-visual img { width:100% }` (0,2,1) */
.two-col .col-visual .refresh-browser { width: 100%; max-width: 520px; display: block; }
.refresh-anim {
  position: absolute;
  left: 8.384%; top: 14.328%; width: 83.436%; height: 70.19%;
  object-fit: fill;
}
.two-col .col-visual .refresh-avatar {
  position: absolute; right: 4%; top: -22px;
  width: 62px; height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,120,110,.28));
}
.two-col .col-visual .imp-badge {
  position: absolute; left: -3%; bottom: 8%;
  width: 150px; height: auto;
  filter: drop-shadow(0 16px 30px rgba(10,12,40,.16));
}

/* numbered step list — outlined circle counter + paragraph.
   NB: no `padding` reset on `.step-list` — it has the same specificity as
   `.step-panel` but is declared later, so it used to zero out the panel's
   inset and the tinted `.ipanel` background hugged/clipped the text. The
   `.step-panel` shorthand already overrides the UA <ol> marker indent. */
.step-panel { padding: 34px 40px; }
.step-list { list-style: none; margin: 0; counter-reset: step; }
.step-list > li {
  position: relative; padding-left: 60px; margin-bottom: 26px;
  font-size: 16px; line-height: 1.55; color: var(--body);
  counter-increment: step;
}
.step-list > li:last-child { margin-bottom: 0; }
.step-list > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -3px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #D7DDE8; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; color: var(--body);
}

/* ------------------------------------------------ 03 Price Floor Optimization */
.pricefloor-note { margin-top: 30px; padding: 30px 34px; }

/* ------------------------------------------------------ 04 Adaptive Ad Layout */
.adaptive-visual { text-align: center; }
.speed-labels {
  display: flex; justify-content: space-around;
  max-width: 320px; margin: 12px auto 12px;
}
.speed-labels span { font-size: 25px; font-weight: 700; color: var(--navy); }
/* Connection-speed demo: live is an autoplay/loop MP4 (Tilda video atom,
   500x472 source) rendered ~309px wide; mirror it with a muted autoplay
   <video>. See monetization.css for rationale. Uses the shared MP4 under
   /img/monetization/, which was re-encoded 2026-08-04 to drop the 1px black
   bottom row that showed as a hairline under the phones (see monetization.css). */
.adaptive-visual .speed-video {
  display: block; width: 100%; max-width: 309px;
  margin: 0 auto; border-radius: 4px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; gap: 34px; }
  .ihero-grid { grid-template-columns: 1fr; gap: 28px; }
  .refresh-top { gap: 30px; }
}

@media screen and (max-width: 860px) {
  .ihero { padding: 32px 0 44px; }
  .ihero-title { font-size: clamp(30px, 8vw, 44px); margin: 6px 0 28px; }
  .ao-hero-sub { font-size: 16px; max-width: none; }
  .ihero-cta .pill-btn { min-width: 180px; }

  .ipanel { padding: 30px 24px; border-radius: 28px; }
  .step-panel { padding: 26px 22px; }

  /* comparison tables: shrink type, keep inside the panel (no page scroll) */
  .cmp--refresh { padding-left: 16px; }
  /* Mobile keeps close to the desktop type scale (tester: the 14px version
     read cramped next to the old overflowing one): 15px cells / 16px bold
     headers, roomier 15px vertical padding, tighter 8px horizontal padding so
     the three auto-layout columns still fit 390px with no page h-scroll. */
  .cmp--refresh th, .cmp--refresh td { padding: 15px 8px; font-size: 15px; overflow-wrap: break-word; }
  .cmp--refresh thead th { font-size: 16px; line-height: 1.3; padding-top: 22px; padding-bottom: 18px; }
  /* Italian only: "Implementazione dell'aggiornamento" exceeds a third of
     390px even alone on a line, forcing the auto-layout table past its card.
     Dictionary hyphenation (page lang="it") keeps it inside. Other languages
     fit whole words, so they stay unhyphenated. */
  :lang(it) .cmp--refresh th, :lang(it) .cmp--refresh td { hyphens: auto; }
  /* auto layout: let columns size to their words so long ES/PT words
     ("Configuración incorrecta") are not clipped by fixed equal columns */
  .cmp--refresh table { table-layout: auto; }
  .cmp--factors { padding: 4px 16px 10px; }
  .cmp--factors th, .cmp--factors td { padding: 12px 4px; }
  .cmp--factors thead th { font-size: 15px; white-space: normal; }
  .cmp--factors tbody td:first-child { font-size: 14px; }
  .cmp--factors tbody td:first-child, .cmp--factors thead th:first-child { width: 36%; }

  .refresh-avatar { width: 52px; height: 52px; }
  .imp-badge { width: 120px; }
}

@media screen and (max-width: 480px) {
  /* Below ~480px the 16px bold headers' longest words ("Implementación",
     "Configuración") force the three-column auto layout wider than the white
     card; one step down keeps whole words and the card edge intact. */
  .cmp--refresh thead th { font-size: 15px; }
}