/* ============================================================
   PAAVYA MARKETING SITE — shared chrome and pages
   Every marketing page loads this file: tokens, the nav, buttons,
   the footer, page heads, the article reader, and the parallax
   utility. Pages add their own sheet only for what is theirs
   (home.css for the homepage's product views).
   Rules in docs/marketing-site.md. The nav and footer markup is
   written by tools/build-site.mjs; never edit it by hand.
   ============================================================ */

:root {
  /* Marketing ink and surfaces (DESIGN.md, the marketing surface; D-619's
     light theme: a cool off-white canvas, white surfaces, near-black ink). */
  --h-ink: #15181C;
  --h-ink-2: #3B4149;
  --h-muted: #5A6474;          /* 5.7:1 on the canvas */
  --h-line: #E2E5EA;
  --h-line-soft: #EBEEF2;
  --h-canvas: #F6F7F9;         /* cool off-white */
  --h-well: #EEF1F5;
  --h-surface: #FFFFFF;        /* a control or card drawn on the canvas */
  --h-raised: #FFFFFF;         /* the chosen half of a segmented control */
  --h-nav: rgba(255, 255, 255, .74);  /* the floating nav's translucent pills */
  --h-deep: #072826;
  --h-brand: #00645D;          /* teal as text, an edge or a mark */
  --h-fill: #00645D;           /* teal as a fill under white text: teal-700 in both themes */
  --h-fill-hover: #004B45;
  --h-haze: #CAD8D7;           /* body on --h-deep */
  --h-tint: #E9FFFE;
  --h-tint-line: #BDEDEA;
  --h-error: #B42318;
  --h-strike: rgba(90, 100, 116, .45);
  --h-logo-ink: block;         /* which wordmark file the theme shows */
  --h-logo-white: none;
  /* The particle ribbon (ambient.js): two tones and a brightness, read off
     the canvas. Cool blue-gray and a warm neutral, nothing else. */
  --pt-cool: #6F879F;
  --pt-warm: #B09B80;
  --pt-alpha: 1;
  /* A drawn cover's colors (tools/build-site.mjs's cover()), by role */
  --cv-paper: #FFFFFF; --cv-edge: #C9D3DC; --cv-rule: #E1E6EC; --cv-ink: #14181D;
  --cv-tint: #E9FFFE; --cv-well: #F8FAFC;

  /* Motion: one ease for arrivals, one for travel, two durations. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --dur-ctl: 200ms;            /* a control's hover, press or open */
  --dur-in: 600ms;             /* a section's or a window's arrival */
  --shadow-win: 0 1px 2px rgba(20, 24, 29, .05), 0 30px 80px -30px rgba(20, 24, 29, .24);
  --shadow-nav: 0 1px 2px rgba(20, 24, 29, .04), 0 10px 30px -12px rgba(20, 24, 29, .16);
  --shadow-soft: 0 1px 2px rgba(20, 24, 29, .04), 0 8px 24px -16px rgba(20, 24, 29, .12);
  --radius-pill: 999px;
  --radius-win: 14px;
  --control: #C4C5C9;
  --h-scrim: rgba(7, 16, 15, .56);  /* behind the booking dialog, both themes */
  --gutter: 16px;
  --max: 1200px;
  color-scheme: light;
}

/* ── DARK (D-574) ─────────────────────────────────────────────────
   The visitor's system decides, exactly as the app decides for a reader
   who has not chosen (D-335): prefers-color-scheme, live. An explicit
   choice made in the app's Settings rides a paavya.com cookie into the
   inline head script, which writes data-theme on <html>; "light" opts out
   of the media query and "dark" opts in without it. The two blocks below
   are the same declarations; tests/marketing-theme.test.mjs holds them
   equal. The neutrals are the app's dark ramp (Linear's, D-485). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --h-ink: #F3F1EC; --h-ink-2: #D3CFC7; --h-muted: #9C9890;
    --h-line: #2A2C30; --h-line-soft: #222427;
    --h-canvas: #121314; --h-well: #171819; --h-surface: #1A1C1E; --h-raised: #26282B;
    --h-nav: rgba(26, 28, 30, .74);
    --h-brand: #59D3CE; --h-tint: #0E2E2C; --h-tint-line: #134440;
    --h-error: #F09AA2; --h-strike: rgba(158, 163, 171, .5);
    --h-logo-ink: none; --h-logo-white: block;
    --pt-cool: #93A8BF; --pt-warm: #C9B49A; --pt-alpha: .72;
    --shadow-win: 0 1px 2px rgba(0, 0, 0, .4), 0 30px 80px -30px rgba(0, 0, 0, .7);
    --shadow-nav: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -16px rgba(0, 0, 0, .5);
    --control: #6B6F76;
    --cv-paper: #1A1C1E; --cv-edge: #3E3E44; --cv-rule: #222427; --cv-ink: #D3CFC7;
    --cv-tint: #0E2E2C; --cv-well: #1D1E20;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --h-ink: #F3F1EC; --h-ink-2: #D3CFC7; --h-muted: #9C9890;
    --h-line: #2A2C30; --h-line-soft: #222427;
    --h-canvas: #121314; --h-well: #171819; --h-surface: #1A1C1E; --h-raised: #26282B;
    --h-nav: rgba(26, 28, 30, .74);
    --h-brand: #59D3CE; --h-tint: #0E2E2C; --h-tint-line: #134440;
    --h-error: #F09AA2; --h-strike: rgba(158, 163, 171, .5);
    --h-logo-ink: none; --h-logo-white: block;
    --pt-cool: #93A8BF; --pt-warm: #C9B49A; --pt-alpha: .72;
    --shadow-win: 0 1px 2px rgba(0, 0, 0, .4), 0 30px 80px -30px rgba(0, 0, 0, .7);
    --shadow-nav: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -16px rgba(0, 0, 0, .5);
    --control: #6B6F76;
    --cv-paper: #1A1C1E; --cv-edge: #3E3E44; --cv-rule: #222427; --cv-ink: #D3CFC7;
    --cv-tint: #0E2E2C; --cv-well: #1D1E20;
    color-scheme: dark;
}
/* A chosen theme crosses over in color only (theme.js adds the class for
   the length of the transition); no box moves. */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, fill 320ms ease, stroke 320ms ease, box-shadow 320ms ease !important;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; padding: 0; background: var(--h-canvas); }
body {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--h-ink-2);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--h-ink); font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--h-brand); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--h-deep); color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 600; }
.skip:focus { top: 12px; }
.ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: 80px 0; }
@media (min-width: 900px) { .sec { padding: 128px 0; } }
.sec-flush { padding-top: 0; }
.h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; max-width: 18ch; }
.lede { margin-top: 18px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--h-muted); max-width: 58ch; }
.sec-head { margin-bottom: 48px; }
@media (min-width: 900px) { .sec-head { margin-bottom: 64px; } }

/* ── Buttons: pills on the site (D-619), the app's teal action fill ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); border: 1px solid transparent;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .005em; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-ctl) ease, color var(--dur-ctl) ease, border-color var(--dur-ctl) ease, box-shadow var(--dur-ctl) ease, transform 120ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-primary { background: var(--h-fill); border-color: var(--h-fill); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--h-fill-hover); border-color: var(--h-fill-hover); }
.btn-ghost { background: var(--h-surface); color: var(--h-ink); border-color: var(--h-line); box-shadow: var(--shadow-soft); }
.btn-ghost:hover { border-color: var(--control); }
.btn-light { background: #fff; border-color: #fff; color: var(--h-deep); }
.btn-light:hover { background: var(--h-tint); border-color: var(--h-tint); }
.btn-line-light { color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-line-light:hover { border-color: #fff; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--h-brand); background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-arrow .ic { transition: transform 160ms var(--ease-out); }
.link-arrow:hover .ic { transform: translateX(3px); }
/* A link inside a sentence: exempt from the 44px floor (WCAG 2.5.8), so it
   is marked by its underline, not its size. */
.inline { color: var(--h-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ── Nav: floating (D-619) ──────────────────────────────────────
   Three pills over the page: the round brand mark at the left, the Menu
   pill in the center, the action at the right. Each is translucent over what
   scrolls under it; once the page has scrolled they take a little more
   shadow. The header itself paints nothing. */
.nav { position: sticky; top: 0; z-index: 50; padding: 12px 0 0; pointer-events: none; }
.nav-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 56px; }
.nav-in > * { pointer-events: auto; }
.nav-glass { background: var(--h-nav); border: 1px solid var(--h-line); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); transition: box-shadow var(--dur-in) ease, border-color var(--dur-ctl) ease, background-color var(--dur-ctl) ease; }
.nav.is-scrolled .nav-glass { box-shadow: var(--shadow-nav); }
.nav-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--h-ink); }
.nav-mark .mark { width: 22px; height: 22px; display: block; }
.mark .mk-brand { fill: var(--h-fill); }
.mark .mk-ink { fill: currentColor; }
/* Two wordmark files, one per ground: the theme shows one (as the app's rail does, D-438). */
img.logo-ink { display: var(--h-logo-ink) !important; }
img.logo-white { display: var(--h-logo-white) !important; }
.nav-end { grid-column: 3; display: flex; align-items: center; gap: 8px; }
.nav-signin { display: none; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--h-ink-2); border-radius: var(--radius-pill); transition: color var(--dur-ctl) ease, background-color var(--dur-ctl) ease; }
.nav-signin:hover { color: var(--h-ink); background: var(--h-well); }
/* Ask Scribble (scribble.js): the brain alone, a 44px disc on every width;
   its name is the aria-label and the tooltip. Hidden until the script
   runs, so without it there is no dead control. */
.nav-ask { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-pill); font: inherit; color: var(--h-ink-2); cursor: pointer; }
.nav-ask .brain { width: 20px; height: 20px; flex: none; color: var(--h-brand); }
.nav-ask:hover { color: var(--h-ink); background: var(--h-well); }
.nav .btn-primary { min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (min-width: 960px) { .nav-signin { display: inline-flex; } }
/* From 560px both sides have room for the pill to sit at the true center. */
@media (min-width: 560px) { .nav-in { grid-template-columns: 1fr auto 1fr; } .nav-mark { justify-self: start; } .nav-end { justify-self: end; } }

/* ── The Menu pill (D-636) ─────────────────────────────────────
   One pill in the center on every width. Pressed, a card grows out of
   it: the card starts as the pill's own capsule (menu.js measures it into
   --clip-from and --dy), widens and drops into place, and its rows settle
   in one after another. Closing plays it back faster. Without the script
   it is a plain <details>: the card shows and hides at once. Reduced
   motion: a short fade and nothing moves. */
.nav-menu { grid-column: 2; justify-self: center; }
.menu-btn { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 16px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; color: var(--h-ink); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn:hover { background: var(--h-surface); }
.menu-btn:active { transform: scale(.97); }
.menu-btn { transition: transform 120ms var(--ease-out), box-shadow var(--dur-in) ease, background-color var(--dur-ctl) ease; }
.menu-btn:focus-visible { border-radius: var(--radius-pill); }
@media (max-width: 359px) { .menu-btn { padding: 0 14px; } .menu-word { display: none; } }
/* A phone's header fits whatever face draws it. Measured with the fonts
   blocked, DejaVu Sans set "Book a demo" 141px wide and the header ran 14px
   past a 375px screen; a visitor whose web font does not load gets the same
   page. Tighter gaps, padding and a 14px label buy back 34px, every control
   stays 44px tall and the Menu word stays. */
@media (max-width: 420px) {
  .nav-in { gap: 8px; }
  .nav-end { gap: 6px; }
  .nav .btn-primary { padding: 0 12px; font-size: 14px; }
  .menu-btn { gap: 8px; padding: 0 14px 0 12px; font-size: 14px; }
}
.menu-ic { position: relative; width: 16px; height: 10px; flex: none; }
.menu-ic i { position: absolute; left: 0; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 320ms var(--ease-out), top 320ms var(--ease-out); }
.menu-ic i:first-child { top: 1px; }
.menu-ic i:last-child { top: 7px; }
.menu:not([data-anim])[open] .menu-ic i, .menu.is-open .menu-ic i { top: 4px; }
.menu:not([data-anim])[open] .menu-ic i:first-child, .menu.is-open .menu-ic i:first-child { transform: rotate(45deg); }
.menu:not([data-anim])[open] .menu-ic i:last-child, .menu.is-open .menu-ic i:last-child { transform: rotate(-45deg); }
.menu.is-open .menu-btn { background: var(--h-surface); }

.nav-in { position: relative; }
/* A shut menu lays out no card. Chromium keeps a closed <details>' content
   in the layout, so the card sat inside the pill at 71px wide with its footer
   past the card's edge. menu.js opens <details> before it measures and shuts
   it only after the close plays, so the motion never sees this. */
.menu:not([open]) .menu-panel { display: none; }
.menu-panel { position: absolute; z-index: 1; top: var(--menu-top, 66px); left: 50%; translate: -50% 0; width: min(600px, calc(100% - var(--gutter) * 2)); max-height: calc(100dvh - var(--menu-top, 66px) - 28px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; background: var(--h-surface); border: 1px solid var(--h-line); border-radius: 20px; box-shadow: var(--shadow-win); }
.menu-groups { display: grid; gap: 4px; }
@media (min-width: 600px) { .menu-groups { grid-template-columns: 1fr 1fr; gap: 0 10px; } .menu-group + .menu-group { border-left: 1px solid var(--h-line-soft); padding-left: 10px; } }
.menu-label { margin: 0; padding: 10px 14px 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--h-muted); }
.menu-group a { display: grid; gap: 2px; min-height: 56px; align-content: center; padding: 8px 14px; border-radius: 12px; color: var(--h-ink); transition: background-color var(--dur-ctl) ease; }
.menu-group a:hover { background: var(--h-well); }
.menu-t { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.menu-d { font-size: 14px; color: var(--h-muted); }
.menu-group a[aria-current] .menu-t { color: var(--h-brand); }
.menu-group a[aria-current] .menu-t::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--h-brand); }
.menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 8px 4px 0; border-top: 1px solid var(--h-line-soft); }
.menu-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); font-weight: 600; color: var(--h-ink); }
.menu-signin:hover { background: var(--h-well); }
.menu-foot .theme-row { display: flex; align-items: center; gap: 12px; margin-left: auto; padding: 0 10px; font-size: 14px; color: var(--h-muted); }
@media (min-width: 960px) { .menu-signin { display: none; } }

/* The motion, only once menu.js has taken the menu over (data-anim). */
.menu[data-anim] .menu-panel { opacity: 0; clip-path: var(--clip-from, inset(0 round 20px)); transform: translateY(var(--dy, -12px)); transition: clip-path 300ms var(--ease-move), transform 300ms var(--ease-move), opacity 120ms ease 180ms; }
.menu[data-anim].is-open .menu-panel { opacity: 1; clip-path: inset(0 round 20px); transform: none; transition: clip-path 620ms var(--ease-out), transform 620ms var(--ease-out), opacity 90ms ease; }
.menu[data-anim] .menu-label, .menu[data-anim] .menu-group a, .menu[data-anim] .menu-foot { opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity 120ms ease, transform 160ms ease, filter 120ms ease; }
.menu[data-anim].is-open .menu-label, .menu[data-anim].is-open .menu-group a, .menu[data-anim].is-open .menu-foot { opacity: 1; transform: none; filter: none; transition: opacity 380ms var(--ease-out) calc(160ms + var(--i, 0) * 40ms), transform 520ms var(--ease-out) calc(160ms + var(--i, 0) * 40ms), filter 380ms var(--ease-out) calc(160ms + var(--i, 0) * 40ms), background-color var(--dur-ctl) ease; }
@media (prefers-reduced-motion: reduce) {
  .menu-btn, .menu-btn:active, .menu-ic i { transition: none; transform: none; }
  .menu[data-anim] .menu-panel, .menu[data-anim].is-open .menu-panel { clip-path: none; transform: none; transition: opacity 150ms ease; }
  .menu[data-anim] .menu-label, .menu[data-anim] .menu-group a, .menu[data-anim] .menu-foot,
  .menu[data-anim].is-open .menu-label, .menu[data-anim].is-open .menu-group a, .menu[data-anim].is-open .menu-foot { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── The theme control: Light / Dark / System (theme.js) ───────── */
.theme-ctl { display: inline-flex; gap: 0; padding: 0; border-radius: var(--radius-pill); border: 1px solid var(--h-line); background: var(--h-surface); }
.theme-ctl button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--h-muted); cursor: pointer; transition: background-color var(--dur-ctl) ease, color var(--dur-ctl) ease; }
.theme-ctl button svg { width: 16px; height: 16px; display: block; }
.theme-ctl button:hover { color: var(--h-ink); }
.theme-ctl button[aria-checked="true"] { background: var(--h-well); color: var(--h-ink); }
.foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.foot-motion { min-height: 44px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--h-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.foot-motion:hover { color: var(--h-ink); }

/* ── The particle ribbon's canvas (ambient.js) ──────────────────
   Absolute behind its section, never fixed, and it takes no pointer. */
.ambient { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
.has-ambient { position: relative; isolation: isolate; }

/* ── Close ───────────────────────────────────────────────────── */
.close { text-align: center; padding: 96px 0; }
@media (min-width: 900px) { .close { padding: 128px 0; } }
.close .h2 { margin: 0 auto; }
.close .lede { margin-left: auto; margin-right: auto; }
.close .hero-note, .close .note { color: var(--h-haze); }
.close-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.note { margin-top: 18px; font-size: 15px; color: var(--h-muted); }

/* ── Footer ──────────────────────────────────────────────────── */
.foot-site { border-top: 1px solid var(--h-line); padding: 64px 0 40px; }
.foot-grid { display: grid; gap: 36px; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 1000px) { .foot-brand { grid-column: auto; } }
.foot-brand img { height: 30px; width: auto; margin-bottom: 14px; }
.foot-brand p { font-size: 15px; color: var(--h-muted); max-width: 300px; }
.foot-brand strong { display: block; margin-bottom: 4px; color: var(--h-ink); font-weight: 600; }
.foot-col h2 { font-size: 14px; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
.foot-col a { display: flex; align-items: center; min-height: 36px; font-size: 15px; color: var(--h-muted); }
.foot-col a:hover { color: var(--h-ink); }
.foot-col a[aria-current="page"] { color: var(--h-ink); font-weight: 600; }
.foot-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--h-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--h-muted); }
/* Gray band */
.band { background: var(--h-well); border-top: 1px solid var(--h-line-soft); border-bottom: 1px solid var(--h-line-soft); }

/* Dark band: the close and the homepage's trust section */
.dark { background: var(--h-deep); color: var(--h-haze); }
.dark h2, .dark h3 { color: #fff; }
.dark .lede { color: var(--h-haze); }

/* ── Page head: every page that is not the homepage opens on one ── */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--h-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--h-muted); text-decoration: underline; text-decoration-color: var(--h-line); text-underline-offset: 4px; }
.crumbs a:hover { color: var(--h-ink); }
.crumbs span[aria-hidden] { color: var(--control); }
.page-head { position: relative; isolation: isolate; padding: 40px 0 56px; }
@media (min-width: 900px) { .page-head { padding: 72px 0 88px; } }
.page-head .ambient { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent); }
.page-head-in { display: grid; gap: 28px; align-items: end; }
@media (min-width: 1000px) { .page-head-in { grid-template-columns: 1.35fr 1fr; gap: 72px; } }
.page-head h1 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -0.028em; max-width: 17ch; }
.page-head .lede { margin-top: 20px; }
.page-head-aside { color: var(--h-muted); font-size: 16px; border-top: 1px solid var(--h-line); padding-top: 18px; }
.page-head-aside p + p { margin-top: 10px; }
.page-head-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) { .page-head-ctas .btn { width: 100%; } }

/* Hairline rows: the site's list grammar (never a grid of icon cards) */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--h-line); }
.rows > li { display: grid; gap: 8px 48px; padding: 28px 0; border-bottom: 1px solid var(--h-line); }
@media (min-width: 900px) { .rows > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); padding: 36px 0; } }
.rows h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.25; }
.rows p { color: var(--h-muted); max-width: 60ch; }
.rows p + p { margin-top: 10px; }
.rows .link-arrow { margin-top: 6px; }
.two { display: grid; gap: 40px; }
.two > * { min-width: 0; }
@media (min-width: 1000px) { .two { grid-template-columns: 1fr 1.5fr; gap: 72px; } }
.checks-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.checks-list li { position: relative; padding-left: 26px; color: var(--h-ink-2); }
.checks-list li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 10px; height: 5px; border-left: 2px solid var(--h-brand); border-bottom: 2px solid var(--h-brand); transform: rotate(-45deg); }

/* ── Prose: legal pages and the article body ─────────────────── */
.prose { font-size: 18px; line-height: 1.7; color: var(--h-ink-2); max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; scroll-margin-top: 88px; }
.prose h3 { margin-top: 1.8em; font-size: 20px; line-height: 1.3; scroll-margin-top: 88px; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--h-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--h-ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--h-brand); }
.prose blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--h-line); color: var(--h-ink); font-size: 20px; line-height: 1.55; }
.prose code { font-size: .88em; background: var(--h-well); border: 1px solid var(--h-line-soft); padding: 1px 5px; border-radius: 4px; }
.prose hr { border: 0; border-top: 1px solid var(--h-line); margin: 2.4em 0; }
.prose .table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--h-line); }
.prose th { font-size: 14px; font-weight: 600; color: var(--h-muted); border-bottom-color: var(--h-ink-2); }
/* In Paavya: where the article's idea lives in the product */
.prose .in-product { margin-top: 1.8em; margin-bottom: 1.8em; padding: 20px 22px; border-radius: 12px; background: var(--h-tint); border: 1px solid var(--h-tint-line); font-size: 16.5px; line-height: 1.6; }
.in-product b { display: block; font-size: 14px; font-weight: 600; color: var(--h-brand); margin-bottom: 6px; }
.prose .in-product p + p { margin-top: .6em; }
.prose .in-product a { white-space: nowrap; }
.prose .note-box { padding: 16px 20px; border-radius: 12px; background: var(--h-well); border: 1px solid var(--h-line-soft); font-size: 16px; color: var(--h-muted); }

/* ── Blog index ──────────────────────────────────────────────── */
.topics-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.topics-nav::-webkit-scrollbar { display: none; }
.topic-link { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--h-line); font-size: 15px; font-weight: 600; color: var(--h-ink-2); background: var(--h-surface); }
.topic-link:hover { border-color: var(--control); color: var(--h-ink); }
.topic-link[aria-current="page"] { border-color: var(--h-brand); box-shadow: inset 0 0 0 1px var(--h-brand); color: var(--h-ink); }
.topic-link small { font-size: 13px; font-weight: 600; color: var(--h-muted); }
@media (min-width: 1000px) { .topics-nav { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }

.lead-post { display: grid; gap: 28px; align-items: center; }
.lead-post > * { min-width: 0; }
@media (min-width: 1000px) { .lead-post { grid-template-columns: 1.3fr 1fr; gap: 64px; } }
.lead-post h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; }
.lead-post h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lead-post .dek { margin-top: 16px; font-size: 18px; color: var(--h-muted); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--h-muted); }
.meta a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--h-brand); }
.meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--control); }

.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--h-line); }
.post { position: relative; display: grid; gap: 12px 40px; padding: 28px 0; border-bottom: 1px solid var(--h-line); }
.post > * { min-width: 0; }
@media (min-width: 900px) { .post { grid-template-columns: 180px minmax(0, 1fr) 220px; align-items: start; padding: 32px 0; } }
.post-when { font-size: 14px; color: var(--h-muted); }
.post-when .meta { margin-top: -10px; }
.post h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.25; }
.post h3 a::after { content: ""; position: absolute; inset: 0; }
.post:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.post p { margin-top: 8px; color: var(--h-muted); max-width: 62ch; }
.post .cover { display: none; }
@media (min-width: 900px) { .post .cover { display: block; } }
.post-topic { position: relative; z-index: 1; }

.topic-dir { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--h-line); }
.topic-dir li { border-bottom: 1px solid var(--h-line); }
.topic-dir a { display: grid; gap: 4px 32px; padding: 20px 0; }
@media (min-width: 900px) { .topic-dir a { grid-template-columns: 1fr 1.6fr auto; align-items: baseline; } }
.topic-dir b { font-size: 19px; font-weight: 600; color: var(--h-ink); }
.topic-dir span { color: var(--h-muted); }
.topic-dir em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--h-brand); }
.topic-dir a:hover b { text-decoration: underline; text-underline-offset: 4px; }

/* ── Covers: drawn per article, three layers that part on scroll ── */
.cover { position: relative; overflow: hidden; border-radius: 12px; background: var(--h-well); border: 1px solid var(--h-line-soft); aspect-ratio: 16 / 10; view-timeline: --cover; }
.cover svg { position: absolute; inset: -8% 0; width: 100%; height: 116%; display: block; }
.cover.t-dark { background: var(--h-deep); border-color: var(--h-deep); }
/* The generator writes each cover's colors as presentation attributes, and
   CSS outranks an attribute: so one cover is drawn and the theme repaints it
   by role (D-574). A color added to cover() needs a line here. */
.cover svg [fill="#fff"] { fill: var(--cv-paper); }
.cover svg [stroke="#C9D3DC"] { stroke: var(--cv-edge); }
.cover svg [stroke="#E1E6EC"] { stroke: var(--cv-rule); }
.cover svg [fill="#E1E6EC"] { fill: var(--cv-rule); }
.cover svg [stroke="#14181D"] { stroke: var(--cv-ink); }
.cover svg [fill="#14181D"] { fill: var(--cv-ink); }
.cover svg [fill="#14181D"][stroke="#fff"] { stroke: var(--cv-paper); }
.cover svg [fill="#E9FFFE"] { fill: var(--cv-tint); }
.cover svg [fill="#F8FAFC"] { fill: var(--cv-well); }
.cover-wide { aspect-ratio: 21 / 8; }
@media (max-width: 639px) { .cover-wide { aspect-ratio: 16 / 10; } }

/* ── Article ─────────────────────────────────────────────────── */
.article-head { padding: 32px 0 40px; }
@media (min-width: 900px) { .article-head { padding: 56px 0 56px; } }
.article-head h1 { margin-top: 12px; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.06; letter-spacing: -0.026em; max-width: 20ch; }
.article-head .dek { margin-top: 18px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--h-muted); max-width: 60ch; }
.article-head .meta { margin-top: 18px; }
.article-grid { display: grid; gap: 40px; padding: 56px 0 24px; }
.article-grid > * { min-width: 0; }
@media (min-width: 1100px) { .article-grid { grid-template-columns: 220px minmax(0, 68ch); gap: 80px; } }
.toc { font-size: 15px; }
.toc b { display: block; font-size: 14px; font-weight: 600; color: var(--h-muted); margin-bottom: 6px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--h-line); }
.toc a { display: flex; align-items: center; min-height: 40px; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--h-muted); line-height: 1.35; }
.toc a:hover { color: var(--h-ink); border-left-color: var(--control); }
@media (min-width: 1100px) { .toc nav { position: sticky; top: 96px; } }
@media (max-width: 1099px) { .toc { border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); padding: 16px 0; } }
.byline { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--h-line); font-size: 15px; color: var(--h-muted); max-width: 68ch; }
.sources { margin-top: 40px; font-size: 15px; color: var(--h-muted); max-width: 68ch; }
.sources h2 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.sources ol { padding-left: 1.3em; margin: 0; }
.sources li + li { margin-top: 6px; }
.sources a { color: var(--h-ink-2); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }

/* ── Industry pages ──────────────────────────────────────────── */
.fit { list-style: none; margin: 0; padding: 0; counter-reset: fit; border-top: 1px solid var(--h-line); }
.fit li { counter-increment: fit; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 24px 0; border-bottom: 1px solid var(--h-line); }
.fit li::before { content: counter(fit); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--h-tint); color: var(--h-brand); font-size: 14px; font-weight: 700; }
.fit li > * { grid-column: 2; }
.fit h3 { font-size: 19px; line-height: 1.3; }
.fit p { color: var(--h-muted); max-width: 60ch; }
.fit .link-arrow { margin-top: 2px; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-wrap { display: grid; gap: 32px; }
@media (min-width: 1000px) { .faq-wrap { grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: start; } }
.faq { border-top: 1px solid var(--h-line); }
.faq details { border-bottom: 1px solid var(--h-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; font-size: 18px; font-weight: 600; color: var(--h-ink); }
.faq summary::-webkit-details-marker { display: none; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.more .link-btn { margin-left: 16px; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--h-ink); border-bottom: 2px solid var(--h-ink); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-ctl) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > div { padding: 0 0 22px; color: var(--h-muted); font-size: 16.5px; max-width: 64ch; }
/* An answer opens by growing, where the browser can grow it (Chromium's
   ::details-content with interpolate-size); elsewhere it opens at once. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* ── Pricing ─────────────────────────────────────────────────── */
.billing { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 24px; }
.billing-note { font-size: 15px; color: var(--h-muted); }
.seg-toggle { display: inline-flex; padding: 3px; gap: 3px; border-radius: 8px; background: var(--h-well); border: 1px solid var(--h-line); }
.seg-toggle button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--h-muted); cursor: pointer; }
.seg-toggle button[aria-pressed="true"] { background: var(--h-raised); color: var(--h-ink); box-shadow: 0 1px 2px rgba(7, 40, 38, .1); }
.plans { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--h-line); border-radius: 12px; overflow: hidden; }
.plans > li { min-width: 0; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; background: var(--h-surface); }
.plan + .plan { border-top: 1px solid var(--h-line); }
@media (min-width: 900px) { .plan + .plan { border-top: 0; border-left: 1px solid var(--h-line); } }
.plan.is-lead { background: var(--h-tint); box-shadow: inset 0 3px 0 var(--h-brand); }
.plan h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.plan-tag { font-size: 13px; font-weight: 600; color: var(--h-brand); }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price span { font-size: clamp(40px, 4vw, 48px); font-weight: 600; letter-spacing: -0.025em; color: var(--h-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 16px; color: var(--h-muted); }
.plan-for { color: var(--h-muted); font-size: 16px; }
@media (min-width: 900px) { .plan-for { min-height: 4.8em; } }
.plan .checks-list { margin-top: 4px; font-size: 15.5px; }
.enterprise { margin-top: 16px; display: grid; gap: 16px; align-items: center; padding: 24px; border: 1px solid var(--h-line); border-radius: 12px; }
@media (min-width: 900px) { .enterprise { grid-template-columns: 1fr auto; gap: 48px; } }
.enterprise h3 { font-size: 20px; }
.enterprise p { margin-top: 6px; color: var(--h-muted); max-width: 70ch; }
.compare-table { overflow-x: auto; border-top: 1px solid var(--h-ink-2); }
.compare-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15.5px; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--h-line); }
.compare-table thead th { font-size: 14px; font-weight: 600; color: var(--h-muted); }
.compare-table tbody th { font-weight: 600; color: var(--h-ink); width: 30%; }
.compare-table td { color: var(--h-ink-2); }
.compare-table .grp th { padding-top: 28px; font-size: 14px; color: var(--h-brand); border-bottom-color: var(--h-ink-2); }

/* ── Forms (contact) ─────────────────────────────────────────── */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 15px; font-weight: 600; color: var(--h-ink); }
.field .hint { font-size: 14px; color: var(--h-muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; color: var(--h-ink); background: var(--h-surface); border: 1px solid var(--control); border-radius: 6px; min-height: 46px; padding: 10px 12px; width: 100%; }
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--h-brand); outline-offset: 1px; border-color: var(--h-brand); }
.field-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-error { color: var(--h-error); font-size: 15px; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   PARALLAX
   Depth, not spectacle. An element marked data-parallax drifts a
   few dozen pixels against the scroll as it crosses the viewport;
   --depth scales it (negative drifts the other way). It is CSS
   scroll-driven animation: no scroll listener, nothing pinned, the
   scroll stays the visitor's. Off under reduced motion, and a
   browser without scroll timelines simply shows everything still.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-parallax] {
      animation: px-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .cover [data-layer] {
      animation: px-drift linear both;
      animation-timeline: --cover;
      animation-range: cover;
    }
    .cover [data-layer="back"] { --depth: -.5; }
    .cover [data-layer="mid"] { --depth: .6; }
    .cover [data-layer="front"] { --depth: 1.4; }
  }
}
@keyframes px-drift {
  from { transform: translate3d(0, calc(var(--depth, 1) * 32px), 0); }
  to { transform: translate3d(0, calc(var(--depth, 1) * -32px), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .link-arrow .ic, .btn { transition: none; }
  .btn:active, .btn:hover { transform: none; }
  .faq details::details-content { transition: none; }
}

.form-card { padding: 28px 24px; border: 1px solid var(--h-line); border-radius: 12px; background: var(--h-surface); }
@media (min-width: 640px) { .form-card { padding: 36px; } }
.form-card :focus:not(:focus-visible) { outline: none; }

/* ── Book a demo, in the page (book-demo.js) ─────────────────────────
   Calendly's scheduler in a dialog, so a visitor books without leaving the
   site. The panel is a card at 960 on the desk and the whole screen on a
   phone. Every value is a token; the frame is themed from the same three. */
html.book-demo-open { overflow: hidden; }
.book-demo {
  width: min(960px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 48px));
  max-width: none; max-height: none; margin: auto; padding: 0;
  border: 1px solid var(--h-line); border-radius: 12px;
  background: var(--h-surface); color: var(--h-ink); box-shadow: var(--shadow-win);
  overflow: hidden;
}
.book-demo[open] { display: flex; flex-direction: column; }
.book-demo::backdrop { background: var(--h-scrim); }
.book-demo-head {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--h-line-soft);
}
.book-demo-words { min-width: 0; }
.book-demo-head h2 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--h-ink); }
.book-demo-head p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--h-muted); max-width: 62ch; }
.book-demo-close {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -6px -6px 0 0; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--h-muted); cursor: pointer;
}
.book-demo-close:hover { color: var(--h-ink); background: var(--h-well); border-color: var(--h-line); }
.book-demo-body { position: relative; flex: 1; min-height: 0; background: var(--h-surface); }
.book-demo-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--h-surface); }
.book-demo-status:empty { display: none; }
.book-demo-status {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--h-muted);
  background: var(--h-surface); pointer-events: none;
}
.book-demo[data-state="loading"] .book-demo-status::before {
  content: ""; width: 18px; height: 18px; margin-right: 10px; flex: none;
  border: 2px solid var(--h-line); border-top-color: var(--h-brand); border-radius: 50%;
  animation: book-demo-spin .8s linear infinite;
}
/* Slow: the frame may still arrive, so the words sit above it, not over it. */
.book-demo[data-state="slow"] .book-demo-status { inset: 0 0 auto; background: var(--h-well); border-bottom: 1px solid var(--h-line); }
@keyframes book-demo-spin { to { transform: rotate(360deg); } }
.book-demo-foot {
  flex: none; margin: 0; padding: 12px 24px; border-top: 1px solid var(--h-line-soft);
  font-size: 14px; color: var(--h-muted);
}
.book-demo-foot a { color: var(--h-brand); font-weight: 600; text-underline-offset: 3px; }
.book-demo[data-state="slow"] .book-demo-foot { background: var(--h-tint); color: var(--h-ink); }
@media (max-width: 640px) {
  .book-demo { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .book-demo-head { padding: 12px 12px 12px 16px; }
  .book-demo-head h2 { font-size: 18px; }
  .book-demo-head p { font-size: 14px; }
  .book-demo-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .book-demo[open] { animation: book-demo-in .22s var(--ease-out); }
  .book-demo[open]::backdrop { animation: book-demo-fade .22s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .book-demo[data-state="loading"] .book-demo-status::before { animation: none; }
}
@keyframes book-demo-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes book-demo-fade { from { opacity: 0; } }

/* ── Scribble's drawer (scribble.js, D-620) ─────────────────────────
   A <dialog> at the right edge: the head, the transcript, a status line,
   the composer, a foot with the sign-in door. 440 wide on a desk, the whole
   screen on a phone. Every value is a token; a reply's markdown is the
   app's renderer, styled here under .scrib-body. */
html.scrib-open { overflow: hidden; }
.scrib {
  inset: 0 0 0 auto; margin: 0; padding: 0;
  width: min(440px, 100vw); height: 100dvh; max-width: none; max-height: none;
  border: 0; border-left: 1px solid var(--h-line);
  background: var(--h-surface); color: var(--h-ink); box-shadow: var(--shadow-win);
}
.scrib[open] { display: flex; flex-direction: column; }
.scrib::backdrop { background: var(--h-scrim); }
.scrib-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--h-line-soft); }
.scrib-mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--h-tint); border: 1px solid var(--h-tint-line); color: var(--h-brand); }
.scrib-mark .brain { width: 20px; height: 20px; }
.scrib-words { flex: 1; min-width: 0; }
.scrib-words h2 { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--h-ink); }
.scrib-words p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--h-muted); }
.scrib-close { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--h-muted); cursor: pointer; }
.scrib-close:hover { color: var(--h-ink); background: var(--h-well); border-color: var(--h-line); }
.scrib-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 14px; }
.scrib-empty p { margin: 4px 0 16px; font-size: 15px; line-height: 1.55; color: var(--h-ink-2); }
.scrib-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.scrib-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--h-line); border-radius: var(--radius-pill); background: var(--h-surface); font: inherit; font-size: 14px; font-weight: 500; color: var(--h-ink); cursor: pointer; text-align: left; transition: background-color var(--dur-ctl) ease, border-color var(--dur-ctl) ease; }
.scrib-chip:hover { background: var(--h-well); border-color: var(--h-ink-2); }
.scrib-msg { display: flex; max-width: 100%; }
.scrib-msg.is-you { justify-content: flex-end; }
.scrib-msg.is-you .scrib-body { max-width: 86%; padding: 10px 14px; border-radius: var(--radius-win) var(--radius-win) 4px var(--radius-win); background: var(--h-well); color: var(--h-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.scrib-msg.is-ai .scrib-body { max-width: 100%; min-width: 0; padding: 2px 0; overflow-wrap: anywhere; }
.scrib-body { font-size: 15px; line-height: 1.55; }
.scrib-body p { margin: 0 0 10px; }
.scrib-body p:last-child, .scrib-body ul:last-child, .scrib-body ol:last-child { margin-bottom: 0; }
.scrib-body ul, .scrib-body ol { margin: 0 0 10px; padding-left: 20px; }
.scrib-body li { margin: 2px 0; }
.scrib-body h1, .scrib-body h2, .scrib-body h3, .scrib-body h4 { margin: 10px 0 4px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--h-ink); }
.scrib-body a { color: var(--h-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.scrib-body code { font-size: 13px; padding: 1px 5px; border-radius: 4px; background: var(--h-well); }
.scrib-body blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--h-line); color: var(--h-ink-2); }
.scrib-body em { color: var(--h-muted); }
.scrib-dots { display: inline-flex; gap: 5px; align-items: center; height: 22px; }
.scrib-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--h-muted); opacity: .35; }
.scrib-note { flex: none; margin: 0; padding: 10px 20px; border-top: 1px solid var(--h-line-soft); font-size: 13.5px; line-height: 1.5; color: var(--h-ink-2); background: var(--h-well); }
.scrib-note[data-kind="ready"] { background: var(--h-tint); color: var(--h-ink); }
.scrib-note[data-kind="error"] { color: var(--h-error); }
.scrib-doors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.scrib-doors a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--h-line); border-radius: var(--radius-pill); background: var(--h-surface); font-size: 13px; font-weight: 600; color: var(--h-ink); }
.scrib-doors a:hover { border-color: var(--h-ink-2); }
.scrib-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--h-brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.scrib-form { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; gap: 8px; padding: 12px 16px 12px 20px; border-top: 1px solid var(--h-line); }
.scrib-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scrib-form textarea { display: block; width: 100%; min-height: 44px; max-height: 168px; padding: 11px 14px; resize: none; border: 1px solid var(--h-line); border-radius: 12px; background: var(--h-canvas); font: inherit; font-size: 15px; line-height: 1.4; color: var(--h-ink); }
.scrib-form textarea::placeholder { color: var(--h-muted); }
/* A focused text field draws nothing; the caret is its indicator (D-372's
   rule, the app's, applied here). The site's global :focus-visible ring
   matches a textarea on a plain click, so it is cleared for this field
   only. The send, stop, chips and close keep their ring. */
.scrib-form textarea:focus, .scrib-form textarea:focus-visible { outline: none; border-color: var(--h-line); box-shadow: none; caret-color: auto; }
.scrib-send, .scrib-stop { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--h-fill); color: #fff; cursor: pointer; transition: background-color var(--dur-ctl) ease; }
.scrib-send:hover, .scrib-stop:hover { background: var(--h-fill-hover); }
.scrib-stop { background: var(--h-ink); }
.scrib-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 20px calc(12px + env(safe-area-inset-bottom)); font-size: 12.5px; line-height: 1.45; color: var(--h-muted); }
.scrib-foot a { color: var(--h-brand); font-weight: 600; text-underline-offset: 3px; }
.scrib-clear { flex: none; background: none; border: 0; padding: 6px 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--h-muted); cursor: pointer; }
.scrib-clear:hover { color: var(--h-ink); }
@media (max-width: 640px) {
  .scrib { width: 100vw; border-left: 0; }
  .scrib-log { padding: 16px 16px 8px; }
  .scrib-form { padding: 10px 12px 10px 16px; }
  .scrib-note, .scrib-foot { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .scrib[open] { animation: scrib-in .32s var(--ease-out); }
  .scrib[open]::backdrop { animation: book-demo-fade .32s var(--ease-out); }
  .scrib-dots i { animation: scrib-dot 1.1s ease-in-out infinite; }
  .scrib-dots i:nth-child(2) { animation-delay: .18s; }
  .scrib-dots i:nth-child(3) { animation-delay: .36s; }
}
@keyframes scrib-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes scrib-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }