/* Raizz — Component Library v2
   Section structure is eyebrow + headline + lede + paragraph-level cards,
   styled in Raizz's cream/amber palette.
   Mobile-first; breakpoints 640/768/1024/1440. */

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.rz-container{ max-width:var(--content-max); margin:0 auto; padding:0 var(--sp-4); }
@media (min-width:1024px){ .rz-container{ padding:0 var(--sp-6); } }

h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; text-wrap:balance; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent-strong); outline-offset:3px; border-radius:4px;
}

/* ---------------- buttons ---------------- */
.rz-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:var(--accent-strong); color:var(--bg); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.rz-btn:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.rz-btn-on-band{ background:var(--bg); color:var(--ink); }

/* ---------------- shared section header (eyebrow + H2 + lede) ---------------- */
.rz-section{ padding:var(--sp-7) 0; }
.rz-section-head{ max-width:var(--prose-max); margin:0 auto var(--sp-6); text-align:center; }
.rz-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-strong); margin:0 0 var(--sp-3);
}
.rz-eyebrow::before, .rz-eyebrow::after{ content:""; height:1px; width:28px; background:var(--accent); opacity:.5; }
.rz-section-title{ font-size:clamp(26px,3.4vw,40px); line-height:1.15; margin-bottom:var(--sp-2); }
.rz-section-lede{ color:var(--ink-soft); font-size:16.5px; line-height:1.6; }

/* ---------------- hero ---------------- */
.rz-hero{ padding:var(--sp-8) 0 var(--sp-6); text-align:center; }
.rz-hero-inner{ max-width:840px; margin:0 auto; }
.rz-hero h1{ font-size:clamp(34px,5vw,58px); line-height:1.08; margin-bottom:var(--sp-4); }
.rz-hero h1 em{ font-style:normal; color:var(--accent-strong); }
.rz-hero-lede{ font-size:clamp(14px,1.2vw,16px); color:var(--ink-soft); max-width:680px; margin:0 auto var(--sp-5); }
.rz-hero-actions{ margin-bottom:var(--sp-6); }
.rz-pill-row{
  display:flex; flex-wrap:nowrap; gap:8px; align-items:center;
  justify-content:center; justify-content:safe center; /* falls back to flex-start if content overflows, so it never gets cut off on both ends -- see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
  max-width:100%; margin:0 auto; overflow-x:auto; padding:2px; -webkit-overflow-scrolling:touch;
}
.rz-pill{
  display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  white-space:nowrap; flex-shrink:0;
}
@media (max-width:640px){
  .rz-pill-row{ justify-content:flex-start; }
}
.rz-pill-dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex-shrink:0; }

/* ---------------- trust / stats band ---------------- */
.rz-stats-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:768px){ .rz-stats-grid{ grid-template-columns:repeat(3,1fr); } }
.rz-stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm);
}
.rz-stat-figure{
  font-family:var(--font-display); font-size:clamp(34px,4.4vw,48px); color:var(--accent-strong); line-height:1;
  margin-bottom:10px; display:flex; align-items:baseline; gap:4px;
}
.rz-stat-figure .rz-arrow{ font-size:0.55em; color:var(--accent); }
.rz-stat-label{ font-weight:600; font-size:15px; margin-bottom:8px; }
.rz-stat-sentence{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }

/* ---------------- how it works: numbered steps ---------------- */
.rz-steps-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:768px){ .rz-steps-grid{ grid-template-columns:repeat(3,1fr); } }
.rz-step-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5);
}
.rz-step-number{
  font-family:var(--font-display); font-size:38px; color:var(--accent-tint); -webkit-text-stroke:1.5px var(--accent);
  line-height:1; margin-bottom:var(--sp-3);
}
.rz-step-card h3{ font-size:19px; margin-bottom:10px; }
.rz-step-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:0; }

/* ---------------- research cards ---------------- */
.rz-research-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:768px){ .rz-research-grid{ grid-template-columns:repeat(3,1fr); } }
.rz-research-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3);
}
.rz-research-finding{ font-size:15px; line-height:1.6; flex:1; }
.rz-research-cite{ font-size:12px; color:var(--ink-faint); font-style:italic; border-top:1px solid var(--line); padding-top:var(--sp-2); }
.rz-research-note{ max-width:var(--prose-max); margin:var(--sp-5) auto 0; text-align:center; font-size:12.5px; color:var(--ink-faint); }

/* ---------------- alternating feature rows (image/visual + text) ---------------- */
.rz-feature-row{
  display:grid; grid-template-columns:1fr; gap:var(--sp-5); align-items:center; margin-bottom:var(--sp-7);
}
.rz-feature-row:last-child{ margin-bottom:0; }
@media (min-width:900px){
  .rz-feature-row{ grid-template-columns:1fr 1fr; gap:var(--sp-6); }
  .rz-feature-row.rz-reverse .rz-feature-visual{ order:2; }
  .rz-feature-row.rz-reverse .rz-feature-text{ order:1; }
}
.rz-feature-visual{
  aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:radial-gradient(circle at 30% 30%, var(--accent-tint), var(--bg-alt) 70%);
}
.rz-feature-visual svg{ width:100%; height:100%; }
.rz-feature-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-strong); background:var(--accent-tint); padding:5px 13px; border-radius:var(--r-pill);
  margin-bottom:var(--sp-3);
}
.rz-feature-text h3{ font-size:clamp(22px,2.4vw,28px); margin-bottom:var(--sp-3); }
.rz-feature-text p{ color:var(--ink-soft); font-size:15.5px; line-height:1.65; margin:0 0 var(--sp-4); }
.rz-feature-bullets{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rz-feature-bullets li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; }
.rz-feature-bullets li::before{
  content:"✓"; color:var(--ok); font-weight:700; flex-shrink:0; width:18px; height:18px;
  border-radius:50%; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; font-size:11px;
}

/* ---------------- category comparison table ---------------- */
.rz-compare-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); }
.rz-compare{ width:100%; border-collapse:collapse; min-width:640px; background:var(--surface); font-size:14px; }
.rz-compare th, .rz-compare td{ padding:16px; text-align:center; border-bottom:1px solid var(--line); }
.rz-compare th{ font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.rz-compare td:first-child, .rz-compare th:first-child{ text-align:left; font-weight:600; }
.rz-compare th.rz-col-raizz, .rz-compare td.rz-col-raizz{ background:var(--accent-tint); }
.rz-compare tr:last-child td{ border-bottom:none; }
.rz-mark-yes{ color:var(--ok); font-weight:700; }
.rz-mark-no{ color:var(--ink-faint); }

/* ---------------- benefit / scenario / cap cards (paragraph depth) ---------------- */
.rz-card-grid-2{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:768px){ .rz-card-grid-2{ grid-template-columns:1fr 1fr; } }
.rz-card-grid-3{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:768px){ .rz-card-grid-3{ grid-template-columns:repeat(3,1fr); } }
.rz-icon-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5);
}
.rz-icon-badge{
  width:42px; height:42px; border-radius:50%; background:var(--accent-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-3);
  color:var(--accent-strong); font-size:17px; font-weight:700;
}
.rz-icon-card h3{ font-size:18px; margin-bottom:8px; }
.rz-icon-card p{ margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.6; }

/* ---------------- founders ---------------- */
.rz-founders-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:768px){ .rz-founders-grid{ grid-template-columns:repeat(3,1fr); } }
.rz-founder-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-5); }
.rz-founder-name{ font-family:var(--font-display); font-size:19px; margin-bottom:2px; }
.rz-founder-role{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-strong); margin-bottom:10px; }
.rz-founder-card p{ margin:0; font-size:14px; color:var(--ink-soft); line-height:1.6; }

/* ---------------- what's included ---------------- */
.rz-included-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:640px){ .rz-included-grid{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } }
.rz-included-card{ text-align:center; background:var(--bg-alt); border-radius:var(--r-lg); padding:var(--sp-5); }
.rz-included-card .rz-icon-badge{ margin:0 auto var(--sp-3); }
.rz-included-card h3{ font-size:16px; margin-bottom:6px; }
.rz-included-card p{ margin:0; font-size:13px; color:var(--ink-soft); }

/* ---------------- testimonials (native band + card layout; hidden until real data exists) ---------------- */
.rz-band{ background:var(--band-bg); color:var(--band-ink); }
.rz-band .rz-eyebrow{ color:var(--accent-tint); }
.rz-band .rz-eyebrow::before, .rz-band .rz-eyebrow::after{ background:var(--accent-tint); }
.rz-band .rz-section-lede{ color:var(--band-ink-soft); }
.rz-testimonial-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:768px){ .rz-testimonial-grid{ grid-template-columns:repeat(3,1fr); } }
.rz-testimonial-card{ background:rgba(247,247,241,0.06); border:1px solid rgba(247,247,241,0.18); border-radius:var(--r-lg); padding:var(--sp-5); }
.rz-testimonial-person{ display:flex; align-items:center; gap:12px; margin-bottom:var(--sp-3); }
.rz-avatar{ width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.rz-testimonial-name{ font-weight:700; font-size:14.5px; }
.rz-testimonial-role{ font-size:12px; color:var(--band-ink-soft); }
.rz-testimonial-card p{ margin:0; font-size:14px; line-height:1.6; }

/* ---------------- FAQ (native <details>) ---------------- */
.rz-faq-list{ max-width:var(--prose-max); margin:0 auto; }
.rz-faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-2); overflow:hidden; }
.rz-faq-item summary{
  cursor:pointer; list-style:none; padding:18px 22px; font-weight:600; font-size:15.5px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.rz-faq-item summary::-webkit-details-marker{ display:none; }
.rz-faq-item summary::after{ content:"+"; font-size:20px; color:var(--accent-strong); flex-shrink:0; transition:transform .2s ease; }
.rz-faq-item[open] summary::after{ transform:rotate(45deg); }
.rz-faq-answer{ padding:0 22px 20px; color:var(--ink-soft); font-size:14.5px; line-height:1.65; }

/* ---------------- footer ---------------- */
.rz-footer{ padding:var(--sp-6) 0; text-align:center; color:var(--ink-faint); font-size:13px; }

@media (max-width:640px){ .rz-hero-stats, .rz-stats-grid{ gap:var(--sp-3); } }