/*
 * botany.tech — home v8, Subscriptions (in place of Profit share).
 * On top of site.css (PLAN, TOGGLE); here only what the block adds:
 *
 *   section.sub > .sub-head
 *               > .sub-calc[data-sub]
 *                   .sub-top > .toggle[data-billing]   Monthly / Yearly
 *                   .plans.sub-plans > article.plan    the pricing page's four
 *                   .sub-under, .sub-cta  Compare plans
 *               > dialog.sub-dlg (.sub-dlg-h, table.cmp from pricing.css)
 */

/* the billing toggle, then the four cards */
.sub-head{margin-bottom:24px}
.sub-top{display:flex;justify-content:center}
.sub-top .toggle-opt{min-width:104px;justify-content:center}
.sub-plans{margin-top:32px}
/* the pricing page's card tweaks (pricing.css R2), for these four */
.sub-plans .plan-price{flex-wrap:nowrap;white-space:nowrap;gap:8px}
.sub-plans .plan-note{margin-top:8px}
.sub-under{margin:24px auto 0;text-align:center;font-size:14px;line-height:20px;color:var(--ink500)}
.sub-cta{display:flex;width:max-content;margin:16px auto 0}
@media (max-width:639px){
  .sub-plans .plan--rec{margin-top:8px}
  .sub-plans .plan-for{min-height:0}
}
@media (min-width:1024px) and (max-width:1199px){
  .sub-plans .plan{padding:20px}
  .sub-plans .plan--rec{padding:19px}
  .sub-plans .plan--rec .plan-tag{left:19px}
  .sub-plans .plan-amount{font-size:38px;line-height:48px}
  .sub-plans .plan-list li{font-size:13.5px}
}

/* Compare plans */
.sub-dlg{width:min(880px,calc(100vw - 24px));max-height:calc(100dvh - 48px);margin:auto;padding:20px;
  border:0;border-radius:var(--r-plate);background:var(--s0);color:var(--ink900);overflow:auto;overscroll-behavior:contain}
.sub-dlg::backdrop{background:rgb(18 20 12/.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sub-dlg-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.sub-dlg-h .h3{margin:0}
.sub-dlg-h .iconbtn{display:inline-flex;align-items:center;justify-content:center;color:var(--ink900);background:var(--s0)}
@media (min-width:640px){.sub-dlg{padding:28px}.sub-dlg-h{margin-bottom:20px}}

/* CMPA: the table of pricing variant A (owner, 01.11.2026). The switch sits
   in the head beside the title; the paid plans are columns, names and prices
   (mono) in the head with one quiet Choose, the facts in rows with values in
   mono, hairlines only; Demo a grey plate at the foot. No line over Pro. */
.cmpa{width:min(960px,calc(100vw - 24px))}
.cmpa .sub-dlg-h{flex-wrap:wrap}
.cmpa-tools{display:flex;align-items:center;gap:12px;margin-left:auto}
.cmpa .toggle{background:var(--s2)}
.cmpa-scroll{overflow-x:auto;margin-inline:-4px;padding-inline:4px}
.cmpa-tbl{width:100%;min-width:560px;border-collapse:collapse;table-layout:fixed}
.cmpa-tbl col.c-lab{width:28%}
.cmpa-tbl th,.cmpa-tbl td{padding:0;text-align:left;vertical-align:top;font-weight:400}
.cmpa-tbl thead th{padding:8px 12px 18px 0}
.cmpa-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 8px;font-size:20px;line-height:26px;font-weight:500;letter-spacing:-.02em;color:var(--ink900)}
.cmpa-name .plate-rec{border-color:var(--l300);color:var(--ink500)}
.cmpa-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;margin:0;font-family:var(--mono);color:var(--ink900)}
.cmpa-amt{font-size:28px;line-height:36px;font-weight:500;letter-spacing:-.04em}
.cmpa-was{font-size:13px;color:var(--ink300)}
.cmpa-per{font-size:13px;color:var(--ink500)}
.cmpa-note{display:block;min-height:20px;margin:2px 0 10px;font-size:13px;line-height:20px;color:var(--ink500)}
.cmpa-go{display:inline-block;font-size:15px;line-height:22px;font-weight:500;color:var(--ol700);text-decoration:none;border-bottom:1px solid currentColor}
@media (hover:hover) and (pointer:fine){.cmpa-go:hover{color:var(--ol600)}}
.cmpa-go:focus-visible{outline:2px solid var(--ink900);outline-offset:3px;border-radius:2px}
.cmpa-tbl tbody th,.cmpa-tbl tbody td{padding:14px 12px 14px 0;border-top:1px solid var(--l100)}
.cmpa-tbl tbody tr:last-child > *{border-bottom:1px solid var(--l100)}
.cmpa-tbl tbody th{font-size:15px;line-height:22px;color:var(--ink900)}
.cmpa-tbl tbody td{font-family:var(--mono);font-size:14px;line-height:22px;letter-spacing:-.01em;font-weight:500;color:var(--ink900)}
.cmpa-sub{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--ink500)}
.cmpa-tbl td.cmpa-nil{color:var(--ink300);font-weight:400}
.cmpa-demo{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:20px;padding:20px;border-radius:var(--r-plate);background:var(--s2)}
.cmpa-demo-top{display:flex;align-items:center;gap:10px}
.cmpa-demo-name{margin:0;font-size:20px;line-height:26px;font-weight:500;letter-spacing:-.02em}
.cmpa-demo-for{margin:4px 0 0;font-size:15px;line-height:22px;color:var(--ink500)}
.cmpa-demo-facts{margin:6px 0 0;font-family:var(--mono);font-size:13px;line-height:20px;color:var(--ink900)}
.cmpa-demo .btn{flex:none}
@media (min-width:700px){.cmpa-demo{flex-direction:row;align-items:center;justify-content:space-between;gap:28px;padding:22px 26px}}
/* phone: the same table, tight enough to fit the three plans */
@media (max-width:639px){
  .cmpa-tools{width:100%;justify-content:space-between;margin-left:0}
  .cmpa-tbl{min-width:0}
  .cmpa-tbl col.c-lab{width:30%}
  .cmpa-tbl thead th{padding:6px 6px 14px 0}
  .cmpa-name{font-size:15px;line-height:20px;margin-bottom:4px}
  .cmpa-name .plate-rec{display:none}
  .cmpa-amt{font-size:20px;line-height:26px}
  .cmpa-was{font-size:11px}
  .cmpa-per{display:block;width:100%;font-size:11px;line-height:14px}
  .cmpa-note{min-height:28px;margin:4px 0 6px;font-size:11px;line-height:14px}
  .cmpa-go{font-size:13px}
  .cmpa-tbl tbody th,.cmpa-tbl tbody td{padding:12px 6px 12px 0;font-size:12px;line-height:17px}
  .cmpa-sub{font-size:10px;line-height:14px}
}