/* Survey (start.html; Get in touch is its Something else tab).
   Survey values from Paper "Start · Sell" (MH-0); phone from "Start · Sell · phone" (RE-0); the booking from
   "Start · Sent · book" (PZ-0), restyled into the MH-0 column. Form states follow the jerry-design Forms pattern.
   Reuses style.css / page.css / motion.css: --ink, --paper, --muted, --line, --accent, --m, --e-ui, .pill, .foot. */
:root {
  --field-line: color-mix(in srgb, var(--ink) 40%, transparent);
  --placeholder: color-mix(in srgb, var(--ink) 45%, transparent);
  --off: color-mix(in srgb, var(--ink) 50%, transparent);
  --fill: color-mix(in srgb, var(--ink) 5%, transparent);
}

/* No hero here: the nav keeps its place in the flow and sticks to the top. */
.form-page .nav { position: sticky; top: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
:where(.form-page) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.form-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-page .field :focus-visible { outline: none; } /* the underline carries focus */

/* Ink buttons on these pages: Paper pads 20 left, 4 right around the chip. */
.start .pill--ink { padding-left: 20px; padding-right: 4px; gap: 12px; flex-shrink: 0; }

/* ---------- Survey (Paper MH-0, 2026-10-14) ----------
   One 1024 column: the headline, 48, the tabs over a full-width rule, 48, then the split: 40% for your AI,
   50% for the form, space between. The page fills the screen, so the footer stays put as the panel's
   height eases between tabs. */
.start { min-height: calc(100svh - var(--nav-h)); padding: 32px var(--m) 136px; }
.start-col { width: 1024px; max-width: 100%; margin-inline: auto; }
.swap { display: flex; flex-direction: column; }
.start-head .swap { gap: 48px; }
.start-stage { padding-top: 48px; }
.start-stage:has(> .swap:empty) { display: none; }

.start-h1 {
  width: auto; text-wrap: balance;
  font: 300 40px/125% var(--font-display); letter-spacing: -0.04em; color: var(--ink);
}
.start-h1:focus { outline: none; }

/* Tabs: text over a 1px rule; the current one ink 500 with a 1.5px ink line that glides between them.
   Each tab reserves its bold width, so nothing shifts when the weight changes. */
.tabs { position: relative; display: flex; align-items: flex-start; gap: 28px; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start;
  padding-bottom: 7.5px;
  font: 400 16px/24px var(--font-ui); color: var(--off); white-space: nowrap;
  transition: color 200ms var(--e-ui);
}
.tabs [role="tab"]::after { content: attr(data-text); height: 0; overflow: hidden; visibility: hidden; font-weight: 500; }
.tabs [role="tab"]::before { content: ""; position: absolute; inset: -8px -10px 0; } /* a 44px-tall target */
/* "Something else" starts with Name, whose text sits at the field's foot: the intro lines up with it. */
.start[data-intent="other"] .start-left { padding-top: 16px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 500; }
@media (hover: hover) { .tabs [role="tab"]:hover:not([aria-selected="true"]) { color: var(--ink); } }
.tabs [role="tab"]:focus-visible { outline-offset: 4px; border-radius: 4px; }
.tab-line {
  position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--ink);
  transform-origin: 0 0; pointer-events: none;
  transition: translate 320ms var(--e-ui), width 320ms var(--e-ui);
}

.start-split { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 96px; }
.start-left { width: 40%; width: round(40%, 1px); flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }
.start-right { width: 50%; width: round(50%, 1px); flex-shrink: 0; display: flex; flex-direction: column; gap: 64px; }
.lede {
  max-width: 480px;
  font: 400 16px/24px var(--font-ui); color: var(--muted); text-wrap: pretty;
}

/* Your AI: three quiet buttons that open the assistant with the prompt, and Copy prompt. */
.ai { display: flex; flex-direction: column; gap: 8px; }
.ai-btn {
  height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-inline: 20px; border-radius: var(--r-btn);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  font: 500 14px/24px var(--font-ui); color: var(--ink);
  transition: background-color var(--d-fast) var(--e-ui), scale var(--d-press) var(--e-ui);
}
.ai-btn--plain { background: transparent; }
.ai-btn:active { scale: 0.98; }
@media (hover: hover) {
  .ai-btn:hover { background: color-mix(in srgb, var(--ink) 15%, transparent); }
  .ai-btn--plain:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
}
.ai-icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.icon-swap { position: relative; display: inline-grid; }
.icon-swap svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: currentColor; transition: opacity 200ms var(--e-ui), transform 200ms var(--e-ui); }
.copy-prompt .i-done { opacity: 0; transform: scale(0.6); }
.copy-prompt[data-copied] .i-copy { opacity: 0; transform: scale(0.6); }
.copy-prompt[data-copied] .i-done { opacity: 1; transform: none; }
.ai-note { min-height: 20px; margin-top: 4px; text-align: center; font: 400 14px/20px var(--font-ui); color: var(--muted); }

/* ---------- Fields: underlined, never boxed ---------- */
.form { display: flex; flex-direction: column; gap: 36px; }
.fields { display: flex; flex-direction: column; gap: 20px; transition: opacity 200ms var(--e-ui); }
.field-row { display: flex; gap: 24px; }
.field-row > .field { flex: 1 1 0; min-width: 0; }
.field {
  position: relative;
  display: flex; align-items: flex-end;
  height: 52px; padding-bottom: 12px;
  border-bottom: 1px solid var(--field-line);
  transition: border-color 120ms var(--e-ui), box-shadow 120ms var(--e-ui);
}
.field--area { height: 128px; padding-block: 12px; align-items: stretch; }
/* Focus: the underline goes ink at 1.5px (the extra 0.5px hangs below, so nothing shifts). */
.field:focus-within { border-bottom-color: var(--ink); box-shadow: 0 0.5px 0 0 var(--ink); }
.field input, .field textarea {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; outline: none; resize: none;
  font: 400 16px/24px var(--font-ui); color: var(--ink); caret-color: var(--ink);
}
.field textarea { height: 100%; }
.field ::placeholder { color: var(--placeholder); opacity: 1; }
[hidden] { display: none !important; }

/* Errors: a small accent dot and ink text under the field. Never red, never boxed. */
.err {
  position: absolute; left: 0; top: calc(100% + 6px);
  display: flex; align-items: center; gap: 8px;
  font: 400 13px/18px var(--font-ui); color: var(--ink); white-space: nowrap;
  animation: err-in 160ms var(--e-ui);
}
.err::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
@keyframes err-in { from { opacity: 0; transform: translateY(-4px); } }

/* Team size: fill-only pills, ink when chosen. */
.team-size { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; padding-top: 12px; }
.team-label { width: 100px; flex-shrink: 0; font: 400 16px/24px var(--font-ui); color: var(--placeholder); }
.team-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; pointer-events: none; }
.opt span {
  display: flex; align-items: center; height: 36px; padding-inline: 16px; border-radius: var(--r-btn);
  background: var(--fill); font: 400 14px/24px var(--font-ui); color: var(--ink);
  transition: background-color 160ms var(--e-ui), color 160ms var(--e-ui), transform 120ms var(--e-ui);
}
.opt:active span { transform: scale(0.97); }
.opt input:checked + span { background: var(--ink); color: var(--paper); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .opt:hover input:not(:checked) + span { background: color-mix(in srgb, var(--ink) 9%, transparent); } }
.team-size > .err { left: 124px; top: calc(100% + 8px); }
.helper { flex-basis: 100%; padding-left: 124px; font: 400 14px/20px var(--font-ui); color: var(--muted); }
.helper:empty { display: none; }
.helper:not(:empty) { margin-top: 12px; }
.helper a { color: var(--ink); font-weight: 500; }
@media (hover: hover) { .helper a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- Submit ---------- */
.actions { display: flex; align-items: center; gap: 24px; }
.hint { font: 400 14px/20px var(--font-ui); color: var(--muted); }
/* The survey's Submit spans the form: 48 tall, the label centred, a 40px chip at the right. */
.start .form { gap: 64px; }
.start .actions { flex-direction: column; align-items: stretch; gap: 16px; }
.start .field--area:first-child { padding-top: 0; } /* Paper: the summary's text starts at the field's top; the
   message (after other fields) keeps its 12px, so the error line above it has room */
.start .send { width: 100%; height: 48px; justify-content: space-between; }
.start .send-label { flex: 1; text-align: center; }
.start .send .pill-arrow { width: 40px; height: 40px; }
.start .send-dots { left: 50%; translate: -50% -50%; }
.hint:empty { display: none; }
.send { position: relative; overflow: hidden; }
.send-label { transition: opacity 120ms var(--e-ui); }
.send-dots { position: absolute; left: 20px; top: 50%; translate: 0 -50%; display: flex; gap: 4px; opacity: 0; }
.send-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--paper); }

/* Submitting: fields dim, the pill shimmers in monochrome, three dots pulse in place of the label. */
.form[aria-busy="true"] .fields { opacity: 0.4; pointer-events: none; }
.form[aria-busy="true"] .send { pointer-events: none; }
.form[aria-busy="true"] .send-label { opacity: 0; }
.form[aria-busy="true"] .send-dots { opacity: 1; }
.form[aria-busy="true"] .send-dots i { animation: dot 900ms var(--e-ui) infinite; }
.form[aria-busy="true"] .send-dots i:nth-child(2) { animation-delay: 150ms; }
.form[aria-busy="true"] .send-dots i:nth-child(3) { animation-delay: 300ms; }
.form[aria-busy="true"] .send::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--paper) 22%, transparent) 50%, transparent 70%);
  background-size: 250% 100%; animation: shimmer 1.1s linear infinite;
}
@keyframes dot { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* The quiet line under the form. */
.aside {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line);
  font: 400 14px/20px var(--font-ui); color: var(--muted);
}
.aside a { color: var(--ink); font-weight: 500; }
@media (hover: hover) { .aside a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.start .aside { margin-top: 0; padding-top: 16px; }

/* ---------- Sent ---------- */
.done-mark {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; flex-shrink: 0;
}
.done-mark svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.start-head .done-mark + .start-h1 { margin-top: -20px; } /* 28 under the mark, as in Paper */
.start-row { display: flex; align-items: flex-start; gap: 64px; }
.start-row .lede { flex: 1; }

/* Booking: a day row sharing the field underline, times as fill-only pills. */
.book { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.book-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.book-title { font: 500 16px/24px var(--font-ui); color: var(--ink); }
.book-tz { font: 400 14px/20px var(--font-ui); color: var(--muted); }
.days { display: flex; }
.days button {
  flex: 1 1 0; min-width: 0; text-align: left;
  padding-bottom: 12px; border-bottom: 1px solid var(--field-line);
  font: 400 16px/24px var(--font-ui); color: var(--off);
  transition: color 160ms var(--e-ui), border-color 160ms var(--e-ui), box-shadow 160ms var(--e-ui);
}
.days button[aria-pressed="true"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); box-shadow: 0 0.5px 0 0 var(--ink); }
@media (hover: hover) { .days button:hover:not([aria-pressed="true"]) { color: var(--ink); } }
.times { display: flex; flex-wrap: wrap; gap: 8px; }
.times button {
  width: calc((100% - 16px) / 3); height: 44px; border-radius: var(--r-btn);
  display: grid; place-items: center;
  background: var(--fill); font: 400 14px/24px var(--font-ui); color: var(--ink);
  transition: background-color 160ms var(--e-ui), color 160ms var(--e-ui), transform 120ms var(--e-ui);
}
.times button:active { transform: scale(0.97); }
.times button[aria-pressed="true"] { background: var(--ink); color: var(--paper); font-weight: 500; }
@media (hover: hover) { .times button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--ink) 9%, transparent); } }

/* ---------- Phone (<768): one column, 20 sides ---------- */
@media (max-width: 767px) {
  .start { min-height: 0; padding: 32px var(--m) 80px; }
  .start-head .swap { gap: 32px; }
  .start-stage { padding-top: 32px; }
  .start-head .done-mark + .start-h1 { margin-top: -4px; }
  .start-h1 { font: 400 24px/125% var(--font-display); letter-spacing: -0.02em; }
  .tabs { gap: 20px; }
  .start-split { flex-direction: column; align-items: stretch; gap: 40px; }
  .start-left, .start-right { width: auto; }
  .start-left { gap: 24px; }
  .start-right { gap: 48px; }
  .start-row { flex-direction: column; align-items: stretch; gap: 28px; }
  .lede { max-width: none; }
  .ai-btn { height: 44px; }
  .start[data-intent="other"] .start-left { padding-top: 0; }
  .opt::before { content: ""; position: absolute; inset: -4px 0; } /* 36px pills, 44px targets */
  .aside a { padding-block: 12px; margin-block: -12px; }
  .days button { padding-top: 7px; } /* 44px targets */
  .form-page .pill { position: relative; }
  .form-page .pill::before { content: ""; position: absolute; inset: -2px 0; }
  .field-row { flex-direction: column; gap: 20px; }
  .team-size { flex-direction: column; align-items: flex-start; gap: 12px; }
  .team-label { width: auto; }
  .team-size > .err { left: 0; }
  .helper { padding-left: 0; }
  .helper:not(:empty) { margin-top: 0; }
  .actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* The narrowest phones (320): the tabs scroll sideways rather than widen the page. */
@media (max-width: 359px) {
  .tabs { gap: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs [role="tab"]::before { inset: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .form-page *, .form-page *::before, .form-page *::after { transition: none !important; }
  .err { animation: none; }
  .form[aria-busy="true"] .send::after { animation: none; opacity: 0; }
  .form[aria-busy="true"] .send-dots i { animation: none; opacity: 1; }
}