/* ==========================================================================
   NIGHT SESSION: homepage redesign preview (design/night-session, 26 Sep 2026).
   Loaded by index.html only and scoped to body.night.

   Idea: the page is a floodlit pitch at 9pm. Structure comes from the pitch (chalk lines, a
   touchline, a scoreboard) instead of a stack of identical cards. Headlines speak in Archivo 800,
   sentence case. Anton is kept for numerals only: step numbers, band ranges, prices, counts.
   One bold move: the cream Coach Ellis panel. Gold fills one button, Try Pro, plus the user
   bubble inside the recreated app chat, where it is the app's own colour. The hero Ellis card
   carries a gold rim and glow as light, not fill.
   ========================================================================== */

body.night {
  --pitch: #16231B;
  --turf: #22342A;
  --turf-edge: rgba(245, 245, 240, 0.42);
  --chalk-line: rgba(245, 245, 240, 0.55);
  --rule: rgba(245, 245, 240, 0.28);
  --muted: #A7B0A9;
  --cream: #EEE9DC;
  --ink: #0F1712;
  --ink-soft: #3B463F;
  --chat: #111B15;
  --chat-bubble: #1B2A21;
}

/* ---------- Type: two voices, one scale ---------- */
.night h1,
.night h2 {
  font-family: var(--body-font);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-shadow: none;
}

.night h1 {
  font-size: clamp(2.7rem, 6.2vw, 4.6rem);
}

.night main h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  margin-bottom: 1.4rem;
}

.night main h3 {
  font-family: var(--body-font);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.3rem;
  line-height: 1.25;
}

.night main p,
.night main li {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.night .nowrap {
  white-space: nowrap;
}

.night .shot-note,
.night figure > figcaption {
  color: var(--muted);
  font-size: 0.875rem;
}

.night .glass-hover:hover {
  transform: none;
  box-shadow: none;
}

.night main > .band {
  padding-top: 7rem;
}

/* ---------- Hero: the payoff, not the welcome screen ---------- */
.night .hero .kicker {
  font-family: var(--body-font);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(245, 245, 240, 0.78);
  text-shadow: 0 1px 10px rgba(15, 23, 18, 0.9);
}

.night .hero .sub {
  font-size: 1.25rem;
  line-height: 1.55;
  max-width: 32rem;
}

.night .cta-secondary {
  background: rgba(15, 23, 18, 0.55);
  border-color: rgba(245, 245, 240, 0.45);
  min-height: 48px;
}

.night .cta-secondary:hover {
  border-color: var(--chalk);
}

.night .facts {
  list-style: none;
  padding: 0;
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
}

.night .facts li {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(245, 245, 240, 0.82);
  padding-left: 1.1rem;
  position: relative;
}

/* A short chalk dash, like a line marking, not a bullet. */
.night .facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6rem;
  border-top: 2px solid var(--chalk-line);
}

.night .facts a {
  color: inherit;
  text-underline-offset: 3px;
  display: inline-block;
  padding-block: 0.3rem;
  margin-block: -0.3rem;
}

.night .hero-shot {
  --pw: clamp(280px, 26vw, 340px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.night .hero-shot::before {
  content: "";
  position: absolute;
  width: 140%;
  aspect-ratio: 1;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(245, 245, 240, 0.1), rgba(245, 245, 240, 0.03) 45%, transparent 72%);
  pointer-events: none;
}

/* Show the top of the result (score, band, part scores, first fix) and let the phone sink
   into the pitch. The clip is on the wrapper so the Ellis card can sit outside it. */
.night .hero-phone {
  width: var(--pw);
  aspect-ratio: 560 / 880;
  overflow: hidden;
  padding: 4px 4px 0;
  margin: -4px -4px 0;
  box-sizing: content-box;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
}

body.night.home .hero .phone {
  width: 100%;
  max-width: none;
}

/* The card sits below the part scores (setup, body line, finish, consistency), over the part
   of the phone that is already fading into the pitch. Those four numbers are the proof that the
   82 is measured, so nothing covers them. Offsets are in phone widths so it holds at every size. */
.night .ellis-card {
  position: absolute;
  left: -12%;
  top: calc(var(--pw) * 1.3);
  width: min(300px, 88%);
  z-index: 2;
}

/* The crop is pure card fill, so the one edge is drawn here: a warm rim in Ellis's gold, a soft
   floodlight glow, and a deep drop so it sits clearly above the phone. */
.night .ellis-card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #142922;
  border: 1px solid rgba(224, 169, 62, 0.55);
  box-shadow:
    0 0 0 5px rgba(224, 169, 62, 0.07),
    0 0 44px rgba(224, 169, 62, 0.22),
    0 32px 64px rgba(0, 0, 0, 0.6);
}

.night .ellis-card img {
  display: block;
  width: 100%;
  height: auto;
}

.night .hero-shot .shot-note {
  margin-top: 3rem;
  position: relative;
}

/* ---------- Problem: one statement, three pains on chalk lines ---------- */
.night .pains .statement {
  max-width: 16ch;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
}

.night .pain-list,
.night .parent-list {
  list-style: none;
  padding: 0;
  margin: 2.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.night .pain-list li,
.night .parent-list li {
  border-top: 2px solid var(--chalk-line);
  padding-top: 1.2rem;
}

.night .pain-list p,
.night .parent-list p {
  color: var(--muted);
  margin-top: 0.5rem;
}

.night .parent-list a {
  color: var(--chalk);
  text-underline-offset: 3px;
  display: inline-block;
  padding-block: 0.25rem;
}

.night .pains .bridge {
  margin-top: 2.6rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--chalk);
  max-width: 40rem;
}

/* ---------- How it works: five steps along a touchline ---------- */
/* Gold Anton numerals joined by chalk segments. Each segment runs from its numeral to the next
   one, so nothing needs a painted patch behind the number to hide a line under it. */
.night .touchline {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.6rem;
  view-timeline-name: --steps;
}

.night .touchline li {
  position: relative;
}

.night .step-num {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-right: -1.6rem;
  font-family: var(--display);
  font-size: 4.4rem;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 28px rgba(224, 169, 62, 0.35);
}

.night .step-num::after {
  content: "";
  flex: 1;
  border-top: 2px dashed var(--chalk-line);
  margin-right: 0.9rem;
}

.night .touchline li:last-child .step-num::after {
  margin-right: 1.6rem;
  border-top-style: dotted;
  opacity: 0.6;
}

.night .touchline h3 {
  margin-top: 1rem;
}

.night .touchline p {
  color: var(--muted);
  font-size: 1rem;
  margin-top: 0.4rem;
}

/* The page's one piece of motion: the segments chalk in one after another, 1 to 5, as the steps
   scroll into view. Scroll-driven, no script; without support the lines are simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .night .step-num::after {
      animation: chalk-across linear both;
      animation-timeline: --steps;
    }

    .night .touchline li:nth-child(1) .step-num::after { animation-range: entry 30% entry 55%; }
    .night .touchline li:nth-child(2) .step-num::after { animation-range: entry 45% entry 70%; }
    .night .touchline li:nth-child(3) .step-num::after { animation-range: entry 60% entry 85%; }
    .night .touchline li:nth-child(4) .step-num::after { animation-range: entry 75% entry 100%; }
    .night .touchline li:nth-child(5) .step-num::after { animation-range: entry 90% cover 40%; }
  }
}

@keyframes chalk-across {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes chalk-down {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

.night .rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 4rem;
  align-items: start;
}

.night .rail figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.night .rail figcaption {
  margin-top: 1.1rem;
  color: var(--chalk);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
}

.night .phone.mid {
  width: min(250px, 72vw);
}

.night .steps-band .shot-note {
  margin-top: 1.4rem;
  text-align: center;
}

/* ---------- Coach Ellis: the one cream panel ---------- */
.night .ellis-panel {
  background: var(--cream);
  color: var(--ink);
  margin-top: 7rem;
  padding: 6rem 0;
  position: relative;
  z-index: 1;
}

.night .ellis-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 4.5rem;
  align-items: center;
}

.night .ellis-panel h2 {
  color: var(--ink);
  max-width: 14ch;
}

.night .ellis-panel .ellis-lead {
  color: var(--ink);
  font-size: 1.2rem;
  max-width: 30rem;
}

.night .ellis-panel .pro-line {
  color: var(--ink);
  font-weight: 700;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--ink);
  max-width: 30rem;
}

.night .panel-cta {
  margin-top: 1.6rem;
}

.night .ellis-panel :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.night .ellis-chat {
  margin: 0;
}

/* A recreation of the app's chat screen, carrying a real reply word for word, so it reads at
   any width. The screenshot it came from is too small to read on a phone. */
.night .chat-window {
  background: var(--chat);
  color: var(--chalk);
  border-radius: 30px;
  padding: 1.3rem 1.3rem 1.5rem;
  box-shadow: 0 40px 80px rgba(15, 23, 18, 0.28), 0 2px 0 rgba(15, 23, 18, 0.2);
}

.night .chat-head {
  text-align: center;
  line-height: 1.25;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(245, 245, 240, 0.12);
}

.night .chat-head strong {
  display: block;
  font-size: 1.05rem;
}

.night .chat-head span {
  color: var(--muted);
  font-size: 0.85rem;
}

.night .chat-context {
  display: table;
  margin: 1.1rem auto;
  padding: 0.3rem 0.9rem;
  border: 1px solid rgba(245, 245, 240, 0.28);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.875rem !important;
}

.night .bubble {
  margin: 0;
  border-radius: 20px;
}

.night .bubble.you {
  margin-left: auto;
  width: fit-content;
  max-width: 78%;
  padding: 0.8rem 1.05rem;
  background: var(--gold);
  color: #14100a;
  border-bottom-right-radius: 6px;
  font-weight: 500;
}

.night .bubble.ellis {
  margin-top: 0.8rem;
  max-width: 92%;
  padding: 1rem 1.15rem;
  background: var(--chat-bubble);
  border: 1px solid rgba(245, 245, 240, 0.12);
  border-bottom-left-radius: 6px;
}

.night .bubble.ellis p {
  font-size: 1rem;
}

.night .bubble.ellis p + p {
  margin-top: 0.8rem;
}

.night .ellis-chat figcaption {
  color: var(--ink-soft);
  margin-top: 1.2rem;
  font-size: 0.95rem;
  max-width: 34rem;
}

/* ---------- Proof ---------- */
.night .proof {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 3.5rem;
  align-items: center;
}

.night .proof-copy p {
  max-width: 34rem;
}

.night .proof-copy p + p {
  margin-top: 1rem;
  color: var(--muted);
}

.night .proof-phone {
  display: flex;
  justify-content: center;
}

/* The reject screen says everything in its top half; the rest is empty space above two
   buttons. Show the top and let it sink into the pitch, like the hero phone. */
.night .sink {
  overflow: hidden;
  aspect-ratio: 560 / 760;
  padding: 4px 4px 0;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 99%);
}

.night .faq-reviewed a {
  color: var(--chalk);
  text-underline-offset: 3px;
}

/* ---------- Progress: the bands climb ---------- */
.night .progress-copy {
  max-width: 40rem;
}

.night .progress-copy p {
  color: var(--muted);
}

.night .band-strip {
  list-style: none;
  padding: 0;
  margin: 2.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.night .band-strip li {
  padding: 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
  border-radius: 10px 10px 0 0;
}

.night .band-strip li:nth-child(1) { background: #1C2B21; height: 7rem; }
.night .band-strip li:nth-child(2) { background: #2A3F31; height: 8.75rem; }
.night .band-strip li:nth-child(3) { background: #3D5946; height: 10.5rem; }
.night .band-strip li:nth-child(4) { background: #9FB7A5; color: var(--ink); height: 12.25rem; }
.night .band-strip li:nth-child(5) { background: var(--cream); color: var(--ink); height: 14rem; }

.night .band-strip .range {
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

.night .band-strip .name {
  font-weight: 700;
  font-size: 1rem;
}

/* ---------- Parents ---------- */
.night .parents h2 {
  max-width: 18ch;
}

/* ---------- Pricing: a touchline split, not SaaS tiers ---------- */
.night .prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.4rem;
  max-width: 58rem;
}

.night .price-col {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 3rem 0.4rem 0;
}

.night .price-col.pro {
  padding: 0.4rem 0 0.4rem 3rem;
  border-left: 2px solid var(--chalk-line);
}

.night .price-col h3 {
  font-size: 1.4rem;
}

.night .price-col .amount {
  font-family: var(--display);
  font-size: 4.2rem;
  line-height: 1;
  margin-top: 0.9rem;
}

.night .price-col .amount span {
  font-family: var(--body-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--muted);
}

.night .price-col .amount-note {
  color: var(--muted);
  margin-top: 0.5rem;
  min-height: 3.2em;
}

.night .price-col ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 2rem;
}

.night .price-col li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}

.night .price-col li:last-child {
  border-bottom: 1px solid var(--rule);
}

.night .price-btn {
  margin-top: auto;
  border-color: rgba(245, 245, 240, 0.5);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.night .price-btn:hover {
  border-color: var(--chalk);
}

.night .price-col .trial-note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  /* Takes no net height, so the Pro button stays level with the Free one. */
  margin: 0.6rem 0 -1.86rem;
  text-align: center;
}

.night .clubs {
  margin-top: 2.6rem;
  color: var(--muted);
  max-width: 44rem;
}

.night .clubs a {
  color: var(--chalk);
  font-weight: 600;
  text-underline-offset: 3px;
}

.night .founder-note {
  margin-top: 3.6rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--chalk-line);
  max-width: 40rem;
}

.night .founder-note > p:first-child {
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 500;
}

.night .founder-note .signed {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
}

.night .founder-note .signed img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.night .founder-note .signed a {
  color: var(--chalk);
  font-weight: 600;
  text-decoration: none;
  padding-block: 0.4rem;
}

.night .founder-note .signed a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- FAQ: one column on chalk rules ---------- */
.night .faq-list {
  display: block;
  max-width: 46rem;
  margin-top: 1rem;
}

.night .faq-item {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.night .faq-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.night .faq-item summary {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
}

.night .faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-52%);
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
}

.night .faq-item[open] summary::after {
  content: "\2212";
}

.night .faq-item p {
  color: rgba(245, 245, 240, 0.86);
  padding: 0 2.5rem 1.4rem 0;
}

/* ---------- Guides: a drill board ---------- */
.night .board-head p {
  color: var(--muted);
  margin-top: -0.6rem;
}

.night .board {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem;
}

.night .board li {
  border-top: 1px solid var(--rule);
}

.night .board li:nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--rule);
}

.night .board a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.1rem 1rem;
  padding: 1rem 0;
  color: var(--chalk);
  text-decoration: none;
}

.night .board-name {
  font-weight: 700;
  font-size: 1.2rem;
}

.night .board-status {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.9rem;
}

.night .board-count {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  text-align: right;
}

.night .board-count small {
  display: block;
  font-family: var(--body-font);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.2rem;
}

.night .board a:hover .board-name,
.night .board a:focus-visible .board-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Close ---------- */
.night .close h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
}

.night #updates-form .cta {
  border-color: rgba(245, 245, 240, 0.5);
  box-shadow: none;
  min-height: 48px;
}

.night #updates-form .cta:hover,
.night #updates-form .cta:focus-visible {
  border-color: var(--chalk);
}

/* The updates form is the page's second ask. Closed, it is one line under the badge. */
.night .updates {
  max-width: 29rem;
  margin: 2.6rem auto 0;
  padding-top: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.night .updates summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2.4rem 1.1rem 0;
  position: relative;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: left;
}

.night .updates summary::-webkit-details-marker {
  display: none;
}

.night .updates summary span {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

.night .updates summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-52%);
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
}

.night .updates[open] summary::after {
  content: "\2212";
}

.night .updates > .quiet {
  text-align: left;
  margin: 0 0 1rem;
}

.night .updates .signup {
  background: none;
  border: 0;
  padding: 0 0 1.4rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.night .signup input[type="email"] {
  border: 1px solid #7E8A82;
  min-height: 48px;
}

.night .segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1rem 0;
  border: 1px solid #7E8A82;
  border-radius: 12px;
  overflow: hidden;
}

.night .segmented legend {
  margin-bottom: 0.4rem;
  padding: 0;
}

/* The legend is not a grid item, so the three labels fill the three columns. The outline is
   drawn on the labels, because a border on the fieldset would run through the legend. */
.night .field-row.segmented {
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.night .segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 46px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border-block: 1px solid #7E8A82;
  border-right: 1px solid #7E8A82;
}

.night .segmented label:nth-of-type(1) {
  border-left: 1px solid #7E8A82;
  border-radius: 12px 0 0 12px;
}

.night .segmented label:nth-of-type(3) {
  border-radius: 0 12px 12px 0;
}

.night .segmented label:has(input:checked) {
  background: rgba(245, 245, 240, 0.12);
}

.night .segmented input {
  accent-color: var(--chalk);
}

.night .signup .quiet a {
  display: inline-block;
  padding-block: 0.35rem;
  margin-block: -0.35rem;
}

.night .site-footer a {
  display: inline-block;
  padding-block: 0.4rem;
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 980px) {
  .night .touchline {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .night .touchline li {
    padding-left: 4.4rem;
  }

  .night .step-num {
    position: absolute;
    left: 0;
    top: -0.35rem;
    width: 2.8rem;
    justify-content: center;
    margin: 0;
    font-size: 3rem;
  }

  .night .step-num::after {
    content: none;
  }

  /* The segment runs down from under this numeral to the next one. */
  .night .touchline li::before {
    content: "";
    position: absolute;
    left: 1.4rem;
    top: 3.1rem;
    bottom: -1.5rem;
    border-left: 2px dashed var(--chalk-line);
  }

  .night .touchline li:last-child::before {
    content: none;
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .night .touchline li::before {
        animation: chalk-down linear both;
        animation-timeline: view();
        animation-range: entry 60% cover 50%;
      }
    }
  }

  .night .touchline h3 {
    margin-top: 0;
  }
}

@media (max-width: 840px) {
  .night main > .band {
    padding-top: 4rem;
  }

  body.night .hero-copy,
  .night .proof-copy,
  .night .progress-copy {
    text-align: left;
  }

  .night .hero .sub {
    font-size: 1.1rem;
    margin-left: 0;
    margin-right: 0;
  }

  .night .hero-ctas {
    justify-content: flex-start;
  }

  .night .hero-shot {
    --pw: min(300px, 74vw);
  }

  .night .hero-shot .shot-note {
    margin-top: 4.6rem;
  }

  .night .hero-phone {
    aspect-ratio: 560 / 820;
  }

  .night .ellis-card {
    left: auto;
    right: 50%;
    transform: translateX(62%);
    top: calc(var(--pw) * 1.3);
    width: min(300px, 84vw);
  }

  .night .pain-list,
  .night .parent-list,
  .night .ellis-grid,
  .night .proof,
  .night .prices {
    grid-template-columns: 1fr;
  }

  .night .pain-list,
  .night .parent-list {
    gap: 1.8rem;
  }

  .night .board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.2rem;
  }

  .night .board a {
    padding: 0.85rem 0;
  }

  .night .board-name {
    font-size: 1.02rem;
    line-height: 1.25;
  }

  .night .board-status {
    font-size: 0.8rem;
  }

  .night .board-count {
    font-size: 1.8rem;
  }

  .night .price-col ul {
    margin: 1rem 0 1.4rem;
  }

  .night .price-col li {
    padding: 0.5rem 0;
  }

  .night .founder-note {
    margin-top: 2.6rem;
  }

  .night .founder-note > p:first-child {
    font-size: 1.15rem;
  }

  .night .bubble.ellis p {
    font-size: 0.95rem;
  }

  .night .ellis-panel {
    padding: 4.5rem 0;
    margin-top: 4.5rem;
  }

  .night .ellis-grid {
    gap: 2.6rem;
  }

  .night .chat-window {
    padding: 1rem 0.9rem 1.2rem;
    border-radius: 24px;
  }

  .night .bubble.ellis {
    max-width: 100%;
  }

  .night .proof {
    gap: 2.4rem;
  }

  .night .proof-phone .phone {
    width: min(240px, 62vw);
  }

  .night .band-strip {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* On a phone the climb runs left to right: each band a little wider than the last. */
  .night .band-strip li,
  .night .band-strip li:nth-child(n) {
    height: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    border-radius: 0 10px 10px 0;
    padding: 0.8rem 1rem;
  }

  .night .band-strip li:nth-child(1) { width: 60%; }
  .night .band-strip li:nth-child(2) { width: 70%; }
  .night .band-strip li:nth-child(3) { width: 80%; }
  .night .band-strip li:nth-child(4) { width: 90%; }
  .night .band-strip li:nth-child(5) { width: 100%; }

  .night .band-strip .range {
    font-size: 1.6rem;
  }

  .night .price-col,
  .night .price-col.pro {
    padding: 0;
  }

  .night .price-col.pro {
    border-left: 0;
    border-top: 2px solid var(--chalk-line);
    margin-top: 2.6rem;
    padding-top: 2.2rem;
  }

  .night .price-col .amount-note {
    min-height: 0;
  }

  .night .price-col .trial-note {
    margin-bottom: 0;
  }

  .night .panel-cta {
    display: block;
  }
}

/* The rail: three phones stacked were 2,100px on a phone. Swipe instead, with the next one
   peeking in so it is obvious there is more. */
@media (max-width: 768px) {
  .night .rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 3rem -1.25rem 0;
    padding: 0 1.25rem 0.5rem;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }

  .night .rail::-webkit-scrollbar {
    display: none;
  }

  .night .rail figure {
    flex: 0 0 68%;
    scroll-snap-align: center;
  }

  .night .rail .phone.mid {
    width: 100%;
  }
}

/* The hero play button only appears once the loop exists. The old kit gave it a backdrop blur;
   a solid disc keeps it off the glass look. */
.night .play-btn {
  background: rgba(15, 23, 18, 0.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}