/*
Theme Name: The LaTeX Lab
Theme URI: https://thelatexlab.com
Author: The LaTeX Lab
Author URI: https://thelatexlab.com
Description: Custom lightweight theme for The LaTeX Lab — professional Word to LaTeX and PDF to LaTeX conversion service. Built for performance: classic-editor friendly, no page builders, no block CSS, per-template stylesheet chunks.
Version: 3.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: thelatexlab
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   FONTS — self-hosted, Latin subset, variable axes (woff2 only)
   ============================================================ */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('assets/fonts/Urbanist-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS — see THEME-TOKENS.md for the source of truth.
   Readable names are canonical. Short aliases (--acc, --tp, --sp …)
   are declared alongside so pasted-HTML pages continue to render
   during the page-by-page migration; aliases retire as each page
   moves to readable names.
   ============================================================ */
:root {
  /* Brand */
  --color-accent:               #BF6438;
  --color-accent-hover:         #A8532B;
  --color-accent-strong:        #8A3A1A;
  --color-accent-tint:          #FEF0E7;

  /* Surfaces */
  --color-bg:                   #FFFFFF;
  --color-bg-sand:              #F9F8F5;
  --color-bg-subtle:            #FAFAFA;
  --color-bg-warm:              #F0EEE6;
  --color-bg-dark:              #141413;

  /* Text */
  --color-text:                 #141413;
  --color-text-muted:           #5C5B56;
  --color-text-on-dark:         #F0EEE6;
  --color-text-on-dark-muted:   #A09E97;
  --color-text-on-dark-subtle:  #6B6961;

  /* Borders */
  --color-border:               #D4CCBD;
  --color-border-subtle:        #E8E6E0;

  /* Semantic accents */
  --color-green:                #2E8A52;
  --color-green-strong:         #1A5A3A;
  --color-green-tint:           #EDFBF1;
  --color-green-tint-2:         #C8F0D4;

  --color-purple:               #6B5CE7;
  --color-purple-strong:        #4A35C5;
  --color-purple-tint:          #F0EEF9;
  --color-purple-tint-2:        #E0DCF8;

  --color-blue:                 #1A3A8A;
  --color-blue-tint:            #EEF3FF;
  --color-blue-tint-2:          #DDE6FA;

  --color-yellow:               #6A5A1A;
  --color-yellow-tint:          #FEF9E7;
  --color-yellow-tint-2:        #F5EFC5;

  --color-error:                #D94F4F;

  /* Typography */
  --font-sans:                  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:               'Urbanist', 'Inter', sans-serif;

  /* Layout */
  --max-width:                  1280px;
  --section-padding:            0 40px;
  --header-height:              70px;

  /* Radius */
  --radius-sm:                  8px;
  --radius-md:                  12px;
  --radius-lg:                  20px;
  --radius-pill:                40px;

  /* Shadow */
  --shadow-card:                0 8px 32px rgba(0,0,0,.07);
  --shadow-card-hover:          0 8px 32px rgba(0,0,0,.05);
  --shadow-feature:             0 0 0 3px rgba(46,138,82,.09), 0 6px 24px rgba(46,138,82,.10);
  --shadow-nav-scrolled:        0 2px 20px rgba(20,20,19,.06);

  /* Z-index */
  --z-nav:                      100;
  --z-mobile-nav-panel:         99;
  --z-skip-link:                100000;

  /* Aliases (retire per page during migration) */
  --bg:                         var(--color-bg);
  --sand:                       var(--color-bg-sand);
  --dark:                       var(--color-bg-dark);
  --tp:                         var(--color-text);
  --ts:                         var(--color-text-muted);
  --tod:                        var(--color-text-on-dark);
  --acc:                        var(--color-accent);
  --acch:                       var(--color-accent-hover);
  --brd:                        var(--color-border);
  --bl:                         var(--color-border-subtle);
  --white:                      var(--color-bg);
  --font:                       var(--font-sans);
  --mw:                         var(--max-width);
  --sp:                         var(--section-padding);
}

@media (max-width: 768px) {
  :root {
    --section-padding:          0 20px;
    --sp:                       0 20px;
  }
}

/* ============================================================
   RESET — minimal
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.7; }
img, svg, video { max-width: 100%; height: auto; display: block; }
code { overflow-wrap: anywhere; word-break: break-word; }
a { color: var(--color-accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--color-accent-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }
ul, ol { list-style: none; }
p { margin-bottom: 1.25rem; }
button { font: inherit; }

/* ============================================================
   ACCESSIBILITY — reduced-motion guard, skip-link, sr-only
   Single source of truth for motion preferences. Any component
   that needs to animate at all costs (none in this theme) would
   need to opt out explicitly.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The .nav-open class is toggled on <body> by main.js when the mobile
   drawer opens. The drawer overlays the viewport on small screens, so
   lock background scroll to keep iOS Safari from rubber-banding the
   page underneath when the user scrolls within the drawer. Desktop
   widths never open the drawer, so the lock is naturally scoped. */
@media (max-width: 768px) {
  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }
}

/* ============================================================
   BREADCRUMB — rendered on single posts, archives, search, 404.
   Wraps rank_math_the_breadcrumbs() output: <div class="rank-math-
   breadcrumb"><p>…</p></div> with .separator and .last spans inside.
   ============================================================ */
.blog-breadcrumb {
  margin-bottom: 24px;
  color: var(--color-text-muted);
}
.blog-breadcrumb,
.blog-breadcrumb p,
.blog-breadcrumb a,
.blog-breadcrumb span { font-size: .74rem; line-height: 1.4; }
.blog-breadcrumb p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.blog-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--color-accent); }
.blog-breadcrumb .separator { color: var(--color-border); white-space: nowrap; }

@media (max-width: 768px) {
  /* Keep breadcrumb on one line; intermediate crumbs stay on one line
     each; truncate the current-page crumb so long titles don't push
     the row out. */
  .blog-breadcrumb p {
    flex-wrap: nowrap;
    min-width: 0;
  }
  .blog-breadcrumb a { white-space: nowrap; }
  .blog-breadcrumb .last {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--color-bg); color: var(--color-text);
  display: block; font-size: .875rem; font-weight: 700;
  height: auto; width: auto; padding: 16px 24px;
  clip: auto !important; z-index: var(--z-skip-link);
  top: 5px; left: 5px; border-radius: var(--radius-sm);
  box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
}

/* ============================================================
   TYPOGRAPHY — minimal defaults; per-component CSS overrides
   sizes and weights as needed. Defaults below keep unstyled
   content (e.g. blog post body) readable.
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--color-text); letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); margin-bottom: .75rem; }
h4 { font-size: 1rem; }
strong, b { font-weight: 700; }
small { font-size: .85em; }
.text-muted { color: var(--color-text-muted); }
.h2-muted { color: var(--color-text-muted); font-weight: 500; font-size: calc(1em - 4px); }

/* ============================================================
   LAYOUT PRIMITIVES
   .site-corridor : bordered max-width container framing the page
   .section       : padding wrapper inside the corridor
   .divider       : 1px hairline between sections
   .divider-grid  : hatched-bg decorative divider band
   ============================================================ */
.site-corridor {
  max-width: var(--max-width); margin: 0 auto;
  border-left: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
}
.section { padding: var(--section-padding); }
.divider { height: 0; border-top: 1px solid var(--color-border-subtle); }
.divider-grid {
  height: 100px; position: relative; overflow: hidden;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}
.divider-grid::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 12px 12px; opacity: .55;
}
@media (max-width: 768px) {
  .site-corridor { border: none; }
}

/* Utilities */
.span-2 { grid-column: 1 / -1; }

/* Performance utility: defer paint of off-screen sections.
   Applied on long below-fold sections (footer, late testimonials,
   marquees) inside per-page chunks. Reserve approximate height
   via contain-intrinsic-size to avoid scrollbar jumps. */
.cv-defer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* ============================================================
   BUTTONS — .btn base + variant modifiers + size modifier
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-display); font-size: .875rem; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  padding: 10px 20px; height: 44px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  transition: transform .15s ease-out, background-color .15s, border-color .15s, color .15s;
}
.btn:active { transform: scale(.99); }
.btn--primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-hover); color: var(--color-bg); border-color: var(--color-accent-hover); }
.btn--outline { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--outline:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.btn--inverse { background: var(--color-bg); color: var(--color-accent); border-color: var(--color-bg); }
.btn--inverse:hover { background: #f5f5f5; color: var(--color-accent); }
.btn--sm { padding: 8px 16px; font-size: .82rem; height: 38px; }
.btn--lg { padding: 14px 28px; font-size: 1rem; height: 52px; }

.btn-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-group--center { justify-content: center; }
@media (max-width: 480px) {
  .btn-group { flex-direction: column; width: 100%; }
  .btn-group .btn { width: 100%; }
}

/* ============================================================
   HEADER / SITE NAV — solid white, no backdrop-filter.
   Sticky, full-width, JS-driven mobile drawer.
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: var(--z-nav); background: var(--color-bg); border-bottom: 1px solid var(--color-border-subtle); transition: box-shadow .25s; }
.site-header.is-scrolled { box-shadow: var(--shadow-nav-scrolled); }

.site-nav__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; padding: 0 40px;
  height: var(--header-height);
}
.site-logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo img { height: 48px; width: auto; }

.site-nav__links { display: flex; align-items: center; gap: 28px; justify-self: center; position: relative; }
.site-nav__links a { color: var(--color-text-muted); font-size: .88rem; font-weight: 500; text-decoration: none; }
.site-nav__links a:hover { color: var(--color-text); }
.site-nav__links a[aria-current="page"],
.site-nav__links a.current-page { color: var(--color-text); font-weight: 600; }

/* Dropdown (single-level children under a parent) */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text-muted); font-size: .88rem; font-weight: 500;
}
.nav-dropdown-toggle:hover { color: var(--color-text); }
.nav-dropdown-toggle::after {
  content: ''; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid currentColor; margin-top: 2px;
}
.nav-dropdown-content {
  display: none; position: absolute; top: 100%; left: -16px;
  background: var(--color-bg); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm); padding: 14px 0 10px;
  min-width: 220px; box-shadow: 0 8px 30px rgba(20,20,19,.08);
}
.nav-dropdown-content a { display: block; padding: 8px 20px; font-size: .9rem; }
.nav-dropdown-content a:hover { background: var(--color-bg-subtle); }
.nav-dropdown.is-open .nav-dropdown-content { display: block; }

/* Mega menu — full-width panel under any top-level item that has
   children. Trigger is the same .nav-dropdown-toggle; the existing
   dropdown JS (hover + click + outside-click) drives the .is-open
   state. Number of columns auto-fits to the number of depth-1 groups. */
.nav-megamenu { position: static; } /* override .nav-dropdown's relative — panel resolves up to .site-nav__links */
.nav-megamenu__panel {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: 0 12px 32px rgba(20,20,19,.05);
  padding: 24px 32px;
}
/* Invisible bridge above the panel: keeps the dropdown open as the
   mouse crosses any residual sub-pixel gap between the trigger bottom
   and the panel top. The pseudo-element is a descendant of the panel
   (and thus of .nav-dropdown), so mouseleave on .nav-dropdown won't
   fire while the cursor is anywhere within this strip. */
.nav-megamenu__panel::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 16px;
}
.nav-megamenu.is-open .nav-megamenu__panel { display: block; }
.nav-megamenu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
}
.nav-megamenu__group { min-width: 0; }
.nav-megamenu__heading {
  display: block;
  font-family: var(--font-sans);
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}
.nav-megamenu__group a {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
  color: var(--color-text); font-size: .82rem; font-weight: 500;
  text-decoration: none; transition: color .15s;
}
.nav-megamenu__group a:hover { color: var(--color-accent); }
.nav-megamenu__group .megamenu-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.site-nav__cta {
  justify-self: end;
  background: var(--color-accent); color: var(--color-bg) !important;
  padding: 8px 20px; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: background .15s;
}
.site-nav__cta:hover { background: var(--color-accent-hover); }

.site-nav__toggle {
  display: none; justify-self: end;
  background: none; border: none; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.site-nav__toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform .3s, opacity .3s; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }

/* In-drawer CTA. Lives inside .site-nav__links so the menu renders
   only once in the DOM; hidden by default on desktop, revealed when
   the drawer is open on mobile. */
.site-nav__cta--mobile { display: none; }

/* Drawer activates at 1024px (not 768px) so iPad Pro portrait and
   smaller tablets get the hamburger UX. The horizontal nav requires
   ~1080px to comfortably fit logo + 6 items + dropdown + CTA without
   text wrapping or items colliding with the CTA. The rest of the
   site's responsive breakpoints (sections, hero, footer) stay at
   768px — only the nav switches early. */
@media (max-width: 1024px) {
  .site-nav__inner { grid-template-columns: auto 1fr; padding: 0 20px; }
  .site-nav__toggle { display: flex; }

  /* Desktop strip + desktop CTA hidden on mobile; .site-nav__links
     becomes the drawer overlay when .is-open is set. */
  .site-nav__links { display: none; }
  .site-nav__cta   { display: none; }

  /* ============================================================
     MOBILE DRAWER — .site-nav__links.is-open is a fixed overlay
     below the sticky header. We anchor width via viewport units +
     a centering transform rather than left:0/right:0 because the
     element is nested inside .site-nav__inner (a grid container);
     some browsers treat that ancestor as the containing block for
     position:fixed descendants. left:50% + translateX(-50%) +
     width:100vw guarantees viewport-edge sizing regardless of which
     ancestor the browser picks. The toggle button (in the header)
     animates its bars into an X to act as the close affordance.
     ============================================================ */
  .site-nav__links.is-open {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 16px 24px 40px;
    position: fixed;
    top: var(--header-height);
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--color-bg);
    z-index: var(--z-mobile-nav-panel);
    border-bottom: 1px solid var(--color-border-subtle);
    box-shadow: 0 8px 24px rgba(20,20,19,.06);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav__links.is-open > a,
  .site-nav__links.is-open .nav-dropdown-toggle {
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
  }
  /* Specificity: .site-nav__links.is-open > a otherwise wins on
     colour and resets the CTA to body text. */
  .site-nav__links.is-open > a.site-nav__cta--mobile {
    display: block;
    margin-top: 16px;
    align-self: stretch;
    background: var(--color-accent);
    color: var(--color-bg);
    padding: 14px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600; font-size: 1rem;
    text-align: center; text-decoration: none;
  }
  .site-nav__links.is-open > a.site-nav__cta--mobile:hover {
    background: var(--color-accent-hover); color: var(--color-bg);
  }

  /* Mega menu + single-level dropdowns: inline accordions inside the
     drawer, no floating panels. Scoped to the drawer so the desktop
     behaviour above is untouched. */
  .site-nav__links.is-open .nav-dropdown-content {
    position: static; box-shadow: none; border: none;
    padding: 8px 0 0 16px; min-width: 0; background: transparent;
  }
  .site-nav__links.is-open .nav-megamenu__panel {
    position: static;
    padding: 8px 0 8px 16px;
    border: none; box-shadow: none; background: transparent;
  }
  .site-nav__links.is-open .nav-megamenu__panel::before { display: none; }
  .site-nav__links.is-open .nav-megamenu__grid {
    display: flex; flex-direction: column;
    gap: 18px; max-width: none; margin: 0;
  }
  .site-nav__links.is-open .nav-megamenu__heading { margin-bottom: 4px; }
}

/* ============================================================
   FOOTER — white background, sits OUTSIDE the corridor.
   Three-column grid where the first column is a vertical stack
   of two blocks (brand / Contact) separated by a hairline rule;
   columns 2 and 3 are Popular Posts and Latest Posts.
   Bottom bar: copyright + legal links + social icons.
   Below 768px the stack spans both columns of a 2-col grid;
   below 480px everything stacks.
   ============================================================ */
.site-footer { background: var(--color-bg); padding: 64px 0 40px; }
.site-footer__inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px;
}

.site-footer__col-stack { display: flex; flex-direction: column; }
.site-footer__col-stack .site-footer__col {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 24px; margin-top: 24px;
}

.site-footer__brand .site-logo { display: inline-block; margin-left: -6px; }
.site-footer__brand .site-logo img { height: 42px; width: auto; }
.site-footer__brand p { color: var(--color-text-muted); font-size: 14px; line-height: 1.6; margin: 12px 0 0; }

.site-footer .footer-widget-title {
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 16px;
}
.site-footer__col {
  /* Grid items default to min-width: auto, which lets long post titles
     (Latest Posts column) push the column past its grid track and ignore
     the inner's padding-right on mobile. min-width: 0 lets the ellipsis
     truncation actually kick in. */
  min-width: 0;
}
.site-footer__col a {
  display: block;
  color: var(--color-text-muted);
  font-size: 14px; text-decoration: none;
  margin-bottom: 10px;
  transition: color .2s;
}
.site-footer__col a:hover { color: var(--color-text); }
.site-footer__post-link {
  /* One-line ellipsis for Latest Posts; the `title` attribute carries
     the full string for users who hover. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.site-footer__countries {
  max-width: var(--max-width); margin: 56px auto 0;
  padding: 32px 40px 0;
  border-top: 1px solid var(--color-border-subtle);
}
.site-footer__countries .footer-widget-title { margin: 0 0 20px; }
.site-footer__countries-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.site-footer__countries-list {
  list-style: none; margin: 0; padding: 0;
}
.site-footer__countries-list li {
  color: var(--color-text-muted);
  font-size: 12px; line-height: 1.5;
  margin-bottom: 10px;
}
.site-footer__countries-list li:last-child { margin-bottom: 0; }

.site-footer__bottom {
  max-width: var(--max-width); margin: 40px auto 0;
  padding: 28px 40px 0;
  border-top: 1px solid var(--color-border-subtle);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-size: 14px; color: var(--color-text-muted);
}
.site-footer__end {
  display: flex; align-items: center; gap: 28px;
}
.site-footer__legal {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.site-footer__legal a {
  color: var(--color-text-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s;
}
.site-footer__legal a:hover { color: var(--color-text); }
.site-footer__social { display: flex; gap: 16px; align-items: center; }
.site-footer__social a {
  display: inline-flex; align-items: center;
  color: var(--color-text-muted); text-decoration: none;
  transition: color .2s;
}
.site-footer__social a:hover { color: var(--color-accent); }
.site-footer__social svg { display: block; }

@media (max-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; padding: 0 20px; gap: 32px; }
  .site-footer__col-stack { grid-column: 1 / -1; }
  .site-footer__countries { margin-top: 40px; padding: 28px 20px 0; }
  .site-footer__countries-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-footer__bottom {
    margin: 32px auto 0; padding: 24px 20px 0;
    /* column-reverse pushes the copyright span to the bottom of the
       stack while keeping legal links + social icons above it on
       small screens. DOM order is preserved (copyright first, then
       legal/social) so the page outline and SR reading order match
       the desktop layout. */
    flex-direction: column-reverse; gap: 16px; align-items: flex-start;
  }
  .site-footer__end { flex-wrap: wrap; gap: 20px; }
}
@media (max-width: 480px) {
  .site-footer { padding: 48px 0 28px; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__countries-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   TRUST STRIP + MARQUEE — shared (every page)
   Single track on mobile (logos beyond #6 hidden), animation off
   below 768px. Above 768px the track ships as ALL logos duplicated
   for seamless loop; @keyframes mq slides by -50%.
   ============================================================ */
.trust-strip { padding: 56px 0; text-align: center; overflow: hidden; background: var(--color-bg); }
.trust-strip__label { font-size: .94rem; color: var(--color-text-muted); margin-bottom: 28px; font-weight: 500; padding: var(--section-padding); }

.marquee { overflow: hidden; }
.marquee__track {
  display: flex; align-items: center;
  width: max-content;
  animation: mq 30s linear infinite;
  will-change: transform;
}
.marquee__track:hover { animation-play-state: paused; }
.marquee__logo { height: 120px; width: auto; margin-right: 64px; }

@keyframes mq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
  .marquee__logo { height: 90px; margin-right: 48px; }
}
@media (max-width: 768px) {
  /* Keep the animation running on mobile so the carousel still rolls
     through all 6 logos rather than statically showing them on one
     line; just shrink the logos and inter-logo gap. */
  .marquee__logo { height: 72px; margin-right: 40px; }
}

/* ============================================================
   FAQ ACCORDION — shared (home, pricing, services).
   Markup contract: .faq-item containing <button class="faq-question">
   and an element with class="faq-answer". JS toggles .is-open on the
   .faq-item. Stateful presentation is CSS-driven from there.
   ============================================================ */
/* Markup contract reminder: each .faq-item contains a
   <button class="faq-question"> and a sibling .faq-answer. JS toggles
   .is-open on the .faq-item; the +/− toggle and answer reveal are
   CSS-driven from there.

   Card pattern: each item is a soft-tinted card (matches the
   homepage's bento / features-grid look) rather than a bare border
   row. Items stack with a small gap so they read as discrete
   elements. The toggle is a small accent-tinted circular badge so it
   feels anchored to the card, not floating in space.                 */
.faq-item {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color .2s, background-color .2s;
}
.faq-item.is-open {
  background: var(--color-bg-sand);
  border-color: var(--color-border);
}
.faq-question {
  background: none; border: none;
  padding: 18px 22px;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500;
  color: var(--color-text); line-height: 1.45; text-align: left;
  width: 100%; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border-radius: var(--radius-md);
}
.faq-question::after {
  content: '+';
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-size: 1.2rem; font-weight: 400; line-height: 1;
  flex-shrink: 0;
  transition: background-color .2s, color .2s, transform .2s;
}
.faq-item:hover .faq-question::after { background: var(--color-accent); color: var(--color-bg); }
.faq-item.is-open .faq-question::after { content: '−'; background: var(--color-accent); color: var(--color-bg); }
.faq-answer {
  display: none;
  padding: 0 22px 20px;
  font-size: .92rem; line-height: 1.7; color: var(--color-text-muted);
}
.faq-answer a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.faq-answer a:hover { color: var(--color-accent-hover); }
.faq-answer code {
  font-size: .88em;
  background: var(--color-bg);
  padding: 1px 6px;
  border-radius: 4px;
}
.faq-item.is-open .faq-answer { display: block; }

/* ─── FAQ section wrapper (premium/editorial layout) ───
   Full-width intro at the top (matches every other section on the
   site — only hero sections are centered, this is left-aligned),
   then a two-column band below: accordion on the left, sticky
   .spotlight-cta highlight card on the right. Collapses to a single
   column below 900px (CTA card stacks under the accordion).

   Minimum markup:
     <section class="faq-section"><div class="section">
       <div class="faq-section__intro">
         <h2>...</h2>
         <p class="faq-section__sub">...</p>     (optional)
       </div>
       <div class="faq-section__layout">
         <div class="faq-list">
           <div class="faq-item">...</div>
         </div>
         <aside class="spotlight-cta">...</aside>  (optional)
       </div>
     </div></section>                                                  */
.faq-section { padding: 96px 0; }
.faq-section__intro {
  margin: 0 0 40px;
  max-width: 760px;
}
.faq-section__intro h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.faq-section__sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.faq-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Defensive sibling-gap for .faq-item — applies whenever two cards
   sit next to each other, no matter the parent. Pasted FAQ blocks in
   blog post content (where the editor wraps items in .faq-section
   instead of .faq-list) pick up the same 10px rhythm as the rest of
   the site automatically. The .faq-list override below zeros this
   out so the canonical flex-gap pattern doesn't double-space. */
.faq-item + .faq-item { margin-top: 10px; }
.faq-list > .faq-item + .faq-item { margin-top: 0; }

@media (max-width: 900px) {
  .faq-section__layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .faq-section { padding: 64px 0; }
  .faq-section__intro { margin-bottom: 32px; }
}

/* ─── SPOTLIGHT CTA — sidebar highlight card ───
   Editorial stat card: large display-font stat at top, hairline
   divider, body copy, single solid CTA button. Clean white surface
   with a subtle border + soft drop shadow. Composes into
   `.faq-section__layout` today; reusable in any future sidebar
   context where a stat-led conversion card belongs.

   Minimum markup:
     <aside class="spotlight-cta">
       <div class="spotlight-cta__stat">500+</div>
       <hr class="spotlight-cta__divider">
       <p class="spotlight-cta__copy">...</p>
       <a class="spotlight-cta__btn" href="...">...</a>
     </aside>                                                          */
.spotlight-cta {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}
.spotlight-cta__stat {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--color-text);
  margin: 0;
}
.spotlight-cta__divider {
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  margin: 24px 0;
}
.spotlight-cta__copy {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 24px;
}
.spotlight-cta__btn {
  display: block;
  text-align: center;
  width: 100%;
  padding: 14px 22px;
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
}
.spotlight-cta__btn:hover {
  background: var(--color-accent-hover);
  color: var(--color-bg);
}

@media (max-width: 900px) {
  .spotlight-cta { position: static; }
}
@media (max-width: 480px) {
  .spotlight-cta { padding: 28px 24px; }
}

/* ============================================================
   FEATURES GRID — generic icon + (optional h3) + caption tile grid.
   Lifted from home.css when promoted to global on the ACM page build
   (used on home's "everything you need in one place" band plus any
   page that wants the same look). Defaults to 3-col; pages override
   to 1/2/4 col via a page-scoped grid-template-columns rule.
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.features-grid__cell {
  padding: 28px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
}
.features-grid__icon {
  margin-bottom: 12px;
  color: var(--color-accent);
}
.features-grid__cell h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  color: var(--color-text);
}
.features-grid__cell p {
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}
.features-grid__cell h3 + p { color: var(--color-text-muted); font-weight: 400; }
.features-grid__cell code {
  font-size: .88em;
  background: var(--color-bg);
  padding: 1px 6px;
  border-radius: 4px;
}
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

/* ─── .features-grid--2col modifier ───
   Forces a 2-col layout regardless of the default 3-col rule above.
   Used outside .how-it-works-section context (which already applies
   its own 2-col override in service.css) — e.g. "What we handle" and
   "Why us" grids on service pages. Collapses to 1-col below 768px. */
.features-grid--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) { .features-grid--2col { grid-template-columns: 1fr; } }

/* ============================================================
   CTA SECTION — basic dark band variant used as a page closer.
   Per-page chunks may define their own richer CTA bands; this is
   the lowest-common-denominator one.
   ============================================================ */
.cta-section { background: var(--color-bg-dark); text-align: center; padding: 100px 0; }
.cta-section h2 { color: var(--color-text-on-dark); margin-bottom: 1rem; }
.cta-section p { color: var(--color-text-on-dark-muted); max-width: 600px; margin: 0 auto 2rem; font-size: 1.05rem; }
.cta-section__guarantees {
  margin-top: 2rem; display: flex; justify-content: center;
  flex-wrap: wrap; gap: 20px; font-size: .85rem; color: var(--color-text-on-dark-muted);
}
.cta-section__guarantees span::before { content: '✓ '; color: var(--color-accent); font-weight: 700; }
@media (max-width: 768px) {
  .cta-section { padding: 72px 0; }
}
@media (max-width: 480px) {
  .cta-section__guarantees { flex-direction: column; align-items: center; gap: 8px; }
}

/* ============================================================
   SHARED SERVICE-FOOTER COMPONENTS
   The four sections that appear on every Full Width page via
   template-parts/shared/service-footer.php. All four use semantic
   accent tokens so re-theming is one source of truth.
   ============================================================ */

/* ─── GUARANTEE ─── */
.guarantee-section { padding: 120px 0; }
.guarantee-section h2 { font-size: clamp(1.5rem, 3vw, 1.889rem); font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.guarantee-section__sub { color: var(--color-text-muted); font-size: .85rem; margin-bottom: 48px; }
.guarantee-section__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.guarantee-card {
  border-radius: var(--radius-md); padding: 28px;
  border: 1px solid transparent;
  background-image:
    linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 12px 12px;
}
.guarantee-card__num { font-size: clamp(.9rem, 1.5vw, 1.2rem); font-weight: 700; line-height: 1.1; margin-bottom: 8px; }
.guarantee-card__label { font-size: .85rem; line-height: 1.4; margin: 0; }

.guarantee-card--1 { background-color: var(--color-blue-tint);   border-color: var(--color-blue-tint-2); }
.guarantee-card--2 { background-color: var(--color-purple-tint); border-color: var(--color-purple-tint-2); }
.guarantee-card--3 { background-color: var(--color-yellow-tint); border-color: var(--color-yellow-tint-2); }
.guarantee-card--4 { background-color: var(--color-accent-tint); border-color: rgba(191,100,56,.15); }
.guarantee-card--full { grid-column: 1 / -1; background-color: var(--color-green-tint); border-color: rgba(46,138,82,.20); }

.guarantee-card--1 .guarantee-card__num, .guarantee-card--1 .guarantee-card__label { color: var(--color-blue); }
.guarantee-card--2 .guarantee-card__num, .guarantee-card--2 .guarantee-card__label { color: var(--color-purple-strong); }
.guarantee-card--3 .guarantee-card__num, .guarantee-card--3 .guarantee-card__label { color: var(--color-yellow); }
.guarantee-card--4 .guarantee-card__num, .guarantee-card--4 .guarantee-card__label { color: var(--color-accent-strong); }
.guarantee-card--full .guarantee-card__num, .guarantee-card--full .guarantee-card__label { color: var(--color-green-strong); }

@media (max-width: 1024px) { .guarantee-section { padding: 80px 0; } }
@media (max-width: 900px)  { .guarantee-section__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .guarantee-section__grid { grid-template-columns: 1fr; } }

/* ─── TESTIMONIALS ─── */
.testimonials { padding: 120px 0; }
.testimonials h2 { font-size: clamp(1.5rem, 3vw, 1.889rem); font-weight: 600; margin-bottom: 8px; }
.testimonials__sub { color: var(--color-text-muted); font-size: 15px; margin-bottom: 48px; }

.testimonial-card {
  position: relative; padding: 48px;
  border-radius: var(--radius-md); border: 1px solid var(--color-blue-tint-2);
  background-color: var(--color-blue-tint);
  background-image:
    linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 16px 16px;
  min-height: 280px;
  transition: background-color .4s, border-color .4s;
}
.testimonial-card--blue   { background-color: var(--color-blue-tint);   border-color: var(--color-blue-tint-2); }
.testimonial-card--purple { background-color: var(--color-purple-tint); border-color: var(--color-purple-tint-2); }
.testimonial-card--yellow { background-color: var(--color-yellow-tint); border-color: var(--color-yellow-tint-2); }

.testimonial-card__quote { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 400; line-height: 1.6; margin-bottom: 32px; color: var(--color-text); }
.testimonial-card__meta { display: flex; align-items: center; gap: 12px; }
.testimonial-card__name { font-weight: 700; font-size: .92rem; }
.testimonial-card__project { font-size: .82rem; color: var(--color-text-muted); }

.testimonials__nav { display: flex; gap: 8px; margin-top: 16px; }
.testimonials__nav button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg); cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.testimonials__nav button:hover { background: var(--color-bg-sand); }

.testimonials__cta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 20px; padding: 18px 28px;
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  flex-wrap: wrap; gap: 12px;
}
.testimonials__cta p { margin: 0; font-size: .88rem; color: var(--color-text-muted); }
.testimonials__cta a { font-size: .88rem; font-weight: 700; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

@media (max-width: 1024px) { .testimonials { padding: 80px 0; } }
@media (max-width: 600px)  { .testimonial-card { padding: 32px 24px; } }

/* ─── COUNTRY FLAGS ─── */
.flag-strip { padding: 80px 0 120px; text-align: center; overflow: hidden; }
.flag-strip__title { font-size: 16px; font-weight: 400; color: var(--color-text); margin-bottom: 60px; }
.flag-strip__rows { display: flex; flex-direction: column; gap: 20px; }
.flag-strip__row { position: relative; overflow: hidden; }
.flag-strip__row::before, .flag-strip__row::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none;
}
.flag-strip__row::before { left: 0;  background: linear-gradient(to right, var(--color-bg), transparent); }
.flag-strip__row::after  { right: 0; background: linear-gradient(to left,  var(--color-bg), transparent); }

.flag-strip__track { display: flex; align-items: center; width: max-content; will-change: transform; }
.flag-strip__track:hover { animation-play-state: paused; }
.flag-strip__track--left  { animation: flag-left  105s linear infinite; }
.flag-strip__track--right { animation: flag-right 105s linear infinite; }
@keyframes flag-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes flag-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.flag-strip__item {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  flex-shrink: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  padding: 11px 20px;
  min-width: 224px;
  margin-right: 16px;
}
.flag-strip__emoji { font-size: 1rem; line-height: 1; }
.flag-strip__name { font-size: .6rem; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }

@media (max-width: 1024px) { .flag-strip { padding: 56px 0 80px; } }
@media (max-width: 768px) {
  .flag-strip { padding: 48px 0 60px; }
  .flag-strip__title { font-size: .85rem; margin-bottom: 32px; padding: 0 20px; }
  .flag-strip__item {
    min-width: 100px;
    padding: 10px 12px;
    gap: 6px;
    margin-right: 10px;
  }
  .flag-strip__name { font-size: .55rem; }
}

/* ─── BOTTOM CTA BAND — two-column layout matching home.html
   Left: copy + primary/secondary CTAs (left-aligned).
   Right: a stacked document graphic (.code-card--back rotated under
   .code-card--front with a code preview). Below 900px the visual is
   hidden and the layout collapses to one column. */
.cta-band {
  background: var(--color-accent-tint);
  background-image:
    linear-gradient(rgba(191,100,56,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,100,56,.08) 1px, transparent 1px);
  background-size: 16px 16px;
  padding: 80px 72px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
}
.cta-band__left h2 { font-size: clamp(1.5rem, 3vw, 1.889rem); font-weight: 700; color: var(--color-text); margin-bottom: 20px; line-height: 1.2; }
.cta-band__left p { color: var(--color-text-muted); margin-bottom: 36px; font-size: 1rem; line-height: 1.7; }
.cta-band__buttons { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cta-band__btn--primary {
  background: var(--color-accent); color: var(--color-bg);
  padding: 14px 28px; border-radius: 10px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  display: inline-block; transition: opacity .2s;
}
.cta-band__btn--primary:hover { opacity: .85; color: var(--color-bg); }
.cta-band__btn--secondary {
  color: var(--color-text); font-weight: 600; font-size: .95rem;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 4px;
  border-bottom: 2px solid var(--color-text);
  line-height: 1;
  transition: opacity .2s;
}
.cta-band__btn--secondary:hover { opacity: .7; color: var(--color-text); }

.cta-band__visual {
  position: relative;
  height: 269px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Document graphic — pair of stacked code cards inside .cta-band__visual.
   Same component will be reused by other sections that show a doc
   preview, so the rules live in style.css (global). */
.code-card {
  position: absolute;
  background: var(--color-bg);
  border-radius: 14px;
  box-shadow: 0 6px 32px rgba(0,0,0,.13);
  padding: 16px 20px;
}
.code-card--back {
  width: 260px;
  top: 0; right: 0;
  transform: rotate(4deg);
  transform-origin: top right;
}
.code-card--front {
  width: 295px;
  top: 8px; left: 0;
  padding: 12px 16px;
}
.code-card__filebar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.code-card__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-bg);
  flex-shrink: 0;
  font-weight: 800;
}
.code-card__icon--word {
  background: #2B7CD3;
  font-size: 1.1rem; font-weight: 900;
  font-family: serif;
}
.code-card__icon--tex {
  background: #2D6A4F;
  font-size: .68rem; font-weight: 800;
  font-family: monospace;
  letter-spacing: -.5px;
}
.code-card__filename { font-size: .85rem; font-weight: 700; color: var(--color-text); margin-bottom: 2px; font-family: monospace; }
.code-card__filetype { font-size: .72rem; color: #9CA3AF; }
.code-card__separator { border: none; border-top: 1px solid #F0F0F0; margin: 0 0 6px; }
.code-card__code { font-family: monospace; font-size: .63rem; line-height: 1.5; display: flex; flex-direction: column; }
.code-card__token--purple  { color: #7C3AED; }
.code-card__token--blue    { color: #2563EB; }
.code-card__token--teal    { color: #0D9488; }
.code-card__token--comment { color: #9CA3AF; }
.code-card__badge {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  background: #D1FAE5; color: #065F46;
  font-size: .68rem; font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid #A7F3D0;
}

@media (max-width: 900px) {
  .cta-band { grid-template-columns: 1fr; }
  .cta-band__visual { display: none; }
}
@media (max-width: 768px) { .cta-band { padding: 48px 24px; } }
@media (max-width: 480px) {
  .cta-band { padding: 40px 20px; }
  .cta-band__buttons { flex-direction: column; align-items: stretch; }
  .cta-band__btn--primary { text-align: center; }
  .cta-band__btn--secondary { align-self: flex-start; }
}

/* ============================================================
   PRICING CARDS — shared component (lifted to global).

   Used on pricing (4 paper-pack tiers + 3 thesis tiers) and any
   future service or landing page that lists pricing tiers. Layout
   gridding lives in the calling chunk; only the card itself and
   its variants ship here.

   Variant naming: `--featured` is the visually-promoted card with a
   green halo. The `--neutral-1 / --neutral-2 / --custom` modifiers
   tint the head band (sand / blue / purple respectively), and a
   matching `.pricing-card__check--*` paints the checklist tick.
   ============================================================ */
.pricing-card {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .25s;
}
.pricing-card:hover { box-shadow: var(--shadow-card); }
.pricing-card--featured { box-shadow: var(--shadow-feature); }
.pricing-card--featured:hover {
  box-shadow:
    0 0 0 3px rgba(46,138,82,.14),
    0 10px 40px rgba(46,138,82,.14);
}

.pricing-card__head {
  position: relative;
  padding: 28px 32px 24px;
}
.pricing-card__head--neutral-1 { background: var(--color-bg-warm); }
.pricing-card__head--neutral-2 { background: var(--color-blue-tint); }
.pricing-card__head--featured  { background: var(--color-green-tint); }
.pricing-card__head--custom    { background: var(--color-purple-tint); }

.pricing-card__most-popular {
  display: inline-flex; align-items: center;
  width: fit-content;
  padding: 3px 10px;
  margin-bottom: 10px;
  background: var(--color-green); color: var(--color-bg);
  border-radius: var(--radius-pill);
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}

.pricing-card__title {
  font-size: 1.2rem; font-weight: 600;
  line-height: 1.2; letter-spacing: -.02em;
  color: var(--color-text);
}

.pricing-card__body {
  display: flex; flex-direction: column;
  flex: 1;
  padding: 28px 32px 32px;
}
.pricing-card__price-row {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 24px;
}
.pricing-card__from {
  font-size: .76rem; font-weight: 400;
  color: var(--color-text-muted);
}
.pricing-card__price {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.05em; line-height: 1;
  color: var(--color-text);
}
.pricing-card__price--custom { letter-spacing: -.03em; }
.pricing-card__intro {
  font-size: .82rem; line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.pricing-card__feats {
  list-style: none;
  display: flex; flex-direction: column; gap: 11px;
  flex: 1;
  margin-bottom: 24px;
}
.pricing-card__feats li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .88rem; line-height: 1.4;
  color: var(--color-text);
}
.pricing-card__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; min-width: 20px;
  margin-top: 1px;
  border-radius: 6px;
  font-size: .6rem; font-weight: 900;
  flex-shrink: 0;
}
.pricing-card__check--neutral-1 { background: var(--color-border-subtle); color: var(--color-text-on-dark-subtle); }
.pricing-card__check--neutral-2 { background: var(--color-blue-tint-2);   color: var(--color-blue); }
.pricing-card__check--featured  { background: var(--color-green-tint-2);  color: var(--color-green-strong); }
.pricing-card__check--custom    { background: var(--color-purple-tint-2); color: var(--color-purple-strong); }

.pricing-card__note {
  font-size: .74rem; font-style: italic;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.pricing-card__ctas {
  display: flex; gap: 8px;
  margin-top: auto;
}
.pricing-card__ctas .pricing-card__cta { flex: 1; }
.pricing-card__cta {
  display: block;
  padding: 13px 20px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font-size: .88rem; font-weight: 600;
  transition: background .2s, opacity .2s;
}
.pricing-card__cta--green {
  background: var(--color-green); color: var(--color-bg);
  border: 1px solid var(--color-green);
}
.pricing-card__cta--green:hover { opacity: .85; color: var(--color-bg); }
.pricing-card__cta--outline {
  background: var(--color-bg-subtle); color: var(--color-text);
  border: none;
}
.pricing-card__cta--outline:hover { background: var(--color-bg-warm); color: var(--color-text); }
.pricing-card__cta--book {
  background: transparent; color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-weight: 500;
}
.pricing-card__cta--book:hover { background: var(--color-bg-warm); color: var(--color-text); }

/* On mobile, stack the CTAs vertically instead of cramming them
   side-by-side. Two ~half-width buttons at 360-400px viewport read
   as oddly narrow and the labels can wrap to two lines; full-width
   stacked buttons are taller-tap-target friendly and visually
   match the rest of the mobile UI. */
@media (max-width: 768px) {
  .pricing-card__ctas { flex-direction: column; }
}

/* ─── Pricing-card body variant: rows table (Thesis tier and any
   future tier that lists spec rows instead of a feature checklist).
   Same .pricing-card base — only the body content swaps from
   .pricing-card__feats to .pricing-card__rows. */
.pricing-card__delivery {
  font-size: .82rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}
.pricing-card__rows {
  display: flex; flex-direction: column;
  gap: 12px;
  flex: 1;
  margin-bottom: 22px;
}
.pricing-card__row {
  display: flex; justify-content: space-between;
  font-size: .88rem;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.pricing-card__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.pricing-card__row-label { color: var(--color-text-muted); }
.pricing-card__row-value { color: var(--color-text); font-weight: 600; }
.pricing-card__slots {
  display: flex; align-items: center; gap: 7px;
  margin-top: 14px;
  font-size: .78rem;
  color: var(--color-green);
}
.pricing-card__slots::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  display: inline-block;
}

/* ============================================================
   DELIVERY-TIER — shared component (lifted to global).

   A bordered card with a coloured head band (icon + label), a stack
   of label/value rows separated by hairlines, and an optional foot
   strip. Used for "How it works" process timelines, "Every project
   includes" feature lists, delivery-step explainers — anywhere a
   labelled tier with structured rows is needed.

   Used on pricing (2 sections) and every service page (process +
   includes blocks), so lives in style.css per the locked placement.
   ============================================================ */
.delivery-section { padding: 80px 0; }
.delivery-section h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 6px;
}
.delivery-section__sub {
  font-size: .94rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 540px;
  margin-bottom: 32px;
}

.delivery-tier {
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.delivery-tier__head {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 28px;
}
.delivery-tier__head--orange { background: var(--color-accent-tint); }
.delivery-tier__head--green  { background: var(--color-green-tint); }
.delivery-tier__head--purple { background: var(--color-purple-tint); }

.delivery-tier__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  color: var(--color-bg);
}
.delivery-tier__icon--orange { background: var(--color-accent); }
.delivery-tier__icon--green  { background: var(--color-green); }
.delivery-tier__icon--purple { background: var(--color-purple); }

.delivery-tier__head-label {
  font-size: 1rem; font-weight: 700;
  letter-spacing: -.02em;
}
.delivery-tier__label--orange { color: var(--color-accent-strong); }
.delivery-tier__label--green  { color: var(--color-green-strong); }
.delivery-tier__label--purple { color: var(--color-purple-strong); }

.delivery-tier__row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px;
  padding: 22px 28px;
  border-top: 1px solid var(--color-border-subtle);
  transition: background .15s;
}
.delivery-tier__row:hover { background: var(--color-bg-subtle); }

.delivery-tier__col--left {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1; min-width: 0;
}
.delivery-tier__col--right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0;
  text-align: right;
}

.delivery-tier__name {
  font-size: .92rem; font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}
.delivery-tier__desc {
  font-size: .8rem; line-height: 1.55;
  color: var(--color-text-muted);
}
.delivery-tier__value {
  font-size: .92rem; font-weight: 700;
  white-space: nowrap;
  color: var(--color-text);
}
.delivery-tier__value--green  { color: var(--color-green); }
.delivery-tier__value--accent { color: var(--color-accent); }
.delivery-tier__value--muted {
  font-size: .8rem; font-weight: 500;
  color: var(--color-text-muted);
}

.delivery-tier__strike {
  font-size: .78rem;
  color: var(--color-border);
  text-decoration: line-through;
  white-space: nowrap;
}

.delivery-tier__foot {
  padding: 18px 28px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
  font-size: .84rem; line-height: 1.55; font-style: italic;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .delivery-tier__row {
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
  }
  .delivery-tier__col--right {
    align-items: flex-start;
    text-align: left;
  }
  .delivery-tier__head,
  .delivery-tier__foot { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   SERVICE CTA BAND — shared component (global).

   The sidebar/inline call-out used on single blog posts and every
   service page: a tinted band on top of a card with heading, tagline,
   hairline divider, primary CTA, and a ghost link. The wrapper class
   is .sidebar-cta when sticky in a blog sidebar; the inner cluster
   uses .service-cta-band__* throughout.
   ============================================================ */
.sidebar-cta {
  background: var(--color-bg);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  padding: 0 0 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
}
/* Mint checkerboard band at top of sidebar CTA — matches the
   single-blog-post source. Two green tints from the brand palette. */
.service-cta-band__band {
  height: 56px;
  width: 100%;
  margin-bottom: 20px;
  background-color: var(--color-green-tint-2);
  background-image:
    linear-gradient(45deg,  var(--color-green-tint) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-green-tint) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, var(--color-green-tint) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-green-tint) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.service-cta-band__body { padding: 0 20px; }
.sidebar-cta h3 {
  font-size: .88rem; font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: 8px;
}
.service-cta-band__tagline {
  font-size: .76rem; line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.service-cta-band__divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 16px 0;
}
.service-cta-band__btn--primary {
  display: block;
  text-align: center;
  padding: 11px 16px;
  margin-bottom: 8px;
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.service-cta-band__btn--primary:hover {
  background: var(--color-bg-warm);
  color: var(--color-text);
}
.service-cta-band__btn--ghost {
  display: block;
  text-align: center;
  padding: 8px;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  font-size: .78rem; font-weight: 600;
  text-decoration: none;
  transition: color .2s;
}
.service-cta-band__btn--ghost:hover { color: var(--color-accent); }

/* ============================================================
   BLOG CARD — shared component (global).

   Linked card used on the blog index grid AND inside the single
   post's Related section. Same markup contract everywhere:
     <a class="blog-card" href="...">
       <div class="blog-card-thumb">[<img>]</div>
       <div class="blog-card-body">
         <time>...</time>
         <h3>...</h3>
         <div class="blog-tags"><span class="blog-tag">…</span></div>
       </div>
     </a>

   .blog-card.is-hidden (JS filter state) lives in blog.css since it's
   blog-index only.
   ============================================================ */
.blog-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .25s;
}
.blog-card:hover { box-shadow: var(--shadow-card); }
.blog-card-thumb {
  aspect-ratio: 1000 / 450;
  background: var(--color-bg-warm);
  overflow: hidden;
}
.blog-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.blog-card-body { padding: 20px 22px 24px; }
.blog-card-body time {
  display: block;
  font-size: .76rem; font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.blog-card-body h3 {
  font-size: 1rem; font-weight: 700;
  line-height: 1.35;
  margin: 0 0 12px;
}
.blog-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.blog-tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  background: var(--color-bg-sand);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 500;
  color: var(--color-text-muted);
}

/* ============================================================
   HERO — shared between home page and every Option A service
   page. Lifted from home.css when the first service page
   shipped (commit "Service page: word-to-latex"). Variant for
   the text-only pricing hero remains in pricing.css as
   .hero-pricing.
   ============================================================ */
.hero {
  position: relative; isolation: isolate;
  padding: 120px 0 0;
  text-align: center;
}
.hero__stack {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px;
}

.hero-grid-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(circle, rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero-aurora {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  /* Promote to its own compositor layer so the heavy blur(100px)
     paint on the blobs doesn't redraw with surrounding content
     during scroll. Subtle but visible jitter fix. */
  transform: translateZ(0);
}
.hero-aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.hero-aurora__blob--green {
  width: 800px; height: 600px;
  background: radial-gradient(circle, rgba(16,163,127,.28), transparent 65%);
  top: -200px; left: -100px;
}
.hero-aurora__blob--blue {
  width: 700px; height: 550px;
  background: radial-gradient(circle, rgba(120,100,255,.22), transparent 65%);
  top: -150px; right: -80px;
}
.hero-aurora__blob--pink {
  width: 600px; height: 500px;
  background: radial-gradient(circle, rgba(200,120,255,.16), transparent 65%);
  top: 80px; right: 10%;
}

@keyframes badge-shimmer {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(16,163,127,.15), 0 0 16px 0 rgba(16,163,127,0); }
  50%      { box-shadow: 0 0 0 1.5px rgba(16,163,127,.45), 0 0 20px 2px rgba(16,163,127,.08); }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.03);
  border-radius: var(--radius-pill);
  font-size: .8rem; font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
  animation: badge-shimmer 3s ease-in-out infinite;
}
.hero-badge:hover { color: var(--color-text); }
.hero-badge img {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.05em;
  max-width: 1100px;
  margin: 0 auto;
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
}
.hero-tag {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: -.02em;
  margin: 0;
}
.hero-sub {
  max-width: 720px; margin: 16px auto 28px;
  font-size: 1rem; font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.hero-sub p { margin: 0 0 8px; }
.hero-sub p:last-child { margin-bottom: 0; }

.hero-note {
  margin: 0;
  max-width: 720px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.hero-img-wrap {
  position: relative;
  margin-top: 120px;
  background: #eef7f2;
  border-top: 1px solid var(--color-border-subtle);
}
.hero-img-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(16,163,127,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,163,127,.07) 1px, transparent 1px);
  background-size: 12px 12px;
}
.hero-img-inner {
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  padding: 40px 24px;
}
.hero-img-inner img {
  max-width: 1160px;
  width: 100%; height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 40px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  border: 1px solid var(--color-border-subtle);
}

@media (max-width: 768px) {
  .hero { padding: 80px 0 40px; }
  .hero-badge {
    font-size: .73rem;
    padding: 5px 12px;
    gap: 6px;
  }
  .hero-badge img { width: 20px; height: 20px; }
  .hero-img-wrap { margin-top: 60px; }
  .hero-img-inner { padding: 28px 16px; }
  .hero-img-inner img { max-width: 100%; }
}
@media (max-width: 480px) {
  .hero { padding: 60px 0 0; }
  .hero-img-wrap { margin-top: 40px; }
  .hero h1 { font-size: 1.8rem; letter-spacing: -.03em; }
  /* Allow the badge to wrap at portrait phone widths so longer
     badge copy (e.g. ACM page) doesn't force horizontal page scroll. */
  .hero-badge {
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    max-width: 100%;
  }
}

/* ============================================================
   HERO — text-only two-column variant (.hero-pricing).

   Editorial hero used on the Pricing page and the Project Stories
   page: copy on the left (h1 + sub-paragraph), 3×2 publisher-logo
   grid on the right. Single-column below 900px, hero padding
   collapses below 768px.

   Lifted here from pricing.css when Project Stories became a second
   consumer (2+ chunks → global per COMPONENT-INVENTORY.md). Naming
   stays `.hero-pricing` because the cluster name is locked in
   THEME-NAMING.md and a rename would touch every existing pricing
   reference for no user-visible benefit.

   Distinct from the global `.hero` cluster above (which carries
   aurora blobs + preview image) and from `.blog-hero` (centered
   editorial hero with floating math glyphs).
   ============================================================ */
.hero-pricing { padding: 130px 0 0; }
.hero-pricing .hero-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: center;
  padding-bottom: 24px;
}
.hero-pricing h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.25;
  margin-bottom: 14px;
}
.hero-pricing .hero-sub {
  font-size: .94rem;
  color: var(--color-text-muted);
  max-width: 520px;
  line-height: 1.7;
  /* Reset the `auto` horizontal margin inherited from the global
     .hero-sub rule (which centers the block on the homepage/service
     heroes). This hero is two-column with copy left-aligned to the
     h1, so anchor the paragraph to the left edge here. */
  margin: 16px 0 28px;
}
.hero-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  align-items: center;
}
.hero-logos img {
  height: 120px;
  width: 100%;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .hero-pricing .hero-inner { grid-template-columns: 1fr 320px; gap: 48px; }
}
@media (max-width: 900px) {
  .hero-pricing .hero-inner { grid-template-columns: 1fr; }
  .hero-logos { gap: 20px; }
  .hero-logos img { height: 72px; }
}
@media (max-width: 768px) {
  .hero-pricing { padding: 48px 0 0; }
  .hero-pricing .hero-inner { gap: 40px; padding-bottom: 24px; }
}

/* ============================================================
   INSIGHT CALLOUT — editorial pull-quote aside used inside the
   service-intro copy. Warm-tinted block with an accent rail.
   ============================================================ */
.insight {
  margin: 24px 0;
  padding: 22px 26px;
  background: var(--color-bg-warm);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: .92rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.insight strong { color: var(--color-text); font-weight: 700; }

/* ============================================================
   LEGAL PAGE — long-form text layout for Privacy, Terms,
   Refund, Cookies, and similar policy pages. Rendered on the
   default page.php template (no Full-Width service-footer).
   Single-column, ~760px max width, designed to survive WP's
   wpautop / wptexturize filters: rules target tags directly
   so loose paragraphs auto-wrapped by WP still inherit the
   correct rhythm.
   ============================================================ */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 40px 100px;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.7;
}
.legal-page__header {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.legal-page__header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.2;
  margin: 0 0 10px;
}
.legal-page__meta {
  margin: 0;
  font-size: .85rem;
  color: var(--color-text-muted);
}
.legal-page h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 48px 0 14px;
}
.legal-page h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 28px 0 10px;
}
.legal-page p { margin: 0 0 14px; }
.legal-page ul,
.legal-page ol {
  margin: 0 0 16px;
  padding-left: 1.4em;
}
.legal-page li { margin-bottom: 6px; line-height: 1.65; }
.legal-page a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-page a:hover { color: var(--color-accent-hover); }
.legal-page strong { color: var(--color-text); font-weight: 700; }
.legal-page .insight { margin-top: 40px; }
@media (max-width: 768px) {
  .legal-page { padding: 80px 20px 60px; }
  .legal-page h2 { margin-top: 40px; }
}

/* ============================================================
   TEMPLATES — dark band inside the corridor. 2×2 grid of
   category cards plus a CTA panel below. Used by home and
   every service page; lifted from home.css alongside the hero.
   ============================================================ */
.templates {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: 96px 40px;
}
.templates h2 {
  font-size: clamp(1.44rem, 2.6vw, 1.94rem);
  font-weight: 600;
  color: var(--color-text-on-dark);
  margin-bottom: 12px;
}
.templates-grid__sub {
  color: var(--color-text-on-dark-muted);
  margin-bottom: 40px;
  font-size: calc(.95rem - 2px);
  max-width: 680px;
}
.templates-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: var(--radius-md);
}
.template-card {
  padding: 36px;
  background: transparent;
  border-right: 1px dashed rgba(255,255,255,.1);
  border-bottom: 1px dashed rgba(255,255,255,.1);
  transition: background .2s;
}
.template-card:hover { background: rgba(255,255,255,.02); }
.template-card:nth-child(2n) { border-right: none; }
.template-card:nth-child(n+3) { border-bottom: none; }
.template-card h3 {
  font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  color: var(--color-text-on-dark);
  margin-bottom: 10px;
}
.template-card p {
  font-size: .88rem; line-height: 1.6; margin: 0;
  color: var(--color-text-on-dark-muted);
}
.template-card a {
  color: var(--color-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.template-cta {
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}
.template-cta p {
  margin: 0; max-width: 520px;
  font-size: .92rem;
  color: var(--color-text-on-dark-muted);
}

@media (max-width: 1024px) { .templates { padding: 80px 32px; } }
@media (max-width: 768px) {
  .templates { padding: 64px 20px; }
  .templates-grid { grid-template-columns: 1fr; }
  .template-card { border-right: none; }
  .template-card:nth-child(n+1) { border-bottom: 1px dashed rgba(255,255,255,.1); }
  .template-card:last-child { border-bottom: none; }
  .template-cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PRICING SECTION WRAPPER — section heading + sub + 2-col grid
   used by the service-page pricing block. The .pricing-card
   cluster above is the source of truth for the card itself.
   Lifted from pricing.css so service pages can reuse without
   pulling the entire pricing chunk.
   ============================================================ */
.pricing-section { padding: 80px 0; }
.pricing-section h2 {
  font-size: clamp(1.5rem, 3vw, 1.889rem);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.pricing-sub {
  margin: 0 0 32px;
  max-width: 720px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
/* 3-col variant — used when a pricing block ships 3 native tiers
   (e.g. the Build Doctor page; same shape as the pricing page's
   `.thesis-tiers` cluster, but as a modifier on the global grid so
   it composes anywhere `.pricing-cards-grid` does). */
.pricing-cards-grid--3col {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .pricing-cards-grid,
  .pricing-cards-grid--3col { grid-template-columns: 1fr; }
}

.pricing-note {
  margin: 28px 0 0;
  max-width: 760px;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.pricing-note a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pricing-note strong { color: var(--color-text); font-weight: 700; }