/* Plans section (/pricing + home): two priced learner cards and one institute card that is quoted,
   not priced. Colours only from the site tokens. */
.tri { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr 1.12fr; align-items: stretch; }
.tc {
  position: relative; display: flex; flex-direction: column; gap: .85rem; min-width: 0;
  padding: clamp(1.5rem, 2.8vw, 2.1rem); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--ink-2); transition: transform .5s var(--ease), border-color .4s ease;
}
.tc:hover { transform: translateY(-4px); border-color: var(--line); }
.tc-top { display: flex; align-items: center; gap: .7rem; }
.tc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
          border: 1px solid var(--line); color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.tc-ico svg { width: 22px; height: 22px; }
.tc-eyebrow { font: 700 .7rem/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tc-title { margin: .35rem 0 0; font: 700 clamp(1.35rem, 1.1rem + .8vw, 1.65rem)/1.1 var(--font-display); letter-spacing: -.03em; color: var(--paper); }
.tc-who { margin: -.3rem 0 0; font-size: .9rem; color: var(--muted); }
.tc-price { display: flex; align-items: flex-end; gap: .7rem; min-height: clamp(3rem, 2.3rem + 2.4vw, 4.1rem); margin-top: .5rem; }
.tc-price b { font-family: var(--font-display); font-weight: 700; letter-spacing: -.05em; line-height: .85;
              font-size: clamp(2.7rem, 1.9rem + 2.4vw, 3.9rem); color: var(--paper); }
.tc-per { font-size: .78rem; line-height: 1.25; color: var(--muted); padding-bottom: .3rem; }
.tc-tax { font-size: .8rem; color: var(--muted); padding-bottom: .9rem; border-bottom: 1px dashed var(--line); }
.tc-list { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .6rem; font-size: .9rem; color: var(--text-2, var(--paper)); }
.tc-list li { display: grid; grid-template-columns: 18px 1fr; gap: .55rem; align-items: start; }
.tc-list svg { width: 16px; height: 16px; margin-top: .15rem; color: var(--accent); }
.tc-cta { margin-top: auto; justify-content: center; }
.tc .tc-list { margin-bottom: 1.1rem; }

/* the institute card — inverted, so it reads as a different kind of offer */
.tc--inst { background: var(--paper); color: var(--ink); border-color: var(--paper); overflow: hidden; }
.tc--inst::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                   background: radial-gradient(110% 60% at 100% 0%, rgba(var(--accent-rgb), .24), transparent 62%); }
.tc--inst > * { position: relative; z-index: 1; }
.tc--inst:hover { border-color: var(--paper); }
.tc--inst .tc-ico { border-color: rgba(var(--ink-rgb), .18); background: rgba(var(--accent-rgb), .16); }
.tc--inst .tc-eyebrow, .tc--inst .tc-who, .tc--inst .tc-tax { color: rgba(var(--ink-rgb), .62); }
.tc--inst .tc-title, .tc--inst .tc-talk { color: var(--ink); }
.tc--inst .tc-tax { border-bottom-color: rgba(var(--ink-rgb), .18); }
.tc--inst .tc-list { color: rgba(var(--ink-rgb), .85); }
.tc-talk { letter-spacing: -.045em !important; }
.tc-size { margin: 0; padding: 0; border: 0; }
.tc-size legend { margin-bottom: .55rem; font: 700 .68rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink-rgb), .6); }
.tc-size__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.tc-size label { position: relative; cursor: pointer; }
.tc-size input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tc-size label span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: .4rem; text-align: center;
                      border-radius: 11px; border: 1px solid rgba(var(--ink-rgb), .2); font: 600 .8rem/1.1 var(--font-display); color: var(--ink);
                      transition: background .25s ease, color .25s ease, border-color .25s ease; }
.tc-size input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tc-size input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 1080px) {
  .tri { grid-template-columns: 1fr 1fr; }
  .tc--inst { grid-column: 1 / -1; }
  .tc--inst .tc-size__opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .tri { grid-template-columns: 1fr; }
  .tc--inst .tc-size__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   /pricing only: the two learner plans merged into one card.
   They were the same price for the same product and differed only in who signs
   in, so that question is asked after Subscribe instead of being a choice
   between two identical prices. .tri--duo rather than changing .tri, because the
   home page renders its own three cards from the same grid.
   Tokens only, so this follows the site's theme like everything else here. */
.tri--duo { grid-template-columns: 1fr 1.12fr; }
@media (max-width: 1080px) { .tri--duo { grid-template-columns: 1fr; } }

/* the yearly / monthly switch */
.pc-cycle {
  display: flex; justify-content: center; gap: 4px; width: max-content;
  margin: 0 auto 1.35rem; padding: 4px;
  border: 1px solid var(--line-soft); border-radius: 999px; background: var(--ink-2);
}
.pc-cycle[hidden] { display: none; }
.pc-cycle__btn {
  border: 0; background: transparent; cursor: pointer;
  font: 700 .82rem/1 var(--font-display); letter-spacing: .01em;
  padding: .65rem 1.3rem; border-radius: 999px; color: var(--muted);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pc-cycle__btn.is-on { background: var(--paper); color: var(--ink); }
.pc-cycle__btn em {
  font-style: normal; font-size: .68rem; font-weight: 800; margin-left: .4rem; color: var(--accent-ink, var(--accent));
}
.pc-cycle__btn.is-on em { color: inherit; opacity: .72; }
.pc-cycle__btn em[hidden] { display: none; }

/* WHO IS THIS ACCOUNT FOR - asked after Subscribe, because the two learner plans were the same
   price for the same product and differed only in who signs in. Two equal tiles rather than a
   stacked list: neither role is the default, and each says what it means in practice. */
.ck[hidden] { display: none; }
.ck { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; }
.ck__back { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.ck__card { position: relative; width: 100%; max-width: 640px; padding: clamp(1.5rem, 3vw, 2.3rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--ink-2); color: var(--paper);
  box-shadow: 0 30px 60px -12px rgba(0,0,0,.5); animation: ck-in .35s var(--ease) both; }
@keyframes ck-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.ck__x { position: absolute; top: .8rem; right: .9rem; border: 0; background: transparent; color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ck__x:hover { color: var(--paper); }
.ck__eyebrow { margin: 0 0 .5rem; font: 700 .68rem/1 var(--font-display); letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-ink, var(--accent)); }
.ck__q { margin: 0 0 .5rem; font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2rem)/1.08 var(--font-display); letter-spacing: -.03em; }
.ck__sub { margin: 0 0 1.4rem; max-width: 46ch; font-size: .9rem; line-height: 1.5; color: var(--muted); }
.ck__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .ck__tiles { grid-template-columns: 1fr; } }
.ck__tile { display: flex; flex-direction: column; gap: .45rem; padding: 1.15rem 1.1rem 1rem;
  border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: inherit; background: transparent;
  transition: transform .35s var(--ease), border-color .3s ease, background .3s ease; }
.ck__tile:hover { transform: translateY(-3px); border-color: var(--accent); background: rgba(var(--accent-rgb), .07); }
.ck__ico { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: .3rem; border-radius: 13px;
  border: 1px solid var(--line); color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.ck__ico svg { width: 23px; height: 23px; }
.ck__tile b { font: 700 1.05rem/1.2 var(--font-display); letter-spacing: -.02em; }
.ck__tile small { font-size: .83rem; line-height: 1.45; color: var(--muted); }
.ck__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
  font-size: .8rem; font-weight: 600; color: var(--accent-ink, var(--accent)); }
.ck__tile:hover .ck-go { transform: translate(2px, -2px); }
.ck-go { transition: transform .3s var(--ease); }
.ck__foot { margin: 1.1rem 0 0; font-size: .78rem; color: var(--muted-3, var(--muted)); }

/* ==========================================================================
   502 - the plan OFFER on the learner card (design H: sticker + price compare).
   The markup ships hidden; lib/site-pricing.ts shows and fills it while the plan's region offer is
   live. Display only - checkout still charges the price per student. Colours from the site tokens.
   ========================================================================== */

/* the offer markup toggles with [hidden]; several of these elements set their own display, which
   would otherwise beat the browser's hidden rule */
[data-offer-on][hidden], [data-offer-off][hidden] { display: none !important; }

/* the round sticker on the card's corner */
.tco-stamp { position: absolute; top: -18px; right: -14px; z-index: 2; display: grid; place-content: center;
             width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
             text-align: center; rotate: 12deg; box-shadow: 0 14px 30px -14px rgba(var(--accent-rgb), 1);
             outline: 3px dashed rgba(var(--ink-rgb), .55); outline-offset: -8px; }
.tco-stamp b { font: 700 1.55rem/1 var(--font-display); letter-spacing: -.04em; }
.tco-stamp span { font: 700 .7rem/1.1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
/* on a phone the card runs edge to edge, so the sticker sits inside it rather than off the screen */
@media (max-width: 600px) {
  .tco-stamp { top: -14px; right: 10px; width: 66px; height: 66px; outline-offset: -6px; }
  .tco-stamp b { font-size: 1.2rem; }
  .tco-stamp span { font-size: .58rem; }
}

/* the price-compare box */
.tco-ledger { display: grid; gap: .55rem; margin-top: .4rem; padding: 1rem 1.1rem; border-radius: 16px;
              border: 1px solid var(--line); background: rgba(var(--ink-3-rgb), .55); }
.tco-ledger__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
                   font-size: .84rem; color: var(--muted); }
.tco-ledger__row.is-now { color: var(--paper); font-weight: 600; }
/* font-variant-numeric after the font shorthand, which would otherwise reset it; tabular digits keep the
   counting price from jittering sideways */
.tco-ledger__row.is-now b { display: inline-block; transform-origin: right bottom;
                            font: 700 clamp(2.3rem, 1.7rem + 1.9vw, 3.2rem)/.9 var(--font-display); letter-spacing: -.05em;
                            font-variant-numeric: tabular-nums; }
.tco-was { position: relative; color: var(--muted); font-size: 1.05rem; font-weight: 600; text-decoration: none;
           font-variant-numeric: tabular-nums; }
.tco-was::after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 2px; border-radius: 2px;
                  background: rgba(var(--accent-rgb), .9); transform-origin: left center; }
.tco-ledger__bar { height: 8px; border-radius: 999px; overflow: hidden;
                   background: repeating-linear-gradient(-45deg, rgba(var(--accent-rgb), .28) 0 2px, transparent 2px 6px);
                   border: 1px solid rgba(var(--accent-rgb), .35); }
.tco-ledger__bar i { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 999px;
                     background: var(--accent); }
.tco-ledger__foot { display: flex; justify-content: space-between; gap: .8rem; font-size: .76rem; color: var(--muted); }
.tco-ledger__foot > span:last-child { color: var(--accent-ink); font-weight: 700; }
/* screen-reader-only text ("Original price"), defined here too because /pricing has no exam-home.css */
.tco-ledger .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
                       clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The first-view animation (offer.js). These rules only apply once the script has ARMED the card
   (.tco-arm), so with no script, or with reduced motion, the card simply shows its finished state. */
.tc.tco-arm .tco-stamp { opacity: 0; }
.tc.tco-arm .tco-was::after { transform: scaleX(0); }
.tc.tco-arm .tco-ledger__foot > span:last-child { opacity: 0; translate: 0 6px; }

.tc.tco-go .tco-stamp { animation: tco-stamp .75s cubic-bezier(.2, 1.5, .45, 1) .25s both,
                                   tco-wobble 5s ease-in-out 2.6s infinite; }
.tc.tco-go .tco-was::after { transform: scaleX(1); transition: transform .45s cubic-bezier(.65, 0, .35, 1) .6s; }
.tc.tco-done .tco-ledger__foot > span:last-child { opacity: 1; translate: 0 0;
                                                   transition: opacity .35s ease, translate .45s cubic-bezier(.2, 1.6, .4, 1); }
.tc.tco-done .tco-ledger__row.is-now b { animation: tco-land .5s cubic-bezier(.2, 1.6, .4, 1); }
.tc.tco-done .tco-ledger__bar i::after { content: ""; position: absolute; inset: 0; translate: -100% 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    animation: tco-shine 3.2s ease-in-out .4s infinite; }

@keyframes tco-stamp {
  from { opacity: 0; scale: 2.3; rotate: -40deg; }
  60%  { opacity: 1; }
  to   { opacity: 1; scale: 1; rotate: 12deg; }
}
@keyframes tco-wobble { 0%, 84%, 100% { rotate: 12deg; } 88% { rotate: 0deg; } 92% { rotate: 20deg; } 96% { rotate: 8deg; } }
@keyframes tco-land { 0% { scale: 1; } 40% { scale: 1.07; } 100% { scale: 1; } }
@keyframes tco-shine { 0% { translate: -100% 0; } 45%, 100% { translate: 100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .tc.tco-go .tco-stamp, .tc.tco-done .tco-ledger__row.is-now b, .tc.tco-done .tco-ledger__bar i::after { animation: none; }
}