/* ── adv_3 — founder-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_3/): warm paper
   ground, near-black ink in a system sans, one ~760px story column beside a
   ~350px sticky sidebar, deep-red rounded CTAs, italic image captions, a
   tinted story box and a black footer.

   Scope: every rule is under body.a3 (or a .a3-* class), so nothing here can
   reach adv_2 even if the two 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.a3, which outrank editorial.css's single-class
   button rules and every `a` reset, and modifiers are written in full. */

body.a3 {
  --a3-paper: #f7f3f0;
  --a3-ink: #1f1f1f;
  --a3-ink-2: #242424;
  --a3-muted: #575757;
  --a3-line: #e7ded6;
  --a3-red: #9e2b25;
  --a3-red-dark: #7f211c;
  --a3-box: #ede3d2;
  --a3-card: #fff0e3;
  --a3-review: #fbfbfb;
  --a3-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  background: var(--a3-paper);
  color: var(--a3-ink);
  font-family: var(--a3-font);
  --ed-font-body: var(--a3-font);
  --ed-font-head: var(--a3-font);
}
/* The canvas past the document takes html's background; the footer is black,
   so a bounce would flash paper under it (comp_adv_1, 2026-09-11). */
html:has(body.a3) { overscroll-behavior-y: none; background: #f7f3f0; }

/* ── Header + disclosure ── */
body.a3 .a3-header { background: #fff; text-align: center; padding: 6px 16px; border-block-end: 1px solid var(--a3-line); }
body.a3 .a3-logo { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; color: var(--a3-ink); text-decoration: none; }
body.a3 .a3-logo img { max-height: 52px; width: auto; display: block; }
body.a3 .a3-logo-text { font-family: var(--a3-font); font-weight: 700; font-size: 24px; letter-spacing: .02em; }
body.a3 .advertorial { background: transparent; color: #8a8178; font-family: var(--a3-font); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding-block: 8px 0; }

/* ── Layout: story column + sticky sidebar ── */
/* editorial.css leaves elements content-box and sizes .artmag-inner at
   width:100%, so this sheet's inline padding pushed the page 40px past a
   390px viewport. Border-box across the adv_3 page (its own shell AND the
   shared partials it re-skins) makes every width include its padding. */
body.a3, body.a3 *, body.a3 *::before, body.a3 *::after { box-sizing: border-box; }
body.a3 .artmag { background: transparent; }
body.a3 .artmag-inner { max-width: 1200px; margin-inline: auto; padding-inline: 20px; gap: 64px; }
body.a3 .artmag-content { background: transparent; box-shadow: none; padding: 0; max-width: 760px; }
body.a3 .artmag-content-inner { padding: 24px 0 40px; }
body.a3 .sidebar { flex: 0 0 348px; max-width: 348px; padding-block-start: 24px; }
body.a3 .sidebar-inner { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid #cfcfcf; border-radius: 10px; padding: 15px; box-shadow: none; }

/* ── Type ── */
body.a3 .headline { font-family: var(--a3-font); font-size: 36px; line-height: 1.4; font-weight: 700; color: var(--a3-ink); margin: 0 0 12px; letter-spacing: 0; }
body.a3 .content-block-title { font-family: var(--a3-font); font-size: 26px; line-height: 1.3; font-weight: 700; color: #000; margin: 34px 0 10px; border: 0; padding: 0; }
body.a3 .content-block-title::before, body.a3 .content-block-title::after { display: none; }
body.a3 .content-block-article, body.a3 .content-block-article p { font-family: var(--a3-font); font-size: 17px; line-height: 1.55; color: var(--a3-ink); }
body.a3 .content-block-article p { margin: 0 0 16px; }
body.a3 .content-block-article strong, body.a3 .content-block-article b { font-weight: 700; color: var(--a3-ink); }
body.a3 .meta-row, body.a3 .meta-text { font-family: var(--a3-font); font-size: 13px; color: var(--a3-muted); }
body.a3 .author-row { margin-block: 6px 16px; }
body.a3 .author-row-info-name { font-family: var(--a3-font); font-size: 14px; color: var(--a3-ink); }
body.a3 .author-row-info-credentials { font-family: var(--a3-font); font-size: 12px; color: var(--a3-muted); }

/* ── Images + captions ── */
body.a3 .hero-image, body.a3 .content-block-image { margin: 16px 0 26px; }
body.a3 .hero-image img, body.a3 .content-block-image img { width: 100%; height: auto; border-radius: 0; display: block; }
body.a3 .hero-image-caption, body.a3 .content-block-image-caption {
  font-family: var(--a3-font); font-style: italic; font-size: 15px; line-height: 1.45;
  color: var(--a3-ink-2); margin-block-start: 10px; text-align: start; padding: 0; background: none;
}

/* ── Story box: every editorial deck (the one under the hero and any in-stream
      deck block) takes the reference's tinted callout. ── */
body.a3 .editorial-deck, body.a3 .a3-storybox .editorial-deck {
  display: block; background: var(--a3-box); border: 0; border-inline-start: 4px solid var(--a3-red);
  border-radius: 0; padding-block: 16px; padding-inline: 14px 16px; margin: 8px 0 30px; font-family: var(--a3-font);
  font-size: 17px; line-height: 1.55; color: #000; font-style: normal; box-shadow: none;
}
body.a3 .editorial-deck p { margin: 0 0 16px; font-size: 17px; color: #000; }
body.a3 .editorial-deck p:last-child { margin-block-end: 0; }
body.a3 .editorial-deck-kicker { display: block; font-weight: 700; margin-block-end: 6px; color: #000; text-transform: none; letter-spacing: 0; font-size: 17px; }

/* ── Buttons (every CTA surface on the page) ── */
body.a3 a.a3-btn, body.a3 a.mgbutton, body.a3 a.content-block-cta-btn, body.a3 a.sidebar-cta,
body.a3 a.mid-cta-card-button, body.a3 a.eds-offer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--a3-red); color: #fff; border: 0; border-radius: 8px;
  font-family: var(--a3-font); font-size: 16px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.25; text-align: center; text-decoration: none;
  padding: 12px 16px; box-shadow: none; width: 100%; max-width: 100%;
  box-sizing: border-box;   /* editorial.css leaves content-box: 100% + padding overflowed the column */
}
body.a3 a.a3-btn:hover, body.a3 a.mgbutton:hover, body.a3 a.content-block-cta-btn:hover, body.a3 a.sidebar-cta:hover,
body.a3 a.mid-cta-card-button:hover, body.a3 a.eds-offer-cta:hover { background: var(--a3-red-dark); color: #fff; }
body.a3 a.a3-btn:focus-visible, body.a3 a.mgbutton:focus-visible, body.a3 a.content-block-cta-btn:focus-visible { outline: 3px solid #d9a441; outline-offset: 2px; }
body.a3 a.a3-btn.a3-btn--outline { width: auto; min-width: 200px; margin-inline: auto; border: 1px solid #222; }
body.a3 .final-cta { margin: 30px 0; text-align: center; background: none; padding: 0; border: 0; }
body.a3 .final-cta-html, body.a3 .final-cta-html p { font-family: var(--a3-font); font-size: 17px; color: var(--a3-ink); }

/* ── "Take a closer look" card ── */
body.a3 .a3-closer { margin: 40px 0 34px; }
body.a3 .a3-closer-heading { font-family: var(--a3-font); font-size: 26px; font-weight: 700; color: #000; margin: 0 0 12px; }
body.a3 .a3-closer-card { display: grid; grid-template-columns: 1fr 1fr; background: var(--a3-card); border: 1px solid #d9cfc7; border-radius: 10px; overflow: hidden; min-height: 240px; }
body.a3 .a3-closer-card--noimg { grid-template-columns: 1fr; }
body.a3 .a3-closer-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px; text-align: center; }
body.a3 .a3-closer-text { font-family: var(--a3-font); font-size: 18px; font-weight: 700; color: var(--a3-ink-2); margin: 0; }
body.a3 .a3-closer-note { font-family: var(--a3-font); font-size: 14px; font-style: italic; color: #151515; margin: 0; }
body.a3 .a3-closer-img { display: block; min-height: 100%; }
body.a3 .a3-closer-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Social proof: testimonial cards + comments ── */
body.a3 .testimonial-block-cards-heading, body.a3 .comments-header { font-family: var(--a3-font); font-size: 26px; font-weight: 700; color: #000; margin: 34px 0 14px; text-align: start; }
body.a3 .testimonial-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
body.a3 .testimonial-card { background: var(--a3-review); border: 0; border-radius: 0; box-shadow: none; padding: 32px 22px; margin: 0; display: block; }
body.a3 .testimonial-card-photo { margin-block-end: 12px; }
body.a3 .testimonial-card-quote { font-family: var(--a3-font); font-size: 16px; line-height: 1.5; color: #000; font-style: normal; margin: 0 0 14px; }
/* the partial already wraps the quote in "…"; editorial.css's decorative
   marks on top read as doubled quotes on this plainer design */
body.a3 .testimonial-card-quote::before, body.a3 .testimonial-card-quote::after { content: none; }
body.a3 .testimonial-card-attr { font-family: var(--a3-font); font-style: normal; font-size: 13px; font-weight: 700; color: var(--a3-ink-2); }
body.a3 .testimonial-card-stars { color: #d9a441; }
body.a3 .comments { background: transparent; border: 0; box-shadow: none; padding: 0; }
body.a3 .comment-item { background: var(--a3-review); border: 0; border-radius: 0; padding: 22px; margin-block-end: 14px; }
body.a3 .comment-item-body-name { font-family: var(--a3-font); font-weight: 700; font-size: 14px; color: var(--a3-ink-2); }
body.a3 .comment-item-body-text { font-family: var(--a3-font); font-size: 16px; line-height: 1.5; color: #000; }
body.a3 .pull-quote { font-family: var(--a3-font); border-inline-start: 4px solid var(--a3-red); color: #000; }

/* ── Sidebar (offer card + review card) ── */
body.a3 .sidebar-headline { font-family: var(--a3-font); font-size: 16px; font-weight: 700; color: #000; text-align: center; margin: 0; }
body.a3 .sidebar-product img { width: 100%; height: auto; border-radius: 0; }
body.a3 .sidebar-benefits { list-style: none; margin: 0; padding: 0; }
body.a3 .sidebar-benefits li { display: flex; gap: 10px; align-items: center; font-family: var(--a3-font); font-size: 16px; color: #424153; margin-block-end: 6px; }
body.a3 .sidebar-benefits-icon { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--a3-red); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
body.a3 .sidebar-rating-star { color: #d9a441; }

/* ── Favourites grid ── */
body.a3 .a3-favorites { background: #fff; padding: 44px 20px 60px; }
body.a3 .a3-favorites-inner { max-width: 1246px; margin-inline: auto; display: flex; flex-direction: column; gap: 26px; }
body.a3 .a3-favorites-heading { font-family: var(--a3-font); font-size: 32px; font-weight: 700; color: #000; margin: 0; }
body.a3 .a3-favorites-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.a3 .a3-fav { display: block; color: #121212; text-decoration: none; }
body.a3 .a3-fav-img { position: relative; aspect-ratio: 1 / 1; background: #fff; }
body.a3 .a3-fav-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
body.a3 .a3-fav-badge { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 1; background: #faf7f5; color: #d63837; font-family: var(--a3-font); font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 6px; }
body.a3 .a3-fav-name { font-family: var(--a3-font); font-size: 16px; margin-block-start: 12px; }

/* ── Sticky CTA: the reference's full-width red bottom bar ── */
body.a3 .sticky-cta { background: var(--a3-red); border: 0; box-shadow: 0 -4px 16px rgba(0,0,0,.18); top: auto; bottom: 0; }
body.a3 .sticky-cta-inner { max-width: 1200px; justify-content: center; padding: 8px 16px; }
body.a3 .sticky-cta-thumb, body.a3 .sticky-cta-text { display: none; }
body.a3 a.sticky-cta-btn { background: transparent; color: #fff; box-shadow: none; border: 0; font-family: var(--a3-font); font-size: 15px; font-weight: 600; text-transform: uppercase; padding: 8px 12px; width: auto; }
body.a3 a.sticky-cta-btn:hover { background: transparent; color: #fff; text-decoration: underline; }

/* ── Footer (black, like the reference) + clearance for the sticky bar ── */
body.a3 .site-footer { background: #000; color: #bdbdbd; margin-block-start: 0; padding-block-end: 80px; }
body.a3 .site-footer .footer-links a { color: #fff; }

/* ── Mobile ── */
@media (max-width: 750px) {
  body.a3 .artmag-inner { padding-inline: 20px; }
  body.a3 .headline { font-size: 30px; line-height: 1.35; }
  body.a3 .content-block-title { font-size: 28px; }
  body.a3 .content-block-article, body.a3 .content-block-article p { font-size: 16px; }
  body.a3 .a3-closer-card { grid-template-columns: 1fr; }
  body.a3 .a3-closer-img { order: -1; aspect-ratio: 4 / 3; }
  body.a3 .testimonial-cards-grid { grid-template-columns: 1fr; }
  body.a3 .a3-favorites-heading { font-size: 26px; }
  body.a3 .a3-favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.a3 .a3-fav-name { font-size: 15px; }
}

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