/* overdesk.io homepage. Written by hand, built to assets/h/site.<sha8>.css by scripts/build.py.
   Direction A of the homepage design ("a calm ledger"): hairline-ruled sections on warm paper, a
   split hero with the demo above the fold. Every font is self-hosted (the CSP allows no other
   origin), and the stylesheet carries no data: URI for the same reason.

   The demo has two layouts. Without scripting it is a plain list of five final frames with
   captions. With scripting on it is the stepper, and the stepper's rules do not wait for demo.js:
   before the script runs the window has its final size (the controls are only invisible and the
   first frame shows), so the page does not move when the script lands. No rule gives the window a
   height. All five frames sit in one grid cell, so the window is as tall as the tallest frame at
   the width it has, and each frame's caption sits in a second shared row beside the live caption bar. */

@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/26d4368bf94c0ec4-s.p.woff2) format("woff2");
  unicode-range: U+00??, 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;
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/d3ebbfd689654d3a-s.p.woff2) format("woff2");
  unicode-range: U+00??, 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;
}
/* The system font the page shows until Plex Sans arrives, sized to match it. */
@font-face {
  font-family: "Plex Sans Fallback";
  src: local("Arial");
  ascent-override: 101.32%;
  descent-override: 27.18%;
  line-gap-override: 0%;
  size-adjust: 101.17%;
}

:root {
  --paper: #FAFAF7;
  --ink: #121B16;
  --ink-2: #434F48;
  --ink-3: #5E6A63;
  --card: #FFFFFF;
  --rule: #DDE1DB;
  --rule-strong: #B9C0B7;
  --well: #F2F3EE;
  --green: #1F7A54;
  --green-hover: #186345;
  --green-tint: #DCEFE4;
  --green-ink: #14583D;
  --green-edge: #A9D5BD;
  --amber: #9A5D10;
  --amber-tint: #F7EBDC;
  --sans: "Plex Sans", "Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea { font-family: var(--sans); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 20; padding: 12px 16px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 600; }
.skip:focus { top: 12px; }
section[id], .demo[id] { scroll-margin-top: 16px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 8px; font: 600 16px/1 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color 240ms ease-out, border-color 240ms ease-out, transform 120ms ease-out, box-shadow 120ms ease-out; }
.btn.pressed { transform: scale(0.95); background: var(--green-hover); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3); }
.btn.primary { background: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-hover); }
.btn.second { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.second:hover { background: var(--well); }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* Header */
.nav { border-bottom: 1px solid var(--rule); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 21px; letter-spacing: -0.02em; text-decoration: none; }
.brand .mark { display: block; width: 22px; height: 22px; background: url(/favicon.svg) center / 22px no-repeat; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--ink-2); padding: 12px 0; border-bottom: 1px solid transparent; }
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* A header item that no longer fits scrolls the page sideways, which tests/layout fails, rather
   than wrapping into a tall stack nothing checks. */
.nav-links a, .nav .btn { white-space: nowrap; }

/* Hero */
.hero { padding: 44px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.eyebrow { margin: 4px 0 16px; font-size: 15px; font-weight: 600; color: var(--green-ink); }
h1 { margin: 0 0 24px; font-size: 64px; line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.lede { margin: 0 0 12px; font-size: 18px; max-width: 34em; }
.lede2 { margin: 0 0 28px; color: var(--ink-2); max-width: 34em; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.fine { margin: 14px 0 0; font-size: 14px; color: var(--ink-3); }
.works { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 2; color: var(--ink-2); }
.hd { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; white-space: nowrap; vertical-align: middle; }
.hd svg, .hd .lg-img { flex: none; display: block; }
.hd .lg-img { width: 18px; height: 18px; border-radius: 4px; }
.lg-img { background-size: contain; background-repeat: no-repeat; }
.lg-freescout { background-image: url(/assets/img/freescout.png); }
.lg-freemius { background-image: url(/assets/img/freemius.png); }

/* The demo: without JavaScript, a list of five final frames */
.demo { min-width: 0; }
.win { overflow: hidden; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 1px 0 rgba(18, 27, 22, 0.04), 0 28px 48px -28px rgba(18, 27, 22, 0.22); }
.chrome, .js-only, .only-static { display: none; }
.only-static { display: block; }
.frames { margin: 0; padding: 0; list-style: none; }
.frames > li { border-top: 1px solid var(--rule); }
.frames > li:first-child { border-top: 0; }
.fbody { padding: 14px 24px 0; }
.fcap { margin: 14px 24px 18px; padding-top: 12px; border-top: 1px dashed var(--rule-strong); font-size: 15px; color: var(--ink-2); }
.demo-note { margin: 12px 4px 0; font-size: 14px; color: var(--ink-3); }

.pane-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.pane-head h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pane-head h3:focus-visible { outline-offset: 3px; }
.pane-head .ctx { font-size: 14px; color: var(--ink-3); }
.pane-head .ctx.r { margin-left: auto; font-variant-numeric: tabular-nums; }

/* The stepper. Every rule that makes it lives here, under scripting, and none waits for demo.js. */
@media (scripting: enabled) {
  .win { display: grid; grid-template-columns: minmax(0, 1fr); }
  .demo .chrome { display: block; }
  .demo .ctrl.chrome { display: flex; }
  .demo .seg.chrome { display: inline-flex; }
  .demo .js-only { display: inline-flex; }
  .demo .fact.js-only, .demo .dact.js-only { display: flex; }
  .demo .only-static { display: none; }
  /* Until demo.js has run the controls are there to hold their room, and are neither seen nor reached. */
  .demo:not([data-enhanced]) .chrome { visibility: hidden; }
}
/* Under reduced motion demo.js opens step 4 on what the AI reads, not on the customer's words. */
@media (scripting: enabled) and (prefers-reduced-motion: reduce) {
  .demo:not([data-enhanced]) .secret .raw { display: none; }
  .demo:not([data-enhanced]) .secret .pill { display: inline-flex; }
}
.win-top { background: var(--paper); border-bottom: 1px solid var(--rule); }
.rail { display: flex; margin: 0; padding: 0; list-style: none; }
.rail li { flex: 1; min-width: 0; }
.rail li + li button { border-left: 1px solid var(--rule); }
.rail button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 6px; background: none; border: 0; font: 600 14px/1 var(--sans); color: var(--ink-3); cursor: pointer; }
.rail button:hover { color: var(--ink); background: var(--well); }
.rail button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--rule-strong); transition: background-color 240ms ease-out, border-color 240ms ease-out; }
.rail li.done button::before { background: var(--green); border-color: var(--green); }
.rail button[aria-current="step"] { color: var(--ink); }
.rail button[aria-current="step"]::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.rail button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 240ms ease-out; }
.rail button[aria-current="step"]::after { transform: scaleX(1); }
.prog { display: none; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; overflow: hidden; background: var(--green-tint); pointer-events: none; }
.prog span { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; }
.prog.run span { animation: fill var(--dur, 3000ms) linear forwards; }
@keyframes fill { to { transform: scaleX(1); } }
.win.playing .rail button[aria-current="step"]::after { display: none; }
.win.playing .rail button[aria-current="step"] .prog { display: block; }
.stepline { position: relative; display: none; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; font-size: 14px; }
.stepline strong, .stepline .nm { font-weight: 700; white-space: nowrap; }
.stepline .nm { font-weight: 400; color: var(--ink-2); }
.stepline .bars { display: flex; gap: 4px; margin-left: auto; }
.stepline .bars span { display: block; width: 18px; height: 4px; border-radius: 2px; background: var(--rule); transition: background-color 240ms ease-out; }
.stepline .bars span.on { background: var(--green); }
.win.playing .stepline .prog { display: block; bottom: 0; }

.frames.s2 #f1 .pane-head { visibility: hidden; }

/* Rows of the window: 1 controls on top, 2 the frames, 3 the captions, 4 Back/Next. Each frame spans
   rows 2 and 3 through two subgrids, so a frame's body sizes row 2 and its caption sizes row 3, and
   the live caption bar (#cap) is in row 3 too. Every frame is in the same cells, so rows 2 and 3 are
   as tall as the tallest body and the tallest caption, whichever frame shows. The five captions in
   the frames are only measured (visibility: hidden); the bar is the one a visitor sees. */
@media (scripting: enabled) {
  .win-top, .frames, .cap, .ctrl { grid-column: 1; }
  .win-top { grid-row: 1; }
  .stage { display: contents; }
  .frames { grid-row: 2 / 4; display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid; }
  .demo .frames > li { grid-area: 1 / 1 / span 2 / auto; display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid; overflow: hidden; border-top: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 240ms ease-out, transform 240ms ease-out, visibility 0s linear 240ms; }
  .demo .frames > li.is-active, .demo:not([data-enhanced]) .frames > li:first-child { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .demo .fbody { grid-row: 1; min-width: 0; padding: 14px 24px 18px; }
  .demo .fcap, .cap { padding: 12px 22px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
  .demo .fcap { grid-row: 2; margin: 0; visibility: hidden; }
  .cap { grid-row: 3; position: relative; background: var(--paper); }
  .ctrl { grid-row: 4; }
}

.ctrl { align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rule); background: var(--card); }
.cbtn { min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color 240ms ease-out, border-color 240ms ease-out; }
.cbtn:hover:not(:disabled) { background: var(--well); border-color: var(--ink-3); }
.cbtn.primary { background: var(--green); border-color: var(--green); color: #fff; padding: 0 22px; }
.cbtn.primary:hover:not(:disabled) { background: var(--green-hover); border-color: var(--green-hover); }
.cbtn:disabled { background: var(--well); border-color: var(--rule); color: var(--ink-3); cursor: default; }

/* Steps 1 and 2: the queue and its findings */
.rows { margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; min-height: 38px; border-bottom: 1px solid var(--rule); font-size: 14.5px; background: var(--card); transition: transform 320ms ease-out, opacity 240ms ease-out, background-color 240ms ease-out; }
.row .who { font-weight: 600; padding-left: 4px; }
.row .subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t { padding-right: 4px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.frames.s2 .queue { pointer-events: none; }
.frames.s2 .row.crash { background: var(--green-tint); }
.frames.s2 .row:not(.crash) { opacity: 0; transition-delay: 240ms; }
.frames.s2.fly .row.crash { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3); opacity: 0; transition-delay: var(--d, 0ms); }

.findings { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.frames.s2 .findings { pointer-events: auto; }
.fcard { padding: 18px 20px; background: var(--card); border: 1px solid var(--rule-strong); border-left: 4px solid var(--green); border-radius: 10px; }
.fcard h4 { margin: 0 0 12px; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; max-width: 28em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--well); color: var(--ink-2); font-size: 13px; font-weight: 600; line-height: 1.3; }
.chip.high { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.warn { background: var(--amber-tint); border-color: #E3C9A4; color: var(--amber); }
.chip.ev { background: var(--card); border-color: var(--green-edge); color: var(--green-ink); }
.chip.pro { background: var(--card); border-color: var(--green); color: var(--green-ink); }
.fact { align-items: center; gap: 14px; margin-top: 16px; }
.fdim { padding: 12px 16px; background: var(--well); border: 1px solid var(--rule); border-radius: 10px; color: var(--ink-2); }
.fdim h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.fdim .chip { background: var(--card); }
@media (scripting: enabled) {
  .demo .findings { pointer-events: none; }
  .demo .fcard { opacity: 0; transform: scale(0.98); transition: opacity 240ms ease-out, transform 240ms ease-out; }
  .demo .frames.formed .fcard { opacity: 1; transform: none; }
  .demo .fdim { opacity: 0; transform: translateY(4px); transition: opacity 240ms ease-out, transform 240ms ease-out; }
  .demo .frames.dimin .fdim { opacity: 1; transform: none; }
  .demo .frames.dimin .fdim + .fdim { transition-delay: 80ms; }
}

/* Step 3: the issue */
.issue { display: grid; grid-template-columns: 4fr 6fr; gap: 24px; padding-top: 14px; }
.k { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.dests { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 12px; }
.dest { margin: 0; font-size: 14.5px; font-weight: 600; }
.field { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--card); color: var(--ink); font: 600 15px/1.35 var(--sans); resize: none; }
.field:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.iact { margin-top: 16px; }
.done-line { position: relative; display: flex; align-items: center; margin: 0; min-height: 48px; padding-left: 28px; font-weight: 700; color: var(--green-ink); }
.done-line::before { content: ""; position: absolute; left: 0; top: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--green); }
.done-line::after { content: ""; position: absolute; left: 6px; top: calc(50% - 5px); width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.brief { padding: 12px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; display: grid; gap: 8px; align-content: start; }
.brief h4 { margin: 0 0 1px; font-size: 13px; font-weight: 700; }
.brief p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; color: var(--ink); }
.brief .code { margin: 0; padding: 7px 9px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; }

/* Step 4: the reply */
.seg { margin-top: 12px; padding: 3px; background: var(--well); border: 1px solid var(--rule); border-radius: 10px; }
.seg button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color 240ms ease-out, color 240ms ease-out; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-strong); }
.seg button[aria-pressed="true"][data-v="ai"] { background: var(--green); color: #fff; box-shadow: none; }
.only-static { margin-top: 12px; }
.msg { margin-top: 10px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; font-size: 14.5px; line-height: 1.75; }
.msg p { margin: 0; }
.draft { margin-top: 12px; padding: 12px 16px 14px; border: 1px solid var(--rule-strong); border-radius: 10px; }
.draft .chips { margin: 4px 0 10px; }
.draft p { margin: 0; font-size: 14.5px; line-height: 1.5; }

/* A hidden span and its pill. Without JavaScript the pill shows; the stepper starts on the customer's own words and sweeps each span into its pill. */
.secret { display: inline; }
.secret .raw { display: none; position: relative; overflow-wrap: anywhere; }
@media (scripting: enabled) {
  .demo .secret .raw { display: inline-block; }
  .demo .secret .pill { display: none; }
  .demo .secret.done .raw { display: none; }
  .demo .secret.done .pill { display: inline-flex; animation: pillin 200ms ease-out; }
  /* The message, its two views (customer, then AI) as hidden copies in the page, share one grid cell: the cell is as tall as the taller view, in the page as served and after every switch. */
  .demo #msg { display: grid; grid-template-columns: minmax(0, 1fr); }
  .demo #msg > * { grid-area: 1 / 1; }
  .demo #msg > .ghost { display: block; visibility: hidden; }
  .demo .ghost-ai .secret .raw { display: none; }
  .demo .ghost-ai .secret .pill { display: inline-flex; }
}
/* Without the stepper the copies are not there at all. */
.ghost { display: none; }
.secret .raw::after { content: ""; position: absolute; inset: -1px -3px; border-radius: 3px; background: var(--green); opacity: 0.32; clip-path: inset(0 100% 0 0); }
.secret.sweep .raw::after { animation: sweep 240ms ease-out forwards; }
@keyframes sweep { to { clip-path: inset(0 0 0 0); } }
@keyframes pillin { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.pill { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--green-edge); background: var(--green-tint); color: var(--green-ink); font: 600 13px/1.6 var(--sans); white-space: nowrap; vertical-align: baseline; cursor: default; margin: -4px 0; /* a pill never makes its line taller than the text it replaces, so step 4 is as tall with pills as without */ }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.pill-tok { position: absolute; z-index: 6; left: 0; top: calc(100% + 6px); width: max-content; max-width: 230px; padding: 4px 8px; border-radius: 6px; background: var(--ink); color: #fff; font: 400 12px/1.4 var(--mono); overflow-wrap: anywhere; white-space: normal; visibility: hidden; opacity: 0; transition: opacity 120ms ease-out; pointer-events: none; }
.pill:hover .pill-tok, .pill:focus .pill-tok { visibility: visible; opacity: 1; }

/* Step 5: a help desk thread */
.thread { display: grid; gap: 10px; padding-top: 12px; }
.tmsg { padding: 10px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }
.tmsg b { font-size: 14px; }
.tmsg .m { margin-left: 8px; font-size: 13px; color: var(--ink-3); }
.tmsg p { margin: 2px 0 0; font-size: 14.5px; }
.tdraft { padding: 12px 16px 14px; background: var(--card); border: 1.5px dashed var(--ink-3); border-radius: 10px; transition: border-color 240ms ease-out, background-color 240ms ease-out; }
.tdraft .lab { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.tdraft .lab::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--ink-3); }
.tdraft p.body { margin: 0; font-size: 14.5px; line-height: 1.5; }
.tdraft .dact { margin-top: 12px; }
.tdraft.sent { border: 1px solid var(--green-edge); background: var(--green-tint); }
.tdraft.sent .lab { color: var(--green-ink); }
.tdraft.sent .lab::before { border: 0; background: var(--green); }
.end { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 12px 16px; background: var(--ink); color: #fff; border-radius: 10px; }
.end p { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.end .acts { display: flex; gap: 8px; margin-left: auto; }
.end .btn.primary { background: #fff; color: var(--green-ink); }
.end .btn.primary:hover { background: var(--green-tint); }
.thread.sentmode .tmsg { padding: 6px 14px; }

/* Sections */
.sect { border-top: 1px solid var(--rule); padding: 96px 0; }
.sect h2 { margin: 0 0 18px; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.sub { margin: 0 0 36px; max-width: 34em; color: var(--ink-2); }

/* Customer story: the seeded chain, no customer in it */
.story .kicker, .intel .kicker { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--green-ink); }
.story h2, .intel h2 { max-width: 22em; }
/* The customer quote: one quote and who said it, centred, no card. scripts/guards/customers.py pins the quote and this WHOLE section (quote, caption, anything added) by hash in one signed row, and the logo by its bytes. A copy edit here is a new sign-off; a CSS edit is not. */
.proof { padding: 96px 0; }
.quote { margin: 0 auto; max-width: 40em; text-align: center; }
.quote blockquote { margin: 0; font-size: 30px; line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
.quote blockquote p { margin: 0; }
.quote figcaption { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 32px; }
.by { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.by strong { color: var(--ink); font-size: 16px; }
.by-name, .by-title { display: block; }
.proof-logo { display: block; max-width: 100%; height: 18px; width: auto; }
.chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.chain li { display: grid; gap: 12px; align-content: start; min-width: 0; }
.shot { position: relative; aspect-ratio: 4 / 3; padding: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; }
.shot.ext { background: var(--well); border-style: dashed; }
.sh { display: block; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.mq { display: block; margin: 0 0 4px; font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.sh2 { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.sk { display: block; height: 7px; margin: 0 0 7px; border-radius: 4px; background: var(--rule); }
.sk.h { width: 55%; height: 10px; background: var(--rule-strong); }
.sk.w8 { width: 80%; } .sk.w6 { width: 62%; } .sk.w4 { width: 42%; }
.hl { display: grid; gap: 6px; margin: 8px 0; padding: 8px; border: 1px solid var(--green-edge); border-radius: 6px; background: var(--green-tint); }
.hl .sk { margin: 0; background: var(--green-edge); }
.hlt { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--green-ink); }
.mchips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.mchips span { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rule); background: var(--well); font-size: 11px; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.mchips span.am { background: var(--amber-tint); border-color: #E6C9A3; color: var(--amber); }
.mbtn { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 4px; background: var(--green); color: #fff; font-size: 11.5px; font-weight: 600; }
.chain h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.chain h3::before { counter-increment: step; content: counter(step) ". "; color: var(--green-ink); }
.chain p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.stops { margin: 28px 0 0; font-size: 16px; font-weight: 600; }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
/* A card is the mock, h3 and p, in that order, on three subgrid rows, so the cards' headings and texts line up
   whatever each mock's height. tests/layout/checks.mjs holds the order and the alignment. */
.feats li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: 22px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--card); }
.feats h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.feats p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.feats .shot { aspect-ratio: auto; margin: 0 0 16px; }

/* Integrations: a ruled ledger, label | logos | note */
.sect.integ { padding: 80px 0; }
.integ .sub { margin-bottom: 36px; }
.groups { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); }
.grp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "lab logos note"; column-gap: 40px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.grp h3 { grid-area: lab; margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.grp .gnote { grid-area: note; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.logos { grid-area: logos; display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.lg { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.lg svg, .lg .lg-img { flex: none; display: block; width: 30px; height: 30px; }
.lg .lg-img { border-radius: 6px; }
.live { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--green-edge); background: var(--green-tint); color: var(--green-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.5; }

/* Trust */
.trust { background: var(--well); border-bottom: 1px solid var(--rule); }
.trust-top { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.trust .sub { margin: 0 0 22px; }
.trust-more { margin: 0; font-size: 16px; font-weight: 600; }
.trust-more a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.held { background: var(--card); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; }
.held .ban { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; }
.held .ban::before { content: ""; flex: none; width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.held .held-label { margin: 0; padding: 12px 16px 0; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.held .dr { margin: 0; padding: 4px 16px 12px; font-size: 15px; line-height: 1.9; }
.held .held-note { margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--rule); font-size: 14.5px; color: var(--ink-2); }
.snips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; }
.snip { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; min-width: 0; }
.snip .k { margin: 0 0 4px; }
.snip code { display: block; font: 400 13.5px/1.9 var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.snip mark { background: var(--green-tint); color: var(--ink); padding: 0 2px; border-radius: 3px; }
.snip .pill { position: static; font-size: 12.5px; line-height: 1.5; }
.snip code[data-ai] { position: relative; }
.snip .pill-tok { left: 0; right: 0; width: auto; max-width: none; top: calc(100% + 4px); }
.snip .stamp { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; font-weight: 600; color: var(--green-ink); }
.built { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid var(--rule-strong); font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; max-width: 30em; }

/* Close and FAQ */
.closer { padding: 40px; background: var(--ink); color: #fff; border-radius: 14px; }
.closer h2 { max-width: 20em; margin-bottom: 24px; }
.closer .btn.primary { background: #fff; color: var(--green-ink); }
.closer .btn.primary:hover { background: var(--green-tint); }
.closer .btn.second { color: #fff; border-color: #fff; }
.closer .btn.second:hover { background: #26332B; }
.closer .fine { color: #C9D1CB; }
.faq-h { margin: 56px 0 20px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.q h4 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.q p { margin: 0; max-width: 34em; color: var(--ink-2); }
.q a, .faq-more a { color: var(--green-ink); }
.faq-more { margin: 32px 0 0; color: var(--ink-2); }

/* Footer */
.foot { padding: 36px 0 48px; border-top: 1px solid var(--rule); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; }
.foot p { margin: 0; font-size: 15px; color: var(--ink-2); }
.foot nav { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; font-size: 15px; }
.foot .fg { min-width: 0; }
.foot nav ul { margin: 0; padding: 0; list-style: none; }
.foot .fg-h { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.foot nav a { display: inline-block; padding: 10px 0; text-decoration: none; color: var(--ink-2); overflow-wrap: anywhere; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }

/* Mid widths */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .trust-top { grid-template-columns: 1fr; gap: 32px; }
  .grp { grid-template-columns: 1fr; grid-template-areas: "lab" "note" "logos"; row-gap: 6px; align-items: start; padding: 20px 0; }
  .grp .gnote { max-width: 40em; margin-bottom: 8px; }
  .snips { grid-template-columns: repeat(2, 1fr); }
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feats { grid-template-columns: 1fr; gap: 16px; max-width: 44em; }
  .nav-links { gap: 20px; }
}

/* Tablet: the six nav links and the button need 866px on one line (ELV-359 added Enterprise),
   so up to 900px the two links to homepage sections step out (build.py's SITE_NAV_LINKS marks
   them; the footer has both) and the header's gap narrows, which fits from 641px. */
@media (min-width: 641px) and (max-width: 900px) {
  .nav .wrap { gap: 16px; }
  .nav-links .wide { display: none; }
}

/* Laptop: the hero keeps two columns, so the demo is at its narrowest. Step 3 drops its optional
   brief sections, which would otherwise make it 50px taller than any other step, and the window with it. */
@media (min-width: 1101px) and (max-width: 1365px) and (scripting: enabled) {
  .demo .brief .opt { display: none; }
}

/* The legal pages (privacy, terms, security, docs/security): the product's markdown, rendered by
   build.py. A reading column, not the homepage's grid. */
.prose { max-width: 824px; margin: 48px auto 96px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.crumb { margin: 0 0 18px; font-size: 14px; color: var(--ink-3); }
.crumb a { color: inherit; text-underline-offset: 3px; }
.crumb a:hover { color: var(--ink); }
.prose h1 { margin: 0; font-size: 44px; line-height: 1.1; color: var(--ink); }
.prose .subtitle { margin: 12px 0 0; font-size: 14px; color: var(--ink-3); }
.prose h2 { margin: 48px 0 8px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.prose h3 { margin: 32px 0 4px; font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.prose p { margin: 16px 0; }
.prose ul { margin: 12px 0; padding-left: 24px; }
.prose li { margin: 6px 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--green-ink); text-underline-offset: 3px; }
.prose code { padding: 1px 5px; border-radius: 4px; background: var(--well); font: 400 14px/1.5 var(--mono); overflow-wrap: anywhere; }
.prose .table-wrap { margin: 16px 0; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.prose th, .prose td { padding: 8px 12px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose th { background: var(--well); font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .prose { margin: 32px auto 64px; }
  .prose h1 { font-size: 34px; }
}

/* The comparison page (ELV-317): another vendor's column beside ours, job by job. */
.vs-hero h1 { font-size: 56px; max-width: 17em; }
.vs-hero .lede, .vs-hero .lede2 { max-width: 40em; }
.vs-wrap { max-width: 1080px; overflow-x: auto; }
.vs { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.vs th, .vs td { padding: 14px 16px; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.vs thead th { border-top: 0; font-size: 14px; color: var(--ink-3); }
.vs tbody th { width: 24%; font-weight: 600; }
.vs td { width: 38%; color: var(--ink-2); }
.vs td.us { background: var(--green-tint); color: var(--ink); }
.enough { display: grid; gap: 16px; max-width: 40em; }
.enough p { margin: 0; color: var(--ink-2); }
.feats + .enough, .enough + .sub { margin-top: 28px; }
/* Phone: each job is a card, its two answers stacked under it and labelled, since three columns
   do not fit. The header row stays for screen readers. */
@media (max-width: 640px) {
  .vs-hero h1 { font-size: 38px; }
  .vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs, .vs tbody, .vs tr, .vs th, .vs tbody th, .vs td { display: block; width: auto; }
  .vs tr { padding: 16px 0; border-top: 1px solid var(--rule); }
  .vs th, .vs td { padding: 0; border-top: 0; }
  .vs td { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--well); }
  .vs td::before { content: attr(data-col); display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
}

/* Phone */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .nav .wrap { height: 60px; gap: 12px; }
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; min-height: 44px; padding: 0 16px; font-size: 15px; }
  .hero { padding: 28px 0 48px; }
  h1 { font-size: 38px; line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 18px; }
  .lede { font-size: 17px; }
  .cta .btn { flex: 1 1 0; padding: 0 12px; }
  .works { margin-top: 24px; }
  .hero-grid { gap: 32px; }
  .fbody { padding: 10px 14px 0; }
  .fcap { margin: 14px 14px 12px; }
  .win { border-radius: 10px; }
  .rail { display: none; }
  .pane-head h3 { font-size: 16px; }
  .pane-head .ctx { font-size: 13px; }
  .ctrl { gap: 6px; padding: 8px; }
  .cbtn { padding: 0 12px; font-size: 14px; }
  #next { flex: 1; min-height: 48px; }
  .row { grid-template-columns: 1fr auto; grid-template-areas: "who t" "subj subj"; gap: 0 10px; min-height: 62px; padding: 6px 0; align-content: center; font-size: 14px; }
  .row .who { grid-area: who; font-size: 13px; padding-left: 2px; }
  .row .t { grid-area: t; }
  .row .subj { grid-area: subj; padding-left: 2px; }
  .fcard { padding: 14px 14px; }
  .fcard h4 { font-size: 18px; margin-bottom: 10px; }
  .fact { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .fact .btn { width: 100%; min-height: 48px; }
  .findings { gap: 10px; }
  .fdim { padding: 10px 12px; }
  .issue { grid-template-columns: 1fr; gap: 12px; padding-top: 10px; }
  .field { font-size: 14px; padding: 8px 10px; }
  #ititle { height: 58px; }
  .brief { padding: 8px 12px; gap: 6px; }
  .dests { margin-bottom: 8px; }
  .dests .k { display: none; }
  .mono { font-size: 11px; }
  .note { margin-top: 4px; font-size: 13px; }
  .iact { margin-top: 8px; }
  .iact .btn { width: 100%; min-height: 48px; }
  .seg button { flex: 1; padding: 0 4px; font-size: 13px; white-space: nowrap; }
  .msg { font-size: 13px; line-height: 1.65; padding: 10px 12px; }
  .pill { font-size: 12px; padding: 0 8px 0 7px; }
  .draft { padding: 10px 12px; margin-top: 10px; }
  .draft p { font-size: 13px; line-height: 1.42; }
  .draft .chips { margin: 0 0 8px; }
  .thread.sentmode .tmsg { display: none; }
  .chip { font-size: 11.5px; padding: 1px 8px; min-height: 24px; }
  .tmsg p { font-size: 13.5px; }
  .tdraft { padding: 10px 12px 12px; }
  .tdraft p.body { font-size: 13px; line-height: 1.42; }
  .tdraft .dact .btn { width: 100%; min-height: 48px; }
  .end { padding: 12px; }
  .end .acts { margin-left: 0; width: 100%; }
  .end .acts .btn { flex: 1; padding: 0 10px; }
  .sect { padding: 64px 0; }
  .sect.integ { padding: 56px 0; }
  .integ .sub { margin-bottom: 24px; }
  .logos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
  .lg { min-width: 0; font-size: 15.5px; flex-wrap: wrap; }
  .sect h2 { font-size: 28px; }
  .proof { padding: 56px 0; }
  .quote blockquote { font-size: 21px; }
  .chain { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .chain p { font-size: 14px; }
  .shot { padding: 10px; }
  .snips { grid-template-columns: 1fr; margin-top: 40px; }
  .built { font-size: 21px; margin-top: 40px; }
  .closer { padding: 28px 20px; }
  .faq { grid-template-columns: 1fr; gap: 28px; }
  .foot nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
/* The phone stepper: the same demo, with the optional detail dropped so each step fits a short screen. */
@media (max-width: 640px) and (scripting: enabled) {
  .demo .stepline { display: flex; }
  .demo .fbody { padding: 10px 14px 8px; }
  .demo .fcap, .cap { padding: 10px 14px; font-size: 14px; }
  .demo .row:nth-child(n+6) { display: none; }
  .demo .brief .opt, .demo .brief .opt2 { display: none; }
  .demo .icol > .k { display: none; }
  .demo .seg.chrome { display: flex; margin-top: 10px; }
  .demo .draft .k { display: none; }
}
@media (max-width: 340px) {
  .pane-head { gap: 8px; }
  .pane-head .ctx { font-size: 12px; white-space: nowrap; }
  .pane-head .ctx:not(.r) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .seg button { font-size: 12px; padding: 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Pricing (ELV-279): the plans, Enterprise and the cost calculator, on the homepage's tokens. */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.pricing-hero h1 { font-size: 56px; max-width: 15em; }
.pricing-hero .lede { max-width: 38em; }
.save { display: inline-flex; align-items: center; gap: 8px; margin: 28px 0 0; padding: 6px 12px; border-radius: 999px; background: var(--green-tint); color: var(--green-ink); font-size: 14px; font-weight: 600; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.tier { display: flex; flex-direction: column; padding: 24px; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 12px; }
.tier.rec { border: 2px solid var(--green); padding: 23px; }
.tier-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tier h3, .ent h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.tag { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 20px 0 0; }
.amt .num { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
.amt .per { font-size: 14px; color: var(--ink-3); }
.alt { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.floor { margin: 2px 0 20px; font-size: 14px; color: var(--ink-3); }
.bul { flex: 1; display: grid; gap: 10px; align-content: start; margin: 0 0 24px; padding: 18px 0 0; border-top: 1px solid var(--rule); list-style: none; font-size: 15px; line-height: 1.45; }
.bul li { position: relative; padding-left: 24px; }
.bul li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 5px; border: solid var(--green); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.tier .btn { width: 100%; }
.ent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px 48px; align-items: center; margin-top: 16px; padding: 24px; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 12px; }
.ent .amt { margin-top: 14px; }
.ent .btn { margin-top: 18px; }
.when-h { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.when { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-2); }
.when li { padding-left: 20px; position: relative; }
.when li::before { content: "\2192"; position: absolute; left: 0; color: var(--ink-3); }
.pro-all { margin: 28px 0 0; max-width: 46em; padding-left: 16px; border-left: 3px solid var(--green); font-size: 16px; }
.sect .eyebrow { margin-top: 0; }
.calc { max-width: 960px; background: var(--card); border: 1px solid var(--rule-strong); border-radius: 12px; overflow: hidden; }
.calc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 20px; border-bottom: 1px solid var(--rule); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.calc-in { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; padding: 20px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.calc-in label { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; }
.calc-in label span { color: var(--green-ink); font-variant-numeric: tabular-nums; }
.calc-in input[type="range"] { width: 100%; min-height: 44px; margin: 4px 0 0; accent-color: var(--green); }
.stepper { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.stepper button { min-width: 44px; min-height: 44px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 18px; cursor: pointer; }
.stepper button:hover { background: var(--well); }
.stepper input { width: 72px; min-height: 44px; border: 1px solid var(--rule-strong); border-radius: 8px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.calc-static { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--rule); font-size: 15px; font-weight: 600; }
.calc-rows { margin: 0; padding: 0; list-style: none; }
.calc-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: baseline; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.calc-rows li.us { background: var(--green-tint); }
.vn { font-size: 15px; font-weight: 600; }
.vu { font-size: 13.5px; font-weight: 400; color: var(--ink-3); }
.vu.ai { color: var(--green-ink); font-weight: 600; }
.vc { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.us .vc { color: var(--green-ink); }
.bar { grid-column: 1 / -1; display: block; height: 8px; border-radius: 4px; background: var(--well); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; background: var(--rule-strong); transition: width 200ms ease-out; }
.us .bar span { background: var(--green); }
.calc-foot { margin: 0; padding: 12px 20px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.calc-foot + .calc-foot { padding-top: 0; }
.calc + .cta { margin-top: 28px; }
.compare { margin: 24px 0 0; font-size: 15px; color: var(--ink-2); }
.compare a { color: var(--green-ink); text-underline-offset: 3px; }
/* The integrations pages (ELV-403): a help desk's catalogue lines and facts, the hub's catalogue. */
.does { display: grid; gap: 10px; max-width: 40em; margin: 0; padding: 0 0 0 22px; color: var(--ink-2); }
.setup { margin: 20px 0 0; font-size: 15px; }
.setup a { color: var(--green-ink); text-underline-offset: 3px; }
.desk-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.desk-cards a { display: block; padding: 22px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--card); font-weight: 700; color: var(--ink); text-decoration: none; }
.desk-cards a:hover { border-color: var(--green-ink); color: var(--green-ink); }
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 40px 0 0; padding: 0; list-style: none; }
.cats h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.cats p { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) {
  .desk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { grid-template-columns: 1fr; }
}
@media (scripting: enabled) {
  .calc .calc-in { display: grid; }
  .calc .only-static { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bar span { transition: none; } }
@media (max-width: 1100px) {
  .tiers { grid-template-columns: 1fr; max-width: 560px; }
  .ent { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 640px) {
  .pricing-hero h1 { font-size: 38px; }
  .calc-in { grid-template-columns: 1fr; }
  .calc-head, .calc-in, .calc-static, .calc-rows li, .calc-foot { padding-left: 16px; padding-right: 16px; }
}