/* ========================================================================
   Page-specific layout helpers
   ======================================================================== */

/* ---- Home hero ------------------------------------------------------- */
.hero{ padding-block:clamp(48px,6vw,88px) clamp(40px,5vw,72px); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } }
.hero h1{ margin-bottom:18px; }
.hero-desc{ font-size:1.16rem; max-width:560px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.hero-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.hero-tags .tag{ background:var(--color-surface); }

/* ---- Intro split (What is BariCare) ---------------------------------- */
.intro-split p + p{ margin-top:14px; }
.intro-list{ margin-top:22px; display:flex; flex-direction:column; gap:14px; }
.intro-list li{ display:flex; gap:12px; align-items:flex-start; }
.intro-list .il-icon{ width:38px; height:38px; border-radius:10px; background:var(--color-primary-soft); color:var(--color-primary-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.intro-list strong{ display:block; font-size:.96rem; color:var(--color-ink); }
.intro-list span{ font-size:.88rem; color:var(--color-text-muted); }

/* ---- Persona/value grids ---------------------------------------------- */
.value-card{ padding:26px; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); }
.value-card .vc-icon{ width:46px; height:46px; border-radius:12px; background:var(--navy-900); color:var(--teal-200); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }

/* ---- Company milestones (About) --------------------------------------- */
.milestone-row{ display:grid; grid-template-columns:120px 1fr; gap:22px; padding-block:20px; border-bottom:1px solid var(--color-border); }
.milestone-row:last-child{ border-bottom:none; }
.milestone-row .m-date{ font-family:var(--font-display); font-weight:800; color:var(--color-primary-strong); }
@media (max-width:560px){ .milestone-row{ grid-template-columns:1fr; gap:4px; } }

/* ---- Roadmap (Investors) ------------------------------------------------ */
.roadmap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:960px){ .roadmap-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .roadmap-grid{ grid-template-columns:1fr; } }
.roadmap-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:22px; position:relative; }
.roadmap-phase{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:8px; }
.roadmap-card.is-current{ border-color:var(--color-primary); }
.roadmap-card.is-current .roadmap-phase{ color:var(--color-primary-strong); }

/* ---- Resource cards ----------------------------------------------------- */
.resource-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; height:100%; }
.resource-thumb{ height:120px; background:linear-gradient(135deg,var(--teal-100),var(--teal-50)); display:flex; align-items:center; justify-content:center; color:var(--teal-700); }
.resource-thumb svg{ width:34px; height:34px; }
.resource-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.resource-kind{ font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--color-primary-strong); margin-bottom:8px; }
.resource-body h3{ font-size:1.02rem; margin-bottom:8px; }
.resource-body p{ font-size:.88rem; flex:1; }
.resource-body .link-arrow{ margin-top:16px; font-size:.88rem; }

/* ---- Comparison table (Features/Pricing) --------------------------------- */
.compare-table{ width:100%; border-collapse:collapse; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; }
.compare-table th, .compare-table td{ padding:14px 16px; border-bottom:1px solid var(--color-border); text-align:left; font-size:.9rem; }
.compare-table th{ background:var(--color-surface-alt); font-family:var(--font-display); font-size:.82rem; }
.compare-table td:not(:first-child), .compare-table th:not(:first-child){ text-align:center; }
.compare-table tr:last-child td{ border-bottom:none; }
.compare-table svg{ margin-inline:auto; color:var(--color-primary); }
.table-scroll{ overflow-x:auto; }
.table-scroll table{ min-width:640px; }

/* ---- FAQ category pills -------------------------------------------------- */
.faq-cats{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
.faq-cat{ padding:9px 16px; border-radius:var(--radius-pill); border:1px solid var(--color-border); font-size:.86rem; font-weight:700; color:var(--color-text-muted); background:var(--color-surface); }
.faq-cat.is-active{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }

/* ---- Contact / demo layout ---------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:40px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-item{ display:flex; gap:14px; padding-block:16px; border-bottom:1px solid var(--color-border); }
.contact-info-item:last-child{ border-bottom:none; }
.contact-info-item .ci-icon{ width:42px; height:42px; border-radius:11px; background:var(--color-primary-soft); color:var(--color-primary-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item strong{ display:block; color:var(--color-ink); font-size:.94rem; }
.contact-info-item p{ font-size:.88rem; margin-top:2px; }

/* ---- Misc --------------------------------------------------------------- */
.center-max{ max-width:760px; margin-inline:auto; text-align:center; }
.pill-list{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.bg-surface-alt{ background:var(--color-surface-alt); }
.mt-lg{ margin-top:48px; }