/* plan-offer.css - the plan block on a locked course hub (components/plan-offer.php; owner, 18 Oct 2026).
   No pills, no hairlines: one filled card, two 56 px buttons side by side (stacked on a phone), three plain ticks. The
   plan button is a teal outline (brand teal #46a9b3, no fill: no tinted dark surface), the same in both themes. */
.po{margin:20px 0 0;padding:18px 18px 16px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow);max-width:640px}
.po-l{margin:0;color:var(--ink);font-weight:650;font-size:17px;line-height:1.4;text-wrap:pretty}
.po-act{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px 12px;margin:14px 0 0}
.po .po-go{min-height:56px;margin:0;border-radius:12px;padding:12px 22px 13px;align-content:center}
.po-buy{display:inline-flex;flex-direction:column;justify-content:center;min-height:56px;padding:7px 18px 8px;border-radius:12px;border:2px solid #46a9b3;background:transparent;color:var(--ink);text-decoration:none;font-weight:700;font-size:16.5px;line-height:1.25;box-sizing:border-box}
.po-buy small{margin-top:2px;font-weight:500;font-size:13.5px;line-height:1.3;color:var(--ink-2)}
.po-buy.is-plain{justify-content:center}
.po-buy:hover{background:color-mix(in srgb,#46a9b3 10%,transparent)}
.po-buy:focus-visible{outline:3px solid #46a9b3;outline-offset:2px}
.po-inc{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;padding:0;list-style:none}
.po-inc li{display:inline-flex;align-items:center;gap:7px;min-height:28px;color:var(--ink-2);font-size:15px;line-height:1.35}
.po-inc svg{flex:none;color:var(--free)}
:root[data-theme="dark"] .po{background:var(--surface-up,var(--surface))}
/* paid first (Music, adult and university hubs): the plan is the main button, its yearly charge the second line; the
   free lesson a plain 44 px link under it */
.po.is-paid .po-act{flex-direction:column;align-items:flex-start;gap:4px}
.po.is-paid .po-go span{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}
.po.is-paid .po-go small,.cm .po.is-paid .po-go small{font-size:13.5px;font-weight:400;line-height:1.3;opacity:.85}   /* the yearly charge under the price, the label size, so the price line reads first */
.po-free{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;color:var(--study-ink);font-weight:650;font-size:16px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.po-free small{font-weight:500;color:var(--ink-2);text-decoration:none}
.po-free:focus-visible{outline:3px solid #46a9b3;outline-offset:2px;border-radius:6px}
@media (max-width:560px){
  .po.is-paid .po-act{align-items:stretch}
  .po.is-paid .po-free{align-self:flex-start}
  .po{padding:16px 14px 14px}
  .po-act{flex-direction:column}
  .po .po-go,.po-buy{width:100%;box-sizing:border-box}
  .po-buy{text-align:left}
  .po-inc{flex-direction:column;gap:4px}
}
/* the product's name over the title: plain small text, no pill (owner's UI rules, 18 Oct) */
.cm-grp-t{margin:0 0 6px;color:var(--mt-ink,var(--ink-2));font:700 14px/1.2 var(--f-body);letter-spacing:.01em}
/* the course page's facts line says the same counts as the plan line: only one of them (course.php) */
.cp-hero .po + .cp-stat .cp-facts{display:none}
/* Brainlag Code's course pages (code.brainlag.space tools/track_page.py plan_offer, assets/js/code-course.js): one block
   with both layouts in it; paid first for a visitor who has never signed in here (html.cbl-po-paid, set by the block's
   own script before the first paint, track_page.py plan_offer), free first for everyone else. Free first: "Start lesson 1 free" and the plan as the outline button with no price. Paid first: the plan
   and its price as the main button, the lesson button as the plain 44 px link under it. */
html:not(.cbl-po-paid) .cbl-po .po-paid{display:none!important}
html.cbl-po-paid .cbl-po .po-plan{display:none}
html.cbl-po-paid .cbl-po .po-act{flex-direction:column;align-items:flex-start;gap:4px}
html.cbl-po-paid .cbl-po .po-start{display:inline-flex;align-items:center;min-height:44px;width:auto;padding:0 2px;border-radius:6px;background:none;box-shadow:none;color:var(--study-ink);font-weight:650;font-size:16px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
html.cbl-po-paid .cbl-po .po-start span{font-size:16px;font-weight:650}
html.cbl-po-paid .cbl-po .po-start small{margin-inline-start:8px;color:var(--ink-2);font-weight:500;text-decoration:none}
html.cbl-po-paid .cbl-po .po-start .cp-go-ic{display:none}
html.cbl-po-paid .cbl-po .po-go:not(.po-start) span{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}
.cbl-po .po-paid small{font-size:13.5px;font-weight:400;line-height:1.3;opacity:.85}
@media (max-width:560px){html.cbl-po-paid .cbl-po .po-act{align-items:stretch}html.cbl-po-paid .cbl-po .po-start{align-self:flex-start}}
/* the plan already open: only the lesson button, as before */
html.is-entitled .cbl-po{padding:0;background:none;box-shadow:none}
html.is-entitled .cbl-po :is(.po-l,.po-inc,.po-plan,.po-paid){display:none!important}
/* No content jumping (course_cls, 19 Oct 2026): the final layout at the first paint. The buttons stack at every width,
   so a longer lesson button ("Continue: <lesson>") never pushes the plan button onto a new row; the lesson button's
   words stay on one line; and where this browser has progress in the course (html.cp-prog-on, html.cm-has and
   html.cbl-po-prog, set before the first paint) it keeps the room for "Step n of m" from the start. */
.po:not(.is-paid) .po-act{flex-direction:column;align-items:flex-start}
.po:not(.is-paid) .po-act > :is(.po-go,.po-buy){min-width:min(100%,320px)}
.po #cpGo{max-width:100%;box-sizing:border-box}
.po #cpGo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.po .po-free{white-space:nowrap;overflow:hidden}
html:is(.cp-prog-on,.cm-has,.cbl-po-prog):not(.cbl-po-paid) .po:not(.is-paid) #cpGo.cp-go{min-height:66px;align-content:start}
/* no "Step n of m" line ("Next: <lesson>"): the words centred in the same room; the height never changes */
html:is(.cp-prog-on,.cm-has,.cbl-po-prog):not(.cbl-po-paid) .po:not(.is-paid) #cpGo.cp-go:not(:has(small)){align-content:center}
@media (max-width:560px){.po:not(.is-paid) .po-act{align-items:stretch}}
html.cbl-po-paid .cbl-po .po-l-f,html:not(.cbl-po-paid) .cbl-po .po-l-p{display:none}   /* the line for the layout shown */