/* PodsCool — teacher packages.

   Page-specific, in its own file rather than appended to styles.css: that sheet is loaded by
   twelve pages behind a ?v= cache-buster, so adding to it means bumping every one of them to
   ship a change only this page can see. */

/* ---- The four cards ---------------------------------------------------------------------- */
/* SUBGRID, so every card's rows line up with its neighbours'.
   Equal-height cards were not what was asked for and are not the same thing: each card was
   distributing its own slack, so Bloom's three-line tagline pushed its payout block below
   Seed's one-line tagline, and the eye could not read across the row. The eight rows below are
   the eight parts of a card, and each card is now measured against the same eight. */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* NINE rows, one per child: name, badge, price, payout, tagline, hook, perk value, the
     spacer, and the button. It was eight, so the button dropped into an implicit row that
     subgrid does not govern - and the 1fr landed on the perk-value row, which is why the net
     cost line sat jammed against the CTA with the slack above it instead of below. */
  grid-template-rows: auto auto auto auto auto auto 1fr auto;
  gap: 18px;
  margin-top: 34px;
}
.tier {
  display: grid;
  grid-row: span 8;
  grid-template-rows: subgrid;
  gap: 0;
  background: var(--bg);
  border-radius: 20px;
  padding: 26px 22px 22px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}
/* Browsers without subgrid fall back to the previous behaviour rather than to chaos: cards of
   equal height, each spacing its own contents. Worse, not broken. */
@supports not (grid-template-rows: subgrid) {
  .tiers { grid-template-rows: none; }
  .tier { display: flex; flex-direction: column; }
}

/* The band that says who a tier is FOR does the guiding here, so no tier is dressed up as the
   "popular" one — we have no popularity data, and inventing it on a pricing page is a lie with
   a price tag attached. Orchard gets a deeper surface because 0% is the headline of the range,
   not because we are steering anyone to it. */
.tier--top { background: linear-gradient(180deg, var(--bg) 0%, var(--purple-tint) 100%); }

.tier__name {
  font-family: var(--head);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tier__who {
  display: inline-block;
  align-self: flex-start;
  margin-top: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green-ink);
  font-size: 12px;
  font-weight: 700;
}
.tier--top .tier__who { background: var(--purple-tint); color: var(--purple-ink); }

.tier__price {
  margin-top: 18px;
  font-family: var(--head);
  font-weight: 800;
  font-size: 34px;
  color: var(--ink);
  line-height: 1;
}
.tier__price small { font-size: 15px; font-weight: 600; color: var(--muted); }

/* THE PAYOUT, not the take. "You keep 90%" is the number a teacher is deciding on; "we take
   10%" is the same fact written from our side of the table. */
.tier__keep {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--cream);
}
.tier__keep b {
  display: block;
  font-family: var(--head);
  font-size: 21px;
  color: var(--green-ink);
  line-height: 1.15;
}
.tier--top .tier__keep b { color: var(--purple-ink); }
.tier__keep span { font-size: 12.5px; color: var(--muted); }

.tier__tag { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tier__hook { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.tier__hook b { color: var(--ink-2); }

/* What the included perks are worth, which is what makes a $499 package a $360 one. */
.tier__perkval { margin-top: 14px; margin-bottom: 4px; font-size: 13px; line-height: 1.45; }
.tier__perkval b { color: var(--green-ink); font-size: 14px; }
.tier--top .tier__perkval b { color: var(--purple-ink); }
.tier__perkval--none { color: var(--muted); }

/* The eighth row is the button; the seventh (1fr) absorbs the slack, so every CTA sits on the
   same line whatever length of tagline sits above it. */
.tier__cta-pad { min-height: 18px; }
.tier .btn { align-self: end; }

/* ---- Perk comparison --------------------------------------------------------------------- */
.perks-wrap { margin-top: 46px; overflow-x: auto; }
.perks {
  width: 100%;
  min-width: 720px;          /* below this the columns crush; the wrapper scrolls instead */
  border-collapse: collapse;
  font-size: 14.5px;
}
/* LEFT, not centre — ruled 2026-08-21. The third column is sentences, and centred prose has
   a ragged left edge that the eye has to re-find on every row. */
.perks th, .perks td { padding: 14px 16px; text-align: left; }
.perks thead th {
  font-family: var(--head);
  /* Bigger than the cells beneath them - these are the column's identity, and at 15px they sat
     at the same weight as the values, so the eye had to hunt for which column it was reading. */
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--line);
}
.perks tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.perks tbody tr + tr th, .perks tbody tr + tr td { border-top: 1px solid var(--line-2); }
.perks tbody tr:hover { background: var(--cream); }
.perks .is-none { color: var(--muted-2); }
.perks .is-payuse { color: var(--muted); }
.perks .is-included { color: var(--green-ink); font-weight: 700; }

/* ---- MARKS, NOT WORDS ----------------------------------------------------------------------
   Victor, 2026-08-31: "remove unlimited and give it a check mark or X".

   SIZED AND COLOURED, NOT JUST TYPED. A raw ✓ at body size next to "3/month" reads as a smaller
   thing than the number beside it, when it means MORE. These sit at 19px so a column of them has
   weight, and the cross is --muted-2 rather than red: not-included is an absence, not an error,
   and a column of red crosses down the Seed column would read as four things being wrong with it.

   THE GLYPH IS NEVER THE ONLY CHANNEL. Each mark is aria-hidden with an sr-only word beside it in
   the markup, so this is not a grid of unlabelled symbols to a screen reader — the same rule the
   verdict block follows for red/green, one file over. */
.perks__mark { font-size: 19px; line-height: 1; }
.perks__mark--yes { color: var(--green-ink); }
.perks__mark--no  { color: var(--muted-2); }
/* The caveat that rides with Seed's tick. Its own line, small and muted: it qualifies the tick
   rather than competing with it, and Seed is the only cell in the table that carries one. */
.perks__note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* ---- THE PAID PACKAGES, AS ONE TINTED BLOCK ------------------------------------------------
   Victor, 2026-08-31: "put those in a colored background container to express this is all with
   ai. Keep it clean and appealing."

   COLUMNS 3-5 ARE SPROUT, BLOOM AND ORCHARD — the row label is column 1, Seed is column 2, and
   Seed is deliberately OUTSIDE the tint: it is the one package without the Generator. The shading is
   the argument: three columns that belong together, and one that does not.

   A FILL AND A RADIUS, NEVER A BORDER. This site separates by fill and shadow, and a ruled box
   around three columns of a border-collapse table also fights the row hairlines and loses. The
   rounding is applied at the four actual corners of the block, which is why it takes four rules:
   a table cannot be given a radius as a group.

   PURPLE, NOT GREEN — Victor, 2026-08-31: "highlighted in purple hue to show these are the AI."
   It was green first and that was the wrong call: green is this product's yes/approved colour and
   it is already doing that job in every "Unlimited" INSIDE the block, so the tint and the values
   were saying the same thing twice and the grouping stopped reading as a grouping. Purple says
   "this set is different in kind" without competing with the cells it contains.

   --purple-tint at 85%. It was 45% first and that was too faint to be a highlight at all — the
   cells measured 0.975/0.968/0.993, a difference the eye does not register as a colour. Not 100%
   either: full --purple-tint against the green values inside starts competing with them, and the
   block should frame the numbers rather than argue with them. */
.perks thead th:nth-child(n + 3),
.perks tbody td:nth-child(n + 3) { background: color-mix(in srgb, var(--purple-tint) 85%, #fff); }

/* The banner that names the block, spanning exactly the tinted columns so the label cannot drift
   away from the shading it describes. */
.perks__banner td { padding: 0; border: 0; background: none; }
/* `.perks thead tr.perks__banner th`, not `.perks__banner th` — the shorter selector is (0,1,1)
   and `.perks thead th` above is (0,1,2), so the banner's colour LOST and it rendered in --ink.
   Caught by reading the computed style in a browser, not from this file: a rule that loses looks
   exactly like a rule that was never written. */
.perks thead tr.perks__banner td { padding: 0; border: 0; background: none; }
.perks thead tr.perks__banner th {
  font-family: var(--head);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--purple-ink);
  padding: 10px 16px 9px;
  border: 0;
  background: color-mix(in srgb, var(--purple-tint) 85%, #fff);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
/* The bottom two corners, on the last row of the body. */
.perks tbody tr:last-child td:nth-child(3) { border-bottom-left-radius: var(--radius-sm); }
.perks tbody tr:last-child td:nth-child(5) { border-bottom-right-radius: var(--radius-sm); }
/* The hover wash must not paint over the block, or hovering a row erases the grouping. */
.perks tbody tr:hover td:nth-child(n + 3) { background: var(--purple-tint); }
/* The rule under the column names stops at Seed: it belongs to the table, not to the block, and
   running it through the tint cuts the container in half. */
.perks thead th:nth-child(n + 3) { border-bottom-color: transparent; }

/* ---- Notes ------------------------------------------------------------------------------- */
.pricing-note {
  margin-top: 34px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--cream);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.pricing-note h3 {
  font-family: var(--head);
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--ink);
}
.pricing-note + .pricing-note { margin-top: 14px; }

/* ---- Narrower screens -------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .tiers { grid-template-columns: 1fr; }
  .tier__price { font-size: 30px; }
}

/* Visually hidden, still read aloud. The site had no such helper, and a <caption> is the only
   thing that tells a screen-reader user what this grid of numbers IS before they enter it. */
.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;
}

/* ---- A la carte -------------------------------------------------------------------------
   Same table as the perk grid, but three columns rather than five, and the last one is prose
   so it reads left-aligned instead of centred like a value. */
.alacarte { min-width: 560px; }
.alacarte td:last-child { text-align: left; color: var(--muted); font-size: 13.5px; }
.alacarte td:last-child b { color: var(--ink-2); }

/* ---- Referral power ups ------------------------------------------------------------------ */
.refs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ref { background: var(--cream); border-radius: 16px; padding: 20px 22px; }
.ref h3 { font-family: var(--head); font-size: 16px; margin: 0 0 6px; color: var(--ink); }
.ref p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 620px) { .refs { grid-template-columns: 1fr; } }

/* The buy button's status line. styles.css defines .form-status, but this page's version needs
   to sit centred under the cards rather than left-aligned inside a form. */
#buy-status { text-align: center; margin-top: 22px; min-height: 1px; }

/* ---- Dark theme --------------------------------------------------------------------------
   Everything here is a surface or a shadow — the TEXT already came right on its own, because
   this file uses --ink, --muted and the rest, and those are remapped in styles.css. That is the
   token layer paying for itself: only the things with hard-coded light values needed touching.

   THE CARDS NEEDED AN EDGE. They separated from the page by a pale fill and a soft shadow, and
   on dark they had neither — four price cards dissolving into the background with nothing to
   say where one ended and the next began. A stroke is what fill-and-shadow cannot do here, kept
   deliberately faint: .12 reads as an edge without becoming a box drawn round every tier. */
.pc-dark .tier {
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
}
/* The featured card keeps its lilac wash, mixed rather than painted so it stays a tint of the
   surface instead of a pale block, and takes a slightly brighter edge to stay the featured one. */
.pc-dark .tier--top {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(179,162,232,.16) 100%);
  border-color: rgba(202,191,242,.34);
}
/* Two rules mix a tint with #fff to lighten it; on dark that reintroduces a white block. */
.pc-dark .perks tbody td:nth-child(n + 3) { background: rgba(179,162,232,.12); }
.pc-dark .perks tbody tr:hover { background: rgba(255,255,255,.05); }