/* ============================================================
   PRIME ACADEMY GROUP — v6.1.2
   page-subscription-plans.css — Subscription Plans, and nothing else.

   Load order: fonts.css → system.css → shared.css → page-subscription-plans.css

   The opening, the nav, the dark panel, the closing pair, the footer and the
   eyebrow are all in shared.css. Four things on this page the site has never
   had before live here:

     · the billing switch
     · the three price cards
     · the comparison table
     · the questions, opening and closing

   No new colour, radius, type size or easing. Everything is built from tokens
   that already exist, and every one of the four is documented below so it can
   be lifted into the design system when the merge pass comes.
   ============================================================ */

/* ═══ 1 · THE OPENING ═══
   The shared opening crops its picture at 40% down, which suits a wide scene.
   This one has its subject high in the frame and the shared crop took the top
   of her head off, so the window moves up. Page-scoped: the default is right
   for the pages that use it. */
.open-bg img{object-position:center 28%}

/* ═══ 2 · THE THREE PLANS ═══ */

.plans-head{max-width:940px;margin:0 auto var(--s6);text-align:center}
.plans-head h2{margin-bottom:var(--s4)}
.plans-head .lead{margin:0 auto;max-width:70ch;text-wrap:pretty}

/* ── THE BILLING SWITCH ──
   Two buttons in one pill. The selected one is the primary button's fill; the
   other is transparent and takes the muted ink, so the pair reads as one
   control with a state rather than two competing buttons.

   Real <button>s carrying aria-pressed, not a checkbox dressed as a switch:
   there are two named options, both always visible, and each is pressable in
   its own right. */
.switch{display:inline-flex;align-self:center;margin-bottom:var(--s6);
  padding:4px;gap:4px;border-radius:var(--r-pill);
  background:var(--wash);border:1px solid var(--hair)}
.switch-btn{font:600 .9375rem/1 var(--font-display);letter-spacing:.01em;
  white-space:nowrap;padding:12px 22px;border-radius:var(--r-pill);
  border:1px solid transparent;background:transparent;color:var(--muted);
  cursor:pointer;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.switch-btn:hover{color:var(--deep)}
.switch-btn[aria-pressed="true"]{background:var(--deep);color:#fff}

/* ── THE THREE CARDS ──
   Professional is the centre one and carries the Deep Blue fill the closing
   card uses, which is how this site marks the recommended thing. The client
   asked for the strongest visual emphasis on it "without making the page look
   overly busy": one filled card in three, and nothing else changes. */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  align-items:start}
.plan{position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:var(--s6);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
/* The card lifts, as the option cards on the homepage do. These are three
   things a reader is choosing between and each one holds its own action, so
   the whole card answering the pointer is right. No hand cursor: the button
   inside is the target, not the card. */
.plan:hover{transform:translateY(-4px);box-shadow:var(--lift);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
.plan:hover .btn-primary{background:var(--deep-press)}
.plan:hover .btn svg{transform:translateX(3px)}

.plan--featured{background:var(--deep);border-color:var(--deep);
  box-shadow:var(--lift);overflow:hidden}
.plan--featured::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 90% at 92% 100%,
    color-mix(in srgb, var(--azure) 40%, transparent), transparent 66%)}
.plan--featured > *{position:relative}
.plan--featured:hover{border-color:var(--deep)}
.plan--featured .tag{color:color-mix(in srgb, #fff 92%, var(--azure))}
.plan--featured .plan-price,
.plan--featured .plan-term,
.plan--featured .plan-hi li{color:#fff}
.plan--featured .plan-lead,
.plan--featured .plan-alt{color:color-mix(in srgb, #fff 78%, var(--deep))}
.plan--featured .plan-hi{border-top-color:color-mix(in srgb, #fff 24%, transparent)}
.plan--featured :focus-visible{outline-color:#fff}

/* Pinned to the top-right corner of the card it belongs to. Uppercase through
   the same eyebrow settings the rest of the site uses. */
.plan-flag{position:absolute;top:var(--s5);right:var(--s5);z-index:1;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--azure);color:#fff;
  font-family:var(--font-display);font-size:.6875rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1}

/* The plan name uses the shared eyebrow. On a card this wide it never wraps. */
.plan .tag{margin-bottom:var(--s5)}

/* The price is the biggest thing on the card and the only place on the site
   outside a heading that Montserrat is set this large. It borrows the h2 step
   rather than inventing one. */
.plan-price{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.9rem,3.2vw,2.75rem);line-height:1.1;letter-spacing:-.025em;
  color:var(--ink);margin-bottom:var(--s2);max-width:none}
.plan-price span{font-family:var(--font-body);font-weight:400;
  font-size:var(--t-text);letter-spacing:0;color:var(--muted);margin-left:6px}
.plan--featured .plan-price span{color:color-mix(in srgb, #fff 78%, var(--deep))}

/* 12-month subscription commitment sits UNDER THE MONTHLY PRICE, not in a
   footnote. The client's concern is specific: the page must not read as though
   somebody can buy one month, generate the included courses and cancel.
   Nothing here says cancel anytime, no commitment, or month to month. */
.plan-term{font-size:var(--t-small);line-height:var(--lh-small);
  color:var(--muted);margin-bottom:var(--s3);max-width:none;min-height:1.7em}

/* THE SAVING HAS TO BE LOUD. The client asked for it to be visually
   noticeable, because it is what pushes somebody to pay a year up front. So it
   is set in the accent, at the small-caps weight, not as a grey note. */
.plan-save{font-family:var(--font-display);font-weight:600;font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--deep);
  background:var(--wash);border-radius:var(--r-pill);padding:5px 12px;
  display:inline-block}
.plan--featured .plan-save{color:var(--deep);background:#fff}

/* The alternative price. Always present, never hidden by the switch: the
   client's own card copy carries both with "or" between them. */
.plan-alt{font-size:var(--t-fine);line-height:var(--lh-fine);color:var(--faint);
  margin-bottom:var(--s5);max-width:none;min-height:1.75em}

.plan-lead{font-size:var(--t-small);line-height:var(--lh-small);
  margin-bottom:var(--s5);max-width:none}

.plan-hi{list-style:none;margin:0 0 var(--s6);padding:var(--s5) 0 0;
  border-top:1px solid var(--hair);display:flex;flex-direction:column;
  gap:var(--s2);flex:1}
/* Each allowance carries the mark of the thing it counts, and they are the
   same two icons the definitions further down the page use. The two numbers
   are the only difference between the plans, so they get the only marks. */
.plan-hi li{display:grid;grid-template-columns:28px minmax(0,1fr);
  column-gap:var(--s3);align-items:center;
  font-family:var(--font-display);font-weight:500;font-size:1rem;
  line-height:1.3;color:var(--ink)}
.plan-mark{width:28px;height:28px;border-radius:var(--r-chip);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--deep) 11%, var(--white));color:var(--deep)}
.plan--featured .plan-mark{background:color-mix(in srgb, #fff 20%, transparent);
  color:#fff}

.plan .btn{align-self:stretch;justify-content:center; z-index:1;}

/* ── the switch itself ──
   One attribute on the section, and each card shows the matching half. Both
   halves are in the markup, so with no scripting the page is complete on
   monthly and nothing is hidden from a reader or a crawler. */
[data-billing="monthly"] [data-when="annual"],
[data-billing="annual"]  [data-when="monthly"]{display:none}

/* ═══ 3 · WHEN A PLAN IS NOT ENOUGH ═══
   The two "need more" cases share the page's one dark panel, side by side.
   Same card as the About page's navy pair: the capability tiles' surface,
   scaled up. Nothing new. */
.more{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
/* Also the whole card, also therefore a span inside. */
.more-card{display:flex;flex-direction:column;
  background:color-mix(in srgb, #fff 7%, transparent);
  border:1px solid color-mix(in srgb, #fff 13%, transparent);
  border-radius:var(--r-card);padding:var(--s6);
  text-decoration:none;color:inherit;
  transition:transform var(--fast) var(--ease),background var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
/* It lifts too, but takes no shadow: a navy shadow on a navy panel is nothing.
   The surface and the edge carry the change instead. */
.more-card:hover{transform:translateY(-4px);
  background:color-mix(in srgb, #fff 12%, transparent);
  border-color:color-mix(in srgb, var(--azure) 46%, transparent)}
/* The stepper badge in the state it settles into, the same chip the About
   page's navy cards wear. */
.more-ico{width:56px;height:56px;border-radius:var(--r-card);
  display:flex;align-items:center;justify-content:center;font-size:25px;
  margin-bottom:var(--s5);background:var(--deep);
  border:1px solid color-mix(in srgb, var(--azure) 90%, transparent);
  color:color-mix(in srgb, var(--azure) 45%, #fff)}
.more-card h3{margin-bottom:var(--s3)}
/* The paragraph takes the space above the action, so both buttons sit on the
   floor of the panel rather than one floating up under a shorter card. */
/* pretty, so the paragraph never ends on a single word. These are the
   client's own sentences and cannot be lengthened to fix a widow. */
/* No measure. The copy itself was lengthened rather than the column narrowed,
   so the paragraph fills three lines on its own at every desktop width. */
.more-card p{max-width:none;flex:1;margin-bottom:var(--s6);text-wrap:pretty;
  color:color-mix(in srgb, #fff 64%, var(--navy))}
/* shared.css puts the dark panel's secondary button at the right-hand edge,
   which is right for a panel-wide action and wrong inside a card. */
.more-card .btn,.more-card .link{align-self:flex-start}
/* Same on the navy pair, whose links are also inside a div rather than an
   anchor. On dark the link lifts to white rather than to azure. */
.more-card:hover .link{color:#fff}
.more-card:hover .link svg{transform:translateX(3px)}

/* ═══ 4 · THE COMPARISON TABLE ═══
   Nineteen rows across four columns, and the client asked specifically that it
   work on a phone. It does not scroll sideways and it does not shrink: below
   the breakpoint every row re-lays as its own small block.

   NO RULES BETWEEN ROWS. The rows are told apart by alternating fills instead,
   each one a rounded pill with real padding inside it, because nothing else on
   this site separates anything with a hairline grid and nothing else has a
   square corner. A pointer fills whichever row it is on, so the eye can hold
   its place across four columns without a line to follow. */
.cmp{width:100%}
/* separate, not collapse: a collapsed table cannot round a cell, and the pill
   is the whole point. */
.cmp table{width:100%;border-collapse:separate;border-spacing:0 2px;
  text-align:left}
.cmp caption{text-align:left}

.cmp thead th{font-family:var(--font-display);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--deep);
  padding:0 var(--s4) var(--s4);vertical-align:bottom;white-space:nowrap}
.cmp thead th:first-child{color:var(--muted);padding-left:var(--s5)}
.cmp thead th:last-child{padding-right:var(--s5)}

.cmp tbody th,.cmp tbody td{border:0;padding:15px var(--s4);
  font-size:var(--t-text);line-height:var(--lh-text);
  transition:background var(--fast) var(--ease)}
.cmp tbody th{font-weight:400;color:var(--ink);text-align:left;width:34%;
  padding-left:var(--s5)}
.cmp tbody td{color:var(--muted);vertical-align:middle}
.cmp tbody td:last-child{padding-right:var(--s5)}

/* The pill. Drawn on the cells rather than the row, because a <tr> takes no
   background radius: the first cell rounds its left end, the last its right,
   and the ones between stay square so the fill runs unbroken. */
.cmp tbody th{border-radius:var(--r-chip) 0 0 var(--r-chip)}
.cmp tbody td:last-child{border-radius:0 var(--r-chip) var(--r-chip) 0}

/* Every other row filled, so the eye has a rhythm to track across. */
.cmp tbody tr:nth-child(odd) th,
.cmp tbody tr:nth-child(odd) td{background:var(--wash)}
/* And whichever row the pointer is on, filled a step further. */
.cmp tbody tr:hover th,
.cmp tbody tr:hover td{background:color-mix(in srgb, var(--deep) 10%, var(--white))}

/* The five rows that actually differ carry the figures, so they are set in the
   heading face and the full ink: they are the only reason the table exists. */
.cmp tbody tr:nth-child(-n+5) td{font-family:var(--font-display);font-weight:500;
  color:var(--ink);white-space:nowrap}

/* THE TICK IS A MARK, NOT A CHARACTER. Same chip as the plan allowances and
   the who-it's-for list, at the same radius, so every tick on the page is one
   object. The cell carries the word "Included" for a screen reader and the
   chip is decoration on top of it. */
.cmp td.yes::after{content:'✓';display:inline-flex;align-items:center;
  justify-content:center;width:30px;height:30px;border-radius:var(--r-chip);
  font-size:.9375rem;line-height:1;
  background:color-mix(in srgb, var(--deep) 12%, var(--white));color:var(--deep);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.cmp tbody tr:hover td.yes::after{background:var(--deep);color:#fff}

/* ═══ 5 · WHAT THE TWO ALLOWANCES MEAN ═══ */
.units{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
/* THE WHOLE CARD IS THE LINK, so the thing that looks like a link inside it is
   a span: a link cannot sit inside a link. Same construction as the option
   cards on the homepage and the closing pair. */
.unit{display:flex;flex-direction:column;
  border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--s6);
  text-decoration:none;color:inherit;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
/* It lifts, because it is clickable. That is the site's split: a card you can
   press rises and takes the shadow, a card you cannot only warms. */
.unit:hover{transform:translateY(-4px);box-shadow:var(--lift);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
.unit-ico{width:56px;height:56px;border-radius:var(--r-card);
  display:flex;align-items:center;justify-content:center;font-size:26px;
  margin-bottom:var(--s5);background:var(--deep);color:#fff;
  transition:background var(--fast) var(--ease)}
.unit:hover .unit-ico{background:var(--azure)}
.unit h3{margin-bottom:var(--s3)}
.unit p{max-width:none;font-size:var(--t-small);line-height:var(--lh-small);
  text-wrap:pretty}
/* A link per card rather than one button under both, so each definition
   points at the part of the platform that owns it. The paragraph takes the
   space above, so both links sit on the floor of their cards. */
.unit p{flex:1;margin-bottom:var(--s5)}
.unit .link{align-self:flex-start}
/* The link answers the CARD's hover, not just its own. The site already does
   this where the whole card is an anchor, through `a:hover .link`; these cards
   are divs, so the same behaviour has to be asked for by name. */
.unit:hover .link{color:var(--azure)}
.unit:hover .link svg{transform:translateX(3px)}

/* ═══ 6 · WHO IT'S FOR ═══
   Picture one side, the four reasons the other, half each. */
.who{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);
  align-items:stretch;margin-bottom:0}

/* THE PICTURE MATCHES ITS COLUMN.
   It has no ratio of its own: the row is as tall as the words beside it and
   the photograph fills that, so the two sides always finish level. Stacked,
   there is no column to match and it takes 4:3.

   This is the site's rule for a picture beside words, and it is the same on
   About and on Subscription Plans. */
.who-fig{position:relative;overflow:hidden;border-radius:var(--r-card);
  background:var(--wash)}
.who-fig{overflow:hidden}
.who-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.02);
  transition:filter var(--fast) var(--ease),transform var(--fast) var(--ease)}
/* The photograph answers a pointer the way the homepage's option cards do:
   held back at rest so the pictures across the site read as one owned set, and
   released to full colour on hover. On the page's own hover speed, so nothing
   is still moving after the rest has settled.

   The figure is not a link and nothing here suggests it is: no lift, no hand
   cursor. The picture simply comes alive under the pointer. */
.who-fig:hover img{filter:none;transform:scale(1.035)}
.who-fig::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--deep) 8%, transparent) 0%,
    color-mix(in srgb, var(--deep) 2%, transparent) 46%,
    color-mix(in srgb, var(--navy) 15%, transparent) 100%)}

.who-text h2{margin-bottom:var(--s4)}
.who-text .lead{max-width:none;margin-bottom:var(--s5);text-wrap:pretty}
/* The honest exit: anybody who wanted ready-made courses is on the wrong page
   and should be told so. */
.fits-out{max-width:none;margin:0 0 var(--s6);font-size:var(--t-small);
  line-height:var(--lh-small)}

/* ── FOUR CARDS, FOUR MARKS ──
   One card per reason, each with the mark of the thing it is about: a document
   for written procedures, a notebook for training kept current, the shield for
   what an auditor asks, the group for your own experts. Four identical ticks
   said nothing the sentence beside them did not already say.

   THE MARK IS BARE HERE, not in a chip. The chips elsewhere on the page sit on
   the same line as their text and need the square to hold a place in the row;
   these sit alone above their own card, where a square only boxes a box. */
.fits{list-style:none;display:flex;flex-direction:column;gap:var(--s3);
  margin:0 0 var(--s5)}
/* Mark beside the words, not above them: stacked in a column, an icon on its
   own line doubles the height of every card for nothing. */
.fit{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:var(--s4);
  align-items:start;
  border:1px solid var(--hair);border-radius:var(--r-card);
  padding:var(--s4) var(--s5);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.fit:hover{background:var(--wash);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
.fit-ico{display:block;font-size:22px;margin-top:2px;color:var(--deep);
  transition:color var(--fast) var(--ease)}
.fit:hover .fit-ico{color:var(--azure)}
.fit p{margin:0;max-width:none;font-size:var(--t-small);
  line-height:var(--lh-small);text-wrap:pretty}

/* ═══ 7 · BEFORE YOU SUBSCRIBE ═══
   Two columns: what the section is on one side, the questions on the other, so
   six rows of accordion do not run the full width of the panel with the
   heading stranded above them. The heading side sticks while the questions
   scroll past it. */
.faqs{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:var(--pad);align-items:start}
.faqs-head{position:sticky;top:var(--s7)}
.faqs-head h2{margin-bottom:var(--s4)}
.faqs-head .lead{max-width:46ch;margin-bottom:var(--s5)}

.qa{display:flex;flex-direction:column;gap:var(--s3)}

/* A card, at the card radius, like everything else on the site that holds
   something. Not bare hairlines. */
.faq{background:var(--panel);border:1px solid var(--hair);
  border-radius:var(--r-card);
  transition:background var(--fast) var(--ease),
             border-color var(--fast) var(--ease)}
.faq:hover{border-color:color-mix(in srgb, var(--deep) 30%, transparent)}
/* THE OPEN ONE IS MARKED BY ITS SURFACE, NOT BY A SHADOW. Nothing on this site
   is elevated while it is just sitting there; the lift belongs to hover. So
   the open card warms to the same wash the other quiet cards take, and keeps
   the blue edge. :not(.is-closing) so it goes back as the panel starts to
   close rather than after it has finished. */
.faq[open]:not(.is-closing){background:var(--wash);
  border-color:color-mix(in srgb, var(--deep) 30%, transparent)}

.faq summary{display:flex;align-items:center;gap:var(--s4);
  padding:var(--s5) var(--s5);cursor:pointer;list-style:none;
  border-radius:var(--r-card);
  font-family:var(--font-display);font-weight:500;font-size:1rem;line-height:1.4;
  letter-spacing:-.01em;color:var(--ink);
  transition:color var(--fast) var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--deep)}
.faq[open]:not(.is-closing) summary{color:var(--deep)}

/* ── THE MARK IS A PLUS THAT BECOMES A MINUS ──
   Two bars in a square at the shared chip radius, the same object as every
   other mark on the page. The upright one turns flat and fades as it goes, so
   the change is one movement rather than two glyphs swapping. */
.faq-mark{position:relative;flex:none;margin-left:auto;
  width:32px;height:32px;border-radius:var(--r-chip);
  background:color-mix(in srgb, var(--deep) 11%, var(--white));
  transition:background var(--fast) var(--ease)}
.faq-mark::before,.faq-mark::after{content:'';position:absolute;left:50%;top:50%;
  width:13px;height:2px;border-radius:1px;background:var(--deep);
  transform:translate(-50%,-50%);
  transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease),
             background var(--fast) var(--ease)}
.faq-mark::after{transform:translate(-50%,-50%) rotate(90deg)}
/* :not(.is-closing) so the mark turns back at the START of the close, leading
   the panel rather than snapping after it has finished. */
.faq[open]:not(.is-closing) .faq-mark{background:var(--deep)}
.faq[open]:not(.is-closing) .faq-mark::before{background:#fff}
.faq[open]:not(.is-closing) .faq-mark::after{transform:translate(-50%,-50%) rotate(0);
  opacity:0;background:#fff}

/* PADDING GOES WITH THE HEIGHT. The panel is border-box, so a height of 0
   still leaves its vertical padding standing and the close appears to stall
   with a sliver showing. The script animates both together, which is why the
   padding lives on this element and not on the paragraph inside it. */
.faq-a{padding:0 var(--s5) var(--s5);overflow:hidden}
.faq-a p{max-width:74ch;margin:0;font-size:var(--t-small);
  line-height:var(--lh-small)}

/* ═══ 8 · THE CLIENT'S CLOSING LINE ═══
   Sits on the ground between the last panel and the closing pair, not inside
   either. It is a brand line, not a section heading, so it takes the eyebrow's
   tracking at a size that can carry a full stop after every word. */
.motto{max-width:var(--frame);margin:0 auto var(--s5);
  text-align:center;padding:var(--s6) 0;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.15rem,1.5vw,1.375rem);letter-spacing:.18em;
  text-transform:uppercase;color:var(--deep);line-height:1.3}

/* ═══ RESPONSIVE ═══ */

@media (max-width:1080px){
  /* The three cards stop fitting before anything else does: a price, a term
     line and two allowances need width. Professional keeps the middle of the
     top row rather than dropping to a lonely second row. */
  .plan-grid{grid-template-columns:1fr 1fr}
  .plan-grid .plan:last-child{grid-column:1/-1}
}

@media (max-width:880px){
  /* Words first, then the picture. Nothing to match, so it takes 4:3. */
  .who{grid-template-columns:1fr;gap:var(--s5)}
  .who-fig{order:2;aspect-ratio:4/3}
  .who{grid-template-columns:1fr;gap:var(--s5)}
  .who-fig{order:2}
  .plan-grid{grid-template-columns:1fr}
  .plan-grid .plan:last-child{grid-column:auto}
  .units{grid-template-columns:1fr}
  /* Side by side down to here, not to 1080. Full width, each card's paragraph
     fell to two lines and the card read half empty. */
  .more{grid-template-columns:1fr}
  /* Nothing to stick to once the two columns are one. */
  .faqs{grid-template-columns:1fr;gap:var(--s6)}
  .faqs-head{position:static}

  /* ── THE TABLE ON A PHONE ──
     It does not scroll sideways, and it is not shrunk until the figures are
     unreadable. Every row becomes its own small block: the feature name on its
     own line, then the three plans side by side underneath with their names
     above the values.

     The <table> keeps its semantics — the header row is only hidden visually,
     so a screen reader still announces "Active Learners, Professional, Up to
     100" exactly as it does on a desktop. */
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .cmp table,.cmp tbody,.cmp tr{display:block;width:100%}
  /* Still no lines. Stacked, the row itself can carry the pill, so the same
     every-other fill runs down the phone as runs across the desktop. */
  .cmp tbody tr{padding:var(--s4) var(--s5);border-radius:var(--r-chip);
    background:none}
  .cmp tbody tr:nth-child(odd){background:var(--wash)}
  .cmp tbody th,.cmp tbody td{background:none !important;border-radius:0}
  .cmp tbody th{display:block;width:auto;padding:0 0 var(--s3);
    font-family:var(--font-display);font-weight:500}
  .cmp tbody td{display:inline-block;width:calc(33.333% - 4px);
    padding:0;vertical-align:top}
  .cmp tbody tr:nth-child(-n+5) td{white-space:normal}
  /* The plan name above each value, since the header row is no longer visible
     on screen. */
  .cmp tbody td::before{content:attr(data-plan);display:block;
    font-family:var(--font-display);font-size:.6875rem;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
    margin-bottom:4px}
  .cmp tbody tr:hover{background:none}

  /* THE FOURTEEN IDENTICAL ROWS SHOW ONE TICK, NOT THREE.
     Three ticks in a line saying the same thing is 28 extra lines of nothing
     on a phone, and the section's own opening line already says everything
     else is included on all three.

     The other two cells are hidden the way the skip link is — off-canvas, not
     display:none — so a screen reader still hears "Organisation LMS,
     Professional, Included" exactly as it does on a desktop. */
  .cmp tbody tr:nth-child(n+6){display:flex;align-items:baseline;
    justify-content:space-between;gap:var(--s4)}
  .cmp tbody tr:nth-child(n+6) th{padding:0;flex:1}
  .cmp tbody tr:nth-child(n+6) td{width:auto;flex:none}
  .cmp tbody tr:nth-child(n+6){padding-top:var(--s3);padding-bottom:var(--s3)}
  .cmp tbody tr:nth-child(n+6) td::before{display:none}
  .cmp tbody tr:nth-child(n+6) td + td{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (max-width:560px){
  /* "Contact Us for Enterprise" will not fit on one line inside a card on a
     phone, and .btn is nowrap by default. Full width and wrapping, which is
     what a button does on a narrow screen anyway. */
  .more-card{padding:var(--s5)}
  .more-card .btn,.who-text .btn{align-self:stretch;
    justify-content:center;white-space:normal;text-align:center}
  .plan{padding:var(--s5)}
  .plan-flag{top:var(--s4);right:var(--s4)}
  .unit{padding:var(--s5)}
  /* Stacked, the pill-in-a-pill read as a lozenge inside a lozenge. The frame
     takes the card radius so it is plainly a frame, and the two buttons keep
     the pill: one shape holding two, rather than three of the same shape
     nested. */
  .switch{width:100%;flex-direction:column;border-radius:var(--r-card);
    padding:6px;gap:6px}
  .switch-btn{width:100%}

  /* MOST POPULAR SITS ABOVE THE PLAN NAME. Pinned to the corner it crowds the
     name on a narrow card; static, it is the first thing in the card and reads
     as a label on the whole plan, which is what it is. */
  .plan-flag{position:static;align-self:flex-start;margin-bottom:var(--s4)}
  .cmp tbody td{width:100%;display:block}
  .cmp tbody td + td{margin-top:var(--s3)}
  /* Wide enough to hold PROFESSIONAL, so the three values line up in a column
     instead of each starting wherever its label happens to end. */
  .cmp tbody td::before{display:inline-block;margin:0 10px 0 0;min-width:106px}
  .cmp tbody tr{padding-left:var(--s4);padding-right:var(--s4)}
  .cmp td.yes::after{vertical-align:middle}
}