/* Goal100 Learning · plan cards with the Monthly / Yearly switch (pricing.html, offers.html, account/plan.html, waitlist.html).
   Loaded with assets/g100-plans.js. Colors come from site.css variables, so light and dark both work.
   Order inside a card: price (largest) · saving (second largest, the only gold) · what is billed and when · ONE gold button ·
   a quiet second button · check marks (the promises the site already makes) · the rest.
   Without JavaScript the Yearly view shows, and each card still states the monthly price in words. */

/* ---------- base (no JavaScript): Yearly only, switch hidden ---------- */
.pl-zone{display:flex; flex-direction:column; gap:36px; margin-top:calc(-1 * clamp(18px, 3vw, 36px))}
.pl-zone > .pl-head{margin-top:-18px}
.pl-zone > .pl-say + .section{margin-top:0}
.pl-bar{display:none}
.pl-m{display:none}
.pl-say{display:none}
.pl-sr{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.pl-box{display:flex; flex-direction:column; gap:14px; min-width:0}
.pl-box[id]{scroll-margin-top:150px}
.pl-y,.pl-m{flex-direction:column; gap:10px; min-width:0}
.pl-y{display:flex}
.pl-box p{margin:0}

/* 1. the price: the largest thing on the card (one block with inline parts: the Spanish layer translates it as one piece) */
.pl-box .price{font-size:clamp(2.7rem, 11vw, 3.2rem); line-height:1; letter-spacing:-.01em; margin-top:2px}
.pl-box .price s{font-size:1.2rem; font-weight:700; margin-right:6px; letter-spacing:0}
.pl-box .price .small{font-size:1rem; letter-spacing:0}

/* 2. the saving: second largest, and the only gold words on the card */
.pl-save{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:var(--ink); line-height:1.25}
.pl-save b{flex:none; display:inline-flex; align-items:center; min-height:34px; padding:2px 14px; border-radius:999px;
  background:var(--gold); color:#1B1300; font-family:var(--display); font-weight:800; font-size:1.2rem; white-space:nowrap}
.pl-save span{flex:1 1 9em; font-family:var(--display); font-weight:800; font-size:1.12rem}

/* 3. quiet facts: what the saving is compared with, the small numbers, and what is billed and when (same size, never smaller) */
.pl-basis,.pl-per{font-size:.95rem; line-height:1.45; color:var(--ink2)}
.pl-per b{color:var(--ink); font-weight:700}
.pl-fine{font-size:.92rem; line-height:1.45; color:var(--ink2)}
.pl-head{max-width:62ch; margin:0 auto; text-align:center; color:var(--ink2); font-size:1rem; line-height:1.5}
.pl-head b{color:var(--ink)}

/* 4. the buttons: one gold button, one quiet button, one line that says what happens */
.pl-cta{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.pl-cta .btn{width:100%; box-sizing:border-box; text-align:center; padding-inline:14px}
.pl-cta .pl-go{min-height:54px; font-size:1.1rem}
.pl-cta .pl-tell{min-height:48px; padding-block:8px; font-size:1rem; box-shadow:none; border-color:var(--line)}
.pl-cta .pl-tell:hover{border-color:var(--brand)}
.pl-hint{font-size:.9rem; line-height:1.4; color:var(--ink2); text-align:center}

/* 5. the promises, as check marks right under the buttons */
.pl-box .pl-trust{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.pl-box .pl-trust li{position:relative; margin:0; padding-left:28px; font-size:.94rem; line-height:1.4; color:var(--ink)}
.pl-box .pl-trust li::before{content:"\2713"; position:absolute; left:0; top:.08em; width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); font-size:.78rem; font-weight:800; line-height:1}

/* 6. one helpful extra fact per card (step up to Family, price per child, price per student) */
.pl-extra{font-size:.94rem; line-height:1.45; color:var(--ink); padding:9px 12px; border-radius:12px; background:var(--bg); border:1px solid var(--line)}
.pl-extra a{color:inherit; font-weight:700; text-underline-offset:3px}

/* the in-card buttons that flip the switch (plain words until the switch is on) */
.pl-flip{font:700 .96rem/1.3 var(--body); color:var(--ink); background:none; border:0; padding:0; margin:0; text-align:left; cursor:default}

/* Monthly view: the yearly offer, in a calm box. Bar widths are the real price ratio. */
.pl-nb{display:flex; flex-direction:column; gap:9px; padding:12px; border-radius:16px; background:var(--gold-soft); border:1px solid var(--gold)}
.pl-nb-t{font-weight:700; font-size:.98rem; line-height:1.4; color:var(--ink)}
.pl-cmp{display:flex; flex-direction:column; gap:6px}
.pl-cmp-r{display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:baseline; font-size:.9rem; line-height:1.3; color:var(--ink)}
.pl-cmp-v{font-weight:700; font-variant-numeric:tabular-nums}
.pl-cmp-r i{grid-column:1 / -1; display:block; height:8px; border-radius:999px; background:var(--ink2); opacity:.5; min-width:10px}
.pl-cmp-y i{background:var(--gold); opacity:1}
.pl-cmp-y{font-weight:700}

/* feature list: the top lines, the rest behind a disclosure that works without JavaScript */
.pl-feat{margin:0}
.pl-feat li{font-size:.98rem; line-height:1.5}
.pl-more{background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:2px 0 0}
.pl-more > summary{display:flex; align-items:center; gap:8px; min-height:46px; padding:0; box-sizing:border-box; font-weight:700; font-size:.96rem;
  color:var(--ink); cursor:pointer; list-style:none; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px}
.pl-more > summary::-webkit-details-marker{display:none}
.pl-more > summary::after{content:"+"; margin-left:auto; flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand); font-weight:800; text-decoration:none}
.pl-more[open] > summary::after{content:"\2212"}
.pl-more[open] > summary{margin-bottom:6px}
.pl-more > summary:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:8px}
.pl-more > * + *{margin-top:8px}

/* School and District: yearly only */
.pl-inv{padding:8px 12px; border-radius:14px; background:var(--brand-soft); color:var(--ink); font-size:.95rem; line-height:1.45}

/* My plan: while paid plans are not open, the card shows the free step and the waiting list; the pay buttons come back when billing opens */
.bill-plan:has(.pl-cta:not([hidden])) > .row{display:none}

/* waitlist.html: the plan the visitor was looking at (from the link; nothing is saved or sent) */
.pl-pick{margin:0 0 14px}
tr.pl-picked > *{background:var(--gold-soft); font-weight:700}
tr.pl-picked > :first-child{box-shadow:inset 4px 0 0 var(--gold)}

/* ---------- switch on: JavaScript (html.pl-js) ---------- */
html.pl-js .pl-bar{display:flex}
.pl-bar{justify-content:center; align-self:center; width:fit-content; max-width:100%; margin-inline:auto; z-index:8}
.pl-switch{display:inline-flex; align-items:stretch; gap:4px; padding:5px; border-radius:999px; background:var(--card);
  border:2px solid var(--line); box-shadow:0 8px 24px rgba(30,29,107,.16); max-width:100%}
.pl-opt{position:relative; display:flex; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; min-width:0}
.pl-opt input{position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; border:0; opacity:0; cursor:pointer}
.pl-opt-in{display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:6px 18px; border-radius:999px;
  font:700 1.05rem/1.2 var(--body); color:var(--ink); border:2px solid transparent}
.pl-opt:hover .pl-opt-in{border-color:var(--line)}
.pl-opt input:checked + .pl-opt-in{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.pl-opt input:focus-visible + .pl-opt-in{outline:3px solid var(--brand); outline-offset:3px}
.pl-pill{display:inline-flex; align-items:center; min-height:26px; padding:2px 10px; border-radius:999px; background:var(--gold); color:#1B1300;
  font-weight:800; font-size:.84rem; line-height:1.2; white-space:nowrap}
html.pl-js .pl-swap{display:grid}
html.pl-js .pl-y, html.pl-js .pl-m{display:flex; grid-area:1 / 1}
html.pl-js[data-pl-bill="year"] .pl-m,
html.pl-js[data-pl-bill="month"] .pl-y{visibility:hidden; opacity:0; pointer-events:none}
/* "Or pay monthly": a quiet text button, one tap, never hidden */
html.pl-js .pl-flip{display:inline-flex; align-items:center; align-self:flex-start; min-height:46px; box-sizing:border-box; padding:4px 2px; cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--ink2); text-underline-offset:4px}
html.pl-js .pl-flip:hover{text-decoration-color:var(--brand)}
html.pl-js .pl-flip:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:8px}
/* "Show yearly": an outlined button inside the calm box (the card keeps ONE gold button) */
html.pl-js .pl-nudge{align-self:stretch; justify-content:center; text-align:center; min-height:46px; padding:8px 12px; border-radius:12px;
  border:2px solid var(--gold); background:var(--card); text-decoration:none}
html.pl-js .pl-nudge:hover{border-color:var(--brand)}

/* gentle change between the two prices; nothing moves under "reduce motion" */
@media (prefers-reduced-motion:no-preference){
  html.pl-js.pl-moved .pl-y, html.pl-js.pl-moved .pl-m{transition:opacity .28s ease, transform .28s ease, visibility 0s linear 0s}
  html.pl-js.pl-moved[data-pl-bill="year"] .pl-m,
  html.pl-js.pl-moved[data-pl-bill="month"] .pl-y{transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s}
  .pl-opt-in{transition:background-color .2s ease, color .2s ease, border-color .2s ease}
}

/* phones: the site header scrolls away there, so the switch stays in reach as a slim strip at the top of the screen
   while the plan cards scroll (same size resting and stuck, so nothing jumps) */
@media (max-width:700px), (orientation:landscape) and (max-height:520px) and (max-width:950px){
  html.pl-js .pl-bar{position:sticky; top:-1px; align-self:stretch; width:auto; max-width:none;
    margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding:calc(max(5px, env(safe-area-inset-top, 0px)) + 1px) max(16px, env(safe-area-inset-right, 0px)) 5px max(16px, env(safe-area-inset-left, 0px));
    border-bottom:1px solid transparent}
  html.pl-js .pl-bar.pl-stuck{background:var(--bg); background:color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom-color:var(--line); box-shadow:0 6px 16px rgba(30,29,107,.10)}
  .pl-switch{padding:3px; box-shadow:0 4px 14px rgba(30,29,107,.14)}
  .pl-opt-in{min-height:44px; padding:4px 12px; gap:6px; font-size:1rem}
  .pl-pill{min-height:22px; padding:1px 8px; font-size:.78rem}
  .pl-zone .pr-group, .pl-zone .section{scroll-margin-top:84px}
  .pl-box[id]{scroll-margin-top:130px}
}
@media (max-width:359px){
  .pl-opt:first-child .pl-opt-in{flex-direction:column; gap:2px}
}

/* ---------- switch on without JavaScript, where the browser knows :has() ---------- */
@supports selector(html:has(a)){
  html:not(.pl-js) .pl-bar{display:flex}
  html:not(.pl-js):has(input[name="billEvery"][value="month"]:checked) .pl-y{display:none}
  html:not(.pl-js):has(input[name="billEvery"][value="month"]:checked) .pl-m{display:flex}
}

@media print{
  .pl-bar{display:none!important}
  html.pl-js .pl-y, html.pl-js .pl-m{position:static; visibility:visible!important; opacity:1!important}
  html.pl-js .pl-swap{display:block}
  .pl-flip,.pl-cta{display:none!important}
}

/* ---------- tax fine print (Nov 13, 2026): one quiet line under the plan cards, never beside a button.
   Small and grey on purpose, but still readable: 4.8 to 1 on the light page, 5.3 to 1 on the dark page (WCAG AA needs 4.5). ---------- */
.g1p-tax{margin:12px auto 0; max-width:60ch; padding:0 8px; text-align:center; font-size:.78rem; line-height:1.5; font-weight:400; color:#676A8C}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .g1p-tax{color:#8587AB} }
[data-theme="dark"] .g1p-tax{color:#8587AB}

/* Special offer layer (Nov 14, 2026): badge, July 1, 2027 price line, trust row, countdown. Add-only. */
.pl-offer{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:6px 0 4px}
.pl-offer-b{display:inline-block; background:linear-gradient(90deg,#C0392B,#E0603A); color:#fff; font-family:var(--display); font-weight:800; font-size:.98rem; line-height:1.2; padding:5px 12px; border-radius:999px; letter-spacing:.01em}
.pl-offer-s{font-size:.86rem; color:var(--muted,#5b5f7a)}
.pl-rise{margin:2px 0 8px; font-size:.95rem; line-height:1.4; color:var(--ink)}
.pl-sure{list-style:none; margin:8px 0 2px; padding:0; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:.86rem; color:var(--ink)}
.pl-sure li{display:inline-flex; align-items:center; gap:4px}
.pl-sure li::before{content:"✓"; color:#1D9F5F; font-weight:800}
.pl-count{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin:0 0 12px; padding:12px 16px; border-radius:16px; background:#FFF4E5; border:2px solid #F2A93B; color:#16163A; max-width:100%; box-sizing:border-box}
.pl-count-h{font-family:var(--display); font-weight:800; font-size:1.05rem}
.pl-count-n{font-size:1rem}
.pl-count-n b{font-family:var(--display); font-size:1.25rem; color:#C0392B}
.pl-count-s{font-size:.9rem; color:#4a4c66; flex-basis:100%}
@media (min-width:700px){ .pl-count-s{flex-basis:auto} }
html[data-theme="dark"] .pl-count, .dark .pl-count{background:#2a2410; color:#fff}

/* pricing2 (Nov 14, 2026): price-lock line on Teacher Pro, School and District cards */
.pl-lock3{margin:10px 0 6px;font-size:.95rem;line-height:1.45;font-weight:600}
.pl-lock3 a{display:inline-flex;align-items:center;min-height:48px}