/* ═══════════════════════════════════════════════════════════════════════════
   The pricing block — one stylesheet, one markup partial, every page.

   /get used to have its own hand-written cards: no badge, no ticks, no
   buttons, and its own wording for the same features ("Home dashboard & score"
   on one page, "Home dashboard & Gut Regularity Score" on the other). Two
   people describing the same product differently on two pages of the same
   site, because the markup was written twice.

   Everything here is scoped under .pricing-block on purpose. Both pages
   already have their own .card, .price, .note and .badge rules that mean
   different things, and this repo has form for class collisions — a .bar for
   a search row once restyled every progress bar on the dashboard. Scoping
   means this file cannot reach anything it was not meant to.

   It relies only on variables both pages define: --brown-600, --ink, --muted,
   --line.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The block does not inherit from the page it is dropped into ──────────
   Two things went wrong the first time this was reused, and both were the same
   mistake: assuming the host page's context.

   `text-align` — /get sets main{text-align:center}, so every card came out
   centred while the homepage's were left-aligned. Same markup, same
   stylesheet, different page, different-looking component. A reusable block
   has to state its own alignment rather than inherit one.

   `padding-top` — the "Most popular" badge is absolutely positioned at
   top:-14px and overhangs the card it sits on. The homepage happens to have a
   heading and a paragraph above the grid, so the overhang landed in their
   margins and nobody noticed. On /get the block sits directly under a line of
   text and the badge printed on top of it. The clearance belongs to the badge,
   so it belongs in here — not in whatever happens to be above. */
.pricing-block{text-align:left;line-height:1.55;padding-top:34px}

.pricing-block .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:800px;
                           margin:0 auto;align-items:stretch}
@media(max-width:720px){.pricing-block .price-grid{grid-template-columns:1fr;gap:26px}}

.pricing-block .plan{background:#fff;border-radius:22px;padding:32px 30px;border:1px solid var(--line);
                     display:flex;flex-direction:column}
/* The highlighted plan gets a ring and lift rather than a heavy border, so
   the badge can sit on the edge without fighting a 2px line. */
.pricing-block .plan.pro{border-color:transparent;position:relative;
                         box-shadow:0 0 0 2px var(--brown-600), 0 18px 44px rgba(124,92,62,.14)}
.pricing-block .plan .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
                            background:var(--brown-600);color:#fff;font-size:12px;font-weight:800;
                            letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;
                            border-radius:999px;white-space:nowrap}
.pricing-block .plan h3{font-size:15px;color:var(--muted);font-weight:800;letter-spacing:.08em;
                        text-transform:uppercase}
.pricing-block .plan .cost{font-size:46px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
                           margin:10px 0 2px;line-height:1}
.pricing-block .plan .cost .per{font-size:16px;color:var(--muted);font-weight:600;letter-spacing:0}
.pricing-block .plan ul{list-style:none;margin-top:22px;padding-top:22px;
                        border-top:1px solid var(--line);
                        display:flex;flex-direction:column;gap:13px}
.pricing-block .plan li{padding-left:30px;position:relative;color:#3A3026;font-size:15.5px;
                        line-height:1.45}
/* Brand-coloured tick in a soft disc — the old bright green belonged to a
   different palette entirely. */
.pricing-block .plan li:before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;
                               border-radius:50%;background:#F0E7DA;color:var(--brown-600);
                               font-size:12px;font-weight:800;display:grid;place-items:center}
.pricing-block .plan.pro li:before{background:var(--brown-600);color:#fff}
.pricing-block .plan .plan-cta{display:block;margin-top:auto;padding-top:28px}

/* The buttons are defined here rather than borrowed from the page. index.html
   has a .btn; get.html has none, so the shared markup would have rendered two
   bare links there — the partial has to bring everything it needs. */
.pricing-block .plan-cta a{display:block;width:100%;text-align:center;padding:16px 26px;
                           border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;
                           background:var(--brown-600);color:#fff;
                           transition:transform .15s ease,box-shadow .15s ease}
.pricing-block .plan-cta a:hover{transform:translateY(-1px);
                                 box-shadow:0 10px 24px rgba(124,92,62,.22)}
.pricing-block .plan-cta a.ghost{background:#fff;color:var(--brown-700);border:1px solid var(--line)}

.pricing-block .pricing-note{text-align:center;margin-top:18px;font-size:14px;color:var(--muted)}

@media(max-width:640px){ .pricing-block .plan{padding:26px} }