/*
 * Copyright (c) 2026 Rachel Gubin Affiliate Consulting, Inc. d/b/a Beacon Helps.
 * All rights reserved. Proprietary and confidential.
 * Unauthorized copying, modification, distribution, or use is prohibited.
 */

:root {
  /* Generic page tokens (used by privacy/terms/support/index) */
  --fg: #111;
  --muted: #555;
  --accent: #2563eb;
  --bg: #fff;
  --border: #e5e5e5;

  /* Beacon brand tokens — single source of truth for branded surfaces.
     Mirrors beacon-mobile/constants/theme.ts. New pages should reference
     these; legacy pages keep their generic tokens above for visual
     continuity. */
  --midnight: #1A1A3E;
  --midnight-deep: #12122E;
  --amber: #F5A623;
  --amber-deep: #D9770A;
  --amber-soft: rgba(245, 166, 35, 0.14);
  --paper: #FAFAF7;
  --paper-on-dark: rgba(250, 250, 247, 0.82);
  --paper-on-dark-secondary: rgba(250, 250, 247, 0.75);
  --paper-on-dark-muted: rgba(250, 250, 247, 0.50);
  --paper-on-dark-dim: rgba(250, 250, 247, 0.40);
  --paper-on-dark-solid: #FAFAF7;
  --line-dark: rgba(250, 250, 247, 0.10);

  /* Brand typography stacks. System fonts only — no web font requests on
     auth pages, since speed matters for the deep-link handoff. */
  --font-serif: "Instrument Serif", "Iowan Old Style", "Apple Garamond",
    Baskerville, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 24px 32px;
}

h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 32px 0 8px;
}

p { margin: 0 0 16px; }

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

ul {
  margin: 0 0 16px;
  padding-left: 24px;
}

li { margin-bottom: 6px; }

.muted {
  color: var(--muted);
  font-size: 0.9rem;
}

.lede { font-size: 1.05rem; }

.tagline {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-style: italic;
  color: var(--midnight);
  letter-spacing: 0.02em;
  margin: -12px 0 24px;
}

footer {
  max-width: 640px;
  margin: 32px auto 64px;
  padding: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}

footer a { margin-right: 16px; }

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

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

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 24px 0 8px;
}

ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: #f4f4f4;
  padding: 1px 5px;
  border-radius: 3px;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 16px;
}

.table-wrap table {
  margin-bottom: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--border);
  vertical-align: top;
}

th {
  background: #f8f8f8;
  font-weight: 600;
}

.summary-box {
  background: var(--amber-soft);
  border-left: 3px solid var(--amber);
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: 4px;
}

.summary-box h2 {
  margin-top: 0;
}

.disclaimer {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Site-wide header / nav */
.site-header {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.site-wordmark {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

.site-wordmark:hover { text-decoration: none; color: var(--fg); }

.site-nav a {
  color: var(--muted);
  font-size: 0.9rem;
  margin-left: 20px;
  text-decoration: none;
}

.site-nav a:hover { color: var(--fg); }

header + main { padding-top: 32px; }

/* Footer nav / address / legal */
.footer-nav { margin-bottom: 16px; }

.footer-nav a { color: var(--muted); margin-right: 16px; text-decoration: none; }

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

.footer-address {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

.footer-address a { color: var(--muted); }

.footer-legal {
  font-size: 0.82rem;
  margin: 0;
}

/* ── Homepage (index.html) ─────────────────────────────────────────
   All rules namespaced under .hp-* or .hp-section / .hp-header.
   These rules do not affect any other page.
   ────────────────────────────────────────────────────────────────── */

/* Layout override: homepage main is full-width with no padding */
main.hp-main { max-width: none; padding: 0; margin: 0; }
.hp-header + main.hp-main { padding-top: 0; }

/* Header ──────────────────────────────────────────────────────────── */

.hp-header {
  background: var(--midnight);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.hp-wordmark {
  font-family: "Inter Tight", var(--font-sans);
  font-size: 1.15rem;
  letter-spacing: 0.3em;
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.hp-wordmark:hover { color: var(--paper); text-decoration: none; }

.hp-header-nav a {
  color: var(--paper-on-dark-secondary);
  font-size: 0.85rem;
  margin-left: 24px;
  text-decoration: none;
}
.hp-header-nav a:hover { color: var(--paper); text-decoration: none; }

.hp-header-cta {
  background: var(--amber);
  color: var(--midnight) !important;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
}
.hp-header-cta:hover { background: var(--amber-deep) !important; text-decoration: none; }

/* The BEACON wordmark. Letters are live text; the A is the lighthouse
   (assets/brand/beacon-a.svg), matching the app's BeaconWordmark. The
   accent belongs to the A, never the O. The image is sized to the
   letters' cap height and sits on the text baseline, so the wordmark
   scales with whatever font-size its container sets. letter-spacing does
   not apply to an image, so the margin supplies the gap after it. */
.wm-a {
  display: inline-block;
  height: 0.72em;
  width: auto;
  vertical-align: baseline;
  margin-right: 0.3em;
}

/* Brand colour helper (period dots in tagline) */
.brand-dot,
.brand-amber { color: var(--amber); }

/* Sections ────────────────────────────────────────────────────────── */

.hp-section { padding: 96px 40px; }
.hp-section--paper    { background: var(--paper);   color: var(--midnight); }
.hp-section--warm     { background: #F4E9CE;         color: var(--midnight); }
.hp-section--midnight { background: var(--midnight); color: var(--paper);    }
.hp-section--center   { text-align: center; }

.hp-section-inner         { max-width: 960px; margin: 0 auto; }
.hp-section-inner--narrow { max-width: 720px; margin: 0 auto; }

/* Kicker */
.hp-kicker {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 16px;
}

/* Section headings */
.hp-h2 {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  color: var(--midnight);
}
.hp-section--midnight .hp-h2 { color: var(--paper); }
.hp-section--center .hp-h2   { text-align: center;  }

.hp-h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--midnight);
}

/* Body text */
.hp-body {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--midnight);
  margin: 0 0 20px;
}
.hp-body--on-dark {
  color: var(--paper-on-dark-secondary);
  max-width: 480px;
  margin: 0 auto 40px;
}

.hp-closing {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: #666;
  margin: 24px 0 0;
  font-style: italic;
}

.hp-letter-body {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--midnight);
  margin: 0 0 24px;
}

/* Hero ─────────────────────────────────────────────────────────────── */

.hp-hero {
  min-height: 85vh;
  display: flex;
  align-items: center;
}

.hp-tagline {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--midnight);
  margin: 0 0 28px;
}

.hp-headline {
  font-family: var(--font-sans);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--midnight);
  margin: 0 0 12px;
  max-width: 640px;
}

.hp-subhead {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--midnight);
  opacity: 0.65;
  margin: 0 0 40px;
  max-width: 520px;
}

/* Waitlist form ───────────────────────────────────────────────────── */

.hp-cta-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 0 12px;
}
.hp-cta-form--centered {
  justify-content: center;
  margin: 0 auto 12px;
}

.hp-cta-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 14px 16px;
  border: 1.5px solid #d0d0d0;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: var(--midnight);
  transition: border-color 0.15s;
}
.hp-cta-input:focus { border-color: var(--amber); }
.hp-section--midnight .hp-cta-input {
  background: rgba(250, 250, 247, 0.08);
  border-color: rgba(250, 250, 247, 0.2);
  color: var(--paper);
}
.hp-section--midnight .hp-cta-input::placeholder { color: var(--paper-on-dark-muted); }

.hp-cta-btn {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 24px;
  background: var(--amber);
  color: var(--midnight);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.hp-cta-btn:hover { background: var(--amber-deep); }

.hp-cta-note {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: #999;
  margin: 0;
}
.hp-section--midnight .hp-cta-note { color: var(--paper-on-dark-muted); }

.hp-cta-confirm {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--midnight);
  padding: 12px 0;
  margin: 0 0 12px;
  display: none;
}
.hp-cta-confirm--visible  { display: block; }
.hp-cta-confirm--on-dark  { color: var(--paper); }

/* Waitlist error line. Empty and hidden until a submit fails; role="alert"
   on the element announces it. Red is checked at >= 6:1 on both surfaces. */
.hp-cta-status {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: #B42318;
  margin: 0 0 12px;
  display: none;
}
.hp-cta-status--visible { display: block; }
.hp-cta-status--on-dark { color: #FDA29B; }

/* Landmine cards ──────────────────────────────────────────────────── */

.hp-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0;
}

.hp-card {
  background: var(--paper);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  padding: 24px;
}

.hp-card-heading {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 10px;
}

.hp-card-body {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--midnight);
  margin: 0;
}

/* Why tools fail — 3 column ───────────────────────────────────────── */

.hp-col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.hp-col3-item-heading {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--amber);
  margin: 0 0 12px;
}

.hp-col3-item-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--midnight);
  margin: 0;
}

/* How Beacon works — numbered steps ───────────────────────────────── */

.hp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.hp-step-num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--amber);
  line-height: 1;
  margin: 0 0 14px;
}

.hp-step-heading {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--midnight);
  margin: 0 0 10px;
}

.hp-step-body {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--midnight);
  margin: 0;
}

/* Anatomy of a nudge ──────────────────────────────────────────────── */

.hp-nudge-points { margin-top: 32px; }

.hp-nudge-point {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  align-items: flex-start;
}

.hp-nudge-num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--amber);
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
}

.hp-nudge-heading {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--midnight);
  margin: 0 0 6px;
  line-height: 1.2;
}

.hp-nudge-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--midnight);
  margin: 0;
}

/* Voice cards ─────────────────────────────────────────────────────── */

.hp-voice-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.hp-voice-card {
  background: var(--paper);
  border-radius: 8px;
  padding: 28px;
}

.hp-voice-card-heading {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--midnight);
  margin: 0 0 4px;
}

.hp-voice-card-subheading {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  color: #777;
  margin: 0 0 16px;
}

.hp-voice-card-quote {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--midnight);
  font-style: italic;
  margin: 0;
  border-left: 2px solid var(--amber);
  padding-left: 14px;
}

/* Pricing ─────────────────────────────────────────────────────────── */

.hp-pricing-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
  align-items: start;
}

.hp-pricing-card {
  background: var(--paper);
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 36px;
}

.hp-pricing-card--pro {
  background: #F4E9CE;
  border-color: var(--amber);
  border-width: 2px;
}

.hp-pricing-card-name {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--midnight);
  margin: 0 0 10px;
}

.hp-pricing-card-price {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--midnight);
  line-height: 1;
  margin: 0 0 20px;
}

.hp-pricing-card-desc {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--midnight);
  margin: 0 0 16px;
}

.hp-pricing-card-trial {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--midnight);
  margin: 0;
}

.hp-pricing-card-note {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-style: italic;
  color: #666;
  margin: 16px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 16px;
}

.hp-pricing-footnote {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: #999;
  margin-top: 20px;
  text-align: center;
}

/* Privacy section ─────────────────────────────────────────────────── */

.hp-privacy-list {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--midnight);
  padding: 0;
  list-style: none;
  margin: 16px 0 24px;
}

.hp-privacy-list li::before {
  content: '—';
  color: var(--amber);
  margin-right: 10px;
}

.hp-privacy-link {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--midnight);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hp-privacy-link:hover { color: var(--amber); text-decoration: underline; }

/* Final CTA wordmark ──────────────────────────────────────────────── */

.hp-cta-wordmark {
  font-family: "Inter Tight", var(--font-sans);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* optical centring: tracking adds space after the N */
  color: var(--paper);
  text-align: center;
  margin: 0 0 40px;
}

/* Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .hp-header { padding: 0 20px; }
  .hp-header-nav a:not(.hp-header-cta) { display: none; }
  .hp-section  { padding: 64px 24px; }
  .hp-hero     { min-height: auto; padding: 80px 24px 64px; }
  .hp-tagline  { font-size: 2.6rem; }
  .hp-h2       { font-size: 1.9rem; }
  .hp-h3       { font-size: 1.4rem; }
  .hp-col3        { grid-template-columns: 1fr; gap: 28px; }
  .hp-card-row    { grid-template-columns: 1fr; }
  .hp-steps       { grid-template-columns: 1fr; }
  .hp-voice-cards { grid-template-columns: 1fr; }
  .hp-pricing-row { grid-template-columns: 1fr; }
  .hp-cta-form    { flex-direction: column; }
  .hp-cta-wordmark { font-size: 1.9rem; }
  .hp-body--on-dark { margin: 0 auto 32px; }
}