/* Pricing page. Shared design system (tokens, reset, nav, footer, focus,
   reduced-motion) lives in assets/base.css. The plan-card and doc rules below
   reuse the patterns established by the route pages (kiln-cloud / get-started)
   so this page reads as one family with the rest of the site. */

/* ============ PAGE HERO ============ */
.phero{padding:64px 0 8px}
.phero .wrap{max-width:920px}
.phero h1{font-family:var(--display);font-weight:780;font-size:clamp(2.5rem,5.4vw,3.9rem);line-height:.99;letter-spacing:-.025em;margin:16px 0 0}
.phero h1 .it{color:var(--clay)}
.phero .sub{font-size:1.22rem;color:var(--ink-soft);max-width:58ch;margin-top:22px;line-height:1.55}

/* ============ PLAN CARDS ============ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:44px 0 8px}
@media(max-width:960px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:32px 30px;transition:border-color .15s,box-shadow .15s,transform .15s}
.plan:hover{border-color:var(--clay);box-shadow:var(--shadow);transform:translateY(-2px)}
.plan.rec{border-color:var(--clay);background:linear-gradient(180deg,var(--wash-clay),var(--card) 55%)}
.plan .tl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay-deep)}
.plan h2{font-family:var(--display);font-weight:740;font-size:1.7rem;margin:12px 0 2px;letter-spacing:-.02em}
.plan .who{font-size:14.5px;color:var(--ink-faint);margin:0 0 18px}
.plan .price-row{display:flex;align-items:baseline;gap:10px;padding-top:18px;border-top:1px solid var(--edge);margin-bottom:6px}
.plan .price{font-family:var(--display);font-weight:760;font-size:2.5rem;letter-spacing:-.025em;line-height:1}
.plan .per{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}
.plan .billnote{font-size:13.5px;color:var(--ink-faint);margin:4px 0 20px}
.plan ul{list-style:none;margin:0 0 26px;padding:0}
.plan li{position:relative;padding-left:26px;font-size:15.5px;color:var(--ink-soft);line-height:1.5;margin:11px 0}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:13px;border-radius:50%;
  background:var(--clay);box-shadow:inset 0 0 0 3px var(--card)}
.plan.rec li::before{box-shadow:inset 0 0 0 3px var(--cream)}
.plan li strong{color:var(--ink);font-weight:600}
.plan li code{font-family:var(--mono);font-size:13px;color:var(--clay-deep);background:var(--wash-clay);padding:1px 6px;border-radius:5px}
.plan .cta{margin-top:auto}
.plan .cta .btn{width:100%;justify-content:center;font-size:16px;padding:14px 24px;border-radius:999px}

/* ============ MoR / BILLING NOTE ============ */
.mor{max-width:780px;margin:38px auto 0;padding:0 28px}
.mor .callout{border-radius:var(--r);padding:20px 24px;font-size:15.5px;line-height:1.62;background:var(--wash-clay);border:1px solid var(--clay-soft)}
.mor .callout strong{color:var(--ink)}
.mor .callout a{color:var(--clay-deep);text-decoration:underline;text-decoration-color:var(--clay-soft);text-underline-offset:2px}
.mor .callout a:hover{text-decoration-color:var(--clay-deep)}

/* ============ DOC BODY (shared with route pages) ============ */
.doc{max-width:780px;margin:0 auto;padding:0 28px}
.doc h2.sec{font-family:var(--display);font-weight:740;font-size:1.9rem;letter-spacing:-.02em;margin:18px 0 6px;padding-top:34px;border-top:2px solid var(--ink)}
.doc h2.sec .it{color:var(--clay)}
.doc p{font-size:16.5px;color:var(--ink-soft);margin:12px 0;line-height:1.66;max-width:64ch}
.doc p strong{color:var(--ink);font-weight:600}
.doc em{font-family:var(--serif);font-style:italic}
.doc a{color:var(--clay-deep);text-decoration:underline;text-decoration-color:var(--clay-soft);text-underline-offset:2px}
.doc a:hover{text-decoration-color:var(--clay-deep)}

/* faq */
.faq{display:grid;gap:0;margin-top:6px}
.faq .q{padding:22px 0;border-bottom:1px solid var(--edge)}
.faq .q:last-child{border-bottom:none}
.faq .q h3{font-family:var(--display);font-weight:640;font-size:1.12rem;margin:0 0 6px;letter-spacing:-.01em}
.faq .q p{margin:0;font-size:15.5px;color:var(--ink-soft);line-height:1.6;max-width:66ch}
.faq .q p code{font-family:var(--mono);font-size:13.5px;color:var(--clay-deep);background:var(--wash-clay);padding:1px 6px;border-radius:5px}
.faq .q a{color:var(--clay-deep);text-decoration:underline;text-decoration-color:var(--clay-soft);text-underline-offset:2px}

section{padding:72px 0;position:relative}
.head{max-width:840px;margin:0 auto;text-align:center}
.head h2{font-family:var(--display);font-weight:740;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.02;letter-spacing:-.022em}
.head h2 .it{color:var(--clay)}
.head .lead{font-size:1.15rem;color:var(--ink-soft);margin:18px auto 0;max-width:54ch;line-height:1.55}
.band-blue{background:var(--wash-blue)}
footer{margin-top:30px}
@media(max-width:880px){section{padding:56px 0}.phero{padding:40px 0 4px}}

/* ============ FORMERLY INLINE (style="" attributes moved here so the page can run under a strict Content-Security-Policy) ============ */
section.flush-top{padding-top:0}
.wrap.wrap-plans{max-width:1120px}
.doc.doc-center{padding-top:6px;text-align:center}
.doc p.p-center{max-width:62ch;margin-left:auto;margin-right:auto}
.doc.doc-gap{margin-top:30px}