/*
 * Sikai — the signed-out front door.
 *
 * Every rule is nested under .sikai-public, for the same reason student.css
 * nests under .sikai-student: stylesheet_link_tag :app serves every file in
 * this directory on every page.
 *
 * Colour and type values that also live in tokens.css (2026-08-18) point at
 * var(--sk-*) instead of repeating the hex, so there is one source of truth
 * for those. The type scale, the radii, the section gaps, the two ink/mute
 * shades and the paper have no --sk-* equivalent and stay local, restated
 * rather than shared the same way student.css's own copies are. No global
 * custom-property layer is declared in this file -- tokens.css is the one
 * file allowed that, because a global block here would leak into the admin
 * surface (see spec/assets/stylesheet_isolation_spec.rb).
 *
 * ONE SURFACE, TWO KINDS OF RULE, and telling them apart is the thing to
 * hold on to when editing:
 *
 *   Page rules -- the hero, the sections, the buttons, the footer. These
 *   answer to the token block below: the six-step type scale, three radii,
 *   three section gaps, two accents.
 *
 *   Mockup rules -- .p-device*, .p-preview*, .p-kid*, .p-week*, .p-wallet*,
 *   .p-feed*, .p-tile*, .p-pill*, .p-standing, .p-chrome. These are drawings
 *   of OTHER surfaces (the child's lesson screen, the teacher's class list,
 *   /parents) and they answer to those screens instead -- see the long note
 *   above .p-kids about the time they drifted and a parent was shown a page
 *   that does not exist. They are deliberately exempt from the page scale.
 *   Do not "tidy" their sizes onto it; that is not tidying, it is making the
 *   drawing stop matching the thing it draws.
 */

.sikai-public {
  /* ---- Colour ----------------------------------------------------------
     Two accents, and each one means a thing. Blue is the INSTITUTION --
     the school route, navigation, anything a teacher or an administrator
     owns. Gold is what a child EARNED -- points, streaks, badges, the
     progress bar with a number under it. Green stays what it is everywhere
     else in the product: an answer that was right.

     This is not decoration policy, it is the argument the page makes. The
     whole of / is "here are two ways in (blue), and here is what the child
     gets out (gold)". Before this split one hue painted the logo, every
     button, every step number, every list bullet, every glyph, the progress
     bars, the reward chip and the highlighted price -- which is to say it
     distinguished nothing, and a reader had no way to tell a navigational
     blue from a meaningful one. Adding a colour was cheaper than adding a
     word.

     Rule for anything new: if it is neither institutional nor earned, it is
     ink or chalk. Reach for a third hue and you are back where this
     started. */

  --p-blue:        var(--sk-accent);
  --p-blue-deep:   var(--sk-accent-hover);
  --p-blue-tint:   var(--sk-accent-subtle);

  --p-gold:        var(--sk-gold);
  --p-gold-deep:   var(--sk-warning);
  --p-gold-tint:   var(--sk-warning-tint);

  --p-green:       var(--sk-success);
  --p-green-tint:  var(--sk-success-tint);

  --p-ink:         var(--sk-ink);
  --p-ink-2:       var(--sk-text-2);
  --p-ink-3:       #4E525A;
  --p-mute:        #63666E;

  /* --sk-text-muted is #9A9EA6, which is 2.7:1 on white -- fine as the
     screenshot-grey inside an aria-hidden mockup, a WCAG AA failure on any
     line a person is meant to read. It painted the stat strip's labels,
     which are neither hidden nor decorative. Two names now, so the next
     person reaching for "the quiet grey" has to say which kind they mean. */
  --p-mock-mute:   var(--sk-text-muted);

  /* Warmer than --sk-fill-1 (#F7F6F4), and deliberately the one value on
     this surface that does NOT come from tokens.css. Everything Sikai
     teaches is generated from the printed government textbooks, which are
     run on cheap cream stock; a page that argues for those books ought not
     to sit on the same cool near-white as every SaaS landing page shipped
     since 2021. Landing-only: --sk-page is untouched, so the app screens
     drawn in the mockups below still match the app. */
  --p-paper:       #F4F1E9;
  --p-canvas:      var(--sk-page);
  --p-surface:     var(--sk-surface);
  --p-chalk:       #EFEDE6;

  --p-line:        rgba(23, 24, 26, .08);
  --p-line-strong: rgba(23, 24, 26, .12);

  /* ---- Type ------------------------------------------------------------
     ONE TYPEFACE. Baloo 2 sets every word on both public pages -- the
     headlines, the body, the buttons, the labels, the numbers. There is no
     second family here and there should not be one.

     Why this face and not the Manrope the rest of the product uses: Baloo 2
     is already in this repo, carrying Devanagari (fonts.css). Setting the
     public pages in it means that the day / and /for-parents are
     translated, the Nepali is the SAME typeface as the English rather than
     whatever the device falls back to -- which is not something a second
     Latin face, however handsome, could ever give us. It was drawn by Ek
     Type for Indic scripts and reads warm and school-ish rather than
     start-up-ish, which is what this page is.

     Why one and not the three this had (Baloo display + Manrope body + IBM
     Plex Mono for data): three families on a page this size is three
     accents in a room, and the mono in particular was doing a job that case
     and tracking do perfectly well on their own. It is also the cheaper
     page -- one 32 KB file instead of Manrope's 24 KB plus two Plex Mono
     weights at 20 KB, on a surface whose own stat strip promises under
     200 KB a screen.

     With one family, the differentiation that mono and a display face used
     to supply has to come from WEIGHT, SIZE, CASE and TRACKING instead:

       400  running body copy
       600  micro-labels (uppercase, tracked) and figures
       700  headlines, card titles, buttons, emphasis

     Anything that used to be mono because it was "data" is now 600 plus
     tabular figures -- see the font-variant-numeric rule below the resets,
     which is what keeps the aligned columns aligned now that the numerals
     are proportional by default.

     Six sizes, whole pixels, and that is the whole scale. It replaced
     eighteen ad-hoc values (7, 7.5, 8.5, 9.5, 10.5, 11, 11.5, 12, 12.5, 13,
     13.5, 14, 14.5, 15, 15.5, 16, 16.5, 17, 19, 20), which is what
     per-component nudging looks like after a year. The display clamps sit
     on .p-hero__title/.p-h2/.p-pricing__title rather than here: they are
     three values, each tuned to its own measure.

     The device mockups are the one exemption -- see the note at the top of
     this file. */
  --p-t-xs:        11px;
  --p-t-sm:        13px;
  --p-t-md:        15px;
  --p-t-lg:        17px;
  --p-t-xl:        21px;
  --p-t-2xl:       27px;

  --p-w-body:      400;
  --p-w-label:     600;
  --p-w-strong:    700;

  /* "Baloo 2 Latin" first and "Baloo 2" behind it, which look like one name
     split in two and are two deliberately separate @font-face families --
     read the note above the Latin one in fonts.css before merging them. The
     short version: sharing a family name with the Devanagari face put this
     file in every CHILD's font stack too, and cost them a 32 KB download for
     an arrow glyph none of these files contain.

     Both are named here so this surface still gets Devanagari from the same
     typeface the day it is translated -- Latin resolves to the first, Nepali
     to the second.

     ui-rounded behind them: if neither loads, the nearest thing on the device
     should be the rounded one, not whatever grotesque the platform defaults
     to. */
  --p-font: "Baloo 2 Latin", "Baloo 2", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Shape and rhythm ------------------------------------------------
     Three radii. There were ten (5, 6, 9, 11, 14, 18, 20, 22, 26, 28), four
     of them declared as tokens and then bypassed by hardcoded values in the
     components -- a design system that exists on paper and is ignored in
     practice. Chip is anything you press or read a word off; card is a card;
     panel is the two full-bleed surfaces (the hero's device frame and the
     pricing block). The sub-16px shapes inside .p-mechanic__glyph are icon
     geometry, not containers, and keep their own.

     Three section gaps for the same reason there are three radii. Every
     section used to be padded 80px top and bottom, so all seven sat at
     identical distance and nothing on the page grouped with anything else.
     Lead tightens a section up under the one it continues; wide opens the
     run-up to the pricing block, which is the end of the argument. */
  --p-r-chip:      10px;
  --p-r-card:      18px;
  --p-r-panel:     28px;
  --p-pill:        999px;

  --p-gap-lead:    56px;
  --p-gap:         84px;
  --p-gap-wide:    116px;

  --p-shell: 1160px;

  margin: 0;
  font-family: var(--p-font);
  font-size: var(--p-t-md);
  font-weight: var(--p-w-body);
  line-height: 1.6;
  color: var(--p-ink);
  background: var(--p-paper);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

.sikai-public * {
  box-sizing: border-box;
}

/* Any class rule that sets `display` defeats the browser's own
   `[hidden] { display: none }`, which is a bare attribute selector. Asserted
   once here rather than per component -- see the same guard in student.css,
   where getting it wrong showed a child the answer. */
.sikai-public [hidden] {
  display: none !important;
}

/* application.css styles bare `h1..h6` and `a` with no scope at all, and
   :app serves every stylesheet in this directory on every page. A directly
   applied rule beats an inherited value however specific the inheriting
   selector is, so its `h1..h6 { color: var(--color-text-primary) }` painted
   the pricing panel's headline slate-900 on a near-black card -- invisible.
   `inherit` puts headings back on the colour of the surface they sit on,
   which is what lets one rule on .p-pricing turn its whole contents white. */
.sikai-public h1,
.sikai-public h2,
.sikai-public h3,
.sikai-public h4,
.sikai-public h5,
.sikai-public h6 {
  color: inherit;
}

/* What the mono used to do for free.
 *
 * IBM Plex Mono held every figure on this page in a column, because that is
 * what a monospace does. Baloo 2's numerals are proportional, so a 1 is
 * narrower than a 9 and any right-aligned stack of them (92% / 74% / 31% /
 * 68%, 1,240 / 82% / 6, the four stats under the hero) goes ragged on the
 * decimal.
 *
 * Baloo 2 ships `tnum`, so asking for it costs nothing and fixes all of
 * them. Listed explicitly rather than set once on .sikai-public: tabular
 * figures are right for a column of numbers and wrong in running prose,
 * where they leave a gap around every "1 to 10" and "grade 3". */
.sikai-public .p-stat b,
.sikai-public .p-plan__price,
.sikai-public .p-preview__pct,
.sikai-public .p-kidcard__row b,
.sikai-public .p-tile__n,
.sikai-public .p-wallet__n,
.sikai-public .p-device__xp,
.sikai-public .p-device__tile b,
.sikai-public .p-step__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sikai-public a {
  color: var(--p-blue);
  text-decoration: none;
}

/* text-decoration is reset here too: application.css underlines every link on
   hover, which on this page means every button. */
.sikai-public a:hover {
  color: var(--p-blue-deep);
  text-decoration: none;
}

.sikai-public .p-prose-link:hover {
  text-decoration: underline;
}

.sikai-public a:focus-visible,
.sikai-public button:focus-visible {
  outline: 2px solid var(--p-blue);
  outline-offset: 3px;
  border-radius: var(--p-r-chip);
}

.sikai-public h1,
.sikai-public h2,
.sikai-public h3,
.sikai-public p,
.sikai-public ul,
.sikai-public ol,
.sikai-public figure {
  margin: 0;
}

.sikai-public ul,
.sikai-public ol {
  padding: 0;
  list-style: none;
}

/* ---- Shared bits ------------------------------------------------------- */

.sikai-public .p-shell {
  width: 100%;
  max-width: var(--p-shell);
  margin: 0 auto;
  padding: 0 24px;
}

/* The mono eyebrow. Uppercase, widely tracked, small -- it labels the block
   below without competing with its heading.

   It now labels SECTIONS and nothing else. It used to do two unrelated jobs:
   this one, and standing in for the little grey chrome labels inside the
   screen mockups ("This week", "Grade 3"). Those are .p-chrome now. A device
   that appears above every heading AND inside every drawing has stopped
   labelling anything and started decorating, and the fastest way to make a
   page look automatically generated is to repeat one ornament until it
   carries no information. */
.sikai-public .p-eyebrow {
  font-size: var(--p-t-xs);
  font-weight: var(--p-w-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-mute);
}

/* Chrome inside a mockup: the label a real screen prints above a list. Same
   size and weight as the eyebrow and deliberately NOT the same class -- see
   the eyebrow's note. Lighter, because it is part of a drawing of another
   surface rather than a line addressed to the reader. */
.sikai-public .p-chrome {
  font-size: 9.5px;
  font-weight: var(--p-w-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--p-mock-mute);
}

/* Never 800 -- see the type note above. Tracking is barely negative
   where Manrope wanted -.03em: Baloo is already tightly fitted, and pulling
   it in further closes the counters at display sizes. */
.sikai-public .p-h2 {
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: var(--p-w-strong);
  line-height: 1.15;
  letter-spacing: -.005em;
}

/* A section's lede outranks the body copy underneath it, which it did not:
   at 14px it was smaller than the base size, smaller than .p-point, and
   3px under .p-hero__sub -- the subheading was the smallest prose on the
   page. Ink rather than mute for the same reason. */
.sikai-public .p-lede {
  font-size: var(--p-t-lg);
  line-height: 1.55;
  color: var(--p-ink-3);
}

/* The one lede that is a genuine continuation of its heading rather than a
   summary of the section -- see the "Progress, never surveillance" block.
   Was three inline styles on the element. */
.sikai-public .p-lede--narrow {
  max-width: 44ch;
}

.sikai-public .p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--p-r-chip);
  background: var(--p-blue);
  color: #fff;
  font-size: var(--p-t-md);
  font-weight: var(--p-w-strong);
  line-height: 1;
  text-align: center;
  transition: background-color .15s ease, transform .15s ease;
}

.sikai-public .p-btn:hover {
  background: var(--p-blue-deep);
  color: #fff;
}

.sikai-public .p-btn:active {
  transform: translateY(1px);
}

.sikai-public .p-btn--quiet {
  background: var(--p-surface);
  border: 1px solid var(--p-line-strong);
  color: var(--p-ink);
}

.sikai-public .p-btn--quiet:hover {
  background: var(--p-chalk);
  color: var(--p-ink);
}

.sikai-public .p-btn--ink {
  background: var(--p-ink);
}

.sikai-public .p-btn--ink:hover {
  background: #000;
}

.sikai-public .p-btn--onink {
  background: rgba(255, 255, 255, .12);
}

.sikai-public .p-btn--onink:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* ---- Header ------------------------------------------------------------ */

.sikai-public .p-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 246, 244, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(23, 24, 26, .07);
}

.sikai-public .p-head__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* The header and footer lockup: the mark, then the drawn wordmark. No type
   properties left on it -- there is no text inside it to set. */
.sikai-public .p-mark {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* 19px, not the 21px the word used to be set at. The asset is trimmed to its
   own ink, so its height is the ascender ("k" and the two dots) down to the
   baseline -- where 21px of type was an em box whose letters only ever filled
   about three quarters of it. Matched by eye against the nav links beside it
   rather than by carrying the old number across. */
.sikai-public .p-mark__word {
  height: 19px;
  width: auto;
  display: block;
}

.sikai-public .p-mark__tile {
  /* 35x28.
     Sized 119:96, the mark's own proportions -- it is wider than it is
     tall. In a square box `contain` letterboxed it, so it rendered a fifth
     shorter than the box and read weak beside the wordmark next to it. */
  width: 35px;
  height: 28px;
  flex: none;
  /* The mark itself, not a coloured square standing in for it. The square
     was a placeholder from the imported design file; this is
     app/assets/images/sikai-mark.png, the seedling in the open book,
     cropped tight out of the 512 icon and quantized to 2 KB. Kept as a
     background rather than an <img> so the element, its size and its
     aria-hidden all stay exactly as they were. */
  background: url("/assets/sikai-mark-64ad84a4.png") center / contain no-repeat;
}

.sikai-public .p-head__nav {
  display: flex;
  gap: 24px;
}

.sikai-public .p-head__nav a {
  font-size: var(--p-t-sm);
  font-weight: var(--p-w-label);
  color: var(--p-ink-3);
}

.sikai-public .p-head__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.sikai-public .p-head__actions .p-btn {
  min-height: 42px;
  padding: 12px 18px;
  font-size: var(--p-t-sm);
}

.sikai-public .p-signin {
  font-size: var(--p-t-sm);
  font-weight: var(--p-w-strong);
  color: var(--p-ink);
}

/* ---- Hero -------------------------------------------------------------- */

.sikai-public .p-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 64px;
}

.sikai-public .p-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  animation: p-rise .5s ease both;
}

/* Baloo 2 sets visually larger than Manrope at the same value -- taller
   x-height, wider fitting -- so the ceiling comes down from 58px rather
   than staying put and shouting. 700 not 800, and letter-spacing near zero:
   the previous -.035em was compensating for Manrope's loose display
   fitting, and applying it here would jam the round forms into each other. */
.sikai-public .p-hero__title {
  font-size: clamp(34px, 4.6vw, 50px);
  font-weight: var(--p-w-strong);
  line-height: 1.08;
  letter-spacing: -.01em;
  max-width: 16ch;
}

.sikai-public .p-hero__sub {
  font-size: var(--p-t-lg);
  line-height: 1.6;
  color: var(--p-ink-3);
  max-width: 46ch;
}

.sikai-public .p-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* A call to action that wraps mid-phrase stops reading as one thing to press.
   Wrapping the row is fine; wrapping the label is not. */
.sikai-public .p-hero__ctas .p-btn {
  white-space: nowrap;
}

/* Block with an absolutely positioned dot, NOT a flex row.
 *
 * As a flex container this made a flex item of every child, and /for-parents
 * opens its note with `<strong>No account yet?</strong>`: the strong became
 * one item and the sentence after it became another, so the two laid out as
 * columns and the page shipped a three-word ragged stack beside a paragraph
 * (visible in design02-forparents-1280.png). The dot is decoration and the
 * text is a sentence -- the sentence has to stay one flow no matter what
 * markup it contains. */
.sikai-public .p-hero__note {
  position: relative;
  padding-left: 17px;
  font-size: var(--p-t-sm);
  line-height: 1.55;
  color: var(--p-mute);
  max-width: 46ch;
}

.sikai-public .p-hero__note::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: var(--p-pill);
  background: var(--p-green);
}

/* ---- Hero device pair -------------------------------------------------
   The signature. The design's own mockups were hatched placeholder blocks
   captioned "app screen — lesson + quiz"; these are the screens, drawn in
   the same CSS shapes the product uses to teach with. It is the one claim
   the page makes that it also demonstrates: this really is what a lesson
   weighs, because you just downloaded one. */

.sikai-public .p-devices {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 22px;
  border-radius: var(--p-r-panel);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  animation: p-rise .6s .1s ease both;
}

.sikai-public .p-device {
  width: 212px;
  flex: none;
  padding: 16px 14px;
  border-radius: var(--p-r-card);
  border: 1px solid var(--p-line-strong);
  background: var(--p-canvas);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sikai-public .p-device--dark {
  background: var(--p-ink);
  border-color: transparent;
}

.sikai-public .p-device__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: var(--p-w-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-mock-mute);
}

.sikai-public .p-device--dark .p-device__bar {
  color: rgba(255, 255, 255, .45);
}

.sikai-public .p-device__q {
  font-size: 14px;
  font-weight: var(--p-w-strong);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--p-ink);
}

.sikai-public .p-device__choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sikai-public .p-device__choice {
  padding: 10px 12px;
  border-radius: var(--p-r-chip);
  background: var(--p-surface);
  border: 1px solid var(--p-line-strong);
  font-size: 12px;
  font-weight: var(--p-w-body);
  color: var(--p-ink-2);
}

.sikai-public .p-device__choice--right {
  background: var(--p-green-tint);
  border-color: var(--p-green);
  color: var(--p-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sikai-public .p-device__hint {
  padding: 9px 11px;
  border-radius: var(--p-r-chip);
  background: var(--p-green-tint);
  font-size: 11.5px;
  font-weight: var(--p-w-label);
  color: var(--p-green);
}

.sikai-public .p-device__reward {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sikai-public .p-device__xp {
  font-size: 40px;
  font-weight: var(--p-w-label);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--p-gold);
}

.sikai-public .p-device__xp-label {
  font-size: 8.5px;
  font-weight: var(--p-w-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.sikai-public .p-device__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.sikai-public .p-device__tile {
  padding: 10px;
  border-radius: var(--p-r-chip);
  background: rgba(255, 255, 255, .08);
}

.sikai-public .p-device__tile b {
  display: block;
  font-size: 16px;
  font-weight: var(--p-w-label);
  color: #fff;
}

.sikai-public .p-device__tile span {
  font-size: 7.5px;
  font-weight: var(--p-w-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.sikai-public .p-device__badge {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-radius: var(--p-r-chip);
  background: rgba(201, 162, 39, .26);
  font-size: 11px;
  font-weight: var(--p-w-strong);
  color: #fff;
}

.sikai-public .p-device__badge span {
  font-size: 15px;
}

/* ---- Stat strip -------------------------------------------------------- */

.sikai-public .p-stats {
  background: var(--p-surface);
  border-top: 1px solid rgba(23, 24, 26, .07);
  border-bottom: 1px solid rgba(23, 24, 26, .07);
}

.sikai-public .p-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.sikai-public .p-stat b {
  display: block;
  font-size: var(--p-t-2xl);
  font-weight: var(--p-w-label);
  line-height: 1;
  letter-spacing: -.02em;
}

.sikai-public .p-stat span {
  display: block;
  margin-top: 8px;
  font-size: var(--p-t-xs);
  font-weight: var(--p-w-strong);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--p-mute);
}

/* ---- Sections ---------------------------------------------------------- */

.sikai-public .p-section {
  padding-top: var(--p-gap);
  padding-bottom: var(--p-gap);
}

/* A section that continues the one above it rather than opening a new
   argument, pulled up close enough to read as a continuation. */
.sikai-public .p-section--lead {
  padding-top: var(--p-gap-lead);
}

/* The end of the argument. Everything above it builds to the price, so it
   gets the one long pause on the page. */
.sikai-public .p-section--wide {
  padding-top: var(--p-gap-wide);
}

.sikai-public .p-section--tinted {
  background: var(--p-surface);
  border-top: 1px solid rgba(23, 24, 26, .07);
  border-bottom: 1px solid rgba(23, 24, 26, .07);
}

.sikai-public .p-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.sikai-public .p-section__head .p-h2 {
  max-width: 24ch;
}

.sikai-public .p-section__head .p-lede {
  max-width: 36ch;
}

/* An eyebrow labels the thing directly under it, so the gap belongs to the
   pair rather than to whichever element happened to be written second.
   Both of these were `style="margin-top: 18px"` typed onto the element in
   the view -- three times across the two pages, twice with a max-width
   smuggled in beside them, which is how a scale gets eighteen sizes. */
.sikai-public .p-eyebrow + .p-section__head,
.sikai-public .p-eyebrow + .p-h2 {
  margin-top: 18px;
}

.sikai-public .p-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ---- Steps ------------------------------------------------------------- */

.sikai-public .p-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.sikai-public .p-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: var(--p-r-card);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
}

/* The one dark card, and the last one: the payoff is the only step that gets
   to look different, which is also the argument the section is making. */
.sikai-public .p-step--payoff {
  background: var(--p-ink);
  border-color: transparent;
  color: #fff;
}

/* Bigger than it was, and neutral. These three really are a sequence -- the
   order is the product -- so the number is doing structural work and is
   sized to be read as structure. It is not doing ACCENT work, which is what
   painting it blue said: blue is the school route on this page, and a step
   number belongs to neither route. */
.sikai-public .p-step__num {
  font-size: var(--p-t-lg);
  font-weight: var(--p-w-label);
  line-height: 1;
  color: var(--p-mute);
}

/* Except this one. Step three IS the reward, which is the whole claim of the
   section, so it is the one number that gets the earned colour. */
.sikai-public .p-step--payoff .p-step__num {
  color: var(--p-gold);
}

.sikai-public .p-step__title {
  font-size: var(--p-t-xl);
  font-weight: var(--p-w-strong);
  line-height: 1.2;
  letter-spacing: -.005em;
}

.sikai-public .p-step__body {
  font-size: var(--p-t-md);
  line-height: 1.6;
  color: var(--p-ink-3);
}

.sikai-public .p-step--payoff .p-step__body {
  color: rgba(255, 255, 255, .66);
}

/* ---- Route cards ------------------------------------------------------- */

.sikai-public .p-routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

.sikai-public .p-route {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
  border-radius: var(--p-r-card);
  background: var(--p-surface);
  border: 1.5px solid var(--p-line-strong);
}

.sikai-public .p-route--school {
  background: #F7FAFC;
  border-color: rgba(24, 88, 136, .3);
}

.sikai-public .p-route__title {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: var(--p-t-xl);
  font-weight: var(--p-w-strong);
  letter-spacing: -.005em;
}

.sikai-public .p-route__glyph {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--p-r-chip);
  background: var(--p-chalk);
}

.sikai-public .p-route--school .p-route__glyph {
  background: var(--p-blue-tint);
}

.sikai-public .p-route__glyph i {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--p-ink);
}

.sikai-public .p-route--school .p-route__glyph i {
  background: var(--p-blue);
}

/* The chain is content, not decoration: it names who has to act, in order,
   before a child can open a lesson. That is the single biggest difference
   between the two routes, so it gets its own line. */
.sikai-public .p-route__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: var(--p-t-xs);
  font-weight: var(--p-w-label);
  color: var(--p-ink);
}

.sikai-public .p-route--school .p-route__chain {
  color: var(--p-blue);
}

.sikai-public .p-route__chain i {
  font-style: normal;
  color: var(--p-mute);
}

/* The link in the chain that is NOT a person -- "no school needed". Quieter
   than the names either side of it because it is the absence of a step, not
   a step. Was an inline `style="color:#9A9EA6"` in the view, which is both
   off-palette and the failing contrast value. */
.sikai-public .p-route__chain .p-chain-none {
  color: var(--p-mute);
  font-weight: var(--p-w-body);
}

.sikai-public .p-route__steps {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.sikai-public .p-route__step {
  display: flex;
  gap: 12px;
  font-size: var(--p-t-md);
  line-height: 1.55;
  color: var(--p-ink-2);
}

/* Centred by flex, not by `line-height: 19px; text-align: center`.
 *
 * That pair centres a digit only when the face's ascent and descent are
 * balanced around it, which was true of IBM Plex Mono and is not true of
 * Baloo 2 -- it has the deep descenders an Indic-first face needs, so the
 * same declarations parked every numeral visibly above the middle of its
 * chip. Flex centres the box, whatever the metrics inside it. */
.sikai-public .p-route__step b {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border-radius: 6px;
  background: var(--p-chalk);
  font-size: var(--p-t-xs);
  font-weight: var(--p-w-label);
  line-height: 1;
  color: var(--p-ink);
}

.sikai-public .p-route--school .p-route__step b {
  background: var(--p-blue-tint);
  color: var(--p-blue);
}

.sikai-public .p-route__rule {
  height: 1px;
  background: var(--p-line);
}

.sikai-public .p-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sikai-public .p-tag {
  padding: 6px 10px;
  border-radius: var(--p-pill);
  background: var(--p-chalk);
  font-size: var(--p-t-xs);
  font-weight: var(--p-w-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p-mute);
}

.sikai-public .p-route--school .p-tag {
  background: var(--p-surface);
  border: 1px solid rgba(24, 88, 136, .22);
  color: var(--p-blue);
}

.sikai-public .p-route .p-btn {
  margin-top: auto;
}

.sikai-public .p-aside {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--p-r-card);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
}

.sikai-public .p-aside p {
  font-size: var(--p-t-sm);
  line-height: 1.6;
  color: var(--p-ink-3);
}

/* ---- Mechanics --------------------------------------------------------- */

.sikai-public .p-mechanics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}

/* Five cards in a three-column grid left a two-card row with a hole in it,
   which is what a grid looks like when nobody chose the number. The fifth is
   "an unlocking path", the one mechanic that is a SHAPE rather than a
   counter -- a road with lit and unlit stops on it -- so it is the one that
   can use the extra column, and the row closes. */
.sikai-public .p-mechanic:last-child {
  grid-column: span 2;
}

.sikai-public .p-mechanic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--p-r-card);
  border: 1px solid rgba(23, 24, 26, .09);
}

.sikai-public .p-mechanic__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 34px;
  height: 34px;
  border-radius: var(--p-r-chip);
  background: var(--p-chalk);
}

.sikai-public .p-mechanic__title {
  font-size: var(--p-t-lg);
  font-weight: var(--p-w-strong);
  line-height: 1.25;
  letter-spacing: -.01em;
}

.sikai-public .p-mechanic__body {
  font-size: var(--p-t-md);
  line-height: 1.55;
  color: var(--p-ink-3);
}

/* Six glyphs, each drawn from the same primitives as the product's own
   diagrams -- a square, a disc, a ring, three bars. No icon font, no SVG
   sprite, nothing to download.

   They take their colour from the wrapper via currentColor rather than each
   naming a hue. The wrapper is what knows which register a mechanic belongs
   to (earned/gold, institutional/blue, correct/green), so recolouring one
   mechanic is now a single class in the view instead of a shape rule and a
   background rule that have to be kept in step -- which they were not:
   "Points and levels" was a blue square in a blue tint, and points are the
   most straightforwardly earned thing on the page. */
.sikai-public .g-sq { width: 16px; height: 16px; border-radius: 5px; background: currentColor; }
.sikai-public .g-disc { width: 16px; height: 16px; border-radius: 50%; background: currentColor; }
.sikai-public .g-gem { width: 18px; height: 18px; border-radius: 5px; background: currentColor; transform: rotate(45deg); }
.sikai-public .g-ring { width: 16px; height: 16px; border-radius: 50%; border: 3px solid currentColor; }
.sikai-public .g-bar { width: 4px; border-radius: 2px; background: currentColor; }
.sikai-public .g-node { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sikai-public .g-node--dim { opacity: .3; }
.sikai-public .g-link { width: 12px; height: 2px; background: currentColor; }

.sikai-public .p-mechanic__glyph--bars { align-items: flex-end; padding-bottom: 9px; }
.sikai-public .p-mechanic__glyph--blue { background: var(--p-blue-tint); color: var(--p-blue); }
.sikai-public .p-mechanic__glyph--gold { background: var(--p-gold-tint); color: var(--p-gold); }
.sikai-public .p-mechanic__glyph--green { background: var(--p-green-tint); color: var(--p-green); }

/* ---- Split sections ---------------------------------------------------- */

.sikai-public .p-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.sikai-public .p-split__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.sikai-public .p-split__copy .p-h2 {
  max-width: 22ch;
}

.sikai-public .p-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sikai-public .p-point {
  display: flex;
  gap: 13px;
  font-size: var(--p-t-md);
  line-height: 1.6;
  color: var(--p-ink-2);
}

/* Flex-centred -- see the note on .p-route__step b. */
.sikai-public .p-point b {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 6px;
  background: var(--p-chalk);
  font-size: var(--p-t-xs);
  font-weight: var(--p-w-label);
  line-height: 1;
  color: var(--p-ink-2);
}

.sikai-public .p-point strong {
  font-weight: var(--p-w-strong);
  color: var(--p-ink);
}

/* ---- Teacher preview panel --------------------------------------------- */

.sikai-public .p-preview {
  padding: 18px;
  border-radius: var(--p-r-card);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
}

.sikai-public .p-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--p-line);
}

.sikai-public .p-preview__title {
  font-size: 14px;
  font-weight: var(--p-w-strong);
}

.sikai-public .p-preview__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(23, 24, 26, .06);
}

.sikai-public .p-preview__row:last-child {
  border-bottom: 0;
}

.sikai-public .p-preview__who {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: var(--p-w-label);
}

.sikai-public .p-preview__track {
  flex: none;
  width: 96px;
  height: 8px;
  border-radius: var(--p-pill);
  background: var(--p-chalk);
  overflow: hidden;
}

/* Gold, because a progress bar is a picture of what a child has earned --
   and the modifier for the child who is behind is a NEUTRAL grey, not a
   second hue.
 *
 * It was the other way round: blue bars with a gold one for the student on
 * 31%, which made the only warm mark in the panel belong to the child who
 * had done least, and read as an alarm. The section's actual claim is "a
 * teacher can see who is stuck before the next class" -- a short gold bar
 * says that on its own, without colouring one child as a problem. */
.sikai-public .p-preview__fill {
  display: block;
  height: 100%;
  border-radius: var(--p-pill);
  background: var(--p-gold);
}

.sikai-public .p-preview__fill--low {
  background: var(--sk-fill-5);
}

/* /for-parents reuses this panel to wireframe the "add a child" FORM, where
   a bar is a text field rather than a child's progress. Neutral, because a
   form field is neither earned nor institutional -- gold there would say the
   parent had achieved something by typing their child's name. */
.sikai-public .p-preview--form .p-preview__fill {
  background: var(--sk-fill-5);
}

/* Sized to its content, not to 40px. /for-parents reuses this slot for the
   form wireframe, where the label is "4 digits" rather than a percentage,
   and a fixed 40px broke it over two lines as "4 / digits". */
.sikai-public .p-preview__pct {
  flex: none;
  min-width: 40px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: var(--p-w-label);
  text-align: right;
  color: var(--p-mute);
}

/* ---- Family preview cards ----------------------------------------------
   The parent's actual screen, drawn at size. These rules are deliberately a
   restatement of parents.css's -- same component names under .p-*, same
   shapes, same colours -- because the two pages are selling and delivering
   one screen, and this hero is the only look at it a parent gets before they
   have an account.

   They drifted once already. The mock showed both children as rows inside a
   single card, with no week strip, no wallet, the standing sentence in the
   meta slot, and SCHOOL in blue where the real screen (and the platform
   screen it was reconciled with -- see parents.css's .p-tag--school note)
   has it green. A prospective parent was shown a screen that does not exist.

   They are restated rather than shared for the reason at the top of this
   file: parents.css nests under .sikai-parent and this page is .sikai-public.
   Both read the same --sk-* tokens, so the values cannot drift even though
   the rules are duplicated -- only the composition can, which is what the
   request spec pins. */

.sikai-public .p-kids {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sikai-public .p-kidcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--p-r-card);
  border: 1px solid rgba(23, 24, 26, .09);
  background: var(--p-surface);
}

.sikai-public .p-kidcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* The section head above the children: "Your children · 2" and the date, the
   two ends of parents/home's own .p-section-head. */
.sikai-public .p-mockhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px;
}

/* A card per child, and each one a whole card rather than a row in a shared
   one -- on the real screen each is a link into that child's page, and a row
   in a list does not read as somewhere you can go. */
.sikai-public .p-kid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--p-r-card);
  border: 1px solid var(--p-line);
  background: var(--p-surface);
}

.sikai-public .p-kid__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sikai-public .p-kid__initial {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--p-blue-tint);
  font-size: 15px;
  font-weight: var(--p-w-strong);
  color: var(--p-blue);
}

.sikai-public .p-kid__who {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.sikai-public .p-kid__namerow {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sikai-public .p-kid__name {
  font-size: 15.5px;
  font-weight: var(--p-w-strong);
  color: var(--p-ink);
}

.sikai-public .p-kid__meta {
  font-size: 11.5px;
  color: var(--p-mock-mute);
}

/* Seven days, oldest to newest, ending today. Squares rather than dots, at
   the size parents.css sets them: at 8px a circle on a low-density Android
   screen loses its shape. This is the most distinctive thing on the real
   screen and the mock did not have it at all. */
.sikai-public .p-week {
  display: flex;
  flex: none;
  gap: 4px;
  align-items: center;
}

.sikai-public .p-week__day {
  width: 8px;
  height: 18px;
  border-radius: 3px;
  background: var(--sk-fill-4);
}

.sikai-public .p-week__day--on {
  background: var(--p-blue);
}

/* The one line the whole screen exists to say. Green only for the state that
   earned it: "not yet today" is a normal Tuesday, not an alert. */
.sikai-public .p-standing {
  display: block;
  font-size: 13px;
  font-weight: var(--p-w-label);
  line-height: 1.5;
  color: var(--p-ink-2);
}

.sikai-public .p-standing--on {
  color: var(--p-green);
}

/* The family wallet. Second thing on the real screen, and the thing this
   page's own "what it costs you" section is entirely about -- so leaving it
   out of the hero meant the page argued for a number it never showed. */
.sikai-public .p-wallet {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  border-radius: var(--p-r-card);
  border: 1px solid var(--p-chalk);
  background: var(--p-paper);
}

.sikai-public .p-wallet__label {
  font-size: 11px;
  font-weight: var(--p-w-strong);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--p-ink-2);
}

.sikai-public .p-wallet__n {
  font-size: 28px;
  font-weight: var(--p-w-label);
  line-height: 1.1;
  color: var(--p-ink);
}

.sikai-public .p-wallet__meta {
  font-size: 13px;
  color: var(--p-ink-2);
}

/* The Lately feed. Two kinds, two marks, no icon font -- a badge is the thing
   worth spotting in a column of finished topics, so it gets the gold. */
.sikai-public .p-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sikai-public .p-feed__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.sikai-public .p-feed__mark {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--p-blue);
}

.sikai-public .p-feed__mark--badge {
  background: var(--p-gold);
}

.sikai-public .p-feed__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sikai-public .p-feed__what {
  font-size: 14px;
  line-height: 1.45;
  color: var(--p-ink);
}

.sikai-public .p-feed__when {
  font-size: 12px;
  color: var(--p-ink-2);
}

/* The three lifetime figures from the child's own page. */
.sikai-public .p-tiles {
  display: flex;
  gap: 8px;
}

.sikai-public .p-tile {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  border-radius: var(--p-r-chip);
  background: var(--p-paper);
}

.sikai-public .p-tile__n {
  font-size: 18px;
  font-weight: var(--p-w-label);
  color: var(--p-ink);
}

.sikai-public .p-tile__l {
  font-size: 10.5px;
  font-weight: var(--p-w-strong);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p-mock-mute);
}

.sikai-public .p-pill {
  padding: 4px 8px;
  border-radius: var(--p-pill);
  background: var(--p-chalk);
  font-size: 8.5px;
  font-weight: var(--p-w-label);
  letter-spacing: .04em;
  color: var(--p-mute);
}

/* SCHOOL is green and FAMILY is blue, which is the opposite of what this page
   used to draw. parents.css records why: sa/parents/show.html.erb ships green
   for SCHOOL, so the same child has to read the same way on all three
   screens. This page was the one left out of that reconciliation. */
.sikai-public .p-pill--school {
  background: var(--p-green-tint);
  color: var(--p-green);
}

.sikai-public .p-pill--family {
  background: var(--p-blue-tint);
  color: var(--p-blue);
}

.sikai-public .p-kidcard__rows {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.sikai-public .p-kidcard__row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--p-ink-2);
}

.sikai-public .p-kidcard__row b {
  font-weight: var(--p-w-label);
  color: var(--p-ink);
}

.sikai-public .p-kidcard__row b.is-good {
  color: var(--p-green);
}

/* ---- Pricing ----------------------------------------------------------- */

.sikai-public .p-pricing {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: center;
  padding: 56px 48px;
  border-radius: var(--p-r-panel);
  background: var(--p-ink);
  color: #fff;
}

.sikai-public .p-pricing__title {
  font-size: clamp(26px, 3.8vw, 36px);
  font-weight: var(--p-w-strong);
  line-height: 1.15;
  letter-spacing: -.005em;
  max-width: 20ch;
}

.sikai-public .p-pricing__sub {
  font-size: var(--p-t-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, .66);
  max-width: 42ch;
}

/* The plan cards are used on BOTH surfaces, and until now only one of them
 * worked.
 *
 * Every colour here was an rgba(255,255,255,…) picked for the dark .p-pricing
 * panel on /. /for-parents renders the same three classes bare on white, for
 * its whole "What it costs you" section -- so on that page the labels
 * ("Lessons, questions, rewards", "AI tutor credits") were white on white,
 * the body copy was white on white, and the one card that did have a fill
 * was white text on a pale blue tint. The section that names the only thing
 * Sikai charges a family for was, in practice, blank.
 *
 * So: the ON-LIGHT treatment is the DEFAULT, and the dark panel overrides it
 * below. That way round because a component inherited into a new context
 * should degrade to legible, not to invisible -- and because "white text" is
 * a claim about the parent, which a component cannot make on its own. */
.sikai-public .p-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
}

.sikai-public .p-plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border-radius: var(--p-r-card);
  background: var(--p-surface);
  border: 1px solid var(--p-line);
}

.sikai-public .p-plan--paid {
  background: var(--p-blue-tint);
  border-color: rgba(24, 88, 136, .28);
}

.sikai-public .p-plan__label {
  font-size: var(--p-t-xs);
  font-weight: var(--p-w-strong);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-mute);
}

.sikai-public .p-plan--paid .p-plan__label {
  color: var(--p-blue);
}

.sikai-public .p-plan__price {
  font-size: var(--p-t-2xl);
  font-weight: var(--p-w-label);
  line-height: 1;
}

.sikai-public .p-plan__price--words {
  font-size: var(--p-t-xl);
}

.sikai-public .p-plan__body {
  font-size: var(--p-t-sm);
  line-height: 1.5;
  color: var(--p-ink-3);
}

/* On the dark panel: one column beside the headline, and the whites come
   back. Scoped to .p-pricing, which is the only thing that knows the surface
   is dark. */
.sikai-public .p-pricing .p-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
}

.sikai-public .p-pricing .p-plan {
  padding: 20px;
  background: rgba(255, 255, 255, .07);
  border-color: transparent;
}

.sikai-public .p-pricing .p-plan--paid {
  background: rgba(24, 88, 136, .18);
  border-color: rgba(24, 88, 136, .45);
}

.sikai-public .p-pricing .p-plan__label {
  color: rgba(255, 255, 255, .5);
}

.sikai-public .p-pricing .p-plan--paid .p-plan__label {
  color: #8FBBDC;
}

.sikai-public .p-pricing .p-plan__body {
  color: rgba(255, 255, 255, .66);
}

/* ---- Footer ------------------------------------------------------------ */

.sikai-public .p-foot {
  background: var(--p-surface);
  border-top: 1px solid rgba(23, 24, 26, .07);
}

.sikai-public .p-foot__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 36px;
  padding-bottom: 36px;
}

.sikai-public .p-foot__where {
  font-size: var(--p-t-sm);
  color: var(--p-mute);
}

.sikai-public .p-foot__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
}

.sikai-public .p-foot__links a {
  font-size: var(--p-t-sm);
  font-weight: var(--p-w-label);
  color: var(--p-ink-3);
}

@keyframes p-rise {
  0%   { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- Narrow ------------------------------------------------------------
   The design's own rule: every screen reflows rather than being
   letterboxed. Columns collapse in order, nothing is hidden -- a parent
   reading this on the same low-end Android the child learns on gets the
   whole page. */

@media (max-width: 940px) {
  .sikai-public .p-head__nav {
    display: none;
  }

  .sikai-public .p-hero,
  .sikai-public .p-split,
  .sikai-public .p-pricing {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sikai-public .p-pricing {
    padding: 36px 28px;
  }

  .sikai-public .p-steps,
  .sikai-public .p-mechanics {
    grid-template-columns: 1fr 1fr;
  }

  .sikai-public .p-routes {
    grid-template-columns: 1fr;
  }

  /* The teacher panel leads its section on desktop and follows it here: on a
     phone the argument has to be read before the evidence is worth looking
     at. */
  .sikai-public .p-split--flip .p-split__copy {
    order: -1;
  }
}

@media (max-width: 620px) {
  /* The three gaps shrink together rather than the sections being re-padded
     one by one -- redeclaring the tokens keeps the RATIO between a lead, a
     normal and a wide section, which is the part that does the work. Flatten
     them to one value here and the phone gets the undifferentiated page this
     stopped being. */
  .sikai-public {
    --p-gap-lead: 36px;
    --p-gap: 52px;
    --p-gap-wide: 72px;
  }

  .sikai-public .p-shell {
    padding: 0 16px;
  }

  .sikai-public .p-hero {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  /* One column, so there is no orphan row to close and nothing to span --
     left as `span 2` this asks a single-column grid for a second column and
     gets an implicit one, pushing the card half off the screen. */
  .sikai-public .p-mechanic:last-child {
    grid-column: auto;
  }

  .sikai-public .p-stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .sikai-public .p-steps,
  .sikai-public .p-mechanics,
  .sikai-public .p-plans {
    grid-template-columns: 1fr;
  }

  /* The two device mockups shrink to share the column rather than scrolling
     out of it. A half-visible card at first paint reads as broken layout,
     not as "there is more to the right" -- and the mockups are the hero's
     whole argument, so both have to be legible without a gesture. */
  .sikai-public .p-devices {
    padding: 12px;
    gap: 10px;
  }

  .sikai-public .p-device {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
  }

  .sikai-public .p-device__xp {
    font-size: 32px;
  }

  /* One line, or the two ends of the bar wrap into each other and read as one
     run-on string ("TOPIC DONE FRACTIONS"). */
  .sikai-public .p-device__bar {
    gap: 8px;
    font-size: 7px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sikai-public *,
  .sikai-public *::before,
  .sikai-public *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* How to reach Sikai, under the footer nav. Rendered only when
   SupportContact has something to show -- see shared/_public_foot.

   Its own row rather than a sixth nav link: an address beside "How it
   works" reads as another page to visit, and this is the one line on the
   page that asks a parent to do something off the site. */
.sikai-public .p-foot__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--p-line);
}

.sikai-public .p-foot__contact-label {
  font-size: var(--p-t-sm);
  font-weight: var(--p-w-strong);
  color: var(--p-ink);
}

.sikai-public .p-foot__contact-ways {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* Underlined rather than coloured alone: these two are the only links on the
   page a parent is meant to act on away from the screen, and a colour
   difference is the one cue that does not survive a photocopied leaflet or a
   colour-blind reader. */
.sikai-public .p-foot__contact-link {
  font-size: var(--p-t-sm);
  font-weight: var(--p-w-label);
  color: var(--p-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}