/* Marketing site: hero, use-case visuals, relay diagram, CTA band, legal prose, auth card.
   Loaded by the "site" layout. Tokens only. */

/* ============ Hero ============ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(3.5rem, 2rem + 6vw, 7rem);
  background: var(--gradient-hero);
}

.hero .split { gap: var(--space-16); }

.hero h1 {
  font-size: var(--text-5xl);
  line-height: 1.05;
}

.hero .lead { max-width: 34rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }

.hero-copy > * + * { margin-top: var(--space-6); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-xs);
}

.pill .badge { height: 1.375rem; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  list-style: none;
  padding: 0;
}

.trust-row li { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust-row .icon { color: var(--color-success); }

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: var(--space-6);
}

.hero-visual::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gradient-accent);
  opacity: 0.16;
  filter: blur(40px);
}

.float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: min(17rem, 72vw);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.float-card .avatar { width: 2.25rem; height: 2.25rem; }
.float-card strong { display: block; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-semibold); margin-bottom: 2px; }
.float-card.n1 { top: 66%; inset-inline-start: -4%; animation: float 6s var(--ease-in-out) infinite; }
.float-card.n2 { bottom: 13%; inset-inline-end: -4%; animation: float 6s var(--ease-in-out) -3s infinite; }

@media (max-width: 40rem) {
  .float-card.n1 { inset-inline-start: 0; top: 71%; }
  .float-card.n2 { display: none; }
}

@keyframes float {
  50% { transform: translateY(-8px); }
}

.phone-screen .eyebrow { align-self: center; }
.phone-screen .ph-title { text-align: center; font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.phone-screen .ph-sub { text-align: center; color: var(--color-text-muted); font-size: var(--text-xs); margin-top: calc(-1 * var(--space-2)); }
.phone-screen .action-btn { padding: var(--space-3); gap: var(--space-3); border-radius: var(--radius-lg); }
.phone-screen .action-btn .action-icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); }
.phone-screen .action-btn .action-title { font-size: var(--text-sm); }
.phone-screen .action-btn .action-desc { font-size: var(--text-xs); }
.phone-screen .ph-note { margin-top: auto; text-align: center; font-size: 0.6875rem; color: var(--color-text-subtle); }

/* ============ Logos / stats strip ============ */
.stat-strip {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  text-align: center;
}

.stat-strip .stat-value { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.stat-strip .stat-label { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ============ Use cases ============ */
.usecase + .usecase { margin-top: var(--section-y); }
.usecase-copy > * + * { margin-top: var(--space-5); }
.usecase-copy h2 { font-size: var(--text-3xl); }

.check-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.check-list .icon { flex: none; margin-top: 0.15rem; color: var(--color-accent); }
.check-list strong { display: block; }
.check-list span { color: var(--color-text-muted); font-size: var(--text-sm); }

.x-list .icon { color: var(--color-danger); }

.visual-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--radius-2xl);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.visual-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
}

.visual-stage > * { position: relative; }

/* The printed "For sale" sign. Always light: it represents paper. */
.sign-card {
  width: min(19rem, 100%);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--gray-0);
  color: var(--gray-900);
  box-shadow: var(--shadow-lg);
  transform: rotate(-2deg);
  text-align: center;
}

.sign-card .sign-title {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.sign-card .sign-sub { font-size: var(--text-sm); color: var(--gray-600); }
.sign-card svg { width: 11rem; height: 11rem; }
.sign-card .sign-code { font-family: var(--font-mono); font-weight: var(--weight-semibold); letter-spacing: 0.14em; font-size: var(--text-sm); }
.sign-card .sign-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--gray-500); }
.sign-card .sign-foot img { width: 1.25rem; height: 1.25rem; }

.visual-stage .call-screen.is-inline {
  width: min(19rem, 100%);
  min-height: 28rem;
  box-shadow: var(--shadow-lg);
}

.visual-stage .call-avatar { width: 6rem; height: 6rem; }
.visual-stage .call-controls { gap: var(--space-4); padding-bottom: var(--space-8); }
.visual-stage .call-btn .call-btn-circle { width: 3.5rem; height: 3.5rem; }

/* ============ Relay diagram ============ */
.relay {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 52rem) {
  .relay { grid-template-columns: 1fr auto 1.15fr auto 1fr; }
}

.relay-node {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.relay-node h3 { font-size: var(--text-base); }
.relay-node p { font-size: var(--text-sm); color: var(--color-text-muted); }

.relay-node .node-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.relay-node.hub {
  border-color: transparent;
  background: var(--gradient-accent);
  color: var(--gray-0);
  box-shadow: var(--shadow-accent);
}

.relay-node.hub p { color: var(--on-dark-text); }
.relay-node.hub .node-icon { background: var(--on-dark-fill-strong); color: var(--gray-0); }

.relay-link {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: center;
}

.relay-link .line {
  width: 2px;
  height: 2rem;
  background: repeating-linear-gradient(to bottom, var(--color-border-strong) 0 6px, transparent 6px 12px);
}

@media (min-width: 52rem) {
  .relay-link .line {
    width: 4.5rem;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--color-border-strong) 0 6px, transparent 6px 12px);
  }
}

/* ============ Compare (sees / never sees) ============ */
.compare {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.compare .card-body h3 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); font-size: var(--text-lg); }

/* ============ Alert flow (how it works) ============ */
.flow {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  counter-reset: flow;
}

.flow li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.flow .flow-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.flow h3 { font-size: var(--text-base); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.flow p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ============ Lifecycle timeline ============ */
.timeline {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}

.timeline li {
  position: relative;
  padding-block-end: var(--space-8);
  padding-inline-start: var(--space-10);
}

.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.6875rem;
  top: 1.75rem;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}

.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }

.timeline .dot {
  position: absolute;
  inset-inline-start: 0;
  top: 0.125rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
}

.timeline .dot .icon { width: 0.875rem; height: 0.875rem; stroke-width: 2.5; }
.timeline h3 { font-size: var(--text-base); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.timeline p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); max-width: 36rem; }

/* ============ Pricing extras ============ */
.pricing-grid { align-items: stretch; }
.price-head { display: flex; align-items: center; gap: var(--space-2); }
.price-head .icon { color: var(--color-accent); }
.price-head h3 { font-size: var(--text-xl); }
.price-alt { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: calc(-1 * var(--space-3)); }

.included {
  display: grid;
  gap: var(--space-4) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  padding: 0;
}

.included li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.included .icon { color: var(--color-accent); flex: none; margin-top: 0.1rem; }
.included strong { display: block; font-size: var(--text-base); margin-bottom: 2px; }
.included span { color: var(--color-text-muted); }

/* ============ CTA band ============ */
.cta-band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
  justify-content: space-between;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  border-radius: var(--radius-2xl);
  background: radial-gradient(40rem 20rem at 100% 0%, var(--glow-violet), transparent 60%),
    linear-gradient(135deg, var(--brand-700), var(--brand-900));
  color: var(--gray-0);
  box-shadow: var(--shadow-lg);
}

.cta-band h2 { font-size: var(--text-3xl); }
.cta-band p { color: var(--on-dark-text-muted); max-width: 32rem; }

.btn-on-dark {
  --btn-bg: var(--gray-0);
  --btn-fg: var(--brand-800);
  --btn-border: transparent;
  --btn-bg-hover: var(--brand-50);
}

.btn-ghost-on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--gray-0);
  --btn-border: var(--on-dark-border);
  --btn-bg-hover: var(--on-dark-fill);
  box-shadow: none;
}

/* ============ Page hero (inner pages) ============ */
.page-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 3vw, 3.5rem);
  background: var(--gradient-hero);
  text-align: center;
}

.page-hero .container > * + * { margin-top: var(--space-4); }
.page-hero h1 { font-size: var(--text-4xl); }
.page-hero .lead { max-width: 38rem; margin-inline: auto; }

/* ============ FAQ page ============ */
.faq-layout {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
  .faq-layout { grid-template-columns: 12rem minmax(0, 1fr); }
  .faq-toc { position: sticky; top: calc(var(--header-h) + var(--space-6)); align-self: start; }
}

.faq-toc ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (min-width: 60rem) {
  .faq-toc ul { display: grid; gap: var(--space-1); }
}

.faq-toc a {
  display: block;
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

@media (min-width: 60rem) {
  .faq-toc a { border-color: transparent; background: none; }
}

.faq-toc a:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.faq-group + .faq-group { margin-top: var(--space-12); }
.faq-group h2 { font-size: var(--text-2xl); margin-bottom: var(--space-5); scroll-margin-top: calc(var(--header-h) + var(--space-6)); }

/* ============ Legal prose ============ */
.prose {
  max-width: 44rem;
  margin-inline: auto;
  color: var(--color-text);
}

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-12); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-8); }
.prose p,
.prose li { color: var(--color-text-muted); }
.prose strong { color: var(--color-text); }
.prose ul,
.prose ol { padding-inline-start: var(--space-6); display: grid; gap: var(--space-2); }
.prose .table-wrap { margin-top: var(--space-6); }
.prose .table td { white-space: normal; }
.prose .meta { font-size: var(--text-sm); color: var(--color-text-subtle); }

/* ============ Auth ============ */
.auth {
  min-height: calc(100dvh - var(--header-h) - 12rem);
  display: grid;
  place-items: center;
  padding-block: var(--space-16);
  background: var(--gradient-hero);
}

.auth .container { display: grid; justify-items: center; }

.auth-card {
  width: min(26rem, 100%);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.auth-card .auth-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.auth-card h1 { font-size: var(--text-2xl); }
.auth-card .auth-sub { color: var(--color-text-muted); margin-top: var(--space-2); margin-bottom: var(--space-6); font-size: var(--text-sm); }
.auth-card form .btn { margin-top: var(--space-5); }
.auth-card .auth-foot { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.auth-card .alert { margin-bottom: var(--space-5); }

.faq-more { margin-top: var(--space-8); }
.pricing-note { margin-top: var(--space-8); }
.pricing-section { padding-top: var(--space-8); }
.mobile-nav .mobile-theme { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-weight: var(--weight-medium); font-size: var(--text-lg); }