/* /pricing, on top of legal.css. Colours, type and radii come from src/styles/tokens.css;
the plan cards style themselves in src/components/Plans.astro. */

/* The page is wider than the 720px reading column: three cards need the room. */
.wrap:has(main.pricing){max-width:var(--site-max,1120px)}
.pricing h1{margin-top:8px}
.pricing .lede{max-width:46ch;text-wrap:pretty}
.pricing .fine{max-width:68ch}
.pricing section{padding-top:56px}
.pricing h2{margin-top:0}

/* Questions: the same look as the home FAQ */
.faq .qa{margin-top:16px;max-width:720px}
.faq details{border-top:1px solid var(--line);padding:12px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;font-weight:700;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--panel);font:400 18px/1 var(--mono);color:var(--fg)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.faq details p{color:var(--muted);margin:0;padding-top:6px;max-width:60ch}
@media (hover:hover){.faq summary:hover{color:var(--accent)}}
.ask{margin-top:20px;color:var(--muted)}

@media (min-width:720px){
.pricing section{padding-top:80px}
}
@media (min-width:1024px){
.pricing h1,.pricing .lede{text-align:center;margin-inline:auto}
.pricing .lede{max-width:52ch}
}

/* The Plus and Family early access form */
.paid .soon{max-width:520px}