/* GENERATED by scripts/build-public-chrome-css.mjs from the @gp-public regions of css/styles.css
 * marked for "articleoffer". DO NOT EDIT: edit styles.css, run `npm run public-chrome`, commit both.
 * The article offer that closes a how-to or reference article (greasepilot-platform shared/tech-pubs.js; the
 * migrate plugin prints it on greasepilot.com; biz and school read the same rules from styles.css) for a
 * host that cannot load styles.css. Every selector is scoped to #gp-article-offer, so
 * nothing here styles anything outside that element, and every rem is written out in px (16px to the
 * rem) so the host's root font size cannot resize it. Fonts (Quicksand, Oswald) are the host's to load; the icons are inline SVG in the markup. Regions: btn, cta-identity, article-offer. */

/* ── region: btn ── */
#gp-article-offer .btn {
    display: inline-block;
    /* 0.4px more below than above: Quicksand draws its capitals a little under the middle of the line, so an even
       padding left the word 0.6px low (measured at 4x, Michael 2026-10-09). The button's height doesn't change. */
    padding: calc(12px - 0.4px) 24px calc(12px + 0.4px);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
}

/* ── region: cta-identity ── */
/* ── THE global orange CTA identity (SSOT — Michael 2026-09-09: ONE orange
   standard across the platform, .btn-accent's behavior). Solid accent, darken
   on hover, soft ring, NO lift. This block owns fill/hover/ring for EVERY
   orange CTA class — sizing/layout stay contextual on each class, and orange
   button colors must never be defined anywhere else (that is how we ended up
   with four different orange buttons). New code uses .btn-accent; the other
   selectors are legacy aliases already in markup. ── */
#gp-article-offer .btn-accent,
#gp-article-offer .btn-get-started,
#gp-article-offer .mobile-get-started,
#gp-article-offer .btn-secondary-large,
#gp-article-offer .quiz-nav-btn--orange,
#gp-article-offer .gp-attn-cta {
  background: var(--color-accent, #f97316); color: #fff; border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 14px var(--color-accent-ring, rgba(249,115,22,.18));
}
#gp-article-offer .btn-accent:hover,
#gp-article-offer .btn-accent:focus,
#gp-article-offer .btn-get-started:hover,
#gp-article-offer .mobile-get-started:hover,
#gp-article-offer .btn-secondary-large:hover,
#gp-article-offer .quiz-nav-btn--orange:hover,
#gp-article-offer .gp-attn-cta:hover {
  background: var(--color-accent-dark, #ea580c); color: #fff;
  /* The standard does NOT lift — also neutralizes lifts inherited from
     composite classes (.nav-link's hover on the header CTA). */
  transform: none;
}
#gp-article-offer .btn-accent:disabled { background: var(--color-accent, #f97316); opacity: 0.6; cursor: default; box-shadow: none; }

/* ── region: article-offer ── */
#gp-article-offer { display: block; box-sizing: border-box; width: calc(100% - 32px); max-width: 760px; margin: 48px auto; padding: clamp(20px, 5vw, 32px); border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; font-family: var(--font-body, 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); color: #3a3a3a; text-align: left; letter-spacing: normal; text-transform: none; }
#gp-article-offer .gp-article-offer__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: #015a94; }
#gp-article-offer .gp-article-offer__eyebrow svg { color: var(--color-primary, #0170b9); }
#gp-article-offer .gp-article-offer__title { margin: 0 0 12px; padding: 0; border: 0; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: clamp(24px, 6.4vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none; color: #2a2a2a; }
#gp-article-offer .gp-article-offer__text { margin: 0 0 12px; padding: 0; font-size: 17px; font-weight: 500; line-height: 1.6; color: #3a3a3a; }
#gp-article-offer .gp-article-offer__text:last-of-type { margin-bottom: 22px; }
#gp-article-offer .gp-article-offer__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; }
#gp-article-offer .gp-article-offer__btn:hover,
#gp-article-offer .gp-article-offer__btn:focus-visible { text-decoration: none; }
#gp-article-offer .gp-article-offer__btn:focus-visible { outline: 3px solid var(--color-accent-dark, #ea580c); outline-offset: 2px; }
#gp-article-offer svg { display: block; flex: none; }
@media print { #gp-article-offer { display: none; } }