/* ===== Holi Health design tokens ===== */
@font-face {
  font-family: "Sfizia";
  src: url("fonts/sfizia-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sfizia";
  src: url("fonts/sfizia-regular-italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
:root {
  --holi-plum-900:#1E1043; --holi-plum-800:#2F2646; --holi-plum-700:#442E7D; --holi-plum-600:#6647B8;
  --holi-violet-500:#7E5CD7; --holi-violet-400:#8C6AE6; --holi-violet-300:#9E7DF7; --holi-violet-200:#B092FF;
  --holi-violet-100:#C0A9FF; --holi-violet-050:#D6C6FF;
  --holi-sand-150:#E8DFCD; --holi-sand-100:#EFE5D9; --holi-cream:#F0EDE8; --holi-bone:#F7F5F2;
  --holi-red-400:#AF4E52; --holi-red-500:#91272B;
  --holi-ink:#1B1F29; --holi-ink-80:#2C3041; --holi-ink-60:rgba(27,31,41,0.60);
  --holi-ink-40:rgba(27,31,41,0.40); --holi-ink-20:rgba(27,31,41,0.12);
  --ff-display:"DM Sans",system-ui,sans-serif;
  --ff-accent:"Sfizia",Georgia,serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --radius-sm:12px; --radius-pill:999px;
  --dur-micro:200ms; --ease-out:cubic-bezier(0.22,0.61,0.36,1);
}
html, body { margin:0; background:#fff; color:var(--holi-ink);
  font-family:var(--ff-body); font-size:16px; line-height:1.67;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
* { box-sizing:border-box; }
a { color:#442E7D; }
a:hover { color:#7E5CD7; }
.accent-italic { font-family:var(--ff-accent); font-style:italic; font-weight:400; }
.kicker { font-family:var(--ff-body); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--holi-ink-60); }

/* ===== DS components ===== */
.holi-btn { font-family:var(--ff-body); font-weight:500;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--radius-sm);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.holi-btn:focus-visible { outline:2px solid var(--holi-violet-400); outline-offset:2px; }
.holi-btn--sm { font-size:14px; padding:8px 14px; }
.holi-btn--lg { font-size:16px; padding:16px 26px; }
.holi-btn--block { width:100%; }
.holi-btn--primary { background:var(--holi-plum-700); color:#fff; }
.holi-btn--primary:hover { background:var(--holi-plum-600); color:#fff; }
.holi-btn--primary:active { background:var(--holi-plum-800); }
.holi-btn--secondary { background:transparent; color:var(--holi-ink); border-color:var(--holi-ink); }
.holi-btn--secondary:hover { color:var(--holi-plum-700); border-color:var(--holi-plum-700); }

.holi-field { display:flex; flex-direction:column; gap:8px; font-family:var(--ff-body); }
.holi-field__label { font-size:14px; color:var(--holi-ink); }
.holi-input { font-family:var(--ff-body); font-size:15px; color:var(--holi-ink);
  background:#fff; border:1px solid var(--holi-ink-20); border-radius:var(--radius-sm);
  padding:13px 14px; width:100%; box-sizing:border-box; line-height:1.4;
  transition:border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.holi-input::placeholder { color:var(--holi-ink-40); }
.holi-input:hover { border-color:var(--holi-ink-40); }
.holi-input:focus { outline:none; border-color:var(--holi-plum-700); box-shadow:0 0 0 3px rgba(68,46,125,0.14); }

.holi-check { display:inline-flex; align-items:flex-start; gap:12px;
  font-family:var(--ff-body); font-size:15px; color:var(--holi-ink); cursor:pointer; line-height:1.4; }
.holi-check input { position:absolute; opacity:0; width:0; height:0; }
.holi-check__box { flex:0 0 auto; width:22px; height:22px; margin-top:1px;
  border:1px solid var(--holi-ink-40); border-radius:6px; background:#fff;
  display:grid; place-items:center;
  transition:background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.holi-check__box svg { width:14px; height:14px; stroke:#fff; stroke-width:2.5; fill:none;
  opacity:0; transition:opacity var(--dur-micro) var(--ease-out); }
.holi-check input:checked + .holi-check__box { background:var(--holi-plum-700); border-color:var(--holi-plum-700); }
.holi-check input:checked + .holi-check__box svg { opacity:1; }
.holi-check input:focus-visible + .holi-check__box { outline:2px solid var(--holi-violet-400); outline-offset:2px; }

/* ===== page responsive rules (from design) ===== */

    html, body { margin: 0; background: #fff; }
    * { box-sizing: border-box; }
    a { color: #442E7D; }
    a:hover { color: #7E5CD7; }
    @media (max-width: 1280px) {
      .nav-doc { display: none !important; }
    }
    @media (max-width: 1120px) {
      .nav-links { display: none !important; }
      .nav-cta { margin-left: auto !important; }
    }
    @media (max-width: 900px) {
      .r2 { grid-template-columns: 1fr !important; gap: 32px !important; }
      .r3 { grid-template-columns: 1fr !important; }
      .r4 { grid-template-columns: repeat(2, 1fr) !important; }
      .r-stats { grid-template-columns: repeat(2, 1fr) !important; row-gap: 28px !important; }
      .r-stats > div { border-left: none !important; padding-left: 0 !important; }
      .r-footer { grid-template-columns: 1fr 1fr !important; row-gap: 36px !important; }
    }
    @media (max-width: 560px) {
      .nav-it { display: none !important; }
      .r4 { grid-template-columns: 1fr !important; }
      .r-footer { grid-template-columns: 1fr !important; }
    }
  

/* ===== FAQ accordion ===== */
.faq-item .faq-answer { display:none; }
.faq-item .faq-icon-open { display:none !important; }
.faq-item.faq-open .faq-answer { display:block; }
.faq-item.faq-open .faq-icon-open { display:grid !important; }
.faq-item.faq-open .faq-icon-closed { display:none !important; }

/* ===== hover states (converted from style-hover) ===== */
.hv0:hover{ border-color:var(--holi-plum-700); color:var(--holi-plum-700) }
.hv1:hover{ opacity:0.92 }
.hv2:hover{ background:rgba(255,255,255,0.12) }
.hv3:hover{ border-color:#fff }
.hv4:hover{ color:#fff }