/* ============================================================
   fieldpix.org — the 30-second film and the pieces shared around it
   The film plays as the screen of a phone drawn here, so it sits on the
   page like the other mockups; its chapter list follows the video's clock
   (film.js). Also here: the customer quote band, the phone nav's trial
   button and the phone-size fixes. Tokens come from styles.css; home.css
   places the film in the hero.
   ============================================================ */

/* ---------- Chapters: a timeline that fills as the film plays ----------
   The base is a full list (time, title, caption per row) that becomes a
   segmented bar with one caption under 900px. The homepage uses the compact
   variant in home.css, which is the segmented form at every width. */
.film-chapters { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.film-ch {
  position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; align-items: baseline;
  width: 100%; padding: 10px 14px 10px 24px; border: 0; border-radius: 14px;
  background: transparent; color: var(--on-band-muted); text-align: left; cursor: pointer;
  transition: background-color .25s, color .25s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .film-ch:hover { background: rgba(255, 255, 255, 0.05); } }
.film-ch:active .film-ch-bar { background: rgba(245, 245, 247, 0.34); }
.film-ch-bar { position: absolute; left: 8px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; overflow: hidden; background: rgba(245, 245, 247, 0.2); }
.film-ch-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--stamp); transform-origin: 0 0; transform: scaleY(var(--p, 0)); }
.film-ch-time { font: 500 13px/1 var(--mono); letter-spacing: 0.02em; color: #8A96AB; transition: color .25s; }   /* 6.2:1 on band */
.film-ch-text b { display: block; font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; }
.film-ch-text small { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; letter-spacing: 0; color: #8A96AB; transition: color .25s; }
.film-ch.is-active { background: rgba(255, 255, 255, 0.06); color: #fff; }
.film-ch.is-active .film-ch-time { color: var(--stamp); }
.film-ch.is-active .film-ch-text small { color: var(--on-band-muted); }
.film-end { display: none; }

/* ---------- The phone ---------- */
.film-stage { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.film-stage::before {   /* the light the screen throws on the wall behind it */
  content: ""; position: absolute; z-index: -1; inset: 6% -12% 10%;
  background: radial-gradient(closest-side, rgba(242, 181, 68, 0.22), rgba(242, 181, 68, 0) 72%);
  filter: blur(24px); pointer-events: none;
}
.film-phone {
  /* Sized from the window's height too, so the whole phone stays in view. */
  --fw: clamp(220px, calc((100vh - 190px) * 0.46), 320px);
  width: var(--fw); padding: calc(var(--fw) * 0.031); border-radius: calc(var(--fw) * 0.16);
  background: linear-gradient(145deg, #3A3F4A, #0B0F17);
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
}
@supports (height: 100svh) { .film-phone { --fw: clamp(220px, calc((100svh - 190px) * 0.46), 320px); } }
.film-screen { aspect-ratio: 660 / 1434; border-radius: calc(var(--fw) * 0.13); overflow: hidden; background: #000; }
.film-video { display: block; width: 100%; height: 100%; object-fit: cover; }
html:not(.no-js) .film-video { cursor: pointer; }

.film-controls { display: flex; align-items: center; justify-content: center; gap: 10px; }
.film-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(245, 245, 247, 0.24); background: rgba(255, 255, 255, 0.06); color: var(--on-band);
  font: 600 15px/1 var(--sans); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: transform .15s var(--ease), background-color .2s, border-color .2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.film-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(245, 245, 247, 0.45); }
.film-btn:active { transform: scale(0.97); }
.film-btn .icon { width: 18px; height: 18px; }
.film-btn-icon { width: 44px; padding: 0; }
.no-js .film-controls { display: none; }   /* without scripts the video keeps the browser's own controls */
.no-js .film-ch { pointer-events: none; }

/* The phone's entrance: one slower, deeper rise than the blocks around it. */
.film-stage.reveal { transform: translateY(36px) scale(0.965); transition-duration: .9s; }
.film-stage.reveal.in, .no-js .film-stage.reveal { transform: none; }

/* ---------- Phones and small tablets ----------
   A segmented progress bar, the current step's caption, then the phone.
   Only the current caption shows, so caption and phone fit together. */
@media (max-width: 900px) {
  .film-chapters { order: 2; width: 100%; max-width: 440px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding-bottom: 120px; }
  .film-ch { position: static; display: flex; align-items: center; height: 44px; padding: 0; border-radius: 8px; }
  .film-ch:hover, .film-ch.is-active { background: transparent; }
  .film-ch-bar { position: relative; flex: 1; left: auto; top: auto; bottom: auto; width: auto; height: 4px; background: rgba(245, 245, 247, 0.36); }   /* the bar is the whole button here: 3.1:1 on the band */
  .film-ch-bar i { transform: scaleX(var(--p, 0)); }
  .film-ch-time { display: none; }
  .film-ch-text, .film-end {
    position: absolute; left: 0; right: 0; top: 50px; text-align: center; pointer-events: none;
    opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .film-end { display: block; }
  .film-ch.is-active .film-ch-text, .film-chapters.is-ended .film-end { opacity: 1; transform: none; }
  .film-ch-text b, .film-end b { display: block; font: 700 clamp(21px, 6.2vw, 24px)/1.15 var(--display); letter-spacing: -0.01em; color: #fff; }
  .film-ch-text small, .film-ch.is-active .film-ch-text small, .film-end small { display: block; margin-top: 6px; font-size: 16px; line-height: 1.4; letter-spacing: 0; color: var(--on-band-muted); text-wrap: balance; }
  .film-stage::before { inset: 4% -30% 12%; }
  .film-phone { --fw: clamp(200px, min(62vw, calc((100vh - 290px) * 0.46)), 280px); }
  @supports (height: 100svh) { .film-phone { --fw: clamp(200px, min(62vw, calc((100svh - 290px) * 0.46)), 280px); } }
}

@media (prefers-reduced-motion: reduce) {
  .film-stage.reveal { transform: none; }
}
@media (prefers-contrast: more) {
  .film-ch-time, .film-ch-text small { color: var(--on-band-muted); }
  .film-ch-bar { background: rgba(245, 245, 247, 0.5); }
  .film-btn { border-color: rgba(245, 245, 247, 0.6); }
}

/* ---------- Customer quote: the last word of the dark band ---------- */
.quote-band {
  padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--band-line);
  background: radial-gradient(720px 340px at 50% 0%, rgba(242, 181, 68, 0.09), transparent 70%), var(--band);
}
.quote { margin: 0 auto; max-width: 940px; text-align: center; }
.quote-mark { width: 40px; height: 31px; margin: 0 auto 24px; color: var(--stamp); }
.quote blockquote { margin: 0; }
.quote blockquote p { font: 600 clamp(25px, 3.2vw, 40px)/1.24 var(--display); letter-spacing: -0.015em; color: #fff; text-wrap: balance; }
.quote figcaption { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* State Solar's logo as supplied (black and lime, made for a light background), on a white plate */
.quote-logo { display: inline-flex; padding: 12px 18px; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.7); }
.quote-logo img { display: block; width: auto; height: 34px; }
.quote-who { font-size: 16px; font-weight: 600; color: var(--on-band); letter-spacing: 0; }

/* ---------- Nav: on phones the trial button follows you down the page ---------- */
.nav-trial { display: none; }
@media (max-width: 960px) {
  .nav .nav-trial {
    display: inline-flex; gap: 0; margin-left: auto; min-height: 44px; padding: 0 16px;
    visibility: hidden; opacity: 0; transform: translateY(-4px);
    transition: opacity .2s, transform .2s var(--ease), visibility 0s .2s;
  }
  .nav.past-hero .nav-trial { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s var(--ease); }
  .nav .nav-trial + .menu-btn { margin-left: 2px; }
  .nav.open .nav-trial { display: none; }   /* the open menu has its own */
  .nav.open .nav-trial + .menu-btn { margin-left: auto; }   /* so the close button stays at the edge */
  /* The open menu is a solid sheet (dark over the dark bands), and scrolls
     inside itself when it is taller than the screen, as on a phone held sideways. */
  .nav.open.on-dark { background: var(--band); color: #F5F5F7; border-bottom-color: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.open.on-dark .mobile-menu a:not(.btn) { border-bottom-color: rgba(255, 255, 255, 0.1); }
  .nav.open .mobile-menu { max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .nav .nav-inner { gap: 12px; }
}
@media (max-width: 380px) {   /* small phones: keep the menu button on screen */
  .nav .nav-trial { padding: 0 12px; }
  .nav-trial-long { display: none; }
}

/* ---------- Phones: the smallest labels, a size up ---------- */
@media (max-width: 560px) {
  .strip .burn, .walk-pill, .gps { font-size: 12px; }
}

/* ---------- Phones: the other phone mockups ----------
   The hero's overlap margins (styles.css, under 860px) reached every .phone,
   so the How-it-works and Payments phones sat off-center with their tops cut off. */
@media (max-width: 860px) {
  .tour-visual .phone, .pay-phone .phone { margin-top: 0; margin-left: auto; margin-right: auto; }
}
@media (max-width: 960px) {
  .pay-phone { order: 0; }   /* the headline leads; the phone follows the list */
}

/* Footer column titles are h3 (they follow the page's h2s); same look as before. */
.foot h3 { font: 600 13px var(--sans); color: #fff; margin-bottom: 12px; letter-spacing: 0; }

/* ---------- Very narrow screens (folding-phone covers, large text zoom) ---------- */
.menu-btn { flex: none; }
@media (max-width: 340px) {
  .plan { padding: 24px 20px; }
  .plan .badge { left: 20px; }
  .price { flex-wrap: wrap; }
  .price b { font-size: 46px; }
}
@media (max-width: 319px) {
  .nav .nav-trial { display: none; }   /* no room beside the logo; the menu has one */
  .nav .nav-trial + .menu-btn { margin-left: auto; }
}