/* ============================================================================
   site.css — landing page + shared shell. References tokens.css only.
   No hard-coded colors or fonts live here. Calm is the product: slow motion,
   one thing at a time, generous space. (See docs/DESIGN.md.)
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Primitives ----------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }

section { padding-block: var(--s-9); }
@media (max-width: 640px) { section { padding-block: var(--s-8); } }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: var(--lh-tight); margin: 0; }
h2 { font-size: var(--t-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); }
p { margin: 0 0 var(--s-4); }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
}

.lead { font-size: var(--t-lead); color: var(--ink-soft); line-height: var(--lh-snug); }
.measure { max-width: var(--maxw-text); }

/* Visible keyboard focus everywhere. */
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

.skip-link {
  position: absolute; left: var(--s-4); top: -3rem;
  background: var(--panel); color: var(--ink);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm);
  transition: top var(--dur-fast) var(--ease); z-index: 100;
}
.skip-link:focus { top: var(--s-4); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-sans); font-size: var(--t-body); font-weight: 600;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn-primary { background: var(--accent); color: var(--panel); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn:active { transform: translateY(1px); }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: var(--s-3); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.brand .mark { width: auto; height: 1.9rem; display: block; }
.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav .nav-links { display: inline-flex; align-items: center; gap: var(--s-5); }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-small); }
.nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav .nav-links { display: none; } }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-top: var(--s-8); }
.hero h1 { font-size: var(--t-display); max-width: 16ch; letter-spacing: -0.015em; }
.hero .subline { margin-top: var(--s-5); max-width: 48ch; }
.hero .subline strong { color: var(--ink); font-weight: 600; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); align-items: center; }
.hero .cta-note { font-size: var(--t-small); color: var(--ink-soft); }
.hero-demo-frame { margin-top: var(--s-7); }

/* --- Embedded demo frame -------------------------------------------------- */
.demo-embed {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-lift); overflow: hidden;
}
.demo-embed iframe { display: block; width: 100%; border: 0; }
.microcaption {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-micro); color: var(--ink-soft); margin-top: var(--s-3);
}
.microcaption .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* --- "Be honest" block — the highest-leverage element. Let it breathe. ---- */
.honest { background: var(--panel); border-block: 1px solid var(--line); }
.honest h2 { font-size: var(--t-h2); margin-bottom: var(--s-6); }
.honest .frags { display: grid; gap: var(--s-5); max-width: 40ch; }
.honest .frag {
  font-family: var(--font-serif); font-size: var(--t-h3);
  line-height: var(--lh-snug); color: var(--ink); margin: 0;
}
.honest .frag span { color: var(--ink-soft); display: block; }
.honest .land {
  margin-top: var(--s-7); font-family: var(--font-sans); font-style: italic;
  font-size: var(--t-lead); color: var(--accent-deep);
}

/* --- Centerpiece sections (decode / encode) ------------------------------- */
.center { }
.center .eyebrow { color: var(--accent-deep); }
.center h2 { max-width: 18ch; }
.center .shield {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--clay); background: var(--clay-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; max-width: 52ch;
}
.center .shield strong { color: var(--ink); }

/* --- Support strip (the safety net) --------------------------------------- */
.support { background: var(--panel); border-block: 1px solid var(--line); }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
/* Two-item strip (threads/continuity graduated to the centerpiece). */
.support-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: var(--maxw-text); }
@media (max-width: 760px) { .support-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.support .item h3 { margin-bottom: var(--s-2); }
.support .item p { color: var(--ink-soft); margin: 0; }
.support .item .key { display: block; font-family: var(--font-serif); font-size: var(--t-h3); color: var(--accent-deep); margin-bottom: var(--s-2); }

/* --- Acute end (proof of power) ------------------------------------------- */
.acute { background: var(--ink); color: var(--bg); }
.acute h2 { color: var(--panel); }
.acute .eyebrow { color: var(--accent-light); }
.acute p { color: color-mix(in srgb, var(--bg) 88%, var(--ink)); }
.acute .stairs { display: grid; gap: var(--s-3); margin-top: var(--s-6); max-width: 46ch; }
.acute .stair { display: flex; gap: var(--s-3); align-items: baseline; }
.acute .stair .num { font-family: var(--font-serif); color: var(--accent); font-size: var(--t-h3); min-width: 1.6ch; }
.acute .privacy { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
.acute .privacy strong { color: var(--panel); }

/* --- Privacy / anonymization (deepens the self-host tier) ----------------- */
.privacy-section .section-head { margin-bottom: var(--s-7); }
.privacy-section .eyebrow { color: var(--accent-deep); }
.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7) var(--s-6); }
@media (max-width: 880px) { .privacy-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); } }
@media (max-width: 560px) { .privacy-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.privacy-grid .item p { color: var(--ink-soft); margin: 0; font-size: var(--t-small); line-height: var(--lh-body); }
.privacy-grid .item .key { display: block; font-family: var(--font-serif); font-size: var(--t-h3); color: var(--accent-deep); margin-bottom: var(--s-2); }

/* --- Who it's for --------------------------------------------------------- */
.who blockquote { margin: 0; font-family: var(--font-serif); font-size: var(--t-h2); line-height: var(--lh-snug); max-width: 24ch; }
.who .roles { margin-top: var(--s-4); color: var(--ink-soft); }

/* --- Why coffeegolem (origin) --------------------------------------------- */
.origin { background: var(--well); border-block: 1px solid var(--line); }
.origin .measure p { color: var(--ink-soft); }
.origin .measure p strong { color: var(--ink); }

/* --- Closing CTA ---------------------------------------------------------- */
.cta-close { text-align: center; }
.cta-close h2 { font-size: var(--t-display); max-width: 18ch; margin-inline: auto; }
.cta-close .four-beat { margin-top: var(--s-4); color: var(--ink-soft); font-size: var(--t-lead); }
.cta-close .cta-row { justify-content: center; margin-top: var(--s-6); }

/* --- Waitlist form -------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.waitlist {
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
  align-items: center; margin-top: var(--s-6);
}
.waitlist input[type=email] {
  font-family: var(--font-sans); font-size: var(--t-body);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--panel); color: var(--ink);
  min-width: min(20rem, 100%);
}
.waitlist input[type=email]:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.waitlist .waitlist-note { flex-basis: 100%; margin: var(--s-2) 0 0; font-size: var(--t-small); color: var(--accent-deep); min-height: 1.2em; }
.cta-status { margin-top: var(--s-4); font-size: var(--t-small); color: var(--ink-soft); }

/* --- Social proof slot ---------------------------------------------------- */
.proof { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-6); align-items: center; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; } }
.proof .shot {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--well);
  aspect-ratio: 16 / 10; display: grid; place-items: center; color: var(--ink-soft);
  font-size: var(--t-small); text-align: center; padding: var(--s-5);
}
.proof blockquote { margin: 0; font-family: var(--font-serif); font-size: var(--t-h3); line-height: var(--lh-snug); }
.proof cite { display: block; margin-top: var(--s-3); font-style: normal; font-family: var(--font-sans); font-size: var(--t-small); color: var(--ink-soft); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--panel); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; padding-block: var(--s-6); align-items: center; }
.site-footer .links { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-small); }
.site-footer a:hover { color: var(--ink); }
.site-footer .fine { font-size: var(--t-micro); color: var(--ink-soft); }

/* --- Section rhythm helpers ----------------------------------------------- */
.section-head { margin-bottom: var(--s-6); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Gentle on-scroll arrival (one thing at a time; disabled under reduced-motion). */
.rise { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }