/* Sign up and onboarding (public/start.html) and the dashboard (public/dashboard.html), on top of brief.css: the same
   bright nightlystudio.com look, Instrument Serif for the one big line on each screen, Inter 400 and 500 for the rest,
   nothing heavier, and the living gradient as a wash at the top. Few words per screen; one dark button per screen. */

.start main, .dash main { position: relative; isolation: isolate; min-height: calc(100vh - 64px); }
.top-link { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 10px; }
.top-link:hover { background: rgba(255, 255, 255, .6); }

/* ---------- The grid: the question, and their website taking shape beside it ---------- */
.st-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); justify-content: center; gap: clamp(40px, 5vw, 80px); align-items: start; padding-top: clamp(24px, 6vh, 64px); padding-bottom: 88px; }
.st-main { min-width: 0; display: grid; gap: 0; }
.screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; min-width: 0; } /* one column: WebKit sized it by the phone box at 320 px, wider than the screen */
.screen h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -.012em; color: var(--ink); max-width: 15ch; }
.screen h1 label { font: inherit; color: inherit; }
/* Headings take focus only so a screen reader reads the new question: no ring for that. */
.screen h1[tabindex="-1"]:focus { outline: none; }
.screen[data-screen="signup"] h1 { font-size: clamp(46px, 6.4vw, 76px); max-width: 11ch; }
.kicker { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 13px; font-weight: 500; color: var(--ink-2); background: rgba(255, 255, 255, .7); border: 1px solid rgba(17, 18, 22, .1); border-radius: 999px; padding: 5px 12px 5px 10px; }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.lede b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.st-note { font-size: 15px; color: var(--ink-2); background: #f4f6fd; border-radius: 12px; padding: 12px 14px; }
.st-dev { font-size: 13px; color: var(--muted); border: 1px dashed #c9ccd4; border-radius: 10px; padding: 10px 12px; }

/* Back is an icon on the progress bar's line, as Durable's chevron; the first question has none. */
.st-head { display: flex; align-items: center; gap: 4px; min-height: 44px; margin: -8px 0 14px -13px; max-width: 573px; }
.st-head:has(> .st-back[hidden]) { margin-left: 0; }
.st-progress { flex: 1; height: 3px; background: rgba(17, 18, 22, .1); border-radius: 3px; overflow: hidden; }
.st-progress span { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 3px; transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.st-back { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.st-back svg { width: 20px; height: 20px; }
.st-back:hover { color: var(--ink); background: rgba(17, 18, 22, .06); }

/* Screens arrive with a short rise; never when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .screen.enter { animation: st-in .42s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes st-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---------- Sign up ---------- */
.providers { display: grid; gap: 10px; max-width: 400px; margin-top: 6px; }
.providers:not(:has(.pbtn:not([hidden]))) { display: none; }
.pbtn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 20px; border-radius: 12px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font: 500 16px/1 var(--sans); text-decoration: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pbtn svg { width: 18px; height: 18px; flex: none; }
.pbtn:hover { background: #f8f9fb; border-color: #c4c7cf; box-shadow: 0 1px 2px rgba(17, 18, 22, .06); }
.pbtn--apple { background: #000; color: #fff; border-color: #000; }
.pbtn--apple svg { width: 16px; height: 19px; margin-top: -2px; }
.pbtn--apple:hover { background: #1d1d1f; border-color: #1d1d1f; }
.pbtn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.or { display: flex; align-items: center; gap: 14px; max-width: 400px; font-size: 13px; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.email-form, .code-form { display: grid; gap: 10px; max-width: 400px; }
.email-form input, .code-form input { min-height: 54px; }
.email-form .btn, .code-form .btn { width: 100%; }
.code-form input { font-size: 26px; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; padding-left: 24px; }
.code-form input::placeholder { letter-spacing: .32em; color: #b8bbc4; }
.screen .fine { max-width: 400px; }
.screen[data-screen="more"] .fine { max-width: 520px; }

/* ---------- New or existing: two cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.card-btn { display: grid; justify-items: start; align-content: start; gap: 0; text-align: left; padding: 22px 22px 24px; min-height: 132px; border-radius: 20px; background: rgba(255, 255, 255, .86); border: 1px solid #e3e4ea; color: var(--ink); cursor: pointer; font: inherit; box-shadow: 0 1px 2px rgba(17, 18, 22, .04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-btn:hover { transform: translateY(-2px); border-color: #c9ccd4; box-shadow: 0 14px 34px rgba(30, 50, 130, .12); }
.card-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.card-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(150deg, #e9eefc, #f5f0fa); margin-bottom: 20px; color: var(--ink); }
.card-ico svg { width: 22px; height: 22px; }
.card-t { font-size: 18px; font-weight: 500; }
.card-s { margin-top: 4px; font-size: 15px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .card-btn:hover { transform: none; } }

/* ---------- Find on Google: a search box with its suggestions ---------- */
.combo { position: relative; }
.combo-ico { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.combo input { min-height: 64px; padding-left: 50px; font-size: 19px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(17, 18, 22, .05); }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 16px; border: 1px solid #e6e6ea; box-shadow: 0 24px 60px rgba(30, 50, 130, .16); max-height: 360px; overflow: auto; }
.combo-list li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; cursor: pointer; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--box); }
.combo-list .m { font-size: 16px; font-weight: 500; color: var(--ink); }
.combo-list .s { font-size: 14px; color: var(--muted); }
.combo-list .empty { cursor: default; color: var(--muted); font-size: 15px; }
.combo-list .empty:hover { background: none; }
.combo-list .by { cursor: default; padding: 8px 14px 6px; font-size: 12px; color: var(--muted); }
.combo-list .by:hover { background: none; }

/* ---------- Is this you? The listing, editable in place ---------- */
.listing { display: grid; gap: 18px; background: #fff; border-radius: 22px; border: 1px solid #e6e6ea; padding: 22px 22px 18px; box-shadow: 0 20px 50px rgba(30, 50, 130, .1); }
.l-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.l-names { min-width: 0; flex: 1; display: grid; gap: 2px; }
input.l-name { font-family: var(--serif); font-size: 32px; line-height: 1.1; padding: 2px 6px; margin-left: -6px; background: transparent; border: 1px solid transparent; border-radius: 8px; }
input.l-name:hover { border-color: var(--line); }
input.l-name:focus { background: #fff; border-color: var(--ink); box-shadow: none; }
.l-kind { font-size: 15px; color: var(--muted); }
.l-rating { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; color: var(--ink-2); background: var(--box); border-radius: 999px; padding: 6px 11px; }
.stars { --r: 5; position: relative; display: inline-block; width: 74px; height: 14px; background: linear-gradient(90deg, var(--gold) calc(var(--r) / 5 * 100%), #dcdde3 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 14'%3E%3Cg%3E%3Cpath id='s' d='M7 0l2.1 4.5 4.9.6-3.6 3.3.9 4.9L7 10.9 2.7 13.3l.9-4.9L0 5.1l4.9-.6z'/%3E%3Cuse href='%23s' x='15'/%3E%3Cuse href='%23s' x='30'/%3E%3Cuse href='%23s' x='45'/%3E%3Cuse href='%23s' x='60'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 14'%3E%3Cg%3E%3Cpath id='s' d='M7 0l2.1 4.5 4.9.6-3.6 3.3.9 4.9L7 10.9 2.7 13.3l.9-4.9L0 5.1l4.9-.6z'/%3E%3Cuse href='%23s' x='15'/%3E%3Cuse href='%23s' x='30'/%3E%3Cuse href='%23s' x='45'/%3E%3Cuse href='%23s' x='60'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.l-rating .stars { width: 60px; height: 11px; }
.l-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.l-facts > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; border-bottom: 1px solid var(--line); min-height: 52px; }
.l-facts dt { font-size: 13px; font-weight: 500; color: var(--muted); }
.l-facts dd { margin: 0; min-width: 0; }
.l-facts input { background: transparent; border-color: transparent; padding: 10px 8px; margin-left: -8px; font-size: 16px; border-radius: 8px; }
.l-facts input:hover { border-color: var(--line); }
.l-facts input:focus { background: #fff; }
.l-hours > summary { cursor: pointer; font-size: 15px; color: var(--ink-2); padding: 12px 0; list-style: none; }
.l-hours > summary::-webkit-details-marker { display: none; }
.l-hours > summary::after { content: " +"; color: var(--muted); }
.l-hours[open] > summary::after { content: " \2013"; }
.l-hours ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.l-block { display: grid; gap: 10px; }
.l-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.l-reviews { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.l-reviews label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--box); border: 1px solid transparent; cursor: pointer; font-weight: 400; color: var(--ink); }
.l-reviews label:has(input:checked) { background: #fff; border-color: #d8d9df; }
.l-reviews input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.l-reviews q { font-size: 15px; line-height: 1.5; quotes: "\201C" "\201D"; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.l-reviews .who { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.l-reviews .who .stars { width: 52px; height: 10px; }
.l-photos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.l-photos label { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--box); }
.l-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease, opacity .2s ease; }
.l-photos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.l-photos .tick { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .92); border: 1px solid rgba(17, 18, 22, .2); display: grid; place-items: center; }
.l-photos .tick svg { width: 12px; height: 12px; opacity: 0; }
.l-photos input:checked ~ .tick { background: var(--ink); border-color: var(--ink); }
.l-photos input:checked ~ .tick svg { opacity: 1; }
.l-photos input:not(:checked) ~ img { opacity: .62; }
.l-photos input:focus-visible ~ .tick { outline: 2px solid var(--ink); outline-offset: 2px; }
.l-photos .by { position: absolute; left: 6px; bottom: 6px; right: 6px; font-size: 11px; font-weight: 500; color: #fff; background: rgba(17, 18, 22, .62); border-radius: 6px; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- One-answer screens ---------- */
input.big { min-height: 64px; font-size: 21px; border-radius: 14px; padding: 14px 18px; }
/* What kind: eight one-tap answers under the box, and suggestions over them while typing (the find screen's list,
   without its search icon). */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid #dfe0e6; color: var(--ink-2); font: 400 15px/1 var(--sans); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.chip-btn:hover { border-color: #b9bcc6; }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.combo--plain .combo-list li { padding: 13px 14px; }
.combo--plain .combo-list .m { font-size: 17px; font-weight: 400; }
.combo-list .m b { font-weight: 500; }
/* The name: "No name yet? Get ideas", six names, each saying whether its web address is free. */
.name-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.name-box .field-error { margin-top: 4px; }
.ideas-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; font-size: 15px; }
.ideas-line .linkish[aria-busy="true"] { opacity: .55; cursor: progress; }
.ideas { list-style: none; margin: 4px 0 0; padding: 6px; display: grid; gap: 2px; background: #fff; border: 1px solid #e6e6ea; border-radius: 18px; box-shadow: 0 24px 56px -28px rgba(30, 50, 130, .28); }
.idea { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 14px; width: 100%; min-height: 60px; padding: 10px 12px 10px 14px; border: 0; border-radius: 12px; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background-color .15s ease; }
.idea:hover { background: var(--box); }
.idea[aria-pressed="true"] { background: var(--box); box-shadow: inset 0 0 0 1.5px var(--ink); }
.idea-name { font-size: 17px; font-weight: 500; line-height: 1.25; }
.idea-web { grid-column: 1; font-size: 14px; color: var(--muted); }
.idea-st { grid-column: 2; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; white-space: nowrap; padding: 5px 11px; border-radius: 999px; background: var(--box); color: var(--muted); }
.idea-st--free { background: #e3f3ea; color: #1f6f43; }
.idea-st--free::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1f7a4d; }
.idea--wait { cursor: default; }
.idea--wait i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #e6e7eb 0%, #f2f3f5 40%, #e6e7eb 80%); background-size: 200% 100%; }
.idea--wait i:first-child { width: 55%; height: 14px; }
.idea--wait i:nth-child(2) { width: 38%; grid-column: 1; }
.idea--wait i:last-child { grid-column: 2; grid-row: 1 / 3; width: 54px; height: 24px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) { .idea--wait i { animation: shimmer 1.6s linear infinite; } }
/* The narrowest phones: a long address takes the row, and Free or Taken goes under it, so neither is cut off. */
@media (max-width: 374px) {
  .idea { grid-template-columns: minmax(0, 1fr); }
  .idea-st { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 5px; }
}
.st-nav { display: flex; align-items: center; gap: 18px; margin-top: 4px; flex-wrap: wrap; }
.st-nav .btn { min-width: 160px; }
.screen .opt { margin-bottom: -10px; }

/* ---------- What you sell ---------- */
textarea.sell-area { min-height: 170px; font-size: 18px; border-radius: 16px; padding: 18px 20px; }

/* ---------- More details ---------- */
.screen[data-screen="more"] textarea { min-height: 150px; }
.m-files { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.m-files:empty { display: none; }
.m-files li { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--box); border: 1px solid var(--line); }
.m-files img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-files li.logo img { object-fit: contain; padding: 8px; background: repeating-conic-gradient(#ececef 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.m-files .state { position: absolute; inset: auto 0 0; font-size: 11px; font-weight: 500; padding: 3px 6px; background: rgba(255, 255, 255, .9); color: var(--ink-2); text-align: center; }
.m-files .state.bad { color: var(--bad); }
.m-files button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(17, 18, 22, .7); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; border: 1.5px dashed #cfd2da; border-radius: 16px; background: rgba(255, 255, 255, .6); transition: border-color .15s ease, background-color .15s ease; }
.drop.over { border-color: var(--ink); background: #fff; }
.drop .btn svg { width: 18px; height: 18px; flex: none; }
.meter { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: #f6f6f8; }
.meter-bar { height: 6px; border-radius: 6px; background: #e3e4ea; overflow: hidden; }
.meter-bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--cornflower), var(--periwinkle)); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.meter p { font-size: 14px; color: var(--muted); }
.meter b { color: var(--ink); font-weight: 500; }
.meter-tip::before { content: " · "; }
.meter-tip:empty::before { content: ""; }
.btn--build { min-width: 220px; }

/* ---------- Building: "Build my website" goes straight to the builder, whose screen is the one wait (issue #30). The
   button holds, with a spinner, while the website is set up; then the page fades into the builder, never a white flash
   (start.js opts in to that one fade at the click: a fade offered into this page fails in Chrome, so none is). */
.btn--build[aria-busy="true"]:disabled { opacity: 1; }
.btn--build[aria-busy="true"]::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .btn--build[aria-busy="true"]::after { animation: none; } }

/* ---------- The showcase: what Nightly makes, one business after another ---------- */
.st-side { position: sticky; top: 24px; margin-top: 8px; }
/* One business after another: the photo drifts as it comes in, the website made for that kind of business rises beside
   the line, and the bars along the top count down to the next. Paused by its button (WCAG 2.2.2) or a hidden tab. */
.show { position: relative; height: min(760px, calc(100vh - 112px)); min-height: 540px; border-radius: 28px; overflow: hidden; background: #191612; box-shadow: 0 44px 90px -40px rgba(17, 18, 22, .5); isolation: isolate; }
.show-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.show-slide.on { opacity: 1; z-index: 1; }
.show-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.show-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .66) 100%); }
.show-slide[data-k="cafe"] .show-photo { object-position: 50% 40%; }
.show-slide[data-k="joinery"] .show-photo { object-position: 68% 40%; }
.show-slide[data-k="trainer"] .show-photo { object-position: 50% 45%; }
.show-slide[data-k="barber"] .show-photo { object-position: 52% 30%; }
.show-slide[data-k="cleaning"] .show-photo { object-position: 48% 35%; }
.show-slide[data-k="yoga"] .show-photo { object-position: 60% 50%; }
.show-cap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; display: flex; align-items: flex-end; gap: 18px; }
.show-site { flex: none; width: 44%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #fff; border: 3px solid #fff; box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .6); }
.show-site img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.show-line { color: #fff; font: 500 clamp(24px, 1rem + 1.2vw, 38px) / 1.08 var(--sans); letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 2px 22px rgba(0, 0, 0, .4); padding-bottom: 2px; }
.show-bars { position: absolute; z-index: 3; top: 22px; left: 24px; right: 76px; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.show-bars li { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .34); overflow: hidden; }
.show-bars li::before { content: ""; display: block; width: 0; height: 100%; background: #fff; }
.show-bars li.done::before { width: 100%; }
.show-bars li.now::before { animation: show-fill 5.2s linear forwards; }
.show[data-paused] .show-bars li.now::before, .show[data-paused] .show-slide.on .show-photo { animation-play-state: paused; }
@keyframes show-fill { to { width: 100%; } }
.show-pause { position: absolute; z-index: 3; top: 10px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .3); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.show-pause svg { width: 18px; height: 18px; fill: currentColor; }
.show-pause .i-play, .show-pause[aria-pressed="true"] .i-pause { display: none; }
.show-pause[aria-pressed="true"] .i-play { display: inline; }
.show-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .show-slide.on .show-photo { animation: show-drift 6.4s cubic-bezier(.2, .6, .3, 1) forwards; }
  .show-site, .show-line { transform: translateY(14px); opacity: 0; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
  .show-line { transition-delay: .12s; }
  .show-slide.on .show-site, .show-slide.on .show-line { transform: none; opacity: 1; transition-delay: .3s; }
  .show-slide.on .show-line { transition-delay: .45s; }
  @keyframes show-drift { from { transform: scale(1.14) translateX(3%); } to { transform: scale(1.03) translateX(-1%); } }
}
@media (prefers-reduced-motion: reduce) { .show-bars li.now::before { animation-duration: 8s; } }
/* ---------- The dashboard ---------- */
.dash-wrap { padding-top: clamp(28px, 6vh, 64px); padding-bottom: 88px; display: grid; gap: 28px; max-width: 1080px; }
.dash-head { display: grid; gap: 4px; }
.dash-head h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 60px); line-height: 1.02; letter-spacing: -.012em; max-width: 18ch; }
.dash-head .hello { font-size: 15px; color: var(--ink-2); margin: 0; }
.acct { position: relative; }
.acct > button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid rgba(17, 18, 22, .12); background: rgba(255, 255, 255, .75); font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer; max-width: 260px; }
.acct > button .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 13px; flex: none; }
.acct > button .em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; padding-block: 1px; } /* room for descenders: "g" was cut off */
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(300px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(30, 50, 130, .14); padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.acct-menu p { font-size: 13px; color: var(--muted); padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
/* An address never breaks mid-word: a long one ends in an ellipsis, and its title shows it whole. */
.acct-menu p b { display: block; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu a, .acct-menu button { display: block; text-align: left; width: 100%; min-height: 40px; padding: 0 10px; border-radius: 8px; border: 0; background: none; font: 400 15px/40px var(--sans); color: var(--ink); text-decoration: none; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--box); }

/* The app's frame: a side menu beside the page, like Durable's, with words as well as icons. */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.side { position: sticky; top: 0; align-self: start; height: calc(100vh - 64px); display: flex; flex-direction: column; gap: 2px; padding: 20px 14px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: 2; }
.side-a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.side-a svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.side-a:hover { background: var(--box); color: var(--ink); }
.side-a[aria-current="page"] { background: var(--ink); color: #fff; }
.side-a .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 500; display: grid; place-items: center; }
.side-gap { flex: 1; }
.dash-main { position: relative; min-width: 0; }
.dash-main .dash-wrap { max-width: 1180px; padding-inline: clamp(20px, 4vw, 48px); margin: 0; }
/* The website, large and live, with what to do now. */
.hero-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 48px); padding: clamp(22px, 3vw, 36px); background: #fff; border: 1px solid #e6e6ea; border-radius: 28px; box-shadow: 0 40px 80px -48px rgba(30, 50, 130, .35); }
.hero-text { display: grid; gap: 16px; min-width: 0; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hero-card h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; }
.hero-card .lede { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.hero-msg { font-size: 14px; color: var(--ink-2); min-height: 1.4em; }
.text-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hero-shot { min-width: 0; padding: 18px 18px 0; border-radius: 20px; background: linear-gradient(155deg, #dfe8fb 0%, #ece6fa 55%, #fdf0e6 100%); overflow: hidden; }
.shot-link { display: block; text-decoration: none; border-radius: 14px 14px 0 0; }
.shot-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.browser { border-radius: 14px 14px 0 0; overflow: hidden; background: #fff; box-shadow: 0 24px 50px -20px rgba(30, 50, 130, .35); }
.browser .bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; background: #f2f3f6; border-bottom: 1px solid #e7e8ee; }
.browser .bar i { width: 8px; height: 8px; border-radius: 50%; background: #d4d6dd; }
.browser .bar span { margin-left: 10px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser .view { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; background: #fff; }
.browser .view img { display: block; width: 100%; }
.browser .frame { position: absolute; top: 0; left: 0; width: 1440px; height: 1400px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
@media (prefers-reduced-motion: no-preference) { .shot-link .browser { transition: transform .35s cubic-bezier(.2, .7, .2, 1); } .shot-link:hover .browser { transform: translateY(-4px); } }
/* What's next: three cards, each true for this website today. */
.sec-h { margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.next-card { display: grid; align-content: start; gap: 10px; padding: 22px; background: #fff; border: 1px solid #e6e6ea; border-radius: 20px; }
.next-card h3 { margin: 0; font-size: 18px; font-weight: 500; }
.next-card p { margin: 0; color: var(--ink-2); font-size: 15px; overflow-wrap: anywhere; }
.next-card .text-link { justify-self: start; margin-top: 4px; }
.other-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.other { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; background: #fff; border: 1px solid #e6e6ea; border-radius: 16px; }
.other-name { font-weight: 500; margin-right: auto; overflow-wrap: anywhere; }
details.quiet summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
details.quiet[open] summary { margin-bottom: 8px; }
@media (max-width: 1000px) {
  .hero-card { grid-template-columns: minmax(0, 1fr); }
  .hero-shot { order: -1; }
  .next-grid { grid-template-columns: minmax(0, 1fr); }
}
.menu-btn { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* The menu: a drawer from the left, behind the Menu button, so nothing is cut off at the screen's edge. */
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 6px 0 -8px; padding: 0 10px; border: 0; border-radius: 12px; background: none; font: 500 15px/1 var(--sans); color: var(--ink); cursor: pointer; }
  .menu-btn:hover { background: var(--box); }
  .menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .side { position: fixed; z-index: 60; top: 64px; left: 0; bottom: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); width: min(300px, 86vw); padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; background: #fff; border-right: 1px solid var(--line); box-shadow: 30px 0 60px -40px rgba(17, 18, 22, .35); transform: translateX(-100%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s; }
  .side.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
  body.menu-open::after { content: ""; position: fixed; inset: 64px 0 0; z-index: 55; background: rgba(17, 18, 22, .28); }
  .dash .top { position: sticky; top: 0; z-index: 61; background: #fff; border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .side, .side.open { transition: none; } }
.skel-body { display: grid; gap: 12px; padding: 18px; }
.skel-body i { display: block; border-radius: 8px; background: linear-gradient(90deg, #eef0f4 0%, #f7f8fa 40%, #eef0f4 80%); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .skel-body i { animation: shimmer 1.6s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } }
.skel-body .h { height: 150px; border-radius: 12px; }
.skel-body .t { height: 12px; width: 70%; }
.skel-body .t2 { height: 12px; width: 45%; }
.skel-body .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: none; animation: none; }
.skel-body .row i { height: 70px; }
.stage { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: var(--box); color: var(--ink-2); }
.stage::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9aa0ad; }
.stage[data-stage="building"]::before { background: var(--cornflower); }
@media (prefers-reduced-motion: no-preference) { .stage[data-stage="building"]::before { animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .3; } } }
.stage[data-stage="ready"] { background: #eef3ff; color: #23408f; }
.stage[data-stage="ready"]::before { background: var(--accent); }
.stage[data-stage="live"] { background: #e9f6ef; color: #1f6f43; }
.stage[data-stage="live"]::before { background: #1f8f53; }
.stage[data-stage="stuck"] { background: #fdf0ee; color: var(--bad); }
.stage[data-stage="stuck"]::before { background: var(--bad); }
.addr { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.addr a { color: var(--ink); }
.addr .soon { color: var(--muted); }
.dash-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.panel { display: grid; align-content: start; gap: 12px; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .86); border: 1px solid #e6e6ea; }
.panel h2 { margin: 0; font-size: 17px; font-weight: 500; }
.panel p { font-size: 15px; color: var(--ink-2); }
.panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.panel .inline-url { margin-top: 2px; }
.empty-state { display: grid; justify-items: start; gap: 16px; padding: 34px; border-radius: 24px; background: rgba(255, 255, 255, .86); border: 1px solid #e6e6ea; }
.empty-state h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.05; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1040px) {
  .st-grid { grid-template-columns: minmax(0, 600px); }
  .st-side { display: none; }
  /* Narrow screens: the showcase follows the sign-up buttons, on the first screen only. */
  body[data-screen="signup"] .st-side { display: block; position: static; margin-top: 40px; }
  .show { height: auto; min-height: 0; aspect-ratio: 4 / 5; border-radius: 22px; }
  .show-cap { left: 14px; right: 14px; bottom: 16px; gap: 12px; }
  .show-site { width: 44%; border-width: 2px; border-radius: 9px; }
  .show-bars { top: 16px; left: 16px; right: 66px; }
  .show-pause { top: 4px; right: 8px; }
  .site { grid-template-columns: minmax(0, 1fr); }
  .site-shot { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .st-grid { padding-top: 12px; }
  .screen { gap: 18px; }
  .screen h1 { font-size: clamp(36px, 10.6vw, 46px); }
  .screen[data-screen="signup"] h1 { font-size: clamp(44px, 13vw, 56px); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card-btn { min-height: 72px; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 18px; }
  .card-ico { margin: 0; }
  .card-btn:has(.card-s) .card-ico { grid-row: 1 / 3; }
  .card-s { margin-top: 2px; }
  .st-head { margin-bottom: 10px; }
  .ideas { padding: 4px; }
  .idea { padding: 10px; gap: 1px 10px; }
  .idea-name { font-size: 16px; }
  .st-nav .btn { flex: 1; }
  .listing { padding: 18px 16px 14px; border-radius: 18px; }
  input.l-name { font-size: 27px; }
  .l-head { flex-direction: column; gap: 8px; }
  .l-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dash-more { grid-template-columns: minmax(0, 1fr); }
  .site-info { padding: 20px 18px 16px; }
  .site-info h2 { font-size: 30px; }
  .site-shot a, .skel { inset: 14px 14px 0; }
  /* The address stays the button's name for screen readers, out of sight. */
  .acct > button .em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .acct > button { padding-right: 6px; }
}

/* The dashboard runs edge to edge: its header lines up with the side menu. */
.dash .top .wrap { max-width: none; padding-inline: 26px; }
/* Sign in, for someone coming back (signupNotes in start.js) */
.switch { margin: 0; font-size: 15px; color: var(--ink-2); }
.switch a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- dashboard views (Home, Customers) and their ringed icons, Durable-style (31 Oct) ---------- */
/* One column that never grows past the screen: a wide card shrinks or wraps instead (the Web address page scrolled
   sideways on phones until 2 Nov). */
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.view[hidden] { display: none; }
.ring { --c: #1f7a4d; --t: #e9f6ef; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: var(--t); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px color-mix(in srgb, var(--c) 40%, transparent); }
.ring svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ring[data-c="blue"] { --c: #2c4fd6; --t: #eef3ff; }
.ring[data-c="amber"] { --c: #b5541b; --t: #fdf0e6; }
.ring--lg { width: 72px; height: 72px; }
.ring--lg svg { width: 32px; height: 32px; }
.view-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.view-title { display: flex; align-items: center; gap: 18px; min-width: 0; }
.view-title h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4vw, 52px); line-height: 1.02; letter-spacing: -.012em; }
.view-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.view-tools { display: flex; align-items: center; gap: 8px; }
.search { position: relative; display: block; }
.search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
.search input { width: min(260px, 52vw); min-height: 44px; padding: 0 14px 0 38px; border: 1px solid #dfe0e6; border-radius: 12px; background: #fff; font: 400 15px/1 var(--sans); color: var(--ink); }
.search input:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #dfe0e6; border-radius: 12px; background: #fff; font: 500 15px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.tool-btn:hover { border-color: #c9ccd4; color: var(--ink); }
.tool-btn svg, .cp-acts svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cust-loading { color: var(--muted); margin: 0; }
.cust-card { background: #fff; border: 1px solid #e6e6ea; border-radius: 20px; overflow: hidden; }
.cust-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.cust-table th { text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fbfbfc; }
.cust-table th:nth-child(1) { width: 22%; } .cust-table th:nth-child(2) { width: 22%; } .cust-table th:nth-child(4) { width: 15%; } .cust-table th:nth-child(5) { width: 10%; }
.cust-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-table tbody tr { cursor: pointer; transition: background-color .15s ease; }
.cust-table tbody tr:hover { background: #f8f9fb; }
.cust-table tbody tr:last-child td { border-bottom: 0; }
.cust-name { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 0; border: 0; background: none; font: 500 15px/1.2 var(--sans); color: var(--ink); cursor: pointer; text-align: left; }
/* Its own class: the Web address list's .nm row (a grey box) used to sit behind every name here. */
.cust-name .cust-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-name .av, .cp-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #eef3ff; color: #23408f; font-size: 14px; font-weight: 500; }
.cust-name .n { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--box); color: var(--ink-2); font-size: 12px; display: grid; place-items: center; }
.cust-msg { color: var(--muted) !important; }
.cust-when { text-align: right; font-variant-numeric: tabular-nums; }
.cust-none { margin: 0; padding: 22px 16px; color: var(--muted); }
.cust-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: clamp(40px, 8vh, 80px) 24px; background: #fff; border: 1px solid #e6e6ea; border-radius: 24px; }
.cust-empty h2 { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.05; }
.cust-empty p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.cust-empty .hero-actions { margin-top: 8px; }
.cust-panel { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(460px, 100vw); padding: 0; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--ink); box-shadow: -30px 0 60px -40px rgba(17, 18, 22, .3); }
.cust-panel::backdrop { background: rgba(17, 18, 22, .28); }
.cust-panel[open] { display: grid; grid-template-rows: auto auto auto auto 1fr auto; }
.cp-head { display: flex; align-items: center; gap: 14px; padding: 22px 20px 16px; }
.cp-av { width: 48px; height: 48px; font-size: 18px; }
.cp-who { min-width: 0; flex: 1; }
.cp-who h2:focus { outline: 0; }
.cp-who h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }
.cp-who p { margin: 4px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.cp-close { flex: none; align-self: start; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; }
.cp-close:hover { background: var(--box); }
.cp-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.cp-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 18px; border-bottom: 1px solid var(--line); }
.cp-acts .btn { gap: 8px; }
.cp-h { margin: 0; padding: 18px 20px 6px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cp-list { margin: 0; padding: 6px 20px 28px; list-style: none; display: grid; align-content: start; gap: 12px; overflow: auto; }
.cp-list li { background: var(--box); border-radius: 16px; padding: 14px 16px; }
.cp-when { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.cp-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .view-tools { width: 100%; }
  .search { flex: 1; }
  .search input { width: 100%; }
  .cust-card { border-radius: 18px; }
  .cust-table, .cust-table tbody { display: block; }
  .cust-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cust-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .cust-table tbody tr:last-child { border-bottom: 0; }
  .cust-table td { padding: 0; border: 0; }
  .cust-who { grid-column: 1; }
  .cust-table .cust-when { grid-column: 2; grid-row: 1; align-self: center; }
  .cust-email, .cust-msg { grid-column: 1 / -1; padding-left: 42px !important; font-size: 14px; }
  .cust-phone { display: none; }
  .cust-panel { width: 100vw; border-left: 0; }
}

/* ---------- Web address (public/assets/web.js) ---------- */
.w-msg { margin: 0; padding: 12px 16px; border-radius: 14px; background: #eef3ff; color: #23408f; font-size: 15px; }
.w-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: clamp(20px, 3vw, 28px); background: #fff; border: 1px solid #e6e6ea; border-radius: 22px; }
.w-now { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.w-now-text { min-width: 0; }
.w-label { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.w-host { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.05; overflow-wrap: anywhere; }
.w-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.w-acts .tool-btn { text-decoration: none; }
.w-acts svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.w-h { margin: 0; font-size: 20px; font-weight: 500; }
.w-card > .view-sub { margin-top: -8px; }
/* Change your free address (brief 7): the name typed in place, the rest of the address beside it, and whether it's
   free under it. */
.w-edit { display: grid; gap: 12px; }
.w-edit[hidden], .w-acts[hidden], .w-host[hidden] { display: none; }
.w-slug { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; margin-top: -2px; min-width: 0; font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.w-slug input { font: inherit; width: auto; field-sizing: content; min-width: 4ch; max-width: 100%; padding: 2px 8px; margin-left: -9px; border: 1px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); }
.w-slug input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.w-slug input[aria-invalid="true"] { border-color: var(--bad); }
.w-slug span { color: var(--muted); }
.w-slug-msg { display: inline-flex; align-items: center; gap: 7px; min-height: 1.4em; margin: 0; font-size: 14px; color: var(--muted); }
.w-slug-msg[data-tone="ok"] { color: #1f6f43; }
.w-slug-msg[data-tone="ok"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1f7a4d; }
.w-slug-msg[data-tone="bad"] { color: var(--bad); }
.w-live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.w-live p { margin: 0; color: var(--ink-2); }
.w-own { display: grid; gap: 16px; }
.stage[data-stage="live"] { background: #e3f3ea; color: #1f6f43; }
.stage[data-stage="live"]::before { background: #1f7a4d; }
.dm-form { display: grid; gap: 8px; max-width: 560px; }
.dm-form label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.dm-row { display: flex; gap: 8px; }
.dm-row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid #d6d7dd; border-radius: 12px; font: 400 16px/1 var(--sans); color: var(--ink); background: #fff; }
.dm-row input:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.dm-fine { margin: 0; font-size: 14px; color: var(--muted); max-width: 70ch; }
.dm-head { display: grid; gap: 6px; justify-items: start; }
.dm-host { margin: 0; font-family: var(--serif); font-size: 32px; line-height: 1.05; overflow-wrap: anywhere; }
.dm-host a { color: inherit; }
.dm-sum { margin: 0; color: var(--ink-2); }
.dm-at { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-radius: 14px; background: var(--box); font-size: 15px; }
.dm-at p { margin: 0; }
.dm-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.dm-switch select { min-height: 40px; padding: 0 10px; border: 1px solid #d6d7dd; border-radius: 10px; background: #fff; font: 400 14px/1 var(--sans); }
.dm-flow { margin: 0; padding: 0; list-style: none; display: grid; }
.dm-step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.dm-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; background: var(--line); }
.dm-node { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 500; background: #fff; color: var(--muted); box-shadow: inset 0 0 0 1.5px #d6d7dd; }
.dm-step[data-s="now"] .dm-node { background: var(--ink); color: #fff; box-shadow: none; }
.dm-step[data-s="done"] .dm-node { background: #e3f3ea; color: #1f6f43; box-shadow: none; }
.dm-node svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dm-body { display: grid; gap: 8px; justify-items: start; min-width: 0; padding-top: 6px; }
.dm-body h3 { margin: 0; font-size: 17px; font-weight: 500; }
.dm-step[data-s="todo"] .dm-body h3 { color: var(--muted); }
.dm-body > p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 70ch; }
.dm-body code, .dm-forward code { font: 400 13.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--box); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.dm-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.dm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-table th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--muted); padding: 10px 12px; background: #fbfbfc; border-bottom: 1px solid var(--line); }
.dm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.dm-note-row td { white-space: normal; }
.dm-table tr:last-child td { border-bottom: 0; }
.dm-copy { margin-left: 8px; min-height: 30px; padding: 0 10px; border: 1px solid #dfe0e6; border-radius: 8px; background: #fff; font: 500 13px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.dm-copy:hover { border-color: #c9ccd4; }
.dm-pill { display: inline-flex; white-space: nowrap; font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--box); color: var(--ink-2); }
.dm-pill[data-s="ok"] { background: #e3f3ea; color: #1f6f43; }
.dm-pill[data-s="fix"], .dm-pill[data-s="old"] { background: #fdeceb; color: #a32a1f; }
.dm-pill[data-s="partly"] { background: #fdf3e2; color: #8a4f0a; }
.dm-note { margin: 0; font-size: 14px; color: var(--ink-2); }
.dm-note--fix { color: #a32a1f; }
.dm-note-row td { background: #fbfbfc; }
.dm-forward { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dm-foot { display: grid; gap: 8px; justify-items: start; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 16px; }
.dm-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: center; padding: 20px; border-radius: 18px; background: linear-gradient(180deg, #f8f6ff, #fff); border: 1px solid #e7e1fb; }
.dm-plan-name { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; font-size: 18px; font-weight: 500; }
.dm-plan-name .ring { width: 40px; height: 40px; }
.dm-plan-name .ring svg { width: 18px; height: 18px; }
.dm-has { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; color: var(--ink-2); font-size: 15px; }
.dm-buy { display: grid; gap: 8px; justify-items: stretch; min-width: 220px; }
@media (max-width: 760px) {
  .dm-plan { grid-template-columns: minmax(0, 1fr); }
  .dm-row { flex-direction: column; }
  .dm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dm-table tr { display: grid; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .dm-table td { border: 0; padding: 3px 0; white-space: normal; overflow-wrap: anywhere; }
  .dm-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12.5px; }
}

/* ---------- the dashboard's cards, Durable's pattern: ringed icon, action, status line (31 Oct) ---------- */
.next-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border-radius: 22px; }
.next-card .ring { margin-bottom: 6px; }
.next-card p { flex: 1; }
.next-card .pill-btn { margin-bottom: 10px; }
.pill-btn { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--box); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .15s ease; }
.pill-btn:hover { background: #e9e9ec; }
.next-status { display: grid; gap: 8px; width: 100%; margin-top: auto; }
.next-status .bar { display: block; height: 3px; border-radius: 3px; background: #eceef2; overflow: hidden; }
.next-status .bar i { display: block; height: 100%; border-radius: 3px; background: #1f7a4d; }
.next-status .st { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.next-status .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1f7a4d; }
.next-status[data-tone="wait"] .bar i, .next-status[data-tone="wait"] .st::before { background: #c2410c; }
.next-status[data-tone="idle"] .bar i, .next-status[data-tone="idle"] .st::before { background: #9aa0ad; }
/* The ring says the card's state, as Durable's do: green done, amber waiting on you, grey idle, and a turning arc
   while a job runs (brief 3, 2 Nov). The icon itself stays neutral. */
.next-card .ring { --c: var(--ink); --t: #f4f5f7; --st: #d9dbe1; position: relative; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--st); }
.next-card[data-st="ok"] .ring { --st: #1f7a4d; }
.next-card[data-st="wait"] .ring { --st: #c2410c; }
.next-card[data-st="run"] .ring { --st: #e3e5ea; }
.next-card[data-st="run"] .ring::after { content: ""; position: absolute; inset: -4.5px; border-radius: 50%; border: 2px solid transparent; border-top-color: #2c4fd6; border-right-color: #2c4fd6; transform: rotate(20deg); }
@media (prefers-reduced-motion: no-preference) { .next-card[data-st="run"] .ring::after { animation: spin 1s linear infinite; } }
.next-status[data-tone="run"] .bar i, .next-status[data-tone="run"] .st::before { background: #2c4fd6; }
.dash-more:has(#claim-box[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* Add an old website: a small dialog from the account menu (off Home since 2 Nov, brief 3). */
.link-dlg { width: min(460px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 30px 80px -30px rgba(17, 18, 22, .4); }
.link-dlg::backdrop { background: rgba(17, 18, 22, .28); }
.link-dlg[open] { display: grid; gap: 12px; }
.link-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -8px -12px 0 0; }
.link-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; }
.link-dlg label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.link-dlg .inline-url input { width: 100%; }
/* ---------- the Plan page and the menu's Upgrade (31 Oct) ---------- */
.ring[data-c="violet"] { --c: #5b3fd0; --t: #f3f0ff; }
.side-up { color: #5b3fd0; font-weight: 500; }
.side-up:hover { background: #f3f0ff; color: #4a32b0; }
.side-a.side-up[aria-current="page"] { background: #5b3fd0; color: #fff; }
.p-acts { align-items: center; }
.p-acts .dm-fine { flex-basis: 100%; }
#p-has { margin-top: -4px; }

/* ---------- Get a new name: Durable's "Find a domain" grid (public/assets/web.js) ---------- */
.nm-search { position: relative; display: flex; gap: 8px; }
.nm-search > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
.nm-search input { flex: 1 1 0; width: 100%; min-width: 0; min-height: 48px; padding: 0 14px 0 42px; border: 1px solid #d6d7dd; border-radius: 14px; background: #fff; font: 400 16px/1 var(--sans); color: var(--ink); }
.nm-search input:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.nm-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* One line a name, as Durable's list (brief 7): a free one with its arrow, a taken one grey with "Taken". */
.nm { min-height: 56px; border-radius: 14px; background: var(--box); }
.nm-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.nm-btn:hover { background: #ebebee; }
.nm-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nm-name { font-weight: 500; overflow-wrap: anywhere; }
/* Too long for its line: smaller type (fit() in web.js), never a mid-word break. */
.nm-grid .nm-name { flex: 1; min-width: 0; overflow: hidden; overflow-wrap: normal; }
.nm-grid .nm-name.fit-long, .nm-pick-name > span.fit-long { overflow: visible; overflow-wrap: anywhere; }
.nm-st { font-size: 14px; color: var(--muted); }
.nm-st--ok { display: inline-flex; align-items: center; gap: 7px; color: #1f6f43; }
.nm-st--ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1f7a4d; }
.nm--taken { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; }
.nm--taken .nm-name { color: var(--muted); font-weight: 400; }
.nm--wait { display: grid; align-content: center; gap: 8px; padding: 12px 16px; }
.nm--wait span { display: block; height: 12px; width: 60%; border-radius: 6px; background: linear-gradient(90deg, #e6e7eb 0%, #f2f3f5 40%, #e6e7eb 80%); background-size: 200% 100%; }
.nm--wait .nm-st { width: 30%; }
@media (prefers-reduced-motion: no-preference) { .nm--wait span { animation: shimmer 1.6s linear infinite; } }
.nm-pick-in { display: grid; gap: 10px; padding: 18px 20px; border-radius: 18px; border: 1px solid #d9eadf; background: linear-gradient(180deg, #f3faf6, #fff); }
.nm-pick-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.nm-pick-name > span:first-child { min-width: 0; max-width: 100%; overflow: hidden; }
.nm-pick-name .stage { font-family: var(--sans); }
.nm-pick .btn { text-decoration: none; }
@media (max-width: 760px) { .nm-grid { grid-template-columns: minmax(0, 1fr); } .nm-search .btn { padding: 0 14px; } }
/* On a phone, Search is an arrow beside the box, so the box keeps its room for the name; the word stays for screen
   readers, and the box's own magnifier goes, as the arrow says it all. */
.nm-go svg { display: none; }
@media (max-width: 480px) {
  .nm-search > svg { display: none; }
  .nm-search input { padding-left: 14px; }
  .nm-search .nm-go { flex: none; width: 52px; padding: 0; }
  .nm-go svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nm-go span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.next-names { margin: 0 0 4px; padding: 0; list-style: none; display: grid; gap: 6px; width: 100%; }
/* In a narrow card, Available drops under the name rather than squeezing it into a mid-word break. */
.next-names li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; font-size: 15px; }
.next-names .nm-name { font-weight: 400; color: var(--ink); }

/* ---------- Customers: add, import, filter, delete (brief 8, 2 Nov; public/assets/dashboard.js) ---------- */
.view-tools { flex-wrap: wrap; justify-content: flex-end; }
.tool-ico { width: 44px; padding: 0; justify-content: center; }
.tool-ico.on { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cust-new { min-height: 44px; gap: 6px; }
.cust-new svg, .cust-empty .tool-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cust-filter { position: relative; }
.cust-filters { position: absolute; z-index: 50; right: 0; top: calc(100% + 8px); width: min(260px, calc(100vw - 32px)); padding: 8px; display: grid; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px rgba(30, 50, 130, .14); }
.cust-filters[hidden] { display: none; }
.cust-filters fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
.cust-filters fieldset[hidden] { display: none; }
.cust-filters legend { padding: 8px 8px 4px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cust-filters label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 8px; font-size: 15px; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.cust-filters label:hover, .cust-filters label:has(input:checked) { background: var(--box); }
.cust-filters input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; }
.cust-empty .hero-actions { justify-content: center; }
.cust-empty .tool-btn { gap: 6px; }
/* New customer, a side panel like one person's. */
.nc-form { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; }
.nc-panel[open] { display: block; }
.nc-fields { display: grid; align-content: start; gap: 6px; padding: 4px 20px 20px; overflow: auto; }
.nc-fields label { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.nc-fields input, .nc-fields textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #d6d7dd; border-radius: 12px; background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.nc-fields textarea { min-height: 96px; padding: 12px 14px; resize: vertical; }
.nc-fields input:focus, .nc-fields textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.nc-fields [aria-invalid="true"] { border-color: var(--bad); }
.nc-foot { display: flex; gap: 8px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.nc-foot .btn { flex: 1; }
/* Import contacts. */
.imp-dlg { width: min(520px, calc(100vw - 32px)); }
.imp-drop { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 1.5px dashed #cfd2da; border-radius: 16px; background: #fafafb; text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.imp-drop[hidden] { display: none; }
.imp-drop svg { width: 26px; height: 26px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.imp-drop span { color: var(--ink); }
.imp-drop small { font-size: 13px; color: var(--muted); }
.imp-drop.over, .imp-drop:hover { border-color: var(--ink); background: #fff; }
.imp-drop:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.imp-drop.busy { opacity: .6; pointer-events: none; }
.imp-check { display: grid; gap: 10px; min-width: 0; }
.imp-check[hidden] { display: none; }
.imp-sum { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.imp-mini { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.imp-mini td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-mini td:last-child { width: 56px; padding-right: 0; text-align: right; }
.imp-tag { font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 999px; background: var(--box); color: var(--ink-2); }
.imp-acts { display: flex; justify-content: flex-end; gap: 8px; }
/* One person: their note, and Delete, asked once in place. */
.cp-note { margin: 0; padding: 14px 20px 0; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-note[hidden] { display: none; }
.cp-foot { display: grid; gap: 10px; padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.cp-del { justify-self: start; color: var(--bad); }
.cp-del[hidden] { display: none; }
.cp-confirm { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #fdf0ee; }
.cp-confirm[hidden] { display: none; }
.cp-confirm p { margin: 0; color: #8a2a1f; font-size: 15px; overflow-wrap: anywhere; }
.cp-confirm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.btn--bad { background: #b42318; } .btn--bad:hover { background: #8a1c12; }
/* Added always shows its whole date; between the phone layout and a wide screen, Phone moves to the person's panel. */
.cust-table th:nth-child(5) { width: 96px; }
@media (min-width: 761px) and (max-width: 1100px) { .cust-table th:nth-child(4), .cust-table td.cust-phone { display: none; } }
@media (max-width: 760px) {
  .view-tools .search { flex: 1 1 100%; }
  .view-tools .cust-new { flex: 1; justify-content: center; }
}