/* The public website (intronomy.com). Same palette as the tool (frontend/styles.css): dark by default, light when
   the visitor's system asks for it. Works from 320px up. */

:root {
  color-scheme: dark;
  --bg: #0a0c18;
  --surface: #121629;
  --surface-2: #181d33;
  --border: #222842;
  --border-strong: #323a5a;
  --highlight: rgba(255, 255, 255, 0.05);
  --text: #eceffa;
  --text-2: #bcc3d8;
  --muted: #8a92ab;
  --accent: #6f89ff;
  --accent-soft: #1d2445;
  --accent-text: #a5b6ff;
  --on-accent: #ffffff;
  --grad: linear-gradient(135deg, #4a63e8 0%, #7c4fe8 100%);
  --good: #45d19a;
  --good-soft: #0f2a21;
  --warn: #e5a53a;
  --warn-soft: #2a2111;
  --bad: #ff9b9b;
  --bad-soft: #2d1419;
  --glow: rgba(98, 122, 255, 0.18);
  --glow-2: rgba(150, 95, 255, 0.12);
  --grad-text: linear-gradient(90deg, #8ea2ff 0%, #b595ff 100%);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 48px -24px rgba(0, 0, 0, 0.8);
  --radius: 18px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f4f5fb;
    --surface: #ffffff;
    --surface-2: #f3f4fa;
    --border: #e6e8f0;
    --border-strong: #d3d7e4;
    --highlight: rgba(255, 255, 255, 0.9);
    --text: #141827;
    --text-2: #434b61;
    --muted: #6b7390;
    --accent: #4a63e8;
    --accent-soft: #eceffd;
    --accent-text: #3f57d6;
    --good: #0a7c52;
    --good-soft: #e2f5ec;
    --warn: #a35a00;
    --warn-soft: #fdf0dd;
    --bad: #b42318;
    --bad-soft: #fdecea;
    --glow: rgba(91, 124, 250, 0.14);
    --glow-2: rgba(129, 85, 239, 0.09);
    --grad-text: linear-gradient(90deg, #4a63e8 0%, #7c4fe8 100%);
    --shadow: 0 2px 4px rgba(20, 24, 39, 0.04), 0 24px 48px -24px rgba(40, 50, 110, 0.3);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 10% -180px, var(--glow), transparent 70%),
    radial-gradient(760px 480px at 95% -120px, var(--glow-2), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); }
img { display: block; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* Top bar */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.top-row { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.brand img { display: block; filter: drop-shadow(0 6px 10px rgba(74, 99, 232, 0.45)); }
.top-nav { display: flex; gap: 22px; margin-left: auto; }
.top-actions { display: flex; gap: 10px; margin-left: 8px; }
.top-nav a { color: var(--text-2); text-decoration: none; font-size: 15px; }
.top-nav a:hover { color: var(--text); }
@media (max-width: 860px) {
  .top-nav { display: none; }
  .top-actions { margin-left: auto; }
}
@media (max-width: 520px) { .top-actions .top-request { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: 12px;
  background: var(--grad); color: var(--on-accent);
  font-weight: 600; font-size: 15px; text-decoration: none;
  box-shadow: 0 10px 24px -10px #4a63e8, inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px #4a63e8, inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-small { padding: 8px 16px; font-size: 14px; border-radius: 10px; }
.btn-ghost { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--accent); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* Type */
.eyebrow { margin: 0 0 12px; color: var(--accent-text); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { margin: 0 0 20px; font-size: clamp(36px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
h2 { margin: 0 0 28px; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; max-width: 22ch; }
h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.01em; }
.lead { margin: 0; color: var(--text-2); font-size: 18px; max-width: 58ch; }
p { margin: 0; }

/* Hero */
.hero { padding: 80px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.2vw, 58px); text-wrap: balance; }
.hero h1 span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 900px) {
  .hero { padding: 48px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* The pieces of the drawn examples: the Example tag, a score, who someone is, how to reach them. */
.tag { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600; }
.score {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.s-a { background: var(--good-soft); color: var(--good); }
.s-b { background: var(--warn-soft); color: var(--warn); }
.who { display: grid; min-width: 0; }
.who b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border-strong); color: var(--text-2); font-size: 12.5px; }

/* Sections */
.band { padding: 72px 0; border-top: 1px solid var(--border); scroll-margin-top: 64px; }
.card {
  padding: 24px;
  background: linear-gradient(180deg, var(--highlight), transparent 50%), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.card p { color: var(--text-2); font-size: 15px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.num {
  display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 16px;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-weight: 700;
}
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .band { padding: 56px 0; } }

/* Closing */
.closing { padding: 24px 0 88px; }
.closing-card {
  display: grid; justify-items: center; gap: 12px; padding: 56px 24px; text-align: center;
  background:
    radial-gradient(420px 220px at 50% 0%, var(--glow), transparent 70%),
    var(--surface);
  border: 1px solid var(--border); border-radius: 24px;
}
.closing-card h2 { margin: 0; max-width: none; }
.closing-card p { color: var(--text-2); margin-bottom: 12px; }

/* Footer */
.foot { border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.foot-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: 24px; padding-bottom: 32px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }

/* The 404 page */
.lost { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 48px 16px; }
.lost h1 { font-size: clamp(30px, 5vw, 44px); margin: 0; }
.lost p { color: var(--text-2); }

/* ------------------------------------------------------------------ v3.03: the fuller website */

.section-lead { margin: -12px 0 40px; }
.card p a { color: var(--accent-text); }

/* A day in it: each moment is words beside a drawn example, alternating sides. */
.moments { display: grid; }
.moment { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 32px 0; }
.moment + .moment { border-top: 1px dashed var(--border); }
.moment:nth-child(even) .moment-copy { order: 2; }
.moment-copy h3 { margin: 12px 0 10px; font-size: 22px; }
.moment-copy p { color: var(--text-2); max-width: 46ch; }
.time {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) {
  .moment { grid-template-columns: 1fr; gap: 20px; }
  .moment:nth-child(even) .moment-copy { order: 0; }
}

.mock {
  margin: 0; padding: 18px; min-width: 0;
  background: linear-gradient(180deg, var(--highlight), transparent 40%), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mock-title { font-weight: 600; font-size: 15px; }
.today-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 14px; border-radius: 12px; background: var(--surface-2); }
.today-top b {
  font-size: 36px; line-height: 1; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.today-top span { display: grid; font-weight: 600; font-size: 15px; }
.today-top small { color: var(--muted); font-weight: 400; font-size: 13px; }
.funnel { display: grid; gap: 6px; }
.bar {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: 10px; overflow: hidden; background: var(--surface-2); font-size: 13.5px;
}
.bar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, #4a63e8 36%, transparent), color-mix(in srgb, #7c4fe8 24%, transparent));
}
.bar span, .bar b { position: relative; }
.bar span { color: var(--text-2); }
.bar b { font-variant-numeric: tabular-nums; }

.mock-who { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.draft {
  padding: 14px; border-radius: 12px; border-left: 3px solid var(--accent);
  background: var(--surface-2); color: var(--text-2); font-size: 14.5px; line-height: 1.55;
}
.mock-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--border-strong); color: var(--text-2); font-size: 13px; font-weight: 600; }
.chip-go { border-color: transparent; background: var(--grad); color: #fff; }

.chat { display: grid; gap: 8px; }
.bubble { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; }
.bubble.out { justify-self: end; border-bottom-right-radius: 4px; background: color-mix(in srgb, #4a63e8 28%, var(--surface-2)); }
.bubble.in { justify-self: start; border-bottom-left-radius: 4px; background: var(--surface-2); }
.mock-status { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.pill { padding: 3px 10px; border-radius: 999px; background: var(--good-soft); color: var(--good); font-size: 12.5px; font-weight: 600; }

.tg { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); font-size: 14.5px; }
.tg ul { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 18px; color: var(--text-2); }

/* An icon in a soft square (the competitors' IBs section) */
.icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent-text);
}
.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Request a demo */
.request { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.request h2 { margin-bottom: 16px; }
.alt { margin-top: 24px; color: var(--text-2); }
@media (max-width: 900px) { .request { grid-template-columns: 1fr; gap: 28px; } }
.request-form { position: relative; display: grid; gap: 14px; padding: 28px; box-shadow: var(--shadow); }
.request-form label { display: grid; align-content: start; gap: 6px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.opt { color: var(--muted); font-weight: 400; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .pair { grid-template-columns: 1fr; } .request-form { padding: 20px; } }
.request-form input:not([type="radio"]), .request-form textarea {
  width: 100%; padding: 11px 13px;
  font: inherit; font-size: 15px; font-weight: 400; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.request-form textarea { min-height: 104px; resize: vertical; }
.request-form input:focus, .request-form textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.kind { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.kind legend { width: 100%; margin-bottom: 6px; padding: 0; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.request-form .kind label { position: relative; display: block; }
.kind input { position: absolute; opacity: 0; pointer-events: none; }
.kind span {
  display: inline-block; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border-strong);
  color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer;
}
.kind input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.request-form .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.request-form .btn { justify-self: start; border: 0; font-family: inherit; cursor: pointer; }
.request-form .btn:disabled { opacity: 0.7; cursor: progress; transform: none; }
.form-note { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.form-note.bad { background: var(--bad-soft); color: var(--bad); }
.fine { color: var(--muted); font-size: 13px; }
.fine a { color: var(--muted); }
.sent-note { display: grid; justify-items: start; gap: 8px; padding: 8px 2px; }
.sent-note h3 { margin: 0; font-size: 22px; }
.sent-note p { color: var(--text-2); }

/* Pages of text: IntronomyBot, Privacy */
.page { padding: 72px 0 64px; }
.page-head { max-width: 760px; margin-bottom: 36px; }
.page-head h1 { font-size: clamp(32px, 5vw, 48px); }
.prose { max-width: 720px; }
.prose h2 { max-width: none; margin: 40px 0 12px; font-size: 22px; }
.prose p, .prose li { color: var(--text-2); }
.prose p + p { margin-top: 12px; }
.prose ul { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 20px; }
.prose b { color: var(--text); font-weight: 600; }
.prose code {
  padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13.5px; overflow-wrap: anywhere;
}
.prose .ua { display: block; margin-top: 12px; padding: 14px 16px; line-height: 1.5; }
.prose .ua + p { margin-top: 12px; }
.updated { margin-top: 12px; color: var(--muted); font-size: 14px; }

/* Request access (v3.04): the request layout, on a page of its own. */
.access h1 { font-size: clamp(32px, 5vw, 48px); }
.access .alt + .alt { margin-top: 10px; }
.closing-card .cta { margin-top: 0; justify-content: center; }

/* ------------------------------------------------------------------ v3.05: the problem, and what Intronomy solves */

/* Read by screen readers, not shown. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The heading's second sentence starts its own line, quieter. */
.problem-title { max-width: none; text-wrap: balance; }
.problem-title span { display: block; color: var(--muted); }

/* By hand beside With Intronomy, one row per part of the job; the Intronomy column is tinted. On a phone each pair
   stacks, and the head becomes a legend for the two marks. */
.versus {
  overflow: hidden;
  background: linear-gradient(180deg, var(--highlight), transparent 30%), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.versus-head, .versus-rows li { display: grid; grid-template-columns: 1fr 1fr; }
.versus-head span {
  position: relative; padding: 16px 24px 16px 54px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.versus-head .then { color: var(--muted); }
.versus-head .now { color: var(--accent-text); }
.versus-rows { list-style: none; margin: 0; padding: 0; }
.versus-rows li { border-top: 1px solid var(--border); }
.versus-rows p { position: relative; padding: 18px 24px 18px 54px; font-size: 15px; line-height: 1.55; }
.versus-rows .then { color: var(--muted); }
.versus .now { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.versus .then::before, .versus .now::before { content: ""; position: absolute; width: 18px; height: 18px; }
.versus-head span::before { left: 24px; top: 50%; margin-top: -9px; }
.versus-rows p::before { left: 24px; top: 20px; }
.versus .then::before {
  background: var(--bad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.versus .now::before {
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--grad);
}
@media (max-width: 760px) {
  .versus-head { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px 18px; }
  .versus-head span { padding: 0 0 0 28px; }
  .versus-head .now { background: none; }
  .versus-head span::before { left: 0; }
  .versus-rows li { grid-template-columns: 1fr; }
  .versus-rows p { padding: 14px 18px 14px 48px; }
  .versus-rows .then { padding-bottom: 12px; }
  .versus-rows p::before { left: 18px; top: 16px; }
}

/* The problem in numbers (v3.06; v3.07 the headline): three figures, and where they come from underneath. */
.scale-title { margin: 56px 0 0; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.scale-title span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stats li {
  display: grid; align-content: start; gap: 6px; padding: 22px 24px;
  background: linear-gradient(180deg, var(--highlight), transparent 50%), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.stats b {
  justify-self: start;
  font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats li > span { color: var(--text-2); font-size: 15px; }
.stats-note { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 110ch; }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr; gap: 10px; }
  .stats li { padding: 18px 20px; }
}

/* The line the section ends on. */
.verdict {
  margin-top: 40px; text-align: center; text-wrap: balance;
  font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;
}
.verdict span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------------------------ v3.08: a website that sells */

.btn-big { padding: 14px 26px; font-size: 16px; }

/* Three reassurances under the hero's buttons, each with a green tick. */
.assure { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; color: var(--text-2); font-size: 14px; }
.assure li { display: inline-flex; align-items: center; gap: 8px; }
.assure li::before {
  content: ""; flex: none; width: 15px; height: 15px; background: var(--good);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The platforms' marks: one hidden sprite, drawn in the text's colour wherever they're used. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pi { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The example at work (the hero): a standing search, the accounts it finds, and the first message. site.js plays
   each market in turn; without scripts, or with reduced motion, the first market shows as it ends. */
.live {
  position: relative; margin: 0; min-width: 0; border-radius: 22px;
  background: linear-gradient(180deg, var(--highlight), transparent 30%), var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), 0 50px 120px -50px color-mix(in srgb, #6a5cff 60%, transparent);
}
.live::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, color-mix(in srgb, #8ea2ff 75%, transparent), transparent 32%, transparent 68%, color-mix(in srgb, #b595ff 65%, transparent));
  -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);
}
.live-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.live-name { font-weight: 600; font-size: 14.5px; }
.live-bar .tag { margin-left: auto; }
.live-pulse { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--good); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}
.live-pause {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer;
}
.live-pause[hidden] { display: none; }
.live-pause::before {
  content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='5' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='5' height='16' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='5' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='5' height='16' rx='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.live-pause[aria-pressed="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E");
}
.live-pause:hover { color: var(--text); border-color: var(--accent); }
.live-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.live.paused .live-pulse { animation: none; background: var(--muted); }
.live-stage { padding: 16px 18px 18px; transition: opacity 0.3s ease; }
.live-stage.fading { opacity: 0; }

.scene { display: grid; gap: 12px; }
.scan { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.scan .pi { color: var(--accent-text); }
.scan b { color: var(--text); font-weight: 600; }
.scan span::before { content: "·"; margin-right: 8px; color: var(--muted); }
.scan q {
  min-width: 0; margin-left: auto; padding: 3px 10px; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--border-strong); border-radius: 8px; color: var(--muted); font-size: 12.5px;
}
.scan-status { display: flex; align-items: center; gap: 12px; }
.scan-bar { position: relative; flex: 1; height: 4px; border-radius: 99px; background: var(--border-strong); overflow: hidden; }
.scan-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: var(--grad); }
.scan-note { color: var(--good); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.scene.reading .scan-note { color: var(--muted); font-weight: 500; }

.finds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.find {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 10px 12px; border-radius: 12px; background: var(--surface-2);
}
.find:first-child {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.find .score { width: 36px; height: 36px; }
.find .why {
  grid-column: 1 / -1; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border-strong);
  color: var(--text-2); font-size: 13px; line-height: 1.45;
}
.draft-box { padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.draft-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ai { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); white-space: nowrap; }
.ai::before {
  content: ""; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 4.6 2.4 7.4 10 10-7.6 2.6-9.4 5.4-10 10-.6-4.6-2.4-7.4-10-10 7.6-2.6 9.4-5.4 10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 4.6 2.4 7.4 10 10-7.6 2.6-9.4 5.4-10 10-.6-4.6-2.4-7.4-10-10 7.6-2.6 9.4-5.4 10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ai.busy::before { animation: ai-spin 1.2s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.draft-text { color: var(--text); font-size: 14.5px; line-height: 1.6; }
.draft-text[dir="rtl"] { font-size: 15.5px; line-height: 1.75; }
.draft-go { display: flex; justify-content: flex-end; margin-top: 12px; }
.draft-go .chip { transition: opacity 0.3s ease; }
.draft-go .chip.idle { opacity: 0.35; }
.draft-go .chip.ready { animation: send-ready 1.8s ease-out 2; }
@keyframes send-ready {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, #6f89ff 60%, transparent); }
  80%, 100% { box-shadow: 0 0 0 10px transparent; }
}

/* How a market plays: while the search reads, the rows are empty placeholders; then each account appears (rising,
   unless the visitor asked for less motion), the reason fades in, and the message is written word by word. Fading and
   appearing words aren't motion, so they play for everyone. */
.scene.anim .find > * { transition: opacity 0.35s ease; }
.scene.anim .find:not(.on) > * { opacity: 0; }
.scene.anim .find:not(.on) {
  background: linear-gradient(90deg, var(--surface-2) 20%, color-mix(in srgb, var(--text) 7%, var(--surface-2)) 50%, var(--surface-2) 80%) 0 0 / 250% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .scene.anim .find:not(.on) { animation: placeholder 1.3s linear infinite; }
  .scene.anim .find > * { transition: opacity 0.35s ease, transform 0.35s ease; }
  .scene.anim .find:not(.on) > * { transform: translateY(6px); }
}
@keyframes placeholder { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.scene.anim .find .why { opacity: 0; transform: none; transition: opacity 0.4s ease; }
.scene.anim .find .why.on { opacity: 1; }
.draft-text .w { opacity: 0; transition: opacity 0.2s ease; }
.draft-text .w.on { opacity: 1; }

.live-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 16px; }
.live-tabs[hidden] { display: none; }
.live-tabs button {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.live-tabs button:hover { color: var(--text); border-color: var(--accent); }
.live-tabs button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.live-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) {
  .live-stage { padding: 14px 14px 16px; }
  .live-bar { padding: 12px 14px; }
  .live-tabs { padding: 0 14px 14px; }
  .find .route { display: none; }
  .find { grid-template-columns: auto minmax(0, 1fr); }
  .scan q { display: none; }
}

/* The strip under the hero: the five platforms, and three facts. */
.proof { padding: 8px 0 64px; }
.proof-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 20px 40px; align-items: center;
  padding: 22px 28px; border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--highlight), transparent 60%), var(--surface);
}
.proof-platforms p { margin-bottom: 10px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.platforms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.platforms li { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; }
.platforms .pi { width: 20px; height: 20px; color: var(--accent-text); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.facts li { display: grid; align-content: start; gap: 2px; padding-left: 18px; border-left: 1px solid var(--border); }
.facts b {
  justify-self: start; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.facts span { color: var(--text-2); font-size: 14px; line-height: 1.4; }
@media (max-width: 900px) { .proof-row { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .proof { padding-bottom: 48px; }
  .proof-row { padding: 18px 18px 20px; }
  .facts { grid-template-columns: 1fr; gap: 10px; }
  .facts li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .facts b { flex: none; min-width: 2ch; font-size: 28px; }
}

/* A heading whose last words carry the gradient. */
h2.wide { max-width: 24ch; text-wrap: balance; }
h2.wide span { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Competitors' IBs: four points beside a drawn page for one rival broker. */
.band-glow {
  background:
    radial-gradient(700px 380px at 88% 40%, var(--glow-2), transparent 70%),
    radial-gradient(640px 340px at 0% 0%, var(--glow), transparent 70%);
}
.rivals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.rival-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.rival-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.rival-points h3 { margin: 2px 0 4px; font-size: 17px; }
.rival-points p { color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) { .rivals { grid-template-columns: 1fr; gap: 32px; } }

.rival-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.rival-kpis div { display: grid; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.rival-kpis b {
  justify-self: start; font-size: 26px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rival-kpis span { color: var(--muted); font-size: 12.5px; }
.move {
  display: grid; gap: 8px; padding: 14px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--good) 35%, var(--border));
  background: color-mix(in srgb, var(--good) 6%, var(--surface-2));
}
.move-kind { display: flex; align-items: center; gap: 10px; }
.move-kind small { color: var(--muted); font-size: 12.5px; }
.move-title { font-weight: 700; font-size: 16px; }
.move-action { color: var(--text-2); font-size: 14px; }
.move-action span {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 700;
}
.move-go { margin-top: 4px; }
.move-go .chip { display: inline-block; line-height: 1.4; }
.ib-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ib-rows li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 10px; background: var(--surface-2);
}
.ib-rows b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-rows small { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.ib-tag {
  grid-column: 2; grid-row: 1 / span 2; padding: 3px 9px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.ib-tag.ib-name { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* A button between sections. */
.nudge {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px;
  margin-top: 40px; padding: 22px; border-radius: var(--radius); border: 1px dashed var(--border-strong); text-align: center;
}
.nudge p { font-size: 18px; font-weight: 600; }

/* Questions: the question is the button; the answer opens under it. */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; align-items: start; }
.faq-intro h2 { margin-bottom: 16px; }
.faq-intro .lead { font-size: 16px; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.faq details[open] { border-color: var(--border-strong); background: linear-gradient(180deg, var(--highlight), transparent 60%), var(--surface); }
.faq summary { position: relative; padding: 16px 52px 16px 20px; list-style: none; cursor: pointer; font-weight: 600; font-size: 16px; border-radius: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: var(--accent-text); transition: transform 0.2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-text); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq details p { padding: 0 20px 18px; color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Who built it, without a name (his OK, v3.08). */
.built {
  display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font-weight: 600;
}
.built img { flex: none; }

/* On a phone: Get a demo stays at the foot of the screen once the hero's button has scrolled away, and steps aside
   while the form is on screen. */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  transform: translateY(calc(100% + 24px)); transition: transform 0.3s ease;
}
.dock.show { transform: none; }
.dock .btn { width: 100%; padding: 14px; font-size: 16px; box-shadow: 0 18px 36px -12px #4a63e8, inset 0 1px 0 rgba(255, 255, 255, 0.25); }
@media (min-width: 601px) { .dock { display: none; } }

/* Things rise into view as the page scrolls (site.js marks them), and the day's funnel draws itself in. Only for
   those who haven't asked their system for less motion; without scripts everything simply shows. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
  .moment.reveal .bar::before { width: 0; transition: width 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s; }
  .moment.reveal.is-in .bar::before { width: var(--w); }
}
@media (prefers-reduced-motion: reduce) {
  .live-pulse, .ai.busy::before, .draft-go .chip.ready { animation: none; }
  .dock { transition: none; }
}