/* Qlynic · home · the page's own layer
   Section 1, the command wall: the room is drawn by Scripts/qlynic.wall.js,
   the words stand on its left on a wide screen and above it on a narrow one.
   Section 2, room 2: one visit, drawn by Scripts/qlynic.room.js; the scroll
   moves it along while the room stays in view. */

/* ── section 1 · the command wall ──────────────────────────────────────── */

.ql-wall {
  --wall-cl: max(calc((100% - var(--ql-container-wide)) / 2 + var(--ql-gutter)), var(--ql-gutter));
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-areas: "stage" "room" "foot";
  background: var(--ql-bg);
}

.ql-wall__room {
  grid-area: room;
  position: relative;
  z-index: 0;
  background: var(--ql-bg);
}
.ql-wall__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1.1s var(--ql-ease-out);
}
.ql-wall.is-live-gl .ql-wall__gl { opacity: 1; }

/* where the wall stands: laid out here, read by the script */
.ql-wall__frame {
  position: absolute;
  inset: 3% 2%;
  pointer-events: none;
}

/* the room's edges fall away into the page */
.ql-wall__room::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--ql-bg) 0%, rgb(5 5 5 / 0) 9%),
    linear-gradient(0deg, var(--ql-bg) 0%, rgb(5 5 5 / 0) 14%);
}

/* without WebGL: a picture of the same moment, 10:20 in the morning,
   fitted into the frame the way the drawing is */
.ql-wall__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-wall__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
}
.ql-wall.is-live-gl .ql-wall__flat { display: none; }

/* ── the words ── */

.ql-wall__stage {
  grid-area: stage;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.ql-wall__copy {
  container-type: inline-size;
  display: grid;
  justify-items: start;
  row-gap: var(--ql-sp-7);
  pointer-events: auto;
}

.ql-wall__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-wall__eyebrow .ql-quad { gap: 2px; }
.ql-wall__eyebrow .ql-quad i { background: var(--q); opacity: .78; transition: opacity .5s var(--ql-ease-out), box-shadow .5s var(--ql-ease-out); }
.ql-wall__eyebrow .ql-quad i.is-on { opacity: 1; box-shadow: 0 0 7px 0 var(--q); }
.ql-wall__eyebrow .ql-quad i:nth-child(1) { --q: var(--ql-q-tl); }
.ql-wall__eyebrow .ql-quad i:nth-child(2) { --q: var(--ql-q-tr); }
.ql-wall__eyebrow .ql-quad i:nth-child(3) { --q: var(--ql-q-bl); }
.ql-wall__eyebrow .ql-quad i:nth-child(4) { --q: var(--ql-q-br); }

.ql-wall__title {
  margin: 0;
  font-size: clamp(2.35rem, .6rem + 3.6vw, 4.4rem);
  font-size: min(clamp(2.35rem, .6rem + 3.6vw, 4.4rem), 12.6cqi);
  line-height: 1.02;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.042em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-wall__title span { display: block; }

.ql-wall__lead {
  margin: 0;
  max-inline-size: 44ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

.ql-wall__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-5);
  margin-block-start: var(--ql-sp-3);
}

/* the four parts, as a read-out: each lights as its screen works, and
   pointing at one turns the room toward it */
.ql-wall__parts {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--ql-sp-5) var(--ql-sp-10);
  margin: var(--ql-sp-6) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: var(--ql-lh-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-wall__parts li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ql-sp-5);
  transition: color .4s var(--ql-ease-out);
}
.ql-wall__parts li[data-ql-wall-part="tl"] { --div-stop: var(--ql-q-tl); }
.ql-wall__parts li[data-ql-wall-part="tr"] { --div-stop: var(--ql-q-tr); }
.ql-wall__parts li[data-ql-wall-part="bl"] { --div-stop: var(--ql-q-bl); }
.ql-wall__parts li[data-ql-wall-part="br"] { --div-stop: var(--ql-q-br); }
.ql-wall__parts .ql-quad i { transition: opacity .4s var(--ql-ease-out), box-shadow .4s var(--ql-ease-out); }
.ql-wall__parts li:not(.is-on) .ql-quad i:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) { box-shadow: none; }
.ql-wall__parts li:not(.is-on) .ql-quad[data-q="tl"] i:nth-child(1),
.ql-wall__parts li:not(.is-on) .ql-quad[data-q="tr"] i:nth-child(2),
.ql-wall__parts li:not(.is-on) .ql-quad[data-q="bl"] i:nth-child(3),
.ql-wall__parts li:not(.is-on) .ql-quad[data-q="br"] i:nth-child(4) { opacity: .62; }
.ql-wall__parts li::after {
  content: "";
  position: absolute;
  inset-inline: calc(12px + var(--ql-sp-5)) 0;
  inset-block-end: -5px;
  block-size: 1px;
  background: var(--div-stop);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ql-ease-out);
}
.ql-wall__parts li.is-on { color: var(--ql-text-strong); }
.ql-wall__parts li.is-on::after { transform: scaleX(1); }
.ql-wall__num { color: var(--ql-text-subtle); }
.ql-wall__parts li.is-on .ql-wall__num { color: var(--div-stop); }

/* ── under the picture ── */

.ql-wall__foot {
  grid-area: foot;
  position: relative;
  z-index: 2;
  padding: var(--ql-sp-5) var(--ql-gutter) var(--ql-sp-11);
  text-align: center;
  pointer-events: none;
}
.ql-wall__note {
  margin: 0 auto;
  max-inline-size: 46ch;
  font-size: var(--ql-fs-xs);
  line-height: 1.5;
  color: var(--ql-text-muted);
  text-wrap: balance;
}
.ql-wall__read {
  margin: var(--ql-sp-4) 0 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ql-text-body);
  overflow-wrap: anywhere;
}

/* ── phones and tablets: the words, then the room, then the line ── */

@media (max-width: 1023px) {
  .ql-wall__stage { padding-block: var(--ql-sp-11) var(--ql-sp-6); }
  .ql-wall__room { aspect-ratio: 1.12; margin-block-start: calc(var(--ql-sp-6) * -1); }
  .ql-wall__frame { inset: 6% 1% 9%; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .ql-wall__room { aspect-ratio: 1.45; }
  .ql-wall__frame { inset: 6% 6% 10%; }
}

/* ── a wide screen: one screen under the header, like a photograph ── */

@media (min-width: 1024px) {
  .ql-wall {
    grid-template-areas: "a";
    align-items: center;
    min-block-size: max(660px, calc(100vh - 84px));
    min-block-size: max(660px, calc(100svh - 84px));
  }
  .ql-wall__room { grid-area: a; position: absolute; inset: 0; }
  .ql-wall__stage { grid-area: a; padding-block: var(--ql-sp-12) var(--ql-sp-14); }
  .ql-wall__copy { max-inline-size: min(37rem, 40%); }
  .ql-wall__frame {
    inset-block: 4% 11%;
    inset-inline-start: max(38%, calc(var(--wall-cl) + min(37rem, 40vw) + var(--ql-sp-8)));
    inset-inline-end: calc(var(--wall-cl) * .2);
  }
  /* the words' side of the room stays dark enough to read on */
  .ql-wall__room::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(5 5 5 / .9) 0%, rgb(5 5 5 / .78) calc(var(--wall-cl) + 22rem), rgb(5 5 5 / 0) calc(var(--wall-cl) + 40rem));
  }
  .ql-wall__foot {
    grid-area: a;
    align-self: end;
    padding: 0 0 var(--ql-sp-9);
    margin-inline-start: max(38%, calc(var(--wall-cl) + min(37rem, 40vw) + var(--ql-sp-8)));
    margin-inline-end: calc(var(--wall-cl) * .2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ql-wall__gl,
  .ql-wall__parts li,
  .ql-wall__parts li::after,
  .ql-wall__parts .ql-quad i,
  .ql-wall__eyebrow .ql-quad i { transition: none; }
}

/* ── section 2 · room 2 ─────────────────────────────────────────────────── */

.ql-room {
  --room-top: 70px;
  --room-cl: max(calc((100% - var(--ql-container-wide)) / 2 + var(--ql-gutter)), var(--ql-gutter));
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
}

/* the words above the room */
.ql-room__head {
  display: grid;
  row-gap: var(--ql-sp-7);
  padding-block: var(--ql-sp-13) var(--ql-sp-9);
}
.ql-room__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0 0 var(--ql-sp-6);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-room__eyebrow .ql-quad { --div-stop: var(--ql-q-tr); gap: 2px; }
.ql-room__title {
  margin: 0;
  font-size: clamp(2.35rem, .9rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.042em;
  color: var(--ql-text-strong);
}
.ql-room__lead {
  margin: 0;
  max-inline-size: 44ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* the room: a picture box until the script runs it */
.ql-room__pin {
  position: relative;
  z-index: 0;
  aspect-ratio: 1.163;
  background: var(--ql-bg);
}
.ql-room__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1.1s var(--ql-ease-out);
}
.ql-room.is-live-gl .ql-room__gl { opacity: 1; }
.ql-room__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-room__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-room__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.ql-room.is-live-gl .ql-room__flat { display: none; }
/* the room's edges fall away into the page */
.ql-room__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--ql-bg) 0%, rgb(5 5 5 / 0) 8%),
    linear-gradient(0deg, var(--ql-bg) 0%, rgb(5 5 5 / 0) 10%);
}

/* the five steps */
.ql-room__side { position: relative; z-index: 2; }
.ql-room__steps {
  display: grid;
  gap: var(--ql-sp-9);
  margin: 0;
  padding: var(--ql-sp-9) 0 0;
  list-style: none;
}
.ql-room__step {
  --u: 0;
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: var(--ql-sp-5);
}
.ql-room__num {
  padding-block-start: .5em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--ql-q-tr);
  transition: color .4s var(--ql-ease-out);
}
.ql-room__step-title {
  margin: 0;
  font-size: clamp(1.12rem, 1rem + .42vw, 1.4rem);
  line-height: 1.3;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.02em;
  color: var(--ql-text-strong);
  transition: color .4s var(--ql-ease-out);
}
.ql-room__step-body > p {
  margin: 0;
  padding-block-start: var(--ql-sp-4);
  max-inline-size: 46ch;
  font-size: var(--ql-fs-md);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* after the room */
.ql-room__after {
  display: grid;
  row-gap: var(--ql-sp-6);
  margin-block-start: var(--ql-sp-11);
  padding-block: var(--ql-sp-8) var(--ql-sp-13);
  border-block-start: 1px solid var(--ql-line-soft);
}
.ql-room__also-title {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-room__also {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: var(--ql-sp-5) var(--ql-sp-9);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-room__also li {
  position: relative;
  padding-inline-start: 1.15rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.5;
  color: var(--ql-text-body);
}
.ql-room__also li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .58em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 1.5px;
  background: var(--ql-q-tr);
  box-shadow: 0 0 6px -1px var(--ql-q-tr);
}
.ql-room__note {
  margin: var(--ql-sp-3) 0 0;
  font-size: var(--ql-fs-xs);
  line-height: 1.5;
  color: var(--ql-text-subtle);
}

/* ── a wide screen ── */

@media (min-width: 1024px) {
  .ql-room { --room-top: 86px; }
  .ql-room__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--ql-sp-12);
    padding-block: var(--ql-sp-14) var(--ql-sp-11);
  }
  .ql-room__lead { justify-self: end; }

  /* standing open: the steps on the left, the picture on the right */
  .ql-room__track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    align-items: start;
    column-gap: var(--ql-sp-10);
    max-inline-size: calc(var(--ql-container-wide) + var(--ql-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--ql-gutter);
  }
  .ql-room__pin { grid-column: 2; grid-row: 1; aspect-ratio: 1.4545; }
  .ql-room__side { grid-column: 1; grid-row: 1; }
  .ql-room__side .ql-container { padding: 0; max-inline-size: none; }
  .ql-room__steps { padding-block-start: 0; }
}

/* ── the room running: the scroll is the visit's clock ── */

.ql-room.is-scroll .ql-room__step-title,
.ql-room.is-scroll .ql-room__num { color: var(--ql-text-subtle); }
.ql-room.is-scroll .ql-room__step.is-on .ql-room__step-title { color: var(--ql-text-strong); }
.ql-room.is-scroll .ql-room__step.is-on .ql-room__num,
.ql-room.is-scroll .ql-room__step.is-done .ql-room__num { color: var(--ql-q-tr); }
/* the step's own line, filling as its part of the visit plays */
.ql-room.is-scroll .ql-room__step::before {
  content: "";
  position: absolute;
  inset-block: calc(.5em + 1rem) 0;
  inset-inline-start: .3rem;
  inline-size: 1px;
  background: linear-gradient(var(--ql-q-tr), var(--ql-q-tr)) 0 0 / 100% calc(var(--u) * 100%) no-repeat, var(--ql-line-soft);
  opacity: 0;
  transition: opacity .4s var(--ql-ease-out);
}
.ql-room.is-scroll .ql-room__step.is-on::before { opacity: 1; }

@media (min-width: 1024px) {
  .ql-room.is-scroll .ql-room__track {
    --room-pin: max(560px, calc(100svh - var(--room-top)));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "a";
    max-inline-size: none;
    padding-inline: 0;
    block-size: calc(var(--room-pin) + 5 * 74svh);
  }
  .ql-room.is-scroll .ql-room__pin,
  .ql-room.is-scroll .ql-room__side {
    grid-area: a;
    align-self: start;
    position: sticky;
    inset-block-start: var(--room-top);
    block-size: var(--room-pin);
    aspect-ratio: auto;
  }
  .ql-room.is-scroll .ql-room__side { display: flex; align-items: center; pointer-events: none; }
  .ql-room.is-scroll .ql-room__side .ql-container {
    inline-size: 100%;
    max-inline-size: calc(var(--ql-container-wide) + var(--ql-gutter) * 2);
    padding-inline: var(--ql-gutter);
  }
  .ql-room.is-scroll .ql-room__steps { max-inline-size: min(30rem, 34%); gap: var(--ql-sp-7); pointer-events: auto; }
  /* only the step being played stands open */
  .ql-room.is-scroll .ql-room__step-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .6s var(--ql-ease-out), opacity .45s var(--ql-ease-out);
  }
  .ql-room.is-scroll .ql-room__step-body > p { overflow: hidden; min-block-size: 0; }
  .ql-room.is-scroll .ql-room__step.is-on .ql-room__step-body { grid-template-rows: 1fr; opacity: 1; }
  /* where the pane stands, and the dark the words stand on */
  .ql-room.is-scroll .ql-room__frame {
    inset-block: 7% 9%;
    inset-inline-start: max(40%, calc(var(--room-cl) + min(30rem, 34vw) + var(--ql-sp-10)));
    inset-inline-end: calc(var(--room-cl) * .35);
  }
  .ql-room.is-scroll .ql-room__pin::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(5 5 5 / .92) 0%, rgb(5 5 5 / .84) calc(var(--room-cl) + 22rem), rgb(5 5 5 / 0) calc(var(--room-cl) + 38rem));
  }
}

@media (max-width: 1023px) {
  .ql-room { --room-ph: min(54svh, 120vw); --room-step: 58svh; }
  .ql-room.is-scroll .ql-room__pin {
    position: sticky;
    inset-block-start: var(--room-top);
    z-index: 1;
    aspect-ratio: auto;
    block-size: var(--room-ph);
  }
  .ql-room.is-scroll .ql-room__frame { inset: 4% 2% 6%; }
  /* the steps come up under the room, and each one stays put while it
     plays, the next sliding over it */
  .ql-room.is-scroll .ql-room__side { z-index: 0; }
  .ql-room.is-scroll .ql-room__steps { gap: 0; padding-block: 0; }
  .ql-room.is-scroll .ql-room__steps::after { content: ""; display: block; block-size: var(--room-step); }
  .ql-room.is-scroll .ql-room__step {
    position: sticky;
    inset-block-start: calc(var(--room-top) + var(--room-ph));
    min-block-size: var(--room-step);
    align-content: start;
    padding-block-start: var(--ql-sp-8);
    background: var(--ql-bg);
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .ql-room { --room-ph: min(56svh, 70vw); }
  .ql-room__pin { aspect-ratio: 1.4545; }
}

@media (prefers-reduced-motion: reduce) {
  .ql-room__gl,
  .ql-room__num,
  .ql-room__step-title,
  .ql-room.is-scroll .ql-room__step::before,
  .ql-room.is-scroll .ql-room__step-body { transition: none; }
}

/* ── section 3 · patients, at night ─────────────────────────────────────── */

.ql-night {
  --night-top: 70px;
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
}
.ql-night__grid {
  display: grid;
  row-gap: var(--ql-sp-9);
  padding-block-start: var(--ql-sp-13);
}

/* the words */
.ql-night__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0 0 var(--ql-sp-6);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-night__eyebrow .ql-quad { --div-stop: var(--ql-q-bl); gap: 2px; }
.ql-night__title {
  margin: 0;
  font-size: clamp(2.35rem, .9rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.042em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-night__lead {
  margin: var(--ql-sp-7) 0 0;
  max-inline-size: 44ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* the phone on the sill: a picture box until the script draws it */
.ql-night__stage { position: relative; }
.ql-night__view {
  position: relative;
  aspect-ratio: .82;
  max-inline-size: 34rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 22px;
  background: #06070a;
}
.ql-night__view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--ql-line-soft);
}
.ql-night__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1.1s var(--ql-ease-out);
}
.ql-night.is-live-gl .ql-night__gl { opacity: 1; }
.ql-night__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-night__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-night__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.ql-night.is-live-gl .ql-night__flat { display: none; }

/* the player's line under the phone: pause, and where the story is */
.ql-night__bar {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-6);
  max-inline-size: 34rem;
  margin: var(--ql-sp-6) auto 0;
}
.ql-night__play {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--ql-sp-4);
  min-block-size: 2.25rem;
  margin: 0;
  padding: 0 var(--ql-sp-6) 0 var(--ql-sp-5);
  border: 1px solid var(--ql-line-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / .03);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-body);
  cursor: pointer;
  transition: background-color .3s var(--ql-ease-out), color .3s var(--ql-ease-out);
}
.ql-night__play:hover { background: rgb(255 255 255 / .08); color: var(--ql-text-strong); }
.ql-night__play-icon {
  position: relative;
  inline-size: 10px;
  block-size: 10px;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}
.ql-night__play[data-state="paused"] .ql-night__play-icon {
  background: currentColor;
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}
.ql-night__segs {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.ql-night__segs i {
  --p: 0;
  position: relative;
  display: block;
  block-size: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: rgb(255 255 255 / .12);
}
.ql-night__segs i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ql-q-bl);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}
.ql-night__now {
  margin: var(--ql-sp-5) auto 0;
  max-inline-size: 34rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.5;
  color: var(--ql-text-body);
}
.ql-night__now span {
  margin-inline-end: var(--ql-sp-4);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  letter-spacing: .14em;
  color: var(--ql-q-bl);
}

/* the five steps, always open */
.ql-night__steps {
  display: grid;
  gap: var(--ql-sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-night__step {
  --u: 0;
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: var(--ql-sp-5);
}
.ql-night__num {
  padding-block-start: .5em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--ql-q-bl);
  transition: color .4s var(--ql-ease-out);
}
.ql-night__step-title {
  margin: 0;
  font-size: clamp(1.12rem, 1rem + .42vw, 1.4rem);
  line-height: 1.3;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.02em;
  color: var(--ql-text-strong);
  transition: color .4s var(--ql-ease-out);
}
.ql-night__step-body {
  margin: 0;
  padding-block-start: var(--ql-sp-4);
  max-inline-size: 46ch;
  font-size: var(--ql-fs-md);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
/* a title the script made into a way to its step */
.ql-night__jump {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  color: inherit;
  cursor: pointer;
}
.ql-night__jump:hover { color: var(--ql-text-strong); }

/* the story running: the step on the phone stands out, the others step back */
.ql-night.is-marked .ql-night__step-title,
.ql-night.is-marked .ql-night__num { color: var(--ql-text-subtle); }
.ql-night.is-marked .ql-night__step.is-on .ql-night__step-title { color: var(--ql-text-strong); }
.ql-night.is-marked .ql-night__step.is-on .ql-night__num { color: var(--ql-q-bl); }
.ql-night.is-marked .ql-night__step::before {
  content: "";
  position: absolute;
  inset-block: calc(.5em + 1rem) 0;
  inset-inline-start: .3rem;
  inline-size: 1px;
  background: linear-gradient(var(--ql-q-bl), var(--ql-q-bl)) 0 0 / 100% calc(var(--u) * 100%) no-repeat, var(--ql-line-soft);
  opacity: 0;
  transition: opacity .4s var(--ql-ease-out);
}
.ql-night.is-marked .ql-night__step.is-on::before { opacity: 1; }

/* after the phone */
.ql-night__after {
  display: grid;
  row-gap: var(--ql-sp-6);
  margin-block-start: var(--ql-sp-12);
  padding-block: var(--ql-sp-8) var(--ql-sp-13);
  border-block-start: 1px solid var(--ql-line-soft);
}
.ql-night__also-title {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-night__also {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: var(--ql-sp-5) var(--ql-sp-9);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-night__also li {
  position: relative;
  padding-inline-start: 1.15rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.5;
  color: var(--ql-text-body);
}
.ql-night__also li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .58em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 1.5px;
  background: var(--ql-q-bl);
  box-shadow: 0 0 6px -1px var(--ql-q-bl);
}
.ql-night__note {
  margin: var(--ql-sp-3) 0 0;
  font-size: var(--ql-fs-xs);
  line-height: 1.5;
  color: var(--ql-text-subtle);
}

/* ── a wide screen: the words on the left, the phone standing beside them ── */

@media (min-width: 1024px) {
  .ql-night { --night-top: 86px; }
  .ql-night__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head stage" "steps stage";
    align-items: start;
    column-gap: clamp(3rem, 5.5vw, 7rem);
    row-gap: var(--ql-sp-10);
    padding-block-start: var(--ql-sp-14);
  }
  .ql-night__head { grid-area: head; }
  .ql-night__steps { grid-area: steps; }
  .ql-night__stage {
    grid-area: stage;
    position: sticky;
    inset-block-start: calc(var(--night-top) + var(--ql-sp-8));
  }
  .ql-night__view {
    aspect-ratio: .8;
    inline-size: min(100%, max(22rem, calc((100svh - var(--night-top) - 7.5rem) * .8)));
    max-inline-size: none;
  }
  .ql-night__bar { inline-size: min(100%, max(22rem, calc((100svh - var(--night-top) - 7.5rem) * .8))); max-inline-size: none; }
  .ql-night__now { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ql-night__gl,
  .ql-night__num,
  .ql-night__step-title,
  .ql-night__play,
  .ql-night.is-marked .ql-night__step::before { transition: none; }
}

/* ── section 4 · the front desk, overnight ───────────────────────────────── */

.ql-desk {
  --desk-top: 70px;
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
}

/* the words above the counter */
.ql-desk__head {
  display: grid;
  row-gap: var(--ql-sp-7);
  padding-block: var(--ql-sp-13) var(--ql-sp-9);
}
.ql-desk__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0 0 var(--ql-sp-6);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-desk__eyebrow .ql-quad { --div-stop: var(--ql-q-tl); gap: 2px; }
.ql-desk__title {
  margin: 0;
  font-size: clamp(2.35rem, .9rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.042em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-desk__lead {
  margin: 0;
  max-inline-size: 44ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* the counter, seen from above: a picture box until the script draws it */
.ql-desk__stage { position: relative; }
.ql-desk__view {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 22px;
  background: #07090c;
}
.ql-desk__view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--ql-line-soft);
}
.ql-desk__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1.1s var(--ql-ease-out);
}
.ql-desk.is-live-gl .ql-desk__gl { opacity: 1; }
.ql-desk__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-desk__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-desk__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.ql-desk.is-live-gl .ql-desk__flat { display: none; }

/* the night's clock under the counter: play, the slider, the time */
.ql-desk__bar {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-6);
  margin-block-start: var(--ql-sp-5);
}
.ql-desk__play {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--ql-sp-4);
  min-block-size: 2.25rem;
  margin: 0;
  padding: 0 var(--ql-sp-6) 0 var(--ql-sp-5);
  border: 1px solid var(--ql-line-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / .03);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-body);
  cursor: pointer;
  transition: background-color .3s var(--ql-ease-out), color .3s var(--ql-ease-out);
}
.ql-desk__play:hover { background: rgb(255 255 255 / .08); color: var(--ql-text-strong); }
.ql-desk__play-icon {
  position: relative;
  inline-size: 10px;
  block-size: 10px;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}
.ql-desk__play[data-state="paused"] .ql-desk__play-icon {
  background: currentColor;
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}
.ql-desk__track {
  --v: 0;
  position: relative;
  flex: 1;
  min-inline-size: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
/* the slider itself: a thin line, the night behind the thumb lit in sky */
.ql-desk__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: 2.75rem;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.ql-desk__range::-webkit-slider-runnable-track {
  block-size: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ql-q-tl) 0 calc(var(--v) * 100%), rgb(255 255 255 / .14) calc(var(--v) * 100%) 100%);
}
.ql-desk__range::-moz-range-track {
  block-size: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / .14);
}
.ql-desk__range::-moz-range-progress {
  block-size: 3px;
  border-radius: 2px;
  background: var(--ql-q-tl);
}
.ql-desk__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: -6.5px;
  border: 0;
  border-radius: 50%;
  background: var(--ql-ink-950);
  box-shadow: 0 0 0 4px rgb(56 189 248 / .3), 0 1px 4px rgb(0 0 0 / .6);
}
.ql-desk__range::-moz-range-thumb {
  inline-size: 16px;
  block-size: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--ql-ink-950);
  box-shadow: 0 0 0 4px rgb(56 189 248 / .3), 0 1px 4px rgb(0 0 0 / .6);
}
.ql-desk__range:focus { outline: none; }
.ql-desk__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ql-bg), 0 0 0 5px var(--ql-q-tl); }
.ql-desk__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ql-bg), 0 0 0 5px var(--ql-q-tl); }
/* where each step sits on the night: a mark under the line, its number above */
.ql-desk__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-desk__marks i {
  --x: 0;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(8px + var(--x) * (100% - 16px));
  inline-size: 1px;
  block-size: 9px;
  margin-block-start: 3px;
  background: rgb(255 255 255 / .28);
}
.ql-desk__marks b {
  position: absolute;
  inset-block-end: calc(100% + 13px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-family: var(--ql-font-mono);
  font-size: .625rem;
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ql-text-subtle);
  transition: color .3s var(--ql-ease-out);
}
.ql-desk__marks i.is-on { background: var(--ql-q-tl); }
.ql-desk__marks i.is-on b { color: var(--ql-q-tl); }
.ql-desk__clock {
  flex: none;
  min-inline-size: 5.6rem;
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--ql-text-strong);
}

/* the five steps, in the night's order, always open */
.ql-desk__steps {
  display: grid;
  gap: var(--ql-sp-8);
  margin: var(--ql-sp-10) 0 0;
  padding: 0;
  list-style: none;
}
.ql-desk__step {
  --u: 0;
  position: relative;
  padding-block-start: var(--ql-sp-6);
  border-block-start: 1px solid var(--ql-line-soft);
}
.ql-desk__time {
  display: flex;
  align-items: baseline;
  gap: var(--ql-sp-4);
  margin: 0 0 var(--ql-sp-4);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--ql-text-body);
}
.ql-desk__num {
  color: var(--ql-q-tl);
  transition: color .4s var(--ql-ease-out);
}
.ql-desk__step-title {
  margin: 0;
  font-size: clamp(1.12rem, 1rem + .42vw, 1.3rem);
  line-height: 1.3;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.02em;
  color: var(--ql-text-strong);
  transition: color .4s var(--ql-ease-out);
}
.ql-desk__step-body {
  margin: 0;
  padding-block-start: var(--ql-sp-4);
  max-inline-size: 46ch;
  font-size: var(--ql-fs-md);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
/* a title the script made into a way to its moment */
.ql-desk__jump {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  color: inherit;
  cursor: pointer;
}
.ql-desk__jump:hover { color: var(--ql-text-strong); }

/* the night running: the step the slider is on stands out, its line filling */
.ql-desk.is-marked .ql-desk__step-title,
.ql-desk.is-marked .ql-desk__num { color: var(--ql-text-subtle); }
.ql-desk.is-marked .ql-desk__step.is-on .ql-desk__step-title { color: var(--ql-text-strong); }
.ql-desk.is-marked .ql-desk__step.is-on .ql-desk__num { color: var(--ql-q-tl); }
.ql-desk.is-marked .ql-desk__step::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--ql-q-tl);
  transform: scaleX(var(--u));
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity .4s var(--ql-ease-out);
}
.ql-desk.is-marked .ql-desk__step.is-on::before { opacity: 1; }

/* after the counter */
.ql-desk__after {
  display: grid;
  row-gap: var(--ql-sp-6);
  margin-block-start: var(--ql-sp-12);
  padding-block: var(--ql-sp-8) var(--ql-sp-13);
  border-block-start: 1px solid var(--ql-line-soft);
}
.ql-desk__also-title {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-desk__also {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: var(--ql-sp-5) var(--ql-sp-9);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-desk__also li {
  position: relative;
  padding-inline-start: 1.15rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.5;
  color: var(--ql-text-body);
}
.ql-desk__also li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .58em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 1.5px;
  background: var(--ql-q-tl);
  box-shadow: 0 0 6px -1px var(--ql-q-tl);
}
.ql-desk__note {
  margin: var(--ql-sp-3) 0 0;
  font-size: var(--ql-fs-xs);
  line-height: 1.5;
  color: var(--ql-text-subtle);
}

/* ── a phone: the slider across the whole width, play and the time under it ── */

@media (max-width: 639px) {
  .ql-desk__bar { flex-wrap: wrap; row-gap: var(--ql-sp-2); }
  .ql-desk__track { order: -1; flex-basis: 100%; }
  .ql-desk__clock { margin-inline-start: auto; }
}

/* ── a tablet held upright: a wider counter, the steps in two columns ── */

@media (min-width: 640px) and (max-width: 1023px) {
  .ql-desk__view { aspect-ratio: 1.45; }
  .ql-desk__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ql-sp-9); }
}

/* ── a wide screen: the counter across the page, the five steps under it ── */

@media (min-width: 1024px) {
  .ql-desk { --desk-top: 86px; }
  .ql-desk__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--ql-sp-12);
    padding-block: var(--ql-sp-14) var(--ql-sp-11);
  }
  .ql-desk__lead { justify-self: end; }
  .ql-desk__view {
    inline-size: 100%;
    aspect-ratio: 1.85;
    max-block-size: max(26rem, calc(100svh - var(--desk-top) - 6.5rem));
  }
  .ql-desk__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: clamp(1.25rem, 2.2vw, 2.25rem);
  }
  .ql-desk__step-body { font-size: var(--ql-fs-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-desk__gl,
  .ql-desk__num,
  .ql-desk__step-title,
  .ql-desk__play,
  .ql-desk__marks b,
  .ql-desk.is-marked .ql-desk__step::before { transition: none; }
}

/* ── section 5 · business, at the violet hour ────────────────────────────── */

.ql-biz {
  --biz-top: 70px;
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
}

/* the words above the office */
.ql-biz__head {
  display: grid;
  row-gap: var(--ql-sp-7);
  padding-block: var(--ql-sp-13) var(--ql-sp-9);
}
.ql-biz__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0 0 var(--ql-sp-6);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-biz__eyebrow .ql-quad { --div-stop: var(--ql-q-br); gap: 2px; }
.ql-biz__title {
  margin: 0;
  font-size: clamp(2.35rem, .9rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.042em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-biz__lead {
  margin: 0;
  max-inline-size: 44ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* the office at dusk: a picture box until the script draws it */
.ql-biz__stage { position: relative; }
.ql-biz__view {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 22px;
  background: #07090c;
}
.ql-biz__view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--ql-line-soft);
}
.ql-biz__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1.1s var(--ql-ease-out);
}
.ql-biz.is-live-gl .ql-biz__gl { opacity: 1; }
.ql-biz__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-biz__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-biz__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.ql-biz.is-live-gl .ql-biz__flat { display: none; }

/* the evening's clock under the office: play, the slider, the time */
.ql-biz__bar {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-6);
  margin-block-start: var(--ql-sp-5);
}
.ql-biz__play {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--ql-sp-4);
  min-block-size: 2.25rem;
  margin: 0;
  padding: 0 var(--ql-sp-6) 0 var(--ql-sp-5);
  border: 1px solid var(--ql-line-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / .03);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-body);
  cursor: pointer;
  transition: background-color .3s var(--ql-ease-out), color .3s var(--ql-ease-out);
}
.ql-biz__play:hover { background: rgb(255 255 255 / .08); color: var(--ql-text-strong); }
.ql-biz__play-icon {
  position: relative;
  inline-size: 10px;
  block-size: 10px;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}
.ql-biz__play[data-state="paused"] .ql-biz__play-icon {
  background: currentColor;
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}
.ql-biz__track {
  --v: 0;
  position: relative;
  flex: 1;
  min-inline-size: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}
/* the slider itself: a thin line, the evening behind the thumb lit in violet */
.ql-biz__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: 2.75rem;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.ql-biz__range::-webkit-slider-runnable-track {
  block-size: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ql-q-br) 0 calc(var(--v) * 100%), rgb(255 255 255 / .14) calc(var(--v) * 100%) 100%);
}
.ql-biz__range::-moz-range-track {
  block-size: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / .14);
}
.ql-biz__range::-moz-range-progress {
  block-size: 3px;
  border-radius: 2px;
  background: var(--ql-q-br);
}
.ql-biz__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: -6.5px;
  border: 0;
  border-radius: 50%;
  background: var(--ql-ink-950);
  box-shadow: 0 0 0 4px rgb(167 139 250 / .3), 0 1px 4px rgb(0 0 0 / .6);
}
.ql-biz__range::-moz-range-thumb {
  inline-size: 16px;
  block-size: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--ql-ink-950);
  box-shadow: 0 0 0 4px rgb(167 139 250 / .3), 0 1px 4px rgb(0 0 0 / .6);
}
.ql-biz__range:focus { outline: none; }
.ql-biz__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ql-bg), 0 0 0 5px var(--ql-q-br); }
.ql-biz__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--ql-bg), 0 0 0 5px var(--ql-q-br); }
/* where each step sits in the evening: a mark under the line, its number above */
.ql-biz__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-biz__marks i {
  --x: 0;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(8px + var(--x) * (100% - 16px));
  inline-size: 1px;
  block-size: 9px;
  margin-block-start: 3px;
  background: rgb(255 255 255 / .28);
}
.ql-biz__marks b {
  position: absolute;
  inset-block-end: calc(100% + 13px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-family: var(--ql-font-mono);
  font-size: .625rem;
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .08em;
  color: var(--ql-text-subtle);
  transition: color .3s var(--ql-ease-out);
}
.ql-biz__marks i.is-on { background: var(--ql-q-br); }
.ql-biz__marks i.is-on b { color: var(--ql-q-br); }
.ql-biz__clock {
  flex: none;
  min-inline-size: 5.6rem;
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--ql-text-strong);
}

/* the five steps, in the evening's order, always open */
.ql-biz__steps {
  display: grid;
  gap: var(--ql-sp-8);
  margin: var(--ql-sp-10) 0 0;
  padding: 0;
  list-style: none;
}
.ql-biz__step {
  --u: 0;
  position: relative;
  padding-block-start: var(--ql-sp-6);
  border-block-start: 1px solid var(--ql-line-soft);
}
.ql-biz__time {
  display: flex;
  align-items: center;
  min-block-size: 1.375rem;
  gap: var(--ql-sp-4);
  margin: 0 0 var(--ql-sp-4);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--ql-text-body);
}
.ql-biz__num {
  color: var(--ql-q-br);
  transition: color .4s var(--ql-ease-out);
}
.ql-biz__step-title {
  margin: 0;
  font-size: clamp(1.12rem, 1rem + .42vw, 1.3rem);
  line-height: 1.3;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.02em;
  color: var(--ql-text-strong);
  transition: color .4s var(--ql-ease-out);
}
.ql-biz__step-body {
  margin: 0;
  padding-block-start: var(--ql-sp-4);
  max-inline-size: 46ch;
  font-size: var(--ql-fs-md);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
/* a title the script made into a way to its moment */
.ql-biz__jump {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  color: inherit;
  cursor: pointer;
}
.ql-biz__jump:hover { color: var(--ql-text-strong); }

/* the evening running: the step the slider is on stands out, its line filling */
.ql-biz.is-marked .ql-biz__step-title,
.ql-biz.is-marked .ql-biz__num { color: var(--ql-text-subtle); }
.ql-biz.is-marked .ql-biz__step.is-on .ql-biz__step-title { color: var(--ql-text-strong); }
.ql-biz.is-marked .ql-biz__step.is-on .ql-biz__num { color: var(--ql-q-br); }
.ql-biz.is-marked .ql-biz__step::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--ql-q-br);
  transform: scaleX(var(--u));
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity .4s var(--ql-ease-out);
}
.ql-biz.is-marked .ql-biz__step.is-on::before { opacity: 1; }

/* after the office */
.ql-biz__after {
  display: grid;
  row-gap: var(--ql-sp-6);
  margin-block-start: var(--ql-sp-12);
  padding-block: var(--ql-sp-8) var(--ql-sp-13);
  border-block-start: 1px solid var(--ql-line-soft);
}
.ql-biz__also-title {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}
.ql-biz__also {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: var(--ql-sp-5) var(--ql-sp-9);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-biz__also li {
  position: relative;
  padding-inline-start: 1.15rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.5;
  color: var(--ql-text-body);
}
.ql-biz__also li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .58em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 1.5px;
  background: var(--ql-q-br);
  box-shadow: 0 0 6px -1px var(--ql-q-br);
}
.ql-biz__note {
  margin: var(--ql-sp-3) 0 0;
  font-size: var(--ql-fs-xs);
  line-height: 1.5;
  color: var(--ql-text-subtle);
}

/* claims work in one province only: the steps and the line about them carry its name as a tag */
.ql-biz__tag {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--ql-sp-3);
  padding: .3em .62em .28em;
  border: 1px solid rgb(167 139 250 / .42);
  border-radius: 999px;
  font-family: var(--ql-font-mono);
  font-size: .625rem;
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: .12em;
  color: var(--ql-q-br);
}

/* ── a phone: the slider across the whole width, play and the time under it ── */

@media (max-width: 639px) {
  .ql-biz__bar { flex-wrap: wrap; row-gap: var(--ql-sp-2); }
  .ql-biz__track { order: -1; flex-basis: 100%; }
  .ql-biz__clock { margin-inline-start: auto; }
}

/* ── a tablet held upright: a wider office, the steps in two columns ── */

@media (min-width: 640px) and (max-width: 1023px) {
  .ql-biz__view { aspect-ratio: 1.45; }
  .ql-biz__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ql-sp-9); }
}

/* ── a wide screen: the office across the page, the five steps under it ── */

@media (min-width: 1024px) {
  .ql-biz { --biz-top: 86px; }
  .ql-biz__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--ql-sp-12);
    padding-block: var(--ql-sp-14) var(--ql-sp-11);
  }
  .ql-biz__lead { justify-self: end; }
  .ql-biz__view {
    inline-size: 100%;
    aspect-ratio: 1.85;
    max-block-size: max(26rem, calc(100svh - var(--biz-top) - 6.5rem));
  }
  .ql-biz__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: clamp(1.25rem, 2.2vw, 2.25rem);
  }
  .ql-biz__step-body { font-size: var(--ql-fs-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .ql-biz__gl,
  .ql-biz__num,
  .ql-biz__step-title,
  .ql-biz__play,
  .ql-biz__marks b,
  .ql-biz.is-marked .ql-biz__step::before { transition: none; }
}

/* ── section 6 · your first morning ──────────────────────────────────────── */

.ql-start {
  --start-top: 70px;
  position: relative;
  isolation: isolate;
  background: var(--ql-bg);
}

/* the words above the lobby */
.ql-start__head {
  display: grid;
  row-gap: var(--ql-sp-7);
  padding-block: var(--ql-sp-13) var(--ql-sp-9);
}
.ql-start__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-sp-5);
  margin: 0 0 var(--ql-sp-6);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
/* all four parts, the way the sign holds them */
.ql-start__eyebrow .ql-quad { gap: 2px; }
.ql-start__eyebrow .ql-quad i { background: var(--q); }
.ql-start__eyebrow .ql-quad i:nth-child(1) { --q: var(--ql-q-tl); }
.ql-start__eyebrow .ql-quad i:nth-child(2) { --q: var(--ql-q-tr); }
.ql-start__eyebrow .ql-quad i:nth-child(3) { --q: var(--ql-q-bl); }
.ql-start__eyebrow .ql-quad i:nth-child(4) { --q: var(--ql-q-br); }
.ql-start__title {
  margin: 0;
  font-size: clamp(2.35rem, .9rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  font-weight: var(--ql-fw-bold);
  letter-spacing: -.042em;
  color: var(--ql-text-strong);
  text-wrap: balance;
}
.ql-start__lead {
  margin: 0;
  max-inline-size: 44ch;
  font-size: clamp(1rem, .93rem + .28vw, 1.22rem);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}

/* the lobby wall: a picture box until the script draws it */
.ql-start__stage { position: relative; }
.ql-start__view {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 22px;
  background: #08090c;
}
.ql-start__view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--ql-line-soft);
}
.ql-start__gl {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1.1s var(--ql-ease-out);
}
.ql-start.is-live-gl .ql-start__gl { opacity: 1; }
.ql-start__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ql-start__flat {
  position: absolute;
  inset: 0;
  display: block;
}
.ql-start__still {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
}
.ql-start.is-live-gl .ql-start__flat { display: none; }

/* under the lobby: the button that pauses the morning, and its time */
.ql-start__bar {
  display: flex;
  align-items: center;
  gap: var(--ql-sp-6);
  min-block-size: 2.75rem;
  margin-block-start: var(--ql-sp-5);
}
.ql-start__play {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--ql-sp-4);
  min-block-size: 2.25rem;
  margin: 0;
  padding: 0 var(--ql-sp-6) 0 var(--ql-sp-5);
  border: 1px solid var(--ql-line-strong);
  border-radius: 999px;
  background: rgb(255 255 255 / .03);
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ql-text-body);
  cursor: pointer;
  transition: background-color .3s var(--ql-ease-out), color .3s var(--ql-ease-out);
}
.ql-start__play:hover { background: rgb(255 255 255 / .08); color: var(--ql-text-strong); }
.ql-start__play-icon {
  position: relative;
  inline-size: 10px;
  block-size: 10px;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}
.ql-start__play[data-state="paused"] .ql-start__play-icon {
  background: currentColor;
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}
.ql-start__clock {
  flex: none;
  min-inline-size: 5.6rem;
  margin: 0 0 0 auto;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-sm);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--ql-text-strong);
}

/* under the lobby: the plan, the three steps, what is good to know */
.ql-start__grid {
  display: grid;
  gap: var(--ql-sp-11) var(--ql-sp-10);
  margin-block-start: var(--ql-sp-10);
  padding-block-end: var(--ql-sp-14);
}
.ql-start__label {
  margin: 0;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ql-text-subtle);
}

/* the plan: a card, its top edge in the four colours */
.ql-start__plan {
  position: relative;
  display: grid;
  align-content: start;
  row-gap: var(--ql-sp-6);
  padding: var(--ql-sp-9) var(--ql-sp-8) var(--ql-sp-8);
  border: 1px solid var(--ql-line-soft);
  border-radius: 22px;
  background: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / .01));
}
.ql-start__plan::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 22px;
  block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ql-q-tl) 0 25%, var(--ql-q-tr) 25% 50%, var(--ql-q-bl) 50% 75%, var(--ql-q-br) 75% 100%);
}
.ql-start__price {
  display: flex;
  align-items: flex-end;
  gap: var(--ql-sp-5);
  margin: var(--ql-sp-2) 0 0;
}
.ql-start__amount {
  font-size: clamp(3.1rem, 2.4rem + 2.4vw, 4.4rem);
  font-weight: var(--ql-fw-bold);
  line-height: .9;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ql-text-strong);
}
.ql-start__per {
  padding-block-end: .3em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  font-weight: var(--ql-fw-medium);
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ql-text-body);
}
.ql-start__yearly {
  margin: 0;
  font-size: var(--ql-fs-sm);
  line-height: 1.5;
  color: var(--ql-text-muted);
}
.ql-start__yearly b { font-weight: var(--ql-fw-semibold); color: var(--ql-text-strong); }
.ql-start__terms,
.ql-start__also {
  display: grid;
  row-gap: var(--ql-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-start__terms { margin-block-start: var(--ql-sp-2); }
.ql-start__terms li,
.ql-start__also li {
  --q: var(--ql-q-tl);
  position: relative;
  padding-inline-start: 1.15rem;
  font-size: var(--ql-fs-sm);
  line-height: 1.5;
  color: var(--ql-text-body);
}
.ql-start__terms li::before,
.ql-start__also li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .58em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 1.5px;
  background: var(--q);
  box-shadow: 0 0 6px -1px var(--q);
}
/* the four colours in the Q's order, one to a line */
.ql-start__terms li:nth-child(4n + 2),
.ql-start__also li:nth-child(4n + 2) { --q: var(--ql-q-tr); }
.ql-start__terms li:nth-child(4n + 3),
.ql-start__also li:nth-child(4n + 3) { --q: var(--ql-q-bl); }
.ql-start__terms li:nth-child(4n + 4),
.ql-start__also li:nth-child(4n + 4) { --q: var(--ql-q-br); }
.ql-start__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ql-sp-5);
  margin-block-start: var(--ql-sp-4);
}
.ql-start__fine {
  margin: 0;
  font-size: var(--ql-fs-xs);
  line-height: 1.55;
  color: var(--ql-text-subtle);
  text-wrap: pretty;
}

/* the three steps */
.ql-start__how,
.ql-start__know {
  display: grid;
  align-content: start;
  row-gap: var(--ql-sp-7);
}
.ql-start__steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ql-start__step {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  padding-block: var(--ql-sp-6);
  border-block-start: 1px solid var(--ql-line-soft);
}
.ql-start__step:last-child { padding-block-end: 0; }
.ql-start__num {
  grid-row: span 2;
  padding-block-start: .3em;
  font-family: var(--ql-font-mono);
  font-size: var(--ql-fs-3xs);
  line-height: 1;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--ql-q-tl);
}
.ql-start__step:nth-child(2) .ql-start__num { color: var(--ql-q-tr); }
.ql-start__step:nth-child(3) .ql-start__num { color: var(--ql-q-bl); }
.ql-start__step-title {
  margin: 0;
  font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem);
  line-height: 1.3;
  font-weight: var(--ql-fw-semibold);
  letter-spacing: -.02em;
  color: var(--ql-text-strong);
}
.ql-start__step-body {
  margin: 0;
  padding-block-start: var(--ql-sp-3);
  max-inline-size: 42ch;
  font-size: var(--ql-fs-sm);
  line-height: 1.6;
  color: var(--ql-text-muted);
  text-wrap: pretty;
}
.ql-start__also { padding-block-start: var(--ql-sp-6); border-block-start: 1px solid var(--ql-line-soft); row-gap: var(--ql-sp-5); }

/* ── a tablet held upright: a wider lobby; the plan and the steps side by side, the rest across under them ── */

@media (min-width: 640px) and (max-width: 1023px) {
  .ql-start__view { aspect-ratio: 1.45; }
  .ql-start__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ql-start__know { grid-column: 1 / -1; }
  .ql-start__also { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ql-sp-9); }
}

/* ── a wide screen: the lobby across the page; the plan, the steps and the rest in a row ── */

@media (min-width: 1024px) {
  .ql-start { --start-top: 86px; }
  .ql-start__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--ql-sp-12);
    padding-block: var(--ql-sp-14) var(--ql-sp-11);
  }
  .ql-start__lead { justify-self: end; }
  .ql-start__view {
    inline-size: 100%;
    aspect-ratio: 2;
    max-block-size: max(26rem, calc(100svh - var(--start-top) - 6.5rem));
  }
  .ql-start__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.75rem, 3.4vw, 3.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ql-start__gl,
  .ql-start__play { transition: none; }
}