/* ==========================================================================
   Tenvia Build — site styles v1
   Derived from TenviaOS Design System v1, re-skinned for the Build product:
   charcoal ink + the Build amber (#F59E0B highlights, #B45309 text accent).
   One shared file, no build step.
   ========================================================================== */

:root {
  /* Ink (neutrals) */
  --ink-900: #0B1220;
  --ink-800: #131C2E;
  --ink-700: #1E2A42;
  --ink-600: #33415C;
  --ink-500: #4A5A78;
  --ink-400: #626F8A;   /* 5.05:1 on white */
  --ink-300: #9AA6BC;
  --ink-200: #C7CFDD;
  --ink-border: #8090AB; /* 3.23:1 — WCAG 1.4.11 non-text */
  --ink-100: #E4E9F1;
  --ink-050: #F1F4F9;
  --paper: #FFFFFF;
  --canvas: #F7F9FC;

  /* Build accent — amber, per the product mark and the app UI */
  --amber-700: #B45309;  /* text-safe on white (4.6:1) */
  --amber-600: #D97706;
  --amber-500: #F59E0B;  /* buttons — ink text on top, as in the app */
  --amber-400: #FBBF24;
  --amber-100: #FEF3C7;
  --amber-050: #FFFBEB;
  --charcoal: #27272A;   /* the mark's tile */

  /* Status */
  --ok: #15803D; --ok-soft: #F0FDF4;
  --warn: #A16207; --warn-soft: #FEFCE8;
  --err: #B91C1C; --err-soft: #FEF2F2; --err-line: #FECACA;

  /* Type scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: clamp(1.35rem, 1.1vw + 1.05rem, 1.6rem);
  --fs-xl: clamp(1.7rem, 1.8vw + 1.2rem, 2.2rem);
  --fs-2xl: clamp(2rem, 2.6vw + 1.3rem, 2.9rem);
  --fs-3xl: clamp(2.5rem, 3.6vw + 1.65rem, 4rem);

  /* Shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-2: 0 4px 12px rgba(11, 18, 32, 0.07);
  --shadow-3: 0 12px 32px rgba(11, 18, 32, 0.10);
  --wrap: 1200px; --narrow: 820px; --nav-h: 72px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--amber-700); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--amber-500); outline-offset: 2px; border-radius: 4px;
}
h1, h2, h3 { color: var(--ink-900); font-weight: 680; letter-spacing: -0.02em; line-height: 1.14; text-wrap: balance; margin: 0 0 0.5em; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-md); letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--narrow); margin: 0 auto; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink-900); color: #fff; padding: 10px 18px;
  border-radius: var(--r-sm); font-weight: 600; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-100);
  border-top: 3px solid var(--amber-500);
}
.nav__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 28px; }
.nav__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: 4px; }
.nav__logo img, .nav__logo svg { width: 32px; height: 32px; flex: none; }
.nav__wordmark { font-weight: 700; font-size: 1.1rem; color: var(--ink-900); letter-spacing: -0.01em; white-space: nowrap; }
.nav__wordmark b { color: var(--amber-600); font-weight: 700; }
.nav__links { display: flex; align-items: center; gap: 22px; margin-left: 8px; }
.nav__links a { color: var(--ink-600); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); }
.nav__links a:hover { color: var(--ink-900); }
.nav__links a[aria-current="page"] { color: var(--ink-900); font-weight: 600; box-shadow: 0 2px 0 var(--amber-500); }
.nav__spacer { flex: 1; }
.nav__signin { color: var(--ink-600); text-decoration: none; font-weight: 500; font-size: var(--fs-sm); white-space: nowrap; }
.nav__signin:hover { color: var(--ink-900); }
.nav__burger { display: none; background: none; border: 1px solid var(--ink-border); border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; color: var(--ink-700); }
.nav__mobile { display: none; }

@media (max-width: 860px) {
  .nav__links, .nav__signin { display: none; }
  .nav__burger { display: inline-flex; align-items: center; }
  .nav__mobile {
    display: block; position: absolute; left: 0; right: 0; top: var(--nav-h);
    background: var(--paper); border-bottom: 1px solid var(--ink-100); box-shadow: var(--shadow-3);
    padding: 8px 24px 20px; visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
  }
  .nav__mobile[data-open="true"] { visibility: visible; opacity: 1; transform: none; }
  .nav__mobile a { display: block; padding: 13px 2px; min-height: 44px; color: var(--ink-700); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--ink-050); }
}
/* Phones: logo and Menu only (Sam, 2026-09-15). With the CTA in the bar the
   header was 420px wide and every page scrolled sideways. Get Early Access
   stays in the Menu and on every page body. */
@media (max-width: 640px) {
  .nav__inner { gap: 12px; padding: 0 16px; }
  .nav__inner > .btn-primary { display: none; }
  .nav__mobile { padding-inline: 16px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-pill); padding: 12px 26px; font-weight: 600; font-size: var(--fs-sm);
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
  font-family: inherit; line-height: 1.3;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--amber-500); color: var(--charcoal); }
.btn-primary:hover { background: var(--amber-400); }
.btn-secondary { background: transparent; color: var(--ink-800); border-color: var(--ink-border); }
.btn-secondary:hover { border-color: var(--ink-600); }
.btn-on-ink { background: var(--amber-500); color: var(--charcoal); }
.btn-on-ink:hover { background: var(--amber-400); }
.btn-ghost-on-ink { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-ghost-on-ink:hover { border-color: #fff; }
.btn-block { width: 100%; }

/* ---------- Badges & eyebrows ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; padding: 5px 14px;
  background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(21, 128, 61, 0.2);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.badge--soon { background: var(--warn-soft); color: var(--warn); border-color: rgba(161, 98, 7, 0.25); }
.eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--amber-700); margin-bottom: 12px;
}

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section--tight { padding: 60px 0; }
.section--canvas { background: var(--canvas); }
.section--paper { background: var(--paper); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.section-head { max-width: 780px; margin-bottom: 40px; }
.section-head .lede { font-size: var(--fs-md); color: var(--ink-500); margin: 0; max-width: 62ch; }
.section--ink { background: var(--ink-900); color: var(--ink-200); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .lede { color: var(--ink-300); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 84px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 320px at 85% 8%, var(--amber-050) 0%, transparent 70%),
    radial-gradient(480px 300px at 8% 90%, var(--ink-050) 0%, transparent 70%);
}
/* The wash above is decorative and absolutely positioned, so it paints over
   any hero child that isn't itself positioned — which washed out copy sitting
   in the bottom-left gradient. Lift every direct child above it. */
.hero > * { position: relative; z-index: 1; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.hero__copy h1 { margin: 18px 0 16px; }
.hero__sub { font-size: var(--fs-md); color: var(--ink-500); max-width: 54ch; margin: 0 0 26px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.hero__note { font-size: var(--fs-xs); color: var(--ink-400); margin: 0; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }

/* Browser-chrome frame for screenshots */
.mock { background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: 6px; background: var(--ink-050); border-bottom: 1px solid var(--ink-100); padding: 10px 14px; }
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-200); }
.mock__title { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; color: var(--ink-400); margin-left: 8px; }
.mock img { display: block; width: 100%; }
/* <picture> is inline by default, which would add a baseline gap under the
   screenshot inside .mock's clipped box. */
.mock picture, .figure picture { display: block; }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 18px; }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards--1 { grid-template-columns: 1fr; }

/* Features index (Sam, 2026-09-29): every feature in one glance, grouped by
   the stage of the job it belongs to, each linking down to its section. */
.fx-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.fx-stage { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--ink-100); border-radius: 12px; }
.fx-stage a { color: var(--ink-600); text-decoration: none; font-size: var(--fs-sm); line-height: 1.4; }
.fx-stage a:hover { color: var(--amber-700); text-decoration: underline; text-underline-offset: 3px; }
.fx-stage a.fx-head { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; color: var(--ink-900); font-weight: 700; font-size: var(--fs-base); }
.fx-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--amber-100); color: var(--amber-700); font-size: var(--fs-xs); font-weight: 700; flex: none; }
.fx-stage a.fx-planned { color: var(--ink-400); }
.fx-stage a.fx-planned::before, .fx-planned-key::before { content: "◷"; margin-right: 6px; color: var(--ink-300); }
.fx-legend { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--ink-400); }
.fx-planned-key { color: var(--ink-500); font-weight: 600; margin-right: 6px; }
/* Anchors clear the sticky header when jumped to from the index. */
section[id], .card[id], #bidding, #drawings, #compliance { scroll-margin-top: 90px; }

/* The money flow: costs come in, land on their project, go to QuickBooks. */
.money-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 28px; }
.mf-col { display: grid; gap: 9px; }
.mf-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); }
.mf-box { padding: 11px 14px; background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-800); }
.mf-box.mf-strong { background: var(--amber-050); border-color: var(--amber-500); font-weight: 600; color: var(--ink-900); }
.mf-box.mf-planned { border-style: dashed; color: var(--ink-400); }
.mf-arrow { font-size: 24px; color: var(--amber-600); }
@media (max-width: 860px) {
  .money-flow { grid-template-columns: 1fr; }
  .mf-arrow { justify-self: center; transform: rotate(90deg); }
}
.card {
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-lg);
  padding: 26px 26px 24px; box-shadow: var(--shadow-1);
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }
.card--accent { border-top: 3px solid var(--amber-500); }

/* Check lists */
.checks { list-style: none; padding: 0; margin: 14px 0 0; }
/* Not flex: an <a> (or any element) inside a flex list item becomes its own
   flex item and wraps as a separate column. Absolute marker keeps inline
   content flowing as one paragraph. */
.checks li { position: relative; padding: 5px 0 5px 22px; font-size: var(--fs-sm); color: var(--ink-600); }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 5px; color: var(--amber-600); font-weight: 700; }
.checks li.soon { color: var(--ink-400); }
.checks li.soon::before { content: "◷"; color: var(--ink-300); }
/* A genuine exclusion, not a roadmap item. The clock glyph above reads as
   "coming soon", which would imply a promise we are not making. */
.checks li.never { color: var(--ink-400); }
.checks li.never::before { content: "✕"; color: var(--ink-300); font-weight: 600; }

/* Feature split rows */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split + .split { margin-top: 72px; }
.split--flip > .split__media { order: -1; }
.split h2 { font-size: var(--fs-xl); }
.split .lede { color: var(--ink-500); }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split--flip > .split__media { order: 0; }
}

/* ---------- Pricing ---------- */
.price-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
.price-card {
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-xl);
  padding: 30px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-1);
}
.price-card.featured { border: 2px solid var(--amber-500); box-shadow: var(--shadow-2); position: relative; }
.price-card .tier-badge { font-size: var(--fs-xs); font-weight: 600; color: var(--amber-700); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.price-card h3 { font-size: 1.35rem; margin-bottom: 2px; }
.price-card .amount { font-size: 2.6rem; font-weight: 700; color: var(--ink-900); letter-spacing: -0.03em; }
.price-card .amount small { font-size: 0.95rem; font-weight: 500; color: var(--ink-400); letter-spacing: 0; }
.price-card .fit { font-size: var(--fs-sm); color: var(--ink-500); margin: 6px 0 4px; min-height: 2.6em; }
.price-card .checks { flex: 1; margin-bottom: 22px; }
.price-note { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 18px; }

/* Billing term switch (Sam, 2026-09-21, following tenviacoworks.com). Three
   choices in the same order and words as the app's plan picker, so a visitor
   who becomes a customer meets the same control twice. Every price stays a
   monthly figure; the term is stated under the switch and under each amount. */
.term-row { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.term-switch {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 4px;
  border: 1px solid var(--ink-100); border-radius: 999px; background: var(--paper);
}
.term-switch__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 0;
  border-radius: 999px; background: transparent; color: var(--ink-500);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.term-switch__btn:hover { color: var(--ink-900); }
.term-switch__btn.is-on { background: var(--amber-500); color: var(--ink-900); }
.term-switch__btn:focus-visible { outline: 2px solid var(--amber-600); outline-offset: 2px; }
.term-switch__save {
  padding: 2px 7px; border-radius: 999px; background: var(--amber-100);
  color: var(--amber-700); font-size: var(--fs-xs); font-weight: 700;
}
.term-switch__btn.is-on .term-switch__save { background: rgba(255, 255, 255, 0.35); color: var(--ink-900); }
/* The notes always hold their line, in every term, so the cards below never
   jump when the switch is used. */
.term-note { margin: 0 0 34px; min-height: 19px; color: var(--ink-400); font-size: var(--fs-xs); }
.amount-note { margin: -6px 0 0; min-height: 17px; color: var(--ink-400); font-size: var(--fs-xs); }
/* "$85.50 CAD / month per company" wraps where "$95" does not, which grew the
   card by a line when the term changed. Splitting the amount from its unit
   makes every term the same height by construction. */
.price-card .amount { white-space: nowrap; }
.price-card .amount small { display: block; white-space: normal; }
@media (max-width: 640px) { .term-row { align-items: center; text-align: center; } }

/* Home pricing teaser. Prices live on the pricing page and nowhere else, so
   the home section makes the argument in words and sends people to the one
   place the numbers are maintained. */
.teaser { max-width: 62ch; margin: 0; color: var(--ink-600); font-size: var(--fs-md); line-height: 1.65; }
.teaser--fine { margin-top: 14px; color: var(--ink-400); font-size: var(--fs-xs); }
.teaser-cta { margin-top: 26px; }


/* Comparison table */
.table-scroll { overflow-x: auto; border: 1px solid var(--ink-100); border-radius: var(--r-md); background: var(--paper); }
table.plain { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
table.plain th { text-align: left; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); font-weight: 600; padding: 12px 18px; border-bottom: 1px solid var(--ink-200); }
table.plain td { padding: 11px 18px; border-bottom: 1px solid var(--ink-050); }
table.plain tr:last-child td { border-bottom: none; }
table.plain td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq details { background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-md); margin-bottom: 12px; }
.faq summary { cursor: pointer; padding: 18px 22px; font-weight: 600; color: var(--ink-900); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber-600); font-weight: 600; font-size: 1.2em; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 22px 18px; margin: 0; color: var(--ink-500); font-size: var(--fs-sm); max-width: 72ch; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: step; }
.step { background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: 24px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--amber-100); color: var(--amber-700); font-weight: 700; margin-bottom: 12px;
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink-900); border-radius: var(--r-xl); padding: 56px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background: radial-gradient(480px 260px at 80% 0%, rgba(245, 158, 11, 0.18) 0%, transparent 70%);
}
.cta-band h2 { color: #fff; position: relative; }
.cta-band p { color: var(--ink-300); position: relative; max-width: 56ch; margin: 0 auto 26px; }
.cta-band .hero__ctas { justify-content: center; position: relative; margin: 0; }

/* ---------- Forms ---------- */
/* minmax(0, 1fr) and min-width: 0 let form columns shrink to their card.
   With plain 1fr the fields' natural width won, and /contact/ and
   /early-access/ scrolled sideways at 320px and 1024px. */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field[hidden] { display: none; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-800); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-400); }
.field input, .field select, .field textarea {
  min-width: 0; max-width: 100%;
  font: inherit; font-size: 16px; /* iOS zoom floor */
  color: var(--ink-800); background: var(--paper);
  border: 1px solid var(--ink-border); border-radius: var(--r-sm); padding: 11px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber-600); outline: 2px solid var(--amber-100); }
/* Spans the whole form under the button, text centred (Sam, 2026-09-15). */
.form-status { grid-column: 1 / -1; text-align: center; border-radius: var(--r-sm); padding: 12px 16px; font-size: var(--fs-sm); font-weight: 500; }
.form-status.is-pending { background: var(--ink-050); color: var(--ink-600); }
.form-status.is-ok { background: var(--ok-soft); color: var(--ok); }
.form-status.is-error { background: var(--err-soft); color: var(--err); border: 1px solid var(--err-line); }
.form-status a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Signup layout */
.signup-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .signup-grid { grid-template-columns: 1fr; } }
.aside-card { background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: 26px; margin-bottom: 18px; }
.aside-card h3 { margin-bottom: 10px; }

/* ---------- Compare pages ---------- */
.verdict {
  border-left: 3px solid var(--amber-500); background: var(--amber-050);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 16px 20px;
  font-size: var(--fs-sm); color: var(--ink-700); max-width: 72ch;
}
.verdict b { color: var(--ink-900); }
table.plain th.us { color: var(--amber-700); }
/* Our own row in a "what it replaces" table on the deep feature pages. */
table.plain tr.us td { background: var(--amber-050); font-weight: 600; color: var(--ink-900); }
table.plain tr.us td.num { color: var(--amber-700); }
table.plain td.rowname { font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.win-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
@media (max-width: 760px) { .win-grid { grid-template-columns: 1fr; } }
/* Three stages of the job, so three columns rather than two and an orphan. */
.win-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .win-grid--three { grid-template-columns: 1fr; } }
.checks.ours li::before { color: var(--ok); }
.vs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.vs-card {
  display: block; background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-lg);
  padding: 20px 22px; text-decoration: none; box-shadow: var(--shadow-1);
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.vs-card:hover { border-color: var(--amber-500); transform: translateY(-2px); }
.vs-card .n { font-weight: 700; color: var(--ink-900); }
.vs-card p { font-size: var(--fs-xs); color: var(--ink-500); margin: 6px 0 8px; }
.vs-card .go { font-size: var(--fs-xs); color: var(--amber-700); font-weight: 600; }
.vs-card--lane { background: transparent; border-style: dashed; box-shadow: none; cursor: default; }
.vs-card--lane:hover { border-color: var(--ink-border); transform: none; }
.fineprint { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 22px; max-width: 78ch; }

/* ---------- Cal.com inline embed (book a demo) ---------- */
.cal-wrap { margin-top: 22px; min-height: 560px; }

/* ---------- Book a demo: the modal and the page share one flow (Sam, 2026-09-30) ---------- */
html:not(.js) #demo-flow { display: none; }
.demo-flow [hidden], .demo-modal [hidden] { display: none !important; }
.demo-open, .demo-open body { overflow: hidden; }
.demo-open [data-tvo-assistant] { display: none !important; }
.demo-modal {
  /* 880: wide enough for Cal to put the times beside the month, as drawn. */
  width: min(880px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 48px);
  padding: 0; border: 0; border-radius: var(--r-lg); overflow: auto;
  background: var(--paper); color: var(--ink-800); box-shadow: 0 24px 64px rgba(11, 18, 32, 0.28);
}
.demo-modal::backdrop { background: rgba(11, 18, 32, 0.55); }
.demo-modal__head {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 20px 24px 14px; background: var(--paper); border-bottom: 1px solid var(--ink-100);
}
.demo-modal__head h2 { font-size: var(--fs-xl); margin: 0; }
.demo-modal__head p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-500); }
.demo-modal__x {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--ink-100); border-radius: var(--r-sm); color: var(--ink-500);
}
.demo-modal__x:hover { background: var(--ink-050); color: var(--ink-900); }
.demo-modal__x:focus-visible { outline: 2px solid var(--amber-500); outline-offset: 2px; }
.demo-modal .demo-flow { padding: 18px 24px 24px; }
.demo-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.demo-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--ink-100); transition: background 0.2s var(--ease); }
.demo-progress span.on { background: var(--amber-500); }
.demo-flow .cal-wrap { margin-top: 0; min-height: 520px; }
.demo-booked { margin: 0 0 18px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ok); font-size: var(--fs-sm); font-weight: 500; }
.demo-booked:focus { outline: none; }
/* On the page the flow carries the step title the modal shows in its header. */
.demo-flow__head { margin-bottom: 14px; }
.demo-flow__head h2 { font-size: var(--fs-xl); margin: 0; }
.demo-flow__head p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-500); }
.demo-done h3 { font-size: var(--fs-lg); }
.demo-skip { margin: 12px 0 0; text-align: center; font-size: var(--fs-xs); color: var(--ink-400); }
.demo-done { text-align: center; padding: 18px 0 6px; }
.demo-done h3 { margin-bottom: 6px; }
.demo-done h3:focus { outline: none; }
.demo-done p { color: var(--ink-600); margin: 0 0 20px; }
.demo-done__tick {
  width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 24px; font-weight: 700;
}
@media (max-width: 640px) {
  .demo-modal { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .demo-modal__head { padding: 16px; }
  .demo-modal .demo-flow { padding: 14px 16px 24px; }
}

/* ---------- Screenshot captions ---------- */
.figure { margin: 0; }
.figure figcaption { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 10px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-900); color: var(--ink-300); padding: 64px 0 32px; margin-top: 84px; }
.footer a { color: var(--ink-200); text-decoration: none; display: inline-block; padding: 6px 0; min-height: 24px; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 36px; margin-bottom: 40px; }
.footer__brand p { font-size: var(--fs-sm); max-width: 42ch; }
.footer h4 { color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 10px; }
.footer ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.footer__base { border-top: 1px solid var(--ink-700); padding-top: 24px; font-size: var(--fs-xs); color: var(--ink-400); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 1080px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 28px; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Reveal ----------
   Content is never parked hidden — the page must read at rest (and in a
   thumbnail). The observer only adds a gentle settle to elements it sees
   arriving; without JS or with reduced motion nothing moves at all. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.in { animation: settle 0.5s var(--ease); }
  @keyframes settle {
    from { opacity: 0.25; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Print ---------- */
@media print {
  .nav, .footer, .cta-band, .hero__ctas { display: none !important; }
  body { background: #fff; }
}

/* ---------- Analytics consent banner (ported from tenviaos.com) ---------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--paper); border-top: 1px solid var(--ink-100);
  box-shadow: 0 -8px 32px rgba(11, 18, 32, .12);
  transform: translateY(100%); transition: transform .24s var(--ease);
}
.consent.is-in { transform: none; }
/* The site assistant's bubble waits until the cookie choice is made, so it
   never covers Accept. tvb-consent.js sets the class; the widget mounts a
   light-DOM host, and !important beats any inline display it sets. */
.consent-open [data-tvo-assistant] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; transform: none; } }
.consent__inner { max-width: var(--wrap); margin-inline: auto; padding: 20px 24px; display: grid; gap: 16px; align-items: center; }
@media (min-width: 860px) { .consent__inner { grid-template-columns: 1fr auto; gap: 32px; } }
.consent__text strong { display: block; font-size: var(--fs-sm); font-weight: 660; color: var(--ink-900); margin-bottom: 6px; }
.consent__text p { font-size: var(--fs-sm); color: var(--ink-600); margin: 0; max-width: 78ch; }
.consent__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.consent__actions .btn { flex: 1 1 auto; min-width: 130px; }
@media (min-width: 860px) { .consent__actions .btn { flex: 0 0 auto; } }
.footer__base button.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- The platform dropdown (tvb-select.js; the app's SelectField, Sam 2026-09-30) ---------- */
.tsel { position: relative; min-width: 0; }
.field .tsel__native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.field .tsel__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left;
  font: inherit; font-size: 16px; color: var(--ink-800); background: var(--paper);
  border: 1px solid var(--ink-border); border-radius: var(--r-sm); padding: 11px 14px;
}
.tsel__trigger svg { flex: none; color: var(--ink-400); }
.tsel__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsel__trigger.is-empty .tsel__value { color: var(--ink-400); }
.tsel__trigger[aria-expanded="true"], .tsel__trigger:focus-visible { border-color: var(--amber-600); outline: 2px solid var(--amber-100); }
.tsel__trigger.is-invalid { border-color: var(--err); outline: 2px solid var(--err-soft); }
.tsel__menu {
  position: fixed; z-index: 300; display: flex; flex-direction: column; max-height: 288px; max-width: 360px;
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-md); box-shadow: var(--shadow-3);
}
.tsel__menu[hidden] { display: none; }
.tsel__search { padding: 6px; border-bottom: 1px solid var(--ink-100); }
.tsel__search input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink-800); background: var(--paper);
  border: 1px solid var(--ink-100); border-radius: var(--r-sm); padding: 7px 10px;
}
.tsel__search input:focus { border-color: var(--amber-600); outline: none; }
.tsel__list { overflow-y: auto; padding: 4px 0; }
.tsel__opt { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: var(--fs-sm); color: var(--ink-700); cursor: pointer; }
.tsel__opt.is-active { background: var(--ink-050); }
.tsel__opt.is-chosen { font-weight: 600; color: var(--ink-900); }
.tsel__tick { width: 16px; flex: none; display: flex; justify-content: center; color: var(--amber-600); }
.tsel__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsel__none { margin: 0; padding: 8px 12px; font-size: var(--fs-sm); color: var(--ink-400); }

/* ---------- Forms through "Ask a question" first (tvb-assistant.js, Sam 2026-10-03) ---------- */
/* One of the two shows: chat first while the assistant is on, the page's
   own form while it is off. Both wait for the script so neither flashes;
   without JavaScript the form shows. */
.js:not(.forms-ready) [data-chat-mode], .js:not(.forms-ready) [data-form-mode] { visibility: hidden; }
html:not(.chat-first) [data-chat-mode] { display: none !important; }
.chat-first [data-form-mode] { display: none !important; }
.chat-contact { max-width: 560px; }
.chat-contact [hidden] { display: none !important; }
.contact-direct { margin: 14px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-500); }