/* ==========================================================================
   TERROSHI — website layout on top of the shared design tokens (tokens.css).
   Warm paper, cedar green, espresso ink — matches the app. Light mode.
   ========================================================================== */

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

body {
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Readable measure for prose */
.wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.prose { max-width: 65ch; }

img { max-width: 100%; height: auto; display: block; }

/* ---- Header / nav ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(253, 250, 244, 0.9);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  max-width: 980px;
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.brand__mark {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--crown);
  box-shadow: var(--shadow-crown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand__mark::before {
  content: "";
  width: 58%; height: 58%;
  background-color: #FFF7E0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7.5l4.6 4L12 4.5l4.4 7 4.6-4-1.9 11.3a1 1 0 0 1-1 .7H5.9a1 1 0 0 1-1-.7L3 7.5z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7.5l4.6 4L12 4.5l4.4 7 4.6-4-1.9 11.3a1 1 0 0 1-1 .7H5.9a1 1 0 0 1-1-.7L3 7.5z"/></svg>') center / contain no-repeat;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-nav a {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--verdant); }

/* ---- Main ------------------------------------------------------------ */
main { flex: 1 0 auto; padding: var(--space-8) 0 var(--space-8); }

.page-eyebrow { margin-bottom: var(--space-2); }

h1 { font-size: var(--text-2xl); line-height: 1.05; }
main h2 { margin-top: var(--space-7); font-size: var(--text-lg); }
main h3 { margin-top: var(--space-5); font-size: var(--text-md); }

.prose p,
.prose ul,
.prose ol { margin-top: var(--space-3); color: var(--ink-soft); }
.prose li { margin-top: 6px; margin-left: var(--space-5); }
.prose strong { color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.lead { font-size: var(--text-md); color: var(--ink-soft); }
.updated { font-size: var(--text-sm); color: var(--ink-faint); margin-top: var(--space-2); }

/* ---- Hero (landing) -------------------------------------------------- */
.hero {
  text-align: center;
  padding: var(--space-8) 0 var(--space-6);
}
.hero h1 { font-size: 44px; letter-spacing: -0.03em; }
.hero .tagline {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  color: var(--verdant);
  font-size: var(--text-lg);
  margin-top: var(--space-3);
}
.hero .lead { max-width: 60ch; margin: var(--space-4) auto 0; }

.cta-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px var(--space-6);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
}
.btn--primary { background: var(--verdant); color: var(--ink-inverse); box-shadow: var(--shadow-float); }
.btn--primary:hover { background: var(--verdant-deep); }
.btn--ghost { background: var(--paper-sunken); color: var(--ink); }

/* ---- Concept grid (landing) ----------------------------------------- */
.concepts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.concept {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.concept h3 { margin: 0 0 6px; font-size: var(--text-md); }
.concept p { margin: 0; color: var(--ink-soft); font-size: var(--text-base); }
.concept .eyebrow { display: block; margin-bottom: var(--space-2); }

/* ---- Callout / note card -------------------------------------------- */
.note {
  background: var(--verdant-tint);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-5);
}
.note--crown { background: var(--crown-tint); }
.note p { color: var(--ink); margin-top: var(--space-2); }
.note p:first-child { margin-top: 0; }
.note strong { color: var(--ink); }

/* ---- Steps (delete/support) ----------------------------------------- */
.steps { counter-reset: step; list-style: none; margin-top: var(--space-4); }
.steps li {
  position: relative;
  margin: 0 0 var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-4) 56px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  color: var(--ink-soft);
}
.steps li strong { color: var(--ink); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--verdant);
  color: var(--ink-inverse);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- FAQ ------------------------------------------------------------- */
.faq { margin-top: var(--space-4); }
.faq details {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.faq summary {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--verdant); font-weight: 800; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: var(--space-3); color: var(--ink-soft); }

/* ---- Definition list (privacy data table) --------------------------- */
.datalist {
  margin-top: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-raised);
  box-shadow: var(--shadow-card);
}
.datalist__row { padding: var(--space-4); }
.datalist__row + .datalist__row { border-top: 1px solid var(--line); }
.datalist__term {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--ink);
}
.datalist__desc { margin-top: 4px; color: var(--ink-soft); font-size: var(--text-base); }

/* ---- Contact line ---------------------------------------------------- */
.contact {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
}
.contact a { font-weight: 800; }

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--paper-sunken);
  margin-top: var(--space-8);
}
.site-footer__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-footer a {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
}
.site-footer a:hover { color: var(--verdant); }
.site-footer__links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.site-footer__copy { color: var(--ink-faint); font-size: var(--text-sm); }

@media (max-width: 560px) {
  .hero h1 { font-size: 34px; }
  h1 { font-size: var(--text-xl); }
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}