/* ── adv_4 — native "last-wish" story advertorial ───────────────────────────
   Loaded AFTER static/editorial/editorial.css. editorial.css styles every
   shared block partial (templates/editorial/_blocks/*); this sheet re-skins
   them to the reference (docs/product/template_imports/adv_4/): white ground,
   a dark full-width "Advertorial" bar, an italic breadcrumb, a red Roboto
   kicker over a serif-italic H1, a blue underlined update line, a ~780px
   article column beside a ~300px rail whose card starts at the first offer,
   yellow-tinted quote / testimonial boxes, FAQ questions on tinted bars, a red
   dashed offer-alert box, square green full-width CTAs and Facebook-style
   comments.

   Scope: every rule is under body.a4 (or a .a4-* class), so nothing here can
   reach adv_2 / adv_3 even if the stylesheets ever met on one page.
   Units: editorial.css sets html{font-size:10px}; this sheet uses px.
   RTL contract (lp/constants_locales.RTL_READY_TEMPLATES): logical
   properties only above the [dir="rtl"] block.
   CTA contract (comp_adv_1 rounds 1 and 4): button selectors are
   element+class selectors scoped under body.a4, which outrank editorial.css's
   single-class button rules and every `a` reset, and modifiers are written in
   full. Fonts: Lora / Roboto first, Open Sans second in every stack, so a
   glyph the display face lacks falls through to a loaded face. */

body.a4 {
  --a4-ink: #222;
  --a4-ink-2: #000;
  --a4-muted: #555;
  --a4-line: #e3e3e3;
  --a4-bar: #3b3735;
  --a4-red: #e10600;
  --a4-blue: #0b57d0;
  --a4-cta: #00AD41;
  --a4-cta-dark: #008f35;
  --a4-tint: #fdf6d3;
  --a4-tint-line: #e2c75a;
  --a4-faq: #fff3b0;
  --a4-body: "Open Sans", "Inter", sans-serif;
  --a4-sans: Roboto, "Open Sans", sans-serif;
  --a4-serif: Lora, "Open Sans", Georgia, serif;
  background: #fff;
  color: var(--a4-ink);
  font-family: var(--a4-body);
  --ed-font-body: var(--a4-body);
  --ed-font-head: var(--a4-sans);
}
/* The canvas past the document takes html's background; keep it the page's
   white and stop the bounce flashing it under the dark footer (comp_adv_1,
   2026-09-11; adv_3). */
html:has(body.a4) { overscroll-behavior-y: none; background: #fff; }

/* editorial.css leaves elements content-box and sizes .artmag-inner at
   width:100%, so any inline padding widens the phone layout viewport (the
   adv_3 430-on-390 lesson). Border-box across the whole adv_4 page. */
body.a4, body.a4 *, body.a4 *::before, body.a4 *::after { box-sizing: border-box; }

/* ── Disclosure = the dark "Advertorial" bar ── */
body.a4 .advertorial {
  background: var(--a4-bar); color: #fff; font-family: var(--a4-sans);
  font-size: 15px; line-height: 1.4; letter-spacing: 0; text-transform: none;
  text-align: center; padding: 3px 16px; margin: 0;
}

/* ── Layout: article column + rail ── */
body.a4 .artmag { background: transparent; padding: 0; }
body.a4 .artmag-inner { max-width: 1170px; margin-inline: auto; padding-inline: 20px; gap: 40px; align-items: stretch; }
body.a4 .artmag-content { background: transparent; box-shadow: none; padding: 0; flex: 1 1 auto; max-width: 790px; }
body.a4 .artmag-content-inner { padding: 22px 0 40px; }
/* The rail stretches to the article's height so its card can travel; the rail
   script pads it down to the first offer block. */
body.a4 .sidebar { position: static; align-self: stretch; flex: 0 0 300px; max-width: 300px; padding-block-start: 22px; }
body.a4 .sidebar-inner { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 0; border-radius: 0; padding: 0 4px; box-shadow: none; text-align: center; }
/* Sidebar hidden (sidebar.enabled == false): the single-column rule is emitted
   inline by the template only on such pages — the house contract from
   OPERATOR_SIDEBAR_VISIBILITY_CONTROLS, so this sheet never changes for it. */

/* ── Breadcrumb / kicker / H1 / update line ── */
body.a4 .breadcrumb-row { margin: 0 0 6px; }
body.a4 .breadcrumb-row .breadcrumb-text { font-family: var(--a4-sans); font-style: italic; font-size: 14px; color: var(--a4-ink-2); }
body.a4 .breadcrumb-row .breadcrumb-text a { color: var(--a4-ink-2); text-decoration: none; }
body.a4 .breadcrumb-row .breadcrumb-text a:hover { text-decoration: underline; }
body.a4 .breadcrumb-row .breadcrumb-sep { color: var(--a4-ink-2); margin-inline: 2px; }
body.a4 .a4-kicker { font-family: var(--a4-sans); font-weight: 700; font-size: 30px; line-height: 1.25; color: var(--a4-red); margin: 0 0 4px; }
body.a4 .headline { font-family: var(--a4-serif); font-style: italic; font-weight: 700; font-size: 36px; line-height: 1.45; color: var(--a4-ink-2); margin: 0 0 12px; letter-spacing: 0; }
body.a4 .a4-update { font-family: var(--a4-sans); font-weight: 500; font-size: 18px; line-height: 1.45; margin: 0 0 18px; }
body.a4 .a4-update a { color: var(--a4-blue); text-decoration: underline; }
body.a4 .a4-update a:hover { color: #083b8e; }
body.a4 .status-eyebrow { font-family: var(--a4-sans); }
body.a4 .meta-row, body.a4 .meta-text { font-family: var(--a4-sans); font-size: 13px; color: var(--a4-muted); }
body.a4 .author-row { margin-block: 6px 14px; }
body.a4 .author-row-info-name { font-family: var(--a4-sans); font-size: 14px; color: var(--a4-ink); }
body.a4 .author-row-info-credentials { font-family: var(--a4-sans); font-size: 12px; color: var(--a4-muted); }

/* ── Body type ── */
body.a4 .content-block-title { font-family: var(--a4-sans); font-size: 28px; line-height: 1.3; font-weight: 700; color: var(--a4-ink-2); margin: 32px 0 12px; border: 0; padding: 0; text-align: start; }
body.a4 .content-block-title::before, body.a4 .content-block-title::after { display: none; }
body.a4 .content-block-article, body.a4 .content-block-article p, body.a4 .lead-paragraph, body.a4 .lead-paragraph p { font-family: var(--a4-body); font-size: 17px; line-height: 1.6; color: var(--a4-ink); }
body.a4 .content-block-article p { margin: 0 0 16px; }
body.a4 .content-block-article strong, body.a4 .content-block-article b { font-weight: 700; color: var(--a4-ink-2); }
body.a4 .content-block-article a { color: var(--a4-blue); }
body.a4 .content-block-article ul, body.a4 .content-block-article ol { padding-inline-start: 22px; margin: 0 0 16px; }
body.a4 .content-block-article li { margin-block-end: 6px; }

/* ── Images + captions ── */
body.a4 .hero-image, body.a4 .content-block-image { margin: 14px 0 22px; }
body.a4 .hero-image img, body.a4 .content-block-image img { width: 100%; height: auto; border-radius: 0; display: block; }
body.a4 .hero-image-caption, body.a4 .content-block-image-caption {
  font-family: var(--a4-body); font-style: italic; font-size: 17px; line-height: 1.55;
  color: #333; margin-block-start: 12px; padding-inline: 10px; text-align: start; background: none;
}
body.a4 .content-block-image-pair { gap: 12px; }

/* ── Deck: an italic quoted standfirst, never a box ── */
body.a4 .editorial-deck, body.a4 .a4-deck .editorial-deck {
  display: block; background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 0 10px; margin: 0 0 24px; font-family: var(--a4-body); font-style: italic;
  font-size: 17px; line-height: 1.6; color: #333;
}
body.a4 .editorial-deck p { margin: 0 0 12px; font-size: 17px; color: #333; }
body.a4 .editorial-deck p:last-child { margin-block-end: 0; }
body.a4 .editorial-deck-kicker { display: block; font-style: normal; font-weight: 700; color: var(--a4-ink-2); text-transform: none; letter-spacing: 0; font-size: 17px; margin-block-end: 6px; }

/* ── Quote boxes: the reference's yellow dashed box ── */
body.a4 .pull-quote {
  background: var(--a4-tint); border: 2px dashed var(--a4-tint-line); border-radius: 0;
  padding: 18px 20px; margin: 22px 0; font-family: var(--a4-body); font-style: italic;
  font-weight: 700; font-size: 17px; line-height: 1.55; color: var(--a4-ink-2); text-align: start;
}
body.a4 .pull-quote::before, body.a4 .pull-quote::after { content: none; }
body.a4 .pull-quote-attribution { font-style: normal; font-weight: 700; font-size: 14px; color: var(--a4-ink); margin-block-start: 10px; }
body.a4 .callout-box { background: var(--a4-tint); border: 0; border-inline-start: 4px solid var(--a4-tint-line); border-radius: 0; padding: 16px 18px; margin: 22px 0; }
body.a4 .callout-box-heading { font-family: var(--a4-sans); font-weight: 700; font-size: 18px; color: var(--a4-ink-2); }

/* ── Steps: the reference's 4-up step strip ── */
body.a4 .mechanism-cards-wrapper { margin: 26px 0; }
body.a4 .mechanism-cards-heading { font-family: var(--a4-sans); font-weight: 700; font-size: 22px; color: var(--a4-ink-2); margin: 0 0 12px; }
body.a4 .mechanism-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
body.a4 .mechanism-card { background: #f4f7f9; border: 1px solid var(--a4-line); border-radius: 4px; padding: 14px; margin: 0; box-shadow: none; text-align: start; }
/* In flow at the card's top-left: undo editorial.css's absolute, edge-pinned
   circle (top:-1.6rem; centred; 3.2rem line-height), which otherwise floats
   this pill over the card edge onto the first line of text. */
body.a4 .mechanism-card-step { position: static; top: auto; left: auto; transform: none; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: auto; height: auto; border-radius: 3px; padding: 4px 10px; background: var(--a4-cta); color: #fff; font-family: var(--a4-sans); font-weight: 700; font-size: 14px; }
body.a4 .mechanism-card-title { font-family: var(--a4-sans); font-weight: 700; font-size: 16px; color: var(--a4-ink-2); margin: 10px 0 6px; }
body.a4 .mechanism-card-body { font-family: var(--a4-body); font-size: 15px; line-height: 1.5; color: var(--a4-ink); margin: 0; }
/* The timeline variant carries its own inline <style>; restate the accent. */
body.a4 .mechanism-cards-wrapper--timeline .mechanism-card { border-inline-start: 3px solid var(--a4-cta); }
body.a4 .mechanism-card-step--timeline { background: var(--a4-cta); }
body.a4 .mechanism-card-step--timeline + .mechanism-card-body { margin-top: 10px; }

/* ── FAQ: questions on tinted bars ── */
body.a4 .objection-block-wrapper { margin: 28px 0; background: none; border: 0; padding: 0; box-shadow: none; }
body.a4 .objection-block-heading { font-family: var(--a4-sans); font-weight: 700; font-size: 28px; color: var(--a4-ink-2); margin: 0 0 14px; }
body.a4 .objection-block-list { margin: 0; }
body.a4 .objection-block-item { margin: 0 0 18px; padding: 0; border: 0; background: none; }
body.a4 .objection-block-q { display: block; background: var(--a4-faq); font-family: var(--a4-sans); font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--a4-ink-2); padding: 8px 12px; margin: 0 0 10px; }
body.a4 .objection-block-q::before, body.a4 .objection-block-q::after { content: none; }
body.a4 .objection-block-a { font-family: var(--a4-body); font-size: 16px; line-height: 1.6; color: var(--a4-ink); margin: 0; padding: 0 2px; }

/* ── Social proof: testimonial boxes + Facebook-style comments ── */
body.a4 .testimonial-block-cards-heading, body.a4 .comments-header { font-family: var(--a4-sans); font-size: 26px; font-weight: 700; color: var(--a4-ink-2); margin: 32px 0 14px; text-align: start; }
body.a4 .testimonial-cards-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
body.a4 .testimonial-card { background: var(--a4-tint); border: 0; border-radius: 0; box-shadow: none; padding: 20px 22px; margin: 0; display: block; }
body.a4 .testimonial-card-quote { font-family: var(--a4-body); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--a4-ink); margin: 0 0 12px; }
body.a4 .testimonial-card-quote::before, body.a4 .testimonial-card-quote::after { content: none; }
body.a4 .testimonial-card-attr { font-family: var(--a4-sans); font-style: normal; font-size: 14px; font-weight: 700; color: var(--a4-ink-2); }
body.a4 .testimonial-card-stars { color: #f5a623; }
body.a4 .comments { background: transparent; border: 0; box-shadow: none; padding: 0; margin-block-start: 30px; }
body.a4 .comments-header { font-size: 20px; border-block-end: 1px solid var(--a4-line); padding-block-end: 8px; }
body.a4 .comment-item { background: transparent; border: 0; border-radius: 0; padding: 10px 0; margin: 0; }
body.a4 .comment-item-body { background: #f0f2f5; border-radius: 14px; padding: 8px 12px; }
body.a4 .comment-item-body-name { font-family: var(--a4-sans); font-weight: 700; font-size: 14px; color: #385898; }
body.a4 .comment-item-body-text { font-family: var(--a4-sans); font-size: 15px; line-height: 1.45; color: #1c1e21; }

/* ── Offer close: alert box, deal box, P.S. ── */
body.a4 .offer-box-alert {
  background: #fff8e1; border: 2px dashed var(--a4-red); border-radius: 4px;
  padding: 14px 16px; margin: 22px 0; text-align: center; font-family: var(--a4-sans);
  font-size: 16px; line-height: 1.5; color: var(--a4-ink-2);
}
body.a4 .offer-box-alert strong, body.a4 .offer-box-alert b { color: var(--a4-red); }
body.a4 .eds-offer { border: 2px solid var(--a4-line); border-radius: 4px; box-shadow: none; }
body.a4 .eds-offer-title { font-family: var(--a4-sans); color: var(--a4-red); }
body.a4 .eds-offer-line { font-family: var(--a4-sans); }
body.a4 .eds-offer-now { color: var(--a4-red); }
body.a4 .ps-block { font-family: var(--a4-body); }

/* ── Buttons (every CTA surface on the page) ── */
body.a4 a.mgbutton, body.a4 a.content-block-cta-btn, body.a4 a.sidebar-cta,
body.a4 a.mid-cta-card-button, body.a4 a.eds-offer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--a4-cta); color: #fff; border: 0; border-radius: 3px;
  font-family: var(--a4-sans); font-size: 18px; font-weight: 700; text-transform: none;
  letter-spacing: 0; line-height: 1.3; text-align: center; text-decoration: none;
  padding: 15px 18px; box-shadow: none; width: 100%; max-width: 100%;
}
body.a4 a.mgbutton:hover, body.a4 a.content-block-cta-btn:hover, body.a4 a.sidebar-cta:hover,
body.a4 a.mid-cta-card-button:hover, body.a4 a.eds-offer-cta:hover { background: var(--a4-cta-dark); color: #fff; }
body.a4 a.mgbutton:focus-visible, body.a4 a.content-block-cta-btn:focus-visible, body.a4 a.sidebar-cta:focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }
body.a4 .final-cta { margin: 28px 0; text-align: center; background: none; padding: 0; border: 0; }
body.a4 .final-cta-html, body.a4 .final-cta-html p { font-family: var(--a4-body); font-size: 17px; color: var(--a4-ink); }

/* ── Rail card ── */
body.a4 .a4-rail-note { font-family: var(--a4-sans); font-size: 14px; line-height: 1.45; color: var(--a4-ink); margin: 0; }
body.a4 .sidebar-headline { font-family: var(--a4-sans); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--a4-ink-2); text-align: center; margin: 0; }
body.a4 .sidebar-product img { width: 100%; height: auto; border-radius: 0; }
body.a4 .sidebar-benefits { list-style: none; margin: 0; padding: 0; text-align: start; }
body.a4 .sidebar-benefits li { display: flex; gap: 8px; align-items: center; font-family: var(--a4-sans); font-size: 14px; color: var(--a4-ink); margin-block-end: 6px; }
body.a4 .sidebar-benefits-icon { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--a4-cta); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
body.a4 .sidebar-rating-star { color: #f5a623; }
body.a4 a.sidebar-cta { font-size: 16px; padding: 12px 14px; }

/* ── Sticky CTA: a full-width green bottom bar ── */
body.a4 .sticky-cta { background: var(--a4-cta); border: 0; box-shadow: 0 -4px 16px rgba(0,0,0,.18); top: auto; bottom: 0; transform: translateY(calc(100% + 20px)); }
/* Anchored to the BOTTOM: hidden = slid down past the edge (+20px clears the
   upward shadow); the visible rule must be restated because the rule above
   outranks .sticky-cta--visible (the adv_3 2026-09-29 fix). */
body.a4 .sticky-cta.sticky-cta--visible { transform: translateY(0); }
body.a4 .sticky-cta-inner { max-width: 1170px; justify-content: center; padding: 8px 16px; }
body.a4 .sticky-cta-thumb, body.a4 .sticky-cta-text { display: none; }
body.a4 a.sticky-cta-btn { background: transparent; color: #fff; box-shadow: none; border: 0; font-family: var(--a4-sans); font-size: 17px; font-weight: 700; padding: 8px 12px; width: auto; }
body.a4 a.sticky-cta-btn:hover { background: transparent; color: #fff; text-decoration: underline; }

/* ── Footer + clearance for the sticky bar ── */
body.a4 .site-footer { margin-block-start: 0; padding-block-end: 80px; }

/* ── Mobile ── */
@media (max-width: 750px) {
  body.a4 .advertorial { font-size: 14px; }
  body.a4 .artmag-inner { padding-inline: 12px; }
  body.a4 .artmag-content-inner { padding-block-start: 16px; }
  body.a4 .a4-kicker { font-size: 26px; }
  body.a4 .headline { font-size: 30px; line-height: 1.4; }
  body.a4 .a4-update { font-size: 17px; }
  body.a4 .content-block-title { font-size: 25px; }
  body.a4 .content-block-article, body.a4 .content-block-article p, body.a4 .lead-paragraph, body.a4 .lead-paragraph p { font-size: 16px; }
  body.a4 .hero-image-caption, body.a4 .content-block-image-caption, body.a4 .editorial-deck, body.a4 .editorial-deck p { font-size: 16px; padding-inline: 0; }
  body.a4 .mechanism-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.a4 .objection-block-heading { font-size: 25px; }
}

/* ── RTL exceptions ── star rows stay left-to-right. */
[dir="rtl"] body.a4 .sidebar-rating-stars, [dir="rtl"] body.a4 .testimonial-card-stars { direction: ltr; unicode-bidi: isolate; }