/* ==========================================================================
   Launch Point Golf — screen.css
   Design system: Montserrat, #72C50F accent green, #0055A7 primary blue
   Mobile-first — base targets 375px, desktop via min-width queries
   ========================================================================== */

/* === TOKENS === */
:root {
  /* Colour palette */
  --color-white:           #FFFFFF;
  --color-off-white:       #FBFBFC;
  --color-card-border:     #EDEFF3;
  --color-accent-green:    #72C50F;
  --color-accent-green-bg: rgba(114, 197, 15, 0.08);
  --color-primary-blue:    #0055A7;
  --color-footer:          #39951b;
  --color-divider:         #D9DDE7;
  --color-heading:         #242424;
  --color-body:            #404040;
  --color-secondary:       #969696;
  --color-dark-green:      #39951B;   /* hover on green CTA buttons */

  /* Semantic aliases — colour-agnostic references */
  --color-text:            var(--color-body);
  --color-surface:         var(--color-white);
  --color-bg:              var(--color-off-white);
  --color-accent:          var(--color-primary-blue);   /* default interactive accent */
  --color-accent-light:    #FFFFFF;
  --color-border:          var(--color-card-border);
  --color-border-light:    var(--color-card-border);
  --color-dark:            var(--color-footer);

  /* ── A/B palette — built to Option A; swap all 5 for Option B: ───────────
     Blue:  A #0055A7  |  B #3A71FF
     --800: A #242424  |  B #1E2229
     --700: A #484848  |  B #3B4254  (heading variant, currently unused)
     --600: A #404040  |  B #505972
     --500: A #969696  |  B #838DA9
     ──────────────────────────────────────────────────────────────────── */

  /* Typography */
  --font-sans: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale — heading 700, body 400, min body 16px */
  --text-h1: 52px;  --lh-h1: 62px;
  --text-h2: 48px;  --lh-h2: 58px;
  --text-h3: 38px;  --lh-h3: 48px;
  --text-h4: 32px;  --lh-h4: 42px;
  --text-h5: 28px;  --lh-h5: 38px;
  --text-h6: 22px;  --lh-h6: 32px;
  --text-xl:  20px; --lh-xl:  30px;
  --text-lg:  18px; --lh-lg:  28px;
  --text-base:16px; --lh-base:24px;
  --text-sm:  14px; --lh-sm:  20px;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Section padding (block) */
  --section-pad:          80px;
  --section-pad-tablet:   56px;
  --section-pad-mobile:   32px;

  /* Container */
  --container-max:   1268px;
  --container-pad:   24px;
  --container-pad-m: 16px;

  /* Radius */
  --radius-card:  20px;
  --radius-sm:     8px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-card:    0 2px 7px rgba(20,20,43,.06);
  --shadow-btn-sec: 0 4px 10px rgba(20,20,43,.04);

  /* Z-index scale */
  --z-header:   100;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video, svg { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }
a { color: inherit; }
ul, ol { list-style: none; }

::selection {
  background: var(--color-accent-green);
  color: var(--color-heading);
}

/* === BASE === */
html { font-size: 16px; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-body);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === SKIP LINK === */
.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--color-heading);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus-visible { top: 0; }

/* === FOCUS === */
:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1.2;
}

h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--text-h4); line-height: var(--lh-h4); }
h5 { font-size: var(--text-h5); line-height: var(--lh-h5); }
h6 { font-size: var(--text-h6); line-height: var(--lh-h6); }

@media (max-width: 767px) {
  h1 { font-size: 32px; line-height: 42px; }
  h2 { font-size: 28px; line-height: 38px; }
  h3 { font-size: 24px; line-height: 32px; }
}

/* === LAYOUT UTILITIES === */
.site-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-m);
}

@media (min-width: 768px) {
  .site-container { padding-inline: var(--container-pad); }
}

.section {
  padding-block: var(--section-pad-mobile);
}

@media (min-width: 768px) {
  .section { padding-block: var(--section-pad-tablet); }
}

@media (min-width: 1024px) {
  .section { padding-block: var(--section-pad); }
}

.section--alt { background: var(--color-off-white); }

/* Figma asymmetric rhythm: reviews/3-col/FAQ bands carry no bottom padding — the next band's pt supplies the gap */
.section--pb0 { padding-block-end: 0; }
/* Product-rows band: pt 48 desktop / 32 tablet / 24 mobile, pb 0 (Figma 15648:23032) */
.section--rows { padding-block: 24px 0; }
@media (min-width: 768px) { .section--rows { padding-block: 32px 0; } }
@media (min-width: 1024px) { .section--rows { padding-block: 48px 0; } }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 32px;
}

@media (min-width: 768px) {
  .section-header { margin-block-end: 48px; }
}

.section-title {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  color: var(--color-heading);
}

.section-view-all,
.load-more-btn {
  background: #ffffff;
  border: 1px solid #72c50f;
  border-radius: 76px;
  color: #242424;
  font-size: 16px; /* Figma Text Single/100: 16px across all section buttons */
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-inline: 24px;
  height: 54px;
  cursor: pointer;
  box-shadow: var(--shadow-btn-sec); /* Figma Button Shadows/White 01 on secondary pills */
  transition: background 0.15s ease, color 0.15s ease;
}

.section-view-all:hover,
.load-more-btn:hover {
  background: #f9fff5;
  text-decoration: none;
}

/* Reviews browse: min-width 197px desktop, 267px tablet/mobile */
.reviews-section ~ .section-view-all-row .section-view-all,
.section-view-all-row--reviews .section-view-all {
  min-width: 197px;
}
@media (max-width: 1023px) {
  .reviews-section ~ .section-view-all-row .section-view-all,
  .section-view-all-row--reviews .section-view-all {
    min-width: 267px;
  }
}

/* Articles browse: min-width 199px; 48px top spacing matches load-more-btn rhythm */
.articles-main .section-view-all-row {
  margin-block-start: 48px;
}
.articles-main .section-view-all-row .section-view-all {
  min-width: 199px;
}

/* Cats section browse: solid blue fill per Figma node 15604:15693 (Buttons Row, pt-48, centered) */
.cats-cta-row {
  display: flex;
  justify-content: center;
  margin-block-start: 24px; /* Figma mobile pre-button gap */
}
@media (min-width: 768px) { .cats-cta-row { margin-block-start: 32px; } }
@media (min-width: 1024px) { .cats-cta-row { margin-block-start: 48px; } }
.cats-browse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-blue);
  color: var(--color-white);
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 18px;
  padding: 18px 24px;
  border-radius: 76px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: opacity .15s;
}
.cats-browse-btn:hover { opacity: .9; color: var(--color-white); }
/* Outrank .gh-content a (specificity 0,1,1) when the button is inside post body HTML */
.gh-content a.cats-browse-btn,
.post-content a.cats-browse-btn { color: var(--color-white); text-decoration: none; }
.gh-content a.cats-browse-btn:hover,
.post-content a.cats-browse-btn:hover { opacity: .9; color: var(--color-white); }


/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid transparent;
}

.btn-primary {
  background: var(--color-heading);
  color: var(--color-white);
  border-color: var(--color-heading);
}
.btn-primary:hover { opacity: .88; }

.btn-green {
  background: var(--color-accent-green);
  color: var(--color-white);
  border-color: var(--color-accent-green);
}
.btn-green:hover { opacity: .88; }

.btn-outline {
  background: transparent;
  color: var(--color-heading);
  border-color: var(--color-card-border);
  box-shadow: var(--shadow-btn-sec);
}
.btn-outline:hover {
  border-color: var(--color-heading);
}

.btn-subscribe {
  background: var(--color-primary-blue);
  color: var(--color-white);
  border-color: var(--color-primary-blue);
}
.btn-subscribe:hover { opacity: .88; }

.btn--primary {
  background: var(--color-heading);
  color: var(--color-white);
  border-color: var(--color-heading);
}
.btn--primary:hover { opacity: .88; }

.btn--secondary {
  background: transparent;
  color: var(--color-heading);
  border-color: var(--color-card-border);
  box-shadow: var(--shadow-btn-sec);
}
.btn--secondary:hover { border-color: var(--color-heading); }

.btn-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  margin-block-start: 40px;
  padding: 14px 24px;
  background: var(--color-white);
  color: var(--color-heading);
  border: 1.5px solid var(--color-card-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-btn-sec);
  transition: border-color 0.15s;
}
.btn-load-more:hover { border-color: var(--color-heading); }
.btn-load-more[data-loading] { opacity: .6; pointer-events: none; }

/* === FORMS === */
.subscribe-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 20px;
  background: var(--color-white);
  border: 1.5px solid var(--color-card-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}

.subscribe-form-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-heading);
}
.subscribe-form-input::placeholder { color: var(--color-secondary); }

.subscribe-form-btn {
  flex-shrink: 0;
  padding: 12px 20px;
  background: var(--color-accent-green);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.subscribe-form-btn:hover { opacity: .88; }

/* Ghost Members form state — hidden at rest; Portal script reveals on form resolve */
[data-members-success],
[data-members-error] {
  display: none;
}

/* Visually hidden (screen-reader only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* === HEADER V2 === */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-white);
}

/* ── Row 1: logo | search (desktop) | actions ─────────────────────────────── */
/* header-top is its own max-width container (1268px); site-container removed   */
.header-top {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1268px;
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 20px; /* Figma Top Header paddingTop=20 paddingBottom=20 → 20+72+20=112px top row */
}

.header-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.header-logo {
  width: 307px;
  height: 72px;
  max-width: 307px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.header-logo-text {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1;
}

/* 440×52 search pill: flex: 1 fills middle space between logo and actions */
.header-search {
  position: relative;
  display: none;
  align-items: center;
  flex: 1;
  max-width: 440px;
  height: 52px;
  border-radius: 108px;
  border: 1px solid #EDEFF3;
  box-shadow: 0 2px 7px rgba(20,20,43,0.06);
  background: var(--color-white);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .header-search {
    display: flex;
    flex: 0 0 440px;
    width: 440px;
    /* centred by justify-content:space-between on header-top */
  }
  .header-top {
    justify-content: space-between;
    gap: 0; /* space-between handles distribution; gap was skewing search left */
  }
  .header-actions {
    margin-inline-start: 0;
    flex-shrink: 0;
  }
}

.header-search:focus-within {
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 0 3px rgba(0,85,167,0.12);
}

.header-search-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-heading);
  padding: 8px 48px 8px 24px; /* right pad leaves room for 24px icon */
  min-width: 0;
}

.header-search-input::placeholder {
  font-family: var(--font-display);
  font-weight: 400;
  color: #969696;
}

/* 24×24 search icon, absolute right within pill */
.header-search-submit {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-secondary);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.header-search-submit:hover { color: var(--color-heading); }
.header-search-submit:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* Social cluster: desktop only. Hrefs pending LPG URL confirmation. */
.header-social {
  display: none;
  align-items: center;
  gap: 20px;
}

/* .header-social hidden until LPG social hrefs confirmed — restore display:flex here */

.header-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-secondary);
  text-decoration: none;
  transition: color .15s;
}

.header-social-link:hover { color: var(--color-heading); }
.header-social-link:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.header-search-btn-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-heading);
  text-decoration: none;
}

@media (min-width: 1024px) {
  .header-search-btn-mobile { display: none; }
}

.header-subscribe-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding-block: 18px;
  padding-inline: 24px;
  width: auto;
  background: var(--color-primary-blue);
  color: var(--color-white);
  border-radius: 76px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s;
}

.header-subscribe-btn:hover { opacity: .88; }

@media (min-width: 1024px) {
  .header-subscribe-btn { display: flex; }
}

/* Hamburger */
.header-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  background: transparent;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .header-hamburger { display: none; }
}

.header-hamburger span {
  display: block;
  height: 2px;
  background: var(--color-heading);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

/* ── Mobile/tablet (<1024px): 74px #FBFBFC bar, logo centred, ham left, search right ── */
@media (max-width: 1023px) {
  .site-header { background: #FBFBFC; } /* border already none at base */
  .header-top {
    position: relative;
    height: 74px;
    padding-block: 0;
    justify-content: center;
  }
  /* Hamburger absolute-left; removed from flex flow so logo centres cleanly */
  .header-hamburger {
    position: absolute;
    inset-inline-start: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
  .header-logo-link { max-width: none; }
  .header-logo {
    width: 200px;
    height: 47px;
    max-width: 200px;
  }
  /* Actions absolute-right (search icon + subscribe visible at ≥768px) */
  .header-actions {
    position: absolute;
    inset-inline-end: 24px;
    top: 50%;
    transform: translateY(-50%);
    margin-inline-start: 0;
    gap: 12px;
  }
}

/* Mobile <768px: smaller hit targets */
@media (max-width: 767px) {
  .header-hamburger { width: 32px; height: 32px; padding: 6px; inset-inline-start: 16px; }
  .header-search-btn-mobile { width: 32px; height: 32px; }
  .header-actions { inset-inline-end: 16px; }
}

/* ── Row 2: nav strip (desktop ≥1024px) ────────────────────────────────────── */
.header-nav {
  display: none;
  width: 100%; /* explicit full-bleed: sticky overflow-x:hidden context */
  background: #FBFBFC;
}

@media (min-width: 1024px) {
  .header-nav { display: block; }
}

/* header-nav-inner mirrors .header-top: max-width:1268px centered + 24px left pad
   aligns nav links with the logo at all viewport widths (1280/1440/1920). */
.header-nav-inner {
  max-width: 1268px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 27px 24px 26px 24px; /* 27/26 asymmetric — nav-link border-block-end:3px adds 3px to flex item height */
  list-style: none;
}

.header-nav-link {
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 16px;
  font-weight: 600; /* Montserrat SemiBold */
  color: #242424;
  text-decoration: none;
  line-height: 1.125; /* 18/16 */
  border-block-end: 3px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}

.header-nav-link:hover,
.header-nav-link[aria-current="page"] {
  color: var(--color-primary-blue);
  border-block-end-color: var(--color-primary-blue);
}

/* Mobile nav drawer */
.header-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 1);
  background: var(--color-white);
  flex-direction: column;
  padding: 20px var(--container-pad-m) 40px;
  overflow-y: auto;
}

.header-drawer.is-open { display: flex; }

.header-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  margin-block-end: 24px;
}

.header-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header-drawer-nav-link {
  padding: 14px 0;
  font-size: var(--text-h6);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  text-decoration: none;
  border-block-end: 1px solid var(--color-card-border);
}

.header-drawer-subscribe {
  align-self: flex-start; /* hug content width; don't stretch to full drawer width */
  margin-block-start: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  background: var(--color-primary-blue);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

/* ── Footer ─────────────────────────────────────── */
.site-footer {
  background: var(--color-footer);
  padding-block: 36px;
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-logo-link { flex-shrink: 0; }

.footer-logo {
  height: 39px;
  width: 168px;
  object-fit: contain;
  display: block;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-secondary);
  font-size: 14px;
  line-height: 21px;
  color: #ffffff;
}

.footer-legal-sep {
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
}

.footer-legal-link {
  color: #ffffff;
  text-decoration: none;
}

.footer-legal-link:hover { text-decoration: underline; }

.footer-copyright { color: #ffffff; }

.footer-legal-text { color: #ffffff; }

.footer-socials {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  width: 25px;
  height: 25px;
  transition: opacity .15s;
}

.footer-social-link:hover { opacity: 0.8; }

/* Footer responsive — mobile (Figma Footer V2 mobile 15645:21326, 375×166.5):
   row 1 = logo left + socials right (justify-between), legal block below, left-aligned */
@media (max-width: 767px) {
  .site-footer { padding-block: 16px; }
  .site-footer-inner {
    flex-wrap: wrap;
    gap: 16px;
  }
  .footer-legal {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    row-gap: 8px;
    column-gap: 16px;
  }
}

/* === HERO SECTION === */
.hero-section {
  padding-block: var(--section-pad-mobile);
}

@media (min-width: 768px) {
  .hero-section { padding-block: var(--section-pad-tablet); }
}

@media (min-width: 1024px) {
  .hero-section { padding-block: var(--section-pad); }
}

/* Hero headline */
.hero-headline {
  font-size: 28px;
  line-height: 36px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  text-align: start;
  margin-block-end: 32px;
}

@media (min-width: 768px) {
  .hero-headline { font-size: 32px; line-height: 40px; }
}

@media (min-width: 1024px) {
  .hero-headline { font-size: 52px; line-height: 62px; margin-block-end: 48px; }
}

.hero-grid { display: flex; flex-direction: column; gap: 16px; }


@media (min-width: 768px) and (max-width: 1023px) {
  .hero-grid { display: flex; flex-direction: column; gap: 24px; }
}

@media (min-width: 1024px) {
  .hero-grid {
    display: grid;
    /* Figma 15604:15687: large card fixed 596, right column flexes (596+28+586=1210 of 1220 — right col absorbs the slack) */
    grid-template-columns: 596px minmax(0, 1fr);
    grid-template-rows: repeat(3, 235px);
    gap: 28px;
  }
}

/* Large hero card */
.hero-card-large {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}


@media (min-width: 1024px) {
  .hero-card-large { grid-row: 1 / 4; }
}

.hero-card-large-image-link {
  display: block;
  overflow: hidden;
  background: var(--color-card-border);
}


.hero-card-large-image {
  width: 100%;
  height: 239px;
  object-fit: cover;
  display: block;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-card-large-image { height: 502px; }
}

@media (min-width: 1024px) {
  .hero-card-large-image { height: 416px; }
}

.hero-card-large-body {
  flex: 1;
  padding: 32px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-card-large-body { padding: 24px; }
}

@media (min-width: 1024px) {
  .hero-card-large-body { padding: 48px 48px 56px; }
}

.hero-card-tag {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: #969696;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 0;
  text-decoration: none;
  margin-block-end: 12px;
}

.hero-card-large-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-card-large-title { font-size: 22px; line-height: 30px; }
}

@media (min-width: 1024px) {
  .hero-card-large-title { font-size: var(--text-h4); line-height: var(--lh-h4); }
}

.hero-card-large-title a,
.hero-card-large-title-link { text-decoration: none; color: inherit; }
.hero-card-large:hover .hero-card-large-title { color: var(--color-primary-blue); }
.hero-card-large:focus-visible { outline-offset: 0; }

.hero-card-large-excerpt {
  margin-block-start: 16px;
  font-size: var(--text-base);
  line-height: 24px;
  color: var(--color-body);
  display: -webkit-box;
  -webkit-line-clamp: 6; /* Figma mobile: 16/24 up to 6 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-card-large-excerpt { line-height: 28px; -webkit-line-clamp: 3; }
}

/* Category chip + Read more meta row */
.hero-card-large-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-block-start: 24px;
}

@media (min-width: 1024px) {
  .hero-card-large-meta { padding-block-start: 32px; }
}


.hero-card-large-readmore {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  text-decoration: none;
  flex-shrink: 0;
}

.hero-card-large-readmore:hover {
  color: var(--color-accent-green); /* Raels: hover = accent green (text + chevron both green on hover) */
}

.hero-readmore-chevron {
  display: block;
  flex-shrink: 0;
  color: var(--color-accent-green); /* stroke:currentColor → green; text on parent stays heading-dark */
}

/* Side hero cards (stacked in right column at desktop, full-width column at tablet) */
.hero-card-side {
  position: relative;
  display: none;
  flex-direction: row;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-white);
  text-decoration: none;
}

@media (min-width: 768px) {
  .hero-card-side { display: flex; }
}

.hero-card-side-image-wrap {
  flex-shrink: 0;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-card-side-image-wrap { width: 196px; }
}

@media (min-width: 1024px) {
  .hero-card-side-image-wrap { border-radius: 16px; overflow: hidden; }
}

.hero-card-side-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* .hero-card-side-image height at 768-1023: height:100% of wrap (AR:1 + width:196px = 196×196) */

.hero-card-side-body {
  flex: 1;
  min-width: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-card-side-body { padding: 0 0 0 24px; }
}

@media (min-width: 1024px) {
  .hero-card-side-body { padding: 0 0 0 28px; }
}

.hero-card-side-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-card-side-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Hero chip: icon beside label (Figma row, gap 6px — scoped to hero meta, not global) */
.hero-card-large-meta .hero-cat-chip,
.hero-card-side-meta .hero-cat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-card-large-meta .hero-cat-chip-icon,
.hero-card-side-meta .hero-cat-chip-icon {
  flex-shrink: 0;
}

.hero-card-side-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-block-start: 16px;
}

@media (min-width: 1024px) {
  .hero-card-side-title { line-height: 30px; }
}

.hero-card-side-excerpt {
  display: none; /* Raels directive: full title, no excerpt in side-cards */
}

.hero-card-side-date {
  font-size: var(--text-base);
  line-height: 18px;
  color: var(--color-primary-blue);
}

.hero-card-side-title a,
.hero-card-side-title-link { text-decoration: none; color: inherit; }
.hero-card-side:hover .hero-card-side-title { color: var(--color-primary-blue); }


/* === CATEGORIES SECTION === */
.cats-section {
  background: var(--color-off-white);
}

/* Explore: 1-col mobile → 2-col tablet → 4-col desktop */
.cats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px; /* mobile: 16px per Figma; tablet/desktop overridden below */
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cats-grid { grid-template-columns: repeat(2, 284px); justify-content: center; gap: 24px; } /* Figma tablet: 2x2 fixed-284 block centered */
}

@media (min-width: 1024px) {
  .cats-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; } /* desktop: 28px per Figma */
}

/* Explore section heading overrides */
@media (max-width: 767px) {
  .cats-section .section-title { font-size: 24px; line-height: 32px; text-align: center; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cats-section .section-header { justify-content: center; margin-block-end: 32px; } /* −16px vs global 48px */
  .cats-section .section-title { font-size: 26px; line-height: 34px; text-align: center; }
}

@media (max-width: 767px) {
  .cats-section .section-header { justify-content: center; margin-block-end: 24px; }
  .cats-section .cats-grid { margin-block-end: 0; }
  .cats-section .cat-card { max-width: 284px; margin-inline: auto; } /* Figma mobile: 284px centred */
}

@media (min-width: 1024px) {
  .cats-section .section-header { justify-content: center; }
  .cats-section .section-title { line-height: 50px; text-align: center; }
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0; /* allow grid item to shrink to column width */
  min-height: 234px;
  padding: 32px 24px; /* mobile Figma: 32px 24px; desktop/tablet override below */
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}

.cat-card:hover {
  box-shadow: 0 4px 16px rgba(20,20,43,.10);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .cat-card:hover { transform: none; }
}

@media (min-width: 768px) {
  .cat-card { min-height: 304px; padding: 40px 32px; } /* tablet+desktop Figma: 40px 32px */
  .cat-card-title { font-size: 20px; line-height: 30px; } /* tablet/desktop Figma: 20px/30px */
  .cat-card-desc { line-height: 28px; } /* tablet/desktop Figma: 28px lh */
}

@media (min-width: 1024px) {
  .cat-card { min-height: 306px; }
}

.cat-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-block-end: 16px; /* Figma icon→title gap: 16px (H3 padding-top) */
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .cat-icon-wrap { width: 60px; height: 60px; }
}

.cat-icon-img {
  width: 48px;
  height: 48px;
  display: block;
}

@media (min-width: 768px) {
  .cat-icon-img { width: 60px; height: 60px; }
}

/* CSS-based icon fallback (mask-image per slug) */
.cat-icon-css {
  width: 48px;
  height: 48px;
  display: block;
}

@media (min-width: 768px) {
  .cat-icon-css { width: 60px; height: 60px; }
}

.cat-card-title {
  font-size: 18px; /* mobile Figma: 18px/26px; tablet/desktop override in @768 block above */
  line-height: 26px;
  color: var(--color-heading);
  margin-block-end: 8px;
}

.cat-card-desc {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-body);
}

/* Cascade fix: base .cat-card-title above would otherwise beat the @768 override declared earlier */
@media (min-width: 768px) {
  .cat-card-title { font-size: 20px; line-height: 30px; } /* Figma h4 basic 20/30 */
}

/* === REVIEWS GRID SECTION === */
.reviews-section {}

.reviews-section__heading,
.articles-section__heading,
.guides-block__heading {
  font-size: var(--text-h3);
  line-height: 50px;
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  margin-block-end: 28px;
}

.latest-products__heading {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  color: var(--color-heading);
  font-weight: var(--fw-bold);
  margin-block-end: 28px;
}

@media (min-width: 768px) {
  .reviews-section__heading,
  .articles-section__heading,
  .guides-block__heading,
  .latest-products__heading { margin-block-end: 32px; } /* Figma tablet heading→grid 32 */
}

@media (max-width: 767px) {
  .reviews-section__heading,
  .articles-section__heading,
  .guides-block__heading,
  .latest-products__heading,
  .faq-section-heading { font-size: 24px; line-height: 32px; }
}

/* Articles mobile: heading-to-grid gap 28→32px (Figma 15645:20918) */
@media (max-width: 767px) {
  .articles-section__heading { margin-block-end: 32px; }
  .latest-products__heading { margin-block-end: 24px; } /* Figma mobile: carousel heading→grid 24 */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .articles-section__heading { margin-block-end: 32px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .reviews-section__heading,
  .articles-section__heading,
  .guides-block__heading,
  .latest-products__heading,
  .faq-section-heading { font-size: 26px; line-height: 34px; }
}

/* FAQ heading — scoped for specificity over any section-level override */
@media (max-width: 767px) {
  .faq-section .faq-section-heading { font-size: 24px; line-height: 32px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .faq-section .faq-section-heading { font-size: 26px; line-height: 34px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .latest-products__heading { max-width: 720px; margin-inline: auto; }
}

@media (min-width: 1024px) {
  .reviews-section__heading { margin-block-end: 48px; }
  .articles-section__heading { font-size: 38px; line-height: 50px; margin-block-end: 40px; }
  .guides-block__heading { margin-block-end: 48px; text-align: center; }
  .latest-products__heading { max-width: 728px; margin-inline: auto; margin-block-end: 48px; line-height: 48px; } /* Figma Secton Accordion: 728 block centered in 933 section */
}

/* Reviews grid: mobile/tablet 1-col; desktop ≥1024 2-col 56px gap */
.reviews-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .reviews-section__grid {
    grid-template-columns: repeat(2, 1fr); /* Figma tablet: 2 cols x 3 rows */
    column-gap: 16px;
    row-gap: 32px;
  }
}

/* Figma tablet/mobile reviews Card H/Article V3 variant: image + title ONLY, text pl-16.
   Title TOP-aligned (Figma: content frame y0 in the 141 card) — home re-centers later
   via .reviews-section-scoped rules; image well r9.6 both compact breakpoints. */
@media (max-width: 1023px) {
  .reviews-section__grid .card-post-excerpt,
  .reviews-section__grid .card-post-meta { display: none; }
  .reviews-section__grid .card-post-content { padding: 0 0 0 16px; justify-content: flex-start; }
  .reviews-section__grid .card-post-title { font-size: 20px; line-height: 30px; -webkit-line-clamp: 4; } /* Figma tablet: up to 4 lines (120) */
  .reviews-section__grid .card-post-image-wrap { border-radius: 9.6px; }
}
@media (max-width: 767px) {
  .reviews-section__grid { gap: 16px; } /* Figma mobile single column, gap 16 */
  .reviews-section__grid .card-post-image-wrap { width: 141px; border-radius: 9.6px; overflow: hidden; }
  .reviews-section__grid .card-post-image { width: 141px; height: 141px; aspect-ratio: unset; }
  .reviews-section__grid .card-post-title { font-size: 20px; line-height: 28px; -webkit-line-clamp: 5; } /* Figma mobile: 3-5 lines fit the 141 card */
}

@media (min-width: 1024px) {
  .reviews-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px;
  }
}

/* Reviews section header row: heading left, browse button right (Figma 15604:15706) */
.reviews-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-block-end: 28px;
}

/* Heading inside header: spacing delegated to header margin-block-end */
.reviews-section__header .reviews-section__heading {
  margin-block-end: 0;
}

@media (max-width: 767px) {
  .reviews-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-block-end: 32px;
  }
}

@media (min-width: 768px) {
  .reviews-section__header { margin-block-end: 32px; } /* Figma tablet grid pt-32 */
}

@media (min-width: 1024px) {
  .reviews-section__header { margin-block-end: 48px; }
}

/* No border, no shadow on review cards (Figma: no border/shadow on card) */
.reviews-section__grid .card-post {
  border: none;
  box-shadow: none;
}

/* Image wrap: rounded corners, clip to 1:1 (Figma desktop: borderRadius 16px;
   tablet/mobile compact variant is 9.6px — set in the ≤1023 blocks above) */
/* isolation: isolate — stacking context forces clip to establish before eager-load paint */
.reviews-section__grid .card-post-image-wrap {
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .reviews-section__grid .card-post-image-wrap { border-radius: 16px; }
}

/* Browse button: no arrow (owner directive) */
.reviews-section .section-view-all::after {
  content: none;
}

/* === PRODUCTS SECTION === */
.products-section {}

/* ── Latest Products: mobile carousel → tablet 2-col → desktop 3-col ─── */
.latest-products__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Bleed past .site-container padding so track spans full viewport width */
  margin-inline: calc(var(--container-pad-m, 16px) * -1);
  padding-inline: var(--container-pad-m, 16px);
  /* Snap cards to the padding edge — without this, mandatory snap pulls the
     first card flush against the viewport edge on load (scrollLeft 16) */
  scroll-padding-inline: var(--container-pad-m, 16px);
}

@media (prefers-reduced-motion: reduce) {
  .latest-products__track { scroll-behavior: auto; }
}

.latest-products__track::-webkit-scrollbar { display: none; }

/* ~1.1 cards visible at mobile to signal scrollability */
.lp-slide {
  flex-shrink: 0;
  width: 270px; /* Figma exact */
  scroll-snap-align: start;
}

/* ── Pagination dots (mobile only) ────────────────────────────────────── */
/* Figma Page Control (15681:11212, 375×44): 10px dots, gap 10, centered;
   active #0055A7, inactive black 30%. 44px-tall strip sits flush under the
   track; the next section's pt-24 supplies the gap below. */
.lp-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  margin-inline: auto;
  margin-block-start: 0;
  padding-inline: 12px;
}

/* Full-strip-height tap target; 10px visible dot via ::after */
.lp-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: 1;
  /* dot colour handled via ::after background */
}

.lp-dot::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3); /* Figma inactive: #000 @30% */
  transition: background 200ms;
}

.lp-dot--active,
.lp-dot[aria-current="true"] { opacity: 1; }
.lp-dot--active::after,
.lp-dot[aria-current="true"]::after { background: #0055a7; }
.lp-dot:hover { opacity: 1; }
.lp-dot:hover::after { background: #0055a7; }

.lp-dot:focus-visible {
  outline: 2px solid var(--color-primary-blue, #0055A7);
  outline-offset: 3px;
  border-radius: 22px;
  opacity: 1;
}

/* ── Mobile card sizing (scoped to carousel slides) ───────────────────── */
@media (max-width: 767px) {
  .lp-slide .card-product-image {
    aspect-ratio: unset;
    height: 206px;
  }
  .lp-slide .card-product-body {
    --cpb-pad: 16px;
    padding: 16px var(--cpb-pad) 0;
  }
  /* Figma mobile spec list: pairs flow 2-up (Price + first spec side by side), rest full row */
  .lp-slide .card-product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
  }
  .lp-slide .card-product-spec:nth-child(2n+1):last-child { grid-column: 1 / -1; }
}

/* ── Tablet: 2-col grid; Desktop: 3-col ────────────────────────────────── */
@media (min-width: 768px) {
  .latest-products__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; /* 24→16 → card width (720−32)/3 = 229px per Figma spec */
    overflow-x: visible;
    scroll-snap-type: none;
    scroll-behavior: auto;
    margin-inline: 0;
    padding-inline: 0;
  }

  .lp-slide {
    width: auto;
    max-width: none;
    scroll-snap-align: none;
  }

  .lp-dots { display: none; }
}

/* Equal-height cards at grid breakpoints: slide fills grid cell, card fills slide */
@media (min-width: 768px) {
  .lp-slide { display: flex; flex-direction: column; }
  .lp-slide .card-product { flex: 1; }
}

/* ── Tablet cap: pin track to 720px so cards hit 229px exactly (spec 3×229+2×16) */
@media (min-width: 768px) and (max-width: 1023px) {
  .latest-products__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px; /* 768px viewport − 24px×2 container pad = 720px inner */
    margin-inline: auto;
  }

  .card-product { width: 100%; }
  .card-product-image-wrap,
  .card-product-image { width: 100%; }
}

@media (min-width: 1024px) {
  .latest-products__track {
    grid-template-columns: repeat(3, 295px);
    gap: 24px;
    max-width: 933px;
    margin-inline: auto;
  }

  .lp-slide .card-product-image {
    height: 206px;
    aspect-ratio: unset;
  }

  .lp-slide .card-product-body {
    --cpb-pad: 24px;
    padding: 24px var(--cpb-pad) 0;
  }
}

/* Latest Products: scoped card overrides */
.latest-products .card-product-title {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  font-size: 20px; /* Figma 20/22 Bold */
  line-height: 22px;
  margin-block-end: 0;
}
.latest-products .card-product-excerpt {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  margin-block-start: 12px; /* Figma pt-12 below rating row */
  margin-block-end: 0;
}
.latest-products .card-product-divider { display: none; }
.latest-products .card-product-specs { margin-block-start: auto; padding-block-start: 24px; } /* pin to bottom; divider 24 above first pair */


/* ===== LATEST PRODUCTS — OPTION B (HORIZONTAL CARDS) ===== */

/* Section */
.latest-products-b {
  padding-block: 24px 48px;
  padding-inline: 20px;
  font-family: var(--font-sans);
}
.latest-products-b__heading {
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-block: 0 24px;
}
.latest-products-b__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Horizontal product card */
.card-product-h {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
}
.card-product-h__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-product-h__image-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.card-product-h__image-wrap {
  display: block;
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-card-border);
}
.card-product-h__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-product-h__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.card-product-h__title {
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin: 0;
}
.card-product-h__title a {
  color: inherit;
  text-decoration: none;
}
.card-product-h__title a:hover { text-decoration: underline; }
.card-product-h__title a:focus-visible {
  outline: 3px solid var(--color-primary-blue);
  outline-offset: 2px;
  border-radius: 2px;
}
.card-product-h__price {
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--fw-medium); /* 500 — Figma Text Single/100/Medium, not bold */
  color: var(--color-primary-blue);
  margin: 0;
}
.card-product-h__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.card-product-h__amazon-icon {
  width: 81px;
  height: 25px;
  flex-shrink: 0;
  display: block;
}
.card-product-h__buy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: var(--color-primary-blue);
  color: #ffffff;
  border-radius: 76px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.card-product-h__buy-link:hover { opacity: 0.88; }
.card-product-h__buy-link:focus-visible {
  outline: 3px solid var(--color-primary-blue);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .latest-products-b {
    padding-block: 32px 56px;
    padding-inline: 32px;
  }
  .latest-products-b__heading {
    font-size: 26px;
    line-height: 34px;
    margin-block-end: 32px;
  }
  .card-product-h {
    padding: 20px 28px;
  }
  .card-product-h__inner {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }
  .card-product-h__image-info {
    flex: 1;
    gap: 24px;
    min-width: 0;
  }
  .card-product-h__image-wrap {
    width: 112px;
    height: 112px;
    min-width: 112px;
    border-radius: 16px;
  }
  .card-product-h__title {
    font-size: 18px;
    line-height: 24px;
  }
  .card-product-h__actions {
    gap: 24px;
    flex-shrink: 0;
    justify-content: flex-end;
  }
}

@media (min-width: 1024px) {
  .latest-products-b {
    max-width: 740px;
    margin-inline: auto;
    padding-inline: 0;
    padding-block: 48px 64px;
  }
  .latest-products-b__heading {
    font-size: 30px;
    line-height: 38px;
    margin-block-end: 40px;
  }
  .card-product-h__title {
    font-size: 20px;
    line-height: 26px;
  }
  .card-product-h__actions { gap: 32px; }
}

/* === HOME: spacing for the sitewide Subscription component ===
   The component itself (.at-cta-*) lives in the blog-post section below;
   on home it needs its own section rhythm (post/listing get it from neighbours). */
.home-template .at-cta-section {
  padding-block-start: var(--section-pad-mobile);
  padding-block-end: var(--section-pad-mobile);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-template .at-cta-section {
    padding-block-start: var(--section-pad-tablet);
    padding-block-end: var(--section-pad-tablet);
  }
}

@media (min-width: 1024px) {
  .home-template .at-cta-section {
    padding-block-start: 80px;
    padding-block-end: 0;
  }
}

/* Home: FAQ sits directly above footer — keep bottom padding at zero */
.home-template .faq-section { padding-block-end: 0; }

/* Listing pages: at-cta owns the top gap so the band stays 80/56/32 whether
   sl-more is visible or hidden (display:none contributes zero layout space) */
.tag-reviews .at-cta-section,
.tag-guides .at-cta-section,
.tag-how-to .at-cta-section { padding-block-start: var(--section-pad-mobile); }
@media (min-width: 768px) and (max-width: 1023px) {
  .tag-reviews .at-cta-section,
  .tag-guides .at-cta-section,
  .tag-how-to .at-cta-section { padding-block-start: var(--section-pad-tablet); }
}
@media (min-width: 1024px) {
  .tag-reviews .at-cta-section,
  .tag-guides .at-cta-section,
  .tag-how-to .at-cta-section { padding-block-start: var(--section-pad); }
}

/* === ARTICLES + SIDEBAR SECTION === */
.articles-section {}


/* Mobile/tablet: single-column, sidebar stacks below.
   1024px+: two-column — 1fr articles (≈760px at max-width) + 393px sidebar, 60px gap (Figma layout_O0JWHH). */
.articles-layout {
  display: flex;
  flex-direction: column;
  gap: 48px; /* Figma tablet/mobile: 48 between list block and sidebar blocks */
}

@media (min-width: 1024px) {
  .articles-layout {
    display: grid;
    grid-template-columns: 1fr 399px; /* Figma 760 + 60 + 399 */
    gap: 60px;
    align-items: start;
  }
}

.articles-main {
  min-width: 0;
}

/* Mobile: 1-column stack, 24px gap.
   768–1023px: 2-column grid (348px each per Figma tablet frame), 24px gap.
   1024px+: back to 1-column (full 760px article cards), 32px gap. */
.articles-section__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .articles-section__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .articles-section__grid {
    gap: 32px;
  }
}

.articles-sidebar {
  display: flex;
  flex-direction: column;
  gap: 48px; /* Figma mobile: 48 between sidebar blocks */
}

@media (max-width: 767px) {
  .articles-sidebar .sidebar-tabs-block { display: none; }
  /* M2: Popular articles before Newsletter in mobile stack */
  .articles-sidebar .sidebar-block--articles { order: -1; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .articles-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px 24px; /* Figma tablet: cols gap 24, 48 between block rows */
  }
  .articles-sidebar > * { min-width: 0; }
  .articles-sidebar .sidebar-tabs-block { display: none; }
  /* T2: Popular articles left | Newsletter right */
  .articles-sidebar .sidebar-block--articles { order: -1; }
  .articles-sidebar .sidebar-block--products { grid-column: span 2; }
  .sidebar-block--products .sidebar-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Figma tablet: products 2-col, 3 cards (2+1) */
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .articles-sidebar {
    gap: 64px;
    position: sticky;
    top: calc(var(--header-height, 186px) + 24px);
  }
  /* D1: newsletter block height — Figma node 15631:19074 padding: 34/36px, fixed height 330px */
  .sidebar-newsletter {
    padding-block: 34px 36px;
    min-height: 330px;
  }
}

/* Figma sidebar products block: flat wrapper — individual cards carry the chrome */
.sidebar-block--products {
  border-radius: 0;
  padding: 0;
}

/* === FAQ SECTION — unified sitewide component (Figma FAQs 15681:5069) ===
   Used by partials/faq-block.hbs, the post-page relocation in main.js, and the
   custom-faq / custom-contact templates. */
.faq-section {
  background: var(--color-off-white);
}

.faq-section-inner {
  max-width: 1012px;
  margin-inline: auto;
}

.faq-section-heading {
  font-size: var(--text-h3);
  line-height: 50px;
  color: var(--color-heading);
  text-align: center;
  margin-block-end: 40px; /* Figma header pb-40 (all breakpoints) */
}
.faq-section-heading:has(+ .faq-section-subline) { margin-block-end: 24px; } /* Figma heading-subtitle gap 24 */

.faq-section-subline {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-body);
  text-align: center;
  max-width: 470px;
  margin-inline: auto;
  margin-block-end: 40px;
}
@media (min-width: 768px) {
  .faq-section-subline { line-height: 28px; }
}

.faq-card {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 7px rgba(20, 20, 43, .06);
  padding: 24px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .faq-card { padding: 32px; }
}
@media (min-width: 1024px) {
  .faq-card { padding: 88px 74px; }
}

.faq-card .faq-item {
  border-block-end: 1px solid var(--color-card-border);
  padding-block: 32px 40px;
}
.faq-card .faq-item:first-of-type { padding-block-start: 0; }
.faq-card .faq-item:last-of-type { padding-block-end: 0; border-block-end: none; }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}
@media (min-width: 768px) {
  .faq-question { gap: 24px; font-size: 22px; line-height: 30px; }
}
@media (min-width: 1024px) {
  .faq-question { font-size: 28px; line-height: 38px; }
}
.faq-question::-webkit-details-marker,
.faq-question::marker { display: none; }
.faq-item[open] > .faq-question { align-items: flex-start; } /* Figma: open row top-aligned */
@media (min-width: 1024px) {
  .faq-question-text { max-width: 690px; } /* Figma desktop text column */
}

/* Toggle circle — white/dark chevron-right closed; blue/white chevron-down open */
.faq-chevron-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  color: var(--color-primary-blue); /* Figma render: closed chevron is blue */
  box-shadow: 0 2.5px 4.4px rgba(20, 20, 43, .06);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
@media (min-width: 768px) {
  .faq-chevron-btn { width: 50px; height: 50px; border-width: 1.25px; }
}
details[open] > .faq-question .faq-chevron-btn {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: var(--color-white);
}

.faq-chevron {
  width: 20px;
  height: 20px;
  transition: rotate .2s;
}
@media (min-width: 768px) {
  .faq-chevron { width: 25px; height: 25px; }
}
details[open] > .faq-question .faq-chevron { rotate: 90deg; } /* right chevron points down when open */
@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none; }
}

.faq-card .faq-answer {
  margin-block-start: 16px;
  padding-inline-end: 56px; /* keep the text column clear of the 40px toggle + gap */
  font-size: 16px;
  line-height: 24px;
  color: var(--color-body);
  animation: faq-open .2s ease;
}
@media (min-width: 768px) {
  .faq-card .faq-answer { line-height: 28px; padding-inline-end: 74px; } /* 50px toggle + 24 gap */
}
@media (min-width: 1024px) {
  .faq-card .faq-answer { max-width: 690px; padding-inline-end: 0; } /* Figma desktop text column */
}
.faq-card .faq-answer p { margin-block: 0; }
.faq-card .faq-answer p + p { margin-block-start: 16px; }
.faq-card .faq-answer a { color: var(--color-primary-blue); text-decoration: underline; }
/* Authored format-B answers carry the .faq-section class — neutralise band styling */
.faq-card .faq-section,
.at-body .faq-section { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .faq-card .faq-answer { animation: none; }
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === GUIDES SECTION === */
.guides-section {}

/* Mobile: horizontal-scroll carousel — CSS only, no JS/dots for Guides */
/* Figma mobile (15645:21268): 3 cards stacked vertically, 343px wide, gap 16px — not a carousel. */
.guides-block__grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Mobile card overrides — scoped to guides stacked cards */
@media (max-width: 767px) {
  /* In-card image radius 7px */
  .guides-block__grid .card-guide-image-wrap {
    border-radius: 7px 7px 0 0;
    overflow: hidden;
  }
  /* Card body padding 24px */
  .guides-block__grid .card-guide-body {
    padding: 24px;
  }
}

/* Tablet+: 3-column grid layout */
@media (min-width: 768px) {
  .guides-block__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .guides-block__grid > .card-guide {
    width: auto;
    max-width: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .guides-block__grid { gap: 10.5px; } /* Figma tablet: 3x233 + 2x10.5 = 720 */
  .guides-block__grid .card-guide-body { padding: 24px 16px; } /* Figma tablet px16 py24 */
  .guides-block__grid .card-guide-title { font-size: 22px; line-height: 28px; }
}

/* === CARD: POST (horizontal — reviews, articles, section listings) === */
.card-post {
  display: flex;
  flex-direction: row;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .15s;
}

.card-post:hover { box-shadow: 0 4px 16px rgba(20,20,43,.10); }

.card-post-image-wrap {
  flex-shrink: 0;
  width: 110px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .card-post-image-wrap { width: 180px; }
}

@media (min-width: 1024px) {
  .card-post-image-wrap { width: 235px; }
}

.card-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1/1;
}

.card-post-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  padding: 16px;
  background: var(--color-white);
  border-radius: 40px;
  border: none;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.card-post-content {
  flex: 1;
  min-width: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .card-post-content { padding: 20px; }
}

.card-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 10px;
}

.card-meta-tag {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-blue);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.card-meta-date {
  font-size: var(--text-sm);
  color: var(--color-primary-blue);
}

.card-post-title {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--color-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Articles section: full title — no clamp (Figma 15631:18927) */
.articles-section__grid .card-post-title { display: block; overflow: visible; }
/* Articles cards are chrome-less at EVERY breakpoint (Figma V1: flat, image carries the edge) */
.articles-section__grid .card-post { border: none; box-shadow: none; }

.card-post-title a { text-decoration: none; color: inherit; }
.card-post:hover .card-post-title { color: var(--color-primary-blue); }

.card-post-excerpt {
  margin-block-start: 8px;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reviews card: tablet 141×141 image, desktop 235×235 image, text pad-start 28 */
@media (min-width: 768px) {
  .reviews-section__grid .card-post { min-height: 141px; }
  .reviews-section__grid .card-post-image-wrap { width: 141px; }
  .reviews-section__grid .card-post-image { height: 141px; aspect-ratio: unset; }
}

@media (min-width: 1024px) {
  .reviews-section__grid .card-post { min-height: 235px; }
  .reviews-section__grid .card-post-image-wrap { width: 235px; background: var(--color-card-border); }
  .reviews-section__grid .card-post-image { height: 235px; aspect-ratio: unset; }
  .reviews-section__grid .card-post-content {
    padding: 0 0 0 28px; /* Figma V3: text col pl-28 only, vertically centered */
  }
  .reviews-section__grid .card-post-title { font-size: var(--text-xl); line-height: var(--lh-xl); margin-block-start: 16px; }
  .reviews-section__grid .card-post-excerpt { line-height: var(--lh-lg); margin-block-start: 10px; }
  /* Card H/Article V3 anatomy (Figma 15604:15706): meta row FIRST — bare category (icon+label) left, blue date right */
  .reviews-section__grid .card-post-meta {
    order: -1;
    justify-content: space-between;
    margin-block-end: 0;
  }
  .reviews-section__grid .card-meta-date { font-size: var(--text-base); line-height: 18px; }
  .reviews-section__grid .card-post-chip {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    gap: 6px;
  }
}

/* Articles card: desktop 760×300, image 300×300, text pad 48, title 22/32 (Figma 15631:18927) */
@media (min-width: 1024px) {
  .articles-section__grid .card-post { min-height: 300px; border: none; box-shadow: none; }
  .articles-section__grid .card-post-image-wrap { width: 300px; border-radius: 20px; overflow: hidden; isolation: isolate; }
  .articles-section__grid .card-post-image { height: 300px; aspect-ratio: unset; }
  .articles-section__grid .card-post-content { padding: 48px; }
  .articles-section__grid .card-post-title { font-size: var(--text-h6); line-height: var(--lh-h6); }
  .articles-section__grid .card-post-excerpt { margin-block-start: 10px; line-height: var(--lh-lg); }
  /* Meta row: chip left, date right — DOM order now natural, no CSS order needed */
  .articles-section__grid .card-post-meta { justify-content: space-between; margin-block-start: 24px; margin-block-end: 0; }
  .articles-section__grid .card-meta-date { font-size: var(--text-base); }
}

/* Date: always 16px where visible (meta hidden <1024 via tablet/mobile rules) */
.articles-section__grid .card-meta-date { font-size: var(--text-base); }
/* Articles card: laptop band 1024–1199 — 175×175 square (aspect-ratio:1 + align-self:flex-start pins wrap; prevents stretch to card height, cf. Reviews v91 fix) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .articles-section__grid .card-post-image-wrap {
    width: 175px;
    aspect-ratio: 1;
    height: auto;
    align-self: flex-start;
    flex: 0 0 auto;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
  }
  .articles-section__grid .card-post-image {
    width: 100%; height: 100%; object-fit: cover;
  }
}

/* Articles card: ≥1200 desktop — authoritative cascade winner: 300×300 square image, shadow, 16px date */
@media (min-width: 1200px) {
  .articles-section__grid .card-post { min-height: 300px; border: none; box-shadow: none; }
  .articles-section__grid .card-post-image-wrap { width: 300px; aspect-ratio: 1; height: auto; align-self: flex-start; flex: 0 0 auto; border-radius: 20px; overflow: hidden; isolation: isolate; }
  .articles-section__grid .card-post-image { width: 100%; height: 100%; object-fit: cover; }
  .articles-section__grid .card-meta-date { font-size: var(--text-base); }
}

/* Articles card: tablet 2-col — image 141×141, 9.4px radius (Figma tablet frame), title 20/28 */
@media (min-width: 768px) and (max-width: 1023px) {
  .articles-section__grid .card-post-image-wrap { width: 141px; border-radius: 9.4px; overflow: hidden; isolation: isolate; }
  .articles-section__grid .card-post-image { height: 141px; aspect-ratio: unset; }
  .articles-section__grid .card-post-title { font-size: 22px; line-height: 28px; } /* Figma tablet h4-special */
  .articles-section__grid .card-post-excerpt,
  .articles-section__grid .card-post-meta { display: none; }
  .articles-section__grid .card-post-content { padding-inline-start: 16px; padding-inline-end: 0; padding-block: 0; }
}

/* Articles card: mobile — 141×141 image, 9.4px radius (Figma 15645:20918) */
@media (max-width: 767px) {
  .articles-section__grid .card-post-image-wrap { width: 141px; border-radius: 9.4px; overflow: hidden; isolation: isolate; }
  .articles-section__grid .card-post-image { width: 141px; height: 141px; aspect-ratio: unset; }
  .articles-section__grid .card-post-excerpt,
  .articles-section__grid .card-post-meta { display: none; }
  .articles-section__grid .card-post-content { padding-inline-start: 16px; padding-inline-end: 0; padding-block: 0; }
  .articles-section__grid .card-post-title { font-size: 22px; line-height: 26px; } /* Figma mobile h4-special 22/26 */
}
.articles-section .load-more-btn { margin: 48px 0 0; }

/* Category chip on editorial cards */
/* Hide duplicate chips — only the first topic match in foreach shows */
.card-post-chip ~ .card-post-chip { display: none; }

.card-post-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #ffffff;
  border: 1px solid #edeff3;
  border-radius: 40px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: #242424;
  box-shadow: 0px 2px 7px 0px rgba(20, 20, 43, 0.06);
  line-height: 18px;
  white-space: nowrap;
}

/* Chip hidden below desktop — meta row is already display:none there but explicit hide prevents bleed in non-articles contexts */
@media (max-width: 1023px) {
  .card-post-chip { display: none; }
}
.card-post-chip-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #39951B;
}
.sidebar-cat-icon {
  color: #39951B;
  flex-shrink: 0;
}

/* Horizontal category strip — tablet + mobile only (<1024px) */
.articles-cat-strip {
  margin-block-end: 24px;
}
@media (min-width: 1024px) {
  .articles-cat-strip { display: none; }
}
.articles-cat-strip__inner {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
  background: #fbfbfc;
  border-radius: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.articles-cat-strip__inner::-webkit-scrollbar { display: none; }
.articles-cat-strip__tab {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* Figma icon→label 12 */
  line-height: 20px;
  padding: 15px 16px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: #242424;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}
.articles-cat-strip__tab:hover,
.articles-cat-strip__tab:focus-visible { background: #edeff3; border-radius: 16px; }
.articles-cat-strip__tab--active {
  background: #edeff3;
  border-radius: 16px;
  padding: 20px 16px;
  font-weight: 700;
}

/* === CARD: PRODUCT VERTICAL (V Amazon V2) === */
.card-product {
  position: relative; /* sr-only absolute child must not escape carousel clip */
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .15s;
}

.card-product:hover { box-shadow: 0 4px 16px rgba(20,20,43,.10); }

.card-product-image-wrap {
  position: relative;
  overflow: hidden;
  background: #edeff3; /* Figma product image well */
}

.card-product-image {
  width: 100%;
  aspect-ratio: 295 / 206;
  object-fit: cover;
  display: block;
}

.card-product-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  padding: 16px;
  background: var(--color-white);
  border-radius: 40px;
  border: none;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.card-product-body {
  flex: 1;
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
}

.card-product-title {
  font-size: var(--text-h6);
  line-height: var(--lh-h6);
  color: var(--color-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-block-end: 10px;
}

.card-product-title a { text-decoration: none; color: inherit; }
.card-product:hover .card-product-title { color: var(--color-primary-blue); }

.card-product-excerpt {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.card-product-footer {
  margin-block-start: 24px; /* Figma button mt-24 from spec list */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-product-read-link {
  display: none;
}
.card-product-read-link:hover { border-color: var(--color-heading); }

.card-product-buy-link {
  background: #ffffff;
  border: 1px solid #72c50f;
  border-radius: 76px;
  color: #242424;
  font-size: 16px; /* Figma Buy now label 16 Medium */
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 24px;
  height: 50px; /* Figma py-19 + 12 LH */
  box-shadow: var(--shadow-btn-sec);
  transition: background 0.15s ease;
}
/* Figma button content is amazon glyph + label only — no trailing arrow */
.card-product-buy-link .card-product-buy-arrow-icon { display: none; }
.card-product-buy-link:hover {
  background: #f9fff5;
  color: #242424;
  text-decoration: none;
}
.card-product-buy-link:focus-visible {
  outline: 2px solid #72C50F;
  outline-offset: 2px;
}
.card-product-buy-amazon-icon,
.card-product-buy-arrow-icon { flex-shrink: 0; }
.card-product-buy-arrow-icon { width: 16px; height: 16px; }

/* Tablet: taller buy button */
@media (min-width: 768px) and (max-width: 1023px) {
  .card-product-buy-link { height: 53px; min-width: 197px; padding-inline: 24px; }
}

/* === CARD: GUIDE VERTICAL === */
.card-guide {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .15s;
}

.card-guide:hover { box-shadow: 0 4px 16px rgba(20,20,43,.10); }

.card-guide-image-wrap {
  position: relative;
  overflow: hidden;
}

.card-guide-image {
  width: 100%;
  aspect-ratio: 388 / 272; /* Figma 1.4265 across breakpoints */
  object-fit: cover;
  display: block;
}

.card-guide-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  padding: 16px;
  background: var(--color-white);
  border-radius: 40px;
  border: none;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.card-guide-body {
  flex: 1;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
}

.card-guide-date {
  font-size: var(--text-base);
  line-height: 18px;
  color: var(--color-primary-blue);
  margin-block-end: 16px; /* Figma date→title pt-16 */
}

.card-guide-title {
  font-size: var(--text-h6);
  line-height: var(--lh-h6);
  color: var(--color-heading);
  flex: 1;
}

/* Guide card desktop: 388×499, image 272px, body pad 32/32/40/32, date #0055a7 right */
@media (min-width: 1024px) {
  .card-guide-body { padding: 32px 32px 40px; }
  .card-guide-image { height: 272px; aspect-ratio: unset; }
  .card-guide-date {
    font-size: var(--text-base);
    line-height: 18px;
    color: var(--color-primary-blue);
    text-align: start; /* Figma: date is the first stack item, left-aligned */
    margin-block-end: 16px;
  }
}

/* Guide card mobile: date #0055a7, title 18/26 clamped to 2 lines */
@media (max-width: 767px) {
  .card-guide-date { font-size: var(--text-base); line-height: 18px; color: var(--color-primary-blue); text-align: start; }
  .card-guide-title { font-size: 22px; line-height: 26px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Figma mobile 22/26 */
  .card-guide-readmore { font-size: var(--text-base); line-height: 18px; }
}

.card-guide-title a { text-decoration: none; color: inherit; }
.card-guide:hover .card-guide-title { color: var(--color-primary-blue); }

.card-guide-excerpt {
  margin-block-start: 12px;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-guide-readmore {
  margin-block-start: 32px; /* Figma title→link pt-32 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #242424; /* Figma Master Link: Bold 16/18 dark */
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
}
.card-guide-readmore:hover { color: var(--color-primary-blue); text-decoration: none; }

/* H-4 Guide cards — match Figma composition: no excerpt, cards hug content */
/* Figma node 15604:15735: image 272px + date + 2-line title + Read more; ~499px natural height at 388px desktop width */
.guides-block__grid .card-guide-excerpt { display: none; }

@media (min-width: 768px) {
  .guides-block__grid { align-items: start; }
  .guides-block__grid .card-guide-body { flex: none; }
  .guides-block__grid .card-guide-title { flex: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

/* === CARD: ARTICLE SMALL (sidebar) === */
.card-article-sm {
  display: flex;
  flex-direction: row;
  gap: 20px;
  text-decoration: none;
  align-items: center;
}

.card-article-sm-image-wrap {
  flex-shrink: 0;
  width: 146px;
  height: 115px;
  border-radius: 16px;
  overflow: hidden;
}

.card-article-sm-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.card-article-sm-body {
  flex: 1;
  min-width: 0;
}

.card-article-sm-title {
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-article-sm-title a { text-decoration: none; color: inherit; }
.card-article-sm:hover .card-article-sm-title { color: var(--color-primary-blue); }

.card-article-sm-date {
  margin-block-start: 4px;
  font-size: var(--text-base);
  color: var(--color-primary-blue);
  display: block;
}

/* === CARD: PRODUCT SMALL (sidebar) === */
.card-product-sm {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #edeff3;
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0px 2px 7px 0px rgba(20, 20, 43, 0.06);
  text-decoration: none;
}

.card-product-sm-image-wrap {
  flex-shrink: 0;
  width: 149px;
  height: 124px;
  border-radius: 16px;
  overflow: hidden;
}

.card-product-sm-image {
  width: 149px;
  height: 124px;
  object-fit: cover;
  display: block;
}

.card-product-sm-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  min-width: 0;
}

.card-product-sm-title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-product-sm-title a { text-decoration: none; color: inherit; }
.card-product-sm:hover .card-product-sm-title { color: var(--color-primary-blue); }

.card-product-sm-excerpt {
  margin-block-start: 4px;
  font-size: var(--text-sm);
  color: var(--color-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-product-sm-bot {
  display: flex;
  flex-direction: row; /* Figma Bot Container: price left, Buy button right */
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-product-sm-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 13px 18px;
  background: #ffffff;
  border: 1px solid #edeff3;
  border-radius: 76px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: #242424;
  text-decoration: none;
  align-self: flex-start;
  box-shadow: 0px 4px 10px 0px rgba(20, 20, 43, 0.04);
  transition: background .15s;
}
.card-product-sm-buy:hover { background: #edeff3; }

/* === SIDEBAR COMPONENTS === */
.sidebar-block {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  padding: 24px;
}

.sidebar-block--articles,
.sidebar-block--products {
  border: none;
  background: transparent; /* Figma: these blocks have no card chrome — cards/rows carry their own */
  padding: 0;
}

.sidebar-block-title {
  font-size: var(--text-h6);
  line-height: var(--lh-h6);
  color: var(--color-heading);
  margin-block-end: 20px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--color-card-border);
}

/* Sidebar cats nav */
.sidebar-cats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-cat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  text-decoration: none;
  transition: background .15s;
}

.sidebar-cat-link:hover {
  background: var(--color-off-white);
}

.sidebar-cat-link[aria-current="page"],
.tag-reviews .sidebar-cat-link--reviews,
.tag-articles .sidebar-cat-link--articles,
.tag-guides .sidebar-cat-link--guides,
.tag-how-tos .sidebar-cat-link--how-tos {
  background: var(--color-accent-green-bg);
  color: var(--color-accent-green);
  font-weight: var(--fw-bold);
}

.sidebar-cat-count {
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: var(--color-secondary);
}

/* Sidebar newsletter */
.sidebar-newsletter {
  background: var(--color-accent-green);
  border-color: var(--color-accent-green);
  padding: 34px 16px 36px; /* Figma 15631:19074 */
}

.sidebar-newsletter .sidebar-block-title {
  color: var(--color-white);
  border-block-end-color: rgba(255,255,255,.2);
}

.sidebar-block--articles .sidebar-block-title,
.sidebar-block--products .sidebar-block-title {
  border-block-end: none;
  padding-block-end: 0;
  margin-block-end: 32px; /* Figma heading→list 32 */
}
@media (max-width: 1023px) {
  .sidebar-block--articles .sidebar-block-title { font-size: 22px; line-height: 28px; }
  .sidebar-block--products .sidebar-block-title { font-size: 20px; line-height: 30px; }
  .sidebar-block--articles .sidebar-block-title,
  .sidebar-block--products .sidebar-block-title { margin-block-end: 24px; } /* Figma tablet/mobile heading→list 24 (products) / 32 popular — split below */
  .sidebar-block--articles .sidebar-block-title { margin-block-end: 32px; }
}

@media (min-width: 1024px) {
  .sidebar-block--products .sidebar-block-title {
    font-size: 32px;
    line-height: 42px;
  }
}

.sidebar-newsletter-heading {
  font-size: var(--text-h6);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  line-height: var(--lh-h6);
  margin-block-end: 8px; /* Figma title→para gap 8 */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar-newsletter-heading { font-size: 22px; line-height: 28px; }
}
@media (max-width: 767px) {
  .sidebar-newsletter-heading { font-size: 24px; line-height: 32px; } /* Figma mobile: h2-special, larger than tablet */
  .sidebar-newsletter-body { line-height: 24px; } /* Figma mobile body 16/24 */
}
.sidebar-newsletter-body {
  font-size: var(--text-base);
  line-height: 28px; /* Figma 16/28 */
  color: #edeff3;
  margin-block-end: 8px;
}

.sidebar-newsletter-form {
  display: block;
}

/* Ghost Members feedback — Portal toggles .success/.error on the form once the
   subscribe call resolves (mirrors .at-cta-form). At-rest hide is the global
   [data-members-success]/[data-members-error] rule; these are the reveals.
   Dark text reads on both the white lead-magnet card and the green
   (#72C50F) .sidebar-newsletter card — the heading dark hits ~7:1 on green. */
.sidebar-newsletter-form-success,
.sidebar-newsletter-form-error {
  padding-block-start: 12px;
  font-weight: var(--fw-medium);
}
.sidebar-newsletter-form-success { color: var(--color-heading); }
.sidebar-newsletter-form-error { color: #d23f3f; } /* ~4.6:1 on the white lead-magnet card */
/* The .sidebar-newsletter card is accent-green (#72C50F), where #d23f3f is only ~2.15:1;
   use a dark red (~5.3:1) so the error message clears AA on green too. */
.sidebar-newsletter .sidebar-newsletter-form-error { color: #7a0000; }
.sidebar-newsletter-form.success .sidebar-newsletter-form-success { display: block; }
.sidebar-newsletter-form.error .sidebar-newsletter-form-error { display: block; }

.sidebar-newsletter-pill {
  display: flex;
  align-items: center;
  gap: 10px; /* Figma mail icon -> placeholder gap */
  background: #ffffff;
  border: 1px solid #edeff3;
  border-radius: 108px;
  padding: 8px 8px 8px 24px;
  box-shadow: 0px 2px 7px 0px rgba(20, 20, 43, 0.06);
}

.sidebar-newsletter-mail-icon { flex-shrink: 0; }

.sidebar-newsletter-pill .sidebar-newsletter-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  outline: none;
  min-width: 0;
  width: auto;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-heading);
}

.sidebar-newsletter-pill .sidebar-newsletter-input::placeholder {
  color: #969696;
}

.sidebar-newsletter-pill .sidebar-newsletter-input:focus-visible {
  outline: 2px solid rgba(0, 85, 167, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
}

.sidebar-newsletter-pill .sidebar-newsletter-btn {
  flex-shrink: 0;
  padding: 18px 24px;
  background: #0055a7;
  color: #ffffff;
  border: none;
  border-radius: 76px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0px 2px 7px 0px rgba(20, 20, 43, 0.06);
  transition: opacity 0.15s;
}

.sidebar-newsletter-pill .sidebar-newsletter-btn:hover { opacity: .88; }

.sidebar-newsletter-input {
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-heading);
  outline: none;
  width: 100%;
}

.sidebar-newsletter-input:focus-visible {
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}

.sidebar-newsletter-btn {
  padding: 12px 20px;
  background: #0055A7;
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity .15s;
}
.sidebar-newsletter-btn:hover { opacity: .88; }

/* Sidebar lead-magnet CTA — Figma 15819:5140.
   Card chrome on the outer frame (sections carry their own 24px padding);
   the email pill reuses the shared .sidebar-newsletter-pill styling above. */
.sidebar-lead-magnet {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); /* General/Shadow 02 */
  overflow: hidden;
}

/* Grey media panel (Neutral 300) with the floating lead-magnet cover */
.sidebar-lead-magnet-media {
  background: var(--color-card-border); /* #EDEFF3 */
  padding: 24px;
  overflow: hidden; /* clips the cover's drop shadow to the panel, per Figma */
}

.sidebar-lead-magnet-img {
  display: block;
  width: 100%;
  height: auto; /* cover art is already 2:3 — no crop, matches Figma frame */
  border-radius: var(--radius-card);
  box-shadow: 0 32px 72px rgba(20, 20, 43, 0.24); /* General/Shadow 06 */
}

.sidebar-lead-magnet-body {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma heading/body/form gap */
  padding: 24px;
}

.sidebar-lead-magnet-heading {
  font-size: var(--text-h4);   /* h3-special 32px */
  line-height: var(--lh-h4);   /* 42px */
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.sidebar-lead-magnet-text {
  font-size: var(--text-base); /* 16px */
  line-height: 28px;           /* Figma body 16/28 */
  color: var(--color-heading);
}

/* Sidebar articles & products list */
.sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* === GHOST CONTENT BODY === */
.gh-content,
.post-content {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-body);
}

.gh-content > * + *,
.post-content > * + * {
  margin-block-start: 1.5em;
}

.gh-content a,
.post-content a {
  color: var(--color-primary-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.gh-content a:hover,
.post-content a:hover { opacity: .8; }

.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
  color: var(--color-heading);
  margin-block-start: 2em;
  margin-block-end: .5em;
}

.gh-content p { margin-block-end: 0; }

.gh-content ul,
.gh-content ol {
  padding-inline-start: 1.5em;
  list-style: revert;
}

.gh-content blockquote {
  border-inline-start: 4px solid var(--color-accent-green);
  padding-inline-start: 20px;
  color: var(--color-secondary);
  font-style: italic;
}

.gh-content pre {
  background: var(--color-off-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  overflow-x: auto;
  font-size: 15px;
  line-height: 1.6;
}

.gh-content code {
  background: var(--color-off-white);
  border: 1px solid var(--color-card-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .9em;
}

.gh-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

.gh-content hr {
  border: none;
  border-block-start: 1px solid var(--color-card-border);
  margin-block: 3rem;
}

.gh-content table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
}

.gh-content th,
.gh-content td {
  padding: 10px 16px;
  border: 1px solid var(--color-card-border);
  font-size: var(--text-base);
  text-align: start;
}

.gh-content th {
  background: var(--color-off-white);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.gh-content tr:nth-child(even) td { background: var(--color-off-white); }

.gh-content figure { margin-block: 2em 0; }

.gh-content figcaption {
  font-size: var(--text-sm);
  color: var(--color-secondary);
  text-align: center;
  margin-block-start: 8px;
}

.gh-content img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  height: auto;
}

/* === KOENIG CARDS === */
.kg-card { margin-block: 2em 0; }
.kg-card + .kg-card { margin-block-start: 0; }

/* Image card */
.kg-image-card img {
  border-radius: var(--radius-sm);
  max-width: 100%;
  height: auto;
}

.kg-image-card figcaption {
  font-size: var(--text-sm);
  color: var(--color-secondary);
  text-align: center;
  padding-block-start: 8px;
}

/* Gallery */
.kg-gallery-card { }
.kg-gallery-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.kg-gallery-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-block-start: 4px;
}

.kg-gallery-image {
  display: block;
  margin: 0;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Bookmark */
.kg-bookmark-card {}
.kg-bookmark-container {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  min-height: 100px;
}

.kg-bookmark-content {
  flex: 1;
  padding: 20px;
}

.kg-bookmark-title {
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  font-size: var(--text-base);
  line-height: 1.4;
}

.kg-bookmark-description {
  font-size: var(--text-sm);
  color: var(--color-secondary);
  margin-block-start: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kg-bookmark-metadata {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 12px;
  font-size: var(--text-sm);
  color: var(--color-secondary);
}

.kg-bookmark-icon {
  width: 16px;
  height: 16px;
}

.kg-bookmark-thumbnail {
  flex-shrink: 0;
  width: 160px;
  object-fit: cover;
}

/* Callout */
.kg-callout-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-off-white);
  border-radius: var(--radius-sm);
  border-inline-start: 4px solid var(--color-accent-green);
}

.kg-callout-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.kg-callout-text {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-body);
}

/* Video */
.kg-video-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000;
}

.kg-video-card video {
  width: 100%;
  display: block;
}

/* Embed / HTML */
.kg-embed-card {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Toggle */
.kg-toggle-card {
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-sm);
  padding: 0 20px;
}

.kg-toggle-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  cursor: pointer;
}

.kg-toggle-content {
  padding-block-end: 16px;
  font-size: var(--text-base);
  color: var(--color-body);
}

/* Product */
.kg-product-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
  background: var(--color-white);
}

.kg-product-card-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.kg-product-card-title {
  font-size: var(--text-h6);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.kg-product-card-rating-star {
  display: inline-block;
  color: var(--color-accent-green);
}

.kg-product-card-description {
  margin-block-start: 8px;
  font-size: var(--text-base);
  color: var(--color-body);
}

.kg-product-card-button {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--color-heading);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  text-decoration: none;
  margin-block-start: 14px;
  font-size: var(--text-base);
}

/* Width modifiers (Ghost editor) */
.kg-width-wide {
  position: relative;
  width: 85vw;
  max-width: 1200px;
  margin-inline: auto;
  left: 50%;
  translate: -50% 0;
}

.kg-width-full {
  position: relative;
  width: 100vw;
  margin-inline: auto;
  left: 50%;
  translate: -50% 0;
}

/* === PAGINATION === */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-block-start: 56px;
  padding-block-start: 40px;
  border-block-start: 1px solid var(--color-card-border);
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--color-white);
  border: 1.5px solid var(--color-card-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  text-decoration: none;
  box-shadow: var(--shadow-btn-sec);
  transition: border-color .15s;
}
.pagination-btn:hover { border-color: var(--color-heading); }

.pagination-info {
  font-size: var(--text-sm);
  color: var(--color-secondary);
}

/* === BADGES / PILLS === */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  background: var(--color-off-white);
  border: 1px solid var(--color-card-border);
  color: var(--color-heading);
  transition: border-color .15s;
}
.tag-pill:hover { border-color: var(--color-heading); }

/* === PRINT === */

/* Sidebar cat active state — targets body_class (e.g. .tag-reviews .sidebar-cat-link--reviews) */
.tag-reviews .sidebar-cat-link--reviews,
.tag-articles .sidebar-cat-link--articles,
.tag-guides .sidebar-cat-link--guides,
.tag-how-tos .sidebar-cat-link--how-tos {
  color: var(--color-primary-blue);
  font-weight: 700;
}


/* === LOAD MORE === */
/* Figma Secondary Button 15627:16738 / home Buttons Row: 199x54 white pill,
   1px #72C50F, r76, Button-White-01 shadow, 16/18 Medium */
.load-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 48px auto 0;
  height: 54px;
  min-width: 199px;
  padding-inline: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-accent-green);
  border-radius: 76px;
  color: var(--color-heading);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  line-height: 18px;
  box-shadow: 0 4px 10px rgba(20,20,43,.04);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}
.load-more-btn:hover { background: #f9fff5; }
.load-more-btn:focus-visible { outline: 2px solid var(--color-primary-blue); outline-offset: 3px; }
.load-more-btn[disabled] { opacity: .5; cursor: default; }
.load-more__message {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-secondary);
  margin-block-start: 12px;
}
.load-more__message a { color: var(--color-primary-blue); }

/* === SECTION VIEW-ALL ROW (homepage) === */
.section-view-all-row {
  text-align: start;
  margin-block-start: 28px;
}

/* === GUIDES BLOCK CTA === */
.guides-block { display: flex; flex-direction: column; }
.guides-block__cta {
  align-self: center;
  margin-block-start: 24px;
  background: #ffffff;
  border: 1px solid #72c50f;
  border-radius: 76px;
  color: #242424;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 191px;
  height: 54px;
  padding-inline: 24px;
  box-shadow: var(--shadow-btn-sec);
  text-decoration: none;
  transition: background 0.15s ease;
}
@media (min-width: 768px) { .guides-block__cta { margin-block-start: 32px; } }
@media (min-width: 1024px) { .guides-block__cta { margin-block-start: 48px; } }
.guides-block__cta:hover { background: #f9fff5; color: #242424; }

/* === HERO FEED (partial alias) === */
.hero-feed { }

/* === ARTICLE / BLOG POST (post.hbs) — .at-* ================================
   Figma: Lifers Affiliate X Ghost Template_V2 — Blog Desktop 15615:17005,
   Tablet 15667:3858, Mobile 15681:3749. Mobile-first; ≥768 tablet, ≥1024 desktop.
   ========================================================================== */
.at-page { background: var(--color-white); }

/* --- Hero ----------------------------------------------------------------- */
.at-hero { padding-block-start: 32px; }
@media (min-width: 768px)  { .at-hero { padding-block-start: 56px; } }
@media (min-width: 1024px) { .at-hero { padding-block-start: 100px; } }

.at-hero-container {
  max-width: 1296px;
  margin-inline: auto;
  padding-inline: var(--container-pad-m);
}
@media (min-width: 768px) { .at-hero-container { padding-inline: var(--container-pad); } }

.at-hero-top {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.at-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.at-hero-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  text-decoration: none;
}
.at-hero-cat .cat-icon { display: inline-flex; }
.at-hero-cat .cat-icon-svg { inline-size: 24px; block-size: 24px; color: var(--color-heading); }
.at-hero-meta-divider {
  display: block;
  inline-size: 1px;
  block-size: 32px;
  background: var(--color-divider);
}
.at-hero-date { font-size: 16px; line-height: 18px; font-weight: var(--fw-regular); color: var(--color-primary-blue); }

.at-hero-heading {
  padding-block-start: 24px;
  font-size: 28px;
  line-height: 36px;
  color: var(--color-heading);
  font-weight: var(--fw-bold);
}
@media (min-width: 768px)  { .at-hero-heading { font-size: 32px; line-height: 40px; } }
@media (min-width: 1024px) {
  .at-hero-heading {
    font-size: var(--text-h1);
    line-height: var(--lh-h1);
    max-width: 1100px;
    margin-inline: calc((720px - 1100px) / 2); /* heading may exceed the 720 column, centered */
  }
}

.at-hero-excerpt {
  padding-block-start: 16px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-body);
  max-width: 720px;
}
@media (min-width: 768px) { .at-hero-excerpt { line-height: 28px; } }

/* Hero product card — Figma "Card H / Small V2" (desktop/tablet) */
.at-hero-cardrow { padding-block-start: 32px; inline-size: 100%; display: flex; justify-content: center; }
.at-hero-cardrow[hidden] { display: none; } /* override the flex display so affiliate-links.js can hide it pre-upgrade */
.at-hero-card {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  text-align: start;
}
.at-hero-card-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.at-hero-card-thumb-wrap {
  inline-size: 88px;
  block-size: 88px;
  border-radius: 16px;
  background: var(--color-card-border);
  overflow: hidden;
  flex-shrink: 0;
}
.at-hero-card-thumb { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.at-hero-card-info { display: flex; flex-direction: column; gap: 6px; }
.at-hero-card-name { font-size: 20px; line-height: 22px; font-weight: var(--fw-bold); color: var(--color-heading); max-width: 225px; }
.at-hero-card-price { font-size: 16px; line-height: 18px; font-weight: var(--fw-bold); color: var(--color-primary-blue); }
.at-hero-card-buttons { display: flex; align-items: center; gap: 24px; }
.at-hero-card-amazon { display: inline-flex; align-items: center; }
.at-hero-card-amazon img { inline-size: 81px; block-size: auto; }
.at-hero-card-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  background: var(--color-primary-blue);
  color: var(--color-white);
  border-radius: 76px;
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: opacity .15s;
}
.at-hero-card-buy:hover { opacity: .88; }
/* Mobile: Figma "Card H / Amazon V2" — image+info row, buttons row right-aligned, no shadow */
@media (max-width: 767px) {
  .at-hero-cardrow { justify-content: flex-start; }
  .at-hero-card { inline-size: 100%; max-width: 327px; box-shadow: none; }
  .at-hero-card-inner { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 16px; align-items: center; }
  .at-hero-card-thumb-wrap { inline-size: 95.4px; block-size: 95.4px; border-radius: 13.6px; }
  .at-hero-card-price { font-weight: var(--fw-medium); }
  .at-hero-card-buttons { grid-column: 1 / -1; justify-self: end; gap: 16px; }
  .at-hero-card-buy { padding: 12px 24px; font-size: 12px; line-height: 18px; }
}

/* Hero feature image — aspect from Figma 1248x702.72, badge top-right */
.at-hero-image-wrap { padding-block-start: 32px; }
@media (min-width: 768px)  { .at-hero-image-wrap { padding-block-start: 56px; } }
@media (min-width: 1024px) { .at-hero-image-wrap { padding-block-start: 48px; } }

.at-hero-image-inner {
  position: relative;
  inline-size: 100%;
  max-width: 1248px;
  margin-inline: auto;
  aspect-ratio: 1248 / 702.72;
  border-radius: 32px;
  overflow: hidden;
  background: var(--color-card-border);
}
.at-hero-image { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.at-hero-image-caption {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-secondary-text, #6b7280);
  text-align: center;
  padding-block-start: 8px;
  margin: 0;
}
.at-hero-image-caption a { color: inherit; text-decoration: underline; }

.at-hero-badge {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  block-size: 64px;
  background: var(--color-white);
  border: 1.25px solid var(--color-card-border);
  border-radius: 50%;
  box-shadow: 0 2.5px 4.4px rgba(20,20,43,.06);
}
.at-hero-badge svg { inline-size: 25px; block-size: 25px; color: var(--color-primary-blue); }
/* Tablet + mobile artboards: badge is 84px (desktop 64) */
@media (max-width: 1023px) {
  .at-hero-badge { inline-size: 84px; block-size: 84px; border: 1.23px solid var(--color-card-border); }
}

/* --- Body ------------------------------------------------------------------ */
.at-body-section { padding-block: 32px; }
@media (min-width: 768px)  { .at-body-section { padding-block: 56px; } }
@media (min-width: 1024px) { .at-body-section { padding-block: 80px; } }

.at-body-container {
  max-width: calc(740px + 2 * var(--container-pad-m));
  margin-inline: auto;
  padding-inline: var(--container-pad-m);
}
@media (min-width: 768px) {
  .at-body-container {
    max-width: calc(740px + 2 * var(--container-pad));
    padding-inline: var(--container-pad);
  }
}

/* === Article content (.gh-content) — Figma prose + content components ====== */
.at-body {
  font-size: 16px;
  line-height: 28px;
  color: var(--color-body);
}
@media (max-width: 767px) { .at-body { line-height: 24px; } }

/* Vertical rhythm: blocks supply their own top spacing (Figma zero-gap stacks) */
.at-body > * + * { margin-block-start: 24px; }
.at-body > h2 { margin-block-start: 48px; }
.at-body > h3, .at-body > h4, .at-body > h5, .at-body > h6 { margin-block-start: 48px; }
.at-body > h2 + p { margin-block-start: 8px; }
.at-body > h3 + p, .at-body > h5 + p, .at-body > h6 + p { margin-block-start: 16px; }
.at-body > h4 + p { margin-block-start: 12px; }
.at-body > p + ul, .at-body > p + ol { margin-block-start: 24px; }
.at-body > figure, .at-body > .kg-card, .at-body > blockquote { margin-block-start: 48px; }
.at-body > *:first-child { margin-block-start: 0; }
/* Mobile artboard rhythm: blocks sit 24px apart (component-spacing 24, not 48);
   TL;DR→first heading is 32 (hero Frame 1 pb-32) */
@media (max-width: 767px) {
  .at-body > h2, .at-body > h3, .at-body > h4, .at-body > h5, .at-body > h6 { margin-block-start: 24px; }
  .at-body > figure, .at-body > .kg-card, .at-body > blockquote, .at-body > hr { margin-block-start: 24px; }
  .at-body > .tldr-card + h2 { margin-block-start: 32px; }
  .at-body > *:first-child { margin-block-start: 0; }
}

.at-body h1, .at-body h2, .at-body h3, .at-body h4, .at-body h5, .at-body h6 {
  color: var(--color-heading);
  font-weight: var(--fw-bold);
}
.at-body h2 { font-size: 38px; line-height: 50px; }
.at-body h3 { font-size: 32px; line-height: 42px; }
.at-body h4 { font-size: 22px; line-height: 32px; }
.at-body h5 { font-size: 18px; line-height: 28px; }
.at-body h6 { font-size: 16px; line-height: 24px; }
/* Mobile artboard renders a compact scale (measured: H2 24/32, H3 20/28, H4 18/26, H5 16/24) */
@media (max-width: 767px) {
  .at-body h2 { font-size: 24px; line-height: 32px; }
  .at-body h3 { font-size: 20px; line-height: 28px; }
  .at-body h4 { font-size: 18px; line-height: 26px; }
  .at-body h5 { font-size: 16px; line-height: 24px; }
}

.at-body a { color: var(--color-primary-blue); text-decoration: underline; }
.at-body a:hover { opacity: .8; }

/* Lists — Figma structure: number column 20px + 16 gap, 6px dot + 14 gap;
   24px block indent on tablet/desktop, none on mobile; item gap 16 */
.at-body ul, .at-body ol { padding-inline-start: 24px; list-style: none; }
.at-body ol { counter-reset: at-list; }
.at-body li { margin-block-start: 16px; position: relative; }
.at-body li:first-child { margin-block-start: 0; }
.at-body ol > li { padding-inline-start: 36px; counter-increment: at-list; }
.at-body ol > li::before {
  content: counter(at-list) ".";
  position: absolute;
  inset-inline-start: 0;
  inline-size: 20px;
  color: var(--color-body);
}
.at-body ul > li { padding-inline-start: 20px; }
.at-body ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 11px;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--color-primary-blue);
}
@media (max-width: 767px) {
  .at-body ul, .at-body ol { padding-inline-start: 0; }
  .at-body ul > li::before { inset-block-start: 9px; }
}
/* Components with their own list chrome opt out of the prose markers */
.at-body .tldr-card li, .at-body .faq-list li { padding-inline-start: 0; }
.at-body .tldr-card li::before, .at-body .faq-list li::before { content: none; }

/* Images — Figma 740-wide, radius 24 */
.at-body img { border-radius: 24px; inline-size: 100%; }
.at-body .kg-image-card img { border-radius: 24px; }
.at-body figcaption {
  padding-block-start: 12px;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--color-secondary);
  text-align: center;
}

/* Blockquote — Figma testimonial card */
.at-body blockquote {
  background: var(--color-off-white);
  border: none;
  border-radius: var(--radius-card);
  padding: 48px;
  font-size: 22px;
  line-height: 36px;
  color: var(--color-heading);
}
.at-body blockquote p { font-size: inherit; line-height: inherit; color: inherit; }
@media (max-width: 767px) { .at-body blockquote { padding: 24px; } }

/* hr — legacy content separators (publish checklist bans new ones) */
.at-body hr { border: none; block-size: 1px; background: var(--color-card-border); margin-block-start: 48px; }

/* Tables — Figma comparison table 1 (933px breakout, gray header) */
.at-body table { border-collapse: collapse; inline-size: 100%; }
.at-body .kg-table-card { margin-inline: auto; }
.at-body .kg-table-card__container,
.at-body > table {
  display: block;
  overflow-x: auto;
  border: 1.5px solid var(--color-card-border);
  border-radius: var(--radius-card);
  -webkit-overflow-scrolling: touch;
}
/* Figma scroll indicator: #EDEFF3 track, green thumb, h9 r1000 */
.at-body .kg-table-card__container::-webkit-scrollbar,
.at-body > table::-webkit-scrollbar { block-size: 9px; }
.at-body .kg-table-card__container::-webkit-scrollbar-track,
.at-body > table::-webkit-scrollbar-track { background: var(--color-card-border); border-radius: 1000px; margin-inline: 5px; }
.at-body .kg-table-card__container::-webkit-scrollbar-thumb,
.at-body > table::-webkit-scrollbar-thumb { background: var(--color-accent-green); border-radius: 1000px; }
@supports not selector(::-webkit-scrollbar) {
  .at-body .kg-table-card__container,
  .at-body > table { scrollbar-color: var(--color-accent-green) var(--color-card-border); scrollbar-width: thin; }
}
.at-body > table { inline-size: max-content; max-inline-size: 100%; margin-inline: auto; }
/* Inside a kg table card the CONTAINER is the scroller — undo the legacy
   `.gh-content table { display:block; overflow-x:auto }` so the wrapper's
   border/radius/scrollbar chrome applies to the scrolling surface */
.at-body .kg-table-card__container table {
  display: table;
  overflow-x: visible;
  inline-size: 100%; /* cells' 120px min-width force the real (scrollable) width; text wraps like the Figma columns */
}
.at-body th, .at-body td {
  padding: 32px 16px;
  font-size: 16px;
  line-height: 18px;
  border: none;
  text-align: center;
  vertical-align: middle;
  min-inline-size: 120px;
}
@media (min-width: 1024px) { .at-body th, .at-body td { padding: 32px 24px; } }
.at-body thead th {
  background: var(--color-card-border);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  border-block-end: 1.5px solid var(--color-off-white);
  border-inline-start: 1.5px solid var(--color-off-white);
}
.at-body thead th:first-child { border-inline-start: none; }
.at-body tbody td {
  background: var(--color-white);
  color: var(--color-body);
  border-block-end: 1px solid var(--color-card-border);
  border-inline-start: 1px solid var(--color-card-border);
}
.at-body tbody td:first-child { border-inline-start: none; }
.at-body tbody tr:last-child td { border-block-end: none; }
.at-body tbody td:first-child,
.at-body thead th:first-child {
  text-align: start;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}
/* Sticky first column while the table scrolls (Figma mobile/tablet annotation) */
.at-body tbody td:first-child, .at-body thead th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
}
.at-body tbody td:first-child { background: var(--color-white); }
/* 933px breakout on wide screens */
@media (min-width: 1024px) {
  .at-body .kg-table-card, .at-body > table { inline-size: 933px; max-inline-size: none; margin-inline: calc((100% - 933px) / 2); }
  .at-body .kg-table-card__container { inline-size: 100%; }
}

/* TL;DR card — Figma "List Wrapper" 15616:19611 */
.at-body .tldr-card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 48px;
}
/* Collapse circle — Figma 36px button, top/right 39 (tablet+) / 23 (mobile) */
.at-tldr-toggle {
  position: absolute;
  inset-block-start: 39px;
  inset-inline-end: 39px;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--color-white);
  border: 0.72px solid var(--color-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2.5px 4.4px rgba(20,20,43,.06);
  padding: 0;
}
@media (max-width: 767px) { .at-tldr-toggle { inset-block-start: 23px; inset-inline-end: 23px; } }
.at-tldr-toggle svg { inline-size: 17px; block-size: 17px; color: var(--color-heading); }
.tldr-card:not(.is-collapsed) .at-tldr-toggle .at-tldr-v { display: none; }
.tldr-card.is-collapsed li:not(:first-child) { display: none; }
/* keep the lead line clear of the collapse circle */
.at-body .tldr-card li:first-child { padding-inline-end: 44px; }
@media (max-width: 767px) { .at-body .tldr-card { padding: 24px; } }
.at-body .tldr-card ul, .at-body .tldr-card ol { list-style: none; padding-inline-start: 0; }
.at-body .tldr-card li { display: flex; gap: 16px; margin-block-start: 16px; font-size: 16px; line-height: 28px; color: var(--color-body); }
.at-body .tldr-card li:first-child { margin-block-start: 0; }
.at-body .tldr-num { min-inline-size: 20px; flex-shrink: 0; }
.at-body .tldr-card .tldr-primary { font-weight: var(--fw-bold); color: var(--color-heading); }
.at-body .tldr-card .tldr-primary .tldr-num { color: var(--color-heading); }
@media (max-width: 767px) { .at-body .tldr-card li { line-height: 24px; } }

/* Product pick (guides content) — Figma "Card H / Amazon V2" */
.at-body .product-pick {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}
.at-body .product-pick__media {
  inline-size: 112px;
  block-size: 112px;
  border-radius: 16px;
  background: var(--color-card-border);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.at-body .product-pick__media img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; }
.at-body .product-pick__body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.at-body .product-pick__badge {
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  color: var(--color-primary-blue);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
.at-body .product-pick__name { font-size: 20px; line-height: 22px; margin: 0; }
.at-body .product-pick__actions { display: flex; align-items: center; gap: 12px; padding-block-start: 10px; flex-wrap: wrap; }
/* Mobile: Figma Card H / Amazon V2 — image+text row, actions row right-aligned */
@media (max-width: 767px) {
  .at-body .product-pick { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; box-shadow: none; }
  .at-body .product-pick__media { grid-row: 1 / span 2; grid-column: 1; align-self: center; inline-size: 95.4px; block-size: 95.4px; border-radius: 13.6px; }
  .at-body .product-pick__body { display: contents; }
  .at-body .product-pick__badge { grid-column: 2; }
  .at-body .product-pick__name { grid-column: 2; margin-block-start: 6px; }
  .at-body .product-pick__actions { grid-column: 1 / -1; justify-content: flex-end; inline-size: 100%; padding-block-start: 16px; }
}

/* Ghost native product card inside posts — restyled to the same Figma card language.
   Markup (Ghost-fixed): container > image, title-container > title, rating?, description, button.
   Selector weights mirror /public/cards.min.css (e.g. `.kg-product-card h4.kg-product-card-title`,
   `a.kg-product-card-button`) so these later rules win the cascade. */
.at-body .kg-product-card { display: block; padding: 16px 18px; }
.at-body .kg-product-card-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-row-gap: 0;
  column-gap: 32px;
  align-items: center;
  inline-size: 100%;
  max-inline-size: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--color-body);
  font-family: var(--font-sans);
}
.at-body .kg-product-card-image {
  grid-row: 1 / span 2;
  grid-column: 1;
  justify-self: start;
  inline-size: 112px;
  block-size: 112px;
  object-fit: cover;
  border-radius: 16px;
  background: var(--color-card-border);
}
.at-body .kg-product-card-title-container { grid-column: 2; }
.at-body .kg-product-card h4.kg-product-card-title { font-size: 20px; line-height: 22px; font-weight: var(--fw-bold); color: var(--color-heading); margin: 0; font-family: var(--font-sans); }
.at-body .kg-product-card-rating { grid-column: 2; display: flex; align-items: center; gap: 2px; padding-block-start: 8px; padding-inline-start: 0; align-self: center; justify-self: start; }
.at-body .kg-product-card-rating-star { display: inline-flex; inline-size: auto; block-size: auto; }
.at-body .kg-product-card-rating-star svg { inline-size: 13px; block-size: 12px; fill: var(--color-card-border); opacity: 1; }
.at-body .kg-product-card-rating-active.kg-product-card-rating-star svg { fill: #FDB52A; opacity: 1; }
.at-body .kg-product-card-description { grid-column: 1 / -1; margin: 0; padding-block-start: 16px; }
.at-body .kg-product-card .kg-product-card-description p,
.at-body .kg-product-card .kg-product-card-description ul,
.at-body .kg-product-card .kg-product-card-description ol {
  font-size: 16px;
  line-height: 28px;
  color: var(--color-body);
  opacity: 1;
  margin-top: 0;
}
.at-body .kg-product-card a.kg-product-card-button {
  grid-column: 1 / -1;
  justify-self: end;
  inline-size: auto;
  block-size: auto;
  margin-block-start: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: var(--color-primary-blue);
  color: var(--color-white);
  border-radius: 76px;
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  font-family: var(--font-sans);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: opacity .15s;
}
.at-body .kg-product-card a.kg-product-card-button:hover { opacity: .88; }
@media (max-width: 767px) {
  .at-body .kg-product-card { box-shadow: none; }
  .at-body .kg-product-card-container { column-gap: 16px; }
  .at-body .kg-product-card-image { inline-size: 95.4px; block-size: 95.4px; border-radius: 13.6px; }
  .at-body .kg-product-card .kg-product-card-description p,
  .at-body .kg-product-card .kg-product-card-description ul,
  .at-body .kg-product-card .kg-product-card-description ol { line-height: 24px; }
}

/* In-content buttons — Figma pill pair (blue primary / green-border secondary) */
.at-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 24px;
  border-radius: 76px;
  font-size: 16px;
  line-height: 18px;
  text-decoration: none;
  transition: opacity .15s, border-color .15s;
}
.at-body .btn--primary {
  background: var(--color-primary-blue);
  border: none;
  color: var(--color-white);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-card);
}
.at-body .btn--primary:hover { opacity: .88; }
.at-body .btn--secondary {
  background: var(--color-white);
  border: 1px solid var(--color-accent-green);
  color: var(--color-heading);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-btn-sec);
}
.at-body .btn--secondary:hover { border-color: var(--color-dark-green); }

/* FAQ inside content (no-JS fallback) + relocated section styling below */
.at-body .faq-list { border-block-start: none; gap: 0; }
.at-body .faq-item { border-block-end: 1px solid var(--color-card-border); padding-block: 32px 40px; }
.at-body .faq-item:first-child { padding-block-start: 0; }
.at-body .faq-item:last-child { border-block-end: none; padding-block-end: 0; }
.at-body .faq-item__question { font-size: 28px; line-height: 38px; margin: 0; }
.at-body .faq-item__answer { padding-block-start: 16px; }
.at-body .faq-item__answer p { margin-block-start: 16px; }
.at-body .faq-item__answer p:first-child { margin-block-start: 0; }
@media (max-width: 1023px) { .at-body .faq-item__question { font-size: 22px; line-height: 30px; } }
@media (max-width: 767px)  { .at-body .faq-item__question { font-size: 20px; line-height: 28px; } .at-body .faq-item__answer { line-height: 24px; } }

/* --- CTA banner — Figma "Section CTA/V1" 15615:17676 ----------------------- */
.at-cta-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-m);
}
@media (min-width: 768px) { .at-cta-container { padding-inline: var(--container-pad); } }
.at-cta-card {
  position: relative;
  background: var(--color-accent-green);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 16px;
  min-block-size: 409px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (min-width: 768px) {
  .at-cta-card { padding: 64px 80px; min-block-size: 593px; align-items: center; }
}
@media (min-width: 1024px) {
  .at-cta-card { min-block-size: 420px; justify-content: center; align-items: flex-end; }
}
.at-cta-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; inline-size: 100%; }
@media (min-width: 768px) { .at-cta-content { inline-size: 580px; } }
.at-cta-heading {
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--fw-bold);
  color: var(--color-white);
}
@media (min-width: 768px) { .at-cta-heading { font-size: 38px; line-height: 50px; } }
.at-cta-subhead {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  margin-block-start: 8px;
  opacity: .85;
}
.at-cta-form { inline-size: 100%; max-width: 554px; padding-block-start: 24px; }
@media (max-width: 767px) { .at-cta-form { max-width: 295px; } }
@media (min-width: 768px)  { .at-cta-form { padding-block-start: 32px; } }
@media (min-width: 1024px) { .at-cta-form { padding-block-start: 40px; } }
.at-cta-input-pill {
  display: flex;
  align-items: center;
  block-size: 72px;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 108px;
  padding: 8px 8px 8px 24px;
  box-shadow: 0 2px 3.5px rgba(20,20,43,.06);
}
.at-cta-input-icon { inline-size: 20px; block-size: 20px; color: var(--color-secondary); fill: currentColor; flex-shrink: 0; }
.at-cta-input {
  flex: 1;
  min-inline-size: 0;
  border: none;
  outline: none;
  padding-inline: 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 18px;
  color: var(--color-heading);
  background: transparent;
}
.at-cta-input::placeholder { color: var(--color-secondary); }
.at-cta-submit {
  flex-shrink: 0;
  padding: 18px 24px;
  background: var(--color-primary-blue);
  color: var(--color-white);
  border-radius: 76px;
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  box-shadow: 0 2px 3.5px rgba(20,20,43,.06);
  transition: opacity .15s;
}
.at-cta-submit:hover { opacity: .88; }
.at-cta-form-success, .at-cta-form-error { display: none; padding-block-start: 12px; color: var(--color-white); font-weight: var(--fw-medium); }
.at-cta-form.success .at-cta-form-success { display: block; }
.at-cta-form.error .at-cta-form-error { display: block; }
.at-cta-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block-start: 8px;
  color: var(--color-white);
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--fw-medium);
}
@media (min-width: 768px)  { .at-cta-proof { padding-block-start: 16px; } }
@media (min-width: 1024px) { .at-cta-proof { padding-block-start: 24px; } }
.at-cta-proof svg {
  inline-size: 20px;
  block-size: 20px;
  flex-shrink: 0;
  /* Figma: blue disc + white check at every breakpoint.
     Sprite glyphs default to fill:black — currentColor is required for the tint. */
  color: var(--color-primary-blue);
  fill: currentColor;
  background: var(--color-white);
  border-radius: 50%;
}
/* Collage — decorative, rotated, clipped by card */
.at-cta-collage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.at-cta-collage-rotor {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  rotate: -4deg;
  inset-inline-end: -30px;
  inset-block-end: -40px;
}
/* Mobile artboard: only the top tile row peeks above the card's bottom edge,
   clear of the title/input/proof content */
@media (max-width: 767px) { .at-cta-collage-rotor { inset-inline-end: -11px; inset-block-end: -250px; } }
@media (min-width: 768px) { .at-cta-collage-rotor { gap: 16px; inset-inline-end: -40px; inset-block-end: -570px; } }
@media (min-width: 1024px) { .at-cta-collage-rotor { gap: 12px; inset-inline-start: -40px; inset-inline-end: auto; inset-block-end: -48px; } }
.at-cta-collage-col { display: flex; flex-direction: column; gap: 7px; }
@media (min-width: 768px) { .at-cta-collage-col { gap: 16px; } }
@media (min-width: 1024px) { .at-cta-collage-col { gap: 12px; } }
.at-cta-collage-col--mid { padding-block-end: 25px; }
@media (min-width: 768px) { .at-cta-collage-col--mid { padding-block-end: 52px; } }
@media (min-width: 1024px) { .at-cta-collage-col--mid { padding-block-end: 40px; } }
.at-cta-collage-img {
  inline-size: 108px;
  block-size: 108px;
  border-radius: 3px;
  object-fit: cover;
  background: var(--color-off-white);
}
@media (min-width: 768px) { .at-cta-collage-img { inline-size: 228px; block-size: 228px; border-radius: 5px; } }
@media (min-width: 1024px) { .at-cta-collage-img { inline-size: 175px; block-size: 175px; border-radius: 4px; } }

/* --- Products mentioned — Figma 15616:19371 -------------------------------- */
.at-products-section { padding-block-start: 32px; }
@media (min-width: 768px)  { .at-products-section { padding-block-start: 56px; } }
@media (min-width: 1024px) { .at-products-section { padding-block-start: 48px; } }
.at-products-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-m);
}
@media (min-width: 768px) { .at-products-container { padding-inline: var(--container-pad); } }
.at-products-heading {
  font-size: 22px;
  line-height: 26px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  text-align: center;
  padding-block-end: 24px;
}
@media (min-width: 1024px) { .at-products-heading { line-height: 32px; } }
.at-products-grid {
  display: flex;
  gap: 18px;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 8px;
}
@media (min-width: 1240px) { .at-products-grid { justify-content: center; overflow-x: visible; } }
.at-product-card {
  flex: 0 0 225px;
  scroll-snap-align: start;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 3.5px rgba(20,20,43,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.at-product-card-img-wrap {
  display: block;
  block-size: 157px;
  background: var(--color-card-border);
  border-start-start-radius: 8px;
  border-start-end-radius: 8px;
  overflow: hidden;
}
.at-product-card-img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.at-product-card-body {
  flex: 1;
  padding: 20px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.at-product-card-title { min-block-size: 56px; /* reserve 2 lines (28px×2) so 1- and 2-line titles share a baseline, keeping the price→button gap and the button row consistent across cards */ font-size: 18px; line-height: 28px; font-weight: var(--fw-bold); color: var(--color-heading); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.at-product-card-title a { color: inherit; text-decoration: none; }
.at-product-card-title a:hover { color: var(--color-primary-blue); }
.at-product-card-price { padding-block-start: 4px; font-size: 16px; line-height: 18px; font-weight: var(--fw-medium); color: var(--color-body); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.at-product-card-buy {
  margin-block-start: 12px; /* fixed gap to price (Figma 15616:19371 Wrapper gap-[12px]); title min-height keeps this consistent across cards */
  padding-block: 19px;
  padding-inline: 80px; /* Figma 6651:16176 padding model; natural width ~248px; max-inline-size caps in narrow containers */
  max-inline-size: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-accent-green);
  border-radius: 76px;
  box-shadow: var(--shadow-btn-sec);
  font-size: 16px;
  line-height: 18px;
  color: #242424;
  text-decoration: none;
  transition: border-color .15s;
}
.at-product-card-buy:hover { border-color: var(--color-dark-green); }
/* (0,2,0) beats .at-body a { color: blue; text-decoration: underline } (0,1,1) */
.at-body .at-product-card-buy { color: #242424; text-decoration: none; }
/* (0,2,1) beats .at-body img { inline-size: 100% } (0,1,1) */
.at-body img.at-product-card-buy-icon { width: 52px; inline-size: 52px; block-size: auto; border-radius: 0; }
.at-product-card-buy svg { inline-size: 14px; block-size: 14px; flex-shrink: 0; fill: currentColor; }

/* Carousel page dots (JS-driven) */
.at-dots { display: flex; justify-content: center; gap: 10px; padding: 8px 12px; }
.at-dots button { inline-size: 10px; block-size: 10px; border-radius: 50%; background: rgba(0,0,0,.3); padding: 0; }
.at-dots button.is-active { background: var(--color-primary-blue); }
@media (min-width: 1240px) { .at-products-section .at-dots { display: none; } }

/* --- Author card — Figma "Card Blog Member" 15625:15736 -------------------- */
.at-author-section { padding-block-start: 32px; padding-inline: var(--container-pad-m); }
@media (min-width: 768px) { .at-author-section { padding-block-start: 56px; padding-inline: var(--container-pad); } }
@media (min-width: 1024px) { .at-author-section { padding-block-start: 80px; } }
.at-author-card {
  max-width: 740px;
  margin-inline: auto;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 3.5px rgba(20,20,43,.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 338px;
  padding-block: 40px;
}
.at-author-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-inline: 40px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .at-author-inner { flex-direction: row; gap: 54px; padding-inline: 64px; }
}
.at-author-avatar-wrap {
  inline-size: 160px;
  block-size: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-card-border);
  flex-shrink: 0;
}
.at-author-avatar { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.at-author-avatar-fallback { display: block; inline-size: 100%; block-size: 100%; background: var(--color-card-border); }
.at-author-content { flex: 1; display: flex; flex-direction: column; inline-size: 100%; }
.at-author-name { font-size: 28px; line-height: 38px; font-weight: var(--fw-bold); color: var(--color-heading); }
.at-author-role { padding-block-start: 4px; font-size: 20px; line-height: 22px; font-weight: var(--fw-bold); color: var(--color-primary-blue); }
.at-author-bio { padding-block-start: 12px; font-size: 16px; line-height: 28px; color: var(--color-body); }
.at-author-footer {
  padding-block-start: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  inline-size: 100%;
}
.at-author-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  text-decoration: none;
}
.at-author-link svg { inline-size: 16px; block-size: 16px; }
.at-author-link:hover { color: var(--color-primary-blue); }
.at-author-social { display: flex; align-items: center; gap: 20px; }
.at-author-social a { color: var(--color-heading); display: inline-flex; }
.at-author-social svg { inline-size: 25px; block-size: 25px; }
.at-author-social a:hover { color: var(--color-primary-blue); }

/* --- Related articles — Figma "Section Reviews" 15615:17114 ---------------- */
.at-related-section { padding-block: 32px; }
@media (min-width: 768px)  { .at-related-section { padding-block: 56px; } }
@media (min-width: 1024px) { .at-related-section { padding-block: 80px; } }
.at-related-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-m);
}
@media (min-width: 768px) { .at-related-container { padding-inline: var(--container-pad); } }
.at-related-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
@media (min-width: 768px) {
  .at-related-top { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
}
.at-related-heading {
  font-size: 24px;
  line-height: 32px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}
@media (min-width: 768px) { .at-related-heading { font-size: 38px; line-height: 50px; } }
.at-related-viewall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-accent-green);
  border-radius: 76px;
  box-shadow: var(--shadow-btn-sec);
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s;
}
.at-related-viewall:hover { border-color: var(--color-dark-green); }
.at-related-grid {
  padding-block-start: 32px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
}
@media (min-width: 768px) {
  .at-related-grid { padding-block-start: 48px; grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 56px; }
}
@media (min-width: 1024px) { .at-related-grid { column-gap: 56px; } }
.at-related-card { display: flex; align-items: center; }
.at-related-card-img-wrap {
  display: block;
  inline-size: 141px;
  block-size: 141px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-card-border);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .at-related-card-img-wrap { inline-size: 235px; block-size: 235px; border-radius: 16px; }
}
.at-related-card-img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .3s; }
.at-related-card:hover .at-related-card-img { transform: scale(1.03); }
.at-related-card-content { flex: 1; padding-inline-start: 16px; min-inline-size: 0; }
@media (min-width: 1024px) { .at-related-card-content { padding-inline-start: 28px; } }
.at-related-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.at-related-card-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  min-inline-size: 0;
}
.at-related-card-cat .cat-icon-svg { inline-size: 24px; block-size: 24px; }
.at-related-card-date { font-size: 16px; line-height: 18px; color: var(--color-primary-blue); white-space: nowrap; }
.at-related-card-title { padding-block-start: 16px; font-size: 20px; line-height: 30px; font-weight: var(--fw-bold); color: var(--color-heading); }
@media (min-width: 768px) and (max-width: 1023px) { .at-related-card-title { font-size: 22px; line-height: 32px; } }
.at-related-card-title a { color: inherit; text-decoration: none; }
.at-related-card-title a:hover { color: var(--color-primary-blue); }
.at-related-card-excerpt {
  padding-block-start: 10px;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Mobile card is image + title only (Figma 15681:4495) */
@media (max-width: 767px) {
  .at-related-card-excerpt { display: none; }
  .at-related-card-meta { display: none; }
  .at-related-card-title { font-size: 18px; line-height: 26px; padding-block-start: 0; }
}

/* === ARTICLE-INDEX PAGES (articles.hbs / news.hbs) — Figma 15627:16043 ===== */
/* Hero band: pt only (next section supplies the gap), centered heading + subtitle */
.ai-hero { padding-block-start: var(--section-pad-mobile); }
@media (min-width: 768px) { .ai-hero { padding-block-start: var(--section-pad-tablet); } }
@media (min-width: 1024px) { .ai-hero { padding-block-start: var(--section-pad); } }

.ai-hero-top { text-align: center; margin-block-end: 48px; }

/* h1-special: 52/62 desktop, 32/40 tablet, 28/36 mobile */
.ai-hero-title {
  font-size: 28px;
  line-height: 36px;
  color: var(--color-heading);
  font-weight: var(--fw-bold);
}
@media (min-width: 768px) { .ai-hero-title { font-size: 32px; line-height: 40px; } }
@media (min-width: 1024px) { .ai-hero-title { font-size: var(--text-h1); line-height: var(--lh-h1); } }

.ai-hero-subtitle {
  font-size: var(--text-base);
  line-height: 24px;
  color: var(--color-body);
  max-width: 616px;
  margin-inline: auto;
}
@media (min-width: 768px) { .ai-hero-subtitle { line-height: var(--lh-lg); } }

/* Featured card — Figma Card H/ Product Large 15627:16056 (1220x474).
   Desktop: image left 596/1220; tablet/mobile: image stacks on top (15681:5978 / 15681:7392). */
.feat-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: box-shadow .15s;
}
.feat-card:hover { box-shadow: 0 4px 20px rgba(20,20,43,.12); }
@media (min-width: 1024px) { .feat-card { flex-direction: row; min-block-size: 474px; } }

.feat-card-img-wrap {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-card-border);
  aspect-ratio: 720 / 573; /* Figma tablet 720x572.6 / mobile 327x260 */
}
@media (min-width: 1024px) { .feat-card-img-wrap { inline-size: 48.85%; aspect-ratio: auto; } } /* 596/1220 */

.feat-card-img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.feat-card-body {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 16px;
}
@media (min-width: 768px) { .feat-card-body { padding: 32px; } }
@media (min-width: 1024px) { .feat-card-body { padding: 64px 48px; } }

/* h3-special: 32/42 desktop, 22/30 tablet, 20/28 mobile */
.feat-card-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}
@media (min-width: 768px) { .feat-card-title { font-size: 22px; line-height: 30px; } }
@media (min-width: 1024px) { .feat-card-title { font-size: var(--text-h4); line-height: var(--lh-h4); } }
.feat-card:hover .feat-card-title { color: var(--color-primary-blue); }

.feat-card-excerpt {
  margin-block-start: 8px;
  font-size: var(--text-base);
  line-height: 24px;
  color: var(--color-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) { .feat-card-excerpt { line-height: var(--lh-lg); } }
@media (min-width: 1024px) { .feat-card-excerpt { margin-block-start: 16px; } }

.feat-card-meta {
  margin-block-start: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 1024px) { .feat-card-meta { margin-block-start: 32px; } }

/* Category label — Figma "Simple Category": 24px green icon + 6 gap + 16/18 Medium */
.cat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  line-height: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  white-space: nowrap;
}
.cat-label ~ .cat-label { display: none; } /* cat-label.hbs renders one per matching tag */
.cat-label .sidebar-cat-icon { inline-size: 24px; block-size: 24px; color: var(--color-accent-green); flex-shrink: 0; }

.feat-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  font-size: var(--text-base);
  line-height: 18px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  white-space: nowrap;
}
.feat-card-chevron { color: var(--color-accent-green); }
.feat-card:hover .feat-card-readmore { text-decoration: underline; }

/* Sidebar newsletter — collage variant (listing pages) — Figma 15631:18734:
   fixed-height green card, -4deg rotated 3x3 collage of post images clipped below the form */
.sidebar-newsletter--collage {
  position: relative;
  overflow: hidden;
  padding: 48px 16px;
  min-height: 578px;     /* mobile 15681:7960 */
}
@media (min-width: 768px) { .sidebar-newsletter--collage { min-height: 558px; } } /* tablet 15681:6739 */
@media (min-width: 1024px) { .sidebar-newsletter--collage { min-height: 538px; padding-block: 48px; } }

.sidebar-newsletter-collage {
  position: absolute;
  top: 395px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
}

.sidebar-newsletter-collage-rotor { display: flex; gap: 12px; }
@media (min-width: 768px) { .sidebar-newsletter-collage { top: 375px; } }
@media (min-width: 1024px) { .sidebar-newsletter-collage { top: 317px; } }

.sidebar-newsletter-collage-col { display: flex; flex-direction: column; gap: 12px; }
.sidebar-newsletter-collage-col--mid { margin-block-start: -40px; }

.sidebar-newsletter-collage-img {
  inline-size: 187px;    /* 186.78 tablet/mobile */
  block-size: 187px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--color-off-white);
  display: block;
}
@media (min-width: 1024px) { .sidebar-newsletter-collage-img { inline-size: 175px; block-size: 175px; } }

.ai-articles-empty {
  padding-block: 48px;
  text-align: center;
  font-size: var(--text-base);
  color: var(--color-secondary);
}

/* === SECTION LISTING (custom-section-listing.hbs) — Figma 15627:17467 ====== */
/* Hide Latest/More sections when the category has no posts left for them */
.sl-latest:not(:has(.card-post)) { display: none; }
.sl-more:not(:has(.card-post)) { display: none; }

/* §4 hero — top padding only; pb-0 so the LP carousel section provides its own gap */
.sl-hero { padding-block-start: var(--section-pad-mobile); padding-block-end: 0; }
@media (min-width: 768px) { .sl-hero { padding-block-start: var(--section-pad-tablet); padding-block-end: 0; } }
@media (min-width: 1024px) { .sl-hero { padding-block-start: var(--section-pad); padding-block-end: 0; } }
/* Mobile hero gutter is 24, not 16 (Figma 15681:10358) */
@media (max-width: 767px) { .sl-hero .site-container { padding-inline: 24px; } }

.sl-hero-top { text-align: center; margin-block-end: 48px; }

/* h1-special: 52/62 desktop, 32/40 tablet, 28/36 mobile */
.sl-hero-title {
  font-size: 28px;
  line-height: 36px;
  color: var(--color-heading);
  font-weight: var(--fw-bold);
}
@media (min-width: 768px) { .sl-hero-title { font-size: 32px; line-height: 40px; } }
@media (min-width: 1024px) { .sl-hero-title { font-size: var(--text-h1); line-height: var(--lh-h1); } }

.sl-hero-subtitle {
  font-size: var(--text-base);
  line-height: 24px;
  color: var(--color-body);
  max-width: 616px;
  margin-inline: auto;
}
@media (min-width: 768px) { .sl-hero-subtitle { line-height: var(--lh-lg); } }

/* Hero feature cards — Card V/ Product Large (596w): 2-up desktop/tablet, stacked mobile */
.sl-hero-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .sl-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
  }
}
@media (min-width: 1024px) { .sl-hero-grid { gap: 28px; } }

.slv-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: box-shadow .15s;
}
.slv-card:hover { box-shadow: 0 4px 20px rgba(20,20,43,.12); }

/* Image well: 230.44 mobile / 248 tablet / 420 desktop (Figma) */
.slv-card-img-wrap {
  display: block;
  block-size: 230px;
  background: var(--color-card-border);
  overflow: hidden;
  flex-shrink: 0;
}
@media (min-width: 768px) { .slv-card-img-wrap { block-size: 248px; } }
@media (min-width: 1024px) { .slv-card-img-wrap { block-size: 420px; } }

.slv-card-img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.slv-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
}
@media (min-width: 1024px) { .slv-card-body { padding: 48px; } }

/* h3-special: 32/42 desktop, 22/30 tablet, 20/28 mobile */
.slv-card-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}
@media (min-width: 768px) { .slv-card-title { font-size: 22px; line-height: 30px; } }
@media (min-width: 1024px) { .slv-card-title { font-size: var(--text-h4); line-height: var(--lh-h4); } }
.slv-card:hover .slv-card-title { color: var(--color-primary-blue); }

.slv-card-excerpt {
  margin-block-start: 16px;
  font-size: var(--text-base);
  line-height: 24px;
  color: var(--color-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) { .slv-card-excerpt { line-height: var(--lh-lg); } }
/* Figma tablet/mobile: excerpt runs to 6 lines (desktop stays 3) */
@media (max-width: 1023px) { .slv-card-excerpt { -webkit-line-clamp: 6; } }

/* Details row pinned to the card bottom so the two cards align */
.slv-card-meta {
  margin-block-start: auto;
  padding-block-start: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* §5 More — top padding only; at-cta provides its own gap below via padding-block-start */
.sl-more { padding-block-start: var(--section-pad-mobile); }
@media (min-width: 768px) { .sl-more { padding-block-start: var(--section-pad-tablet); } }
@media (min-width: 1024px) { .sl-more { padding-block-start: var(--section-pad); } }

.sl-more-heading { margin-block-end: 32px; }
@media (min-width: 1024px) { .sl-more-heading { margin-block-end: 48px; } }

.sl-load-more-row {
  display: flex;
  justify-content: center;
  margin-block-start: 32px;
}
@media (min-width: 1024px) { .sl-load-more-row { margin-block-start: 48px; } }
.sl-load-more-row .load-more-btn { margin: 0; }

@media print {
  .site-header, .site-footer, .at-cta-section, .sidebar-newsletter { display: none; }
  body { font-size: 12pt; color: #000; }
  a { color: inherit; text-decoration: none; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
}


/* ============================================================
   V19: White-outline pill pseudo-elements for view-all / load-more buttons
   ============================================================ */

.section-view-all::after,
.load-more-btn::after {
  content: ' \2192';
}

/* Articles load-more: no arrow (Figma 15631:18927, Right Icon: false) */
.articles-section .load-more-btn::after { display: none; }

/* Explore section "Browse articles": owner directive — no arrow */




/* ============================================================
   Homepage-only: hide white text-circle badge; category shown as icon+label in text column
   ============================================================ */
.home-template .card-post-badge,
.home-template .card-product-tag,
.home-template .card-guide-tag,
.home-template .card-icon-badge {
  display: none;
}


/* ─── Products carousel overflow guard at mobile (overflow-x:hidden for iOS Safari 14/15 compat; clip unsupported there) */
@media (max-width: 767px) {
  .latest-products { overflow-x: hidden; }
}

/* ============================================================
   REVIEWS SECTION — horizontal card grid
   Figma: Card H/Article V3; desktop 582×235; tablet 2-col 352×141; mobile 1-col horizontal 141×141
   ============================================================ */

.reviews-section .card-post {
  display: flex;
  flex-direction: row;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  min-height: 235px;
}

.reviews-section .card-post-image-wrap {
  flex-shrink: 0;
  width: 235px;
  align-self: flex-start;
}

.reviews-section .card-post-image {
  width: 235px;
  height: 235px;
  object-fit: cover;
  display: block;
}

.reviews-section .card-post-content {
  flex: 1;
  padding: 0 0 0 16px; /* Figma tablet/mobile: text col pl-16 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Figma V3: text block vertically centered */
  gap: 0; /* rhythm comes from per-block margins (16/10) */
}
@media (min-width: 1024px) {
  .reviews-section .card-post-content { padding: 0 0 0 28px; } /* Figma desktop pl-28 */
}

.reviews-section .card-meta-date { margin-inline-start: 0; text-align: start; }
/* Un-clamp titles in reviews grid only — global 2-line clamp stays for all other card-post contexts */
.reviews-section .card-post-title { display: block; overflow: visible; }

/* Mobile: horizontal card, 141×141 image, 16px left pad (Figma 15645:20552) */
@media (max-width: 767px) {
  .reviews-section .card-post { min-height: 141px; }
  .reviews-section .card-post-image-wrap { width: 141px; }
  .reviews-section .card-post-image { width: 141px; height: 141px; aspect-ratio: unset; }
  .reviews-section .card-post-content {
    padding-inline-start: 16px;
    padding-inline-end: 0;
    padding-block: 0;
    justify-content: center;
  }
  .reviews-section .card-post-meta { display: none; } /* Option 1: mobile = title only */
  .reviews-section .card-post-excerpt { display: none; } /* Option 1: mobile = title only */
}

/* ============================================================
   PRODUCT CARD — star rating + spec rows (v20)
   Figma: Card/V Amazon V2, Rating row + divider + spec dl
   ============================================================ */

.card-product-body {
  --cpb-pad: 16px; /* Figma tablet/mobile content p16 */
  padding: 16px var(--cpb-pad) 0;
}
@media (min-width: 1024px) {
  .card-product-body { --cpb-pad: 24px; padding: 24px var(--cpb-pad) 0; }
}

.card-product-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-block-start: 8px; /* Figma pt-8 below title */
}

.card-product-rating-num {
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  color: #404040;
}

.card-product-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.card-product-divider {
  border: none;
  border-block-start: 1px solid #edeff3;
  margin-block: 16px;
  margin-inline: 0;
}

.card-product-footer {
  padding: 0 16px 16px;
}
@media (min-width: 1024px) {
  .card-product-footer { padding: 0 24px 32px; } /* Figma desktop pb-32 */
}

/* Figma 15648:22848: stacked label-over-value pairs, 20px between pairs, 9px label→value,
   full-card-width divider above the block (negative margins escape the 24px body padding) */
.card-product-specs {
  margin: 16px calc(-1 * var(--cpb-pad, 24px)) 0;
  padding: 24px var(--cpb-pad, 24px) 0;
  border-block-start: 1px solid #edeff3;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-product-spec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding-block: 0;
  border-block-end: none;
}

.card-product-spec:last-of-type {
  border-block-end: none;
}

.card-product-spec dt,
.card-product-spec-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  color: #404040;
}

.card-product-spec dd,
.card-product-spec-value {
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  color: #242424;
  margin: 0;
}

.card-product-spec-link {
  color: #242424;
  font-weight: 500;
  text-decoration: none;
}

.card-product-spec-link:hover {
  color: #0055a7;
}

/* Product card star rating — double-layer clip (v20 final)
   .stars-empty = grey background row; .stars-filled = gold overlay, clipped to --star-pct width.
   --star-pct is set inline from lp_product_rating: calc(value / 5 * 100%). */
.card-product-stars {
  position: relative;
  display: inline-flex;
  width: 73px; /* 5×13px + 4×2px gaps */
  height: 12px;
  flex-shrink: 0;
}

.stars-empty,
.stars-filled {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 2px;
  align-items: center;
}

.stars-filled {
  overflow: hidden;
  width: var(--star-pct, 0%);
}

/* Reviews 1024–1199: narrow desktop — scale image to prevent card squish */
@media (min-width: 1024px) and (max-width: 1199px) {
  .reviews-section__grid { gap: 32px; }
  .reviews-section .card-post { min-height: 175px; }
  .reviews-section .card-post-image-wrap { width: 175px; }
  .reviews-section .card-post-image { width: 175px; height: 175px; }
}

/* ============================================================
   v22 — Figma-fidelity sweep
   ============================================================ */

/* --- Sidebar: Tab Vertical (Browse by topic / Categories) --- */

.sidebar-tabs-block {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.sidebar-tabs-heading {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  padding: 8px 18px 6px;
  margin: 0;
}

.sidebar-tabs-block .sidebar-cats {
  background: #fbfbfc; /* Figma Tab Vertical wrapper: grey box around the list only */
  border-radius: 20px;
  padding: 10px;
  gap: 10px;
}

.sidebar-tabs-block .sidebar-cat-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 8px 15px 18px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 20px; /* Figma Text Single/200 */
  font-weight: 500;
  color: #242424;
  text-decoration: none;
  background: transparent;
  transition: background .15s;
}

.sidebar-tabs-block .sidebar-cat-link:hover {
  background: #edeff3;
  border-radius: 16px;
  font-weight: 700;
}

.sidebar-tabs-block .sidebar-cat-link--selected,
.sidebar-tabs-block .sidebar-cat-link--selected:hover {
  background: #edeff3;
  border-radius: 16px;
  padding: 20px 8px 20px 24px;
  font-weight: 700;
  color: #242424;
}

/* Override green active state for categories tabs block */
.sidebar-tabs-block .sidebar-cat-link[aria-current="page"],
.tag-reviews .sidebar-tabs-block .sidebar-cat-link--reviews,
.tag-articles .sidebar-tabs-block .sidebar-cat-link--articles,
.tag-guides .sidebar-tabs-block .sidebar-cat-link--guides,
.tag-how-tos .sidebar-tabs-block .sidebar-cat-link--how-tos {
  background: #edeff3;
  color: #242424;
}

.sidebar-cat-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

/* Categories headings — desktop sidebar and tablet/mobile strip */
.sidebar-cats-heading {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  color: #242424;
  margin: 0 0 32px; /* Figma heading→tab list 32 */
  padding-inline-start: 0;
}

.articles-cat-strip__heading {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  color: #242424;
  margin-block-end: 16px;
}

/* --- Missing-image placeholders: hold Figma image-well geometry when a post
       has no feature image (dynamic content). Ground = Figma #EDEFF3 well. --- */
.card-post-image-wrap.is-empty,
.card-article-sm-image-wrap.is-empty,
.card-product-sm-image-wrap.is-empty,
.card-guide-image-wrap.is-empty,
.card-product-image-wrap.is-empty,
.hero-card-side-image-wrap.is-empty,
.hero-card-large-image-link.is-empty {
  background: #edeff3;
}

.card-post-image-wrap.is-empty { aspect-ratio: 1 / 1; height: auto; }
.card-guide-image-wrap.is-empty { aspect-ratio: 388 / 272; }
.card-product-image-wrap.is-empty { aspect-ratio: 295 / 206; }

.hero-card-large-image-link.is-empty { height: 239px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-card-large-image-link.is-empty { height: 502px; }
}
@media (min-width: 1024px) {
  .hero-card-large-image-link.is-empty { height: 416px; }
}

/* --- Icon badges: reviews + guide card images --- */

.card-post-image-wrap {
  position: relative;
  display: block;
}

.card-guide-image-wrap {
  position: relative;
  display: block;
}

.card-icon-badge {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 20px;
  width: 52px;
  height: 52px;
  background: #ffffff;
  border: 1px solid #edeff3;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Reviews grid desktop gap defined in consolidated block above */

/* --- Guide card: image height correction (Figma: 272px, was 291px) --- */

.card-guide-image {
  height: 272px;
  object-fit: cover;
}

/* --- Guide card: Read more link with green chevron --- */

.card-guide-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Figma Master Link gap 8 */
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  text-decoration: none;
}

.card-guide-readmore::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3l5 5-5 5' stroke='%2372c50f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Sidebar: card-article-sm (Popular articles widget) --- */

.card-article-sm {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.card-article-sm-image-wrap {
  flex-shrink: 0;
  display: block;
  width: 146px;
  height: 115px;
  border-radius: 16px;
  overflow: hidden;
}

.card-article-sm-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.card-article-sm-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.card-article-sm-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: #242424;
  margin: 0;
  display: block;
  overflow: visible;
}

.card-article-sm-title a {
  color: inherit;
  text-decoration: none;
}

.card-article-sm-title a:hover {
  color: var(--color-accent-green);
}

.card-article-sm-date {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-primary-blue);
  display: block;
}

/* --- Sidebar: card-product-sm (Latest Products widget) --- */

.card-product-sm {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #edeff3;
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0px 2px 7px 0px rgba(20, 20, 43, 0.06);
  text-decoration: none;
}

.card-product-sm-image-wrap {
  flex-shrink: 0;
  width: 149px;
  height: 124px;
  border-radius: 16px;
  overflow: hidden;
  background: #edeff3; /* Figma image-well ground */
}

.card-product-sm-image {
  width: 149px;
  height: 124px;
  object-fit: cover;
  display: block;
}

/* Figma tablet + mobile (Card H/Small V2 product variant): smaller 89.4×74.4 well, r9.6 */
@media (max-width: 1023px) {
  .card-product-sm-image-wrap { width: 89.4px; height: 74.4px; border-radius: 9.6px; }
  .card-product-sm-image { width: 89.4px; height: 74.4px; }
}

.card-product-sm-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  min-width: 0;
}

.card-product-sm-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  color: #242424;
  margin: 0;
}

.card-product-sm-title a {
  color: inherit;
  text-decoration: none;
}

.card-product-sm-title a:hover {
  color: var(--color-accent-green);
}

.card-product-sm-price {
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-primary-blue);
  margin: 0;
}

.card-product-sm-bot {
  display: flex;
  flex-direction: row; /* Figma Bot Container: price left, Buy button right */
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-product-sm-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 13px 18px;
  background: #ffffff;
  border: 1px solid #edeff3;
  border-radius: 76px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: #242424;
  text-decoration: none;
  box-shadow: 0px 4px 10px 0px rgba(20, 20, 43, 0.04);
  transition: background .15s;
}

.card-product-sm-buy:hover {
  background: #edeff3;
}

/* --- Sitewide: remove stray borders not in Figma source --- */

.reviews-section,
.articles-section,
.guides-block,
.faq-section,
.latest-products,
.latest-products-b {
  border: none;
  outline: none;
  box-shadow: none;
}
/* ============================================================
   v23 — Product card data layer
   ============================================================ */



.card-product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 4px;
}

.lp-stars {
  display: inline-flex;
  gap: 5px; /* Figma star gap 5 */
}

.lp-star {
  display: inline-block;
  width: 13px;
  height: 13px;
  position: relative;
}

.lp-star::before {
  content: '\2605';
  position: absolute;
  inset: 0;
  font-size: 13px;
  line-height: 1;
  color: #d9dde7; /* Figma Neutral 400 empty star */
}

.lp-star--full::before { color: #fdb52a; } /* Figma System/Yellow */

.lp-star--half::before {
  color: #fdb52a;
  clip-path: inset(0 50% 0 0);
}

.lp-star--half::after {
  content: '\2605';
  position: absolute;
  inset: 0;
  font-size: 13px;
  line-height: 1;
  color: #d9dde7;
  clip-path: inset(0 0 0 50%);
}

.card-product-specs {
  margin: 16px calc(-1 * var(--cpb-pad, 24px)) 0;
  padding: 24px var(--cpb-pad, 24px) 0;
  border-block-start: 1px solid #edeff3;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma: 20 between pairs */
}

.card-product-spec {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px; /* Figma: 9 label→value */
  font-size: 16px;
  line-height: 18px;
}

.card-product-spec dt {
  color: #404040;
  font-weight: 500;
}

.card-product-spec dd {
  color: #242424;
  font-weight: 500;
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Carousel track focus ring — keyboard reachable via tabindex="0" */
.latest-products__track:focus-visible { outline: 2px solid var(--color-accent-green); outline-offset: 2px; }

/* ── Affiliate Rows Section ──────────────────────────────────────────── */
.affiliate-rows-section {
  padding-block: 0;
}
.affiliate-rows-container {
  max-width: 740px;
  margin-inline: auto;
}
.affiliate-rows-heading {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 48px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin-block-end: 48px; /* Figma heading→grid pt-48 */
}
.affiliate-rows-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.affiliate-row-card {
  display: flex;
  align-items: center;
  gap: 32px; /* Figma image→content gap 32 */
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #edeff3;
  border-radius: 20px;
  box-shadow: var(--shadow-card); /* Figma Shadow 02 (cards 2-3 carry it; card-1 omission = authoring noise) */
}
.affiliate-row-thumb-wrap {
  flex-shrink: 0;
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 16px; /* Figma r16 image well */
  background: #edeff3;
  overflow: hidden;
}
.affiliate-row-thumb {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 16px; /* Figma r16 image well */
  background: #edeff3;
  display: block;
}
.affiliate-row-info {
  flex: 1;
  min-width: 0;
}
.affiliate-row-title {
  font-size: 20px;
  line-height: 22px;
  font-weight: 700;
  color: #242424;
  margin-block-end: 6px; /* Figma title→price gap 6 */
}
.affiliate-row-title a {
  color: inherit;
  text-decoration: none;
}
.affiliate-row-title a:hover { text-decoration: underline; }
.affiliate-row-price {
  font-size: 16px;
  line-height: 18px;
  font-weight: 500; /* Figma Medium */
  color: #0055A7;
  margin: 0;
}
.affiliate-row-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 32px;
}
.affiliate-row-amazon-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.affiliate-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px; /* Figma primary pill px24 py12 */
  background: #0055A7;
  color: #ffffff;
  border-radius: 76px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 12px; /* Figma 12/18 Bold */
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
  transition: opacity .15s;
}
.affiliate-row-btn:hover { opacity: .88; }
@media (min-width: 768px) and (max-width: 1023px) {
  .affiliate-rows-heading { font-size: 26px; line-height: 34px; margin-block-end: 32px; } /* standard H2 tablet (32/40 in file = authored anomaly) */
  .affiliate-row-card { box-shadow: none; } /* Figma tablet: border only */
}
@media (max-width: 767px) {
  .affiliate-rows-heading { font-size: 24px; line-height: 32px; margin-block-end: 24px; } /* standard H2 mobile */
  /* Figma mobile 2-row variant: image+title row, then logo+button right-aligned */
  .affiliate-row-card { flex-wrap: wrap; gap: 16px; box-shadow: none; }
  .affiliate-row-thumb-wrap { width: 95px; height: 95px; border-radius: 13.6px; }
  .affiliate-row-thumb { width: 95px; height: 95px; border-radius: 13.6px; }
  .affiliate-row-actions { width: 100%; justify-content: flex-end; gap: 16px; }
}

/* Related-articles fallback dedupe: when the same-category section rendered,
   hide the always-rendered latest-posts fallback that follows it (post.hbs). */
.at-related-section ~ .at-related-section { display: none; }

/* Post body tables: no zebra striping (Figma comparison tables are all-white body
   cells); overrides the generic .gh-content zebra rule for the post template only. */
.at-body tr:nth-child(even) td { background: var(--color-white); }

/* Products carousel: dots are the scroll indicator; hide the native scrollbar */
.at-products-grid { scrollbar-width: none; }
.at-products-grid::-webkit-scrollbar { display: none; }

/* === ERROR PAGES (error-404.hbs / error.hbs) ===
   Hero follows the listing-hero type scale; pills mirror the established pair
   (blue primary = .cats-browse-btn, green-border secondary = .section-view-all).
   Hero carries pt only (next band's pt supplies the gap, home-page rhythm);
   error.hbs has no following band so it adds .er-hero--pad for its own pb. */
.er-hero {
  padding-block: var(--section-pad-mobile) 0;
  text-align: center;
}
.er-hero--pad { padding-block-end: var(--section-pad-mobile); }
@media (min-width: 768px) {
  .er-hero { padding-block-start: var(--section-pad-tablet); }
  .er-hero--pad { padding-block-end: var(--section-pad-tablet); }
}
@media (min-width: 1024px) {
  .er-hero { padding-block-start: var(--section-pad); }
  .er-hero--pad { padding-block-end: var(--section-pad); }
}

.er-code {
  font-size: 64px;
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--color-primary-blue);
}
@media (min-width: 768px)  { .er-code { font-size: 88px; } }
@media (min-width: 1024px) { .er-code { font-size: 112px; } }

.er-title {
  margin-block-start: 8px;
  font-size: 28px;
  line-height: 36px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}
@media (min-width: 768px)  { .er-title { font-size: 32px; line-height: 40px; } }
@media (min-width: 1024px) { .er-title { font-size: var(--text-h1); line-height: var(--lh-h1); } }

.er-subtitle {
  margin-block-start: 16px;
  font-size: var(--text-base);
  line-height: 24px;
  color: var(--color-body);
  max-width: 616px;
  margin-inline: auto;
}
@media (min-width: 768px) { .er-subtitle { line-height: var(--lh-lg); } }

.er-actions {
  margin-block-start: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.er-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding-inline: 24px;
  min-width: 180px;
  border-radius: 76px;
  font-size: var(--text-base);
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s ease, background .15s ease;
}
.er-btn--primary {
  background: var(--color-primary-blue);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-card);
}
.er-btn--primary:hover { opacity: .88; }
.er-btn--secondary {
  background: var(--color-white);
  border: 1px solid var(--color-accent-green);
  color: var(--color-heading);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-btn-sec);
}
.er-btn--secondary:hover { background: #f9fff5; }

/* ─── Resources page (custom-resources.hbs) — Figma 15838:21388 ──────────────
   Centered hero (reuses .ai-hero) + two stacked grids of horizontal
   "Shgp Card H" cards (cover + title + desc + green-outline pill button).
   Spacing note: .ai-hero-top already adds margin-block-end:48px, so the first
   grid section carries NO top padding — using .section here would double the
   gap. Page rhythm: 80 header→hero / 48 hero→downloads / 80 downloads→Buy Now
   / 80 Buy Now→footer (responsive via --section-pad* tokens). */

.rs-section--buy { margin-block-start: var(--section-pad-mobile); }
.rs-page { padding-block-end: var(--section-pad-mobile); }
@media (min-width: 768px) {
  .rs-section--buy { margin-block-start: var(--section-pad-tablet); }
  .rs-page { padding-block-end: var(--section-pad-tablet); }
}
@media (min-width: 1024px) {
  .rs-section--buy { margin-block-start: var(--section-pad); }
  .rs-page { padding-block-end: var(--section-pad); }
}

/* Hide a whole group (heading + grid + button) when it has no cards, so no
   stranded "Buy Now" heading. Mirrors .sl-latest:not(:has(.card-post)). */
.rs-section:not(:has(.rs-card)) { display: none; }

/* Grid — 1 column until desktop, 2 columns at ≥1024 (Figma desktop layout). */
.rs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .rs-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 48px;
  }
}

/* Card — cover image left (rounded), content right, vertically centered. */
.rs-card {
  display: flex;
  align-items: stretch;
}
.rs-card__media {
  flex: 0 0 120px;
  align-self: flex-start; /* pin to its own portrait height — don't stretch with the body column */
  aspect-ratio: 159 / 238; /* fixed 2:3 cover (Figma); consistent shape regardless of body length */
  background: var(--color-card-border); /* neutral placeholder when a post has no feature_image */
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
}
@media (min-width: 768px) { .rs-card__media { flex-basis: 159px; } }
.rs-card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}
.rs-card__body {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline-start: 16px;
}
@media (min-width: 768px) { .rs-card__body { padding-inline-start: 32px; } }

.rs-card__title {
  font-size: var(--text-h6);
  line-height: var(--lh-h6);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rs-card__title a { color: inherit; text-decoration: none; }
.rs-card__title a:hover { color: var(--color-accent); }

.rs-card__desc {
  margin-block-start: 12px;
  font-size: var(--text-base);
  line-height: 28px; /* body-default per Figma 16/28 */
  color: var(--color-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button — reuses .btn .btn--secondary; override to the green outline (Figma)
   and a slightly taller pill. Later in source than .btn--secondary, so the
   green border wins on equal specificity. */
.rs-card__btn {
  align-self: flex-start;
  margin-block-start: 24px;
  padding-block: 18px;
  border-color: var(--color-accent-green);
}
.rs-card__btn:hover { border-color: var(--color-dark-green); }

.rs-load-more-row {
  display: flex;
  justify-content: center;
  margin-block-start: 32px;
}
@media (min-width: 1024px) { .rs-load-more-row { margin-block-start: 48px; } }