/*
Theme Name: AoC Theme v2
Theme URI: https://anatomyofaclinician.com
Author: Courtney LaSumner Bass, MSN, APRN, AGPCNP-BC
Author URI: https://anatomyofaclinician.com/about/
Description: Custom block theme for Anatomy of a Clinician — mechanism-first clinical reasoning and certification preparation for RNs and APRNs in high-acuity practice. v2.0.0 introduces the modern clinical SaaS design canon (teal/coral, Geist + Inter Tight + JetBrains Mono). Scoped to CCRN, CEN, TCRN, CFRN lanes. ANCC accreditation pending.
Version: 2.0.0-alpha.21
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary — All Rights Reserved
License URI: https://anatomyofaclinician.com/legal/
Text Domain: aoc-theme
Tags: block-theme, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, threaded-comments, translation-ready, wide-blocks

This is a private theme for anatomyofaclinician.com.
Do not redistribute.
*/

/* =========================================================================
   AoC Theme v2.0.0-alpha.8 — THE FIX: S3 page-template CSS now present
   Root cause of "every page broken" reported 2026-05-19: every v2 page
   template (front-page, page-lane, page-about, page-beta-signup, page-library)
   uses layout primitives like .section, .section-soft, .section-dark, .lede,
   .fineprint, .btn-light-ghost, .four-layer, .check-list, plus per-template
   wrappers (.lane-body, .about-body, .beta-body, .library-domains). None of
   those classes had CSS rules — S3 was planned but never written. Result:
   the templates rendered, assets loaded, theme.json parsed, but every
   section-level container was unstyled. Visual coverage diagnostic found
   ~436 used class tokens with no CSS rule.

   alpha.8 follow-up fix: the six preview blocks were originally scoped
   to .aoc-v2-home (from the preview HTML files' body class), but the
   theme's body_class filter emits .aoc-v2. 225 selectors un-prefixed
   from .aoc-v2-home to .aoc-v2 so they match the body class actually
   in use. CSS variable values in :root and .aoc-v2 are identical →
   no cascade collisions. Coverage verification post-fix: 0 unstyled
   theme classes on home, library, all 4 lanes, about. Blog index has
   65 unstyled tokens, all third-party (Jetpack/Swiper) or WP core
   post-class names — not theme responsibility.

   alpha.9 fixes (comprehensive audit pass):
     1. Duplicate <title> on every page — Yoast + theme both emitted.
        Fix: remove _wp_render_title_tag on wp_loaded when Yoast active
        (inc/seo-meta.php).
     2. Missing meta description on every page — Yoast had nothing.
        Fix: 3-tier fallback (excerpt → content[160] → site default).
     3. Blog index rendered 10 H1s — index.html post-title was level=1.
        Fix: created proper templates/home.html with level=2; fixed
        index.html fallback too.
     4. v1 preset slug content on 18 pages rendered unstyled — v2
        theme.json doesn't define aoc-navy/aoc-text-2/aoc-eyebrow/etc.
        Fix: section 27 — v1 preset compat shim (CSS vars + has-X-color
        rules + component classes mapped to v2 tokens).
     5. .byline--compact variant never styled — formalised.
   S1: tokens, resets, typography, buttons, container, promo bar, header,
       mobile menu, footer, back-to-top FAB, hamburger, reveal, a11y.
   S2: article hero/byline/TOC/content, related posts, prev-next, bottom-cta,
       blog hero, featured post card, post-card grid, pagination, error hero,
       search input, recovery cards, search results.
   S3 (new in alpha.8): page-template components for front-page, library,
       lane, about, beta-signup, plus invented classes (.lede, .fineprint,
       .check-list, .four-layer) for migrated page content. Extracted from
       v2 design previews and deduplicated against existing S1/S2 rules.
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   These mirror theme.json presets and add short aliases for template CSS.
   The brand canon was locked 2026-05-18 (v2): teal/coral/Geist.
   ========================================================================= */
:root {
  /* ---- Color: Surface ---- */
  --bg: #FFFFFF;
  --bg-soft: #F7F8FA;
  --bg-soft-2: #EEF1F4;
  --bg-dark: #0A0E14;

  /* ---- Color: Ink (text) ---- */
  --ink: #0A0E14;
  --ink-2: #3D4451;
  --ink-3: #6B7280;
  --ink-mute: #9CA3AF;

  /* ---- Color: Borders ---- */
  --border: #E5E7EB;
  --border-soft: #F0F2F5;
  --border-strong: #D1D5DB;

  /* ---- Color: Primary brand (teal) ---- */
  --teal: #0E7C7B;
  --teal-dk: #0A5E5D;
  --teal-tn: #E6F2F2;
  --teal-50: #F0F8F7;

  /* ---- Color: CTA (coral) ---- */
  --coral: #E8593F;
  --coral-dk: #C84229;
  --coral-tn: #FEEAE5;

  /* ---- Color: Status semantics ---- */
  --critical: #B42D25;
  --success: #1E7247;
  --warning: #B45309;
  --error: #DC2626;
  --error-tn: #FEF2F2;
  --success-tn: #F0FDF4;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(10, 14, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 14, 20, 0.04), 0 1px 3px rgba(10, 14, 20, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(10, 14, 20, 0.05), 0 10px 15px -3px rgba(10, 14, 20, 0.08);
  --shadow-lg: 0 10px 20px -5px rgba(10, 14, 20, 0.08), 0 20px 25px -5px rgba(10, 14, 20, 0.06);
  --shadow-xl: 0 20px 40px -10px rgba(10, 14, 20, 0.12), 0 30px 60px -20px rgba(10, 14, 20, 0.08);

  /* ---- Typography: Fluid type scale ---- */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-prose: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --fs-lg:   clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --fs-xl:   clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  --fs-3xl:  clamp(1.875rem, 1.7rem + 0.85vw, 2.5rem);
  --fs-4xl:  clamp(2.25rem, 1.9rem + 1.7vw, 3.5rem);
  --fs-5xl:  clamp(2.75rem, 2.2rem + 2.6vw, 4.75rem);

  /* ---- Typography: Font families ---- */
  --ff-display: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- Container widths ---- */
  --container: 1240px;
  --container-narrow: 880px;

  /* ---- Motion easings ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Z-index scale ---- */
  --z-promo: 90;
  --z-header: 100;
  --z-fab: 80;
  --z-overlay: 200;
}


/* =========================================================================
   2. RESET + BASE
   Minimal reset; pairs with theme.json's block defaults.
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
picture,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Visually hidden — for screen readers only */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Skip link (a11y) — visible on focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* Focus visible — keyboard-only */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}


/* =========================================================================
   3. TYPOGRAPHY
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}

h1 { font-size: var(--fs-5xl); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: var(--fs-4xl); letter-spacing: -0.03em;  line-height: 1.05; }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0; }

.display {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
}

.mono {
  font-family: var(--ff-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}


/* =========================================================================
   4. CONTAINER
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
}


/* =========================================================================
   5. BUTTONS
   Pill buttons (border-radius: 999px). Coral primary, teal secondary.
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 200ms var(--ease-out);
  text-decoration: none;
}

.btn-primary {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}
.btn-primary:hover {
  background: var(--coral-dk);
  border-color: var(--coral-dk);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(232, 89, 63, 0.45);
}

.btn-secondary {
  background: transparent;
  color: var(--teal-dk);
  border-color: var(--teal);
}
.btn-secondary:hover {
  background: var(--teal-tn);
  border-color: var(--teal-dk);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: var(--bg-soft);
  border-color: var(--ink);
}

.btn-dark {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn-dark:hover {
  background: #1f2530;
  border-color: #1f2530;
}

.btn-light-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn-light-ghost:hover {
  background: var(--bg-soft);
  border-color: var(--ink-3);
  color: var(--ink);
}

.btn-lg {
  padding: 14px 28px;
  font-size: var(--fs-base);
}

.btn-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms var(--ease-out);
}
.btn-arrow:hover svg {
  transform: translateX(3px);
}


/* =========================================================================
   6. LOGO
   Used in both header and footer (with color override in footer).
   ========================================================================= */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.logo-mark {
  width: 30px;
  height: 30px;
  background: var(--ink);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: -0.04em;
}


/* =========================================================================
   7. PROMO BAR
   Top status strip with pulsing coral dot.
   Driven by 'aoc_launch_state' option in S4 — for S1, static markup.
   ========================================================================= */
.promo-bar {
  background: var(--ink);
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-size: var(--fs-xs);
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
  position: relative;
  z-index: var(--z-promo);
}

.promo-bar-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.promo-bar a {
  color: var(--coral);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.promo-bar a:hover {
  color: #fff;
}

.promo-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--coral);
  border-radius: 50%;
  margin: 0 12px;
  vertical-align: middle;
  animation: aoc-promo-pulse 2.2s ease-in-out infinite;
}

/* @-rule kept top-level (engineering lesson from v6+ regression) */
@keyframes aoc-promo-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* Alias: many selectors reference 'promo-pulse' without the 'aoc-' prefix.
   Duplicated from the aoc-v2-home-preview block (line ~4242) so the core
   section is self-contained. */
@keyframes promo-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* Gentle vertical float for hero chips.
   Duplicated from the aoc-v2-home-preview block (line ~4257) so the core
   section is self-contained. */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Spinner rotation — used by .submit-btn .spinner (core beta form). */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Success-card pop-in — used by .signup-success-icon (core beta form). */
@keyframes success-pop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}


/* =========================================================================
   8. HEADER
   Sticky frosted header with logo, nav, CTA, hamburger.
   Scroll-shadow toggled by JS (.scrolled class).
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border-soft);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.site-header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: var(--space-8);
}

.site-nav {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.site-nav-link {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  transition: color 150ms ease;
  position: relative;
  text-decoration: none;
}
.site-nav-link:hover,
.site-nav-link[aria-current="page"] {
  color: var(--ink);
}

.site-header-cta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.site-nav-text {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
}
.site-nav-text:hover {
  color: var(--ink);
}

.site-nav-item {
  position: relative;
}
.site-nav-item-has-submenu .site-nav-link-parent::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transition: transform 150ms ease;
}
.site-nav-item-has-submenu:hover .site-nav-link-parent::after,
.site-nav-item-has-submenu:focus-within .site-nav-link-parent::after {
  transform: rotate(180deg);
}
.site-nav-submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 168px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  z-index: calc(var(--z-header) + 2);
}
.site-nav-item-has-submenu:hover .site-nav-submenu,
.site-nav-item-has-submenu:focus-within .site-nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-nav-sublink {
  display: block;
  padding: 8px 12px;
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 150ms ease, color 150ms ease;
}
.site-nav-sublink:hover,
.site-nav-sublink:focus-visible {
  background: var(--bg-soft);
  color: var(--ink);
}


/* =========================================================================
   9. HAMBURGER
   Hidden on desktop; visible ≤880px.
   Component base FIRST, responsive override AFTER (source-order rule).
   ========================================================================= */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  border-radius: var(--radius-sm);
  transition: background 150ms ease;
}
.hamburger:hover {
  background: var(--bg-soft);
}

.hamburger span {
  display: block;
  position: absolute;
  left: 10px;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 19px; }
.hamburger span:nth-child(3) { top: 24px; }


/* =========================================================================
   10. MOBILE MENU OVERLAY
   Full-screen overlay activated by hamburger.
   ========================================================================= */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 0s;
}

.mobile-menu-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 350ms var(--ease-out) 50ms, opacity 350ms var(--ease-out) 50ms;
}
.mobile-menu.open .mobile-menu-inner {
  transform: translateY(0);
  opacity: 1;
}

.mobile-menu-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  background: var(--bg-soft);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background 150ms ease;
}
.mobile-menu-close:hover {
  background: var(--bg-soft-2);
}
.mobile-menu-close svg {
  width: 18px;
  height: 18px;
}

.mobile-nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-4);
}

.mobile-nav-link {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
  text-decoration: none;
  transition: color 150ms ease, transform 200ms var(--ease-out);
  display: inline-block;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  color: var(--teal);
  transform: translateX(4px);
}

.mobile-nav-link-mute {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink-3);
  font-family: var(--ff-body);
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}

.mobile-nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mobile-nav-sub {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-soft);
}
.mobile-nav-sublink {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 150ms ease, transform 200ms var(--ease-out);
}
.mobile-nav-sublink:hover,
.mobile-nav-sublink:focus-visible {
  color: var(--teal);
  transform: translateX(4px);
}


.mobile-menu-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
}

.mobile-menu-cta {
  width: 100%;
  justify-content: center;
}

.mobile-menu-foot-meta {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Lock body scroll when menu is open */
body.menu-open {
  overflow: hidden;
}


/* =========================================================================
   11. FOOTER
   4-col grid: brand · lanes · platform · company.
   Bottom strip with copyright and disclaimer.
   ========================================================================= */
.site-footer {
  background: var(--ink);
  color: #B8BFCB;
  padding: var(--space-16) 0 var(--space-8);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.site-footer-brand .logo {
  color: #fff;
  margin-bottom: var(--space-4);
}
.site-footer-brand .logo-mark {
  background: var(--coral);
}

.site-footer-tagline {
  font-size: var(--fs-sm);
  line-height: 1.55;
  max-width: 320px;
  color: #9CA3AF;
}

.site-footer-col-title {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: var(--space-4);
  font-weight: 500;
}

.site-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer-col a {
  font-size: var(--fs-sm);
  color: #B8BFCB;
  text-decoration: none;
  transition: color 150ms ease;
}
.site-footer-col a:hover {
  color: #fff;
}

.site-footer-disclaimer {
  font-size: var(--fs-xs);
  color: #6B7280;
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  line-height: 1.6;
  max-width: 740px;
}

.site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: #6B7280;
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
}

.site-footer-top-link {
  color: #B8BFCB;
  font-family: var(--ff-mono);
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
  text-decoration: none;
  transition: color 150ms ease;
}
.site-footer-top-link:hover {
  color: #fff;
}


/* =========================================================================
   12. BACK-TO-TOP FAB
   Hidden until 600px scroll, then fades in bottom-right.
   ========================================================================= */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 300ms var(--ease-out),
              visibility 0s linear 300ms,
              transform 300ms var(--ease-out),
              background 150ms ease;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-fab);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 300ms var(--ease-out),
              visibility 0s linear 0s,
              transform 300ms var(--ease-out),
              background 150ms ease;
}
.back-to-top:hover {
  background: var(--teal);
  transform: translateY(-2px);
}
.back-to-top svg {
  width: 18px;
  height: 18px;
}


/* =========================================================================
   13. REVEAL ON SCROLL
   Apply .reveal class; JS adds .in when in viewport.
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================================
   14. WP CORE COMPAT
   Tighten WordPress.com defaults that fight the design canon.

   WordPress.com injects a 32KB "global-styles-inline-css" block that
   overrides body, headings, links, buttons, and layout with
   --wp--preset--* variables. These rules counter those overrides
   so the theme's design system controls the presentation.
   ========================================================================= */

/* --- Layout: remove WP.com root padding that shifts content --- */
.wp-site-blocks {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

/* --- Links: WP.com forces all <a> via a:where(:not(.wp-element-button))
   to teal-dk, breaking white links in dark sections. Use higher specificity. --- */
a:where(:not(.wp-element-button)) { color: inherit; text-decoration: none; }
.site-footer a:where(:not(.wp-element-button)) { color: #B8BFCB !important; }
.site-footer a:where(:not(.wp-element-button)):hover { color: #fff !important; }
.site-footer-col a { color: #B8BFCB !important; }
.site-footer-col a:hover { color: #fff !important; }
.bottom-cta-section a { color: inherit !important; }
.section-dark a { color: inherit !important; }
.mobile-menu a { color: inherit; }
.promo-bar a { color: var(--coral) !important; }
.promo-bar a:hover { color: #fff !important; }

/* --- Buttons: WP.com overrides .wp-element-button color --- */
.wp-element-button,
.wp-block-button__link {
  color: inherit;
  background: inherit;
  border: inherit;
}

/* --- Typography: WP.com resets body font-size via global styles.
   Use !important only where WP.com uses it first. --- */
body {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-base) !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
}

/* Headings: WP.com sets font-size via --wp--preset--font-size--5xl etc.
   Our theme uses --fs-* aliases which resolve to the same clamp() values
   from theme.json, but WP's specificity wins on block theme pages. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
h1 { font-size: var(--fs-5xl) !important; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: var(--fs-4xl) !important; letter-spacing: -0.03em;  line-height: 1.05; }
h3 { font-size: var(--fs-2xl) !important; }
h4 { font-size: var(--fs-lg) !important; }

/* Dark sections: WP.com link override makes white text teal */
.section-dark,
.section-dark h1,
.section-dark h2,
.section-dark p,
.section-dark a,
.bottom-cta-section,
.bottom-cta-section h1,
.bottom-cta-section h2,
.bottom-cta-section p,
.bottom-cta-section a,
.site-footer,
.site-footer h1,
.site-footer h2 {
  color: inherit;
}

/* --- WP.com block gap: global styles add gap to .wp-site-blocks > * --- */
.wp-site-blocks > * + * {
  margin-block-start: 0;
}

/* --- WP.com content width constraints on block theme pages --- */
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > .wp-block-template-part {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Suppress WP.com admin-bar offset issues */
html { scroll-padding-top: 80px; }






/* =========================================================================
   18. S2 — ARTICLE / TEACHING POST (single.html)
   article-hero, byline, article-grid, TOC sidebar, article-content,
   callouts/data-tables/formulas/lab, related posts, prev-next, bottom-cta.
   ========================================================================= */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--teal);z-index:110;transition:width 100ms linear}
.article-hero{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px);background:radial-gradient(700px 400px at 0% 0%,rgba(14,124,123,.05),transparent 60%),radial-gradient(500px 300px at 100% 100%,rgba(232,89,63,.03),transparent 60%),var(--bg);border-bottom:1px solid var(--border-soft)}
.article-hero-inner{max-width:840px;margin:0 auto}
.article-hero-meta{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-6);flex-wrap:wrap}
.article-tag{display:inline-block;padding:4px 10px;background:var(--teal-50);color:var(--teal-dk);font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:500;border-radius:var(--radius-pill);letter-spacing:.06em;text-transform:uppercase}
.article-tag.kind{background:var(--ink);color:#fff}
.article-hero-lede{font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem);color:var(--ink-2);line-height:1.45;margin-bottom:var(--space-8);max-width:720px;letter-spacing:-.012em}
.article-hero h1{margin-bottom:var(--space-5)}
.byline{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-6);border-top:1px solid var(--border-soft);flex-wrap:wrap}
.byline-avatar{width:44px;height:44px;border-radius:50%;background:var(--bg-dark);display:grid;place-items:center;color:#fff;font-family:'Geist',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.02em;box-shadow:0 0 0 3px var(--teal-50);flex-shrink:0}
.byline-name{display:flex;flex-direction:column;gap:2px}
.byline-name .author{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
.byline-name .role{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.byline-meta{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--ink-3);letter-spacing:.04em;display:flex;align-items:center;gap:var(--space-3);margin-left:auto}
.byline-meta .sep{color:var(--ink-mute)}
@media (max-width:580px){.byline-meta{margin-left:0;width:100%;padding-top:var(--space-3);border-top:1px solid var(--border-soft)}}
.article-body{padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px)}
.article-grid{display:grid;grid-template-columns:220px minmax(0,720px) 220px;gap:var(--space-12);align-items:start;justify-content:center}
@media (max-width:1100px){.article-grid{grid-template-columns:1fr;gap:var(--space-8)}}
.toc{position:sticky;top:100px}
@media (max-width:1100px){.toc{display:none}}
.toc-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-soft)}
.toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.toc-list a{display:block;font-size:var(--fs-sm);color:var(--ink-3);padding:6px 0 6px var(--space-3);border-left:2px solid var(--border);line-height:1.4;transition:color 150ms ease,border-color 150ms ease}
.toc-list a:hover{color:var(--ink);border-left-color:var(--ink)}
.toc-list a.active{color:var(--teal-dk);border-left-color:var(--teal);font-weight:500}
.article-balance{display:block}
@media (max-width:1100px){.article-balance{display:none}}
.article-content{max-width:720px}
.article-content p{font-size:var(--fs-prose);line-height:1.72;color:var(--ink-2);margin-bottom:var(--space-6);letter-spacing:-.008em}
.article-content p:last-child{margin-bottom:0}
.article-content strong{color:var(--ink);font-weight:600}
.article-content em{color:var(--teal-dk);font-style:italic;font-weight:500}
.article-content h2{font-size:var(--fs-2xl);margin-top:var(--space-16);margin-bottom:var(--space-5);letter-spacing:-.025em}
.article-content h2:first-child{margin-top:0}
.article-content ol,.article-content ul{padding-left:var(--space-6);margin-bottom:var(--space-6)}
.article-content li{font-size:var(--fs-prose);line-height:1.7;color:var(--ink-2);margin-bottom:var(--space-3);letter-spacing:-.008em}
.article-content li::marker{color:var(--teal)}
.lab{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.875em;font-weight:500;padding:2px 8px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--ink);letter-spacing:0;white-space:nowrap}
.lab.high{color:var(--coral-dk);border-color:var(--coral-tn);background:var(--coral-tn)}
.lab.low{color:var(--teal-dk);border-color:var(--teal-tn);background:var(--teal-50)}
.formula{text-align:center;font-family:'JetBrains Mono',monospace;font-size:var(--fs-sm);color:var(--ink);background:var(--bg-soft);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);border:1px solid var(--border-soft);margin-bottom:var(--space-6);line-height:1.7}
.data-table-wrap{margin:var(--space-10) 0;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;background:#fff}
.data-table-head{padding:var(--space-4) var(--space-6);background:var(--bg-soft);border-bottom:1px solid var(--border);display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.data-table-title{font-family:'Geist',sans-serif;font-weight:600;font-size:var(--fs-base);letter-spacing:-.015em;color:var(--ink)}
.data-table-meta{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.data-table{width:100%;border-collapse:collapse}
.data-table thead th{text-align:left;padding:var(--space-3) var(--space-6);font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--border);background:var(--bg)}
.data-table tbody td{padding:var(--space-3) var(--space-6);border-bottom:1px solid var(--border-soft);font-size:var(--fs-sm);color:var(--ink)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--bg-soft)}
.data-table .col-label{font-family:'Inter Tight',sans-serif;font-weight:500;color:var(--ink)}
.data-table .col-value{font-family:'JetBrains Mono',monospace;font-weight:500}
.data-table .col-range{font-family:'JetBrains Mono',monospace;color:var(--ink-3);font-size:.85em}
.data-table .col-status{text-align:right}
.status-pill{display:inline-block;padding:2px 8px;border-radius:var(--radius-pill);font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.status-pill.normal{background:var(--bg-soft);color:var(--ink-3)}
.status-pill.high{background:var(--coral-tn);color:var(--coral-dk)}
.status-pill.low{background:var(--teal-50);color:var(--teal-dk)}
@media (max-width:580px){
  .data-table thead{display:none}
  .data-table tbody td{display:block;padding:var(--space-2) var(--space-5);border-bottom:0}
  .data-table tbody tr{display:block;padding:var(--space-3) 0;border-bottom:1px solid var(--border-soft)}
  .data-table tbody tr:last-child{border-bottom:0}
  .data-table .col-status{text-align:left}
}
.callout{margin:var(--space-10) 0;padding:var(--space-6) var(--space-6) var(--space-6) var(--space-8);border-radius:var(--radius-lg);border-left:4px solid;position:relative}
.callout-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.callout-head svg{width:16px;height:16px;flex-shrink:0}
.callout-body{font-size:var(--fs-prose);line-height:1.65;color:var(--ink-2);letter-spacing:-.008em}
.callout-body strong{color:var(--ink);font-weight:600}
.callout.key{background:var(--teal-50);border-left-color:var(--teal)}
.callout.key .callout-head{color:var(--teal-dk)}
.callout.pitfall{background:var(--coral-tn);border-left-color:var(--coral)}
.callout.pitfall .callout-head{color:var(--coral-dk)}
.callout.action{background:var(--bg-soft-2);border-left-color:var(--ink)}
.callout.action .callout-head{color:var(--ink)}
.author-bio-section{padding:clamp(56px,7vw,96px) 0;background:var(--bg-soft);border-top:1px solid var(--border-soft)}
.author-bio{max-width:720px;margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);align-items:start;background:#fff;border:1px solid var(--border);border-radius:var(--radius-2xl);padding:clamp(28px,4vw,40px)}
@media (max-width:580px){.author-bio{grid-template-columns:1fr;gap:var(--space-5)}}
.author-bio-avatar{width:88px;height:88px;border-radius:50%;background:var(--bg-dark);display:grid;place-items:center;color:#fff;font-family:'Geist',sans-serif;font-weight:700;font-size:1.75rem;letter-spacing:-.025em;box-shadow:0 0 0 4px var(--teal-50),var(--shadow-sm);flex-shrink:0}
.author-bio-content .eyebrow{display:inline-block;margin-bottom:var(--space-2)}
.author-bio-name{font-family:'Geist',sans-serif;font-weight:700;font-size:var(--fs-xl);letter-spacing:-.022em;color:var(--ink);margin-bottom:4px}
.author-bio-role{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--space-4)}
.author-bio-text{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6;margin-bottom:var(--space-5)}
.author-bio-link{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:var(--fs-sm);color:var(--teal-dk);display:inline-flex;align-items:center;gap:4px;transition:gap 150ms ease}
.author-bio-link:hover{gap:8px}
.author-bio-link svg{width:12px;height:12px}
.related{padding:clamp(56px,7vw,96px) 0}
.related-head{max-width:1200px;margin:0 auto var(--space-10);padding:0 var(--space-6);display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.related-head .eyebrow{display:block;margin-bottom:var(--space-2)}
.related-head h2{font-size:var(--fs-2xl)}
.related-head .related-all{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:var(--fs-sm);color:var(--teal-dk);display:inline-flex;align-items:center;gap:4px;transition:gap 150ms ease}
.related-head .related-all:hover{gap:8px}
.related-head .related-all svg{width:12px;height:12px}
.related-grid{max-width:1200px;margin:0 auto;padding:0 var(--space-6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media (max-width:900px){.related-grid{grid-template-columns:1fr}}
.related-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);transition:all 200ms var(--ease-out);min-height:240px}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--teal-tn)}
.related-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.related-card-tag{display:inline-block;padding:3px 8px;background:var(--teal-50);color:var(--teal-dk);font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:500;border-radius:var(--radius-xs);letter-spacing:.06em;text-transform:uppercase}
.related-card-tag.kind{background:var(--ink);color:#fff}
.related-card h3{font-size:1.0625rem;letter-spacing:-.015em;line-height:1.25;flex-grow:1}
.related-card-meta{display:flex;gap:var(--space-3);font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.related-card-foot{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-4);border-top:1px solid var(--border-soft)}
.related-card-cta{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:var(--fs-sm);color:var(--ink)}
.related-card-arrow{width:28px;height:28px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;color:var(--ink);transition:all 200ms var(--ease-out)}
.related-card-arrow svg{width:12px;height:12px}
.related-card:hover .related-card-arrow{background:var(--teal);color:#fff}
.bottom-cta-section{padding:clamp(56px,7vw,96px) 0;background:var(--ink);color:#fff}
.bottom-cta{text-align:center;max-width:720px;margin:0 auto}
.bottom-cta .eyebrow{color:var(--coral);margin-bottom:var(--space-4);display:inline-block}
.bottom-cta h2{color:#fff;margin-bottom:var(--space-5);font-size:var(--fs-3xl)}
.bottom-cta h2 em{color:var(--coral);font-style:normal}
.bottom-cta p{color:#B8BFCB;font-size:var(--fs-lg);margin-bottom:var(--space-8);line-height:1.5}
.bottom-cta-row{display:inline-flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}
.byline-avatar img,
.author-bio-avatar img{
  width:100%;height:100%;object-fit:cover;object-position:center center;display:block;border-radius:inherit
}
@media print{
  /* Page setup */
  @page{margin:0.75in;size:letter}
  html,body{background:#fff !important;color:#000 !important}

  /* Hide UI chrome */
  .promo-bar,
  .header,
  .mobile-menu,
  .hamburger,
  .back-to-top,
  .read-progress,
  .toc,
  .article-balance,
  .author-bio-link,
  .related,
  .bottom-cta-section,
  .footer{display:none !important}

  /* Reset article body grid for print: single column, full width */
  .article-body{padding:0 !important}
  .article-grid{display:block !important;max-width:none !important}
  .article-content{max-width:none !important}

  /* Print masthead — replaces the sticky header */
  .article-hero{
    padding:0 0 0.25in 0 !important;
    background:none !important;
    border-bottom:2px solid #000 !important;
    margin-bottom:0.25in !important
  }
  .article-hero::before{
    content:"Anatomy of a Clinician · Teaching Post";
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:9pt;letter-spacing:.1em;text-transform:uppercase;
    color:#000;margin-bottom:0.2in;
    padding-bottom:0.1in;border-bottom:1px solid #999
  }
  .article-hero-inner{max-width:none !important}
  .article-hero h1{
    font-family:'Geist',sans-serif !important;
    font-size:22pt !important;
    color:#000 !important;
    line-height:1.15 !important;
    margin-bottom:0.15in !important
  }
  .article-hero-lede{
    font-size:12pt !important;color:#222 !important;
    line-height:1.4 !important;margin-bottom:0.2in !important
  }
  .article-tag{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #000 !important;
    padding:1px 6px !important;
    font-size:7pt !important
  }

  /* Byline — keep, simplify */
  .byline{padding-top:0.15in !important;border-top:1px solid #ccc !important}
  .byline-avatar{
    width:36px !important;height:36px !important;
    box-shadow:none !important;
    border:1px solid #999 !important
  }
  .byline-name .author{font-size:10pt !important;color:#000 !important}
  .byline-name .role{font-size:7.5pt !important;color:#444 !important}
  .byline-meta{font-size:8pt !important;color:#444 !important}

  /* Article body typography for print */
  .article-content p,
  .article-content li{
    font-family:Georgia,'Times New Roman',serif !important;
    font-size:11pt !important;
    line-height:1.5 !important;
    color:#000 !important;
    letter-spacing:0 !important;
    margin-bottom:0.12in !important;
    orphans:3;widows:3
  }
  .article-content strong{color:#000 !important;font-weight:700 !important}
  .article-content em{color:#000 !important;font-style:italic !important;font-weight:500 !important}
  .article-content h2{
    font-family:'Geist',sans-serif !important;
    font-size:14pt !important;
    color:#000 !important;
    margin-top:0.3in !important;
    margin-bottom:0.12in !important;
    page-break-after:avoid !important;
    break-after:avoid !important
  }
  .section-eyebrow{
    color:#666 !important;font-size:8pt !important;
    margin-bottom:0.06in !important
  }

  /* Inline lab chips — print as inline outlined boxes, no colored fill */
  .lab,
  .lab.high,
  .lab.low{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #666 !important;
    padding:0 4px !important;
    font-family:'JetBrains Mono',monospace !important;
    font-size:9.5pt !important
  }
  .lab.high{font-weight:700;border-color:#000 !important}
  .lab.low{font-style:italic;border-color:#000 !important}

  /* Formula blocks — keep tinted with light gray, no colored borders */
  .formula{
    background:#F4F4F4 !important;
    border:1px solid #999 !important;
    color:#000 !important;
    font-size:10pt !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important
  }

  /* Data table — print-friendly */
  .data-table-wrap{
    border:1.5px solid #000 !important;
    border-radius:0 !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important;
    margin:0.2in 0 !important
  }
  .data-table-head{
    background:#fff !important;
    border-bottom:1.5px solid #000 !important;
    padding:0.08in 0.15in !important
  }
  .data-table-title{font-size:11pt !important;color:#000 !important}
  .data-table-meta{font-size:8pt !important;color:#444 !important}
  .data-table thead th{
    background:#fff !important;
    color:#000 !important;
    border-bottom:1px solid #000 !important;
    font-size:8pt !important;
    padding:0.06in 0.15in !important
  }
  .data-table tbody td{
    font-size:10pt !important;color:#000 !important;
    border-bottom:1px solid #ccc !important;
    padding:0.05in 0.15in !important
  }
  .data-table tbody tr:hover{background:none !important}
  .data-table .col-value,
  .data-table .col-range{font-family:'JetBrains Mono',monospace !important}
  .status-pill{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #666 !important;
    padding:0 5px !important;font-size:7.5pt !important
  }
  .status-pill.high{font-weight:700;border-width:1.5px}

  /* Callouts — black/white with distinct left borders for the three variants */
  .callout{
    background:#FAFAFA !important;
    color:#000 !important;
    border:1px solid #999 !important;
    border-left:4px solid #000 !important;
    padding:0.12in 0.15in 0.12in 0.2in !important;
    margin:0.2in 0 !important;
    border-radius:0 !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important
  }
  .callout.key{border-left-style:solid !important}
  .callout.pitfall{border-left-style:double !important;border-left-width:6px !important}
  .callout.action{border-left-style:dashed !important}
  .callout-head{color:#000 !important;font-size:8.5pt !important;margin-bottom:0.06in !important}
  .callout-head svg{stroke:#000 !important}
  .callout-body{font-size:10.5pt !important;color:#000 !important;line-height:1.45 !important}
  .callout-body strong{color:#000 !important}

  /* Pull quote — keep prominent in print */
  .pull-quote{
    color:#000 !important;
    border-left:3px solid #000 !important;
    font-family:Georgia,serif !important;
    font-size:13pt !important;
    line-height:1.35 !important;
    padding:0.15in 0 0.15in 0.2in !important;
    margin:0.2in 0 !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important
  }
  .pull-quote em{color:#000 !important}

  /* References — keep, format compactly */
  .references{
    margin-top:0.3in !important;
    padding-top:0.15in !important;
    border-top:1px solid #000 !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important
  }
  .references h3{color:#000 !important;font-size:9pt !important;margin-bottom:0.1in !important}
  .references li{
    font-family:Georgia,serif !important;
    font-size:9.5pt !important;
    color:#000 !important;
    margin-bottom:0.05in !important;
    line-height:1.35 !important
  }
  .references li em{color:#000 !important}

  /* Author bio in print — simplified */
  .author-bio-section{
    background:none !important;
    padding:0.2in 0 0 0 !important;
    border-top:1px solid #999 !important;
    margin-top:0.3in !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important
  }
  .author-bio{
    background:none !important;
    border:none !important;
    padding:0 !important;
    border-radius:0 !important;
    gap:0.15in !important
  }
  .author-bio-avatar{
    width:54px !important;height:54px !important;
    box-shadow:none !important;
    border:1px solid #666 !important
  }
  .author-bio-content .eyebrow{color:#666 !important;font-size:7.5pt !important}
  .author-bio-name{color:#000 !important;font-size:12pt !important}
  .author-bio-role{color:#444 !important;font-size:8pt !important}
  .author-bio-text{color:#000 !important;font-size:10pt !important;font-family:Georgia,serif !important}

  /* Print footer added via ::after on a known final element so it appears once */
  .author-bio-section::after{
    content:"Printed from anatomyofaclinician.com · For personal study use only · Always verify against current published version";
    display:block;
    margin-top:0.3in;padding-top:0.1in;
    border-top:1px solid #ccc;
    font-family:'JetBrains Mono',monospace;
    font-size:7.5pt;letter-spacing:.04em;
    color:#666;text-align:center;line-height:1.5
  }

  /* General page break behavior */
  h2,h3{page-break-after:avoid !important;break-after:avoid !important}
  .data-table-wrap,.callout,.pull-quote,.formula,.references,.author-bio{page-break-inside:avoid !important;break-inside:avoid !important}
  a{color:#000 !important;text-decoration:underline !important}

  /* Suppress smooth-scroll behavior in print */
  html{scroll-behavior:auto !important}
}
.prev-next-section{padding:var(--space-10) 0 var(--space-12);background:var(--bg);border-top:1px solid var(--border-soft)}
.prev-next-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media (max-width:680px){.prev-next-grid{grid-template-columns:1fr}}
.prev-next-card{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6);
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:all 200ms var(--ease-out);
  position:relative;
}
.prev-next-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--teal-tn)}
.prev-next-card.is-next{text-align:right}
.prev-next-card.is-disabled{opacity:.45;pointer-events:none;cursor:not-allowed}
.prev-next-label{
  display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
.prev-next-card.is-next .prev-next-label{justify-content:flex-end}
.prev-next-label svg{width:14px;height:14px;transition:transform 200ms var(--ease-out)}
.prev-next-card.is-prev:hover .prev-next-label svg{transform:translateX(-3px)}
.prev-next-card.is-next:hover .prev-next-label svg{transform:translateX(3px)}
.prev-next-tags{display:flex;gap:6px;flex-wrap:wrap}
.prev-next-card.is-next .prev-next-tags{justify-content:flex-end}
.prev-next-tag{
  display:inline-block;padding:3px 8px;
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--radius-xs);
}
.prev-next-tag.type{background:var(--ink);color:#fff}
.prev-next-tag.lane{background:var(--teal-50);color:var(--teal-dk)}
.prev-next-title{
  font-family:'Geist',sans-serif;font-weight:700;
  font-size:1.0625rem;letter-spacing:-.015em;line-height:1.3;
  color:var(--ink);
}
.prev-next-meta{
  font-family:'JetBrains Mono',monospace;font-size:.65rem;
  color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;
  margin-top:auto;
  display:flex;gap:6px;align-items:center;
  padding-top:var(--space-3);
  border-top:1px solid var(--border-soft);
}
.prev-next-card.is-next .prev-next-meta{justify-content:flex-end}
.prev-next-meta .sep{color:var(--ink-mute)}
.prev-next-back{
  text-align:center;
  margin-top:var(--space-6);
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;
}
.prev-next-back a{
  color:var(--ink-3);
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--radius-pill);
  transition:all 150ms ease;
}
.prev-next-back a:hover{color:var(--ink);background:var(--bg-soft)}
.prev-next-back a svg{width:12px;height:12px}


/* =========================================================================
   19. S2 — BLOG INDEX (archive.html)
   blog-hero, featured card, filter bar visual (JS in S4),
   post-card grid, pagination, empty state.
   ========================================================================= */
.blog-hero{padding:clamp(28px,3.5vw,48px) 0 clamp(20px,2.5vw,32px);background:radial-gradient(800px 400px at 85% -20%,rgba(14,124,123,.06),transparent 60%),var(--bg);border-bottom:1px solid var(--border-soft)}
.blog-hero-eyebrow{display:inline-block;margin-bottom:var(--space-3)}
.blog-hero h1{font-size:clamp(1.75rem,1.5rem + 1.1vw,2.5rem);letter-spacing:-.025em;line-height:1.1;margin-bottom:var(--space-3);max-width:780px}
.blog-hero h1 .accent{color:var(--teal)}
.blog-hero-sub{font-size:var(--fs-base);color:var(--ink-2);max-width:560px;line-height:1.5}
.featured{padding:var(--space-12) 0}
.featured-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-2xl);
  padding:clamp(32px,5vw,56px);
  display:block;position:relative;
  transition:all 200ms var(--ease-out);
}
.featured-card:hover{box-shadow:var(--shadow-md);border-color:var(--teal-tn);transform:translateY(-2px)}
.featured-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--space-5);align-items:center}
.featured-tag-featured{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px 5px 8px;
  background:var(--coral);color:#fff;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;border-radius:var(--radius-pill);
}
.featured-tag-featured .dot{
  width:6px;height:6px;background:#fff;border-radius:50%;
  animation:promo-pulse 2.2s ease-in-out infinite;
}
.featured-tag{
  display:inline-block;padding:4px 10px;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;border-radius:var(--radius-xs);
}
.featured-tag.type{background:var(--ink);color:#fff}
.featured-tag.lane{background:var(--teal-50);color:var(--teal-dk)}
.featured-card h2{
  font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);
  letter-spacing:-.025em;line-height:1.1;
  margin-bottom:var(--space-5);
  max-width:840px;
}
.featured-excerpt{
  font-size:var(--fs-lg);color:var(--ink-2);
  line-height:1.55;
  max-width:680px;
  margin-bottom:var(--space-6);
}
.featured-meta{
  display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;
  padding-top:var(--space-5);
  border-top:1px solid var(--border-soft);
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;letter-spacing:.04em;color:var(--ink-3);
}
.featured-meta-sep{color:var(--ink-mute)}
.featured-cta{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--fs-sm);
  color:var(--coral-dk);
  transition:gap 200ms var(--ease-out);
}
.featured-card:hover .featured-cta{gap:10px}
.featured-cta svg{width:13px;height:13px}
@media (max-width:560px){.featured-cta{margin-left:0;width:100%;padding-top:var(--space-3);margin-top:var(--space-2);border-top:1px dashed var(--border-soft)}}
.filter-bar{position:sticky;top:73px;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:var(--space-4) 0}
.filter-inner{display:grid;grid-template-columns:1fr auto;gap:var(--space-5);align-items:start}
@media (max-width:880px){.filter-inner{grid-template-columns:1fr}}
.filter-groups{display:flex;flex-direction:column;gap:var(--space-3)}
.filter-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.filter-row-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;
  min-width:48px;flex-shrink:0;
}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--border);border-radius:var(--radius-pill);font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:500;letter-spacing:.04em;color:var(--ink-2);cursor:pointer;transition:all 150ms ease;background:#fff}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.chip-count{font-size:.65rem;opacity:.55;padding-left:4px;border-left:1px solid currentColor;margin-left:4px;font-weight:400}
.chip.active .chip-count{opacity:.7}
.filter-tools{display:flex;flex-direction:column;gap:var(--space-2);min-width:260px;max-width:300px}
@media (max-width:880px){.filter-tools{min-width:100%;max-width:100%}}
.filter-summary{display:none;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--border-soft);font-size:var(--fs-sm);color:var(--ink-2);flex-wrap:wrap}
.filter-summary.show{display:flex}
.filter-summary strong{color:var(--ink);font-weight:600}
.filter-summary-clear{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:var(--fs-sm);color:var(--coral-dk);background:none;border:0;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:background 150ms ease;margin-left:auto}
.filter-summary-clear:hover{background:var(--coral-tn)}
.posts{padding:var(--space-8) 0 var(--space-12)}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media (max-width:980px){.posts-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.posts-grid{grid-template-columns:1fr}}
.post{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  display:flex;flex-direction:column;
  gap:var(--space-4);
  transition:all 200ms var(--ease-out);
  min-height:260px;position:relative;
}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--teal-tn)}
.post-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:0 0 auto}
.post-tag{
  display:inline-flex;align-items:center;flex:0 0 auto;padding:3px 8px;
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--radius-xs);
}
.post-tag.type{background:var(--ink);color:#fff}
.post-tag.lane{background:var(--teal-50);color:var(--teal-dk)}
.post h3{
  font-size:1.0625rem;letter-spacing:-.015em;line-height:1.3;
  color:var(--ink);font-weight:700;
}
.post-excerpt{
  font-size:.875rem;
  color:var(--ink-2);
  line-height:1.55;
  flex-grow:1;
}
.post-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;
  display:flex;gap:6px;align-items:center;
  padding-top:var(--space-4);
  border-top:1px solid var(--border-soft);
}
.post-meta .sep{color:var(--ink-mute)}
.empty-state{display:none;text-align:center;padding:var(--space-16) var(--space-6);max-width:480px;margin:0 auto}
.empty-state.show{display:block}
.empty-state-icon{width:56px;height:56px;background:var(--bg-soft);border-radius:50%;display:grid;place-items:center;margin:0 auto var(--space-5);color:var(--ink-3)}
.empty-state-icon svg{width:24px;height:24px}
.empty-state h3{font-size:var(--fs-xl);margin-bottom:var(--space-3);letter-spacing:-.02em}
.empty-state p{color:var(--ink-2);font-size:var(--fs-base);line-height:1.55;margin-bottom:var(--space-6)}
.pagination{display:flex;justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-10) 0;flex-wrap:wrap}
.pagination-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--ink);font-family:'Inter Tight',sans-serif;font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:all 150ms ease}
.pagination-btn:hover{border-color:var(--ink);background:var(--bg-soft)}
.pagination-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.pagination-btn svg{width:14px;height:14px}
.pagination-ellipsis{padding:0 var(--space-2);color:var(--ink-3);font-family:'JetBrains Mono',monospace;font-size:.85rem;align-self:flex-end;padding-bottom:8px}
.pagination-meta{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-left:var(--space-4);padding-left:var(--space-4);border-left:1px solid var(--border)}
@media (max-width:580px){.pagination-meta{margin-left:0;padding-left:0;border-left:0;width:100%;text-align:center;margin-top:var(--space-3)}}
.bottom-cta .eyebrow{color:var(--coral);margin-bottom:var(--space-4);display:inline-block}


/* =========================================================================
   20. S2 — ERROR / SEARCH (404.html + search.html)
   error-hero, error-search input, recovery cards, search-hero,
   search-refinement, search-results, search-empty state.
   ========================================================================= */
.error-hero{padding:clamp(56px,8vw,96px) 0 clamp(32px,4vw,48px);text-align:center;background:radial-gradient(800px 400px at 85% -20%,rgba(14,124,123,.06),transparent 60%),var(--bg)}
.error-hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
  margin-bottom:var(--space-4);
}
.error-hero-status{
  background:var(--bg-soft-2);color:var(--ink-2);
  padding:3px 9px;border-radius:var(--radius-xs);
  font-weight:600;
}
.error-hero h1{font-size:clamp(2.25rem,1.9rem + 1.7vw,3.5rem);max-width:780px;margin:0 auto var(--space-5)}
.error-hero p{font-size:var(--fs-lg);color:var(--ink-2);max-width:620px;margin:0 auto;line-height:1.55}
.error-search{padding:0 0 clamp(40px,5vw,64px);background:var(--bg)}
.error-search-form{
  max-width:580px;margin:0 auto;
  display:flex;gap:var(--space-3);
}
.error-search-input-wrap{
  flex:1;position:relative;
}
.error-search-input{
  width:100%;padding:14px 18px 14px 46px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  background:#fff;
  font-family:'Inter Tight',sans-serif;font-size:var(--fs-base);
  color:var(--ink);outline:0;
  transition:border-color 150ms ease,box-shadow 150ms ease;
}
.error-search-input:focus{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-50)}
.error-search-input::placeholder{color:var(--ink-mute)}
.error-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3);pointer-events:none}
@media (max-width:540px){.error-search-form{flex-direction:column}.error-search-form .btn{width:100%}}
.error-recovery{padding:0 0 clamp(56px,7vw,80px);background:var(--bg)}
.error-recovery-head{text-align:center;margin-bottom:var(--space-8)}
.error-recovery-head .eyebrow{display:inline-block;color:var(--ink-3)}
.error-recovery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);
  max-width:1100px;margin:0 auto;
}
@media (max-width:980px){.error-recovery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.error-recovery-grid{grid-template-columns:1fr}}
.recovery-card{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6);
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:all 200ms var(--ease-out);
  position:relative;text-align:left;
}
.recovery-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--teal-tn)}
.recovery-card-icon{
  width:42px;height:42px;border-radius:var(--radius-md);
  background:var(--teal-50);color:var(--teal-dk);
  display:grid;place-items:center;
  margin-bottom:var(--space-2);
}
.recovery-card-icon svg{width:20px;height:20px}
.recovery-card h3{font-size:var(--fs-lg);letter-spacing:-.015em;line-height:1.25}
.recovery-card p{font-size:.875rem;color:var(--ink-2);line-height:1.5;flex-grow:1}
.recovery-card-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--coral-dk);font-weight:600;
  padding-top:var(--space-2);
  border-top:1px solid var(--border-soft);
}
.recovery-card-arrow svg{width:13px;height:13px;transition:transform 200ms var(--ease-out)}
.recovery-card:hover .recovery-card-arrow svg{transform:translateX(3px)}
.search-hero{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,32px);background:radial-gradient(800px 400px at 85% -20%,rgba(14,124,123,.06),transparent 60%),var(--bg);border-bottom:1px solid var(--border-soft)}
.search-hero-eyebrow{display:inline-block;margin-bottom:var(--space-3)}
.search-hero h1{font-size:clamp(1.875rem,1.6rem + 1.2vw,2.75rem);letter-spacing:-.025em;line-height:1.1;margin-bottom:var(--space-3);max-width:780px}
.search-hero h1 .accent{color:var(--teal)}
.search-hero h1 .quote{font-style:italic;font-weight:600}
.search-hero-count{
  font-family:'JetBrains Mono',monospace;font-size:.85rem;
  color:var(--ink-2);letter-spacing:.02em;
}
.search-refinement{
  position:sticky;top:73px;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  padding:var(--space-4) 0;
}
.search-refinement-inner{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-5);
  align-items:start;
}
@media (max-width:880px){.search-refinement-inner{grid-template-columns:1fr}}
.search-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border:1px solid var(--border);border-radius:var(--radius-pill);
  font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:500;
  letter-spacing:.04em;color:var(--ink-2);cursor:pointer;
  transition:all 150ms ease;background:#fff;
}
.search-chip:hover{border-color:var(--ink);color:var(--ink)}
.search-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.search-chip-count{font-size:.65rem;opacity:.55;padding-left:4px;border-left:1px solid currentColor;margin-left:4px;font-weight:400}
.search-chip.active .search-chip-count{opacity:.7}
.search-refinement-tools{display:flex;flex-direction:column;gap:var(--space-2);min-width:280px;max-width:320px}
@media (max-width:880px){.search-refinement-tools{min-width:100%;max-width:100%}}
.search-refinement-input-wrap{position:relative;width:100%}
.search-refinement-input{
  width:100%;padding:9px 36px 9px 38px;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  background:#fff;font-family:'Inter Tight',sans-serif;font-size:var(--fs-sm);
  color:var(--ink);outline:0;
  transition:border-color 150ms ease,box-shadow 150ms ease;
}
.search-refinement-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-50)}
.search-refinement-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.search-refinement-clear{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border:0;background:var(--bg-soft);border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--ink-3);transition:background 150ms ease,color 150ms ease;
}
.search-refinement-clear:hover{background:var(--ink);color:#fff}
.search-refinement-clear svg{width:11px;height:11px}
.search-results{padding:var(--space-8) 0 var(--space-12)}
.search-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media (max-width:980px){.search-results-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.search-results-grid{grid-template-columns:1fr}}
.search-result{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);
  transition:all 200ms var(--ease-out);min-height:260px;position:relative;
}
.search-result:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--teal-tn)}
.search-result-tags{display:flex;gap:6px;flex-wrap:wrap}
.search-result-tag{
  display:inline-block;padding:3px 8px;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-xs);
}
.search-result-tag.type{background:var(--ink);color:#fff}
.search-result-tag.lane{background:var(--teal-50);color:var(--teal-dk)}
.search-result h3{
  font-size:1.0625rem;letter-spacing:-.015em;line-height:1.3;
  color:var(--ink);font-weight:700;
}
.search-result-excerpt{
  font-size:.875rem;color:var(--ink-2);line-height:1.55;flex-grow:1;
}
.search-result-excerpt mark{
  background:var(--coral-tn);color:var(--coral-dk);
  padding:1px 3px;border-radius:2px;font-weight:600;
}
.search-result-meta{
  font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;
  display:flex;gap:6px;align-items:center;
  padding-top:var(--space-4);border-top:1px solid var(--border-soft);
}
.search-result-meta .sep{color:var(--ink-mute)}
.search-empty-state{
  text-align:center;
  padding:clamp(56px,8vw,96px) var(--space-6) clamp(40px,5vw,64px);
  max-width:580px;margin:0 auto;
}
.search-empty-icon{
  width:64px;height:64px;background:var(--bg-soft);border-radius:50%;
  display:grid;place-items:center;margin:0 auto var(--space-5);color:var(--ink-3);
}
.search-empty-icon svg{width:28px;height:28px}
.search-empty-state h2{font-size:var(--fs-2xl);margin-bottom:var(--space-3);letter-spacing:-.02em}
.search-empty-state h2 .quote{font-style:italic;font-weight:600;color:var(--ink-2)}
.search-empty-state p{color:var(--ink-2);font-size:var(--fs-base);line-height:1.55;margin-bottom:var(--space-6)}
.search-empty-suggestions{
  display:flex;flex-direction:column;gap:var(--space-2);
  max-width:480px;margin:0 auto;
  text-align:left;
}
.search-empty-suggestions-label{
  font-family:'JetBrains Mono',monospace;font-size:.65rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  text-align:center;margin-bottom:var(--space-3);
}
.search-empty-suggestion{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  transition:all 150ms ease;
}
.search-empty-suggestion:hover{border-color:var(--ink);transform:translateX(3px)}
.search-empty-suggestion-icon{
  width:32px;height:32px;background:var(--teal-50);color:var(--teal-dk);
  border-radius:var(--radius-sm);display:grid;place-items:center;flex-shrink:0;
}
.search-empty-suggestion-icon svg{width:16px;height:16px}
.search-empty-suggestion-text{flex:1;font-size:var(--fs-sm);font-weight:500;color:var(--ink)}
.search-empty-suggestion-arrow{color:var(--ink-3);transition:transform 200ms var(--ease-out)}
.search-empty-suggestion:hover .search-empty-suggestion-arrow{transform:translateX(3px);color:var(--ink)}
.search-empty-suggestion-arrow svg{width:14px;height:14px}
.pagination-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}




/* =========================================================================
   21. S2 SUPPLEMENT — Template-introduced selectors not in preview CSS
   Pieces required by the templates that the previews didn't cover directly.
   ========================================================================= */

/* Page hero — used by page.html for generic pages without a custom template */
.page-hero {
	padding: clamp(48px, 6vw, 80px) 0 clamp(24px, 3vw, 40px);
	background:
		radial-gradient(700px 400px at 0% 0%, rgba(14, 124, 123, 0.05), transparent 60%),
		var(--bg);
	border-bottom: 1px solid var(--border-soft);
}
.page-hero-inner {
	max-width: 840px;
	margin: 0 auto;
	padding: 0 var(--space-6);
}

/* Page body — applies generic page-content typography */
.page-body .wp-block-post-content,
.page-body > .wp-block-group {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* Recovery card internal title + sub (the 404 link cards) */
.recovery-card-title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: var(--fs-lg);
	letter-spacing: -0.018em;
	color: var(--ink);
	margin-bottom: 4px;
}
.recovery-card-sub {
	font-size: var(--fs-sm);
	color: var(--ink-3);
	line-height: 1.45;
}

/* Bottom CTA section base — preview's bottom-cta is dark, used inside any
   single.html style template. Make sure the wrapping section has correct
   background and padding. */
.bottom-cta-section {
	background: var(--ink);
	color: #fff;
	padding: clamp(64px, 8vw, 112px) 0;
}
.bottom-cta-section .eyebrow { color: var(--coral); }
.bottom-cta-section h2 { color: #fff; margin-bottom: var(--space-5); }
.bottom-cta-section em { color: var(--coral); font-style: normal; }
.bottom-cta-section p { color: #B8BFCB; max-width: 540px; margin: 0 auto var(--space-8); }
.bottom-cta { text-align: center; }
.bottom-cta-row {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
}
.bottom-cta-section .btn-ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}
.bottom-cta-section .btn-ghost:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.4);
}

/* =========================================================================
   alpha.17 — Self-contained styling for [aoc_posts_grid] shortcode output.
   Replicates WP block layout system's auto-injected inline styles that we
   lost by replacing wp:query / wp:post-template / wp:query-pagination
   blocks with a self-querying shortcode. Without these, the <ul> renders
   with default browser list styles and the grid has no explicit column count.
   ========================================================================= */

/* <ul class="posts-grid wp-block-post-template ..."> — full reset */
ul.posts-grid,
ul.wp-block-post-template.posts-grid,
.aoc-v2 ul.posts-grid {
	box-sizing: border-box;
	list-style: none;
	margin-top: 0;
	margin-bottom: 0;
	max-width: 100%;
	padding: 0;
}

/* Defensive: ensure 3-column desktop grid even if higher-specificity rule
   from theme.json or core/block-library tries to override. Uses minmax(0,1fr)
   to prevent intrinsic content size from blowing out columns. */
.aoc-v2 .posts-grid,
ul.posts-grid.wp-block-post-template-is-layout-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--space-6);
}

/* Fix: WP core's is-layout-constrained caps direct children at
   --wp--style--global--content-size (880px). The posts-grid needs the wide
   size (1240px) so three-column cards aren't squeezed. The constrained rule
   uses :where() (zero specificity) for max-width, but margin-left/right
   carry !important, so we must match that. */
.is-layout-constrained > .posts-grid,
.aoc-v2 .posts > .posts-grid {
	max-width: var(--wp--style--global--wide-size, 1240px) !important;
}
@media (max-width: 980px) {
	.aoc-v2 .posts-grid,
	ul.posts-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 600px) {
	.aoc-v2 .posts-grid,
	ul.posts-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Children of the grid: <li class="wp-block-post post-N post type-post ..."> wraps each card */
.aoc-v2 ul.posts-grid > li.wp-block-post,
ul.posts-grid > li.wp-block-post {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	min-width: 0; /* lets .post inside obey grid column width */
}

/* <article class="post"> inside <li> — ensure it fills the grid cell */
.aoc-v2 ul.posts-grid > li.wp-block-post > .post,
ul.posts-grid > li.wp-block-post > .post {
	width: 100%;
	box-sizing: border-box;
}

/* Pagination — replicate wp-block-query-pagination flex layout that WP was
   auto-injecting. Our pagination <nav> has class "wp-block-query-pagination
   pagination wp-block-query-pagination-is-layout-flex". */
.aoc-v2 .wp-block-query-pagination,
.wp-block-query-pagination.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2, 8px);
	align-items: center;
	justify-content: center;
}
.aoc-v2 .wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .page-numbers {
	font-family: var(--ff-body);
}


/* =========================================================================
   22. S3 — HOMEPAGE (front-page.html)
   Hero with layered ref cards, three-layer model, lane router, sample
   showcase, philosophy split, Director-Courtney strip, beta CTA, FAQ.
   ========================================================================= */
.header.scrolled{border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);}
.hero{padding: clamp(56px, 8vw, 112px) 0 clamp(48px, 7vw, 96px);
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(14,124,123,0.06), transparent 60%),
    radial-gradient(700px 400px at -5% 110%, rgba(232,89,63,0.04), transparent 55%),
    var(--bg);
  position: relative;
  overflow: hidden;}
.hero-grid{display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;}
.hero-eyebrow{display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  background: var(--teal-50);
  border: 1px solid var(--teal-tn);
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--teal-dk);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);}
.hero-eyebrow .dot{width: 8px; height: 8px;
  background: var(--teal);
  border-radius: 50%;}
.hero-headline{margin-bottom: var(--space-6);}
.hero-headline .accent{color: var(--teal);
  display: inline;}
.hero-sub{font-size: var(--fs-lg);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 540px;
  margin-bottom: var(--space-8);}
.hero-ctas{display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);}
.hero-meta{display: flex;
  gap: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  flex-wrap: wrap;}
.hero-meta-item{display: flex;
  align-items: center;
  gap: 8px;}
.hero-meta-item svg{width: 16px; height: 16px;
  color: var(--teal);
  flex-shrink: 0;}
.hero-visual{position: relative;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;}
.ref-card{position: absolute;
  width: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  transition: transform 400ms var(--ease-out);}
.ref-card-1{transform: rotate(-6deg) translate(-90px, -40px);
  z-index: 1;
  opacity: 0.7;}
.ref-card-2{transform: rotate(3deg) translate(60px, 50px);
  z-index: 2;
  opacity: 0.85;}
.ref-card-3{transform: rotate(-1deg) translate(-10px, 0);
  z-index: 3;
  box-shadow: var(--shadow-xl);}
.hero-visual:hover .ref-card-1{transform: rotate(-8deg) translate(-110px, -50px);}
.hero-visual:hover .ref-card-2{transform: rotate(5deg) translate(80px, 60px);}
.hero-visual:hover .ref-card-3{transform: rotate(-1deg) translate(-10px, -5px);}
.ref-card-tag{display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--teal-50);
  color: var(--teal-dk);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: var(--radius-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;}
.ref-card-title{font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 10px;}
.ref-card-meta{display: flex;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--ink-3);
  margin-bottom: var(--space-4);}
.ref-card-lines{display: flex;
  flex-direction: column;
  gap: 8px;}
.ref-line{height: 8px;
  background: var(--bg-soft-2);
  border-radius: 3px;}
.ref-line:nth-child(1){width: 92%;}
.ref-line:nth-child(2){width: 78%;}
.ref-line:nth-child(3){width: 85%;}
.ref-line.accent{background: var(--coral-tn); width: 45%; height: 8px;}
.hero-chip{position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 14px 8px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-md);
  font-size: var(--fs-xs);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: var(--ink-2);
  z-index: 4;}
.hero-chip-1{top: 12%;
  right: 6%;
  animation: float 6s ease-in-out infinite;}
.hero-chip-2{bottom: 14%;
  left: 4%;
  animation: float 6s ease-in-out infinite 2s;}
.hero-chip-icon{width: 24px; height: 24px;
  background: var(--teal-50);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--teal);}
.hero-chip-icon svg{width: 12px; height: 12px;}
.layers{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);}
.layer-card{background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8) var(--space-8);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
  position: relative;
  overflow: hidden;}
.layer-card:hover{transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal-tn);}
.layer-num{font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-6);}
.layer-icon{width: 52px; height: 52px;
  background: var(--teal-50);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--teal);
  margin-bottom: var(--space-6);}
.layer-icon svg{width: 24px; height: 24px;}
.layer-card h3{font-size: var(--fs-xl);
  margin-bottom: var(--space-3);}
.layer-card p{color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-bottom: var(--space-6);}
.layer-list{list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-5);}
.layer-list li{display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--ink-2);}
.layer-list svg{width: 14px; height: 14px;
  color: var(--teal);
  flex-shrink: 0;}
.lanes{display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);}
.lane{background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: all 200ms var(--ease-out);
  position: relative;
  overflow: hidden;
  min-height: 240px;}
.lane::after{content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1.5px solid transparent;
  transition: border-color 200ms ease;
  pointer-events: none;}
.lane:hover{transform: translateY(-3px);
  box-shadow: var(--shadow-md);}
.lane:hover::after{border-color: var(--teal);}
.lane-code{font-family: 'Geist', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;}
.lane-name{font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.35;
  flex-grow: 1;}
.lane-foot{display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);}
.lane-arrow{width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: all 200ms var(--ease-out);}
.lane-arrow svg{width: 12px; height: 12px;}
.lane:hover .lane-arrow{background: var(--teal);
  color: #fff;}
.sample{background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  box-shadow: var(--shadow-md);}
.sample-content{padding: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;}
.sample-content .eyebrow{margin-bottom: var(--space-3);}
.sample-content h2{margin-bottom: var(--space-5); font-size: var(--fs-3xl);}
.sample-content p{color: var(--ink-2);
  margin-bottom: var(--space-6);
  font-size: var(--fs-base);
  line-height: 1.6;}
.sample-stats{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  background: var(--bg-soft);
  border-radius: var(--radius-md);}
.sample-stat .num{font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--ink);}
.sample-stat .label{font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;}
.sample-visual{background:
    linear-gradient(135deg, var(--teal) 0%, var(--teal-dk) 100%);
  padding: var(--space-12);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;}
.sample-visual::before{content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(circle at 75% 80%, rgba(232,89,63,0.2), transparent 50%);}
.sample-pdf{position: relative;
  width: 280px;
  aspect-ratio: 8.5 / 11;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4), 0 20px 40px -10px rgba(0,0,0,0.3);
  padding: var(--space-6);
  transform: rotate(-3deg);
  transition: transform 400ms var(--ease-out);}
.sample-pdf:hover{transform: rotate(-1deg) scale(1.03);}
.sample-pdf-tag{display: inline-block;
  padding: 4px 10px;
  background: var(--coral);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  border-radius: var(--radius-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);}
.sample-pdf h4{font-size: 1rem;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
  color: var(--ink);
  line-height: 1.25;}
.sample-pdf-section{border-top: 1px solid var(--border-soft);
  padding-top: var(--space-3);
  margin-bottom: var(--space-3);}
.sample-pdf-section-label{font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  color: var(--teal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;}
.sample-pdf-lines{display: flex;
  flex-direction: column;
  gap: 5px;}
.sample-pdf-line{height: 5px;
  background: var(--bg-soft-2);
  border-radius: 2px;}
.sample-pdf-line:nth-child(odd){width: 90%;}
.sample-pdf-line:nth-child(even){width: 70%;}
.philosophy{display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-16);
  align-items: start;}
.philosophy-side .eyebrow{margin-bottom: var(--space-4); display: inline-block;}
.philosophy-side h2{font-size: var(--fs-3xl);
  line-height: 1.05;}
.philosophy-body p{font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: var(--space-5);}
.philosophy-body p:last-child{margin-bottom: 0;}
.philosophy-body strong{color: var(--ink);
  font-weight: 600;}
.createdby{display: flex;
  align-items: center;
  gap: var(--space-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  max-width: 760px;
  margin: 0 auto;}
.createdby-avatar{width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-dark);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--teal-50), var(--shadow-sm);}
.createdby-avatar img{width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;}
.createdby-avatar.fallback{background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dk) 100%);
  display: grid;
  place-items: center;}
.createdby-avatar.fallback::before{content: 'CB';
  color: #fff;
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;}
.createdby-text{flex-grow: 1;}
.createdby-eyebrow{font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;}
.createdby-name{font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 2px;}
.createdby-bio{font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.45;}
.createdby-link{font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--teal-dk);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: gap 150ms ease;}
.createdby-link svg{width: 12px; height: 12px;}
.createdby-link:hover{gap: 8px;}
.beta-cta{text-align: center;
  max-width: 640px;
  margin: 0 auto;}
.beta-cta .eyebrow{color: var(--coral); margin-bottom: var(--space-5); display: inline-block;}
.beta-cta h2{color: #fff;
  margin-bottom: var(--space-5);
  font-size: var(--fs-4xl);}
.beta-cta h2 em{color: var(--coral);
  font-style: normal;}
.beta-cta p{color: #B8BFCB;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-8);
  line-height: 1.5;}
.beta-form{display: flex;
  gap: var(--space-2);
  max-width: 460px;
  margin: 0 auto var(--space-6);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  padding: 6px;}
.beta-input{flex-grow: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-family: 'Inter Tight', sans-serif;
  font-size: var(--fs-sm);
  padding: 10px 16px;}
.beta-input::placeholder{color: #6B7280;}
.beta-progress{display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
  margin: 0 auto;}
.beta-progress-bar{height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;}
.beta-progress-fill{width: 18%;
  height: 100%;
  background: var(--coral);
  border-radius: var(--radius-pill);}
.beta-progress-meta{display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: #9CA3AF;
  text-transform: uppercase;}
.faq{max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);}
.faq-item{background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 200ms ease;}
.faq-item:hover{border-color: var(--border-strong);}
.faq-item[open]{border-color: var(--teal);}
.faq-summary{list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink);
  letter-spacing: -0.012em;}
.faq-summary::-webkit-details-marker{display: none;}
.faq-icon{width: 24px; height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition: transform 200ms ease, color 200ms ease;}
.faq-item[open] .faq-icon{transform: rotate(45deg);
  color: var(--teal);}
.faq-icon svg{width: 14px; height: 14px;}
.faq-body{padding: 0 var(--space-6) var(--space-6);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.6;}
.faq-foot{text-align: center;
  margin-top: var(--space-8);}
.reveal.in{opacity: 1;
  transform: translateY(0);}
.mobile-menu.open{opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 0s;}
.mobile-menu.open .mobile-menu-inner{transform: translateY(0);
  opacity: 1;}
.back-to-top.show{opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 300ms var(--ease-out), visibility 0s linear 0s, transform 300ms var(--ease-out), background 150ms ease;}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr; gap: var(--space-12);}
}
@media (max-width: 980px){
  .hero-visual{height: 400px;}
}
@media (max-width: 900px){
  .layers{grid-template-columns: 1fr; gap: var(--space-4);}
}
@media (max-width: 1024px){
  .lanes{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 540px){
  .lanes{grid-template-columns: 1fr;}
}
@media (max-width: 880px){
  .sample{grid-template-columns: 1fr;}
}
@media (max-width: 900px){
  .philosophy{grid-template-columns: 1fr; gap: var(--space-8);}
}
@media (max-width: 600px){
  .createdby{flex-direction: column; text-align: center; padding: var(--space-6);}
}
@media (max-width: 480px){
  .beta-form{flex-direction: column; border-radius: var(--radius-md); padding: 8px;}
}


/* =========================================================================
   23. S3 — LIBRARY (page-library.html)
   Library hero with stats, featured sample card, domain sections with
   guide cards.
   ========================================================================= */
.header.scrolled{border-bottom-color: var(--border); box-shadow: var(--shadow-sm);}
.lib-hero{padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 5vw, 56px);
  background:
    radial-gradient(800px 400px at 85% -20%, rgba(14,124,123,0.06), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border-soft);}
.lib-hero-eyebrow{display: inline-block; margin-bottom: var(--space-4);}
.lib-hero h1{font-size: clamp(2.25rem, 1.9rem + 1.7vw, 3.5rem); margin-bottom: var(--space-5); max-width: 720px;}
.lib-hero h1 .accent{color: var(--teal);}
.lib-hero-sub{font-size: var(--fs-lg); color: var(--ink-2); max-width: 640px; line-height: 1.55; margin-bottom: var(--space-8);}
.lib-stats{display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);}
.lib-stat{display: flex;
  flex-direction: column;
  gap: 4px;}
.lib-stat-num{font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;}
.lib-stat-label{font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);}
.featured-content{position: relative; z-index: 1;}
.featured-eyebrow{display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-5);}
.featured-dot{width: 8px; height: 8px; background: var(--coral); border-radius: 50%;}
.featured-meta-item{display: flex; flex-direction: column; gap: 2px;}
.featured-meta-num{font-family: 'Geist', sans-serif; font-weight: 700; font-size: 1.5rem; color: #fff; letter-spacing: -0.03em; line-height: 1;}
.featured-meta-label{font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); text-transform: uppercase;}
.btn-coral-on-dark{background: var(--coral); color: #fff; border-color: var(--coral);}
.btn-coral-on-dark:hover{background: var(--coral-dk); border-color: var(--coral-dk); transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(232,89,63,0.5);}
.featured-visual{position: relative; z-index: 1; display: grid; place-items: center;}
.featured-pdf{position: relative;
  width: 240px;
  aspect-ratio: 8.5/11;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4), 0 20px 40px -10px rgba(0,0,0,0.3);
  padding: var(--space-5);
  transform: rotate(-3deg);
  transition: transform 400ms var(--ease-out);}
.featured-pdf:hover{transform: rotate(-1deg) scale(1.03);}
.featured-pdf-tag{display: inline-block; padding: 3px 8px; background: var(--coral); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 500; border-radius: var(--radius-xs); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-3);}
.featured-pdf h4{font-size: 0.9375rem; color: var(--ink); margin-bottom: var(--space-3); line-height: 1.25;}
.featured-pdf-section{border-top: 1px solid var(--border-soft); padding-top: 10px; margin-bottom: 10px;}
.featured-pdf-section-label{font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; color: var(--teal); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px;}
.featured-pdf-lines{display: flex; flex-direction: column; gap: 4px;}
.featured-pdf-line{height: 4px; background: var(--bg-soft-2); border-radius: 2px;}
.featured-pdf-line:nth-child(odd){width: 90%;}
.featured-pdf-line:nth-child(even){width: 70%;}
.domain{padding: var(--space-12) 0 var(--space-8);
  border-top: 1px solid var(--border-soft);}
.domain:first-of-type{border-top: 0;}
.domain-head{display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;}
.domain-title-block{display: flex; flex-direction: column; gap: 6px;}
.domain-title{font-family: 'Geist', sans-serif; font-weight: 700; font-size: var(--fs-xl); letter-spacing: -0.02em; color: var(--ink);}
.domain-meta{font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);}
.domain-view-all{font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: var(--fs-sm); color: var(--teal-dk); display: inline-flex; align-items: center; gap: 4px; transition: gap 150ms ease;}
.domain-view-all:hover{gap: 8px;}
.domain-view-all svg{width: 12px; height: 12px;}
.guides{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);}
.guide{background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: all 200ms var(--ease-out);
  position: relative;
  overflow: hidden;
  min-height: 220px;}
.guide:hover{transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal-tn);}
.guide-tags{display: flex; gap: 6px; flex-wrap: wrap; align-items: center;}
.guide-tag{display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 3px 8px; height: auto; white-space: nowrap;
  background: var(--teal-50);
  color: var(--teal-dk);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 500;
  border-radius: var(--radius-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;}
.guide-tag.sample{background: var(--coral-tn);
  color: var(--coral-dk);}
.guide h3{font-size: 1.0625rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  flex-grow: 1;}
.guide-meta{display: flex;
  gap: var(--space-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;}
.guide-foot{display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);}
.guide-cta{font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--ink);}
.guide-arrow{width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: all 200ms var(--ease-out);}
.guide-arrow svg{width: 12px; height: 12px;}
.guide:hover .guide-arrow{background: var(--teal); color: #fff;}
.lib-cta{margin: var(--space-16) 0 var(--space-12);
  text-align: center;
  padding: var(--space-12);
  background: var(--bg-soft);
  border-radius: var(--radius-2xl);}
.lib-cta .eyebrow{margin-bottom: var(--space-3); display: inline-block;}
.lib-cta h2{font-size: var(--fs-2xl); margin-bottom: var(--space-4);}
.lib-cta p{color: var(--ink-2); font-size: var(--fs-base); margin-bottom: var(--space-6); max-width: 480px; margin-left: auto; margin-right: auto;}
.mobile-menu.open{opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-out), visibility 0s linear 0s;}
.mobile-menu.open .mobile-menu-inner{transform: translateY(0); opacity: 1;}
.back-to-top.show{opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 300ms var(--ease-out), visibility 0s linear 0s, transform 300ms var(--ease-out), background 150ms ease;}
.filter-empty{text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;}

@media (max-width: 980px){
  .guides{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 600px){
  .guides{grid-template-columns: 1fr;}
}


/* =========================================================================
   24. S3 — BETA SIGNUP (page-beta-signup.html)
   Two-column hero with seat counter + benefits list on the left, signup
   form card on the right.
   ========================================================================= */
.header.scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.beta-hero{padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px);
  background:
    radial-gradient(800px 500px at 100% 0%,rgba(14,124,123,.07),transparent 60%),
    radial-gradient(600px 400px at 0% 100%,rgba(232,89,63,.04),transparent 55%),
    var(--bg);}
.beta-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--space-16);align-items:start}
.beta-hero-content{padding-top:var(--space-4)}
.beta-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;background:var(--teal-50);border:1px solid var(--teal-tn);border-radius:var(--radius-pill);font-family:'JetBrains Mono',monospace;font-size:var(--fs-xs);font-weight:500;color:var(--teal-dk);letter-spacing:.04em;margin-bottom:var(--space-5)}
.beta-eyebrow .dot{width:8px;height:8px;background:var(--teal);border-radius:50%;animation:promo-pulse 2.2s ease-in-out infinite}
.beta-hero h1{font-size:clamp(2.25rem,1.8rem + 2.2vw,3.75rem);margin-bottom:var(--space-5)}
.beta-hero h1 .accent{color:var(--teal)}
.beta-hero-lede{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:var(--ink-2);line-height:1.55;margin-bottom:var(--space-8);max-width:520px;letter-spacing:-.008em}
.seat-counter{padding:var(--space-5) var(--space-6);background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--space-6);max-width:520px}
.seat-counter-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-3);gap:var(--space-3);flex-wrap:wrap}
.seat-counter-label{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.seat-counter-count{font-family:'Geist',sans-serif;font-weight:700;font-size:var(--fs-base);color:var(--ink);letter-spacing:-.015em}
.seat-counter-count strong{color:var(--coral-dk)}
.seat-counter-bar{height:6px;background:var(--bg-soft-2);border-radius:var(--radius-pill);overflow:hidden;position:relative}
.seat-counter-fill{height:100%;background:linear-gradient(90deg,var(--teal) 0%,var(--coral) 100%);border-radius:var(--radius-pill);width:53%;transition:width 600ms var(--ease-out)}
.beta-benefits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3);max-width:520px}
.beta-benefits li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.beta-benefits .check{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--teal-50);color:var(--teal-dk);display:grid;place-items:center;margin-top:1px}
.beta-benefits .check svg{width:11px;height:11px}
.beta-benefits strong{color:var(--ink);font-weight:600}
.signup-card{background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-2xl);
  padding:clamp(28px,4vw,40px);
  box-shadow:var(--shadow-md);
  position:relative;}
.signup-card-head{margin-bottom:var(--space-6);padding-bottom:var(--space-5);border-bottom:1px solid var(--border-soft)}
.signup-card-head .eyebrow{display:inline-block;margin-bottom:var(--space-3)}
.signup-card-head h2{font-size:var(--fs-2xl);letter-spacing:-.025em;margin-bottom:var(--space-2)}
.signup-card-head p{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}
.form-grid{display:flex;flex-direction:column;gap:var(--space-5)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.field-label{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:var(--fs-sm);color:var(--ink);letter-spacing:-.005em;display:flex;align-items:center;gap:6px}
.field-label .required{color:var(--coral-dk);font-weight:600}
.field-label .optional{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);font-weight:500;background:var(--bg-soft);padding:2px 6px;border-radius:var(--radius-xs);margin-left:auto}
.input,.select,.textarea{width:100%;
  padding:11px 14px;
  font-family:'Inter Tight',sans-serif;
  font-size:var(--fs-base);
  color:var(--ink);
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  transition:border-color 150ms ease,box-shadow 150ms ease,background 150ms ease;
  -webkit-appearance:none;appearance:none;
  line-height:1.4;}
.input::placeholder{color:var(--ink-mute)}
.input:focus,.select:focus,.textarea:focus{outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-50);}
.input:hover:not(:focus),.select:hover:not(:focus){border-color:var(--border-strong)}
.select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:14px;
  padding-right:40px;
  cursor:pointer;}
.field.is-valid .input,.field.is-valid .select{border-color:var(--success);background:var(--success-tn) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C7B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat right 14px center;background-size:16px;padding-right:40px}
.field.is-valid .select{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C7B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat right 14px center,var(--success-tn);background-size:16px;padding-right:40px}
.field.is-invalid .input,.field.is-invalid .select{border-color:var(--error);background:var(--error-tn) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C84229' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") no-repeat right 14px center;background-size:16px;padding-right:40px}
.field-help,.field-error{font-size:.78rem;line-height:1.4;font-family:'Inter Tight',sans-serif;letter-spacing:-.005em}
.field-help{color:var(--ink-3)}
.field-error{color:var(--error);display:none;align-items:center;gap:4px}
.field.is-invalid .field-error{display:flex}
.field.is-invalid .field-help{display:none}
.field-error svg{width:12px;height:12px;flex-shrink:0}
.checkbox-row{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:var(--radius-md);cursor:pointer;transition:all 150ms ease}
.checkbox-row:hover{background:var(--teal-50);border-color:var(--teal-tn)}
.checkbox-row input[type="checkbox"]{flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:var(--teal);cursor:pointer}
.checkbox-row-label{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.checkbox-row-label strong{color:var(--ink);font-weight:600}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.submit-row{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4)}
.submit-btn{width:100%;padding:14px 28px;font-size:var(--fs-base)}
.submit-btn .spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 800ms linear infinite}
.submit-btn[aria-busy="true"] .btn-label{opacity:.6}
.submit-btn[aria-busy="true"] .spinner{display:inline-block}
.submit-btn[aria-busy="true"] .btn-arrow{display:none}
.submit-meta{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.04em;color:var(--ink-3);text-align:center;line-height:1.5}
.form-error-banner{display:none;padding:var(--space-4);background:var(--error-tn);border:1px solid var(--error);border-radius:var(--radius-md);color:var(--error);font-size:var(--fs-sm);font-weight:500;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-5);line-height:1.5}
.form-error-banner.show{display:flex}
.form-error-banner svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.signup-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:var(--space-8) var(--space-5)}
.signup-success.show{display:flex}
.signup-success-icon{width:72px;height:72px;border-radius:50%;background:var(--teal-50);color:var(--teal-dk);display:grid;place-items:center;margin-bottom:var(--space-5);box-shadow:0 0 0 8px var(--teal-50)/40;animation:success-pop 500ms var(--ease-out)}
.signup-success-icon svg{width:32px;height:32px}
.signup-success h3{font-size:var(--fs-2xl);margin-bottom:var(--space-3);letter-spacing:-.025em}
.signup-success p{font-size:var(--fs-base);color:var(--ink-2);line-height:1.6;margin-bottom:var(--space-5);max-width:380px}
.signup-success-meta{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--space-6);padding:var(--space-3) var(--space-4);background:var(--bg-soft);border-radius:var(--radius-pill)}
.signup-success-meta strong{color:var(--ink);font-weight:600;letter-spacing:.04em}
.signup-success-actions{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:280px}
.state-toggle{position:fixed;bottom:24px;left:24px;z-index:120;
  background:var(--ink);color:#fff;
  border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);
  box-shadow:var(--shadow-lg);
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;letter-spacing:.04em;
  display:flex;flex-direction:column;gap:6px;
  max-width:220px;}
.state-toggle-label{color:#9CA3AF;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:2px}
.state-toggle-row{display:flex;gap:4px;flex-wrap:wrap}
.state-btn{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;padding:4px 8px;border-radius:var(--radius-sm);font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.04em;cursor:pointer;transition:all 150ms ease}
.state-btn:hover{background:rgba(255,255,255,.08)}
.state-btn.active{background:var(--coral);border-color:var(--coral);color:#fff}
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);max-width:1080px;margin:0 auto}
.ledger-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-2xl);padding:clamp(28px,3.5vw,40px)}
.ledger-card.included{border-color:var(--teal-tn);background:linear-gradient(180deg,#fff 0%,var(--teal-50) 100%)}
.ledger-card.excluded{border-color:var(--border)}
.ledger-card-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-soft)}
.ledger-card.included .ledger-card-head{border-bottom-color:var(--teal-tn)}
.ledger-icon{width:36px;height:36px;border-radius:var(--radius-md);display:grid;place-items:center;flex-shrink:0}
.ledger-card.included .ledger-icon{background:var(--teal);color:#fff}
.ledger-card.excluded .ledger-icon{background:var(--bg-soft);color:var(--ink-3)}
.ledger-icon svg{width:18px;height:18px}
.ledger-card-title{font-family:'Geist',sans-serif;font-weight:700;font-size:var(--fs-lg);letter-spacing:-.018em;color:var(--ink)}
.ledger-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.ledger-list li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}
.ledger-list li strong{color:var(--ink);font-weight:600}
.ledger-mark{flex-shrink:0;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;margin-top:1px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.7rem}
.ledger-card.included .ledger-mark{background:var(--teal);color:#fff}
.ledger-card.excluded .ledger-mark{background:var(--bg-soft-2);color:var(--ink-3)}
.ledger-mark svg{width:10px;height:10px}
.timeline{max-width:760px;margin:0 auto;position:relative;padding-left:var(--space-12)}
.timeline::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(to bottom,var(--teal) 0%,var(--coral) 100%);border-radius:var(--radius-pill)}
.timeline-step{position:relative;padding:var(--space-5) 0;display:flex;flex-direction:column;gap:var(--space-2)}
.timeline-step::before{content:"";position:absolute;left:calc(var(--space-12) * -1 + 16px);top:var(--space-6);width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--teal);box-shadow:0 0 0 4px var(--bg)}
.timeline-step:last-child::before{border-color:var(--coral)}
.timeline-step-when{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.timeline-step-title{font-family:'Geist',sans-serif;font-weight:600;font-size:var(--fs-lg);letter-spacing:-.018em;color:var(--ink)}
.timeline-step-desc{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55;max-width:580px}
.faq{display:flex;flex-direction:column;gap:var(--space-3);max-width:760px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color 200ms ease}
.faq-item:hover{border-color:var(--border-strong)}
.faq-item[open]{border-color:var(--teal-tn)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);cursor:pointer;list-style:none;font-family:'Geist',sans-serif;font-weight:600;font-size:var(--fs-base);letter-spacing:-.015em;color:var(--ink);transition:background 150ms ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--bg-soft)}
/* alpha.11: removed .faq-item summary::after chevron pseudo-element.
   The home and /beta/ FAQ markup uses an inline <span class="faq-icon">
   that emits a plus SVG (rotating 45deg to X on [open]). The pseudo
   chevron added a second redundant icon on top of it, breaking the
   visual. Kept .faq-icon styling at lines 2257-2265 + 3907-3915. */
.faq-body{padding:0 var(--space-6) var(--space-6);font-size:var(--fs-base);color:var(--ink-2);line-height:1.65}
.faq-body p{margin-bottom:var(--space-3)}
.faq-body p:last-child{margin-bottom:0}
.faq-body strong{color:var(--ink);font-weight:600}
.mobile-menu.open{opacity:1;visibility:visible;transition:opacity 300ms var(--ease-out),visibility 0s linear 0s}
.mobile-menu.open .mobile-menu-inner{transform:translateY(0);opacity:1}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);transition:opacity 300ms var(--ease-out),visibility 0s linear 0s,transform 300ms var(--ease-out),background 150ms ease}
[data-launch-state] .ls-prelaunch,
[data-launch-state] .ls-active,
[data-launch-state] .ls-full{display:none}
[data-launch-state="prelaunch"] .ls-prelaunch{display:inline-flex}
[data-launch-state="active"] .ls-active{display:inline-flex}
[data-launch-state="full"] .ls-full{display:inline-flex}
[data-launch-state="prelaunch"] .ls-prelaunch.block,
[data-launch-state="active"] .ls-active.block,
[data-launch-state="full"] .ls-full.block{display:block}
[data-launch-state="prelaunch"] .ls-prelaunch.flex,
[data-launch-state="active"] .ls-active.flex,
[data-launch-state="full"] .ls-full.flex{display:flex}
.beta-eyebrow.prelaunch{background:var(--bg-soft);border-color:var(--border);color:var(--ink-2)}
.beta-eyebrow.prelaunch .dot{background:var(--ink-2);animation:none}
.beta-eyebrow.full-state{background:var(--coral-tn);border-color:var(--coral-tn);color:var(--coral-dk)}
.beta-eyebrow.full-state .dot{background:var(--coral);animation:none}
.prelaunch-counter{padding:var(--space-5) var(--space-6);background:var(--bg-soft);border:1px dashed var(--border-strong);border-radius:var(--radius-lg);margin-bottom:var(--space-6);max-width:520px}
.prelaunch-counter-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.prelaunch-counter-icon{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--border);display:grid;place-items:center;color:var(--teal-dk);flex-shrink:0}
.prelaunch-counter-icon svg{width:16px;height:16px}
.prelaunch-counter-title{font-family:'Geist',sans-serif;font-weight:600;font-size:var(--fs-base);color:var(--ink);letter-spacing:-.015em}
.prelaunch-counter-detail{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.04em;color:var(--ink-3);line-height:1.5;padding-left:calc(32px + var(--space-3))}
.seat-counter.full-state{border-color:var(--coral-tn);background:linear-gradient(180deg,#fff 0%,var(--coral-tn) 100%)}
.seat-counter.full-state .seat-counter-fill{width:100% !important;background:var(--coral)}
.seat-counter.full-state .seat-counter-count strong{color:var(--coral-dk)}

@media (max-width:980px){
  .beta-hero-grid{grid-template-columns:1fr;gap:var(--space-10)}
}
@media (max-width:580px){
  .form-row{grid-template-columns:1fr}
}
@media (max-width:540px){
  .state-toggle{bottom:16px;left:16px;font-size:.65rem;max-width:180px}
}
@media print{
  .state-toggle{display:none !important}
}
@media (max-width:880px){
  .ledger{grid-template-columns:1fr;gap:var(--space-5)}
}


/* =========================================================================
   25. S3 — BASELINE TEMPLATES (page-lane, page-about, page-pricing)
   Components for surfaces that did NOT have v2 preview files at S3 build
   time. Visual refinement pending dedicated preview files.
   ========================================================================= */

/* Pricing tier cards — baseline, brand-aligned */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	max-width: 1100px;
	margin: 0 auto;
}
.pricing-tier {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--space-8) var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	position: relative;
	transition: all 200ms var(--ease-out);
}
.pricing-tier:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.pricing-tier-featured {
	border-color: var(--teal);
	box-shadow: 0 0 0 1px var(--teal), var(--shadow-lg);
}
.pricing-tier-flag {
	position: absolute;
	top: calc(var(--space-4) * -1);
	left: 50%;
	transform: translateX(-50%);
	background: var(--teal);
	color: #fff;
	font-family: var(--ff-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.pricing-tier-eyebrow {
	font-family: var(--ff-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.pricing-tier-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--ff-display);
}
.pricing-tier-currency {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--ink-2);
}
.pricing-tier-amount {
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ink);
	line-height: 1;
}
.pricing-tier-amount-text {
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink);
}
.pricing-tier-period {
	font-family: var(--ff-body);
	font-size: 0.95rem;
	color: var(--ink-3);
	font-weight: 500;
}
.pricing-tier-sub {
	font-size: 0.85rem;
	color: var(--ink-3);
}
.pricing-tier-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex-grow: 1;
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-soft);
}
.pricing-tier-features li {
	font-size: 0.9rem;
	color: var(--ink-2);
	line-height: 1.45;
	padding-left: var(--space-5);
	position: relative;
}
.pricing-tier-features li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--teal);
	border-bottom: 2px solid var(--teal);
	transform: rotate(-45deg);
}
.pricing-tier-features li strong {
	color: var(--ink);
	font-weight: 600;
}
.pricing-tier-cta {
	width: 100%;
	justify-content: center;
}
@media (max-width: 980px) {
	.pricing-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* About + Lane shared baseline (hero variants of page-hero/article-hero
   already provided by S2 + S3 homepage CSS) */
.lane-hero,
.about-hero,
.pricing-hero {
	background:
		radial-gradient(700px 400px at 0% 0%, rgba(14,124,123,0.05), transparent 60%),
		radial-gradient(500px 300px at 100% 100%, rgba(232,89,63,0.03), transparent 60%),
		var(--bg);
	border-bottom: 1px solid var(--border-soft);
}
.about-hero-lede,
.pricing-hero-lede {
	color: var(--ink-2);
	max-width: 720px;
	margin-top: var(--space-4);
}
.lane-badge {
	display: inline-block;
	background: var(--teal-50);
	color: var(--teal-dk);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
}



/* =========================================================================
   26. S4 — PHP INTEGRATION LAYER (launch state, signup states, form
   feedback, filter behavior, TOC highlight, clickable cards)
   ========================================================================= */

/* Launch-state variant visibility.
   The .ls-prelaunch / .ls-active / .ls-full elements are all present in
   the DOM. CSS shows only the one matching the body class emitted by
   inc/launch-state.php. Default body class (no aoc-launch-*) reveals .ls-active. */
.ls-prelaunch,
.ls-full {
	display: none;
}
.ls-active {
	display: block;
}
body.aoc-launch-prelaunch .ls-prelaunch { display: block; }
body.aoc-launch-prelaunch .ls-active,
body.aoc-launch-prelaunch .ls-full     { display: none; }

body.aoc-launch-active .ls-active   { display: block; }
body.aoc-launch-active .ls-prelaunch,
body.aoc-launch-active .ls-full     { display: none; }

body.aoc-launch-full .ls-full       { display: block; }
body.aoc-launch-full .ls-active,
body.aoc-launch-full .ls-prelaunch  { display: none; }

/* Inline-flex variants for spans that need to flow inline with text. */
.beta-eyebrow.ls-active,
.beta-eyebrow.ls-prelaunch,
.beta-eyebrow.ls-full {
	display: none;
}
body.aoc-launch-prelaunch .beta-eyebrow.ls-prelaunch,
body.aoc-launch-active .beta-eyebrow.ls-active,
body.aoc-launch-full .beta-eyebrow.ls-full {
	display: inline-flex;
}

/* Submit button label switching: spans should be inline. */
.btn-label .ls-prelaunch,
.btn-label .ls-active,
.btn-label .ls-full {
	display: none;
}
body.aoc-launch-prelaunch .btn-label .ls-prelaunch,
body.aoc-launch-active .btn-label .ls-active,
body.aoc-launch-full .btn-label .ls-full {
	display: inline;
}

/* Prelaunch counter (alternative to seat-counter when not yet open). */
.prelaunch-counter {
	border: 1.5px dashed var(--teal);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-5);
	margin: var(--space-5) 0;
	background: var(--teal-50);
}
.prelaunch-counter-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: 6px;
}
.prelaunch-counter-icon {
	width: 28px;
	height: 28px;
	color: var(--teal-dk);
	flex-shrink: 0;
}
.prelaunch-counter-icon svg {
	width: 100%;
	height: 100%;
}
.prelaunch-counter-title {
	font-family: var(--ff-display);
	font-weight: 600;
	color: var(--ink);
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}
.prelaunch-counter-detail {
	font-size: 0.85rem;
	color: var(--ink-3);
	line-height: 1.5;
}

/* Signup success state — toggled visible by beta-signup.js after a 200 response */
.signup-success {
	display: none;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--space-8) var(--space-7);
	text-align: center;
	box-shadow: var(--shadow-md);
}
.signup-success.is-visible {
	display: block;
	animation: aoc-success-in 280ms var(--ease-out) both;
}
@keyframes aoc-success-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.signup-success-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto var(--space-4);
	background: var(--teal);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.signup-success-icon svg {
	width: 28px;
	height: 28px;
}
.signup-success h3.display {
	margin-bottom: var(--space-3);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.signup-success-msg {
	color: var(--ink-2);
	line-height: 1.5;
	max-width: 360px;
	margin: 0 auto;
}

/* Form error banner */
.form-error-banner {
	display: none;
	background: #FEF2F2;
	border: 1px solid #FCA5A5;
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-4);
	color: #991B1B;
	font-size: 0.9rem;
	line-height: 1.45;
	gap: var(--space-3);
	align-items: flex-start;
}
.form-error-banner.is-visible {
	display: flex;
}
.form-error-banner svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: #991B1B;
	margin-top: 2px;
}
.form-error-banner a {
	color: #991B1B;
	font-weight: 600;
}

/* Field has-error state */
.field.has-error .input,
.field.has-error .select {
	border-color: #DC2626;
	box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}
.field .field-error {
	display: none;
	color: #DC2626;
	font-size: 0.825rem;
	margin-top: 6px;
	gap: 6px;
	align-items: center;
}
.field.has-error .field-error {
	display: inline-flex;
}
.field-error svg {
	width: 14px;
	height: 14px;
}

/* Submit button busy state */
.btn[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
	position: relative;
}
.btn[aria-busy="true"] .arrow-svg {
	display: none;
}
.btn[aria-busy="true"]::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: aoc-spin 0.7s linear infinite;
	margin-left: 8px;
}
@keyframes aoc-spin {
	to { transform: rotate(360deg); }
}

/* Filter behavior — items hidden by the JS filter via .is-filtered-out */
.is-filtered-out {
	display: none !important;
}

/* TOC active section highlight */
.toc-list a.toc-active {
	color: var(--teal-dk);
	font-weight: 600;
	background: var(--teal-50);
}
.toc-list .toc-sub a {
	padding-left: var(--space-5);
	font-size: 0.85rem;
	color: var(--ink-3);
}
.toc-list .toc-sub a.toc-active {
	color: var(--teal-dk);
}

/* Clickable card affordance */
.is-clickable {
	cursor: pointer;
}
.is-clickable:focus-within {
	outline: 2px solid var(--teal);
	outline-offset: 4px;
}

/* Anchor heading offset for sticky header — apply to article h2/h3 with id */
.article-content h2[id],
.article-content h3[id] {
	scroll-margin-top: 80px;
}


/* =========================================================================
   15. RESPONSIVE OVERRIDES (all top-level @media, source-ordered)
   Component base CSS appears earlier in this file; overrides come last.
   Engineering lesson: media queries don't add specificity — source order decides.
   ========================================================================= */

/* --- ≤880px: mobile breakpoint — hide desktop nav, show hamburger --- */
@media (max-width: 880px) {
  .site-nav { display: none; }
  .site-nav-text { display: none; }
  .site-header-desktop-cta { display: none; }
  .hamburger { display: block; }
}

/* --- ≤800px: footer collapses 4-col → 2-col --- */
@media (max-width: 800px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* --- ≤540px: FAB shrinks on small screens --- */
@media (max-width: 540px) {
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
  .back-to-top svg {
    width: 16px;
    height: 16px;
  }
}

/* --- ≤480px: footer collapses 2-col → 1-col, beta form stacks --- */
@media (max-width: 480px) {
  .site-footer-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   16. REDUCED MOTION
   Honor user OS preference. Top-level @media as required.
   ========================================================================= */
@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;
  }
}


/* =========================================================================
   17. PRINT
   Hide non-essential chrome.
   ========================================================================= */
@media print {
  .site-header,
  .site-footer,
  .promo-bar,
  .back-to-top,
  .mobile-menu,
  .hamburger {
    display: none !important;
  }
  body { color: #000; background: #fff; }
}

/* End of stylesheet — v2.0.0-alpha.8 (S3 page-template CSS added; closes "every page broken" rendering gap) */


/* ---- Invented classes (used in templates + migrated content; no preview source) ---- */

/* Lead paragraph — emphasized intro under section heading */
.lede {
	font-size: var(--fs-prose);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 70ch;
}
.section .lede { margin-bottom: var(--space-8); }

/* Fineprint — small disclosure / disclaimer text */
.fineprint {
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--ink-3);
	max-width: 70ch;
	margin-top: var(--space-6);
}
.fineprint em { font-style: italic; }
.fineprint strong { color: var(--ink-2); font-weight: 600; }

/* Check-list — bullet list with check icons (Beta benefits list) */
.check-list {
	list-style: none;
	padding: 0;
	margin: var(--space-6) 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.check-list li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.55;
	color: var(--ink-2);
	font-size: var(--fs-base);
}
.check-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: var(--teal-tn);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C7B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.75rem 0.75rem;
}

/* Four-layer review grid — About page */
.four-layer {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	margin: var(--space-8) 0;
}
@media (max-width: 720px) {
	.four-layer { grid-template-columns: 1fr; }
}
.four-layer .layer {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-6) var(--space-5);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.four-layer .layer:hover {
	border-color: var(--teal);
	box-shadow: var(--shadow-md);
}
.four-layer .layer-num {
	font-family: var(--ff-mono);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--teal);
	letter-spacing: 0.08em;
}
.four-layer .layer h3 {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0;
}
.four-layer .layer p {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
}

/* Template body wrappers — these are <section> wrappers around wp:post-content
   for each page template. Strip any inherited section padding since the parent
   <section> already handles spacing. */
.lane-body,
.about-body,
.beta-body,
.library-domains {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 4vw, 32px);
	padding-right: clamp(20px, 4vw, 32px);
}

/* The lane-body wrapper is the parent <section> in page-lane.html template.
   When it has padding-top/bottom from inline style, the inner .section
   children duplicate that padding. Reset top/bottom inside body wrappers. */
.lane-body > .section:first-child,
.about-body > .section:first-child,
.beta-body > .section:first-child,
.library-domains > .section:first-child {
	padding-top: 0;
}

/* Hero-text container (homepage hero text column) */
.hero-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: flex-start;
}

/* FAQ accordion (full set — beta + homepage) */
.faq-item {
	border-bottom: 1px solid var(--border);
	padding: var(--space-4) 0;
}
.faq-item[open] { padding-bottom: var(--space-5); }
.faq-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.015em;
	line-height: 1.3;
	padding: var(--space-2) 0;
	transition: color 200ms var(--ease-out);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { color: var(--teal-dk); }
.faq-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid var(--border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-3);
	transition: transform 250ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.faq-icon svg { width: 14px; height: 14px; }
.faq-item[open] .faq-icon {
	transform: rotate(45deg);
	background: var(--teal);
	color: #fff;
	border-color: var(--teal);
}
.faq-body {
	padding-top: var(--space-4);
	color: var(--ink-2);
	font-size: var(--fs-base);
	line-height: 1.6;
}
.faq-foot {
	margin-top: var(--space-8);
	text-align: center;
}

/* btn-light-ghost — outlined button for use on light surfaces */
.btn-light-ghost {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--border-strong);
}
.btn-light-ghost:hover {
	background: var(--bg-soft);
	border-color: var(--ink-3);
	color: var(--ink);
}

/* Section primitive — base for all page sections (used as a normaliser
   when the homepage preview's full .section ruleset isn't applied — these
   declarations are idempotent / additive and safe to repeat) */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--ink); color: #fff; }
.section-dark .eyebrow { color: rgba(255,255,255,0.6); }
.section-dark .lede { color: rgba(255,255,255,0.85); }
.section-dark .fineprint { color: rgba(255,255,255,0.55); }
.section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--space-12);
}

/* Search refinement (templates/search.html) */
.search { position: relative; max-width: 560px; margin: 0 auto; }
.search-input {
	width: 100%;
	padding: var(--space-4) var(--space-12) var(--space-4) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill, 999px);
	font-family: var(--ff-body);
	font-size: var(--fs-base);
	color: var(--ink);
	background: #fff;
	transition: border-color 200ms var(--ease-out);
}
.search-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tn); }
.search-icon {
	position: absolute;
	right: var(--space-4);
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-3);
	pointer-events: none;
}
.search-icon svg { width: 20px; height: 20px; }

/* End of S3 invented classes */


/* =========================================================================
   27. v1 PRESET COMPAT SHIM (alpha.9)
   Legacy block-editor preset slugs from the v1 theme used in
   operator-authored content (privacy, terms, contact, enterprise, faq,
   certifications hub, sample landing, legal pages, beta-confirmed, etc.).
   v2 theme.json doesn't define these slugs, so the underlying CSS variables
   are undefined and the has-aoc-*-color classes render with no color.
   This shim provides:
     1. Missing CSS variables so var(--wp--preset--color--aoc-X) resolves.
     2. Direct has-*-color / -background-color rules as defensive fallback.
     3. v1 component classes (.aoc-eyebrow, .aoc-card, .aoc-link-list,
        .aoc-card-title, sample-page custom classes) mapped to v2 tokens.
     4. v1 font-size preset rules.
   Allows all 18 v1-content pages to render correctly with v2 design
   tokens without per-page content migration.
   ========================================================================= */

/* CSS variable aliases — what WP emits in inline style for v1 preset usage */
:root,
.aoc-v2 {
	--wp--preset--color--aoc-navy: var(--ink);
	--wp--preset--color--aoc-text-2: var(--ink-2);
	--wp--preset--color--aoc-text-3: var(--ink-3);
	--wp--preset--color--aoc-cream: var(--bg-soft);
	--wp--preset--color--aoc-bg: var(--bg);
	--wp--preset--color--aoc-bg-soft: var(--bg-soft);
	--wp--preset--color--aoc-border: var(--border);
	--wp--preset--color--aoc-gold: var(--coral);
	--wp--preset--color--aoc-copper: var(--coral);

	--wp--preset--font-size--aoc-eyebrow: var(--fs-xs);
	--wp--preset--font-size--aoc-h1-hero: clamp(2.25rem, 1.9rem + 1.7vw, 3.5rem);
	--wp--preset--font-size--aoc-h2-section: clamp(1.875rem, 1.7rem + 0.85vw, 2.5rem);
	--wp--preset--font-size--aoc-h2-display: clamp(1.875rem, 1.7rem + 0.85vw, 2.5rem);
}

/* Defensive direct color/background class rules — work even if WP's CSS
   variable system fails for any reason. */
.has-aoc-navy-color { color: var(--ink); }
.has-aoc-text-2-color { color: var(--ink-2); }
.has-aoc-text-3-color { color: var(--ink-3); }
.has-aoc-cream-color { color: var(--bg-soft); }
.has-aoc-gold-color { color: var(--coral); }
.has-aoc-copper-color { color: var(--coral); }
.has-aoc-bg-background-color { background-color: var(--bg); }
.has-aoc-bg-soft-background-color { background-color: var(--bg-soft); }
.has-aoc-cream-background-color { background-color: var(--bg-soft); }
.has-aoc-navy-background-color { background-color: var(--ink); color: #fff; }
.has-aoc-border-color { border-color: var(--border); }

/* v1 font-size class fallbacks */
.has-aoc-eyebrow-font-size {
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-family: var(--ff-mono);
}
.has-aoc-h1-hero-font-size {
	font-size: clamp(2.25rem, 1.9rem + 1.7vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	font-family: var(--ff-display);
	font-weight: 700;
}
.has-aoc-h2-section-font-size,
.has-aoc-h2-display-font-size {
	font-size: clamp(1.875rem, 1.7rem + 0.85vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-family: var(--ff-display);
	font-weight: 700;
}

/* v1 component classes used as direct class names */
.aoc-eyebrow {
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--teal-dk);
	margin-bottom: var(--space-3);
}
.aoc-h1-hero {
	font-family: var(--ff-display);
	font-size: clamp(2.25rem, 1.9rem + 1.7vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
	margin-bottom: var(--space-5);
}
.aoc-h2-section,
.aoc-h2-display {
	font-family: var(--ff-display);
	font-size: clamp(1.875rem, 1.7rem + 0.85vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ink);
	margin-bottom: var(--space-4);
}

/* v1 link-list pattern (used in legal pages, FAQ, etc.) */
.aoc-link-list {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
}
.aoc-link-list li {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border-soft);
}
.aoc-link-list li:last-child { border-bottom: 0; }
.aoc-link-list a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: var(--ink);
	font-weight: 500;
	transition: color 150ms var(--ease-out);
}
.aoc-link-list a:hover { color: var(--teal); }

/* v1 card pattern */
.aoc-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	margin-bottom: var(--space-4);
	transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.aoc-card:hover {
	border-color: var(--teal);
	box-shadow: var(--shadow-md);
}
.aoc-card-title {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0 0 var(--space-3);
	color: var(--ink);
}

/* v1 page-895 (Specimen Collection sample) custom classes */
.aoc-sample-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	background: var(--teal-tn);
	border: 1px solid var(--teal);
	border-radius: 999px;
	font-family: var(--ff-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--teal-dk);
	font-weight: 600;
}
.aoc-sample-hero {
	padding-top: var(--space-8);
	padding-bottom: var(--space-10);
}
.aoc-sample-scope,
.aoc-sample-audience {
	font-family: var(--ff-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-top: var(--space-4);
}

/* Compact byline variant — inherits .byline, no separate rules needed.
   Documenting here so it's recognized by the audit. */
.byline--compact { }
.byline--compact .byline-meta {
	font-size: 0.7rem;
}

/* prev-next-card BEM modifier rules — wp:post-navigation-link emits
   prev-next-card--prev / prev-next-card--next, not .is-next. The existing
   .prev-next-card.is-next rules in S2 never matched. Add the BEM variants
   here. */
.prev-next-card--next {
	text-align: right;
}
.prev-next-card--next .prev-next-label {
	justify-content: flex-end;
}
.prev-next-card.is-disabled,
.prev-next-card--prev:empty,
.prev-next-card--next:empty {
	opacity: 0.45;
	pointer-events: none;
}

/* Page 895 (Specimen Collection sample) additional v1 section wrappers.
   These are layout-only wrappers — the inline style="" attribute carries
   their padding/border declarations. We declare the class names here so
   the audit doesn't flag them. */
.aoc-sample-lanes {
	display: block;
}
.aoc-sample-cta {
	display: block;
	color: #fff;
}
.aoc-sample-cta h2,
.aoc-sample-cta h3 {
	color: #fff;
}
.aoc-sample-cta p {
	color: rgba(255, 255, 255, 0.85);
}
.aoc-sample-cta a:not(.btn) {
	color: var(--teal-tn);
}

/* End of v1 preset compat shim */


/* =========================================================================
   28. DIAGNOSTIC FIX — alpha.18 (css-cascade agent, 2026-05-21)
   1. Sort/search controls missing from style.css (shortcode output)
   2. .site-main defensive rule
   3. WP is-layout-constrained override for posts grid
   ========================================================================= */

/* Sort control — dropdown next to search in filter bar */
.sort-control {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.sort-label {
	font-family: var(--ff-mono);
	font-size: .65rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 500;
	flex-shrink: 0;
}
.sort-select {
	appearance: none;
	-webkit-appearance: none;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
	background-size: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 7px 30px 7px 13px;
	font-family: var(--ff-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ink-2);
	cursor: pointer;
	transition: border-color 150ms ease;
	outline: 0;
}
.sort-select:hover { border-color: var(--ink); color: var(--ink); }
.sort-select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-50); }

/* Search clear button inside filter bar search input */
.search-clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border: 0;
	background: var(--bg-soft);
	border-radius: 50%;
	display: none; /* shown by JS when input has text */
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ink-3);
	transition: background 150ms ease, color 150ms ease;
}
.search-clear:hover { background: var(--ink); color: #fff; }
.search-clear.show { display: flex; }
.search-clear svg { width: 11px; height: 11px; }

/* Site main — defensive width rule for <main> wrapper */
.site-main {
	width: 100%;
}

/* WP is-layout-constrained override for posts grid and pagination.
   Prevents WP core's max-width: 880px from squeezing the grid
   even if a parent group block uses constrained layout. */
.posts > .posts-grid,
.posts > .wp-block-query-pagination {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* =========================================================================
   29. BLOG INDEX CASCADE FIX — alpha.19
   Root cause: S3 invented .search / .search-icon / .search-input (section 3585)
   collided with the blog filter bar markup. Those rules load later, pin the
   icon to the right with no dimensions, and WP global svg max-width blows
   the icon up. Flex align-items:stretch stretched .post-tags / .chip children.
   paginate_links() .page-numbers lacked .pagination-btn styling.
   ========================================================================= */

.filter-bar .filter-search {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
}
.filter-bar .filter-search-icon {
	position: absolute;
	left: 12px;
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-3);
	pointer-events: none;
}
.filter-bar .filter-search-icon svg {
	width: 16px;
	height: 16px;
	max-width: none;
	flex-shrink: 0;
}
.filter-bar .filter-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 36px 7px 34px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font-family: var(--ff-body);
	font-size: 0.875rem;
	color: var(--ink);
	background: #fff;
	transition: border-color 150ms ease;
}
.filter-bar .filter-search-input:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px var(--teal-50);
}
.filter-bar .filter-search-clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border: 0;
	background: var(--bg-soft);
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ink-3);
}
.filter-bar .filter-search-clear.show { display: flex; }
.filter-bar .filter-search-clear svg { width: 11px; height: 11px; max-width: none; }
.filter-bar .filter-chips { align-items: center; }
.filter-bar .chip {
	flex: 0 0 auto;
	align-self: center;
	height: auto;
	white-space: nowrap;
}
.aoc-v2 .post-tags { align-items: center; flex: 0 0 auto; }
.aoc-v2 .post-tag {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	height: auto;
	white-space: nowrap;
}
.aoc-v2 ul.posts-grid > li.wp-block-post {
	display: flex;
	flex-direction: column;
}
.aoc-v2 ul.posts-grid > li.wp-block-post > .post {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}
section.featured > .container > a.featured-card { display: block; }
.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	justify-content: center;
}
.pagination .page-numbers,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: 'Inter Tight', sans-serif;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: all 150ms ease;
}
.pagination .page-numbers:hover,
.wp-block-query-pagination .page-numbers:hover {
	border-color: var(--ink);
	background: var(--bg-soft);
}
.pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}
.pagination .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots {
	min-width: auto;
	height: auto;
	padding: 0 var(--space-2);
	border: 0;
	background: transparent;
	color: var(--ink-3);
}

/* =========================================================================
   30. SITE-WIDE CARD + LAYOUT FIX — alpha.20
   ========================================================================= */

.aoc-v2 .posts,
.aoc-v2 .library-domains {
	padding-left: var(--space-6);
	padding-right: var(--space-6);
	box-sizing: border-box;
}
@media (min-width: 1200px) {
	.aoc-v2 .posts,
	.aoc-v2 .library-domains {
		padding-left: max(var(--space-6), calc((100vw - 1200px) / 2));
		padding-right: max(var(--space-6), calc((100vw - 1200px) / 2));
	}
}
.aoc-v2 .posts > .posts-grid-wrap,
.aoc-v2 .posts > .posts-grid,
.aoc-v2 .posts > .empty-state,
.aoc-v2 .posts > nav.pagination,
.aoc-v2 .library-domains > .wp-block-post-content,
.aoc-v2 .library-domains .domain {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.aoc-v2 .post,
.aoc-v2 .guide,
.aoc-v2 .lane {
	box-sizing: border-box;
	padding: var(--space-6) !important;
}
.aoc-v2 .guide-tags,
.aoc-v2 .post-tags {
	align-items: center !important;
	flex: 0 0 auto !important;
}
.aoc-v2 .guide-tag,
.aoc-v2 .post-tag {
	display: inline-flex !important;
	align-items: center !important;
	flex: 0 0 auto !important;
	height: auto !important;
	max-height: none !important;
	white-space: nowrap !important;
}

/* =========================================================================
   31. LIVE SITE / WORDPRESS.COM FIXES — alpha.21
   Live output still uses legacy .search in some customized templates;
   mirror filter-search rules onto .filter-bar .search so S3 .search rules
   (icon pinned right, full-width svg) cannot win. Column-flex cards must
   not stretch tag rows vertically (align-items: stretch).
   ========================================================================= */

.filter-bar .filter-tools .search,
.filter-bar .filter-search {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
}
.filter-bar .filter-tools .search-icon,
.filter-bar .filter-search-icon {
	position: absolute;
	left: 12px;
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-3);
	pointer-events: none;
}
.filter-bar .filter-tools .search-icon svg,
.filter-bar .filter-search-icon svg {
	width: 16px;
	height: 16px;
	max-width: none;
	flex-shrink: 0;
}
.filter-bar .filter-tools .search-input,
.filter-bar .filter-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 36px 7px 34px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font-family: var(--ff-body);
	font-size: 0.875rem;
	color: var(--ink);
	background: #fff;
}
.filter-bar .filter-tools .search-clear,
.filter-bar .filter-search-clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border: 0;
	background: var(--bg-soft);
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.filter-bar .filter-tools .search-clear.show,
.filter-bar .filter-search-clear.show {
	display: flex;
}
.filter-bar .filter-tools .search-clear svg,
.filter-bar .filter-search-clear svg {
	width: 11px;
	height: 11px;
	max-width: none;
}
.aoc-v2 .post,
.aoc-v2 .guide {
	align-items: flex-start;
}
.aoc-v2 .post-tags,
.aoc-v2 .guide-tags {
	align-self: flex-start;
	width: auto;
	max-width: 100%;
}
.is-layout-flex.is-layout-flex {
	align-items: flex-start;
}
.aoc-v2 .post-tags .post-tag,
.aoc-v2 .guide-tags .guide-tag {
	align-self: center;
	flex-grow: 0;
}
.filter-bar .filter-row-label + p,
.filter-bar span.filter-row-label ~ p:empty {
	display: none !important;
	margin: 0;
	padding: 0;
}