/* sections/pricing.html (#pricing): Free and Pro, with the upgrade/waitlist form. Uses core.css tokens.
   Card parts: .price-head / .price-amount / .price-act / .price-feat. From 768px both cards sit on shared rows (subgrid). */
#pricing{background:var(--bg-alt)}
.price-grid{display:grid;gap:var(--space-5);max-width:960px;margin:0 auto;grid-template-columns:minmax(0,1fr)}
.price{--card-pad:clamp(24px,3vw,36px);display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-content:start;box-shadow:var(--shadow-1)}
@media (min-width:768px){
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto 1fr}
  .price{grid-row:span 4;grid-template-rows:subgrid}
}
.price h3{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-h3)}
.price-sub{margin-top:var(--space-2);color:var(--ink-2);font-size:var(--fs-s)}
.price-amount{margin-top:var(--space-6)}
.amount{display:flex;align-items:baseline;gap:6px;color:var(--ink-3);font-size:var(--fs-s)}
.amount span{font:800 clamp(3rem,2.2rem + 2.4vw,4rem)/1 var(--font-display);letter-spacing:-.045em;color:var(--ink)}
.price-note{margin-top:var(--space-3);font-size:var(--fs-xs);color:var(--ink-3)}
.price-act{display:grid;gap:var(--space-3);align-content:start;margin-top:var(--space-6)}
.price-feat{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--line)}
.price-inc{margin-bottom:var(--space-4);font-size:var(--fs-micro);font-weight:650;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-3)}
.price .ticks li{color:var(--ink)}

/* Pro: ringed in cobalt, with a soft glow at the top */
.price-pro{border-color:var(--brand);background:radial-gradient(120% 60% at 100% 0%,var(--glow),transparent 60%),var(--surface);
  box-shadow:0 0 0 1px var(--brand),var(--shadow-3)}
.price-pro .ticks svg{background:var(--brand);color:var(--on-brand)}

/* the actions sit in matching quiet wells (same height on both cards); the form is a first-class component */
.price-act{align-content:stretch}
.price-well,.waitlist{display:grid;gap:var(--space-3);align-content:start;height:100%;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2)}
.price-well .hint{margin:0}
.price-well .btn{white-space:normal;text-align:center}
.price-well .label,.waitlist .label{font-size:var(--fs-xs);font-weight:650;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--ink-2)}
.waitlist .input{background:var(--surface)}
.waitlist .btn svg{width:16px;height:16px;transition:transform var(--d-2) var(--ease-out)}
.waitlist .btn:hover svg{transform:translateX(2px)}
.waitlist .hint{margin:0}
.waitlist .form-note{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:var(--r-s);font-size:var(--fs-s);line-height:1.45}
.waitlist .form-note svg{flex:none;width:18px;height:18px;margin-top:1px}
.waitlist .form-note-ok{background:var(--ok-soft)}
.waitlist .form-note-error{background:var(--err-soft)}
.price-foot{margin-top:var(--space-6);text-align:center;font-size:var(--fs-s);color:var(--ink-3)}
.price-foot a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2)}
.price-foot a:hover{color:var(--accent-hover)}