/* QuickTouch site: one dark look by choice, lit by the brand's light field.
   Layout: a lit stage at the top of every page; product pages continue on the night ground below it. */
:root {
  --night: #1a0f0b;
  --night-2: #24150f;
  --cream: #fff7f0;
  --cream-dim: rgba(255, 247, 240, 0.82);
  --cream-soft: rgba(255, 247, 240, 0.64);
  --cream-faint: rgba(255, 247, 240, 0.22);
  --ink: #2e2724;
  --ember: #f2913f;
  --lagoon: #6fb3b0;
  --gold: #e2b55a;
  --display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
  border-radius: 6px;
}
h1,
h2,
h3 {
  text-wrap: balance;
}

.stage {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: radial-gradient(
      ellipse 120% 90% at -10% -15%,
      rgba(242, 145, 63, 0.95) 0%,
      rgba(228, 107, 37, 0.55) 35%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 110% 90% at 110% 115%,
      rgba(63, 138, 143, 0.95) 0%,
      rgba(47, 106, 112, 0.5) 38%,
      transparent 72%
    ), linear-gradient(125deg, #7a2a1c 0%, #3a1620 45%, #1f2a40 75%, #1e4a55 100%);
}
.stage.ember {
  background: linear-gradient(135deg, #ffc48a 0%, #f2913f 32%, #e46b25 58%, #b8321f 100%);
}
.stage.lagoon {
  background: linear-gradient(135deg, #b9e3d9 0%, #6fb3b0 30%, #448288 60%, #1e4a55 100%);
}
canvas.light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
canvas.light.on {
  opacity: 1;
}
.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 10, 8, 0.42) 0%, transparent 38%),
    linear-gradient(to bottom, rgba(20, 10, 8, 0.22) 0%, transparent 22%);
}
.stage .fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(26, 15, 11, 0) 0%, var(--night) 100%);
}

.wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: max(32px, env(safe-area-inset-left, 0px));
  padding-right: max(32px, env(safe-area-inset-right, 0px));
}

/* ---------- Header and the Products menu ---------- */
header.top {
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
}
nav.main {
  display: flex;
  align-items: center;
  gap: 30px;
}
nav.main > a,
.signin,
.pm-btn {
  text-decoration: none;
  color: var(--cream-dim);
  font: inherit;
  font-size: 16px;
  padding-block: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
nav.main > a:hover,
.signin:hover,
.pm-btn:hover,
.pm.open .pm-btn {
  color: #fff;
}
.right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease;
}
.cta:hover {
  background: #fff;
  transform: translateY(-1px);
}
.cta:active {
  transform: translateY(0) scale(0.98);
}
.ghost {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 247, 240, 0.5);
  color: var(--cream);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ghost:hover {
  border-color: var(--cream);
  background: rgba(255, 247, 240, 0.08);
}

.pm {
  position: relative;
}
.pm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-btn svg {
  transition: transform .2s ease;
}
.pm:hover .pm-btn svg,
.pm.open .pm-btn svg {
  transform: rotate(180deg);
}
.pm-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(880px, calc(100vw - 48px));
  transform: translate(-40%, 6px);
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.pm:hover .pm-panel,
.pm:focus-within .pm-panel,
.pm.open .pm-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-40%, 0);
  transition: opacity .18s ease, transform .18s ease;
}
.pm-card {
  background: rgba(26, 15, 11, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 247, 240, 0.14);
  border-radius: 20px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.pm-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.pm-col {
  padding: 22px 22px 18px;
}
.pm-col + .pm-col {
  border-left: 1px solid rgba(255, 247, 240, 0.1);
}
.pm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.pm-head i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.pm-col a {
  display: block;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
}
.pm-col a b {
  display: block;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--cream);
}
.pm-col a span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cream-soft);
}
.pm-col a:hover,
.pm-col a:focus-visible {
  background: rgba(255, 247, 240, 0.08);
}
.pm-panel.wide {
  width: min(1120px, calc(100vw - 48px));
  transform: translate(-30%, 6px);
}
.pm:hover .pm-panel.wide,
.pm:focus-within .pm-panel.wide,
.pm.open .pm-panel.wide {
  transform: translate(-30%, 0);
}
.pm-cols.three {
  grid-template-columns: 1fr 1.7fr 1fr;
}
.pm-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6px;
}
.pm-col .pm-list a,
.pm-col .pm-plain a {
  padding: 8px 10px;
}
.pm-col .pm-list a b,
.pm-col .pm-plain a b {
  font-size: 15.5px;
}
.pm-panel.narrow {
  width: min(420px, calc(100vw - 48px));
}
.pm-col a .ext {
  display: inline;
  margin: 0;
  font-size: 13px;
  color: var(--cream-soft);
}
.pm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 14px 32px;
  border-top: 1px solid rgba(255, 247, 240, 0.1);
  background: rgba(255, 247, 240, 0.04);
  font-size: 14.5px;
  color: var(--cream-dim);
}
.pm-foot a {
  color: var(--cream);
  font-weight: 500;
  text-decoration: none;
}
.pm-foot a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Product pages ---------- */
.hero {
  padding-block: clamp(56px, 10vh, 120px) clamp(90px, 14vh, 170px);
}
.side-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.side-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(26, 15, 11, 0.28);
  border: 1px solid rgba(255, 247, 240, 0.3);
  font-size: 14px;
  font-weight: 500;
}
.side-tag i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.hero h1 {
  margin: 0;
  font-weight: 200;
  font-size: clamp(44px, 7.2vw, 112px);
  line-height: 1;
  letter-spacing: -.05em;
  max-width: 16ch;
}
.hero h1 b {
  font-weight: 600;
}
.hero .sub {
  margin: 28px 0 0;
  max-width: 46ch;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  font-weight: 300;
  color: var(--cream-dim);
}
.hero .acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.kicker {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream-soft);
}

.band {
  padding-block: clamp(56px, 9vh, 110px);
}
.band h2 {
  margin: 0 0 8px;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.band h2 b {
  font-weight: 600;
}
.lead {
  margin: 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cream-soft);
}
.changes {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}
.change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.15fr);
  gap: 24px;
  align-items: start;
  padding-block: 28px;
  border-top: 1px solid var(--cream-faint);
}
.change:last-child {
  border-bottom: 1px solid var(--cream-faint);
}
.change small {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.change .was {
  font-size: 18px;
  line-height: 1.5;
  color: var(--cream-soft);
  margin: 0;
}
.change .now {
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.38;
  letter-spacing: -.015em;
  margin: 0;
}
.change .arrow {
  padding-top: 30px;
  color: var(--cream-soft);
}
.sidehead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 48px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sidehead i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.who {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.who span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 247, 240, 0.07);
  border: 1px solid rgba(255, 247, 240, 0.14);
  font-size: 16px;
}
.also {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.also a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border-radius: 18px;
  background: rgba(255, 247, 240, 0.05);
  border: 1px solid rgba(255, 247, 240, 0.12);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.also a:hover {
  background: rgba(255, 247, 240, 0.09);
  border-color: rgba(255, 247, 240, 0.3);
}
.also b {
  font-size: 19px;
  font-weight: 500;
}
.also span {
  font-size: 15px;
  line-height: 1.45;
  color: var(--cream-soft);
}
.note {
  margin: 22px 0 0;
  font-size: 15px;
  color: var(--cream-soft);
}
.close {
  border-radius: 28px;
  padding: clamp(40px, 7vw, 80px) clamp(24px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  background: var(--night-2);
  border: 1px solid rgba(255, 247, 240, 0.12);
}
.close:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 3px;
  background: var(--ember);
}
.close h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 300;
  letter-spacing: -.03em;
  max-width: 20ch;
}
.close h2 b {
  font-weight: 600;
}

footer.bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 18px 26px;
  border-top: 1px solid rgba(255, 247, 240, 0.14);
  font-size: 14px;
  color: var(--cream-dim);
}
footer.bottom span:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
footer.bottom a {
  text-decoration: none;
}
footer.bottom a:hover {
  color: #fff;
}

@media (max-width: 920px) {
  nav.main > a {
    display: none;
  }
  .pm {
    position: static;
  }
  .pm-panel {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    transform: translateY(6px);
    padding-top: 0;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .pm:hover .pm-panel,
  .pm:focus-within .pm-panel,
  .pm.open .pm-panel {
    transform: translateY(0);
  }
  .pm-cols {
    grid-template-columns: 1fr;
  }
  .pm-col + .pm-col {
    border-left: 0;
    border-top: 1px solid rgba(255, 247, 240, 0.1);
  }
  .pm-card {
    max-height: calc(100vh - 110px);
    overflow: auto;
  }
  .also {
    grid-template-columns: 1fr;
  }
  .change {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .change .arrow {
    display: none;
  }
}
@media (max-width: 920px) {
  .pm-panel.wide {
    transform: translateY(6px);
  }
  .pm:hover .pm-panel.wide,
  .pm:focus-within .pm-panel.wide,
  .pm.open .pm-panel.wide {
    transform: translateY(0);
  }
  .pm-cols.three {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  header.top {
    gap: 12px;
  }
  nav.main {
    gap: 16px;
  }
  header.top .right {
    display: none;
  }
  .brand .bt {
    display: none;
  }
  nav.main {
    gap: 14px;
  }
  .pm-btn {
    font-size: 15px;
  }
  .pm-list {
    grid-template-columns: 1fr;
  }
  .wrap {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .signin {
    display: none;
  }
  .cta {
    min-height: 44px;
    padding: 0 18px;
    font-size: 15px;
  }
  .pm-foot {
    padding: 14px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ---------- Subpages: one calm ground, one faint ember glow, no moving light ---------- */
.stage.plain {
  background: var(--night);
}
.stage.plain:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 75% at 88% -18%,
    rgba(228, 107, 37, 0.2) 0%,
    rgba(228, 107, 37, 0) 70%
  );
}
.stage.plain .hero {
  padding-block: clamp(40px, 7vh, 90px) clamp(48px, 8vh, 96px);
}
.side-tag {
  background: rgba(255, 247, 240, 0.05);
  border-color: rgba(255, 247, 240, 0.18);
}
.hero.has-pv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: center;
}
.hero.has-pv h1 {
  font-size: clamp(40px, 4.6vw, 76px);
}
.hero-pv {
  min-width: 0;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.chips a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 247, 240, 0.2);
  text-decoration: none;
  font-size: 15.5px;
  color: var(--cream-dim);
}
.chips a:hover {
  border-color: var(--cream);
  color: #fff;
}
.note a {
  color: var(--cream);
  text-underline-offset: 4px;
}
.tour-slot {
  margin-top: 32px;
}
.pm-cols.eq {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pm-all {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink) !important;
  font-weight: 600;
}
.pm-all:hover {
  background: #fff;
  text-decoration: none !important;
}

/* ---------- All features: one section per capability, sketches alternating sides ---------- */
.fgroup {
  padding-top: clamp(56px, 9vh, 100px);
}
.fgroup h2 {
  margin: 0 0 8px;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 300;
  letter-spacing: -.035em;
}
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
  padding-block: clamp(40px, 7vh, 80px);
  border-top: 1px solid rgba(255, 247, 240, 0.1);
}
.fgroup + .feat {
  border-top: 0;
}
.feat.flip .feat-text {
  order: 2;
}
.feat.flip .feat-pv {
  order: 1;
}
.feat h3 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.feat h3 b {
  font-weight: 600;
}
.feat ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feat li {
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--cream-dim);
}
.feat li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--ember);
}
.feat .more {
  display: inline-block;
  margin-top: 22px;
  color: var(--cream);
  font-weight: 500;
  text-underline-offset: 4px;
}
.feat-pv {
  min-width: 0;
}
@media (max-width: 920px) {
  .hero.has-pv {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .feat {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .feat.flip .feat-text {
    order: 1;
  }
  .feat.flip .feat-pv {
    order: 2;
  }
  .pm-cols.eq {
    grid-template-columns: 1fr;
  }
}

/* floating notes in the sketches never run past the sketch edge */
.pv .pv-toast {
  white-space: normal;
  max-width: calc(100% - 24px);
}

/* ---------- Paper: a light page (the All features page) ---------- */
body.paper {
  --night: #fbf8f5;
  --night-2: #f3ece4;
  --cream: #2e2724;
  --cream-dim: #5e5551;
  --cream-soft: #7a706c;
  --cream-faint: rgba(46, 39, 36, 0.14);
  background: #fbf8f5;
  color: #2e2724;
  color-scheme: light;
}
body.paper .pm-card {
  --cream: #fff7f0;
  --cream-dim: rgba(255, 247, 240, 0.82);
  --cream-soft: rgba(255, 247, 240, 0.64);
  color: #fff7f0;
}
body.paper .brand svg path:not([fill="#DE8C46"]) {
  fill: #2e2724;
}
body.paper header .cta,
body.paper .close .cta {
  background: #e46b25;
  color: #ffffff;
}
body.paper header .cta:hover,
body.paper .close .cta:hover {
  background: #c9581a;
}
body.paper .ghost {
  border-color: rgba(46, 39, 36, 0.3);
}
body.paper .ghost:hover {
  border-color: #2e2724;
  background: rgba(46, 39, 36, 0.04);
}
body.paper .stage.plain:before {
  background: radial-gradient(
    ellipse 55% 75% at 88% -18%,
    rgba(228, 107, 37, 0.12) 0%,
    rgba(228, 107, 37, 0) 70%
  );
}
body.paper .chips a {
  border-color: rgba(46, 39, 36, 0.18);
  background: #ffffff;
}
body.paper .chips a:hover {
  border-color: #2e2724;
  color: #2e2724;
}
body.paper .feat {
  border-top-color: rgba(46, 39, 36, 0.1);
}
body.paper .close {
  border-color: rgba(46, 39, 36, 0.1);
}
body.paper footer.bottom {
  border-top-color: rgba(46, 39, 36, 0.12);
}
body.paper .feat-pv {
  filter: drop-shadow(0 18px 30px rgba(46, 39, 36, 0.08));
}
body.paper .hero .cta {
  background: #e46b25;
  color: #ffffff;
}
body.paper .hero .cta:hover {
  background: #c9581a;
}
body.paper .side-tag {
  background: #ffffff;
  border-color: rgba(46, 39, 36, 0.14);
}
body.paper .who span {
  background: #ffffff;
  border-color: rgba(46, 39, 36, 0.12);
}
body.paper .also a {
  background: #ffffff;
  border-color: rgba(46, 39, 36, 0.1);
}
body.paper .also a:hover {
  border-color: rgba(46, 39, 36, 0.32);
  background: #ffffff;
}
body.paper .hero-pv {
  filter: drop-shadow(0 18px 30px rgba(46, 39, 36, 0.08));
}

/* Light grey ground with the brand's Daybreak washes, faint (Alex, 29 Oct: no dark backgrounds on subpages) */
body.paper {
  --night: #f3f2f0;
  --night-2: #ffffff;
  background: radial-gradient(
      ellipse 70% 55% at -5% -5%,
      rgba(253, 220, 194, 0.75) 0%,
      rgba(253, 220, 194, 0) 62%
    ),
    radial-gradient(
      ellipse 60% 50% at 105% 0%,
      rgba(217, 236, 236, 0.85) 0%,
      rgba(217, 236, 236, 0) 62%
    ),
    radial-gradient(
      ellipse 80% 45% at 50% 105%,
      rgba(251, 234, 203, 0.55) 0%,
      rgba(251, 234, 203, 0) 70%
    ), #f3f2f0;
  background-attachment: fixed;
}
body.paper .stage.plain {
  background: transparent;
}
body.paper .stage.plain:before {
  display: none;
}
body.paper .close {
  background: #ffffff;
  box-shadow: 0 20px 50px -30px rgba(46, 39, 36, 0.25);
}
body.paper .qt-tour {
  box-shadow: 0 30px 70px -40px rgba(46, 39, 36, 0.35);
  border: 1px solid rgba(46, 39, 36, 0.08);
}
/* hover on light pages: darken to ink with an underline, never white */
body.paper nav.main > a:hover,
body.paper .signin:hover,
body.paper .pm-btn:hover,
body.paper .pm.open .pm-btn,
body.paper .pm:focus-within .pm-btn {
  color: #1a1412;
  text-decoration: underline;
  text-decoration-color: #e46b25;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
body.paper footer.bottom a:hover {
  color: #1a1412;
}

/* ---------- The Value Analysis page's look (29 Oct, Alex: "use the same background") ----------
   Flat Paper, white cards with warm hairlines, Linen for quiet fills, the Signal line on the headline's
   bold words, and one Dusk plate that rises out of the Paper at the end and runs into the footer. */
body.paper {
  --night: #fbf8f5;
  --night-2: #ffffff;
  --hair: #e9e0d7;
  background: #fbf8f5 !important;
  background-attachment: scroll;
}
body.paper .hero h1 b {
  background: linear-gradient(90deg, #e46b25, #e2b55a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .06em;
}
body.paper .hero .sub {
  color: #74675f;
}
body.paper .kicker {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #b44a12;
}
body.paper .side-tag {
  background: #f4eee8;
  border-color: transparent;
  border-radius: 6px;
}
body.paper .who span {
  background: #f4eee8;
  border-color: transparent;
  border-radius: 6px;
}
body.paper .also a {
  background: #ffffff;
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(36, 28, 25, 0.05), 0 18px 40px -22px rgba(36, 28, 25, 0.28);
}
body.paper .change {
  border-top-color: var(--hair);
}
body.paper .change:last-child {
  border-bottom-color: var(--hair);
}
body.paper .chips a {
  background: #ffffff;
  border-color: var(--hair);
}
body.paper .feat {
  border-top-color: var(--hair);
}
body.paper .hero-pv,
body.paper .feat-pv {
  filter: none;
}
body.paper .qt-tour {
  box-shadow: 0 1px 2px rgba(36, 28, 25, 0.05), 0 18px 40px -22px rgba(36, 28, 25, 0.28);
  border: 1px solid var(--hair);
}

.dusk {
  position: relative;
  background: linear-gradient(
    180deg,
    #fbf8f5 0,
    #ffc08a 90px,
    #e6612a 200px,
    #a8301f 330px,
    #5c1a40 52%,
    #2e1230 76%,
    #120a10 100%
  );
  color: #fff7f0;
  margin-top: 40px;
}
.dusk:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dusk > * {
  position: relative;
  z-index: 2;
}
.dusk .call {
  padding-block: 300px 104px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: flex-start;
}
.dusk .call h2 {
  margin: 0;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 300;
  max-width: 14em;
  color: #fff7f0;
}
.dusk .call h2 b {
  font-weight: 600;
}
.dusk .call p {
  color: #f3d3bc;
  max-width: 34em;
  margin: 0;
}
.dusk .cta {
  background: #fff7f0 !important;
  color: #241c19 !important;
}
.dusk .cta:hover {
  background: #ffffff !important;
}
.dusk .ghost {
  border-color: rgba(255, 247, 240, 0.6) !important;
  color: #fff7f0 !important;
  background: transparent !important;
}
.dusk .ghost:hover {
  background: rgba(255, 247, 240, 0.08) !important;
}
.dusk footer.bottom {
  border-top: 1px solid rgba(255, 247, 240, 0.16) !important;
  color: #e9c9b2;
}
.dusk footer.bottom a:hover {
  color: #fff7f0 !important;
}
@media (max-width: 560px) {
  .dusk .call {
    padding-block: 220px 72px;
  }
}
/* Dusk band: stops all in percentages so they can never cross on a short band (a mix of px and % made a
   hard line on wide screens), blended in OKLab where the browser can. */
.dusk {
  background: linear-gradient(
    180deg,
    #fbf8f5 0%,
    #ffd0a6 12%,
    #f08a4b 26%,
    #d2532a 38%,
    #9a2e2a 50%,
    #5c1a40 64%,
    #2e1230 82%,
    #120a10 100%
  );
  min-height: 620px;
}
@supports (background: linear-gradient(in oklab 180deg, red, blue)) {
  .dusk {
    background: linear-gradient(
      in oklab 180deg,
      #fbf8f5 0%,
      #ffd0a6 12%,
      #f08a4b 26%,
      #d2532a 38%,
      #9a2e2a 50%,
      #5c1a40 64%,
      #2e1230 82%,
      #120a10 100%
    );
  }
}
.dusk .call {
  padding-block: clamp(220px, 26vw, 320px) 96px;
}
.pm-cols.three.sol {
  grid-template-columns: 1fr 1.1fr 1.1fr;
}
.pm-sub {
  margin: 14px 0 2px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cream-soft);
}
.pm-sub:first-of-type {
  margin-top: 4px;
}
.pm-head + .pm-sub {
  margin-top: 0;
}

/* Closing band by side (Alex, 29 Oct): Dusk for device companies, Lagoon for hospitals and clinical staff,
   Convergence (ember meeting teal) where a page serves both. */
.dusk.lagoon {
  background: linear-gradient(
    180deg,
    #fbf8f5 0%,
    #d4f1ea 12%,
    #9ed8cf 24%,
    #62b3b0 36%,
    #3f8c93 48%,
    #2a6a7a 60%,
    #1d4a63 76%,
    #142e48 90%,
    #0d1b2a 100%
  );
}
.dusk.conv {
  background: linear-gradient(
    180deg,
    #fbf8f5 0%,
    #ffd0a6 12%,
    #f08a4b 25%,
    #c2412a 37%,
    #7a1e45 50%,
    #3a1f55 64%,
    #1f4e63 80%,
    #11283a 100%
  );
}
@supports (background: linear-gradient(in oklab 180deg, red, blue)) {
  .dusk.lagoon {
    background: linear-gradient(
      in oklab 180deg,
      #fbf8f5 0%,
      #d4f1ea 12%,
      #9ed8cf 24%,
      #62b3b0 36%,
      #3f8c93 48%,
      #2a6a7a 60%,
      #1d4a63 76%,
      #142e48 90%,
      #0d1b2a 100%
    );
  }
  .dusk.conv {
    background: linear-gradient(
      in oklab 180deg,
      #fbf8f5 0%,
      #ffd0a6 12%,
      #f08a4b 25%,
      #c2412a 37%,
      #7a1e45 50%,
      #3a1f55 64%,
      #1f4e63 80%,
      #11283a 100%
    );
  }
}
.dusk.lagoon .call p {
  color: #cfe9e6;
}
.dusk.lagoon footer.bottom {
  color: #c9e2df;
}
body.paper.tone-lagoon .hero h1 b {
  background: linear-gradient(90deg, #2f6a70, #448288 60%, #5a9ea0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.paper.tone-lagoon .kicker {
  color: #2f6a70;
}
/* Hospital headline words: a clear jade-teal line, the Lagoon counterpart of Signal (the first was too grey) */
body.paper.tone-lagoon .hero h1 b {
  background: linear-gradient(90deg, #0f6873 0%, #168c8a 55%, #22a394 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Both sides: the homepage's live light (teal left, indigo and plum in the middle, orange right), washing
   out into the Paper at the top. The CSS below is what shows before the light starts, or without WebGL. */
.dusk.conv {
  background: linear-gradient(180deg, #fbf8f5 0%, rgba(251, 248, 245, 0) 32%),
    linear-gradient(
      90deg,
      #5bb4b2 0%,
      #1f5c6e 22%,
      #2a1f55 44%,
      #7a1e45 60%,
      #d2481f 78%,
      #f57a2e 90%,
      #ffb574 100%
    ) !important;
}
.dusk > canvas.light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.dusk.conv:after {
  z-index: 1;
}
.dusk.conv .call {
  text-shadow: 0 1px 18px rgba(20, 10, 30, 0.25);
}

/* ---------- Rich footer on every subpage, continuing the closing band's dark ---------- */
footer.rich {
  background: #120a10;
  color: #e9c9b2;
  padding-block: 64px 28px;
  position: relative;
  z-index: 2;
}
footer.rich.tone-lagoon {
  background: #0d1b2a;
  color: #c9e2df;
}
footer.rich.tone-conv {
  background: #16132c;
  color: #dcd3e8;
}
.dusk.conv:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 19, 44, 0) 62%, #16132c 100%);
}
.dusk .call {
  padding-bottom: 120px;
}
footer.rich .fgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
}
footer.rich h4 {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff7f0;
  opacity: 0.62;
}
footer.rich ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer.rich a {
  color: inherit;
  text-decoration: none;
  font-size: 15px;
}
footer.rich a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
footer.rich .fbrand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 300px;
}
footer.rich .fbrand .brand {
  color: #fff7f0;
  font-size: 20px;
}
footer.rich .fbrand .brand svg path:not([fill="#DE8C46"]) {
  fill: #fff7f0 !important;
}
footer.rich .fbrand p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
footer.rich .fbrand .by {
  opacity: 0.7;
  font-size: 14px;
}
footer.rich .flegal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 247, 240, 0.14);
  font-size: 14px;
  opacity: 0.85;
}
footer.rich .flegal span:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
footer.rich .flegal a {
  font-size: 14px;
}
@media (max-width: 980px) {
  footer.rich .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  footer.rich .fbrand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  footer.rich .fgrid {
    grid-template-columns: 1fr;
  }
}

.dusk {
  margin-bottom: -1px;
}
.dusk.conv:before {
  background: linear-gradient(180deg, rgba(22, 19, 44, 0) 60%, #16132c 99%);
}

/* ---------- Phones and tablets: the menu as a sheet (desktop untouched: everything here is ≤920px or hidden above it) ---------- */
.mtoggle,
.m-acts {
  display: none;
}
@media (max-width: 920px) {
  header.top .right {
    display: flex;
    gap: 10px;
  }
  header.top .signin {
    display: none;
  }
  header.top .right .cta {
    min-height: 40px;
    padding: 0 16px;
    font-size: 14.5px;
  }
  .brand .bt {
    display: inline;
  }
  .mtoggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 247, 240, 0.35);
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: #fff7f0;
  }
  .mtoggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  body.paper .mtoggle {
    color: #241c19;
    border-color: rgba(36, 28, 25, 0.2);
  }
  nav.main {
    display: none !important;
  }

  /* open */
  html.m-lock,
  html.m-lock body {
    overflow: hidden;
  }
  header.top.mopen nav.main {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 100;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #1a0f0b;
    color: #fff7f0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(84px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
      calc(28px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
  header.top.mopen .mtoggle {
    position: fixed;
    z-index: 101;
    top: calc(20px + env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    color: #fff7f0;
    border-color: rgba(255, 247, 240, 0.35);
    background: #1a0f0b;
  }
  header.top.mopen .mtoggle span:first-child {
    transform: translateY(4px) rotate(45deg);
  }
  header.top.mopen .mtoggle span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }
  header.top.mopen .brand {
    position: fixed;
    z-index: 101;
    top: calc(26px + env(safe-area-inset-top, 0px));
    left: max(16px, env(safe-area-inset-left, 0px));
    color: #fff7f0;
  }
  header.top.mopen .brand svg path:not([fill="#DE8C46"]) {
    fill: #fff7f0 !important;
  }

  /* sections: tap to open, never on hover */
  nav.main .pm {
    position: static;
    border-bottom: 1px solid rgba(255, 247, 240, 0.12);
  }
  nav.main .pm-btn,
  body.paper nav.main .pm-btn,
  body.paper nav.main .pm.open .pm-btn,
  body.paper nav.main .pm-btn:hover {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-size: 21px;
    font-weight: 400;
    color: #fff7f0 !important;
    text-decoration: none;
  }
  nav.main .pm-btn svg {
    width: 16px;
    height: 16px;
  }
  nav.main .pm .pm-panel,
  nav.main .pm:hover .pm-panel,
  nav.main .pm:focus-within .pm-panel {
    display: none;
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none !important;
    padding: 0 0 14px;
    transition: none;
  }
  nav.main .pm.open .pm-panel {
    display: block;
  }
  nav.main .pm:hover .pm-btn svg,
  nav.main .pm:focus-within .pm-btn svg {
    transform: none;
  }
  nav.main .pm.open .pm-btn svg {
    transform: rotate(180deg);
  }
  nav.main .pm-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    max-height: none;
    overflow: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  nav.main .pm-cols,
  nav.main .pm-cols.three,
  nav.main .pm-cols.eq,
  nav.main .pm-cols.three.sol {
    grid-template-columns: 1fr;
  }
  nav.main .pm-col {
    padding: 6px 0 10px;
  }
  nav.main .pm-col + .pm-col {
    border: 0;
  }
  nav.main .pm-head {
    padding: 0;
    margin: 12px 0 6px;
  }
  nav.main .pm-sub {
    padding: 0;
  }
  nav.main .pm-col a {
    padding: 9px 0;
    border-radius: 0;
  }
  nav.main .pm-col a:hover {
    background: none;
  }
  nav.main .pm-foot {
    padding: 14px 0 4px;
    background: none;
    border-top: 1px solid rgba(255, 247, 240, 0.1);
  }
  nav.main > a,
  body.paper nav.main > a,
  body.paper nav.main > a:hover {
    display: block !important;
    padding: 18px 0;
    font-size: 21px;
    color: #fff7f0 !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 247, 240, 0.12);
  }
  nav.main .m-acts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }
  nav.main .m-acts .cta {
    justify-content: center;
    min-height: 52px;
    font-size: 17px;
    background: #e46b25 !important;
    color: #ffffff !important;
  }
  nav.main .m-signin {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(255, 247, 240, 0.45);
    color: #fff7f0;
    text-decoration: none;
    font-size: 17px;
  }
}
@media (max-width: 560px) {
  header.top .right {
    display: flex !important;
  }
  .brand .bt {
    display: inline;
  }
}
@media (max-width: 360px) {
  .brand .bt {
    display: none;
  }
}
@media (max-width: 560px) {
  .tour-slot {
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  }
  .tour-slot .qt-tour {
    border-radius: 0;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

/* ---------- A person in the "QuickTouch for" heroes ---------- */
.hero.has-person {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px;
  align-items: end;
  padding-bottom: 0;
}
.hero.has-person .hero-text {
  padding-bottom: clamp(48px, 8vh, 96px);
}
.hero-person {
  position: relative;
  margin: 0;
  height: clamp(460px, 44vw, 600px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-person .hp-panel {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 68%;
  border-radius: 24px;
  background: #fbe9da;
}
.hp-hospital .hp-panel,
.hp-staff .hp-panel {
  background: #ddefea;
}
.hero-person img {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}
.hero-person .hp-chip {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 18%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e9e0d7;
  box-shadow: 0 1px 2px rgba(36, 28, 25, 0.05), 0 18px 40px -22px rgba(36, 28, 25, 0.35);
}
.hero-person .hp-chip i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.hero-person .hp-chip b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #241c19;
}
.hero-person .hp-chip small {
  display: block;
  font-size: 12.5px;
  color: #74675f;
}
@media (max-width: 920px) {
  .hero.has-person {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hero.has-person .hero-text {
    padding-bottom: 8px;
  }
  .hero-person {
    height: 400px;
  }
}
@media (max-width: 560px) {
  .hero-person {
    height: 340px;
  }
  .hero-person .hp-chip {
    bottom: 12%;
    padding: 10px 12px;
  }
}
.hero.has-person h1 {
  font-size: clamp(40px, 4.6vw, 72px);
}
.hero.has-person {
  align-items: center;
}
.hero.has-person .hero-person {
  align-self: end;
}
@media (max-width: 920px) {
  .hero.has-person h1 {
    font-size: clamp(38px, 8.5vw, 56px);
  }
}