.start { padding: var(--s7) 0 var(--s8); }
.start-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: start; }
.start-form { max-width: 34rem; }
.start-form h1 { font-size: clamp(2.2rem, 3.6vw, 3rem); margin-bottom: var(--s4); }
.start-form .lede { margin-bottom: var(--s3); }
.plan-line { color: var(--fg-2); margin-bottom: var(--s6); }
.plan-line a { color: var(--fg); font-weight: 500; }

.signup { display: grid; gap: var(--s4); }
.signup .btn { width: 100%; }
.btn-google { background: var(--surface); color: var(--fg); border-color: var(--line); }
.btn-google:hover { border-color: var(--fg); }
.btn-google svg { width: 18px; height: 18px; }
.or { display: flex; align-items: center; gap: var(--s3); color: var(--fg-muted); font-size: 0.86rem; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field input, .field select, .field textarea {
  font: 400 1rem/1.4 var(--font);
  color: var(--fg);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--fg-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ht-action); outline-offset: 1px; border-color: var(--ht-action); border-radius: 8px; }
.field [aria-invalid="true"] { border-color: var(--ht-action); }
.field-hint { margin: 0; font-size: 0.86rem; color: var(--fg-muted); }
.field-error { margin: 0; font-size: 0.88rem; font-weight: 500; color: var(--ht-action); }

.reassure { margin-top: var(--s5); }

.desk-note { display: none; gap: 4px; padding: var(--s4); margin-bottom: var(--s5); border: 1px solid var(--line); border-left: 3px solid var(--ht-coral); border-radius: var(--r-md); background: var(--bg-alt); font-size: 0.93rem; color: var(--fg-2); }
.desk-note strong { color: var(--fg); }
.narrow-only { display: none; }

.start-side { padding-top: var(--s3); }
.start-artefact { margin: 0; position: relative; padding: 0 0 var(--s6); }
.start-artefact .mini { padding: 18px 20px 26px; }
.start-artefact .mini-btn { margin-bottom: 0; width: 110px; }
.start-artefact .comment { position: absolute; right: 0; bottom: 0; width: min(270px, 80%); }
.artefact-cap { margin: var(--s2) 0 var(--s7); }

.start-side h2 { font-size: 1.5rem; margin-bottom: var(--s5); }
.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.next-steps li { display: grid; grid-template-columns: 34px 1fr; gap: var(--s3); align-items: start; }
.next-steps .pin.inline { width: 24px; height: 24px; margin: 2px 0 0 2px; }
.next-steps .pin.inline > span { font-size: 11px; }
.next-steps h3 { font-size: 1.05rem; margin-bottom: 2px; }
.next-steps p { margin: 0; color: var(--fg-2); font-size: 0.95rem; }

.start-footer { border-top: 1px solid var(--line); padding: var(--s5) 0; }
.start-footer a { color: var(--fg-2); }

@media (max-width: 960px) {
  .start-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .start-form { max-width: 34rem; }
  .start-side { max-width: 34rem; }
}
@media (max-width: 720px) {
  .desk-note { display: grid; }
  .narrow-only { display: inline-flex; }
  .start-artefact, .artefact-cap { display: none; }
  .start { padding-top: var(--s5); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field-error { color: #FF9B78; }
  :root:not([data-theme="light"]) .field [aria-invalid="true"] { border-color: #FF9B78; }
}
:root[data-theme="dark"] .field-error { color: #FF9B78; }
:root[data-theme="dark"] .field [aria-invalid="true"] { border-color: #FF9B78; }