/* The home page: the lesson scene, the app as it really looks, the close. Tokens are in base.css. */
:root {
  --copy-w: min(620px, 46vw);
  /* One glass for every chip over the map: no blur (it re-blurs a canvas that repaints every frame). */
  --glass: rgba(247, 246, 242, 0.93); --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  --lift: 0 1px 2px rgba(41, 37, 31, 0.06), 0 8px 24px -8px rgba(41, 37, 31, 0.2);
}
@media (prefers-color-scheme: dark) {
  :root {
    --glass: rgba(20, 32, 33, 0.93); --glass-edge: inset 0 0 0 1px rgba(230, 228, 221, 0.08);
    --lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  }
}
section[id] { scroll-margin-top: 72px; }
/* Past the scene the bar gets a ground of its own, so it never sits on the text. */
.bar { transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
html.past-scene .bar, html.is-still .bar { background: color-mix(in oklab, var(--ground) 96%, transparent); box-shadow: 0 1px 0 var(--hair);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body { overflow-x: clip; }

.h1 { margin: 0; font-weight: 500; font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.h2 { margin: 0; font-weight: 500; font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.lede { margin: 0; color: var(--ink-soft); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.55; max-width: 32ch; text-wrap: pretty; }
.note { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* The bar's end: the other language, then the action. */
.bar-end { display: flex; align-items: center; gap: 14px; }
.lang { color: var(--ink-soft); font-size: 0.9375rem; text-decoration: none; padding: 8px 2px; }
@media (hover: hover) and (pointer: fine) { .lang:hover { color: var(--ink); } }
/* The bar's action is quiet (the same glass as the chips), and only appears once the hero's own button has gone. */
.cta--ghost {
  min-height: 36px; padding: 0 16px; border-radius: 18px; font-size: 0.9375rem; font-weight: 500;
  background: var(--glass); box-shadow: var(--glass-edge), var(--lift); color: var(--accent-text);
  opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}
@media (hover: hover) and (pointer: fine) { .cta--ghost:hover { background: var(--surface); } }
html.past-hero .cta--ghost, html.is-still .cta--ghost { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease-out); }

/* ---------------------------------------------------------------- the lesson: one sticky scene */
#lesson { position: relative; height: 500vh; height: 500svh; }
.lesson { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.lesson-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms var(--ease-out); }
.lesson-map.is-ready, html.is-still .lesson-map { opacity: 1; }
.lesson-copy {
  position: absolute; z-index: 5; inset-block: 0; inset-inline-start: 0; width: var(--copy-w);
  display: grid; align-items: center; padding-inline: max(var(--gutter), env(safe-area-inset-right)) 24px;
}
.beat { grid-area: 1 / 1; display: grid; gap: 14px; align-content: center; }
/* Only with the script running are the later blocks held back (lesson.js fades them; opacity only, so a
   screen reader still reads every one). */
html.js .beat:not(:first-child) { opacity: 0; }
.beat .cta { justify-self: start; margin-block-start: 10px; }

/* The lesson clock: one pill with the app's ring, under the map. */
.lesson-clock {
  position: absolute; z-index: 6; inset-block-end: 32px; left: calc((100% - var(--copy-w)) / 2); translate: -50% 0;
  display: flex; align-items: center; gap: 8px; height: 44px; padding-inline: 6px 16px; border-radius: 22px;
  background: var(--glass); box-shadow: var(--glass-edge), var(--lift); opacity: 0;
}
.lesson-clock svg { width: 32px; height: 32px; }
.clock-track { stroke: var(--track); }
.clock-arc { stroke: var(--accent); transition: stroke 400ms ease-in-out; }
.lesson-clock.is-late .clock-arc { stroke: var(--late); }
[dir="ltr"] .lesson-clock { left: calc(var(--copy-w) + (100% - var(--copy-w)) / 2); }
.clock-n { font-weight: 600; font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; min-width: 1.3em; text-align: center; }
.clock-of { font-size: 0.9375rem; color: var(--ink-soft); }

/* Pins over the map: the pickup, the jam. lesson.js places them. */
.pin {
  position: absolute; z-index: 4; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform, opacity;
  padding: 5px 11px; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; white-space: nowrap;
  background: var(--glass); box-shadow: var(--glass-edge), var(--lift);
}
.pin--jam { background: var(--late); color: var(--late-ink); box-shadow: var(--lift); }

/* Portrait phones: the map above, the copy at the bottom (a phone on its side keeps the wide layout). */
@media (max-width: 860px) and (min-height: 501px) {
  .lesson-copy { inset: auto 0 0 0; width: auto; display: grid; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 32px max(var(--gutter), env(safe-area-inset-left)); }
  .beat { align-self: end; align-content: end; gap: 10px; }
  .h1 { font-size: clamp(1.95rem, 8.4vw, 2.4rem); }
  .h2 { font-size: clamp(1.55rem, 6.6vw, 1.95rem); }
  .lede { font-size: 1.0625rem; }
  .lesson-clock, [dir="ltr"] .lesson-clock { inset-block-end: auto; top: 64px; left: 50%; }
}
@media (max-width: 860px) and (max-height: 500px) {
  .h1 { font-size: 1.75rem; } .h2 { font-size: 1.4rem; } .lede { font-size: 1rem; }
  .lesson-clock { inset-block-end: 16px; }
}

/* ---------------------------------------------------------------- the app, as it really looks */
.app { padding: clamp(48px, 7vw, 112px) max(var(--gutter), calc((100vw - 1180px) / 2)) clamp(64px, 8vw, 128px); }
.app > .h2 { margin-block-end: clamp(32px, 5vw, 56px); }
.phones { display: grid; grid-template-columns: repeat(3, 280px); gap: 48px; align-items: start; }
.phone { margin: 0; display: grid; gap: 18px; }
.shot { position: relative; border-radius: 12.5% / 5.75%; overflow: hidden; box-shadow: 0 1px 2px rgba(41, 37, 31, 0.08), 0 30px 60px -30px rgba(41, 37, 31, 0.35); }
.shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(41, 37, 31, 0.16); pointer-events: none; }
.shot img { width: 100%; height: auto; }
.phone figcaption { display: grid; gap: 2px; font-size: 0.9375rem; color: var(--ink-soft); max-width: 28ch; }
.phone figcaption b { color: var(--ink); font-weight: 500; font-size: 1.0625rem; }
.privacy { margin: clamp(32px, 5vw, 56px) 0 0; color: var(--ink-soft); font-size: 1rem; }

/* Rise in, once, as each part reaches the screen. */
html.js .rise { opacity: 0; translate: 0 16px; transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); }
html.js .rise.is-in { opacity: 1; translate: 0 0; }

@media (max-width: 860px) {
  .phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block-end: 12px; scrollbar-width: none; }
  .phones::-webkit-scrollbar { display: none; }
  .phone { scroll-snap-align: center; }
}

/* ---------------------------------------------------------------- the close: the free week, the plans */
.close { padding: clamp(56px, 8vw, 128px) var(--gutter) clamp(56px, 7vw, 112px); }
.close-inner { max-width: 640px; margin-inline: auto; display: grid; gap: 14px; }
.close-inner h2:focus { outline: none; }
.close-icon { width: 64px; aspect-ratio: 1; border-radius: 23%; overflow: hidden; margin-block-end: 10px; }
.close-icon .sweep { stroke-dasharray: 0 100; transition: stroke-dasharray 900ms cubic-bezier(0.33, 1, 0.68, 1) 150ms; }
.close-icon .car { transform-box: view-box; transform-origin: 50% 50%; transform: rotate(-270deg); transition: transform 900ms cubic-bezier(0.33, 1, 0.68, 1) 150ms; }
.close.is-in .close-icon .sweep { stroke-dasharray: 100 100; }
.close.is-in .close-icon .car { transform: none; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 18px 6px; }
.plan { padding: 26px 28px 28px; border-radius: 20px; background: var(--surface); display: grid; gap: 6px; align-content: start; }
.plan-name { margin: 0; font-weight: 500; font-size: 1.0625rem; }
.plan p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
.plan .plan-price { margin-block-end: 6px; color: var(--ink); font-weight: 600; font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan .plan-price small { font-size: 1rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.soon { margin: 14px 0 0; font-size: 1.0625rem; color: var(--ink-soft); }
.soon b { color: var(--ink); font-weight: 500; }

@media (max-width: 860px) {
  .plans { grid-template-columns: none; }
}

/* ---------------------------------------------------------------- reduced motion: everything at rest */
html.is-still #lesson { height: auto; }
html.is-still .lesson { position: relative; height: auto; overflow: visible; display: flex; flex-direction: column; padding-block: 72px 24px; }
html.is-still .lesson-copy { display: contents; }
html.is-still .beat { opacity: 1; visibility: visible; order: 2; padding: 20px var(--gutter); max-width: 40rem; }
html.is-still .beat--hero { order: 0; }
html.is-still .lesson-map { position: relative; order: 1; height: min(56vh, 520px); margin-block: 8px 12px; }
html.is-still .lesson-clock, html.is-still .pin { display: none; }
@media (prefers-reduced-motion: reduce) {
  .rise, .close-icon .sweep, .close-icon .car { transition: none !important; }
  html.js .rise { opacity: 1; translate: none; }
  .close-icon .sweep { stroke-dasharray: 100 100; }
  .close-icon .car { transform: none; }
}