/* 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 ------------------------------------------------------------------------------- */
/* ---------- The package rail, after Apple's "Get to know iPhone" ----------
   Victor: "I want it to look EXACTLY like Apple... tall cards. when user clicks a card, it opens
   up to a larger view." So the four packages stop being four columns of prose and become four
   tall cards you scroll, each opening a focused sheet.

   WHY THE CARDS CARRY SO LITTLE. Apple's cards hold a label, a headline and a picture — the
   argument lives in the sheet behind the +. Ours were doing the opposite: every card carried the
   tag, the hook, the suggested enrolments and the perk value, which is four columns of small
   print competing with the one number a teacher is actually comparing. The card now holds the
   name, the price and the payout, and everything else waits behind the +.

   SCROLL-SNAP RATHER THAN A JS CAROUSEL. The rail is a real overflow container: it works with a
   trackpad, a touch swipe, a scrollbar and the arrow buttons, and it keeps working if the script
   never loads. The arrows just call scrollBy. */
.tierrail { display: grid; grid-auto-flow: column;
            /* A FIXED COLUMN, NOT `minmax(335px, 1fr)`. A 1fr track always eats the whole row, so
               there is never any free space left for justify-content to centre — the cards sat
               wherever the track happened to start, which on a wide screen was well right of the
               middle. A fixed width leaves the slack that centring needs. */
            grid-auto-columns: 335px;
            /* Centred ONLY at the width where all four fit, via the media query below. Plain
               `center` on a scroll container centres the overflow too, which pushes the FIRST
               card off the left edge where nothing can scroll back to it — measured, not feared:
               at 1024 it put Seed at x=0 with its start unreachable. `justify-content: safe
               center` is the one-line version of this and it did NOT behave here, so the width is
               named explicitly instead of trusted to a keyword. */
            justify-content: start;
            gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
            /* THE SCROLLER IS THE VIEWPORT, not the content column. Centring inside the column
               would only re-centre within the same off-centre box; the row has to be measured
               against the screen for the middle to be the actual middle. Both margins pull out to
               the glass, and the padding puts the gutter back INSIDE the scroller, so when the row
               does overflow the first card still lines up with every other block on the page
               rather than hugging the edge.

               body carries overflow-x: hidden, so a viewport unit that includes a scrollbar clips
               instead of giving the page a horizontal bar. */
            width: 100vw; margin-inline: calc(50% - 50vw);
            --gutter: max(20px, calc((100vw - 1200px) / 2 + 32px));
            padding: 4px var(--gutter) 22px;
            /* SCROLL-PADDING, or the gutter is thrown away the moment the row overflows. Each card
               is a `scroll-snap-align: start` point, and start means the start of the SNAPPORT,
               which defaults to the padding box — so the browser settled the rail at scrollLeft
               152 to put Seed flush against the glass, wiping out the very gutter the padding was
               there to create. Insetting the snapport by the same amount makes Seed's snap point
               scrollLeft 0, where it lines up with every other block on the page. */
            scroll-padding-inline-start: var(--gutter); }
/* 4 cards at 335 + 3 gaps at 20 + the 32px gutter either side = 1464. Above that the row has
   slack and gets centred; below it the row overflows and stays anchored at the left gutter, which
   is what keeps the first card reachable and lets the rest run off the right edge. */
/* THE PADDING HAS TO SHRINK HERE TOO, and that is the part that was wrong the first time. The
   gutter padding above is ~382px a side on a 1900px screen, which leaves a 1136px content box for
   a 1400px row: the row still overflowed, centring shifted it LEFT by half the overflow, and
   scroll-snap then dragged it further to snap Seed. Measured 118px of gap on the left against
   382px on the right, which is the complaint that started this.

   Above the breakpoint the row fits the screen, so there is no gutter to line up with and no
   reason to reserve one. A small symmetric pad leaves the slack that centring actually needs. */
@media (min-width: 1464px) {
  .tierrail { justify-content: center; padding-inline: 20px; }
}
.tierrail::-webkit-scrollbar { display: none; }

.tcard { position: relative; scroll-snap-align: start; display: flex; flex-direction: column;
         min-height: 0; padding: 32px 30px 96px; border-radius: 20px; overflow: hidden;
         background: #fff; border: 0; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px rgba(16,24,40,.06); }
/* NO OUTLINE - Victor, 2026-09-17: "please remove the border around the cards, there's a small
   outline." The border was the ONLY thing separating a card from the page, so it could not simply
   be deleted: these sit on a cream ground and the gradient below finishes pale, which would have
   left the bottom of every card dissolving into the page. A soft shadow does the same job without
   drawing a line - it reads as the card lifting off the page rather than being fenced on it. */
/* WHITE IS NOT `var(--wash)`. The wash is a cream a shade off the page, which on this page's own
   cream ground gives a card you have to look for. Literal white separates. On dark it would be a
   headlight, so dark keeps the translucent surface it had. */
/* `.tcard--top` used to differ by border-colour; with no border it is carried by the ground. */

/* A SMALL COLOUR BAR PER PACKAGE, climbing from the company green to the purple that Orchard
   already owns in its type. Victor: "put a small on seed (green company color) a darker on
   sprout, a darker on bloom and purple on orchard."

   It is the only colour on a white card, so it does the job the tinted grounds used to do: says
   these four are one set, in order, before any of the words are read.

   A PSEUDO-ELEMENT, so the ladder lives entirely in CSS and the markup stays four identical
   cards. .tcard is a column flexbox, so ::before is simply its first item. */
.tcard::before { content: ""; flex: 0 0 auto; width: 44px; height: 6px; border-radius: 99px;
                 margin-bottom: 18px; background: var(--green); }
.tcard--sprout::before  { background: #81a46e; }
.tcard--bloom::before   { background: var(--green-ink); }
.tcard--orchard::before { background: var(--purple-ink); }

/* THE CARD GROUND CARRIES THE LADDER TOO - Victor, 2026-09-17: "change the background colour of the
   card for the free one I want to be a very light green, sprout will be a little bit darker, bloom
   will be darker and orchard will be purple."
   So the tint is back, alongside the bars rather than instead of them: same four steps, same order,
   now stated twice. The greens are one hue walked down in lightness so the ladder reads as one
   material getting denser, not four unrelated colours.
   THESE ARE LIGHT-MODE ONLY BY CONSTRUCTION. `.pc-dark .tcard` further down carries (0,2,0) and
   sits after this block, so dark keeps its translucent surface and none of this reaches it. */
/* A GRADIENT, NOT A FLAT FILL - Victor: "put the gradient towards it, let's clean it up and make
   it look nice." Each card keeps the colour it was given at the TOP, where the package name, the
   price and the payout rate live, and thins toward the foot where the list runs out. So the ladder
   Victor set is read exactly where the eye lands, and the long empty lower half stops looking like
   a slab of colour waiting for content.
   The stops are the same hue at two strengths rather than colour-to-white: fading to white would
   have broken the set back into four differently-sized blocks of colour, and against a cream page
   a white foot is the edge that disappears. */
.tcard--seed    { background: linear-gradient(180deg, #f1f8ec 0%, #f7fbf3 46%, #fdfefc 100%); }
.tcard--sprout  { background: linear-gradient(180deg, #e6f1de 0%, #f0f7ea 46%, #f9fcf7 100%); }
.tcard--bloom   { background: linear-gradient(180deg, #d8e9cd 0%, #e7f2df 46%, #f4f9f0 100%); }
.tcard--orchard { background: linear-gradient(180deg, #ece5fa 0%, #f3eefc 46%, #faf8fe 100%); }

/* AND THE TYPE HAS TO MOVE WITH THE GROUND, or the tint costs legibility.
   Measured rather than eyeballed, against the darkest step (#d8e9cd):
     body copy is already --ink-2 and stays comfortable, 8.11 at worst;
     the sub-line under the price was --muted #64748b, which falls to 3.73 - under AA. It was only
       4.76 on white to begin with, so any tint at all was going to push it under;
     "You keep 85%" was --green-ink #5f8149, already marginal at 4.45 on WHITE, and 3.48 on the
       Bloom tint. #4d6b3a takes it to 4.73 and keeps the same hue.
   Orchard's purple needed nothing: --purple-ink is 4.83 on its own tint. */
.tcard--seed .tcard__keep span,
.tcard--sprout .tcard__keep span,
.tcard--bloom .tcard__keep span,
.tcard--orchard .tcard__keep span { color: var(--ink-2); }
.tcard--seed .tcard__keep b,
.tcard--sprout .tcard__keep b,
.tcard--bloom .tcard__keep b { color: #4d6b3a; }
/* THE LADDER HAS TO BE REBUILT FOR DARK, not nudged. --green-ink flips to the brand green there,
   so Seed and Bloom both computed to #a3c893 and two of the four steps became the same colour —
   the one thing the bar exists to prevent. Checked by reading the computed values rather than by
   looking at it, because two greens a shade apart is exactly the difference a screenshot hides.

   Dark climbs the other way, dimmest to brightest, because on a #14151a ground brightness is what
   reads as emphasis. Same order, same four steps. */
.pc-dark .tcard--seed::before    { background: #6f9159; }
.pc-dark .tcard--sprout::before  { background: #86ac70; }
.pc-dark .tcard--bloom::before   { background: #a3c893; }
.pc-dark .tcard--orchard::before { background: #cabff2; }

.tcard__eyebrow { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.tcard__h { font-family: var(--head); font-weight: 800; font-size: clamp(38px, 3.6vw, 47px);
            letter-spacing: -.02em; line-height: 1.04; color: var(--ink); }
.tcard__h small { display: block; margin-top: 7px; font-family: var(--body); font-size: 16px;
                  font-weight: 500; letter-spacing: 0; color: var(--muted); }
.tcard__keep { margin-top: 16px; }
.tcard__keep b { display: block; font-size: 21px; color: var(--green-ink); }
.tcard--top .tcard__keep b { color: var(--purple-ink); }
.tcard__keep span { font-size: 14px; color: var(--muted); }
.tcard__tag { margin-top: 17px; font-size: 16px; color: var(--ink-2); }

/* The cards are plain white and carry no picture. Two attempts went behind them — the dark app
   screenshots, then the glossy How It Works renders — and Victor's verdict on the second was the
   same as on the first. The type and the numbers are the content here; anything behind them was
   decoration competing with the thing people came to read.

   The `.tcard > * { z-index: 1 }` rule went with them. It existed to lift the copy above a
   pseudo-element, and there is no longer a pseudo-element to lift it above. `overflow: hidden`
   stays — it is what keeps the corners rounded on the sheet script's moving parts. */
/* Dark had its edge in `border-color`, which is inert now the border is gone; an inset ring gives
   it back without reintroducing a line in light mode. */
.pc-dark .tcard { background: rgba(255,255,255,.06);
                  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

.tcard__list { margin-top: 20px; display: grid; gap: 13px; }
/* THE GLYPH IS THE DASHBOARD'S OWN. Gerald: "change the check mark to image icons from
   dashboards." Every path here is lifted verbatim from the ICONS map in dashboard.html, so a
   teacher meets Pod Builder's folder, Spotlight's twin sparkles and Matchmaking's two-figures
   here and then again in the sidebar they are paying to unlock. A check said only "included",
   which is the one thing a list of included things does not need to repeat sixteen times.
   Flex rather than absolute positioning: the icon is now content, so a line that wraps keeps
   its text aligned under itself instead of under the glyph. */
.tcard__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px;
                  font-weight: 600; color: var(--ink); list-style: none; }
.tcard__ic { flex: 0 0 auto; margin-top: 2px; color: var(--green-ink); }
.tcard--top .tcard__ic { color: var(--purple-ink); }

/* The blurb only ever renders inside the sheet — it is the "describe more of it" half, and on the
   card it would be the wall of text the rail exists to remove. */
.tcard__blurb { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 18px; }

/* The + is the affordance Apple uses and it has to be a real button: it is the only way into the
   detail for a keyboard, and the whole card being clickable does not help a screen reader. */
.tcard__more { position: absolute; right: 30px; bottom: 30px; width: 46px; height: 46px;
               display: grid; place-items: center; border-radius: 50%; cursor: pointer; z-index: 2;
               color: var(--bg); background: var(--ink); border: 0;
               transition: transform .18s ease, opacity .18s ease; }
.tcard__more:hover { transform: scale(1.06); }
.tcard__more:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* Hidden only once the script has taken the detail out; without it this is the old page.

   SCOPED TO .tcard AND THAT IS LOAD-BEARING. The script MOVES this element into the sheet rather
   than copying it, so an unscoped `.js-rail .tcard__detail` follows it there and hides the very
   content the sheet exists to show — a dialog that opens onto an empty panel. Inside .tcard it is
   hidden; inside the sheet it is not the same selector any more. */
.js-rail .tcard .tcard__detail { display: none; }

.tierrail__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.railbtn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
           background: var(--wash); border: 1px solid var(--line-2); color: var(--ink-2);
           cursor: pointer; transition: background .18s ease; }
.railbtn:hover { background: var(--line-2); }
.railbtn:disabled { opacity: .4; cursor: default; }
.railbtn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- The focused sheet ---------- */
.tvmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 22px; }
.tvmodal__scrim { position: absolute; inset: 0; background: rgba(15,23,42,.45);
                  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tvmodal__sheet { position: relative; width: min(760px, 100%); max-height: min(86vh, 900px);
                  overflow-y: auto; background: var(--bg); border-radius: 22px;
                  padding: 44px 44px 40px; box-shadow: 0 24px 70px rgba(15,23,42,.28); }
.tvmodal__x { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; display: grid;
              place-items: center; border-radius: 50%; border: 0; cursor: pointer;
              color: var(--bg); background: var(--ink); }
.tvmodal__x:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.tvmodal__eyebrow { font-size: 14px; font-weight: 600; color: var(--muted); }
.tvmodal__h { font-family: var(--head); font-weight: 800; letter-spacing: -.03em;
              font-size: clamp(30px, 4vw, 44px); line-height: 1.06; margin: 6px 0 24px; color: var(--ink); }
/* Apple nests the body in its own pale panel inside the white sheet; it is what stops a wall of
   text reading as a dialog full of settings. */
.tvmodal__panel { background: var(--wash); border-radius: 16px; padding: 26px 24px; }
.tvmodal__panel p { color: var(--ink-2); font-size: 15px; margin-bottom: 14px; }
.tvmodal__panel .btn { margin-top: 8px; }

/* ---------- The add-on, as Apple's Music promo band ----------
   Copy left, art right, one flat band. Their band ends in "Learn more"; ours ends in a disabled
   control, because there is nothing to learn more about yet.

   THE TEXT COLOURS ARE MEASURED, not chosen. On this ground --muted came out at 4.20:1 and
   --muted-2 at 2.26:1, both under AA, so the body is --ink-2 at 9.13:1 and stays subordinate by
   size rather than by contrast. The disabled button's own label sits at 4.10:1 and stays there:
   WCAG exempts inactive controls, and darkening it would undo the flatness that says not ready. */
.promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 34px;
         align-items: center; margin-top: 40px; padding: 52px 48px; border-radius: 22px;
         background: var(--wash); }
.promo__flag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
               text-transform: uppercase; color: var(--muted); background: var(--bg);
               border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px;
               margin-bottom: 16px; }
.promo__h { font-family: var(--head); font-weight: 800; letter-spacing: -.03em; color: var(--ink);
            font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; }
.promo__sub { margin-top: 16px; max-width: 46ch; font-size: 15px; color: var(--ink-2); }
.promo__btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 20px; padding: 0;
              font: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
              background: none; border: 0; cursor: not-allowed; }

/* The art: three stacked cards, the front one holding an avatar and two lines. Says "more than
   one child, on your account" without inventing a screenshot of a feature nobody can open. */
.promo__art { position: relative; height: 210px; }
.promo__card { position: absolute; left: 50%; top: 50%; width: 208px; height: 124px;
               border-radius: 14px; background: var(--bg); border: 1px solid var(--line-2);
               box-shadow: 0 6px 20px rgba(15,23,42,.06); }
.promo__card--1 { transform: translate(-50%, -50%); padding: 18px; display: grid;
                  align-content: start; gap: 9px; z-index: 3; }
.promo__card--2 { transform: translate(-50%, -50%) translate(16px, -16px) rotate(4deg); z-index: 2; }
.promo__card--3 { transform: translate(-50%, -50%) translate(32px, -32px) rotate(8deg); z-index: 1; }
.promo__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--green-tint); }
.promo__line { height: 9px; border-radius: 5px; background: var(--wash); }
.promo__line--short { width: 58%; }

@media (max-width: 820px) {
  .promo { grid-template-columns: 1fr; padding: 34px 26px; gap: 8px; }
  .promo__art { order: -1; height: 170px; margin-bottom: 14px; }
  .tvmodal__sheet { padding: 40px 22px 28px; }
}

.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); }

/* THE AUDIENCE FOOTER IS COPY ONLY, and `.cta` is `grid-template-columns: 1.1fr .9fr` because on
   the landing page it carries a join-card in the second column. With one child that leaves the
   text squeezed into 1.1fr with a void beside it. One column, and a measure that stops the line
   running the full width of a 1900px screen.

   It lives HERE rather than in styles.css because styles.css is shared and two other sessions are
   editing it this hour. A page-scoped modifier cannot collide with them. */
.cta--solo { grid-template-columns: 1fr; }
.cta--solo .cta__copy { max-width: 780px; }