/* 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; gap: 22px; align-content: start; min-width: 0; }
.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; }

.st-progress { height: 3px; background: rgba(17, 18, 22, .1); border-radius: 3px; overflow: hidden; margin-bottom: 18px; max-width: 560px; }
.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 { justify-self: start; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0 8px 0 0; min-height: 44px; margin: -8px 0 6px -2px; font: 500 15px/1 var(--sans); color: var(--muted); cursor: pointer; }
.st-back svg { width: 16px; height: 16px; }
.st-back:hover { color: var(--ink); }

/* 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: 4px; text-align: left; padding: 22px 22px 24px; min-height: 172px; 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: 18px; color: var(--ink); }
.card-ico svg { width: 22px; height: 22px; }
.card-t { font-size: 18px; font-weight: 500; }
.card-s { 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; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { min-height: 40px; padding: 0 14px; 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); }
.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: 16px; 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-hint { margin-left: 4px; }
@media (pointer: coarse) { .drop-hint { display: 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-steps { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; max-width: 420px; }
.build-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 16px; color: var(--muted); border-bottom: 1px solid var(--line); transition: color .3s ease; }
.build-steps li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #cfd2da; flex: none; transition: background-color .3s ease, border-color .3s ease; }
.build-steps li.now { color: var(--ink); }
.build-steps li.now::before { border-color: var(--ink); border-top-color: transparent; animation: spin 1s linear infinite; }
.build-steps li.done { color: var(--ink); }
.build-steps li.done::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .build-steps li.now::before { 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: 0; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 18px; }
  .card-ico { grid-row: 1 / 3; margin: 0; }
  .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) ---------- */
.view { display: grid; 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; }
.cust-name .nm { overflow: hidden; text-overflow: ellipsis; }
.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 1fr; }
.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; 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; }
.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; }
.dash-more:has(#claim-box[hidden]) { grid-template-columns: minmax(0, 1fr); }
.link-line summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; list-style: none; }
.link-line summary::-webkit-details-marker { display: none; }
.link-line summary:hover { color: var(--ink); }
.link-line[open] { display: grid; gap: 10px; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid #e6e6ea; }
.link-line[open] summary { color: var(--ink); text-decoration: none; font-weight: 500; }
.link-line p { margin: 0; font-size: 15px; color: var(--ink-2); }
/* ---------- 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; 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; }
.nm { min-height: 64px; border-radius: 14px; background: var(--box); }
.nm-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 4px 12px; width: 100%; min-height: 64px; padding: 12px 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 { grid-row: 1 / 3; grid-column: 2; 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; }
.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: grid; gap: 4px; padding: 12px 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; overflow-wrap: anywhere; }
.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; } }
.next-names { margin: 0 0 4px; padding: 0; list-style: none; display: grid; gap: 6px; width: 100%; }
.next-names li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; }
.next-names .nm-name { font-weight: 400; color: var(--ink); }