/* JamLand: the static pages around the teacher dashboard.

   The same materials as the app and the dashboard (interval_teach's
   lib/theme.dart): warm wood, lamplight, cream signboards, and the ember
   orange that means "practice". Daytime by default, the village by
   lamplight for anybody whose device is set to dark, as the sign-in page
   does, so crossing from these pages to it is not a change of scenery.

   One face for every letter, Jersey 15, as in the app. It sets small beside
   the faces this layout was drawn in, so font-size-adjust scales it to their
   lowercase height and the layout holds.

   Shapes: anything you press is a full pill; anything that holds content
   is a board, framed in two pixels of wood with a hard shadow under it. */

/* A single weight, declared for every weight so a bold never gets faked. */
@font-face { font-family: "Jersey 15"; font-weight: 100 900; font-display: swap; src: url("fonts/Jersey15-Regular.ttf") format("truetype"); }

:root {
  color-scheme: light dark;

  --font: "Jersey 15", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Daytime: cream signboard paper on a warm ground. On a board: ink
     15.4:1, ink-2 8.3:1, ink-3 6.7:1, accent text 5.6:1. */
  --page: #efe2cc;
  --card: #fff8ec;
  --inset: #f6ead5;
  --hairline: #e6d5ba;
  --edge: #cdb089;
  --ink: #2a1e16;
  --ink-2: #5e4636;
  --ink-3: #6b5446;

  /* The ember: fills and bars in its own color, small words a step deeper
     (5.6:1 on a board, 4.7:1 on the ground). */
  --accent: #d0612f;
  --accent-text: #a9441a;
  --accent-wash: #fbe3d6;
  --on-wash: #9a3e1c;

  /* Ember buttons with the app's dark brown on them, 5.9:1, in both lights. */
  --button: #e8754a;
  --button-hover: #f08a5f;
  --on-button: #2a140b;

  --radius-control: 999px;
  --board: 10px;

  --bezel: #2a1e16;
  --shadow: 0 4px 0 rgb(107 74 48 / 0.2);
  --nav-glass: rgb(239 226 204 / 0.85);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Evening: the app's own wood by lamplight. On a board: ink 14.0:1,
       ink-2 8.1:1, ink-3 6.1:1, accent text 8.2:1. */
    --page: #17100c;
    --card: #271b14;
    --inset: #322419;
    --hairline: #3d2e23;
    --edge: #4f3a2a;
    --ink: #f4e9dc;
    --ink-2: #c4b19c;
    --ink-3: #ad9883;

    --accent: #e8754a;
    --accent-text: #f4a27c;
    --accent-wash: #3a2216;
    --on-wash: #ffb592;

    --button: #e8754a;
    --button-hover: #f08a5f;
    --on-button: #2a140b;

    --bezel: #120c09;
    --shadow: 0 4px 0 rgb(0 0 0 / 0.45);
    --nav-glass: rgb(23 16 12 / 0.85);
  }
}

/* On everything, and important, because each `font:` shorthand resets
   both: Jersey scaled to the old faces' lowercase height, and no faked bold. */
* { font-size-adjust: ex-height 0.48 !important; font-synthesis: none !important; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Flat, and not fixed: Safari and the in-app browser paint a fixed
     background white once you scroll past the first viewport. */
  background: var(--page);
  color: var(--ink);
  /* The reader's own system face for reading and for controls, the way the
     app sets its labels; Nunito is kept for headlines and prices, where the
     rounded figures are the brand. */
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* The hero's second phone hangs off the right edge on a phone screen. Clip
   rather than hidden, so the sticky header above still sticks. */
main { overflow-x: clip; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1em; height: 1em; flex: none; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }

h1, h2, h3, .brand, .price strong, .plan .cost strong {
  font-family: var(--font);
  font-weight: 700;
}
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(42px, 6.2vw, 74px); line-height: 1.04; letter-spacing: 0.005em; }
h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: 0.005em; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: 0.01em; }

p { margin: 0; }
.body { color: var(--ink-2); max-width: 54ch; margin-top: 18px; font-size: 18px; }

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

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nav-glass);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
}
.top.scrolled { border-bottom-color: var(--hairline); }
@media (prefers-reduced-transparency: reduce) { .top { background: var(--page); } }

.top .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 19px; letter-spacing: 0; }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }

.top nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.top nav a { color: var(--ink-2); font-size: 15px; font-weight: 600; white-space: nowrap; }
.top nav a:hover { color: var(--ink); text-decoration: none; }
.top nav a[aria-current="page"] { color: var(--ink); }
.top nav .btn { color: var(--on-button); }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-control);
  border: 0;
  background: var(--button);
  color: var(--on-button);
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { background: var(--button-hover); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn.small { padding: 9px 18px; font-size: 15px; }
/* Under the hero's buttons, for anybody reading on a computer who wants the
   app on their phone. */
.store-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--accent-text); }
.store-link .icon { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.store-link:hover { text-decoration: none; }
.store-link[hidden] { display: none; }

/* The student app, under the dashboard video: a card rather than a link, so
   a teacher looking at the dashboard sees the app that fills it. */
.app-callout {
  display: flex; align-items: center; gap: 14px;
  width: fit-content; max-width: 100%;
  margin-top: 20px; padding: 10px 18px 10px 10px;
  background: var(--card); border-radius: 18px;
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition: box-shadow 0.25s var(--ease);
}
.app-callout:hover { text-decoration: none; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 28px -14px rgb(0 0 0 / 0.25); }
.app-callout img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.app-callout .text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-callout strong { font-size: 16px; font-weight: 600; }
.app-callout .text span { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.app-callout .icon { width: 18px; height: 18px; flex: none; color: var(--accent-text); transition: transform 0.25s var(--ease); }
.app-callout:hover .icon { transform: translateX(3px); }

.app-btn img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
/* One or the other: the button in the hero's row on a computer, the card
   under the dashboard where the row has no room for a third button. */
@media (min-width: 821px) { .screen .app-callout { display: none; } }
@media (max-width: 820px) { .actions .app-btn { display: none; } }
.store-link:hover .icon { transform: translateX(3px); }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}
.btn.ghost:hover { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* Phones ----------------------------------------------------------------- */

/* A real screenshot in a device frame. A light capture on a light page has
   no edge of its own, so the bezel is what gives it one. */
.phone {
  position: relative;
  width: 100%;
  max-width: 290px;
  background: var(--bezel);
  border-radius: 46px;
  padding: 9px;
  box-shadow: var(--shadow);
}
.phone img { border-radius: 37px; width: 100%; aspect-ratio: 1206 / 2620; object-fit: cover; }

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  min-height: calc(100dvh - 68px);
  max-height: 900px;
  padding: 40px 0 56px;
}
.hero .body { font-size: 20px; max-width: 30ch; margin-top: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.stage { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; }
.stage::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent-wash);
}
.stage .phone { max-width: 272px; }
.stage .front { z-index: 2; transform: translateX(-18%) rotate(-3deg); }
.stage .back { position: absolute; z-index: 1; max-width: 238px; transform: translate(42%, -6%) rotate(5deg); }

/* Session tools: a bento of one picture and three tools ------------------ */

section { padding: 112px 0; }

.tools-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 56px;
}
.tile {
  border-radius: 22px;
  background: var(--card);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tile p { color: var(--ink-2); }
/* The icon on its own, in the green: no tinted circle behind it, which is
   the feature card every generated page has. */
.tile .glyph {
  display: grid; place-items: start;
  color: var(--accent-text);
  margin-bottom: 6px;
}
.tile .glyph .icon { width: 24px; height: 24px; }

.tile.session {
  grid-row: span 2;
  background: var(--accent);
  border-color: transparent;
  align-items: center;
  text-align: center;
  color: var(--on-button);
}
/* The app's dark brown on the ember, as on its buttons: 4.5:1 by day,
   5.9:1 in the evening. White on it was 3.9:1 and 3.0:1. */
.tile.session h3 { color: var(--on-button); }
.tile.session p { color: var(--on-button); max-width: 32ch; }
.tile.session .phone {
  margin: 24px auto 0;
  max-width: 210px;
  border-radius: 34px;
  padding: 7px;
  box-shadow: 0 20px 44px -20px rgb(0 0 0 / 0.45);
}
.tile.session .phone img { border-radius: 27px; }

.tile.wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 22px; }
.tile.wide .glyph { margin: 0; }
.tile.wide h3 { margin-bottom: 4px; }

/* Tuner: words and a phone, with the tunings as pills -------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split .phone { margin: 0 auto; }
.split.flip .copy { order: 2; }
.split.flip .phone { order: 1; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding: 0; list-style: none; max-width: 480px; }
.pills li {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--hairline);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.pills li.alt { background: var(--accent-wash); border-color: transparent; color: var(--on-wash); }
.aside { margin-top: 22px; color: var(--ink-3); font-size: 15px; max-width: 46ch; }

/* Two-up: theory and the calendar, each with a phone rising from below --- */

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.peek {
  border-radius: 22px;
  background: var(--card);
  padding: 44px;
  display: flex;
  flex-direction: column;
}
.peek h2 { font-size: clamp(28px, 3vw, 38px); }
.peek .body { font-size: 17px; margin-top: 14px; }
.peek .aside { margin-top: 12px; }
.peek .phone {
  margin: auto auto 0;
  max-width: 230px;
  border-radius: 38px;
  padding: 8px;
}
.peek .copy { margin-bottom: 40px; }
.peek .phone img { border-radius: 30px; }
.peek.tinted { background: var(--accent-wash); border-color: transparent; }
.peek.tinted .body, .peek.tinted .aside, .peek.tinted h2 { color: var(--on-wash); }
@media (prefers-color-scheme: dark) { .peek.tinted h2 { color: var(--ink); } }

/* Privacy: a statement, then where things actually live ------------------ */

.statement { text-align: center; }
.statement h2 { font-size: clamp(38px, 5.6vw, 68px); }
.statement .body { margin: 22px auto 0; max-width: 46ch; font-size: 20px; }

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid var(--hairline);
  text-align: left;
}
.facts .icon { width: 28px; height: 28px; color: var(--accent-text); margin-bottom: 16px; }
.facts h3 { font-size: 18px; margin-bottom: 6px; }
.facts p { color: var(--ink-2); font-size: 16px; }

/* Teachers --------------------------------------------------------------- */

.teachers {
  border-radius: 22px;
  background: var(--card);
  padding: 64px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: 18px;
}
.eyebrow .icon { width: 20px; height: 20px; }
.teachers .actions { margin-top: 30px; }

.prices { display: grid; gap: 12px; }
.price {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 20px;
  align-items: baseline;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--inset);
}
.price strong { font-size: 30px; letter-spacing: 0; line-height: 1; grid-row: span 2; align-self: center; min-width: 4.2ch; }
.price span { align-self: center; }
.price strong small { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.price span { font-weight: 600; }
.price em { font-style: normal; color: var(--ink-2); font-size: 15px; }
.price.featured { background: var(--accent-wash); }
.price.featured span, .price.featured em, .price.featured strong small { color: var(--on-wash); }
.prices .aside { margin: 6px 4px 0; }

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

footer {
  border-top: 1px solid var(--hairline);
  padding: 36px 0 56px;
  display: flex;
  gap: 26px;
  align-items: center;
  color: var(--ink-3);
  font-size: 15px;
}
footer .brand { font-size: 16px; margin-right: auto; }
footer .brand img { width: 26px; height: 26px; border-radius: 7px; }
footer a { color: var(--ink-3); font-weight: 600; }
footer a:hover { color: var(--ink); text-decoration: none; }

/* Support and privacy ---------------------------------------------------- */

.doc { padding: 64px 0 104px; }
.doc h1 { font-size: clamp(40px, 6vw, 60px); }
.doc .lede { font-size: 20px; color: var(--ink-2); margin-top: 16px; }
.doc h2 { font-size: 23px; letter-spacing: 0; margin: 48px 0 10px; }
.doc p, .doc li { color: var(--ink-2); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 20px; margin: 12px 0 0; }
.doc li { margin-bottom: 8px; }

.panel {
  background: var(--accent-wash);
  color: var(--on-wash);
  border-radius: 18px;
  padding: 22px 26px;
  margin: 36px 0;
}
.doc .panel p { color: var(--on-wash); }
.panel a { color: var(--on-wash); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.panel.contact { display: flex; gap: 16px; align-items: flex-start; }
.panel.contact .icon { width: 26px; height: 26px; margin-top: 2px; }

/* The support questions, as a list you open one at a time. */
.faq { margin-top: 40px; display: grid; gap: 10px; }
.faq details {
  background: var(--card);
  border-radius: 18px;
  transition: border-color 0.2s;
}
.faq details[open] { border-color: var(--ink-3); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 20px; height: 20px; color: var(--ink-3); transition: transform 0.3s var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding: 0 24px 22px; }
.faq .answer p { color: var(--ink-2); }
.faq .answer p + p { margin-top: 10px; }

/* The teacher page --------------------------------------------------------
   Built from the same parts as the app page, with the few things only it
   needs: the dashboard capture under the hero, the four steps, three phones
   side by side, and the plans. */

.teach-hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  max-height: none;
  padding: 64px 0 0;
  gap: 52px;
}
/* Two sentences, one line each, at desktop widths. */
.teach-hero h1 { font-size: clamp(36px, 5.2vw, 66px); }
.teach-hero h1 span { display: block; }
.teach-hero .body { max-width: 34ch; }

/* The demo studio, shown whole: a capture of it, or the same screen in
   motion (see .motion below).
   Held to 880px and centered on a desktop: across the full page width it
   was bigger than the dashboard itself looks on a laptop, and it pushed
   everything under the hero off the first screen. */
.screen { margin: 0 auto; max-width: 880px; width: 100%; }
.screen picture img, .screen video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
.screen figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.screen .motion { position: relative; }
.screen .motion[hidden] { display: none; }
/* Stop and start. Anything that moves for more than five seconds has to be
   stoppable; small and quiet so it does not compete with the dashboard. */
.motion-toggle {
  position: absolute; right: 14px; bottom: 14px;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgb(0 0 0 / 0.46); color: #fff;
  opacity: 0.75; transition: opacity 0.2s var(--ease);
}
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; }
.motion-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.motion-toggle .play { display: none; }
.motion.paused .motion-toggle .play { display: block; }
.motion.paused .motion-toggle .pause { display: none; }
/* Each screenshot comes in a light and a dark capture, and the page shows
   the one that matches the reader's setting. */
picture { display: block; }
picture[hidden] { display: none; }

.why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr;
  gap: 16px;
  margin-top: 56px;
}
.tile.student {
  grid-row: span 2;
  background: var(--accent-wash);
  border-color: transparent;
  padding: 32px;
  justify-content: center;
}
.tile.student .phone {
  margin: 0 auto;
  max-width: 210px;
  border-radius: 34px;
  padding: 7px;
}
.tile.student .phone img { border-radius: 27px; }
.tile.tinted { background: var(--accent-wash); }

.how { background: var(--card); }
.steps {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  counter-reset: step;
}
.steps li { position: relative; padding-top: 30px; border-top: 2px solid var(--hairline); }
/* The line fills in across the four, so the row reads left to right. */
.steps li::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 36%;
  background: var(--accent);
}
.steps h3 { font-size: 26px; letter-spacing: 0; margin-bottom: 8px; }
.steps p { color: var(--ink-2); }

.their-side { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; padding: 112px 0; }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 600; }
.more .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.more:hover { text-decoration: none; }
.more:hover .icon { transform: translateX(3px); }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.phones figure { margin: 0; }
.phones figure:nth-child(2) { margin-top: 48px; }
.phones .phone { max-width: 220px; margin: 0 auto; border-radius: 36px; padding: 7px; }
.phones .phone img { border-radius: 29px; }
.phones figcaption { margin-top: 18px; font-size: 15px; color: var(--ink-2); text-align: center; }
.phones figcaption strong { display: block; color: var(--ink); font-size: 16px; }

.pricing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* A segmented control, shaped like the iPhone's. */
.period {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--inset);
}
.period button {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.period button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; align-items: start; }
.plan {
  border-radius: 22px;
  background: var(--card);
  padding: 34px;
  display: flex;
  flex-direction: column;
}
.plan.featured { border: 2px solid var(--accent); }
.plan .for { color: var(--ink-2); margin-top: 6px; min-height: 3.2em; }
.plan .cost { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; }
.plan .cost strong { font-size: 48px; letter-spacing: 0; line-height: 1; }
.plan .cost span { color: var(--ink-3); font-weight: 600; }
.plan .cost s { margin-left: 6px; color: var(--ink-3); font-size: 18px; }
.plans[data-period-current="monthly"] [data-yearly-only] { display: none; }
.plan .billed { font-size: 14px; color: var(--ink-3); margin-top: 8px; min-height: 1.6em; }
.plan .btn { justify-content: center; margin-top: 24px; }
.plan ul { list-style: none; padding: 24px 0 0; margin: 24px 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 10px; }
.plan li { color: var(--ink-2); padding-left: 28px; position: relative; }
.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.plans-note { margin-top: 20px; }

.wrap.narrow > h2 { margin-top: 8px; }

.finish {
  border-radius: 28px;
  background: var(--accent-wash);
  padding: 80px 32px;
  text-align: center;
}
.finish h2 { color: var(--on-wash); font-size: clamp(34px, 4.6vw, 56px); }
@media (prefers-color-scheme: dark) { .finish h2 { color: var(--ink); } }
.finish .body { margin: 16px auto 0; color: var(--on-wash); }
.finish .actions { justify-content: center; }
.finish .btn.ghost { box-shadow: inset 0 0 0 1.5px var(--on-wash); color: var(--on-wash); }

@media (max-width: 1000px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .tile.student { grid-row: auto; grid-column: span 2; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .their-side { grid-template-columns: 1fr; gap: 48px; }
  .plans { grid-template-columns: 1fr; max-width: 520px; }
  .plan .for, .plan .billed { min-height: 0; }
}

@media (max-width: 820px) {
  .screen picture img, .screen video { border-radius: 14px; }
  .teach-hero { padding-top: 40px; gap: 40px; }
  .their-side { padding: 80px 0; }
  .phones { gap: 10px; }
  .phones figure:nth-child(2) { margin-top: 28px; }
  .phones .phone { border-radius: 24px; padding: 5px; }
  .phones .phone img { border-radius: 19px; }
  .phones figcaption { font-size: 13px; }
  .phones figcaption strong { font-size: 14px; }
}

@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr; }
  .tile.student { grid-column: auto; padding: 28px; }
  .steps { grid-template-columns: 1fr; }
  /* Two side by side and the third centered under them, all whole. */
  .phones { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .phones figure:nth-child(2) { margin-top: 0; }
  .phones figure:nth-child(3) { grid-column: span 2; justify-self: center; width: calc(50% - 5px); }
  .plan { padding: 28px 24px; }
  .finish { padding: 56px 22px; }
  .top nav { gap: 14px; }
}

/* Motion ----------------------------------------------------------------- */

/* Sections rise in once, as they arrive, so the page reads in the order it
   was written. Nothing moves for anybody who has asked for less motion, and
   nothing is hidden at all until the script has said it is running. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: 0.08s; }
  .js .reveal.d2 { transition-delay: 0.16s; }

  .hero .copy > * { animation: rise 0.9s var(--ease) both; }
  .hero .copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero .copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero .copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero .copy > :nth-child(5) { animation-delay: 0.32s; }
  .stage .front { animation: front-in 1.1s var(--ease) 0.15s both; }
  .stage .back { animation: back-in 1.1s var(--ease) 0.3s both; }

  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  @keyframes front-in { from { opacity: 0; transform: translateX(-18%) translateY(40px) rotate(-3deg); } }
  @keyframes back-in { from { opacity: 0; transform: translate(42%, 6%) rotate(9deg); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn .icon, .faq summary .icon { transition: none; }
}

/* Narrow screens --------------------------------------------------------- */

@media (max-width: 1000px) {
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .tile.session { grid-row: auto; grid-column: span 2; }
  .tile.wide { grid-column: span 2; }
  .facts { grid-template-columns: 1fr 1fr; }
  .teachers { grid-template-columns: 1fr; gap: 40px; padding: 48px; }
}

@media (max-width: 820px) {
  .top nav .secondary { display: none; }
  .top nav { gap: 18px; }

  .hero { grid-template-columns: 1fr; min-height: 0; max-height: none; padding: 40px 0 24px; gap: 56px; }
  .stage { padding: 10px 0 20px; }
  /* Both phones inside the screen's edges, tilt included. */
  .stage .phone { max-width: 190px; }
  .stage .front { transform: translateX(-24%) rotate(-3deg); }
  .stage .back { max-width: 160px; transform: translate(24%, -4%) rotate(5deg); }

  section { padding: 80px 0; }

  .split { grid-template-columns: 1fr; gap: 48px; }
  .split.flip .copy, .split.flip .phone { order: initial; }
  .split .phone { max-width: 260px; }

  .two-up { grid-template-columns: 1fr; }
  .peek { padding: 34px 26px; }
  .peek .phone { max-width: 220px; }

  footer { flex-wrap: wrap; gap: 14px 22px; }
  footer .brand { width: 100%; }
}

@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tile.session, .tile.wide { grid-column: auto; }
  .tile.wide { flex-direction: column; align-items: flex-start; }
  .tile { padding: 26px; }
  .facts { grid-template-columns: 1fr; gap: 30px; margin-top: 56px; }
  .teachers { padding: 32px 22px; border-radius: 24px; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .top nav .btn { padding: 8px 14px; font-size: 14px; }
}

/* The narrowest phones (320 points). The header keeps "The app" now, and at
   this width the four items ran off the right edge. */
@media (max-width: 380px) {
  .top nav { gap: 10px; }
  .top nav a { font-size: 14px; }
  .top nav .btn.small { padding: 8px 10px; font-size: 14px; }
  .brand { font-size: 17px; gap: 8px; }
}

/* JamLand materials -------------------------------------------------------
   Last in the file on purpose, so it wins over the shapes drawn above,
   phone sizes included: every board on these pages framed the way the app
   frames its panels, in two pixels of wood with a hard shadow under it. */

.app-callout, .tile, .peek, .teachers, .price, .panel, .faq details, .plan, .finish {
  border: 2px solid var(--edge);
  border-radius: var(--board);
  box-shadow: var(--shadow);
}
.app-callout:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.app-callout { transition: transform 0.2s var(--ease); }
@media (prefers-reduced-motion: reduce) { .app-callout:hover { transform: none; } }

/* The plan worth having, and the tinted boards, framed in ember. */
.plan.featured, .price.featured, .tile.tinted, .peek.tinted { border-color: var(--accent); }

/* The dashboard picture is a board too. */
.screen picture img, .screen video {
  border-radius: var(--board);
  border: 2px solid var(--edge);
  box-shadow: var(--shadow);
}

/* The how-it-works band: a strip of board across the page. */
.how { border-top: 2px solid var(--edge); border-bottom: 2px solid var(--edge); }

/* Pressed things are pills, and the segmented control with them. */
.period { border-radius: 999px; }
.period button { border-radius: 999px; }

/* JamLand's wordmark where the name used to be written. */
.brand .wordmark { width: auto; height: 60px; border-radius: 0; }
footer .brand .wordmark { height: 48px; }
@media (max-width: 640px) { .brand .wordmark { height: 50px; } }

/* ---------- jamland.app: the same floating bar and feel as the app's page ---------- */
.top {
  position: sticky; top: 14px; z-index: 20;
  width: min(calc(100% - 32px), 1120px); margin: 14px auto 0;
  border-radius: 999px; border: 0;
  box-shadow: inset 0 0 0 1px var(--hairline), 0 18px 40px -22px rgba(42, 30, 22, 0.45);
  transition: box-shadow 0.4s var(--ease), background-color 0.4s var(--ease);
}
.top.scrolled { box-shadow: inset 0 0 0 1px var(--hairline), 0 22px 48px -20px rgba(42, 30, 22, 0.55); }
.top .wrap { max-width: none; height: 64px; padding: 0 8px 0 18px; }
.top .brand .wordmark { height: 52px; width: auto; transition: transform 0.4s var(--ease); }
.top .brand:hover .wordmark { transform: rotate(-2deg) scale(1.03); }
.top nav a:not(.btn) { padding: 10px 12px; border-radius: 999px; transition: color 0.25s var(--ease), background-color 0.25s var(--ease); }
.top nav a:not(.btn):hover { background: var(--card); }
@media (max-width: 640px) { .top .brand .wordmark { height: 44px; } }

/* Everything you can press or point at answers. */
.btn { transition: background-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.tile { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.tile:hover { transform: translateY(-4px); }
.tile .phone, .split .phone, .phones .phone { transition: transform 0.9s var(--ease); }
.tile:hover .phone, .split:hover .phone { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .tile:hover, .tile:hover .phone, .split:hover .phone { transform: none; }
}