/* Intake form ("Start your website") */
.start .nav { position: sticky; }
.intake { max-width: 820px; padding-block: 56px 120px; }
.intake__intro h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 16px 0 16px; }
.intake__intro .lede { margin-bottom: 36px; }

.progress { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress__bar { display: block; height: 100%; width: 0; background: var(--pulse); border-radius: 99px; transition: width .6s var(--ease); box-shadow: 0 0 12px rgba(198, 255, 61, .6); }
.progress__label { color: var(--muted); margin: 12px 0 22px; }

.intake__form { background: var(--bg-2); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 4vw, 40px); }
.step { border: 0; margin: 0; padding: 0; display: grid; gap: 22px; min-width: 0; animation: fadein .45s var(--ease); }
.step__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; letter-spacing: -.035em; padding: 0; margin-bottom: 4px; }
.row { display: grid; gap: 22px; }
@media (min-width: 640px) { .row { grid-template-columns: 1fr 1fr; } }
.hint { color: var(--muted); font-size: .9rem; border-left: 2px solid var(--pulse); padding-left: 12px; }

.cards { display: grid; gap: 10px; }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pick > span { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); transition: border-color .25s, background .25s, transform .3s var(--ease); }
.pick b { font-weight: 500; }
.pick small { color: var(--muted); font-size: .8rem; }
.pick:hover > span { border-color: rgba(255, 255, 255, .35); }
.pick input:checked + span { border-color: var(--pulse); background: rgba(198, 255, 61, .07); }
.pick input:focus-visible + span { outline: 2px solid var(--pulse); outline-offset: 2px; }

.autofill { display: grid; gap: 8px; padding: 18px; border-radius: 16px; border: 1px dashed var(--line-2); background: rgba(198, 255, 61, .025); }
.autofill__row { display: flex; gap: 8px; }
.autofill__row .field__input { flex: 1; min-width: 0; }
.autofill__row .btn { flex: none; height: auto; }
.autofill__status { color: var(--muted); font-size: .85rem; }
.autofill__status.is-ok { color: var(--pulse); }
.field__input.is-filled { border-color: rgba(198, 255, 61, .5); box-shadow: 0 0 0 3px rgba(198, 255, 61, .08); }

.upload input[type=file] { padding: 14px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--bg); color: var(--muted); width: 100%; }
.upload input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: 99px; border: 0; background: var(--pulse); color: var(--pulse-ink); font-weight: 600; cursor: pointer; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.thumbs:empty { display: none; }
.thumbs figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-3); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; font-size: .75rem; }

.wordmarks .pick > span { place-content: center; min-height: 86px; background: #fbfaf7; color: #14161a; border-color: transparent; }
.wordmarks .pick input:checked + span { background: #fbfaf7; box-shadow: 0 0 0 2px var(--pulse); }
.wm { display: flex !important; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.wm b { font-weight: 700; word-break: break-word; }
.wm--bold b { font-family: var(--sans); letter-spacing: -.03em; font-size: 1.05rem; }
.wm--bold i { font-style: normal; flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--wm, #0b5fa5); color: #fff; font-size: .72rem; font-weight: 700; }
.wm--serif b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; color: var(--wm, #0b5fa5); }
.wm--mono b { font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 500; }

.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pal { position: relative; cursor: pointer; }
.pal input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pal__card { display: block; border-radius: 14px; overflow: hidden; background: #fbfaf7; color: #14161a; border: 2px solid transparent; transition: transform .3s var(--ease), border-color .25s; }
.pal:hover .pal__card { transform: translateY(-2px); }
.pal input:checked + .pal__card { border-color: var(--pulse); }
.pal input:focus-visible + .pal__card { outline: 2px solid var(--pulse); outline-offset: 2px; }
.pal__nav { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: .62rem; font-weight: 700; }
.pal__nav i { width: 14px; height: 14px; border-radius: 4px; background: var(--p); flex: none; }
.pal__nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal__body { padding: 10px; display: grid; gap: 6px; }
.pal__pill { justify-self: start; font-size: .55rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb, var(--a) 40%, #fff); color: var(--p); }
.pal__h { height: 8px; width: 80%; border-radius: 3px; background: #1c1e23; }
.pal__h2 { height: 6px; width: 60%; border-radius: 3px; background: #c9c8c2; }
.pal__btn { justify-self: start; margin-top: 2px; font-size: .56rem; font-weight: 700; color: #fff; background: var(--p); padding: 4px 9px; border-radius: 99px; }
.pal__name { display: block; padding: 7px 10px 9px; font-size: .72rem; color: #55585f; }
.pal--auto .pal__card { background: var(--bg); color: var(--text); border: 1px dashed var(--line-2); min-height: 100%; display: grid; place-content: center; text-align: center; padding: 18px; gap: 4px; }
.pal--auto input:checked + .pal__card { border: 2px solid var(--pulse); }
.pal--auto b { font-weight: 500; }
.pal--auto small { color: var(--muted); font-size: .78rem; }

.summary { margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.summary div { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.summary div:last-child { border-bottom: 0; }
.summary dt { color: var(--muted); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding-top: 3px; }
.summary dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.summary button { color: var(--pulse); font-size: .8rem; margin-left: 8px; }
@media (max-width: 560px) { .summary div { grid-template-columns: 1fr; gap: 4px; } }

.intake__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.intake__nav #prev[hidden] { display: inline-flex !important; visibility: hidden; }
.intake__done { padding-top: 10px; }
.intake__done h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.intake__done h2 .serif { color: var(--pulse); }
.intake__done p { color: var(--muted); max-width: 60ch; margin-bottom: 22px; }
[data-show-if] { display: none; }
[data-show-if].is-shown { display: grid; }
p[data-show-if].is-shown { display: block; }