/* ============================================================
     TYPOGRAPHY SYSTEM v4, Hanken Grotesk (sans-only)
     ============================================================
     Sans/display/headings/body/UI: Hanken Grotesk (variable 400-700)
     Labels, captions and data: Google Sans with tabular figures
     (Marketing pages are sans-only per BAU AI Typography Spec.)
     ============================================================
     All fonts self-hosted (woff2), free OFL for commercial use.
     Inspired by Vercel, Linear, Sana Labs design systems.
     ============================================================ */

  /* ---------- Font loading note ----------
     Geist + Geist Mono + Instrument Serif are all loaded
     via Google Fonts at the top of <head>. No self-hosted
     files required. Fonts are free for commercial use.
  ------------------------------------------------------ */

  /* ---------- Font stacks (CSS variables) ----------
     Primary: Geist (sans) + Instrument Serif (display serif) + Geist Mono.
     Designed for AI-native SaaS, modern, calm, sophisticated.
     Inspired by Vercel, Linear, Sana Labs typography systems.
  ----------------------------------------------------- */
  :root {
    /* Sans: display, headings, UI, body, navigation, buttons, forms, cards */
    --font-sans: 'Google Sans',
                 -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 system-ui, Roboto, Arial, sans-serif;

    /* Marketing pages are sans-only, the "serif" token now maps to the
       sans display face so legacy .serif/.section-h markup renders in
       Hanken Grotesk (see Typography Spec §2). */
    --font-serif: 'Google Sans',
                  -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  system-ui, Roboto, Arial, sans-serif;

    /* Labels and data: same typeface as body, tabular figures */
    --font-mono: 'Google Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,Arial,sans-serif;
  }

  /* ---------- Global type rendering settings ---------- */
  html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    overflow-x: clip;
  }

  /* ---------- Display / heading defaults, Hanken Grotesk (sans-only) ---------- */
  .serif,
  h1.serif,
  h2.serif,
  h3.serif,
  h4.serif,
  [data-h4].serif,
  .section-h,
  .stat-num {
    font-family: var(--font-sans) !important;
    font-weight: 600;                 /* Hanken Grotesk Semibold */
    font-style: normal !important;    /* override legacy inline italic */
    font-feature-settings: 'kern' 1, 'liga' 1;
  }

  /* Display sizes: tight tracking + tall leading per spec */
  .section-h,
  h1.serif {
    letter-spacing: -0.025em;
    line-height: 1.02;
  }

  /* Headline accents stay upright (sans-only), only their colour differs */
  .serif em, .section-h em, h1 em, h2 em, h3 em, h4 em, [data-h4] em {
    font-style: normal;
  }

  /* Inline emphasis in body copy remains italic (synthetic oblique) */
  p em, li em, p i, li i, blockquote em {
    font-style: normal;
  }

  /* Global: no italic anywhere */
  *, *::before, *::after, em, i { font-style: normal !important; }

  /* ---------- Hanken Grotesk body defaults ---------- */
  body, p, span, li, a, button, input, textarea, select, label {
    font-family: var(--font-sans);
  }

  /* Slightly looser leading for heavy German copy (Spec §4) */
  body {
    letter-spacing: -0.005em;
    line-height: 1.55;
  }

  /* Sans-serif headings (when serif is not used) */
  h1:not(.serif), h2:not(.serif), h3:not(.serif),
  h4:not(.serif),
  [data-h4]:not(.serif), h5:not(.serif), h6:not(.serif) {
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  /* ---------- Label and data refinement (one typeface site-wide) ---------- */
  .mono,
  .eyebrow, .eyebrow-center,
  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  /* Strong text uses Geist's medium/semibold weights */
  strong, b, .font-medium {
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  .font-semibold {
    font-weight: 600;
    letter-spacing: -0.01em;
  }


html { scroll-behavior: smooth; scroll-padding-top: 80px; }

  /* ============================================================
     COLOR SYSTEM, Bold accents on warm cream
     ============================================================
     Saturated brand accents (purple/slate/amber) on warm cream
     backgrounds. Bolder, more confident tone.
     ============================================================ */
  :root {
    /* Foundation, soft off-black + warm neutrals */
    --ink:          #0A0A0B; /* warm soft off-black (text + dark surfaces) */
    --ink-soft:     #1A1A1F; /* slightly lighter ink for layered dark surfaces */
    --ink-deeper:   #0F0F12; /* deepest dark for layering on dark sections */

    /* Light backgrounds, refined warm off-white */
    --cream:        #FFFFFF; /* primary light background (pure white) */
    --cream-dim:    #FFFFFF; /* secondary surface (cool light gray) */
    --cream-deep:   #ECEEF2; /* nested/deep surface (cool gray) */

    /* Text hierarchy */
    --muted:        #0A0A0B; /* secondary text: brand black, no grey text */
    --muted-soft:   #0A0A0B; /* tertiary text + labels: brand black */
    --on-dark:      #F2F3F5; /* primary text on dark surfaces */
    --on-dark-mute: #9B978E; /* secondary text on dark */

    /* Borders, extremely subtle */
    --border:        #E9EAEE; /* default low-contrast border */
    --border-strong: #D8DAE0; /* emphasis border */
    --border-dark:   #1F1F23; /* border on dark surfaces */

    /* Accent: Clara (muted lavender-stone, premium) */
    --purple:        #5000A8;
    --purple-bright: #7563A0;
    --purple-soft:   #EDE3F9;
    --purple-glow:   rgba(80, 0, 168, 0.10);

    /* Accent: Dora (warm graphite slate) */
    --slate:        #424B5A;
    --slate-soft:   #E0E2E6;
    --slate-glow:   rgba(66, 75, 90, 0.12);

    /* Accent: Nova (muted bronze, sophisticated) */
    --amber:        #C97B3F;
    --amber-soft:   #F7ECE4;
    --amber-glow:   rgba(201, 123, 63, 0.12);

    /* Status colors, muted, never alarming */
    --green:        #2D7A4F; /* muted forest */
    --red:          #B14242; /* muted terracotta */
  }
  * { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  .serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.025em; }
  .mono { font-family: var(--font-mono); }
  body {
    background: var(--cream);
    color: var(--ink);
    font-size: 16.5px; /* slightly increased base for premium reading */
    font-weight: 400;
  }

  /* Color utils */
  .bg-ink { background: var(--ink); }
  .bg-ink-soft { background: var(--ink-soft); }
  .bg-cream { background: var(--cream); }
  .bg-cream-dim { background: var(--cream-dim); }
  .bg-purple-brand { background: var(--purple); }
  /* hover: variant, Tailwind never compiled `hover:bg-purple-brand` (purple-brand
     isn't a theme color), so white-bg buttons with hover:text-cream turned the text
     white on an unchanged cream bg. Polyfill the hover bg here. */
  .text-ink { color: var(--ink); }
  .text-cream { color: var(--cream); }
  .text-muted { color: var(--muted); }
  .border-cream { border-color: var(--border); }
  .border-strong { border-color: var(--border-strong); }
  .border-dark { border-color: var(--border-dark); }

  /* Subtle grain texture */
  .grain::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.035; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Animated background glow */
  .bg-glow {
    position: absolute; pointer-events: none; border-radius: 50%;
    filter: blur(80px); opacity: 0.4;
    animation: float 12s ease-in-out infinite;
  }
  @keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.1); }
  }

  /* Premium scroll reveal */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
  .reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
  .reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
  .reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }
  .reveal-stagger > *:nth-child(5) { transition-delay: 320ms; }
  .reveal-stagger > *:nth-child(6) { transition-delay: 400ms; }

  /* Marquee */
  @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Reverse marquee */

  /* Cards */

  /* Pricing card */
  .pricing-card {
    background: var(--cream);
    border: 1px solid var(--border);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pricing-card:hover { border-color: var(--ink); transform: translateY(-2px); }
  .pricing-card.featured {
    background: var(--ink); color: var(--cream);
    border-color: var(--ink);
    box-shadow: 0 30px 60px -30px var(--purple-glow);
  }

  /* Tabs */

  /* Accordion */
  .accordion-item { border-bottom: 1px solid var(--border); }
  .accordion-trigger { cursor: pointer; }
  .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .accordion-content.open { max-height: 600px; }
  .accordion-icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .accordion-trigger.open .accordion-icon { transform: rotate(45deg); }

  /* Mockup */
  .mockup {
    background: #FAFBFC;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(10,10,11,0.18), 0 12px 24px -12px rgba(10,10,11,0.08);
  }

  /* Risk states */

  /* Bars */

  /* ============================================================
     "Built for" / audience grid
     Nine profession cards moved from footer to a dedicated section
     ============================================================ */

  /* Soft aurora glow blobs behind the section title for ambient depth */

  /* Mouse-tracked glow position */

  /* Reduced-motion: drop the spring rotate */

  /* ============================================================
     Hero mockup card, animated reveal sequence
     Plays once when the parent .reveal becomes .reveal.in
     ============================================================ */

  /* Progress bar: animates from 0 → its set width when card reveals */
  /* Shimmer pulse traveling across the fill */

  /* Findings rows: stagger fade-slide in */

  /* Final recommendation pill: scale-pop in last */

  /* Agent chip dot pulses subtly forever */

  /* Respect reduced motion */

  /* ============================================================
     Dora mockup animation, contract scan + stagger + flag pulse
     ============================================================ */

  /* Contract excerpt: relative container for the scan line */

  /* Scan line: thin purple/slate gradient sweeps top → bottom once */

  /* Contract lines stagger in from left as scan passes */

  /* Flagged clauses get a one-shot ring pulse after stagger completes */

  /* Risk findings rows: stagger in after contract clauses settle */

  /* "Geprüft" badge: subtle pulse on the indicator dot, infinite */

  /* Reduced motion: keep everything visible, drop the animations */

  /* Nav */
  /* Sticky top header: pins the announcement bar + nav together on scroll */

  /* Premium nav row height, link weight, VgV badge, CTA button */
  .nav-row { height: 4.75rem; }
  .nav-links > a,
  .nav-links .dropdown-trigger { font-weight: 500; }
  .nav-cta {
    display: inline-flex; align-items: center; gap: 0.48rem;
    padding: 0.58rem 1.25rem; border-radius: 100px;
    background: var(--ink); color: var(--cream);
    font-size: 0.875rem; font-weight: 600; white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 18px -8px rgba(10,10,11,0.55);
    transition: background 0.25s cubic-bezier(0.16,1,0.3,1),
                transform 0.25s cubic-bezier(0.16,1,0.3,1),
                box-shadow 0.25s;
  }
  .nav-cta svg { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); flex-shrink: 0; }
  .nav-cta:hover {
    background: var(--purple);
    transform: translateY(-1.5px);
    box-shadow: 0 10px 30px -12px rgba(80,0,168,0.6);
  }
  .nav-cta:hover svg { transform: translateX(3px); }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .nav-blur {
    /* 12px reads visually identical at 0.82 alpha but costs roughly half the
       per-frame filter work while content scrolls beneath the sticky nav. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255,255,255, 0.82);
  }

  /* KI-Brain: highlighted nav item. A filled pill between the plain
     text links, designed to pull the eye without leaving the
     ink/purple/cream system. Hover floods it purple. */

  /* Hover/focus mini-introduction for the Brain nav item. A small product
     card, not a browser tooltip: white surface, hairline border, soft
     depth, restrained fade + rise. Injected by main.js; pointer-events
     none so it explains without intercepting. */


  /* Compliance chips */

  /* Hover underlines */
  .hover-line { position: relative; }
  .hover-line::after {
    content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hover-line:hover::after { transform: scaleX(1); }

  /* Agents dropdown menu */
  .agents-dropdown { position: relative; }
  .dropdown-trigger {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: none; border: 0; padding: 0;
    font: inherit; color: inherit; cursor: pointer;
    position: relative;
  }
  .dropdown-trigger::after {
    content: ''; position: absolute; bottom: -3px; left: 0; right: 14px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .agents-dropdown:hover .dropdown-trigger::after,
  .agents-dropdown.open .dropdown-trigger::after { transform: scaleX(1); }
  .dropdown-trigger .chevron {
    width: 10px; height: 10px; opacity: 0.55;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }
  .agents-dropdown:hover .dropdown-trigger .chevron,
  .agents-dropdown.open .dropdown-trigger .chevron {
    transform: rotate(180deg); opacity: 1;
  }
  /* Invisible hover bridge to prevent dropdown closing in gap */
  .agents-dropdown::after {
    content: ''; position: absolute;
    top: 100%; left: -20px; right: -20px; height: 18px;
  }
  .dropdown-panel {
    position: absolute; top: calc(100% + 16px); left: 50%;
    transform: translateX(-50%) translateY(-8px) scale(0.98);
    min-width: 340px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 28px 60px -18px rgba(10, 10, 11, 0.22), 0 6px 16px -4px rgba(10, 10, 11, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s 0.32s;
    z-index: 100;
  }
  .agents-dropdown:hover .dropdown-panel,
  .agents-dropdown:focus-within .dropdown-panel,
  .agents-dropdown.open .dropdown-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    transition-delay: 0s;
  }
  .dropdown-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none; color: var(--ink);
    transition: background-color 0.18s ease, transform 0.18s ease;
  }
  .dropdown-item:hover { background: var(--cream-dim); transform: translateX(2px); }
  .dropdown-item.active { background: var(--cream-deep); }
  .dropdown-item.active .agent-name::after {
    content: ''; display: inline-block;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--purple); margin-left: 8px;
    box-shadow: 0 0 0 3px rgba(80,0,168,0.18);
    transform: translateY(-2px);
  }
  .dropdown-item .agent-dot {
    width: 9px; height: 9px; border-radius: 50%;
    flex-shrink: 0; margin-top: 6px;
    position: relative; box-shadow: 0 0 0 4px currentColor; opacity: 0.9;
  }
  .dropdown-item .agent-dot.dot-clara { background: var(--purple); color: rgb(80,0,168); }
  .dropdown-item .agent-dot.dot-dora { background: var(--slate); color: rgb(66,75,90); }
  .dropdown-item .agent-dot.dot-nova { background: var(--amber); color: rgb(201,123,63); }
  .dropdown-item .agent-dot.dot-future { background: var(--muted); color: #0A0A0B; opacity: 0.6; }
  .dropdown-item .agent-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
  }
  .dropdown-item .agent-name {
    font-weight: 600; font-size: 14px; line-height: 1.3;
    margin-bottom: 3px; color: var(--ink);
    letter-spacing: -0.01em;
  }
  .dropdown-item .agent-role {
    font-size: 12.5px; color: var(--muted);
    line-height: 1.4;
  }
  .dropdown-divider {
    height: 1px; background: var(--border);
    margin: 8px 6px;
  }
  .dropdown-item-future .agent-name {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--muted);
  }
  .dropdown-item-future .agent-name::after {
    content: '→'; font-weight: 400;
    transition: transform 0.2s ease;
  }
  .dropdown-item-future:hover .agent-name::after { transform: translateX(3px); }

  /* Agent avatar frame */
  /* badge hidden, avatar is identified by adjacent name text */

  /* Hero H1 - confident sans, no overflow */

  /* Section heading */
  .section-h {
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.02;
  }
  .section-h .accent {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.03em;
    background-image: linear-gradient(180deg,
      transparent 81%,
      rgba(80, 0, 168, 0.18) 81%,
      rgba(80, 0, 168, 0.18) 92%,
      transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-repeat: no-repeat;
    background-position: left center;
  }

  /* ── Problem comparison, premium before/after cards ── */
  /* animated top sheen on the BAU AI card */

  /* ── Platform header, native-standards capability strip ── */

  /* Number counter */
  .num-counter { display: inline-block; font-variant-numeric: tabular-nums; }

  /* Comparison table */

  /* Slider input */
  input[type=range].premium-slider {
    -webkit-appearance: none; width: 100%; height: 4px; border-radius: 999px;
    background: var(--border); outline: none;
  }
  input[type=range].premium-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--purple); cursor: pointer;
    box-shadow: 0 0 0 4px rgba(80,0,168,0.15);
    transition: transform 0.2s ease;
  }
  input[type=range].premium-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
  input[type=range].premium-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--purple); cursor: pointer; border: none;
  }

  /* Timeline */

  /* Pricing toggle */

  /* Lang switch */
  .lang-switch {
    display: inline-flex; align-items: center; gap: 0;
    border: 1px solid var(--border-strong);
    border-radius: 999px; padding: 2px;
    background: var(--cream);
    font-size: 11px;
    letter-spacing: 0;
  }
  .lang-switch button {
    padding: 4px 10px; border-radius: 999px;
    background: transparent; border: none; cursor: pointer;
    color: var(--muted); font-weight: 500;
    font-family: var(--font-mono);
    transition: all 0.25s ease;
  }
  .lang-switch button.active { background: var(--ink); color: var(--cream); }

  /* Floating elements */

  /* Pulse */
  .pulse-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--green);
    position: relative;
  }
  .pulse-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: var(--green); animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.8); opacity: 0; }
  }

  /* Agent name pill */

  /* Logo strip pill */

  /* Section divider */

  /* ============================================================
     EDITORIAL PROBLEM SECTION COMPONENTS
     ============================================================ */

  /* Paired comparison: TODAY ←→ WITH BAU AI rows */

  /* Subtle hover-to-emphasis on each row */

  /* Mobile: stack vertically with a connecting purple rule */

  /* Closing verdict block (italic pull-quote with purple rule) */

  /* Animated underline accent for headlines - multi-line safe */
  .ul-anim {
    display: inline;
    background-image: linear-gradient(180deg,
      transparent 81%,
      rgba(80, 0, 168, 0.18) 81%,
      rgba(80, 0, 168, 0.18) 92%,
      transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    animation: hl-sweep 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  }
  @keyframes hl-sweep {
    to { background-size: 100% 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ul-anim {
      animation: none !important;
      background-size: 100% 100% !important;
    }
  }

  /* Premium agent card motion */
  .agent-card {
    position: relative;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }
  .agent-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), var(--card-glow, rgba(80, 0, 168, 0.06)), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }
  .agent-card:hover::before { opacity: 1; }
  /* Hover lift is shadow-only (see section 7). No transform on the text
     container, so the compositor never re-rasters a moved text layer, which
     is what dropped the stats/bullets on hover in accelerated Chrome. */
  .agent-card.clara { --card-glow: rgba(80, 0, 168, 0.08); }
  .agent-card.dora { --card-glow: rgba(66, 75, 90, 0.08); }
  .agent-card.nova { --card-glow: rgba(201, 123, 63, 0.10); }

  /* Avatar wrap - keep simple positioning, no conic gradient halo */

  /* Badge pulse */

  /* Agent reveal entrance */
  .agent-card.reveal { transform: translateY(40px) scale(0.96); }
  .agent-card.reveal.in { transform: translateY(0) scale(1); }

  /* Roadmap, upcoming agents grid */

  /* Phase pipeline */ /* fills through the 3 live agents */

  /* Cards grid */

  /* Agent stats panel (matches pricing-card stat row pattern) */
  .agent-stat {
    position: relative;
    text-align: center;
    padding: 2px 6px;
  }
  .agent-stat + .agent-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 1px;
  }
  .agent-stat-value {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 1.65rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }

  @media (max-width: 768px) {
    .section-h { font-size: 2.5rem !important; }
    .agent-stat-value { font-size: 1.35rem; }
  }

  /* Trust seal */
  .trust-seal {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: rgba(45, 122, 79, 0.08);
    border: 1px solid rgba(45, 122, 79, 0.2);
    border-radius: 999px;
    font-size: 11px; letter-spacing: 0;
    color: var(--green); text-transform:none;
    font-weight: 600;
    font-family: var(--font-mono);
  }

  /* ========== MERGED AGENT SECTIONS ========== */
  /* Per-agent color theming via data-agent attribute */
  .agent-section { --agent: var(--purple); --agent-soft: var(--purple-soft); --agent-glow: var(--purple-glow); --agent-hl: rgba(80, 0, 168, 0.18); }
  .agent-section[data-agent="clara"] { --agent: var(--purple); --agent-soft: var(--purple-soft); --agent-glow: var(--purple-glow); --agent-hl: rgba(80, 0, 168, 0.18); }
  .agent-section[data-agent="dora"]  { --agent: var(--slate);  --agent-soft: var(--slate-soft);  --agent-glow: var(--slate-glow); --agent-hl: rgba(66, 75, 90, 0.18); }
  .agent-section[data-agent="nova"]  { --agent: var(--amber);  --agent-soft: var(--amber-soft);  --agent-glow: var(--amber-glow); --agent-hl: rgba(201, 123, 63, 0.18); }
  .agent-section[data-agent="theo"]  { --agent: #0F7C8C; --agent-soft: #E2F2F3; --agent-glow: rgba(15, 124, 140, 0.14); --agent-hl: rgba(15, 124, 140, 0.18); }

  /* Agent section base styles */
  .agent-section { position: relative; overflow: hidden; }
  .agent-section + .agent-section { border-top: 1px solid var(--border); }
  .agent-section .bg-agent { background: var(--agent); }

  /* Hero h1 in agent section (smaller than agent page hero) */
  .agent-section .section-h {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(1.85rem, 4vw, 2.85rem);
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.02em;
  }

  /* Agent ID chip */
  .agent-section .breathe { animation: breathe-agent 4s ease-in-out infinite; }
  @keyframes breathe-agent { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

  /* Animated underline behind accent text (agent section variant) */
  .agent-section .ul-anim {
    display: inline;
    background-image: linear-gradient(180deg,
      transparent 81%,
      var(--agent-hl) 81%,
      var(--agent-hl) 92%,
      transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    animation: hl-agent-sweep 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    position: static;
  }
  .agent-section .ul-anim::after { display: none; }
  @keyframes hl-agent-sweep {
    to { background-size: 100% 100%; }
  }

  /* Pulse dot */
  .agent-section .pulse-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--green);
    position: relative;
  }
  .agent-section .pulse-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: var(--green); animation: pulse-agent 2s ease-in-out infinite;
  }
  @keyframes pulse-agent {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.8); opacity: 0; }
  }

  /* Mockup card */
  .agent-section .mockup {
    background: white; border-radius: 16px; padding: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 30px 60px -20px rgba(10, 10, 11, 0.18), 0 8px 20px -6px rgba(10, 10, 11, 0.08);
    position: relative;
  }

  /* Ledger-style rows (appshot language): crisp outlined items,
     semantic color only in the glyph, no tinted washes. */

  /* Problem card with mouse-tracked glow */

  /* Feature numbered blocks */

  /* ============================================================
     PROCESS STEP FLOW (connected cards with animated arrows)
     ============================================================ */

  /* Step number circle */

  /* Animated dashed connector line (between cards, desktop only) */

  /* Animated arrow head */

  /* Stack vertically below lg breakpoint, hide horizontal connectors */

  /* Reduced motion: connectors visible but static */

  /* ============================================================
     OUTCOME CARDS (refined, editorial)
     ============================================================ */

  /* Tiny brand-color dot at the top center, subtle identification */

  /* Hover: gentle lift, slightly stronger border, dot becomes more visible */

  /* Number, italic Fraunces in dark ink, not brand color (calmer) */

  /* Label, kept muted for restraint */

  /* Stagger reveal, gentler delay */

  /* Reduced motion */

  /* ============================================================
     PREMIUM STATS ROW (cards with motion + agent-color theming)
     ============================================================ */
  .agent-section .stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  .agent-section .stat-cell {
    background: var(--cream);
    padding: 38px 24px 28px;
    text-align: center;
    border-radius: 16px;
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.45s ease;
  }

  /* Top brand-color accent bar (animates in on reveal) */
  .agent-section .stat-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 36px; height: 3px;
    background: var(--agent);
    border-radius: 0 0 4px 4px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s,
                width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
  }

  /* Soft radial agent-color glow emanating from top */
  .agent-section .stat-cell::after {
    content: '';
    position: absolute;
    top: -80px; left: 50%;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--agent-glow), transparent 65%);
    opacity: 0.55;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.55s ease, top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
  }

  /* Reveal-in state */
  .reveal.in .agent-section .stat-cell,
  .agent-section .reveal.in .stat-cell,
  section.reveal.in .stat-cell {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal.in .agent-section .stat-cell::before,
  .agent-section .reveal.in .stat-cell::before,
  section.reveal.in .stat-cell::before {
    transform: translateX(-50%) scaleX(1);
  }
  section.reveal.in .stat-cell:nth-child(1) { transition-delay: 0.05s; }
  section.reveal.in .stat-cell:nth-child(2) { transition-delay: 0.15s; }
  section.reveal.in .stat-cell:nth-child(3) { transition-delay: 0.25s; }
  section.reveal.in .stat-cell:nth-child(4) { transition-delay: 0.35s; }

  /* Hover state */
  .agent-section .stat-cell:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px -10px rgba(10, 10, 11, 0.18),
                0 4px 12px -2px rgba(10, 10, 11, 0.08);
  }
  .agent-section[data-agent="clara"] .stat-cell:hover { border-color: rgba(80, 0, 168, 0.30); }
  .agent-section[data-agent="dora"]  .stat-cell:hover { border-color: rgba(66, 75, 90, 0.35); }
  .agent-section[data-agent="nova"]  .stat-cell:hover { border-color: rgba(201, 123, 63, 0.35); }
  .agent-section .stat-cell:hover::before { width: 64px; }
  .agent-section .stat-cell:hover::after { opacity: 0.85; top: -50px; }

  /* Number, large italic Fraunces in agent color */
  .agent-section .stat-num {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 500;
    font-size: clamp(2.5rem, 4.4vw, 3.25rem);
    color: var(--agent);
    line-height: 1;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .agent-section .stat-cell:hover .stat-num {
    transform: scale(1.04);
  }

  /* Label */
  .agent-section .stat-label {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    font-weight: 500;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 768px) {
    .agent-section .stats-row {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .agent-section .stat-cell {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .agent-section .stat-cell::before {
      transform: translateX(-50%) scaleX(1) !important;
      transition: none !important;
    }
  }

  /* ===== Clara-specific: scan-line animation ===== */

  /* ===== Dora-specific: contract lines + highlight animation ===== */
  .agent-section[data-agent="dora"] .clause-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 4px;
    background: var(--slate-soft);
    font-family: var(--font-mono);
    font-size: 10.5px; color: var(--slate);
    letter-spacing: 0.02em;
  }

  /* ===== Nova-specific: bid bars + scoring rings ===== */

  /* ----- Bidder comparison row (Nova hero mockup) ----- */

  /* Score ring (SVG-based) used inside Nova plausibility cards */

  /* Legal foundation strip (Dora) */

  /* Card elevated for agent sections (reuses v3 pattern but scoped) */

  /* mono class consistency */
  .agent-section .mono { font-family: var(--font-mono); }
  .agent-section .serif { font-family: var(--font-serif); }
  /* ========== END MERGED AGENT SECTIONS ========== */


  /* ============================================================
     PREMIUM AGENTS SECTION ANIMATIONS
     ============================================================ */

  /* Aurora gradient backdrop */

  /* Headline word stagger */
  .headline-words .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.in .headline-words .word { opacity: 1; transform: translateY(0); }
  .reveal.in .headline-words .word:nth-child(1) { transition-delay: 0.05s; }
  .reveal.in .headline-words .word:nth-child(2) { transition-delay: 0.14s; }
  .reveal.in .headline-words .word:nth-child(3) { transition-delay: 0.23s; }
  .reveal.in .headline-words .word:nth-child(4) { transition-delay: 0.38s; }
  .reveal.in .headline-words .word:nth-child(5) { transition-delay: 0.49s; }
  .reveal.in .headline-words .word:nth-child(6) { transition-delay: 0.62s; }

  /* Italic accent word: clean italic purple with subtle highlight, same as ul-anim elsewhere */
  .headline-words .word.accent {
    color: var(--purple);
    display: inline;
    background-image: linear-gradient(180deg,
      transparent 81%,
      rgba(80, 0, 168, 0.16) 81%,
      rgba(80, 0, 168, 0.16) 92%,
      transparent 92%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0 0.05em;
  }
  .reveal.in .headline-words .word.accent {
    animation: accent-highlight-sweep 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
  }
  @keyframes accent-highlight-sweep {
    to { background-size: 100% 100%; }
  }

  /* Agent card hover (2D only). A previous 3D mouse-tilt using
     perspective + preserve-3d + layered translateZ caused the GPU to drop
     the non-elevated layers (stats, bullet list) on hover in accelerated
     Chrome. Kept flat to stay bug-free. */
  /* Equal-height grid cells: make the inner fill the card and pin the
     "Mehr zu … →" link to the bottom, so shorter cards (Dora, Nova) don't
     leave empty space below the CTA when Clara's longer bullet wraps. */
  .agent-card { display: flex; flex-direction: column; }
  /* Agent reveal entrance */
  .agent-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .agent-card.card-in {
    opacity: 1;
    /* Resolve to no transform (not translateY(0)) so the settled card keeps
       its text off any composited/promoted layer, the slide-up still
       animates because translateY(40px) interpolates to the identity. */
    transform: none;
  }

  /* Avatar orbital satellite dot - hidden for cleaner look */

  /* (previous always-on glow ring removed for cleaner look) */

  /* Stat box shimmer on first reveal */

  /* Stat counter spans (number isolated for animation) */
  .agent-stat-value .num-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
  }

  /* List item stagger + checkmark draw */
  .agent-card ul li {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .agent-card.card-in ul li { opacity: 1; transform: translateX(0); }
  .agent-card.card-in ul li:nth-child(1) { transition-delay: 0.50s; }
  .agent-card.card-in ul li:nth-child(2) { transition-delay: 0.62s; }
  .agent-card.card-in ul li:nth-child(3) { transition-delay: 0.74s; }
  .agent-card.card-in ul li:nth-child(4) { transition-delay: 0.86s; }

  /* Checkmark draw */
  .agent-card ul li svg path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .agent-card.card-in ul li:nth-child(1) svg path { transition-delay: 0.62s; }
  .agent-card.card-in ul li:nth-child(2) svg path { transition-delay: 0.74s; }
  .agent-card.card-in ul li:nth-child(3) svg path { transition-delay: 0.86s; }
  .agent-card.card-in ul li:nth-child(4) svg path { transition-delay: 0.98s; }
  .agent-card.card-in ul li svg path { stroke-dashoffset: 0; }

  /* Constellation line connecting the three agents */

  /* Section subtle parallax for content */
  #agents .max-w-7xl { position: relative; z-index: 2; }

  /* ============================================================
     REDUCED MOTION SUPPORT
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    .reveal.in .headline-words .word.accent {
      animation: none !important;
    }
    .agent-card,
    .agent-card ul li,
    .headline-words .word {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .agent-card ul li svg path {
      stroke-dashoffset: 0 !important;
    }
    .headline-words .word.accent {
      background-size: 100% 100% !important;
      color: var(--purple) !important;
    }
  }


  /* ============================================================
     PREMIUM SECTION EYEBROW LABELS
     ============================================================ */
  .eyebrow,
  .eyebrow-center {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform:none;
    color: var(--purple);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow {
    width: fit-content;
  }
  .eyebrow-center {
    justify-content: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Small purple dot prefix (replaces the 28px line) */
  .eyebrow::before,
  .eyebrow-center::before,
  .eyebrow-center::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--purple);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.4s ease 0.15s,
                transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
  }

  /* The old trailing-dot span no longer needed, leading dot carries the accent */
  .eyebrow .eyebrow-dot { display: none; }

  /* Reveal-driven animations */
  .reveal.in .eyebrow::before,
  .reveal.in .eyebrow-center::before,
  .reveal.in .eyebrow-center::after {
    opacity: 1;
    transform: scale(1);
  }

  /* Fallback: if eyebrow is somehow not inside a reveal, show statically */

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .eyebrow::before,
    .eyebrow-center::before,
    .eyebrow-center::after {
      transform: scale(1) !important;
      opacity: 1 !important;
      transition: none !important;
    }
  }


  /* Agent hero badge inside deep-dive sections, photo avatar + role text */
  .agent-section .agent-hero-badge {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 8px 18px 8px 8px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .agent-section .agent-hero-badge .photo {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--cream-dim);
    box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.08),
                0 4px 12px -3px rgba(10, 10, 11, 0.16);
    position: relative;
  }
  .agent-section .agent-hero-badge .photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    position: relative; z-index: 1;
  }
  .agent-section .agent-hero-badge .photo-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif); font-style: normal; font-weight: 500;
    font-size: 22px;
    background: var(--agent-soft);
    color: var(--agent);
    z-index: 0;
  }
  .agent-section .agent-hero-badge .role {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }





  /* AI icon links in footer */
  .ai-icon-link {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease;
    flex-shrink: 0;
  }
  .ai-icon-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(10, 10, 11, 0.22);
  }
  .ai-icon-link img { display: block; width: 24px; height: 24px; border-radius: 6px; }


  /* ============================================================
     AGENT SECTION BRIDGE (transition into Clara / Dora / Nova)
     ============================================================ */


  /* ============================================================
     PREMIUM FEATURE CARDS (Clara / Dora / Nova × 4 each = 12 cards)
     Unified design system, brand color cascades via [data-agent]
     ============================================================ */

  /* --- Card chrome --- */

  /* Top edge accent bar, scales in on reveal */

  /* Radial glow from top-right, subtle agent color */

  /* Card hover */

  /* --- Feature number label (e.g. "01 · RELEVANCE CHECK") --- */

  /* --- Feature headline polish --- */

  /* Feature paragraph reveal */

  /* --- Card header (mono uppercase label at top of visual) --- */

  /* --- Card rows: stagger reveal + hover --- */

  /* Inline-styled rows: hover micro-interaction */

  /* Risk rows: hover */

  /* --- Progress bar polish (Clara feat 02) --- */
  /* Shimmer pass over the progress bar */

  /* --- Clause-tag (unify across all agents) --- */
  .agent-section .clause-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--agent-soft);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--agent);
    letter-spacing: 0.02em;
    line-height: 1.4;
    flex-shrink: 0;
  }

  /* --- Score-ring reveal animation (Nova feat 02) --- */

  /* --- Team avatar circles (Clara feat 04): subtle scale on row hover --- */

  /* --- Mobile: tighter padding --- */

  /* --- Reduced motion --- */


  /* ============================================================
     PREMIUM AGENT PORTRAITS (adapted from reference design)
     Aurora glow + rotating ring + portrait + pulsing badge +
     floating data cards. Per-agent color cascades via .clara/.dora/.nova
     ============================================================ */

  /* --- Portrait container --- */
  /* square-height fallback for engines without aspect-ratio */

  /* --- Aurora glow behind portrait --- */

  /* --- Concentric rotating ring (sits outside the portrait edges) --- */

  /* --- Portrait image (fills the entire wrap, no gap below) --- */

  /* --- "Agent / Online" badge --- */


  /* --- Agent name + role (sits below portrait, centered) --- */

  /* --- Mobile (< 768px): keep cards inside the portrait area --- */

  /* --- Reduced motion --- */

  /* ============================================================
     PREMIUM STAT CARDS for overview agents
     ============================================================ */

  .agent-stat {
    padding: 4px 8px;
    text-align: center;
    border-right: 1px solid var(--border);
    transition: background 0.3s ease;
  }
  .agent-stat:last-child { border-right: none; }
  .agent-stat:hover .agent-stat-value {
    transform: scale(1.08);
  }
  .agent-card.clara .agent-stat:hover .agent-stat-value { color: var(--purple); }
  .agent-card.dora  .agent-stat:hover .agent-stat-value { color: var(--slate); }
  .agent-card.nova  .agent-stat:hover .agent-stat-value { color: var(--amber); }


  /* ════════════════════════════════════════════════════════════
     PREMIUM POLISH LAYER
     Senior-design refinements applied site-wide.
     Inspired by Linear, Vercel, Stripe, Sana, Cursor.
     ════════════════════════════════════════════════════════════ */

  /* ---------- 1. Motion system ---------- */
  :root {
    --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:    150ms;
    --dur-base:    280ms;
    --dur-slow:    560ms;
    --dur-cinema:  1100ms;
  }

  /* ---------- 2. Global selection + scroll polish ---------- */
  ::selection { background: rgba(80, 0, 168, 0.18); color: inherit; text-shadow: none; }
  ::-moz-selection { background: rgba(80, 0, 168, 0.18); color: inherit; text-shadow: none; }
  /* On dark sections keep selection visible by using lighter purple */
  .pricing-card.featured ::selection,
  .win-plan-v2 ::selection,
  .bg-ink ::selection {
    background: rgba(201, 160, 245, 0.32);
    color: inherit;
  }
  .pricing-card.featured ::-moz-selection,
  .win-plan-v2 ::-moz-selection,
  .bg-ink ::-moz-selection {
    background: rgba(201, 160, 245, 0.32);
    color: inherit;
  }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  /* ---------- 3. Premium button system ----------
     Universal upgrade to any `.inline-flex.rounded-full` button.
     Adds: depth shadow, magnetic hover, subtle shine sweep.
  ------------------------------------------------------------ */
  a.inline-flex.rounded-full,
  button.inline-flex.rounded-full,
  a.inline-flex.items-center.gap-2[class*="bg-ink"],
  a.inline-flex.items-center.gap-2[class*="bg-cream"][href] {
    position: relative;
    isolation: isolate;
    transition:
      transform var(--dur-base) var(--ease-out-expo),
      box-shadow var(--dur-base) var(--ease-out-expo),
      background-color var(--dur-base) var(--ease-out-expo),
      color var(--dur-base) var(--ease-out-expo),
      border-color var(--dur-base) var(--ease-out-expo);
    will-change: transform;
  }
  a.inline-flex.rounded-full:hover,
  button.inline-flex.rounded-full:hover {
    transform: translateY(-1px);
  }
  a.inline-flex.rounded-full:active,
  button.inline-flex.rounded-full:active {
    transform: translateY(0);
    transition-duration: var(--dur-fast);
  }

  /* Primary ink-on-cream / cream-on-ink CTAs get a soft shadow */
  a.bg-ink.rounded-full,
  a.bg-cream.rounded-full {
    box-shadow:
      0 1px 2px rgba(10, 10, 11, 0.06),
      0 4px 16px -4px rgba(10, 10, 11, 0.10);
  }
  a.bg-ink.rounded-full:hover {
    box-shadow:
      0 2px 4px rgba(80, 0, 168, 0.18),
      0 12px 32px -8px rgba(80, 0, 168, 0.32);
  }
  a.bg-cream.rounded-full:hover {
    box-shadow:
      0 2px 4px rgba(255,255,255, 0.18),
      0 12px 32px -8px rgba(80, 0, 168, 0.40);
  }

  /* SVG arrows in CTAs subtly translate on hover */
  a.inline-flex.rounded-full svg,
  button.inline-flex.rounded-full svg {
    transition: transform var(--dur-base) var(--ease-out-expo);
  }
  a.inline-flex.rounded-full:hover svg[viewBox*="24 24"],
  button.inline-flex.rounded-full:hover svg[viewBox*="24 24"] {
    transform: translateX(2px);
  }

  /* ---------- 4. Navigation refinement ---------- */

  /* Refined nav link underline */
  nav .hover-line {
    position: relative;
  }
  nav .hover-line::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 1px;
    background: currentColor;
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform var(--dur-base) var(--ease-out-expo);
  }
  nav .hover-line:hover::after {
    transform-origin: left center;
    transform: scaleX(1);
  }

  /* ---------- 5. Hero typography rhythm ---------- */
  section:first-of-type .section-h,
  section.relative.overflow-hidden:first-of-type h1 {
    letter-spacing: -0.035em;
    line-height: 0.98;
  }
  section.relative.overflow-hidden:first-of-type h1 em,
  section.relative.overflow-hidden:first-of-type h1 .accent {
    font-style: normal;
    color: var(--purple);
  }

  /* ---------- 6. Section rhythm improvements ---------- */
  /* Slightly more breathing room between major sections on desktop */
  @media (min-width: 1024px) {
    section[id]:not(:first-of-type) {
      position: relative;
    }
  }

  /* Hairline section dividers on light/light transitions */
  section.bg-cream-dim + section:not([class*="bg-"]):not([id="cta"]),
  section.bg-cream + section.bg-cream-dim {
    position: relative;
  }

  /* ---------- 7. Agent card chrome polish ---------- */
  .agent-card {
    position: relative;
    transition: box-shadow var(--dur-slow) var(--ease-out-expo);
  }
  .agent-card:hover {
    box-shadow: 0 22px 45px -22px rgba(10, 10, 11, 0.26);
    z-index: 2;
  }
  /* Card edges get a subtle inner highlight on hover */
  .agent-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: 0 0 0 1px transparent inset;
    transition: box-shadow var(--dur-slow) var(--ease-out-expo);
  }
  .agent-card.clara:hover::after { box-shadow: 0 0 0 1px rgba(80, 0, 168, 0.14) inset; }
  .agent-card.dora:hover::after  { box-shadow: 0 0 0 1px rgba(66, 75, 90, 0.14) inset; }
  .agent-card.nova:hover::after  { box-shadow: 0 0 0 1px rgba(201, 123, 63, 0.16) inset; }

  /* Portrait subtly leans into camera on hover */

  /* ---------- 8. Premium pricing cards ---------- */
  #pricing [class*="rounded-"][class*="border"],
  #pricing .pricing-card {
    position: relative;
    transition:
      transform var(--dur-slow) var(--ease-out-expo),
      box-shadow var(--dur-slow) var(--ease-out-expo),
      border-color var(--dur-slow) var(--ease-out-expo);
  }
  #pricing [class*="rounded-"][class*="border"]:hover {
    transform: translateY(-6px);
    box-shadow:
      0 1px 2px rgba(10, 10, 11, 0.04),
      0 20px 48px -16px rgba(10, 10, 11, 0.14);
    border-color: rgba(10, 10, 11, 0.12);
  }

  /* Featured plan visual distinction (uses purple-tinted border) */
  #pricing [class*="border-purple"],
  #pricing [class*="bg-purple"] {
    position: relative;
  }
  #pricing [class*="border-purple"]::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      rgba(80, 0, 168, 0.6) 0%,
      rgba(80, 0, 168, 0.2) 40%,
      transparent 70%
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
  }

  /* ---------- 9. CTA section drama ---------- */
  #cta {
    isolation: isolate;
  }
  #cta:not(.cta-band)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(80, 0, 168, 0.18), transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(201, 123, 63, 0.12), transparent 50%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    animation: cta-aurora 14s var(--ease-out-expo) infinite;
  }
  @keyframes cta-aurora {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.06) translate(-1%, 1%); }
  }
  #cta > *:not(.bg-glow) {
    position: relative;
    z-index: 2;
  }
  #cta .bg-glow {
    z-index: 1;
  }
  #cta .reveal,
  #cta .max-w-5xl {
    position: relative;
    z-index: 3;
  }
  #cta .section-h {
    letter-spacing: -0.04em;
  }
  #cta a.bg-cream:hover {
    background: var(--purple);
    color: var(--cream);
    border-color: transparent;
  }

  /* ---------- 10. Footer hierarchy ---------- */
  footer {
    position: relative;
  }
  footer a {
    transition: color var(--dur-base) var(--ease-out-expo);
  }
  footer .text-muted:hover,
  footer a:hover {
    color: var(--ink);
  }
  /* Subtle separator above footer */
  footer::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(10, 10, 11, 0.10) 20%,
      rgba(10, 10, 11, 0.10) 80%,
      transparent 100%
    );
  }

  /* ---------- 11. Reveal animation upgrade ----------
     Smoother entrance with a soft scale + slide.
  ------------------------------------------------------------ */
  .reveal {
    transition:
      opacity var(--dur-slow) var(--ease-out-expo),
      transform var(--dur-slow) var(--ease-out-expo);
    will-change: opacity, transform;
  }
  /* Stagger for child reveals */
  .reveal[data-d="1"] { transition-delay: 0ms; }
  .reveal[data-d="2"] { transition-delay: 80ms; }
  .reveal[data-d="3"] { transition-delay: 160ms; }
  .reveal[data-d="4"] { transition-delay: 240ms; }
  .reveal[data-d="5"] { transition-delay: 320ms; }

  /* ---------- 12. (Global grain texture removed, caused stacking issues) ---------- */

  /* ---------- 13. (Mobile typography handled by new fluid type system below) ---------- */

  /* ---------- 14. Focus states (accessibility + polish) ---------- */
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 3px;
    border-radius: 4px;
  }
  a.inline-flex.rounded-full:focus-visible,
  button.inline-flex.rounded-full:focus-visible {
    outline-offset: 4px;
    border-radius: 9999px;
  }

  /* ---------- 15. Image loading polish ---------- */
  img {
    transition: opacity var(--dur-base) var(--ease-out-expo);
  }
  img[loading="lazy"]:not([data-loaded]) {
    opacity: 0;
  }
  img[loading="lazy"][data-loaded] {
    opacity: 1;
  }


  /* ════════════════════════════════════════════════════════════
     RESPONSIVE TYPOGRAPHY SYSTEM
     Geist (primary) + Instrument Serif (editorial accents only)
     Fluid scale via clamp(min, preferred, max).
     Inspired by Superside AI Creative, Sana Labs, Linear, Vercel.
     ════════════════════════════════════════════════════════════ */

  :root {
    /* ---- DISPLAY (hero) ---- */
    /* Compact premium scale: hero + subline + CTA fit the first viewport.
       Mobile 34-40px → Tablet ~44px → Desktop max 60px */
    --type-display:    clamp(2.125rem, 3.6vw + 0.5rem, 3.75rem); /* 34 → 60 */
    --type-display-sm: clamp(1.875rem, 3vw + 0.5rem, 3.125rem);  /* 30 → 50 */

    /* ---- SECTION HEADLINES ---- */
    /* Mobile 26-30px → Desktop max 40px */
    --type-h1:         clamp(1.625rem, 2.6vw + 0.5rem, 2.5rem); /* 26 → 40 */
    --type-h2:         clamp(1.375rem, 2vw + 0.5rem, 2rem);     /* 22 → 32 */
    --type-h3:         clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);/* 20 → 28 */
    --type-h4:         clamp(1.125rem, 1vw + 0.5rem, 1.375rem);/* 18 → 22 */

    /* ---- BODY ---- */
    /* Mobile 15-16px → Desktop 16-18px */
    --type-body-lg:    clamp(1rem, 0.4vw + 0.875rem, 1.125rem); /* 16 → 18 */
    --type-body:       clamp(0.9375rem, 0.2vw + 0.875rem, 1rem);/* 15 → 16 */
    --type-body-sm:    0.875rem;   /* 14px, captions */
    --type-caption:    0.8125rem;  /* 13px */
    --type-eyebrow:    0.75rem;    /* 12px, mono labels */
    --type-micro:      0.6875rem;  /* 11px, fine print */

    /* ---- LINE HEIGHTS ---- */
    --lh-display:  0.98;   /* hero, tight cinematic */
    --lh-headline: 1.05;   /* section heads */
    --lh-tight:    1.2;    /* small heads */
    --lh-body:     1.6;    /* readable body */
    --lh-loose:    1.7;    /* generous prose */
    --lh-ui:       1.4;    /* buttons, labels */

    /* ---- LETTER SPACING ---- */
    --ls-display:  -0.04em;   /* hero, very tight */
    --ls-headline: -0.025em;  /* section heads */
    --ls-tight:    -0.015em;  /* small heads */
    --ls-body:     -0.005em;  /* body, calm */
    --ls-ui:       -0.01em;   /* buttons */
    --ls-eyebrow:  0.08em;    /* mono uppercase labels */
    --ls-eyebrow-wide: 0.12em;
  }

  /* ─────────────────────────────────────────────────────────
     APPLY TOKENS TO BODY + ELEMENT SELECTORS
     Override existing utility classes with !important where
     needed to enforce the system across the site.
     ───────────────────────────────────────────────────────── */

  body {
    font-family: var(--font-sans);
    font-size: var(--type-body-lg);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* ---- HERO DISPLAY ----
     Any heading inside the first <section> with .overflow-hidden
     OR explicitly tagged .hero-h gets the display scale. */
  section.relative.overflow-hidden:first-of-type h1 {
    font-size: var(--type-display) !important;
    line-height: var(--lh-display) !important;
    letter-spacing: var(--ls-display) !important;
    font-weight: 500;
  }

  /* ---- SECTION HEADLINES ----
     .section-h is used site-wide. Anchor it to fluid scale. */
  .section-h,
  h2.serif {
    font-size: var(--type-h1) !important;
    line-height: var(--lh-headline) !important;
    letter-spacing: var(--ls-headline) !important;
    font-weight: 500;
  }

  /* CTA-area heads slightly larger */
  #cta .section-h {
    font-size: clamp(2rem, 2.6vw + 0.5rem, 2.75rem) !important; /* 32 → 44 */
  }

  /* Smaller section heads (used inside columns / cards) */
  h3.serif {
    font-size: var(--type-h3) !important;
    line-height: var(--lh-headline) !important;
    letter-spacing: var(--ls-headline) !important;
    font-weight: 500;
  }

  h4 ,

  [data-h4] {
    font-size: var(--type-h4);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-weight: 500;
  }

  h5, h6 {
    font-size: var(--type-h4);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-weight: 500;
  }

  /* ---- BODY PARAGRAPHS ---- */
  p {
    line-height: var(--lh-body);
  }
  .text-lg {
    font-size: var(--type-body-lg) !important;
    line-height: var(--lh-loose) !important;
  }

  /* ---- EYEBROW / MONO LABELS ---- */
  .eyebrow,
  .eyebrow-center,
  .mono {
    font-family: var(--font-mono);
    font-size: var(--type-eyebrow);
    line-height: var(--lh-ui);
    letter-spacing: var(--ls-eyebrow);
    text-transform:none;
    font-weight: 500;
  }

  /* ---- UI / BUTTONS / NAVIGATION ---- */
  nav,
  button,
  .btn {
    letter-spacing: var(--ls-ui);
  }

  /* Pill buttons, clean SaaS feel */
  a.inline-flex.rounded-full,
  button.inline-flex.rounded-full {
    letter-spacing: var(--ls-ui);
    font-weight: 500;
    line-height: var(--lh-ui);
  }

  /* ─────────────────────────────────────────────────────────
     INSTRUMENT SERIF, STRATEGIC USAGE ONLY
     Reserved for:
       • .accent / .serif spans inside headlines
       • <em> / <i> emphasis
       • .editorial display moments
     Geist owns everything else.
     ───────────────────────────────────────────────────────── */
  .accent,
  .editorial,
  .section-h .accent,
  h1 .accent,
  h2 .accent,
  h3 .accent {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  /* Inline emphasis in body copy stays italic (synthetic oblique) */
  p em, li em, p i, li i, blockquote em { font-style: normal; }

  /* ---- SECTION RHYTHM ----
     Calm vertical pacing between major content blocks.
     Generous on desktop, tighter on mobile. */
  @media (min-width: 1024px) {
    section[id] {
      padding-top: clamp(5rem, 6vw, 8rem);
      padding-bottom: clamp(5rem, 6vw, 8rem);
    }
  }
  @media (max-width: 1023px) and (min-width: 768px) {
    section[id] {
      padding-top: 4.5rem;
      padding-bottom: 4.5rem;
    }
  }
  @media (max-width: 767px) {
    section[id] {
      padding-top: 3.5rem;
      padding-bottom: 3.5rem;
    }
  }

  /* ---- TIGHTER HEADLINE → BODY SPACING ----
     The space between heading and following paragraph
     in editorial typography is ~0.5-0.75em of the heading. */
  .section-h + p,
  h1 + p,
  h2 + p,
  h3 + p {
    margin-top: clamp(1rem, 1.5vw, 1.5rem);
  }

  /* ---- MOBILE-SPECIFIC PRESERVE CINEMATIC FEEL ----
     Override Tailwind's text-5xl/text-7xl that fights the system */
  @media (max-width: 767px) {
    .text-5xl, .text-6xl, .text-7xl {
      font-size: var(--type-display) !important;
      line-height: var(--lh-display) !important;
      letter-spacing: var(--ls-display) !important;
    }
    .text-4xl {
      font-size: var(--type-h1) !important;
      line-height: var(--lh-headline) !important;
    }
    .text-3xl {
      font-size: var(--type-h2) !important;
      line-height: var(--lh-headline) !important;
    }
  }

  /* ---- TABLET-SPECIFIC ---- */
  @media (min-width: 768px) and (max-width: 1023px) {
    .section-h {
      font-size: clamp(2rem, 4vw + 0.5rem, 2.75rem) !important; /* 32 → 44 */
    }
  }

  /* ════════════════════════════════════════════════════════════
     TIGHTER SECTION RHYTHM, site-wide override of the Tailwind
     section paddings. Scoped to <section> so cards/chips that use
     the same utilities are unaffected.
     ════════════════════════════════════════════════════════════ */
  section.py-14 { padding-top: 3rem;    padding-bottom: 3rem; }    /* 56  → 48px */
  section.py-16 { padding-top: 3.5rem;  padding-bottom: 3.5rem; }  /* 64  → 56px */
  section.py-20 { padding-top: 4rem;    padding-bottom: 4rem; }    /* 80  → 64px */
  section.py-24 { padding-top: 4.5rem;  padding-bottom: 4.5rem; }  /* 96  → 72px */
  /* Gap between feature blocks on agent pages */ /* 96 → 72px */
  @media (min-width: 1024px) {    /* 80  → 64px */  /* 96  → 72px */    /* 112 → 80px */  /* 128 → 88px */ /* 128 → 96px */
  }

  /* ════════════════════════════════════════════════════════════
     ANNOUNCEMENT BAR, 7-day free trial offer
     ════════════════════════════════════════════════════════════ */
  .announcement-bar {
    position: relative;
    overflow: hidden;
    background: #14101c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  /* thin accent hairline at the very top */
  .announcement-bar::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 160, 245, 0.45), transparent);
    z-index: 2;
  }

  /* Live pulse dot */
  .announcement-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #6BE39A;
    box-shadow: 0 0 0 0 rgba(107, 227, 154, 0.7);
    animation: announcement-pulse 2.4s ease-out infinite;
    flex-shrink: 0;
  }
  @keyframes announcement-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(107, 227, 154, 0.7); }
    70%  { box-shadow: 0 0 0 7px rgba(107, 227, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(107, 227, 154, 0); }
  }

  /* Marquee */

  /* ---- TABULAR NUMBERS for stats ---- */
  .num-counter,
  .stat-num,
  .tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv11' 1;
  }

  /* ---- HEADING BALANCE (better wrap on multi-line heads) ---- */
  .section-h,
  h1,
  h2,
  h3 {
    text-wrap: balance;
    -webkit-text-wrap: balance;
  }

  /* ---- BODY PROSE: pretty line breaks ---- */
  p {
    text-wrap: pretty;
    -webkit-text-wrap: pretty;
  }


  /* ════════════════════════════════════════════════════════════
     ROI CALCULATOR, three-agent tabs + combined view
     ════════════════════════════════════════════════════════════ */

  /* ---------- Premium shell ---------- */
  .roi-section { position: relative; overflow: hidden; }
  .roi-section::before {
    content: '';
    position: absolute;
    top: 12%; left: 50%;
    width: min(860px, 92%); height: 480px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(80, 0, 168, 0.07), transparent 68%);
    pointer-events: none;
    z-index: 0;
  }
  .roi-section > div { position: relative; z-index: 1; }

  .roi-shell {
    position: relative;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 28px 64px -32px rgba(10, 10, 11, 0.22), 0 2px 6px -3px rgba(10, 10, 11, 0.05);
    overflow: hidden;
  }
  .roi-shell::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--purple) 0%, var(--slate) 33%, var(--amber) 67%, #0F7C8C 100%);
    z-index: 2;
  }
  @media (max-width: 640px) { .roi-shell { border-radius: 18px; } }

  /* Tabs as the shell's header bar */
  .roi-shell .roi-tabs { margin: 0; background: linear-gradient(180deg, rgba(10, 10, 11, 0.022), rgba(10, 10, 11, 0)); }
  .roi-shell .roi-tab { padding: 1.375rem 0.5rem; }

  /* Calculator body, integrated into the shell */
  .roi-card { padding: 1.75rem 1.5rem; }
  @media (min-width: 640px)  { .roi-card { padding: 2.5rem; } }
  @media (min-width: 1024px) { .roi-card { padding: 3rem 3.25rem; } }

  /* ---------- Tab bar ---------- */
  .roi-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 2rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .roi-tabs::-webkit-scrollbar { display: none; }

  .roi-tab {
    position: relative;
    background: transparent;
    border: none;
    padding: 1rem 0.5rem 1.125rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s var(--ease-out-expo), color 0.2s var(--ease-out-expo);
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
  }
  .roi-tab:hover {
    background: rgba(10, 10, 11, 0.025);
    color: var(--ink);
  }
  .roi-tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--ink);
  }
  .roi-tab.is-active[data-tab="clara"] { border-bottom-color: var(--purple); }
  .roi-tab.is-active[data-tab="dora"]  { border-bottom-color: var(--slate); }
  .roi-tab.is-active[data-tab="nova"]  { border-bottom-color: var(--amber); }
  .roi-tab.is-active[data-tab="theo"]  { border-bottom-color: #0F7C8C; }
  .roi-tab-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    opacity: 0.6;
    filter: grayscale(35%);
    transition: opacity 0.2s var(--ease-out-expo), filter 0.2s var(--ease-out-expo);
  }
  .roi-tab.is-active .roi-tab-avatar { opacity: 1; filter: none; }
  .roi-tab-name {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .roi-tab-role {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0;
    text-transform:none;
    color: var(--muted);
    line-height: 1;
    font-weight: 500;
  }

  /* Hide dots row on very narrow screens to save space; keep name + role */
  @media (max-width: 480px) {
    .roi-tab { padding: 0.75rem 0.25rem 1rem; gap: 0.25rem; }
    .roi-tab-name { font-size: 0.8125rem; }
    .roi-tab-role { font-size: 0.5625rem; letter-spacing: 0; }
  }

  /* ---------- Panels ---------- */
  .roi-panel {
    display: none;
    animation: roi-panel-in 0.36s var(--ease-out-expo);
  }
  .roi-panel.is-active { display: block; }

  @keyframes roi-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ---------- Inputs ---------- */
  .roi-input {
    margin-bottom: 1.5rem;
  }
  .roi-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 1rem;
  }
  .roi-input-row label {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  .roi-value {
    font-family: var(--font-mono);
    font-size: 1.0625rem;
    color: var(--ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }

  /* ---------- Per-agent result card ---------- */
  .roi-result {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: clamp(1.25rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .roi-result::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 30%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(1);
    transform-origin: left center;
    opacity: 0.85;
  }
  .roi-result-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0;
    text-transform:none;
    color: var(--muted);
    margin-bottom: 0.5rem;
    font-weight: 500;
  }
  .roi-result-label:not(:first-child) { margin-top: 1.25rem; }
  .roi-result-current {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--muted);
    text-decoration: line-through;
    opacity: 0.6;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .roi-result-savings {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s var(--ease-out-expo);
  }
  .roi-result-meta {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
    line-height: 1.4;
  }
  .roi-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--cream);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: background 0.25s var(--ease-out-expo), transform 0.25s var(--ease-out-expo);
    align-self: flex-start;
  }
  .roi-cta:hover {
    background: var(--accent);
    transform: translateY(-1px);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 1023px) {
    .roi-result {
      margin-top: 0.5rem;
    }
  }

  /* ---------- Hero product pill (boxed eyebrow with animations) ---------- */

  /* Shimmer sweep across the pill, runs once on reveal + every ~6s thereafter */

  /* Pulsing dot on the left of the pill */

  /* Make the text sit above the shimmer */

  /* Reduced motion: kill animations */

  /* ---------- Pricing v2 (modular agent stack) ---------- */
  .agent-dot {
    width: 22px; height: 22px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 11px;
    color: white;
    line-height: 1;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .agent-dot.clara { background: var(--purple); }
  .agent-dot.dora { background: var(--slate); }
  .agent-dot.nova { background: var(--amber); }
  .agent-dot.plus { background: var(--ink); }
  .pricing-card.featured .agent-dot.plus { background: var(--cream); color: var(--ink); }

  .plan-agents-row {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 1.25rem;
  }
  .plan-agents-row .meta {
    font-size: 10px; color: var(--muted);
    font-family: var(--font-mono);
    text-transform:none; letter-spacing: 0;
    margin-left: 6px;
    font-weight: 500;
  }

  /* Build Your Plan modular selector */

  /* Pay-When-You-Win alternate plan */

  /* ---------- Pricing v4 premium upgrades ---------- */

  /* Section atmospheric background */
  #pricing { position: relative; }
  #pricing::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 15% 10%, rgba(80, 0, 168, 0.04) 0%, transparent 40%),
      radial-gradient(circle at 85% 90%, rgba(201, 123, 63, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
  }
  #pricing > .max-w-7xl { position: relative; z-index: 1; }

  /* Agent avatar stack (on plan cards) */
  .plan-avatar-stack {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .plan-avatar-stack .plan-avatar {
    width: 34px; height: 34px;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid var(--cream);
    background: var(--cream-dim);
    margin-left: -10px;
    position: relative;
    transition: transform 400ms var(--ease-out-quart);
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(10, 10, 11, 0.18),
                0 1px 3px rgba(10, 10, 11, 0.08);
  }
  .plan-avatar-stack .plan-avatar:nth-child(1) { margin-left: 0; z-index: 3; }
  .plan-avatar-stack .plan-avatar:nth-child(2) { z-index: 2; }
  .plan-avatar-stack .plan-avatar:nth-child(3) { z-index: 1; }
  .plan-avatar-stack .plan-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .pricing-card.v4:hover .plan-avatar-stack .plan-avatar:nth-child(1) { transform: translateX(-5px); }
  .pricing-card.v4:hover .plan-avatar-stack .plan-avatar:nth-child(3) { transform: translateX(5px); }

  .pricing-card.v4.featured .plan-avatar-stack .plan-avatar { border-color: rgba(255,255,255, 0.95); }

  .plan-avatar-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform:none;
    letter-spacing: 0;
    color: var(--muted);
    margin-left: 14px;
    font-weight: 500;
    white-space: nowrap;
  }
  .pricing-card.v4.featured .plan-avatar-meta { color: #FFFFFF; }

  /* Premium pricing card v4 with hover lift and gradient glow */
  .pricing-card.v4 {
    position: relative;
    overflow: hidden;
    transition: transform 480ms var(--ease-out-quart),
                box-shadow 480ms var(--ease-out-quart),
                border-color 480ms var(--ease-out-quart);
    z-index: 1;
  }
  .pricing-card.v4:not(.featured) {
    background: linear-gradient(180deg, var(--cream) 0%, rgba(255,255,255, 0.5) 100%);
  }
  .pricing-card.v4:not(.featured)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(80, 0, 168, 0.06) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 480ms ease;
    pointer-events: none;
    z-index: -1;
  }
  .pricing-card.v4:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px -28px rgba(80, 0, 168, 0.22),
                0 8px 18px -8px rgba(10, 10, 11, 0.10);
    border-color: var(--border-strong);
  }
  .pricing-card.v4:not(.featured):hover::before { opacity: 1; }

  /* Featured card animated gradient mesh */
  .pricing-card.v4.featured {
    background: var(--ink);
  }
  .pricing-card.v4.featured::before {
    content: '';
    position: absolute;
    inset: -30%;
    background:
      radial-gradient(circle at 25% 30%, rgba(80, 0, 168, 0.55) 0%, transparent 50%),
      radial-gradient(circle at 75% 70%, rgba(201, 123, 63, 0.20) 0%, transparent 50%);
    opacity: 0.45;
    pointer-events: none;
    animation: mesh-drift 16s ease-in-out infinite alternate;
    z-index: -1;
  }
  @keyframes mesh-drift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-3%, 2%) rotate(1.5deg); }
  }
  .pricing-card.v4.featured > * { position: relative; z-index: 1; }
  .pricing-card.v4.featured:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 80px -30px rgba(80, 0, 168, 0.55),
                0 12px 28px -8px rgba(10, 10, 11, 0.25);
  }

  /* Plan badge, animated pulse dot */
  .plan-badge-v2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    position: absolute;
    top: -12px;
    left: 24px;
    padding: 6px 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--purple) 0%, #7E33D8 100%);
    color: white;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform:none;
    letter-spacing: 0;
    box-shadow: 0 10px 24px -6px rgba(80, 0, 168, 0.55);
    z-index: 5;
  }
  .plan-badge-v2::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 999px;
    background: white;
    animation: badge-pulse 2.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  @keyframes badge-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); }
  }

  /* CTA shimmer */
  .cta-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .cta-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .cta-shine:hover::after { transform: translateX(110%); }

  /* Builder check with real avatar */

  /* Pay-When-You-Win v2, premium dark hero */
  .win-plan-v2 {
    position: relative;
    background:
      radial-gradient(ellipse at 100% 0%, rgba(80, 0, 168, 0.28) 0%, transparent 55%),
      radial-gradient(ellipse at 0% 100%, rgba(80, 0, 168, 0.12) 0%, transparent 50%),
      var(--ink);
    border-radius: 28px;
    padding: 2.5rem 1.75rem;
    overflow: hidden;
    color: var(--cream);
  }
  @media (min-width: 1024px) {
    .win-plan-v2 { padding: 4rem 4rem; }
  }
  .win-plan-v2::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255, 0.045) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
  }
  .win-plan-v2-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.5rem;
    align-items: center;
  }
  @media (min-width: 900px) {
    .win-plan-v2-inner { grid-template-columns: 1.3fr 1fr; gap: 3.5rem; }
  }
  .win-plan-tag-v2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255, 0.08);
    border: 1px solid rgba(255,255,255, 0.14);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform:none;
    letter-spacing: 0;
    color: #FFFFFF;
    margin-bottom: 1.25rem;
  }
  .win-plan-tag-v2 .pulse {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: #C9A0F5;
    box-shadow: 0 0 0 0 rgba(201, 160, 245, 0.7);
    animation: badge-pulse 2.2s ease-in-out infinite;
  }
  .win-plan-headline {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin-bottom: 1.25rem;
  }
  .win-plan-headline .accent-purple {
    background: linear-gradient(135deg, #C9A0F5 0%, #A57FE8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .win-plan-bullets-v2 {
    list-style: none; padding: 0; margin: 0;
    column-count: 2;
    column-gap: 24px;
  }
  @media (max-width: 600px) { .win-plan-bullets-v2 { column-count: 1; } }
  .win-plan-bullets-v2 li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 1.4;
    margin-bottom: 14px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  .win-plan-bullets-v2 li:last-child { margin-bottom: 0; }
  .win-plan-bullets-v2 li .check-icon {
    flex-shrink: 0; margin-top: 2px;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    color: #C9A0F5;
  }

  /* ROI v2, premium dark single card */

  /* ---------- Minimal inline ROI (replaces dark box) ---------- */
  .roi-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem 4rem;
    max-width: 980px;
    margin: 0 auto;
  }
  @media (min-width: 768px) {
    .roi-inline { gap: 0; }
    .roi-inline .roi-inline-stat {
      flex: 1;
      padding: 0 1.75rem;
      position: relative;
    }
    .roi-inline .roi-inline-stat + .roi-inline-stat::before {
      content: '';
      position: absolute;
      left: 0;
      top: 12%;
      height: 76%;
      width: 1px;
      background: linear-gradient(180deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent);
    }
  }
  .roi-inline-stat {
    text-align: center;
    min-width: 180px;
  }
  .roi-inline-num {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(56px, 8vw, 84px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--purple);
    margin-bottom: 0.75rem;
    transition: transform 400ms var(--ease-out-quart);
  }
  .roi-inline-stat:hover .roi-inline-num {
    transform: translateY(-2px) scale(1.02);
  }
  .roi-inline-label {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
    max-width: 200px;
    margin: 0 auto;
  }

  /* ---------- Build Your Stack motion enhancements ---------- */

  /* Ambient drifting gradient on builder background */

  /* Checkmark draw animation on selection */

  /* Check box pop animation on check */

  /* Avatar pulsing ring when checked */

  /* Dot mini pulse when card is checked */

  /* Card subtle rise on check */

  /* Result text smooth crossfade */

  /* Path pill enhanced state for all-3-selected */

  /* Honor reduced motion */

  /* ---------- Testimonial marquee ---------- */

  /* ============================================================
     Custom cursor - applied site-wide via /js/cursor.js
     ============================================================ */
  /* Hard hat artwork hangs from the brim tip, which sits on the hotspot */

  /* Hide system cursor */
  @media (hover: hover) and (pointer: fine) {

    /* Cookiebot/Usercentrics consent dialog renders above the custom cursor's
       z-index, so the custom arrow is occluded. Restore the native cursor over
       the dialog and its backdrop so users can aim and interact normally. */
  }

  /* Hover on interactive elements: gentle scale up */

  /* Click: scale down (pivots at tip since transform-origin is 0,0) */

  /* On dark sections: swap to cream-to-light-purple gradient */

  /* Hide custom cursor on text inputs so the native I-beam takes over.
     Must also restore cursor:text on the inputs themselves because
     body.has-custom-cursor * { cursor: none !important } suppresses it. */

  /* Disable on touch */

  /* Reduced motion */

  /* ---------- Click ripple ---------- */

  /* Tiny press-state for clickable elements (extra polish) */

  /* ============================================================
     CROSS-DEVICE & WIDE-SCREEN REFINEMENTS
     ============================================================ */

  /* Tiny / older phones (≤360px wide): prevent edge crush */
  @media (max-width: 360px) {
    .max-w-7xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
    .pricing-card { padding: 1.5rem !important; }
  }

  /* iPad / mid-tablet (768-1023px): currently grouped with mobile.
     Add a few overrides so cards & grids breathe */
  @media (min-width: 768px) and (max-width: 1023px) {
    .pricing-card { padding: 1.75rem !important; }
    .win-plan-v2-inner { gap: 2rem; }
  }

  /* Large desktop (1280-1535px): minor padding bump */
  @media (min-width: 1280px) and (max-width: 1535px) {
    .max-w-7xl { max-width: 1280px; padding-left: 2rem; padding-right: 2rem; }
  }

  /* Wide desktop / 2K (1536-1919px): let content breathe more */
  @media (min-width: 1536px) {
    html { font-size: 17px; }
    .max-w-7xl { max-width: 1480px; }
    .section-h { font-size: clamp(2.25rem, 2.6vw, 3rem); }
  }

  /* QHD / 1440p (1920-2559px): proportional scale up */
  @media (min-width: 1920px) {
    html { font-size: 18px; }
    .max-w-7xl { max-width: 1680px; padding-left: 3rem; padding-right: 3rem; }
    .section-h { font-size: clamp(2.5rem, 2.6vw, 3.25rem); }
    .serif { letter-spacing: -0.015em; }
    .pricing-card { padding: 2.25rem; }
  }

  /* 4K / UHD displays (≥2560px): true wide-screen treatment */
  @media (min-width: 2560px) {
    html { font-size: 20px; }
    body { font-size: 1.0625rem; }
    .max-w-7xl { max-width: 1880px; padding-left: 4rem; padding-right: 4rem; }
    .max-w-5xl { max-width: 1280px; }
    .max-w-4xl { max-width: 1100px; }
    .section-h { font-size: clamp(2.75rem, 2.5vw, 3.75rem); }
    .pricing-card { padding: 2.5rem; border-radius: 1.25rem; }
  }

  /* Ultra-wide handling now lives in the PROPORTIONAL 4K SCALE block
     at the end of this file (uniform zoom, no per-element mega-type). */

  /* High-DPI: sharpen 1px borders that would otherwise look fuzzy */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .pricing-card, .accordion-item, .chip {
      border-width: 0.5px;
    }
  }

  /* Landscape orientation on short viewports (e.g. phone in landscape) */
  @media (max-height: 500px) and (orientation: landscape) {
    section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  }

  /* Print-friendly fallback (just in case) */
  @media print {
    .nav-blur { display: none !important; animation: none !important; }
    * { background: white !important; color: black !important; box-shadow: none !important; }
  }

  /* ════════════════════════════════════════════════════════════
     MOBILE NAV (hamburger + sidebar), injected by /js/mobile-nav.js
     Hidden on desktop (>=1024px), full UI on mobile.
     ════════════════════════════════════════════════════════════ */

  /* Hamburger button, sits to the left of the logo, only visible on mobile */
  .mobile-burger {
    display: none;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    margin-right: 0.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ink, #0A0A0B);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-burger:hover { background: rgba(10, 10, 11, 0.04); }
  .mobile-burger:focus-visible { outline: 2px solid var(--purple, #5000A8); outline-offset: 2px; }
  .mobile-burger svg { width: 22px; height: 22px; }
  @media (max-width: 1023px) {
    .mobile-burger { display: inline-flex; }
  }

  /* Backdrop behind the sidebar */
  .mobile-sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(10, 10, 11, 0.42);
    opacity: 0; pointer-events: none;
    z-index: 78;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .mobile-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  /* The slide-in drawer */
  .mobile-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(86vw, 360px);
    background: var(--cream, #FFFFFF);
    border-right: 1px solid var(--border, #E9EAEE);
    box-shadow: 12px 0 40px -12px rgba(10, 10, 11, 0.18);
    z-index: 80;
    transform: translateX(-105%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-sidebar.open { transform: translateX(0); }

  /* Lock background scroll while open */
  body.mobile-nav-open { overflow: hidden; }

  /* Sidebar header (brand + close) */
  .mobile-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border, #E9EAEE);
  }
  .mobile-sidebar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--purple, #5000A8);
    font-family: var(--font-sans, 'Google Sans', sans-serif);
    font-weight: 700; font-size: 1.0625rem;
    letter-spacing: -0.01em;
  }
  .mobile-sidebar-brand svg {
    display: block;
    height: 1.375rem;
    width: auto;
  }
  .mobile-sidebar-close {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 999px;
    color: var(--ink, #0A0A0B); cursor: pointer;
    transition: background 0.18s ease;
  }
  .mobile-sidebar-close:hover { background: rgba(10, 10, 11, 0.06); }
  .mobile-sidebar-close svg { width: 20px; height: 20px; }

  /* Link list */
  .mobile-sidebar-nav { padding: 0.75rem 0.75rem 1rem; flex: 1; }
  .mobile-sidebar-list { list-style: none; padding: 0; margin: 0; }
  .mobile-sidebar-list li { margin: 0; }
  .mobile-sidebar-list a {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink, #0A0A0B);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mobile-sidebar-list a:hover { background: rgba(80, 0, 168, 0.06); color: var(--purple, #5000A8); }
  .mobile-sidebar-list a.active { color: var(--purple, #5000A8); background: rgba(80, 0, 168, 0.08); }

  /* Footer (lang switch + CTA) */
  .mobile-sidebar-foot {
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px solid var(--border, #E9EAEE);
    display: flex; flex-direction: column; gap: 0.875rem;
  }
  .mobile-sidebar-foot .lang-switch {
    display: inline-flex !important;
    align-self: flex-start;
    border: 1px solid var(--border-strong, #D8DAE0);
    border-radius: 999px;
    padding: 2px;
    background: var(--cream, #FFFFFF);
  }
  .mobile-sidebar-foot .lang-switch button {
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--font-mono, 'Google Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,Arial,sans-serif);
    font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0;
    color: var(--muted, #6B6B6E);
    background: transparent; border: 0; cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .mobile-sidebar-foot .lang-switch button.active {
    background: var(--ink, #0A0A0B);
    color: var(--cream, #FFFFFF);
  }
  .mobile-sidebar-cta {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.875rem 1.25rem;
    background: var(--ink, #0A0A0B); color: var(--cream, #FFFFFF);
    border-radius: 999px;
    font-size: 0.9375rem; font-weight: 500;
    text-decoration: none;
    transition: background 0.18s ease;
  }
  .mobile-sidebar-cta:hover { background: var(--purple, #5000A8); }

  /* ════════════════════════════════════════════════════════════
     MOBILE NAV BAR ADJUSTMENTS, shrink CTA, hide desktop bits
     ════════════════════════════════════════════════════════════ */
  @media (max-width: 1023px) {
    /* Hide the desktop lang-switch in the header (moves into sidebar) */
    nav .lang-switch:not(.mobile-sidebar-foot .lang-switch) { display: none !important; }
    /* Shrink "Jetzt testen" CTA on mobile */
    nav a[href="/#cta"][class*="bg-ink"],
    nav a[href="#cta"][class*="bg-ink"] {
      padding: 0.4rem 0.85rem !important;
      font-size: 0.8125rem !important;
    }
    /* Hide "Anmelden" (sign in) in mobile header, accessible via sidebar later if needed */
    nav a[href="/"][data-de="Anmelden"],
    nav a[href="#"][data-de="Anmelden"] { display: none !important; }
  }

  /* ════════════════════════════════════════════════════════════
     PRODUCT-PILL, wrap and shrink on small screens so it stays inside the container
     ════════════════════════════════════════════════════════════ */

  /* ════════════════════════════════════════════════════════════
     MOCKUP, prevent horizontal overflow on small screens
     The mockup contains long filenames and right-aligned chips; on
     phones those would push out of the viewport. We constrain the
     outer card and let inner text wrap rather than scroll.
     ════════════════════════════════════════════════════════════ */
  .mockup { max-width: 100%; }
  @media (max-width: 640px) {
    .mockup { border-radius: 12px; }
    .mockup > div:last-child { padding: 1rem !important; }       /* override inline p-5 / p-6 */
    .mockup .text-sm { font-size: 0.8125rem; word-break: break-word; }
    .mockup .text-xs { font-size: 0.6875rem; }
    .mockup .text-base, .mockup .text-lg { font-size: 0.875rem; }
    /* Stack the header row (filename + agent chip) vertically when cramped */
    .mockup .flex.items-start.justify-between { flex-wrap: wrap; gap: 0.5rem; }
    /* Risk/finding rows stay readable */
  }

  /* Mobile header tightening: shrink logo and close the gap to the hamburger.
     Targets both nav styles: old (Tailwind .gap-10 + .h-7) and new (.nav-left + .logo svg). */
  @media (max-width: 1023px) {
    /* New-style nav: trim the flex gap and the logo */
    .logo svg { height: 1.125rem !important; }

    /* Old-style nav: same treatment via Tailwind selectors */
    nav .flex.items-center.gap-10 { gap: 0.5rem !important; }
    nav a.flex.items-center.gap-2 { gap: 0.25rem !important; }
    nav svg.h-7 { height: 1.125rem !important; }
  }

  /* Mobile header padding: shrink horizontal padding inside the nav from
     px-6 (24px) to 1rem on viewports below the lg breakpoint. lg:px-8 still
     wins above 1024px, so desktop is unchanged. */
  @media (max-width: 1023px) {
    nav .max-w-7xl.mx-auto.px-6,
    nav .max-w-7xl.px-6 {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
  }

  /* ============================================================
     COMPARISON TABLE, premium redesign
     ============================================================ */

  /* Grid base, guarantees column alignment across header + rows */

  /* Column header cards */

  /* Feature (label) cells */

  /* Value cells */

  /* Last row, close the column groups */

  /* Staggered row reveal */

  /* Icon circles */

  /* Bottom strip */

/* ============================================================
   IN-CARD AGENT PICKER (Solo / Duo plan cards)
   ============================================================ */
.plan-pick {
  margin-bottom: 0.875rem;
}
.plan-pick-title {
  display: block;
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform:none;
  letter-spacing: 0;
  color: var(--muted);
  margin-bottom: 8px;
}
.plan-pick-row {
  display: flex;
  gap: 6px;
}
.plan-pick-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 10px 3px 8px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .28s cubic-bezier(.16,1,.3,1),
              background .28s cubic-bezier(.16,1,.3,1),
              transform .28s cubic-bezier(.16,1,.3,1),
              box-shadow .28s cubic-bezier(.16,1,.3,1);
}
.plan-pick-item input[type="radio"],
.plan-pick-item input[type="checkbox"] {
  display: none;
}
.plan-pick-item img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(40%);
  opacity: .82;
  box-shadow: 0 0 0 0 rgba(80,0,168,0);
  transition: filter .28s ease, opacity .28s ease,
              transform .28s cubic-bezier(.16,1,.3,1),
              box-shadow .28s ease;
}
.plan-pick-item > span {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-family: var(--font-mono);
  text-transform:none;
  letter-spacing: 0;
  color: var(--muted);
  transition: color .28s ease;
}
/* animated checkmark badge */
.plan-pick-item::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--purple-brand, #5000A8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(.3);
  transition: opacity .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  z-index: 2;
}
/* hover */
.plan-pick-item:hover {
  border-color: rgba(80,0,168,.4);
  transform: translateY(-2px);
}
.plan-pick-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
/* selected */
.plan-pick-item:has(input:checked) {
  border-color: var(--purple-brand, #5000A8);
  background: linear-gradient(168deg, rgba(80,0,168,.08), rgba(80,0,168,.02));
  box-shadow: 0 6px 18px -6px rgba(80,0,168,.4);
  transform: translateY(-2px);
}
.plan-pick-item:has(input:checked) img {
  filter: grayscale(0%);
  opacity: 1;
  box-shadow: 0 0 0 2px var(--cream, #FFFFFF), 0 0 0 4px var(--purple-brand, #5000A8);
  animation: pick-pop .45s cubic-bezier(.34,1.56,.64,1);
}
.plan-pick-item:has(input:checked) > span {
  color: var(--purple-brand, #5000A8);
  font-weight: 600;
}
.plan-pick-item:has(input:checked)::after {
  opacity: 1;
  transform: scale(1);
}
/* disabled (Duo, max reached) */
.plan-pick-item:has(input:disabled:not(:checked)) {
  opacity: 0.4;
  cursor: default;
  filter: saturate(.45);
}
.plan-pick-item:has(input:disabled:not(:checked)):hover {
  transform: none;
  border-color: var(--border);
}
@keyframes pick-pop {
  0%   { transform: scale(.78); }
  55%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-pick-item,
  .plan-pick-item img,
  .plan-pick-item::after { transition: none; }
  .plan-pick-item:has(input:checked) img { animation: none; }
  .plan-pick-item:hover,
  .plan-pick-item:has(input:checked) { transform: none; }
}

/* ============================================================
   TRUST STRIP (highlighted animated trust pills)
   ============================================================ */
.trust-strip {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(80,0,168,.18);
  background:
    linear-gradient(110deg, rgba(80,0,168,.07), rgba(80,0,168,.02)),
    #FFFFFF;
  box-shadow: 0 8px 24px -12px rgba(80,0,168,.28),
              inset 0 1px 0 rgba(255,255,255,.8);
  overflow: hidden;
}
.trust-strip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-120%) skewX(-16deg);
  animation: trust-shine 5s ease-in-out infinite;
  pointer-events: none;
}
.trust-strip-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.trust-strip-item svg {
  width: 13px;
  height: 13px;
  color: var(--purple, #5000A8);
  flex-shrink: 0;
}
.trust-strip-sep {
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(80,0,168,.28);
  flex-shrink: 0;
}
@keyframes trust-shine {
  0%        { transform: translateX(-120%) skewX(-16deg); }
  60%, 100% { transform: translateX(320%) skewX(-16deg); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-strip { animation: none; }
  .trust-strip::before { animation: none; opacity: 0; }
}

/* ============================================================
   COMPACT HEADING SCALE
   Reduce Tailwind display utilities so headings + subline + CTA
   fit the first viewport on every device. Mobile (<768px) heading
   sizes are governed by the --type-* tokens above.
   ============================================================ */
.text-4xl { font-size: 1.875rem; line-height: 1.18; }
.text-5xl { font-size: 2.25rem; line-height: 1.12; }
.text-6xl { font-size: 2.625rem; line-height: 1.08; }
.text-7xl { font-size: 3rem; line-height: 1.06; }

/* ============================================================
   APPSHOT, product-mockup design system ("Werkbank")
   Hero cards read as screenshots of real engineering software:
   flat titlebar + document tab, toolbar with live status, step
   pipeline, hairline findings ledger, mono statusbar. Semantic
   color lives only in glyphs and text, no tinted washes.
   Agent identity via --agent (falls back to purple).
   ============================================================ */
/* data-grid variant (Nova bid table) */
/* Phone: compact the appshot so it can never exceed the viewport */

/* staggered row entrance when revealed */

/* Narrow desktop (1024-1152px): the full nav row needs ~1033px -
   tighten gaps and padding so it fits from exactly 1024px up. */
@media (min-width: 1024px) and (max-width: 1152px) {
  .site-header .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
  .site-header .nav-row > .flex.items-center { gap: 1.25rem; }
  .site-header .nav-links { gap: 1.05rem; }
  .site-header .nav-links a { font-size: 13.5px; }
}


/* Current-page marker in the desktop nav (set by main.js) */
.nav-links a.nav-active,
.nav-links .dropdown-trigger.nav-active {
  color: var(--purple);
  font-weight: 600;
}
.nav-links a.nav-active.hover-line::after { transform: scaleX(1); }

/* ============================================================
   UNIFIED FAQ TYPOGRAPHY, identical across every FAQ on the
   site (home, pricing, agents, webinar): question 1rem/600,
   answer 0.9375rem muted.
   ============================================================ */
.accordion-trigger { cursor: pointer; }
.accordion-trigger h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.accordion-content p {
  font-size: 0.9375rem !important;
  line-height: 1.65;
  max-width: 68ch;
}

/* ============================================================
   PROPORTIONAL 4K / ULTRA-WIDE SCALE
   Above ~2.4k the site renders as the designed ~1900px experience,
   scaled uniformly. This keeps every proportion (type, cards,
   spacing, borders) identical to the flagship desktop layout
   instead of stretching type tiers while px components stay small.
   Overrides the older large-screen font/width escalations below
   ...by coming later in the cascade.
   ============================================================ */
@media (min-width: 2400px) {
  html { font-size: 17px !important; }
  body { zoom: 1.32; }
  .max-w-7xl { max-width: 1480px; }
  .max-w-5xl { max-width: 64rem; }
  .max-w-4xl { max-width: 56rem; }
  .section-h { font-size: clamp(2.25rem, 2.6vw, 3rem); }
}
@media (min-width: 3200px) { body { zoom: 1.78; } }
@media (min-width: 3600px) { body { zoom: 2; } }

/* ============================================================
   RENDER PERFORMANCE
   ============================================================ */
/* Skip layout/paint for below-fold sections until the user nears
   them - the single biggest render win for long static pages.
   First three sections per container stay eager (hero + fold). */
body section:nth-of-type(n+4):not([id]),
main section:nth-of-type(n+4):not([id]),
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 820px;
}
/* Continuously-animated tracks get their own compositor layer */
.trust-strip {
  will-change: transform;
}
/* Polished anchor scrolling */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   DISPLAY POLISH, the details that read as premium
   ============================================================ */
/* Slim branded scrollbar (WebKit + Firefox) */
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 100px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); background-clip: padding-box; border: 3px solid transparent; }

/* Consistent keyboard focus ring on every interactive element */
:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
  border-radius: 4px;
}
/* No gray tap flash on iOS */
html { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   AGENT CARDS, full 3D treatment
   Pointer-tracked tilt (JS sets --rx/--ry/--gx/--gy), layered
   depth (portrait and badge float above the card plane), moving
   light glare, deepened hover shadow. Touch devices get a calm
   idle motion instead. Reduced-motion disables everything.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .agent-card { overflow: visible; }
  /* tight tracking while the pointer is on the card, springy return */
}
/* translateZ parallax removed together with the 3D tilt above, it was part
   of the layered-depth stack that dropped content on hover. */

/* ============================================================
   AGENT CARDS, hover animation removed (cards static on hover)
   The 3D tilt + pointer-tracked glare made accelerated Chrome drop the
   card's stats/bullets on hover. Cards now have no hover motion at all.
   Placed last so these win the cascade.
   ============================================================ */
.agent-card { transition: none !important; }
.agent-card:hover { transform: none !important; box-shadow: none !important; }
.agent-card:hover::before { opacity: 0 !important; }
.agent-card:hover::after { box-shadow: 0 0 0 1px transparent inset !important; }

/* ============================================================
   CUSTOMERS, "250+ registered" hero stat above the logo strip
   ============================================================ */

/* ---------- Icon system: micro-interactions ----------
   One family, two stroke tiers (1.8 UI / 2.4 small marks).
   Motion only where it carries meaning: card focus lifts the
   concept glyph; text CTAs slide their arrow. */
a.inline-flex span + svg { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
a.inline-flex:hover span + svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  a.inline-flex:hover span + svg { transform: none; }
}

/* ---------- Beta pill + nav sub-item (Clara form auto-fill) ---------- */
.dd-beta {
  font-family: var(--font-mono); font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0; text-transform:none; color: var(--purple);
  background: var(--purple-soft); border-radius: 99px; padding: 0.14rem 0.5rem;
  display: inline-block; vertical-align: middle; white-space: nowrap;
}
.dd-beta.dd-beta-th { color: #0B6470; background: #E2F2F3; margin-left: 6px; }



/* BSFZ footer badge: outlined pill matching the hero badge, seal tilts on hover */

/* ===== Performance: off-screen animation pause =====
   main.js observes every top-level section and pauses all CSS animations
   inside it while it is outside the viewport, so the compositor only works
   on what the visitor can actually see. */
.anim-paused,
.anim-paused *,
.anim-paused::before,
.anim-paused::after,
.anim-paused *::before,
.anim-paused *::after {
  animation-play-state: paused !important;
}

/* ============================================================
   CLOSING CTA BAND: one design for every page's final call to
   action. Ink ground, one still purple light under the headline,
   a lavender hairline on top, centred copy, white primary pill.
   ============================================================ */
.cta-band { position: relative; overflow: hidden; background: var(--ink); color: #fff; text-align: center; padding: 5rem 0; }
@media (min-width: 1024px) { .cta-band { padding: 7rem 0; } }
.cta-band::before { content: ''; position: absolute; left: 50%; bottom: -48%; width: min(960px, 160%); aspect-ratio: 2 / 1;
  transform: translateX(-50%); pointer-events: none; filter: blur(10px);
  background: radial-gradient(closest-side, rgba(80, 0, 168, 0.55), rgba(80, 0, 168, 0.18) 55%, transparent 100%); }
.cta-band::after { content: ''; position: absolute; top: 0; left: 50%; width: min(560px, 80%); height: 1px; transform: translateX(-50%);
  pointer-events: none; background: linear-gradient(90deg, transparent, rgba(201, 184, 237, 0.6), transparent); }
.cta-band-in { position: relative; z-index: 1; max-width: 50rem; margin: 0 auto; padding: 0 1.5rem;
  display: flex; flex-direction: column; align-items: center; }
.cta-band-eyebrow { margin: 0 0 1.1rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0;
  text-transform:none; color: #C9B8ED; }
.cta-band .cta-band-h { margin: 0; max-width: 20ch; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 600; letter-spacing: -0.035em;
  line-height: 1.04; color: #fff; text-wrap: balance; }
.cta-band-h .acc { color: #C9B8ED; }
.cta-band-p { margin: 1.1rem auto 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.6; color: #FFFFFF; }
.cta-band-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.1rem; }
.cta-band-btn, .cta-band-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; height: 3.25rem;
  padding: 0 1.7rem; border-radius: 999px; font-size: 0.92rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
.cta-band-btn { background: #fff; color: var(--ink); box-shadow: 0 14px 34px -14px rgba(201, 184, 237, 0.55); }
.cta-band-btn:hover { background: #C9B8ED; color: var(--ink); }
.cta-band-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.cta-band-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }
.cta-band-btn:active, .cta-band-ghost:active { transform: scale(0.98); }
.cta-band-btn svg, .cta-band-ghost svg { width: 14px; height: 14px; transition: transform .2s ease; }
.cta-band-btn:hover svg, .cta-band-ghost:hover svg { transform: translateX(3px); }
.cta-band-btn:focus-visible, .cta-band-ghost:focus-visible { outline: 2px solid #C9B8ED; outline-offset: 3px; }
.cta-band-note { margin: 1.6rem 0 0; font-size: 0.82rem; line-height: 1.6; color: #FFFFFF; }
.cta-band-note a { color: #C9B8ED; text-decoration: underline; text-underline-offset: 2px; }
/* card variant, for bands that sit inside a content column */
@media (prefers-reduced-motion: reduce) { .cta-band-btn, .cta-band-ghost, .cta-band-btn svg, .cta-band-ghost svg { transition: none; } }

/* ============================================================
   NAV 2026: settled. KI-Brain reads like its neighbours with one
   small flat mark; Webinar carries a quiet superscript "Live".
   ============================================================ */

.nav-links a.nav-webinar { gap: 5px; align-items: flex-start; }
.nav-links a.nav-webinar::before {
  content: 'Bald'; order: 2; margin-top: 1px;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0; text-transform:none; line-height: 1;
  color: var(--purple, #5000A8);
}

/* Webinar rail: on the narrowest phones the badge keeps its dot only */

/* Smallest phones: keep air between the logo and the demo button */
@media (max-width: 360px) {
  nav a.nav-cta { padding-left: 0.85rem; padding-right: 0.75rem; gap: 0.35rem; font-size: 0.8rem; }
}

/* ============================================================
   TYPE SYSTEM (single source of truth for headings, all pages)
   Google Sans throughout. One weight for display type (600),
   one fluid size per level, one tracking per level.
     H1  page title       32px phone  .. 52px desktop
     H2  section heading  26px phone  .. 40px desktop
     H3  card / block     size by context, weight 600
   Declared last and !important on purpose: it overrides the older
   per-page layers (Tailwind size utilities, legacy .section-h,
   .hero-h1 breakpoint overrides) that caused the drift.
   ============================================================ */
:root {
  --t-h1: clamp(2rem, 1rem + 2.6vw, 3.25rem);
  --t-h2: clamp(1.625rem, 1rem + 1.9vw, 2.5rem);
  --t-art: clamp(1.875rem, 1.2rem + 2vw, 2.75rem);
}
:is(h1.section-h, h1.hb-h1, h1.pr-h1, h1.brain-h, h1.hero-h1, h1.blog2-hero-h1, h1.blog-index-title):not(#t) {
  font-size: var(--t-h1) !important; font-weight: 600 !important;
  letter-spacing: -0.045em !important; line-height: 1.03 !important; font-style: normal !important;
}
:is(h2.section-h, h2.kb-h2, h2.pr-h2, h2.brain-h2, h2.cta-band-h, h2.blog2-newsletter-title, .wb-noslides h2):not(#t) {
  font-size: var(--t-h2) !important; font-weight: 600 !important;
  letter-spacing: -0.04em !important; line-height: 1.06 !important; font-style: normal !important;
}
h1.article-title:not(#t) {
  font-size: var(--t-art) !important; font-weight: 600 !important;
  letter-spacing: -0.04em !important; line-height: 1.08 !important;
}
:is(h1, h2) :is(.accent, .serif, em, .brain-serif, .brain-accent, [class*="-acc"]):not(#t) { font-weight: inherit !important; font-style: normal !important; letter-spacing: inherit !important; }
:is(.article-body h2, .legal-prose h2):not(#t) { font-weight: 600 !important; letter-spacing: -0.025em !important; }
h2.blog2-featured-title:not(#t) { font-weight: 600 !important; letter-spacing: -0.03em !important; }
:is(section h3, article h3, .article-body h3, h3.related-card-title):not(#t):not(:where([data-h4])) { font-weight: 600 !important; letter-spacing: -0.02em; }
/* Headings never hyphenate automatically (Safari ignores length limits
   and splits "Einrei-chen"). Long compounds carry a manual &shy; break
   point in the markup; overflow-wrap is the last-resort guard. */
:is(h1, h2, h3, h4):not(#t), :where([data-h4]):not(#t) { overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }

/* ============================================================
   AGENT PAGES: cards move like the homepage agent deck.
   html.ag-deck is set only when motion is allowed. Cards rise from
   below tipped back and settle once their section reveals; grouped
   cards follow one another; small cards assemble their parts.
   Individual transform properties (translate/rotate/scale) layer on
   top of each card's own transforms instead of replacing them.
   ============================================================ */
html.ag-deck .reveal:not(.in) :is(.cl-tw, .stat-cell, .cl-feed, .cf-w, .cld-w, .cl-node, .cl-dec, .cw, .dwb, .dx, .dr-case, .dr-nt-c, .dr-lv, .dr-neg, .nv-fun, .nvc, .nv-plot, .nv-cn, .nv-elig, .nv-dc, .nv-doc, .nv-audit, .nv-fg, .mt-w, .kc-w, .kp-card) { opacity: 0 !important; }
html.ag-deck .reveal.in :is(.cl-tw, .stat-cell, .cl-feed, .cf-w, .cld-w, .cl-node, .cl-dec, .cw, .dwb, .dx, .dr-case, .dr-nt-c, .dr-lv, .dr-neg, .nv-fun, .nvc, .nv-plot, .nv-cn, .nv-elig, .nv-dc, .nv-doc, .nv-audit, .nv-fg, .mt-w, .kc-w, .kp-card) {
  transform-origin: 50% 0; animation: agDeck 1s cubic-bezier(.22,1,.36,1) var(--dk, 0s) backwards;
}
html.ag-deck .reveal.in :is(.stat-cell, .cl-node, .dr-nt-c, .nv-cn, .nv-dc, .nv-fg) > * { animation: agPart .85s cubic-bezier(.22,1,.36,1) calc(var(--dk, 0s) + .2s) backwards; }
html.ag-deck .reveal.in :is(.stat-cell, .cl-node, .dr-nt-c, .nv-cn, .nv-dc, .nv-fg) > :nth-child(2) { animation-delay: calc(var(--dk, 0s) + .3s); }
html.ag-deck .reveal.in :is(.stat-cell, .cl-node, .dr-nt-c, .nv-cn, .nv-dc, .nv-fg) > :nth-child(n+3) { animation-delay: calc(var(--dk, 0s) + .4s); }
:is(.stat-cell, .cl-node, .dr-nt-c, .nv-cn, .nv-dc, .nv-fg):nth-child(2) { --dk: .12s; }
:is(.stat-cell, .cl-node, .dr-nt-c, .nv-cn, .nv-dc, .nv-fg):nth-child(3) { --dk: .24s; }
:is(.stat-cell, .cl-node, .dr-nt-c, .nv-cn, .nv-dc, .nv-fg):nth-child(4) { --dk: .36s; }
:is(.stat-cell, .cl-node, .dr-nt-c, .nv-cn, .nv-dc, .nv-fg):nth-child(5) { --dk: .48s; }
:is(.stat-cell, .cl-node, .dr-nt-c, .nv-cn, .nv-dc, .nv-fg):nth-child(n+6) { --dk: .6s; }
@keyframes agDeck { from { opacity: 0; translate: 0 80px; rotate: x -12deg; scale: .96; } to { opacity: 1; translate: 0 0; rotate: x 0deg; scale: 1; } }
@keyframes agPart { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* WEBINAR: same deck motion for its cards (reuses agDeck/agPart) */

/* VERGLEICH: the comparison table enters like a hero card, rows cascade */

/* SECURITY: fact tiles and numbered cards enter like the hero cards */

/* depth for the deck motion: plain class selectors only (no :has, which the
   browser would re-test against every element on every style change) */
html.ag-deck .reveal, html.ag-deck :is(.stats-row, .cl-chain, .dr-nt, .nv-chain, .nv-duel, .wb-stats, .wb-os-nodes) { perspective: 1600px; perspective-origin: 50% 0; }

/* GLOSSAR: featured and term cards enter like the hero cards, each as it
   scrolls into view; the category panel in the hero does the same */

/* BLOG: featured and post cards enter like the hero cards (CSS-only, so
   the generated blog pages need no markup; honours reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .blog2-grid.blog2-reveal, .blog2-featured.blog2-reveal { opacity: 1; transform: none; perspective: 1600px; perspective-origin: 50% 0; }
  .blog2-grid.blog2-reveal:not(.in) > .blog2-card, .blog2-featured.blog2-reveal:not(.in) .blog2-featured-card { opacity: 0; }
  .blog2-grid.blog2-reveal.in > .blog2-card, .blog2-featured.blog2-reveal.in .blog2-featured-card { transform-origin: 50% 0; animation: agDeck 1s cubic-bezier(.22,1,.36,1) var(--dk, 0s) backwards; }
  .blog2-grid.blog2-reveal.in > .blog2-card > *, .blog2-featured.blog2-reveal.in .blog2-featured-card > * { animation: agPart .85s cubic-bezier(.22,1,.36,1) calc(var(--dk, 0s) + .2s) backwards; }
  .blog2-grid.blog2-reveal.in > .blog2-card > :nth-child(2), .blog2-featured.blog2-reveal.in .blog2-featured-card > :nth-child(2) { animation-delay: calc(var(--dk, 0s) + .3s); }
  .blog2-grid > .blog2-card:nth-child(2) { --dk: .12s; } .blog2-grid > .blog2-card:nth-child(3) { --dk: .24s; }
  .blog2-grid > .blog2-card:nth-child(4) { --dk: .36s; } .blog2-grid > .blog2-card:nth-child(5) { --dk: .48s; }
  .blog2-grid > .blog2-card:nth-child(6) { --dk: .6s; } .blog2-grid > .blog2-card:nth-child(n+7) { --dk: .72s; }
}

/* NEWS: feature cards, photo frames and panels enter like the hero cards.
   Depth is part of the keyframe here (the cards sit in generic containers). */
@keyframes agDeckT { from { opacity: 0; transform: perspective(1600px) translate3d(0, 80px, 0) rotateX(-12deg) scale(.96); } to { opacity: 1; transform: none; } }

/* CAREERS: "why" cards and the job card enter like the hero cards */
@media (prefers-reduced-motion: no-preference) {
  .careers-why-grid.reveal { transform: none; opacity: 1; transition: none; }
  .careers-why-grid.reveal:not(.in) > * { opacity: 0; }
  .careers-why-grid.reveal.in > * { transform-origin: 50% 0; animation: agDeckT 1s cubic-bezier(.22,1,.36,1) var(--dk, 0s) backwards; }
  .careers-why-grid.reveal.in > * > * { animation: agPart .85s cubic-bezier(.22,1,.36,1) calc(var(--dk, 0s) + .2s) backwards; }
  .careers-why-grid.reveal.in > * > :nth-child(2) { animation-delay: calc(var(--dk, 0s) + .3s); }
  .careers-why-grid.reveal.in > * > :nth-child(n+3) { animation-delay: calc(var(--dk, 0s) + .4s); }
  .careers-why-grid > :nth-child(2) { --dk: .12s; } .careers-why-grid > :nth-child(3) { --dk: .24s; }
  .career-job.reveal { transform: none; transition: none; }
  .career-job.reveal.in { transform-origin: 50% 0; animation: agDeckT 1s cubic-bezier(.22,1,.36,1) backwards; }
}
/* careers job card: the tags render as chips (their style was scoped to agent pages) */
.career-job .clause-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid #E4E5EA; background: #fff; font-size: 12.5px; font-weight: 500; color: #0A0A0B; white-space: nowrap; }
.career-job .clause-tag:first-child { background: #F4EEFC; border-color: rgba(80,0,168,.2); color: #5000A8; }

/* IMPRESSUM: the four blocks sit as cards and enter like the hero cards */

/* LEGAL PAGES: each section is a card that enters like the hero cards as it
   scrolls into view */
/* NEWS: after each card lands, its contents assemble like the hero cards */

/* ============================================================
   KI-BRAIN LOGO (chip with spark, /images/ki-brain.svg)
   Used wherever the product is named as a mark: mobile menu,
   nav popover, KI-Brain page hero and core cards.
   ============================================================ */
/* Footer: KI-Brain link carries the mark */

/* Mobile menu footer: KI-Brain card */

/* Webinar nav label while no date is announced: "Bald" / "Soon" */
html[lang="en"] .nav-links a.nav-webinar::before { content: 'Soon'; }
/* KI-Brain page: its nav entry reads as the current page */

/* Footer nav columns: 3-up so they stay side by side on phones too */
.footer-nav-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
@media (min-width: 1024px) { .footer-nav-cols { gap: 2.5rem; } }
@media (max-width: 360px) { .footer-nav-cols { gap: 1.5rem 0.75rem; } }

/* ============================================================
   MOBILE MENU: "Agenten" fold-out group (mirrors the desktop dropdown)
   ============================================================ */
.mobile-sidebar-list .msl-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 12px 16px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink, #0A0A0B); text-align: left;
  transition: background-color .18s ease, color .18s ease;
}
.mobile-sidebar-list .msl-toggle:hover { background: rgba(80, 0, 168, 0.06); color: var(--purple, #5000A8); }
.mobile-sidebar-list .msl-toggle.active { color: var(--purple, #5000A8); }
.mobile-sidebar-list .msl-toggle:focus-visible { outline: 2px solid var(--purple, #5000A8); outline-offset: 2px; }
.msl-chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted, #6B6B6E); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.msl-group.open .msl-chev { transform: rotate(180deg); }
.msl-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.2,.8,.2,1); }
.msl-group.open .msl-panel { grid-template-rows: 1fr; }
.msl-panel-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 0 0 0 8px; }
.msl-group.open .msl-panel-in { padding: 2px 0 8px 8px; }
.mobile-sidebar-list a.msl-agent { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; }
.msl-mark { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.msl-mark img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.06); }
.msl-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed #C9B8ED; }
.msl-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.msl-txt b { font-size: 14.5px; font-weight: 600; color: var(--ink, #0A0A0B); line-height: 1.25; }
.msl-txt small { font-size: 12px; font-weight: 400; color: var(--muted, #6B6B6E); line-height: 1.35; }
.msl-beta { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: #F3EEFB; color: var(--purple, #5000A8);
.msl-beta.msl-beta-th { background: #E2F2F3; color: #0B6470; }
  font-size: 9.5px; font-weight: 600; letter-spacing: 0; text-transform:none; vertical-align: 1px; }
.mobile-sidebar-list a.msl-agent.active { background: rgba(80, 0, 168, 0.08); }
.mobile-sidebar-list a.msl-agent.active .msl-txt b { color: var(--purple, #5000A8); }
@media (prefers-reduced-motion: reduce) { .msl-panel, .msl-chev { transition: none; } }

/* ============================================================
   BUTTON SYSTEM (sitewide). One size per role, colours stay per variant.
     Large    page calls to action   52px · 0 26px · 15px/500 · pill
     Compact  buttons inside cards   46px · 0 22px · 14px/500 · pill
     Outline  border 1.5px in the text colour
   The nav "Demo buchen" button and filter chips/tabs are separate
   components and are not touched here.
   ============================================================ */
:is(.hb-cta, .hb-cta2, .cta-band-btn, .cta-band-ghost, .wb-cta, .cta-button, .pr-btn, .careers-apply-btn,
    a.rounded-full.inline-flex[class*="px-6"], a.rounded-full.inline-flex[class*="px-7"]):not(#t) {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  box-sizing: border-box; height: auto; min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: normal; text-decoration: none;
}
:is(.pr-plan .pr-btn, .roi-cta, a.rounded-full.block.w-full):not(#t) {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  box-sizing: border-box; height: auto; min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: normal; text-decoration: none;
}
a.rounded-full.block.w-full:not(#t), .pr-plan .pr-btn-full:not(#t) { display: flex; width: 100%; }
:is(.hb-cta2, .pr-btn-line, a.rounded-full[class*="border-ink"]):not(#t) { border-width: 1.5px; border-style: solid; }

/* ============================================================
   SECTION RHYTHM (sitewide). Content sections that open with a section
   heading share the homepage spacing: 88px top/bottom from 1024px,
   72px below. Heroes, closing CTA bands, compact strips and legal
   bodies keep their own spacing.
   ============================================================ */
section.sec:not(#t) { padding-top: 4.5rem; padding-bottom: 4.5rem; }
@media (min-width: 1024px) { section.sec:not(#t) { padding-top: 5.5rem; padding-bottom: 5.5rem; } }

/* Agents in development (Patrick, Dario) in the Agenten menus */
.msl-soon { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 99px; background: #F1F1F3; color: var(--muted, #6B6B6E);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0; text-transform:none; vertical-align: 1px; }

/* Agent cards: stat labels reserve two lines so the three cards' lists start level */

/* FAQ accordion: visible keyboard focus on the question row */
.accordion-trigger:focus-visible { outline: 2px solid var(--purple, #5000A8); outline-offset: 4px; border-radius: 6px; }
.accordion-trigger:hover h3 { color: var(--purple, #5000A8); }

/* ── Newsletter forms: one look for the blog index and the article/category
   asides, plus the double opt-in status and privacy note (js/newsletter.js) */
:is(.newsletter-form, .blog2-newsletter-form):not(#t) {
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem; max-width: 28rem; margin: 0 auto;
}
:is(.newsletter-form input[type="email"], .blog2-newsletter-input):not(#t) {
  flex: 1 1 200px; min-width: 0; min-height: 48px; padding: 0 1.125rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--cream); color: var(--ink);
  font-family: inherit; font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:is(.newsletter-form input[type="email"], .blog2-newsletter-input):not(#t):focus {
  outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(80, 0, 168, 0.14);
}
:is(.newsletter-form button, .blog2-newsletter-submit):not(#t) {
  flex: 0 0 auto; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
:is(.newsletter-form button, .blog2-newsletter-submit):not(#t):hover { background: var(--purple); }
:is(.newsletter-form button, .blog2-newsletter-submit):not(#t):focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
:is(.newsletter-form button, .blog2-newsletter-submit):not(#t):disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 480px) {
  :is(.newsletter-form button, .blog2-newsletter-submit):not(#t) { flex: 1 1 100%; }
}
:is(.newsletter-form, .blog2-newsletter-form)[hidden]:not(#t) { display: none; }
/* /newsletter page (sign-up, confirm, unsubscribe) */

/* ── Private AI: hosting options block (/brain#private-ai, /pricing#private-ai) ── */
.pai-h { max-width: 46rem; margin-bottom: 2.5rem; }
.pai-h .pr-body { margin-top: 1rem; }
.pai { margin-top: 2.5rem; }
.pai-h + .pai { margin-top: 0; }
.pai-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pai-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pai-card {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.6rem 1.5rem 1.4rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--border-strong); color: var(--ink);
}
.pai-card.is-key {
  background: #0E0D12; border-color: #0E0D12; color: #F4F2F8;
  box-shadow: 0 30px 60px -38px rgba(80, 0, 168, 0.55);
}
.pai-tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0; text-transform:none; padding: 0.3rem 0.6rem; border-radius: 99px;
  color: var(--muted); background: var(--cream-dim); border: 1px solid var(--border);
}
.pai-card:not(:first-child) .pai-tag { color: var(--purple); background: rgba(80, 0, 168, 0.07); border-color: rgba(80, 0, 168, 0.2); }
.pai-card.is-key .pai-tag { color: #FFFFFF; background: rgba(155, 109, 255, 0.18); border-color: rgba(155, 109, 255, 0.35); }
h3.pai-n:not(#t) { margin: 0; font-size: 1.375rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: inherit; }
.pai-sub { margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0; text-transform:none; color: var(--muted-soft); }
.pai-card.is-key .pai-sub { color: #FFFFFF; }
p.pai-d:not(#t) { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.pai-card.is-key p.pai-d:not(#t) { color: #FFFFFF; }
.pai-facts { margin: auto 0 0; padding-top: 0.4rem; display: grid; gap: 0; }
.pai-facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.pai-card.is-key .pai-facts > div { border-top-color: rgba(255, 255, 255, 0.12); }
.pai-facts dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0; text-transform:none; color: var(--muted-soft); padding-top: 0.15rem; }
.pai-card.is-key .pai-facts dt { color: #FFFFFF; }
.pai-facts dd { margin: 0; font-size: 0.875rem; line-height: 1.45; font-weight: 500; }
.pai-all { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--ink); }
.pai-all li { display: inline-flex; align-items: center; gap: 0.45rem; }
.pai-all li + li::before { content: ''; width: 14px; height: 14px; flex-shrink: 0;
  background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D7A4F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.pai-all-l { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0; text-transform:none; color: var(--muted-soft); }
.pai-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.pai-link { font-size: 0.9375rem; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.pai-link:hover { color: var(--purple); text-decoration-color: currentColor; }
a.pai-li { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: currentColor; text-underline-offset: 3px; }
a.pai-li:hover { color: var(--purple); }
@media (max-width: 479.98px) {
  .pai-facts > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .pai-card { padding: 1.35rem 1.2rem 1.2rem; }
}

/* ── Mobile safety: grid columns may shrink below their content's
   min-content width, so long labels wrap instead of pushing the column
   past the screen edge (seen at 320px on the agent heroes). */
.grid > * { min-width: 0; }
/* Keep hero badges, demo window bars and card footers inside the screen */
.agent-section .agent-hero-badge { max-width: 100%; }
@media (max-width: 640px) {
  .agent-section .agent-hero-badge { align-items: flex-start; gap: 10px; padding: 8px 14px 8px 8px; }
  .agent-section .agent-hero-badge .role { white-space: normal; line-height: 1.3; font-size: 12.5px; }
  .agent-section .agent-hero-badge .photo { width: 40px; height: 40px; }
  .agent-section .agent-hero-badge .photo img { width: 100%; height: 100%; }
  .hb-bar-t .hb-dots { display: none; }
  .nv-duel .nv-dfoot, .nv-dc .nv-dfoot { flex-wrap: wrap; }
}
/* Bigger tap areas on phones and tablets for small text links (footer,
   breadcrumbs, article share). Padding grows the hit area, the matching
   negative margin keeps the visual spacing unchanged. */
@media (max-width: 1023.98px) {
  footer ul.space-y-2 a, footer .pt-8.border-t a,
  nav[aria-label="Breadcrumb"] a, .breadcrumb-nav a {
    display: inline-block; padding: 8px 6px; margin: -8px -6px;
  }
  .article-share a { display: inline-block; min-width: 32px; padding: 8px 6px; text-align: center; }
}
/* Readable minimum for interactive labels on phones */
@media (max-width: 480px) {
  .roi-tab-role:not(#t) { font-size: 0.625rem; letter-spacing: 0; }
  .roi-tabs .roi-tab-role:not(#t) { display: none; }
  .plan-pick-item > span:not(#t) { font-size: 0.6875rem; }
}
/* Blog tables on phones: tighter cells so most tables fit; wide ones get
   a soft edge shadow that shows there is more to scroll */
@media (max-width: 759.98px) {
  .article-body table:not(#t) {
    font-size: 0.875rem;
    background:
      linear-gradient(to right, var(--cream) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), var(--cream) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(10,10,11,0.14), rgba(10,10,11,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(10,10,11,0.14), rgba(10,10,11,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .article-body th:not(#t), .article-body td:not(#t) { padding: 0.6rem 0.65rem; }
  .article-body td:not(#t) { hyphens: auto; -webkit-hyphens: auto; }
}

/* ── Theo (Mengenermittlung): agent colour #0F7C8C, mirrors the Nova rules ── */
.agent-card.theo { --card-glow: rgba(15, 124, 140, 0.10); }
.agent-card.theo .agent-stat:hover .agent-stat-value { color: #0F7C8C; }
.agent-card.theo:hover::after { box-shadow: 0 0 0 1px rgba(15, 124, 140, 0.16) inset; }
.agent-dot.theo { background: #0F7C8C; }

/* ===== Cross-device fixes ===== */
/* The launch bar (43px, first child of the header) scrolls away while the
   nav stays pinned. Only when a bar is present, otherwise the nav would be
   clipped by the negative offset. */
html.has-lb .site-header { top: -43px; }

/* ===== Launch bar: Theo has arrived ===== */
.lbar { display: none; }
html.has-lb .lbar { display: flex; }
.lbar { position: relative; align-items: center; height: 43px; box-sizing: border-box; background: #0A0A0B; color: #fff; overflow: hidden;
  transition: opacity .25s ease, transform .25s ease; }
.lbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.08); }
.lbar.is-off { opacity: 0; transform: translateY(-6px); }
.lbar-a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; max-width: 80rem; margin: 0 auto; padding: 0 3.25rem 0 1.5rem; color: #fff; text-decoration: none; font-size: 13px; line-height: 1.3; }
@media (min-width: 1024px) { .lbar-a { padding: 0 3.5rem 0 2rem; } }
.lbar-a img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1.5px #0F7C8C; }
.lbar-tag { flex-shrink: 0; font-family: var(--font-mono); font-size: .58rem; font-weight: 700; letter-spacing: 0; text-transform:none; color: #86D6DF; border: 1px solid rgba(134,214,223,.45); border-radius: 99px; padding: .16rem .5rem; }
.lbar-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbar-t b { font-weight: 600; }
.lbar-cta { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px; white-space: nowrap; transition: color .2s ease, border-color .2s ease; }
.lbar-cta svg { width: 12px; height: 12px; transition: transform .2s ease; }
.lbar-a:hover .lbar-cta { color: #86D6DF; border-color: rgba(134,214,223,.7); }
.lbar-a:hover .lbar-cta svg { transform: translateX(3px); }
.lbar-a:focus-visible { outline: 2px solid #86D6DF; outline-offset: -2px; }
.lbar-x { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .7; transition: opacity .2s ease, background-color .2s ease; }
.lbar-x svg { width: 14px; height: 14px; }
.lbar-x:hover { opacity: 1; background: rgba(255,255,255,.1); }
.lbar-x:focus-visible { outline: 2px solid #86D6DF; outline-offset: 1px; opacity: 1; }
@media (max-width: 767px) {
  .lbar-a { gap: 8px; padding-left: 1rem; padding-right: 2.75rem; font-size: 12.5px; }
  .lbar-m { display: none; }
  .lbar-cta { display: none; }
  .lbar-x { right: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .lbar, .lbar-cta svg { transition: none; } }
/* Phones held sideways: a slimmer nav row. */
@media (max-height: 520px) and (orientation: landscape) {
  .nav-row { height: 3.5rem; }
}
/* iOS zooms into form fields below 16px; keep fields at 16px on touch screens. */
@media (max-width: 1023px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.nl-hp), select, textarea { font-size: 16px !important; }
}

/* ============================================================
   AGENTS MENU (desktop nav): live agents with portraits and their
   domain, Clara's form auto-fill as a sub-row, agents in development
   in a quieter footer with the roadmap link.
   ============================================================ */
.dropdown-panel.dd2 { width: 392px; min-width: 0; padding: 8px; background: #fff; border-radius: 18px; overflow: hidden; }
.dd2-live { display: flex; flex-direction: column; gap: 2px; }
.dd2-agent { --acc: var(--purple, #5000A8); --acc-soft: rgba(80, 0, 168, 0.08);
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; color: var(--ink, #0A0A0B); text-decoration: none;
  transition: background-color .18s ease; }
.dd2-agent[href$="/dora"] { --acc: #424B5A; --acc-soft: rgba(66, 75, 90, 0.09); }
.dd2-agent[href$="/nova"] { --acc: #B8692E; --acc-soft: rgba(201, 123, 63, 0.12); }
.dd2-agent:hover, .dd2-agent:focus-visible { background: #F7F5FB; }
.dd2-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--acc-soft); transition: box-shadow .2s ease; }
.dd2-agent:hover .dd2-av { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--acc); }
.dd2-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dd2-n { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.dd2-tag { font-family: var(--font-mono, sans-serif); font-size: 9.5px; font-weight: 600; letter-spacing: 0; text-transform:none;
  color: var(--acc); background: var(--acc-soft); border-radius: 99px; padding: 2px 7px; line-height: 1.4; }
.dd2-r { font-size: 12.5px; line-height: 1.4; color: var(--muted, #6B6B6E); }
.dd2-go { width: 14px; height: 14px; color: var(--acc); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.dd2-agent:hover .dd2-go, .dd2-agent:focus-visible .dd2-go { opacity: 1; transform: none; }
.dd2-sub { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px;
  margin: -2px 12px 4px 64px; padding: 7px 10px; border-radius: 10px; border: 1px solid #EFEAF8; background: #FCFBFE;
  color: var(--ink, #0A0A0B); text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.dd2-sub:hover, .dd2-sub:focus-visible { border-color: rgba(80, 0, 168, 0.32); background: #F7F3FD; }
.dd2-sub-i { width: 28px; height: 28px; color: var(--purple, #5000A8); display: inline-flex; align-items: center; justify-content: center; }
.dd2-sub-i svg { width: 26px; height: 26px; display: block; }
.dd2-sub-t { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dd2-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin: 6px -8px -8px; padding: 12px 16px 14px;
  background: #F7F7F9; border-top: 1px solid #EEEEF1; }
.dd2-k { flex: 1 1 auto; font-family: var(--font-mono, sans-serif); font-size: 10px; font-weight: 500; letter-spacing: 0;
  text-transform:none; color: var(--muted, #6B6B6E); }
.dd2-road { order: 1; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  color: var(--purple, #5000A8); text-decoration: none; }
.dd2-road .dd2-go { opacity: 1; transform: none; width: 13px; height: 13px; color: currentColor; transition: transform .18s ease; }
.dd2-road:hover .dd2-go { transform: translateX(3px); }
.dd2 a:focus-visible { outline: 2px solid var(--purple, #5000A8); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dd2 *, .dd2 *::before { transition: none !important; } }

/* Mobile menu: agents list, same structure as the desktop Agents menu */
.mobile-sidebar-list a.msl-agent { --acc: var(--purple, #5000A8); --acc-soft: rgba(80, 0, 168, 0.08); gap: 12px; padding: 9px 12px; }
.mobile-sidebar-list a.msl-dora { --acc: #424B5A; --acc-soft: rgba(66, 75, 90, 0.09); }
.mobile-sidebar-list a.msl-nova { --acc: #B8692E; --acc-soft: rgba(201, 123, 63, 0.12); }
.mobile-sidebar-list a.msl-agent .msl-mark, .mobile-sidebar-list a.msl-agent .msl-mark img { width: 36px; height: 36px; }
.mobile-sidebar-list a.msl-agent .msl-mark img { border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--acc-soft); }
.mobile-sidebar-list a.msl-agent .msl-txt b { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.msl-tag { font-family: var(--font-mono, sans-serif); font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform:none;
  color: var(--acc); background: var(--acc-soft); border-radius: 99px; padding: 2px 7px; line-height: 1.4; }
.msl-role { font-size: 12.5px; font-weight: 400; color: var(--muted, #6B6B6E); line-height: 1.35; }
.mobile-sidebar-list a.msl-agent.active { background: rgba(80, 0, 168, 0.08); }
.mobile-sidebar-list a.msl-sub { display: flex; align-items: center; gap: 8px; margin: 0 12px 4px 60px; padding: 7px 10px; border-radius: 10px;
  border: 1px solid #EFEAF8; background: #FCFBFE; font-size: 13px; font-weight: 600; color: var(--ink, #0A0A0B); }
.mobile-sidebar-list a.msl-sub:hover, .mobile-sidebar-list a.msl-sub.active { border-color: rgba(80, 0, 168, 0.32); background: #F7F3FD; color: var(--ink, #0A0A0B); }
.msl-sub-i { width: 28px; height: 28px; flex: none; color: var(--purple, #5000A8); display: inline-flex; align-items: center; justify-content: center; }
.msl-sub-i svg { width: 26px; height: 26px; display: block; }
.mobile-sidebar-list a.msl-sub .msl-beta { margin-left: 0; }
.msl-next { margin: 8px 4px 2px 0; padding: 12px 12px 12px; border-radius: 12px; background: #F7F7F9; border: 1px solid #EEEEF1; }
.msl-next-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.msl-k { font-family: var(--font-mono, sans-serif); font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform:none; color: var(--muted, #6B6B6E); }
.mobile-sidebar-list a.msl-road { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--purple, #5000A8); }
.mobile-sidebar-list a.msl-road:hover { background: none; }
.msl-road svg { width: 13px; height: 13px; }
.msl-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mobile-sidebar-list a.msl-chip { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px;
  align-items: center; padding: 6px 10px 6px 6px; border-radius: 12px; background: #fff;
  border: 1px solid #E6E6EA; font-size: 11.5px; font-weight: 400; color: var(--muted, #6B6B6E); line-height: 1.2; }
.msl-chip img { grid-row: 1 / span 2; }
.msl-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-sidebar-list a.msl-chip:hover { border-color: #C9C9D1; background: #fff; color: var(--muted, #6B6B6E); }
.msl-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; filter: grayscale(0.55); opacity: 0.9; }
.msl-chip b { font-size: 12.5px; font-weight: 600; color: #0A0A0B; }

/* Flat colour icons that replace generic line icons inline in text and chips */
img.ic-f { display: inline-block; flex: none; vertical-align: -0.18em; object-fit: contain; }

.dd2-sub-i img, .msl-sub-i img { width: 15px; height: 15px; display: block; }

/* No dots in front of labels and eyebrows (status dots inside the product
   demos, the glossary/blog category colours and the menu's webinar dot stay). */
.eyebrow::before,
.eyebrow-center::before,
.eyebrow-center::after,
.eyebrow-dot,
.kb-eyebrow > i,
.blog2-hero-eyebrow-dot,
.blog2-featured-tag-dot,
.plan-badge-v2::before,
.win-plan-tag-v2 .pulse,
.pr-win-tag > i,
.ea-line .ea-dot,
.ea-pass-top .ea-dot,
.ea-dock .ea-dot { display: none !important; }

/* Blog article: EN-only notice; articles are German, chrome switches */

/* Blog article: language switch button to the other language's version */

/* ============================================================
   US SITE OVERRIDES (bauai.co) - appended after the EU v5 base
   ============================================================ */
/* Theo accent (teal) in the Agents menu, desktop and mobile */
.dd2-agent[href$="/theo"] { --acc: #0F7C8C; --acc-soft: rgba(15, 124, 140, 0.12); }
.mobile-sidebar-list a.msl-theo { --acc: #0F7C8C; --acc-soft: rgba(15, 124, 140, 0.12); }
/* Single-language site: no language switch anywhere */
.lang-switch { display: none !important; }
/* Webinar nav link: plain link, no "coming soon" badge (US runs scheduled sessions) */
.nav-links a.nav-webinar::before, html[lang="en"] .nav-links a.nav-webinar::before, html[lang="en-US"] .nav-links a.nav-webinar::before { content: none; }
.nav-links a.nav-webinar { align-items: center; }