/* --- Base layout --- */
:root{
  --line:#e7eaf1;
  --muted:#5a647a;
  --text:#000;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:underline}
h1,h2,h3{margin:0 0 10px}
p{margin:0 0 12px}

/* Containers & sections */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:48px 0}

/* Topbar & hero */
.topbar{border-bottom:1px solid transparent}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 12px}
.hero p{color:var(--muted);max-width:72ch}

/* Buttons */
.btn{
  background:#000;color:#fff;border:0;border-radius:12px;
  padding:12px 18px;font-weight:700;cursor:pointer;
  transition:.15s transform ease,.2s background-color ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:#000}

/* Grid & cards */
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#fff;border:none;border-radius:var(--radius);padding:18px}
.card h3{margin:0 0 6px}
.kv{color:var(--muted);font-size:14px}

/* Pricing tables (the border itself is enforced via inline CSS in index.html on #pricing .card) */
.price-table{width:100%;border-collapse:collapse}
.price-table th,.price-table td{padding:10px 8px;text-align:left}
.price-table th{font-weight:700}
.small{color:var(--muted);font-size:14px}

/* Builder summary */
.builder{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:960px){.builder{grid-template-columns:1.2fr .8fr}}
.group{background:#fff;border:none;border-radius:var(--radius);padding:18px}
.group h2{margin:0 0 8px}
.select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.summary .row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.summary .row:last-child{border-bottom:0}
.summary .total{font-weight:800}

/* Footer */
.footer{padding:24px 0;border-top:1px solid transparent}
.footer .right{float:right}

/* --- FEATURES block --- */
.features-block{padding-top:8px}
.features-heading{font-size:40px;line-height:1.15;margin:0 0 24px;text-align:center}
.features-grid{
  list-style:none;display:grid;gap:64px 48px;padding:0;margin:0;
  grid-template-columns:repeat(1,minmax(0,1fr));align-items:start
}
@media (min-width:720px){
  .features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .features-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.feature-item{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start}
.feature-item .feature-icon{width:96px;height:96px}
.feature-item h3{margin:4px 0 6px 0;font-size:22px;font-weight:800}
.feature-item p{margin:0;line-height:1.5;font-size:16px}
.feature-item svg{display:block;width:96px;height:96px}