/* home.css — landing page sections only. Shared tokens/header/buttons
   come from style.css, so this stays in sync with the rest of the app. */

#app{overflow-y:auto;}

.hero{
  padding:72px 24px 60px;text-align:center;max-width:720px;margin:0 auto;
}
.hero h1{font-size:34px;font-weight:700;line-height:1.25;margin:0 0 16px;color:var(--text);}
.hero h1 .accent{color:var(--blue);}
.hero p{font-size:16px;color:var(--muted);line-height:1.6;margin:0 0 32px;}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px;}
.hero-ctas a{text-decoration:none;font-size:14.5px;padding:12px 24px;}

/* Small static illustration echoing what the product actually renders */
.hero-illustration{display:flex;justify-content:center;margin-bottom:8px;}
.hero-array{display:inline-grid;grid-template-columns:repeat(8,44px);grid-template-rows:44px 16px 16px;gap:6px;}
.hero-array .array-box.hl{transform:translateY(-4px);}

.section{max-width:960px;margin:0 auto;padding:40px 24px;}
.section-title{font-size:22px;font-weight:600;text-align:center;margin:0 0 8px;color:var(--text);}
.section-sub{font-size:14px;color:var(--muted);text-align:center;margin:0 0 36px;}

.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.feature-card{
  border:1px solid var(--border);border-radius:var(--radius);padding:20px 18px;
  background:var(--surface);text-align:left;
}
.feature-icon{font-size:22px;margin-bottom:10px;}
.feature-title{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:6px;}
.feature-desc{font-size:12.5px;color:var(--muted);line-height:1.55;}

.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:600px;margin:0 auto;}
.pricing-card{
  border:1px solid var(--border);border-radius:var(--radius);padding:24px 22px;
  background:var(--surface);text-align:left;
}
.pricing-card.pro{border-color:var(--blue);background:var(--blue-dim);}
.pricing-plan{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--muted);margin-bottom:8px;}
.pricing-card.pro .pricing-plan{color:var(--blue);}
.pricing-amount{font-size:26px;font-weight:700;color:var(--text);margin-bottom:4px;}
.pricing-amount span{font-size:13px;font-weight:400;color:var(--muted);}
.pricing-list{list-style:none;padding:0;margin:14px 0 0;font-size:13px;color:var(--text);line-height:2;}
.pricing-list li::before{content:"✓ ";color:var(--green);font-weight:700;}

.footer{text-align:center;padding:32px 24px 48px;font-size:12px;color:var(--muted);border-top:1px solid var(--border);margin-top:20px;}
.footer a{color:var(--muted);}

@media (max-width: 760px){
  .hero{padding:48px 18px 36px;}
  .hero h1{font-size:25px;}
  .hero-array{grid-template-columns:repeat(8, minmax(28px,1fr));}
  .hero-array .array-box{width:auto;height:32px;font-size:11px;}
  .features-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
}