/* The demo page: a guided tour of Sprout.

   On the left, on the same edge as the logo: the heading and why Kenji went
   with Sprout. On the right, out to the edge of Sign up: the film, as large as
   the screen allows because the app's own text in it has to be read, with the
   tour's parts under it. The whole thing sits in the middle of the screen
   below the top bar. */

.tour-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.tour {
  --tour-strip: 100px;
  --tour-film-height: calc(100svh - 101px - 64px - var(--tour-strip));
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 32px var(--band-x);
  display: grid;
  grid-template-columns: clamp(320px, 25vw, 440px) minmax(0, 1fr);
  column-gap: clamp(32px, 3.2vw, 64px);
  align-content: center;
}

.tour-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tour-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tour-copy .eyebrow { margin: 0; }

.tour-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 2.6vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.tour-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--body-muted);
  text-wrap: pretty;
}

/* ---------- why Kenji went with Sprout ---------- */

.tour-why {
  padding-top: 22px;
  border-top: 1px solid var(--border-medium);
}

.tour-why-title {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body-muted);
}

.tour-why ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tour-why li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.tour-why-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--btn-radius);
  display: grid;
  place-items: center;
  background: var(--cream-deep);
  color: var(--sage);
}

.tour-why-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tour-why-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--body-muted);
  text-wrap: pretty;
}

.tour-why-text strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
}

.tour-why li:first-child .tour-why-icon { background: var(--sage); color: var(--cream); }

/* ---------- the film and its parts ---------- */

.tour-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.tour-film {
  width: min(100%, var(--tour-film-height) * 16 / 9);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--dark);
  box-shadow: 0 20px 44px rgba(31, 42, 26, 0.14);
}

.tour-film .player { border-radius: 16px; }

.tour-chapters {
  container-type: inline-size;
  width: min(100%, var(--tour-film-height) * 16 / 9);
  margin-top: 14px;
  padding: 10px 12px 10px 20px;
  display: flex;
  align-items: center;
  gap: 6px 14px;
  border-radius: 14px;
  background: var(--dark);
  box-shadow: 0 12px 28px rgba(31, 42, 26, 0.16);
}

.tour-chapters-title {
  flex: none;
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}

.tour-chapters ol {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: space-between;
  gap: 2px 4px;
}

/* each part keeps its own colour, light enough to read on the dark bar */
.tour-chapters li:nth-child(1)  { --part: #F2C46D; }
.tour-chapters li:nth-child(2)  { --part: #9FD39A; }
.tour-chapters li:nth-child(3)  { --part: #F49A7B; }
.tour-chapters li:nth-child(4)  { --part: #8EC9E8; }
.tour-chapters li:nth-child(5)  { --part: #C9E27A; }
.tour-chapters li:nth-child(6)  { --part: #F7A8C6; }
.tour-chapters li:nth-child(7)  { --part: #B9A8F2; }
.tour-chapters li:nth-child(8)  { --part: #FFB86B; }
.tour-chapters li:nth-child(9)  { --part: #7FDCC8; }
.tour-chapters li:nth-child(10) { --part: #F28B8B; }
.tour-chapters li:nth-child(11) { --part: #A9C4FF; }
.tour-chapters li:nth-child(12) { --part: #E3D7BC; }

.tour-chapters a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--btn-radius);
  color: var(--part, var(--cream));
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.tour-chapters a::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--part, var(--cream));
  transition: background 0.15s ease;
}

.tour-chapters a:hover { background: rgba(251, 247, 239, 0.1); text-decoration: none; }
.tour-chapters a:focus-visible { outline: 2px solid var(--part, var(--cream)); outline-offset: 1px; }

.tour-chapters a.is-now { background: var(--part, var(--cream)); color: var(--dark); }
.tour-chapters a.is-now::before { background: var(--dark); border-color: var(--dark); }


@container (max-width: 780px) {
  .tour-chapters ol { grid-template-columns: repeat(4, auto); }
}

@container (max-width: 520px) {
  .tour-chapters ol { grid-template-columns: 1fr 1fr; }
}

/* a short laptop screen: a tighter heading, so the film keeps its size */
@media (min-width: 901px) and (max-height: 820px) {
  .tour { --tour-film-height: calc(100svh - 101px - 40px - var(--tour-strip)); padding: 20px var(--band-x); }
  .tour-side { gap: 18px; }
  .tour-copy { gap: 8px; }
  .tour-title { font-size: 30px; }
  .tour-lead { font-size: 15px; }
  .tour-why { padding-top: 16px; }
  .tour-why-title { margin-bottom: 10px; }
  .tour-why ul { gap: 11px; }
  .tour-why-icon { width: 32px; height: 32px; }
  .tour-why-icon svg { width: 18px; height: 18px; }
  .tour-why-text { font-size: 14px; line-height: 1.4; }
  .tour-why-text strong { font-size: 15px; }
  .tour-chapters { margin-top: 12px; padding: 8px 10px 8px 16px; }
  .tour-chapters a { font-size: 14.5px; padding: 4px 9px; }
}

@media (max-width: 900px) {
  .tour {
    padding: 22px var(--band-x) 36px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    align-content: start;
  }
  .tour-main { align-items: stretch; }
  .tour-film,
  .tour-chapters { width: 100%; }
  .tour-film,
  .tour-film .player { border-radius: 12px; }
  .tour-chapters { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 12px 12px; }
  .tour-chapters-title { padding-left: 10px; }
  .tour-chapters a { min-height: 44px; padding: 0 10px; font-size: 15.5px; }
}

@media (max-width: 760px) {
  .tour-title { font-size: clamp(28px, 7.4vw, 34px); }
  .tour-lead { font-size: 16px; }
}