:root {
  --bg:        #000000;
  --surface:   #444444;
  --muted:     #888888;
  --secondary: #B0B0B0;
  --primary:   #E0E0E0;

  /* Palette at low opacity — hairlines and card fills. */
  --hairline:      rgb(var(--gray) / 0.7);
  --hairline-soft: rgb(var(--gray) / 0.4);
  --card:          rgb(var(--gray) / 0.12);
  --card-hover:    rgb(var(--gray) / 0.2);
  --glow:          rgb(224 224 224 / 0.22);

  /* Theme channels (space-separated RGB, used as rgb(var(--x) / alpha)). */
  --ink:   224 224 224;   /* light marks: particles, glows */
  --shade: 0 0 0;         /* translucent backdrops behind bars and chips */
  --gray:  68 68 68;      /* card fills and hairlines */
  --menu:  12 12 12;      /* floating menus */
  --on-primary: #000;     /* text on a primary-colored button */
  --table-head: #070707;
  --solid-1: #262626; --solid-2: #121212;   /* the front notification card */
  --solid-3: #1d1d1d; --solid-4: #0d0d0d;   /* cards stacked behind it */
  --solid-5: #2c2c2c; --solid-6: #111;      /* avatars */

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, sans-serif;

  --radius: 10px;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t: 250ms var(--ease);
  --gutter: 20px;
  --max: 1040px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--secondary);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

main { flex: 1; animation: fade-in 700ms var(--ease) both; }

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

a { color: var(--primary); text-decoration: none; transition: color var(--t), opacity var(--t); }
a:hover { color: var(--secondary); }

h1, h2, h3 { font-family: var(--serif); color: var(--primary); font-weight: 500; margin: 0; letter-spacing: 0.005em; }
h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1.02; font-weight: 400; }
h2 { font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1; }
h3 { font-size: 1.45rem; line-height: 1.2; }
h1 em, h2 em { font-style: italic; color: var(--secondary); }

p { margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 640px; }

.label {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.lede { font-size: 1.05rem; color: var(--secondary); max-width: 34em; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.hidden { display: none !important; }

.rule { border: 0; border-top: 1px solid var(--hairline-soft); margin: 0; }

/* ---------- header / nav ---------- */

.site-footer { border-top: 1px solid var(--hairline-soft); padding: 28px 0 36px; margin-top: 96px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- buttons ---------- */

.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--secondary);
  font: 500 0.72rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), opacity var(--t);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--muted); color: var(--primary); background: var(--card); }
.btn:focus-visible { outline: 1px solid var(--primary); outline-offset: 3px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.btn-primary:hover { background: var(--secondary); border-color: var(--secondary); color: var(--bg); }

.btn-quiet { border-color: transparent; color: var(--muted); padding: 0 12px; }
.btn-quiet:hover { background: transparent; border-color: transparent; color: var(--primary); }

.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- cards ---------- */

.card {
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  background: var(--card);
  padding: 28px;
  transition: border-color var(--t), background var(--t);
}
@media (max-width: 480px) { .card { padding: 22px 18px; } }

/* ---------- home ---------- */

.hero { padding: 96px 0 72px; }
.hero .label { margin-bottom: 28px; display: block; }
.hero h1 { margin-bottom: 28px; max-width: 12ch; }
.hero .lede { margin-bottom: 40px; }

.preview {
  margin-top: 64px;
  max-width: 420px;
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--card);
  animation: fade-in 1200ms 400ms var(--ease) both;
}
.preview img { width: 40px; height: 40px; border-radius: 9px; }
.preview strong { display: block; color: var(--primary); font-weight: 600; font-size: 0.9rem; }
.preview span { font-size: 0.85rem; }
.preview time { font-size: 0.72rem; color: var(--muted); align-self: start; }

.steps { display: grid; gap: 1px; background: var(--hairline-soft); border: 1px solid var(--hairline-soft); border-radius: 12px; overflow: hidden; }
.steps > div { background: var(--bg); padding: 32px 28px; }
.steps .num { font-family: var(--serif); font-size: 2.2rem; color: var(--muted); line-height: 1; display: block; margin-bottom: 18px; }
.steps h3 { margin-bottom: 10px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.section { padding: 72px 0 0; }
.section-head { margin-bottom: 36px; }
.section-head .label { display: block; margin-bottom: 14px; }

/* ---------- forms ---------- */

.form { display: grid; gap: 30px; }
.field-group { display: grid; gap: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field { display: grid; gap: 8px; }
.field > span { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

.input-wrap { position: relative; }
.input-wrap .affix { position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.9rem; pointer-events: none; }
.input-wrap .prefix { left: 14px; }
.input-wrap .suffix { right: 14px; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.input-wrap input.has-prefix { padding-left: 28px; }

input[type="text"], input[type="number"] {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: rgb(var(--gray) / 0.1);
  color: var(--primary);
  font: 500 16px/1 var(--sans); /* 16px stops iOS zoom-on-focus */
  transition: border-color var(--t), background var(--t);
  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input::placeholder { color: var(--muted); opacity: 1; }
input:focus { outline: none; border-color: var(--secondary); background: rgb(var(--gray) / 0.18); }

/* Toggle */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track {
  flex: none; width: 52px; height: 30px; border-radius: 999px;
  border: 1px solid var(--hairline); position: relative;
  transition: background var(--t), border-color var(--t);
}
.toggle .track::after {
  content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted); transition: transform var(--t), background var(--t);
}
.toggle input:checked + .track { background: var(--primary); border-color: var(--primary); }
.toggle input:checked + .track::after { transform: translateX(22px); background: var(--bg); }
.toggle input:focus-visible + .track { outline: 1px solid var(--primary); outline-offset: 3px; }

/* ---------- notices ---------- */

.notice {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 0.92rem;
  animation: fade-in 400ms var(--ease) both;
}
.notice strong { color: var(--primary); font-weight: 600; }
.notice ol { margin: 12px 0 0; padding-left: 20px; }
.notice ol li { margin: 6px 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  max-width: calc(100% - 32px);
  background: var(--bg); color: var(--primary);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 20px; font-size: 0.88rem;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- setup ---------- */

.page-head { padding: 64px 0 40px; }
.page-head .label { display: block; margin-bottom: 18px; }
.page-head p { margin-top: 16px; }

.stack { display: grid; gap: 20px; }
.step-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.step-title .num { font-family: var(--serif); font-size: 1.1rem; color: var(--muted); }

/* Numbered steps (Setup) */
.steps-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-soft); }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 8px;
  padding: 36px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.step-num {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 0.55em;
}
.step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.step-desc { margin-top: 8px; color: var(--secondary); max-width: 32em; }
.step-content { margin-top: 28px; display: grid; gap: 16px; justify-items: start; }
.step-content > * { width: 100%; }
.step-content > .btn, .step-content #enable-body { width: auto; }
.step-state {
  display: none;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}

/* Upcoming: dimmed, content collapsed. */
.step > * { transition: opacity 400ms var(--ease); }
.step:not(.is-active):not(.is-done) > * { opacity: 0.4; }
.step:not(.is-active) .step-content { display: none; }
.step.is-active .step-num { color: var(--primary); }
.step.is-done .step-state { display: inline; }
.step.is-done .step-desc { color: var(--muted); }

@media (max-width: 480px) {
  .step { grid-template-columns: 1fr; padding: 30px 0; }
  .step-num { padding: 0 0 12px; }
}

/* Pill buttons (Setup) */
:is(.page-setup, .page-dash) .btn { border-radius: 999px; padding: 0 28px; }
:is(.page-setup, .page-dash) .btn-quiet { padding: 0 12px; }
:is(.page-setup, .page-dash) :is(input[type="text"], input[type="number"], select) { border-radius: 999px; padding: 0 20px; }
:is(.page-setup, .page-dash) .input-wrap .prefix { left: 20px; }
:is(.page-setup, .page-dash) .input-wrap .suffix { right: 20px; }
:is(.page-setup, .page-dash) .input-wrap input.has-prefix { padding-left: 34px; }

/* Save-link dialog */
.overlay {
  position: fixed; inset: 0; background: rgb(var(--shade) / 0.86);
  display: grid; place-items: center; padding: var(--gutter);
  z-index: 40; animation: fade-in 400ms var(--ease) both;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dialog { width: 100%; max-width: 480px; background: var(--bg); }
.dialog h2 { margin: 12px 0 14px; }
.linkbox {
  margin: 22px 0 18px;
  padding: 14px; border: 1px solid var(--hairline); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: var(--primary);
  word-break: break-all; user-select: all;
}

@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- pricing ---------- */


/* ---------- modern pills (Space-style) ---------- */

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: 999px;
  font: 600 0.9rem/1 var(--sans);
  letter-spacing: -0.005em;
  color: var(--primary);
  border: 1px solid var(--hairline-soft);
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
  -webkit-tap-highlight-color: transparent;
}
.pill:hover { color: var(--primary); border-color: var(--hairline); }
.pill:active { transform: scale(0.98); }
.pill:focus-visible { outline: 1px solid var(--primary); outline-offset: 3px; }
.pill-dark { background: var(--bg); border-color: rgb(var(--gray) / 0.8); box-shadow: inset 0 1px 0 rgb(var(--ink) / 0.06); }
.pill-dark:hover { background: rgb(var(--gray) / 0.25); }
.pill-soft { background: rgb(var(--gray) / 0.45); }
.pill-soft:hover { background: rgb(var(--gray) / 0.65); }
.pill-lg { height: 52px; padding: 0 28px; font-size: 0.95rem; }
.pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- floating header ---------- */

.float-header {
  position: fixed; z-index: 30;
  top: 0; left: 0; right: 0;
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: linear-gradient(rgb(var(--shade) / 0.9), rgb(var(--shade) / 0));
}

.menu-pill {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 999px;
  background: rgb(var(--gray) / 0.35);
  border: 1px solid var(--hairline-soft);
  color: var(--primary);
  font: 600 0.9rem/1 var(--sans);
  transition: background var(--t);
}
.menu-pill:hover, .menu-pill[aria-expanded="true"] { background: rgb(var(--gray) / 0.55); }
.menu-pill svg { width: 16px; height: 16px; color: var(--secondary); }

.header-actions { display: flex; justify-content: flex-end; gap: 8px; }

.menu-panel {
  position: absolute; top: calc(72px + env(safe-area-inset-top)); left: 0; right: 0;
  margin: 0 auto; /* not translateX: the fade-in animation owns transform */
  width: min(340px, calc(100vw - 32px));
  display: grid; padding: 10px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  animation: fade-in 250ms var(--ease) both;
}
.menu-panel[hidden] { display: none; }
.menu-panel a { padding: 14px 16px; border-radius: 12px; color: var(--secondary); font-weight: 500; }
.menu-panel a:hover { background: rgb(var(--gray) / 0.3); color: var(--primary); }

@media (max-width: 640px) {
  .hide-sm { display: none; }
  .float-header { padding-left: 16px; padding-right: 16px; }
  .header-actions .pill { height: 44px; padding: 0 18px; }
  .pill-row { gap: 8px; }
  .pill-lg { height: 48px; padding: 0 18px; font-size: 0.88rem; }
}

/* ---------- home hero ---------- */

.page-home main { animation: none; }

.hero-v2 {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: 120px var(--gutter) 96px;
  overflow: hidden;
  isolation: isolate;
}
.wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
/* Soft dark pool behind the copy so the wave never fights the text. */
.hero-v2::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 34% 30% at 50% 50%, rgb(var(--shade) / 0.7), rgb(var(--shade) / 0) 100%);
}
.hero-v2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1;
  background: linear-gradient(rgb(var(--shade) / 0), var(--bg));
}

.hero-inner {
  max-width: 980px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero-inner > * { animation: fade-in 900ms var(--ease) both; }
.hero-inner > :nth-child(2) { animation-delay: 80ms; }
.hero-inner > :nth-child(3) { animation-delay: 160ms; }
.hero-inner > :nth-child(4) { animation-delay: 240ms; }
.hero-inner > :nth-child(5) { animation-delay: 320ms; }

.badge-pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 16px;
  border-radius: 999px;
  background: rgb(var(--gray) / 0.3);
  border: 1px solid var(--hairline-soft);
  font-size: 0.82rem; color: var(--secondary);
  margin-bottom: 32px;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: breathe 2.8s ease-in-out infinite; }

.display {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(2.7rem, 8.2vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--primary);
  margin: 0 0 28px;
}
.display span, .display-sm span { display: block; text-wrap: balance; }
.display-2 { color: var(--muted); }

.display-sm {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}

.hero-lede { max-width: 33em; margin: 0 auto 40px; font-size: 1.05rem; line-height: 1.7; color: var(--secondary); }
.platforms { margin-top: 24px; font-size: 0.8rem; color: var(--muted); }

.block { padding: 96px 0 0; }
.block-head { text-align: center; margin-bottom: 48px; }

.notif-stack { display: grid; gap: 10px; max-width: 440px; margin: 0 auto; }
.notif {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgb(var(--gray) / 0.28);
  border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.notif:nth-child(2) { opacity: 0.7; transform: scale(0.97); }
.notif:nth-child(3) { opacity: 0.4; transform: scale(0.94); }
.notif img { width: 40px; height: 40px; border-radius: 10px; }
.notif strong { display: block; color: var(--primary); font-weight: 600; font-size: 0.9rem; }
.notif span { font-size: 0.85rem; }
.notif time { font-size: 0.72rem; color: var(--muted); align-self: start; }

.page-home .steps-list h3 { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- settings form: amount / count / speed ---------- */

.interval { display: grid; grid-template-columns: 1fr 96px; gap: 8px; }
select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 48px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--hairline);
  background: rgb(var(--gray) / 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888888' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--primary); font: 500 16px/1 var(--sans);
  cursor: pointer; transition: border-color var(--t);
}
select:focus { outline: none; border-color: var(--secondary); }
select option { background: var(--bg); color: var(--primary); }
.toggle-title { display: block; color: var(--primary); font-weight: 500; margin-bottom: 2px; }
.summary {
  margin: 0; padding-top: 18px; border-top: 1px solid var(--hairline-soft);
  color: var(--secondary); font-size: 0.92rem; min-height: 1.6em;
}

/* Amount/count/speed row: the speed column holds two controls, so it gets more room. */
.field-row:has(.interval) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.interval { grid-template-columns: minmax(0, 1fr) 84px; }
:is(.page-setup, .page-dash) .interval input { padding: 0 12px; text-align: center; }
:is(.page-setup, .page-dash) .interval select { padding: 0 30px 0 18px; background-position: right 14px center; }

.wordmark { display: inline-flex; align-items: center; height: 48px; }
.notif span { display: block; }

/* ---------- onboarding ---------- */

/* In-page preview of the real notification. */
.ios-banner {
  position: fixed; z-index: 70;
  top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0; margin: 0 auto;
  width: min(380px, calc(100% - 16px));
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: start;
  padding: 12px 14px;
  border-radius: 22px;
  background: rgb(var(--gray) / 0.55);
  border: 1px solid rgb(136 136 136 / 0.25);
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  color: var(--primary); text-align: left; cursor: pointer;
  translate: 0 calc(-100% - 24px); opacity: 0;
  transition: translate 550ms cubic-bezier(.2, .9, .25, 1.15), opacity 300ms var(--ease);
}
.ios-banner.show { translate: 0 0; opacity: 1; }
.ios-banner img { width: 38px; height: 38px; border-radius: 9px; }
.ios-banner strong { display: block; font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.ios-banner span { display: block; font-size: 0.88rem; line-height: 1.35; color: var(--primary); }
.ios-banner time { font-size: 0.75rem; color: var(--secondary); }

.guide { display: grid; gap: 14px; }
.guide-title { color: var(--primary); font-weight: 600; font-size: 1.05rem; }
.guide-lead { color: var(--secondary); font-size: 0.92rem; }
.guide-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.guide-steps li {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--hairline-soft); border-radius: 16px;
  color: var(--secondary); font-size: 0.95rem;
  transition: border-color 400ms var(--ease), background 400ms var(--ease), color 400ms var(--ease);
}
.guide-steps li.is-current { border-color: var(--muted); background: rgb(var(--gray) / 0.28); color: var(--primary); }
.guide-steps b { color: var(--primary); font-weight: 600; }
.guide-icon {
  width: 44px; height: 44px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center;
  background: rgb(var(--gray) / 0.4); color: var(--primary);
}
.guide-icon svg { width: 22px; height: 22px; }
.guide-icon img { width: 100%; height: 100%; object-fit: cover; }
.guide-copy { gap: 10px; justify-self: start; }
.guide-copy svg { width: 18px; height: 18px; }

/* Bouncing pointer at the browser's own button. */
.guide-arrow {
  position: fixed; z-index: 65; pointer-events: none;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--primary);
  animation: nudge-down 1.3s ease-in-out infinite;
}
.guide-arrow span { background: var(--primary); color: var(--bg); font: 600 0.78rem/1 var(--sans); padding: 8px 12px; border-radius: 999px; }
.guide-arrow svg { width: 28px; height: 28px; }
.guide-arrow.bottom-center { left: 0; right: 0; margin: 0 auto; width: max-content; }
.guide-arrow.bottom-right { right: 10px; align-items: flex-end; }
.guide-arrow.bottom-right svg { margin-right: 6px; }
.guide-arrow.top-right { top: calc(8px + env(safe-area-inset-top)); bottom: auto; right: 10px; align-items: flex-end; animation-name: nudge-up; }
.guide-arrow.top-right svg { margin-right: 6px; }
@keyframes nudge-down { 0%, 100% { translate: 0 0; } 50% { translate: 0 7px; } }
@keyframes nudge-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* Desktop → phone hand-off. */
.qr-card {
  display: grid; grid-template-columns: 148px 1fr; gap: 22px; align-items: center;
  padding: 18px; border: 1px solid var(--hairline-soft); border-radius: 18px;
  background: rgb(var(--gray) / 0.12); text-align: left;
}
.qr-card img { display: block; width: 148px; height: 148px; border-radius: 12px; }
.qr-card .guide-lead { margin: 6px 0 10px; }
.qr-card .btn-quiet { padding: 0; min-height: 36px; }
@media (max-width: 480px) { .qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

.link-btn {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 4px 0;
  color: var(--secondary); font: 500 0.85rem var(--sans);
  text-decoration: underline; text-decoration-color: var(--surface); text-underline-offset: 4px;
  transition: color var(--t), text-decoration-color var(--t);
}
.link-btn:hover { color: var(--primary); text-decoration-color: var(--muted); }
.phone-handoff { margin-top: 18px; display: grid; justify-items: center; gap: 16px; }
.phone-handoff #handoff-qr { width: min(460px, 100%); }

/* "One tap left" nudge on the Enable button. */
.btn.pulse, .btn-pill.pulse { animation: pulse-ring 2.2s ease-out infinite; }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgb(var(--ink) / 0.4); }
  70% { box-shadow: 0 0 0 14px rgb(var(--ink) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--ink) / 0); }
}

/* ==========================================================================
   Dashboard app (manage page): rail + top bar + panel grid
   ========================================================================== */

.page-app { padding: 0; }
.page-app main { animation: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.no-scroll { overflow: hidden; }

.app { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* Icon rail */
.app-rail {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  padding: calc(20px + env(safe-area-inset-top)) 0 20px;
  border-right: 1px solid rgb(var(--gray) / 0.45);
}
.rail-logo img { display: block; width: 40px; height: 40px; border-radius: 12px; }
.rail-nav, .rail-bottom { display: flex; flex-direction: column; gap: 10px; }
.rail-bottom { margin-top: auto; }
.rail-link {
  width: 44px; height: 44px; border-radius: 14px; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted);
  transition: color var(--t), background var(--t);
}
.rail-link svg { width: 22px; height: 22px; }
.rail-link:hover { color: var(--primary); background: rgb(var(--gray) / 0.3); }
.rail-link[aria-current="page"] { color: var(--primary); background: rgb(var(--gray) / 0.5); }
.rail-link:focus-visible, .chip-btn:focus-visible, .btn-pill:focus-visible, .icon-btn:focus-visible,
.seg button:focus-visible, .text-btn:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }

/* Top bar */
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(16px + env(safe-area-inset-top)) 28px 16px;
  border-bottom: 1px solid rgb(var(--gray) / 0.45);
  background: rgb(var(--shade) / 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.top-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-title h1 { margin: 0; font: 600 1.2rem/1.2 var(--sans); letter-spacing: -0.015em; color: var(--primary); }
.top-sub { margin: 2px 0 0; font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-logo { display: none; width: 34px; height: 34px; border-radius: 10px; }
.top-actions { display: flex; align-items: center; gap: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 999px;
  background: rgb(var(--gray) / 0.28); border: 1px solid rgb(var(--gray) / 0.55);
  color: var(--primary); font: 500 0.84rem/1 var(--sans); white-space: nowrap;
}
.chip-btn { cursor: pointer; transition: background var(--t); }
.chip-btn:hover { background: rgb(var(--gray) / 0.5); }
.chip svg { width: 16px; height: 16px; color: var(--secondary); }
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status-chip[data-state="running"] .dot { background: var(--primary); animation: breathe 1.6s ease-in-out infinite; }

/* Panel grid: everything important fits on one desktop screen. */
.dash {
  display: grid; gap: 16px; padding: 20px 28px 20px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.95fr);
  grid-template-areas:
    "chart   balance run"
    "store   orders  orders";
}
.panel-chart { grid-area: chart; }
.panel-balance { grid-area: balance; }
.panel-run { grid-area: run; }
.panel-store { grid-area: store; }
.panel-orders { grid-area: orders; }

.panel {
  min-width: 0; display: flex; flex-direction: column;
  padding: 22px; border-radius: 22px;
  background: linear-gradient(180deg, rgb(var(--gray) / 0.2), rgb(var(--gray) / 0.07));
  border: 1px solid rgb(var(--gray) / 0.5);
}
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.panel-title { margin: 0; font: 600 1.06rem/1.3 var(--sans); letter-spacing: -0.01em; color: var(--primary); }
.panel-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); }
.panel-meta { display: grid; justify-items: end; gap: 2px; }
.meta-value { font: 600 0.92rem var(--sans); color: var(--primary); font-variant-numeric: tabular-nums; }

/* Buttons */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid rgb(var(--gray) / 0.75); background: rgb(var(--gray) / 0.3);
  color: var(--primary); font: 600 0.9rem/1 var(--sans);
  transition: background var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.btn-pill:hover { background: rgb(var(--gray) / 0.55); color: var(--primary); }
.btn-pill.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-pill.primary:hover { background: var(--secondary); border-color: var(--secondary); }
.btn-pill.danger { background: transparent; border-color: rgb(136 136 136 / 0.6); }
.btn-pill:disabled { opacity: 0.4; cursor: not-allowed; }
.text-btn { appearance: none; border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--secondary); font: 600 0.84rem var(--sans); transition: color var(--t); }
.text-btn:hover { color: var(--primary); }
.text-btn[hidden] { display: none; }
.icon-btn {
  flex: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgb(var(--gray) / 0.3); border: 1px solid rgb(var(--gray) / 0.6); color: var(--secondary);
  transition: color var(--t), background var(--t);
}
.icon-btn:hover { color: var(--primary); background: rgb(var(--gray) / 0.5); }
.icon-btn svg { width: 16px; height: 16px; }
.badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  border: 1px solid rgb(136 136 136 / 0.45); color: var(--primary);
  font: 600 0.74rem/1 var(--sans); white-space: nowrap;
}
.badge.muted { color: var(--muted); border-color: rgb(var(--gray) / 0.7); }
.badge[data-state="running"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* Segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: rgb(var(--shade) / 0.5); border: 1px solid rgb(var(--gray) / 0.55); }
.seg button {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 7px 12px; border-radius: 9px; color: var(--muted); font: 600 0.8rem/1 var(--sans);
  transition: background var(--t), color var(--t);
}
.seg button:hover { color: var(--secondary); }
.seg button[aria-selected="true"] { background: rgb(var(--gray) / 0.65); color: var(--primary); }

/* Revenue chart */
.panel-chart .chart { position: relative; flex: 1; min-height: 200px; }
.panel-chart .chart svg { position: absolute; inset: 0; display: block; overflow: visible; }
.chart .grid { stroke: rgb(var(--gray) / 0.45); stroke-width: 1; }
.chart .tick { fill: var(--muted); font: 500 11px var(--sans); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .marker { fill: var(--primary); stroke: var(--bg); stroke-width: 2; }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.chart-tip {
  position: absolute; z-index: 2; pointer-events: none;
  display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px;
  background: rgb(var(--shade) / 0.88); border: 1px solid rgb(var(--gray) / 0.8);
  font-size: 0.78rem; color: var(--muted); white-space: nowrap;
}
.chart-tip[hidden] { display: none; }
.chart-tip strong { color: var(--primary); font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-empty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--muted); font-size: 0.85rem; pointer-events: none; }
.rev-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(var(--gray) / 0.4);
}
.rev-total { font: 600 1.55rem/1.1 var(--sans); letter-spacing: -0.03em; color: var(--primary); }
#rev-delta { color: var(--primary); font-weight: 600; }
.rev-updated { display: grid; justify-items: end; gap: 2px; font-size: 0.86rem; color: var(--primary); text-align: right; }

/* Gross volume */
.page-app .hero-figure {
  font: 600 clamp(2.1rem, 2.7vw, 2.7rem)/1.05 var(--sans); letter-spacing: -0.035em;
  color: var(--primary); margin: 2px 0 6px; overflow-wrap: anywhere;
  transition: text-shadow 1.2s var(--ease);
}
.page-app .hero-figure.glow { text-shadow: 0 0 28px var(--glow), 0 0 2px var(--glow); }
.hero-row { margin: 0 0 16px; color: var(--secondary); font-size: 0.9rem; }
.hero-row .sep { margin: 0 8px; color: var(--muted); }

/* Live panel: the logo sphere rising from the bottom, spinning faster during a run. */
.live {
  position: relative; flex: 1; min-height: 180px; overflow: hidden; isolation: isolate;
  display: flex; justify-content: center;
  border-radius: 18px; border: 1px solid rgb(var(--gray) / 0.5);
  background: radial-gradient(120% 90% at 50% 110%, rgb(var(--gray) / 0.4), rgb(var(--shade) / 0) 70%), var(--bg);
}
.live-orb {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  cursor: grab; touch-action: pan-y; /* sideways drags spin it; vertical still scrolls the page */
  outline: none;
}
.live-orb.grabbing { cursor: grabbing; }
.live-orb:focus-visible { outline: 1px solid var(--muted); outline-offset: -6px; border-radius: 16px; }
.live-text {
  position: relative; z-index: 1; pointer-events: none;
  margin: 18px 16px 0; height: fit-content;
  display: flex; align-items: center; gap: 8px;
  font: 500 0.88rem var(--sans); color: var(--primary); text-align: center;
}
.live-spinner { display: none; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgb(var(--ink) / 0.3); border-top-color: var(--primary); }
.live[data-state="running"] .live-spinner { display: inline-block; animation: orb-spin 0.9s linear infinite; }
@keyframes orb-spin { to { rotate: 360deg; } }

/* Current run */
.run-big { margin: 2px 0 14px; font: 600 2.5rem/1 var(--sans); letter-spacing: -0.04em; color: var(--primary); font-variant-numeric: tabular-nums; }
.run-of { margin-left: 8px; font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.meter { height: 6px; border-radius: 999px; background: rgb(var(--gray) / 0.45); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--primary); transition: width 400ms var(--ease); }
.run-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 0.85rem; color: var(--secondary); }
.page-app .run-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 22px; }
.run-foot { display: flex; justify-content: space-between; margin-top: 12px; }
.run-foot [data-open-settings] { margin-left: auto; }

/* Store */
.notif-preview {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: 20px;
  background: rgb(var(--gray) / 0.35); border: 1px solid rgb(136 136 136 / 0.22);
}
.notif-preview img { width: 38px; height: 38px; border-radius: 9px; }
.notif-preview strong { display: block; color: var(--primary); font-weight: 600; font-size: 0.9rem; }
.notif-preview span { display: block; color: var(--primary); font-size: 0.85rem; line-height: 1.35; }
.notif-preview time { font-size: 0.74rem; color: var(--secondary); }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 12px; }
.mini { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: rgb(var(--shade) / 0.45); border: 1px solid rgb(var(--gray) / 0.5); }
.mini-value { font: 600 1.08rem var(--sans); letter-spacing: -0.02em; color: var(--primary); font-variant-numeric: tabular-nums; }

/* Orders table: scrolls inside its panel instead of lengthening the page. */
.table-wrap { max-height: 262px; overflow: auto; margin: -6px -8px 0; padding: 0 8px; }
.orders { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 0.88rem; }
.orders th {
  position: sticky; top: 0; z-index: 1; padding: 8px 12px; text-align: left;
  background: var(--table-head); color: var(--muted); font: 500 0.74rem var(--sans);
}
.orders td { padding: 10px 12px; background: rgb(var(--gray) / 0.16); color: var(--secondary); white-space: nowrap; vertical-align: middle; }
.orders td:first-child { border-radius: 12px 0 0 12px; }
.orders td:last-child { border-radius: 0 12px 12px 0; }
.orders .num { text-align: right; }
.orders td.num { color: var(--primary); font-weight: 600; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.orders .col-order, .orders .col-time { font-variant-numeric: tabular-nums; }
.orders .col-order { color: var(--muted); }
.orders tr.new td { animation: fade-in 700ms var(--ease) both; }
.cust { display: flex; align-items: center; gap: 10px; color: var(--primary); }
.cust small { display: block; color: var(--muted); font-size: 0.76rem; }
.avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--gray) / 0.6); color: var(--primary); font: 600 0.68rem var(--sans); }
/* Card (and on phones, time) move under the customer name when columns run out of room. */
.cust .cust-sub { display: none; }
.sub-card { white-space: nowrap; }
.sub-time::before { content: " · "; }
.page-app .empty { margin: 0; padding: 20px 4px; color: var(--muted); font-size: 0.88rem; }
.page-app .empty[hidden] { display: none; }

/* Notices */
.alert {
  margin: 16px 28px 0; padding: 16px 20px; border-radius: 18px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  border: 1px solid rgb(136 136 136 / 0.5); background: rgb(var(--gray) / 0.18);
}
.alert[hidden], .notfound[hidden], .dash[hidden] { display: none; }
.alert-title { margin: 0; font-weight: 600; color: var(--primary); }
.notfound { padding: 80px 28px; display: grid; gap: 10px; justify-items: start; }

/* Settings drawer */
.drawer-overlay { position: fixed; inset: 0; z-index: 80; background: rgb(0 0 0 / 0); transition: background 250ms var(--ease); }
.drawer-overlay[hidden] { display: none; }
.drawer-overlay.open { background: rgb(0 0 0 / 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgb(var(--gray) / 0.14), rgb(var(--gray) / 0.04) 40%), var(--bg);
  border-left: 1px solid rgb(var(--gray) / 0.6);
  translate: 100% 0; transition: translate 280ms var(--ease);
}
.drawer-overlay.open .drawer { translate: 0 0; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: calc(18px + env(safe-area-inset-top)) 20px 6px; }
.drawer-title { margin: 0; font: 600 1.25rem/1.2 var(--sans); letter-spacing: -0.02em; color: var(--primary); }
.drawer-body { flex: 1; overflow-y: auto; padding: 4px 20px 28px; overscroll-behavior: contain; }
.drawer-foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(var(--gray) / 0.45); background: rgb(var(--shade) / 0.6); }
.drawer-foot .btn-pill { width: 100%; height: 48px; }

/* Live preview: floats gently, tilts toward the pointer, pops when a value changes. */
.preview-stage { perspective: 900px; padding: 18px 6px 22px; }
.preview-card {
  --rx: 0deg; --ry: 0deg;
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: 22px;
  background: linear-gradient(145deg, rgb(var(--gray) / 0.55), rgb(var(--gray) / 0.25));
  border: 1px solid rgb(136 136 136 / 0.3);
  box-shadow: inset 0 1px 0 rgb(var(--ink) / 0.08);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 350ms var(--ease);
  animation: preview-float 6s ease-in-out infinite;
}
.preview-card img { width: 40px; height: 40px; border-radius: 10px; transform: translateZ(18px); }
.preview-card > div { transform: translateZ(12px); }
.preview-card strong { display: block; color: var(--primary); font-weight: 600; font-size: 0.95rem; }
.preview-card span { display: block; color: var(--primary); font-size: 0.86rem; line-height: 1.4; }
.preview-card time { font-size: 0.74rem; color: var(--secondary); }
.preview-card.bump { animation: preview-pop 380ms var(--ease), preview-float 6s ease-in-out 380ms infinite; }
@keyframes preview-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes preview-pop { 0% { scale: 1; } 40% { scale: 1.03; } 100% { scale: 1; } }

/* Grouped rows, iOS-settings style: label left, value right. */
.group-label { margin: 22px 4px 8px; font: 600 0.78rem/1 var(--sans); color: var(--muted); }
.group { border-radius: 16px; overflow: hidden; background: rgb(var(--gray) / 0.16); border: 1px solid rgb(var(--gray) / 0.45); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 16px; }
.row + .row { border-top: 1px solid rgb(var(--gray) / 0.38); }
label.row { cursor: text; }
.row-label { display: grid; gap: 2px; min-width: 0; font: 500 0.92rem var(--sans); color: var(--primary); }
.row-label small { font-size: 0.76rem; font-weight: 400; color: var(--muted); }
.row-label .link-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; }
.row-field { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.row-affix { color: var(--muted); font: 500 0.95rem var(--sans); }
.group .row .row-input {
  appearance: none; -moz-appearance: textfield; width: 9ch; min-height: 0; padding: 6px 8px; margin: 0 -8px 0 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--primary); font: 600 16px/1.2 var(--sans); text-align: right; font-variant-numeric: tabular-nums;
  transition: background var(--t);
}
.group .row .row-input.wide { width: min(210px, 58%); }
.group .row .row-input.short { width: 6ch; }
.group .row .row-input:hover { background: rgb(var(--gray) / 0.25); }
.group .row .row-input:focus { outline: none; background: rgb(var(--gray) / 0.4); }
.group .row .row-input::-webkit-outer-spin-button, .group .row .row-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.group .stepper .row-input { width: 5ch; text-align: center; margin: 0; }
.stepper button {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgb(var(--gray) / 0.45); color: var(--primary); font: 500 1.1rem/1 var(--sans);
  transition: background var(--t);
}
.stepper button:hover { background: rgb(var(--gray) / 0.7); }
.stepper button:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }

.unit-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgb(var(--shade) / 0.5); border: 1px solid rgb(var(--gray) / 0.55); }
.unit-seg label { position: relative; cursor: pointer; }
.unit-seg input { position: absolute; opacity: 0; pointer-events: none; }
.unit-seg span { display: block; padding: 6px 10px; border-radius: 7px; color: var(--muted); font: 600 0.8rem/1 var(--sans); transition: background var(--t), color var(--t); }
.unit-seg input:checked + span { background: rgb(var(--gray) / 0.7); color: var(--primary); }
.unit-seg input:focus-visible + span { outline: 1px solid var(--primary); outline-offset: 1px; }

.switch { position: relative; flex: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { display: block; width: 50px; height: 30px; border-radius: 999px; border: 1px solid var(--hairline); position: relative; transition: background var(--t), border-color var(--t); }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform var(--t), background var(--t); }
.switch input:checked + .track { background: var(--primary); border-color: var(--primary); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--bg); }
.switch input:focus-visible + .track { outline: 1px solid var(--primary); outline-offset: 3px; }

.summary-line { margin: 12px 4px 0; color: var(--secondary); font-size: 0.84rem; line-height: 1.5; min-height: 1.5em; }
.group .text-btn { color: var(--secondary); }
.group .text-btn:hover { color: var(--primary); }

/* Bottom tabs, phones only */
.tabbar { display: none; }

@media (max-width: 1360px) {
  .orders .col-card { display: none; }
  .cust .cust-sub { display: block; }
  .cust-sub .sub-time { display: none; }
}
@media (max-width: 1180px) {
  .orders .col-status { display: none; }
  .orders td, .orders th { padding-left: 10px; padding-right: 10px; }
  .dash {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "balance run"
      "chart   store"
      "orders  orders";
  }
}
@media (max-width: 1000px) { .hide-md { display: none; } }
@media (min-width: 761px) { .orders-more { display: none; } }
@media (max-width: 360px) { .sub-card { white-space: normal; } }
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-rail { display: none; }
  .top-logo { display: block; }
  .app-top { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
  .page-app .hide-sm { display: none; }
  .dash {
    padding: 14px 14px calc(96px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "balance" "run" "chart" "orders" "store";
    gap: 12px;
  }
  .alert { margin: 12px 14px 0; }
  .panel { padding: 18px; border-radius: 20px; }
  .live { min-height: 230px; }
  .table-wrap { max-height: none; }
  .orders .col-time, .orders .col-order { display: none; }
  .cust-sub .sub-time { display: block; }
  .cust-sub .sub-time::before { content: none; }
  /* Let the customer cell wrap so the table fits a phone. */
  .orders td:nth-child(2) { white-space: normal; }
  .orders .col-order { padding-right: 4px; }
  /* Keep the page short: first rows only until asked. */
  .orders:not(.show-all) tr.extra { display: none; }
  .orders-more { margin-top: 8px; }
  .page-app .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .page-app .tabbar, .standalone .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgb(var(--shade) / 0.86); border-top: 1px solid rgb(var(--gray) / 0.5);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .tabbar a, .tabbar button {
    appearance: none; border: 0; background: none; cursor: pointer; text-decoration: none;
    display: grid; justify-items: center; gap: 3px; padding: 6px 0;
    color: var(--muted); font: 600 0.66rem var(--sans);
  }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar [aria-current="page"] { color: var(--primary); }
}

/* ---------- shared site header (Home, Setup, Pricing) ---------- */

.top-nav {
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgb(var(--gray) / 0.32); border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.top-nav a {
  padding: 10px 18px; border-radius: 999px;
  color: var(--secondary); font: 600 0.88rem/1 var(--sans);
  transition: background var(--t), color var(--t);
}
.top-nav a:hover { color: var(--primary); }
.top-nav a[aria-current="page"] { background: rgb(var(--gray) / 0.65); color: var(--primary); }
.top-nav a:focus-visible, .menu-panel a:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }
.menu-panel a[aria-current="page"] { background: rgb(var(--gray) / 0.35); color: var(--primary); }
.menu-panel a[hidden] { display: none; }
.header-actions { align-items: center; }
@media (min-width: 761px) { .float-header .menu-pill, .menu-panel { display: none; } }
@media (max-width: 760px) {
  .top-nav { display: none; }
  .float-header { grid-template-columns: 1fr auto; }
}
/* Setup and Pricing sit under the fixed header. */
.page-setup main, .page-pricing main, .page-legal main { padding-top: 76px; }

.nowrap { white-space: nowrap; }
.preview-card span .nowrap { display: inline; }

/* Dashboard name: tap to rename in place. */
.top-title > div { min-width: 0; }
.dash-name { display: flex; align-items: center; gap: 4px; min-width: 0; cursor: text; }
.dash-name[hidden] { display: none; }
.dash-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rename-btn {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.rename-btn svg { width: 15px; height: 15px; }
.dash-name:hover .rename-btn { color: var(--primary); background: rgb(var(--gray) / 0.35); }
.rename-btn:focus-visible { outline: 1px solid var(--primary); outline-offset: 1px; }
.app-top .dash-name-input {
  display: block; width: min(280px, 56vw); min-height: 0; margin: -4px 0 -4px -9px; padding: 3px 8px;
  border: 1px solid rgb(136 136 136 / 0.6); border-radius: 9px; background: rgb(var(--gray) / 0.3);
  color: var(--primary); font: 600 1.2rem/1.2 var(--sans); letter-spacing: -0.015em;
}
.app-top .dash-name-input[hidden] { display: none; }

/* Money and big numbers: Geist Light everywhere. */
:root { --figure: 'Geist', var(--sans); --figure-w: 300; --figure-w-sm: 400; --figure-track: -0.035em; }
.page-app .hero-figure, .rev-total, .run-big {
  font-family: var(--figure); font-weight: var(--figure-w); letter-spacing: var(--figure-track);
}
.run-big .run-of { font-family: var(--sans); font-weight: 500; letter-spacing: 0; }
.meta-value, .mini-value, .orders td.num, .chart-tip strong {
  font-family: var(--figure); font-weight: var(--figure-w-sm);
}
.mini-value { letter-spacing: -0.01em; }

/* Phones: the status chip shrinks to its dot so the dashboard name has room. */
@media (max-width: 560px) {
  .app-top .status-chip { width: 38px; padding: 0; justify-content: center; }
  .app-top .status-chip #status-text { display: none; }
}
@media (max-width: 400px) { .app-top .status-chip { display: none; } } /* room for settings; the run panel shows the status */

/* Hide amounts: the eye next to "Gross volume". */
.title-row { display: flex; align-items: center; gap: 6px; }
.eye-btn {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer; transition: color var(--t), background var(--t);
}
.eye-btn:hover { color: var(--primary); background: rgb(var(--gray) / 0.35); }
.eye-btn:focus-visible { outline: 1px solid var(--primary); outline-offset: 1px; }
.eye-btn svg { width: 17px; height: 17px; }
.eye-btn .eye-shut, .money-hidden .eye-btn .eye-open { display: none; }
.money-hidden .eye-btn .eye-shut { display: block; }

/* ==========================================================================
   Setup: three short steps in one calm column
   ========================================================================== */
.setup { position: relative; isolation: isolate; }
.setup::before { /* soft light from above */
  content: ''; position: absolute; z-index: -1; inset: -76px 0 auto; height: 560px; pointer-events: none;
  background: radial-gradient(55% 65% at 50% 0%, rgb(var(--gray) / 0.3), rgb(var(--shade) / 0) 72%);
}
.setup-wrap { width: 100%; max-width: 460px; margin: 0 auto; padding: 28px var(--gutter) 40px; }

.setup-existing {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 26px; padding: 12px 16px; border-radius: 14px;
  background: rgb(var(--gray) / 0.18); border: 1px solid rgb(var(--gray) / 0.55);
  color: var(--secondary); font-size: 0.86rem; line-height: 1.4;
}
.setup-existing[hidden] { display: none; }
.setup-existing:hover { color: var(--secondary); background: rgb(var(--gray) / 0.3); }
.setup-existing-go { color: var(--primary); font-weight: 600; white-space: nowrap; }

/* Progress: three thin bars that fill in. */
.progress { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.progress li { display: grid; gap: 9px; }
.progress-bar { position: relative; height: 3px; border-radius: 999px; overflow: hidden; background: rgb(var(--gray) / 0.6); }
.progress-bar::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--primary);
  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease), opacity 600ms var(--ease);
}
.progress li[aria-current] .progress-bar::after { transform: scaleX(1); }
.progress li.is-done .progress-bar::after { transform: scaleX(1); opacity: 0.45; }
.progress-label { font: 500 0.74rem/1 var(--sans); color: var(--muted); transition: color var(--t); }
.progress li[aria-current] .progress-label { color: var(--primary); }
.progress li.is-done .progress-label { color: var(--secondary); }

.setup-step { animation: step-in 520ms var(--ease) both; }
.setup-step[hidden] { display: none; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.setup-head { text-align: center; }
.setup-head[hidden] { display: none; }
.setup-title { margin: 0; font: 600 clamp(1.75rem, 5.2vw, 2.15rem)/1.12 var(--sans); letter-spacing: -0.035em; color: var(--primary); }
.setup-sub { margin: 10px auto 0; max-width: 34ch; color: var(--secondary); font-size: 0.95rem; line-height: 1.55; }

.setup .preview-stage { padding: 30px 4px 34px; }

/* Step 1: a stack of notifications with real depth; it tilts as one piece. */
.preview-stage.stacked { padding-bottom: 58px; }
.preview-stage[hidden] { display: none; }
.stack {
  --rx: 0deg; --ry: 0deg;
  position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 350ms var(--ease);
}
.stack > .preview-card {
  position: relative; z-index: 2; transform: translateZ(0);
  background: linear-gradient(145deg, var(--solid-1), var(--solid-2));
}
.ghost-card {
  position: absolute; inset: 0; border-radius: 22px;
  background: linear-gradient(145deg, var(--solid-3), var(--solid-4)); border: 1px solid rgb(136 136 136 / 0.2);
  transform: translate3d(0, 14px, -34px) scale(0.95); opacity: 0.75;
  animation: preview-float 6s ease-in-out -0.5s infinite;
}
.ghost-card + .ghost-card { transform: translate3d(0, 28px, -68px) scale(0.9); opacity: 0.4; animation-delay: -1s; }

.setup-actions { display: grid; gap: 14px; justify-items: center; }
.setup-actions[hidden] { display: none; }
.setup-or { margin: 4px 0 -2px; color: var(--muted); font-size: 0.84rem; }
.setup-or[hidden] { display: none; }
.btn-pill.big { width: 100%; height: 52px; font-size: 0.95rem; }
.setup #qr-slot { margin-bottom: 22px; }
.setup #qr-slot[hidden], .setup #enable-blocked[hidden] { display: none; }
.setup .btn { border-radius: 999px; text-transform: none; letter-spacing: 0; font: 600 0.86rem/1 var(--sans); color: var(--primary); }
.setup .qr-card { background: rgb(var(--gray) / 0.14); border-color: rgb(var(--gray) / 0.55); }
.setup .qr-card .btn-quiet { color: var(--secondary); }

/* In Safari / in-app browsers the install guide takes over step 1. */
.setup-step .guide .guide-title { font: 600 clamp(1.6rem, 5vw, 2rem)/1.15 var(--sans); letter-spacing: -0.035em; text-align: center; }
.setup-step .guide .guide-lead { max-width: 36ch; margin: 0 auto 8px; text-align: center; }

/* Step 2 */
.setup .settings-form { margin-top: -8px; }
.setup-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; margin-top: 22px; }
.setup-bar .btn-pill { height: 52px; font-size: 0.92rem; }

/* Step 3 */
.live-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 18px; padding: 0 13px;
  border-radius: 999px; border: 1px solid rgb(var(--gray) / 0.75); background: rgb(var(--gray) / 0.2);
  color: var(--primary); font: 600 0.76rem/1 var(--sans);
}
.live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: breathe 1.6s ease-in-out infinite; }
.setup-step[data-step="3"] .group { margin: 30px 0 24px; }

.setup-note { margin: 48px 0 0; text-align: center; color: var(--muted); font-size: 0.78rem; }

@media (max-width: 760px) {
  .setup-wrap { padding-top: 18px; }
  .progress { margin-bottom: 30px; }
  /* Keep Start in reach while scrolling the form. */
  .page-setup .toast { bottom: calc(96px + env(safe-area-inset-bottom)); } /* above the Start bar */
  .setup-bar {
    position: sticky; bottom: 0; z-index: 5; margin: 14px calc(-1 * var(--gutter)) 0;
    padding: 18px var(--gutter) calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 72%, rgb(var(--shade) / 0));
  }
}
.money-hidden .hero-figure, .money-hidden .rev-total { letter-spacing: 0.05em; }

/* Installed app on a phone: the tab bar is on every page and replaces the header menu. */
@media (max-width: 760px) {
  .standalone body:not(.page-app) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .standalone .header-actions > :not(.profile-slot) { display: none; } /* the tab bar navigates; keep settings + profile */
  .standalone .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .standalone .setup-bar { bottom: calc(70px + env(safe-area-inset-bottom)); padding-bottom: 14px; }
}

/* ==========================================================================
   Pricing: credit packs
   ========================================================================== */
.pricing { position: relative; isolation: isolate; }
.pricing::before { /* the same soft light as setup */
  content: ''; position: absolute; z-index: -1; inset: -76px 0 auto; height: 620px; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgb(var(--gray) / 0.32), rgb(var(--shade) / 0) 72%);
}
.pricing-wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 36px var(--gutter) 40px; }

.pricing-head { text-align: center; margin-bottom: 48px; }
.preview-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; margin-bottom: 22px;
  border-radius: 999px; border: 1px solid rgb(var(--gray) / 0.75); background: rgb(var(--gray) / 0.18);
  color: var(--secondary); font: 500 0.76rem/1 var(--sans);
}
.preview-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.pricing-title { margin: 0; font: 600 clamp(2rem, 5.4vw, 3.1rem)/1.08 var(--sans); letter-spacing: -0.04em; color: var(--primary); }
.pricing-sub { margin: 16px auto 0; max-width: 40ch; color: var(--secondary); font-size: 1rem; line-height: 1.6; }

.how { margin-top: 64px; }
.how-title { margin: 0 0 18px; text-align: center; font: 600 1.15rem/1.2 var(--sans); letter-spacing: -0.02em; color: var(--primary); }
.how-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 820px) { .how-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.how-list li {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px;
  border-radius: 18px; border: 1px solid rgb(var(--gray) / 0.45); background: rgb(var(--gray) / 0.08);
  color: var(--secondary); font-size: 0.86rem; line-height: 1.5;
}
.how-list strong { display: block; margin-bottom: 2px; color: var(--primary); font-weight: 600; font-size: 0.92rem; }
.how-icon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: rgb(var(--gray) / 0.35); color: var(--primary);
}
.how-icon svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .pricing-wrap { padding-top: 22px; }
  .pricing-head { margin-bottom: 32px; }
  .how { margin-top: 44px; }
}

/* spectra.ui wordmark as live text, so it stays sharp at any size. */
.wordmark { color: var(--primary); font: 700 1.08rem/1 'Geist', var(--sans); letter-spacing: -0.045em; white-space: nowrap; }
.wordmark:hover { color: var(--primary); opacity: 0.8; }
.wordmark .wm-ui { font-weight: 400; letter-spacing: -0.02em; }

/* Order sound toggle, bottom-right of the globe panel (clear of the status line). */
.sound-btn {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid rgb(var(--gray) / 0.6); border-radius: 10px; background: rgb(var(--shade) / 0.5);
  color: var(--secondary); cursor: pointer; transition: color var(--t), background var(--t);
}
.sound-btn:hover { color: var(--primary); background: rgb(var(--gray) / 0.45); }
.sound-btn:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }
.sound-btn svg { width: 16px; height: 16px; }
.sound-btn .sound-off, .sound-btn[aria-pressed="false"] .sound-on { display: none; }
.sound-btn[aria-pressed="false"] .sound-off { display: block; }
.sound-btn[aria-pressed="false"] { color: var(--muted); }

/* iOS rubber-bands the whole page at its top and bottom edges and drags fixed bars along
   with it. Wherever the tab bar shows, switch the bounce off so the bar stays put. */
@media (max-width: 760px) {
  html:has(> body.page-app), html.standalone,
  body.page-app, .standalone body { overscroll-behavior-y: none; }
  /* Own compositing layer: keeps the bar from lagging a frame behind during fast scrolls. */
  .page-app .tabbar, .standalone .tabbar { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}

/* Credits balance in the run panel; links to the packs. */
.credits-row {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px;
  border-radius: 14px; border: 1px solid rgb(var(--gray) / 0.5); background: rgb(var(--shade) / 0.35);
  color: var(--secondary); font-size: 0.85rem; transition: background var(--t), border-color var(--t);
}
.credits-row:hover { color: var(--secondary); background: rgb(var(--gray) / 0.25); }
.credits-icon { display: grid; place-items: center; color: var(--primary); }
.credits-icon svg { width: 17px; height: 17px; }
.credits-text strong { font: 400 1rem var(--figure); color: var(--primary); font-variant-numeric: tabular-nums; }
.credits-more { margin-left: auto; color: var(--primary); font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.credits-row[data-level="low"] { border-color: rgb(176 176 176 / 0.55); }
.credits-row[data-level="empty"] { border-color: var(--secondary); background: rgb(var(--gray) / 0.3); }
.alert .btn-pill { flex: none; }

/* Recovery: the /recover form, the setup page's backup form and hints. */
.recover-form { display: grid; gap: 18px; margin-top: 30px; }
.email-form { margin: 8px 0 26px; }
.email-form .group-label { margin-top: 0; }
.email-form .summary-line { margin-bottom: 14px; }
.email-form .btn-pill { width: 100%; }
.setup-hint { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 0.84rem; line-height: 1.55; }
.setup-hint a { color: var(--secondary); text-decoration: underline; text-decoration-color: rgb(136 136 136 / 0.5); text-underline-offset: 3px; }
.setup-hint a:hover { color: var(--primary); }
.setup-sub strong { color: var(--primary); font-weight: 600; word-break: break-all; }
.setup-head + .setup-actions { margin-top: 24px; }
/* Email rows: long addresses need the room. */
.group .row .row-input.grow { flex: 1; width: auto; min-width: 0; }
.group .row.stacked { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 16px; }
.group .row.stacked .row-input { width: calc(100% + 16px); margin: 0 -8px; text-align: left; }

/* "Sign in" beside the header button; the menu has it on phones. */
.header-link { padding: 0 10px; color: var(--secondary); font: 500 0.9rem/1 var(--sans); white-space: nowrap; }
.header-link:hover { color: var(--primary); }
@media (max-width: 760px) { .header-link { display: none; } }

/* Setup step 3: the optional sign-in email, one quiet line under Open dashboard. */
.live-actions { margin: 28px 0 34px; }
.email-form-title { margin: 0 4px 8px; color: var(--secondary); font-size: 0.86rem; }
.group .row.email-inline { gap: 10px; }
.group .row.email-inline .row-input { text-align: left; margin: 0 0 0 -8px; }
.email-inline .text-btn { flex: none; color: var(--primary); }
.email-inline .text-btn:disabled { color: var(--muted); }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Profile button + menu (top right once signed in). It replaces the header's CTA. */
.float-header.signed-in [data-header-cta] { display: none; }
.profile-slot:empty { display: none; }
.profile { position: relative; }
.profile-btn, .pm-avatar {
  display: grid; place-items: center; flex: none; border-radius: 50%;
  background: linear-gradient(145deg, var(--solid-5), var(--solid-6)); border: 1px solid rgb(136 136 136 / 0.45);
  color: var(--primary); font: 600 0.92rem/1 var(--sans);
}
.profile-btn { width: 40px; height: 40px; padding: 0; cursor: pointer; transition: border-color var(--t), transform var(--t); }
.app-top .profile-btn { width: 38px; height: 38px; }
.profile-btn:hover { border-color: var(--secondary); }
.profile-btn:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }
.profile-btn[aria-expanded="true"] { border-color: var(--primary); }
.profile-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 90;
  width: 290px; max-width: calc(100vw - 24px); padding: 8px;
  border-radius: 18px; background: rgb(var(--menu) / 0.97); border: 1px solid rgb(var(--gray) / 0.8);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.6);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform-origin: top right; animation: pm-in 180ms var(--ease);
}
.profile-menu[hidden] { display: none; }
@keyframes pm-in { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: none; } }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; }
.pm-avatar { width: 42px; height: 42px; font-size: 1rem; }
.pm-who { display: grid; gap: 2px; min-width: 0; }
.pm-who strong { color: var(--primary); font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-who span { color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-credits {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 0 2px 4px; padding: 11px 12px; border-radius: 12px;
  background: rgb(var(--gray) / 0.22); border: 1px solid rgb(var(--gray) / 0.5);
  color: var(--secondary); font-size: 0.86rem;
}
.pm-credits:hover { color: var(--secondary); background: rgb(var(--gray) / 0.35); }
.pm-credits strong { font: 400 1.02rem var(--figure); color: var(--primary); }
.pm-more { color: var(--primary); font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.pm-item {
  display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--secondary); font: 500 0.9rem/1.3 var(--sans); text-align: left; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.pm-item:hover, .pm-item:focus-visible { background: rgb(var(--gray) / 0.35); color: var(--primary); outline: none; }
.pm-item[hidden] { display: none; }
.pm-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.75rem; font-weight: 400; }
.pm-item small:empty { display: none; }
.pm-accent { color: var(--primary); }
.pm-sep { height: 1px; margin: 6px 6px; background: rgb(var(--gray) / 0.55); }

/* Light theme: opt-in from Settings; dark stays the default. Same layout, other values. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #F2F2EF;
  --surface:   #CBCBC6;
  --muted:     #6A6A65;
  --secondary: #3D3D39;
  --primary:   #111111;
  --hairline:      rgb(120 120 115 / 0.45);
  --hairline-soft: rgb(120 120 115 / 0.28);
  --card:          rgb(255 255 255 / 0.6);
  --card-hover:    rgb(255 255 255 / 0.9);
  --glow:          rgb(17 17 17 / 0.14);
  --ink:   17 17 17;
  --shade: 255 255 255;
  --gray:  150 150 144;
  --menu:  255 255 255;
  --on-primary: #FFFFFF;
  --table-head: #F7F7F5;
  --solid-1: #FFFFFF; --solid-2: #F1F1EE;
  --solid-3: #F8F8F6; --solid-4: #E9E9E5;
  --solid-5: #FFFFFF; --solid-6: #E7E7E3;
}
/* White cards read better than tinted gray ones on a light page. */
:root[data-theme="light"] :is(.panel, .group, .qr-card, .alert) {
  background: rgb(255 255 255 / 0.78);
  border-color: rgb(150 150 144 / 0.35);
}
:root[data-theme="light"] .drawer { background: var(--bg); }
:root[data-theme="light"] .live { background: radial-gradient(120% 90% at 50% 110%, rgb(150 150 144 / 0.25), rgb(255 255 255 / 0) 70%), #FAFAF8; }
:root[data-theme="light"] .profile-menu { box-shadow: 0 20px 50px rgb(17 17 17 / 0.18); }
:root[data-theme="light"] .toast { background: #111; color: #F2F2EF; border-color: #111; }

/* ==========================================================================
   Home: a 3D iPhone. Stacked layers behind the face give it real thickness,
   so turning it shows the edge. phone.js sets --rx / --ry.
   ========================================================================== */
.phone-stage {
  --w: 272px; --h: calc(var(--w) * 2.06); --r: calc(var(--w) * 0.19);
  position: relative; display: grid; justify-items: center;
  margin: 12px auto 0; padding: 30px 0 70px; perspective: 1500px;
}
.phone-float { animation: phone-float 7s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes phone-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.phone {
  --rx: 10deg; --ry: -16deg;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(1.5deg);
  transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}
/* Thickness: eight copies of the frame, a little further back each time. */
.phone-edge {
  position: absolute; inset: 0; border-radius: var(--r);
  background: linear-gradient(90deg, #4a4a4a, #202020 12%, #151515 50%, #262626 88%, #4d4d4d);
  transform: translateZ(calc(var(--i) * -1.25px));
}
.phone-edge:last-of-type { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5); }
.phone-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(#5a5a5a, #2a2a2a); transform: translateZ(-5px); }
.phone-btn.left { left: -2px; }
.phone-btn.left.one { top: 20%; height: 7%; }
.phone-btn.left.two { top: 29%; height: 7%; }
.phone-btn.right { right: -2px; top: 24%; height: 11%; }
.phone-body {
  position: absolute; inset: 0; padding: 9px; border-radius: var(--r);
  background: linear-gradient(145deg, #3c3c3c, #111 45%, #2a2a2a);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 0 0 2px #050505;
  transform: translateZ(0.5px);
}
.phone-screen {
  position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--r) - 9px);
  background:
    radial-gradient(90% 55% at 50% 108%, rgb(224 224 224 / 0.16), rgb(0 0 0 / 0) 70%),
    radial-gradient(70% 45% at 20% 0%, rgb(120 120 120 / 0.18), rgb(0 0 0 / 0) 70%),
    #050505;
  color: #f2f2f2;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--sans);
}
/* The brand sphere as wallpaper. */
.phone-screen::before {
  content: ''; position: absolute; left: 50%; bottom: -8%; width: 120%; aspect-ratio: 1;
  translate: -50% 0; opacity: 0.35;
  background: url(/static/brand/spectra-mark.png) center / contain no-repeat;
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent);
          mask: radial-gradient(closest-side, #000 60%, transparent);
}
/* A soft glare that slides across as the phone turns. */
.phone-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.07) 45%, rgb(255 255 255 / 0) 60%);
  background-size: 250% 100%; background-position: var(--gx, 50%) 0;
}
.phone-island {
  position: absolute; z-index: 3; top: 10px; left: 50%; width: 30%; height: 22px;
  translate: -50% 0; border-radius: 999px; background: #000;
}
.ls-top { position: relative; z-index: 1; display: grid; justify-items: center; padding-top: 52px; text-shadow: 0 1px 12px rgb(0 0 0 / 0.4); }
.ls-date { font-size: 12.5px; font-weight: 600; opacity: 0.85; }
.ls-clock { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin-top: 2px; }
.ls-stack { position: relative; z-index: 2; display: grid; gap: 7px; padding: 22px 10px 0; transform: translateZ(0); }
.ls-notif {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: start;
  padding: 8px 10px; border-radius: 16px;
  background: rgb(58 58 58 / 0.78); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.12);
  font-size: 10.5px; line-height: 1.3; color: #f2f2f2;
  transform-origin: top center;
}
.ls-notif img { width: 28px; height: 28px; border-radius: 7px; }
.ls-notif strong { display: block; font-weight: 650; font-size: 11px; }
.ls-notif span { display: block; opacity: 0.92; }
.ls-notif em { font-style: normal; white-space: nowrap; }
.ls-notif time { font-size: 9.5px; opacity: 0.6; white-space: nowrap; }
/* Older ones tuck in behind, like iOS stacking them up. */
.ls-notif:nth-child(3) { opacity: 0.8; scale: 0.97; }

.ls-notif.in { animation: ls-in 650ms cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes ls-in {
  0% { opacity: 0; transform: translateY(-26px) scale(0.92); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.ls-bottom { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: space-between; padding: 0 30px; z-index: 1; }
.ls-bottom span { width: 38px; height: 38px; border-radius: 50%; background: rgb(60 60 60 / 0.65); }
.ls-home { position: absolute; z-index: 1; left: 50%; bottom: 9px; width: 36%; height: 4px; translate: -50% 0; border-radius: 99px; background: rgb(255 255 255 / 0.85); }
.phone-shadow {
  position: absolute; left: 50%; bottom: 26px; width: calc(var(--w) * 0.9); height: 34px;
  translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0));
  filter: blur(6px); animation: phone-shadow 7s ease-in-out infinite;
}
@keyframes phone-shadow { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 0.9; opacity: 0.75; } }
:root:not([data-theme="light"]) .phone-shadow { background: radial-gradient(closest-side, rgb(224 224 224 / 0.12), rgb(0 0 0 / 0)); }
:root[data-theme="light"] .phone-shadow { background: radial-gradient(closest-side, rgb(17 17 17 / 0.35), rgb(0 0 0 / 0)); }
@media (max-width: 480px) { .phone-stage { --w: 236px; padding-bottom: 60px; } .ls-clock { font-size: 54px; } }
@media (prefers-reduced-motion: reduce) {
  .phone-float, .phone-shadow { animation: none; }
  .phone { transition: none; }
}

/* Continue with Google: Google's dark button on the dark theme, its light one on light. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px;
  border-radius: 999px; border: 1px solid #8E918F; background: #131314; color: #E3E3E3;
  font: 600 0.95rem/1 var(--sans); transition: background var(--t), border-color var(--t);
}
.btn-google:hover { color: #E3E3E3; background: #1f1f20; }
:root[data-theme="light"] .btn-google { background: #FFFFFF; border-color: #747775; color: #1F1F1F; }
:root[data-theme="light"] .btn-google:hover { background: #F7F8F8; color: #1F1F1F; }
.g-logo { width: 20px; height: 20px; flex: none; }
.signin-google { display: grid; gap: 4px; margin: 26px 0 0; }
.signin-google[hidden] { display: none; }
.email-form .signin-google { margin: 4px 0 10px; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; color: var(--muted); font-size: 0.8rem; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: rgb(var(--gray) / 0.55); }
.signin-google + .recover-form { margin-top: 14px; }
.signin-error {
  margin: 22px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px solid rgb(var(--gray) / 0.7);
  background: rgb(var(--gray) / 0.2); color: var(--primary); font-size: 0.86rem; line-height: 1.5;
}
.signin-error[hidden] { display: none; }
.g-label { display: inline-flex; align-items: center; gap: 8px; }
.g-label .g-logo { width: 16px; height: 16px; }
.group .row[hidden] { display: none; }

/* ==========================================================================
   Ambient background on every page: three soft glows in the theme's ink.
   Each drifts on its own loop, and slides a different way as you scroll
   (common.js sets --scroll from 0 at the top to 1 at the bottom).
   ========================================================================== */
.ambient { --scroll: 0; position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; }
/* Scoped to .ambient: the dashboard's gross figure has its own .glow state. */
.ambient .glow {
  position: absolute; width: 75vmax; height: 75vmax;
  transition: transform 450ms cubic-bezier(.2, .7, .2, 1); will-change: transform;
}
.ambient .glow i { position: absolute; inset: 0; border-radius: 50%; animation: glow-drift 40s ease-in-out infinite alternate; }
/* Top left: follows you down the page. */
.ambient .g1 { left: -30vmax; top: -34vmax; transform: translate3d(calc(var(--scroll) * 38vw), calc(var(--scroll) * 70vh), 0); }
.ambient .g1 i { background: radial-gradient(closest-side, rgb(var(--ink) / 0.12), rgb(var(--ink) / 0.045) 50%, rgb(var(--ink) / 0)); }
/* Right: sweeps across and swells. */
.ambient .g2 { right: -38vmax; top: 6vh; transform: translate3d(calc(var(--scroll) * -48vw), calc(var(--scroll) * 30vh), 0) scale(calc(1 + var(--scroll) * 0.35)); }
.ambient .g2 i { background: radial-gradient(closest-side, rgb(var(--ink) / 0.08), rgb(var(--ink) / 0.03) 55%, rgb(var(--ink) / 0)); animation-duration: 48s; animation-delay: -14s; }
/* Bottom: rises to meet you. */
.ambient .g3 { left: 5vw; bottom: -52vmax; transform: translate3d(calc(var(--scroll) * 18vw), calc(var(--scroll) * -62vh), 0); }
.ambient .g3 i { background: radial-gradient(closest-side, rgb(var(--ink) / 0.09), rgb(var(--ink) / 0.03) 55%, rgb(var(--ink) / 0)); animation-duration: 56s; animation-delay: -30s; }
@keyframes glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(7vw, -5vh) scale(1.12); }
  100% { transform: translate(-6vw, 6vh) scale(0.94); }
}
/* A whisper of film grain so the gradient never bands. */
.grain {
  position: absolute; inset: 0; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .grain { opacity: 0.035; }
:root[data-theme="light"] .ambient .glow i { opacity: 0.8; }
/* The dashboard has the globe for motion and blurred bars above it, so its glows only move with the scroll. */
.page-app .ambient .glow i { animation: none; }
.page-app .ambient { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) { .ambient .glow { transition: none; } .ambient .glow i { animation: none; } }

/* Tab bar: a fade instead of a solid bar with a line. Clear at the top, dark behind
   the icons. No backdrop blur: blur has a hard top edge, which is the line we're losing.
   The clear part lets taps through to the page underneath. */
@media (max-width: 760px) {
  .page-app .tabbar, .standalone .tabbar {
    padding-top: 32px;
    border-top: 0;
    background: linear-gradient(to bottom,
      rgb(var(--shade) / 0) 0%,
      rgb(var(--shade) / 0.55) 16%,
      rgb(var(--shade) / 0.9) 34%,
      rgb(var(--shade) / 0.98) 52%,
      rgb(var(--shade) / 1) 100%);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    pointer-events: none;
  }
  .page-app .tabbar a, .standalone .tabbar a { pointer-events: auto; }
  .standalone body:not(.page-app) { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

/* Settings gear, top right on every page, beside the profile button. */
.profile-slot { display: flex; align-items: center; gap: 8px; }
.settings-btn {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  background: rgb(var(--gray) / 0.28); border: 1px solid rgb(var(--gray) / 0.6);
  color: var(--primary); cursor: pointer; transition: background var(--t), border-color var(--t);
}
.settings-btn:hover { color: var(--primary); background: rgb(var(--gray) / 0.5); }
.settings-btn:focus-visible { outline: 1px solid var(--primary); outline-offset: 2px; }
.settings-btn svg { width: 18px; height: 18px; transition: rotate 400ms var(--ease); }
.settings-btn:hover svg { rotate: 45deg; }
.app-top .settings-btn { width: 38px; height: 38px; }

/* Reviews: real quotes only (static/reviews.json). Hidden while the list is empty.
   Three across on desktop; a swipeable row on phones. */
.reviews[hidden] { display: none; }
.review-row { display: grid; gap: 14px; }
@media (min-width: 820px) { .review-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 819px) {
  .review-row {
    grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none;
  }
  .review-row::-webkit-scrollbar { display: none; }
  .review { scroll-snap-align: center; }
}
.review {
  display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 24px;
  border-radius: 22px; border: 1px solid rgb(var(--gray) / 0.5);
  background: linear-gradient(180deg, rgb(var(--gray) / 0.2), rgb(var(--gray) / 0.06));
}
:root[data-theme="light"] .review { background: rgb(255 255 255 / 0.78); border-color: rgb(150 150 144 / 0.35); }
.review-stars { margin: 0; color: var(--primary); font-size: 0.9rem; letter-spacing: 0.12em; }
.review-stars span { color: rgb(var(--gray) / 0.8); }
.review blockquote { margin: 0; flex: 1; color: var(--primary); font: 400 1.05rem/1.55 var(--sans); letter-spacing: -0.01em; }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(145deg, var(--solid-5), var(--solid-6)); border: 1px solid rgb(136 136 136 / 0.4);
  color: var(--primary); font: 600 0.85rem/1 var(--sans);
}
.review figcaption strong { display: block; color: var(--primary); font-weight: 600; font-size: 0.9rem; }
.review figcaption small { display: block; color: var(--muted); font-size: 0.8rem; }

/* Legal pages (Terms, Privacy, Refunds, Contact): one readable column. */
.legal-wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: 36px var(--gutter) 48px; }
.legal-head { margin-bottom: 26px; }
.legal-title { margin: 0; font: 600 clamp(1.9rem, 5vw, 2.5rem)/1.1 var(--sans); letter-spacing: -0.035em; color: var(--primary); }
.legal-updated { margin: 10px 0 0; color: var(--muted); font-size: 0.85rem; }
.legal-lede { margin: 0 0 8px; color: var(--primary); font-size: 1.05rem; line-height: 1.6; }
.legal-body h2 { margin: 34px 0 10px; font: 600 1.08rem/1.3 var(--sans); letter-spacing: -0.01em; color: var(--primary); }
.legal-body p, .legal-body li { color: var(--secondary); font-size: 0.95rem; line-height: 1.7; }
.legal-body p { margin: 0 0 12px; }
.legal-body ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.legal-body strong { color: var(--primary); font-weight: 600; }
.legal-body a { color: var(--primary); text-decoration: underline; text-decoration-color: rgb(var(--gray) / 0.9); text-underline-offset: 3px; }
.legal-body a:hover { text-decoration-color: var(--primary); }
.contact-card {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 8px; padding: 18px;
  border-radius: 18px; border: 1px solid rgb(var(--gray) / 0.55); background: rgb(var(--gray) / 0.16);
  text-decoration: none !important; transition: background var(--t), border-color var(--t);
}
.contact-card:hover { background: rgb(var(--gray) / 0.3); border-color: rgb(var(--gray) / 0.8); }
.contact-card strong { display: block; color: var(--primary); font-size: 1.02rem; }
.contact-card small { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.contact-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: rgb(var(--gray) / 0.4); color: var(--primary); }
.contact-icon svg { width: 20px; height: 20px; }
:root[data-theme="light"] .contact-card { background: rgb(255 255 255 / 0.78); }

/* Terms · Privacy · Refunds · Contact, at the bottom of pages and in Settings. */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 0; }
.legal-links a { color: var(--muted); font-size: 0.8rem; }
.legal-links a:hover, .legal-links a[aria-current="page"] { color: var(--primary); }
.legal-wrap .legal-links { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgb(var(--gray) / 0.45); }
.drawer-links { margin: 26px 0 6px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--primary); }
.packs-note { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: 0.84rem; }
.packs-note a { color: var(--secondary); text-decoration: underline; text-decoration-color: rgb(var(--gray) / 0.8); text-underline-offset: 3px; }
.packs-note a:hover { color: var(--primary); }

/* Pricing: one slim picker. A highlight glides behind the chosen pack. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.plan-picker { display: grid; gap: 16px; max-width: 440px; margin: 0 auto; }
.plan-options {
  position: relative; display: grid; gap: 2px; margin: 0; padding: 6px; min-width: 0;
  border: 1px solid rgb(var(--gray) / 0.5); border-radius: 22px; background: rgb(var(--gray) / 0.1);
}
.plan-glider {
  position: absolute; top: 0; left: 6px; right: 6px; height: 0; border-radius: 16px; pointer-events: none;
  background: rgb(var(--gray) / 0.34); border: 1px solid rgb(var(--ink) / 0.22);
  box-shadow: 0 12px 32px -20px rgb(var(--ink) / 0.5);
  transition: transform 420ms cubic-bezier(.2, .8, .2, 1), height 420ms cubic-bezier(.2, .8, .2, 1);
}
.plan {
  position: relative; z-index: 1; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 14px;
  padding: 17px 16px; border-radius: 16px; cursor: pointer;
}
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan-radio {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgb(var(--gray) / 0.95); transition: border-color var(--t);
}
.plan-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); scale: 0; transition: scale 260ms cubic-bezier(.2, .8, .2, 1.3); }
.plan input:checked ~ .plan-radio { border-color: var(--primary); }
.plan input:checked ~ .plan-radio::after { scale: 1; }
.plan input:focus-visible ~ .plan-radio { outline: 1px solid var(--primary); outline-offset: 3px; }
.plan-credits { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; color: var(--muted); font-size: 0.88rem; }
.plan-credits strong { font: 300 1.4rem/1 var(--figure); letter-spacing: -0.03em; color: var(--secondary); transition: color var(--t); }
.plan-price { font: 400 1.06rem/1 var(--figure); color: var(--secondary); transition: color var(--t); }
.plan:has(input:checked) .plan-credits strong, .plan:has(input:checked) .plan-price { color: var(--primary); }
.plan-tag {
  align-self: center; padding: 4px 8px; border-radius: 999px; border: 1px solid rgb(var(--gray) / 0.75);
  color: var(--secondary); font: 600 0.66rem/1 var(--sans); font-style: normal;
}
.plan:has(input:checked) .plan-tag { border-color: var(--primary); color: var(--primary); }
.plan-detail { margin: 0; text-align: center; color: var(--muted); font-size: 0.86rem; }
.plan-picker .btn-pill.big:disabled { opacity: 0.85; }
.plan-picker .packs-note { margin: 0; }
:root[data-theme="light"] .plan-options { background: rgb(255 255 255 / 0.55); border-color: rgb(150 150 144 / 0.4); }
:root[data-theme="light"] .plan-glider { background: #FFFFFF; border-color: rgb(17 17 17 / 0.18); box-shadow: 0 12px 30px -18px rgb(17 17 17 / 0.3); }

/* How credits work: three quiet columns, no boxes. */
.how { margin-top: 56px; }
.how-list li { padding: 0; border: 0; background: none; }
.how-icon { width: 32px; height: 32px; border-radius: 10px; }
@media (max-width: 819px) { .how-list { gap: 18px; } }