/*
 * pseo.css — Programmatic SEO page styles ("answer dossier" design)
 *
 * SCOPE: Only classes prefixed with .pseo- live here.
 * Shared site sections (FAQ accordion, subscription, buttons) keep
 * using the main design-system classes from style.css.
 *
 * DESIGN NOTES:
 *  - No images in the hero: the hero is built from the page's own data
 *    (chips, TL;DR, key takeaways), so every pSEO page is visually unique
 *    and the LCP element is text — fast by construction.
 *  - All colours derive from the site tokens (--color-primary #0B4BF2,
 *    --color-title, --color-body, --color-gradient) with hex fallbacks.
 *  - Responsive to 360px; :focus-visible styled; reduced motion respected.
 */

/* ---------------------------------------------------------------
   0. Local tokens (fallbacks mirror style.css values)
--------------------------------------------------------------- */
/* style.css sets body { overflow-x: hidden }, which (per spec) computes
   body's overflow-y to auto — making BODY a scroll container. CSS sticky
   then pins against body's scrollport, but the page actually scrolls on
   <html> (body.scrollTop stays 0), so sticky elements never engage.
   overflow-x: clip clips identically WITHOUT creating a scroll container.
   Scoped via :has() to pSEO pages only; browsers without :has() simply
   keep a static sidebar — graceful degradation. */
body:has(.pseo-page-scope) { overflow-x: clip; }

.pseo-page-scope {
    /* Safety net: negative row margins or decorative gradients must never
       introduce horizontal scroll on small screens. clip (not hidden) keeps
       position: sticky working inside. */
    overflow-x: clip;
    --pseo-primary: var(--color-primary, #0B4BF2);
    --pseo-title:   var(--color-title, #26262C);
    --pseo-body:    var(--color-body, #4F4F55);
    --pseo-surface: #fff;      /* card/panel background — flips in dark mode */
    --pseo-line:    #E6E8F2;
    --pseo-tint:    #F3F6FE;   /* primary at ~5% on white */
    --pseo-tint-2:  #FAFBFF;
    --pseo-accent:  #FF6354;   /* gradient endpoint from site --color-gradient */
    --pseo-radius:  14px;
    --pseo-shadow:  0 6px 30px rgba(11, 75, 242, 0.07);
}

/* Dark mode — the site's theme toggle sets data-theme="dark" on <html>
   (see main.js THEME MODE SWITCHER). --pseo-title/--pseo-body already
   follow the theme tokens (--color-title/--color-body flip to #fff), so
   only the LOCAL light-only tokens need dark values. Every surface,
   border, and tint below derives from these six overrides — no
   per-component dark rules needed. */
[data-theme=dark] .pseo-page-scope {
    --pseo-surface: #17171f;                 /* card on #000 body */
    --pseo-line:    rgba(188, 191, 219, 0.16); /* matches --color-border alpha style */
    --pseo-tint:    rgba(11, 75, 242, 0.16);
    --pseo-tint-2:  #0e0e14;                 /* section band, slightly off-black */
    --pseo-shadow:  0 6px 30px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------
   1. HERO — the answer dossier
--------------------------------------------------------------- */
.pseo-hero {
    position: relative;
    background:
        radial-gradient(48rem 24rem at 85% -10%, rgba(11, 75, 242, 0.07), transparent 60%),
        radial-gradient(32rem 18rem at -10% 110%, rgba(255, 99, 84, 0.05), transparent 60%),
        var(--pseo-tint-2);
    border-bottom: 1px solid var(--pseo-line);
    /* Top padding clears the site's absolutely-positioned header
       (~100px tall) so hero content never slides underneath it. */
    padding: 150px 0 90px;
}

@media (max-width: 991px) {
    .pseo-hero { padding: 120px 0 60px; }
}

/* Breadcrumb trail (parent-page links on 3-way pages) */
.pseo-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--pseo-body);
}

.pseo-crumbs a {
    color: var(--pseo-primary);
    text-decoration: none;
}

.pseo-crumbs a:hover { text-decoration: underline; }

.pseo-crumbs .sep { color: #B9BDD1; }

/* Dimension chips — the "coordinates" of this page */
.pseo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.pseo-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(11, 75, 242, 0.22);
    border-radius: 999px;
    background: var(--pseo-surface, #fff);
    color: var(--pseo-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}

.pseo-chip i { font-size: 12px; }

.pseo-hero .title {
    margin-bottom: 22px;
}

.pseo-hero .disc {
    max-width: 560px;
}

/* TL;DR — direct answer card, placed within the top ~200 words */
.pseo-tldr-box {
    position: relative;
    margin: 30px 0 36px;
    padding: 18px 22px 18px 26px;
    background: var(--pseo-surface, #fff);
    border: 1px solid var(--pseo-line);
    border-left: 4px solid var(--pseo-primary);
    border-radius: 0 var(--pseo-radius) var(--pseo-radius) 0;
    box-shadow: var(--pseo-shadow);
    font-size: 15px;
    line-height: 1.7;
    color: var(--pseo-body);
}

.pseo-tldr-box p { margin: 0; }

.pseo-tldr-box strong { color: var(--pseo-title); }

/* CTA row */
.pseo-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.pseo-hero-cta .note {
    margin: 0;
    font-size: 13.5px;
    color: var(--pseo-body);
}

.pseo-hero-cta .note i {
    color: #26CF4B;
    margin-right: 5px;
}

/* Key-takeaways panel — the hero's right column.
   Built from the page's key_takeaways JSON: unique per page. */
.pseo-takeaways {
    background: var(--pseo-surface, #fff);
    border: 1px solid var(--pseo-line);
    border-radius: var(--pseo-radius);
    box-shadow: var(--pseo-shadow);
    overflow: hidden;
}

.pseo-takeaways__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(45deg, var(--pseo-primary) 13.72%, var(--pseo-accent) 100%);
    color: #fff;
}

.pseo-takeaways__head i { font-size: 15px; }

.pseo-takeaways__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    text-transform: uppercase;
}

.pseo-takeaways__list {
    margin: 0;
    padding: 10px 24px 18px;
    list-style: none;
}

.pseo-takeaways__list li {
    position: relative;
    padding: 12px 0 12px 30px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--pseo-body);
}

.pseo-takeaways__list li + li {
    border-top: 1px dashed var(--pseo-line);
}

.pseo-takeaways__list li::before {
    content: "\f00c"; /* fa check */
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    position: absolute;
    left: 0;
    top: 13px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pseo-tint);
    color: var(--pseo-primary);
    font-size: 10px;
}

@media (max-width: 991px) {
    .pseo-takeaways { margin-top: 34px; }
}

/* ---------------------------------------------------------------
   2. META BAR — author / reviewer / freshness strip under the hero.
   Mirrors the blog post byline so pSEO pages carry the same
   E-E-A-T signals a reader already trusts on /blogs.
--------------------------------------------------------------- */
.pseo-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    padding: 16px 0;
    border-bottom: 1px solid var(--pseo-line);
    margin-bottom: 50px;
    font-size: 14px;
    color: var(--pseo-body);
}

.pseo-meta-bar__author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pseo-meta-bar__photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.pseo-meta-bar__author a,
.pseo-meta-bar__author strong {
    color: var(--pseo-title) !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pseo-meta-bar__author a:hover {
    color: var(--pseo-primary) !important;
}

[data-theme="dark"] .pseo-meta-bar__author a,
[data-theme="dark"] .pseo-meta-bar__author strong {
    color: #ffffff !important;
}

[data-theme="dark"] .pseo-meta-bar__author a:hover {
    color: #5b8cff !important;
}

.pseo-meta-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.pseo-meta-bar__item i {
    color: var(--pseo-primary);
    font-size: 13px;
}

@media (max-width: 576px) {
    .pseo-meta-bar { gap: 10px 18px; }
}

/* ---------------------------------------------------------------
   3. BODY PROSE — rendered from the 'body' DB column
--------------------------------------------------------------- */
.pseo-body-content {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    font-size: 16px;
    color: var(--pseo-body, var(--color-body));
}

.pseo-body-content h2 {
    font-size: clamp(22px, 3vw, 30px);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-title);
}

.pseo-body-content h3 {
    font-size: clamp(18px, 2.5vw, 24px);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-title);
}

.pseo-body-content p { margin-bottom: 1.25rem; }

.pseo-body-content ul,
.pseo-body-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.pseo-body-content li { margin-bottom: 0.5rem; }

.pseo-body-content a { color: var(--pseo-primary, var(--color-primary)); }

/* Anchored headings: offset jump targets so the sticky/absolute header
   never covers the heading a TOC link scrolls to. */
.pseo-body-content h2[id] { scroll-margin-top: 110px; }

/* Pull-quote — one sharply-written, self-contained sentence styled as
   a callout. Editors use <blockquote class="pseo-pullquote"> in body.
   These get lifted into AI Overviews and social screenshots far more
   than stat cards do. */
.pseo-pullquote {
    margin: 2.25rem 0;
    padding: 1.5rem 1.75rem;
    border: none;
    border-left: 4px solid var(--pseo-accent, #FF6354);
    background: linear-gradient(90deg, rgba(255, 99, 84, 0.06), transparent 70%);
    border-radius: 0 var(--pseo-radius, 14px) var(--pseo-radius, 14px) 0;
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--pseo-title, var(--color-title));
    font-style: normal;
}

.pseo-pullquote p { margin: 0; }

/* Closing line — the page's final word, rendered as its own band after
   the comparison table (closing_line column). Deliberately PLAIN body
   styling: it should read as the article's closing paragraph, not
   another design moment — a small kicker and a hairline rule are the
   only markers. (All colors via tokens → dark mode is automatic.) */
.pseo-closing-line {
    padding-top: 26px;
    border-top: 1px solid var(--pseo-line);
}

.pseo-closing-line__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary, #0B4BF2);
}

.pseo-closing-line__kicker i { font-size: 13px; }

.pseo-closing-line__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--pseo-body, var(--color-body));
}

/* Mid-page CTA band — slim inline conversion strip rendered between the
   data-heavy sections (after stats, after comparison/closing line).
   Copy comes from the DB (mid_cta_1 / mid_cta_2 columns; NULL = hidden).
   Deliberately compact — copy left, button right — so it reads as an
   inline prompt, not a second hero. Tokens → dark mode automatic. */
.pseo-mid-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(20px, 3vw, 28px) clamp(20px, 3.5vw, 36px);
    background: linear-gradient(120deg, var(--pseo-tint) 0%, var(--pseo-surface, #fff) 65%);
    border: 1px solid var(--pseo-line);
    border-left: 3px solid var(--pseo-primary, #0B4BF2);
    border-radius: var(--pseo-radius, 14px);
}

.pseo-mid-cta__kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-family: "Manrope", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pseo-primary, #0B4BF2);
}

.pseo-mid-cta__kicker i { font-size: 12px; }

.pseo-mid-cta__text {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: clamp(15px, 1.8vw, 17px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--pseo-title, var(--color-title));
}

/* Button must not shrink or wrap when the copy is long */
.pseo-mid-cta__btn { flex-shrink: 0; white-space: nowrap; }

/* Mobile: stack and centre; full-width tap target for the button */
@media (max-width: 767px) {
    .pseo-mid-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 18px;
    }
    .pseo-mid-cta__kicker { justify-content: center; }
    /* .rts-btn is display:block + max-width:max-content — centre via margin */
    .pseo-mid-cta__btn { margin: 0 auto; }
}

/* ---------------------------------------------------------------
   3b. TABLE OF CONTENTS — server-rendered jump nav.
   ≥1200px the TOC lives in the sticky sidebar rail (3c); below
   that, body_with_toc renders this inline card above the body.
--------------------------------------------------------------- */
.pseo-toc {
    padding: 22px 26px;
    background: var(--pseo-surface, #fff);
    border: 1px solid var(--pseo-line);
    border-radius: var(--pseo-radius);
}

/* Inline (mobile/tablet) instance only: the row's gy-4 gutter alone left
   the card sitting ~15px above the first paragraph — give the hand-off
   into the article a clearer pause. The sidebar-rail instance spaces
   itself via the rail's flex gap, so scope to the main column. */
.pseo-layout__main .pseo-toc { margin-bottom: 14px; }

.pseo-toc__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pseo-title);
}

.pseo-toc__title i { color: var(--pseo-primary); }

.pseo-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pseo-toc__list li {
    margin: 0;
    border-top: 1px dashed var(--pseo-line);
}

.pseo-toc__list li:first-child { border-top: none; }

.pseo-toc__list a {
    display: block;
    padding: 9px 0 9px 16px;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pseo-body);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pseo-toc__list a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pseo-line);
    transition: background 0.2s ease;
}

.pseo-toc__list a:hover { color: var(--pseo-primary); }

.pseo-toc__list a:hover::before { background: var(--pseo-primary); }

/* ---------------------------------------------------------------
   3c. DOSSIER LAYOUT — two-column article zone with sticky rail.

   The templates wrap the mid-page sections (body → mid-CTA #2) in
   .pseo-layout: main content in col-xl-8, sidebar rail in col-xl-4.
   Below 1200px the rail stacks under the content (the TOC card in
   the rail is d-none d-xl-block; body_with_toc renders an inline
   TOC instead).

   The wrapped partials were written as full-width sections — each
   carries its own .container and centring offsets. Rather than fork
   every partial, the rules below neutralise those inside the main
   column so content spans the column's full width.
--------------------------------------------------------------- */
.pseo-layout__main > *:last-child { margin-bottom: 0; }

/* Breathing room between the article column and the sidebar rail: the
   templates' row uses gx-4 (24px), which reads cramped next to 16px body
   text — widen to 48px where the two columns sit side by side (≥1200px).
   Direct-child selector so nested partial rows keep their own gutters. */
@media (min-width: 1200px) {
    .pseo-layout > .row { --bs-gutter-x: 3rem; }
}

/* Nested .container inside the main column: kill max-width + padding
   (the outer .pseo-layout container already provides both). */
.pseo-layout__main .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Centring offsets/narrow columns assume a 1290px canvas — inside the
   ~850px main column they'd waste a third of the width. Flatten them. */
.pseo-layout__main .offset-lg-1,
.pseo-layout__main .offset-lg-2 { margin-left: 0; }

.pseo-layout__main .col-lg-8,
.pseo-layout__main .col-lg-9,
.pseo-layout__main .col-lg-10 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* 4-across context cards (col-lg-3, 3-way template) become 2×2 inside
   the main column — 4 across at ~200px each is unreadable. */
@media (min-width: 992px) {
    .pseo-layout__main .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Full-bleed bands read as cards inside the column */
.pseo-layout__main .pseo-case-band { border-radius: var(--pseo-radius); }
.pseo-layout__main .pseo-stats-section {
    border: 1px solid var(--pseo-line);
    border-radius: var(--pseo-radius);
}

/* The container-neutralising rule above strips horizontal padding from
   every nested .container — right for full-width partials, wrong for the
   two band-cards: their content then sits flush against the card border
   (stat cards touching the stats-section edge, the case band's metric
   line touching the gradient edge). Restore inner padding for those. */
.pseo-layout__main .pseo-case-band .container {
    padding-left: clamp(24px, 3.5vw, 48px);
    padding-right: clamp(24px, 3.5vw, 48px);
}

/* Stats card: the inset between the outer border and the stat boxes
   should read the SAME as the gap between the boxes. The theme's g-4
   computes to a 15px gutter (7.5px col padding), so we override the
   row to a uniform 24px gutter (12px col padding both axes) and set
   the container + section padding so every side reads 24px:
     outer inset = 24 (container) − 12 (row neg margin) + 12 (col pad) = 24
     between     = 12 + 12 = 24
     bottom      = 12 (col pad) + 12 (section pad) = 24 */
.pseo-layout__main .pseo-stats-section .container {
    padding-left: 24px;
    padding-right: 24px;
}

.pseo-layout__main .pseo-stats-section .row.g-4 {
    margin: -12px;
}

.pseo-layout__main .pseo-stats-section .row.g-4 > div[class^="col-"] {
    padding: 12px;
    margin-top: 0;
}

.pseo-layout__main .pseo-stats-section.rts-section-gap {
    padding-top: 40px;
    padding-bottom: 24px;
}

/* mb--50 under the heading is proportioned for a full-bleed band —
   inside the 24px-inset card it reads as a hole. Tighten to 32px. */
.pseo-layout__main .pseo-stats-section .title-style-one-center.mb--50 {
    margin-bottom: 32px;
}

/* Breathing room between the card-ified bands. As full-bleed sections
   their spacing came from internal padding (rts-section-gap) — that
   padding is now INSIDE the card, so back-to-back cards (stats → case
   study) sat flush. Range mirrors the site's section rhythm:
   rts-section-gapBottom is 80px desktop / 60px mobile. */
.pseo-layout__main .pseo-stats-section,
.pseo-layout__main .pseo-case-band {
    margin-bottom: clamp(60px, 5.6vw, 80px);
}

/* Sticky rail — only the booking-form group (form + author + CTA cards)
   sticks below the site header; the TOC/facts cards above it scroll away
   normally. Sticking the WHOLE rail would exceed the viewport height and
   effectively disable stickiness. The group stays pinned until its
   containing column ends — i.e. through "The Bottom Line" + mid-CTA #2,
   where the two-column layout closes.

   .pseo-sidebar must stretch to the rail column's full height: a sticky
   element can only travel within its PARENT's box, and by default the
   flex-column sidebar is only as tall as its cards — zero travel room. */
@media (min-width: 1200px) {
    .pseo-layout__rail .pseo-sidebar { height: 100%; }
    .pseo-layout__rail .pseo-sidebar__sticky {
        position: sticky;
        top: 110px;
    }
}

.pseo-sidebar,
.pseo-sidebar__sticky {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pseo-sidebar-card {
    padding: 22px 24px;
    background: var(--pseo-surface, #fff);
    border: 1px solid var(--pseo-line);
    border-radius: var(--pseo-radius);
}

.pseo-sidebar-card__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pseo-title);
}

.pseo-sidebar-card__title i { color: var(--pseo-primary); }

/* At-a-glance facts: label over value, dashed separators */
.pseo-sidebar-facts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pseo-sidebar-facts li {
    padding: 10px 0;
    border-top: 1px dashed var(--pseo-line);
}

.pseo-sidebar-facts li:first-child { border-top: none; padding-top: 0; }
.pseo-sidebar-facts li:last-child { padding-bottom: 0; }

.pseo-sidebar-facts__label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8A8DA0;
}

.pseo-sidebar-facts__label i { font-size: 12px; color: var(--pseo-primary); }

.pseo-sidebar-facts__value {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pseo-title);
}

/* Mini author chip */
.pseo-sidebar-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pseo-sidebar-author__photo {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

.pseo-sidebar-author__name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pseo-title);
}

.pseo-sidebar-author__role {
    margin: 0;
    font-size: 12.5px;
    color: var(--pseo-body);
}

.pseo-sidebar-author__reviewed {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--pseo-line);
    font-size: 12.5px;
    color: var(--pseo-body);
}

.pseo-sidebar-author__reviewed i { margin-right: 5px; color: #2BA84A; }

/* Rail CTA card — same tint language as the mid-page CTA band */
.pseo-sidebar-cta {
    background: linear-gradient(160deg, var(--pseo-tint) 0%, var(--pseo-surface, #fff) 70%);
    border-left: 3px solid var(--pseo-primary, #0B4BF2);
}

.pseo-sidebar-cta__text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--pseo-body);
}

.pseo-sidebar-cta__btn { width: 100%; max-width: 100%; text-align: center; }

/* Quick "Book a Call" form card — mirrors the blog sidebar widget but
   speaks the pseo token language (dark mode automatic). */
.pseo-sidebar-book {
    background: linear-gradient(160deg, var(--pseo-tint) 0%, var(--pseo-surface, #fff) 70%);
    border-left: 3px solid var(--pseo-primary, #0B4BF2);
}

.pseo-book-form input[type="text"],
.pseo-book-form input[type="email"] {
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: var(--pseo-surface, #fff);
    border: 1px solid var(--pseo-line);
    border-radius: 8px;
    font-size: 14px;
    color: var(--pseo-title);
    outline: none;
    transition: border-color 0.2s ease;
}

.pseo-book-form input:focus { border-color: var(--pseo-primary); }

.pseo-book-form input::placeholder { color: #8A8DA0; }

/* reCAPTCHA iframe is a fixed 304px — scale it down so it never
   overflows the ~350px card (304 × 0.9 = 274px + padding fits). */
.pseo-book-form__captcha {
    margin-bottom: 14px;
    transform: scale(0.9);
    transform-origin: 0 0;
}

.pseo-book-form__msg {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

.pseo-book-form__msg.is-success { background: #ecfdf5; color: #065f46; }
.pseo-book-form__msg.is-error   { background: #fef2f2; color: #991b1b; }

/* ---------------------------------------------------------------
   3c. METHODOLOGY — numbered process steps (HowTo schema twin).
   The number markers are load-bearing: the steps are a genuine
   sequence through the buyer journey.
--------------------------------------------------------------- */
.pseo-methodology {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pseo-step;
}

.pseo-methodology__step {
    position: relative;
    counter-increment: pseo-step;
    padding: 0 0 32px 72px;
    margin: 0;
}

/* Number badge */
.pseo-methodology__step::before {
    content: counter(pseo-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -2px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--pseo-tint);
    border: 1px solid rgba(11, 75, 242, 0.18);
    color: var(--pseo-primary);
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Connector line between steps */
.pseo-methodology__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23.5px;
    top: 52px;
    bottom: 6px;
    width: 1px;
    background: var(--pseo-line);
}

.pseo-methodology__step:last-child { padding-bottom: 0; }

.pseo-methodology__step h3 {
    margin: 0 0 8px;
    padding-top: 10px;
    font-size: 18px;
    color: var(--pseo-title);
}

.pseo-methodology__step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pseo-body);
}

@media (max-width: 576px) {
    .pseo-methodology__step { padding-left: 58px; }
    .pseo-methodology__step::before { width: 40px; height: 40px; font-size: 14px; }
    .pseo-methodology__step:not(:last-child)::after { left: 19.5px; top: 46px; }
}

/* ---------------------------------------------------------------
   4. CONTEXT CARDS — industry / country dimension data
--------------------------------------------------------------- */
.pseo-context-card {
    height: 100%;
    padding: 30px 28px;
    background: var(--pseo-surface, #fff);
    border: 1px solid var(--pseo-line);
    border-radius: var(--pseo-radius);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.pseo-context-card:hover {
    box-shadow: var(--pseo-shadow);
    transform: translateY(-3px);
}

.pseo-context-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--pseo-tint);
    color: var(--pseo-primary);
    font-size: 19px;
}

.pseo-context-card__label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pseo-primary);
}

.pseo-context-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: var(--pseo-title);
}

.pseo-context-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--pseo-body);
}

/* ---------------------------------------------------------------
   5. STAT CARDS — unique_stats JSON
--------------------------------------------------------------- */
.pseo-stats-section {
    background: var(--pseo-tint-2);
    border-top: 1px solid var(--pseo-line);
    border-bottom: 1px solid var(--pseo-line);
}

.pseo-stat-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 28px 24px;
    background: var(--pseo-surface, #fff);
    border: 1px solid var(--pseo-line);
    border-radius: var(--pseo-radius);
    text-align: left;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.pseo-stat-card:hover {
    box-shadow: var(--pseo-shadow);
    transform: translateY(-3px);
}

.pseo-stat-card__value {
    margin: 0 0 8px;
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--pseo-primary);
}

.pseo-stat-card__context {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--pseo-title);
}

.pseo-stat-card__source {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--pseo-line);
    font-size: 12.5px;
    color: #8A8DA0;
}

.pseo-stat-card__source i {
    margin-right: 5px;
    font-size: 11px;
}

/* ---------------------------------------------------------------
   6. CASE STUDY BAND — proof block on the brand gradient
--------------------------------------------------------------- */
.pseo-case-band {
    background: linear-gradient(45deg, var(--pseo-primary, #0B4BF2) 13.72%, #08113B 100%);
    color: #fff;
    border-radius: 0;
}

.pseo-case-band .container { position: relative; }

.pseo-case-band__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.pseo-case-band h2 {
    margin: 0 0 14px;
    color: #fff;
}

.pseo-case-band__metric {
    margin: 0 0 16px;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    background: linear-gradient(90deg, #fff 30%, #FFB4A8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pseo-case-band__summary {
    margin: 0 auto;
    max-width: 640px;
    font-size: 15.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------
   7. COMPARISON TABLE
--------------------------------------------------------------- */
/* custom.css sets `.rts-service-area .row > div[class^=col-]` to a
   centered flex column, which shrinks pSEO cards/tables to their
   content width (very visible on mobile: the stacked comparison
   table collapsed to a narrow strip). Neutralize inside pSEO pages:
   stretch children back to full column width. */
.pseo-page-scope .rts-service-area .row > div[class^="col-"] {
    align-items: stretch;
}

/* The comparison section only has a bottom gap (rts-section-gapBottom);
   top spacing comes from whichever section precedes it (mid-CTA's
   gapBottom, or the case/stats bands' own margin-bottom), so no extra
   padding-top here — adding one doubled the gap after the mid-CTA. */

.pseo-comparison-wrap {
    width: 100%;
    border: 1px solid var(--pseo-line);
    border-radius: var(--pseo-radius);
    overflow: hidden;
    box-shadow: var(--pseo-shadow);
    background: var(--pseo-surface, #fff);
}

.pseo-comparison-table {
    margin: 0;
    font-size: 15px;
    background: var(--pseo-surface, #fff);
}

.pseo-comparison-table thead th {
    background: var(--pseo-primary, #0B4BF2);
    color: #fff;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
    padding: 14px 18px;
    border: none;
}

.pseo-comparison-table tbody td {
    vertical-align: top;
    padding: 13px 18px;
    border: none;
    border-top: 1px solid var(--pseo-line);
    color: var(--pseo-body);
}

.pseo-comparison-table tbody td:first-child {
    font-weight: 600;
    color: var(--pseo-title);
}

.pseo-comparison-table tbody tr:nth-child(even) { background: var(--pseo-tint-2); }

/* Checkmark / cross helpers authors can use in table cells:
   add class="pseo-yes" or class="pseo-no" to a <td> */
.pseo-comparison-table .pseo-yes::before {
    content: "✓ ";
    color: #22c55e;
    font-weight: 700;
}

.pseo-comparison-table .pseo-no::before {
    content: "✗ ";
    color: #ef4444;
    font-weight: 700;
}

/* Mobile: collapse to stacked cards using data-label attributes
   (emitted by the comparison_table partial). Each row becomes a card:
   the first cell (the metric name) is the card's title bar, and the
   remaining cells show "column: value" pairs. */
@media (max-width: 768px) {
    .pseo-comparison-table thead { display: none; }

    .pseo-comparison-table,
    .pseo-comparison-table tbody,
    .pseo-comparison-table tr,
    .pseo-comparison-table td {
        display: block;
        width: 100%;
    }

    .pseo-comparison-table tr {
        margin: 0;
        border-top: 1px solid var(--pseo-line);
    }

    .pseo-comparison-table tr:first-child { border-top: none; }

    .pseo-comparison-table tbody tr:nth-child(even) { background: #fff; }

    .pseo-comparison-table td {
        border: none;
        padding: 10px 16px;
    }

    .pseo-comparison-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #8A8DA0;
        display: block;
        margin-bottom: 2px;
    }

    /* First cell = the metric name → render as the card's title bar */
    .pseo-comparison-table td:first-child {
        background: var(--pseo-tint, #F3F6FE);
        font-size: 15px;
        padding: 12px 16px;
    }

    .pseo-comparison-table td:first-child::before { display: none; }
}

/* ---------------------------------------------------------------
   8. RELATED PAGE CARDS — internal links
--------------------------------------------------------------- */
.pseo-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 26px 22px;
    background: var(--pseo-surface, #fff);
    border: 1px solid var(--pseo-line);
    border-radius: var(--pseo-radius);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.pseo-related-card:hover {
    border-color: rgba(11, 75, 242, 0.35);
    box-shadow: var(--pseo-shadow);
    transform: translateY(-3px);
}

.pseo-related-card__kicker {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pseo-primary);
}

.pseo-related-card h3 {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.45;
}

/* Stretched-link pattern: whole card is clickable, single tab stop */
.pseo-related-card h3 a {
    color: var(--pseo-title);
    text-decoration: none;
}

.pseo-related-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.pseo-related-card h3 a:hover { color: var(--pseo-primary); }

.pseo-related-card__arrow {
    margin-top: auto;
    padding-top: 18px;
    color: var(--pseo-primary);
    font-size: 15px;
    transition: transform 0.25s ease;
}

.pseo-related-card:hover .pseo-related-card__arrow {
    transform: translateX(5px);
}

/* ---------------------------------------------------------------
   9. AUTHOR BIO — full E-E-A-T card (modeled on the blog
      .post-author block: photo, bio, social, reviewer chip)
--------------------------------------------------------------- */
.pseo-author-section {
    padding-top: 40px;
}

/* The FAQ wrapper ships with rts-section-gap2 = 130px padding both ends —
   far above this page's 80px section rhythm. The mid-CTA above already
   contributes 80px (gapBottom), so 130px more on top read as a dead zone;
   same story at the bottom against the author card's own 40px padding-top.
   Bring both ends back into rhythm. */
.pseo-page-scope .faq-cta-main-wrapper-bg { padding-top: 80px; padding-bottom: 50px; margin-top: 4px; }

@media (max-width: 767px) {
    .pseo-page-scope .faq-cta-main-wrapper-bg { padding-top: 60px; padding-bottom: 40px; }
}

.pseo-author-card {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding: 36px 38px;
    background: var(--pseo-tint-2);
    border: 1px solid var(--pseo-line);
    border-radius: var(--pseo-radius);
}

.pseo-author-card__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 4px solid var(--pseo-surface, #fff);
    box-shadow: var(--pseo-shadow);
}

.pseo-author-card__label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pseo-primary);
}

.pseo-author-card__name {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 700;
    color: var(--pseo-title);
}

.pseo-author-card__name a {
    color: var(--pseo-title) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pseo-author-card__name a:hover {
    color: var(--pseo-primary) !important;
}

[data-theme="dark"] .pseo-author-card__name a {
    color: #ffffff !important;
}

[data-theme="dark"] .pseo-author-card__name a:hover {
    color: #5b8cff !important;
}

.pseo-author-card__title {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--pseo-body);
}

.pseo-author-card__bio {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--pseo-body);
}

.pseo-author-card__social {
    display: flex;
    gap: 10px;
    margin: 0 0 0;
    padding: 0;
    list-style: none;
}

.pseo-author-card__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f0f4ff;
    border: 1px solid #d4e0fc;
    color: #0a66c2 !important;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pseo-author-card__social a:hover {
    background: #0a66c2 !important;
    border-color: #0a66c2 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.28);
    opacity: 1 !important;
}

[data-theme="dark"] .pseo-author-card__social a {
    background: rgba(10, 102, 194, 0.16);
    border-color: rgba(112, 181, 249, 0.3);
    color: #70b5f9 !important;
}

[data-theme="dark"] .pseo-author-card__social a:hover {
    background: #0a66c2 !important;
    border-color: #70b5f9 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(10, 102, 194, 0.5);
    opacity: 1 !important;
}

/* Reviewer + freshness chip row */
.pseo-author-card__review {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--pseo-line);
}

.pseo-review-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--pseo-surface, #fff);
    border: 1px solid var(--pseo-line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--pseo-body);
}

.pseo-review-chip i {
    color: #26CF4B;
    font-size: 12px;
}

.pseo-review-chip strong { color: var(--pseo-title); }

@media (max-width: 576px) {
    .pseo-author-card {
        flex-direction: column;
        padding: 28px 24px;
        text-align: left;
    }
    .pseo-author-card__photo { width: 96px; height: 96px; }
}

/* ---------------------------------------------------------------
   10. Accessibility + motion
--------------------------------------------------------------- */
.pseo-page-scope a:focus-visible,
.pseo-page-scope button:focus-visible {
    outline: 2px solid var(--pseo-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .pseo-context-card,
    .pseo-stat-card,
    .pseo-related-card,
    .pseo-related-card__arrow,
    .pseo-author-card__social a {
        transition: none !important;
    }
    .pseo-context-card:hover,
    .pseo-stat-card:hover,
    .pseo-related-card:hover {
        transform: none;
    }
}