/* t·AI·pset — the Pricing page (app/views/home/pricing.php).
   Loaded after site.css and uses its colours, fonts, buttons and cards. The parts and their order
   follow the design mockup "tAIpset pricing page". */

/* text sections keep a readable width, but line up on the left with the cards */
.p-narrow > *{max-width:820px}

/* the heading */
.p-hero{padding-block:clamp(48px,7vw,88px) 28px}
.p-hero .wrap{display:grid;gap:16px}
.p-hero h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.p-lede{margin:0;font-size:1.1rem;color:var(--muted);max-width:68ch}

/* the two prices */
.p-plans-wrap{padding-block:12px 40px}
.p-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.p-plan{display:grid;gap:16px;align-content:start;padding:clamp(24px,4vw,36px);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -30px rgba(34,48,60,.45)}
.p-plan-free{border:2px solid var(--gold);background:linear-gradient(180deg,var(--gold-l),var(--paper) 55%)}
.p-plan-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.p-plan-head h2{font-size:1.5rem}
.p-tag{padding:5px 12px;border-radius:999px;background:var(--tint);color:var(--teal-d);font:700 .74rem/1 var(--body);
  letter-spacing:.08em;text-transform:uppercase}
.p-price{font:700 clamp(2.6rem,6vw,3.6rem)/1 var(--display);color:var(--ink)}
.p-price-text{font-size:clamp(1.9rem,4vw,2.4rem)}
.p-plan p{margin:0;color:var(--muted)}
.p-plan .btn{justify-self:start;align-self:end}
/* side by side, the two cards share their rows (heading, price, text, button), so the prices, the
   texts and the buttons line up across both cards */
@supports (grid-template-rows:subgrid){
  .p-plans{grid-auto-rows:auto}
  .p-plan{grid-row:span 4;grid-template-rows:subgrid;row-gap:16px}
  .p-price{align-self:end}                 /* "Based on scope" sits on the same line as "Free" */
}

/* how it works: four numbered steps */
.p-how .head{margin-bottom:32px}
.p-steps{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.p-steps li{display:grid;gap:10px;align-content:start;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s)}
.p-num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;
  font:700 1rem/1 var(--body)}
.p-steps h3{font-size:1.15rem}
.p-steps p{margin:0;color:var(--muted);font-size:.95rem}

/* what shapes the price */
.p-factors{padding-top:0}
.p-factors h2{margin-bottom:28px}
.p-factor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.p-factor-grid h3{font-size:1.15rem}
.p-factor-grid p{margin:0;color:var(--muted)}

/* common questions */
.p-faq{padding-top:0}
.p-faq h2{margin-bottom:22px}
.p-q{padding:20px 0;border-top:1px solid var(--line)}
.p-q h3{font-size:1.15rem;margin-bottom:6px}
.p-q p{margin:0;color:var(--muted)}
.p-small{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:.86rem;color:var(--soft)}
.p-small a{color:var(--teal-d)}