/* Shared public content layout CSS
   Header/footer intentionally untouched. */

:root{
  --pc-bg:#f5f7fb;
  --pc-surface:#ffffff;
  --pc-surface-2:#f8fbff;
  --pc-line:#e5ebf3;
  --pc-line-strong:#d6dfeb;
  --pc-text:#0f172a;
  --pc-muted:#5b6474;
  --pc-blue:#1f5eff;
  --pc-green:#0ea5a4;
  --pc-shadow:0 18px 50px rgba(15,23,42,.08);
  --pc-shadow-lg:0 26px 80px rgba(15,23,42,.12);
}

main{display:block}
main .page-hero{padding:46px 0 28px}
main .page-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:34px;
  align-items:center;
}
main .breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:#738096;
  font-size:.94rem;
}
main .breadcrumbs a{color:#4f627d;text-decoration:none}
main .breadcrumbs a:hover{text-decoration:underline}
main .breadcrumbs .sep{opacity:.6}
main .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--pc-blue);
}
main .eyebrow::before{
  content:'';
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--pc-blue),var(--pc-green));
  box-shadow:0 0 0 6px rgba(31,94,255,.10);
}
main .page-hero h1{
  margin:0 0 16px;
  font-size:clamp(2.4rem,5vw,4.8rem);
  line-height:1.02;
  letter-spacing:-.045em;
  max-width:12ch;
}
main .lead{
  margin:0;
  max-width:760px;
  color:#435066;
  font-size:1.04rem;
  line-height:1.82;
}
main .hero-actions,
main .btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
main .hero-note-list,
main .list-check{
  margin:24px 0 0;
  padding-left:18px;
  color:var(--pc-muted);
}
main .hero-note-list li,
main .list-check li{
  margin:0 0 10px;
  line-height:1.62;
}
main .showcase-card,
main .visual-card{
  background:linear-gradient(135deg,#ffffff 0%,#f6fbff 48%,#eef8f7 100%);
  border:1px solid var(--pc-line);
  border-radius:30px;
  padding:24px;
  box-shadow:var(--pc-shadow-lg);
}
main .showcase-card img,
main .visual-card img{
  width:100%;
  height:auto;
  object-fit:contain;
}
main .section{padding:78px 0}
main .section.alt{background:linear-gradient(180deg,#f8fbff 0%,#f2f7fd 100%)}
main .section-head{
  max-width:920px;
  margin:0 0 26px;
}
main .section-head h2{
  margin:0 0 14px;
  font-size:clamp(1.95rem,3vw,2.8rem);
  line-height:1.08;
  letter-spacing:-.03em;
}
main .section-head p{
  margin:0;
  color:var(--pc-muted);
  font-size:1.02rem;
  line-height:1.82;
}

main .card-grid-3,
main .pricing-grid,
main .faq-grid,
main .grid-2,
main .contact-grid,
main .feature-split{
  display:grid;
  gap:18px;
}
main .card-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
main .pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
main .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
main .grid-2,
main .contact-grid,
main .feature-split{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}

main .feature-card,
main .price-card,
main .faq-item,
main .callout,
main .path-card,
main .quick-fact{
  background:#fff;
  border:1px solid var(--pc-line);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--pc-shadow);
}
main .feature-card{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
main .feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 68px rgba(15,23,42,.11);
  border-color:#cfdbeb;
}
main .feature-card h3,
main .price-card h3,
main .callout h3,
main .faq-item h4,
main .path-card h3{
  margin:0 0 10px;
  line-height:1.28;
}
main .feature-card p,
main .price-card p,
main .callout p,
main .faq-item p,
main .path-card p,
main .copy-block p{
  margin:0;
  color:var(--pc-muted);
  line-height:1.78;
}

main .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:14px;
}
main .badge.core{background:#eef4ff;color:#214fda}
main .badge.growth{background:#e9faf7;color:#0b8f86}
main .badge.dark{background:#0f172a;color:#fff}
main .popular-tag{margin-left:8px}

main .link{
  display:inline-block;
  margin-top:14px;
  font-weight:800;
  color:var(--pc-blue);
}

main .copy-block h2{
  margin:0 0 14px;
  font-size:clamp(1.9rem,3vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.03em;
}

main .price-card{position:relative}
main .price-card.featured{
  border-color:#cfdcff;
  box-shadow:0 28px 80px rgba(31,94,255,.12);
}
main .plan-note{min-height:84px}
main .price{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:18px 0 6px;
}
main .price strong{
  font-size:2.5rem;
  line-height:1;
  letter-spacing:-.04em;
}
main .price span{color:var(--pc-muted);font-size:.96rem}
main .unit-note{
  color:#4e5f77;
  font-size:.92rem;
  font-weight:700;
  margin-bottom:14px;
}
main .price-card ul{
  margin:14px 0 18px;
  padding-left:18px;
  color:var(--pc-muted);
}
main .price-card li{
  margin:0 0 9px;
  line-height:1.58;
}

main .table-wrap{
  background:#fff;
  border:1px solid var(--pc-line);
  border-radius:26px;
  overflow:auto;
  box-shadow:var(--pc-shadow);
}
main .compare-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
main .compare-table th,
main .compare-table td{
  padding:16px 18px;
  border-bottom:1px solid var(--pc-line);
  text-align:left;
  font-size:.95rem;
}
main .compare-table thead th{
  background:#f7fbff;
  color:#22314f;
  font-size:.9rem;
  font-weight:800;
}
main .compare-table tbody td{color:var(--pc-muted)}
main .compare-table tbody td:first-child{
  color:var(--pc-text);
  font-weight:700;
}

main .contact-stack,
main .quick-facts{display:grid;gap:18px}

@media (max-width:1180px){
  main .page-grid,
  main .card-grid-3,
  main .pricing-grid,
  main .feature-split{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:980px){
  main .page-grid,
  main .card-grid-3,
  main .pricing-grid,
  main .faq-grid,
  main .grid-2,
  main .contact-grid,
  main .feature-split{
    grid-template-columns:1fr;
  }
  main .page-hero h1{max-width:none}
}
@media (max-width:640px){
  main .page-hero{padding:34px 0 22px}
  main .showcase-card,
  main .visual-card,
  main .feature-card,
  main .price-card,
  main .faq-item,
  main .callout,
  main .path-card,
  main .quick-fact{
    padding:20px;
    border-radius:22px;
  }
}