/* Generated by scripts/build-site.mjs. Do not edit by hand: edit
   scripts/site-render.mjs, then run `make site`. */
@import '/fonts.css';
:root{
  --paper:#fffdf8; --panel:#ffffff;
  --ink:#1f2e36; --ink-soft:#586a72;
  --teal:#0c6d6c; --teal-tint:#e2f0ef; --teal-line:#9bc9c7;
  --dino-dk:#327c62;
  --amber-tint:#faecd2;
  --rule:#ece7db;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6}
.site-wrap{max-width:720px;margin:0 auto;padding:18px 20px 40px}

/* The header, nav and footer rules are shared with the /learn and legal pages
   and live in scripts/site-chrome.mjs. */
.site-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.site-pip{width:46px;height:46px;flex:none;display:block}
.site-brand{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:22px;
  color:var(--teal,#0c6d6c);margin:0}
.site-brand a{color:inherit;text-decoration:none}
.site-brand span{color:var(--dino-dk,#327c62)}
.site-nav{margin-left:auto;display:flex;gap:18px;font-family:'Fredoka',system-ui,sans-serif;
  font-size:15px}
.site-nav a{color:var(--teal,#0c6d6c);text-decoration:none;font-weight:500;padding:6px 0}
.site-nav a[aria-current="page"]{border-bottom:2px solid var(--teal,#0c6d6c)}
@media(max-width:560px){
  .site-nav{margin-left:0;flex-basis:100%;gap:16px}
}
.site-footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--rule,#ece7db);
  color:var(--ink-soft,#586a72);font-size:13px}
.site-footer a{color:var(--teal,#0c6d6c)}
/* A 13px line is a 15px target. WCAG 2.2's 2.5.8 asks 24x24 at AA, so the footer
   links carry padding — padding rather than a taller line, so wrapped links keep
   clear of each other instead of merging into one ambiguous target. */
.site-footer a{display:inline-block;padding:5px 3px}

.site-main h1{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:32px;
  line-height:1.2;color:var(--teal);margin:18px 0 14px}
.site-main h2{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:19px;
  margin:26px 0 8px}
.site-main a{color:var(--teal)}
/* A link set in body or small-print type is a 15-19px target. WCAG 2.2's 2.5.8
   asks 24x24 at AA, so a link inside a paragraph carries padding; the ones already
   laid out as buttons (the call to action, the plan buttons, carry on) are well
   past it and keep their own rules below. */
.site-main p a,.site-smallprint a,.site-note a,.site-faq a{display:inline-block;
  padding:5px 3px}
.site-lead{font-size:19px;margin:12px 0}
.site-cta-row{margin:24px 0 10px}
.site-main a.site-cta{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;
  font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:20px;
  padding:14px 30px;border-radius:16px}

/* The way back into the game for a family that has already started. The link
   ships with the hidden attribute (content/site-pages.mjs) and the script
   beside it lifts that attribute for a device with saved children or an
   identity cookie. This rule styles it ONLY once revealed: scoped to
   :not([hidden]) so it can never override the browser's own
   [hidden]{display:none} and show the link to a cold visitor. A device the
   script says nothing about — cold, or scripting off — never sees it. */
.site-main a.site-carry-on:not([hidden]){display:block;margin:6px 0 0;
  padding:13px 20px;border-radius:16px;background:var(--teal);color:#fff;
  text-align:center;text-decoration:none;font-family:'Fredoka',system-ui,sans-serif;
  font-weight:600;font-size:18px}

.site-note{color:var(--ink-soft);font-size:15px;margin:10px 0 24px}
/* The sign-in requirement, above the call to action it applies to and in the
   body ink rather than the notes' soft grey, so it is read before the click
   rather than after it. */
.site-disclosure{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:17px;
  color:var(--ink);margin:18px 0 0}
/* The three questions anyone can answer before signing in, given a section of
   its own rather than a line in the small print. */
.site-taster{margin:0 0 24px;padding:16px 20px;border:1px solid var(--teal-line);
  border-radius:22px}
.site-taster h2{margin:0 0 6px}
.site-taster p{margin:6px 0 0}
.site-example{background:var(--panel);border:1px solid var(--rule);border-radius:22px;
  padding:18px 22px;box-shadow:0 6px 20px rgba(31,46,54,.05);margin:0 0 22px}
.site-example p{margin:0}
.site-story{margin:30px 0 24px}
.site-story p{margin:12px 0}
.site-byline{color:var(--ink-soft);font-size:15px;font-style:italic;margin:14px 0 4px}
.site-faq{margin:26px 0 24px}
.site-faq h3{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;font-size:17px;
  margin:18px 0 4px}
.site-faq p{margin:6px 0 12px}
.site-smallprint{color:var(--ink-soft);font-size:14px}
.site-updated{color:var(--ink-soft);font-size:13px;margin-top:26px}

/* Pricing: the plan cards and promise card, used by both publications of the
   pricing copy (/pricing and /home/pricing/). The grid already makes both
   cards the same height, but yearly carries an extra note, so each card is a
   flex column and the price line's margin-bottom:auto takes the leftover
   height, which puts both buttons on the card floor. */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 6px}
.plan{min-width:0;padding:20px 18px;border:1px solid var(--rule);border-radius:16px;
  background:var(--panel);display:flex;flex-direction:column}
.plan h2{margin:0 0 2px;font-size:16px}
.plan .amount{display:block;color:var(--teal);font-size:30px;font-weight:750;line-height:1.15}
.plan .per{margin-bottom:auto;color:var(--ink-soft);font-size:14px}
.plan .note{margin:10px 0 0;color:#855904;font-size:14px;font-weight:600}
.site-main a.plan-button{display:block;margin:14px 0 0;padding:12px 14px;border-radius:14px;
  background:var(--teal);color:#fff;text-align:center;text-decoration:none;
  font-weight:600;font-size:17px}
.plan-note{margin:10px 0 0;color:var(--ink-soft);font-size:13px}
.promise{margin:20px 0;padding:14px 16px;border:1px solid var(--teal);
  border-radius:16px;background:var(--panel)}
.promise h2{margin:0;font-size:16px}
.promise .promise-line{margin:2px 0 8px;color:var(--teal);font-size:18px;font-weight:700}
.promise ul{margin:0;padding-left:20px;font-size:14px}
.promise li{margin:6px 0}
.promise-terms{margin:10px 0 0;color:var(--ink-soft);font-size:13px}
@media(max-width:460px){.plans{grid-template-columns:1fr}}