/* Public pages for one use each (usecase.html) and the price list
   (pricing.html). Sits on top of landing.css. */
.page main{max-width:1080px;margin:0 auto;padding:0 20px}
.page-hero{padding:clamp(36px,6vw,80px) 0 clamp(20px,3vw,36px);display:grid;gap:18px;justify-items:start}
.page-hero h1{margin:0;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.06;font-weight:640;font-stretch:112%;max-width:20ch;text-wrap:balance}
.page-hero .lead{margin:0;max-width:66ch;font-size:clamp(1.02rem,1.5vw,1.2rem);color:#c7d0dc;line-height:1.55}
.crumb{margin:0;font-size:13.5px;color:var(--steel)}
.crumb a{color:var(--signal-hi);text-decoration:none}
.from{margin:0;font-size:14.5px;color:var(--steel)}
.page-shot{padding:10px 0 0}
.page-shot .frame{margin:0;border-radius:20px;padding:10px;display:grid;gap:10px}
.page-shot .shot{width:100%;height:auto;border-radius:12px;display:block}
.page-shot figcaption{font-size:14px;color:var(--steel);padding:2px 6px 4px;line-height:1.5}
.page-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:clamp(32px,5vw,64px) 0 0}
.page-body article{border-radius:18px;padding:22px;display:grid;gap:10px;align-content:start}
.page-body h2{margin:0;font-size:1.25rem;line-height:1.2}
.page-body p{margin:0;color:#b9c4d3;line-height:1.6;font-size:15.5px}
.page-includes{padding:clamp(32px,5vw,64px) 0 0}
.page-includes h2,.price-examples h2,.related h2{margin:0 0 14px;font-size:clamp(1.4rem,2.6vw,2rem)}
.page-includes ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
.page-includes li{position:relative;padding-left:28px;color:#d6deea;line-height:1.5}
.page-includes li::before{content:"";position:absolute;left:4px;top:.45em;width:11px;height:6px;border-left:2px solid var(--signal-hi);border-bottom:2px solid var(--signal-hi);transform:rotate(-45deg)}
.page .faq{max-width:none;padding:clamp(32px,5vw,64px) 0 0}
.page .faq details{padding:14px 18px;margin:0 0 10px;border-radius:14px}
.page .faq summary{cursor:pointer;font-weight:600;font-size:1.05rem}
.page .faq details p{margin:.6rem 0 0;line-height:1.55;opacity:.9}
.related{max-width:1080px;margin:0 auto;padding:clamp(32px,5vw,64px) 20px clamp(28px,4vw,48px)}
.related ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.related a{display:flex;justify-content:space-between;gap:10px;border-radius:14px;padding:14px 16px;color:var(--frost);text-decoration:none;font-weight:560}
.related a span{color:var(--signal-hi)}
.related a:hover{border-color:rgba(122,164,255,.55)}
.price-tables .glass{border-radius:18px;padding:6px 18px;overflow-x:auto}
table.prices{width:100%;border-collapse:collapse;font-size:15.5px}
table.prices th,table.prices td{text-align:left;padding:12px 8px;border-bottom:1px solid rgba(200,220,255,.1)}
table.prices thead th{font-size:13px;color:var(--steel);font-weight:500}
table.prices .num{text-align:right;font-variant-numeric:tabular-nums}
table.prices tr.group th{padding-top:22px;color:var(--signal-hi);font-size:13px;font-stretch:87.5%;letter-spacing:.03em;text-transform:uppercase}
table.prices tbody tr:last-child td{border-bottom:0}
table.prices small{color:var(--steel);margin-left:6px}
.price-examples{padding:clamp(32px,5vw,64px) 0 0}
.price-examples ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.price-examples li{border-radius:16px;padding:18px;display:grid;gap:6px;align-content:start}
.price-examples h3{margin:0;font-size:1.05rem}
.price-examples .cfg{margin:0;font-size:13.5px;color:var(--steel);line-height:1.45}
.price-examples .big{margin:8px 0 0;font-size:15px;color:#b9c4d3}
.price-examples .big b{font-size:1.9rem;font-weight:640;font-stretch:112%;color:var(--frost)}
.price-examples .big span{color:var(--steel)}
.price-examples .small{margin:0;font-size:13px;color:var(--steel)}
@media (max-width:900px){
  .page-body{grid-template-columns:1fr}
  .related ul,.price-examples ul{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .page-includes ul,.related ul,.price-examples ul{grid-template-columns:1fr}
}