/* IAMONES website. Light canvas, Newsreader display, Inter text, JetBrains Mono for data,
   colour blocks between white sections, IAMONES red as the single accent.
   The product demo uses the app's own Astra theme (IBM Plex, red rail). */

:root {
  --bg: #faf9f7;
  --panel: #ffffff;
  --panel-2: #f1efeb;
  --text: #171413;
  --soft: #3d3833;
  --muted: #6b645b;
  --dim: #8f877c;
  --faint: #d9d4cc;
  --line: rgba(23, 20, 19, .12);
  --red: #bd0f19;
  --red-deep: #8c0a12;
  --amber: #b4400f;
  --blush: #f7e4e0;
  --sun: #ffd36e;
  --sky: #e4e9fb;
  --ember: linear-gradient(90deg, #bd0f19 0%, #e2401f 55%, #f08a24 100%);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", "Times New Roman", Georgia, serif;
  --radius-block: 28px;
  --radius-card: 20px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); letter-spacing: -.1px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--text); color: #fff; padding: 10px 16px; border-radius: 999px; z-index: 50; }
.skip:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.label { font: 400 12px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.label .num { color: var(--red); margin-right: 14px; }
.accent { color: var(--red); }
.h1 { font: 400 80px/1.04 var(--serif); letter-spacing: -1.6px; }
.h2 { font: 400 54px/1.08 var(--serif); letter-spacing: -1px; max-width: 900px; }
.h3 { font: 400 32px/1.15 var(--serif); letter-spacing: -.5px; }
.h1 .it, .h2 .it, .h3 .it { display: block; font-style: italic; font-weight: 300; color: var(--muted); padding-bottom: .06em; }
.lead { max-width: 620px; margin-top: 24px; color: var(--soft); font-size: 18px; }
.link { font-size: 16px; color: var(--muted); transition: color .15s ease; }
.link:hover { color: var(--text); }
.link b { font-weight: 400; color: var(--red); }
[data-scramble] { white-space: pre-wrap; }

/* ---------- buttons ---------- */
.pill-glow, .pill-ink, .pill-white, .pill-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 16px/1.2 var(--sans); padding: 15px 26px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pill-glow:active, .pill-ink:active, .pill-white:active, .pill-line:active { transform: scale(.98); }
.pill-glow { color: var(--text); background: linear-gradient(#fff, #fff) padding-box, var(--ember) border-box; box-shadow: 0 8px 26px -12px rgba(189, 15, 25, .55); }
.pill-glow:hover { box-shadow: 0 10px 30px -10px rgba(226, 64, 31, .6); }
.pill-ink { background: var(--text); color: #fff; }
.pill-ink:hover { background: #000; }
.pill-white { background: #fff; color: var(--red); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .4); }
.pill-line { border-color: var(--text); color: var(--text); background: transparent; }
.pill-line:hover { background: var(--text); color: #fff; }
.ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }

/* ---------- floating pill navigation ---------- */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 18px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(250, 249, 247, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nav > a:first-child { flex: none; display: flex; margin-right: 12px; }
.nav .logo { height: 26px; width: 85px; }
.nav a.l { font-size: 14px; color: var(--muted); padding: 8px 11px; border-radius: 999px; transition: color .15s ease; }
.nav a.l:hover, .nav a.l[aria-current="page"] { color: var(--text); }
.nav a.l[aria-current="page"] { background: rgba(23, 20, 19, .06); }
.nav .pill-glow { font-size: 14px; padding: 9px 16px; margin-left: 6px; }
.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; place-items: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 16px; height: 1.5px; background: var(--text); position: relative; content: ""; transition: transform .2s ease; }
.nav-toggle span::before { position: absolute; top: -5px; }
.nav-toggle span::after { position: absolute; top: 5px; }
.nav-sheet { display: none; }

/* ---------- hero with the data field and the eagle ---------- */
.hero { position: relative; min-height: 880px; display: flex; align-items: flex-end; overflow: hidden; }
.hero--compact { min-height: 600px; }
.hero .field { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 249, 247, .92) 0%, rgba(250, 249, 247, .6) 42%, rgba(250, 249, 247, 0) 62%), linear-gradient(0deg, var(--bg) 0%, rgba(250, 249, 247, 0) 22%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-bottom: 112px; }
.hero--compact .wrap { padding-bottom: 80px; padding-top: 140px; }
.hero .label { margin-bottom: 26px; }
.hero .sub { max-width: 560px; margin: 30px 0 0; font-size: 19px; color: var(--soft); }
.hero--compact .h1 { font-size: 68px; max-width: 820px; }
.bird { position: absolute; z-index: 1; right: 5%; top: 4%; width: min(33vw, 470px); pointer-events: none; }
.hero--compact .bird { width: min(26vw, 340px); top: 12%; right: 7%; }
.bird .bank { display: block; width: 100%; }
.bird .eagle { position: relative; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 34px 38px rgba(189, 15, 25, .2)); }
.bird .defs { position: absolute; width: 0; height: 0; }
.bird .part { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #bd0f19; will-change: transform; }
.bird .wing { transform-origin: 64% 58%; }
.bird .far { transform-origin: 57% 75%; }

/* plain page head (articles, legal pages, forms) */
.page-head { padding: 150px 0 40px; }
.page-head .h1 { font-size: 64px; max-width: 980px; }
.page-head .lead { margin-top: 22px; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; font: 400 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--red); }
.crumbs span[aria-hidden] { color: var(--faint); }

/* ---------- sections and colour blocks ---------- */
.strip { padding: 44px 0 8px; }
.strip .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips span, .chips a { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 500; }
.chips a:hover { border-color: var(--text); }

/* integration logos: a still, wrapped row that scrolls when motion is allowed */
.logo-strip { padding: 48px 0 8px; }
.logo-strip .label { margin-bottom: 26px; }
.marquee {
  --k: 1; overflow: hidden; background: var(--bg);
}
.marquee-track { display: flex; flex-wrap: wrap; justify-content: center; }
.marquee-set { display: flex; align-items: center; gap: 72px; padding: 14px 36px; list-style: none; }
.marquee-set[aria-hidden] { display: none; }
.marquee-set a { display: flex; align-items: center; gap: 10px; height: 52px; font: 600 17px/1 var(--sans); color: var(--soft); white-space: nowrap; }
.marquee-set img { height: calc(var(--h) * 1px * var(--k)); width: auto; filter: grayscale(1); opacity: .62; mix-blend-mode: multiply; transition: filter .25s ease, opacity .25s ease; }
.marquee-set img.mark { filter: grayscale(1) brightness(.3); }
.marquee-set a:hover img, .marquee-set a:focus-visible img { filter: none; opacity: 1; }
.marquee-set a:hover { color: var(--red); }
.free { padding: 96px 0; }
.free > .wrap > .h2, .free .label + .h2 { margin-top: 18px; }
.blk { border-radius: var(--radius-block); padding: 64px; margin: 56px 0; }
.blk .label { margin-bottom: 18px; }
.blk.blush { background: var(--blush); }
.blk.sky { background: var(--sky); }
.blk.sun { background: var(--sun); }
.blk.red { background: var(--red); color: #fff; }
.blk.red .label { color: #ffd2cc; }
.blk.red .label .num { color: #fff; }
.blk.red .it { color: rgba(255, 255, 255, .72) !important; }
.blk.red .lead, .blk.red p { color: rgba(255, 255, 255, .9); }
.blk.red .link { color: #fff; }
.blk.sun .label { color: rgba(23, 20, 19, .72); }
.blk.sun .it { color: rgba(23, 20, 19, .6) !important; }
.blk.sun .lead { color: #2a2420; }
.blk.sky .label, .blk.blush .label { color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.wide-left { grid-template-columns: 1.15fr .85fr; }
.split .h2 { font-size: 46px; }
.art { position: relative; display: grid; place-items: center; }
.art img { width: 86%; }
.art.frame { background: #fff; border-radius: var(--radius-card); padding: 28px; }
.art.frame img { width: 100%; }
.closing { padding: 0 0 64px; }
.final { padding: 96px 64px; margin-top: 0; }
.final .h1 { font-size: 68px; margin-bottom: 40px; color: #fff; }

/* benefits rows */
.rows { margin-top: 44px; }
.row { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: center; }
.row:first-child { border-top: 1px solid var(--line); }
.row > div { min-width: 0; }
.row .val { font: 400 58px/1 var(--serif); letter-spacing: -1.2px; }
.row .val + .label { margin-top: 12px; }
.row .say { color: var(--soft); margin-bottom: 12px; }
.snippet { font: 400 13px/1.5 var(--mono); color: var(--dim); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.snippet em { font-style: normal; color: var(--amber); }

/* agent tree */
.tree { background: #fff; border-radius: 18px; padding: 28px 30px; font: 400 15px/2 var(--mono); color: var(--muted); white-space: pre; overflow-x: auto; box-shadow: 0 30px 60px -30px rgba(60, 0, 0, .55); }
.tree .h { color: var(--text); font-weight: 600; }
.tree .ag { background: var(--ember); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.tree .risk { color: var(--red); }
.tree .c { color: var(--dim); }

/* definition list (integrations) */
.list { margin-top: 40px; display: grid; grid-template-columns: 220px 1fr; font-size: 15px; }
.list dt { font: 500 15px/1.5 var(--mono); color: var(--text); padding: 12px 0; }
.list dd { color: var(--muted); padding: 12px 0; }
.list dt, .list dd { border-bottom: 1px dashed var(--faint); }
.more { display: inline-block; margin-top: 28px; }

/* 2x2 grid */
.quad { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px 56px; max-width: 960px; }
.quad code { font: 400 13px/1 var(--mono); color: var(--muted); }
.quad h3 { font: 400 28px/1.2 var(--serif); letter-spacing: -.4px; margin: 12px 0 8px; }
.quad p { color: var(--soft); font-size: 16px; }

/* quotes */
.quotes { margin-top: 36px; display: flex; flex-direction: column; gap: 56px; max-width: 900px; }
.quotes blockquote { font: 400 31px/1.32 var(--serif); letter-spacing: -.3px; }
.quotes blockquote::before { content: "\201C"; color: var(--red); margin-right: 4px; }
.quotes cite { display: block; margin-top: 18px; font-style: normal; }
.quote-card { display: grid; grid-template-columns: 140px 1fr; gap: 36px; align-items: start; }
.quote-card img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; }
.quote-card blockquote { font: 400 26px/1.4 var(--serif); letter-spacing: -.2px; }
.quote-card cite { display: block; margin-top: 18px; font-style: normal; }

/* analyst */
.analyst { display: grid; grid-template-columns: 150px 1fr; gap: 40px; align-items: center; margin-top: 44px; max-width: 900px; }
.analyst blockquote { font: 400 25px/1.4 var(--serif); color: var(--soft); }
.analyst cite { display: block; margin: 16px 0 18px; font-style: normal; }

/* checklist */
.checks { list-style: none; display: flex; flex-direction: column; gap: 16px; background: #fff; border-radius: 22px; padding: 32px; }
.checks li { display: flex; gap: 12px; font-size: 18px; color: var(--text); }
.checks i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: var(--sun); display: grid; place-items: center; font-style: normal; font-size: 13px; margin-top: 2px; }

/* cards (hubs, integrations, blog, demo topics) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.card:hover, .card.hover:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(23, 20, 19, .4); border-color: rgba(23, 20, 19, .2); }
.card h3 { font: 400 26px/1.2 var(--serif); letter-spacing: -.3px; }
.card p { color: var(--soft); font-size: 16px; }
.card .go { margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 500; color: var(--red); }
.card .logo-box { height: 64px; display: flex; align-items: center; }
.card .logo-box img { height: 40px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; }
.card .thumb { margin: -28px -28px 10px; border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; aspect-ratio: 16/9; background: var(--panel-2); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .meta { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.blk .card { border-color: transparent; }

/* capabilities: before / after */
.ba-list { display: flex; flex-direction: column; gap: 20px; margin-top: 44px; }
.ba { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; background: #fff; border-radius: var(--radius-card); padding: 28px 32px; }
.blk .ba { box-shadow: none; }
.free .ba { border: 1px solid var(--line); }
.ba .pic { background: var(--panel-2); border-radius: 16px; aspect-ratio: 4/3; display: grid; place-items: center; overflow: hidden; }
.ba .pic img { width: 82%; }
.ba h3 { font: 400 30px/1.15 var(--serif); letter-spacing: -.4px; margin-bottom: 14px; }
.ba .then, .ba .now { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 10px 0; font-size: 16px; }
.ba .then { color: var(--muted); border-bottom: 1px dashed var(--faint); }
.ba .now { color: var(--text); }
.ba .then b, .ba .now b { font: 400 11px/1.9 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ba .now b { color: var(--red); }
.ba .plain { color: var(--soft); }

/* platform stack */
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 44px; }
.layer { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; background: #fff; border-radius: 18px; padding: 18px 22px; border: 1px solid var(--line); transition: transform .2s ease; }
.layer:hover { transform: translateX(4px); }
.layer .ico { width: 56px; height: 56px; border-radius: 14px; background: var(--blush); display: grid; place-items: center; }
.layer .ico img { width: 44px; }
.layer h3 { font: 400 24px/1.2 var(--serif); }
.layer p { color: var(--muted); font-size: 15px; }
.layer .where { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }
.layer.cloud .where { color: var(--red); border-color: rgba(189, 15, 25, .3); }
.sources { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 0 74px; }
.sources span { font: 400 12px/1 var(--mono); color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 8px 12px; }

/* identity timeline */
.timeline { position: relative; margin-top: 8px; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--faint); }
.ev { position: relative; padding: 0 0 20px; }
.ev::before { content: ""; position: absolute; left: -25px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--text); }
.ev.alert::before { background: var(--red); border-color: var(--red); }
.ev time { font: 400 12px/1 var(--mono); color: var(--dim); }
.ev p { margin: 4px 0 0; color: var(--text); font-size: 16px; }
.ev.alert p { color: var(--red); font-weight: 500; }
.tl-card { background: #fff; border-radius: var(--radius-card); padding: 28px 30px; }

/* logos grid */
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.logos .lg { background: #fff; border: 1px solid var(--line); border-radius: 18px; height: 120px; display: grid; place-items: center; padding: 22px; }
.logos .lg img { max-height: 60px; width: auto; max-width: 100%; object-fit: contain; }

/* team */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.person img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--panel-2); }
.person div { padding: 18px 22px 22px; }
.person h3 { font: 400 26px/1.2 var(--serif); }
.person p { color: var(--muted); font-size: 15px; margin-top: 4px; }

/* forms */
.form-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.form { background: #fff; border-radius: var(--radius-card); padding: 36px; display: grid; gap: 18px; border: 1px solid var(--line); }
.blk .form { border-color: transparent; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: grid; gap: 8px; }
.fld label, .fld legend { font-size: 14px; font-weight: 500; color: var(--text); }
.fld .hint { font-size: 13px; color: var(--muted); }
.fld input, .fld select, .fld textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--text); background: var(--bg);
  border: 1px solid #cfc8bc; border-radius: 12px; padding: 13px 14px; transition: border-color .15s ease, box-shadow .15s ease;
}
.fld textarea { min-height: 120px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(189, 15, 25, .15); background: #fff; }
.fld input:user-invalid, .fld select:user-invalid, .fld textarea:user-invalid { border-color: var(--red); }
fieldset.fld { border: 0; }
.opts { display: grid; gap: 8px; }
.opts label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; color: var(--soft); cursor: pointer; }
.opts input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); flex: none; }
.form .actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.form .note { font-size: 13px; color: var(--muted); }
.form-status { font-size: 15px; border-radius: 12px; padding: 12px 14px; display: none; }
.form-status.ok { display: block; background: #e3efe8; color: #1f5a40; }
.form-status.err { display: block; background: var(--blush); color: var(--red-deep); }
.form-status.info { display: block; background: var(--panel-2); color: var(--soft); }
.form.sent .fields { display: none; }

/* long-form text: articles and policies */
.prose { max-width: 740px; font-size: 18px; line-height: 1.75; color: var(--soft); }
.prose > * + * { margin-top: 1.05em; }
.prose h2, .prose h3, .prose h4 { color: var(--text); font-family: var(--serif); font-weight: 400; letter-spacing: -.3px; line-height: 1.2; margin-top: 1.8em; }
.prose h2 { font-size: 38px; }
.prose h3 { font-size: 30px; }
.prose h4 { font-size: 24px; }
.prose strong, .prose b { color: var(--text); font-weight: 600; }
.prose a { color: var(--red); text-decoration: underline; text-decoration-color: rgba(189, 15, 25, .3); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { border-left: 3px solid var(--red); padding: .2em 0 .2em 1.1em; font-family: var(--serif); font-size: 24px; line-height: 1.45; color: var(--text); }
.prose img { border-radius: 16px; margin: 1.6em 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.article-meta { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.article-meta img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.article-meta b { display: block; font-weight: 600; }
.article-meta span { color: var(--muted); font-size: 15px; }
.banner { margin: 8px 0 48px; border-radius: var(--radius-block); overflow: hidden; max-height: 520px; }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ---------- live demo, styled on the IAMONES app (Astra theme) ---------- */
.demo-head .tabs { margin-top: 32px; }
.tabs { display: inline-flex; gap: 4px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: 999px; padding: 5px; }
.tabs button { font: 500 15px/1 var(--sans); border: 0; background: none; color: var(--muted); padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--text); color: #fff; }
.demo-note { font: 400 12px/1.4 var(--mono); color: var(--muted); margin-top: 16px; }
.ms { font-family: "Material Symbols Outlined"; font-weight: 400; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; display: inline-block; }
.ax {
  --ia-brand: #b90f11; --ia-text: #241f1f; --ia-text-2: #6b6260; --ia-text-3: #948b88; --ia-canvas: #f7f5f4; --ia-muted: #f1eeed; --ia-border: #e3dedc; --ia-border-strong: #cdc5c2;
  margin-top: 40px; display: grid; grid-template-columns: 76px 1fr; height: 660px; border-radius: 16px; overflow: hidden;
  background: var(--ia-canvas); font-family: "IBM Plex Sans", system-ui, sans-serif; color: var(--ia-text); letter-spacing: 0;
  border: 1px solid rgba(36, 31, 31, .08); box-shadow: 0 50px 100px -50px rgba(110, 10, 10, .5), 0 2px 6px rgba(36, 31, 31, .06);
}
.ax-rail { background: var(--ia-brand); display: flex; flex-direction: column; align-items: center; padding: 18px 0 16px; gap: 12px; color: #f9dfdf; }
.ax-mark { width: 36px; filter: brightness(0) invert(1); margin-bottom: 6px; }
.ax-new { width: 40px; height: 40px; border-radius: 8px; background: #fff; color: var(--ia-brand); display: grid; place-items: center; }
.ax-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ax-nav .ms { width: 44px; height: 40px; border-radius: 8px; display: grid; place-items: center; font-size: 21px; }
.ax-nav .on { background: rgba(255, 255, 255, .18); color: #fff; }
.ax-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ax-av { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--ia-brand); font: 600 12px/32px "IBM Plex Sans", sans-serif; text-align: center; }
.ax-main { display: flex; flex-direction: column; min-width: 0; }
.ax-top { flex: none; height: 56px; display: flex; align-items: center; gap: 6px; padding: 0 24px; border-bottom: 1px solid var(--ia-border); background: #fff; font-size: 13px; color: var(--ia-text-2); }
.ax-top .ms { font-size: 18px; color: var(--ia-text-3); }
.ax-top b { color: var(--ia-text); font-weight: 600; }
.ax-role { margin-left: auto; font: 500 12px/1 "IBM Plex Sans", sans-serif; padding: 6px 10px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.ax-body { flex: 1; display: flex; flex-direction: column; padding: 22px 28px 12px; gap: 12px; min-height: 0; max-width: 940px; width: 100%; margin: 0 auto; }
.ax-log { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }
.ax-user { display: flex; justify-content: flex-end; align-items: flex-start; gap: 8px; }
.ax-bubble { background: #fff; border: 1px solid var(--ia-border); border-radius: 12px; border-top-right-radius: 4px; box-shadow: inset -3px 0 0 var(--ia-brand), 0 1px 2px rgba(36, 31, 31, .05); padding: 10px 16px; font-size: 16px; line-height: 1.5; max-width: 72%; }
.ax-av.sm { width: 28px; height: 28px; font-size: 11px; line-height: 28px; background: var(--ia-muted); color: var(--ia-text-2); flex: none; }
.ax-bot { background: #fff; border: 1px solid var(--ia-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(36, 31, 31, .05), 0 1px 3px rgba(36, 31, 31, .04); padding: 16px 20px 8px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ax-head { display: flex; align-items: center; gap: 8px; }
.ax-head img { width: 22px; }
.ax-name { color: var(--ia-brand); font-size: 13px; font-weight: 600; }
.ax-when { margin-left: auto; color: var(--ia-text-3); font-size: 12px; }
.ax-steps { color: var(--ia-text-2); font-size: 13px; }
.ax-steps summary { cursor: pointer; width: fit-content; }
.ax-steps ol { list-style: none; margin: 8px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.ax-steps li { display: flex; gap: 8px; align-items: center; }
.ax-steps li .ms { font-size: 18px; }
.ax-answer { font-size: 15.5px; line-height: 1.65; min-height: 1.65em; }
.ax-answer p { margin: 0 0 .55em; }
.ax-answer strong { font-weight: 600; }
.ax-answer em { font-style: italic; }
.ax-answer table { border-collapse: collapse; font-size: 13px; margin: .2em 0 .7em; width: 100%; }
.ax-answer th { background: var(--ia-muted); color: var(--ia-text-2); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.ax-answer th, .ax-answer td { border: 1px solid var(--ia-border); padding: 6px 10px; vertical-align: top; }
.ax-answer code { font-family: "IBM Plex Mono", monospace; font-size: .85em; background: var(--ia-muted); border: 1px solid var(--ia-border); border-radius: 4px; padding: .1em .35em; }
.r-h { color: var(--ia-brand); font-weight: 600; }
.r-m { color: #9a5f00; font-weight: 600; }
.r-l { color: #2f6f52; font-weight: 600; }
.ax-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: .1em 0 .5em; }
.ax-btn { font: 500 14px/1 "IBM Plex Sans", sans-serif; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--ia-border-strong); color: var(--ia-brand); background: #fff; display: inline-flex; align-items: center; gap: 6px; }
.ax-btn.primary { background: var(--ia-brand); color: #fff; border-color: var(--ia-brand); }
.ax-actions { display: flex; gap: 4px; border-top: 1px solid var(--ia-border); padding-top: 6px; margin: 0 -8px; }
.ax-action { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ia-text-2); padding: 0 10px; min-height: 32px; border-radius: 8px; }
.ax-action .ms { font-size: 18px; }
.ax-composer { flex: none; background: #fff; border: 1px solid var(--ia-border-strong); border-radius: 14px; box-shadow: 0 4px 14px rgba(36, 31, 31, .08), 0 1px 3px rgba(36, 31, 31, .05); padding: 12px 12px 8px 16px; display: flex; flex-direction: column; gap: 8px; }
.ax-input { font-size: 16px; color: var(--ia-text-3); line-height: 24px; min-height: 28px; }
.ax-cfoot { display: flex; justify-content: space-between; align-items: center; }
.ax-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--ia-border); border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--ia-text-2); }
.ax-chip .ms { font-size: 15px; }
.ax-send { width: 36px; height: 36px; border-radius: 50%; background: var(--ia-brand); color: #fff; display: grid; place-items: center; }
.ax-send .ms { font-size: 20px; }
.ax-meta { flex: none; display: flex; justify-content: space-between; font-size: 11px; color: var(--ia-text-3); padding: 0 4px; }

/* ---------- footer ---------- */
footer.site { padding: 32px 0 56px; }
.foot-top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
.foot-top .logo { height: 56px; width: auto; }
.foot-top .tag { font: italic 300 26px/1.4 var(--serif); color: var(--muted); margin-top: 16px; }
.foot-top h2 { font: 400 12px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.foot-top ul { list-style: none; display: grid; gap: 8px; font-size: 15px; }
.foot-top a:hover { color: var(--red); }
.foot-bottom { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.foot-bottom a { color: var(--soft); }
.foot-bottom a:hover { color: var(--red); }

/* ---------- cookie notice ---------- */
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 40; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: 0 24px 60px -24px rgba(23, 20, 19, .45); display: none; }
.consent.on { display: block; }
.consent p { font-size: 14px; color: var(--soft); }
.consent a { color: var(--red); text-decoration: underline; }
.consent .row-btns { display: flex; gap: 8px; margin-top: 14px; }
.consent button { font: 500 14px/1 var(--sans); padding: 11px 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--text); }
.consent .yes { background: var(--text); color: #fff; }
.consent .no { background: #fff; color: var(--text); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bird { animation: dx 11s ease-in-out infinite alternate; }
  .bird .bank { animation: bank 8s ease-in-out infinite alternate, dy 6.2s ease-in-out infinite alternate; transform-origin: 45% 60%; }
  .bird .wing { animation: wing 1.3s cubic-bezier(.45, 0, .55, 1) infinite; }
  .bird .far { animation: far 1.3s cubic-bezier(.45, 0, .55, 1) infinite; }
  .bird .body { animation: lift 1.3s cubic-bezier(.45, 0, .55, 1) infinite; }
  @keyframes dx { from { translate: -34px 0; } to { translate: 30px 0; } }
  @keyframes dy { from { translate: 0 -18px; } to { translate: 0 20px; } }
  @keyframes bank { from { rotate: -4deg; } to { rotate: 3deg; } }
  @keyframes wing { 0%, 100% { transform: scaleX(1) scaleY(1) skewX(0deg); } 42% { transform: scaleX(.93) scaleY(-.62) skewX(-9deg); } }
  @keyframes far { 0%, 100% { transform: rotate(0deg); } 42% { transform: rotate(-10deg); } }
  @keyframes lift { 0%, 100% { transform: translateY(0); } 46% { transform: translateY(-1.6%); } }
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
  .reveal.in { opacity: 1; transform: none; }
  .ev.alert::after { content: ""; position: absolute; left: -25px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); animation: ring 1.8s ease-out infinite; }
  @keyframes ring { from { transform: scale(1); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }
  .ax-in { animation: axin .35s cubic-bezier(.2, 0, 0, 1) both; }
  @keyframes axin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .ax-steps li.active { animation: iapulse 1.8s ease-in-out infinite; }
  .ax-steps li.active .ms { animation: axspin 1s linear infinite; }
  @keyframes iapulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
  @keyframes axspin { to { transform: rotate(360deg); } }
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
  .marquee-track { width: max-content; flex-wrap: nowrap; justify-content: flex-start; animation: marquee 40s linear infinite; }
  .marquee-set[aria-hidden] { display: flex; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav a.l { padding: 8px 8px; font-size: 13px; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-top > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .nav { left: 16px; right: 16px; transform: none; justify-content: space-between; padding: 6px 6px 6px 16px; }
  .nav a.l { display: none; }
  .nav .pill-glow { margin-left: auto; }
  .nav-toggle { display: grid; margin-left: 6px; }
  .nav-sheet { position: fixed; top: 76px; left: 16px; right: 16px; z-index: 29; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 12px; box-shadow: 0 24px 60px -24px rgba(23, 20, 19, .45); }
  .nav-sheet.open { display: grid; }
  .nav-sheet a { padding: 14px 16px; border-radius: 14px; font-size: 17px; }
  .nav-sheet a:hover, .nav-sheet a[aria-current="page"] { background: var(--panel-2); }
  .h1 { font-size: 54px; }
  .hero--compact .h1, .page-head .h1 { font-size: 46px; }
  .h2 { font-size: 38px; }
  .hero { min-height: 0; padding-top: 440px; }
  .hero--compact { padding-top: 330px; }
  .hero--compact .wrap { padding-top: 0; }
  .hero::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(250, 249, 247, .92) 50%, rgba(250, 249, 247, 0) 64%); }
  .bird { right: auto; left: 50%; top: 84px; width: min(76vw, 330px); margin-left: calc(min(76vw, 330px) / -2); }
  .hero--compact .bird { width: min(56vw, 230px); margin-left: calc(min(56vw, 230px) / -2); top: 86px; }
  .blk { padding: 40px 24px; margin: 36px 0; }
  .split, .split.wide-left, .form-wrap, .quote-card, .analyst { grid-template-columns: 1fr; gap: 32px; }
  .final .h1 { font-size: 46px; }
  .row { grid-template-columns: 1fr; gap: 12px; }
  .list { grid-template-columns: 1fr; }
  .list dt { border-bottom: 0; padding-bottom: 0; }
  .quad { grid-template-columns: 1fr; }
  .cards, .team { grid-template-columns: 1fr 1fr; }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .ba { grid-template-columns: 1fr; gap: 20px; }
  .ax { grid-template-columns: 1fr; height: auto; }
  .ax-rail { display: none; }
  .ax-body { padding: 16px; }
  .ax-log { min-height: 520px; }
  .ax-meta span:last-child { display: none; }
  .tabs { flex-wrap: wrap; border-radius: 18px; }
  .page-head { padding-top: 120px; }
  .layer { grid-template-columns: 48px 1fr; }
  .layer .where { grid-column: 2; justify-self: start; }
  .sources { padding-left: 0; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .marquee { --k: .78; }
  .marquee-set { gap: 48px; padding: 10px 24px; }
  .h1 { font-size: 44px; }
  .hero--compact .h1, .page-head .h1 { font-size: 40px; }
  .h2 { font-size: 34px; }
  .blk { margin: 28px -16px; border-radius: 0; padding: 36px 16px; }
  .final { padding: 56px 16px; }
  .cards, .cards.two, .team, .field-row, .foot-top { grid-template-columns: 1fr; }
  .logos { grid-template-columns: 1fr 1fr; }
  .form { padding: 24px; }
  .ba .then, .ba .now { grid-template-columns: 1fr; gap: 2px; }
  .quotes blockquote { font-size: 24px; }
  .tree { font-size: 11px; padding: 20px; }
  .ax-bubble { max-width: 88%; }
  .ax-answer table { font-size: 12px; }
  .ax-answer th, .ax-answer td { padding: 5px 6px; }
  .prose { font-size: 17px; }
  .consent { left: 12px; right: 12px; max-width: none; }
}