/* MCP & AI assistants page (design nodes ZukEA, hero states G6UWl8). Dark "garage" theme: nav, spec bar,
   buttons and footer come from /vehicles/vehicles.css (body.v); this file adds the page's own sections.
   Values mirror the 1440px design. */

.ai-h2 { font: 800 68px/.98 var(--font-display); letter-spacing: -2.5px; color: #fff; }
.ai-h2.ink { color: var(--ink); }
.ai-lede { width: 420px; max-width: 100%; font-size: 17px; line-height: 1.55; color: var(--garage-text); }
.ai-lede.ink { color: var(--ink-2); }
.ai-sec { padding-block: 128px; }
.ai-dark { background: var(--garage); }
.ai-paper { background: var(--paper); }
.ai-sec > .wrap { display: flex; flex-direction: column; gap: 56px; }
.ai-sun-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--sun); }
.ai-sun-link .lucide { width: 16px; height: 16px; }
.ai-sun-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* "Works with AI › MCP" crumb in the nav. Not a menu, just where you are. */
.ai-crumb { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--garage-line); font: 400 13px/1.2 var(--font-body); color: var(--garage-text); white-space: nowrap; }
.ai-crumb .lucide { width: 13px; height: 13px; }
.ai-crumb b { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; }
.ai-crumb b .lucide { width: 14px; height: 14px; color: var(--sun); }

/* Brand marks (24px viewBox paths from the design) and client tab icons. */
.ai-logo { width: 18px; height: 18px; flex: none; fill: currentColor; }
.c-chatgpt { color: #E6E3D6; }
.c-claude, .c-claude-code { color: #D97757; }
.c-cursor { color: #E6E3D6; }
.c-vscode { color: #4FA8F0; }
.c-other, .c-any { color: #8F8B76; }
.c-codex { color: #E6E3D6; }
.c-gemini { color: #7BA7FF; }

/* ---------- Hero ---------- */
.ai-hero { position: relative; overflow: hidden; background: var(--garage); }
/* The ASCII field (ai.js): canvas over the whole hero, edge to edge, under a dark vignette and a sun glow. */
.ai-ascii { position: absolute; inset: 0; width: 100%; height: 100%; font-family: var(--font-mono); pointer-events: none; }
.ai-hero::before { content: ""; position: absolute; z-index: 0; top: 40px; left: 50%; translate: -50% 0; width: 1200px; height: 700px; background: radial-gradient(closest-side, #0E0D07F2, #0E0D07B0 55%, #0E0D0700); pointer-events: none; }
.ai-hero::after { content: ""; position: absolute; z-index: 0; top: 420px; left: 50%; translate: -50% 0; width: 600px; height: 500px; background: radial-gradient(closest-side, #FFDF0022, #FFDF0000); pointer-events: none; }
.ai-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 780px; padding: 48px var(--gutter) 72px; text-align: center; }

.ai-tabs { display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: #FFFFFF08; box-shadow: inset 0 0 0 1px var(--garage-line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ai-tabs::-webkit-scrollbar { display: none; }
.ai-tab { flex: none; display: flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 15px/1.2 var(--font-body); color: #E6E3D6; transition: background-color .15s ease, color .15s ease; }
.ai-tab .lucide { width: 18px; height: 18px; }
.ai-tab:hover { background: #FFFFFF10; }
.ai-tab[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; }
.ai-tab[data-client="other"]:not([aria-selected="true"]) { color: #8F8B76; }
.ai-tab:focus-visible, .ai-ctab:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

/* 96px at 1440, scaling with the viewport so the longest line ("your agent with … FamilyWell") stays on one line;
   like the design it may run into the side gutters. */
.ai-hero h1 { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 100px; font: 800 min(96px, 6.6vw)/1 var(--font-display); letter-spacing: -.036em; color: #fff; }
.ai-h1-2 { display: flex; align-items: center; justify-content: center; gap: .21em; white-space: nowrap; }
/* App tiles lean towards each other: the client +4°, FamilyWell -4°. */
.ai-tile { flex: none; display: grid; place-items: center; width: .92em; height: .92em; border-radius: .23em; box-shadow: inset 0 0 0 1.5px #FFFFFF33; rotate: 4deg; color: #fff; }
.ai-tile .ai-logo, .ai-tile .lucide { width: .6em; height: .6em; }
.ai-tile.fw { rotate: -4deg; box-shadow: none; background: url(/img/ai/app-icon.webp) center / cover; }
.t-chatgpt { background: #fff; color: #0D0D0D; }
.t-claude, .t-claude-code { background: linear-gradient(180deg, #E48A6A, #C9623F); }
.t-claude-code { width: .8em; height: .8em; border-radius: .2em; }
.t-cursor { background: #151515; box-shadow: inset 0 0 0 1.5px #FFFFFF40; }
.t-vscode { background: linear-gradient(180deg, #3AA0F3, #0065A9); }
.t-other { background: linear-gradient(180deg, #4A4A44, #1E1E1A); box-shadow: inset 0 0 0 1.5px #FFFFFF40; }

.ai-sub { width: 640px; max-width: 100%; margin-top: 36px; font-size: 19px; line-height: 1.55; color: #D6D3C4; }
.ai-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 44px; }
.ai-cta { display: inline-flex; align-items: center; gap: 10px; padding: 20px 30px; border-radius: 16px; background: var(--sun); box-shadow: 0 5px 0 #A88F00; font: 700 19px/1.2 var(--font-body); color: var(--ink); transition: translate .12s ease, box-shadow .12s ease; }
.ai-cta:hover { translate: 0 2px; box-shadow: 0 3px 0 #A88F00; }
.ai-cta .ai-logo, .ai-cta .lucide { width: 22px; height: 22px; color: var(--ink); }
.ai-how { display: inline-flex; align-items: center; gap: 12px; padding: 20px 28px; border: 0; border-radius: 16px; background: var(--garage-2); box-shadow: inset 0 0 0 1.5px var(--garage-line); cursor: pointer; font: 600 19px/1.2 var(--font-body); color: #fff; }
.ai-how:hover { box-shadow: inset 0 0 0 1.5px #4A4834; }
.ai-how .lucide { width: 22px; height: 22px; }
.ai-addr { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; font: 400 16px/1.2 var(--font-mono); color: #8F8B76; }
.ai-copy-ic { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 999px; background: none; color: #8F8B76; cursor: pointer; }
.ai-copy-ic:hover { background: #FFFFFF10; color: #fff; }
.ai-copy-ic .lucide { width: 16px; height: 16px; }
.ai-micro { margin-top: 16px; font: 400 12px/1.4 var(--font-mono); color: #6F6C5C; }
.ai-hero .ai-prompt { width: 900px; max-width: 100%; margin-top: 44px; text-align: left; }
.ai-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; border: 0; background: none; cursor: pointer; font: 400 16px/1.4 var(--font-body); color: #D6D3C4; }
.ai-more .lucide { width: 16px; height: 16px; color: var(--sun); }
.ai-more:hover { color: #fff; }
[hidden] { display: none !important; }

/* Copy-paste prompt card (Claude Code / Other hero states, and the "In a terminal?" block). */
.ai-prompt { padding: 10px; border-radius: 24px; background: var(--garage-2); box-shadow: inset 0 0 0 1px var(--garage-line); }
.ai-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 16px 18px; font-size: 19px; color: #fff; }
.ai-copy-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--sun); cursor: pointer; font: 600 16px/1.2 var(--font-body); color: var(--ink); }
.ai-copy-btn .lucide { width: 16px; height: 16px; }
.ai-prompt pre { margin: 0; padding: 22px 24px; border-radius: 18px; background: #242318; font: 400 14px/2.07 var(--font-mono); color: #D6D3C4; white-space: pre-wrap; overflow-wrap: anywhere;
  /* The last lines fade out, like the design: it's a teaser, the Copy button carries the full text. */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, #0000004D); mask-image: linear-gradient(180deg, #000 55%, #0000004D); }
.ai-prompt pre b { font-weight: 400; color: var(--sun); }

/* ---------- Section heads ---------- */
.ai-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.ai-head > div { display: flex; flex-direction: column; gap: 22px; }

/* ---------- Connect: setup panel (also used inside the "How to connect?" dialog) ---------- */
.ai-setup { padding: 10px; border-radius: 28px; background: var(--garage-2); box-shadow: inset 0 0 0 1px var(--garage-line); }
.ai-setup-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px; }
.ai-ctabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ai-ctabs::-webkit-scrollbar { display: none; }
.ai-ctab { flex: none; display: flex; align-items: center; gap: 7px; padding: 10px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 15px/1.2 var(--font-body); color: #E6E3D6; }
.ai-ctab .lucide, .ai-ctab .ai-logo { width: 16px; height: 16px; }
.ai-ctab:hover { background: #FFFFFF10; }
.ai-ctab[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; }
.ai-chip { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--garage-line); font: 400 12.5px/1.2 var(--font-mono); color: var(--garage-text); }
.ai-chip .ai-copy-ic { background: #FFFFFF10; }
.ai-steps { margin-top: 10px; padding: 8px 40px; border-radius: 20px; background: #242318; }
.ai-steps li { display: flex; align-items: center; gap: 28px; padding: 30px 0; }
.ai-steps li + li { border-top: 1px solid var(--garage-line); }
.ai-steps .n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: #34331F; font: 600 17px var(--font-body); color: #fff; }
.ai-steps .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-steps strong { font-size: 22px; font-weight: 600; line-height: 1.25; color: #fff; }
.ai-steps .t > span { max-width: 620px; font-size: 16px; line-height: 1.5; color: var(--garage-text); }
.ai-steps .t b { font: 400 14px/1.6 var(--font-mono); color: var(--sun); overflow-wrap: anywhere; }
.ai-act { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 0; border-radius: 14px; background: none; box-shadow: inset 0 0 0 1.5px #4A4834; cursor: pointer; font: 600 16px/1.2 var(--font-body); color: #fff; white-space: nowrap; }
.ai-act:hover { background: #FFFFFF08; }
.ai-act .lucide { width: 18px; height: 18px; }
.ai-levels { flex: none; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--garage-2); box-shadow: inset 0 0 0 1px var(--garage-line); font-size: 14px; }
.ai-levels span { padding: 8px 14px; border-radius: 8px; color: #E6E3D6; white-space: nowrap; }
.ai-levels span:last-child { background: var(--sun); color: var(--ink); font-weight: 600; }

/* "In a terminal?" */
.ai-agent { display: flex; align-items: center; gap: 64px; padding-top: 24px; }
.ai-agent-copy { width: 400px; flex: none; display: flex; flex-direction: column; gap: 18px; }
.ai-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--garage-line); font: 400 12px/1.2 var(--font-mono); color: var(--garage-text); }
.ai-tag .lucide { width: 14px; height: 14px; color: #D97757; }
.ai-agent h3 { font: 800 36px/1.05 var(--font-display); letter-spacing: -1.2px; color: #fff; }
.ai-agent p { font-size: 16px; line-height: 1.55; color: var(--garage-text); }
.ai-agent .ai-prompt { flex: 1; min-width: 0; }

/* "How to connect?" dialog */
.ai-dialog { width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 28px; background: none; overflow: visible; }
.ai-dialog::backdrop { background: #0E0D07B3; backdrop-filter: blur(4px); }
.ai-dialog .ai-setup { max-height: calc(100dvh - 32px); overflow: auto; box-shadow: inset 0 0 0 1px var(--garage-line), 0 40px 120px #000000B3; }
.ai-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: #FFFFFF14; color: #fff; cursor: pointer; }
.ai-close .lucide { width: 18px; height: 18px; }

/* ---------- Permissions ---------- */
.ai-perm .wrap { display: flex; flex-direction: row; align-items: center; gap: 80px; }
.ai-perm-copy { width: 540px; flex: none; display: flex; flex-direction: column; gap: 22px; }
.ai-perm-copy .kicker { color: var(--muted); }
.ai-perm-copy > p:not(.kicker) { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.ai-rules { margin-top: 18px; border-top: 1px solid var(--line); }
.ai-rules li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ai-rules .ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--sun-soft); }
.ai-rules .ic .lucide { width: 18px; height: 18px; }
.ai-rules strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ai-rules span:not(.ic) { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ai-stage { flex: 1; min-width: 0; display: flex; justify-content: center; padding: 56px 48px; border-radius: 32px; background: var(--paper-2); }

/* Consent card: a working copy of the familywell.co consent screen; the toggles are live. */
.ai-consent { width: 500px; max-width: 100%; display: flex; flex-direction: column; gap: 22px; padding: 28px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 24px 60px #1211001A; }
.ai-pair { display: flex; align-items: center; gap: 10px; }
.ai-pair i { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.ai-pair i:nth-child(3) { background: #C9C4B2; }
.ai-mini { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.ai-mini .ai-logo { width: 28px; height: 28px; }
.ai-mini.claude { background: linear-gradient(180deg, #E48A6A, #C9623F); color: #fff; }
.ai-mini.fw { background: url(/img/ai/app-icon.webp) center / cover; }
.ai-consent h3 { font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.ai-consent-who { margin-top: -16px; font-size: 14px; color: var(--muted); }
.ai-fam { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 600; color: var(--ink); }
.ai-fam small { font-size: 13px; font-weight: 400; color: var(--muted); }
.ai-fam .lucide { width: 18px; height: 18px; }
.ai-fam .lucide:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--muted); }
.ai-mods > p { margin-bottom: 6px; font: 400 11px/1.3 var(--font-mono); letter-spacing: .6px; color: var(--muted); }
.ai-mods li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.ai-mods li .lucide { width: 18px; height: 18px; }
.ai-seg { display: flex; margin-left: auto; padding: 3px; border-radius: 9px; background: var(--paper); }
.ai-seg button { padding: 6px 10px; border: 0; border-radius: 7px; background: none; cursor: pointer; font: 400 12px/1.2 var(--font-body); color: var(--muted); white-space: nowrap; }
.ai-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 600; }
.ai-seg button[aria-pressed="true"][data-v="0"] { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ai-always { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ai-always .lucide { width: 14px; height: 14px; }
.ai-consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-consent-btns span { display: grid; place-items: center; height: 44px; border-radius: 10px; font-size: 16px; font-weight: 600; }
.ai-consent-btns span:first-child { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.ai-consent-btns span:last-child { background: var(--ink); color: #fff; }

/* ---------- Tools ---------- */
.ai-tools { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: 48px; }
.ai-tools li { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-top: 1px solid var(--garage-line); }
.ai-tools li:nth-child(6n) { border-bottom: 1px solid var(--garage-line); }
.ai-tools .ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--garage-2); color: var(--sun); }
.ai-tools .ic.on { background: var(--sun); color: var(--ink); }
.ai-tools .ic .lucide { width: 20px; height: 20px; }
.ai-tools .nm { flex: 1; min-width: 0; }
.ai-tools strong { display: block; font-size: 17px; font-weight: 600; color: #fff; }
.ai-tools small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--font-mono); color: #8F8B76; }
.ai-tools .chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ai-tools code { padding: 5px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--garage-line); background: #FFFFFF06; font: 400 12.5px/1.2 var(--font-mono); color: #E6E3D6; }
.ai-tools-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 15px; color: var(--garage-text); }
.ai-tools-foot p { display: flex; align-items: center; gap: 10px; }
.ai-tools-foot .lucide { width: 16px; height: 16px; flex: none; }

/* ---------- Widgets ---------- */
.ai-panel { display: block; width: 100%; height: auto; border-radius: 36px; background: var(--sun); }
.ai-wlist { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.ai-wlist span:first-child { margin-right: 4px; font: 400 13px/1.2 var(--font-mono); color: var(--muted); }
.ai-wlist span + span { padding: 7px 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--ink); }

/* ---------- Self-host & FAQ ---------- */
.ai-self .wrap { display: flex; flex-direction: row; gap: 80px; }
.ai-self-copy { width: 500px; flex: none; display: flex; flex-direction: column; gap: 22px; }
.ai-self-copy > p:not(.kicker) { font-size: 17px; line-height: 1.55; color: var(--garage-text); }
.ai-code { margin: 0; padding: 24px; border-radius: 18px; background: var(--garage-2); box-shadow: inset 0 0 0 1px var(--garage-line); font: 400 13px/1.9 var(--font-mono); color: var(--sun); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-code i { font-style: normal; color: #6F6C5C; }
.ai-faq { flex: 1; min-width: 0; border-top: 1px solid var(--garage-line); }
.ai-faq details { padding: 30px 0; border-bottom: 1px solid var(--garage-line); }
.ai-faq summary { display: flex; align-items: center; gap: 16px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 600; line-height: 1.35; color: #fff; }
.ai-faq summary::-webkit-details-marker { display: none; }
.ai-faq summary .lucide { width: 18px; height: 18px; margin-left: auto; flex: none; color: #8F8B76; }
.ai-faq details p { max-width: 680px; margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--garage-text); }
.ai-faq summary:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 6px; }

/* ---------- Final CTA ---------- */
.ai-final-wrap { padding-block: 96px; background: var(--garage); }
.ai-final { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 56px 64px; border-radius: 28px; background: var(--sun); }
.ai-final > div:first-child { max-width: 100%; }
.ai-final h2 { font: 800 48px/1.02 var(--font-display); letter-spacing: -1.6px; color: var(--ink); }
.ai-final > div:first-child > p { width: 540px; max-width: 100%; margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.ai-final-cta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.ai-final-cta .btn { padding: 18px 26px; font-weight: 700; }
.ai-final-cta p { font: 400 12px/1.2 var(--font-mono); color: var(--ink-2); }

/* ================= Responsive ================= */
@media (max-width: 1320px) {
  .ai-perm .wrap, .ai-self .wrap { gap: 56px; }
  .ai-perm-copy { width: 460px; }
  .ai-self-copy { width: 440px; }
  .ai-agent { gap: 48px; }
  .ai-agent-copy { width: 340px; }
  .ai-steps li { flex-wrap: wrap; }
  .ai-steps .t { flex-basis: 360px; }
}
@media (max-width: 1080px) {
  .ai-sec { padding-block: 96px; }
  .ai-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ai-h2 { font-size: 56px; letter-spacing: -2px; }
  .ai-perm .wrap, .ai-self .wrap { flex-direction: column; align-items: stretch; }
  .ai-perm-copy, .ai-self-copy, .ai-agent-copy { width: auto; }
  .ai-agent { flex-direction: column; align-items: stretch; gap: 32px; }
  .ai-tools { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .ai-tools li:nth-child(6) { border-bottom: 0; }
  .ai-final { flex-direction: column; align-items: flex-start; }
  .ai-final-cta { align-items: flex-start; }
  .ai-setup-top { flex-direction: column-reverse; align-items: stretch; }
  .ai-chip { align-self: flex-start; }
}
@media (max-width: 640px) {
  .ai-crumb { display: none; }
  .ai-hero-in { min-height: 0; padding: 32px var(--gutter) 56px; }
  .ai-tabs { align-self: stretch; }
  .ai-hero h1 { margin-top: 48px; font-size: 44px; gap: 8px; }
  .ai-h1-2 { flex-wrap: wrap; gap: 10px; white-space: normal; }
  .ai-sub { margin-top: 24px; font-size: 17px; }
  .ai-ctas { flex-direction: column; align-self: stretch; margin-top: 32px; }
  .ai-cta, .ai-how { justify-content: center; padding: 18px 20px; font-size: 17px; }
  .ai-addr { font-size: 14px; }
  .ai-sec { padding-block: 72px; }
  .ai-sec > .wrap { gap: 40px; }
  .ai-h2 { font-size: 40px; letter-spacing: -1.3px; line-height: 1.02; }
  .ai-h2 br { display: none; }
  .ai-prompt-head { font-size: 16px; padding-left: 12px; }
  .ai-prompt pre { padding: 18px; font-size: 12.5px; line-height: 1.9; }
  .ai-steps { padding: 4px 18px; }
  .ai-steps li { gap: 16px; padding: 22px 0; }
  .ai-steps .n { width: 36px; height: 36px; font-size: 15px; }
  .ai-steps .t { flex-basis: calc(100% - 52px); }
  .ai-steps strong { font-size: 18px; }
  .ai-steps .t > span { font-size: 15px; }
  .ai-act { margin-left: 52px; }
  .ai-levels { margin-left: 52px; font-size: 13px; }
  .ai-levels span { padding: 7px 10px; }
  /* German labels ("Lesen & Schreiben") are ~25px wider than the 390px card allows at the default size. */
  :lang(de) .ai-levels span { padding: 7px 6px; font-size: 12px; }
  .ai-stage { padding: 24px 12px; border-radius: 24px; }
  .ai-consent { padding: 20px; gap: 18px; }
  .ai-mods li { flex-wrap: wrap; }
  .ai-seg { margin-left: 28px; }
  .ai-tools li { flex-wrap: wrap; }
  .ai-tools .chips { flex-basis: 100%; justify-content: flex-start; padding-left: 56px; }
  .ai-tools-foot { flex-direction: column; align-items: flex-start; }
  .ai-panel { border-radius: 22px; }
  .ai-faq details { padding: 22px 0; }
  .ai-faq summary { font-size: 17px; }
  .ai-final-wrap { padding-block: 56px; }
  .ai-final { padding: 36px 22px; gap: 28px; }
  .ai-final h2 { font-size: 34px; letter-spacing: -1px; }
  .ai-final h2 br { display: none; }
  .ai-final-cta, .ai-final-cta .btn { align-self: stretch; justify-content: center; }
}