/* utuwrk.com. Every colour is a token in the three blocks below: light, then
   dark for a system set to dark, then dark again for a chosen dark. The two
   dark blocks must stay identical (the same rule as the app; see CLAUDE.md).
   The Harbor values are the app's own (apps/web/src/styles/tokens.css). */

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

/* Registered so the hero can fade between teal (onboarding) and tide blue
   (offboarding): an unregistered custom property cannot transition. The
   initial values are the light tokens. */
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #0e7489;
}
@property --accent-fill {
  syntax: "<color>";
  inherits: true;
  initial-value: #0e7489;
}
@property --accent-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #0b6175;
}
@property --accent-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(14 116 137 / 12%);
}
@property --g1 {
  syntax: "<color>";
  inherits: true;
  initial-value: #0e7489;
}
@property --g2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #2563b8;
}
@property --halo {
  syntax: "<color>";
  inherits: true;
  initial-value: #2a9bb0;
}

:root {
  color-scheme: light;

  --page: #ecf4f6;
  --page-tint: #e1eef1;
  --surface: #ffffff;
  --surface-sunk: #f1f6f7;

  --ink: #12252b;
  --ink-muted: #536e77;
  --ink-faint: #8fa5ac;
  --ink-on-accent: #ffffff;

  /* Harbor teal: utuwrk, and onboarding. */
  --teal: #0e7489;
  --teal-bright: #2a9bb0;
  --teal-fill: #0e7489;
  --teal-fill-hover: #0b5f71;
  --teal-ink: #0b6175;
  --teal-soft: rgb(14 116 137 / 12%);
  /* Tide blue: offboarding, on this page only. */
  --tide: #2f5fb3;
  --tide-fill: #2a55a8;
  --tide-fill-hover: #22468c;
  --tide-ink: #244a96;
  --tide-soft: rgb(47 95 179 / 12%);

  --accent: var(--teal);
  --accent-fill: var(--teal-fill);
  --accent-fill-hover: var(--teal-fill-hover);
  --accent-ink: var(--teal-ink);
  --accent-soft: var(--teal-soft);
  --g1: #0e7489;
  --g2: #2563b8;
  --halo: #2a9bb0;

  /* The app's functional states, always beside a word or an icon. */
  --ok: #1e7a4c;
  --ok-soft: rgb(30 122 76 / 12%);
  --ready: #2557c7;
  --ready-soft: rgb(37 87 199 / 12%);
  --progress: #1f6fb2;
  --progress-soft: rgb(31 111 178 / 12%);
  --warn: #9a5b00;
  --warn-soft: rgb(154 91 0 / 12%);
  --danger: #c0322a;
  --danger-soft: rgb(192 50 42 / 12%);
  --mute-soft: rgb(83 110 119 / 12%);

  --glass: rgb(255 255 255 / 60%);
  --glass-strong: rgb(255 255 255 / 82%);
  --glass-edge: rgb(255 255 255 / 85%);
  --glass-line: rgb(18 37 43 / 8%);
  --glass-sheen: rgb(255 255 255 / 65%);
  --glass-shadow: 0 1px 2px rgb(18 37 43 / 4%), 0 12px 32px -8px rgb(20 70 84 / 15%),
    0 40px 80px -24px rgb(20 70 84 / 17%);
  --glass-shadow-lg: 0 2px 4px rgb(18 37 43 / 4%), 0 24px 60px -12px rgb(20 70 84 / 22%),
    0 80px 120px -40px rgb(20 80 110 / 26%);
  --row-shadow: 0 8px 24px -10px rgb(20 70 84 / 28%);

  --blob-a: rgb(42 155 176 / 46%);
  --blob-b: rgb(79 195 217 / 38%);
  --blob-c: rgb(47 95 179 / 26%);
  --dot: rgb(14 80 95 / 22%);
  --grain: 0.26;

  --av-1: #0e7489;
  --av-2: #2f5fb3;
  --window-frame: rgb(255 255 255 / 50%);
  --window-screen: rgb(250 253 253 / 90%);
  --window-row: rgb(18 37 43 / 6%);
  --mark-bg: rgb(42 155 176 / 22%);
  --vcnet-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --page: #0a161a;
    --page-tint: #10242b;
    --surface: #16262c;
    --surface-sunk: #1d3037;

    --ink: #e1eef2;
    --ink-muted: #90aab2;
    --ink-faint: #5d757d;
    --ink-on-accent: #062a33;

    --teal: #4fc3d9;
    --teal-bright: #7fd6e6;
    --teal-fill: #4fc3d9;
    --teal-fill-hover: #6fd0e2;
    --teal-ink: #7fd6e6;
    --teal-soft: rgb(79 195 217 / 16%);
    --tide: #8fb0ff;
    --tide-fill: #8fb0ff;
    --tide-fill-hover: #a9c2ff;
    --tide-ink: #b3c8ff;
    --tide-soft: rgb(143 176 255 / 16%);

    --g1: #4fc3d9;
    --g2: #8fb0ff;
    --halo: #1d8aa0;

    --ok: #6fd39d;
    --ok-soft: rgb(111 211 157 / 16%);
    --ready: #8fb0ff;
    --ready-soft: rgb(143 176 255 / 16%);
    --progress: #7cc0f2;
    --progress-soft: rgb(124 192 242 / 16%);
    --warn: #f0b45a;
    --warn-soft: rgb(240 180 90 / 16%);
    --danger: #ff8f86;
    --danger-soft: rgb(255 143 134 / 16%);
    --mute-soft: rgb(144 170 178 / 16%);

    --glass: rgb(22 38 44 / 58%);
    --glass-strong: rgb(22 38 44 / 82%);
    --glass-edge: rgb(255 255 255 / 9%);
    --glass-line: rgb(255 255 255 / 8%);
    --glass-sheen: rgb(255 255 255 / 6%);
    --glass-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -8px rgb(0 0 0 / 50%),
      0 40px 80px -24px rgb(0 0 0 / 55%);
    --glass-shadow-lg: 0 2px 4px rgb(0 0 0 / 30%), 0 24px 60px -12px rgb(0 0 0 / 60%),
      0 80px 120px -40px rgb(10 60 80 / 50%);
    --row-shadow: 0 8px 24px -10px rgb(0 0 0 / 55%);

    --blob-a: rgb(17 110 130 / 52%);
    --blob-b: rgb(29 138 160 / 30%);
    --blob-c: rgb(47 80 160 / 38%);
    --dot: rgb(127 214 230 / 12%);
    --grain: 0.4;

    --av-1: #1d8aa0;
    --av-2: #3f68c0;
    --window-frame: rgb(255 255 255 / 7%);
    --window-screen: rgb(14 28 33 / 88%);
    --window-row: rgb(255 255 255 / 6%);
    --mark-bg: rgb(79 195 217 / 24%);
    --vcnet-filter: invert(1) hue-rotate(180deg) brightness(1.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page: #0a161a;
  --page-tint: #10242b;
  --surface: #16262c;
  --surface-sunk: #1d3037;

  --ink: #e1eef2;
  --ink-muted: #90aab2;
  --ink-faint: #5d757d;
  --ink-on-accent: #062a33;

  --teal: #4fc3d9;
  --teal-bright: #7fd6e6;
  --teal-fill: #4fc3d9;
  --teal-fill-hover: #6fd0e2;
  --teal-ink: #7fd6e6;
  --teal-soft: rgb(79 195 217 / 16%);
  --tide: #8fb0ff;
  --tide-fill: #8fb0ff;
  --tide-fill-hover: #a9c2ff;
  --tide-ink: #b3c8ff;
  --tide-soft: rgb(143 176 255 / 16%);

  --g1: #4fc3d9;
  --g2: #8fb0ff;
  --halo: #1d8aa0;

  --ok: #6fd39d;
  --ok-soft: rgb(111 211 157 / 16%);
  --ready: #8fb0ff;
  --ready-soft: rgb(143 176 255 / 16%);
  --progress: #7cc0f2;
  --progress-soft: rgb(124 192 242 / 16%);
  --warn: #f0b45a;
  --warn-soft: rgb(240 180 90 / 16%);
  --danger: #ff8f86;
  --danger-soft: rgb(255 143 134 / 16%);
  --mute-soft: rgb(144 170 178 / 16%);

  --glass: rgb(22 38 44 / 58%);
  --glass-strong: rgb(22 38 44 / 82%);
  --glass-edge: rgb(255 255 255 / 9%);
  --glass-line: rgb(255 255 255 / 8%);
  --glass-sheen: rgb(255 255 255 / 6%);
  --glass-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 12px 32px -8px rgb(0 0 0 / 50%),
    0 40px 80px -24px rgb(0 0 0 / 55%);
  --glass-shadow-lg: 0 2px 4px rgb(0 0 0 / 30%), 0 24px 60px -12px rgb(0 0 0 / 60%),
    0 80px 120px -40px rgb(10 60 80 / 50%);
  --row-shadow: 0 8px 24px -10px rgb(0 0 0 / 55%);

  --blob-a: rgb(17 110 130 / 52%);
  --blob-b: rgb(29 138 160 / 30%);
  --blob-c: rgb(47 80 160 / 38%);
  --dot: rgb(127 214 230 / 12%);
  --grain: 0.4;

  --av-1: #1d8aa0;
  --av-2: #3f68c0;
  --window-frame: rgb(255 255 255 / 7%);
  --window-screen: rgb(14 28 33 / 88%);
  --window-row: rgb(255 255 255 / 6%);
  --mark-bg: rgb(79 195 217 / 24%);
  --vcnet-filter: invert(1) hue-rotate(180deg) brightness(1.6);
}

/* Offboarding: the same roles in tide blue. The hero swaps to it while its
   demo shows a departure, and the offboarding section is always in it. */
[data-kind="off"] {
  --accent: var(--tide);
  --accent-fill: var(--tide-fill);
  --accent-fill-hover: var(--tide-fill-hover);
  --accent-ink: var(--tide-ink);
  --accent-soft: var(--tide-soft);
  --g1: var(--tide);
  --g2: var(--teal);
  --halo: var(--tide-fill);
}

/* ---------- Scale ---------- */

:root {
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 10px;
  --r-lg: 24px;
  --r-xl: 32px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wrap: 76rem;
  --gutter: clamp(16px, 4vw, 40px);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  overflow-x: clip;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  margin: 0;
}

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

.i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--r-sm);
  background: var(--accent-fill);
  color: var(--ink-on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 1rem;
}

/* The split wordmark: "utu" in ink, "wrk" a step quieter (decisions.md in the app). */
.wordmark {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wordmark span {
  color: var(--ink-muted);
}

.gradient-text {
  background: linear-gradient(100deg, var(--g1), var(--g2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The descenders would be clipped by the line box otherwise. */
  padding-bottom: 0.08em;
}

/* ---------- Glass ---------- */

/* The backdrop behind every panel is already soft (gradients, no detail to
   blur), so most glass is a translucent fill and a sheen, which costs nothing
   to scroll. A live backdrop blur is re-sampled every frame something moves
   behind it, so it is kept to the few pieces that float over real content:
   the nav, the hero window and its chips, pills and glass buttons. */
.glass {
  position: relative;
  background:
    linear-gradient(145deg, var(--glass-sheen), transparent 42%),
    var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    var(--glass-shadow);
}

/* ---------- Backdrop ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, var(--page-tint), var(--page) 70%);
}

.aurora {
  position: absolute;
  inset: -20%;
}

.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.blob-a {
  width: 64vw;
  height: 64vw;
  left: 0%;
  top: -6%;
  background: radial-gradient(closest-side, var(--blob-a), transparent);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.blob-b {
  width: 56vw;
  height: 56vw;
  right: -2%;
  top: 8%;
  background: radial-gradient(closest-side, var(--blob-b), transparent);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.blob-c {
  width: 60vw;
  height: 60vw;
  left: 26%;
  top: 38%;
  background: radial-gradient(closest-side, var(--blob-c), transparent);
  animation: drift-c 38s ease-in-out infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate(18vw, 12vh) scale(1.15);
  }
}
@keyframes drift-b {
  to {
    transform: translate(-22vw, 18vh) scale(0.9);
  }
}
@keyframes drift-c {
  to {
    transform: translate(-14vw, -20vh) scale(1.2);
  }
}

/* The template map's dot grid, at page scale, fading out down the page. */
.dots {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent 75%);
}
.dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dot);
  -webkit-mask: url("/dots.svg") 0 0 / 32px 32px repeat;
  mask: url("/dots.svg") 0 0 / 32px 32px repeat;
}

.grain {
  position: absolute;
  inset: 0;
  background: url("/noise.svg") 0 0 / 200px 200px repeat;
  opacity: calc(var(--grain) * 0.45);
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 14px var(--gutter) 0;
}

.nav-inner {
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  transition:
    background 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.nav:not([data-scrolled]) .nav-inner {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 1.3rem;
}
.lockup img {
  border-radius: 8px;
}

.nav-links {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.nav-links a,
.nav-signin {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    color 0.2s,
    background 0.2s;
}
.nav-links a:hover,
.nav-signin:hover {
  color: var(--ink);
  background: var(--glass-line);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s;
}
.icon-btn:hover {
  color: var(--ink);
  background: var(--glass-line);
}
.icon-btn .i {
  width: 20px;
  height: 20px;
}
.i-moon {
  display: none;
}
:root[data-theme="dark"] .i-sun {
  display: none;
}
:root[data-theme="dark"] .i-moon {
  display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun {
    display: none;
  }
  :root:not([data-theme="light"]) .i-moon {
    display: block;
  }
}

@media (max-width: 56rem) {
  .nav-links {
    display: none;
  }
  .nav-actions {
    margin-left: auto;
  }
}
@media (max-width: 26rem) {
  .nav-signin {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 0.95rem/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--spring),
    box-shadow 0.25s var(--ease),
    background 0.25s var(--ease);
}
.btn:active {
  transform: scale(0.97);
}
.btn-sm {
  min-height: 38px;
  padding: 0 1rem;
  font-size: 0.88rem;
}
.btn-lg {
  min-height: 54px;
  padding: 0 1.6rem;
  font-size: 1.02rem;
}

.btn-primary {
  position: relative;
  color: var(--ink-on-accent);
  background: linear-gradient(180deg, rgb(255 255 255 / 16%), transparent 55%), var(--accent-fill);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 26%),
    0 1px 2px rgb(0 0 0 / 12%),
    0 10px 28px -8px var(--accent-fill);
}
.btn-primary:hover {
  background: linear-gradient(180deg, rgb(255 255 255 / 16%), transparent 55%), var(--accent-fill-hover);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 26%),
    0 1px 2px rgb(0 0 0 / 12%),
    0 16px 36px -8px var(--accent-fill);
}
.btn-primary .i {
  transition: transform 0.3s var(--spring);
}
.btn-primary:hover .i {
  transform: translateX(3px);
}

.btn-glass {
  color: var(--ink);
  background: var(--glass);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 6px 20px -8px rgb(20 70 84 / 25%);
}
.btn-glass:hover {
  background: var(--glass-strong);
  transform: translateY(-1px);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-weight: 500;
}
.pill-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.pill-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ok);
  opacity: 0;
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  80%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* ---------- Reveal ---------- */

html:not(.no-js) .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: var(--delay, 0s);
}
html:not(.no-js) .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Loops only run while their card is on screen. */
.card-art *,
.audit-stage *,
.lifecycle *,
.hero-scene *,
.ticker-track,
.cta * {
  animation-play-state: paused;
}
.in-view .card-art *,
.in-view .audit-stage *,
.lifecycle.in-view *,
.hero-scene.in-view *,
.ticker.in-view .ticker-track,
.cta.in-view * {
  animation-play-state: running;
}

/* ---------- Hero ---------- */

.hero {
  --mx: 0;
  --my: 0;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(7rem, 14vh, 10rem) var(--gutter) clamp(3rem, 8vh, 6rem);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  min-height: min(100vh, 58rem);
  transition:
    --accent 0.9s var(--ease),
    --accent-fill 0.9s var(--ease),
    --accent-ink 0.9s var(--ease),
    --accent-soft 0.9s var(--ease),
    --g1 0.9s var(--ease),
    --g2 0.9s var(--ease),
    --halo 0.9s var(--ease);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.hero-title {
  font-size: clamp(2.4rem, 4.4vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.hero-title span {
  display: block;
}
@media (min-width: 30rem) {
  .hero-title span {
    white-space: nowrap;
  }
}

.hero-sub {
  max-width: 34rem;
  color: var(--ink-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-proof .i {
  color: var(--accent);
  stroke-width: 2.4;
}

.reveal:nth-child(2) {
  --delay: 0.08s;
}
.reveal:nth-child(3) {
  --delay: 0.16s;
}
.reveal:nth-child(4) {
  --delay: 0.24s;
}
.reveal:nth-child(5) {
  --delay: 0.32s;
}
.reveal:nth-child(6) {
  --delay: 0.4s;
}

/* The scene. Each layer moves with the pointer by its own depth (--d, set
   from data-depth by script.js), which is what makes it read as layered. */

.hero-scene {
  position: relative;
  text-align: left;
  height: clamp(32rem, 60vh, 38rem);
  display: grid;
  place-items: center;
  perspective: 1400px;
}

[data-depth] {
  --d: 0;
  translate: calc(var(--mx) * var(--d) * 26px) calc(var(--my) * var(--d) * 22px);
  transition: translate 0.6s var(--ease);
}

.halo {
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 42% 40%, color-mix(in srgb, var(--halo) 48%, transparent), transparent),
    radial-gradient(closest-side at 62% 64%, color-mix(in srgb, var(--g2) 30%, transparent), transparent);
  animation: spin 22s linear infinite;
  opacity: 0.9;
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}

/* The app window: one hire's cards, handing off. */

.window {
  position: relative;
  z-index: 2;
  width: min(410px, 100%);
  padding: 8px;
  border-radius: 26px;
  background: linear-gradient(160deg, var(--glass-sheen), transparent 40%), var(--window-frame);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 0 0 1px var(--glass-line),
    var(--glass-shadow-lg);
  transform: rotateY(-12deg) rotateX(5deg) rotate(1.5deg);
  animation: bob 9s ease-in-out infinite;
}
@keyframes bob {
  50% {
    transform: rotateY(-9deg) rotateX(3deg) rotate(0.5deg) translateY(-12px);
  }
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 10px;
}
.window-dots {
  display: flex;
  gap: 5px;
}
.window-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-faint);
  opacity: 0.45;
}
.window-url {
  flex: 1;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--window-row);
  color: var(--ink-muted);
  font-size: 0.72rem;
  text-align: center;
}

.window-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 19px;
  background: var(--window-screen);
}

.who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.who-av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: none;
  color: var(--ink-on-accent);
  font-weight: 700;
  font-size: 0.85rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 70%, white), var(--accent-fill));
}
.who-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.who-text strong {
  font-size: 0.98rem;
  line-height: 1.25;
}
.who-text span {
  color: var(--ink-muted);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kind-tag {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.68rem;
  font-weight: 700;
}

.progress {
  height: 6px;
  border-radius: 3px;
  background: var(--window-row);
  overflow: hidden;
}
.progress span {
  --p: 0.25;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--g1), var(--g2));
  transform-origin: left;
  transform: scaleX(var(--p));
  transition: transform 0.7s var(--ease);
}

.chain {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The thread the handoffs run along. */
.chain::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  background: linear-gradient(var(--accent-soft), var(--accent), var(--accent-soft));
  opacity: 0.6;
}

.task {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "dept dept state" "title title title";
  align-items: center;
  gap: 4px 8px;
  padding: 10px 12px 10px 34px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  box-shadow: var(--row-shadow);
  transition:
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    opacity 0.4s var(--ease);
}
.task::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--st, var(--ink-faint));
  transition:
    background 0.4s,
    border-color 0.4s;
}
.task b {
  grid-area: title;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}
.task .dept {
  grid-area: dept;
  justify-self: start;
}
.state {
  grid-area: state;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: var(--st-soft, var(--mute-soft));
  color: var(--st, var(--ink-muted));
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.state .i {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}
.state em {
  font-style: normal;
}
.task[data-state="done"] {
  --st: var(--ok);
  --st-soft: var(--ok-soft);
}
.task[data-state="done"]::before {
  background: var(--ok);
}
.task[data-state="done"] b {
  color: var(--ink-muted);
}
.task[data-state="ready"] {
  --st: var(--ready);
  --st-soft: var(--ready-soft);
  border-color: color-mix(in srgb, var(--ready) 45%, transparent);
  box-shadow:
    0 0 0 4px var(--ready-soft),
    var(--row-shadow);
}
.task[data-state="progress"] {
  --st: var(--progress);
  --st-soft: var(--progress-soft);
}
.task[data-state="waiting"] {
  opacity: 0.72;
  box-shadow: none;
}
.task[data-state="urgent"] {
  --st: var(--danger);
  --st-soft: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.task.flash {
  animation: flash 0.9s var(--ease);
}
@keyframes flash {
  30% {
    transform: scale(1.025);
  }
}

.dept {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Floating chips around the window */

.float {
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;
  animation: hover 7s ease-in-out infinite;
}
.float div {
  display: flex;
  flex-direction: column;
}
.float strong {
  font-size: 0.86rem;
}
.float span {
  color: var(--ink-muted);
}
@keyframes hover {
  50% {
    transform: translateY(-10px);
  }
}
.float-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.float-ico.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.float-notice {
  top: 4%;
  right: -6%;
  animation-delay: -2s;
}
/* A new notice lands: the chip pops. */
.float-notice.pop .float-ico {
  animation: ring 0.9s var(--ease);
}
@keyframes ring {
  20%,
  60% {
    transform: rotate(-14deg) scale(1.1);
  }
  40%,
  80% {
    transform: rotate(14deg) scale(1.1);
  }
}
.float-late {
  bottom: 0;
  left: -6%;
  animation-delay: -4s;
}
.float-audit {
  bottom: -4%;
  right: 0;
  color: var(--ink);
  font-weight: 600;
  animation-delay: -5.5s;
}
.float-audit .i {
  color: var(--accent);
}
.float-audit span {
  color: inherit;
}

@media (max-width: 64rem) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: 0;
  }
  .hero-copy {
    align-items: center;
  }
  .hero-sub {
    margin: 0 auto;
  }
  .hero-proof,
  .hero-ctas {
    justify-content: center;
  }
  .hero-scene {
    height: 34rem;
  }
}
@media (max-width: 30rem) {
  .hero-scene {
    height: 30rem;
  }
  .window {
    transform: none;
    animation-name: bob-flat;
  }
  @keyframes bob-flat {
    50% {
      transform: translateY(-8px);
    }
  }
  .float {
    font-size: 0.74rem;
    padding: 8px 11px;
  }
  .float strong {
    font-size: 0.78rem;
  }
  .float-ico {
    width: 28px;
    height: 28px;
  }
  .float-notice {
    top: -1%;
    right: -2%;
  }
  .float-late {
    left: -2%;
    bottom: 4%;
  }
  .float-audit {
    display: none;
  }
}

/* ---------- Ticker ---------- */

.ticker {
  overflow: hidden;
  padding: 1.4rem 0;
  border-block: 1px solid var(--glass-line);
  background: var(--glass);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  width: max-content;
  animation: marquee 44s linear infinite;
}
.ticker span {
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-muted);
  opacity: 0.75;
  white-space: nowrap;
}
.ticker i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2.5px solid var(--g1);
  opacity: 0.7;
  flex: none;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Sections ---------- */

.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter);
}

.section-head {
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 6vh, 4rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section h2 {
  text-wrap: balance;
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.lede {
  color: var(--ink-muted);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  max-width: 40rem;
}

/* ---------- Before and after ---------- */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.compare-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-xl);
}
.compare-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0.25rem 0.75rem 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.compare-label .i {
  stroke-width: 2.6;
}
.compare-before .compare-label {
  background: var(--mute-soft);
  color: var(--ink-muted);
}
.compare-after .compare-label {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.compare-card h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 700;
  text-wrap: balance;
}
.compare-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.compare-card li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-muted);
}
.compare-card li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
}
.compare-after li {
  color: var(--ink);
}
.compare-after li::before {
  border-color: var(--accent);
  background: var(--accent);
}
.compare-before {
  background:
    linear-gradient(145deg, var(--glass-sheen), transparent 42%),
    color-mix(in srgb, var(--glass) 70%, transparent);
}
.compare-after {
  background:
    radial-gradient(80% 70% at 100% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(145deg, var(--glass-sheen), transparent 42%),
    var(--glass);
}
@media (max-width: 48rem) {
  .compare {
    grid-template-columns: 1fr;
  }
}

/* ---------- Bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    var(--glass-shadow-lg);
}

.card-owner {
  grid-column: span 3;
  grid-row: span 2;
}
.card-order,
.card-notice {
  grid-column: span 3;
}
.card-escalate,
.card-templates,
.card-sites {
  grid-column: span 2;
}

.card-copy {
  padding: 1.5rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.card-copy h3 {
  font-size: 1.35rem;
  font-weight: 700;
}
.card-copy p {
  color: var(--ink-muted);
  font-size: 0.97rem;
}
.step {
  font: 700 0.75rem/1 var(--font);
  letter-spacing: 0.1em;
  color: var(--accent-ink);
}

.card-art {
  position: relative;
  min-height: 200px;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: radial-gradient(90% 90% at 50% 100%, var(--accent-soft), transparent 70%);
  border-bottom: 1px solid var(--glass-line);
  overflow: hidden;
}

@media (max-width: 64rem) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-owner {
    grid-column: span 2;
    grid-row: auto;
  }
  .card-order,
  .card-notice,
  .card-escalate,
  .card-templates {
    grid-column: span 1;
  }
  .card-sites {
    grid-column: span 2;
  }
}
@media (max-width: 40rem) {
  .bento {
    grid-template-columns: 1fr;
  }
  .bento > .card {
    grid-column: auto;
  }
}

/* Owner art: one card, its checklist ticking off, then the sign-off. */

.art-owner {
  min-height: 340px;
}
.big-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 320px);
  padding: 18px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  rotate: -1.5deg;
}
.big-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 600;
}
.due .i {
  width: 13px;
  height: 13px;
}
.big-card > strong {
  font-size: 1.05rem;
  line-height: 1.3;
}
.people {
  display: flex;
  align-items: center;
  gap: 10px;
}
.av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--ink-on-accent);
  font-size: 0.74rem;
  font-weight: 700;
  flex: none;
}
.av-1 {
  background: var(--av-1);
}
.people-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.people-text b {
  font-size: 0.84rem;
}
.people-text small {
  color: var(--ink-muted);
  font-size: 0.72rem;
}
.checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--glass-line);
  list-style: none;
  font-size: 0.82rem;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tick {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--ink-faint);
  flex: none;
  animation: tick 8s var(--ease) infinite;
}
.tick::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid var(--ink-on-accent);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  opacity: 0;
  animation: tick-mark 8s var(--ease) infinite;
}
.checklist li:nth-child(2) .tick,
.checklist li:nth-child(2) .tick::after {
  animation-delay: 0.8s;
}
.checklist li:nth-child(3) .tick,
.checklist li:nth-child(3) .tick::after {
  animation-delay: 1.6s;
}
@keyframes tick {
  0%,
  12% {
    background: transparent;
    border-color: var(--ink-faint);
  }
  18%,
  88% {
    background: var(--ok);
    border-color: var(--ok);
  }
  96%,
  100% {
    background: transparent;
    border-color: var(--ink-faint);
  }
}
@keyframes tick-mark {
  0%,
  12% {
    opacity: 0;
  }
  18%,
  88% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}
.signoff {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-sunk);
  color: var(--ink-muted);
  font-size: 0.78rem;
}
.signoff-ok {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  animation: signoff 8s var(--spring) infinite;
}
.signoff-ok .i {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}
@keyframes signoff {
  0%,
  40% {
    opacity: 0;
    transform: scale(0.4);
  }
  48%,
  88% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

/* Order art: three cards, each lighting the edge to the next. */

.graph {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  font-size: 0.8rem;
  font-weight: 600;
  animation: node-on 6s var(--ease) infinite;
}
.node .i {
  width: 13px;
  height: 13px;
  color: var(--ink-faint);
  animation: unlock 6s var(--ease) infinite;
}
.node-b {
  animation-delay: 1.2s;
}
.node-c {
  animation-delay: 2.4s;
}
.node-c .i {
  animation-delay: 2.4s;
}
@keyframes node-on {
  0%,
  6%,
  90%,
  100% {
    border-color: var(--glass-line);
    box-shadow: 0 0 0 0 transparent;
    color: var(--ink-muted);
  }
  12%,
  80% {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    color: var(--ink);
  }
}
@keyframes unlock {
  0%,
  8% {
    opacity: 1;
  }
  12%,
  100% {
    opacity: 0;
    width: 0;
    margin-right: -6px;
  }
}
.edge {
  position: relative;
  width: 2px;
  height: 26px;
  background: var(--glass-line);
  overflow: hidden;
}
.edge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(0);
  animation: edge 6s var(--ease) infinite;
  animation-delay: 0.6s;
}
.edge:nth-of-type(4)::after {
  animation-delay: 1.8s;
}
@keyframes edge {
  0%,
  4% {
    transform: scaleY(0);
  }
  12%,
  86% {
    transform: scaleY(1);
  }
  94%,
  100% {
    transform: scaleY(0);
  }
}

/* Notice art: an inbox filling up. */

.art-notice {
  align-content: center;
}
.inbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 300px);
}
.note {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  font-size: 0.78rem;
  animation: slide 6s var(--ease) infinite;
}
.note span:last-child {
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note:nth-child(2) {
  animation-delay: 0.3s;
}
.note:nth-child(3) {
  animation-delay: 0.6s;
}
.note-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes slide {
  0%,
  5% {
    opacity: 0;
    transform: translateY(-10px);
  }
  15%,
  85% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Escalation art: the three levels, lit in turn. */

.levels {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: min(100%, 220px);
}
.levels li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  font-size: 0.8rem;
  font-weight: 600;
}
.levels span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--mute-soft);
  color: var(--ink-muted);
  font-size: 0.74rem;
  animation: level 6s var(--ease) infinite;
}
.levels li:nth-child(2) span {
  animation-delay: 1s;
  animation-name: level-2;
}
.levels li:nth-child(3) span {
  animation-delay: 2s;
  animation-name: level-3;
}
@keyframes level {
  0%,
  6%,
  90%,
  100% {
    background: var(--mute-soft);
    color: var(--ink-muted);
  }
  12%,
  82% {
    background: var(--warn-soft);
    color: var(--warn);
  }
}
@keyframes level-2 {
  0%,
  6%,
  90%,
  100% {
    background: var(--mute-soft);
    color: var(--ink-muted);
  }
  12%,
  82% {
    background: var(--warn);
    color: var(--surface);
  }
}
@keyframes level-3 {
  0%,
  6%,
  90%,
  100% {
    background: var(--mute-soft);
    color: var(--ink-muted);
  }
  12%,
  82% {
    background: var(--danger);
    color: var(--surface);
  }
}

/* Templates art: office or remote, and the cards that follow. */

.art-templates {
  align-content: center;
  gap: 12px;
}
.switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 180px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-sunk);
  border: 1px solid var(--glass-line);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  isolation: isolate;
}
.switch::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 2px 6px rgb(0 0 0 / 12%);
  animation: thumb 7s var(--ease) infinite;
}
.switch span {
  padding: 4px 0;
  color: var(--ink-muted);
}
@keyframes thumb {
  0%,
  42% {
    transform: none;
  }
  50%,
  92% {
    transform: translateX(100%);
  }
}
.tpl-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, 230px);
}
.tpl {
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  font-size: 0.76rem;
  font-weight: 600;
}
.tpl-office {
  animation: office 7s var(--ease) infinite;
}
.tpl-remote {
  animation: remote 7s var(--ease) infinite;
}
@keyframes office {
  0%,
  42%,
  100% {
    opacity: 1;
    transform: none;
  }
  50%,
  92% {
    opacity: 0.28;
    transform: scale(0.96);
  }
}
@keyframes remote {
  0%,
  42%,
  100% {
    opacity: 0.28;
    transform: scale(0.96);
  }
  50%,
  92% {
    opacity: 1;
    transform: none;
  }
}

/* Sites art: the cascade, the nearest setting winning. */

.cascade {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 250px);
}
.tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  font-size: 0.76rem;
}
.tier:nth-child(2) {
  margin-left: 16px;
}
.tier:nth-child(3) {
  margin-left: 32px;
}
.tier span {
  color: var(--ink-muted);
}
.tier b {
  font-weight: 700;
}
.tier i {
  font-style: normal;
  color: var(--ink-faint);
  font-size: 0.7rem;
}
.tier-on {
  animation: target 5s var(--ease) infinite;
}
@keyframes target {
  0%,
  45%,
  80%,
  100% {
    box-shadow: 0 0 0 0 transparent;
    border-color: var(--glass-line);
  }
  55%,
  70% {
    box-shadow: 0 0 0 4px var(--accent-soft);
    border-color: var(--accent);
  }
}

/* ---------- Offboarding ---------- */

.section-off {
  max-width: none;
  padding-inline: var(--gutter);
}
.off-surface {
  position: relative;
  max-width: calc(var(--wrap) + 4rem);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.1rem, 4vw, 3.5rem);
  border-radius: clamp(28px, 4vw, 44px);
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  background:
    radial-gradient(60% 50% at 15% 0%, var(--tide-soft), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, var(--teal-soft), transparent 70%),
    var(--glass);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    var(--glass-shadow-lg);
}
.off-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dot);
  -webkit-mask:
    url("/dots.svg") 0 0 / 28px 28px repeat,
    linear-gradient(transparent, #000 60%);
  -webkit-mask-composite: source-in;
  mask:
    url("/dots.svg") 0 0 / 28px 28px repeat intersect,
    linear-gradient(transparent, #000 60%);
}

.lifecycle {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-lg);
  margin-bottom: 1.1rem;
}
.life-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
.life-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.life-step b {
  font-size: 0.95rem;
}
.life-step small {
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.life-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  color: var(--accent);
  box-shadow: 0 6px 16px -8px rgb(20 40 110 / 35%);
  animation: light 10s var(--ease) infinite;
  animation-delay: calc(var(--n) * 2s - 0.3s);
}
.life-step:nth-child(1) {
  --n: 0;
}
.life-step:nth-child(2) {
  --n: 1;
}
.life-step:nth-child(3) {
  --n: 2;
}
.life-step:nth-child(4) {
  --n: 3;
}
.life-step:nth-child(5) {
  --n: 4;
}
@keyframes light {
  0%,
  6%,
  22%,
  100% {
    background: var(--surface);
    color: var(--accent);
    transform: none;
  }
  10%,
  18% {
    background: var(--accent-fill);
    color: var(--ink-on-accent);
    transform: translateY(-4px) scale(1.06);
  }
}
.life-line {
  position: absolute;
  z-index: 0;
  top: 26px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent), var(--accent-soft));
}
/* A track as long as the line, slid along by transform (a percentage of its
   own length), with the dot painted at its start. Animating left or top
   instead would lay the page out again on every frame. */
.life-dot {
  position: absolute;
  inset: 0;
  animation: travel 10s linear infinite;
}
.life-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 5px var(--accent-soft),
    0 0 20px var(--accent);
}
@keyframes travel {
  0% {
    transform: translateX(0);
  }
  80% {
    transform: translateX(100%);
    opacity: 1;
  }
  90%,
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.life-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--glass-line);
  color: var(--ink-muted);
  font-size: 0.88rem;
  text-align: center;
}
.life-unit-tag {
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 800;
}

@media (max-width: 44rem) {
  .life-track {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .life-step {
    flex-direction: row;
    text-align: left;
    gap: 12px;
  }
  .life-step small {
    margin-left: auto;
    text-align: right;
  }
  .life-ico {
    margin: 0;
  }
  .life-line {
    top: 26px;
    bottom: 26px;
    left: 25px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--accent-soft), var(--accent), var(--accent-soft));
  }
  .life-dot {
    animation-name: travel-down;
  }
  .life-dot::after {
    top: 0;
    left: 50%;
  }
  @keyframes travel-down {
    0% {
      transform: translateY(0);
    }
    80% {
      transform: translateY(100%);
      opacity: 1;
    }
    90%,
    100% {
      transform: translateY(100%);
      opacity: 0;
    }
  }
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.feature {
  padding: 1.5rem;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.5s var(--ease);
}
.feature:hover {
  transform: translateY(-3px);
}
.feature h3 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.feature p {
  color: var(--ink-muted);
  font-size: 0.93rem;
}
.f-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.4rem;
  border-radius: 14px;
  color: var(--ink-on-accent);
  background: linear-gradient(145deg, var(--accent), var(--accent-fill));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 30%),
    0 10px 20px -8px var(--accent-fill);
}
.f-ico .i {
  width: 22px;
  height: 22px;
}
.feature-grid .reveal:nth-child(3n + 2) {
  --delay: 0.08s;
}
.feature-grid .reveal:nth-child(3n + 3) {
  --delay: 0.16s;
}

@media (max-width: 60rem) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 36rem) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Audit ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ticks {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-weight: 500;
}
.ticks .i {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  stroke-width: 2.6;
}

.audit-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 1.2rem;
  border-radius: var(--r-lg);
  rotate: 1.5deg;
}
.audit-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  font-size: 0.9rem;
}
.audit-search .i {
  color: var(--ink-faint);
}
.audit-search span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 1.5px solid var(--accent);
  width: 0;
  animation:
    type-in 7s steps(8) infinite,
    caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink {
  50% {
    border-right-color: transparent;
  }
}
@keyframes type-in {
  0% {
    width: 0;
  }
  22%,
  100% {
    width: 8.4ch;
  }
}
.audit-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audit-row {
  display: grid;
  grid-template-columns: 4.6rem 5.6rem 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  font-size: 0.78rem;
  animation: dim 7s var(--ease) infinite;
}
.audit-row time {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.audit-row span {
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit-hit {
  animation-name: hit;
}
@keyframes dim {
  0%,
  24% {
    opacity: 1;
  }
  32%,
  88% {
    opacity: 0.45;
  }
  96%,
  100% {
    opacity: 1;
  }
}
@keyframes hit {
  0%,
  24%,
  96%,
  100% {
    border-color: var(--glass-line);
    box-shadow: 0 0 0 0 transparent;
  }
  32%,
  88% {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }
}
.audit-hit b {
  background: linear-gradient(var(--mark-bg), var(--mark-bg)) 0 0 / 100% 100% no-repeat;
  border-radius: 3px;
}
.audit-refused {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  background: transparent;
  border: 1px dashed var(--ink-faint);
  animation: none;
}
.audit-refused .i {
  width: 14px;
  height: 14px;
  color: var(--ink-muted);
}

@media (max-width: 56rem) {
  .split {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 30rem) {
  .audit-stage {
    rotate: none;
  }
  .audit-row {
    grid-template-columns: 4.2rem 1fr;
  }
  .audit-row span {
    grid-column: 1 / -1;
  }
}

/* ---------- Pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem;
  border-radius: var(--r-lg);
}
.plan h3 {
  font-size: 1.15rem;
  font-weight: 700;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.plan-price b {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.plan-price span {
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.plan-for {
  color: var(--ink-muted);
  font-size: 0.92rem;
}
.plan ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.6rem 0 1.2rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--glass-line);
  list-style: none;
  font-size: 0.92rem;
}
.plan li {
  position: relative;
  padding-left: 1.6rem;
}
/* A tick drawn with borders, so it takes the accent from a token. */
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--accent-soft);
}
.plan li::after {
  content: "";
  position: absolute;
  left: 0.38rem;
  top: 0.42em;
  width: 0.28rem;
  height: 0.52rem;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}
.plan .btn {
  margin-top: auto;
}
.plan-featured {
  border: 1.5px solid var(--accent);
  background:
    radial-gradient(90% 60% at 50% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(145deg, var(--glass-sheen), transparent 42%),
    var(--glass-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    var(--glass-shadow-lg);
}
.plan-badge {
  position: absolute;
  top: -0.8rem;
  left: 1.6rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--ink-on-accent);
  font-size: 0.75rem;
  font-weight: 700;
}
.plans .reveal:nth-child(2) {
  --delay: 0.08s;
}
.plans .reveal:nth-child(3) {
  --delay: 0.16s;
}
.plans .reveal:nth-child(4) {
  --delay: 0.24s;
}
.plans-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 46rem;
  margin: 2rem auto 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
  text-align: center;
}
.plans-note .i {
  width: 22px;
  height: 22px;
  color: var(--accent);
}
@media (max-width: 64rem) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.6rem;
  }
}
@media (max-width: 34rem) {
  .plans {
    grid-template-columns: 1fr;
  }
  .plans-note {
    flex-direction: column;
  }
}

/* ---------- Trust ---------- */

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.trust {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.4rem;
  border-radius: var(--r-lg);
}
.trust .i {
  width: 28px;
  height: 28px;
  margin-bottom: 0.5rem;
  color: var(--accent);
}
.trust b {
  font-size: 1.1rem;
  font-weight: 700;
}
.trust span {
  color: var(--ink-muted);
  font-size: 0.9rem;
}
@media (max-width: 60rem) {
  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 34rem) {
  .trust-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQ ---------- */

.faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 50rem;
  margin: 0 auto;
}
.faq details {
  border-radius: 20px;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .i {
  width: 20px;
  height: 20px;
  color: var(--accent);
  transition: rotate 0.3s var(--ease);
}
.faq details[open] summary .i {
  rotate: 45deg;
}
.faq details p {
  padding: 0 1.4rem 1.3rem;
  color: var(--ink-muted);
}

/* ---------- Demo ---------- */

.cta {
  max-width: 50rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: clamp(28px, 4vw, 40px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    var(--glass-shadow-lg);
}
.cta-glow {
  position: absolute;
  z-index: -1;
  inset: -50%;
  background:
    radial-gradient(closest-side at 30% 35%, var(--blob-a), transparent),
    radial-gradient(closest-side at 70% 40%, var(--blob-c), transparent),
    radial-gradient(closest-side at 50% 70%, var(--blob-b), transparent);
  animation: spin 18s linear infinite;
  opacity: 0.8;
}
.cta-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: 0 20px 40px -12px var(--accent-fill);
  animation: hover 6s ease-in-out infinite;
}
.cta h2 {
  font-size: clamp(2.3rem, 6vw, 3.8rem);
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.email-chip {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0 1.3rem;
  border-radius: 999px;
  color: var(--ink);
  font: 600 1rem/1 var(--font);
  cursor: pointer;
  transition: transform 0.25s var(--spring);
}
.email-chip:hover {
  transform: translateY(-1px);
}
.email-chip .i {
  color: var(--ink-muted);
}
.email-chip .i-done {
  display: none;
  color: var(--ok);
}
.email-chip[data-copied] .i-copy {
  display: none;
}
.email-chip[data-copied] .i-done {
  display: block;
}
.cta-note {
  min-height: 1.4em;
  color: var(--ok);
  font-size: 0.88rem;
  font-weight: 600;
}
.cta-foot {
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.cta-foot a {
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---------- Footer ---------- */

.footer {
  padding: 2.5rem var(--gutter) 3rem;
  border-top: 1px solid var(--glass-line);
}
.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.footer-tag {
  color: var(--ink-muted);
  font-size: 0.9rem;
}
.footer-links {
  display: flex;
  gap: 1.25rem;
  margin-left: auto;
}
.footer-links a {
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--ink);
}
.vcnet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  text-decoration: none;
}
.vcnet img {
  width: auto;
  height: 20px;
  filter: var(--vcnet-filter);
}
@media (max-width: 44rem) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
  .footer-links {
    margin: 0;
  }
}

/* ---------- Motion off ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html:not(.no-js) .reveal {
    opacity: 1;
    transform: none;
  }
  .audit-search span {
    width: 8.4ch;
  }
  .node .i {
    display: none;
  }
  [data-depth] {
    translate: none;
  }
}