/*
 * ChiefAI Design System — site-wide shared components.
 *
 * Sourced from the /services/ (AaaS) landing page aesthetic. Factored out of
 * aaas-landing.css so every rebuilt page can consume the same tokens, typography,
 * and component classes.
 *
 * Scope strategy:
 *   - Tokens (CSS custom properties) load at :root so they're available everywhere.
 *   - Component classes (.aaas-eyebrow, .aaas-pillar-card, etc.) are namespaced by
 *     class name and unscoped, safe to use anywhere.
 *   - Entry-content resets are gated on body.chiefai-rebuilt so they only affect
 *     pages explicitly opted in (via the body_class filter in functions.php).
 *
 * Fonts loaded site-wide in functions.php: Montserrat, Inter, JetBrains Mono.
 * Do NOT introduce new fonts or colors without agreement.
 */

/* =============================================
   Tokens
   ============================================= */
:root {
  /* Brand */
  --cai-navy: #0F2A47;
  --cai-navy-deep: #081527;
  --cai-navy-soft: #1A3A5C;
  --cai-navy-glow: rgba(15, 42, 71, 0.08);
  --cai-orange: #F58220;
  --cai-orange-deep: #D96E12;
  --cai-orange-glow: rgba(245, 130, 32, 0.22);
  --cai-ink: #0A0E17;
  --cai-cream: #FAFAFA;
  --cai-cream-warm: #F2F0EC;
  --cai-slate: #5C6877;
  --cai-slate-label: #7D8A9A;
  --cai-slate-soft: #9EA6B3;
  --cai-rule: #E4E6EB;
  --cai-charcoal: #1F2937;

  /* Type stacks */
  --cai-heading: 'Montserrat', -apple-system, system-ui, sans-serif;
  --cai-body: 'Inter', -apple-system, system-ui, sans-serif;
  --cai-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --cai-max: 1320px;
  --cai-pad-x: clamp(20px, 4vw, 72px);

  /* Vertical rhythm — canonical element-to-element spacing.
     Use these tokens on rebuilt pages instead of magic numbers so
     CTA blocks, eyebrows, and ledes spread the same way everywhere. */
  --cai-stack-eyebrow-h2: 14px;       /* eyebrow → H2 */
  --cai-stack-h2-lede:    22px;       /* H2 → first paragraph */
  --cai-stack-lede-cta:   40px;       /* lede / last content → CTA row */
  --cai-stack-cta-meta:   18px;       /* CTA row → small meta line below it */
  --cai-stack-section-head-body: 64px;/* section-head → section body */
}

/* Canonical CTA top-rhythm.
   Every wp:buttons inside a rebuilt page gets the same gap above it.
   Body-class scope (.chiefai-rebuilt) is the broadest reliable anchor —
   catches buttons inside aaas-section AND buttons inside section-less
   wrappers (final-ctas, contact forms, etc.). Gutenberg's auto-generated
   wp-container-core-buttons-is-layout-* rules can zero out
   block-margin-start, so we use !important to lock it. */
.chiefai-rebuilt .wp-block-buttons {
  margin-top: var(--cai-stack-lede-cta) !important;
}
/* Opt-outs: preceding element already provides the full gap, OR the
   buttons live inside a flex/grid layout that supplies its own spacing.
   Higher-specificity selectors (.chiefai-home prefix) beat the homepage-
   scoped section rules in chiefai-homepage.css. */
.chiefai-rebuilt .aaas-hero .hero-actions,
.chiefai-rebuilt .aaas-hero .wp-block-buttons,
.chiefai-rebuilt .hero-actions,
.chiefai-home .chiefai-home-readiness .wp-block-buttons,
.chiefai-home .readiness-copy .wp-block-buttons,
.chiefai-rebuilt .pp-actions,
.chiefai-rebuilt .pp-form-actions {
  margin-top: 0 !important;
}

/* =============================================
   Base resets (opt-in via body.chiefai-rebuilt)
   ============================================= */
body.chiefai-rebuilt .entry-content {
  font-family: var(--cai-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--cai-charcoal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.chiefai-rebuilt .entry-content *,
body.chiefai-rebuilt .entry-content *::before,
body.chiefai-rebuilt .entry-content *::after {
  box-sizing: border-box;
}

body.chiefai-rebuilt .entry-content > .wp-block-group.alignfull {
  margin-bottom: 0;
  padding-left: var(--cai-pad-x);
  padding-right: var(--cai-pad-x);
}
body.chiefai-rebuilt .entry-content > .wp-block-group.alignfull > * {
  max-width: var(--cai-max);
  margin-left: auto;
  margin-right: auto;
}
body.chiefai-rebuilt .entry-content > .wp-block-group.alignfull > .wp-block-group.alignfull {
  max-width: none;
}

body.chiefai-rebuilt .wp-block-columns {
  align-items: stretch;
}
body.chiefai-rebuilt .wp-block-column > .wp-block-group {
  height: 100%;
  display: flex;
  flex-direction: column;
}

body.chiefai-rebuilt .entry-content p { margin: 0; }
body.chiefai-rebuilt .entry-content h1,
body.chiefai-rebuilt .entry-content h2,
body.chiefai-rebuilt .entry-content h3,
body.chiefai-rebuilt .entry-content h4 { margin: 0; }
body.chiefai-rebuilt .entry-content ul { margin: 0; padding: 0; }
body.chiefai-rebuilt .entry-content img { max-width: 100%; display: block; }
body.chiefai-rebuilt .entry-content a { color: inherit; text-decoration: none; }

/* =============================================
   Utility: wrap container
   ============================================= */
.aaas-wrap {
  max-width: var(--cai-max);
  margin: 0 auto;
  padding: 0 var(--cai-pad-x);
  position: relative;
}

/* =============================================
   HERO v1 — canonical hero spec (Hero v1, 2026-04-30)
   Scope: any section wrapped with `.aaas-hero` gets identical:
     header → 100px → eyebrow → 32px → H1 (16ch) → 40px → lede (44ch) → 48px → buttons.
   H1 weight is 800 throughout; <em> renders as inline orange-800 emphasis.
   Homepage `.chiefai-home .hero` is the design reference — kept on its own
   scoped rules so the sonar/two-col layout stays bespoke.
   ============================================= */
.aaas-hero {
  padding-top: clamp(32px, 3vw, 40px) !important;
  padding-bottom: clamp(72px, 10vw, 140px) !important;
  position: relative;
  overflow: hidden;
}

/* =============================================
   Sonar burst — site-wide hero accent.
   Auto-injected into every `.aaas-hero` group via render_block filter
   (functions.php) UNLESS the hero already contains a `.aaas-hero-sonar`
   or `.hero-sonar` (homepage uses a bespoke larger one with its own scope).
   ============================================= */
.aaas-hero-sonar {
  position: absolute;
  top: 20%;
  right: 8%;
  width: 340px;
  height: 340px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.aaas-hero > .wp-block-group__inner-container,
.aaas-hero .wp-block-group__inner-container {
  position: relative;
  z-index: 1;
}
.aaas-hero-sonar svg { width: 100%; height: 100%; display: block; }
.aaas-hero-sonar .ring {
  fill: none;
  stroke: var(--cai-orange);
  stroke-width: 1;
  transform-origin: center;
  animation: cai-aaas-pulse-ring 3.5s cubic-bezier(.1, .8, .3, 1) infinite;
  opacity: 0;
}
.aaas-hero-sonar .ring:nth-of-type(2) { animation-delay: 0.7s; }
.aaas-hero-sonar .ring:nth-of-type(3) { animation-delay: 1.4s; }
.aaas-hero-sonar .ring:nth-of-type(4) { animation-delay: 2.1s; }
.aaas-hero-sonar .core { fill: var(--cai-orange); }
@keyframes cai-aaas-pulse-ring {
  /* GPU-composited: only transform + opacity (no stroke-width).
     Constant stroke instead of tapering — visual is essentially the same. */
  0%   { transform: scale(0.2); opacity: 0; }
  15%  { opacity: 0.85; }
  80%  { opacity: 0.15; }
  100% { transform: scale(1.2); opacity: 0; }
}
@media (max-width: 899px) {
  .aaas-hero-sonar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aaas-hero-sonar .ring { animation: none; opacity: 0.3; }
}
.aaas-hero .aaas-eyebrow {
  margin: 0 0 32px !important;
}
.aaas-hero h1,
.aaas-hero h1.aaas-display {
  font-family: var(--cai-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 7vw, 84px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  color: var(--cai-navy) !important;
  margin: 0 0 40px !important;
  max-width: 16ch !important;
}
.aaas-hero h1 em,
.aaas-hero h1.aaas-display em {
  font-style: normal !important;
  font-weight: 800 !important;
  color: var(--cai-orange) !important;
}
/* Lede paragraph — match by class OR by structural position (first paragraph
   after the H1, even if nested inside a columns wrapper). Inline-style margins
   from older block markup are forced back to canonical via !important. */
.aaas-hero .hero-lede,
.aaas-hero .hub-lede,
.aaas-hero .aaas-lede,
.aaas-hero .hero-sub,
.aaas-hero h1 ~ p:not(.aaas-eyebrow):not(.aaas-meta-label):not(.aaas-pill):not(.booking-not-ready),
.aaas-hero h1 ~ .wp-block-columns p:not(.aaas-meta-label) {
  font-family: var(--cai-body) !important;
  font-size: 19px !important;
  line-height: 1.55 !important;
  color: var(--cai-charcoal) !important;
  max-width: 44ch !important;
  margin: 0 0 48px !important;
}
.aaas-hero .hero-lede strong,
.aaas-hero .hub-lede strong,
.aaas-hero .aaas-lede strong,
.aaas-hero .hero-sub strong {
  font-weight: 600;
  color: var(--cai-navy);
}
.aaas-hero .hero-actions,
.aaas-hero .wp-block-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 !important;
}
@media (max-width: 600px) {
  .aaas-hero {
    padding-top: 32px !important;
    padding-bottom: 56px !important;
  }
  .aaas-hero .aaas-eyebrow { margin: 0 0 24px !important; }
  .aaas-hero h1,
  .aaas-hero h1.aaas-display { margin: 0 0 28px !important; }
  .aaas-hero .hero-lede,
  .aaas-hero .hub-lede,
  .aaas-hero .aaas-lede,
  .aaas-hero .hero-sub { margin: 0 0 32px !important; }
}

/* =============================================
   Hero variants — added 2026-05-05
   Three canonical hero shapes. Pages opt in via class:
     .aaas-hero-showcase   marketing entry (Home)
     .aaas-hero-vertical   product / vertical pages (Services, Built For, Case Studies, About)
     .aaas-hero-content    content / index pages (Tools, Blog, Booking)
   Phase 1 ships the variant rules. Page markup is migrated in Phase 3.
   Spec: output/hero-audit-2026-05-05/hero-variant-spec-2026-05-05.md
   ============================================= */

/* ---------- Variant A · Showcase ---------- */
/* 2-col 55/45 grid. Cards/visual on right, sonar between cols.
   Same wp:group inner-container handling as variant B (see comment below). */
.aaas-hero-showcase .aaas-hero-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
  max-width: none !important;
  width: 100%;
}
.aaas-hero-showcase .aaas-hero-grid:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
}
@media (min-width: 900px) {
  .aaas-hero-showcase .aaas-hero-grid > .wp-block-group__inner-container,
  .aaas-hero-showcase .aaas-hero-grid:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: 55% 45%;
    gap: 80px;
  }
}
.aaas-hero-showcase .aaas-hero-copy { position: relative; z-index: 2; }
.aaas-hero-showcase .aaas-hero-visual { position: relative; z-index: 1; }
/* Subhead: NOT 44ch capped — flows with the left column width */
.aaas-hero-showcase .aaas-hero-copy h1 ~ p:not(.aaas-eyebrow):not(.aaas-meta-label):not(.aaas-pill):not(.booking-not-ready) {
  max-width: none !important;
}

/* ---------- Variant B · Vertical ---------- */
/* 2-col 60/40 grid. Right column carries page-specific proof
   (stats / bio / operator quote). Sonar top-right.
   wp:group inserts a .wp-block-group__inner-container between the outer
   .aaas-hero-grid div and its block children, so we target BOTH the
   outer (in case wp:html is used) and the inner-container (default
   wp:group behavior) so the grid lays out correctly either way. */
/* Apply grid to whichever element holds the actual column children:
   - inner-container if wp:group is used (Gutenberg auto-wraps children)
   - outer .aaas-hero-grid if wp:html is used (no inner-container wrapper)
   The :has() selector hides the outer rule when the inner-container is
   present, so we don't double-apply the grid (which produced 60% of 1320
   then 60/40 again inside that = 475px copy column instead of 792px). */
.aaas-hero-vertical .aaas-hero-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  max-width: none !important;
  width: 100%;
}
.aaas-hero-vertical .aaas-hero-grid:not(:has(> .wp-block-group__inner-container)) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
@media (min-width: 900px) {
  .aaas-hero-vertical .aaas-hero-grid > .wp-block-group__inner-container,
  .aaas-hero-vertical .aaas-hero-grid:not(:has(> .wp-block-group__inner-container)) {
    grid-template-columns: 60% 40%;
    gap: 64px;
  }
}
.aaas-hero-vertical .aaas-hero-copy { position: relative; z-index: 2; }
.aaas-hero-vertical .aaas-hero-side { position: relative; z-index: 2; }
/* Subhead: NOT 44ch capped — flows with the left column */
.aaas-hero-vertical .aaas-hero-copy h1 ~ p:not(.aaas-eyebrow):not(.aaas-meta-label):not(.aaas-pill):not(.booking-not-ready) {
  max-width: none !important;
}
/* Sonar in vertical/content variants: top-right decoration */
.aaas-hero-vertical .hero-sonar,
.aaas-hero-vertical .aaas-hero-sonar,
.aaas-hero-content .hero-sonar,
.aaas-hero-content .aaas-hero-sonar {
  position: absolute !important;
  top: 5%;
  right: -8%;
  width: 380px;
  height: 380px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}
@media (max-width: 899px) {
  .aaas-hero-vertical .hero-sonar,
  .aaas-hero-vertical .aaas-hero-sonar,
  .aaas-hero-content .hero-sonar,
  .aaas-hero-content .aaas-hero-sonar {
    width: 280px;
    height: 280px;
    right: -20%;
    opacity: 0.35;
  }
}

/* ---------- Variant C · Content ---------- */
/* 1-col content-width. H1 and subhead share a single 720px max-width so
   they read as one visual block instead of subhead-too-narrow. Outer
   inner-container is 1080px so the eyebrow and any wider supporting
   element can extend past the H1/subhead column. */
.aaas-hero-content .aaas-hero-content-inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
}
.aaas-hero-content .aaas-hero-content-inner h1,
.aaas-hero-content h1 ~ p:not(.aaas-eyebrow):not(.aaas-meta-label):not(.aaas-pill):not(.booking-not-ready) {
  max-width: 720px !important;
}

/* ---------- Variant B side-panel content (stats / bio / quote) ---------- */
/* Generic side-panel scaffolding. Pages compose page-specific content
   inside .aaas-hero-side using these utility classes. */
.aaas-hero-vertical .aaas-hero-side-eyebrow {
  font-family: var(--cai-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cai-slate);
  margin: 0 0 18px;
}
.aaas-hero-vertical .aaas-hero-side-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid rgba(15, 42, 71, 0.15);
  border-bottom: 1px solid rgba(15, 42, 71, 0.15);
}
.aaas-hero-vertical .aaas-side-stat { display: flex; flex-direction: column; gap: 6px; }
.aaas-hero-vertical .aaas-side-stat .aaas-stat-num {
  font-family: var(--cai-heading);
  font-weight: 800;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1;
  color: var(--cai-orange);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.aaas-hero-vertical .aaas-side-stat .aaas-stat-num .unit {
  font-size: 0.5em; color: var(--cai-orange); font-weight: 600; letter-spacing: 0.08em;
}
.aaas-hero-vertical .aaas-side-stat .aaas-stat-label {
  font-family: var(--cai-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--cai-charcoal);
}

/* ---------- Variant mobile rules ---------- */
/* All three variants stack to single-column at <900px (grid handles that
   automatically). Below 600px, reduce hero padding and tighten typography
   so the H1 doesn't overshoot the viewport. */
@media (max-width: 768px) {
  .aaas-hero-showcase,
  .aaas-hero-vertical,
  .aaas-hero-content {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }
  .aaas-hero-showcase .aaas-hero-grid,
  .aaas-hero-vertical .aaas-hero-grid {
    gap: 36px !important;
  }
  /* Variant B right column: stats/bio/quote get tighter mobile spacing */
  .aaas-hero-vertical .aaas-hero-side {
    padding-top: 8px;
  }
  /* Variant C: H1 cap stays in ch (scales with font) but reduce padding */
  .aaas-hero-content .aaas-hero-content-inner {
    max-width: 100%;
  }
  /* CTA buttons on mobile: stack full-width with consistent gap so they
     don't get squeezed side-by-side and clip text */
  .aaas-hero-showcase .aaas-hero-copy .wp-block-buttons,
  .aaas-hero-vertical .aaas-hero-copy .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .aaas-hero-showcase .aaas-hero-copy .wp-block-button,
  .aaas-hero-vertical .aaas-hero-copy .wp-block-button,
  .aaas-hero-showcase .aaas-hero-copy .wp-block-button__link,
  .aaas-hero-vertical .aaas-hero-copy .wp-block-button__link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* Pills on mobile: keep flex-wrap, smaller gap */
  .aaas-hero-showcase .hero-pills,
  .aaas-hero-showcase .aaas-hero-pills {
    gap: 8px !important;
  }
}

/* =============================================
   Utility: eyebrow
   ============================================= */
.aaas-eyebrow {
  font-family: var(--cai-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cai-orange);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.aaas-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--cai-orange);
}

/* =============================================
   Utility: display headings
   ============================================= */
.aaas-display {
  font-family: var(--cai-heading);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--cai-navy);
  text-transform: none;
}
.aaas-display .thin { font-weight: 500; color: var(--cai-orange); }
.aaas-display .accent { color: var(--cai-orange); font-weight: 800; }

.h-xl { font-size: clamp(52px, 9vw, 140px); }
.h-lg { font-size: clamp(40px, 6vw, 96px); }
.h-md { font-size: clamp(30px, 4vw, 56px); }

/* Gutenberg inline-color on headings flips to orange accent */
body.chiefai-rebuilt .wp-block-heading .has-inline-color {
  color: var(--cai-orange) !important;
  background-color: transparent !important;
}

/* =============================================
   Utility: lede + body copy
   ============================================= */
.aaas-lede {
  font-family: var(--cai-body);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--cai-charcoal);
  max-width: 54ch;
}
.aaas-body-copy {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--cai-charcoal);
  max-width: 62ch;
}

/* =============================================
   Utility: section number (outline)
   ============================================= */
.aaas-section-num {
  font-family: var(--cai-heading);
  font-weight: 900;
  font-size: clamp(72px, 8vw, 120px);
  line-height: 0.85;
  color: var(--cai-navy);
  letter-spacing: -0.05em;
  white-space: nowrap;
  -webkit-text-stroke: 1px var(--cai-navy);
  -webkit-text-fill-color: transparent;
  user-select: none;
  display: block;
}
.aaas-section-dark .aaas-section-num,
.aaas-section-num-dark,
.tools-section .aaas-section-num,
.product-compact .aaas-section-num,
.choice-section .aaas-section-num {
  -webkit-text-stroke-color: rgba(255,255,255,0.25);
}

/* =============================================
   Utility: numbered labels (mono)
   ============================================= */
.aaas-problem-num,
.aaas-step-label,
.aaas-pillar-num,
.aaas-win-num {
  font-family: var(--cai-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--cai-orange);
  text-transform: uppercase;
  display: block;
}

/* =============================================
   Buttons
   Core Gutenberg button markup:
     <div class="wp-block-button aaas-btn aaas-btn-primary">
       <a class="wp-block-button__link wp-element-button">...</a>
     </div>
   We style the inner anchor (.wp-block-button__link) so the actual
   clickable/pill element gets the treatment. The wrapper div stays
   inline so buttons flow in a row with gap.
   Fallback: `a.aaas-btn` direct anchor styling (used where buttons
   are handwritten as <a> tags in wp:html islands).
   ============================================= */
.aaas-btn { /* wrapper div from wp:button — keep it inline-block, no visual */
  display: inline-block;
  vertical-align: top;
  margin: 0;
}
.aaas-btn .wp-block-button__link,
a.aaas-btn,
button.aaas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 19px 34px;
  font-family: var(--cai-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  line-height: 1.2;
}

.aaas-btn-primary .wp-block-button__link,
a.aaas-btn-primary,
button.aaas-btn-primary {
  background-color: var(--cai-orange) !important;
  color: #fff !important;
  /* isolation creates a new stacking context so ::before z-index: -1 stays
     inside the button, and the text node (not positioned) naturally paints
     above it */
  isolation: isolate;
}
.aaas-btn-primary .wp-block-button__link:hover,
a.aaas-btn-primary:hover,
button.aaas-btn-primary:hover {
  color: #fff !important;  /* keep text white when the dark fill slides up */
}
.aaas-btn-primary .wp-block-button__link::before,
a.aaas-btn-primary::before,
button.aaas-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cai-ink);
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  z-index: -1;  /* behind the button's text content, above the background */
}
.aaas-btn-primary .wp-block-button__link:hover::before,
a.aaas-btn-primary:hover::before,
button.aaas-btn-primary:hover::before { transform: translateY(0); }
button.aaas-btn-primary:disabled,
button.aaas-btn-primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
button.aaas-btn-primary:disabled::before,
button.aaas-btn-primary[disabled]::before { transform: translateY(100%) !important; }

.aaas-btn-ghost .wp-block-button__link,
a.aaas-btn-ghost,
button.aaas-btn-ghost {
  background: transparent;
  background-color: transparent !important;
  color: var(--cai-ink) !important;
  border-color: var(--cai-ink);
}
.aaas-btn-ghost .wp-block-button__link:hover,
a.aaas-btn-ghost:hover,
button.aaas-btn-ghost:hover {
  background-color: var(--cai-ink) !important;
  color: var(--cai-cream) !important;
}

.aaas-btn-on-dark .wp-block-button__link,
a.aaas-btn-on-dark,
button.aaas-btn-on-dark {
  background: transparent;
  background-color: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.4);
}
.aaas-btn-on-dark .wp-block-button__link:hover,
a.aaas-btn-on-dark:hover,
button.aaas-btn-on-dark:hover {
  background-color: var(--cai-orange) !important;
  border-color: var(--cai-orange);
}

/* Arrow glyph (used in wp:html islands where <a class="aaas-btn"> contains span.arrow) */
.aaas-btn .arrow,
a.aaas-btn .arrow {
  width: 14px; height: 12px;
  position: relative;
  display: inline-block;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.aaas-btn .arrow::before,
a.aaas-btn .arrow::before {
  content: "\2192";
  font-size: 18px;
  line-height: 1;
  position: absolute; top: -2px; left: 0;
}
.aaas-btn:hover .arrow,
a.aaas-btn:hover .arrow { transform: translateX(6px); }

/* =============================================
   Scroll reveal
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* In the block editor, the reveal observer JS doesn't run, so .reveal
   elements stay at opacity:0 forever and the page looks empty. Force
   visibility whenever we're inside the editor iframe. */
.editor-styles-wrapper .reveal,
.block-editor-iframe__body .reveal,
body.wp-admin .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* =============================================
   Section shells
   ============================================= */
.aaas-section {
  padding: clamp(100px, 13vw, 180px) 0;
  position: relative;
}
.aaas-section-dark {
  background: var(--cai-navy);
  color: var(--cai-cream);
}
.aaas-section-dark .aaas-display { color: var(--cai-cream); }
.aaas-section-dark .aaas-display .thin { color: var(--cai-orange); font-weight: 500; }
.aaas-section-dark .aaas-body-copy,
.aaas-section-dark .aaas-lede { color: rgba(250,250,250,0.88); }

/* Section header: number + title + lede in a 2-col grid.
   When implemented as wp:columns, Gutenberg's .wp-block-columns flex
   distribution wins specificity ties and crops the H2 to half-width.
   The compound selector .wp-block-columns.aaas-section-head is (0,2,0)
   and beats both individual class rules without !important. */
.aaas-section-head,
.wp-block-columns.aaas-section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 100px;
}
@media (min-width: 900px) {
  .aaas-section-head,
  .wp-block-columns.aaas-section-head {
    /* auto sizes the section-num column to its rendered width — works for
       both the homepage's small outlined number and the services-page's
       large outlined treatment without crowding the H2. */
    grid-template-columns: auto 1fr;
    gap: 96px;
    align-items: start;
  }
}
.wp-block-columns.aaas-section-head > .wp-block-column {
  flex: unset;
  flex-basis: auto;
  width: auto;
}
.aaas-section-head .aaas-section-num { line-height: 0.75; margin-top: -8px; }
.aaas-section-head-lede { margin-top: 40px; }
.aaas-section-head-title { margin: 24px 0 0; }

/* =============================================
   PROBLEM CARDS (3-col grid with shared borders)
   ============================================= */
.aaas-problems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--cai-rule);
  border-bottom: 1px solid var(--cai-rule);
}
@media (min-width: 900px) {
  .aaas-problems-grid { grid-template-columns: repeat(3, 1fr); }
}
.aaas-problem-card {
  padding: 56px 44px 64px;
  position: relative;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--cai-rule);
  transition: background .4s, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.aaas-problems-grid .aaas-problem-card {
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--cai-rule);
}
.aaas-problems-grid .aaas-problem-card:first-child { border-left: none; }
@media (max-width: 899px) {
  .aaas-problems-grid .aaas-problem-card { border-left: none; border-top: 1px solid var(--cai-rule); }
  .aaas-problems-grid .aaas-problem-card:first-child { border-top: none; }
}
.aaas-problem-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 2px;
  background: var(--cai-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.aaas-problem-card:hover { background: #fff; }
.aaas-problem-card:hover::after { transform: scaleX(1); }

.aaas-problem-num { margin-bottom: 48px; }
.aaas-problem-card h3 {
  font-family: var(--cai-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--cai-navy);
}
.aaas-problem-card p {
  margin: 0;
  color: var(--cai-charcoal);
  font-size: 16.5px;
  line-height: 1.65;
}

/* =============================================
   STEP / FRAMEWORK CARDS (dark section inheritance)
   ============================================= */
.aaas-step-card {
  position: relative;
  padding-top: 56px;
  transition: opacity .6s ease;
}
.aaas-step-card.has-background {
  color: var(--cai-navy);
}
.aaas-step-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.18);
}
.aaas-step-card.has-background::before {
  background: var(--cai-rule);
}
.aaas-step-card:first-child {
  border-left: 2px solid var(--cai-orange);
  padding-left: 24px;
}
.aaas-step-label { margin-bottom: 20px; }
.aaas-step-card h3 {
  font-family: var(--cai-heading);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
}
.aaas-step-card p {
  font-size: 16.5px;
  line-height: 1.7;
  margin: 0;
}

/* =============================================
   PILLAR CARDS (4-col with navy hover fill + orange top border)
   ============================================= */
.aaas-pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--cai-rule);
  background: #fff;
}
@media (min-width: 900px) {
  .aaas-pillars-grid { grid-template-columns: repeat(4, 1fr); }
}
.aaas-pillar-card {
  padding: 56px 40px 60px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  position: relative;
  border-left: 1px solid var(--cai-rule);
  border-top: 3px solid var(--cai-orange);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(15, 42, 71, 0.06);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
  overflow: hidden;
  background: #fff;
}
.aaas-pillar-card:hover {
  box-shadow: 0 8px 32px rgba(15, 42, 71, 0.12);
  transform: translateY(-4px);
}
.aaas-pillar-card:first-child { border-left: none; }
@media (max-width: 899px) {
  .aaas-pillar-card { border-left: none; border-top: 1px solid var(--cai-rule); min-height: 0; }
  .aaas-pillar-card:first-child { border-top: none; }
}
.aaas-pillar-card::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 0;
  background: var(--cai-navy);
  transition: height .5s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
.aaas-pillar-card:hover::before { height: 100%; }
.aaas-pillar-card > * { position: relative; z-index: 1; transition: color .35s ease; }
.aaas-pillar-card:hover .aaas-pillar-num { color: var(--cai-orange) !important; }
.aaas-pillar-card:hover h3 { color: var(--cai-cream) !important; }
.aaas-pillar-card:hover p { color: rgba(250,250,250,0.85) !important; }
.aaas-pillar-card:hover ul { color: rgba(250,250,250,0.78) !important; }
.aaas-pillar-card:hover li::before { background: var(--cai-orange); }

.aaas-pillar-num { margin-bottom: 56px; }

.aaas-pillar-card h3 {
  font-family: var(--cai-heading);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px);
  white-space: nowrap;
  line-height: 1.1;
  color: var(--cai-navy);
  margin: 0 0 28px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.aaas-pillar-card a {
  color: var(--cai-orange);
  text-decoration: none;
  transition: color .3s;
}
.aaas-pillar-card a:hover { color: var(--cai-navy); }
.aaas-pillar-card:hover a { color: var(--cai-cream) !important; }

.aaas-pillar-card ul {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--cai-charcoal);
}
.aaas-pillar-card li {
  padding-left: 22px;
  position: relative;
  list-style: none;
}
.aaas-pillar-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 10px; height: 1px;
  background: var(--cai-orange);
  transition: background .35s;
}

/* =============================================
   QUOTE (pull quote)
   ============================================= */
.aaas-quote {
  padding: 120px 0;
  text-align: left;
  position: relative;
}
.aaas-quote blockquote {
  font-family: var(--cai-heading);
  font-weight: 300;
  font-size: clamp(28px, 5.5vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--cai-navy);
  margin: 0;
  max-width: 20ch;
}
.aaas-quote blockquote .hl { color: var(--cai-orange); font-weight: 800; }
.aaas-quote cite {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
  font-family: var(--cai-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cai-slate);
  text-transform: uppercase;
  font-style: normal;
}
.aaas-quote cite::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--cai-orange);
}

/* Quote: Gutenberg block variant (H2 + paragraph) */
.aaas-quote-text {
  font-family: var(--cai-heading);
  font-weight: 300;
  font-size: clamp(28px, 5.5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--cai-navy);
  max-width: 16ch;
  border-left: 4px solid var(--cai-rule);
  padding-left: 40px;
}
.aaas-quote-text .has-inline-color { color: var(--cai-orange) !important; font-weight: 800; }
.aaas-quote-cite {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
  font-family: var(--cai-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cai-slate);
  text-transform: uppercase;
}
.aaas-quote-cite::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--cai-orange);
}

/* =============================================
   WIN CARDS (dark bg, 4-col grid, shadow on hover)
   ============================================= */
.aaas-wins-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) { .aaas-wins-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .aaas-wins-grid { grid-template-columns: repeat(4, 1fr); } }

.aaas-win-card {
  background: var(--cai-navy-soft);
  padding: 44px 34px 48px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  transition: background .35s, transform .25s ease-out, box-shadow .35s;
  position: relative;
  overflow: hidden;
}
.aaas-win-card:hover {
  background: var(--cai-navy-deep);
  box-shadow: 0 40px 60px -30px rgba(0,0,0,0.5);
}
.aaas-win-num { margin-bottom: 48px; }
.aaas-win-card h4 {
  font-family: var(--cai-heading);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  color: var(--cai-cream);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}
.aaas-win-card p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(250,250,250,0.82);
  margin: 0;
}

/* =============================================
   FIT GRID (who-for / who-not)
   ============================================= */
.aaas-fit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}
@media (min-width: 900px) {
  .aaas-fit-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}

.aaas-fit-col h3 {
  font-family: var(--cai-heading);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  color: var(--cai-navy);
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.aaas-fit-col h3 .accent { color: var(--cai-orange); }

.aaas-fit-col .rule-h {
  width: 56px;
  height: 2px;
  background: var(--cai-orange);
  margin: 28px 0 32px;
}
.aaas-fit-col.not .rule-h { background: var(--cai-slate-soft); }

.aaas-fit-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.aaas-fit-col li {
  padding: 24px 0;
  border-bottom: 1px solid var(--cai-rule);
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--cai-charcoal);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: padding-left .35s, color .35s;
  list-style: none;
}
.aaas-fit-col li:hover { padding-left: 10px; }
.aaas-fit-col li:last-child { border-bottom: none; }
.aaas-fit-col .mark {
  font-family: var(--cai-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--cai-orange);
  padding-top: 2px;
  min-width: 20px;
}
.aaas-fit-col.not li { color: var(--cai-slate); }
.aaas-fit-col.not .mark { color: var(--cai-slate); }

/* =============================================
   WHY CARDS (comparison cards on cream)
   ============================================= */
.aaas-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) { .aaas-why-grid { grid-template-columns: repeat(3, 1fr); gap: 56px; } }

.aaas-why-card {
  padding: 40px 32px;
  background: #fff;
  border: 1px solid var(--cai-rule);
  border-radius: 8px;
  transition: border-color .35s, background .35s, transform .5s cubic-bezier(.2,.8,.2,1);
}
.aaas-why-card:hover {
  border-color: var(--cai-navy);
  transform: translateY(-8px);
}
.aaas-why-card h4 {
  font-family: var(--cai-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--cai-orange);
  text-transform: uppercase;
  margin: 0 0 28px;
  font-weight: 600;
}
.aaas-why-card p.lead {
  font-family: var(--cai-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: var(--cai-navy);
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}
.aaas-why-card p.body {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--cai-charcoal);
  margin: 0;
}

/* =============================================
   FAQ (native details/summary + Yoast schema-faq)
   ============================================= */
.aaas-faq {
  padding: clamp(100px, 13vw, 180px) 0;
  position: relative;
}

/* Yoast FAQ block integration */
.aaas-faq .schema-faq {
  border-top: 1px solid var(--cai-rule);
  max-width: 100%;
}
.aaas-faq .schema-faq-section {
  border-bottom: 1px solid var(--cai-rule);
  padding: 32px 0;
}
.aaas-faq .schema-faq-question {
  font-family: var(--cai-heading);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.25;
  color: var(--cai-navy);
  letter-spacing: -0.015em;
  cursor: pointer;
}
.aaas-faq .schema-faq-question:hover { color: var(--cai-orange); }
.aaas-faq .schema-faq-answer {
  font-size: 17px;
  line-height: 1.75;
  color: var(--cai-charcoal);
  margin-top: 16px;
  max-width: 66ch;
}

/* Custom FAQ (native details/summary) — RESTYLED to match Yoast FAQ block
   pattern from /frequently-asked-questions/ (cards with orange left accent
   + Q. mono prefix). Always-shown via PHP filter that adds [open]. */
.aaas-faq-list {
  border-top: none;
  margin: 48px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
}
details.aaas-faq-item,
details.aaas-faq-item[open] {
  background: #fff;
  border: 1px solid var(--cai-rule);
  border-left: 3px solid var(--cai-orange);
  border-radius: 10px;
  padding: 28px 32px;
  transition: box-shadow 0.2s;
}
details.aaas-faq-item:hover {
  box-shadow: 0 8px 24px -16px rgba(15,42,71,0.18);
}
details.aaas-faq-item summary {
  display: block;
  cursor: default;
  list-style: none;
  font-family: var(--cai-heading);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cai-navy);
  text-transform: none;
  margin: 0 0 14px;
  padding: 0;
  position: relative;
}
details.aaas-faq-item summary:hover { color: inherit; }
details.aaas-faq-item summary::-webkit-details-marker,
details.aaas-faq-item summary::marker {
  display: none;
}
details.aaas-faq-item summary::before {
  content: "Q.";
  display: inline-block;
  margin-right: 12px;
  font-family: var(--cai-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cai-orange);
  vertical-align: 4px;
}
/* Original toggle indicator hidden (always-open mode via PHP filter) */
details.aaas-faq-item summary::after {
  display: none !important;
}
details.aaas-faq-item p {
  font-family: var(--cai-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cai-charcoal);
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
}
/* Force-show answer paragraph even if [open] is missing on the details */
details.aaas-faq-item > p,
details.aaas-faq-item > div {
  display: block !important;
}

/* =============================================
   Full-bleed helper (break out of Kadence content column)
   ============================================= */
body.chiefai-rebuilt .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* AI Readiness Assessment styling moved to chiefai-readiness.css (Phase G-redo) */

/* =============================================
   Responsive: 900px column stack
   ============================================= */
@media (max-width: 900px) {
  .aaas-pillars-grid,
  .aaas-why-grid,
  .aaas-fit-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   Responsive: 600px tighter padding, smaller headings
   ============================================= */
@media (max-width: 600px) {
  .aaas-section { padding: 60px 0; }
  .aaas-faq { padding: 60px 0; }
  .aaas-quote { padding: 60px 0; }

  .aaas-section-head { margin-bottom: 48px; }
  .aaas-section-num { font-size: clamp(60px, 12vw, 100px); }

  .aaas-problem-card { padding: 32px 24px 40px; }
  .aaas-problem-num { margin-bottom: 28px; }

  .aaas-pillar-card { padding: 32px 24px 40px; }
  .aaas-pillar-num { margin-bottom: 32px; }

  .aaas-win-card { padding: 32px 24px 36px; }
  .aaas-win-num { margin-bottom: 28px; }

  /* Mobile: small mono labels need slightly more size + tighter tracking
     so JetBrains Mono stays crisp at thumb-distance reading. */
  .aaas-eyebrow {
    font-size: 14px;
    letter-spacing: 0.18em;
    gap: 12px;
  }
  .aaas-eyebrow::before { width: 24px; }
}

/* =============================================
   Reduced motion
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .aaas-btn,
  .aaas-pillar-card,
  .aaas-pillar-card::before,
  .aaas-problem-card,
  .aaas-problem-card::after,
  .aaas-win-card,
  .aaas-why-card,
  .reveal,
  details.aaas-faq-item summary::after {
    transition-duration: 0.01s !important;
    animation-duration: 0.01s !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =============================================
   /built-for/ hub page — added 2026-05-05
   Right-column ICP-frame teaser, sweet-spot quote, AaaS beats,
   industry safety-net line.
   ============================================= */
.hub-side-frame {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid rgba(15, 42, 71, 0.15);
  border-bottom: 1px solid rgba(15, 42, 71, 0.15);
}
.hub-side-row { display: flex; flex-direction: column; gap: 4px; }
.hub-side-label {
  font-family: var(--cai-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cai-orange);
}
.hub-side-value {
  font-family: var(--cai-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--cai-charcoal);
  font-weight: 600;
}

.hub-sweetspot { text-align: center; }
.hub-sweetspot .aaas-eyebrow { margin: 0 auto 28px; }
.hub-sweetspot .aaas-quote-text {
  font-family: var(--cai-heading);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 900px;
  margin: 0 auto;
}
.hub-sweetspot .aaas-quote-text em { font-style: italic; color: var(--cai-orange); font-weight: 800; }

.hub-aaas-beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 24px 0 32px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.hub-aaas-beats .beat { display: flex; flex-direction: column; gap: 8px; }
.hub-aaas-beats .beat-label {
  font-family: var(--cai-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cai-orange);
}
.hub-aaas-beats .beat-text {
  color: rgba(250,250,250,0.92);
  font-size: 16px;
  line-height: 1.5;
}
.hub-aaas-link {
  font-family: var(--cai-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hub-aaas-link a {
  color: rgba(250,250,250,0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(250,250,250,0.3);
  padding-bottom: 2px;
}
.hub-aaas-link a:hover {
  color: var(--cai-orange);
  border-bottom-color: var(--cai-orange);
}

.hub-safety-net {
  font-family: var(--cai-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cai-slate);
  max-width: 720px;
  margin: 0 auto 32px;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .hub-aaas-beats { grid-template-columns: 1fr; gap: 20px; padding: 20px 0; }
  .hub-side-frame { padding: 20px 0; gap: 14px; }
}

/* Hide hero tools mock at mobile/tablet widths.
   Replaces Block Visibility plugin Device-Type rule which only enforced
   server-side and was not filtering output. Plugin-independent. */
@media (max-width: 899px) {
    .hero-tool-wrap { display: none !important; }
}