/* /meet/ live demo call page, reskinned in the v2 look (the approved mockup's styles; built hidden, moved to /meet/ at go live).
   Tokens, reset, paper grain, type, .kicker, .btn, .nav, .mnav and .foot come from /site/css/base.css.
   Everything below is this page only. Both forms keep the live page's markup: every selector here targets the
   classes that page already uses, so its scripts run unchanged. Inputs, choice pills, the primary button, the error
   note and the success card match the approved /chamber/ mockup, so the form pages read as one family. */

:root {
  --hero-w: 1160px;
  --q-col: 760px;
  /* the same field palette as /chamber/: a warm well and an edge that still reads in sunlight */
  --field-line: #D2C7AF;
  --field-hover: #BFB398;
  --field-fill: #FAF6EC;
  --clay: #C4552B;
  --clay-ink: #8A3517;
  --clay-soft: #FDEEE6;
}

/* the sticky header stays clear of anything the page scrolls to (the #call and #questions jumps, a focused box) */
html { scroll-padding-top: calc(var(--nav-h) + 18px); }

body {
  /* the soft sun glow the v2 stages carry, very faint, top right, painted once (a repeat seams on a long page) */
  background: var(--paper) radial-gradient(900px 520px at 88% -8%, rgba(255, 201, 49, .16), transparent 62%) no-repeat;
  background-size: 100% 1000px;
}

/* ---------- Header: v2 nav, the live page's four links and Book a call ---------- */
.nav-cta svg { width: 13px; height: 13px; margin-right: -4px; }
.mnav-cta svg { width: 14px; height: 14px; }

/* ---------- Hero frame ---------- */
.hero { padding-top: clamp(36px, 6.5vh, 76px); }
.hero > .wrap { width: min(100%, calc(var(--hero-w) + 2 * var(--gutter))); }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  max-width: 600px;
  margin-inline: auto;
}

/* ---------- Left column: kicker, headline, sub, two buttons, steps, chips ---------- */
.hero-left .kicker { margin: 0; }
h1 {
  margin-top: 18px;
  font-size: clamp(46px, 11.6vw, 80px);
  line-height: .96;
  letter-spacing: -.042em;
  isolation: isolate;
  text-wrap: initial;
}
/* the old sun swipe becomes the v2 accent: cobalt word, hand drawn sun mark under it */
.swipe { position: relative; white-space: nowrap; }
.swipe i { font-style: normal; }
.swipe::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.06em; right: -.04em; bottom: .05em;
  height: .32em;
  background: var(--sun);
  border-radius: .14em .34em .2em .4em;
  transform: rotate(-1.4deg);
  transform-origin: left center;
}
h1 .swipe, .q-title .swipe { color: var(--cobalt); }
.card h2, .q-title, #success-state h3 { isolation: isolate; }

.sub { margin-top: 22px; max-width: 31em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); }
.sub b { color: var(--ink); font-weight: 600; }

.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-btns .btn-ghost { border-color: #DCD3C0; background: rgba(255, 255, 255, .55); }
.hero-btns .btn-ghost:hover { border-color: var(--ink); background: #fff; }

/* Steps: numbered discs joined by a hairline, soft shadow, no hard outline */
.steps { display: flex; flex-direction: column; gap: 16px; max-width: 31em; margin-top: 34px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}
.step b { color: var(--ink); font-weight: 600; }
/* no one word last lines ("rings." at 1440, "number" at 390) */
.step > div:not(.step-num) { text-wrap: pretty; }
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15.5px; top: 36px; bottom: -14px;
  width: 1px;
  background: #E2D9C6;
}
.step-num {
  position: relative;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(20, 18, 14, .08);
  box-shadow: 0 1px 2px rgba(20, 18, 14, .06), 0 8px 16px -10px rgba(20, 18, 14, .35);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink);
}

/* The three chips: quiet v2 assurances, not choices. Flat paper tag (no card shadow, no white pill, so they never
   read like the questionnaire's tappable pills) and the v2 "included" tick: the green disc of the business page's
   pricing checks, drawn in CSS where the old text tick was. */
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 30px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 9px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  white-space: nowrap;
}
.chip::before {
  content: "";
  flex: none;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6 5.4-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

/* ---------- The call card ---------- */
.card {
  position: relative;
  padding: 24px 20px 22px;
  background: #fff;
  border: 1px solid rgba(20, 18, 14, .06);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  /* no scroll-margin: the html scroll-padding-top already clears the sticky nav (the two used to add up to 160px) */
}
/* "Have Vidd call me" jumps here. On desktop the card is already on screen, so the jump alone shows nothing:
   the card answers with two soft cobalt rings (base.css cuts this to nothing under reduced motion). */
@keyframes callPing {
  from { box-shadow: var(--shadow-card), 0 0 0 0 rgba(31, 73, 255, .35); }
  to   { box-shadow: var(--shadow-card), 0 0 0 16px rgba(31, 73, 255, 0); }
}
#call:target { animation: callPing 1.1s var(--ease) 2; }

/* The success state takes the form's place in the SAME cell, so the card keeps the form's height and nothing
   collapses under the reader's thumb: the success block is centred where the form was. CSS only; the script's
   inline display:none on #form-state still hides the form (it keeps its space, invisible and out of reach). */
#call { display: grid; }
#call > #form-state, #call > #success-state { grid-area: 1 / 1; min-width: 0; }
#form-state[style*="none"] { display: block !important; visibility: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
/* "Live": the v2 on duty chip (the business page's team cards), green dot with a slow ping */
.pill-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: rgba(27, 158, 75, .09);
  color: #17733A;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pill-live .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(27, 158, 75, .2); }
.pill-live .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--success); animation: livePing 2.6s ease-out infinite; }
@keyframes livePing { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3); opacity: 0; } }
.card-free { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); white-space: nowrap; }

.card h2 { font-size: clamp(36px, 8.6vw, 46px); line-height: 1; letter-spacing: -.038em; }
/* one sun highlight per screen: the h1 owns it, the card title keeps only the cobalt word */
.card h2 .swipe { color: var(--cobalt); }
.card h2 .swipe::after { display: none; }
.card-sub { margin: 10px 0 24px; font-size: 16px; line-height: 1.5; color: var(--stone); }

/* Fields: the /chamber/ label and box */
.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin: 0 0 8px 2px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}
.field input,
.fcard input[type=text], .fcard input[type=email], .fcard input[type=tel], .fcard textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1.5px solid var(--field-line);
  border-radius: 16px;
  background: var(--field-fill);
  font-family: var(--body);
  font-size: 16.5px; /* 16px or more: iPhone never zooms on focus */
  color: var(--ink);
  text-overflow: ellipsis;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.fcard textarea { height: auto; min-height: 120px; padding: 15px 16px; line-height: 1.45; resize: vertical; }
.field input::placeholder, .fcard input::placeholder, .fcard textarea::placeholder { color: #9A9283; opacity: 1; }
.field input:focus,
.fcard input[type=text]:focus, .fcard input[type=email]:focus, .fcard input[type=tel]:focus, .fcard textarea:focus {
  outline: 0;
  border-color: var(--cobalt);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(31, 73, 255, .16);
}
/* the box the questionnaire script flags (aria-invalid) stays clay even while it has focus */
.fcard input[aria-invalid=true], .fcard textarea[aria-invalid=true] { border-color: var(--clay); background: #fff; box-shadow: 0 0 0 4px rgba(196, 85, 43, .14); }
.fcard input[aria-invalid=true]:focus, .fcard textarea[aria-invalid=true]:focus { border-color: var(--clay); box-shadow: 0 0 0 4px rgba(196, 85, 43, .18); }
/* The call form's script marks no box, it only focuses the one that failed (email or phone). While its note is up,
   the focused box and its label turn clay, the /chamber/ treatment, so the screen says which box is wrong. */
#meet-form:has(.error-msg[style*="block"]) .field:has(input:focus) input { border-color: var(--clay); box-shadow: 0 0 0 4px rgba(196, 85, 43, .16); }
#meet-form:has(.error-msg[style*="block"]) .field:has(input:focus) label { color: var(--clay-ink); }

/* Turnstile slot: empty in the markup; Cloudflare draws its normal widget into it (a fixed 300 by 65 that does not
   shrink). The slot keeps that height before the widget arrives, so nothing jumps; the narrow phone scaling is
   further down. */
#ts-slot { min-height: 65px; }

/* ---------- The primary button: v2 cobalt pill, full width, white arrow disc (the live page's own arrow svg) ---------- */
.submit-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  margin-top: 22px;
  padding: 0 64px;
  border: 0;
  border-radius: 999px;
  background: var(--cobalt);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 17.5px;
  letter-spacing: -.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 14px 28px -14px rgba(31, 73, 255, .85);
  transition: transform .25s var(--ease), background-color .2s, box-shadow .25s var(--ease);
}
.submit-btn svg.btn-text {
  position: absolute;
  right: 10px; top: 50%;
  width: 40px; height: 40px;
  margin-top: -20px;
  padding: 12px;
  border-radius: 50%;
  background: #fff;
  color: var(--cobalt);
  transition: transform .35s var(--ease);
}
.spinner { display: none; width: 24px; height: 24px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.submit-btn.loading .btn-text { display: none; }
.submit-btn.loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.submit-btn:active { transform: translateY(0); }
.submit-btn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 999px; }
.submit-btn:disabled { opacity: .72; cursor: default; transform: none; box-shadow: none; }

/* ---------- Error note: the /chamber/ note (clay wash, "!" disc).
   Drawn just ABOVE the button (flex order; the markup order is untouched), so it shows wherever the thumb just
   tapped: under the button it fell below the screen edge on an iPhone. It reads right for "One quick check above
   and you are set." (the check sits straight above it), and the consent line stays glued under the button.
   Not pinned to the screen like /chamber/'s: this page's script never clears the note while typing, so a pinned
   note would follow the reader down the page.
   REVIEW UPDATE: the sentences above hold only with no keyboard open. For the email and phone notes the script
   focuses the failing box, a real iPhone opens its keyboard, and a note drawn by the button would sit behind it.
   So on phones and touch screens the note now pins under the sticky nav ONLY while a text box in its form has
   focus (the pinned block below), and drops back to this inline spot on blur, so it cannot follow the reader down
   the page. The Turnstile note
   focuses no box and stays inline, under the check it points at. ---------- */
#meet-form { display: flex; flex-direction: column; }
#meet-form .error-msg { order: 1; margin: 0 0 16px; }
/* flex margins do not collapse: the Turnstile field's 20px below plus these 2px keep the old 22px gap */
#meet-form .submit-btn { order: 2; margin-top: 2px; }
#meet-form .consent { order: 3; }
.error-msg {
  display: none;
  position: relative;
  padding: 13px 16px 13px 46px;
  text-wrap: pretty; /* no one word last line ("set.", "again.") */
  border: 1px solid rgba(196, 85, 43, .34);
  border-radius: 16px;
  background: var(--clay-soft);
  color: var(--clay-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.error-msg::before, .ferr::before {
  content: "!";
  position: absolute;
  left: 15px; top: 13px;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clay);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

/* The call consent line: same words, same place (straight under the button) */
.consent, .fconsent { margin-top: 16px; font-size: 13.5px; line-height: 1.55; color: var(--stone); }
.consent a, .fconsent a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Success state (replaces the form inside the same card) ---------- */
#success-state { display: none; align-self: center; text-align: center; padding: 14px 0 8px; animation: qin .6s var(--ease) both; }
.success-icon {
  position: relative;
  width: 72px; height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow: 0 0 0 6px rgba(31, 73, 255, .1), 0 14px 28px -14px rgba(31, 73, 255, .85);
}
.success-icon svg { width: 30px; height: 30px; stroke: #fff; }
.success-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(31, 73, 255, .4); animation: ripple 1.8s ease-out infinite; }
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
#success-state h3 {
  font-size: clamp(32px, 7.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
#success-state p { max-width: 24em; margin: 14px auto 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
#success-state p b { color: var(--ink); font-weight: 600; }
#success-state .success-detail { margin-top: 22px; font-family: var(--mono); font-weight: 500; font-size: 10.5px; line-height: 1.8; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); overflow-wrap: anywhere; }
/* the visitor's own address, as typed, on its own line: the one thing to check for a typo (caps hide typos) */
#success-email { display: block; margin: 3px 0 2px; font-family: var(--body); font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink); }
#success-state .dry { display: none; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--clay-ink); }
#success-state .dry.on { display: block; }

/* ---------- The questionnaire (the /start/ questions, Netlify form markup untouched) ---------- */
.qsec {
  max-width: var(--q-col);
  margin: clamp(76px, 10vw, 132px) auto 0;
  padding-top: clamp(52px, 7vw, 84px);
  border-top: 1px solid var(--line);
}
.k-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
}
.k-label::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--sun);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(255, 201, 49, .25);
}
.q-title { margin-top: 16px; font-size: clamp(36px, 4.6vw, 58px); line-height: 1; letter-spacing: -.04em; }
.q-sub { margin-top: 18px; max-width: 34em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); }
.q-sub b { color: var(--ink); font-weight: 600; }

.fcard {
  position: relative;
  margin-top: clamp(28px, 4vw, 42px);
  padding: 24px 20px 22px;
  background: #fff;
  border: 1px solid rgba(20, 18, 14, .06);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}
.pbar { height: 8px; margin-bottom: 22px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(20, 18, 14, .05); overflow: hidden; }
/* min-width: on question 1 (0%) a sun sliver shows at the start, so the empty track reads as progress, not a divider */
.pbar i { display: block; width: 0%; min-width: 10px; height: 100%; border-radius: 999px; background: var(--sun); transition: width .5s var(--ease); }
.pstep { margin-bottom: 10px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }

.q { display: none; }
.q.on { display: block; animation: qin .45s var(--ease) both; }
@keyframes qin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.q h3 { font-size: clamp(27px, 3vw, 34px); line-height: 1.08; letter-spacing: -.03em; }
.q .hint { margin-top: 8px; font-size: 15.5px; line-height: 1.45; color: var(--stone); }
.q .fields { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
/* the "In your own words" boxes under the pills and the optional swamped line, every lane, labelled like the call
   form's boxes */
.qwords { margin-top: 22px; }
.qwords label { display: block; margin: 0 0 8px 2px; font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.fcard .qwords textarea { min-height: 88px; }

/* Choice pills: the /chamber/ pills. Picked = the whole pill fills cobalt with a white tick.
   Pick one questions show a ring, pick many (What eats your day?) a rounded box. */
.qchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip-opt { position: relative; flex: 1 1 auto; display: flex; }
.chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chip-opt span {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  /* a pill longer than the column (The paperwork: ...) wraps to a second line instead of pushing the page
     sideways; the vertical padding only shows then, a one line pill stays 52px tall */
  padding: 10px 20px 10px 16px;
  border: 1.5px solid var(--field-line);
  border-radius: 999px;
  background: var(--field-fill);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .25s var(--ease), transform .2s var(--ease);
}
.chip-opt span::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(20, 18, 14, .3);
  background: #fff center / 12px 12px no-repeat;
  transition: background-color .2s, border-color .2s;
}
.chip-opt input[type=checkbox] + span::before { border-radius: 6px; }
.chip-opt input:checked + span {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(31, 73, 255, .9);
}
.chip-opt input:checked + span::before {
  border-color: #fff;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6-6.6' fill='none' stroke='%231F49FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.chip-opt input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.chip-opt span:active { transform: scale(.98); }
/* Question 1 asks for a pick but marks no field: while its note shows, its pills light up in clay until one is picked */
.q[data-q="1"].on:not(:has(input:checked)):has(~ #ferr.on) .chip-opt span { border-color: var(--clay); background: var(--clay-soft); }
/* the same on the two pill questions that also take words (the chores question and the pay the most one): their
   only note is "tap, or say it in your own words", so while it shows the pills light up in clay until one is picked */
.q[data-q="4"].on:not(:has(input:checked)):has(~ #ferr.on) .chip-opt span,
.q[data-q="5"].on:not(:has(input:checked)):has(~ #ferr.on) .chip-opt span { border-color: var(--clay); background: var(--clay-soft); }

.ferr {
  display: none;
  position: relative;
  margin-top: 20px;
  padding: 13px 16px 13px 46px;
  text-wrap: pretty;
  border: 1px solid rgba(196, 85, 43, .34);
  border-radius: 16px;
  background: var(--clay-soft);
  color: var(--clay-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.ferr.on { display: block; animation: ferr-in .35s var(--ease) both; }
@keyframes ferr-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fconsent { margin-top: 18px; }

/* ---------- Both error notes, pinned while a text box in their form has focus ----------
   The scripts focus the box that failed, which on a phone opens the keyboard; a note drawn down by the button
   would sit behind it. While a typing box in the same form has focus the note floats just under the sticky nav
   (the approved /chamber/ note, placed below this page's header). On blur it drops back inline, so it never
   follows the reader down the page. A text box only: the call button, the Next button and the choice pills
   never pin it (the "pick one" and "quick check" notes stay beside what they point at), and neither do the two
   pill questions of the questionnaire (4 and 5): their note asks for a tap or words, so typing in their words box
   is the answer, and a pinned note would cover the question while the visitor types. */
/* One column layout and touch screens only (phones, iPads: where a keyboard opens). On a desktop with a mouse
   the two column card is fully on screen and the note stays inline above its button. */
@media (max-width: 999px), (pointer: coarse) {
  #meet-form:has(input:focus) .error-msg[style*="block"],
  #intake:has(.q.on:not([data-q="4"], [data-q="5"]) :is(input[type=text], input[type=email], input[type=tel], textarea):focus) #ferr.on {
    position: fixed;
    z-index: 60;
    top: calc(var(--nav-h) + 10px);
    left: 16px; right: 16px;
    max-width: 568px;
    margin: 0 auto;
    box-shadow: 0 2px 6px rgba(20, 18, 14, .08), 0 18px 40px -18px rgba(20, 18, 14, .45);
    transition-delay: 0s; /* pinning is instant */
  }
  /* Unpinning waits .6s. Tapping "Call me now" (or Next) takes focus off the box; if the note dropped back into the
     page at once, the button would jump down by the note's height between press and release and the tap would be
     lost (measured: the call never started, in Chromium and WebKit, mouse and touch). Held .6s, the press lands on
     the button and the script clears or re-places the note itself. Needs transition-behavior (Safari 17.4, Chrome
     117, Firefox 129); older browsers simply unpin at once. */
  #meet-form .error-msg, #ferr {
    transition-property: position, top, left, right, max-width, margin, box-shadow, z-index;
    transition-duration: 0s;
    transition-delay: .6s;
    transition-behavior: allow-discrete;
  }
  /* while a note is up, the box the script focuses lands below the pinned note, not under it.
     Page scroll padding, not scroll-margin: WebKit's focus scroll honours only the padding. */
  html:has(#error-msg[style*="block"]), html:has(#ferr.on) { scroll-padding-top: calc(var(--nav-h) + 96px); }
}

.btnrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; }
.backbtn {
  flex: none;
  min-height: 48px;
  padding: 0 8px 0 2px;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
  cursor: pointer;
}
.backbtn[disabled] { visibility: hidden; }
.nextbtn {
  height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  background: var(--cobalt);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 14px 28px -14px rgba(31, 73, 255, .85);
  transition: transform .25s var(--ease), background-color .2s, box-shadow .25s var(--ease);
}
.nextbtn.sun { background: var(--sun); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 14px 28px -14px rgba(176, 124, 0, .75); }
.nextbtn:active { transform: translateY(0); }
.nextbtn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 999px; }
.nextbtn:disabled { opacity: .72; cursor: default; transform: none; }

/* Thanks card: the /chamber/ thanks (cobalt tick disc, big line) */
.fthanks { display: none; text-align: center; padding: 8px 0 4px; }
.fthanks.on { display: block; animation: qin .6s var(--ease) both; }
.fthanks::before {
  content: "";
  display: block;
  width: 60px; height: 60px;
  margin: 4px auto 20px;
  border-radius: 50%;
  background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6-6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 28px no-repeat;
  box-shadow: 0 0 0 6px rgba(31, 73, 255, .1), 0 14px 28px -14px rgba(31, 73, 255, .85);
}
.fthanks .big {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "opsz" 96;
  font-size: clamp(30px, 6.8vw, 40px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}
.fthanks p:not(.big) { max-width: 28em; margin: 14px auto 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
/* the dry run note (anywhere but viddai.net), the same small clay line as the call card's */
#thanks .dry { display: none; margin-top: 16px; font-family: var(--mono); font-weight: 500; font-size: 10.5px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: var(--clay-ink); }
#thanks .dry.on { display: block; }

/* ---------- Footer: v2 footer with the live page's three links ---------- */
.foot-brand { display: inline-flex; border-radius: 8px; }
.foot-brand img { height: 26px; width: auto; }

/* ---------- Hover only where there is a mouse (a tapped pill on a phone would keep its hover look) ---------- */
@media (hover: hover) {
  .field input:hover:not(:focus), .fcard input:hover:not(:focus):not([aria-invalid=true]), .fcard textarea:hover:not(:focus):not([aria-invalid=true]) { border-color: var(--field-hover); }
  .chip-opt:hover span { background: #fff; border-color: rgba(20, 18, 14, .38); }
  .chip-opt:hover input:checked + span { background: var(--cobalt-deep); border-color: var(--cobalt-deep); }
  .submit-btn:hover:not(:disabled), .nextbtn:not(.sun):hover:not(:disabled) {
    background: var(--cobalt-deep);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 18px 32px -14px rgba(31, 73, 255, .9);
  }
  .nextbtn.sun:hover:not(:disabled) { background: #FFD457; transform: translateY(-1px); }
  .submit-btn:hover:not(:disabled) svg.btn-text { transform: rotate(45deg); }
  .backbtn:hover { color: var(--ink); }
}

/* ---------- Load in: a gentle rise, only where motion is welcome ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* backwards, not both: once risen, nothing keeps holding a transform on the card, so the pinned error note
     (position: fixed, inside the card) is always placed against the screen */
  .rise { animation: rise .8s var(--ease) backwards; }
  .d1 { animation-delay: .06s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .2s; } .d4 { animation-delay: .28s; } .d5 { animation-delay: .16s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pill-live .dot::after, .success-icon::after { display: none; }
}

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .card, .fcard { padding: 36px 40px 32px; border-radius: var(--radius-lg); }
  .fcard { padding: 38px 44px 34px; }
}
/* Two columns: copy left, the call card right, both centred in the frame */
@media (min-width: 1000px) {
  .hero-inner {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 488px);
    gap: clamp(48px, 6vw, 96px);
    /* top aligned: when the card grows (error note) or shrinks (success) the copy on the left does not move */
    align-items: start;
  }
  .hero-left { padding-top: 34px; }
  h1 { font-size: clamp(56px, 5.4vw, 80px); }
}
/* Short laptop screens (1366x768, and 1280x720 = a 1080p screen at 150%): the card tightens so "Call me now"
   and the consent sentence under it sit above the fold. 1440x900 and taller screens do not change. */
@media (min-width: 1000px) and (max-height: 860px) {
  .hero { padding-top: 28px; }
  .hero-left { padding-top: 22px; }
  .card { padding-top: 26px; padding-bottom: 24px; }
  .card-head { margin-bottom: 12px; }
  .card-sub { margin: 6px 0 16px; }
  .field { margin-bottom: 14px; }
  .field label { margin-bottom: 6px; }
  .field input { height: 50px; }
  #meet-form .submit-btn { height: 56px; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .hero { padding-top: clamp(26px, 4.6vh, 40px); }
  /* the business page phone hero tracking: at 46px the tighter desktop value lets letters touch */
  h1 { letter-spacing: -.035em; line-height: 1; }
  .foot-brand img { height: 24px; }
  /* thumb sized footer links */
  .foot nav { gap: 0 26px; margin-top: -8px; margin-bottom: -10px; }
  .foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 639px) {
  /* one handed: the two hero buttons become full width rows, the Next button fills the row */
  .hero-btns { flex-direction: column; gap: 10px; }
  .hero-btns .btn { width: 100%; }
  .qchips { flex-direction: column; gap: 10px; }
  .chip-opt span { justify-content: flex-start; padding: 10px 18px; }
  .nextbtn { flex: 1 1 auto; max-width: 280px; margin-left: auto; }
}
@media (max-width: 389px) {
  .card, .fcard { padding-inline: 16px; }
  .field input, .fcard input[type=text], .fcard input[type=email], .fcard input[type=tel], .fcard textarea { padding-inline: 14px; font-size: 16px; }
  /* a pinned note can run to three lines this narrow */
  html:has(#error-msg[style*="block"]), html:has(#ferr.on) { scroll-padding-top: calc(var(--nav-h) + 118px); }
}
/* Cloudflare's normal Turnstile widget is a fixed 300 by 65 and never shrinks. Below 375 the card's column is
   narrower than that (294px at 360, 254px at 320), so the real widget would poke out of the card and scroll the
   page sideways. The widget is scaled down to the column instead (the slot's height follows), left edge on the
   fields' edge. CSS only, the Turnstile render call is untouched. */
@media (max-width: 374px) {
  #ts-slot { --ts-s: .98; min-height: calc(65px * var(--ts-s)); height: calc(65px * var(--ts-s)); }
  #ts-slot > * { transform: scale(var(--ts-s)); transform-origin: 0 0; }
}
@media (max-width: 359px) {
  #ts-slot { --ts-s: .91; }
  /* the header's three items ran 17px past the screen at 320 (the Menu button was cut off): drop the arrow in
     Book a call and tighten, so logo, Book a call and Menu all fit with the 16px gutter down to 320 */
  .nav { gap: 8px; }
  .nav-logo img { height: 26px; }
  .nav-cta { padding: 0 12px; }
  .nav-cta svg { display: none; }
  .nav-menu { gap: 7px; padding: 0 10px; }
}
@media (max-width: 339px) { #ts-slot { --ts-s: .845; } }
/* The questionnaire's own quick check (9/30: its answers now go to Make, which checks the token): the same widget,
   drawn into #qts-slot on the last step, under the consent line. The slot keeps the widget's height so nothing jumps.
   On phones its column is the call card's width (294px at 360, 254px at 320), so it scales at the same steps, left
   edge on the fields' edge. The call form's rules above are untouched. */
#qts-slot { margin-top: 18px; min-height: 65px; }
@media (max-width: 374px) {
  #qts-slot { --ts-s: .98; min-height: calc(65px * var(--ts-s)); height: calc(65px * var(--ts-s)); }
  #qts-slot > * { transform: scale(var(--ts-s)); transform-origin: 0 0; }
}
@media (max-width: 359px) { #qts-slot { --ts-s: .91; } }
@media (max-width: 339px) { #qts-slot { --ts-s: .845; } }
/* the note under the slot, shown only when the quick check cannot load on the live site (the questionnaire script
   takes hidden off); with no widget at all the empty slot folds away and the note takes its place */
.qts-note { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--stone); }
.qts-note a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }
#qts-slot[hidden] + .qts-note { margin-top: 18px; }
@media (max-width: 379px) {
  .card-free { letter-spacing: .1em; }
}
/* The kicker is now "Live demo · It calls you in about 10 seconds" (approved copy edit, 9/29), six letters longer
   than the mockup's. It stays on one line down to 360 by tightening in two steps (measured: 352px of 358 at 390,
   323px of 328 at 360). Below 360 it cannot fit without going unreadably small, so it breaks into two balanced
   lines with the sun diamond on the first line. */
@media (max-width: 429px) { .hero-left .kicker { font-size: 11px; letter-spacing: .09em; } }
@media (max-width: 389px) { .hero-left .kicker { font-size: 10.5px; letter-spacing: .06em; } }
@media (max-width: 359px) {
  .hero-left .kicker { align-items: flex-start; font-size: 11px; letter-spacing: .1em; line-height: 1.55; text-wrap: balance; }
  .hero-left .kicker::before { margin-top: .5em; }
}