/* The macOS-style "desktop" used by every page except /retail-growth.
   Breakpoints match the original: wide ≥1440px, desktop 1200–1439px, tablet 810–1199px, phone <810px. */

:root {
  --red: #f8381c;
  --gold: #f0bc02;
  --green-badge: #00b717;
  /* Spring with bounce 0.2 over 1s, sampled for CSS. */
  --spring: linear(0, 0.0206, 0.0734, 0.1469, 0.2322, 0.3226, 0.4131, 0.5002, 0.5813, 0.6552, 0.721, 0.7785, 0.8279, 0.8696, 0.9043, 0.9326, 0.9553, 0.9731, 0.9868, 0.997, 1.0044, 1.0094, 1.0126, 1.0144, 1.0151, 1.015, 1.0144, 1.0134, 1.0121, 1.0108, 1.0094, 1.008, 1.0068, 1.0056, 1.0046, 1.0037, 1.0029, 1.0022, 1.0016, 1.0012, 1);
  --soft-out: cubic-bezier(0.25, 1, 0.5, 1);
}

html, body { height: 100%; overflow: hidden; background: #000; }
body { color: #fff; }

.ff { font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on; }
.red { color: var(--red); }
.phone-only { display: none !important; }

/* Hairline borders as overlays, like the original. */
.line { position: relative; }
.line::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid var(--line-color, rgba(255, 255, 255, 0.1));
  border-radius: inherit;
  pointer-events: none;
}
.line-all::after { border-width: 1px; }
.line-bottom::after { border-bottom-width: 1px; }

/* Entrance animations. Set --x / --y / --o / --delay inline. */
@keyframes enter {
  from { opacity: var(--o, 0); transform: translate(var(--x, 0), var(--y, 0)); }
}
.anim { animation: enter 1s var(--spring) var(--delay, 0s) both; }
.fade { animation: enter 0.5s var(--soft-out) var(--delay, 0s) both; }
@media (prefers-reduced-motion: reduce) {
  .anim, .fade { animation: none; }
}

/* ---------- Wallpaper ---------- */
.wallpaper { position: fixed; inset: 0; filter: hue-rotate(14deg); }
.wallpaper img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.desk { position: fixed; inset: 0; display: flex; overflow: auto; }
.stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; flex: none; overflow: clip; }

/* ---------- Notification (top right) ---------- */
.notice {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 450px;
  padding: 20px 16px 2px;
  transition: opacity 0.4s ease, transform 0.6s var(--spring);
}
.notice.is-dismissed { opacity: 0; transform: translateX(349px); pointer-events: none; }
.notice-card {
  display: flex;
  align-items: center;
  width: 320px;
  height: 78px;
  padding: 12px 0 12px 10px;
  background: rgba(18, 18, 18, 0.9);
  border-radius: 22px;
  cursor: pointer;
}
.notice-row { display: flex; align-items: center; gap: 10px; flex: 1 0 0; }
.notice-person { display: flex; align-items: center; gap: 10px; flex: none; }
.notice-person img { width: 38px; height: 38px; border-radius: 20px; object-fit: cover; }
.notice-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 157px; height: 50px; }
.notice-text strong { font-size: 12px; font-weight: 700; }
.notice-text span { font-size: 10px; font-weight: 500; }
.notice-actions { display: flex; align-items: center; flex: 1 0 0; min-width: 0; }
.notice-actions > i { flex: none; width: 2px; height: 78px; background: #323136; }
.notice-buttons { display: flex; flex-direction: column; flex: 1 0 0; height: 78px; }
.notice-buttons > i { height: 2px; background: #323136; }
.notice-buttons a, .notice-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  border-radius: 4px;
  font-size: 9px;
  white-space: pre;
}
.notice-book { color: #63ff70; font-weight: 600; }
.notice-later { color: #ff5959; font-weight: 500; }

/* ---------- Dock ---------- */
.dock { position: absolute; left: 50%; bottom: 24px; z-index: 1; height: 70px; transform: translateX(-50%); }
.dock-bar { position: relative; display: flex; align-items: center; gap: 2px; height: 70px; }
.dock-plate {
  position: absolute;
  inset: -4px -10px;
  z-index: 1;
  background: #262626;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  --line-color: #333;
}
.dock-item {
  position: relative;
  z-index: 6;
  flex: none;
  width: 55px;
  height: 55px;
  transition: width 0.45s var(--spring), height 0.45s var(--spring);
}
.dock-item a { display: block; width: 100%; height: 100%; }
.dock-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
/* Growing on hover is for a mouse. On touch a tap counts as a lingering hover,
   which left icons stuck at full size, so touch gets a quick press instead. */
@media (hover: hover) and (pointer: fine) {
  .dock-item:hover { width: 100px; height: 100px; }
}
.dock-tip {
  position: absolute;
  top: -12px;
  left: 50%;
  padding: 5px 12px;
  transform: translate(-50%, -100%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: #fff;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: pre;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .dock-item:hover .dock-tip { opacity: 1; }
}
.dock-sep { position: relative; z-index: 4; display: flex; align-items: center; height: 100%; padding-right: 1px; }
.dock-sep i { width: 1px; height: 46px; border-radius: 292px; background: #3d3d3d; }

/* ---------- Phone call banner ---------- */
.call { position: absolute; top: 0; left: 0; right: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 15px 0; }
.call-card {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  height: 67px;
  padding: 12px 10px;
  background: #121212;
  border-radius: 51px;
  transition: width 0.5s var(--spring), height 0.5s var(--spring);
}
.call-person { display: flex; align-items: center; gap: 10px; flex: 1 0 0; min-width: 0; }
.call-person img { flex: none; width: 48px; height: 48px; border-radius: 30px; object-fit: cover; }
.call-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 50px; }
.call-text strong { font-size: 12px; font-weight: 700; }
.call-text span { font-size: 8px; opacity: 0.5; }
.call-buttons { display: flex; align-items: center; gap: 5px; }
.call-decline, .call-accept { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 30px; }
.call-decline { padding-top: 3px; background: #ff473a; }
.call-decline svg { width: 23px; height: 23px; transform: rotate(135deg); }
.call-accept { background: #2cd258; }
.call-accept img { width: 28px; height: auto; }
.call.is-collapsed .call-card { width: 170px; height: 32px; padding: 0 10px; }
/* The phone-only rule resets .call to a block, so centre the card itself; the
   collapsed pill then sits in the middle like the Dynamic Island. */
.call-card { margin-inline: auto; }
.call.is-collapsed .call-person img, .call.is-collapsed .call-text span, .call.is-collapsed .call-decline { display: none; }
.call.is-collapsed .call-accept { width: 18px; height: 18px; }
.call.is-collapsed .call-accept img { width: 11px; }

/* ---------- Window chrome ---------- */
.window {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow: hidden;
  background: rgba(31, 31, 31, 0.75);
  border-radius: 22px;
  corner-shape: superellipse(1.25);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25), 0 36px 100px rgba(0, 0, 0, 0.4), inset 1px 1px 2px rgba(255, 255, 255, 0.2);
}
@supports not (corner-shape: superellipse(2)) {
  .window { border-radius: 19px; }
}
.sidebar {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 25%;
  height: 100%;
  background: rgba(31, 31, 31, 0.2);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  border-radius: 10px;
}
.lights { display: flex; gap: 8px; padding: 16px; }
.lights i { width: 12px; height: 12px; border-radius: 100px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.lights i:nth-child(1) { background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.sidebar-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.brand { display: flex; align-items: center; padding: 6px; }
.brand img { width: 80%; height: auto; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: block;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14.4px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fafafa;
  transition: background-color 0.2s ease;
}
.nav a:hover { background: rgba(255, 255, 255, 0.1); }
.nav a[aria-current="page"] { background: var(--gold); color: #1f1f1f; }
.pane { flex: 1 0 0; min-width: 0; height: 100%; overflow: auto; background: #1f1f1f; border-radius: 10px; }

.t-title { font-size: 17.6px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
.t-copy { font-size: 12.8px; letter-spacing: -0.03em; line-height: 1.3; }
.t-heading { font-size: 20.8px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; color: var(--red); white-space: pre; }
.t-name { font-size: 16.8px; letter-spacing: -0.01em; line-height: 1.4; }

/* ---------- Logo ticker ---------- */
.ticker {
  display: flex;
  align-items: center;
  flex: none;
  width: 100%;
  height: 60px;
  overflow: hidden;
  border-radius: 10px;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 10.93%, #000 88%, transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 10.93%, #000 88%, transparent 100%);
}
.ticker-track { display: flex; align-items: center; gap: 20px; width: max-content; padding-right: 20px; will-change: transform; }
/* The strip starts only once its speed is measured and every logo has decoded,
   so it never changes speed mid-run or stalls while a logo is still decoding. */
.ticker-track.is-running { animation: ticker var(--ticker-duration, 7.125s) linear infinite; }
.ticker-track img { flex: none; width: 75px; height: 45px; object-fit: contain; }
.ticker-track img.logo-wide { height: 20px; object-fit: contain; }
.ticker-track img.logo-slim { height: 13px; object-fit: contain; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Home ---------- */
.home { display: flex; flex: none; flex-direction: column; gap: 10px; width: 830px; height: 695px; padding: 20px 0 8px 16px; }
.home-window { flex: none; width: 100%; max-width: 800px; height: 380px; min-width: 0; }
.welcome { display: flex; flex-direction: column; align-items: center; gap: 14px; height: 100%; padding: 22px 32px; overflow: auto; }
.home-side { display: flex; gap: 10px; width: 100%; max-width: 700px; min-width: 0; }

.widget { display: block; flex: 1 0 0; max-width: 328px; min-width: 0; }
.widget-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  border-radius: 21.67px;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.25);
}
.widget-head { position: relative; display: flex; flex-direction: column; justify-content: center; height: 39px; padding-left: 20px; font-size: 12px; font-weight: 600; }
.widget-head::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 551px; height: 1px; background: rgba(255, 255, 255, 0.2); transform: translateX(-50%); }
.widget-body { height: 155px; overflow: auto; }
.widget-foot { height: 16px; }
.stocks { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 0; }
.stock { display: flex; align-items: center; justify-content: space-between; height: 42px; }
.stock-name { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 94px; height: 33px; }
.stock-name strong { font-size: 15px; font-weight: 600; white-space: pre; }
.stock-name span { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.spark { flex: none; width: 69px; height: 32px; background: url("/images/sparkline.svg") center / 100% 100% no-repeat; }
.stock-value { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 2px; width: 78px; height: 31px; font-size: 12px; font-weight: 500; }
.badge { padding: 2px 4px; background: var(--green-badge); border-radius: 2px; font-size: 10px; font-weight: 500; white-space: pre; }

/* ---------- Phone "Welcome Notes" accordion ---------- */
.notes-bar { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fed321; color: #1c1c1c; }
.notes-bar svg { width: 31px; height: 31px; }
.notes-bar span { font-size: 15px; font-weight: 600; white-space: pre; }
.notes-body { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.notes-body .ticker { height: 32px; }
.notes-body .ticker-track img { width: 81px; height: 26px; }
.notes-body .ticker-track img.logo-wide { width: 62px; height: 16px; }
.notes-body .ticker-track img.logo-slim { width: 128px; height: 22px; }
.notes-copy { font-size: 14.4px; letter-spacing: -0.03em; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }
.m-row { display: flex; align-items: center; gap: 10px; padding: 6px 16px; font-size: 14.4px; font-weight: 500; letter-spacing: -0.01em; color: #fafafa; }
.m-row span { flex: 1 0 0; }
.m-row svg { width: 12px; height: 6px; overflow: visible; }
.m-row.is-open { color: #febc2e; }
.m-row.is-open svg { transform: rotate(180deg); }

/* ---------- Learn more / Contact ---------- */
.app { position: relative; z-index: 1; flex: none; width: 67%; max-width: 1000px; height: 70%; }
.app-contact { width: 63%; }
.about { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 32px; }
.about > * { width: 100%; }
.about-intro { display: flex; flex-direction: column; gap: 16px; }
.checks { display: flex; flex-direction: column; gap: 8px; }
.check-row { display: flex; align-items: center; gap: 10px; }
.check-row .about-copy { flex: 1 0 0; }
.check-row.top { align-items: flex-start; }
.check {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 67px;
  background: #f0bc01;
}
.check::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #1d1d1f;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 5.59 10.58 L 1.42 6.41 L 0 7.82 L 5.59 13.41 L 17.59 1.41 L 16.18 0 Z' transform='translate(3.205 5.295)'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 5.59 10.58 L 1.42 6.41 L 0 7.82 L 5.59 13.41 L 17.59 1.41 L 16.18 0 Z' transform='translate(3.205 5.295)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check.is-hidden { opacity: 0; }
.what-we-do { font-size: 16px; letter-spacing: -0.01em; }
.about-copy { font-size: 12.8px; letter-spacing: -0.03em; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }
.about-copy ul { margin: 0 0 0 1.2em; list-style: disc; }
.about-copy li { margin-bottom: 1.3em; }
.about-copy li strong { color: rgba(255, 255, 255, 0.7); }
.modes { display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
.modes ol { flex: 1 0 0; margin: 0 0 0 1.4em; list-style: decimal; font-size: 12.8px; letter-spacing: -0.03em; line-height: 1.3; }
.modes li { font-size: 11.2px; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }
.modes li b { font-size: 12.8px; font-weight: 400; color: #fff; }
.founder { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.founder img { width: 80px; height: 80px; border-radius: 40px; object-fit: cover; }
.bio { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.bio p { font-size: 14.4px; letter-spacing: -0.01em; line-height: 1.2; color: #b0b0b0; }

.contact { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; padding: 32px; }
.form { display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 20px; position: relative; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.field > span { font-size: 12px; font-weight: 500; color: #888; }
.field input, .field textarea {
  width: 100%;
  height: 40px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(187, 187, 187, 0.15);
  color: #999;
  font-size: 14px;
  line-height: 1.2;
  outline: none;
  box-shadow: inset 0 0 0 1px transparent;
}
.field input::placeholder, .field textarea::placeholder { color: #999; }
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 1px #09f; }
.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.submit:disabled { opacity: 0.5; cursor: default; }
.form-note { font-size: 12px; color: #888; }
.form-note a { text-decoration: underline; }
.submit.is-error { background: rgba(255, 34, 68, 0.15); color: #ff2244; }
.honeypot { position: absolute; transform: scale(0); }

/* ---------- Case studies ---------- */
.app-cases { width: 75%; max-width: 800px; height: 63%; }
.cases-sidebar { max-width: 201px; }
.cases-title { padding: 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.03em; color: #fafafa; }
.cases-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 0 5px; }
.case-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px;
  border-radius: 0;
  text-align: left;
}
.case-tab.is-active { background: rgba(255, 255, 255, 0.1); border-radius: 5px; }
.case-tab:not(.is-active):not(:last-child) { position: relative; }
.case-tab:not(.is-active):not(:last-child)::after { content: ""; position: absolute; inset: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); pointer-events: none; }
.case-tab-name { display: flex; flex-direction: column; gap: 4px; height: 22px; }
.case-tab-name strong { font-size: 10px; font-weight: 600; white-space: pre; }
.case-tab-name span { font-size: 8px; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.6); white-space: pre; }
.case-tab .spark { width: 47px; height: 25px; background-image: url("/images/sparkline-small.svg"); }
.case-tab-value { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; height: 22px; font-size: 10px; font-weight: 500; line-height: 0.9; }
.case-tab-value .badge { padding: 2px; font-size: 8px; line-height: 0.9; }

.case { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 32px; }
.case[hidden] { display: none; }
.case-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.chip { padding: 5px 10px; background: var(--red); border-radius: 15px; font-size: 11.2px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.case-title { font-size: 24.8px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.4; color: var(--red); white-space: pre; }
.case-stats { font-size: 14.4px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.3; }
.case-media { width: 100%; aspect-ratio: 1; object-fit: cover; }
.case-banner { width: 100%; height: auto; }
.case-label { width: 100%; padding: 16px; background: rgba(0, 0, 0, 0.05); border-radius: 8px; font-family: "Space Mono", monospace; font-size: 14.4px; line-height: 1.3; }
.case-copy { font-size: 14.4px; letter-spacing: -0.03em; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }

/* ---------- 404 ---------- */
.lost {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 280px;
  padding: 32px 16px 16px;
  background: #eaeaead6;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  corner-shape: superellipse(1.25);
  box-shadow: 0 0 3px #00000040, 0 36px 100px #0006, inset 0 0 3px #ffffff1a;
}
@supports not (corner-shape: superellipse(2)) { .lost { border-radius: 8.7px; } }
.lost-text { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.lost h1 { width: 100%; font-size: 17.6px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; color: #000; text-align: center; }
.lost p { width: 100%; letter-spacing: -0.01em; color: rgba(15, 15, 15, 0.5); }
.lost a {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 6px 12px;
  background: #0a82ff;
  border-radius: 5px;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
  font-size: 14.4px;
  letter-spacing: -0.01em;
  color: #fff;
}

/* ---------- Wide (≥1440) ---------- */
@media (min-width: 1440px) {
  .home { flex: 1 0 0; flex-direction: row; width: auto; }
  .home-window { flex: 1 0 0; max-width: 1000px; height: 626px; }
  .home-side { flex: 1 0 0; flex-direction: column; }
  .widget { flex: none; width: 100%; }
}

/* ---------- Tablet ---------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .notice { padding: 20px 16px 0; }
  .home { flex: 1 0 0; width: auto; }
  .home-window { max-width: 700px; }
  .app { width: 90%; height: auto; max-width: none; }
  .app .window { height: 380px; }
  .app-cases .window { height: 445px; max-height: 100%; }
  .stage-cases { align-items: flex-start; padding-top: 100px; }
  .app-cases { width: 90%; height: auto; max-height: 75%; }
}

/* ---------- Phone ---------- */
@media (max-width: 809.98px) {
  .phone-only { display: revert !important; }
  .desktop-only { display: none !important; }
  .notice { display: none; }
  .dock { z-index: 8; bottom: 8px; }
  .desk { flex-direction: column; padding-bottom: 120px; }
  .stage { align-items: flex-start; padding: 60px 0 120px; }
  .home { width: 100%; height: auto; align-items: center; padding: 45px 16px 8px; }
  .home-window { height: auto; max-height: 400px; }
  .home-window .window { max-height: 400px; }
  .call { z-index: 2; }
  .home-side { flex-direction: column; max-width: none; }
  .widget { flex: none; width: 100%; max-width: none; }
  .widget-head::after { background: rgba(255, 255, 255, 0.2); }
  .widget-body { height: 159px; }
  .stock-name strong { font-size: 12px; }
  .widget-foot { height: 10px; }

  .window {
    flex-direction: column;
    height: auto;
    max-height: 100%;
    overflow: auto;
    background: transparent;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
  }
  .sidebar { display: none; }
  .pane { flex: none; height: auto; overflow: visible; background: transparent; }
  .app, .app-contact, .app-cases { width: 90%; height: 100%; max-width: none; }
  .app .window { max-height: 100%; }
  .about { max-width: 600px; padding: 20px; }
  .contact { max-width: none; padding: 16px; }
  .form { padding: 0; }

  .case-tab { padding: 16px; opacity: 0.5; border-radius: 0; }
  .case-tab.is-active { opacity: 1; background: none; }
  .case-tab-name { height: 44px; }
  .case-tab-name strong, .case-tab-value { font-size: 14px; }
  .case-tab-name span { font-size: 10px; }
  .case-tab .spark { width: 63px; height: 37px; background-image: url("/images/sparkline-large.svg"); }
  .case-tab-value { height: 44px; }
  .case { padding: 16px; }
  .cases-sidebar { display: flex; width: 100%; max-width: none; height: auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cases-sidebar::after, .cases-sidebar .lights, .cases-title { display: none; }
  .cases-sidebar .sidebar-body { padding: 0; }
  .cases-list { gap: 0; padding: 0; }
  .cases-green { display: flex; align-items: center; gap: 10px; padding: 10px; background: #28c840; color: #1c1c1c; font-size: 15px; font-weight: 600; }
  .cases-green svg { width: 31px; height: 31px; }

}

/* ---------- Case studies window, opened over the desktop ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.overlay.is-open { opacity: 1; }
.overlay .app-cases { transform: scale(0.985); transition: transform 0.22s var(--soft-out, ease); }
.overlay.is-open .app-cases { transform: none; }
/* All three lights close the window, but keep their original colours. */
.lights .light-btn {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.lights .light-red { background: #ff5f57; }
.lights .light-amber { background: #febc2e; }
.lights .light-green { background: #28c840; }
.lights .light-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .overlay, .overlay .app-cases { transition: none; }
}

@media (max-width: 809.98px) {
  .overlay { padding: 16px; }
  .overlay .app-cases { width: 100%; height: 90%; }
  .overlay .window {
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  .overlay .cases-sidebar {
    position: static;
    flex: none;
    width: 100%;
    height: auto;
    max-width: none;
  }
  /* The phone page stacks tabs and detail in one scroller; in the overlay the
     tab list stays put and only the detail scrolls. */
  .overlay .cases-list { gap: 0; }
  .overlay .cases-pane {
    position: static;
    flex: 1 0 0;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: auto;
  }
  .overlay .case { padding: 16px; }
}

/* Revenue tiers under the homepage intro. */
.tiers { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tiers li { font-size: 12.8px; line-height: 1.4; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.7); }
.tiers li strong { color: #fff; font-weight: 600; }
.cta-inline {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 12.8px;
  font-weight: 600;
}
@media (max-width: 809.98px) {
  .tiers li, .cta-inline { font-size: 14.4px; }
}

/* Team and advisory bench on the About panel. */
.team { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.bench { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
.bench-group h3 {
  margin: 0 0 6px;
  font-size: 12.8px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}
.bench-group p {
  margin: 0;
  font-size: 11.2px;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 809.98px) {
  .bench { grid-template-columns: 1fr; gap: 18px; }
  .bench-group h3 { font-size: 14.4px; }
  .bench-group p { font-size: 12.8px; }
}

/* The welcome window sizes to its copy instead of clipping the closing line and
   the call to action. The fixed heights set above are not tall enough for the
   current positioning copy at any desktop width, including 1440 and wider. */
@media (min-width: 810px) {
  .home { height: auto; align-self: flex-start; }
  /* Beside the case studies widget the window would otherwise stretch to the
     full desk height; it should be only as tall as its copy. */
  .home-window { align-self: flex-start; }
  /* One fixed size for Welcome, About Us and Contact Us, so switching sections
     never resizes the window. It is tall enough for the Welcome copy at every
     desktop width, never runs under the dock on short screens, and longer
     sections such as About Us scroll inside the window. */
  .home-window { height: min(640px, calc(100vh - 130px)); }
  .home-window > .window { height: 100%; }
  .welcome { height: 100%; overflow: auto; }
}

/* Stage bands: the stage and its need share one bold line that wraps naturally
   on narrow screens; the description follows. */
.tiers li { display: flex; flex-direction: column; gap: 2px; }
.tiers li strong { font-size: 13.6px; font-weight: 600; color: #fff; }
@media (max-width: 809.98px) {
  .tiers li strong { font-size: 15px; }
}

/* Reduced motion: the logos sit still as one centred, wrapped group instead of
   a strip frozen part-way. The looping copy is hidden. */
@media (prefers-reduced-motion: reduce) {
  .ticker, .notes-body .ticker { height: auto; padding-block: 6px; -webkit-mask-image: none; mask-image: none; }
  .ticker-track, .ticker-track.is-running { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; row-gap: 10px; padding-right: 0; }
  .ticker-track [aria-hidden="true"] { display: none; }
}

/* Window lights: only the red one is a control; the other two are decoration. */
.lights a { display: flex; border-radius: 100px; }
.lights a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Funnel list: the stage label leads each point. */
.about-copy li strong { color: #fff; }

/* Board of advisors sits apart from the last team role. */
.advisors { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.advisors h3 { margin: 0; font-size: 12.8px; font-weight: 600; letter-spacing: -0.03em; color: #fff; }
@media (max-width: 809.98px) {
  .advisors h3 { font-size: 14.4px; }
}

/* Message box: same look as the inputs, taller, grows by dragging. */
.field textarea { height: auto; min-height: 104px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.4; }

/* Touch dock: a quick press-in that springs back, like the original. */
@media (hover: none), (pointer: coarse) {
  .dock-item a { -webkit-tap-highlight-color: transparent; transition: transform 0.35s var(--spring); }
  .dock-item a:active { transform: scale(0.86); transition-duration: 0.08s; }
}

/* Case studies on a phone: the window stops above the dock, and the three
   lights sit on top of it with a finger-sized target on the red one. */
@media (max-width: 809.98px) {
  .overlay { padding: 16px 16px 100px; }
  .overlay .app-cases { height: 100%; }
  .overlay .cases-sidebar .lights { display: flex; gap: 8px; padding: 14px 16px 10px; }
  .overlay .lights .light-btn { position: relative; width: 14px; height: 14px; }
  .overlay .lights .light-btn::after { content: ""; position: absolute; inset: -14px; }
  .overlay .lights i { width: 14px; height: 14px; }
  /* In the pop-up the green bar only linked home behind the window, so the
     lights become the top row and the title sits under them. */
  .overlay .cases-green { display: none !important; }
  .overlay .cases-sidebar .cases-title { display: block; padding: 0 16px 8px; }
}

/* Declined call: the banner is gone, so the window moves up into its space. */
body.call-gone .call { pointer-events: none; }
@media (max-width: 809.98px) {
  .home, .stage { transition: padding-top 0.45s var(--soft-out); }
  body.call-gone .home, body.call-gone .stage { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .home, .stage { transition: none; }
}

/* Phone: the screen itself never scrolls. Every window stays in place, ends
   above the dock, and only its contents scroll. */
@media (max-width: 809.98px) {
  .desk { padding-bottom: 0; overflow: hidden; }
  .stage { height: 100%; padding-bottom: 96px; }
  .app, .app-contact, .app-cases { height: 100%; }
  .app > .window { height: 100%; max-height: 100%; }
  .home { height: 100%; padding-bottom: 96px; }
  /* The Welcome window keeps its 400px size where there is room and shrinks
     on shorter screens, so the case studies widget always stays in view. */
  .home-window { flex: 0 1 auto; min-height: 0; }
  .home-window .window { height: 100%; }
  .home-side { flex: none; }
}