/* The public website: manufactiq.co.uk, in the design signed off on
   11 October 2026 ("manufactiq.co.uk redesign", Rev C), on brand pack v1.0.

   Layout concept: an engineering sheet. Ink header and status strip, an ink
   hero with a faint 48px grid, numbered sections with outlined numerals,
   real product screens in dark frames, and one closing ink band. Paper
   between. Saira Semi Condensed throughout. The signal orange is kept for
   the one action that matters on a view: Book a demo.

   Every animation is CSS only, and all of it switches off for a visitor
   who asks for reduced motion. Scroll-driven reveals use
   animation-timeline where the browser has it and are simply static
   elsewhere.

   Served under the application's Content-Security-Policy, so there is no
   inline style anywhere on these pages: what the design wrote as style=""
   attributes is written here as classes.

   Saira Semi Condensed, self-hosted (SIL OFL 1.1, licence in ../fonts/OFL.txt),
   subset to Latin plus the punctuation and symbols the copy uses. */

@font-face { font-family: 'Saira Semi Condensed'; src: url('../fonts/saira-semi-condensed-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Semi Condensed'; src: url('../fonts/saira-semi-condensed-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Semi Condensed'; src: url('../fonts/saira-semi-condensed-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Saira Semi Condensed'; src: url('../fonts/saira-semi-condensed-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ink: #14171A;
  --ink-soft: #2A2F35;
  --ink-card: #1D2126;
  --ink-line: #2C3238;
  --signal: #F26430;
  --signal-hover: #D9552A;
  --paper: #F7F6F2;
  --white: #FFFFFF;
  --steel: #5B6068;
  --mist: #E4E2DC;
  --mist-soft: #EEECE6;
  --on-ink: #F7F6F2;
  --on-ink-82: rgba(247, 246, 242, .82);
  --on-ink-72: rgba(247, 246, 242, .72);
  --on-ink-60: rgba(247, 246, 242, .6);
  --on-ink-50: rgba(247, 246, 242, .5);
  --on-ink-muted: #A9ADB3;
  --success: #1E8E5A;
  --warning: #C98A12;
  --danger: #C2382B;
  --info: #2F6FA8;

  --font: 'Saira Semi Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 80px;
  --section: clamp(80px, 10vw, 136px);
  --grid: linear-gradient(rgba(247, 246, 242, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 246, 242, .045) 1px, transparent 1px);
  --shadow-screen: 0 32px 64px -32px rgba(20, 23, 26, .3);
  --shadow-float: 0 20px 40px -20px rgba(20, 23, 26, .4);
  --shadow-ink: 0 48px 96px -40px rgba(0, 0, 0, .7);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (max-width: 600px) { :root { --header-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 26px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--paper); color: var(--ink); padding: 12px 16px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; z-index: 100; }
.skip:focus { top: 16px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- type */
.t-display { font-size: clamp(40px, 5.8vw, 84px); line-height: .98; font-weight: 700; letter-spacing: -0.015em; }
.t-h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.t-h1--article { font-size: clamp(36px, 5vw, 60px); line-height: 1; max-width: 20ch; }
.t-h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.t-h3 { font-size: 22px; line-height: 28px; font-weight: 600; }
.t-lede { font-size: 18px; line-height: 1.6; color: var(--steel); text-wrap: pretty; }
.t-small { font-size: 14px; line-height: 21px; }
.label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.muted { color: var(--steel); }
.card .t-h2, .split .t-h2 { font-size: clamp(30px, 3.6vw, 48px); }
/* The outlined numerals and words of the sheet: ink stroke on paper. */
.outline { color: transparent; -webkit-text-stroke: 1.25px var(--ink); }
.outline--light { -webkit-text-stroke: 1px var(--on-ink-72); }
.outline--steel { -webkit-text-stroke-color: var(--steel); }
.numeral { display: block; font-size: clamp(72px, 8vw, 112px); line-height: .85; font-weight: 700; }
.numeral--sm { font-size: clamp(56px, 6vw, 72px); }
/* A twin: the heading's own text drawn once more, outlined, a hair up and
   to the right. The alternative text is empty, so it is never read out. */
.twin { position: relative; display: inline-block; }
.twin::before { content: attr(data-twin) / ""; position: absolute; left: 0; top: 0; width: 100%; transform: translate(.06em, -.06em); color: transparent; -webkit-text-stroke: 1px rgba(247, 246, 242, .42); pointer-events: none; z-index: 0; }
.twin > span { position: relative; z-index: 1; }

/* -------------------------------------------------------------- layout */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(64px, 8vw, 96px); }
.section--white { background: var(--white); border-block: 1px solid var(--mist); }
.section:not(.ink):not(.section--white) + .section:not(.ink):not(.section--white) { padding-top: 0; }
.section--flush-top { padding-top: 0; }
.section-head { display: grid; gap: var(--s4); max-width: 820px; margin-bottom: clamp(40px, 5vw, 56px); }
.section-head .t-lede { max-width: 60ch; }
.section-head--wide { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: var(--s5) clamp(32px, 5vw, 72px); align-items: end; }
.section-head--wide .t-lede { font-size: 16px; line-height: 26px; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s4) var(--s6); }
.stack { display: grid; gap: var(--s4); align-content: start; }
.stack--tight { gap: 6px; }
.stack-lg { display: grid; gap: var(--s6); align-content: start; }
.prose-width { max-width: 66ch; }
.gap-above { margin-top: var(--s5); }
.nowrap { white-space: nowrap; }
.address { font-style: normal; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--s7); } }
.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-sm); border: 1px solid transparent;
  font: 600 17px/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-signal { background: var(--signal); border-color: var(--signal); color: var(--white); font-size: 19px; font-weight: 700; min-height: 56px; padding: 0 28px; }
.btn-signal::after { content: "→"; font-weight: 700; transition: transform .2s ease; }
.btn-signal:hover { background: var(--signal-hover); border-color: var(--signal-hover); color: var(--white); transform: translateY(-2px); }
.btn-signal:hover::after { transform: translateX(4px); }
.btn-signal--plain::after { content: none; }
.btn-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-paper:hover { background: var(--white); }
.btn-ghost-dark { background: transparent; color: var(--on-ink); border-color: var(--on-ink-50); }
.btn-ghost-dark:hover { background: rgba(247, 246, 242, .1); color: var(--on-ink); }
.btn-lg { min-height: 64px; padding: 0 36px; font-size: 21px; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; }
.btn.is-off { opacity: .3; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.text-link:hover { text-decoration-thickness: 2px; }
.arrow-link { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .2s ease; }
.arrow-link::after { content: "→"; transition: transform .2s ease; }
.arrow-link:hover { color: var(--steel); }
.arrow-link:hover::after { transform: translateX(4px); }
.arrow-link--dark { color: var(--on-ink); }
.arrow-link--dark:hover { color: var(--white); }

/* --------------------------------------------------------- status strip */
.site-status { background: var(--ink-card); color: var(--on-ink-72); border-bottom: 1px solid var(--ink-line); font-size: 14px; line-height: 20px; }
.site-status .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding-block: 10px; text-align: center; }
.site-status strong { display: inline-flex; align-items: center; gap: 8px; color: var(--on-ink); font-weight: 600; }
.site-status a { color: var(--on-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--on-ink-50); }
.site-status a:hover { color: var(--white); border-color: var(--white); }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; animation: mq-pulse 2s infinite; }
@media (max-width: 600px) { .site-status .status-more { display: none; } }

/* -------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--on-ink); border-bottom: 1px solid var(--ink-line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; padding-block: 12px; }
.logo { height: 28px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: var(--s6); flex: 1 1 auto; }
.site-nav ul { list-style: none; display: flex; gap: var(--s6); }
.site-nav a { text-decoration: none; color: var(--on-ink-72); font-weight: 500; font-size: 16px; padding-block: 6px; transition: color .15s ease; }
.site-nav a:hover { color: var(--on-ink); }
.site-nav a[aria-current], .site-nav a.is-section { color: var(--on-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--on-ink); }
.nav-signin { margin-left: auto; }
.header-cta { flex: none; display: flex; align-items: center; gap: var(--s4); }
.header-cta .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.nav-toggle { display: none; }
@media (max-width: 960px) {
  .header-row { gap: var(--s3); flex-wrap: wrap; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    background: transparent; color: var(--on-ink); border: 1px solid var(--ink-line); border-radius: var(--r-sm);
    cursor: pointer; order: 3; font-size: 0;
  }
  .js .nav-toggle::before { content: ""; width: 20px; height: 14px; border-block: 2px solid var(--on-ink); box-shadow: inset 0 6px 0 -4px var(--on-ink), inset 0 -6px 0 -4px var(--on-ink); }
  .js .nav-toggle[aria-expanded="true"]::before { content: "×"; width: auto; height: auto; border: 0; box-shadow: none; font-size: 30px; line-height: 1; }
  .header-cta { margin-left: auto; order: 2; }
  .site-nav { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s4); }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li a, .site-nav .nav-signin { display: block; padding: 14px 0; border-top: 1px solid var(--ink-line); font-size: 18px; margin: 0; box-shadow: none; }
}
@media (max-width: 420px) { .logo { height: 24px; } .header-cta .btn { padding: 0 12px; } }

/* --------------------------------------------------------- breadcrumbs */
.crumbs { background-color: var(--ink); color: var(--on-ink-72); padding-top: clamp(24px, 3vw, 40px); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 21px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--on-ink-50); }
.crumbs li[aria-current] { color: var(--on-ink); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--on-ink); text-decoration: underline; }

/* ---------------------------------------------------------------- hero
   Every page opens on ink, with the faint grid of the sheet. The home
   page's hero carries a live job card beside the copy; the others carry
   a screen, a diagram, or copy alone. */
.hero { position: relative; background-color: var(--ink); background-image: var(--grid); background-size: 48px 48px; color: var(--on-ink); padding-block: clamp(48px, 6vw, 88px); }
.crumbs + .hero { padding-top: clamp(32px, 4vw, 56px); }
.hero--short { padding-bottom: clamp(40px, 5vw, 64px); }
.hero--deep { padding-bottom: clamp(160px, 16vw, 220px); }
.hero + .section--flush-top { padding-top: clamp(56px, 7vw, 96px); }
/* A section that climbs over the foot of a deep hero: the dashboard, the plans, the booking card. */
.overlap { position: relative; z-index: 1; margin-top: calc(-1 * clamp(120px, 14vw, 190px)); }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(470px, 100%), 1fr)); gap: 56px clamp(40px, 6vw, 88px); align-items: center; }
.hero-copy { display: grid; gap: var(--s6); align-content: start; min-width: 0; }
.hero--narrow .hero-copy { max-width: 860px; }
.hero .label { color: var(--on-ink-72); }
.hero-copy > .label, .hero-title .label { display: flex; align-items: center; gap: 12px; }
.hero-copy > .label::before, .hero-title .label::before { content: ""; display: block; width: 32px; height: 1px; background: var(--on-ink-50); flex: none; }
.hero .t-lede { color: var(--on-ink-82); max-width: 560px; }
.hero .muted { color: var(--on-ink-72); }
.hero .text-link { color: var(--on-ink); }
.hero-title { display: flex; flex-direction: column; gap: 6px; }
.hero-title .hero-line { font-size: clamp(34px, 4.2vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -0.01em; color: var(--on-ink-60); }
.hero-title .twin { font-size: clamp(56px, 8vw, 116px); line-height: .95; font-weight: 700; letter-spacing: -0.015em; }
.hero-title--long .twin { font-size: clamp(44px, 5.8vw, 84px); line-height: .98; }
.hero-rule { display: flex; align-items: center; gap: 10px; color: var(--on-ink-50); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hero-rule::before, .hero-rule::after { content: ""; flex: none; width: 1px; height: 14px; background: currentColor; }
.hero-rule i { flex: 1; min-width: 16px; height: 1px; background: currentColor; }
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; line-height: 21px; color: var(--on-ink-72); }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); flex: none; }
.hero-art { position: relative; min-width: 0; }
.hero .screen, .hero .diagram { background: var(--ink-card); border-color: var(--ink-line); color: var(--on-ink); box-shadow: var(--shadow-ink); }
.hero .diagram figcaption { color: var(--on-ink-72); border-color: var(--ink-line); }
.hero .byline { color: var(--on-ink-72); }
/* The sheet's corner marks, on the home page only. */
.sheet-marks { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-50); }
.sheet-marks span { display: inline-flex; align-items: center; gap: 10px; }
.sheet-marks span::before, .sheet-marks span::after { content: "+"; font-weight: 400; font-size: 16px; line-height: 1; }
.sheet-marks span:first-child::after, .sheet-marks span:last-child::before { content: none; }
@media (max-width: 960px) { .sheet-marks { display: none; } }

/* ---------------------------------------------------------- live job card */
.jobcard-wrap { position: relative; min-width: 0; padding: 22px 22px 0 0; }
.jobcard-wrap::before { content: ""; position: absolute; top: 0; right: 0; bottom: 22px; left: 22px; border: 1px solid rgba(247, 246, 242, .24); border-radius: 12px; }
.jobcard { position: relative; margin: 0; background: var(--ink-card); border: 1px solid var(--ink-line); border-radius: var(--r-md); padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 22px; box-shadow: var(--shadow-ink); }
.jobcard-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.jobcard-top .label { color: var(--on-ink-60); }
.jobcard-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--ink-line); border-radius: var(--r-sm); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--on-ink); }
.jobcard-states { position: relative; height: 60px; }
.jobcard-state { position: absolute; inset: 0; display: grid; gap: 2px; opacity: 0; animation: mq-cycle 10s infinite both; }
/* The first state shows on its own, so the card reads with animation off. */
.jobcard-state:first-child { opacity: 1; }
.jobcard-state:nth-child(2) { animation-delay: 2.5s; }
.jobcard-state:nth-child(3) { animation-delay: 5s; }
.jobcard-state:nth-child(4) { animation-delay: 7.5s; }
.jobcard-state .label { color: var(--on-ink-60); }
.jobcard-state b { font-size: clamp(26px, 2.6vw, 34px); line-height: 40px; font-weight: 700; }
.jobcard-who { display: grid; gap: 4px; padding: 16px 0; border-block: 1px solid var(--ink-line); }
.jobcard-who span { font-size: 15px; line-height: 22px; color: var(--on-ink-72); }
.jobcard-who b { display: flex; align-items: center; gap: 2px; font-size: 22px; line-height: 28px; font-weight: 600; white-space: nowrap; }
.typing { display: inline-block; animation: mq-type 2.2s steps(26) 1.1s both; }
.caret { display: inline-block; width: 2px; height: 24px; background: var(--on-ink); margin-left: 3px; animation: mq-caret 1s steps(1) infinite; }
.jobcard-value { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.jobcard-value b { font-size: clamp(34px, 3.4vw, 44px); line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.jobcard-value span { font-size: 14px; line-height: 21px; color: var(--on-ink-72); }
.jobcard-progress { display: grid; gap: 10px; }
.jobcard-progress .track { height: 6px; border-radius: 3px; background: var(--ink-line); overflow: hidden; }
.jobcard-progress .track i { display: block; height: 100%; width: 25%; background: var(--on-ink); border-radius: 3px; animation: mq-steps 10s steps(4, jump-start) infinite; }
.jobcard-progress .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-60); }
.jobcard-progress .steps span:last-child { text-align: right; }
.jobcard-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jobcard-stats div { padding: 14px 16px; border-radius: var(--r-sm); background: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.jobcard-stats dt { font-size: 13px; line-height: 18px; color: var(--on-ink-72); }
.jobcard-stats dd { margin: 0; font-size: 28px; line-height: 1; font-weight: 700; }
@media (max-width: 420px) { .jobcard-who b { font-size: 18px; } .typing { animation: none; } }

/* --------------------------------------------------- the dashboard showcase
   Overlaps the hero's foot, tilts into place as it scrolls in, and carries
   three numbered balloons the caption explains. */
.showcase { position: relative; z-index: 1; margin-top: calc(-1 * clamp(120px, 13vw, 170px)); padding-bottom: clamp(48px, 6vw, 72px); }
.showcase figure { margin: 0; display: grid; gap: 28px; }
.showcase-frame { position: relative; transform-origin: 50% 100%; }
.showcase-frame .screen { background: var(--ink-card); border-color: var(--ink-line); border-radius: 10px; box-shadow: 0 60px 120px -40px rgba(20, 23, 26, .6); }
.balloon { position: absolute; width: 0; height: 0; }
.balloon i, .balloon b { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: var(--on-ink); }
.balloon i { animation: mq-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
.balloon b { border: 2px solid var(--ink); display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--ink); font-style: normal; }
.balloon--1 { left: 29.5%; top: 24.5%; }
.balloon--2 { left: 84%; top: 24.5%; }
.balloon--2 i { animation-delay: .8s; }
.balloon--3 { left: 70.5%; top: 59.5%; }
.balloon--3 i { animation-delay: 1.6s; }
.showcase-notes { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px 32px; counter-reset: note; }
.showcase-notes li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 23px; color: var(--steel); }
.showcase-notes li::before { counter-increment: note; content: counter(note); flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink); }
.showcase-notes strong { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) { .balloon i, .balloon b { width: 24px; height: 24px; left: -12px; top: -12px; font-size: 12px; } .showcase { margin-top: -110px; } }

/* ------------------------------------------------------------- marquee */
.marquee { border-block: 1px solid var(--mist); background: var(--white); overflow: hidden; padding: 22px 0; }
.marquee-track { display: flex; width: max-content; animation: mq-marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { list-style: none; display: flex; align-items: center; gap: 40px; padding-right: 40px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.marquee li.dot-sq { width: 10px; height: 10px; background: var(--ink); }
@media (max-width: 600px) { .marquee { padding: 16px 0; } .marquee ul { gap: 28px; padding-right: 28px; } .marquee-track { animation-duration: 36s; } }

/* ----------------------------------------------------- count the retypes */
.retype-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.retype { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 24px; }
.retype--ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.retype--ink .label { color: var(--on-ink-72); }
.retype ol { list-style: none; display: flex; flex-direction: column; position: relative; }
.retype li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--mist); }
.retype li:last-child { border-bottom: 0; }
.retype li > span:first-child { display: grid; }
.retype li b { font-size: 18px; line-height: 24px; font-weight: 600; }
.retype li small { font-size: 14px; line-height: 21px; color: var(--steel); }
.retype li .times { font-size: 22px; font-weight: 700; color: var(--steel); }
.retype--ink li { border-bottom: 0; padding-left: 36px; position: relative; }
.retype--ink li small { color: var(--on-ink-72); }
.retype--ink li .ref { font-size: 15px; font-weight: 600; color: var(--on-ink-72); }
.retype--ink li::before { content: ""; position: absolute; left: 3px; top: 50%; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid var(--on-ink); }
.retype--ink li:first-child::before { left: 0; margin-top: -8px; width: 16px; height: 16px; background: var(--on-ink); }
.retype--ink ol::before { content: ""; position: absolute; left: 7px; top: 28px; bottom: 28px; width: 2px; background: var(--on-ink); transform-origin: top; }
.retype-sum { margin-top: auto; display: flex; align-items: baseline; gap: 16px; padding-top: 24px; border-top: 1px solid var(--mist); }
.retype--ink .retype-sum { border-color: var(--ink-line); }
.retype-sum .big { font-size: clamp(72px, 8vw, 112px); line-height: .9; font-weight: 700; }
.retype-sum span:last-child { font-size: 16px; line-height: 24px; color: var(--steel); }
.retype--ink .retype-sum span:last-child { color: var(--on-ink-82); }

/* ---------------------------------------------------------- feature rows */
.feature-rows { display: grid; gap: clamp(88px, 10vw, 144px); }
.feature-row { display: flex; flex-wrap: wrap; align-items: center; gap: 56px clamp(40px, 6vw, 88px); }
.feature-row--flip { flex-direction: row-reverse; }
.feature-copy { flex: 1 1 340px; min-width: 0; display: grid; gap: 20px; align-content: start; }
.feature-copy .t-h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -0.005em; }
.feature-copy .t-lede { font-size: 16px; line-height: 26px; }
.feature-copy .arrow-link { justify-self: start; }
.feature-art { flex: 1.6 1 520px; min-width: 0; position: relative; padding: 0 0 28px 20px; }
.feature-row--flip .feature-art { padding: 0 20px 28px 0; }
.feature-art .float { position: absolute; left: 0; bottom: 0; }
.feature-row--flip .feature-art .float { left: auto; right: 0; }
@media (max-width: 960px) { .feature-art, .feature-row--flip .feature-art { padding-bottom: 36px; } }
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { padding-left: 30px; position: relative; line-height: 24px; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.points { list-style: none; display: grid; gap: var(--s5); }
.points li { display: grid; gap: 4px; padding-left: var(--s5); position: relative; }
.points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 2px; background: var(--ink); }
.points strong { font-weight: 600; font-size: 18px; }
.points span { color: var(--steel); }

/* -------------------------------------------------------- product screen */
.screen { margin: 0; background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-screen); }
.screen img { display: block; width: 100%; height: auto; }
.screen-caption { margin-top: var(--s3); font-size: 14px; line-height: 21px; color: var(--steel); }

/* ------------------------------------------------------ floating badges
   Drawn over the corner of a screen: a note from the sheet. */
.float-card { background: var(--white); border: 1px solid var(--ink); border-radius: var(--r-md); padding: 14px 18px; display: grid; gap: 2px; box-shadow: var(--shadow-float); }
.float-card .label { display: inline-flex; align-items: center; gap: 8px; }
.float-card b { font-size: 22px; line-height: 28px; font-weight: 700; }
.float-card--list { width: min(280px, 80%); padding: 16px 18px; gap: 10px; }
.float-card--list .row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 22px; }
.float-card--list .row b { font-size: 15px; line-height: 22px; font-weight: 600; }
.float-card--list .row span { display: inline-flex; align-items: center; gap: 6px; color: var(--steel); }
.float-card--ink { width: min(250px, 72%); background: var(--ink); color: var(--on-ink); border-color: var(--ink); padding: 16px 18px; gap: 12px; box-shadow: 0 20px 40px -20px rgba(20, 23, 26, .5); }
.float-card--ink .label { color: var(--on-ink-72); }
.float-chips { display: grid; gap: 6px; width: min(240px, 70%); }
.float-chips span { padding: 10px 14px; border: 1px solid var(--mist); border-radius: var(--r-sm); background: var(--white); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.float-chips span:nth-child(1) { margin-right: 24px; }
.float-chips span:nth-child(2) { margin-right: 12px; }
.float-chips span:last-child { border-color: var(--ink); background: var(--ink); color: var(--on-ink); box-shadow: 0 20px 40px -20px rgba(20, 23, 26, .5); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.bars span { flex: 1; background: var(--steel); border-radius: 2px 2px 0 0; transform-origin: bottom; animation: mq-bar 1.4s var(--ease) both; }
.bars span.is-top { background: var(--on-ink); }
.bars .h20 { height: 20%; } .bars .h35 { height: 35%; } .bars .h28 { height: 28%; } .bars .h52 { height: 52%; }
.bars .h44 { height: 44%; } .bars .h70 { height: 70%; } .bars .h100 { height: 100%; } .bars .h62 { height: 62%; }
.bars span:nth-child(2) { animation-delay: .08s; } .bars span:nth-child(3) { animation-delay: .16s; }
.bars span:nth-child(4) { animation-delay: .24s; } .bars span:nth-child(5) { animation-delay: .32s; }
.bars span:nth-child(6) { animation-delay: .4s; } .bars span:nth-child(7) { animation-delay: .48s; }
.bars span:nth-child(8) { animation-delay: .56s; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--won { background: var(--success); }
.dot--neg { background: var(--warning); }
.dot--lost { background: var(--danger); }
.dot--info { background: var(--info); }
.dot--todo { background: transparent; box-shadow: inset 0 0 0 1.5px var(--steel); }
.dot--paper { background: var(--mist); }
.status { display: inline-flex; gap: 8px; align-items: center; }

/* ----------------------------------------------------- honest diagrams
   The feature pages' pictures of how a thing works, in the sheet's
   style: a white panel with an ink rule, no invented figures. */
.diagram { margin: 0; background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); padding: var(--s6); box-shadow: var(--shadow-screen); display: grid; gap: var(--s5); min-width: 0; }
.diagram figcaption { font-size: 14px; line-height: 21px; color: var(--steel); border-top: 1px solid var(--mist); padding-top: var(--s4); }
.revs { position: relative; height: 250px; }
.rev-card { position: absolute; width: 72%; background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); padding: var(--s4); display: grid; gap: 10px; box-shadow: 0 8px 20px -14px rgba(20, 23, 26, .35); }
.rev-card .row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.rev-card .bar { height: 8px; border-radius: 4px; background: var(--mist-soft); }
.rev-card .bar--92 { width: 92%; } .rev-card .bar--84 { width: 84%; } .rev-card .bar--76 { width: 76%; }
.rev-card:nth-child(1) { top: 0; left: 0; opacity: .55; }
.rev-card:nth-child(2) { top: 46px; left: 13%; opacity: .8; }
.rev-card:nth-child(3) { top: 92px; left: 26%; border-color: var(--ink); }
.rev-tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--mist); color: var(--steel); }
.rev-card:nth-child(3) .rev-tag { border-color: var(--ink); color: var(--ink); }
.pdf-tag { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: var(--r-sm); background: var(--ink); color: var(--paper); letter-spacing: .08em; text-transform: uppercase; }
.hero .rev-card { background: var(--ink); border-color: var(--ink-line); color: var(--on-ink); }
.hero .rev-card:nth-child(3) { border-color: var(--on-ink); }
.hero .rev-card .bar { background: var(--ink-line); }
.hero .rev-tag { border-color: var(--ink-line); color: var(--on-ink-72); }
.hero .rev-card:nth-child(3) .rev-tag { border-color: var(--on-ink); color: var(--on-ink); }
.hero .pdf-tag { background: var(--on-ink); color: var(--ink); }
.inv-order { border: 1.5px solid var(--ink); border-radius: var(--r-md); padding: 12px var(--s4); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-weight: 600; }
.inv-parts { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 6px; }
.inv-part { border: 1px solid var(--mist); border-radius: var(--r-md); padding: 12px; display: grid; gap: 4px; background: var(--white); min-width: 0; }
.inv-part b { font-weight: 600; font-size: 15px; }
.inv-part span { font-size: 13px; color: var(--steel); display: inline-flex; align-items: center; gap: 6px; }
.hero .inv-order { border-color: var(--on-ink); }
.hero .inv-part { background: var(--ink); border-color: var(--ink-line); }
.hero .inv-part span { color: var(--on-ink-72); }
@media (max-width: 520px) { .inv-parts { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------- the Teams channel
   The alerts, as a channel feed. Dark whatever it sits on. */
.feed { margin: 0; background: var(--ink-card); border: 1px solid var(--ink-line); border-radius: var(--r-md); overflow: hidden; color: var(--on-ink); min-width: 0; }
.feed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ink-line); }
.feed-head b { font-size: 15px; line-height: 22px; font-weight: 600; }
.feed-head span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--on-ink-72); }
.feed ul { list-style: none; padding: 8px; display: grid; gap: 6px; }
.feed li { padding: 14px; border-radius: var(--r-sm); display: flex; gap: 14px; align-items: flex-start; animation: mq-feed 11s infinite both; }
.feed li:first-child { background: var(--ink); }
.feed li:nth-child(2) { animation-delay: .7s; }
.feed li:nth-child(3) { animation-delay: 1.4s; }
.feed li:nth-child(4) { animation-delay: 2.1s; }
.feed .dot { width: 10px; height: 10px; margin-top: 7px; }
.feed div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.feed b { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 600; }
.feed b small { font-size: 13px; font-weight: 400; color: var(--on-ink-60); }
.feed p { font-size: 14px; line-height: 21px; color: var(--on-ink-72); }
.feed figcaption { padding: 12px 20px 16px; font-size: 14px; line-height: 21px; color: var(--on-ink-72); border-top: 1px solid var(--ink-line); }

/* ----------------------------------------------------------- ink band */
.ink { background: var(--ink); color: var(--on-ink); }
.ink .label { color: var(--on-ink-72); }
.ink .muted, .ink .t-lede { color: var(--on-ink-72); }
.ink .text-link { color: var(--on-ink); }
.ink .arrow-link { color: var(--on-ink); }
.ink-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 28px 40px; }
.ink-points > div { display: grid; gap: 6px; align-content: start; border-top: 2px solid var(--on-ink); padding-top: 16px; }
.ink-points h3 { font-size: 18px; line-height: 24px; font-weight: 600; }
.ink-points p { color: var(--on-ink-72); font-size: 15px; line-height: 23px; }
/* The same points on paper: the home page's company facts. */
.uk-points { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 28px 40px; }
.uk-points > div { display: grid; gap: 6px; align-content: start; border-top: 2px solid var(--ink); padding-top: 16px; }
.uk-points dt { font-size: 18px; line-height: 24px; font-weight: 600; }
.uk-points dd { margin: 0; color: var(--steel); font-size: 15px; line-height: 23px; }
.table-wrap.table-wrap--plain { border: 0; border-radius: 0; background: transparent; }

/* ------------------------------------------------------------ parts list
   The home page's list of what the CRM is made of, as a bill of
   materials: an item number, a part and what it does. */
.parts { background: var(--white); border: 1px solid var(--ink); border-radius: var(--r-md); overflow: hidden; }
.parts-head { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.parts-head span { padding: 14px 20px; border-right: 1px solid var(--ink); }
.parts-head span:first-child { flex: 2 1 220px; }
.parts-head span:not(:first-child) { flex: 1 1 120px; color: var(--steel); display: inline-flex; align-items: center; gap: 8px; }
.parts-head span:last-child { border-right: 0; }
.parts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); }
.parts-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.parts-grid > .parts-table + .parts-table { border-left: 1px solid var(--mist); }
.parts-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.parts-table th, .parts-table td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--mist); }
.parts-table thead th { padding: 12px 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
.parts-table thead th:first-child { padding-left: 20px; width: 64px; }
.parts-table thead th:last-child { padding-right: 20px; }
.parts-table tbody td:first-child { padding: 14px 20px; }
.parts-table tbody th { padding: 16px 12px; font-size: 17px; font-weight: 600; width: 120px; }
.parts-table tbody td:last-child { padding: 16px 20px 16px 12px; color: var(--steel); }
.parts-table tbody tr:last-child th, .parts-table tbody tr:last-child td { border-bottom: 0; }
.parts-table tbody tr { transition: background-color .15s ease; }
.parts-table tbody tr:hover { background: var(--paper); }
.item-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 13px; font-weight: 700; }
.item-no--fill { background: var(--ink); color: var(--on-ink); }
@media (max-width: 960px) { .parts-grid > .parts-table + .parts-table { border-left: 0; } .parts-grid > .parts-table + .parts-table thead { display: none; } }

/* ----------------------------------------------------------------- flow
   Numbered steps on a rule: how a feature works, and the trial. */
.flow { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 var(--s6); border-top: 2px solid var(--ink); counter-reset: step; }
.flow li { display: grid; gap: 12px; align-content: start; padding: 28px 0 0; min-width: 0; }
.flow li::before { counter-increment: step; content: "0" counter(step); font-size: clamp(56px, 6vw, 80px); line-height: .85; font-weight: 700; color: transparent; -webkit-text-stroke: 1.25px var(--ink); }
.flow h3 { font-size: 22px; line-height: 28px; font-weight: 600; }
.flow p { color: var(--steel); font-size: 16px; line-height: 26px; }
.flow .arrow-link { justify-self: start; font-size: 15px; }
@media (max-width: 760px) { .flow { grid-template-columns: minmax(0, 1fr); gap: 0; } .flow li { padding: 24px 0; border-bottom: 1px solid var(--mist); } .flow li:last-child { border-bottom: 0; } }

/* ------------------------------------------------------------- surfaces */
.card { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); padding: var(--s6); min-width: 0; }
.card--roomy { padding: clamp(24px, 3vw, 48px); }
.card--ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); box-shadow: var(--shadow-screen); }
.card--ink .label, .card--ink .muted { color: var(--on-ink-72); }
.card-link { display: flex; flex-direction: column; gap: 14px; padding: 28px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-link:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -28px rgba(20, 23, 26, .4); border-color: var(--ink); }
.card-link .numeral { font-size: 56px; line-height: .9; }
.card-link h3 { font-size: 22px; line-height: 28px; font-weight: 600; }
.card-link .card-meta { flex: 1; }
.card-link .arrow-link { align-self: flex-start; border-bottom: 0; padding-bottom: 0; font-size: 15px; }
.card-link:hover .arrow-link::after { transform: translateX(4px); }
.card-meta { font-size: 15px; line-height: 23px; color: var(--steel); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-sm); background: var(--mist-soft); color: var(--steel); width: fit-content; }
.chip--ink { background: var(--ink); color: var(--paper); }
.chip--paper { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }

/* ------------------------------------------------------------- pricing */
.pricing-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4) var(--s6); margin-bottom: var(--s6); }
.billing-toggle { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--mist); border-radius: var(--r-md); background: var(--white); width: fit-content; max-width: 100%; }
.billing-toggle button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-sm); font: 600 16px/1 var(--font); color: var(--steel); background: transparent; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.billing-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.billing-toggle .save { font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.hero .billing-toggle { border-color: var(--ink-line); background: var(--ink-card); }
.hero .billing-toggle button { color: var(--on-ink-72); min-height: 48px; padding: 0 22px; font-size: 17px; }
.hero .billing-toggle button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: center; }
.plan { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 32px; background: var(--paper); border-color: var(--mist); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.plans--raised .plan { background: var(--white); box-shadow: 0 32px 64px -32px rgba(20, 23, 26, .35); }
.plan:not(.is-featured):hover { transform: translateY(-4px); box-shadow: 0 28px 56px -28px rgba(20, 23, 26, .4); border-color: var(--ink); }
.plan-head { display: grid; gap: 8px; }
.plan-name { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.plan h2, .plan h3 { font-size: 22px; line-height: 28px; font-weight: 600; }
.plan .blurb { color: var(--steel); font-size: 14px; line-height: 21px; }
.plan .chip--paper { position: absolute; top: -14px; left: 32px; }
.price { display: flex; align-items: baseline; gap: 6px; }
.amount { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.per { color: var(--steel); font-size: 16px; }
.price-note { font-size: 14px; line-height: 21px; color: var(--steel); margin-top: 4px; }
.users-pill { display: block; padding: 12px 0; border-block: 1px solid var(--mist); font-size: 16px; line-height: 24px; font-weight: 600; }
.plan-list { list-style: none; display: grid; gap: 10px; }
.plan-list li { padding-left: 26px; position: relative; font-size: 15px; line-height: 22px; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.plan-list .lead { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); padding-left: 0; }
.plan-list .lead::before { display: none; }
.plan-cta { display: grid; gap: 8px; justify-items: center; margin-top: auto; }
.plan-cta .btn { width: 100%; }
.plan-cta-note { font-size: 13px; line-height: 20px; color: var(--steel); }
.plan.is-featured { background: var(--ink); color: var(--on-ink); border-color: var(--ink); padding-top: 44px; box-shadow: 0 40px 80px -36px rgba(20, 23, 26, .6); }
.plan.is-featured h2, .plan.is-featured h3 { color: var(--on-ink); }
.plan.is-featured .blurb, .plan.is-featured .per, .plan.is-featured .price-note, .plan.is-featured .plan-list .lead, .plan.is-featured .plan-cta-note { color: var(--on-ink-72); }
.plan.is-featured .users-pill { border-color: var(--ink-line); }
.plans-foot { margin-top: var(--s5); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; border-top: 1px solid var(--mist); padding-top: var(--s5); font-size: 14px; line-height: 21px; color: var(--steel); }
.plans-foot p { max-width: 720px; }
[data-billing="annual"] .show-monthly, [data-billing="monthly"] .show-annual { display: none; }

/* ---------------------------------------------------------- free trial */
.trial-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); background: var(--white); border: 1px solid var(--ink); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-screen); }
.trial-mark { background: var(--ink); color: var(--on-ink); padding: clamp(28px, 4vw, 48px); display: grid; gap: var(--s4); align-content: center; }
.trial-mark .label { color: var(--on-ink-72); }
.trial-big { font-size: clamp(48px, 6vw, 72px); line-height: .95; font-weight: 700; letter-spacing: -0.02em; }
.trial-big .num { font-size: 1.6em; display: block; line-height: .85; }
.trial-terms { list-style: none; display: grid; gap: 8px; margin-top: var(--s2); }
.trial-terms li { display: flex; gap: 10px; align-items: center; color: var(--on-ink); font-size: 16px; }
.trial-terms li::before { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--on-ink); border-bottom: 2px solid var(--on-ink); transform: rotate(-45deg) translateY(-2px); flex: none; }
.trial-body { padding: clamp(28px, 4vw, 48px); display: grid; gap: var(--s5); align-content: center; }
.trial-body .t-h2 { font-size: clamp(30px, 3.6vw, 44px); }
.trial-body .t-lede { font-size: 16px; line-height: 26px; }
.trial-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); border-top: 2px solid var(--ink); counter-reset: tstep; }
.trial-steps li { display: grid; gap: 6px; align-content: start; padding-top: 20px; min-width: 0; }
.trial-steps li::before { counter-increment: tstep; content: "0" counter(tstep); font-size: 44px; line-height: .85; font-weight: 700; color: transparent; -webkit-text-stroke: 1.25px var(--ink); }
.trial-steps b { font-size: 18px; line-height: 24px; font-weight: 600; }
.trial-steps span { font-size: 15px; line-height: 22px; color: var(--steel); }
@media (max-width: 960px) { .trial-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .trial-steps { grid-template-columns: minmax(0, 1fr); gap: 0; } .trial-steps li { padding: 16px 0; border-bottom: 1px solid var(--mist); } .trial-steps li:last-child { border-bottom: 0; } }

/* ---------------------------------------------------------- calculator */
.calc-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-bottom: var(--s6); }
.calc-why > div { display: grid; gap: 6px; align-content: start; border-top: 2px solid var(--ink); padding-top: var(--s3); }
.calc-why b { font-size: 18px; font-weight: 600; }
.calc-why span { color: var(--steel); font-size: 15px; line-height: 23px; }
.calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: 0; overflow: hidden; border-color: var(--ink); box-shadow: var(--shadow-screen); }
.calc-in { padding: clamp(24px, 3vw, 40px); display: grid; gap: var(--s5); align-content: start; }
.calc-out { padding: clamp(24px, 3vw, 40px); background: var(--paper); border-left: 1px solid var(--mist); display: grid; gap: var(--s5); align-content: start; }
.field { display: grid; gap: 8px; }
.field-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.field label { font-weight: 600; font-size: 16px; }
.field output { font-weight: 700; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.field .hint { font-size: 13px; line-height: 19px; color: var(--steel); }
.field input[type="number"] { font: 500 18px/1 var(--font); font-variant-numeric: tabular-nums; padding: 11px 12px; border: 1px solid var(--steel); border-radius: var(--r-sm); background: var(--white); color: var(--ink); width: 100%; max-width: 180px; }
.field input[type="number"]:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 1px; }
.field input[type="range"] { width: 100%; accent-color: var(--ink); height: 44px; cursor: pointer; }
.money-in { position: relative; max-width: 180px; }
.money-in span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--steel); font-size: 18px; }
.money-in input[type="number"] { padding-left: 26px; }
.bars-cmp { display: grid; gap: var(--s4); }
.bar-row { display: grid; gap: 6px; }
.bar-row .bar-label { display: flex; justify-content: space-between; gap: var(--s3); font-size: 15px; }
.bar-row .bar-label strong { font-variant-numeric: tabular-nums; font-size: 20px; }
.bar-track { height: 14px; background: var(--mist-soft); border-radius: 7px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 7px; background: var(--steel); transition: width .25s ease; }
.bar-fill--mq { background: var(--ink); }
.bar-fill--full { width: 100%; }
.bar-fill--part { width: 62%; }
.verdict { display: grid; gap: 6px; padding-top: var(--s4); border-top: 1px solid var(--mist); }
.verdict p { color: var(--steel); }
.verdict .verdict-big { font-size: clamp(30px, 4vw, 40px); line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } .calc-out { border-left: 0; border-top: 1px solid var(--mist); } .calc-why { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--ink); border-radius: var(--r-md); background: var(--white); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; min-width: 560px; }
.table--fit { min-width: 0; }
.table th, .table td { text-align: left; padding: 16px 24px; border-bottom: 1px solid var(--mist); vertical-align: top; }
.table thead th { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); background: var(--paper); border-bottom: 1px solid var(--ink); }
.table thead th.c { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); text-align: left; }
.table tbody th { font-weight: 400; color: var(--steel); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { background: var(--paper); }
.table .c { text-align: left; }
.table .yes { color: var(--ink); font-weight: 600; white-space: nowrap; }
.table .no { color: var(--steel); }
.table .hot { background: rgba(20, 23, 26, .04); }
.table thead th.hot { background: var(--ink); color: var(--on-ink); }
.table--vs td:last-child { background: rgba(20, 23, 26, .04); font-weight: 500; }
@media (max-width: 600px) { .table th, .table td { padding: 12px 16px; } }

/* ------------------------------------------------------------------ faq */
.faq { border-top: 2px solid var(--ink); max-width: 100%; }
.faq details { border-bottom: 1px solid var(--mist); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s5); padding: 22px 0; font-size: 22px; line-height: 28px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 30px; color: var(--ink); line-height: 22px; width: 22px; text-align: center; flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 48px 24px 0; color: var(--steel); max-width: 70ch; }
.faq-grid { display: flex; flex-wrap: wrap; gap: var(--s6) clamp(40px, 6vw, 96px); align-items: flex-start; }
.faq-grid .faq-intro { flex: 1 1 300px; min-width: 0; display: grid; gap: var(--s4); }
.faq-grid .faq { flex: 2 1 520px; min-width: 0; }

/* ------------------------------------------------------------- articles */
.article { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.article-body { display: grid; gap: var(--s5); font-size: 17px; line-height: 28px; }
.article-body h2 { font-size: 28px; line-height: 34px; font-weight: 600; margin-top: var(--s5); }
.article-body h3 { font-size: 21px; line-height: 28px; font-weight: 600; margin-top: var(--s2); }
.article-body ul, .article-body ol { padding-left: 22px; display: grid; gap: var(--s2); }
.article-body li::marker { color: var(--steel); }
.article-body .callout { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); padding: var(--s5); display: grid; gap: var(--s3); font-size: 16px; line-height: 26px; }
.article-body .formula { font-size: 18px; font-weight: 600; background: var(--white); border: 1px solid var(--ink); border-radius: var(--r-sm); padding: var(--s4) var(--s5); font-variant-numeric: tabular-nums; }
.article-aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: var(--s5); }
.toc { display: grid; gap: var(--s3); }
.toc ol { list-style: none; display: grid; gap: 6px; font-size: 15px; line-height: 22px; border-left: 2px solid var(--ink); padding-left: var(--s4); }
.toc a { text-decoration: none; color: var(--steel); }
.toc a:hover { color: var(--ink); }
.byline { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--steel); }
@media (max-width: 1000px) { .article { grid-template-columns: minmax(0, 1fr); } .article-aside { position: static; order: -1; } }

/* --------------------------------------------------------------- about */
.founder { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.monogram { width: 96px; height: 96px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 32px; font-weight: 700; letter-spacing: .02em; }
.timeline { list-style: none; display: grid; gap: 0; border-left: 2px solid var(--ink); margin-left: 6px; }
.timeline li { position: relative; padding: 0 0 var(--s5) var(--s5); display: grid; gap: 4px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.timeline li:last-child { padding-bottom: 0; }
.timeline .when { font-size: 13px; color: var(--steel); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timeline b { font-weight: 600; font-size: 18px; line-height: 24px; }
.timeline span { color: var(--steel); }
@media (max-width: 560px) { .founder { grid-template-columns: minmax(0, 1fr); } .monogram { width: 72px; height: 72px; font-size: 26px; } }

/* -------------------------------------------------------------- cta band */
.cta-band { position: relative; background-color: var(--ink); background-image: var(--grid); background-size: 48px 48px; color: var(--on-ink); padding: clamp(96px, 12vw, 168px) 0 clamp(72px, 9vw, 120px); }
.cta-band .container { display: grid; gap: 40px; }
.cta-kicker { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-72); }
.cta-kicker::before { content: ""; display: block; width: 32px; height: 1px; background: var(--on-ink-50); }
.cta-band h2 { max-width: 1000px; }
.cta-band h2 .twin { font-size: clamp(48px, 7.4vw, 108px); line-height: .95; font-weight: 700; letter-spacing: -0.015em; }
.cta-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.cta-grid p { font-size: 18px; line-height: 1.6; color: var(--on-ink-82); max-width: 560px; }
.cta-actions { display: grid; gap: 14px; justify-items: start; }
.cta-actions .cta-note { font-size: 14px; line-height: 21px; color: var(--on-ink-72); }
.select-text { user-select: all; color: var(--on-ink); }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: var(--on-ink-72); border-top: 1px solid var(--ink-line); padding: clamp(48px, 6vw, 72px) 0 32px; font-size: 15px; line-height: 23px; }
.site-footer .container { display: grid; gap: 48px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 48px clamp(40px, 6vw, 96px); }
.foot-brand { flex: 1 1 260px; min-width: 0; display: grid; gap: 20px; align-content: start; max-width: 340px; }
.foot-brand .logo { height: 28px; }
.foot-brand a { text-decoration: none; }
.foot-brand .select-text { font-weight: 600; }
.foot-nav { flex: 3 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 32px; }
.foot-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.foot-col h2 { font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink); font-weight: 600; margin-bottom: 4px; }
.foot-col ul { list-style: none; display: grid; gap: 12px; }
.foot-col a { text-decoration: none; }
.foot-col a:hover { color: var(--on-ink); }
.foot-details { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); border: 1px solid var(--ink-line); border-radius: var(--r-sm); overflow: hidden; }
.foot-details > div { padding: 14px 16px; border-right: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); display: grid; gap: 4px; margin: 0 -1px -1px 0; }
.foot-details dt { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-50); }
.foot-details dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--on-ink); }
.foot-details a { color: inherit; text-decoration: none; }
.foot-details a:hover { text-decoration: underline; }
.foot-legal { display: grid; gap: 12px; font-size: 13px; line-height: 20px; }
.foot-legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-legal a { text-decoration: none; }
.foot-legal a:hover { color: var(--on-ink); text-decoration: underline; }

/* ---------------------------------------------------------- copy field */
.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.copy-line code { font: 600 20px/1.2 var(--font); user-select: all; overflow-wrap: anywhere; }
.copy-btn { font: 600 14px/1 var(--font); padding: 10px 14px; border: 1px solid var(--ink); background: var(--white); border-radius: var(--r-sm); cursor: pointer; color: var(--ink); min-height: 40px; }
.copy-btn:hover { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------ animation */
@keyframes mq-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes mq-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mq-caret { 50% { opacity: 0; } }
@keyframes mq-cycle { 0% { opacity: 0; transform: translateY(12px); } 4%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes mq-steps { from { width: 0; } to { width: 100%; } }
@keyframes mq-pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 142, 90, .6); } 70% { box-shadow: 0 0 0 9px rgba(30, 142, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 142, 90, 0); } }
@keyframes mq-ping { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes mq-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mq-tilt { from { transform: perspective(1800px) rotateX(14deg) scale(.94); } to { transform: perspective(1800px) rotateX(0deg) scale(1); } }
@keyframes mq-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mq-feed { 0% { opacity: 0; transform: translateY(14px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes mq-bar { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes mq-pop { 0% { transform: scale(.92); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes mq-tick { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; opacity: 1; } }
.in { animation: mq-rise .9s var(--ease) both; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .28s; }
.d4 { animation-delay: .42s; } .d5 { animation-delay: .56s; } .d6 { animation-delay: .7s; }
@supports (animation-timeline: view()) {
  .reveal { animation: mq-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
  .tilt { animation: mq-tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .grow, .retype--ink ol::before { animation: mq-grow linear both; animation-timeline: view(); animation-range: entry 30% cover 60%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ==================================================================
   The pages that stay in the application - the booking calendar and its
   confirmation, the privacy notice, the cookie policy, the terms of use
   and the sign-in card - drawn in the site's design.
   ================================================================== */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------------------------------------------------------- legal */
.legal { max-width: calc(760px + var(--gutter) * 2); padding-block: var(--s8) var(--s9); }
.legal__head { margin-bottom: var(--s6); display: grid; gap: var(--s3); }
.legal h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.legal__updated { font-size: 14px; color: var(--steel); }
.legal__summary { font-size: 17px; line-height: 27px; color: var(--ink-soft); background: var(--white); border: 1px solid var(--mist); border-left: 3px solid var(--ink); border-radius: var(--r-md); padding: 18px 22px; margin: 0 0 var(--s6); }
.legal__contents { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); padding: 18px 24px; margin: 0 0 var(--s6); }
.legal__contents ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 34px; font-size: 15px; line-height: 30px; }
.legal__contents a { color: var(--ink-soft); text-decoration: none; }
.legal__contents a:hover { color: var(--ink); text-decoration: underline; }
.legal section { scroll-margin-top: calc(var(--header-h) + 16px); }
.legal h2 { font-size: 24px; line-height: 30px; font-weight: 700; margin: 38px 0 12px; }
.legal h3 { font-size: 18px; line-height: 24px; font-weight: 600; margin: 24px 0 8px; }
.legal p, .legal li, .legal address, .legal dt, .legal dd { font-size: 16px; line-height: 26px; color: var(--ink-soft); }
.legal p { margin: 0 0 12px; max-width: 44em; }
.legal ul { margin: 0 0 14px; padding-left: 1.25em; }
.legal li + li { margin-top: 2px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal address { font-style: normal; margin: 0 0 16px; padding-left: 16px; border-left: 2px solid var(--ink); }
.legal__facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 20px; margin: 0 0 16px; }
.legal__facts dt { color: var(--steel); }
.legal__facts dd { margin: 0; color: var(--ink); }
.legal__table { overflow-x: auto; margin: 6px 0 16px; background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); }
.legal table { width: 100%; border-collapse: collapse; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--mist); font-size: 15px; line-height: 22px; color: var(--ink-soft); }
.legal th { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); background: var(--paper); }
.legal tbody tr:last-child td { border-bottom: 0; }
.legal--wide { max-width: calc(1000px + var(--gutter) * 2); }
.legal__cookies th:nth-child(3), .legal__cookies td:nth-child(3) { width: 34%; }
.legal__clause { position: relative; padding-left: 3.1em; }
.legal__no { position: absolute; left: 0; top: 0; font-size: 14px; line-height: 26px; color: var(--steel); font-variant-numeric: tabular-nums; }
.legal__name { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.legal__kind { display: block; margin-top: 2px; font-size: 13px; color: var(--steel); }
@media (max-width: 620px) {
  .legal { padding-block: var(--s7) var(--s8); }
  .legal__contents ol { columns: 1; }
  .legal__facts { grid-template-columns: 1fr; gap: 0; }
  .legal__facts dd { margin-bottom: 8px; }
  .legal__clause { padding-left: 2.7em; }
  .legal__cookies thead { display: none; }
  .legal__cookies, .legal__cookies tbody, .legal__cookies tr, .legal__cookies td { display: block; width: auto; }
  .legal__cookies tr { padding: 12px 14px; border-bottom: 1px solid var(--mist); }
  .legal__cookies tbody tr:last-child { border-bottom: 0; }
  .legal__cookies td { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 5px 0; border-bottom: 0; }
  .legal__cookies td::before { content: attr(data-label); font-size: 12px; line-height: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
  .legal__cookies th:nth-child(3), .legal__cookies td:nth-child(3) { width: auto; }
}

/* ------------------------------------------------ booking a demo
   The calendar, in the pop-up and at /demo. No JavaScript needed: a free
   half hour is a radio button whose label is the thing you can see. */
.booking-hero .hero-grid { align-items: flex-start; }
.booking-steps { list-style: none; display: grid; border-top: 1px solid var(--ink-line); counter-reset: bstep; }
.booking-steps li { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--ink-line); }
.booking-steps li::before { counter-increment: bstep; content: "0" counter(bstep); flex: none; width: 56px; font-size: 40px; line-height: 40px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--on-ink-72); }
.booking-steps div { display: grid; gap: 4px; }
.booking-steps h2 { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--on-ink); }
.booking-steps p { font-size: 15px; line-height: 23px; color: var(--on-ink-72); }
.booking-card { position: relative; z-index: 1; background: var(--white); color: var(--ink); border-radius: var(--r-md); padding: clamp(24px, 3vw, 40px); box-shadow: 0 48px 96px -32px rgba(0, 0, 0, .5); }
.booking-sheet { margin-top: calc(-1 * clamp(56px, 7vw, 96px)); padding-bottom: var(--section); }
.booking { display: grid; gap: var(--s6); }
.booking fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 20px; }
.booking legend { display: flex; align-items: center; gap: 12px; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); padding: 0; margin-bottom: 20px; counter-increment: legend; }
.booking legend::before { content: counter(legend); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--ink); color: var(--on-ink); font-size: 14px; }
.booking { counter-reset: legend; }
.weekbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.weekbar__range { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; order: -1; }
.weekbar .btn { min-height: 44px; padding: 0 14px; font-size: 15px; border-color: var(--steel); background: var(--white); }
.weekbar .btn:hover { border-color: var(--ink); background: var(--white); color: var(--ink); }
.weekbar__nav { display: flex; gap: 8px; }
.slots__week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.slots__day { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); padding: 12px 10px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.slots__dayname { display: grid; gap: 2px; text-align: center; padding: 8px 0 12px; border-bottom: 1px solid var(--mist); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); margin: 0; }
.slots__dayname span { font-size: 22px; line-height: 26px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
.slots__times { display: grid; gap: 6px; }
.slots__none { font-size: 13px; color: var(--steel); margin: 0; padding: 8px 0; text-align: center; }
.slot__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.slot { display: block; text-align: center; min-height: 44px; line-height: 42px; padding: 0 4px; border: 1px solid var(--steel); border-radius: var(--r-sm); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--white); cursor: pointer; user-select: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.slot__radio + .slot:hover { border-color: var(--ink); transform: translateY(-1px); }
.slot__radio:checked + .slot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.slot__radio:focus-visible + .slot { outline: 2px solid var(--ink); outline-offset: 2px; }
.slot--taken, .slot--gone, .slot--closed { cursor: default; background: var(--mist-soft); border-color: transparent; color: #8A8F96; font-weight: 500; }
.slot--taken { text-decoration: line-through; }
.slots__key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 13px; line-height: 20px; color: var(--steel); }
.slots__key .slot { display: inline-block; min-height: 0; line-height: 20px; padding: 2px 8px; font-size: 13px; }
.who { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.who legend { grid-column: 1 / -1; margin-bottom: 4px; }
.booking .field { gap: 6px; align-content: start; }
.booking .field label { display: block; font-weight: 600; font-size: 14px; line-height: 21px; color: var(--ink); }
.field__opt { font-weight: 400; color: var(--steel); text-transform: none; letter-spacing: 0; font-size: 14px; margin-left: 4px; }
.booking .field input { width: 100%; min-height: 48px; padding: 0 14px; font: 400 16px/1.3 var(--font); color: var(--ink); background: var(--white); border: 1px solid var(--steel); border-radius: var(--r-sm); }
.booking .field input:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.booking .field input[aria-invalid="true"] { border-color: var(--danger); }
.field__hint, .field__error { font-size: 13px; line-height: 20px; margin: 0; }
.field__hint { color: var(--steel); }
.field__error { color: var(--danger); font-weight: 600; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.booking__go { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.booking__note { font-size: 15px; line-height: 22px; color: var(--steel); margin: 0; }
.booking__privacy { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 20px; color: var(--steel); }
.booking__privacy a { font-weight: 600; }
.notice { display: inline-block; font-size: 15px; line-height: 22px; font-weight: 600; padding: 11px 14px; border-radius: var(--r-sm); margin: 0; border: 1px solid var(--mist); background: var(--white); }
.notice--good { border-color: var(--success); color: var(--success); }
.notice--bad { border-color: var(--danger); color: var(--danger); }
@media (max-width: 860px) {
  .slots__week { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .slots__day { padding: 12px 14px; grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .slots__dayname { text-align: left; padding: 4px 0; border-bottom: 0; }
  .slots__times { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .slots__none { text-align: left; padding: 10px 0; }
}

/* The confirmation. */
.booked { padding: var(--s8) 0 var(--s9); max-width: 760px; display: grid; gap: var(--s5); }
.booked h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; font-weight: 700; }
.booked__lead { font-size: 18px; line-height: 28px; color: var(--steel); }
.booked__facts { display: grid; grid-template-columns: 160px 1fr; gap: 0; margin: 0; background: var(--white); border: 1px solid var(--ink); border-radius: var(--r-md); overflow: hidden; }
.booked__facts dt, .booked__facts dd { margin: 0; padding: 12px 16px; font-size: 15px; border-top: 1px solid var(--mist); }
.booked__facts dt:first-of-type, .booked__facts dt:first-of-type + dd { border-top: 0; }
.booked__facts dt { font-size: 12px; font-weight: 600; color: var(--steel); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; }
.booked__facts dd { color: var(--ink); }
.booked__next { font-size: 16px; line-height: 26px; color: var(--ink-soft); }
.booked__note { font-size: 13px; color: var(--steel); }
.tick-mark { position: relative; display: inline-block; width: 56px; height: 56px; border-radius: 50%; background: var(--success); animation: mq-tick .6s var(--ease) both; }
.tick-mark::before { content: ""; position: absolute; left: 18px; top: 17px; width: 20px; height: 11px; border-left: 3px solid var(--white); border-bottom: 3px solid var(--white); transform: rotate(-45deg); }
@media (max-width: 600px) {
  .booked__facts { grid-template-columns: minmax(0, 1fr); }
  .booked__facts dd { padding-top: 0; border-top: 0; }
  .booked__facts dt { padding-bottom: 4px; }
  .booked__facts dt:first-of-type + dd { padding-top: 0; }
}

/* ------------------------------------------------ the signed-out card */
.signin { padding-block: var(--s8) var(--s9); display: grid; justify-items: center; }
.login-card { width: 100%; max-width: 440px; background: var(--white); border: 1px solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-screen); overflow: hidden; }
.login-card__head { padding: var(--s6) var(--s6) 0; display: grid; gap: 6px; }
.login-card__title { font-size: 30px; line-height: 1.1; font-weight: 700; }
.login-card__body { padding: var(--s5) var(--s6) var(--s6); }
.login-card__body > .login-card__title { margin-bottom: var(--s3); }
.login-card__foot { padding: 14px var(--s6); background: var(--paper); border-top: 1px solid var(--mist); font-size: 15px; }
.login-card__foot a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.login-card .field label { font-weight: 600; font-size: 15px; }
.login-card .field input[type="email"], .login-card .field input[type="password"], .login-card .field input[type="text"] {
  width: 100%; font: 400 17px/1.3 var(--font); color: var(--ink); background: var(--white);
  min-height: 48px; padding: 0 12px; border: 1px solid var(--steel); border-radius: var(--r-sm);
}
.login-card .field input:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 1px; }
.login-card .btn--primary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: var(--r-sm); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 17px/1 var(--font); cursor: pointer; }
.login-card .btn--primary:hover { background: var(--ink-soft); }
.login-card .btn--block { width: 100%; }
.login-card .offer-later { background: var(--white); color: var(--ink); border-color: var(--ink); }
.login-card .offer-later:hover { background: var(--ink); color: var(--paper); }
.login-card .hint, .login-card .small { font-size: 14px; line-height: 21px; color: var(--steel); }
.login-card .check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 22px; }
.login-card .check input { margin-top: 4px; accent-color: var(--ink); }
.login-card .offer-points { list-style: none; display: grid; gap: 8px; }
.login-card .offer-points li { padding-left: 24px; position: relative; color: var(--ink-soft); }
.login-card .offer-points li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 11px; height: 6px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
.flashes { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.flash { font-size: 15px; line-height: 22px; padding: 10px 14px; border: 1px solid var(--mist); border-left-width: 3px; border-radius: var(--r-sm); background: var(--white); }
.flash--success { border-left-color: var(--success); }
.flash--error { border-left-color: var(--danger); }
.flash--info { border-left-color: var(--info); }
@media (max-width: 480px) { .login-card__head { padding: var(--s5) var(--s5) 0; } .login-card__body { padding: var(--s4) var(--s5) var(--s5); } .login-card__foot { padding-inline: var(--s5); } }

/* ------------------------------------------------ the booking pop-up
   A native <dialog>, opened with showModal() by js/site.js, which fetches
   the booking form into it. The dialog is only a positioning box: what
   shows is .modal__panel inside it, so a click on the dialog itself is a
   click on the backdrop. */
.modal { border: 0; padding: var(--s5); margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: transparent; overflow-y: auto; display: grid; place-items: start center; color: var(--ink); }
.modal:not([open]) { display: none; }
.modal::backdrop { background: rgba(20, 23, 26, .72); }
.modal__panel { background: var(--white); color: var(--ink); border-radius: var(--r-md); box-shadow: 0 48px 96px -32px rgba(0, 0, 0, .6); width: 100%; max-width: 1040px; padding: clamp(24px, 3vw, 40px); display: grid; gap: var(--s6); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); }
.modal__head > div { display: grid; gap: 10px; }
.modal__title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.modal__lead { font-size: 16px; line-height: 25px; color: var(--steel); max-width: 60ch; }
.modal__close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font: 400 28px/1 var(--font); color: var(--ink); background: var(--white); border: 1px solid var(--steel); border-radius: var(--r-sm); cursor: pointer; }
.modal__close:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.modal__loading { color: var(--steel); padding: var(--s7) 0; text-align: center; }
.modal__body[aria-busy="true"] .booking { opacity: .5; }
@media (max-width: 860px) {
  .modal { padding: 0; }
  .modal__panel { border-radius: 0; min-height: 100%; padding: var(--s5) var(--s4) var(--s7); }
}

/* ------------------------------------------------------------ the API page
   /api, templates/site/pages/api.html: the reference drawn from the routes.
   Each route is a <details>: a method badge, its address and a line, then
   what it takes and answers. Code is the only monospace on the site. */
.code { background: var(--ink); color: var(--on-ink); border-radius: var(--r-sm); padding: var(--s4) var(--s5); font-family: var(--mono); font-size: 13.5px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; min-width: 0; }
:where(.card, .api-table, .api-body p) code:not(.api-path) { font-family: var(--mono); font-size: .92em; background: var(--mist-soft); padding: 1px 5px; border-radius: 3px; }
.code > code { font: inherit; color: inherit; background: none; padding: 0; border-radius: 0; }
.api-curl { align-items: start; flex-wrap: nowrap; }
.api-curl .code { flex: 1 1 320px; }
.api-curl .copy-btn { flex: none; }
.api-ref .article-body { font-size: 16px; line-height: 26px; }
.api-ref .article-body h2 { scroll-margin-top: calc(var(--header-h) + 16px); margin-top: var(--s7); }
.api-ref .article-body h2:first-child { margin-top: 0; }
.api-ep { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-md); scroll-margin-top: calc(var(--header-h) + 16px); }
.api-ep + .api-ep { margin-top: calc(-1 * var(--s3)); }
.api-ep summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); }
.api-ep summary::-webkit-details-marker { display: none; }
.api-ep summary::after { content: "+"; margin-left: auto; color: var(--ink); font-size: 24px; line-height: 1; flex: none; transition: transform .2s ease; }
.api-ep[open] summary::after { transform: rotate(45deg); }
.api-ep[open] summary { border-bottom: 1px solid var(--mist); }
.api-ep__body { padding: var(--s5); display: grid; gap: var(--s4); }
.api-ep__body h4 { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); margin: var(--s2) 0 0; }
.api-ep__body p { margin: 0; }
.method { font: 700 12px/16px var(--font); letter-spacing: .08em; padding: 4px 8px; border-radius: var(--r-sm); color: var(--white); min-width: 64px; text-align: center; flex: none; }
.method--get { background: var(--info); }
.method--post { background: var(--success); }
.method--patch, .method--put { background: var(--warning); }
.method--delete { background: var(--danger); }
.api-path { font-family: var(--mono); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.api-sum { color: var(--steel); flex: 1 1 220px; }
.api-req { display: flex; flex-wrap: wrap; gap: var(--s2); }
.api-must { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--signal-hover); margin-left: 4px; }
.api-table { min-width: 0; font-size: 14px; line-height: 21px; }
.api-table th, .api-table td { padding: 10px 14px; }
.api-table th[scope="row"] { white-space: nowrap; font-weight: 600; color: var(--ink); }
.api-toc ol { max-height: calc(100vh - var(--header-h) - 120px); overflow: auto; }
@media (max-width: 600px) {
  .api-ep summary { padding: var(--s3) var(--s4); }
  .api-ep__body { padding: var(--s4); }
  .api-curl { flex-wrap: wrap; }
  .code { font-size: 12.5px; line-height: 19px; padding: var(--s3) var(--s4); }
  .api-table th[scope="row"] { white-space: normal; }
  .api-table th, .api-table td { padding: 8px 10px; }
  .api-table td { overflow-wrap: anywhere; }
  .api-table code { white-space: nowrap; }
  .api-must { display: block; margin-left: 0; }
}