/*
 * The alarm story: the home page's opening, the "same alarm, twice" comparison, the three steps,
 * the film frame (also on the Cloud page) and the presentation page. Loaded only by the pages that use it.
 * Night surfaces use the brochure's colors: near-black, paper text, one red.
 */

.night,
.night-cmp,
.night-film,
.deck-page {
  --night: #0a0a09;
  --night-line: #2e2e2a;
  --night-text: #d8d2c5;
  --night-muted: #8f8a7e;
  --night-dim: #8c877c;
  --night-paper: #f2ede2;
  --night-red: #e23d44;
  --night-alarm: #ff3b47;
  color: var(--night-text);
  background: var(--night);
}

/* ---------- opening ---------- */

.night {
  position: relative;
  padding: clamp(2.6rem, 4.6vw, 4.8rem) 0 clamp(3.2rem, 5vw, 5.2rem);
  overflow: hidden;
  isolation: isolate;
}

/* the tripwire, carried across the page */
.night::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--night-red) 0 20px, transparent 20px 32px);
}

/* the copy on the left, the camera on the right, the buttons under both: the document's order
   (copy, camera, buttons) is the order on the screen at every width, and so is the focus order */
.night-shell {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  grid-template-areas: "copy side" "actions actions";
  column-gap: clamp(28px, 4vw, 64px);
}

.night-copy {
  grid-area: copy;
  align-self: center;
}

.night-side {
  grid-area: side;
  align-self: center;
}

.night-actions {
  grid-area: actions;
  align-self: start;
}

.night-copy,
.night-side,
.night-actions {
  min-width: 0;
}

.night-eyebrow {
  margin: 0 0 1.5rem;
  color: var(--night-red);
  font-family: var(--kal-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.night-log {
  display: grid;
  gap: .34rem;
  margin: 0 0 1.4rem;
  padding: 0;
  color: var(--night-muted);
  font-family: var(--kal-mono);
  font-size: clamp(.78rem, 1vw, .95rem);
  font-weight: 500;
  line-height: 1.2;
  list-style: none;
}

.night-log li {
  position: relative;
  display: grid;
  grid-template-columns: 4.2em 5.8em auto;
  align-items: baseline;
}

.night-log li > span:nth-child(2) {
  font-size: .8em;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.night-log .night-now {
  color: var(--night-paper);
  font-weight: 600;
}

.night-log .night-now::before {
  content: "";
  position: absolute;
  top: .28em;
  left: -1.25em;
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: var(--night-alarm);
  animation: night-blink 1.2s steps(2, start) infinite;
}

/* The lines come in by themselves from the first paint, so the script has nothing to hide when it
   arrives. A replay sets data-norun for one frame to start them again. Not in the still picture. */
@media (prefers-reduced-motion: no-preference) {
  .night:not([data-norun]):not([data-static]) .night-log li {
    opacity: 0;
    animation: night-in .5s ease forwards;
  }
}

.night .night-log li:nth-child(1) { animation-delay: .25s; }
.night .night-log li:nth-child(2) { animation-delay: .7s; }
.night .night-log li:nth-child(3) { animation-delay: 1.15s; }
.night .night-log li:nth-child(4) { animation-delay: 1.6s; }
.night .night-log li:nth-child(5) { animation-delay: 2.3s; }

@keyframes night-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes night-blink {
  to { opacity: .25; }
}

/* the question and its answer share one place */
.night-swap {
  display: grid;
}

.night-swap > * {
  grid-area: 1 / 1;
  transition: opacity .6s ease;
}

.night .night-title {
  margin: 0;
  color: var(--night-paper);
  font-family: var(--kal-display);
  font-size: clamp(4.6rem, 9vw, 9.6rem);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.05em;
}

.night .night-a .night-title {
  font-size: clamp(3.2rem, 6.1vw, 6.5rem);
  line-height: .88;
}

.night .night-sub {
  max-width: 22em;
  margin: 1.5rem 0 0;
  color: #e6e0d3;
  font-size: clamp(1.2rem, 1.9vw, 1.75rem);
  line-height: 1.3;
}

.night-a {
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}

/* The question is the page's h1: it fades, but it stays in the accessibility tree. */
.night[data-state="a"] .night-q {
  opacity: 0;
}

.night[data-state="a"] .night-a {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease .2s;
}

/* The still picture (reduced motion, or no script): the question, then the answer under it as its
   smaller reply, and the man on the line in his red box. The same rules apply from the first paint
   under prefers-reduced-motion (end of this file) and without script (the noscript rule in Index.cshtml). */
.night[data-static] .night-swap {
  display: block;
}

.night[data-static] .night-q,
.night[data-static] .night-a {
  opacity: 1;
  visibility: visible;
}

.night[data-static] .night-a {
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--night-line);
}

.night[data-static] .night-a .night-title {
  font-size: clamp(2rem, 3.3vw, 3.3rem);
}

.night[data-static] .night-a .night-sub {
  margin-top: .7rem;
  font-size: 1.05rem;
}

.night[data-static] .night-log li {
  opacity: 1;
  animation: none;
}

.night[data-static] .night-log .night-now::before {
  animation: none;
}

.night[data-static] .night-ov .actor,
.night[data-static] .night-ov .ashadow,
.night[data-static] .night-ov .abox {
  visibility: visible;
}

.night-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2.2rem;
}

.night-btn-primary {
  color: #fff;
  border-color: var(--night-red);
  background: var(--kal-red);
}

.night-btn-ghost {
  color: var(--night-paper);
  border-color: #6b675e;
  background: transparent;
}

.night-btn-primary:hover,
.night-btn-primary:focus-visible,
.night-btn-ghost:hover,
.night-btn-ghost:focus-visible {
  color: var(--night);
  border-color: var(--night-paper);
  background: var(--night-paper);
}

/* the camera */
.night-side {
  display: grid;
}

.night-stage {
  position: relative;
  grid-area: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
  background: #000;
  box-shadow: 0 0 0 1px var(--night-line), 0 30px 80px rgba(0, 0, 0, .55);
  aspect-ratio: 16 / 9;
}

.night-stage > img,
.night-ov {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.night-stage > img {
  object-fit: cover;
}

/* the script decides when he appears; without script the page shows him (see the noscript rule) */
.night-ov .actor,
.night-ov .ashadow,
.night-ov .abox {
  visibility: hidden;
}

.night-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 2.2em 1.1em .9em;
  color: var(--night-paper);
  font-size: clamp(.82rem, 1.15vw, 1rem);
  background: linear-gradient(0deg, rgba(10, 10, 9, .88), rgba(10, 10, 9, 0));
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  pointer-events: none;
}

.night[data-mode="try"]:not([data-crossed]) .night-hint {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}

.night[data-mode="try"] .night-ov .osd-bl {
  visibility: hidden;
}

.night[data-mode="try"] .night-stage {
  cursor: crosshair;
}

/* a finger moves him only until he has crossed; then the page scrolls again */
.night[data-mode="try"]:not([data-crossed]) .night-stage {
  touch-action: none;
}

.night-stage.night-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 6px var(--night-alarm);
  animation: night-flash .9s ease-out forwards;
  pointer-events: none;
}

@keyframes night-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* the alarm the visitor raised, with its clip: over the stage's corner on wide screens, under it otherwise */
.night-card {
  z-index: 3;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  display: grid;
  grid-template-areas: "top" "mini" "bar" "foot";
  gap: .5rem;
  width: min(38%, 300px);
  margin: 12px;
  padding: .75rem .8rem .8rem;
  color: #e9eef7;
  font-size: .82rem;
  border: 1px solid #33435f;
  border-left: 5px solid var(--night-alarm);
  border-radius: 8px;
  background: rgba(10, 16, 27, .96);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

.night-card-top { grid-area: top; }
.night-mini { grid-area: mini; }
.night-bar { grid-area: bar; }
.night-card-foot { grid-area: foot; }

.night-card[data-show] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s ease, transform .3s ease;
}

.night-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
}

.night-card-top strong {
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
}

.night-card-top span {
  color: #f4717f;
  font-family: var(--kal-mono);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.night-mini {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
  aspect-ratio: 16 / 9;
}

.night-mini > img,
.night-mini .night-ov {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.night-bar {
  position: relative;
  height: 1.5rem;
  border: 1px solid #25334b;
  border-radius: 5px;
  background: #0d1522;
}

.night-bar i {
  position: absolute;
  top: .56rem;
  right: 8px;
  left: 8px;
  height: .36rem;
  border-radius: 2px;
  background: linear-gradient(#ef8f2f 0 22%, #2fbf8e 22% 78%, #ef8f2f 78%);
}

.night-bar u {
  position: absolute;
  top: .1rem;
  left: 50%;
  border: .3rem solid transparent;
  border-top: .42rem solid var(--night-alarm);
  transform: translateX(-50%);
}

.night-bar s {
  position: absolute;
  top: .2rem;
  bottom: .2rem;
  left: 8px;
  width: 2px;
  background: #fff;
}

.night-card-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .7rem;
}

.night-status {
  min-height: 2.5em;
  margin: 0;
  color: #cfd8ea;
  line-height: 1.25;
}

.night-card-again {
  flex: none;
  padding: .35rem .7rem;
  color: #e9eef7;
  font-size: .76rem;
  font-weight: 700;
  border: 1px solid #5674ab;
  border-radius: 6px;
  background: #3f5c90;
  cursor: pointer;
}

.night-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.night-control {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  min-height: 42px;
  padding: 0 16px;
  color: var(--night-paper);
  font-family: var(--kal-mono);
  font-size: .65rem;
  letter-spacing: .035em;
  text-transform: uppercase;
  border: 1px solid var(--night-dim);
  border-radius: 1px;
  background: transparent;
  cursor: pointer;
}

.night-control[data-night-try] {
  border-color: var(--night-red);
}

.night-control:hover,
.night-control:focus-visible,
.night-control[aria-pressed="true"] {
  color: var(--night);
  border-color: var(--night-paper);
  background: var(--night-paper);
}

/* everything Cloud does, at the foot of the opening */
.night-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem 1.6rem;
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
  padding-top: 1.1rem;
  font-family: var(--kal-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-top: 1px solid var(--night-line);
}

.night .night-strip p {
  margin: 0;
  color: var(--night-red);
  font-weight: 600;
}

.night-strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.5rem;
  margin: 0;
  padding: 0;
  color: var(--night-text);
  list-style: none;
}

.night-strip li::before {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-right: .7em;
  vertical-align: .12em;
  background: var(--night-red);
}

/* ---------- the same alarm, twice ---------- */

.night-cmp {
  padding: clamp(4rem, 7vw, 7rem) 0;
}

.night-cmp .systems-overline,
.night-film .systems-overline {
  color: var(--night-red);
}

.systems-home .night-cmp h2 {
  max-width: none;
  margin: .7rem 0 0;
  color: var(--night-paper);
}


.night-cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(2rem, 4vw, 3.4rem);
}

.night-cmp-col {
  display: flex;
  flex-direction: column;
  padding-top: 1.1rem;
  border-top: 2px solid var(--night-line);
}

.night-cmp-new {
  border-top-color: var(--night-red);
}

.night-cmp-col h3 {
  margin: 0;
  color: var(--night-muted);
  font-family: var(--kal-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.night-cmp-new h3 {
  color: var(--night-red);
}

.night-cmp-col ol {
  display: grid;
  gap: .8rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}

.night-cmp-col li {
  display: grid;
  grid-template-columns: 5.6rem 1fr;
  align-items: baseline;
  gap: .9rem;
  color: #a8a294;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.3;
}

.night-cmp-col li > span:first-child {
  color: var(--night-dim);
  font-family: var(--kal-mono);
  font-size: .82em;
  font-weight: 600;
}

.night-cmp-new li {
  color: var(--night-paper);
}

.night-cmp-new li > span:first-child {
  color: var(--night-red);
}

.night-cmp .night-cmp-end {
  max-width: 16em;
  margin: auto 0 0;
  padding-top: 2rem;
  color: var(--night-muted);
  font-family: var(--kal-display);
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.night-cmp .night-cmp-new .night-cmp-end {
  color: var(--night-paper);
}

.night-cmp .night-cmp-note {
  margin: 2.4rem 0 0;
  color: var(--night-dim);
  font-size: .78rem;
}

/* ---------- the rest of the day ---------- */

.day-shell {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(28px, 5vw, 84px);
}

@media (min-width: 992px) and (min-height: 880px) {
  .day-head {
    position: sticky;
    top: 96px;
  }
}

.systems-home .day h2 {
  max-width: none;
  margin: .7rem 0 0;
}

.day .day-lead {
  max-width: 30em;
  margin: 1.2rem 0 0;
  color: var(--kal-ink-soft);
  font-size: 1.1rem;
  line-height: 1.6;
}

.day-figure {
  margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0;
}

.day-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.day-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--kal-ink);
}

.day-list li {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--kal-line);
}

.day-time {
  font-family: var(--kal-mono);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
}

.day-tag {
  display: block;
  color: var(--kal-red-deep);
  font-family: var(--kal-mono);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.9;
  text-transform: uppercase;
}

.day-list h3 {
  margin: .3rem 0 0;
  font-family: var(--kal-display);
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
}

.day .day-list p {
  margin: .55rem 0 0;
  color: var(--kal-ink-soft);
  font-size: .98rem;
  line-height: 1.55;
}

.day-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-top: clamp(2rem, 3.4vw, 3rem);
}

.day .day-loop {
  margin: 0;
  font-family: var(--kal-display);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
}

.day-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.day-actions small {
  color: var(--kal-muted);
  font-size: .8rem;
}

/* ---------- the three steps (the Cloud page) ---------- */

.night-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(2rem, 4vw, 3.2rem);
}

.night-step {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  border-top: 2px solid var(--kal-ink);
}

.night-step-time {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin: 0;
}

.night-step-time b {
  font-family: var(--kal-mono);
  font-size: 1.05rem;
  font-weight: 600;
}

.night-step-time span {
  color: var(--kal-red-deep);
  font-family: var(--kal-mono);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.night-step h3 {
  margin: .7rem 0 0;
  font-family: var(--kal-display);
  font-size: clamp(1.9rem, 2.7vw, 2.5rem);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.04em;
}

.night-step > p:not(.night-step-time) {
  margin: .9rem 0 1.4rem;
  color: var(--kal-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.night-step figure {
  margin: auto 0 0;
  overflow: hidden;
  border-radius: 3px;
  background: #0a101b;
  aspect-ratio: 4 / 3;
}

.night-step img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.night-step-screen img {
  object-fit: contain;
}

.night-steps .night-steps-more {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}

.night-steps .night-steps-more + .night-steps-note {
  margin-top: .9rem;
}

.night-steps .night-steps-note {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  color: var(--kal-muted);
  font-size: .8rem;
}

/* on the Cloud page the section has no .systems-home around it */
.night-steps-heading h2 {
  margin: .7rem 0 0;
  font-family: var(--kal-display);
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.045em;
}

/* ---------- the film ---------- */

.night-film {
  padding: clamp(4rem, 7vw, 7rem) 0;
}

.night-film-shell {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.night-film h2 {
  margin: .7rem 0 0;
  color: var(--night-paper);
  font-family: var(--kal-display);
  font-size: clamp(2.85rem, 5vw, 5rem);
  font-weight: 900;
  line-height: .91;
  letter-spacing: -.045em;
}

.night-film-copy p {
  max-width: 26em;
  margin: 1.2rem 0 0;
  font-size: 1.1rem;
  line-height: 1.6;
}

.night-film-copy .night-film-language {
  color: var(--night-muted);
  font-family: var(--kal-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.night-film-copy .night-film-note {
  margin-top: .8rem;
  color: var(--night-muted);
  font-size: .8rem;
}

.night-film-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: #000;
  box-shadow: 0 0 0 1px var(--night-line), 0 30px 80px rgba(0, 0, 0, .55);
  aspect-ratio: 16 / 9;
}

.night-film-frame img,
.night-film-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.night-film-button {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 96px);
  color: #fff;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  border-radius: 50%;
  background: var(--kal-red);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, background .2s ease, color .2s ease;
  aspect-ratio: 1;
}

.night-film-button i {
  margin-left: .15em;
}

.night-film-frame:hover .night-film-button,
.night-film-frame:focus-visible .night-film-button {
  color: var(--night);
  background: var(--night-paper);
  transform: translate(-50%, -50%) scale(1.06);
}

/* ---------- the presentation page ---------- */

.deck-page {
  padding: clamp(2.6rem, 4.6vw, 4.6rem) 0 clamp(3rem, 5vw, 5rem);
}

.deck-page .systems-overline {
  color: var(--night-red);
}

.deck-head h1 {
  margin: .8rem 0 0;
  color: var(--night-paper);
  font-family: var(--kal-display);
  font-size: clamp(2.9rem, 6vw, 5.6rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.045em;
}

.deck-page .deck-head p {
  max-width: 46em;
  margin: 1.3rem 0 0;
  font-size: 1.1rem;
  line-height: 1.6;
}

.deck-frame {
  position: relative;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  overflow: hidden;
  border-radius: 2px;
  background: #000;
  box-shadow: 0 0 0 1px var(--night-line), 0 30px 80px rgba(0, 0, 0, .55);
  aspect-ratio: 16 / 9;
}

.deck-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.deck-page .deck-hint {
  margin: .9rem 0 0;
  color: var(--night-muted);
  font-size: .85rem;
}

.deck-page .deck-hint-phone {
  display: none;
  color: var(--night-text);
}

.deck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.6rem;
}

/* ---------- Kalytera VMS, one level down ---------- */

.systems-hero-band .systems-overline {
  display: block;
  margin-bottom: 1.2rem;
}

.systems-home .systems-hero-band .systems-title {
  font-size: clamp(3.1rem, 5.2vw, 5.2rem);
  line-height: .88;
}

.systems-home .systems-hero-band .systems-lead {
  margin-top: 1.6rem;
}

/* what Kalytera VMS does, under its opening */
.vms-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
}

.vms-flow article {
  padding-top: .9rem;
  border-top: 2px solid var(--kal-ink);
}

.vms-flow span {
  color: var(--kal-red-deep);
  font-family: var(--kal-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
}

.vms-flow h3 {
  margin: .45rem 0 0;
  font-family: var(--kal-display);
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
}

.systems-home .vms-flow p {
  margin: .55rem 0 0;
  color: var(--kal-ink-soft);
  font-size: .95rem;
  line-height: 1.55;
}

/* ---------- narrower screens ---------- */

@media (max-width: 1199.98px) {
  .night-card {
    display: none;
    grid-area: auto;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    grid-template-areas: "mini top" "mini bar" "mini foot";
    align-content: start;
    column-gap: .9rem;
    justify-self: stretch;
    width: auto;
    margin: 10px 0 0;
    transform: none;
  }

  .night-card[data-show] {
    display: grid;
  }
}

@media (max-width: 991.98px) {
  .night-shell,
  .night-film-shell {
    grid-template-columns: 1fr;
  }

  /* one column, in the document's order: the copy, the camera, the buttons */
  .night-shell {
    grid-template-areas: "copy" "side" "actions";
  }

  .night-side {
    margin-top: 1.9rem;
  }

  .night-actions {
    margin-top: 1.7rem;
  }

  .night .night-title {
    font-size: clamp(4.2rem, 17vw, 8.4rem);
  }

  .night .night-a .night-title {
    font-size: clamp(3rem, 11.6vw, 5.8rem);
  }

  .night-steps-grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .day-shell {
    grid-template-columns: 1fr;
  }

  .day-figure {
    max-width: 560px;
  }

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

  .night-step figure {
    margin-top: 0;
  }
}

@media (max-width: 767.98px) {
  .night-cmp-grid {
    grid-template-columns: 1fr;
  }

  .night-cmp .night-cmp-end {
    padding-top: 1.4rem;
  }
}

@media (max-width: 575.98px) {
  .night-log {
    padding-left: 1.3em;
  }

  .vms-flow {
    grid-template-columns: 1fr;
  }

  .day-list li {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: .7rem;
  }

  .night-actions .systems-btn,
  .day-actions .systems-btn,
  .deck-actions .systems-btn {
    width: 100%;
  }

  .deck-page .deck-hint-phone {
    display: block;
  }
}

/* Reduced motion: the still picture from the first paint, before any script runs. The script may
   still move the man when the visitor asks for it ("Play it again", "Cross the line yourself"). */
@media (prefers-reduced-motion: reduce) {
  .night .night-swap {
    display: block;
  }

  .night .night-q,
  .night .night-a {
    opacity: 1;
    visibility: visible;
  }

  .night .night-a {
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--night-line);
  }

  .night .night-a .night-title {
    font-size: clamp(2rem, 3.3vw, 3.3rem);
  }

  .night .night-a .night-sub {
    margin-top: .7rem;
    font-size: 1.05rem;
  }

  .night .night-log li {
    opacity: 1;
    animation: none;
  }

  .night .night-log .night-now::before {
    animation: none;
  }

  .night-ov .actor,
  .night-ov .ashadow,
  .night-ov .abox {
    visibility: visible;
  }

  .night-swap > *,
  .night-card,
  .night-hint {
    transition: none;
  }

  .night-stage.night-flash::after {
    display: none;
  }
}