/* ==========================================================================
   Tadpole marketing site: tokens, base, layout and components.
   Two themes share every page: data-theme="desk" (default) and "notebook".
   Rules and the page contract live in ../../DESIGN.md.
   ========================================================================== */

/* Metric-matched fallbacks: text takes the same space before and after the web
   fonts arrive, so nothing shifts when they swap in. Each theme loads only its
   own fonts (the inline script in <head> and site.js pick them). */
@font-face { font-family: "Instrument Serif Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 76.7%; ascent-override: 129%; descent-override: 40.4%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic"); size-adjust: 79.5%; ascent-override: 124.5%; descent-override: 39%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 87.2%; ascent-override: 112.2%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Type: six sizes, two families per theme (display + Inter). */
  --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-1: clamp(2.875rem, 1.6rem + 4.6vw, 5.25rem);   /* 46 to 84: hero headline */
  --fs-2: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);        /* 32 to 52: section headline */
  --fs-3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);    /* 22 to 28: card title */
  --fs-4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* 17 to 20: lead */
  --fs-5: 1rem;                                        /* 16: body */
  --fs-6: 0.875rem;                                    /* 14: small, nav, labels */
  --lh-1: 1.02;
  --lh-2: 1.08;
  --lh-3: 1.2;
  --lh-body: 1.6;

  /* Spacing scale: every gap is one of these. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Grid */
  --frame: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 128px);
  --header-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(.165, .84, .44, 1);    /* reveals, product events */
  --ease-hover: cubic-bezier(.25, 1, .5, 1);       /* hovers */
  --ease-inout: cubic-bezier(.65, 0, .35, 1);      /* things that travel */
  --t-fast: 150ms;
  --t-hover: 300ms;
  --t-event: 450ms;
  --t-reveal: 500ms;

  /* Brand */
  --brand: #00C56B;            /* Tadpole green: marks, dots, logo */
  --brand-ink: #00804A;        /* green that passes contrast with white text */

  /* Product hues (school supplies). Only for small icon tiles and accents. */
  --hue-scheduling: #4C7BF4;   /* notebook blue */
  --hue-families: #E9A72B;     /* pencil yellow */
  --hue-billing: #00A85B;      /* money green */
  --hue-payroll: #138A7C;      /* ledger teal */
  --hue-inbox: #E0656B;        /* eraser pink */
  --hue-people: #8B5CF6;       /* binder violet, the CRM board's purple */
  --hue-ai: #D9774B;           /* clay, for Tadpole in Claude */
}

/* Desk, the default. These are the felt's tokens (the header strip and the one
   band) and every theme's fallback; the desk page itself is paper, set by the
   next block. */
:root,
[data-theme="desk"] {
  color-scheme: dark;
  --font-display: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
  --font-hand: "Kalam", "Bradley Hand", cursive;
  --display-weight: 400;
  --display-track: -0.012em;
  --display-italic: italic;

  --bg: #0C3528;
  --bg-2: #0E3B2C;
  --bg-3: #134836;
  --bg-deep: #082419;
  --surface: #FFFDF6;          /* paper */
  --surface-2: #F7F1E2;        /* older paper */
  --surface-edge: #E6DDC6;
  --text: #F6EEDB;             /* cream, on felt */
  --text-2: #B9C9BF;           /* sage, supporting */
  --text-3: #93AB9D;           /* quiet labels (4.9:1 on felt) */
  --ink: #1D2433;              /* text on paper */
  --ink-2: #4B5263;
  --ink-3: #6A6F7C;
  --line: rgba(246, 238, 219, .13);
  --line-strong: rgba(246, 238, 219, .28);
  --line-paper: #ECE5D3;
  --accent: #00C56B;           /* solid buttons */
  --on-accent: #05291B;        /* 6.9:1 on --accent */
  --accent-hover: #1BD47E;
  --accent-text: #5BE39C;      /* links and the italic word, on felt */
  --accent-paper: #00804A;     /* links on paper */
  --hl: #FFE27E;               /* sticky note yellow */
  --hl-ink: #2D2A22;
  --header-bg: rgba(10, 46, 34, .78);
  --menu-bg: #FFFDF6;
  --menu-tint: #F4EDDB;

  --radius-btn: 999px;
  --radius-card: 8px;
  --radius-paper: 3px;
  --radius-window: 10px;

  --shadow-1: 0 1px 1px rgba(0, 0, 0, .18), 0 4px 10px -4px rgba(0, 0, 0, .3);
  --shadow-2: 0 1px 1px rgba(0, 0, 0, .22), 0 6px 14px -4px rgba(0, 0, 0, .30), 0 28px 50px -18px rgba(0, 0, 0, .50);
  --shadow-3: 0 2px 2px rgba(0, 0, 0, .2), 0 14px 28px -10px rgba(0, 0, 0, .4), 0 50px 90px -30px rgba(0, 0, 0, .6);
  --focus: 0 0 0 3px rgba(91, 227, 156, .55);
}

/* The desk page is paper, hero included. The felt is a strip behind the header
   at the top of the page and the one .band (and stays the fallback above for
   any theme that leaves a token out). On the desk these light tokens win; :is()
   carries the weight of :root:not([data-theme]). .on-paper brings them back
   inside a felt area. */
:is([data-theme="desk"], :root:not([data-theme])),
:is([data-theme="desk"], :root:not([data-theme])) .on-paper {
  color-scheme: light;
  --bg: #FCF9F2;               /* page paper */
  --bg-2: #F3EBD8;             /* cream: every other section, and the footer */
  --bg-3: #EAE0C8;
  --surface: #FFFEFA;
  --surface-2: #F8F2E4;
  --text: #1D2433;
  --text-2: #4B5263;
  --text-3: #5B6070;           /* 5.3:1 on the cream */
  --line: rgba(29, 36, 51, .11);
  --line-strong: rgba(29, 36, 51, .24);
  --accent-text: #00703F;      /* 5.2:1 on the cream */
  --accent-paper: #00703F;
  --header-bg: rgba(252, 249, 242, .95);
  --shadow-1: 0 1px 1px rgba(60, 44, 20, .06), 0 4px 12px -6px rgba(60, 44, 20, .16);
  --shadow-2: 0 1px 1px rgba(60, 44, 20, .07), 0 10px 22px -10px rgba(60, 44, 20, .22), 0 30px 54px -26px rgba(60, 44, 20, .30);
  --shadow-3: 0 1px 2px rgba(60, 44, 20, .08), 0 18px 40px -16px rgba(60, 44, 20, .28), 0 54px 90px -40px rgba(60, 44, 20, .36);
  --focus: 0 0 0 3px rgba(0, 128, 74, .35);
  color: var(--text);
}
/* The felt, in three places only: the header strip at the top of a page that
   opens with a hero (until the page scrolls), the one .band, and .on-felt. The
   Claude tile keeps its paper. :where() keeps this at zero weight. */
:where([data-theme="desk"], :root:not([data-theme])) :where(.band, .on-felt:not(.tile--feature), body:has(main > .hero:first-child):not(.menu-open) .site-header:not(.is-scrolled)) {
  color-scheme: dark;
  --bg: #0C3528;
  --bg-2: #0E3B2C;
  --bg-3: #134836;
  --surface: #FFFDF6;
  --surface-2: #F7F1E2;
  --text: #F6EEDB;
  --text-2: #B9C9BF;
  --text-3: #93AB9D;
  --line: rgba(246, 238, 219, .13);
  --line-strong: rgba(246, 238, 219, .28);
  --accent-text: #5BE39C;
  --accent-paper: #00804A;
  --header-bg: rgba(10, 46, 34, .78);
  --shadow-1: 0 1px 1px rgba(0, 0, 0, .18), 0 4px 10px -4px rgba(0, 0, 0, .3);
  --shadow-2: 0 1px 1px rgba(0, 0, 0, .22), 0 6px 14px -4px rgba(0, 0, 0, .30), 0 28px 50px -18px rgba(0, 0, 0, .50);
  --shadow-3: 0 2px 2px rgba(0, 0, 0, .2), 0 14px 28px -10px rgba(0, 0, 0, .4), 0 50px 90px -30px rgba(0, 0, 0, .6);
  --focus: 0 0 0 3px rgba(91, 227, 156, .55);
  color: var(--text);
}

/* Notebook: cream paper, ink type, a red margin rail and a highlighter. */
[data-theme="notebook"] {
  color-scheme: light;
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --display-weight: 500;
  --display-track: -0.01em;
  --display-italic: normal;

  --bg: #FBF7EE;
  --bg-2: #F5EFE2;
  --bg-3: #EFE7D6;
  --bg-deep: #17233B;          /* the chalkboard band */
  --surface: #FFFFFF;
  --surface-2: #FBF8F1;
  --surface-edge: #E9E3D6;
  --text: #17233B;
  --text-2: #47526B;
  --text-3: #5F687D;           /* 5.2:1 on paper */
  --ink: #17233B;
  --ink-2: #47526B;
  --ink-3: #5F687D;
  --line: rgba(23, 35, 59, .10);
  --line-strong: rgba(23, 35, 59, .2);
  --line-paper: #EAE4D7;
  --accent: #00804A;
  --on-accent: #FFFFFF;        /* 5.0:1 */
  --accent-hover: #006F40;
  --accent-text: #00804A;
  --accent-paper: #00804A;
  --hl: #FFE173;
  --hl-ink: #2D2A22;
  --rule: rgba(120, 150, 190, .22);
  --margin: rgba(226, 128, 116, .55);
  --header-bg: rgba(251, 247, 238, .82);
  --menu-bg: #FFFFFF;
  --menu-tint: #FBF7EE;

  --radius-btn: 10px;
  --radius-card: 12px;
  --radius-paper: 12px;
  --radius-window: 12px;

  --shadow-1: 0 1px 1px rgba(23, 35, 59, .05), 0 4px 12px -6px rgba(23, 35, 59, .14);
  --shadow-2: 0 1px 1px rgba(23, 35, 59, .05), 0 10px 22px -10px rgba(23, 35, 59, .18), 0 34px 60px -28px rgba(23, 35, 59, .30);
  --shadow-3: 0 1px 2px rgba(23, 35, 59, .06), 0 18px 40px -16px rgba(23, 35, 59, .26), 0 60px 100px -40px rgba(23, 35, 59, .35);
  --focus: 0 0 0 3px rgba(0, 128, 74, .35);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-5)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
/* The material under everything: felt or paper grain, fixed so long pages never tile. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Desk: the page is paper, hero included. The felt is a strip behind the header (section 7) and the band. */
[data-theme="desk"] body::before,
:root:not([data-theme]) body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--bg);
}
[data-theme="notebook"] body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1200px 700px at 78% 10%, rgba(255, 255, 255, .6), transparent 70%),
    var(--bg);
}
/* Notebook: the red margin rail runs the full page, left of the content. */
[data-theme="notebook"] body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(6px, calc(50% - var(--frame) / 2 - 36px));
  width: 1.5px;
  background: var(--margin);
  box-shadow: 4px 0 0 rgba(226, 128, 116, .22);
  pointer-events: none;
  z-index: 0;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
::selection { background: var(--hl); color: var(--hl-ink); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--fs-6);
  transition: top var(--t-fast);
}
.skip-link:focus { top: 12px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */
.display, .h1, .h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  color: var(--text);
  text-wrap: balance;
}
[data-theme="notebook"] .display,
[data-theme="notebook"] .h1,
[data-theme="notebook"] .h2 { font-variation-settings: "opsz" 144, "SOFT" 40; }
.display, .h1 { font-size: var(--fs-1); line-height: var(--lh-1); }
.h2 { font-size: var(--fs-2); line-height: var(--lh-2); }
.h3 {
  font: 600 var(--fs-3)/var(--lh-3) var(--font-body);
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.lead { font-size: var(--fs-4); line-height: 1.55; color: var(--text-2); max-width: 36em; text-wrap: pretty; }
.body { font-size: var(--fs-5); color: var(--text-2); max-width: 38em; text-wrap: pretty; }
.small { font-size: var(--fs-6); line-height: 1.45; color: var(--text-3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: 600 var(--fs-6)/1 var(--font-body);
  color: var(--text-2);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hue, var(--brand)); }

/* The italic or highlighted word in a headline. */
.display em, .h1 em, .h2 em { font-style: var(--display-italic); color: var(--accent-text); }
[data-theme="notebook"] .display em,
[data-theme="notebook"] .h1 em,
[data-theme="notebook"] .h2 em { color: inherit; }

/* Default rhythm between stacked text pieces (override with the spacing tokens). */
.eyebrow + :is(.display, .h1, .h2) { margin-top: var(--s-4); }
:is(.display, .h1, .h2) + :is(.lead, .body) { margin-top: var(--s-5); }
.h3 + :is(.lead, .body, p) { margin-top: var(--s-3); }
:is(.lead, .body) + :is(.btn-row, .checks, .proof) { margin-top: var(--s-6); }

/* Two-tone headline: a short claim in --text, then supporting words in --text-2. */
.tt > span, .tt .tt-2 { color: var(--text-2); }

/* Notebook highlighter: a yellow swipe behind the words. Desk shows the
   same word in mint italic instead (see .display em). */
.hl { position: relative; z-index: 0; white-space: nowrap; }
[data-theme="notebook"] .hl::before {
  content: "";
  position: absolute; z-index: -1;
  left: -0.08em; right: -0.1em; top: 0.38em; bottom: 0.02em;
  background: var(--hl);
  border-radius: .18em .4em .22em .35em / .35em .2em .4em .25em;
  transform: skew(-6deg) rotate(-1deg) scaleX(0);
  transform-origin: left center;
  mix-blend-mode: multiply;
  transition: transform var(--t-reveal) var(--ease-out) 150ms;
}
[data-theme="notebook"] .is-in .hl::before,
[data-theme="notebook"] .hl.is-in::before { transform: skew(-6deg) rotate(-1deg) scaleX(1); }
[data-theme="notebook"] .hl em { font-style: normal; }

.text-link {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--t-hover) var(--ease-hover);
}
.text-link:hover { text-decoration-color: currentColor; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--frame)); margin-inline: auto; position: relative; }
.container--narrow { width: min(100% - 2 * var(--gutter), 760px); }
main { display: block; position: relative; z-index: 1; }
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section + .section { border-top: 1px solid var(--line); }
.section--flush + .section, .section + .section--flush { border-top: 0; }

/* Alternate sections give the page its light and dark rhythm. Notebook: a
   darker paper. Desk: white paper and cream paper by turns, Stripe style; the
   felt is only the header strip and the one band. */
.section--alt { background: var(--bg-2); }
.section--alt, .section--alt + .section, .section + .section--alt { border-top: 0; }
[data-theme="desk"] .section--alt,
:root:not([data-theme]) .section--alt {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1100px 600px at 80% 0%, rgba(255, 255, 255, .5), transparent 70%),
    var(--bg-2);
  z-index: 1;
}

/* Section header: headline left, a supporting sentence or link right. */
.section-head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.section-head .h2 { max-width: 15em; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

.grid { display: grid; gap: var(--s-5); }
.grid-2 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
  .split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--flip > :first-child { order: 2; }
  .split--even { grid-template-columns: 1fr 1fr; }
}
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   5. Buttons and links
   -------------------------------------------------------------------------- */
.btn {
  --btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--btn-h); padding: 0 20px;
  border: 0; border-radius: var(--radius-btn);
  font: 600 var(--fs-5)/1 var(--font-body);
  white-space: nowrap; cursor: pointer;
  transition: transform var(--t-hover) var(--ease-hover), background-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover), color var(--t-hover);
}
.btn--sm { --btn-h: 38px; padding: 0 16px; font-size: var(--fs-6); }
.btn--lg { --btn-h: 52px; padding: 0 26px; }
.btn--solid {
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn--solid:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--text-3); background: color-mix(in srgb, var(--text) 5%, transparent); }
.btn--paper { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0); }

/* The arrow: a chevron that grows a stem on hover. */
.arrow { width: 10px; height: 10px; flex: none; overflow: visible; }
.arrow .stem { opacity: 0; transition: opacity var(--t-hover) var(--ease-hover); }
.arrow .head { transition: transform var(--t-hover) var(--ease-hover); }
a:hover .arrow .stem, button:hover .arrow .stem { opacity: 1; }
a:hover .arrow .head, button:hover .arrow .head { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-text); font-weight: 600; font-size: var(--fs-5);
}
.on-paper .link-arrow, .paper .link-arrow { color: var(--accent-paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
@media (max-width: 520px) {
  .btn-row--stack { flex-direction: column; align-items: stretch; }
  .btn-row--stack .btn { width: 100%; --btn-h: 48px; }
}

/* --------------------------------------------------------------------------
   6. Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  transition: background-color var(--t-hover), box-shadow var(--t-hover);
}
.site-header.is-scrolled,
.site-header.is-open {
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.nav__logo { display: flex; align-items: center; flex: none; padding: 6px 0; }
.nav__logo img { width: 106px; height: auto; }
.nav__menu { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 12px; border-radius: 8px;
  font: 500 var(--fs-6)/1 var(--font-body); color: var(--text);
  background: none; border: 0; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 8%, transparent); }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent-text); border-radius: 0; }
.nav__link .chev { width: 10px; height: 10px; opacity: .6; transition: transform var(--t-hover) var(--ease-hover); }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* "New": a small dot; the word stays for screen readers. */
.nav__new {
  display: inline-block; width: 7px; height: 7px; padding: 0; border-radius: 50%;
  font-size: 0; line-height: 0; overflow: hidden; vertical-align: middle;
  background: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent);
}
[data-theme="notebook"] .nav__new { background: var(--accent); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.nav__toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--text);
  align-items: center; justify-content: center;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .x { display: none; }
.site-header.is-open .nav__toggle .x { display: block; }
.site-header.is-open .nav__toggle .bars { display: none; }

/* Product menu: a sheet of paper on the desk, or a white card on the notebook. */
.megamenu {
  position: absolute; left: 0; right: 0; top: calc(var(--header-h) - 6px);
  pointer-events: none;
}
.megamenu__panel {
  width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto;
  background: var(--menu-bg); color: var(--ink);
  border-radius: calc(var(--radius-card) + 4px);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: 50% 0;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
  visibility: hidden;
}
.megamenu.is-open { pointer-events: auto; }
.megamenu.is-open .megamenu__panel {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s;
}
/* Four columns. Each column's heading and items share rows with the other
   columns (display: contents), so items in the same row start at the same
   height. A column can hold any number of items. */
.megamenu__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: var(--s-6); row-gap: 0; padding: var(--s-6); }
.megamenu__cols > div { display: contents; }
.megamenu__cols > div:nth-child(1) > * { grid-column: 1; }
.megamenu__cols > div:nth-child(2) > * { grid-column: 2; }
.megamenu__cols > div:nth-child(3) > * { grid-column: 3; }
.megamenu__cols > div:nth-child(4) > * { grid-column: 4; }
.megamenu__cols .megamenu__heading { grid-row: 1; }
.megamenu__heading {
  font: 600 var(--fs-6)/1 var(--font-body);
  color: var(--ink-3); padding-bottom: var(--s-3); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-paper);
}
.menu-item { display: flex; gap: var(--s-3); padding: 10px 8px; margin: 0 -8px; border-radius: 8px; transition: background-color var(--t-fast); }
.menu-item:hover, .menu-item:focus-visible { background: var(--menu-tint); }
.menu-item__icon {
  flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  color: var(--hue); background: color-mix(in srgb, var(--hue) 14%, white);
}
.menu-item__icon svg { width: 16px; height: 16px; }
.menu-item__name { display: block; font: 600 var(--fs-6)/1.3 var(--font-body); color: var(--accent-paper); }
.menu-item__name .nav__new { margin-left: 6px; vertical-align: middle; }
.menu-item__desc { display: block; font: 400 var(--fs-6)/1.4 var(--font-body); color: var(--ink-2); margin-top: 2px; }

/* Phone menu: a full-height sheet with drill-in rows. Log in and Book a demo stay in the header. */
.mobile-menu { display: none; }
@media (max-width: 960px) {
  .nav__menu { display: none; }
  .nav { gap: var(--s-2); }
  .nav__toggle { display: inline-flex; margin-left: 0; margin-right: -8px; }
  .megamenu { display: none; }
  .mobile-menu {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
    display: flex; flex-direction: column;
    background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-4) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
  }
  .site-header.is-open + .mobile-menu,
  .mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s; }
}
.mobile-menu__group { border-bottom: 1px solid var(--line); }
.mobile-menu__row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 56px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-4)/1.2 var(--font-body); color: var(--text); text-align: left;
}
.mobile-menu__row .chev { width: 14px; height: 14px; opacity: .6; transition: transform var(--t-hover) var(--ease-hover); }
.mobile-menu__row[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mobile-menu__sub { display: grid; gap: 2px; padding-bottom: var(--s-4); }
.mobile-menu__sub[hidden] { display: none; }
.mobile-menu__sub a { display: flex; gap: var(--s-3); align-items: center; padding: 10px 0; }
.mobile-menu__sub .menu-item__name { color: var(--text); font-size: var(--fs-5); }
.mobile-menu__sub .menu-item__desc { color: var(--text-3); }
@media (max-width: 480px) {
  .nav__logo img { width: 88px; }
  .nav__right .btn--sm { --btn-h: 36px; padding: 0 12px; }
  .nav__right .arrow { display: none; }
  .nav__toggle { width: 40px; }
}
@media (max-width: 359px) {
  .nav__logo img { width: 76px; }
  .nav__right { gap: 6px; }
  .nav__right .btn--sm { padding: 0 10px; font-size: 13px; }
}
body.menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(32px, 6vw, 72px) 0 var(--section-y); overflow-x: clip; }
/* Desk: the hero is the page's paper under a warm desk lamp. At the top of a page
   it runs up behind the header, and a strip of felt sits behind the header itself. */
[data-theme="desk"] .hero::before,
:root:not([data-theme]) .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .15 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1100px 620px at 82% 0%, rgba(255, 236, 196, .55), transparent 70%),
    var(--bg);
}
[data-theme="desk"] main > .hero:first-child::before,
:root:not([data-theme]) main > .hero:first-child::before { top: calc(-1 * var(--header-h)); }
[data-theme="desk"] main > .hero:first-child::after,
:root:not([data-theme]) main > .hero:first-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--header-h)); height: var(--header-h);
  z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0E3B2C, #0C3528);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 6px 14px -8px rgba(30, 24, 10, .35);
}
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 1040px) { .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); } }
.hero__copy { position: relative; z-index: 2; }
.hero__copy .display { margin-top: var(--s-5); }
.hero__copy .lead { margin-top: var(--s-5); }
.hero__copy .btn-row { margin-top: var(--s-6); }
.hero__stage { position: relative; min-width: 0; }

/* Notebook: quiet ruled lines around the hero's product, never behind the
   headline or the lead. They run to the page edges and fade out above and below. */
[data-theme="notebook"] :is(.hero__stage, .pp-hero__stage)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -28px; bottom: -64px; left: -100vw; right: -100vw;
  background: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 64px), transparent);
  mask: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 64px), transparent);
}
/* Where the stage sits beside the copy (wide screens), the lines start just left of it.
   On the home page the index pills sit under the stage on narrow screens, so the lines stop sooner. */
[data-theme="notebook"] .hero--home .hero__stage::before { bottom: -24px; }
@media (min-width: 1040px) {
  [data-theme="notebook"] :is(.hero--home, .hero__grid) .hero__stage::before { left: -24px; bottom: -64px; }
}

/* Proof row: verified numbers under the hero copy. */
.proof { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.proof__item b { display: block; font: var(--display-weight) var(--fs-3)/1 var(--font-display); letter-spacing: var(--display-track); color: var(--text); }
[data-theme="notebook"] .proof__item b { font-variation-settings: "opsz" 72; }
.proof__item span { display: block; margin-top: var(--s-2); font-size: var(--fs-6); line-height: 1.4; color: var(--text-3); max-width: 13em; }

/* --------------------------------------------------------------------------
   8. Cards, paper and the bold band
   -------------------------------------------------------------------------- */
.card {
  position: relative; display: block;
  padding: var(--s-6); border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
[data-theme="notebook"] .card { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
[data-theme="desk"] .card, :root:not([data-theme]) .card { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.card .h3 + .body, .card .h3 + p { margin-top: var(--s-3); }
.card .link-arrow { margin-top: var(--s-5); }
a.card { transition: transform var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover); }
a.card:hover { transform: translateY(-2px); }

/* Paper: a sheet with ink text. On the desk it is cream with a real paper
   shadow and two sheets peeking out under it. On the notebook it is a white
   card on the page. Use for prose, CTAs and any reading surface. */
.paper {
  position: relative; isolation: isolate;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-2);
  padding: clamp(24px, 4vw, 56px);
}
.paper .h2, .paper .h1, .paper .display, .paper .h3 { color: var(--ink); }
.paper .lead, .paper .body { color: var(--ink-2); }
.paper .small { color: var(--ink-3); }
.paper .tt > span { color: var(--ink-2); }
.paper .text-link { color: var(--accent-paper); }
.paper .display em, .paper .h2 em { color: var(--accent-paper); }
.paper .btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 36, 51, .22); }
.paper .btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(29, 36, 51, .4); background: rgba(29, 36, 51, .04); }
/* Paper stack. Both layers sit at z-index -1 inside the sheet's own stacking
   context, so ::after (painted last) is the face and ::before holds the sheets
   underneath. The desk tilts one sheet and peeks a second one out from its
   box-shadow; the notebook offsets one outlined sheet. */
.paper--stack::before,
.paper--stack::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.paper--stack::after { background: var(--surface); }
[data-theme="desk"] .paper--stack::before, :root:not([data-theme]) .paper--stack::before {
  background: var(--surface-2);
  transform: rotate(-1.3deg) translate(-5px, 7px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .18), 13px 3px 0 -1px #FBF6EA, 13px 6px 10px -3px rgba(0, 0, 0, .35), 0 4px 10px -4px rgba(0, 0, 0, .3);
}
[data-theme="desk"] .paper--stack::after, :root:not([data-theme]) .paper--stack::after { box-shadow: 0 1px 1px rgba(0, 0, 0, .14), 0 3px 8px -4px rgba(0, 0, 0, .28); }
[data-theme="notebook"] .paper { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); }
[data-theme="notebook"] .paper--stack::before {
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  transform: translate(10px, 10px);
}
[data-theme="notebook"] .paper--stack::after { box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 600px) {
  [data-theme="desk"] .paper--stack::before, :root:not([data-theme]) .paper--stack::before { transform: rotate(-.6deg) translate(-2px, 6px); box-shadow: 0 1px 1px rgba(0, 0, 0, .18), 6px 3px 0 -1px #FBF6EA, 6px 5px 8px -3px rgba(0, 0, 0, .35); }
  [data-theme="notebook"] .paper--stack::before { transform: translate(6px, 8px); }
}

/* The bold band: once per page. On the desk it is the one stretch of felt
   below the hero; the notebook inverts to a chalkboard. */
.band {
  position: relative; isolation: isolate;
  border-radius: calc(var(--radius-card) + 6px);
  padding: clamp(32px, 6vw, 80px);
  overflow: hidden;
}
/* Desk: a felt desk pad under a warm lamp. Its tokens are the felt's (section 1). */
[data-theme="desk"] .band, :root:not([data-theme]) .band {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(60% 90% at 78% 0%, rgba(255, 228, 180, .09), transparent 70%),
    linear-gradient(160deg, #11432F, #0C3528 60%, #0A2E22);
  box-shadow: inset 0 1px 0 rgba(246, 238, 219, .08), 0 1px 1px rgba(30, 24, 10, .18), 0 26px 50px -26px rgba(30, 24, 10, .45);
}
[data-theme="notebook"] .band {
  background: radial-gradient(900px 500px at 20% 0%, #22324F, transparent 70%), var(--bg-deep);
  color: #F3EFE4;
  box-shadow: inset 0 0 0 10px #2A2118, inset 0 0 0 12px #3B2E21, var(--shadow-2);
}
[data-theme="notebook"] .band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.band .h2 { color: inherit; }
[data-theme="desk"] .band .tt > span, :root:not([data-theme]) .band .tt > span { color: var(--text-2); }
/* A product page's closing band holds a ghost button; on the felt it is cream.
   (The pages' own rule made it ink for the old paper band.) */
:is([data-theme="desk"], :root:not([data-theme])) .band.pp-cta .btn--ghost { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
:is([data-theme="desk"], :root:not([data-theme])) .band.pp-cta .btn--ghost:hover { background: color-mix(in srgb, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px var(--text-3); }
[data-theme="notebook"] .band .tt > span { color: #B7C0D3; }

/* Stats: verified numbers only. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-6); margin-top: var(--s-7); }
.stat { padding-top: var(--s-4); border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); }
.stat b { display: block; font: var(--display-weight) var(--fs-2)/1 var(--font-display); letter-spacing: var(--display-track); }
[data-theme="notebook"] .stat b { font-variation-settings: "opsz" 144; color: #FFFFFF; }
.stat span { display: block; margin-top: var(--s-3); font-size: var(--fs-6); line-height: 1.45; opacity: .78; max-width: 16em; }

/* Checklist with hand-drawn checks that draw themselves on reveal. */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.checks li { position: relative; padding-left: 30px; color: var(--text-2); }
.paper .checks li { color: var(--ink-2); }
.checks li svg { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; overflow: visible; }
.checks li svg path { fill: none; stroke: var(--accent-text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; stroke-dashoffset: 0; }
.paper .checks li svg path { stroke: var(--accent-paper); }
.js-reveal [data-reveal]:not(.is-in) .checks li svg path { stroke-dashoffset: 32; }
.checks li svg path { transition: stroke-dashoffset 420ms var(--ease-out); }
.checks li:nth-child(2) svg path { transition-delay: 90ms; }
.checks li:nth-child(3) svg path { transition-delay: 180ms; }
.checks li:nth-child(4) svg path { transition-delay: 270ms; }

/* --------------------------------------------------------------------------
   9. Live tiles
   -------------------------------------------------------------------------- */
/* Live tiles: the home page's headline features, each with its product playing
   on a loop. No cards in any theme: the product sits on the page with its text.
   Tadpole in Claude comes first, then the six features, one per row. From 960 px
   the text and the product sit side by side, alternating sides; below that the
   product comes first and its text under it. */
.bento { display: grid; gap: var(--s-4); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento--live { column-gap: var(--s-5); row-gap: var(--s-9); }
@media (max-width: 959px) { .bento--live { row-gap: var(--s-8); } }
.tile { grid-column: span 6; position: relative; min-width: 0; display: flex; flex-direction: column; }
.tile__head { padding: 0; }
.tile__title {
  margin-top: var(--s-3);
  font: var(--display-weight) var(--fs-3)/1.12 var(--font-display);
  letter-spacing: var(--display-track); color: var(--text); text-wrap: balance;
}
[data-theme="desk"] .tile__title, :root:not([data-theme]) .tile__title { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); }
[data-theme="notebook"] .tile__title { font-variation-settings: "opsz" 72, "SOFT" 40; }
.tile__body { margin-top: var(--s-2); font-size: var(--fs-5); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.tile .link-arrow { margin-top: var(--s-3); font-size: var(--fs-6); }
/* On a phone the copy reads first, then the product below it. */
.tile__widget { margin-top: var(--s-6); }
/* Tadpole in Claude: copy beside the product. */
.tile--feature .checks { margin-top: var(--s-5); }
.tile--feature .link-arrow { margin-top: var(--s-6); font-size: var(--fs-5); }
.tile__split { position: relative; display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) {
  .tile__split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
  .tile:not(.tile--feature) {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head widget"; column-gap: var(--s-8); align-items: center;
  }
  .tile:not(.tile--feature):nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "widget head"; }
  .tile:not(.tile--feature) .tile__head { grid-area: head; padding: 0; }
  .tile:not(.tile--feature) .tile__widget { grid-area: widget; margin-top: 0; }
}
/* In a tile the phone stands a little smaller, closer to its neighbor's height. */
.tile [data-tp-widget="publicform"]::before { --max: .86; }


/* --------------------------------------------------------------------------
   10. Desk props and notebook marks (decorative, aria-hidden)
   -------------------------------------------------------------------------- */
/* Hide the other theme's props outright. In its own theme an element keeps
   its own display (flex, grid, inline-flex), so no wrapper div is needed. */
[data-theme="notebook"] .only-desk,
[data-theme="desk"] .only-notebook,
:root:not([data-theme]) .only-notebook { display: none !important; }

.prop { position: absolute; pointer-events: none; z-index: 3; }
.prop-sticky {
  width: 200px; padding: 16px 18px 14px; border-radius: 2px 2px 4px 14px;
  background: linear-gradient(170deg, #FFE27E 0%, #FFE48C 55%, #FFD65A 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .18), 0 10px 18px -8px rgba(0, 0, 0, .35), 0 26px 40px -22px rgba(0, 0, 0, .45);
  color: var(--hl-ink); font: 400 17px/1.35 var(--font-hand); transform: rotate(4deg);
}
.prop-sticky b { display: inline-block; font-weight: 400; font-size: 20px; margin-bottom: 4px; border-bottom: 2px solid rgba(45, 42, 34, .6); }
.prop-index {
  width: 300px; padding: 12px 16px 16px; border-radius: 3px; color: var(--ink);
  background:
    linear-gradient(rgba(231, 163, 154, .9), rgba(231, 163, 154, .9)) 0 38px / 100% 1.5px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 23px, #CFE0F0 23px 24px) 0 42px / 100% calc(100% - 42px) no-repeat,
    #FFFDF6;
  box-shadow: var(--shadow-2); transform: rotate(-3deg); font-size: 13px; line-height: 24px;
}
.prop-receipt {
  width: 190px; padding: 14px 16px 24px; background: #FDFCF8; color: #2A2D35; font: 500 11px/1.55 var(--font-body);
  font-variant-numeric: tabular-nums; transform: rotate(2.4deg);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)) drop-shadow(0 16px 18px rgba(0, 0, 0, .35));
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) bottom / 12px 8px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) bottom / 12px 8px repeat-x;
}
.prop-receipt h5, .prop-receipt__h { margin: 0 0 8px; font: 700 10px/1 var(--font-body); letter-spacing: .2em; text-align: center; }
.prop-receipt .ln { display: flex; justify-content: space-between; gap: 8px; }
.prop-receipt hr { border: 0; border-top: 1px dashed #C9C6BC; margin: 8px 0; }
.prop-receipt .tot { display: flex; justify-content: space-between; align-items: baseline; font: 400 22px/1 "Instrument Serif", Georgia, serif; }
.prop-stamp {
  padding: 6px 12px 5px; border: 2.5px solid #0E9A58; border-radius: 7px; color: #0E9A58;
  font: 700 17px/1 var(--font-body); letter-spacing: .16em; transform: rotate(-11deg); opacity: .9; mix-blend-mode: multiply;
}
.prop-stamp small { display: block; font: 600 8.5px/1 var(--font-body); letter-spacing: .14em; margin-top: 4px; text-align: center; }
.prop-pencil { width: 360px; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .35)); transform: rotate(-9deg); }

/* Hand-drawn marks: circle, arrow and underline that draw themselves. */
.mark { position: absolute; pointer-events: none; overflow: visible; z-index: 4; max-width: none; }
.mark path { fill: none; stroke: var(--mark-color, var(--accent-text)); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="notebook"] .mark path { --mark-color: #00A85B; }
.mark--draw path { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset var(--t-reveal) var(--ease-out) 150ms; }
.mark--draw.is-drawn path, .mark--draw.is-in path, .is-in .mark--draw path { stroke-dashoffset: 0; }

/* A handwritten annotation next to a widget. */
.note-hand {
  font: 600 var(--fs-4)/1.15 var(--font-hand); color: var(--accent-text);
  display: inline-flex; align-items: flex-end; gap: 6px;
}
[data-theme="desk"] .note-hand, :root:not([data-theme]) .note-hand { font-weight: 400; }
/* A printed annotation card next to a widget (index card or sticky label). */
.note-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2);
  font: 500 var(--fs-6)/1.35 var(--font-body);
}
.note-card b { font-weight: 600; }
.note-card .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }

/* --------------------------------------------------------------------------
   11. CTA, prose and footer
   -------------------------------------------------------------------------- */
.cta { text-align: center; }
.cta .h2 { margin-inline: auto; max-width: 16em; }
.cta .lead { margin: var(--s-4) auto 0; }
.cta .btn-row { justify-content: center; margin-top: var(--s-6); }

/* A plain text page (Payments and billing): normal paragraphs under a few headings. */
.doc { padding: clamp(40px, 7vw, 88px) 0 var(--section-y); }
.doc .display.doc__title { font-size: var(--fs-2); line-height: var(--lh-2); }
.doc__meta { margin-top: var(--s-3); font-size: var(--fs-6); color: var(--text-3); }
.doc__body { margin-top: var(--s-6); max-width: 68ch; font-size: var(--fs-5); line-height: 1.7; color: var(--text-2); }
.doc__body h2 { margin: var(--s-7) 0 var(--s-3); font: 600 var(--fs-4)/1.3 var(--font-body); color: var(--text); scroll-margin-top: calc(var(--header-h) + 16px); }
.doc__body p + p { margin-top: var(--s-4); }
.doc__body a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.doc__body a:hover { text-decoration-color: currentColor; }
.doc__body .doc__fine { margin-top: var(--s-7); font-size: var(--fs-6); line-height: 1.55; color: var(--text-3); }

.site-footer { position: relative; z-index: 1; padding: var(--s-9) 0 var(--s-6); border-top: 1px solid var(--line); }
[data-theme="desk"] .site-footer, :root:not([data-theme]) .site-footer { background: none; } /* the page's paper */
[data-theme="notebook"] .site-footer { background: var(--bg-2); }
.footer__grid { display: grid; gap: var(--s-7); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .footer__grid { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); } }
.footer__brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer__brand { grid-column: auto; } }
.footer__brand img { width: 112px; height: auto; }
.footer__brand address { font-style: normal; margin-top: var(--s-5); color: var(--text-2); font-size: var(--fs-6); line-height: 1.7; }
.footer__brand address a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.footer__brand address a:hover { text-decoration-color: currentColor; }
.footer__policy { margin-top: var(--s-4); color: var(--text-3); font-size: var(--fs-6); line-height: 1.55; max-width: 26em; }
.footer__policy a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.footer__col h2 { font: 600 var(--fs-6)/1 var(--font-body); color: var(--text); margin-bottom: var(--s-4); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.footer__col a { display: inline-block; padding: 4px 0; color: var(--text-2); font-size: var(--fs-6); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--text); }
.footer__base { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; align-items: center; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-6); }

/* --------------------------------------------------------------------------
   12. Scroll reveals (site.js adds .js-reveal to <html> and .is-in on entry)
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.js-reveal [data-reveal="2"] { transition-delay: 80ms; }
.js-reveal [data-reveal="3"] { transition-delay: 160ms; }
.js-reveal [data-reveal="4"] { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .mark--draw path { stroke-dashoffset: 0; }
  [data-theme="notebook"] .hl::before { transform: skew(-6deg) rotate(-1deg) scaleX(1); }
  .js-reveal [data-reveal]:not(.is-in) .checks li svg path { stroke-dashoffset: 0; }
}