/* Shared admin + onboarding styles. "High Desert": warm sand + ink, one rust
   accent, sage for live/open/done. Fonts are self-hosted (CSP is 'self'). */
@font-face { font-family: "Anton"; src: url("/admin/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/admin/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/admin/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --sand-50: #fbf7f0; --sand-100: #f3ece0; --sand-200: #efe6d7; --sand-300: #e8dfd0;
  --sand-400: #e6d8c3; --sand-450: #ecdfcc; --sand-500: #d9cfbf; --sand-600: #cbbfad;
  --ink-900: #1f1a16; --ink-800: #2c2621; --ink-600: #5a5047; --ink-500: #7a6f63;
  --ink-400: #a39888; --ink-300: #b8ad9f; --ink-200: #e4dccf;
  --rust-600: #c2461f; --rust-400: #e0835f;
  --sage-600: #5f6e53; --sage-400: #a9b89a; --sage-100: #e3e7da;
  --line: rgba(31, 26, 22, .14); --line-dark: rgba(243, 236, 224, .18);
  --display: "Anton", "Oswald", Impact, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .3, 1);
  /* Older names, still used by the onboarding pages. */
  --ink: var(--ink-900); --muted: var(--ink-500); --accent: var(--rust-600); --surface: var(--sand-50);
  --sunk: var(--sand-200); --radius: 16px; --ok: var(--sage-600); --warn-bg: #f6e2d6; --warn-ink: #8a3415;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand-100); color: var(--ink-900); font: 400 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ink-900); }
a:hover { color: var(--rust-600); }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--rust-600); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boot { padding: 48px; text-align: center; color: var(--ink-500); }

/* ---------- type ---------- */
.h1 { font: 400 64px/.9 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.h1--dash { font-size: 88px; }
.h2 { font: 400 48px/.92 var(--display); text-transform: uppercase; }
.h3 { font: 400 28px/1 var(--display); text-transform: uppercase; }
.h3--big { font-size: 36px; }
.h4 { font: 400 20px/1 var(--display); text-transform: uppercase; }
.title { font: 400 40px/.95 var(--display); text-transform: uppercase; }
.card-title { font: 400 20px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.eyebrow { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.label, .field__label { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.meta { font: 400 12px var(--mono); color: var(--ink-500); }
.mono-s { font: 400 12.5px/1.6 var(--mono); }
.muted { color: var(--ink-500); }
.rust { color: var(--rust-600); }
.hint { font-size: 13.5px; color: var(--ink-500); }
.hint--narrow { max-width: 300px; text-align: right; }
.ta-r { text-align: right; justify-content: flex-end; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.empty { padding: 28px 4px; color: var(--ink-500); text-align: center; }
.on-dark-muted { color: var(--ink-300); }
.formerr { background: #f6e2d6; color: #8a3415; border-radius: 12px; padding: 10px 14px; font-weight: 500; }
.err { display: block; color: var(--rust-600); font: 500 12.5px var(--body); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.err-inline { font: 500 12px var(--body); color: var(--rust-600); }

/* ---------- layout bits ---------- */
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--s { gap: 6px; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.rows > * { padding: 12px 0; border-top: 1px solid var(--line); }
.rows > *:first-child { border-top: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.grid-2--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.span-2 { grid-column: 1 / -1; }
.fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fields-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.narrow { max-width: 640px; }

.card { background: var(--sand-50); border-radius: 22px; padding: 24px; }
.card--flush { padding: 6px 24px; }
.card--list { padding: 8px 24px; }
.card--ink { background: var(--ink-900); color: var(--sand-100); }

/* ---------- controls ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 12px;
  background: var(--sand-200); color: var(--ink-900); font: 400 15px var(--body); outline: 0; transition: border-color .15s;
}
:where(textarea) { height: auto; min-height: 64px; padding: 11px 12px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--ink-900); }
input::placeholder, textarea::placeholder { color: var(--ink-400); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; }
.card--ink textarea, .card--ink input { background: var(--ink-800); color: var(--sand-100); }
.card--ink textarea:focus, .card--ink input:focus { border-color: var(--ink-400); }
.card--ink ::placeholder { color: var(--ink-400); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 20px; border: 0; border-radius: 999px;
  font: 600 14.5px var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; background: var(--sand-300); color: var(--ink-900); transition: filter .15s; }
.btn:hover { filter: brightness(.92); color: inherit; }
.btn:disabled { opacity: .55; cursor: default; filter: none; }
.btn--s { height: 34px; padding: 0 14px; font-size: 13px; }
.btn--xs { height: 28px; padding: 0 11px; font-size: 12px; }
.btn--block { width: 100%; }
.btn--ink { background: var(--ink-900); color: var(--sand-100); }
.btn--ink:hover { color: var(--sand-100); }
.btn--rust { background: var(--rust-600); color: var(--sand-50); }
.btn--rust:hover { color: var(--sand-50); }
.btn--sand { background: var(--sand-300); }
.btn--light { background: var(--sand-50); color: var(--ink-900); }
.btn--outline { background: transparent; border: 1.5px solid var(--ink-900); }
.btn--outline:hover { background: rgba(31, 26, 22, .05); filter: none; }
.btn--outline-rust { background: transparent; border: 1.5px solid var(--rust-600); color: var(--rust-600); }
.btn--outline-rust:hover { background: rgba(194, 70, 31, .06); filter: none; color: var(--rust-600); }
.btn--ghost { background: transparent; color: var(--ink-600); }
.btn--ghost:hover { background: rgba(31, 26, 22, .06); filter: none; }
.btn--danger { background: transparent; border: 1.5px solid var(--rust-600); color: var(--rust-600); }
.btn--danger:hover { background: rgba(194, 70, 31, .06); filter: none; color: var(--rust-600); }
.link { background: none; border: 0; padding: 0; font: 500 13.5px var(--body); color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link--rust { color: var(--rust-600); text-decoration: none; font-weight: 600; }
.iconbtn { width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--sand-200); cursor: pointer; display: inline-grid; place-items: center; font: 600 14px var(--body); }
.iconbtn:hover { filter: brightness(.94); }
.iconbtn:disabled { opacity: .4; cursor: default; }
.confirm { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 500; font-size: 13.5px; }

.switch { position: relative; width: 44px; height: 26px; flex: none; border: 0; padding: 0; border-radius: 999px; background: var(--sand-600); cursor: pointer; transition: background .2s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--sand-50); transition: left .18s var(--ease); }
.switch[aria-checked="true"] { background: var(--sage-600); }
.switch[aria-checked="true"] span { left: 21px; }
.toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }

.seg { display: inline-flex; flex-wrap: wrap; background: var(--sand-300); border-radius: 999px; padding: 4px; gap: 2px; }
.seg__btn { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font: 600 13.5px var(--body); cursor: pointer; color: var(--ink-900); white-space: nowrap; }
.seg__btn.is-on { background: var(--ink-900); color: var(--sand-100); }
.seg__btn:disabled { cursor: default; opacity: .6; }
.seg--s .seg__btn { padding: 6px 12px; font-size: 12.5px; }
.card--ink .seg { background: var(--ink-800); }
.card--ink .seg__btn { color: var(--ink-200); }

.pills { display: inline-flex; gap: 3px; background: var(--sand-200); border-radius: 999px; padding: 3px; }
.pills__btn { border: 0; background: transparent; padding: 5px 9px; border-radius: 999px; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); cursor: pointer; }
.pills__btn:hover { color: var(--ink-900); }
.pills__btn.is-on { color: var(--sand-50); }
.is-new.pills__btn, .pills__btn.is-new { background: var(--rust-600); }
.pills__btn.is-contacted, .pills__btn.is-planned { background: var(--ink-900); }
.pills__btn.is-won, .pills__btn.is-done { background: var(--sage-600); }
.pills__btn.is-lost, .pills__btn.is-declined { background: var(--sand-600); color: var(--ink-900); }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: var(--sand-300); color: var(--ink-900); }
.chip--rust { background: var(--rust-600); color: var(--sand-50); }
.chip--ink { background: var(--ink-900); color: var(--sand-100); }
.chip--sage { background: var(--sage-100); color: var(--sage-600); }
.chip--sand { background: var(--sand-300); }
.chip--outline { background: transparent; border: 1px solid var(--ink-900); }
.chip--outline-light { background: transparent; border: 1px solid var(--ink-400); color: var(--ink-200); }
.chip--state.is-live, .chip--state.is-done { background: var(--sage-600); color: var(--sand-50); }
.chip--state.is-scheduled, .chip--state.is-planned { background: var(--ink-900); color: var(--sand-50); }
.chip--state.is-expired, .chip--state.is-used-up, .chip--state.is-declined { background: var(--sand-600); color: var(--ink-900); }
.chip--state.is-off { background: transparent; border: 1px solid var(--ink-500); color: var(--ink-500); }
.chip--state.is-new { background: var(--rust-600); color: var(--sand-50); }
.chipbtn { border: 1.5px solid var(--ink-900); background: transparent; border-radius: 999px; padding: 5px 12px; font: 600 12px var(--mono); letter-spacing: .04em; cursor: pointer; }
.chipbtn.is-on { background: var(--ink-900); color: var(--sand-100); }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand, var(--rust-600)); color: var(--brand-on, var(--sand-50)); font: 600 10.5px var(--mono); }

.copybox { display: flex; align-items: center; gap: 10px; background: var(--sand-200); border-radius: 12px; padding: 8px 8px 8px 14px; }
.copybox code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 400 12.5px var(--mono); }
.recovery { background: var(--sand-200); border-radius: 12px; padding: 14px; font: 400 14px/1.7 var(--mono); }
.totp-key { letter-spacing: .08em; }
.qr { align-self: flex-start; background: #fff; border-radius: 16px; padding: 10px; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; }
.toast { position: fixed; z-index: 30; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ink-900); color: var(--sand-100); padding: 11px 18px; border-radius: 999px; font-weight: 500; box-shadow: 0 16px 30px -18px rgba(31, 26, 22, .7); max-width: calc(100vw - 32px); }

.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 400 18px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.wordmark__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rust-600); flex: none; }
.wordmark--light { color: var(--sand-100); }
.wordmark--center { align-self: center; }

/* ---------- sign in ---------- */
.auth { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding: 32px 16px; }
.auth__card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.auth__card .link { align-self: center; }

/* A client's own sign-in: their logo, name and colors above the form, "Powered by
   Collin Mallery" below. Colors come from --brand-* (set by applyBrand). */
.auth--brand { background: var(--brand-surface, var(--sand-100)); color: var(--brand-surface-on, var(--ink-900)); gap: 20px; }
.auth__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.auth__logo { width: 88px; height: 88px; border-radius: 22px; background: var(--brand, var(--ink-900)); color: var(--brand-on, var(--sand-50)); display: grid; place-items: center; font: 400 34px var(--display); box-shadow: 0 18px 34px -22px rgba(31, 26, 22, .8); }
.auth__logo--img { background: var(--sand-50); object-fit: contain; }
.auth__biz { font: 400 26px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; max-width: 420px; overflow-wrap: anywhere; }
.auth--brand .auth__card { color: var(--ink-900); box-shadow: 0 28px 56px -34px rgba(20, 20, 30, .55); }
.auth--brand .btn--ink { background: var(--brand, var(--ink-900)); color: var(--brand-on, var(--sand-100)); }
.auth--brand .btn--ink:hover { color: var(--brand-on, var(--sand-100)); filter: brightness(1.08); }
.auth--brand :focus-visible { outline-color: var(--brand-accent, var(--brand, var(--rust-600))); }
.auth__powered { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; color: inherit; text-decoration: none; opacity: .72; }
.auth__powered:hover { color: inherit; opacity: 1; }
.auth__powered .wordmark { font-size: 14px; gap: 7px; }
.auth__powered .wordmark__dot { width: 7px; height: 7px; }
.auth__by, .auth__url { font: 400 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.auth__url { text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- account page ---------- */
.plainbar { display: flex; align-items: center; gap: 12px; padding: 18px 40px; }
.page__main { padding: 24px 40px 64px; display: flex; flex-direction: column; gap: 16px; }
.page__main > .grid-2 { margin-top: 12px; }

/* =====================================================================
   Super admin
   ===================================================================== */
.dashbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 16px 40px; background: var(--ink-900); color: var(--sand-100); }
.dashbar__nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.dashbar__link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--sand-100); font: 500 13.5px var(--body); padding: 7px 10px; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.dashbar__link:hover { background: rgba(243, 236, 224, .1); color: var(--sand-100); }
.dashbar__me { display: flex; gap: 2px; padding-left: 10px; border-left: 1px solid var(--line-dark); }
.dashbar__me .dashbar__link { color: var(--ink-300); }
.notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 40px; background: var(--rust-600); color: var(--sand-50); }
.notice .btn { margin-left: auto; }
.dash__main { padding: 40px 40px 96px; display: flex; flex-direction: column; gap: 72px; }
.dash__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.dash__head .meta { margin-bottom: 8px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; }
.stat { background: var(--sand-50); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 130px; }
.stat__n { font: 400 40px/.9 var(--display); }
.stat__label { font-size: 12.5px; color: var(--ink-600); }
.stat--rust .stat__n { color: var(--rust-600); }
.stat--sage .stat__n { color: var(--sage-600); }
.dash__sec { scroll-margin-top: 80px; display: flex; flex-direction: column; gap: 18px; }
.sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.sec__head .eyebrow { margin-bottom: 6px; }
.sec__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* preview requests table */
.table__head, .table__row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.1fr) minmax(220px, 2fr) auto; gap: 20px; align-items: start; }
.table__head { padding: 14px 0 10px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); border-bottom: 1px solid var(--line); }
.table__row { padding: 16px 0; border-top: 1px solid var(--line); }
.table__head + .table__row { border-top: 0; }
.cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cell a { text-decoration: none; overflow-wrap: anywhere; }
.cell .chip { align-self: flex-start; margin-bottom: 4px; }
.cell p { color: var(--ink-600); }

/* change requests */
.req { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.req:first-child { border-top: 0; }
.req__who { display: flex; flex-direction: column; gap: 4px; }

/* clients */
.addclient { display: flex; align-items: center; gap: 6px; background: var(--sand-50); border-radius: 999px; padding: 5px 5px 5px 6px; }
.addclient input { height: 34px; border-radius: 999px; background: var(--sand-200); width: 190px; }
.addclient__slug { display: inline-flex; align-items: center; gap: 4px; }
.addclient__slug input { width: 130px; text-align: right; font: 400 13px var(--mono); }
.addclient .err { display: none; }
.clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: 16px; }
.client { display: flex; flex-direction: column; gap: 14px; outline: 2px solid transparent; transition: outline-color .15s; }
.client.is-selected { outline-color: var(--ink-900); }
.client__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.client__name { font: 400 30px/1 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.client__domains { display: flex; flex-direction: column; gap: 2px; }
.client__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.status-select { width: auto; height: 28px; padding: 0 10px; border-radius: 999px; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--sand-300); cursor: pointer; }
.status-select.is-live { background: var(--sage-600); color: var(--sand-50); }
.status-select.is-paused { background: #f6e2d6; color: #8a3415; }
.status-select.is-transferred { background: transparent; border: 1.5px solid var(--ink-900); }
.tiles3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { background: var(--sand-200); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile strong { font-weight: 600; font-size: 14px; }
.bar { height: 6px; border-radius: 999px; background: var(--sand-500); overflow: hidden; margin-top: 6px; }
.bar__fill { display: block; height: 100%; width: 0; background: var(--sage-600); border-radius: 999px; transition: width .3s var(--ease); }
.bar__fill.w1 { width: 16.66%; } .bar__fill.w2 { width: 33.33%; } .bar__fill.w3 { width: 50%; }
.bar__fill.w4 { width: 66.66%; } .bar__fill.w5 { width: 83.33%; } .bar__fill.w6 { width: 100%; }
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form input { flex: 1 1 200px; height: 34px; }

/* onboarding panel */
.onboard { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; scroll-margin-top: 80px; }
.onboard__left { display: flex; flex-direction: column; gap: 6px; }
.onboard__left > .stack { margin-top: 14px; }
.onboard__right { display: flex; flex-direction: column; }
.pay { background: var(--ink-900); color: var(--sand-100); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pay .eyebrow { color: var(--rust-400); }
.pay__line { font: 500 21px/1.35 var(--body); }
.pay__notes { font: 400 12px var(--mono); color: var(--ink-300); padding-top: 10px; border-top: 1px solid var(--line-dark); }
.codecard { background: var(--rust-600); color: var(--sand-50); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.codecard__note { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.codecard__digits { font: 400 64px/1 var(--display); letter-spacing: .08em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.after { display: flex; flex-direction: column; gap: 14px; border-top: 1.5px solid var(--ink-900); padding-top: 16px; margin-top: 4px; }
.terms { font-size: 13px; color: var(--ink-600); background: var(--sand-200); border-radius: 12px; padding: 12px; }
.emails li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.emails li:first-child { border-top: 0; }
.more summary { cursor: pointer; font-weight: 500; color: var(--ink-600); font-size: 13.5px; margin-bottom: 8px; }
.onboard input[type=date] { width: auto; height: 34px; }

/* plans */
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.plancard { background: var(--sand-50); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 8px; transition: opacity .2s; }
.plancard--star { background: var(--ink-900); color: var(--sand-100); outline: 2px solid var(--rust-600); }
.plancard--star .label, .plancard--star .meta, .plancard--star .muted { color: var(--ink-300); }
.plancard--star .plancard__inc { color: var(--ink-200); }
.plancard.is-off { opacity: .5; }
.plancard__price { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.plancard__price span { font: 400 52px/.9 var(--display); }
.plancard__price small { font-size: 13px; color: var(--ink-500); }
.plancard__setup { font-weight: 500; font-size: 14px; }
.plancard__inc { font-size: 13px; color: var(--ink-600); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.plancard__inc li::before { content: "· "; }
.plancard__foot { margin-top: 10px; font-size: 12.5px; flex-wrap: nowrap; gap: 6px; }
.star { color: var(--rust-600); font-weight: 600; font-size: 12.5px; }
.plancard--star .star { color: var(--rust-400); }
.editor { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
.editor__left, .editor__right { display: flex; flex-direction: column; gap: 14px; }
.inclist { display: flex; flex-direction: column; gap: 6px; }
.inclist li { display: flex; gap: 6px; align-items: center; }
.inclist input { height: 38px; }
.editor__right .row input { flex: 1; height: 38px; }

/* discount codes */
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.code { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 16px 10px; margin: 0 -10px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 12px; width: calc(100% + 20px); }
.code:first-child { border-top: 0; }
.code:hover, .code.is-selected { background: var(--sand-200); }
.code__id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.code__name { font: 600 15px var(--mono); letter-spacing: .04em; }
.code__what { display: flex; flex-direction: column; gap: 3px; }
.code__what strong { font-weight: 600; }
.codepreview { background: var(--sand-200); border-radius: 12px; padding: 10px 14px; font: 400 12.5px var(--mono); }

/* settings */
.settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.settings-col { gap: 14px; }
.setting { display: flex; flex-direction: column; gap: 7px; }
.masked { display: flex; align-items: center; gap: 6px; background: var(--sand-200); border-radius: 12px; padding: 5px 5px 5px 12px; min-height: 44px; }
.masked code { flex: 1; min-width: 0; font: 400 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.changelog { display: flex; flex-direction: column; gap: 12px; }
.changelog li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-dark); font-size: 13px; }
.changelog li:first-child { border-top: 0; }
.changelog .meta, .changelog .hint { color: var(--ink-300); }

/* =====================================================================
   Client admin
   ===================================================================== */
.tenant { min-height: 100vh; display: flex; flex-direction: column; }
.support { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 40px; background: var(--rust-600); color: var(--sand-50); position: sticky; top: 0; z-index: 6; }
.support--paused { background: var(--ink-900); position: static; }
.support--paused p { flex: 1 1 320px; }
.tenant__body { flex: 1; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.side { background: var(--brand-side, var(--ink-900)); color: var(--ink-200); padding: 24px 18px; display: flex; flex-direction: column; gap: 28px; }
.side__brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.side__tile { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--brand, var(--rust-600)); color: var(--brand-on, var(--sand-50)); display: grid; place-items: center; font: 400 17px var(--display); }
.side__tile { box-shadow: inset 0 0 0 1px rgba(251, 247, 240, .2); }
.side__tile--img { background: var(--sand-50); object-fit: contain; }
.side__name { font: 400 17px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--sand-100); overflow-wrap: anywhere; }
.side__by { font: 400 10px var(--mono); color: var(--ink-400); margin-top: 3px; }
.side__nav { display: flex; flex-direction: column; gap: 2px; }
.side__nav a { display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-radius: 10px; color: var(--ink-200); text-decoration: none; font: 500 15px var(--body); }
.side__nav a:hover { background: rgba(243, 236, 224, .08); color: var(--sand-100); }
.side__nav a[aria-current="page"] { background: var(--sand-100); color: var(--ink-900); }
.side__foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 8px; }
.side__link { background: none; border: 0; padding: 0; color: var(--ink-200); font: 500 13px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.side__link:hover { color: var(--sand-100); }
.main { padding: 32px 44px 72px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.main__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }

.grid-biz { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.hours { display: flex; flex-direction: column; gap: 8px; }
.hours__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.hours__val { min-width: 0; }
.hours__times { display: flex; align-items: center; gap: 6px; }
.hours__times input { height: 38px; padding: 0 8px; }
.hours__closed { display: flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 12px; background: var(--sand-200); color: var(--ink-500); }

.svc { display: grid; grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.svc:first-child { border-top: 0; }
.svc.is-hidden > input { opacity: .55; }
.svc__order { display: flex; gap: 4px; }
.svc__toggle { display: flex; align-items: center; gap: 8px; min-width: 104px; }
.svc__state { font-size: 13px; color: var(--ink-500); }
.svc__more { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 8px; }
.iconbtn--more { background: transparent; font-size: 18px; }
.svc--add { grid-template-columns: minmax(0, 1fr) auto; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.photo { padding: 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.photo img { width: 100%; height: 170px; object-fit: cover; border-radius: 14px; background: repeating-linear-gradient(135deg, var(--sand-400) 0 12px, var(--sand-450) 12px 24px); }
.photo input { height: 40px; }
.upload { min-height: 270px; border: 1.5px solid var(--ink-900); border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; text-align: center; padding: 16px; transition: background .15s; }
.upload:hover { background: rgba(31, 26, 22, .04); }
.upload:focus-within { outline: 2px solid var(--rust-600); outline-offset: 2px; }
.upload__plus { font: 600 26px/1 var(--body); }
.upload__title { font-weight: 600; font-size: 16px; }

.lead { display: grid; grid-template-columns: 10px minmax(160px, 220px) minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.lead:first-child { border-top: 0; }
.lead__dot { width: 8px; height: 8px; border-radius: 50%; }
.lead.is-new .lead__dot { background: var(--rust-600); }
.lead__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lead__who a { text-decoration: none; overflow-wrap: anywhere; }
.lead__msg { display: flex; flex-direction: column; gap: 2px; color: var(--ink-600); }
.lead.is-new .lead__msg p { color: var(--ink-900); }

.creq { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.creq:first-child { border-top: 0; }
.creq > div { display: flex; flex-direction: column; gap: 3px; }
.creq__title { font-weight: 500; font-size: 15.5px; }

.btiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.btile { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; min-height: 120px; }
.btile__plan { font: 400 36px/1 var(--display); text-transform: uppercase; }
.btile__v { font-weight: 600; font-size: 17px; }
.card--ink .label { color: var(--ink-300); }

.member { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.member:first-child { border-top: 0; }
.member.is-pending { opacity: .75; }
.member__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sand-300); display: grid; place-items: center; font: 600 12px var(--mono); }

.act { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, auto) 80px; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.act:first-child { border-top: 0; }
.act__what { font-weight: 500; }
.act .chip { justify-self: end; }

/* walkthrough */

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .h1--dash { font-size: 64px; }
  .settings { grid-template-columns: 1fr 1fr; }
  .onboard, .editor, .split, .grid-biz { grid-template-columns: 1fr; }
  .btiles { grid-template-columns: 1fr 1fr; }
  .table__head { display: none; }
  .table__row { grid-template-columns: 1fr 1fr; }
  .table__row .cell:nth-child(3) { grid-column: 1 / -1; }
  .table__row .cell:last-child { grid-column: 1 / -1; align-items: flex-start; }
}
@media (max-width: 800px) {
  .dashbar { padding: 12px 20px; flex-wrap: wrap; }
  .dashbar__nav { order: 3; width: 100%; margin: 0 -10px; }
  .dashbar__me { margin-left: auto; border: 0; }
  .notice, .support { padding: 12px 20px; }
  .dash__main { padding: 28px 20px 72px; gap: 56px; }
  .stats { grid-template-columns: 1fr 1fr; width: 100%; }
  .h1, .h1--dash { font-size: 52px; }
  .h2 { font-size: 40px; }
  .card { padding: 20px; border-radius: 20px; }
  .card--flush, .card--list { padding: 4px 18px; }
  .settings, .grid-2, .grid-2--wide { grid-template-columns: 1fr; }
  .fields-2, .fields-3, .facts { grid-template-columns: 1fr; }
  .req { grid-template-columns: 1fr; gap: 8px; }
  .tiles3 { grid-template-columns: 1fr 1fr; }
  .tiles3 .tile:last-child { grid-column: 1 / -1; }
  .addclient { border-radius: 20px; width: 100%; }
  .addclient input { flex: 1 1 100%; width: auto; }
  .code { grid-template-columns: 1fr; gap: 6px; }
  .hint--narrow { text-align: left; }

  .tenant__body { grid-template-columns: minmax(0, 1fr); }
  .side { padding: 14px 16px; gap: 12px; position: sticky; top: 0; z-index: 4; min-width: 0; }
  .side__nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .side__nav a { flex: none; padding: 8px 12px; gap: 6px; font-size: 14px; }
  .side__foot { display: none; }
  .main { padding: 24px 20px 64px; }
  .svc:not(.svc--add) { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .svc > input[name="name"] { grid-column: 2; grid-row: 1; }
  .svc > .iconbtn--more { grid-column: 3; grid-row: 1; }
  .svc > input[name="price_note"] { grid-column: 2; grid-row: 2; }
  .svc > .svc__toggle { grid-column: 3; grid-row: 2; }
  .svc__more { grid-column: 1 / -1; }
  .svc__toggle { min-width: 0; }
  .svc__state { display: none; }
  .lead { grid-template-columns: 10px minmax(0, 1fr); }
  .lead__msg, .lead__actions { grid-column: 2; }
  .member { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .member > :last-child { grid-column: 2 / -1; justify-self: start; }
  .act { grid-template-columns: 1fr auto; }
  .btiles { grid-template-columns: 1fr; }
  .plainbar { padding: 14px 20px; }
  .page__main { padding: 16px 20px 56px; }
}

/* ---------- client overview ---------- */
.ov { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ov__main, .ov__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ov__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.ov__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hostpill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--sand-50); font: 400 13px var(--mono); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rust-600); flex: none; display: inline-block; }
.dot--open { background: var(--sage-600); }
.today { display: flex; flex-direction: column; gap: 6px; background: var(--ink-900); color: var(--sand-100); transition: background .2s; }
.today .label { color: var(--ink-300); }
.today--open { background: var(--sage-600); }
.today--open .label { color: var(--sage-100); }
.today .switch[aria-checked="true"] { background: rgba(251, 247, 240, .35); }
.today__state { font: 400 84px/.9 var(--display); text-transform: uppercase; margin-top: auto; }
.today__note { font-weight: 500; font-size: 14.5px; }
.visits { display: flex; flex-direction: column; gap: 10px; }
.visits__n { display: flex; align-items: baseline; gap: 8px; }
.visits__n span { font: 400 64px/.9 var(--display); }
.visits__n small { font-size: 14px; color: var(--ink-600); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 52px; }
.bars--month { gap: 2px; }
.bars__bar { flex: 1; min-height: 6px; border-radius: 5px; background: var(--sand-500); }
.bars--month .bars__bar { border-radius: 2px; }
.bars__bar.is-today { background: var(--rust-600); }
.bars__bar.h0 { height: 12%; } .bars__bar.h1 { height: 18%; } .bars__bar.h2 { height: 26%; } .bars__bar.h3 { height: 34%; }
.bars__bar.h4 { height: 42%; } .bars__bar.h5 { height: 50%; } .bars__bar.h6 { height: 60%; } .bars__bar.h7 { height: 70%; }
.bars__bar.h8 { height: 80%; } .bars__bar.h9 { height: 90%; } .bars__bar.h10 { height: 100%; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-600); border-radius: 18px; }
.mini__n { font: 400 32px/1 var(--display); color: var(--ink-900); }
.mini__n.rust { color: var(--rust-600); }
.card__head { padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
.qrow { display: grid; grid-template-columns: 10px minmax(120px, 180px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.card__head + .qrow { border-top: 0; }
.qrow:hover { color: inherit; background: rgba(31, 26, 22, .03); }
.qrow.is-new .lead__dot { background: var(--rust-600); }
.qrow__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qrow__msg { color: var(--ink-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow.is-new .qrow__msg { color: var(--ink-900); }
.hrs > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.hrs dt { color: var(--ink-600); }
.hrs dd { margin: 0; }
.hrs .is-today dt, .hrs .is-today dd { color: var(--rust-600); font-weight: 600; }
.lp { background: var(--sand-300); border-radius: 22px; padding: 18px 18px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; overflow: hidden; }
.lp__phone { width: 220px; background: var(--ink-900); border-radius: 34px 34px 0 0; padding: 9px 9px 0; }
.lp__screen { background: var(--sand-50); border-radius: 26px 26px 0 0; padding: 12px 12px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 280px; }
.lp__url { font: 400 9px var(--mono); color: var(--ink-500); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp__announce { background: var(--rust-600); color: var(--sand-50); border-radius: 8px; padding: 7px 9px; font: 600 10.5px/1.3 var(--body); }
.lp__img { height: 76px; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--sand-400) 0 8px, var(--sand-450) 8px 16px); }
.lp__name { font: 400 22px/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.lp__status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-600); }
.lp__btn { text-align: center; padding: 9px; background: var(--ink-900); color: var(--sand-50); border-radius: 999px; font: 600 12px var(--body); }
.side__plan { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line-dark); border-radius: 14px; color: var(--sand-100); font-size: 13.5px; }
.side__plan .label { color: var(--ink-300); }
.tabbar { display: none; }

@media (max-width: 1100px) {
  .ov { grid-template-columns: 1fr; }
  .ov__side { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .ov__top, .ov__pair, .ov__side { grid-template-columns: 1fr; }
  .today__state { font-size: 64px; }
  .qrow { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .qrow__msg { grid-column: 2 / -1; }
  .main__head .hostpill { display: none; }
  .tabbar { display: flex; position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; justify-content: space-around; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); background: var(--sand-50); border-top: 1px solid var(--line); }
  .tabbar__item { position: relative; display: grid; place-items: center; width: 52px; height: 44px; color: var(--ink-600); }
  .tabbar__item[aria-current="page"] { color: var(--brand-text, var(--rust-600)); }
  .tabbar__item .count { position: absolute; top: -2px; right: 6px; }
  .main { padding-bottom: 110px; }
  .toast { bottom: 90px; }
}

/* ---------- add-ons ---------- */
.addon { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--sand-200); }
.addon .hint { font-size: 12.5px; }
.addon__details { display: flex; flex-direction: column; gap: 8px; }
.addon__details:empty { display: none; }
.addon__details input:not([type=number]) { height: 38px; background: var(--sand-50); }
.addon__qty { width: 76px !important; height: 34px !important; background: var(--sand-50); }
.addonrow { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.addonrow:first-of-type { border-top: 0; }
.addoncard { gap: 10px; }
.addoncard textarea, .addoncard input { background: var(--sand-200); }
.addons { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.addon__note { margin-top: 4px; font-weight: 500; font-size: 13.5px; color: var(--rust-600); }

/* ---------- add-on tools ---------- */
.tools { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tools:empty { display: none; }
.domainrow { padding: 8px 0; border-top: 1px solid var(--line); }
.confirmbox { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1.5px solid var(--rust-600); border-radius: 14px; }
.modal { position: fixed; inset: 0; z-index: 25; background: rgba(31, 26, 22, .5); display: grid; place-items: center; padding: 16px; }
.modal__card { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--sand-50); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.tr { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.tr.is-todo { border-left: 3px solid var(--rust-600); padding-left: 12px; }
.tr__en { color: var(--ink-600); font-size: 14px; }
.files { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.files li { padding: 4px 0; }
.swatch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.swatch__name, .swatch > span:last-child:not(.swatch__c) { text-transform: capitalize; }
.swatch code { font: 400 12px var(--mono); }
.swatch input[type=color] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--sand-50); }
.swatch__c { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); display: inline-block; background: var(--sand-300); }
.fileup { position: relative; align-self: flex-start; }
.setupgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.setupcard .h4 { font-size: 22px; }
.paylink { padding: 12px 0; border-top: 1px solid var(--line); }
.paylink:first-child { border-top: 0; }
.paylink.is-off { opacity: .55; }

/* ---------- Onboard a client (one page) ---------- */
.onb__main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 120px; }
.onb__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.onb__head a { color: inherit; }
.onb__title { margin-top: 6px; }
.onb__saved { white-space: nowrap; }
.onb__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.onb__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.onb__side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; }
.onb__sec { display: flex; flex-direction: column; gap: 16px; }
.onb__sechead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.onb__label { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.onb__label--rust { color: var(--rust-400); }
.onb__h2 { font: 400 26px/1.05 var(--display); text-transform: uppercase; margin-top: 4px; }
.onb__banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--sage-100); border-radius: 12px; padding: 10px 14px; font-size: 14px; flex-wrap: wrap; }
.onb__fields4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.onb__search { display: flex; align-items: center; gap: 10px; background: var(--sand-200); border-radius: 12px; padding: 4px 12px; }
.onb__search input { flex: 1; border: 0; background: transparent; min-width: 0; }
.onb__searchicon { font-size: 18px; color: var(--ink-500); }
.onb__browse { white-space: nowrap; }
.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; max-height: 460px; overflow: auto; padding: 2px; }
.pv { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1.5px solid var(--line); background: var(--sand-50); border-radius: 14px; padding: 10px; cursor: pointer; font: inherit; color: inherit; }
.pv:hover, .pv:focus-visible { border-color: var(--ink-900); }
.pv.is-on { border-color: var(--rust-600); box-shadow: 0 0 0 2px var(--rust-600); }
.pv__phone { display: flex; flex-direction: column; gap: 5px; align-items: center; background: var(--ink-900); border-radius: 10px; padding: 10px; height: 110px; margin-bottom: 6px; }
.pv__img { width: 100%; flex: 1; border-radius: 6px; background: linear-gradient(135deg, var(--rust-400), var(--sand-500)); }
.pv__name { font: 400 11px var(--display); text-transform: uppercase; color: var(--sand-100); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv__btn { width: 50%; height: 8px; border-radius: 99px; background: var(--rust-600); }
.pv__title { font-size: 14px; }
.pv__host { overflow-wrap: anywhere; }
.mono-s { font: 400 11.5px var(--mono); color: var(--ink-600); }
.pvrow { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--ink-900); border-radius: 14px; padding: 12px; flex-wrap: wrap; }
.pvrow__thumb { width: 56px; height: 72px; border-radius: 8px; background: linear-gradient(160deg, var(--ink-900) 40%, var(--rust-600)); flex: none; }
.pvrow__who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.pvrow__name { font: 400 20px/1.05 var(--display); text-transform: uppercase; }
.onb__lives { background: var(--sand-200); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }

.pcs { display: grid; grid-template-columns: 1fr 1.25fr 1fr 1fr; gap: 12px; align-items: stretch; }
.pc { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--sand-100); border: 1.5px solid var(--line); border-radius: 18px; padding: 18px 16px 16px; cursor: pointer; margin-top: 14px; transition: box-shadow .15s; }
.pc:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.pc--star { background: var(--ink-900); color: var(--sand-100); border-color: var(--ink-900); margin-top: 0; }
.pc.is-on { box-shadow: 0 0 0 3px var(--rust-600); border-color: transparent; }
.pc__badge { position: absolute; top: -11px; left: 16px; }
.badge { display: inline-block; font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.badge--rust { background: var(--rust-600); color: var(--sand-50); }
.pc__name { font: 400 22px/1 var(--display); text-transform: uppercase; }
.pc__price span { font: 400 38px/1 var(--display); }
.pc__price small { font: 500 13px var(--body); margin-left: 3px; opacity: .7; }
.pc__setup { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.pc--star .pc__setup { color: var(--ink-300); }
.pc__pitch { font-size: 13.5px; }
.pc__cta { margin-top: auto; pointer-events: none; }
.pc--star .btn--outline { border-color: var(--sand-100); color: var(--sand-100); }
.radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; flex: none; opacity: .6; }
.radio.is-on { border: 6px solid var(--rust-600); opacity: 1; }
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ticks li { padding-left: 18px; position: relative; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--sage-600); font-weight: 700; }
.pc--star .ticks li::before { color: var(--sage-400); }
.ticks li.is-bold { font-weight: 700; }
.onb__custom { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; background: var(--sand-200); border-radius: 14px; padding: 14px; }
.onb__billing { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.chips { flex-wrap: wrap; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.chipbtn--body { font: 600 13px var(--body); letter-spacing: 0; padding: 7px 14px; }
.onb__date { max-width: 200px; }

.acs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ac { display: flex; flex-direction: column; gap: 6px; background: var(--sand-100); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; cursor: pointer; }
.ac:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.ac.is-on { border-color: var(--ink-900); background: var(--sand-50); }
.ac__name { font-weight: 700; font-size: 15px; }
.ac__desc { font-size: 13.5px; color: var(--ink-600); }
.ac__ask { font: 500 11.5px var(--mono); color: var(--sage-600); }
.ac__price { font: 600 12px var(--mono); }
.ac__controls { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; cursor: default; }
.switch--visual { pointer-events: none; }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper__n { font: 600 13px var(--mono); min-width: 90px; text-align: center; }
.toggle--s { font-size: 13px; gap: 8px; }

.onb__codes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onb__code, .onb__email { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--sand-100); border-radius: 16px; padding: 16px; }
.onb__code.is-shown { background: var(--rust-600); color: var(--sand-50); }
.onb__code.is-shown .onb__label { color: var(--sand-200); }
.onb__digits { font: 400 46px/1 var(--display); letter-spacing: .08em; }
.onb__digits--hidden { color: var(--ink-400); }
.onb__email.is-off { opacity: .75; }
.onb__sent { font: 400 22px var(--display); text-transform: uppercase; color: var(--sage-600); }
.onb__missing { font-size: 12.5px; color: var(--warn-ink); }
.onb__preview { display: flex; flex-direction: column; gap: 8px; }
.ep { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--sand-200); }
.ep__head { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--sand-50); border-bottom: 1px solid var(--line); }
.ep__card { margin: 16px; background: var(--sand-50); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; max-width: 520px; }
.ep__title { font: 400 24px/1 var(--display); text-transform: uppercase; }
.ep__note { background: var(--sand-200); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ep__btn { align-self: flex-start; pointer-events: none; }

.onb__pay { background: var(--ink-900); color: var(--sand-100); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.onb__paybiz { font: 400 24px/1.05 var(--display); text-transform: uppercase; }
.onb__pay .meta { color: var(--ink-300); }
.onb__payfor { overflow-wrap: anywhere; }
.onb__lines { display: flex; flex-direction: column; border-top: 1px solid var(--line-dark); margin-top: 6px; }
.onb__line { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-dark); font-size: 13.5px; }
.onb__line > div { display: flex; flex-direction: column; gap: 2px; }
.ta-r { text-align: right; align-items: flex-end; }
.onb__totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 6px; }
.onb__pay .label { color: var(--ink-300); }
.onb__total { font: 400 30px/1.05 var(--display); }
.onb__total--rust { color: var(--rust-400); }
.onb__sentence { font-size: 13px; color: var(--ink-200); }
.onb__check { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.checks li { display: flex; align-items: center; gap: 10px; color: var(--ink-500); }
.checks li.is-ok { color: var(--ink-900); }
.check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-300); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.is-ok .check { background: var(--sage-600); border-color: var(--sage-600); color: var(--sand-50); }

.onb__mhead, .onb__mbar { display: none; }

@media (max-width: 1100px) {
  .pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc { margin-top: 14px; }
  .onb__fields4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .is-onboard .dashbar { display: none; }
  .onb__mhead { display: flex; position: sticky; top: 0; z-index: 20; justify-content: space-between; align-items: center; background: var(--ink-900); color: var(--sand-100); padding: 12px 16px; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
  .onb__mcancel { color: var(--sand-100); font: 500 14px var(--body); letter-spacing: 0; text-transform: none; }
  .onb__main { padding: 16px 16px 190px; }
  .onb__grid { grid-template-columns: minmax(0, 1fr); }
  .onb__side { position: static; }
  .onb__pay { display: none; }
  .onb__fields4, .acs, .onb__codes, .onb__billing, .onb__custom { grid-template-columns: minmax(0, 1fr); }
  .pcs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pc, .pc--star { margin-top: 0; padding: 12px 14px; }
  .pc:not(.is-on) .pc__pitch, .pc:not(.is-on) .ticks, .pc:not(.is-on) .pc__setup, .pc__cta { display: none; }
  .pc__badge { position: static; align-self: flex-start; }
  .pc__price span { font-size: 28px; }
  .onb__sec { padding: 18px 16px; }
  .onb__mbar { display: flex; flex-direction: column; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--sand-50); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(31, 26, 22, .08); }
  .onb__mtotal { font: 400 24px/1 var(--display); }
}

/* ---------- Split admin (section F): full-width pages ---------- */
:root { --ochre: #c98a1e; --ochre-100: #f6ead2; }
.dashbar__link.is-active { background: var(--sand-100); color: var(--ink-900); }
.dashbar__link.is-active:hover { background: var(--sand-100); color: var(--ink-900); }
.apage { padding: 24px 40px 96px; display: flex; flex-direction: column; gap: 16px; }
.apage__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.apage__head .meta { margin-bottom: 6px; }
.apage__title { font-size: 64px; }
.apage__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apage__sec .sec__head .h2 { font-size: 64px; line-height: .9; }
.apage__sec--sub .sec__head .h2 { font-size: 40px; }
.apage a:not(.btn):not(.crow):not(.need):not(.ctab):not(.kpi):not(.btn-newclient):hover { color: var(--rust-600); }
.is-rust { color: var(--rust-600); }

.ctabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ctab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font: 500 14.5px var(--body); color: var(--ink-900); text-decoration: none; }
.ctab:hover { background: var(--sand-300); }
.ctab.is-on { background: var(--ink-900); color: var(--sand-100); }
.ctabs--line { border-bottom: 1.5px solid var(--ink-900); padding-bottom: 0; }
.ctabs--line .ctab { border-radius: 10px 10px 0 0; }
.count--ink { background: var(--ink-900); }
.ctab.is-on .count--ink { background: var(--sand-100); color: var(--ink-900); }
.count--ochre { background: var(--ochre); }

.btn-newclient { display: inline-flex; align-items: center; background: var(--rust-600); color: var(--sand-50); border-radius: 999px; padding: 14px 26px; font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; }
.btn-newclient:hover { filter: brightness(.92); color: var(--sand-50); }

.obanner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--rust-600); border-radius: 22px; padding: 18px 20px; }
.obanner__title { font: 400 48px/.9 var(--display); text-transform: uppercase; color: var(--sand-50); }
.obanner input { background: var(--sand-50); border: 0; height: 44px; }
.stack .obanner { grid-template-columns: minmax(0, 1fr); }
.stack .obanner__title { font-size: 36px; }

.hdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.hdot--rust { color: var(--rust-600); } .hdot--ochre { color: var(--ochre); } .hdot--ink { color: var(--ink-900); } .hdot--sage { color: var(--sage-600); } .hdot--muted { color: var(--ink-300); }
.hpill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.hpill--rust { background: #f6dccf; color: var(--rust-600); }
.hpill--ochre { background: var(--ochre-100); color: #8a5c0e; }
.hpill--ochre .hdot { color: var(--ochre); }
.hpill--ink { background: var(--sand-300); color: var(--ink-900); }
.hpill--sage { background: var(--sage-100); color: var(--sage-600); }
.hpill--muted { background: transparent; border: 1px solid var(--ink-300); color: var(--ink-500); }
.hlabel { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hlabel--rust .hdot { color: var(--rust-600); } .hlabel--ochre .hdot { color: var(--ochre); } .hlabel--ink .hdot { color: var(--ink-900); } .hlabel--sage .hdot { color: var(--sage-600); } .hlabel--muted .hdot { color: var(--ink-300); }
.hn--rust { color: var(--rust-600); } .hn--ochre { color: var(--ochre); } .hn--sage { color: var(--sage-600); } .hn--rust-light { color: var(--rust-400); }

.htiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 10px; }
.htile { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--sand-50); border: 2px solid transparent; border-radius: 16px; padding: 14px 16px; font: inherit; color: inherit; cursor: pointer; }
.htile:hover { border-color: var(--line); }
.htile.is-on { border-color: var(--ink-900); }
.htile__n { font: 400 40px/.95 var(--display); }
.htile__sub { font-size: 12.5px; color: var(--ink-500); }
.htile__sub.is-rust { color: var(--rust-600); }
.htile--ink { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: var(--ink-900); color: var(--sand-100); cursor: default; }
.htile--ink > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.htile--ink .label, .htile--ink .htile__sub { color: var(--ink-300); }
.htile--ink .htile__n { font-size: 34px; white-space: nowrap; }

.ctools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.csearch { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; background: var(--sand-50); border-radius: 999px; padding: 2px 16px; }
.csearch input { border: 0; background: transparent; flex: 1; min-width: 0; height: 36px; }
.csearch__icon { color: var(--ink-500); font-size: 17px; }

.ctable { background: var(--sand-50); border-radius: 18px; overflow: hidden; }
.crow { display: grid; grid-template-columns: 120px minmax(220px, 2.4fr) .8fr .6fr 1fr minmax(160px, 1.6fr) 150px 1.1fr; gap: 14px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); border-left: 4px solid transparent; color: inherit; text-decoration: none; font-size: 14px; }
.crow:hover { background: var(--sand-100); }
.crow--head { border-top: 0; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.crow--head:hover { background: transparent; }
.edge--rust { border-left-color: var(--rust-600); } .edge--ochre { border-left-color: var(--ochre); } .edge--ink { border-left-color: var(--ink-900); } .edge--sage { border-left-color: var(--sage-600); } .edge--muted { border-left-color: var(--sand-500); }
.crow__client, .crow__for { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crow__client strong { font-size: 15px; }
.crow__billing { display: inline-flex; align-items: center; gap: 8px; }
.tone--rust { color: var(--rust-600); } .tone--ochre { color: #9a6a12; } .tone--ochre .hdot { color: var(--ochre); } .tone--sage .hdot { color: var(--sage-600); } .tone--muted { color: var(--ink-500); } .tone--muted .hdot { color: var(--ink-300); }
.tone--sage { color: var(--ink-900); }
.chip--sage-solid { background: var(--sage-600); color: var(--sand-50); }
.chip--rust-soft { background: #f6dccf; color: var(--rust-600); }
.osegs { display: inline-flex; align-items: center; gap: 8px; }
.osegs__bar { display: inline-flex; gap: 3px; }
.oseg { width: 11px; height: 5px; border-radius: 2px; background: var(--sand-500); }
.oseg.is-done { background: var(--sage-600); }
.hlegend { display: flex; gap: 22px; flex-wrap: wrap; font: 400 11.5px var(--mono); color: var(--ink-500); }

.chead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chead__tile { width: 54px; height: 54px; border-radius: 14px; background: var(--rust-600); color: var(--sand-50); display: grid; place-items: center; font: 400 20px var(--display); flex: none; }
.chead__who { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.chead__line { align-items: center; flex-wrap: wrap; }
.chead__name { font-size: 52px; }
.cbody { padding-top: 6px; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
.cgrid > .stack { gap: 12px; }

.hpanel { background: var(--sand-50); border-left: 4px solid var(--ink-900); border-radius: 18px; padding: 16px 20px; display: flex; flex-direction: column; }
.hpanel--rust { background: #f8e6dc; border-left-color: var(--rust-600); }
.hpanel--ochre { background: var(--ochre-100); border-left-color: var(--ochre); }
.hpanel--sage { border-left-color: var(--sage-600); }
.hpanel--muted { border-left-color: var(--sand-500); }
.hpanel__head { padding-bottom: 12px; }
.hpanel__title { font: 400 26px/1 var(--display); text-transform: uppercase; }
.hpanel--ochre .hpanel__title { color: #6b4708; }
.hpanel--rust .hpanel__title { color: var(--rust-600); }
.hsig { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.hsig .hdot { margin-top: 6px; }
.hsig__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hsig__text .muted { font-size: 13.5px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi { background: var(--sand-50); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; min-width: 0; }
.kpi--link:hover { outline: 2px solid var(--ink-900); }
.kpi__n { font: 400 36px/1 var(--display); }
.kpi__sub { font-size: 12.5px; color: var(--ink-500); }

.obcard { display: flex; flex-direction: column; gap: 12px; }
.obsteps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.obstep { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.obstep__bar { height: 5px; border-radius: 3px; background: var(--sand-500); margin-bottom: 6px; }
.obstep.is-done .obstep__bar { background: var(--ink-900); }
.obstep.is-current .obstep__bar { background: var(--ochre); }
.obsteps.is-complete .obstep__bar { background: var(--sage-600); }

.plancard { background: var(--ink-900); color: var(--sand-100); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.label--rust { color: var(--rust-400); }
.plancard__name { font: 400 30px/1 var(--display); text-transform: uppercase; }
.plancard__price { font-weight: 600; font-size: 14.5px; }
.plancard .mono-s { color: var(--ink-300); }
.card--tight { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.card--tight textarea { min-height: 84px; }
.addr { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 3px 0; flex-wrap: wrap; }
.addr__state { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.addr__state.is-sage { color: var(--sage-600); }
.addr__state.is-rust { color: var(--rust-600); }

.cardhead { padding: 14px 4px; flex-wrap: wrap; gap: 10px; }
.charges { display: flex; flex-direction: column; }
.charge { display: grid; grid-template-columns: 70px minmax(140px, 1fr) minmax(150px, 1fr) minmax(0, 1.4fr) auto; gap: 14px; align-items: center; padding: 11px 4px; border-top: 1px solid var(--line); font-size: 14px; }
.charge--one { grid-template-columns: 70px minmax(150px, 1fr) minmax(0, 1.6fr) auto; }
.charge .muted { font-size: 13px; }

.needs { display: flex; flex-direction: column; gap: 14px; }
.needs__group { display: flex; flex-direction: column; gap: 6px; }
.need { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.need:hover strong { color: var(--rust-600); }
.need__text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.need__text .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1200px) {
  .htiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .htile--ink { grid-column: span 3; }
  .kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crow { grid-template-columns: 110px minmax(200px, 2fr) .7fr .6fr minmax(140px, 1.4fr) 130px; }
  .crow__for, .crow__last, .crow--head span:nth-child(5), .crow--head span:nth-child(8) { display: none; }
  .cgrid { grid-template-columns: minmax(0, 1fr); }
  .obanner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .obanner__title { grid-column: 1 / -1; font-size: 40px; }
}
@media (max-width: 800px) {
  .apage { padding: 18px 20px 96px; }
  .apage__title, .apage__sec .sec__head .h2 { font-size: 48px; }
  .chead__name { font-size: 38px; }
  .htiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htile--ink { grid-column: span 2; }
  .kpis, .kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .obanner { grid-template-columns: minmax(0, 1fr); }
  .crow--head { display: none; }
  .crow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 14px; }
  .crow__health { grid-row: 1; grid-column: 2; justify-self: end; }
  .crow__client { grid-row: 1; grid-column: 1; }
  .crow__plan, .crow__mrr, .crow__ob { display: none; }
  .crow__billing { grid-column: 1 / -1; font-size: 13px; }
  .obsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .hsig { flex-wrap: wrap; }
  .hsig .btn { margin-left: 20px; }
  .charge, .charge--one { grid-template-columns: minmax(0, 1fr) auto; }
  .charge > .meta { grid-column: 1 / -1; }
}

/* ---------- Today: goals + charts ---------- */
.kpi--ink { background: var(--ink-900); color: var(--sand-100); }
.kpi--ink .label, .kpi--ink .kpi__sub { color: var(--ink-300); }
.kpi--rust { background: #f2d3c5; }
.kpi--rust .label, .kpi--rust .kpi__n, .kpi--rust .kpi__sub { color: var(--rust-600); }
.label--big { font-size: 12px; letter-spacing: .14em; color: var(--ink-900); }
.goals { display: flex; flex-direction: column; gap: 10px; }
.goals__head { flex-wrap: wrap; gap: 10px; }
.goals__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.goal { background: var(--sand-50); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.goal__of { font: 400 26px/1 var(--display); display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.goal__input { width: 110px; height: 34px; font: 400 22px var(--display); padding: 0 8px; }
.gbar { position: relative; height: 8px; border-radius: 999px; background: var(--sand-300); }
.gbar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--ink-400); max-width: 100%; }
.gbar__fill--sage { background: var(--sage-600); } .gbar__fill--ochre { background: var(--ochre); } .gbar__fill--rust { background: var(--rust-600); } .gbar__fill--muted { background: var(--sand-500); }
.gbar__tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink-900); border-radius: 1px; }

.trow { display: grid; gap: 12px; }
.trow--2 { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.trow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chart { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.chart__head { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.chart__svg { width: 100%; height: auto; display: block; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-area { fill: var(--sand-300); }
.c-line { fill: none; stroke: var(--ink-900); stroke-width: 2.5; stroke-linejoin: round; }
.c-goal { stroke: var(--rust-600); stroke-width: 2; stroke-dasharray: 8 6; }
.c-proj { stroke: var(--ink-500); stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.c-dot { fill: var(--ink-900); }
.c-dot--now { fill: var(--rust-600); }
.c-label { font: 600 10px var(--mono); fill: var(--ink-500); letter-spacing: .08em; text-transform: uppercase; }
.c-legend { font-size: 12.5px; color: var(--ink-600); gap: 14px; }
.lg::before { content: ""; display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2.5px solid var(--ink-900); }
.lg--goal::before { border-top: 2px dashed var(--rust-600); }
.lg--proj::before { border-top: 2.5px dotted var(--ink-500); }

.hchart { display: flex; align-items: center; gap: 18px; }
.donut { width: 150px; flex: none; }
.c-seg { fill: none; stroke-width: 22; }
.c-seg--track { stroke: var(--sand-300); }
.c-seg--sage { stroke: var(--sage-600); } .c-seg--ink { stroke: var(--ink-900); } .c-seg--ochre { stroke: var(--ochre); } .c-seg--rust { stroke: var(--rust-600); } .c-seg--muted { stroke: var(--sand-500); }
.donut__n { font: 400 26px var(--display); fill: var(--ink-900); }
.hchart__list { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hrow { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; }
.hrow__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; min-width: 2px; }
.bg--sage { background: var(--sage-600); } .bg--ink { background: var(--ink-900); } .bg--ochre { background: var(--ochre); } .bg--rust { background: var(--rust-600); } .bg--muted { background: var(--sand-500); }

.funnel { display: flex; flex-direction: column; gap: 4px; }
.frow { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 13.5px; }
.frow__bar { height: 16px; border-radius: 6px; background: var(--ink-900); }
.frow strong { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.fconv { margin-left: 106px; font: 400 11.5px var(--mono); color: var(--ink-500); }
.fconv.is-rust { color: var(--rust-600); }

.vbars { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-bottom: 22px; }
.vbars__goal { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--rust-600); margin-bottom: 22px; }
.vbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; position: relative; }
.vbar__n { font: 600 11px var(--mono); }
.vbar__fill { width: 100%; background: var(--ink-900); border-radius: 6px 6px 0 0; min-height: 2px; }
.vbar__fill.is-now { background: var(--sand-500); }
.vbar__label { position: absolute; bottom: -20px; font: 600 10px var(--mono); color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }
.cbars { display: flex; gap: 8px; height: 150px; padding-bottom: 22px; }
.cbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.cbar__pct { font: 600 11px var(--mono); }
.cbar__pct.is-rust { color: var(--rust-600); }
.cbar__stack { flex: 1; width: 100%; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background: var(--sand-300); }
.cbar__failed { background: var(--rust-600); }
.cbar__paid { background: var(--sage-600); }
.cbar__empty { flex: 1; }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 14px; }
.kv strong { font-family: var(--mono); font-size: 13px; }
a.kv:hover span { color: var(--rust-600); }
.obanner__time { justify-self: end; font: 600 11px var(--mono); letter-spacing: .1em; color: var(--sand-200); text-transform: uppercase; }
.stack .obanner { position: relative; }
.stack .obanner .obanner__time { position: absolute; top: 18px; right: 20px; }

@media (max-width: 1200px) {
  .goals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trow--2, .trow--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .goals__grid { grid-template-columns: minmax(0, 1fr); }
  .hchart { flex-direction: column; align-items: stretch; }
  .donut { align-self: center; }
}
a.need__text { color: inherit; text-decoration: none; }
a.need__text:hover strong { color: var(--rust-600); }

/* ---------- Billing page ---------- */
.kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi--ochre { background: var(--ochre-100); }
.kpi--ochre .label, .kpi--ochre .kpi__n, .kpi--ochre .kpi__sub { color: #8a5c0e; }
.trow--2b { grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); }
.mbars { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding-bottom: 22px; }
.mbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; position: relative; }
.mbar__stack { width: 100%; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; min-height: 4px; }
.mbar__setup { background: var(--rust-600); flex: none; }
.mbar__rec { flex: 1; background: var(--ink-900); }
.mbar__stack.is-now .mbar__rec { background: var(--sand-500); }
.payouts { background: var(--ink-900); color: var(--sand-100); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.payouts .muted { color: var(--ink-300); }
.payouts .mono-s { color: var(--ink-300); margin-top: 6px; }
.payout { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-dark); font-size: 14px; }
.payout__st { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); }
.payout__st.is-rust { color: var(--rust-400); }

.bgrid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 12px; align-items: start; }
.btable { background: var(--sand-50); border-radius: 18px; overflow: hidden; }
.brow { display: grid; grid-template-columns: minmax(180px, 2fr) 70px 80px minmax(110px, 1.2fr) 120px; gap: 12px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--line); border-left: 4px solid transparent; cursor: pointer; font-size: 14px; }
.brow:first-child { border-top: 0; }
.brow:hover, .brow.is-on { background: var(--sand-100); }
.brow:focus-visible { outline: 2px solid var(--rust-600); outline-offset: -2px; }
.brow--sub { grid-template-columns: minmax(180px, 2fr) 90px 110px minmax(110px, 1.2fr) 100px; }
.brow__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brow__who .mono-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spill { justify-self: start; display: inline-flex; padding: 4px 10px; border-radius: 999px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.spill--rust { background: #f6dccf; color: var(--rust-600); }
.spill--sage { background: var(--sage-100); color: var(--sage-600); }
.spill--ochre { background: var(--ochre-100); color: #8a5c0e; }
.spill--outline { border: 1px solid var(--ink-400); color: var(--ink-600); }
.bpanel { position: sticky; top: 76px; background: var(--sand-50); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.bpanel__name { font: 400 30px/1 var(--display); text-transform: uppercase; color: var(--ink-900); text-decoration: none; }
.kvbox { background: var(--sand-200); border-radius: 12px; padding: 4px 12px; }
.kvbox .kv:first-child { border-top: 0; }
.bpanel__error { background: #f2d3c5; color: var(--rust-600); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.bpanel__acts { flex-wrap: wrap; }
.refund__amt { width: 90px; height: 32px; }
.refund__hint { flex-basis: 100%; margin: 0; }
.upc { display: grid; grid-template-columns: 120px minmax(140px, 1.2fr) 1fr 80px minmax(0, 1.4fr); gap: 12px; align-items: center; padding: 11px 4px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 14px; }
.upc:hover strong { color: var(--rust-600); }

@media (max-width: 1200px) {
  .kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trow--2b, .bgrid { grid-template-columns: minmax(0, 1fr); }
  .bpanel { position: static; }
}
@media (max-width: 800px) {
  .kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brow, .brow--sub { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .brow > :nth-child(2), .brow > :nth-child(4) { display: none; }
  .brow > :nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
  .upc { grid-template-columns: minmax(0, 1fr) auto; }
  .upc > :nth-child(3) { display: none; }
}

/* ---------- Phase 4: settings tests, previews/changes panels, add-ons table, phone tab bar ---------- */
.testline { font: 400 12px var(--mono); color: var(--ink-500); margin: 0; }
.testline.is-ok { color: var(--sage-600); }
.testline.is-bad { color: var(--rust-600); }
.chip--ochre { background: var(--ochre-100); color: #8a5c0e; }

.brow--lead { grid-template-columns: 10px minmax(160px, 1fr) minmax(0, 1.6fr) 110px; }
.leaddot { width: 8px; height: 8px; border-radius: 50%; }
.leaddot.is-new { background: var(--rust-600); }
.brow__msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-600); }
.brow--req { grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) 80px 100px; }
.brow--req .brow__who .chip { align-self: flex-start; }
.clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote { background: var(--sand-200); border-radius: 12px; padding: 12px 14px; margin: 0; font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
.pprog { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--sand-200); border-radius: 12px; padding: 10px 12px; }
.pprog select { max-width: 260px; }
.bpanel textarea { min-height: 70px; }

.atbl { background: var(--sand-50); border-radius: 18px; overflow: hidden; }
.atbl__row { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(140px, 1.6fr) 96px 96px 90px 90px; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.atbl__head { border-top: 0; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.atbl__row.is-unpriced .atbl__name strong { color: var(--ink-500); }
.atbl__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atbl__name .more summary { font: 400 11.5px var(--mono); color: var(--ink-500); }
.atbl__price { height: 36px; font: 400 14px var(--mono); }
.atbl__price:disabled { opacity: .5; }
.setprice { font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ochre); }
.stack-xs { display: inline-flex; flex-direction: column; gap: 3px; }
.ta-c { align-items: center; }

.kv--link { align-items: center; padding: 12px 0; font-weight: 500; }
.atabbar { display: none; }

@media (max-width: 1100px) {
  .atbl__row { grid-template-columns: minmax(160px, 1.6fr) 90px 90px 70px 80px; }
  .atbl__row > :nth-child(2) { display: none; }
}
@media (max-width: 800px) {
  .is-dash .dashbar__nav, .is-dash .dashbar__me { display: none; }
  .is-dash .dashbar { padding: 14px 20px; }
  .atabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--sand-50); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .atab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; font: 500 11px var(--body); color: var(--ink-500); text-decoration: none; }
  .atab.is-on { color: var(--rust-600); }
  .atab__icon { position: relative; display: inline-flex; }
  .atab__icon .count { position: absolute; top: -4px; right: -10px; }
  .apage { padding-bottom: 110px; }
  .brow--lead { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .brow--lead .brow__msg { display: none; }
  .brow--req { grid-template-columns: minmax(0, 1fr) auto; }
  .brow--req > :nth-child(2), .brow--req > :nth-child(3) { display: none; }
  .atbl__row { grid-template-columns: minmax(0, 1fr) 72px 72px 56px; }
  .atbl__row > :nth-child(5) { display: none; }
  .atbl__head > :nth-child(5) { display: none; }
}

/* ---------- Photo spots (client Photos tab) ---------- */
.spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.spot { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.spot__frame { border-radius: 12px; overflow: hidden; background: var(--sand-200); display: grid; place-items: center; }
.spot__frame--square { aspect-ratio: 1; }
.spot__frame--wide { aspect-ratio: 16 / 10; }
.spot__frame--tall { aspect-ratio: 4 / 5; }
.spot__frame img { width: 100%; height: 100%; object-fit: cover; }
.spot__empty { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.spot__body { display: flex; flex-direction: column; gap: 6px; }
.spot__acts { flex-wrap: wrap; margin-top: 4px; }
.spot__upload { cursor: pointer; }
.spot__upload.is-busy { opacity: .6; pointer-events: none; }
.spot__picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 8px; max-height: 240px; overflow: auto; }
.spot__pick { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; aspect-ratio: 1; }
.spot__pick img { width: 100%; height: 100%; object-fit: cover; }
.spot__pick:hover, .spot__pick.is-on { border-color: var(--rust-600); }

/* ---------- Bookings tab ---------- */
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1.5px solid var(--ink-900); }
.subtab { border: 0; background: none; padding: 9px 14px; border-radius: 10px 10px 0 0; font: 600 14.5px var(--body); color: var(--ink-900); cursor: pointer; }
.subtab:hover { background: var(--sand-300); }
.subtab.is-on { background: var(--ink-900); color: var(--sand-100); }
.notice--soft { background: var(--sand-200); color: var(--ink-900); }
.appt-day { display: flex; flex-direction: column; gap: 0; }
.appt-day > .label { padding: 12px 0 6px; }
.appt { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.appt__time { font: 700 15px var(--mono); padding-top: 1px; }
.appt__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appt__who strong { font-size: 16px; }
.appt__notes { font-size: 14px; color: var(--ink-600); font-style: italic; }
.appt__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.appt__detail { grid-column: 1 / -1; }
.appt__detail:empty { display: none; }
.appt__confirm { flex-wrap: wrap; }
.appt__confirm input { flex: 1; min-width: 200px; }
.appt--canceled, .appt--declined { opacity: .65; }
.appt-times { display: flex; flex-wrap: wrap; gap: 6px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.blockrow, .svcrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.blockrow > div { display: flex; flex-direction: column; gap: 2px; }
.svcrow__name { font-weight: 600; }
.svcrow input[type="text"] { max-width: 260px; }
.svc__min { width: 80px; }
.addstaff { padding-top: 12px; border-top: 1px solid var(--line); }
.addstaff input { max-width: 240px; }
.steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.upsell { max-width: 640px; }
@media (max-width: 800px) {
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .appt { grid-template-columns: 64px minmax(0, 1fr); }
  .appt__side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- Customer's booking page (/api/public/booking/manage) ---------- */
body.manage { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--sand-100); }
.manage__card { width: min(480px, 100%); display: flex; flex-direction: column; gap: 14px; }
.manage__rows { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.manage__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.manage__rows dt { color: var(--ink-500); }
.manage__rows dd { margin: 0; font-weight: 600; text-align: right; }
.manage form { margin: 0; }

/* ---------- Bookings (section G): schedule first ---------- */
:root { --req-bg: #f2e2bf; --req-edge: #c98a1e; }
.bk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 4px; }
.bk-dateline { font: 400 12.5px var(--mono); color: var(--ink-500); white-space: nowrap; }
.bk-title { font-size: 56px; white-space: nowrap; }
.bk-head__right { display: flex; align-items: center; gap: 14px; flex: none; white-space: nowrap; }
.bk-online { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--sand-50); }
.bk-online__text { display: flex; flex-direction: column; line-height: 1.15; font: 600 13px var(--body); }
.bk-online__state { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.btn--outline-ochre { background: transparent; border: 1.5px solid var(--req-edge); color: #7a520c; }
.btn--outline-ochre:hover { background: rgba(201, 138, 30, .1); filter: none; }
.btn--outline-light { background: transparent; border: 1.5px solid var(--ink-300); color: var(--sand-100); }

/* Requests waiting */
.bk-reqs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 18px; background: var(--req-bg); box-shadow: inset 4px 0 0 var(--req-edge); }
.bk-reqs__title { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7a520c; white-space: nowrap; }
.bk-reqs__row { display: flex; gap: 10px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bk-req { display: flex; align-items: center; gap: 12px; flex: none; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--sand-50); cursor: pointer; }
.bk-req:focus-visible { outline: 2px solid var(--rust-600); outline-offset: 2px; }
.bk-req__who { display: flex; flex-direction: column; line-height: 1.25; }
.bk-req__who span { font-size: 12.5px; color: var(--ink-600); }
.bk-reqs__end { display: flex; align-items: center; gap: 14px; flex: none; }
.bk-reqs > div:last-child:not(.bk-reqs__end):not(.bk-reqs__row) { flex-basis: 100%; }
.bk-confirm { background: var(--ink-900); color: var(--ink-200); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.bk-confirm .h4 { color: var(--sand-100); }
.bk-auto-on { color: var(--sage-600); font-weight: 600; }

.bk-tabs { margin-top: 2px; }
.bk-tabs .count { margin-left: 6px; }

/* Schedule */
.bk-sched { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.bk-sched__top { align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.bk-week { display: flex; align-items: center; gap: 6px; }
.bk-week__days { display: grid; grid-template-columns: repeat(7, 76px); gap: 6px; }
.bk-week__nav { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--sand-300); cursor: pointer; font: 600 18px var(--body); }
.bk-week__today { margin-left: 6px; }
.bk-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border: 0; border-radius: 14px; background: var(--sand-50); cursor: pointer; font: 400 12px var(--mono); color: var(--ink-600); }
.bk-day__dow { letter-spacing: .1em; text-transform: uppercase; }
.bk-day__dom { font: 400 22px/1 var(--display); color: var(--ink-900); }
.bk-day__req { color: var(--req-edge); }
.bk-day.is-today { box-shadow: inset 0 0 0 1.5px var(--ink-900); }
.bk-day.is-on { background: var(--ink-900); color: var(--ink-200); }
.bk-day.is-on .bk-day__dom { color: var(--sand-50); }
.bk-legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-600); }
.bk-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 3px; }
.bk-legend__booked::before { background: var(--sand-50); box-shadow: inset 3px 0 0 var(--ink-900); }
.bk-legend__req::before { background: var(--req-bg); box-shadow: inset 0 0 0 1.5px var(--req-edge); }
.bk-legend__blk::before { background: repeating-linear-gradient(45deg, var(--sand-400), var(--sand-400) 3px, var(--sand-300) 3px, var(--sand-300) 6px); }

.bk-grid { position: relative; display: grid; grid-template-columns: 44px repeat(var(--cols), minmax(150px, 1fr)); gap: 0 8px; background: var(--sand-50); border-radius: 22px; padding: 16px 16px 20px 8px; overflow-x: auto; }
.bk-col__head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; white-space: nowrap; }
.bk-col__head .meta { margin-left: auto; }
.bk-col__dot { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; color: var(--sand-50); font: 700 12px var(--body); }
.bk-col__body { position: relative; border-top: 1px solid var(--line); background: repeating-linear-gradient(180deg, transparent 0, transparent 59px, var(--line) 59px, var(--line) 60px); }
.bk-gutter__body { position: relative; }
.bk-hour { position: absolute; right: 4px; transform: translateY(-50%); font: 400 11.5px var(--mono); color: var(--ink-500); }
.bk-appt, .bk-block { position: absolute; left: 2px; right: 2px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 5px 8px; border-radius: 9px; text-align: left; font: 400 12.5px/1.25 var(--body); }
.bk-appt { border: 0; cursor: pointer; background: var(--sand-100); box-shadow: inset 4px 0 0 var(--c, var(--ink-900)), 0 1px 0 var(--line); color: var(--ink-900); }
.bk-appt:hover { filter: brightness(.97); }
.bk-appt__t { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; font-weight: 600; }
.bk-appt__s, .bk-block__s { color: var(--ink-600); font-size: 11.5px; }
.bk-appt--pending { background: var(--req-bg); box-shadow: inset 0 0 0 1.5px var(--req-edge); }
.bk-appt--canceled, .bk-appt--declined { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-300); color: var(--ink-500); text-decoration: line-through; }
.bk-appt.is-sel { outline: 2px solid var(--rust-600); outline-offset: 1px; z-index: 2; }
.bk-block { background: repeating-linear-gradient(45deg, var(--sand-400), var(--sand-400) 6px, var(--sand-300) 6px, var(--sand-300) 12px); color: var(--ink-600); }
.bk-block__t { display: flex; justify-content: space-between; gap: 6px; font-weight: 600; }
.bk-tag { flex: none; padding: 1px 7px; border-radius: 999px; background: var(--sand-50); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.bk-tag--ochre { background: var(--req-edge); color: var(--sand-50); }
.bk-now { position: absolute; left: 52px; right: 16px; height: 0; border-top: 2px solid var(--rust-600); margin-top: 56px; pointer-events: none; z-index: 3; }
.bk-now::before { content: ""; position: absolute; left: -6px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--rust-600); }

/* Side panel */
.bk-panel { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.bk-detail, .bk-addform { background: var(--sand-50); border-radius: 22px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.bk-detail--pending { box-shadow: inset 4px 0 0 var(--req-edge); }
.bk-pill { padding: 3px 10px; border-radius: 999px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--sage-100); color: var(--sage-600); }
.bk-pill--pending { background: var(--req-bg); color: #7a520c; }
.bk-pill--canceled, .bk-pill--declined { background: transparent; border: 1px solid var(--ink-400); color: var(--ink-500); }
.bk-detail__svc { font: 400 28px/1 var(--display); text-transform: uppercase; margin-top: 6px; }
.bk-detail__when { font-weight: 600; }
.bk-detail__rows { border-top: 1px solid var(--line); margin-top: 4px; }
.bk-detail__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.bk-detail__row strong { text-align: right; overflow-wrap: anywhere; }
.bk-detail__note { font-style: italic; color: var(--ink-600); }
.bk-detail__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-detail textarea { width: 100%; resize: vertical; }
.bk-detail__foot { font-size: 12.5px; color: var(--ink-500); border-top: 1px solid var(--line); padding-top: 10px; }
.bk-cancel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--sand-200); }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-anyway { font-size: 13px; color: var(--ink-600); }
.bk-glance { background: var(--ink-900); color: var(--ink-200); border-radius: 22px; padding: 18px 20px; }
.bk-glance__title { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand-100); margin-bottom: 6px; }
.bk-glance__row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-dark); font-size: 14px; }
.bk-glance__row:last-child { border-bottom: 0; }
.bk-glance__row strong { color: var(--sand-50); }

/* Requests tab + all appointments */
.bk-reqlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.bk-reqcard { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 18px; background: var(--req-bg); box-shadow: inset 4px 0 0 var(--req-edge); }
.bk-reqcard__top { display: flex; justify-content: space-between; gap: 10px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #7a520c; }
.bk-reqcard__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.bk-reqcard__acts .btn { min-height: 44px; }
.bk-alllist { display: flex; flex-direction: column; gap: 6px; }
.bk-allrow { width: 100%; display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--sand-50); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.bk-allrow:hover { filter: brightness(.98); }
.bk-allrow__when { font: 400 12.5px var(--mono); color: var(--ink-600); }
.bk-allrow__who { display: flex; flex-direction: column; }
.bk-allrow--canceled, .bk-allrow--declined { opacity: .7; }
.bk-search { max-width: 260px; }
.bk-empty { text-align: left; }

/* Setup */
.bk-setup-grid { align-items: start; }
.bk-setrow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bk-setrow:last-of-type { border-bottom: 0; }
.bk-setrow > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-setrow input[type="text"] { max-width: 220px; }
.stepper { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sand-200); flex: none; }
.stepper__btn { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--sand-50); cursor: pointer; font: 600 16px var(--body); }
.stepper__btn:disabled { opacity: .35; cursor: default; }
.stepper__val { min-width: 84px; text-align: center; font: 600 13px var(--body); white-space: nowrap; }
.bk-sync { font-weight: 600; color: var(--sage-600); }
.bk-sync--err { color: var(--rust-600); }

/* Phone */
.bk-state, .bk-fab, .bk-sheet { display: none; }
@media (max-width: 1200px) {
  .bk-sched { grid-template-columns: minmax(0, 1fr) 300px; }
  .bk-week__days { grid-template-columns: repeat(7, 60px); }
}
@media (max-width: 1000px) {
  .bk-head { flex-wrap: wrap; align-items: flex-start; }
  .bk-sched { grid-template-columns: minmax(0, 1fr); }
  .bk-panel { position: static; }
}
@media (max-width: 800px) {
  .bk-title { font-size: 52px; }
  .bk-state { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(194, 70, 31, .1); }
  .bk-state.is-on { background: var(--sage-100); }
  .bk-state > div { display: flex; flex-direction: column; gap: 2px; }
  .bk-state span { font-size: 14px; color: var(--ink-600); }
  .bk-reqs--mobile { display: block; padding: 0; background: none; box-shadow: none; }
  .bk-reqs--mobile .bk-reqs__row { flex-direction: column; overflow: visible; }
  .bk-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bk-tabs .subtab { flex: none; }
  .bk-week { margin: 0 -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
  .bk-week__nav { display: none; }
  .bk-week__days { grid-template-columns: repeat(7, 54px); }
  .bk-ag__head { margin-top: 6px; align-items: baseline; }
  .bk-agenda { display: flex; flex-direction: column; background: var(--sand-50); border-radius: 20px; overflow: hidden; }
  .bk-ag { border-bottom: 1px solid var(--line); }
  .bk-ag:last-child { border-bottom: 0; }
  .bk-ag__main { width: 100%; min-height: 56px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 16px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
  .bk-ag--block { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 14px 16px; color: var(--ink-500); background: repeating-linear-gradient(45deg, var(--sand-200), var(--sand-200) 6px, var(--sand-100) 6px, var(--sand-100) 12px); }
  .bk-ag__time { font: 400 13px var(--mono); color: var(--ink-600); }
  .bk-ag__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .bk-ag--pending { background: var(--req-bg); }
  .bk-ag--canceled { opacity: .6; }
  .bk-ag__more:not(:empty) { padding: 0 10px 12px; }
  .bk-detail .btn { min-height: 44px; }
  .bk-fab { display: block; position: fixed; z-index: 7; left: 20px; right: 20px; bottom: calc(76px + env(safe-area-inset-bottom)); min-height: 58px; border: 0; border-radius: 999px; background: var(--rust-600); color: var(--sand-50); font: 400 24px var(--display); text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 16px 30px -18px rgba(31, 26, 22, .8); cursor: pointer; }
  .main:has(.bk-fab) { padding-bottom: 170px; }
  .bk-sheet { display: block; position: fixed; inset: 0; z-index: 30; }
  .bk-sheet__scrim { position: absolute; inset: 0; border: 0; background: rgba(22, 27, 61, .5); }
  .bk-sheet__body { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--sand-50); }
  .bk-sheet__grab { display: block; width: 44px; height: 5px; margin: 0 auto 8px; border-radius: 999px; background: var(--sand-500); }
  .bk-sheet .bk-addform { padding: 0; }
  .bk-sheet input, .bk-sheet select { font-size: 16px; }
  .bk-sheet .chipbtn { min-height: 44px; padding: 8px 14px; }
  .bk-allrow { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-allrow__when { grid-column: 1 / -1; }
  .bk-search { max-width: none; width: 100%; }
  .bk-setup-grid { grid-template-columns: minmax(0, 1fr); }
}
.bk-reqcard__when { font-weight: 600; color: #7a520c; }
.bk-appt { z-index: 1; }

/* ---------- Guided setup (section H) ---------- */
.gs { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(22, 27, 61, .62); overflow-y: auto; }
.gs-card { width: min(720px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 240px; border-radius: 24px; overflow: hidden; background: var(--sand-50); box-shadow: 0 40px 80px -40px rgba(22, 27, 61, .7); }
.gs-card--finish { width: min(760px, 100%); }
.gs-card__main { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.gs-card__side { display: grid; place-items: center; padding: 28px 20px; background: var(--brand-side, #161b3d); }
.gs-title { font: 400 48px/.92 var(--display); text-transform: uppercase; }
.gs-card__acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.gs-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gs-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.gs-list__n { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--sand-300); font: 600 11px var(--mono); }
.gs-list li:first-child:not(.is-done) .gs-list__n { background: var(--rust-600); color: var(--sand-50); }
.gs-list li.is-done .gs-list__n { background: var(--sage-600); color: var(--sand-50); }
.gs-list li.is-done > span:nth-child(2) { color: var(--ink-500); text-decoration: line-through; }
.gs-list__opt { font: 400 11px var(--mono); color: var(--ink-500); text-transform: uppercase; letter-spacing: .08em; }
.gs-phone { width: 190px; padding: 9px; border-radius: 34px; background: var(--ink-900); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7); }
.gs-phone__screen { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 330px; padding: 16px 14px; border-radius: 26px; background: var(--sand-50); text-align: center; }
.gs-phone__url { padding: 3px 10px; border-radius: 999px; background: var(--sand-200); font: 400 9.5px var(--mono); color: var(--ink-600); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-phone__logo { width: 120px; height: 120px; border-radius: 16px; object-fit: contain; background: var(--sand-100); }
.gs-phone__tile { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 20px; background: var(--brand, var(--rust-600)); color: var(--brand-on, var(--sand-50)); font: 400 34px var(--display); }
.gs-phone__name { font: 400 18px/1 var(--display); text-transform: uppercase; }
.gs-phone__btn { margin-top: auto; width: 100%; padding: 9px; border-radius: 999px; background: var(--ink-900); color: var(--sand-50); font: 600 12px var(--body); }

.gs-spot { position: fixed; z-index: 38; border-radius: 20px; pointer-events: none; box-shadow: 0 0 0 3px var(--rust-600), 0 0 0 9999px rgba(22, 27, 61, .58); transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease; }
.gs-spot.is-none { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(22, 27, 61, .58); }
.gs-coach { position: fixed; z-index: 39; width: 340px; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 20px; background: var(--sand-50); box-shadow: 0 30px 60px -30px rgba(22, 27, 61, .8); }
.gs-coach.is-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.gs-coach__grab { display: none; }
.gs-bars { display: grid; grid-auto-flow: column; gap: 4px; }
.gs-bars span { height: 4px; border-radius: 999px; background: var(--sand-500); }
.gs-bars span.is-on, .gs-bars span.is-done { background: var(--rust-600); }
.gs-coach__eyebrow { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.gs-coach__title { font: 400 30px/.95 var(--display); text-transform: uppercase; }
.gs-try { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sand-200); font-size: 14px; font-weight: 500; }
.gs-try__k { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-600); }
.gs-try__ok { margin-left: auto; color: var(--sage-600); font-weight: 600; }
.gs-coach__acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.side__nav a.is-tour { box-shadow: inset 4px 0 0 var(--rust-600); }
.tour-prices [data-tour="prices"] input[name="price_note"]:placeholder-shown { box-shadow: 0 0 0 2px var(--ochre); }

.tab-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--ochre); flex: none; }
.side__nav a .count + .tab-dot { margin-left: 6px; }
.side__setup { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 0; border-radius: 12px; background: rgba(243, 236, 224, .08); color: var(--ink-200); font: 600 12.5px var(--body); text-align: left; cursor: pointer; }
.side__setup:hover { background: rgba(243, 236, 224, .14); }
.side__setup-bar { display: block; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--ochre) var(--p), rgba(243, 236, 224, .16) var(--p)); }

.gs-check { background: var(--ink-900); color: var(--ink-200); display: flex; flex-direction: column; gap: 12px; }
.gs-check .h4 { color: var(--sand-50); }
.gs-ring { width: 44px; height: 44px; flex: none; border-radius: 50%; background: conic-gradient(var(--ochre) calc(var(--p) * 1%), rgba(243, 236, 224, .14) 0); -webkit-mask: radial-gradient(circle, transparent 15px, #000 16px); mask: radial-gradient(circle, transparent 15px, #000 16px); }
.gs-check__rows { display: flex; flex-direction: column; }
.gs-check__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--line-dark); }
.gs-check__row > div { display: flex; flex-direction: column; }
.gs-check__row strong { color: var(--sand-50); font-weight: 600; font-size: 14px; }
.gs-check__row .meta { color: var(--ink-300); }
.gs-check__row .link { color: var(--sand-100); }
.gs-check__circle { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-400); font-size: 11px; color: var(--sand-50); }
.gs-check__row.is-done .gs-check__circle { background: var(--sage-600); border-color: var(--sage-600); }
.gs-check__row.is-done strong { color: var(--ink-300); text-decoration: line-through; }

@media (max-width: 800px) {
  .gs { place-items: stretch; padding: 0; }
  .gs-card, .gs-card--finish { width: 100%; min-height: 100%; grid-template-columns: minmax(0, 1fr); border-radius: 0; }
  .gs-card__side { display: none; }
  .gs-card__main { padding: 28px 20px; }
  .gs-title { font-size: 44px; }
  .gs-card__acts .btn { width: 100%; min-height: 54px; }
  .gs-list li { min-height: 36px; }
  .gs-coach { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; transform: none !important; padding: 10px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  .gs-coach__grab { display: block; width: 44px; height: 5px; margin: 0 auto 4px; border-radius: 999px; background: var(--sand-500); }
  .gs-try { display: none; }
  .gs-coach__acts .btn--rust { min-height: 50px; flex: 1; }
  .gs-coach__acts .row { flex: 1; justify-content: flex-end; }
  .gs-check__row { min-height: 52px; }
}

/* ---- Domain page (client): address, domain request, DNS records ---- */
.domain__addr { font: 500 20px/1.35 var(--mono); color: var(--ink-900); overflow-wrap: anywhere; }
.domain__note { padding: 14px 16px; border-radius: 14px; background: var(--sand-200); color: var(--ink-900); }
.domain__price { font-size: 15px; }
.dns { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.dns__row { display: grid; grid-template-columns: 56px 120px minmax(0, 1fr) 210px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dns__row.is-locked { color: var(--ink-500); }
.dns__row.is-editing { grid-template-columns: 64px minmax(0, 1fr); }
.dns__type { font: 600 12px var(--mono); letter-spacing: .04em; color: var(--ink-900); }
.dns__name, .dns__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dns__acts { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.dns__lock { display: flex; flex-direction: column; align-items: flex-end; font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-600); }
.dns__lock .meta { font: 400 12px var(--body); text-transform: none; letter-spacing: 0; text-align: right; max-width: 220px; }
.dns__unlock { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--sand-200); }
.dns__unlock .row { flex-wrap: nowrap; }
.dns__unlock input { height: 40px; max-width: 280px; background: var(--sand-50); }
.dns__form { display: flex; flex-direction: column; gap: 10px; }
.dns__fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dns__fields select, .dns__fields input { height: 40px; }
.dns__fields select { width: auto; flex: 0 0 auto; }
.dns__fields > input[name="content"] { flex: 1 1 240px; min-width: 0; }
.dns__namewrap { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.dns__namewrap input { width: 120px; }
.dns__prio { width: 84px; }
.dns__change { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.dreq + .dreq { border-top: 1px solid var(--line); padding-top: 14px; }
dialog.typed { border: 0; border-radius: 18px; padding: 22px; width: min(440px, calc(100vw - 32px)); background: var(--sand-50); color: var(--ink-900); box-shadow: 0 20px 60px rgba(31, 26, 22, .25); }
dialog.typed::backdrop { background: rgba(31, 26, 22, .45); }
dialog.typed input { width: 100%; }
@media (max-width: 760px) {
  .dns__row { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "type name" "value value" "acts acts"; gap: 4px 10px; }
  .dns__row > .dns__type { grid-area: type; }
  .dns__row > .dns__name { grid-area: name; }
  .dns__row > .dns__value { grid-area: value; white-space: normal; overflow-wrap: anywhere; }
  .dns__row > .dns__acts { grid-area: acts; justify-content: flex-start; }
  .dns__row.is-editing { grid-template-areas: none; grid-template-columns: 1fr; }
  .dns__lock { align-items: flex-start; }
  .dns__lock .meta { text-align: left; max-width: none; }
  .dns__namewrap { flex: 1 1 100%; }
  .dns__namewrap input { flex: 1; width: auto; }
}

/* ---------- Pre-founding (free month) and the Text client button ---------- */
.onb__pf { display: flex; flex-direction: column; gap: 6px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 12px 14px; }
.onb__pf.is-on { border-style: solid; border-color: var(--sage-600); background: var(--sage-100); }
.onb__pf .toggle strong { font-weight: 600; }
.onb__pf a.chip { text-decoration: none; }
.textmsg { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.textmsg__body { background: var(--sand-50); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.textmsg--dark .textmsg__body { background: rgba(251, 247, 240, .14); border-color: rgba(251, 247, 240, .22); color: var(--sand-50); }
.textmsg--dark .textmsg__to { color: var(--sand-200); }
.textmsg .row { flex-wrap: wrap; align-items: center; }

/* The Pre-founding page: one card per client, side by side. */
.pfsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pfsum__n { font: 400 34px/1 var(--display); margin: 6px 0 4px; }
.pfsum__top li { font-size: 14px; padding: 2px 0; }
.pfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.pfcard { display: flex; flex-direction: column; gap: 10px; }
.pfcard.is-due { box-shadow: inset 0 0 0 2px var(--ochre); }
.pfcard__name { font: 400 24px/1 var(--display); text-transform: uppercase; text-decoration: none; }
.pfanswers { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.pfans { display: flex; flex-direction: column; gap: 4px; }
.pfans__pay { font: 400 30px/1 var(--display); }
.pfans .chip { white-space: normal; text-align: left; }
.pfcard__none { border-top: 1px solid var(--line); padding-top: 10px; }
.pfcard__send { border-top: 1px solid var(--line); padding-top: 10px; }

/* Keep your site (client Billing tab, end of a free month). */
.keep__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.keep__plan { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--sand-50); cursor: pointer; }
.keep__plan:hover { border-color: var(--ink-400); }
.keep__plan.is-on { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.keep__name { font-weight: 600; }
.keep__price { font: 400 28px/1.05 var(--display); }
.keep__card { border-top: 1px solid var(--line); padding-top: 12px; align-items: center; flex-wrap: wrap; }
.keep__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-600); background: var(--sand-200); border-radius: 12px; padding: 12px; }
.keep__consent input { margin-top: 3px; flex: none; }

@media (max-width: 800px) {
  .pfsum { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pfgrid { grid-template-columns: minmax(0, 1fr); }
}