/* =========================================================
   Poof — shared styles (minimal)
   ========================================================= */

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #FAFBF8;
  color: #0E1B14;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-display {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

::selection { background: #16A34A; color: #fff; }

/* Brand mark */
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  object-fit: cover;
  display: block;
}
.brand-mark.lg { width: 48px; height: 48px; border-radius: 12px; }

/* =========================================================
   Feature cards
   ========================================================= */
.feature {
  transition: border-color .2s ease;
}
.feature:hover {
  border-color: #BFCBC0;
}

.icon-pill {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(22,163,74,0.08); color: #16A34A;
  display: inline-flex; align-items: center; justify-content: center;
}

/* =========================================================
   Storage breakdown teaser
   ========================================================= */
.bar {
  height: 10px; border-radius: 9999px; overflow: hidden;
  background: #E8EDE5;
  display: flex;
}
.bar > span {
  display: block; height: 100%;
  transform-origin: left;
  animation: barIn 1.2s cubic-bezier(.2,.8,.2,1) both;
}
.bar > span:nth-child(1) { background: #16A34A; }
.bar > span:nth-child(2) { background: #C4543A; }
.bar > span:nth-child(3) { background: #B07E1A; }
@keyframes barIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.legend-dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }

/* =========================================================
   Store buttons
   ========================================================= */
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-radius: 12px;
  background: #0E1B14; color: #F1F5F2;
  transition: background .15s ease;
  min-width: 196px;
}
.store-btn:hover { background: #1A2A22; }
.store-btn .label { line-height: 1.05; }
.store-btn .small { font-size: 11px; opacity: .75; letter-spacing: 0.02em; }
.store-btn .big   { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px; }
.store-icon { width: 26px; height: 26px; display: block; flex-shrink: 0; }

/* =========================================================
   FAQ
   ========================================================= */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(45deg); }
.chev { transition: transform .2s ease; }

/* =========================================================
   Legal / long-form pages
   ========================================================= */
.legal-prose {
  color: #2A3B33;
  font-size: 16px;
  line-height: 1.75;
}
.legal-prose h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #0E1B14;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 6rem;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { margin-bottom: 1rem; }
.legal-prose ul {
  margin: 1rem 0;
  padding-left: 0;
  list-style: none;
}
.legal-prose ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 0.5rem;
}
.legal-prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px; border-radius: 9999px;
  background: #16A34A;
}
.legal-prose strong { color: #0E1B14; font-weight: 600; }
.legal-prose a { color: #16A34A; text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:hover { color: #0F7A37; }

.toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #4F6056;
  transition: background .15s ease, color .15s ease;
}
.toc a:hover { background: #F4F7F2; color: #0E1B14; }
.toc a.active { background: rgba(22,163,74,0.10); color: #0F7A37; font-weight: 600; }