/* ==========================================================================
   Tenvia Coworks: site styles v1
   Derived from the tenviabuild.com stylesheet (itself from TenviaOS Design
   System v1), re-skinned for the Coworks product: the same ink, the Coworks
   teal (#017C8F) for actions and accents, white text on teal buttons as in
   the app. Coral (#EA6A55) is ViaMeet only and is scoped to .via.
   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;

  /* Coworks accent: teal, per the product mark and the app UI */
  --teal-700: #01515D;   /* button hover, mark gradient end */
  --teal-600: #015E6D;   /* text-safe on white (6.5:1) */
  --teal-500: #017C8F;   /* buttons (white text, 4.9:1), borders, the nav bar */
  --teal-400: #2BA4B8;   /* dark-background accents only */
  --teal-300: #5EEAD4;   /* the "Coworks" wordmark tint on dark */
  --teal-100: #CDEAEF;
  --teal-050: #EDF7F9;

  /* ViaMeet: coral, scoped to .via so it never leaks into the operator pages */
  --via-700: #B93E2E;
  --via-600: #DD5240;
  --via-500: #EA6A55;
  --via-100: #FCE3DE;
  --via-050: #FEF3F0;

  /* 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(--teal-600); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal-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(--teal-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(--teal-500); 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(--teal-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); }
}

/* ---------- 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(--teal-500); color: #fff; }
.btn-primary:hover { background: var(--teal-700); }
.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(--teal-500); color: #fff; }
.btn-on-ink:hover { background: var(--teal-400); color: var(--ink-900); }
.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(--teal-600); 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); }
.section--ink .eyebrow { color: var(--teal-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(--teal-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)); }
.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(--teal-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(--teal-500); 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: 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(--teal-500); box-shadow: var(--shadow-2); position: relative; }
.price-card .tier-badge { font-size: var(--fs-xs); font-weight: 600; color: var(--teal-600); 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; }

/* 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(--teal-500); 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(--teal-100); color: var(--teal-600); 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(1, 124, 143, 0.22) 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 ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.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 {
  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(--teal-500); outline: 2px solid var(--teal-100); }
.form-status { border-radius: var(--r-sm); padding: 12px 16px; font-size: var(--fs-sm); font-weight: 500; }
/* Response messages span the whole form and sit centred under the submit button (Sam, 2026-09-15). */
.form-status { grid-column: 1 / -1; text-align: center; }
.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); }
@media (max-width: 640px) { .form-grid { grid-template-columns: 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(--teal-500); background: var(--teal-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(--teal-600); }
/* Our own row in a "what it replaces" table on the deep feature pages. */
table.plain tr.us td { background: var(--teal-050); font-weight: 600; color: var(--ink-900); }
table.plain tr.us td.num { color: var(--teal-600); }
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; } }
.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(--teal-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(--teal-600); 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; }

/* ---------- 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; }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; transform: none; } }

/* Below 560px the header row no longer fits: at 375px of usable width it needed
   473px, so the Menu button sat past the right edge and every page scrolled
   sideways (measured live 2026-09-15). The Get Early Access button steps out
   here, because the open menu already carries it. */
@media (max-width: 560px) {
  .nav__inner > .btn { display: none; }
  .nav__inner { gap: 16px; }
}

.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; }


/* ---------- ViaMeet scope ----------
   The /viameet/ page and the one ViaMeet band on the home page wear coral.
   Everything inside .via that would otherwise be teal becomes coral; the
   ink, canvas and type do not change. Never apply .via to an operator page. */
.via { --teal-700: var(--via-700); --teal-600: var(--via-600); --teal-500: var(--via-500); --teal-400: var(--via-500); --teal-300: #F8B8AC; --teal-100: var(--via-100); --teal-050: var(--via-050); }
.via-band { background: var(--via-050); border: 1px solid var(--via-100); border-radius: var(--r-xl); padding: 40px 44px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 36px; align-items: center; }
.via-band .eyebrow { color: var(--via-600); }
.via-band h2 { font-size: var(--fs-xl); }
.via-band .btn-primary { background: var(--via-500); color: #fff; }
.via-band .btn-primary:hover { background: var(--via-700); }
.via-band .checks li::before { color: var(--via-600); }
.via-band .fee { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.via-band .fee div { background: var(--paper); border: 1px solid var(--via-100); border-radius: var(--r-md); padding: 16px 18px; }
.via-band .fee b { display: block; font-size: 1.9rem; font-weight: 700; color: var(--via-700); letter-spacing: -0.03em; line-height: 1.1; }
.via-band .fee span { font-size: var(--fs-xs); color: var(--ink-500); }
/* Home page band: ViaMeet against the other venue marketplaces, so no number in
   this block can be read as one of ours. The .fee tiles above still serve the
   ViaMeet page. Labels shorten on a phone so three columns keep fitting. */
.via-cmp { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--via-100); border-radius: var(--r-md); overflow: hidden; font-size: var(--fs-sm); }
.via-cmp th, .via-cmp td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ink-050); }
.via-cmp thead th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); background: var(--canvas); }
.via-cmp thead th.us { color: var(--via-700); }
.via-cmp tr:last-child td { border-bottom: 0; }
.via-cmp td.k { color: var(--ink-500); }
.via-cmp td.us { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.via-cmp td.them { color: var(--ink-500); }
.via-cmp .lbl-short { display: none; }
.via-note { font-size: 0.75rem; line-height: 1.5; color: var(--ink-400); margin: 10px 0 0; }
@media (max-width: 480px) {
  .via-cmp .lbl-long { display: none; }
  .via-cmp .lbl-short { display: inline; }
  .via-cmp th, .via-cmp td { padding: 8px 9px; }
}
@media (max-width: 860px) { .via-band { grid-template-columns: 1fr; padding: 28px 24px; } }

/* ---------- Invoice hero ----------
   The home page hero draws an invoice in HTML: one client, four revenue
   lines, one card on file. It is the thesis of the site, so it is markup,
   not a screenshot, and it reads without images. */
.hero__invoice { position: relative; }
.invoice { background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 26px 28px 22px; font-size: var(--fs-sm); }
.invoice__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 1px solid var(--ink-100); padding-bottom: 14px; margin-bottom: 6px; }
.invoice__brand { font-weight: 700; color: var(--ink-900); }
.invoice__brand small { display: block; font-weight: 500; color: var(--ink-400); font-size: var(--fs-xs); }
.invoice__meta { text-align: right; font-size: var(--fs-xs); color: var(--ink-400); }
.invoice__meta b { display: block; color: var(--ink-900); font-weight: 600; }
.invoice table { width: 100%; border-collapse: collapse; }
.invoice td { padding: 9px 0; border-bottom: 1px dashed var(--ink-100); vertical-align: top; }
.invoice td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-900); font-weight: 600; }
.invoice td small { display: block; color: var(--ink-400); font-size: var(--fs-xs); font-weight: 400; }
.invoice tr.total td { border-bottom: 0; border-top: 2px solid var(--ink-900); padding-top: 12px; font-weight: 700; color: var(--ink-900); }
.invoice tr.total td:last-child { color: var(--teal-600); font-size: 1.2rem; }
.invoice__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-400); }
.invoice__foot .paid { color: var(--ok); font-weight: 600; }
.invoice__tag { position: absolute; top: -12px; right: 22px; background: var(--teal-500); color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pill); }
@media (max-width: 480px) { .invoice { padding: 20px 18px 16px; } .invoice__tag { right: 14px; } }

/* ---------- Legal pages ---------- */
.toc { background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-md); padding: 18px 22px; margin-bottom: 32px; max-width: 520px; }
.toc h2 { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 8px; }
.toc ol { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); columns: 2; column-gap: 24px; }
.toc li { margin: 3px 0; break-inside: avoid; }
.toc a { text-decoration: none; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.legal { max-width: 78ch; }
.legal h2 { font-size: var(--fs-lg); margin-top: 40px; }
.legal h3 { font-size: var(--fs-base); margin-top: 22px; }
.legal p, .legal li { font-size: var(--fs-sm); color: var(--ink-600); }
.legal table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.legal th, .legal td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ink-100); vertical-align: top; }
.legal th { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); }

/* ---------- HTML panels (screenshot stand-ins) ----------
   Small product views drawn in markup so the page reads before the real
   screenshots land. When a capture replaces one, delete the panel. */
.panel { padding: 14px 16px 12px; font-size: var(--fs-xs); color: var(--ink-600); }
.panel__row { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--ink-050); }
.panel__row--head { color: var(--ink-400); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }
.panel__row span:first-child { color: var(--ink-900); font-weight: 600; }
.panel__foot { padding-top: 10px; color: var(--ink-400); }
.panel .pill { display: inline-block; border-radius: var(--r-pill); padding: 2px 9px; background: var(--ink-050); color: var(--ink-600); font-weight: 600; white-space: nowrap; }
.panel .pill--ok { background: var(--ok-soft); color: var(--ok); }
.panel .pill--warn { background: var(--warn-soft); color: var(--warn); }
.panel--center { text-align: center; padding: 26px 16px 18px; }
.panel__title { font-size: var(--fs-md); font-weight: 700; color: var(--ink-900); }
.panel__sub { color: var(--ink-400); margin-bottom: 16px; }
.panel__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.panel__stats div { background: var(--teal-050); border-radius: var(--r-md); padding: 12px 8px; }
.panel__stats b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--teal-600); letter-spacing: -0.02em; line-height: 1.1; }
.panel__stats span { color: var(--ink-500); }

/* ---------- Site assistant vs consent banner ----------
   The TenviaOS assistant launcher is fixed bottom-right at a very high
   z-index and covered the banner's Accept button on phones (found live
   2026-09-15). Hide the assistant while the banner is up; tvc-consent.js
   sets .consent-open on <html> for exactly that window. */
.consent-open [data-tvo-assistant] { display: none !important; }

/* Billing term switch (pricing page, Sam 2026-09-20). Same three choices and
   the same order 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-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 auto 10px;
  padding: 4px;
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  background: #fff;
}
.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: 14px;
  font-weight: 600;
  cursor: pointer;
}
.term-switch__btn:hover { color: var(--ink-900); }
.term-switch__btn.is-on { background: var(--teal-500); color: #fff; }
.term-switch__btn:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.term-switch__save {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--teal-050);
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 700;
}
.term-switch__btn.is-on .term-switch__save { background: rgba(255, 255, 255, 0.22); color: #fff; }
.term-note {
  /* Always occupies its line, in every term, so the cards below never jump
     when the switch is used (Sam, 2026-09-20). */
  margin: 0 0 34px;
  min-height: 19px;
  color: var(--ink-400);
  font-size: 13px;
}
.amount-note {
  /* Same reason: every term carries a note, so the card body starts at the
     same height whichever is picked. */
  min-height: 17px;
}
.amount-note {
  margin: -6px 0 0;
  color: var(--ink-400);
  font-size: 12px;
}
/* The switch sits to the right, above the cards, the way the app puts it to
   the right of the plan heading. */
.term-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.term-switch { margin: 0 0 8px; }
@media (max-width: 640px) {
  .term-row { align-items: center; text-align: center; }
}
/* The amount and its unit sit on their own lines. "$85.50 CAD / month per
   location" wrapped where "$95 CAD / month per location" did not, so the card
   grew by a line when the term changed (Sam, 2026-09-20). Splitting them
   makes every term the same height by construction rather than by luck. */
.price-card .amount { white-space: nowrap; }
.price-card .amount small { display: block; white-space: normal; }

/* Home pricing teaser (Sam, 2026-09-20). 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: 17px;
  line-height: 1.65;
}
.teaser--fine {
  margin-top: 14px;
  color: var(--ink-400);
  font-size: 13px;
}
.teaser-cta { margin-top: 26px; }

/* Worked examples (Sam, 2026-09-20). They sit under the table they explain,
   so they read as the consequence of the rates above rather than as a second
   comparison. The platform fee is the column the reader is here for, so a
   marketplace fee is coloured and ours is not. */
.worked {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--ink-100);
}
.worked__title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-900);
}
.worked__lede {
  margin: 0 0 16px;
  max-width: 62ch;
  color: var(--ink-600);
}
.worked__table td.num,
.worked__table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* What the operator keeps is green and our own row is tinted. */
table.plain.worked__table tr.us td { background: var(--ok-soft); }
table.plain.worked__table tr.us td.rowname { box-shadow: inset 3px 0 0 var(--ok); }
/* The ViaMeet page scopes its numbers to coral, which made every figure in
   our own rows read as a fee. In a worked example only the platform fee is
   red and only what the operator keeps is green; everything else is plain. */
table.plain.worked__table tr td.num { color: var(--ink-700); }
table.plain.worked__table tr td.num.toll { color: var(--err); font-weight: 700; }
table.plain.worked__table tr td.num.keeps { color: var(--ok); font-weight: 700; }

/* Book a demo, as a modal over the page (Sam, 2026-09-30). Calendar first,
   then the optional questions, then done. The modal standard applies: an X
   in the corner closes it, a click outside does nothing, and it fills the
   screen on a phone. */
.demo-modal { position: fixed; inset: 0; z-index: 1200; }
.demo-modal[hidden] { display: none !important; }
.demo-modal__scrim { position: absolute; inset: 0; background: rgba(11, 18, 32, 0.46); }
.demo-modal__panel {
  position: absolute; left: 50%; top: 4vh; transform: translateX(-50%);
  /* Cal puts the times beside the month from about 880 up; below that it
     hides them until a day is picked (Sam, 2026-09-30). */
  width: calc(100% - 32px); max-width: 880px; max-height: 92vh; overflow-y: auto;
  background: var(--paper); border-radius: 14px; box-shadow: var(--shadow-3);
  padding: 20px 22px 24px;
}
.demo-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.demo-modal__head h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.demo-modal__head p { margin: 3px 0 0; font-size: 13px; color: var(--ink-400); }
.demo-modal__x {
  flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--ink-100); color: var(--ink-500); cursor: pointer;
}
.demo-modal__x:hover { background: var(--ink-050); color: var(--ink-800); }
.demo-modal__steps { display: flex; gap: 6px; margin: 14px 0 4px; }
.demo-modal__steps span { flex: 1; height: 3px; border-radius: 2px; background: var(--ink-100); }
.demo-modal__steps span.is-on { background: var(--teal-600); }
.demo-modal__body { margin-top: 12px; }
.demo-modal__body .cal-wrap { margin-top: 0; min-height: 520px; }
.demo-modal__ok {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 9px;
  background: #E6F3EF; color: #0F6B52; font-size: 13.5px; font-weight: 500;
}
.demo-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-modal__skip { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-400); text-align: center; }
.demo-modal__done { text-align: center; padding: 20px 4px 6px; }
.demo-modal__tick {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  background: #E6F3EF; color: #0F6B52; font-size: 22px; line-height: 46px;
}
.demo-modal__done h3 { margin: 0 0 6px; font-size: 18px; }
.demo-modal__done p { margin: 0 0 16px; font-size: 14px; color: var(--ink-500); }
.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--teal-600);
  text-decoration: underline; cursor: pointer;
}

/* The assistant launcher is fixed bottom right above everything, the same
   problem the consent card has. */
.demo-modal-open [data-tvo-assistant] { display: none !important; }
.demo-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .demo-modal__panel {
    top: 0; left: 0; transform: none; width: 100%; max-width: none;
    height: 100%; max-height: none; border-radius: 0; padding: 16px 16px 24px;
  }
  .demo-modal__row { grid-template-columns: 1fr; }
}

/* .field sets display:flex, which outranks the hidden attribute, so a field
   meant to stay out of the way showed anyway (found on tenviabuild.com). */
.demo-modal [hidden], #tvc-demo-page [hidden] { display: none !important; }

/* Our own dropdown, never the browser's (Sam, 2026-09-30). A port of the
   app's SelectField: a trigger that matches the text fields, and a popover
   list with a check beside the chosen option. The native select stays in the
   form, hidden, so FormData and validation still work. */
.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(--teal-500); outline: 2px solid var(--teal-100); }
.tsel__trigger.is-invalid { border-color: var(--err); outline: 2px solid var(--err-soft); }
.tsel__menu {
  /* Above the demo modal, which sits at 1200. */
  position: fixed; z-index: 1300; 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(--teal-500); 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(--teal-500); }
.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); }

/* The demo page carries the same step titles the modal header does, so no
   step repeats a heading inside itself (Sam, 2026-09-30). */
.demo-flow__head h2 { font-size: var(--fs-xl); margin: 0 0 4px; }
.demo-flow__head p { margin: 0; color: var(--ink-400); font-size: var(--fs-sm); }
.demo-flow__head [hidden] { display: none !important; }

/* The drawing's step 2, exactly (Sam, 2026-09-30): Company across the whole
   width, Phone and Your role side by side, the tools question across, then a
   full-width Send. The site's two-column form grid would otherwise pack them
   three to a row. */
.demo-modal__body .form-grid,
#tvc-demo-page .form-grid { grid-template-columns: 1fr; }
.demo-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.demo-modal__body .form-grid > .field,
.demo-modal__body .form-grid > [data-demo-identity],
.demo-modal__body .form-grid > button,
.demo-modal__body .form-grid > p,
#tvc-demo-page .form-grid > .field,
#tvc-demo-page .form-grid > [data-demo-identity],
#tvc-demo-page .form-grid > p,
.demo-modal__body .form-grid > .demo-modal__row,
#tvc-demo-page .form-grid > .demo-modal__row { grid-column: 1 / -1; }

/* .field is a flex container, which beats the [hidden] attribute's own
   display:none, so a hidden follow-up field would otherwise still show
   (Sam, 2026-10-03, hit first on tenviabuild.com). */
.field[hidden] { display: none; }

/* ---------- Forms through "Ask a question" first (tvc-assistant.js, Sam 2026-10-04) ---------- */
/* 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; margin-inline: auto; }
/* .card and .field set their own display, which outranks the hidden
   attribute, so the direct form would show before it is asked for. */
.chat-contact [hidden] { display: none !important; }
.contact-direct { margin: 14px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-500); }