/* ==========================================================================
   AI AUTOMATO — Global Design System
   Enterprise SaaS aesthetic (Apple / Stripe / Linear / Vercel / Notion tier)
   Single source of truth for every page section (injected via Elementor
   HTML widgets) and the child theme's header/footer.
   ========================================================================== */

/* ---------- Root-level full-width safety net ----------
   Fixes a hairline white gap reported on the left edge of the fixed
   header/hero on some real devices at fractional OS display-scaling
   (e.g. Windows 125%/150%) — not reproducible in any integer-scale
   test environment, but a known Chromium sub-pixel rounding quirk for
   full-bleed elements. html/body had no explicit width/overflow reset
   at all; this closes that gap without touching layout/structure. */
html, body{ margin:0; padding:0; width:100%; overflow-x:hidden; }

/* ---------- Elementor page title suppression ----------
   Every AI AUTOMATO page uses the WP "default" page template (not an
   Elementor Canvas/Full-Width template), so Hello Elementor's own
   .page-header/.entry-title still renders above the Elementor content —
   unstyled, in normal document flow, directly under our fixed header.
   Pre-existing on every page (confirmed on /solutions/, untouched by
   Homepage V2); only became visually obvious once the header switched
   from transparent-over-hero to permanently dark. Standard Elementor
   convention is to hide the theme's own title on elementor-managed pages
   — do that here rather than touching page templates or PHP. */
body.elementor-page .page-header{ display:none !important; }

/* ---------- Design Tokens ---------- */
:root{
  /* Brand */
  --aia-primary:      #0B1F3A;   /* deep navy   */
  --aia-primary-700:  #142A4E;
  --aia-primary-600:  #1D3A66;
  --aia-secondary:    #2563EB;   /* electric blue */
  --aia-secondary-600:#1D4ED8;
  --aia-secondary-100:#DBEAFE;
  --aia-accent:       #7C3AED;   /* violet accent */
  --aia-accent-100:   #EDE4FD;
  --aia-bg:           #F8FAFC;   /* app background */
  --aia-surface:      #FFFFFF;
  --aia-border:       #E4E9F2;
  --aia-text:         #0B1F3A;
  --aia-text-muted:   #4B5A75;
  --aia-text-faint:   #8593AC;
  --aia-white:        #FFFFFF;

  /* Gradient (used sparingly — hero backdrop, CTA, badges) */
  --aia-gradient: linear-gradient(135deg, var(--aia-secondary) 0%, var(--aia-accent) 100%);
  --aia-gradient-soft: linear-gradient(180deg, rgba(37,99,235,.08) 0%, rgba(124,58,237,.05) 100%);

  /* Typography */
  --aia-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aia-fs-xs:   .8125rem;
  --aia-fs-sm:   .9375rem;
  --aia-fs-base: 1rem;
  --aia-fs-lg:   1.125rem;
  --aia-fs-xl:   1.375rem;
  --aia-fs-2xl:  1.75rem;
  --aia-fs-3xl:  2.25rem;
  --aia-fs-4xl:  2.875rem;
  --aia-fs-5xl:  3.5rem;
  --aia-lh-tight: 1.15;
  --aia-lh-normal: 1.6;

  /* Spacing scale (8px base) */
  --aia-space-1: .5rem;
  --aia-space-2: 1rem;
  --aia-space-3: 1.5rem;
  --aia-space-4: 2rem;
  --aia-space-5: 3rem;
  --aia-space-6: 4rem;
  --aia-space-7: 6rem;
  --aia-space-8: 8rem;

  /* Radius */
  --aia-radius-sm: 10px;
  --aia-radius-md: 16px;
  --aia-radius-lg: 24px;
  --aia-radius-pill: 999px;

  /* Shadow (soft, premium — never harsh) */
  --aia-shadow-sm: 0 1px 2px rgba(11,31,58,.06), 0 1px 1px rgba(11,31,58,.04);
  --aia-shadow-md: 0 8px 24px rgba(11,31,58,.08);
  --aia-shadow-lg: 0 24px 60px rgba(11,31,58,.12);
  --aia-shadow-glow: 0 8px 30px rgba(37,99,235,.25);

  /* Layout */
  --aia-container: 1200px;
  --aia-container-narrow: 820px;
  --aia-header-h: 76px;

  /* Motion — deliberately subtle, never "花俏" */
  --aia-ease: cubic-bezier(.4,0,.2,1);
  --aia-dur: .25s;
}

/* ---------- Reset / Base ---------- */
.aia *{ box-sizing:border-box; }
.aia{
  font-family: var(--aia-font);
  color: var(--aia-text);
  line-height: var(--aia-lh-normal);
  -webkit-font-smoothing: antialiased;
}
.aia img{ max-width:100%; display:block; }
.aia a{ color:inherit; text-decoration:none; }
.aia ul{ margin:0; padding:0; list-style:none; }
.aia h1,.aia h2,.aia h3,.aia h4{
  font-weight:700; letter-spacing:-.02em; line-height:var(--aia-lh-tight); margin:0 0 var(--aia-space-2);
  color: var(--aia-primary);
}
.aia h1{ font-size:var(--aia-fs-5xl); }
.aia h2{ font-size:var(--aia-fs-3xl); }
.aia h3{ font-size:var(--aia-fs-2xl); }
.aia p{ margin:0 0 var(--aia-space-2); color:var(--aia-text-muted); font-size:var(--aia-fs-lg); }
@media (max-width:768px){
  .aia h1{ font-size:var(--aia-fs-3xl); }
  .aia h2{ font-size:var(--aia-fs-2xl); }
  .aia h3{ font-size:var(--aia-fs-xl); }
}

/* ---------- Layout helpers ---------- */
.aia-container{ max-width:var(--aia-container); margin:0 auto; padding:0 var(--aia-space-3); }
.aia-container-narrow{ max-width:var(--aia-container-narrow); margin:0 auto; padding:0 var(--aia-space-3); }
.aia-section{ padding: var(--aia-space-7) 0; }
.aia-section-sm{ padding: var(--aia-space-5) 0; }
@media (max-width:768px){
  .aia-section{ padding: var(--aia-space-5) 0; }
}
.aia-section.bg-tint{ background:var(--aia-bg); }
.aia-section.bg-navy, .aia-section-sm.bg-navy{ background:var(--aia-primary); }
.aia-section.bg-navy .aia-eyebrow{ background:rgba(255,255,255,.1); color:var(--aia-white); }
.aia-section.bg-navy h2, .aia-section.bg-navy h3{ color:var(--aia-white); }
.aia-section.bg-navy p, .aia-section-sm.bg-navy p{ color:rgba(255,255,255,.72); }
/* Cards keep their own white surface regardless of section background —
   without this, a bg-navy section's white-text rule above turns card
   titles/copy white-on-white (invisible) the moment cards are used inside
   a dark section, as the new Homepage V2 Solution section does. */
.aia-section.bg-navy .aia-card h3{ color:var(--aia-primary); }
.aia-section.bg-navy .aia-card p{ color:var(--aia-text-muted); }
.aia-section.bg-gradient{ background:var(--aia-gradient-soft); }

.aia-hero-cta-strip{ padding-top:var(--aia-space-4); }
.aia-hero-trust-line{ margin:1rem 0 0; color:var(--aia-text-faint); font-size:.875rem; }
/* --aia-text-faint is tuned for a light page background; the strip is
   navy here (.bg-navy, see content-1.php) so the trust line needs the
   light-on-dark variant or it reads as near-invisible. */
.aia-hero-cta-strip.bg-navy .aia-hero-trust-line{ color:rgba(255,255,255,.6); }
@media (max-width:480px){
  /* PR #25: buttons in the CTA strip / CTA band stack full-width instead
     of wrapping side-by-side at cramped widths. */
  .aia-hero-cta-strip .aia-btn-group,
  .aia-cta-band .aia-btn-group{
    flex-direction:column; align-items:stretch;
  }
  .aia-hero-cta-strip .aia-btn-group .aia-btn,
  .aia-cta-band .aia-btn-group .aia-btn{
    width:100%;
  }
}

/* ---------- Industry strip chips (Homepage, under the Hero) ---------- */
.aia-industry-strip{ padding:var(--aia-space-5) 0; }
.aia-industry-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; }
.aia-industry-item{
  display:flex; align-items:center; gap:.55rem; padding:.85rem 1.35rem;
  background:rgba(255,255,255,.04); border:1px solid rgba(124,58,237,.4);
  border-radius:var(--aia-radius-pill);
  box-shadow:0 0 0 1px rgba(37,99,235,.1), 0 8px 22px rgba(37,99,235,.15);
  color:#fff; font-weight:600; font-size:.9rem; white-space:nowrap;
}
.aia-industry-icon{ font-size:1.2rem; line-height:1; filter:drop-shadow(0 0 6px rgba(124,58,237,.6)); }
@media (max-width:640px){
  /* PR #25: was a horizontal-scroll strip (overflow-x:auto) — on real
     mobile browsers that renders a native gray drag bar + trailing arrow
     affordance the design system doesn't control. Two-column wrapping
     cards (spec's explicit preference over "hide the scrollbar") removes
     the scroll mechanism entirely instead of just hiding its chrome. */
  .aia-industry-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem;
    overflow-x:visible; margin:0; padding:0;
  }
  .aia-industry-item{
    min-height:44px; justify-content:center; text-align:center;
    white-space:normal;
  }
}

.aia-center{ text-align:center; }
.aia-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.aia-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--aia-fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--aia-secondary); background:var(--aia-secondary-100);
  padding:.4rem .9rem; border-radius:var(--aia-radius-pill); margin-bottom:var(--aia-space-2);
}
.aia-lede{ font-size:var(--aia-fs-xl); color:var(--aia-text-muted); max-width:640px; }
.aia-header-block{ max-width:680px; margin:0 auto var(--aia-space-5); }

/* ---------- Buttons ---------- */
.aia-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--aia-font); font-weight:600; font-size:var(--aia-fs-base);
  padding:.9rem 1.75rem; border-radius:var(--aia-radius-pill);
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--aia-dur) var(--aia-ease), box-shadow var(--aia-dur) var(--aia-ease), background var(--aia-dur) var(--aia-ease);
  white-space:nowrap;
}
.aia-btn:hover{ transform:translateY(-2px); }
.aia-btn-lg{ padding:1.1rem 2.25rem; font-size:var(--aia-fs-lg); }
/* Compound ".aia-btn.aia-btn-*" (not just ".aia-btn-*") is deliberate: the
   base reset ".aia a{ color:inherit; }" (line ~107) has specificity (0,1,1),
   which silently beat a bare ".aia-btn-primary{ color:#fff; }" (0,1,0) —
   surfacing as invisible/low-contrast button text (navy-on-navy for
   .aia-btn-dark, low-contrast navy-on-blue for .aia-btn-primary) any time a
   button sits in a section whose ambient text color isn't already white.
   Every .aia-btn-* element already carries the base .aia-btn class too, so
   this raises specificity to (0,2,0) and reliably wins, without touching
   any layout/spacing/color VALUES. */
.aia-btn.aia-btn-primary{ background:var(--aia-secondary); color:#fff; box-shadow:var(--aia-shadow-glow); }
.aia-btn.aia-btn-primary:hover{ background:var(--aia-secondary-600); box-shadow:0 12px 36px rgba(37,99,235,.32); }
.aia-btn.aia-btn-dark{ background:var(--aia-primary); color:#fff; box-shadow:var(--aia-shadow-md); }
.aia-btn.aia-btn-dark:hover{ background:var(--aia-primary-700); }
.aia-btn.aia-btn-outline{ background:transparent; border-color:var(--aia-border); color:var(--aia-primary); }
.aia-btn.aia-btn-outline:hover{ border-color:var(--aia-secondary); color:var(--aia-secondary); }
.aia-btn.aia-btn-ghost-light{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff; }
.aia-btn.aia-btn-ghost-light:hover{ background:rgba(255,255,255,.18); }
/* .aia-btn-outline used inside a dark section (e.g. .bg-navy) needs the
   light variant instead — same specificity fix, scoped to that context so
   the light-section default above is untouched. */
.bg-navy .aia-btn.aia-btn-outline, .bg-gradient .aia-btn.aia-btn-outline{ border-color:rgba(255,255,255,.28); color:#fff; }
.bg-navy .aia-btn.aia-btn-outline:hover, .bg-gradient .aia-btn.aia-btn-outline:hover{ border-color:#fff; color:#fff; }
.aia-btn-group{ display:flex; gap:var(--aia-space-2); flex-wrap:wrap; }
.aia-center .aia-btn-group{ justify-content:center; }

/* ---------- Glass effect ---------- */
.aia-glass{
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.5);
}
.aia-glass-dark{
  background:rgba(11,31,58,.55);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.08);
}

/* ---------- Auth card (Register / Login) ---------- */
.aia-auth-section{ padding:calc(var(--aia-header-h) + var(--aia-space-6)) 0 var(--aia-space-7); min-height:70vh; display:flex; align-items:center; }
.aia-auth-card{
  max-width:440px; margin:0 auto; padding:var(--aia-space-4); border-radius:var(--aia-radius-lg);
  color:#fff;
}
.aia-auth-card h1{ color:#fff; font-size:var(--aia-fs-2xl); margin-bottom:.35rem; }
.aia-auth-card p{ color:rgba(255,255,255,.72); margin-bottom:var(--aia-space-3); }
.aia-field{ margin-bottom:1rem; text-align:left; }
.aia-field label{ display:block; font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.85); margin-bottom:.4rem; }
.aia-field input[type="text"], .aia-field input[type="email"], .aia-field input[type="password"] {
  width:100%; padding:.85rem 1rem; border-radius:var(--aia-radius-sm);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff;
  font-family:var(--aia-font); font-size:var(--aia-fs-base); min-height:44px;
}
.aia-field input::placeholder{ color:rgba(255,255,255,.4); }
.aia-field input:focus{ outline:2px solid var(--aia-secondary); outline-offset:1px; border-color:var(--aia-secondary); }
.aia-field-password-wrap{ position:relative; }
.aia-field-password-toggle{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:rgba(255,255,255,.6); cursor:pointer;
  font-size:.8125rem; font-weight:600; min-height:44px; min-width:44px;
}
.aia-field-error{ color:#FCA5A5; font-size:.8125rem; margin-top:.35rem; display:none; }
.aia-field.has-error input{ border-color:#F87171; }
.aia-field.has-error .aia-field-error{ display:block; }
.aia-checkbox-field{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1.25rem; font-size:.8125rem; color:rgba(255,255,255,.8); text-align:left; }
.aia-checkbox-field input{ margin-top:.2rem; min-width:18px; min-height:18px; }
.aia-checkbox-field a{ color:var(--aia-secondary-100); text-decoration:underline; }
.aia-auth-switch{ margin-top:var(--aia-space-3); text-align:center; color:rgba(255,255,255,.72); font-size:.9rem; }
.aia-auth-switch a{ color:#fff; font-weight:600; }
.aia-form-status{ margin-top:1rem; padding:.85rem 1rem; border-radius:var(--aia-radius-sm); font-size:.875rem; display:none; }
.aia-form-status.is-error{ display:block; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.4); color:#FCA5A5; }
.aia-form-status.is-success{ display:block; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.4); color:#6EE7B7; }

/* ---------- Checkout ---------- */
.aia-checkout-section{min-height:calc(100vh - var(--aia-header-h));padding-top:calc(var(--aia-header-h) + var(--aia-space-5));background:radial-gradient(55% 55% at 85% 0%,rgba(124,58,237,.1),transparent 65%),var(--aia-bg)}
.aia-checkout-shell{max-width:1120px}.aia-checkout-heading{max-width:720px;margin:0 auto var(--aia-space-4);text-align:center}.aia-checkout-heading h1{margin:.5rem 0}.aia-checkout-heading p{margin:0 auto;color:var(--aia-text-muted)}
.aia-checkout-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);max-width:720px;margin:0 auto var(--aia-space-5);padding:0}.aia-checkout-steps li{position:relative;display:flex;align-items:center;justify-content:center;gap:.55rem;color:var(--aia-text-faint);font-size:.8125rem;font-weight:700}.aia-checkout-steps li:not(:last-child):after{content:"";position:absolute;left:65%;right:-35%;height:1px;background:var(--aia-border)}.aia-checkout-steps span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--aia-border);background:var(--aia-surface);z-index:1}.aia-checkout-steps .is-complete,.aia-checkout-steps .is-current{color:var(--aia-primary)}.aia-checkout-steps .is-complete span{background:var(--aia-primary);border-color:var(--aia-primary);color:#fff}.aia-checkout-steps .is-current span{background:var(--aia-secondary);border-color:var(--aia-secondary);color:#fff;box-shadow:0 0 0 5px rgba(37,99,235,.12)}
.aia-checkout-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:var(--aia-space-4);align-items:start}.aia-checkout-grid .aia-card{border:1px solid rgba(148,163,184,.24);box-shadow:0 20px 50px rgba(11,31,58,.1)}.aia-card-kicker{color:var(--aia-secondary);font-size:.75rem;line-height:1;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.85rem}.aia-order-plan-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:1.15rem;border-bottom:1px solid var(--aia-border)}.aia-order-plan-heading h2,.aia-payment-method-card h2{font-size:1.45rem;margin:0 0 .3rem}.aia-order-plan-heading p{margin:0;color:var(--aia-text-muted);font-size:.875rem}.aia-sandbox-badge{padding:.4rem .65rem;border-radius:var(--aia-radius-pill);background:rgba(124,58,237,.1);color:#7C3AED;font-size:.7rem;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.aia-order-summary-row{display:flex;justify-content:space-between;gap:1rem;padding:.78rem 0;border-bottom:1px solid var(--aia-border);font-size:.9rem}.aia-order-summary-row span{color:var(--aia-text-muted)}.aia-order-summary-row strong{text-align:right;color:var(--aia-text)}.aia-order-summary-row.is-total{border-bottom:none;padding:1.1rem 0 .5rem;font-size:1.2rem}.aia-order-summary-row.is-total strong{color:var(--aia-primary);font-size:1.45rem}.aia-checkout-benefits{list-style:none;margin:1rem 0 0;padding:1rem;border-radius:var(--aia-radius-sm);background:var(--aia-bg);display:grid;gap:.55rem}.aia-checkout-benefits li{position:relative;padding-left:1.35rem;color:var(--aia-text-muted);font-size:.82rem}.aia-checkout-benefits li:before{content:"✓";position:absolute;left:0;color:#10B981;font-weight:800}
.aia-payment-method-card{text-align:left;position:sticky;top:calc(var(--aia-header-h) + 1.5rem)}.aia-payment-method-card>p{color:var(--aia-text-muted);font-size:.9rem}.aia-paypal-mark{min-height:76px;margin:1.25rem 0 .3rem;border:1px solid var(--aia-border);border-radius:var(--aia-radius-sm);display:flex;align-items:center;justify-content:center;gap:.5rem;color:#003087;font-size:1.15rem;font-weight:800;background:#fff}.aia-paypal-mark span{color:#009cde;font-size:1.5rem;font-style:italic}.aia-payment-method-card .aia-btn{width:100%;margin-top:1rem}.aia-payment-method-card .aia-btn:disabled{opacity:.62;cursor:wait}.aia-checkout-security{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem .85rem;margin-top:1rem;color:var(--aia-text-faint);font-size:.72rem}.aia-checkout-security span:before{content:"•";margin-right:.45rem;color:#10B981}.aia-checkout-help{margin:var(--aia-space-3) 0 0;text-align:center;color:var(--aia-text-faint);font-size:.82rem}.aia-checkout-help a{color:var(--aia-secondary);font-weight:700}.aia-payment-trust-line{margin-top:1rem;color:var(--aia-text-faint);font-size:.8125rem}.aia-pricing-launch-note{min-height:46px;margin:-.2rem 0 1rem;color:var(--aia-text-muted);font-size:.78rem;line-height:1.45}
@media(max-width:820px){.aia-checkout-grid{grid-template-columns:1fr}.aia-payment-method-card{position:static}}@media(max-width:560px){.aia-checkout-section{padding-top:calc(var(--aia-header-h) + var(--aia-space-3))}.aia-checkout-heading{margin-bottom:var(--aia-space-3)}.aia-checkout-steps{margin-bottom:var(--aia-space-3)}.aia-checkout-steps li{font-size:0;gap:0}.aia-checkout-steps li:not(:last-child):after{left:60%;right:-40%}.aia-checkout-grid .aia-card{padding:var(--aia-space-3)}.aia-order-plan-heading{flex-direction:column}}

/* ---------- Payment status pages (success / failure / cancel) ---------- */
.aia-status-icon{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2rem; margin:0 auto 1.25rem;
}
.aia-status-icon.is-success{ background:rgba(52,211,153,.15); color:#10B981; }
.aia-status-icon.is-failure{ background:rgba(248,113,113,.15); color:#EF4444; }
.aia-status-icon.is-cancel{ background:rgba(148,163,184,.15); color:#64748B; }
.aia-status-detail-row{ display:flex; justify-content:space-between; padding:.5rem 0; font-size:.9rem; color:rgba(255,255,255,.8); border-bottom:1px solid rgba(255,255,255,.1); }
.aia-status-detail-row:last-child{ border-bottom:none; }

/* ---------- Grid ---------- */
.aia-grid{ display:grid; gap:var(--aia-space-3); }
.aia-grid-2{ grid-template-columns:repeat(2,1fr); }
.aia-grid-3{ grid-template-columns:repeat(3,1fr); }
.aia-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){
  .aia-grid-4{ grid-template-columns:repeat(2,1fr); }
  .aia-grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .aia-grid-2,.aia-grid-3,.aia-grid-4{ grid-template-columns:1fr; }
}

/* ---------- Card ---------- */
.aia-card{
  background:var(--aia-surface); border:1px solid var(--aia-border);
  border-radius:var(--aia-radius-md); padding:var(--aia-space-3);
  box-shadow:var(--aia-shadow-sm);
  transition:box-shadow var(--aia-dur) var(--aia-ease), transform var(--aia-dur) var(--aia-ease), border-color var(--aia-dur) var(--aia-ease);
}
.aia-card:hover{ box-shadow:var(--aia-shadow-md); transform:translateY(-4px); border-color:var(--aia-secondary-100); }
.aia-card h3{ font-size:var(--aia-fs-xl); margin-bottom:.5rem; }
.aia-card p{ font-size:var(--aia-fs-base); margin-bottom:0; }

/* ---------- Icon box ---------- */
.aia-icon{
  width:52px; height:52px; border-radius:var(--aia-radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--aia-gradient); color:#fff; font-size:1.4rem; margin-bottom:var(--aia-space-2);
  box-shadow:var(--aia-shadow-glow);
}

/* ---------- Stat row ---------- */
.aia-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--aia-space-3); }
.aia-stat b{ display:block; font-size:var(--aia-fs-4xl); color:var(--aia-primary); letter-spacing:-.02em; }
.aia-stat span{ color:var(--aia-text-muted); font-size:var(--aia-fs-sm); }
@media (max-width:768px){ .aia-stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Logos strip ---------- */
.aia-logos{ display:flex; align-items:center; justify-content:center; gap:var(--aia-space-5); flex-wrap:wrap; opacity:.6; }
.aia-logos span{ font-weight:700; font-size:var(--aia-fs-lg); color:var(--aia-text-faint); filter:grayscale(1); }

/* ---------- Pricing ---------- */
.aia-pricing-card{
  background:var(--aia-surface); border:1px solid var(--aia-border); border-radius:var(--aia-radius-lg);
  padding:var(--aia-space-4); display:flex; flex-direction:column; box-shadow:var(--aia-shadow-sm);
}
.aia-pricing-card.is-featured{
  border-color:var(--aia-secondary); box-shadow:var(--aia-shadow-lg); transform:scale(1.03); position:relative; z-index:1;
}
.aia-pricing-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--aia-gradient); color:#fff; font-size:var(--aia-fs-xs); font-weight:700;
  padding:.35rem .9rem; border-radius:var(--aia-radius-pill);
}
.aia-price{ font-size:var(--aia-fs-4xl); font-weight:700; color:var(--aia-primary); margin:var(--aia-space-2) 0; }
.aia-price small{ font-size:var(--aia-fs-sm); font-weight:500; color:var(--aia-text-muted); }
.aia-pricing-list li{ display:flex; gap:.6rem; padding:.5rem 0; color:var(--aia-text-muted); border-top:1px solid var(--aia-border); font-size:var(--aia-fs-sm); }
.aia-pricing-list li:first-child{ border-top:none; }
.aia-pricing-list li:before{ content:"✓"; color:var(--aia-secondary); font-weight:700; }

/* ---------- FAQ (pure CSS, no JS needed) ---------- */
.aia-faq{ max-width:760px; margin:0 auto; }
.aia-faq details{
  border-bottom:1px solid var(--aia-border); padding:var(--aia-space-2) 0;
}
.aia-faq summary{
  cursor:pointer; font-weight:600; font-size:var(--aia-fs-lg); color:var(--aia-primary);
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.aia-faq summary::-webkit-details-marker{ display:none; }
.aia-faq summary:after{ content:"+"; font-size:1.5rem; color:var(--aia-secondary); transition:transform var(--aia-dur) var(--aia-ease); }
.aia-faq details[open] summary:after{ transform:rotate(45deg); }
.aia-faq p{ margin-top:var(--aia-space-1); }

/* ---------- Workflow / steps ---------- */
.aia-steps{ display:flex; gap:var(--aia-space-3); counter-reset:aia-step; flex-wrap:wrap; }
.aia-step{ flex:1 1 220px; position:relative; padding-top:var(--aia-space-4); }
.aia-step:before{
  counter-increment:aia-step; content:counter(aia-step);
  width:40px; height:40px; border-radius:50%; background:var(--aia-gradient); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:var(--aia-space-2);
}
.aia-flow-badge{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--aia-surface);
  border:1px solid var(--aia-border); border-radius:var(--aia-radius-pill); padding:.6rem 1.1rem;
  font-size:var(--aia-fs-sm); font-weight:600; box-shadow:var(--aia-shadow-sm);
}
.aia-flow-row{ display:flex; align-items:center; gap:var(--aia-space-2); flex-wrap:wrap; justify-content:center; }
.aia-flow-arrow{ color:var(--aia-text-faint); font-size:1.3rem; }

/* ---------- Header ---------- */
/* V2: permanently dark/solid (not transparent-over-hero) — see Homepage V2
   Design Reference Part "Header": "Dark background." Scroll state only adds
   elevation/blur, it no longer changes from transparent to opaque. */
.aia-header{
  position:fixed; top:0; left:-2px; right:-2px; width:calc(100% + 4px); z-index:9999;
  height:var(--aia-header-h); display:flex; align-items:center;
  background:var(--aia-primary);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow var(--aia-dur) var(--aia-ease), background var(--aia-dur) var(--aia-ease);
  transform:translateZ(0);
}
.aia-header .aia-header-inner{ padding-left:calc(40px + 2px); padding-right:calc(40px + 2px); }
@media (max-width:768px){ .aia-header .aia-header-inner{ padding-left:calc(var(--aia-space-3) + 2px); padding-right:calc(var(--aia-space-3) + 2px); } }
.aia-header.is-scrolled{
  background:rgba(11,31,58,.94); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 28px rgba(3,10,22,.28);
}
.aia-header-inner{ width:100%; max-width:1600px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; }
@media (max-width:768px){ .aia-header-inner{ padding:0 var(--aia-space-3); } }
.aia-logo{ display:flex; align-items:center; flex-shrink:0; }
.aia-logo img{ height:36px; width:auto; display:block; }
@media (max-width:768px){
  .aia-logo img{ height:32px; }
  /* Mobile header doesn't need desktop's 76px — a shorter bar leaves
     more of the viewport for the hero on small screens. Every other
     rule that depends on header height (hero margin-top, mobile nav
     drawer's top offset, etc.) reads this same variable, so lowering
     it here is enough — nothing else needs to change in lockstep. */
  :root{ --aia-header-h:60px; }
}
.aia-nav{ display:flex; align-items:center; gap:var(--aia-space-3); height:100%; }
.aia-nav-links{ display:flex; align-items:center; gap:1.35rem; height:100%; }
.aia-nav-links a{ font-size:.875rem; font-weight:600; color:rgba(255,255,255,.82); padding:.5rem 0; position:relative; display:flex; align-items:center; height:100%; white-space:nowrap; }
.aia-nav-links a:hover{ color:#fff; }
.aia-nav-links a[style*="secondary"]{ color:var(--aia-secondary-100) !important; }
.aia-nav-cta{ display:flex; align-items:center; gap:.9rem; }
.aia-language-switcher{display:flex;align-items:center;gap:.3rem;min-width:96px;padding:.35rem .55rem;border:1px solid rgba(255,255,255,.2);border-radius:var(--aia-radius-pill);color:rgba(255,255,255,.65);font-size:.75rem;font-weight:700}.aia-language-switcher a{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.72);font:700 .75rem var(--aia-font);padding:.2rem .25rem;cursor:pointer;text-decoration:none}.aia-language-switcher a:hover,.aia-language-switcher a.is-active,.aia-language-switcher a[aria-current="page"]{color:#fff}.aia-language-switcher a.is-active,.aia-language-switcher a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}@media(max-width:560px){.aia-language-switcher{min-width:84px;padding:.3rem .4rem}.aia-language-switcher a{font-size:.7rem}}
.aia-nav-cta .aia-btn{ padding:.6rem 1.15rem; font-size:.8125rem; white-space:nowrap; }
.aia-nav-cta .aia-btn-outline{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.aia-nav-cta .aia-btn-outline:hover{ border-color:#fff; color:#fff; }
.aia-nav-login-link{ font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.82); white-space:nowrap; }
.aia-nav-login-link:hover{ color:#fff; }
/* Mobile-drawer-only CTA block (Login + Start Free Trial) — hidden at
   desktop widths, shown inside the drawer at the mobile breakpoint below. */
.aia-nav-mobile-cta{ display:none; }
/* Same story for the drawer's full-word language switcher — desktop keeps
   the compact EN/繁中 pill only. */
.aia-language-switcher-drawer{ display:none; }
.aia-nav-toggle{ display:none; flex-direction:column; background:none; border:none; cursor:pointer; padding:.4rem; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.aia-nav-toggle span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; border-radius:2px; }
/* Collapse to the mobile drawer well before the 9-item desktop nav
   (7 links + 2 CTA buttons) risks wrapping/clipping — verified at the
   375/390/768/1024/1440/1920 QA matrix; 1024 intentionally gets the
   mobile drawer, not a squeezed desktop row. */
@media (max-width:1180px){
  .aia-nav-links{
    /* ROOT CAUSE of the mobile menu "does nothing" bug: .aia-header has
       transform:translateZ(0) (an unrelated paint-layer/hairline-gap
       hack). Per the CSS spec, an element with any transform becomes the
       *containing block* for position:fixed descendants — so this
       drawer was never actually fixed to the viewport, it was fixed to
       .aia-header's own ~60-76px-tall box. `top:var(--aia-header-h)`
       landed exactly on that box's bottom edge, and `bottom:0` landed on
       the same point again, so the drawer's real height collapsed to
       0 (just its own padding, ~48px) every time it "opened" — visually
       indistinguishable from the toggle doing nothing. An explicit
       height anchored only to `top` sidesteps that broken containing
       block entirely (height isn't computed from the container's bottom
       edge, so it doesn't collapse). left/right use 2px instead of 0 for
       the same reason: the header's own -2px/+2px overscan (part of that
       same hairline-gap hack) shifts this drawer's containing-block
       edges by 2px, which otherwise pushed the drawer 2px past each
       side of the viewport. Verified with a real headless-browser
       repro (Playwright) before and after this change — see PR. */
    position:fixed; top:var(--aia-header-h); left:2px; right:2px;
    height:calc(100vh - var(--aia-header-h)); height:calc(100dvh - var(--aia-header-h));
    background:var(--aia-primary); flex-direction:column; align-items:flex-start; gap:0;
    padding:var(--aia-space-3); transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--aia-dur) var(--aia-ease), transform var(--aia-dur) var(--aia-ease), visibility 0s linear var(--aia-dur);
    overflow-y:auto;
  }
  .aia-nav-links a{ width:100%; height:auto; padding:var(--aia-space-2) 0; border-bottom:1px solid rgba(255,255,255,.1); }
  .aia-header.is-open .aia-nav-links{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s; }
  .aia-nav-toggle{ display:flex; }
  /* Mobile header is logo + hamburger only — Login/Book a Demo/Start Free
     Trial move into the drawer below instead of crowding the compact bar. */
  .aia-nav-cta{ display:none; }
  /* Compact EN/繁中 pill lives in the desktop bar only — the drawer gets
     the spelled-out switcher below instead (spec: "手機 Header 不再直接
     顯示 EN／繁中膠囊按鈕"). */
  .aia-nav > .aia-language-switcher{ display:none; }
  .aia-nav-mobile-cta{
    display:flex; flex-direction:column; gap:var(--aia-space-2); width:100%;
    margin-top:var(--aia-space-2);
  }
  .aia-nav-mobile-cta .aia-btn{ width:100%; min-height:44px; }
  /* Root cause of the invisible mobile "Login" button: .aia-btn-outline's
     default is navy-text-on-transparent (line ~201), meant for a light
     page background. The existing light-text override further up only
     fires inside `.bg-navy`/`.bg-gradient` *sections* — the drawer isn't
     one of those (its dark navy background is set directly on
     .aia-nav-links above), so the override never matched here and the
     button rendered navy-text on navy-background. Scope the same light
     variant to the drawer CTA directly instead of requiring a wrapper
     class the drawer will never have. */
  .aia-nav-mobile-cta .aia-btn.aia-btn-outline{
    background:transparent; border-color:rgba(255,255,255,.6); color:#fff;
  }
  .aia-nav-mobile-cta .aia-btn.aia-btn-outline:hover,
  .aia-nav-mobile-cta .aia-btn.aia-btn-outline:focus-visible{
    background:rgba(255,255,255,.12); border-color:#fff; color:#fff;
  }
  .aia-nav-mobile-cta .aia-btn.aia-btn-outline:active{
    background:rgba(255,255,255,.2);
  }
  .aia-nav-mobile-cta .aia-btn:focus-visible{
    outline:2px solid #fff; outline-offset:2px;
  }
  .aia-language-switcher-drawer{
    display:flex; gap:1.1rem; width:100%; padding:var(--aia-space-2) 0;
    border-bottom:1px solid rgba(255,255,255,.1); margin-top:.25rem;
  }
  .aia-language-switcher-drawer a{
    appearance:none; border:0; background:transparent; cursor:pointer;
    font:600 .875rem var(--aia-font); color:rgba(255,255,255,.72);
    padding:.5rem 0; min-height:44px;
  }
  .aia-language-switcher-drawer a:hover,
  .aia-language-switcher-drawer a.is-active,
  .aia-language-switcher-drawer a[aria-current="page"]{
    color:#fff; text-decoration:underline; text-underline-offset:3px;
  }
}

/* ---------- Mobile top bar: hamburger | logo | search | member icon ----------
   Spec: "1024px 以下排列固定為：漢堡選單｜精簡 Logo｜全文搜尋欄｜會員 Icon".
   These three elements are display:none by default (see their base rules
   above/below) so desktop's logo+nav layout is completely untouched; this
   query only ever fires at <=1024px, safely inside the existing <=1180px
   drawer-collapse breakpoint. */
.aia-header-search{ display:none; }
.aia-member-icon{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; min-width:44px; border-radius:50%;
  flex-shrink:0;
}
/* Base ".aia a{ color:inherit; }" (0,1,1) outranks a bare ".aia-member-icon"
   (0,1,0), so the icon silently inherited the header's dark text color
   instead of this rule's light one — the same class of bug the codebase
   already documents for .aia-btn (see the compound-selector comment near
   the button rules above). Qualifying with .aia-header (0,2,0) reliably
   wins instead of depending on source order. */
.aia-header .aia-member-icon{ color:rgba(255,255,255,.88); }
.aia-header .aia-member-icon:hover, .aia-header .aia-member-icon:focus-visible{ color:#fff; background:rgba(255,255,255,.08); }
.aia-header .aia-member-icon:focus-visible{ outline:2px solid var(--aia-secondary-100); outline-offset:1px; }
@media (max-width:1024px){
  .aia-header-inner{ gap:.5rem; padding-left:var(--aia-space-3); padding-right:var(--aia-space-3); }
  .aia-nav-toggle{ order:1; flex-shrink:0; }
  .aia-logo{ order:2; }
  .aia-logo img{ height:28px; }
  .aia-header-search{
    order:3; display:flex; align-items:center; flex:1 1 auto; min-width:0;
    height:40px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
    border-radius:var(--aia-radius-pill); padding:0 .25rem 0 .9rem;
  }
  .aia-header-search-input{
    flex:1 1 auto; min-width:0; width:100%; border:0; background:transparent;
    color:#fff; font:500 .875rem var(--aia-font); padding:0;
  }
  .aia-header-search-input::placeholder{ color:rgba(255,255,255,.55); }
  .aia-header-search-input:focus{ outline:none; }
  .aia-header-search-submit{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; min-width:40px; flex-shrink:0; border-radius:50%;
    background:transparent; border:0; color:rgba(255,255,255,.85); cursor:pointer;
  }
  .aia-header-search-submit:hover, .aia-header-search-submit:focus-visible{ color:#fff; }
  .aia-member-icon{ order:4; display:flex; }
  .aia-nav{ order:5; }
}
@media (max-width:480px){
  /* Even tighter — trim the search field's own inner padding rather than
     letting it shrink below a usable tap target width. */
  .aia-header-inner{ gap:.35rem; }
  .aia-header-search{ padding-left:.65rem; }
}
/* Prevent the page behind the full-screen mobile nav drawer from
   scrolling while it's open (main.js toggles this class alongside
   .aia-header.is-open). */
body.aia-menu-open{ overflow:hidden; }

/* ---------- Hero ---------- */
.aia-hero{
  padding: calc(var(--aia-header-h) + var(--aia-space-6)) 0 var(--aia-space-7);
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(124,58,237,.12) 0%, rgba(124,58,237,0) 60%),
    radial-gradient(50% 50% at 10% 10%, rgba(37,99,235,.14) 0%, rgba(37,99,235,0) 60%),
    var(--aia-bg);
}
.aia-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--aia-space-5); align-items:center; }
@media (max-width:960px){ .aia-hero-grid{ grid-template-columns:1fr; } }
.aia-hero h1{ margin-bottom:var(--aia-space-3); }
.aia-hero-visual{
  border-radius:var(--aia-radius-lg); background:var(--aia-white); border:1px solid var(--aia-border);
  box-shadow:var(--aia-shadow-lg); padding:var(--aia-space-3); min-height:320px;
}

/* ---------- Hero Carousel (Homepage V2) ----------
   Each slide is a real <picture> with a native <source media> swap (see
   aia_hero_carousel() in inc/components.php) between a desktop composite
   (2400x832 — headline/description/CTA baked into the artwork) and a
   dedicated 1080x1350 (4:5) mobile/tablet portrait asset — not a CSS
   treatment (crop/letterbox/blur) of the single desktop image, which is
   what the previous mobile Hero (PR #25) had to do before real mobile
   art existed. No separate HTML headline/lede is layered on top — that
   would duplicate text already baked into the image. The whole slide is
   one real, keyboard-reachable link so each image's own baked-in CTA
   stays functionally clickable.

   The container has NO fixed aspect-ratio or min-height (deliberately —
   an earlier version pinned aspect-ratio to the asset's *assumed* exact
   pixel dimensions per breakpoint, which only ever holds for precisely
   2400x832 / 1080x1350 uploads and silently breaks — short container,
   CTA overlapping the image's bottom — the moment any real value drifts
   from that assumption). Instead the ACTIVE slide is the only one in
   normal document flow (see .aia-hc-slide.is-active below); its own
   <img> renders at width:100%;height:auto, so the container's height is
   always exactly whatever that specific image's own aspect ratio needs,
   correct for the exact desktop or mobile asset actually being shown —
   including a future admin-uploaded image that isn't pixel-identical to
   today's. */
.aia-hero-carousel{
  position:relative; margin-top:var(--aia-header-h);
  margin-left:-2px; margin-right:-2px; width:calc(100% + 4px);
  background: var(--aia-primary);
  overflow:hidden;
  transform:translateZ(0);
}
.aia-hc-track{ position:relative; width:100%; }
.aia-hc-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .6s var(--aia-ease);
}
/* The active slide leaves absolute positioning and joins normal flow —
   this is what actually gives the carousel its height (see comment
   above); every other slide stays absolutely positioned/hidden so it
   never affects layout. main.js adds this class to the incoming slide
   BEFORE removing it from the outgoing one, so there's never a frame
   with zero slides in flow (zero-height flash / CLS). */
.aia-hc-slide.is-active{
  position:relative; inset:auto;
  opacity:1; visibility:visible; pointer-events:auto;
}
.aia-hc-slide-link{ display:block; width:100%; }
.aia-hc-slide picture{ display:block; width:100%; }
.aia-hc-slide-img{
  display:block; width:100%; height:auto; object-fit:initial;
}
.aia-hc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08); color:#fff; font-size:1.35rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--aia-dur) var(--aia-ease), border-color var(--aia-dur) var(--aia-ease);
}
.aia-hc-arrow:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); }
.aia-hc-arrow:focus-visible{ outline:2px solid var(--aia-secondary-100); outline-offset:2px; }
.aia-hc-prev{ left:var(--aia-space-3); }
.aia-hc-next{ right:var(--aia-space-3); }
.aia-hc-dots{ position:absolute; left:0; right:0; bottom:var(--aia-space-3); z-index:2; display:flex; justify-content:center; gap:.6rem; }
.aia-hc-dot{
  width:10px; height:10px; border-radius:50%; padding:0; cursor:pointer;
  background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.5);
  transition:background var(--aia-dur) var(--aia-ease), transform var(--aia-dur) var(--aia-ease);
}
.aia-hc-dot.is-active{ background:#fff; transform:scale(1.2); }
.aia-hc-dot:focus-visible{ outline:2px solid var(--aia-secondary-100); outline-offset:2px; }
/* 767px matches the <picture><source media="(max-width: 767px)"> breakpoint
   in aia_hero_carousel() exactly — this dots/arrow treatment is about the
   mobile *image* being in use, not the separate mobile-header breakpoint
   (1024px) elsewhere in this file. */
@media (max-width:767px){
  .aia-hc-arrow{ width:44px; height:44px; }
  .aia-hc-prev{ left:var(--aia-space-2); }
  .aia-hc-next{ right:var(--aia-space-2); }
  /* Spec: remove the 3 carousel dots on mobile. They're already an
     absolutely-positioned overlay (no layout height of their own), so
     hiding them doesn't leave a gap to fill. The arrows stay — also
     overlay-only, so they cost no extra vertical space either — but must
     never sit on top of important text, which is why they're pinned to
     the vertical center rather than a fixed edge inset. */
  .aia-hc-dots{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .aia-hc-slide{ transition:none; }
}

/* ---------- Photo cards (Industries — Homepage V2) ---------- */
.aia-photo-card{
  position:relative; display:block; border-radius:var(--aia-radius-md); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--aia-shadow-md);
}
.aia-photo-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.aia-photo-card-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,31,58,.15) 0%, rgba(11,31,58,.55) 60%, rgba(11,31,58,.92) 100%);
}
.aia-photo-card-body{ position:absolute; left:0; right:0; bottom:0; padding:var(--aia-space-3); z-index:1; }
.aia-photo-card-body h3{ color:#fff; font-size:var(--aia-fs-lg); margin-bottom:.25rem; }
.aia-photo-card-body p{ color:rgba(255,255,255,.75); font-size:.8125rem; margin:0; }
.aia-photo-card-arrow{
  position:absolute; right:var(--aia-space-2); bottom:var(--aia-space-2); z-index:1;
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem;
  transition:background var(--aia-dur) var(--aia-ease), transform var(--aia-dur) var(--aia-ease);
}
.aia-photo-card:hover .aia-photo-card-arrow{ background:var(--aia-secondary); transform:translateX(2px); }

/* ---------- Compact trust strip (Homepage V2) ---------- */
.aia-trust-strip{ padding:var(--aia-space-4) 0; }
.aia-trust-strip .aia-header-block{ margin-bottom:var(--aia-space-2); }
@media (max-width:768px){
  /* Desktop's 48px inter-item gap (--aia-space-5) reads as excessive
     once 6 items wrap to 2-3 lines on a narrow screen. */
  .aia-trust-strip{ padding:var(--aia-space-3) 0; }
  .aia-trust-strip .aia-logos{ gap:var(--aia-space-3); }
}

/* ---------- CTA band ---------- */
.aia-cta-band{
  background:var(--aia-primary); border-radius:var(--aia-radius-lg); padding:var(--aia-space-6) var(--aia-space-4);
  text-align:center; position:relative; overflow:hidden;
}
.aia-cta-band:before{
  content:""; position:absolute; inset:0; background:var(--aia-gradient); opacity:.18;
}
.aia-cta-band *{ position:relative; z-index:1; }
.aia-cta-band h2, .aia-cta-band p{ color:#fff; }
.aia-cta-band p{ color:rgba(255,255,255,.72); }

/* ---------- Footer ---------- */
.aia-footer{ background:var(--aia-primary); color:rgba(255,255,255,.7); padding:var(--aia-space-6) 0 var(--aia-space-3); }
.aia-footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--aia-space-4); padding-bottom:var(--aia-space-4); border-bottom:1px solid rgba(255,255,255,.12); }
@media (max-width:900px){ .aia-footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .aia-footer-grid{ grid-template-columns:1fr; } }
.aia-footer h4{ color:#fff; font-size:var(--aia-fs-sm); text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--aia-space-2); }
.aia-footer a{ display:block; padding:.35rem 0; font-size:var(--aia-fs-sm); color:rgba(255,255,255,.65); }
.aia-footer a:hover{ color:#fff; }
.aia-footer-brand p{ color:rgba(255,255,255,.6); font-size:var(--aia-fs-sm); max-width:280px; }
.aia-footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:var(--aia-space-3); flex-wrap:wrap; gap:var(--aia-space-2); font-size:var(--aia-fs-xs); }
.aia-footer-social{ display:flex; gap:var(--aia-space-2); }
.aia-footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; padding:0; }
.aia-footer-social a:hover{ background:rgba(255,255,255,.18); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .aia *{ transition:none !important; animation:none !important; }
}