/* ──────────────────────────────────────────────────────────────────────────
   HERO 2026 v2 — Centered "docunest-style" premium hero
   ──────────────────────────────────────────────────────────────────────────
   Purpose: rewrite the landing-page hero from the old 2-column "text-left /
   mockup-right" composition into a centered single-column stack on mobile
   and tablet, matching the centered editorial style the founder approved.

   Responsive truth (so the rule and the doc never drift again):
     • <961px  → single centered column. Order: eyebrow → headline →
                 subtitle → CTAs → platform mini → trust checks → mockup
                 → .hero-aux. Everything stacks top-to-bottom.
     • ≥961px  → .hero-stack switches to a 2-column grid. The mockup
                 (.hero-visual) moves to column 2 and .hero-aux moves
                 to column 1 beside the headline, so wide viewports keep
                 a classic two-column hero rhythm without breaking the
                 mobile single-column stack.

   Load order: AFTER landing.css → this file wins the cascade for every
   #hero descendant rule without rewriting landing.css itself.

   Stack from top to bottom (single centered column):

   ┌──────────────────────────────────────────────────────────────────────┐
   │              → INTELLIGENTE ABLAGE. SOFORT.                          │
   │                                                                      │
   │            Scannen.  Benennen.  Archivieren.                         │
   │            (blue)    (violet)   (mint sweep)                         │
   │                                                                      │
   │         Fotografieren Sie ein Dokument. Unsere KI liest …            │
   │                                                                      │
   │      ┌────────────────────────────┐   ┌──────────────────┐           │
   │      │  Kostenlos starten      →  │   │  ▶ Live-Demo     │           │
   │      └────────────────────────────┘   └──────────────────┘           │
   │              (solid white pill)        (ghost outline)               │
   │                                                                      │
   │     Auch verfügbar als   [ ✈ Telegram ]   [ ↓ Web App ]             │
   │                                                                      │
   │     ✓ GoBD-orientiert · ✓ KI-Transparenz · ✓ §14 UStG                │
   │                                                                      │
   │      ┌──────────────────────────────────────────────────┐            │
   │      │  ◉ MintFolder AI                          Live   │            │
   │      │  📄 Rechnung_Telekom_2026.pdf       Archiviert  │            │
   │      │  📊 Kontoauszug_März_2026.pdf       Analysiert  │            │
   │      │  📋 Mietvertrag_Hauptstr_12.pdf  Kategorisiert  │            │
   │      │  ✦ KI analysiert …                              │            │
   │      └──────────────────────────────────────────────────┘            │
   │              (centered mockup with mint atmospheric glow)            │
   │                                                                      │
   │              ─── Oder anmelden mit ───                               │
   │      ┌────────────────────────────┐                                  │
   │      │  [G] Continue with Google  │                                  │
   │      │  [✉] Continue with Email   │                                  │
   │      │  ▾  Weitere Optionen       │                                  │
   │      └────────────────────────────┘                                  │
   │      ┌────────────────────────────┐                                  │
   │      │  ▼ GoBD-orientiert §147 AO │                                  │
   │      │  ▼ KI-Transparenz Art.50 → │                                  │
   │      │  ▼ E-Rechnung XRechnung    │                                  │
   │      └────────────────────────────┘                                  │
   └──────────────────────────────────────────────────────────────────────┘

   All scoped under #hero.hero--centered.
   ────────────────────────────────────────────────────────────────────── */


/* ============================================================
   1 · SECTION ATMOSPHERE
   Centered radial mint+blue glow that bridges the headline above
   and the mockup below — the whole section reads as one canvas.
   ============================================================ */
#hero.hero--centered {
  padding-bottom: clamp(3rem, 8vw, 7rem);
  /* The whole section needs to be a positioning context for the glow. */
  position: relative;
  isolation: isolate;
}

/* Atmospheric mint/blue glow behind the whole hero. Previously bounded to
   12%–92% which left the auth + trust block sitting in a dim no-glow zone
   that read as a "dark box" in the middle of the page. inset:0 now covers
   the entire hero section so the canvas stays uniform top-to-bottom. */
#hero.hero--centered::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 35% at 50% 22%, rgba(0, 229, 171, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 60%, rgba(94, 189, 255, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 55% 30% at 50% 88%, rgba(0, 229, 171, 0.10) 0%, transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}


/* ============================================================
   2 · CENTERED STACK CONTAINER
   Single column, max-width clamped so the headline never spans the
   full viewport on ultrawides.
   ============================================================ */
#hero.hero--centered .hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}


/* ============================================================
   3 · EYEBROW (centered, with leading arrow glyph)
   ============================================================ */
#hero.hero--centered .hero-eyebrow--centered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin: 0 auto 1.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  animation: fadeUp 0.6s var(--ease) both;
}
#hero.hero--centered .hero-eyebrow--centered::before,
#hero.hero--centered .hero-eyebrow--centered::after {
  display: none !important;
}
#hero.hero--centered .hero-eyebrow-glyph {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mint-bright, var(--mint));
  filter: drop-shadow(0 0 8px rgba(0, 229, 171, 0.55));
  transform: translateY(-1px);
}


/* ============================================================
   4 · HUGE CENTERED HEADLINE
   Three words on three lines for LTR (block per word), single line
   for RTL. text-wrap: balance keeps each line visually balanced.
   ============================================================ */
#hero.hero--centered .hero-title--centered {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--text);
  margin: 0 auto 1.5rem;
  max-width: 16ch;
  text-align: center;
  text-wrap: balance;
}
#hero.hero--centered .hero-title--centered .hero-word {
  display: block;
  margin: 0 auto;
}
[dir="rtl"] #hero.hero--centered .hero-title--centered .hero-word {
  display: inline;
}
#hero.hero--centered .hero-title--centered .hero-word.text-gradient {
  /* Mint sweep on the third word keeps the existing brand motion. */
  animation: typeWord 0.85s var(--ease) both,
             mintSweep 6s var(--ease) infinite;
  animation-delay: 0.44s, 1.8s;
}


/* ============================================================
   5 · FLOWLINE SUBTITLE
   Three compact steps instead of a flat paragraph.
   ============================================================ */
#hero.hero--centered .hero-subtitle--centered {
  max-width: 720px;
  margin: 0 auto 2.25rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.55s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  #hero.hero--centered .hero-subtitle--centered { animation: none; opacity: 1; }
}

#hero.hero--centered .hero-flowline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.45rem;
  border-radius: 999px;
  color: #0F172A;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 250, 0.9));
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 18px 46px rgba(15, 23, 42, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px) saturate(126%);
  -webkit-backdrop-filter: blur(18px) saturate(126%);
}

#hero.hero--centered .hero-flowline-step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0 0.8rem 0 0.45rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 248, 0.92));
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

#hero.hero--centered .hero-flowline-index {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #06120D;
  background: linear-gradient(135deg, var(--mint), #9DFFD6);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

#hero.hero--centered .hero-flowline-step strong {
  color: #132033;
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0;
}

#hero.hero--centered .hero-flowline-arrow {
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 151, 112, 0.18), rgba(72, 176, 236, 0.55));
  box-shadow: 0 0 10px rgba(0, 151, 112, 0.13);
}

[dir="rtl"] #hero.hero--centered .hero-flowline-arrow {
  transform: scaleX(-1);
}


/* ============================================================
   6 · CTA ROW — primary white pill + ghost outline
   ============================================================ */
#hero.hero--centered .hero-cta-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin: 0 auto 1.75rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.75s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  #hero.hero--centered .hero-cta-row { animation: none; opacity: 1; }
}
#hero.hero--centered .hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 56px;
  padding: 0 1.625rem;
  border-radius: 999px;
  font-family: var(--font-sans, inherit);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
  white-space: nowrap;
}
#hero.hero--centered .hero-cta:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

/* Primary — solid white pill with dark text + animated arrow. */
#hero.hero--centered .hero-cta--primary {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);
  color: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.40) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
#hero.hero--centered .hero-cta--primary:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(0, 229, 171, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 229, 171, 0.55);
}
#hero.hero--centered .hero-cta--primary:active {
  transform: translate3d(0, 0, 0);
}
#hero.hero--centered .hero-cta--primary .hero-cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.22s var(--ease);
}
#hero.hero--centered .hero-cta--primary:hover .hero-cta-arrow {
  transform: translateX(4px);
}
[dir="rtl"] #hero.hero--centered .hero-cta--primary .hero-cta-arrow {
  transform: scaleX(-1);
}
[dir="rtl"] #hero.hero--centered .hero-cta--primary:hover .hero-cta-arrow {
  transform: scaleX(-1) translateX(4px);
}

/* Secondary — ghost outline pill. Quiet but premium, mint accent on hover. */
#hero.hero--centered .hero-cta--secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#hero.hero--centered .hero-cta--secondary:hover {
  transform: translate3d(0, -2px, 0);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(0, 229, 171, 0.55);
  box-shadow: 0 0 22px rgba(0, 229, 171, 0.16);
}
#hero.hero--centered .hero-cta--secondary .hero-cta-icon {
  width: 14px;
  height: 14px;
  color: var(--mint);
}


/* ============================================================
   7 · PLATFORM MINI-ROW — "Auch verfügbar als …"
   Small monochrome pills that mirror the AI Access Hub pills below.
   ============================================================ */
#hero.hero--centered .hero-platform-mini {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin: 0 auto 1.5rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.95s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  #hero.hero--centered .hero-platform-mini { animation: none; opacity: 1; }
}
#hero.hero--centered .hero-platform-mini-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-inline-end: 0.25rem;
}
#hero.hero--centered .hero-platform-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 34px;
  padding: 0 0.875rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  text-decoration: none;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}
#hero.hero--centered .hero-platform-mini-pill svg {
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  transition: color 0.18s var(--ease);
}
#hero.hero--centered .hero-platform-mini-pill:hover {
  transform: translate3d(0, -1px, 0);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(0, 229, 171, 0.45);
}
#hero.hero--centered .hero-platform-mini-pill:hover svg {
  color: var(--mint);
}


/* ============================================================
   8 · TRUST CHECK STRIP — three ✓ items on one line (desktop)
   ============================================================ */
#hero.hero--centered .hero-trust-checks {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin: 0 auto 3rem;
  padding: 0;
  list-style: none;
  opacity: 0;
  animation: fadeUp 0.6s 1.1s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  #hero.hero--centered .hero-trust-checks { animation: none; opacity: 1; }
}
#hero.hero--centered .hero-trust-checks-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  position: relative;
}
/* Mint middle-dot separator between items on desktop. */
#hero.hero--centered .hero-trust-checks-item + .hero-trust-checks-item::before {
  content: '·';
  position: absolute;
  left: -0.75rem;
  color: var(--mint);
  opacity: 0.65;
  font-weight: 700;
}
[dir="rtl"] #hero.hero--centered .hero-trust-checks-item + .hero-trust-checks-item::before {
  left: auto;
  right: -0.75rem;
}
#hero.hero--centered .hero-trust-checks-icon {
  width: 14px;
  height: 14px;
  color: var(--mint);
  filter: drop-shadow(0 0 6px rgba(0, 229, 171, 0.50));
  flex-shrink: 0;
}


/* ============================================================
   9 · CENTERED MOCKUP — atmospheric mint glow
   ============================================================ */
#hero.hero--centered .hero-visual--centered {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  opacity: 0;
  animation: fadeUp 0.85s 1.3s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  #hero.hero--centered .hero-visual--centered { animation: none; opacity: 1; }
}
/* Override landing.css's left-positioned hero-visual::before (designed for
   the 2-column layout) with a centered, larger atmospheric glow. */
#hero.hero--centered .hero-visual--centered::before {
  content: '';
  position: absolute;
  inset: -8% -12% -10% -12%;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 229, 171, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 30% 70%, rgba(94, 189, 255, 0.16) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 75% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 65%);
  filter: blur(45px);
  pointer-events: none;
  z-index: 0;
  animation: heroCenteredGlow 8s ease-in-out infinite;
}
@keyframes heroCenteredGlow {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.03); }
}
#hero.hero--centered .hero-visual--centered .product-mockup {
  position: relative;
  z-index: 1;
  /* Slow gentle float, replacing landing.css's `float` 8s with a more
     restrained 9s curve. */
  animation: heroMockupFloat 9s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 120px rgba(0, 229, 171, 0.12);
}
@keyframes heroMockupFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #hero.hero--centered .hero-visual--centered::before,
  #hero.hero--centered .hero-visual--centered .product-mockup {
    animation: none !important;
  }
}
/* Refined macOS-style dots from v1 — keep them. */
#hero.hero--centered .mockup-dots span {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(0, 0, 0, 0.20);
}
#hero.hero--centered .mockup-dots .d-r { background: linear-gradient(180deg, #FF6F61 0%, #E94335 100%); }
#hero.hero--centered .mockup-dots .d-y { background: linear-gradient(180deg, #FFD16A 0%, #FBAB1A 100%); }
#hero.hero--centered .mockup-dots .d-g { background: linear-gradient(180deg, #4FD17C 0%, #1FB04E 100%); }


/* ============================================================
   10 · AUXILIARY AUTH ZONE — below the mockup
   Carries the canonical Google / Email / Telegram / Apple buttons +
   the full compliance trust card. Visually quieter than the centered
   CTA above because this is the secondary surface.
   ============================================================ */
#hero.hero--centered .hero-aux {
  width: 100%;
  max-width: 460px;
  margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  opacity: 0;
  animation: fadeUp 0.6s 1.5s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  #hero.hero--centered .hero-aux { animation: none; opacity: 1; }
}

/* Slim "Or sign in with" divider above the auth card. */
#hero.hero--centered .hero-aux-divider {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#hero.hero--centered .hero-aux-divider::before,
#hero.hero--centered .hero-aux-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%);
}
#hero.hero--centered .hero-aux-divider span {
  white-space: nowrap;
}

/* The .hero-auth card itself — slightly more compact than the v1 desktop
   spec because the centered primary CTA upstairs is doing the heavy lift. */
/* User requested: remove the dark "box" around the auth area so the
   buttons float on the hero canvas. Keep the buttons themselves styled. */
#hero.hero--centered .hero-aux .hero-auth {
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: static;
  isolation: auto;
}
#hero.hero--centered .hero-aux .hero-auth::before { content: none; display: none; }
#hero.hero--centered .hero-aux .hero-auth > * { position: static; z-index: auto; }

#hero.hero--centered .hero-aux .hero-auth-btn {
  height: 50px;
  border-radius: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
}
#hero.hero--centered .hero-aux .hero-auth-btn-google {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%);
  color: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.92);
  /* Soft inner highlight only — drop-shadow removed so the button doesn't
     sit on a dark patch when the surrounding card was removed. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
#hero.hero--centered .hero-aux .hero-auth-btn-google:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 100%);
  border-color: rgba(0, 229, 171, 0.55);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(0, 229, 171, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: translate3d(0, -1px, 0);
}
#hero.hero--centered .hero-aux .hero-auth-btn-email {
  /* Quiet ghost button on the dark hero canvas — no opaque navy fill or
     drop-shadow that would re-create the "dark stack" effect. */
  background: rgba(255, 255, 255, 0.04);
  color: #F2F7FF;
  border: 1px solid rgba(94, 189, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#hero.hero--centered .hero-aux .hero-auth-btn-email:hover {
  background: linear-gradient(180deg, rgba(30, 46, 80, 1) 0%, rgba(17, 28, 52, 1) 100%);
  border-color: rgba(0, 229, 171, 0.45);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.46),
    0 0 26px rgba(0, 229, 171, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: translate3d(0, -1px, 0);
}

#hero.hero--centered .hero-aux .hero-auth-more {
  margin-top: 0.625rem;
  padding-top: 0;
  border-top: 0;
  position: relative;
}
#hero.hero--centered .hero-aux .hero-auth-more-toggle--refined {
  padding: 0.5625rem 0.875rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
#hero.hero--centered .hero-aux .hero-auth-more-toggle--refined:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 229, 171, 0.22);
  color: var(--text);
}


/* ============================================================
   11 · TRUST CARD (in .hero-aux) — preserved v1 styling
   Three legal/compliance rows with the §147 AO and KI-VO link.
   ============================================================ */
/* User requested: remove the dark "box" around the trust card so the
   three compliance rows float on the hero canvas. */
#hero.hero--centered .hero-aux .hero-trust-card {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  isolation: auto;
}
#hero.hero--centered .hero-aux .hero-trust-card::before { content: none; display: none; }

#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0.6875rem 0.875rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text);
  animation: none !important;
  opacity: 1 !important;
  flex-wrap: nowrap !important;
  text-align: start;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row + .hero-trust-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 0 !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row:hover {
  background: rgba(255, 255, 255, 0.025) !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row > svg {
  grid-column: 1;
  width: 28px !important;
  height: 28px !important;
  padding: 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-gobd-chip > svg {
  color: var(--mint);
  background: rgba(0, 229, 171, 0.10);
  border: 1px solid rgba(0, 229, 171, 0.24);
  box-shadow: 0 0 14px rgba(0, 229, 171, 0.18);
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip > svg {
  color: var(--blue) !important;
  background: rgba(94, 189, 255, 0.10);
  border: 1px solid rgba(94, 189, 255, 0.24);
  box-shadow: 0 0 14px rgba(94, 189, 255, 0.18);
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-einvoice-chip > svg {
  color: #C4B5FD !important;
  background: rgba(196, 181, 253, 0.10);
  border: 1px solid rgba(196, 181, 253, 0.24);
  box-shadow: 0 0 14px rgba(196, 181, 253, 0.18);
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-gobd-chip strong {
  grid-column: 2;
  color: var(--text);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-gobd-chip .hero-gobd-sub {
  grid-column: 3;
  display: inline-flex !important;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0 !important;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--mint);
  text-transform: uppercase;
  white-space: nowrap;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip strong {
  grid-column: 2;
  color: var(--text);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip .hero-aiact-body {
  display: none !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip .hero-aiact-link {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  border: 0 !important;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip .hero-aiact-link:hover {
  color: #FFFFFF;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-einvoice-chip > span {
  grid-column: 2 / span 2;
  color: var(--text) !important;
  font-weight: 500 !important;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
}


/* ============================================================
   12 · NEUTRALIZE LEGACY 2-COLUMN RULES on the centered layout
   landing.css defined .hero-visual::before as an off-center halo
   for the right column. The .hero-visual--centered ::before above
   replaces it; this hides the legacy halo so they don't fight.
   The legacy .hero-grid is gone from the markup, but landing.css
   still has `.hero { padding-top: clamp(6.5rem, 15.5vw, 14rem); }`
   which we keep — that breathing room above the eyebrow is right.
   ============================================================ */
#hero.hero--centered .hero-visual--centered ~ * .hero-visual::before { display: none; }


/* ============================================================
   13 · TABLET + MOBILE
   Single column already; just scale things down so the headline,
   CTAs, and platform pills feel right on phones.
   ============================================================ */
@media (max-width: 960px) {
  #hero.hero--centered .hero-stack { max-width: 100%; }
  #hero.hero--centered .hero-title--centered {
    font-size: clamp(2.25rem, 7vw, 3.75rem);
    max-width: 14ch;
  }
  #hero.hero--centered .hero-aux { max-width: 100%; }
  #hero.hero--centered .hero-visual--centered { max-width: 100%; }
}

@media (max-width: 640px) {
  #hero.hero--centered { padding-bottom: clamp(2rem, 6vw, 4rem); }
  #hero.hero--centered .hero-eyebrow--centered {
    margin-bottom: 1rem;
    font-size: 0.6875rem;
  }
  #hero.hero--centered .hero-title--centered {
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.0;
    margin-bottom: 1.125rem;
    max-width: 100%;
  }
  #hero.hero--centered .hero-subtitle--centered {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
  }
  #hero.hero--centered .hero-cta-row {
    flex-direction: column;
    width: 100%;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
  }
  #hero.hero--centered .hero-cta {
    width: 100%;
    height: 52px;
    font-size: 0.9375rem;
  }
  #hero.hero--centered .hero-platform-mini {
    margin-bottom: 1.25rem;
  }
  #hero.hero--centered .hero-platform-mini-label {
    width: 100%;
    text-align: center;
  }
  #hero.hero--centered .hero-trust-checks {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
  }
  /* Drop the middle-dot separator when items stack. */
  #hero.hero--centered .hero-trust-checks-item + .hero-trust-checks-item::before {
    display: none;
  }
  #hero.hero--centered .hero-aux {
    margin-top: clamp(2.5rem, 8vw, 3.5rem);
  }
  #hero.hero--centered .hero-aux .hero-auth {
    padding: 0.625rem;
    border-radius: 16px;
  }
  #hero.hero--centered .hero-aux .hero-auth-btn {
    height: 48px;
  }
  #hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 0.5625rem 0.75rem !important;
    font-size: 0.8125rem;
  }
  #hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row > svg {
    width: 24px !important;
    height: 24px !important;
    padding: 5px;
  }
  #hero.hero--centered .hero-aux .hero-trust-card .hero-gobd-chip .hero-gobd-sub {
    grid-column: 2;
    margin-top: 0.125rem;
  }
  #hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip .hero-aiact-link {
    grid-column: 2;
    margin-top: 0.125rem;
  }
}

/* ============================================================
   14 · AUTH / TRUST SURFACE CONTRAST FIX
   The previous "floating" treatment made this area inherit too much of the
   dark hero canvas. Restore a crisp glass surface and explicit text colors.
   ============================================================ */
#hero.hero--centered .hero-aux {
  position: relative !important;
  isolation: isolate !important;
  max-width: 520px !important;
  padding: 1rem !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 229, 171, 0.15), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(94, 189, 255, 0.11), transparent 46%),
    linear-gradient(180deg, rgba(10, 18, 28, 0.88), rgba(6, 12, 20, 0.74)) !important;
  border: 1px solid rgba(126, 245, 216, 0.18) !important;
  box-shadow:
    0 26px 76px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 54px rgba(0, 229, 171, 0.08) !important;
  opacity: 1 !important;
  animation: none !important;
}

#hero.hero--centered .hero-aux::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 42px) !important;
  opacity: 0.35 !important;
  z-index: 0 !important;
}

#hero.hero--centered .hero-aux > * {
  position: relative !important;
  z-index: 1 !important;
}

#hero.hero--centered .hero-aux-divider {
  color: #9FB0C4 !important;
}

#hero.hero--centered .hero-aux-divider::before,
#hero.hero--centered .hero-aux-divider::after {
  background: linear-gradient(90deg, transparent 0%, rgba(0, 229, 171, 0.28) 50%, transparent 100%) !important;
}

#hero.hero--centered .hero-aux .hero-auth {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#hero.hero--centered .hero-aux .hero-auth-btn-google {
  background: linear-gradient(180deg, #FFFFFF 0%, #E9EEF5 100%) !important;
  color: #08111E !important;
  border-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

#hero.hero--centered .hero-aux .hero-auth-btn-email {
  background: linear-gradient(180deg, rgba(15, 31, 45, 0.96), rgba(8, 20, 32, 0.92)) !important;
  color: #F6FBFF !important;
  border-color: rgba(94, 189, 255, 0.34) !important;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

#hero.hero--centered .hero-aux .hero-auth-more-toggle--refined {
  background: rgba(10, 22, 34, 0.74) !important;
  color: #BFD0E4 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#hero.hero--centered .hero-aux .hero-auth-more-toggle--refined:hover {
  color: #FFFFFF !important;
  background: rgba(15, 32, 48, 0.92) !important;
  border-color: rgba(0, 229, 171, 0.32) !important;
}

#hero.hero--centered .hero-aux .hero-trust-card {
  margin-top: 0.2rem !important;
  padding: 0.45rem !important;
  border-radius: 18px !important;
  background: rgba(4, 10, 16, 0.46) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row {
  background: rgba(255, 255, 255, 0.035) !important;
  border-radius: 12px !important;
  color: #EAF3FF !important;
}

#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row + .hero-trust-row {
  margin-top: 0.35rem !important;
  border-top: 0 !important;
}

#hero.hero--centered .hero-aux .hero-trust-card .hero-gobd-chip strong,
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip strong,
#hero.hero--centered .hero-aux .hero-trust-card .hero-einvoice-chip > span {
  color: #F8FBFF !important;
}

#hero.hero--centered .hero-aux .hero-trust-card .hero-gobd-chip .hero-gobd-sub {
  color: #00E5AB !important;
}

#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip .hero-aiact-link {
  color: #5EBDFF !important;
}

#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip .hero-aiact-link:hover {
  color: #FFFFFF !important;
}

/* Move the sign-in/compliance box up into the headline area. */
#hero.hero--centered .hero-eyebrow--centered { order: 1 !important; }
#hero.hero--centered .hero-title--centered { order: 2 !important; }
#hero.hero--centered .hero-subtitle--centered { order: 3 !important; }
#hero.hero--centered .hero-aux {
  order: 4 !important;
  margin-top: 0.35rem !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
}
#hero.hero--centered .hero-cta-row { order: 5 !important; }
#hero.hero--centered .hero-platform-mini { order: 6 !important; }
#hero.hero--centered .hero-trust-checks { order: 7 !important; }
#hero.hero--centered .hero-visual--centered { order: 8 !important; }

@media (min-width: 961px) {
  #hero.hero--centered .hero-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px) !important;
    align-items: center !important;
    column-gap: clamp(2rem, 5vw, 4.5rem) !important;
    row-gap: 0 !important;
    max-width: 1180px !important;
    text-align: start !important;
  }

  #hero.hero--centered .hero-eyebrow--centered {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    text-align: center !important;
  }

  #hero.hero--centered .hero-title--centered {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    width: min(100%, 560px) !important;
    max-width: none !important;
    margin: 0 0 1.25rem !important;
    text-align: start !important;
  }

  #hero.hero--centered .hero-subtitle--centered {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: end !important;
    width: min(100%, 560px) !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: start !important;
    justify-content: flex-start !important;
  }

  #hero.hero--centered .hero-aux {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #hero.hero--centered .hero-cta-row,
  #hero.hero--centered .hero-platform-mini,
  #hero.hero--centered .hero-trust-checks,
  #hero.hero--centered .hero-visual--centered {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    text-align: center !important;
  }

  #hero.hero--centered .hero-cta-row {
    margin-top: clamp(2rem, 4vw, 3rem) !important;
  }
}

@media (max-width: 640px) {
  #hero.hero--centered .hero-flowline {
    width: 100%;
    border-radius: 20px;
    padding: 0.55rem;
  }

  #hero.hero--centered .hero-flowline-step {
    width: 100%;
    justify-content: flex-start;
  }

  #hero.hero--centered .hero-flowline-arrow {
    display: none;
  }
}

/* ============================================================
   15 · VISUAL SANDBOX DE-DIM
   landing.css styles this area as a dark terminal mockup. That made any
   inserted template look muted. Keep the frame, remove the color-killing
   darkness and filters for the centered hero.
   ============================================================ */
#hero.hero--centered .hero-visual--centered,
#hero.hero--centered .hero-visual--centered * {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

#hero.hero--centered .hero-visual--centered::before {
  opacity: 0.55 !important;
}

#hero.hero--centered .hero-visual--centered .product-mockup {
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 229, 171, 0.16), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(94, 189, 255, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(18, 32, 48, 0.96), rgba(11, 21, 34, 0.94)) !important;
  border-color: rgba(126, 245, 216, 0.24) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 26px 70px rgba(0, 0, 0, 0.38),
    0 0 80px rgba(0, 229, 171, 0.14) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#hero.hero--centered .hero-visual--centered .mockup-bar {
  background: rgba(255, 255, 255, 0.055) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

#hero.hero--centered .hero-visual--centered .mockup-title {
  color: #C9D6E8 !important;
}

#hero.hero--centered .hero-visual--centered .mockup-body {
  background: transparent !important;
}

#hero.hero--centered .hero-visual--centered .doc-row {
  background: rgba(255, 255, 255, 0.065) !important;
  border-color: rgba(255, 255, 255, 0.105) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#hero.hero--centered .hero-visual--centered .doc-row:hover {
  background: rgba(255, 255, 255, 0.095) !important;
  border-color: rgba(126, 245, 216, 0.24) !important;
}

#hero.hero--centered .hero-visual--centered .doc-icon-wrap {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

#hero.hero--centered .hero-visual--centered .doc-filename {
  color: #F7FBFF !important;
}

#hero.hero--centered .hero-visual--centered .doc-detail,
#hero.hero--centered .hero-visual--centered .ai-sub {
  color: #B7C5D8 !important;
}

#hero.hero--centered .hero-visual--centered .mockup-ai-row {
  background:
    linear-gradient(135deg, rgba(0, 229, 171, 0.14), rgba(94, 189, 255, 0.09)) !important;
  border-color: rgba(0, 229, 171, 0.32) !important;
}

/* ============================================================
   16 · HERO BACKGROUND CLEANUP
   The section was stacking grid masks, drifting hero-gradient blobs, a blurred
   section pseudo-layer, and the visual halo. That made every design in this
   area read muddy. Use one clean canvas instead.
   ============================================================ */
#hero.hero--centered,
#hero.hero--centered.grid-bg {
  background:
    linear-gradient(180deg, #070A10 0%, #081018 44%, #06090F 100%) !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#hero.hero--centered .hero-gradient {
  display: none !important;
}

#hero.hero--centered::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(0, 229, 171, 0.075) 0%, rgba(0, 229, 171, 0.025) 30%, transparent 62%),
    linear-gradient(115deg, transparent 0%, rgba(94, 189, 255, 0.055) 44%, transparent 78%) !important;
  filter: none !important;
  opacity: 1 !important;
}

#hero.hero--centered .hero-visual--centered::before {
  display: none !important;
}

/* ============================================================
   17 · HEADER / HERO CLEARANCE LOCK
   The base landing CSS used width-based top padding:
   clamp(6.5rem, 15.5vw, 14rem). That made the eyebrow drift when the
   browser width changed: too close to the nav on tablet, too far on wide
   desktop. Keep the header and hero visually independent with stable
   breakpoint-based spacing instead of viewport-width spacing.
   ============================================================ */
#hero.hero--centered {
  padding-top: 11rem !important;
}

#hero.hero--centered .hero-stack {
  width: 100% !important;
}

#hero.hero--centered .hero-eyebrow--centered {
  margin-top: 0 !important;
}

@media (min-width: 1180px) {
  #hero.hero--centered {
    padding-top: 10.75rem !important;
  }
}

@media (min-width: 961px) and (max-width: 1179px) {
  #hero.hero--centered {
    padding-top: 10.5rem !important;
  }
}

@media (max-width: 960px) {
  #hero.hero--centered {
    padding-top: 10.25rem !important;
  }
}

@media (max-width: 640px) {
  #hero.hero--centered {
    padding-top: 9.5rem !important;
  }
}

@media (max-width: 380px) {
  #hero.hero--centered {
    padding-top: 9rem !important;
  }
}

/* ============================================================
   18 · FULL-SCREEN RESPONSIVE HERO + MOTION OFF
   Requested 2026-05-15: make the landing hero use the full viewport
   like a real published site, avoid the narrow centered "island", and
   remove decorative motion for a lighter first paint.
   ============================================================ */
#hero.hero--centered {
  min-height: calc(100svh - 1px) !important;
  width: 100% !important;
  max-width: none !important;
  padding:
    clamp(7.25rem, 10svh, 9rem)
    clamp(1rem, 3.5vw, 4.5rem)
    clamp(2.25rem, 6svh, 5rem) !important;
  display: flex !important;
  align-items: center !important;
  overflow: clip !important;
}

#hero.hero--centered > .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#hero.hero--centered .hero-stack {
  width: min(100%, 1760px) !important;
  max-width: none !important;
  margin: 0 auto !important;
}

#hero.hero--centered .hero-aiact-chip--hero-disclosure {
  order: 1 !important;
}

#hero.hero--centered .hero-eyebrow--centered {
  display: none !important;
}

#hero.hero--centered .hero-title--centered {
  order: 2 !important;
}

#hero.hero--centered .hero-subtitle--centered {
  order: 3 !important;
}

#hero.hero--centered .hero-aux {
  order: 4 !important;
}

#hero.hero--centered .hero-cta-row {
  order: 5 !important;
}

#hero.hero--centered .hero-platform-mini {
  order: 6 !important;
}

#hero.hero--centered .hero-trust-checks {
  order: 7 !important;
}

#hero.hero--centered .hero-visual--centered {
  order: 8 !important;
}

@media (min-width: 1024px) {
  #hero.hero--centered .hero-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr) !important;
    grid-template-areas:
      "notice notice"
      "title  aux"
      "flow   aux"
      "cta    aux"
      "mini   aux"
      "trust  aux" !important;
    align-items: center !important;
    column-gap: clamp(3rem, 7vw, 8rem) !important;
    row-gap: 1.05rem !important;
    text-align: left !important;
  }

  #hero.hero--centered .hero-aiact-chip--hero-disclosure {
    grid-area: notice !important;
    justify-self: start !important;
    width: min(100%, 720px) !important;
    margin: 0 0 clamp(1rem, 2.8svh, 2rem) !important;
  }

  #hero.hero--centered .hero-title--centered {
    grid-area: title !important;
    justify-self: start !important;
    width: min(100%, 720px) !important;
    max-width: 12ch !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: clamp(4.1rem, 6.5vw, 8.7rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.055em !important;
  }

  #hero.hero--centered .hero-title--centered .hero-word {
    margin: 0 !important;
  }

  #hero.hero--centered .hero-subtitle--centered {
    grid-area: flow !important;
    justify-self: start !important;
    width: min(100%, 760px) !important;
    max-width: none !important;
    margin: clamp(0.75rem, 2.2svh, 1.5rem) 0 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  #hero.hero--centered .hero-cta-row {
    grid-area: cta !important;
    justify-self: start !important;
    margin: clamp(1rem, 2.6svh, 1.75rem) 0 0 !important;
  }

  #hero.hero--centered .hero-platform-mini {
    grid-area: mini !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  #hero.hero--centered .hero-trust-checks {
    grid-area: trust !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  #hero.hero--centered .hero-aux {
    grid-area: aux !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 !important;
    padding: clamp(1rem, 2vw, 1.35rem) !important;
  }

  #hero.hero--centered .hero-visual--centered {
    display: none !important;
  }
}

@media (min-width: 1600px) {
  #hero.hero--centered {
    padding-inline: clamp(4rem, 5vw, 7rem) !important;
  }

  #hero.hero--centered .hero-stack {
    column-gap: clamp(5rem, 8vw, 10rem) !important;
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  #hero.hero--centered {
    padding-top: 6.5rem !important;
    padding-bottom: 2rem !important;
  }

  #hero.hero--centered .hero-title--centered {
    font-size: clamp(3.45rem, 5.7vw, 6.4rem) !important;
  }

  #hero.hero--centered .hero-aiact-chip--hero-disclosure {
    margin-bottom: 0.6rem !important;
  }

  #hero.hero--centered .hero-flowline {
    transform: scale(0.96);
    transform-origin: left center;
  }
}

@media (max-width: 1023px) {
  #hero.hero--centered {
    min-height: auto !important;
    padding:
      clamp(6.5rem, 12svh, 8rem)
      clamp(1rem, 4vw, 2rem)
      clamp(2.25rem, 7svh, 4rem) !important;
  }

  #hero.hero--centered .hero-stack {
    display: flex !important;
    max-width: 760px !important;
    text-align: center !important;
  }

  #hero.hero--centered .hero-aiact-chip--hero-disclosure {
    width: 100% !important;
    margin: 0 auto 1.25rem !important;
  }

  #hero.hero--centered .hero-title--centered {
    width: 100% !important;
    max-width: 11ch !important;
    margin: 0 auto !important;
    font-size: clamp(3.25rem, 10vw, 5.4rem) !important;
    text-align: center !important;
  }

  #hero.hero--centered .hero-subtitle--centered {
    margin-top: 1.25rem !important;
  }

  #hero.hero--centered .hero-aux {
    width: 100% !important;
    max-width: 560px !important;
    margin-top: 1.5rem !important;
  }
}

@media (max-width: 640px) {
  #hero.hero--centered {
    padding-inline: 1rem !important;
    padding-top: 5.9rem !important;
  }

  #hero.hero--centered .hero-title--centered {
    max-width: 10ch !important;
    font-size: clamp(2.55rem, 15vw, 4.05rem) !important;
  }

  #hero.hero--centered .hero-aiact-chip--hero-disclosure {
    grid-template-columns: auto minmax(0, 1fr) !important;
    border-radius: 14px !important;
  }

  #hero.hero--centered .hero-aiact-chip--hero-disclosure .hero-aiact-link {
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: start !important;
  }

  #hero.hero--centered .hero-aux {
    border-radius: 18px !important;
    padding: 0.8rem !important;
  }
}

/* Hard stop for decorative motion on the first viewport. */
#hero.hero--centered,
#hero.hero--centered *,
#hero.hero--centered *::before,
#hero.hero--centered *::after {
  animation: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

#hero.hero--centered .hero-eyebrow--centered,
#hero.hero--centered .hero-title .hero-word,
#hero.hero--centered .hero-title--centered .hero-word,
#hero.hero--centered .hero-subtitle--centered,
#hero.hero--centered .hero-aiact-chip,
#hero.hero--centered .hero-cta-row,
#hero.hero--centered .hero-platform-mini,
#hero.hero--centered .hero-trust-checks,
#hero.hero--centered .hero-visual--centered,
#hero.hero--centered .hero-aux {
  opacity: 1 !important;
  transform: none !important;
}