/*
 * The homepage's story as a plain page, for anyone without motion: reduced motion on, no JavaScript,
 * data saver or no WebGL2. Base.astro loads this by media query; the page's script switches it on
 * for the rest. It's a separate file so those visitors never see the moving layout first.
 */
html .nav {
  position: absolute;
}
html .story {
  height: auto;
}
html .story-mark,
html .scene,
html .pins,
html .trades,
html .desk,
html .quote-back,
html .quote-shadow,
html .envelope,
html .nav-stages,
html .nav-progress {
  display: none;
}
html .stage {
  position: static;
  height: auto;
  overflow: visible;
  contain: none;
  display: flex;
  flex-direction: column;
  background: var(--stone-50);
  color: var(--ink);
}
html .still {
  display: block;
  width: 100%;
  height: auto;
}
html .still-hero {
  order: 1;
  background: var(--evergreen-950);
}
html .hero {
  order: 2;
  position: static;
  padding: 40px var(--pad) 48px;
  background: var(--evergreen-950);
  color: var(--fg);
}
html .note {
  order: 3;
  position: static;
  width: auto;
  text-align: left;
  padding: 0 var(--pad) 24px;
  background: var(--evergreen-950);
}
html .beats {
  display: contents;
}
html .beat {
  position: static;
  width: auto;
  max-width: 980px;
  transform: none;
  opacity: 1;
  visibility: visible;
  color: var(--ink);
  padding: 64px var(--pad) 0;
  display: flex;
  flex-direction: column;
}
html .beat h2 {
  font-stretch: var(--wide);
}
html .beat p {
  display: block;
  color: var(--ink-2);
  max-width: 34em;
}
html .beat .still {
  order: 5;
  margin-top: 28px;
}
html .chips,
html .trade-hits,
html .trade-hint {
  display: none;
}
html .trade-lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  position: static;
  height: auto;
  padding: 0;
  max-width: 100%;
}
html .trade-lines [hidden] {
  display: block;
}
html .trade-lines small {
  grid-column: 1 / -1;
}
html .beat[data-beat='approved'] {
  order: 4;
}
html .beat[data-beat='plans'] {
  order: 5;
}
html .beat[data-beat='measured'] {
  order: 6;
}
html .beat[data-beat='priced'] {
  order: 7;
}
html .beat[data-beat='quoted'] {
  order: 8;
}
html .quote {
  order: 9;
  position: static;
  margin: 28px var(--pad) 0;
  width: auto;
  max-width: 794px;
  height: auto;
  font-size: 15px;
  visibility: visible;
  perspective: none;
}
html .quote-park,
html .quote-move,
html .fold,
html .sheet {
  position: static;
}
html .sheet {
  height: auto;
  padding-bottom: 28px;
  box-shadow: 0 1px 3px rgb(7 36 25 / 0.14);
}
html .sheet-band {
  position: static;
  padding-left: 1.6em;
}
html .sheet-to,
html .sheet h3,
html .sheet-rows,
html .sheet-sum,
html .sheet-terms {
  position: static;
  width: auto;
  margin: 1.4em 1.6em 0;
}
html .sheet h3 {
  font-size: clamp(30px, 7vw, 50px);
  margin-inline: 0.6em;
}
html .sheet-rows {
  width: calc(100% - 3.2em);
}
html .sheet-terms div {
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
}
html .beat[data-beat='posted'] {
  order: 10;
}
html .beat[data-beat='accepted'] {
  order: 11;
}
html .phone {
  order: 12;
  position: static;
  --ph: 600px;
  margin: 28px var(--pad) 72px;
  transform: none;
  visibility: visible;
}
html .flood {
  order: 13;
  position: static;
  visibility: visible;
  clip-path: none;
  padding: 72px var(--pad);
}
html .flood-copy {
  pointer-events: auto;
}
html.resume .stage .hero,
html.resume .stage .note {
  visibility: visible;
}