/* =====================================================================
   Klyvelo owner website. Same paper, ink and orange as the till
   (public/styles.css), but calmer: an owner reading figures on a phone.
   Brand colours, logo and wordmark: docs/brand.md.
   Mobile first; wider screens get two columns from 760px.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
  color-scheme: light dark;
  --bg: #f3f7f6;
  --surface: #ffffff;
  --surface-2: #eef4f1;
  --ink: #13211d;
  --ink-2: #4a5a55;
  --ink-3: #5e6e68;
  --line: #d4e3de;
  --line-2: #e3ece8;
  --ledger: #13211d;
  --ledger-2: #22332e;
  --on-ledger: #ffffff;
  --on-ledger-2: #b3b3b3;
  --amber: #8edcc5;
  --amber-2: #a3e4d1;
  --on-amber: #13211d;
  --good: #1b6b45;
  --good-bg: #e4f3ea;
  --bad: #b3261e;
  --bad-bg: #fbeae8;
  --warn: #8a5100;
  --warn-bg: #fff1d6;
  --info-bg: #f1efec;
  --focus: #2e6fdb;
  --link: #1c6e58;
  --bar: #c2c2c2;
  --grid: #e1ebe7;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --shadow-1: 0 1px 2px rgba(27, 31, 30, .05), 0 4px 14px rgba(27, 31, 30, .06);
  --shadow-2: 0 18px 44px rgba(27, 31, 30, .18), 0 3px 10px rgba(27, 31, 30, .08);
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --touch: 44px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Dark: the device asks for it (Automatic) unless this browser chose Light, or this browser chose Dark (web/theme.js).
   The two copies must stay the same (test/theme.test.js checks). :where() keeps the specificity of a plain :root. */
@media (prefers-color-scheme: dark) {
  :root:not(:where([data-theme="light"])) {
    --bg: #101615;
    --surface: #1a2220;
    --surface-2: #222c29;
    --ink: #eef5f2;
    --ink-2: #b9c9c3;
    --ink-3: #9cb0a9;
    --line: #2a3633;
    --line-2: #222c29;
    --ledger: #0b1210;
    --ledger-2: #1a2220;
    --on-ledger: #f2f2f2;
    --on-ledger-2: #a3a3a3;
    --amber: #7fe0c4;
    --amber-2: #7fe0c4;
    --good: #5bc98e;
    --good-bg: #12271c;
    --bad: #f08a80;
    --bad-bg: #2c1714;
    --warn: #f2be5c;
    --warn-bg: #2c2210;
    --info-bg: #1a2220;
    --link: #7fe0c4;
    --bar: #4a4a4a;
    --grid: #222c29;
    --shadow-1: 0 1px 0 rgba(0, 0, 0, .4);
    --shadow-2: 0 14px 36px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  }
  /* an ink button would vanish on a dark card: the main action turns Signal Orange with ink text (docs/brand.md) */
  :root:not(:where([data-theme="light"])) .btn.primary { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
  :root:not(:where([data-theme="light"])) .btn.primary:hover:not(:disabled) { background: var(--amber-2); border-color: var(--amber-2); }
}
:root:where([data-theme="dark"]) {
  --bg: #101615;
  --surface: #1a2220;
  --surface-2: #222c29;
  --ink: #eef5f2;
  --ink-2: #b9c9c3;
  --ink-3: #9cb0a9;
  --line: #2a3633;
  --line-2: #222c29;
  --ledger: #0b1210;
  --ledger-2: #1a2220;
  --on-ledger: #f2f2f2;
  --on-ledger-2: #a3a3a3;
  --amber: #7fe0c4;
  --amber-2: #7fe0c4;
  --good: #5bc98e;
  --good-bg: #12271c;
  --bad: #f08a80;
  --bad-bg: #2c1714;
  --warn: #f2be5c;
  --warn-bg: #2c2210;
  --info-bg: #1a2220;
  --link: #7fe0c4;
  --bar: #4a4a4a;
  --grid: #222c29;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .4);
  --shadow-2: 0 14px 36px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
}
/* an ink button would vanish on a dark card: the main action turns Signal Orange with ink text (docs/brand.md) */
:root:where([data-theme="dark"]) .btn.primary { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
:root:where([data-theme="dark"]) .btn.primary:hover:not(:disabled) { background: var(--amber-2); border-color: var(--amber-2); }

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }
h1 { font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -.02em; line-height: 1.15; }
/* Page headings and prices in the shelf-ticket headline face, as on the home page (docs/brand.md). */
main h1, .plan .price, .pp-price .price { font-family: "Archivo", var(--font); font-stretch: 75%; font-weight: 800; letter-spacing: -.005em; }
main h1 { font-size: 32px; line-height: 1.02; }
h2 { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
p { margin: 0 0 10px; }
a { color: var(--link); text-underline-offset: 2px; }
b, strong { font-weight: 600; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.num, .num-l { font-variant-numeric: tabular-nums; white-space: nowrap; }
.num { text-align: right; }
.neg { color: var(--bad); }
.warn-text { color: var(--warn); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: var(--r-sm); z-index: 100; }
.skip:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; min-height: 56px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(27, 31, 30, .06);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; letter-spacing: -.01em; color: var(--ink); text-decoration: none; margin-right: auto; min-height: var(--touch); }
/* the Klyvelo mark and wordmark: shared/brand/mark.svg, and the name set in Unbounded Bold (docs/brand.md) */
.brand-mark { width: 24px; height: 24px; flex: none; background: url("brand/mark.svg") center / contain no-repeat; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .brand-mark { background-image: url("brand/mark-on-dark.svg"); } }
:where(:root[data-theme="dark"]) .brand-mark { background-image: url("brand/mark-on-dark.svg"); }
.brand-text { font-family: "Unbounded", var(--font); font-weight: 700; letter-spacing: -.03em; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a, .nav button {
  font: inherit; font-weight: 500; color: var(--ink-2); text-decoration: none; background: none; border: 0; cursor: pointer;
  min-height: var(--touch); padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center;
}
.nav a, .nav button { white-space: nowrap; }
@media (max-width: 420px) {
  .topbar { padding: 6px 12px; gap: 4px; }
  .nav a, .nav button { font-size: 14px; padding: 0 7px; }
}
@media (max-width: 350px) { .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.nav a:hover, .nav button:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--bg); }

.demo-bar { background: var(--ledger); color: var(--on-ledger); padding: 8px 16px; font-size: 13px; text-align: center; }
.demo-bar a { color: var(--amber-2); }

/* ---------- layout ---------- */
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 16px 16px 48px; }
.page-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 12px; margin: 8px 0 16px; }
.page-head h1 { margin-right: auto; overflow-wrap: anywhere; }
.page-head .meta { display: flex; align-items: center; gap: 10px; }
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.span-2 { grid-column: 1 / -1; }
@media (min-width: 760px) {
  main { padding: 24px 24px 64px; }
  .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 30px; }
  main h1 { font-size: 42px; }
}
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }

.card {
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1);
  padding: 16px; min-width: 0; scroll-margin-top: 72px;
}
@media (min-width: 760px) { .card { padding: 20px; } }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.card > .btn { margin-top: 12px; }
h3.sub { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 16px 0 4px; font-weight: 600; }
.state { margin: 8px 0 0; }
.state.bad { color: var(--bad); background: var(--bad-bg); border-radius: var(--r-sm); padding: 12px; }
.state.bad p { margin-bottom: 8px; }
.state.good { color: var(--good, #1f6b45); background: var(--good-bg, #e3f1e8); border-radius: var(--r-sm); padding: 12px; }
.loading { color: var(--ink-3); }

/* ---------- inputs & buttons (same shapes as the till) ---------- */
.input {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0 12px; min-height: var(--touch); width: 100%;
}
.input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.field { display: block; }
.field > span:first-child { display: block; font-weight: 500; margin-bottom: 6px; }
.field .hint, .field-error { display: block; font-size: 13px; margin-top: 4px; }
.field .hint { color: var(--ink-3); }
.field-error { color: var(--bad); }
.field-error:empty { display: none; }
.pw { display: flex; gap: 8px; }
.pw .input { flex: 1; }
.form-error { color: var(--bad); background: var(--bad-bg); border-radius: var(--r-sm); padding: 10px 12px; margin: 0; }

.btn {
  font: inherit; font-weight: 500; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  min-height: var(--touch); padding: 0 16px; cursor: pointer; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--ledger); border-color: var(--ledger); color: var(--on-ledger); }
.btn.primary:hover:not(:disabled) { background: var(--ledger-2); border-color: var(--ledger-2); }
.btn.amber { background: var(--amber); border-color: var(--amber); color: var(--on-amber); font-weight: 600; }
.btn.amber:hover { background: var(--amber-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn.lg { min-height: 52px; font-size: 16px; padding: 0 22px; }
.btn.block { width: 100%; }

.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; vertical-align: 2px; }
.pill.active { background: var(--good-bg); color: var(--good); }
.pill.waiting { background: var(--warn-bg); color: var(--warn); }
.pill.past_due, .pill.suspended { background: var(--bad-bg); color: var(--bad); }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px; }
.banner p { margin: 0; flex: 1 1 240px; }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner.bad { background: var(--bad-bg); color: var(--bad); }
.banner.good { background: var(--good-bg); color: var(--good); }
.banner.info { background: var(--info-bg); color: var(--ink); }
.config-note { background: var(--warn-bg); color: var(--warn); padding: 10px 16px; font-size: 14px; text-align: center; }
.config-note code { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 13px; }

/* ---------- landing ---------- */
.hero-band { padding: 32px 0 8px; }
.hero-band h1 { font-size: 32px; max-width: 16ch; }
.hero-band .lede { font-size: 17px; color: var(--ink-2); max-width: 46ch; margin: 14px 0 20px; }
@media (min-width: 760px) { .hero-band { padding: 56px 0 16px; } .hero-band h1 { font-size: 44px; } }
.points { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.points li { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 16px 18px; }
.points h2 { font-size: 16px; margin-bottom: 4px; }
.points p { margin: 0; color: var(--ink-2); }
.section-title { margin: 40px 0 6px; }
.plans { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* Four cards with Free first: two by two on a tablet, one row on a wide screen. */
@media (min-width: 760px) { .plans:has(> .plan.free) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .plans:has(> .plan.free) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 18px; display: flex; flex-direction: column; border: 2px solid transparent; }
.plan.featured { border-color: var(--amber); }
.plan .founding { margin: 2px 0 6px; font-weight: 600; }
.plan .price { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.plan .per { font-size: 15px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.plan .btn { margin-top: auto; }
.plan > p.muted { margin-bottom: 16px; }
.foot { text-align: center; color: var(--ink-3); font-size: 13px; padding: 24px 16px 32px; }

/* ---------- auth pages ---------- */
.auth { max-width: 440px; margin: 16px auto 0; }
.auth h1 { margin-bottom: 6px; }
.auth form > * + * { margin-top: 14px; }
.auth .alt { margin-top: 18px; text-align: center; }
/* From 960px the page splits: the form on the left, an ink brand panel on the right with a till slip printing out.
   On phones the panel is hidden and the form is the whole page, as before. */
.auth-side { display: none; }
@media (min-width: 960px) {
  .auth-main { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 32px; }
  .auth-main > .auth { margin: 0 auto; width: 100%; }
  .auth-main > .auth.card { padding: 32px; }
  /* A page with the form alone (setup.html): one centred column. */
  .auth-main:not(:has(.auth-side)) { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .auth-side {
    display: flex; flex-direction: column; justify-content: center; gap: 36px; position: sticky; top: 88px; overflow: hidden;
    min-height: min(640px, calc(100svh - 140px)); padding: 56px; border-radius: 32px;
    background: #13211d; color: #fff; isolation: isolate;
  }
  /* Signal Orange light behind the slip */
  .auth-side::before {
    content: ""; position: absolute; z-index: -1; right: -10%; bottom: -20%; width: 80%; height: 80%; border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 91 31 / .45), rgb(255 91 31 / .1) 55%, transparent); filter: blur(30px);
  }
  .auth-side-title {
    margin: 0; max-width: 11ch; font-family: "Archivo", var(--font); font-stretch: 70%; font-weight: 800;
    font-size: clamp(44px, 4.6vw, 68px); line-height: .92; letter-spacing: -.01em; text-wrap: balance;
  }
  .auth-slip {
    position: relative; align-self: flex-end; width: min(300px, 80%); margin-right: 4%; padding: 18px 18px 24px; rotate: -2deg;
    background: #fbfaf6; color: #22261f; font: 500 12.5px/1.5 var(--font); font-variant-numeric: tabular-nums; box-shadow: 0 30px 50px -20px rgb(0 0 0 / .6);
    transform-origin: top center; animation: auth-slip-print 1.4s cubic-bezier(.2, .7, .2, 1) .3s both;
  }
  .auth-slip::after { /* torn bottom edge */
    content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
    background: radial-gradient(circle at 6px 0, transparent 5px, #fbfaf6 5.5px) bottom left / 12px 8px repeat-x;
  }
  .auth-slip-head { margin: 0 0 10px; text-align: center; font-weight: 600; letter-spacing: .08em; }
  .auth-slip-head span { display: block; font-size: 11.5px; letter-spacing: .02em; opacity: .7; font-weight: 500; }
  .auth-slip ul { list-style: none; margin: 0; padding: 10px 0; display: grid; gap: 5px; border-block: 1px dashed rgb(34 38 31 / .45); }
  .auth-slip li { display: flex; gap: 6px; align-items: baseline; }
  .auth-slip li span { flex: 1; display: flex; gap: 6px; }
  .auth-slip li span::after { content: ""; flex: 1; min-width: 8px; border-bottom: 1px dotted rgb(34 38 31 / .4); translate: 0 -4px; }
  .auth-slip li b { font-weight: 600; white-space: nowrap; }
  .auth-slip li.total { margin-top: 4px; font-size: 13.5px; font-weight: 600; }
  .auth-slip-foot { margin: 10px 0 0; text-align: center; font-size: 11.5px; opacity: .75; }
}
@keyframes auth-slip-print {
  from { clip-path: inset(0 0 100% 0); translate: 0 -14px; }
  to { clip-path: inset(0 0 -20px 0); translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .auth-slip { animation: none; } }

/* ---------- dashboard ---------- */
.hero { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 760px) { .hero { font-size: 38px; } }
.kpis, .glance, .limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 420px) { .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpis div, .glance div, .limits div { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px; min-width: 0; }
dt { font-size: 13px; color: var(--ink-3); }
dd { margin: 0; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.limits { margin: 10px 0 0; }

/* Owner dashboard: the new look's cards are at the end of this file ("dashboard, new look"). */
body:is([data-page="app"], [data-page="staff"], [data-page="billing"], [data-page="account"]) main { max-width: 1240px; }
.stores, .rank, .low, .tills { list-style: none; margin: 12px 0 0; padding: 0; }
.stores li, .rank li, .low li, .tills li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line-2);
}
.stores li:first-child, .rank li:first-child, .low li:first-child, .tills li:first-child { border-top: 0; }
.s-name, .r-name, .l-name, .t-name { font-weight: 500; overflow-wrap: anywhere; }
.s-rev, .r-rev, .l-qty { font-weight: 600; }
.s-meta, .r-meta, .l-meta, .t-meta { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rank { counter-reset: rank; }
.rank li { grid-template-columns: 24px minmax(0, 1fr) auto; }
.rank li::before { counter-increment: rank; content: counter(rank); color: var(--ink-3); font-variant-numeric: tabular-nums; grid-row: 1; }
.rank .r-meta { grid-column: 2 / -1; }
.code-sm { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 13px; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; margin-right: 4px; }

.chart-box { width: 100%; overflow: hidden; }
.chart { display: block; max-width: 100%; height: auto; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { fill: var(--ink-3); font-size: 12px; }
.chart .axis.strong { fill: var(--ink); font-weight: 600; }
.chart .bar { fill: var(--bar); }
.chart .bar.today { fill: var(--amber); }
.numbers { margin-top: 8px; }
.numbers summary { cursor: pointer; color: var(--link); min-height: var(--touch); display: flex; align-items: center; width: max-content; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 4px; border-top: 1px solid var(--line-2); font-weight: 400; }
thead th { font-size: 13px; color: var(--ink-3); border-top: 0; }
th.num, td.num { text-align: right; }

/* ---------- dialog ---------- */
dialog {
  border: 0; padding: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  background: var(--surface); color: var(--ink);
  width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
}
dialog::backdrop { background: rgba(14, 19, 18, .45); }
.dlg-body { padding: 20px; }
.code-lg {
  display: block; font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 600; letter-spacing: .08em; text-align: center;
  background: var(--ledger); color: var(--amber); border-radius: var(--r-md); padding: 18px 8px; font-variant-numeric: tabular-nums;
  user-select: all; overflow-wrap: anywhere;
}
@media (max-width: 360px) { .code-lg { font-size: 32px; } }
.instruction { background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px; }
.copied:empty { display: none; }

.limits .over dd { color: var(--bad); }

/* ---------- business switcher (owners with several businesses) ---------- */
.topbar:has(.biz:not([hidden])) .brand { margin-right: 0; }
.biz { position: relative; margin-right: auto; min-width: 0; flex: 0 1 auto; max-width: 260px; }
.biz-btn {
  font: inherit; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line);
  min-height: var(--touch); padding: 0 10px 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; max-width: 100%;
}
.biz-btn:hover { background: var(--bg); }
.biz-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.biz-btn svg { flex: none; transition: transform .15s; }
.biz-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.biz-menu {
  position: absolute; left: 0; top: calc(100% + 6px); width: 300px; max-width: calc(100vw - 24px);
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 8px; z-index: 10;
}
.biz-me { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; overflow-wrap: anywhere; }
.biz-menu ul { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.biz-item, .biz-add {
  font: inherit; color: var(--ink); background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; padding: 8px 10px; border-radius: var(--r-sm); min-height: var(--touch);
}
.biz-item small { grid-column: 1; }
.biz-item .tick { grid-row: 1 / span 2; grid-column: 2; color: var(--good); font-weight: 700; }
.biz-item:hover, .biz-add:hover { background: var(--surface-2); }
.biz-item[aria-current="true"] { background: var(--info-bg); cursor: default; }
.biz-add { display: flex; gap: 8px; font-weight: 600; color: var(--link); border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: 6px; }
@media (max-width: 520px) {
  .topbar:has(.biz:not([hidden])) .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .biz { position: static; }
  .biz-menu { left: 12px; right: 12px; width: auto; top: calc(100% + 2px); }
}
.plan-choice h2 { margin: 0 0 4px; font-size: 18px; }
.plan-choice > div:first-child { flex: 1 1 280px; }
.plan-choice .row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- signed-in header: links, and a Menu button on a phone ---------- */
.nav-links { display: flex; align-items: center; gap: 2px; }
.menu-btn { display: none !important; }
@media (max-width: 640px) {
  .menu-btn { display: inline-flex !important; border: 1px solid var(--line) !important; }
  .nav { position: relative; }
  .nav-links {
    display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; z-index: 10;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  }
  .nav-links.open { display: flex; }
  .nav-links a, .nav-links button { border-radius: var(--r-sm); justify-content: flex-start; }
}

/* ---------- accounts and security ---------- */
.btn.danger { background: var(--bad); border-color: var(--bad); color: var(--surface); font-weight: 600; }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 85%, #000); }
.link-btn { font: inherit; color: var(--link); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mail-art { width: 56px; height: 40px; border-radius: 8px; background: var(--ledger); position: relative; }
.mail-art::before { content: ""; position: absolute; inset: 6px 8px auto; height: 18px; border: 3px solid var(--amber); border-top: 0; border-right: 0; transform: rotate(-45deg) skew(10deg, 10deg); transform-origin: 50% 50%; width: 22px; left: 14px; top: 2px; }
.tick-list { margin: 0; padding-left: 20px; }
.tick-list li + li { margin-top: 4px; }
.turnstile:empty { display: none; }
.turnstile { min-height: 65px; }
.page-lede { max-width: 70ch; margin: -6px 0 16px; }
.code-input { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 22px; letter-spacing: .3em; text-align: center; max-width: 220px; }
.steps { margin: 0 0 12px; padding-left: 22px; }
.steps > li + li { margin-top: 14px; }
.qr-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 10px; }
.qr-box img { width: 180px; height: 180px; background: #fff; border-radius: var(--r-sm); padding: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.qr-box > div { display: grid; gap: 2px; min-width: 0; }
.key { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 15px; background: var(--surface-2); padding: 6px 10px; border-radius: var(--r-sm); overflow-wrap: anywhere; user-select: all; }
.code-form { margin-top: 10px; }
.tills li.revoked .t-name { color: var(--ink-3); }
.tills li .btn.sm, .tills li .pill { justify-self: end; align-self: center; }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.people li:first-child { border-top: 0; }
.p-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--info-bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 14px; }
.p-main { display: grid; min-width: 0; }
.p-main b, .p-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
  .people li { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .people li .btn { grid-column: 2 / -1; justify-self: start; }
}
.choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.choices legend { font-weight: 500; margin-bottom: 6px; padding: 0; }
.choice { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--ledger); background: var(--info-bg); }
.choice input { margin-top: 4px; accent-color: var(--ledger); }
.choice span { display: grid; gap: 2px; }
.choice small { color: var(--ink-3); font-size: 13px; }

/* ---------- sign-up steps (docs/signup-onboarding.md) ---------- */
.wizard { max-width: 520px; }
.wizard-head { margin: -2px 0 16px; }
.wizard-count { margin: 0 0 6px; font-weight: 500; }
.wizard-bar { height: 6px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.wizard-bar > span { display: block; height: 100%; width: 12%; background: var(--amber); border-radius: inherit; transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .wizard-bar > span { transition: none; } }
.wizard section > h1:focus { outline: none; }
.wizard section > * + * { margin-top: 12px; }
.wizard form > * + * { margin-top: 14px; }
.two { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choices.inline { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.choices.inline legend, .grid-choices legend { grid-column: 1 / -1; }
.grid-choices { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* The type of shop: two columns even on a phone, so sixteen choices stay short. */
.grid-choices.compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grid-choices.compact .choice { padding: 8px 10px; font-size: 15px; gap: 8px; }
.choice { min-height: var(--touch); }
/* The sign-up's "I agree to the Terms and Privacy Policy" tick box. */
.agree { display: flex; gap: 10px; align-items: flex-start; min-height: var(--touch); padding: 6px 0; cursor: pointer; line-height: 1.45; }
.agree input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ledger); }
.agree a { color: var(--link); }
.choices:disabled .choice { opacity: .6; cursor: default; }
.note { background: var(--info-bg); border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; color: var(--ink-2); margin: 0; }
.wizard-nav { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.wizard-nav .btn.primary { margin-left: auto; min-width: 140px; }
.wizard-nav [hidden] + .btn.primary, .wizard-nav .btn.primary:only-child { margin-left: auto; }
.mono { font-family: var(--font); font-variant-numeric: tabular-nums; }
.done-mark { width: 52px; height: 52px; border-radius: 50%; background: var(--good-bg); position: relative; }
.done-mark::after { content: ""; position: absolute; left: 18px; top: 13px; width: 14px; height: 24px; border: solid var(--good); border-width: 0 4px 4px 0; transform: rotate(45deg); }
.next-steps { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.next-steps li > .btn, .next-steps li .hint { display: flex; width: fit-content; margin-top: 8px; }
.next-steps li .hint { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.next-steps .state { display: block; }

/* ---------- dashboard: "Finish setting up" ---------- */
.setup .wizard-bar { margin: 2px 0 10px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
@media (min-width: 760px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); min-height: var(--touch); }
.checklist .check { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); position: relative; }
.checklist li.done .check { background: var(--good); box-shadow: none; }
.checklist li.done .check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checklist .c-label small { display: block; font-size: 13px; line-height: 1.35; }
.checklist li.done .c-label { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line); }

/* ---------------------------------------------------------------------------------------------------------------
   Plans: billing.html's Yoco-style panel, the landing page's cards, the full comparison (web/plansui.js)
   --------------------------------------------------------------------------------------------------------------- */
.plan .price .per, .pp-price .per { font-family: var(--font); font-stretch: normal; font-size: 15px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.pp-note { color: var(--good); font-weight: 600; margin: 4px 0 8px; }
.feat-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.feat-list li { display: flex; gap: 8px; align-items: flex-start; }
.feat-list li svg { flex: none; margin-top: 3px; color: var(--good); }
.feat-list li span { display: flex; flex-direction: column; }
.feat-list li small { color: var(--ink-3); font-size: 13px; }
.feat-list.compact { margin: 6px 0 14px; gap: 4px; font-size: 14px; flex: 1; }
.plan-manage { margin-top: 14px; }
.plan-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 12px; }
.plan-tab { font: inherit; font-weight: 600; min-height: var(--touch); padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; white-space: nowrap; }
.plan-tab small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.plan-tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.plan-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.plan-panel h2 { margin: 0 0 4px; }
.pp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.pp-head > div:first-child { flex: 1 1 260px; }
.pp-head .muted { margin: 0; }
.pp-price .price { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin: 0; font-variant-numeric: tabular-nums; }
.pp-price .muted { margin: 2px 0 0; }
.pp-action { max-width: 360px; margin: 6px 0 4px; }
.pp-sub { font-size: 17px; margin: 22px 0 4px; }
.compare { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.compare th, .compare td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); text-align: center; vertical-align: middle; }
.compare th[scope="row"], .compare thead th:first-child { text-align: left; font-weight: 500; }
.compare thead th { font-weight: 600; vertical-align: bottom; }
.compare thead th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; }
.compare tr.grp th { text-align: left; font-weight: 600; background: var(--surface-2); color: var(--ink-2); }
.compare .tick { color: var(--good); display: inline-flex; }
.compare .no { color: var(--ink-3); }
.full-compare { margin-top: 18px; }
.full-compare > summary { cursor: pointer; font-weight: 600; color: var(--link); min-height: var(--touch); display: flex; align-items: center; }
.full-compare.wide { grid-column: 1 / -1; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 4px 18px 14px; margin-top: 4px; }
@media (min-width: 760px) { .full-compare.wide { grid-column: 1 / -1; } }
/* Monthly / Yearly, the money box with the extra-tills stepper, the landing cards' extras */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; margin: 14px 0 4px; max-width: 100%; flex-wrap: wrap; }
.seg-btn { font: inherit; font-weight: 600; min-height: var(--touch); padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg-btn:focus-visible, .step:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.save-tag { font-size: 12px; font-weight: 600; color: var(--good); background: var(--good-bg); border-radius: 999px; padding: 2px 8px; }
.vat { font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.pp-sum { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 14px; margin: 10px 0 12px; max-width: 520px; display: grid; gap: 8px; }
.sum-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.sum-row > span:last-child { white-space: nowrap; }
.sum-row.total { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700; font-size: 18px; }
.stepper-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.stepper .step { font: inherit; font-size: 18px; width: var(--touch); height: var(--touch); border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.stepper .step:disabled { color: var(--ink-3); cursor: default; opacity: .5; }
.stepper output { min-width: 2ch; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sum-facts { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--ink-2); display: grid; gap: 2px; }
.sum-facts li::before { content: "\2022"; color: var(--good); margin-right: 6px; }
.good-text { color: var(--good); margin: 0; }
.bad-text { color: var(--bad); }
.pp-sum .warn-text { margin: 0; }
.plan-flag { margin: 0 0 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--warn); }
.feat-list.plan-limits { flex: none; margin-bottom: 4px; }
.plans-foot { grid-column: 1 / -1; margin: 0; }
/* The WhatsApp messages card (dashboard, billing) */
.billing-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 14px; }
.billing-grid .plan-manage { margin-top: 0; }
/* Plan and billing: past payments, the card and cancelling (docs/billing-flow-2026.md). */
.pay-card { margin-top: 16px; }
.pay-rows { display: grid; gap: 10px; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.pay-row h3 { margin: 0; font-size: 16px; }
.pay-row p { margin: 2px 0 0; color: var(--ink-3); font-size: 14px; }
.pay-row .btn { justify-self: end; }
@media (max-width: 560px) { .pay-row { grid-template-columns: minmax(0, 1fr); } .pay-row .btn { justify-self: start; } }
.pay-history { margin-top: 14px; }
.pay-history td.bad { color: var(--bad); }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.reasons legend { font-weight: 500; margin-bottom: 8px; padding: 0; }
.reasons label { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.reasons label:has(input:checked) { border-color: var(--ledger); background: var(--info-bg); }
.reasons input { accent-color: var(--ledger); }
.cancel-line { background: var(--surface-2); border-radius: var(--r-sm); padding: 12px 14px; font-weight: 600; }
@media (min-width: 1100px) { .billing-grid { grid-template-columns: minmax(0, 1fr) 320px; } .billing-grid .msg-card { position: sticky; top: 16px; } }
.msg-card .msg-count { margin: 4px 0 6px; font-size: 15px; }
.msg-card .msg-count b { font-size: 26px; font-variant-numeric: tabular-nums; }
.meter { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--good); border-radius: inherit; }
.meter.warn > span { background: var(--warn); }
.meter.bad > span { background: var(--bad); }
.msg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; }
.msg-facts div { background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; min-width: 0; }
.msg-facts dt { font-size: 12px; color: var(--ink-3); }
.msg-facts dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.msg-card .bundles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg-card p.small { margin: 6px 0; }

/* download.html */
.dl-hero { display: grid; gap: 16px; align-items: center; }
.dl-hero > #download { order: -1; }
@media (min-width: 760px) { .dl-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .dl-hero > #download { order: 2; } }
.dl-card .btn { margin-top: 8px; }
.dl-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 12px 0 0; font-size: 14px; }
.dl-meta dt { color: var(--ink-3); }
.dl-meta dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 400; }
.dl-meta .mono { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 12px; white-space: normal; text-overflow: clip; overflow: visible; word-break: break-all; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 14px 16px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--amber); color: var(--on-amber); font-weight: 600; }
.steps h3 { margin: 4px 0 2px; font-size: 16px; }
.steps p { margin: 0; }
.reqs { margin: 0; padding-left: 20px; }
.reqs li { margin: 4px 0; }
/* download.html: one designed page, a grouped list of devices (thin dividers, no stacked cards). */
.lead { max-width: 68ch; margin: 0 0 20px; }
.dev-rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.dev-rows > li { padding: 18px 20px; }
.dev-rows > li + li { border-top: 1px solid var(--line-2); }
.dev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.dev-head h2 { margin: 0; font-size: 18px; }
.dev-steps { margin: 0 0 6px; padding-left: 22px; }
.dev-steps li { margin: 4px 0; }
.dev-steps a { overflow-wrap: anywhere; }
.plan-lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; border: 1px dashed var(--line); }
.plan-lock h2 { margin: 0 0 4px; font-size: 18px; }
.plan-lock p { margin: 0; }

/* ---------------------------------------------------------------------------------------------------------------
   The Klyvelo support console (console.html, console-business.html, web/console.js), "View as the owner" and the
   business's own side (Account → Klyvelo support access, the dashboard's request card)
   --------------------------------------------------------------------------------------------------------------- */
dialog.side {
  margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(520px, 100vw); max-width: 100vw; border-radius: var(--r-lg) 0 0 var(--r-lg);
  overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 560px) { dialog.side { width: 100vw; border-radius: 0; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-head h2 { overflow-wrap: anywhere; }
textarea.input { min-height: 72px; padding-top: 10px; padding-bottom: 10px; resize: vertical; line-height: 1.4; }
.gate { max-width: 640px; }
.crumb { margin: 4px 0 0; font-size: 14px; }
.pill.sm { font-size: 11px; padding: 1px 7px; }
.kpi-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.kpi-group h2.sub { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 8px; font-weight: 600; }
.kpi-row { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .kpi-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kpi {
  font: inherit; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid transparent; border-radius: var(--r-md);
  box-shadow: var(--shadow-1); padding: 12px 14px; display: grid; gap: 2px; cursor: pointer; min-width: 0; min-height: var(--touch);
}
.kpi:hover { border-color: var(--line); }
.kpi-n { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-l { font-size: 13px; color: var(--ink-2); }
.kpi-h { font-size: 12px; color: var(--ink-3); }
.kpi.good .kpi-n { color: var(--good); }
.kpi.warn { background: var(--warn-bg); } .kpi.warn .kpi-n { color: var(--warn); }
.kpi.bad { background: var(--bad-bg); } .kpi.bad .kpi-n { color: var(--bad); }
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin: 4px 0 12px; }
.filters .field { flex: 1 1 140px; min-width: 0; }
.filters .field.grow { flex: 3 1 240px; }
.filters .btn { flex: none; }
.blist { list-style: none; margin: 0; padding: 0; }
.blist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line-2); align-items: center; }
.blist li:first-child { border-top: 0; }
.b-name { font-weight: 600; overflow-wrap: anywhere; text-align: left; }
.b-pills { white-space: nowrap; }
.b-meta { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
@media (max-width: 480px) { .blist li { grid-template-columns: minmax(0, 1fr); } .b-pills { white-space: normal; } }
/* The console's Feedback list: the message as typed (its line breaks kept), then its buttons. */
.fb-msg { grid-column: 1 / -1; margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pager { justify-content: space-between; margin-top: 12px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 12px; }
.facts div { background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; min-width: 0; }
.facts dd { font-size: 15px; white-space: normal; overflow-wrap: anywhere; }
.tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--surface-2); border-radius: 999px; margin-bottom: 16px; }
.tab {
  font: inherit; font-weight: 600; font-size: 14px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-2); cursor: pointer; white-space: nowrap; flex: none;
}
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.tab .lock { font-size: 11px; }
.tab-panel:focus { outline: none; }
.session-bar {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 16px; font-size: 14px; border-bottom: 1px solid var(--line);
}
.session-bar p { margin: 0; flex: 1 1 320px; }
.session-bar.none { background: var(--surface-2); }
.session-bar.pending { background: var(--warn-bg); color: var(--warn); }
.session-bar.active { background: var(--ledger); color: var(--on-ledger); }
.session-bar.active .muted { color: var(--on-ledger-2); }
.session-bar.active .btn:not(.danger) { background: transparent; color: var(--on-ledger); border-color: var(--on-ledger-2); }
.session-bar .form-error { flex-basis: 100%; }
.code-input.sm { font-size: 16px; max-width: 130px; min-height: 36px; }
.locked { text-align: left; max-width: 640px; }
.t-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.logins .l-pills { white-space: nowrap; }
@media (max-width: 640px) { .logins li { grid-template-columns: 40px minmax(0, 1fr); } .logins .l-pills { grid-column: 2; white-space: normal; } }
.reveal-box { margin-top: 6px; }
.revealed { background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 0 4px; }
pre.key { white-space: pre-wrap; margin: 10px 0 0; font-size: 13px; }
.viewas-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: var(--amber); color: var(--on-amber); font-size: 14px; position: sticky; top: 0; z-index: 5; }
.viewas-bar p { margin: 0; flex: 1 1 320px; }
.viewas-bar.bad { background: var(--bad-bg); color: var(--bad); }
.view-as main [data-view-locked] { opacity: .45; cursor: not-allowed; }
.support-pending { background: var(--warn-bg); border-radius: var(--r-md); padding: 12px 14px; margin-top: 8px; }
.code-lg.sm { font-size: 30px; padding: 10px 8px; margin: 8px 0 10px; max-width: 280px; }
.contacts .contact-tick { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); white-space: nowrap; }
.contacts li { grid-template-columns: 40px minmax(0, 1fr) auto; }
.support-request { border: 2px solid var(--amber); }

/* =====================================================================
   The new look (owner-approved mock-up site/public/mockups/app-look.html, 2026-10-21): the sign-in pages
   (<html data-look="new">) and the back office (<html data-layout="bo">, web/bo/bo.css has the frame).
   Tokens copied from the marketing site (site/src/app/globals.css): neutral warm white and charcoal, one accent per
   product area, Unbounded 600 headings, IBM Plex Sans for everything people read. The old names (--ledger, --amber...)
   are kept and pointed at the new colours, so every back-office page follows without its own changes.
   ===================================================================== */
:root:is([data-look="new"], [data-layout="bo"]) {
  --bg: #f5f5f3; --surface: #ffffff; --surface-2: #eeeeec;
  --ink: #141516; --ink-2: #3a3c3f; --ink-3: #5f6164;
  --line: rgb(17 17 17 / .14); --line-2: rgb(17 17 17 / .08);
  --ledger: #111213; --ledger-2: #1e1f21; --on-ledger: #f2f2f0; --on-ledger-2: #a9abad;
  --amber: #8edcc5; --amber-2: #a3e4d1; --on-amber: #141516;
  --info-bg: #efefed; --focus: #17735a; --link: #17735a; --bar: #e4e4e1; --grid: rgb(17 17 17 / .07);
  --night: #111213; --on-night: #f2f2f0; --on-night-2: #a9abad;
  --sea: #8edcc5; --sea-lo: #5fc7a8; --sea-deep: #17735a; --sea-soft: #e3f6f0;
  --loy: #ff7a59; --loy-deep: #b8432a; --loy-soft: #ffe9e2;
  --book: #f5b842; --book-deep: #8a5a00; --book-soft: #fff3d6;
  --stock: #3ba7f0; --stock-deep: #0f6aa8; --stock-soft: #e2f2fd;
  --nav: rgb(255 255 255 / .74); --nav-line: rgb(17 17 17 / .08);
  --nav-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 1px 2px rgb(17 17 17 / .05), 0 14px 34px -14px rgb(17 17 17 / .22);
  --lift: 0 1px 0 rgb(255 255 255 / .7) inset, 0 2px 4px rgb(17 17 17 / .04), 0 18px 40px -16px rgb(17 17 17 / .22);
  --float: 0 24px 60px -18px rgb(10 10 12 / .45), 0 8px 18px -8px rgb(10 10 12 / .25);
  --shadow-1: var(--lift); --shadow-2: var(--float);
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --display: "Unbounded", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:is([data-look="new"], [data-layout="bo"]):not(:where([data-theme="light"])) {
    --bg: #0c0c0d; --surface: #161718; --surface-2: #1e1f21;
    --ink: #f2f2f0; --ink-2: #cfd0d1; --ink-3: #a9abad;
    --line: rgb(242 242 240 / .18); --line-2: rgb(242 242 240 / .09);
    --ledger: #111213; --ledger-2: #1e1f21;
    --amber: #7fe0c4; --amber-2: #a3e4d1;
    --info-bg: #1e1f21; --focus: #7fe0c4; --link: #7fe0c4; --bar: #2a2b2e; --grid: rgb(242 242 240 / .08);
    --sea-deep: #7fe0c4; --sea-soft: #132a24; --loy-deep: #ff9c80; --loy-soft: #33201b;
    --book-deep: #f5c462; --book-soft: #30271a; --stock-deep: #7cc4f5; --stock-soft: #14263a;
    --nav: rgb(30 31 33 / .74); --nav-line: rgb(242 242 240 / .1);
    --nav-shadow: 0 1px 0 rgb(255 255 255 / .07) inset, 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -14px rgb(0 0 0 / .65);
    --lift: 0 1px 0 rgb(255 255 255 / .05) inset, 0 2px 4px rgb(0 0 0 / .3), 0 18px 40px -16px rgb(0 0 0 / .6);
  }
}
:root:is([data-look="new"], [data-layout="bo"]):where([data-theme="dark"]) {
  --bg: #0c0c0d; --surface: #161718; --surface-2: #1e1f21;
  --ink: #f2f2f0; --ink-2: #cfd0d1; --ink-3: #a9abad;
  --line: rgb(242 242 240 / .18); --line-2: rgb(242 242 240 / .09);
  --ledger: #111213; --ledger-2: #1e1f21;
  --amber: #7fe0c4; --amber-2: #a3e4d1;
  --info-bg: #1e1f21; --focus: #7fe0c4; --link: #7fe0c4; --bar: #2a2b2e; --grid: rgb(242 242 240 / .08);
  --sea-deep: #7fe0c4; --sea-soft: #132a24; --loy-deep: #ff9c80; --loy-soft: #33201b;
  --book-deep: #f5c462; --book-soft: #30271a; --stock-deep: #7cc4f5; --stock-soft: #14263a;
  --nav: rgb(30 31 33 / .74); --nav-line: rgb(242 242 240 / .1);
  --nav-shadow: 0 1px 0 rgb(255 255 255 / .07) inset, 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -14px rgb(0 0 0 / .65);
  --lift: 0 1px 0 rgb(255 255 255 / .05) inset, 0 2px 4px rgb(0 0 0 / .3), 0 18px 40px -16px rgb(0 0 0 / .6);
}
:root:is([data-look="new"], [data-layout="bo"]) main h1,
:root:is([data-look="new"], [data-layout="bo"]) :is(.plan .price, .pp-price .price) {
  font-family: var(--display); font-stretch: normal; font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
}
/* Pill buttons; the main action in seafoam with ink text, in light and dark. */
:root:is([data-look="new"], [data-layout="bo"]) .btn { border-radius: 999px; font-weight: 600; border-color: var(--line); }
:root:is([data-look="new"], [data-layout="bo"]) .btn.primary { background: var(--sea); border-color: transparent; color: #141516; box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 10px 24px -12px rgb(23 115 90 / .55); }
:root:is([data-look="new"], [data-layout="bo"]) .btn.primary:hover:not(:disabled) { background: var(--amber-2); border-color: transparent; }
:root:is([data-look="new"], [data-layout="bo"]) .input:focus { border-color: var(--sea-lo); box-shadow: 0 0 0 4px rgb(142 220 197 / .35); }
:root:is([data-look="new"], [data-layout="bo"]) .card { border-radius: var(--r-lg); }
@media (min-width: 760px) { :root:is([data-look="new"], [data-layout="bo"]) .card { padding: 24px; } }

/* ---------- auth pages, new look (login.html, forgot.html, reset.html) ---------- */
.au-page { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px; }
.au-side { display: flex; flex-direction: column; min-width: 0; padding: 8px 4px 4px; }
.au-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.au-logo { display: inline-flex; min-height: 44px; align-items: center; }
.au-logo img { height: 30px; width: auto; display: block; }
.au-logo .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .au-logo .logo-light { display: none; } :where(:root:not([data-theme="light"])) .au-logo .logo-dark { display: block; } }
:where(:root[data-theme="dark"]) .au-logo .logo-light { display: none; } :where(:root[data-theme="dark"]) .au-logo .logo-dark { display: block; }
.au-ghost {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap;
}
.au-ghost:hover { background: var(--surface-2); }
.au-page main.auth { flex: none; max-width: 420px; width: 100%; margin: 0; padding: 28px 0 32px; }
.au-page .auth h1 { font-size: clamp(34px, 8vw, 52px); line-height: 1.02; margin: 0; }
.au-page .auth .lede { margin: 12px 0 0; font-size: 17px; }
.au-page .field { margin-top: 22px; }
.au-page .field > span:first-child, .au-page .field > label, .au-lrow label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.au-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.au-quiet { font-weight: 600; font-size: 14px; color: var(--ink-3); text-decoration: none; padding: 4px 0; }
.au-quiet:hover, .au-quiet:focus-visible { color: var(--ink); text-decoration: underline; }
/* The console's "Open with Face ID" (web.js consolePasskeyLogin): in place of the form, "Use password instead" under it. */
.au-passkey { margin-top: 8px; }
.au-passkey[hidden], .au-other[hidden] { display: none; }
.au-other { text-align: center; margin-top: 14px; }
.au-or[hidden] { display: none; }
.au-page .input { min-height: 56px; font-size: 17px; padding: 0 16px; border-radius: var(--r-md); box-shadow: 0 1px 2px rgb(17 17 17 / .04); }
.au-page .input.code-input { font-size: 24px; max-width: 240px; }
/* The password and its Show button in one box, as on the mock-up. */
.au-input { position: relative; display: flex; }
.au-input .input { padding-right: 84px; }
.au-input .btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 14px; font-size: 14px;
  border: 0; background: var(--surface-2); color: var(--ink);
}
.au-input .btn:active { transform: translateY(-50%) scale(.97); }
.au-page .form-error, .au-page .state { margin-top: 18px; }
.au-page .btn.primary.lg { min-height: 56px; font-size: 17px; font-weight: 700; margin-top: 26px; }
.au-page .btn.primary.lg:hover:not(:disabled) { transform: translateY(-1px); }
.au-page .alt { margin-top: 22px; text-align: center; font-size: 15px; }
.au-page #mfa-form > p:first-child { margin-top: 20px; }
.au-page #mfa-form .alt { text-align: left; font-size: 14px; }
.au-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; margin-bottom: 28px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--lift); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.au-back:hover { background: var(--surface-2); }
.au-sent { margin-top: 22px; padding: 16px 18px; border-radius: var(--r-md); background: var(--sea-soft); color: var(--ink); font-size: 15px; }
.au-sent > b { display: block; margin-bottom: 2px; }
.au-sent p { margin: 4px 0 0; }
.au-sent #done-email { overflow-wrap: anywhere; }
.au-sent:focus { outline: none; }
.au-legal { margin-top: auto; color: var(--ink-3); font-size: 13px; padding-top: 8px; }
/* The night panel: only the animated K, centred. Above the form on a phone. */
.au-art {
  order: -1; position: relative; display: grid; place-items: center; min-height: 240px; border-radius: var(--r-xl); overflow: hidden;
  background: var(--night); box-shadow: var(--lift);
}
.kmark { width: clamp(110px, 16vw, 240px); height: auto; overflow: visible; display: block; }
.kmark > * { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .k-stem { transform-origin: 50% 100%; animation: k-stem .6s cubic-bezier(.2, .9, .2, 1) both .2s; }
  .k-arm { transform-origin: 0% 100%; animation: k-fold .7s cubic-bezier(.2, 1.3, .4, 1) both .55s; }
  .k-leg { transform-origin: 0% 0%; animation: k-fold .7s cubic-bezier(.2, 1.3, .4, 1) both .75s; }
  .k-echo1 { animation: k-echo 3.6s ease-in-out infinite 1.3s; }
  .k-echo2 { animation: k-echo 3.6s ease-in-out infinite 1.5s; }
}
@keyframes k-stem { from { transform: scaleY(0); } }
@keyframes k-fold { from { opacity: 0; transform: translateX(-30%) scale(.6); } }
@keyframes k-echo { 0% { opacity: 0; transform: translateX(-14px); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(10px); } }
@media (min-width: 821px) {
  .au-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(16px, 2vw, 28px); padding: clamp(12px, 1.6vw, 20px); }
  .au-side { padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 72px); }
  .au-page main.auth { margin: auto 0; padding: clamp(28px, 6vh, 72px) 0; }
  .au-art { order: 0; min-height: 560px; }
}

/* ---------- dashboard, new look (app.html) ---------- */
.dash-hello { margin: 18px 0 22px; align-items: flex-end; }
.dash-hello-text { margin-right: auto; min-width: 0; }
.dash-hello h1 { font-size: clamp(30px, 3.2vw, 46px); overflow-wrap: anywhere; }
.dash-hello p { margin: 8px 0 0; }
.dash { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.d-areas, .d-more { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.d-more { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
@media (min-width: 760px) {
  .dash { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .dash > * { grid-column: span 12; }
  .dash > .d-half { grid-column: span 6; }
}
@media (min-width: 1100px) {
  .dash > .d-today { grid-column: span 7; }
  .dash > .d-week { grid-column: span 5; }
  .dash > .d-chart { grid-column: span 8; }
  .dash > .d-setup { grid-column: span 4; }
  .dash:has(> .d-setup[hidden]) > .d-chart { grid-column: span 12; }
}
.dash .card { box-shadow: var(--lift); }
.dash .card-head { margin-bottom: 0; align-items: center; }
.dash .card h2 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
.dash .hero { font-family: var(--display); font-weight: 600; letter-spacing: -.04em; line-height: 1; margin: 18px 0 6px; font-size: 36px; }
.dash .hero small { font-size: .45em; letter-spacing: -.02em; color: var(--ink-3); margin-right: 6px; }
.dash .kpis { margin-top: 18px; gap: 10px; }
.dash .kpis div, .dash .stores li { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; }
.dash .kpis dd { font-size: 20px; }
.dash .stores { display: grid; gap: 10px; margin-top: 10px; }
.dash .stores li { border-top: 0; }
.dash .stores li:first-child { border-top: 0; }
.dash .s-rev { font-weight: 600; }
/* Today: the night card, with the big Unbounded rand figure */
.dash #today { background: var(--night); color: var(--on-night); position: relative; overflow: hidden; }
.dash #today .hero { font-size: clamp(44px, 5vw, 76px); margin-top: 22px; }
.dash #today .muted, .dash #today dt, .dash #today .s-meta, .dash #today .hero small { color: var(--on-night-2); }
.dash #today .kpis div, .dash #today .stores li { background: rgb(255 255 255 / .06); }
.dash #today a { color: var(--sea); }
.dash #today :focus-visible { outline-color: var(--sea); }
/* 14 days of bars: soft bars, today in seafoam */
.dash .chart .bar { fill: var(--bar); }
.dash .chart .bar.today { fill: var(--sea); }
.dash .chart-box { margin-top: 12px; }
/* Finish setting up, on seafoam-soft */
.dash .setup { background: var(--sea-soft); }
.dash .setup .wizard-bar { height: 8px; margin: 14px 0 12px; background: var(--surface); box-shadow: none; }
.dash .setup .wizard-bar > span { background: var(--sea-deep); }
.dash .checklist { gap: 8px; }
.dash .checklist li { border-top: 0; background: var(--surface); border-radius: 14px; padding: 8px 10px 8px 12px; }
.dash .checklist li.done .check { background: var(--sea); }
.dash .checklist li.done .check::after { border-color: #141516; }
/* Beside the chart the card is narrow: what is still to do, under the count of what is done. */
@media (min-width: 1100px) {
  .dash > .d-setup .checklist { grid-template-columns: minmax(0, 1fr); }
  .dash > .d-setup .checklist li.done { display: none; }
}
/* Area cards: one soft accent each (Loyalty coral, The book amber, Stock sky) */
.dash .area { position: relative; overflow: hidden; }
.dash .area .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin: 0; }
.dash .area .tag .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dash .area .v { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -.035em; line-height: 1.05; margin: 14px 0 2px; }
.dash .area .v small { font-size: .5em; margin-right: 4px; }
.dash .area-meta { margin: 0; }
.dash .area .low { margin-top: 12px; }
.dash .area .low li { border-top-color: var(--line-2); }
.dash .area .low li:first-child { border-top: 0; }
.dash .area-more { margin: 12px 0 0; }
.dash .area.loy { background: var(--loy-soft); } .dash .area.loy .tag { color: var(--loy-deep); } .dash .area.loy .dot { background: var(--loy); }
.dash .area.book { background: var(--book-soft); } .dash .area.book .tag { color: var(--book-deep); } .dash .area.book .dot { background: var(--book); }
.dash .area.stock { background: var(--stock-soft); } .dash .area.stock .tag { color: var(--stock-deep); } .dash .area.stock .dot { background: var(--stock); }
.dash .area.stock .l-qty:not(.neg) { color: var(--stock-deep); }
.dash .area :is(.muted, .l-meta) { color: var(--ink-2); }
html[data-layout="bo"] .banner { border-radius: var(--r-md); }
html[data-layout="bo"] .support-request { border-color: var(--sea); }
@media (prefers-reduced-motion: no-preference) {
  .dash > .card, .d-areas > .card { animation: dash-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
  .dash > :nth-child(3) { animation-delay: .05s; } .dash > :nth-child(4) { animation-delay: .1s; } .dash > :nth-child(5) { animation-delay: .15s; }
  .d-areas > :nth-child(2) { animation-delay: .2s; } .d-areas > :nth-child(3) { animation-delay: .25s; }
}
@keyframes dash-rise { from { opacity: 0; transform: translateY(14px); } }

/* No scrollbars (owner, 2026-10-21): scrolling works as always; sideways strips show a fade and an arrow instead. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Sideways strips (scroll-row.js): a fade where there is more, and a round arrow there; both gone at the ends. The
   arrows fade out while the strip scrolls and come back a second after. */
.srow { position: relative; min-width: 0; max-width: 100%; }
.srow-el.srow-fl { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px); mask-image: linear-gradient(to right, transparent 0, #000 40px); }
.srow-el.srow-fr { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40px); mask-image: linear-gradient(to left, transparent 0, #000 40px); }
.srow-el.srow-fl.srow-fr { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.srow-btn { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; }
.srow-l { left: -2px; }
.srow-r { right: -2px; }
.srow-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: background-color .15s ease, color .15s ease; }
.srow-btn:hover .srow-dot { color: var(--ink); background: var(--surface-2); }
.srow-btn:active .srow-dot { transform: scale(.96); }
.srow-has-l:not(.srow-moving) > .srow-l, .srow-has-r:not(.srow-moving) > .srow-r { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
.srow-dot svg { display: block; color: var(--ink-2); }
.srow-btn:hover .srow-dot svg { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .srow-btn, .srow-dot { transition: none; } }

/* A Klyvelo Founder (owner, 2026-10-25): the business's badge, Night light style. Its own night pill in light and dark
   mode alike, so the mark is always the on-dark one (never recoloured or redrawn), "Founder" in seafoam, a soft seafoam
   glow. The normal price beside a founder's price: small and struck through. */
.founder-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 6px; border-radius: 999px; background: linear-gradient(160deg, #1b2f29 0%, #13211d 55%, #0e1815 100%); color: #7fe0c4; font-family: var(--display, "Unbounded", system-ui, sans-serif); font-weight: 600; font-size: 11.5px; line-height: 16px; letter-spacing: .01em; white-space: nowrap; vertical-align: 2px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(127 224 196 / .38), 0 0 16px rgb(127 224 196 / .3); }
.founder-badge img { width: 16px; height: 16px; display: block; }
s.was { font-size: .85em; font-weight: 500; color: var(--ink-3); text-decoration-thickness: 1px; margin-left: .35em; letter-spacing: 0; font-family: "IBM Plex Sans", system-ui, sans-serif; }
.price s.was { font-size: .4em; vertical-align: .35em; }
.founder-line { margin: 4px 0 0; color: var(--sea-deep, #17735a); font-weight: 600; }
/* The Klyvelo badge (web/klyvelo-badge.js): a Klyvelo person's own membership. Night green in light and dark mode, the
   real on-dark mark, a soft seafoam glow; the words carry the meaning, not the colour. Same as web/console.css. */
.kv-badge { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; height: 22px; padding: 0 9px 0 6px; border-radius: 999px; font: 600 11.5px/1 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .01em; color: #E3F6F0; white-space: nowrap; background: linear-gradient(135deg, #0B1F19 0%, #134A3C 100%); border: 1px solid rgba(142,220,197,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 3px rgba(142,220,197,.10), 0 4px 12px -6px rgba(46,135,112,.7); }
.kv-badge img { width: 14px; height: 14px; display: block; }
.kv-badge.lg { height: 30px; padding: 0 13px 0 9px; gap: 8px; font-size: 13.5px; }
.kv-badge.lg img { width: 18px; height: 18px; }
.contact-shown { margin: 10px 0 0; font-size: 14px; text-align: center; }

/* The member sign-up page (join.html, web/join.js) has its own look: web/join.css (shared/join.css). */

/* ---------- Light / Dark / Auto (web/theme-switch.js; the choice itself: web/theme.js) ---------- */
.theme-switch { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.theme-switch button {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.theme-switch button svg { flex: none; }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 0 0 1px var(--line); }
.theme-switch button:focus-visible { outline-offset: 0; }
/* the sidebar's foot: a little space before Send feedback and Sign out */
.bo-theme { margin: 2px 4px 6px; }
@media (max-width: 899px) { .bo-theme button { min-height: 40px; } }
/* the Account page's row */
.theme-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.theme-row p { margin: 0; flex: 1 1 260px; }
.theme-row .theme-switch { flex: 0 1 320px; }