/* The pricing section (index.html #pricing, pricing.js): two questions that suggest a plan, what the course costs,
   and every plan in a table to open. Design: the pricing handoff (cream on cobalt). Everything wraps with flex and grid
   gaps, so it holds at 200% zoom and with OpenDyslexic. "Suggested" is always said in words (a tag) as well as colour. */

.pr{padding:clamp(64px,10vw,120px) 0}
.pr .wrap{display:flex;flex-direction:column;gap:clamp(24px,3.4vw,40px)}
.pr h3,.pr h4{font-family:var(--head);font-weight:800;letter-spacing:-.02em;line-height:1.08}
.pr-head{max-width:46rem}
.pr-head h2{font-size:clamp(2.75rem,7vw,5rem);margin-top:14px}
.pr-head p:last-child{margin-top:18px;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.5;color:rgba(255,253,248,.92)}
.pr-kicker{font:700 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.pr p{margin:0}

/* The chooser */
/* Focus rings that show: ink on the cream panels, banana on ink (the suggestion) and on cobalt. */
.pr-chooser,.pr-table-wrap{--focus:var(--ink)}
.pr-suggest{--focus:var(--banana)}
.pr-chooser{background:var(--cream);color:var(--ink);border-radius:24px;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 36px;align-items:start}
.pr-q h3{font-size:1.625rem;margin-bottom:10px}
.pr-q > p:not(.pr-kicker){font-size:.9375rem;color:var(--muted);line-height:1.45}
.pr-pipline{display:flex;gap:10px;align-items:flex-start}
.pr-pipline img{flex:none;margin-top:-4px}
.pr-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pr-pill{min-height:44px;padding:10px 18px;border-radius:999px;border:2px solid var(--ink);background:var(--cream);color:var(--ink);font:700 .9375rem/1 var(--body);cursor:pointer}
.pr-pill[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.pr-pill:hover{background:var(--paper)}
.pr-pill[aria-pressed="true"]:hover{background:#2C2935}
.pr-suggest{background:var(--ink);color:var(--cream);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px}
.pr-suggest .pr-kicker{color:var(--banana);margin:0}
.pr-suggest h3{font-size:1.5rem}
.pr-suggest-price{font-weight:700;font-size:1.125rem}
.pr-suggest [data-s="note"]{font-size:.9375rem;line-height:1.5;color:rgba(255,253,248,.88)}
.pr-suggest .btn{align-self:flex-start;margin-top:6px}
.pr-small{font-size:.8125rem;color:rgba(255,253,248,.75)}
.pr-small a{color:var(--cream);text-underline-offset:3px}

.pr-tag{align-self:flex-start;display:inline-block;background:var(--ink);color:var(--banana);font:700 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.pr-tag[hidden]{display:none}
.pr-line{font-size:.9375rem;color:var(--muted);line-height:1.5}

/* What the course costs */
.pr-lower{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.pr-compare{background:var(--cream);color:var(--ink);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:16px}
.pr-compare h3{font-size:1.75rem}
.pr-save{background:var(--lime);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.pr-save-head{font:800 clamp(1.75rem,3.4vw,2.5rem)/1.05 var(--head);letter-spacing:-.03em}
.pr-save p:last-child{font-size:.9375rem;line-height:1.45}
.pr-rows{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 4.5rem 7.5rem;gap:6px 16px;align-items:center}
.pr-row-name{display:flex;flex-direction:column;gap:2px}
.pr-row-name b{font-size:1rem}
.pr-row-name span{font-size:.8125rem;color:var(--muted);line-height:1.35}
.pr-row-name .pr-row-tag{font:700 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:4px}
.pr-row-bar{display:flex;flex-direction:column;gap:6px}
.pr-row-bar small{font-size:.8125rem;color:var(--muted);line-height:1.35}
.pr-track{display:block;height:18px;border-radius:999px;background:var(--paper)}
.pr-fill{display:block;height:100%;border-radius:999px;border:2px solid var(--ink);min-width:24px}
.pr-total{font:800 1.75rem/1 var(--head);letter-spacing:-.02em;text-align:right;min-width:3.4ch}
.pr-delta{justify-self:end;font-size:.8125rem;font-weight:700;background:var(--paper);border-radius:999px;padding:6px 10px;white-space:nowrap}
.pr-delta.saves{background:var(--lime)}
.pr-side{display:flex;flex-direction:column;gap:16px}
.pr-aside{border:2px solid rgba(255,253,248,.55);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:12px}
.pr-aside h3{font-size:1.5rem}
.pr-aside p{font-size:.9375rem;line-height:1.5}
.pr-aside .btn{align-self:flex-start}

/* Every plan side by side */
.pr-all > summary{list-style:none;display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;border-radius:999px;border:2px solid var(--cream);font:700 1rem/1 var(--body);cursor:pointer}
.pr-all > summary::-webkit-details-marker{display:none}
.pr-all > summary:hover{background:var(--cream);color:var(--ink)}
.pr-table-wrap{position:relative;margin-top:20px;background:var(--cream);color:var(--ink);border-radius:20px;padding:8px 20px;overflow-x:auto}
.pr-table-wrap:focus-visible{outline-color:var(--banana)}
.pr-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.pr-table th,.pr-table td{text-align:left;padding:12px 10px;border-bottom:1px solid #E4E0D6;vertical-align:top}
.pr-table tbody tr:last-child th,.pr-table tbody tr:last-child td{border-bottom:0}
.pr-table thead th{font:700 .75rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.pr-table td:nth-child(2){white-space:nowrap;font-weight:700}
.pr-table td:nth-child(3){vertical-align:middle}
.pr-table tr.is-suggested > *{background:var(--paper)}
.pr-table .pr-tag{margin-left:6px;vertical-align:1px}
.pr-note{font-size:.875rem;color:rgba(255,253,248,.9)}

/* Phone */
@media (max-width:900px){
  .pr-chooser,.pr-lower{grid-template-columns:1fr}
}
@media (max-width:600px){
  .pr-chooser,.pr-compare{padding:20px}
  .pr-row{grid-template-columns:minmax(0,1fr) auto auto;gap:6px 10px}
  .pr-delta{justify-self:end}
  .pr-row-name{grid-column:1}
  .pr-row-bar{grid-column:1/-1;grid-row:2}
  .pr-delta{grid-row:1;grid-column:2}
  .pr-total{grid-row:1;grid-column:3;font-size:1.375rem}
  .pr-aside .btn{align-self:stretch}
  .pr-all > summary{width:100%;justify-content:center}
  /* Plan, price and Buy fit on screen; the details scroll sideways rather than squeeze into tall rows. */
  .pr-table{min-width:600px}
  .pr-table-wrap{padding:6px 12px}
  .pr-table th,.pr-table td{padding:10px 8px}
}