/* ITAI website styles (website/index.html). Served from this site only: the
   page's Content-Security-Policy (render.yaml, itai-website) has style-src
   'self' and no 'unsafe-inline'. The wordmark's rules are brand.css (the app's). */
/* Tokens. One scheme only - this dark-blue palette, always, with no
   toggle. Accent is the product's own blue (frontend/css/style.css) so
   the site and the app read as one. The page paints its own background
   and every color from these tokens, so it holds on any host regardless
   of the viewer's OS/browser theme. */
:root {
  --ground: #0b0f18;
  --surface: #121928;
  --surface-2: #182135;
  --ink: #e8ebf2;
  --ink-2: #aab3c6;
  --ink-3: #8a94aa;
  --rule: #232d43;
  --accent: #5b94ff;
  --accent-ink: #081022;
  --accent-soft: rgba(91, 148, 255, 0.12);
  --term-bg: #070a12;
  --term-ink: #d9deea;
  --term-dim: #7f8aa3;
  --term-rule: #1c2538;
  --ok: #3fbf7f;
  --wait: #e0a72e;
  --risk: #ef5757;
  /* The app's font stack (frontend/css/style.css :root), so the website
     and the sign-in page are one typeface (owner, 2026-10-05). --mono is the
     app's code stack, kept for command output only; labels that used to be
     monospace are the same sans in capitals. */
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* brand.css (the app's wordmark) colours its letters with --text. */
  --text: var(--ink);
  --radius: 12px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1160px;
}
:root { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
code, kbd { font-family: var(--mono); font-size: 0.88em; }
:not(pre) > code { background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 5px; color: var(--ink); }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; text-wrap: balance; margin: 0; }
p { margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { font: 600 12px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* ---- top bar ---- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.bar .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
/* The wordmark is the app's lockup (brand.css, copied from frontend/css/style.css by
   tools/brand_assets.py; brand.js centres the spark). Only its size is set here: the
   header's 24px, the footer's 20px. */
.brand .brand-lockup { font-size: 24px; }
.brand-small .brand-lockup { font-size: 20px; }
.footer-brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 8px; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; cursor: pointer;
  font: 600 15px/1 var(--body); padding: 12px 18px; border-radius: 10px; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-quiet:hover { background: var(--surface-2); }
/* Header buttons: Sign in (to the app, app.itaibot.io) beside Request access. */
.bar-actions { display: flex; gap: 8px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn-primary:hover { transform: none; } }

/* ---- hero ---- */
.hero { padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(38px, 5.6vw, 64px); font-weight: 700; letter-spacing: -0.025em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-2); max-width: 34em; margin-top: 22px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-facts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; font-size: 14px; color: var(--ink-3); }
.hero-facts span::before { content: "\2713"; color: var(--ok); margin-right: 7px; font-weight: 600; }

/* ---- the transcript: the product's own artefact ---- */
.term { background: var(--term-bg); color: var(--term-ink); border-radius: 14px; border: 1px solid var(--term-rule); box-shadow: 0 24px 60px -30px rgba(8, 14, 30, 0.55); overflow: hidden; }
.term-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--term-rule); font: 500 12.5px/1.2 var(--body); color: var(--term-dim); flex-wrap: wrap; }
.term-head strong { color: var(--term-ink); font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--body); padding: 5px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-wait { color: var(--wait); }
.pill-ok { color: var(--ok); }
.term-head .pill { margin-left: auto; }
.term-body { padding: 16px 16px 18px; font: 400 12px/1.6 var(--mono); overflow-x: auto; }
.term-body .ln { white-space: pre; }
.term-body .ps { color: #7fb0ff; }
.term-body .dim { color: var(--term-dim); }
.term-body .hit { color: #ffb86b; }
.finding { margin-top: 12px; padding: 10px 12px; border-left: 2px solid #7fb0ff; background: rgba(127, 176, 255, 0.07); white-space: normal; font-family: var(--body); font-size: 13.5px; line-height: 1.5; }
.finding b { font-weight: 600; }
.plan { margin-top: 12px; border: 1px solid var(--term-rule); border-radius: 10px; overflow: hidden; }
.plan-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; flex-wrap: wrap; }
.plan-row + .plan-row { border-top: 1px solid var(--term-rule); }
.plan-cmd { color: var(--term-ink); }
.tag { font: 600 11px/1 var(--body); letter-spacing: 0.02em; padding: 4px 7px; border-radius: 5px; background: rgba(63, 191, 127, 0.14); color: #6fdca4; }
.plan-meta { color: var(--term-dim); font-size: 12px; }
.approve { margin-left: auto; background: #5b94ff; color: #081022; border: 0; border-radius: 8px; padding: 8px 12px; font: 600 12.5px/1 var(--body); cursor: pointer; }
.approve:disabled { background: transparent; color: #6fdca4; cursor: default; padding-inline: 0; }
.term-out { margin-top: 10px; }
.term-caption { font-size: 13px; color: var(--ink-3); margin-top: 12px; }

/* ---- the recorded walkthrough ---- */
.demo-video { margin: 0; }
.see-it { margin-top: clamp(48px, 6vw, 80px); }
.see-it-head h3 { font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--display); letter-spacing: -0.015em; margin-top: 12px; }
.demo-frame { background: var(--term-bg); border: 1px solid var(--term-rule); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: 0 24px 60px -30px rgba(8, 14, 30, 0.55); }
.demo-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- guardrails ---- */
.guards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* Seven cards: the last spans two columns so the 4- and 2-column grids end flush. */
.guard:last-child { grid-column: span 2; }
.guard { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 18px 22px; }
.guard h3 { font: 600 16.5px/1.35 var(--body); letter-spacing: -0.005em; }
.guard p { color: var(--ink-2); font-size: 14.5px; margin-top: 10px; }
.guard .how { display: block; font: 600 11px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.never { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 12px clamp(24px, 4vw, 48px); align-items: start; border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px; }
.never h3 { font: 700 19px/1.3 var(--display); letter-spacing: -0.01em; }
.never ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; font-size: 15px; color: var(--ink-2); }
.never li { padding-left: 22px; position: relative; }
.never li::before { content: "\2715"; position: absolute; left: 0; top: 0; color: var(--risk); font-weight: 600; }

/* ---- sections ---- */
section.band { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--rule); }
.band-head { max-width: 40em; margin-bottom: clamp(32px, 4vw, 48px); }
.band-head h2 { font-size: clamp(28px, 3.8vw, 44px); font-weight: 700; letter-spacing: -0.018em; margin-top: 12px; }
.band-head p { color: var(--ink-2); margin-top: 14px; font-size: 17px; }

/* A ticket is a real sequence, so these steps are numbered. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); overflow: hidden; counter-reset: step; }
.step { padding: 26px 24px 28px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); counter-increment: step; }
.step:nth-child(3n) { border-right: 0; }
.step:nth-last-child(-n+3) { border-bottom: 0; }
.step::before { content: counter(step, decimal-leading-zero); font: 600 12px/1 var(--body); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--accent); }
.step h3 { font-size: 20px; font-weight: 700; margin-top: 14px; letter-spacing: -0.01em; }
.step p { color: var(--ink-2); margin-top: 8px; font-size: 15px; }
.step .gate { color: var(--wait); font-weight: 600; }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.feature { padding-block: 22px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; }
.feature h3 { font: 600 16px/1.35 var(--body); }
.feature p { color: var(--ink-2); font-size: 15px; }

.trust { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.trust-list { display: grid; gap: 14px; }
.trust-item { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; }
.trust-item h3 { font: 600 16px/1.35 var(--body); }
.trust-item p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.layers { font: 400 14px/1.5 var(--body); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.layer { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
.layer + .layer { border-top: 1px solid var(--rule); }
.layer b { font-family: var(--body); font-weight: 600; font-size: 14.5px; display: block; color: var(--ink); }
.layer span { color: var(--ink-3); }
.layer i { font-style: normal; color: var(--accent); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.plan-card.lead { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan-card h3 { font-size: 20px; font-weight: 700; }
.price { font: 700 40px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price small { font: 500 14px/1.3 var(--body); color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.plan-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.plan-card li::before { content: "\2013"; color: var(--ink-3); margin-right: 8px; }
.soon { font: 600 11px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wait); border: 1px solid currentColor; padding: 4px 7px; border-radius: 5px; align-self: flex-start; }
.fine { font-size: 14px; color: var(--ink-3); margin-top: 20px; max-width: 60em; }

.roadmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.road { border-top: 2px solid var(--rule); padding-top: 16px; }
.road h3 { font: 600 16px/1.35 var(--body); }
.road p { color: var(--ink-2); font-size: 14.5px; margin-top: 6px; }

.cta { text-align: left; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: clamp(28px, 5vw, 56px); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.02em; max-width: 18em; }
.cta p { color: var(--ink-2); margin-top: 10px; }

footer { border-top: 1px solid var(--rule); padding-block: 36px; color: var(--ink-3); font-size: 14px; }
footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- docs view ---- */
.docs { padding-block: clamp(32px, 5vw, 56px) 80px; }
.docs .wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.toc { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); display: grid; gap: 2px; font-size: 14.5px; }
.toc .eyebrow { margin: 18px 0 8px; }
.toc .eyebrow:first-child { margin-top: 0; }
.toc a { color: var(--ink-2); text-decoration: none; padding: 6px 10px; border-radius: 7px; }
.toc a:hover { background: var(--surface-2); color: var(--ink); }
.doc { max-width: 46em; }
.doc > header .doc-title { font-size: clamp(34px, 4.6vw, 50px); font-weight: 700; letter-spacing: -0.02em; }
.doc > header p { color: var(--ink-2); font-size: 18px; margin-top: 14px; }
.doc section { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--rule); }
.doc h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.doc h3 { font: 600 17px/1.4 var(--body); margin-top: 26px; }
.doc p, .doc li { color: var(--ink-2); }
.doc p + p, .doc h2 + p, .doc h3 + p { margin-top: 12px; }
.doc ol, .doc ul { padding-left: 1.3em; margin: 12px 0 0; display: grid; gap: 8px; }
.doc pre { background: var(--term-bg); color: var(--term-ink); font: 400 13px/1.6 var(--mono); padding: 14px 16px; border-radius: 10px; overflow-x: auto; margin: 14px 0 0; }
.note { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: 15px; }
.note.warn { background: color-mix(in srgb, var(--wait) 12%, transparent); }
.table-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid var(--rule); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; background: var(--surface); }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 600 12px/1.3 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
td { color: var(--ink-2); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }

/* ---- skip link: off-screen until a keyboard user tabs to it ---- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; }
.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; }
.skip:focus { left: 16px; top: 12px; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; }

/* ---- who it's for ---- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px 22px; }
.card h3 { font: 700 19px/1.3 var(--display); letter-spacing: -0.01em; }
.card p { color: var(--ink-2); font-size: 15px; margin-top: 10px; }

/* ---- ITAI vs a help desk / RMM ---- */
.compare th[scope="row"] { color: var(--ink); background: var(--surface); font: 600 14.5px/1.4 var(--body); letter-spacing: 0; text-transform: none; }
.compare td:last-child { color: var(--ink); }
.compare tr:last-child th { border-bottom: 0; }
.compare-note { color: var(--ink-2); font-size: 15px; margin-top: 18px; max-width: 60em; }

/* ---- FAQ ---- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.faq-item { padding-block: 22px; border-top: 1px solid var(--rule); }
.faq-item h3 { font: 600 17px/1.4 var(--body); }
.faq-item p { color: var(--ink-2); font-size: 15px; margin-top: 8px; }

/* ---- narrow ---- */
@media (max-width: 960px) {
  .hero .wrap, .trust { grid-template-columns: minmax(0, 1fr); }
  .cards, .faq { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { border-right: 0; border-bottom: 1px solid var(--rule) !important; }
  .step:last-child { border-bottom: 0 !important; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .guards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .never { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs .wrap { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .toc .eyebrow { grid-column: 1 / -1; }
}
/* The comparison table becomes one stacked block per row, each cell
   labelled with its column, so a phone never scrolls sideways. */
@media (max-width: 640px) {
  /* The header wraps here and the wordmark sits on the first row, flush with the top of the page:
     the spark rises about 6px above the I, so it needs that much room or the viewport clips its tip. */
  .brand { padding-top: 8px; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
  .compare tr:last-child { border-bottom: 0; }
  .compare th[scope="row"] { border-bottom: 0; padding-bottom: 4px; }
  .compare td { border-bottom: 0; padding-block: 6px; }
  .compare td::before { content: attr(data-label); display: block; font: 600 11px/1.4 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
}
@media (max-width: 560px) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .guards, .never ul { grid-template-columns: minmax(0, 1fr); }
  .guard:last-child { grid-column: auto; }
  .never { padding: 20px 18px; }
  .roadmap { grid-template-columns: minmax(0, 1fr); }
  .nav a { padding: 8px 9px; font-size: 14px; }
}
/* Five nav links still fit one row on a 375px phone. */
@media (max-width: 420px) {
  .bar-actions .btn { padding: 10px 12px; font-size: 14px; }
  .nav { gap: 2px; }
  .nav a { padding: 8px 6px; font-size: 13.5px; }
}

/* Former style="" attributes, moved here so the page's Content-Security-Policy
   needs no 'unsafe-inline' (render.yaml, itai-website). !important keeps the
   precedence an inline style had over every other rule. */
.fig-flush { margin: 0 !important; }
.ln-ok { color: #6fdca4 !important; }
.band-head-tight { margin-bottom: 28px !important; }
.soon-inline { margin-left: 6px !important; }
.band-flush { border-top: 0 !important; padding-top: 0 !important; }
.docs-first { border-top: 0 !important; margin-top: 24px !important; padding-top: 0 !important; }
.dot-ink3 { background: var(--ink-3) !important; }
.dot-accent { background: var(--accent) !important; }
.dot-wait { background: var(--wait) !important; }
.dot-ok { background: var(--ok) !important; }
.dot-risk { background: var(--risk) !important; }