/* Self-hosted DM Sans variable (100-1000) — no third-party font host. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Self-hosted Space Grotesk variable (axis 300-700; the wide declared range
   lets 800-weight rules clamp to the axis instead of synthesizing bold). */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/spacegrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reference palette: pure black page, near-black panels, white as the one
   action color — selection, trust marks and the pay button all read in
   white on black. Discord concepts (role chips, the open-server button)
   use Discord blurple; payment brand marks keep their own colors. */
:root {
  --bg: #0a0a0a;
  --panel: #101010;
  --panel-hover: #161616;
  --edge: #232323;
  --edge-selected: #ffffff;
  --ink: #f5f5f4;
  --dim: #9a9a94;
  --accent: #ededed;
  --accent-hot: #ffffff;
  --accent-ink: #0a0a0a;
  --well: #0c0c0c;
  --raised: #141414;
  --hairline: #161616;
  --hairline-2: #1f1f1f;
  --edge-hot: #3d3d3d;
  --active-fill: #1d1d1d;
  --faint: #4a4a4a;
  --solid: #ffffff;
  --solid-ink: #0a0a0a;
  --blurple: #5865f2;
  --blurple-text: #8b96f8;
  --stripe: #635bff;
  --good: #ededed;
  --bad: #f87171;
  --font-head: 'Space Grotesk', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  /* Motion tokens (Emil Kowalski's curves — built-in easings are too weak). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}


/* ── light theme: warm off-white editorial, black as the action color.
   Product depictions (mini mocks, browser frames, the hero tour) stay dark
   in both themes — they are screenshots of the app, not site chrome. ── */
html[data-theme='light'] {
  --bg: #fafaf8;
  --panel: #ffffff;
  --panel-hover: #f1f1ee;
  --edge: #dcdcd6;
  --edge-selected: #0a0a0a;
  --ink: #161616;
  --dim: #6d6d66;
  --accent: #1a1a1a;
  --accent-hot: #000000;
  --accent-ink: #ffffff;
  --good: #1a1a1a;
  --bad: #c43c3c;
  --blurple-text: #4753c9;
  --well: #f4f4f1;
  --raised: #ecece9;
  --hairline: #e9e9e4;
  --hairline-2: #dededa;
  --edge-hot: #b6b6af;
  --active-fill: #e7e7e2;
  --faint: #a6a69e;
  --solid: #0a0a0a;
  --solid-ink: #ffffff;
}
html[data-theme='light'] body { background: var(--bg); color: var(--ink); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── setup-doctor warning ─────────────────────────────────────────────────── */
.doctor-banner {
  background: #7f1d1d;
  color: #fecaca;
  border-bottom: 2px solid #ef4444;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

/* ── top bar ──────────────────────────────────────────────────────────────── */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--edge);
}

.wordmark {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
}

/* The lockup PNG is transparent; no blend tricks needed. */
.platform-mark, .powered-mark { display: block; }
.platform-mark { height: 18px; width: auto; }
.powered-mark { height: 18px; width: auto; margin: 6px auto 0; }

.top-left { display: flex; align-items: center; gap: 14px; }

.doctor-banner a { color: var(--ink); font-weight: 700; }

/* role picker */
.picker .role-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.role-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
}
.role-row:hover:not(:disabled) { background: var(--panel-hover); border-color: var(--accent); }
.role-row.unusable { opacity: 0.55; cursor: not-allowed; }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.role-name { font-weight: 700; }
.role-pos { color: var(--dim); font-size: 12px; }
.role-use { margin-left: auto; color: var(--accent); font-weight: 700; font-size: 13px; }
.role-why { margin-left: auto; color: var(--dim); font-size: 12px; text-align: right; max-width: 55%; }

/* Connect-Wallet-style pill for the header action */
.btn-pill {
  font-family: var(--font-body);
  background: var(--panel-hover);
  border: 1px solid var(--edge-hot);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-pill:hover { background: var(--active-fill); }

.account { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-size: 14px; color: var(--dim); }

.badge {
  background: rgba(245, 242, 238, 0.07);
  color: var(--ink);
  border: 1px solid var(--edge-selected);
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 700;
}

/* ── centered checkout column ─────────────────────────────────────────────── */
.checkout {
  flex: 1;
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 48px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brand { text-align: center; margin-bottom: 18px; }

.logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 85%, transparent);
  background: var(--panel);
  object-fit: cover;
  margin-bottom: 16px;
}

.brand h1 {
  font-family: var(--font-head);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.brand-name { color: var(--dim); font-size: 14px; margin-top: 2px; }
.tagline {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 400;
  margin-top: 16px;
}
.tagline .hl { color: var(--accent); }

/* ── panels ───────────────────────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 16px;
  padding: 19px 22px;
}

.row-panel { display: flex; justify-content: space-between; align-items: center; }
.row-label { color: var(--dim); font-size: 15px; }
.row-value { font-family: var(--font-head); font-size: 24px; font-weight: 700; }

.product-shot {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--edge);
  display: block;
}

/* "Add a note" (reference pattern) — the note rides into Stripe metadata */
.note-panel { display: flex; flex-direction: column; gap: 10px; }
.note-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15.5px; }
.note-title svg { color: var(--dim); }
.note-panel textarea {
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 12px 14px;
  resize: vertical;
  min-height: 52px;
}
.note-panel textarea::placeholder { color: var(--dim); }
.note-panel textarea:focus-visible { outline: none; border-color: var(--edge-selected); }
.note-help { color: var(--dim); font-size: 13px; }

/* Payment error panel (reference pattern) */
.error-panel {
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.14);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.error-head { display: flex; align-items: center; gap: 9px; color: var(--bad); font-weight: 700; font-size: 15.5px; }
.error-msg { color: #fca5a5; font-size: 14px; }
.error-actions { display: flex; gap: 10px; }
.error-actions .try-again {
  flex: 1;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.45);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 10px;
  padding: 11px;
  cursor: pointer;
}
.error-actions .try-again:hover { background: rgba(127, 29, 29, 0.65); }
.error-actions .dismiss {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: var(--panel-hover);
  border: 1px solid var(--edge-hot);
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
}
.error-actions .dismiss:hover { background: #222; }

.label {
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: rgba(88, 101, 242, 0.12);
  color: var(--blurple-text);
  border: 1px solid rgba(88, 101, 242, 0.35);
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 13.5px;
  font-weight: 700;
}

/* ── select option rows ───────────────────────────────────────────────────── */
.option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 15px 16px;
  cursor: pointer;
  background: transparent;
  width: 100%;
  font: inherit;
  color: var(--ink);
  text-align: left;
}
.option + .option { margin-top: 8px; }
.option:hover { background: var(--panel-hover); }
.option.selected {
  border-color: var(--edge-selected);
  box-shadow: 0 0 0 1px var(--edge-selected);
  background: rgba(245, 242, 238, 0.04);
}
.option .opt-name { font-weight: 700; }
.option .opt-name small { color: var(--dim); font-weight: 500; margin-left: 6px; }
.option .opt-price { font-family: var(--font-head); font-weight: 700; font-size: 18px; }

/* ── payment method tiles ─────────────────────────────────────────────────── */
.methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.method {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 17px 18px;
  cursor: pointer;
  background: var(--panel);
  font: inherit;
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
}
.method:hover { background: var(--panel-hover); }
.method.selected { border-color: var(--accent); background: rgba(255, 255, 255, 0.05); }
.method svg { flex: none; }
.method .provider-badge {
  font-size: 10.5px;
  font-weight: 800;
  font-style: italic;
  color: var(--stripe);
  letter-spacing: 0.01em;
}

/* ── pay panel (XOE pattern) ──────────────────────────────────────────────── */
.pay-panel { display: flex; flex-direction: column; gap: 12px; }
.pay-head { display: flex; align-items: center; gap: 10px; }
.pay-head h2 { font-family: var(--font-head); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.pill {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--accent);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 12.5px;
  font-weight: 700;
}
.pay-sub { color: var(--dim); font-size: 14.5px; }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 12px 0;
  border-top: 1px solid var(--edge);
  color: var(--dim);
  font-size: 14px;
}
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { color: var(--accent); flex: none; }
.redirect-note { color: var(--dim); font-size: 13.5px; text-align: center; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
#cta-area { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }

/* Reference pill CTA: dark green-tinted fill, green border, white text. */
.pay-btn {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  /* The buy action wears Discord's blurple: the thing being bought is a
     Discord role, and it is the one place color carries meaning. */
  background: var(--blurple);
  color: #ffffff;
  transition: background 0.15s ease, transform 0.06s ease;
  min-height: 52px;
}
.pay-btn:hover:not(:disabled) { background: #4752c4; }
.pay-btn:active:not(:disabled) { transform: scale(0.99); }
.pay-btn:disabled { opacity: 0.55; cursor: wait; }
.pay-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.secure-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--dim);
  font-size: 13.5px;
}

.pay-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: var(--bad);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
}

/* Owned state as the inverted card (dark-grid / advanced-stats pattern):
   the one white panel on the page marks the thing that is already yours. */
.settled {
  border: 1px solid var(--ink);
  background: var(--solid);
  color: var(--accent-ink);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  font-weight: 700;
}
.settled small { display: block; color: var(--faint); font-weight: 500; margin-top: 4px; }

.notice {
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--good);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
}

.fineprint { color: var(--dim); font-size: 13px; text-align: center; margin-top: 10px; line-height: 1.55; }

/* ── header buttons ───────────────────────────────────────────────────────── */
.btn-login {
  font-family: var(--font-body);
  background: var(--accent);
  border: none;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-login:hover { background: var(--accent-hot); }
.btn-ghost {
  font-family: var(--font-body);
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--dim);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--dim); }

.btn-danger {
  font-family: var(--font-body);
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #f87171;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
}
.btn-danger:hover { border-color: #f87171; background: rgba(248, 113, 113, 0.08); }

footer {
  padding: 26px 28px 30px;
  border-top: 1px solid var(--edge);
  color: var(--dim);
  font-size: 13px;
  text-align: center;
}
.powered-label { display: block; }

/* ── order receipt ────────────────────────────────────────────────────────── */
.check-ring {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-ring.pending {
  border-color: var(--edge-selected);
  color: var(--dim);
  animation: ring-pulse 1.6s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .check-ring.pending { animation: none; }
}

.order-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 15px;
}
.order-row:last-child { border-bottom: none; }
.order-row .k { color: var(--dim); }
.order-row .v { font-weight: 500; text-align: right; }
.order-row.total .k { color: var(--ink); font-weight: 700; }
.order-row.total .v { font-family: var(--font-head); font-weight: 700; font-size: 20px; }

.callout {
  border-radius: 12px;
  padding: 15px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  border: 1px solid rgba(255, 85, 0, 0.3);
  background: rgba(255, 85, 0, 0.07);
  color: #ffb38a;
}
.callout.pending {
  border-color: var(--edge-selected);
  background: rgba(245, 242, 238, 0.04);
  color: var(--dim);
}

.btn-blurple, .btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  border-radius: 8px;
  padding: 13px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  min-height: 48px;
}
.btn-blurple { background: var(--blurple); color: #ffffff; }
.btn-blurple:hover { background: #6a76f3; }
.btn-secondary {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--edge);
  font-weight: 600;
}
.btn-secondary:hover { background: var(--panel-hover); border-color: var(--edge-selected); }
.btn-blurple:focus-visible, .btn-secondary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── platform: header nav, account, dashboard ─────────────────────────────── */
.nav-link {
  color: var(--dim);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
}
.nav-link:hover { color: var(--ink); background: var(--panel-hover); }
.checkout.wide { max-width: 860px; }

.chip {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--edge);
  white-space: nowrap;
}
.chip-good { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chip-warn { color: #fbbf24; border-color: color-mix(in srgb, #fbbf24 45%, transparent); }
.chip-off { color: var(--dim); }

.sub-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; text-align: left; }
.sub-card h2 { font-size: 17px; margin: 0; }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kv { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.kv span:first-child { color: var(--dim); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; text-align: left; }
.stat-label { color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.stat-value { font-size: 24px; font-weight: 800; }

.table-panel { padding: 16px 18px; text-align: left; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; color: var(--dim); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 10px;
  border-bottom: 1px solid var(--edge);
}
.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--edge); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .dim { color: var(--dim); font-size: 11.5px; }

/* ── platform landing page ────────────────────────────────────────────────── */
.landing { width: min(960px, calc(100% - 32px)); margin: 0 auto; display: flex; flex-direction: column; gap: 26px; padding-bottom: 40px; }
.hero {
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--edge);
  min-height: 340px; display: flex; align-items: center; justify-content: center; text-align: center;
}
/* (the old full-bleed .hero-video/.hero-shade background rules lived here —
   they absolutely-positioned ANY .hero-video at 55% opacity, which collapsed
   the browser-frame to its bar and clipped the tour to nothing. Never bring
   them back: the hero media must be a normal in-flow block.) */
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 46px 22px; }
.hero-mark { mix-blend-mode: screen; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.12; margin: 0; letter-spacing: -0.02em; }
.hero-sub { color: var(--dim); max-width: 460px; font-size: 15px; margin: 0; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.hero-cta { text-decoration: none; display: inline-block; }
.hero-alt { text-decoration: none; display: inline-flex; align-items: center; }

.store-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; }
.store-icon { border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 85%, transparent); flex: none; }
.store-meta { flex: 1; min-width: 0; }
.store-meta h2 { margin: 0; font-size: 17px; }
.store-cta { text-decoration: none; white-space: nowrap; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.feature { padding: 18px; text-align: left; }
.feature h3 { margin: 0 0 8px; font-size: 15.5px; }
.feature p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.55; }

.steps-title { text-align: center; font-size: 20px; margin: 6px 0 14px; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.step { padding: 18px; text-align: left; display: flex; gap: 12px; align-items: flex-start; }
.step p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.step p strong { color: var(--ink); }
.step-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent);
  font-weight: 800; font-size: 13px;
}

.site-footer {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 26px 16px 34px; color: var(--dim); font-size: 13px;
}
.footer-nav { display: flex; gap: 14px; }
.footer-nav a { color: var(--dim); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.legal h2 { font-size: 15.5px; margin: 8px 0 2px; }
.legal p { margin: 0 0 6px; color: var(--dim); font-size: 13.5px; line-height: 1.6; }
.legal a { color: var(--accent); }

/* ── landing v2: kicker, split, demo card, FAQ, final CTA ─────────────────── */
.hero-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 5px 12px; border-radius: 6px;
}
.hero-trust { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; color: var(--dim); font-size: 12.5px; margin-top: 10px; }

.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: center; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }
.split-copy h2 { font-size: 22px; margin: 0 0 10px; }
.split-copy p { color: var(--dim); font-size: 14px; margin: 0 0 12px; }
.tick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tick-list li { color: var(--dim); font-size: 13.5px; line-height: 1.55; padding-left: 26px; position: relative; }
.tick-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.tick-list strong { color: var(--ink); }

/* the real membership email, screenshotted from the template itself */
.email-shot {
  display: block; width: min(460px, 100%); height: auto; margin: 0 auto;
  border-radius: 8px; border: 1px solid var(--edge);
}

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { padding: 0; text-align: left; }
.faq-item summary {
  cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 14px; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::after { content: '+'; color: var(--dim); font-size: 18px; font-weight: 400; }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin: 0; padding: 0 18px 15px; color: var(--dim); font-size: 13.5px; line-height: 1.6; }
.faq-item a { color: var(--accent); }

.final-cta { padding: 34px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.final-cta h2 { margin: 0; font-size: 24px; }

.site-footer.cols { align-items: flex-start; gap: 40px; text-align: left; }
/* the SEO-mesh footer carries five link columns — grid keeps them tidy */
.site-footer.seo-footer {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 24px; max-width: 1100px; margin: 0 auto; justify-items: start;
}
.site-footer.seo-footer .footer-disclaimer { grid-column: 1 / -1; }
@media (max-width: 640px) { .site-footer.seo-footer { grid-template-columns: 1fr 1fr; } }
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-col a { color: var(--dim); text-decoration: none; font-size: 13px; }
.footer-col a:hover { color: var(--ink); }
.footer-head { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 2px; }

/* ── dashboard app: picker, wizard, tabs, chart ───────────────────────────── */
.dash-head h1 { font-size: 24px; margin: 0 0 4px; }
.dash-head { margin-bottom: 16px; }
.dash-foot { margin-top: 14px; }

.g-list { display: flex; flex-direction: column; gap: 10px; }
.g-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  text-decoration: none; color: var(--ink); min-height: 56px;
}
.g-row:hover { background: var(--panel-hover); border-color: var(--edge-selected); }
.g-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.g-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; }
.g-icon-fallback { display: grid; place-items: center; background: var(--panel-hover); color: var(--dim); font-weight: 800; }
.g-name { font-weight: 700; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-chips { display: flex; gap: 6px; margin-left: auto; }
.g-action { color: var(--dim); display: flex; }

.skeleton-list { display: flex; flex-direction: column; gap: 10px; }
.sk-row { height: 56px; position: relative; overflow: hidden; }
.sk-row::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ink) 5%, transparent) 50%, transparent 70%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk-row::after { animation: none; } }

.wiz-back {
  display: inline-flex; align-items: center; gap: 7px; color: var(--dim);
  text-decoration: none; font-size: 13px; font-weight: 600; margin-bottom: 14px; min-height: 44px;
}
.wiz-back:hover { color: var(--ink); }

.stepper { list-style: none; display: flex; gap: 4px; margin: 0 0 8px; padding: 0; flex-wrap: wrap; }
.step-i { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 120px; color: var(--dim); font-size: 12.5px; font-weight: 600; padding: 6px 4px; }
.step-i .step-dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--edge); font-size: 12px; font-weight: 800;
}
.step-i.now { color: var(--ink); }
.step-i.now .step-dot { border-color: var(--accent); color: var(--accent); }
.step-i.done .step-dot { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: transparent; color: var(--accent); }
.step-bar { height: 3px; border-radius: 2px; background: var(--edge); margin-bottom: 18px; overflow: hidden; }
.step-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 320ms cubic-bezier(0.2, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) { .step-bar span { transition: none; } }

.wiz-panel { padding: 22px; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.wiz-panel h2 { display: flex; align-items: center; gap: 9px; font-size: 17px; margin: 0; }
.wiz-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wiz-actions .btn-pill, .wiz-actions .btn-secondary { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field-label { font-size: 13px; font-weight: 700; }
.field input, .field select {
  background: var(--bg); color: var(--ink); border: 1px solid var(--edge); border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 15px; min-height: 44px; width: 100%;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field-help { color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.field-err { color: #f87171; font-size: 12.5px; min-height: 0; }
.field-err:empty { display: none; }

.wiz-done { align-items: center; text-align: center; }
.done-ring {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.share-row { display: flex; gap: 8px; align-items: stretch; width: 100%; max-width: 460px; }
.share-link {
  flex: 1; min-width: 0; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--edge);
  border-radius: 10px; padding: 11px 13px; font-size: 13px; color: var(--ink); text-align: left;
}
/* the base .btn-secondary is width:100%; inside the link row the buttons
   must hug their labels so the URL gets the space */
.share-row .btn-secondary { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none; width: auto; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--edge); margin-bottom: 16px; }
.tab {
  color: var(--dim); text-decoration: none; font-size: 13.5px; font-weight: 700;
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; display: inline-flex; align-items: center;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }

.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.chart-total { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rev-chart { width: 100%; height: auto; display: block; }
.data-table td.num, .stat-value { font-variant-numeric: tabular-nums; }

.f-ic { color: var(--accent); vertical-align: -3px; margin-right: 2px; }

.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust svg { color: var(--accent); }

/* ── Subscord-style app shell (dashboard) ─────────────────────────────────── */
body.app { display: flex; flex-direction: column; min-height: 100dvh; }
.app-main { width: min(1440px, 100%); margin: 0 auto; padding: 0 22px 48px; flex: 1; }

.appbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--edge); margin: 0 -22px 22px; padding: 0 22px;
  position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); z-index: 20;
}
.appbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.appbar-logo { display: flex; padding: 9px 6px 9px 0; }
.appbar-logo img { border-radius: 6px; }
.appbar-tabs { display: flex; gap: 2px; overflow-x: auto; }
.apptab {
  color: var(--dim); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  padding: 15px 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 48px; display: inline-flex; align-items: center;
}
.apptab:hover { color: var(--ink); }
.apptab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
.apptab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.appbar-right { display: flex; align-items: center; gap: 8px; }
.store-switch {
  background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-radius: 9px;
  padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 600; min-height: 38px; max-width: 220px;
}
.store-switch-label { font-size: 13px; font-weight: 700; color: var(--dim); }
.appbar-view { display: inline-flex; align-items: center; }

.stat-grid.five { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-ic { color: var(--dim); display: flex; }

.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 12px; }
/* grid items default to min-width auto, which lets a wide table push the
   whole page into horizontal scroll instead of scrolling inside its panel */
.chart-grid > * { min-width: 0; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card { padding: 18px; text-align: left; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h3 { margin: 0; font-size: 15.5px; }
.card-head .btn-secondary { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-size: 12.5px; padding: 8px 12px; }
.card-sub { margin: 3px 0 0; color: var(--dim); font-size: 12.5px; }
.empty-chart {
  display: grid; place-items: center; min-height: 130px; color: var(--dim); font-size: 13px;
  border: 1px dashed var(--edge); border-radius: 10px; text-align: center; padding: 14px;
}
.sales-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sales-list li { display: flex; align-items: center; gap: 10px; }
.sale-ic { width: 32px; height: 32px; font-size: 13px; }
.sale-meta { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.sale-meta .dim { font-size: 12px; }
.sale-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.table-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.search-box {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 420px;
  background: var(--bg); border: 1px solid var(--edge); border-radius: 10px; padding: 0 12px; color: var(--dim);
}
.search-box input { background: none; border: none; color: var(--ink); font: inherit; font-size: 14px; padding: 11px 0; width: 100%; min-height: 44px; }
.search-box input:focus { outline: none; }
.search-box:focus-within { border-color: var(--accent); }
.rows-note { color: var(--dim); font-size: 12.5px; margin: 12px 0 0; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }

/* server picker: centred panel like the reference */
.picker-wrap { display: flex; justify-content: center; padding: 48px 0 24px; }
.picker-card { width: min(560px, 100%); padding: 24px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.picker-head { display: flex; align-items: center; justify-content: space-between; }
.picker-head .wiz-back { margin: 0; }
.picker-user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--dim); }
.picker-user strong { color: var(--ink); }
.picker-user .btn-ghost { margin-left: auto; }
.picker-label { font-size: 13px; font-weight: 800; margin: 4px 0 0; }
.g-row { border: none; background: none; padding: 10px 6px; border-radius: 12px; min-height: 56px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.g-row:hover { background: var(--panel-hover); }
.g-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; min-width: 0; }
.g-action {
  margin-left: auto; color: var(--dim); display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.g-row:hover .g-action { color: var(--accent); }

.wiz-wrap { display: flex; justify-content: center; padding: 34px 0 24px; }
.wiz-card { width: min(760px, 100%); padding: 26px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.wiz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wiz-head h1 { font-size: 20px; margin: 0 0 4px; }
.wiz-head .wiz-back { margin: 0; white-space: nowrap; }
.wiz-card h2 { display: flex; align-items: center; gap: 9px; font-size: 16.5px; margin: 6px 0 0; }
.wiz-progress { display: flex; justify-content: space-between; color: var(--dim); font-size: 12.5px; font-weight: 600; }

/* ── Subscord-style landing: full-bleed sections ──────────────────────────── */
body.home .landing { width: 100%; gap: 0; padding-bottom: 0; }
.section { padding: 72px 22px; }
.section.alt { background: var(--well); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.wrap { width: min(1080px, 100%); margin: 0 auto; }
.section-title { text-align: center; font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 10px; letter-spacing: -0.02em; }
.section-sub { text-align: center; color: var(--dim); font-size: 15px; max-width: 560px; margin: 0 auto 34px; line-height: 1.6; }

.hero.bleed { border: none; border-radius: 0; min-height: 560px; padding: 80px 22px 64px; }
.hero.bleed .hero-inner { max-width: 780px; }
.hero.bleed h1 { font-size: clamp(34px, 6vw, 60px); }
.hero.bleed .hero-sub { font-size: 16.5px; max-width: 540px; }

.hero-mock {
  width: min(920px, 100%); margin: 40px auto 0; border: 1px solid var(--edge); border-radius: 14px;
  background: var(--well); box-shadow: 0 30px 80px rgba(0,0,0,0.6); overflow: hidden; text-align: left;
}
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--edge); }
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--edge); }
.mock-url { margin-left: 10px; color: var(--dim); font-size: 11.5px; background: var(--panel); border-radius: 6px; padding: 4px 10px; }
.mock-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.mock-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .mock-stats { grid-template-columns: repeat(2, 1fr); } }
.mock-stat { border: 1px solid var(--edge); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.mock-stat .k { color: var(--dim); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mock-stat .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mock-chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; border: 1px solid var(--edge); border-radius: 10px; padding: 12px; }
.mock-chart i { flex: 1; background: var(--accent); opacity: 0.85; border-radius: 2px 2px 0 0; display: block; }

.pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pain { padding: 22px; text-align: left; }
.pain h3 { display: flex; align-items: center; gap: 9px; font-size: 15.5px; margin: 0 0 8px; }
.pain h3 svg { color: #f87171; }
.pain p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.6; }

.footer-cta { text-align: center; padding: 84px 22px; }
.footer-cta h2 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 12px; letter-spacing: -0.02em; }
.card-head > .btn-secondary { flex: none; width: auto; align-self: flex-start; }
.hero-ctas .btn-pill, .hero-ctas .btn-secondary { width: auto; flex: none; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions .btn-ghost { font-size: 12px; padding: 6px 10px; min-height: 34px; }
.act-revoke { color: #f87171; }
.add-member { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--edge); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.add-member[hidden] { display: none; }

/* ── XOE-style landing ────────────────────────────────────────────────────── */
body.home { background: var(--bg); }
.xoe-nav { position: relative; }
.top-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
@media (max-width: 760px) { .top-center { display: none; } }

/* Flat black, no halos: the reference pages get their depth from hairlines
   and type contrast alone. */
.glow { display: none; }

.btn-fill {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14.5px;
  padding: 12px 22px; border-radius: 8px; min-height: 44px; border: none; cursor: pointer;
}
.btn-fill:hover { filter: brightness(1.08); }
.btn-fill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Real bottom padding: the section clips (overflow hidden), so any bleed —
   the frame once sat at margin-bottom -2px against 0 padding — cuts the
   video's last rows, the frame's border and its rounded corners. */
.xhero { position: relative; overflow: hidden; padding: 96px 22px 36px; text-align: center; }
.xhero .hero-inner { position: relative; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.xhero h1 { font-size: clamp(34px, 5.6vw, 58px); line-height: 1.08; margin: 0; letter-spacing: -0.025em; color: color-mix(in srgb, var(--ink) 95%, transparent); }
.xhero .hero-sub { color: color-mix(in srgb, var(--ink) 60%, transparent); font-size: 16.5px; max-width: 560px; margin: 0; line-height: 1.6; }
.hero-shot { width: min(1060px, calc(100% - 8px)); margin: 52px auto 0; position: relative; }

.shot-frame {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden;
  background: #0b0b0c; box-shadow: 0 40px 120px rgba(0,0,0,0.65);
  position: relative;
}
.shot-frame img { display: block; width: 100%; height: auto; }

.xsection { padding: 96px 22px; position: relative; }
.wrap.narrow { max-width: 760px; }
.frow { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.frow.flip { grid-template-columns: 1.15fr 1fr; }
.frow.flip .frow-copy { order: 2; }
.frow.flip .frow-visual { order: 1; display: flex; justify-content: center; }
/* On phones the date columns are dropped to keep rows narrow, which used to
   drop the time entirely. It now folds under the product name instead
   (revealed in the 640px block below). */
.row-when { display: none; }

@media (max-width: 860px) {
  .frow, .frow.flip { grid-template-columns: 1fr; gap: 26px; }
  .frow.flip .frow-copy { order: 1; }
  .frow.flip .frow-visual { order: 2; }
  .xsection { padding: 64px 22px; }
}
.frow-copy h2 { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.02em; color: color-mix(in srgb, var(--ink) 95%, transparent); }
.frow-copy p { color: color-mix(in srgb, var(--ink) 60%, transparent); font-size: 14.5px; line-height: 1.65; margin: 0 0 16px; }
.frow-copy .tick-list { margin-bottom: 22px; }
.frow-visual { position: relative; }

.xcta { position: relative; overflow: hidden; text-align: center; padding: 120px 22px; border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.xcta h2 { position: relative; font-size: clamp(28px, 4.4vw, 44px); margin: 0 0 22px; letter-spacing: -0.025em; line-height: 1.1; }
.xcta .hero-ctas { position: relative; }

/* settings/share fixes + polish pass */
.share-row { display: flex; gap: 8px; width: 100%; max-width: 560px; align-items: stretch; }
.share-link { flex: 1 1 220px; min-width: 220px; display: flex; align-items: center; }
.settings-grid .wiz-panel { min-height: 0; }

/* nav: sticky glass */
body.home .top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}

/* hero polish: gradient keyword + primary button glow */
.hl-grad {
  background: linear-gradient(180deg, var(--ink) 30%, var(--dim));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* cards: quieter surfaces, hover lift */
body.home .panel { background: color-mix(in srgb, var(--ink) 3%, transparent); border-color: color-mix(in srgb, var(--ink) 8%, transparent); }
.feature, .step, .pain { transition: transform 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms; }
.feature:hover, .step:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .feature, .step, .pain { transition: none; } .feature:hover, .step:hover { transform: none; } }

/* steps: connector line */
.steps-grid { position: relative; }
.steps-grid .step { position: relative; }

/* faq: chevron + hover */
.faq-item { transition: border-color 160ms; }
.faq-item:hover { border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.faq-item summary::after { transition: transform 180ms; }
.faq-item[open] summary::after { content: '+'; transform: rotate(45deg); }

/* wizard + picker polish */
.picker-card, .wiz-card { background: color-mix(in srgb, var(--ink) 3%, transparent); border-color: color-mix(in srgb, var(--ink) 9%, transparent); }
.picker-welcome { text-align: center; display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.picker-welcome h1 { font-size: 21px; margin: 0; letter-spacing: -0.01em; }
.picker-welcome p { margin: 0; color: var(--dim); font-size: 13.5px; }
.shot-frame img { aspect-ratio: auto; }

/* ── Subscord-composition landing: left hero, inset band, calculator, pricing ─ */
/* Decorative glow orbs are wider than small screens; clip (not hidden — that
   would turn body into a scroll container and break the sticky nav). */
body.home { overflow-x: clip; }
body.home .landing { overflow-x: clip; }
.hero-left { text-align: left; }
.hero-left .hero-inner { max-width: 1060px; align-items: flex-start; }
.hero-left h1 { max-width: 720px; }
.hero-left .hero-sub { max-width: 600px; }
.hero-trust { color: color-mix(in srgb, var(--ink) 45%, transparent); font-size: 13px; margin: 0; }
.section-sub { color: color-mix(in srgb, var(--ink) 58%, transparent); font-size: 15px; line-height: 1.65; margin: 0 auto; max-width: 620px; }
.wrap.center { text-align: center; }
.hero-ctas.center { justify-content: center; }

/* dark inset band (Subscord's "tired of platforms" section) */
.xinset {
  position: relative; padding: 96px 22px;
  background: color-mix(in srgb, var(--ink) 2%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.xinset .section-title { margin-bottom: 12px; }
@media (max-width: 860px) { .xinset { padding: 64px 22px; } }

/* savings calculator */
.calc { margin-top: 40px; padding: 26px; }
.calc-head { text-align: center; margin-bottom: 22px; }
.calc-head h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -0.01em; }
.calc-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 34px; align-items: start; }
@media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; gap: 26px; } }
.calc-inputs { display: flex; flex-direction: column; gap: 20px; }
.calc-field { display: flex; flex-direction: column; gap: 10px; }
.calc-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.calc-label output { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.calc input[type='range'] { width: 100%; accent-color: var(--accent); min-height: 28px; }
.calc-result {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding: 18px; display: flex; flex-direction: column; gap: 3px; text-align: center;
}
.calc-result-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.calc-result-num { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.calc-result-sub { font-size: 12px; color: color-mix(in srgb, var(--ink) 45%, transparent); }
.calc-bars { display: flex; flex-direction: column; gap: 14px; }
.calc-bars-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.calc-bar-row { display: flex; flex-direction: column; gap: 5px; }
.calc-bar-meta { display: flex; justify-content: space-between; font-size: 13.5px; }
.calc-bar-name { font-weight: 700; color: color-mix(in srgb, var(--ink) 85%, transparent); }
.calc-bar-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 85%, transparent); }
.calc-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.calc-bar span { display: block; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--ink) 28%, transparent); transition: width 260ms cubic-bezier(0.2, 0, 0, 1); }
.calc-bar.mine span { background: var(--accent); }
.calc-bar-sub { font-size: 11.5px; color: color-mix(in srgb, var(--ink) 40%, transparent); }
.calc-note { font-size: 11.5px; color: color-mix(in srgb, var(--ink) 35%, transparent); line-height: 1.5; margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) { .calc-bar span { transition: none; } }

/* fee trio */
.trio-title { text-align: center; font-size: 20px; letter-spacing: -0.01em; margin: 56px 0 26px; }
.trio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 940px; margin: 0 auto; }
@media (max-width: 760px) { .trio-grid { grid-template-columns: 1fr; } }
.trio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 10px; }
.trio-ic {
  width: 50px; height: 50px; border-radius: 8px; display: grid; place-items: center; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--edge));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.trio strong { font-size: 15px; }
.trio p { margin: 0; font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--ink) 55%, transparent); max-width: 280px; }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; align-items: stretch; }
@media (max-width: 1020px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px; }
.price-card.popular { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.price-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 5px; letter-spacing: 0.03em;
}
.price-name { font-weight: 700; font-size: 15px; color: color-mix(in srgb, var(--ink) 85%, transparent); }
.price-amt { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-bill { display: block; margin: -6px 0 2px; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.price-per { font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--ink) 45%, transparent); letter-spacing: 0; }
.price-list { list-style: none; margin: 12px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.price-list li { position: relative; padding-left: 22px; font-size: 13px; color: color-mix(in srgb, var(--ink) 65%, transparent); }
.price-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.price-list li:first-child { color: color-mix(in srgb, var(--ink) 92%, transparent); font-weight: 700; }
.price-cta { justify-content: center; text-align: center; width: 100%; }
a.price-cta.btn-secondary { display: inline-flex; align-items: center; text-decoration: none; }
.price-note { text-align: center; color: color-mix(in srgb, var(--ink) 45%, transparent); font-size: 13px; margin: 26px auto 0; max-width: 560px; }

/* ── dashboard: Dues plan card + limit banner + toast ─────────────────────── */
.usage-row { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 14px; }
.usage-nums { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.usage-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; max-width: 420px; }
.usage-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.usage-bar.over span { background: #f59e0b; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tier-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px;
  border: 1px solid var(--edge); border-radius: 12px; align-items: flex-start;
}
.tier-card.current { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tier-name { font-weight: 700; font-size: 13.5px; }
.tier-price { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tier-per { font-size: 12px; font-weight: 600; color: var(--dim); }
.tier-cap { font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.tier-card .btn-pill, .tier-card .btn-secondary { width: 100%; justify-content: center; font-size: 12.5px; min-height: 38px; padding: 8px 12px; margin-top: auto; }
.limit-banner {
  border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); border-radius: 12px;
  background: color-mix(in srgb, #f59e0b 8%, transparent);
  padding: 13px 16px; font-size: 13.5px; margin-bottom: 16px;
}
.limit-banner a { color: var(--accent); font-weight: 700; }
.toast-ok {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: #0f1a14; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--ink); font-size: 13.5px; font-weight: 600;
  padding: 12px 18px; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* ── motion pass (emilkowalski/skills: animate + find-animation-opportunities) ─
   Feedback: press scale on every pressable. State indication: FAQ open fade,
   usage/calc bars. Preventing jarring change: scroll reveals on the marketing
   page only, toast entrance. All transform/opacity, all under budget, hover
   motion gated to fine pointers, reduced-motion keeps opacity drops movement. */
.btn-fill, .btn-pill, .btn-secondary, .btn-ghost, .apptab, .g-row, .role-row {
  transition-property: transform, background-color, border-color, color, opacity, filter;
  transition-duration: 140ms;
  transition-timing-function: var(--ease-out);
}
.btn-fill:active, .btn-pill:active, .btn-secondary:active, .btn-ghost:active { transform: scale(0.97); }
.g-row:active, .role-row:active:not(:disabled), .tier-buy:active { transform: scale(0.985); }

@media (hover: hover) and (pointer: fine) {
  .price-card { transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out); }
  .price-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
  .price-card.popular:hover { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
}

/* FAQ answer fades in as the details element opens (display toggle → @starting-style). */
.faq-item > p { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style {
  .faq-item[open] > p { opacity: 0; transform: translateY(-4px); }
}

/* Toast enters from where it lives (bottom), never teleports. */
.toast-ok { transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
@starting-style {
  .toast-ok { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

/* Usage meter fills rather than snapping. */
.usage-bar span { transition: width 300ms var(--ease-out); }

/* Scroll reveal (marketing page only; occasional-frequency, explanation tier).
   JS adds .rv on load-eligible blocks and .rv-in when they enter the viewport;
   grids get a 40–70ms stagger via --rv-d. Without JS nothing is ever hidden. */
.rv { opacity: 0; transform: translateY(14px); }
.rv-in { opacity: 1; transform: none; transition: opacity 480ms var(--ease-out) var(--rv-d, 0ms), transform 480ms var(--ease-out) var(--rv-d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .rv { transform: none; }
  .rv-in { transition: opacity 240ms ease; }
  .btn-fill:active, .btn-pill:active, .btn-secondary:active, .btn-ghost:active,
  .g-row:active, .role-row:active:not(:disabled), .tier-buy:active { transform: none; }
  .price-card:hover { transform: none; }
  .faq-item > p, .toast-ok { transition: opacity 200ms ease; }
}
@media print { .rv { opacity: 1; transform: none; } }

/* ── app shell: left sidebar (Subscord composition) ─────────────────────────── */
.appshell { display: grid; grid-template-columns: 216px minmax(0, 1fr); flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; align-items: stretch; }
.sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; border-right: 1px solid var(--edge); min-height: calc(100vh - 60px); }
.side-store { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.side-logo img { display: block; border-radius: 5px; }
.side-store-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-switch { max-width: 150px; font-size: 12.5px; min-height: 34px; padding: 6px 8px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-item { display: flex; align-items: center; gap: 10px; color: var(--dim); text-decoration: none; font-size: 13.5px; font-weight: 500; padding: 8px 10px; border-radius: 6px; min-height: 36px; }
.side-item:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.side-item.active { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); font-weight: 600; }
.side-item svg { flex: none; opacity: 0.75; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--edge); padding-top: 10px; }
.app-body { padding: 20px 22px 44px; min-width: 0; font-size: 14px; }
.sec-title { font-size: 18px; letter-spacing: -0.01em; margin: 0 0 14px; }
.ov-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ov-toolbar .sec-title { margin: 0; }
@media (max-width: 860px) {
  .appshell { grid-template-columns: 1fr; }
  .sidebar { position: static; flex-direction: row; align-items: center; min-height: 0; border-right: none; border-bottom: 1px solid var(--edge); overflow-x: auto; gap: 6px; padding: 8px 12px; }
  .side-nav, .side-foot { flex-direction: row; margin: 0; border: none; padding: 0; }
  .side-item { padding: 8px; white-space: nowrap; }
  .side-item svg { display: none; }
  /* fade the right edge while more tabs hide off-screen — a mid-word chop
     reads as broken, the fade reads as "scroll for more" */
  .sidebar.scroll-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }
  .side-store-name { display: none; }
}

/* ── phone (≤640px): the dashboard as a one-hand tool ──────────────────────── */
@media (max-width: 640px) {
  .app-body { padding: 16px 12px 40px; }
  /* toolbar stacks; the range picker scrolls sideways instead of clipping */
  .ov-toolbar { flex-direction: column; align-items: stretch; }
  .seg { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-btn { flex: 1 0 auto; }
  /* card headers stay one row: the title block shrinks and wraps while the
     action holds the top-right corner, like on desktop */
  .card-head { align-items: flex-start; gap: 10px; }
  .card-head > div { min-width: 0; }
  .card-head .btn-pill, .card-head .btn-secondary { white-space: nowrap; flex: none; }
  /* Column priority: keep what an owner acts on; the table still scrolls
     sideways for the full record. Payments: drop Date + raw Discord id.
     Products: drop Billing/Members/Revenue. Discounts: drop Scope/Expires.
     Members: drop Products + raw id. */
  .t-pay th:nth-child(5), .t-pay td:nth-child(5),
  .t-pay th:nth-child(6), .t-pay td:nth-child(6) { display: none; }
  .t-pay td:first-child .dim { display: none; }
  .row-when { display: block; font-size: 11.5px; color: var(--dim); margin-top: 2px; }
  .t-products th:nth-child(3), .t-products td:nth-child(3),
  .t-products th:nth-child(4), .t-products td:nth-child(4),
  .t-products th:nth-child(5), .t-products td:nth-child(5) { display: none; }
  .t-disc th:nth-child(3), .t-disc td:nth-child(3),
  .t-disc th:nth-child(5), .t-disc td:nth-child(5) { display: none; }
  .t-members th:nth-child(2), .t-members td:nth-child(2) { display: none; }
  .t-members td:first-child .dim { display: none; }
  .row-actions { white-space: nowrap; }
  .data-table th, .data-table td { padding: 10px 8px; }
  .data-table .btn-ghost { padding: 8px 10px; } /* real touch targets */
  .stat-value { font-size: 22px; }
  /* stats read as a tidy 2×2, not a ragged auto-fit */
  .stat-grid, .stat-grid.five { grid-template-columns: 1fr 1fr; }
  /* revenue header: total + legend become one row under the title */
  .chart-side { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; gap: 10px; }
  /* recent sales: long usernames truncate, the amount never clips */
  .sales-list li { min-width: 0; }
  .sale-meta { flex: 1 1 auto; }
  .sale-meta strong, .sale-meta .dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sale-amt { flex: none; }
}

/* overview extras */
.delta { font-size: 11px; font-weight: 700; margin-left: 8px; padding: 2px 6px; border-radius: 4px; vertical-align: 3px; }
.delta.up { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.delta.down { color: #f87171; background: rgba(248, 113, 113, 0.1); }
.top-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.top-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 4px; }
.top-bar { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 6%, transparent); overflow: hidden; }
.top-bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* setup checklist */
.checklist { margin-bottom: 16px; }
.check-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.check-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--edge); border-radius: 6px; }
.check-list li.ok { color: var(--dim); }
.check-dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--edge); display: grid; place-items: center; flex: none; color: var(--accent); }
.check-list li.ok .check-dot { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.check-list .btn-ghost { margin-left: auto; flex: none; }

/* products table */
.prod-cell { display: flex; align-items: center; gap: 10px; }
.prod-thumb { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; flex: none; background: var(--panel-hover); display: inline-block; }
.prod-roles { font-size: 12px; display: block; }

/* rectangular toggle (no pills) */
.switch { position: relative; display: inline-block; width: 34px; height: 20px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--edge); border-radius: 4px; transition: background 140ms var(--ease-out); cursor: pointer; }
.switch span::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #8a8a85; border-radius: 3px; transition: transform 140ms var(--ease-out), background 140ms var(--ease-out); }
.switch input:checked + span { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.switch input:checked + span::after { transform: translateX(14px); background: var(--accent); }
.switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* custom link editor */
.slug-row { display: flex; align-items: stretch; }
.slug-prefix { font-size: 13px; color: var(--dim); border: 1px solid var(--edge); border-right: none; border-radius: 6px 0 0 6px; padding: 10px 8px; white-space: nowrap; background: var(--panel); display: flex; align-items: center; }
.slug-row input { border-radius: 0 6px 6px 0; flex: 1; min-width: 80px; }

/* ── visual hard rules: tight radii, hairlines, no pills ────────────────────── */
.panel, .picker-card, .wiz-card, .shot-frame, .price-card, .calc, .tier-card, .add-member, .limit-banner, .faq-item { border-radius: 8px; }
.btn-pill, .btn-fill, .btn-secondary, .btn-blurple, .btn-login, .btn-ghost, .pay-btn,
.field input, .field select, .store-switch, .search-box, .option, .method, .g-row, .role-row { border-radius: 8px; }

/* ── Confirm Order checkout card (Subscord composition) ─────────────────────── */
.checkout { padding-top: 40px; }
.order-card { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.order-title { font-size: 20px; letter-spacing: -0.01em; margin: 0; }
.order-sub { color: var(--dim); font-size: 13.5px; margin: -8px 0 0; }
.order-product {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--edge); border-radius: 8px; padding: 14px; background: rgba(255,255,255,0.02);
}
.op-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.op-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--panel-hover); flex: none; }
.op-name { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.op-price { font-family: var(--font-head); font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; }
.op-server { display: flex; align-items: center; gap: 9px; padding-left: 14px; border-left: 1px solid var(--edge); }
.op-server-icon { width: 34px; height: 34px; border-radius: 50%; border: none; margin: 0; }
.op-server-meta { display: flex; flex-direction: column; line-height: 1.25; }
.op-server-meta strong { font-size: 13.5px; }
.op-server-kind { color: var(--dim); font-size: 12px; }
@media (max-width: 560px) { .op-server { border-left: none; padding-left: 0; } }
.order-roles {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--edge); border-radius: 8px; padding: 11px 14px; font-size: 13px; color: var(--dim);
}
.order-roles .chip { background: rgba(88, 101, 242, 0.1); }
.order-card .tagline { margin: 0; font-size: 13.5px; }
.order-card .label { font-size: 13.5px; font-weight: 700; margin: 4px 0 0; }
.order-card .methods { grid-template-columns: repeat(auto-fill, 120px); }
.order-card .method { flex-direction: column; gap: 8px; justify-content: center; min-height: 84px; font-size: 13.5px; font-weight: 600; }
/* one payment method (the usual case): the tile owns the whole row — a
   card glyph with the label beneath it, centered */
.order-card .methods:has(.method:only-child) { grid-template-columns: 1fr; }
.order-card .method:only-child {
  grid-column: 1 / -1;
  min-height: 96px;
  font-size: 15px;
}
.order-card .method:only-child svg { width: 30px; height: 30px; }
.order-card .pay-panel { border: none; padding: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.order-card #pay-title { font-size: 16px; margin: 0; }
.order-card .pay-sub { margin: 0; font-size: 13px; color: var(--dim); }
.order-extra { border: 1px solid var(--edge); border-radius: 8px; padding: 0; }
.order-extra summary {
  cursor: pointer; padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--dim); list-style: none;
}
.order-extra summary::-webkit-details-marker { display: none; }
.order-extra summary::after { content: '+'; float: right; font-weight: 700; }
.order-extra[open] summary::after { content: '–'; }
.order-extra summary:hover { color: var(--ink); }
.order-extra-body { padding: 0 14px 12px; }
.discount-row { display: flex; gap: 8px; }
.discount-row input { flex: 1 1 auto; min-width: 0; }
.apply-btn {
  flex: none; background: transparent; border: 1px solid var(--edge); border-radius: 6px;
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 10px 18px; min-height: 44px; cursor: pointer;
}
.apply-btn:hover { border-color: var(--dim); }
.apply-btn:disabled { opacity: 0.6; cursor: default; }
.discount-msg { margin: 8px 0 0; font-size: 13px; min-height: 0; }
.discount-msg:empty { display: none; }
.discount-msg.ok { color: var(--accent); }
.discount-msg.err { color: #f87171; }

/* ── settings: single stacked column of consistent cards ────────────────────── */
.settings-stack { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.set-card { padding: 0; overflow: hidden; }
.set-head { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 3px; }
/* product photo picker */
.photo-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.photo-prev { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--edge); background: var(--well); flex: none; }
.photo-prev[hidden] { display: none; }

.set-head h3 { margin: 0; font-size: 15px; }
.set-head .card-sub { margin: 0; }
.set-card > .field, .set-card > .share-row, .set-card > .field-err, .set-card > #billing-body { margin: 12px 20px 0; }
.set-card > .field:last-of-type { margin-bottom: 16px; }
/* width:auto, not 100% — the row carries 20px side margins inside the card
   and 100% would push the last button past the card edge. Wrapping lets the
   buttons drop under the URL on phones instead of clipping. */
.set-card > .share-row { max-width: none; width: auto; flex-wrap: wrap; }
.set-foot {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
  padding: 12px 20px; border-top: 1px solid var(--edge); background: color-mix(in srgb, var(--ink) 2%, transparent);
}
.set-foot .btn-pill, .set-foot .btn-secondary { width: auto; min-height: 38px; padding: 9px 16px; font-size: 13.5px; }
.set-card #billing-body { margin-bottom: 16px; }
.set-card .tier-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* landing rhythm: tighter hero, hairline-banded sections */
.xhero { padding-top: 84px; }
.hero-left .hero-inner { gap: 14px; }
.hero-shot { margin-top: 44px; }
/* phone: the headline starts right under the header and the copy is compact
   enough that the WHOLE tour frame — bottom edge included — fits on the
   first screen */
@media (max-width: 760px) {
  .xhero { padding-top: 12px; padding-bottom: 20px; }
  .xhero .hero-inner { padding-top: 0; padding-bottom: 0; }
  .hero-left .hero-inner { gap: 8px; }
  /* phones read centered heroes as designed, left-ragged ones as unfinished */
  .hero-left .hero-inner { align-items: center; text-align: center; }
  .xhero h1 { font-size: 28px; line-height: 1.12; }
  .xhero .hero-sub { font-size: 14px; line-height: 1.5; }
  .btn-hero { padding: 10px 22px; font-size: 14.5px; min-height: 44px; }
  /* one action stack: full-width primary, quiet link centered beneath it */
  .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; }
  .hero-ctas .link-quiet { justify-content: center; }
  .hero-trust { margin-top: 0; font-size: 11.5px; justify-content: center; text-align: center; }
  .hero-shot { margin-top: 10px; }
}
.landing > .xsection { border-top: 1px solid color-mix(in srgb, var(--ink) 5%, transparent); }
.landing > .xinset + .xsection { border-top: none; }
.section-title { margin-bottom: 8px; }

/* ── analytics: segmented range, delta chips, comparison chart ──────────────── */
.seg { display: inline-flex; border: 1px solid var(--edge); border-radius: 6px; overflow: hidden; }
.seg-btn {
  background: transparent; border: none; color: var(--dim); font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; min-height: 34px; cursor: pointer; border-right: 1px solid var(--edge);
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.seg-btn.active { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.stat { gap: 2px; }
.stat-sub { font-size: 11.5px; color: var(--dim); }
.delta { display: inline-flex; align-items: baseline; gap: 2px; }
.delta [aria-hidden] { font-size: 8px; transform: translateY(-1px); }

.chart-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chart-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--dim); font-weight: 600; }
.lg-key { display: inline-block; }
.lg-key.cur { width: 14px; height: 0; border-top: 2.5px solid var(--accent); border-radius: 2px; }
.lg-key.prev { width: 14px; height: 0; border-top: 2px dashed var(--dim); opacity: 0.85; margin-left: 8px; }

/* stat-card sparklines: the metric's shape over the current window */
.stat-spark { display: block; width: 100%; height: 30px; margin-top: 6px; overflow: visible; }
.stat-spark .spark-line { stroke: var(--accent); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
/* the gradient rides in each svg's own defs — CSS only gates visibility */
.stat-spark .spark-fill { opacity: 1; }
.stat-spark .spark-dot { fill: var(--accent); }
.stat-spark.flat .spark-line { stroke: var(--edge); }
.stat-spark.flat .spark-fill, .stat-spark.flat .spark-dot { opacity: 0; }
.chart-total .delta { margin-left: 8px; vertical-align: 3px; }

.rev-chart .tick { fill: var(--dim); font-size: 10.5px; font-family: var(--font-body); }
.rev-chart .peak { fill: var(--ink); font-size: 11px; font-weight: 700; font-family: var(--font-body); }
.chart-card { position: relative; }
.rev-chart { touch-action: none; }
.chart-tip {
  position: absolute; z-index: 30; pointer-events: none;
  background: var(--panel-hover); border: 1px solid var(--edge); border-radius: 6px;
  padding: 8px 11px; font-size: 12.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 4px; min-width: 130px;
}
/* author display beats the hidden attribute — without this the EMPTY tooltip
   renders as a stray box under the chart until the first hover */
.chart-tip[hidden] { display: none; }
.chart-tip-title { color: var(--dim); font-size: 11px; font-weight: 700; }
.chart-tip-row { display: flex; align-items: center; gap: 7px; }
.chart-tip-row strong { font-variant-numeric: tabular-nums; }
.tip-lbl { color: var(--dim); font-size: 11.5px; }
.tip-key { display: inline-block; flex: none; }
.tip-key.cur { width: 12px; height: 0; border-top: 2.5px solid var(--accent); border-radius: 2px; }
.tip-key.prev { width: 12px; height: 0; border-top: 2px dashed var(--dim); }
.tip-delta { font-size: 11px; font-weight: 700; border-top: 1px solid var(--edge); padding-top: 5px; margin-top: 1px; }
.tip-delta.up { color: var(--accent); }
.tip-delta.down { color: #f87171; }
.top-meta .delta { font-size: 11px; margin-left: 4px; }

/* ── mobile header: one row + hamburger menu (home) ─────────────────────────── */
.menu-btn {
  display: none; background: transparent; border: 1px solid var(--edge); border-radius: 6px;
  color: var(--ink); min-width: 40px; min-height: 40px; align-items: center; justify-content: center; cursor: pointer;
}
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-menu {
  display: none; flex-direction: column; padding: 6px 14px 14px;
  background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--edge);
  /* Fixed, not sticky: opening the menu locks page scroll, which strands a
     sticky sheet at its document position — far above the viewport once the
     visitor has scrolled. --nav-h is measured by home.js on open. */
  position: fixed; top: var(--nav-h, 60px); left: 0; right: 0; z-index: 39;
  max-height: calc(100dvh - var(--nav-h, 60px)); overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu a {
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600;
  padding: 12px 4px; min-height: 44px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.accent { color: var(--accent); }
.mobile-menu .dim { font-weight: 500; font-size: 13px; }
.mobile-menu-account { display: flex; flex-direction: column; border-top: 1px solid var(--edge); margin-top: 4px; padding-top: 4px; }
@media (max-width: 760px) {
  .top { padding: 10px 16px; }
  body.home .top { flex-wrap: nowrap; gap: 10px; }
  body.home .top .account { display: none; }
  .menu-btn { display: inline-flex; }
  .mobile-menu:not([hidden]) { display: flex; }
  /* other pages: keep the header to one tidy row */
  .top { flex-wrap: nowrap; gap: 10px; }
  .account { flex-wrap: nowrap; gap: 8px; overflow: hidden; }
  .account > span { display: none; }
}

/* hero media fills the frame like the screenshot did */
.hero-video { display: block; width: 100%; height: auto; background: #0b0b0c; }

/* ── Subscord-weight typography (marketing page) ────────────────────────────── */
body.home .xhero h1 { font-weight: 860; letter-spacing: -0.035em; line-height: 1.04; }
body.home .section-title, body.home .frow-copy h2, body.home .xcta h2 { font-weight: 800; letter-spacing: -0.028em; }
body.home .trio-title, body.home .calc-head h3 { font-weight: 750; }
body.home .btn-fill, body.home .btn-secondary { font-weight: 700; }
.order-title, .op-price, .price-amt, .calc-result-num, .stat-value, .chart-total { font-weight: 800; }

/* mobile hero: full-width stacked CTAs like the reference */
@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn-fill, .hero-ctas .btn-secondary { width: 100%; justify-content: center; text-align: center; }
}

/* ── Subscord-parity landing additions ──────────────────────────────────────── */
.btn-hero { padding: 15px 30px; font-size: 16px; min-height: 52px; }
.link-quiet { color: var(--dim); text-decoration: none; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 12px 6px; }
.link-quiet:hover { color: var(--ink); }

/* payment methods band */
.pm-card { margin-top: 34px; padding: 30px 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* slim payment-methods strip inside the pricing section */
.pm-strip { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.pm-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* real card-brand badges, drawn as the networks draw them */
.pm-tile {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 82px; height: 44px; padding: 0 16px;
  border-radius: 6px; background: #fff; border: 1px solid rgba(255,255,255,0.16);
  user-select: none;
}
.pm-tile svg { display: block; flex: none; }
.pm-visa { color: #1434cb; font-style: italic; font-weight: 850; font-size: 18px; letter-spacing: 0.05em; }
.pm-amex { background: #006fcf; border-color: #006fcf; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.06em; }
.pm-apple { color: #111; font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; }
.pm-gpay { color: #3c4043; font-weight: 600; font-size: 16.5px; gap: 5px; }
.pm-link { background: #00d66f; border-color: #00d66f; color: #011e0f; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.pm-note { color: color-mix(in srgb, var(--ink) 50%, transparent); font-size: 13px; margin: 0; text-align: center; }

/* use-case band */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
@media (max-width: 900px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .uc-grid { grid-template-columns: 1fr; } }
.uc { padding: 20px; display: flex; flex-direction: column; gap: 7px; }
.uc strong { font-size: 15px; font-weight: 750; }
.uc p { margin: 0; font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* billing interval toggle (+ the "2 months free" tag) */
.bill-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 30px 0 6px; }
.bill-toggle .seg-btn { border: 1px solid var(--edge); border-radius: 6px; min-width: 84px; }
.bill-toggle .seg-btn.active { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.bt-free { font-size: 12px; font-weight: 700; color: var(--accent); line-height: 1.25; }
.bt-free span { color: var(--dim); font-weight: 500; }
#billing-body .bill-toggle { justify-content: flex-start; margin: 4px 0 12px; }

.footer-disclaimer { flex-basis: 100%; color: color-mix(in srgb, var(--ink) 35%, transparent); font-size: 12px; margin: 14px 0 0; }

/* ── hero: browser-chrome frame around the video (reference look) ───────────── */
.browser-frame { border-color: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.1)); position: relative; }
.bf-bar {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  background: #151516; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.bf-dots { display: inline-flex; gap: 6px; }
.bf-dots i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.bf-dots i:nth-child(1) { background: #f5655b; }
.bf-dots i:nth-child(2) { background: #f6bd3b; }
.bf-dots i:nth-child(3) { background: #43c645; }
.bf-url {
  flex: 1; max-width: 380px; margin: 0 auto; text-align: center;
  background: rgba(255,255,255,0.06); border-radius: 6px; padding: 4px 14px;
  font-size: 11.5px; color: rgba(255,255,255,0.55); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bf-live { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); flex: none; }
@media (max-width: 560px) { .bf-url { display: none; } .bf-live { margin-left: auto; } }

/* ── hero fixes: Safari-collapse-proof media box + centered column ──────────── */
/* Safari renders <video> with no reserved ratio until metadata arrives — the
   frame collapsed to a sliver. A hard CSS aspect-ratio makes the box stable
   before a single byte loads, for the animated image and the upgraded video
   alike (the JS swap keeps the same class, so the box never moves). */
.browser-frame .hero-video { aspect-ratio: 1920 / 1080; width: 100%; height: auto; object-fit: cover; display: block; }
.bf-bar { position: relative; z-index: 2; }

/* Subscord composition: one centered content column, text left-aligned
   inside it — no dead void on the right at wide widths. */
.hero-left .hero-inner { max-width: 900px; margin: 0 auto; }
.hero-left h1 { max-width: 860px; }
.hero-left .hero-sub { max-width: 640px; }
.hero-shot { width: min(900px, calc(100% - 8px)); }
/* desktop-only: an unconditional rule here would silently override the
   phone padding set in the ≤760px block above (file order wins) */
@media (min-width: 761px) {
  .xhero { padding-top: 72px; }
}

/* pre-aspect-ratio Safari: never let the media box collapse */
@supports not (aspect-ratio: 1 / 1) {
  .browser-frame .hero-video { min-height: 340px; }
}
.browser-frame { display: flex; flex-direction: column; }
.browser-frame .hero-video { flex: none; }

/* ── SEO pages: /vs, /tools, /use-cases ─────────────────────────────────────── */
.seo-hero { padding-top: 64px; padding-bottom: 8px; text-align: center; }
.seo-hero .hero-inner { max-width: 760px; gap: 14px; }
.seo-hero h1 { font-size: clamp(30px, 4.6vw, 44px); }
.seo-hero .hero-sub { max-width: 640px; margin: 0 auto; }
@media (max-width: 760px) { .seo-hero { padding-top: 30px; } .seo-hero h1 { font-size: 28px; } }
.section-title.center { text-align: center; display: block; }
.seo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
.seo-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; text-align: left; text-decoration: none; color: var(--ink); }
.seo-card:hover { border-color: var(--dim); }
.seo-card p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.seo-card-cta { color: var(--accent); font-size: 13px; font-weight: 700; margin-top: auto; padding-top: 6px; }
.cmp-card { padding: 20px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.cmp-table th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--edge); font-size: 13px; }
.cmp-table th:nth-child(2) { color: var(--accent); }
.cmp-table td { padding: 12px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 5%, transparent); vertical-align: top; }
.cmp-table td:first-child { color: var(--dim); font-size: 13px; }
.cmp-good { font-weight: 600; }
.seo-ticks { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.seo-ticks a { color: var(--accent); }
.seo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .seo-steps { grid-template-columns: 1fr; } }
.seo-steps li { padding: 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.seo-steps p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.6; }
.seo-step-num {
  width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.seo-page .account .btn-fill { padding: 9px 16px; font-size: 13.5px; }
.seo-page .faq { margin-top: 16px; }

/* ── hero, top-shelf pass ─────────────────────────────────────────────────────
   Butterick: balanced headline wraps, no orphaned sub lines. Kowalski:
   transform/opacity only, ease-out, entrance is a one-time (rare) moment,
   buttons answer the press. Flat rules intact: no new glows, no pills. */
.xhero h1 { text-wrap: balance; }
.xhero .hero-sub { text-wrap: pretty; }

.btn-hero { transition: transform 130ms ease-out, filter 130ms ease-out; }
.btn-hero:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-hero:active { transform: scale(0.98); }
.btn-hero span { display: inline-block; transition: transform 150ms ease-out; }
.btn-hero:hover span { transform: translateX(3px); }

.bf-url { display: inline-flex; align-items: center; gap: 5px; }
.bf-url svg { opacity: 0.65; flex: none; }

/* the tour frame reads as a lifted object, lit by the app inside it */
.hero-shot.browser-frame {
  box-shadow:
    0 30px 90px -30px color-mix(in srgb, var(--accent) 24%, transparent),
    0 18px 60px -18px rgba(0, 0, 0, 0.75);
}

/* one-time staged entrance; first paint only, compositor-only properties */
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.home .xhero h1, body.home .xhero .hero-sub, body.home .hero-ctas,
body.home .hero-trust, body.home .hero-shot {
  animation: hero-rise 560ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
body.home .xhero .hero-sub { animation-delay: 70ms; }
body.home .hero-ctas { animation-delay: 130ms; }
body.home .hero-trust { animation-delay: 180ms; }
body.home .hero-shot { animation-delay: 230ms; }
@media (prefers-reduced-motion: reduce) {
  body.home .xhero h1, body.home .xhero .hero-sub, body.home .hero-ctas,
  body.home .hero-trust, body.home .hero-shot { animation: none; }
  .btn-hero, .btn-hero span { transition: none; }
}

/* ── design v2 — patterns from 21st.dev (hero 1831, Vercel-style buttons)
   applied to the shared primitives. Same skeleton, same green-on-black;
   crisper borders, buttons that answer the press, one consistent focus
   ring, quieter separators. ─────────────────────────────────────────────── */

/* cards: hairline border + a whisper of top light, so panels read as
   surfaces instead of outlines */
.panel, .set-card, .price-card, .tier-card, .calc, .faq-item, .add-member {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.trio-ic, .check-dot, .stat-grid > .panel { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent); }

/* buttons: primary answers hover with light and press with scale; the
   quiet kinds step their surface, not their text alone */
.btn-fill, .btn-pill {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent);
  transition: filter 120ms ease-out, transform 100ms ease-out;
}
.btn-fill:hover, .btn-pill:hover { filter: brightness(1.07); }
.btn-fill:active, .btn-pill:active { transform: scale(0.98); }
.btn-secondary, .btn-ghost, .apply-btn, .seg-btn, .method {
  transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, transform 100ms ease-out;
}
.btn-secondary, .btn-ghost, .apply-btn { background: rgba(255, 255, 255, 0.03); }
.btn-secondary:hover, .btn-ghost:hover, .apply-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn-secondary:active, .btn-ghost:active, .apply-btn:active, .btn-danger:active { transform: scale(0.98); }

/* one focus ring everywhere */
.btn-fill:focus-visible, .btn-pill:focus-visible, .btn-secondary:focus-visible,
.btn-ghost:focus-visible, .btn-danger:focus-visible, .apply-btn:focus-visible,
.seg-btn:focus-visible, .method:focus-visible, .option:focus-visible, .pay-btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* inputs and selects: one surface, one border, one focus behavior */
input[type="text"], input[type="url"], input[type="password"], input[type="number"],
input[type="email"], select, textarea {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  transition: border-color 120ms ease-out;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink) 20%, transparent); }

/* landing rhythm: dashed separators read as crafted, not default */
.landing > .xsection { border-top: 1px dashed color-mix(in srgb, var(--ink) 9%, transparent); }
.site-footer.seo-footer { border-top: 1px dashed color-mix(in srgb, var(--ink) 9%, transparent); padding-top: 30px; }

/* hero announcement pill (21st hero pattern): tag + note + arrow */
.hero-pill {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--edge); border-radius: 8px; padding: 4px 12px 4px 4px;
  color: var(--dim); font-size: 13px; font-weight: 550; text-decoration: none;
  transition: border-color 120ms ease-out, color 120ms ease-out;
}
.hero-pill:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); color: var(--ink); }
.hero-pill-tag {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); border-radius: 6px; padding: 3px 8px;
  font-size: 11.5px; font-weight: 750; letter-spacing: 0.04em;
}
.hero-pill span[aria-hidden] { transition: transform 150ms ease-out; }
.hero-pill:hover span[aria-hidden] { transform: translateX(2px); }
@media (max-width: 760px) { .hero-pill { font-size: 12px; } }

/* interactive rows and cards lighten their edge on hover */
.g-row, .seo-card, .option, .faq-item, .tier-card { transition: border-color 120ms ease-out, background 120ms ease-out; }
.seo-card:hover, .option:hover:not(.selected) { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }

/* dashboard: the active section carries an accent bar, tables breathe */
.side-item { border-left: 2px solid transparent; transition: background 120ms ease-out, color 120ms ease-out; }
.side-item.active { border-left-color: var(--accent); background: color-mix(in srgb, var(--ink) 4%, transparent); }
@media (max-width: 860px) { .side-item { border-left: none; border-bottom: 2px solid transparent; } .side-item.active { border-bottom-color: var(--accent); } }
.data-table thead th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.data-table tbody tr { transition: background 100ms ease-out; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--ink) 2%, transparent); }
.seg-btn.active, .seg-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

/* the tour frame: crisper chrome bar and a fine outer ring */
.browser-frame { outline: 1px solid rgba(255, 255, 255, 0.05); outline-offset: 2px; }
.bf-bar { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent); }

/* ── reconstructed sections (21st.dev blueprints) ───────────────────────────── */

/* features bento — kokonutd bento-grid pattern: icon tile + status chip,
   title with inline meta, tag chips, media in the wide cells */
.bento { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1100px; margin: 0 auto; }
.bento-cell { display: flex; flex-direction: column; gap: 10px; padding: 22px; text-align: left; min-width: 0; }
.bento-wide { grid-column: span 3; }
.bento-cell:not(.bento-wide) { grid-column: span 2; }
.bento-texture {
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
}
.bento-head { display: flex; align-items: center; justify-content: space-between; }
.bento-ic {
  width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--edge));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.bento-chip {
  font-size: 11.5px; font-weight: 700; color: var(--dim);
  border: 1px solid var(--edge); border-radius: 6px; padding: 4px 9px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.bento-cell h3 { margin: 2px 0 0; font-size: 17px; letter-spacing: -0.01em; }
.bento-meta { color: var(--dim); font-size: 12.5px; font-weight: 500; margin-left: 8px; }
.bento-cell p { margin: 0; color: color-mix(in srgb, var(--ink) 55%, transparent); font-size: 13.5px; line-height: 1.6; }
.bento-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bento-tags span {
  font-size: 11.5px; font-weight: 600; color: var(--dim);
  background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 6px; padding: 4px 8px;
}
.bento-media { margin-top: 8px; overflow: hidden; }
.bento-media img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: top; }
.bento-email {
  margin-top: 8px; width: 100%; height: 190px; object-fit: cover; object-position: top;
  border-radius: 8px; border: 1px solid var(--edge);
}
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .bento-wide, .bento-cell:not(.bento-wide) { grid-column: auto; }
}

/* pricing — reference pattern: dim second headline phrase, tier one-liner,
   CTA above a divided check list, featured card in accent */
.dim-line { color: var(--dim); }
.price-desc { margin: -4px 0 2px; color: var(--dim); font-size: 13px; }
.price-divider { border-top: 1px solid var(--edge); margin: 2px 0 6px; }
.price-cta { width: 100%; text-align: center; }
.price-list li { position: relative; padding-left: 24px; }
.price-list li::before { content: '✓'; position: absolute; left: 2px; color: var(--accent); font-weight: 800; font-size: 12px; }
.price-card.popular { border-color: color-mix(in srgb, var(--accent) 45%, var(--edge)); }
.price-card.popular .price-cta {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  font-weight: 700; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent);
}
.price-card.popular .price-cta:hover { filter: brightness(1.07); }
.price-badge {
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase;
}

/* closing CTA */
.cta-panel { padding: 44px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-panel .section-sub { margin: 0; }
.cta-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
@media (max-width: 640px) { .cta-actions { flex-direction: column; width: 100%; } .cta-actions .btn-hero { width: 100%; text-align: center; } }

/* ── pricing, monochrome per the reference the owner picked: white featured
   CTA, white chip, neutral checks, switch toggle. Scoped to #pricing — the
   dashboard billing toggle keeps its own look. ─────────────────────────────── */
#pricing .bill-toggle { gap: 10px; }
#pricing .bill-toggle .seg-btn {
  border: none; background: none; min-width: 0; padding: 6px 2px;
  color: var(--dim); font-weight: 600; font-size: 13.5px;
}
#pricing .bill-toggle .seg-btn.active { background: none; color: var(--ink); }
.bill-switch {
  width: 38px; height: 21px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 16%, transparent);
  position: relative; cursor: pointer; display: inline-block; flex: none;
  transition: background 150ms ease-out;
}
.bill-switch:hover { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.bill-switch::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--solid);
  transition: transform 190ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#pricing .bill-toggle:has(.bt-y.active) .bill-switch::after { transform: translateX(17px); }
#pricing .bt-free {
  border: 1px solid var(--edge); border-radius: 999px; padding: 4px 10px;
  font-size: 10.5px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); background: color-mix(in srgb, var(--ink) 4%, transparent);
}
#pricing .price-badge {
  position: absolute; top: 18px; right: 18px; left: auto; transform: rotate(3deg);
  background: var(--solid); color: var(--solid-ink); border-radius: 999px; padding: 5px 11px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.15; max-width: 76px; text-align: center;
}
#pricing .price-card.popular { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
#pricing .price-card.popular .price-cta {
  background: var(--solid); color: var(--solid-ink); border-color: transparent; font-weight: 700;
  box-shadow: none;
}
#pricing .price-card.popular .price-cta:hover { filter: brightness(0.9); }
#pricing .price-list li::before { color: var(--dim); }
#pricing .price-card.popular .price-list li::before { color: var(--ink); }

/* ── monochrome design system (21st.dev blueprints: hero-minimalism 6999,
   dark-grid 8712, advanced-stats 19070, checkout 7053/7477, pricing 1775).
   Black page, hairline #222 cards on #111, white as the only action color,
   Space Grotesk display type, bracket kickers, flat surfaces. ─────────────── */

/* display type */
h1, h2, h3, .section-title, .order-title, .wiz-head h1 { font-family: var(--font-head); }
.xhero h1 { font-size: clamp(38px, 6vw, 66px); letter-spacing: -0.03em; line-height: 1.04; }
.section-title { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.025em; }

/* bracket kicker (dark-grid: “[ CAPABILITIES ]”) */
.kicker {
  display: block; text-align: center; color: var(--dim);
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 12px;
}
.kicker::before { content: '[ '; color: var(--faint); }
.kicker::after { content: ' ]'; color: var(--faint); }
a.kicker { text-decoration: none; }
a.kicker:hover { color: var(--ink); }

/* hero: flat black, plain kicker link above the headline (hero-minimalism) */
.hero-pill { border: none; padding: 0; border-radius: 0; gap: 7px; }
.hero-pill:hover { color: var(--ink); }
.hero-pill,
.hero-pill-tag {
  background: none; color: var(--dim); font-size: 12px; font-weight: 650;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 0; border-radius: 0;
}
.hero-pill-tag { color: var(--ink); }
.hero-pill-tag::after { content: ' /'; color: var(--faint); letter-spacing: 0; }

/* selection handles (dark-grid focus affordance): four 6px white corner
   squares painted by one overlay, reserved for the featured pricing card */
.price-card.popular { position: relative; }
.price-card.popular::after {
  content: ''; position: absolute; inset: -4px; pointer-events: none;
  background:
    linear-gradient(#fff, #fff) left top / 6px 6px no-repeat,
    linear-gradient(#fff, #fff) right top / 6px 6px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 6px 6px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 6px 6px no-repeat;
}

/* closing CTA: a dark panel in the page's own palette, lit by a border
   beam — a thin white light tracing the hairline. The one moving accent
   on the page, and it moves along the brand's own edge.
   body.home .panel would out-rank a bare class, so match its weight. */
@property --beam { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cta-panel, body.home .panel.cta-panel {
  position: relative; background: var(--well); border-color: var(--hairline-2);
  border-radius: 16px; overflow: hidden;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
}
.cta-panel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--beam),
    transparent 0deg, transparent 300deg,
    color-mix(in srgb, var(--ink) 85%, transparent) 330deg, color-mix(in srgb, var(--ink) 15%, transparent) 344deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: beam-spin 5s linear infinite;
  pointer-events: none;
}
@keyframes beam-spin { to { --beam: 360deg; } }
.cta-panel > * { position: relative; }
.cta-panel .section-title, body.home .cta-panel .section-title { color: var(--ink); }
.cta-panel .section-sub, body.home .cta-panel .section-sub { color: color-mix(in srgb, var(--ink) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .cta-panel::before { animation: none; opacity: 0.35; } }

/* account badge: quiet neutral, not a hard white ring */
.badge { border-color: var(--edge); }

/* ── checkout, restructured on the order-summary blueprint (7053): uppercase
   hairline section labels, included-roles checklist, totals block with a
   dashed rule before the total, white pay action ───────────────────────────── */
.order-chip {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  border: 1px solid var(--edge); border-radius: 999px; padding: 5px 12px;
  color: var(--dim); font-size: 11px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
}
.order-chip svg { color: var(--ink); }
.order-card .label {
  border-top: 1px solid var(--edge); padding-top: 16px; margin: 6px 0 0;
  font-size: 11px; letter-spacing: 0.12em;
}
.order-card .order-title { font-size: 22px; letter-spacing: -0.02em; }
.totals { display: flex; flex-direction: column; gap: 7px; margin: 2px 0 4px; }
.tot-row { display: flex; justify-content: space-between; gap: 12px; color: var(--dim); font-size: 13.5px; }
.tot-row[hidden] { display: none; }
.tot-row span:last-child, .tot-row strong { font-variant-numeric: tabular-nums; }
.tot-row.tot-save { color: var(--ink); }
.tot-div { border-top: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent); margin: 4px 0; }
.tot-row.tot-final { color: var(--ink); font-size: 15px; font-weight: 700; align-items: baseline; }
.tot-row.tot-final strong { font-family: var(--font-head); font-size: 21px; font-weight: 700; }
.pay-btn:hover:not(:disabled) { background: #4752c4; }
/* keep the buy action legible against the blurple fill */
.pay-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
  /* the kicker flows as centered text instead of squeezing its flex columns */
  .hero-pill { display: block; max-width: 36ch; margin: 0 auto; line-height: 1.7; }
  .hero-pill-tag, .hero-pill span[aria-hidden] { display: inline; }
}

/* hero rebuilt on the modern-landing-hero blueprint (mokshithcodez 18625,
   the same author as the pricing reference): centered two-line two-tone
   headline, short sub, white primary + outlined secondary, frame below */
.xhero { padding-top: 68px; }
/* the legacy .hero-inner carried its own 46px block padding, which stacked
   on the section padding and left dead space above the headline */
.xhero .hero-inner { padding: 0 22px; }
.xhero h1 { font-size: clamp(40px, 6.4vw, 72px); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; }
.xhero h1 .hl-dim { color: var(--dim); }
.xhero .hero-sub { max-width: 480px; font-size: 16.5px; }
.hero-ctas .btn-secondary.btn-hero {
  min-height: 52px; padding: 15px 30px; font-size: 16px; font-weight: 700;
  width: auto; justify-content: center;
}
@media (max-width: 760px) {
  .xhero { padding-top: 48px; }
  /* the frame needs a little air under the works-with row */
  .xhero .hero-shot { margin-top: 26px; }
  .hero-ctas { width: 100%; flex-direction: column; }
  .hero-ctas .btn-hero { width: 100%; text-align: center; justify-content: center; }
}

/* features rebuilt on the dark-grid blueprint (8712): compact cards, icon
   tile + title inline, one sentence each — no tags, no embedded shots */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
@media (max-width: 900px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }
.feat-cell { padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: background 140ms ease-out, border-color 140ms ease-out; }
.feat-cell:hover { background: var(--panel-hover); border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.feat-head { display: flex; align-items: center; gap: 11px; }
.feat-ic {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--panel-hover); border: 1px solid var(--hairline-2); color: var(--ink); flex: none;
}
.feat-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; font-weight: 650; }
.feat-chip {
  margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--dim);
  border: 1px solid var(--edge); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.feat-cell p { margin: 0; font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* ── motion layer: load-in, reveals, menu, press feedback ───────────────────
   Fast, transform/opacity only, every piece gated on reduced-motion. */

/* anchors glide and never hide under the sticky nav */
html { scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* hero load-in: headline → sub → buttons → trust line → frame */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.xhero h1 { animation: rise 0.65s var(--ease-out) backwards; }
.xhero .hero-sub { animation: rise 0.65s var(--ease-out) 0.08s backwards; }
.xhero .hero-ctas { animation: rise 0.65s var(--ease-out) 0.16s backwards; }
.xhero .hero-trust { animation: rise 0.65s var(--ease-out) 0.22s backwards; }
.xhero .hero-shot { animation: rise 0.8s var(--ease-out) 0.3s backwards; }

/* scroll reveals (class applied by home.js only when motion is allowed) */
.rv { opacity: 0; translate: 0 16px; transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out); }
.rv.in { opacity: 1; translate: 0 0; }

/* nav: floats over the hero, gains glass + hairline once scrolled */
body.home .top {
  background: transparent; border-bottom-color: transparent;
  transition: background 0.25s ease-out, border-color 0.25s ease-out;
}
body.home .top.scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 7%, transparent);
}

/* press feedback everywhere, via the standalone scale property so it
   composes with existing transform hovers */
.btn-fill, .btn-secondary, .btn-pill, .btn-ghost, .btn-blurple, .pay-btn,
.apply-btn, .menu-btn, .seg-btn, .option, .method, .price-cta, .g-row { transition-property: background, border-color, color, filter; transition-duration: 140ms; }
.btn-fill, .btn-secondary, .btn-pill, .btn-ghost, .btn-blurple, .pay-btn,
.apply-btn, .menu-btn, .seg-btn, .option, .method, .price-cta {
  scale: 1;
  transition: scale 110ms var(--ease-out), background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out, filter 140ms ease-out;
}
.btn-fill:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn-pill:active:not(:disabled),
.btn-ghost:active:not(:disabled), .btn-blurple:active:not(:disabled), .pay-btn:active:not(:disabled),
.apply-btn:active:not(:disabled), .menu-btn:active, .seg-btn:active, .option:active, .method:active,
.price-cta:active { scale: 0.97; }

/* hamburger: two bars that morph into a clean X */
.menu-btn { flex-direction: column; gap: 5px; }
.mb-bar {
  display: block; width: 16px; height: 1.8px; border-radius: 1px; background: var(--ink);
  transition: transform 0.22s var(--ease-in-out);
}
.menu-btn[aria-expanded="true"] .mb-bar:first-child { transform: translateY(3.4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .mb-bar:last-child { transform: translateY(-3.4px) rotate(-45deg); }

/* menu sheet: slides down as glass, links land staggered; scrim dims the page */
.menu-scrim {
  position: fixed; inset: 0; z-index: 38; background: rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity 0.24s ease-out;
}
.menu-scrim.open { opacity: 1; }
.menu-scrim[hidden] { display: none; }
.mobile-menu {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
  opacity: 0; translate: 0 -10px;
  transition: opacity 0.24s var(--ease-out), translate 0.24s var(--ease-out);
}
.mobile-menu.open { opacity: 1; translate: 0 0; }
.mobile-menu a, .mobile-menu-account {
  opacity: 0; translate: 0 -6px;
  transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out);
}
.mobile-menu.open a, .mobile-menu.open .mobile-menu-account { opacity: 1; translate: 0 0; }
.mobile-menu.open a:nth-child(1) { transition-delay: 40ms; }
.mobile-menu.open a:nth-child(2) { transition-delay: 75ms; }
.mobile-menu.open a:nth-child(3) { transition-delay: 110ms; }
.mobile-menu.open a:nth-child(4) { transition-delay: 145ms; }
.mobile-menu.open .mobile-menu-account { transition-delay: 180ms; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* details open smoothly where the browser can interpolate to auto */
.faq-item, .order-extra { interpolate-size: allow-keywords; }
.faq-item::details-content, .order-extra::details-content {
  height: 0; overflow: clip;
  transition: height 0.28s var(--ease-out), content-visibility 0.28s allow-discrete;
}
.faq-item[open]::details-content, .order-extra[open]::details-content { height: auto; }
.faq-item summary::after, .order-extra summary::after { transition: rotate 0.2s var(--ease-out); display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .xhero h1, .xhero .hero-sub, .xhero .hero-ctas, .xhero .hero-trust, .xhero .hero-shot { animation: none; }
  .rv { opacity: 1; translate: 0 0; transition: none; }
  .mobile-menu, .mobile-menu a, .mobile-menu-account, .menu-scrim, .mb-bar { transition: none; }
  .faq-item::details-content, .order-extra::details-content { transition: none; }
}

/* ── feature vignettes: tiny product moments inside each card (Linear-style,
   pure DOM/SVG — no media weight). Animations key off the card's reveal. ──── */
.feat-cell { min-height: 238px; }
.feat-viz {
  margin-top: auto; height: 116px; border: 1px solid #1e1e1e; border-radius: 10px;
  background: #0c0c0c; padding: 12px 14px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.vz-sub { color: #7a7a7a; font-size: 10.5px; }
/* store */
.vz-browser { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.vz-url {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  border: 1px solid #232323; border-radius: 999px; padding: 3px 9px;
  color: #8a8a8a; font-size: 10px; background: #101010;
}
.vz-prow { display: flex; justify-content: space-between; font-size: 12px; font-weight: 650; }
.vz-price { font-variant-numeric: tabular-nums; }
.vz-buy {
  /* mirrors the real checkout button, which wears Discord blurple */
  background: var(--blurple); color: #fff; border-radius: 6px; text-align: center;
  font-size: 11px; font-weight: 700; padding: 6px;
}
/* roles */
.vz-center { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; }
.vz-member {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid #232323; border-radius: 8px; padding: 8px 10px; background: #101010;
}
.vz-av {
  width: 22px; height: 22px; border-radius: 50%; background: #1f1f1f; color: #cfcfcf;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none;
}
.vz-name { font-size: 12px; font-weight: 650; }
.vz-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  background: #ededed; color: #0a0a0a; border-radius: 999px; padding: 3px 8px;
  font-size: 10.5px; font-weight: 750;
}
.feat-cell.rv .vz-chip { opacity: 0; scale: 0.7; transition: opacity 0.3s var(--ease-out) 0.5s, scale 0.3s var(--ease-out) 0.5s; }
.feat-cell.rv.in .vz-chip { opacity: 1; scale: 1; }
/* verify */
.vz-code { align-items: flex-start; gap: 5px; }
.vz-code code { font: 500 10.5px/1.5 ui-monospace, 'SF Mono', Menlo, monospace; color: #6f6f6f; }
.vz-ok { display: inline-flex; align-items: center; gap: 5px; color: #f0f0f0; font-size: 11px; font-weight: 700; margin-top: 2px; }
.feat-cell.rv .vz-ok { opacity: 0; transition: opacity 0.4s var(--ease-out) 0.55s; }
.feat-cell.rv.in .vz-ok { opacity: 1; }
/* email */
.vz-mail { display: flex; flex-direction: column; gap: 5px; width: 100%; border-left: 2px solid #ededed; padding-left: 12px; }
.vz-mail-tag { color: #8a8a8a; font-size: 9.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.vz-mail strong { font-size: 12.5px; font-weight: 700; }
/* chart */
.vz-chartbox { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.vz-chart-top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.vz-delta { font-size: 9.5px; background: rgba(255, 255, 255, 0.09); border-radius: 4px; padding: 2px 5px; }
.vz-chart { width: 100%; height: 54px; }
.vz-area { fill: rgba(255, 255, 255, 0.07); }
.vz-line { stroke: #e8e8e8; stroke-width: 1.6; }
.feat-cell.rv .vz-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out) 0.35s; }
.feat-cell.rv .vz-area { opacity: 0; transition: opacity 0.6s ease-out 0.9s; }
.feat-cell.rv.in .vz-line { stroke-dashoffset: 0; }
.feat-cell.rv.in .vz-area { opacity: 1; }
/* sale alert */
.vz-notif {
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  border: 1px solid #232323; border-radius: 8px; padding: 10px 12px; background: #101010;
}
.vz-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffffff; flex: none; margin-top: 4px; }
.feat-cell.rv.in .vz-dot { animation: vz-ping 1.8s ease-out 0.6s 2; }
@keyframes vz-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 45%, transparent); } 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.vz-notif-body { display: flex; flex-direction: column; gap: 2px; }
.vz-notif-body strong { font-size: 12px; }

/* ── how it works: compact 4-step strip (sublyna steps pattern) ────────────── */
.hiw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
@media (max-width: 900px) { .hiw { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hiw { grid-template-columns: 1fr; } }
.hiw-step {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); padding: 18px;
}
.hiw-n { position: absolute; top: 14px; right: 16px; color: var(--faint); font-family: var(--font-head); font-size: 13px; font-weight: 700; }
.hiw-ic {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: var(--panel-hover); border: 1px solid var(--hairline-2); color: var(--ink);
}
.hiw-step strong { font-size: 14.5px; letter-spacing: -0.01em; }
.hiw-step p { margin: 0; font-size: 12.5px; line-height: 1.55; color: color-mix(in srgb, var(--ink) 50%, transparent); }

/* ── hero: quiet compatibility strip ───────────────────────────────────────── */
.hero-compat { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 6px; color: var(--faint); }
.hc-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 650; }
.hc-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--dim); }
.hc-stripe { font-family: var(--font-head); font-weight: 750; font-size: 14.5px; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
  .feat-cell.rv .vz-chip, .feat-cell.rv .vz-ok, .feat-cell.rv .vz-line, .feat-cell.rv .vz-area { transition: none; opacity: 1; scale: 1; stroke-dasharray: none; }
  .feat-cell.rv.in .vz-dot { animation: none; }
}

/* ── how-it-works vignettes: the same living-moment language as the
   feature cards, one small beat per step ───────────────────────────────────── */
.hiw-viz {
  margin-top: 4px; border: 1px solid #1e1e1e; border-radius: 9px; background: #0c0c0c;
  padding: 10px 12px; display: flex; align-items: center; min-height: 54px;
}
.hiw-viz .vz-member { border: none; background: none; padding: 0; width: 100%; }
.vz-av-sq { border-radius: 7px; }
.vz-bot {
  background: #2b2b2b; color: #bdbdbd; border-radius: 4px; padding: 1px 5px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; vertical-align: 1px;
}
.vz-keyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.vz-keyrow code { font: 500 11px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: #8a8a8a; letter-spacing: 0.02em; }
.vz-keyrow .vz-ok { margin: 0; font-size: 10.5px; }
.vz-paid { color: #7a7a7a; font-size: 10.5px; font-weight: 600; margin-left: 4px; }
.vz-payout { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.vz-amt { font-family: var(--font-head); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* one shared pop-in for every step beat, keyed on the card's reveal */
.hiw-step.rv .vz-pop { opacity: 0; scale: 0.75; transition: opacity 0.3s var(--ease-out) 0.5s, scale 0.3s var(--ease-out) 0.5s; }
.hiw-step.rv.in .vz-pop { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) { .hiw-step.rv .vz-pop { opacity: 1; scale: 1; transition: none; } }

/* ── pro analytics: the current line draws itself in, the area fades up,
   the live endpoint breathes once; product bars grow on load ──────────────── */
.rev-chart .cur-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rev-draw 0.9s var(--ease-out) 0.05s forwards; }
@keyframes rev-draw { to { stroke-dashoffset: 0; } }
.rev-chart .area-fill { opacity: 0; animation: rev-area 0.6s ease-out 0.55s forwards; }
@keyframes rev-area { to { opacity: 1; } }
.rev-chart .prev-line { opacity: 0; animation: rev-area 0.5s ease-out 0.75s forwards; }
.rev-chart .end-dot, .rev-chart .end-halo, .rev-chart .peak, .rev-chart circle:not(.dot-cur):not(.dot-prev) {
  opacity: 0; animation: rev-area 0.4s ease-out 0.85s forwards;
}
.rev-chart .end-halo { animation: rev-halo 0.4s ease-out 0.85s forwards; }
@keyframes rev-halo { to { opacity: 0.14; } }
.top-bar { height: 7px; border-radius: 4px; }
.top-bar span {
  background: linear-gradient(90deg, #8f8f8f, #f2f2f2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 25%, transparent);
  transform-origin: left center;
  animation: bar-grow 0.8s var(--ease-out) 0.15s backwards;
}
@keyframes bar-grow { from { transform: scaleX(0); } }
.chart-tip { background: rgba(18, 18, 18, 0.92); backdrop-filter: blur(10px); border-radius: 8px; }
.panel.stat { transition: border-color 140ms ease-out; }
.panel.stat:hover { border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .rev-chart .cur-line, .rev-chart .area-fill, .rev-chart .prev-line,
  .rev-chart .end-dot, .rev-chart .end-halo, .rev-chart .peak { animation: none; opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; }
  .rev-chart .end-halo { opacity: 0.14; }
  .top-bar span { animation: none; }
}

/* ── guide pages: readable long-form typography ────────────────────────────── */
.guide-body h2 { font-size: 21px; letter-spacing: -0.015em; margin: 34px 0 10px; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body p { color: color-mix(in srgb, var(--ink) 68%, transparent); font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.guide-body ul { margin: 0 0 14px 20px; display: flex; flex-direction: column; gap: 8px; }
.guide-body li { color: color-mix(in srgb, var(--ink) 68%, transparent); font-size: 15px; line-height: 1.7; }
.guide-body a { color: var(--ink); text-underline-offset: 3px; }
.guide-body strong { color: color-mix(in srgb, var(--ink) 92%, transparent); }
.alt-card { cursor: default; }
.alt-ours {
  margin-left: 8px; vertical-align: 2px; background: #ededed; color: var(--accent-ink);
  border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 750;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.alt-grid { grid-template-columns: 1fr; }
.alt-card .seo-card-cta a { color: var(--ink); text-decoration: none; }

/* hero compat marks in their real brand colors */
.hc-discord svg { color: #5865f2; }
.hc-discord, .hc-stripe { color: var(--dim); }
.hc-stripe { color: #635bff; }

/* ── small semantic color accents ───────────────────────────────────────────
   Color earns its place only where it carries meaning: Discord blurple for
   Discord concepts, money-green for revenue/verified/live, Stripe purple for
   Stripe. Everything else stays black and white. */
:root { --money: #22c55e; --amber: #f2b03c; }

/* savings calculator: the money you keep reads as money */
.calc-result-num { color: var(--money); }
.calc-bar.mine span { background: var(--money); }

/* the four steps: each icon tinted by what that step actually touches */
.hiw-step:nth-child(1) .hiw-ic { color: #7a85f6; background: rgba(88, 101, 242, 0.12); border-color: rgba(88, 101, 242, 0.34); }
.hiw-step:nth-child(2) .hiw-ic { color: #8b85ff; background: rgba(99, 91, 255, 0.12); border-color: rgba(99, 91, 255, 0.34); }
.hiw-step:nth-child(3) .hiw-ic { color: var(--amber); background: rgba(242, 176, 60, 0.11); border-color: rgba(242, 176, 60, 0.3); }
.hiw-step:nth-child(4) .hiw-ic { color: var(--money); background: rgba(34, 197, 94, 0.11); border-color: rgba(34, 197, 94, 0.3); }
.hiw-step .vz-amt { color: var(--money); }

/* feature vignettes: a Discord role is blurple, verified and live are green */
.vz-chip { background: var(--blurple); color: #fff; }
.vz-chip svg { color: #fff; }
.vz-chip-ok { background: var(--money); color: #07230f; }
.vz-chip-ok svg { color: #07230f; }
.vz-ok, .vz-ok svg { color: var(--money); }
.vz-delta { color: var(--money); background: rgba(34, 197, 94, 0.13); }
.vz-dot { background: var(--money); }
@keyframes vz-ping {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* a "Live" label gets a live dot */
.feat-chip.is-live { display: inline-flex; align-items: center; gap: 6px; }
.feat-chip.is-live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--money); flex: none;
}

/* ── dashboard: the same semantic palette as the landing page ───────────────
   State (live/active), direction (up vs down) and money get color; labels,
   charts and chrome stay monochrome so the data still leads. */
.chip-good { color: var(--money); border-color: color-mix(in srgb, var(--money) 45%, transparent); background: rgba(34, 197, 94, 0.08); }
.chip-warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: rgba(242, 176, 60, 0.08); }
.delta.up { color: var(--money); background: rgba(34, 197, 94, 0.12); }
.tip-delta.up { color: var(--money); }
/* completed setup steps read as done at a glance */
.check-list li.ok .check-dot { color: var(--money); border-color: color-mix(in srgb, var(--money) 45%, transparent); background: rgba(34, 197, 94, 0.08); }
/* revenue by product: money bars */
.top-bar span { background: linear-gradient(90deg, rgba(34, 197, 94, 0.42), rgba(34, 197, 94, 0.82)); }
/* the plan-limit banner is a warning, not an error */
.limit-banner a { color: var(--amber); }

/* Upgrade.Chat publish a "from $49/mo" floor, not a flat rate — the bar models
   the floor, so the label says so rather than implying it is the real cost. */
.calc-bar-from {
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--edge); border-radius: 999px;
  padding: 1px 6px; margin-left: 6px; vertical-align: 1px;
}

/* Restricted-key scope list, shown beside the Stripe key field. Collapsed by
   default: it is reference material, not something to read before every paste. */
.key-scopes { margin-top: 8px; font-size: 12.5px; }
.key-scopes summary {
  cursor: pointer; color: color-mix(in srgb, var(--ink) 72%, transparent); list-style: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
}
.key-scopes summary::before { content: '+'; color: var(--dim); font-weight: 700; }
.key-scopes[open] summary::before { content: '−'; }
.key-scopes summary::-webkit-details-marker { display: none; }
.key-scopes ul {
  list-style: none; margin: 6px 0 0; padding: 10px 12px;
  border: 1px solid var(--edge); border-radius: 8px; background: var(--well);
  display: grid; gap: 6px;
}
.key-scopes li { display: flex; justify-content: space-between; gap: 12px; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.key-scopes li em { font-style: normal; color: var(--dim); }
.key-scopes p { margin: 8px 0 0; color: var(--dim); line-height: 1.5; }
.key-scopes p em { font-style: normal; color: color-mix(in srgb, var(--ink) 66%, transparent); }

/* Cancel lives on the buyer's own card. Quiet by default — a destructive
   action should be findable without being the loudest thing on the page. */
.sub-actions { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--edge); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 32%, transparent); }
.btn-danger:hover:not(:disabled) { background: rgba(248, 113, 113, 0.1); border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.btn-danger:disabled { opacity: 0.6; }
.sub-cancel-note { margin: 0; flex: 1 1 220px; min-width: 0; }

/* Checkout attempt stats, above the attempts table. Four plain figures — the
   interesting one is the gap between Started and Paid. */
.ck-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 10px; overflow: hidden; margin: 4px 0 14px; }
.ck-stat { background: var(--panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ck-num { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.ck-num.ck-good { color: var(--money); }
.ck-num.ck-warn { color: var(--amber); }
.ck-lab { font-size: 12px; color: var(--dim); letter-spacing: 0.02em; }
.chip-code { background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--edge); color: color-mix(in srgb, var(--ink) 70%, transparent); font-size: 11px; }
@media (max-width: 620px) { .ck-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── platform admin (owner-only view) ───────────────────────────────────── */
.admin-wrap { max-width: 1080px; margin: 0 auto; padding: 28px 22px 60px; display: flex; flex-direction: column; gap: 16px; }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.admin-head .btn-secondary { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; width: auto; }
.admin-stats { grid-template-columns: repeat(3, 1fr); margin: 0; }
@media (max-width: 720px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } }
.ck-sub { font-size: 12px; font-weight: 600; color: var(--dim); letter-spacing: 0; margin-left: 4px; }
.admin-store-link { color: inherit; font-weight: 650; text-decoration: none; }
.admin-store-link:hover { text-decoration: underline; }
/* picker: the owner's door into the admin page */
.admin-link {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none;
  color: inherit; border: 1px solid var(--edge); transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out);
}
.admin-link:hover { border-color: var(--edge-hot); background: var(--panel-hover); }
.admin-link > span { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.admin-link em { font-style: normal; font-size: 12.5px; color: var(--dim); }
.admin-link svg:first-child { color: var(--dim); flex: none; }

/* time-to-pay, tucked behind the completion timestamp */
.ck-dur { color: var(--dim); font-size: 12px; }


/* ── store appearance (dashboard) ───────────────────────────────────────── */
/* Preview-first: controls in a narrow rail, the real storefront beside them.
   Presets are thumbnails of the checkout itself — picking a theme is seeing
   it, not decoding a labeled color dot. */
.set-card > .th-layout { margin: 14px 20px 18px; }
.th-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 26px; align-items: start; }
.th-controls { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.th-block { display: flex; flex-direction: column; gap: 10px; }
.th-block-lab { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); }

.th-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.th-tile { padding: 0; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.th-tile-thumb {
  border: 1px solid var(--edge); border-radius: 9px; padding: 9px 10px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.th-tile:hover .th-tile-thumb { border-color: #454545; transform: translateY(-1px); }
.th-tile:focus-visible { outline: none; }
.th-tile:focus-visible .th-tile-thumb { outline: 2px solid #fff; outline-offset: 2px; }
.th-tile.active .th-tile-thumb { border-color: #fff; }
.th-tile-card { width: 74%; padding: 7px 8px; display: flex; flex-direction: column; gap: 4px; }
.th-tile-line { height: 3px; border-radius: 2px; width: 78%; }
.th-tile-line2 { width: 48%; opacity: 0.45; }
.th-tile-btn { height: 8px; border-radius: 3px; margin-top: 2px; }
.th-tile-name { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--dim); }
.th-tile.active .th-tile-name { color: var(--ink); }
.th-tile-check { display: none; }
.th-tile.active .th-tile-check { display: inline; }

.th-swatches { display: flex; gap: 14px; }
.th-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; flex: 1; min-width: 0; }
.th-swatch input[type='color'] {
  width: 40px; height: 40px; padding: 0; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 50%;
  background: none; cursor: pointer; transition: transform 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.th-swatch input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
.th-swatch input[type='color']::-webkit-color-swatch { border: none; border-radius: 50%; }
.th-swatch:hover input[type='color'] { transform: scale(1.06); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.th-swatch input[type='color']:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.th-sw-name { font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--ink) 72%, transparent); white-space: nowrap; }
.th-swatch code { font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

.th-range { display: flex; align-items: center; gap: 12px; }
.th-range input { flex: 1; accent-color: var(--ink); height: 28px; }
.th-range code {
  font-size: 12px; color: color-mix(in srgb, var(--ink) 80%, transparent); min-width: 46px; text-align: center;
  border: 1px solid var(--edge); border-radius: 999px; padding: 4px 0; background: var(--well);
  font-variant-numeric: tabular-nums;
}

.th-seg { display: flex; border: 1px solid var(--edge); border-radius: 9px; background: var(--well); padding: 3px; gap: 3px; }
.th-seg-btn {
  flex: 1; min-height: 34px; border: none; border-radius: 6px; background: none;
  color: var(--dim); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.th-seg-btn:hover { color: color-mix(in srgb, var(--ink) 85%, transparent); }
.th-seg-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.th-seg-btn.active { background: var(--active-fill); color: var(--ink); }

.th-badge-warn {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: 999px;
  padding: 2px 8px; text-transform: none;
}
.th-note { margin: 0; font-size: 12px; color: var(--dim); line-height: 1.55; }

.th-stage { min-width: 0; }
.th-stage-empty { border: 1px dashed var(--edge); border-radius: 12px; padding: 40px 20px; text-align: center; }
.th-frame { border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: #0c0c0c; display: flex; flex-direction: column; }
.th-frame-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #141414; border-bottom: 1px solid var(--edge); }
.th-frame-dot { width: 9px; height: 9px; border-radius: 50%; background: #2e2e2e; }
.th-frame-url {
  margin-left: 10px; flex: 1; text-align: center; font-size: 11.5px; color: var(--dim);
  background: #0d0d0d; border: 1px solid #1f1f1f; border-radius: 6px; padding: 4px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the page renders at a real device viewport and is scaled to fit the frame */
.th-viewport { position: relative; overflow: hidden; height: 560px; background: #0c0c0c; }
.th-preview { position: absolute; top: 0; left: 0; border: 0; background: #0c0c0c; transform-origin: 0 0; }
.th-viewport.phone .th-preview { border-left: 1px solid #1c1c1c; border-right: 1px solid #1c1c1c; }
.th-device { display: flex; gap: 2px; margin-left: 8px; border: 1px solid var(--hairline-2); border-radius: 6px; background: var(--well); padding: 2px; }
.th-dev-btn {
  display: grid; place-items: center; width: 27px; height: 22px; border: 0; border-radius: 4px;
  background: none; color: var(--dim); cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.th-dev-btn:hover { color: color-mix(in srgb, var(--ink) 85%, transparent); }
.th-dev-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.th-dev-btn.active { background: var(--active-fill); color: var(--ink); }
.appearance-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.appearance-foot .btn-pill { width: auto; }
@media (max-width: 980px) {
  .th-layout { grid-template-columns: 1fr; }
  .th-viewport { height: 440px; }
  .th-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* ── /discover: the public directory ────────────────────────────────────── */
.disc-hero { max-width: 1080px; margin: 0 auto; padding: 88px 22px 10px; display: flex; flex-direction: column; gap: 14px; }
.disc-hero h1 { margin: 0; font-family: var(--font-head); font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.035em; line-height: 1.04; }
.disc-hero .hero-sub { margin: 0; max-width: 560px; }
.disc-tools { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.disc-search { max-width: 420px; }
.disc-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.disc-chip {
  border: 1px solid var(--edge); border-radius: 999px; background: var(--panel);
  color: color-mix(in srgb, var(--ink) 75%, transparent); font-size: 12.5px; font-weight: 600; padding: 8px 14px; cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.disc-chip:hover { border-color: var(--edge-hot); color: var(--ink); }
.disc-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.disc-chip.active { background: var(--solid); border-color: var(--solid); color: var(--solid-ink); }
.disc-section { padding-top: 26px; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.disc-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color 0.16s var(--ease-out), transform 0.16s var(--ease-out), background 0.16s var(--ease-out);
}
.disc-card:hover { border-color: var(--edge-hot); background: var(--panel-hover); transform: translateY(-2px); }
.disc-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.disc-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--disc-accent); }
.disc-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.disc-icon { width: 44px; height: 44px; border-radius: 12px; flex: none; object-fit: cover; background: var(--panel-hover); }
.disc-icon-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 18px; color: color-mix(in srgb, var(--ink) 80%, transparent);
  border: 1px solid var(--edge);
}
.disc-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.disc-title strong { font-size: 15.5px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-cat { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); }
.disc-desc {
  font-size: 13px; color: color-mix(in srgb, var(--ink) 62%, transparent); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.disc-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--edge); font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.disc-empty { grid-column: 1 / -1; text-align: center; padding: 46px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.disc-empty p { margin: 0; color: var(--dim); max-width: 420px; }
.disc-empty .btn-pill { width: auto; margin-top: 6px; }
@media (max-width: 760px) { .disc-hero { padding-top: 60px; } }

/* discover listing controls (dashboard) */
.set-card > .disc-toggle { margin: 14px 20px 0; display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.disc-toggle input { width: 17px; height: 17px; accent-color: var(--ink); cursor: pointer; }
.set-card > .disc-cat-field { margin: 12px 20px 0; max-width: 300px; }

/* ── theme toggle ────────────────────────────────────────────────────────── */
:root { color-scheme: dark; }
html[data-theme='light'] { color-scheme: light; }
.theme-btn {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 8px; border: 1px solid var(--edge); background: none;
  color: var(--dim); cursor: pointer;
  transition: color 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.theme-btn:hover { color: var(--ink); border-color: var(--edge-hot); }
.theme-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-btn .tb-moon { display: none; }
html[data-theme='light'] .theme-btn .tb-sun { display: none; }
html[data-theme='light'] .theme-btn .tb-moon { display: block; }
/* the wordmark ships as a white PNG — invert it on light chrome */
html[data-theme='light'] .platform-mark,
html[data-theme='light'] .powered-mark { filter: invert(1); }
.top-right { display: flex; align-items: center; gap: 10px; }
/* the mini product mocks are dark in both themes — pin their ink so light
   mode's dark text never bleeds into them */
.feat-viz, .hiw-viz { color: #f5f5f4; }


/* ── light theme: the landing's mock insets. The dashboard screenshots stay
   dark (the product is dark) but every hand-built vignette repaints. ───────── */
html[data-theme='light'] .feat-viz,
html[data-theme='light'] .hiw-viz { background: #f4f4f1; border-color: #e5e5e0; color: #16161a; }
html[data-theme='light'] .vz-url,
html[data-theme='light'] .vz-member,
html[data-theme='light'] .vz-notif { background: #ffffff; border-color: #e2e2dd; }
html[data-theme='light'] .vz-url { color: #74746e; }
html[data-theme='light'] .vz-av { background: #ebebe6; color: #4c4c46; }
html[data-theme='light'] .vz-chip { background: #0f0f0e; color: #fafaf8; }
html[data-theme='light'] .vz-ok { color: #0f0f0e; }
html[data-theme='light'] .vz-mail { border-left-color: #16161a; }
html[data-theme='light'] .vz-delta { background: rgba(10, 10, 10, 0.08); }
html[data-theme='light'] .vz-area { fill: rgba(10, 10, 10, 0.07); }
html[data-theme='light'] .vz-line { stroke: #161616; }
html[data-theme='light'] .vz-dot { background: #0f0f0e; }
html[data-theme='light'] .vz-bot { background: #e7e7e2; color: #55554f; }

/* the payment-method logo strip stands as its own slim band */
.pm-sect { padding: 52px 22px; }
.pm-sect .pm-strip { margin-top: 0; }
@media (max-width: 700px) { .pm-sect { padding: 40px 22px; } }

/* ── mobile menu function hardening (menu.js pairs with these) ─────────────
   The body freezes in place while the sheet is open (iOS momentum ignores
   plain overflow:hidden), so the nav must pin itself to the viewport or it
   would vanish upward with the frozen page. */
html.menu-open { overscroll-behavior: none; }
html.menu-open .top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px);
}
.menu-scrim { touch-action: none; }
.mobile-menu { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.mobile-menu a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 4px; }

/* ── storefront shop view: the store's overall page, every product a card ──
   Painted entirely from the theme tokens, so a store's saved look carries
   from its shop page into its checkout. */
.shop { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.shop-banner { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--edge); }
.shop-head { display: flex; align-items: center; gap: 14px; }
.shop-icon { width: 52px; height: 52px; border-radius: 14px; }
.shop-name { margin: 0; font-family: var(--font-head); font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; }
.shop-desc { margin: 3px 0 0; color: var(--dim); font-size: 14px; line-height: 1.5; max-width: 56ch; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.prod-card {
  display: flex; flex-direction: column; gap: 10px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 14px;
  color: var(--ink); font: inherit;
  transition: border-color 140ms ease-out, translate 140ms ease-out;
}
.prod-card:hover { border-color: var(--edge-selected, var(--accent)); translate: 0 -2px; }
.prod-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prod-shot {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--edge); background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.prod-ph {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px solid var(--edge);
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 30px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent);
}
.prod-name { font-weight: 700; font-size: 15.5px; font-family: var(--font-head); letter-spacing: -0.01em; }
.prod-desc {
  margin: 0; color: var(--dim); font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-foot { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.prod-price { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.prod-from { font-weight: 500; font-size: 13px; color: var(--muted, #8a8a84); margin-right: 2px; }
.prod-per { color: var(--dim); font-size: 12.5px; }
.shop-back {
  background: none; border: none; align-self: flex-start; cursor: pointer;
  color: var(--dim); font: 650 13.5px var(--font-body, inherit); padding: 0 0 12px;
}
.shop-back:hover { color: var(--ink); }
@media (max-width: 560px) { .shop-grid { grid-template-columns: 1fr; } }

/* the hidden attribute must win over the layout display rules above */
.order-card[hidden], .shop[hidden] { display: none !important; }

/* ── shop page: trust chips, social links, about, empty state ─────────────── */
/* Quiet metadata under the store name — icon + text, no pill borders, so
   two or three facts read as one line instead of a stack of buttons. */
.shop-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 18px; row-gap: 7px; margin-top: -4px;
}
.shop-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 650; color: var(--dim); letter-spacing: 0.01em;
}
.shop-chip svg { flex: none; opacity: 0.75; }
.shop-chip strong { color: var(--ink); font-weight: 750; }
.shop-links { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--edge); border-radius: 10px;
  color: var(--dim); background: var(--panel); transition: color 140ms ease-out, border-color 140ms ease-out;
}
.shop-link:hover { color: var(--ink); border-color: var(--edge-selected, var(--accent)); }
.shop-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prod-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.prod-role {
  font-size: 10.5px; font-weight: 750; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px; padding: 2px 8px;
}
.shop-about { border-top: 1px solid var(--edge); padding-top: 16px; }
.shop-about p { margin: 0 0 10px; color: var(--dim); font-size: 14px; line-height: 1.65; max-width: 62ch; }
.shop-about p:last-child { margin-bottom: 0; }
.shop-empty { margin: 8px 0 0; color: var(--dim); font-size: 14px; }
/* banner + avatar overlap, the classic profile composition */
.shop-banner:not([hidden]) + .shop-head { margin-top: -30px; }
.shop-banner:not([hidden]) + .shop-head .shop-icon {
  border: 3px solid var(--bg); background: var(--bg);
}

/* overview: customize panel (accent, stat cards, default period) */
.set-card > .dc-body { margin: 14px 20px 0; display: flex; flex-direction: column; gap: 16px; }
.dc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dc-help { flex-basis: 100%; margin: 0; }
.dc-open { display: inline-flex; align-items: center; gap: 8px; width: auto; flex: none; align-self: flex-start; text-decoration: none; }
.dc-lab { color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; min-width: 104px; }
.dc-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; background: var(--panel); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.dc-swatch.active { border-color: var(--ink); }
.dc-swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the "Default" swatch: the theme's own ink, shown as a split dot */
.dc-none { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--ink) 50%, var(--edge) 50%); }
.dc-custom { position: relative; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 1px dashed var(--edge); cursor: pointer; }
.dc-custom input { position: absolute; inset: -6px; width: 40px; height: 40px; border: none; padding: 0; cursor: pointer; background: none; }
.dc-checks { display: flex; gap: 14px; flex-wrap: wrap; }
.dc-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); cursor: pointer; }
.dc-actions { gap: 10px; }
.dc-actions .btn-secondary, .dc-actions .btn-ghost { width: auto; flex: none; }
#dc-range { max-width: 160px; }
@media (max-width: 700px) { .dc-lab { min-width: 100%; } }

/* store section: jump row, status badge, open button.
   The jump row speaks the same language as the phone tab strip — underline
   tabs on one scrollable line — never a wrapping pile of pills. */
.st-subnav {
  display: flex; flex-wrap: nowrap; gap: 2px; margin: 0 0 12px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--edge);
}
.st-subnav::-webkit-scrollbar { display: none; }
.st-subnav.scroll-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.st-subnav-btn {
  border: none; background: none; color: var(--dim); cursor: pointer; flex: none;
  padding: 8px 12px 10px; font-size: 13px; font-weight: 650; font-family: inherit; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}
.st-subnav-btn:hover { color: var(--ink); }
.st-subnav-btn.active { color: var(--ink); border-bottom-color: var(--accent); }
.st-subnav-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.set-card:focus { outline: none; } /* jump target focus is programmatic */
.st-status { display: inline-flex; align-items: center; gap: 8px; margin: 14px 20px 0; font-size: 12.5px; font-weight: 700; }
.st-status .st-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* Live/draft is the one other place color carries meaning in the dashboard —
   the same green/amber convention as role dots. */
.st-status.live .st-dot { background: #3fb950; box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.16); }
.st-status.draft .st-dot { background: #d29922; box-shadow: 0 0 0 3px rgba(210, 153, 34, 0.16); }
/* the bright dark-mode dots wash out on the light background */
html[data-theme='light'] .st-status.live .st-dot { background: #1a7f37; box-shadow: 0 0 0 3px rgba(26, 127, 55, 0.18); }
html[data-theme='light'] .st-status.draft .st-dot { background: #9a6700; box-shadow: 0 0 0 3px rgba(154, 103, 0, 0.18); }
.set-card > .st-products-note { margin: 10px 20px 0; }
.st-products-note a { color: var(--ink); }
.share-row .st-open { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; }

/* store settings: the link grid */
.st-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 700px) { .st-links { grid-template-columns: 1fr; } }
.field textarea {
  width: 100%; resize: vertical; min-height: 90px;
  background: var(--well, #0c0c0c); border: 1px solid var(--edge); border-radius: 8px;
  color: var(--ink); font: inherit; font-size: 14px; padding: 10px 12px;
}
.field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.field-help { margin: 6px 0 0; font-size: 12px; color: var(--dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   Front-page accent — Discord blurple → violet. The product chrome stays
   monochrome; a flat Discord blurple lands on the landing (body.home) accents
   only — primary CTAs, the sign-in pill, the popular plan, the badge and the
   section labels. Type stays neutral. The hue is fixed so it reads light + dark.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --brand-1: #5865f2;                 /* Discord blurple — flat, no gradient */
  --brand-1-hover: #4752c4;           /* Discord's own button-hover blurple */
  --brand-text: #a5b0ff;              /* readable blurple for text on dark chrome */
}
html[data-theme='light'] { --brand-text: #4a54d6; }  /* deeper blurple on white */

/* Headlines stay neutral — the way Discord keeps type monochrome and lets the
   blurple live on the buttons and accents. (.hl-dim / .dim-line revert to their
   default var(--dim); nothing to override here.) */

/* primary filled CTAs are solid blurple, white text (hero Invite, popular plan) */
body.home .btn-fill,
body.home #pricing .price-card.popular .price-cta {
  background: var(--brand-1); color: #fff; border-color: transparent;
}
body.home .btn-fill:hover,
body.home #pricing .price-card.popular .price-cta:hover { background: var(--brand-1-hover); filter: none; }
body.home .btn-fill:focus-visible { outline-color: var(--brand-1); }

/* nav "Sign in with Discord" pill — solid blurple */
body.home .account .btn-pill { background: var(--brand-1); color: #fff; border-color: transparent; }
body.home .account .btn-pill:hover { background: var(--brand-1-hover); }

/* the "Most popular" badge — solid blurple */
body.home #pricing .price-badge { background: var(--brand-1); color: #fff; }

/* popular plan: a blurple frame + barely-there wash so it reads as the pick */
body.home #pricing .price-card.popular {
  border-color: color-mix(in srgb, var(--brand-1) 50%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-1) 5%, transparent), transparent 55%),
    var(--panel);
}
body.home #pricing .price-card.popular .price-list li::before { color: var(--brand-1); }

/* section labels — [ Features ] [ Pricing ] etc. */
body.home .kicker { color: var(--brand-text); }
body.home .kicker::before,
body.home .kicker::after { color: color-mix(in srgb, var(--brand-text) 45%, transparent); }

/* nav links pick up the accent on hover */
body.home .top-center .nav-link:hover { color: var(--brand-text); }

/* ═══════════════════════════════════════════════════════════════════════════
   Discord-native landing — no background glows (flat, the way Discord's own
   surfaces are); the page dark shifts from pure black to Discord's blue-tinted
   charcoal so it reads as a Discord product. Blurple stays on the accents.
   Dark theme + body.home only, so light mode and the app chrome are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Discord BLACK theme (their OLED theme, sampled from the app): pure #000000
   page with #0c0c0c surfaces that barely lift off it, faint borders to separate
   cards on the black. */
html:not([data-theme='light']) body.home {
  --bg: #000000;               /* Discord Black — pure black page */
  --panel: #0c0c0c;            /* Discord Black surface — cards barely lift off black */
  --panel-hover: #161618;
  --well: #000000;
  --raised: #161618;
  --edge: #202023;             /* faint border so cards read on pure black */
  --edge-hot: #2c2d31;
  --hairline: #161618;
  --hairline-2: #202023;
  --active-fill: #161618;
}
/* Discord WHITE theme (sampled from the app): near-white #fbfbfb page, white
   cards separated by #e3e5e8 hairlines, #d9d9dc dividers, near-black text. */
html[data-theme='light'] body.home {
  --bg: #fbfbfb;               /* Discord White — near-white page */
  --panel: #ffffff;            /* white cards on the near-white page */
  --panel-hover: #f3f3f4;      /* Discord's light-grey chip */
  --well: #f3f3f4;
  --raised: #ffffff;
  --edge: #e3e5e8;             /* Discord light hairline */
  --edge-hot: #d9d9dc;         /* sampled row divider */
  --hairline: #ececee;
  --hairline-2: #e3e5e8;
  --active-fill: #f0f0f2;
  --ink: #060607;              /* Discord header near-black */
  --dim: #4e5058;              /* Discord text-muted */
  --faint: #b7bbc2;
}
/* Discord's surfaces are generously rounded — soften the landing's cards */
body.home .panel,
body.home .feat-cell,
body.home .price-card,
body.home .hiw-step,
body.home .calc,
body.home .faq-item { border-radius: 14px; }
/* the nav bar follows the same surfaces; its scrolled glass tints per theme */
body.home .top { background: transparent; }
html:not([data-theme='light']) body.home .top.scrolled {
  background: color-mix(in srgb, #000000 80%, transparent);
  border-bottom-color: var(--hairline-2);
}
html[data-theme='light'] body.home .top.scrolled {
  background: color-mix(in srgb, #fbfbfb 88%, transparent);
  border-bottom-color: var(--hairline-2);
}

/* recommended plan: a real drop shadow (Discord-style elevation, not a glow) */
body.home #pricing .price-card.popular {
  box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.72);
}

/* feature + step cards lift and pick up a faint blurple edge on hover */
body.home .feat-cell,
body.home .hiw-step {
  transition: transform 0.28s var(--ease-out), border-color 0.28s var(--ease-out);
}
body.home .feat-cell:hover,
body.home .hiw-step:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-1) 38%, var(--edge));
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero: the real product-tour video (a screen recording of the dashboard),
   themed to the page — dark tour on Black, light tour on White (home.js swaps
   the source on toggle). Muted + inline + loop so it autoplays everywhere incl.
   iOS Safari; object-fit:cover fills the 16:9 browser frame.
   ═══════════════════════════════════════════════════════════════════════════ */
body.home .browser-frame .hero-video {
  display: block; width: 100%; aspect-ratio: 1920 / 1080;
  object-fit: cover; background: #0a0a0a; border: 0;
}
html[data-theme='light'] body.home .browser-frame .hero-video { background: #fafaf8; }