@import url('./tokens.css');

/* ============================================================
   Site reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--df-paper);
  color: var(--df-ink-2);
  font-family: var(--df-font-body);
  font-size: var(--df-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--df-forest); text-decoration: none; transition: color var(--df-dur-fast) var(--df-ease); }
a:hover, a:focus-visible { color: var(--df-ink); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--df-forest-2); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   Layout
   ============================================================ */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--df-space-6); }
.prose { max-width: 640px; }
.section { padding: var(--df-space-16) 0; }
.section--tight { padding: var(--df-space-12) 0; }
.section--paper-soft { background: var(--df-paper-soft); }

/* ============================================================
   Header / footer
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 241, 229, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--df-divider);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--df-space-4) var(--df-space-6);
  max-width: 1120px;
  margin: 0 auto;
}
.wordmark {
  font-family: var(--df-font-display);
  font-weight: 600;
  font-size: var(--df-text-xl);
  letter-spacing: -0.005em;
  color: var(--df-ink);
}
.wordmark a { color: inherit; }
.wordmark a:hover { text-decoration: none; color: var(--df-forest); }
.site-nav { display: flex; gap: var(--df-space-6); }
.site-nav a { font-size: var(--df-text-sm); font-weight: 500; color: var(--df-ink-3); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--df-ink); text-decoration: none; }

.site-footer {
  border-top: 1px solid var(--df-divider);
  background: var(--df-paper-soft);
  padding: var(--df-space-10) 0;
  margin-top: var(--df-space-16);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--df-space-3);
  align-items: center;
  text-align: center;
  font-size: var(--df-text-sm);
  color: var(--df-ink-4);
}
.site-footer a { color: var(--df-ink-3); }
.site-footer__links { display: flex; gap: var(--df-space-5); flex-wrap: wrap; justify-content: center; }

/* ============================================================
   Typography helpers
   ============================================================ */
.eyebrow {
  font-family: var(--df-font-body);
  font-weight: 500;
  font-size: var(--df-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--df-ink-4);
  margin: 0 0 var(--df-space-3);
}
h1.display { font-family: var(--df-font-display); font-weight: 500; font-size: clamp(36px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.01em; color: var(--df-ink); margin: 0 0 var(--df-space-5); }
h2.display { font-family: var(--df-font-display); font-weight: 500; font-size: clamp(28px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.005em; color: var(--df-ink); margin: 0 0 var(--df-space-4); }
h3 { font-family: var(--df-font-display); font-weight: 500; font-size: var(--df-text-2xl); line-height: 1.18; color: var(--df-ink); margin: 0 0 var(--df-space-3); }
h4 { font-family: var(--df-font-body); font-weight: 600; font-size: var(--df-text-lg); color: var(--df-ink-2); margin: 0 0 var(--df-space-2); }
p { margin: 0 0 var(--df-space-4); }
.lede { font-size: var(--df-text-lg); line-height: 1.5; color: var(--df-ink-3); }
.caption { font-size: var(--df-text-sm); color: var(--df-ink-4); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--df-space-2);
  padding: var(--df-space-3) var(--df-space-6);
  border-radius: var(--df-r-pill);
  font-family: var(--df-font-body);
  font-weight: 600;
  font-size: var(--df-text-base);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--df-dur-fast) var(--df-ease), color var(--df-dur-fast) var(--df-ease);
}
.btn--primary { background: var(--df-forest-2); color: var(--df-paper); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--df-forest); color: var(--df-paper); text-decoration: none; }
.btn--primary[disabled] { background: var(--df-ink-5); color: var(--df-paper); cursor: not-allowed; }

/* ============================================================
   Cards / feature blocks
   ============================================================ */
.feature-grid {
  display: grid;
  gap: var(--df-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.feature-card {
  background: var(--df-card);
  border: 1px solid var(--df-divider);
  border-radius: var(--df-r-lg);
  padding: var(--df-space-6);
  box-shadow: var(--df-shadow-1);
}
.feature-card h4 { margin-top: 0; }

.long-feature {
  display: grid;
  gap: var(--df-space-8);
  align-items: center;
  grid-template-columns: 1fr;
  padding: var(--df-space-12) 0;
}
@media (min-width: 768px) {
  .long-feature { grid-template-columns: 1fr 1fr; gap: var(--df-space-12); }
  .long-feature--reverse > :first-child { order: 2; }
}
.long-feature__visual {
  background: var(--df-card-tint);
  border: 1px solid var(--df-divider);
  border-radius: var(--df-r-xl);
  padding: var(--df-space-10);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.long-features > .long-feature:nth-child(odd)  .long-feature__visual { background: var(--df-cat-sage); }
.long-features > .long-feature:nth-child(even) .long-feature__visual { background: var(--df-cat-blush); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: var(--df-space-16) 0 var(--df-space-12); }
.hero__inner {
  display: grid;
  gap: var(--df-space-8);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--df-space-12); }
}
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--df-space-6);
}

/* ============================================================
   Compliance band
   ============================================================ */
.compliance {
  background: var(--df-paper-deep);
  border-top: 1px solid var(--df-divider);
  border-bottom: 1px solid var(--df-divider);
  padding: var(--df-space-8) 0;
}
.compliance p {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--df-text-sm);
  color: var(--df-ink-3);
  text-align: center;
}

/* ============================================================
   Long-form pages (privacy / terms / support)
   ============================================================ */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--df-space-12) var(--df-space-6);
}
.doc h1.display { font-size: clamp(32px, 5vw, 48px); }
.doc h2 { font-family: var(--df-font-display); font-weight: 500; font-size: var(--df-text-2xl); margin-top: var(--df-space-10); margin-bottom: var(--df-space-4); color: var(--df-ink); }
.doc h3 { font-family: var(--df-font-body); font-weight: 600; font-size: var(--df-text-lg); margin-top: var(--df-space-6); color: var(--df-ink-2); }
.doc ul { padding-left: var(--df-space-6); margin: 0 0 var(--df-space-4); }
.doc li { margin-bottom: var(--df-space-2); }
.doc .effective-date { color: var(--df-ink-4); font-size: var(--df-text-sm); margin-top: var(--df-space-2); }
.doc .data-table { width: 100%; border-collapse: collapse; margin: var(--df-space-4) 0 var(--df-space-6); font-size: var(--df-text-sm); }
.doc .data-table th,
.doc .data-table td { text-align: left; padding: var(--df-space-3) var(--df-space-4); border-bottom: 1px solid var(--df-divider); vertical-align: top; }
.doc .data-table th { font-weight: 600; color: var(--df-ink); background: var(--df-paper-soft); }
.doc .data-table td { color: var(--df-ink-3); }

/* ============================================================
   FAQ
   ============================================================ */
.faq details {
  border-bottom: 1px solid var(--df-divider);
  padding: var(--df-space-4) 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--df-ink);
  padding: var(--df-space-2) 0;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--df-ink-4); font-weight: 400; transition: transform var(--df-dur-fast) var(--df-ease); }
.faq details[open] summary::after { content: '−'; }
.faq details > p { margin-top: var(--df-space-3); color: var(--df-ink-3); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}