/* Landing pages – uses root styles.css as base */

:root{ color-scheme: dark; }

a{ color: var(--text); }
a:hover{ color: var(--text); }

/* Improve readability for long-form content */
.landingWrap{ max-width: 1240px; margin: 0 auto; padding: 16px; }
.landingHero{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
@media (max-width: 980px){ .landingHero{ grid-template-columns: 1fr; } }

.heroPanel{ padding: 18px; }
.heroTitle{ font-size: clamp(22px, 2.2vw, 34px); line-height: 1.08; margin: 0 0 10px 0; font-weight: 860; letter-spacing: .2px; }
.heroLead{ color: var(--muted); margin: 0 0 14px 0; font-size: 15.5px; line-height: 1.45; }

.kpis{ display:flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0 0; }
.kpi{ border:1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 999px; padding: 8px 10px; font-size: 12.5px; color: var(--muted); font-weight: 720; }

.ctaRow{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 14px; }

.section{ margin-top: 16px; }
.sectionTitle{ font-size: 16px; font-weight: 860; margin: 0 0 10px 0; }

.featureGrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 520px){ .featureGrid{ grid-template-columns: 1fr; } }
.feature{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
}
.feature b{ display:block; margin-bottom: 4px; }
.feature p{ margin: 0; color: var(--muted); line-height: 1.4; font-size: 13.5px; }

.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
@media (max-width: 980px){ .steps{ grid-template-columns: 1fr; } }
.step{ border:1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 16px; padding: 12px; }
.stepTop{ display:flex; align-items:center; gap: 10px; margin-bottom: 6px; }
.stepNum{ width:30px; height:30px; border-radius: 12px; display:grid; place-items:center; font-weight: 900; background: rgba(14,167,90,.14); border: 1px solid rgba(14,167,90,.28); }
.step p{ margin:0; color: var(--muted); line-height: 1.45; font-size: 13.5px; }

.previewPanel{ padding: 14px; }
.previewTitle{ font-size: 14px; font-weight: 860; margin: 0 0 8px 0; }
.previewNote{ margin: 0 0 10px 0; color: var(--muted); font-size: 12.8px; line-height: 1.4; }

.iframeShell{ border:1px solid var(--line); border-radius: 16px; overflow:hidden; background: rgba(255,255,255,.02); }
.iframePh{ padding: 14px; }
.iframePh p{ margin: 0 0 10px 0; color: var(--muted); font-size: 13px; line-height: 1.4; }

.scoreIframe{ width: 100%; height: 820px; border:0; display:none; }
@media (max-width: 980px){ .scoreIframe{ height: 720px; } }
@media (max-width: 520px){ .scoreIframe{ height: 640px; } }

.story{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
}
.story p{ margin: 0; color: var(--muted); line-height: 1.55; }

.reviewGrid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (max-width: 980px){ .reviewGrid{ grid-template-columns: 1fr; } }
.review{ border:1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 16px; padding: 12px; }
.reviewTop{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.reviewName{ font-weight: 860; }
.reviewMeta{ color: var(--muted); font-size: 12.5px; }
.review p{ margin: 8px 0 0 0; color: var(--muted); line-height: 1.5; }

.faq{ border:1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 16px; padding: 12px; }
.faq details{ border-top: 1px solid var(--line); padding: 10px 0; }
.faq details:first-child{ border-top: none; padding-top: 0; }
.faq summary{ cursor:pointer; font-weight: 820; }
.faq p{ margin: 8px 0 0 0; color: var(--muted); line-height: 1.5; }

.footerLinks{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.smallPrint{ margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Make anchor focus obvious on mobile */
:focus-visible{ outline: 3px solid rgba(14,167,90,.35); outline-offset: 2px; border-radius: 10px; }