/* zappmeup.com marketing homepage */

/* Self-hosted instead of Google Fonts - a font-blocking content blocker or a
   network-level filter targeting fonts.googleapis.com/fonts.gstatic.com
   (a real, fairly common category of ad/privacy blocklist) would otherwise
   silently fall back to a system font with no visible error. Serving it as
   a same-origin file removes that failure mode entirely - it loads exactly
   like any other asset on this site. Google actually serves one variable
   font file covering the whole weight range; these 5 declarations just
   expose it at each static weight the site uses, matching what Google's
   own CSS does. */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/RedHatDisplay-latin.715e5abc1b21.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: 'Red Hat Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/RedHatDisplay-latin.715e5abc1b21.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: 'Red Hat Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/RedHatDisplay-latin.715e5abc1b21.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: 'Red Hat Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/RedHatDisplay-latin.715e5abc1b21.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: 'Red Hat Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/RedHatDisplay-latin.715e5abc1b21.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: 'Red Hat Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/RedHatDisplay-latin-ext.e57261a32029.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;
}

:root {
  --ink: #0a0a0a;
  --ink-soft: #5a5b4c;
  --paper: #ffffff;
  --card: #ffffff;
  --line: #e7e4d3;
  --primary: #676b13;
  --primary-dark: #52550f;
  --primary-tint: #f1f3d2;
  --zap: #ede820;
  --zap-dim: #c9c518;
  --zap-ink: #1a1a05;
  --success: #17b26a;
  --on-dark-soft: rgba(255, 255, 255, 0.68);
  --on-dark-line: rgba(255, 255, 255, 0.14);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 20px 45px -20px rgba(20, 20, 10, 0.3);
  --shadow-sm: 0 8px 20px -12px rgba(20, 20, 10, 0.32);
  --container: 1160px;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

/* Browsers don't apply the page's own font to form controls by default -
   they use their native UI font (Arial, in Chrome/Safari) unless told
   otherwise. Submit buttons, inputs, selects, and textareas across the
   site were falling back to that instead of Red Hat Display. */
button,
input,
select,
textarea {
  font-family: inherit;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
}

@media (max-width: 860px) {
  /* .dash's app-shell height (see media query further below) uses a
     height: 100% chain rather than dvh, which was unreliable on the test
     device. Without viewport-fit=cover (dropped - it broke the topbar in
     testing) this still comes up a bit short of the true bottom edge, so
     body's own background shows through that sliver. Painting it the same
     dark color as the nav means that gap is invisible instead of a stray
     white strip, regardless of its exact size. */
  html,
  body {
    height: 100%;
  }

  body {
    background: var(--ink);
  }
}

body {
  margin: 0;
  font-family: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: #262620;
}

.btn-zap {
  background: var(--zap);
  color: var(--zap-ink);
  font-weight: 700;
}

.btn-zap:hover {
  background: var(--zap-dim);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost:hover {
  background: var(--card);
  border-color: var(--ink);
}

.btn-danger {
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
}

.btn-ghost-dark {
  background: transparent;
  color: #fff;
  border-color: var(--on-dark-line);
}

.btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn-lg {
  padding: 15px 28px;
  font-size: 1.02rem;
}

/* Legal pages (Terms, Privacy) */

.legal-page {
  padding: 56px 0 96px;
}

.legal-page .wrap {
  max-width: 720px;
}

.legal-page .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 32px;
}

.legal-page .logo-mark svg {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

.legal-page h1 {
  font-size: 2rem;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.legal-page .legal-updated {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0 0 40px;
}

.legal-page h2 {
  font-size: 1.15rem;
  margin: 36px 0 12px;
}

.legal-page p,
.legal-page li {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-page p {
  margin: 0 0 16px;
}

.legal-page ul {
  padding-left: 20px;
  margin: 0 0 16px;
}

.legal-page a {
  color: var(--primary);
  text-decoration: underline;
}

/* Blog (index + posts) - builds on the legal-page reading column. Paints its own
   background: on phones body is dark (see the 860px rule near the top). */

.blog-page {
  background: var(--paper);
  min-height: 100%;
}

.blog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 48px;
}

.legal-page .blog-bar .logo {
  margin-bottom: 0;
  gap: 10px;
}

.blog-bar-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
}

.blog-bar-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.legal-page .blog-bar-links a:not(.btn) {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.legal-page .blog-bar-links .btn {
  color: var(--zap-ink);
  text-decoration: none;
  padding: 9px 18px;
}

.blog-page h1 {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.15;
  text-wrap: balance;
}

.legal-page.blog-page h2 {
  font-size: 1.4rem;
  margin-top: 44px;
  text-wrap: balance;
}

.blog-page h3 {
  font-size: 1.05rem;
  margin: 24px 0 8px;
}

.legal-page.blog-page p,
.legal-page.blog-page li {
  font-size: 1.05rem;
  color: #3d3e33;
}

.legal-page.blog-page .blog-intro {
  font-size: 1.2rem;
  color: var(--ink);
}

.blog-page li + li {
  margin-top: 6px;
}

.blog-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 4px;
}

.blog-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 48px;
}

.blog-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--zap);
  color: var(--zap-ink);
  font-weight: 800;
  display: grid;
  place-items: center;
}

.blog-steps > li > h3 {
  margin-top: 24px;
  line-height: 32px;
}

.blog-table-wrap {
  overflow-x: auto;
  margin: 24px 0 8px;
}

.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.blog-table th,
.blog-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.blog-table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.blog-table tbody th {
  font-weight: 600;
}

.blog-table td:last-child {
  background: var(--primary-tint);
  font-weight: 600;
}

.blog-cta {
  margin-top: 56px;
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  text-align: center;
}

.legal-page .blog-cta h2 {
  color: #fff;
  margin: 0 0 8px;
}

.legal-page.blog-page .blog-cta p {
  color: var(--on-dark-soft);
  margin-bottom: 20px;
}

.legal-page .blog-cta .btn {
  color: var(--zap-ink);
  text-decoration: none;
}

.blog-back {
  margin-top: 32px;
}

.legal-page.blog-page .blog-lede {
  font-size: 1.15rem;
  margin-bottom: 32px;
}

.blog-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
}

.legal-page .blog-card {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink-soft);
}

.legal-page .blog-card:hover {
  border-color: var(--primary);
}

.blog-card strong {
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.3;
}

.blog-meta {
  font-size: 0.85rem;
}

/* Auth pages */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 60px 0;
}

.auth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}

.auth-card h1 {
  margin: 0 0 6px;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}

.auth-sub {
  margin: 0 0 24px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.auth-form input {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font: inherit;
  font-size: 0.95rem;
  background: var(--paper);
  color: var(--ink);
}

.auth-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

.auth-form .btn {
  margin-top: 6px;
  width: 100%;
}

.auth-errors {
  list-style: none;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #fdecec;
  color: #b3261e;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.auth-errors li + li {
  margin-top: 4px;
}

.auth-switch {
  margin: 20px 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: center;
}

.auth-switch a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.auth-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}

.auth-confirm {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--primary-tint);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  text-align: center;
}

.auth-wrap .logo {
  color: var(--ink);
}

.dashboard-menu {
  margin-top: -8px;
}

.dashboard-menu a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}

.dashboard-menu a:hover {
  color: var(--primary);
}

.websites-card {
  margin-top: 24px;
}

.websites-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.websites-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.website-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.website-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.website-name {
  font-weight: 600;
}

.website-url {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  word-break: break-all;
}

.website-url:hover {
  color: var(--primary);
}

/* Modal */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.modal-panel {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px;
}

.modal-panel h2 {
  margin: 0 0 6px;
  font-size: 1.3rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.modal-actions .btn {
  width: auto;
  margin-top: 0;
}

/* Connect-website / verify-install wizards */

.wiz-progress { display: flex; gap: 6px; margin-bottom: 22px; }
.wiz-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background 0.25s ease; }
.wiz-progress span.is-done { background: var(--zap); }

.wiz-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.wiz-check:hover { border-color: var(--primary); }
.wiz-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ink); flex-shrink: 0; cursor: pointer; }
.wiz-check .wc-text { font-size: 0.92rem; line-height: 1.45; }
.wiz-check .wc-text a { color: var(--primary); font-weight: 600; }

.wiz-snippet {
  background: var(--ink);
  color: #f4f4ee;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: pre;
}
.wiz-snippet .tag { color: #8f8f84; }
.wiz-snippet .val { color: var(--zap); }

.wiz-skip { background: none; border: none; font: inherit; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; padding: 0; }

.wiz-alt-link { display: block; text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--ink-soft); text-decoration: underline; }
.wiz-alt-link:hover { color: var(--ink); }

/* Nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.2rem;
  text-decoration: none;
  color: #fff;
}

.nav .logo {
  font-size: 1.8rem;
}

.logo-glyph {
  height: 48px;
  width: auto;
  flex: none;
}

.logo-accent {
  color: var(--zap);
}

.logo-mark {
  width: 66px;
  height: 66px;
  border-radius: 16px;
  background: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}

.logo-mark svg {
  width: 58px;
  height: 58px;
  color: var(--zap);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--on-dark-soft);
}

.nav-links a:hover {
  color: var(--zap);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 24px 22px;
  border-bottom: 1px solid var(--on-dark-line);
  background: var(--ink);
}

.nav-mobile a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  padding: 12px 4px;
  border-bottom: 1px solid var(--on-dark-line);
}

.nav-mobile a:hover {
  color: var(--zap);
}

.nav-mobile a.btn-zap,
.nav-mobile a.btn-zap:hover {
  color: var(--zap-ink);
}

.nav-mobile .nav-actions {
  padding-top: 14px;
}

/* Hero */

.hero {
  padding: 88px 0 60px;
  overflow: hidden;
  background: var(--paper);
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--zap);
  border: 1px solid rgba(237, 232, 32, 0.3);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 10px 20px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--ink);
}

.hero h1 .accent {
  position: relative;
  white-space: nowrap;
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 32px;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.hero-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-note svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex: none;
}

/* Phone mockup */

.hero-visual-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-visual-caption {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiIgdmlld0JveD0iMCAwIDcyIDcyIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLDI2KSBzY2FsZSgxLjU1KSByb3RhdGUoLTEwKSI+CiAgICA8cGF0aCBkPSJNMTQuMzkgMTYuNiA0LjczIDE2LjYgNS42MiAxNS42OSA2LjI5IDE1LjAyIDkuMzMgMTEuOTcgMC42NyAxMS4zIDcuMzkgMTAuNzUgMTIuODEgMTAuMzMgMTIuMzQgMTAuODUgOS41MyAxMy44MiA4Ljg0IDE0LjU0IDE3LjE1IDE0LjE2WiIgZmlsbD0iIzBhMGEwYSIvPgogICAgPHBhdGggZD0iTTIzLjMzIDEyLjc1IDE0LjM0IDEzLjM4IDExLjIxIDEzLjU5IDExLjgxIDEyLjk2IDE1LjExIDkuNDUgNi45NiA5Ljg1IDkuNjcgNy40IDE5LjIxIDcuNDEgMTYuODIgOS43OSAxNS4zMyAxMS4yNSAxNC41MSAxMi4wNiAxOC4xOSAxMi4zNFoiIGZpbGw9IiMwYTBhMGEiLz4KICA8L2c+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzgsNjApIHNjYWxlKDEuNTUpIHJvdGF0ZSgtMTApIj4KICAgIDxwYXRoIGQ9Ik0xNC4zOSAxNi42IDQuNzMgMTYuNiA1LjYyIDE1LjY5IDYuMjkgMTUuMDIgOS4zMyAxMS45NyAwLjY3IDExLjMgNy4zOSAxMC43NSAxMi44MSAxMC4zMyAxMi4zNCAxMC44NSA5LjUzIDEzLjgyIDguODQgMTQuNTQgMTcuMTUgMTQuMTZaIiBmaWxsPSIjMGEwYTBhIi8+CiAgICA8cGF0aCBkPSJNMjMuMzMgMTIuNzUgMTQuMzQgMTMuMzggMTEuMjEgMTMuNTkgMTEuODEgMTIuOTYgMTUuMTEgOS40NSA2Ljk2IDkuODUgOS42NyA3LjQgMTkuMjEgNy40MSAxNi44MiA5Ljc5IDE1LjMzIDExLjI1IDE0LjUxIDEyLjA2IDE4LjE5IDEyLjM0WiIgZmlsbD0iIzBhMGEwYSIvPgogIDwvZz4KPC9zdmc+Cg==");
  background-size: 72px 72px;
  background-repeat: repeat;
  background-position: center center;
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 40%, transparent 85%);
}

.hero-visual-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 187px;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

/* Every marketing phone mockup shares the showcase slides' frame (.fc-phone): gray
   body, small speaker slot, real status-bar icons (_phone_status_icons.html). */
.phone {
  width: 260px;
  height: 540px;
  background: #58585f;
  border-radius: 42px;
  padding: 10px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  z-index: 2;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  z-index: 3;
}

.phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink);
  padding: 16px 18px 2px;
}

.app-grid {
  margin-top: 30px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  position: relative;
}

.app-icon {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 13px;
  background: var(--card);
  box-shadow: 0 4px 10px rgba(20, 10, 60, 0.08);
}

.app-icon.hot {
  background: var(--ink);
  display: grid;
  place-items: center;
  position: relative;
  animation: iconInstall 16s ease-in-out infinite;
}

.app-icon.hot svg {
  width: 88%;
  height: 88%;
  color: var(--zap);
}

.app-icon.hot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  border: 2px solid var(--zap);
  animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

@keyframes iconInstall {
  0%, 21% { opacity: 0; transform: scale(0.3); }
  26% { opacity: 1; transform: scale(1.15); }
  29%, 92% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.3); }
}

.app-label {
  text-align: center;
  font-size: 0.55rem;
  color: var(--ink-soft);
  margin-top: 6px;
  font-weight: 600;
}

/* Realistic OS-style push notification, drops in below the notch */

.push-banner {
  position: absolute;
  top: 40px;
  left: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 14px 30px rgba(20, 10, 60, 0.22);
  z-index: 4;
  animation: pushBanner 16s ease-in-out infinite;
}

.push-banner-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.push-banner-icon {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--ink);
  flex: none;
  display: grid;
  place-items: center;
}

.push-banner-icon svg {
  width: 14px;
  height: 14px;
  color: var(--zap);
}

.push-banner-app {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 1;
}

.push-banner-time {
  font-size: 0.56rem;
  color: var(--ink-soft);
}

.push-banner-title {
  display: block;
  font-size: 0.74rem;
  margin-bottom: 2px;
}

.push-banner-text {
  margin: 0;
  font-size: 0.68rem;
  color: var(--ink-soft);
  line-height: 1.3;
}

@keyframes pushBanner {
  0%, 39% { opacity: 0; transform: translateY(-130%); }
  43% { opacity: 1; transform: translateY(6%); }
  46%, 63% { opacity: 1; transform: translateY(0); }
  69%, 100% { opacity: 0; transform: translateY(-130%); }
}

.install-prompt {
  position: relative;
  margin: auto 16px 20px;
  background: var(--card);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(20, 10, 60, 0.12);
  display: flex;
  gap: 10px;
  align-items: center;
  animation: installPrompt 16s ease-in-out infinite;
}

@keyframes installPrompt {
  0%, 8% { opacity: 1; transform: translateY(0); }
  19%, 93% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.install-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ink);
  flex: none;
  display: grid;
  place-items: center;
}

.install-icon svg {
  width: 23px;
  height: 23px;
  color: var(--zap);
}

.install-copy {
  flex: 1;
  min-width: 0;
}

.install-copy strong {
  display: block;
  font-size: 0.72rem;
}

.install-copy span {
  font-size: 0.64rem;
  color: var(--ink-soft);
}

.install-btn {
  position: relative;
  flex: none;
  background: var(--zap);
  color: var(--zap-ink);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  animation: installPress 16s ease-in-out infinite;
}

@keyframes installPress {
  0%, 8% { transform: scale(1); }
  10% { transform: scale(0.88); }
  13%, 100% { transform: scale(1); }
}

.tap-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(28, 29, 7, 0.22);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  animation: tapRipple 16s ease-in-out infinite;
}

@keyframes tapRipple {
  0%, 7% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  10% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  16%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

@media (prefers-reduced-motion: reduce) {
  .install-prompt,
  .install-btn,
  .tap-dot,
  .app-icon.hot,
  .app-icon.hot::after,
  .push-banner,
  .chip-1,
  .chip-2 {
    animation: none;
  }

  .install-prompt {
    display: none;
  }

  .push-banner {
    opacity: 1;
    transform: none;
  }

  .app-icon.hot {
    opacity: 1;
    transform: scale(1);
  }

  .chip-1 {
    display: none;
  }

  .chip-2 {
    opacity: 1;
    transform: none;
  }
}

.float-chip {
  position: absolute;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  padding: 7px 14px 7px 7px;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
  opacity: 0;
}

.chip-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--zap);
  font-size: 0.68rem;
  font-weight: 800;
  -webkit-text-stroke: 0.5px var(--zap);
  flex: none;
  display: grid;
  place-items: center;
}

.chip-1 {
  top: 10%;
  left: -4%;
  animation: chipPop1 16s ease-in-out infinite;
}

.chip-2 {
  bottom: 16%;
  right: -6%;
  animation: chipPop2 16s ease-in-out infinite;
}

@keyframes chipPop1 {
  0%, 8% { opacity: 1; transform: scale(1) translateY(0); }
  19%, 92% { opacity: 0; transform: scale(0.85) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes chipPop2 {
  0%, 39% { opacity: 0; transform: scale(0.85) translateY(6px); }
  43%, 63% { opacity: 1; transform: scale(1) translateY(0); }
  69%, 100% { opacity: 0; transform: scale(0.85) translateY(6px); }
}

/* Section shell */

.section {
  padding: 90px 0;
}

.section-alt {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 620px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head .eyebrow {
  display: block;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0;
  border-radius: 0;
  margin-bottom: 12px;
}

.section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.section-head p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0;
}

/* Feature grid */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.feature-card {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  min-width: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}

.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--zap);
  color: var(--zap-ink);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.feature-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.6;
}

.feature-card h3 {
  font-size: 1.08rem;
  margin: 0 0 8px;
  color: #fff;
}

.feature-card p {
  color: var(--on-dark-soft);
  font-size: 0.94rem;
  margin: 0;
}

/* Steps */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  counter-reset: step;
  position: relative;
}

.step {
  position: relative;
  padding-top: 8px;
  min-width: 0;
}

/* Sales page > How it works: the 24-second walkthrough video under the steps. */
.how-video {
  width: min(360px, 100%);
  margin: 56px auto 0;
  text-align: center;
}

.how-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  background: #0a0a0a;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.how-video figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--zap);
  font-weight: 800;
  font-size: 1.1rem;
  -webkit-text-stroke: 0.6px var(--zap);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.step h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.step-code {
  margin-top: 16px;
  background: var(--ink);
  color: var(--zap);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.78rem;
  overflow-x: auto;
  white-space: pre;
}

/* Stats */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.stat strong {
  display: block;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stat span {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* Comparison */

.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.compare-card {
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  border: 1px solid var(--line);
  min-width: 0;
}

.compare-card.win {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.compare-card h3 {
  margin: 0 0 18px;
  font-size: 1.1rem;
}

.compare-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.compare-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
}

.compare-card li svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}

.compare-card:not(.win) li svg {
  color: #c7c4b3;
}

.compare-card.win li svg {
  color: var(--zap);
}

/* Pricing */

.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.price-card.featured {
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  position: relative;
}

.price-card.featured .price-desc,
.price-card.featured .price-note,
.price-card.featured .price-amount span:last-child {
  color: var(--on-dark-soft);
}

.price-card.featured li {
  color: rgba(255, 255, 255, 0.9);
}

.price-card.featured li svg {
  color: var(--zap);
}

.price-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--zap);
  color: var(--zap-ink);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
}

.price-card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.price-card .price-desc {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0 0 20px;
}

.price-card .price-note {
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0 0 20px;
}

.price-amount {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.price-amount span:last-child {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}

.price-card li {
  display: flex;
  gap: 9px;
  font-size: 0.9rem;
  align-items: flex-start;
}

.price-card li svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex: none;
  margin-top: 2px;
}

.price-card .btn {
  width: 100%;
}

/* Pricing trust bar */

.pricing-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: -10px 0 28px;
}

.pricing-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.pricing-trust svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex: none;
}

/* Billing toggle */

.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 36px;
}

.pricing-toggle-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s ease;
}

.pricing-toggle-label.is-active {
  color: var(--ink);
}

.pricing-toggle-save {
  background: var(--zap);
  color: var(--zap-ink);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}

.pricing-toggle-switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: var(--line);
  cursor: pointer;
  padding: 0;
  flex: none;
  transition: background 0.15s ease;
}

.pricing-toggle-switch.is-annual {
  background: var(--ink);
}

.pricing-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 20, 10, 0.3);
  transition: transform 0.18s ease;
}

.pricing-toggle-switch.is-annual .pricing-toggle-knob {
  transform: translateX(20px);
  background: var(--zap);
}

/* Plan comparison table */

.price-compare {
  margin-top: 40px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.price-compare table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.price-compare th,
.price-compare td {
  padding: 14px 6px;
  text-align: center;
  font-size: clamp(0.7rem, 2.1vw, 0.88rem);
  color: var(--ink);
}

.price-compare th:first-child,
.price-compare td:first-child {
  width: 38%;
  text-align: left;
  padding-left: 16px;
  padding-right: 8px;
}

.price-compare th:not(:first-child),
.price-compare td:not(:first-child) {
  width: 20.66%;
}

.price-compare thead th {
  font-weight: 800;
  padding-top: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
  vertical-align: bottom;
}

.price-compare-badge {
  display: block;
  background: var(--zap);
  color: var(--zap-ink);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 3px 9px;
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto 6px;
}

.price-compare tbody th {
  text-align: left;
  font-weight: 600;
  font-size: clamp(0.72rem, 2.1vw, 0.86rem);
  color: var(--ink);
  padding-left: 16px;
}

.price-compare tbody tr:not(:last-child) th,
.price-compare tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--line);
}

.price-compare th:nth-child(3),
.price-compare td:nth-child(3) {
  background: var(--ink);
  color: #fff;
}

.price-compare tbody tr:not(:last-child) td:nth-child(3) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.price-compare td svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  stroke-width: 3;
}

.price-compare td:nth-child(3) svg {
  color: var(--zap);
}

.price-compare-no {
  color: var(--ink-soft);
  font-weight: 300;
}

.price-compare td:nth-child(3).price-compare-no {
  color: rgba(255, 255, 255, 0.45);
}

/* FAQ */

.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  overflow: hidden;
}

.faq-item.open {
  border-color: var(--primary);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq-chevron {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-soft);
  transition: transform 0.2s ease;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-a p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* CTA banner */

.cta-banner {
  background: var(--ink);
  border-radius: 28px;
  padding: 64px 48px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-banner h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.cta-banner p {
  color: var(--on-dark-soft);
  max-width: 46ch;
  margin: 0 auto 30px;
  font-size: 1.02rem;
}

.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Footer */

.footer {
  padding: 64px 0 32px;
  background: var(--ink);
  color: #fff;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 46px;
}

.footer-brand p {
  color: var(--on-dark-soft);
  font-size: 0.9rem;
  max-width: 30ch;
  margin: 14px 0 0;
}

.footer h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.4);
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}

.footer a:hover {
  color: var(--zap);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid var(--on-dark-line);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  flex-wrap: wrap;
  gap: 12px;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-links a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--on-dark-line);
  color: #fff;
  display: grid;
  place-items: center;
}

.social-links a:hover {
  color: var(--zap);
  border-color: var(--zap);
}

.social-links svg {
  width: 15px;
  height: 15px;
}

/* Feature cards: clickable, open a demo */

[x-cloak] {
  display: none !important;
}

.feature-card {
  cursor: pointer;
}

.feature-card:focus-visible {
  outline: 2px solid var(--zap);
  outline-offset: 3px;
}

.feature-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--zap);
}

.feature-card-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.feature-card:hover .feature-card-cta svg {
  transform: translateX(3px);
}

/* Feature demo modal */

.feature-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.feature-modal-panel {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.5);
}

.feature-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.feature-modal-close svg {
  width: 16px;
  height: 16px;
}

.feature-modal-close:hover {
  background: var(--paper);
}

.feature-demo-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}

.feature-demo h3 {
  font-size: 1.4rem;
  margin: 0 0 10px;
  padding-right: 28px;
}

.feature-demo > p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: 0 0 28px;
}

.demo-stage {
  display: flex;
  justify-content: center;
}

/* Shared desktop mockup */

.demo-desktop {
  width: 100%;
  max-width: 420px;
  background: var(--ink);
  border-radius: 16px;
  padding: 10px;
}

.demo-desktop-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 10px;
}

.demo-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  flex: none;
}

.demo-desktop-url {
  margin-left: 10px;
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.demo-desktop-screen {
  background: #fff;
  border-radius: 10px;
  padding: 22px 20px;
  position: relative;
  min-height: 230px;
  overflow: hidden;
}

/* Shared phone mockup, sized for the modal */

.demo-phone {
  width: 200px;
  height: 420px;
}

/* Demo: push notifications (tighter standalone loop) */

.demo-push-banner {
  animation: demoPushOnly 6s ease-in-out infinite;
}

@keyframes demoPushOnly {
  0%, 12% { opacity: 0; transform: translateY(-130%); }
  20% { opacity: 1; transform: translateY(6%); }
  24%, 70% { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(-130%); }
}

/* Demo: guided install - a mini install page crossfades into the home
   screen as the icon pops into the grid (demoIconPop's own timing already
   pops it in around 40-46%, so the crossfade below is tuned to match). */

.demo-install-page {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18px;
  animation: demoInstallPageFade 8s ease-in-out infinite;
}

.demo-install-page-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 16px -8px rgba(20, 10, 60, 0.3);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.demo-install-page-icon svg {
  width: 30px;
  height: 30px;
  color: var(--ink);
}

.demo-install-page-name {
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--ink);
  margin-bottom: 8px;
}

.demo-install-page-note {
  font-size: 0.62rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: center;
  margin: 0 14px 12px;
}

.demo-install-page-heading {
  font-weight: 800;
  font-size: 0.72rem;
  color: var(--ink);
  margin-bottom: 8px;
}

.demo-install-page-steps {
  background: var(--card);
  border-radius: 10px;
  margin: 0 14px;
  padding: 8px 12px 8px 26px;
  font-size: 0.64rem;
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: left;
}

@keyframes demoInstallPageFade {
  0%, 36% { opacity: 1; }
  44%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

.demo-install-grid {
  opacity: 0;
  animation: demoInstallGridFade 8s ease-in-out infinite;
}

@keyframes demoInstallGridFade {
  0%, 36% { opacity: 0; }
  44%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

/* The modal's phone is smaller than the hero's, so these icons render at
   ~26px instead of ~41px - the shared 13px radius (right for the hero) is
   exactly half that box, which rounds all the way into a circle instead of
   a rounded square. Scaled down to match the hero's actual proportions. */
.demo-app-grid .app-icon {
  border-radius: 8px;
}

.demo-app-grid .app-icon.hot::after {
  border-radius: 10px;
}

.app-icon.demo-hot-icon {
  animation: demoIconPop 8s ease-in-out infinite;
}

@keyframes demoIconPop {
  0%, 40% { opacity: 0; transform: scale(0.3); }
  46% { opacity: 1; transform: scale(1.15); }
  50%, 92% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.3); }
}

/* Demo: promo banner - same crossfade rhythm as guided install (reuses its
   keyframes): the launch page with its banner fades into the destination
   website, then back, on loop. */

.demo-promo-launch {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: demoInstallPageFade 8s ease-in-out infinite;
}

.demo-promo-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 16px -8px rgba(20, 10, 60, 0.3);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}

.demo-promo-icon svg {
  width: 26px;
  height: 26px;
  color: var(--ink);
}

.demo-promo-name {
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--ink);
  margin-bottom: 16px;
}

.demo-promo-banner {
  width: 100%;
  background: var(--zap);
  color: var(--zap-ink);
  border-radius: 14px;
  padding: 12px 14px;
}

.demo-promo-label {
  display: block;
  font-size: 0.56rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.demo-promo-headline {
  font-weight: 800;
  font-size: 0.8rem;
  margin-top: 4px;
}

.demo-promo-cta {
  display: block;
  font-size: 0.64rem;
  margin-top: 6px;
  opacity: 0.75;
}

.demo-promo-site {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px 0;
  opacity: 0;
  animation: demoInstallGridFade 8s ease-in-out infinite;
}

.demo-promo-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.demo-promo-browser-bar svg {
  width: 11px;
  height: 11px;
  flex: none;
}

.demo-promo-site-hero {
  width: 100%;
  height: 64px;
  border-radius: 10px;
  background: var(--line);
  margin-bottom: 12px;
}

.demo-promo-site-lines .ln {
  height: 7px;
  border-radius: 4px;
  background: var(--line);
  margin-bottom: 8px;
}

.demo-promo-site-lines .ln:last-child {
  width: 65%;
  margin-bottom: 0;
}

/* Demo: install & push analytics */

.demo-analytics-screen {
  padding: 26px 22px 22px;
}

.demo-stat-row {
  display: flex;
  gap: 26px;
  margin-bottom: 22px;
}

.demo-stat strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
}

.demo-stat span {
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.demo-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 90px;
}

.demo-bar {
  flex: 1;
  background: var(--zap);
  border-radius: 5px 5px 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
  height: calc(30px + (var(--i) * 10px));
  animation: demoBarGrow 4s ease-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}

@keyframes demoBarGrow {
  0%, 4% { transform: scaleY(0); }
  35%, 85% { transform: scaleY(1); }
  95%, 100% { transform: scaleY(0); }
}

/* Demo: brand your app - the swatches and live preview cycle through a few
   sample brand colors together, in sync, to sell "pick your own colors and
   watch it update everywhere". The surrounding chrome (bar, labels) stays
   zappmeup's own black/white, same as every other demo. */

.demo-brand-screen {
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.demo-brand-swatch {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex: none;
}

.demo-brand-swatch-bg,
.demo-brand-preview {
  animation: demoBrandBg 8s ease-in-out infinite;
}

.demo-brand-swatch-accent,
.demo-brand-preview-btn {
  animation: demoBrandAccent 8s ease-in-out infinite;
}

.demo-brand-preview {
  margin-top: 4px;
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.demo-brand-preview-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
}

.demo-brand-preview-icon svg {
  width: 30px;
  height: 30px;
  color: var(--ink);
}

.demo-brand-preview-btn {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
}

@keyframes demoBrandBg {
  0%, 28% { background-color: #16170a; }
  38%, 61% { background-color: #f4ede1; }
  71%, 94% { background-color: #10242b; }
  100% { background-color: #16170a; }
}

@keyframes demoBrandAccent {
  0%, 28% { background-color: var(--zap); color: var(--zap-ink); }
  38%, 61% { background-color: #d9704a; color: #fff; }
  71%, 94% { background-color: #4fd1c5; color: #062421; }
  100% { background-color: var(--zap); color: var(--zap-ink); }
}

/* Demo: offline & fast */

.demo-signal {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-block;
}

.demo-wifi-on,
.demo-wifi-off {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
}

.demo-wifi-on {
  animation: demoWifiOn 8s ease-in-out infinite;
}

.demo-wifi-off {
  opacity: 0;
  animation: demoWifiOff 8s ease-in-out infinite;
}

@keyframes demoWifiOn {
  0%, 24% { opacity: 1; }
  30%, 93% { opacity: 0; }
  98%, 100% { opacity: 1; }
}

@keyframes demoWifiOff {
  0%, 24% { opacity: 0; }
  30%, 93% { opacity: 1; }
  98%, 100% { opacity: 0; }
}

.demo-offline-banner {
  position: absolute;
  top: 40px;
  left: 10px;
  right: 10px;
  z-index: 4;
  background: var(--ink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 12px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  opacity: 0;
  transform: translateY(-130%);
  animation: demoOfflineBanner 8s ease-in-out infinite;
}

.demo-offline-banner svg {
  width: 15px;
  height: 15px;
  flex: none;
}

@keyframes demoOfflineBanner {
  0%, 22% { opacity: 0; transform: translateY(-130%); }
  28% { opacity: 1; transform: translateY(4%); }
  32%, 42% { opacity: 1; transform: translateY(0); }
  48%, 100% { opacity: 0; transform: translateY(-130%); }
}

.demo-shop {
  margin-top: 34px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-shop-card {
  background: var(--card);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.08);
}

.demo-shop-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.demo-shop-image {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--line);
  flex: none;
}

.demo-shop-info {
  flex: 1;
  min-width: 0;
}

.demo-shop-info strong {
  display: block;
  font-size: 0.72rem;
}

.demo-shop-info span {
  display: block;
  font-size: 0.66rem;
  color: var(--ink-soft);
}

.demo-shop-btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  background: var(--ink);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 999px;
  animation: demoShopTap 8s ease-in-out infinite;
}

@keyframes demoShopTap {
  0%, 53% { transform: scale(1); }
  57% { transform: scale(0.9); }
  62%, 100% { transform: scale(1); }
}

.demo-shop-tap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  animation: demoShopRipple 8s ease-in-out infinite;
}

@keyframes demoShopRipple {
  0%, 52% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  57% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

.demo-speed-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: var(--zap);
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  animation: demoSpeedChip 8s ease-in-out infinite;
}

.demo-speed-chip svg {
  width: 14px;
  height: 14px;
  flex: none;
}

@keyframes demoSpeedChip {
  0%, 46% { opacity: 0; transform: translateY(6px); }
  52%, 90% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(6px); }
}

/* Responsive */

@media (max-width: 980px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }

  .hero-visual-col {
    order: -1;
    margin-bottom: 12px;
  }

  .phone {
    width: 220px;
    height: 460px;
  }

  .features,
  .steps,
  .compare,
  .pricing {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 760px) {
  .nav-links,
  .nav > .wrap > .nav-actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-mobile.open {
    display: flex;
  }

  .hero {
    padding: 48px 0 40px;
  }

  .features,
  .steps,
  .compare,
  .pricing,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 64px 0;
  }

  .cta-banner {
    padding: 48px 24px;
  }

  .feature-modal {
    padding: 16px;
  }

  .feature-modal-panel {
    padding: 30px 20px;
  }

  .demo-phone {
    width: 180px;
    height: 380px;
  }
}

/* Client dashboard shell */

.dash {
  display: flex;
  min-height: 100vh;
  background: var(--paper);
}

.dash-sidebar {
  width: 264px;
  flex: none;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.dash-sidebar-top {
  padding: 4px 8px 20px;
}

.dash-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
  color: #fff;
}

.dash-logo-glyph {
  height: 30px;
  width: auto;
  flex: none;
}

/* App switcher */

.dash-switcher {
  position: relative;
  margin-bottom: 20px;
}

.dash-app-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--on-dark-line);
  cursor: pointer;
  text-align: left;
  color: #fff;
  font-family: inherit;
}

.dash-app-card:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dash-app-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--zap);
  color: var(--zap-ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.78rem;
  flex: none;
  overflow: hidden;
}

.dash-app-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-app-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dash-app-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-app-url {
  font-size: 0.74rem;
  color: var(--on-dark-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-app-devices {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--on-dark-soft);
  flex: none;
}

.dash-app-devices svg {
  width: 14px;
  height: 14px;
}

.dash-switcher-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-switcher-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dash-switcher-row form {
  flex: none;
}

.dash-switcher-item {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-switcher-delete {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.dash-switcher-delete svg {
  width: 15px;
  height: 15px;
}

.dash-switcher-delete:hover {
  background: #fdecec;
  color: #b3261e;
}

.dash-switcher-item:hover,
.dash-switcher-item.is-active {
  background: var(--primary-tint);
}

.dash-switcher-add {
  margin-top: 4px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.dash-switcher-add:hover {
  background: var(--primary-tint);
}

.dash-app-empty {
  margin-bottom: 20px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--on-dark-line);
  text-align: center;
}

.dash-app-empty p {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--on-dark-soft);
}

.dash-app-empty-btn {
  width: 100%;
}

/* Sidebar nav */

.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  color: var(--on-dark-soft);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

.dash-nav-item > svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.dash-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.dash-nav-item.is-active {
  background: rgba(237, 232, 32, 0.12);
  color: #fff;
}

.dash-nav-item.is-active .dash-nav-icon {
  color: var(--zap);
}

.dash-nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(255, 255, 255, 0.08);
}

.dash-nav-icon svg {
  width: 15px;
  height: 15px;
}

.dash-soon {
  display: inline-block;
  padding: 2px 10px 0 38px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Sidebar bottom */

.dash-sidebar-bottom {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--on-dark-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.dash-account:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dash-account-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--zap);
  color: var(--zap-ink);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex: none;
}

.dash-account-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}

.dash-logout-form {
  padding: 0 10px;
}

.dash-logout {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--on-dark-soft);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
}

.dash-logout:hover {
  color: #fff;
}

/* Main area */

.dash-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* On desktop this is a plain passthrough (matches .dash-main's own column
   flow exactly, so it's invisible there). On mobile (see media query below)
   it becomes the ONLY scrolling region, so the bottom nav - now a normal
   block instead of position:fixed - can sit outside it and never move. */
.dash-scroll {
  display: flex;
  flex-direction: column;
}

.dash-topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 20px 32px;
  background: var(--ink);
  color: #fff;
}

.dash-page-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  color: #fff;
}

.dash-back-link svg {
  width: 20px;
  height: 20px;
}

.dash-topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Every header is the same height: the title row is always at least as tall
   as the Dashboard's 38px refresh button, and header buttons (+ New, Send now,
   Save changes) are exactly 38px whether they're a link or a <button>. */
.dash-page-title {
  min-height: 38px;
}
.dash-topbar-actions .btn:not(.dash-csv-btn) {
  height: 38px;
  padding: 0 16px;
  font-size: 0.88rem;
}

/* Shown only in standalone (installed) mode, where the dashboard PWA has no
   browser reload button of its own. */
.dash-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface, rgba(255, 255, 255, 0.06));
  color: inherit;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  cursor: pointer;
}
.dash-refresh-btn:active { transform: scale(0.94); }
/* Hidden in a browser tab (it has its own reload button); shown in the installed
   app straight from CSS, so it's there on the very first paint - an Alpine x-show
   would pop it in a beat later on every page (a flash in the topbar). */
.dash-refresh-btn { display: none; }
@media (display-mode: standalone) {
  .dash-refresh-btn { display: inline-flex; }
}
.dash-refresh-btn.is-standalone,
.dash-refresh-btn.is-update-ready { display: inline-flex; }
/* "Update ready" dot on the refresh button - a newer deploy is waiting (see
   dashboardShell.watchFreshness). */
.dash-refresh-btn { position: relative; }
.dash-refresh-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--zap);
  box-shadow: 0 0 0 2px var(--ink);
}
.dash-refresh-btn svg { width: 19px; height: 19px; }
/* Shown in place of the arrow once tapped, until the reload lands. */
.dash-refresh-check { color: var(--zap); }

.dash-csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.dash-csv-btn svg {
  width: 16px;
  height: 16px;
}

.dash-range {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-dark-soft);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

/* 7d / 30d / 90d segmented range selector on App Metrics. */
.dash-range-select {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.dash-range-opt {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-dark-soft);
  text-decoration: none;
  white-space: nowrap;
}
.dash-range-opt:hover { color: var(--on-dark); }
.dash-range-opt.is-active {
  background: var(--zap);
  color: var(--ink);
}

/* App Metrics controls, on the page (white) rather than in the dark header. */
.metrics-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.metrics-range {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #efede4;
}
.metrics-range-opt {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.metrics-range-opt:hover { color: var(--ink); }
.metrics-range-opt.is-active {
  background: var(--zap);
  color: var(--zap-ink);
}
.metrics-download {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.metrics-download:hover { border-color: var(--ink); }
.metrics-download svg { width: 16px; height: 16px; }
.metrics-download.is-preparing { cursor: progress; opacity: 0.75; }
.metrics-download.is-preparing svg { animation: btn-spin 0.9s linear infinite; }
.metrics-dates {
  margin: 10px 2px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.dash-content {
  padding: 32px;
  flex: 1;
}

.dash-messages {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Every message may have been routed elsewhere (e.g. the Verify step's failures,
   which show inside its dialog) - don't leave an empty box behind. */
.dash-messages:not(:has(li)) {
  display: none;
}

.dash-message {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  background: #eafbea;
  color: #1e7e34;
}

.dash-message-error {
  background: #fdecec;
  color: #b3261e;
}

.dash-install-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-top: 20px;
  background: var(--ink);
  border-radius: var(--radius-lg);
}

.dash-install-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-install-banner-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}

.dash-install-banner .dash-field-hint {
  font-size: 0.78rem;
  color: var(--on-dark-soft);
}

.dash-install-banner-dismiss {
  flex: none;
  background: transparent;
  border: none;
  color: var(--on-dark-soft);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.dash-install-banner-dismiss:hover {
  color: #fff;
}

/* Stat cards */

.dash-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.dash-stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dash-stat-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ink);
}

.dash-help {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}

/* Placed by helpTip.place() in zappmeup-alpine.js - fixed so a card's
   overflow: hidden can't clip it, and kept inside the screen. */
.dash-help-tip {
  position: fixed;
  left: 0;
  top: 0;
  width: max-content;
  max-width: min(240px, calc(100vw - 24px));
  background: var(--ink);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  /* Visible edge on the black .dash-card, where the tip's own black disappears. */
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 1000;
  cursor: default;
}

.dash-help-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}

.dash-help-tip.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--ink);
}

/* Chart panel */

.dash-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px;
}

.dash-panel-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  text-align: center;
}

.dash-panel-title {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-panel-value {
  font-size: 2rem;
  font-weight: 800;
}

.dash-chart {
  position: relative;
  min-height: 260px;
}

.dash-chart-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.dash-chart-grid span {
  display: block;
  border-top: 1px solid var(--line);
}

.dash-chart-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  height: 220px;
  padding: 0 8px;
}

.dash-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}

.dash-chart-bar {
  position: relative;
  width: 100%;
  max-width: 48px;
  background: var(--zap);
  border-radius: 6px 6px 0 0;
  transform-origin: bottom;
  /* Grow in once and STAY full - no looping back to zero, so a glance is
     never mistaken for "no data". The easeOutQuint curve shoots most of the
     way up almost immediately, then eases into place. */
  animation: dashChartBarGrow 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes dashChartBarGrow {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

.dash-chart-label {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.dash-chart-bar-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.dash-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 0 40px;
}

.dash-chart-empty p {
  margin: 0;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
}

.dash-chart-empty span {
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 360px;
}

/* Placeholder pages */

.dash-placeholder {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 60px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 40px auto;
}

.dash-placeholder-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-placeholder h2 {
  margin: 4px 0 0;
  font-size: 1.3rem;
}

.dash-placeholder p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .dash-stats {
    grid-template-columns: 1fr;
  }
}

/* Pinned "+ New" pill and its list spacer are phone-only (see media query below). */
.dash-fab,
.dash-fab-spacer {
  display: none;
}

/* Bottom tab bar (mobile only - see media query below) */

.dash-bottom-nav {
  display: none;
}

@media (max-width: 860px) {
  .dash-sidebar {
    display: none;
  }

  /* App-shell layout: .dash is pinned to exactly the visible viewport
     height (via the height:100% chain above) and never scrolls itself.
     .dash-scroll is the ONLY scrolling region (topbar + content scroll
     away together, same as before), and .dash-bottom-nav - now a normal
     block instead of position:fixed - just sits below it, guaranteed
     never to move or develop a gap, since it's not "positioned" against
     a viewport at all, just laid out in a container that can't move. */
  .dash {
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .dash-main {
    overflow: hidden;
    min-height: 0;
  }

  .dash-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dash-topbar {
    padding: 16px 20px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }

  .dash-page-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dash-topbar-actions {
    flex: none;
    /* flex:none sizes the row to its content, so without a cap it never
       actually wraps - it just ran off the right edge (App Metrics). */
    max-width: 100%;
    /* The segmented range selector + download button + date-range chip
       together are wider than a phone screen - wrapping the chip onto its
       own line beats it running off the right edge. */
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 10px;
  }

  /* Icon-only on mobile - with its label, this button (plus the date-range
     chip next to it) was wide enough to squeeze the page title down to
     almost nothing, since the title is the only side allowed to shrink. */
  .dash-csv-btn {
    padding: 10px;
  }

  .dash-csv-label {
    display: none;
  }

  .dash-content {
    padding: 20px;
  }

  /* On phones the Send page's + New lives in the pinned pill below, not the header. */
  .dash-desktop-only {
    display: none;
  }

  /* Pinned "+ New" pill: anchored to the bottom of .dash-main, which ends right
     where the bottom nav starts, so it sits just above the nav and doesn't move
     while the list scrolls. Centered with auto margins, not a transform, so the
     .btn hover lift can't knock it off center. */
  .dash-main {
    position: relative;
  }
  .dash-fab {
    display: inline-flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    width: fit-content;
    margin: 0 auto;
    z-index: 20;
    padding: 11px 22px;
    font-size: 0.92rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  }
  .dash-fab-spacer {
    display: block;
    height: 64px;
  }

  .dash-bottom-nav {
    display: flex;
    flex: none;
    background: var(--ink);
    border-top: 1px solid var(--on-dark-line);
    padding: 10px 4px calc(30px + env(safe-area-inset-bottom, 0px));
  }

  .dash-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px;
    border-radius: var(--radius-sm);
    color: var(--on-dark-soft);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
  }

  .dash-bottom-nav-item svg {
    width: 24px;
    height: 24px;
  }

  .dash-bottom-nav-item.is-active {
    color: var(--zap);
  }
}

/* Numeric unread badge on a nav icon (e.g. Alerts on the mobile bottom bar). */
.dash-nav-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--zap);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 0.6rem;
  font-weight: 800;
  box-sizing: border-box;
}

/* Right-aligned unread count at the end of a sidebar nav row (desktop Alerts). */
.dash-nav-count {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--zap);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 800;
  box-sizing: border-box;
}

/* Push notification list */

.dash-notif-list {
  display: flex;
  flex-direction: column;
}

.dash-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--on-dark-line);
}

.dash-notif-row-clickable {
  cursor: pointer;
}

.dash-notif-row-clickable:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dash-notif-row:last-child {
  border-bottom: none;
}

.dash-notif-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.dash-notif-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-notif-meta {
  font-size: 0.82rem;
  color: var(--on-dark-soft);
}

/* Inbox preview (subscriber login/signup + list) */

.dash-inbox-auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}

.dash-inbox-auth-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.dash-inbox-auth-error {
  color: #b3261e;
  font-size: 0.82rem;
}

.dash-inbox-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin-bottom: 16px;
  border: none;
  background: none;
  color: var(--on-dark-soft);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.dash-inbox-detail-back:hover {
  color: #fff;
}

.dash-inbox-detail-back svg {
  width: 16px;
  height: 16px;
}

.dash-inbox-detail-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin-bottom: 12px;
}

.dash-inbox-detail-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
}

.dash-inbox-detail-body {
  margin: 0 0 18px;
  color: var(--on-dark-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.dash-inbox-list {
  display: flex;
  flex-direction: column;
}

.dash-inbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--on-dark-line);
  cursor: pointer;
}

.dash-inbox-row:last-child {
  border-bottom: none;
}

.dash-inbox-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dash-inbox-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--zap);
  color: var(--zap-ink);
}

.dash-inbox-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-inbox-avatar svg {
  width: 19px;
  height: 19px;
}

.dash-inbox-avatar.dash-status-icon {
  width: 28px;
  height: 28px;
}

.dash-inbox-avatar.dash-status-icon svg {
  width: 14px;
  height: 14px;
}

.dash-inbox-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.dash-inbox-row-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
}

.dash-inbox-row-body {
  font-size: 0.85rem;
  color: var(--on-dark-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dash-inbox-row-time {
  flex: none;
  font-size: 0.74rem;
  color: var(--on-dark-soft);
  white-space: nowrap;
  padding-top: 4px;
}

.dash-inbox-row-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--zap);
}

.dash-inbox-row-read .dash-inbox-row-title {
  font-weight: 500;
  color: var(--on-dark-soft);
}

.dash-inbox-row-read .dash-inbox-avatar {
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark-soft);
}

.dash-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  flex: none;
}

.dash-status-badge.is-draft {
  background: var(--line);
  color: var(--ink-soft);
}

.dash-status-badge.is-scheduled {
  background: var(--primary-tint);
  color: var(--primary-dark);
}

.dash-status-badge.is-sending {
  background: var(--primary-tint);
  color: var(--primary-dark);
}

.dash-status-badge.is-sent {
  background: rgba(23, 178, 106, 0.12);
  color: var(--success);
}

.dash-notif-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.dash-notif-action-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.dash-notif-action-btn svg {
  width: 16px;
  height: 16px;
}

.dash-notif-action-btn:hover {
  background: var(--primary-tint);
  color: var(--primary-dark);
}

.dash-notif-action-danger:hover {
  background: #fdecec;
  color: #b3261e;
}

/* Push notification builder */

.dash-builder {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}

.dash-builder-preview {
  position: sticky;
  top: 32px;
  display: flex;
  justify-content: center;
}

.push-preview-phone {
  width: 280px;
  height: 580px;
  background: var(--ink);
  border-radius: 44px;
  padding: 14px;
  box-shadow: var(--shadow);
  flex: none;
}

.push-preview-screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, #14142b, #0a0a18);
  position: relative;
  padding: 60px 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.push-preview-time {
  font-size: 3rem;
  font-weight: 300;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}

.push-preview-date {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  margin-bottom: 28px;
}

.push-preview-banner {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 12px 14px;
  color: #fff;
}

.push-preview-banner-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.push-preview-banner-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--zap);
  color: var(--zap-ink);
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 800;
  flex: none;
}

.push-preview-banner-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.push-preview-banner-app {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.push-preview-banner-time {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  flex: none;
}

.push-preview-banner-title {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.push-preview-banner-text {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.dash-builder-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.dash-card {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--on-dark-line);
}

.dash-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--zap);
  color: var(--zap-ink);
  display: grid;
  place-items: center;
  flex: none;
}

.dash-card-icon svg {
  width: 19px;
  height: 19px;
  stroke-width: 2.4;
}

.dash-card-heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dash-card-title {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.dash-card-sub {
  font-size: 0.82rem;
  color: var(--on-dark-soft);
}

.dash-recipient-pill {
  background: var(--zap);
  color: var(--zap-ink);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  flex: none;
}

.dash-card-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-tabs {
  display: inline-flex;
  background: var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
  gap: 2px;
}

.dash-tab {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  padding: 8px 20px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.dash-tab.is-active {
  background: var(--zap);
  color: var(--zap-ink);
}

.dash-field-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.dash-field-label:not(:first-child) {
  margin-top: 10px;
}

.dash-field-hint {
  font-size: 0.78rem;
  color: var(--on-dark-soft);
  margin-top: -2px;
}

.dash-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

.dash-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

.dash-file-input {
  font-size: 0.85rem;
  color: var(--on-dark-soft);
  font-family: inherit;
}

.dash-recipients-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--on-dark-line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-dark-soft);
}

.dash-recipient-chip svg {
  width: 14px;
  height: 14px;
}

.dash-add-filter {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.dash-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--on-dark-line);
}

.dash-toggle {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  padding: 3px;
  cursor: pointer;
  flex: none;
  transition: background 0.15s ease;
}

.dash-toggle.is-on {
  background: var(--zap);
}

.dash-toggle-knob {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.dash-toggle.is-on .dash-toggle-knob {
  transform: translateX(18px);
}

.dash-schedule-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.dash-schedule-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-dark-soft);
}

@media (max-width: 860px) {
  .dash-builder {
    grid-template-columns: 1fr;
  }

  .dash-builder-preview {
    position: static;
  }

  .push-preview-phone {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* Floating "enable notifications" prompt for installed visitors */

.notify-enable-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  border: none;
  background: var(--zap);
  color: var(--zap-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.notify-enable-btn:hover {
  background: var(--zap-dim);
}

/* Dashboard home */

.dash-welcome {
  margin-bottom: 24px;
}

.dash-welcome h2 {
  margin: 0 0 4px;
  font-size: 1.4rem;
}

.dash-welcome p {
  margin: 0;
  color: var(--ink-soft);
}
.dash-app-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
.dash-app-heading .dash-app-title {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.dash-view-app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.dash-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.dash-quick-action {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.dash-quick-action:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.dash-quick-action-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

/* Same reset as .dash-quick-action-btn, but for a submit button NESTED
   inside a .dash-card (the card's own background already comes from the
   form wrapping it) - sharing .dash-quick-action-btn here would win the
   cascade over .dash-card on elements where that class sits on the card
   itself (Notifications), wiping out its black background. */
.dash-quick-action-submit {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.dash-quick-action-btn:disabled {
  cursor: default;
}

.dash-quick-action-btn:disabled:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* Image uploads (push notification builder) */

.dash-card .dash-help {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

.dash-field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dash-upload-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed var(--on-dark-line);
  cursor: pointer;
}

.dash-upload-row:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dash-upload-preview {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  margin-right: auto;
}

.dash-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-upload-btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--zap);
  color: var(--zap-ink);
  font-weight: 700;
  font-size: 0.82rem;
  flex: none;
}

/* Reopens the zoom/drag editor on the saved icon (settingsMyPwaForm.adjustCurrentIcon). */
.dash-upload-adjust {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  border: 1px solid var(--on-dark-line);
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  flex: none;
  cursor: pointer;
}

.dash-upload-adjust:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

/* My App > App Details: "Connected with Squarespace" + Disconnect. */
.dash-sq-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.dash-icon-scale {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--on-dark-line);
}

.dash-icon-scale-preview {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  flex: none;
  background: rgba(255, 255, 255, 0.06);
  cursor: grab;
  touch-action: none;
}

.dash-icon-scale-preview:active {
  cursor: grabbing;
}

.dash-icon-scale-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Editor previews show the Background color that fills the margin when zoomed
   below 100% (--icon-bg is set on the form by settingsMyPwaForm). */
.dash-icon-editing {
  background: var(--icon-bg, rgba(255, 255, 255, 0.06));
}

.dash-icon-scale-control {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-zoom-slider {
  width: 100%;
  accent-color: var(--zap);
}

/* Settings: My App */

.dash-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-color-input {
  width: 42px;
  height: 42px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--on-dark-line);
  background: none;
  cursor: pointer;
  flex: none;
}

/* Settings: Get Started */

.dash-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-checklist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  color: var(--on-dark-soft);
  font-weight: 600;
}

.dash-checklist-item.is-done {
  color: #fff;
}

.dash-checklist-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--on-dark-line);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--zap-ink);
}

.dash-checklist-item.is-done .dash-checklist-mark {
  background: var(--zap);
  border-color: var(--zap);
}

.dash-checklist-mark svg {
  width: 13px;
  height: 13px;
}

/* Settings: Danger Zone */

.dash-card-danger {
  border-color: rgba(224, 82, 82, 0.4);
}

.dash-card-icon-danger {
  background: #fdecec;
  color: #b3261e;
}

.dash-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dash-danger-row strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
}

.dash-danger-btn {
  background: transparent;
  border: 1px solid #e05252;
  color: #ff8080;
  flex: none;
}

.dash-danger-btn:hover {
  background: rgba(224, 82, 82, 0.15);
}

.dash-danger-row + .dash-danger-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--on-dark-line);
}

/* App ID / API key display */

.dash-embed-row {
  display: flex;
}

.dash-embed-code {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--on-dark-line);
  color: #fff;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.82rem;
  overflow-x: auto;
  white-space: nowrap;
}

/* Get Started: resend action */

.dash-checklist-item {
  flex-wrap: wrap;
}

.dash-checklist-label {
  flex: 1;
  color: inherit;
  text-decoration: none;
}

a.dash-checklist-label:hover {
  text-decoration: underline;
}

.dash-checklist-item.is-clickable {
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.dash-checklist-item.is-clickable:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dash-checklist-action {
  flex: none;
}

.dash-checklist-resend {
  background: none;
  border: none;
  color: var(--zap);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
}

.dash-checklist-resend:hover {
  text-decoration: underline;
}

/* Install widget preview */

.dash-widget-preview {
  padding: 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--on-dark-line);
}

.dash-widget-preview .install-prompt {
  margin: 0;
  animation: none;
}

.dash-widget-preview .install-icon {
  color: var(--zap);
}

/* Billing */

.dash-plan-amount {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin: 12px 0 16px;
}

.dash-plan-amount span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--on-dark-soft);
}

.dash-plan-features {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-plan-features li {
  font-size: 0.85rem;
  color: var(--on-dark-soft);
  padding-left: 20px;
  position: relative;
}

.dash-plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--zap);
}

.dash-plan-current {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

.dash-quick-actions .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.dash-quick-actions .btn[disabled]:hover {
  transform: none;
}

/* Feature showcase carousel (sales page, under the hero) */

.fc-carousel {
  position: relative;
}

.fc-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fc-track::-webkit-scrollbar { display: none; }

.fc-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  background: #f7f6ef;
  padding: 48px;
  min-height: 400px;
}

@media (max-width: 760px) {
  .fc-slide {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    text-align: center;
    min-height: 0;
  }
  .fc-slide-caption { order: 2; }
  .fc-slide-shot { order: 1; }
}

.fc-slide-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--zap-ink);
  background: var(--zap);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}

@media (max-width: 760px) {
  .fc-slide-tag { margin-left: auto; margin-right: auto; }
}

.fc-slide-title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  text-wrap: balance;
}

.fc-slide-body {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: 0;
  max-width: 380px;
}

@media (max-width: 760px) {
  .fc-slide-body { max-width: none; margin-left: auto; margin-right: auto; }
}

.fc-slide-shot {
  display: flex;
  justify-content: center;
}

.fc-phone {
  width: 220px;
  height: 400px;
  background: #58585f;
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 30px 55px -18px rgba(20,20,10,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  flex: none;
}

.fc-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}

.fc-phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  z-index: 2;
}

.fc-phone-statusbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 2px;
  color: rgba(255,255,255,0.9);
}
.fc-phone-time {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.fc-phone-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fc-phone-icons svg {
  display: block;
}

/* fc slide: install */
.fc-mock-install {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
}
.fc-mock-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--zap), var(--zap-dim));
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--zap-ink);
  font-size: 1.3rem;
  animation: fcIconPulse 3s ease-in-out infinite alternate;
}
@keyframes fcIconPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.07); }
}
.fc-mock-line {
  height: 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.32);
  max-width: 100%;
}
.fc-mock-steps {
  width: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fc-mock-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-mock-step-num {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  animation: fcBadgePop 6s ease-out infinite;
}
@keyframes fcBadgePop {
  0%, 20% { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); transform: scale(1); }
  24% { background: var(--zap); color: var(--zap-ink); transform: scale(1.2); }
  32%, 100% { background: var(--zap); color: var(--zap-ink); transform: scale(1); }
}
.fc-mock-step-line {
  width: 0;
  animation: fcStepFill 6s ease-out infinite;
}
@keyframes fcStepFill {
  0%, 8% { width: 0; }
  20%, 100% { width: var(--w); }
}

/* fc slide: customize */
.fc-mock-customize {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
}
.fc-customize-screen {
  animation: fcCustomizeBg 8s ease-in-out infinite;
}
@keyframes fcCustomizeBg {
  0%, 23% { background: #0a0a0a; }
  25%, 48% { background: #7a3b12; }
  50%, 73% { background: #143d2b; }
  75%, 98% { background: #241a4d; }
  100% { background: #0a0a0a; }
}
.fc-mock-customize-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--zap);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.fc-mock-customize-btn {
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.24);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.fc-mock-swatches {
  position: relative;
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.fc-mock-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.fc-mock-swatch-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: fcRingMove 8s ease-in-out infinite;
}
@keyframes fcRingMove {
  0%, 23% { transform: translateX(0); }
  25%, 48% { transform: translateX(24px); }
  50%, 73% { transform: translateX(48px); }
  75%, 98% { transform: translateX(72px); }
  100% { transform: translateX(0); }
}

/* fc slide: push notifications */
.fc-mock-push {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  gap: 10px;
}
.fc-mock-notif {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: fcNotifDrop 3.5s ease-in-out infinite;
}
.fc-mock-notif:nth-child(2) { animation-delay: 0.3s; opacity: 0.75; }
@keyframes fcNotifDrop {
  0%, 12% { transform: translateY(-6px); opacity: 0; }
  22%, 88% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.fc-mock-notif-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--zap);
  position: relative;
}
.fc-mock-notif-icon::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--ink);
  animation: fcPingDot 1.8s ease-in-out infinite;
}
@keyframes fcPingDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}
.fc-mock-notif-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}

/* fc slide: promo banner */
.fc-mock-promo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}
.fc-mock-promo-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--zap), var(--zap-dim));
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: fcBannerBob 3s ease-in-out infinite;
}
@keyframes fcBannerBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.fc-mock-promo-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: fcShimmerSweep 3s ease-in-out infinite;
}
@keyframes fcShimmerSweep {
  0% { left: -60%; }
  60%, 100% { left: 120%; }
}
.fc-mock-promo-headline {
  font-weight: 800;
  color: var(--zap-ink);
  font-size: 0.85rem;
}
.fc-mock-promo-cta {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(26,26,5,0.7);
}

/* fc slide: app metrics */
.fc-mock-metrics {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  gap: 16px;
}
.fc-mock-metrics-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fc-mock-metrics-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}
.fc-mock-metrics-label {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fc-mock-chart {
  flex: 1;
  height: 110px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-bottom: 4px;
}
.fc-bar {
  flex: 1;
  height: 100%;
  background: linear-gradient(180deg, var(--zap), var(--zap-dim));
  border-radius: 4px 4px 0 0;
  animation: fcBarGrow 2.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: bottom;
}
@keyframes fcBarGrow {
  0% { transform: scaleY(0.05); opacity: 0.6; }
  100% { transform: scaleY(var(--h)); opacity: 1; }
}

/* fc controls */
.fc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}

.fc-arrow-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fc-arrow-btn:hover { background: var(--primary-tint); border-color: var(--primary-tint); }
.fc-arrow-btn svg { width: 16px; height: 16px; }

.fc-dots {
  display: flex;
  gap: 8px;
}

.fc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.fc-dot.active {
  background: var(--zap-dim);
  transform: scale(1.3);
}

/* A comment's like/reply row - a class, not an inline style, because it
carries x-show and starts visible. Alpine's x-show only remembers an
element's original inline display value the first time it hides something;
one that's visible from the very first render never gets that capture, so
Alpine resets its inline display to '' and it falls back to a bare div's
default (block), stacking instead of staying in a row. A class-based
display isn't touched by that reset. */
.zapp-comment-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
}

/* ---- Admin dashboard (zappmeup_admin.html) ---- */
.btn-sm {
  padding: 7px 14px;
  font-size: 0.82rem;
}

.dash-app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.dash-app-owner {
  font-size: 0.74rem;
  color: var(--zap);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-search {
  width: 100%;
}

.dash-empty {
  color: var(--on-dark-soft);
  font-size: 0.88rem;
  text-align: center;
  padding: 16px 0 4px;
}

/* The all-sites header holds a title and a create button side by side. */
.dash-card-head .btn-sm {
  flex: none;
}

/* The + icon on the toggle rotates 45deg into an x when the panel is open,
   so the button clearly reads as a close affordance. */
.dash-toggle-icon {
  transition: transform 0.2s ease;
}

.dash-toggle-icon.is-open {
  transform: rotate(45deg);
}

.dash-create-site {
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
}

.dash-create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dash-create-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}

.dash-create-close {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 2px;
  color: var(--on-dark-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 6px;
}

.dash-create-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* Scrollable, fzf-style user list for "create a website for a user". */
.dash-picker-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.dash-picker-item {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dash-picker-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.dash-picker-item.is-chosen {
  border-color: var(--zap);
}

.dash-picker-name {
  font-weight: 600;
  font-size: 0.88rem;
}

.dash-picker-sub {
  font-size: 0.74rem;
  color: var(--on-dark-soft);
}

/* Banner on the setup page when an admin edits a site they don't own. */
.dash-admin-banner {
  background: var(--zap);
  color: var(--zap-ink);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.dash-admin-banner a {
  color: var(--zap-ink);
  font-weight: 700;
  margin-left: 8px;
}

/* ---- Billing page (billing.html) ---- */
.dash-notice {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--on-dark-line);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.dash-billing-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}

.dash-price {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 2px;
}

.dash-price-per {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--on-dark-soft);
  margin-left: 2px;
}

.dash-plan-features {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-plan-features li {
  font-size: 0.86rem;
  color: var(--on-dark-soft);
  padding-left: 22px;
  position: relative;
}

.dash-plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--zap);
  border-bottom: 2px solid var(--zap);
  transform: rotate(-45deg);
}

.dash-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-usage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.dash-usage-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
}

.dash-usage-count {
  font-size: 0.85rem;
  color: var(--on-dark-soft);
  font-variant-numeric: tabular-nums;
}

.dash-usage-count.is-over {
  color: #ffb4b4;
  font-weight: 700;
}

.dash-usage-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.dash-usage-bar span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: 999px;
  background: var(--zap);
}

/* ---- Admin Customers tab ---- */
.dash-customer {
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
}

.dash-customer-head {
  margin-bottom: 10px;
}

.dash-customer-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.dash-limit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
  color: var(--on-dark-soft);
}

.dash-limit-field .dash-input {
  width: 110px;
}

.dash-custom-badge {
  display: inline-block;
  background: var(--zap);
  color: var(--zap-ink);
  font-weight: 700;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  margin: 0 2px;
}


/* Admin customer handover page: a site's QR beside its install link. Wraps so
   the QR stacks above the text on a phone (the walk-in flow is run on one). */
.dash-handover {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.dash-handover-qr {
  flex: none;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 8px;
}

.dash-handover-info {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-handover-link {
  color: #fff;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.dash-handover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Terms/ownership checkboxes on the walk-in owner's account-setup page sit in an
   .auth-form, whose text-input padding would otherwise land on them too. */
.auth-form .wiz-check input { padding: 0; }
.auth-form .wiz-check .wc-text { font-weight: 400; overflow-wrap: anywhere; }

/* Billing page "Talk to sales" menu (see salesContact) - opens in place under the
   button rather than floating, so the card can never clip it. */
.sales-menu {
  margin-top: 10px;
  padding: 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--on-dark-line);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
}
.sales-menu-label {
  margin: 6px 10px 8px;
  font-size: 0.78rem;
  color: var(--on-dark-soft);
}
.sales-menu-item {
  display: block;
  width: 100%;
  padding: 12px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sales-menu-item:hover,
.sales-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

/* Clear the mobile dashboard's fixed bottom nav when the menu scrolls itself into
   view (salesContact.toggle); harmless extra room elsewhere. */
.sales-menu {
  scroll-margin-bottom: 110px;
}

/* On the public pricing page the Storm card is light, not dark. */
.price-card:not(.featured) .sales-menu {
  border-color: var(--line);
  background: var(--paper);
}

.price-card:not(.featured) .sales-menu-label {
  color: var(--ink-soft);
}

.price-card:not(.featured) .sales-menu-item {
  color: var(--ink);
}

.price-card:not(.featured) .sales-menu-item:hover,
.price-card:not(.featured) .sales-menu-item:focus-visible {
  background: rgba(0, 0, 0, 0.05);
}

/* A form button that's redirecting to Stripe (see stripeRedirect): dimmed with a
   small spinner, and unclickable, while Checkout / the portal loads. */
.btn.is-busy {
  opacity: 0.75;
  pointer-events: none;
  cursor: progress;
}

.btn.is-busy::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  vertical-align: -0.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}