/* ==========================================================================
   Explain8 page patterns: the inner public pages. Loaded after site.css.

   World: the edit suite. Every surface is a fill one tone step from its
   ground. No rules, no outlines, no shadows at rest. Tokens come from
   site.css only. Class names avoid home.css (band, line, clip, track,
   timeline, runtime, ruler, playhead, slip, board, monitor, palette).

   Contents
     1  Page header (the suite band), facts, back link
     2  Scene art: figures, pairs, filmstrip
     3  Section rhythm: columns, statements, grounds
     4  Lists: prose, check list, bins, details, index
     5  Packages: tiers and the length scale
     6  Process: gate, steps
     7  Services, questions, depth panels, length rows
     8  Forms and receipts
     9  Examples, results, player, empty states
    10  Closing band
    11  Errors
    12  Print
   ========================================================================== */

/* 1 Page header ------------------------------------------------------------ */

.page-header {
  padding-block: clamp(2.75rem, 7vw, 6rem) clamp(3.25rem, 8vw, 7rem);
}

.page-header h1 {
  margin: 0;
  color: var(--paper);
  /* 0.097 of the text width is the largest size at which every title holds two lines, from 320px up. */
  font-size: min(calc((100vw - 2 * var(--gutter)) * 0.097), 5rem);
}

/* From tablet width the title is poster scale on every page, capped so its longest line always fits. */
@media (min-width: 56rem) {
  .page-header h1 {
    font-size: min(var(--step-display), calc((min(100vw, 84rem) - 2 * var(--gutter)) * 0.097));
  }
}

.page-header-body {
  display: grid;
  gap: 1.75rem 4rem;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

@media (min-width: 56rem) {
  .page-header-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-header-body-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-header .lede {
  margin: 0;
}

.page-header .lede + .lede {
  margin-top: 1rem;
}

.page-header-side .actions,
.page-header-lead .actions {
  margin-top: 0;
}

.page-header-lead .facts {
  margin-top: 1.5rem;
}

.page-header-side > * + * {
  margin-top: 1.25rem;
}

/* The title runs full width; the copy and a scene sit in one row beneath it. */
.page-header-grid {
  display: grid;
  gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

@media (min-width: 75rem) {
  .page-header-grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  }
}

.page-header-split .facts {
  margin-top: 1.5rem;
}

.page-header-split .actions {
  margin-top: 2rem;
}

.page-header-copy > .small {
  margin-top: 1rem;
}

.page-header-art {
  max-width: 44rem;
}

.page-header-strip {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 75rem) {
  .page-header-art {
    max-width: none;
  }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-bottom: 0.75rem;
  font-weight: 650;
  text-decoration: none;
}

.back-link::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-ui) var(--ease-out);
}

.back-link:hover {
  text-decoration: underline;
}

@media (hover: hover) {
  .back-link:hover::before {
    transform: translateX(-3px);
  }
}

/* Facts: short filled blocks, never separated by rules. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  margin: 0;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius);
  background: var(--fog-2);
  color: var(--ink);
  font-weight: 650;
  line-height: 1.3;
}

.suite .facts li {
  background: var(--suite-2);
  color: var(--on-suite);
}

.facts strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 2 Scene art -------------------------------------------------------------- */

.scene {
  margin-bottom: 0;
}

.scene img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--suite-2);
}

.scene figcaption,
.filmstrip figcaption {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--slate);
}

.suite .scene figcaption,
.suite .filmstrip figcaption {
  color: var(--on-suite-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .page-header-art img {
    animation: scene-wipe 720ms var(--ease-expo) both;
  }

  .scene-mosaic img:nth-child(2) {
    animation-delay: 90ms;
  }

  .scene-mosaic img:nth-child(3) {
    animation-delay: 180ms;
  }

  .scene-mosaic img:nth-child(4) {
    animation-delay: 270ms;
  }
}

@keyframes scene-wipe {
  from {
    clip-path: inset(0 0 0 100%);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Four service scenes as one montage. */
.scene-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.scene-mosaic img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* The same scene recomposed for both layouts, at one shared height. */
.scene-pair {
  margin-bottom: 0;
}

.scene-pair-frames {
  display: grid;
  grid-template-columns: minmax(0, 3.16fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: end;
}

.scene-pair img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--suite-2);
}

.scene-pair figcaption {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--slate);
}

.suite .scene-pair figcaption {
  color: var(--on-suite-soft);
}

/* A storyboard: five scenes on one raised track. */
.filmstrip {
  margin-bottom: 0;
}

.filmstrip-frames {
  display: grid;
  gap: 1rem;
  margin-bottom: 0;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border-radius: var(--radius);
  background: var(--suite-2);
  list-style: none;
}

.film-frame {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin: 0;
}

.film-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--suite-3);
}

.film-title {
  margin: 0;
  color: var(--on-suite);
  font-family: var(--font-text);
  font-size: var(--step-body);
  font-stretch: 100%;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

@media (min-width: 40rem) {
  .filmstrip-frames {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem 0.75rem;
  }

  .film-frame {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-content: start;
  }
}

/* Long captions (full sentences) need wider frames to stay within two lines. */
.filmstrip-long .film-frame {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-content: start;
}

@media (min-width: 40rem) {
  .filmstrip-long .filmstrip-frames {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filmstrip-long .film-frame:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: center;
  }
}

@media (min-width: 62rem) {
  .filmstrip-long .filmstrip-frames {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .filmstrip-long .film-frame {
    grid-column: span 2;
  }

  .filmstrip-long .film-frame:nth-child(n + 4),
  .filmstrip-long .film-frame:last-child:nth-child(odd) {
    grid-column: span 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
  }
}

@media (min-width: 90rem) {
  .filmstrip-long .filmstrip-frames {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .filmstrip-long .film-frame,
  .filmstrip-long .film-frame:nth-child(n + 4),
  .filmstrip-long .film-frame:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .filmstrip-long .film-title {
    font-size: var(--step-small);
    line-height: 1.4;
  }
}

/* 3 Section rhythm ----------------------------------------------------------- */

.cols {
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 5rem);
}

@media (min-width: 75rem) {
  .cols {
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    align-items: start;
  }

  .cols-wide {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .cols-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cols-center {
    align-items: center;
  }

  /* The heading sits on the far side; the DOM order stays heading first. */
  .cols-flip {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  }

  .cols-flip > :first-child {
    order: 2;
  }

  .cols-sticky > :first-child {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

/* Two paragraphs set as two columns under a heading. */
.pair-text {
  display: grid;
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
}

.pair-text p {
  max-width: var(--measure);
  margin: 0;
}

/* Two blocks, each a title over two columns, stacked with room between them. */
.stack-split {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

@media (min-width: 62rem) {
  .pair-text {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A plain filled panel on a fog ground. */
.panel {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--paper);
}

.panel > * + * {
  margin-top: 1.25rem;
}

.panel h2 {
  font-size: var(--step-h3);
  font-stretch: 92%;
  line-height: 1.12;
}

.cols > * {
  min-width: 0;
}

/* A title over a picture keeps half its own height clear of it. */
.stack-lg > h2 + .scene,
.stack-lg > h2 + .scene-pair,
.stack-lg > h2 + .filmstrip {
  margin-top: max(1.75rem, calc(var(--step-h2) * 0.5));
}

/* Stacked pairs keep a clear gap, so a closing line never reads as a label for the next heading. */
.cols-even {
  row-gap: 4.5rem;
}

.section h2,
.section-head h2 {
  margin-bottom: 0;
}

.section .lede {
  max-width: 44rem;
}

.section-head .lede,
.cols .lede {
  margin-top: 1.25rem;
}

.cols .lede:first-child,
.section-head .lede:first-child {
  margin-top: 0;
}

.section h2 + p,
.section h2 + .lede {
  margin-top: 1.25rem;
}

.section-signal h2,
.section-signal .lede {
  color: var(--paper);
}

.section-signal a:not(.button),
.cta-band a:not(.button) {
  color: var(--paper);
}

.section-signal :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--paper);
}

.section-signal ::selection {
  background: var(--paper);
  color: var(--signal);
}

.suite h2,
.suite h3 {
  color: var(--paper);
}

.suite li::marker {
  color: var(--signal-bright);
}

.suite .tabs {
  background: var(--suite-2);
}

.suite .tabs a,
.suite .tabs button {
  color: var(--on-suite-soft);
}

.suite .tabs a:hover,
.suite .tabs button:hover {
  background: var(--suite-3);
  color: var(--paper);
}

.suite .tabs [aria-current="page"],
.suite .tabs [aria-selected="true"] {
  background: var(--signal);
  color: var(--paper);
}

.suite .tabs [aria-selected="true"]:hover {
  background: var(--signal);
  color: var(--paper);
}

.section-note {
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* Section titles and the footer invitation ease down on phones, always below the page title, so long headings keep to two lines. */
@media (max-width: 47.99rem) {
  :where(body:not(.page-home)) main h2,
  :where(body:not(.page-home)) .footer-invite h2 {
    font-size: min(var(--step-h2), max(1.375rem, calc((100vw - 2 * var(--gutter)) * 0.0726)));
  }
}

/* 4 Lists ---------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1.1em;
  margin-bottom: 0;
}

.prose > :first-child {
  margin-top: 0;
}

.prose :where(h2) {
  margin-top: 2.6em;
  margin-bottom: 0;
  font-size: var(--step-h3);
  font-stretch: 92%;
  line-height: 1.12;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.prose :where(h2) + * {
  margin-top: 0.7em;
}

.prose :where(li) {
  margin-bottom: 0.45rem;
}

.prose :where(ul, ol) {
  margin-bottom: 0;
}

.prose :where(a) {
  font-weight: 600;
}

/* Reading sections (case study and example detail): headings stay at the h3 step. */
.read-section h2 {
  font-size: var(--step-h3);
  font-stretch: 92%;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.read-section .stack-lg > * + * {
  margin-top: 2.5rem;
}

.read-section h2 + p {
  margin-top: 0.75rem;
}

/* Checks: each item is a filled row with a signal tick block. */
.check-list {
  display: grid;
  gap: 0.375rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.check-list > li {
  position: relative;
  margin: 0;
  padding: 0.9rem 1.1rem 0.9rem 3.35rem;
  border-radius: var(--radius);
  background: var(--fog);
}

.section-alt .check-list > li {
  background: var(--paper);
}

.suite .check-list > li {
  background: var(--suite-2);
}

.check-list > li::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.05rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius);
  background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.2 4.2 8.8-9'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

.suite .check-list > li::before {
  background-color: var(--signal-bright);
}

@media (min-width: 44rem) {
  .check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .check-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A bin: each term is a filled row, like clips in a media bin. */
.manifest {
  display: grid;
  gap: 0.375rem;
}

.manifest > div {
  display: grid;
  gap: 0.35rem 2rem;
  padding: 1.15rem 1.35rem 1.25rem;
  border-radius: var(--radius);
  background: var(--fog);
}

.section-alt .manifest > div {
  background: var(--paper);
}

.suite .manifest > div {
  background: var(--suite-2);
}

.manifest dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.manifest dd {
  margin: 0;
}

.manifest dd > * + * {
  margin-top: 0.75rem;
}

@media (min-width: 44rem) {
  .manifest > div {
    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

.details-list {
  display: grid;
  gap: 0.25rem;
}

.details-list > div {
  display: grid;
  gap: 0.1rem 1.5rem;
  padding: 0.8rem 1.05rem;
  border-radius: var(--radius);
  background: var(--fog);
}

.section-alt .details-list > div {
  background: var(--paper);
}

.details-list dt {
  margin: 0;
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--slate);
}

.details-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 40rem) {
  .details-list > div {
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* The on-this-page list sits to the right of long reading; the text keeps the header's left edge. */
.index-title {
  margin: 0 0 0.75rem;
  font-weight: 750;
}

.read {
  display: grid;
  gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
}

.read > * {
  min-width: 0;
}

@media (min-width: 64rem) {
  .read {
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    align-items: start;
  }

  .read > nav {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem);
    max-height: calc(100dvh - var(--header-h) - 3rem);
    overflow-y: auto;
  }

  .read > :not(nav) {
    grid-column: 1;
    grid-row: 1;
  }
}

.faq-groups > * + * {
  margin-top: clamp(5rem, 22vw, 10.5rem);
}

.faq-group h2 {
  margin-bottom: 1.25rem;
}

/* 5 Packages: tiers and the length scale --------------------------------------- */

.tiers {
  display: grid;
  gap: 1rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 62rem) {
  .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-block: 1.5rem;
  }
}

.tiers > * {
  min-width: 0;
}

.tier {
  --tier-pad: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: var(--tier-pad);
  border-radius: var(--radius);
  background: var(--fog-2);
  color: var(--ink);
}

.suite .tier {
  background: var(--suite-2);
  color: var(--on-suite);
}

.tier h3,
.tier p {
  margin: 0;
}

.tier-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.tier-price strong {
  font-family: var(--font-display);
  font-size: var(--step-h2);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}

.tier-price span {
  font-weight: 650;
  color: var(--slate);
}

.suite .tier-price span {
  color: var(--on-suite-soft);
}

.tier-lead strong {
  font-weight: 750;
}

.tier .tier-when {
  margin-top: auto;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: var(--paper);
}

.suite .tier-when {
  background: var(--suite-3);
}

.tier-when strong {
  font-weight: 750;
}

.tier .actions {
  margin-top: 0.25rem;
}

.tier .button {
  width: 100%;
}

.tier .button-secondary {
  background: var(--suite);
  color: var(--paper);
}

.tier .button-secondary:hover {
  background: var(--suite-3);
  color: var(--paper);
}

/* The recommended package is the one filled signal panel, set proud of its neighbours. */
.tier.tier-featured {
  background: var(--signal);
  color: var(--paper);
}

.tier-featured .tier-price span,
.tier-featured .length-scale-ticks,
.tier-featured .length-scale-label {
  color: var(--paper);
}

.tier-featured .tier-when {
  background: var(--signal-deep);
}

.tier-featured .length-scale-blocks span {
  background: var(--signal-deep);
}

.tier-featured .length-scale-blocks span.is-on {
  background: var(--paper);
}

@media (min-width: 62rem) {
  .tier.tier-featured {
    margin-block: -1.5rem;
    padding-block: calc(var(--tier-pad) + 1.5rem);
  }
}

/* The length scale: ten half-minute blocks from 0:00 to 5:00, the package's span filled. */
.length-scale {
  display: grid;
  gap: 0.5rem;
}

.length-scale-label {
  margin: 0;
  font-weight: 650;
}

.length-scale-blocks {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  height: 1.25rem;
}

.length-scale-blocks span {
  border-radius: var(--radius);
  background: var(--paper);
}

.length-scale-blocks span.is-on {
  background: var(--signal);
}

.suite .length-scale-blocks span {
  background: var(--suite-3);
}

.suite .length-scale-blocks span.is-on {
  background: var(--signal-bright);
}

.length-scale-ticks {
  position: relative;
  height: 1.375rem;
  margin: 0;
  font-size: var(--step-small);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--slate);
}

.suite .length-scale-ticks {
  color: var(--on-suite-soft);
}

.length-scale-ticks span {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
}

.length-scale-ticks span:nth-child(1) {
  transform: none;
}

.length-scale-ticks span:nth-child(2) {
  left: 20%;
}

.length-scale-ticks span:nth-child(3) {
  left: 40%;
}

.length-scale-ticks span:nth-child(4) {
  left: 60%;
}

.length-scale-ticks span:nth-child(5) {
  left: 80%;
}

.length-scale-ticks span:nth-child(6) {
  right: 0;
  left: auto;
  transform: none;
}

/* 6 Process: gate, steps ----------------------------------------------------------- */

/* The approval gate: nothing is produced until you approve. */
.gate-track {
  display: grid;
  gap: 0.375rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.gate-track > li {
  margin: 0;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius);
}

.gate-approve {
  background: var(--fog-2);
}

.section-alt .gate-approve {
  background: var(--fog-2);
}

.gate-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--signal);
  color: var(--paper);
  font-weight: 800;
  text-align: center;
}

.gate-production {
  background: var(--suite);
  color: var(--on-suite);
}

.suite .gate-approve {
  background: var(--suite-3);
}

.suite .gate-production {
  background: var(--suite-2);
}

.gate-production strong {
  display: block;
  color: var(--paper);
  font-weight: 750;
}

@media (min-width: 48rem) {
  .gate-track {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .gate-mark {
    padding-inline: 1.75rem;
  }
}

/* Tables with two or three columns fit a phone; wider tables scroll inside their frame. */
.table-fit > table {
  min-width: 0;
}

.table-fit thead th {
  white-space: normal;
}

/* Steps on a vertical track. Number blocks sit on the track like clips. */
.steps {
  position: relative;
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0;
  padding: 0 0 0 4.75rem;
  list-style: none;
  counter-reset: step;
}

.steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3.5rem;
  border-radius: var(--radius);
  background: var(--fog-2);
}

.steps > li {
  position: relative;
  margin: 0;
  padding: 1.3rem 1.5rem 1.5rem;
  border-radius: var(--radius);
  background: var(--fog);
  counter-increment: step;
}

.section-alt .steps > li {
  background: var(--paper);
}

.section-alt .steps::before {
  background: var(--fog-2);
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  top: 0.85rem;
  left: -4.5rem;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  background: var(--suite);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.steps h3 {
  margin: 0 0 0.5rem;
}

.steps p {
  max-width: 40rem;
  margin: 0;
}

.steps p + p {
  margin-top: 0.75rem;
}

.steps .scene-pair {
  margin-top: 1.5rem;
}

.steps > li.steps-gate {
  padding-block: 1.1rem;
  background: var(--signal);
  color: var(--paper);
  counter-increment: none;
}

.steps > li.steps-gate::before {
  content: "";
  top: 0;
  bottom: 0;
  left: -4.75rem;
  width: 3.5rem;
  height: auto;
  background: var(--signal);
}

.steps-gate strong {
  font-weight: 800;
}

/* 7 Services, questions, depth panels, length rows ----------------------------- */

.service-row {
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.service-row > * {
  min-width: 0;
}

@media (min-width: 62rem) {
  .service-row {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .service-row:not(.service-row-flip) .scene {
    order: -1;
  }
}

.service-row .scene img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.service-price {
  margin: 1.25rem 0 0;
  font-size: var(--step-h3);
  line-height: 1.35;
}

.service-price strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.service-copy {
  margin: 1rem 0 0;
}

.service-price-first {
  margin-top: 0;
}

.service-row .actions {
  margin-top: 1.75rem;
}

@media (hover: hover) {
  .service-row .scene img {
    transition: transform var(--t-ui) var(--ease-out);
  }

  .service-row:hover .scene img {
    transform: scale(1.02);
  }

  .service-row .scene {
    overflow: hidden;
    border-radius: var(--radius);
  }
}

/* Customer questions set as caption bars, like lower-thirds on a frame. */
.questions {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.questions li {
  margin: 0;
  padding: 0.28em 0.5em 0.36em;
  border-radius: var(--radius);
  background: var(--suite);
  color: var(--on-suite);
  font-family: var(--font-display);
  font-size: var(--step-h2);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

.suite .questions li {
  background: var(--suite-2);
}

.section-signal .questions li {
  background: var(--suite);
}

.questions-grid {
  gap: 0.5rem 0.75rem;
}

@media (min-width: 62rem) {
  .questions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }

  .questions-grid li {
    font-size: var(--step-h3);
    padding: 0.9rem 1.1rem 1rem;
    line-height: 1.12;
  }
}

/* Two packages as depth panels: one light, one navy. */
.depth {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 62rem) {
  .depth {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.depth > * {
  min-width: 0;
}

.depth-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--fog-2);
}

.depth-panel h3,
.depth-panel p {
  margin: 0;
}

.depth-panel-dark {
  background: var(--suite);
  color: var(--on-suite);
}

.depth-panel-dark h3 {
  color: var(--paper);
}

.depth-panel-dark .tier-price span {
  color: var(--on-suite-soft);
}

.depth-panel-dark .length-scale-blocks span {
  background: var(--suite-3);
}

.depth-panel-dark .length-scale-blocks span.is-on {
  background: var(--signal-bright);
}

.depth-panel-dark .length-scale-ticks {
  color: var(--on-suite-soft);
}

.depth-panel .actions {
  margin-top: auto;
  padding-top: 0.5rem;
}

.depth-panel h2 {
  font-size: var(--step-h3);
  font-stretch: 92%;
  line-height: 1.12;
}

.depth-panel-lg h2 {
  font-size: min(var(--step-h2), max(1.375rem, calc((100vw - 2 * var(--gutter)) * 0.0726)));
  font-stretch: 80%;
  line-height: 0.95;
}

.depth-panel-wash {
  background: var(--wash);
}

.depth-panel-dark {
  color-scheme: dark;
}

.depth-panel-dark h2 {
  color: var(--paper);
}

.depth-panel-dark a:not(.button) {
  color: var(--signal-light);
}

.depth-panel-dark :focus-visible {
  outline-color: var(--signal-light);
}

/* Packages as rows on the same 0:00 to 5:00 scale. */
.length-rows {
  display: grid;
  gap: 0.375rem;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.length-row {
  display: grid;
  gap: 1rem 2.5rem;
  margin: 0;
  padding: clamp(1.15rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--paper);
}

.length-row h3,
.length-row p {
  margin: 0;
}

.length-row .length-row-text > * + * {
  margin-top: 0.5rem;
}

.length-row .length-scale-blocks span {
  background: var(--fog-2);
}

.length-row .length-scale-blocks span.is-on {
  background: var(--signal);
}

.length-row-price {
  font-weight: 650;
}

.length-row-price strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 62rem) {
  .length-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: center;
  }
}

/* 8 Forms and receipts ------------------------------------------------------------- */

/* Status and error messages sit directly under the suite band, not above it. */
main:has(> .status-notice + .page-header) {
  display: flex;
  flex-direction: column;
}

main:has(> .status-notice + .page-header) > .page-header {
  order: -2;
}

main:has(> .status-notice + .page-header) > .status-notice {
  order: -1;
  padding-bottom: 0.5rem;
}

.form-layout {
  display: grid;
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
}

.form-layout > * {
  min-width: 0;
}

@media (min-width: 75rem) {
  .form-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .form-aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem);
    max-height: calc(100dvh - var(--header-h) - 3rem);
    overflow-y: auto;
  }
}

.form-aside > * + * {
  margin-top: 1.75rem;
}

.form-aside h2 {
  margin-bottom: 1.25rem;
  font-size: var(--step-h3);
  font-stretch: 92%;
}

.form-aside h3 {
  margin-bottom: 0.5rem;
}

/* The form is one fog panel. Fieldsets run edge to edge as a darker tone band. */
.form-card {
  --panel-pad: clamp(1.25rem, 4vw, 2.75rem);
  padding: var(--panel-pad);
}

.form-card .field {
  margin-bottom: 1.6rem;
}

.form-card .field-row {
  gap: 1.6rem 1.25rem;
  margin-bottom: 1.6rem;
}

.form-card .field:last-child,
.form-card .field-row:last-child {
  margin-bottom: 0;
}

.form-card .field > label {
  margin-bottom: 0.5rem;
  font-size: var(--step-body);
  font-weight: 700;
}

.form-card .field .hint,
.form-card .hint {
  font-size: var(--step-body);
  color: var(--slate);
}

.form-card :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"], [type="color"]), select) {
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
}

.form-card :where(textarea) {
  min-height: 9rem;
  padding: 0.8rem 1rem;
}

.form-card .field.has-error {
  padding: 0.9rem 1rem 1rem;
  border-radius: var(--radius);
  background: var(--bad-bg);
}

.form-card .field.has-error > label {
  color: var(--bad);
}

.form-card fieldset {
  margin: 2rem calc(var(--panel-pad) * -1) 0;
  padding: var(--panel-pad);
  background: var(--fog-2);
}

.form-card fieldset legend {
  float: left;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 92%;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.form-card fieldset legend + * {
  clear: both;
}

.form-card fieldset > .hint {
  margin: 0 0 1.25rem;
}

.form-card fieldset .field-row,
.form-card fieldset .field {
  margin-bottom: 1.4rem;
}

.form-card fieldset > :last-child {
  margin-bottom: 0;
}

.form-card .form-note {
  margin: 1.75rem 0 0;
  font-size: var(--step-body);
  color: var(--slate);
}

.form-card > .form-note:first-of-type {
  margin: 0 0 1.75rem;
}

.form-card fieldset + .form-note {
  margin-top: 2rem;
}

.form-card .form-actions {
  margin-top: 1.25rem;
}

/* The receipt: a reference ticket beside the details. */
.receipt {
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
}

.receipt > * {
  min-width: 0;
}

@media (min-width: 62rem) {
  .receipt {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.receipt-ref {
  margin: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--signal);
  color: var(--paper);
}

.receipt-ref dt {
  font-weight: 700;
}

.receipt-ref dd {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-h2);
  font-weight: 800;
  font-stretch: 80%;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.receipt-body > * + * {
  margin-top: 1.5rem;
}

.receipt-body .actions {
  margin-top: 1.75rem;
}

/* 9 Examples, results, player, empty states ----------------------------------------- */

.filters {
  display: grid;
  gap: 1rem 1.25rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--fog);
}

.section-alt .filters {
  background: var(--paper);
}

@media (min-width: 48rem) {
  .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
  }
}

.filters .field {
  margin: 0;
}

.sample-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44rem) {
  .sample-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 66rem) {
  .sample-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sample-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--fog);
  transition: background-color var(--t-hover) ease;
}

.section-alt .sample-card {
  background: var(--paper);
}

.sample-card h3 {
  margin: 0;
}

.sample-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.sample-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (hover: hover) {
  .sample-card:hover {
    background: var(--wash);
  }
}

.sample-card:focus-within {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
}

.sample-card:focus-within h3 a:focus-visible {
  outline: none;
}

.sample-card p {
  margin: 0;
}

.sample-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

/* The program monitor: the player sits on a raised suite panel. */
.player {
  margin: 0;
}

.player .tabs a,
.player .tabs button {
  min-height: 2.75rem;
}

.player-stage {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--suite-2);
}

.player-frame {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--suite);
}

.player-frame[data-layout="horizontal"] {
  aspect-ratio: 16 / 9;
}

.player-frame[data-layout="vertical"] {
  width: min(100%, 22rem);
  aspect-ratio: 9 / 16;
}

.player-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--suite);
}

.transcript {
  margin-top: 1.25rem;
}

.transcript summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--radius);
  background: var(--suite-2);
  font-weight: 650;
  cursor: pointer;
  transition: background-color var(--t-hover) ease;
}

.transcript summary:hover {
  background: var(--suite-3);
}

.transcript-body {
  max-width: var(--measure);
  padding: 1rem 0 0;
  white-space: pre-line;
}

.quote {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--wash);
  font-size: var(--step-h3);
  line-height: 1.4;
}

.quote p {
  margin: 0;
}

.quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--step-body);
  font-style: normal;
  font-weight: 650;
}

/* The program monitor: the header flows into the player on one dark field. */
.viewing .page-header {
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.viewing-stage {
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

/* An honest empty state: a navy panel with the scene art, the reason, and the way forward. */
.empty-state {
  display: grid;
  gap: 1.75rem clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--radius);
  background: var(--suite);
  color: var(--on-suite);
  color-scheme: dark;
}

@media (min-width: 75rem) {
  .empty-state {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.empty-state > * {
  min-width: 0;
}

.empty-state h2,
.empty-state h3 {
  margin: 0;
  color: var(--paper);
  font-size: min(var(--step-h2), max(1.25rem, calc((100vw - 2 * var(--gutter) - 2.5rem) * 0.0818)));
}

.empty-state p {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  font-size: var(--step-h3);
  line-height: 1.38;
}

.empty-state a:not(.button) {
  color: var(--signal-light);
}

.empty-state .actions {
  margin-top: 2rem;
}

.empty-state :focus-visible {
  outline-color: var(--signal-light);
}

.empty-state-plain {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 75rem) {
  .empty-state-plain {
    grid-template-columns: minmax(0, 1fr);
  }
}

.empty-state-plain p {
  max-width: 44rem;
}

.empty-state .scene figcaption {
  color: var(--on-suite-soft);
}

.empty-state .scene img {
  background: var(--suite-3);
}

/* A short note beside a CTA: text left, buttons right. */
.cta-row {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: center;
}

@media (min-width: 62rem) {
  .cta-row {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .cta-row .actions {
    justify-content: flex-end;
  }
}

.cta-row p,
.cta-row .actions {
  margin: 0;
}

/* 10 Closing band ------------------------------------------------------------------------ */

.cta-band {
  padding-block: var(--section-y);
  background: var(--signal);
  color: var(--paper);
}

.cta-band-grid {
  display: grid;
  gap: 1.75rem 4rem;
  align-items: start;
}

.cta-band h2 {
  margin: 0;
  color: var(--paper);
}

.cta-band p {
  max-width: 34rem;
  margin: 0;
  font-size: var(--step-h3);
  font-weight: 450;
  line-height: 1.38;
  color: var(--paper);
}

.cta-band .actions {
  margin-top: 2rem;
}

.section-signal .button-secondary,
.cta-band .button-secondary {
  background: var(--suite);
  color: var(--paper);
}

.section-signal .button-secondary:hover,
.cta-band .button-secondary:hover {
  background: var(--suite-2);
  color: var(--paper);
}

@media (min-width: 62rem) {
  .cta-band-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* 11 Errors ---------------------------------------------------------------------------------- */

.page-header-error {
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 64vh, 40rem);
}

.page-header-error > .container {
  width: 100%;
}

.page-header-error .lede {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.page-header-error p:not(.lede) {
  margin-top: 1rem;
}

.page-header-error .actions {
  margin-top: 2rem;
}

.page-header-error form {
  margin: 0;
}

/* Pages that open on their tiers sit closer to the header band. */
.section-flush-top {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Panels that carry a scene put it after the words, before the action. */
.depth-panel .scene {
  margin-top: 0.25rem;
}

.depth-panel-dark .scene figcaption {
  color: var(--on-suite-soft);
}

/* 13 Motion: one load sequence in the header, once-only reveals below ----------------- */

/* A title line is a mask; the line rises through it once on load. */
.page-header h1 .line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.16em;
  margin-block: -0.06em -0.16em;
}

.page-header h1 [data-line] {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .page-header h1 [data-line] {
    animation: line-rise 820ms var(--ease-expo) both;
    animation-delay: calc(var(--i, 0) * 110ms + 60ms);
  }

  .page-header .back-link,
  .page-header-copy > *,
  .page-header-body > *,
  .page-header-strip,
  .page-header-error .container > :not(h1) {
    animation: rise-in 640ms var(--ease-expo) both;
    animation-delay: 240ms;
  }

  .page-header-copy > :nth-child(2),
  .page-header-body > :nth-child(2),
  .page-header-error .container > :nth-child(3) {
    animation-delay: 320ms;
  }

  .page-header-copy > :nth-child(3) {
    animation-delay: 380ms;
  }

  .page-header-copy > :nth-child(4) {
    animation-delay: 440ms;
  }

  .page-header-strip {
    animation-delay: 480ms;
  }

  /* Parts of each section rise once, the first time they scroll into view (site.js marks them). */
  .js [data-inview] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }

  .js [data-inview].is-in {
    opacity: 1;
    transform: none;
  }
}

@keyframes line-rise {
  from {
    transform: translateY(104%);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media print {
  .js [data-inview] {
    opacity: 1;
    transform: none;
  }
}

/* 12 Print ---------------------------------------------------------------------------------- */

@media print {
  .cta-band {
    display: none;
  }

  .suite,
  .section-signal,
  .page-header {
    background: none;
    color: inherit;
  }

  .page-header h1,
  .suite h2,
  .suite h3 {
    color: inherit;
  }
}