/* Valseq MCP product page. Brand rules: brand/valseq/GUIDELINES.md (Ivory canvas, Ink headline, one primary
   action, one sequence field). All colors come from brand tokens through the runtime adapters in styles.css. */
.ai-page { --page-max: 1200px; --page-gutter: clamp(24px, 4vw, 64px); }
.is-ai main { width: 100%; min-height: 0; padding: 0; }
.ai-page { color: var(--home-heading); font: 400 16px/1.625 var(--sans); }
.ai-page *, .ai-page *::before, .ai-page *::after { box-sizing: border-box; }
.ai-page :is(h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote) { margin: 0; }
/* Running text avoids a lone word on its last line. */
.ai-page p { text-wrap: pretty; }
.ai-container { width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }
/* Brand type scale: display 88/88, heading 48/53, subheading 22/30, body 16/26, supporting 13/22, metadata 11/16. */
.ai-page h1 { font: 500 clamp(56px, 6.6vw, 96px)/.98 var(--sans); letter-spacing: -.055em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.ai-page h2 { font: 500 clamp(34px, 3.4vw, 48px)/1.1 var(--sans); letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.ai-page h3 { font: 600 22px/1.36 var(--sans); letter-spacing: -.025em; }
.ai-page a { color: inherit; cursor: pointer; }
.ai-page .ai-eyebrow, .ai-setup .ai-eyebrow { font: 400 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ai-inverse {
  color-scheme: dark;
  --bg: var(--valseq-ink);
  --ink: var(--valseq-ivory);
  --home-heading: var(--valseq-ivory);
  --muted: color-mix(in srgb, var(--valseq-ivory) 64%, var(--valseq-ink));
  --line: color-mix(in srgb, var(--valseq-ivory) 16%, var(--valseq-ink));
  --line-strong: color-mix(in srgb, var(--valseq-ivory) 40%, var(--valseq-ink));
  --surface: color-mix(in srgb, var(--valseq-ivory) 8%, var(--valseq-ink));
  background: var(--bg); color: var(--ink);
}
/* In the dark theme the page itself is Ink, so the hero and setup bands are raised slightly and ruled. */
:root[data-theme="dark"] :is(.ai-hero, .ai-connect) { --bg: color-mix(in srgb, var(--valseq-ivory) 5%, var(--valseq-ink)); border-block: 1px solid var(--line); }

/* 1. Hero: the product message, the endpoint as the single primary action, and the sequence field. */
.ai-hero { position: relative; overflow: hidden; }
.ai-hero-grid { position: relative; z-index: 1; padding-block: 96px; }
.ai-hero-copy { max-width: 640px; }
.ai-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font: 400 11px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ai-meta span + span { color: color-mix(in srgb, var(--valseq-ivory) 56%, var(--valseq-ink)); }
.ai-hero h1 { margin-top: 40px; }
.ai-page .ai-lead { max-width: 34em; margin-top: 32px; color: var(--muted); font: 400 18px/1.66 var(--sans); }
/* The setup sits under the description, so the endpoint never appears without its instructions. */
.ai-hero-setup { max-width: 600px; margin-top: 48px; }
.ai-page .ai-hero-access { margin-top: 24px; color: var(--muted); font-size: 14px; line-height: 1.6; }
/* The field fills the space beside the copy, bleeds off the inline end and fades out before the text. */
.ai-hero-art { position: absolute; inset-block: 0; inset-inline-start: 47%; inset-inline-end: 0; color: var(--valseq-ivory);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%); mask-image: linear-gradient(to right, transparent, #000 30%); }
:root[dir="rtl"] .ai-hero-art { -webkit-mask-image: linear-gradient(to left, transparent, #000 30%); mask-image: linear-gradient(to left, transparent, #000 30%); }
.ai-field { display: block; width: 100%; height: 100%; }
.ai-field g { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ai-field-interval { fill: var(--valseq-signal); }
:root[dir="rtl"] .ai-field { transform: scaleX(-1); }

/* Shared section rhythm and heading row: heading on the left, one supporting sentence on the right. */
.ai-section { padding-block: 112px 0; }
.ai-heading-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; align-items: end; margin-bottom: 48px; }
.ai-heading-row h2 { max-width: 560px; }
.ai-heading-row p { max-width: 38ch; color: var(--muted); font-size: 17px; line-height: 1.6; }
.ai-panel figcaption, .ai-page .ai-results h3 { font: 400 11px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* 2. The example: one failed trade as a raw node response and as an agent session. */
.ai-demo-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: stretch; }
.ai-panel { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); }
.ai-panel figcaption { padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--muted); }
.ai-raw { background: var(--accent-wash); border-color: transparent; }
.ai-raw figcaption { border-color: color-mix(in srgb, var(--line-strong) 30%, transparent); }
.ai-raw pre { flex: 1; margin: 0; padding: 20px; color: var(--muted); font: 400 12.5px/1.75 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; unicode-bidi: isolate; }
.ai-json-string { color: var(--ink); }
.ai-raw mark { padding: 0 2px; background: transparent; color: var(--valseq-signal); font-weight: 600; box-shadow: inset 0 -2px 0 var(--valseq-signal); }
.ai-page .ai-panel-note { padding: 16px 20px 20px; border-top: 1px solid color-mix(in srgb, var(--line-strong) 30%, transparent); color: var(--home-heading); font-size: 15px; line-height: 1.6; }
.ai-session { padding-bottom: 8px; }
.ai-session figcaption { color: var(--ink); }
/* The dark theme shares the Ink surface, so raise the session and recess the raw response. */
:root[data-theme="dark"] .ai-session { --bg: color-mix(in srgb, var(--valseq-ivory) 6%, var(--valseq-ink)); --surface: color-mix(in srgb, var(--valseq-ivory) 12%, var(--valseq-ink)); border-color: var(--line-strong); }
:root[data-theme="dark"] .ai-raw { background: transparent; border-color: var(--line); }
/* Dark bars keep the same contrast between the two sides: a dimmed Ivory against full Ivory. */
.ai-page .ai-session-prompt { margin: 20px 20px 0; padding: 14px 16px; background: var(--surface); font-size: 15px; line-height: 1.55; }
.ai-session-prompt .ai-digest { color: var(--ink); }
.ai-session-calls { display: grid; gap: 4px; margin: 16px 20px 0 !important; padding: 0; list-style: none; }
.ai-session-calls code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: var(--muted); font: 400 12.5px/1.6 var(--mono); unicode-bidi: isolate; text-align: left; }
.ai-session-calls code::before { content: ''; align-self: center; width: 6px; height: 6px; margin-inline-end: 4px; border: 1px solid var(--line-strong); border-radius: 50%; }
.ai-session-calls b { color: var(--ink); font-weight: 500; }
.ai-call-server { color: var(--muted); }
.ai-session-answer { display: grid; gap: 12px; margin: 20px 20px 12px; color: var(--ink); font-size: 16px; line-height: 1.65; }
.ai-session-answer bdi { font-weight: 600; font-variant-numeric: tabular-nums; }
.ai-stream-visual { display: grid; gap: 12px; }
.ai-stream-chunk { visibility: hidden; }
.ai-stream-chunk.is-shown { visibility: visible; }
.ai-session.is-staged [data-step] { opacity: 0; transform: translateY(8px); }
.ai-session.is-playing [data-step] { opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
.ai-session.is-playing [data-step="2"] { transition-delay: .25s; }
.ai-session.is-playing [data-step="3"] { transition-delay: .45s; }
.ai-session.is-playing [data-step="4"] { transition-delay: .75s; }
@media (prefers-reduced-motion: reduce) {
  .ai-session.is-staged [data-step] { opacity: 1; transform: none; }
  .ai-stream-chunk { visibility: visible; }
}
.ai-digest { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font: 400 12px/24px var(--mono); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ai-digest:hover { color: var(--ink); }

/* 3. Measured: four tiles, each pairing the agent alone (muted) with the same agent using Valseq (set large,
   marked with a Signal square). One Ink rule opens the row; 1px rules divide the tiles. */
.ai-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ai-results li { min-width: 0; padding-block: 24px 8px; padding-inline: 0 28px; }
.ai-results li + li { padding-inline-start: 28px; border-inline-start: 1px solid var(--line); }
.ai-page .ai-results h3 { color: var(--muted); }
.ai-page .ai-result-pair { display: grid; gap: 10px; margin-block: 20px 16px; container-type: inline-size; }
/* A long localized figure (“6,4 Mio.”) moves below its label instead of breaking, and stays end-aligned. */
.ai-result-pair > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ai-result-pair dt { color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: normal; }
.ai-page .ai-result-pair dd { margin-inline-start: auto; color: var(--muted); font: 500 28px/1 var(--sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: normal; white-space: nowrap; }
.ai-result-with dt { color: var(--ink); }
.ai-result-with dt::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; background: var(--valseq-signal); }
/* Sized to the tile too, so the widest figure (Arabic “6.4 مليون”, about 4.1em) fits the narrowest tile. */
.ai-page .ai-result-with dd { color: var(--ink); font-size: clamp(44px, 4.2vw, 60px); font-size: min(clamp(44px, 4.2vw, 60px), 24cqi); letter-spacing: -.055em; }
.ai-page .ai-results li > p { max-width: 30ch; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* 4. Under the hood: what Valseq adds, numbered from one transaction out to the network, beside the labels
   every finding carries. One Ink rule opens the list; the labels sit on a light Stone wash. */
.ai-page .ai-tools-title { margin-bottom: 48px; }
.ai-tools-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px 72px; align-items: start; }
.ai-tool-list { padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ai-tool-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "index title calls" ". copy copy"; gap: 6px 24px; align-items: baseline; padding-block: 26px 28px; border-bottom: 1px solid var(--line); }
.ai-tool-index { grid-area: index; color: var(--muted); font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.ai-tool-list h3 { grid-area: title; }
.ai-page .ai-tool-calls { grid-area: calls; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 8px; color: var(--muted); font: 400 13px/1.6 var(--mono); unicode-bidi: isolate; }
.ai-tool-calls code { font: inherit; }
.ai-page .ai-tool-copy { grid-area: copy; max-width: 62ch; color: var(--muted); }
.ai-labels { padding: 32px; border: 1px solid transparent; background: color-mix(in srgb, var(--valseq-stone) 55%, var(--bg)); }
:root[data-theme="dark"] .ai-labels { background: transparent; border-color: var(--line); }
.ai-page .ai-labels-title { color: var(--muted); font: 400 11px/16px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ai-page .ai-labels dl { display: grid; gap: 28px; margin-top: 28px; }
.ai-labels dt { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.ai-page .ai-labels dd { margin-top: 6px; padding-inline-start: 30px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.ai-label-mark { flex: none; width: 16px; height: 16px; border: 1px solid var(--ink); }
.ai-label-proven { background: var(--ink); }
.ai-label-derived { background: linear-gradient(135deg, var(--ink) 50%, transparent 50%); }
.ai-label-unknown { border: 1.5px dashed var(--muted); }

/* Climax: one statement at the page's largest size, a beat of open space before the setup band. Its full stop
   is the Signal accent. A long translated word scales the size down (--fit) instead of overflowing. */
.ai-climax { padding-top: 176px; }
/* The mask clips only vertically, at the padding box, which reaches past the tight line height for accents and
   descenders; glyphs that overhang the inline edges (Arabic alef, italic-like overshoots) stay visible. */
.ai-page .ai-climax-title { overflow-x: visible; overflow-y: clip; padding-block: .16em .32em; margin-block: -.16em -.32em; font: 500 calc(clamp(56px, 10.4vw, 152px) * var(--fit, 1))/.92 var(--sans); letter-spacing: -.06em; text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
.ai-climax-title > span { display: block; }
.ai-climax.is-staged .ai-climax-title > span { transform: translateY(105%); }
.ai-climax.is-playing .ai-climax-title > span { transition: transform .9s cubic-bezier(.16, .84, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  .ai-climax.is-staged .ai-climax-title > span { transform: none; }
}

/* 5. Setup: the client tabs and instructions, once, on the closing Ink band. */
.ai-connect { margin-top: 128px; padding-block: 96px; }
.ai-connect-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.ai-connect h2 { max-width: 420px; }
.ai-setup-plain .ai-setup-content { padding: 0; }

/* Shared setup controls: the MCP page, the landing MCP section and the landing quickstart. */
.ai-setup { min-width: 0; display: flex; flex-direction: column; }
.ai-setup-content { padding: 28px; flex: 1; }
:is(.ai-page, .lp-mcp) .ai-setup h2 { font-size: 30px; line-height: 1.25; letter-spacing: -.035em; margin-block: 12px 22px; text-wrap: initial; }
.ai-tabs { display: flex; flex-wrap: wrap; gap: 0 20px; border-bottom: 1px solid var(--line); }
.ai-tabs [role="tab"] { flex: 0 0 auto; white-space: nowrap; min-width: 0; min-height: 44px; padding: 8px 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font: 400 14px/1.4 var(--sans); cursor: pointer; overflow-wrap: anywhere; }
.ai-page .ai-tabs [role="tab"] { min-width: min-content; overflow-wrap: normal; }
/* Reserve selected-label width so wrapping never changes when selection moves. */
.ai-tabs [role="tab"]::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
.ai-tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--valseq-signal); font-weight: 600; }
.ai-tabs [role="tab"]:hover { color: var(--ink); }
.ai-tabs [role="tab"]:active { background: var(--surface); }
.ai-setup-panels { display: grid; }
.ai-setup-panels > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; }
/* Reserve the tallest translated panel; inactive content is absent from focus and accessibility trees. */
.ai-setup-panels > [hidden] { display: block; visibility: hidden; pointer-events: none; }
.ai-command { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--line-strong); margin-top: 20px; }
.ai-command code { display: block; flex: 1; min-width: 0; padding: 14px; color: var(--ink); background: transparent; font: 400 13px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; unicode-bidi: isolate; }
.ai-copy { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 80px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: 400 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ai-copy:hover { background: var(--surface); border-color: var(--ink); }
.ai-copy:active { opacity: .7; }
.ai-command .ai-copy { background: var(--ink); color: var(--bg); border: 0; border-inline-start: 1px solid var(--line-strong); font: 500 14px/1.4 var(--sans); letter-spacing: normal; text-transform: none; }
.ai-command .ai-copy:hover { background: var(--valseq-stone); }
:is(.ai-page, .lp-mcp) .ai-setup-note { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
/* Numbered setup steps: the client's own UI names, commands and labels stand out from the words around them. */
.ai-setup .ai-steps { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: ai-step; color: var(--muted); font-size: 16px; line-height: 1.6; }
.ai-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; counter-increment: ai-step; }
.ai-steps li::before { content: counter(ai-step); content: counter(ai-step) / ''; font-size: 13px; font-variant-numeric: tabular-nums; }
.ai-ui { color: var(--ink); font-weight: 500; unicode-bidi: isolate; }
.ai-setup .ai-steps-note { margin: 20px 0 0; padding-inline-start: 30px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.ai-setup-hint .ai-steps { gap: 8px; margin: 0; font-size: 14px; }
.ai-setup-hint .ai-steps li { grid-template-columns: 24px minmax(0, 1fr); }
.ai-setup-hint .ai-steps-note { margin-top: 10px; padding-inline-start: 24px; font-size: 13px; }
.ai-setup-art { position: relative; height: 150px; flex: none; overflow: hidden; border-top: 1px solid var(--line); }
.ai-setup-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ai-setup-art g { stroke: var(--line-strong); stroke-width: .7; fill: none; }
.ai-setup-art .ai-signal { fill: var(--valseq-signal); }
.ai-setup-art > div { position: absolute; inset-inline: 28px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; font: 400 10px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ai-setup-access { font: 400 12px/1.5 var(--sans); letter-spacing: normal; text-transform: none; }
.ai-setup-version { margin-inline-start: auto; white-space: nowrap; }
.ai-page :is(button, a, [tabindex]):focus-visible, .ai-setup :is(button, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.ai-page [id] { scroll-margin-top: 110px; }
.ai-text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: inherit; font: 500 13px/1.5 var(--sans); text-decoration: none; }
.ai-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
:is(.ai-text-link, .ai-digest) > svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ai-eyebrow { color: var(--muted); font: 400 12px/1.6 var(--mono); }
.lp-mcp .ai-lead { margin-block: 24px 28px; max-width: 560px; color: var(--muted); font: 400 17px/1.65 var(--sans); }
/* Shared home quickstart and cross-link retain their existing presentation. */
.lp-ai-quickstart { margin-top: 20px; }
.lp-ai-quickstart > .ai-text-link { color: var(--lp-copy); }
.ai-setup-compact { border: 0; border-top: 1px solid var(--line); background: transparent; }
.ai-setup-compact .ai-tabs { gap: 0 12px; padding: 0; border-bottom: 0; }
.ai-setup-compact .ai-tabs [role="tab"] { padding-inline: 0; }
.ai-setup-compact .ai-command { padding: 12px 0 0; }
.ai-setup-compact .ai-command code { font-size: 12px; line-height: 1.8; }
.ai-setup-compact .copy-button { background: transparent; }
.lp-mcp { border-top: 1px solid var(--line); }
.lp-mcp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 80px; align-items: start; }
.lp-mcp-grid > .ai-setup { grid-column: 2; grid-row: 1 / span 2; }
.lp-mcp-questions { grid-column: 1; }
.lp-mcp .lp-section-label { margin-bottom: 24px; }
.lp-mcp-questions ul { margin: 0; padding: 0; list-style: none; }
.lp-mcp-questions li { padding-block: 20px; border-top: 1px solid var(--line); font: 500 21px/1.4 var(--sans); letter-spacing: -.02em; }
/* Home quickstart continues using the shared icon-copy control. */
.ai-setup-compact .ai-setup-content { padding: 0; }
.ai-setup-compact .ai-command { border: 0; margin-top: 0; gap: 4px; align-items: flex-start; }
.ai-setup-compact .ai-command code { flex: 0 1 auto; padding: 0; }
.ai-command-actions { display: inline-flex; flex: none; margin-top: -11px; }
.ai-setup-compact :is(.copy-button, .ai-info) { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer; }
.ai-setup-compact :is(.copy-button, .ai-info) svg { width: 16px; height: 16px; }
.ai-setup-compact .ai-info { justify-items: start; }
.ai-info svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ai-setup-compact :is(.copy-button, .ai-info):is(:hover, :active, [aria-expanded="true"]) { color: var(--ink); background: transparent; }
.ai-setup-hint { position: fixed; inset: auto; box-sizing: border-box; width: 320px; max-width: calc(100vw - 24px); margin: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--paper-strong); color: var(--ink); font: 400 14px/1.6 var(--sans); text-align: start; }
.ai-setup-hint::backdrop { background: transparent; }
.ai-setup-hint p { margin: 0; font: inherit; }

/* Scripts and locales. */
.ai-page:lang(ja) { font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, var(--sans); line-break: strict; }
.ai-page:lang(ja) :is(h1, h2, h3) { font-family: inherit; letter-spacing: normal; line-height: 1.45; }
.ai-page:lang(ja) :is(p, dd, td) { line-height: 1.85; }
.ai-page:lang(ja) .ai-result-pair dd { line-height: 1; }
/* Japanese headings break between phrases where supported, never inside a word. */
.ai-page:lang(ja) :is(h1, h2) { word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; }
/* Full-width glyphs fill the em box, so Japanese headings are set smaller to keep phrases on one line. */
.ai-page:lang(ja) .ai-hero h1 { font-size: clamp(40px, 4.8vw, 68px); }
.ai-page:lang(ja) h2 { font-size: clamp(30px, 2.9vw, 40px); }
.ai-page:lang(ja) .ai-climax-title { font-size: calc(clamp(44px, 7.2vw, 104px) * var(--fit, 1)); line-height: 1.2; }
.ai-page:lang(zh) .ai-climax-title { font-size: calc(clamp(48px, 8vw, 120px) * var(--fit, 1)); line-height: 1.12; letter-spacing: normal; word-break: keep-all; }
/* Tracking pulls apart joined Arabic letters and Devanagari headlines. */
.ai-page:is(:lang(ar), :lang(hi)) :is(.ai-eyebrow, .ai-meta, .ai-panel figcaption, .ai-results h3, .ai-result-pair dd, .ai-labels-title, .ai-copy, .ai-setup-art > div) { letter-spacing: normal; }
@media (forced-colors: active) {
  .ai-inverse { --ink: CanvasText; --muted: CanvasText; --line: CanvasText; --line-strong: CanvasText; --bg: Canvas; --surface: Canvas; background: Canvas; color: CanvasText; }
  .ai-tabs [aria-selected="true"] { outline: 2px solid Highlight; }
  .ai-command .ai-copy { border: 1px solid ButtonText; }
  .ai-raw { border: 1px solid CanvasText; }
  .ai-raw mark { color: Highlight; box-shadow: inset 0 -2px 0 Highlight; }
  .ai-field-interval { fill: Highlight; }
  .ai-result-with dt::before { forced-color-adjust: none; background: Highlight; }
  .ai-labels { border-color: CanvasText; }
  .ai-label-mark { forced-color-adjust: none; border-color: CanvasText; }
  .ai-label-proven { background: CanvasText; }
  .ai-label-derived { background: linear-gradient(135deg, CanvasText 50%, transparent 50%); }
  .ai-ui { font-weight: 700; }
}
@media (max-width: 1200px) {
  .ai-hero-art { inset-inline-start: 44%; }
  .ai-tabs { gap: 0 14px; }
  .ai-connect-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; }
  .ai-tools-grid { gap: 40px 48px; }
}
@media (max-width: 900px) {
  .ai-hero-grid { padding-block: 64px 56px; }
  .ai-hero-copy { max-width: 620px; }
  /* Below two columns, the field becomes a cropped band under the copy, keeping text on a quiet surface. */
  .ai-hero-art { position: relative; inset: auto; height: 240px; -webkit-mask-image: none; mask-image: none; }
  :root[dir="rtl"] .ai-hero-art { -webkit-mask-image: none; mask-image: none; }
  .ai-section { padding-top: 88px; }
  .ai-heading-row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .ai-demo-grid { grid-template-columns: 1fr; }
  /* The labels follow the list; their three levels sit side by side until phone width. */
  .ai-page .ai-tools-title { margin-bottom: 32px; }
  .ai-tools-grid { grid-template-columns: 1fr; }
  .ai-page .ai-labels dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .ai-connect-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Tiles pair up, then stack below phone width. */
  .ai-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-results li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .ai-results li:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .ai-climax { padding-top: 128px; }
  .ai-connect { margin-top: 104px; padding-block: 72px; }
  .lp-mcp-grid { grid-template-columns: 1fr; gap: 32px; }
  .lp-mcp-grid > .ai-setup { grid-column: auto; grid-row: auto; }
  .lp-mcp .ai-setup-art { height: 140px; }
}
@media (max-width: 600px) {
  .ai-page { --page-gutter: 20px; }
  .ai-page h1 { font-size: 52px; }
  .ai-page h2 { font-size: 34px; }
  .ai-hero-grid { padding-block: 48px 40px; }
  .ai-hero h1 { margin-top: 28px; }
  .ai-page .ai-lead { font-size: 17px; margin-top: 24px; }
  .ai-hero-setup { margin-top: 32px; }
  .ai-hero-art { height: 180px; }
  .ai-section { padding-top: 72px; }
  .ai-heading-row p { font-size: 16px; }
  .ai-setup-content { padding: 24px 20px; }
  :is(.ai-page, .lp-mcp) .ai-setup h2 { font-size: 27px; }
  .ai-tabs { gap: 0 12px; }
  .ai-tabs [role="tab"] { font-size: 12px; }
  .ai-command { flex-wrap: wrap; }
  .ai-command code { flex-basis: 100%; font-size: 12px; padding: 14px; }
  .ai-command .ai-copy { width: 100%; border-inline-start: 0; border-top: 1px solid var(--line-strong); }
  .ai-setup-art > div { inset-inline: 20px; font-size: 9px; }
  .ai-raw pre { padding: 16px; font-size: 12px; }
  .ai-session-answer { font-size: 15px; }
  .ai-tool-list li { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "index title" ". copy" ". calls"; padding-block: 22px 24px; }
  .ai-page .ai-tool-list h3 { font-size: 20px; }
  .ai-page .ai-tool-calls { justify-content: flex-start; margin-top: 4px; }
  .ai-labels { padding: 24px 20px; }
  .ai-page .ai-labels dl { grid-template-columns: 1fr; gap: 22px; }
  .ai-setup .ai-steps { font-size: 15px; }
  .ai-steps li { grid-template-columns: 24px minmax(0, 1fr); }
  .ai-setup .ai-steps-note { padding-inline-start: 24px; font-size: 14px; }
  /* The label moves above its bars; bars and values keep their shared columns. */
  .ai-results { grid-template-columns: 1fr; }
  .ai-results li, .ai-results li + li, .ai-results li:nth-child(n + 3) { padding: 24px 0; border-inline-start: 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .ai-page .ai-result-with dd { font-size: 52px; font-size: min(52px, 24cqi); }
  .ai-climax { padding-top: 96px; }
  .ai-connect { margin-top: 88px; padding-block: 64px; }
  .ai-setup-compact .ai-command { flex-wrap: nowrap; }
  .ai-setup-compact .ai-command code { flex-basis: auto; }
}