/*
 * botany.tech: the plans block (pricing-plans.css), on /pricing and on the
 * home's #plans. The owner's pick of the v2 variants, B (01.11.2026): four
 * cards of one height on white, Demo first, then Beginner, Pro, Master. Each
 * card: name, one line of what it gives, every fact on a white receipt
 * (values in mono), then the price in mono and one action at the foot (the
 * owner: all the rows back, the price under them as before). The cards
 * grey (--s2); Pro black with the citrine Recommended tag and the citrine
 * press, as before. No marks. Everything else is in Compare plans (a dialog
 * on the home, subs.css CMPA; the table further down on /pricing). Scoped
 * under .pp; the section carrying it takes .pp-sec. Prices follow site.js
 * initBilling ([data-price-*], [data-per-*]); the swipe row, its dots and
 * the mouse drag are pricing-plans.js.
 */
.pp-sec{background:var(--s0);overflow-x:clip}
/* /pricing: the hero above the plates stands on the same ground */
.pr-hero.pp-sec{padding-bottom:28px}
.pr-plans.pp-sec{padding:0 0 56px}
@media (min-width:1000px){.pr-hero.pp-sec{padding-bottom:56px}.pr-plans.pp-sec{padding-bottom:96px}}
.pp{max-width:1200px;margin-inline:auto}
/* the toggle's track grey, as the cards, on the white ground */
.pp-sec .toggle{background:var(--s2)}
.pp-sec .sub-top + .pp{margin-top:32px}
@media (min-width:1000px){.pp-sec .sub-top + .pp{margin-top:48px}}

/* ---------- phone first: a scroll-snap row of full cards ---------- */
.pp .plates-wrap{margin-inline:calc(var(--gutter) * -1)}
.pp .plates{--pw:min(300px,80vw);display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:auto;cursor:grab;scroll-snap-type:x mandatory;
  padding:0 calc(50% - var(--pw) / 2);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pp .plates::-webkit-scrollbar{display:none}
.pp .plates.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.pp .plates.is-drag *{cursor:grabbing!important}
.pp .plates:focus-visible{outline:2px solid var(--ink900);outline-offset:-2px;border-radius:var(--r-plate)}
/* positioned, so the .sr-only words inside a card stay inside the row's clip */
.pp .plate{position:relative;flex:0 0 var(--pw);scroll-snap-align:center;display:flex;flex-direction:column;background:var(--s2);border-radius:var(--r-plate);padding:24px 20px 20px;color:var(--ink900)}
.pp .plate--pro{background:var(--solid-bg);color:var(--solid-fg);--ink900:var(--solid-fg);--ink500:#BEC0B2}

/* the name, Recommended beside it on Pro: the site's .tag in citrine */
.pp .plate-top{display:flex;align-items:center;gap:10px;min-height:32px}
.pp .plate-name{font-size:26px;line-height:32px;font-weight:500;letter-spacing:-.025em}
.pp .plate-rec{border-color:var(--cit500);color:var(--cit500)}
.pp .plate-for{margin:4px 0 20px;min-height:44px;font-size:15px;line-height:22px;color:var(--ink500)}

.pp .plate-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;white-space:nowrap}
.pp .plate-amount{font-family:var(--mono);font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.03em}
.pp .plate-was{font-size:14px;line-height:20px;color:var(--ink500);text-decoration:line-through;font-weight:400}
.pp .plate-per{font-size:14px;line-height:20px;color:var(--ink500)}
.pp .plate-note{min-height:20px;margin:2px 0 16px;font-size:13px;line-height:20px;color:var(--ink500)}

/* the app's receipt (.sumrow) on white inside the grey card (on Pro the step
   over black): label left a size up in full ink, value right in the brand's
   mono, words too; a hairline between rows */
.pp .receipt{--lab:var(--ink900);margin:0 0 20px;padding:4px 16px;border-radius:var(--r-inner);background:var(--s0);font-size:15px;line-height:22px}
.pp .plate--pro .receipt{background:var(--solid-bg-hover);--rule:rgba(255,255,255,.1);--lab:#F1F2EA}
.pp .rrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0}
.pp .rrow + .rrow{border-top:1px solid var(--rule,var(--l100))}
.pp .rrow dt{color:var(--lab);font-weight:400;min-width:0}
.pp .rrow dd{font-family:var(--mono);font-size:14px;letter-spacing:-.01em;color:var(--ink900);font-weight:500;text-align:right;white-space:nowrap}
.pp .rrow dd.nil{color:var(--ink300);font-weight:400}
.pp .plate--pro .rrow dd.nil{color:#8B8D7F}
/* "never of a loss" under Our share of profit, quietly (owner, 01.11.2026) */
.pp .rrow-sub{display:block;font-size:12px;line-height:16px;color:var(--ink500)}

/* the one action, pinned to the foot so the four line up; pills as the live
   site's: Try on demo black, Choose Pro citrine, the others outlined */
.pp .plate > .btn{height:40px;font-size:14px;line-height:20px}
.pp .btn-quiet{background:transparent;color:var(--ink900);border-color:rgba(22,21,20,.24);font-weight:500}
@media (hover:hover) and (pointer:fine){.pp .btn-quiet:hover{background:var(--s3);border-color:var(--ink900)}}
.pp .plate .btn:focus-visible{outline:2px solid var(--ink900);outline-offset:2px}
.pp .plate--pro .btn:focus-visible{outline-color:var(--solid-fg)}

/* position under the row, phone only */
.pp .dots{display:flex;justify-content:center;gap:2px;margin-top:12px}
.pp .dots button{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer}
.pp .dots button::before{content:'';width:6px;height:6px;border-radius:999px;background:var(--l500);transition:background-color .2s,width .2s}
.pp .dots button[aria-current="true"]::before{background:var(--ink900);width:16px}

/* Compare plans: a quiet text link under the row */
.pp-more{display:flex;justify-content:center;margin-top:24px}
.pp-more a{padding:6px 4px;font-size:15px;line-height:22px;font-weight:500;color:var(--ink500);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--l300);transition:color .18s,text-decoration-color .18s}
@media (hover:hover) and (pointer:fine){.pp-more a:hover{color:var(--ink900);text-decoration-color:currentColor}}
.pp-more a:focus-visible{outline:2px solid var(--ink900);outline-offset:2px;border-radius:4px}

/* ---------- from 1000: four cards in a row, one height ---------- */
@media (min-width:1000px){
.pp .plates-wrap{margin-inline:0}
.pp .plates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:visible;cursor:auto;padding:0;align-items:stretch}
.pp .plates:focus-visible{outline:none}
.pp .plate{flex:none;padding:28px 22px 22px}
.pp .dots{display:none}
.pp-more{margin-top:32px}
}