/* Patient Prep Packs
   Colour has meaning here, as it does in the packs themselves:
   orange = the next step (a prep dose), red = not ready / stop,
   green = ready / allowed, violet = tablets, night blue = the hours
   a patient is alone with the handout. Nothing is coloured for decoration. */

:root {
  --night: #141B36;
  --dusk: #2B3263;
  --on-night: #ECEFF8;
  --on-night-muted: #AEB6D0;
  --paper: #F2F5F4;
  --paper-2: #E9EFED;
  --surface: #FFFFFF;
  --ink: #16262D;
  --ink-hover: #27424C;
  --muted: #4F6168;
  --line: #D6E0DD;
  --field-line: #A9BAB5;

  --dose: #E8711A;
  --dose-ink: #8A3B00;
  --dose-text: #B4500A;
  --dose-soft: #FFEEDD;
  --stop: #C7363F;
  --stop-text: #A3242C;
  --go: #17805A;
  --go-text: #0F5C3F;
  --go-soft: #E2F4EA;
  --med: #5A55C2;
  --rest: #C2CECB;

  --sky-day: #F0C35A;
  --sky-dusk: #7B6BB5;
  --sky-night: #141B36;
  --sky-dawn: #F2A07B;

  --focus: #B4500A;

  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 40px);
}

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video,
iframe { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { top: 16px; }

.wrap {
  width: min(1160px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section { padding-block: clamp(72px, 10vw, 136px); }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head h2,
.offer h2,
.pilot h2,
.faq h2 {
  font-size: clamp(31px, 4.1vw, 50px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.section-head p {
  margin-top: 16px;
  max-width: 40rem;
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--muted);
}

.muted { color: var(--muted); }
.hint { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.fineprint { font-size: 15px; line-height: 1.5; color: var(--muted); }
.note { margin-top: 28px; font-size: 15px; color: var(--muted); }

/* Night surfaces */

.is-night {
  --focus: #FFB067;
  --muted: var(--on-night-muted);
  background: var(--night);
  color: var(--on-night);
}

/* Buttons: pills with an orange "next step" dot, like the planner's own Next pill */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 17px/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-next { background: var(--ink); color: #fff; }
.btn-next:hover { background: var(--ink-hover); }
.is-night .btn-next { background: #fff; color: var(--ink); }
.is-night .btn-next:hover { background: #DDE3F1; }
.btn .dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dose);
  box-shadow: 0 0 0 3px rgba(232, 113, 26, .28);
}
.btn-quiet { background: transparent; color: inherit; border-color: var(--field-line); }
.btn-quiet:hover { border-color: currentColor; }
.is-night .btn-quiet { border-color: rgba(236, 239, 248, .38); }
.is-night .btn-quiet:hover { border-color: var(--on-night); }
.btn-small { min-height: 44px; padding: 8px 18px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { cursor: progress; opacity: .75; }

.link-button {
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--ink); }

.text-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Masthead */

.masthead { padding-block: 18px; }
.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--on-night);
  text-decoration: none;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.brand-by {
  padding-left: 12px;
  border-left: 1px solid rgba(236, 239, 248, .25);
  font-size: 15px;
  color: var(--on-night-muted);
  white-space: nowrap;
}

.btn-small { white-space: nowrap; }
.narrow-only { display: none; }

@media (max-width: 600px) {
  .brand-by { display: none; }
  .brand-name { font-size: 17px; }
}
@media (max-width: 420px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
}

/* Hero: 2:30 am */

.hero {
  padding: clamp(28px, 4vw, 56px) 0 clamp(80px, 10vw, 128px);
  background:
    radial-gradient(50% 55% at 80% 45%, rgba(127, 211, 198, .14), transparent 70%),
    radial-gradient(40% 45% at 6% 8%, rgba(232, 113, 26, .14), transparent 70%),
    var(--night);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

.clock {
  display: flex;
  align-items: baseline;
  margin: 0 0 clamp(18px, 2.6vw, 32px) -0.05em;
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(92px, 15vw, 196px);
  line-height: .82;
  letter-spacing: -0.06em;
  color: var(--dose);
  text-shadow: 0 0 44px rgba(232, 113, 26, .38);
}
.clock-colon { margin-inline: -0.14em; animation: blink 1s steps(1, end) 4; }
.clock-ampm {
  margin-left: .32em;
  font-size: .25em;
  font-weight: 500;
  letter-spacing: 0;
}
@keyframes blink { 50% { opacity: .12; } }

.hero h1 {
  max-width: 15ch;
  font-size: clamp(38px, 5.3vw, 66px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.lede {
  max-width: 34rem;
  margin-top: 22px;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--on-night-muted);
}
.hero .actions { margin-top: 32px; }
.hero-for {
  margin-top: 24px;
  font-size: 15px;
  color: var(--on-night-muted);
}

/* The phone: a planner at 2:30 am */

.hero-phone {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin: 0;
}
.hero-phone figcaption {
  max-width: 28ch;
  font-size: 15px;
  text-align: center;
  color: var(--on-night-muted);
}
.phone-link {
  display: block;
  border-radius: 46px;
  color: inherit;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  .phone-link .phone { transition: transform .25s ease; }
  .phone-link:hover .phone { transform: translateY(-4px); }
}
.phone {
  width: min(318px, 82vw);
  aspect-ratio: 318 / 640;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(160deg, #2C355C, #0C1124 60%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 40px 90px -30px rgba(0, 0, 0, .75),
    0 0 140px -24px rgba(127, 211, 198, .32);
}
.phone-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 20px 13px 13px;
  overflow: hidden;
  border-radius: 36px;
  background: #F3F8F7;
  color: #0B3B47;
  font-size: 14px;
  line-height: 1.35;
}
.pl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}
.pl-clinic {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.pl-logo {
  width: 22px;
  height: 22px;
  border: 2px dashed #0F7C80;
  border-radius: 50%;
}
.pl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 59, 71, .14);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pl-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dose); }
.pl-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 59, 71, .06), 0 8px 18px -12px rgba(11, 59, 71, .28);
}
.pl-day { flex-direction: row; align-items: center; gap: 12px; font-size: 13px; }
.pl-day b { font-size: 15px; }
.pl-date {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 46px;
  border: 2px solid #D3E4E1;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  color: #4F6F77;
}
.pl-date b { font-size: 18px; letter-spacing: 0; color: #0B3B47; }
.pl-label { font-size: 12px; font-weight: 700; color: #4F6F77; }
.pl-title { font-size: 17px; font-weight: 800; line-height: 1.2; color: #0B3B47; }
.pl-body { font-size: 13px; color: #4F6F77; }
.pl-now { background: var(--dose-soft); box-shadow: inset 0 0 0 1.5px rgba(232, 113, 26, .5); }
.pl-now .pl-label { color: var(--dose-ink); }
.pl-next { flex-direction: row; align-items: center; gap: 12px; }
.pl-next > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pl-ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.pl-ring circle { fill: none; stroke: #E4ECEA; stroke-width: 5; }
.pl-ring .pl-ring-fill {
  stroke: var(--stop);
  stroke-linecap: round;
  stroke-dasharray: 113.1;
  stroke-dashoffset: 28;
}
.pl-time { font-family: var(--mono); font-size: 21px; font-weight: 500; line-height: 1.1; }
.pl-count { font-size: 13px; font-weight: 700; color: var(--stop); }
.pl-later { opacity: .85; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 17ch; }
}

/* Story: the night before */

.story { background: var(--paper); }
.beats {
  --when-w: 10.5rem;
  --beat-gap: 64px;
  position: relative;
  max-width: 1000px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.beats::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 40px;
  left: calc(var(--when-w) + var(--beat-gap) / 2 - 3px);
  width: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg,
    var(--sky-day) 0%, var(--sky-day) 46%,
    var(--sky-dusk) 60%, var(--sky-night) 70%,
    var(--sky-night) 82%, var(--sky-dawn) 100%);
}
.beat {
  --node: var(--sky-day);
  position: relative;
  display: grid;
  grid-template-columns: var(--when-w) minmax(0, 1fr);
  column-gap: var(--beat-gap);
  align-items: start;
  padding-block: 14px;
}
.beat::before {
  content: "";
  position: absolute;
  top: 30px;
  left: calc(var(--when-w) + var(--beat-gap) / 2 - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--node);
  box-shadow: 0 0 0 5px var(--paper);
}
.beat[data-sky="dusk"] { --node: var(--sky-dusk); }
.beat[data-sky="night"] { --node: var(--sky-night); }
.beat[data-sky="dawn"] { --node: var(--sky-dawn); }

.beat-when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 14px;
  text-align: right;
}
.beat-time {
  font-family: var(--mono);
  font-size: clamp(26px, 2.7vw, 36px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.beat[data-sky="night"] .beat-time { color: var(--dose-text); }
.beat-day { margin-top: 6px; font-size: 15px; color: var(--muted); }
.beat-body { max-width: 36rem; padding: 16px 0; }
.beat-body h3 {
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.beat-body p { margin-top: 8px; color: var(--muted); }
.beat[data-sky="dusk"] .beat-body,
.beat[data-sky="night"] .beat-body {
  --muted: var(--on-night-muted);
  padding: 18px 24px;
  border-radius: 18px;
  color: var(--on-night);
}
.beat[data-sky="dusk"] .beat-body { background: var(--dusk); }
.beat[data-sky="night"] .beat-body { background: var(--night); }

.turn {
  max-width: 40ch;
  margin-top: clamp(40px, 6vw, 72px);
  font-size: clamp(23px, 2.5vw, 31px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.015em;
}

@media (max-width: 720px) {
  .beats { --when-w: 0px; --beat-gap: 0px; padding-left: 40px; }
  .beats::before { left: 9px; top: 18px; }
  .beat { grid-template-columns: minmax(0, 1fr); padding-block: 12px; }
  .beat::before { left: -38px; top: 14px; }
  .beat-when { flex-direction: row; align-items: baseline; gap: 12px; padding-top: 0; text-align: left; }
  .beat-day { margin-top: 0; }
  .beat-body { padding: 8px 0 0; }
  .beat[data-sky="dusk"] .beat-body,
  .beat[data-sky="night"] .beat-body { margin-top: 10px; padding: 16px 18px; }
}

/* ---------- Clinics version (clinics.orbilabs.io) ----------
   The same page, told from the clinic's side: the list, the phones and
   the people who make up the difference. Colour meanings are unchanged:
   red = not ready, green = ready. */

.hero {
  background:
    radial-gradient(50% 55% at 82% 45%, rgba(242, 160, 123, .14), transparent 70%),
    radial-gradient(40% 45% at 6% 8%, rgba(199, 54, 63, .16), transparent 70%),
    var(--night);
}
.clock-stop {
  color: #F2646C;
  text-shadow: 0 0 44px rgba(199, 54, 63, .42);
}
.hero h1 { max-width: 17ch; }

.role-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 28px;
  font-size: 15px;
  color: var(--on-night-muted);
}
.role-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.role-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 14px;
  border: 1px solid rgba(236, 239, 248, .28);
  border-radius: 999px;
  color: var(--on-night);
  font-weight: 700;
  text-decoration: none;
}
.role-jump a:hover { border-color: var(--on-night); }

/* The list board: Thursday's endoscopy list */

.hero-list {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin: 0;
}
.hero-list figcaption {
  max-width: 30ch;
  font-size: 15px;
  text-align: center;
  color: var(--on-night-muted);
}
.list-board {
  --muted: #4F6168;
  --focus: #B4500A;
  width: min(100%, 380px);
  padding: 18px;
  border-radius: 22px;
  background: #F7FAF9;
  color: #16262D;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
  font-size: 14px;
  line-height: 1.35;
}
.lb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 12px;
  border-bottom: 1px solid var(--line);
}
.lb-title { font-weight: 800; font-size: 16px; }
.lb-date { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.lb-rows {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}
.lb-row {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.lb-time { font-family: var(--mono); font-weight: 500; font-size: 14px; padding-top: 1px; }
.lb-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-what b { font-size: 14px; }
.lb-what span { font-size: 12.5px; color: var(--stop-text); }
.lb-tag {
  align-self: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.lb-row.is-go .lb-tag { background: var(--go-soft); color: var(--go-text); }
.lb-row.is-stop {
  background: #FCECEC;
  box-shadow: inset 0 0 0 1.5px rgba(199, 54, 63, .45);
}
.lb-row.is-stop .lb-time { color: var(--stop-text); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.lb-row.is-stop .lb-tag { background: var(--stop); color: #fff; }
.lb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 2px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.lb-foot b {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}

@media (max-width: 900px) {
  .hero-list { justify-items: start; }
  .hero-list figcaption { text-align: left; }
}

/* The story, from the clinic's side: weekday daylight, the evening the
   clinic is closed, then the morning of the list */

.story .beats::before {
  background: linear-gradient(180deg,
    var(--sky-day) 0%, var(--sky-day) 32%,
    var(--sky-dusk) 46%, var(--sky-dusk) 52%,
    var(--sky-dawn) 64%, var(--sky-dawn) 82%,
    var(--sky-day) 100%);
}
.beat-role {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.beat[data-sky="dusk"] .beat-role { color: var(--sky-dusk); }
@media (max-width: 720px) {
  .beat-when { flex-wrap: wrap; }
  .beat-role { margin-top: 0; }
}

/* What changes for your team */

.roles { background: var(--surface); }
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.role {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 20px;
  background: var(--paper);
  scroll-margin-top: 24px;
}
.role:target { box-shadow: inset 0 0 0 2px var(--go); }
.role-who {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--go-text);
}
.role h3 {
  margin-top: 10px;
  font-size: clamp(21px, 2vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.role-list {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}
.role-list li { display: flex; align-items: flex-start; gap: 12px; }
@media (max-width: 820px) {
  .role-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Calculator */

.calc { background: var(--paper-2); }
.calc-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(22, 38, 45, .05), 0 30px 60px -44px rgba(22, 38, 45, .4);
}
/* Patients a month leads on the left, with the 100-patient picture under
   it; the clinic's other numbers run down the right, starting with how many
   in 100 arrive not ready. On narrow screens the picture sits straight after
   that slider, so it changes where you can see it. */
.calc-grid {
  --pad: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.calc-col-lead { border-right: 1px solid var(--line); }
.calc-lead,
.calc-unprepared { padding: var(--pad) var(--pad) 0; }
.calc-people,
.calc-clinic { padding: 26px var(--pad) var(--pad); }
.calc-unprepared,
.calc-clinic { display: flex; flex-direction: column; gap: 26px; }
.calc-unprepared h3 { font-size: 22px; }

.lead-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 18px 0 6px;
}
.num-hero-wrap { padding: 0 14px; border-radius: 14px; }
.num.num-hero {
  width: 4.6ch;
  min-height: 72px;
  font-size: clamp(40px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.lead-unit { font-size: 17px; color: var(--muted); }
.num.num-short { width: 2.6ch; }
.num-short + .affix { margin-left: 4px; }

.field > label,
.field-row > label,
.lead-form legend,
.inline-form > label {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}
.field-hero > label { font-size: clamp(21px, 2vw, 25px); font-weight: 800; line-height: 1.25; }
.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
}

.people-readout { margin: 0 0 6px; font-size: 17px; color: var(--muted); }
.people-readout output {
  display: block;
  font-size: clamp(34px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.people {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 9px 7px;
  max-width: 290px;
  margin-top: 20px;
}
.people svg {
  width: 100%;
  height: auto;
  aspect-ratio: 24 / 32;
  overflow: visible;
  fill: var(--rest);
  transition: fill .2s, stroke .2s;
}
.people svg.is-stop { fill: var(--stop); }
.people svg.is-go { fill: var(--surface); stroke: var(--go); stroke-width: 2.4px; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--muted);
}
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.key { width: 14px; height: 19px; overflow: visible; }
.key-rest { fill: var(--rest); }
.key-stop { fill: var(--stop); }
.key-go { fill: var(--surface); stroke: var(--go); stroke-width: 2.4px; }

/* Number entry beside each slider */
.num-wrap {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 2px;
  padding: 0 10px;
  border: 1.5px solid var(--field-line);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 700;
}
.num-wrap:focus-within { border-color: var(--ink); outline: 3px solid var(--focus); outline-offset: 2px; }
.affix { color: var(--muted); }
.num {
  width: 5.4ch;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.num:focus { outline: none; }
.num::-webkit-outer-spin-button,
.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Sliders. The filled part of the track carries the field's meaning:
   red for patients not ready, green for improvement, ink otherwise. */
.range {
  --pct: 50%;
  --fill: var(--ink);
  width: 100%;
  height: 36px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.range-stop { --fill: var(--stop); }
.range-go { --fill: var(--go); }
.range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(to right, var(--fill) var(--pct), var(--line) var(--pct));
}
.range::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border: 3px solid var(--fill);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(22, 38, 45, .25);
  -webkit-appearance: none;
  appearance: none;
}
.range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--line); }
.range::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--fill); }
.range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--fill);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(22, 38, 45, .25);
}
.range:focus { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--focus); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--focus); }

/* Disclosure rows: staff time, the maths, FAQ */
.more summary,
.research summary,
.maths summary,
.faq-list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
}
.more summary::-webkit-details-marker,
.research summary::-webkit-details-marker,
.maths summary::-webkit-details-marker,
.faq-list summary::-webkit-details-marker { display: none; }
.more summary::after,
.research summary::after,
.maths summary::after,
.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-75%) rotate(45deg);
  transition: transform .2s;
}
.more[open] summary::after,
.research[open] summary::after,
.maths[open] summary::after,
.faq-list details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }

.more { border-top: 1px solid var(--line); }
.more summary { min-height: 52px; padding: 14px 32px 14px 0; }
.more-body { display: flex; flex-direction: column; gap: 22px; padding: 6px 0 4px; }

/* Results */
.results {
  padding: clamp(24px, 4vw, 48px);
  border-top: 1px solid var(--line);
  background: #F7FAF9;
}
.today { max-width: 52rem; font-size: clamp(18px, 1.7vw, 21px); }
.figures {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px;
  margin-top: 30px;
}
.figure-label { font-size: 15px; color: var(--muted); }
.figure-value {
  margin-top: 4px;
  font-size: clamp(32px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.figure-hero .figure-value { font-size: clamp(52px, 6.6vw, 84px); letter-spacing: -0.03em; }
.breakeven {
  max-width: 52rem;
  margin-top: 28px;
  padding: 16px 20px;
  border-left: 4px solid var(--go);
  border-radius: 0 12px 12px 0;
  background: var(--go-soft);
}
.results-actions { margin-top: 28px; }
.estimate-mail { max-width: 36rem; margin-top: 22px; }
.inline-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.inline-row input { flex: 1 1 15rem; }
.inline-form .fineprint { margin-top: 10px; }
.sent { margin-top: 4px; font-weight: 700; color: var(--go-text); }

.research { max-width: 52rem; margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.research summary { min-height: 60px; padding: 16px 36px 16px 0; font-size: clamp(22px, 2.2vw, 27px); font-weight: 700; line-height: 1.25; }
.research-body { padding: 4px 0 24px; font-size: 16px; color: var(--muted); }
.research-list { display: grid; gap: 10px; margin: 16px 0 0; padding-left: 20px; }
.research-list strong { color: var(--ink); }
.research-refs-title { margin-top: 24px; font-size: 16px; color: var(--ink); }
.research-refs { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 20px; font-size: 14px; }

.maths { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line); }
.maths summary { min-height: 48px; padding: 12px 32px 12px 0; }
.maths-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 24px;
  margin: 8px 0 14px;
  font-size: 16px;
}
.maths-list dt { font-weight: 700; }
.maths-list dd { margin: 0; color: var(--muted); }

@media (max-width: 900px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-col { display: contents; }
  .calc-lead { order: 1; }
  .calc-unprepared { order: 2; }
  .calc-people { order: 3; }
  .calc-clinic { order: 4; }
  .calc-lead { padding-bottom: var(--pad); border-bottom: 1px solid var(--line); }
  .people { max-width: 380px; }
}
/* On phones the 100 patients sit in five rows of twenty, so the picture
   takes about a third of the height it did */
@media (max-width: 720px) {
  .people {
    grid-template-columns: repeat(20, minmax(0, 1fr));
    gap: 5px 3px;
    max-width: 360px;
    margin-top: 16px;
  }
  .legend { gap: 6px 16px; margin-top: 16px; font-size: 14px; }
  .people-readout output { font-size: 28px; }
}
@media (max-width: 720px) {
  .figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .figure-hero { grid-column: 1 / -1; }
  .maths-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .maths-list dd { margin-bottom: 10px; }
  .results-actions .btn { width: 100%; }
}

/* Form controls */
input[type="email"],
input[type="url"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--field-line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
input[type="email"]:focus,
input[type="url"]:focus { border-color: var(--ink); outline: 3px solid var(--focus); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--stop); }
.error { margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--stop-text); }

/* The pack: one source, many formats */

.pack { background: var(--surface); }
.flow {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 2fr);
  gap: clamp(28px, 5vw, 72px);
}
.source { position: sticky; top: 100px; align-self: start; } /* clears the floating calculator button */
.source-doc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  aspect-ratio: 210 / 250;
  padding: 24px 20px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 40px -30px rgba(22, 38, 45, .45);
}
.doc-line { display: block; height: 8px; border-radius: 4px; background: #DCE5E2; }
.w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w80 { width: 80%; }
.doc-step { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.doc-step i { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.doc-step .doc-line { flex: 1 1 auto; max-width: 70%; }
.c-dose { background: var(--dose); }
.c-go { background: var(--go); }
.c-stop { background: var(--stop); }
.c-med { background: var(--med); }
.doc-stamp {
  position: absolute;
  right: 16px;
  bottom: 18px;
  padding: 4px 10px;
  border: 2px solid var(--go);
  border-radius: 8px;
  color: var(--go-text);
  font-size: 14px;
  font-weight: 800;
  transform: rotate(-7deg);
}
.source h3 { margin-top: 22px; font-size: 22px; }
.source p { margin-top: 8px; font-size: 16px; color: var(--muted); }

.formats {
  position: relative;
  display: grid;
  gap: clamp(32px, 4vw, 52px);
  padding-left: 40px;
}
.formats::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--line);
}
.format {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}
.format::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -40px;
  width: 30px;
  height: 3px;
  background: var(--line);
}
.format-media {
  display: grid;
  place-items: center;
  min-height: 250px;
  padding: 22px;
  border-radius: 20px;
  background: #EDF2F0;
}
.media-video { padding: 0; overflow: hidden; background: #0B3B47; }
.media-video video { width: 100%; aspect-ratio: 16 / 9; background: #0B3B47; }
.media-guide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.media-guide img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 10px 24px -14px rgba(22, 38, 45, .55);
}
.media-audio { background: #0B3B47; }
.media-audio .wave { width: min(100%, 360px); height: auto; }

.format-text h3 { font-size: clamp(22px, 2.2vw, 27px); }
.format-text p { margin-top: 10px; color: var(--muted); }

.phone-small {
  width: 236px;
  height: 470px;
  aspect-ratio: auto;
  padding: 9px;
  border-radius: 38px;
  background: #151B33;
  box-shadow: 0 30px 60px -30px rgba(22, 38, 45, .7);
}
.phone-screen-live {
  position: relative;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 30px;
  background: #F3F8F7;
}
.phone-screen-live iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  max-width: none;
  height: 844px;
  border: 0;
  transform: scale(.559);
  transform-origin: 0 0;
  pointer-events: none;
}
/* Paint the bezel over the screen corners so they stay round where browsers don't clip scaled iframes */
.phone-screen-live::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 30px;
  box-shadow: 0 0 0 14px #151B33;
  pointer-events: none;
}

.extras {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 2fr);
  gap: 20px clamp(28px, 5vw, 72px);
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.extras h3 { font-size: 22px; }
.extras-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.extras-list li {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 16px;
}

@media (max-width: 900px) {
  .flow,
  .extras { grid-template-columns: minmax(0, 1fr); }
  .source {
    position: static;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 6px 20px;
  }
  .source-doc { grid-row: span 2; gap: 7px; padding: 14px 12px; }
  .source-doc .doc-line { height: 5px; }
  .doc-step i { width: 9px; height: 9px; }
  .doc-stamp { right: 6px; bottom: 8px; padding: 1px 5px; font-size: 10px; border-width: 1.5px; }
  .source h3 { margin-top: 0; align-self: end; }
  .source p { margin-top: 0; align-self: start; }
}
@media (max-width: 720px) {
  .formats { padding-left: 24px; }
  .formats::before { top: 0; bottom: 0; }
  .format { grid-template-columns: minmax(0, 1fr); }
  .format::before { top: 40px; left: -24px; width: 16px; }
}

/* How it works */

.how { background: var(--paper); }
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps::before {
  content: "";
  position: absolute;
  top: 47px;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
}
.step { position: relative; padding-top: 80px; }
.step::before {
  content: "";
  position: absolute;
  top: 39px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 4px solid var(--dose);
  border-radius: 50%;
  background: var(--paper);
}
.step:last-child::before { border-color: var(--go); background: var(--go); }
.step-when {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.step h3 { font-size: 22px; line-height: 1.25; }
.step p { margin-top: 8px; font-size: 16px; color: var(--muted); }

.bulk {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 2fr);
  gap: 12px clamp(28px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 20px;
  background: var(--surface);
}
.bulk h3 { font-size: 22px; }
.bulk p { color: var(--muted); max-width: 46rem; }
@media (max-width: 900px) {
  .bulk { grid-template-columns: minmax(0, 1fr); }
}

.assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 22px 44px;
  margin: clamp(56px, 7vw, 88px) 0 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.assurances li { display: flex; align-items: flex-start; gap: 14px; }
.tick { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--go); }

@media (max-width: 960px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 40px; }
  .steps::before { top: 6px; bottom: 30px; left: 8px; right: auto; width: 4px; height: auto; }
  .step { padding: 0 0 30px; }
  .step::before { top: 2px; left: -40px; }
  .step-when { position: static; margin-bottom: 4px; }
}

/* Offer and form */

.offer { background: var(--surface); }
.offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(36px, 6vw, 96px);
}
.offer-copy > p { margin-top: 20px; font-size: 19px; }
.gets {
  display: grid;
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.gets li { position: relative; padding-left: 34px; }
.gets li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 6px;
  width: 8px;
  height: 15px;
  border: solid var(--go);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.offer-copy .muted { margin-top: 24px; font-size: 16px; }

.form-panel {
  padding: clamp(22px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
}
.lead-form { display: grid; gap: 22px; }
.lead-form .field > label { margin-bottom: 8px; }
.lead-form legend { margin-bottom: 10px; padding: 0; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 380px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 999px;
  background: #DFE7E4;
}
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg label {
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.seg input:checked + label {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(22, 38, 45, .2);
}
.seg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }

.drop {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 148px;
  padding: 24px;
  border: 2px dashed var(--field-line);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.drop:hover,
.drop.is-over { border-color: var(--ink); background: #FBFDFC; }
.drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.drop.has-file { border-style: solid; border-color: var(--go); }
.drop.has-error { border-color: var(--stop); }
.drop-title { font-weight: 700; overflow-wrap: anywhere; }
.drop-hint { font-size: 15px; color: var(--muted); }
.mode-url > label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 700; }

.caution { margin-top: -8px; font-size: 15px; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); }

.progress { height: 6px; margin-top: -10px; overflow: hidden; border-radius: 6px; background: #DFE7E4; }
.progress span { display: block; width: 0; height: 100%; background: var(--go); transition: width .2s; }
.form-error { margin-top: -6px; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.done h3 { font-size: 27px; }
.done h3:focus { outline: none; }
.done p { margin-top: 12px; }

@media (max-width: 900px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Pilot */

.pilot { background: var(--paper); }
.pilot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(36px, 6vw, 96px);
}
.pilot-grid > div > p { max-width: 34rem; margin-top: 16px; font-size: 19px; color: var(--muted); }
.pilot-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 2.5fr) auto;
  gap: 4px;
  margin-top: 32px;
  font-size: 15px;
  font-weight: 700;
}
.pilot-bar span { padding: 10px 12px; border-radius: 8px; }
.pb-build { background: var(--dose-soft); color: var(--dose-ink); }
.pb-live { background: var(--go-soft); color: var(--go-text); }
.pb-end { background: var(--ink); color: #fff; }
.measures { margin: 0; border-top: 1px solid var(--line); }
.measures div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.measures dt { font-weight: 700; }
.measures dd { margin: 0; color: var(--muted); }

@media (max-width: 900px) {
  .pilot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pilot-bar { grid-template-columns: minmax(0, 1fr); }
  .measures div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* FAQ */

.faq { background: var(--surface); }
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 2fr);
  gap: clamp(24px, 5vw, 72px);
}
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { padding: 20px 44px 20px 0; font-size: 19px; line-height: 1.35; }
.faq-list details p { max-width: 44rem; padding: 0 0 22px; color: var(--muted); }

@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* Footer */

.site-footer {
  padding: clamp(80px, 10vw, 128px) 0 40px;
  background:
    radial-gradient(45% 60% at 8% 0%, rgba(232, 113, 26, .12), transparent 70%),
    var(--night);
}
.bookend {
  max-width: 22ch;
  margin-bottom: 32px;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: 28px;
  border-top: 1px solid rgba(236, 239, 248, .14);
}
.orbi img { width: 132px; height: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: var(--on-night); }
.site-footer .fineprint { margin-top: 20px; }

/* Motion and contrast preferences */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .people svg { fill: GrayText; }
  .people svg.is-stop,
  .key-stop { fill: CanvasText; }
  .people svg.is-go,
  .key-go { fill: Canvas; stroke: CanvasText; }
  .btn .dot,
  .pl-pill .dot { forced-color-adjust: none; }
}

/* Printing the estimate */

.print-sheet { display: none; }

/* Floating reminder to try the calculator */

.calc-nudge {
  position: fixed;
  left: 50%;
  top: max(16px, env(safe-area-inset-top));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 6px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 18px 40px -16px rgba(22, 38, 45, .55), 0 0 0 1px rgba(22, 38, 45, .08);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -12px);
}
.calc-nudge.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: no-preference) {
  .calc-nudge { transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  .calc-nudge.is-shown { transition: opacity .25s ease, transform .25s ease, visibility 0s; }
}
.calc-nudge .btn { min-width: 0; white-space: nowrap; }
.calc-nudge-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.calc-nudge-close:hover { background: var(--paper-2); color: var(--ink); }
.calc-nudge-close svg { width: 18px; height: 18px; }

/* Floating "Get a free review" button */

.review-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  box-shadow: 0 18px 40px -14px rgba(22, 38, 45, .6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}
.review-fab.is-shown { opacity: 1; visibility: visible; transform: none; }
.review-fab.over-night { background: #fff; color: var(--ink); }
.review-fab.over-night:hover { background: #DDE3F1; }
@media (prefers-reduced-motion: no-preference) {
  .review-fab { transition: background-color .15s, opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  .review-fab.is-shown { transition: background-color .15s, opacity .25s ease, transform .25s ease, visibility 0s; }
}

@media print {
  @page { margin: 16mm; }
  .calc-nudge,
  .review-fab { display: none !important; }
  body.printing-estimate { background: #fff; }
  body.printing-estimate > *:not(#print-sheet) { display: none !important; }
  body.printing-estimate .print-sheet { display: block; color: #000; font-size: 12pt; line-height: 1.5; }
  .print-sheet h1 { font-size: 22pt; margin-bottom: 4pt; }
  .print-sheet h2 { font-size: 14pt; margin: 18pt 0 6pt; }
  .print-sheet table { width: 100%; border-collapse: collapse; }
  .print-sheet th,
  .print-sheet td { padding: 5pt 0; border-bottom: 0.5pt solid #bbb; text-align: left; vertical-align: top; }
  .print-sheet td:last-child { text-align: right; font-weight: 700; }
  .print-sheet .p-note { margin-top: 14pt; color: #444; font-size: 10pt; }
}

/* Long-form pages (privacy) */

.prose { max-width: 44rem; }
.prose h1 { font-size: clamp(36px, 4.6vw, 54px); font-weight: 800; letter-spacing: -0.02em; }
.prose h2 { margin-top: 44px; font-size: 24px; }
.prose p,
.prose ul { margin-top: 14px; }
.prose ul { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.site-footer .footer-row:first-child { margin-top: 0; padding-top: 0; border-top: 0; }


/* Files added to the handout form (up to five) */

.file-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.file-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px 12px;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.file-item.has-error { border-color: var(--stop); }
.file-name { font-weight: 700; overflow-wrap: break-word; }
@media (max-width: 560px) {
  /* Long file names get the full width; size and Remove sit on the line below */
  .file-item { grid-template-columns: minmax(0, 1fr) auto; padding-left: 14px; }
  .file-name { grid-column: 1 / -1; padding-top: 10px; }
  .file-remove { margin-left: auto; }
}
.file-size { font-size: 15px; color: var(--muted); white-space: nowrap; }
.file-remove {
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.file-remove:hover { color: var(--ink); }
.file-problem {
  grid-column: 1 / -1;
  padding: 0 12px 10px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--stop-text);
}
.drop.is-full { border-style: solid; cursor: default; }

/* Onboarding page: calculator, then the upload, then what they get, then questions.
   Backgrounds alternate so the upload and the example do not run together. */

.onboarding .section-head h1 {
  font-size: clamp(31px, 4.1vw, 50px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.onboarding .calc { padding-top: clamp(40px, 6vw, 80px); }
.onboarding .pack { background: var(--paper); }

/* Onboarding site: the header button is the main action at the top of the page,
   so it is large and sits on the right. The floating button takes over on scroll. */

.masthead-cta {
  min-height: 60px;
  padding: 14px 32px;
  font-size: 19px;
}
@media (max-width: 560px) {
  .masthead-cta { min-height: 52px; padding: 8px 14px; font-size: 15px; gap: 8px; white-space: nowrap; }
  .masthead .brand { gap: 8px; }
  .masthead .brand-mark { width: 26px; height: 26px; }
  .masthead .brand-name { font-size: 16px; }
}

/* "Send onboarding to desktop": phones only. A button at the top jumps to the
   hand-over section, where an email address gets the link. */

.handoff-top,
.handoff { display: none; }
.btn-icon { flex: none; width: 22px; height: 22px; }
.handoff { background: var(--paper); }
.handoff .inline-form { max-width: 36rem; }
.handoff-alt { margin-top: 18px; font-size: 16px; color: var(--muted); }
.handoff-alt .text-link { margin-top: 0; }
@media (max-width: 768px) {
  .handoff-top { display: block; margin-bottom: 28px; }
  .handoff { display: block; }
}