/* THE FREE WEBSITE REQUEST. Drawn in the site's tokens from /header.css: the water behind,
   one white card in front, the cat on its float beside it on wide screens. */
body { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--water); }
.start-water { position: fixed; inset: 0; z-index: 0; display: block; }
.start, .site-head { position: relative; z-index: 1; }
.site-head { position: sticky; z-index: 60; }

.start { box-sizing: border-box; max-width: 1100px; min-height: calc(100dvh - 140px); margin: 0 auto;
         padding: 30px 20px 60px; display: grid; grid-template-columns: minmax(0, 760px);
         justify-content: center; align-items: center; }
@media (max-width: 700px) { .start { padding: 16px 16px 40px; } }

.start-card { background: var(--white); border-radius: var(--r4); box-shadow: var(--e2); padding: 40px; }
@media (max-width: 700px) { .start-card { border-radius: var(--r3); padding: 26px 20px; } }
.start-card__title { font-family: var(--font-italic); font-weight: 400; font-size: 48px; line-height: 1.05;
                     color: var(--ink); margin: 0; }
@media (max-width: 700px) { .start-card__title { font-size: 38px; } }
.start-card__lead { font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--green); margin: 12px 0 26px; }

/* FIELDS. Label above, 16px text so phones do not zoom in, error under the field it is about. */
.start-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 480px) { .start-row { grid-template-columns: 1fr; } }
.start-field { margin: 0 0 14px; }
.start-field label { display: block; font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.start-opt { font-weight: 400; color: var(--ink-mute); }
.start-field input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px;
                     font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
                     border: 1.5px solid var(--line); border-radius: var(--r2); outline: none;
                     transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.start-field input::placeholder { color: var(--ink-mute); opacity: 1; }
.start-field input:hover { border-color: var(--mint); }
.start-field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--tint); }
.start-field input[aria-invalid="true"] { border-color: var(--coral); }
.start-hint, .start-next { font-size: 13px; color: var(--ink-mute); margin: 6px 0 0; }
.start-next { margin-top: 10px; text-align: center; }
.start-privacy { font-size: 12px; color: var(--ink-mute); margin-top: 16px; }
.start-privacy p { margin: 0 0 6px; }
.start-privacy a { color: inherit; }
.start-err { font-size: 14px; color: var(--coral-hover); margin: 6px 0 0; min-height: 0; }
.start-err:empty { display: none; }
.start-err button { font: inherit; color: var(--green); background: none; border: 0; padding: 0;
                    text-decoration: underline; cursor: pointer; }
/* The listing's address: street on its own line, then city, state and ZIP side by side. */
.start-address { border: 0; margin: 0; padding: 0; min-width: 0; }
.start-address legend { padding: 0; font-weight: 700; font-size: 15px; margin: 4px 0 10px; }
.start-address .start-field label { font-weight: 400; font-size: 14px; color: var(--ink); }
.start-place { display: grid; grid-template-columns: minmax(0, 1fr) 96px 120px; gap: 0 12px; }
@media (max-width: 480px) { .start-place { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
                            .start-place__city { grid-column: 1 / -1; } }
.start-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.start-fail { font-size: 15px; color: var(--coral-hover); margin: 4px 0 12px; }
.start-fail:empty { display: none; }
.start-submit { width: 100%; margin-top: 10px; }
.start-submit[aria-busy="true"] { opacity: .7; cursor: progress; }

.start-done { outline: none; }
.start-done .btn { align-self: start; justify-self: start; display: inline-flex; }

.start-hint--address { margin: 0 0 12px; }