/* AIsideway — site styles. Tokens mirror brand/identity-guide.md. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f5f3ee;
  --paper-2: #ece9e1;
  --ink: #141518;
  --graphite: #2a2c31;
  --muted: #5b5e66;
  --rule: #d6d2c8;
  --signal: #e0461a;
  --signal-text: #b23a10;

  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--graphite);
  --fg-muted: var(--muted);
  --line: var(--rule);
  --accent-text: var(--signal-text);
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);

  /* Product cards keep their own identities */
  --mmnm-bg: #0f100e;
  --mmnm-fg: #eeefe8;
  --mmnm-muted: #a3a69a;
  --mmnm-accent: #d7f75b;
  --ntai-bg: #ffffff;
  --ntai-fg: #1b2330;

  --font: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.75rem, 1.2rem + 2.2vw, 2.4rem);
  --step-4: clamp(2.4rem, 1.4rem + 5vw, 4.4rem);

  --gutter: 16px;
  --max: 1180px;
  --radius: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214;
    --bg-2: #1a1b1f;
    --fg: #eceae4;
    --fg-2: #d3d1ca;
    --fg-muted: #a4a49d;
    --line: #2e3036;
    --signal: #ff6a3d;
    --accent-text: #ff6a3d;
    --btn-bg: #eceae4;
    --btn-fg: #111214;
    --ntai-bg: #1a1b1f;
    --ntai-fg: #eceae4;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.5em; font-weight: 780; color: var(--fg); }
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 720; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: 0.35em; }
code, pre, .mono { font-family: var(--mono); font-size: 0.86em; }
pre { overflow-x: auto; }
table { border-collapse: collapse; }
.small { font-size: var(--step--1); }
.muted { color: var(--fg-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 32px; } }

.skip { position: absolute; left: -9999px; top: 0; background: var(--btn-bg); color: var(--btn-fg); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 16px; top: 12px; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 10; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.brand { color: var(--fg); display: inline-flex; align-items: center; text-decoration: none; }
.brand .wordmark { height: 30px; width: auto; display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-nav li { margin: 0; }
.site-nav a { color: var(--fg); text-decoration: none; font-weight: 560; padding: 6px 0; display: inline-block; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--signal); }
.menu-toggle { display: none; }

/* JS-enhanced mobile menu (without JS, the nav simply wraps) */
@media (max-width: 767px) {
  .js .menu-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    font: 600 var(--step--1)/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  }
  .js .site-nav { display: none; width: 100%; }
  .js .site-nav.open { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 0; padding: 8px 0 4px; }
  .js .site-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .js .site-nav a[aria-current="page"] { border-bottom-color: var(--signal); }
  .no-js .site-nav { width: 100%; }
}

/* ---------- Breadcrumbs ---------- */
.crumbs ol { list-style: none; padding: 14px 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--mono); font-size: 0.8125rem; color: var(--fg-muted); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--line); }
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }

/* ---------- Eyebrows, buttons ---------- */
.eyebrow { font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: 1rem; }
.eyebrow .glyph { color: var(--signal); font-weight: 700; }
.eyebrow .idx { color: var(--fg); font-weight: 700; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  font-weight: 700; font-size: var(--step-0); text-decoration: none; border-radius: var(--radius);
  border: 1px solid var(--btn-bg); transition: box-shadow 0.15s ease; text-align: center;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover, .btn-primary:focus-visible { box-shadow: inset 0 -4px 0 var(--signal); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-ghost:hover { box-shadow: inset 0 -3px 0 var(--signal); }
.text-link { font-weight: 650; }

/* ---------- Sections ---------- */
.section { padding: 64px 0; border-top: 1px solid var(--line); }
.section-tight { padding: 48px 0; }
.section-alt { background: var(--bg-2); }
.section-ink { background: #141518; color: #eceae4; border-top-color: #141518; }
.section-ink h2, .section-ink h3 { color: #eceae4; }
.section-ink .eyebrow { color: #a4a49d; }
.section-ink .eyebrow .idx { color: #eceae4; }
.section-ink p { color: #c9c7c0; }
@media (prefers-color-scheme: dark) { .section-ink { background: #0a0b0c; border-top-color: var(--line); } }
@media (min-width: 900px) { .section { padding: 96px 0; } .section-tight { padding: 64px 0; } }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--fg-2); max-width: 46rem; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.narrow { max-width: 72ch; }
.h-small { font-size: var(--step-1); }

.split { display: grid; gap: 16px 48px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.two-col { display: grid; gap: 40px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- Hero ---------- */
.hero { display: grid; gap: 40px; padding-top: 48px; padding-bottom: 64px; }
@media (min-width: 1000px) { .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; padding-top: 88px; padding-bottom: 96px; gap: 64px; } }
.hero h1 { max-width: 12ch; }
.hero-sub { font-size: var(--step-2); line-height: 1.3; font-weight: 650; letter-spacing: -0.01em; max-width: 30ch; color: var(--fg); }
.hero-body { color: var(--fg-2); max-width: 44rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.page-hero { padding-top: 40px; padding-bottom: 48px; }
.page-hero h1 { max-width: 20ch; font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem); }
@media (min-width: 900px) { .page-hero { padding-top: 64px; padding-bottom: 72px; } }

/* ---------- Products ---------- */
.product-pair { display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 900px) { .product-pair { grid-template-columns: 1fr 1fr; } }
.product-card { padding: 24px; border-radius: 6px; display: flex; flex-direction: column; min-width: 0; }
.product-card h3, .product-detail h2, .product-url { overflow-wrap: anywhere; }
@media (min-width: 600px) { .product-card { padding: 28px; } }
.product-card h3 { font-size: var(--step-2); margin-bottom: 2px; }
.product-card h3 a { color: inherit; text-decoration: none; }
.product-card h3 a:hover { text-decoration: underline; }
.product-aud { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.product-url { font-size: 0.82rem; margin-bottom: 16px; opacity: 0.75; }
.product-for { font-size: var(--step--1); }
.product-note { font-size: var(--step--1); font-style: italic; }
.product-human { background: var(--ntai-bg); color: var(--ntai-fg); border: 1px solid var(--line); }
.product-human .product-aud { color: #2f6b4f; }
@media (prefers-color-scheme: dark) { .product-human .product-aud { color: #8fd3ad; } }
.product-agent { background: var(--mmnm-bg); color: var(--mmnm-fg); border: 1px solid #2c2f28; }
.product-agent h3, .product-agent h2 { color: var(--mmnm-fg); }
.product-agent .product-aud { color: var(--mmnm-accent); }
.product-agent p { color: #c9cbc1; }
.product-code { background: #181a16; border: 1px solid #2c2f28; color: var(--mmnm-accent); padding: 12px 14px; border-radius: 4px; margin: 4px 0 16px; font-size: 0.82rem; white-space: pre-wrap; }
.endorse { margin: auto 0 0; padding-top: 16px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; opacity: 0.8; }
.endorse-mark { font-weight: 700; }
.why-both { margin-top: 40px; max-width: 68ch; }

.product-detail { display: grid; gap: 24px; padding: 28px 22px; border-radius: 6px; margin-bottom: 24px; }
.product-detail > * { min-width: 0; }
@media (min-width: 900px) { .product-detail { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding: 48px; } }
.product-detail h2 { font-size: var(--step-3); margin-bottom: 4px; }
.product-detail h2 a { color: inherit; text-decoration: none; }
.product-detail .lede { color: inherit; }
.product-detail.product-agent .lede { color: var(--mmnm-fg); }
.product-detail.product-agent a:not(.btn) { color: var(--mmnm-accent); }
.product-detail.product-agent .btn-ghost { color: var(--mmnm-fg); border-color: var(--mmnm-fg); }
.product-detail.product-agent .muted { color: var(--mmnm-muted); }
.product-detail.product-human h2, .product-detail.product-human h3 { color: var(--ntai-fg); }
.product-detail.product-human .btn-ghost { color: var(--ntai-fg); border-color: var(--ntai-fg); }

/* ---------- Channel diagram ---------- */
.channels { margin: 40px 0 0; }
.node { margin: 0; border: 1.5px solid var(--fg); border-radius: var(--radius); padding: 12px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; }
.node-k { font-weight: 750; }
.node-sub { font-size: 0.8rem; color: var(--fg-muted); }
.node-source { max-width: 360px; margin: 0 auto; text-align: center; border-color: var(--signal); }
.node-source .mono { font-weight: 700; font-size: 0.95rem; }
.channels-source { position: relative; padding-bottom: 28px; }
.channels-source::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 28px; border-left: 1.5px solid var(--fg); }
.channels-grid { display: grid; gap: 28px; border-top: 1.5px solid var(--fg); padding-top: 28px; position: relative; }
@media (min-width: 900px) { .channels-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.channel { display: flex; flex-direction: column; gap: 12px; position: relative; }
@media (max-width: 899px) { .channels-grid { border-top: 0; padding-top: 0; } .channel + .channel { border-top: 1px solid var(--line); padding-top: 28px; } }
@media (min-width: 900px) { .channel::before { content: ""; position: absolute; top: -28px; left: 50%; height: 28px; border-left: 1.5px solid var(--fg); } .channels-grid { border-top: 0; } .channels-grid::before { content: ""; position: absolute; top: 0; left: calc((100% - 48px) / 6); right: calc((100% - 48px) / 6); border-top: 1.5px solid var(--fg); } }
.channel-detail { font-size: var(--step--1); color: var(--fg-2); margin: 0; }
.channel-control { font-size: var(--step--1); margin: 0; padding-left: 12px; border-left: 2px solid var(--signal); }
.channel-control .mono { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }
.node-out { margin-top: auto; background: var(--fg); color: var(--bg); text-align: center; font-weight: 750; border-color: var(--fg); }
.channels figcaption { margin-top: 20px; font-size: var(--step--1); color: var(--fg-muted); max-width: 68ch; }

/* ---------- Services ---------- */
.service-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 32px; }
@media (min-width: 700px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .service-grid { grid-template-columns: repeat(4, 1fr); } }
.service-card { background: var(--bg); padding: 26px 24px 22px; color: var(--fg); text-decoration: none; display: flex; flex-direction: column; min-height: 240px; }
.service-card p { color: var(--fg-2); font-size: var(--step--1); }
.service-card:hover h3 { text-decoration: underline; text-decoration-color: var(--signal); }
.service-card .idx { color: var(--signal); font-weight: 700; margin-bottom: 18px; }
.more { margin-top: auto; font-weight: 700; color: var(--fg); font-size: 1.2rem; }
.monitor-band { display: grid; gap: 8px; align-items: center; margin-top: 16px; padding: 20px 24px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); text-decoration: none; }
@media (min-width: 900px) { .monitor-band { grid-template-columns: 13rem 1fr auto; gap: 24px; } }
.monitor-band .mono { color: var(--signal); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.monitor-band:hover strong { text-decoration: underline; text-decoration-color: var(--signal); }

.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; gap: 4px 24px; padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
@media (min-width: 900px) { .service-row { grid-template-columns: 3rem 16rem 1fr 2rem; align-items: baseline; } }
.service-row .idx { color: var(--signal); font-weight: 700; }
.service-row-name { font-weight: 760; font-size: var(--step-1); }
.service-row-desc { color: var(--fg-2); }
.service-row:hover .service-row-name { text-decoration: underline; text-decoration-color: var(--signal); }

.levels { list-style: none; padding: 0; margin: 32px 0 20px; display: grid; gap: 16px; counter-reset: none; }
@media (min-width: 900px) { .levels { grid-template-columns: repeat(4, 1fr); } }
.levels li { border-top: 3px solid var(--fg); padding-top: 14px; margin: 0; }
.levels li:nth-child(4) { border-top-color: var(--signal); }
.levels .idx { color: var(--fg-muted); font-weight: 700; }
.levels h3 { margin-top: 6px; }
.levels p { margin-bottom: 6px; }

.scope-grid { display: grid; gap: 28px 40px; margin-top: 28px; }
@media (min-width: 800px) { .scope-grid { grid-template-columns: 1fr 1fr; } }
.scope-group h3 { font-size: var(--step-0); text-transform: uppercase; font-family: var(--mono); letter-spacing: 0.06em; font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.scope-group ul { padding-left: 1.1em; }
.checklist { list-style: none; padding: 0; }
.checklist li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); position: relative; margin: 0; }
.checklist li::before { content: ">/"; position: absolute; left: 0; font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--signal); top: 13px; }
.wont { margin-top: 28px; padding: 20px 22px; border: 1px dashed var(--fg-muted); border-radius: var(--radius); }
.wont h3 { margin-top: 0; font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono); }
.wont ul { margin: 0; }
.related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }

.engage-grid { display: grid; gap: 20px; margin: 28px 0 20px; }
@media (min-width: 900px) { .engage-grid { grid-template-columns: repeat(3, 1fr); } }
.engage { border: 1px solid var(--line); padding: 24px; border-radius: var(--radius); background: var(--bg); }
.engage .idx { color: var(--signal); font-weight: 700; margin: 0 0 8px; }

/* ---------- Advantage, method, principles ---------- */
.adv-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 1px; background: #2e3036; border: 1px solid #2e3036; }
@media (min-width: 800px) { .adv-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .adv-list { grid-template-columns: repeat(3, 1fr); } }
.adv-list li { background: #141518; padding: 24px; margin: 0; }
@media (prefers-color-scheme: dark) { .adv-list li { background: #0a0b0c; } }
.adv-list h3 { font-size: var(--step-0); }
.adv-list p { font-size: var(--step--1); margin: 0; }
.section-ink h2 { max-width: 24ch; }

.method { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .method { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.method li { margin: 0; padding-top: 16px; border-top: 1px solid var(--fg); }
.method .idx { color: var(--signal); font-weight: 700; }
.method h3 { margin-top: 6px; }
.method p { font-size: var(--step--1); color: var(--fg-2); }
@media (min-width: 900px) { .method-detailed { grid-template-columns: 1fr; } .method-detailed li { display: grid; grid-template-columns: 3rem 10rem 1fr 18rem; gap: 16px; align-items: baseline; } .method-detailed h3 { margin: 0; } .method-detailed p { margin: 0; } }

.principles { display: grid; gap: 28px 40px; margin-top: 28px; }
@media (min-width: 800px) { .principles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principles p { color: var(--fg-2); font-size: var(--step--1); }
.wont-list li { margin-bottom: 0.7em; }
.questions li { margin-bottom: 0.8em; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--bg-2); border-top: 1px solid var(--line); padding: 56px 0; }
.cta-inner { display: grid; gap: 24px; align-items: center; }
@media (min-width: 1100px) { .cta-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; } .cta-actions { flex-direction: column; } }
.cta-inner h2 { margin-bottom: 8px; }
.cta-inner p { color: var(--fg-2); max-width: 56ch; margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Tables & data ---------- */
.table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); }
table.data { width: 100%; min-width: 620px; font-size: var(--step--1); background: var(--bg); }
table.data caption { text-align: left; padding: 12px 14px; font-weight: 700; caption-side: top; border-bottom: 1px solid var(--line); }
table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); background: var(--bg-2); font-weight: 600; }
table.data tbody th { font-weight: 700; }
table.data tr:last-child th, table.data tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
td.ok { color: #1f7a4a; font-weight: 700; }
td.warn { color: #9a6200; font-weight: 700; }
td.bad { color: var(--accent-text); font-weight: 700; }
@media (prefers-color-scheme: dark) { td.ok { color: #7fd6a4; } td.warn { color: #f0c060; } }

.synthetic-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; padding: 5px 10px; border: 1.5px dashed var(--signal); color: var(--accent-text); border-radius: var(--radius); margin: 0 0 16px; }
.synthetic-inline { font-size: 0.7rem; border: 1px dashed var(--signal); color: var(--accent-text); padding: 1px 6px; margin-left: 6px; }

.dash { border: 1px solid var(--line); background: var(--bg-2); padding: 20px; border-radius: var(--radius); margin: 24px 0; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.dash-title { font-weight: 750; margin: 0; }
.dash .synthetic-badge { margin: 0; }
.dash .table-wrap { margin: 16px 0; }
.bar-cell { width: 34%; min-width: 140px; }
svg.bar { width: 100%; height: 10px; display: block; margin-top: 5px; }
.bar-track { fill: var(--line); }
.bar-fill { fill: var(--fg-muted); }
.kind-demand .bar-fill, .kind-outcome .bar-fill { fill: var(--signal); }
.kind-outcome th { color: var(--accent-text); }
.dash-notes p { font-size: var(--step--1); margin: 0; color: var(--fg-2); }

/* ---------- Articles & insights ---------- */
.article-meta { color: var(--fg-muted); font-size: 0.8rem; margin-top: 12px; }
.article .page-hero h1 { max-width: 24ch; }
.sources { font-size: var(--step--1); }
.sources li { margin-bottom: 0.5em; overflow-wrap: anywhere; }
.compare { display: grid; gap: 20px; margin: 8px auto 32px; }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); display: flex; flex-direction: column; min-width: 0; }
.compare-col figcaption { padding: 12px 16px; font-weight: 750; border-bottom: 1px solid var(--line); }
.compare-col .idx { color: var(--signal); margin-right: 6px; }
.compare-col pre { margin: 0; padding: 14px 16px; background: var(--bg-2); font-size: 0.76rem; line-height: 1.5; border-bottom: 1px solid var(--line); flex: 1; }
.extract { padding: 14px 16px; }
.extract ul { margin: 0; font-size: var(--step--1); }
.extract p { margin-bottom: 6px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.extract-bad { border-left: 4px solid var(--fg-muted); }
.extract-good { border-left: 4px solid var(--signal); }
.code-figure { margin: 8px 0 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); min-width: 0; }
.code-figure figcaption { padding: 10px 16px; font-weight: 700; font-size: var(--step--1); border-bottom: 1px solid var(--line); }
.code-figure pre { margin: 0; padding: 14px 16px; background: var(--bg-2); font-size: 0.76rem; line-height: 1.5; }
.status-tag { font-size: 0.7rem; border: 1px solid var(--line); color: var(--fg-muted); padding: 1px 6px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }

.post-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.post-list li { margin: 0; }
.post { display: grid; gap: 6px; padding: 28px 0; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
@media (min-width: 900px) { .post { grid-template-columns: 1fr 9rem; } .post-date { grid-column: 2; grid-row: 1 / span 3; text-align: right; } }
.post-kind { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--signal); font-weight: 700; }
.post-title { font-size: var(--step-2); font-weight: 760; line-height: 1.2; letter-spacing: -0.015em; }
.post-desc { color: var(--fg-2); max-width: 68ch; }
.post-date { color: var(--fg-muted); font-size: 0.8rem; }
.post:hover .post-title { text-decoration: underline; text-decoration-color: var(--signal); }
.planned { list-style: none; padding: 0; margin: 0; }
.planned li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--fg-2); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; } }
.contact-form { max-width: 640px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--fg); background: var(--bg); border: 1.5px solid var(--fg-muted);
  border-radius: var(--radius); padding: 12px 14px; min-height: 48px;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fg); outline: 3px solid var(--signal); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--accent-text); }
.hint { font-size: var(--step--1); color: var(--fg-muted); margin-top: 6px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 8px 0 16px; }
.form-status { margin-top: 16px; font-weight: 650; min-height: 1.6em; }
.form-status.is-error { color: var(--accent-text); }
.form-status.is-ok { color: #1f7a4a; }
@media (prefers-color-scheme: dark) { .form-status.is-ok { color: #7fd6a4; } }
.contact-aside { border-top: 3px solid var(--fg); padding-top: 20px; }
.steps { padding-left: 1.2em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 28px; background: var(--bg); }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } }
.footer-brand p { color: var(--fg-2); max-width: 34ch; margin-top: 14px; }
.footer-h { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-weight: 600; margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--fg); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--signal); }
.footer-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-base p { margin: 0; max-width: 80ch; }
.footer-mark { display: inline-block; vertical-align: -3px; margin-right: 8px; color: var(--fg); }
.footer-mark .mark { width: 16px; height: 16px; display: block; }

/* ---------- 404 ---------- */
.notfound-code { font-family: var(--mono); color: var(--signal); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .cta-band, .menu-toggle { display: none; } body { background: #fff; color: #000; } }

/* ---------- Message polish (v2) ---------- */
h1, h2, .hero-sub, .post-title { text-wrap: balance; }
.lede, .hero-body, .prose p { text-wrap: pretty; }

.hero { position: relative; isolation: isolate; }
.hero h1 { max-width: 16ch; font-size: clamp(2.4rem, 1rem + 4.4vw, 4.4rem); }
@media (min-width: 1000px) and (max-width: 1279px) { .hero h1 { font-size: clamp(2.6rem, 0.6rem + 3.6vw, 3.6rem); } }
.h1-turn { display: block; color: var(--signal); }
.hero-mark { display: none; }
@media (min-width: 1000px) {
  .hero-mark { display: block; position: absolute; z-index: -1; right: var(--gutter); top: 8px; width: 360px; color: var(--fg); opacity: 0.05; pointer-events: none; }
  .hero-mark .mark { width: 100%; height: auto; display: block; }
  .hero-mark path { stroke: currentColor; }
}

.selfcheck { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); counter-reset: none; }
.selfcheck li { margin: 0; border-bottom: 1px solid var(--line); }
.selfcheck .idx { color: var(--signal); font-weight: 700; }

.adv-grid { display: grid; gap: 32px; margin-top: 32px; }
@media (min-width: 1000px) { .adv-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: start; } }
.adv-grid .adv-list { margin: 0; }
@media (min-width: 800px) { .adv-grid .adv-list { grid-template-columns: 1fr 1fr; } }
.receipts { border: 1px solid #2e3036; border-radius: 4px; background: #0d0e10; padding: 20px 22px; font-size: var(--step--1); }
.receipts-head { color: #ff6a3d; font-weight: 700; margin-bottom: 10px; }
.receipts ul { list-style: none; padding: 0; margin: 0; }
.receipts li { margin: 0; border-top: 1px solid #23252a; }
.receipts li:first-child { border-top: 0; }
.receipts a { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; text-decoration: none; color: #c9c7c0; }
.receipts code { color: #eceae4; font-size: 0.85rem; overflow-wrap: anywhere; }
.receipts a:hover code, .receipts a:focus-visible code { color: #ff6a3d; text-decoration: underline; }
.receipts a span { color: #a4a49d; }
.receipts-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #23252a; color: #a4a49d !important; font-size: 0.8rem; }

@media (min-width: 900px) {
  .method:not(.method-detailed) li { position: relative; }
  .method:not(.method-detailed) li:not(:last-child)::after { content: "→"; position: absolute; top: -0.85em; right: -12px; background: var(--bg); padding: 0 2px; color: var(--signal); font-weight: 700; }
}
/* =====================================================================
   AIsideway — motion & interaction layer.
   Concatenated after site.css at build time. Everything here is
   progressive: without JS, or with prefers-reduced-motion, every page
   is complete and static.
   ===================================================================== */

/* ---------- Hero backdrop + entrance ---------- */
.hero::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
  opacity: 0.55; pointer-events: none;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slide-up { from { transform: translateY(14px); } to { transform: none; } }
@keyframes draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* Headline + subhead only move (never fade) so they paint immediately and don't delay LCP. */
  .hero h1, .hero-sub { animation: slide-up 0.9s cubic-bezier(.2,.7,.2,1) both; }
  .hero .h1-turn { animation: slide-up 0.9s 0.25s cubic-bezier(.2,.7,.2,1) both; }
  .hero-sub { animation-delay: 0.15s; }
  .hero .eyebrow, .hero-body, .hero-actions, .lens { animation: rise 0.8s cubic-bezier(.2,.7,.2,1) both; }
  .hero-body { animation-delay: 0.3s; }
  .hero-actions { animation-delay: 0.4s; }
  .lens { animation-delay: 0.3s; }
  .hero-mark path { stroke-dasharray: 60; animation: draw 1.6s 0.2s cubic-bezier(.6,0,.2,1) both; }
  .hero-mark path + path { animation-delay: 0.7s; }
}

/* ---------- The lens: one page, two readers ---------- */
.lens { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); box-shadow: 0 1px 0 var(--line), 0 24px 60px -30px rgba(20, 21, 24, 0.35); overflow: hidden; align-self: center; min-width: 0; }
.lens-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.lens-dots { display: inline-flex; gap: 5px; }
.lens-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.lens-url { font-size: 0.75rem; color: var(--fg-muted); flex: 1; min-width: 7rem; }
.lens-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--bg); position: relative; }
.lens-tab { font: 600 0.78rem/1 var(--mono); letter-spacing: 0.02em; border: 0; background: transparent; color: var(--fg-muted); padding: 8px 12px; border-radius: 999px; cursor: pointer; min-height: 32px; position: relative; z-index: 1; transition: color 0.25s ease; }
.lens-tab[aria-selected="true"] { color: var(--btn-fg); }
.lens-tabs::before { content: ""; position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px; background: var(--btn-bg); transition: transform 0.45s cubic-bezier(.2,.7,.2,1), background 0.3s; }
.lens.is-agent .lens-tabs::before { transform: translateX(100%); background: var(--signal); }
.lens.is-agent .lens-tab[aria-selected="true"] { color: #111214; }
.no-js .lens-tabs, .no-js .lens-pause { display: none; }

.lens-stage { position: relative; display: grid; }
.lens-panel { grid-area: 1 / 1; padding: 18px; min-width: 0; }
.lens-agent { background: #0d0e10; color: #d3d1ca; }
.no-js .lens-panel { grid-area: auto; }
.js .lens-agent { clip-path: inset(0 0 100% 0); transition: clip-path 0.75s cubic-bezier(.65,0,.25,1); }
.js .lens.is-agent .lens-agent { clip-path: inset(0 0 0 0); }
.lens-scan { display: none; }
.js .lens-scan { display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--signal); box-shadow: 0 0 18px 2px var(--signal); opacity: 0; pointer-events: none; }
.js .lens.is-scanning.is-agent .lens-scan { animation: scan-down 0.75s cubic-bezier(.65,0,.25,1) both; }
.js .lens.is-scanning:not(.is-agent) .lens-scan { animation: scan-up 0.75s cubic-bezier(.65,0,.25,1) both; }
@keyframes scan-down { 0% { opacity: 1; top: 0; } 90% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
@keyframes scan-up { 0% { opacity: 1; top: 100%; } 90% { opacity: 1; } 100% { opacity: 0; top: 0; } }

.lens-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lens-card { margin: 0; padding: 14px 14px 12px; border-radius: 6px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; transition: transform 0.25s ease, border-color 0.25s ease; }
.lens-card:hover { transform: translateX(3px); border-color: var(--fg-muted); }
.lc-k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }
.lc-name { font-weight: 760; font-size: 1.05rem; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.lc-name:hover { text-decoration: underline; text-decoration-color: var(--signal); }
.lc-desc { font-size: var(--step--1); color: var(--fg-2); }
.lc-human { background: var(--ntai-bg); }
.lc-agent { background: #0f100e; border-color: #2c2f28; }
.lc-agent .lc-k { color: #d7f75b; }
.lc-agent .lc-name { color: #eeefe8; }
.lc-agent .lc-desc { color: #c9cbc1; }
.lc-agent:hover { border-color: #4a4e43; }
.lc-biz { background: var(--bg-2); }
.lc-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--step--1); }

.lens-code { margin: 0; font-size: 0.74rem; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }
.lens-code .ln { display: block; white-space: pre-wrap; min-height: 1.65em; }
.t-p { color: #ff6a3d; font-weight: 700; }
.t-m { color: #8fd3ad; }
.t-t { color: #a4a49d; }
.t-k { color: #9cc3ff; }
.t-s { color: #f0c060; }
@media (prefers-reduced-motion: no-preference) {
  .js .lens-agent .ln { opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
  .js .lens.is-agent .lens-agent .ln { opacity: 1; transform: none; }
  .js .lens.is-agent .ln:nth-child(2) { transition-delay: 0.30s; } .js .lens.is-agent .ln:nth-child(3) { transition-delay: 0.36s; }
  .js .lens.is-agent .ln:nth-child(4) { transition-delay: 0.42s; } .js .lens.is-agent .ln:nth-child(5) { transition-delay: 0.48s; }
  .js .lens.is-agent .ln:nth-child(6) { transition-delay: 0.54s; } .js .lens.is-agent .ln:nth-child(7) { transition-delay: 0.60s; }
  .js .lens.is-agent .ln:nth-child(8) { transition-delay: 0.66s; } .js .lens.is-agent .ln:nth-child(9) { transition-delay: 0.72s; }
  .js .lens.is-agent .ln:nth-child(10) { transition-delay: 0.78s; } .js .lens.is-agent .ln:nth-child(11) { transition-delay: 0.84s; }
  .js .lens.is-agent .ln:nth-child(12) { transition-delay: 0.90s; } .js .lens.is-agent .ln:nth-child(13) { transition-delay: 0.96s; }
  .js .lens.is-agent .ln:nth-child(14) { transition-delay: 1.02s; }
}
.lens-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 0.72rem; color: var(--fg-muted); background: var(--bg-2); }
.lens-pause { font-size: 0.72rem; background: transparent; border: 1px solid var(--line); color: var(--fg-2); border-radius: 999px; padding: 4px 10px; cursor: pointer; min-height: 28px; }
.lens-pause:hover { border-color: var(--fg-muted); }

/* ---------- Channel diagram: data in motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .channels-source::after {
    width: 12px; left: calc(50% - 6px); border-left: 0;
    background: radial-gradient(circle, var(--signal) 3.5px, transparent 4.5px) 50% -12px / 12px 12px no-repeat,
                linear-gradient(var(--fg), var(--fg)) 50% 0 / 1.5px 100% no-repeat;
    animation: packet-y 2.2s linear infinite;
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .channel::before {
    width: 12px; left: calc(50% - 6px); border-left: 0;
    background: radial-gradient(circle, var(--signal) 3.5px, transparent 4.5px) 50% -12px / 12px 12px no-repeat,
                linear-gradient(var(--fg), var(--fg)) 50% 0 / 1.5px 100% no-repeat;
    animation: packet-y 2.2s 1.1s linear infinite;
  }
}
@keyframes packet-y { 0% { background-position: 50% -12px, 50% 0; } 60%, 100% { background-position: 50% calc(100% + 12px), 50% 0; } }
.channel .node { transition: border-color 0.25s ease, transform 0.25s ease; }
.channel:hover .node:first-child { border-color: var(--signal); transform: translateY(-2px); }
.node-out { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.channel:hover .node-out { background: var(--signal); border-color: var(--signal); color: #111214; }

/* ---------- Self-check quiz ---------- */
.selfcheck fieldset { border: 0; margin: 0; padding: 16px 0; min-width: 0; }
.selfcheck legend { display: grid; grid-template-columns: 2.6rem 1fr; gap: 8px; padding: 0; font-weight: 600; width: 100%; }
.q-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 2.6rem; }
.q-opts label { position: relative; cursor: pointer; }
.q-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-opts span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: var(--step--1); font-weight: 650; color: var(--fg-2); background: var(--bg); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.q-opts label:hover span { border-color: var(--fg-muted); }
.q-opts input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.q-opts input[value="yes"]:checked + span { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.q-opts input[value="unsure"]:checked + span, .q-opts input[value="no"]:checked + span { background: var(--signal); color: #111214; border-color: var(--signal); }
.selfcheck .q-link { display: inline-block; margin: 10px 0 0 2.6rem; padding: 0; font-size: var(--step--1); font-weight: 650; color: var(--accent-text); }
.js .selfcheck li:not(.is-gap) .q-link { display: none; }
.selfcheck li.is-gap .q-link { animation: rise 0.35s ease both; }

.quiz-result { margin-top: 28px; display: grid; grid-template-columns: auto 1fr; gap: 16px 20px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
@media (min-width: 900px) { .quiz-side { position: sticky; top: 24px; align-self: start; } }
.no-js .meter, .no-js .quiz-out { display: none; }
.no-js .quiz-result { grid-template-columns: 1fr; }
.meter { position: relative; width: 96px; height: 96px; }
.meter svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.meter circle { fill: none; stroke-width: 10; }
.meter-track { stroke: var(--line); }
.meter-fill { stroke: var(--signal); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--pct, 0)); transition: stroke-dashoffset 0.7s cubic-bezier(.2,.7,.2,1), stroke 0.3s; }
.quiz-result:not(.has-answers) .meter-fill { stroke-dashoffset: 100; stroke-linecap: butt; }
.quiz-result.is-strong .meter-fill { stroke: var(--fg); }
.meter-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font: 600 0.95rem/1 var(--mono); color: var(--fg-muted); }
.meter-num b { font-size: 1.6rem; color: var(--fg); font-family: var(--font); font-weight: 800; }
.quiz-msg { margin: 0; font-weight: 650; }
.quiz-recs { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-recs:empty { display: none; }
.quiz-recs li { margin: 0; animation: rise 0.35s ease both; }
.quiz-recs a { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--signal); color: var(--accent-text); text-decoration: none; }
.quiz-recs a:hover { background: var(--signal); color: #111214; }
.quiz-cta { grid-column: 1 / -1; }

/* ---------- Ink section spotlight (pointer-driven via --mx/--my) ---------- */
.section-ink { position: relative; overflow: hidden; }
.section-ink::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 78%) var(--my, 12%), rgba(255, 106, 61, 0.15), transparent 60%); }
.section-ink > .wrap { position: relative; }
.adv-list li { transition: background 0.3s ease; }
.adv-list li:hover { background: #1b1c20; }

/* ---------- Receipts: typed terminal ---------- */
.receipts li.typing code::after { content: "\258D"; color: #ff6a3d; animation: blink 1s steps(1) infinite; }
.js .receipts.is-armed li span { opacity: 0; transition: opacity 0.4s ease; }
.js .receipts.is-armed li.done span { opacity: 1; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Scroll reveal (JS adds .reveal only to content below the fold) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- Cards & buttons ---------- */
.btn-primary { background-image: linear-gradient(var(--signal), var(--signal)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 4px; transition: background-size 0.35s cubic-bezier(.2,.7,.2,1); }
.btn-primary:hover, .btn-primary:focus-visible { box-shadow: none; background-size: 100% 4px; }
.btn-ghost { background-image: linear-gradient(var(--signal), var(--signal)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 3px; transition: background-size 0.35s cubic-bezier(.2,.7,.2,1); }
.btn-ghost:hover { box-shadow: none; background-size: 100% 3px; }
.service-card { position: relative; transition: background 0.3s ease; }
.service-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(.2,.7,.2,1); }
.service-card:hover::before, .service-card:focus-visible::before { transform: scaleX(1); }
.more { transition: transform 0.25s ease; display: inline-block; }
.service-card:hover .more, .monitor-band:hover .more, .service-row:hover .more { transform: translateX(4px); }
.product-card { transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(20, 21, 24, 0.45); }
.brand .wordmark path:nth-child(2) { transition: transform 0.3s cubic-bezier(.2,.7,.2,1); }
.brand:hover .wordmark path:nth-child(2) { transform: translateX(3px); }

/* ---------- Synthetic dashboard bars grow in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .dash .bar-fill { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
  .js .dash.is-in .bar-fill { transform: scaleX(1); }
  .js .dash.is-in tr:nth-child(2) .bar-fill { transition-delay: 0.08s; } .js .dash.is-in tr:nth-child(3) .bar-fill { transition-delay: 0.16s; }
  .js .dash.is-in tr:nth-child(4) .bar-fill { transition-delay: 0.24s; } .js .dash.is-in tr:nth-child(5) .bar-fill { transition-delay: 0.32s; }
  .js .dash.is-in tr:nth-child(6) .bar-fill { transition-delay: 0.40s; } .js .dash.is-in tr:nth-child(7) .bar-fill { transition-delay: 0.48s; }
}

/* ---------- Cross-page transitions (supporting browsers only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: 0.18s ease both vt-out; }
  ::view-transition-new(root) { animation: 0.32s cubic-bezier(.2,.7,.2,1) both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .lens-scan, .hero::before { animation: none !important; }
  .js .lens-agent { transition: none; }
}

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .js .lens-agent { clip-path: none !important; }
  .lens-stage { display: block; }
}