/* ==========================================================================
   Envee design system
   One token layer, one component layer. No version overrides, no !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f2f5ef;
  --bg-elev: #ffffff;
  --bg-sunken: #e4ebdf;
  --bg-tint: #e6f0ea;
  --bg-inverse: #08241c;

  /* Text: ink-3 is the lightest tone that still clears 4.5:1 on --bg */
  --ink: #08241c;
  --ink-2: #33564b;
  --ink-3: #526b62;
  --ink-inverse: #eaf3ee;
  --ink-inverse-2: rgba(234, 243, 238, 0.72);

  /* Brand */
  --brand: #11684f;
  --brand-hover: #0d5340;
  --brand-ink: #0d5340;
  --brand-tint: #e6f0ea;
  /* Text/icon colour that sits on a --brand fill */
  --on-brand: #ffffff;
  --accent: #1b6f97;
  --accent-tint: #e4eff5;
  --warn-tint: #fbf1d2;
  --warn-ink: #8f5c0f;
  /* Fixed pair for warm chips that always sit on a dark ground */
  --warm-solid: #f5c86a;
  --warm-solid-ink: #3d2a00;

  /* Lines */
  --line: rgba(8, 36, 28, 0.10);
  --line-2: rgba(8, 36, 28, 0.18);
  --line-inverse: rgba(234, 243, 238, 0.16);

  /* Elevation: three levels, used sparingly */
  --shadow-1: 0 1px 2px rgba(8, 36, 28, 0.04), 0 2px 8px rgba(8, 36, 28, 0.04);
  --shadow-2: 0 2px 4px rgba(8, 36, 28, 0.04), 0 12px 28px rgba(8, 36, 28, 0.07);
  --shadow-3: 0 4px 8px rgba(8, 36, 28, 0.05), 0 24px 56px rgba(8, 36, 28, 0.11);

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Space: 4px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Type scale: fluid, capped so it never gets absurd on ultrawide */
  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --t-xl: clamp(1.25rem, 0.7vw + 1.09rem, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.4vw + 1.18rem, 2rem);
  --t-3xl: clamp(1.875rem, 2.4vw + 1.32rem, 2.75rem);
  --t-4xl: clamp(2.25rem, 3.6vw + 1.44rem, 3.75rem);
  --t-5xl: clamp(2.75rem, 5vw + 1.5rem, 4.75rem);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-script: "Caveat", "Segoe Script", cursive;

  /* Layout */
  --container: 1160px;
  --gutter: clamp(20px, 4vw, 32px);
  --header-h: 68px;
  --section-pad: clamp(56px, 7vw, 104px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
}

/* Dark theme: applied by system preference or by an explicit data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #071812;
    --bg-elev: #12302a;
    --bg-sunken: #0b1f18;
    --bg-tint: #0f2f26;
    --bg-inverse: #0d2620;

    --ink: #eaf3ee;
    --ink-2: #c3d6cd;
    --ink-3: #93aca2;
    --ink-inverse: #eaf3ee;
    --ink-inverse-2: rgba(234, 243, 238, 0.72);

    --brand: #3fbf8f;
    --brand-hover: #59d0a3;
    --brand-ink: #8fe0bd;
    --brand-tint: rgba(63, 191, 143, 0.13);
    --on-brand: #071812;
    --accent: #63b6de;
    --accent-tint: rgba(99, 182, 222, 0.13);
    --warn-tint: rgba(240, 201, 79, 0.14);
    --warn-ink: #f0c94f;
    --warm-solid: #f5c86a;
    --warm-solid-ink: #3d2a00;

    --line: rgba(234, 243, 238, 0.12);
    --line-2: rgba(234, 243, 238, 0.2);
    --line-inverse: rgba(234, 243, 238, 0.16);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.24);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.34);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.32), 0 24px 56px rgba(0, 0, 0, 0.44);
  }
}

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

  --bg: #071812;
  --bg-elev: #12302a;
  --bg-sunken: #0b1f18;
  --bg-tint: #0f2f26;
  --bg-inverse: #0d2620;

  --ink: #eaf3ee;
  --ink-2: #c3d6cd;
  --ink-3: #93aca2;
  --ink-inverse: #eaf3ee;
  --ink-inverse-2: rgba(234, 243, 238, 0.72);

  --brand: #3fbf8f;
  --brand-hover: #59d0a3;
  --brand-ink: #8fe0bd;
  --brand-tint: rgba(63, 191, 143, 0.13);
  --on-brand: #071812;
  --accent: #63b6de;
  --accent-tint: rgba(99, 182, 222, 0.13);
  --warn-tint: rgba(240, 201, 79, 0.14);
  --warn-ink: #f0c94f;
  --warm-solid: #f5c86a;
  --warm-solid-ink: #3d2a00;

  --line: rgba(234, 243, 238, 0.12);
  --line-2: rgba(234, 243, 238, 0.2);
  --line-inverse: rgba(234, 243, 238, 0.16);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.34);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.32), 0 24px 56px rgba(0, 0, 0, 0.44);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  /* Anchors land clear of the sticky header instead of under it */
  scroll-padding-top: var(--header-h);
}

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

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

::selection {
  background: var(--brand);
  color: var(--on-brand);
}

/* One focus system for the whole site. Visible, high-contrast, never removed. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  font-size: var(--t-sm);
  transform: translateY(-200%);
  transition: transform var(--dur-2) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  /* Restrained tracking: tight enough to feel designed, loose enough to read */
  letter-spacing: -0.028em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-5xl);
  line-height: 1.02;
  letter-spacing: -0.038em;
}

h2 {
  font-size: var(--t-4xl);
  line-height: 1.06;
  letter-spacing: -0.034em;
}

h3 {
  font-size: var(--t-xl);
  line-height: 1.22;
}

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

/* Serif is reserved for the Team section, where the tone shifts personal */
.serif {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.lede {
  color: var(--ink-3);
  font-size: var(--t-lg);
  line-height: 1.66;
}

strong {
  font-weight: 650;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

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

.section-pad {
  padding-block: var(--section-pad);
}

.section-tight {
  padding-block: var(--s-6);
}

.soft-section {
  position: relative;
  background: var(--bg-sunken);
  border-block: 1px solid var(--line);
}

/* A light gradient seam reads softer than a hard line between slabs */
.soft-section::before,
.soft-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
}

.soft-section::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg), transparent);
  opacity: 0.55;
}

.soft-section::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg), transparent);
  opacity: 0.55;
}

/* The browser aligns the section box, but the heading sits one --section-pad
   lower. Subtract it so anchors land on the heading itself. */
section[id] {
  scroll-margin-top: calc(var(--s-5) - var(--section-pad));
}

/* --------------------------------------------------------------------------
   5. Shared atoms
   -------------------------------------------------------------------------- */

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  color: var(--brand-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.section-kicker {
  margin-bottom: var(--s-4);
  white-space: nowrap;
}

/* Without an explicit size an inline SVG with only a viewBox expands to fill
   its container, which blew the founder note icon up to card size. */
.section-kicker svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: var(--s-12);
}

.split-head p {
  color: var(--ink-3);
  font-size: var(--t-lg);
  line-height: 1.66;
}

.center-head {
  max-width: 720px;
  margin: 0 auto var(--s-12);
  text-align: center;
}

.center-head h2 {
  margin-bottom: var(--s-4);
}

.center-head p {
  color: var(--ink-3);
  font-size: var(--t-lg);
  line-height: 1.66;
}

/* Card base: a single surface definition every card inherits */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 11px var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.btn::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background-color: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease);
}

:root {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

.btn:hover::after {
  transform: translateX(3px);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-1);
}

.btn-primary:hover {
  background: var(--brand-hover);
}

.btn-secondary {
  background: var(--bg-elev);
  border-color: var(--line-2);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--bg-tint);
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* Buttons that read as links: no arrow chrome */
.btn-plain::after {
  display: none;
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.top-alert {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 9px var(--gutter);
  background: var(--bg-inverse);
  color: var(--ink-inverse);
  font-size: var(--t-xs);
  text-align: center;
  transition: background var(--dur-1) var(--ease);
}

.top-alert:hover {
  background: #05170f;
}

:root[data-theme="dark"] .top-alert:hover {
  background: #123029;
}

.top-alert-tag {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--warm-solid);
  color: var(--warm-solid-ink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.top-alert-text {
  color: var(--ink-inverse-2);
  font-weight: 550;
}

.top-alert-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8fe0bd;
  font-weight: 650;
}

.top-alert-go::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease);
}

.top-alert:hover .top-alert-go::after {
  transform: translateX(3px);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    backdrop-filter: saturate(1.4) blur(14px);
  }
}

/* Only show the seam once the page has actually scrolled */
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-1);
}

.nav {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  border-radius: var(--r-md);
}

.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-text {
  display: grid;
  min-width: 0;
}

.brand-text strong {
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.brand-text small {
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-sm);
  font-weight: 550;
}

.nav-links a:not(.nav-cta) {
  padding: 8px var(--s-3);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  transition: background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.nav-links a:not(.nav-cta):hover {
  background: var(--bg-tint);
  color: var(--ink);
}

.nav-links a:not(.nav-cta).active {
  background: var(--bg-tint);
  color: var(--brand-ink);
  font-weight: 650;
}

.nav-cta {
  flex: 0 0 auto;
  margin-left: var(--s-2);
  padding: 9px var(--s-4);
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 650;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease);
}

.nav-cta:hover {
  background: var(--brand-hover);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  color: var(--ink-2);
  transition: background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.icon-btn:hover {
  background: var(--bg-tint);
  border-color: var(--line-2);
  color: var(--ink);
}

.icon-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Theme toggle swaps which glyph is visible */
.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: none;
  }
  :root[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
  }
}

/* align-content:center stops the auto rows from stretching to the button
   height: without it the bars sit too far apart to close into an X. */
.menu-btn {
  display: none;
  align-content: center;
}

.menu-btn .bar {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease),
    opacity var(--dur-1) var(--ease);
}

.menu-btn .bar + .bar {
  margin-top: 4px;
}

.menu-btn[aria-expanded="true"] .bar:first-child {
  transform: translateY(2.75px) rotate(45deg);
}

.menu-btn[aria-expanded="true"] .bar:last-child {
  transform: translateY(-2.75px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 72px);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

/* Let the app run past the container edge so the hero does not read as a
   tidy two column template. Clipped by the body, never scrollable. */
@media (min-width: 1081px) {
  .hero-app {
    margin-right: calc(var(--gutter) * -1 - 24px);
  }
}

.hero h1 {
  margin-bottom: var(--s-5);
  max-width: 12ch;
}

/* ---- Rotating headline ----------------------------------------------------
   Every phrase shares one grid cell, so the box is always as tall as the
   tallest phrase at the current width. Nothing below the headline can move,
   and mobile wrapping is reserved for automatically.
   -------------------------------------------------------------------------- */

.headline-static {
  display: block;
}

.headline-rotator {
  display: grid;
}

.rotator-item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  /* Stacked phrases must never take a click or a text selection */
  pointer-events: none;
  transform: translateY(0.3em);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease),
    visibility 0s linear 460ms;
}

.rotator-item.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 460ms var(--ease), transform 460ms var(--ease),
    visibility 0s linear 0s;
}

/* Outgoing phrase keeps travelling upward rather than dropping back down */
.rotator-item.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: translateY(-0.3em);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease),
    visibility 0s linear 460ms;
}

.hero-sub {
  max-width: 52ch;
  color: var(--ink-3);
  font-size: var(--t-lg);
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

/* ---- Hero app window -----------------------------------------------------
   A product illustration built from real markup, not a screenshot. It shows
   the finished state immediately: no toggle, no hover targets.
   -------------------------------------------------------------------------- */

.hero-app {
  position: relative;
  display: grid;
  gap: var(--s-4);
}

/* Warm pool of colour behind the frame so the hero is not a flat field */
.app-glow {
  position: absolute;
  inset: -14% -10% 8%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 30% 30%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%),
    radial-gradient(55% 55% at 75% 60%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%);
  filter: blur(52px);
  opacity: 0.55;
  pointer-events: none;
}

:root[data-theme="dark"] .app-glow { opacity: 0.4; }

.app-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.app-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 11px var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}

.app-dots {
  display: inline-flex;
  gap: 5px;
}

.app-dots i {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line-2);
}

.app-title {
  overflow: hidden;
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-body {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
}

.app-nav {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--s-4) var(--s-3);
  background: var(--bg-inverse);
}

.app-nav-logo {
  display: block;
  margin-bottom: var(--s-3);
  padding-left: 9px;
}

.app-nav-logo img {
  width: 26px;
  height: 26px;
}

.app-nav-btn {
  padding: 8px 9px;
  border-radius: var(--r-sm);
  color: rgba(234, 243, 238, 0.62);
  font-size: 0.74rem;
  font-weight: 600;
  text-align: left;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.app-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(234, 243, 238, 0.9);
}

.app-nav-btn[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.app-nav-btn:focus-visible {
  outline: 2px solid #8fe0bd;
  outline-offset: -2px;
}

.app-main {
  padding: var(--s-5);
  /* Every panel occupies the same cell so the frame never jumps height */
  display: grid;
}

/* All four panels stay in the same grid cell so the frame is always the
   height of the tallest one. Hidden panels use visibility, not display, or
   they would stop contributing to the cell and the window would resize. */
.app-panel {
  display: grid;
  grid-area: 1 / 1;
  align-content: start;
  gap: var(--s-4);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.app-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.app-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.app-head span {
  display: block;
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.app-head strong {
  display: block;
  margin-top: 3px;
  font-size: var(--t-base);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.app-flag {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.app-stats div {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
}

.app-stats span {
  display: block;
  color: var(--ink-3);
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.3;
}

.app-stats strong {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.app-rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.app-agency {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-date {
  color: var(--ink-3);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.app-progress {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-2);
}

.app-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.app-progress-top span {
  color: var(--ink-3);
  font-size: 0.7rem;
  font-weight: 600;
}

.app-progress-top strong {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.app-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line-2);
  overflow: hidden;
}

.app-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--brand);
  transition: width 900ms var(--ease);
}

/* ---- Field checklist panel ---- */

.app-checks {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-checks li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: 0.74rem;
  font-weight: 600;
}

.check-box {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--line-2);
  border-radius: 4px;
}

.app-checks li {
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.app-checks .is-done {
  color: var(--ink-3);
}

.check-box {
  transition: background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.app-checks .is-done .check-box {
  border-color: var(--brand);
  background-color: var(--brand);
  -webkit-mask: none;
  mask: none;
  position: relative;
}

.app-checks .is-done .check-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background-color: var(--on-brand);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

.app-photos {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.app-photos span {
  width: 46px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(135deg, var(--bg-tint), var(--bg-sunken));
}

.app-photos em {
  color: var(--ink-3);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
}

/* ---- Report writer panel ---- */

.app-doc {
  display: grid;
  gap: 9px;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.doc-h {
  width: 46%;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  opacity: 0.55;
}

.doc-l {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line-2);
}

.doc-l.short { width: 78%; }
.doc-l.tiny  { width: 44%; }

.doc-pull {
  display: grid;
  gap: 2px;
  transition: background var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
  padding: 9px 11px;
  border-left: 2px solid var(--brand);
  border-radius: 0 6px 6px 0;
  background: var(--brand-tint);
}

.doc-pull span {
  color: var(--brand-ink);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.doc-pull strong {
  font-size: 0.72rem;
  font-weight: 650;
}

/* The moment the report pulls data from the site visit */
.doc-pull.is-pulled {
  border-left-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 18%, var(--bg-elev));
}

.app-flag,
.chip {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

.chip-ok   { background: var(--brand-tint);  color: var(--brand-ink); }
.chip-wait { background: var(--accent-tint); color: var(--accent); }
.chip-due  { background: var(--warn-tint);   color: var(--warn-ink); }

.app-exports {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.app-export-note {
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 600;
}

.app-block {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.app-sub {
  color: var(--ink-3);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.app-outline {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-outline li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-3);
  font-size: 0.72rem;
}

.app-outline i {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
}

.app-outline .is-complete {
  color: var(--ink-2);
}

.app-outline .is-complete i {
  border-color: var(--brand);
  background: var(--brand);
}

.app-outline .is-current {
  color: var(--ink);
  font-weight: 650;
}

.app-outline .is-current i {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.app-outline em {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--warn-tint);
  color: var(--warn-ink);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 700;
}

.app-note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--ink-2);
  font-size: 0.7rem;
  font-weight: 600;
}

.app-note-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--warn-ink);
}

/* ---- Projects panel ---- */

.app-owners {
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-owners span {
  margin-right: var(--s-2);
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 600;
}

.app-owners i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--bg-elev);
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--brand-ink);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
}

.app-owners i + i { margin-left: -8px; }

.app-owners em {
  margin-left: var(--s-2);
  color: var(--ink-3);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   8b. Background foliage + capability strip
   -------------------------------------------------------------------------- */

/* Decorative only: behind everything, never interactive, hidden from AT. */
.bg-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--brand);
}

.bg-decor .leaf {
  position: absolute;
  width: var(--size, 320px);
  opacity: 0.07;
}

:root[data-theme="dark"] .bg-decor .leaf {
  opacity: 0.085;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-decor .leaf {
    opacity: 0.085;
  }
}

/* Stroke-drawn shapes read heavier than solid ones at the same opacity */
.bg-decor .shape-reed,
.bg-decor .shape-fern {
  opacity: 0.055;
}

.bg-decor .leaf-1  { --size: 350px; top: 60px; left: -80px; rotate: -24deg; opacity: 0.09; }
.bg-decor .leaf-2  { --size: 300px; top: 640px; right: -70px; rotate: 34deg; opacity: 0.085; }
.bg-decor .leaf-3  { --size: 260px; top: 600px; left: -30px; rotate: 52deg; opacity: 0.08; }
.bg-decor .leaf-4  { --size: 320px; top: 170px; right: -60px; rotate: -20deg; opacity: 0.09; }
.bg-decor .leaf-5  { --size: 300px; top: 1220px; left: -110px; rotate: 14deg; opacity: 0.075; }
.bg-decor .leaf-6  { --size: 280px; top: 1160px; right: -90px; rotate: -46deg; opacity: 0.075; }
.leaf-7  { --size: 320px; top: 24.4%; left: -90px; rotate: 8deg; }
.leaf-8  { --size: 380px; top: 28.8%; right: -130px; rotate: 26deg; }
.leaf-9  { --size: 300px; top: 33.2%; left: -100px; rotate: -34deg; }
.leaf-10 { --size: 240px; top: 37.6%; right: -120px; rotate: 52deg; }
.leaf-11 { --size: 340px; top: 42.0%; left: -80px; rotate: -20deg; }
.leaf-12 { --size: 260px; top: 46.4%; right: -110px; rotate: 14deg; }
.leaf-13 { --size: 320px; top: 50.8%; left: -90px; rotate: -62deg; }
.leaf-14 { --size: 380px; top: 55.2%; right: -130px; rotate: 34deg; }
.leaf-15 { --size: 300px; top: 59.6%; left: -100px; rotate: 8deg; }
.leaf-16 { --size: 240px; top: 64.0%; right: -120px; rotate: 26deg; }
.leaf-17 { --size: 340px; top: 68.4%; left: -80px; rotate: -34deg; }
.leaf-18 { --size: 260px; top: 72.8%; right: -110px; rotate: 52deg; }
.leaf-19 { --size: 320px; top: 77.2%; left: -90px; rotate: -20deg; }
.leaf-20 { --size: 380px; top: 81.6%; right: -130px; rotate: 14deg; }
.leaf-21 { --size: 300px; top: 86.0%; left: -100px; rotate: -62deg; }
.leaf-22 { --size: 240px; top: 90.4%; right: -120px; rotate: 34deg; }
.leaf-23 { --size: 340px; top: 94.8%; left: -80px; rotate: 8deg; }
.leaf-24 { --size: 260px; top: 99.2%; right: -110px; rotate: 26deg; }

:root[data-theme="dark"] .bg-decor .shape-reed,
:root[data-theme="dark"] .bg-decor .shape-fern {
  opacity: 0.075;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-decor .shape-reed,
  :root:not([data-theme="light"]) .bg-decor .shape-fern {
    opacity: 0.075;
  }
}

/* Soft colour wash so the page is not a flat field of one tone */
.bg-decor .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.blob-1 {
  width: 520px;
  height: 520px;
  top: -180px;
  left: -140px;
  background: radial-gradient(circle, var(--brand-tint), transparent 70%);
}

.blob-2 {
  width: 620px;
  height: 620px;
  top: 42%;
  right: -220px;
  background: radial-gradient(circle, var(--accent-tint), transparent 70%);
}

.blob-3 {
  width: 560px;
  height: 560px;
  bottom: 2%;
  left: -180px;
  background: radial-gradient(circle, var(--brand-tint), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .bg-decor .leaf {
    animation: drift 26s ease-in-out infinite alternate;
  }

  .leaf-2  { --size: 320px; top: 150px; right: -70px; rotate: 30deg; opacity: 0.09; }
  .leaf-3  { --size: 260px; top: 520px; left: -40px; rotate: 56deg; opacity: 0.085; }
  .leaf-4  { --size: 300px; top: 300px; right: -50px; rotate: -22deg; opacity: 0.085; }
  .leaf-5  { --size: 300px; top: 1150px; left: -110px; rotate: 12deg; opacity: 0.075; }
  .leaf-6  { --size: 280px; top: 980px; right: -90px; rotate: -48deg; opacity: 0.075; }
  .leaf-7  { animation-duration: 30s; animation-delay: -7s; }
  .leaf-8  { animation-duration: 33s; animation-delay: -2s; }
  .leaf-9  { animation-duration: 36s; animation-delay: -18s; }
  .leaf-10 { animation-duration: 39s; animation-delay: -13s; }
  .leaf-11 { animation-duration: 42s; animation-delay: -8s; }
  .leaf-12 { animation-duration: 28s; animation-delay: -3s; }
  .leaf-13 { animation-duration: 31s; animation-delay: -19s; }
  .leaf-14 { animation-duration: 34s; animation-delay: -14s; }
  .leaf-15 { animation-duration: 37s; animation-delay: -9s; }
  .leaf-16 { animation-duration: 40s; animation-delay: -4s; }
  .leaf-17 { animation-duration: 26s; animation-delay: -20s; }
  .leaf-18 { animation-duration: 29s; animation-delay: -15s; }
  .leaf-19 { animation-duration: 32s; animation-delay: -10s; }
  .leaf-20 { animation-duration: 35s; animation-delay: -5s; }
  .leaf-21 { animation-duration: 38s; animation-delay: -0s; }
  .leaf-22 { animation-duration: 41s; animation-delay: -16s; }
  .leaf-23 { animation-duration: 27s; animation-delay: -11s; }
  .leaf-24 { animation-duration: 30s; animation-delay: -6s; }
}

@keyframes drift {
  from { translate: 0 0; }
  to   { translate: 0 26px; }
}

/* ---- Fits your stack bar ---- */

.stack-section {
  padding-block: 0 clamp(32px, 5vw, 56px);
}

.stack-bar {
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-2);
}

.stack-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5);
}

.stack-head strong {
  font-size: var(--t-base);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.stack-head span {
  color: var(--ink-3);
  font-size: var(--t-sm);
}

.stack-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The tiles sit on the page tone so they read recessed inside the card */
.stack-list li {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg);
  opacity: 0;
  transform: translateY(14px);
}

.stack-list svg {
  width: 20px;
  height: 20px;
  margin-bottom: var(--s-2);
  color: var(--brand-ink);
}

.stack-list strong {
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.stack-list span {
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.5;
}

/* Aligned to the first line, not the block: the note wraps to three lines on
   a phone, where a vertically centred icon drifts away from the text it marks */
.stack-foot {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  padding-top: var(--s-4);
  margin-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.stack-foot svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand-ink);
}

.stack-head,
.stack-foot {
  opacity: 0;
  transform: translateY(14px);
}

.js .stack-bar.is-in .stack-list li,
.js .stack-bar.is-in .stack-head,
.js .stack-bar.is-in .stack-foot {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.stack-bar.is-in .stack-list li:nth-child(1) { transition-delay: 90ms; }
.stack-bar.is-in .stack-list li:nth-child(2) { transition-delay: 170ms; }
.stack-bar.is-in .stack-list li:nth-child(3) { transition-delay: 250ms; }
.stack-bar.is-in .stack-foot { transition-delay: 330ms; }

/* Never leave the bar invisible if scripting is off */
html:not(.js) .stack-list li,
html:not(.js) .stack-head,
html:not(.js) .stack-foot {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   10. Content cards
   -------------------------------------------------------------------------- */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

.problem-card,
.solution-card,
.case-card,
.timeline-item,
.screenshot-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

@media (hover: hover) {
  .problem-card:hover,
  .solution-card:hover,
  .case-card:hover,
  .screenshot-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
  }
}

.problem-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
}

.problem-num {
  width: fit-content;
  margin-bottom: var(--s-5);
  padding: 5px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--bg-tint);
  color: var(--brand-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.problem-card h3,
.solution-card h3,
.case-card h3,
.timeline-item h3,
.screenshot-card h3 {
  margin-bottom: var(--s-3);
  font-size: var(--t-lg);
  line-height: 1.24;
  letter-spacing: -0.022em;
}

.problem-card p,
.solution-card p,
.case-card p,
.timeline-item p,
.screenshot-card p {
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.58;
}

/* Solutions */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.solution-card {
  position: relative;
  padding: var(--s-6);
}

.solution-card.featured {
  background: var(--bg-tint);
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}

/* Keep the heading clear of the absolutely-positioned corner badge */
.solution-card.featured h3 {
  padding-right: 108px;
}

.badge {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--t-xs);
  font-weight: 650;
}

.solution-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-tint);
  color: var(--brand-ink);
  font-size: 1.1rem;
}

.solution-card ul,
.compare-card ul {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.solution-card li,
.compare-card li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.solution-card li::before,
.compare-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 13px;
  height: 13px;
  background-color: var(--brand);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

:root {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

/* Case studies */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.case-card {
  padding: var(--s-6);
}

.case-card > span {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--brand-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.case-card p + p {
  margin-top: var(--s-3);
}

.case-card p strong {
  color: var(--ink);
  font-weight: 650;
}

/* Timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

.timeline-item {
  padding: var(--s-6);
}

.timeline-item > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--s-5);
  border-radius: var(--r-sm);
  background: var(--bg-inverse);
  color: var(--ink-inverse);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Screenshots */
.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-10);
}

.screenshot-card {
  overflow: hidden;
}

.screenshot-media {
  display: block;
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  cursor: zoom-in;
}

.screenshot-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}

.screenshot-media:hover img {
  transform: scale(1.03);
}

.screenshot-card > div {
  padding: var(--s-5);
}

.screenshot-card > div > span {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--brand-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.problem-cost {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.problem-cost strong {
  color: var(--warn-ink);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.problem-cost span {
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.4;
}

.problem-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: 7px 12px;
  width: fit-content;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.problem-pick:hover {
  border-color: var(--brand);
  color: var(--ink);
}

.problem-pick input {
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1.5px solid var(--line-2);
  border-radius: 4px;
  cursor: pointer;
}

.problem-pick input:checked {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: var(--check);
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

.problem-pick:has(input:checked) {
  background: var(--bg-tint);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.problem-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}

.problem-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding: var(--s-6);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  border-radius: var(--r-lg);
  background: var(--bg-tint);
}

.problem-result-copy {
  display: grid;
  gap: 4px;
}

.problem-result-label {
  color: var(--brand-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.problem-result-copy strong {
  font-size: var(--t-lg);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.problem-result-note {
  color: var(--ink-3);
  font-size: var(--t-sm);
}

/* ---- Same Tuesday, Twice workflow animation ---- */

.proof-day-section {
  overflow: hidden;
}

.proof-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: var(--s-10);
}

.proof-head h2 {
  max-width: 16ch;
  margin-top: var(--s-4);
}

.proof-head > p {
  max-width: 52ch;
}

.day-demo {
  --day-mint: #8fe0bd;
  --day-mint-strong: #b6f0d4;
  --day-cream: #eaf3ee;
  --day-muted: rgba(234, 243, 238, 0.58);
  --day-faint: rgba(234, 243, 238, 0.12);
  --day-warm: #e9a18e;
  --day-progress: 0%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(234, 243, 238, 0.17);
  border-radius: var(--r-xl);
  background: rgba(4, 25, 19, 0.72);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
  isolation: isolate;
}

.day-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(143, 224, 189, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 224, 189, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 84%);
}

.day-demo-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid rgba(234, 243, 238, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

.day-demo-context {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.day-demo-context strong {
  color: var(--day-cream);
  font-size: var(--t-base);
  letter-spacing: -0.015em;
}

.day-demo-eyebrow,
.day-summary-label {
  color: rgba(234, 243, 238, 0.47);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.day-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(234, 243, 238, 0.13);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.18);
}

.day-mode-button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(234, 243, 238, 0.52);
  font-size: var(--t-xs);
  font-weight: 750;
  cursor: pointer;
  transition:
    color var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.day-mode-button:hover {
  color: var(--day-cream);
}

.day-mode-button.is-active {
  background: rgba(234, 243, 238, 0.1);
  color: var(--day-cream);
  box-shadow: inset 0 0 0 1px rgba(234, 243, 238, 0.08);
}

.day-demo.is-after .day-mode-button.is-active {
  background: rgba(143, 224, 189, 0.14);
  color: var(--day-mint-strong);
  box-shadow: inset 0 0 0 1px rgba(143, 224, 189, 0.2);
}

.day-mode-button:focus-visible,
.day-replay:focus-visible {
  outline: 2px solid var(--day-mint);
  outline-offset: 3px;
}

.day-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(234, 243, 238, 0.13);
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(234, 243, 238, 0.58);
  font-size: var(--t-xs);
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}

.day-replay svg {
  width: 14px;
  height: 14px;
}

.day-replay:hover {
  border-color: rgba(143, 224, 189, 0.35);
  background: rgba(143, 224, 189, 0.07);
  color: var(--day-mint-strong);
}

.day-replay.is-spinning svg {
  animation: day-replay-spin 0.65s var(--ease);
}

@keyframes day-replay-spin {
  to { transform: rotate(-360deg); }
}

.day-demo-summary {
  display: grid;
  grid-template-columns: minmax(135px, 0.55fr) minmax(135px, 0.55fr) minmax(0, 1.7fr);
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-5) var(--s-6) var(--s-4);
}

.day-demo-summary > div {
  display: grid;
  gap: 3px;
}

.day-demo-summary strong {
  color: var(--day-cream);
  font-size: var(--t-lg);
  letter-spacing: -0.025em;
  transition: color var(--dur-3) var(--ease);
}

.day-summary-end strong {
  color: #f1b4a4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.day-demo.is-after .day-summary-end strong {
  color: var(--day-mint-strong);
}

.day-demo-summary p {
  margin: 0;
  color: var(--day-muted);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.day-stage {
  position: relative;
  margin: 0 var(--s-6);
  padding: 42px 0 14px;
  border-top: 1px solid rgba(234, 243, 238, 0.1);
}

.day-ruler {
  position: absolute;
  top: 8px;
  right: 128px;
  left: 294px;
  height: 24px;
  border-bottom: 1px solid rgba(234, 243, 238, 0.15);
}

.day-ruler::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 7px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(234, 243, 238, 0.18) 0,
    rgba(234, 243, 238, 0.18) 1px,
    transparent 1px,
    transparent 4%
  );
  mask-image: linear-gradient(to top, black, transparent);
}

.day-ruler span {
  position: absolute;
  bottom: 9px;
  color: rgba(234, 243, 238, 0.42);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.61rem;
  white-space: nowrap;
  transform: translateX(-50%);
}

.day-ruler span:first-child {
  transform: none;
}

.day-ruler .day-ruler-late {
  color: rgba(241, 180, 164, 0.76);
  transform: translateX(-100%);
  transition: opacity var(--dur-3) var(--ease);
}

.day-demo.is-after .day-ruler-late {
  opacity: 0.25;
}

.day-evening {
  position: absolute;
  top: 32px;
  right: 128px;
  bottom: 14px;
  left: var(--day-evening-left, 75%);
  overflow: hidden;
  border-left: 1px dashed rgba(241, 180, 164, 0.42);
  background: rgba(190, 93, 72, 0.055);
  transition:
    background 700ms var(--ease),
    border-color 700ms var(--ease);
}

.day-evening::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 8px,
    rgba(241, 180, 164, 0.055) 8px,
    rgba(241, 180, 164, 0.055) 9px
  );
  transition: opacity 700ms var(--ease);
}

.day-evening span {
  position: absolute;
  top: 12px;
  right: 10px;
  color: rgba(241, 180, 164, 0.62);
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    opacity 500ms var(--ease),
    transform 500ms var(--ease),
    color 500ms var(--ease);
}

.day-evening-after {
  opacity: 0;
  transform: translateY(6px);
}

.day-demo.is-after .day-evening {
  border-color: rgba(143, 224, 189, 0.3);
  background: rgba(143, 224, 189, 0.035);
}

.day-demo.is-after .day-evening::before {
  opacity: 0.2;
}

.day-demo.is-after .day-evening-before {
  opacity: 0;
  transform: translateY(-6px);
}

.day-demo.is-after .day-evening-after {
  color: rgba(182, 240, 212, 0.72);
  opacity: 1;
  transform: none;
}

.day-progress {
  position: absolute;
  z-index: 3;
  top: 31px;
  bottom: 13px;
  left: var(--day-progress-left, 294px);
  width: 1px;
  background: rgba(234, 243, 238, 0.28);
  opacity: 0;
  pointer-events: none;
  transition:
    left 700ms var(--ease),
    opacity var(--dur-2) var(--ease),
    background var(--dur-3) var(--ease);
}

.day-demo.is-playing .day-progress {
  opacity: 1;
}

.day-demo.is-after .day-progress {
  background: rgba(143, 224, 189, 0.5);
}

.day-progress-dot {
  position: absolute;
  top: -5px;
  left: -4px;
  width: 9px;
  height: 9px;
  border: 2px solid #09251c;
  border-radius: 50%;
  background: var(--day-cream);
  box-shadow: 0 0 0 3px rgba(234, 243, 238, 0.1);
  transition: background var(--dur-3) var(--ease);
}

.day-demo.is-after .day-progress-dot {
  background: var(--day-mint);
}

.day-rows {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
}

.day-row {
  display: grid;
  grid-template-columns: 34px 244px minmax(230px, 1fr) 116px;
  gap: var(--s-4);
  align-items: center;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  opacity: 0.36;
  transform: translateY(4px);
  transition:
    opacity 360ms var(--ease),
    transform 360ms var(--ease),
    border-color var(--dur-3) var(--ease),
    background var(--dur-3) var(--ease);
}

.day-row.is-revealed {
  opacity: 1;
  transform: none;
}

.day-row.is-current {
  border-color: rgba(234, 243, 238, 0.13);
  background: rgba(255, 255, 255, 0.035);
}

.day-demo.is-after .day-row {
  transition-delay: calc(var(--i) * 70ms);
}

.day-demo.is-after .day-row.is-current,
.day-demo.is-after .day-row:hover {
  border-color: rgba(143, 224, 189, 0.17);
  background: rgba(143, 224, 189, 0.035);
}

.day-row-number {
  color: rgba(234, 243, 238, 0.3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  transition: color var(--dur-3) var(--ease);
}

.day-row.is-current .day-row-number {
  color: rgba(234, 243, 238, 0.7);
}

.day-demo.is-after .day-row-number {
  color: rgba(143, 224, 189, 0.62);
}

.day-row-copy {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.day-row-kicker {
  color: rgba(234, 243, 238, 0.42);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.day-row-copy strong {
  grid-area: 2 / 1;
  color: rgba(234, 243, 238, 0.72);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  transition:
    opacity 480ms var(--ease),
    transform 480ms var(--ease),
    color 480ms var(--ease);
}

.day-copy-before {
  opacity: 1;
}

.day-copy-after {
  color: var(--day-cream) !important;
  opacity: 0;
  transform: translateY(5px);
}

.day-demo.is-after .day-copy-before {
  opacity: 0;
  transform: translateY(-5px);
}

.day-demo.is-after .day-copy-after {
  opacity: 1;
  transform: none;
}

.day-track {
  position: relative;
  height: 28px;
  min-width: 0;
  border-radius: var(--r-pill);
  background: rgba(234, 243, 238, 0.035);
}

.day-track::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(234, 243, 238, 0.12);
}

.day-bar {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: var(--start);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: var(--r-pill);
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 620ms var(--ease),
    opacity 480ms var(--ease),
    filter 480ms var(--ease);
}

.day-row.is-revealed .day-bar-before {
  transform: scaleX(1);
}

.day-bar-before {
  width: var(--manual);
  min-width: 18px;
  gap: 3px;
  padding: 0 6px;
  border: 1px solid rgba(233, 161, 142, 0.26);
  background: rgba(233, 161, 142, 0.13);
}

.day-bar-before::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(241, 180, 164, 0.86);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(233, 161, 142, 0.08);
}

.day-bar-before i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(241, 180, 164, 0.5);
}

.day-bar-after {
  width: var(--envee);
  min-width: 52px;
  justify-content: center;
  border: 1px solid rgba(143, 224, 189, 0.34);
  background: rgba(143, 224, 189, 0.16);
  opacity: 0;
}

.day-bar-after b {
  padding: 0 7px;
  color: var(--day-mint-strong);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.day-demo.is-after .day-bar-before {
  opacity: 0.08;
  filter: saturate(0);
  transform: scaleX(0.18);
}

.day-demo.is-after .day-row.is-revealed .day-bar-after {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: calc(240ms + var(--i) * 90ms);
}

.day-gain {
  justify-self: end;
  padding: 5px 9px;
  border: 1px solid rgba(234, 243, 238, 0.08);
  border-radius: var(--r-pill);
  color: rgba(234, 243, 238, 0.38);
  font-size: 0.65rem;
  font-weight: 750;
  white-space: nowrap;
  transition:
    border-color var(--dur-3) var(--ease),
    background var(--dur-3) var(--ease),
    color var(--dur-3) var(--ease),
    transform var(--dur-3) var(--ease);
}

.day-demo.is-after .day-gain {
  border-color: rgba(143, 224, 189, 0.2);
  background: rgba(143, 224, 189, 0.1);
  color: var(--day-mint-strong);
  transform: translateX(-2px);
}

.day-end-marker {
  position: absolute;
  z-index: 1;
  top: 31px;
  bottom: 13px;
  left: var(--day-end-left, 99%);
  width: 1px;
  border-left: 1px dashed rgba(241, 180, 164, 0.48);
  pointer-events: none;
  transition:
    left 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 700ms var(--ease);
}

.day-end-marker span {
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 9px;
  height: 9px;
  border: 2px solid #09251c;
  border-radius: 50%;
  background: #f1b4a4;
  transition: background 700ms var(--ease);
}

.day-demo.is-after .day-end-marker {
  border-color: rgba(143, 224, 189, 0.48);
}

.day-demo.is-after .day-end-marker span {
  background: var(--day-mint);
}

.day-demo-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
  margin: 0 var(--s-6);
  padding: var(--s-5) 0 var(--s-6);
  border-top: 1px solid rgba(234, 243, 238, 0.1);
}

.day-proof-seal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 226px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(234, 243, 238, 0.11);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.025);
  transition:
    border-color 600ms var(--ease),
    background 600ms var(--ease),
    transform 600ms var(--ease);
}

.day-proof-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(234, 243, 238, 0.12);
  border-radius: 50%;
  color: rgba(234, 243, 238, 0.34);
  transition:
    color 600ms var(--ease),
    border-color 600ms var(--ease),
    background 600ms var(--ease),
    transform 600ms var(--ease);
}

.day-proof-icon svg {
  width: 16px;
  height: 16px;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 600ms var(--ease) 240ms;
}

.day-proof-seal > div {
  display: grid;
  gap: 1px;
}

.day-proof-seal > div span {
  color: rgba(234, 243, 238, 0.4);
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.day-proof-seal strong {
  color: rgba(234, 243, 238, 0.68);
  font-size: 0.78rem;
}

.day-demo.is-after .day-proof-seal {
  border-color: rgba(143, 224, 189, 0.2);
  background: rgba(143, 224, 189, 0.07);
  transform: translateY(-2px);
}

.day-demo.is-after .day-proof-icon {
  border-color: rgba(143, 224, 189, 0.28);
  background: rgba(143, 224, 189, 0.12);
  color: var(--day-mint-strong);
  transform: rotate(-5deg) scale(1.04);
}

.day-demo.is-after .day-proof-icon svg {
  stroke-dashoffset: 0;
}

.shift-note {
  margin: 0;
  color: rgba(234, 243, 238, 0.47);
  font-size: var(--t-xs);
  text-align: right;
}


/* --------------------------------------------------------------------------
   12. Example tabs
   -------------------------------------------------------------------------- */

.examples-wrap {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
}

.example-tabs {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-3);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tab {
  flex: 0 0 auto;
  padding: 9px var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.tab:hover {
  background: var(--bg-tint);
  color: var(--ink);
}

.tab[aria-selected="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.example-panel {
  display: none;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
  padding: clamp(22px, 3.5vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}

.example-panel.is-active {
  display: grid;
}

.example-panel h3 {
  margin: var(--s-1) 0 var(--s-3);
  font-size: var(--t-2xl);
  line-height: 1.12;
  letter-spacing: -0.032em;
}

.example-panel p {
  color: var(--ink-3);
  line-height: 1.64;
}

.mini-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.mini-features span {
  padding: 6px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: 600;
}

.example-visual {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  cursor: zoom-in;
}

.example-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}

.example-visual:hover img {
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   13. Dark band / comparison
   -------------------------------------------------------------------------- */

.dark-band {
  position: relative;
  background: var(--bg-inverse);
  color: var(--ink-inverse);
  overflow: hidden;
}

.dark-band > .container {
  position: relative;
  z-index: 1;
}

/* Topographic contour texture, the kind on a site map */
.band-texture {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    repeating-radial-gradient(
      ellipse 900px 520px at 22% 28%,
      transparent 0 42px,
      rgba(143, 224, 189, 0.06) 42px 44px
    ),
    repeating-radial-gradient(
      ellipse 760px 620px at 82% 74%,
      transparent 0 48px,
      rgba(99, 182, 222, 0.05) 48px 50px
    );
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 100%);
}

.dark-band h2 {
  margin-bottom: var(--s-4);
  color: var(--ink-inverse);
}

.dark-band p {
  color: var(--ink-inverse-2);
  font-size: var(--t-lg);
  line-height: 1.66;
}

.section-kicker.light {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line-inverse);
  color: #8fe0bd;
}

.dark-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.compare-card {
  padding: var(--s-6);
  border: 1px solid var(--line-inverse);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
}

.compare-card h3 {
  margin-bottom: var(--s-2);
  color: var(--ink-inverse);
}

.compare-card li {
  color: var(--ink-inverse-2);
}

.compare-card.weak li::before {
  background-color: #f0a79c;
  -webkit-mask-image: var(--cross);
  mask-image: var(--cross);
}

.compare-card.strong {
  background: rgba(63, 191, 143, 0.09);
  border-color: rgba(143, 224, 189, 0.24);
}

.compare-card.strong li::before {
  background-color: #8fe0bd;
}

/* --------------------------------------------------------------------------
   14. Lead magnet
   -------------------------------------------------------------------------- */

.lead-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-tint);
}

.lead-card p {
  color: var(--ink-3);
  font-size: var(--t-md);
  line-height: 1.66;
}

.lead-card h2 {
  margin-bottom: var(--s-4);
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.guide-preview {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-2);
}

.guide-document {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}

.guide-document-top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 700;
}

.guide-document-top img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.guide-document h3 {
  margin: var(--s-10) 0 var(--s-3);
  max-width: 18ch;
  font-size: var(--t-2xl);
  line-height: 1.1;
  letter-spacing: -0.032em;
}

.guide-document > p {
  max-width: 34ch;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.guide-document-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-6);
}

.guide-document-list span {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: 600;
}

.guide-document-list span::before {
  content: "";
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  background-color: var(--brand);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   15. Packages
   -------------------------------------------------------------------------- */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

@media (hover: hover) {
  .plan:hover {
    transform: translateY(-3px);
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
  }
}

/* At three-up, share row tracks across all cards so the headings, prices,
   buttons, and footers line up no matter how long each card's copy runs.
   Falls back to the flex column above where subgrid is unsupported. */
@media (min-width: 1081px) {
  @supports (grid-template-rows: subgrid) {
    .plan-grid {
      grid-template-rows: auto auto auto 1fr auto;
      row-gap: 0;
    }

    .plan {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
    }
  }
}

.plan.is-featured {
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  box-shadow: var(--shadow-2);
}

.plan-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px var(--s-4);
  border-radius: var(--r-pill);
  background: var(--warm-solid);
  color: var(--warm-solid-ink);
  font-size: var(--t-xs);
  font-weight: 650;
  white-space: nowrap;
}

.plan-audience {
  display: block;
  margin-bottom: var(--s-3);
  color: var(--brand-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.plan-head h3 {
  margin-bottom: var(--s-2);
  font-size: var(--t-xl);
  letter-spacing: -0.028em;
}

.plan-head p {
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.plan-price {
  margin: var(--s-6) 0 var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.plan-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ink-3);
  font-size: var(--t-sm);
  font-weight: 600;
}

.plan-amount b {
  color: var(--ink);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.plan-amount small {
  font-size: var(--t-sm);
  font-weight: 600;
}

.plan-note {
  display: block;
  margin-top: var(--s-3);
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.45;
}

.plan > .btn {
  width: 100%;
}

.plan-body {
  flex: 1;
  margin-top: var(--s-6);
}

.plan-label {
  display: block;
  margin-bottom: var(--s-4);
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-body ul {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-body li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.plan-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 13px;
  height: 13px;
  background-color: var(--brand);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

.plan-callout {
  display: grid;
  gap: 3px;
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--warn-ink) 30%, transparent);
  border-radius: var(--r-sm);
  background: var(--warn-tint);
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.plan-callout strong {
  color: var(--warn-ink);
  font-size: var(--t-sm);
  font-weight: 700;
}

.plan-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.plan-meta > div {
  display: grid;
  gap: 3px;
}

.plan-meta dt {
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 600;
}

.plan-meta dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 650;
}

/* ---- Assurances band ---- */

.assurances {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: var(--s-10) 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  overflow: hidden;
}

.assurances li {
  padding: var(--s-5);
  background: var(--bg-elev);
}

.assurances strong {
  display: block;
  margin-bottom: 5px;
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.assurances span {
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.5;
}

/* ---- Comparison matrix ---- */

.compare-wrap {
  margin-top: var(--s-10);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-2);
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.compare-table th,
.compare-table td {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.compare-table thead th {
  /* Deliberately not --bg-sunken: the section behind it uses that tone and
     the top edge of the card vanished into it. */
  background: color-mix(in srgb, var(--ink) 7%, var(--bg-elev));
  border-bottom: 2px solid var(--line-2);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.compare-table thead th:not(:first-child) {
  text-align: center;
}

.compare-table thead .is-featured-col {
  background: var(--brand-tint);
  color: var(--brand-ink);
}

.compare-table tbody th {
  color: var(--ink);
  font-weight: 600;
}

.compare-table td {
  color: var(--ink-3);
  text-align: center;
}

.compare-table tbody .is-featured-col {
  background: var(--bg-tint);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.cell-text {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-2);
}

.cell-yes,
.cell-no {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.cell-yes {
  background-color: var(--brand);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

.cell-no {
  background-color: var(--line-2);
  -webkit-mask: var(--cross) center / contain no-repeat;
  mask: var(--cross) center / contain no-repeat;
}

.pricing-footnote {
  max-width: 62ch;
  margin: var(--s-10) auto 0;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.65;
  text-align: center;
}

/* --------------------------------------------------------------------------
   16b. Process steps
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

@media (hover: hover) {
  .step:hover {
    transform: translateY(-3px);
    border-color: var(--line-2);
    box-shadow: var(--shadow-2);
  }
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.step-num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--bg-inverse);
  color: var(--ink-inverse);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step-time {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--brand-ink);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.step h3 {
  margin-bottom: var(--s-2);
  font-size: var(--t-lg);
  letter-spacing: -0.022em;
}

.step > p {
  flex: 1;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.58;
}

.step-meta {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.step-meta > div {
  display: grid;
  gap: 2px;
}

.step-meta dt {
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.step-meta dd {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
}

.steps-note {
  margin-top: var(--s-8);
  color: var(--ink-3);
  font-size: var(--t-sm);
  text-align: center;
}

/* --------------------------------------------------------------------------
   16c. Guide email gate
   -------------------------------------------------------------------------- */

.guide-form {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.guide-row {
  display: flex;
  gap: var(--s-2);
}

.guide-row input {
  flex: 1;
  min-width: 0;
  padding: 11px var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  font-size: var(--t-sm);
  transition: border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

.guide-row input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.guide-row .btn {
  flex: 0 0 auto;
}

.guide-form small {
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.5;
}

.guide-success {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.guide-success a {
  color: var(--brand-ink);
  font-weight: 650;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   16d. Contact extras
   -------------------------------------------------------------------------- */

.contact-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}

.contact-direct {
  color: var(--brand-ink);
  font-size: var(--t-sm);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-area {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.service-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.fl-shape {
  fill: var(--brand-tint);
  stroke: var(--brand);
  stroke-width: 4;
  stroke-linejoin: round;
}

.fl-key {
  fill: var(--brand);
  opacity: 0.5;
}

.fl-pin {
  fill: var(--brand);
}

.fl-pin-dot {
  fill: var(--bg-elev);
}

/* Radar ping: two rings offset in time so there is always one expanding */
.fl-ping {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  transform-origin: 306px 238px;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .fl-ping {
    animation: ping 2.8s cubic-bezier(0.16, 0.72, 0.3, 1) infinite;
  }

  .fl-ping-2 {
    animation-delay: 1.4s;
  }

  .fl-pin {
    transform-origin: 306px 238px;
    animation: pinPulse 2.8s var(--ease) infinite;
  }
}

@keyframes ping {
  0%   { opacity: 0.7; scale: 0.45; }
  70%  { opacity: 0;   scale: 2.1; }
  100% { opacity: 0;   scale: 2.1; }
}

@keyframes pinPulse {
  0%, 60%, 100% { scale: 1; }
  20%           { scale: 1.18; }
}

.service-map {
  width: 116px;
  color: var(--brand);
}

.service-copy {
  display: grid;
  gap: 3px;
}

.service-copy strong {
  font-size: var(--t-sm);
  font-weight: 650;
}

.service-copy span {
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   16e. Team
   -------------------------------------------------------------------------- */

.team-section {
  position: relative;
  overflow: hidden;
}

.team-decor {
  position: absolute;
  top: -40px;
  right: -60px;
  display: flex;
  gap: 10px;
  color: var(--brand);
  opacity: 0.16;
  pointer-events: none;
}

.team-decor svg {
  width: 190px;
  rotate: 24deg;
}

.team-decor svg:last-child {
  width: 150px;
  rotate: 62deg;
  translate: -30px 60px;
}

/* Same columns and gap as .team-grid, so the rule before the paragraph lands
   exactly on the left edge of the founder note card below it. */
.team-head {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--s-5);
  align-items: end;
  margin-bottom: var(--s-12);
}

/* Sits on the --t-3xl step, between the h2 and h3 of the type scale */
.team-head h2 {
  margin-top: var(--s-4);
  font-size: var(--t-3xl);
  line-height: 1.16;
}

.team-head-note {
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 1px solid var(--line-2);
  color: var(--ink-3);
  font-size: var(--t-md);
  line-height: 1.7;
}

.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--s-5);
  align-items: stretch;
}

.team-card,
.team-note {
  display: grid;
  align-content: start;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
}

/* ---- person card ---- */

.team-person {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
}

.team-avatar {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 3px solid var(--bg-elev);
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--brand-ink);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.team-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.team-id h3 {
  font-size: clamp(1.35rem, 1.2vw + 1.1rem, 1.7rem);
  line-height: 1.15;
}

.team-role {
  display: inline-block;
  margin-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--brand-ink);
  font-size: var(--t-sm);
  font-weight: 600;
  font-style: italic;
}

.team-facts {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.team-facts li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
}

.fact-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-tint);
  color: var(--brand-ink);
}

.fact-icon svg {
  width: 17px;
  height: 17px;
}

.fact-copy {
  display: grid;
  gap: 2px;
  padding-top: 2px;
}

.fact-copy > span {
  color: var(--ink-3);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.fact-copy strong {
  font-size: var(--t-sm);
  font-weight: 650;
  line-height: 1.35;
}

.team-bio {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* ---- founder note ---- */

.team-note {
  gap: var(--s-4);
}

/* Grid items stretch by default, which was pulling the pill across the card */
.team-note .section-kicker {
  justify-self: start;
}

.team-note h3 {
  font-size: clamp(1.5rem, 1.8vw + 1.1rem, 2.1rem);
  line-height: 1.18;
}

.team-note > p {
  color: var(--ink-3);
  font-size: var(--t-md);
  line-height: 1.7;
}

.team-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-2);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  text-align: center;
}

.team-values > div {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.value-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--brand-ink);
}

.value-icon svg {
  width: 19px;
  height: 19px;
}

.team-values strong {
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.team-values > div > span:last-child {
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.45;
}

.founder-sign {
  display: grid;
  gap: 0;
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.sign-name {
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 0.8vw + 1.62rem, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.sign-role {
  color: var(--ink-3);
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------------------
   16f. Pricing setup note
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */

.faq {
  max-width: 780px;
  margin-inline: auto;
  display: grid;
  gap: var(--s-3);
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  transition: border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}

.faq-item.is-open {
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
}

.faq h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.35;
  text-align: left;
  transition: color var(--dur-1) var(--ease);
}

.faq-q:hover {
  color: var(--brand-ink);
}

.faq-q svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  transition: transform var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}

.faq-item.is-open .faq-q svg {
  transform: rotate(180deg);
  color: var(--brand-ink);
}

/* 0fr → 1fr animates to the content's natural height with no JS measurement,
   so the panel can never be left stranded at the wrong size. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--dur-3) var(--ease),
    visibility 0s linear var(--dur-3);
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--dur-3) var(--ease),
    visibility 0s linear 0s;
}

.faq-a-inner {
  overflow: hidden;
}

.faq-a p {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.66;
}

/* --------------------------------------------------------------------------
   18. Contact
   -------------------------------------------------------------------------- */

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-tint);
}

.contact-card h2 {
  margin-bottom: var(--s-4);
}

.contact-card > div > p {
  color: var(--ink-3);
  font-size: var(--t-md);
  line-height: 1.66;
}

.contact-points {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.contact-points span {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
}

.contact-points span::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background-color: var(--brand);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

.contact-form {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
}

.field {
  display: grid;
  gap: var(--s-2);
}

.field > label {
  font-size: var(--t-sm);
  font-weight: 650;
}

.field .optional {
  color: var(--ink-3);
  font-weight: 500;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 11px var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: var(--t-sm);
  transition: border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ink-3);
  opacity: 0.75;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form select:focus-visible {
  outline: none;
  border-color: var(--brand);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form select {
  appearance: none;
  padding-right: var(--s-10);
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 15px;
}

/* Inline validation: only after a failed submit attempt */
.field-error {
  display: none;
  color: #b23b2c;
  font-size: var(--t-xs);
  font-weight: 600;
}

:root[data-theme="dark"] .field-error {
  color: #f0a79c;
}

.field.has-error .field-error {
  display: block;
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: #b23b2c;
}

.contact-form small {
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.5;
}

/* Honeypot: hidden from humans, visible to naive bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form button[type="submit"] {
  justify-self: start;
  padding-inline: var(--s-8);
}

button[data-loading="true"] {
  pointer-events: none;
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-16) var(--s-10);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
}

.footer-brand-col {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  max-width: 34ch;
}

.footer-blurb {
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.footer-brand-col .btn {
  width: fit-content;
}

.footer-col {
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.footer-col h2 {
  margin-bottom: var(--s-1);
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.footer-col a {
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 550;
  transition: color var(--dur-1) var(--ease);
}

.footer-col a:hover {
  color: var(--brand-ink);
}

.footer-place {
  margin-top: var(--s-2);
  color: var(--ink-3);
  font-size: var(--t-xs);
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.footer-legal a:hover {
  color: var(--brand-ink);
}

/* --------------------------------------------------------------------------
   20. Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 56px);
  background: rgba(5, 18, 14, 0.86);
  opacity: 0;
  visibility: hidden;
  /* visibility flips instantly on open (so the close button can take focus)
     and only waits for the fade on close */
  transition: opacity var(--dur-2) var(--ease),
    visibility 0s linear var(--dur-2);
}

@supports (backdrop-filter: blur(1px)) {
  .lightbox {
    backdrop-filter: blur(6px);
  }
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear 0s;
}

.lightbox-shell {
  max-width: min(1100px, 100%);
}

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-3);
}

#lightboxCaption {
  margin-top: var(--s-4);
  color: rgba(234, 243, 238, 0.86);
  font-size: var(--t-sm);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  color: var(--ink);
  transition: transform var(--dur-1) var(--ease);
}

.lightbox-close:hover {
  transform: scale(1.06);
}

.lightbox-close svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   21. Sticky mobile CTA
   -------------------------------------------------------------------------- */

.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  padding: var(--s-3) var(--gutter)
    calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .mobile-cta {
    backdrop-filter: blur(14px);
  }
}

.mobile-cta.is-visible {
  transform: translateY(0);
}

.mobile-cta .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   22. Standalone pages (SEO landers, thank-you)
   -------------------------------------------------------------------------- */

.simple-page {
  display: grid;
  place-items: center;
  min-height: 74vh;
  padding-block: clamp(48px, 8vw, 96px);
}

.simple-card {
  width: min(720px, 100%);
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-elev);
  box-shadow: var(--shadow-2);
  text-align: center;
}

.simple-card h1 {
  margin: var(--s-4) 0 var(--s-5);
  font-size: var(--t-3xl);
}

.simple-card p {
  color: var(--ink-3);
  font-size: var(--t-md);
  line-height: 1.7;
}

.simple-card p + p {
  margin-top: var(--s-4);
}

.simple-card .btn {
  margin-top: var(--s-8);
}

/* --------------------------------------------------------------------------
   23. Scroll reveal
   -------------------------------------------------------------------------- */

/* Scoped to .js so content is never hidden when scripting is unavailable */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  will-change: auto;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero-grid,
  .split-head,
  .dark-grid,
  .contact-card,
  .lead-card,
  .example-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-stage {
    max-width: 620px;
  }

  .split-head {
    align-items: start;
  }

  .problem-grid,
  .timeline,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .proof-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .team-grid,
  .team-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .team-head-note {
    padding-left: 0;
    padding-top: var(--s-4);
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }

  .team-decor svg {
    width: 140px;
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    max-width: 46ch;
  }

  /* Below the subgrid breakpoint, pin the CTA to the bottom of each card so
     the buttons in a row still line up. */
  .plan > .btn {
    order: 5;
    margin-top: auto;
  }

  .plan-body {
    flex: 0 1 auto;
    margin-bottom: var(--s-6);
  }

  .plan-meta {
    margin-top: 0;
  }

  /* Detailed plan cards need real width: two up, with the last spanning */
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--s-8);
  }

  .plan-grid > :last-child {
    grid-column: 1 / -1;
  }

  .assurances {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .example-panel .example-visual {
    order: -1;
  }
}

@media (max-width: 920px) {
  .solution-grid,
  .case-grid,
  .screenshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solution-grid > :last-child,
  .case-grid > :last-child {
    grid-column: 1 / -1;
  }
}

/* The primary nav collapses early: five links plus a long CTA and the theme
   toggle need ~1024px before they stop crowding each other. */
@media (max-width: 1024px) {
  :root {
    --header-h: 62px;
  }

  .menu-btn {
    display: grid;
    place-items: center;
  }

  .nav-links {
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--header-h) + var(--s-2));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-1);
    padding: var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-elev);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-2) var(--ease),
      transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }

  .nav-links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-2) var(--ease),
      transform var(--dur-2) var(--ease), visibility 0s linear 0s;
  }

  .nav-links a:not(.nav-cta) {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
  }

  .nav-cta {
    margin-left: 0;
    margin-top: var(--s-2);
    padding: var(--s-3) var(--s-4);
    text-align: center;
  }

}

@media (max-width: 860px) {
  .top-alert {
    font-size: 0.72rem;
  }

  /* Drop the second message and its separator dot together */
  .top-alert-go {
    display: none;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  .mobile-cta {
    display: block;
  }

  /* Keep the sticky bar from covering the last of the page */
  body {
    padding-bottom: 76px;
  }
}

@media (max-width: 700px) {
  .comparison,
  .guide-document-list,
  .assurances {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-grid,
  .case-grid,
  .plan-grid,
  .screenshot-grid,
  .problem-grid,
  .timeline,
  .stack-list,
  .steps,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shift-head {
    display: none;
  }

  .shift-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }

  .shift-arrow {
    rotate: 90deg;
  }

  .shift-gain {
    justify-self: start;
  }

  .problem-result {
    flex-direction: column;
    align-items: stretch;
  }

  .team-values {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }

  .team-decor {
    display: none;
  }

  .hero-stats {
    gap: var(--s-4) var(--s-6);
  }

  .contact-form button[type="submit"] {
    justify-self: stretch;
  }

  /* Keep the blurred glow inside the gutter on small screens */
  .app-glow {
    inset: -8% 0 6%;
  }

  /* Comfortable touch targets */
  .footer-col a,
  .contact-direct {
    display: inline-block;
    padding-block: 7px;
  }

  .icon-btn {
    width: 42px;
    height: 42px;
  }

  .problem-pick {
    padding-block: 10px;
  }

  .guide-row {
    flex-wrap: wrap;
  }

  .guide-row .btn {
    width: 100%;
  }

  .solution-grid > :last-child,
  .case-grid > :last-child,
  .plan-grid > :last-child {
    grid-column: auto;
  }

  .hero h1 {
    max-width: none;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  /* The sidebar is decoration, not navigation: drop it on small screens */
  .app-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-nav {
    display: none;
  }

  .badge {
    position: static;
    display: inline-flex;
    width: fit-content;
    margin-bottom: var(--s-4);
  }

  /* Badge is back in flow, so the reserved space is no longer needed */
  .solution-card.featured h3 {
    padding-right: 0;
  }

  .brand-text small {
    display: none;
  }

  .problem-num {
    margin-bottom: var(--s-4);
  }

  .guide-document {
    min-height: 0;
  }

  .guide-document h3 {
    margin-top: var(--s-8);
  }
}

/* --------------------------------------------------------------------------
   25. Motion & print
   -------------------------------------------------------------------------- */

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

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header,
  .top-alert,
  .mobile-cta,
  .lightbox {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  .card,
  .problem-card,
  .solution-card,
  .case-card,
  .plan,
  .timeline-item {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* Same Tuesday, Twice responsive layout */
@media (max-width: 980px) {
  .day-demo-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .day-replay {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .day-mode-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  .day-demo-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .day-demo-summary p {
    grid-column: 1 / -1;
  }

  .day-ruler {
    right: 112px;
    left: 242px;
  }

  .day-row {
    grid-template-columns: 28px 192px minmax(190px, 1fr) 100px;
    gap: 12px;
  }

  .day-row-copy strong {
    font-size: 0.73rem;
  }

  .day-gain {
    font-size: 0.6rem;
  }
}

@media (max-width: 760px) {
  .day-demo-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--s-4);
  }

  .day-mode-toggle {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .day-mode-button {
    width: 100%;
  }

  .day-replay {
    grid-column: 2;
    grid-row: 1;
    padding-inline: 10px;
  }

  .day-demo-summary {
    gap: var(--s-4);
    padding: var(--s-4);
  }

  .day-demo-summary strong {
    font-size: var(--t-base);
  }

  .day-stage {
    margin: 0 var(--s-4);
    padding-top: 18px;
  }

  .day-ruler,
  .day-evening,
  .day-progress,
  .day-end-marker {
    display: none;
  }

  .day-rows {
    gap: 10px;
  }

  .day-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px 12px;
    min-height: 0;
    padding: 13px 10px;
    border-color: rgba(234, 243, 238, 0.09);
    background: rgba(255, 255, 255, 0.025);
  }

  .day-row-number {
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 3px;
  }

  .day-row-copy {
    grid-column: 2 / -1;
  }

  .day-track {
    grid-column: 2;
    height: 24px;
  }

  .day-gain {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
  }

  .day-demo-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
    margin: 0 var(--s-4);
  }

  .day-proof-seal {
    min-width: 0;
  }

  .shift-note {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .day-demo-context strong {
    font-size: 0.88rem;
  }

  .day-replay {
    width: 36px;
    padding: 0;
    font-size: 0;
  }

  .day-replay svg {
    width: 15px;
    height: 15px;
  }

  .day-demo-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .day-demo-summary p {
    grid-column: auto;
  }

  .day-row {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .day-row-copy,
  .day-track,
  .day-gain {
    grid-column: 2;
  }

  .day-gain {
    grid-row: auto;
    justify-self: start;
  }
}

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

@media (max-width: 760px) {
  .day-bar-after b {
    font-size: 0;
  }

  .day-bar-after b::after {
    content: "✓";
    font-size: 0.7rem;
    line-height: 1;
  }
}


/* ---- Map Table / Workbench proof section ---- */

.proof-mapbench-section {
  overflow: hidden;
}

.mapbench-demo {
  --map-mint: #8fe0bd;
  --map-mint-strong: #b6f0d4;
  --map-cream: #eaf3ee;
  --map-ink: #0c2018;
  --map-muted: rgba(234, 243, 238, 0.64);
  --map-faint: rgba(234, 243, 238, 0.12);
  --map-faint-2: rgba(234, 243, 238, 0.18);
  --map-warm: #f2d79f;
  position: relative;
  display: grid;
  gap: clamp(18px, 2.6vw, 24px);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(143, 224, 189, 0.16);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(143, 224, 189, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(9, 33, 25, 0.96), rgba(8, 30, 22, 0.98));
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.24);
}

.mapbench-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(234, 243, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 243, 238, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 20% 20%, rgba(143, 224, 189, 0.12), transparent 26%);
  background-size: 24px 24px, 24px 24px, auto;
  opacity: 0.35;
  pointer-events: none;
}

.mapbench-demo > * {
  position: relative;
  z-index: 1;
}

.mapbench-toolbar,
.mapbench-summary,
.mapbench-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.mapbench-context {
  display: grid;
  gap: 4px;
}

.mapbench-context strong,
.mapbench-summary strong,
.mapbench-meter strong,
.mapbench-proof-seal strong {
  color: var(--map-cream);
}

.mapbench-eyebrow,
.mapbench-summary-label,
.mapbench-meter-label,
.mapbench-dashboard-kicker,
.mapbench-panel-label,
.artifact-type,
.proof-map-grid-head,
.mapbench-proof-seal > div span {
  color: var(--map-muted);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.mapbench-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--map-faint-2);
  border-radius: 999px;
  background: rgba(5, 18, 14, 0.36);
}

.mapbench-mode-button,
.mapbench-replay {
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.mapbench-mode-button {
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--map-muted);
  font-weight: 650;
  font-size: 0.9rem;
}

.mapbench-mode-button:hover,
.mapbench-mode-button.is-active {
  background: rgba(143, 224, 189, 0.12);
  color: var(--map-cream);
}

.mapbench-demo.is-after .mapbench-mode-button.is-active {
  color: var(--map-mint-strong);
}

.mapbench-replay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--map-faint-2);
  border-radius: 999px;
  background: rgba(5, 18, 14, 0.34);
  color: var(--map-cream);
  font-weight: 650;
}

.mapbench-replay:hover {
  border-color: rgba(143, 224, 189, 0.36);
  color: var(--map-mint-strong);
}

.mapbench-replay svg {
  width: 16px;
  height: 16px;
}

.mapbench-replay.is-spinning svg {
  animation: mapbench-spin 0.65s var(--ease);
}

@keyframes mapbench-spin {
  to { transform: rotate(360deg); }
}

.mapbench-mode-button:focus-visible,
.mapbench-replay:focus-visible {
  outline: 2px solid var(--map-mint);
  outline-offset: 2px;
}

.mapbench-summary {
  align-items: flex-start;
  gap: 18px 28px;
  padding: 18px 20px;
  border: 1px solid rgba(143, 224, 189, 0.14);
  border-radius: 22px;
  background: rgba(5, 18, 14, 0.34);
}

.mapbench-summary > div {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.mapbench-summary p {
  flex: 1 1 360px;
  margin: 0;
  color: var(--map-muted);
}

.mapbench-stage {
  display: grid;
  grid-template-columns: minmax(100px, 132px) minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
  align-items: stretch;
}

.mapbench-meter {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px 18px;
  border-radius: 24px;
  border: 1px solid rgba(143, 224, 189, 0.12);
  background: linear-gradient(180deg, rgba(9, 29, 22, 0.86), rgba(7, 20, 16, 0.96));
}

.mapbench-meter-rail {
  display: grid;
  gap: 10px;
}

.mapbench-meter-band {
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(234, 243, 238, 0.08);
  background: linear-gradient(180deg, rgba(234, 243, 238, 0.05), rgba(234, 243, 238, 0.01));
  position: relative;
  overflow: hidden;
}

.mapbench-meter-band::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(143, 224, 189, 0.95), rgba(143, 224, 189, 0.25));
  transition: height 540ms var(--ease);
}

.mapbench-meter-band.is-on::before {
  height: 100%;
}

.mapbench-meter-band.is-risk::before {
  background: linear-gradient(180deg, rgba(242, 215, 159, 0.9), rgba(242, 215, 159, 0.3));
}

.mapbench-meter p {
  margin: 0;
  color: var(--map-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.mapbench-canvas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(320px, 0.9fr);
  gap: clamp(18px, 2.4vw, 26px);
  min-height: 510px;
}

.mapbench-table,
.mapbench-dashboard {
  border-radius: 28px;
  overflow: hidden;
}

.mapbench-table {
  position: relative;
  min-height: 510px;
  padding: 24px;
  background:
    linear-gradient(0deg, rgba(6, 18, 14, 0.28), rgba(6, 18, 14, 0.28)),
    radial-gradient(circle at 16% 18%, rgba(143, 224, 189, 0.15), transparent 32%),
    linear-gradient(135deg, rgba(13, 52, 39, 0.98), rgba(8, 31, 24, 0.98));
  box-shadow: inset 0 1px 0 rgba(234, 243, 238, 0.08), inset 0 0 0 1px rgba(234, 243, 238, 0.06);
  transform-origin: center;
  transform: perspective(1200px) rotateX(10deg) rotateZ(-1.6deg);
  transition: transform 840ms var(--ease), box-shadow 840ms var(--ease), background 840ms var(--ease);
}

.mapbench-demo.is-after .mapbench-table {
  transform: perspective(1200px) rotateX(0deg) rotateZ(0deg);
  background:
    linear-gradient(0deg, rgba(6, 18, 14, 0.18), rgba(6, 18, 14, 0.18)),
    radial-gradient(circle at 16% 18%, rgba(143, 224, 189, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(15, 58, 44, 0.98), rgba(8, 31, 24, 0.98));
}

.mapbench-table::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(234, 243, 238, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 243, 238, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 25% 25%, rgba(234, 243, 238, 0.06), transparent 24%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='rgba(234,243,238,0.12)' stroke-width='1'%3E%3Cpath d='M40 180c22-48 84-74 130-54s92 10 150-38'/%3E%3Cpath d='M12 130c28-30 78-44 112-24s76 18 154-20'/%3E%3Cpath d='M18 236c28-18 70-16 114 6s92 18 170-24'/%3E%3Cpath d='M40 280c28-18 70-16 114 6s92 18 170-24'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 28px 28px, 28px 28px, auto, 360px 360px;
  background-repeat: repeat, repeat, no-repeat, repeat;
  opacity: 0.46;
  pointer-events: none;
}

.mapbench-table-ruler {
  position: absolute;
  display: block;
  background: linear-gradient(180deg, rgba(234, 243, 238, 0.12), rgba(234, 243, 238, 0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.mapbench-table-ruler::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 12px, rgba(234,243,238,0.20) 12px 13px);
  opacity: 0.42;
}

.mapbench-table-ruler.top {
  top: 0;
  left: 48px;
  right: 48px;
  height: 16px;
  border-radius: 0 0 10px 10px;
}

.mapbench-table-ruler.side {
  top: 48px;
  bottom: 48px;
  right: 0;
  width: 16px;
  border-radius: 10px 0 0 10px;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top right;
  display: none;
}

.bench-artifact {
  position: absolute;
  display: grid;
  gap: 8px;
  width: min(44%, 240px);
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid rgba(8, 36, 28, 0.12);
  color: var(--map-ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244, 247, 242, 0.95));
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.08);
  transform: translateZ(0) rotate(var(--artifact-rotate, 0deg));
  transition: transform 680ms var(--ease), opacity 680ms var(--ease), box-shadow 680ms var(--ease), filter 680ms var(--ease);
}

.bench-artifact strong,
.mapbench-panel strong,
.proof-map-title {
  letter-spacing: -0.01em;
}

.bench-artifact ul,
.bench-artifact p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(12, 32, 24, 0.76);
  line-height: 1.55;
}

.bench-artifact ul {
  padding-left: 18px;
}

.artifact-pin,
.artifact-clip {
  position: absolute;
}

.artifact-pin {
  top: 10px;
  right: 12px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f1d87f, #c89d36);
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

.artifact-clip {
  top: -8px;
  left: 18px;
  width: 46px;
  height: 18px;
  border: 2px solid rgba(23, 78, 60, 0.4);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.artifact-status { top: 58px; left: 38px; --artifact-rotate: -7deg; }
.artifact-reminder { top: 42px; right: 70px; width: 208px; --artifact-rotate: 6deg; background: linear-gradient(180deg, #fbf3c8, #f6eaa9); }
.artifact-intake { top: 216px; left: 126px; width: 238px; --artifact-rotate: 4deg; }
.artifact-ownership { bottom: 58px; left: 48px; width: 214px; --artifact-rotate: -5deg; background: linear-gradient(180deg, #eef7f1, #dceee4); }
.artifact-report { right: 46px; bottom: 58px; width: 226px; --artifact-rotate: 8deg; background: linear-gradient(180deg, #f8fbf7, #e6efe6); }

.artifact-scribble {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: rgba(12, 32, 24, 0.72);
}

.mapbench-reticle {
  position: absolute;
  border: 1px solid rgba(143, 224, 189, 0.55);
  border-radius: 16px;
  box-shadow: 0 0 0 999px rgba(3, 13, 10, 0.10);
  pointer-events: none;
  opacity: 0;
  transition: left 460ms var(--ease), top 460ms var(--ease), width 460ms var(--ease), height 460ms var(--ease), opacity 280ms var(--ease);
}

.mapbench-reticle::before,
.mapbench-reticle::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(143, 224, 189, 0.44);
  border-radius: 12px;
}

.mapbench-dashboard {
  display: grid;
  grid-template-rows: auto repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(6, 18, 14, 0.52), rgba(6, 18, 14, 0.24));
  border: 1px solid rgba(143, 224, 189, 0.12);
  box-shadow: inset 0 1px 0 rgba(234, 243, 238, 0.05);
}

.mapbench-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(143, 224, 189, 0.12);
  background: rgba(8, 28, 21, 0.54);
}

.mapbench-demo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(143, 224, 189, 0.16);
  background: rgba(143, 224, 189, 0.10);
  color: var(--map-mint-strong);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.mapbench-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px dashed rgba(143, 224, 189, 0.18);
  background: rgba(5, 18, 14, 0.18);
  color: var(--map-cream);
  opacity: 0.56;
  transform: translateY(10px) scale(0.985);
  transition: transform 560ms var(--ease), opacity 560ms var(--ease), background 560ms var(--ease), border-color 560ms var(--ease), box-shadow 560ms var(--ease);
}

.mapbench-panel p {
  margin: 0;
  color: var(--map-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.mapbench-panel.is-ready {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-style: solid;
  border-color: rgba(143, 224, 189, 0.22);
  background: linear-gradient(180deg, rgba(10, 40, 30, 0.86), rgba(9, 30, 23, 0.58));
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
}

.mapbench-panel.is-active {
  box-shadow: 0 0 0 1px rgba(143, 224, 189, 0.20), 0 14px 28px rgba(0,0,0,0.18);
}

.panel-project-list,
.panel-owner-list,
.panel-report-list,
.panel-chip-list,
.panel-timeline {
  display: grid;
  gap: 8px;
}

.panel-project-list div,
.panel-owner-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--map-muted);
  font-size: 0.82rem;
}

.panel-chip-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel-chip-list span,
.panel-report-list span,
.panel-timeline span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(143, 224, 189, 0.10);
  color: var(--map-cream);
  font-size: 0.78rem;
}

.panel-timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.pill.waiting { background: rgba(245, 200, 106, 0.14); color: #f6d88c; }
.pill.track { background: rgba(143, 224, 189, 0.14); color: var(--map-mint-strong); }
.pill.done { background: rgba(99, 182, 222, 0.16); color: #b7def2; }

.mapbench-demo.is-after .bench-artifact.is-digitized {
  opacity: 0.08;
  filter: blur(2px);
  box-shadow: none;
}

.mapbench-demo.is-after .bench-artifact.is-active {
  opacity: 0.78;
  filter: none;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(143, 224, 189, 0.28);
  transform: translateY(-4px) rotate(var(--artifact-rotate, 0deg));
}

.mapbench-demo.is-before .bench-artifact {
  opacity: 1;
}

.mapbench-demo.is-before .bench-artifact.is-active {
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(143, 224, 189, 0.25);
}

.proof-map-grid {
  display: grid;
  gap: 10px;
}

.proof-map-grid-head,
.proof-map-row {
  display: grid;
  grid-template-columns: 1.1fr 1.15fr 0.62fr;
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
}

.proof-map-grid-head {
  padding: 0 14px 6px;
}

.proof-map-row {
  padding: 16px 18px;
  border: 1px solid rgba(143, 224, 189, 0.12);
  border-radius: 18px;
  background: rgba(6, 18, 14, 0.28);
  color: var(--map-muted);
  transition: border-color 320ms var(--ease), background 320ms var(--ease), transform 320ms var(--ease), color 320ms var(--ease);
}

.proof-map-row p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.proof-map-title,
.proof-map-impact {
  color: var(--map-cream);
}

.proof-map-title {
  font-size: 0.96rem;
}

.proof-map-impact {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(143, 224, 189, 0.10);
  font-size: 0.82rem;
}

.proof-map-row.is-active,
.proof-map-row.is-done {
  border-color: rgba(143, 224, 189, 0.24);
  background: rgba(10, 38, 29, 0.52);
  color: var(--map-cream);
}

.proof-map-row.is-active {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
}

.mapbench-footer {
  padding-top: 4px;
}

.mapbench-proof-seal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(143, 224, 189, 0.16);
  background: rgba(5, 18, 14, 0.34);
}

.mapbench-proof-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(143, 224, 189, 0.10);
  color: var(--map-mint-strong);
}

.mapbench-proof-icon svg {
  width: 18px;
  height: 18px;
}

.mapbench-proof-seal > div {
  display: grid;
  gap: 4px;
}

.mapbench-demo .shift-note {
  max-width: 54ch;
  margin: 0;
  color: var(--map-muted);
}

@media (max-width: 1100px) {
  .mapbench-canvas {
    grid-template-columns: 1fr;
  }

  .mapbench-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, minmax(0, auto));
  }

  .mapbench-dashboard-head {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .mapbench-stage {
    grid-template-columns: 1fr;
  }

  .mapbench-meter {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .mapbench-meter-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mapbench-meter-band {
    height: 22px;
  }

  .mapbench-meter-band::before {
    inset: 0 auto 0 0;
    width: 0%;
    height: 100%;
    transition-property: width;
  }

  .mapbench-meter-band.is-on::before {
    width: 100%;
  }

  .proof-map-grid-head,
  .proof-map-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .mapbench-demo {
    padding: 18px;
    border-radius: 24px;
  }

  .mapbench-toolbar,
  .mapbench-summary,
  .mapbench-footer {
    align-items: stretch;
  }

  .mapbench-mode-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .mapbench-mode-button {
    flex: 1 1 50%;
    font-size: 0.82rem;
  }

  .mapbench-canvas,
  .mapbench-table {
    min-height: 0;
  }

  .mapbench-table {
    padding: 18px;
    min-height: 640px;
    transform: perspective(1000px) rotateX(6deg) rotateZ(0deg);
  }

  .bench-artifact {
    width: min(100%, 100%);
    max-width: none;
  }

  .artifact-status { top: 34px; left: 18px; right: 18px; width: auto; }
  .artifact-reminder { top: 180px; left: 34px; right: 44px; width: auto; }
  .artifact-intake { top: 296px; left: 26px; right: 26px; width: auto; }
  .artifact-ownership { top: 444px; left: 18px; right: 42px; bottom: auto; width: auto; }
  .artifact-report { top: 540px; left: 36px; right: 26px; bottom: auto; width: auto; }

  .mapbench-dashboard {
    grid-template-columns: 1fr;
  }

  .panel-chip-list,
  .panel-timeline {
    grid-template-columns: 1fr;
  }
}

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


/* ---- Compact Map Table proof section, v2 ---- */

.proof-compact-section {
  overflow: hidden;
}

.proof-head-compact {
  margin-bottom: clamp(24px, 3vw, 34px);
}

.proof-head-compact > p {
  max-width: 42ch;
}

.compact-bench {
  --cb-mint: #8fe0bd;
  --cb-mint-strong: #b6f0d4;
  --cb-cream: #eaf3ee;
  --cb-muted: rgba(234, 243, 238, 0.64);
  --cb-line: rgba(234, 243, 238, 0.13);
  position: relative;
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid rgba(143, 224, 189, 0.17);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(143, 224, 189, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(8, 34, 25, 0.98), rgba(7, 27, 20, 0.98));
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.22);
}

.compact-bench::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(234, 243, 238, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 243, 238, 0.025) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.42;
  pointer-events: none;
}

.compact-bench > * {
  position: relative;
  z-index: 1;
}

.compact-bench-topbar,
.compact-bench-controls,
.compact-proof-result,
.compact-dashboard-head,
.compact-app-card-head,
.compact-app-footer,
.app-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.compact-bench-topbar {
  min-height: 42px;
}

.compact-bench-project {
  display: grid;
  gap: 3px;
}

.compact-bench-project strong,
.compact-proof-result strong,
.compact-dashboard-head strong,
.compact-app-card strong {
  color: var(--cb-cream);
}

.compact-bench-label,
.workbench-caption span,
.compact-dashboard-head span:first-child,
.compact-app-card-head span:first-child,
.paper-kicker {
  color: var(--cb-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.compact-bench-controls {
  justify-content: flex-end;
}

.compact-bench-status {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(143, 224, 189, 0.10);
  color: var(--cb-mint-strong);
  font-size: 0.78rem;
  font-weight: 700;
}

.compact-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid var(--cb-line);
  border-radius: 999px;
  background: rgba(3, 15, 11, 0.32);
  color: var(--cb-cream);
  cursor: pointer;
  font-weight: 650;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.compact-replay:hover {
  color: var(--cb-mint-strong);
  border-color: rgba(143, 224, 189, 0.34);
  background: rgba(143, 224, 189, 0.08);
}

.compact-replay:focus-visible,
.compact-proof-tab:focus-visible {
  outline: 2px solid var(--cb-mint);
  outline-offset: 2px;
}

.compact-replay svg {
  width: 15px;
  height: 15px;
}

.compact-replay.is-spinning svg {
  animation: compact-replay-spin 620ms ease;
}

@keyframes compact-replay-spin {
  to { transform: rotate(360deg); }
}

.compact-bench-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 0.92fr);
  gap: 14px;
  align-items: stretch;
  min-height: 380px;
}

.compact-workbench,
.compact-dashboard {
  border-radius: 20px;
  overflow: hidden;
  min-height: 380px;
}

.compact-workbench {
  position: relative;
  padding: 20px;
  background:
    linear-gradient(0deg, rgba(22, 24, 15, 0.18), rgba(22, 24, 15, 0.18)),
    linear-gradient(135deg, #625642, #3f4634 52%, #2e4738);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 18px 30px rgba(255, 255, 255, 0.025);
}

.workbench-grain {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(4deg, transparent 0 18px, rgba(255,255,255,0.025) 18px 19px),
    repeating-linear-gradient(92deg, transparent 0 72px, rgba(0,0,0,0.08) 72px 74px);
  opacity: 0.65;
}

.workbench-caption {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 4px;
  max-width: 260px;
}

.workbench-caption strong {
  color: rgba(255,255,255,0.92);
  font-size: 0.9rem;
}

.workbench-ruler {
  position: absolute;
  top: 18px;
  right: -12px;
  width: 170px;
  height: 25px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(54, 42, 22, 0.34) 11px 12px),
    linear-gradient(180deg, #d4b77c, #a9884d);
  box-shadow: 0 6px 12px rgba(0,0,0,0.18);
  transform: rotate(5deg);
  opacity: 0.84;
}

.desk-paper {
  position: absolute;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(26, 49, 38, 0.14);
  background: linear-gradient(180deg, #fbfbf4, #e8eee5);
  color: #163126;
  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.22);
}

.paper-back {
  width: 185px;
  min-height: 108px;
  padding: 15px;
  border-radius: 14px;
  opacity: 0.6;
  transition: opacity 360ms ease, transform 360ms ease;
}

.paper-back span {
  color: rgba(22,49,38,0.60);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.paper-back strong {
  font-size: 0.84rem;
}

.paper-back i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(22,49,38,0.10);
}

.paper-a {
  top: 94px;
  left: 28px;
  transform: rotate(-7deg);
}

.paper-b {
  right: 30px;
  bottom: 25px;
  transform: rotate(8deg);
}

.paper-active {
  top: 118px;
  left: 50%;
  z-index: 3;
  width: min(58%, 265px);
  min-height: 188px;
  padding: 20px;
  border-radius: 17px;
  transform: translateX(-50%) rotate(-1deg);
  transition: transform 420ms ease, opacity 300ms ease, box-shadow 420ms ease;
}

.compact-bench.is-changing .paper-active {
  opacity: 0.42;
  transform: translateX(-50%) translateY(-3px) scale(0.97) rotate(-1deg);
}

.paper-active > strong {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.paper-body {
  display: grid;
  gap: 9px;
  margin-top: 5px;
}

.paper-body span {
  display: flex;
  align-items: center;
  min-height: 27px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(22,49,38,0.075);
  font-size: 0.8rem;
}

.paper-body .paper-note {
  color: #74572a;
  background: #f5e9bd;
  font-family: var(--font-script);
  font-size: 0.95rem;
}

.paper-pin {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f3d875, #bd8f2f);
  box-shadow: 0 2px 4px rgba(0,0,0,0.23);
}

.compact-scan {
  position: absolute;
  z-index: 5;
  top: 111px;
  left: 50%;
  width: min(62%, 292px);
  height: 205px;
  transform: translateX(-50%);
  border: 1px solid rgba(143, 224, 189, 0.44);
  border-radius: 20px;
  opacity: 0.7;
  pointer-events: none;
}

.compact-scan::before,
.compact-scan::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border-color: var(--cb-mint);
}

.compact-scan::before {
  top: -3px;
  left: -3px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.compact-scan::after {
  right: -3px;
  bottom: -3px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.compact-scan span {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cb-mint), transparent);
  box-shadow: 0 0 12px rgba(143, 224, 189, 0.6);
  opacity: 0;
}

.compact-bench.is-changing .compact-scan span {
  opacity: 1;
  animation: compact-scan-pass 680ms ease both;
}

@keyframes compact-scan-pass {
  from { transform: translateY(0); }
  to { transform: translateY(170px); }
}

.compact-transform {
  display: grid;
  place-items: center;
  position: relative;
  color: var(--cb-mint-strong);
}

.transform-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,224,189,0.52), transparent);
}

.transform-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cb-mint);
  box-shadow: 0 0 0 7px rgba(143,224,189,0.08);
  animation: compact-dot-pulse 2s ease-in-out infinite;
}

.transform-arrow {
  position: absolute;
  top: calc(50% + 18px);
  font-size: 1rem;
  opacity: 0.76;
}

@keyframes compact-dot-pulse {
  50% { box-shadow: 0 0 0 13px rgba(143,224,189,0.015); }
}

.compact-dashboard {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 16px;
  border: 1px solid rgba(143, 224, 189, 0.15);
  background: linear-gradient(180deg, rgba(8, 31, 24, 0.96), rgba(5, 22, 16, 0.98));
}

.compact-dashboard-head {
  padding: 4px 3px 13px;
}

.compact-dashboard-head > div {
  display: grid;
  gap: 4px;
}

.compact-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(143, 224, 189, 0.09);
  color: var(--cb-mint-strong) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compact-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cb-mint);
}

.compact-app-shell {
  display: grid;
  grid-template-columns: 44px 1fr;
  overflow: hidden;
  border: 1px solid rgba(234,243,238,0.10);
  border-radius: 16px;
  background: rgba(2, 12, 9, 0.34);
}

.compact-app-sidebar {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  padding: 16px 10px;
  border-right: 1px solid rgba(234,243,238,0.08);
  background: rgba(0,0,0,0.10);
}

.compact-app-sidebar span {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: rgba(234,243,238,0.08);
}

.compact-app-sidebar span.is-active {
  background: rgba(143,224,189,0.20);
  box-shadow: inset 0 0 0 1px rgba(143,224,189,0.20);
}

.compact-app-card {
  align-self: center;
  display: grid;
  gap: 18px;
  margin: 16px;
  padding: 18px;
  border: 1px solid rgba(143, 224, 189, 0.18);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(18, 65, 48, 0.72), rgba(9, 36, 27, 0.72));
  box-shadow: 0 16px 30px rgba(0,0,0,0.18);
  transition: opacity 260ms ease, transform 360ms ease;
}

.compact-bench.is-changing .compact-app-card {
  opacity: 0.52;
  transform: translateY(4px) scale(0.985);
}

.compact-app-card-head > div {
  display: grid;
  gap: 5px;
}

.compact-app-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(245, 200, 106, 0.14);
  color: #f5d78b;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.compact-app-content {
  display: grid;
  gap: 8px;
}

.app-line {
  min-height: 36px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(234, 243, 238, 0.055);
  color: var(--cb-muted);
  font-size: 0.79rem;
}

.app-line strong {
  font-size: 0.78rem;
  text-align: right;
}

.compact-app-footer {
  padding-top: 2px;
  color: var(--cb-muted);
  font-size: 0.74rem;
}

.compact-check {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(143,224,189,0.14);
  color: var(--cb-mint-strong);
  font-weight: 800;
}

.compact-proof-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.compact-proof-tab {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(234, 243, 238, 0.10);
  border-radius: 14px;
  background: rgba(3, 15, 11, 0.24);
  color: var(--cb-muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.compact-proof-tab:hover {
  color: var(--cb-cream);
  border-color: rgba(143,224,189,0.24);
}

.compact-proof-tab.is-active {
  transform: translateY(-2px);
  border-color: rgba(143,224,189,0.34);
  background: rgba(143,224,189,0.09);
  color: var(--cb-cream);
}

.compact-proof-tab span {
  color: var(--cb-mint-strong);
  font-size: 0.68rem;
  letter-spacing: 0.10em;
}

.compact-proof-tab strong {
  font-size: 0.84rem;
}

.compact-proof-tab small {
  overflow: hidden;
  color: var(--cb-muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-proof-result {
  align-items: flex-start;
  padding: 15px 17px;
  border: 1px solid rgba(143,224,189,0.14);
  border-radius: 16px;
  background: rgba(3, 15, 11, 0.27);
}

.compact-proof-result > div {
  display: grid;
  gap: 4px;
  min-width: 220px;
}

.compact-proof-result p {
  flex: 1 1 340px;
  margin: 0;
  color: var(--cb-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.compact-impact {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(143,224,189,0.10);
  color: var(--cb-mint-strong);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.compact-method-note {
  margin: 0;
  color: rgba(234, 243, 238, 0.50);
  font-size: 0.76rem;
  text-align: center;
}

@media (max-width: 980px) {
  .compact-bench-stage {
    grid-template-columns: 1fr 34px 1fr;
  }

  .paper-active {
    width: min(68%, 255px);
  }
}

@media (max-width: 760px) {
  .compact-bench-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .compact-workbench,
  .compact-dashboard {
    min-height: 330px;
  }

  .compact-transform {
    min-height: 28px;
  }

  .transform-line {
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(143,224,189,0.52), transparent);
  }

  .transform-arrow {
    top: auto;
    left: calc(50% + 17px);
    transform: rotate(90deg);
  }

  .compact-proof-strip {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .compact-proof-result {
    display: grid;
  }
}

@media (max-width: 560px) {
  .compact-bench {
    padding: 15px;
    border-radius: 20px;
  }

  .compact-bench-topbar {
    align-items: flex-start;
  }

  .compact-bench-controls {
    width: 100%;
    justify-content: space-between;
  }

  .compact-bench-status {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compact-workbench {
    min-height: 360px;
  }

  .paper-a {
    left: 18px;
  }

  .paper-b {
    right: 18px;
  }

  .paper-active {
    width: calc(100% - 52px);
  }

  .compact-scan {
    width: calc(100% - 36px);
  }

  .compact-app-shell {
    grid-template-columns: 36px 1fr;
  }

  .compact-app-card-head,
  .app-line {
    align-items: flex-start;
  }

  .compact-app-card-head {
    flex-direction: column;
  }

  .app-line {
    display: grid;
  }

  .app-line strong {
    text-align: left;
  }
}

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


/* ---- Compact bench refinement: closer to Envee software UI ---- */

.proof-head-compact > p {
  max-width: 42ch;
}

.compact-workbench {
  background:
    linear-gradient(0deg, rgba(33, 28, 17, 0.16), rgba(33, 28, 17, 0.16)),
    linear-gradient(135deg, #726147, #4f5a43 54%, #354739);
}

.workbench-caption strong {
  max-width: 26ch;
}

.paper-body {
  gap: 8px;
}

.paper-stack-line,
.paper-field {
  display: grid;
  gap: 4px;
}

.paper-stack-line label,
.paper-field label {
  color: rgba(22,49,38,0.52);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paper-stack-line span,
.paper-field span {
  display: block;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.8rem;
}

.paper-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}

.paper-chip-row b,
.paper-chip-row em {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.73rem;
}

.paper-chip-row b {
  background: rgba(22,49,38,0.08);
  color: #163126;
  font-weight: 700;
}

.paper-chip-row em,
.paper-sticky.is-yellow {
  background: #f5e9bd;
  color: #7a5c1e;
  font-family: var(--font-script);
  font-style: normal;
  font-size: 0.93rem;
}

.paper-sticky-grid,
.paper-two-col {
  display: grid;
  gap: 8px;
}

.paper-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paper-sticky {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 31px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(22,49,38,0.08);
  font-size: 0.78rem;
}

.paper-checklist-note {
  display: grid;
  gap: 7px;
}

.paper-checklist-note span {
  display: block;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(22,49,38,0.08);
  font-size: 0.78rem;
}

.compact-scan {
  border-color: rgba(143, 224, 189, 0.56);
  box-shadow: 0 0 0 1px rgba(143,224,189,0.14), inset 0 0 22px rgba(143,224,189,0.06);
}

.compact-transform {
  color: #c8dfd1;
}

.transform-line {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(143,224,189,0.35), rgba(143,224,189,0.72), rgba(143,224,189,0.35), transparent);
}

.transform-dot {
  width: 12px;
  height: 12px;
}

.compact-dashboard {
  background: linear-gradient(180deg, rgba(6, 27, 20, 0.98), rgba(4, 18, 13, 1));
}

.compact-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.compact-dashboard-head strong {
  font-size: 0.92rem;
}

.compact-app-shell {
  grid-template-columns: 38px 1fr;
  background: rgba(1, 9, 7, 0.42);
}

.compact-app-sidebar {
  gap: 10px;
  padding: 12px 8px;
}

.compact-app-sidebar span {
  width: 16px;
  height: 16px;
  border-radius: 6px;
}

.compact-app-card {
  gap: 12px;
  margin: 12px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(16, 56, 42, 0.80), rgba(9, 32, 24, 0.88));
}

.compact-app-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.compact-app-card-head strong {
  font-size: 0.95rem;
}

.compact-app-pill {
  background: rgba(245, 200, 106, 0.14);
  color: #f5d78b;
}

.compact-app-pill.is-success {
  background: rgba(143,224,189,0.14);
  color: #bdf2d8;
}

.compact-app-pill.is-soft {
  background: rgba(196, 226, 218, 0.14);
  color: #d7ece4;
}

.compact-app-pill.is-warning {
  background: rgba(245, 200, 106, 0.14);
  color: #f4d792;
}

.compact-app-content {
  gap: 10px;
}

.software-screen {
  display: grid;
  gap: 10px;
}

.ui-project-card,
.ui-task-card,
.ui-note-box,
.ui-mini-metric,
.ui-form-grid,
.ui-checklist-shell,
.ui-report-layout {
  border: 1px solid rgba(234,243,238,0.10);
  border-radius: 12px;
}

.ui-project-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(112px, 140px);
  gap: 12px;
  padding: 12px;
  background: rgba(234,243,238,0.035);
}

.ui-project-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #d1e9df, #afddd0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}

.ui-project-icon.is-dark {
  background: linear-gradient(180deg, #293b43, #162832);
}

.ui-project-main,
.ui-project-side {
  display: grid;
  gap: 6px;
}

.ui-project-main strong,
.ui-task-card strong,
.ui-mini-metric strong,
.ui-owner-row strong {
  color: var(--cb-cream);
}

.ui-project-main p,
.ui-task-card p,
.ui-note-box,
.ui-meta-row,
.ui-task-meta,
.ui-mini-metric label,
.ui-form-step,
.ui-form-field label,
.ui-owner-row span,
.ui-guidance-box p,
.ui-report-nav span,
.ui-snapshot-card span,
.ui-draft-field,
.ui-app-muted {
  margin: 0;
  color: var(--cb-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.ui-chip-row,
.ui-meta-row,
.ui-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ui-chip.is-green {
  background: rgba(143,224,189,0.14);
  color: #bdf2d8;
}

.ui-chip.is-soft {
  background: rgba(196, 226, 218, 0.14);
  color: #d7ece4;
}

.ui-text-link {
  color: #6fe0b5;
  font-size: 0.72rem;
  font-weight: 700;
}

.ui-project-side {
  align-content: start;
}

.ui-progress-text {
  color: #d4eee2;
  font-size: 0.72rem;
  font-weight: 700;
}

.ui-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(234,243,238,0.08);
  overflow: hidden;
}

.ui-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2fd193, #1f9d74);
}

.ui-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(234,243,238,0.08);
  color: var(--cb-cream);
}

.ui-action.is-primary {
  background: #169162;
}

.ui-note-box,
.ui-task-card,
.ui-mini-metric {
  padding: 10px 12px;
  background: rgba(234,243,238,0.035);
}

.ui-task-card.is-urgent {
  border-color: rgba(245, 200, 106, 0.22);
  background: rgba(245, 200, 106, 0.08);
}

.ui-mini-grid.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ui-mini-metric {
  gap: 4px;
  display: grid;
}

.ui-form-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ui-form-step {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(234,243,238,0.06);
}

.ui-form-step.is-active {
  background: rgba(143,224,189,0.16);
  color: var(--cb-cream);
}

.ui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  background: rgba(234,243,238,0.03);
}

.ui-form-field {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(234,243,238,0.05);
}

.ui-form-field div {
  color: var(--cb-cream);
  font-size: 0.8rem;
}

.ui-checklist-shell {
  display: grid;
  grid-template-columns: 122px 1fr;
  background: rgba(234,243,238,0.03);
  overflow: hidden;
}

.ui-checklist-nav {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-right: 1px solid rgba(234,243,238,0.08);
}

.ui-checklist-nav span {
  padding: 8px 9px;
  border-radius: 9px;
  color: var(--cb-muted);
  font-size: 0.7rem;
  background: rgba(234,243,238,0.04);
}

.ui-checklist-nav span.is-active {
  color: var(--cb-cream);
  background: rgba(143,224,189,0.12);
}

.ui-owner-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.ui-owner-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(234,243,238,0.05);
}

.ui-owner-row b {
  color: #bdf2d8;
  font-size: 0.7rem;
}

.ui-report-layout {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 92px;
  gap: 10px;
  padding: 10px;
  background: rgba(234,243,238,0.03);
}

.ui-report-nav,
.ui-snapshot-card {
  display: grid;
  gap: 8px;
}

.ui-report-nav span,
.ui-snapshot-card {
  padding: 8px;
  border-radius: 9px;
  background: rgba(234,243,238,0.04);
}

.ui-report-nav span.is-active {
  color: var(--cb-cream);
  background: rgba(143,224,189,0.12);
}

.ui-report-main {
  display: grid;
  gap: 8px;
}

.ui-guidance-box {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(245,200,106,0.12);
  border: 1px solid rgba(245,200,106,0.14);
}

.ui-guidance-box label,
.ui-snapshot-card label {
  color: #f4d792;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-guidance-box p {
  color: var(--cb-cream);
}

.ui-draft-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ui-draft-field {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(234,243,238,0.05);
}

.ui-snapshot-card {
  align-content: start;
  border: 1px solid rgba(234,243,238,0.08);
}

.ui-snapshot-card span {
  color: var(--cb-cream);
}

@media (max-width: 1100px) {
  .ui-project-card {
    grid-template-columns: 38px 1fr;
  }

  .ui-project-side {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .paper-two-col,
  .ui-form-grid,
  .ui-mini-grid.two-up,
  .ui-draft-grid {
    grid-template-columns: 1fr;
  }

  .ui-checklist-shell,
  .ui-report-layout {
    grid-template-columns: 1fr;
  }

  .ui-report-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ui-snapshot-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .ui-project-card {
    grid-template-columns: 1fr;
  }

  .compact-app-shell {
    grid-template-columns: 1fr;
  }

  .compact-app-sidebar {
    display: none;
  }
}


/* ========================================================================== 
   Envee visual systems upgrade
   Contextual motion and information aids across the site.
   ========================================================================== */

/* Hero: a restrained workflow signal layered over the product mockup */
.hero-app { isolation: isolate; }
.hero-flow-overlay {
  position: absolute;
  inset: 7% 5% 8%;
  z-index: 0;
  pointer-events: none;
  opacity: .72;
}
.hero-flow-line {
  position: absolute;
  left: 7%;
  top: 13%;
  bottom: 13%;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 52%, transparent), transparent);
}
.hero-flow-node {
  position: absolute;
  left: calc(7% - 4px);
  width: 9px;
  height: 9px;
  border: 2px solid color-mix(in srgb, var(--brand) 60%, var(--bg-elev));
  border-radius: 50%;
  background: var(--bg-elev);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 10%, transparent);
  transition: transform 420ms var(--ease), background 420ms var(--ease), box-shadow 420ms var(--ease);
}
.hero-flow-node[data-module="0"] { top: 16%; }
.hero-flow-node[data-module="1"] { top: 37%; }
.hero-flow-node[data-module="2"] { top: 58%; }
.hero-flow-node[data-module="3"] { top: 79%; }
.hero-flow-overlay[data-active="0"] .hero-flow-node[data-module="0"],
.hero-flow-overlay[data-active="1"] .hero-flow-node[data-module="1"],
.hero-flow-overlay[data-active="2"] .hero-flow-node[data-module="2"],
.hero-flow-overlay[data-active="3"] .hero-flow-node[data-module="3"] {
  transform: scale(1.35);
  background: var(--brand);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 18%, transparent), 0 0 20px color-mix(in srgb, var(--brand) 24%, transparent);
}
.hero-flow-pulse {
  position: absolute;
  left: calc(7% - 2px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 58%, transparent);
  animation: hero-flow-travel 4.8s var(--ease) infinite;
}
@keyframes hero-flow-travel {
  0%, 8% { top: 16%; opacity: 0; }
  16% { opacity: 1; }
  38% { top: 37%; }
  58% { top: 58%; }
  80% { top: 79%; opacity: 1; }
  92%, 100% { top: 79%; opacity: 0; }
}

/* Existing files flow through Envee without changing the tools around it */
.stack-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px minmax(160px, .7fr) 84px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: var(--s-6) 0 var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--line-inverse);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.stack-flow-source { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.stack-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(234,243,238,.17);
  background: rgba(234,243,238,.07);
  color: var(--ink-inverse);
  font: 700 10px/1 var(--font);
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .38;
  transform: translateY(6px);
}
.stack-flow-core {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: 16px;
  background: rgba(234,243,238,.08);
  box-shadow: inset 0 0 0 1px rgba(234,243,238,.13);
}
.stack-flow-core img { width: 28px; height: 28px; }
.stack-flow-core strong { color: var(--ink-inverse); font-size: 13px; }
.stack-flow-core small { color: var(--ink-inverse-2); font-size: 10px; text-align: center; }
.stack-flow-route { position: relative; height: 2px; background: rgba(156,207,180,.15); overflow: visible; }
.stack-flow-route::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(156,207,180,.55);
  border-right: 2px solid rgba(156,207,180,.55);
  transform: translateY(-50%) rotate(45deg);
}
.stack-flow-route i {
  position: absolute;
  left: 0;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ccfb4;
  box-shadow: 0 0 12px rgba(156,207,180,.7);
  opacity: 0;
}
.stack-flow.is-running .stack-file { animation: stack-file-arrive 680ms var(--ease) forwards; }
.stack-flow.is-running .stack-file:nth-child(2) { animation-delay: 110ms; }
.stack-flow.is-running .stack-file:nth-child(3) { animation-delay: 220ms; }
.stack-flow.is-running .stack-flow-route i { animation: stack-route 1.25s var(--ease) 520ms forwards; }
.stack-flow.is-running .stack-flow-route-out i { animation-delay: 1.25s; }
.stack-flow.is-running .stack-flow-output .stack-file { animation-delay: 1.55s; }
.stack-flow.is-running .stack-flow-output .stack-file:nth-child(2) { animation-delay: 1.68s; }
.stack-flow.is-running .stack-flow-output .stack-file:nth-child(3) { animation-delay: 1.81s; }
@keyframes stack-file-arrive { to { opacity: 1; transform: none; } }
@keyframes stack-route { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }

/* Problems: selected friction is visible rather than only textual */
.problem-card.is-selected {
  border-color: color-mix(in srgb, var(--brand) 52%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent), var(--shadow-2);
}
.friction-meter {
  width: min(230px, 100%);
  display: grid;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 68%, var(--bg-elev));
}
.friction-meter-label { color: var(--ink-3); font-size: 10px; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.friction-meter-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.friction-meter-track i { height: 7px; border-radius: 999px; background: var(--line-2); transition: background 280ms var(--ease), transform 280ms var(--ease); }
.friction-meter[data-count="1"] i:nth-child(-n+1),
.friction-meter[data-count="2"] i:nth-child(-n+2),
.friction-meter[data-count="3"] i:nth-child(-n+3),
.friction-meter[data-count="4"] i:nth-child(-n+4) { background: var(--brand); transform: scaleY(1.15); }
.friction-meter strong { font-size: 12px; }

/* Tool cards: miniature diagrams communicate the actual transformation */
.tool-motion {
  position: relative;
  min-height: 104px;
  margin: 2px 0 var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-tint) 62%, transparent), transparent);
  overflow: hidden;
}
.tool-motion-records .tool-inbox-card {
  position: absolute;
  left: 13px;
  width: 58px;
  height: 20px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-elev);
  transform: translateX(-8px);
  opacity: .28;
}
.tool-motion-records .tool-inbox-card:nth-child(1) { top: 15px; }
.tool-motion-records .tool-inbox-card:nth-child(2) { top: 41px; }
.tool-motion-records .tool-inbox-card:nth-child(3) { top: 67px; }
.tool-motion-arrow { position: absolute; left: 82px; top: 50%; width: 42px; height: 2px; background: var(--line-2); }
.tool-motion-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: translateY(-50%) rotate(45deg); }
.tool-tracker-mini { position: absolute; right: 12px; top: 12px; width: 45%; bottom: 12px; display: grid; align-content: center; gap: 8px; padding: 10px; border-radius: 9px; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--line); }
.tool-tracker-mini i { display: block; height: 9px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-tint) 0 68%, var(--line) 68%); transform: scaleX(.34); transform-origin: left; opacity: .45; }
.solution-card.is-visual-active .tool-inbox-card { animation: inbox-organize 820ms var(--ease) forwards; }
.solution-card.is-visual-active .tool-inbox-card:nth-child(2) { animation-delay: 110ms; }
.solution-card.is-visual-active .tool-inbox-card:nth-child(3) { animation-delay: 220ms; }
.solution-card.is-visual-active .tool-tracker-mini i { animation: tracker-fill 640ms var(--ease) 450ms forwards; }
.solution-card.is-visual-active .tool-tracker-mini i:nth-child(2) { animation-delay: 570ms; }
.solution-card.is-visual-active .tool-tracker-mini i:nth-child(3) { animation-delay: 690ms; }
@keyframes inbox-organize { to { opacity: 1; transform: translateX(14px) scale(.92); } }
@keyframes tracker-fill { to { opacity: 1; transform: scaleX(1); } }

.tool-motion-dashboard { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; padding: 13px; }
.tool-motion-dashboard > span { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev); opacity: .35; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.85); }
.tool-motion-dashboard > span:nth-child(1) { --dx: -16px; --dy: -10px; }
.tool-motion-dashboard > span:nth-child(2) { --dx: 18px; --dy: -8px; }
.tool-motion-dashboard > span:nth-child(3) { --dx: -12px; --dy: 14px; }
.tool-motion-dashboard > span:nth-child(4) { --dx: 15px; --dy: 12px; }
.tool-dashboard-pulse { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--brand); opacity: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 26%, transparent); }
.solution-card.is-visual-active .tool-motion-dashboard > span { animation: dashboard-align 720ms var(--ease) forwards; }
.solution-card.is-visual-active .tool-motion-dashboard > span:nth-child(2) { animation-delay: 100ms; }
.solution-card.is-visual-active .tool-motion-dashboard > span:nth-child(3) { animation-delay: 180ms; }
.solution-card.is-visual-active .tool-motion-dashboard > span:nth-child(4) { animation-delay: 260ms; }
.solution-card.is-visual-active .tool-dashboard-pulse { animation: dashboard-pulse 900ms var(--ease) 560ms forwards; }
@keyframes dashboard-align { to { opacity: 1; transform: none; } }
@keyframes dashboard-pulse { 0% { opacity: .9; box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 28%, transparent); } 100% { opacity: 0; box-shadow: 0 0 0 24px transparent; } }

.tool-motion-report { display: grid; grid-template-columns: 42% 34px 1fr; align-items: center; padding: 12px; }
.tool-motion-report .tool-motion-arrow { position: relative; left: auto; top: auto; width: 28px; justify-self: center; }
.tool-data-chips { display: grid; gap: 7px; }
.tool-data-chips span { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev); color: var(--ink-3); font-size: 10px; font-weight: 700; opacity: .34; transform: translateX(-10px); }
.tool-report-page { min-height: 78px; padding: 13px 10px; border-radius: 8px; background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--line); }
.tool-report-page i, .tool-report-page b { display: block; height: 7px; margin-bottom: 8px; border-radius: 999px; background: var(--line-2); transform: scaleX(.25); transform-origin: left; }
.tool-report-page i:nth-child(2) { width: 82%; }.tool-report-page i:nth-child(3) { width: 67%; }.tool-report-page b { width: 48%; background: var(--brand-tint); }
.solution-card.is-visual-active .tool-data-chips span { animation: data-chip-in 520ms var(--ease) forwards; }
.solution-card.is-visual-active .tool-data-chips span:nth-child(2) { animation-delay: 110ms; }.solution-card.is-visual-active .tool-data-chips span:nth-child(3) { animation-delay: 220ms; }
.solution-card.is-visual-active .tool-report-page i, .solution-card.is-visual-active .tool-report-page b { animation: report-write 580ms var(--ease) 430ms forwards; }
.solution-card.is-visual-active .tool-report-page i:nth-child(2) { animation-delay: 540ms; }.solution-card.is-visual-active .tool-report-page i:nth-child(3) { animation-delay: 650ms; }.solution-card.is-visual-active .tool-report-page b { animation-delay: 770ms; }
@keyframes data-chip-in { to { opacity: 1; transform: none; } }
@keyframes report-write { to { transform: scaleX(1); } }

/* Examples: clear tab movement and subtle depth on product imagery */
.example-tabs { position: relative; }
.example-tab-indicator {
  position: absolute;
  left: 6px;
  bottom: 4px;
  width: calc((100% - 12px) / 4);
  height: 3px;
  border-radius: 999px;
  background: var(--brand);
  transform: translateX(calc(var(--example-index, 0) * 100%));
  transition: transform 420ms var(--ease), width 420ms var(--ease);
  pointer-events: none;
}
.example-visual, .screenshot-media { --rx: 0deg; --ry: 0deg; transform-style: preserve-3d; }
@media (hover: hover) and (pointer: fine) {
  .example-visual img, .screenshot-media img { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.006); transition: transform 160ms ease-out; }
}

/* Process: the route draws behind four steps as they become active */
.steps { position: relative; --process-progress: 0%; }
.steps::before, .steps::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 16px;
  height: 2px;
  border-radius: 999px;
  z-index: 0;
}
.steps::before { background: var(--line-2); }
.steps::after { right: auto; width: var(--process-progress); background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 50%, var(--accent))); transition: width 700ms var(--ease); }
.step { position: relative; z-index: 1; }
.step.is-route-active { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.step.is-route-active .step-num { background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 12%, transparent); }

/* Pricing: visually explain the recommended order */
.plan-path {
  display: grid;
  grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--s-8);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
}
.plan-path article { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; align-items: center; opacity: .42; transform: translateY(6px); }
.plan-path article > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-tint); color: var(--brand-ink); font-size: 11px; font-weight: 800; }
.plan-path strong { font-size: 13px; }.plan-path small { color: var(--ink-3); font-size: 11px; }
.plan-path > i { position: relative; height: 2px; background: var(--line-2); transform: scaleX(0); transform-origin: left; }
.plan-path > i::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: translateY(-50%) rotate(45deg); }
.plan-path.is-active article { animation: plan-node-in 520ms var(--ease) forwards; }.plan-path.is-active article:nth-of-type(2) { animation-delay: 500ms; }.plan-path.is-active article:nth-of-type(3) { animation-delay: 980ms; }
.plan-path.is-active > i { animation: plan-line 520ms var(--ease) 300ms forwards; }.plan-path.is-active > i:nth-of-type(2) { animation-delay: 790ms; }
.plan-path article.is-recommended > span { background: var(--brand); color: var(--on-brand); }
@keyframes plan-node-in { to { opacity: 1; transform: none; } } @keyframes plan-line { to { transform: scaleX(1); } }

/* Contact: progress follows the information already entered */
.contact-progress { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-tint); }
.contact-progress > div { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.contact-progress > div span { height: 5px; border-radius: 999px; background: var(--line-2); transition: background 260ms var(--ease), transform 260ms var(--ease); }
.contact-progress > div span.is-active { background: var(--brand); transform: scaleY(1.2); }
.contact-progress strong { font-size: 12px; }.contact-progress small { color: var(--ink-3); font-size: 10px; align-self: center; }

/* Simple SEO pages: give each page a purposeful lightweight visual */
.simple-flow-visual { display: grid; grid-template-columns: auto 44px auto 44px auto; align-items: center; gap: 8px; margin: 14px 0 22px; }
.simple-flow-visual span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-tint); color: var(--ink-2); font-size: 10px; font-weight: 750; opacity: .35; transform: translateY(5px); }
.simple-flow-visual i { position: relative; height: 2px; background: var(--line-2); transform: scaleX(0); transform-origin: left; }
.simple-flow-visual i::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: translateY(-50%) rotate(45deg); }
.simple-flow-visual.is-active span { animation: simple-node 460ms var(--ease) forwards; }.simple-flow-visual.is-active span:nth-of-type(2) { animation-delay: 480ms; }.simple-flow-visual.is-active span:nth-of-type(3) { animation-delay: 940ms; }
.simple-flow-visual.is-active i { animation: simple-line 480ms var(--ease) 280ms forwards; }.simple-flow-visual.is-active i:nth-of-type(2) { animation-delay: 760ms; }
@keyframes simple-node { to { opacity: 1; transform: none; } } @keyframes simple-line { to { transform: scaleX(1); } }

.success-orbit { position: relative; width: 88px; height: 88px; margin: 8px 0 22px; }
.success-orbit span, .success-orbit i, .success-orbit b { position: absolute; border-radius: 50%; }
.success-orbit span { inset: 0; border: 1px solid var(--line-2); animation: success-ring 1.6s var(--ease) infinite; }
.success-orbit i { inset: 14px; border: 2px solid var(--brand); }
.success-orbit b { left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%,-50%); background: var(--brand); }
.success-orbit b::after { content: ""; position: absolute; left: 8px; top: 6px; width: 8px; height: 5px; border-left: 2px solid var(--on-brand); border-bottom: 2px solid var(--on-brand); transform: rotate(-45deg); }
@keyframes success-ring { 0% { transform: scale(.82); opacity: .5; } 70%,100% { transform: scale(1.12); opacity: 0; } }

@media (max-width: 900px) {
  .stack-flow { grid-template-columns: 1fr; }
  .stack-flow-route { width: 2px; height: 34px; justify-self: center; }
  .stack-flow-route::after { right: 50%; top: auto; bottom: -1px; transform: translateX(50%) rotate(135deg); }
  .stack-flow-route i { left: -2px; top: 0; }
  @keyframes stack-route { 0% { top: 0; left: -2px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 6px); left: -2px; opacity: 0; } }
  .plan-path { grid-template-columns: 1fr; }
  .plan-path > i { width: 2px; height: 30px; justify-self: center; transform: scaleY(0); transform-origin: top; }
  .plan-path > i::after { right: 50%; top: auto; bottom: 0; transform: translateX(50%) rotate(135deg); }
  @keyframes plan-line { to { transform: scaleY(1); } }
}

@media (max-width: 720px) {
  .hero-flow-overlay { display: none; }
  .example-tab-indicator { display: none; }
  .steps::before, .steps::after { left: 15px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; }
  .steps::after { width: 2px; height: var(--process-progress); transition: height 700ms var(--ease); }
  .simple-flow-visual { grid-template-columns: 1fr; }
  .simple-flow-visual i { width: 2px; height: 26px; justify-self: center; transform: scaleY(0); transform-origin: top; }
  .simple-flow-visual i::after { right: 50%; top: auto; bottom: 0; transform: translateX(50%) rotate(135deg); }
  @keyframes simple-line { to { transform: scaleY(1); } }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flow-pulse,
  .stack-flow-route i,
  .direct-line.is-active .direct-route::after,
  .success-orbit span { animation: none !important; }
  .stack-file,
  .tool-motion *,
  .plan-path article,
  .plan-path > i,
  .simple-flow-visual span,
  .simple-flow-visual i { animation: none !important; opacity: 1 !important; transform: none !important; }
}


/* ========================================================================== 
   Requested visual revisions
   ========================================================================== */

/* Hero: remove the redundant overlay signal. The accessible tab state remains. */
.hero-flow-overlay { display: none !important; }

/* Existing tools: proper contrast in both themes. */
.stack-flow {
  border-color: var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-tint) 72%, var(--bg-elev)), var(--bg-elev));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-elev) 72%, transparent);
}
.stack-file {
  border-color: var(--line-2);
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  opacity: .48;
}
.stack-flow-core {
  background: color-mix(in srgb, var(--brand-tint) 72%, var(--bg-elev));
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1);
}
.stack-flow-core strong { color: var(--ink); }
.stack-flow-core small { color: var(--ink-3); }
.stack-flow-route { background: color-mix(in srgb, var(--brand) 22%, var(--line-2)); }
.stack-flow-route::after { border-color: var(--brand); }
.stack-flow-route i { background: var(--brand); box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 42%, transparent); }
.stack-flow.is-running .stack-file { animation-name: stack-file-arrive-strong; }
@keyframes stack-file-arrive-strong { to { opacity: 1; transform: none; } }

/* Problems: static explanations plus a passive looping visual. */
.problem-redesign {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: stretch;
}
.problem-list { display: grid; gap: 12px; }
.problem-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
}
.problem-row .problem-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: 800;
}
.problem-row h3 { margin: 1px 0 5px; font-size: 1rem; letter-spacing: -.018em; }
.problem-row p { margin: 0; color: var(--ink-3); font-size: .83rem; line-height: 1.52; }
.problem-row > strong {
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--warn-tint);
  color: var(--warn-ink);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.problem-loop {
  display: grid;
  grid-template-rows: auto minmax(360px, 1fr) auto;
  min-height: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: radial-gradient(circle at center, color-mix(in srgb, var(--brand-tint) 62%, var(--bg-elev)), var(--bg-elev) 72%);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.problem-loop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 2px 14px;
}
.problem-loop-head > div { display: grid; gap: 2px; }
.problem-loop-head span { color: var(--ink-3); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.problem-loop-head strong { font-size: 14px; }
.problem-loop-head em {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--warn-tint);
  color: var(--warn-ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}
.scatter-stage { position: relative; min-height: 360px; }
.scatter-card {
  position: absolute;
  z-index: 2;
  width: 162px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
  transform: translate3d(0,0,0);
}
.scatter-card > span { display: block; margin-bottom: 5px; color: var(--brand-ink); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.scatter-card > strong { display: block; margin-bottom: 9px; font-size: 12px; }
.scatter-card i { display: block; height: 5px; margin-top: 5px; border-radius: 999px; background: var(--line-2); }
.scatter-card i:nth-of-type(2) { width: 78%; }.scatter-card i:nth-of-type(3) { width: 56%; }
.scatter-sheet { left: 2%; top: 4%; transform: rotate(-2.2deg); }
.scatter-mail { right: 2%; top: 7%; transform: rotate(1.8deg); }
.scatter-drive { left: 5%; bottom: 4%; transform: rotate(1.6deg); }
.scatter-template { right: 4%; bottom: 3%; transform: rotate(-1.8deg); }
.scatter-center {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 3;
  width: 186px;
  min-height: 126px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--brand) 10%, transparent), var(--shadow-2);
  text-align: center;
}
.scatter-center strong { font-size: 13px; }
.scatter-center small { max-width: 18ch; color: var(--ink-3); font-size: 10px; line-height: 1.4; }
.scatter-spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--line-2);
  border-top-color: var(--brand);
  border-radius: 50%;
}
.problem-loop.is-running .scatter-spinner { animation: scatter-spin 1.25s linear infinite; }
@keyframes scatter-spin { to { transform: rotate(360deg); } }
.scatter-route { position: absolute; z-index: 1; height: 1px; background: var(--line-2); transform-origin: left; opacity: .7; }
.scatter-route-a { left: 29%; top: 30%; width: 23%; transform: rotate(24deg); }
.scatter-route-b { right: 27%; top: 31%; width: 23%; transform: rotate(155deg); transform-origin: right; }
.scatter-route-c { left: 29%; bottom: 29%; width: 24%; transform: rotate(-24deg); }
.scatter-route-d { right: 27%; bottom: 28%; width: 24%; transform: rotate(205deg); transform-origin: right; }
.scatter-packet {
  position: absolute;
  z-index: 4;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 11%, transparent), 0 0 12px color-mix(in srgb, var(--brand) 40%, transparent);
  opacity: 0;
}
.problem-loop.is-running .scatter-card { animation: scatter-drift 6s ease-in-out infinite alternate; }
.problem-loop.is-running .scatter-mail { animation-delay: -1.5s; }
.problem-loop.is-running .scatter-drive { animation-delay: -3s; }
.problem-loop.is-running .scatter-template { animation-delay: -4.5s; }
@keyframes scatter-drift { from { margin-top: -2px; } to { margin-top: 5px; } }
.problem-loop.is-running .scatter-packet-a { animation: packet-a 8s ease-in-out infinite; }
.problem-loop.is-running .scatter-packet-b { animation: packet-b 8s ease-in-out 2s infinite; }
.problem-loop.is-running .scatter-packet-c { animation: packet-c 8s ease-in-out 4s infinite; }
.problem-loop.is-running .scatter-packet-d { animation: packet-d 8s ease-in-out 6s infinite; }
@keyframes packet-a { 0%,12% { left: 25%; top: 23%; opacity: 0; } 16% { opacity: 1; } 31% { left: 48%; top: 46%; opacity: 1; } 36%,100% { left: 48%; top: 46%; opacity: 0; } }
@keyframes packet-b { 0%,12% { left: 75%; top: 24%; opacity: 0; } 16% { opacity: 1; } 31% { left: 51%; top: 46%; opacity: 1; } 36%,100% { left: 51%; top: 46%; opacity: 0; } }
@keyframes packet-c { 0%,12% { left: 27%; top: 77%; opacity: 0; } 16% { opacity: 1; } 31% { left: 48%; top: 53%; opacity: 1; } 36%,100% { left: 48%; top: 53%; opacity: 0; } }
@keyframes packet-d { 0%,12% { left: 75%; top: 76%; opacity: 0; } 16% { opacity: 1; } 31% { left: 51%; top: 53%; opacity: 1; } 36%,100% { left: 51%; top: 53%; opacity: 0; } }
.problem-loop-foot { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.problem-loop-foot span { color: var(--ink-3); font-size: 10px; text-align: center; }
.problem-loop-foot b { color: var(--ink); font-size: 13px; }

/* What we build: visual aid first, no redundant icons. */
.solution-card { position: relative; }
.solution-card .solution-icon { display: none !important; }
.solution-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--warm-solid);
  color: var(--warm-solid-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
}
.solution-card.featured { border-color: color-mix(in srgb, var(--warm-solid) 50%, var(--line)); }
.solution-card .tool-motion { margin-top: 0; }

/* Process: one reliable on-view sequence instead of per-card scroll tracking. */
.steps { --process-progress: 0%; }
.steps::after { width: 0; transition: none; }
.steps .step { opacity: .58; transform: translateY(10px); }
.steps.is-process-running::after { animation: process-route-draw 2.1s var(--ease) .18s forwards; }
.steps.is-process-running .step { animation: process-step-in .58s var(--ease) forwards; }
.steps.is-process-running .step:nth-child(2) { animation-delay: .34s; }
.steps.is-process-running .step:nth-child(3) { animation-delay: .68s; }
.steps.is-process-running .step:nth-child(4) { animation-delay: 1.02s; }
.steps.is-process-running .step-num { animation: process-num-pulse .5s var(--ease) forwards; }
.steps.is-process-running .step:nth-child(2) .step-num { animation-delay: .34s; }
.steps.is-process-running .step:nth-child(3) .step-num { animation-delay: .68s; }
.steps.is-process-running .step:nth-child(4) .step-num { animation-delay: 1.02s; }
@keyframes process-route-draw { to { width: 92%; } }
@keyframes process-step-in { to { opacity: 1; transform: none; border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); } }
@keyframes process-num-pulse { 55% { background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand) 12%, transparent); } 100% { background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 9%, transparent); } }

/* Explicitly remove the discarded additions if stale markup exists in cached copies. */
.plan-path, .contact-progress, .friction-meter, .problem-result { display: none !important; }

@media (max-width: 980px) {
  .problem-redesign { grid-template-columns: 1fr; }
  .problem-loop { min-height: 520px; }
}
@media (max-width: 720px) {
  .problem-row { grid-template-columns: 32px 1fr; }
  .problem-row > strong { grid-column: 2; justify-self: start; }
  .problem-loop { min-height: 600px; padding: 14px; }
  .problem-loop-head { align-items: flex-start; flex-direction: column; }
  .scatter-stage { min-height: 450px; }
  .scatter-card { width: 142px; }
  .scatter-sheet { left: 0; }.scatter-mail { right: 0; }.scatter-drive { left: 0; }.scatter-template { right: 0; }
  .scatter-center { width: 164px; }
  .problem-loop-foot { grid-template-columns: 1fr; }
  .steps.is-process-running::after { animation-name: process-route-draw-mobile; }
  @keyframes process-route-draw-mobile { to { height: 92%; } }
}
@media (prefers-reduced-motion: reduce) {
  .problem-loop .scatter-spinner,
  .problem-loop .scatter-card,
  .problem-loop .scatter-packet,
  .steps::after,
  .steps .step,
  .steps .step-num { animation: none !important; }
  .problem-loop .scatter-packet { display: none; }
  .steps::after { width: 92%; }
  .steps .step { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   Adoption positioning, ending-arrow fix, and pricing meta alignment
   -------------------------------------------------------------------------- */
.stack-head {
  align-items: flex-start;
}

.stack-head strong {
  flex: 0 0 auto;
}

.stack-head span {
  max-width: 68ch;
  line-height: 1.5;
}

.stack-flow-core small {
  max-width: 14ch;
  line-height: 1.35;
}

.stack-flow-output .stack-file {
  min-width: 72px;
}

.stack-list li {
  align-content: start;
}

.stack-list li span {
  line-height: 1.55;
}

/* Make the two pricing outcomes read as one deliberate footer row. */
.plan-meta {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 0;
  align-items: stretch;
}

.plan-meta > div {
  align-content: start;
  min-width: 0;
  padding-right: var(--s-5);
}

.plan-meta > div + div {
  padding-right: 0;
  padding-left: var(--s-5);
  border-left: 1px solid var(--line);
}

.plan-meta dt {
  margin-bottom: 7px;
  line-height: 1.25;
}

.plan-meta dd {
  line-height: 1.4;
  text-wrap: balance;
}

@media (max-width: 700px) {
  .plan-meta {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  .plan-meta > div,
  .plan-meta > div + div {
    padding: 0;
    border-left: 0;
  }

  .plan-meta > div + div {
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
  }
}


/* --------------------------------------------------------------------------
   Stack section title redesign
   -------------------------------------------------------------------------- */
.stack-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: clamp(18px, 2vw, 24px);
}

.stack-head-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stack-head-title {
  margin: 0;
  max-width: 18ch;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 720;
}

.stack-head-copy {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-3);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
}

@media (max-width: 767px) {
  .stack-head-title {
    max-width: 14ch;
    font-size: clamp(24px, 8vw, 30px);
  }

  .stack-head-copy {
    font-size: 14px;
  }
}


/* ========================================================================== 
   Stack section visual system upgrade
   Quiet systems diagram: familiar inputs -> Envee -> clearer outcomes
   ========================================================================== */
.stack-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(22px, 2.8vw, 32px);
  border-color: color-mix(in srgb, var(--brand) 12%, var(--line));
  background:
    radial-gradient(circle at 50% -18%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 40%),
    var(--bg-elev);
}

.stack-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(color-mix(in srgb, var(--brand) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 5%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 58%);
}

.stack-flow {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) minmax(62px, 9%) minmax(176px, .72fr) minmax(62px, 9%) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0 0 clamp(24px, 2.7vw, 32px);
  padding: clamp(24px, 3vw, 34px);
  min-height: 164px;
  border-radius: 22px;
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--brand-tint) 54%, var(--bg-elev)), var(--bg-elev) 46%, color-mix(in srgb, var(--bg-tint) 66%, var(--bg-elev)));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 4%, transparent);
}

.stack-flow::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 35%);
  opacity: .82;
}

.stack-flow-source {
  align-items: center;
  gap: 9px;
}

.stack-file {
  min-width: 62px;
  min-height: 36px;
  padding: 8px 11px;
  border-radius: 11px;
  border-color: color-mix(in srgb, var(--brand) 13%, var(--line-2));
  background: color-mix(in srgb, var(--bg-elev) 92%, var(--brand-tint));
  color: var(--ink-2);
  box-shadow: 0 5px 14px rgba(13, 48, 36, .08), inset 0 1px 0 rgba(255,255,255,.7);
  opacity: .48;
  will-change: transform, opacity;
}

.stack-flow-source:not(.stack-flow-output) .stack-file:nth-child(1) { transform: translate(-5px, 5px) rotate(-2deg); }
.stack-flow-source:not(.stack-flow-output) .stack-file:nth-child(2) { transform: translate(1px, -5px) rotate(1.5deg); }
.stack-flow-source:not(.stack-flow-output) .stack-file:nth-child(3) { transform: translate(6px, 4px) rotate(2deg); }

.stack-flow-output .stack-file {
  min-width: 76px;
  opacity: .26;
  transform: translateY(5px) scale(.98);
}

.stack-flow-route {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 12%, var(--line-2)), color-mix(in srgb, var(--brand) 44%, var(--line-2)));
}

.stack-flow-route::after {
  width: 9px;
  height: 9px;
  border-color: color-mix(in srgb, var(--brand) 74%, var(--ink));
}

.stack-flow-route i {
  top: -3px;
  width: 8px;
  height: 8px;
  background: var(--brand);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--brand) 13%, transparent),
    0 0 16px color-mix(in srgb, var(--brand) 52%, transparent);
}

.stack-flow-core {
  position: relative;
  z-index: 2;
  min-height: 128px;
  align-content: center;
  gap: 5px;
  padding: 16px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--line));
  border-radius: 19px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-tint) 76%, var(--bg-elev)), color-mix(in srgb, var(--brand-tint) 48%, var(--bg-elev)));
  box-shadow:
    0 10px 26px rgba(9, 48, 34, .10),
    inset 0 1px 0 rgba(255,255,255,.72);
  overflow: hidden;
  will-change: transform, box-shadow;
}

.stack-flow-core::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 16%, transparent), transparent 50%);
  opacity: 0;
  transform: scale(.72);
}

.stack-flow-core img {
  width: 31px;
  height: 31px;
}

.stack-flow-core strong {
  font-size: 14px;
  font-weight: 720;
}

.stack-flow-core small {
  max-width: 16ch;
  font-size: 10px;
  line-height: 1.3;
}

.stack-core-lines {
  width: min(112px, 86%);
  display: grid;
  gap: 5px;
  margin-top: 6px;
}

.stack-core-lines i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 74%, white), color-mix(in srgb, var(--brand) 18%, var(--line-2)));
  opacity: .46;
  transform-origin: left center;
  will-change: transform, opacity;
}

.stack-core-lines i:nth-child(1) { width: 54%; transform: translateX(16px); }
.stack-core-lines i:nth-child(2) { width: 88%; transform: translateX(-7px); }
.stack-core-lines i:nth-child(3) { width: 68%; transform: translateX(9px); }

/* Loop only while the section is visible. */
.stack-flow.is-running .stack-flow-source:not(.stack-flow-output) .stack-file {
  animation: stack-source-loop 7.2s var(--ease) infinite;
}
.stack-flow.is-running .stack-flow-source:not(.stack-flow-output) .stack-file:nth-child(2) { animation-delay: 90ms; }
.stack-flow.is-running .stack-flow-source:not(.stack-flow-output) .stack-file:nth-child(3) { animation-delay: 180ms; }

.stack-flow.is-running .stack-flow-route:not(.stack-flow-route-out) i {
  animation: stack-route-in-loop 7.2s linear infinite;
}
.stack-flow.is-running .stack-flow-route-out i {
  animation: stack-route-out-loop 7.2s linear infinite;
}
.stack-flow.is-running .stack-flow-core {
  animation: stack-core-loop 7.2s var(--ease) infinite;
}
.stack-flow.is-running .stack-flow-core::before {
  animation: stack-core-glow-loop 7.2s var(--ease) infinite;
}
.stack-flow.is-running .stack-core-lines i {
  animation: stack-core-lines-loop 7.2s var(--ease) infinite;
}
.stack-flow.is-running .stack-flow-output .stack-file {
  animation: stack-output-loop 7.2s var(--ease) infinite;
}
.stack-flow.is-running .stack-flow-output .stack-file:nth-child(2) { animation-delay: 100ms; }
.stack-flow.is-running .stack-flow-output .stack-file:nth-child(3) { animation-delay: 200ms; }

@keyframes stack-source-loop {
  0%, 5%, 100% { opacity: .42; }
  12%, 38% { opacity: 1; transform: translate(0, 0) rotate(0); }
  46%, 90% { opacity: .70; transform: translate(2px, 0) rotate(0); }
}

@keyframes stack-route-in-loop {
  0%, 14% { left: 0; opacity: 0; }
  18% { opacity: 1; }
  36% { left: calc(100% - 8px); opacity: 1; }
  40%, 100% { left: calc(100% - 8px); opacity: 0; }
}

@keyframes stack-route-out-loop {
  0%, 49% { left: 0; opacity: 0; }
  53% { opacity: 1; }
  70% { left: calc(100% - 8px); opacity: 1; }
  74%, 100% { left: calc(100% - 8px); opacity: 0; }
}

@keyframes stack-core-loop {
  0%, 24%, 100% { transform: translateY(0) scale(1); box-shadow: 0 10px 26px rgba(9,48,34,.10), inset 0 1px 0 rgba(255,255,255,.72); }
  34%, 59% { transform: translateY(-2px) scale(1.015); box-shadow: 0 14px 34px rgba(9,48,34,.16), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.78); }
  72%, 88% { transform: translateY(0) scale(1); }
}

@keyframes stack-core-glow-loop {
  0%, 25%, 100% { opacity: 0; transform: scale(.72); }
  36%, 59% { opacity: 1; transform: scale(1); }
  70% { opacity: .2; transform: scale(1.08); }
}

@keyframes stack-core-lines-loop {
  0%, 24%, 100% { opacity: .42; }
  35%, 60% { width: 82%; transform: translateX(0); opacity: 1; }
  72%, 90% { opacity: .65; transform: translateX(0); }
}

@keyframes stack-output-loop {
  0%, 55%, 100% { opacity: .24; transform: translateY(5px) scale(.98); }
  67%, 88% { opacity: 1; transform: translateY(0) scale(1); }
}

/* The three adoption ideas read as one connected path. */
.stack-list {
  position: relative;
  gap: clamp(12px, 1.4vw, 18px);
  padding-top: 20px;
}

.stack-list::before {
  content: "";
  position: absolute;
  top: 3px;
  left: calc(16.666% - 1px);
  right: calc(16.666% - 1px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 38%, var(--line)), color-mix(in srgb, var(--brand) 38%, var(--line)), transparent);
}

.stack-list li {
  position: relative;
  overflow: visible;
  gap: 7px;
  padding: clamp(19px, 2vw, 23px);
  border: 1px solid color-mix(in srgb, var(--brand) 9%, var(--line));
  border-radius: 17px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-tint) 82%, var(--bg-elev)), color-mix(in srgb, var(--bg) 74%, var(--bg-elev)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
}

.stack-list li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  border-radius: 17px 17px 0 0;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 24%, transparent));
  transform: scaleX(0);
  transform-origin: left center;
}

.stack-list li::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -21px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid color-mix(in srgb, var(--brand) 66%, var(--bg-elev));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 8%, transparent);
}

.stack-bar.is-in .stack-list li::before {
  animation: stack-card-accent 680ms var(--ease) forwards;
}
.stack-bar.is-in .stack-list li:nth-child(2)::before { animation-delay: 120ms; }
.stack-bar.is-in .stack-list li:nth-child(3)::before { animation-delay: 240ms; }

.stack-bar.is-in .stack-list li::after {
  animation: stack-point-pulse 7.2s ease-in-out infinite;
}
.stack-bar.is-in .stack-list li:nth-child(2)::after { animation-delay: 180ms; }
.stack-bar.is-in .stack-list li:nth-child(3)::after { animation-delay: 360ms; }

@keyframes stack-card-accent { to { transform: scaleX(1); } }
@keyframes stack-point-pulse {
  0%, 72%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 8%, transparent); transform: scale(1); }
  78%, 86% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 13%, transparent), 0 0 14px color-mix(in srgb, var(--brand) 26%, transparent); transform: scale(1.12); }
}

.stack-list svg {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  margin-bottom: 5px;
  padding: 9px;
  border-radius: 11px;
  color: var(--brand-ink);
  background: color-mix(in srgb, var(--brand) 9%, var(--bg-elev));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, var(--line));
}

.stack-list strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.stack-list span {
  font-size: 14px;
  line-height: 1.58;
}

.stack-foot {
  align-items: center;
  margin-top: 18px;
  padding: 14px 17px;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 4%, var(--bg-elev));
  color: var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48);
}

.stack-foot svg {
  width: 19px;
  height: 19px;
}

.stack-foot strong {
  color: var(--brand-ink);
  font-weight: 720;
}

@media (hover: hover) and (pointer: fine) {
  .stack-list li {
    transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
  }
  .stack-list li:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
    box-shadow: 0 12px 25px rgba(9,48,34,.08), inset 0 1px 0 rgba(255,255,255,.62);
  }
}

@media (max-width: 820px) {
  .stack-flow {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 22px;
    gap: 12px;
  }

  .stack-flow-route {
    width: 2px;
    height: 34px;
    justify-self: center;
  }

  .stack-flow-route i {
    left: -3px;
    top: 0;
  }

  .stack-flow-route::after {
    right: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(50%) rotate(135deg);
  }

  .stack-flow.is-running .stack-flow-route:not(.stack-flow-route-out) i {
    animation-name: stack-route-in-loop-mobile;
  }
  .stack-flow.is-running .stack-flow-route-out i {
    animation-name: stack-route-out-loop-mobile;
  }

  @keyframes stack-route-in-loop-mobile {
    0%, 14% { top: 0; opacity: 0; }
    18% { opacity: 1; }
    36% { top: calc(100% - 8px); opacity: 1; }
    40%, 100% { top: calc(100% - 8px); opacity: 0; }
  }
  @keyframes stack-route-out-loop-mobile {
    0%, 49% { top: 0; opacity: 0; }
    53% { opacity: 1; }
    70% { top: calc(100% - 8px); opacity: 1; }
    74%, 100% { top: calc(100% - 8px); opacity: 0; }
  }

  .stack-list {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .stack-list::before,
  .stack-list li::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-flow .stack-file,
  .stack-flow .stack-flow-route i,
  .stack-flow .stack-flow-core,
  .stack-flow .stack-flow-core::before,
  .stack-flow .stack-core-lines i,
  .stack-list li::before,
  .stack-list li::after {
    animation: none !important;
  }

  .stack-flow .stack-file,
  .stack-flow .stack-flow-output .stack-file {
    opacity: 1 !important;
    transform: none !important;
  }

  .stack-core-lines i {
    opacity: .8 !important;
    transform: none !important;
  }

  .stack-list li::before {
    transform: scaleX(1) !important;
  }
}


/* --------------------------------------------------------------------------
   Stack cards cleanup: remove path line, signal dots, and top accent bars
   -------------------------------------------------------------------------- */
.stack-list {
  padding-top: 0;
}

.stack-list::before,
.stack-list li::before,
.stack-list li::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}


/* --------------------------------------------------------------------------
   Stack footer restored to the original simple divider format
   -------------------------------------------------------------------------- */
.stack-foot {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--t-sm);
  box-shadow: none;
}

.stack-foot svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand-ink);
}

.stack-foot strong {
  color: inherit;
  font-weight: inherit;
}