/* ==========================================================================
   InsuranceAgency.AI — Global Design Tokens & Utility Classes
   Source: iaai website v2 - current design/src/styles.css + styleguide.tsx
   ==========================================================================
   Paste this whole file into:
   Elementor → Site Settings → Custom CSS (Elementor Pro)

   This file defines its OWN CSS custom properties with literal hex/rgba
   values rather than referencing Elementor's Global Colors — Elementor
   exposes globals as auto-generated var names (e.g. --e-global-color-xxxxxx)
   that aren't stable to hand-author against. Add the colors below as
   Elementor Global Colors too (Phase 1, step 3 of the build plan) so they're
   pickable in the editor UI — but the utility classes here are self-
   contained and will work correctly even without that step.

   Fonts: load Poppins (700) and Manrope (400/500/600/700) as Elementor
   Global Fonts (Site Settings → Global Fonts). Do not @font-face them here —
   let Elementor's own Google Fonts loader handle delivery.
   ========================================================================== */

   :root {
    /* Brand */
    --brand-blue: #192784;
    --brand-magenta: #c22879;
    --brand-orange: #e96a2a;
    --brand-purple: #8f42d3;
  
    /* Neutral indigo-navy surface ramp */
    --surface-1000: #05060f;
    --surface-950: #080a18;
    --surface-900: #0c0e20;
    --surface-850: #12132b;
    --surface-800: #191a38;
    --surface-750: #202247;
    --surface-700: #2a2c55;
    --surface-600: #363868;
    --surface-500: #4a4c82;
    --surface-400: #6b6f9e;
    --surface-300: #9498c2;
    --surface-200: #c3c6e4;
    --surface-100: #e4e6f5;
    --surface-50: #f4f5fc;
  
    /* Named dark surfaces */
    --surface-canvas: #06040f;   /* hero / page bg — deliberately darker than surface-900, do not "correct" */
    --surface-sunken: #05060f;
    --surface-panel: #12132b;
    --surface-card: #191a38;
    --surface-raised: #202247;
    --surface-overlay: rgba(8, 10, 24, 0.72);
    --surface-glass: rgba(28, 30, 62, 0.55);
  
    /* Purple accent ramp */
    --accent-50: #f4ecfc;
    --accent-100: #e4d0f7;
    --accent-200: #cba3ef;
    --accent-300: #b276e6;
    --accent-400: #a057dd;
    --accent-500: #8f42d3;
    --accent-600: #7a33be;
    --accent-700: #63289c;
    --accent-800: #4a1f76;
    --accent-900: #311550;
  
    /* Semantic */
    --success: #2ee07a;
    --danger: #f94545;
    --warning: #f59e0b;
    --info: #4c7df5;
    --success-ink: #15803d; /* readable on light surfaces */
    --warning-ink: #d97706; /* readable on light surfaces */
  
    /* Text on dark */
    --text-primary: #f5f6ff;
    --text-secondary: #a9aece;
    --text-muted: #6b6f9e;
    --text-faint: #4a4c7a;
    --text-inverse: #0c0e20;
  
    /* Borders (dark) */
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-default: rgba(255, 255, 255, 0.11);
    --border-strong: rgba(255, 255, 255, 0.18);
    --border-accent: rgba(143, 66, 211, 0.55);
    --card-fill: rgba(255, 255, 255, 0.035);
    --header-bg: rgba(12, 14, 32, 0.78);
  
    /* Light theme — used on all sections below the hero */
    --light-canvas: #ffffff;
    --light-tint: #f5f5f5;
    --light-ink: var(--surface-900);   /* #0c0e20 */
    --light-body: var(--surface-600);  /* #363868 */
    --light-border: var(--surface-100);/* #e4e6f5 */
    --light-tile: #f5f5f5;
  
    /* Gradients — copy verbatim, do not eyeball */
    --gradient-brand: linear-gradient(90deg, #192784 0%, #c22879 52%, #e96a2a 100%);
    --gradient-brand-diagonal: linear-gradient(135deg, #192784 0%, #c22879 55%, #e96a2a 100%);
    --gradient-heading: linear-gradient(90deg, #a057dd 0%, #c22879 52%, #e96a2a 100%);
    --gradient-label: linear-gradient(90deg, #8f42d3 0%, #c12879 100%);
    --band-btn-border: #a02164; /* 2px ring on white buttons over gradient/bloom */
  
    /* Shadows & glow */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.55);
    --glow-focus: 0 0 0 3px rgba(143, 66, 211, 0.35);
    --glow-purple: 0 0 0 1px rgba(143, 66, 211, 0.35), 0 8px 32px rgba(143, 66, 211, 0.3);
    --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  
    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 360ms;
  
    /* Layout */
    --container-max: 1200px;
  
    /* Radii */
    --radius-xs: 6px;
    --radius-chip: 8px;
    --radius-button: 8px;   /* intentionally tighter than radius-control — do not "correct" to 12px */
    --radius-control: 12px;
    --radius-card: 16px;
    --radius-panel: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;
  
    /* Fonts (set families to match Elementor Global Fonts) */
    --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
    --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace; /* product-mockup UI only — never marketing copy */
  }
  
  /* ==========================================================================
     Base
     ========================================================================== */
  
  /* This block used to force font-family/letter-spacing/line-height/weight
     on every heading with !important, because Elementor's Theme Style
     Typography controls (Site Settings > Theme Style) were generating a
     kit-scoped rule with wrong/drifted values (H3's line-height had a
     literal px/lh unit typo at one point; H1/H2 had a stray 1.1lh at
     Tablet/Mobile that should've been 1.05lh). That meant the client
     adjusting heading typography through Elementor's own UI would've had
     zero visible effect — the !important always won regardless.
     Theme Style is now confirmed correct across all six levels and all
     three breakpoints (verified directly against the live kit CSS), so
     this override is gone entirely — Elementor's native settings are the
     real source of truth for default heading styling now, and the client
     can adjust it normally. Per-context overrides elsewhere in this file
     (hero headings, post-content h2/h3, card titles, etc.) still use
     !important on purpose — those are deliberate exceptions a single
     Theme Style setting per heading level can't express, and remain
     dev-only edits. */

  a:focus-visible, button:focus-visible, input:focus-visible,
  textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--glow-focus);
    border-radius: var(--radius-chip);
  }
  
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
  }
  
  main#content .page-header {
    margin-top: 30px;
  }

  /* ==========================================================================
     Container default padding — nesting-aware, not uniform
     ========================================================================== */

  /* Elementor's own site-wide "Container Padding" setting (Site Settings >
     Layout) applies the SAME default to every Container regardless of
     nesting depth — which is exactly what caused the repeated "double
     padding" bugs on .iaai-post-content (an outer section Container and a
     Container nested inside it both silently carrying the same default,
     stacking). Elementor already tags every Container e-parent (top-level,
     not nested inside another Container) or e-child (nested inside one) —
     only top-level Containers are actually exposed to the viewport edge,
     so only they should get the edge-gutter default; anything nested
     inside one is already protected by its ancestor's padding.

     Still fully overridable per-instance: this sets the --padding-left/
     --padding-right custom properties Elementor's own generic .e-con rule
     reads, at 2-class specificity. Elementor's own per-instance rule (set
     via a specific Container's own Layout panel) is scoped to that
     Container's unique ID — 3-class specificity — so an explicit value set
     there always wins over this default, on either e-parent or e-child,
     exactly as it did before this existed. Site Settings > Layout >
     Container Padding should be set to 0 alongside this, so there's no
     leftover value sitting there doing nothing. */
  .e-con.e-parent {
    --padding-left: 20px;
    --padding-right: 20px;
  }
  .e-con.e-child {
    --padding-left: 0px;
    --padding-right: 0px;
  }

  /* ==========================================================================
     Buttons — shared box: 12px/20px padding, 8px radius, 15px/700 text
     ========================================================================== */
  
  /* Elementor's Advanced-tab "CSS Classes" field puts the class on the widget's
     OUTER wrapper div (.elementor-element) — always a plain <div> — not on the
     actual rendered button (.elementor-button, nested inside). Earlier drafts
     of this block matched the bare class name AND the descendant, which
     painted both the wrapper div and the inner button as full boxes at once
     ("two buttons" nested inside each other). Fix: the "direct" form is now
     tag-qualified to a/button — matches the mockup and any future raw-HTML
     button (an actual <a>/<button> carrying the class) — which never matches
     Elementor's plain <div> wrapper, so only .elementor-button gets painted
     there. !important still matters for the .elementor-button form, since
     Elementor's own generated per-widget CSS targets it too and otherwise
     wins on specificity.
  
     Each variant below is self-contained (shared box properties duplicated
     into every variant, not just inherited from .btn-base) — the source
     composes two classes together (btn-base + variant), but a single missed
     class on an Elementor widget silently drops border-radius/padding/font
     with no visual error, which is what happened before this. One class per
     button is more foolproof for the rest of this build. .btn-base still
     exists below for anyone who wants to compose it with a variant same as
     source — same a/button tag-qualification applies to it too. */
  
  a.btn-base, button.btn-base,
  .btn-base .elementor-button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    font-family: var(--font-sans) !important; font-weight: 700 !important; font-size: 15px !important;
    /* Elementor's own base .elementor-button rule sets line-height:1 (very
       tight, no !important, but we never touched line-height here so it won
       uncontested). Since buttons are align-items:center, a tighter
       line-height directly shrinks the button's total height even with
       identical padding — this is what made buttons look visibly smaller
       despite matching padding numbers. normal matches Tailwind's own base
       default, which the source never explicitly overrides either. */
    line-height: normal !important;
    border-radius: var(--radius-button) !important; padding: 12px 20px !important;
    transition: transform var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                filter var(--dur-base) var(--ease-out);
    cursor: pointer; text-decoration: none !important;
  }
  a.btn-base:active, button.btn-base:active,
  .btn-base .elementor-button:active { transform: scale(0.98); }
  
  a.btn-primary, button.btn-primary, .btn-primary .elementor-button,
  a.btn-accent, button.btn-accent, .btn-accent .elementor-button,
  a.btn-invert, button.btn-invert, a.btn-on-band, button.btn-on-band,
  .btn-invert .elementor-button, .btn-on-band .elementor-button,
  a.btn-ghost, button.btn-ghost, .btn-ghost .elementor-button,
  a.btn-outline-light, button.btn-outline-light, .btn-outline-light .elementor-button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    font-family: var(--font-sans) !important; font-weight: 700 !important; font-size: 15px !important;
    /* Elementor's own base .elementor-button rule sets line-height:1 (very
       tight, no !important, but we never touched line-height here so it won
       uncontested). Since buttons are align-items:center, a tighter
       line-height directly shrinks the button's total height even with
       identical padding — this is what made buttons look visibly smaller
       despite matching padding numbers. normal matches Tailwind's own base
       default, which the source never explicitly overrides either. */
    line-height: normal !important;
    border-radius: var(--radius-button) !important; padding: 12px 20px !important;
    transition: transform var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                filter var(--dur-base) var(--ease-out);
    cursor: pointer; text-decoration: none !important;
  }
  a.btn-primary:active, button.btn-primary:active, .btn-primary .elementor-button:active,
  a.btn-accent:active, button.btn-accent:active, .btn-accent .elementor-button:active,
  a.btn-invert:active, button.btn-invert:active, a.btn-on-band:active, button.btn-on-band:active,
  .btn-invert .elementor-button:active, .btn-on-band .elementor-button:active,
  a.btn-ghost:active, button.btn-ghost:active, .btn-ghost .elementor-button:active,
  a.btn-outline-light:active, button.btn-outline-light:active, .btn-outline-light .elementor-button:active { transform: scale(0.98); }
  
  a.btn-primary, button.btn-primary,
  .btn-primary .elementor-button {
    background-image: var(--gradient-brand) !important;
    /* origin/clip/size/repeat matter here, not cosmetic: with the default
       background-origin (padding-box), the gradient is sized/positioned
       inside the 1px transparent border, leaving a 1px unpainted gap on
       every edge. border-box makes it originate from the true outer edge. */
    background-origin: border-box !important;
    background-clip: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
  }
  a.btn-primary:hover, button.btn-primary:hover, a.btn-primary:focus, button.btn-primary:focus,
  .btn-primary .elementor-button:hover, .btn-primary .elementor-button:focus { filter: brightness(1.1); }
  
  a.btn-accent, button.btn-accent,
  .btn-accent .elementor-button {
    background: var(--accent-500) !important; color: #ffffff !important; border: 1px solid transparent !important;
  }
  a.btn-accent:hover, button.btn-accent:hover, a.btn-accent:focus, button.btn-accent:focus,
  .btn-accent .elementor-button:hover, .btn-accent .elementor-button:focus { background: var(--accent-600) !important; }
  
  /* White CTA for the hero bloom / gradient band — a gradient button disappears on a gradient bg */
  a.btn-invert, button.btn-invert, a.btn-on-band, button.btn-on-band,
  .btn-invert .elementor-button, .btn-on-band .elementor-button {
    background: #fafafa !important; color: var(--text-inverse) !important; border: 2px solid var(--band-btn-border) !important;
  }
  a.btn-invert:hover, button.btn-invert:hover, a.btn-on-band:hover, button.btn-on-band:hover,
  a.btn-invert:focus, button.btn-invert:focus, a.btn-on-band:focus, button.btn-on-band:focus,
  .btn-invert .elementor-button:hover, .btn-on-band .elementor-button:hover,
  .btn-invert .elementor-button:focus, .btn-on-band .elementor-button:focus { background: #e8e8e8 !important; }
  
  a.btn-ghost, button.btn-ghost,
  .btn-ghost .elementor-button {
    background: rgba(255, 255, 255, 0.03) !important; color: var(--surface-100) !important; border: 1px solid var(--border-default) !important;
  }
  a.btn-ghost:hover, button.btn-ghost:hover, a.btn-ghost:focus, button.btn-ghost:focus,
  .btn-ghost .elementor-button:hover, .btn-ghost .elementor-button:focus { background: rgba(255, 255, 255, 0.07) !important; border-color: var(--border-strong) !important; }
  
  a.btn-outline-light, button.btn-outline-light,
  .btn-outline-light .elementor-button {
    background: transparent !important; color: var(--light-ink) !important; border: 1px solid var(--surface-400) !important;
  }
  a.btn-outline-light:hover, button.btn-outline-light:hover, a.btn-outline-light:focus, button.btn-outline-light:focus,
  .btn-outline-light .elementor-button:hover, .btn-outline-light .elementor-button:focus { background: var(--light-tint) !important; border-color: var(--surface-500) !important; }
  
  /* ==========================================================================
     Text-only links (not buttons) — two patterns found in the source, both
     gap-filled with a hover state the source didn't define.
     ========================================================================== */
  
  /* Mid-sentence link inside body prose, e.g. blog post copy. Source: light
     sections only. Hover darkens to accent-600, matching how every other
     purple accent in this system darkens on hover (see .btn-accent). */
  .link-inline {
    font-weight: 600; color: var(--accent-500);
    text-decoration: underline !important; text-underline-offset: 2px;
  }
  .link-inline:hover { color: var(--accent-600); }
  
  /* Standalone "text CTA" link, e.g. "See Customer Stories \2192". Source
     hardcodes hover to rgba(255,255,255,.8), which only reads correctly on a
     dark background. Opacity instead of a literal color makes it work
     identically on light or dark sections without a second variant. */
  .link-underline {
    display: inline-block; font-weight: 700; color: inherit;
    text-decoration: underline !important; text-underline-offset: 4px;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .link-underline:hover { opacity: 0.8; }
  
  /* ==========================================================================
     Eyebrows & gradient text
     ========================================================================== */
  
  .eyebrow {
    font-family: var(--font-sans); font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-orange);
  }
  
  /* Same "class lands on the widget's outer wrapper, not the actual text
     element" issue as buttons — .eyebrow-pill on a Heading widget lands on
     .elementor-element, not the inner .elementor-heading-title that actually
     renders the text. Most properties here still look right via inheritance,
     but line-height specifically has an explicit, more-specific value set
     directly on .elementor-heading-title by Elementor itself, which wins
     over whatever cascades down from the wrapper. Dual selector, same
     pattern as .btn-*: bare class for raw HTML/mockup use (a real <p>/<div>
     carrying the class directly), descendant form for the widget case. */
  .eyebrow-pill,
  .eyebrow-pill .elementor-heading-title {
    display: inline-block; background-image: var(--gradient-brand); color: #ffffff;
    font-family: var(--font-sans); font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 3px 3px 7px; border-radius: 0;
    line-height: normal !important;
  }
  
  .heading-gradient, .label-gradient {
    background-repeat: no-repeat;
  }
  /* Gradient text via background-clip:text is sensitive to tight line-height
     — the global h1-h6 rule's 1.05 crops descenders (e.g. the "g" in "Blog")
     right at the bottom of the line box. Setting line-height on the bare
     .heading-gradient class alone doesn't reach a Heading widget's actual
     <h1 class="elementor-heading-title"> though — same wrapper-vs-inner-
     element gap as .eyebrow-pill: background/color inherit down fine, but
     Elementor's own per-widget CSS sets line-height directly on
     .elementor-heading-title, and a direct declaration always beats one only
     inherited from an ancestor, !important or not. Needs the same descendant
     form .eyebrow-pill uses. */
  .heading-gradient .elementor-heading-title,
  .label-gradient .elementor-heading-title {
    line-height: 1.3 !important;
  }
  .heading-gradient { background-image: var(--gradient-heading); }
  .label-gradient { background-image: var(--gradient-label); }
  
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .heading-gradient, .label-gradient {
      -webkit-background-clip: text; background-clip: text;
      /* !important — same reason as the box-shadow fix: Elementor's kit-scoped
         Theme Style rule (e.g. .elementor-kit-6 h1 { color: ... }) is a
         class+tag selector, which beats this bare class regardless of source
         order. Applied here pre-emptively since .heading-gradient is about to
         be used on a real H1 for the first time (archive hero). */
      color: transparent !important; -webkit-text-fill-color: transparent !important;
    }
  }
  
  /* ==========================================================================
     Cards & panels
     ========================================================================== */
  
  .card-light, .card-bordered {
    background: #ffffff; border: 1px solid var(--light-border); border-radius: var(--radius-card);
    /* !important needed — Elementor's own `.elementor a { box-shadow: none }`
       is a class+tag selector (0,1,1), which beats a bare class selector
       (0,1,0) like this one regardless of source order. */
    box-shadow: 0 2px 4px #0c0e200d, 0 12px 32px #0c0e201a !important;
  }
  
  .card-gradient-border {
    background: linear-gradient(#ffffff, #ffffff) padding-box, var(--gradient-brand-diagonal) border-box;
    border: 1px solid transparent; border-radius: var(--radius-control);
  }
  
  .split-panel {
    background: #ffffff; border: 1px solid var(--light-border);
    border-radius: var(--radius-card); overflow: hidden;
  }
  
  .surface-card {
    background: var(--card-fill); border: 1px solid var(--border-default);
    border-radius: var(--radius-card); box-shadow: var(--highlight-top);
  }
  
  .faq-row-light { border: 1px solid var(--light-border); background: transparent; }
  
  /* ==========================================================================
     Icon tiles
     ========================================================================== */
  
  .icon-tile-light {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius-xs); background: var(--light-tile);
  }
  
  .icon-tile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: var(--radius-control);
    background: rgba(143, 66, 211, 0.12); color: var(--accent-300);
  }

  /* Reusable gradient-stroke class for any Lucide-style (stroke-based,
     fill="none") icon SVG. Points at #iaai-icon-grad, which
     iaai_print_icon_gradient_defs() in functions.php prints once in the
     footer of every page — matches src/components/site/gradient-defs.tsx,
     mounted site-wide in __root.tsx.

     Usage in Elementor: Icon widget → Icon Library → upload the plain
     (non-gradient) SVG file, e.g. from assets/icons/ — keep its stroke set
     to "currentColor", don't hand-edit it. Then in the widget's Advanced
     tab → CSS Classes, add: iaai-icon-gradient
     That class lands on the widget's outer wrapper, not the <svg> itself,
     so this rule targets it as a descendant selector rather than needing
     the class directly on the SVG. */
  .iaai-icon-gradient svg {
    stroke: url(#iaai-icon-grad);
  }
  
  /* ==========================================================================
     Section bands
     ========================================================================== */
  
  .section-light { background: var(--light-canvas); }
  .section-tint { background: var(--light-tint); }
  
  .light-scope { color: var(--light-body); }
  .light-scope h1, .light-scope h2, .light-scope h3, .light-scope h4 { color: var(--light-ink); }
  
  .band-gradient { background-image: var(--gradient-brand-diagonal); color: #ffffff; }
  .band-gradient h1, .band-gradient h2, .band-gradient h3, .band-gradient h4 { color: #ffffff; }
  
  .section-dark {
    background:
      radial-gradient(120% 100% at 85% 0%, rgba(49, 21, 80, 0.55) 0%, rgba(6, 4, 15, 0) 62%),
      linear-gradient(160deg, #0c0e20 0%, #06040f 58%);
    color: var(--text-primary);
  }
  .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--text-primary); }
  
  .hairline-b { border-bottom: 1px solid var(--border-default); }
  
  /* Hero bloom — absolutely position an inner element with this class, parent
     section needs position:relative + overflow:hidden. Elementor: use a
     Background Overlay set to Custom CSS, or an inner container. */
  .bloom-centered {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.95;
    background: radial-gradient(ellipse 62% 85% at 50% 108%,
      rgba(255, 86, 71, 0.95) 6%, rgba(253, 69, 93, 0.9) 11%, rgba(243, 58, 134, 0.85) 18%,
      rgba(184, 60, 183, 0.7) 27%, rgba(98, 51, 206, 0.55) 41%, rgba(39, 25, 102, 0.35) 65%,
      rgba(6, 4, 15, 0) 94%);
  }
  /* !important throughout — needed whenever this class lands on an actual
     Elementor Container widget rather than a raw HTML element. Elementor's
     own per-instance generated CSS sets --position:relative (etc.) scoped
     to that Container's unique ID, which otherwise beats this bare class's
     non-important position:absolute on specificity alone, leaving the
     glow rendering as a normal in-flow flex item instead of floating free
     — which is exactly what happened the first time this was applied to a
     real Container instead of a plain span. */
  .bloom-bold {
    position: absolute !important; inset: 0 !important; z-index: 0 !important;
    pointer-events: none !important; overflow: hidden !important; opacity: 0.95 !important;
    background: radial-gradient(ellipse 62% 85% at 30% 105%,
      rgba(255, 86, 71, 0.95) 6%, rgba(253, 69, 93, 0.9) 11%, rgba(243, 58, 134, 0.85) 18%,
      rgba(184, 60, 183, 0.7) 27%, rgba(98, 51, 206, 0.55) 41%, rgba(39, 25, 102, 0.35) 65%,
      rgba(6, 4, 15, 0) 94%) !important;
  }
  /* Second, smaller/fainter glow layer the home hero pairs with .bloom-bold
     — referenced in comments elsewhere but never actually defined until
     now. No overflow:hidden here, matching source (only .bloom-bold and
     .bloom-centered set it). */
  .bloom-bold-b {
    position: absolute !important; inset: 0 !important; z-index: 0 !important;
    pointer-events: none !important; opacity: 0.6 !important;
    background: radial-gradient(ellipse 42% 55% at 52% 108%,
      rgba(233, 106, 42, 0.5) 0%, rgba(194, 40, 121, 0.38) 35%,
      rgba(143, 66, 211, 0.22) 62%, rgba(6, 4, 15, 0) 88%) !important;
  }
  
  /* Archive hero (blog index — same bloom-bold pattern About/Hive/Features
     use in source, so this is reusable for those pages' heroes too later).
     No featured image, unlike .iaai-post-hero — just the dark canvas + bloom.
     Apply .iaai-bloom-hero to the outer Container (nest a bare element
     carrying .bloom-bold directly inside it — position:relative +
     overflow:hidden are set here on the parent for that to anchor against).
     .iaai-bloom-hero-inner wraps eyebrow/H1/lead — set that Container's own
     Content Width to Boxed 1200px in Elementor's Layout panel, same
     convention as .iaai-post-hero-inner. */
  .iaai-bloom-hero {
    position: relative;
    overflow: hidden;
    background: var(--surface-canvas);
  }

  /* Home hero — same position:relative + overflow:hidden + dark-canvas
     anchor as .iaai-bloom-hero above, but layers BOTH .bloom-bold and
     .bloom-bold-b together (two empty aria-hidden Containers/elements,
     siblings of the grid, not inside it) rather than just one. The grid
     Container itself doesn't need a class for this — just set Position:
     Relative + a Z-index (e.g. 1) directly in Elementor's Advanced >
     Layout panel so it renders above both glow layers. */
  .iaai-home-hero {
    position: relative;
    overflow: hidden;
    background: var(--surface-canvas);
  }
  /* H1 in the hero's left column — apply to the Heading widget directly.
     !important on line-height needed to beat the global h1-h6 rule's 1.05
     (itself !important, so specificity alone can't win) — this hero wants
     1.1 specifically, matching source's leading-[1.1]. Descendant form
     included too: the class lands on the widget's outer wrapper, not the
     actual <h1 class="elementor-heading-title"> Elementor renders, and
     Elementor's own per-widget CSS sets line-height directly on that
     inner element — same wrapper-vs-inner-element gap hit on every other
     heading in this build, applied here pre-emptively. */
  .iaai-home-hero-heading,
  .iaai-home-hero-heading .elementor-heading-title {
    font-size: 32px;
    line-height: 1.1 !important;
  }
  @media (min-width: 640px) {
    .iaai-home-hero-heading,
    .iaai-home-hero-heading .elementor-heading-title { font-size: 38px; }
  }
  @media (min-width: 1024px) {
    .iaai-home-hero-heading,
    .iaai-home-hero-heading .elementor-heading-title { font-size: 48px; }
  }
  .iaai-bloom-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    z-index: 1;
    padding: 64px 20px;
  }
  @media (min-width: 768px) {
    .iaai-bloom-hero-inner { padding-top: 96px; padding-bottom: 96px; }
  }
  .iaai-bloom-hero-inner h1,
  .iaai-bloom-hero-inner h2 {
    margin-top: 20px;
  }
  .iaai-bloom-hero-lead {
    margin-top: 16px;
    /* Flat 19px per explicit request — source is responsive 17px->19px, but
       keeping this simplification since it wasn't flagged. */
    font-size: 19px;
    /* leading-7 in source = a fixed 28px, same fixed-value trap as the
       related-card excerpt — not a 1.75 ratio. */
    line-height: 28px;
    color: var(--surface-100) !important;
  }
  /* Text widget content renders as a <p> nested inside the wrapper this class
     sits on — same wrapper-vs-inner-element gap as .heading-gradient above.
     font-size/line-height/color inherit down fine, but Hello Elementor's
     reset.css sets margin-block-end directly on <p>, which (same reasoning
     as the line-height fix) beats an inherited margin regardless of
     !important on the ancestor. Needs the descendant form to actually reach
     it and zero it out. */
  .iaai-bloom-hero-lead p {
    margin: 0;
  }
  
  /* ==========================================================================
     Header / footer specific
     ========================================================================== */
  
  .iaai-header {
    /* Opaque by default, not translucent — backdrop-filter only makes sense
       once there's real scrolled content behind the header to blur. At rest
       (not yet stuck) there's nothing meaningful back there, which is the
       entire reason the header read as the wrong shade earlier: blurring
       "nothing" just samples the page's own background, dark in Lovable's
       single dark-canvas page, white in WP where most sections are light.
       An opaque color sidesteps that dependency completely — looks correct
       regardless of what page it's on or what's behind it. Switches to the
       translucent+blur treatment only once actually stuck, below. */
    background-color: var(--surface-canvas) !important;
    border-bottom: 1px solid var(--border-default);
    /* position:sticky lives on the outer <header> tag below, not here — a
       sticky element can only stay pinned within its own parent's box, and
       .iaai-header's parent (the short <header data-elementor-type="header">
       wrapper, ~116px tall with the announcement bar) runs out of room almost
       immediately. <header>'s own parent is <body> — the whole page — so
       sticking it there instead has effectively unlimited room. Since
       iaai-nav.js now relocates the announcement bar to be <header>'s
       previous sibling on load, <header> contains only this Container, so
       the two coincide exactly and this still looks/behaves identically. */
    position: relative;
    z-index: 500; /* backdrop-filter creates a new stacking context on this element — this keeps the
                     whole header (and everything painted inside it, including the dropdown panel)
                     above the rest of the page regardless of what else is going on in that context */
  }
  /* The actual sticky element — see comment above. Elementor generates this
     class on every Theme Builder header's outer wrapper, stable across pages. */
  header.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 500;
  }
  /* Own flat background, matching .iaai-header's opaque-at-rest color —
     needed because .iaai-mobile-panel-spacer (the invisible push-mode
     spacer) lives inside THIS element, not inside .iaai-header. When the
     mobile menu opens in push-mode at the top of the page, that spacer
     grows tall to reserve space for the panel, and without a background
     here that growth briefly exposed the page's white background behind it.
     Conditional on NOT being stuck — if this were always opaque, it would
     sit directly behind .iaai-header and defeat backdrop-filter once
     .iaai-header switches to its translucent .is-stuck state, since the
     blur would just blend with this opaque color instead of sampling real
     scrolled page content. Push-mode and being stuck never overlap (the
     former only happens at the very top of the page, the latter only after
     scrolling well past it), so this is safe either way. */
  header.elementor-location-header:not(.is-stuck) {
    background-color: var(--surface-canvas);
  }
  /* Announcement bar's own layout (flex/centering/padding) was previously
     supplied by Elementor's per-element CSS, scoped to
     ".elementor-458 .elementor-element.elementor-element-239b9f7" — once
     iaai-nav.js relocates it to be <header>'s previous sibling (outside
     .elementor-458 entirely), that scoped rule no longer reaches it at all,
     dropping every layout property while .band-gradient's own
     background/color stayed intact. Self-contained replacement, independent
     of DOM position, using the same stable Elementor-generated element ID. */
  .elementor-element-239b9f7 {
    /* Custom properties, not just literal properties below — Elementor's own
       .e-con-inner (a wrapper it always inserts inside boxed Containers,
       wrapping the actual widgets) reads display/align-items/justify-content
       from these SAME custom properties via its own generic, unscoped CSS
       rule. The original scoped rule set both; setting only literal
       properties here left .e-con-inner without a value to read, so it fell
       back to plain display:block — centering the row itself, but not the
       text widget nested one level deeper inside .e-con-inner. */
    --display: flex;
    --flex-direction: row;
    --justify-content: center;
    --align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 0 20px;
  }
  /* Same relocation issue, different property — the "Apply now" link's white
     color was also Elementor-scoped CSS under .elementor-458
     (.elementor-element-7ed80bd a { color: #ffffff }), also lost once
     relocated. Without it the link falls back to Hello Elementor's reset.css
     default (a{color:#c36}), a direct rule that beats .band-gradient's
     merely-inherited white. !important defensively, same as every other
     fix against that reset.css this session. */
  .elementor-element-239b9f7 a {
    color: #ffffff !important;
  }
  /* Plain CSS sticky needs no JS to pin the header, but the opaque-at-rest ->
     translucent+blur switch still needs something to know once the page has
     scrolled — that used to ride on Elementor's own .elementor-sticky--active
     class. iaai-nav.js now toggles .is-stuck on scroll instead (a plain
     scrollY check, not driving the positioning itself, so no jank risk). */
  .iaai-header.is-stuck {
    background-color: var(--header-bg) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
  }
  .iaai-container { max-width: var(--container-max); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
  
  /* Invisible spacer, inserted by iaai-nav.js as .iaai-header's next sibling
     (outside it, in normal page flow) — grown/shrunk to "push content down"
     for the mobile panel's push-mode. Deliberately NOT padding on .iaai-header
     itself: that container has its own internal flex alignment (vertically
     centers .e-con-inner), and inflating its box shifted that centered
     content upward instead of just adding trailing space. A dedicated spacer
     outside the header avoids touching that layout at all. It doesn't need
     to track scroll like the visible panel does — it's inert space, so
     nothing about it depends on being a descendant of the sticky header. */
  .iaai-mobile-panel-spacer {
    height: 0;
    flex-shrink: 0;
  }
  
  /* ==========================================================================
     Primary nav — renders inside the [iaai_primary_nav] shortcode's output
     (child theme functions.php), not Elementor's native WordPress Menu
     widget. Click-to-toggle dropdowns, no Pointer-effect conflicts, no
     stacking-context surprises — the widget's fixed feature set couldn't
     match this spec, so this is hand-rolled instead. iaai-nav.js drives the
     interaction; class names below are exactly what that script targets.
     ========================================================================== */
  
  .iaai-nav-wrapper { display: flex; align-items: center; }
  @media (max-width: 1039px) {
    .iaai-nav-wrapper { margin-left: auto; }
  }
  
  .iaai-nav { display: none; align-items: center; gap: 4px; }
  
  .iaai-nav-link,
  .iaai-nav-trigger {
    /* .iaai-nav-link is an <a>, .iaai-nav-trigger is a <button> — browsers
       apply different UA-default line-height/margin/native chrome to each,
       which produced a visible height mismatch even with identical padding.
       Reset explicitly (same value on both) so they compute the same box
       regardless of tag — 1.5 stays taller than the 13px chevron SVG, so
       no new mismatch there either. */
    line-height: 1.5;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--surface-300);
    border-radius: 12px;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out);
  }
  /* !important + :focus on both blocks below — Hello Elementor's theme.css has
     its own bare button:hover/:focus rule (background-color:#c36), and
     .iaai-nav-trigger is a real <button> element, so that rule can compete
     here even though our selectors are already more specific. :focus (not
     just :hover) matters because a clicked button can sit in :focus state
     without being hovered. */
  .iaai-nav-link:hover, .iaai-nav-link:focus,
  .iaai-nav-trigger:hover, .iaai-nav-trigger:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--surface-100) !important;
    border-radius: 0 !important;
  }
  .iaai-nav-link[aria-current="page"],
  .iaai-nav-trigger[aria-expanded="true"],
  .iaai-nav-trigger.is-active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--surface-100) !important;
    border-radius: 0 !important;
  }
  
  .iaai-nav-item { position: relative; }
  
  /* Chevron in the trigger button renders at the inline width/height="15"
     HTML attributes (no CSS was constraining it) — taller than the 13px/
     line-height:1 text next to it, which stretched .iaai-nav-trigger 2px
     taller than .iaai-nav-link. CSS overrides presentation attributes
     regardless of specificity, so this brings it down to match the text. */
  .iaai-nav-trigger svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  
  .iaai-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 260px;
    background: var(--surface-900);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    padding: 8px;
    display: none;
  }
  .iaai-dropdown.is-open { display: block; }
  .iaai-dropdown a {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--surface-300);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out);
  }
  .iaai-dropdown a:hover,
  .iaai-dropdown a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--surface-100);
    border-radius: 0;
  }
  
  .iaai-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 12px !important;
    border: 1px solid var(--border-default) !important;
    background: none !important;
    color: var(--surface-100) !important;
    cursor: pointer;
  }
  /* No documented source spec for this button's hover/focus — it's not part
     of the original styleguide. Gap-filled with the same "ghost icon button
     on dark header" treatment used elsewhere for consistency. !important to
     beat Hello Elementor theme.css's bare button:hover/:focus rule (this is
     a real <button> element). */
  .iaai-burger:hover,
  .iaai-burger:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--border-strong) !important;
    color: var(--surface-100) !important;
  }
  .iaai-burger svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    display: block;
  }
  .iaai-burger .icon-x { display: none !important; }
  .iaai-burger[aria-expanded="true"] .icon-menu { display: none !important; }
  .iaai-burger[aria-expanded="true"] .icon-x { display: block !important; }
  
  /* Positioned absolute relative to .iaai-header (nearest position:relative
     ancestor), so it renders full-width below the header row regardless of
     how narrow .iaai-nav-wrapper itself is on mobile. */
  .iaai-mobile-panel {
    /* iaai-nav.js relocates this element to be a direct child of .iaai-header
       on load (it starts nested inside an Elementor widget wrapper, which
       made position:absolute bind to the wrong, narrow ancestor). As a direct
       child, .iaai-header (position:relative + backdrop-filter) is reliably
       the containing block, so plain absolute positioning works correctly —
       full width, no viewport-relative measuring needed.
  
       Always position:absolute, in BOTH overlay and push-content-down modes
       — never position:static. .iaai-header is itself display:flex (Container
       2's own row layout), so a position:static child would become a flex
       item squeezed next to .e-con-inner instead of a full-width block below
       it. position:absolute is excluded from flex layout entirely regardless
       of mode, which is what keeps this full-width in both cases. It also
       means this stays a proper descendant of the sticky .iaai-header, so it
       automatically travels with it on scroll — no JS scroll-position
       tracking needed, which is what made an earlier "move it outside
       .iaai-header" attempt break once the page was scrolled.
  
       push-mode no longer touches .iaai-header's own box (see the spacer
       comment above), so .iaai-header's height never changes — top:100% is
       safe and doesn't need a JS-measured value to avoid drifting. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    border-top: 1px solid var(--border-default);
    background: var(--surface-canvas);
    padding: 20px;
    z-index: 500;
  }
  .iaai-mobile-panel.is-open { display: block; }
  .iaai-mobile-nav { display: flex; flex-direction: column; gap: 4px; }
  .iaai-mobile-nav a {
    padding: 0 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: var(--surface-300);
    border-radius: 12px;
  }
  .iaai-mobile-nav a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--surface-100);
    border-radius: 0;
  }
  .iaai-mobile-nav a.sub { padding: 0 12px; font-size: 15px; font-weight: 500; }
  .iaai-mobile-label {
    margin-top: 12px;
    margin-bottom: 0;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--surface-400);
  }
  
  /* Apply this class to the header's CTA-button Container (Try IAAI / Get
     Started) instead of Elementor's native "Hide on Tablet/Mobile" toggle —
     that toggle switches at Elementor's own default breakpoint (1024px), not
     this design's 1040px, leaving a 1025-1039px dead zone where the CTA
     buttons and the hamburger both show at once. Turn Elementor's native
     responsive-visibility toggle OFF for this Container once this class is
     applied, so only one thing controls its visibility. */
  .iaai-cta-group { display: none; }
  
  /* CTA buttons cloned into the mobile panel by iaai-nav.js — see
     cloneCtaGroupIntoMobilePanel(). No source spec for this state (the
     mockup doesn't show a mobile nav panel with CTAs in it), so this is a
     net-new pattern: stacked, full-width buttons below the nav links,
     matching common mobile-nav conventions. Adjust freely if a different
     treatment is wanted. */
  .iaai-mobile-cta-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    /* Elementor's own scoped CSS on this Container sets margin-left:auto
       (desktop right-alignment, via .elementor-458 .elementor-element-XXXXX)
       — the clone carries the same classes/IDs, so that rule still matches
       it here too. !important overrides the resolved property regardless of
       which selector originally set it. */
    margin-left: 0 !important;
    margin-top: 20px;
  }
  .iaai-mobile-cta-group a,
  .iaai-mobile-cta-group button {
    width: 100%;
  }
  @media (min-width: 1040px) {
    /* Redundant safety — .iaai-mobile-panel itself is already fully hidden
       at this breakpoint — but explicit in case that ever changes. */
    .iaai-mobile-cta-group { display: none !important; }
  }
  
  /* Elementor's own justify-content for .e-con-inner is set via its
     --justify-content custom property, typically only configured for the
     Desktop breakpoint in the editor — below that it falls back to
     Elementor's own default, losing the logo-left/burger-right spread.
     !important needed to beat that per-element custom-property rule. */
  @media (max-width: 1039px) {
    .iaai-header > .e-con-inner {
      justify-content: space-between !important;
    }
  }
  
  @media (min-width: 1040px) {
    .iaai-nav { display: flex; }
    .iaai-burger, .iaai-mobile-panel { display: none !important; }
    .iaai-cta-group { display: flex !important; }
  }
  
  /* ==========================================================================
     Single Post template
     ========================================================================== */
  
  /* Breadcrumb bar — used on every inner page, not just single posts. Target
     class for whichever mechanism ends up used (Elementor's native
     Breadcrumbs widget first, styled via this wrapper class; a shortcode as
     fallback if that widget can't match this spec closely enough). */
  .iaai-breadcrumb-bar {
    /* Opaque, not translucent — same reasoning as .iaai-header. This bar
       isn't sticky and never overlaps scrolled content the way the header
       does, so there's never a "real content behind it" case worth blurring;
       it can just be the right color outright, with no dependency on
       whatever page background sits behind it. */
    background: var(--surface-canvas);
    border-bottom: 1px solid var(--border-default);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  /* Matches the bar's own border-bottom, but only while the mobile nav panel
     is open — separates the breadcrumb bar visually from the panel sitting
     directly above it (push-mode) or overlapping it (overlay mode). */
  body:has(.iaai-mobile-panel.is-open) .iaai-breadcrumb-bar {
    border-top: 1px solid var(--border-default);
  }
  /* Elementor's native Breadcrumbs widget renders the "/" separator as bare
     text between item spans, not wrapped in its own element — no class to
     target it directly. color is inherited, so setting it here on the
     widget's own #breadcrumbs container reaches that text automatically. */
  #breadcrumbs {
    color: color-mix(in oklab, white 55%, transparent) !important;
  }
  .iaai-breadcrumb-bar,
  .iaai-breadcrumb-bar a,
  .iaai-breadcrumb-bar span {
    font-size: 13px;
    line-height: 1.4;
    /* Base/default color — covers plain non-link crumbs (e.g. "Resources",
       which has no href in source) that .iaai-breadcrumb-bar a's rule alone
       wouldn't reach. Hover/current states below override this. */
    color: color-mix(in oklab, white 55%, transparent) !important;
  }
  /* Tailwind v4 compiled color-mix, matching source (text-white/55,
     hover:text-white/85, text-white/75) rather than rgba approximations. */
  .iaai-breadcrumb-bar a {
    color: color-mix(in oklab, white 55%, transparent);
    text-decoration: none;
  }
  .iaai-breadcrumb-bar a:hover {
    color: color-mix(in oklab, white 85%, transparent);
  }
  .iaai-breadcrumb-bar .iaai-breadcrumb-current,
  .iaai-breadcrumb-bar [aria-current="page"],
  .breadcrumb_last {
    color: color-mix(in oklab, white 75%, transparent) !important;
  }
  .iaai-breadcrumb-bar .iaai-breadcrumb-sep {
    /* Tailwind v4's actual compiled output for text-white/30 (oklab color-mix,
       not a plain rgba approximation) */
    color: color-mix(in oklab, white 30%, transparent);
    margin: 0 6px;
  }
  
  /* Hero — full-bleed featured image + bottom-heavy gradient overlay, content
     bottom-aligned. Apply .iaai-post-hero to the Container holding the
     featured-image background; .iaai-post-hero-inner wraps the text content
     at max-width 760px inside the standard 1200px container. */
  .iaai-post-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    min-height: 520px;
    background-size: cover;
    background-position: center;
  }
  @media (min-width: 768px) {
    .iaai-post-hero { min-height: 620px; }
  }
  .iaai-post-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(6, 4, 15, 0.92) 0%,
      rgba(6, 4, 15, 0.78) 38%,
      rgba(6, 4, 15, 0.4) 72%,
      rgba(6, 4, 15, 0.12) 100%
    );
    pointer-events: none;
  }
  .iaai-post-hero-inner {
    /* Width/max-width now set natively in Elementor (Boxed, 760px) — the
       earlier CSS override for that is gone. flex-direction:column stays:
       .iaai-post-hero (parent) is display:flex, and its children
       (eyebrow/h1/lead/meta) need to stack vertically, not sit side by
       side, in case this Container's own Direction isn't also set to
       Column in Elementor's Layout panel. */
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    z-index: 1;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 56px;
  }
  @media (min-width: 768px) {
    .iaai-post-hero-inner { padding-bottom: 80px; }
  }
  /* !important on color throughout this block — Phase 1 sets global Theme
     Style defaults for heading/body color (dark, correct for the mostly-
     light rest of the site), which otherwise wins over these plain rules
     since this hero sits on a dark background and needs white/near-white
     text instead. Same pattern as every other Elementor-vs-custom-CSS fix
     in this build. */
  /* Category widget renders as <a href="category-archive"> — the class lands
     on the widget's outer wrapper (same pattern as the Button widget), so
     the color rule needs to explicitly reach the nested <a> too, or Hello
     Elementor's reset.css default link color (#c36) wins on that element
     directly. Now clickable — category archives exist as of the permalink/
     breadcrumb work (was pointer-events:none before that). */
  .iaai-post-hero-eyebrow,
  .iaai-post-hero-eyebrow a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: color-mix(in oklab, white 80%, transparent) !important;
    text-decoration: none !important;
  }
  /* h1, h2 both targeted — the heading widget should be set to HTML Tag: H1
     in Elementor (a page should have exactly one), but if it's ever left at
     H2 this still applies rather than silently losing to Elementor's global
     Theme Style H2 rule (bare h2 tag selector, same specificity as ours,
     so whichever tag actually matches wins outright). */
  .iaai-post-hero h1,
  .iaai-post-hero h2 {
    margin-top: 16px;
    font-size: 34px;
    font-weight: 800;
    /* !important — same global h1-h6 { line-height: 1.05 !important; } this
       class-selector rule would otherwise silently lose to. */
    line-height: 1.1 !important;
    color: #ffffff !important;
  }
  @media (min-width: 640px) { .iaai-post-hero h1, .iaai-post-hero h2 { font-size: 42px; } }
  @media (min-width: 1024px) { .iaai-post-hero h1, .iaai-post-hero h2 { font-size: 54px; } }
  .iaai-post-hero-lead {
    margin-top: 20px;
    font-size: 18px;
    /* leading-8 in source = a fixed 32px, not a 1.75 ratio — stays 32px at
       the md: breakpoint even though font-size grows to 20px there, unlike
       a ratio which would drift to 35px. */
    line-height: 32px;
    color: color-mix(in oklab, white 90%, transparent) !important;
  }
  @media (min-width: 768px) { .iaai-post-hero-lead { font-size: 20px; } }
  .iaai-post-hero-meta {
    margin-top: 24px;
    font-size: 14px;
    color: color-mix(in oklab, white 75%, transparent) !important;
  }
  
  /* Post content — targets WordPress's native block-editor output directly
     (p/h2/h3/ul/blockquote/table), so it works with whatever an editor
     writes without needing custom blocks. Apply .iaai-post-content to the
     Container wrapping Elementor's Post Content widget. */
  .iaai-post-content {
    /* width:100% + !important — same defensive treatment as
       .iaai-post-hero-inner. If this Container ends up as a flex item of
       something else (rather than sitting in normal top-level block flow
       the way Container 1/2 in the header do), max-width alone would have
       nothing to stretch toward. Harmless either way if it turns out not
       to be needed here. */
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto;
    /* py-16/md:py-20 px-5 in source — was missing entirely; the section had
       no outer breathing room or horizontal gutter of its own, only the
       per-block margin-top values below. padding-top reduced to 34px for
       mobile specifically, per explicit request. */
    padding-top: 34px;
    padding-right: 20px;
    padding-bottom: 64px;
    padding-left: 20px;
    color: var(--light-body);
    /* Elementor's generic Container CSS aliases .e-con-inner's own
       padding-block-start/end straight from --padding-top/--padding-bottom
       (a plain default of 10px when nothing else sets them for this
       element) — stacking an extra 10px top/bottom on the inner wrapper on
       top of the 64/80px above. Zeroing the custom properties here removes
       it at the source, inherited down to .e-con-inner. */
    --padding-top: 0;
    --padding-bottom: 0;
  }
  @media (min-width: 768px) {
    /* Tablet gets its own padding-top (64px) between mobile's 34px and
       desktop's 80px below — padding-bottom stays 80px from this
       breakpoint up, unaffected by the tablet-specific top override. */
    .iaai-post-content { padding-top: 64px; padding-bottom: 80px; }
  }
  @media (min-width: 1025px) {
    .iaai-post-content { padding-top: 80px; }
  }
  .iaai-post-content > *:first-child { margin-top: 0 !important; }
  .iaai-post-content > .e-con-inner {
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
  }
  /* Same doubling issue, horizontal this time — a Container nested inside
     .iaai-post-content (wrapping the actual Post Content widget) carries
     its own 20px left/right padding, stacking with .iaai-post-content's
     own 20px for a 40px total inset. .iaai-post-content's padding is the
     intended gutter (px-5 in source); this nested Container's own copy is
     redundant and gets zeroed here, both as custom properties (in case an
     .e-con-inner beneath it also derives from these) and as a literal
     override. */
  .elementor-element-6d0d249d {
    --padding-left: 0;
    --padding-right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor-element-6d0d249d > .e-con-inner {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }

  /* Same doubling issue again, but structural rather than one specific ID
     this time. When a post's body is built with Elementor (not plain
     Gutenberg blocks), theme-post-content renders it as its own separate
     Elementor document — so a Container that's the first/top-level one
     inside that document gets Elementor's own "e-parent" class (and this
     file's .e-con.e-parent 20px default) even though, in the actual
     rendered page, it's already nested inside .iaai-post-content's own
     20px gutter. Elementor's e-parent/e-child tracking is scoped per
     document, not per real DOM depth, so it can't see that nesting itself.
     Zeroing every .e-con.e-parent found inside the post-content widget
     fixes this for any post built this way, not just one specific element
     ID — this recurs on every post that reuses the same content template/
     pattern, unlike the one-off case above. */
  .iaai-post-content .elementor-widget-theme-post-content .e-con.e-parent {
    --padding-left: 0;
    --padding-right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .iaai-post-content .elementor-widget-theme-post-content .e-con.e-parent > .e-con-inner {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
  }
  
  /* !important on color throughout .iaai-post-content — even though these
     values match the global Theme Style defaults set in Phase 1, Elementor's
     Post Content widget can carry its own separate Text/Heading Color Style
     controls that override the global default regardless, same as every
     other Elementor-vs-custom-CSS fix in this build. Cheap insurance. */
  .iaai-post-content p {
    margin-top: 24px;
    font-family: var(--font-display) !important;
    font-size: 17px;
    line-height: 1.65;
    color: var(--light-body) !important;
  }
  .iaai-post-content h2 {
    margin-top: 48px;
    font-size: 26px;
    font-weight: 700;
    /* !important — same global h1-h6 { line-height: 1.05 !important; } this
       rule would otherwise silently lose to (tag-selector match beats the
       compound .iaai-post-content h2 only via !important, not specificity). */
    line-height: 1.2 !important;
    color: var(--light-ink) !important;
  }
  @media (min-width: 768px) { .iaai-post-content h2 { font-size: 30px; } }
  .iaai-post-content h3 {
    margin-top: 32px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3 !important;
    color: var(--light-ink) !important;
  }
  .iaai-post-content ul,
  .iaai-post-content ol {
    margin-top: 24px;
    padding-left: 20px;
    font-family: var(--font-display) !important;
    font-size: 17px;
    line-height: 1.65;
    color: var(--light-body) !important;
  }
  .iaai-post-content ul { list-style: disc; }
  .iaai-post-content ol { list-style: decimal; }
  .iaai-post-content li + li { margin-top: 8px; }
  
  .iaai-post-content blockquote {
    margin-top: 40px;
    padding-left: 24px;
    border-left: 3px solid var(--brand-purple);
  }
  .iaai-post-content blockquote p {
    margin-top: 0;
    font-family: var(--font-display) !important;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--light-ink) !important;
  }
  @media (min-width: 768px) { .iaai-post-content blockquote p { font-size: 22px; } }
  .iaai-post-content blockquote cite,
  .iaai-post-content blockquote footer {
    display: block;
    margin-top: 12px;
    font-family: var(--font-display) !important;
    font-size: 14px;
    font-style: normal;
    color: var(--light-body) !important;
  }
  
  /* Native WP Table block output — styled to closely match the source's
     custom 2-column grid without fighting the semantic <table> markup. */
  .iaai-post-content table {
    margin-top: 32px;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--light-border);
  }
  /* WP core's block-library CSS sets .wp-block-table thead { border-bottom:
     3px solid; } with no color — defaults to currentColor (black). Never
     targeted here before, so it applied uncontested. */
  .iaai-post-content thead {
    border-bottom: none !important;
  }
  /* Same source — the "Stripes" table style (an opt-in toggle in Gutenberg's
     block Style panel) adds .is-style-stripes, which sets a zebra background
     via tr:nth-child(odd). Defensive override regardless of which style gets
     picked in the editor; switching the block's own Style to "Default" in
     Gutenberg is the cleaner fix if this table currently has Stripes on. */
  .iaai-post-content .is-style-stripes tbody tr {
    background-color: transparent !important;
  }
  .iaai-post-content th {
    background: var(--light-tint);
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--light-body) !important;
    text-align: left;
    border: 1px solid var(--light-border);
    /* Hello Elementor's reset.css has
       table thead:first-child tr:first-child th { border-block-start: 1px
       solid hsla(0,0%,50%,.502); } — specificity (0,2,4) beats this class
       rule's (0,1,1) regardless of source order, so the header row's top
       edge rendered in reset.css's darker grey instead of --light-border
       without !important here. */
    border-top: 1px solid var(--light-border) !important;
  }
  .iaai-post-content td {
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--light-body) !important;
    border: 1px solid var(--light-border);
    vertical-align: top;
    /* Real cause of the zebra stripe — not WP's Stripes style (this table
       never had .is-style-stripes), it's Hello Elementor's reset.css:
       table tbody>tr:nth-child(odd)>td { background-color: hsla(0,0%,50%,.071); }
       Specificity (0,1,4) beats this class rule's (0,1,1) with no !important
       needed on its side, so !important here is required regardless of
       source order. */
    background-color: #ffffff !important;
  }
  
  /* Inline links within post copy — automatic, no per-link CSS class needed
     from the editor. Matches .link-inline's spec (same color, same source
     pattern) but scoped to post-content paragraphs specifically. */
  .iaai-post-content p a {
    font-weight: 600;
    color: var(--accent-500);
    text-decoration: underline !important;
    text-underline-offset: 2px;
  }
  .iaai-post-content p a:hover {
    color: var(--accent-600);
  }
  
  /* "Key takeaways" callout — editor convention: a Gutenberg Group block with
     Additional CSS Class "key-takeaways", first line bolded as the label,
     followed by a bulleted list. No plugin needed — Group blocks support
     custom CSS classes natively in the block Advanced panel. */
  .iaai-post-content .key-takeaways {
    margin-top: 40px;
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid var(--light-border);
    border-bottom: 1px solid var(--light-border);
  }
  .iaai-post-content .key-takeaways > p:first-child {
    margin-top: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--light-body) !important;
  }
  .iaai-post-content .key-takeaways ul {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--light-ink) !important;
  }
  
  /* Related-post cards ("More reading") — rendered by the [iaai_related_posts]
     shortcode. Self-contained class (same reasoning as the button classes):
     carries card-light's box treatment directly rather than depending on a
     second class also being present. */
  .iaai-related-grid {
    display: grid;
    gap: 32px;
    margin-top: 32px;
  }
  @media (min-width: 768px) {
    .iaai-related-grid { grid-template-columns: 1fr 1fr; }
  }
  .iaai-related-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--light-border);
    border-radius: var(--radius-card);
    /* !important needed — same .elementor a { box-shadow: none } override as
       .card-light above (this card is itself an <a> tag). */
    box-shadow: 0 2px 4px #0c0e200d, 0 12px 32px #0c0e201a !important;
    text-decoration: none !important;
    transition: box-shadow var(--dur-base) var(--ease-out);
  }
  .iaai-related-card-img {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    display: block;
  }
  .iaai-related-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
  }
  .iaai-related-card-cat {
    /* Bottom margin now kept (Hello Elementor's reset.css default,
       margin-block-end:.9rem) per explicit request — only top is zeroed,
       since this is the first element in the card body. */
    margin-top: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--light-body) !important;
  }
  .iaai-related-card-title {
    /* Same reset also gives every heading tag margin-block-end:1rem — only
       margin-top was overridden here before, so ~16px of unwanted bottom
       margin was stacking on top of the excerpt's own margin-top below. */
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 700;
    /* !important — same global h1-h6 { line-height: 1.05 !important; } gap as
       the other heading fixes; this is a real <h3>, so it competes too. */
    line-height: 1.3 !important;
    color: var(--light-ink) !important;
    transition: color var(--dur-base) var(--ease-out);
  }
  .iaai-related-card:hover .iaai-related-card-title {
    color: var(--brand-purple) !important;
  }
  .iaai-related-card-excerpt {
    margin-top: 12px;
    /* Bottom margin kept (Hello Elementor's reset.css default) per explicit
       request — only .iaai-related-card-meta below zeroes its own. */
    font-size: 15px;
    /* leading-7 in source = a fixed 28px, not a 1.75 ratio — at 15px font
       those genuinely differ (26.25px vs 28px), unlike the hero lead
       paragraph's leading-8 case where the math happened to coincide. */
    line-height: 28px;
    color: var(--light-body) !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .iaai-related-card-meta {
    margin-top: auto;
    /* The one paragraph in the card that should NOT keep the reset's default
       bottom margin — it's the last element before the card's own padding. */
    margin-bottom: 0;
    padding-top: 20px;
    border-top: 1px solid var(--light-border);
    font-size: 13px;
    color: var(--surface-500) !important;
  }
  
  /* Category description ([iaai_category_description]) — net-new element,
     no equivalent in the source design (client-requested addition, not in
     styleguide.tsx). Sits in the light body section above .iaai-blog-grid,
     so it follows .light-scope's Light Body color convention rather than
     the dark hero's .iaai-bloom-hero-lead treatment. Typography matched to
     .iaai-post-content p (single-post body copy) per explicit request —
     same 720px column width, same font-family/size/line-height, so a
     category description reads like an extension of that same body-copy
     system rather than a one-off style. wpautop-wrapped <p> from
     term_description() needs its own margin reset, same reset-vs-inherited-
     margin pattern hit throughout this file. */
  .iaai-archive-description {
    max-width: 680px;
    margin: 0 auto 40px auto;
    text-align: left;
    font-family: var(--font-display) !important;
    font-size: 17px;
    line-height: 1.65;
    color: var(--light-body) !important;
  }
  .iaai-archive-description p {
    margin: 0;
  }
  .iaai-archive-description p + p {
    margin-top: 12px;
  }

  /* Blog archive grid ([iaai_blog_grid]) — same card markup/classes as
     .iaai-related-grid above. 3-across at desktop matches source's
     `md:grid-cols-2 lg:grid-cols-3` on blog.index.tsx, but only on the main
     Blog landing page (.iaai-blog-grid--home, added when is_home() in
     functions.php). Category archives (.iaai-blog-grid, no modifier) are
     capped to the same 680px column as .iaai-archive-description above it
     and centered, so they don't sprawl to the full 1160px container width —
     1 col phone / 2 col tablet (≥768px) and desktop (≥1024px). */
  .iaai-blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  .iaai-blog-grid--home {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  @media (min-width: 768px) {
    .iaai-blog-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1024px) {
    .iaai-blog-grid--home { grid-template-columns: 1fr 1fr 1fr; }
  }
  
  /* Pagination under the blog grid — no equivalent in the source (the mockup
     just maps every post with no paging), so this is a net-new element
     designed to match the existing button/link system rather than a
     pixel-match. Targets paginate_links()'s default output classes. */
  .iaai-blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
  }
  .iaai-blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--radius-full, 999px);
    font-size: 14px;
    font-weight: 600;
    color: var(--light-body) !important;
    text-decoration: none !important;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .iaai-blog-pagination a.page-numbers:hover {
    background-color: var(--light-tint);
    color: var(--light-ink) !important;
  }
  .iaai-blog-pagination .page-numbers.current {
    background-color: var(--brand-purple);
    color: #ffffff !important;
  }
  .iaai-blog-pagination .page-numbers.dots {
    color: var(--surface-500) !important;
  }

  /* ==========================================================================
     Home hero — animated chat-demo console
     ========================================================================== */

  /* No WordPress data involved — assets/js/iaai-hero-console.js renders
     everything into the empty Container Elementor holds at
     id="iaaiHeroConsole" in the hero's right column. Card/attachment/rows
     all get the existing .surface-card class added via JS (background,
     border, shadow) — this block only adds the layout specifics source
     sets on top of that (one-off corner radii outside the normal scale,
     padding, flex arrangement, pill tones, the entrance animation). */
  @keyframes iaai-console-step-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .iaai-console-frame {
    height: 679px;
    overflow: hidden;
    transition: opacity 600ms ease-out;
  }
  @media (min-width: 640px) {
    .iaai-console-frame { height: 502px; }
  }
  .iaai-console-frame.is-fading {
    opacity: 0;
  }

  .iaai-console-card {
    animation: iaai-console-step-in 200ms ease-out both;
    margin-top: 12px;
    border-radius: 14px !important;
    padding: 16px;
  }
  .iaai-console-card:first-child {
    margin-top: 0;
  }

  .iaai-console-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .iaai-console-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 10px;
    color: #ffffff;
  }
  .iaai-console-avatar-you {
    background: var(--accent-600);
  }
  .iaai-console-avatar-ai svg {
    display: block;
    height: 18px;
    width: auto;
  }
  .iaai-console-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--surface-100);
  }

  .iaai-console-text {
    margin-top: 8px;
    /* Hello Elementor's reset.css default for every <p> — never zeroed
       here, so it was adding unwanted space below the message text. */
    margin-bottom: 0;
    font-size: 14px;
    /* Looser than the other console text — this one can wrap to multiple
       lines, unlike the single-line labels/pills/filenames elsewhere in
       the component, which all get line-height:1 instead. */
    line-height: 1.4;
    color: var(--surface-100);
  }

  .iaai-console-pill {
    display: inline-block;
    white-space: nowrap;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
  }
  .iaai-console-pill-wrap {
    margin-left: 8px;
    vertical-align: middle;
  }
  .iaai-console-pill.is-amber { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
  .iaai-console-pill.is-purple { background: rgba(143, 66, 211, 0.18); color: var(--accent-300); }
  .iaai-console-pill.is-green { background: rgba(46, 224, 122, 0.15); color: var(--success); }

  .iaai-console-attachment {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-button) !important;
    padding: 4px 8px;
  }
  .iaai-console-attachment svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: var(--surface-300);
  }
  .iaai-console-attachment-name {
    font-size: 11px;
    line-height: 1.2;
    color: var(--surface-300);
  }

  .iaai-console-rows {
    margin-top: 12px;
    overflow: hidden;
    border-radius: 10px !important;
  }
  .iaai-console-row {
    animation: iaai-console-step-in 200ms ease-out both;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 12px;
  }
  @media (min-width: 640px) {
    .iaai-console-row {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
  }
  .iaai-console-row-divider {
    border-top: 1px solid var(--border-default);
  }
  .iaai-console-row-label {
    min-width: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--surface-300);
  }
  .iaai-console-row-value {
    min-width: 0;
    font-size: 12px;
    line-height: 1.1;
    color: var(--surface-100);
  }
  @media (min-width: 640px) {
    .iaai-console-row-value { text-align: right; }
  }

  /* Features page — partner/integration logo marquee. Ported 1:1 from
     src/components/site/partner-marquee.tsx + styles.css. Two rows,
     scrolling opposite directions, each row's item list duplicated in the
     markup so the 50%-translateX loop is seamless. Placeholder logo pills
     (dashed border + "IMG" badge) until real partner logos are uploaded —
     swap [iaai_partner_marquee]'s PHP array entries for <img> tags at that
     point, same shortcode. */
  .marquee {
    position: relative;
    display: grid;
    gap: 12px;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee-track {
    display: flex;
    width: max-content;
    gap: 12px;
    animation: iaai-marquee-scroll 18s linear infinite;
  }
  .marquee-track[data-reverse="true"] {
    animation-direction: reverse;
    animation-duration: 24s;
  }
  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
  .marquee-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 140px;
    height: 48px;
    padding: 0 12px;
    border: 1.5px dashed var(--light-border);
    background: #ffffff;
    border-radius: var(--radius-xs);
    color: var(--light-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .marquee-logo.has-image {
    border-style: solid;
    padding: 0 16px;
  }
  .marquee-logo.has-image img {
    max-width: 110px;
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .marquee-logo-label {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .marquee-logo-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 2px 6px;
    background: var(--light-tint);
    border: 1.5px dashed var(--light-border);
    border-radius: 0 var(--radius-xs) 0 var(--radius-xs);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--light-body);
  }
  @keyframes iaai-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .partner-grid .marquee-logo {
    width: 100%;
    min-width: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
  }

  /* Features page — "OS165 Workflows" section, right-column animated
     workflow-status card. Ported 1:1 from
     src/components/site/workflow-runner.tsx + its inline Tailwind styles.
     iaai-workflow-runner.js builds/updates this markup — mounts into the
     empty Container Elementor holds at id="iaaiWorkflowRunner". */
  .iaai-wf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 420px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-xl);
    background:
      radial-gradient(110% 90% at 88% 0%, rgba(49, 21, 80, 0.65) 0%, rgba(6, 4, 15, 0) 60%),
      linear-gradient(160deg, #12132b 0%, #06040f 62%);
  }
  @media (min-width: 768px) {
    .iaai-wf-card { height: 352px; }
  }
  .iaai-wf-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px 20px 24px;
    transition: opacity 400ms;
    opacity: 1;
  }
  .iaai-wf-body.is-fading { opacity: 0; }
  .iaai-wf-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.5);
  }
  .iaai-wf-title {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
  }
  @media (min-width: 768px) {
    .iaai-wf-title { font-size: 18px; }
  }
  .iaai-wf-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    list-style: none;
    padding: 0;
  }
  .iaai-wf-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 8px 12px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: all 300ms;
  }
  .iaai-wf-step.is-pending {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    opacity: 0.6;
  }
  .iaai-wf-step.is-running {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(178, 118, 230, 0.25), var(--glow-purple);
  }
  .iaai-wf-step.is-done {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
  }
  .iaai-wf-marker {
    position: relative;
    margin-top: 1px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
  }
  .iaai-wf-marker.is-pending {
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  .iaai-wf-marker.is-done {
    background: var(--success);
  }
  .iaai-wf-marker-ping {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    opacity: 0.6;
    background: var(--accent-300);
    animation: iaai-wf-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  .iaai-wf-marker-dot {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--accent-300);
  }
  @keyframes iaai-wf-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
  }
  .iaai-wf-step-label {
    font-size: 14px;
    line-height: 1.5;
    color: #ffffff;
    font-weight: 500;
    transition: color 300ms;
  }
  .iaai-wf-step-label.is-pending {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
  }
  .iaai-wf-step-id {
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 12px;
    font-size: 11px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.4);
  }
  .iaai-wf-footer {
    margin-top: auto;
    padding-top: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
  }
  .iaai-wf-footer.is-complete {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--success);
  }
  @media (prefers-reduced-motion: reduce) {
    .iaai-wf-marker-ping { animation: none; }
  }

  /* Features page — in-page section nav bar (AI Agents / Workflows /
     Integrations), sticky directly below the main header. Ported 1:1 from
     src/routes/platform/index.tsx's SectionNav component. Stays dark/
     translucent regardless of the light sections scrolling underneath it —
     matches the header's own always-dark treatment on purpose, not a
     light/dark-scope oversight. iaai-section-nav.js drives the active-link
     highlight via IntersectionObserver; the sticky positioning, colors, and
     hover states below are plain CSS, no JS needed for those. */
  .iaai-section-nav {
    position: sticky;
    top: 76px; /* header's own fixed height (.iaai-header min-height) — the two stick back to back */
    z-index: 400; /* below the header's 500, above ordinary page content */
    overflow-x: auto;
    border-bottom: 1px solid var(--border-default);
    background-color: rgba(6, 4, 15, 0.95); /* --surface-canvas at 95% */
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
  /* .iaai-section-nav is a Boxed Container, so the actual flex row holding
     the 3 buttons is Elementor's own .e-con-inner wrapper, not the .e-con
     element the class above lands on — gap/justify-content have to target
     that inner layer directly, same issue hit before with .iaai-header and
     .iaai-post-content. !important needed: Elementor's own generic
     `.e-con>.e-con-inner{gap:var(--row-gap) var(--column-gap)}` rule ties
     this selector on specificity (0,2,0 either way). */
  .iaai-section-nav > .e-con-inner {
    gap: 4px !important;
  }
  /* Narrower than Elementor's own Mobile tier (≤767px) — small phones
     (iPhone SE and similar, ≤380px) were tight enough with 3 tabs +
     12px horizontal padding each that the row started needing the
     overflow-x scroll sooner than it should. Spreads the 3 tabs evenly
     across the full width instead of clumping them left. */
  @media (max-width: 380px) {
    .iaai-section-nav > .e-con-inner {
      gap: 5px !important;
      justify-content: space-between !important;
    }
  }
  /* Built with the native Button widget — this strips Elementor's own
     button chrome (Theme Style background/border/radius/shadow/typography)
     so only the styling below shows. Covers both possible DOM placements
     for a widget's CSS Classes field: directly on the <a class="elementor-
     button"> itself, or on the wrapping .elementor-widget-button div (one
     will be a no-op depending on which the Button widget actually uses —
     harmless either way). !important throughout is required regardless of
     source order — Elementor's Theme Style button rule is kit-scoped
     (.elementor-kit-X .elementor-button), which ties or beats a plain class
     selector on specificity. */
  .iaai-section-nav-link.elementor-button,
  .iaai-section-nav-link .elementor-button {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 12px !important;
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--surface-300) !important;
    transition: background-color 200ms, color 200ms;
  }
  .iaai-section-nav-link.elementor-button:hover,
  .iaai-section-nav-link .elementor-button:hover,
  .iaai-section-nav-link.elementor-button.is-active,
  .iaai-section-nav-link.is-active .elementor-button {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--surface-100) !important;
  }
  /* Anchor-scroll offset — matches source's scroll-mt-[130px] on the three
     target sections, so clicking a nav link doesn't leave the section's
     heading hidden underneath the sticky header (76px) + this bar. Add this
     class alongside each section's own id="ai-agents" / "workflows" /
     "integrations". */
  .iaai-scroll-anchor {
    scroll-margin-top: 100px;
  }

  /* Home page — "Agencies using it today" section, vertical rotating quote
     stack. Ported 1:1 from src/components/site/story.tsx's QuoteStack +
     its .quote-stack CSS. The active card sits in focus; the cards
     immediately before/after it peek by 46px and are dimmed, further ones
     are invisible — iaai-quote-stack.js drives which card is active and
     recomputes --qstep (the peek distance) whenever the stack's rendered
     size changes, since it depends on measured height, not a fixed value.
     Rendered by [iaai_quote_stack] (functions.php) into a Shortcode
     widget. Reuses .card-light as-is for each card's surface (same white
     card treatment as elsewhere in the design system). */
  /* .iaai-quote-stack's own height:100% (below) needs a real height to
     inherit from — the Container/grid-row stretch correctly by default,
     but Elementor's .elementor-shortcode wrapper div in between is a plain
     block element that doesn't pass a tall parent's height down to its own
     children on its own. :has() scopes this to only the wrapper that
     actually contains the quote stack, so it doesn't affect any other
     Shortcode widget on the site (marquee, related posts, etc.). */
  .elementor-shortcode:has(.iaai-quote-stack),
  .elementor-widget-shortcode:has(.iaai-quote-stack) {
    height: 100%;
  }
  .iaai-quote-stack {
    --qh: 300px;
    --qstep: 372px;
    position: relative;
    height: 100%;
    min-height: calc(var(--qh) + 116px);
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .iaai-quote-stack { --qh: 260px; }
  }
  .iaai-quote-card {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - var(--qh) / 2);
    height: var(--qh);
    overflow: hidden;
    padding: 32px;
    transition: transform 600ms var(--ease-out), opacity 600ms var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .iaai-quote-card { transition: none; }
  }
  @media (max-width: 767px) {
    .iaai-quote-stack {
      min-height: var(--qh);
      overflow: visible;
    }
    .iaai-quote-card {
      opacity: 0 !important;
      transform: none !important;
      top: 0 !important;
      height: auto !important;
      pointer-events: none !important;
    }
    .iaai-quote-card.is-active {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
  }
  .iaai-quote-mark {
    display: block;
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 0.7;
    font-weight: 700;
    color: var(--brand-purple);
  }
  .iaai-quote-text {
    margin-top: 12px;
    margin-left: 0; /* browser default <blockquote> UA margin is 1em 40px */
    font-size: 17px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--light-ink);
  }
  @media (min-width: 768px) {
    .iaai-quote-text { font-size: 18px; }
  }
  .iaai-quote-byline {
    margin-top: 30px;
  }
  .iaai-quote-name {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--light-ink);
  }
  .iaai-quote-title {
    margin-bottom: 0; /* Hello Elementor reset.css: p{margin-block-end:.9rem} */
    font-size: 13px;
    line-height: 1.2;
    color: var(--light-body);
  }

  /* ==========================================================================
     FAQ ([iaai_faq_groups] on the FAQ landing page, [iaai_faq_block] for the
     homepage's cherry-picked teaser) — both share the same accordion row
     markup/CSS via iaai_render_faq_row() in functions.php. Native
     <details>/<summary> handles toggle/keyboard/ARIA on its own, no JS file
     needed (unlike the nav). .faq-row-light (Cards & panels, above) already
     supplies the border/transparent-bg base; the rest is added here.
     ========================================================================== */

  /* Stacked-list border/radius collapse — first row keeps its top radius,
     every row after the first drops its own top border so adjacent rows
     don't double it up, last row gets the bottom radius. Pure :first-
     child/:last-child selectors so this works regardless of how many rows
     PHP renders, no per-row index class needed. */
  .iaai-faq-row.faq-row-light {
    padding: 20px;
    cursor: pointer; /* iaai-faq.js extends the click-to-toggle target to this padding */
  }
  .iaai-faq-row.faq-row-light:not(:first-child) {
    border-top: 0;
  }
  .iaai-faq-row.faq-row-light:first-child {
    border-top-left-radius: var(--radius-xs);
    border-top-right-radius: var(--radius-xs);
  }
  .iaai-faq-row.faq-row-light:last-child {
    border-bottom-left-radius: var(--radius-xs);
    border-bottom-right-radius: var(--radius-xs);
  }
  .iaai-faq-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--light-ink);
  }
  .iaai-faq-summary::-webkit-details-marker {
    display: none;
  }
  .iaai-faq-chevron {
    flex-shrink: 0;
    color: var(--light-ink);
    transition: transform 0.2s ease;
  }
  .iaai-faq-row[open] .iaai-faq-chevron {
    transform: rotate(180deg);
  }
  .iaai-faq-answer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--light-border);
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.75;
    color: var(--light-body);
  }
  .iaai-faq-answer > *:last-child {
    margin-bottom: 0;
  }

  /* [iaai_faq_groups] section headings — one .iaai-faq-group per FAQ
     Section term, matches source's mt-14 (56px) gap between groups / mt-6
     (24px) gap under each title. */
  .iaai-faq-group + .iaai-faq-group {
    margin-top: 56px;
  }
  .iaai-faq-group-title {
    font-size: 24px;
    line-height: 1.2;
  }
  @media (min-width: 768px) {
    .iaai-faq-group-title { font-size: 28px; }
  }
  .iaai-faq-group-list {
    margin-top: 24px;
  }