/* ---------- type: Lato and Roboto Mono, served from here (fonts/), the latin cuts the page uses; no request leaves the site for a font ---------- */
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/lato-400.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/lato-700.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/lato-900.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/roboto-mono.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* rendevu.ai — the day board. World: cards-v7 (Lato, Roboto Mono, the C palette). */

:root {
  --ink: #16151c;
  --ink-2: #43414e;
  --ink-3: #66646f;
  --line: #e2e0ec;
  --cream: #fdf6e4;
  --dk-txt: #f4f3f8;
  --dk-sub: #bfbccb;
  --dk-mute: #9c99ac;
  --dk-eye: #918ea2;

  --coral: #f4736b;
  --pink: #f58fcb;
  --mag: #ee6fb4;
  --violet: #c79bf7;
  --yel: #f3ce49;
  --mint: #5de9c0;
  --teal: #84dad6;
  --cyan: #7fdef8;
  --grn: #37c46a;

  --sky: linear-gradient(
    90deg,
    #fff8e8 0%,
    #ffffff 22%,
    #f3f9fd 52%,
    #f6f3fb 80%,
    #eee9f5 100%
  );
  --night: linear-gradient(
    180deg,
    #2b2545 0%,
    #1c1932 30%,
    #141226 65%,
    #0d0b15 100%
  );

  --font: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Roboto Mono", "SF Mono", Menlo, Consolas, monospace;

  --shadow-slab:
    0 40px 70px -32px rgba(50, 40, 90, 0.34),
    0 6px 16px -8px rgba(40, 30, 70, 0.1);
  --shadow-device:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 70px 110px -44px rgba(20, 12, 40, 0.5),
    0 22px 40px -22px rgba(20, 12, 40, 0.3);
  --shadow-device-dark:
    0 0 0 3px rgba(255, 255, 255, 0.16), 0 70px 110px -44px rgba(0, 0, 0, 0.75),
    0 22px 40px -22px rgba(0, 0, 0, 0.5);

  --inset: max(
    env(safe-area-inset-left, 0px),
    env(safe-area-inset-right, 0px)
  ); /* the notch, in landscape */
  --gutter: max(clamp(20px, 8.3vw, 120px), var(--inset));
  /* the page is the 1440 board; past that the edge grows so the column stays centered and the atmosphere keeps bleeding */
  --wrap: 1440px;
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  --nav-h: 88px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* no scroll-behavior on the root: site.js animates in-page links itself, and
   a smooth root also animates the browser's own scroll to a #fragment on
   load, which then collides with scroll restoration and bounces the page */
html {
  -webkit-text-size-adjust: 100%;
}
a,
button,
input {
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* browser surfaces carry the world too */
::selection {
  background: rgba(127, 222, 248, 0.45);
  color: var(--ink);
}
.dark ::selection {
  background: rgba(245, 143, 203, 0.45);
  color: #fff;
}
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
html {
  scrollbar-color: #c9c6d6 transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #c9c6d6;
  border-radius: 999px;
  border: 2px solid #fff;
}
::-webkit-scrollbar-track {
  background: transparent;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
p {
  margin: 0;
}
h1,
h2 {
  margin: 0;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(40px, 5.4vw, 78px);
  max-width: 16em;
}
h2 {
  font-size: clamp(34px, 3.7vw, 54px);
  max-width: 14ch;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 25px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}
.skip:focus {
  top: 16px;
}

/* ---------- type atoms from the cards ---------- */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stamp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--cyan));
  flex: 0 0 auto;
}
.rule {
  width: 56px;
  height: 6px;
  border-radius: 4px;
  background: var(--rule, var(--cyan));
}
.rule-center {
  margin-inline: auto;
}
.lede {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 52ch;
  text-wrap: pretty;
}
.mono-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dark h2 {
  color: var(--dk-txt);
}
.dark .lede {
  color: var(--dk-sub);
}
.dark .stamp,
.dark .mono-note {
  color: var(--dk-eye);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border-radius: 25px;
  border: 0;
  font: 700 16px/1 var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    background-color 0.2s;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 28px -16px rgba(22, 21, 28, 0.6);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 36px -18px rgba(22, 21, 28, 0.7);
  }
  .btn-primary:active {
    transform: translateY(0);
  }
  .btn-ghost:hover {
    background: #fff;
    box-shadow:
      inset 0 0 0 1px #c9c6d6,
      0 14px 28px -18px rgba(50, 40, 90, 0.35);
    transform: translateY(-2px);
  }
}
@media (hover: none) {
  .btn:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
  }
}
.dark .btn-primary {
  background: var(--dk-txt);
  color: var(--ink);
}
.dark .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dk-txt);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
  padding: 0 var(--edge);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgba(226, 224, 236, 0.6);
  transition:
    background-color 0.5s,
    color 0.5s,
    border-color 0.5s;
}
.nav.is-dark {
  color: var(--dk-txt);
  background: rgba(13, 11, 21, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav.is-dark .btn-primary {
  background: var(--dk-txt);
  color: var(--ink);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
}
/* The mark overshoots the cap height a little, sits on the R's cap midline (the d's ascender would pull it high),
   and takes the day's color: the moment in view, the same value the clock dot and the active nav link use */
.wordmark .mark {
  flex: none;
  position: relative;
  top: 1.4px;
  color: var(--nav-c, #7fdef8);
  transition: color 0.5s;
}
.footer .wordmark .mark {
  top: 1.1px;
  color: var(--violet);
}
.nav.is-dark .wordmark {
  color: var(--dk-txt);
}
.wordmark svg {
  display: block;
}
.nav-links {
  display: flex;
  gap: 36px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.nav-links a,
.nav-download {
  position: relative;
  padding: 6px 0;
}
.nav-links a::after,
.nav-download::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--nav-c, var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform 0.35s var(--ease-out),
    background-color 0.5s;
}
.nav-links a.is-active::after,
.nav-download.is-active::after {
  transform: scaleX(1);
}
@media (hover: hover) {
  .nav-links a:hover::after,
  .nav-download:hover::after {
    transform: scaleX(1);
  }
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-download {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.clock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: var(--clock-w, 22ch);
  flex: 0 0 auto;
  white-space: nowrap; /* pinned to the longest label by site.js so the nav never reflows on a swap */
}
.nav.is-dark .clock {
  color: var(--dk-mute);
}
.clock-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--nav-c, var(--cyan));
  box-shadow: 0 0 12px var(--nav-c, var(--cyan));
  transition:
    background-color 0.5s,
    box-shadow 0.5s;
}
.clock.is-swapping #clock-text {
  animation: clock-swap 0.5s var(--ease-out);
}
.clock-short {
  display: none;
}
@keyframes clock-swap {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- shared atmosphere ---------- */
.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* The mark, oversized, bleeding up from the bottom of the night: the ground's own weather, cream at 6% */
.bg-field {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.field-night {
  width: 2000px;
  left: 50%;
  bottom: -1000px;
  transform: translateX(-50%);
  color: var(--cream);
  opacity: 0.06;
}
.watermark {
  position: absolute;
  object-fit: cover;
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
  filter: grayscale(0.55) contrast(1.05);
}

/* ---------- 9:45 · the board ---------- */
.board {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(820px, calc(100vh - var(--nav-h)), 980px);
  background: var(--sky);
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
}
.watermark-ring {
  left: 48%;
  top: 0;
  width: 52%;
  height: 100%;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 30%,
    #000 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
}
.glow-yellow {
  left: max(-420px, calc(50% - 1140px));
  top: 380px;
  width: 1100px;
  height: 1100px;
  background: radial-gradient(
    circle,
    rgba(243, 206, 73, 0.38) 0%,
    rgba(243, 206, 73, 0) 64%
  );
}
.glow-cyan {
  left: max(760px, calc(50% + 40px));
  top: -300px;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(
    circle,
    rgba(127, 222, 248, 0.3) 0%,
    rgba(127, 222, 248, 0) 64%
  );
}
.board::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(246, 243, 251, 0), #f6f3fb);
}

.board-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 44px var(--edge) 0;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.cta-row-center {
  justify-content: center;
}

.lanes {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 8px auto 0;
  padding-top: 56px;
  height: 350px;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.lane {
  position: relative;
}
.lane::before {
  content: "";
  position: absolute;
  left: -50vw;
  right: -50vw;
  top: 50%;
  height: 1px;
  background: rgba(120, 110, 150, 0.22);
}
.lane-label {
  position: absolute;
  left: var(--gutter);
  top: calc(50% - 26px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #77758a;
}

.now {
  position: absolute;
  left: 62%;
  top: 12px;
  bottom: 6px;
  width: 6px;
  transform: translateX(-50%);
  z-index: 4;
}
.now-inline {
  display: none;
}
.now-line {
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 0;
  width: 6px;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: 0 0 24px var(--cyan);
  transform-origin: top;
  animation: now-sweep 1.1s var(--ease-out) both;
}
.now-pill {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #17708a;
  background: #e8f7fc;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
@keyframes now-sweep {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* slabs: the cards' drawn appointment blocks */
.slab {
  position: absolute;
  left: var(--x);
  top: 50%;
  width: var(--w, auto);
  transform: translate(var(--dx, 0px), -50%);
  animation: slab-settle 0.9s var(--ease-out) both;
}
.pill {
  position: absolute;
  left: var(--x);
  top: 20px;
  transform: translate(var(--dx, 0px), 0);
  animation: slab-settle 0.9s var(--ease-out) both;
}
.lane[data-lane="1"] .slab {
  animation-delay: 0.15s;
}
.lane[data-lane="2"] .slab {
  animation-delay: 0.3s;
}
.lane[data-lane="3"] .slab {
  animation-delay: 0.45s;
}
.slab-stack {
  top: 42%;
}
@keyframes slab-settle {
  from {
    opacity: 0;
    transform: translate(var(--dx, 0px), calc(-50% + 14px));
  }
  to {
    opacity: 1;
    transform: translate(var(--dx, 0px), -50%);
  }
}
.pill {
  animation-name: pill-settle;
}
@keyframes pill-settle {
  from {
    opacity: 0;
    transform: translate(var(--dx, 0px), 14px);
  }
  to {
    opacity: 1;
    transform: translate(var(--dx, 0px), 0);
  }
}

.slab {
  background: #fff;
  border-radius: 28px;
  box-shadow: var(--shadow-slab);
  z-index: 3;
}
.slab-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 22px;
}
.slab-tint {
  background: #fff1ef;
  padding-left: 60px;
  height: 72px;
  z-index: 5;
}
.slab-cancelled {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 26px;
  background: rgba(239, 237, 246, 0.85);
  box-shadow: 0 14px 30px -14px rgba(50, 40, 90, 0.22);
  z-index: 2;
}
.slab-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px;
  z-index: 3;
}
.slab-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  z-index: 4;
}
.pill .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--dot);
}
.name {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.name-muted {
  color: #7e7c8e;
  font-size: 22px;
}
.bar {
  display: block;
  height: 10px;
  width: var(--w, 100px);
  border-radius: 999px;
  background: var(--bar, #e7e5f0);
  flex: 0 0 auto;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--chip);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.chip-lg {
  width: 60px;
  height: 60px;
  font-size: 22px;
}
.bead {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow:
    0 0 0 5px #fff,
    0 18px 36px -12px rgba(20, 12, 40, 0.45);
}
.slab-moment {
  position: absolute;
  left: 30px;
  top: calc(100% + 12px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #77758a;
  white-space: nowrap;
}
.check,
.cross {
  width: 26px;
  height: 26px;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.check {
  stroke: var(--grn);
  margin-left: auto;
}
.cross {
  stroke: var(--coral);
}
.svc {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  padding-left: 30px;
  border-radius: 12px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.svc::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 9px;
  bottom: 9px;
  width: 6px;
  border-radius: 999px;
  background: var(--yel);
}
.svc .bar {
  background: #ebdfbb;
}
.svc-blue {
  background: #e8f6fb;
}
.svc-blue::before {
  background: #89dceb;
}
.svc-blue .bar {
  background: #b9e6f3;
}

/* ---------- entrances: each element settles in once as it scrolls into view, then stays put (site.js adds .is-in) ----------
   copy rises line by line; the rule draws itself like the NOW line; phones settle onto the page like the slabs, back one first;
   the iPad slides in from its own side. Only when the script runs, never under reduced motion. */
.js .rv {
  opacity: 0;
  transform: translateY(-44px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .rv.rv-rule {
  transform: translateY(-44px) scaleX(0);
  transform-origin: left;
}
.js .rv.rv-rule.rule-center {
  transform-origin: center;
}
.js .rv.rv-phone {
  transform: translateY(90px) scale(0.94);
  transition-duration: 0.9s, 1.3s;
}
.js .rv.rv-pad {
  transform: translateX(var(--from, -70px)) scale(0.96);
  transition-duration: 0.9s, 1.3s;
}
.js .rv.rv-fan {
  opacity: 1;
  transform: none;
}
.js .rv.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* the montages: their pieces settle onto the page one after another in stacking order, then the pins drop on and the shapes draw up
   (site.js marks each piece with its delay; the montage itself gets .is-in). */
.js .rv-p {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js .rv-p.pin {
  transform: scale(0);
  transform-origin: 50% 100%;
  transition-duration: 0.3s, 0.55s;
  transition-timing-function: var(--ease-out), cubic-bezier(0.34, 1.5, 0.64, 1);
}
.js .rv-p.shape {
  transform: rotate(var(--r)) scale(0.5);
  transition-duration: 0.5s, 0.8s;
}
.js .rv-montage.is-in .rv-p {
  opacity: 1;
  transform: none;
}
.js .rv-montage.is-in .rv-p.shape {
  transform: rotate(var(--r));
}
@media (prefers-reduced-motion: reduce) {
  .js .rv-p {
    transition: none;
  }
}

/* ---------- the day: moments along the thread ---------- */
.day {
  position: relative;
}
/* the day's line: one path from the hero's NOW scrubber, drawn by scroll (stroke-dashoffset in site.js), weaving to each
   moment's node and taking that moment's color from there on. The eyebrow dot moves out to the node. */
.thread {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.thread-line,
.thread-glow {
  fill: none;
  stroke: url(#thread-grad);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thread-line {
  stroke-width: 5px;
}
.thread-glow {
  stroke-width: 18px;
  opacity: 0.16;
}
.moment .stamp-dot {
  display: none;
}
.thread-node {
  color: var(--c);
}
.thread-node circle {
  transform-box: fill-box;
  transform-origin: center;
}
.node-halo {
  fill: var(--c);
  opacity: 0;
  filter: blur(7px);
  transition: opacity 0.6s var(--ease-out);
}
.node-ring {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.5px;
  opacity: 0.3;
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.node-core {
  fill: var(--c);
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 3px;
  opacity: 0.45;
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.thread-node.is-dark .node-core {
  stroke: rgba(255, 255, 255, 0.28);
}
.thread-node.is-lit .node-halo {
  opacity: 0.55;
  animation: node-breathe 2.6s ease-in-out infinite alternate;
}
.thread-node.is-lit .node-ring {
  opacity: 0.9;
  transform: scale(1.15);
}
.thread-node.is-lit .node-core {
  opacity: 1;
  transform: scale(1.1);
}
@keyframes node-breathe {
  from {
    transform: scale(0.85);
    opacity: 0.35;
  }
  to {
    transform: scale(1.35);
    opacity: 0.6;
  }
}
.thread-head-core {
  fill: #fff;
}
.thread-head-halo {
  fill: var(--head, var(--cyan));
  opacity: 0.55;
  filter: blur(6px);
}
.thread-head[hidden] {
  display: none;
}
.moment {
  position: relative;
  z-index: 2;
  /* a centered 1080px block: a 460px copy column (the 14ch headline measure), a 520px media column (the iPad's width, so phones and iPad align across sections) and a 100px gutter; the block sits inset equally from both edges, the atmosphere still bleeds */
  display: grid;
  grid-template-columns: 460px 520px;
  gap: 100px;
  justify-content: center;
  align-items: center;
  padding: 140px var(--edge);
}
.moment-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
/* the moment blurbs are one or two sentences; a short measure sets them as a block under the headline instead of a long line and an orphan */
.moment-copy .lede {
  max-width: 36ch;
}
.moment-flip .moment-copy {
  order: 2;
}
.moment-flip .pair,
.moment-flip .device.ipad {
  order: 1;
}
.moment-flip {
  grid-template-columns: 520px 460px;
}
/* media hugs the gutter side, next to its copy */
.moment .pair,
.moment .device.ipad,
.moment .reveal-stack,
.moment .reveal-a,
.moment .photo-a,
.moment .consent-a,
.moment .chart-a,
.moment .dose-a {
  justify-self: start;
}
.moment-flip .pair,
.moment-flip .device.ipad,
.moment-flip .reveal-stack,
.moment-flip .photo-a,
.moment-flip .consent-a,
.moment-flip .chart-a,
.moment-flip .dose-a {
  justify-self: end;
}

#consent {
  background: linear-gradient(180deg, #f6f3fb 0%, #ffffff 50%, #fff8e8 100%);
  padding-top: 96px;
}
#photos {
  background: linear-gradient(180deg, #fff8e8 0%, #ffffff 45%, #eef9fd 100%);
}
#chart {
  background: linear-gradient(180deg, #eef9fd 0%, #ffffff 40%, #f3f9fd 100%);
}

/* clip, not hidden: hidden makes the night a scroll container, and a jump to a moment inside it (#locked) scrolls the night itself, lifting the stamps off the day's line */
.dark {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: var(--night);
}
.watermark-night {
  left: 34%;
  top: 30%;
  width: 76%;
  height: auto;
  opacity: 0.12; /* natural height, set right of center so the practitioner sits over the right column */
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 22%,
      #000 82%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 15%,
      #000 85%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 22%,
      #000 82%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      #000 15%,
      #000 85%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.dark .moment {
  padding-block: 150px;
}
.dark .moment:first-of-type {
  padding-top: 170px;
}
.dark .moment:last-of-type {
  padding-bottom: 180px;
}
.glow-coral {
  left: max(-300px, calc(50% - 1020px));
  top: 100px;
  width: 1100px;
  height: 1100px;
  background: radial-gradient(
    circle,
    rgba(244, 115, 107, 0.16) 0%,
    rgba(244, 115, 107, 0) 64%
  );
}
.glow-violet {
  right: max(-200px, calc(50% - 920px));
  top: 900px;
  width: 1100px;
  height: 1100px;
  background: radial-gradient(
    circle,
    rgba(199, 155, 247, 0.14) 0%,
    rgba(199, 155, 247, 0) 64%
  );
}
.glow-pink {
  left: 30%;
  top: 1900px;
  width: 1300px;
  height: 1300px;
  background: radial-gradient(
    circle,
    rgba(238, 111, 180, 0.24) 0%,
    rgba(238, 111, 180, 0) 64%
  );
}
.glow-teal {
  left: max(-200px, calc(50% - 920px));
  bottom: -200px;
  width: 1100px;
  height: 1100px;
  background: radial-gradient(
    circle,
    rgba(132, 218, 214, 0.18) 0%,
    rgba(132, 218, 214, 0) 64%
  );
}

/* ---------- the reveal: real pieces of the compare and share screens, stacked, no device ---------- */
/* proportions come from the 460 by 500 comp; every offset is a percentage of the stack so the whole thing scales with the column */
.reveal-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 500;
}
.reveal-stack img {
  display: block;
}
.rv-quad {
  position: absolute;
  left: 4.8%;
  top: 3.2%;
  width: 63%;
  height: auto;
  border-radius: 22px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.12),
    0 44px 80px -28px rgba(0, 0, 0, 0.85),
    0 18px 32px -14px rgba(0, 0, 0, 0.6);
}
.rv-pair {
  position: absolute;
  left: 43.5%;
  top: 29.6%;
  width: 56%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  z-index: 2;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.16),
    0 40px 70px -26px rgba(0, 0, 0, 0.9),
    0 16px 28px -12px rgba(0, 0, 0, 0.65);
}
.rv-pair img {
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 345;
  object-fit: cover;
}
.rv-session {
  position: absolute;
  left: 20.9%;
  top: 55.2%;
  width: 71.7%;
  height: auto;
  border-radius: 18px;
  z-index: 3;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.16),
    0 40px 70px -26px rgba(0, 0, 0, 0.9),
    0 16px 28px -12px rgba(0, 0, 0, 0.65);
}
/* the standardized angles run under the session strip and off the column; the left end fades before it reaches the copy */
.rv-strip {
  position: absolute;
  left: -4%;
  top: 79%;
  display: flex;
  gap: 2.4%;
  width: 118%;
  z-index: 4;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 13%,
    #000 60%,
    transparent 88%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 13%,
    #000 60%,
    transparent 88%
  );
}
.rv-strip img {
  width: 12.5%;
  height: auto;
  aspect-ratio: 276 / 345;
  border-radius: 12px;
  flex: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.16),
    0 30px 50px -20px rgba(0, 0, 0, 0.85),
    0 12px 22px -10px rgba(0, 0, 0, 0.6);
}

/* ---------- the reveal, A: compare stack then the two by two, the screens recreated with the new photo set ---------- */
/* every length is a share of the stack width (the 460-wide comp), so the whole thing scales with the column */
.reveal-a {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 650;
  font-family: var(--font);
}
.reveal-a img {
  display: block;
}
.ra-compare {
  position: absolute;
  left: 4.783cqw;
  top: 5.217cqw;
  width: 73.913cqw;
  height: 102.174cqw;
  border-radius: 4.783cqw;
  overflow: hidden;
  background: #f3f2f4;
  z-index: 2;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 66%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 0, #000 66%, transparent 100%);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.12),
    0 44px 80px -28px rgba(0, 0, 0, 0.85),
    0 18px 32px -14px rgba(0, 0, 0, 0.6);
}
.ra-cell {
  position: relative;
  height: 56.957cqw;
  overflow: hidden;
}
.ra-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}
.ra-sep {
  height: 0.87cqw;
  background: #e2e0ec;
}
.ra-row2 {
  width: 100%;
  height: 44.348cqw;
  object-fit: cover;
  object-position: 50% 8%;
}
.ra-chips {
  position: absolute;
  left: 1.957cqw;
  top: 39.348cqw;
  display: flex;
  flex-direction: column;
  gap: 0.652cqw;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 58%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
}
.ra-chip {
  width: 8.478cqw;
  padding: 1.087cqw 0;
  border-radius: 1.304cqw;
  background: rgba(58, 56, 68, 0.62);
  color: #b9b6c9;
  font-size: 2.065cqw;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.ra-chip.is-on {
  background: rgba(58, 56, 68, 0.74);
  color: #89dceb;
}
.ra-thumbs {
  position: absolute;
  right: 2.609cqw;
  bottom: 2.391cqw;
  display: flex;
  align-items: center;
  gap: 1.087cqw;
}
.ra-thumbs img {
  width: 5.435cqw;
  height: 6.087cqw;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 0.87cqw;
}
.ra-thumbs img.is-on {
  box-shadow:
    0 0 0 0.326cqw #fff,
    0 0 0 0.652cqw var(--cyan);
}
.ra-more {
  width: 5.87cqw;
  height: 6.087cqw;
  border-radius: 0.87cqw;
  background: rgba(110, 106, 120, 0.85);
  color: #fff;
  font-size: 1.957cqw;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ra-div {
  width: 1px;
  height: 4.783cqw;
  margin: 0 0.87cqw;
  background: rgba(255, 255, 255, 0.75);
}
.ra-quad {
  position: absolute;
  left: 36.522cqw;
  top: 63.043cqw;
  width: 56.522cqw;
  border-radius: 4.783cqw;
  overflow: hidden;
  background: #f3f2f4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.543cqw;
  z-index: 3;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.16),
    0 44px 80px -28px rgba(0, 0, 0, 0.9),
    0 18px 32px -14px rgba(0, 0, 0, 0.65);
}
.ra-quad img {
  width: 100%;
  object-fit: cover;
}
.ra-quad img:nth-child(-n + 2) {
  height: 35.217cqw;
}
.ra-quad img:nth-child(n + 3) {
  height: 30cqw;
}
.ra-disc {
  position: absolute;
  left: 25.217cqw;
  top: 32.391cqw;
  width: 6.087cqw;
  height: 6.087cqw;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink);
}
.ra-disc svg {
  width: 3.913cqw;
  height: 3.913cqw;
  display: block;
}
.ra-share {
  position: absolute;
  left: 88.261cqw;
  top: 59.565cqw;
  width: 8.696cqw;
  height: 8.696cqw;
  border-radius: 999px;
  z-index: 4;
  box-shadow:
    0 12px 24px -8px rgba(0, 0, 0, 0.7),
    0 0 0 0.87cqw #17142b;
}
.ra-strip {
  position: absolute;
  left: -2.609cqw;
  top: 124.348cqw;
  display: flex;
  gap: 1.739cqw;
  z-index: 6;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 9%,
    #000 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 9%,
    #000 80%,
    transparent 100%
  );
}
.ra-strip img {
  width: 11.739cqw;
  height: 14.783cqw;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 1.957cqw;
  flex: none;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.16),
    0 10px 18px -6px rgba(0, 0, 0, 0.7),
    0 28px 44px -16px rgba(0, 0, 0, 0.8);
}

/* ---------- the consent moment: the list, the form, the steps, the tick and the signature, as composed on the canvas (460×630, cqw) ----------
   every card is a cut from the consent captures (21-consents, 22-consent-signing); the steps are drawn as the app draws them (AppointmentBreadcrumbs),
   the signature pad from Signature.tsx (white, a border in the secondary ground) with a drawn signature, since no signed capture exists. */
.consent-a {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 630;
  font-family: var(--font);
}
.consent-a img {
  display: block;
}
.ca-list {
  position: absolute;
  left: 0;
  top: 23.043cqw;
  width: 45.652cqw;
  height: 76.957cqw;
  border-radius: 3.478cqw;
  overflow: hidden;
  background: #fff;
  z-index: 2;
  box-shadow:
    0 40px 70px -30px rgba(50, 40, 90, 0.4),
    0 16px 28px -14px rgba(50, 40, 90, 0.22);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 84%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 0, #000 84%, transparent 100%);
}
.ca-list img {
  width: 100%;
  height: auto;
  margin-top: 5.217cqw;
}
.ca-next {
  position: absolute;
  left: 6.522cqw;
  top: 96.087cqw;
  width: 13.913cqw;
  height: 7.391cqw;
  border-radius: 999px;
  z-index: 4;
  box-shadow:
    0 12px 22px -8px rgba(50, 40, 90, 0.45),
    0 3px 6px -2px rgba(50, 40, 90, 0.25);
}
.ca-form {
  position: absolute;
  left: 48.696cqw;
  top: 37.826cqw;
  width: 55.435cqw;
  height: 52.174cqw;
  border-radius: 3.478cqw;
  overflow: hidden;
  background: #fff;
  z-index: 3;
  box-shadow:
    0 40px 70px -30px rgba(50, 40, 90, 0.45),
    0 16px 28px -14px rgba(50, 40, 90, 0.25);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 70%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
}
.ca-form img {
  width: 100%;
  height: auto;
}
.ca-steps {
  position: absolute;
  left: 51.522cqw;
  top: 29.13cqw;
  display: flex;
  align-items: center;
  gap: 1.087cqw;
  z-index: 5;
}
.ca-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.217cqw;
  height: 5.217cqw;
  border-radius: 50%;
  flex: none;
  box-sizing: border-box;
  background: #fff;
  color: #8e8b9c;
  border: 1px solid #e2e0ec;
  font-size: 2.174cqw;
  font-weight: 700;
  line-height: 1;
  box-shadow:
    0 6px 12px -4px rgba(50, 40, 90, 0.38),
    0 2px 4px -1px rgba(50, 40, 90, 0.22);
}
.ca-step.is-on {
  background: #89dceb;
  color: #fff;
  border-color: #89dceb;
}
.ca-step svg {
  width: 2.391cqw;
  height: 2.391cqw;
  display: block;
}
.ca-dash {
  width: 2.174cqw;
  height: 1.5px;
  background: #d9d7e2;
  flex: none;
}
.ca-tick {
  position: absolute;
  left: 47.609cqw;
  top: 90.435cqw;
  width: 43.478cqw;
  height: 7.391cqw;
  border-radius: 1.957cqw;
  overflow: hidden;
  background: #fff;
  z-index: 4;
  box-shadow:
    0 16px 28px -12px rgba(50, 40, 90, 0.45),
    0 3px 6px -2px rgba(50, 40, 90, 0.2);
}
.ca-tick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ca-sign {
  position: absolute;
  left: 29.783cqw;
  top: 100.217cqw;
  width: 45.652cqw;
  height: 16.957cqw;
  border-radius: 2.174cqw;
  box-sizing: border-box;
  border: 1.739cqw solid #eeeaf9;
  background: #fff;
  z-index: 5;
  box-shadow:
    0 30px 50px -24px rgba(50, 40, 90, 0.5),
    0 10px 18px -8px rgba(50, 40, 90, 0.25);
}
.ca-sign svg {
  width: 42.174cqw;
  height: 13.478cqw;
  display: block;
}

/* ---------- the photography moment: the camera's pieces, the patient's record behind them ----------
   designed on the canvas (460×630); every length is a share of the container width (cqw) so the stack fills the 520px column and caps at 360px on phones.
   pieces, not a phone: the 3:4 frame with the app's thirds grid, the session's set as a strip riding its top edge (the five standard poses, left profile to
   right profile), the lens pills (24mm selected in the dark theme's primary #EBA0AC, the app's 48mm and 120mm crops) and the shutter breaking its bottom edge,
   the customer photos grid behind, three columns edge to edge, today's shots first and the history fading out. no pose guide: the app has one, the montage
   leaves the face clear. shadows carry offset and blur, no rings on the cards. */
.photo-a {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 630;
  font-family: var(--font);
}
.photo-a img {
  display: block;
}
.pa-rec {
  position: absolute;
  left: 41.739cqw;
  top: 23.043cqw;
  width: 57.391cqw;
  height: 85.217cqw;
  border-radius: 3.478cqw;
  overflow: hidden;
  background: #16151c;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  box-shadow:
    0 40px 70px -30px rgba(20, 12, 40, 0.6),
    0 16px 28px -14px rgba(20, 12, 40, 0.35);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 76%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 0, #000 76%, transparent 100%);
}
.pa-rec img {
  width: 100%;
  height: 25.217cqw;
  object-fit: cover;
  object-position: 50% 18%;
}
.pa-rec .pa-t1 {
  object-position: 50% 50%;
}
.pa-frame {
  position: absolute;
  left: 0;
  top: 12.609cqw;
  width: 54.348cqw;
  height: 72.391cqw;
  border-radius: 3.478cqw;
  overflow: hidden;
  background: #000;
  z-index: 2;
  box-shadow:
    0 40px 70px -30px rgba(20, 12, 40, 0.55),
    0 16px 28px -14px rgba(20, 12, 40, 0.3);
}
.pa-feed {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pa-grid {
  position: absolute;
  inset: 0;
}
.pa-grid i {
  position: absolute;
  background: #fff;
  opacity: 0.22;
}
.pa-grid i:nth-child(1) {
  left: 33.333%;
  top: 0;
  width: 1px;
  height: 100%;
}
.pa-grid i:nth-child(2) {
  left: 66.667%;
  top: 0;
  width: 1px;
  height: 100%;
}
.pa-grid i:nth-child(3) {
  top: 33.333%;
  left: 0;
  height: 1px;
  width: 100%;
}
.pa-grid i:nth-child(4) {
  top: 66.667%;
  left: 0;
  height: 1px;
  width: 100%;
}
.pa-strip {
  position: absolute;
  left: 20.217cqw;
  top: 8.043cqw;
  display: flex;
  gap: 1.304cqw;
  z-index: 4;
}
.pa-strip img {
  width: 6.087cqw;
  height: 8.043cqw;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 0.652cqw;
  flex: none;
  box-shadow:
    0 0 0 0.326cqw rgba(255, 255, 255, 0.9),
    0 8px 14px -4px rgba(20, 12, 40, 0.6);
}
.pa-lenses {
  position: absolute;
  left: 0;
  width: 54.348cqw;
  top: 70.87cqw;
  display: flex;
  justify-content: center;
  gap: 1.304cqw;
  z-index: 4;
}
.pa-pill {
  width: 8.261cqw;
  height: 4.565cqw;
  border-radius: 2.283cqw;
  background: #dedde3;
  color: #16151c;
  font-size: 1.63cqw;
  font-weight: 700;
  line-height: 4.565cqw;
  text-align: center;
  box-shadow: 0 4px 10px -4px rgba(20, 12, 40, 0.5);
}
.pa-pill-w {
  width: 8.696cqw;
}
.pa-pill.is-on {
  background: #eba0ac;
  color: #fff;
}
.pa-shutter {
  position: absolute;
  left: 21.087cqw;
  top: 78.913cqw;
  width: 12.174cqw;
  height: 12.174cqw;
  border-radius: 50%;
  box-sizing: border-box;
  border: 0.652cqw solid #fff;
  background: #fff;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 14px 26px -8px rgba(20, 12, 40, 0.5),
    0 4px 8px -3px rgba(20, 12, 40, 0.35);
}
.pa-shutter i {
  width: 10.87cqw;
  height: 10.87cqw;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7f0f2 0%, #e8a3ae 100%);
}

/* ---------- pins and shapes: the app's marker (TreatmentStepMarker: a gradient circle on a tapered stem, a bare dot on the spot; stem and dot at three quarters)
   and a treated region (a closed outline in the product colour over a light fill). --x/--y place the pin's box; the dot is its bottom centre. three sizes:
   -l on the dose portrait, -s on the chart's front view, -xs on the selected thumbnail (no label). ---------- */
.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 6;
  --c: #ee6fb4;
  --cl: #f284c0;
}
.pin-mint {
  --c: #5de9c0;
  --cl: #74edca;
}
.pin i {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--cl) 0%, var(--c) 100%);
  color: #fff;
  font-style: normal;
  font-weight: 900;
  text-align: center;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3);
}
.pin::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: var(--c) transparent transparent;
  opacity: 0.64;
}
.pin::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--c);
  opacity: 0.75;
}
.pin-l {
  width: 4.348cqw;
  height: 8.043cqw;
}
.pin-l i {
  width: 4.348cqw;
  height: 4.348cqw;
  font-size: 1.522cqw;
  line-height: 4.348cqw;
}
.pin-l::before {
  left: 1.413cqw;
  top: 4.348cqw;
  border-left-width: 0.761cqw;
  border-right-width: 0.761cqw;
  border-top-width: 3.261cqw;
}
.pin-l::after {
  left: 1.739cqw;
  top: 7.174cqw;
  width: 0.87cqw;
  height: 0.87cqw;
}
.pin-s {
  width: 2.609cqw;
  height: 4.674cqw;
}
.pin-s i {
  width: 2.609cqw;
  height: 2.609cqw;
  font-size: 1.087cqw;
  line-height: 2.609cqw;
}
.pin-s::before {
  left: 0.761cqw;
  top: 2.609cqw;
  border-left-width: 0.543cqw;
  border-right-width: 0.543cqw;
  border-top-width: 1.739cqw;
}
.pin-s::after {
  left: 0.978cqw;
  top: 4.022cqw;
  width: 0.652cqw;
  height: 0.652cqw;
}
.pin-xs {
  width: 0.87cqw;
  height: 1.413cqw;
}
.pin-xs i {
  width: 0.87cqw;
  height: 0.87cqw;
  font-size: 0;
  line-height: 0.87cqw;
}
.pin-xs::before {
  left: 0.217cqw;
  top: 0.87cqw;
  border-left-width: 0.217cqw;
  border-right-width: 0.217cqw;
  border-top-width: 0.435cqw;
}
.pin-xs::after {
  left: 0.326cqw;
  top: 1.196cqw;
  width: 0.217cqw;
  height: 0.217cqw;
}
.pin-xs i {
  box-shadow: none;
}
.shape {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 5;
  overflow: visible;
  transform: rotate(var(--r));
}
.shape path {
  fill: #5de9c0;
  fill-opacity: 0.28;
  stroke: #5de9c0;
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.shape-l {
  width: 10.87cqw;
  height: 7.826cqw;
}
.shape-s {
  width: 9.565cqw;
  height: 6.957cqw;
}
.shape-xs {
  width: 1.239cqw;
  height: 0.891cqw;
}
.shape-xs path {
  stroke-width: 0.7px;
}

/* ---------- the chair moment: the five sheets in the chart's own layout (ChartSheetGrid: 30% outer columns in two rows, the front view full height in the
   centre, 3% gutters), the front view charted; the patient row from the chart header as a pill riding the grid's top edge (avatar, check and duration chip
   are cuts, the name and byline set in Lato); the visit's comparison behind at the bottom left, drawn as the compare screen draws it. composed on the canvas (460×630, cqw). */
.chart-a {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 630;
  font-family: var(--font);
}
.chart-a img {
  display: block;
}
.ch-compare {
  position: absolute;
  left: -15cqw;
  top: 46.522cqw;
  width: 54.348cqw;
  height: 65.217cqw;
  border-radius: 2.609cqw;
  overflow: hidden;
  background: #f3f2f4;
  z-index: 1;
  box-shadow:
    0 30px 50px -24px rgba(50, 40, 90, 0.45),
    0 10px 18px -8px rgba(50, 40, 90, 0.2);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 100%);
}
.ch-cell {
  position: relative;
  height: 41.957cqw;
  overflow: hidden;
}
.ch-cell > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}
.ch-thumbs {
  position: absolute;
  right: 1.522cqw;
  bottom: 1.304cqw;
  display: flex;
  align-items: center;
  gap: 0.652cqw;
}
.ch-thumbs img {
  width: 3.913cqw;
  height: 4.565cqw;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 0.652cqw;
  flex: none;
}
.ch-thumbs img.is-on {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 2px #89dceb;
}
.ch-more {
  width: 4.348cqw;
  height: 4.565cqw;
  border-radius: 0.652cqw;
  background: rgba(110, 106, 120, 0.85);
  color: #fff;
  font-size: 1.413cqw;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ch-div {
  width: 1px;
  height: 3.478cqw;
  margin: 0 0.652cqw;
  background: rgba(255, 255, 255, 0.75);
}
.ch-sep {
  display: block;
  height: 0.652cqw;
  background: #e2e0ec;
}
.ch-prev {
  width: 100%;
  height: 22.609cqw;
  object-fit: cover;
  object-position: 50% 8%;
}
.ch-chips {
  position: absolute;
  left: 1.522cqw;
  top: 29.565cqw;
  display: flex;
  flex-direction: column;
  gap: 0.435cqw;
}
.ch-chips span {
  width: 6.304cqw;
  padding: 0.652cqw 0;
  border-radius: 0.87cqw;
  background: rgba(58, 56, 68, 0.62);
  color: #b9b6c9;
  font-size: 1.522cqw;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.ch-chips span.is-on {
  background: rgba(58, 56, 68, 0.74);
  color: #89dceb;
}
.ch-tile {
  position: absolute;
  border-radius: 1.739cqw;
  object-fit: cover;
  object-position: 50% 12%;
  z-index: 2;
  box-shadow:
    0 10px 18px -6px rgba(50, 40, 90, 0.35),
    0 28px 44px -16px rgba(50, 40, 90, 0.3);
}
.ch-t1 {
  left: 10.87cqw;
  top: 26.522cqw;
  width: 26.087cqw;
  height: 36.087cqw;
}
.ch-t2 {
  left: 10.87cqw;
  top: 65cqw;
  width: 26.087cqw;
  height: 38.478cqw;
}
.ch-t4 {
  left: 71.739cqw;
  top: 26.522cqw;
  width: 26.087cqw;
  height: 36.087cqw;
}
.ch-t5 {
  left: 71.739cqw;
  top: 65cqw;
  width: 26.087cqw;
  height: 38.478cqw;
}
.ch-main {
  left: 38.261cqw;
  top: 26.522cqw;
  width: 32.174cqw;
  height: 76.957cqw;
  overflow: hidden;
}
.ch-main > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.ch-header {
  position: absolute;
  left: 4.565cqw;
  top: 13.478cqw;
  width: 51.304cqw;
  height: 14.783cqw;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 2.174cqw;
  padding: 0 4.348cqw 0 1.522cqw;
  box-shadow:
    0 14px 26px -10px rgba(50, 40, 90, 0.45),
    0 4px 8px -3px rgba(50, 40, 90, 0.2);
}
.ch-avatar {
  width: 11.739cqw;
  height: 11.739cqw;
  border-radius: 50%;
  flex: none;
}
.ch-who {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.652cqw;
  min-width: 0;
}
.ch-name,
.ch-when {
  display: flex;
  align-items: center;
  gap: 1.304cqw;
  white-space: nowrap;
}
.ch-name {
  height: 3.696cqw;
  font-size: 3.043cqw;
  font-weight: 700;
  color: #16151c;
  line-height: 3.696cqw;
}
.ch-name img {
  width: 2.826cqw;
  height: 2.826cqw;
}
.ch-when {
  height: 3.913cqw;
  font-size: 2.065cqw;
  font-weight: 400;
  color: #6b6873;
  line-height: 3.913cqw;
}
.ch-when img {
  width: 7.13cqw;
  height: 3.913cqw;
  border-radius: 1.304cqw;
}

/* ---------- the dose moment: the front view charted, the product picker and the dose keypad (cuts from the chart captures) fading out at their feet,
   the five sheets standing down the side with the front view selected and charted in miniature. composed on the canvas (460×630, cqw). */
.dose-a {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 630;
  font-family: var(--font);
}
.dose-a img {
  display: block;
}
.do-hero {
  position: absolute;
  left: 10.87cqw;
  top: 3.261cqw;
  width: 65.217cqw;
  height: 86.957cqw;
  border-radius: 3.913cqw;
  overflow: hidden;
  background: #e9e7ec;
  z-index: 2;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.12),
    0 44px 80px -28px rgba(0, 0, 0, 0.85),
    0 18px 32px -14px rgba(0, 0, 0, 0.6);
}
.do-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.do-rail {
  position: absolute;
  left: 73.696cqw;
  top: 12.391cqw;
  display: flex;
  flex-direction: column;
  gap: 1.739cqw;
  z-index: 4;
}
.do-rail > img,
.do-sel {
  width: 7.391cqw;
  height: 9.783cqw;
  border-radius: 0.87cqw;
  flex: none;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.16),
    0 10px 18px -6px rgba(0, 0, 0, 0.7);
}
.do-rail > img,
.do-sel img {
  object-fit: cover;
  object-position: 50% 18%;
}
.do-sel {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px #fff,
    0 0 0 3.5px #89dceb,
    0 10px 18px -6px rgba(0, 0, 0, 0.7);
}
.do-sel img {
  width: 100%;
  height: 100%;
}
.do-picker,
.do-keys {
  position: absolute;
  border-radius: 3.043cqw;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.14),
    0 44px 80px -28px rgba(0, 0, 0, 0.85),
    0 18px 32px -14px rgba(0, 0, 0, 0.6);
}
.do-picker {
  left: 2.826cqw;
  top: 58.043cqw;
  width: 40.435cqw;
  height: 67.174cqw;
  z-index: 3;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 52%,
    transparent 96%
  );
  mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 96%);
}
.do-lip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2.174cqw;
  background: url(img/do-picker.png) left top / 100% auto no-repeat;
  transform: scaleY(-1);
}
.do-picker img {
  position: absolute;
  left: 0;
  top: 2.174cqw;
  width: 100%;
  height: 65cqw;
  object-fit: cover;
}
.do-keys {
  left: 46.957cqw;
  top: 73.913cqw;
  width: 40.87cqw;
  height: 70.435cqw;
  z-index: 4;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 48%,
    transparent 82%
  );
  mask-image: linear-gradient(180deg, #000 0, #000 48%, transparent 82%);
}
.do-keys img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- devices: real captures in device masks ---------- */
.device {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #0d0b15;
  box-shadow: var(--shadow-device);
}
.device img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.iphone {
  width: 270px;
  aspect-ratio: 1320 / 2738;
  border-radius: 34px;
}
.ipad {
  width: 520px;
  aspect-ratio: 2064 / 2692;
  border-radius: 19px;
}
.dark .device {
  box-shadow: var(--shadow-device-dark);
}
/* a pair of phones: the second step sits in front, down and to the right, covering 30% of the first */
.pair {
  --pw: 270px;
  --overlap: 0.3;
  position: relative;
  display: grid;
  width: calc(var(--pw) * (2 - var(--overlap)));
}
.pair > .iphone {
  grid-area: 1 / 1;
  width: var(--pw);
  justify-self: start;
}
.pair > .pair-b {
  margin-top: 70px;
  justify-self: end;
  z-index: 2;
}

/* ---------- the App Store set ---------- */
.appstore {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 140px 0 150px;
  background: var(--sky);
}
.glow-yellow-2 {
  left: max(-300px, calc(50% - 1020px));
  top: 300px;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(
    circle,
    rgba(243, 206, 73, 0.28) 0%,
    rgba(243, 206, 73, 0) 64%
  );
}
.glow-cyan-2 {
  right: max(-200px, calc(50% - 920px));
  top: 60px;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(
    circle,
    rgba(127, 222, 248, 0.26) 0%,
    rgba(127, 222, 248, 0) 64%
  );
}
.appstore-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.appstore-copy h2 {
  max-width: none;
}
.appstore-copy .lede {
  max-width: 48ch;
}
/* the set as a fan: seven cards on a shallow arc around one pivot far below the row, the center card on top */
.cards {
  --card-w: 120px; /* 1127/520 keeps the card's own proportion */
  --card-h: calc(var(--card-w) * 1127 / 520);
  --pivot: 1400px; /* distance from the cards' bottom edge to the shared pivot */
  --step: 4.75deg;
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 64px auto 0;
  padding: 0;
  height: calc(var(--card-h) + 96px);
  max-width: var(--wrap);
}
.cards li {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: var(--card-w);
  transform-origin: 50% calc(100% + var(--pivot));
  /* as the fan opens (--spread 0→1, set by scroll) each card also grows from its bottom edge, the center card the most */
  transform: translateX(-50%)
    rotate(calc(var(--i) * var(--step) * var(--spread, 1)));
  z-index: var(--z);
}
.cards li:nth-child(1) {
  --i: -3;
  --z: 1;
  --grow: 0.04;
}
.cards li:nth-child(2) {
  --i: -2;
  --z: 2;
  --grow: 0.08;
}
.cards li:nth-child(3) {
  --i: -1;
  --z: 3;
  --grow: 0.13;
}
.cards li:nth-child(4) {
  --i: 0;
  --z: 4;
  --grow: 0.2;
}
.cards li:nth-child(5) {
  --i: 1;
  --z: 3;
  --grow: 0.13;
}
.cards li:nth-child(6) {
  --i: 2;
  --z: 2;
  --grow: 0.08;
}
.cards li:nth-child(7) {
  --i: 3;
  --z: 1;
  --grow: 0.04;
}
.cards img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 30px 50px -22px rgba(20, 12, 40, 0.4),
    0 8px 18px -10px rgba(20, 12, 40, 0.25);
  transform: scale(calc(1 + var(--grow) * var(--spread, 1)));
  transform-origin: 50% 100%;
}

/* ---------- demo ---------- */
.demo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 150px var(--edge);
  background: #fff;
}
.watermark-lisa {
  left: 40%;
  top: 0;
  width: 60%;
  height: 100%;
  opacity: 0.13;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 35%,
    #000 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
}
.demo-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 640px;
}
.demo-copy h2 {
  font-size: clamp(38px, 4.2vw, 60px);
}
.demo-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  width: 100%;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 280px;
}
.field-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input {
  height: 50px;
  padding: 0 20px;
  border-radius: 25px;
  border: 0;
  font: 400 16px var(--font);
  color: var(--ink);
  background: #fff; /* 16px: iOS does not zoom the field on focus */
  -webkit-appearance: none;
  appearance: none;
  box-shadow: inset 0 0 0 1px var(--line);
  caret-color: #3fb8dc;
  transition: box-shadow 0.2s;
}
.field input::placeholder {
  color: #a9a7b6;
}
@media (hover: hover) {
  .field input:hover {
    box-shadow: inset 0 0 0 1px #c9c6d6;
  }
}
.field input:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--cyan);
}
.demo-form .field input[aria-invalid="true"],
.demo-form .field input[aria-invalid="true"]:focus {
  box-shadow: inset 0 0 0 2px var(--coral);
}
.demo-form[hidden] {
  display: none;
}
.demo-hp {
  position: absolute;
  left: -5000px;
} /* the list's honeypot: people never see it, bots fill it */
.demo-success:focus {
  outline: none;
}
.demo-form .btn {
  align-self: flex-end;
}
.field-error {
  flex: 0 0 100%;
  margin-top: -2px;
  font-size: 14px;
  line-height: 1.4;
  color: #b8322a;
} /* its own row under the input, so the button stays on the input's line */
.field-error[hidden],
.demo-success[hidden] {
  display: none;
}
.demo-form.is-submitting .btn {
  opacity: 0.6;
  pointer-events: none;
}
.demo-success {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #e8f7fc;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.4;
  max-width: 560px;
}
.demo-success::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--grn);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.6l4.2 4.2 8.8-9.6'/%3E%3C/svg%3E")
    center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.6l4.2 4.2 8.8-9.6'/%3E%3C/svg%3E")
    center / 70% no-repeat;
}
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px var(--line);
  background: rgba(255, 255, 255, 0.72);
}

/* ---------- footer ---------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 44px var(--edge) calc(56px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: #fff;
}
.wordmark-muted {
  color: var(--ink-3);
}
.footer-links {
  display: flex;
  gap: 32px;
  font-size: 15px;
  color: var(--ink-3);
}
.footer-links a {
  position: relative;
  padding: 4px 0;
}
@media (hover: hover) {
  .footer-links a:hover {
    color: var(--ink);
  }
}
@media (pointer: coarse) {
  .footer-links {
    gap: 28px;
  }
  .footer-links a {
    padding: 13px 0;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav-links {
    display: none;
  }
  /* tablet: two halves, devices to the outer edge, so a 440px iPad still fits */
  .moment,
  .moment-flip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
  .moment .pair,
  .moment .device.ipad,
  .moment .reveal-stack,
  .moment .reveal-a,
  .moment .photo-a,
  .moment .consent-a,
  .moment .chart-a,
  .moment .dose-a {
    justify-self: end;
  }
  .moment-flip .pair,
  .moment-flip .device.ipad,
  .moment-flip .photo-a,
  .moment-flip .consent-a,
  .moment-flip .chart-a,
  .moment-flip .dose-a {
    justify-self: start;
  }
  .ipad {
    width: 440px;
  }
  .pair {
    --pw: 230px;
  }
  .iphone {
    width: 230px;
    border-radius: 29px;
  }
}

@media (max-width: 860px) {
  :root {
    --nav-h: 64px;
  }
  .nav {
    gap: 12px;
  }
  .nav-right {
    gap: 12px;
  }
  .nav-download,
  .clock-state {
    display: none;
  }
  /* the clock keeps the time alone; the two untimed sections use their short label; site.js pins the width to the widest */
  .clock {
    width: var(--clock-w, auto);
    font-size: 11px;
    gap: 8px;
    justify-content: flex-end;
  }
  #clock-text.has-short .clock-time {
    display: none;
  }
  #clock-text.has-short .clock-short {
    display: inline;
  }
  .nav .btn {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 22px;
  }
  .wordmark svg {
    width: 88px;
    height: 18px;
  }

  .board {
    min-height: 0;
  }
  .board-copy {
    padding-top: 44px;
    gap: 22px;
  }
  /* the two pills share a row while both fit (≥ ~300px of column), else they stack */
  .cta-row {
    width: 100%;
    gap: 12px;
  }
  .cta-row .btn {
    flex: 1 1 140px;
    min-width: 0;
  }

  /* lanes become a stacked board: each room a labeled row of slabs; NOW sits on Priya's slab */
  .lanes {
    height: auto;
    margin-top: 44px;
    padding: 0 var(--gutter) 48px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .lane {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .lane::before {
    display: none;
  }
  /* the room label leads its own rule, the rule running from the label to the right edge */
  .lane-label {
    position: static;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 2px;
  }
  .lane-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(120, 110, 150, 0.22);
  }
  .now {
    display: none;
  }
  .now-inline {
    display: inline-block;
    margin-left: 12px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #17708a;
    background: #e8f7fc;
    padding: 5px 10px;
    border-radius: 999px;
  }
  .slab,
  .pill {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 100%;
    transform: none;
    animation: none;
  }
  .slab-row {
    width: min(100%, 320px);
  }
  .slab-tint {
    width: 100%;
    margin-left: 30px;
    max-width: calc(100% - 30px);
    margin-bottom: 26px;
    padding-left: 50px;
  }
  .slab-tint .bar {
    display: none;
  }
  .slab-stack {
    width: min(100%, 340px);
    top: auto;
  }
  .slab-cancelled {
    width: 220px;
  }
  .lanes .pill {
    display: none;
  }
  .slab-moment {
    left: 20px;
  }

  .thread-line {
    stroke-width: 4px;
  }
  .thread-glow {
    stroke-width: 12px;
  }
  /* the day's line runs down the gutter as a rail; the copy stands 30px off it (site.js puts each node on the copy box's left edge) */
  .moment {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 104px var(--gutter);
  }
  #consent {
    padding-top: 104px;
  }
  .moment-copy,
  .moment-flip .moment-copy {
    order: 0;
    padding-left: 30px;
  }
  /* the screens stand off the rail like the copy: the column right of the 30px indent, the pair drawn tighter */
  .moment .pair,
  .moment .device.ipad,
  .moment-flip .pair,
  .moment-flip .device.ipad,
  .moment .reveal-stack {
    justify-self: end;
    order: 1;
  }
  .pair {
    --overlap: 0.42;
    width: min(100% - 30px, 320px);
  }
  .pair > .iphone {
    width: calc(100% / (2 - var(--overlap)));
  }
  .iphone {
    width: 100%;
    border-radius: 12.5% / 6%;
  }
  .pair > .pair-b {
    margin-top: 52px;
  }
  .reveal-stack {
    width: min(100%, 360px);
  }
  .reveal-a {
    width: min(100%, 360px);
  }
  .photo-a,
  .consent-a,
  .chart-a,
  .dose-a {
    width: min(100%, 360px);
  }
  .ca-list,
  .ca-form {
    border-radius: 13px;
  }
  .pa-frame,
  .pa-rec {
    border-radius: 13px;
  }
  .rv-quad {
    border-radius: 16px;
  }
  .rv-pair,
  .rv-session {
    border-radius: 13px;
  }
  .rv-strip img {
    border-radius: 9px;
  }
  .rv-strip {
    left: -2%;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 20%,
      #000 58%,
      transparent 88%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 20%,
      #000 58%,
      transparent 88%
    );
  }
  .ipad {
    width: min(100% - 30px, 300px);
  }
  .dark .moment {
    padding-block: 104px;
  }
  .dark .moment:first-of-type {
    padding-top: 120px;
  }

  .appstore {
    padding: 112px 0;
  }
  .cards {
    --card-w: 66px;
    --pivot: 760px;
    --step: 3.5deg;
    margin-top: 56px;
    height: calc(var(--card-h) + 60px);
  }
  /* narrow: the fan is dealt left to right so each card keeps the start of its headline */
  .cards li {
    bottom: 10px;
    z-index: calc(var(--i) + 4);
  }
  .cards img {
    border-radius: 8px;
  }
  .demo {
    padding: 112px var(--gutter);
  }
  .watermark-lisa {
    left: 0;
    width: 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  }
  .demo-form .btn {
    width: 100%;
    order: 3;
  } /* the error reads under the input, the button below both */
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-top: 48px;
  }
  .nav .wordmark,
  .footer .wordmark {
    padding: 12px 0;
  } /* a 44px tap height for the 18px mark */
}

/* phones: iOS margins, a headline that fits a 320px screen, a fan that fills the width */
@media (max-width: 860px) {
  .wordmark .mark {
    width: 21px;
    height: 21px;
    top: 1.1px;
  }
  .field-night {
    width: 230vw;
    bottom: -115vw;
  }
}
@media (max-width: 480px) {
  :root {
    --gutter: max(26px, var(--inset));
  }
  h1 {
    font-size: clamp(34px, 10.5vw, 40px);
  }
  .cards {
    --card-w: clamp(64px, 19.5vw, 76px);
    --step: 3.3deg;
  }
}
@media (max-width: 360px) {
  .clock {
    width: auto;
  }
  .clock #clock-text {
    display: none;
  } /* the dot alone carries the section's color */
}
@media (max-width: 860px) and (orientation: landscape) {
  :root {
    --nav-h: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .now-line,
  .slab,
  .pill {
    animation: none;
  }
  .btn,
  .nav-links a::after,
  .nav-download::after {
    transition: none;
  }
  .clock.is-swapping #clock-text {
    animation: none;
  }
  .thread-node.is-lit .node-halo {
    animation: none;
  }
  .thread-node circle,
  .node-halo {
    transition: none;
  }
}

/* ---------- the document pages (privacy, support, not found): one measured column in the page's own type, the header and footer as on the front ---------- */
.legal-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.legal-page main {
  flex: 1 0 auto;
}
.legal {
  padding: 72px var(--edge) 128px;
}
.legal article {
  max-width: 72ch;
}
.legal h1 {
  font-size: clamp(34px, 3.7vw, 54px);
  max-width: none;
  margin-bottom: 28px;
}
.legal h2 {
  font-size: clamp(22px, 2vw, 28px);
  max-width: none;
  margin: 52px 0 14px;
  line-height: 1.15;
}
.legal h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 32px 0 8px;
  letter-spacing: -0.01em;
}
.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.legal p {
  margin: 0 0 16px;
}
.legal ul,
.legal ol {
  padding-left: 22px;
  margin: 0 0 16px;
}
.legal li {
  margin-bottom: 8px;
}
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.legal strong {
  color: var(--ink);
  font-weight: 700;
}
.legal table {
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 15px;
}
.legal th,
.legal td {
  text-align: left;
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}
@media (max-width: 720px) {
  .legal {
    padding: 40px var(--edge) 96px;
  }
}