/* ═══════════════════════════════════════════════════════════════════
   landing-light-2026.css — Professional white theme for landing page only

   Scope:
     - Loads AFTER landing.css and hero-2026.css → wins the cascade.
     - Linked only from templates/landing.html. No other page is affected.
     - Production B2B chrome, dashboard, b2c sub-pages keep their themes.

   Strategy:
     1. Redefine the landing-local CSS variables (--bg, --text-*, --mint*,
        --border*, --shadow-*) declared in landing.css :root.
        ~85% of landing components flow through these tokens.
     2. Override the inline <script> that sets html { background:#0A0D14; }
        with !important on html/body.
     3. Surgical overrides for the remaining hardcoded `rgba(255,255,255,X)`
        surfaces and dark hex fills that don't read from variables.
     4. Re-tone accent shadows/glows so the mint/violet/blue accents read
        well on white (less neon, more confident).

   Accessibility:
     - Body text: #0F172A on #FFFFFF → contrast 17.5:1 (AAA)
     - Secondary: #334155 on #FFFFFF → contrast 10.4:1 (AAA)
     - Muted:     #64748B on #FFFFFF → contrast  4.6:1 (AA Large/Body)
     - Mint #00A878 on white → contrast 3.5:1 (AA for large/UI, used for
       buttons that always have white text on top, never as body text)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Token redefinition ─────────────────────────────────────────── */
:root,
html[data-theme="dark"],
html[data-theme="light"],
html[data-theme] {
  /* Canvas — soft layered whites, never pure flat */
  --bg:           #FFFFFF;
  --bg-subtle:    #FAFBFC;
  --bg-muted:     #F4F6FA;
  --bg-card:      #FFFFFF;
  --bg-elevated:  #FFFFFF;
  --bg-glass:     rgba(255, 255, 255, 0.82);

  /* Text — slate scale, AAA on white for primary/secondary */
  --text:           #0F172A;
  --text-secondary: #334155;
  --text-muted:     #64748B;
  --text-dim:       #94A3B8;
  --text-inverse:   #FFFFFF;

  /* Mint — lead accent. Darker for contrast on white. */
  --mint:        #00A878;
  --mint-bright: #00C58F;
  --mint-glow:   rgba(0, 168, 120, 0.20);
  --mint-soft:   rgba(0, 168, 120, 0.07);
  --mint-line:   rgba(0, 168, 120, 0.28);

  /* Violet — secondary accent */
  --violet:      #7C3AED;
  --violet-glow: rgba(124, 58, 237, 0.22);
  --violet-soft: rgba(124, 58, 237, 0.07);
  --violet-light:rgba(124, 58, 237, 0.10);

  /* Blue — tertiary */
  --blue:        #2563EB;
  --blue-dark:   #1D4ED8;
  --blue-light:  rgba(37, 99, 235, 0.08);
  --blue-glow:   rgba(37, 99, 235, 0.22);

  /* Status palette */
  --green:       #00A878;
  --green-light: rgba(0, 168, 120, 0.10);
  --orange:      #D97706;

  /* Borders — slate-900 translucent, never gray flat */
  --border:        rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.14);
  --border-mint:   rgba(0, 168, 120, 0.28);

  /* Shadows — soft cool grays, no deep blacks */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:    0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl:    0 24px 48px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.05);
  --shadow-2xl:   0 32px 64px rgba(15, 23, 42, 0.12), 0 12px 24px rgba(15, 23, 42, 0.06);
  --shadow-card:  0 0 0 1px var(--border), 0 4px 14px rgba(15, 23, 42, 0.04);
  --shadow-float: 0 16px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04), 0 0 0 1px var(--border-strong);
  --shadow-mint:  0 0 0 1px var(--mint-line), 0 8px 24px rgba(0, 168, 120, 0.16);
  --shadow-glow:  0 0 40px rgba(0, 168, 120, 0.10), 0 0 80px rgba(0, 168, 120, 0.05);
  --shadow-blue:  0 4px 16px rgba(37, 99, 235, 0.12);

  /* Brand tokens (brand.css) — keep landing aligned with the rest of the
     visual system in case any landing component reads --brand-* directly. */
  --brand-bg:        #FFFFFF;
  --brand-bg2:       #FAFBFC;
  --brand-surface:   rgba(15, 23, 42, 0.03);
  --brand-surface-b: rgba(15, 23, 42, 0.06);
  --brand-surface-h: rgba(15, 23, 42, 0.05);
  --brand-text-1:    #0F172A;
  --brand-text-2:    rgba(15, 23, 42, 0.72);
  --brand-text-3:    rgba(15, 23, 42, 0.62);
  --brand-text-4:    rgba(15, 23, 42, 0.55);
  --brand-divider:   rgba(15, 23, 42, 0.08);
  --brand-border:    rgba(15, 23, 42, 0.06);
  --brand-border-2:  rgba(15, 23, 42, 0.10);
  --brand-border-3:  rgba(15, 23, 42, 0.16);
  --brand-blue:      #2563EB;
  --brand-violet:    #7C3AED;
  --brand-green:     #059669;
  --brand-mint:      #00A878;
  --brand-teal:      #14B8A6;
  --brand-cyan:      #0891B2;
}

/* ── 2. Beat the inline <html style="background:#0A0D14"> ────────── */
html,
html[data-theme="dark"],
html[data-theme] {
  background: var(--bg) !important;
  color-scheme: light !important;
}
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ── 3. Universal surgical overrides for hardcoded translucent whites
       (landing.css authored these for the dark theme; on white they would
       disappear and break borders/dividers). Flip to slate-translucent. */
.lp-card,
.lp-section,
.feature-card,
.pricing-card,
.story-card,
.faq-item,
.review-card,
.testimonial-card,
.product-card,
.benefit-card,
.step-card,
.use-case-card,
.integration-card,
.compare-card,
.value-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

/* Section backgrounds — alternate between pure white and bg-muted for
   visual rhythm without ever going dark. */
section,
.section,
.lp-section,
main {
  background-color: transparent;
  color: var(--text);
}

/* ── 4. Typography polish ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--text);
}
p, li, td, th, label, span, div {
  color: inherit;
}
.text-secondary, .text-muted, .lp-muted, .lp-secondary {
  color: var(--text-secondary);
}
.text-dim, .lp-dim {
  color: var(--text-muted);
}

/* ── 5. Buttons — keep mint as the lead CTA, now with white text on
       a saturated mint background. Secondary buttons become outlined slate. */
.btn-primary,
.lp-btn-primary,
.cta-primary,
button[data-variant="primary"] {
  background: var(--mint);
  color: var(--text-inverse);
  border: 1px solid var(--mint);
  box-shadow: var(--shadow-mint);
}
.btn-primary:hover,
.lp-btn-primary:hover,
.cta-primary:hover,
button[data-variant="primary"]:hover {
  background: var(--mint-bright);
  border-color: var(--mint-bright);
}

.btn-secondary,
.lp-btn-secondary,
.cta-secondary,
button[data-variant="secondary"] {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover,
.lp-btn-secondary:hover,
.cta-secondary:hover,
button[data-variant="secondary"]:hover {
  background: var(--bg-muted);
  border-color: var(--text-muted);
}

/* ── 6. Header / nav — frosted glass over white ───────────────────── */
.lp-header,
.lp-nav,
header.site-header,
nav.site-nav,
.b2c-nav,
.b2c-site-nav {
  background: var(--bg-glass);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.lp-header a,
.lp-nav a,
header.site-header a,
nav.site-nav a,
.b2c-nav a,
.b2c-site-nav a {
  color: var(--text-secondary);
}
.lp-header a:hover,
.lp-nav a:hover,
header.site-header a:hover,
nav.site-nav a:hover {
  color: var(--text);
}

/* ── 7. Hero — keep the bold typographic statement, swap the dark canvas
       for a clean white with a subtle mint/violet ambient. */
.hero,
#hero,
.lp-hero,
section.hero,
section.lp-hero {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 168, 120, 0.08), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(124, 58, 237, 0.06), transparent 50%),
    var(--bg);
  color: var(--text);
}

.hero-eyebrow,
.lp-hero-eyebrow {
  color: var(--mint);
}

/* Gradient text on the hero headline — recolor for white background. */
.hero-title .accent,
.hero-title .gradient-text,
.lp-hero-title .gradient,
[class*="gradient-text"] {
  background: linear-gradient(135deg, var(--mint) 0%, #1E9CFF 50%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── 8. Forms & inputs ────────────────────────────────────────────── */
input, textarea, select {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
input::placeholder, textarea::placeholder {
  color: var(--text-dim);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 3px var(--mint-soft);
}

/* ── 9. Hide / soften dark-only ornamental layers ─────────────────── */
/* Many landing decorative orbs/glows in landing.css use heavy dark gradients
   that look like dirt smudges on white. Tone them down. */
.bg-orb,
.bg-glow,
.hero-glow,
.ambient-orb,
[class*="orb-"],
[class*="glow-"] {
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* ── 10. Footer ────────────────────────────────────────────────────── */
footer,
.lp-footer,
.b2c-footer,
.site-footer {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
footer a,
.lp-footer a,
.b2c-footer a,
.site-footer a {
  color: var(--text-secondary);
}
footer a:hover,
.lp-footer a:hover,
.b2c-footer a:hover,
.site-footer a:hover {
  color: var(--text);
}

/* ── 11. Scrollbar — light, minimal ───────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-muted);
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.30);
}

/* ── 12. Selection color ──────────────────────────────────────────── */
::selection {
  background: var(--mint-soft);
  color: var(--mint);
}

/* ── 13. Cookie banner & overlay surfaces ─────────────────────────── */
.cookie-banner,
.cookie-consent,
.consent-banner,
.gdpr-banner,
[class*="cookie-"],
[class*="consent-"] {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-xl) !important;
}
.cookie-banner a,
.cookie-consent a,
.consent-banner a,
.gdpr-banner a {
  color: var(--mint);
}

/* ── 14. Dividers / hr ─────────────────────────────────────────────── */
hr,
.divider,
.lp-divider {
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
}

/* ── 15. Pricing / feature highlight cards — accent variant ───────── */
.pricing-card[data-popular="true"],
.pricing-card.recommended,
.pricing-card.featured,
.feature-card.featured {
  border: 1px solid var(--mint-line);
  box-shadow: var(--shadow-mint);
  background: linear-gradient(180deg, var(--mint-soft) 0%, var(--bg-card) 35%);
}

/* ── 16. Badges & chips ───────────────────────────────────────────── */
.badge,
.chip,
.pill,
.tag,
.lp-badge {
  background: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.badge.mint, .chip.mint, .pill.mint, .lp-badge.mint,
.badge[data-variant="mint"], .badge[data-variant="success"] {
  background: var(--mint-soft);
  color: var(--mint);
  border-color: var(--mint-line);
}
.badge.violet, .chip.violet, .pill.violet, .lp-badge.violet,
.badge[data-variant="violet"], .badge[data-variant="ai"] {
  background: var(--violet-soft);
  color: var(--violet);
  border-color: rgba(124, 58, 237, 0.28);
}

/* ── 17. Tables (legal/comparison) ────────────────────────────────── */
table {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
}
th, td {
  border-color: var(--border);
}
thead, th {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

/* ── 18. Code / mono surfaces ─────────────────────────────────────── */
code, pre, kbd {
  background: var(--bg-muted);
  color: var(--text);
  border: 1px solid var(--border);
}

/* ── 19. RTL guard — keep our overrides applicable in Arabic/RTL ──── */
html[lang="ar"] body,
html[dir="rtl"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ── 19b. Global flat polish — remove dark text-shadows and filter blurs
   that were authored for dark theme depth. They render as muddy halos on
   white. We strip them on common label/badge/chip elements but keep
   shadows on cards/buttons (which use box-shadow, not text-shadow). */
.lp-card,
.lp-section,
[class*="badge"],
[class*="chip"],
[class*="pill"],
[class*="tag"],
[class*="label"],
[class*="bento"],
.text-label,
.text-eyebrow,
.eyebrow-label,
.section-label,
.text-display {
  text-shadow: none !important;
}
.lp-card *,
[class*="badge"] *,
[class*="chip"] *,
[class*="pill"] *,
[class*="bento"] *,
[class*="card"] strong,
[class*="card"] span:not([class*="gradient"]) {
  text-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   20. Surgical overrides for hardcoded dark surfaces.
   Each rule below targets a specific selector authored in landing.css
   or hero-2026.css that bypasses the variable system (literal #0A0D14,
   rgba(x,y,z, ...) or !important). We override with matching
   specificity + !important when needed.
   ═══════════════════════════════════════════════════════════════════ */

/* 20a. The fixed full-screen ambient backdrop with inline
   style="background:#0A0D14" sitting under everything. Replace its
   black canvas with our white and recolor the radial orbs so they
   read as faint warm tint, not heavy color blobs. */
div.fixed.inset-0.pointer-events-none.-z-10[aria-hidden="true"] {
  background: var(--bg) !important;
}
div.fixed.inset-0.pointer-events-none.-z-10[aria-hidden="true"] > div {
  opacity: 0.45;
  mix-blend-mode: multiply;
}

/* 20b. Sticky glass nav — flip from dark frosted to light frosted. */
.nav-glass {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.92) 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 4px 16px rgba(15, 23, 42, 0.06),
    0 0 60px rgba(0, 168, 120, 0.04) !important;
}
[data-theme="dark"] .nav-glass {
  background: rgba(255, 255, 255, 0.82) !important;
}
#site-nav.nav-elevated .nav-glass {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--border-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 12px 40px rgba(15, 23, 42, 0.08),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 0 60px rgba(0, 168, 120, 0.06) !important;
}

/* Nav link inner pill — match the new light surface */
.nav-link {
  color: var(--text-secondary);
}
.nav-link::before {
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.04),
    rgba(15, 23, 42, 0.02)) !important;
}
.nav-link:hover {
  color: var(--text);
  border-color: var(--border) !important;
}

/* 20c. KI-Transparenz disclosure chip — was navy with white text. Flip
   to a friendly soft-blue notice card with deep text. */
.hero-aiact-chip {
  background: linear-gradient(180deg,
    rgba(37, 99, 235, 0.06),
    rgba(37, 99, 235, 0.02)) !important;
  border: 1px solid rgba(37, 99, 235, 0.20) !important;
  color: var(--blue) !important;
}
.hero-aiact-chip svg { color: var(--blue) !important; }
.hero-aiact-chip strong { color: var(--text) !important; }
.hero-aiact-chip .hero-aiact-body {
  color: var(--text-secondary) !important;
  border-inline-start-color: var(--border) !important;
}
.hero-aiact-chip .hero-aiact-link {
  color: var(--blue) !important;
  border-inline-start-color: var(--border) !important;
}
.hero-aiact-chip .hero-aiact-link:hover { color: var(--blue-dark) !important; }

.hero-aiact-chip--hero-disclosure {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.95)),
    var(--bg) !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  box-shadow:
    0 18px 46px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* 20d. Hero auth panel — the centered auth card (Google / E-Mail / more).
   hero-2026.css uses !important on every rule, so we mirror specificity. */

/* 20d-0. The OUTER hero-aux container — was a dark navy gradient card
   wrapping the whole auth column. Flip to a clean white surface with
   a faint mint+blue ambient (kept subtle so the auth buttons still
   anchor the eye). */
#hero.hero--centered .hero-aux,
.hero-aux {
  overflow: visible !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(0, 168, 120, 0.08), transparent 40%),
    radial-gradient(circle at 95% 100%, rgba(37, 99, 235, 0.065), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 28px !important;
  padding: clamp(1rem, 2.2vw, 1.35rem) !important;
  box-shadow:
    var(--shadow-2xl),
    0 22px 56px rgba(15, 23, 42, 0.10),
    0 0 54px rgba(0, 168, 120, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  color: var(--text) !important;
}
#hero.hero--centered .hero-aux::before,
.hero-aux::before {
  /* The faint grid overlay — make it slate-translucent to read on white. */
  background:
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.025) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.020) 0 1px, transparent 1px 42px) !important;
  opacity: 0.55 !important;
}
#hero.hero--centered .hero-aux-divider,
.hero-aux-divider {
  justify-content: center !important;
  gap: 0 !important;
  color: var(--text-muted) !important;
}
#hero.hero--centered .hero-aux-divider::before,
#hero.hero--centered .hero-aux-divider::after,
.hero-aux-divider::before,
.hero-aux-divider::after {
  content: none !important;
  display: none !important;
}
#hero.hero--centered .hero-aux-divider span,
.hero-aux-divider span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 0.4rem 0.78rem !important;
  border-radius: 999px !important;
  background: rgba(248, 250, 252, 0.86) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045) !important;
  color: #64748B !important;
  letter-spacing: 0.13em !important;
}

#hero.hero--centered .hero-aux .hero-auth {
  position: relative !important;
  z-index: 40 !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 0.62rem !important;
  margin: 0 !important;
  padding: 0.42rem !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,250,252,0.90)) !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 12px 28px rgba(15, 23, 42, 0.055) !important;
}

#hero.hero--centered .hero-aux .hero-auth-btn-email {
  grid-column: 1 !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  font-weight: 760 !important;
}
#hero.hero--centered .hero-aux .hero-auth-btn-google {
  grid-column: 1 / -1 !important;
  height: 56px !important;
  border-radius: 17px !important;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  color: var(--text) !important;
  border-color: rgba(0, 168, 120, 0.24) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.08),
    0 0 0 4px rgba(0, 168, 120, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
}
#hero.hero--centered .hero-aux .hero-auth-btn-google:hover,
#hero.hero--centered .hero-aux .hero-auth-btn-email:hover {
  transform: translate3d(0, -1px, 0) !important;
  border-color: rgba(0, 168, 120, 0.34) !important;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.10),
    0 0 0 4px rgba(0, 168, 120, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}
#hero.hero--centered .hero-aux .hero-auth-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.62rem !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
#hero.hero--centered .hero-aux .hero-auth-more {
  grid-column: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 50 !important;
}
#hero.hero--centered .hero-aux .hero-auth-more-toggle--refined {
  width: 100% !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.42rem !important;
  padding: 0 0.72rem !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.72) !important;
  color: #475569 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}
#hero.hero--centered .hero-aux .hero-auth-more-toggle--refined:hover {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border-color: var(--mint-line) !important;
}
#hero.hero--centered .hero-aux .hero-auth-more[open] .hero-auth-more-toggle--refined {
  border-color: rgba(0, 168, 120, 0.26) !important;
  color: #047857 !important;
}
#hero.hero--centered .hero-aux .hero-auth-more-chevron {
  opacity: 0.55 !important;
}
#hero.hero--centered .hero-aux .hero-auth-more-panel {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: auto !important;
  width: 100% !important;
  display: grid !important;
  gap: 0.45rem !important;
  margin-top: 0.55rem !important;
  padding: 0.48rem !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}
#hero.hero--centered .hero-aux .hero-auth-more-panel .hero-auth-btn {
  width: 100% !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  box-shadow: none !important;
  font-weight: 740 !important;
}
@media (max-width: 520px) {
  #hero.hero--centered .hero-aux .hero-auth {
    grid-template-columns: 1fr !important;
  }
  #hero.hero--centered .hero-aux .hero-auth-btn-google,
  #hero.hero--centered .hero-aux .hero-auth-btn-email,
  #hero.hero--centered .hero-aux .hero-auth-more {
    grid-column: 1 / -1 !important;
  }
  #hero.hero--centered .hero-aux .hero-auth-more-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}

#hero.hero--centered .hero-aux .hero-trust-card {
  position: relative !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.86)) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  border-radius: 20px !important;
  padding: 0.5rem !important;
  gap: 0.42rem !important;
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row {
  min-height: 50px !important;
  padding: 0.58rem 0.72rem !important;
  background: rgba(255,255,255,0.74) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.025) !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row + .hero-trust-row {
  margin-top: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.12) !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row strong,
.hero-trust-card .hero-trust-row strong,
.hero-trust-row strong {
  color: var(--text) !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-trust-row span,
.hero-trust-card .hero-trust-row span,
.hero-trust-row span {
  color: var(--text-muted) !important;
}
/* Mint accents inside trust card — keep mint but use our darker token */
.hero-trust-row .badge-mint,
.hero-trust-row [class*="--mint"],
.hero-trust-row a {
  color: var(--mint) !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip strong,
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip span {
  color: var(--text) !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip .hero-aiact-link {
  color: var(--blue) !important;
}
#hero.hero--centered .hero-aux .hero-trust-card .hero-aiact-chip .hero-aiact-link:hover {
  color: var(--blue-dark) !important;
}

/* The "ODER ANMELDEN MIT" eyebrow above the auth buttons */
#hero.hero--centered .hero-aux .hero-auth-eyebrow,
.hero-auth-eyebrow,
.hero-auth-divider {
  color: var(--text-muted) !important;
}

/* 20e. Cookie banner — light card, deep text, mint primary CTA */
#ck-banner,
.ck-banner {
  background: transparent !important;
}
#ck-card,
.ck-card {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-xl) !important;
  border-radius: 18px !important;
}
.ck-eyebrow,
.ck-eyebrow span {
  color: var(--text) !important;
}
.ck-eyebrow svg {
  color: var(--mint) !important;
}
.ck-desc {
  color: var(--text-secondary) !important;
}
.ck-trust-row,
.ck-trust-row span {
  color: var(--text-muted) !important;
}
.ck-meta {
  color: var(--text-muted) !important;
}
.ck-link {
  color: var(--mint) !important;
}
.ck-link:hover {
  color: var(--mint-bright) !important;
}
.ck-btn--primary {
  background: var(--mint) !important;
  color: var(--text-inverse) !important;
  border: 1px solid var(--mint) !important;
  box-shadow: var(--shadow-mint) !important;
}
.ck-btn--primary:hover {
  background: var(--mint-bright) !important;
  border-color: var(--mint-bright) !important;
}
.ck-btn--ghost {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
}
.ck-btn--ghost:hover {
  background: var(--bg-muted) !important;
}
.ck-btn-link {
  color: var(--text-secondary) !important;
}
.ck-btn-link:hover {
  color: var(--text) !important;
}
.ck-row {
  background: var(--bg-muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.ck-row-title { color: var(--text) !important; }
.ck-row-desc  { color: var(--text-secondary) !important; }
.ck-pill-active {
  background: var(--mint-soft) !important;
  color: var(--mint) !important;
  border: 1px solid var(--mint-line) !important;
}
.ck-toggle-track {
  background: var(--border-strong) !important;
}
.ck-toggle input:checked ~ .ck-toggle-track {
  background: var(--mint) !important;
}
.ck-back {
  color: var(--text-secondary) !important;
}

/* 20f. "AUCH VERFÜGBAR ALS" label & platform-mini chips */
.hero-platform-mini,
.hero-platform-mini > * {
  color: var(--text-muted) !important;
}
.hero-platform-mini .hero-platform-mini-label,
.hero-platform-mini-label {
  color: var(--text-muted) !important;
}
.hero-platform-mini a,
.hero-platform-mini button,
.platform-chip,
.hero-platform-chip {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
}
.hero-platform-mini a:hover,
.hero-platform-mini button:hover,
.platform-chip:hover,
.hero-platform-chip:hover {
  background: var(--bg-muted) !important;
  border-color: var(--mint-line) !important;
}

/* 20g. Trust checks row "✓ GoBD-Unterstützung · ✓ KI-Transparenz · ..." */
.hero-trust-checks,
.hero-trust-checks > * {
  color: var(--text-secondary) !important;
}
.hero-trust-checks svg {
  color: var(--mint) !important;
}
#hero.hero--centered .hero-trust-checks-item--de,
.hero-trust-checks-item--de {
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(0, 168, 120, 0.14) !important;
  border-radius: 999px !important;
  padding: 0.34rem 0.62rem !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
}

/* 20h. Generic catch-all for the "more options" expanded panel */
.hero-auth-more-panel,
.hero-auth-more,
.hero-auth-providers {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md) !important;
}
.hero-auth-more-panel button,
.hero-auth-more button,
.hero-auth-providers button {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.hero-auth-more-panel button:hover,
.hero-auth-more button:hover,
.hero-auth-providers button:hover {
  background: var(--bg-muted) !important;
  border-color: var(--mint-line) !important;
}

/* 20i. Logo "AI" badge / brand pill in the nav — was dark surface */
.logo-brand,
.logo-ai-badge,
.brand-pill {
  color: var(--text) !important;
}
.logo-ai-badge {
  background: var(--mint-soft) !important;
  color: var(--mint) !important;
  border: 1px solid var(--mint-line) !important;
}

/* 20j. "Loslegen" primary CTA in the nav */
.nav-cta,
.nav-cta-primary,
a.btn-mint,
button.btn-mint,
.btn--mint {
  background: var(--mint) !important;
  color: #042016 !important;
  border: 1px solid var(--mint) !important;
  box-shadow: var(--shadow-mint) !important;
}
.nav-cta:hover,
.nav-cta-primary:hover,
a.btn-mint:hover,
button.btn-mint:hover,
.btn--mint:hover {
  background: var(--mint-bright) !important;
  border-color: var(--mint-bright) !important;
  color: #042016 !important;
}

/* 20k. "Unternehmen" / business switch button — currently dark pill */
a[href*="/business"],
a[href*="/b2b"],
.nav-business-cta {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-strong) !important;
}
a[href*="/business"]:hover,
a[href*="/b2b"]:hover,
.nav-business-cta:hover {
  background: var(--bg-muted) !important;
  color: var(--text) !important;
}

/* 20l. Language pill (EN/DE/AR switcher) */
.lang-pill,
.lang-switcher,
.b2c-lang-pill {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
.lang-pill a,
.lang-switcher a,
.b2c-lang-pill a {
  color: var(--text-secondary) !important;
}
.lang-pill a[aria-current],
.lang-pill a.active,
.lang-switcher a.active,
.b2c-lang-pill a.active {
  background: var(--mint) !important;
  color: var(--text-inverse) !important;
  border-radius: 8px;
}

/* 20m. Mockup browser frame (the demo product screenshot below the hero) —
   keep dots colored, force frame to white. */
.mockup-frame,
.hero-mockup,
.product-mockup {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-2xl) !important;
}
.mockup-titlebar,
.hero-mockup-titlebar {
  background: var(--bg-muted) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* 20n. Page overlay (privacy/terms iframes) — force white background */
#page-overlay-frame,
iframe.page-overlay-frame {
  background: var(--bg) !important;
}

/* 20o. Universal final pass: any element using the legacy hardcoded
   dark canvas as a background-color should fall back to surface. */
[style*="background:#0A0D14"],
[style*="background: #0A0D14"],
[style*="background:#0E1220"],
[style*="background:#11162A"],
[style*="background:#181E36"] {
  background: var(--bg) !important;
}

/* ════════════════════════════════════════════════════════════════════
   21. Below-the-fold sections — product story, AI access panel,
   feature grids, "Live Intelligence Layer" demo, etc.

   These were hand-styled with hardcoded dark gradients per section.
   We flip each to a layered white surface with a soft mint/blue
   ambient so the visual rhythm survives.
   ═══════════════════════════════════════════════════════════════════ */

/* 21a. Product story section ("Aus einem wilden Foto …") */
.product-story {
  background:
    radial-gradient(44% 54% at 17% 42%, rgba(0, 168, 120, 0.05), transparent 72%),
    radial-gradient(40% 60% at 90% 0%, rgba(124, 58, 237, 0.04), transparent 70%),
    var(--bg-subtle) !important;
  color: var(--text) !important;
}
.product-story-heading {
  background: linear-gradient(135deg,
    rgba(15, 23, 42, 0.02),
    rgba(15, 23, 42, 0.01)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}
.product-story-title,
.product-story-copy {
  color: var(--text) !important;
}
.product-story-copy {
  color: var(--text-secondary) !important;
}
.product-story-shell {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.96),
      rgba(248, 250, 252, 0.94) 48%,
      rgba(236, 253, 245, 0.92)) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Story stages — the "01 Kunde schickt", "AI versteht den Inhalt",
   "02 Archiv ist fertig" trio. Light glass cards on top of the shell. */
.story-stage,
.story-stage--input,
.story-stage--output {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md) !important;
}
.story-stage-head,
.story-stage-head > * {
  color: var(--text-secondary) !important;
}
.story-stage-head strong,
.story-stage-head .story-stage-index {
  color: var(--mint) !important;
}

.story-phone {
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.10), transparent 52%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}
.story-phone *,
.story-phone p,
.story-phone span,
.story-phone div {
  color: var(--text) !important;
}
.story-phone .story-file-thumb,
.story-phone [class*="thumb"] {
  background: linear-gradient(150deg, #F4F6FA, #E2E8F0) !important;
  border: 1px solid var(--border) !important;
}

/* 21a.1. Product story input card — make the "Kunde schickt" state read
   like an upload tray instead of a half-empty phone mockup. */
.story-stage {
  padding: clamp(1rem, 1.4vw, 1.25rem) !important;
  border-radius: 24px !important;
}
.story-stage-head {
  justify-content: flex-start !important;
  gap: 0.68rem !important;
  margin-bottom: 0.12rem !important;
}
.story-stage-head span {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: rgba(0, 168, 120, 0.08) !important;
  border: 1px solid rgba(0, 168, 120, 0.20) !important;
  color: #047857 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.08em !important;
  flex-shrink: 0 !important;
}
.story-stage-head strong {
  color: #0F172A !important;
  font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", "Segoe UI", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
}
.story-stage--input .story-stage-head strong {
  color: #047857 !important;
}
.story-phone {
  min-height: auto !important;
  align-content: stretch !important;
  gap: 0.72rem !important;
  padding: 1rem !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
.story-phone-top {
  display: none !important;
}
.story-chat-bubble {
  width: 100% !important;
  min-height: 72px !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 0.86rem !important;
  padding: 0.9rem 1rem !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
}
.story-chat-bubble--image {
  background: linear-gradient(180deg, #FFFFFF, #FAFBFC) !important;
}
.story-chat-bubble--pdf {
  margin-inline-start: 0 !important;
  background: linear-gradient(180deg, #F8FBFF, #EEF6FF) !important;
  border-color: rgba(37, 99, 235, 0.12) !important;
}
.story-chat-bubble strong {
  color: #0F172A !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
.story-chat-bubble small {
  color: #334155 !important;
  font-size: 0.80rem !important;
  line-height: 1.35 !important;
}
.story-file-thumb {
  width: 48px !important;
  height: 58px !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}
.story-file-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 13px !important;
  background: rgba(244, 63, 94, 0.08) !important;
  border: 1px solid rgba(244, 63, 94, 0.22) !important;
  color: #9F1239 !important;
  font-size: 0.67rem !important;
  font-weight: 900 !important;
}
@media (max-width: 640px) {
  .story-stage-head {
    align-items: center !important;
  }
  .story-chat-bubble {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 64px !important;
    padding: 0.78rem !important;
  }
  .story-file-thumb {
    width: 42px !important;
    height: 52px !important;
  }
  .story-file-icon {
    width: 42px !important;
    height: 42px !important;
  }
}

.story-ai-node {
  background: radial-gradient(circle at 50% 40%,
    rgba(0, 168, 120, 0.14),
    transparent 48%) !important;
}
.story-ai-orbit {
  border-color: var(--border-strong) !important;
}
.story-ai-core {
  background: linear-gradient(135deg, var(--mint), var(--blue)) !important;
  box-shadow: var(--shadow-mint) !important;
}
.story-ai-copy,
.story-ai-copy * {
  color: var(--text) !important;
}

.story-archive-window {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}
.story-window-bar {
  background: var(--bg-muted) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.story-metadata-grid,
.story-metadata-grid > *,
.story-archive-window * {
  color: var(--text) !important;
}
.story-metadata-grid .label,
.story-metadata-grid .meta-label,
.story-metadata-grid > * > .label {
  color: var(--text-muted) !important;
}

.product-story-outcomes,
.product-story-outcomes > * {
  color: var(--text-secondary) !important;
}
.product-story-outcomes [class*="pill"],
.product-story-outcomes [class*="chip"],
.product-story-outcomes [class*="check"] {
  background: var(--mint-soft) !important;
  border: 1px solid var(--mint-line) !important;
  color: var(--mint) !important;
}

/* 21b. AI access / launch panels ("Starten wie in einem echten KI-System") */
.ai-access-panel,
.ai-brain-panel,
.ai-launch-panel {
  background:
    radial-gradient(45% 60% at 0% 0%, rgba(0, 168, 120, 0.06), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(124, 58, 237, 0.05), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-xl) !important;
}
.ai-access-panel *,
.ai-brain-panel *,
.ai-launch-panel * {
  color: var(--text);
}
.ai-access-panel .text-label,
.ai-brain-panel .text-label,
.ai-launch-panel .text-label,
.ai-access-panel [class*="label"]:not([class*="active"]),
.ai-brain-panel [class*="label"]:not([class*="active"]),
.ai-launch-panel [class*="label"]:not([class*="active"]) {
  color: var(--text-muted) !important;
}
.ai-document-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Generic processing route / launch target cards inside the AI panels */
.processing-route,
.launch-targets,
.lp-route-step,
[class*="route-step"],
[class*="launch-target"],
[class*="channel-card"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* 21c. Feature / how-it-works / pricing sections — alternate bg rhythm */
#features,
#how-it-works,
#pricing,
.section.features,
.section.hiw,
.section.pricing,
.lp-features,
.lp-pricing,
.lp-hiw {
  background: transparent !important;
  color: var(--text) !important;
}
.section + .section,
section + section {
  /* Subtle alternating tint so adjacent sections don't bleed together */
  position: relative;
}

/* Section headings */
.section-title,
.section-desc,
.section-header,
.text-display,
.text-label,
.section-label {
  color: var(--text) !important;
}
.section-desc,
.section-label,
.text-label {
  color: var(--text-secondary) !important;
}

/* Feature cards */
.feature-item,
.feature-card,
.lp-feature,
.feature-tile,
[class*="feature-card"],
[class*="feature-tile"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-card) !important;
}
.feature-item *,
.feature-card *,
.feature-tile * {
  color: inherit;
}
.feature-item .feature-title,
.feature-card .feature-title,
.feature-tile .feature-title,
[class*="feature"] h3,
[class*="feature"] h4 {
  color: var(--text) !important;
}
.feature-item .feature-desc,
.feature-card .feature-desc,
.feature-tile .feature-desc,
[class*="feature"] p {
  color: var(--text-secondary) !important;
}
.feature-item .feature-icon,
.feature-card .feature-icon,
.feature-tile .feature-icon,
[class*="feature-icon"] {
  background: var(--mint-soft) !important;
  color: var(--mint) !important;
  border: 1px solid var(--mint-line) !important;
}

/* 21d. Step cards / how-it-works tiles */
.hiw-step,
.step-card,
.how-step,
[class*="hiw-step"],
[class*="step-tile"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-card) !important;
}
.hiw-step *,
.step-card *,
.how-step * {
  color: inherit;
}

/* 21e. Pricing cards */
.pricing-tier,
.pricing-card,
.lp-pricing-card,
[class*="pricing-card"],
[class*="pricing-tier"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-lg) !important;
}
.pricing-tier .price-amount,
.pricing-card .price-amount,
[class*="pricing"] .amount,
[class*="pricing"] .price {
  color: var(--text) !important;
}
.pricing-tier .price-unit,
.pricing-card .price-unit,
[class*="pricing"] .unit,
[class*="pricing"] .period {
  color: var(--text-muted) !important;
}
.pricing-tier ul li,
.pricing-card ul li,
[class*="pricing"] ul li {
  color: var(--text-secondary) !important;
}
.pricing-tier ul li svg,
.pricing-card ul li svg,
[class*="pricing"] ul li svg {
  color: var(--mint) !important;
}

/* "Most popular" / featured pricing tier */
.pricing-tier.featured,
.pricing-tier[data-popular="true"],
.pricing-tier.recommended,
.pricing-card.featured,
.pricing-card[data-popular="true"],
.pricing-card.recommended {
  border: 2px solid var(--mint) !important;
  box-shadow:
    0 0 0 1px var(--mint-line),
    var(--shadow-2xl) !important;
  background: linear-gradient(180deg, var(--mint-soft) 0%, var(--bg-card) 30%) !important;
}

/* 21f. Testimonials / reviews */
.review-card,
.testimonial-card,
.lp-review,
[class*="testimonial"],
[class*="review-"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-card) !important;
}

/* 21g. FAQ accordion — MINIMAL MODERN: huge title, no cards, just clean
   rows with thin dividers and a single chevron per row. Inspired by
   Apple / Linear / Stripe support pages.
   ─────────────────────────────────────────────────────────────────── */

/* The FAQ section wrapper + heading */
#faq,
section.lp-faq,
.lp-faq,
section[id*="faq"] {
  background: transparent !important;
}
#faq .section-eyebrow,
.lp-faq .section-eyebrow,
.lp-faq [class*="eyebrow"],
#faq [class*="kicker"],
.lp-faq [class*="kicker"] {
  color: var(--mint) !important;
  font-family: "Inter", ui-sans-serif, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
#faq h1,
#faq h2,
.lp-faq h1,
.lp-faq h2,
.lp-faq-title,
[class*="faq-title"] {
  color: var(--text) !important;
  font-family: "Inter", "SF Pro Display", ui-sans-serif, -apple-system, sans-serif !important;
  font-size: clamp(40px, 6.5vw, 76px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin: 12px 0 56px !important;
}

/* Container: no card, no border, just a flat list */
.faq-list,
.lp-faq-list,
.lp-faq,
[class*="faq-list"] {
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  counter-reset: none !important;
}

/* Each FAQ item — flat row, no card, no rounded box. Only a thin
   bottom divider separating from the next item. */
.faq-item,
.lp-faq-item,
[class*="faq-item"] {
  position: relative !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--text) !important;
  overflow: visible !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.2s ease !important;
  counter-increment: none !important;
}
.faq-item:first-child,
.lp-faq-item:first-child,
[class*="faq-item"]:first-child {
  border-top: 1px solid var(--border) !important;
}
.faq-item::before,
.lp-faq-item::before,
[class*="faq-item"]::before {
  display: none !important;
  content: none !important;
}
.faq-item:hover,
.lp-faq-item:hover,
[class*="faq-item"]:hover {
  background: transparent !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  transform: none !important;
}
.faq-item[open],
.faq-item.is-open,
.lp-faq-item[open],
.lp-faq-item.is-open,
[class*="faq-item"][open] {
  background: transparent !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

/* Question button (.faq-btn) — full-width row, big padding, clean type */
.faq-item > .faq-btn,
.faq-item .faq-btn,
[class*="faq-item"] .faq-btn,
.faq-item > summary,
.lp-faq-item > summary,
[class*="faq-item"] > summary,
.faq-item > .faq-question,
[class*="faq-item"] > .faq-question {
  width: 100% !important;
  list-style: none !important;
  cursor: pointer !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  padding: 36px 4px !important;
  color: var(--text) !important;
  font-family: "Inter", "SF Pro Display", ui-sans-serif, -apple-system, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  text-align: start !important;
  transition: color 0.2s ease !important;
  -webkit-text-fill-color: var(--text) !important;
  text-shadow: none !important;
}
.faq-item > .faq-btn::before,
.faq-item .faq-btn::before,
.faq-item > summary::before,
[class*="faq-item"] > summary::before,
[class*="faq-item"] .faq-btn::before {
  display: none !important;
  content: none !important;
}
.faq-item > .faq-btn::after,
.faq-item .faq-btn::after,
.faq-item > summary::after,
[class*="faq-item"] > summary::after,
[class*="faq-item"] .faq-btn::after {
  display: none !important;
  content: none !important;
}
.faq-item > .faq-btn > span,
.faq-item .faq-btn > span,
[class*="faq-item"] .faq-btn > span {
  background: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.faq-item:hover .faq-btn,
.faq-item:hover > summary,
[class*="faq-item"]:hover .faq-btn {
  color: var(--text) !important;
}

/* The native chevron SVG that sits inside .faq-btn (.faq-chevron) — keep
   it visible, slate-muted, slim, with smooth rotation on expand. */
.faq-chevron,
.faq-btn .faq-chevron,
.faq-btn > svg,
[class*="faq-item"] .faq-chevron,
[class*="faq-item"] .faq-btn > svg {
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  color: var(--text-muted) !important;
  stroke: var(--text-muted) !important;
  stroke-width: 2 !important;
  fill: none !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
  opacity: 1 !important;
}
.faq-item:hover .faq-chevron,
[class*="faq-item"]:hover .faq-chevron {
  color: var(--text) !important;
  stroke: var(--text) !important;
}
/* Expanded state — chevron rotates 180° */
.faq-btn[aria-expanded="true"] .faq-chevron,
.faq-btn[aria-expanded="true"] > svg,
.faq-item[open] .faq-chevron,
.faq-item.is-open .faq-chevron,
[class*="faq-item"][open] .faq-chevron {
  transform: rotate(180deg) !important;
  color: var(--mint) !important;
  stroke: var(--mint) !important;
}

/* Answer container — hidden by default unless `aria-expanded="true"`
   on the button OR the item has `is-open`. The original JS toggles
   .faq-answer's `hidden` attribute or sets max-height; we just style it. */
.faq-answer,
.faq-answer-body,
[class*="faq-answer"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Default state: hide the answer. Reveal only when the sibling button
   has aria-expanded="true" OR the item is marked open. */
.faq-item .faq-answer,
[class*="faq-item"] .faq-answer {
  display: none !important;
}
.faq-item .faq-btn[aria-expanded="true"] + .faq-answer,
[class*="faq-item"] .faq-btn[aria-expanded="true"] + .faq-answer,
.faq-item[open] .faq-answer,
.faq-item.is-open .faq-answer,
[class*="faq-item"][open] .faq-answer,
[class*="faq-item"].is-open .faq-answer {
  display: block !important;
  animation: faqFadeIn 0.3s ease-out !important;
}
@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-item .faq-answer-body,
.faq-item .faq-answer,
[class*="faq-item"] .faq-answer,
[class*="faq-item"] .faq-answer-body {
  color: var(--text-secondary) !important;
  padding: 0 4px 36px 4px !important;
  font-family: "Inter", ui-sans-serif, -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  max-width: 80ch !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
}
.faq-item p,
.lp-faq-item p,
[class*="faq-item"] p {
  color: var(--text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}
.faq-item ul,
.faq-item ol,
[class*="faq-item"] ul,
[class*="faq-item"] ol {
  color: var(--text-secondary) !important;
  padding: 0 0 0 24px !important;
  margin: 0 0 16px 0 !important;
}
.faq-item li,
[class*="faq-item"] li {
  color: var(--text-secondary) !important;
  margin: 6px 0 !important;
}
.faq-item a,
[class*="faq-item"] a {
  color: var(--mint) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor !important;
  padding-bottom: 1px !important;
}
.faq-item a:hover,
[class*="faq-item"] a:hover {
  color: var(--mint-bright) !important;
}

/* 21h. CTA "Für Ihr Team geeignet?" banner */
.team-cta,
.lp-team-cta,
[class*="team-cta"],
.b2b-bridge,
.bridge-banner {
  background:
    linear-gradient(180deg, rgba(0, 168, 120, 0.04), rgba(255, 255, 255, 0.95)) !important;
  border: 1px solid var(--mint-line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* 21h-bis. The actual "Für Ihr Team geeignet?" card uses the `.b2b-m-*`
   prefix (mid-page B2B bridge). Its description was authored for the
   dark theme (almost-white rgba) and is unreadable on our light surface. */
.b2b-bridge,
.b2b-m-card,
.b2b-mid,
[class*="b2b-m-card"],
[class*="b2b-m-bridge"] {
  background:
    linear-gradient(180deg, rgba(0, 168, 120, 0.04), rgba(255, 255, 255, 0.95)) !important;
  border: 1px solid var(--mint-line) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-lg) !important;
  outline: none !important;
}
.b2b-m-title,
.b2b-mid-title,
[class*="b2b-m-title"] {
  color: var(--text) !important;
}
.b2b-m-desc,
.b2b-mid-desc,
[class*="b2b-m-desc"],
[class*="b2b-mid-desc"] {
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
  opacity: 1 !important;
}
.b2b-m-cta,
.b2b-mid-cta,
.b2b-m-card a[class*="cta"],
[class*="b2b-m-cta"],
[class*="b2b-m-card"] a {
  background: var(--mint) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--mint) !important;
  box-shadow: var(--shadow-mint) !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.b2b-m-cta:hover,
.b2b-mid-cta:hover,
[class*="b2b-m-cta"]:hover {
  background: var(--mint-bright) !important;
  border-color: var(--mint-bright) !important;
}
/* B2B mid icon (building icon on the left of the card) */
.b2b-m-icon,
.b2b-mid-icon,
[class*="b2b-m-icon"] {
  background: var(--mint-soft) !important;
  color: var(--mint) !important;
  border: 1px solid var(--mint-line) !important;
}
.b2b-m-icon svg,
.b2b-m-icon path,
[class*="b2b-m-icon"] svg,
[class*="b2b-m-icon"] path {
  color: var(--mint) !important;
  stroke: var(--mint) !important;
}
/* Right arrow on the CTA */
.b2b-m-arrow,
[class*="b2b-m-arrow"] {
  color: var(--mint) !important;
}

/* 21i. Final catch-all: any descendant of <main> that still computes
   a dark background should be flattened to a card surface. This is a
   safety net — it triggers when the more specific rules above missed
   a hand-styled section. */
main [style*="rgba(5,"],
main [style*="rgba(8,"],
main [style*="rgba(10,"],
main [style*="rgba(11,"],
main [style*="rgba(12,"],
main [style*="rgba(13,"],
main [style*="rgba(15,"][style*="rgba(15, 23"],
main [style*="#0A"],
main [style*="#0a"],
main [style*="#0E1"],
main [style*="#11"] {
  /* Note: these inline-style attribute selectors only fire when an
     element has an inline background color literal. We do NOT cascade
     a color change because it might over-correct; we just nudge
     background to white. */
  background-color: var(--bg-card) !important;
}

/* 21j. Generic dark labels that appear over the new white sections */
.text-display,
.text-eyebrow,
.eyebrow-label,
.section-label {
  color: var(--text) !important;
}
[class*="text-display"],
[class*="display-text"] {
  color: var(--text) !important;
}

/* ════════════════════════════════════════════════════════════════════
   25. Final readability pass — fixes for issues spotted in the v1 audit:
   • Hero gradient text was too pastel on white (Scannen/Benennen/Archivieren)
   • Bento "PDF tools" tiles were almost invisible (light blue on white)
   • Bento mint chips had mint text on mint-soft (low contrast)
   • The "Sie schicken / Sie erhalten" demo pill had a dirty gray bg
   • AI flow step numbers (02/03) were dark on dark
   • Pricing badge "15 Willkommens-Credits" was overly saturated 3D pills
   • Mobile hamburger button rendered empty on white
   ═══════════════════════════════════════════════════════════════════ */

/* 25a. Hero headline gradient words — replace the pastel gradients with
   strong, saturated gradients that read AAA on white.
   We use the actual class names (.hero-word--blue / .hero-word--violet /
   .text-gradient) rather than nth-of-type so the rules survive DOM order
   changes and beat the original landing.css gradients reliably. */
.hero-title .hero-word--blue,
.hero-word--blue {
  background: none !important;
  background-image: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #3B82F6 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.hero-title .hero-word--violet,
.hero-word--violet {
  background: none !important;
  background-image: linear-gradient(135deg, #6D28D9 0%, #7C3AED 50%, #8B5CF6 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* "Archivieren." uses .text-gradient (not .hero-word--mint). The original
   stylesheet set a multi-layer background (color + shimmer overlay) which
   sometimes failed to render with our overrides. Force a single, solid
   mint gradient and explicitly reset `background` shorthand so legacy
   shimmer layers are wiped. */
.hero-title .hero-word.text-gradient,
.hero-title .text-gradient,
.hero-word.text-gradient,
span.text-gradient {
  background: none !important;
  background-image: linear-gradient(135deg, #047857 0%, #00A878 45%, #00C896 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════
   26. Mobile navigation drawer (#nav-drawer / .nav-mobile-drawer)
   The drawer that slides in when the hamburger button is tapped on
   small screens. Original CSS gave it a dark navy gradient with light
   text — invisible against our white theme. Flip to a clean light
   drawer with slate links and proper hover states.
   ═══════════════════════════════════════════════════════════════════ */
#nav-drawer,
.nav-drawer,
.nav-mobile-drawer,
[class*="nav-drawer"]:not([class*="link"]):not([class*="head"]):not([class*="footer"]),
[class*="mobile-drawer"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important;
  border-left: 1px solid var(--border-strong) !important;
  border-right: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-2xl) !important;
}

/* Optional backdrop overlay behind the drawer */
.nav-drawer-backdrop,
.nav-mobile-backdrop,
[class*="drawer-backdrop"],
[class*="nav-overlay"] {
  background: rgba(15, 23, 42, 0.42) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Drawer links — Funktionen / So funktioniert's / Preise / Loslegen */
.nav-drawer a,
.nav-drawer-link,
.nav-mobile-drawer a,
[class*="nav-drawer"] a:not([class*="cta"]):not([class*="primary"]) {
  background: transparent !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 500 !important;
}
.nav-drawer a:hover,
.nav-drawer-link:hover,
.nav-mobile-drawer a:hover {
  background: var(--bg-muted) !important;
  color: var(--mint) !important;
}
.nav-drawer a[aria-current],
.nav-drawer a.active,
.nav-drawer-link.active,
.nav-drawer-link.lp-active,
.nav-drawer a.lp-active {
  color: var(--mint) !important;
  background: var(--mint-soft) !important;
}

/* Drawer header (logo + close button) */
.nav-drawer-head,
.nav-drawer-header,
[class*="drawer-head"] {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.nav-drawer-close,
.nav-drawer button.close,
[class*="drawer-close"] {
  background: var(--bg-muted) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
}
.nav-drawer-close svg,
.nav-drawer-close path,
[class*="drawer-close"] svg,
[class*="drawer-close"] path {
  stroke: var(--text) !important;
  color: var(--text) !important;
}

/* Drawer language switcher row (EN/DE/AR) */
.nav-drawer .lang-pill,
.nav-drawer [class*="lang"],
.nav-mobile-drawer [class*="lang"] {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
.nav-drawer .lang-pill a,
.nav-drawer [class*="lang"] a {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-inline: 0.72rem !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
}
.nav-drawer .lang-pill a.lp-active,
.nav-drawer .lang-pill a.active,
.nav-drawer [class*="lang"] a.lp-active,
.nav-drawer [class*="lang"] a.active {
  background: var(--mint) !important;
  color: #FFFFFF !important;
  border-radius: 8px;
}

/* Drawer "Unternehmen" / B2B switch button — outlined card */
.nav-drawer .nav-b2b,
.nav-drawer a.nav-b2b,
.nav-mobile-drawer .nav-b2b {
  min-height: 44px !important;
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
}
.nav-drawer .nav-b2b:hover,
.nav-mobile-drawer .nav-b2b:hover {
  background: var(--bg-muted) !important;
  border-color: var(--mint-line) !important;
}

/* Drawer primary CTA (Loslegen / Kostenlos starten) — mint pill */
.nav-drawer a[class*="cta"],
.nav-drawer button[class*="cta"],
.nav-drawer a[class*="primary"],
.nav-drawer a.nav-cta,
.nav-mobile-drawer a[class*="cta"],
.nav-mobile-drawer .nav-cta {
  background: var(--mint) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--mint) !important;
  box-shadow: var(--shadow-mint) !important;
}
.nav-drawer a[class*="cta"]:hover,
.nav-drawer .nav-cta:hover {
  background: var(--mint-bright) !important;
  border-color: var(--mint-bright) !important;
}

/* Drawer section headings / dividers / footer info */
.nav-drawer-section-title,
.nav-drawer [class*="section-title"],
.nav-drawer [class*="group-title"] {
  color: var(--text-muted) !important;
}
.nav-drawer-footer,
[class*="drawer-footer"] {
  background: var(--bg-muted) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}

/* 25b. Mobile hamburger button — ensure both the box and the icon bars
   render in slate on white. The button uses three <span> bars (not SVG)
   for the hamburger icon, so we color them via background-color. */
.nav-hamburger,
button.nav-hamburger,
[class*="nav-hamburger"],
[class*="burger"],
[class*="hamburger"] {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
}
/* The three horizontal bars inside the button */
.nav-hamburger > span,
.nav-hamburger span[aria-hidden],
button.nav-hamburger > span,
button.nav-hamburger span[aria-hidden],
[class*="hamburger"] > span,
[class*="burger"] > span {
  background-color: var(--text) !important;
  background: var(--text) !important;
  border-radius: 2px !important;
}
/* Also handle SVG-based hamburgers (some themes use <svg><line>) */
.nav-hamburger svg,
.nav-hamburger path,
.nav-hamburger line,
button.nav-hamburger svg,
button.nav-hamburger path,
button.nav-hamburger line,
[class*="hamburger"] svg,
[class*="hamburger"] path,
[class*="hamburger"] line,
[class*="burger"] svg,
[class*="burger"] path,
[class*="burger"] line {
  stroke: var(--text) !important;
  color: var(--text) !important;
  fill: none !important;
}
.nav-hamburger:hover {
  background: var(--bg-muted) !important;
  border-color: var(--mint-line) !important;
}
.nav-hamburger:hover > span,
.nav-hamburger:hover span[aria-hidden] {
  background-color: var(--mint) !important;
  background: var(--mint) !important;
}
/* Open / expanded state — turn into an X */
.nav-hamburger[aria-expanded="true"] > span,
.nav-hamburger.is-open > span {
  background-color: var(--text) !important;
  background: var(--text) !important;
}

/* 25c. AI flow step numbers ("01 Lesen", "02 Verstehen", "03 Archivieren")
   — when inactive, the dark capsule had dark text. Active state (.is-live)
   already shows mint with white text. We need inactive states to either
   be a light pill with dark numbers, or a dark pill with WHITE numbers.
   Going with: light pill + dark numbers for consistency with white theme. */
.ai-flow-step [class*="num"],
.ai-flow-step [class*="index"],
.ai-flow-step [class*="step-no"],
.ai-flow-step > span:first-child:not(.is-text),
.ai-flow-step .ai-flow-num {
  background: var(--bg-muted) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  -webkit-text-fill-color: var(--text) !important;
}
/* Active step (currently "Lesen") — keep mint pill with white text */
.ai-flow-step.is-live [class*="num"],
.ai-flow-step.is-live [class*="index"],
.ai-flow-step.is-live > span:first-child:not(.is-text),
.ai-flow-step.is-live .ai-flow-num {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint-bright) 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--mint) !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: var(--shadow-mint) !important;
}

/* 25d. Smart Naming before/after demo — rebuilt as a clear document
   transformation instead of a cramped pill. */
.bento-demo {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.12fr) !important;
  align-items: stretch !important;
  gap: 0.75rem !important;
  margin-top: 1.25rem !important;
  padding: 0.72rem !important;
  overflow: visible !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96)),
    radial-gradient(circle at 76% 28%, rgba(0,168,120,0.10), transparent 38%) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}
.bento-demo-side {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.78rem !important;
  padding: 0.86rem 0.95rem !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
  color: #0F172A !important;
}
.bento-demo-side:first-child {
  background: linear-gradient(180deg, #FFFFFF, #FFF8F8) !important;
  border-color: rgba(248, 113, 113, 0.24) !important;
}
.bento-demo-side + .bento-demo-side,
.bento-demo-side:last-child {
  border-inline-start: 1px solid rgba(0, 168, 120, 0.24) !important;
  background: linear-gradient(180deg, #FBFFFD, #F2FFFB) !important;
  border-color: rgba(0, 168, 120, 0.28) !important;
  box-shadow:
    0 12px 28px rgba(0, 168, 120, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}
.bento-demo-icon {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}
.bento-demo-icon svg {
  width: 17px !important;
  height: 17px !important;
}
.bento-demo-icon--before {
  background: rgba(248, 113, 113, 0.10) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(248, 113, 113, 0.22) !important;
}
.bento-demo-icon--after {
  background: rgba(0, 168, 120, 0.12) !important;
  color: #008F66 !important;
  border: 1px solid rgba(0, 168, 120, 0.24) !important;
}
.bento-demo-meta {
  min-width: 0 !important;
  display: grid !important;
  gap: 0.24rem !important;
}
.bento-demo-label {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #64748B !important;
  font-family: ui-sans-serif, -apple-system, "Inter", sans-serif !important;
  font-size: 0.63rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
.bento-demo-side:last-child .bento-demo-label {
  color: #047857 !important;
}
.bento-demo-file {
  margin: 0 !important;
  color: #0F172A !important;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Menlo, Monaco, monospace !important;
  font-size: clamp(0.76rem, 0.9vw, 0.86rem) !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}
.bento-demo-side:last-child .bento-demo-file {
  color: #075E4C !important;
}
.bento-demo-arrow {
  position: relative !important;
  z-index: 1 !important;
  place-self: center !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(0, 168, 120, 0.32) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #00E5AB, #7AF7D1) !important;
  color: #04352A !important;
  box-shadow: 0 12px 24px rgba(0, 168, 120, 0.22) !important;
}
.bento-demo-arrow::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -0.78rem;
  right: -0.78rem;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(148,163,184,0), rgba(0,168,120,0.32), rgba(148,163,184,0));
}
.bento-demo-arrow svg {
  width: 17px !important;
  height: 17px !important;
}
@media (max-width: 720px) {
  .bento-demo {
    grid-template-columns: 1fr !important;
    gap: 0.62rem !important;
    padding: 0.64rem !important;
  }
  .bento-demo-side {
    padding: 0.8rem !important;
  }
  .bento-demo-arrow {
    width: 38px !important;
    height: 38px !important;
  }
  .bento-demo-arrow::before {
    display: none !important;
  }
  .bento-demo-arrow svg {
    transform: rotate(90deg);
  }
}

/* 25e. Bento mint chips (AUTO-KATEGORISIERUNG / MEHRSPRACHIGE OCR /
   INTELLIGENTE TAGS, WHATSAPP BUSINESS / SOFORTARCHIV, WHISPER KI /
   AUTO-TRANSKRIPTION). Refined: softer borders, no harsh outlines. */
.bento-chip,
.bento-chip--mint,
.bento-chip--blue,
.bento-chip--violet,
[class*="bento-chip"] {
  background: var(--mint-soft) !important;
  color: var(--mint) !important;
  border: 1px solid rgba(0, 168, 120, 0.15) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  -webkit-text-fill-color: var(--mint) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.bento-chip--blue {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  border-color: rgba(37, 99, 235, 0.15) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.bento-chip--violet {
  background: var(--violet-soft) !important;
  color: var(--violet) !important;
  border-color: rgba(124, 58, 237, 0.15) !important;
  -webkit-text-fill-color: var(--violet) !important;
}

/* The broad [class*="bento-chip"] selector above intentionally normalizes
   chips, but it also matches the plural .bento-chips wrapper. Reset the
   wrapper so mobile does not render one giant mint blob behind the tags. */
.bento-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.48rem !important;
  margin-top: 1rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
.bento-chips .bento-chip {
  max-width: 100% !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* 25f. Bento PDF tool tiles. Refined: rounded corners, soft elevation,
   clean hover. No more sharp rectangular boxes. */
.bento-tool,
.bento-toolgrid .bento-tool,
[class*="bento-tool"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important;
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 14px 18px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  -webkit-text-fill-color: var(--text) !important;
  text-shadow: none !important;
}
.bento-tool:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 100%) !important;
  border-color: var(--mint-line) !important;
  box-shadow:
    0 4px 12px rgba(0, 168, 120, 0.08),
    0 1px 2px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-1px) !important;
}
.bento-tool svg,
.bento-tool [class*="icon"] {
  color: var(--blue) !important;
  stroke: var(--blue) !important;
}

/* The broad [class*="bento-tool"] selector above must not turn the grid
   container or its count label into tiles. Reassert their layout contract. */
.bento-toolgrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
  margin-top: 1.125rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bento-toolgrid-count {
  display: block !important;
  margin-top: 0.875rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  text-align: center !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}

@media (max-width: 640px) {
  .bento-card {
    padding: 1.35rem !important;
  }
  .bento-chips {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.52rem !important;
  }
  .bento-chips .bento-chip {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
    padding: 0.62rem 0.9rem !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.055em !important;
  }
  .bento-toolgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.58rem !important;
    margin-top: 1rem !important;
    padding: 0.72rem !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
  }
  .bento-toolgrid .bento-tool {
    min-height: 54px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.48rem !important;
    padding: 0.62rem 0.68rem !important;
    border-radius: 14px !important;
    font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", "Segoe UI", sans-serif !important;
    font-size: 0.76rem !important;
    font-weight: 650 !important;
    line-height: 1.16 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: start !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  .bento-toolgrid .bento-tool svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
  }
  .bento-toolgrid-count {
    font-size: 0.68rem !important;
    letter-spacing: 0.14em !important;
  }
}
/* "12 tools · 1 Bot" small label */
.bento-toolgrid + *,
.bento-toolgrid ~ * {
  color: var(--text-muted) !important;
}

/* 25g. Pricing badges (3 colored blobs "15 Willkommens-Credits" / "Erste 5
   Analyze-Vorschauen frei" / "Unbegrenzter Drive Sync"). Original CSS uses
   bold saturated gradients with shadow halos AND IBM Plex Mono font that
   reads as ASCII art on white. Flatten + reset font to clean sans-serif. */
.pricing-badges,
.pricing-badges li,
.pricing-badge {
  background: var(--bg-card) !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: var(--text) !important;
  filter: none !important;
  font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", "Segoe UI", sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.pricing-badge *,
.pricing-badges li * {
  font-family: inherit !important;
  text-transform: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: none !important;
  filter: none !important;
}
.pricing-badge--mint {
  background: var(--mint-soft) !important;
  color: var(--mint) !important;
  border-color: var(--mint-line) !important;
  -webkit-text-fill-color: var(--mint) !important;
}
.pricing-badge--blue {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  -webkit-text-fill-color: var(--blue) !important;
}
.pricing-badge--amber,
.pricing-badge--orange {
  background: rgba(217, 119, 6, 0.08) !important;
  color: #B45309 !important;
  border-color: rgba(217, 119, 6, 0.22) !important;
  -webkit-text-fill-color: #B45309 !important;
}
.pricing-badge svg,
.pricing-badge [class*="icon"],
.pricing-badge::before {
  color: inherit !important;
  filter: none !important;
}

/* 25g.1. Pricing badge row — the list wrapper should not draw a card.
   Only the individual badges carry surfaces. */
.pricing-badges {
  width: min(100%, 920px) !important;
  margin: 1rem auto 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.62rem !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.pricing-badge {
  min-height: 42px !important;
  padding: 0.62rem 1rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.52rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  max-width: min(100%, 520px) !important;
}
.pricing-badge svg {
  width: 16px !important;
  height: 16px !important;
  padding: 2px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
.pricing-badge span {
  min-width: 0 !important;
  text-align: start !important;
}
.pricing-badge--mint {
  background: linear-gradient(180deg, rgba(236,253,245,0.98), rgba(220,252,231,0.92)) !important;
  color: #065F46 !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
  -webkit-text-fill-color: #065F46 !important;
}
.pricing-badge--blue {
  background: linear-gradient(180deg, rgba(239,246,255,0.98), rgba(219,234,254,0.90)) !important;
  color: #1D4ED8 !important;
  border-color: rgba(37, 99, 235, 0.20) !important;
  -webkit-text-fill-color: #1D4ED8 !important;
}
.pricing-badge--orange {
  background: linear-gradient(180deg, rgba(255,251,235,0.98), rgba(254,243,199,0.88)) !important;
  color: #92400E !important;
  border-color: rgba(217, 119, 6, 0.20) !important;
  -webkit-text-fill-color: #92400E !important;
}
@media (max-width: 640px) {
  .pricing-badges {
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .pricing-badge {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* 25g.2. Pack equivalence note — quiet helper text, not a neon code line. */
.pack-equivalence {
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.42rem !important;
  width: auto !important;
  margin-top: 0.14rem !important;
  padding: 0.26rem 0.7rem !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.035) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  color: #475569 !important;
  font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", "Segoe UI", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-transform: none !important;
  -webkit-text-fill-color: #475569 !important;
  box-shadow: none !important;
}
.pack-equivalence::before {
  content: '';
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #00A878 !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 120, 0.10) !important;
  flex-shrink: 0 !important;
}
.price-card-featured .pack-equivalence {
  background: rgba(0, 168, 120, 0.06) !important;
  border-color: rgba(0, 168, 120, 0.13) !important;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
}
@media (max-width: 640px) {
  .pack-equivalence {
    align-self: flex-start !important;
  }
}

/* 25g.3. Bild-Tools card — compact workbench composition. */
.bento-image-tools {
  display: grid !important;
  grid-template-columns: minmax(238px, 0.72fr) minmax(440px, 1.28fr) !important;
  gap: clamp(1rem, 2vw, 1.45rem) !important;
  align-items: stretch !important;
  min-height: 0 !important;
}
.bento-image-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  padding-top: 0.35rem !important;
}
.bento-image-tools .bento-icon {
  width: 56px !important;
  height: 56px !important;
  margin-bottom: 1rem !important;
}
.bento-image-tools .bento-title {
  margin-bottom: 0.55rem !important;
}
.bento-image-tools .bento-desc {
  max-width: 37ch !important;
}
.bento-image-tools .bento-info-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
}
.bento-image-tools .bento-info-chip {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.44rem !important;
  width: auto !important;
  min-height: 34px !important;
  padding: 0.45rem 0.72rem !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(37, 99, 235, 0.15) !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.045) !important;
  color: #334155 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
.bento-image-tools .bento-info-chip svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  color: #38BDF8 !important;
}
.trust-pill.is-disabled,
.ai-channel-card.is-disabled {
  cursor: default !important;
  opacity: 0.74 !important;
  filter: saturate(0.82) !important;
  pointer-events: none !important;
}
.trust-pill.is-disabled::after,
.ai-channel-card.is-disabled::after {
  display: none !important;
}
.trust-pill.is-disabled:hover,
.ai-channel-card.is-disabled:hover {
  transform: none !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10) !important;
}
.trust-pill.is-disabled .trust-pill-arrow,
.ai-channel-card.is-disabled .ai-channel-arrow {
  display: none !important;
}
.image-tools-demo {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 100% !important;
}
.image-tools-workbench {
  width: 100% !important;
  height: min(100%, 500px) !important;
  min-height: 430px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  padding: 0.84rem !important;
  border-radius: 21px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(245,250,255,0.94) 56%, rgba(236,253,245,0.86) 100%),
    radial-gradient(circle at 78% 12%, rgba(56,189,248,0.13), transparent 34%) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}
.image-tools-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-bottom: 0.64rem !important;
  color: #64748B !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
.image-tools-toolbar strong {
  color: #047857 !important;
  font-weight: 900 !important;
}
.image-tools-strip {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
  gap: 0.62rem !important;
  align-items: stretch !important;
}
.image-tools-mini {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto minmax(180px, 1fr) auto !important;
  align-items: stretch !important;
  gap: 0.62rem !important;
  padding: 0.72rem !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045) !important;
}
.image-tools-mini-head {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.56rem !important;
}
.image-tools-mini--raw {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.96)),
    repeating-linear-gradient(45deg, rgba(148,163,184,0.10) 0 8px, rgba(255,255,255,0.22) 8px 16px) !important;
}
.image-tools-mini--clean {
  border-color: rgba(0, 168, 120, 0.22) !important;
  background:
    linear-gradient(90deg, rgba(226,232,240,0.26) 1px, transparent 1px),
    linear-gradient(180deg, rgba(226,232,240,0.26) 1px, transparent 1px),
    linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
}
.image-tools-mini-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 13px !important;
  background: #EFF6FF !important;
  border: 1px solid rgba(37, 99, 235, 0.14) !important;
  color: #2563EB !important;
}
.image-tools-mini--clean .image-tools-mini-icon {
  background: rgba(236, 253, 245, 0.95) !important;
  border-color: rgba(0, 168, 120, 0.18) !important;
  color: #00A878 !important;
}
.image-tools-mini-icon svg {
  width: 20px !important;
  height: 20px !important;
}
.image-tools-mini strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: #0F172A !important;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Menlo, Monaco, monospace !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}
.image-tools-preview {
  position: relative !important;
  min-height: 180px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
}
.image-tools-preview--raw {
  background:
    linear-gradient(135deg, rgba(226,232,240,0.78), rgba(248,250,252,0.88)),
    repeating-linear-gradient(45deg, rgba(148,163,184,0.16) 0 9px, rgba(255,255,255,0.20) 9px 18px) !important;
}
.image-tools-preview--raw span {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 72% !important;
  height: 60% !important;
  transform: translate(-50%, -50%) rotate(-5deg) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
}
.image-tools-preview--raw span::before,
.image-tools-preview--raw span::after {
  content: "" !important;
  position: absolute !important;
  left: 16% !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #CBD5E1 !important;
}
.image-tools-preview--raw span::before {
  top: 34% !important;
  width: 62% !important;
}
.image-tools-preview--raw span::after {
  top: 52% !important;
  width: 46% !important;
}
.image-tools-preview--raw i {
  position: absolute !important;
  left: 18% !important;
  right: 18% !important;
  bottom: 18% !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.14) !important;
}
.image-tools-preview--clean {
  display: grid !important;
  place-items: center !important;
  background:
    linear-gradient(90deg, rgba(226,232,240,0.34) 1px, transparent 1px),
    linear-gradient(180deg, rgba(226,232,240,0.34) 1px, transparent 1px),
    linear-gradient(180deg, #FFFFFF 0%, #ECFDF5 100%) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
}
.image-tools-preview--clean span {
  width: 94px !important;
  height: 128px !important;
  display: grid !important;
  align-content: end !important;
  gap: 0.34rem !important;
  padding: 0.72rem !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 168, 120, 0.18) !important;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08) !important;
}
.image-tools-preview--clean i,
.image-tools-preview--clean b {
  display: block !important;
  height: 4px !important;
  border-radius: 999px !important;
}
.image-tools-preview--clean i {
  background: #CBD5E1 !important;
}
.image-tools-preview--clean i:nth-child(2) { width: 78% !important; }
.image-tools-preview--clean i:nth-child(3) { width: 56% !important; }
.image-tools-preview--clean b {
  width: 52% !important;
  background: #00A878 !important;
}
.image-tools-mini small {
  display: block !important;
  overflow: hidden !important;
  color: #64748B !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.28 !important;
}
.image-tools-mini-flow {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 0.28rem !important;
  color: #047857 !important;
}
.image-tools-mini-flow span {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #00E5AB, #7AF7D1) !important;
  box-shadow: 0 10px 22px rgba(0, 168, 120, 0.20) !important;
  color: #04352A !important;
  font-size: 0.65rem !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}
.image-tools-mini-flow svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.4 !important;
}
.image-tools-steps {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.44rem !important;
  margin-top: 0.68rem !important;
}
.image-tools-steps span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0.34rem 0.56rem !important;
  border-radius: 999px !important;
  background: rgba(0, 168, 120, 0.075) !important;
  border: 1px solid rgba(0, 168, 120, 0.10) !important;
  color: #047857 !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}
@media (max-width: 980px) {
  .bento-image-tools {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 1180px) {
  .bento-image-tools {
    grid-template-columns: 1fr !important;
  }
  .image-tools-demo {
    justify-content: center !important;
  }
  .image-tools-workbench {
    max-width: 760px !important;
    margin-inline: auto !important;
  }
}
@media (max-width: 640px) {
  .image-tools-workbench {
    height: auto !important;
    min-height: 0 !important;
    padding: 0.72rem !important;
  }
  .image-tools-toolbar {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 0.34rem !important;
  }
  .image-tools-strip {
    grid-template-columns: 1fr !important;
  }
  .image-tools-mini {
    grid-template-rows: auto minmax(104px, auto) auto !important;
  }
  .image-tools-preview {
    min-height: 104px !important;
  }
  .image-tools-mini-flow {
    grid-template-columns: 34px 18px !important;
    justify-content: center !important;
  }
  .image-tools-mini-flow svg {
    transform: rotate(90deg);
  }
}

/* 25h. Catch-all for the bento card background that holds the demo pill */
.bento,
.bento-card,
[class*="bento-card"]:not([class*="chip"]):not([class*="tool"]) {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-card) !important;
}
.bento h2, .bento h3, .bento h4,
.bento-card h2, .bento-card h3, .bento-card h4 {
  color: var(--text) !important;
}
.bento p, .bento-card p,
.bento-desc, .bento-card-desc,
.bento [class*="desc"], .bento-card [class*="desc"] {
  color: var(--text-secondary) !important;
}

/* ════════════════════════════════════════════════════════════════════
   27. Pricing tier purchase buttons (.pack-option) — original CSS gave
   them a dark translucent fill `rgba(0,0,0,0.25)` which renders as a
   washed-out gray on white. Promote them to proper mint CTAs that
   match the rest of the buy-flow.
   ═══════════════════════════════════════════════════════════════════ */
.pack-option,
button.pack-option,
a.pack-option {
  background: linear-gradient(180deg, var(--mint) 0%, #009870 100%) !important;
  background-color: var(--mint) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--mint) !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 20px rgba(0, 168, 120, 0.20),
    0 1px 2px rgba(15, 23, 42, 0.06) !important;
  padding: 14px 18px !important;
  font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  cursor: pointer !important;
}
.pack-option:hover,
button.pack-option:hover,
a.pack-option:hover {
  background: linear-gradient(180deg, var(--mint-bright) 0%, var(--mint) 100%) !important;
  background-color: var(--mint-bright) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 12px 28px rgba(0, 168, 120, 0.30),
    0 2px 4px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-1px) !important;
}
.pack-option:active,
button.pack-option:active {
  transform: translateY(0) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 10px rgba(0, 168, 120, 0.18) !important;
}
/* Every child element inherits white text + clean Inter font */
.pack-option *,
button.pack-option *,
a.pack-option * {
  color: #FFFFFF !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: none !important;
}
/* The "20 Credits" label on the left — slightly smaller, lighter weight */
.pack-option > span:first-child,
.pack-option [class*="label"],
.pack-option [class*="credits"]:first-child {
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 0.92 !important;
}
/* The "€2.99" price — slightly larger and bolder */
.pack-option > span:last-child,
.pack-option [class*="price"],
.pack-option [class*="amount"] {
  font-size: 16px !important;
  font-weight: 700 !important;
}
.pack-option .pack-vat-note,
button.pack-option .pack-vat-note,
a.pack-option .pack-vat-note {
  display: block !important;
  margin-top: 2px !important;
  /* 11px / 0.68rem matches .mf26-vat-note (dashboard) and .price-vat-note
     (landing pricing) to keep the PAngV §3 "klar erkennbar" MwSt notice
     above the ~7.5pt range that BGH I ZR 163/02 and OLG Frankfurt 6 U 82/21
     have repeatedly flagged as borderline Kleinstdruckschrift (#880). */
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}
/* The "Zahlungspflichtig bestellen" eyebrow above the pack-option button */
.pack-option-eyebrow,
[class*="pack-option-eyebrow"],
[class*="pack-eyebrow"] {
  color: var(--text-muted) !important;
  font-family: "Inter", ui-sans-serif, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   22. Footer — was a multi-column dark navy block. Flip to a clean
   light footer with slate links and a soft mint accent header.
   ═══════════════════════════════════════════════════════════════════ */
footer.lp-footer,
.lp-footer {
  background:
    linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-subtle) 100%) !important;
  color: var(--text-secondary) !important;
  border-top: 1px solid var(--border) !important;
}
.lp-footer-glow {
  background: radial-gradient(
    rgba(0, 168, 120, 0.04) 0%,
    transparent 70%) !important;
}
.lp-footer-inner,
.lp-footer-top,
.lp-footer-bottom {
  color: inherit;
}
.lp-footer-brand-section,
.lp-footer-col {
  background:
    linear-gradient(rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.01)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: var(--r-lg, 14px) !important;
}
.lp-footer-brand,
.lp-footer-brand-txt,
.lp-footer-logo,
.logo-brand.lp-footer-brand-txt {
  color: var(--text) !important;
}
.lp-footer-tagline,
.lp-footer-meta,
.lp-footer-bottom-text {
  color: var(--text-secondary) !important;
}
.lp-footer-link,
.lp-footer a,
footer.lp-footer a {
  color: var(--text-secondary) !important;
}
.lp-footer-link:hover,
.lp-footer a:hover,
footer.lp-footer a:hover {
  color: var(--text) !important;
}
.lp-footer-head,
.lp-footer summary,
.lp-footer-col summary {
  color: var(--mint) !important;
}
.lp-footer-status {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-strong) !important;
}
.lp-footer-status:hover {
  background: var(--bg-muted) !important;
  color: var(--text) !important;
}
.lp-footer-app-badges {
  display: grid !important;
  gap: 0.55rem !important;
  width: min(100%, 232px) !important;
  margin-top: 1rem !important;
}
.lp-footer-app-badges img,
.lp-footer-app-badges a {
  filter: none;
}

/* Footer store badges for the white theme: App Store keeps the familiar
   black badge language, while the unavailable Android channel becomes a
   quiet status card instead of a fake download CTA. */
.lp-store-btn,
a.lp-store-btn,
.lp-store-btn--apple,
.lp-store-btn--google {
  width: 100% !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.68rem !important;
  padding: 0.58rem 0.8rem !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}
.lp-store-btn--apple,
a.lp-store-btn--apple {
  background: #05070A !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 9px 20px rgba(15, 23, 42, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.lp-store-btn--apple:hover,
a.lp-store-btn--apple:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 13px 26px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
.lp-store-btn.is-disabled,
.lp-store-btn--google.is-disabled {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,250,252,0.90)) !important;
  color: #334155 !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
  cursor: default !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #334155 !important;
}
.lp-store-btn.is-disabled:hover,
.lp-store-btn--google.is-disabled:hover {
  transform: none !important;
  border-color: rgba(0, 168, 120, 0.22) !important;
}
.lp-store-btn--apple svg,
.lp-store-btn--apple svg path {
  width: 18px !important;
  height: 22px !important;
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  flex: 0 0 auto !important;
}
.lp-store-btn--google svg {
  width: 19px !important;
  height: 21px !important;
  filter: saturate(0.92) brightness(1.02) !important;
  flex: 0 0 auto !important;
}
.lp-store-btn-text {
  min-width: 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.1rem !important;
  line-height: 1.08 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.lp-store-btn-small {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: "Inter", ui-sans-serif, -apple-system, sans-serif !important;
  font-size: 0.56rem !important;
  font-weight: 780 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
.lp-store-btn--apple .lp-store-btn-small {
  color: rgba(255,255,255,0.74) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.74) !important;
}
.lp-store-btn--google .lp-store-btn-small {
  color: #64748B !important;
  -webkit-text-fill-color: #64748B !important;
}
.lp-store-btn-title {
  overflow: hidden !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: "Inter", "SF Pro Display", ui-sans-serif, -apple-system, sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
  text-shadow: none !important;
}
.lp-store-btn--apple .lp-store-btn-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.lp-store-btn--google .lp-store-btn-title {
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-size: 0.9rem !important;
}
/* Disclaimer block at very bottom of footer */
.lp-footer-disclaimer,
.lp-footer-legal-note,
.lp-footer-copyright {
  color: var(--text-muted) !important;
}
/* Bottom row container (social icons + copyright + compliance badges) */
.lp-footer-bottom,
.lp-footer-bottom * {
  color: var(--text-secondary) !important;
}
.lp-footer-bottom .lp-footer-copyright,
.lp-footer-bottom > div,
.lp-footer-bottom > span,
.lp-footer-bottom p {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}
/* Compliance badges (GDPR / TLS / EU) — were rgba(255,255,255,X)
   transparent pills with near-white text. Flip to readable light cards
   with mint icon accents. */
.lp-footer-badge,
[class*="lp-footer-badge"] {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  -webkit-text-fill-color: var(--text) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-shadow: none !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}
.lp-footer-badge:hover {
  background: var(--bg-muted) !important;
  border-color: var(--mint-line) !important;
}
.lp-footer-badge--de {
  background: rgba(0, 168, 120, 0.06) !important;
  border-color: rgba(0, 168, 120, 0.18) !important;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
}
.lp-footer-badge svg,
.lp-footer-badge path,
.lp-footer-badge [class*="icon"] {
  color: var(--mint) !important;
  stroke: var(--mint) !important;
}
.lp-footer-badge.is-active,
.lp-footer-badge[aria-current],
.lp-footer-badge--active {
  background: var(--mint-soft) !important;
  color: var(--mint) !important;
  border-color: var(--mint-line) !important;
  -webkit-text-fill-color: var(--mint) !important;
}
/* Status pill "Alle Systeme operativ" inline dot */
.lp-footer-status .status-dot,
.lp-footer-status::before {
  background: var(--mint) !important;
}

/* ════════════════════════════════════════════════════════════════════
   23. AI Access Panel — extra hardening because ai-access-hub.css
   uses heavy !important rules. We pump specificity with section/body
   prefixes so we outrank it in the cascade regardless of load order.
   ═══════════════════════════════════════════════════════════════════ */
body section.ai-access-panel,
body section.ai-brain-panel,
body section.ai-launch-panel,
body .ai-access-panel,
body .ai-brain-panel,
body .ai-launch-panel,
html section.ai-access-panel,
html .ai-access-panel {
  background:
    radial-gradient(45% 60% at 0% 0%, rgba(0, 168, 120, 0.06), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(124, 58, 237, 0.05), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-xl) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body .ai-access-panel::before,
body .ai-brain-panel::before,
body .ai-launch-panel::before {
  background:
    linear-gradient(90deg,
      rgba(0, 168, 120, 0.08),
      transparent 38%,
      rgba(124, 58, 237, 0.06)),
    repeating-linear-gradient(135deg,
      rgba(15, 23, 42, 0.025) 0 1px,
      transparent 1px 18px) !important;
  opacity: 0.55 !important;
}
body .ai-panel-kicker,
.ai-panel-kicker {
  color: var(--mint) !important;
}
body .ai-panel-title,
.ai-panel-title,
body .ai-panel-head,
.ai-panel-head {
  color: var(--text) !important;
}
body .ai-panel-sub,
.ai-panel-sub,
body .ai-panel-copy,
.ai-panel-copy {
  color: var(--text-secondary) !important;
}
/* Processing route steps & launch target cards inside the panel */
body .ai-access-panel [class*="step"],
body .ai-access-panel [class*="card"],
body .ai-launch-panel [class*="step"],
body .ai-launch-panel [class*="card"],
body .ai-brain-panel [class*="step"],
body .ai-brain-panel [class*="card"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}
/* Make the small mono labels inside the panels readable */
body .ai-access-panel .text-label,
body .ai-launch-panel .text-label,
body .ai-brain-panel .text-label,
body .ai-access-panel [class*="label"],
body .ai-launch-panel [class*="label"],
body .ai-brain-panel [class*="label"] {
  color: var(--text-muted) !important;
}

/* The "Live Intelligence Layer" outer wrapper section */
body section:has(> .ai-access-panel),
body section:has(.ai-launch-panel),
body section:has(.ai-brain-panel) {
  background: transparent !important;
  color: var(--text) !important;
}

/* ════════════════════════════════════════════════════════════════════
   24. .ai-access-console — the OUTER wrapper around the
   "Live Intelligence Layer" trust band. ai-access-hub.css declares
   this with heavy `!important` rules. We mirror its specificity and
   flip the dark gradient + colored glow to a clean white console.
   ═══════════════════════════════════════════════════════════════════ */
body .ai-access-console,
.ai-access-console,
.ai-access-console.trust-band,
section .ai-access-console,
div .ai-access-console {
  color: var(--text) !important;
  color-scheme: light !important;
  background:
    repeating-linear-gradient(90deg,
      rgba(0, 168, 120, 0.04) 0 1px,
      transparent 1px 58px),
    repeating-linear-gradient(0deg,
      rgba(37, 99, 235, 0.04) 0 1px,
      transparent 1px 58px),
    linear-gradient(135deg,
      #FFFFFF 0%,
      #FAFBFC 34%,
      #F4F6FA 67%,
      #FFFFFF 100%) !important;
  background-size: 58px 58px, 58px 58px, auto !important;
  border: 1px solid var(--border-strong) !important;
  outline: 1px solid var(--border) !important;
  box-shadow:
    0 32px 80px rgba(15, 23, 42, 0.10),
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 0 70px rgba(0, 168, 120, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.ai-access-console.trust-band::before,
.ai-access-console::before {
  background:
    linear-gradient(115deg,
      transparent 0%,
      transparent 36%,
      rgba(0, 168, 120, 0.10) 48%,
      rgba(124, 58, 237, 0.08) 55%,
      transparent 68%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(15, 23, 42, 0.02),
      transparent 22%,
      transparent 76%,
      rgba(0, 168, 120, 0.05)) !important;
  opacity: 0.55 !important;
}
.ai-access-console.trust-band::after,
.ai-access-console::after {
  background:
    linear-gradient(90deg,
      rgba(0, 168, 120, 0.35),
      transparent 18%,
      transparent 82%,
      rgba(124, 58, 237, 0.28)),
    linear-gradient(0deg,
      rgba(217, 119, 6, 0.18),
      transparent 20%,
      transparent 80%,
      rgba(37, 99, 235, 0.22)) !important;
  opacity: 0.35 !important;
}

/* All text inside the console — flip from #f7fff9 to slate */
.ai-access-console,
.ai-access-console *:not(svg):not(path) {
  color: inherit;
}
.ai-access-console h1,
.ai-access-console h2,
.ai-access-console h3,
.ai-access-console h4,
.ai-access-console p,
.ai-access-console strong,
.ai-access-console b,
.ai-access-console span:not([class*="kicker"]):not([class*="eyebrow"]):not([class*="mint"]),
.ai-access-console div:not([class*="kicker"]):not([class*="eyebrow"]):not([class*="status"]):not([class*="aktiv"]):not([class*="bereit"]) {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}
.ai-access-console .ai-access-copy,
.ai-access-console .ai-access-copy strong,
.ai-access-console .ai-access-copy b,
.ai-access-console .ai-access-copy p,
.ai-access-copy strong,
.ai-access-copy b {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  background: none !important;
}
.ai-access-console .ai-panel-kicker,
.ai-access-console [class*="kicker"],
.ai-access-console [class*="eyebrow"] {
  color: var(--mint) !important;
}
.ai-access-console .ai-panel-sub,
.ai-access-console [class*="sub"],
.ai-access-console [class*="copy"],
.ai-access-console .trust-pill-text,
.ai-access-console .trust-pill-eyebrow {
  color: var(--text-secondary) !important;
}

/* Trust pills inside the console — light surface, mint accent */
.ai-access-console .trust-pill {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}
.ai-access-console .trust-pill:hover {
  background: var(--bg-muted) !important;
  border-color: var(--mint-line) !important;
  box-shadow: var(--shadow-md) !important;
}
.ai-access-console .trust-pill::before,
.ai-access-console .trust-pill::after {
  display: none !important;
}
.ai-access-console .trust-pill-icon {
  background: var(--mint-soft) !important;
  color: var(--mint) !important;
  border: 1px solid var(--mint-line) !important;
}
.ai-access-console .trust-pill-title {
  color: var(--text) !important;
}
.ai-access-console .trust-pill-eyebrow {
  color: var(--text-muted) !important;
}
.ai-access-console .trust-pill-arrow {
  color: var(--text-muted) !important;
}
.ai-access-console .trust-pill:hover .trust-pill-arrow {
  color: var(--mint) !important;
}

/* "SYSTEM BEREIT" status pill in top-right of console */
.ai-access-console .system-status,
.ai-access-console [class*="status"],
.ai-access-console [class*="bereit"] {
  background: var(--mint-soft) !important;
  color: var(--mint) !important;
  border: 1px solid var(--mint-line) !important;
}

/* "Modellroute" pill row at bottom of left panel */
.ai-access-console .modellroute,
.ai-access-console [class*="modellroute"],
.ai-access-console [class*="route-pill"],
.ai-access-console [class*="badge-"] {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}

/* AI console header band — "LIVE INTELLIGENCE LAYER" / headline / SYSTEM BEREIT */
.ai-access-console .ai-access-header,
.ai-access-header {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 168, 120, 0.10), transparent 50%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.95),
      rgba(248, 250, 252, 0.92)) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 16px !important;
  color: var(--text) !important;
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.ai-access-header *,
.ai-access-console .ai-access-header * {
  color: var(--text);
}
.ai-access-header h1,
.ai-access-header h2,
.ai-access-header h3,
.ai-access-header [class*="title"],
.ai-access-header [class*="headline"] {
  color: var(--text) !important;
}
.ai-access-header [class*="kicker"],
.ai-access-header [class*="eyebrow"],
.ai-access-header [class*="label"] {
  color: var(--mint) !important;
}
.ai-access-header p,
.ai-access-header [class*="sub"],
.ai-access-header [class*="copy"],
.ai-access-header [class*="desc"] {
  color: var(--text-secondary) !important;
}

/* The AI shell + sub containers (left/right grid wrapping the two panels) */
.ai-access-console .ai-access-shell,
.ai-access-console [class*="ai-access-grid"],
.ai-access-console [class*="ai-shell"] {
  background: transparent !important;
}

/* ── Arabic / RTL hardening ─────────────────────────────────────────
   Keep the Arabic version truly RTL, while isolating Latin product names,
   file names, URLs, prices, and code-like strings so mixed content stays
   readable instead of jumping around. */
html[lang="ar"],
html[dir="rtl"] {
  direction: rtl !important;
}

html[lang="ar"] body,
html[dir="rtl"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  direction: rtl !important;
  text-align: start;
}

html[dir="rtl"] #site-nav,
html[dir="rtl"] .nav-glass,
html[dir="rtl"] .nav-links-desktop,
html[dir="rtl"] .nav-right-desktop,
html[dir="rtl"] .nav-right-mobile,
html[dir="rtl"] .nav-drawer,
html[dir="rtl"] .nav-drawer-row,
html[dir="rtl"] .hero-cta-row,
html[dir="rtl"] .hero-platform-mini,
html[dir="rtl"] .hero-trust-checks,
html[dir="rtl"] .hero-auth,
html[dir="rtl"] .hero-auth-more-panel,
html[dir="rtl"] .trust-band-actions,
html[dir="rtl"] .ai-channel-grid,
html[dir="rtl"] .bento-chips,
html[dir="rtl"] .bento-info-chips,
html[dir="rtl"] .bento-toolgrid,
html[dir="rtl"] .image-tools-demo,
html[dir="rtl"] .image-tools-workbench,
html[dir="rtl"] .image-tools-strip,
html[dir="rtl"] .image-tools-steps,
html[dir="rtl"] .pricing-badges,
html[dir="rtl"] .pricing-grid,
html[dir="rtl"] .price-features,
html[dir="rtl"] .price-packs-row,
html[dir="rtl"] .faq-list,
html[dir="rtl"] .lp-footer,
html[dir="rtl"] .lp-footer-top,
html[dir="rtl"] .lp-footer-bottom,
html[dir="rtl"] .lp-footer-app-badges,
html[dir="rtl"] .lp-footer-social,
html[dir="rtl"] .lp-footer-badges,
html[dir="rtl"] .ck-banner,
html[dir="rtl"] .ck-actions,
html[dir="rtl"] .ck-trust-row {
  direction: rtl !important;
}

html[dir="rtl"] .hero-aux,
html[dir="rtl"] .hero-auth,
html[dir="rtl"] .hero-auth-btn,
html[dir="rtl"] .hero-trust-card,
html[dir="rtl"] .hero-trust-row,
html[dir="rtl"] .story-stage,
html[dir="rtl"] .story-ai-copy,
html[dir="rtl"] .ai-access-console,
html[dir="rtl"] .ai-access-copy,
html[dir="rtl"] .ai-access-panel,
html[dir="rtl"] .trust-pill,
html[dir="rtl"] .bento-card,
html[dir="rtl"] .bento-image-copy,
html[dir="rtl"] .bento-tool,
html[dir="rtl"] .bento-info-chip,
html[dir="rtl"] .image-tools-mini,
html[dir="rtl"] .price-card,
html[dir="rtl"] .pricing-credit-body,
html[dir="rtl"] .pricing-inclusive-title,
html[dir="rtl"] .pricing-inclusive-sub,
html[dir="rtl"] .faq-item,
html[dir="rtl"] .faq-answer,
html[dir="rtl"] .lp-footer-brand-section,
html[dir="rtl"] .lp-footer-col,
html[dir="rtl"] .lp-footer-link,
html[dir="rtl"] .ck-card,
html[dir="rtl"] .ck-desc,
html[dir="rtl"] .ck-row {
  text-align: start !important;
}

html[dir="rtl"] .bento-demo {
  direction: rtl !important;
}

html[dir="rtl"] .logo-wrap,
html[dir="rtl"] .logo-brand,
html[dir="rtl"] .lp-footer-brand,
html[dir="rtl"] .mockup-title,
html[dir="rtl"] .doc-filename,
html[dir="rtl"] .doc-detail,
html[dir="rtl"] .bento-demo-file,
html[dir="rtl"] .image-tools-mini-head strong,
html[dir="rtl"] .story-chat-bubble strong,
html[dir="rtl"] .story-clean-file strong,
html[dir="rtl"] .price-amount-row,
html[dir="rtl"] .pack-option,
html[dir="rtl"] .pack-equivalence,
html[dir="rtl"] .lp-footer-badge,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] kbd,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="password"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

html[dir="rtl"] .doc-filename,
html[dir="rtl"] .doc-detail,
html[dir="rtl"] .bento-demo-file,
html[dir="rtl"] .image-tools-mini-head strong,
html[dir="rtl"] .story-chat-bubble strong,
html[dir="rtl"] .story-clean-file strong,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="password"] {
  text-align: left !important;
}

html[dir="rtl"] .lp-store-btn-text {
  align-items: flex-end !important;
  text-align: right !important;
}

html[dir="rtl"] .hero-auth-more-panel {
  right: auto !important;
  left: 0 !important;
}

html[dir="rtl"] .section-title,
html[dir="rtl"] .text-display {
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, var(--font-sans), sans-serif !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
  overflow: visible !important;
  padding-block: 0.04em 0.1em !important;
}

html[dir="rtl"] .section-title .text-gradient,
html[dir="rtl"] .text-display .text-gradient {
  display: inline !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  padding-block: 0.04em 0.1em !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html[dir="rtl"] #hero.hero--centered .hero-flowline {
  width: min(100%, 840px) !important;
  max-width: 840px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0.7rem !important;
  padding: 0.72rem !important;
  border-radius: 26px !important;
  direction: rtl !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(247,251,250,0.72)) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
  color: var(--text) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  transform: none !important;
}

html[dir="rtl"] #hero.hero--centered .hero-flowline-arrow {
  display: none !important;
}

html[dir="rtl"] #hero.hero--centered .hero-flowline-step {
  min-width: 0 !important;
  min-height: 66px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.72rem !important;
  padding: 0.78rem 0.82rem !important;
  border-radius: 18px !important;
  direction: rtl !important;
  white-space: normal !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,249,248,0.90)) !important;
  border: 1px solid rgba(15, 23, 42, 0.075) !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.065),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

html[dir="rtl"] #hero.hero--centered .hero-flowline-index {
  width: 2.55rem !important;
  height: 2.55rem !important;
  flex: 0 0 2.55rem !important;
  color: #042016 !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.92), transparent 32%),
    linear-gradient(135deg, #7EF5D8 0%, #28DFAE 54%, #00A878 100%) !important;
  border: 1px solid rgba(0, 168, 120, 0.22) !important;
  box-shadow:
    0 8px 18px rgba(0, 168, 120, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

html[dir="rtl"] #hero.hero--centered .hero-flowline-step strong {
  min-width: 0 !important;
  color: #0F172A !important;
  -webkit-text-fill-color: #0F172A !important;
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, var(--font-sans), sans-serif !important;
  font-size: clamp(0.98rem, 1.15vw, 1.14rem) !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: start !important;
}

html[dir="rtl"] #hero.hero--centered .hero-flowline-ltr {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block !important;
  font-family: "Inter", var(--font-sans), sans-serif !important;
  font-weight: 780 !important;
}

@media (max-width: 760px) {
  html[dir="rtl"] #hero.hero--centered .hero-flowline {
    grid-template-columns: 1fr !important;
    width: min(100%, 420px) !important;
    gap: 0.55rem !important;
    padding: 0.6rem !important;
    border-radius: 22px !important;
  }

  html[dir="rtl"] #hero.hero--centered .hero-flowline-step {
    min-height: 58px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 1179px) {
  html[dir="rtl"] #site-nav .nav-glass {
    justify-content: flex-start !important;
    direction: rtl !important;
  }

  html[dir="rtl"] #site-nav .logo-wrap {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[dir="rtl"] #site-nav .nav-right-mobile {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

@media (min-width: 840px) and (max-width: 1179px) {
  html[dir="rtl"] #site-nav .nav-glass {
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding-inline: 1rem !important;
  }

  html[dir="rtl"] #site-nav .logo-wrap {
    order: 1 !important;
    flex: 0 0 auto !important;
    gap: 0.6rem !important;
  }

  html[dir="rtl"] #site-nav .logo-icon {
    width: 34px !important;
    height: 34px !important;
  }

  html[dir="rtl"] #site-nav .logo-brand {
    font-size: 1.02rem !important;
  }

  html[dir="rtl"] #site-nav .nav-links-desktop {
    order: 2 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: center !important;
    gap: clamp(0.35rem, 1vw, 0.8rem) !important;
  }

  html[dir="rtl"] #site-nav .nav-link {
    padding-inline: 0.55rem !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  html[dir="rtl"] #site-nav .nav-right-desktop {
    order: 3 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 0.42rem !important;
  }

  html[dir="rtl"] #site-nav .nav-right-mobile {
    display: none !important;
  }

  html[dir="rtl"] #site-nav .nav-b2b {
    display: none !important;
  }

  html[dir="rtl"] #site-nav .lang-pill a {
    padding-inline: 0.5rem !important;
    font-size: 0.72rem !important;
  }

  html[dir="rtl"] #site-nav .nav-cta {
    padding-inline: 0.8rem !important;
    font-size: 0.76rem !important;
  }
}

html[dir="rtl"] #hero.hero--centered .hero-title--rtl {
  direction: rtl !important;
  width: min(100%, 760px) !important;
  max-width: min(100%, 760px) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 0 0.14em !important;
  text-align: start !important;
  text-wrap: normal !important;
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, var(--font-sans), sans-serif !important;
  font-size: clamp(3.65rem, 5.65vw, 6.95rem) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
  padding-block: 0.05em 0.16em !important;
  margin-block: -0.05em -0.04em !important;
}

html[dir="rtl"] #hero.hero--centered .hero-title--rtl .hero-word {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding-block: 0.08em 0.2em !important;
  white-space: nowrap !important;
  direction: rtl !important;
  unicode-bidi: isolate !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
  overflow: visible !important;
  transform: none !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  background-origin: border-box !important;
  background-size: 100% 140% !important;
  background-position: center center !important;
}

@media (max-width: 1023px) {
  html[dir="rtl"] #hero.hero--centered .hero-title--rtl {
    justify-content: center !important;
    max-width: 100% !important;
    font-size: clamp(3rem, 10vw, 5.1rem) !important;
  }
}

@media (max-width: 640px) {
  html[dir="rtl"] #hero.hero--centered .hero-title--rtl {
    gap: 0 0.12em !important;
    font-size: clamp(2.7rem, 14vw, 4.15rem) !important;
    line-height: 1.24 !important;
  }
}

html[dir="rtl"] .hero-cta-arrow,
html[dir="rtl"] .pack-arrow,
html[dir="rtl"] .trust-pill-arrow,
html[dir="rtl"] .ai-channel-arrow,
html[dir="rtl"] .bento-demo-arrow svg,
html[dir="rtl"] .image-tools-mini-flow svg,
html[dir="rtl"] .nav-cta svg {
  transform: scaleX(-1) !important;
}

/* 2026 booking screen: server-side Cal proxy, no exposed API key. */
.booking-section {
  position: relative !important;
  padding-block: clamp(5rem, 8vw, 8rem) !important;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F7FBFA 48%, #FFFFFF 100%) !important;
  overflow: hidden !important;
}

.booking-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 6% auto auto 50% !important;
  width: min(56rem, 78vw) !important;
  height: min(56rem, 78vw) !important;
  transform: translateX(-50%) !important;
  background:
    radial-gradient(circle at 28% 30%, rgba(16, 185, 129, 0.13), transparent 35%),
    radial-gradient(circle at 72% 42%, rgba(37, 99, 235, 0.10), transparent 34%) !important;
  filter: blur(26px) !important;
  pointer-events: none !important;
}

.booking-shell {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr) !important;
  gap: clamp(1.25rem, 4vw, 4.5rem) !important;
  align-items: center !important;
  width: min(100%, 110rem) !important;
  margin-inline: auto !important;
}

.booking-copy {
  max-width: 38rem !important;
}

.booking-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 0 1.1rem !important;
  color: #008F6B !important;
  font-size: 0.78rem !important;
  font-family: var(--font-mono) !important;
  font-weight: 760 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.booking-kicker::before {
  content: "" !important;
  width: 0.48rem !important;
  height: 0.48rem !important;
  border-radius: 999px !important;
  background: #00B887 !important;
  box-shadow: 0 0 0 5px rgba(0, 184, 135, 0.12) !important;
}

.booking-title {
  margin: 0 !important;
  color: #0B1324 !important;
  font-size: clamp(2.4rem, 4vw, 4.7rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  font-weight: 850 !important;
}

.booking-lead {
  margin: 1.15rem 0 0 !important;
  color: #334155 !important;
  font-size: clamp(1.02rem, 1.24vw, 1.24rem) !important;
  line-height: 1.7 !important;
  max-width: 35rem !important;
}

.booking-proof {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.7rem !important;
  margin-top: 1.6rem !important;
}

.booking-proof span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.46rem !important;
  min-height: 2.55rem !important;
  padding: 0.56rem 0.78rem !important;
  border-radius: 999px !important;
  color: #1E293B !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
  font-size: 0.86rem !important;
  font-weight: 720 !important;
  white-space: normal !important;
}

.booking-proof svg {
  width: 1rem !important;
  height: 1rem !important;
  flex: 0 0 1rem !important;
  fill: none !important;
  stroke: #00A878 !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.booking-panel {
  position: relative !important;
  padding: clamp(1rem, 2vw, 1.4rem) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,252,251,0.92)) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255,255,255,0.8) inset !important;
}

.booking-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(135deg, rgba(0, 184, 135, 0.10), transparent 34%),
    linear-gradient(315deg, rgba(37, 99, 235, 0.08), transparent 38%) !important;
}

.booking-panel > * {
  position: relative !important;
  z-index: 1 !important;
}

.booking-panel-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
}

.booking-panel-top h3 {
  margin: 0.25rem 0 0 !important;
  color: #101827 !important;
  font-size: clamp(1.25rem, 1.5vw, 1.55rem) !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

.booking-step-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2rem !important;
  height: 1.45rem !important;
  padding-inline: 0.42rem !important;
  border-radius: 999px !important;
  color: #007A5D !important;
  background: rgba(0, 184, 135, 0.10) !important;
  border: 1px solid rgba(0, 184, 135, 0.18) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  letter-spacing: 0.08em !important;
}

.booking-live-dot {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.42rem !important;
  min-height: 2.25rem !important;
  padding: 0.48rem 0.72rem !important;
  border-radius: 999px !important;
  color: #005F49 !important;
  background: #E9FFF8 !important;
  border: 1px solid rgba(0, 168, 120, 0.18) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
}

.booking-live-dot::before {
  content: "" !important;
  width: 0.5rem !important;
  height: 0.5rem !important;
  border-radius: 999px !important;
  background: #00B887 !important;
  box-shadow: 0 0 0 5px rgba(0, 184, 135, 0.12) !important;
}

.booking-field {
  display: grid !important;
  gap: 0.42rem !important;
  min-width: 0 !important;
}

.booking-field > span {
  color: #64748B !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.booking-field input,
.booking-field select,
.booking-field textarea {
  width: 100% !important;
  min-width: 0 !important;
  color: #0F172A !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  outline: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.booking-field input,
.booking-field select {
  min-height: 3.05rem !important;
  padding: 0.78rem 0.9rem !important;
}

.booking-field textarea {
  resize: vertical !important;
  min-height: 5.8rem !important;
  padding: 0.82rem 0.9rem !important;
  line-height: 1.55 !important;
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
  border-color: rgba(0, 168, 120, 0.46) !important;
  box-shadow:
    0 0 0 4px rgba(0, 184, 135, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  background: #FFFFFF !important;
}

.booking-date-block,
.booking-form {
  display: grid !important;
  gap: 0.85rem !important;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(15, 23, 42, 0.075) !important;
}

.booking-block-head {
  display: flex !important;
  align-items: center !important;
  gap: 0.58rem !important;
  color: #1E293B !important;
  font-size: 0.95rem !important;
}

.booking-days {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
}

.booking-day {
  display: grid !important;
  place-items: center !important;
  gap: 0.12rem !important;
  min-height: 4.1rem !important;
  padding: 0.55rem 0.35rem !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.booking-day span {
  font-size: 0.72rem !important;
  color: #64748B !important;
  font-weight: 720 !important;
  max-width: 100% !important;
}

.booking-day strong {
  color: #0F172A !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
}

.booking-day:hover,
.booking-time:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(0, 168, 120, 0.30) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

.booking-day.is-active,
.booking-time.is-active {
  color: #042016 !important;
  background: linear-gradient(135deg, #DFFFF4, #FFFFFF) !important;
  border-color: rgba(0, 168, 120, 0.42) !important;
  box-shadow:
    0 14px 30px rgba(0, 168, 120, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

.booking-times {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  min-height: 3.2rem !important;
}

.booking-time {
  min-height: 2.8rem !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  color: #172033 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.booking-empty {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0.9rem !important;
  border-radius: 14px !important;
  color: #64748B !important;
  background: rgba(241, 245, 249, 0.72) !important;
  border: 1px dashed rgba(15, 23, 42, 0.12) !important;
  font-size: 0.94rem !important;
  text-align: center !important;
}

.booking-skeleton {
  min-height: 2.8rem !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, #EEF4F4, #FFFFFF, #EEF4F4) !important;
  background-size: 220% 100% !important;
  animation: bookingSkeleton 1.15s ease-in-out infinite !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

@keyframes bookingSkeleton {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.booking-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
}

.booking-field--wide {
  grid-column: 1 / -1 !important;
}

.booking-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65rem !important;
  min-height: 3.35rem !important;
  padding: 0.85rem 1.1rem !important;
  border-radius: 16px !important;
  color: #042016 !important;
  background: linear-gradient(135deg, #36F0BE, #00A878) !important;
  border: 1px solid rgba(0, 168, 120, 0.40) !important;
  box-shadow:
    0 16px 34px rgba(0, 168, 120, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  font-size: 1rem !important;
  font-weight: 860 !important;
  cursor: pointer !important;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important;
}

.booking-submit svg {
  width: 1.1rem !important;
  height: 1.1rem !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.booking-submit:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow:
    0 20px 42px rgba(0, 168, 120, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

.booking-submit:disabled {
  cursor: not-allowed !important;
  opacity: 0.52 !important;
  filter: grayscale(0.18) !important;
}

.booking-status {
  min-height: 1.35rem !important;
  margin: 0 !important;
  color: #64748B !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

.booking-status[data-kind="success"] {
  color: #00815F !important;
  font-weight: 760 !important;
}

.booking-status[data-kind="error"] {
  color: #BE123C !important;
  font-weight: 760 !important;
}

html[dir="rtl"] .booking-shell,
html[dir="rtl"] .booking-panel,
html[dir="rtl"] .booking-copy {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .booking-kicker,
html[dir="rtl"] .booking-proof,
html[dir="rtl"] .booking-panel-top,
html[dir="rtl"] .booking-block-head {
  direction: rtl !important;
}

html[dir="rtl"] .booking-submit svg {
  transform: scaleX(-1) !important;
}

@media (max-width: 1100px) {
  .booking-shell {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .booking-copy {
    max-width: 48rem !important;
  }
}

@media (max-width: 720px) {
  .booking-section {
    padding-block: 4rem !important;
  }

  .booking-panel {
    padding: 0.82rem !important;
    border-radius: 22px !important;
  }

  .booking-panel-top {
    align-items: flex-start !important;
  }

  .booking-days {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .booking-times,
  .booking-form-grid {
    grid-template-columns: 1fr !important;
  }

  .booking-title {
    font-size: clamp(2.05rem, 11vw, 3rem) !important;
  }
}

@media (max-width: 430px) {
  .booking-days {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .booking-live-dot {
    display: none !important;
  }
}