@font-face { font-family: Brico; src: url(/fonts/BricolageGrotesque_800ExtraBold.woff) format("woff"); font-weight: 800; font-display: swap; }
  @font-face { font-family: Inst; src: url(/fonts/InstrumentSans_500Medium.woff) format("woff"); font-weight: 500; font-display: swap; }
  @font-face { font-family: Inst; src: url(/fonts/InstrumentSans_700Bold.woff) format("woff"); font-weight: 700; font-display: swap; }
  :root {
    --ink: #17140F; --ink2: #4A4238; --ink3: #736856;
    --paper: #FFF2DD; --paper2: #FFFAF0; --card: #FFFDF8; --line: #DDD3C4;
    --mint: #2ED9A0; --sun: #FFC531; --sky: #3FB8E8; --coral: #FF6A4D; --berry: #E5457E;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inst, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
  body { background-image: radial-gradient(rgba(23, 20, 15, .11) 1.3px, transparent 1.5px); background-size: 22px 22px; }
  main { max-width: 1080px; margin: 0 auto; padding: 104px 24px 80px; }
  a:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

  /* the top: what it is and the button, the app's own screen beside it */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 48px; }
  .tag { display: inline-block; padding: .35em .75em; background: var(--accent); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); font: 800 1rem Brico, system-ui; transform: rotate(-3deg); }
  h1 { margin: .5em 0 0; font: 800 clamp(2.4rem, 5.4vw, 4.4rem)/.94 Brico, system-ui; letter-spacing: -.045em; text-wrap: balance; }
  .lede { margin: .8em 0 0; max-width: 34em; font: 700 clamp(1.05rem, 1.5vw, 1.25rem)/1.5 Inst, system-ui; color: var(--ink2); }
  .week { display: inline-block; margin: 22px 0 0; padding: 12px 18px; background: var(--mint); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); font: 700 1rem/1.4 Inst, system-ui; }
  .go { margin-top: 30px; }
  .cta { display: inline-flex; align-items: center; gap: .45em; padding: 16px 24px; color: var(--ink); text-decoration: none; background: var(--sun);
    border: 3.5px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); font: 800 clamp(1.15rem, 1.9vw, 1.45rem)/1 Brico, system-ui; transition: transform .08s, box-shadow .08s; }
  .cta:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--ink); }
  .cta svg { width: 1.1em; height: 1.1em; flex: none; }
  .cta.wide { line-height: 1.2; text-wrap: balance; max-width: 34ch; }
  .note { margin: 14px 0 0; font: 700 .95rem/1.4 Inst, system-ui; color: var(--ink3); }
  .phone { justify-self: center; width: 100%; max-width: 300px; padding: 9px; background: var(--ink); border-radius: 40px; box-shadow: 10px 10px 0 var(--accent), 10px 10px 0 3px var(--ink); transform: rotate(3deg); }
  .phone img { display: block; width: 100%; height: auto; border-radius: 32px; }

  /* the sections under it */
  section { margin-top: 84px; }
  h2 { margin: 0; font: 800 clamp(1.8rem, 3.4vw, 2.6rem)/1 Brico, system-ui; letter-spacing: -.04em; }
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: step; }
  .steps li { position: relative; padding: 58px 20px 22px; background: var(--card); border: 3.5px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink); counter-increment: step; }
  .steps li::before { content: counter(step); position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; background: var(--accent); border: 3px solid var(--ink); border-radius: 50%; font: 800 1rem/1 Brico, system-ui; }
  .steps h3, .cards h3 { margin: 0; font: 800 1.25rem/1.15 Brico, system-ui; letter-spacing: -.02em; }
  .steps p, .cards p { margin: .45em 0 0; font: 700 1rem/1.5 Inst, system-ui; color: var(--ink2); }
  .why { display: grid; gap: 12px; max-width: 46rem; margin: 22px 0 0; padding: 0; list-style: none; }
  .why li { position: relative; padding: 14px 18px 14px 52px; background: var(--paper2); border: 3px solid var(--ink); border-radius: 16px; font: 700 1.05rem/1.45 Inst, system-ui; }
  .why li::before { content: ""; position: absolute; left: 18px; top: 17px; width: 20px; height: 20px; background: var(--mint); border: 2.5px solid var(--ink); border-radius: 50%; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
  .cards div { padding: 22px; background: var(--paper2); border: 3.5px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink); }

  /* questions, all open: nothing to click to read them */
  .faq { display: grid; gap: 14px; max-width: 50rem; margin-top: 24px; }
  .faq div { padding: 18px 22px; background: var(--card); border: 3px solid var(--ink); border-radius: 18px; }
  .faq h3 { margin: 0; font: 800 1.15rem/1.2 Brico, system-ui; letter-spacing: -.01em; }
  .faq p { margin: .4em 0 0; font: 700 1rem/1.5 Inst, system-ui; color: var(--ink2); }

  .end { padding: 34px; background: var(--accent); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); }
  .end h2 { max-width: 16em; }
  .end .go { margin-top: 22px; }
  .end .cta { background: var(--paper2); }
  .end .note { color: var(--ink); }
  .more { margin-top: 56px; }
  .more p { margin: 0; font: 700 .9rem Inst, system-ui; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
  .more ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
  .more a { display: inline-block; padding: 10px 16px; color: var(--ink); text-decoration: none; background: var(--paper2); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); font: 700 1rem Inst, system-ui; }
  .more a:hover { background: var(--card); }

  /* the mascot, where the app's screens would show English to a Spanish reader */
  .art { justify-self: center; display: grid; place-items: center; width: 100%; max-width: 320px; aspect-ratio: 1; background: var(--accent); border: 4px solid var(--ink); border-radius: 50%; box-shadow: 10px 10px 0 var(--ink); }
  .art img { display: block; width: 66%; height: auto; transform: rotate(-6deg); }

  /* small print, such as a trademark notice */
  .fine { margin: 40px 0 0; max-width: 46rem; font: 700 .85rem/1.5 Inst, system-ui; color: var(--ink3); }

  @media (max-width: 760px) {
    main { padding: 88px 18px 64px; }
    .hero { grid-template-columns: 1fr; gap: 40px; }
    .phone { max-width: 250px; }
    .art { max-width: 240px; }
    section { margin-top: 64px; }
    .end { padding: 26px 22px; }
  }

  /* ---- the study-pack library (brand/pack-library/pack.css, appended to
     page.css by build.mjs as /packs/library.css) ---- */
  .pack .top { max-width: 52rem; }
  .crumbs { margin: 0 0 22px; font: 700 .95rem Inst, system-ui; color: var(--ink3); }
  .crumbs a { color: var(--ink); }
  .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
  .btn { display: inline-flex; align-items: center; gap: .5em; padding: 12px 18px; color: var(--ink); text-decoration: none; cursor: pointer; background: var(--paper2);
    border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); font: 800 1.05rem/1 Brico, system-ui; }
  .btn:first-child { background: var(--accent); }
  .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
  .btn svg { width: 1.1em; height: 1.1em; }
  .btn:focus-visible, .choice:focus-visible, .card:focus-visible, summary:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
  .ai { margin: 18px 0 0; font: 700 .95rem/1.45 Inst, system-ui; color: var(--ink3); }
  .hint { margin: .55em 0 0; font: 700 1rem/1.45 Inst, system-ui; color: var(--ink3); }
  .tldr { padding: 24px 26px; background: var(--paper2); border: 3.5px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); max-width: 52rem; }
  .tldr h2 { font-size: 1.5rem; }
  .tldr p { margin: .6em 0 0; font: 700 1.15rem/1.55 Inst, system-ui; }

  /* the deck: one card at a time, drawn by pack.js from the list below */
  .deck { margin-top: 24px; max-width: 40rem; }
  .card { display: grid; place-items: center; width: 100%; min-height: 15rem; padding: 34px 28px; cursor: pointer; text-align: center; color: var(--ink);
    background: var(--card); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--accent), 8px 8px 0 3px var(--ink); font: 800 clamp(1.25rem, 2.6vw, 1.7rem)/1.3 Brico, system-ui; letter-spacing: -.01em; }
  .card.back { background: var(--accent); font: 700 clamp(1.1rem, 2.2vw, 1.35rem)/1.5 Inst, system-ui; }
  .card small { display: block; margin-top: 14px; font: 700 .85rem Inst, system-ui; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
  .card.back small { color: var(--ink); }
  .deck-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
  .deck-bar .count { margin-right: auto; font: 800 1.1rem Brico, system-ui; }
  .deck-bar .btn { padding: 10px 14px; font-size: .95rem; }
  .deck-bar .btn:first-child { background: var(--paper2); }
  .deck + .card-list { margin-top: 30px; }
  .card-list { display: grid; gap: 10px; max-width: 52rem; margin: 24px 0 0; padding: 0; list-style: none; }
  .card-list details { background: var(--paper2); border: 3px solid var(--ink); border-radius: 16px; }
  .card-list summary { display: flex; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font: 800 1.08rem/1.35 Brico, system-ui; }
  .card-list summary::-webkit-details-marker { display: none; }
  .card-list p { margin: 0; padding: 0 18px 16px 58px; font: 700 1.02rem/1.5 Inst, system-ui; color: var(--ink2); }
  .n { flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; background: var(--accent); border: 2.5px solid var(--ink); border-radius: 9px; font: 800 .9rem/1 Brico, system-ui; }

  /* the quiz */
  .quiz { display: grid; gap: 18px; max-width: 52rem; margin: 24px 0 0; padding: 0; list-style: none; }
  .q { padding: 20px 22px; background: var(--card); border: 3.5px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink); }
  .prompt { display: flex; gap: 12px; margin: 0; font: 800 1.15rem/1.35 Brico, system-ui; }
  .choices { display: grid; gap: 8px; margin: 16px 0 0; padding: 0 0 0 40px; list-style: none; }
  .choice { width: 100%; padding: 11px 14px; text-align: left; cursor: pointer; color: var(--ink); background: var(--paper2); border: 2.5px solid var(--ink); border-radius: 12px; font: 700 1rem/1.4 Inst, system-ui; }
  .choice:hover { background: var(--paper); }
  .choice.right { background: var(--mint); }
  .choice.wrong { background: var(--coral); }
  .choice[disabled] { cursor: default; }
  .ans { margin: 12px 0 0 40px; }
  .ans summary { cursor: pointer; font: 700 .95rem Inst, system-ui; color: var(--ink3); }
  .ans p { margin: .5em 0 0; font: 700 1rem/1.5 Inst, system-ui; color: var(--ink2); }
  .ans b { color: var(--ink); }
  .score { margin: 20px 0 0; font: 800 1.3rem Brico, system-ui; }

  .traps, .sum { display: grid; gap: 12px; max-width: 52rem; margin: 22px 0 0; padding: 0; list-style: none; }
  .traps li, .sum li { position: relative; padding: 14px 18px 14px 52px; background: var(--paper2); border: 3px solid var(--ink); border-radius: 16px; font: 700 1.05rem/1.5 Inst, system-ui; }
  .traps li::before { content: "!"; position: absolute; left: 16px; top: 13px; display: grid; place-items: center; width: 24px; height: 24px; background: var(--coral); border: 2.5px solid var(--ink); border-radius: 50%; font: 800 .9rem/1 Brico, system-ui; }
  .sum li::before { content: ""; position: absolute; left: 18px; top: 18px; width: 18px; height: 18px; background: var(--accent); border: 2.5px solid var(--ink); border-radius: 50%; }
  .terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 52rem; margin: 22px 0 0; }
  .terms div { padding: 16px 18px; background: var(--card); border: 3px solid var(--ink); border-radius: 16px; }
  .terms dt { font: 800 1.1rem/1.2 Brico, system-ui; }
  .terms dd { margin: .35em 0 0; font: 700 .98rem/1.5 Inst, system-ui; color: var(--ink2); }
  .guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 52rem; margin-top: 22px; }
  .guide div { padding: 18px 20px; background: var(--paper2); border: 3px solid var(--ink); border-radius: 18px; }
  .guide h3 { margin: 0; font: 800 1.15rem/1.2 Brico, system-ui; }
  .guide ul { margin: .6em 0 0; padding-left: 1.1em; font: 700 .98rem/1.5 Inst, system-ui; color: var(--ink2); }
  .notes { max-width: 52rem; margin-top: 18px; padding: 16px 22px; background: var(--card); border: 3px solid var(--ink); border-radius: 18px; font: 700 1rem/1.55 Inst, system-ui; color: var(--ink2); }
  .notes > summary { cursor: pointer; font: 800 1.05rem Brico, system-ui; color: var(--ink); }
  .notes h3 { margin: 1.2em 0 .3em; font: 800 1.1rem Brico, system-ui; color: var(--ink); }
  .notes p, .notes ul, .notes ol { margin: .4em 0; }

  /* the call to action in the middle */
  .mid { max-width: 52rem; padding: 30px; background: var(--sun); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); }
  .mid .note { color: var(--ink); }
  .mid .go { margin-top: 20px; }
  .mid .cta { background: var(--paper2); }
  .mid .week { margin-top: 20px; box-shadow: 4px 4px 0 var(--ink); }

  /* the index's shelves */
  .shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
  .shelf a { display: block; height: 100%; padding: 18px 20px; color: var(--ink); text-decoration: none; background: var(--card); border: 3.5px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--accent), 5px 5px 0 2.5px var(--ink); }
  .shelf a:hover { background: var(--paper2); }
  .shelf b { display: block; font: 800 1.2rem/1.2 Brico, system-ui; }
  .shelf span { display: block; margin-top: .45em; font: 700 .95rem Inst, system-ui; color: var(--ink3); }

  @media (max-width: 760px) {
    .card { min-height: 13rem; padding: 26px 20px; }
    .choices, .ans { padding-left: 0; margin-left: 0; }
    .card-list p { padding-left: 18px; }
    .mid { padding: 24px 20px; }
  }