/* VVOXA marketing pages: /pricing, /how-it-works, the trade pages and the
   Southwest Florida page (public/pages/<slug>.html). One stylesheet for all
   of them, served by GET /site.css before the owner gate (src/server.js) and
   linked as /site.css?v=N: bump N on every page when this file changes.

   It is the home page's look (public/store.html keeps its own inline copy,
   which tests/admin/t-store-page.mjs requires): the same fonts, tokens,
   buttons, nav, sections, call cards, FAQ, close band and footer. Light
   only, like the home page and the legal pages; the Night bands (close and
   footer) are part of that look, not a dark mode. The tokens below must keep
   the home page's values: tests/seo/t-marketing-pages.mjs compares them.

   No JavaScript is needed by anything here. The phone menu is a <details>,
   so the pages carry no inline script and the CSP needs no new hash.

   The server serves this file as is (it minifies only store.html's inline
   CSS), but keep the house rule anyway: write "*:focus-visible", never a
   bare " :focus-visible" after a space. */

/* ── Fonts (same files and allowlist as the home page) ─────────────── */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/red-hat-display-latin-v21.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/red-hat-text-latin-v19.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens (values copied from store.html :root) ──────────────────── */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --night: #0E0F12;
  --night-2: #1A1B1F;
  --chalk: #F2F3F5;
  --chalk-2: #A3A7AF;
  --white: #FFFFFF;
  --ink: #121316;
  --sec: #5C5F66;
  --hair: #E6E7EA;
  --hair-2: #D5D7DB;
  --field: #8C8F96;
  --snow: #F5F6F7;
  --green: #34C759;
  --green-hi: #4DD170;
  --deep: #0B7A3E;
  --deep-hi: #096834;
  --tint: #E7F4EC;
  --hair-n: rgba(242, 243, 245, .12);
  --display: "Red Hat Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body: "Red Hat Text", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgba(18, 19, 22, .06), 0 22px 44px -26px rgba(18, 19, 22, .32);
  --nav-h: 56px;
  --pad: 20px;
  --r: 12px;
  --measure: 720px;
  color-scheme: light;
}
@media (min-width: 600px) { :root { --pad: 40px; } }
@media (min-width: 1024px) { :root { --nav-h: 64px; --pad: 44px; } }
@media (min-width: 1200px) { :root { --pad: clamp(56px, 5vw, 88px); } }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 16px/1.6 var(--body); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
@media (min-width: 1024px) { body { font-size: 18px; } }
p, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }
/* Smaller than the home page's 80px H1: these headings are longer. */
h1 { font-weight: 700; font-size: 36px; line-height: 1.05; letter-spacing: -.03em; }
h2 { font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.025em; }
h3 { font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
@media (min-width: 600px) { h1 { font-size: 48px; } h2 { font-size: 34px; } }
@media (min-width: 1024px) {
  h1 { font-size: clamp(48px, calc(16px + 3.2vw), 60px); line-height: 1.02; }
  h2 { font-size: 38px; }
  h3 { font-size: 21px; }
}
a { color: var(--deep); text-underline-offset: 3px; }
a:hover { color: var(--deep-hi); }
svg { flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.close *:focus-visible, body > footer *:focus-visible { outline-color: var(--green); }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 10px;
  font: 600 16px/1 var(--body); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-go { background: var(--deep); color: #fff; }
.btn-go:hover { background: var(--deep-hi); color: #fff; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-line:hover { background: var(--snow); color: var(--ink); }
.btn-green { background: var(--green); color: var(--night); }
.btn-green:hover { background: var(--green-hi); color: var(--night); }
.btn-lg { min-height: 52px; padding: 0 24px; font-size: 17px; }
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 15px; }

/* ── Nav: always the home page's white "solo" bar ──────────────────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); background: var(--white); border-bottom: 1px solid var(--hair); }
.nav-in { height: 100%; display: flex; align-items: center; gap: 20px; padding: 0 var(--pad); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 21px/1 var(--display); letter-spacing: -.025em; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.links { display: none; align-items: center; gap: 22px; }
.links a { color: var(--ink); text-decoration: none; white-space: nowrap; font-size: 15px; font-weight: 500; padding: 12px 0; transition: color .15s var(--ease); }
.links a:hover, .links a[aria-current="page"] { color: var(--deep); }
.links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-cta { display: none; min-height: 44px; font-size: 15px; padding: 0 16px; }
/* The phone menu: a <details>, so it opens and closes with no script. */
/* Left as display: list-item (its default, marker hidden): some screen
   readers stop announcing a <summary> as a button once it is flex or grid. */
.mnav > summary { list-style: none; display: list-item; height: 44px; line-height: 44px; padding: 0 14px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; user-select: none; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav[open] > summary { background: var(--ink); color: #fff; }
.mnav .menu { position: fixed; z-index: 59; top: var(--nav-h); left: 0; right: 0; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; background: var(--white); border-bottom: 1px solid var(--hair); box-shadow: var(--shadow); padding: 8px var(--pad) 20px; }
.mnav .menu a:not(.btn) { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 17px; }
.mnav .menu a[aria-current="page"] { color: var(--deep); font-weight: 600; }
.mnav .menu .btn { width: 100%; margin-top: 16px; }
@media (min-width: 800px) {
  .links { display: flex; }
  .nav-cta { display: inline-flex; }
  .mnav { display: none; }
}

/* ── Page hero ─────────────────────────────────────────────────────── */
.wrap { max-width: var(--measure); margin-inline: auto; }
.phero { padding: calc(var(--nav-h) + 20px) var(--pad) 0; }
@media (min-width: 1024px) { .phero { padding-top: calc(var(--nav-h) + 40px); } }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 14.5px; color: var(--sec); }
.crumbs li + li::before { content: "/"; padding: 0 8px; color: var(--field); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sec); }
.crumbs a:hover { color: var(--deep); }
.crumbs [aria-current="page"] { color: var(--ink); }
.phero h1 { margin-top: 6px; }
.lede { margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--sec); max-width: 36em; }
@media (min-width: 1024px) { .lede { margin-top: 22px; font-size: 20px; } }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
@media (max-width: 599px) { .phero .ctas .btn { width: 100%; } }
.price { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--sec); }
.price b { color: var(--ink); font-weight: 600; }
/* Who wrote it and when it last changed. Change the date only when the
   content really changes. */
.byline { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 14.5px; line-height: 1.5; color: var(--sec); }
.byline a { color: var(--sec); }
/* "On this page": jump links under the hero. */
.toc { margin-top: 28px; }
.toc h2 { font: 600 14.5px/1.3 var(--body); letter-spacing: 0; color: var(--sec); }
.toc ul { list-style: none; padding: 0; margin-top: 6px; display: flex; flex-wrap: wrap; column-gap: 18px; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15.5px; font-weight: 500; }

/* ── Sections and running text ─────────────────────────────────────── */
.sec { padding: 56px var(--pad) 0; }
@media (min-width: 1024px) { .sec { padding-top: 88px; } }
.sec:focus { outline: none; }
main:focus { outline: none; }
.intro { margin-top: 14px; font-size: 17px; color: var(--sec); max-width: 36em; }
@media (min-width: 1024px) { .intro { margin-top: 18px; font-size: 18px; } }
.prose { margin-top: 18px; line-height: 1.65; }
.prose > * + * { margin-top: 16px; }
.prose h3 { margin-top: 32px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 8px; }
.prose b, .prose strong { font-weight: 600; }
.sub { margin-top: 40px; }
.fine { font-size: 14.5px; line-height: 1.55; color: var(--sec); }
.fine a { color: var(--deep); }

/* Lists with a drawn check or cross (no icon font, no images). */
.ticks, .xs { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 12px; }
.ticks li, .xs li { position: relative; padding-left: 32px; line-height: 1.55; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .42em; width: 13px; height: 7px; border-left: 2.5px solid var(--deep); border-bottom: 2.5px solid var(--deep); transform: rotate(-45deg); }
.xs li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 16px; height: 16px; background: linear-gradient(45deg, transparent 43%, #B42318 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #B42318 43% 57%, transparent 57%); }
.ticks b, .xs b { font-weight: 600; }

/* A callout: a short note the reader should not miss. */
.note { margin-top: 24px; padding: 16px 18px; border-left: 3px solid var(--deep); background: var(--tint); border-radius: 0 8px 8px 0; font-size: 16px; line-height: 1.55; }
.note.warn { border-left-color: #8A5300; background: #FFF3D6; }
.note b { font-weight: 600; }

/* Numbered steps, big numbers (the home page's "How it works"). */
.steps { list-style: none; padding: 0; margin-top: 28px; }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; padding: 24px 0; border-top: 1px solid var(--hair); }
.steps .n { font: 600 40px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.steps h3 { margin: 4px 0 8px; }
.steps p { color: var(--sec); max-width: 34em; }
@media (min-width: 1024px) { .steps li { grid-template-columns: 76px minmax(0, 1fr); padding: 32px 0; } .steps .n { font-size: 52px; } }

/* Numbered steps, small numbers: a sequence inside a section. */
.flow { list-style: none; padding: 0; margin-top: 24px; counter-reset: flow; display: grid; gap: 0; }
.flow > li { counter-increment: flow; position: relative; padding: 16px 0 16px 48px; border-top: 1px solid var(--hair); }
.flow > li::before { content: counter(flow); position: absolute; left: 0; top: 15px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--deep); font: 700 15px/1 var(--display); }
.flow h3 { font-size: 18px; margin-bottom: 4px; }
.flow p { color: var(--sec); }
@media (min-width: 1024px) { .flow h3 { font-size: 19px; } }

/* Two-column feature list (the home page's "What it does"). */
.does { list-style: none; padding: 0; margin-top: 28px; display: grid; column-gap: 36px; }
@media (min-width: 640px) { .does { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.does li { padding: 18px 0 20px; border-top: 1px solid var(--hair); }
.does h3 { font-size: 18px; margin-bottom: 4px; }
.does p { color: var(--sec); font-size: 16px; }
@media (min-width: 1024px) { .does h3 { font-size: 19px; } }

/* Titled rows (the home page's account chapters). */
.chapters { list-style: none; padding: 0; margin-top: 24px; }
.chapters li { padding: 20px 0; border-top: 1px solid var(--hair); }
.chapters h3 { margin-bottom: 6px; }
.chapters p { color: var(--sec); max-width: 36em; }

/* A timeline (the home page's "What the $1,000 pays for"). */
.tl { list-style: none; padding: 0; margin-top: 22px; }
.tl li { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0 14px 24px; border-top: 1px solid var(--hair); }
.tl li::before { content: ""; position: absolute; left: 0; top: 23px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.tl li:last-child::before { background: var(--deep); }
.tl .when { font-weight: 600; }
.tl .what { color: var(--sec); }
@media (max-width: 599px) { .tl li { grid-template-columns: minmax(0, 1fr); } }

/* The price box (the home page's .pay). */
.pay { margin-top: 28px; max-width: 560px; border: 1.5px solid var(--ink); border-radius: var(--r); padding: 6px 22px 22px; background: #fff; }
.pay table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pay th, .pay td { padding: 16px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--hair); font-weight: 400; }
.pay th { width: 32%; font-weight: 500; padding-right: 12px; }
.pay .amt { font: 700 26px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; padding-right: 16px; }
.pay td:last-child { color: var(--sec); font-size: 15px; line-height: 1.4; }
.pay .btn { width: 100%; margin-top: 20px; }
.pay .fine { margin-top: 14px; }
@media (max-width: 420px) {
  .pay table, .pay tbody { display: block; }
  .pay th { width: auto; }
  .pay tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; border-bottom: 1px solid var(--hair); padding: 14px 0; }
  .pay th, .pay td { border: 0; padding: 0; }
  .pay .amt { grid-row: span 2; align-self: center; padding: 0; font-size: 24px; }
  .pay td:last-child { grid-column: 1; }
}

/* Side-by-side options: one card each, a short label/value list inside. */
.opts { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 16px; }
@media (min-width: 720px) { .opts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.opt { border: 1px solid var(--hair); border-radius: var(--r); padding: 18px 20px 20px; background: #fff; }
.opt.is-us { border: 1.5px solid var(--deep); background: var(--tint); }
.opt h3 { font-size: 18px; }
.opt dl { margin-top: 12px; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.opt dt { font-size: 13.5px; font-weight: 600; color: var(--sec); }
.opt dd { margin-top: 2px; }

/* A worksheet to fill in before the setup call (prints cleanly). */
.sheet { margin-top: 24px; border: 1px solid var(--hair-2); border-radius: var(--r); padding: 6px 20px 18px; background: var(--snow); }
.sheet ol { list-style: none; padding: 0; }
.sheet li { position: relative; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--hair-2); line-height: 1.5; }
.sheet li:last-child { border-bottom: 0; }
.sheet li::before { content: ""; position: absolute; left: 0; top: 17px; width: 18px; height: 18px; border: 1.5px solid var(--field); border-radius: 4px; background: #fff; }
.sheet b { font-weight: 600; }
.sheet .eg { display: block; color: var(--sec); font-size: 15px; }

/* ── Call cards (the home page's sample calls, written out) ────────── */
.ccard { margin-top: 24px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--white); font-size: 15.5px; line-height: 1.45; }
.cc-head { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.cc-k { margin-bottom: 2px; font-size: 13.5px; color: var(--sec); }
.cc-biz { font-weight: 600; }
.cc-biz span, .cc-meta, .cc-when { color: var(--sec); font-weight: 400; }
.cc-meta, .cc-when { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.cc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.cc-dl { padding: 14px 20px; display: grid; gap: 8px; }
.cc-dl div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
.cc-dl dt { color: var(--sec); font-size: 14.5px; }
.cc-tx { list-style: none; margin: 0; padding: 16px 20px 18px; display: grid; gap: 9px; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.45; }
.cc-tx li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
.cc-tx li b { font-weight: 600; font-size: 14px; }
.cc-tx li.v b { color: var(--deep); }
.cc-tx li.r { color: var(--sec); }
.cc-audio { display: block; width: calc(100% - 40px); margin: 16px 20px; }
.cc-fine { padding: 0 20px 16px; font-size: 14px; color: var(--sec); }
.ccard details > summary { display: flex; align-items: center; min-height: 48px; padding: 0 20px; border-top: 1px solid var(--hair); list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--deep); }
.ccard details > summary::-webkit-details-marker { display: none; }
.ccard details > summary::after { content: ""; margin-left: 10px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.ccard details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; font: 600 13px/1 var(--body); white-space: nowrap; }
.c-cb { color: #8A5300; background: #FFF3D6; }
.c-ur { color: #B42318; background: #FDECEA; }
.c-nt { color: var(--ink); background: #EEF0EE; }
@media (max-width: 599px) {
  .cc-head { flex-direction: column; gap: 8px; }
  .cc-right { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .cc-dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cc-tx li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ── Questions (the support widget's Help tab reads #questions) ────── */
.qas { margin-top: 24px; }
.qa { border-top: 1px solid var(--hair); }
.qa:last-child { border-bottom: 1px solid var(--hair); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; list-style: none; cursor: pointer; font: 600 18px/1.3 var(--display); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--deep); }
.qa summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.qa[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.qa .ans { padding: 0 0 22px; max-width: 42em; color: var(--sec); }
.qa .ans p + p { margin-top: 12px; }
@media (min-width: 1024px) { .qa summary { font-size: 20px; } }

/* ── Links to the other pages ──────────────────────────────────────── */
.related { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 12px; }
@media (min-width: 640px) { .related { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.related a { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.related a:hover { border-color: var(--deep); background: var(--tint); color: var(--ink); }
.related b { display: block; font: 600 17px/1.3 var(--display); color: var(--deep); }
.related span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--sec); }

/* A call to action inside the page (light), before the close band. */
.cta-band { margin-top: 40px; padding: 24px 22px; border-radius: var(--r); background: var(--snow); border: 1px solid var(--hair); }
.cta-band h2, .cta-band h3 { font-size: 22px; }
.cta-band p { margin-top: 8px; color: var(--sec); }
.cta-band .ctas { margin-top: 18px; }
@media (max-width: 599px) { .cta-band .btn { width: 100%; } }

/* ── Book a demo call ──────────────────────────────────────────────── */
/* "Book a 20-min demo call" and the webinar (funnel, 20 Oct 2026): links
   under the hero's buttons and in the close, not buttons, so trying it stays
   the main thing to do. /book-demo is VVOXA's own request form
   (src/booking/routes-public.js). */
.talk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 14px; }
.talk a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 16px; font-weight: 600; text-decoration: none; }
/* Matt, 20 Oct 2026: the demo-call link is a real (outlined) button now, and the webinar a clear link with an arrow. */
.talk .talk-book { padding: 0 22px; border-radius: 10px; color: var(--deep); background: var(--white); box-shadow: inset 0 0 0 2px var(--deep); transition: background-color .15s var(--ease), color .15s var(--ease); }
.talk .talk-book:hover { background: var(--tint); color: var(--deep-hi); }
.talk svg { width: 20px; height: 20px; flex: none; }
.talk .talk-web { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.talk .talk-web::after { content: "\2192"; margin-left: 2px; text-decoration: none; display: inline-block; }
.talk .talk-web:hover { color: var(--deep); }
.close .talk { justify-content: center; margin-top: 16px; }
.close .talk .talk-book { color: var(--chalk); background: transparent; box-shadow: inset 0 0 0 2px var(--green); }
.close .talk .talk-book:hover { background: rgba(52, 199, 89, .14); color: #fff; }
.close .talk .talk-web { color: var(--chalk); }
.close .talk .talk-web:hover { color: var(--green); }
.pay + .talk { margin-top: 16px; }
.cta-band .talk { margin-top: 6px; }
.sooner-more { margin-top: 16px; }
/* The last section on a page with no close band (/webinar): room before the footer. */
.sec-end { padding-bottom: 72px; }
@media (min-width: 1024px) { .sec-end { padding-bottom: 104px; } }
@media (max-width: 599px) { .talk { flex-direction: column; align-items: stretch; } .talk .talk-book { justify-content: center; } .talk .talk-web { align-self: flex-start; } .close .talk .talk-web { align-self: center; } }

/* ── A form on a page (the webinar waitlist, /webinar; public/webinar.js) ── */
.wcard { margin-top: 32px; max-width: 560px; border: 1px solid var(--hair); border-radius: var(--r); background: #fff; padding: 22px 20px 24px; box-shadow: var(--shadow); }
@media (min-width: 600px) { .wcard { padding: 28px 28px 30px; } }
.wcard h2 { font-size: 24px; }
@media (min-width: 1024px) { .wcard h2 { font-size: 26px; } }
.wcard .intro { margin-top: 6px; font-size: 16px; }
.wform { display: grid; gap: 18px; margin-top: 20px; }
.wform[hidden], .wf-done[hidden] { display: none; }
.fld { display: grid; gap: 6px; }
.fld label { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.fld input, .fld textarea { width: 100%; min-height: 48px; margin: 0; padding: 11px 14px; border: 1.5px solid var(--field); border-radius: 10px; background: #fff; color: var(--ink); font: 400 16px/1.45 var(--body); }
.fld textarea { min-height: 128px; resize: vertical; }
.fld input:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--deep); outline-offset: 1px; border-color: var(--deep); }
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: #B42318; }
.fhint { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--sec); }
.fcount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fcount.over { color: #B42318; font-weight: 600; }
.ferr { font-size: 14.5px; line-height: 1.4; font-weight: 500; color: #B42318; }
.ts-box { min-height: 65px; }
.consent { font-size: 14.5px; line-height: 1.5; color: var(--sec); }
.wform .btn { justify-self: start; }
.wform .btn[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 599px) { .wform .btn { justify-self: stretch; } }
.wf-status { min-height: 1.5em; font-size: 15px; line-height: 1.5; }
.wf-status.bad { color: #B42318; font-weight: 500; }
.wf-done { margin-top: 20px; padding: 18px 20px; border-left: 3px solid var(--deep); background: var(--tint); border-radius: 0 8px 8px 0; }
.wf-done:focus { outline: none; }
.wf-done h3 { font-size: 20px; }
.wf-done p { margin-top: 6px; }

/* ── Close and footer, on Night (as on the home page) ──────────────── */
.close { margin-top: 88px; background: var(--night); color: var(--chalk); text-align: center; padding: 72px var(--pad) 80px; }
@media (min-width: 1024px) { .close { margin-top: 112px; padding: 96px var(--pad) 104px; } }
.close h2 { font-size: clamp(36px, 6vw, 64px); line-height: 1; letter-spacing: -.035em; }
.close .lead { margin: 18px auto 0; max-width: 32em; color: var(--chalk-2); font-size: 17px; }
.close .ctas { justify-content: center; margin-top: 30px; }
.close a:not(.btn) { color: var(--chalk); font-weight: 500; }
.close a:not(.btn):hover { color: var(--green); }
.tlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-underline-offset: 4px; }
.sign { margin-top: 26px; font-size: 15px; color: var(--chalk-2); }
/* The footer tag stays bare (no class), as on every public page:
   tests read the page from the last footer tag. */
body > footer { background: var(--night); color: var(--chalk-2); border-top: 1px solid var(--hair-n); padding: 28px var(--pad) 40px; font-size: 14.5px; }
.foot-in { max-width: 1200px; margin: 0 auto; display: grid; gap: 10px; }
body > footer .wm { color: var(--chalk); }
body > footer .wm b { font: 700 17px/1 var(--display); letter-spacing: -.02em; }
body > footer nav { display: flex; flex-wrap: wrap; column-gap: 20px; }
body > footer .foot-h { flex-basis: 100%; margin-top: 8px; color: var(--chalk); font-weight: 600; }
body > footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--chalk); text-decoration: none; }
body > footer a:hover { color: var(--chalk); text-decoration: underline; }
body > footer a[aria-current="page"] { text-decoration: underline; }

/* ── Motion and print ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .nav, .skip, .toc, .close, .cta-band, .related, body > footer { display: none !important; }
  .phero { padding-top: 0; }
  .sec { padding-top: 28px; }
  body { font-size: 12pt; }
  .qa .ans { display: block; }
  a { color: inherit; }
}