/* Handled site: shared styles.
   One typeface (Geist) for everything the site says. Geist Mono appears only inside product demos,
   and Instrument Serif only in the logo. No italics, no uppercase labels, no decorative type. */

/* ---------- Fonts: Geist, self-hosted (latin-ext and latin subsets) ---------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono: used only by the product demos (var(--mono)), so other pages never fetch it. */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Serif: the logo only ("Handled." with a gold full stop). Blocking display, so the logo
   never flashes in a fallback serif; the file is 15 KB and preloaded on every page. */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/instrumentserif-400.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
/* Clay palette (3 Oct 2026): a muted terracotta accent on warm paper. No competitor in the category uses
   clay as its main colour, and it sits with the brass full stop in the logo and the warm photos.
   Research: vault/tenants/handled/research/2026-10-03-website-colour-palette.md. The accent is one step
   deeper than the research swatch (#B4502E) so links pass 4.5:1 on the sand sections too. Status red is
   crimson and status amber is yellow, so neither reads as the accent inside the product demos. */
:root {
  --paper: #FAF7F2;
  --card: #FFFFFF;
  --tint: #F2E8DC;
  --ink: #241E1A;
  --ink-2: #6E6259;
  --ink-3: #463C36;
  --line: #E6DCCF;
  --line-2: #D8CABA;
  --accent: #A6492A;
  --accent-ink: #8A3A1F;
  --accent-soft: #F6E2D6;
  --green: #2F7A55;
  --green-soft: #E4EFE8;
  --amber: #B98A1A;
  --amber-text: #7A5A0C;
  --amber-soft: #F7EED3;
  --red: #B8324A;
  --red-text: #9C2740;
  --red-soft: #F8E2E7;
  --dark: #221A16;
  --dark-text: #FAF7F2;
  --dark-2: #C4B6AA;
  --dark-line: #3A2F29;
  --accent-bright: #F0A585;
  --brass: #A87A26;
  --gold: #D9A441;
  --logo: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 1px 0 rgba(25,23,20,.04), 0 18px 40px -20px rgba(25,23,20,.18);
  --shadow-lg: 0 1px 0 rgba(25,23,20,.05), 0 2px 5px -2px rgba(25,23,20,.06), 0 34px 80px -34px rgba(25,23,20,.32);
  --ease: cubic-bezier(.22,.8,.24,1);
  --gutter: clamp(16px, 4.2vw, 60px);
  --sec: 104px;
  --radius: 16px;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 760px) { :root { --sec: 72px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
html.motion { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 18px/1.6 var(--sans);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .07 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.035'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
p { margin: 0; text-wrap: pretty; }
em, i { font-style: normal; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; 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: 200; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; text-decoration: none; font-size: 15px; }
.skip:focus { top: 12px; }

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-wide { width: min(1320px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sec { padding: var(--sec) 0; }
.sec + .sec.rule { border-top: 1px solid var(--line); }
.sec-tint { background: var(--tint); border-block: 1px solid var(--line); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -0.032em; max-width: 22ch; }
h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.12; letter-spacing: -0.026em; max-width: 26ch; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.012em; }
h4 { font-size: 17px; line-height: 1.35; letter-spacing: -0.006em; }
.lead { font-size: 19.5px; line-height: 1.55; color: var(--ink-3); max-width: 60ch; margin-top: 20px; }
.lead + .lead { margin-top: 12px; }
.sec-head { max-width: 760px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center h2, .sec-head.center .lead { margin-inline: auto; }
.eyebrow { display: inline-block; font-size: 15px; font-weight: 500; color: var(--accent-ink); margin-bottom: 18px; }
.small { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 16px; }
.prose h2 { margin-top: 56px; margin-bottom: 14px; font-size: clamp(24px, 2.4vw, 30px); }
.prose h3 { margin-top: 32px; margin-bottom: 8px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12.5px/1 var(--sans); color: var(--ink-2);
  background: #F0EBE0; border: 1px solid var(--line);
  padding: 6px 10px 6px 8px; border-radius: 999px; white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }

/* ---------- Links and buttons ---------- */
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16.5px; color: var(--accent); text-decoration: none; }
.link::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .25s var(--ease); }
.link:hover { text-decoration: underline; }
.link:hover::after { transform: translateX(3px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 500 16px/1.1 var(--sans); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(25,23,20,.16), 0 8px 18px -10px rgba(25,23,20,.4); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.note { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

/* ---------- Header ---------- */
.nav { position: sticky; top: 0; z-index: 60; background-color: rgba(250,247,242,.92); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav { background-color: rgba(250,247,242,.78); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-in { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; height: 72px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: baseline; color: var(--ink); text-decoration: none; font: 400 31px/1 var(--logo); letter-spacing: -0.005em; }
.brand-dot { color: var(--brass); }
.nav-in > nav { margin-left: auto; }
.nav-links { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { position: relative; color: var(--ink); text-decoration: none; font-size: 15.5px; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { font-weight: 600; }
/* The booking button reads "Book a call with Nick", shortened to "Book a call" where space is tight. */
.nav-cta { min-height: 42px; font-size: 15px; padding: 0 18px; }
.cta-short { display: none; }
.nav-toggle { display: none; margin-left: auto; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 15px; align-items: center; gap: 8px; }
.nav-toggle .bars { width: 14px; height: 9px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease); }
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 3.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 3.5px; transform: rotate(-45deg); }
.sheet { border-top: 1px solid var(--line); background: var(--paper); padding: 6px var(--gutter) 22px; box-shadow: 0 20px 30px -24px rgba(25,23,20,.35); }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet li a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 21px; font-weight: 500; letter-spacing: -0.015em; }
.sheet li a[aria-current="page"] { color: var(--accent); }
.sheet .btn { width: 100%; margin-top: 18px; }
@media (max-width: 960px) {
  .nav-in > nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-in { height: 64px; gap: 10px; }
  /* Phones and tablets keep a compact booking button beside Menu. */
  .nav-in > .nav-cta { margin-left: auto; min-height: 40px; padding: 0 15px; font-size: 14.5px; }
  .nav-in > .nav-cta + .nav-toggle { margin-left: 0; }
}
@media (max-width: 439px) {
  .nav-cta .cta-long { display: none; }
  .nav-cta .cta-short { display: inline; }
}
@media (max-width: 359px) {
  /* The narrowest phones book from the Menu sheet. */
  .nav-in > .nav-cta { display: none; }
  .nav-in > .nav-cta + .nav-toggle { margin-left: auto; }
  /* Long button labels wrap instead of overflowing the narrowest phones. */
  .btn { white-space: normal; text-align: center; padding-block: 10px; }
}
@media (min-width: 961px) { .sheet { display: none !important; } }

/* ---------- Page head (inner pages) ---------- */
.page-head { padding: 56px 0 8px; }
.page-head .btns { margin-top: 30px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; font-size: 15px; color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Screenshot frame ---------- */
.shot { margin: 0; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.shot img { width: 100%; }
.shot .tag { position: absolute; right: 14px; top: 14px; background: rgba(255,255,255,.94); }
.shot-cap { margin-top: 14px; font-size: 15px; color: var(--ink-2); }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1060px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sys-card { position: relative; display: flex; flex-direction: column; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.sys-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.sys-card .pic { aspect-ratio: 16 / 10; overflow: hidden; background: #ECE7DC; border-bottom: 1px solid var(--line); }
.sys-card .pic img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.sys-card .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sys-card p { font-size: 16.5px; line-height: 1.55; color: var(--ink-3); }
.sys-card .link { margin-top: auto; padding-top: 6px; }
.sys-card h3 a { color: inherit; text-decoration: none; }
.sys-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sys-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.sys-card h3 a:focus-visible { outline: none; }
.sys-card .link { position: relative; z-index: 0; pointer-events: none; }
.more-card { background: transparent; border: 1px dashed var(--line-2); box-shadow: none; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.more-card ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 16px; color: var(--ink-3); }
.more-card li { display: flex; gap: 10px; align-items: baseline; }
.more-card li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex: none; transform: translateY(-3px); }
.more-card .link { margin-top: auto; padding-top: 10px; }

/* ---------- Points (tick list) ---------- */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 17px; line-height: 1.55; color: var(--ink-3); }
.points li::before { content: ""; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
.points li { position: relative; }
.points li::after { content: ""; position: absolute; left: 4px; top: 7px; width: 12px; height: 12px; background: var(--accent); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: step; }
.steps li { counter-increment: step; padding: 26px 26px 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 15px; margin-bottom: 18px; }
.steps h3 { margin-bottom: 8px; }
.steps p { font-size: 16.5px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Chain: steps that run one after another ---------- */
.chain { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; counter-reset: chain; }
.chain > li { counter-increment: chain; position: relative; padding: 20px 18px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.chain > li::before { content: counter(chain); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
.chain > li + li::after { content: ""; position: absolute; top: 33px; left: -17px; width: 18px; height: 2px; background: var(--accent); opacity: .4; }
.chain h3 { font-size: 16.5px; line-height: 1.3; margin-bottom: 6px; }
.chain p { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.chain > li.chain-end { background: var(--accent-soft); border-color: transparent; }
.chain > li.chain-end::before { background: var(--accent); }
@media (max-width: 1100px) { .chain { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .chain > li + li::after { display: none; } }
@media (max-width: 640px) {
  .chain { grid-template-columns: 1fr; gap: 12px; }
  .chain > li + li::after { display: block; top: -13px; left: 31px; width: 2px; height: 12px; }
}
.chain-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 28px; font-size: 17px; color: var(--ink-3); }
.chain-mini { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: 14px; color: var(--ink-3); }
.chain-mini li { position: relative; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); white-space: nowrap; }
.chain-mini li + li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 12px; height: 2px; background: var(--accent); opacity: .4; }
@media (max-width: 640px) { .chain-mini { gap: 8px; } .chain-mini li + li::before { display: none; } }

/* ---------- Person ---------- */
.person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; }
.person .photo { width: 152px; height: 152px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(25,23,20,.4); }
.person .photo.lg { width: 220px; height: 220px; }
.person p { color: var(--ink-3); max-width: 58ch; }
.person p + p { margin-top: 12px; }
.person .link { margin-top: 18px; }
@media (max-width: 680px) { .person { grid-template-columns: 1fr; gap: 22px; } .person .photo { width: 120px; height: 120px; } .person .photo.lg { width: 160px; height: 160px; } }

/* ---------- Proof band ---------- */
.proof { background: var(--dark); color: var(--dark-text); }
.proof-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 48px; align-items: center; }
.proof-n { font-size: clamp(88px, 11vw, 150px); line-height: .9; font-weight: 600; letter-spacing: -0.05em; color: var(--dark-text); font-variant-numeric: tabular-nums; }
.proof-eq { display: block; margin-top: 16px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.3; font-weight: 500; letter-spacing: 0; color: var(--accent-bright); white-space: nowrap; }
.proof h2 { color: var(--dark-text); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; max-width: 30ch; }
.proof p { color: var(--dark-2); margin-top: 12px; font-size: 17.5px; max-width: 56ch; }
.proof .link { color: var(--accent-bright); margin-top: 18px; }
@media (max-width: 680px) { .proof-in { grid-template-columns: 1fr; } }

/* ---------- Closing CTA ---------- */
.cta { text-align: center; }
.cta h2 { margin-inline: auto; max-width: 24ch; }
.cta .lead { margin-inline: auto; }
.cta .btns { justify-content: center; margin-top: 30px; }
.cta .note { margin-inline: auto; }
.cta-box { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px); }

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--line-2); }
.acc-item { border-bottom: 1px solid var(--line-2); }
.acc-item h3 { margin: 0; font-size: inherit; }
.acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-align: left; background: none; border: 0; padding: 22px 0; font: 600 18.5px/1.35 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.acc-btn .pm { width: 14px; height: 14px; position: relative; flex: none; }
.acc-btn .pm::before, .acc-btn .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .3s var(--ease); }
.acc-btn .pm::after { transform: rotate(90deg); }
.acc-btn[aria-expanded="true"] .pm::after { transform: rotate(0deg); }
.acc-panel { padding: 0 0 24px; max-width: 64ch; color: var(--ink-3); font-size: 17px; }
.acc-panel p + p { margin-top: 10px; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line-2); padding: 64px 0 120px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.foot .brand { font-size: 36px; }
.foot-line { margin-top: 14px; font-size: 15.5px; color: var(--ink-2); max-width: 36ch; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot ul a { color: var(--ink); text-decoration: none; font-size: 15.5px; }
.foot ul a:hover { text-decoration: underline; }
.foot-meta { display: grid; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.foot-meta a { color: var(--ink); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- Forms (Book a call, ads page) ---------- */
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-size: 15px; font-weight: 500; color: var(--ink); }
.field label span { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; font-size: 16.5px; line-height: 1.3; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 116px; line-height: 1.5; resize: vertical; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235F5A51' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-msg { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: 15px; font-weight: 500; }
.form-msg:empty { display: none; }
/* Spam trap for bots: kept off-screen, out of the tab order and hidden from screen readers. */
.form-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 90; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 12px 16px; font-size: 14.5px; line-height: 1.4; width: max-content; max-width: min(460px, calc(100vw - 32px)); box-shadow: 0 18px 40px -16px rgba(25,23,20,.55); transition: opacity .25s, transform .35s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); flex: none; }
@media (max-width: 760px) { .toast { bottom: 84px; } }

/* ---------- Reveal (only when JS has added html.motion) ---------- */
html.motion .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.motion .reveal.in { opacity: 1; transform: none; }
html.motion .reveal.d1 { transition-delay: .08s; }
html.motion .reveal.d2 { transition-delay: .16s; }
html.motion .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- System pages: shared parts ---------- */
.try { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 15.5px; color: var(--ink-2); }
.try::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); flex: none; }
.demo-stage { width: min(1320px, 100% - 2 * var(--gutter)); margin: 40px auto 0; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 72px; align-items: start; }
.split .lead { margin-top: 16px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.pair-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: 28px 30px; }
.pair-card h2 { font-size: clamp(22px, 2.2vw, 28px); max-width: none; }
.pair-card p { margin-top: 8px; color: var(--ink-3); max-width: 62ch; }
@media (max-width: 760px) { .pair-card { grid-template-columns: 1fr; } }
.plan-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 22px 0; border-block: 1px solid var(--line); font-size: 17px; color: var(--ink-3); }
.other-sys { list-style: none; margin: 32px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.other-sys a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink-3); font-size: 15.5px; line-height: 1.5; transition: border-color .2s, transform .25s var(--ease); }
.other-sys a strong { color: var(--ink); font-size: 17px; font-weight: 600; }
.other-sys a:hover { border-color: var(--ink); transform: translateY(-2px); }
@media (max-width: 1100px) { .other-sys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .other-sys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .other-sys { grid-template-columns: 1fr; } }
.trust { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trust li { padding: 22px 24px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.trust h3 { font-size: 17px; margin-bottom: 6px; }
.trust p { font-size: 16px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 960px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .trust { grid-template-columns: 1fr; } }

/* ---------- Guides ---------- */
.guide-head h1 { font-size: clamp(32px, 4vw, 50px); max-width: 24ch; }
.guide { padding-top: 28px; }
.guide-body { font-size: 18px; line-height: 1.65; color: var(--ink-3); }
.guide-body h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 52px 0 14px; max-width: 30ch; }
.guide-body p + p, .guide-body p + ul, .guide-body p + ol, .guide-body ul + p, .guide-body ol + p { margin-top: 16px; }
.guide-body ul, .guide-body ol { margin: 0; padding-left: 22px; }
.guide-body li + li { margin-top: 8px; }
.guide-body a { color: var(--accent-ink); }
.answer { margin-top: 8px; padding: 24px 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.answer h2 { margin: 0 0 12px; font-size: 20px; }
.text-eg { margin: 16px 0 0; padding: 14px 18px; background: var(--tint); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.text-eg + .text-eg { margin-top: 10px; }
.text-eg b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.guide-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; }
.guide-list a { display: block; padding: 24px 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.guide-list a:hover { border-color: var(--line-2); }
.guide-list h2 { font-size: 21px; max-width: none; }
.guide-list p { margin-top: 8px; font-size: 16.5px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 760px) { .guide-body { font-size: 17px; } .guide-body h2 { margin-top: 40px; } }