/* ============================================================
   listicle-style.css  —  best-shopify-seo-agency.com
   ------------------------------------------------------------
   Palette, this domain:
     primary dark  #12242b
     accent        #0f766e   (approx 4.8:1 on white, clears AA)
     accent hover  #0b5c55
     body text     #1a1a1a
     table rule    #dfe9e7
     row hover     #f2f8f7

   Accent clears 4.5:1, so prose links do not need forced underlines.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,900;1,900&display=swap');

/* ============================================
   LISTICLE EMD TEMPLATE - STANDALONE CSS
   best-ecommerce-seo-agency.com
   ============================================ */

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #1a1a1a; line-height: 1.7; background: #fff; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- LAYOUT CONTAINER --- */
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* align-items must NOT be 'start': that shrinks the sidebar column to its
   own height, leaving position:sticky nothing to travel inside. Stretch
   makes the column as tall as the article, so the CTA can pin and follow. */
.content-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: stretch; }

/* --- HERO SECTION --- */
.hero { padding: 32px 0 24px; }
.breadcrumbs { font-size: 13px; color: #888; margin-bottom: 16px; }
.breadcrumbs a { color: #666; }
.breadcrumbs span.sep { margin: 0 6px; }
.category-badge { display: inline-block; background: #0f766e; color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.hero h1 { font-size: 32px; font-weight: 800; line-height: 1.25; color: #1a1a1a; margin-bottom: 20px; }
.hero-cta { display: inline-block; background: #12242b; color: #fff; padding: 14px 28px; border-radius: 8px; font-weight: 700; font-size: 15px; transition: background 0.2s; }
.hero-cta:hover { background: #000; color: #fff; text-decoration: none; }
.hero-description { font-size: 15px; color: #1a1a1a; margin-top: 16px; margin-bottom: 28px; line-height: 1.6; }

/* --- FEATURED IMAGE --- */
.featured-image { margin: 24px 0; border-radius: 12px; overflow: hidden; }
.featured-image img { width: 100%; }

/* --- AUTHOR BLOCK --- */
.author-block { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid #eee; }
.author-card { text-align: center; padding: 16px; border: 1px solid #0f766e; border-radius: 10px; background: #fafafa; color: #1a1a1a; }
.author-card img { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 8px; object-fit: cover; }
.author-card .role { font-size: 11px; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.5px; }
.author-card .name { font-weight: 700; font-size: 14px; margin: 4px 0 2px; color: #1a1a1a; }
.author-card .title { font-size: 12px; color: #1a1a1a; }
.author-card .linkedin { margin-top: 8px; line-height: 0; }
.author-card .linkedin a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  color: #0f766e; transition: background 0.15s, color 0.15s;
}
.author-card .linkedin a:hover { background: #0f766e; color: #fff; text-decoration: none; }
.author-card .linkedin a:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.author-card .linkedin svg { width: 18px; height: 18px; display: block; }
.meta-row { display: flex; gap: 16px; padding: 12px 0 24px; font-size: 13px; color: #888; }
.meta-row span { display: flex; align-items: center; gap: 4px; }

/* --- PROMO BLOCK --- */
.promo-block {
  background-color: #12242b;
  /* Directional overlay: heavy where the text sits, easing off to the
     right so the artwork keeps its colour. Tune the three alpha values
     below (0.88 / 0.78 / 0.42) if it needs to be darker or lighter. */
  background-image: linear-gradient(100deg,
                      rgba(18,36,43,0.88) 0%,
                      rgba(18,36,43,0.78) 55%,
                      rgba(18,36,43,0.42) 100%),
                    url("https://best-ecommerce-seo-agency.com/wp-content/uploads/2026/07/cta-block-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; border-radius: 14px; padding: 32px; margin: 24px 0;
}
/* Shadow works with the gradient above: the gradient handles the left,
   the shadow catches any light patches showing through on the right. */
.promo-block h3,
.promo-block .subtitle,
.promo-block .body,
.promo-block .trust-badges .badge { text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.promo-block h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.promo-block .subtitle { font-size: 14px; font-style: italic; color: #f0f0f0; margin-bottom: 12px; }
.promo-block .body { font-size: 16px; color: #fff; margin-bottom: 20px; line-height: 1.6; }
.promo-block .btn { display: inline-block; background: #0f766e; color: #fff; padding: 10px 22px; border-radius: 6px; font-weight: 600; font-size: 14px; }
.promo-block .btn:hover { background: #0b5c55; text-decoration: none; }
.trust-badges { display: flex; gap: 16px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.trust-badges .badge { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #ccc; }
.trust-badges img { height: 28px; opacity: 0.7; }

/* --- TABLE OF CONTENTS (collapsible) --- */
.toc-container { background: #fafafa; border: 1px solid #0f766e; border-radius: 10px; margin: 24px 0; padding: 0; }
.toc-container > summary {
  list-style: none; cursor: pointer; padding: 18px 24px;
  font-size: 16px; font-weight: 700; color: #1a1a1a;
  display: flex; align-items: center; gap: 12px;
  -webkit-user-select: none; user-select: none;
}
.toc-container > summary::-webkit-details-marker { display: none; }
.toc-container > summary::marker { content: ""; }
.toc-container > summary:hover { color: #000; }
.toc-container > summary:focus-visible { outline: 2px solid #0f766e; outline-offset: -2px; border-radius: 10px; }
.toc-container .toc-count { font-size: 13px; font-weight: 400; color: #888; }
.toc-container > summary::after {
  content: "+"; margin-left: auto; font-size: 22px; font-weight: 400;
  line-height: 1; color: #666;
}
.toc-container[open] > summary::after { content: "\2212"; }
.toc-container[open] > summary { border-bottom: 1px solid #0f766e; }
.toc-container > nav { padding: 16px 24px 20px; }
.toc-container ol { padding-left: 20px; margin: 0; }
.toc-container li { font-size: 14px; margin-bottom: 6px; }
.toc-container a { color: #0f766e; }
.toc-container a:hover { color: #0b5c55; }

/* --- HEADING TYPEFACE ---
   Avenir Next / Avenir are used when the visitor already has them
   (macOS and iOS ship them). Nunito Sans 900 is the licensed-free
   fallback for everyone else: same humanist-geometric character,
   true italics rather than a synthesised slant.
   Drop font-style: italic below if the oblique is too much at volume. */
.hero h1,
.main-content h2,
.main-content h3,
.main-content h4,
.promo-block h3,
.sidebar-cta h4,
.cta-person-content h3,
.cta-leadmagnet-content h3,
.cta-branded-content h3,
.toc-container > summary,
.author-box .name,
.author-card .name,
.promo-block .btn,
.cta-person .btn,
.cta-leadmagnet .btn,
.cta-branded .btn {
  font-family: "Avenir Next", "Avenir", "Nunito Sans", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.01em;
}

/* --- MAIN CONTENT --- */
.main-content { min-width: 0; }
.main-content h2 { font-size: 26px; margin: 40px 0 16px; padding-top: 16px; border-top: 1px solid #eee; color: #1a1a1a; }
.main-content h2:first-child { border-top: none; margin-top: 0; }
.main-content h3 { font-size: 20px; margin: 28px 0 12px; color: #1a1a1a; }
.main-content p { margin-bottom: 16px; line-height: 1.7; }
.main-content ul, .main-content ol { margin: 0 0 16px 24px; }
.main-content li { margin-bottom: 8px; line-height: 1.6; }
.main-content strong { font-weight: 700; }
.main-content code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 14px; }

/* --- TEXT COLOUR ENFORCEMENT ---
   Themes commonly set a light grey on paragraphs and list items.
   These rules keep the article body at full contrast. */
.main-content p,
.main-content li,
.main-content td,
.main-content th { color: #1a1a1a; }
.main-content strong { color: #1a1a1a; }

/* --- WIDTH ALIGNMENT ---
   Themes commonly cap paragraph or content width for readability, which
   left the article copy narrower than the author cards above it. These
   rules make every block in .main-content span the full .page-wrap width
   so the whole page shares one left and right edge. */
.main-content { max-width: none !important; width: 100% !important; }
.main-content > *,
.main-content p,
.main-content ul,
.main-content ol,
.main-content h2,
.main-content h3,
.main-content .toc-container,
.main-content .compare-table,
.main-content .agency-overview { max-width: none !important; width: auto !important; }

/* --- INTRO AGENCY SHORTLIST ---
   The numbered top-15 in the intro. Padding-left leaves room for the
   markers inside the panel rather than hanging outside it. */
.main-content ol.agency-shortlist {
  background: #f6f6f7;
  border: 1px solid #0f766e;
  border-radius: 10px;
  margin: 24px 0;
  padding: 24px 28px 24px 54px;
  /* !important needed: the width-alignment block above forces
     max-width:none on .main-content ol. Higher specificity plus
     !important lets this one list opt back out. */
  max-width: 50% !important;
}
@media (max-width: 900px) {
  /* full width on narrow screens, where 50% would be unreadable */
  .main-content ol.agency-shortlist { max-width: none !important; }
}
.main-content ol.agency-shortlist li { margin-bottom: 10px; }
.main-content ol.agency-shortlist li:last-child { margin-bottom: 0; }

/* --- IN-CONTENT LINKS ---
   The global `a` colour is browser-blue, which fought the palette in the
   article body and the intro shortlist. Content links are gold instead.
   Prose links also carry an underline: gold on white is around 2.4:1
   contrast, so colour alone is not enough to identify them. */
.main-content a { color: #0f766e; }
.main-content a:hover { color: #0b5c55; }
.main-content p a,
.main-content td a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.main-content p a:hover,
.main-content td a:hover { text-decoration-thickness: 2px; }

/* --- HIGHLIGHT PARAGRAPH --- */
.highlight-paragraph { background: #f1f7f6; padding: 20px 24px; border-radius: 8px; border-left: 4px solid #0f766e; margin-bottom: 16px; }

/* --- AGENCY SECTIONS --- */
.agency-image { margin: 16px 0; border-radius: 8px; overflow: hidden; border: 1px solid #eee; }
.agency-image img { width: 100%; }
.agency-overview { margin: 16px 0 24px; }
.agency-overview table { width: 100%; border-collapse: collapse; border: 2px solid #0f766e; border-radius: 8px; overflow: hidden; }
.agency-overview td { padding: 10px 16px; border-bottom: 1px solid #dfe9e7; font-size: 14px; }
.agency-overview td:first-child {
  font-weight: 700; width: 160px;
  background: #12242b; color: #fff !important;
  /* light separators would read as stripes against the dark column */
  border-bottom-color: rgba(255,255,255,0.14);
}
.agency-overview tr:last-child td { border-bottom: none; }

/* --- COMPARE TABLE --- */
.compare-table { margin: 16px 0 24px; overflow-x: auto; }
.compare-table table { width: 100%; border-collapse: collapse; border: 2px solid #0f766e; font-size: 13px; }
.compare-table thead th { background: #12242b; color: #fff !important; padding: 12px 14px; text-align: left; font-weight: 700; border-bottom: 2px solid #0f766e; font-size: 13px; }
.compare-table tbody td { padding: 10px 14px; border-bottom: 1px solid #dfe9e7; }
.compare-table tbody tr:hover { background: #f2f8f7; }

/* --- TABLE DISPLAY GUARD ---
   Many themes set `table { display: block; overflow-x: auto }` to make
   tables scroll on mobile. That kills the table layout algorithm: the
   block stretches to the container while the rows size to content, so
   the border spans full width and the cells stop short. These rules
   restore real table display; horizontal scrolling is handled by the
   wrapper divs instead, which is where it belongs. */
.agency-overview table,
.compare-table table {
  display: table !important;
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}
.agency-overview thead,
.compare-table thead { display: table-header-group !important; }
.agency-overview tbody,
.compare-table tbody { display: table-row-group !important; }
.agency-overview tr,
.compare-table tr { display: table-row !important; }
.agency-overview th, .agency-overview td,
.compare-table th, .compare-table td {
  display: table-cell !important;
  vertical-align: top;
}
/* wrappers own the scrolling */
.agency-overview { overflow-x: auto; }
.compare-table { overflow-x: auto; }

/* --- GUTENBERG BLOCK STYLING (article template) ---
   Articles are written in the editor, so their tables, images and lists
   come out as .wp-block-* rather than the custom wrappers hardcoded into
   page-home.php. These rules give editor output the same design without
   needing any manual class on each block. */

/* tables */
.main-content .wp-block-table { margin: 20px 0 28px; overflow-x: auto; }
.main-content .wp-block-table table {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  border: 2px solid #0f766e;
  font-size: 13px;
}
/* Gutenberg adds has-fixed-layout, which forces equal columns and squashes
   wide tables. Auto layout sizes columns to their content instead. */
.main-content .wp-block-table table.has-fixed-layout { table-layout: auto !important; }
.main-content .wp-block-table thead { display: table-header-group !important; }
.main-content .wp-block-table tbody { display: table-row-group !important; }
.main-content .wp-block-table tr { display: table-row !important; }
.main-content .wp-block-table th,
.main-content .wp-block-table td { display: table-cell !important; vertical-align: top; }
.main-content .wp-block-table thead th {
  background: #12242b; color: #fff !important;
  padding: 12px 14px; text-align: left; font-weight: 700;
  border-bottom: 2px solid #0f766e; font-size: 13px;
}
/* row-header cells act as the label column, matching the overview tables */
.main-content .wp-block-table tbody th {
  background: #12242b; color: #fff !important;
  padding: 10px 14px; text-align: left; font-weight: 700;
  border-bottom-color: rgba(255,255,255,0.14);
}
.main-content .wp-block-table tbody td {
  padding: 10px 14px; border-bottom: 1px solid #dfe9e7; color: #1a1a1a;
}
.main-content .wp-block-table tbody tr:hover td { background: #f2f8f7; }
.main-content .wp-block-table figcaption {
  font-size: 12px; color: #666; margin-top: 8px; text-align: left;
}

/* images */
.main-content .wp-block-image { margin: 24px 0; }
.main-content .wp-block-image img { width: 100%; height: auto; display: block; border-radius: 10px; }
.main-content .wp-block-image figcaption { font-size: 12px; color: #666; margin-top: 8px; }

/* lists written in the editor */
.main-content .wp-block-list { margin: 0 0 16px 24px; }
.main-content .wp-block-list li { margin-bottom: 8px; line-height: 1.6; }

/* --- TABLE TEXT WRAPPING ---
   Themes commonly set word-break:break-all or hyphens:auto on cells to
   stop overflow. Inside a scrolling table that is the wrong trade: words
   split mid-syllable ("Catalog / ue") instead of wrapping at spaces.
   Overflow is already handled by the wrapper scrolling, so cells wrap
   normally at word boundaries. */
.compare-table th, .compare-table td,
.agency-overview th, .agency-overview td,
.main-content .wp-block-table th,
.main-content .wp-block-table td {
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* --- RESPONSIVE TABLES ---
   width:100% makes a table fit its container, so columns squeeze and the
   wrapper never overflows, which means overflow-x:auto never fires. A
   min-width forces real overflow on narrow screens so the wrapper scrolls
   and the columns stay readable.
   The gradients are the standard CSS scroll-shadow: a shadow appears on
   whichever edge still has content off-screen, so it is visible that the
   table scrolls. background-attachment local vs scroll is what makes the
   shadows track the scroll position. */
.compare-table,
.agency-overview,
.main-content .wp-block-table {
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.14), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.14), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

@media (max-width: 900px) {
  /* five-column comparison table needs the most room */
  .compare-table table { min-width: 780px; }
  .main-content .wp-block-table table { min-width: 760px; }
  /* two-column metadata tables fit, they just need a narrower label column */
  .agency-overview td:first-child { width: 120px; }
  .compare-table table,
  .agency-overview table { font-size: 12px; }
  .compare-table th, .compare-table td,
  .agency-overview td { padding: 8px 10px; }
}

/* short header labels look better on one line than wrapped */
.compare-table thead th:first-child,
.compare-table tbody td:first-child { white-space: nowrap; }

@media (max-width: 600px) {
  .agency-overview td:first-child { width: 104px; }
  .agency-overview table { min-width: 420px; }
}

/* --- CTA BLOCKS --- */
/* matches the methodology block exactly: same artwork, same directional
   overlay, same type sizes, same shadow treatment */
.cta-person {
  background-color: #12242b;
  background-image: linear-gradient(100deg,
                      rgba(18,36,43,0.88) 0%,
                      rgba(18,36,43,0.78) 55%,
                      rgba(18,36,43,0.42) 100%),
                    url("https://best-ecommerce-seo-agency.com/wp-content/uploads/2026/07/cta-block-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; border-radius: 14px; padding: 32px; margin: 34px 0;
}
.cta-person-inner { display: flex; align-items: center; gap: 24px; }
/* Cutout anchored to the bottom-right corner so the figures stand on the
   border instead of floating. overflow:hidden on the parent clips anything
   that runs past the rounded edge. */
.cta-person { position: relative; overflow: hidden; min-height: 260px; }
.cta-person-photo {
  position: absolute;
  right: 0;
  /* negative bottom pulls the cutout past the edge so overflow:hidden
     swallows any transparent padding baked into the PNG. Increase the
     value if the figures still look like they are hovering. */
  bottom: -18px;
  /* Height is derived so the top edge lands exactly 8px below the box top:
     image top = box height + 18 (the negative bottom) - image height.
     Setting height to 100% + 10px puts that top edge at 8px.
     Raise the 10px to make the figures larger and reduce the top gap. */
  height: calc(100% + 10px);
  width: auto;
  max-width: none;
  pointer-events: none; -webkit-user-select: none; user-select: none;
  margin: 0;
}
.cta-person-content { position: relative; z-index: 1; max-width: 56%; }
/* Single-figure variant: a lone portrait is narrower than the two-up shot,
   so it is scaled slightly larger and the copy gets a little more room. */
/* top edge = box height + 22 (negative bottom) - image height.
   100% + 12px puts that top edge exactly 10px below the box top. */
.cta-person--solo .cta-person-photo { height: calc(100% + 12px); bottom: -22px; }
.cta-person--solo .cta-person-content { max-width: 62%; }
.cta-person-content h3 { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 8px; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.cta-person-content p { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.6; margin-bottom: 20px; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.cta-person .btn { background: #0f766e; color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 14px; }

/* same treatment as the methodology block and the person CTAs */
.cta-leadmagnet {
  background-color: #12242b;
  background-image: linear-gradient(100deg,
                      rgba(18,36,43,0.88) 0%,
                      rgba(18,36,43,0.78) 55%,
                      rgba(18,36,43,0.42) 100%),
                    url("https://best-ecommerce-seo-agency.com/wp-content/uploads/2026/07/cta-block-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; border-radius: 14px; padding: 24px; margin: 28px 0;
}
.cta-leadmagnet-inner { display: flex; align-items: center; justify-content: center; gap: 24px; }
.cta-leadmagnet-content { width: 100%; text-align: center; }
.cta-leadmagnet-cover {
  width: 130px; height: auto; display: block;
  margin: 0 auto 14px; border-radius: 8px;
}
.cta-leadmagnet-content h3 { color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 10px; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.cta-leadmagnet-content p { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.55; max-width: 560px; margin: 0 auto 18px; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.cta-leadmagnet .btn { background: #0f766e; color: #fff; padding: 9px 20px; border-radius: 6px; font-size: 13px; }

/* same treatment as the methodology block and the other CTAs */
.cta-branded {
  background-color: #12242b;
  background-image: linear-gradient(100deg,
                      rgba(18,36,43,0.88) 0%,
                      rgba(18,36,43,0.78) 55%,
                      rgba(18,36,43,0.42) 100%),
                    url("https://best-ecommerce-seo-agency.com/wp-content/uploads/2026/07/cta-block-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; border-radius: 14px; padding: 32px; margin: 34px 0;
}
.cta-branded-inner { position: relative; z-index: 1; }
.cta-branded-logo {
  font-size: 12px; color: #fff; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 700; margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.cta-branded-content h3 { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 8px; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.cta-branded-content p { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.6; margin-bottom: 20px; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.cta-branded .btn { background: #0f766e; color: #fff; padding: 10px 22px; border-radius: 6px; font-size: 14px; }

.btn { display: inline-block; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; transition: all 0.2s; }
.btn:hover { text-decoration: none; }
.btn-primary { background: #0f766e; color: #fff; }
.btn-primary:hover { background: #0b5c55; }
.btn-accent { background: #0f766e; color: #fff; }
.btn-accent:hover { background: #0b5c55; }

/* --- FAQ HERO IMAGE --- */
.faq-hero-image { margin: 32px 0 16px; border-radius: 12px; overflow: hidden; }
.faq-hero-image img { width: 100%; }

/* --- SIDEBAR --- */
/* --- STICKY ANCESTOR GUARD ---
   position:sticky silently fails if ANY ancestor has overflow hidden,
   auto or scroll: that ancestor becomes the sticky scroll container, and
   because it never scrolls the element looks frozen. Themes very often
   set overflow:hidden on their page wrapper or on body. These rules clear
   it along the whole chain from body down to the sidebar.
   `clip` is used on body rather than hidden: it still prevents sideways
   scroll but does not create a scroll container. */
body { overflow-x: clip; overflow-y: visible; }
#page, .site, .site-content, #content, #primary, #main,
.wrapper, .container, .entry-content, .site-main,
.page-wrap, .content-layout, .sidebar {
  overflow: visible !important;
}
.sidebar { position: relative; align-self: stretch; }
.sidebar-cta { background: #fff; border: 1px solid #e5e5e5; border-radius: 14px; padding: 24px; margin-bottom: 20px; }
.sidebar-cta img { width: 100%; height: auto; display: block; border-radius: 8px; margin-bottom: 16px; }
.sidebar-cta h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sidebar-cta p { font-size: 13px; color: #666; margin-bottom: 12px; }
.sidebar-cta .btn-sidebar { display: block; text-align: center; background: #0f766e; color: #fff; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.sidebar-cta .btn-sidebar:hover { background: #0b5c55; text-decoration: none; }

/* the whole stack travels together and pins near the top of the viewport */
/* --- MOBILE INLINE CTAs ---
   Duplicates of the two sidebar cards, shown only where the sidebar is
   hidden. Placed inside the article so the call CTA reaches readers on
   phones, who never see the sidebar at all. */
.mobile-cta { display: none; }
@media (max-width: 900px) {
  .mobile-cta { display: block; margin: 32px 0; }
  .mobile-cta .sidebar-cta { margin-bottom: 0; }
}

/* --- SIDEBAR OPT-IN FORM --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sidebar-optin input[type="email"] {
  width: 100%; padding: 11px 12px; font-size: 14px;
  border: 1px solid #d9d9dd; border-radius: 8px; margin-bottom: 10px;
  font-family: inherit; color: #1a1a1a; background: #fff;
}
.sidebar-optin input[type="email"]:focus {
  outline: none; border-color: #0f766e; box-shadow: 0 0 0 3px rgba(201,153,102,0.18);
}
.sidebar-optin .btn-sidebar { width: 100%; border: none; cursor: pointer; font-family: inherit; }
.optin-consent {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; font-size: 11px; line-height: 1.4; color: #777; cursor: pointer;
}
.optin-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

.sidebar-sticky { position: sticky; top: 48px; }
/* same artwork and overlay treatment as the methodology block.
   The card is narrow, so the gradient reads closer to uniform here.
   Tune the two alpha values (0.86 / 0.62) to taste. */
.sidebar-cta--accent {
  border: 2px solid #0f766e !important;
  background-color: #12242b;
  background-image: linear-gradient(150deg,
                      rgba(18,36,43,0.94) 0%,
                      rgba(18,36,43,0.82) 100%),
                    url("https://best-ecommerce-seo-agency.com/wp-content/uploads/2026/07/cta-block-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
.sidebar-cta--accent img { margin-bottom: 12px; border-radius: 8px; }
.sidebar-cta--accent h4 { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.sidebar-cta--accent p { color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.sidebar-cta--accent .trust-line { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.sidebar-cta--accent .btn-sidebar { background: #0f766e; }
.sidebar-cta--accent .btn-sidebar:hover { background: #0b5c55; }
.sidebar-cta .trust-line { font-size: 11px; color: #999; text-align: center; margin-top: 8px; }
/* only the accent CTA is sticky now, so no height cap is needed */

/* --- AUTHOR BOX --- */
.author-box { background: #fafafa; border: 1px solid #0f766e; border-radius: 14px; padding: 32px; margin: 48px 0 32px; display: flex; gap: 24px; align-items: flex-start; }
.author-box img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; margin-bottom: 14px; }
.author-box .role { font-size: 12px; color: #1a1a1a; text-transform: uppercase; }
.author-box .name { font-size: 20px; font-weight: 700; margin: 4px 0; color: #1a1a1a; }
.author-box .jobtitle { font-size: 14px; color: #1a1a1a; margin-bottom: 8px; }
.author-box .bio { font-size: 14px; color: #1a1a1a; line-height: 1.6; margin-bottom: 12px; }
.author-box .links { display: flex; gap: 10px; }
.author-box .links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid #0f766e; color: #0f766e;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.author-box .links a:hover { background: #0f766e; border-color: #0f766e; color: #fff; text-decoration: none; }
.author-box .links a:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.author-box .links svg { width: 17px; height: 17px; display: block; }

/* --- BACK TO CONTENTS ---
   Fixed pill that appears once the reader is past the intro. Returns to
   the table of contents rather than the very top, so they land on the
   section list instead of the hero.
   Deliberately cheap: display toggle only, no transitions, no shadow
   blur, no will-change. Visibility is driven by IntersectionObserver,
   so there is no scroll listener anywhere on the page. */
.back-to-toc {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: none;                 /* not rendered at all until needed */
  align-items: center; gap: 8px;
  padding: 11px 17px; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  background: #12242b; color: #fff; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.back-to-toc.is-visible { display: inline-flex; }
.back-to-toc:hover { background: #000; }
.back-to-toc:focus-visible { outline: 2px solid #0f766e; outline-offset: 3px; }
.back-to-toc svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 600px) {
  .back-to-toc {
    right: 16px;
    /* safe-area inset keeps it clear of the iOS home indicator and the
       Safari bottom toolbar on notched devices */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 12px 18px;
    font-size: 13px;
    /* 44px is the minimum comfortable touch target */
    min-height: 44px;
  }
  .back-to-toc svg { width: 15px; height: 15px; }
}

/* inline links kept alongside: they work with JavaScript disabled */
.back-link { margin: 8px 0 28px; font-size: 13px; }
.back-link a { color: #0f766e; font-weight: 700; }
.back-link a:hover { color: #0b5c55; }
@media print { .back-link, .back-to-toc { display: none; } }

/* --- FOOTER ---
   Class renamed from .site-footer: nearly every WordPress theme ships
   its own .site-footer rules, which were overriding ours and producing
   a grey gradient. .listicle-footer cannot collide. */
.listicle-footer {
  background: #000 !important;
  color: #cfcfd6;
  margin-top: 56px;
  padding: 48px 0 0;
  font-size: 14px;
}
.listicle-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 36px;
}
.listicle-footer .lf-name {
  font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 10px;
}
.listicle-footer .lf-brand p {
  color: #b9b9c4; line-height: 1.6; margin: 0; max-width: 42ch; font-size: 13px;
}
.listicle-footer .lf-heading {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  color: #fff; font-weight: 700; margin-bottom: 12px;
}
.listicle-footer ul { list-style: none; margin: 0; padding: 0; }
.listicle-footer li { margin-bottom: 8px; line-height: 1.4; }
.listicle-footer a { color: #0f766e; text-decoration: none; font-size: 13px; }
.listicle-footer a:hover { color: #5eada6; text-decoration: underline; }
.listicle-footer-bar {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 18px 0 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.listicle-footer-bar p { margin: 0; font-size: 12px; color: #8f8f9c; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .content-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .author-block { grid-template-columns: 1fr; gap: 12px; }
  .hero h1 { font-size: 24px; }
  .main-content h2 { font-size: 22px; }
  .cta-person-inner, .cta-leadmagnet-inner { flex-direction: column; }
  .cta-person-photo { display: none; }
  .cta-person-content { max-width: 100%; }
  .cta-person { min-height: 0; }
  .main-content .wp-block-table table { font-size: 12px; }
  .main-content .wp-block-table th,
  .main-content .wp-block-table td { padding: 8px 10px; }
  .author-box { flex-direction: column; text-align: center; }
  .author-box .links { justify-content: center; }
  .meta-row { flex-wrap: wrap; }
  .trust-badges { justify-content: center; }
  .listicle-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .listicle-footer-bar { flex-direction: column; text-align: center; }
  .listicle-footer .lf-brand p { max-width: none; }
}

@media (max-width: 600px) {
  .page-wrap { padding: 0 16px; }
  .listicle-footer-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 22px; }
  .promo-block { padding: 24px; }
  .cta-person, .cta-leadmagnet, .cta-branded { padding: 24px; }
}

/* --- PRINT --- */
@media print {
  .sidebar, .cta-person, .cta-leadmagnet, .cta-branded, .promo-block, .trust-badges { display: none; }
  .content-layout { grid-template-columns: 1fr; }
}

/* --- DIVIDER GUARD ---
   Kills any rule (ours or the active theme's) that would draw a line
   between the hero block and the author cards below it. The theme
   commonly borders <section> or the first content wrapper. */
.hero,
.hero + section,
.hero + section > .page-wrap {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* --- HERO FEATURED IMAGE (WordPress post thumbnail) --- */
/* No max-height and no object-fit: the whole image shows at its own
   aspect ratio. Cropping here silently cut the top and bottom off wide
   illustrations. Crop the source file before upload if a fixed shape
   is wanted, rather than letting CSS decide what to discard. */
.hero .featured-image { margin: 24px 0 0; border-radius: 12px; overflow: hidden; }
.hero .featured-image img { width: 100%; height: auto; display: block; }