/* ═══════════════════════════════════════════════════════════════════════
   InkScribe — public site: landing, pricing, account and error pages.
   Light and confident: Poppins, big light headlines, indigo pill buttons
   with arrows, chip tabs, soft grey containers, and InkScribe's interface
   drawn crisply in HTML with floating "agent" cards. The orb is the mark.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #ffffff;
  --band: #f5f6f8;
  --band-2: #eceef3;
  --ink: #0d0e12;
  --ink-2: #323338;
  --muted: #676879;
  --faint: #8b8c9c;
  --line: #e6e8ef;
  --line-2: #c9ccda;
  --node: #d0d4e4;
  --brand: #5b5bf0;
  --brand-hover: #4b4bdc;
  --brand-soft: #e9e8ff;
  --brand-chip: #d9d7ff;
  --brand-ink: #2c2a9a;
  --green: #0f7a43;
  --green-soft: #dff5e8;
  --done: #00c875;
  --amber: #a35b00;
  --amber-soft: #fff1d6;
  --red: #c42a3d;
  --red-soft: #ffe8eb;
  --ai-1: #4f7cff;
  --ai-2: #7b5cff;
  --ai-3: #e85bd0;
  --ai-4: #ffb547;
  --ai-grad: linear-gradient(100deg, var(--ai-1), var(--ai-2) 45%, var(--ai-3));
  --agent-border: linear-gradient(100deg, #ff9be9, #a6a3ff 55%, #8f8cff);
  --ui: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --paper: 'Tinos', 'Times New Roman', Georgia, serif;
  --shadow-1: 0 1px 2px rgba(13, 14, 18, .06), 0 2px 8px rgba(13, 14, 18, .06);
  --shadow-2: 0 4px 10px -2px rgba(13, 14, 18, .08), 0 14px 32px -12px rgba(13, 14, 18, .22);
  --shadow-3: 0 2px 4px rgba(13, 14, 18, .04), 0 24px 60px -20px rgba(40, 36, 120, .3);
  --shell: 1280px;
  --gutter: clamp(16px, 3.5vw, 40px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: var(--ui); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.muted { color: var(--muted); }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg.lucide { width: 18px; height: 18px; stroke-width: 2; flex: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--brand-chip); }
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
main { overflow-x: clip; }

/* ── The orb: InkScribe's mark (same as the editor's agent avatar) ──── */
.orb {
  --s: 30px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; position: relative; display: inline-block;
  background: conic-gradient(from 0deg, var(--ai-1), var(--ai-2), var(--ai-3), var(--ai-4), var(--ai-1));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
}
.orb::after {
  content: ''; position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0, rgba(255, 255, 255, .92) 32%, rgba(255, 255, 255, .25) 64%, rgba(255, 255, 255, 0) 72%);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px;
  border-radius: 999px; font-size: 14.5px; font-weight: 400; white-space: nowrap;
  transition: background-color .15s, background-position .5s var(--ease), box-shadow .15s, color .15s;
}
.btn svg.lucide { width: 17px; height: 17px; transition: transform .2s var(--ease); }
@media (hover: hover) { .btn:hover svg.lucide-arrow-right { transform: translateX(3px); } }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15.5px; }
.btn-xl { height: 56px; padding: 0 32px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn-brand, .btn-blue { background-color: var(--brand); color: #fff; }
@media (hover: hover) { .btn-brand:hover, .btn-blue:hover { background-color: var(--brand-hover); } }
/* A warm glow at the end of the main call to action. */
.btn-glow { background-image: radial-gradient(circle at 100% 50%, rgba(254, 155, 11, .85) 0, rgba(255, 129, 228, .8) 22%, rgba(97, 97, 255, 0) 58%); background-size: 200% 100%; background-position: 0 0; background-repeat: no-repeat; }
@media (hover: hover) { .btn-glow:hover { background-position: 100% 0; } }
.btn-dark { background: var(--ink); color: #fff; }
@media (hover: hover) { .btn-dark:hover { background: #2a2b33; } }
.btn-line, .btn-outline { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) { .btn-line:hover, .btn-outline:hover { background: var(--band); } }
.btn-tonal { background: var(--brand-soft); color: var(--brand-ink); }
@media (hover: hover) { .btn-tonal:hover { background: var(--brand-chip); } }
.btn-text { color: var(--brand); padding: 0 14px; }
@media (hover: hover) { .btn-text:hover { background: var(--brand-soft); } }
.btn-google { color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); gap: 12px; }
@media (hover: hover) { .btn-google:hover { background: var(--band); } }
.btn[disabled] { opacity: .6; cursor: default; }
.btn .spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin 1.1s linear infinite; }
.btn.loading .spin { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 15px; margin-top: 32px; }
.more svg.lucide { width: 17px; height: 17px; transition: transform .2s var(--ease); }
@media (hover: hover) { .more:hover svg.lucide { transform: translateX(3px); } }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-row.center { justify-content: center; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.tag.blue { background: var(--ink); color: #fff; }
.tag.ok { background: var(--green-soft); color: var(--green); }
.tag.warn { background: var(--amber-soft); color: var(--amber); }
.tick, .dash { width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.tick svg, .dash svg { width: 22px; height: 22px; }
.tick .seal { fill: var(--brand); }
.dash { color: #c3c5d1; }
.dash svg { width: 20px; height: 20px; }

/* ── Brand and navigation ────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; letter-spacing: -.03em; color: var(--ink); }
.brand .orb { --s: 28px; }
.nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled, .nav.open { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav-links { display: flex; gap: 4px; margin-left: 12px; margin-right: auto; }
.nav-links > a, .nav-login { height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 20px; font-size: 15px; color: var(--ink-2); transition: background .15s, color .15s; }
@media (hover: hover) { .nav-links > a:hover, .nav-login:hover { background: var(--band); } }
.nav-links > a[aria-current] { color: var(--brand); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-menu { display: none; width: 48px; height: 48px; margin-right: -8px; border-radius: 50%; place-items: center; }
@media (hover: hover) { .nav-menu:hover { background: var(--band); } }
.burger { position: relative; width: 28px; height: 20px; display: block; }
.burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s, top .25s var(--ease); }
.burger i:nth-child(1) { top: 1px; } .burger i:nth-child(2) { top: 9px; } .burger i:nth-child(3) { top: 17px; }
.nav-menu[aria-expanded="true"] .burger i:nth-child(1) { top: 9px; transform: rotate(45deg); }
.nav-menu[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.nav-menu[aria-expanded="true"] .burger i:nth-child(3) { top: 9px; transform: rotate(-45deg); }
.nav-sheet { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 18px; }
.nav-sheet a:not(.btn) { padding: 12px; border-radius: 12px; font-size: 16px; }
@media (hover: hover) { .nav-sheet a:not(.btn):hover { background: var(--band); } }
.nav-sheet .btn { margin-top: 10px; }

/* ── Type shared by sections ─────────────────────────────────────────── */
.display { font-size: clamp(32px, 4.2vw, 56px); font-weight: 400; letter-spacing: -.035em; line-height: 1.12; }
.mega { font-size: clamp(48px, 7.6vw, 112px); font-weight: 500; letter-spacing: -.055em; line-height: .96; }
.eyebrow { font-size: 15px; color: var(--ink-2); margin-bottom: 14px; }
.sub { margin: 16px auto 0; max-width: 620px; font-size: 17px; color: var(--muted); }
.sec { padding: clamp(72px, 8vw, 112px) 0; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── Interface pieces: agent cards, pills, cursor, people ────────────── */
.agent {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border-radius: 14px;
  border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--agent-border) border-box;
  box-shadow: 0 14px 34px -14px rgba(97, 97, 255, .45), 0 3px 10px rgba(13, 14, 18, .06);
  animation: rise .8s var(--ease) .35s both, bob 7s ease-in-out 1.5s infinite;
}
.agent-av { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ffe1f6, #e3e1ff); }
.agent-av.ok { background: var(--green-soft); color: var(--green); }
.agent-av.ok svg.lucide { width: 24px; height: 24px; }
.agent-av.person { background: linear-gradient(135deg, #ffb36b, #ff7aa8); color: #fff; font-weight: 600; font-size: 15px; }
.agent-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.agent-txt b { font-size: 16px; font-weight: 400; white-space: nowrap; }
.agent-txt small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; transition: opacity .25s; }
.agent-txt small.swap { opacity: 0; }
.agent > em { flex: none; margin-left: 6px; font-style: normal; }
.pill-busy, .pill-done, .pill-ready { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-style: normal; white-space: nowrap; }
.pill-busy { background-color: #e1dfff; color: var(--ink); background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); background-size: 250% 100%; animation: sheen 2s linear infinite; }
.pill-done { background: var(--done); color: #fff; padding: 0 20px; }
.pill-ready { background: var(--brand-soft); color: var(--brand-ink); }
.cursor { position: absolute; z-index: 4; width: 30px; height: 30px; fill: var(--brand); stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 3px 6px rgba(97, 97, 255, .35)); animation: point 6s ease-in-out 1s infinite; }
.person { position: absolute; z-index: 4; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffb36b, #ff7aa8); color: #fff; font-weight: 600; font-size: 20px; border: 4px solid #fff; box-shadow: var(--shadow-2); animation: rise .8s var(--ease) .5s both, bob 8s ease-in-out 2s infinite; }
.chip-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 12px; background: #fff; font-size: 14px; box-shadow: var(--shadow-2); animation: rise .8s var(--ease) .45s both, bob 7s ease-in-out 2.5s infinite; }
.chip-float svg.lucide { width: 18px; height: 18px; color: var(--brand); }
.lock { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.lock svg.lucide { width: 16px; height: 16px; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes point { 0%, 100% { translate: 0 0; } 45% { translate: -14px 10px; } 55% { translate: -14px 10px; scale: .9; } 62% { scale: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); }
.hero-in { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: clamp(32px, 3.5vw, 56px); align-items: center; }
.hero h1 { font-size: clamp(38px, 4vw, 56px); font-weight: 400; letter-spacing: -.04em; line-height: 1.04; }
.lede { margin-top: 24px; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink); max-width: 520px; line-height: 1.6; }
.hero .cta-row { margin-top: 36px; }
.fine { margin-top: 16px; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fine span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.fine svg { width: 15px; height: 15px; flex: none; color: var(--brand); }

.hero-art { position: relative; }
@media (min-width: 1360px) { .hero-art { margin-right: -72px; } }
@keyframes ping { to { box-shadow: 0 0 0 6px rgba(97, 97, 255, 0); } }
.sheet { height: 100%; padding: 26px 34px; background: #fff; box-shadow: 0 1px 3px rgba(13, 14, 18, .1); font-family: var(--paper); color: #202124; }

/* ── Schools strip ───────────────────────────────────────────────────── */
.schools { padding: clamp(24px, 4vw, 48px) 0 clamp(16px, 3vw, 32px); text-align: center; }
.schools > p { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink); }
.schools > p b { font-weight: 500; }
.marquee { margin-top: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: slide 420s linear infinite; }
@media (hover: hover) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.crest { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #3a3b44; white-space: nowrap; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
@media (hover: hover) { .crest:hover { filter: none; opacity: 1; } }
.crest img { width: 40px; height: 40px; object-fit: contain; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Product tabs ────────────────────────────────────────────────────── */
.tabs {
  display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 4px;
  width: fit-content; max-width: 100%; margin: 36px auto 0; padding: 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: 999px; background: #fff;
  box-shadow: 0 4px 16px -6px rgba(13, 14, 18, .14), 0 0 0 1px var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button { height: 40px; padding: 0 20px; border-radius: 20px; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
@media (hover: hover) { .tabs button:hover { background: var(--band); } }
.tabs button[aria-selected="true"] { background: var(--brand); color: #fff; }
.tabs .tab-short { display: none; }
.panels { margin-top: 40px; }
.panel { display: grid; grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr); gap: clamp(24px, 3vw, 48px); align-items: center; padding: 16px 16px 16px clamp(28px, 4vw, 64px); border-radius: 28px; background: var(--band); min-height: 500px; }
.panel:not([hidden]) { animation: rise .5s var(--ease) both; }
.panel-copy h3 { font-size: clamp(26px, 2.5vw, 34px); font-weight: 400; letter-spacing: -.035em; line-height: 1.2; }
.panel-copy h3 span { color: var(--brand); }
.panel-copy > p { margin-top: 16px; font-size: 16px; color: var(--ink-2); }
.panel-copy .btn { margin-top: 28px; }
.win { position: relative; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(13, 14, 18, .06), 0 0 0 1px rgba(13, 14, 18, .06); }
.win-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--line); }
.win-bar span { width: 10px; height: 10px; border-radius: 50%; background: #e3e4ea; }
.win-bar em { margin-left: 10px; font-style: normal; font-size: 12.5px; color: var(--faint); }
.win-video { width: 100%; aspect-ratio: 2160 / 1220; background: var(--band); object-fit: cover; object-position: left top; }
.panel-report { position: relative; display: grid; place-items: center; padding: 24px; }


/* ── The plagiarism check, exactly as the editor shows it ────────────────
   Same markup (built with viz.js) and the editor's own styles and tokens. */
.or-demo {
  --surface: #ffffff; --toolbar: #edf2fa; --ink: #1f1f1f; --muted: #444746; --faint: #747775; --line: #e1e3e1; --line-strong: #c4c7c5;
  --hover: rgba(68, 71, 70, .08); --blue: #5b5bf0;
  --viz-surface: #ffffff; --viz-track: #eef1f6; --viz-1: #2a78d6; --viz-ai: #e87ba4; --viz-human: #c9dcf5; --viz-sim-1: #86b6ef; --viz-sim-2: #3987e5; --viz-sim-3: #1c5cab;
  --st-good: #0ca30c; --st-serious: #ec835a; --st-critical: #d03b3b;
  width: 100%; padding: 22px 22px 14px; border-radius: 20px; background: #fff; color: var(--ink); text-align: left;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5;
  box-shadow: 0 1px 2px rgba(13, 14, 18, .06), 0 0 0 1px rgba(13, 14, 18, .06);
}
.or-demo svg.lucide { width: 16px; height: 16px; }
.or-demo .or-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.or-demo .or-result-head b { display: block; font-size: 15px; font-weight: 600; }
.or-demo .or-result-head small { font-size: 12px; color: var(--faint); }
.or-demo .or-pdf { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 16px; font-size: 12.5px; font-weight: 600; color: var(--blue); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; }
.or-demo .or-pdf svg { width: 15px; height: 15px; }
.or-demo .or-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.or-demo .or-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 2px rgba(60, 64, 67, .06); }
.or-demo .or-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.or-demo .or-card-h > span:first-child { font-size: 13px; font-weight: 600; color: var(--muted); }
.or-demo .or-hero { display: flex; align-items: baseline; gap: 10px; }
.or-demo .or-hero b { font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.or-demo .or-hero b small { font-size: 22px; font-weight: 600; margin-left: 1px; color: var(--muted); }
.or-demo .or-hero > span { font-size: 12.5px; color: var(--muted); line-height: 1.35; max-width: 140px; }
.or-demo .or-map-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.or-demo .or-map-h small { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--toolbar); }
.or-demo .or-sub { margin: 22px 0 10px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.or-demo .or-sub small { font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 9px; background: var(--toolbar); color: var(--muted); }
.or-demo .viz-status { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--toolbar); white-space: nowrap; }
.or-demo .viz-status svg { width: 14px; height: 14px; flex: none; }
.or-demo .viz-status.s-good { background: #e7f6e7; }
.or-demo .viz-status.s-good svg { color: var(--st-good); }
.or-demo .viz-stack { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: var(--viz-surface); }
.or-demo .viz-stack span { display: block; height: 100%; min-width: 3px; transition: filter .12s; cursor: default; }
.or-demo .viz-stack span:first-child { border-radius: 4px 0 0 4px; }
.or-demo .viz-stack span:last-child { border-radius: 0 4px 4px 0; }
@media (hover: hover) { .or-demo .viz-stack span:hover, .or-demo .viz-stack span:focus-visible { filter: brightness(1.12) saturate(1.05); outline: none; } }
.or-demo .viz-legend { display: flex; flex-direction: column; margin-top: 10px; }
.or-demo .viz-key { display: grid; grid-template-columns: 10px 1fr auto 44px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.or-demo .viz-key:last-child { border-bottom: 0; }
.or-demo .viz-key i { width: 10px; height: 10px; border-radius: 3px; }
.or-demo .viz-key span { color: var(--muted); }
.or-demo .viz-key b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.or-demo .viz-key em { font-style: normal; text-align: right; color: var(--faint); font-variant-numeric: tabular-nums; }
.or-demo .viz-ranks { display: flex; flex-direction: column; gap: 4px; }
.or-demo .viz-rank { display: grid; grid-template-columns: 22px minmax(0, 1.3fr) minmax(80px, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--ink); }
@media (hover: hover) { .or-demo .viz-rank:hover { background: var(--hover); } }
.or-demo .viz-rank-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--toolbar); }
.or-demo .viz-rank-l { display: flex; flex-direction: column; min-width: 0; }
.or-demo .viz-rank-l b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-demo .viz-rank-l small { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-demo .viz-rank-bar { height: 12px; border-radius: 0 4px 4px 0; display: flex; }
.or-demo .viz-rank-bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.or-demo .viz-rank-v { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.or-demo .viz-docmap-track { position: relative; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--viz-track) 0 calc(10% - 2px), var(--viz-surface) calc(10% - 2px) 10%); }
.or-demo .viz-docmap-mark { position: absolute; top: 3px; bottom: 3px; min-width: 6px; border-radius: 3px; background: var(--viz-ai); box-shadow: 0 0 0 2px var(--viz-surface); padding: 0; }
.or-demo .viz-docmap.sim .viz-docmap-mark { background: var(--viz-sim-3); }
.or-demo .viz-docmap-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 5px; }
.viz-tip { position: fixed; z-index: 900; pointer-events: none; max-width: 300px; display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; border-radius: 10px; background: #1f2023; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); font-family: 'Inter', system-ui, sans-serif; }
.viz-tip b { font-size: 13px; font-weight: 600; }
.viz-tip span { font-size: 12px; color: #c8cbd0; line-height: 1.4; }
.viz-tip small { font-size: 11.5px; color: #9aa0a6; }
@media (max-width: 720px) {
  .or-demo { padding: 16px 12px 8px; }
  .or-demo .or-cards { grid-template-columns: minmax(0, 1fr); }
  .or-demo .or-result-head { flex-direction: column; align-items: flex-start; }
  .or-demo .viz-rank { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .or-demo .viz-rank-bar { display: none; }
}

/* ── How it works: a flow of nodes ───────────────────────────────────── */
.flow-lede { max-width: 900px; margin: 22px auto 0; text-align: center; font-size: clamp(24px, 3vw, 40px); font-weight: 400; letter-spacing: -.03em; line-height: 1.35; }
.inl { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 4px; }
.flow-lede .inl-crests img { width: 48px; height: 48px; object-fit: contain; padding: 5px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); margin-left: -12px; }
.flow-lede .inl-crests img:first-child { margin-left: 0; }
.inl-word { width: 48px; height: 52px; border-radius: 10px; display: inline-grid; place-items: center; background: #185abd; color: #fff; font-weight: 700; font-size: 24px; letter-spacing: 0; box-shadow: var(--shadow-1); rotate: -6deg; }
.flow-sec .cta-row { margin-top: 32px; }

/* ── Formatting: cards around a reader ───────────────────────────────── */
.ctx { padding: clamp(56px, 6vw, 96px) 0 0; }
.ctx-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.ctx-head p { font-size: 17px; color: var(--ink-2); max-width: 460px; }
.ctx-head p b { color: var(--ink); font-weight: 600; }
.ctx-head .btn { margin-top: 24px; }
.ctx-stage { position: relative; height: 700px; margin-top: 48px; }
.ctx-doodle { position: absolute; left: 50%; bottom: 0; width: 460px; max-width: 46%; height: auto; translate: -50% 0; }
.ctx-card { position: absolute; width: 270px; padding: 6px; border-radius: 14px; background: #f1f2f6; box-shadow: 0 0 0 1px rgba(13, 14, 18, .03); }
.ctx-card.reveal.in { animation: bob 9s ease-in-out infinite; }
.ctx-card:nth-child(odd).in { animation-delay: -3s; }
.ctx-label { display: block; padding: 6px 8px 8px; font-size: 13px; font-weight: 500; }
.ctx-in { border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(13, 14, 18, .06); }
.c-title { left: 1%; top: 0; width: 230px; }
.c-toc { left: 30%; top: 3%; width: 300px; }
.c-style { right: 1%; top: 0; width: 290px; }
.c-sig { left: 4%; top: 46%; width: 250px; }
.c-eq { right: 0; top: 40%; width: 250px; }
.c-chart { left: 15%; bottom: 0; width: 240px; }
.c-word { right: 9%; bottom: 3%; width: 300px; }
.m-title { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 14px; text-align: center; font-family: var(--paper); color: #202124; }
.m-title b { font-size: 10px; line-height: 1.4; }
.m-title img { width: 48px; height: 48px; object-fit: contain; }
.m-title small { font-size: 9.5px; line-height: 1.4; }
.m-sig, .m-toc, .m-eq { padding: 14px 16px; font-family: var(--paper); color: #202124; }
.m-sig { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px 16px; }
.m-sig span { display: block; height: 1px; background: #3c4043; margin-bottom: 4px; }
.m-sig small { font-size: 10.5px; }
.m-toc { display: flex; flex-direction: column; gap: 6px; }
.m-toc b { text-align: center; font-size: 11px; margin-bottom: 4px; }
.m-toc span { display: flex; align-items: baseline; gap: 5px; font-size: 10.5px; }
.m-toc span.in { padding-left: 12px; }
.m-toc em { font-style: normal; white-space: nowrap; }
.m-toc i { flex: 1; border-bottom: 1.5px dotted #9aa0a6; }
.m-eq { display: flex; align-items: center; justify-content: space-between; padding: 18px; }
.eq { font-style: italic; font-size: 20px; display: inline-flex; align-items: center; gap: 8px; }
.frac { display: inline-flex; flex-direction: column; align-items: center; font-size: 16px; }
.frac span:first-child { border-bottom: 1.5px solid #202124; padding: 0 6px 1px; }
.m-eq em { font-style: normal; font-size: 13px; }
.m-styles { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
.m-styles span { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--band); font-size: 13px; color: var(--ink-2); }
.m-styles span.on { background: var(--brand); color: #fff; padding-left: 8px; }
.m-styles svg.lucide { width: 15px; height: 15px; stroke-width: 2.6; }
.m-chart { padding: 12px 14px 10px; }
.m-chart svg { width: 100%; height: auto; }
.m-chart .ax line { stroke: #c9ccda; }
.m-chart rect { fill: var(--brand); }
.m-chart rect:nth-of-type(2) { fill: #a6a3ff; }
.m-chart rect:nth-of-type(4) { fill: #ff9be9; }
.m-chart small { display: block; margin-top: 4px; text-align: center; font-family: var(--paper); font-size: 10.5px; font-weight: 700; }
.m-file { display: flex; align-items: center; gap: 12px; padding: 12px; }
.docx { width: 34px; height: 42px; border-radius: 6px; background: #185abd; color: #fff; font-weight: 700; font-size: 16px; display: grid; place-items: center; flex: none; }
.m-file div { min-width: 0; }
.m-file b { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-file small { display: block; font-size: 11.5px; color: var(--muted); }

/* Formatting tiles on the grey band */
.band-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.band-head p { font-size: 17px; color: var(--ink-2); max-width: 440px; }
.band-head p b { color: var(--ink); font-weight: 600; }
.band-head .btn { margin-top: 24px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; padding: 14px 14px 26px; border-radius: 24px; background: #fff; }
.tile-vis { height: 190px; border-radius: 16px; background: var(--band); display: grid; place-items: center; padding: 20px; overflow: hidden; margin-bottom: 20px; }
.tile-vis > div { width: min(100%, 300px); border-radius: 6px; background: #fff; box-shadow: var(--shadow-1); }
.tile-vis > .m-save, .tile-vis > .m-styles { background: none; box-shadow: none; }
.tile-vis > .m-styles { justify-content: center; }
.tile-vis > .m-styles span { background: #fff; box-shadow: var(--shadow-1); height: 34px; font-size: 14px; }
.tile-vis > .m-styles span.on { background: var(--brand); box-shadow: none; }
.tile-vis > .m-title { width: min(100%, 230px); padding: 12px 14px; gap: 6px; }
.tile-vis > .m-chart { width: min(100%, 250px); padding: 10px 14px 8px; }
.tile-vis > .m-chart svg { max-height: 104px; }
.tile h3 { font-size: 18px; font-weight: 500; padding: 0 10px; }
.tile p { margin-top: 6px; color: var(--muted); font-size: 14.5px; padding: 0 10px; }
.m-num { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; font-family: var(--paper); color: #202124; }
.m-num b { text-align: center; font-size: 11px; }
.m-num span { font-weight: 700; font-size: 11px; }
.m-num span.i { font-style: italic; padding-left: 10px; font-size: 10.5px; }
.m-num small { margin-top: 4px; text-align: center; font-weight: 700; font-size: 10.5px; padding: 8px; border-top: 1px solid #dadce0; border-bottom: 1px solid #dadce0; }
.m-save { display: flex; flex-direction: column; gap: 10px; }
.pill-saved { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; background: #fff; box-shadow: var(--shadow-1); font-size: 13px; color: var(--muted); }
.pill-saved svg.lucide { width: 16px; height: 16px; }
.m-doc { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-1); font-size: 14px; font-weight: 500; }
.m-doc svg.lucide { color: var(--brand); }
.m-doc small { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--faint); }

/* ── You stay the author: a grey band with six promises ──────────────── */
.band { background: var(--band); padding: clamp(72px, 8vw, 112px) 0; }
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 48px; margin-top: clamp(48px, 6vw, 88px); }
.g6 svg.lucide { width: 22px; height: 22px; color: var(--brand); stroke-width: 1.7; }
.g6 h3 { margin-top: 14px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.g6 p { margin-top: 6px; max-width: 340px; font-size: 15px; color: var(--ink-2); }

/* ── You stay the author: a bento of five promises ───────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 56px); }
.bt { display: flex; flex-direction: column; padding: 14px 14px 28px; border-radius: 24px; background: var(--band); }
.bt-wide { grid-column: span 2; }
.bt-vis { position: relative; height: 200px; border-radius: 16px; background: #fff; display: grid; place-items: center; padding: 20px; margin-bottom: 22px; overflow: hidden; }
.bt h3 { padding: 0 12px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.bt > p { padding: 0 12px; margin-top: 6px; font-size: 15px; color: var(--ink-2); max-width: 520px; }
.bt-page { position: relative; width: min(100%, 520px); padding: 18px 20px; border-radius: 8px; background: #fff; box-shadow: var(--shadow-1), 0 0 0 1px rgba(13, 14, 18, .05); font-family: var(--paper); font-size: 15px; line-height: 1.7; color: #202124; }
.t-del { color: #b3261e; text-decoration: line-through; background: #fce8e6; border-radius: 2px; padding: 0 2px; margin-right: 3px; }
.t-ins { color: #146c2e; background: #e6f4ea; border-radius: 2px; padding: 0 2px; }
.t-acts { position: absolute; right: 14px; top: -14px; display: inline-flex; gap: 6px; }
.t-acts svg.lucide { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1), 0 0 0 1px var(--line); stroke-width: 2.6; }
.t-acts .ok { color: var(--green); } .t-acts .no { color: var(--red); }
.bt-key { position: absolute; right: 18px; bottom: 14px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.bt-key kbd { min-width: 26px; height: 26px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--band); box-shadow: inset 0 -2px 0 var(--line-2); font: 500 12px var(--ui); color: var(--ink); }
.bt-key kbd + kbd { margin-right: 6px; }
.bt-stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bt-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 20px; background: var(--green-soft); color: var(--green); font-size: 14.5px; font-weight: 500; }
.bt-chip.off { background: var(--band); color: var(--faint); text-decoration: line-through; }
.bt-page.small { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; font-size: 14px; }
.bt-page.small b { font-size: 14px; }
.t-hold { font-family: var(--ui); font-size: 13px; color: var(--amber); background: var(--amber-soft); border: 1px dashed #e8b55c; border-radius: 6px; padding: 6px 10px; }
.bt-auth { width: min(100%, 300px); display: flex; flex-direction: column; gap: 8px; }
.bt-bar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.bt-bar i { display: block; }
.bt-leg { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.bt-leg i { width: 10px; height: 10px; border-radius: 3px; }
.bt-leg b { font-weight: 600; color: var(--ink); }
@media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .bento { grid-template-columns: minmax(0, 1fr); } .bt-wide { grid-column: auto; } .bt-vis { height: auto; min-height: 180px; } .bt-page { font-size: 13.5px; } .bt-key { position: static; margin-top: 12px; } .bt-wide .bt-vis { display: flex; flex-direction: column; align-items: flex-end; } }

/* ── Compare ─────────────────────────────────────────────────────────── */
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.split-head p { font-size: 17px; color: var(--ink-2); max-width: 460px; justify-self: end; }
.vs { display: grid; grid-template-columns: 1.08fr 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 56px); }
.vs-card { position: relative; border-radius: 24px; padding: clamp(28px, 3.4vw, 44px); overflow: hidden; }
.vs-us { background: #000; color: #fff; }
.vs-them { background: #f1e5ff; color: var(--ink-2); }
.vs-quote { display: block; height: 56px; font-size: 120px; line-height: 1; font-weight: 600; color: #fb6bce; font-family: Georgia, serif; }
.vs-them .vs-quote { color: #c49bf2; }
.vs-say { margin-top: 8px; max-width: 440px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; letter-spacing: -.02em; }
.vs-say em { font-style: normal; color: #fb6bce; }
.vs-them .vs-say { color: var(--ink); }
.vs-them .vs-say em { color: #8a3fd1; }
.vs-head { display: flex; align-items: center; gap: 12px; margin: 32px 0 6px; }
.vs-head b { font-size: 15px; font-weight: 500; }
.vs-bot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #8a3fd1; }
.vs-bot svg.lucide { width: 16px; height: 16px; }
.vs ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.vs li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; font-size: 15px; border-top: 1px solid rgba(255, 255, 255, .14); }
.vs-them li { border-top-color: rgba(138, 63, 209, .16); }
.vs li svg.lucide { width: 19px; height: 19px; margin-top: 2px; stroke-width: 2.4; }
.vs-us li svg.lucide { color: #fb6bce; }
.vs-them li svg.lucide { color: #b48ae0; }

/* ── Plans ───────────────────────────────────────────────────────────── */
.was { font-weight: 400; color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(196, 42, 61, .7); letter-spacing: 0; }
.save { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 500; letter-spacing: 0; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-side p { margin-top: 18px; max-width: 340px; font-size: 16px; color: var(--muted); }
.faq-side .btn { margin-top: 24px; }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-size: 17px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq summary:hover { color: var(--brand); } }
.pm-ico { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--band); transition: background .2s; }
.pm-ico::before, .pm-ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 1px; background: var(--ink); transition: transform .3s var(--ease); }
.pm-ico::after { transform: rotate(90deg); }
.faq details[open] .pm-ico { background: var(--brand-chip); }
.faq details[open] .pm-ico::after { transform: rotate(0); }
.faq-body { overflow: hidden; }
.faq details p { padding: 0 56px 24px 4px; margin-top: -6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
.faq-wrap { max-width: 820px; }
.faq summary svg.lucide { color: var(--muted); transition: transform .25s var(--ease); }
.faq details[open] summary svg.lucide { transform: rotate(180deg); }

/* ── Finale: one giant moving line ───────────────────────────────────── */
.finale { padding: clamp(72px, 8vw, 120px) 0 clamp(72px, 8vw, 112px); overflow: hidden; }
.ticker { overflow: hidden; }
.ticker-track { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); width: max-content; padding-right: clamp(20px, 2.5vw, 36px); animation: slide 50s linear infinite; font-size: clamp(56px, 9vw, 136px); font-weight: 500; letter-spacing: -.05em; line-height: 1.15; white-space: nowrap; }
.ticker .inl { margin: 0; }
.ticker .inl-crests img { width: 1em; height: 1em; padding: .1em; object-fit: contain; border-radius: 50%; background: #fff; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-1); margin-left: -.22em; }
.ticker .inl-crests img:first-child { margin-left: 0; }
.ticker .inl-orb .orb { --s: .9em !important; }
.ticker .inl-word { font-size: .5em; width: 1.7em; height: 1.85em; border-radius: .3em; }
.finale .cta-row { margin-top: clamp(32px, 4vw, 48px); padding: 0 var(--gutter); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot { padding: 64px 0 28px; background: #fff; }
.finale + .foot { border-top: 0; padding-top: 16px; }
.foot-in { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.foot-brand { max-width: 300px; display: flex; flex-direction: column; gap: 14px; }
.foot-brand p { color: var(--muted); font-size: 14px; }
.foot-cols { display: flex; gap: clamp(36px, 7vw, 104px); flex-wrap: wrap; }
.foot-cols div { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.foot-cols b { font-weight: 500; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.foot-cols a { color: var(--ink-2); }
@media (hover: hover) { .foot-cols a:hover { color: var(--brand); } }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; font-size: 13px; color: var(--muted); background: linear-gradient(var(--line), var(--line)) no-repeat top / calc(100% - 2 * var(--gutter)) 1px; }
.foot-pay { display: inline-flex; align-items: center; gap: 6px; }
.foot-pay svg.lucide { width: 16px; height: 16px; color: var(--green); }

/* ── Closing call to action on other pages ───────────────────────────── */
.closer { padding: clamp(72px, 9vw, 128px) 0; text-align: center; }
.closer h2 { font-size: clamp(36px, 5.4vw, 76px); font-weight: 500; letter-spacing: -.05em; line-height: 1.04; margin: 0 auto; }
.closer p { margin: 22px auto 0; max-width: 460px; font-size: 17px; color: var(--muted); }
.closer .cta-row { margin-top: 36px; }
.closer + .foot { border-top: 0; padding-top: 0; }

/* ── Pricing page ────────────────────────────────────────────────────── */
.lockup { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 16px 0 8px; border-radius: 18px; background: var(--brand-soft); font-size: 14px; color: var(--brand-ink); }
.head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }
.head.center { align-items: center; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.head h2 { font-size: clamp(30px, 3.4vw, 48px); font-weight: 400; letter-spacing: -.035em; }
.head p { font-size: 16.5px; color: var(--muted); }
.sec-canvas { background: var(--band); }
.sec:not(.sec-canvas) + .sec:not(.sec-canvas) { padding-top: 0; }
.pr-head { padding: clamp(48px, 7vw, 88px) 0 48px; }
.pr-head-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pr-head h1 { margin-top: 24px; font-size: clamp(36px, 5vw, 64px); font-weight: 400; letter-spacing: -.045em; line-height: 1.06; }
.pr-head p { margin-top: 18px; max-width: 640px; font-size: 17px; color: var(--muted); }
.pay { list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pay li { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 18px; background: #f3f4f5; font-size: 14px; color: var(--ink-2); }
.pay svg.lucide { width: 16px; height: 16px; color: var(--brand); }
.pr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; padding-top: 12px; }
.pc { padding: 28px; border-radius: 16px; background: #fff; border: 1px solid var(--node); transition: box-shadow .2s, transform .2s var(--ease); }
.pc.pop { border: 1.5px solid var(--ink); }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-top h2, .pc-top h3 { font-size: 22px; font-weight: 500; }
.pc-pitch { margin-top: 4px; color: var(--muted); font-size: 14.5px; }
.pc-price { margin: 24px 0 22px; font-size: 48px; font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.pc-price small { display: block; margin-top: 8px; font-size: 13.5px; letter-spacing: 0; color: var(--muted); }
.pc-price .was-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pc-price .was { font-size: 20px; }
.pc-list { list-style: none; padding: 22px 0 0; margin: 24px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 13px; font-size: 14.5px; }
.pc-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.pc-list li.off { color: var(--faint); }
.pc-list b { font-weight: 600; color: var(--ink); }
.pr-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 28px; margin-bottom: clamp(56px, 6vw, 88px); }
.topups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 880px; margin: 0 auto; }
.topup { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--node); transition: box-shadow .2s, transform .2s var(--ease); }
.tu-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.topup h3 { font-size: 17px; }
.topup p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.tu-price { margin-left: auto; font-size: 22px; font-weight: 500; white-space: nowrap; }
.cmp { max-width: 1040px; margin: 0 auto; background: #fff; border-radius: 24px; padding: 8px 28px 20px; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; }
.cmp-head { position: sticky; top: 72px; z-index: 5; padding: 18px 0; background: #fff; border-bottom: 1px solid var(--line); }
.cmp-head span { display: flex; flex-direction: column; }
.cmp-head b { font-size: 17px; font-weight: 500; }
.cmp-head small { font-size: 13px; color: var(--muted); }
.cmp-head .pop b { color: var(--brand); }
.cmp-head .was { font-size: 12.5px; }
.cmp-gh { padding: 30px 0 8px; }
.cmp-gh span { font-size: 15px; font-weight: 500; color: var(--brand); }
.cmp-row { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cmp-group:last-child .cmp-row:last-child { border-bottom: 0; }
.cmp-row > span:first-child { color: var(--ink-2); }
.cmp-row > span:not(:first-child) { font-weight: 500; display: flex; align-items: center; }

/* ── Account pages ───────────────────────────────────────────────────── */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100vh; min-height: 100dvh; background: #fff; }
.auth-main { display: flex; flex-direction: column; padding: 24px clamp(20px, 4vw, 48px) 24px; }
.auth-top { height: 48px; display: flex; align-items: center; }
.auth-box { width: 100%; max-width: 420px; margin: auto; padding: 40px 0; display: flex; flex-direction: column; gap: 18px; }
.auth-head { text-align: center; margin-bottom: 8px; }
.auth-head h1 { font-size: clamp(28px, 2.6vw, 34px); font-weight: 400; letter-spacing: -.035em; line-height: 1.2; }
.auth-sub { margin-top: 12px; color: var(--ink-2); font-size: 15px; }
.auth-sub b { color: var(--ink); font-weight: 500; }
.auth .btn { border-radius: 10px; }
.auth-alt { display: flex; flex-direction: column; gap: 18px; }
.auth-or { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13.5px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-form .btn { margin-top: 2px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-2); }
.field-link { font-size: 13.5px; color: var(--brand); }
@media (hover: hover) { .field-link:hover { text-decoration: underline; text-underline-offset: 2px; } }
.field input { height: 48px; width: 100%; padding: 0 14px; border-radius: 10px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15.5px; outline: none; transition: box-shadow .15s; }
.field input::placeholder { color: #a6a8b6; }
@media (hover: hover) { .field input:hover { box-shadow: inset 0 0 0 1px #9295a8; } }
.field input:focus { box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px rgba(97, 97, 255, .12); }
.field input.invalid { box-shadow: inset 0 0 0 2px var(--red); }
.field-err { font-size: 13.5px; color: var(--red); }
.field-err:empty { display: none; }
.field-hint { font-size: 13px; color: var(--muted); }
.pw { position: relative; display: block; }
.pw input { padding-right: 52px; }
.pw-toggle { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
@media (hover: hover) { .pw-toggle:hover { background: var(--band); } }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.pw-meter i { height: 4px; border-radius: 2px; background: var(--line); transition: background .2s; }
.pw-meter[data-level="1"] i:nth-child(-n+1) { background: #e2445c; }
.pw-meter[data-level="2"] i:nth-child(-n+2) { background: #fdab3d; }
.pw-meter[data-level="3"] i:nth-child(-n+3) { background: var(--done); }
.pw-meter[data-level="4"] i { background: var(--green); }
.auth-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--red-soft); color: #8f1d2c; font-size: 14px; }
.auth-alert svg.lucide { width: 18px; height: 18px; margin-top: 2px; }
.auth-fine { font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.5; }
.auth-sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.auth-sent h2 { font-size: 28px; font-weight: 400; letter-spacing: -.03em; }
.auth-sent p { color: var(--ink-2); font-size: 15px; }
.auth-sent p.muted { color: var(--muted); font-size: 14px; }
.sent-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; margin-bottom: 4px; }
.sent-ico svg.lucide { width: 24px; height: 24px; }
.linkish { color: var(--brand); }
@media (hover: hover) { .linkish:hover { text-decoration: underline; text-underline-offset: 2px; } }
.linkish[disabled] { color: var(--muted); cursor: default; text-decoration: none; }
.auth-switch { font-size: 14px; color: var(--ink-2); text-align: center; }
.auth-switch a { color: var(--brand); margin-left: 2px; }
@media (hover: hover) { .auth-switch a:hover { text-decoration: underline; text-underline-offset: 2px; } }

/* Sign-up in two steps: email first, then name and password. */
.auth-page:not([data-step="2"]) [data-step-only="2"], .auth-page[data-step="2"] [data-step-only="1"] { display: none !important; }
/* Step two keeps the email field in the form (for password managers) but out of sight. */
.auth-page[data-step="2"] .step-email { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.auth-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--band); }
.who-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand); flex: none; }
.who-av svg.lucide { width: 17px; height: 17px; }
.who-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.who-txt small { font-size: 12px; color: var(--muted); }
.who-txt b { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-who .linkish { font-size: 14px; padding: 6px 8px; }
.auth-page[data-step="2"] .auth-box > * { animation: rise .4s var(--ease) both; }

/* The art panel: a soft lavender card with the product film playing in it. */
.auth-art { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 16px 16px 16px 0; }
.art { position: relative; height: 100%; display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); border-radius: 28px;
  background: radial-gradient(60% 50% at 88% 6%, rgba(255, 207, 240, .95) 0, transparent 70%),
              radial-gradient(55% 45% at 6% 96%, rgba(196, 228, 255, .9) 0, transparent 70%),
              linear-gradient(160deg, #f3f0ff 0%, #e6e1ff 52%, #efe3ff 100%); }
.art { align-content: center; gap: 28px; }
.art .film { max-width: 780px; }
.art-cap { text-align: center; font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -.03em; line-height: 1.25; color: var(--ink); }
.art-cap span { color: var(--brand); }
.art .fm-steps li.on { background: #fff; }

/* ── Error pages ─────────────────────────────────────────────────────── */
.err { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #fff; }
.err .hero-sky { display: none; }
.err-top { padding: 20px 28px; }
.err-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 24px 48px; }
.err-doodle { width: 300px; max-width: 80vw; height: auto; margin-bottom: 18px; }
.err-code { display: inline-flex; height: 30px; padding: 0 14px; align-items: center; border-radius: 15px; background: var(--brand-soft); font-size: 13px; color: var(--brand-ink); margin-bottom: 18px; }
.err h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 400; letter-spacing: -.04em; max-width: 680px; }
.err-main p { margin-top: 14px; color: var(--muted); font-size: 17px; max-width: 480px; }
.err-cta { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.err-foot { text-align: center; padding: 20px; font-size: 13px; color: var(--faint); }

/* ── Hover ───────────────────────────────────────────────────────────── */
@media (hover: hover) {
  .topup:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .ctx-stage { height: 760px; }
  .c-toc { left: 27%; top: 0; }
  .c-style { top: 21%; }
  .c-eq { top: 52%; }
}
@media (max-width: 1080px) {
  .nav-links, .nav-login { display: none; }
  .nav-menu { display: grid; }
  .nav-in { justify-content: space-between; }
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 640px; }
  .hero-art { max-width: 760px; width: 100%; }
  .panel { grid-template-columns: minmax(0, 1fr); padding: 32px 16px 16px; }
  .panel-copy { max-width: 600px; padding: 0 12px; }
  .ctx-head, .split-head, .band-head { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-head p { justify-self: start; }
  .ctx-stage { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ctx-stage > * { position: static; width: auto !important; translate: none; }
  .ctx-doodle { grid-column: 1 / -1; justify-self: center; width: 340px; max-width: 80%; order: -1; }
  .grid6 { grid-template-columns: 1fr 1fr; }
  .vs { grid-template-columns: minmax(0, 1fr); }
  .pr-cards { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
  .topups { grid-template-columns: 1fr; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
}
@media (max-width: 720px) {
  .nav-cta > .btn { display: none; }
  .nav-in { height: 62px; }
  .hero { padding-top: 24px; }
  .hero h1 { font-size: 38px; }
  .hero .cta-row .btn { width: 100%; }
  .fine { font-size: 13px; gap: 12px; }
  .hero-art { padding: 34px 0 64px; }
  .sheet { padding: 18px 18px; }
  .agent { padding: 6px 8px 6px 6px; gap: 8px; border-radius: 12px; }
  .agent-av { width: 34px; height: 34px; border-radius: 8px; }
  .agent-av .orb { --s: 22px !important; }
  .agent-txt b { font-size: 13px; }
  .agent-txt small { font-size: 11px; max-width: 150px; }
  .pill-busy, .pill-done, .pill-ready { height: 26px; font-size: 12px; padding: 0 10px; }
  .tabs {
    margin-top: 24px; width: max-content; max-width: calc(100vw - 32px);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .tabs.at-end { -webkit-mask-image: none; mask-image: none; }
  .tabs button { height: 36px; padding: 0 12px; font-size: 13.5px; flex: none; }
  .tabs .tab-long { display: none; }
  .tabs .tab-short { display: inline; }
  .panel { border-radius: 20px; padding: 24px 10px 10px; min-height: 0; }
  .panel-report { padding: 0; }
  .win-bar { height: 26px; padding: 0 10px; gap: 5px; }
  .win-bar span { width: 8px; height: 8px; }
  .win-bar em { font-size: 11px; margin-left: 6px; }
  .flow-lede .inl-crests img { width: 34px; height: 34px; }
  .flow-lede .inl-word { width: 34px; height: 38px; font-size: 18px; }
  .ctx-stage { grid-template-columns: minmax(0, 1fr); }
  .m-chart svg { max-height: 130px; }
  .grid6 { grid-template-columns: 1fr; gap: 36px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile-vis { height: 170px; }
  .vs li { font-size: 14.5px; }
  .faq summary { font-size: 16px; padding: 18px 2px; }
  .faq details p { padding-right: 8px; }
  .ticker-track { font-size: 52px; }
  .finale .cta-row .btn { width: 100%; }
  .closer h2 { font-size: 34px; }
  .closer .cta-row .btn { width: 100%; }
  .foot { padding: 44px 0 24px; }
  .foot-cols { gap: 28px 40px; }
  .foot-base { margin-top: 32px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .pr-head { padding: 32px 0 28px; }
  .pay li { height: 32px; padding: 0 12px; font-size: 13px; }
  .pc { padding: 24px 22px; }
  .cmp { padding: 4px 14px 14px; border-radius: 20px; }
  .cmp-head, .cmp-row { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .7fr)); gap: 8px; font-size: 13px; }
  .cmp-head b { font-size: 14.5px; }
  .auth-main { padding: 16px 20px 20px; }
  .auth-box { padding: 28px 0; }
}
/* Comfortable tap targets on touch screens. */
@media (max-width: 1080px), (pointer: coarse) {
  .foot-cols a { display: inline-flex; align-items: center; min-height: 40px; }
  .foot-cols div { gap: 0; }
  .field-link { display: inline-flex; align-items: center; min-height: 40px; margin: -9px 0; }
  .auth-switch a { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* Product tabs that advance as you scroll (static/js/site.js) */
.tabs-run.pinned { height: calc(6 * 62vh + 700px); }
.tabs-run.pinned .tabs-pin { position: sticky; top: 96px; }
.tabs-run.pinned .panels { margin-top: 24px; }
.tabs-run.pinned .panel { height: min(600px, calc(100vh - 210px)); min-height: 0; }
.tabs-run.pinned .panel-report { overflow: hidden; padding: 16px; }
.tabs-run.pinned .or-demo { zoom: .84; }
.tabs button { flex: none; }
.tabs-run:not(.pinned) .panels { overflow-x: clip; touch-action: pan-y pinch-zoom; }
/* Not pinned (phones, tablets, short screens): the results demo shows its
   top part and fades out, so the panel stays about one screen tall. */
.tabs-run:not(.pinned) .panel-report { max-height: 480px; overflow: hidden; align-items: start; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }

/* ═════════ The product film (templates/site/_mocks.html, static/js/film.js) ═════════
   Drawn on a fixed 720 × 460 stage and scaled to fit, so every frame lines up.
   The app inside uses the editor's font and colours; the narrating agent
   cards and pointer sit on top in the site's style. */
.film { position: relative; width: 100%; --e-ink: #1f1f1f; --e-muted: #444746; --e-faint: #747775; --e-line: #e1e3e1; --e-line-2: #c4c7c5; --e-blue: #5b5bf0; --e-blue-soft: #e5e4ff; --e-blue-ink: #24218f; --e-toolbar: #edf2fa; --inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.film-box { position: relative; width: 100%; aspect-ratio: 720 / 460; }
.film-stage { position: absolute; left: 0; top: 0; width: 720px; height: 460px; transform-origin: 0 0; transform: scale(var(--k, 1)); font-family: var(--ui); color: var(--ink); }
.film-stage svg.lucide { width: 13px; height: 13px; }
.fm-app { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 14px; background: #f9fbfd; overflow: hidden; font-family: var(--inter); color: var(--e-ink); box-shadow: 0 2px 4px rgba(13, 14, 18, .04), 0 30px 70px -24px rgba(40, 36, 120, .35), 0 0 0 1px rgba(13, 14, 18, .07); transition: filter .5s, transform .6s var(--ease); }
.fm-bar { flex: none; height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 12px; }
.fm-doc svg { width: 22px; height: 22px; display: block; }
.fm-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-saved { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--e-muted); }
.fm-saved svg.lucide { width: 12px; height: 12px; }
.fm-ask { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 6px; border-radius: 13px; font-size: 10.5px; font-weight: 500; border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--ai-grad) border-box; }
.fm-export { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 10.5px; font-weight: 500; background: #e0deff; color: #1f1c80; transition: transform .15s, background .2s; }
.fm-export svg.lucide { width: 12px; height: 12px; }
.fm-export.press { transform: scale(.92); background: #d3d0ff; }
.fm-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 162px minmax(0, 1fr) 0px; gap: 0 8px; padding: 0 8px; transition: grid-template-columns .6s var(--ease); }
.film.side-on .fm-body { grid-template-columns: 162px minmax(0, 1fr) 236px; }
.fm-outline { display: flex; flex-direction: column; gap: 1px; padding: 9px 7px; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 0 0 1px var(--e-line); font-size: 10px; overflow: hidden; }
.fm-tabs { display: flex; gap: 3px; margin-bottom: 7px; }
.fm-tabs em { font-style: normal; font-size: 10px; padding: 3px 8px; border-radius: 10px; color: var(--e-muted); white-space: nowrap; }
.fm-tabs em.on { background: var(--e-blue-soft); color: var(--e-blue-ink); font-weight: 600; }
.fm-tabs b { font-weight: 600; padding: 0 4px; border-radius: 6px; background: var(--e-toolbar); transition: background .3s; }
.fm-olh { font-weight: 600; padding: 6px 6px 2px; }
.fm-ol { position: relative; padding: 4px 6px 4px 17px; border-radius: 7px; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .3s, color .3s, opacity .3s, translate .35s var(--ease); }
.fm-ol::before { content: ''; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #c4c7c5; transition: background .3s; }
.fm-ol.now { background: var(--e-blue-soft); color: var(--e-blue-ink); font-weight: 500; }
.fm-ol.now::before { background: var(--e-blue); animation: ping 1.4s ease-out infinite; }
.fm-ol.done::before { background: #1e8e3e; }
.film.build .fm-ol { opacity: 0; translate: -8px 0; }
.film.build .fm-ol.in { opacity: 1; translate: 0 0; }
.fm-canvas { display: flex; justify-content: center; overflow: hidden; }
.fm-sheet { width: 100%; padding: 22px 28px; background: #fff; box-shadow: 0 0 0 1px var(--e-line), 0 1px 3px rgba(60, 64, 67, .12); font-family: var(--paper); color: #202124; transition: padding .6s var(--ease); }
.film.side-on .fm-sheet { padding: 20px 20px; }
.fm-ch { text-align: center; font-weight: 700; font-size: 11px; line-height: 1.5; margin-bottom: 10px; }
.fm-h { position: relative; font-weight: 700; font-size: 10.5px; line-height: 22px; margin-top: 6px; }
.fm-write { position: absolute; right: -4px; top: 50%; translate: 0 -50%; white-space: nowrap; height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 11px; font-family: var(--inter); font-weight: 500; font-size: 9.5px; color: var(--e-ink); border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--ai-grad) border-box; box-shadow: 0 2px 8px -2px rgba(123, 92, 255, .4); opacity: 0; scale: .85; transition: opacity .2s, scale .25s var(--ease); }
.film.hover .fm-write { opacity: 1; scale: 1; }
.fm-write.press { scale: .9 !important; }
.fm-ph { font-family: var(--inter); font-style: italic; font-size: 9px; color: #9aa0a6; margin: 1px 0 6px; }
.fm-p { font-size: 10px; line-height: 1.75; text-align: justify; margin-bottom: 4px; }
.fm-p:empty { display: none; }
.fm-p .w { animation: wordIn .3s ease both; }
.fm-p .cite { background: #ecebff; border-radius: 2px; padding: 0 1px; animation: citeIn .7s ease; }
@keyframes wordIn { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
@keyframes citeIn { 0% { background: #c9c6ff; } 100% { background: #ecebff; } }
.fm-ghost i { display: block; height: 7px; margin: 9px 0; border-radius: 4px; background: #eceef3; }
.fm-ghost i:last-child { width: 55%; }
/* The agent panel */
.fm-side { min-width: 0; overflow: hidden; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 0 0 1px var(--e-line); }
.fm-side-in { width: 236px; height: 100%; padding: 10px; }
.fm-side-h { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--e-line); }
.fm-side-h span { display: flex; flex-direction: column; line-height: 1.25; }
.fm-side-h b { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.fm-side-h b em { font-style: normal; font-size: 7.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; padding: 1px 5px; border-radius: 6px; background: var(--ai-grad); }
.fm-side-h small { font-size: 9px; color: var(--e-faint); }
.fm-q { display: flex; align-items: center; gap: 4px; font-size: 10px; margin-bottom: 7px; white-space: nowrap; overflow: hidden; }
.fm-q svg.lucide { width: 11px; height: 11px; color: #1e8e3e; flex: none; }
.fm-q b { font-weight: 600; }
.fm-q span { color: var(--e-muted); overflow: hidden; text-overflow: ellipsis; }
.fm-paper { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; margin-bottom: 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--e-line); opacity: 0; translate: 0 10px; transition: opacity .35s, translate .45s var(--ease); }
.fm-paper.in { opacity: 1; translate: 0 0; }
.fm-pc-top { display: flex; align-items: center; justify-content: space-between; }
.fm-yr { font-size: 8.5px; font-weight: 700; color: var(--ai-2); background: #f1edff; padding: 0 5px; border-radius: 6px; }
.fm-pc-top svg.lucide { width: 12px; height: 12px; color: #1e8e3e; opacity: 0; scale: .5; transition: opacity .25s .3s, scale .35s cubic-bezier(.3, 1.6, .5, 1) .3s; }
.fm-paper.in .fm-pc-top svg.lucide { opacity: 1; scale: 1; }
.fm-paper b { font-size: 9.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-paper small { font-size: 8.5px; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-acts { display: flex; gap: 3px; margin-top: 3px; }
.fm-mini { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 9px; border: 1px solid var(--e-line-2); font-size: 8.5px; }
.fm-mini svg.lucide { width: 10px; height: 10px; }
.fm-mini.p { background: var(--e-blue); border-color: var(--e-blue); color: #fff; font-weight: 600; }
/* The check, in the panel: compact copies of the editor's result cards */
.fm-checkv { display: none; flex-direction: column; gap: 7px; }
.film.side-check .fm-research { display: none; }
.film.side-check .fm-checkv { display: flex; animation: rise .4s var(--ease) both; }
.fm-ck-t { display: flex; align-items: baseline; justify-content: space-between; font-size: 11.5px; font-weight: 600; }
.fm-ck-t small { font-size: 9px; font-weight: 400; color: var(--e-faint); }
.fm-ck { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--e-line), 0 1px 2px rgba(60, 64, 67, .06); }
.fm-ck-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fm-ck-h b { font-size: 9.5px; font-weight: 600; color: var(--e-muted); }
.fm-ck-h em { font-style: normal; display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 6px 0 4px; border-radius: 9px; background: #e7f6e7; font-size: 8.5px; font-weight: 600; white-space: nowrap; }
.fm-ck-h em svg.lucide { width: 10px; height: 10px; color: #0ca30c; }
.fm-ck-n { display: flex; align-items: baseline; gap: 2px; }
.fm-ck-n b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fm-ck-n small { font-size: 14px; font-weight: 600; color: var(--e-muted); margin-right: 6px; }
.fm-ck-n span { font-size: 8.5px; color: var(--e-muted); line-height: 1.3; max-width: 92px; }
.fm-ck-bar { display: flex; gap: 2px; height: 8px; border-radius: 3px; overflow: hidden; transform-origin: left; }
.film.side-check .fm-ck-bar { animation: growX 1s var(--ease) .3s both; }
@keyframes growX { from { transform: scaleX(0); } to { transform: none; } }
.fm-ck-k { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 6px; font-size: 9px; color: var(--e-muted); }
.fm-ck-k i { width: 8px; height: 8px; border-radius: 2px; }
.fm-ck-k b { font-weight: 600; color: var(--e-ink); }
/* Intro: three cards over a blurred editor */
.fm-intro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; pointer-events: none; opacity: 0; transition: opacity .4s; }
.film.intro .fm-intro { opacity: 1; }
.film.intro .fm-app { filter: blur(5px) saturate(.8); transform: scale(.97); }
.fm-card { display: flex; flex-direction: column; border-radius: 16px; background: #fff; box-shadow: 0 2px 4px rgba(13, 14, 18, .05), 0 22px 50px -18px rgba(40, 36, 120, .35), 0 0 0 1px rgba(13, 14, 18, .05); opacity: 0; translate: 0 18px; transition: opacity .45s var(--ease), translate .55s var(--ease), scale .45s var(--ease); }
.film.intro .fm-card { opacity: 1; translate: 0 0; }
.film.intro .fm-c1 { transition-delay: .1s; } .film.intro .fm-c3 { transition-delay: .2s; }
.film.leave .fm-card { opacity: 0; scale: .9; translate: 0 -10px; transition-delay: 0s !important; }
/* The live title page, as in the setup wizard */
.fm-c1 { width: 168px; height: 236px; padding: 8px; gap: 6px; align-items: center; }
.fm-tp-wrap { flex: 1; width: 100%; display: grid; place-items: center; border-radius: 10px; background: #f4f2ff url('/static/images/preview-pixels-1.png') center / cover; }
.fm-tp { width: 112px; height: 160px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; text-align: center; background: #fff; box-shadow: 0 2px 8px rgba(60, 64, 67, .22); font-family: var(--paper); color: #202124; }
.fm-tp > b { font-size: 5.6px; line-height: 1.4; min-height: 16px; }
.fm-tp small { font-size: 4.6px; line-height: 1.45; }
.fm-tp small b { font-weight: 700; }
.fm-tp-logo { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.fm-tp-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 40px; height: 40px; border: 1px dashed var(--e-line-2); border-radius: 4px; font-family: var(--inter); font-size: 4.5px; color: var(--e-faint); transition: opacity .25s; }
.fm-tp-add svg.lucide { width: 10px; height: 10px; color: #a5a2ff; }
.fm-tp-logo img { position: absolute; inset: 0; width: 40px; height: 40px; object-fit: contain; opacity: 0; scale: .5; transition: opacity .35s, scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.film.logo .fm-tp-add { opacity: 0; }
.film.logo .fm-tp-logo img { opacity: 1; scale: 1; }
.fm-c1-l { font-family: var(--inter); font-size: 9px; color: var(--e-faint); }
.fm-c1-l b { color: var(--e-muted); font-weight: 600; }
/* New report */
.fm-c2 { width: 280px; padding: 16px; gap: 5px; scale: 1.04; font-family: var(--inter); }
.film.leave .fm-c2 { scale: .9; }
.fm-c2-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--ui); }
.fm-c2-h b { font-size: 15px; font-weight: 600; }
.fm-c2 label { font-size: 9.5px; font-weight: 600; color: var(--e-ink); margin-top: 3px; }
.fm-input { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 6px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--e-line-2); font-size: 11px; line-height: 1.35; transition: box-shadow .2s; }
.fm-input.sm { min-height: 28px; }
.fm-input.focus { box-shadow: inset 0 0 0 2px var(--e-blue); }
.fm-input svg.lucide { width: 12px; height: 12px; color: var(--e-muted); }
.fm-caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 1px; background: var(--e-ink); animation: blink 1s steps(1) infinite; }
.fm-found { display: inline-flex; align-items: center; gap: 4px; min-height: 14px; font-size: 9px; color: #146c2e; opacity: 0; transition: opacity .3s; }
.fm-found svg.lucide { width: 11px; height: 11px; }
.film.logo .fm-found { opacity: 1; }
.fm-create { align-self: flex-end; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 15px; background: var(--e-blue); color: #fff; font-size: 11px; font-weight: 500; transition: transform .15s; }
.fm-create svg.lucide { width: 13px; height: 13px; }
.fm-create.press { transform: scale(.92); }
/* Citation style */
.fm-c3 { width: 150px; height: 236px; padding: 16px; gap: 6px; align-items: flex-start; }
.fm-style { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--band); font-size: 11px; color: var(--ink-2); }
.fm-style.on { background: var(--brand); color: #fff; padding-left: 7px; }
.fm-style svg.lucide { width: 12px; height: 12px; stroke-width: 3; }
.fm-c3 b { margin-top: auto; font-size: 13px; font-weight: 600; }
.fm-c3 small { font-size: 11px; color: var(--muted); }
/* The agent card that narrates each step */
.fm-agent { position: absolute; z-index: 5; left: 360px; top: 70px; display: flex; align-items: center; gap: 10px; padding: 7px 9px 7px 7px; border-radius: 12px; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--agent-border) border-box; box-shadow: 0 14px 34px -12px rgba(97, 97, 255, .5), 0 3px 10px rgba(13, 14, 18, .08); white-space: nowrap; opacity: 0; scale: .9; transition: opacity .35s, scale .4s var(--ease), left .7s var(--ease), top .7s var(--ease); }
.fm-agent.on { opacity: 1; scale: 1; }
.fm-av { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #ffe1f6, #e3e1ff); flex: none; }
.fm-av.ok { background: var(--green-soft); color: var(--green); }
.fm-av.ok svg { width: 20px; height: 20px; }
.fm-at b { font-size: 13.5px; font-weight: 400; }
.fm-pill { font-style: normal; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 7px; font-size: 12.5px; background-color: #e1dfff; color: var(--ink); background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); background-size: 250% 100%; animation: sheen 2s linear infinite; }
.fm-pill.done { background: var(--done); background-image: none; color: #fff; padding: 0 18px; animation: none; }
.fm-burst { position: absolute; right: 34px; top: 50%; width: 0; height: 0; }
.fm-burst i { position: absolute; width: 6px; height: 6px; border-radius: 2px; opacity: 0; }
.fm-burst i:nth-child(4n) { background: #ffcb00; } .fm-burst i:nth-child(4n+1) { background: var(--done); } .fm-burst i:nth-child(4n+2) { background: #ff7aa8; } .fm-burst i:nth-child(4n+3) { background: var(--brand); }
.fm-burst.pop i { animation: burst .85s ease-out forwards; }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(220deg); } }
.fm-file { position: absolute; z-index: 5; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 20px 44px -16px rgba(13, 14, 18, .4), 0 0 0 1px rgba(13, 14, 18, .06); translate: -50% 20px; opacity: 0; transition: opacity .35s, translate .5s var(--ease); }
.fm-file.on { opacity: 1; translate: -50% 0; }
.fm-file > span:not(.docx) { display: flex; flex-direction: column; line-height: 1.3; }
.fm-file b { font-size: 12.5px; font-weight: 500; }
.fm-file small { font-size: 11px; color: var(--muted); }
.fm-file > svg.lucide { width: 20px; height: 20px; color: var(--done); }
.fm-cursor { position: absolute; z-index: 6; left: 740px; top: 480px; width: 24px; height: 24px; fill: var(--brand); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 3px 6px rgba(97, 97, 255, .4)); transition: left .75s cubic-bezier(.45, .05, .25, 1), top .75s cubic-bezier(.45, .05, .25, 1), scale .15s; }
.fm-cursor.press { scale: .82; }
.film.fade .film-stage > * { opacity: 0 !important; transition: opacity .45s; }
/* Steps under the film */
.fm-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 18px 0 0; padding: 0; }
.fm-steps li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 15px; font-size: 12.5px; white-space: nowrap; color: var(--muted); transition: background .3s, color .3s; }
.fm-steps li i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #cfd2dc; transition: background .3s; }
.fm-steps li.done i { background: var(--done); }
.fm-steps li.on { background: var(--brand-soft); color: var(--brand-ink); }
.fm-steps li.on i { background: var(--brand); }
.art .fm-steps li.on { background: #fff; }
@media (max-width: 720px) {
  .fm-steps { gap: 2px; margin-top: 14px; }
  .fm-steps li { height: 26px; padding: 0 8px 0 7px; font-size: 11px; gap: 5px; }
}
@media (max-width: 380px) {
  .fm-steps li { height: 24px; padding: 0 6px; font-size: 10.5px; gap: 4px; }
  .fm-steps li i { width: 5px; height: 5px; }
}

/* Plans on the home page: the Pricing page's cards */
.plans-home { max-width: 1060px; margin: clamp(48px, 6vw, 64px) auto 0; padding-top: 0; }

/* ── Account pages: each one its own colour and scene ─────────────────── */
.art.art-signup {
  background: radial-gradient(60% 50% at 90% 4%, rgba(255, 196, 168, .9) 0, transparent 70%),
              radial-gradient(55% 45% at 4% 96%, rgba(255, 214, 232, .95) 0, transparent 70%),
              linear-gradient(160deg, #fff6ef 0%, #ffe9df 50%, #fff0f3 100%);
}
.art.art-signup .art-cap span { color: #d0522f; }
.art.art-login {
  background: radial-gradient(60% 50% at 90% 4%, rgba(176, 236, 214, .95) 0, transparent 70%),
              radial-gradient(55% 45% at 4% 96%, rgba(190, 220, 255, .95) 0, transparent 70%),
              linear-gradient(160deg, #effbf6 0%, #e2f4ee 50%, #e8f1ff 100%);
}
.art.art-login .art-cap span { color: #0f7a5b; }
.art.art-reset {
  background: radial-gradient(60% 50% at 90% 4%, rgba(255, 226, 158, .8) 0, transparent 70%),
              radial-gradient(55% 45% at 4% 96%, rgba(226, 220, 205, .9) 0, transparent 70%),
              linear-gradient(160deg, #fdfaf2 0%, #f6efdf 55%, #fbf6ea 100%);
}
.art.art-reset .art-cap span { color: #9a6a00; }
/* Sign up and log in: the editor itself, in a frame (templates/site/film_app.html) */
.art-signup, .art-login { padding-inline: clamp(20px, 2.6vw, 40px); }
.scene { position: relative; width: 100%; max-width: 820px; aspect-ratio: 1000 / 680; overflow: hidden; border-radius: calc(24px * var(--k, .6));
  background: rgba(255, 255, 255, .55); box-shadow: 0 2px 4px rgba(13, 14, 18, .04), 0 30px 70px -24px rgba(40, 36, 90, .32), 0 0 0 1px rgba(13, 14, 18, .06); }
.scene iframe { position: absolute; left: 0; top: 0; width: 1000px; height: 680px; border: 0; transform-origin: 0 0; transform: scale(var(--k, .6));
  pointer-events: none; opacity: 0; transition: opacity .5s; color-scheme: light; }
.scene.ready iframe { opacity: 1; }

/* ── The Plagiarism & AI check on its own (/check) ───────────────────── */
.ck-price { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ck-price b { font-size: clamp(34px, 4vw, 46px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.ck-price b small { margin-left: 4px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.ck-price span { font-size: 15px; color: var(--muted); }
.ck-hero .cta-row { margin-top: 22px; }
.ck-sec { padding-top: 24px; }
.ck-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.ck-get .display { margin-bottom: 22px; }
.ck-list { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 14px; }
.ck-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--muted); }
.ck-list li b { color: var(--ink); font-weight: 600; }
.ck-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ck-steps li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #f6f6f9; }
.ck-steps li > span { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; }
.ck-steps b { display: block; font-size: 15px; font-weight: 600; }
.ck-steps small { display: block; font-size: 13.5px; color: var(--muted); }
.ck-art .panel-report { padding: 0; }
@media (max-width: 900px) { .ck-grid { grid-template-columns: 1fr; } }
.or-demo .or-card-h > span:first-child { white-space: nowrap; }

/* A small second option under a panel's main button */
.panel-more { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 14px; font-size: 15px; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(91, 91, 240, .35); }
@media (hover: hover) { .panel-more:hover { text-decoration-color: currentColor; } }
.panel-more svg.lucide { width: 16px; height: 16px; transition: transform .2s; }
@media (hover: hover) { .panel-more:hover svg.lucide { transform: translateX(3px); } }

/* ── Diagrams tab: a prompt types itself, the diagram appears (static/js/diagram-demo.js) ── */
.dgd-stage {
  position: relative; aspect-ratio: 2160 / 1220; overflow: hidden;
  background: radial-gradient(circle, #d5d8e2 1px, transparent 1.2px) 0 0 / 16px 16px, #f5f6f9;
}
.dgd-canvas { position: absolute; inset: 44px 24px 74px; }
.dgd-canvas img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; animation: dgdIn .6s cubic-bezier(.2, .9, .3, 1.15) both; }
.dgd-canvas img.out { animation: dgdOut .35s ease both; }
@keyframes dgdIn { from { opacity: 0; transform: scale(.9) translateY(8px); } }
@keyframes dgdOut { to { opacity: 0; transform: scale(.97); } }
.dgd-kinds { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(13, 14, 18, .1); }
.dgd-kinds span { padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--faint); transition: background .3s, color .3s; white-space: nowrap; }
.dgd-kinds span.on { background: var(--brand); color: #fff; }
.dgd-ask {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(78%, 520px);
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; border-radius: 22px;
  background: #fff; box-shadow: 0 10px 28px -12px rgba(13, 14, 18, .3), 0 0 0 1px rgba(13, 14, 18, .06); font-size: 13.5px; color: var(--ink);
}
.dgd-plus { color: var(--faint); font-size: 18px; line-height: 1; }
.dgd-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgd-caret { width: 1.5px; height: 17px; background: var(--brand); animation: dgdBlink 1s steps(1) infinite; }
@keyframes dgdBlink { 50% { opacity: 0; } }
.dgd-send { margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(100deg, #4f7cff, #7b5cff 45%, #e85bd0); }
.dgd-send svg { width: 16px; height: 16px; stroke-width: 2.4; }
/* "Drawing…": the composer's border flows and the canvas shimmers */
.dg-demo.drawing .dgd-ask { box-shadow: 0 10px 28px -12px rgba(123, 92, 255, .5), 0 0 0 2px rgba(123, 92, 255, .55); }
.dg-demo.drawing .dgd-canvas::after {
  content: ''; position: absolute; inset: 20% 28%; border-radius: 16px;
  background: linear-gradient(100deg, rgba(123, 92, 255, 0) 20%, rgba(123, 92, 255, .16) 50%, rgba(123, 92, 255, 0) 80%) 0 0 / 200% 100%;
  animation: dgdShimmer .9s linear infinite;
}
@keyframes dgdShimmer { to { background-position: -200% 0; } }
@media (max-width: 720px) {
  .dgd-canvas { inset: 36px 10px 56px; }
  .dgd-kinds span { padding: 3px 8px; font-size: 10px; }
  .dgd-ask { height: 36px; font-size: 11.5px; bottom: 10px; width: 88%; }
  .dgd-send { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .dgd-caret, .dgd-canvas img { animation: none; } }


/* The outline tile: a suggested section in a planned outline. */
.bt-ol { gap: 8px !important; font-size: 14px; }
.bt-ol span { display: flex; align-items: center; gap: 12px; width: 100%; }
.bt-ol em { flex: none; width: 28px; font-style: normal; }
.bt-ol .new { margin: 0 -8px; padding: 4px 8px; width: calc(100% + 16px); border-radius: 6px; background: var(--brand-soft); }
.bt-ol .new i { margin-left: auto; font: 600 11px/1 var(--ui); font-style: normal; color: var(--brand); }
.bt-ol .why { justify-content: space-between; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); font: 12.5px/1.4 var(--ui); color: var(--muted); }
.bt-ol .why b { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 11px; border-radius: 13px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; }
.bt-ol .why svg { width: 13px; height: 13px; }