/* Public site — landing / pricing / buy (docs/qcf-ui-ux.md §5).
   Tokens and components come from /qcf.css; this file is layout only.

   Tone: reassuring, plain, zero fear-mongering. The hero shows the thesis
   rather than telling it — a live, breathing Status Light beside a warm
   Fraunces headline. */

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--s3);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: 68px;
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--text-small);
}
.site-header nav a {
  color: var(--text-muted);
  text-decoration: none;
}
.site-header nav a:hover {
  color: var(--text);
}
.site-header nav a.portal {
  color: var(--accent-text);
  font-weight: 500;
}

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

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--s5);
  padding: var(--s6) 0 var(--s5);
}
.hero h1 {
  font-size: var(--text-display);
  line-height: 1.15;
  margin: var(--s2) 0 var(--s2);
  max-width: 15ch;
}
.hero .lede {
  margin-bottom: var(--s4);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.hero-visual {
  display: grid;
  place-items: center;
}

/* The reassurance line under the lamp — this is the emotional core of §5, so
   it gets the same treatment as live status in the portal. */
.hero-status {
  margin-top: var(--s2);
  text-align: center;
}
.hero-status .status-line {
  justify-content: center;
  color: var(--accent-text);
}
.hero-status .muted {
  display: block;
  margin-top: 2px;
}

/* ------------------------------------------------------------------ blocks */

section {
  padding: var(--s5) 0;
}
section > h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin: var(--s1) 0 var(--s3);
}

/* Three calm value cards (§5). */
.value-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s2);
}
.value-cards article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3);
  box-shadow: var(--shadow-card);
}
.value-cards h3 {
  margin-bottom: 6px;
}
.value-cards p {
  color: var(--text-muted);
  font-size: var(--text-small);
}
.value-cards .step {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--s2);
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
}

/* Privacy note — Sand-washed, because "we deliberately don't collect this" is
   a warm, reassuring fact, not a warning. */
.privacy {
  background: var(--warm-wash);
  border: 1px solid color-mix(in srgb, var(--warm) 40%, transparent);
  border-radius: var(--radius);
  padding: var(--s4);
}
.privacy h2 {
  font-family: var(--font-display);
  margin-bottom: var(--s1);
}
.privacy p {
  color: var(--text-muted);
  max-width: 68ch;
}

/* ----------------------------------------------------------------- pricing
   Retained while QCF is in private beta and the marketing page shows beta access
   instead of plans. The Stripe endpoints behind these are still live, so these
   rules come back into use the moment pricing is switched on — deleting them now
   would just mean writing them again. */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3);
  box-shadow: var(--shadow-card);
}
.plan.featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}
.plan .tag {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent-text);
  font-size: var(--text-mono);
  font-weight: 500;
}
.plan h3 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
}
.plan .price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.plan .price small {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--text-muted);
}
.plan ul {
  margin: var(--s1) 0 var(--s2);
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--text-muted);
}
.plan li {
  padding-left: 1.35rem;
  position: relative;
  margin-bottom: 4px;
}
.plan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.plan button {
  margin-top: auto;
}

/* Stakes is an add-on toggle, not a plan (§5). Presented as a distinct band so
   it visually cannot be mistaken for a fourth tier. */
.addon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.addon .addon-body {
  flex: 1 1 320px;
}
.addon h3 {
  margin-bottom: 4px;
}
.addon p {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.checkout {
  display: grid;
  gap: var(--s2);
  max-width: 460px;
  margin-top: var(--s3);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
#checkout-status {
  font-size: var(--text-small);
  color: var(--text-muted);
  min-height: 1.25rem;
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--s4);
  padding: var(--s4) 0;
  color: var(--text-muted);
  font-size: var(--text-small);
}
.site-footer .page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
}

/* Post-checkout / post-setup return pages. */
.centered {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--s3);
  text-align: center;
}
.centered .card {
  max-width: 420px;
  display: grid;
  justify-items: center;
  gap: var(--s2);
}

/* ------------------------------------------------------------- responsive
   §11: responsive down to 360px. */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--s3);
    padding: var(--s4) 0;
    text-align: center;
  }
  .hero h1 {
    max-width: none;
    font-size: 2rem;
  }
  .hero .lede {
    margin-inline: auto;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-visual {
    order: -1;
  }
}

@media (max-width: 560px) {
  .page {
    padding: 0 var(--s2);
  }
  .site-header nav {
    gap: var(--s2);
  }
  .site-header nav a:not(.portal) {
    display: none;
  }
  .status-lamp {
    width: 132px;
    height: 132px;
  }
}