/* How It Works: the hub (how-it-works.html) and its two audience pages (how-it-works-parents.html,
   how-it-works-teachers.html). Moved out of the page's two inline <style> blocks on 2026-11-12, when the page
   split in three; the rules are unchanged, and the new pieces are at the end. */

    /* THE BAND IS WHITE EDGE TO EDGE on Victor's instruction, in both themes, which is why the
       type below is pinned rather than left to inherit. The art itself is a transparent webp,
       so the white is the band's choice and not something the picture forces.
       The FIRST render could not be keyed at all: its highlights blew out to pure white and
       touched the frame edge, so a flood fill cut THROUGH the shape. Four thresholds, all bled,
       checked by compositing over magenta rather than by eye. The replacement ring keys cleanly
       from the border; its enclosed hole needed one extra seed, found by scanning for the
       largest remaining near-white region. Guessing that coordinate put the seed outside the
       ring, where it silently did nothing and left a white disc on dark. */
    .startband { background:#fff; padding:78px 0; }
    .startband__in { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
      gap:44px; align-items:center; }
    .startband h2 { font-family:var(--head); font-weight:800; font-size:40px;
      line-height:1.08; letter-spacing:-.022em; color:var(--ink); }
    .startband p { margin-top:16px; font-size:17px; line-height:1.55; color:var(--muted); max-width:46ch; }
    .startband__cta { margin-top:26px; }
    .startband__art img { display:block; width:100%; height:auto; }
    /* The band stays white in dark mode, so its type cannot follow --ink/--muted or it inverts
       to near-white on white and disappears. Same pattern as .cta-band and .stats in reverse. */
    .pc-dark .startband h2 { color:#14202b; }
    .pc-dark .startband p  { color:#5b626d; }
    /* THE SWITCH IS COLOR-CODED: teacher purple, parent green, on Victor's instruction.
       Only the SELECTED half carries its color - the segmented control's whole job is to say
       which one you are on, and tinting both would take that away. The unselected half stays
       muted and picks up its own color on hover, so the choice you have NOT made still
       announces what it is.

       Written against the -tint / -ink tokens rather than hex, because both pairs INVERT in
       dark: --purple-ink is #6a54b5 on white and #cabff2 on #14151a, --purple-tint goes from
       an opaque #f1edfb to rgba(179,162,232,.18). One rule, correct in both themes.

       It has to beat `.pc-dark .hiw-chip.is-on`, which is also (0,3,0) - an attribute selector
       weighs the same as a class - so this wins on SOURCE ORDER alone, and only because this
       block sits after the stylesheet link. Moving it into styles.css above that rule would
       silently stop it working in dark.

       --green-ink is #5f8149, and on its own tint that measures 3.97:1 - under AA for text
       this size, which is 14.5px/600 and not large enough for the 3:1 allowance. Composited
       rather than read off the token, because the dark tints are translucent and an
       uncomposited reading returns the same number for every one of them. #547240 is the
       same hue scaled to 0.88 and clears it at 4.86:1. Purple needed no such help (5.14:1
       light, 7.69:1 dark) and neither does green in dark, where the token inverts to #a3c893
       and reads 7.04:1 - so the darkened value is scoped to light and nothing else. */
    .hiw-chips { --chip-green: #547240; --chip-purple: var(--purple-ink); }
    .pc-dark .hiw-chips { --chip-green: var(--green-ink); }
    .hiw-chip[data-hiw="t"].is-on { background: var(--purple-tint); color: var(--chip-purple); }
    .hiw-chip[data-hiw="p"].is-on { background: var(--green-tint);  color: var(--chip-green); }
    .hiw-chip[data-hiw="t"]:hover { color: var(--chip-purple); }
    .hiw-chip[data-hiw="p"]:hover { color: var(--chip-green); }
    .hiw-chip[data-hiw="t"]:focus-visible { outline-color: var(--chip-purple); }
    .hiw-chip[data-hiw="p"]:focus-visible { outline-color: var(--chip-green); }

    /* THE SWITCH MOVES. Victor: "a sexy animation of the screen ... think apple ... simple and
       clean". Two moving parts, and deliberately not a third.

       ONE. A single pill slides between the halves and changes color on the way, instead of one
       background switching off and another switching on. That is the whole difference between a
       segmented control that feels physical and two buttons that blink - the selection is one
       object that MOVED, so the eye tracks it and never has to re-find it. Its width animates
       too, because the two labels are not the same length. cubic-bezier(.32,.72,0,1) is the
       out-quint shape Apple uses almost everywhere: nearly all the distance is covered in the
       first third, so it reads as immediate and still lands softly.

       TWO. The content cross-dissolves, leaving upward and arriving from below - the same
       direction of travel as reading down the page. 160ms out, 320ms in, so the half you are
       leaving is never the thing you are waiting for.

       The thumb draws the selected fill now, so the chip's own .is-on background has to go, and
       `.hiw-chips .hiw-chip.is-on` is what beats `.pc-dark .hiw-chip.is-on` on source order.

       [data-reveal] is EXCLUDED from the cross-dissolve, and that is not fussiness: the scroll
       reveal already animates opacity and transform on those same elements, so both would be
       writing the same two properties and whichever landed last would win. The two edu cards
       are the only panes carrying both attributes. */
    .hiw-chips { position: relative; isolation: isolate; }
    .hiw-chips__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
      z-index: -1; border-radius: 999px;
      background: var(--purple-tint); box-shadow: var(--shadow-xs);
      transition: transform .42s cubic-bezier(.32,.72,0,1),
                  width .42s cubic-bezier(.32,.72,0,1),
                  background-color .42s cubic-bezier(.32,.72,0,1); }
    .hiw-chips__thumb.is-p { background: var(--green-tint); }
    .hiw-chips .hiw-chip.is-on { background: transparent; box-shadow: none; }
    [data-for]:not([data-reveal]) {
      transition: opacity .32s cubic-bezier(.32,.72,0,1), transform .32s cubic-bezier(.32,.72,0,1); }
    [data-for].hiw-leave { opacity: 0; transform: translateY(-6px); }
    [data-for].hiw-enter { opacity: 0; transform: translateY(10px); }
    @media (prefers-reduced-motion: reduce) {
      .hiw-chips__thumb { transition: none; }
      [data-for]:not([data-reveal]) { transition: none; }
    }

    @media (max-width:860px){
      .startband { padding:54px 0; }
      .startband__in { grid-template-columns:1fr; gap:26px; }
      .startband h2 { font-size:31px; }
      .startband__art { order:-1; }
    }

    /* THREE ACROSS, TWO DOWN. Victor: "for teacher view, why dont you do 3 wide, 2 row - that
       would look cleaner on desktop." Six squares at two-up was three rows deep and pushed the
       last pair under the fold on a laptop.

       Page-scoped, and this is the one place in this file where that is about more than the
       other session overwriting styles.css: .how-grid appears on how-it-works.html and nowhere
       else in public/, so moving it in the shared sheet would bump a cache key on ten pages to
       change a rule one page reads. The 861px rule in styles.css still takes it to one column,
       and 861-980 stays at two. */
    @media (min-width: 981px) { .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

    /* THE MONEY PANEL. Tinted, type only, no card and no picture - so it reads as a different
       KIND of block from both the white .pfit card above it and the teacher's photo squares. */
    .ppay { padding: 6px 0 4px; }
    .ppay__panel { background: var(--green-tint); border-radius: 28px; padding: 58px 62px 52px; }
    .ppay__h { font-family: var(--head); font-weight: 800; font-size: 40px; line-height: 1.07;
      letter-spacing: -.024em; color: var(--ink); margin: 0 0 34px; }
    .ppay__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
    .ppay__row dt { font-family: var(--head); font-weight: 800; font-size: 19px;
      color: var(--ink); margin-bottom: 9px; }
    .ppay__row dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
    .ppay__fine { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-2);
      font-size: 14px; line-height: 1.55; color: var(--muted-2); max-width: 74ch; }

    /* THE PARENT CLOSE, deliberately the opposite shape to the teacher's .startband. */
    .pclose { padding: 78px 0 96px; }   /* Victor: "need space under this section" */
    .pclose__in { text-align: center; }
    .pclose h2 { font-family: var(--head); font-weight: 800; font-size: 44px; line-height: 1.06;
      letter-spacing: -.025em; color: var(--ink); }
    .pclose p { margin: 14px auto 26px; font-size: 17.5px; line-height: 1.5;
      color: var(--muted); max-width: 46ch; }
    /* Victor, 2026-10-30: "if a pod doesnt exist, request it" - the button browses, the link requests. */
    .pclose__acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; }
    .pclose__req { color: #0066cc; font-size: 17px; letter-spacing: -.01em; text-decoration: none; }
    .pclose__req:hover { text-decoration: underline; }
    .pc-dark .pclose__req { color: #2997ff; }

    @media (max-width: 980px) {
      .ppay__panel { padding: 38px 26px 34px; border-radius: 22px; }
      .ppay__h { font-size: 29px; margin-bottom: 26px; }
      .ppay__rows { grid-template-columns: 1fr; gap: 24px; }
      .pclose { padding: 54px 0 64px; }
      .pclose h2 { font-size: 31px; }
    }

    /* THE PARENT CARD. Apple's accordion block, and the two details that make it read as one
       rather than as a list next to a picture: the card CLIPS the screenshot, so the product
       runs off the right edge instead of sitting politely inside a box, and the type column is
       fixed while the art column takes whatever is left.

       The card is painted explicitly rather than with a token, because no single token is right
       in both themes: --bg is #fff in light (correct) and #14151a in dark, which is the page
       ground itself, so the card would vanish. --cream is the dark surface that works and is
       nearly the page color in light. So: white here, --cream under .pc-dark. */
    .pfit { padding: 86px 0 10px; }
    .pfit__h { font-family: var(--head); font-weight: 800; font-size: 44px; line-height: 1.06;
      letter-spacing: -.025em; color: var(--ink); margin: 0 0 30px; }

    /* SIX CARDS IN A RAIL, not six rows of an accordion - Victor, 2026-09-21: "remove the image on
       the right, make each section a card with the diagram in a carousel please. (apple theme)".

       WHAT THE ACCORDION COST. One row open at a time, so five of the six answers were always
       hidden, and the picture beside them was a screenshot of Browse Pods that answered none of
       them. A parent scanning for "what does this cost me" had to open rows to find out. Every
       card is now open, and the diagram that belongs to each answer sits on it.

       THE RAIL IS THE MEMBERSHIP RAIL'S, deliberately - same scroll-snap, same fixed columns, same
       centred-only-when-they-fit rule. That one took three goes: a 1fr track leaves no slack for
       centring, gutter padding large enough to line up with the heading can itself force the
       overflow that centring then shifts, and scroll-snap throws the gutter away unless
       scroll-padding matches it. All three are settled here by construction rather than rediscovered.

       `justify-content` is start, and centred only above the width where all six fit. Six 300px
       cards and five 18px gaps is 1890px, which no laptop has, so in practice this rail always
       scrolls - the media query is there for the 4K case rather than as decoration. */
    .pfitrail { display: flex; justify-content: flex-start; gap: 18px;
      overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
      width: 100vw; margin-inline: calc(50% - 50vw);
      --prail-gutter: max(20px, calc((100vw - var(--maxw, 1200px)) / 2 + 32px));
      /* START ONLY. A scroll container's inline-END padding is left OUT of its scrollable overflow
         in Blink and WebKit, so `padding-inline` buys a left gutter and silently buys nothing on
         the right: scroll to the end and the last card sits against the glass while the left gutter
         grows with the viewport. That is Victor's featured-pods complaint word for word - "white
         space grows on left but not on the right" - and Session 6 paid for this knowledge on that
         carousel yesterday. Firefox honours the padding, which is how it ships looking fine on one
         engine. A zero-width ::after with a flex basis IS content, so it is inside the scroll range
         everywhere. */
      padding: 4px 0 26px var(--prail-gutter);
      scroll-padding-inline-start: var(--prail-gutter); }
    /* Minus one gap, or the end gutter is the gutter PLUS the gap and the rail scrolls a little
       further than it has anything to show. */
    .pfitrail::after { content: ""; flex: 0 0 calc(var(--prail-gutter) - 18px); }
    /* FLEX, NOT GRID, precisely so that ::after can be given a basis. In a grid the pseudo-element
       becomes a grid item and takes a full `grid-auto-columns` track - a 300px spacer instead of a
       gutter-sized one. */
    .pfitrail::-webkit-scrollbar { display: none; }
    /* Centred only where all six fit: 6 x 300 + 5 x 18 = 1890, plus a 32px gutter each side.
       padding-inline-START shrinks with it; the ::after spacer keeps the right side honest. */
    @media (min-width: 1954px) {
      .pfitrail { justify-content: center; padding-inline-start: 20px; --prail-gutter: 38px; }
    }

    /* The card is painted explicitly rather than with a token, because no single token is right in
       both themes: --bg is #fff in light (correct) and #14151a in dark, which is the page ground
       itself, so the card would vanish. --cream is the dark surface that works. */
    .pcard { scroll-snap-align: start; flex: 0 0 300px; display: flex; flex-direction: column;
      background: #fff; border-radius: 20px; padding: 22px 22px 26px;
      box-shadow: var(--shadow-sm); }
    .pc-dark .pcard { background: var(--cream); }
    .pcard__art { margin: 0 0 18px; }
    /* THE ART IS DRAWN, NOT PHOTOGRAPHED - Victor, 2026-09-17: "design a photo for each ... match
       the titles ... be creative." Six flat scenes built from the site's own tokens, so they cannot
       drift from the brand the way stock photography does, and inline SVG costs no request, no
       asset and no cache key of its own. role="img" with a label rather than aria-hidden: each
       picture restates the card it belongs to, so a screen reader gets a summary rather than
       silence. They are unchanged from the accordion - the layout moved, the drawings did not. */
    .pfit__ill { display: block; width: 100%; height: auto; border-radius: 12px; }
    .pcard__h { font-family: var(--head); font-weight: 700; font-size: 19px;
      letter-spacing: -.012em; line-height: 1.22; color: var(--ink); margin: 0 0 10px; }
    .pcard p { font-size: 14.5px; line-height: 1.58; color: var(--muted); margin: 0 0 10px; }
    .pcard p:last-child { margin-bottom: 0; }

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

    .pfit__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
      font-family: var(--head); font-weight: 700; font-size: 16.5px; color: var(--purple-ink);
      text-decoration: none; }
    .pfit__cta svg { transition: transform .26s cubic-bezier(.32,.72,0,1); }
    .pfit__cta:hover svg { transform: translateX(4px); }

    @media (max-width: 980px) {
      .pfit { padding: 58px 0 6px; }
      .pfit__h { font-size: 32px; }
      .pcard { flex-basis: 78vw; }
    }
    @media (prefers-reduced-motion: reduce) {
      .pfit__cta svg { transition: none; }
      .pfitrail { scroll-behavior: auto; }
    }

    /* THE CREDIT TABLE, ONE PER AUDIENCE. Victor, 2026-11-02: "Once built. Can you add it to how it
       works parents and how it work teachers." The table is Gerald's, column for column, from the
       thread where he set the numbers ("Cut those hours in half ... Let's start with this. I like this
       amount"), and he asked for it to be shown: "We will need to provide this table of the math to
       the parents. So they have an idea of what a pod would give them."

       DARK, ON A LIGHT PAGE, because that is the table he sent - a black card, hairline rules, white
       figures - and because it makes the card read as the reference it is rather than as one more
       paragraph. The rules are drawn per CELL with gaps between the columns (border-spacing), which
       is the detail that makes his read as a table and not a striped list. The card is painted in
       hex, not tokens: it is dark in both themes on purpose, like .nums.

       Two sections rather than one shared, because the sentence around the table is the part that
       differs. A parent is told what a credit buys their child; a teacher is told they do not choose
       it - Gerald: "This will also need to be pushed to teachers ... your pods will tracked on a
       transcript and credits will be issued to students". Both carry his other condition word for
       word in spirit: "Making it clear we know this isn't accredited but it's a guiding principle". */
    .hcred { padding: 84px 0 28px; }
    .hcred__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
      gap: 56px; align-items: center; }
    .hcred__eye { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: var(--purple-ink); }
    .hcred--p .hcred__eye { color: #547240; }   /* the chip's AA green, for the same reason */
    .hcred h2 { font-family: var(--head); font-weight: 800; font-size: 44px; line-height: 1.06;
      letter-spacing: -.025em; color: var(--ink); margin: 0; text-wrap: balance; }
    .hcred__lead { margin: 16px 0 0; font-size: 17.5px; line-height: 1.55; color: var(--muted); max-width: 50ch; }
    .hcred__facts { display: grid; gap: 18px; margin: 28px 0 0; }
    .hcred__facts dt { font-family: var(--head); font-weight: 700; font-size: 17px;
      letter-spacing: -.01em; color: var(--ink); margin-bottom: 4px; }
    .hcred__facts dd { margin: 0; font-size: 15px; line-height: 1.58; color: var(--muted); max-width: 56ch; }
    .hcred__fine { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2);
      font-size: 13.5px; line-height: 1.55; color: var(--muted-2); max-width: 62ch; }

    .ctab { background: #111113; color: #f5f5f7; border-radius: 26px; padding: 28px 30px 24px;
      box-shadow: 0 24px 60px rgba(17, 17, 19, .16), 0 4px 14px rgba(17, 17, 19, .08); }
    /* The border-spacing puts a gap OUTSIDE the first and last columns too, so the wrapper is widened
       by that gap into the card's padding and the table fills it. Widening the TABLE instead (100% plus
       the gap, pulled back by a negative margin) left it overhanging its own scroll box by exactly one
       gap, and on a phone that drew a scrollbar under the last row. */
    .ctab__scroll { overflow-x: auto; margin: 0 -18px; }
    .ctab table { width: 100%; border-collapse: separate; border-spacing: 18px 0;
      font-variant-numeric: tabular-nums; }
    .ctab caption { caption-side: top; text-align: left; padding: 0 18px 18px; font-family: var(--head);
      font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: #f5f5f7; }
    .ctab caption span { display: block; margin-top: 3px; font-weight: 400; font-size: 13.5px; color: #a1a1a6; }
    .ctab th { padding: 0 0 18px; text-align: left; vertical-align: bottom; font-weight: 500;
      font-size: 13.5px; color: #c7c7cc; white-space: nowrap; }
    .ctab td { padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, .13); font-size: 16px;
      color: #d1d1d6; white-space: nowrap; }
    .ctab td:first-child { font-weight: 600; color: #f5f5f7; }
    .ctab td:last-child { font-weight: 700; color: #cabff2; }
    .hcred--p .ctab td:last-child { color: #a3c893; }
    .ctab__foot { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .13);
      font-size: 13px; line-height: 1.5; color: #a1a1a6; }

    @media (max-width: 980px) {
      .hcred { padding: 56px 0 18px; }
      .hcred__in { grid-template-columns: 1fr; gap: 30px; }
      .hcred h2 { font-size: 31px; }
      .ctab { padding: 22px 20px 18px; border-radius: 22px; }
      .ctab__scroll { margin: 0 -12px; }
      .ctab table { border-spacing: 12px 0; }
      .ctab caption { padding: 0 12px 14px; }
      .ctab th { font-size: 12.5px; white-space: normal; }
      .ctab td { font-size: 14.5px; padding: 13px 0; }
    }

    /* ================= THE APPLE LAYER =================================================
       Victor, 2026-11-02, after new-to-homeschool.html went Apple: "can you do the same APPLE
       theme ... with the how it works page please". The same parts, read off apple.com/imac:
       white page and #f5f5f7 tiles, #1d1d1f semibold headlines, #6e6e73 copy, Apple blue for the
       one action, the brand purple-into-green gradient only on a phrase (Victor: "please use the purple and green"), no cream, no navy, no lavender.

       MOSTLY BY TOKEN, scoped to <main>: --ink, --muted, --cream and --green-tint are redefined
       there, so every component below inherits Apple's colours without its own rule and the header
       and footer stay as they are. The rules after that are the few pieces that hard-code a colour
       (the credits table, the stat numbers, the purple buttons) or a weight. Everything is under
       body.hiw-ap, so taking this look off again is deleting the class. */
    body.hiw-ap { background: #fff; }
    .hiw-ap main { --ink: #1d1d1f; --ink-2: #1d1d1f; --muted: #6e6e73; --cream: #f5f5f7; --green-tint: #f5f5f7;
      --a-tile: #f5f5f7; --a-blue: #0071e3; --a-grad: linear-gradient(100deg, #b3a2e8 0%, #a3c893 100%);   /* the brand's own light hues (Victor, 2026-11-07: "we have a light hue") */
      background: #fff; color: #1d1d1f; }
    .hiw-ap main h1, .hiw-ap main h2 { font-weight: 600; letter-spacing: -.03em; }
    .hiw-ap main h3, .hiw-ap main h4, .hiw-ap .pcard__h { font-weight: 600; }
    .hiw-ap .hiw-grad { background-image: var(--a-grad); }
    /* Eyebrows as Apple sets a product name: sentence case, semibold, ink. */
    .hiw-ap .hcred__eye, .hiw-ap main .eyebrow { text-transform: none; letter-spacing: 0; font-size: 19px; font-weight: 600; color: #1d1d1f; }
    /* The segmented control: a white thumb on Apple's gray track, for both audiences. */
    .hiw-ap .hiw-chips__thumb, .hiw-ap .hiw-chips__thumb.is-p { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); }
    .hiw-ap .hiw-chips .hiw-chip { color: #6e6e73; }
    .hiw-ap .hiw-chips .hiw-chip.is-on { color: #1d1d1f; }
    .hiw-ap .hiw-dash a { color: var(--a-blue); }
    /* Tiles. */
    .hiw-ap .how-card, .hiw-ap .pcard, .hiw-ap .ppay__panel, .hiw-ap .place__tile, .hiw-ap .assure__item, .hiw-ap .edu__art { background: var(--a-tile); box-shadow: none; }
    .hiw-ap .how-card h3 span { color: #6a54b5; }
    .hiw-ap .pfitbtn { background: #e8e8ed; color: #1d1d1f; }
    /* The one action: Apple blue. */
    .hiw-ap .btn--purple { background: var(--a-blue); border-color: var(--a-blue); color: #fff; }
    .hiw-ap .btn--purple:hover { background: #0077ed; border-color: #0077ed; }
    .hiw-ap .pfit__cta { color: var(--a-blue); }
    /* The credits table: a light tile, not a navy card. */
    .hiw-ap .ctab { background: var(--a-tile); color: #1d1d1f; box-shadow: none; }
    .hiw-ap .ctab caption { color: #1d1d1f; }
    .hiw-ap .ctab caption span, .hiw-ap .ctab th { color: #6e6e73; }
    .hiw-ap .ctab td { border-top-color: #d2d2d7; color: #6e6e73; }
    .hiw-ap .ctab td:first-child { color: #1d1d1f; }
    .hiw-ap .ctab td:last-child { color: #6a54b5; font-weight: 600; }
    .hiw-ap .hcred--p .ctab td:last-child { color: #5f9a4a; }
    .hiw-ap .ctab__foot { border-top-color: #d2d2d7; color: #6e6e73; }
    /* The numbers band stays black, as Apple's do; the figures take the brand gradient. */
    .hiw-ap .num b { background: linear-gradient(100deg, #cbbcff 0%, #b9a6ff 35%, #a3c893 100%); -webkit-background-clip: text;
      background-clip: text; color: transparent; font-weight: 600; }   /* the brand purple and green, lifted for black */
    /* AS WIDE AS THE FIGURE, NOT THE COLUMN: a block <b> spans the whole column, so the gradient ran
       past the digits and only its purple end ever landed on them. */
    .hiw-ap .num b { display: table; }
    /* Icons in ink, the way Apple draws its glyphs. */
    .hiw-ap .place__ico, .hiw-ap .edu--apple .assure__ico, .hiw-ap .pcard svg { color: #1d1d1f; }
    .hiw-ap .cta-band--apple { background: var(--a-tile); }

    /* ================= ONE PAGE, BOTH SIDES =============================================
       Gerald, 2026-11-07: "I kind of want to make the teacher and parent how it works on a single
       page. Left side teacher, right side parent. Very similar flows. Just the nuance differences
       ... Each one gets 5 steps to enrollment ... Each one gets be told how payments work without
       values included ... let each other see what the other has to go through on the same page."
       The two columns are the same component in two colours, so the eye reads them as one flow
       seen from two seats. Glass for the step numbers (they float), tiles for the reading. */
    /* both dashboard links now show at once, so they need air between them */
    /* the hero photo: text left, the picture right; stacked under the text on a narrow screen */
    .page-hero--hiw .hiw-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
    /* room before the black (Victor, 2026-11-09: "add more white blank space to the bottom of the first section") */
    .page-hero--hiw { padding-bottom: clamp(72px, 9vw, 140px); }
    .page-hero--hiw .hiw-top__side { justify-items: stretch; padding-bottom: 0; }
    .hiw-photo { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; background: #f5f5f7;
      box-shadow: 0 30px 60px -30px rgba(17,24,39,.35); }
    .hiw-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
    @media (max-width: 900px) { .page-hero--hiw .hiw-top { grid-template-columns: minmax(0, 1fr); } .hiw-photo { border-radius: 22px; } }
    .page-hero--hiw .hiw-dash { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: flex-end; }   /* beats styles.css, which sets block */
    .hiw-lead--b { font-weight: 700; color: #1d1d1f; }

    /* ================= THE YEAR IN HOURS (H3): the copy on the left, the red-marker math large on a sheet */
    .hours { padding: 110px 0 100px; }
    .hours__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
    .hours__eye { margin: 0; font-size: 19px; font-weight: 600; color: #1d1d1f; }
    .hours h2 { margin: 10px 0 0; font-family: var(--head); font-weight: 600; font-size: 52px; line-height: 1.04; letter-spacing: -.035em; color: #1d1d1f; text-wrap: balance; }
    .hours h2 b { font-weight: 800; }
    .hours__k { margin: 18px 0 0; font-size: 21px; font-weight: 600; line-height: 1.35; color: #1d1d1f; }
    .hours__d { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: #6e6e73; max-width: 50ch; }
    .hours__d b { color: #1d1d1f; }
    .hours__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
    .hours__list li { padding: 14px 18px; border-radius: 18px; background: var(--a-tile, #f5f5f7); font-size: 15.5px; line-height: 1.45; color: #6e6e73; }
    .hours__list b { color: #1d1d1f; font-weight: 600; }
    .hours__board { padding: 48px 44px; border-radius: 32px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 30px 70px rgba(17,24,39,.1); }
    /* SIZED TO FIT ITS CARD (Victor, 2026-11-09: "shits hanging off": the third line ran past the card at
       2000px). The card is about half the content width; the longest line is about 12em of Gochi Hand, so
       2.15vw keeps it inside with room on the right, and the clamp caps it on very wide screens. */
    .hours .mth { margin: 0; font-size: clamp(22px, 2.15vw, 36px); line-height: 1.34; }
    @media (max-width: 900px) {
      .hours { padding: 72px 0 64px; }
      .hours__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
      .hours h2 { font-size: 36px; }
      .hours__board { padding: 30px 22px; border-radius: 26px; }
      .hours .mth { font-size: clamp(22px, 6.6vw, 34px); }
    }

    /* ================= CREDITS: centered, the same rhythm as Transcripts under it (Victor, 2026-11-09:
       "random..." at a left-set column with the right half of the screen empty), the three facts as tiles */
    .hcred__in { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }
    .hcred__copy { text-align: center; }
    .hcred h2 { max-width: 18ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
    .hcred__lead { margin-left: auto; margin-right: auto; max-width: 58ch; }
    .hcred__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; text-align: left; }
    .hcred__facts > div { padding: 26px 26px 28px; border-radius: 24px; background: var(--a-tile, #f5f5f7); }
    .hcred__facts dd { max-width: none; }
    .hcred__fine { max-width: 60ch; margin-left: auto; margin-right: auto; border-top: 0; padding-top: 0; }
    @media (max-width: 860px) { .hcred__facts { grid-template-columns: minmax(0, 1fr); } }
    .simp { position: relative; display: inline-block; }
    .simp__btn { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: #0071e3; }
    .simp__btn::after { content: " ›"; }
    .simp__btn:hover { text-decoration: underline; }
    .simp__btn:focus-visible { outline: 3px solid rgba(0,113,227,.45); outline-offset: 3px; border-radius: 4px; }
    .simp__card { position: absolute; z-index: 30; left: 50%; top: calc(100% + 10px); width: min(360px, 86vw); padding: 20px 22px 18px; border-radius: 22px;
      background: #1d1d1f; color: #f5f5f7; box-shadow: 0 24px 60px rgba(17,24,39,.3); text-align: left; line-height: 1.4;
      opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s .2s; }
    .simp:hover .simp__card, .simp:focus-within .simp__card { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease-out, transform .2s ease-out; }
    .simp__h { display: block; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #86868b; }
    .simp__l { display: block; margin-top: 8px; font-size: 16px; font-weight: 400; color: #d2d2d7; }
    .simp__l b { color: #fff; }
    .simp a { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: #2997ff; text-decoration: none; }

    /* ================= VIEW TRANSCRIPT (H4): the parent dashboard's document, small, on hover */
    .vt { position: relative; display: inline-block; margin-top: 22px; }
    .vt__btn { padding: 11px 20px; border: 0; border-radius: 999px; cursor: pointer; font: 600 15px var(--sans); color: #fff; background: #1d1d1f; }
    .vt__btn:focus-visible { outline: 3px solid rgba(0,113,227,.45); outline-offset: 3px; }
    .vt__pop { position: absolute; z-index: 30; left: 50%; top: calc(100% + 12px); width: min(620px, 92vw); max-height: 72vh; overflow: auto;
      border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 30px 80px rgba(17,24,39,.32); text-align: left;
      opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
    .vt:hover .vt__pop, .vt:focus-within .vt__pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s, transform .18s; }
    .vt-doc { background: #fff; color: #000; padding: 26px 26px 20px; font: 12px/1.45 "Courier Prime", "Courier New", Courier, monospace; }
    .vt-doc * { color: #000; }
    .vt-doc__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 3px double #000; }
    .vt-doc__head img { filter: grayscale(1) brightness(0); }
    .vt-doc__inst b { display: block; font-size: 18px; letter-spacing: .28em; }
    .vt-doc__inst span { font-size: 10px; letter-spacing: .14em; }
    .vt-doc__badge { border: 2px solid #000; padding: 5px 8px; text-align: center; font-size: 10px; }
    .vt-doc__badge b { display: block; font-size: 11px; letter-spacing: .12em; }
    .vt-doc__title { margin: 10px 0 8px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .26em; }
    .vt-doc__na { margin: 0 0 10px; padding: 6px 8px; border: 2px solid #000; text-align: center; font-size: 10.5px; }
    .vt-doc__na b { display: block; letter-spacing: .22em; font-size: 12px; }
    .vt-doc__id { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
    .vt-doc__id td { border: 1px solid #000; padding: 4px 7px; vertical-align: top; }
    .vt-doc__id small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
    .vt-doc__term { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; }
    .vt-doc__t { width: 100%; border-collapse: collapse; }
    .vt-doc__t th { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; text-align: left; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 4px 5px; }
    .vt-doc__t td { padding: 4px 5px; border-bottom: 1px dotted #000; }
    .vt-doc__t .n { text-align: right; white-space: nowrap; }
    .vt-doc__t .c { white-space: nowrap; }
    .vt-doc__tot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; margin: 6px 0 0; font-size: 10.5px; font-weight: 700; }
    .vt-doc__foot { margin: 12px 0 0; padding-top: 6px; border-top: 1px solid #000; font-size: 9.5px; }
    @media (max-width: 560px) { .vt-doc { padding: 16px 14px 14px; font-size: 11px; } .vt-doc__head { grid-template-columns: auto 1fr; } .vt-doc__badge { grid-column: 1 / -1; } .vt-doc__id td { display: block; } }

    /* ================= PRIVACY (H6): three grey tiles in a row, and the Report card across under them */
    .place--prv .place__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
    .place--prv .place__tile { padding: 36px 32px 38px; min-height: 0; }
    /* the case and its glass tiles, as in Victor's apple.com reference: a colored case (our purple to green, with
       light falling from the top left), and each tile a near-white panel set in a thick frosted rim that catches
       the light along its top edge */
    .prv-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 18px;
      border-radius: 44px;
      background: radial-gradient(120% 160% at 12% 0%, #d9ccf7 0%, #b3a2e8 34%, #9fb7a0 72%, #a3c893 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 30px 60px -30px rgba(80,60,120,.45); }
    .prv-strip .place__tile { border: 9px solid rgba(255,255,255,.42); border-radius: 32px;
      background: rgba(255,255,255,.93) padding-box;
      -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 1px 0 rgba(255,255,255,.8), 0 14px 30px -14px rgba(60,40,90,.4); }
    .place--prv .place__tile--safe { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 30px; align-items: start; }
    .place__tile--safe h3 { color: #c8102e; }
    .place__tile--safe p { max-width: 74ch; }
    /* the button as a signed-in family sees it (.report-fab), drawn, not live: visitors here are signed out */
    .prv-report { grid-row: span 2; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
      background: var(--ink-fill, #1d1d1f); color: #fff; font: 700 14px var(--sans); box-shadow: 0 8px 20px rgba(17,24,39,.18); }
    @media (max-width: 900px) {
      .place--prv .place__grid { grid-template-columns: minmax(0, 1fr); }
      .prv-strip { grid-template-columns: minmax(0, 1fr); border-radius: 34px; padding: 12px; gap: 12px; }
      .place--prv .place__tile--safe { grid-template-columns: minmax(0, 1fr); }
      .prv-report { grid-row: auto; justify-self: start; margin-bottom: 18px; }
    }

    /* THE STORY's frame; the story draws itself (hiw-story.js). Black edge to edge, and the two dashboard
       links under it, still on black. */
    .hst-sec { position: relative; background: #000; color: #f5f5f7; }
    .hst-host { min-height: 100vh; }
    .hst-sec__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; padding: 8px 20px 96px; }
    .hst-sec__links a { font-size: 19px; font-weight: 600; color: #2997ff; text-decoration: none; }
    .hst-sec__links a:hover { text-decoration: underline; }

    /* the transcript reel's frame; the reel draws itself (transcript-reel.js) */
    .reel { padding: 24px 0 96px; }
    .reel__head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
    .reel__eye { margin: 0; font-size: 19px; font-weight: 600; color: #1d1d1f; }
    .reel__head h2 { margin: 8px 0 0; font-family: var(--head); font-weight: 600; font-size: 48px; line-height: 1.06; letter-spacing: -.035em; color: #1d1d1f; text-wrap: balance; }
    .reel__head p:last-child { margin: 14px auto 0; font-size: 19px; line-height: 1.5; color: #6e6e73; max-width: 52ch; }
    /* the reel sits in a black, rounded tile (Victor, 2026-11-09: "put this in a black container rounded corners") */
    .reel__stage { min-height: 500px; padding: 64px 32px; border-radius: 36px; background: #000; display: grid; align-items: center; }
    @media (max-width: 720px) { .reel__head h2 { font-size: 34px; } .reel__head p:last-child { font-size: 17px; } .reel__stage { min-height: 700px; padding: 40px 16px; border-radius: 26px; } }

    /* THE MATH, IN RED MARKER (Gerald, 2026-11-08). Gochi Hand, the hand the home page's notes are in. Every
       piece is uncovered left to right when the card scrolls in, one after another: the year, the division,
       a wrong 11, a pause, the 11 struck out, the 10, then "hours a week" underlined. */
    .mth { margin: 14px 0 10px; font-family: "Gochi Hand", "Bradley Hand", "Marker Felt", cursive; color: #d7261e;
      font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; }
    .mth__l { margin: 0; position: relative; width: max-content; max-width: 100%; white-space: nowrap; }
    .mth__l--in { margin-left: 2.1em; }
    .mth i { font-style: normal; display: inline-block; clip-path: inset(-20% 100% -20% 0); }
    .mth__x { position: relative; display: inline-block; }
    .mth svg { position: absolute; overflow: visible; max-width: none; pointer-events: none; }
    .mth path { fill: none; stroke: #d7261e; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
    .mth__x svg { left: -14%; top: 4%; width: 128%; height: 92%; }
    .mth__u { left: 0; right: 0; bottom: -6px; width: 100%; height: 10px; }
    .mth__u path { stroke-width: 2.2; }
    .mth.is-on .mth__a { animation: mthW .8s steps(12, jump-none) .2s forwards; }
    .mth.is-on .mth__a2 { animation: mthW .7s steps(11, jump-none) 1.05s forwards; }
    .mth.is-on .mth__b { animation: mthW 1s steps(14, jump-none) 1.8s forwards; }
    .mth.is-on .mth__c { animation: mthW .3s steps(3, jump-none) 3s forwards; }
    .mth.is-on .mth__x path { animation: mthD .45s ease-out 4.1s forwards; }
    .mth.is-on .mth__d { animation: mthW .3s steps(3, jump-none) 4.75s forwards; }
    .mth.is-on .mth__e { animation: mthW .8s steps(10, jump-none) 5.2s forwards; }
    .mth.is-on .mth__u path { animation: mthD .5s ease-out 6.1s forwards; }
    @keyframes mthW { to { clip-path: inset(-20% -14% -20% 0); } }
    @keyframes mthD { to { stroke-dashoffset: 0; } }
    @media (prefers-reduced-motion: reduce) { .mth i { clip-path: none; } .mth path { stroke-dashoffset: 0; } .mth.is-on i, .mth.is-on path { animation: none; } }



    /* THE PARENT STORY: eight beats, the words beside a live panel, alternating sides on a wide screen. The
       panels' own look (the frame, the credits trims, the enroll sheet, the pod page) ships with
       js/marketing/parent-story.js; this is only the page's layout around them. */
    .pst { padding: 96px 0 104px; background: #fff; }
    .tst + .pst { padding-top: 24px; }
    .pst__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
    /* #547240, the .hiw-chips green: #5f8149 on white measures 4.45:1, under AA for 13px text (a11y pass, 2026-11-12). */
    .pst__eye { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #547240; }
    .pst__head h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -.025em; color: #1d1d1f; }
    .pst__sub { margin: 14px auto 0; max-width: 560px; font-size: 18px; line-height: 1.5; color: #56606b; }
    .pst-beats { display: grid; gap: 72px; }
    .pst-beat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
    .pst-beat:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .pst-beat:nth-child(even) .pst-beat__copy { order: 2; }
    .pst-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #eef4ea;
      color: #4a6738; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
    /* h2, not h3 (a11y pass, 2026-11-12): on their own pages the beats sit directly under the page's h1, and h3 skipped a
       level for anyone moving by headings. Scoped under .pst so it outranks .hiw-ap main h2 (0,1,2), which would
       otherwise tighten the letter-spacing to -.03em: as h3 these were never matched by it, and they look the same. */
    .pst .pst-beat__copy h2 { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.02em; color: #1d1d1f; }
    .pst-beat__copy p { margin: 0; font-size: 17px; line-height: 1.55; color: #56606b; max-width: 460px; }
    .pst-more { margin: 64px 0 0; text-align: center; font-size: 17px; }
    .pst-more a { color: #0066cc; font-weight: 600; text-decoration: none; }
    @media (max-width: 860px) {
      .pst { padding: 64px 0 72px; }
      .pst-beat { grid-template-columns: minmax(0, 1fr); gap: 22px; }
      .pst-beat:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
      .pst-beat:nth-child(even) .pst-beat__copy { order: 0; }
    }
  

/* ==== THE SPLIT (Victor, 2026-11-12: "split it off from parents and teachers ... Design this how apple would") ==== */

/* THE HUB'S TWO TILES: equal, image over words, the whole tile one link. */
.hub { padding: 8px 0 104px; background: #fff; }
.hub__h { margin: 0 auto 40px; max-width: 18ch; text-align: center; font-family: var(--head); font-weight: 600;
  font-size: clamp(32px, 4vw, 48px); line-height: 1.06; letter-spacing: -.035em; color: #1d1d1f; text-wrap: balance; }
.hub__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hub-tile { display: flex; flex-direction: column; border-radius: 30px; background: #f5f5f7; overflow: hidden;
  text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.hub-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0, 0, 0, .10); }
.hub-tile:focus-visible { outline: 3px solid #0066cc; outline-offset: 4px; }
.hub-tile__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
/* A column that fills the tile, so the pill can sit at its foot: the two blurbs differ by a line, and the pills
   lined up only when they happened to match. */
.hub-tile__copy { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 30px 34px 36px; }
.hub-tile__eye { font-size: 17px; font-weight: 600; }
.hub-tile--p .hub-tile__eye { color: #4e6b3b; }
.hub-tile--t .hub-tile__eye { color: #6a54b5; }
.hub-tile__t { font-family: var(--head); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1;
  letter-spacing: -.025em; color: #1d1d1f; text-wrap: balance; }
.hub-tile__d { margin-bottom: 8px; font-size: 17px; line-height: 1.5; color: #6e6e73; }
/* A FILLED BLUE PILL, as apple.com's tiles have (Victor, 2026-11-12: "we need blue apple buttons (that says something
   like learn more) because it's kind of a dead zone if people dont know to click the cards"). It replaces the
   "How it works for parents ›" text line rather than sitting beside it, which is how Apple does it. It is a span, not
   a link: the whole tile is already the link, and a link inside a link is invalid HTML that some browsers split in
   two. #0066cc in both themes, because the page is light-only and white text on #2997ff would be 2.9:1. */
.hub-tile__btn { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: auto;
  padding: 0 22px; border-radius: 980px; background: #0066cc; color: #fff; font-size: 17px; font-weight: 400;
  letter-spacing: -.01em; transition: background-color .2s ease; }
.hub-tile:hover .hub-tile__btn { background: #0077ed; }
@media (max-width: 760px) {
  .hub { padding-bottom: 72px; }
  .hub__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hub-tile { border-radius: 24px; }
  .hub-tile__copy { padding: 24px 24px 28px; }
}
@media (prefers-reduced-motion: reduce) { .hub-tile { transition: none; } .hub-tile:hover { transform: none; } }

/* THE LOCAL NAV: where you are, this page's parts, the one next step. Translucent, under the site header. */
.lnav { position: sticky; top: var(--hiw-hdr, 49px); z-index: 50; background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(0, 0, 0, .08); }
.lnav__in { display: flex; align-items: center; gap: 24px; min-height: 56px; }
.lnav__title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 600;
  letter-spacing: -.01em; color: #1d1d1f; white-space: nowrap; }
.lnav__title a { display: inline-flex; align-items: center; min-height: 44px; color: #6e6e73; font-weight: 400; text-decoration: none; }
.lnav__title a:hover { color: #1d1d1f; }
.lnav__title span { color: #86868b; font-weight: 400; }
.lnav__links { display: flex; gap: 24px; margin-left: auto; }
.lnav__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #1d1d1f;
  opacity: .82; text-decoration: none; }
.lnav__links a:hover { opacity: 1; }
.lnav__cta { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px;
  border-radius: 980px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; }
.lnav__cta:hover { color: #fff; filter: brightness(1.08); }
/* White on --green-fill (#5f8149) is 4.45:1, just under AA for this 14-15px label; #547240 is the .hiw-chips green
   (the same hue at 0.88) and gives 5.44:1. Purple already passes. (a11y pass, 2026-11-12) */
.lnav__cta--p { background: #547240; }
.lnav__cta--t { background: var(--purple-fill, #6a54b5); }
@media (max-width: 760px) {
  .lnav__links { display: none; }
  .lnav__in { gap: 12px; }
  .lnav__title { font-size: 17px; min-width: 0; }
  /* No room for the crumb beside the button on a phone; the site menu's How It Works is the way back. */
  .lnav__title a, .lnav__title span { display: none; }
  .lnav__cta { margin-left: auto; min-height: 44px; }
}
/* An anchor in the local nav lands below both bars, not under them. */
#story, #schedule, #transcripts, #verify, #build, #paid { scroll-margin-top: calc(var(--hiw-hdr, 49px) + 72px); }

/* THE AUDIENCE PAGES OPEN ON THEIR STORY, whose heading is now the page's h1. */
.pst.hiw-first { padding-top: 72px; }
.pst__head h1 { margin: 0; font-size: clamp(36px, 5vw, 56px); line-height: 1.06; letter-spacing: -.03em; color: #1d1d1f; text-wrap: balance; }
@media (max-width: 860px) { .pst.hiw-first { padding-top: 48px; } }

/* ONE NEXT STEP, and a quiet way across. */
.hiw-end { padding: 96px 0 120px; background: #f5f5f7; text-align: center; }
.hiw-end h2 { margin: 0 auto; max-width: 18ch; font-family: var(--head); font-weight: 600; font-size: clamp(32px, 4vw, 48px);
  line-height: 1.06; letter-spacing: -.035em; color: #1d1d1f; text-wrap: balance; }
.hiw-end p { margin: 14px auto 0; max-width: 46ch; font-size: 19px; line-height: 1.5; color: #6e6e73; }
.hiw-end__btn { margin-top: 30px; min-height: 48px; padding: 0 28px; color: #fff; font-size: 17px; }
.hiw-end__btn:hover { color: #fff; filter: brightness(1.08); }
.hiw-end--p .hiw-end__btn { background: #547240; }   /* see .lnav__cta--p */
.hiw-end--t .hiw-end__btn { background: var(--purple-fill, #6a54b5); }
.hiw-end p.hiw-end__across { margin-top: 26px; font-size: 17px; }
.hiw-end__across a { display: inline-flex; align-items: center; min-height: 44px; color: #0066cc; font-weight: 600; text-decoration: none; }
.hiw-end__across a:hover { text-decoration: underline; }
@media (max-width: 760px) { .hiw-end { padding: 72px 0 88px; } }

/* PAY BY THE CREDIT, THE FOUR LENGTHS IN ONE ROW (Gerald, 2026-11-12, row 365: "the four credit cards might look
   better in a horizontal row"). Only in this story's panel and only where four fit; the real Payments screen and a
   phone keep the 2x2. Tightened so "Add to cart" stays one line at about 123px a card. Measured at 1440: the panel
   goes from 933px to 703px tall and nothing overflows. */
@media (min-width: 900px) {
  .pst [data-pst="credits"] .ppd__lens { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .pst [data-pst="credits"] .ppd__len { padding: 16px 12px 14px; }
  .pst [data-pst="credits"] .ppd__cr { font-size: 28px; }
  .pst [data-pst="credits"] .ppd__lh { font-size: 13.5px; }
  .pst [data-pst="credits"] .ppd__price b { font-size: 18px; }
  .pst [data-pst="credits"] .ppd__add { padding: 9px 8px; font-size: 13px; white-space: nowrap; }
}

/* RESERVE EACH STORY FRAME'S HEIGHT UNTIL ITS PANEL ARRIVES (PC-f's performance pass, 2026-11-12). The frames are
   empty divs that the story module fills once its CSS and code have loaded. The story sits near the top of both
   pages, so on a throttled phone the first beats were on screen at 0px tall and then pushed everything below them
   down: one shift at ~4.3s, CLS 0.099 against Google's 0.1 "good" line. While a frame is :empty it now holds the
   height its panel will have, so the panel lands in place. The reservation stops applying the moment the panel
   mounts, whatever its real height.
   The numbers were measured from the mounted panels, per layout: phone (<=560, the midpoint of 375 and 430),
   single column (561-860, of 600 and 768; teachers' found splits at 700), the narrow two-up (861-1099, of 900 and 1024) and the wide two-up
   (1100 and up, where 1180 and 1440 agree). Re-measure them if a panel's content changes. */
[data-pst]:empty, [data-tst]:empty { min-height: var(--rsv, 0px); }
[data-pst="vet"] { --rsv: 381px; } [data-pst="credits"] { --rsv: 889px; } [data-pst="enroll"] { --rsv: 389px; }
[data-pst="pod"] { --rsv: 390px; } [data-pst="homework"] { --rsv: 315px; } [data-pst="messages"] { --rsv: 315px; }
[data-pst="files"] { --rsv: 294px; } [data-pst="transcript"] { --rsv: 497px; }
[data-tst="verify"] { --rsv: 854px; } [data-tst="build"] { --rsv: 394px; } [data-tst="builder"] { --rsv: 560px; }
[data-tst="found"] { --rsv: 701px; } [data-tst="teach"] { --rsv: 560px; } [data-tst="paid"] { --rsv: 471px; }
[data-tst="files"] { --rsv: 560px; }
@media (max-width: 1099px) {
  [data-pst="vet"] { --rsv: 430px; } [data-pst="pod"] { --rsv: 403px; } [data-pst="messages"] { --rsv: 357px; }
  [data-pst="files"] { --rsv: 384px; }
}
@media (max-width: 860px) {
  [data-pst="vet"] { --rsv: 440px; } [data-pst="credits"] { --rsv: 887px; } [data-pst="enroll"] { --rsv: 373px; }
  [data-pst="pod"] { --rsv: 374px; } [data-pst="homework"] { --rsv: 299px; } [data-pst="messages"] { --rsv: 289px; }
  [data-pst="files"] { --rsv: 289px; } [data-pst="transcript"] { --rsv: 481px; }
  [data-tst="verify"] { --rsv: 821px; } [data-tst="build"] { --rsv: 378px; } [data-tst="found"] { --rsv: 445px; }
  [data-tst="paid"] { --rsv: 431px; }
}
/* Find a teacher's matchmaking list changes layout at ~700px: 699 and 673 tall below it, 457 and 433 above. */
@media (max-width: 700px) { [data-tst="found"] { --rsv: 686px; } }
@media (max-width: 560px) {
  [data-pst="vet"] { --rsv: 561px; } [data-pst="credits"] { --rsv: 966px; } [data-pst="enroll"] { --rsv: 405px; }
  [data-pst="pod"] { --rsv: 399px; } [data-pst="homework"] { --rsv: 305px; } [data-pst="messages"] { --rsv: 403px; }
  [data-pst="files"] { --rsv: 329px; } [data-pst="transcript"] { --rsv: 537px; }
  [data-tst="verify"] { --rsv: 952px; } [data-tst="build"] { --rsv: 646px; } [data-tst="builder"] { --rsv: 480px; }
  [data-tst="found"] { --rsv: 463px; } [data-tst="teach"] { --rsv: 461px; } [data-tst="paid"] { --rsv: 525px; }
  [data-tst="files"] { --rsv: 480px; }
}