/* /start/ "Tell us what you need" lead page, in the v2 look (2026-09-30, edited in place: same address).
   Tokens, reset, paper grain, type, .btn, .nav, .mnav and .foot come from /site/css/base.css; the menu from
   /site/js/site.js. Everything below is this page only. The page is /meet/'s "Answer questions instead"
   questionnaire on its own: the questionnaire card, its pills, boxes, notes, buttons and thanks card are copied
   from the redesigned meet page's meet.css (the same values, so the two read as one), and the markup is /meet/'s.
   Only the page frame, the headline, the thanks card's way back and the call line under the card are this page's
   own. Ship this file only with public/site/ in the same upload: everything here is built on base.css. */

:root {
  --q-col: 760px;
  /* the same field palette as /meet/ and /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 (a question brought back into view, 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: the v2 nav, the four links and Book a call (as /meet/) ---------- */
.nav-cta svg { width: 13px; height: 13px; margin-right: -4px; }
.mnav-cta svg { width: 14px; height: 14px; }

/* ---------- Page frame: one column, the questionnaire's width ---------- */
.stage { padding-top: clamp(36px, 6.5vh, 76px); padding-bottom: clamp(24px, 4vw, 48px); }
.qsec { max-width: var(--q-col); margin-inline: auto; }

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

/* The headline: /meet/'s questionnaire title, the page's h1 here (a little larger on tablets, where 4.6vw left the
   whole headline on one 36px line at 768). The highlighted words always start their own line (inline-block) and are
   drawn the v2 way: cobalt, with the hand drawn sun mark under them. */
.q-title { margin-top: 16px; font-size: clamp(36px, 6vw, 58px); line-height: 1; letter-spacing: -.04em; isolation: isolate; }
.swipe { position: relative; display: inline-block; white-space: nowrap; color: var(--cobalt); }
.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;
}
/* Phones: the headline is sized to the column, so "David takes it from there." still fits on its own line (measured
   9/30: 10.08 times the font size at this tracking; the column is the screen less 32; divided by 10.6 for room). If it
   ever does not (a fallback font, a narrower screen), it may wrap: kept on one line it would slide the page sideways
   (the 9/29 audit). It still starts its own line, and the same sun is drawn under each of its lines. */
@media (max-width: 559px) {
  .q-title { font-size: clamp(24px, calc((100vw - 32px) / 10.6), 36px); }
  .swipe { white-space: normal; }
  .swipe::after { display: none; }
  .swipe i {
    background: linear-gradient(var(--sun), var(--sun)) left 0 bottom .05em / 100% .32em no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

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

/* ---------- The questionnaire card (as /meet/) ---------- */
.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 */
.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; }

/* Boxes: the /meet/ and /chamber/ label and box */
.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; }
.fcard input::placeholder, .fcard textarea::placeholder { color: #9A9283; opacity: 1; }
.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); }

/* Choice pills: the /chamber/ pills, as on /meet/. Picked = the whole pill fills cobalt with a white tick.
   Pick one questions show a ring, pick many (What eats most of your week?) a rounded box. The pay the most choices
   the script hides carry the hidden attribute, which base.css holds over this display. */
.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); }

/* The note: the /chamber/ note (clay wash, "!" disc), as on /meet/ */
.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::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;
}
.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; } }

/* The consent line on the last step */
.fconsent { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--stone); }
.fconsent a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- The note, pinned while a text box has focus (as /meet/) ----------
   The script focuses the box that failed, which on a phone opens the keyboard; a note drawn down by the buttons
   would sit behind it. While a typing box in the form has focus the note floats just under the sticky nav. On blur
   it drops back inline, so it never follows the reader down the page. A text box only: the Next button and the pills
   never pin it (the "pick one" and "quick check" notes stay beside what they point at), and neither do the two pill
   questions (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 layouts and touch screens only (where a keyboard
   opens). */
@media (max-width: 999px), (pointer: coarse) {
  #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 Next takes focus off the box, and if the note dropped back into the page at once
     the button would jump down between press and release and the tap would be lost. Needs transition-behavior
     (Safari 17.4, Chrome 117, Firefox 129); older browsers simply unpin at once. */
  #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 the 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(#ferr.on) { scroll-padding-top: calc(var(--nav-h) + 96px); }
}

/* ---------- Back and Next ---------- */
.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), as on /meet/ ---------- */
.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 /meet/'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; }
/* this page's own: the way back to the site under the thanks words (on /start/ the thanks card ends the visit) */
.fthanks .btn { margin-top: 24px; }

/* ---------- Under the card: the call, for anyone who would rather talk ---------- */
.altline {
  margin-top: 26px;
  text-align: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
  text-wrap: balance;
}
.altline a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer: the v2 footer (as /meet/), with this page's four 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) {
  .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); }
  .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); }
  .backbtn:hover { color: var(--ink); }
  .altline a:hover { color: var(--cobalt-deep); }
}

/* ---------- 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 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; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .fcard { padding: 38px 44px 34px; border-radius: var(--radius-lg); }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  .stage { padding-top: clamp(26px, 4.6vh, 40px); }
  /* /meet/'s phone headline tracking: at phone sizes the tighter desktop value lets letters touch */
  .q-title { letter-spacing: -.035em; }
  .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 pills become full width rows, the Next button fills the row */
  .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) {
  .fcard { padding-inline: 16px; }
  .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(#ferr.on) { scroll-padding-top: calc(var(--nav-h) + 118px); }
}
@media (max-width: 359px) {
  /* the header's three items ran past the screen at 320 on /meet/ (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; }
  /* this page's own (measured 9/30): "Send it to David →" never wraps, and at 204px it ran up to 10px past the card
     at 320 (the row holds 254px: Back 63, the gap, the button). Tighter here, the button is 168px and fits. */
  .btnrow { gap: 10px; }
  .nextbtn { padding: 0 18px; font-size: 16px; }
}

/* The quick check on the last step (Cloudflare Turnstile), as on /meet/: drawn into #qts-slot under the consent line.
   The slot keeps the widget's height so nothing jumps. Cloudflare's normal 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 widget is scaled
   to the column at the same steps as /meet/, left edge on the fields' edge. CSS only. */
#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; }