/* DoclyChat -- public marketing site styles.
   Self-contained, no build step. Brand gradient matches app-icon.png (cyan -> purple). */

:root {
  --brand-cyan: #22d3ee;
  --brand-blue: #3b82f6;
  --brand-purple: #a855f7;
  --brand-gradient: linear-gradient(135deg, var(--brand-cyan), var(--brand-blue) 55%, var(--brand-purple));
  --ink: #0f172a;
  --ink-muted: #475569;
  --ink-soft: #64748b;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --bg-dark: #0b1120;
  --border: #e2e8f0;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --max-width: 1180px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --ink: #e7ecf5;
  --ink-muted: #9aa8bd;
  --ink-soft: #6d7c93;
  --bg: #0b1120;
  --bg-alt: #131c30;
  --bg-dark: #05070d;
  --border: #1f2c44;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .site-header { background: rgba(11, 17, 32, 0.85); }
/* .hero-mock/.hero-mock-cite are deliberately NOT included here -- that hero chat-demo widget has its
   own independent light/dark toggle (aacToggleMockTheme) and is fully hardcoded to explicit colors
   for both of its own states (see the widget's rules further down) precisely so it doesn't flip
   dark-on-dark just because the surrounding marketing page is in dark mode. */
[data-theme="dark"] .aac-lang-toggle,
[data-theme="dark"] .aac-lang-menu { background: var(--bg-alt); }
[data-theme="dark"] .btn-ghost { border-color: var(--border); }
[data-theme="dark"] .hero-glow { opacity: 0.16; }
[data-theme="dark"] .integration-chip,
[data-theme="dark"] .badge-popular ~ .price-card { box-shadow: none; }

* { box-sizing: border-box; }

/* Smooth animated scroll between nav-anchor sections (#how-it-works, #features, #use-cases)
   instead of an instant jump. scroll-margin-top on the section targets below keeps content
   from landing underneath the sticky 68px header. Scoped to this stylesheet, so it only
   affects the marketing page (it's unloaded elsewhere). */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

a { color: inherit; }

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Offsets the smooth-scroll landing spot for every in-page nav anchor so section headings
   don't end up tucked under the 68px sticky header. */
#hero,
#how-it-works,
#features,
#use-cases {
  scroll-margin-top: 88px;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--ink);
}

.brand img { width: 32px; height: 32px; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.main-nav a {
  text-decoration: none;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.main-nav a:hover { color: var(--ink); background: var(--bg-alt); }
.main-nav a.current { color: var(--brand-blue); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.theme-toggle-btn:hover { background: var(--border); color: var(--ink); transform: scale(1.05); }
.theme-toggle-btn svg { width: 19px; height: 19px; stroke-width: 2.25; }
.theme-toggle-btn .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle-btn .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle-btn .icon-moon { display: block; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}

.btn-primary {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.28);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(59, 130, 246, 0.34); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-alt); }

.header-user-link { padding-left: 10px; padding-right: 16px; }
.header-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.header-user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-lg { padding: 14px 26px; font-size: 1rem; }

/* ---------- Autoplay intro (Home.razor .intro-scroll, drawn by intro-scroll.js) ----------
   One screen tall, just under the 68px header; the animation plays once on load and stops on its
   end card. Hardcoded paper colors in both site themes on purpose (a hand-drawn sketchbook scene),
   same reasoning as the hero demo widget. */
section.intro-scroll {
  position: relative;
  padding: 0; /* beats the generic "section { padding: 72px 0 }" further down, which would push the stage below the fold */
  /* soft sky-blue paper (matches the rendered videos): a light glow behind the centre, blue-tinted
     grain and faint large blotches, so the warm ink and orange accent stand out */
  background-color: #e9eff9;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.28  0 0 0 0 0.42  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.40  0 0 0 0 0.62  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
}

.intro-sticky {
  position: relative;
  height: calc(100vh - 68px);
  height: calc(100svh - 68px);
  overflow: hidden;
}

.intro-sticky canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer; /* click to play it again */
}

.intro-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #6b6157;
  font-family: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
  font-size: 16px;
  text-decoration: none;
  opacity: 0;
  transition: color 0.15s ease;
}

.intro-hint:hover { color: #b8662f; }

/* Sound toggle (intro-scroll.js): off until pressed, top-right of the stage, styled like the
   hand-drawn hint below it. The speaker's sound waves only show while it's on. */
.intro-sound {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 5px 10px;
  font-family: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
  font-size: 15px;
  color: #4b5563;
  background: rgba(255, 255, 255, .75);
  border: 1.5px solid #24201b;
  border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.intro-sound:hover { background: #fff; transform: rotate(-1.5deg); }
.intro-sound:focus-visible { outline: 2px dashed #d9834a; outline-offset: 3px; }
.intro-sound svg { width: 20px; height: 20px; }
.intro-sound .wave { opacity: 0; transition: opacity .15s ease; }
.intro-sound .mute { opacity: 1; transition: opacity .15s ease; }
.intro-sound.is-on { color: #b8662f; }
.intro-sound.is-on .wave { opacity: 1; }
.intro-sound.is-on .mute { opacity: 0; }
.intro-hint svg { width: 22px; height: 22px; animation: intro-hint-bob 1.8s ease-in-out infinite; }

@keyframes intro-hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Reduced motion: intro-scroll.js adds .intro-static and draws the finished end card once. */
.intro-scroll.intro-static .intro-sticky { height: 70vh; min-height: 360px; }
.intro-scroll.intro-static canvas { cursor: default; }
.intro-scroll.intro-static .intro-sound { display: none; }

/* ---------- Hero ---------- */
.hero {
  background: radial-gradient(1200px 500px at 50% -10%, rgba(59, 130, 246, 0.12), transparent),
    var(--bg);
  padding: 88px 0 64px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.28;
  z-index: 0;
  pointer-events: none;
}
.hero-glow.a { background: var(--brand-cyan); top: -60px; right: 4%; }
.hero-glow.b { background: var(--brand-purple); bottom: -100px; left: 2%; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  /* The chat-demo card (now 6 extra agent tabs taller than before) is taller than the headline/copy
     column, so centering the row left a large dead gap above the card while the copy sat centered
     next to it -- pinning both columns to the top uses that space instead and keeps the card flush
     with the top of the hero section as requested. */
  align-items: start;
}

.hero-copy .hero-actions,
.hero-copy .hero-note { justify-content: flex-start; }
.hero-copy .lede { margin: 0 0 30px; }

/* ---------- Hero chat mockup ---------- */
.hero-mock {
  display: block;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  transform: rotate(-1.2deg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-mock:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 32px 70px rgba(15, 23, 42, 0.2);
}
.hero-mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.hero-mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.hero-mock-dot:nth-child(3) { background: #22c55e; animation: hero-mock-live 2.4s ease-in-out infinite; }
.hero-mock-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 300px; max-height: 340px; overflow-y: auto; }
.hero-mock-msg {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #0f172a;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.45s cubic-bezier(.22,1,.36,1), transform 0.45s cubic-bezier(.22,1,.36,1);
}
.hero-mock-msg.in { opacity: 1; transform: translateY(0) scale(1); }
.hero-mock-msg.user {
  align-self: flex-end;
  background: #f8fafc;
  border-bottom-right-radius: 4px;
}
.hero-mock-msg.ai {
  align-self: flex-start;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.14);
  border-bottom-left-radius: 4px;
}
.hero-mock-cite {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-blue);
  opacity: 0;
  animation: hero-mock-cite-in 0.4s ease forwards;
  animation-delay: 0.25s;
}

/* ---------- Hero chat mockup: typing indicator ---------- */
.hero-mock-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 13px 16px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.14);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hero-mock-typing.in { opacity: 1; transform: translateY(0); }
.hero-mock-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
  opacity: 0.55;
  animation: hero-mock-bounce 1.1s ease-in-out infinite;
}
.hero-mock-typing span:nth-child(2) { animation-delay: 0.15s; }
.hero-mock-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes hero-mock-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes hero-mock-cite-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-mock-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}

/* ---------- Hero chat mockup: single header (avatar + dynamic bot label + live badge + actions) ---------- */
.hero-mock-agent { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hero-mock-agent-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-mock-agent-avatar svg { width: 14px; height: 14px; }
.hero-mock-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.hero-mock-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: hero-mock-live 2.4s ease-in-out infinite;
}

/* ---------- Hero chat mockup: use-case tabs ---------- */
/* 11 tabs (5 generic personas + 6 add-on agents) no longer fit on one line without feeling cramped, so
   this wraps onto as many rows as needed with real row-gap instead of forcing everything into one
   squeezed, barely-scrollable strip. overflow-x/scrollbar-width are kept as a fallback for any
   container narrower than a single tab's min width, but wrapping is now the primary layout. */
.hero-mock-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 3px;
  padding: 6px 8px;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hero-mock-tabs::-webkit-scrollbar { display: none; }
.hero-mock-tab {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hero-mock-tab:hover { color: #0f172a; background: #f8fafc; }
.hero-mock-tab.active { color: var(--brand-blue); background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.18); }

/* Visually separates the 6 add-on-agent tabs (Finanz-Agent onward) from the 5 general-purpose demo
   tabs before them, via Home.razor's data-group="agents" attribute on the first agent tab -- a thin
   divider reads much less cluttered than 11 identical-looking pills in a row. */
.hero-mock-tab[data-group="agents"] {
  margin-left: 4px;
  padding-left: 9px;
  border-left: 1px solid #e2e8f0;
}
.hero-mock.mock-dark .hero-mock-tab[data-group="agents"] { border-left-color: #2a3548; }

/* This subheader (and .hero-mock-icon-btn below) are deliberately hardcoded to light colors rather
   than the var(--bg)/var(--ink-soft)/var(--border) custom properties used everywhere else on this
   page. Those properties flip to their dark-theme values whenever the surrounding marketing PAGE is
   in dark mode (see the [data-theme="dark"] block up top) -- but this widget has its own, separate
   light/dark toggle (aacToggleMockTheme -> .hero-mock.mock-dark below), meant to demo what the actual
   embeddable chat widget looks like in each mode, independent of the marketing page's own theme. When
   this rule used the page's variables, viewing the page in dark mode made the "light" (non-toggled)
   state of the mock render dark-on-dark automatically -- the icon buttons in particular ended up an
   almost-invisible dark box with a low-contrast icon (reported: icons not clear). Hardcoding this
   state's colors keeps it visually light regardless of the page's own theme, matching what
   .mock-dark below already does explicitly for the dark state. */
.hero-mock-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.hero-mock-bot-label { font-weight: 700; font-size: 0.8rem; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-mock-subheader-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hero-mock-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}
.hero-mock-icon-btn:hover { color: #0f172a; }
.hero-mock-icon-btn svg { width: 13px; height: 13px; }
.hero-mock-icon-btn .icon-moon { display: none; }
.hero-mock.mock-dark .hero-mock-icon-btn .icon-sun { display: none; }
.hero-mock.mock-dark .hero-mock-icon-btn .icon-moon { display: block; }
.hero-mock-pill-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Hero chat mockup: panels (one per use-case tab), intro + quick questions ---------- */
.hero-mock-panel { display: none; flex-direction: column; gap: 12px; }
.hero-mock-panel.active { display: flex; }
.hero-mock-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hero-mock-intro-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-mock-intro p { margin: 0; font-size: 0.82rem; color: #475569; line-height: 1.5; }
.hero-mock-transcript { display: flex; flex-direction: column; gap: 10px; }
.hero-mock-questions { display: flex; flex-direction: column; gap: 8px; }
.hero-mock-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.2s;
}
.hero-mock-question:hover { border-color: rgba(59, 130, 246, 0.35); }
.hero-mock-question svg { width: 13px; height: 13px; flex-shrink: 0; color: #64748b; }
.hero-mock-question.asked { opacity: 0.4; pointer-events: none; }

/* ---------- Hero chat mockup: per-widget dark toggle (independent of the page's own theme) ---------- */
.hero-mock.mock-dark { background: #0f172a; border-color: #1e293b; }
.hero-mock.mock-dark .hero-mock-subheader,
.hero-mock.mock-dark .hero-mock-inputbar { background: #131c30; border-color: #1e293b; }
.hero-mock.mock-dark .hero-mock-tabs,
.hero-mock.mock-dark .hero-mock-bot-label { border-color: #1e293b; color: #e7ecf5; }
.hero-mock.mock-dark .hero-mock-tab { color: #8b98ad; }
.hero-mock.mock-dark .hero-mock-icon-btn { background: #0f172a; border-color: #1e293b; color: #8b98ad; }
.hero-mock.mock-dark .hero-mock-intro p,
.hero-mock.mock-dark .hero-mock-input-fake { color: #8b98ad; }
.hero-mock.mock-dark .hero-mock-question { background: #131c30; border-color: #1e293b; color: #e7ecf5; }
.hero-mock.mock-dark .hero-mock-msg.user { background: #131c30; color: #e7ecf5; }
.hero-mock.mock-dark .hero-mock-msg.ai { background: rgba(59, 130, 246, 0.12); }
.hero-mock.mock-dark .hero-mock-cite { background: #0f172a; border-color: #1e293b; }
.hero-mock.mock-dark .hero-mock-meta { color: #6d7c93; }

/* ---------- Hero chat mockup: decorative input bar + meta row ---------- */
.hero-mock-inputbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 22px 12px;
  padding: 10px 8px 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
}
.hero-mock-input-fake { flex: 1; font-size: 0.8rem; color: #64748b; }
.hero-mock-send-fake {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--brand-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-mock-send-fake svg { width: 13px; height: 13px; }

.hero-mock-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 16px;
  font-size: 0.68rem;
  color: #64748b;
}
.hero-mock-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.hero-mock-meta-dot { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-mock-msg, .hero-mock-typing, .hero-mock-dot:nth-child(3), .hero-mock-cite, .hero-mock-live-dot {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Trust strip ---------- */
.trust-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 18px 0;
}
.trust-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  align-items: center;
  justify-content: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-muted);
  font-size: 0.84rem;
  font-weight: 600;
}
.trust-item svg { width: 15px; height: 15px; color: #16a34a; flex-shrink: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 24px;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.12;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: 1.15rem;
  color: var(--ink-muted);
  max-width: 640px;
  margin: 0 auto 34px;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.hero-note {
  color: var(--ink-soft);
  font-size: 0.85rem;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-note span { display: flex; align-items: center; gap: 6px; }

.hero-shot {
  margin: 56px auto 0;
  max-width: 920px;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--bg-alt);
}

/* ---------- Sections ---------- */
section { padding: 72px 0; }
.section-alt { background: var(--bg-alt); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-tag {
  color: var(--brand-blue);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  display: block;
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 12px; font-weight: 800; letter-spacing: -0.01em; }
.section-head p { color: var(--ink-muted); margin: 0; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.step-num {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--brand-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.28);
}
.step h3 { margin: 0 0 8px; font-size: 1.05rem; }
.step p { margin: 0; color: var(--ink-muted); font-size: 0.92rem; }
.step {
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.step:hover { border-color: rgba(59, 130, 246, 0.35); box-shadow: var(--shadow); transform: translateY(-3px); }
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 34px;
  right: -24px;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-blue), transparent);
  opacity: 0.35;
}
@media (max-width: 900px) {
  .step:not(:last-child)::after { display: none; }
}

/* ---------- Feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.feature-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.feature-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { margin: 0 0 8px; font-size: 1.02rem; }
.feature-card p { margin: 0; color: var(--ink-muted); font-size: 0.9rem; }
.feature-card:nth-child(6n+1) .feature-icon,
.feature-card:nth-child(6n+4) .feature-icon { background: rgba(34, 211, 238, 0.12); color: #0891b2; }
.feature-card:nth-child(6n+2) .feature-icon,
.feature-card:nth-child(6n+5) .feature-icon { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.feature-card:nth-child(6n+3) .feature-icon,
.feature-card:nth-child(6n+6) .feature-icon { background: rgba(168, 85, 247, 0.12); color: #9333ea; }

/* ---------- Use cases ---------- */
.usecase-example {
  display: block;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-soft);
}
[data-theme="dark"] .usecase-example { background: var(--bg); }

/* ---------- Integrations ---------- */
.integration-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.integration-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.integration-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(59, 130, 246, 0.3); }

.integration-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-alt);
}
.integration-icon svg { width: 16px; height: 16px; }

/* Per-service accent colors -- generic line-art glyphs (not brand logos), tinted to hint at
   the familiar product without reproducing any trademark. */
.icon-drive       { color: #34a853; background: rgba(52, 168, 83, 0.12); }
.icon-sharepoint  { color: #185abd; background: rgba(24, 90, 189, 0.12); }
.icon-folder      { color: #f2b134; background: rgba(242, 177, 52, 0.16); }
.icon-wordpress   { color: #21759b; background: rgba(33, 117, 155, 0.12); }
.icon-shopify     { color: #5e8e3e; background: rgba(94, 142, 62, 0.14); }
.icon-upload      { color: var(--brand-blue); background: rgba(59, 130, 246, 0.12); }
.icon-claude      { color: var(--brand-purple); background: rgba(168, 85, 247, 0.12); }
.icon-editor      { color: var(--ink-soft); background: rgba(100, 116, 139, 0.14); }
.icon-any         { color: var(--brand-cyan); background: rgba(34, 211, 238, 0.14); }

/* ---------- MCP section ---------- */
.mcp-explainer {
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  text-align: center;
}
.mcp-explainer h3 { margin: 0 0 8px; font-size: 1.05rem; }
.mcp-explainer p { margin: 0; color: var(--ink-muted); font-size: 0.92rem; line-height: 1.6; }
.mcp-code-wrap {
  max-width: 520px;
  margin: 36px auto 0;
}
.mcp-code-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.mcp-code {
  /* Always a dark terminal-style block, in both light and dark theme -- previously tied to
     var(--ink), which flips to near-white in dark mode and made the pale-green text
     nearly unreadable. */
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-dark);
  color: #6ee7b7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
.mcp-clients {
  max-width: 1000px;
  margin: 48px auto 0;
  text-align: center;
}
.mcp-clients > h3 { margin: 0 0 8px; font-size: 1.15rem; }
.mcp-clients > p { max-width: 640px; margin: 0 auto 28px; color: var(--ink-muted); font-size: 0.92rem; line-height: 1.6; }
.mcp-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  text-align: left;
}
.mcp-client-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mcp-client-card h4 { margin: 0; font-size: 0.95rem; }
.mcp-client-card p { margin: 0; color: var(--ink-muted); font-size: 0.82rem; line-height: 1.55; }
.mcp-code-sm { font-size: 0.72rem; padding: 12px 14px; margin-top: auto; }

/* ---------- MCP tool reference cards (collapsible <details>) ---------- */
.tool-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  margin-bottom: 12px;
  overflow: hidden;
}
.tool-card summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
}
.tool-card summary::-webkit-details-marker { display: none; }
.tool-card summary .tool-card-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem; color: var(--brand-blue); }
.tool-card summary .tool-card-summary { color: var(--ink-muted); font-weight: 400; font-size: 0.85rem; flex: 1; }
.tool-card summary .tool-card-chevron { transition: transform 0.15s ease; flex-shrink: 0; }
.tool-card[open] summary .tool-card-chevron { transform: rotate(90deg); }
.tool-card-body { padding: 0 20px 20px; border-top: 1px solid var(--border); }
.tool-card-body h5 { margin: 16px 0 6px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); }
.tool-card-body h5:first-child { margin-top: 16px; }
.tool-card-body ul { margin: 0; padding-left: 20px; font-size: 0.88rem; line-height: 1.7; }
.tool-card-body code { font-size: 0.85em; }
.tool-card-code-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
@media (max-width: 720px) { .tool-card-code-row { grid-template-columns: 1fr; } }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: var(--bg); font-size: 0.9rem; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); }
thead th { background: var(--bg-alt); font-weight: 700; }
tbody tr:last-child td { border-bottom: none; }
.chk { color: #16a34a; font-weight: 800; }
.cross { color: var(--ink-muted); }
td.hl, th.hl { background: rgba(59, 130, 246, 0.06); }
th.hl { border-top: 3px solid var(--brand-blue); color: var(--brand-blue); }
tbody tr:nth-child(even) td:not(.hl) { background: rgba(248, 250, 252, 0.7); }

/* The light-mode zebra striping above (rgba white-ish overlay) reads as a washed-out, low-contrast
   band once the page is dark -- overridden here with a translucent light overlay instead (lightens
   the dark background a touch rather than trying to imitate a light-mode row), and the highlighted
   "us" column gets a stronger, still-on-brand blue tint so it doesn't disappear against the same
   dark background it blends into at the light-mode opacity. */
[data-theme="dark"] tbody tr:nth-child(even) td:not(.hl) { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] td.hl, [data-theme="dark"] th.hl { background: rgba(59, 130, 246, 0.14); }
[data-theme="dark"] .chk { color: #4ade80; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.price-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow);
}
.badge-popular {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
}
.price-card h3 { margin: 6px 0 6px; font-size: 1.1rem; }
.price-card .price { font-size: 2rem; font-weight: 800; margin: 6px 0 2px; }
.price-card .price small { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); }
.price-card .plan-desc { color: var(--ink-muted); font-size: 0.85rem; margin: 0 0 20px; min-height: 40px; }
.plan-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.87rem; color: var(--ink); }
.plan-list li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: #16a34a; }

/* ---------- CTA band ---------- */
.cta-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0b1120 0%, #10152b 45%, #1b1440 100%);
  color: #fff;
  padding: 80px 24px;
  border-top: 1px solid rgba(148, 163, 253, 0.18);
}
.cta-section::before, .cta-section::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.35;
  pointer-events: none;
}
.cta-section::before { background: var(--brand-blue); top: -160px; left: -80px; }
.cta-section::after { background: var(--brand-purple); bottom: -180px; right: -60px; }
.cta-band {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cta-band .cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #dbeafe;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.cta-band .cta-badge svg { width: 14px; height: 14px; color: var(--brand-cyan); }
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
.cta-band p { color: #b9c4dd; font-size: 1.05rem; margin: 0 0 32px; }
.cta-band .btn-primary {
  box-shadow: 0 12px 28px -8px rgba(59, 130, 246, 0.55);
}
.cta-band .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(59, 130, 246, 0.65); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.03); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--bg-dark);
  color: #cbd5e1;
  padding: 64px 0 28px;
  margin-top: 80px;
}
.cta-section + footer.site-footer { margin-top: 0; border-top: 1px solid rgba(148, 163, 253, 0.12); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-brand img { width: 28px; height: 28px; }
.footer-col h4 { color: #fff; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 14px; }
.footer-col a, .footer-col p { display: block; color: #94a3b8; text-decoration: none; font-size: 0.88rem; margin-bottom: 10px; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #64748b;
}
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal-links a { color: #94a3b8; text-decoration: none; }
.footer-legal-links a:hover { color: #fff; }

/* ---------- Legal / long-form content ---------- */
.legal-hero { padding: 64px 0 32px; text-align: left; }
.legal-hero h1 { font-size: 2.1rem; margin: 0 0 10px; }
.legal-hero p { color: var(--ink-muted); margin: 0; }
.legal-body { max-width: 780px; }
.legal-body h2 { font-size: 1.25rem; margin: 40px 0 12px; }
.legal-body h3 { font-size: 1.02rem; margin: 22px 0 8px; }
.legal-body p, .legal-body li { color: var(--ink-muted); font-size: 0.95rem; }
.legal-body ul { padding-left: 20px; }
.legal-updated { color: var(--ink-soft); font-size: 0.85rem; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ---------- Simple cards (About) ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; margin-top: 40px; }
.stat-card { padding: 20px; }
.stat-card .num { font-size: 2rem; font-weight: 800; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-card .label { color: var(--ink-muted); font-size: 0.85rem; margin-top: 4px; }

/* ---------- Cookie consent banner ---------- */
.aac-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--brand-gradient);
  box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.2);
  padding: 18px 28px;
  display: none;
}
.aac-cookie-banner.aac-show { display: flex; }
.aac-cookie-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.aac-cookie-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.aac-cookie-text { flex: 1; min-width: 200px; }
.aac-cookie-banner h4 { margin: 0 0 4px; font-size: 0.95rem; color: #fff; font-weight: 700; }
.aac-cookie-banner p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: rgba(255,255,255,0.92); }
.aac-cookie-banner p a { color: #fff; text-decoration: underline; white-space: nowrap; }
.aac-cookie-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.aac-cookie-actions button { font-family: inherit; font-size: 0.85rem; cursor: pointer; border-radius: 8px; padding: 9px 18px; border: 1px solid transparent; white-space: nowrap; }
.aac-cookie-accept { background: #fff; color: var(--brand-blue); border: none; font-weight: 700; }
.aac-cookie-decline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.aac-cookie-decline:hover { background: rgba(255,255,255,0.12); }
@media (max-width: 700px) {
  .aac-cookie-inner { flex-wrap: wrap; }
  .aac-cookie-actions { width: 100%; justify-content: flex-start; }
}

/* ---------- Footer language selector ---------- */
/* Positioned bottom-left so it never collides with the bottom-right chat
   widget bubble (#aac-chat-root, injected by /widget/embed.js). */
.aac-lang-widget {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9998;
  font-size: 0.85rem;
  transition: bottom 0.15s ease;
}
body.aac-cookie-active .aac-lang-widget { bottom: 96px; }
@media (max-width: 700px) {
  body.aac-cookie-active .aac-lang-widget { bottom: 168px; }
}
.aac-lang-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
  color: var(--ink);
  font-family: inherit;
}
.aac-lang-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.aac-lang-toggle:after { content: ''; border: 4px solid transparent; border-top-color: var(--ink-muted); margin-left: 2px; }
/* Flag icons for the current-language toggle and each menu option -- higher specificity than the
   plain ".aac-lang-toggle svg" rule above (which zeroes out fill/stroke for the old globe icon),
   since these are solid-color rects/paths rather than an outline icon. */
.aac-lang-toggle .aac-flag,
.aac-lang-menu .aac-flag {
  width: 18px;
  height: 13px;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  fill: initial;
  stroke: none;
}
.aac-lang-menu {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
  min-width: 150px;
  overflow: hidden;
}
[data-theme="dark"] .aac-lang-menu { border-color: var(--border); }
.aac-lang-widget.aac-open .aac-lang-menu { display: block; }
.aac-lang-menu a { display: flex; align-items: center; gap: 9px; padding: 10px 14px; color: var(--ink); text-decoration: none; font-size: 0.85rem; }
.aac-lang-menu a:hover { background: #f1f5f9; }
[data-theme="dark"] .aac-lang-menu a:hover { background: rgba(255,255,255,0.06); }
.aac-lang-menu a.current { color: var(--brand-blue); font-weight: 600; }
@media (max-width: 560px) {
  .aac-cookie-banner { left: 12px; bottom: 12px; }
  .aac-lang-widget { left: 12px; bottom: 12px; }
}

/* ---------- Cookie settings reopen link (footer) ---------- */
.footer-legal-links button.aac-cookie-settings-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #94a3b8;
  cursor: pointer;
}
.footer-legal-links button.aac-cookie-settings-link:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .steps, .feature-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy .hero-actions, .hero-copy .hero-note { justify-content: center; }
  .hero-visual { max-width: 480px; margin: 0 auto; }
  .hero-mock { transform: none; }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .cta-section { padding: 48px 20px; }
}