/* Course++ pricing section (#pricing on the homepage), loaded after style.css
 * and home.css. Revision 6 (owner, 2026-10-27): a full-width navy band like the
 * FERPA one (they never touch); the free credits are the focus and carry the
 * install button; the plans are quiet and last. White on navy 14.4:1, lime on
 * navy 8:1, --on-navy-2 9.96:1, cyan only on navy. */
.pr { background: var(--navy); color: var(--white); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.pr :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pr h2, .pr h3 { color: var(--white); margin: 0; }
.pr h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.pr .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(2.5rem, 6vw, 3.5rem); }

/* The focus: the free credits, the chips, the install button. */
.pr-free { display: flex; flex-direction: column; align-items: center; }
.pr-free__big { margin: .75rem 0 1.1rem; font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); letter-spacing: -.02em; color: var(--white); }
.pr-free__big span { display: block; font-size: clamp(6rem, 3.5rem + 12vw, 11rem); line-height: .95; font-weight: 850; letter-spacing: -.05em; color: var(--lime); font-variant-numeric: tabular-nums; margin-bottom: .1em; }
.pr-chips { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.pr-chip { margin: 0; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem .5rem .8rem; border-radius: var(--r-pill); background: rgb(255 255 255 / .1); border: 1px solid var(--on-navy-rule); font-weight: 700; font-size: 1.0625rem; color: var(--white); }
.pr-chip svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--cyan); }
.pr-go.get { align-items: center; margin: 0; }
.pr .hbtn { box-shadow: 0 10px 30px -10px rgb(132 204 22 / .55); }
.pr .hbtn:focus-visible { outline-color: var(--cyan); }

/* What 250 credits builds (revision 7): an ESTIMATE RANGE per model tier,
   picked with a three-stop radio group, from three measured builds per tier
   plus overhead. The figures, formula and sources are in the comment above
   #pricing in index.html. */
.pr-builds { width: 100%; max-width: 46rem; }
.pr-builds h3 { font-size: 1.125rem; font-weight: 700; color: var(--on-navy-2); margin-bottom: .5rem; }
.pr-lead { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: 700; letter-spacing: -.01em; color: var(--white); }
.pr-lead b { font-weight: 850; color: var(--lime); }
.pr-week { margin: .6rem auto 1.25rem; max-width: 34rem; font-size: 1.0625rem; line-height: 1.5; color: var(--on-navy-2); }
.pr-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.pr-tile { margin: 0; display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem .85rem .9rem; border-radius: 14px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; text-align: left; min-width: 0; }
.pr-tile svg { width: 2rem; height: 2rem; flex: none; fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pr-tile b { font-weight: 850; font-size: 1.1875rem; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-more { margin: 1rem 0 0; color: var(--on-navy-2); font-size: 1rem; }
.pr-fine { margin: .9rem auto 0; max-width: 34rem; color: var(--on-navy-2); font-size: .9375rem; line-height: 1.45; }
.pr-lead__on { display: block; margin-top: .15rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; color: var(--on-navy-2); }

/* The model picker: native radios (arrow keys move between them), drawn as
   a segmented control. The input stays in the tab order, invisible, over its
   own label; its focus ring and checked state are drawn on the span. Hidden
   in the markup, shown by the script, so it never appears without JS. */
.pr-model { border: 0; margin: .25rem auto 1.1rem; padding: 0; min-width: 0; }
.pr-model[hidden] { display: none; }
.pr-model__legend { padding: 0; margin: 0 auto .45rem; font-size: .9375rem; font-weight: 700; color: var(--on-navy-2); }
.pr-model__opts { display: inline-flex; max-width: 100%; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: rgb(255 255 255 / .08); border: 1px solid var(--on-navy-rule); }
.pr-model__opt { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.pr-model__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pr-model__opt span { padding: .55rem 1.1rem; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: var(--r-pill); font-weight: 700; font-size: 1rem; color: var(--white); white-space: nowrap; }
.pr-model__opt input:checked + span { background: var(--lime); color: var(--navy); }
.pr-model__opt input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pr-model__opt:hover input:not(:checked) + span { background: rgb(255 255 255 / .1); }
@media (prefers-reduced-motion: no-preference) {
  .pr-model__opt span { transition: background-color .15s ease, color .15s ease; }
}
@media (max-width: 360px) {
  .pr-model__opt span { padding: .55rem .7rem; font-size: .9375rem; }
}
@media (max-width: 560px) {
  .pr-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* The plans: small, quiet, last. Tickets keep the extension's plan-card shape. */
.pr-plans { padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / .16); width: 100%; max-width: 34rem; }
.pr-plans h3 { font-size: .9375rem; font-weight: 700; color: var(--on-navy-2); margin-bottom: 1.5rem; text-transform: none; }
.pr-tickets { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.pr-ticket {
  position: relative; margin: 0; display: grid; grid-template-columns: 5rem minmax(0, 1fr);
  border-radius: 12px; background: transparent; color: var(--white); text-align: left;
  box-shadow: inset 0 0 0 1.5px var(--on-navy-rule);
}
.pr-ticket--best { background: rgb(132 204 22 / .1); box-shadow: inset 0 0 0 2px var(--lime); }
.pr-ticket__stub { display: flex; align-items: center; padding: .7rem .6rem .7rem .8rem; border-right: 1.5px dashed var(--on-navy-rule); }
.pr-ticket__name { font-size: .8125rem; font-weight: 800; letter-spacing: .02em; color: var(--on-navy-2); }
.pr-ticket__main { padding: .7rem .8rem .7rem .9rem; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pr-ticket__price { margin: 0; line-height: 1.15; }
.pr-ticket__amt { display: block; white-space: nowrap; font-size: 1.0625rem; font-weight: 700; color: var(--on-navy-2); }
.pr-ticket__when { display: block; font-size: .8125rem; font-weight: 600; color: var(--on-navy-2); margin-top: .15rem; }
/* The yearly price is the first thing read in the plans (owner, 2026-10-27):
   lime (#84cc16) on the band's navy, larger and bolder, "when you pay yearly"
   on the same line beside it. Lime on the ticket's tinted navy measures
   5.9:1 (site-home-check asserts at least 4.5:1). Lime is only ever text on
   navy here; on a light ground the site's green is --accent (#3f6212). */
.pr-ticket--best .pr-ticket__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.pr-ticket--best .pr-ticket__amt { display: inline; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 850; letter-spacing: -.02em; color: var(--lime); line-height: 1.1; }
.pr-ticket--best .pr-ticket__when { display: inline; font-size: 1.0625rem; font-weight: 700; color: var(--white); margin: 0; }
.pr-ticket--best .pr-ticket__main { padding: .9rem 1rem .9rem 1.1rem; }
.pr-burst { position: absolute; left: -.9rem; top: -1rem; width: 1.9rem; height: 1.9rem; overflow: visible; pointer-events: none; transform: scaleX(-1); }
.pr-burst path { fill: none; stroke: var(--lime); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 22; stroke-dashoffset: 22; animation: pr-draw .45s var(--ease-out) forwards; }
.pr-burst path:nth-child(1) { animation-delay: .5s; }
.pr-burst path:nth-child(2) { animation-delay: .6s; }
.pr-burst path:nth-child(3) { animation-delay: .7s; }
.pr-burst path:nth-child(4) { animation-delay: .8s; }
.pr-burst path:nth-child(5) { animation-delay: .9s; }
@keyframes pr-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .pr-burst path { animation: none; stroke-dashoffset: 0; } }
.pr-go__note { margin: 1.25rem 0 0; color: var(--on-navy-2); font-size: .9375rem; }
.pr-ticket:not(.pr-ticket--best) { max-width: 20rem; width: 100%; justify-self: center; }