/* AikaGraph marketing site, shared stylesheet
   Palette pulled directly from the product's own "Ancient Parchment" (default
   app theme) and "Fintech Trust" theme definitions, so the marketing site
   visually rhymes with the beta app itself. Ink-on-parchment body, navy/gold
   "high trust" banding for nav/footer/CTAs, matching the raven-clock mark. */

:root {
  /* Ancient Parchment */
  --parchment: #f4eed6;
  --parchment-panel: #ece4cc;
  --ink: #3a2510;
  --ink-mid: #7a5c2a;
  --ink-soft: #6d5125;
  --parchment-border: #928875;
  --ember: #b85020;
  --gold-bridge: #885500;

  /* Fintech Trust */
  --navy: #0a2540;
  --navy-mid: #3b4f63;
  --fintech-bg: #f8fafc;
  --fintech-panel: #eff6ff;
  --gold: #819dc1;
  --violet: #635bff;
  --teal: #0d9488;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-width: 1120px;
}

/* Self-hosted fonts (2026-07-29, same pattern as weseeyouwellness.com's
   2026-07-20 fix): loading Fraunces/Inter via a fonts.googleapis.com <link>
   sends every visitor's IP address to Google. Fonts are vendored under
   assets/fonts/ instead, matching the WSYW precedent. See _Memory lesson. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/fraunces-500.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/fraunces-600.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/fraunces-700.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-500.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/inter-600.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/inter-700.ttf') format('truetype'); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  font-size: 17px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1.1em; color: var(--ink-mid); }

a { color: var(--navy); }
a:hover { color: var(--ember); }

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

/* ---------------------------------------------------------------- nav --- */

.site-header {
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 16px 28px;
  max-width: 1280px;
  margin: 0 auto;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #f4eed6;
  flex-shrink: 0;
  white-space: nowrap;
}

.brand img {
  height: 40px;
  width: auto;
  filter: invert(1) brightness(1.6);
}

.brand-name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f4eed6;
}

.brand-name small {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

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

.nav-links li { flex-shrink: 0; }

.nav-links a {
  display: inline-block;
  color: #d8ceb0;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav-links a:hover,
.nav-links a.active { color: #ffffff; }

.nav-cta {
  background: var(--gold) !important;
  color: var(--navy) !important;
  padding: 9px 18px !important;
  border-radius: 4px;
  border: 1px solid var(--gold);
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  line-height: 1;
  margin-left: 4px;
}
.nav-cta:hover {
  background: #6c88ab !important;
  border-color: #6c88ab;
  color: #ffffff !important;
}

@media (max-width: 780px) {
  .nav-links { display: none; }
}

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

.hero {
  padding: 76px 0 64px;
  text-align: center;
  border-bottom: 1px solid var(--parchment-border);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(184,80,32,0.06), transparent 60%),
    var(--parchment);
}

.hero-logo {
  width: 128px;
  height: auto;
  margin-bottom: 18px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bridge);
  background: rgba(136,85,0,0.08);
  border: 1px solid rgba(136,85,0,0.25);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  max-width: 780px;
  margin: 0 auto 18px;
}

.hero .lede {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 1.15rem;
  color: var(--ink-soft);
}

.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 120ms ease, filter 120ms ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--navy);
  color: #f4eed6 !important;
  border-color: var(--navy);
}
.btn-primary:hover { filter: brightness(1.2); }

.btn-secondary {
  background: transparent;
  color: var(--navy) !important;
  border-color: var(--navy-mid);
}
.btn-secondary:hover { background: rgba(10,37,64,0.06); }

.patent-badge {
  margin-top: 30px;
  font-size: 0.82rem;
  color: var(--ink-mid);
  letter-spacing: 0.02em;
}
.patent-badge strong { color: var(--ink); }

.term-note {
  font-size: 0.78em;
  color: var(--ink-mid);
  font-style: italic;
  font-weight: 400;
}

/* ------------------------------------------------------------ section --- */

section { padding: 68px 0; }

.section-alt {
  background: var(--fintech-bg);
  border-top: 1px solid #dbe3ea;
  border-bottom: 1px solid #dbe3ea;
}

.section-navy {
  background: var(--navy);
  color: #eef1f5;
}
.section-navy h2, .section-navy h3 { color: #ffffff; }
.section-navy p { color: #b9c4cf; }

.section-head {
  max-width: 680px;
  margin: 0 auto 44px;
  text-align: center;
}
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.section-head p { font-size: 1.05rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}

.card {
  background: var(--parchment-panel);
  border: 1px solid var(--parchment-border);
  border-radius: 6px;
  padding: 28px;
}
.card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.card p { color: var(--ink-mid); font-size: 0.96rem; margin-bottom: 0; }

.fintech-card {
  background: var(--fintech-panel);
  border: 1px solid #c9d8e6;
}
.fintech-card h3 { color: var(--navy); }
.fintech-card p { color: var(--navy-mid); }

blockquote {
  border-left: 3px solid var(--ember);
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  font-style: italic;
}

.two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
}

.stat-strip {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
.stat { text-align: center; }
.stat .value {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold);
  display: block;
}
.stat .label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9fb0bf;
}

hr.divider {
  border: none;
  border-top: 1px solid var(--parchment-border);
  margin: 8px 0 0;
}

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

.site-footer {
  background: var(--navy);
  color: #a9b6c2;
  padding: 44px 0 28px;
  border-top: 3px solid var(--gold);
  font-size: 0.9rem;
}
.site-footer a { color: #d8ceb0; text-decoration: none; }
.site-footer a:hover { color: #ffffff; }

.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-brand img {
  height: 28px;
  filter: invert(1) brightness(1.6);
}
.footer-brand span {
  font-family: var(--serif);
  color: #f4eed6;
  font-size: 1.05rem;
}

.footer-links {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-links div h4 {
  color: #f4eed6;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 7px; }

.footer-fine {
  border-top: 1px solid #1c3350;
  padding-top: 18px;
  font-size: 0.8rem;
  color: #7c8b98;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.tag {
  font-size: 0.78rem;
  border: 1px solid var(--parchment-border);
  color: var(--ink-mid);
  padding: 4px 11px;
  border-radius: 999px;
}

/* ------------------------------------------------------------- forms --- */

.waitlist-form {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}
.waitlist-form .form-row { margin-bottom: 16px; }
.waitlist-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #cfd9e2;
  margin-bottom: 6px;
}
.waitlist-form input[type="text"],
.waitlist-form input[type="email"],
.waitlist-form textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 4px;
  border: 1.5px solid #375166;
  background: #0f2f4f;
  color: #f4eed6;
  font-family: var(--sans);
  font-size: 0.96rem;
}
.waitlist-form input::placeholder,
.waitlist-form textarea::placeholder { color: #7f93a3; }
.waitlist-form textarea { resize: vertical; min-height: 80px; }
.waitlist-form input:focus,
.waitlist-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.waitlist-form .hp-field {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}
.waitlist-form button[type="submit"] {
  width: 100%;
  background: var(--gold);
  color: var(--navy);
  border: 1.5px solid var(--gold);
  font-weight: 700;
}
.waitlist-form button[type="submit"]:hover { filter: brightness(1.08); }
.waitlist-form .form-note {
  font-size: 0.78rem;
  color: #8ea0b2;
  margin-top: 10px;
  margin-bottom: 0;
}
.waitlist-success {
  display: none;
  max-width: 480px;
  margin: 0 auto;
  background: #0f2f4f;
  border: 1.5px solid var(--gold);
  border-radius: 6px;
  padding: 26px 28px;
}
.waitlist-success h3 { color: #fff; margin-bottom: 8px; }
.waitlist-success p { color: #cfd9e2; margin-bottom: 0; }

/* -------------------------------------------------------------- legal --- */

.legal-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 0 90px;
}
.legal-doc .doc-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bridge);
  margin-bottom: 14px;
}
.legal-doc h1 { font-size: 2.2rem; margin-bottom: 8px; }
.legal-doc .updated {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  margin-bottom: 34px;
}
.legal-doc .status-note {
  background: var(--fintech-panel);
  border-left: 3px solid var(--navy);
  padding: 18px 22px;
  margin-bottom: 36px;
  font-size: 0.95rem;
  color: var(--navy-mid);
}
.legal-doc .status-note strong { color: var(--navy); }
.legal-doc h2 {
  font-size: 1.3rem;
  margin: 38px 0 12px;
  border-bottom: 1px solid var(--parchment-border);
  padding-bottom: 8px;
}
.legal-doc p, .legal-doc li { font-size: 0.98rem; color: var(--ink-mid); }
.legal-doc ul { padding-left: 22px; }
.legal-doc strong { color: var(--ink); }
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 0.9rem;
}
.legal-doc th, .legal-doc td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--parchment-border);
  vertical-align: top;
  color: var(--ink-mid);
}
.legal-doc th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}