/* Numzi lock UI. Pairs with assets/js/lock-ui.js.

   Tokens (--ink, --cream, --orange, --warm, --brown, --sage) come from the page: numzi.css on the
   site pages, charm-game.css inside the games. This file declares none of its own, so it can load
   anywhere without fighting whatever is already in :root. */

/* A locked control is NOT faded. It looks exactly like an open one and the badge does all the
   telling.

   Fading was wrong twice over. On Charm's pills and Tot's cards it made a paid level look like a
   disabled control rather than an available one, which is the "you have not earned this" reading
   we keep trying to kill. And on Shape Explorer and Colour Hunt the nav buttons already carry
   their OWN opacity (.42 unmet, .9 met, 1 current — see .shp-nav-btn in game.html), so an extra
   .6 multiplied down to .25 and the locked shapes were barely visible. A parent has to be able to
   see WHICH shape they cannot have; that is the entire pitch.

   position:relative stays, because the badge is positioned against it. */
.nz-locked { position: relative; }

/* ── A FENCE ROUND A RUN OF LOCKED CONTROLS ───────────────────────────────────
   The thin outlined box. It has to behave like the controls it swallowed, because the nav rows are
   flex with flex-shrink:0 on every child — they wrap rather than compress.

   `flex: 0 1 auto` with min-width:0 is load-bearing: never grow, but DO shrink. At 0 0 auto the
   box sized itself to its content and refused to give way, so ABC's twenty-one locked letters made
   a 700px row inside a 500px column and, being centred, spilled off BOTH edges — F to I vanished
   on the left and the label on the right. Shrinking is what lets its own flex-wrap engage. */
/* THE OUTLINE COSTS ZERO LAYOUT. This is the whole requirement: Shape Explorer's shapes must sit
   in exactly the positions they sat in before anything was locked. So the wrapper has no padding
   and no border of its own — it inherits the row's gap, which keeps the spacing between the
   shapes it swallowed identical to the spacing between the ones it did not — and the dashed box is
   drawn by an absolutely positioned ::before that is outset from it and therefore takes no space
   at all. Nothing reflows. */
.nz-lk-fence { display: flex; align-items: center; justify-content: center; gap: inherit;
               flex: 0 1 auto; min-width: 0; flex-wrap: wrap;
               position: relative; padding: 0; border: 0;
               /* ROOM FOR THE OUTLINE TO BE SEEN AS ITS OWN EDGE. The row's own gap is .4rem
                  (6.4px) and the dashes are outset 8px, so with no margin the outline landed ON
                  the last free shape and the two read as one merged group. This buys the dashes
                  about 10px of clear space. It is the one thing that does move the locked items,
                  and it moves them together: their spacing relative to each other is untouched,
                  which is what kept the row looking like itself. */
               margin-left: .7rem; }
.nz-lk-fence::before { content: ''; position: absolute; inset: -7px -8px;
                       border: 1.5px dashed var(--warm, #E0CCA8); border-radius: 13px;
                       pointer-events: none; }

/* "Premium" at the box's TOP RIGHT, straddling the outline — the same badge treatment as a single
   locked control, so one visual idea covers a run and an item alike. Absolutely positioned, so it
   costs no layout either. A button, not a span: a parent will tap the words, and that tap is the
   same offer as tapping a locked item. */
.nz-lk-fence-lbl { position: absolute; top: -15px; right: 2px; z-index: 2;
                   border: 1.5px solid var(--ink, #3D2C1E); border-radius: 999px;
                   background: var(--kraft, #EFE3C8); color: var(--ink, #3D2C1E);
                   font-family: 'Fredoka One', cursive; font-size: .58rem; letter-spacing: .01em;
                   line-height: 1.1; padding: .13rem .4rem; cursor: pointer;
                   white-space: nowrap; }

/* The same badge, inline in a sentence — for places that are prose rather than a control, like
   Picture Parade's "N more with Premium" line. Same pill, same border, same font as the badge on a
   locked capsule, so a parent recognises one idea rather than learning a second one. */
.nz-lk-inline { display: inline-block; vertical-align: middle; margin-right: .4rem;
                font-family: 'Fredoka One', cursive; font-size: .62rem; letter-spacing: .01em;
                line-height: 1.1; white-space: nowrap;
                background: var(--kraft, #EFE3C8); color: var(--ink, #3D2C1E);
                border: 1.5px solid var(--ink, #3D2C1E); border-radius: 999px;
                padding: .14rem .42rem; }

/* ── ONE LOCKED ITEM, LABELLED IN PLACE ───────────────────────────────────────
   Two variants, because two shapes of control need it.

   DEFAULT — Tot's 2x2 level cards, where a fence cannot enclose levels 2, 3 and 4 without tearing
   the grid. The words go on their own line inside the card, which is easily large enough, and the
   card's border goes dashed to match the fence's language. */
.nz-lk-marked:not(.is-chip) { border-style: dashed !important; }
/* A real badge, not a caption. At .62rem in plain brown it read as a footnote on a card big enough
   to carry something you can actually see, and the lock was the size of a full stop. */
.nz-lk-marked:not(.is-chip) .nz-lk-mark-lbl {
  display: inline-block; margin-top: .55rem;
  font-family: 'Fredoka One', cursive; font-size: .82rem; letter-spacing: .01em;
  line-height: 1.1; background: var(--kraft, #EFE3C8); color: var(--ink, #3D2C1E);
  border: 2px solid var(--ink, #3D2C1E); border-radius: 999px;
  padding: .22rem .7rem; }

/* .is-chip — Charm Counting's level pills. ON the capsule's edge, the way the padlock was: it
   straddles the top-right border, half over the pill and half outside it, so it reads as a badge
   belonging to that control rather than as a separate item sitting next to it. The pill keeps its
   exact size and its solid border; the chip costs it nothing.

   The pair wrapper stays (it is what guarantees a chip cannot be separated from its pill by a line
   break) but it no longer adds a gap — the chip is positioned against the pill, not laid out
   beside it. */
.nz-lk-pair { display: inline-flex; position: relative; flex: 0 0 auto; }
.nz-lk-marked.is-chip { border-style: solid; }
.nz-lk-pair .nz-lk-mark-lbl {
  position: absolute; top: -.5rem; right: -.45rem; z-index: 2;
  margin: 0; white-space: nowrap; line-height: 1.1;
  font-family: 'Fredoka One', cursive; font-size: .56rem; letter-spacing: .01em;
  background: var(--kraft, #EFE3C8); color: var(--ink, #3D2C1E);
  border: 1.5px solid var(--ink, #3D2C1E); border-radius: 999px;
  padding: .13rem .38rem;
  /* ── IT TAKES TAPS NOW, AND THAT IS THE FIX ─────────────────────────────────
     It was pointer-events:none so that a tap near the corner fell through to the control beneath.
     Which is exactly what went wrong: a parent tapping the word "Premium" — the most obvious thing on
     the row to tap when you want to know what Premium costs — had their tap delivered to the game,
     which jumped to a locked letter, which ended the run, which the session then turned into "Game
     completed!". The one screen whose job is to answer "what would I be buying" was unreachable
     through the one word that names it.

     The cost is a few pixels of the control's corner, which is the right trade: the chip is a target
     worth having, and the control has all of its own middle. */
  pointer-events: auto; cursor: pointer; }
.nz-lk-pair .nz-lk-mark-lbl:hover { background: var(--warm, #E0CCA8); }
.nz-lk-pair .nz-lk-mark-lbl:focus { outline: none; }
.nz-lk-pair .nz-lk-mark-lbl:focus-visible {
  outline: 2px solid var(--ink, #3D2C1E); outline-offset: 2px; }

/* Breathing room ONLY when a chip is present, so wrapped lines cannot push a badge into the pill
   above it and make it look like that one is locked. Untouched for a subscriber, who has no
   chips. */
.level-row:has(.nz-lk-pair),
.lv-row:has(.nz-lk-pair) { row-gap: .85rem; }

/* ── THE POPUP: /pricing's PLAN CARD, CENTRED ─────────────────────────────────
   It used to sit at the bottom of the screen like a mobile action sheet, which made the one screen
   that has to feel like an offer read like a system tray. Centred, and allowed to scroll inside
   itself on a short screen, because the pricing card is tall and a popup that cannot be scrolled
   to its own button is a popup with no button. */
.nz-lk-wrap { position: fixed; inset: 0; z-index: 9000; display: flex;
              align-items: center; justify-content: center; padding: 1rem .8rem;
              overflow-y: auto; }
.nz-lk-back { position: fixed; inset: 0; background: rgba(61, 44, 30, .55); }

/* Matching pricing.html's .pr-plan: same border, same 7px offset shadow, same radius, same
   padding, so this is the card a parent has already seen rather than a lookalike. */
.nz-lk-sheet { position: relative; width: 100%; max-width: 430px; margin: auto;
               background: var(--card, #FDF6E9); color: var(--ink, #3D2C1E);
               border: 3px solid var(--ink, #3D2C1E); border-radius: 24px;
               box-shadow: 7px 7px 0 var(--ink, #3D2C1E);
               padding: 1.8rem 1.7rem 1.6rem; text-align: center;
               animation: nz-lk-up .22s ease-out; }
/* 430px on a phone, 620px where there is room — which is what lets the container queries put
   the unlock rows and the foundation names in two columns and bring the whole offer above the
   fold on a laptop. The VIEWPORT query is right here and only here: it asks the screen how wide
   to make the card, and everything inside the card then asks the card.
   AFTER the rule it overrides, not before it with !important. The first attempt used
   !important — which then beat the inline width a resize test was setting, so every width in
   the sweep silently measured a 620px card and reported no change at any of them. Source order
   is the fix; !important is what hides a fix. */
@media (min-width: 760px) {
  .nz-lk-sheet { max-width: 620px; }
}

@keyframes nz-lk-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Someone who has set "reduce motion" is telling us they get motion sick, not that they want a
   slower animation. */
@media (prefers-reduced-motion: reduce) { .nz-lk-sheet { animation: none; } }

/* The green badge straddling the top border, exactly as on /pricing. */
.nz-lk-plan-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
                    background: var(--sage, #7BBF8E); color: #fff;
                    font-family: 'Fredoka One', cursive; font-size: .76rem;
                    border: 2.5px solid var(--ink, #3D2C1E); border-radius: 999px;
                    padding: .22rem .9rem; white-space: nowrap; }

/* The old price block — a 3rem figure, a cadence line and a tax note — is gone with the
   markup that used it. .nz-lk-priceline below is the one line that replaced all three. */

.nz-lk-x { position: absolute; top: .5rem; right: .65rem; width: 2rem; height: 2rem;
           border: 0; background: transparent; color: var(--brown, #9B6B4A);
           font-size: 1.5rem; line-height: 1; cursor: pointer; }

.nz-lk-badge { display: inline-block; font-family: 'Fredoka One', cursive; font-size: .68rem;
               letter-spacing: .08em; text-transform: uppercase;
               background: var(--warm, #E0CCA8); color: var(--ink, #3D2C1E);
               border-radius: 999px; padding: .22rem .6rem; margin-bottom: .45rem; }

/* ── THE AMBITION, ABOVE THE PRICE ───────────────────────────────────────────
   The card opens on what a parent wants rather than on what we charge. The price still has to
   be found without hunting, which is why the lede is two lines and the pills are one. */
.nz-lk-head { font-family: 'Fredoka One', cursive; font-size: 1.24rem; line-height: 1.3;
              margin: .45rem 0 .35rem; color: var(--ink, #3D2C1E);
              /* balance evens the two lines instead of leaving "learn." alone on the second. */
              text-wrap: balance; }
.nz-lk-pills { display: flex; flex-wrap: wrap; gap: .26rem; justify-content: center;
               margin: 0 0 .5rem; }
/* Sized so all three sit on ONE line inside the card, at any card width — the clamp shrinks
   them on a narrow phone rather than letting the row break 2 + 1, which reads as a list with an
   afterthought instead of three marks of the same standing. */
.nz-lk-pills span { font-weight: 800; line-height: 1.3;
                    font-size: .66rem; font-size: clamp(.56rem, 2.66cqw, .66rem);
                    background: var(--kraft, #EFE3C8); color: var(--ink, #3D2C1E);
                    border-radius: 999px; white-space: nowrap;
                    /* The padding shrinks with the text, or on a narrow phone the three pills
                       are mostly padding and break the row anyway. */
                    padding: .22rem .42rem; padding: .22rem clamp(.3rem, 1.7cqw, .42rem); }
.nz-lk-pe { font-style: normal; margin-right: .22rem; }
/* THE EMOJI GOES BEFORE THE ROW DOES. Below this the three pills cannot hold one line at a
   readable size, and three marks broken 2 + 1 read as a list with an afterthought. The words
   are the claim; the leaf and the globe are decoration, so decoration is what is cut. */
@container (max-width: 358px) {
  .nz-lk-pe { display: none; }
}


/* ── THE TWO HALVES, AND WHY THEY ARE STYLED IDENTICALLY ─────────────────────
   One rule for both section headings, one rule for both capsule lists. The halves were once
   "Main Learning" and "Also Building", and any difference in size, weight or colour here would
   re-introduce exactly the demotion that renaming them was meant to remove. If one of these
   ever needs its own style, that is the moment to check the naming again. */
/* ── THE TIER ABOVE THE TWO HALVES ───────────────────────────────────────────
   "With your membership" and "What Numzi helps build" are the card's two real sections; the
   foundations headings are subsections of the second. So these are INK and carry no rule, while
   .nz-lk-h2 below is brown and does — the difference is what tells a parent that Learning and
   Thinking belong under one idea rather than being two more pitches in a row. */
.nz-lk-sec { font-family: 'Fredoka One', cursive; letter-spacing: .09em; text-transform: uppercase;
             color: var(--ink, #3D2C1E); text-align: left; margin: 1.35rem 0 .2rem;
             font-size: .82rem; font-size: clamp(.76rem, 3.6cqw, .86rem); }
/* The one sentence that connects the games to the reasons. Italic so it reads as a note on the
   heading rather than as the first item under it. */
.nz-lk-secsub { font-style: italic; font-weight: 700; text-align: left; line-height: 1.45;
                color: var(--brown, #9B6B4A); margin: 0 0 .1rem; text-wrap: pretty;
                font-size: .82rem; font-size: clamp(.76rem, 3.5cqw, .86rem); }
/* The first section label sits right under the pills and needs no gap of its own. */
.nz-lk-pills + .nz-lk-sec { margin-top: .9rem; }

.nz-lk-h2 { font-family: 'Fredoka One', cursive; font-size: .74rem; letter-spacing: .1em;
            text-transform: uppercase; color: var(--brown, #9B6B4A); text-align: left;
            margin: 1.25rem 0 .1rem; padding-bottom: .3rem;
            border-bottom: 2px solid var(--warm, #E0CCA8); }

/* ── COLLAPSED AND EXPANDED ──────────────────────────────────────────────────
   Both faces are in the DOM and this shows one. Toggling a class rather than re-rendering
   matters because the card can be inside a scrolled sheet: replacing its middle would move
   everything under the parent's thumb mid-read.

   :not() rather than a plain descendant rule, and that is not style: the two-column media query
   further down carries `.nz-lk-sheet .nz-lk-caps { display: block }`, which is the same
   specificity and sits later in the file, so a plain `.nz-lk-offer .nz-lk-caps` lost and the
   collapsed card rendered BOTH faces — measured taller closed (1773px) than open (1618px).
   `.nz-lk-offer:not(.is-open)` is three classes and wins wherever it sits. */
/* The unlock rows are EXCLUDED here rather than un-hidden by a later rule. They are the one
   capsule list the toggle must not touch — they are the answer this modal exists to give — and
   a separate `.nz-lk-offer .nz-lk-unlock { display: block }` lost to this selector on
   specificity and silently hid all four. Carving them out of the hide is the version that
   cannot lose. */
.nz-lk-offer:not(.is-open) .nz-lk-caps:not(.nz-lk-unlock) { display: none; }
.nz-lk-offer.is-open .nz-lk-names { display: none; }

/* Past the clip: in the DOM, hidden until the detail opens. And "+ 5 more" is not a button —
   the one control below it opens everything, so a second tappable thing saying the same would
   be two ways to do one job. It is a count, and the count is itself an argument. */
.nz-lk-offer:not(.is-open) .nz-lk-over { display: none; }
.nz-lk-offer.is-open .nz-lk-moren { display: none; }
.nz-lk-moren { font-weight: 800; color: var(--brown, #9B6B4A); opacity: .85;
               padding: .26rem 0 .26rem 1.62rem; line-height: 1.4;
               font-size: .84rem; font-size: clamp(.78rem, 3.7cqw, .88rem); }

/* ── THE PRICE, ONE LINE ─────────────────────────────────────────────────────
   Under the "Unlock all of Numzi" heading, because a parent who tapped a lock is asking what
   ₹499 buys and the figure belongs in the same breath as the promise. One line rather than the
   old 3rem figure over two more lines of cadence and tax notes: the button repeats the price on
   the way out, and /pricing carries the terms in its own fact cards. */
.nz-lk-priceline { display: flex; align-items: baseline; justify-content: center;
                   flex-wrap: wrap; gap: .1rem .5rem; margin: .1rem 0 .9rem; }
.nz-lk-priceline b { font-family: 'Fredoka One', cursive; color: var(--orange, #E8844A);
                     font-size: 1.6rem; font-size: clamp(1.35rem, 7cqw, 1.7rem); line-height: 1.1; }
.nz-lk-per { font-size: .62em; color: var(--brown, #9B6B4A); }
.nz-lk-cancel { font-weight: 700; color: var(--brown, #9B6B4A);
                font-size: .8rem; font-size: clamp(.74rem, 3.4cqw, .84rem); }

/* ── THE CARD SIZES ITSELF TO ITSELF ─────────────────────────────────────────
   container-type, so every clamp() below can use cqw — a share of THIS CARD's width, not the
   viewport's. vw would repeat the bug the two-column grid had: the card is 430px wide whether
   the screen is 1512px or 375px, so 4vw is 60px on a desktop popup and 15px on a phone, which
   is backwards. cqw asks the only box that matters.
   Each rule states a plain size first: where cqw is unsupported the clamp is dropped and the
   plain value stands, rather than the text losing its size altogether. */
.nz-lk-offer { container-type: inline-size; }

/* The same names, one per line, no descriptions. */
.nz-lk-names { list-style: none; padding: 0; margin: .55rem 0 0; text-align: left; }
.nz-lk-names li { display: flex; gap: .5rem; align-items: baseline; padding: .26rem 0;
                  font-weight: 800; color: var(--ink, #3D2C1E); line-height: 1.4;
                  font-size: .88rem; font-size: clamp(.8rem, 3.9cqw, .92rem); }

/* Quiet. It opens an explanation; it is not competing with Subscribe. */
.nz-lk-detail { display: block; margin: .9rem auto 0; font-family: 'Fredoka One', cursive;
                font-size: .8rem; background: none; border: 0; cursor: pointer;
                color: var(--brown, #9B6B4A); text-decoration: underline;
                text-underline-offset: 3px; padding: .2rem .4rem; }
.nz-lk-detail:hover { color: var(--orange, #E8844A); }

.nz-lk-caps { list-style: none; padding: 0; margin: .6rem 0 0; text-align: left; }
.nz-lk-caps li { display: flex; gap: .55rem; align-items: flex-start; padding: .34rem 0; }
.nz-lk-cap-i { font-size: 1.05rem; line-height: 1.35; flex: 0 0 auto; }
.nz-lk-cap-b { display: block; }
.nz-lk-cap-b b { display: block; font-weight: 800; line-height: 1.35;
                 color: var(--ink, #3D2C1E);
                 font-size: .9rem; font-size: clamp(.82rem, 3.9cqw, .92rem); }
.nz-lk-cap-b span { display: block; line-height: 1.4;
                    color: var(--brown, #9B6B4A); font-weight: 600; text-wrap: pretty;
                    font-size: .8rem; font-size: clamp(.74rem, 3.4cqw, .82rem); }

/* ── TWO COLUMNS, WHEN THE CARD IS ACTUALLY WIDE ─────────────────────────────
   A @media two-column rule lived here once and was deleted, because it asked the VIEWPORT: on a
   1512px desktop it fired inside a 430px card and made two 176px columns where "Language,
   reading & writing" wrapped onto three lines. It is back as a CONTAINER query, which asks the
   card — so it can only fire once the card is genuinely wide enough, which it now is on a
   desktop (see .nz-lk-sheet / .pr-plan below). This is the change that gets the whole offer
   above the fold on a laptop: four unlock rows and seven foundation names in half the height. */
@container (min-width: 520px) {
  /* The four unlock rows in two columns. */
  .nz-lk-caps.nz-lk-unlock { display: grid; grid-template-columns: 1fr 1fr;
                             column-gap: 1.3rem; align-items: start; }
  /* And the two foundations halves side by side rather than one after the other. Not each list
     split into two columns — that was the first attempt, and three names across two columns is
     an awkward shape that saves almost nothing. Standing the SECTIONS level is both the bigger
     saving and the better statement: neither half is above the other on the page. */
  .nz-lk-fwrap { display: grid; grid-template-columns: 1fr 1fr;
                 column-gap: 1.6rem; align-items: start; }
  /* The first heading in each column must not add its own top margin, or the two headings sit
     at different heights and the whole point of standing them level is lost. */
  .nz-lk-fgroup .nz-lk-h2 { margin-top: .4rem; }
  /* Wide is also where the fold matters, so the vertical rhythm tightens with it. Every one of
     these is a gap that reads as generous on a phone and as wasted on a laptop. */
  .nz-lk-sec    { margin-top: .85rem; }
  .nz-lk-foot   { margin-top: .8rem; padding-top: .65rem; }
  .nz-lk-detail { margin-top: .5rem; }
  .nz-lk-alt    { margin-top: .45rem; }
  .nz-lk-caps li, .nz-lk-names li { padding-top: .26rem; padding-bottom: .26rem; }
}

/* ── THE PRICE LINE IS DESKTOP-ONLY ──────────────────────────────────────────
   On a phone it repeats the Subscribe button, which is now pinned to the bottom of the screen
   and reads "₹499/mo" whatever a parent has scrolled to — so the line at the top is the same
   number twice with the height of a row between them. On a wide card the button is not always
   in view, so the figure earns its place. Container query, not media: the test is whether THIS
   card has the room. */
/* Hidden by default; the container query below turns it on for a narrow card. DECLARED
   BEFORE that query, not after — it was written after it first, and being the same
   specificity and later in the file it won, so the button never appeared on the phone it
   exists for while the sentence it reveals was already hidden. */
/* Hidden by default and revealed only on a narrow card, so a desktop reader never sees a control
   for a sentence that is already in front of them. */
.nz-lk-i { display: none; align-items: center; justify-content: center;
           width: 1.05rem; height: 1.05rem; margin-left: .4rem; vertical-align: middle;
           border: 1.5px solid var(--brown, #9B6B4A); border-radius: 50%;
           background: none; color: var(--brown, #9B6B4A); cursor: pointer;
           font-family: 'Fredoka One', cursive; font-size: .62rem; line-height: 1;
           padding: 0; text-transform: none; }
.nz-lk-i:hover { color: var(--orange, #E8844A); border-color: var(--orange, #E8844A); }

/* ── EVERYTHING A NARROW CARD DOES DIFFERENTLY ───────────────────────────────
   Container, not media: the test is whether THIS card is narrow, which is true on a phone and
   false in a 620px desktop popup on the same page. Desktop is untouched by all of it. */
@container (max-width: 470px) {
  .nz-lk-priceline { display: none; }

  /* The bridge sentence goes behind the (i). It is a line of prose sitting between a parent and
     the two lists they came to read, and on a phone the lists are what have to clear the fold. */
  .nz-lk-i { display: inline-flex; }
  .nz-lk-secsub { display: none; }
  .nz-lk-offer.is-note .nz-lk-secsub { display: block; margin-top: .3rem; }

  /* AND THE UNLOCK ROWS TIGHTEN. Four rows of title-plus-sentence was the single biggest block
     on the card and it was pushing LEARNING FOUNDATIONS off the bottom of a phone. Nothing is
     cut — the padding between rows, the leading inside a description and the gap to the icon are
     each a couple of pixels that read as generous on a desktop card and as distance here. */
  .nz-lk-caps li     { padding: .15rem 0; gap: .45rem; }
  .nz-lk-cap-b b     { line-height: 1.25; }
  .nz-lk-cap-b span  { line-height: 1.3; }
  .nz-lk-cap-i       { font-size: .95rem; }
  .nz-lk-sec         { margin-top: .7rem; }
  .nz-lk-h2          { margin-top: .7rem; padding-bottom: .2rem; }
  .nz-lk-names       { margin-top: .3rem; }
  .nz-lk-names li    { padding: .16rem 0; }
  .nz-lk-moren       { padding: .16rem 0 .16rem 1.62rem; }
  .nz-lk-pills       { margin-bottom: .3rem; }
  .nz-lk-head        { margin: .25rem 0 .4rem; }
  .nz-lk-caps        { margin-top: .35rem; }
}


/* ── SUBSCRIBE, ALWAYS ON SCREEN ─────────────────────────────────────────────
   The card carries three sections now and a parent reading the thinking foundations is a long
   way from a button. Sticking the button to the bottom of the sheet is what lets the content be
   this long with nothing hidden behind an accordion or a "+7 more" — they scroll the whole
   proposition and the decision is always one tap away.
   The background is opaque and the negative margins bleed it to the card's edges, so text
   scrolling underneath does not show through. */
.nz-lk-foot { margin: 1.2rem 0 0; padding: .9rem 0 0;
              border-top: 2px solid var(--warm, #E0CCA8); }
/* STICKY ONLY INSIDE THE POPUP. The in-place card and /pricing sit in normal page flow, where
   sticking to the viewport bottom would clip the guarantee under the fold instead of keeping
   the button in reach. The negative margins bleed the opaque background to the sheet's own
   edges — they match .nz-lk-sheet's 1.7rem/1.6rem padding exactly, so text scrolling underneath
   cannot show through at the sides. */
.nz-lk-sheet .nz-lk-foot { position: sticky; bottom: -1.6rem; z-index: 2;
              background: var(--card, #FDF6E9);
              margin: 1.3rem -1.7rem -1.6rem; padding: .8rem 1.7rem 1rem; }

/* ── AND ON /pricing, ON A PHONE ─────────────────────────────────────────────
   The page is the scroll container there, so bottom:0 pins Subscribe to the bottom of the
   screen exactly as it is pinned inside the popup — a parent scrolling the foundations always
   has the button. A viewport query, correctly: this one is about the SCREEN doing the
   scrolling, not about how wide the card is. Above this width the whole card fits and a pinned
   button would be a bar floating over nothing. */
@media (max-width: 760px) {
  .pr-plan .nz-lk-foot { position: sticky; bottom: 0; z-index: 2;
                         background: var(--card, #FDF6E9);
                         margin: 1.3rem -1.7rem -1.6rem; padding: .8rem 1.7rem 1rem; }
}

/* No bottom margin any more: the sticky footer supplies its own top spacing, and 1.4rem here
   left a gap the footer then sat below. */
/* Each tick's own sentence, riding under it rather than costing a tick of its own. Lighter, so
   the ticks stay a list of three things and these read as notes on them. */
/* .nz-lk-pillnote was an attribution line under the three marks and is gone with the Harvard
   pill that needed it. Kept out rather than left unused: a disclaimer on a card whose job is to
   convert reads as a warning, whatever it actually says. */

/* ── "See Premium" ────────────────────────────────────────────────────────────
   The only thing a card or the microphone asks for. Deliberately quieter than the orange
   Subscribe button, because it is not the transaction — it opens the explanation. */
.nz-lk-see { font-family: 'Fredoka One', cursive; font-size: .85rem;
             background: var(--kraft, #EFE3C8); color: var(--ink, #3D2C1E);
             border: 2px solid var(--ink, #3D2C1E); border-radius: 11px;
             padding: .4rem .9rem; cursor: pointer;
             box-shadow: 0 3px 0 var(--warm, #E0CCA8); }
.nz-lk-see:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--warm, #E0CCA8); }
.nz-lk-see.is-mic { font-size: .8rem; padding: .34rem .8rem; }

/* pricing.html's .pr-cta */
.nz-lk-cta { display: block; text-decoration: none; font-family: 'Fredoka One', cursive;
             font-size: 1.08rem; background: var(--orange, #E8844A); color: #fff;
             border: 2.5px solid var(--ink, #3D2C1E); border-radius: 14px;
             padding: .85rem 1rem; box-shadow: 0 5px 0 #b85e28; white-space: nowrap; }
.nz-lk-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 #b85e28; }

/* GREEN, and pricing.html's .pr-guar sizing. It was brown, which made the one reassuring line on
   the screen read as fine print. */
.nz-lk-fine { font-size: .8rem; font-weight: 800; color: #2f7d4a;
              margin: .5rem 0 0; line-height: 1.45; }

/* ── an in-place card ──────────────────────────────────────────────────────────
   .is-offer carries the full plan card in the game stage, so it takes the plan card's own solid
   border and offset shadow rather than the dashed outline used for a fenced run. The dashes say
   "there is more behind here"; this is not behind anything, it is the offer. */
.nz-lk-card { background: var(--cream, #FDF6E9); border: 2.5px dashed var(--warm, #E0CCA8);
              border-radius: 16px; padding: .9rem .9rem .8rem; text-align: center;
              max-width: 380px; margin: .4rem auto; }
.nz-lk-card.is-offer { position: relative; max-width: 430px; margin: 1.4rem auto 0;
                       background: var(--card, #FDF6E9);
                       border: 3px solid var(--ink, #3D2C1E); border-radius: 24px;
                       box-shadow: 7px 7px 0 var(--ink, #3D2C1E);
                       padding: 1.8rem 1.7rem 1.6rem; }
.nz-lk-card-t { font-family: 'Fredoka One', cursive; font-size: 1rem;
                color: var(--ink, #3D2C1E); margin: 0 0 .55rem; }

/* ── the locked microphone ────────────────────────────────────────────────────
   Scoped to .drw-mic.nz-mic-locked and never to a bare .drw-mic, so it cannot restyle the real
   panel a paid visitor sees. Everything else about the panel — its size, its position, its status
   line — comes from game.html's own .drw-mic-wrap block, untouched. */
.drw-mic.nz-mic-locked { animation: none !important;
                         background: var(--cream, #FDF6E9);
                         border-color: var(--warm, #E0CCA8);
                         box-shadow: 0 4px 0 var(--warm, #E0CCA8);
                         transform: none; }
/* Tight to the status line above it, so the padlock, the sentence and the button are one offer
   rather than three things that happen to be stacked. */
/* text-align:center because the button is inline-level and the panel is a column flex whose
   items stretch — without it "See Premium" sat hard left while the padlock and the sentence
   above it were centred. */
.nz-lk-micask { margin-top: .4rem; width: 100%; max-width: 300px; text-align: center; }
.nz-lk-cta.is-mic { font-size: .88rem; padding: .48rem .7rem; }

/* The per-game block that lived here — a tinted box carrying "What your little one just
   practised" over two outcome lines — is gone, and its seven rules with it. The popup is
   the offer and only the offer now; see lock-ui.js. The fork it was half of survives as
   .nz-lk-alt below. */

/* The second door. Deliberately not styled as a button: subscribing stays the primary action,
   this is the way out that is not "close". */
.nz-lk-alt {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .6rem;
}
.nz-lk-or { font-size: .74rem; opacity: .45; }
.nz-lk-more {
  font-family: 'Fredoka One', cursive; font-size: .88rem;
  color: var(--ink, #3D2C1E); text-decoration: underline; text-underline-offset: 2px;
}
.nz-lk-more:hover { color: var(--orange, #E8844A); }
.nz-lk-more:focus { outline: none; }
.nz-lk-more:focus-visible { outline: 3px solid var(--orange, #E8844A); outline-offset: 3px; }