/*
 * AURA landing, direction N (prototype; palette Kil, light by default with Kil warm dark by prefers-color-scheme or the
 * header switch: css/tokens.css, js/boot.js). Two layers:
 *  - the default rules give a complete, static, readable page (no JS, or prefers-reduced-motion: reduce): every
 *    scripted window shows its finished state;
 *  - rules under `.motion` (set by js/aura.js only when motion is allowed) add the hero scenarios' entrances, the
 *    one-shot plays of the tiles and the pinned, scroll-scrubbed report (.bld.is-scrub).
 * Colours come only from css/tokens.css; this file adds no colour literal. Spacing sits on a 4px grid; one easing curve
 * (--ease) and three durations. Only transform and opacity move. No inline styles (CSP style-src-attr 'none'): values
 * that change reach the page as CSS custom properties through the CSSOM; data-driven sizes are in css/data.css.
 * Icons: Lucide (ISC), one sprite, 16 px, stroke 1.5. Fonts: Onest (UI and body), Newsreader (display only).
 */

/* ---------- Fallback faces (metrics measured against the web fonts, so the swap does not move the layout) ---------- */
@font-face { font-family: "Onest Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 103%; ascent-override: 94.1%; descent-override: 29.6%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 99%; ascent-override: 74.2%; descent-override: 26.8%; line-gap-override: 0%; }

/* ---------- Landing tokens (layout and type roles; colours live in tokens.css) ---------- */
:root {
  --f-sans: "Onest", "Onest Fallback", ui-sans-serif, system-ui, sans-serif;
  --f-serif: "Newsreader", "Newsreader Fallback", ui-serif, Georgia, serif;

  /* the kit's landing scale: display-lg 64/68, display-md 44/52, display-sm 32/40; fluid down to a phone */
  --fs-d1: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);
  --lh-d1: calc(var(--fs-d1) + 4px);
  --fs-d2: clamp(2rem, 1.3rem + 2.2vw, 2.75rem);
  --lh-d2: calc(var(--fs-d2) + 8px);
  --fs-d3: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --lh-d3: calc(var(--fs-d3) + 8px);
  --fs-lead: 1.125rem;

  --gut: 20px;
  --max: 1360px;
  --sec: 96px;
  --hdr-h: 64px;
  --band: 0; /* the preview note's height in px (L-15): 0 since the public deploy (11 Nov), which has no note */
  --band-h: calc(var(--band) * 1px);

  --t-fast: var(--dur-1);
  --t-menu: var(--dur-2);
  --t-enter: var(--dur-3);
  /* the hero's scenario stagger and the tiles' one-shot plays: steps of one beat, not new durations */
  --step: 140ms;
}
@media (min-width: 640px) { :root { --gut: 32px; --sec: 128px; } }
@media (min-width: 1024px) { :root { --gut: 40px; } }
@media (max-width: 900px) { :root { --hdr-h: 56px; } }

@property --bt { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font: 400 var(--text-base) / var(--leading-base) var(--f-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; position: relative;
}
::selection { background: var(--brand-subtle); color: var(--brand-subtle-foreground); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
b, strong { font-weight: 500; }
.md strong { font-weight: 600; }
del, ins { text-decoration: none; }
:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); border-radius: var(--r-xs); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; font-weight: 400; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: var(--gut); top: -64px; z-index: 100; padding: 12px 16px; background: var(--primary); color: var(--primary-foreground); border-radius: var(--r-md); font-weight: 500; transition: top var(--t-menu) var(--ease); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.i { flex: none; width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.aura { flex: none; width: 24px; height: 24px; color: var(--brand); fill: currentColor; }
.lockup { display: block; height: 28px; width: auto; aspect-ratio: 3498.7 / 1071; }
.lockup--sm { aspect-ratio: 3561.3 / 1071; }
.lockup__mark { fill: var(--brand); }
.lockup__wm { fill: var(--foreground); }
/* the header lock-up: the making-of plays inside the same box (the spreading drop may pass the mark's edge by a pixel) */
.lockup--live { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .lockup--live .nur-live { display: none; } .lockup--live .nur-still { visibility: visible; } }
.tnum { font-variant-numeric: tabular-nums; }
/* the two languages: the page language picks one (html lang; ?lang=en) */
html:not([lang="en"]) [data-l="en"], html[lang="en"] [data-l="tr"] { display: none !important; }

/* ---------- Type ---------- */
.kicker { font: 500 var(--text-md) / 20px var(--f-sans); color: var(--brand-text); margin-bottom: 16px; }
.h2 { font: 400 var(--fs-d2) / var(--lh-d2) var(--f-serif); letter-spacing: -0.02em; text-wrap: balance; }
.h3 { font: 400 var(--fs-d3) / var(--lh-d3) var(--f-serif); letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 28px; color: var(--secondary-foreground); max-width: 32em; text-wrap: pretty; }
.grad { color: var(--muted-foreground); }

/* ---------- Buttons (A-32, A-33), badges, citation marks, source cards ---------- */
.btn {
  --btn-h: var(--h-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--btn-h); padding: 0 12px;
  border-radius: var(--r-md); border: 1px solid transparent; font-size: var(--text-md); font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-brand { background: var(--brand); color: var(--brand-foreground); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--brand-hover); }
.btn-secondary { background: var(--secondary); color: var(--foreground); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.btn-secondary:hover { background: var(--secondary-hover); }
.btn-ghost { background: transparent; color: var(--secondary-foreground); }
.btn-ghost:hover { background: var(--accent); color: var(--foreground); }
.btn:disabled { background: var(--muted); color: var(--muted-foreground); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-xl { --btn-h: var(--h-xl); padding: 0 20px; font-size: var(--text-base); border-radius: 10px; }
.btn-icon { width: var(--btn-h); padding: 0; }
.ibtn { display: inline-grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: var(--r-md); color: var(--muted-foreground); }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); font-size: var(--text-xs); line-height: 1; font-weight: 500; white-space: nowrap; background: var(--muted); color: var(--secondary-foreground); }
.badge-outline { background: transparent; border: 1px solid var(--border-strong); }
/* source marks are İznik turquoise: the colour of evidence (F-05) */
.cite { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; margin: 0 1px; border-radius: var(--r-xs); background: var(--cite-subtle); color: var(--cite-foreground); font: 500 var(--text-2xs) / 1 var(--f-sans); vertical-align: 2px; font-variant-numeric: tabular-nums; }
.src { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); text-align: left; min-width: 0; }
.src .top { display: flex; align-items: center; gap: 8px; }
.src .top .cite { margin: 0; vertical-align: 0; }
.src .kb { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src .tt { font-size: var(--text-sm); line-height: 18px; font-weight: 500; }
.src .mt { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.src .mt .i { width: 14px; height: 14px; }
.src.is-press { border-color: var(--cite); box-shadow: 0 0 0 1px var(--cite); }
.srcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
.lights { display: inline-flex; gap: 6px; }
.lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.avatar { --av: 28px; width: var(--av); height: var(--av); border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--accent-strong); color: var(--secondary-foreground); font-size: var(--text-2xs); line-height: 1; font-weight: 500; letter-spacing: 0.02em; text-box: trim-both cap alphabetic; }
/* (was .avatar.brand: the header link's .brand rule turned the avatar into a 6 px square with its initials pushed left) */
.avatar--brand { background: var(--brand-subtle); color: var(--brand-subtle-foreground); }
.avatar .i { width: 14px; height: 14px; }
.bar { display: block; height: 2px; border-radius: 1px; background: var(--accent-strong); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: 0 50%; }

/* ---------- Preview note (L-15) and header (L-01, L-02) ---------- */
.preview { position: absolute; top: 0; left: 0; right: 0; z-index: 59; display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--band-h); padding: 0 var(--gut); font-size: var(--text-sm); line-height: 20px; background: var(--muted); border-bottom: 1px solid var(--border); color: var(--secondary-foreground); text-align: center; }
.preview .i { color: var(--muted-foreground); }
.preview b { color: var(--foreground); }
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--hdr-h); transform: translate3d(0, calc(var(--bt, var(--band)) * 1px), 0); translate: 0 0; border-bottom: 1px solid transparent; transition: translate var(--t-enter) var(--ease), background-color var(--t-menu) var(--ease), border-color var(--t-menu) var(--ease); }
.hdr.is-solid { background: var(--background); border-bottom-color: var(--border); }
.hdr.is-hidden { translate: 0 -101%; }
.hdr__in { height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; border-radius: var(--r-sm); }
.hdr__nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.hdr__nav a:not(.btn) { display: inline-flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: var(--r-md); color: var(--secondary-foreground); font-size: var(--text-md); line-height: 20px; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.hdr__nav a:not(.btn) .i { display: none; color: var(--muted-foreground); }
.hdr__nav a:not(.btn):hover { color: var(--foreground); background: var(--accent); }
.hdr__lang { margin-left: auto; }
.hdr__menu-cta { display: none; }
.hdr__end { display: flex; align-items: center; gap: 12px; }
.hdr__menu { display: none; }
.hdr__ic { display: grid; place-items: center; }
.hdr__ic--close { display: none; }
.hdr.is-open .hdr__ic--open { display: none; }
.hdr.is-open .hdr__ic--close { display: grid; }
.theme { display: none; margin: 0; padding: 2px; min-inline-size: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--muted); }
.js .theme { display: inline-flex; gap: 2px; }
.theme__opt { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--muted-foreground); transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.theme__opt:hover { color: var(--foreground); }
.theme__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme__opt:has(.theme__in:focus-visible) { outline: var(--focus-width) solid var(--ring); outline-offset: 1px; }
:root:not([data-theme]) .theme__opt--system, :root[data-theme="light"] .theme__opt--light, :root[data-theme="dark"] .theme__opt--dark { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }

/* ---------- Product components from the kit (P-01) ---------- */
.sb { width: var(--sidebar-w); background: var(--sidebar); color: var(--sidebar-foreground); display: flex; flex-direction: column; border-right: 1px solid var(--border); font-size: var(--text-md); line-height: 20px; min-height: 0; }
.sb-top { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 8px 0 16px; flex: none; }
.sb-brand .lockup { height: 20px; }
.sb-nav { padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; flex: none; }
.sb-scroll { flex: 1; overflow: hidden; padding: 0 8px 12px; min-height: 0; }
.sb-label { margin: 20px 8px 4px; font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); font-weight: 500; }
.sb-row { display: flex; align-items: center; gap: 10px; height: var(--h-md); padding: 0 8px; border-radius: var(--r-md); color: var(--secondary-foreground); white-space: nowrap; transition: background-color var(--t-menu) var(--ease), color var(--t-menu) var(--ease); }
.sb-row + .sb-row { margin-top: 2px; }
.sb-row .i { color: var(--muted-foreground); }
.sb-row .t { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.sb-row.is-current { background: var(--accent-strong); color: var(--foreground); }
.sb-row.primary { color: var(--foreground); font-weight: 500; }
.sb-row.primary .i { color: var(--foreground); }
.sb-foot { flex: none; padding: 8px; border-top: 1px solid var(--border); }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.sb-user .who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-user .who b { font-size: var(--text-sm); line-height: 18px; }
.sb-user .who span { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }
.topbar { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 20px; flex: none; border-bottom: 1px solid var(--border); }
.topbar .title { font-size: var(--text-md); font-weight: 500; white-space: nowrap; }
.msg-u { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.msg-u .bubble { max-width: min(88%, 520px); padding: 10px 16px; border-radius: var(--r-xl); background: var(--accent); color: var(--foreground); font-size: var(--text-base); line-height: var(--leading-base); text-wrap: pretty; }
.msg-a { display: flex; flex-direction: column; gap: 12px; }
.disc { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; color: var(--muted-foreground); font-size: var(--text-sm); line-height: 20px; }
.disc .i { width: 14px; height: 14px; color: var(--success); }
.md { font-size: var(--text-base); line-height: var(--leading-base); color: var(--foreground); text-wrap: pretty; }
.cmp { position: relative; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); }
.cmp-text { display: block; min-height: 48px; padding: 14px 16px 4px; font-size: var(--text-base); line-height: var(--leading-base); color: var(--foreground); }
.ph { color: var(--muted-foreground); }
.cmp-foot { display: flex; align-items: center; gap: 4px; padding: 8px; }
.sp { flex: 1; }
.cmp-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--h-md); padding: 0 10px; border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 500; background: var(--cite-subtle); color: var(--cite-foreground); white-space: nowrap; }
.cmp-tool { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: var(--h-md); padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--border); color: var(--secondary-foreground); font-size: var(--text-sm); font-weight: 500; }
.send { flex: none; width: var(--h-md); height: var(--h-md); border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand); color: var(--brand-foreground); }
.send .i { stroke-width: 2; }
.send.is-off { background: var(--muted); color: var(--muted-foreground); }
.dock { flex: none; padding: 0 24px 16px; }
.dock-in { max-width: var(--answer-w); margin: 0 auto; }
.kbchip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-sm); background: var(--cite-subtle); color: var(--cite-foreground); font-size: var(--text-xs); font-weight: 500; }
.kbchip .i { width: 14px; height: 14px; }

/* ---------- Product frame (L-08): the app's own components inside a browser-bar frame ---------- */
.frame { border-radius: var(--r-2xl); border: 1px solid var(--border-strong); background: var(--sidebar); box-shadow: var(--shadow-3); overflow: hidden; }
.frame__bar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.frame__bar .url { margin: 0 auto; height: 22px; padding: 0 12px; border-radius: var(--r-sm); background: var(--background); font-size: var(--text-xs); color: var(--muted-foreground); display: flex; align-items: center; gap: 6px; }
.frame__bar .url .i { width: 12px; height: 12px; }
.frame__scr { display: flex; background: var(--background); }
.frame .sb { width: 208px; font-size: var(--text-sm); flex: none; }
.frame .sb-row { height: 28px; }

/* ---------- File icons, attachments and produced files ---------- */
/* a page, its folded corner and the format's badge; one tint per format from Kil's own roles (no product logos) */
.fi { --tint: var(--n-9); --tint-bg: var(--muted); --tint-fg: var(--secondary-foreground); position: relative; flex: none; display: inline-block; width: 28px; height: 34px; }
.fi--pdf { --tint: var(--brand); --tint-bg: var(--brand-subtle); --tint-fg: var(--brand-subtle-foreground); }
.fi--doc { --tint: var(--cite); --tint-bg: var(--cite-subtle); --tint-fg: var(--cite-foreground); }
.fi--xls { --tint: var(--success); --tint-bg: var(--success-subtle); --tint-fg: var(--success); }
.fi--ppt { --tint: var(--warning); --tint-bg: var(--warning-subtle); --tint-fg: var(--warning); }
.fi--udf { --tint: var(--code-function); --tint-bg: var(--accent); --tint-fg: var(--code-function); }
.fi__ico { display: block; width: 100%; height: 100%; overflow: visible; }
.fi__ico .b { fill: color-mix(in srgb, var(--tint) 7%, var(--card)); stroke: var(--tint); stroke-width: 1.4; stroke-linejoin: round; }
.fi__ico .f { fill: color-mix(in srgb, var(--tint) 22%, var(--card)); stroke: var(--tint); stroke-width: 1.4; stroke-linejoin: round; }
.fi__b { position: absolute; left: -4px; bottom: 4px; padding: 1px 3px; border-radius: var(--r-xs); font: 600 9px / 12px var(--f-sans); letter-spacing: 0.02em; color: var(--tint-fg); background: var(--tint-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tint) 35%, transparent); }
.fi--sm { width: 16px; height: 20px; }
.fi--sm .fi__b { display: none; }
.att { display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 12px 8px 10px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); min-width: 0; }
.att__t, .fcard__t { display: flex; flex-direction: column; min-width: 0; }
/* names and their meta wrap instead of being cut with an ellipsis (10 Nov sweep) */
.att__t b, .fcard__t b { font-size: var(--text-sm); line-height: 18px; overflow-wrap: break-word; text-wrap: pretty; }
.att__t > span, .fcard__t > span { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.fcard { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--card); min-width: 0; }
.fcard__t { flex: 1; }
.fcard__k { display: none; font-size: var(--text-sm); line-height: 18px; font-weight: 500; }
.fcard__dl { display: inline-flex; align-items: center; gap: 6px; height: var(--h-md); padding: 0 10px; border-radius: var(--r-md); background: var(--primary); color: var(--primary-foreground); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; flex: none; }
.fcard__ic { display: grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: var(--r-md); border: 1px solid var(--border); color: var(--secondary-foreground); flex: none; }
.artref { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--sidebar); min-width: 0; }
.artref > .i { color: var(--muted-foreground); }
.artref > span { display: flex; flex-direction: column; min-width: 0; }
.artref b { font-size: var(--text-sm); line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artref span span { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }

/* ---------- Document viewer and pages (A-22): the page on a quiet desk, the cited passage marked ---------- */
.viewer { display: flex; flex-direction: column; height: 100%; min-height: 0; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--sidebar); overflow: hidden; }
.viewer__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--card); font-size: var(--text-xs); color: var(--muted-foreground); flex: none; }
.viewer__name { color: var(--secondary-foreground); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__pg { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer__desk { flex: 1; min-height: 0; padding: 16px; overflow: hidden; }
.page { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; padding: 24px 28px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-1); overflow: hidden; }
.page--sm { padding: 16px 20px; gap: 8px; }
.page__c { text-align: center; font-size: var(--text-xs); line-height: 16px; font-weight: 600; letter-spacing: 0.04em; color: var(--foreground); }
.page__m { text-align: center; font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); margin-bottom: 4px; }
.page__h { font-weight: 500; font-size: var(--text-md); line-height: 20px; }
.page__p { position: relative; font-size: var(--text-sm); line-height: 20px; color: var(--secondary-foreground); text-wrap: pretty; }
.page__p b { color: var(--foreground); }
.page__p .cite { margin: 0 6px 0 0; vertical-align: 1px; }
.page__hl { color: var(--foreground); }
.page__hl::before { content: ""; position: absolute; inset: -2px -6px; z-index: -1; border-radius: var(--r-xs); background: var(--highlight); transform-origin: 0 50%; }
.page__more { color: var(--muted-foreground); }
/* a produced document page (the Sales scenario's one-page Word summary): its title, its line, short sections */
.page--doc { gap: 6px; }
.page__dt { font-size: var(--text-base); line-height: 22px; font-weight: 500; color: var(--foreground); text-wrap: balance; }
.page__ds { margin-bottom: 6px; font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }
.page--doc .page__h { margin-top: 6px; font-size: var(--text-sm); line-height: 18px; }

/* ---------- Artifact panel: the app's side panel holding a chart, a table or slides ---------- */
.artp { display: flex; flex-direction: column; height: 100%; min-height: 0; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); overflow: hidden; }
.artp__bar { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex: none; }
.artp__bar > .i { color: var(--muted-foreground); }
.artp__t { font-size: var(--text-sm); line-height: 18px; font-weight: 500; flex: 1; min-width: 0; text-wrap: balance; }
.artp__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 20px 20px; }
.artp__h { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 500; text-wrap: balance; }
.artp__s { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); margin-top: 4px; }
.artp__f { margin-top: 12px; font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }
/* column chart: one series, the region that matters in clay, the rest in a neutral step; hairline grid, the lead's value on its cap */
.cchart { position: relative; flex: 1; min-height: 200px; margin-top: 20px; display: grid; }
.cgrid { position: absolute; inset: 0 0 36px 28px; display: flex; flex-direction: column; justify-content: space-between; }
.cgrid__l { position: relative; height: 0; border-top: 1px solid var(--border); }
.cgrid__l:last-child { border-top-color: var(--border-strong); }
.cgrid__l i { position: absolute; right: calc(100% + 8px); top: -8px; font: 400 var(--text-2xs) / 16px var(--f-sans); font-style: normal; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.cols { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding-left: 28px; }
.col { display: grid; grid-template-rows: minmax(0, 1fr) 36px; justify-items: center; min-width: 0; }
.col__track { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.col__b { position: relative; width: min(24px, 60%); height: calc(var(--h, 50) * 1%); border-radius: 4px 4px 0 0; background: var(--n-9); transform-origin: 50% 100%; }
.col.is-lead .col__b { background: var(--brand); }
.col__v { position: absolute; bottom: calc(var(--h, 50) * 1% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--text-xs); line-height: 16px; font-weight: 500; color: var(--foreground); font-variant-numeric: tabular-nums; }
.col__l { padding-top: 8px; font-size: var(--text-2xs); line-height: 14px; text-align: center; color: var(--muted-foreground); text-wrap: balance; }
/* slides: six small 16:9 slides, drawn with the deck's own type and two shapes; no text below 11 px */
.slides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.sl { display: grid; gap: 6px; min-width: 0; }
.sl__f { position: relative; display: flex; flex-direction: column; gap: 8px; aspect-ratio: 16 / 9; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--background); overflow: hidden; }
.sl__t { font: 500 var(--text-xs) / 16px var(--f-sans); color: var(--foreground); }
.sl__sub { font-size: var(--text-2xs); line-height: 13px; color: var(--muted-foreground); }
.sl__cover { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--brand-subtle); border-top: 2px solid var(--brand); }
.sl__lines, .sl__boxes, .sl__time, .sl__price, .sl__chk { display: flex; gap: 4px; }
.sl__lines, .sl__chk { flex-direction: column; }
.sl__lines i, .sl__chk i { height: 4px; border-radius: 2px; background: var(--border-strong); width: 80%; }
.sl__lines i:nth-child(2) { width: 64%; } .sl__lines i:nth-child(3) { width: 72%; }
.sl__chk i { position: relative; margin-left: 10px; width: 66%; }
.sl__chk i::before { content: ""; position: absolute; left: -10px; top: -1px; width: 6px; height: 6px; border-radius: 2px; background: var(--success); }
.sl__boxes i { flex: 1; height: 22px; border-radius: 3px; border: 1px solid var(--border-strong); background: var(--card); }
.sl__boxes i:nth-child(2) { border-color: var(--brand); background: var(--brand-subtle); }
.sl__time { align-items: center; margin-top: 6px; }
.sl__time i { flex: 1; height: 6px; border-radius: 3px; background: var(--n-7); }
.sl__time i:first-child { background: var(--brand); }
.sl__price { flex-direction: column; }
.sl__price i { height: 4px; border-radius: 2px; background: var(--border-strong); width: 90%; }
.sl__price b { margin-top: 2px; font-size: var(--text-2xs); line-height: 13px; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.sl figcaption { font-size: var(--text-2xs); line-height: 14px; color: var(--muted-foreground); }

/* ---------- Section heads ---------- */
.sechead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px 64px; align-items: end; }
.sechead .lead { justify-self: end; }

/* =====================================================================
 * 1. Hero
 * ===================================================================== */
.hero { position: relative; padding: calc(var(--hdr-h) + var(--band-h)) var(--gut) 0; text-align: center; display: grid; justify-items: center; }
/* the ring and its glow end with the hero: they fade out over its last stretch, so no arc crosses the next section */
/* the ring and its glow live between the header and the scenario tabs: transparent under the header (a stroke never
   runs under a menu item or the preview note), full from the ring's top, faded out before the tabs. js/aura.js (drawRing)
   writes the four bounds; the defaults are the same layout for the static page. */
.hero__bg {
  --rm0: calc(var(--band-h) + var(--hdr-h) - 4px); --rm1: calc(var(--band-h) + var(--hdr-h) + 32px); --rf0: 46svh; --rf1: 62svh;
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--rm0), var(--foreground) var(--rm1), var(--foreground) var(--rf0), transparent var(--rf1));
  mask-image: linear-gradient(to bottom, transparent var(--rm0), var(--foreground) var(--rm1), var(--foreground) var(--rf0), transparent var(--rf1));
}
/* without the script: a static copy of the ring (the script draws it in perspective, see js/aura.js heroRing) */
.hero__bg::before { content: ""; position: absolute; left: 50%; top: calc(var(--band-h) + var(--hdr-h) + 32px); width: 150vw; height: 92svh; transform: translateX(-50%); border-radius: 50%; border: 1px solid var(--brand); opacity: 0.5; }
.has-ring .hero__bg::before { display: none; }
/* placed by transform only (the script moves it onto the ring's centre), so placing it never shifts layout */
.hero__glow { position: absolute; left: 0; top: 0; width: 1800px; height: 1800px; border-radius: 50%; transform: translate(calc(var(--gx, 50vw) - 50%), calc(var(--gy, 40svh) - 50%)) scale(var(--gs, 0.9), calc(var(--gs, 0.9) * var(--gq, 0.62))); background: radial-gradient(closest-side, color-mix(in srgb, var(--b-3) 30%, transparent), color-mix(in srgb, var(--b-2) 28%, transparent) 26%, color-mix(in srgb, var(--b-1) 22%, transparent) 52%, transparent 100%); }
.hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ring__halo path { stroke: var(--brand); }
.ring__halo .h1 { stroke-width: 170; opacity: 0.008; } .ring__halo .h2 { stroke-width: 120; opacity: 0.012; } .ring__halo .h3 { stroke-width: 80; opacity: 0.016; }
.ring__halo .h4 { stroke-width: 48; opacity: 0.022; } .ring__halo .h5 { stroke-width: 26; opacity: 0.03; }
.ring__soft { stroke: var(--brand); stroke-width: 5; opacity: 0.1; }
.ring__line { stroke: var(--brand); stroke-width: 1.2; opacity: 0.72; }
.ring__rim { stroke: var(--brand-hover); stroke-width: 1.6; opacity: 0.8; }
.ring__dots rect { fill: var(--foreground); }
.ring__dots rect.a { fill: var(--brand); }
:root[data-theme="dark"] .ring__halo, :root[data-theme="dark"] .ring__dots { opacity: 0.55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ring__halo, :root:not([data-theme="light"]) .ring__dots { opacity: 0.55; } }

/* the words: the ring's top arc above them (a gap that grows with the screen), title, lede and actions in one column */
.hero__txt { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: clamp(88px, 11svh, 148px) 0 56px; }
.hero__title { font: 400 var(--fs-d1) / var(--lh-d1) var(--f-serif); letter-spacing: -0.025em; text-wrap: balance; max-width: 13em; }
.hero__lead { margin-top: 24px; font-size: var(--fs-lead); line-height: 28px; color: var(--secondary-foreground); max-width: 34em; text-wrap: balance; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.hero__demo { position: relative; width: min(100%, 1180px); display: grid; gap: 16px; text-align: left; }

/* the scenario switcher: a segmented control (A-51) above the window, never on it; the active segment carries the timer */
.hsw { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hsw__tabs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 2px; border-radius: 10px; background: var(--muted); border: 1px solid var(--border); }
.hsw__tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-lg); padding: 0 16px; border-radius: var(--r-md); font-size: var(--text-md); font-weight: 500; color: var(--secondary-foreground); white-space: nowrap; overflow: hidden; transition: color var(--t-fast) var(--ease), background-color var(--t-menu) var(--ease), box-shadow var(--t-menu) var(--ease); }
.hsw__tab .i { color: var(--muted-foreground); transition: color var(--t-fast) var(--ease); }
.hsw__tab:hover { color: var(--foreground); }
.hsw__tab[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }
.hsw__tab[aria-selected="true"] .i { color: var(--brand); }
.hsw__bar { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 1px; overflow: hidden; opacity: 0; transition: opacity var(--t-menu) var(--ease); }
.hsw__bar i { display: block; width: 100%; height: 100%; border-radius: 1px; background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); }
.is-auto .hsw__tab[aria-selected="true"] .hsw__bar { opacity: 1; }
.hsw__pause { display: none; place-items: center; width: var(--h-lg); height: var(--h-lg); border-radius: var(--r-md); color: var(--muted-foreground); transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.motion .hsw__pause { display: grid; }
.hsw__pause:hover { background: var(--accent); color: var(--foreground); }
.hsw__pause .i--play, .hsw__pause[aria-pressed="true"] .i--pause { display: none; }
.hsw__pause[aria-pressed="true"] .i--play { display: block; }

.hero__frame { width: 100%; }
.hmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hstitles { display: grid; }
.hst { grid-area: 1 / 1; opacity: 0; transition: opacity var(--t-menu) var(--ease); }
.hst.is-on { opacity: 1; }
.hmode { margin-left: auto; }
/* the four scenarios share one grid cell: the window is as tall as the tallest, so switching never moves the page */
.hscns { display: grid; min-height: 0; }
.hs { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity var(--t-menu) var(--ease), visibility 0s linear var(--t-menu); }
.hs.is-on { visibility: visible; opacity: 1; transition: opacity var(--t-enter) var(--ease) 80ms, visibility 0s; }
.hs__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: 540px; height: 100%; }
.hs__chat { display: flex; flex-direction: column; gap: 20px; padding: 20px 24px 24px; min-width: 0; }
.hs__chat .msg-u .bubble { font-size: var(--text-md); line-height: 22px; }
.hs__chat .md { font-size: var(--text-md); line-height: 22px; }
.hs__pane { padding: 16px 16px 16px 0; min-width: 0; display: flex; flex-direction: column; }
.hs__pane > * { flex: 1; }
.dl { display: grid; }
.dl li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 0; font-size: var(--text-sm); line-height: 20px; }
.dl li + li { border-top: 1px solid var(--border); }
.dl__d { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl__d--tag { color: var(--muted-foreground); font-weight: 400; }
.dl__t { color: var(--secondary-foreground); }
.dl--days li { grid-template-columns: 92px minmax(0, 1fr); }
.hs__chat .srcs { grid-template-columns: 1fr 1fr; }
.hs__chat .fcard { margin-top: 4px; }

/* =====================================================================
 * 2. Ne yapar: six tiles in an uneven grid, each a small real part of the product
 * ===================================================================== */
.caps { padding: var(--sec) 0 0; }
.tiles { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.tile:nth-child(1), .tile:nth-child(4), .tile:nth-child(5) { grid-column: span 2; }
.tile__vis { position: relative; flex: 1; min-height: 300px; display: grid; padding: 28px; background: var(--sidebar); border-bottom: 1px solid var(--border); overflow: hidden; }
.tv { position: relative; min-width: 0; align-self: center; }
.tile__cap { padding: 20px 24px 24px; display: grid; gap: 6px; }
.tile__t { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 500; }
.tile__d { color: var(--secondary-foreground); font-size: var(--text-md); line-height: 22px; max-width: 38em; text-wrap: pretty; }
/* small chat parts shared by the tiles */
.tq { justify-self: end; width: fit-content; max-width: 92%; margin-left: auto; padding: 8px 12px; border-radius: var(--r-lg); background: var(--accent); font-size: var(--text-sm); line-height: 20px; }
.ta { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); line-height: 20px; }
.ta .aura { width: 20px; height: 20px; }
/* A: answer → its source page, side by side */
.tv--cite { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.tvc__chat { display: grid; gap: 12px; }
.tvc__src { width: fit-content; min-width: 220px; }
.tvc__page .page { box-shadow: var(--shadow-2); }
/* B: an attached file and its findings */
.tv--att { display: grid; gap: 12px; }
.tva__cmp { display: grid; gap: 10px; padding: 8px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); }
.att--in { width: fit-content; background: var(--sidebar); border-radius: var(--r-md); }
.tva__q { font-size: var(--text-sm); line-height: 20px; padding: 0 4px; }
.tva__row { display: flex; align-items: center; gap: 4px; }
.tva__row .cmp-tool { padding: 0 8px; }
.tva__read { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }
.tva__read .aura { width: 20px; height: 20px; }
.tva__read .bar { grid-column: 1 / -1; }
.sevs { display: grid; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); overflow: hidden; }
.sev { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; font-size: var(--text-sm); }
.sev + .sev { border-top: 1px solid var(--border); }
.sev__d { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); flex: none; }
.sev--hi .sev__d { background: var(--destructive); } .sev--mid .sev__d { background: var(--warning); }
.sev__l { flex: 1; }
.sev__n { color: var(--secondary-foreground); font-variant-numeric: tabular-nums; }
/* C: a sheet, the variance column and the row that matters */
.tv--sheet { display: grid; gap: 12px; }
.sh { position: relative; isolation: isolate; display: grid; grid-template-columns: 28px minmax(72px, 1.1fr) repeat(3, minmax(0, 1fr)); border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); overflow: hidden; font-size: var(--text-xs); line-height: 16px; }
.sh > span { height: 28px; display: flex; align-items: center; padding: 0 8px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.sh > .sh__corner, .sh > .sh__col, .sh > .sh__n { background: var(--muted); color: var(--muted-foreground); justify-content: center; }
.sh > .sh__corner, .sh > .sh__n { border-left: 0; }
.sh > .sh__col { height: 24px; font-size: var(--text-2xs); }
.sh > .sh__col--on { color: var(--foreground); font-weight: 500; }
.sh__h { font-weight: 500; color: var(--foreground); }
.sh__r { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.sh__v.is-hl { color: var(--brand-text); font-weight: 600; }
.sh > .sh__colhl, .sh > .sh__rowhl { position: absolute; z-index: -1; pointer-events: none; padding: 0; border: 0; }
.sh > .sh__colhl { top: 0; bottom: 0; right: 0; height: auto; width: calc((100% - 28px) / 4.1); background: color-mix(in srgb, var(--brand-subtle) 60%, transparent); }
.sh > .sh__rowhl { left: 0; right: 0; top: calc(24px + 28px * 3); height: 28px; background: var(--brand-subtle); }
.tvs__res { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); line-height: 20px; }
.tvs__res .i { color: var(--success); }
.tvs__res b { color: var(--brand-text); }
/* D: an artifact with two versions */
.tv--ver { display: grid; gap: 12px; }
.artp--mini { height: auto; }
.artp--mini .artp__body { padding: 12px 16px 16px; }
.vseg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--muted); }
.vseg__o { height: 24px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--text-xs); color: var(--muted-foreground); white-space: nowrap; transition: background-color var(--t-menu) var(--ease), color var(--t-menu) var(--ease), box-shadow var(--t-menu) var(--ease); }
.vseg__o--2 { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }
.vchart { position: relative; margin-top: 20px; height: 160px; }
.vchart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vgrid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vbar { fill: var(--n-9); opacity: 0; }
.vbar.is-lead { fill: var(--brand); }
.vline { fill: none; stroke: var(--n-10); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* the last month: a dot on the line's end (an element, so the stretched chart does not squash it) and its value */
.vdot { position: absolute; left: 93.33%; top: 15%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--card); }
.vchart__v { position: absolute; left: 93.33%; top: 15%; transform: translate(-50%, -150%); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
.vmonths { display: flex; justify-content: space-between; padding: 8px 2% 0; font-size: var(--text-2xs); line-height: 14px; color: var(--muted-foreground); }
.tvv__ask { margin: 0 0 0 auto; }
.tvv__types { font-size: var(--text-xs); line-height: 18px; color: var(--muted-foreground); }
/* E: produced files */
.tvf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
/* a shelf of produced files: a first-page preview, the name, the download */
/* the preview, then the name on its own line (a narrow card wraps it between words), then the meta beside the download */
.fsh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; grid-template-areas: "pv pv" "n n" "m dl"; gap: 4px 8px; padding: 8px 8px 10px; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--card); box-shadow: var(--shadow-1); min-width: 0; }
.fsh__pv { position: relative; grid-area: pv; margin-bottom: 6px; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-xs); background: var(--background); border: 1px solid var(--border); overflow: hidden; }
.fsh__pv > .fi { position: absolute; left: 10px; bottom: 8px; width: 22px; height: 27px; }
.fsh__t { display: contents; }
.fsh__t b { grid-area: n; min-width: 0; padding-left: 2px; font-size: var(--text-sm); line-height: 18px; overflow-wrap: break-word; text-wrap: pretty; }
.fsh__t > span { grid-area: m; align-self: center; min-width: 0; padding-left: 2px; font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); text-wrap: balance; }
.fsh__dl { grid-area: dl; align-self: end; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-md); border: 1px solid var(--border); color: var(--secondary-foreground); }
.fsh__dl .i { width: 14px; height: 14px; }
.pv { position: absolute; inset: 12px 12px 40px; display: flex; flex-direction: column; gap: 8px; }
.pv__t { font-size: var(--text-2xs); line-height: 13px; font-weight: 600; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv__l { display: grid; gap: 5px; }
.pv__l i { display: block; height: 3px; border-radius: 2px; background: var(--border-strong); }
.pv__l i:nth-child(3n) { width: 72%; } .pv__l i:nth-child(4n + 2) { width: 88%; }
.pv__kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pv__kpi i { height: 18px; border-radius: 3px; border: 1px solid var(--border); background: var(--card); }
.pv__kpi i:first-child { border-color: var(--brand); background: var(--brand-subtle); }
.pv__c { display: grid; justify-items: center; gap: 4px; margin-bottom: 2px; }
.pv__c i { display: block; height: 3px; border-radius: 2px; background: var(--foreground); opacity: 0.55; width: 40%; }
.pv__c i + i { width: 62%; }
.pv__g { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; border: 1px solid var(--border); background: var(--border); }
.pv__g i { height: 12px; background: var(--card); }
.pv__g i:nth-child(-n + 3) { background: var(--muted); }
.pv__g i:nth-child(12) { background: var(--success-subtle); }
.pv--ppt { inset: auto 10px 40px; top: 50%; transform: translateY(-62%); aspect-ratio: 16 / 9; padding: 8px; border-radius: 3px; border: 1px solid var(--border); background: var(--card); gap: 6px; }
.pv__bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; }
.pv__bars i { flex: 1; border-radius: 2px 2px 0 0; background: var(--n-8); height: 40%; }
.pv__bars i:nth-child(2) { height: 62%; } .pv__bars i:nth-child(3) { height: 52%; } .pv__bars i:nth-child(4) { height: 88%; background: var(--brand); }
/* F: the web switch, two web sources and the one thing that left */
.tv--web { display: grid; gap: 12px; }
.tvw__cmp { display: grid; gap: 8px; padding: 8px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); }
.tvw__q { font-size: var(--text-sm); line-height: 20px; padding: 0 4px; }
.tvw__row { display: flex; align-items: center; gap: 6px; }
.tvw__row .cmp-chip { height: 28px; }
.wtog { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 500; background: var(--warning-subtle); color: var(--warning); transition: background-color var(--t-menu) var(--ease), color var(--t-menu) var(--ease), box-shadow var(--t-menu) var(--ease); }
.wtog__k { position: relative; width: 24px; height: 14px; border-radius: 7px; background: var(--warning); flex: none; transition: background-color var(--t-menu) var(--ease); }
.wtog__k::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); transform: translateX(10px); transition: transform var(--t-menu) var(--ease); }
.tvw__srcs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wsrc { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--card); min-width: 0; font-size: var(--text-xs); line-height: 16px; }
.wsrc > .i { width: 14px; height: 14px; margin-top: 1px; color: var(--muted-foreground); }
.wsrc > span { display: flex; flex-direction: column; min-width: 0; }
.wsrc b { font-size: var(--text-sm); line-height: 18px; overflow: hidden; text-overflow: ellipsis; }
.wsrc span span { color: var(--muted-foreground); }
.tvw__out { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); line-height: 16px; color: var(--warning); }
.tvw__out .i { width: 14px; height: 14px; }

/* =====================================================================
 * 3. Nasıl çalışır: the scroll-built report
 * Default (no JS, reduced motion): a section with the steps and the finished window. With motion (.is-scrub) the
 * section becomes a tall track with a sticky pin; js/aura.js writes each element's progress as --k (0..1), and for
 * the report's blocks --w (the wireframe) and --s (settled). Only transform and opacity change.
 * ===================================================================== */
.bld { position: relative; padding: var(--sec) 0 0; }
.bld__grid { max-width: 1600px; display: grid; grid-template-columns: clamp(280px, 26vw, 380px) minmax(0, 1fr); gap: 48px 56px; align-items: center; }
.bld__side { display: flex; flex-direction: column; min-width: 0; }
/* the side column is narrow: its heading steps down with the viewport so it keeps two lines */
.bld__side .h2 { --fs-b: min(var(--fs-d2), calc(2.2vw + 8px)); font-size: var(--fs-b); line-height: calc(var(--fs-b) + 8px); }
.bld__lead { margin-top: 20px; font-size: var(--text-base); line-height: 26px; }
.bsteps { position: relative; margin-top: 32px; display: grid; gap: 2px; }
.bsteps::before, .bsteps::after { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: var(--border); }
.bsteps::after { background: var(--brand); transform-origin: 50% 0; transform: scaleY(var(--bp, 1)); }
.bstep { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; width: 100%; padding: 6px 8px 6px 0; border-radius: var(--r-md); text-align: left; color: var(--muted-foreground); transition: color var(--t-menu) var(--ease); }
.bstep:hover { color: var(--secondary-foreground); }
.bstep__n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--background); border: 1px solid var(--border-strong); font-size: var(--text-sm); font-weight: 500; transition: background-color var(--t-menu) var(--ease), border-color var(--t-menu) var(--ease), color var(--t-menu) var(--ease); }
.bstep__x { display: grid; gap: 2px; padding-top: 5px; }
.bstep__t { font-size: var(--text-base); line-height: 22px; font-weight: 500; }
.bstep__d { font-size: var(--text-sm); line-height: 20px; }
.bstep.is-done { color: var(--secondary-foreground); }
.bstep.is-done .bstep__n { border-color: var(--brand); color: var(--brand-text); }
.bstep[aria-current="step"] { color: var(--foreground); }
.bstep[aria-current="step"] .bstep__n { background: var(--brand); border-color: var(--brand); color: var(--brand-foreground); }
.bstep[aria-current="step"] .bstep__d { color: var(--secondary-foreground); }
.bld__now { display: none; }
.bld__stage { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* the window: a chat on the left, the artifact panel on the right */
.bwin { position: relative; z-index: 2; display: flex; flex-direction: column; height: 720px; border-radius: var(--r-2xl); border: 1px solid var(--border-strong); background: var(--background); box-shadow: var(--shadow-3); overflow: hidden; }
.bwin__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--sidebar); flex: none; }
.bwin__t { font-size: var(--text-sm); font-weight: 500; flex: 1; text-align: center; }
.bwin__body { flex: 1; min-height: 0; overflow: hidden; }
.bwin__track { display: grid; grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr); height: 100%; }
.bchat { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border); }
.bchat__log { flex: 1; min-height: 0; overflow: hidden; padding: 16px 16px 8px; }
.bchat__in { display: flex; flex-direction: column; gap: 16px; }
.bchat .msg-u .bubble { font-size: var(--text-sm); line-height: 20px; padding: 10px 14px; max-width: 100%; }
.bchat .att { padding: 6px 10px 6px 8px; }
.brd { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--sidebar); border: 1px solid var(--border); }
.brd__h { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); line-height: 20px; font-weight: 500; }
.brd__h .aura { width: 20px; height: 20px; }
.brd__st { display: grid; }
.brd__a, .brd__b { grid-area: 1 / 1; }
.brd__a { opacity: 0; }
.brd__ss { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--text-xs); line-height: 16px; color: var(--secondary-foreground); }
.brd__s { display: inline-flex; align-items: center; gap: 4px; }
.brd__s .i { width: 12px; height: 12px; color: var(--success); stroke-width: 2; }
.brd__m { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.bpl { display: grid; gap: 8px; }
.bpl__h { font-size: var(--text-xs); line-height: 16px; font-weight: 500; color: var(--muted-foreground); }
.bpl__l { display: grid; gap: 6px; }
.bpl__i { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); line-height: 20px; color: var(--secondary-foreground); }
.bpl__c { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.bpl__c i { position: absolute; inset: -1.5px; border-radius: 50%; background: var(--success); }
.bpl__c i::after { content: ""; position: absolute; left: 4.5px; top: 4.5px; width: 7px; height: 4px; border-left: 1.5px solid var(--card); border-bottom: 1.5px solid var(--card); transform: rotate(-45deg); }
.bdone { font-size: var(--text-sm); line-height: 20px; }
.bcmp { padding: 8px; flex: none; }
.bcmp .cmp { border-radius: var(--r-lg); }
.bcmp .cmp .ibtn, .bcmp .cmp .cmp-tool, .bcmp .cmp .send { border-radius: var(--r-sm); }
.bcmp .cmp-text { position: relative; display: grid; min-height: 72px; padding: 10px 12px 0; font-size: var(--text-sm); line-height: 20px; }
.bcmp__req { display: block; }
.bcmp__req, .bcmp__ph { grid-area: 1 / 1; }
.bcmp__req { opacity: 0; }
.bcmp .cmp-foot { padding: 6px; }
/* the artifact panel and the report it builds */
.bart { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--card); container-type: inline-size; }
.bart__bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); flex: none; }
.bart__ic { color: var(--muted-foreground); display: grid; }
.bart__ts { display: grid; flex: 1; min-width: 0; }
.bart__t0, .bart__t1 { grid-area: 1 / 1; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bart__t0 { opacity: 0; }
.bart__body { position: relative; flex: 1; min-height: 0; padding: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, var(--foreground) 14px, var(--foreground) calc(100% - 14px), transparent); mask-image: linear-gradient(to bottom, transparent, var(--foreground) 14px, var(--foreground) calc(100% - 14px), transparent); }
.bsh { position: absolute; inset: 20px; z-index: 3; opacity: 0; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--card); overflow: hidden; pointer-events: none; }
.bsh__g { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.25fr 1fr 1fr 0.9fr; font-size: var(--text-xs); line-height: 16px; }
.bsh__c { height: 28px; display: flex; align-items: center; padding: 0 8px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; color: var(--secondary-foreground); }
.bsh__h { background: var(--muted); color: var(--foreground); font-weight: 500; }
.bsh__r { justify-content: flex-end; }
.bsh__scan { position: absolute; z-index: 0; left: 0; right: 0; top: 28px; height: 28px; background: var(--highlight); }
.brep { display: grid; grid-template-rows: auto auto minmax(132px, 1fr) auto; gap: 12px; height: 100%; }
.bblk { --dx: 0px; --dy: 0px; position: relative; isolation: isolate; min-width: 0; padding: 12px 14px; }
.bblk::before, .bblk::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-lg); pointer-events: none; }
/* the plan's wireframe: a dashed outline; settled: the card's hairline */
.bblk::before { border: 1px dashed var(--border-strong); opacity: 0; }
.bblk::after { border: 1px solid var(--border); background: var(--card); }
.bhd { padding: 4px 2px 2px; }
.bhd::after { border-color: transparent; }
.bhd__t { font-size: var(--text-lg); line-height: 24px; font-weight: 500; text-wrap: balance; }
.bhd__p { margin-top: 4px; font-size: var(--text-sm); line-height: 20px; color: var(--secondary-foreground); text-wrap: pretty; }
.bhd__s { margin-top: 4px; font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }
.bkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bkpi { display: grid; gap: 2px; align-content: start; }
.bkpi__l { font-size: var(--text-xs); line-height: 16px; color: var(--secondary-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkpi__n { font-size: var(--text-2xl); line-height: 30px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.bkpi--lead .bkpi__n { color: var(--brand-text); }
.bkpi__s { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bblk__t { font-size: var(--text-sm); line-height: 20px; font-weight: 500; }
.bblk__s { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }
.bch { display: flex; flex-direction: column; min-height: 0; }
/* six rows that share whatever height the block has (they never run past its edge: 10 Nov sweep, 1440 x 900) */
.hbars { position: relative; flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); row-gap: 2px; margin-top: 10px; padding-top: 18px; }
.hbar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 52px; gap: 10px; align-items: center; min-height: 0; font-size: var(--text-xs); line-height: 14px; }
.hbar__l { color: var(--secondary-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar.is-lead .hbar__l { color: var(--foreground); font-weight: 500; }
.hbar__tr { position: relative; height: 12px; }
.hbar__b { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w, 50) * 1%); border-radius: 0 4px 4px 0; background: var(--n-9); transform-origin: 0 50%; overflow: hidden; }
.hbar__lead { position: absolute; inset: 0; background: var(--brand); }
.hbar__v { text-align: right; color: var(--secondary-foreground); font-variant-numeric: tabular-nums; }
.hbar.is-lead .hbar__v { color: var(--foreground); font-weight: 500; }
/* the target: one hairline at 90% of the bar track (the track starts after the 112 px label column and its gap) */
.hbars__tgt { position: absolute; top: 0; bottom: 0; left: calc(122px + (100% - 122px - 62px) * 0.9); width: 0; border-left: 1px solid var(--foreground); opacity: 0.55; transform-origin: 50% 0; }
.hbars__tgt span { position: absolute; top: 0; left: 6px; white-space: nowrap; font-size: var(--text-2xs); line-height: 14px; color: var(--foreground); }
.btbl { margin-top: 8px; display: grid; }
.btr { display: grid; grid-template-columns: 1fr 1.3fr 1fr 0.7fr; gap: 8px; align-items: center; height: 28px; border-top: 1px solid var(--border); font-size: var(--text-xs); line-height: 16px; color: var(--secondary-foreground); }
.btr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btr--h { border-top: 0; height: 24px; color: var(--muted-foreground); font-weight: 500; }
.btr__r { text-align: right; }
.btr:not(.btr--h) .btr__r { color: var(--foreground); font-weight: 500; }
.bsk { position: absolute; z-index: 0; left: 14px; height: 8px; border-radius: 4px; background: var(--accent-strong); opacity: 0; }
.bsk--l { top: 16px; width: 48%; } .bsk--n { top: 36px; width: 64%; height: 14px; }
.bsk--t { top: 16px; width: 40%; } .bsk--p { top: 34px; width: 72%; }
/* the exported files: under the window's bottom edge; with motion they slide out from behind it */
.bexp { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; min-height: 58px; }
.bexp .fcard { box-shadow: var(--shadow-2); }
@container (max-width: 600px) {
  .bkpi__n { font-size: var(--text-xl); line-height: 26px; }
  .hbar { grid-template-columns: 96px minmax(0, 1fr) 48px; }
  .hbars__tgt { left: calc(106px + (100% - 106px - 58px) * 0.9); }
}
@container (max-width: 540px) {
  .bkpis { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
 * 4. Ekipler için
 * ===================================================================== */
.teams { padding: var(--sec) 0 0; }
.tteams { margin-top: 48px; }
.ttabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 2px; width: fit-content; max-width: 100%; border-radius: 10px; background: var(--muted); border: 1px solid var(--border); }
.ttabs__ind { display: none; }
.ttab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-xl); padding: 0 20px; border-radius: var(--r-md); font-size: var(--text-base); font-weight: 500; color: var(--secondary-foreground); white-space: nowrap; transition: color var(--t-fast) var(--ease), background-color var(--t-menu) var(--ease), box-shadow var(--t-menu) var(--ease); }
.ttab .i { color: var(--muted-foreground); }
.ttab:hover { color: var(--foreground); }
.ttab[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }
.ttab[aria-selected="true"] .i { color: var(--brand); }
.tpanels { margin-top: 24px; }
.team { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; padding: 8px; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--border); }
.team[hidden] { display: none; }
@media (min-width: 901px) {
  .tpanels { display: grid; }
  .tpanels > .team { grid-area: 1 / 1; }
  .tpanels > .team[hidden] { display: grid; visibility: hidden; }
}
.team:focus-visible { outline-offset: 4px; border-radius: var(--r-2xl); }
.team__side { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px 24px 24px; }
.team__lbl { font-size: var(--text-sm); line-height: 20px; font-weight: 500; color: var(--muted-foreground); }
.reqs { display: grid; gap: 8px; margin-bottom: 20px; }
.req { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--border); color: var(--secondary-foreground); font-size: var(--text-base); line-height: var(--leading-base); }
.req--main { background: var(--accent); border-color: transparent; color: var(--foreground); }
.req__tag { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--background); font-size: var(--text-sm); line-height: 18px; }
/* concentric with the panel: outer 20 - inset 8 = 12 */
.team__out { display: flex; min-width: 0; padding: 16px; border-radius: var(--r-lg); background: var(--sidebar); }
.owin { flex: 1; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--card); box-shadow: var(--shadow-2); overflow: hidden; }
.owin__bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); flex: none; }
.owin__bar > .i { color: var(--muted-foreground); }
.owin__t { flex: 1; font-size: var(--text-sm); font-weight: 500; }
.owin__body { display: flex; flex-direction: column; padding: 20px 24px 24px; }
.o__h { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 500; text-wrap: balance; }
.o__s { margin-top: 4px; font-size: var(--text-sm); line-height: 20px; color: var(--muted-foreground); margin-bottom: 16px; }
.o__src, .o__rule { margin-top: 12px; font-size: var(--text-xs); line-height: 18px; color: var(--muted-foreground); }
.owin .fcard--row { margin-top: 16px; }
.ofiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.ofiles .fcard--row { margin-top: 0; }
/* finance: the VAT table */
.otbl { display: grid; grid-template-columns: minmax(140px, 1.6fr) 0.6fr repeat(3, minmax(0, 1fr)); font-size: var(--text-sm); line-height: 20px; }
.otbl > span { padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.otbl > span:nth-child(5n + 1) { padding-left: 0; }
.otbl > span:nth-child(5n) { padding-right: 0; }
.otbl .th { font-size: var(--text-xs); color: var(--muted-foreground); font-weight: 500; border-bottom-color: var(--border-strong); }
.otbl .r { text-align: right; }
.otbl .tot { font-weight: 600; border-bottom: 0; }
/* HR: the calculator */
.ocalc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ocalc__in { display: grid; gap: 12px; }
.ofield { display: grid; gap: 6px; }
.ofield__l { font-size: var(--text-sm); line-height: 18px; font-weight: 500; }
.ofield__i { display: flex; align-items: center; height: var(--h-lg); border-radius: var(--r-md); border: 1px solid var(--input); background: var(--card); overflow: hidden; }
.ofield__v { flex: 1; padding: 0 10px; text-align: right; font-size: var(--text-md); }
.ofield__u { height: 100%; display: grid; place-items: center; padding: 0 10px; border-left: 1px solid var(--border); background: var(--muted); font-size: var(--text-xs); color: var(--muted-foreground); }
.ocalc__out { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--background); }
.ocalc__l { font-size: var(--text-sm); line-height: 18px; color: var(--secondary-foreground); }
.ocalc__n { font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.02em; color: var(--brand-text); }
.seg { display: flex; gap: 2px; height: 8px; margin-top: 4px; }
.seg i { display: block; height: 100%; border-radius: 2px; }
.seg__a { background: var(--n-10); flex: 4; } .seg__b { background: var(--n-7); flex: 3; } .seg__c { background: var(--brand); flex: 19; }
.seg__k { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--text-xs); line-height: 16px; color: var(--secondary-foreground); }
.seg__k span { display: inline-flex; align-items: center; gap: 6px; }
.seg__k i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ocalc__r { margin-top: auto; font-size: var(--text-xs); line-height: 18px; color: var(--secondary-foreground); }
/* legal: the clause diff */
.odiff { display: grid; }
.odiff__r { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border); }
.odiff__r:first-child { border-top: 0; padding-top: 0; }
.odiff__h { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); line-height: 20px; font-weight: 500; }
.odiff__h .tnum { color: var(--muted-foreground); font-weight: 400; }
.odiff__o, .odiff__n { display: flex; align-items: baseline; gap: 10px; font-size: var(--text-sm); line-height: 20px; }
.odiff__tag { flex: none; width: 36px; font-size: var(--text-xs); color: var(--muted-foreground); }
.odiff__o del { color: var(--secondary-foreground); text-decoration: line-through; text-decoration-color: var(--destructive); text-decoration-thickness: 1px; }
.odiff__n ins { padding: 0 4px; margin: 0 -4px; border-radius: var(--r-xs); background: var(--success-subtle); color: var(--foreground); }
/* sales: the ranked reasons */
.oranks { display: grid; gap: 14px; }
.orank { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: var(--text-sm); line-height: 18px; }
.orank__l { color: var(--secondary-foreground); }
.orank.is-lead .orank__l { color: var(--foreground); font-weight: 500; }
.orank__v { color: var(--secondary-foreground); font-variant-numeric: tabular-nums; }
.orank__tr { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; }
.orank__b { display: block; height: 100%; width: calc(var(--w, 50) * 1%); border-radius: 3px; background: var(--n-9); }
.orank.is-lead .orank__b { background: var(--brand); }
/* every other team: a quiet row, no tabs */
.others { margin-top: 64px; }
.others__t { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 500; }
.others__l { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.oth { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 4px 12px; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--border); }
.oth > .i { margin-top: 3px; color: var(--muted-foreground); }
.oth__t { font-weight: 500; }
.oth__q { grid-column: 2; color: var(--secondary-foreground); font-size: var(--text-md); line-height: 22px; }

/* =====================================================================
 * 5. Bilgi tabanı
 * ===================================================================== */
.kbsec { padding: var(--sec) 0 0; }
.kbsteps { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kbs { display: flex; flex-direction: column; min-width: 0; }
.kbs__n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); font-size: var(--text-sm); font-weight: 500; color: var(--brand-text); }
.kbs__t { margin-top: 16px; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 500; }
.kbs__d { margin-top: 4px; color: var(--secondary-foreground); font-size: var(--text-md); line-height: 22px; min-height: 44px; text-wrap: pretty; }
.kwin { margin-top: 20px; flex: 1; display: flex; flex-direction: column; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--card); overflow: hidden; }
.kwin__bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--sidebar); flex: none; }
.kwin__bar > .i { color: var(--muted-foreground); }
.kwin__bar .aura { width: 18px; height: 18px; }
.kwin__t { flex: 1; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kwin__m { font-size: var(--text-xs); color: var(--muted-foreground); white-space: nowrap; }
.kwin__body { display: flex; flex-direction: column; padding: 12px; flex: 1; }
.kwin__body--qa { gap: 12px; padding: 16px; }
.kdrop { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; margin-bottom: 8px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); color: var(--muted-foreground); font-size: var(--text-sm); }
.kbr { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; padding: 0 4px; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.kbr:last-child { border-bottom: 0; }
.kbr__n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st { display: inline-flex; align-items: center; gap: 8px; color: var(--secondary-foreground); font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); }
.st--ok::before { background: var(--success); }
.st--run::before { background: var(--brand); }
.st--wait { color: var(--muted-foreground); }
.st--run { display: grid; grid-template-columns: 8px auto; column-gap: 8px; row-gap: 4px; }
.st--run .bar { grid-column: 2; width: 72px; }
.st--run .bar i { transform: scaleX(0.6); }
.kpr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--border); }
.kpr__w { display: flex; flex-direction: column; min-width: 0; }
.kpr__w b { font-size: var(--text-sm); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpr__w span { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }
.kpr__r { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: var(--r-md); border: 1px solid var(--border); font-size: var(--text-xs); color: var(--secondary-foreground); white-space: nowrap; }
.kpr__r .i { width: 12px; height: 12px; color: var(--muted-foreground); }
.kpnote { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: var(--text-xs); color: var(--muted-foreground); }
.kpnote .i { width: 14px; height: 14px; }
.kwin .src { width: fit-content; min-width: 200px; }
.kwin .page { margin-top: 4px; }

/* =====================================================================
 * 6. Güvenlik ve gizlilik: the one warm-dark band (data-theme="dark" brings Kil dark)
 * ===================================================================== */
.sec { position: relative; padding: var(--sec) 0 0; }
.sec__band { padding: var(--sec) 0; background: var(--sec-band); color: var(--foreground); border-block: 1px solid var(--sec-band-edge); }
.sec__in { text-align: center; display: grid; justify-items: center; }
.sec__title { max-width: 15em; }
.num { color: var(--brand-text); font-variant-numeric: tabular-nums; }
.sec__lead { margin-top: 24px; text-align: center; max-width: 40em; }
/* The boundary (L-06b): the inside, lit and edged in clay (what AURA works with and the model, on your hardware); the
   wall with its one door, the web search switch; the outside, a ledger of what leaves, counted. Everything is laid out
   by the grid; js/aura.js (setupVault) draws the wires in the gutters between the boxes and moves the light along them.
   Static (no JS or reduced motion): the same boxes and wires at rest, and the switch shows each state's end. */
.vlt { --vlt-gap: 72px; position: relative; margin: 64px auto 0; max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); column-gap: var(--vlt-gap); text-align: left; }
.vlt__wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; }
.vlt__in, .vlt__out { display: flex; flex-direction: column; gap: 24px; padding: 24px 28px 28px; border-radius: var(--r-2xl); min-width: 0; }
.vlt__in { overflow: clip; border: 1px solid color-mix(in srgb, var(--brand) 58%, transparent); background: radial-gradient(90% 80% at 76% 58%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 70%), var(--sec-band-raise); }
.vlt__out { border: 1px dashed var(--border-strong); transition: border-color var(--t-enter) var(--ease); }
.vlt__hd { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 36px; }
.vlt__tag { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--text-md) / 20px var(--f-sans); color: var(--brand-text); }
.vlt__out .vlt__tag { color: var(--secondary-foreground); }
.vlt__out .vlt__tag .i { color: var(--muted-foreground); }
.vlt__sub { font-size: var(--text-sm); line-height: 20px; color: var(--muted-foreground); }
.vlt__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); column-gap: 88px; align-items: center; }
.vlt__items { display: grid; gap: 12px; }
.vlt__item { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: color-mix(in srgb, var(--foreground) 3%, var(--sec-band-raise)); transition: border-color var(--t-enter) var(--ease); }
.vlt__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--brand-subtle); color: var(--brand-subtle-foreground); }
.vlt__it { display: flex; flex-direction: column; min-width: 0; }
.vlt__it b { font-size: var(--text-base); line-height: 22px; }
.vlt__it span { font-size: var(--text-sm); line-height: 18px; color: var(--muted-foreground); }
.vlt__item.is-hit { border-color: color-mix(in srgb, var(--brand) 70%, transparent); }
/* the model: Nur in its own light, the one thing every wire leads to */
.vlt__core { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 28px 20px 24px; border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, var(--brand) 50%, var(--border-strong)); background: color-mix(in srgb, var(--brand) 6%, var(--sec-band-raise)); text-align: center; }
.vlt__glow { position: absolute; left: 50%; top: 50%; z-index: -1; width: 136%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 16%, transparent), transparent); pointer-events: none; }
.vlt__mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 50%; background: var(--sec-band); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.vlt__mark .aura { width: 32px; height: 32px; }
.vlt__core b { font-size: var(--text-base); line-height: 22px; }
.vlt__core > span:last-child { font-size: var(--text-sm); line-height: 18px; color: var(--muted-foreground); }
/* the outside: the switch, the count and the ledger */
.vlt__count { display: flex; align-items: baseline; gap: 16px; }
.vlt__n { font: 400 72px / 64px var(--f-serif); letter-spacing: -0.02em; color: var(--brand-text); }
.vlt__nl { display: grid; font-size: var(--text-md); line-height: 20px; color: var(--secondary-foreground); }
/* the state-bound words: the hidden one is visibility: hidden too, so a screen reader only reads what is true now */
.vlt__nl0, .vlt__nl1, .vlt__c0, .vlt__c1, .vlt__val { transition: opacity var(--t-menu) var(--ease), transform var(--t-enter) var(--ease), visibility 0s linear var(--t-menu); }
.vlt__nl0, .vlt__nl1 { grid-area: 1 / 1; }
.vlt__nl1, .vlt.is-web .vlt__nl0, .vlt__c1, .vlt__row.is-on .vlt__c0 { opacity: 0; visibility: hidden; }
.vlt.is-web .vlt__nl1, .vlt__row.is-on .vlt__c1 { opacity: 1; visibility: visible; transition-delay: 0s; }
.vlt__led { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.vlt__lh { font-size: var(--text-sm); line-height: 20px; color: var(--muted-foreground); }
.vlt__rows { display: grid; gap: 8px; margin: 0; }
.vlt__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: color-mix(in srgb, var(--foreground) 2%, transparent); transition: border-color var(--t-enter) var(--ease), background-color var(--t-enter) var(--ease); }
.vlt__row dt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--text-md); line-height: 20px; color: var(--foreground); }
.vlt__row dt .i { color: var(--muted-foreground); }
.vlt__c { display: grid; margin: 0; font-size: var(--text-md); line-height: 20px; font-weight: 500; color: var(--secondary-foreground); }
.vlt__c0, .vlt__c1 { grid-area: 1 / 1; justify-self: end; }
.vlt__row.is-on .vlt__c1 { color: var(--warning); }
/* the values: room for them is always kept (no shift); each appears when its packet arrives */
.vlt__v { position: relative; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; min-height: 28px; }
/* nothing has left yet: a quiet dash where the values will land */
.vlt__v::before { content: "—"; position: absolute; left: 2px; top: 4px; font-size: var(--text-sm); line-height: 20px; color: var(--muted-foreground); transition: opacity var(--t-menu) var(--ease); }
.vlt__row.is-on .vlt__v::before { opacity: 0; }
.vlt__val { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-sm); background: var(--warning-subtle); color: var(--warning); font-size: var(--text-sm); line-height: 18px; white-space: nowrap; opacity: 0; visibility: hidden; transform: translate3d(0, 4px, 0); }
.vlt__val.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vlt__row.is-hit { border-color: color-mix(in srgb, var(--warning) 60%, transparent); background: color-mix(in srgb, var(--warning) 6%, transparent); }
.vlt__note { display: grid; margin-top: auto; font-size: var(--text-sm); line-height: 20px; color: var(--muted-foreground); }
.vlt__note0, .vlt__note1 { grid-area: 1 / 1; transition: opacity var(--t-menu) var(--ease), visibility 0s linear var(--t-menu); }
.vlt__note1, .vlt.is-web .vlt__note0 { opacity: 0; visibility: hidden; }
.vlt.is-web .vlt__note1 { opacity: 1; visibility: visible; transition-delay: 0s; }
.vlt.is-web .vlt__out { border-color: color-mix(in srgb, var(--warning) 50%, transparent); }
/* the wires, the door and the light (SVG, written by the script) */
.vw { stroke: color-mix(in srgb, var(--brand) 42%, transparent); stroke-width: 1.25; stroke-linecap: round; }
.vw--stub { stroke: color-mix(in srgb, var(--brand) 42%, transparent); stroke-dasharray: 2 5; }
.vw--out { stroke: var(--warning); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms var(--ease); }
.vlt.is-web .vw--out { stroke-dashoffset: 0; }
.vp { fill: var(--brand); }
.vp--out { fill: var(--warning); }
.vdoor__post { fill: var(--brand); }
.vdoor__bar { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; transition: transform 520ms var(--ease), opacity 520ms var(--ease); }
.vlt.is-web .vdoor__bar { transform: var(--open, translate(0, -18px)); opacity: 0.35; }
.vlock__c { fill: var(--sec-band); stroke: color-mix(in srgb, var(--brand) 55%, transparent); stroke-width: 1; }
.vlock use { fill: none; stroke: var(--brand-text); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.vlock { transform-box: fill-box; transform-origin: center; transition: opacity var(--t-menu) var(--ease), transform var(--t-enter) var(--ease); }
.vlt.is-web .vlock { opacity: 0; transform: scale(0.6); }
/* without motion the boundary changes state at once: the end states only */
html:not(.motion) .vlt *, html:not(.motion) .vlt *::after { transition: none !important; }
/* the switch (A-40): 32 x 20, its state in words beside it; a real switch (role="switch", aria-checked) */
.wsw { display: none; align-items: center; gap: 10px; height: var(--h-lg); padding: 0 12px 0 10px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--sec-band-raise); font-size: var(--text-md); font-weight: 500; transition: border-color var(--t-fast) var(--ease); }
.js .wsw { display: inline-flex; }
.wsw:hover { border-color: var(--muted-foreground); }
.wsw__k { position: relative; flex: none; width: 32px; height: 20px; border-radius: 10px; background: var(--accent-strong); transition: background-color var(--t-menu) var(--ease); }
.wsw__k::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--foreground); transition: transform var(--t-menu) var(--ease); }
.wsw[aria-checked="true"] .wsw__k { background: var(--warning); }
.wsw[aria-checked="true"] .wsw__k::after { transform: translateX(12px); background: var(--primary-foreground); }
.wsw__s { display: grid; min-width: 3.2em; color: var(--muted-foreground); font-weight: 400; }
.wsw__off, .wsw__on { grid-area: 1 / 1; transition: opacity var(--t-fast) var(--ease); }
.wsw__on, .wsw[aria-checked="true"] .wsw__off { opacity: 0; }
.wsw[aria-checked="true"] .wsw__on { opacity: 1; color: var(--warning); }
/* controls for decision makers: facts in a hairline grid */
.controls__t { margin-top: 96px; max-width: 18em; }
.controls { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.controls li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px 12px; align-content: start; background: var(--card); padding: 24px; }
.controls li > .i { margin-top: 4px; color: var(--brand-text); }
.controls b { font-size: var(--text-base); line-height: 24px; }
.controls span { grid-column: 2; color: var(--secondary-foreground); font-size: var(--text-md); line-height: 22px; }

/* =====================================================================
 * 7. Kurulum
 * ===================================================================== */
.setup { padding: var(--sec) 0 0; }
.modes { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mode { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-2xl); background: var(--card); border: 1px solid var(--border); }
.mode__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--brand-subtle); color: var(--brand-subtle-foreground); }
.mode__ic .i { width: 20px; height: 20px; }
.mode__k { margin-top: 24px; font-size: var(--text-sm); color: var(--muted-foreground); }
.mode__t { margin-top: 4px; font: 400 var(--fs-d3) / var(--lh-d3) var(--f-serif); letter-spacing: -0.01em; }
.mode__d { margin-top: 12px; color: var(--secondary-foreground); font-size: var(--text-md); line-height: 22px; text-wrap: pretty; }
.mode__f { margin-top: auto; padding-top: 24px; display: grid; }
.mode__f div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: var(--text-sm); line-height: 20px; }
.mode__f dt { color: var(--muted-foreground); }
.desk { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 32px; align-items: center; padding: 32px; border-radius: var(--r-2xl); background: var(--sidebar); border: 1px solid var(--border); }
.desk__k { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); font-weight: 500; color: var(--brand-text); }
.desk__t { margin-top: 12px; font-size: var(--text-lg); line-height: var(--leading-lg); text-wrap: pretty; }
.desk__apps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dapp { border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--background); box-shadow: var(--shadow-2); overflow: hidden; }
.dapp--win { border-radius: var(--r-sm); }
.dapp__bar { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--sidebar); }
.dapp--mac .dapp__t { flex: 1; text-align: center; margin-right: 42px; font-size: var(--text-xs); color: var(--muted-foreground); }
.dapp--win .dapp__bar { padding-right: 0; }
.dapp--win .dapp__t { flex: 1; }
.dapp--win .dapp__t .lockup { height: 12px; }
.dapp__ctl { display: flex; height: 100%; }
.dapp__ctl .i { box-sizing: content-box; width: 12px; height: 100%; padding: 0 12px; color: var(--secondary-foreground); }
.dapp__scr { display: grid; gap: 16px; padding: 28px 20px 20px; }
.dapp__hi { text-align: center; font: 400 var(--text-xl) / var(--leading-xl) var(--f-serif); }
.dapp__cmp .cmp-text { min-height: 40px; padding: 10px 12px 0; font-size: var(--text-sm); }
.dapp__cmp .cmp-foot { padding: 6px; }
.dapp__cmp .cmp-chip { height: 28px; font-size: var(--text-xs); }

/* ---------- FAQ (L-11): an accordion; the plus turns 45 degrees when it opens ---------- */
.faq { padding: var(--sec) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; align-items: start; }
.faq__head { position: sticky; top: calc(var(--hdr-h) + 48px); display: grid; gap: 32px; justify-items: start; }
.ln-faq { max-width: 760px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-h { margin: 0; font: inherit; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; text-align: left; font-size: var(--text-lg); line-height: var(--leading-lg); color: var(--foreground); border-radius: var(--r-xs); transition: color var(--t-fast) var(--ease); }
.faq-q:hover { color: var(--brand-text); }
.faq-q .i { color: var(--muted-foreground); transition: transform var(--t-menu) var(--ease); }
.faq-q[aria-expanded="true"] .i { transform: rotate(45deg); }
.faq-a { padding: 0 48px 24px 4px; color: var(--secondary-foreground); font-size: var(--text-base); line-height: 26px; }
.faq-a[hidden] { display: none; }

/* ---------- Demo: the closing band (L-12) holding the form (L-13) ---------- */
.demo { position: relative; padding: 0 0 var(--sec); }
.demo__band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; padding: 64px 48px; border-radius: var(--r-2xl); background: var(--sidebar); border: 1px solid var(--border); }
.demo__t { max-width: 12em; }
.demo__lead { margin-top: 20px; }
.form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 32px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-1); text-align: left; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field-label { font-size: var(--text-md); font-weight: 500; color: var(--foreground); }
.field-label .opt { font-weight: 400; color: var(--muted-foreground); }
.field-error { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); line-height: 16px; color: var(--destructive); }
.field-error[hidden] { display: none; }
.field-error .i { width: 14px; height: 14px; }
.input { display: block; width: 100%; height: var(--h-xl); padding: 0 12px; border-radius: 10px; border: 1px solid var(--input); background: var(--card); color: var(--foreground); font-size: var(--text-base); transition: border-color var(--t-fast) var(--ease); }
textarea.input { height: auto; min-height: 112px; padding: 10px 12px; line-height: var(--leading-base); resize: vertical; }
.input:hover { border-color: var(--secondary-foreground); }
.input:focus-visible { border-color: var(--ring); outline: 1px solid var(--ring); outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--destructive); }
.check { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: var(--text-md); line-height: 22px; color: var(--secondary-foreground); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box { width: 16px; height: 16px; margin-top: 3px; flex: none; display: grid; place-items: center; border: 1px solid var(--input); background: var(--card); border-radius: var(--r-xs); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.check .box .i { width: 12px; height: 12px; stroke-width: 2.25; color: var(--primary-foreground); opacity: 0; }
.check input:checked + .box { background: var(--primary); border-color: var(--primary); }
.check input:checked + .box .i { opacity: 1; }
.check input:focus-visible + .box { outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); }
.check input[aria-invalid="true"] + .box { border-color: var(--destructive); }
.check a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.form__end { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
.form__note { font-size: var(--text-sm); color: var(--secondary-foreground); }
/* the form's messages (main's states): one shows at a time, in its role's colour */
.form__status { flex: 1; min-width: 12em; font-size: var(--text-sm); line-height: 20px; }
.form__state { color: var(--secondary-foreground); }
.form__state--sent { color: var(--success); font-weight: 500; }
.form__state--invalid, .form__state--limited, .form__state--failed { color: var(--destructive); }
.form__notice { font-size: var(--text-sm); line-height: 20px; color: var(--secondary-foreground); }
.form__notice a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.field-hint { font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }
.form .btn[aria-disabled="true"] { background: var(--muted); color: var(--muted-foreground); cursor: progress; }

/* ---------- Footer (L-14, variant B): link groups, a hairline legal row, the AURA wordmark set across the grid ---------- */
.ftr { position: relative; padding: var(--s-20) 0 0; border-top: 1px solid var(--border); overflow: hidden; }
.ftr__nav { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: var(--s-8); }
.ftr__h { margin: 0 0 var(--s-2); font: 500 var(--text-sm) / var(--leading-sm) var(--f-sans); color: var(--foreground); }
.ftr__grp ul { display: grid; }
.ftr__grp a { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) 0; font: 400 var(--text-sm) / var(--leading-sm) var(--f-sans); white-space: nowrap; color: var(--secondary-foreground); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: var(--s-1); transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease); }
.ftr__grp a:hover { color: var(--foreground); text-decoration-color: var(--brand); }
.ftr__grp a[aria-current="page"] { color: var(--foreground); }
.ftr__grp a.ftr__demo { color: var(--brand-text); font-weight: 500; }
.ftr__grp a.ftr__demo:hover { color: var(--brand-hover); }
.ftr__demo .i { width: var(--s-4); height: var(--s-4); transition: transform var(--t-fast) var(--ease); }
.ftr__demo:hover .i { transform: translate3d(2px, 0, 0); }
.ftr__legal { margin-top: var(--s-16); padding: var(--s-4) 0 0; border-top: 1px solid var(--border); font: 400 var(--text-xs) / var(--leading-xs) var(--f-sans); color: var(--muted-foreground); }
.ftr__word { margin: var(--s-8) 0 0; line-height: 0; }
.ftr__word svg { display: block; width: 100%; height: auto; aspect-ratio: 2484 / 707; overflow: visible; }
.ftr__wm { font: 300 1000px / 1 var(--f-sans); letter-spacing: -0.06em; text-rendering: geometricPrecision; fill: var(--ftr-ink-soft); }

/* =====================================================================
 * Motion layer: only when js/aura.js set `.motion` (JS on, motion allowed)
 * ===================================================================== */
.is-tab-hidden *, .is-tab-hidden *::before, .is-tab-hidden *::after { animation-play-state: paused !important; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }

/* intro + reveals: one short fade and rise, a small stagger */
.motion [data-intro] { opacity: 0; }
.motion .is-intro [data-intro] { animation: rise var(--t-enter) var(--ease) both; animation-delay: var(--d, 0ms); }
.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 8px, 0); }
.motion [data-reveal] { transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); transition-delay: var(--d, 0ms); }
/* the ring draws itself in once (the line), its atmosphere fades in under it */
.motion .has-ring .ring__line, .motion .has-ring .ring__rim { stroke-dasharray: 1; animation: draw 1800ms var(--ease) 300ms both; }
.motion .has-ring .ring__halo, .motion .has-ring .ring__soft, .motion .has-ring .ring__dots { animation: fade 1600ms var(--ease) 600ms both; }

/* the boundary: the light around the model breathes slowly while the band is on screen */
@keyframes breathe { from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.motion .vlt.is-live .vlt__glow { animation: breathe 4.2s ease-in-out infinite alternate; }

/* hero scenarios: each part fades and rises in its turn when the scenario becomes active; leaving, all go at once */
.motion .hs .hp { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity var(--t-menu) var(--ease), transform var(--t-menu) var(--ease); }
.motion .hs.is-on .hp { opacity: 1; transform: none; transition-duration: var(--t-enter); }
.motion .hs.is-on .d1 { transition-delay: calc(var(--step) * 4); } .motion .hs.is-on .d2 { transition-delay: calc(var(--step) * 7); }
.motion .hs.is-on .d2b { transition-delay: calc(var(--step) * 8); } .motion .hs.is-on .d3 { transition-delay: calc(var(--step) * 10); }
.motion .hs.is-on .d4 { transition-delay: calc(var(--step) * 11); } .motion .hs.is-on .d5 { transition-delay: calc(var(--step) * 12); }
.motion .hs.is-on .d6 { transition-delay: calc(var(--step) * 13); } .motion .hs.is-on .d7 { transition-delay: calc(var(--step) * 14); }
.motion .hs.is-on .d8 { transition-delay: calc(var(--step) * 15); } .motion .hs.is-on .d9 { transition-delay: calc(var(--step) * 18); }
.motion .hs .page__hl::before { transform: scaleX(0); transition: transform var(--t-menu) var(--ease); }
.motion .hs.is-on .page__hl::before { transform: none; transition-duration: 700ms; transition-delay: calc(var(--step) * 16); }
.motion .hs .col__b { transform: scaleY(0); transition: transform var(--t-menu) var(--ease); }
.motion .hs.is-on .col__b { transform: none; transition-duration: 700ms; }
.motion .hs.is-on .b0 { transition-delay: calc(var(--step) * 10); } .motion .hs.is-on .b1 { transition-delay: calc(var(--step) * 10.6); }
.motion .hs.is-on .b2 { transition-delay: calc(var(--step) * 11.2); } .motion .hs.is-on .b3 { transition-delay: calc(var(--step) * 11.8); }
.motion .hs.is-on .b4 { transition-delay: calc(var(--step) * 12.4); } .motion .hs.is-on .b5 { transition-delay: calc(var(--step) * 13); }
.motion .hs .col__v { opacity: 0; transition: opacity var(--t-menu) var(--ease); }
.motion .hs.is-on .col__v { opacity: 1; transition-delay: calc(var(--step) * 15); }

/* tiles: each plays once when it comes into view, then rests on its end state */
.motion .tile .tp { transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); }
.motion .tile:not(.is-play) .tp { opacity: 0; transform: translate3d(0, 8px, 0); }
.motion .tile.is-play .p1 { transition-delay: calc(var(--step) * 2.5); } .motion .tile.is-play .p2 { transition-delay: calc(var(--step) * 5); }
.motion .tile.is-play .p3 { transition-delay: calc(var(--step) * 7.5); } .motion .tile.is-play .p4 { transition-delay: calc(var(--step) * 10); }
.motion .tile:not(.is-play) .tva__read .bar i { transform: scaleX(0); opacity: 1; }
.motion .tile .tva__read .bar i { transition: transform 900ms var(--ease) calc(var(--step) * 6); }
.motion .tile:not(.is-play) .page__hl::before { transform: scaleX(0); }
.motion .tile .page__hl::before { transition: transform 700ms var(--ease) calc(var(--step) * 14); }
.motion .tile:not(.is-play) .vseg__o--2 { background: transparent; color: var(--muted-foreground); box-shadow: none; }
.motion .tile:not(.is-play) .vseg__o--1 { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-1), 0 0 0 1px var(--border); }
.motion .tile .vseg__o { transition-delay: calc(var(--step) * 5); }
.motion .tile:not(.is-play) .vbar { opacity: 1; }
.motion .tile .vbar { transition: opacity var(--t-enter) var(--ease) calc(var(--step) * 5); }
.motion .tile:not(.is-play) .vline { clip-path: inset(-6px 100% -6px -6px); }
.motion .tile.is-play .vline { clip-path: inset(-6px -6px -6px -6px); }
.motion .tile .vline { transition: clip-path 900ms var(--ease) calc(var(--step) * 6); }
.motion .tile:not(.is-play) .vdot, .motion .tile:not(.is-play) .vchart__v { opacity: 0; }
.motion .tile .vdot, .motion .tile .vchart__v { transition: opacity var(--t-enter) var(--ease) calc(var(--step) * 11); }
.motion .tile:not(.is-play) .wtog { background: transparent; color: var(--secondary-foreground); box-shadow: inset 0 0 0 1px var(--border); }
.motion .tile:not(.is-play) .wtog__k { background: var(--accent-strong); }
.motion .tile:not(.is-play) .wtog__k::after { transform: none; }
.motion .tile .wtog, .motion .tile .wtog__k, .motion .tile .wtog__k::after { transition-delay: calc(var(--step) * 5); }
/* knowledge base: each window plays once in view */
.motion .kbs .kp { transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); }
.motion .kbs:not(.is-play) .kp { opacity: 0; transform: translate3d(0, 8px, 0); }
.motion .kbs.is-play .k1 { transition-delay: calc(var(--step) * 2); } .motion .kbs.is-play .k2 { transition-delay: calc(var(--step) * 4); }
.motion .kbs.is-play .k3 { transition-delay: calc(var(--step) * 6); } .motion .kbs.is-play .k4 { transition-delay: calc(var(--step) * 8); }
.motion .kbs.is-play .k5 { transition-delay: calc(var(--step) * 10); }
.motion .kbs .bar i.kp { opacity: 1; transform: scaleX(0); transition: transform 1200ms var(--ease) calc(var(--step) * 8); }
.motion .kbs.is-play .bar i.kp { transform: scaleX(0.6); }
.motion .kbs:not(.is-play) .page__hl::before { transform: scaleX(0); }
.motion .kbs .page__hl::before { transition: transform 700ms var(--ease) calc(var(--step) * 10); }
/* team panels: the shown panel rises in */
.motion .team:not([hidden]) { animation: rise var(--t-enter) var(--ease) both; }

/* ---------- the scroll-built report, scrubbed (.is-scrub: JS on, motion allowed) ---------- */
/* the pin ends one screen high, with the window centred: the next section starts closer, so no empty band is left */
.bld.is-pinned + .teams { padding-top: calc(var(--sec) / 2); }
.bld.is-pinned { padding: 0; }
.bld.is-pinned .bld__track { height: 560vh; }
.bld.is-pinned .bld__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr-h) + 16px) 0 24px; }
.bld.is-pinned .bwin { height: min(840px, calc(100svh - var(--hdr-h) - 16px - 24px - 74px)); }
/* short screens: the report drops its least important lines so nothing overlaps (the pin is one screen high) */
@media (max-height: 860px) and (min-width: 901px) {
  .bld.is-pinned .bld__lead, .bld.is-pinned .bstep__d, .bld.is-pinned .bhd__s { display: none; }
  .bld.is-pinned .bsteps { margin-top: 24px; }
  .bld.is-pinned .bstep__x { padding-top: 5px; }
  .bld.is-pinned .hbars { padding-top: 14px; gap: 2px; margin-top: 6px; }
  .bld.is-pinned .bch .bblk__s { display: none; }
  .bld.is-pinned .hbar { line-height: 14px; }
  .bld.is-pinned .bkpi__n { font-size: var(--text-xl); line-height: 26px; }
  .bld.is-pinned .btr:last-child { display: none; }
  .bld.is-pinned .brep { gap: 8px; }
  .bld.is-pinned .bblk { padding: 10px 12px; }
  .bld.is-pinned .bart__body { padding: 12px; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .bld.is-pinned .bhd__p { display: none; }
}
.is-scrub [data-b="u"], .is-scrub [data-b="read"], .is-scrub [data-b="plan"], .is-scrub [data-b="done"], .is-scrub [data-b="rm"],
.is-scrub .bpl__i, .is-scrub .brd__s, .is-scrub .btr:not(.btr--h) { opacity: var(--k, 1); transform: translate3d(0, calc((1 - var(--k, 1)) * 10px), 0); }
.is-scrub [data-b="req"] { opacity: calc(1 - var(--k, 1)); transform: translate3d(0, calc(var(--k, 1) * -6px), 0); }
.is-scrub [data-b="ph"], .is-scrub [data-b="rdb"], .is-scrub [data-b="t1"], .is-scrub [data-b="ver"] { opacity: var(--k, 1); }
.is-scrub [data-b="rda"], .is-scrub [data-b="t0"] { opacity: calc(1 - var(--k, 1)); }
.is-scrub [data-b="rbar"] { transform: scaleX(var(--k, 1)); }
.is-scrub .bpl__c i { opacity: var(--k, 1); transform: scale(calc(0.5 + var(--k, 1) * 0.5)); }
.is-scrub [data-b="sheet"] { opacity: var(--k, 1); transform: translate3d(0, calc((1 - var(--k, 1)) * 8px), 0) scale(calc(0.98 + var(--k, 1) * 0.02)); }
.is-scrub [data-b="scan"] { opacity: clamp(0, calc(var(--k, 1) * 20), 1); transform: translate3d(0, calc(var(--k, 1) * 7 * 28px), 0); }
/* the report's blocks: content fades with --k, the wireframe with --w, and they settle (--s) into the final grid */
.is-scrub .bblk { transform: translate3d(calc(var(--dx) * (1 - var(--s, 1))), calc(var(--dy) * (1 - var(--s, 1))), 0) scale(calc(1 - (1 - var(--s, 1)) * 0.02)); }
.is-scrub .bblk::before { opacity: calc(var(--w, 0) * (1 - var(--s, 1))); }
.is-scrub .bblk::after { opacity: var(--s, 1); }
.is-scrub .bblk > :not(.bsk) { opacity: var(--k, 1); }
.is-scrub .bsk { opacity: calc(var(--w, 0) * (1 - var(--k, 1))); }
.is-scrub .bhd > :not(.bsk) { transform: translate3d(0, calc((1 - var(--k, 1)) * 8px), 0); }
.is-scrub .bkpi { --dy: -10px; } .is-scrub .bkpi:nth-child(1) { --dx: -8px; } .is-scrub .bkpi:nth-child(4) { --dx: 8px; }
.is-scrub .bhd { --dy: -14px; } .is-scrub .bch { --dy: 6px; --dx: -10px; } .is-scrub .btb { --dy: 16px; --dx: 10px; }
.is-scrub .hbar__b { transform: scaleX(var(--k, 1)); }
.is-scrub .hbar__v, .is-scrub .hbar__lead { opacity: var(--k, 1); }
.is-scrub [data-b="tgt"] { opacity: calc(var(--k, 1) * 0.55); transform: scaleY(var(--k, 1)); }
.is-scrub .bchat__in { transform: translate3d(0, calc(var(--cy, 0) * -1px), 0); }
.is-scrub .brep { transform: translate3d(0, calc(var(--ay, 0) * -1px), 0); }
.is-scrub .bexp .fcard { opacity: var(--k, 1); transform: translate3d(0, calc((1 - var(--k, 1)) * -72px), 0); }
/* promoted once for the scrub: the pieces that move every frame */
.is-scrub .bblk, .is-scrub .hbar__b, .is-scrub .bsh, .is-scrub .bexp .fcard, .is-scrub .bchat__in, .is-scrub .brep, .is-scrub .bwin__track { will-change: transform; }

/* performance: self-contained cards contain their layout and paint */
.tile, .team, .kwin, .controls, .form, .hs, .bwin, .owin { contain: layout paint; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(n) { grid-column: auto; }
  .tile:nth-child(1), .tile:nth-child(4), .tile:nth-child(5) { grid-column: 1 / -1; }
  .controls { grid-template-columns: 1fr 1fr; }
  .demo__band { padding: 48px 32px; }
  .team { grid-template-columns: 1fr; }
  .team__side { padding: 20px 16px 8px; }
  .kbsteps { grid-template-columns: 1fr; }
  .kbs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 32px; align-items: start; }
  .kbs > :not(.kwin) { grid-column: 1; }
  .kwin { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .desk { grid-template-columns: 1fr; }
  .bld__grid { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 40px; }
  .bwin__track { grid-template-columns: minmax(240px, 0.4fr) minmax(0, 1fr); }
}
@media (max-width: 1099px) {
  .frame .sb { display: none; }
  .ftr__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; max-width: 40em; }
}
@media (max-width: 900px) {
  .hdr__menu { display: inline-flex; }
  .hdr__cta { display: none; }
  .hdr__end { margin-left: auto; }
  .hdr__nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 24px; background: var(--background); border-bottom: 1px solid var(--border); max-height: calc(100vh - var(--hdr-h) - var(--band-h)); overflow: auto; }
  .hdr.is-open .hdr__nav { display: flex; }
  .hdr.is-open { background: var(--background); border-bottom-color: var(--border); }
  .hdr__nav a:not(.btn) { height: 48px; padding: 0 4px; border-radius: 0; border-bottom: 1px solid var(--border); font-size: var(--text-base); }
  .hdr__nav a:not(.btn) .i { display: block; }
  .hdr__nav a:not(.btn):hover { background: none; }
  .hdr__lang { margin-left: 0; order: 1; }
  .hdr__menu-cta { display: inline-flex; order: 2; margin-top: 24px; width: 100%; }
  .sechead, .faq__grid, .demo__band { grid-template-columns: 1fr; }
  .sechead .lead { justify-self: start; }
  .faq__head { position: static; }
  /* the composer sits in the frame's bottom corners here: inset 8, so 20 - 8 = 12 */
  .frame .dock { padding: 0 8px 8px; }
  .frame .dock .cmp { border-radius: var(--r-lg); }
  .hs__in { grid-template-columns: 1fr; min-height: 0; }
  .hs__pane { padding: 0 16px 16px; }
  .hs__chat { padding: 16px; gap: 16px; }
  .hs[data-hsc="0"] .hs__pane, .hs[data-hsc="2"] .hs__pane, .hs[data-hsc="3"] .hs__pane { display: none; }
  .hs__pane .artp { height: auto; }
  .tiles { grid-template-columns: 1fr; }
  .tile:nth-child(n) { grid-column: auto; }
  .tile__vis { min-height: 0; padding: 20px 16px 0; }
  .tv--cite { grid-template-columns: 1fr; }
  .tvc__page { display: none; }
  .ttabs { grid-template-columns: 1fr 1fr; width: 100%; }
  .ttab { padding: 0 12px; font-size: var(--text-md); }
  .others__l { grid-template-columns: 1fr 1fr; }
  .kbs { display: flex; }
  .kwin { margin-top: 20px; }
  .controls { grid-template-columns: 1fr; }
  .modes { grid-template-columns: 1fr; }
  /* the boundary, one column: the inside (its three things in a row, the model under them), the door on its bottom
     edge, the ledger below */
  .vlt { --vlt-gap: 56px; grid-template-columns: minmax(0, 1fr); row-gap: var(--vlt-gap); max-width: 560px; }
  .vlt__in, .vlt__out { padding: 20px; gap: 20px; }
  .vlt__body { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .vlt__body { row-gap: 28px; }
  .vlt__items { gap: 8px; }
  .vlt__item { gap: 12px; padding: 10px 12px; }
  .vlt__ic { width: 32px; height: 32px; }
  .vlt__it b { font-size: var(--text-md); line-height: 20px; }
  .vlt__core { padding: 20px 16px; }
  .vlt__n { font-size: 56px; line-height: 52px; }
  /* the report: one pane wide; the chat first, then the panel slides in (motion) or sits under it (static) */
  .bld__grid { grid-template-columns: 1fr; gap: 24px; }
  .bwin__track { grid-template-columns: 1fr; }
  .bchat { border-right: 0; border-bottom: 1px solid var(--border); }
  .bwin { height: auto; }
  .bart { min-height: 560px; }
  .bexp { grid-auto-flow: row; grid-template-columns: 1fr; }
  .ftr { padding-top: var(--s-16); }
  .bld.is-pinned .bld__track { height: 420vh; }
  .bld.is-pinned .bld__pin { padding: calc(var(--hdr-h) + 8px) 0 12px; align-items: stretch; }
  .bld.is-pinned .bld__grid { grid-template-rows: auto minmax(0, 1fr); height: 100%; gap: 12px; align-items: stretch; }
  .bld.is-pinned .bld__stage { height: 100%; }
  /* one pane wide: the report keeps its natural height and scrolls inside its panel, like the app's artifact panel */
  .bld.is-pinned .brep { height: auto; grid-template-rows: auto; }
  .bld.is-pinned .bhd__s, .bld.is-pinned .bch .bblk__s { display: none; }
  .bwin__bar .badge { display: none; }
  .bwin__t { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bld.is-pinned .bld__side > :not(.bld__now) { display: none; }
  .bld.is-pinned .bld__now { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: var(--text-base); line-height: 22px; font-weight: 500; }
  .bld.is-pinned .bld__nown { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--brand-foreground); font-size: var(--text-sm); flex: none; }
  .bld.is-pinned .bld__stage { min-height: 0; gap: 8px; }
  .bld.is-pinned .bwin { flex: 1; height: auto; min-height: 0; }
  .bld.is-pinned .bwin__track { grid-template-columns: 100% 100%; transform: translate3d(calc(var(--k, 1) * -100%), 0, 0); }
  .bld.is-pinned .bchat { border-bottom: 0; border-right: 1px solid var(--border); }
  .bld.is-pinned .bart { min-height: 0; }
  .bld.is-pinned .bexp { grid-auto-flow: column; grid-template-columns: none; gap: 6px; min-height: 52px; }
  .bld.is-pinned .bexp .fcard { gap: 8px; padding: 8px; }
  .bld.is-pinned .bexp .fcard__t b, .bld.is-pinned .bexp .fcard__t > span, .bld.is-pinned .bexp .fcard__ic { display: none; }
  .bld.is-pinned .bexp .fcard__t > .fcard__k { display: block; }
  .bld.is-pinned .bexp .fi { width: 20px; height: 24px; }
  .bld.is-pinned .bexp .fi__b { display: none; }
}
@media (max-width: 760px) {
  /* five files on a narrow screen: a list of rows (icon, name, meta, download), so no file is left alone on a last row */
  .tvf { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fsh { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "pv n dl" "pv m dl"; align-items: center; column-gap: 12px; row-gap: 0; padding: 10px 10px 10px 12px; }
  .fsh__pv { width: 28px; height: 34px; margin: 0; aspect-ratio: auto; background: none; border: 0; overflow: visible; }
  .fsh__pv > .pv { display: none; }
  .fsh__pv > .fi { position: static; width: 28px; height: 34px; }
  .fsh__dl { align-self: center; }
}
@media (max-width: 640px) {
  .hero__txt { padding: 64px 0 40px; }
  .hero__lead { margin-top: 20px; }
  .hero__cta { margin-top: 28px; }
  .hsw__tab { padding: 0 10px; font-size: var(--text-sm); gap: 6px; }
  .hsw__tab .i { display: none; }
  .hs__chat .md, .hs__chat .msg-u .bubble { font-size: var(--text-sm); line-height: 20px; }
  /* a phone: the download is an icon button, so the file's name keeps the card's width */
  .fcard__dl { width: var(--h-md); padding: 0; justify-content: center; }
  .fcard__dl > span { display: none; }
  /* the side panel keeps its own height under the answer (a shorter scenario leaves room, not an empty card) */
  .hs__pane > * { flex: none; }
  .dl li { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
  .dl li:nth-child(n + 4) { display: none; }
  .hs__chat .srcs { grid-template-columns: 1fr; }
  .hs__chat .srcs .src:nth-child(2) { display: none; }
  .slides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .slides .sl:nth-child(n + 4) { display: none; }
  .sl__sub { display: none; }
  /* the region chart turns on its side: one bar per row, the label before it, the value after it (six column labels
     do not fit side by side on a phone) */
  .cchart { min-height: 0; margin-top: 16px; display: block; }
  .cgrid { display: none; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 0; }
  .col { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto; align-items: center; justify-items: stretch; column-gap: 10px; }
  .col__l { order: -1; padding-top: 0; text-align: left; font-size: var(--text-xs); line-height: 16px; }
  .col__track { height: 14px; justify-content: flex-start; align-items: stretch; }
  .col__b { width: calc(var(--h, 50) * 0.82%); height: 100%; border-radius: 0 4px 4px 0; transform-origin: 0 50%; }
  .col__v { bottom: auto; top: -1px; left: calc(var(--h, 50) * 0.82% + 6px); transform: none; }
  .motion .hs .col__b { transform: scaleX(0); }
  /* the spreadsheet preview keeps the order, the supplier and the amount on a phone */
  .bsh__g { grid-template-columns: 1fr 1.3fr 0.9fr; }
  .bsh__g > .bsh__c:nth-child(5n + 3), .bsh__g > .bsh__c:nth-child(5n + 4) { display: none; }
  .sl__f { padding: 8px; gap: 4px; }
  .sl__t { font-size: var(--text-2xs); line-height: 13px; }
  .cchart { min-height: 168px; }
  .form { grid-template-columns: 1fr; padding: 20px; }
  .demo__band { padding: 32px 20px; }
  .tvw__srcs { grid-template-columns: 1fr; }
  .sh { grid-template-columns: 24px minmax(64px, 1fr) repeat(3, minmax(0, 1fr)); }
  .sh > span { padding: 0 6px; }
  .sh > .sh__colhl { width: calc((100% - 24px) / 4); }
  /* a phone keeps the supplier and the total; the full table is in the Excel file */
  .otbl { grid-template-columns: minmax(0, 1fr) auto; }
  .otbl > span:nth-child(5n + 2), .otbl > span:nth-child(5n + 3), .otbl > span:nth-child(5n + 4) { display: none; }
  .ocalc { grid-template-columns: 1fr; }
  .ofiles { grid-template-columns: 1fr; }
  /* one column: the result window is the panel's inner card (20 - 9 = 11 ~ its 12) */
  .team__out { padding: 0; background: none; }
  .owin__body { padding: 16px; }
  .others__l { grid-template-columns: 1fr; }
  .mode { padding: 24px; }
  .desk { padding: 20px; }
  .desk__apps { grid-template-columns: 1fr; }
  .dapp--win { display: none; }
  .ftr__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
  .ftr__legal { margin-top: var(--s-10); }
}
@media (max-width: 480px) {
  .btr { grid-template-columns: 1fr 1.2fr 0.7fr; }
  .btr > :nth-child(3) { display: none; }
  .ttab { white-space: normal; height: auto; min-height: var(--h-xl); padding: 6px 8px; line-height: 18px; text-align: center; }
  .ttab .i { display: none; }
}
@media (max-width: 380px) {
  .hsw__tab { padding: 0 8px; }
}

/* =====================================================================
 * The demo form's privacy notice (aydinlatma-metni.html, en/privacy-notice.html): one column of text
 * ===================================================================== */
.ntc__hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 760px; margin: 0 auto; padding: 24px var(--gut); }
.ntc__lang { font-size: var(--text-md); color: var(--secondary-foreground); border-radius: var(--r-xs); }
.ntc__lang:hover { color: var(--foreground); }
.ntc { max-width: 760px; margin: 0 auto; padding: 32px var(--gut) 64px; }
.ntc__t { font: 400 var(--fs-d2) / var(--lh-d2) var(--f-serif); letter-spacing: -0.02em; text-wrap: balance; }
.ntc p { margin-top: 20px; font-size: var(--text-base); line-height: 26px; color: var(--secondary-foreground); text-wrap: pretty; }
.ntc a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ntc__ftr { max-width: 760px; margin: 0 auto; padding: 16px var(--gut) 40px; border-top: 1px solid var(--border); font-size: var(--text-xs); line-height: 16px; color: var(--muted-foreground); }