/* pricing.html — page-specific only.
   Loaded after css/site.css and css/plans.css. Card and comparison styling is
   shared; this file covers only what is specific to the dedicated page. */

/* The hero is a section head, not an article hero: pricing should feel safe and
   easy to read, so no dark band and no gradient. */

/* Fixed-nav clearance. The shared nav is 108px tall on desktop and 90px on
   mobile. A 120px hero padding left the headline 12px below it on desktop and
   20px BEHIND it at 900px. 168/150 gives roughly 60px of clearance, which is
   what the founder story reads correctly at. */
body.pp .pricing-hero{padding:168px 0 8px}
body.pp .pricing-hero .sechead{margin-bottom:0}
body.pp .pricing-hero h1{font-size:44px;font-weight:800;letter-spacing:-.03em;
  line-height:1.12;color:var(--ink);margin:0 0 14px;text-wrap:balance}

/* site.css left-aligns .sechead by convention (features.html reads that way).
   Pricing is a centred composition on the homepage and the cards are centred
   here too, so the heads follow them rather than the features page. */
body.pp .sechead{text-align:center;margin-left:auto;margin-right:auto;max-width:660px}
body.pp .sechead .lead{font-size:17.5px;line-height:1.7;color:var(--body);margin-top:14px;text-wrap:pretty}

/* The closing panel, matching the homepage rather than the features page. */
body.pp .cta-panel{max-width:680px;margin:0 auto;text-align:center}
body.pp .cta-panel h2{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.14;margin-bottom:14px}
body.pp .cta-panel p{font-size:17.5px;line-height:1.7;color:var(--body);margin-bottom:28px}
body.pp .cta-panel .btn-grad{display:inline-block;background:var(--grad);color:#fff;font-size:15.5px;
  font-weight:700;padding:15px 28px;border-radius:13px;box-shadow:0 6px 18px rgba(102,126,234,.32)}
body.pp .cta-reassure{margin-top:16px;font-size:13px;color:var(--mute)}

/* Unlike the homepage, the comparison is open. This is the page people come to
   in order to read it. */
body.pp .cmp-open{max-width:820px;margin:0 auto}

@media (max-width:768px){
  body.pp .pricing-hero{padding:150px 0 4px}
  body.pp .pricing-hero h1{font-size:31px}
}

/* ── transition into the comparison ───────────────────────────────────────
   Measured: 192px between the trial note and the Compare Plans heading — 96px
   of lavender bottom padding plus 96px of white top padding, both the shared
   .s default. Two full paddings back to back read as a gap between pages
   rather than between sections.

   The boundary itself is the colour change, so the space either side of it can
   be much smaller. Lavender closes tighter than white opens, which is the same
   rhythm used on the homepage. */
body.pp .pricing{padding-bottom:36px}
body.pp .pricing + .s{padding-top:44px}

/* The trial note belongs to the reassurance row above it, not to the space
   below — it was reading as something that had fallen out of a component. */
body.pp .plan-trust{margin-top:28px}
body.pp .plan-trust-note{margin-top:6px;font-size:12.5px}

/* Column headers carry more weight so the eye can track down a long table. */
body.pp .cmp-table thead th{font-size:12px;color:var(--ink);padding-bottom:14px}
body.pp .cmp-table thead th:not(:first-child){border-bottom:2px solid var(--line)}