/* XIRO website - one design system for every page.
   The marketing pages link this file; the four documents (guide, reference,
   tech, runbook) get it inlined by scripts/build_site.py so each one is a
   single file that works offline. Edit here, then run the build. */

:root {
  --bg: #05070c;
  --bg-2: #0a0e17;
  --bg-3: #0f1420;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --surface-3: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #eef1f8;
  --soft: #c9d0de;
  --muted: #98a2b5;
  --faint: #6b7487;
  --iris: #949cff;
  --iris-2: #6f78f0;
  --aqua: #5fe3cf;
  --gold: #f1c97a;
  --rose: #ff8197;
  --ok: #5fe39c;
  --warn: #f2c35b;
  --risk: #ff6f80;
  --brand: linear-gradient(115deg, #b3b9ff 0%, #8f98ff 38%, #5fe3cf 100%);
  --brand-soft: linear-gradient(115deg, rgba(148, 156, 255, .18), rgba(95, 227, 207, .12));
  --gold-grad: linear-gradient(120deg, #ffe3a8, #f1c97a 45%, #d99c4a);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--line);
  --glow: 0 0 0 1px rgba(148, 156, 255, .25), 0 20px 60px -20px rgba(111, 120, 240, .45);
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "SF Pro Display", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;
  --wrap: 1180px;
  --nav-h: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 var(--font); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p a, li a, td a, dd a, .link { color: var(--iris); text-decoration: underline; text-decoration-color: rgba(148, 156, 255, .35); text-underline-offset: 3px; }
p a:hover, li a:hover, td a:hover, dd a:hover, .link:hover { text-decoration-color: var(--iris); }
strong, b { color: var(--text); font-weight: 650; }
code, kbd, pre, samp { font-family: var(--mono); font-size: .88em; }
code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: .08em .4em; color: #dfe3ff; overflow-wrap: anywhere; }
kbd { background: var(--bg-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: .05em .45em; color: var(--text); font-size: .8em; }
pre { background: #070a12; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 20px; overflow: auto; line-height: 1.6; color: #d6dcf0; }
pre code { background: none; border: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
::selection { background: rgba(148, 156, 255, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── ambient light ───────────────────────────────────────────────────── */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Soft light from plain radial gradients: no filter, so it costs nothing to
   draw on integrated graphics (a blur(90px) layer this size was measurable). */
.ambient::before, .ambient::after {
  content: ""; position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%;
  opacity: .55; will-change: transform;
}
.ambient::before { left: -28vmax; top: -34vmax; background: radial-gradient(circle closest-side, rgba(111, 120, 240, .32), rgba(111, 120, 240, .12) 45%, transparent); animation: drift 26s ease-in-out infinite alternate; }
.ambient::after { right: -34vmax; top: 6vmax; background: radial-gradient(circle closest-side, rgba(95, 227, 207, .16), rgba(95, 227, 207, .06) 45%, transparent); animation: drift 32s ease-in-out infinite alternate-reverse; }
.ambient i { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%); opacity: .35; }
@keyframes drift { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.08); } }

/* ── navigation ──────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); background: rgba(5, 7, 12, .72); border-bottom: 1px solid var(--line); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 18px/1 var(--display); letter-spacing: .14em; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand small { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--faint); margin-inline-start: 4px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; flex: 1; }
.nav-links > a, .dd > button { padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: 14.5px; font-weight: 500; background: none; border: 0; cursor: pointer; transition: color .2s, background .2s; }
.nav-links > a:hover, .dd > button:hover, .dd:focus-within > button { color: var(--text); background: var(--surface-2); }
.nav-links > a[aria-current="page"], .dd.current > button { color: var(--text); }
.nav-links > a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px; background: var(--brand); }
.dd { position: relative; }
.dd > button::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .7; }
.dd-panel { position: absolute; top: calc(100% + 10px); left: -12px; width: 330px; padding: 8px; border-radius: 16px; background: rgba(12, 16, 26, .96); border: 1px solid var(--line-2); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.dd:hover .dd-panel, .dd:focus-within .dd-panel { opacity: 1; visibility: visible; transform: none; }
.dd-panel a { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; }
.dd-panel a:hover, .dd-panel a[aria-current="page"] { background: var(--surface-2); }
.dd-panel .ico { grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid var(--line); color: var(--iris); }
.dd-panel .ico svg { width: 17px; height: 17px; }
.dd-panel b { font-size: 14px; font-weight: 600; }
.dd-panel span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.mobile-nav { display: none; }

/* limited-time offer */
.promo { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px 16px; background: linear-gradient(90deg, rgba(241, 201, 122, .2), rgba(148, 156, 255, .16), rgba(241, 201, 122, .2)); border-bottom: 1px solid rgba(241, 201, 122, .35); color: var(--text); font-size: 14px; text-align: center; }
.promo b { font: 800 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #1d1405; background: var(--gold-grad); padding: 5px 9px; border-radius: 999px; }
.promo s, .btn s, .price s { opacity: .55; font-weight: 500; }
.promo em { font-style: normal; font-weight: 700; color: var(--gold); }
.promo:hover em { color: #fff; }
.btn s { margin-inline-end: 4px; }
.price .save { font-style: normal; font: 800 11.5px/1 var(--mono); letter-spacing: .1em; color: var(--ok); background: rgba(95, 227, 156, .12); border: 1px solid rgba(95, 227, 156, .35); padding: 6px 9px; border-radius: 999px; align-self: center; }
.price { flex-wrap: wrap; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn { --b: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--b); color: var(--text); font-weight: 600; font-size: 15px; letter-spacing: -.005em; cursor: pointer; white-space: nowrap; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); background: var(--surface-3); border-color: rgba(255, 255, 255, .24); }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: #f4f6fb; color: #070912; border-color: transparent; box-shadow: 0 10px 30px -10px rgba(180, 190, 255, .55); }
.btn.primary:hover { background: #fff; box-shadow: 0 16px 40px -12px rgba(180, 190, 255, .7); }
.btn.gold { background: var(--gold-grad); color: #1d1405; border-color: transparent; box-shadow: 0 12px 34px -12px rgba(241, 201, 122, .65); }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 36px; padding: 0 15px; font-size: 14px; }
.btn.lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ── type ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--display); color: var(--text); margin: 0; letter-spacing: -.025em; line-height: 1.1; font-weight: 650; }
h1 { font-size: clamp(42px, 6.4vw, 84px); letter-spacing: -.04em; line-height: 1.02; }
h2 { font-size: clamp(32px, 4.2vw, 54px); letter-spacing: -.035em; }
h3 { font-size: 20px; letter-spacing: -.015em; line-height: 1.3; }
p { margin: 0 0 1em; color: var(--soft); }
.grad { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gold-text { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--soft); max-width: 640px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ── sections ────────────────────────────────────────────────────────── */
.section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.section.tight { padding: clamp(56px, 7vw, 90px) 0; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; }
.section-head h2 + .lead { margin-top: 20px; }
.band { background: linear-gradient(180deg, transparent, rgba(148, 156, 255, .035) 30%, rgba(148, 156, 255, .035) 70%, transparent); border-block: 1px solid var(--line); }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero { padding: clamp(64px, 9vw, 120px) 0 60px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 26px; font-size: clamp(40px, 5.3vw, 70px); }
.hero .lead { margin-bottom: 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 14px; list-style: none; padding: 0; margin: 0; }
.hero-notes li { display: inline-flex; align-items: center; gap: 8px; }
.hero-notes li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(95, 227, 156, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%235fe39c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.pill-tag { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 13.5px; color: var(--soft); margin-bottom: 28px; }
.pill-tag b { padding: 3px 10px; border-radius: 999px; background: var(--brand); color: #060812; font-size: 12px; font-weight: 700; letter-spacing: .02em; }

/* 3D stage: a framed product image tilted in space with floating glass chips */
.stage { perspective: 1400px; position: relative; }
.stage-frame { position: relative; border-radius: 22px; transform: rotateY(-14deg) rotateX(6deg) rotateZ(.5deg); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--line-2), 0 0 80px -20px rgba(111, 120, 240, .45); background: var(--bg-2); }
.stage-frame img { border-radius: 22px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.stage-frame::after { content: ""; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(130deg, rgba(255, 255, 255, .12), transparent 40%); pointer-events: none; }
.chip { position: absolute; display: flex; align-items: center; gap: 11px; padding: 11px 15px 11px 11px; border-radius: 14px; background: rgba(14, 18, 30, .78); border: 1px solid var(--line-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); font-size: 13px; line-height: 1.3; transform: translateZ(60px); white-space: nowrap; animation: bob 6s ease-in-out infinite; }
.chip:nth-of-type(2) { animation-delay: -2s; }
.chip:nth-of-type(3) { animation-delay: -4s; }
.chip b { display: block; font-size: 13.5px; }
.chip span { color: var(--muted); font-size: 12px; }
.chip .ci { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.chip .ci svg { width: 18px; height: 18px; }
.ci.ok { background: rgba(95, 227, 156, .14); color: var(--ok); }
.ci.iris { background: rgba(148, 156, 255, .16); color: var(--iris); }
.ci.gold { background: rgba(241, 201, 122, .16); color: var(--gold); }
.ci.aqua { background: rgba(95, 227, 207, .14); color: var(--aqua); }
.ci.rose { background: rgba(255, 129, 151, .14); color: var(--rose); }
@keyframes bob { 50% { transform: translateZ(60px) translateY(-8px); } }

/* Home hero: the photograph fills the section behind the words. Two
   gradients keep the text readable: one from the left under the copy, one
   at the bottom into the page. site.js sizes .hero-layer exactly as the
   photo is drawn (cover, 70% 40%), so the live ring can sit on the circle
   in the picture, and drifts the layer a few pixels with the pointer. */
.hero-bg { min-height: min(820px, calc(100vh - var(--nav-h))); display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: 90px 0 110px; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-layer { position: absolute; inset: 0; transform: scale(1.06) translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.hero-layer img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; filter: saturate(1.05); }
.hero-media.sized .hero-layer { inset: auto; }
.hero-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 7, 12, .96) 0%, rgba(5, 7, 12, .86) 34%, rgba(5, 7, 12, .3) 62%, rgba(5, 7, 12, .1) 100%), radial-gradient(ellipse 60% 70% at 18% 50%, rgba(111, 120, 240, .18), transparent 70%); }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: -1; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 620px) 1fr; gap: 40px; align-items: center; }
.hero-copy .lead { color: #d4daea; }

/* The living ring. --near (0..1) is how close the pointer is; --ang is
   where it is, so the bright arc turns to face you. Off screen, it rests. */
.ring-live { position: absolute; left: 58.75%; top: 35%; width: 11.6%; height: 25.6%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 1s; --near: 0; --ang: 0deg; }
.hero-media.sized .ring-live { opacity: 1; }
.ring-live > span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.rl-glow { inset: 18%; background: radial-gradient(closest-side, rgba(200, 245, 255, .95), rgba(90, 180, 255, .45) 40%, rgba(60, 120, 255, .12) 70%, transparent); opacity: calc(.45 + var(--near) * .55); transform: scale(calc(1 + var(--near) * .3)); transition: opacity .3s, transform .3s; animation: rl-breathe 3.6s ease-in-out infinite; }
.rl-sweep { inset: 2%; background: conic-gradient(from 0deg, transparent 0 290deg, rgba(130, 225, 255, .1) 310deg, rgba(160, 235, 255, .75) 356deg, transparent 360deg); -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 60%, #000 98%, transparent 100%); mask: radial-gradient(closest-side, transparent 58%, #000 60%, #000 98%, transparent 100%); animation: rl-spin 4.8s linear infinite; opacity: calc(.55 + var(--near) * .45); }
.rl-ripple { inset: 4%; border: 1.5px solid rgba(150, 225, 255, .75); animation: rl-ripple 3.6s cubic-bezier(.2, .6, .3, 1) infinite; opacity: 0; }
.rl-ripple:nth-of-type(4) { animation-delay: -1.2s; }
.rl-ripple:nth-of-type(5) { animation-delay: -2.4s; }
.ring-live.near .rl-ripple { animation-duration: 1.8s; border-color: rgba(190, 240, 255, .9); }
.ring-live.near .rl-sweep { animation-duration: 2.2s; }
.ring-live svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rl-arc { stroke: rgba(150, 225, 255, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-origin: 100px 100px; }
.rl-arc.a1 { stroke-dasharray: 3 9; animation: rl-spin 26s linear infinite; }
.rl-arc.a2 { stroke-dasharray: 1 5; stroke: rgba(170, 235, 255, .7); animation: rl-spin 16s linear infinite reverse; }
.rl-arc.a3 { stroke-dasharray: 26 14; stroke: rgba(120, 200, 255, .5); animation: rl-spin 11s linear infinite; }
.rl-gaze { transform-origin: 100px 100px; transform: rotate(var(--ang)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.ring-live:not(.tracking) .rl-gaze { animation: rl-spin 7s linear infinite; }
.rl-gaze path { stroke: #eafcff; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(120, 220, 255, .95)); opacity: calc(.35 + var(--near) * .65); }
.rl-core { fill: #f2feff; transform-origin: 100px 100px; filter: drop-shadow(0 0 8px rgba(140, 230, 255, 1)); animation: rl-core 1.8s ease-in-out infinite; }
.hero-bg.resting .ring-live, .hero-bg.resting .ring-live * { animation-play-state: paused !important; }
@keyframes rl-spin { to { transform: rotate(360deg); } }
@keyframes rl-breathe { 50% { filter: brightness(1.35); } }
@keyframes rl-ripple { 0% { transform: scale(.5); opacity: 0; } 15% { opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes rl-core { 50% { transform: scale(1.5); opacity: .75; } }

/* ── proof strip ─────────────────────────────────────────────────────── */
.proof { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.proof div { padding: 24px 22px; border-right: 1px solid var(--line); }
.proof div:last-child { border-right: 0; }
.proof b { display: block; font: 650 30px/1.1 var(--display); letter-spacing: -.03em; margin-bottom: 6px; }
.proof span { font-size: 13.5px; color: var(--muted); line-height: 1.4; display: block; }

/* ── cards ───────────────────────────────────────────────────────────── */
.card { position: relative; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid var(--line); padding: 28px; transition: border-color .3s, transform .3s, box-shadow .3s; }
.card:hover { border-color: var(--line-2); }
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card .ico, .feature-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid rgba(148, 156, 255, .25); color: var(--iris); margin-bottom: 20px; }
.card .ico svg, .feature-ico svg { width: 22px; height: 22px; }
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 11.5px/1.4 var(--mono); letter-spacing: .04em; background: var(--surface-2); border: 1px solid var(--line); color: var(--soft); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tag.ok { color: var(--ok); border-color: rgba(95, 227, 156, .3); background: rgba(95, 227, 156, .08); }
.tag.warn { color: var(--warn); border-color: rgba(242, 195, 91, .3); background: rgba(242, 195, 91, .08); }
.tag.risk { color: var(--risk); border-color: rgba(255, 111, 128, .3); background: rgba(255, 111, 128, .08); }
.tag.iris { color: var(--iris); border-color: rgba(148, 156, 255, .3); background: rgba(148, 156, 255, .08); }

/* tilt: site.js writes --rx/--ry/--mx/--my from the pointer */
.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; }
.tilt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(148, 156, 255, .14), transparent 45%); opacity: 0; transition: opacity .3s; }
.tilt:hover::before { opacity: 1; }

/* ── bento: the signature features ──────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bento .card { display: flex; flex-direction: column; overflow: hidden; min-height: 320px; }
.bento .span-2 { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .viz { margin-top: auto; padding-top: 24px; }
.bento .more { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--iris); display: inline-flex; gap: 6px; align-items: center; }
.bento .more:hover { color: var(--text); }

/* ── split sections ──────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split h2 { margin-bottom: 22px; }
.checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-inline-start: 34px; color: var(--soft); }
.checks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 22px; height: 22px; border-radius: 7px; background: rgba(95, 227, 207, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.9' fill='none' stroke='%235fe3cf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; border: 1px solid rgba(95, 227, 207, .25); }
.checks b { color: var(--text); }
.media { border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--bg-2); position: relative; }
.media img { width: 100%; height: auto; }
.media figcaption, .caption { font-size: 12.5px; color: var(--faint); padding: 10px 14px; font-family: var(--mono); letter-spacing: .02em; }
.float-3d { perspective: 1200px; }
.float-3d > * { transform: rotateY(8deg) rotateX(4deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.float-3d.left > * { transform: rotateY(-8deg) rotateX(4deg); }
.float-3d:hover > * { transform: none; }

/* ── mock UI: lock screen, vault, chat, board, mentor ───────────────── */
.mock { border-radius: 22px; background: linear-gradient(180deg, #0d1220, #080b13); border: 1px solid var(--line-2); box-shadow: var(--shadow); padding: 26px; position: relative; overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 8px; margin: -6px 0 20px; font: 600 11.5px/1 var(--mono); letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.mock-bar .dots { display: flex; gap: 6px; margin-right: 8px; }
.mock-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.mock-bar .live { margin-left: auto; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.mock-bar .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.lock { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: center; }
.face-scan { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(148, 156, 255, .16), transparent 62%); }
.face-scan img { width: 64%; border-radius: 50%; filter: saturate(.85) contrast(1.05); }
.face-scan::before, .face-scan::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--aqua); border-right-color: rgba(95, 227, 207, .4); animation: spin 3.6s linear infinite; }
.face-scan::after { inset: 12%; border-top-color: var(--iris); border-left-color: rgba(148, 156, 255, .4); animation-duration: 5.2s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.scanline { position: absolute; left: 18%; right: 18%; height: 2px; top: 30%; background: linear-gradient(90deg, transparent, var(--aqua), transparent); box-shadow: 0 0 14px var(--aqua); animation: scan 2.8s ease-in-out infinite; }
@keyframes scan { 50% { top: 68%; } }
.lock-steps { display: grid; gap: 10px; }
.lock-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.lock-step .ci { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.lock-step .ci svg { width: 16px; height: 16px; }
.lock-step b { display: block; font-size: 14px; }
.lock-step span { color: var(--muted); font-size: 12.5px; }
.lock-step .st { margin-inline-start: auto; font: 600 11px/1 var(--mono); letter-spacing: .08em; }
.wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.wave i { width: 3px; border-radius: 3px; background: var(--iris); animation: wave 1.2s ease-in-out infinite; }
@keyframes wave { 50% { transform: scaleY(.35); } }
.pin { display: flex; gap: 8px; }
.pin i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.pin i.on { background: var(--gold); box-shadow: 0 0 10px rgba(241, 201, 122, .6); }

.vault { display: grid; gap: 12px; }
.vault-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vault-row .ci { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.vault-row .ci svg { width: 19px; height: 19px; }
.vault-row b { display: block; font-size: 14.5px; }
.vault-row span { font-size: 12.5px; color: var(--muted); }
.vault-row .masked { font: 600 13px/1 var(--mono); letter-spacing: .25em; color: var(--faint); }

.chat { display: grid; gap: 10px; font-size: 14px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; line-height: 1.5; position: relative; }
.msg small { display: block; font: 500 10.5px/1 var(--mono); color: var(--faint); margin-top: 6px; letter-spacing: .04em; }
.msg.in { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg.out { margin-left: auto; background: linear-gradient(135deg, rgba(95, 227, 156, .2), rgba(95, 227, 207, .14)); border: 1px solid rgba(95, 227, 156, .28); border-bottom-right-radius: 5px; }
.msg.out small { color: rgba(95, 227, 156, .8); }
.msg .ur { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Segoe UI", serif; direction: rtl; display: block; font-size: 15px; line-height: 2; }
.receipt { margin-top: 4px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px dashed rgba(95, 227, 156, .35); padding: 10px 12px; font: 500 12.5px/1.7 var(--mono); color: var(--soft); }
.receipt div { display: flex; justify-content: space-between; gap: 16px; }
.receipt .tot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; color: var(--text); font-weight: 700; }
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.chat-head .av { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; color: #060812; font-weight: 800; }
.chat-head b { display: block; font-size: 14.5px; }
.chat-head span { font-size: 12px; color: var(--ok); }
.channels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.board { display: grid; gap: 10px; }
.board-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.board-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); }
.board-row b { display: block; font-size: 14px; }
.board-row span { font-size: 12.5px; color: var(--muted); }
.state { font: 700 10.5px/1 var(--mono); letter-spacing: .1em; padding: 6px 9px; border-radius: 8px; }
.state.work { color: var(--iris); background: rgba(148, 156, 255, .12); }
.state.qa { color: var(--warn); background: rgba(242, 195, 91, .12); }
.state.done { color: var(--ok); background: rgba(95, 227, 156, .12); }
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 28px 0 8px; counter-reset: step; }
.pipeline div { position: relative; padding: 18px 14px 0; border-top: 2px solid var(--line-2); }
.pipeline div::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: -13px; left: 14px; font: 700 11px/24px var(--mono); padding: 0 8px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--aqua); }
.pipeline div.on { border-top-color: var(--aqua); }
.pipeline b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.pipeline span { font-size: 13px; color: var(--muted); line-height: 1.45; display: block; }

.lesson { display: grid; gap: 14px; }
.lesson .q { font: 500 19px/1.5 var(--display); color: var(--text); letter-spacing: -.01em; }
.source { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.source .ci { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.source .ci svg { width: 15px; height: 15px; }
.shelf { display: flex; gap: 6px; align-items: flex-end; height: 70px; }
.shelf i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--c, #6f78f0), rgba(0, 0, 0, .3)); border: 1px solid rgba(255, 255, 255, .08); }

/* XIRO's voices: compact chips - face, name, tag, a round play key. The
   whole chip is the play target (the key's ::after covers it), 2026-10-23. */
.voices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.voice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "face name key" "face tag key"; align-items: center; column-gap: 12px; padding: 10px 12px 10px 10px; text-align: start; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, background .2s, box-shadow .2s; }
.voice:hover { border-color: rgba(148, 156, 255, .4); background: rgba(148, 156, 255, .06); }
.voice img { grid-area: face; width: 52px; height: 52px; margin: 0; border-radius: 50%; object-fit: cover; border: 2px solid rgba(148, 156, 255, .35); }
.voice b { grid-area: name; align-self: end; font-size: 14.5px; line-height: 1.25; }
.voice > span { grid-area: tag; align-self: start; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.voice:has(.voice-play.playing) { border-color: rgba(148, 156, 255, .65); background: rgba(148, 156, 255, .1); box-shadow: 0 0 0 1px rgba(148, 156, 255, .2), 0 14px 40px -22px rgba(111, 120, 240, .6); }
/* the machine voices: one row of six, a squarer steel-edged face */
.voices.machines { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.voice.machine img { border-radius: 12px; border-color: rgba(148, 156, 255, .55); }
/* the people's faces a touch larger than the machines' */
.voices:not(.machines) .voice img { width: 62px; height: 62px; }
@media (max-width: 640px) { .voices:not(.machines) .voice img { width: 50px; height: 50px; } }
.voices-sub { margin: 28px auto 14px; }
.voices-sub h3 { font-size: 18px; margin: 0 0 4px; }
.voices-sub p { margin: 0; font-size: 14px; }
/* six across is narrow, so there the play key rides on the face's corner */
@media (min-width: 1181px) {
  .voices.machines .voice { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "face name" "face tag"; column-gap: 10px; padding: 10px; }
  .voices.machines .voice-play { grid-area: face; align-self: end; justify-self: end; width: 24px; height: 24px; min-height: 24px; margin: 0 -5px -5px 0; margin-inline: 0 -5px; border-color: rgba(148, 156, 255, .7); background: var(--bg-3); }
  .voices.machines .voice-play i { margin-left: 2px; border-width: 4px 0 4px 7px; }
  .voices.machines .voice-play.playing i { width: 8px; height: 8px; margin: 0; }
  .voices.machines .voice-play.playing { background: var(--brand); }
}
@media (max-width: 1180px) { .voices.machines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .voices, .voices.machines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .voice { column-gap: 10px; padding: 8px 8px 8px 8px; } .voice img { width: 42px; height: 42px; } .voice b { font-size: 13.5px; } .voice > span { font-size: 11.5px; } .voice-play { width: 32px; height: 32px; min-height: 32px; } }
@media (max-width: 380px) { .voices, .voices.machines { grid-template-columns: 1fr; } }

/* memory map preview */
.mapmock { padding-bottom: 20px; }
.mm-views { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.mm-views span { font: 700 10px/1 var(--mono); letter-spacing: .05em; padding: 6px 7px; border-radius: 8px; border: 1px solid var(--line); color: var(--faint); }
.mm-views span.on { color: var(--text); border-color: rgba(148, 156, 255, .45); background: rgba(148, 156, 255, .12); }
.mm { width: 100%; height: auto; display: block; }
.mm-orbits ellipse { fill: none; stroke: rgba(148, 156, 255, .16); stroke-width: 1; }
.mm-labels text { fill: var(--faint); font: 700 7.5px var(--mono); letter-spacing: .14em; text-anchor: middle; }
.mm-ring { transform-origin: 210px 170px; transform-box: view-box; }
.mm-ring.r0 { animation: mm-turn 70s linear infinite; }
.mm-ring.r1 { animation: mm-turn 110s linear infinite reverse; }
.mm-ring.r2 { animation: mm-turn 150s linear infinite; }
.mm-ring.r3 { animation: mm-turn 200s linear infinite reverse; }
.mm-ring circle { filter: drop-shadow(0 0 3px currentColor); opacity: .9; }
.mm-core { fill: rgba(148, 156, 255, .18); stroke: rgba(148, 156, 255, .6); }
.mm-core-t { fill: var(--text); font: 800 9px var(--mono); letter-spacing: .12em; text-anchor: middle; }
.mm-pick circle { fill: #f1c97a; } .mm-pick .halo { fill: none; stroke: rgba(241, 201, 122, .6); animation: mm-halo 2.4s ease-out infinite; transform-origin: 318px 118px; transform-box: view-box; }
.mm-pick path, .mm-lock path { stroke: rgba(255, 255, 255, .35); stroke-width: 1; fill: none; }
.mm-lock circle { fill: #ff8197; }
@keyframes mm-turn { to { transform: rotate(360deg); } }
@keyframes mm-halo { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.mapmock { position: relative; }
.mm-card { position: absolute; padding: 9px 12px; border-radius: 12px; background: rgba(12, 16, 26, .92); border: 1px solid var(--line-2); font-size: 12px; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .9); }
.mm-card b { display: block; font-size: 13px; }
.mm-card span { color: var(--muted); font-size: 11.5px; }
.mm-card.pick { right: 18px; top: 92px; border-color: rgba(241, 201, 122, .45); }
.mm-card.lock { left: 18px; bottom: 26px; border-color: rgba(255, 129, 151, .4); }
.tags .tag i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* case board preview */
.board { position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(241, 201, 122, .07), transparent 70%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 28px), #0b0f19; border: 1px solid var(--line); }
.board-strings { position: absolute; inset: 0; width: 100%; height: 100%; }
.board-strings line { stroke: rgba(255, 129, 151, .75); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.board-strings line.contra { stroke: #ff6f80; stroke-width: 2.2; }
.board-strings line.ai { stroke: #949cff; stroke-dasharray: 6 6; animation: case-march 1.6s linear infinite; }
@keyframes case-march { to { stroke-dashoffset: -24; } }
.bcard { position: absolute; transform: translate(-50%, -50%) rotate(var(--tilt, -1.5deg)); max-width: 34%; padding: 8px 11px 9px; border-radius: 10px; background: #141a28; border: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.35; color: var(--text); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .9); }
.bcard::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd1d8, #ff6f80); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.bcard span { display: block; font: 800 9.5px/1 var(--mono); letter-spacing: .12em; margin-bottom: 5px; }
.bcard.q span { color: var(--gold); } .bcard.p span { color: var(--aqua); } .bcard.c span { color: var(--iris); }
.bcard.e span { color: #b38cff; } .bcard.f span { color: var(--ok); } .bcard.d span { color: var(--rose); }
.bcard.p, .bcard.f { --tilt: 1.5deg; } .bcard.e { --tilt: 2deg; }
.blabel { position: absolute; transform: translate(-50%, -50%); font: 700 10px/1 var(--mono); letter-spacing: .06em; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.blabel.contra { color: #ff9aa8; background: rgba(255, 111, 128, .14); border: 1px solid rgba(255, 111, 128, .4); }
.blabel.ai { color: #c3c8ff; background: rgba(148, 156, 255, .14); border: 1px dashed rgba(148, 156, 255, .55); }
.inspector { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(241, 201, 122, .06); border: 1px solid rgba(241, 201, 122, .3); font-size: 13px; }
.inspector .ci { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.inspector .ci svg { width: 16px; height: 16px; }
.inspector b { display: block; font-size: 13.5px; } .inspector span { color: var(--muted); font-size: 12.5px; }
@media (max-width: 640px) { .bcard { font-size: 10.5px; padding: 6px 8px; max-width: 40%; } .blabel { font-size: 8.5px; } .mm-card { display: none; } }

/* ── how it works ────────────────────────────────────────────────────── */
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s3; }
.steps3 .card::before { counter-increment: s3; content: counter(s3); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 20px; background: var(--brand); color: #060812; font: 800 17px/1 var(--display); }

/* ── pricing ─────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: stretch; max-width: 980px; margin-inline: auto; }
.plan { position: relative; border-radius: 24px; padding: 36px; background: var(--surface); border: 1px solid var(--line-2); display: flex; flex-direction: column; }
.plan.hi { background: linear-gradient(180deg, rgba(241, 201, 122, .09), rgba(148, 156, 255, .05) 40%, rgba(255, 255, 255, .02)); border-color: rgba(241, 201, 122, .45); box-shadow: 0 40px 100px -40px rgba(241, 201, 122, .35), 0 0 0 1px rgba(241, 201, 122, .15) inset; }
.plan .ribbon { position: absolute; top: -13px; inset-inline-start: 36px; padding: 5px 13px; border-radius: 999px; background: var(--gold-grad); color: #1d1405; font: 800 11.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.plan h3 { font-size: 22px; margin-bottom: 6px; }
.plan .for { color: var(--muted); font-size: 14.5px; margin-bottom: 24px; }
.price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.price b { font: 700 58px/1 var(--display); letter-spacing: -.04em; }
.price s { color: var(--faint); font-size: 20px; }
.price span { color: var(--muted); font-size: 15px; }
.price-note { font-size: 13.5px; color: var(--muted); margin-bottom: 26px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.plan li { position: relative; padding-inline-start: 30px; font-size: 15px; color: var(--soft); }
.plan li::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.4 2.4L12 5.2' fill='none' stroke='%23f1c97a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.plan:not(.hi) li::before { filter: grayscale(1) brightness(1.6); }
.plan .btn { margin-top: auto; width: 100%; }
.plan .fine { font-size: 12.5px; color: var(--faint); text-align: center; margin: 12px 0 0; line-height: 1.7; }
.plan .fine a { color: var(--muted); }
.plans.one { grid-template-columns: minmax(0, 580px); justify-content: center; }
.plan-one { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; max-width: 1000px; margin-inline: auto; align-items: stretch; }
.plan-list { padding: 36px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line-2); display: flex; flex-direction: column; justify-content: center; }
.plan-list h3 { font-size: 20px; margin-bottom: 4px; }
.plan-one .plan .btn { margin-top: auto; }
.anchor-note { max-width: 980px; margin: 28px auto 0; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 20px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.anchor-note p { margin: 0; font-size: 15px; }
.anchor-note .ci { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.anchor-note .ci svg { width: 22px; height: 22px; }

.compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; font-size: 15px; background: var(--surface); }
.compare th, .compare td { padding: 16px 20px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 600 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, .02); }
.compare thead th.hi { color: var(--gold); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare tbody th { font-weight: 600; color: var(--text); width: 34%; }
.compare td { color: var(--soft); }
.compare td.hi { background: rgba(241, 201, 122, .045); color: var(--text); }
.yes { color: var(--ok); font-weight: 600; }
.no { color: var(--faint); }

.refund-line { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--soft); background: rgba(95, 227, 156, .07); border: 1px solid rgba(95, 227, 156, .22); text-align: start; }
.refund-line svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
.refund-line b { color: var(--text); }
.guarantee { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 34px 38px; border-radius: 24px; background: linear-gradient(120deg, rgba(95, 227, 156, .08), rgba(148, 156, 255, .06)); border: 1px solid rgba(95, 227, 156, .25); }
.seal { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(95, 227, 156, .2), rgba(95, 227, 156, .04)); border: 1.5px dashed rgba(95, 227, 156, .55); font: 800 26px/1 var(--display); color: var(--ok); }
.seal small { display: block; font: 700 9.5px/1.2 var(--mono); letter-spacing: .12em; margin-top: 4px; }
.guarantee h3 { font-size: 24px; margin-bottom: 6px; }
.guarantee p { margin: 0; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.faq details[open] { border-color: var(--line-2); background: var(--surface-2); }
.faq summary { list-style: none; cursor: pointer; padding-block: 20px; padding-inline: 24px 56px; font-weight: 600; font-size: 16.5px; position: relative; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; inset-inline-end: 22px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 18px; transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--text); }
.faq details > div { padding: 0 24px 22px; color: var(--soft); }
.faq details > div p:last-child { margin: 0; }

/* ── CTA band + footer ───────────────────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; border-radius: 30px; padding: clamp(48px, 7vw, 84px); text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(148, 156, 255, .28), transparent 60%), linear-gradient(180deg, #0f1424, #090c15); border: 1px solid var(--line-2); box-shadow: var(--glow); }
.cta-band h2 { margin-bottom: 18px; }
.cta-band .lead { margin: 0 auto 32px; }
.cta-band .hero-cta { justify-content: center; margin: 0; }
footer.site { border-top: 1px solid var(--line); margin-top: 100px; padding: 64px 0 40px; color: var(--muted); font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); gap: 28px; }
.foot-grid h4 { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.foot-grid a { display: block; padding: 4px 0; color: var(--muted); }
.foot-grid a:hover { color: var(--text); }
.foot-grid a.brand { display: inline-flex; color: var(--text); padding: 0; }
.foot-grid p { color: var(--muted); font-size: 14px; max-width: 320px; margin-top: 16px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }

/* ── sticky offer bar ────────────────────────────────────────────────── */
.offerbar { position: fixed; left: 50%; bottom: 18px; z-index: 40; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 22px; border-radius: 999px; background: rgba(12, 16, 26, .9); border: 1px solid rgba(241, 201, 122, .35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); font-size: 14.5px; transition: transform .4s cubic-bezier(.2, .7, .2, 1); white-space: nowrap; }
.offerbar.show { transform: translate(-50%, 0); }
.offerbar b { color: var(--gold); }

/* ── page header for inner pages ─────────────────────────────────────── */
.page-head { padding: clamp(64px, 8vw, 110px) 0 clamp(40px, 5vw, 64px); position: relative; }
.page-head h1 { font-size: clamp(40px, 5.6vw, 72px); max-width: 980px; margin-bottom: 24px; }
.page-head .lead { max-width: 720px; }
.page-head .hero-cta { margin: 32px 0 0; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--faint); margin-bottom: 26px; }
.crumbs a:hover { color: var(--text); }

.trust3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trust3 .card { padding: 24px; }
.k { font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.k svg { width: 16px; height: 16px; flex: none; }

/* category tiles on the features page */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat { display: flex; flex-direction: column; }
.cat ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.cat li { font-size: 14.5px; color: var(--soft); padding-inline-start: 18px; position: relative; }
.cat li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 10px; width: 6px; height: 6px; border-radius: 2px; background: var(--iris); opacity: .7; }
.cat li a { color: var(--soft); text-decoration: none; }
.cat li a:hover { color: var(--iris); }
.cat .count { margin-inline-start: auto; font: 600 12px/1 var(--mono); color: var(--faint); }
.cat-head { display: flex; align-items: center; gap: 14px; }
.cat-head .ico { margin: 0; }

.permline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.perm { padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.perm .lvl { font: 800 13px/1 var(--mono); letter-spacing: .14em; margin-bottom: 14px; display: inline-block; padding: 7px 11px; border-radius: 9px; }
.perm.never .lvl { color: var(--ok); background: rgba(95, 227, 156, .1); }
.perm.once .lvl { color: var(--warn); background: rgba(242, 195, 91, .1); }
.perm.always .lvl { color: var(--risk); background: rgba(255, 111, 128, .1); }
.perm p { font-size: 14.5px; margin: 0; }

.limits { border-left: 3px solid var(--warn); padding: 18px 22px; border-radius: 0 14px 14px 0; background: rgba(242, 195, 91, .05); }
.limits h3 { font-size: 17px; margin-bottom: 8px; }
.limits p:last-child, .limits ul:last-child { margin-bottom: 0; }

/* forms on the site (support): same fields as the console */
.panel-form { border-radius: 22px; padding: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.panel-form h3 { font-size: 22px; margin-bottom: 6px; }
.panel-form label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
.panel-form input, .panel-form select, .panel-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 15px; }
.panel-form textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.panel-form input:focus, .panel-form select:focus, .panel-form textarea:focus { outline: none; border-color: rgba(148, 156, 255, .6); box-shadow: 0 0 0 4px rgba(148, 156, 255, .13); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* legal pages */
.legal .doc h2 { font-size: clamp(22px, 2.4vw, 28px); }
.legal .doc > section { padding-bottom: 36px; margin-bottom: 28px; }
.legal .doc p, .legal .doc li { font-size: 15.5px; }
.legal-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 0; }
.legal-sum div { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--soft); }
.legal-sum b { display: block; color: var(--text); margin-bottom: 4px; font-size: 14.5px; }
@media (max-width: 900px) { .legal-sum { grid-template-columns: 1fr; } }

/* ── reveal on scroll (only when site.js says it can run) ────────────── */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ══ documents (guide, reference, tech, runbook) ═════════════════════ */
.doc-hero { padding: clamp(56px, 7vw, 96px) 0 40px; border-bottom: 1px solid var(--line); }
.doc-hero h1 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 20px; max-width: 900px; }
.doc-hero .lead { max-width: 760px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding-top: 48px; align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px); overflow: auto; padding-inline-end: 8px; font-size: 14px; }
.toc h2, .toc .toc-title { font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.toc nav a { display: block; padding: 7px 12px; border-radius: 9px; color: var(--muted); border-left: 2px solid transparent; line-height: 1.35; }
.toc nav a:hover { color: var(--text); background: var(--surface); }
.toc nav a.on { color: var(--text); border-left-color: var(--aqua); background: var(--surface); }
.toc .toc-actions { display: grid; gap: 8px; margin-top: 20px; }
.doc { min-width: 0; }
.doc > section, .doc-section { padding: 18px 0 56px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.doc > section:last-child { border-bottom: 0; }
.doc h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 16px; }
.doc h3 { font-size: 19px; margin: 32px 0 10px; }
.doc h4 { font-size: 15.5px; margin: 22px 0 8px; }
.doc p, .doc li { color: var(--soft); }
.doc ul, .doc ol { padding-inline-start: 22px; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--faint); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 18px 0 26px; }
.doc th, .doc td { text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc thead th { font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.doc tbody tr:hover { background: rgba(255, 255, 255, .015); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; margin: 18px 0 26px; }
.table-wrap table { margin: 0; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.doc pre { margin: 16px 0 24px; }
.doc .card { padding: 22px; }
.doc .card h3 { margin-top: 0; }
.section-head .section-no, .section-no { font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--aqua); display: block; margin-bottom: 12px; }
.doc .section-head { margin-bottom: 18px; max-width: none; }
.doc .anchor { font-size: 13px; color: var(--faint); margin-inline-start: 10px; }
.doc .anchor:hover { color: var(--iris); }
.doc .lede { font-size: 17px; color: var(--soft); max-width: 820px; }
.callout { border-radius: 14px; padding: 16px 20px; margin: 18px 0; border: 1px solid var(--line-2); background: var(--surface); border-left-width: 3px; }
.callout > :last-child { margin-bottom: 0; }
.callout.warn { border-left-color: var(--warn); background: rgba(242, 195, 91, .05); }
.callout.danger { border-left-color: var(--risk); background: rgba(255, 111, 128, .05); }
.callout.gap { border-left-color: var(--iris); background: rgba(148, 156, 255, .05); }
.callout.good { border-left-color: var(--ok); background: rgba(95, 227, 156, .05); }
.status, .badge, .pill { display: inline-block; font: 700 11px/1.4 var(--mono); letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--soft); background: var(--surface-2); white-space: nowrap; }
.status.ok { color: var(--ok); border-color: rgba(95, 227, 156, .3); }
.status.caution { color: var(--warn); border-color: rgba(242, 195, 91, .3); }
.status.risk { color: var(--risk); border-color: rgba(255, 111, 128, .3); }
.status.gap, .badge.info { color: var(--iris); border-color: rgba(148, 156, 255, .3); }
.path { font-family: var(--mono); font-size: .86em; color: #cfd5ff; overflow-wrap: anywhere; }
.metric { border-radius: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); }
.metric b, .stat b { display: block; font: 650 28px/1.1 var(--display); letter-spacing: -.03em; color: var(--text); }
.stat { border-radius: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); }
.checklist { list-style: none; padding-left: 0 !important; }
.checklist li { position: relative; padding-inline-start: 28px; }
.checklist li::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--aqua); opacity: .8; }
.sequence, .flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.node { display: inline-block; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 13.5px; color: var(--text); }
.n { font-family: var(--mono); color: var(--aqua); font-weight: 700; }
.flag { color: var(--warn); }

.doc .section-head:has(> .section-no) { display: flex; gap: 18px; align-items: flex-start; }
.doc .section-head > .section-no { flex: none; width: 44px; height: 44px; margin: 4px 0 0; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid rgba(148, 156, 255, .25); font-size: 14px; letter-spacing: 0; }
.doc .card .metric { padding: 0; border: 0; background: none; font: 650 22px/1.2 var(--display); color: var(--text); margin-bottom: 8px; letter-spacing: -.02em; }
.stat span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.doc details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin: 12px 0; }
.doc details > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--text); }
.doc details > :not(summary) { padding: 0 16px; }
.doc details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.badge.good { color: var(--ok); border-color: rgba(95, 227, 156, .3); }
.badge.warn { color: var(--warn); border-color: rgba(242, 195, 91, .3); }
.doc-search { position: relative; margin-bottom: 18px; }
.doc-search input, .field { width: 100%; height: 46px; padding: 0 16px 0 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 15px; }
.doc-search input:focus, .field:focus { outline: none; border-color: rgba(148, 156, 255, .55); box-shadow: 0 0 0 4px rgba(148, 156, 255, .12); }
.doc-search svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--faint); }

/* catalogue: shared by the phrasebook and the action reference */
.finder { position: sticky; top: var(--nav-h); z-index: 20; padding: 16px 0; margin-bottom: 18px; background: linear-gradient(180deg, var(--bg) 70%, transparent); }
.finder-row { display: flex; gap: 10px; align-items: center; }
.finder-row .doc-search { flex: 1; margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.filter { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .2s; }
.filter:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
.filter[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: transparent; }
.result-count { font: 600 12px/1 var(--mono); color: var(--faint); letter-spacing: .06em; white-space: nowrap; }
.catalogue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.empty-state { text-align: center; padding: 56px 20px; border: 1px dashed var(--line-2); border-radius: 18px; color: var(--muted); }
.empty-state h3 { margin-bottom: 8px; }

.skill-card { position: relative; border-radius: 18px; padding: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color .25s, transform .25s; }
.skill-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.skill-card .card-label { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); margin-bottom: 12px; }
.skill-card h3 { font-size: 18px; margin: 0 0 6px; }
.skill-card > p { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.say-label { font: 600 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--faint); margin-bottom: 8px; }
.phrase { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 12px 12px 12px 16px; border-radius: 12px; background: rgba(148, 156, 255, .07); border: 1px solid rgba(148, 156, 255, .18); }
.phrase blockquote { margin: 0; font-size: 15px; color: var(--text); line-height: 1.5; }
.phrase blockquote::before { content: "\201C"; color: var(--iris); margin-right: 2px; }
.phrase blockquote::after { content: "\201D"; color: var(--iris); margin-left: 1px; }
.copy { flex: none; height: 30px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--soft); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .2s; }
.copy:hover { background: var(--text); color: var(--bg); border-color: transparent; }
.skill-card details { margin-top: 12px; }
.skill-card summary, .command-item summary { cursor: pointer; list-style: none; }
.skill-card summary::-webkit-details-marker, .command-item summary::-webkit-details-marker { display: none; }
.skill-card details > summary { font-size: 13.5px; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; padding: 8px 2px; }
.skill-card details[open] > summary { color: var(--text); }
.setup { display: grid; gap: 10px; padding-top: 6px; font-size: 14px; }
.setup b { font-size: 12px; font-family: var(--mono); letter-spacing: .08em; color: var(--faint); font-weight: 600; text-transform: uppercase; }
.setup p { margin: 0; font-size: 14px; color: var(--soft); }
.setup .reference { font-size: 13.5px; color: var(--iris); font-weight: 600; }

.command-list { display: grid; gap: 10px; }
.command-item { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.command-item[open] { background: var(--surface-2); border-color: var(--line-2); }
.command-item > summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 28px; gap: 20px; align-items: center; padding: 18px 20px; }
.command-item h3 { font-size: 16px; margin: 0 0 4px; }
.command-item summary small { font-size: 12px; color: var(--faint); font-family: var(--mono); letter-spacing: .04em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.command-item summary p { margin: 0; font-size: 14.5px; color: var(--muted); }
.command-item summary > span { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); transition: transform .25s; }
.command-item[open] summary > span { transform: rotate(45deg); color: var(--text); }
.badge { font-size: 10px; }
.command-content { padding: 0 20px 20px; display: grid; gap: 14px; }
.sample-command { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(148, 156, 255, .07); border: 1px solid rgba(148, 156, 255, .18); }
.sample-command blockquote { margin: 0; color: var(--text); }
.command-content dl { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14px; }
.command-content dt, .command-content dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.command-content dt { font-family: var(--mono); font-size: 13px; color: #cfd5ff; background: rgba(255, 255, 255, .02); overflow-wrap: anywhere; }
.command-content dd { color: var(--soft); white-space: pre-line; overflow-wrap: anywhere; }
.command-content dl > :nth-last-child(-n+2) { border-bottom: 0; }

.recipe { border-radius: 18px; padding: 24px; background: var(--surface); border: 1px solid var(--line); }
.recipe-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.recipe-head > span { font: 800 15px/1 var(--display); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #060812; flex: none; }
.recipe-head h3 { margin: 2px 0 4px; font-size: 18px; }
.recipe-head p { margin: 0; font-size: 13.5px; color: var(--muted); }
.recipe ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: rs; }
.recipe li { margin: 0; }

.interactive { border-radius: 20px; padding: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid var(--line-2); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.trace { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: tr; }
.trace li { position: relative; padding: 12px 14px 12px 48px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; color: var(--soft); }
.trace li::before { counter-increment: tr; content: counter(tr); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-soft); color: var(--iris); font: 700 12px/1 var(--mono); }
.trace-label { font: 700 12px/1 var(--mono); letter-spacing: .14em; color: var(--aqua); margin-bottom: 10px; }
.trace-command { font: 500 18px/1.5 var(--display); color: var(--text); margin: 0 0 16px; }
.select { height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; font-size: 15px; }
.voice-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-pick button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--soft); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.voice-pick button img { width: 28px; height: 28px; border-radius: 50%; }
.voice-pick button[aria-pressed="true"] { border-color: rgba(148, 156, 255, .6); background: rgba(148, 156, 255, .14); color: var(--text); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; padding: 12px 18px; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 14px; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8); max-width: calc(100vw - 32px); }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-bg::before { background: linear-gradient(180deg, rgba(5, 7, 12, .78), rgba(5, 7, 12, .9) 60%, rgba(5, 7, 12, .96)); }
  .hero-grid, .split { grid-template-columns: 1fr; gap: 48px; }
  .split.flip > :first-child { order: 0; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .span-2, .bento .span-3, .bento .span-4 { grid-column: span 1; }
  .proof { grid-template-columns: repeat(3, 1fr); }
  .proof div:nth-child(3) { border-right: 0; }
  .proof div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .grid.four { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .doc-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; max-height: none; margin-bottom: 32px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .toc nav { columns: 2; }
  .stage-frame { transform: rotateY(-8deg) rotateX(4deg); }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta .btn.ghost { display: none; }
  .mobile-nav { display: block; margin-inline-start: auto; }
  .nav .wrap { gap: 12px; }
  .nav-cta { order: 3; }
  .mobile-nav > summary { list-style: none; cursor: pointer; height: 40px; width: 44px; border-radius: 12px; border: 1px solid var(--line-2); display: grid; place-items: center; background: var(--surface); }
  .mobile-nav > summary::-webkit-details-marker { display: none; }
  .mobile-nav > summary svg { width: 20px; height: 20px; }
  .mobile-nav[open] > div { position: fixed; left: 12px; right: 12px; top: calc(var(--nav-h) + 8px); padding: 10px; border-radius: 18px; background: rgba(10, 13, 22, .98); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: grid; gap: 2px; max-height: calc(100vh - var(--nav-h) - 24px); overflow: auto; }
  .mobile-nav a { padding: 12px 14px; border-radius: 10px; color: var(--soft); font-weight: 500; }
  .mobile-nav a:hover, .mobile-nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
  .mobile-nav .mn-label { font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--faint); padding: 14px 14px 6px; }
  .grid.two, .grid.three, .trust3, .steps3, .permline, .plans, .plan-one { grid-template-columns: 1fr; }
  .lock, .form-row { grid-template-columns: 1fr; }
  .face-scan { max-width: 240px; margin-inline: auto; }
  .catalogue { grid-template-columns: 1fr; }
  .command-item > summary { grid-template-columns: 1fr 28px; }
  .command-item summary p { grid-column: 1 / -1; grid-row: 2; }
  .guarantee { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pipeline { grid-template-columns: 1fr; gap: 18px; }
  .pipeline div { border-top: 0; border-left: 2px solid var(--line-2); padding: 0 0 0 20px; }
  .pipeline div::before { position: static; display: inline-block; margin-bottom: 8px; }
  .offerbar span.long { display: none; }
  .plans .plan.hi { order: -1; margin-top: 14px; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .wrap { width: calc(100% - 32px); }
  .bento, .cat-grid, .grid.four { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof div { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); }
  .proof div:nth-child(2n) { border-right: 0 !important; }
  .cat-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .chip { display: none; }
  .chip.keep { display: flex; position: static; transform: none; margin-top: 12px; animation: none; }
  .hero-cta .btn { flex: 1 1 100%; }
  .compare th, .compare td { padding: 12px; font-size: 14px; }
  .command-content dl { grid-template-columns: 1fr; }
  .command-content dt { border-bottom: 0; padding-bottom: 2px; }
  .plan { padding: 28px 22px; }
  .toc nav { columns: 1; }
  .offerbar { left: 12px; right: 12px; transform: translateY(140%); justify-content: space-between; }
  .finder .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .finder .filter { flex: none; }
  .offerbar.show { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .tilt, .stage-frame, .float-3d > * { transform: none !important; }
}
@media print {
  :root { --bg: #fff; --text: #111; --soft: #222; --muted: #444; --faint: #666; --line: #ddd; --line-2: #ccc; --surface: #fff; --surface-2: #f5f5f5; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .nav, .ambient, .toc, .finder, footer.site, .offerbar, .toast, .copy, .hero-cta, .skip, .mobile-nav { display: none !important; }
  .doc-layout { display: block; padding: 0; }
  .card, .skill-card, .command-item, .recipe, .callout, pre { break-inside: avoid; box-shadow: none; background: #fff; }
  h1, h2, h3, .grad { color: #111 !important; -webkit-text-fill-color: #111; background: none; }
  a { color: #111; text-decoration: underline; }
  .catalogue { grid-template-columns: 1fr 1fr; }
  details > *:not(summary) { display: block !important; }
}

/* ── XIRO in your language (2026-10-12) ─────────────────────────────────── */
.langs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 32px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 14px; }
.langs span { font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-inline-end: 4px; }
.langs a { color: var(--muted); }
.langs a:hover, .langs a[aria-current] { color: var(--text); }
.langs a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.foot-grid.short { grid-template-columns: 1.6fr 1fr 1fr; }
.foot-grid a small { color: var(--faint); font-size: .85em; }
/* Scripts with their own fonts and spacing. Letter-spacing breaks joined
   scripts (Arabic, Urdu) and crowds Devanagari and Japanese, so it is off. */
html[lang="ur"] { --font: "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Nastaliq Urdu", "Segoe UI", Tahoma, sans-serif; --display: var(--font); }
html[lang="ar"] { --font: "Segoe UI", "Noto Naskh Arabic", "Noto Sans Arabic", Tahoma, sans-serif; --display: "Segoe UI", "Noto Kufi Arabic", Tahoma, sans-serif; }
html[lang="hi"] { --font: "Nirmala UI", "Noto Sans Devanagari", "Mangal", "Segoe UI", sans-serif; --display: var(--font); }
html[lang="ja"] { --font: "Yu Gothic UI", "Meiryo", "Hiragino Sans", "Noto Sans JP", sans-serif; --display: var(--font); }
html[lang="ur"] *, html[lang="ar"] *, html[lang="hi"] *, html[lang="ja"] * { letter-spacing: 0 !important; }
html[lang="ur"] body { line-height: 1.95; }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3 { line-height: 1.75; font-weight: 600; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="hi"] h1, html[lang="hi"] h2 { line-height: 1.35; }
html[lang="ja"] h1, html[lang="ja"] h2 { line-height: 1.3; word-break: keep-all; overflow-wrap: anywhere; }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .say-label { text-transform: none; }
@media (max-width: 760px) { .foot-grid.short { grid-template-columns: 1fr 1fr; } .foot-grid.short > :first-child { grid-column: 1 / -1; } }
/* The offer bar (assets/langs.js): English is the main page here, and the
   visitor's own language is one click away. */
.lang-offer { position: relative; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 48px 10px 16px; font-size: 14.5px; color: var(--text); background: linear-gradient(90deg, rgba(148, 156, 255, .16), rgba(95, 227, 207, .12)); border-bottom: 1px solid var(--line-2); }
.lang-offer .btn { min-height: 32px; }
.lang-offer-x { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.lang-offer-x:hover, .lang-offer-x:focus-visible { color: var(--text); background: rgba(255, 255, 255, .08); }
.lang-switch { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; color: var(--muted); border: 1px solid var(--line-2); }
.lang-switch:hover, .lang-switch:focus-visible { color: var(--text); border-color: var(--line-3, var(--line-2)); }
.mobile-nav .lang-switch { border: 0; padding: 0; min-height: 0; font-size: inherit; color: inherit; }
/* the play key: icon only (its label stays for screen readers), Stop while it speaks */
.voice-play { grid-area: key; display: inline-grid; place-items: center; width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; border: 1px solid rgba(148, 156, 255, .45); background: rgba(148, 156, 255, .1); color: var(--text); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.voice-play::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.voice:has(.voice-play) { cursor: pointer; }
.voice-play .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.voice:hover .voice-play, .voice-play:focus-visible { background: rgba(148, 156, 255, .22); border-color: rgba(148, 156, 255, .75); transform: scale(1.06); }
.voice-play:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.voice-play i { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.voice-play.playing { background: var(--brand); color: #060812; border-color: transparent; animation: voice-pulse 1.6s ease-out infinite; }
.voice-play.playing i { width: 10px; height: 10px; margin: 0; border: 0; border-radius: 2px; background: currentColor; }
@keyframes voice-pulse { 0% { box-shadow: 0 0 0 0 rgba(148, 156, 255, .55); } 100% { box-shadow: 0 0 0 12px rgba(148, 156, 255, 0); } }
/* The home page while assets/langs.js puts its translation in place (never
   longer than 2.5 s): hidden, so English does not flash first. */
html.lang-pending body { visibility: hidden; }
/* The price in the visitor's own currency, under the dollar price. */
.local-price { margin: -2px 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.local-price b { color: var(--text); font-size: 17px; font-weight: 700; }
.local-price .rates-by { font-size: 11.5px; color: var(--faint); margin-inline-start: 4px; white-space: nowrap; }


/* ── order journey, marketing pipeline and the feature scorecard (2026-10-15) ── */
.journey { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 6px; }
.journey .step { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font-weight: 600; font-size: 14px; }
.journey .step.you { border-color: rgba(95, 227, 156, .4); color: var(--ok); }
.journey .arr { color: var(--faint); }
.kb { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kb-col { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 190px; }
.kb-col h4 { margin: 2px 4px 8px; font: 600 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.kb-card { background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 8px; margin-bottom: 6px; font-size: 12px; line-height: 1.3; position: relative; }
.kb-card b { display: block; color: var(--text); font-weight: 600; }
.kb-card span { color: var(--muted); font-size: 11px; }
.kb-card em { position: absolute; right: 6px; top: 6px; font-style: normal; font: 700 10.5px/1 var(--mono); color: var(--ok); }
.kb-card.won { border-color: rgba(95, 227, 156, .45); }
.kb-card.draft { border-style: dashed; }
@media (max-width: 720px) { .kb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px; }
.score-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); }
.score-ring { --c: var(--ok); position: relative; width: 84px; height: 84px; flex: none; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0); display: grid; place-items: center; }
.score-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg-2); }
.score-ring b { position: relative; font-size: 24px; color: var(--text); }
.score-ring[style*="--p:5"], .score-ring[style*="--p:6"] { --c: var(--warn); }
.score-body h3 { margin: 0 0 4px; font-size: 18px; }
.score-body p { margin: 0 0 10px; color: var(--soft); font-size: 14.5px; }
.score-parts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font: 500 12px/1.4 var(--mono); color: var(--muted); }
.score-parts b { color: var(--text); }
.score-need { margin: 10px 0 0 !important; font-size: 13px !important; color: var(--muted) !important; border-left: 3px solid var(--warn); padding-left: 10px; }
.score-note { color: var(--muted); font-size: 13.5px; margin-top: 18px; max-width: 78ch; }

/* Hey XIRO wordmark: a small champagne "Hey" above the name, apart from the iris/aqua brand gradient */
.wordmark { position: relative; display: inline-block; padding-top: 9px; line-height: 1; }
.hey { position: absolute; top: -2px; inset-inline-start: 1px; font: italic 500 10px/1 var(--display); letter-spacing: .12em; text-transform: none; font-style: italic;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hey-line { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0 0 14px; font: 700 20px/1 var(--display); letter-spacing: .3em; color: var(--text); }
.hey-line .hey { position: static; margin-bottom: 4px; font-size: 15px; letter-spacing: .2em; }
.slogan-2 { margin: -6px 0 18px; font: 500 clamp(20px, 2.4vw, 28px)/1.3 var(--display); color: var(--soft); letter-spacing: .01em; }
.hey-inline { font-style: italic; font-weight: 600; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slogan-band { text-align: center; padding: 6px 0 38px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.slogan-band p { margin: 0; font: 700 clamp(22px, 3vw, 34px)/1.2 var(--display); letter-spacing: -.01em; }
.slogan-band .s2 { margin-top: 8px; font-size: clamp(16px, 1.8vw, 20px); font-weight: 500; color: var(--soft); }
.intro-claim { text-align: center; margin: 0 auto 38px; max-width: 820px; }
.intro-claim h2 { margin-top: 10px; }

/* Lean home page (2026-10-23): the one worked example and the "works with" rows. */
.say-once { max-width: 980px; margin: 0 auto; }
.say-once .sample-command { max-width: 640px; margin: 0 auto 34px; text-align: center; }
.pipeline.four { grid-template-columns: repeat(4, 1fr); }
.logo-strip { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; }
.logo-strip > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.logo-strip .ls-label { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-right: 6px; }
.logo-strip .tag { font-size: 13px; padding: 7px 12px; }
@media (max-width: 760px) { .pipeline.four { grid-template-columns: 1fr; gap: 18px; } .logo-strip .ls-label { width: 100%; text-align: center; margin: 4px 0 2px; } }

/* Home page chips, art and price anchor (2026-10-23). */
/* Chips (redesigned 2026-10-23): soft glass panels in the body font, each
   with its own icon tile; tile colours cycle through the palette. */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row.center { justify-content: center; }
.chip-row .tag { --c: var(--iris); --cb: rgba(148, 156, 255, .14); gap: 10px; padding: 6px 15px 6px 6px; border-radius: 14px; font: 500 14px/1.3 var(--font); letter-spacing: 0; color: var(--soft); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); border: 1px solid var(--line-2); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .9); }
.chip-row .tag svg { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; flex: none; border-radius: 9px; color: var(--c); background: var(--cb); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); transition: transform .2s, background .2s; }
.chip-row .tag:nth-child(4n+2) { --c: var(--aqua); --cb: rgba(95, 227, 207, .12); }
.chip-row .tag:nth-child(4n+3) { --c: var(--gold); --cb: rgba(241, 201, 122, .12); }
.chip-row .tag:nth-child(4n+4) { --c: var(--rose); --cb: rgba(255, 129, 151, .12); }
.chip-row a.tag:hover, .chip-row a.tag:focus-visible { color: var(--text); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); transform: translateY(-2px); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--c) 60%, transparent); }
.chip-row a.tag:hover svg { transform: scale(1.06); background: color-mix(in srgb, var(--c) 24%, transparent); }
.chip-row.who .tag { padding: 8px 18px 8px 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.chip-row.who .tag svg { width: 36px; height: 36px; padding: 8px; border-radius: 11px; }
.chip-row .tag.ok svg { --c: var(--ok); --cb: rgba(95, 227, 156, .12); }
@media (max-width: 640px) { .chip-row .tag { font-size: 13px; } .chip-row.who .tag { font-size: 14px; } }
.hero-chips { margin: 22px 0 4px; }
.hero-chips .tag { background: rgba(14, 18, 30, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
a.tag { text-decoration: none; transition: border-color .2s, color .2s, background .2s, transform .2s, box-shadow .2s; }
a.tag:hover, a.tag:focus-visible { color: var(--text); border-color: rgba(148, 156, 255, .45); background: rgba(148, 156, 255, .1); }
.built-for { margin: 44px auto 0; max-width: 980px; text-align: center; }
.built-for h3 { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 14px; letter-spacing: .12em; text-transform: uppercase; }
.art-center { margin: 8px auto 34px; max-width: 560px; }
.art-center.small { max-width: 440px; margin-bottom: 26px; }
.art-center img { width: 100%; height: auto; display: block; }
.anchor-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 720px; margin: 0 auto 34px; }
.anchor-compare > div { padding: 18px 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 4px; text-align: center; }
.anchor-compare span { font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.anchor-compare b { font: 700 24px/1.2 var(--display); color: var(--muted); }
.anchor-compare em { font-style: normal; font-size: 13px; color: var(--muted); }
.anchor-compare > div:not(.hi) b { text-decoration: line-through; text-decoration-color: rgba(255, 111, 128, .6); }
.anchor-compare .hi { border-color: rgba(242, 195, 91, .45); background: rgba(242, 195, 91, .06); }
.anchor-compare .hi b { color: var(--gold); }
@media (max-width: 760px) { .anchor-compare { grid-template-columns: 1fr; } .hero-chips .tag { font-size: 12px; } }

/* Motion layer (2026-10-23): honeycomb field, edge light, self-playing example. */
.ambient .hexfield { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 40%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 85% at 50% 40%, #000 35%, transparent 100%); }
.ambient.hex-on i { display: none; }
.plan, .mock, .score-card { position: relative; }
.edge-lit::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; z-index: 2;
  background: radial-gradient(220px circle at var(--ex) var(--ey), rgba(148, 156, 255, .85), rgba(95, 232, 255, .35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.say-once { position: relative; }
.say-once blockquote { min-height: 1.6em; }
.say-once blockquote.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--aqua); animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.say-once .pipeline > div { transition: border-color .4s, opacity .4s, transform .4s; }
.say-once.playing .pipeline > div:not(.lit) { opacity: .35; transform: translateY(6px); }
.say-once .pipeline > div.lit::after { content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--aqua), #fff, var(--aqua), transparent) no-repeat; background-size: 50% 100%;
  animation: beam .65s ease-out forwards; filter: drop-shadow(0 0 6px var(--aqua)); }
@keyframes beam { from { background-position: -100% 0; opacity: 1; } to { background-position: 200% 0; opacity: 0; } }
.say-once .replay { display: block; margin: 26px auto 0; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 600 12px/1 var(--mono); letter-spacing: .06em; cursor: pointer; opacity: 0; transition: opacity .4s, color .2s, border-color .2s; }
.say-once.played .replay { opacity: 1; }
.say-once .replay:hover { color: var(--text); border-color: var(--iris); }
@media (prefers-reduced-motion: reduce) { .edge-lit::after { display: none; } }

/* Softer edges (2026-10-23): the hero photo fades into the honeycomb instead of ending on a line, and band dividers fade out at both ends. */
.hero-media { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.hero-fade { display: none; }
.band { border-block: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--line) 25%, var(--line) 75%, transparent) 1; }
.ambient .hexfield { opacity: .8; }

/* Art beside text, never on a row of its own (2026-10-23). */
.art-side { margin: 0; position: relative; }
.art-side img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)); }
.art-side::before { content: ""; position: absolute; inset: 12% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(111, 120, 240, .18), transparent); filter: blur(20px); }
.art-split { margin-top: 56px; gap: 56px; }
.art-split .built-for { margin: 0 0 30px; max-width: none; text-align: left; }
.art-split .built-for:last-child { margin-bottom: 0; }
.point-list { display: grid; gap: 12px; margin: 28px 0 22px; }
.point { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)); color: var(--muted); text-decoration: none; font-size: 14.5px; line-height: 1.55; transition: border-color .25s, background .25s; position: relative; }
.point:hover { border-color: rgba(148, 156, 255, .4); background: rgba(148, 156, 255, .06); }
.point .ico { width: 44px; height: 44px; margin: 0; }
.point b { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 2px; }
.logo-strip.left { margin: 26px 0 0; max-width: none; }
.logo-strip.left > div { justify-content: flex-start; }
@media (max-width: 900px) { .art-side { max-width: 520px; margin: 0 auto; } .art-split .built-for { text-align: center; } .art-split .chip-row { justify-content: center; } }
@media (max-width: 760px) { .logo-strip.left .ls-label { text-align: left; } }
.point .ico { border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid rgba(148, 156, 255, .25); color: var(--iris); }
.point .ico svg { width: 20px; height: 20px; }
/* Language pages (2026-10-23): the home page's hero photograph and art. On
   right-to-left pages the photo and its shade are mirrored, so the copy
   still sits on the dark side. */
.locale-hero { min-height: min(760px, calc(100vh - var(--nav-h))); }
.locale-hero .crumbs { margin-bottom: 18px; }
.locale-hero h1 { font-size: clamp(38px, 5.2vw, 66px); }
[dir="rtl"] .hero-bg .hero-media { transform: scaleX(-1); }
[dir="rtl"] .hero-bg::before { background: linear-gradient(270deg, rgba(5, 7, 12, .96) 0%, rgba(5, 7, 12, .86) 34%, rgba(5, 7, 12, .3) 62%, rgba(5, 7, 12, .1) 100%), radial-gradient(ellipse 60% 70% at 82% 50%, rgba(111, 120, 240, .18), transparent 70%); }
.art-wide { max-width: 980px; margin: 0 auto 40px; }
@media (max-width: 900px) {
  [dir="rtl"] .hero-bg::before { background: linear-gradient(180deg, rgba(5, 7, 12, .78), rgba(5, 7, 12, .9) 60%, rgba(5, 7, 12, .96)); }
  .art-wide { margin-bottom: 28px; }
}
/* The home page's chip grids: who it is for (3 x 2, beside the art) and
   everything else inside (4 x 4, full width), so no chip is left alone. */
.chip-row.who, .chip-row.also { display: grid; gap: 10px; }
.chip-row.who { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.chip-row.also { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chip-row.who .tag, .chip-row.also .tag { min-width: 0; text-align: start; }
.also-wide { margin: 48px 0 0; max-width: none; text-align: left; }
@media (max-width: 900px) { .chip-row.also { grid-template-columns: repeat(2, minmax(0, 1fr)); } .also-wide { text-align: center; } .chip-row.who { margin: 0 auto; } }
@media (max-width: 380px) { .chip-row.who, .chip-row.also { grid-template-columns: 1fr; } }


/* voices, 2026-10-23: quieter cards, and one set at a time (People or Machines) so the section is
   a short, calm grid instead of two walls of faces. Without script every card stays on show. */
.voice-tabs-wrap { display: flex; justify-content: center; margin: 4px 0 28px; }
.voice-tabs { display: none; }
.has-voice-tabs .voice-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.voice-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.voice-tabs button i { font-style: normal; font-size: 12px; font-weight: 600; opacity: .6; font-family: var(--mono); }
.voice-tabs button:hover { color: var(--text); }
.voice-tabs button[aria-selected="true"] { color: var(--text); background: rgba(148, 156, 255, .16); box-shadow: inset 0 0 0 1px rgba(148, 156, 255, .38), 0 8px 24px -14px rgba(111, 120, 240, .7); }
.voice-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.has-voice-tabs [data-voice-panel][data-off] { display: none; }

.voices { gap: 14px; }
.voice { padding: 14px 16px 14px 14px; border-radius: 20px; border-color: rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); transition: border-color .25s, background .25s, box-shadow .25s, transform .25s; }
.voice:hover { transform: translateY(-2px); border-color: rgba(148, 156, 255, .45); background: linear-gradient(180deg, rgba(148, 156, 255, .12), rgba(148, 156, 255, .035)); box-shadow: 0 22px 44px -26px rgba(111, 120, 240, .65); }
.voice img { border: 0; box-shadow: 0 0 0 2px rgba(148, 156, 255, .3), 0 10px 20px -10px rgba(0, 0, 0, .7); }
.voice b { font-size: 15px; letter-spacing: .005em; }
.voice > span { font-size: 12.5px; color: var(--faint); }
.voice-play { width: 36px; height: 36px; min-height: 36px; background: transparent; border-color: rgba(255, 255, 255, .2); color: var(--soft); }
.voice:hover .voice-play { color: var(--text); }
.voices-note { max-width: 560px; margin: 26px auto 0; }

/* the machines, alone on their tab, get the same roomy card as the people (three across) */
.has-voice-tabs .voices.machines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.has-voice-tabs .voices.machines .voice { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "face name key" "face tag key"; column-gap: 14px; padding: 14px 16px 14px 14px; }
.has-voice-tabs .voices.machines .voice img { width: 62px; height: 62px; }
.has-voice-tabs .voices.machines .voice-play { grid-area: key; align-self: center; justify-self: auto; width: 36px; height: 36px; min-height: 36px; margin: 0; background: transparent; border-color: rgba(255, 255, 255, .2); }
.has-voice-tabs .voices.machines .voice-play i { margin-left: 3px; border-width: 6px 0 6px 10px; }
.has-voice-tabs .voices.machines .voice-play.playing { background: var(--brand); border-color: transparent; }
.has-voice-tabs .voices.machines .voice-play.playing i { width: 10px; height: 10px; margin: 0; border: 0; }
@media (max-width: 900px) { .has-voice-tabs .voices.machines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .has-voice-tabs .voices.machines, .voices { grid-template-columns: 1fr; } .voice-tabs button { padding: 9px 18px; } }

.voice-tabs .faces { display: inline-flex; padding-inline-start: 6px; }
.voice-tabs .faces img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; margin-inline-start: -7px; border: 2px solid var(--bg-2, #0b0e1a); }
.voice-tabs button:has(.faces) { padding: 7px 18px 7px 12px; }
.voices-sub-note { margin: 0 auto 18px; max-width: 520px; }

/* voices, 2026-10-23 (2): each voice a portrait card - the face centred on top, the name and
   its character under it, and a small play key on the face's corner. The whole card still plays
   it (site.js). Scoped to #voices so it outranks the older row layout on every language page. */
#voices .voices .voice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 26px 16px 22px; min-height: 0; }
#voices .voices .voice img { width: 88px; height: 88px; margin: 0 0 16px; }
#voices .voices.machines .voice img { width: 88px; height: 88px; border-radius: 22px; }
#voices .voices .voice b { font-size: 16px; line-height: 1.3; align-self: auto; }
#voices .voices .voice > span { font-size: 13.5px; line-height: 1.4; margin-top: 6px; align-self: auto; }
#voices .voices .voice .voice-play { position: absolute; top: calc(26px + 88px - 28px); left: calc(50% + 20px); grid-area: auto; align-self: auto; justify-self: auto; width: 30px; height: 30px; min-height: 30px; margin: 0; border: 2px solid var(--bg-2, #0b0e1a); background: rgba(148, 156, 255, .92); color: #060812; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7); }
#voices .voices .voice .voice-play::after { display: none; }
#voices .voices .voice .voice-play i { margin-left: 2px; border-width: 5px 0 5px 8px; }
#voices .voices .voice:hover .voice-play { transform: scale(1.08); background: var(--brand); }
#voices .voices .voice .voice-play.playing { background: var(--brand); border-color: var(--bg-2, #0b0e1a); }
#voices .voices .voice .voice-play.playing i { width: 8px; height: 8px; margin: 0; border: 0; border-radius: 2px; }
@media (max-width: 640px) {
  #voices .voices .voice { padding: 20px 10px 18px; }
  #voices .voices .voice img, #voices .voices.machines .voice img { width: 68px; height: 68px; margin-bottom: 12px; }
  #voices .voices .voice .voice-play { top: calc(20px + 68px - 26px); left: calc(50% + 14px); width: 28px; height: 28px; min-height: 28px; }
}
@media (max-width: 560px) { #voices .voices, .has-voice-tabs .voices.machines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Built for how you work" carries what XIRO does day to day (2026-10-24): a compact two-column list. */
.built-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.bl { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); color: var(--muted); text-decoration: none; font-size: 13.5px; line-height: 1.5; transition: border-color .25s, background .25s, transform .25s; }
.bl:hover { border-color: rgba(148, 156, 255, .45); background: rgba(148, 156, 255, .07); transform: translateY(-2px); }
.bl .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid rgba(148, 156, 255, .25); color: var(--iris); margin: 0; }
.bl .ico svg { width: 18px; height: 18px; }
.bl b { display: block; color: var(--text); font-size: 14.5px; margin-bottom: 3px; }
@media (max-width: 640px) { .built-list { grid-template-columns: 1fr; } }


/* "You talk. It gets done." in every language the site serves (2026-10-24). */
.say-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0 auto 16px; max-width: 1080px; }
.say-lang { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.say-lang:hover { color: var(--text); border-color: rgba(148, 156, 255, .4); }
.say-lang.on { color: var(--text); background: rgba(148, 156, 255, .16); border-color: rgba(148, 156, 255, .5); }
.say-lang:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.say-once blockquote[dir="rtl"] { text-align: right; }

/* the six "every day" items: equal rows, icon centred on two short lines, no jump on hover */
.built-list { gap: 10px; }
.bl { align-items: center; min-height: 86px; padding: 14px 18px; grid-template-columns: 40px 1fr; gap: 14px; }
.bl:hover { transform: none; }
.bl .ico { width: 40px; height: 40px; }
.bl b { font-size: 15px; margin-bottom: 2px; }
.bl > span:last-child { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.built-list { grid-auto-rows: 1fr; }

/* "Built for how you work", 2026-10-24 refresh: who it is for beside the art,
   then the six everyday abilities as one even 3 x 2 grid across the page. */
.art-split { align-items: center; }
.art-split .built-for h3 { font-size: 12px; letter-spacing: .16em; color: var(--iris); margin-bottom: 10px; }
.who-lead { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 700; color: var(--text); margin: 0 0 22px; max-width: 520px; letter-spacing: -.01em; }
.chip-row.who { gap: 10px; max-width: 540px; }
.chip-row.who .tag { padding: 7px 14px 7px 7px; font-size: 14.5px; border-radius: 14px; background: rgba(255, 255, 255, .025); border-color: rgba(255, 255, 255, .07); transition: border-color .2s, background .2s; }
.chip-row.who .tag:hover { border-color: rgba(148, 156, 255, .4); background: rgba(148, 156, 255, .07); }
.chip-row.who .tag svg { width: 32px; height: 32px; padding: 7px; border-radius: 10px; }
.built-list.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 46px 0 0; grid-auto-rows: 1fr; }
.built-list.wide .bl { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 14px; min-height: 0; padding: 22px 22px 24px; border-radius: 18px; position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(148, 156, 255, .07), rgba(255, 255, 255, .012) 55%); border-color: rgba(255, 255, 255, .07); transition: border-color .25s, transform .25s, box-shadow .25s; }
.built-list.wide .bl::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(148, 156, 255, .55), transparent); opacity: .5; transition: opacity .25s; }
.built-list.wide .bl:hover { border-color: rgba(148, 156, 255, .38); transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(110, 120, 255, .55); }
.built-list.wide .bl:hover::after { opacity: 1; }
.built-list.wide .bl .ico { width: 42px; height: 42px; border-radius: 13px; }
.built-list.wide .bl b { font-size: 16.5px; margin-bottom: 6px; letter-spacing: -.005em; }
.built-list.wide .bl > span:last-child { font-size: 14px; line-height: 1.55; }
@media (max-width: 900px) { .built-list.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } .who-lead { margin-left: auto; margin-right: auto; } }
@media (max-width: 560px) { .built-list.wide { grid-template-columns: 1fr; grid-auto-rows: auto; } .built-list.wide .bl { grid-template-columns: 42px 1fr; align-items: center; padding: 16px 18px; } }
/* The six cards wear the same coloured icon chips as the lists around them. */
.built-list.wide .bl { --c: var(--iris); --cb: rgba(148, 156, 255, .12); }
.built-list.wide .bl:nth-child(4n+2) { --c: var(--aqua); --cb: rgba(95, 227, 207, .12); }
.built-list.wide .bl:nth-child(4n+3) { --c: var(--gold); --cb: rgba(241, 201, 122, .12); }
.built-list.wide .bl:nth-child(4n+4) { --c: var(--rose); --cb: rgba(255, 129, 151, .12); }
.built-list.wide .bl .ico { width: 40px; height: 40px; border-radius: 11px; color: var(--c); background: var(--cb); border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.built-list.wide .bl .ico svg { width: 20px; height: 20px; }
.built-list.wide .bl::after { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 60%, transparent), transparent); }
.built-list.wide .bl:hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--c) 55%, transparent); }


/* The friend in 3D (2026-10-24): a tilted orbit round a warm core, four glass
   tiles at their own depths. Pure CSS; motion stops for reduced-motion. */
.friend3d { margin: 0; display: grid; gap: 14px; }
.f3-stage { position: relative; aspect-ratio: 4 / 3.3; perspective: 1100px; perspective-origin: 50% 35%; transform-style: preserve-3d; isolation: isolate; }
.f3-stage::before { content: ""; position: absolute; inset: 8% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 128, 255, .22), rgba(120, 128, 255, .06) 60%, transparent); filter: blur(10px); z-index: -1; }
.f3-floor { position: absolute; left: 22%; right: 22%; bottom: 7%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(241, 201, 122, .32), rgba(148, 156, 255, .12) 55%, transparent); filter: blur(8px); animation: f3-floor 6s ease-in-out infinite; }
.f3-orbit { position: absolute; left: 50%; top: 46%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(64deg) rotateZ(-18deg); transform-style: preserve-3d; }
.f3-ring { position: absolute; inset: 0; border-radius: 50%; }
.f3-ring.r1 { background: conic-gradient(from 0deg, rgba(148, 156, 255, .95), rgba(241, 201, 122, .95) 30%, rgba(148, 156, 255, .9) 55%, rgba(95, 227, 207, .8) 75%, rgba(148, 156, 255, .95));
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 80%, #000 92%, transparent 94%); mask: radial-gradient(closest-side, transparent 78%, #000 80%, #000 92%, transparent 94%);
  filter: drop-shadow(0 0 14px rgba(148, 156, 255, .75)); animation: f3-spin 18s linear infinite; }
.f3-ring.r2 { inset: 9%; background: conic-gradient(from 180deg, transparent, rgba(241, 201, 122, .9) 20%, transparent 45%, rgba(241, 201, 122, .55) 70%, transparent);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 95%, transparent 97%); mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 95%, transparent 97%); animation: f3-spin 11s linear infinite reverse; }
.f3-ring.r3 { inset: -14%; border: 1px solid rgba(148, 156, 255, .22); box-shadow: inset 0 0 40px rgba(148, 156, 255, .08); }
.f3-spark { position: absolute; inset: -14%; border-radius: 50%; animation: f3-spin 9s linear infinite; }
.f3-spark::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(148, 156, 255, .9); }
.f3-spark.s2 { inset: 0; animation-duration: 14s; animation-delay: -5s; } .f3-spark.s2::after { background: #ffe3a6; box-shadow: 0 0 10px 3px rgba(241, 201, 122, .9); }
.f3-spark.s3 { inset: 9%; animation-duration: 7s; animation-direction: reverse; } .f3-spark.s3::after { width: 4px; height: 4px; background: #c8fff5; box-shadow: 0 0 8px 2px rgba(95, 227, 207, .9); }
.f3-core { position: absolute; left: 50%; top: 46%; width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #ffe9b8 24%, rgba(241, 201, 122, .55) 46%, rgba(148, 156, 255, .18) 68%, transparent 72%);
  filter: blur(.5px); box-shadow: 0 0 60px 18px rgba(241, 201, 122, .28), 0 0 120px 40px rgba(148, 156, 255, .16); animation: f3-core 4.5s ease-in-out infinite; }
.f3-tile { --c: var(--iris); --g: rgba(148, 156, 255, .5); position: absolute; width: 19%; aspect-ratio: 1; transform-style: preserve-3d; animation: f3-bob 7s ease-in-out infinite; }
.f3-tile.gold { --c: #ffd27a; --g: rgba(241, 201, 122, .55); } .f3-tile.aqua { --c: var(--aqua); --g: rgba(95, 227, 207, .5); } .f3-tile.rose { --c: #ffb4c2; --g: rgba(255, 129, 151, .5); }
.f3-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 24%; color: var(--c);
  background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05) 45%, rgba(20, 24, 48, .55));
  border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -10px 24px rgba(0, 0, 0, .25), 0 22px 40px -14px rgba(0, 0, 0, .75), 0 0 34px -6px var(--g);
  transform: rotateY(var(--ry, 0deg)) rotateX(8deg); }
.f3-face::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 58%); background-size: 260% 100%; animation: f3-sheen 7s ease-in-out infinite; }
.f3-face svg { width: 46%; height: 46%; stroke-width: 1.6; filter: drop-shadow(0 0 10px var(--g)) drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.f3-tick { position: absolute; right: -9%; bottom: -9%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8dffbc, #20b866 70%); box-shadow: 0 4px 12px rgba(32, 184, 102, .55), inset 0 1px 0 rgba(255, 255, 255, .5); transform: translateZ(20px); }
.f3-tick::after { content: ""; position: absolute; left: 30%; top: 24%; width: 26%; height: 44%; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); }
.t-mem { left: 9%; top: 12%; --ry: 14deg; animation-delay: -1s; }
.t-rem { right: 10%; top: 6%; --ry: -14deg; width: 16%; animation-delay: -3s; }
.t-chk { left: 15%; bottom: 14%; --ry: 12deg; width: 16%; animation-delay: -5s; }
.t-book { right: 8%; bottom: 17%; --ry: -12deg; animation-delay: -2s; }
@keyframes f3-spin { to { transform: rotate(360deg); } }
@keyframes f3-bob { 50% { transform: translate3d(0, -10px, 30px); } }
@keyframes f3-core { 50% { transform: translate(-50%, -50%) scale(1.12); filter: blur(.5px) brightness(1.2); } }
@keyframes f3-floor { 50% { transform: scaleX(.9); opacity: .75; } }
@keyframes f3-sheen { 0%, 60% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.friend3d:hover .f3-tile { animation-duration: 4.5s; }
@media (prefers-reduced-motion: reduce) { .f3-ring, .f3-spark, .f3-tile, .f3-core, .f3-floor, .f3-face::before { animation: none; } }
.f3-core { width: 26%; box-shadow: none; filter: none;
  background: radial-gradient(circle, #fff 0 7%, #fff1cc 13%, rgba(255, 214, 140, .75) 22%, rgba(241, 201, 122, .32) 36%, rgba(148, 156, 255, .14) 52%, rgba(148, 156, 255, 0) 70%); }
@keyframes f3-core { 50% { transform: translate(-50%, -50%) scale(1.1); opacity: .85; } }
/* Scorecard: ready features two wide on top, the rest three across beneath. */
@media (min-width: 901px) {
  .score-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .score-card { grid-column: span 2; }
  .score-card.wide { grid-column: span 3; }
}
/* Right-to-left pages scroll toward the left edge, where body's overflow
   doesn't reach: clip at the page itself, the same in both directions. */
html { overflow-x: clip; }

/* ── Ad landing page (ai-assistant-for-windows.html, 2026-10-24) ─────────── */
.lp-hero .hero-copy h1 { max-width: 14ch; }
.lp-buy { box-shadow: 0 0 0 1px rgba(241, 201, 122, .35), 0 18px 50px -14px rgba(241, 201, 122, .55); }
.lp-more { text-align: center; margin-top: 22px; color: var(--muted); font-size: 14px; }
.lp-table { max-width: 860px; margin-inline: auto; }
.demo-video { max-width: 960px; margin: 0 auto; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--glow); background: #000; }
.demo-video video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.demo-video + .demo-sim { display: none; }
.demo-sim { position: relative; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--glow);
  background: radial-gradient(ellipse at 50% 0%, rgba(148, 156, 255, .22), transparent 60%), linear-gradient(180deg, #0d1222, #070a12); }
.ds-screen { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.25fr; grid-template-rows: auto auto 1fr auto; gap: 14px 28px; padding: clamp(16px, 3.4vw, 34px); }
.ds-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
.ds-brand { color: var(--text); }
.ds-state { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line-2); text-transform: uppercase; }
.demo-sim[data-mode="listen"] .ds-state { color: var(--aqua); border-color: rgba(95, 227, 207, .5); }
.demo-sim[data-mode="work"] .ds-state { color: var(--iris); border-color: rgba(148, 156, 255, .5); }
.demo-sim[data-mode="done"] .ds-state { color: var(--ok); border-color: rgba(95, 227, 156, .5); }
.ds-you, .ds-steps, .ds-xiro { grid-column: 2; }
.ds-orb { grid-column: 1; grid-row: 2 / 5; align-self: center; justify-self: center; position: relative; width: min(28vw, 240px); aspect-ratio: 1; }
.ds-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(148, 156, 255, .55); }
.ds-orb i:nth-child(2) { inset: 14%; border-color: rgba(95, 227, 207, .5); }
.ds-orb i:nth-child(3) { inset: 34%; border: 0; background: radial-gradient(circle, rgba(179, 185, 255, .9), rgba(111, 120, 240, .25) 60%, transparent 72%); }
.demo-sim[data-mode="listen"] .ds-orb i:nth-child(1) { animation: ds-pulse 1.1s ease-in-out infinite; }
.demo-sim[data-mode="work"] .ds-orb i:nth-child(2) { border-style: dashed; animation: ds-spin 2.4s linear infinite; }
.demo-sim[data-mode="done"] .ds-orb i { border-color: rgba(95, 227, 156, .6); }
@keyframes ds-pulse { 50% { transform: scale(1.06); opacity: .6; } }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-you, .ds-xiro { margin: 0; font-size: clamp(14px, 1.7vw, 19px); color: var(--text); min-height: 2.6em; }
.ds-who { display: block; font: 600 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ds-xiro { color: var(--ok); }
.ds-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; align-content: center; counter-reset: ds; }
.ds-steps li { counter-increment: ds; display: flex; gap: 10px; align-items: flex-start; font-size: clamp(12px, 1.35vw, 15px); color: var(--faint); opacity: .45; transition: opacity .4s, color .4s; }
.ds-steps li::before { content: counter(ds); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--mono); border: 1px solid var(--line-2); }
.ds-steps li.on { opacity: 1; color: var(--soft); }
.ds-steps li.on::before { content: "✓"; color: #06110b; background: var(--ok); border-color: var(--ok); }
.ds-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; font-size: 28px; color: #1a1205; background: var(--gold-grad); box-shadow: 0 0 0 10px rgba(241, 201, 122, .14), 0 20px 50px -10px rgba(241, 201, 122, .6); transition: transform .2s, opacity .3s; }
.ds-play:hover, .ds-play:focus-visible { transform: scale(1.07); }
.demo-sim.playing .ds-play { opacity: 0; pointer-events: none; }
.demo-sim.played .ds-play { inset: auto 18px 22px auto; margin: 0; width: 52px; height: 52px; font-size: 18px; }
.demo-sim:not(.playing):not(.played) .ds-screen { filter: saturate(.7) brightness(.75); }
.ds-progress { position: absolute; inset: auto 0 0 0; height: 4px; background: rgba(255, 255, 255, .08); }
.ds-progress i { display: block; height: 100%; width: 0; background: var(--brand); }
.provider-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1040px; margin: 0 auto; }
.provider { padding: 18px 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.provider b { display: block; font-size: 16px; margin-bottom: 6px; }
.provider span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.provider.main { grid-column: 1 / -1; border-color: rgba(148, 156, 255, .4); background: var(--brand-soft); }
.provider.local b em { font-style: normal; margin-inline-start: 8px; padding: 2px 8px; border-radius: 99px; font: 600 10px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--aqua); border: 1px solid rgba(95, 227, 207, .4); vertical-align: middle; }
@media (max-width: 760px) {
  .demo-sim { aspect-ratio: auto; }
  .ds-screen { position: relative; grid-template-columns: 1fr; padding-bottom: 92px; }
  .ds-orb { grid-row: auto; width: 120px; }
  .ds-you, .ds-steps, .ds-xiro, .ds-orb { grid-column: 1; }
  .provider-grid { grid-template-columns: 1fr; }
  .demo-sim:not(.playing):not(.played) .ds-play { inset: auto 0 18px 0; }
}