/* Vested Health

   The hero is the original film and is left alone, apart from one warm field of
   light behind it so it belongs to the page that follows.

   Everything after it follows three rules.

   No eyebrows, no step numbers, no label above a heading announcing what the
   heading is about. A section is a sentence and the thing it is about.

   Colour means something: forest is the product, mint and teal are the machine
   working, amber is money and time going out the door.

   Motion is one gesture. Things rise twelve pixels into place once and are then
   left alone, and the whole system is a single class. */

/* Söhne is licensed and cannot be shipped. This is the closest grotesque that
   can be: the same Akzidenz bones and tight apertures, and it holds at display
   size where Inter starts to read as a UI face. */
@font-face {
  font-family: 'Grotesk';
  src: url('fonts/grotesk.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #FFFFFF;
  --ink: #0A1F19;
  --ink-2: #3D5B51;
  --sub: #55665F;
  --faint: #8A9B94;
  --line: #E4EAE7;
  --hair: #EFF3F1;

  --forest: #04241C;
  --forest-2: #0A3628;

  --green: #0B7A4B;
  --deep: #075C39;
  --green-2: #12A66A;
  --mint: #6EE7B7;
  --teal: #109C9C;

  --amber: #E0913A;
  --coral: #E0674F;

  --tint: #F5FAF7;

  --font: 'Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sh-sm: 0 1px 2px rgba(4, 36, 28, 0.04), 0 4px 12px rgba(4, 36, 28, 0.05);
  --sh-md: 0 2px 6px rgba(4, 36, 28, 0.05), 0 14px 32px rgba(4, 36, 28, 0.08);
  --sh-lg: 0 4px 12px rgba(4, 36, 28, 0.06), 0 30px 70px rgba(4, 36, 28, 0.16);
  --gut: clamp(1.25rem, 4.5vw, 3rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--forest);
  color: #fff;
  font-size: 0.875rem;
  padding: 0.6rem 1rem;
  z-index: 80;
}
.skip:focus { left: 0; }

/* ---------- type ---------- */

.display {
  font-weight: 420;
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.display em { font-style: normal; color: var(--deep); }

h2 {
  font-size: clamp(1.85rem, 3.05vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
  font-weight: 640;
  max-width: 21ch;
}

h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.016em; font-weight: 620; }

.lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sub);
  max-width: 54ch;
  margin-top: 1rem;
}

/* ---------- controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.012em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1), background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.btn-solid { background: var(--forest); color: #fff; box-shadow: 0 1px 2px rgba(4, 36, 28, 0.18); }
.btn-solid:hover { background: #0A3D2E; transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-sm { padding: 0.52rem 1.1rem; font-size: 0.875rem; }
.btn:focus-visible { outline: 3px solid var(--green-2); outline-offset: 3px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.link-arrow .arw { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1); }
.link-arrow:hover .arw { transform: translateX(3px); }
.link-arrow.strong { font-size: 1rem; margin-top: 1.4rem; }
.link-arrow:focus-visible { outline: 3px solid var(--green-2); outline-offset: 4px; border-radius: 3px; }

/* ---------- nav ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.topbar.stuck {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(10, 31, 25, 0.07);
}
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: 68px; }

.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-text { font-weight: 660; font-size: 1.0625rem; letter-spacing: -0.028em; white-space: nowrap; }

.nav { display: flex; gap: 1.7rem; }
.nav a {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 520;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.25rem 0;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--green-2);
  transition: right 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }
.nav a:focus-visible { outline: 3px solid var(--green-2); outline-offset: 4px; border-radius: 3px; }

.topbar-cta { display: flex; align-items: center; gap: 0.75rem; }

.menu-btn {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.menu-btn span { display: block; width: 16px; height: 1.6px; background: var(--ink); margin: 0 auto; border-radius: 2px; }
.menu-btn span + span { margin-top: 4px; }

.menu { background: #fff; border-top: 1px solid var(--line); box-shadow: var(--sh-md); }
.menu-in { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.75rem; padding-bottom: 1.15rem; }
.menu-in a { padding: 0.65rem 0; text-decoration: none; color: var(--ink); font-weight: 540; }
.menu-in .btn { margin-top: 0.6rem; justify-content: center; }

/* ---------- hero: unchanged, plus the light ---------- */

.hero { position: relative; }
.hero-stage {
  position: relative;
  height: calc(100svh - 68px);
  min-height: 560px;
  overflow: clip;
}
#calmap { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }

/* The sunshine. It has to sit over the film rather than behind it, because the
   scene paints its own white ground and would hide anything underneath. It
   multiplies, so it tints that white and leaves the state legible. */
.sun {
  position: absolute;
  inset: -10% -5%;
  z-index: 2;
  mix-blend-mode: multiply;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 76% 6%, rgba(110, 231, 183, 0.42), transparent 62%),
    radial-gradient(46% 50% at 12% 86%, rgba(224, 145, 58, 0.32), transparent 64%),
    radial-gradient(50% 48% at 88% 78%, rgba(16, 156, 156, 0.22), transparent 62%);
}
.js-anim .sun { animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2%, 1.5%, 0) scale(1.05); }
}

.hero-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  z-index: 3;
  background: linear-gradient(to top, var(--bg) 12%, rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* The original geometry, to the pixel: a 1280 measure, a 5vw gutter, and a copy
   block that never exceeds 54vw. Anything else moves the text off the mark it
   has always sat on. */
.hero-copy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1.75rem, 5vh, 3rem);
  z-index: 4;
  width: 100%;
  max-width: 1280px;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
  pointer-events: none;
}
.hero-copy > * { max-width: min(54vw, 620px); }
.hero-copy .display {
  max-width: 14ch;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 470;
}
.hero-copy .display em { color: inherit; }
.hero-copy .sub {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sub);
  max-width: 44ch;
}

.county-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -112%) rotate(-2deg);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.5rem 1.6rem 0.45rem 0.8rem;
  box-shadow: var(--sh-md);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
  pointer-events: none;
  white-space: nowrap;
}
.county-tip.on { opacity: 1; transform: translate(-50%, -128%) rotate(-2deg); }
.county-tip::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -4.5px;
  width: 8px; height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ct-county { display: block; font-weight: 620; font-size: 0.8125rem; letter-spacing: -0.015em; }
.ct-stamp {
  position: absolute;
  right: -1rem; top: -0.9rem;
  font-weight: 700;
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: 3px;
  padding: 0.1rem 0.38rem;
  transform: rotate(7deg);
  background: rgba(255, 255, 255, 0.92);
}

/* ---------- reveal ---------- */

.js-anim .rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.js-anim .rv.in { opacity: 1; transform: none; }

/* ---------- sections ---------- */

/* Sections meet on a hairline and share one rhythm, so the change of ground is
   deliberate rather than a jolt. The dark band fades into the white under it
   instead of stopping dead. */
.section { position: relative; isolation: isolate; padding: clamp(4rem, 7.5vw, 6.5rem) 0; }
.flat { background: var(--tint); }
.band { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem); }

/* Faint, and faint on purpose: a dot field that fades out before it reaches the
   copy, so a section has a surface without having a texture. */
.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 31, 25, 0.06) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(72% 55% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(72% 55% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

.figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2.5rem;
}
.fig-n {
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 640;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
}
.fig-n.cool { background: linear-gradient(120deg, var(--green-2), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fig-n.warm { background: linear-gradient(120deg, var(--amber), var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fig-l { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--sub); }

.two-col { max-width: 46rem; }
.two-col-wide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* ---------- the dark band ---------- */

.dark {
  position: relative;
  isolation: isolate;
  background: var(--forest);
  color: #E6F1EC;
  padding: clamp(4rem, 8vw, 7rem) 0;
  overflow: clip;
}
.dark-mesh {
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background:
    radial-gradient(40% 45% at 78% 10%, rgba(16, 156, 156, 0.38), transparent 62%),
    radial-gradient(45% 50% at 6% 84%, rgba(18, 166, 106, 0.32), transparent 62%),
    radial-gradient(34% 40% at 58% 98%, rgba(224, 145, 58, 0.16), transparent 60%);
}
.js-anim .dark-mesh { animation: drift 34s ease-in-out infinite alternate; }
.dark h2 { color: #fff; max-width: 24ch; }
.dark-head { max-width: 46rem; }
.dark-sub { margin-top: 1rem; font-size: 1.0625rem; color: rgba(230, 241, 236, 0.7); max-width: 56ch; }

.frame {
  margin-top: 2.75rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.frame img { width: 100%; height: auto; }
.frame-light {
  margin-top: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}
.frame-light figcaption {
  padding: 0.7rem 1rem;
  font-size: 0.8125rem;
  color: var(--sub);
  border-top: 1px solid var(--hair);
}

/* Section anchors retain a positioning context without drawing a page frame. */

.ruled { position: relative; }

/* ---------- bento ----------

   Six tiles on a six column grid, filled with the product's own parts rather
   than pictures of them: real cards on a real line, a meter, a run of days, a
   document row, the state filling in. Every tile opens, and the plus sits in
   the same corner on all six. */

.bento-band {
  position: relative;
  isolation: isolate;
  background: var(--forest);
  color: #E6F1EC;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: clip;
}
.bento-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 36, 28, 0), #FFFFFF 96%);
  opacity: 0.14;
  pointer-events: none;
}
.bento-band::before {
  content: '';
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background:
    radial-gradient(38% 44% at 84% 6%, rgba(16, 156, 156, 0.32), transparent 62%),
    radial-gradient(42% 48% at 2% 90%, rgba(18, 166, 106, 0.26), transparent 62%),
    radial-gradient(32% 38% at 56% 100%, rgba(224, 145, 58, 0.13), transparent 60%);
}
.js-anim .bento-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 36, 28, 0), #FFFFFF 96%);
  opacity: 0.14;
  pointer-events: none;
}
.bento-band::before { animation: drift 34s ease-in-out infinite alternate; }

.bento-h { color: #fff; max-width: 62ch; margin-bottom: 2rem; font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
.bento-h .muted { color: rgba(230, 241, 236, 0.5); }
.two-tone { max-width: 64ch; }
.two-tone .muted { color: var(--faint); }

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
}
.bt {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.3rem;
  background: #05271E;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.22s ease;
}
.bt:hover { background: #0A3427; }
.bt:focus-visible { outline: 3px solid var(--mint); outline-offset: -3px; }
.bt-a, .bt-d { padding: 0; gap: 0; }

/* The grid is uniform: six columns, three rows, every cell filled. */
.bt-a { grid-column: 1 / 5; grid-row: 1 / 3; }
.bt-b { grid-column: 5 / 7; grid-row: 1; }
.bt-c { grid-column: 5 / 7; grid-row: 2; }
.bt-d { grid-column: 1 / 3; grid-row: 3; }
.bt-e { grid-column: 3 / 5; grid-row: 3; }
.bt-f { grid-column: 5 / 7; grid-row: 3; justify-content: center; }
.bt-live, .bt-map { display: flex; padding: 1.35rem 1.35rem 0; flex: 1; }
.bt-live .line-mini { flex: 1; }
.bt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.35rem 1.2rem;
}
.bt-t { font-size: 0.9375rem; color: rgba(230, 241, 236, 0.82); }
.bt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.bt-n {
  font-size: clamp(1.55rem, 2.4vw, 2.05rem);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: #fff;
}
.bt-n.small { font-size: 1.0625rem; letter-spacing: -0.02em; }
.bt-n .cur { font-size: 0.55em; vertical-align: 0.34em; color: rgba(230, 241, 236, 0.6); }
.bt-l { font-size: 0.875rem; color: rgba(230, 241, 236, 0.6); }
.bt-i { position: relative; width: 13px; height: 13px; flex: none; margin-top: 0.3rem; }
.bt-foot .bt-i { margin-top: 0; }
.bt-i::before, .bt-i::after {
  content: '';
  position: absolute;
  left: 0; top: 5.5px;
  width: 13px; height: 1.8px;
  border-radius: 2px;
  background: rgba(230, 241, 236, 0.5);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1), background-color 0.2s ease;
}
.bt-i::after { transform: rotate(90deg); }
.bt:hover .bt-i::before, .bt:hover .bt-i::after { background: var(--mint); }

/* The line, as the product draws it. */
.line-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; align-items: stretch; }
.line-mini .stn {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
}
.line-mini .stn-h { display: block; font-size: 0.6875rem; font-weight: 620; color: rgba(230, 241, 236, 0.85); margin-bottom: 0.45rem; }
.line-mini .crd {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  padding: 0.4rem 0.45rem;
  background: #0B3A2B;
}
.line-mini .crd-n { display: block; font-size: 0.6875rem; font-weight: 620; color: #fff; }
.line-mini .crd-m { display: block; font-size: 0.625rem; color: rgba(230, 241, 236, 0.55); font-variant-numeric: tabular-nums; margin-top: 1px; }
.line-mini .crd-due { border-color: rgba(224, 103, 79, 0.5); }
.line-mini .chip {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.5625rem;
  font-weight: 620;
  color: #FFD9D1;
  background: rgba(224, 103, 79, 0.25);
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
}
/* Forwards only. With `both` the card holds its first frame — fully
   transparent — through its delay, so anything that never gets a frame gets an
   empty station instead of a card. */
.js-anim .line-mini .crd { animation: land 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.js-anim .line-mini .stn:nth-child(2) .crd { animation-delay: 0.1s; }
.js-anim .line-mini .stn:nth-child(3) .crd { animation-delay: 0.2s; }
.js-anim .line-mini .stn:nth-child(4) .crd { animation-delay: 0.3s; }
.js-anim .line-mini .stn:nth-child(5) .crd { animation-delay: 0.4s; }
@keyframes land {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* A meter that fills once: the month running out. */
.meter { display: block; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: auto; }
.meter-fill { display: block; height: 100%; width: 68%; border-radius: 3px; background: linear-gradient(90deg, var(--amber), var(--coral)); }
.js-anim .bt-b.in .meter-fill { animation: fill 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) both 0.2s; }
@keyframes fill { from { width: 0; } to { width: 68%; } }

/* Ten days, and the last one is red. */
.dots { display: flex; gap: 5px; margin-top: auto; }
.dots i { display: block; width: 100%; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.dots i.hot { background: var(--coral); }
.js-anim .bt-c.in .dots i { animation: tick 0.4s ease both; }
.js-anim .bt-c.in .dots i:nth-child(2) { animation-delay: 0.06s; }
.js-anim .bt-c.in .dots i:nth-child(3) { animation-delay: 0.12s; }
.js-anim .bt-c.in .dots i:nth-child(4) { animation-delay: 0.18s; }
.js-anim .bt-c.in .dots i:nth-child(5) { animation-delay: 0.24s; }
.js-anim .bt-c.in .dots i:nth-child(6) { animation-delay: 0.3s; }
.js-anim .bt-c.in .dots i:nth-child(7) { animation-delay: 0.36s; }
.js-anim .bt-c.in .dots i:nth-child(8) { animation-delay: 0.42s; }
.js-anim .bt-c.in .dots i:nth-child(9) { animation-delay: 0.48s; }
.js-anim .bt-c.in .dots i:nth-child(10) { animation-delay: 0.54s; }
@keyframes tick { from { opacity: 0.2; transform: scaleY(0.4); } to { opacity: 1; transform: none; } }

.check { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.9rem; }
.check span { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; color: rgba(230, 241, 236, 0.72); }
.check i {
  width: 13px; height: 13px;
  border-radius: 4px;
  background: rgba(110, 231, 183, 0.16);
  border: 1px solid rgba(110, 231, 183, 0.5);
  position: relative;
  flex: none;
}
.check i::after {
  content: '';
  position: absolute;
  left: 3px; top: 3.5px;
  width: 5px; height: 2.5px;
  border-left: 1.5px solid var(--mint);
  border-bottom: 1.5px solid var(--mint);
  transform: rotate(-45deg);
  opacity: 0;
}
.js-anim .bt-e.in .check i::after { animation: soak 0.25s ease both; }
.js-anim .bt-e.in .check span:nth-child(1) i::after { animation-delay: 0.15s; }
.js-anim .bt-e.in .check span:nth-child(2) i::after { animation-delay: 0.3s; }
.js-anim .bt-e.in .check span:nth-child(3) i::after { animation-delay: 0.45s; }
.js-anim .bt-e.in .check span:nth-child(4) i::after { animation-delay: 0.6s; }
.js-anim .bt-e.in .check span:nth-child(5) i::after { animation-delay: 0.75s; }
@keyframes soak { to { opacity: 1; } }

.incl { display: flex; flex-direction: column; gap: 0.35rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.incl span { font-size: 0.8125rem; color: rgba(230, 241, 236, 0.6); }

.pips { display: flex; gap: 5px; }
.pips i { display: block; width: 22px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.pips i.on { background: var(--mint); }
.js-anim .bt-e.in .pips i.on { animation: tick 0.4s ease both; }
.js-anim .bt-e.in .pips i:nth-child(2) { animation-delay: 0.08s; }
.js-anim .bt-e.in .pips i:nth-child(3) { animation-delay: 0.16s; }
.js-anim .bt-e.in .pips i:nth-child(4) { animation-delay: 0.24s; }
.js-anim .bt-e.in .pips i:nth-child(5) { animation-delay: 0.32s; }

.bt-map { display: flex; align-items: center; }
.bt-map canvas { display: block; width: 100%; height: auto; }



/* Icons in the nodes: one stroke weight, one grid, no colour. A row of tinted
   squares is the thing that makes a diagram look generated. */
.wn-ic { display: inline-flex; width: 16px; height: 16px; color: rgba(230, 241, 236, 0.7); flex: none; }
.wn-ic svg { width: 100%; height: 100%; }
.wn-agent .wn-ic { color: var(--mint); }
.wn-you .wn-ic { color: var(--mint); }

.wire-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.wire-lines .wl {
  fill: none;
  stroke: rgba(255, 255, 255, 0.26);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}
.wire-lines .wl-run { stroke: rgba(110, 231, 183, 0.45); }

/* Work travelling the wires: one packet per edge that carries something in or
   out. It fades in and out along its own run, in script, because the script is
   what knows how far along the run it is. */
.wire-pk {
  fill: var(--mint);
  filter: drop-shadow(0 0 4px rgba(110, 231, 183, 0.9));
}

.wn-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 1px solid rgba(110, 231, 183, 0.55);
  opacity: 0;
  pointer-events: none;
}
.js-anim .wn-pulse { animation: corepulse 3.4s cubic-bezier(0.2, 0.8, 0.3, 1) infinite; }
@keyframes corepulse {
  0%, 42% { opacity: 0; transform: scale(0.94); }
  52% { opacity: 0.9; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(1.14); }
}
.wn-core { position: relative; }
.wn-mark { width: 18px; height: 18px; }


/* The hours, said once, under the thing that saves them. */
.saved {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.5rem 2rem;
  align-items: baseline;
}
.saved-n {
  white-space: nowrap;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  background: linear-gradient(120deg, var(--green-2), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.saved-l { font-size: 1.0625rem; color: var(--sub); }
.saved .more { grid-column: 2; margin-top: 0.35rem; }
@media (max-width: 640px) {
  .saved { grid-template-columns: minmax(0, 1fr); }
  .saved .more { grid-column: 1; }
}

/* The desk is the point of the diagram, not the last box in a row. */
.wn-desk {
  border-color: rgba(110, 231, 183, 0.55);
  background: linear-gradient(140deg, rgba(18, 166, 106, 0.28), rgba(16, 156, 156, 0.16));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.08);
}
.more-wide { width: 100%; max-width: 24rem; }
.bt-more p + p, .bt-more ul { margin-top: 0.7rem; }
.bt-more ul { list-style: none; }
.bt-more li { position: relative; padding-left: 1.1rem; }
.bt-more li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(110, 231, 183, 0.7);
}
.dial { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* ---------- the wiring, expanded ---------- */

/* The gaps are the diagram. Every line is drawn in one of them, so a gap that
   is too small is a line with nowhere to go. */
.wire-mid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; max-width: 28rem; margin: clamp(2.5rem, 5vw, 3.75rem) auto; }
.wire-mid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; }
.wn-agent {
  border-color: rgba(110, 231, 183, 0.28);
  background: rgba(110, 231, 183, 0.08);
  color: rgba(230, 241, 236, 0.95);
  font-weight: 560;
}
.wire-core { padding: 0; }
.wire-desk { margin: clamp(2.5rem, 5vw, 3.75rem) 0; }

/* ---------- the flow ----------

   The financial section's ground rather than its figure: a field of the brand's
   own colours, warped and moving slowly. There is nothing to read off it. The
   numbers beside it are the fact; this is the weather they sit in. */

.flow-band { position: relative; isolation: isolate; overflow: clip; }
#flow {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.flow-band .timeline li { border-color: rgba(10, 31, 25, 0.1); }

/* ---------- the signature, as a thing that happens ----------

   Three sheets, a name written across the top one, a seal closing over it, and
   the trail writing itself underneath. No icon chips: the argument is that this
   looks like the paper it replaces. */

.sig { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.sig-stack { position: relative; width: 100%; max-width: 24rem; padding: 1.5rem 1.5rem 0; }
.sheet {
  display: block;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.sheet-3, .sheet-2 { position: absolute; left: 50%; top: 0; height: 100%; }
.sheet-3 { width: 84%; transform: translateX(-50%) translateY(-14px) scale(0.94); opacity: 0.5; }
.sheet-2 { width: 92%; transform: translateX(-50%) translateY(-7px) scale(0.97); opacity: 0.75; }
.sheet-1 { position: relative; padding: 1.75rem 1.75rem 1.5rem; box-shadow: var(--sh-lg); }
.js-anim .sig.in .sheet-3 { animation: fan 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.js-anim .sig.in .sheet-2 { animation: fan 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) 0.08s forwards; }
@keyframes fan { from { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.9); } }

.sig-mark { display: block; width: 100%; height: auto; }
.sig-path { stroke-dasharray: 900; stroke-dashoffset: 900; }
.js-anim .sig.in .sig-path { animation: draw 2.2s cubic-bezier(0.35, 0.6, 0.25, 1) 0.35s forwards; }
.sig-line { display: block; height: 1px; background: var(--ink); opacity: 0.5; margin-top: 0.4rem; }

.seal { position: absolute; right: 1.1rem; bottom: 1rem; width: 62px; height: 62px; }
.seal-ring { stroke-dasharray: 340; stroke-dashoffset: 340; }
.seal-ring-2 { stroke-dasharray: 280; stroke-dashoffset: 280; }
.seal-tick { stroke-dasharray: 70; stroke-dashoffset: 70; }
.js-anim .sig.in .seal-ring { animation: draw 0.9s ease 2.3s forwards; }
.js-anim .sig.in .seal-ring-2 { animation: draw 0.9s ease 2.45s forwards; }
.js-anim .sig.in .seal-tick { animation: draw 0.5s ease 2.9s forwards; }

.trail { list-style: none; width: 100%; max-width: 24rem; border-top: 1px solid var(--line); }
.trail li {
  display: flex;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.8125rem;
}
.t-when { color: var(--faint); font-variant-numeric: tabular-nums; }
.t-what { color: var(--sub); }
.js-anim .sig.in .trail li { animation: rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.js-anim .sig.in .trail li:nth-child(1) { animation-delay: 3.1s; }
.js-anim .sig.in .trail li:nth-child(2) { animation-delay: 3.25s; }
.js-anim .sig.in .trail li:nth-child(3) { animation-delay: 3.4s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sig-path, .seal-ring, .seal-ring-2, .seal-tick { stroke-dashoffset: 0; }
}

/* ---------- the wiring ----------

   Stripe's shape: a dotted field, boxes for the things that already exist, and
   dotted runs into the one box that is ours. What travels the runs is a case. */

.wire {
  position: relative;
  isolation: isolate;
  margin-top: 2.25rem;
  border-radius: 18px;
  background: var(--forest);
  padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
}
.wire-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 0);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 85%);
  mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 85%);
}
.wire-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; }
.wire-out { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
/* Opaque, so a wire passing behind a node never shows through the middle of
   its label. That transparency is what read as everything overlapping. */
.wn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  min-height: 46px;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: #0A3025;
  font-size: 0.8125rem;
  color: rgba(230, 241, 236, 0.9);
}
.wire-core { display: flex; justify-content: center; }
.wn-core {
  min-width: 13rem;
  min-height: 56px;
  font-size: 1rem;
  font-weight: 620;
  color: #fff;
  border-color: rgba(110, 231, 183, 0.45);
  background: linear-gradient(150deg, rgba(18, 166, 106, 0.35), rgba(16, 156, 156, 0.22));
  box-shadow: 0 0 0 6px rgba(110, 231, 183, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
}
.wn-core svg { width: 18px; height: 18px; }
/* The desk is the width of the line, because everything crosses it. */
.wn-desk {
  width: 100%;
  min-height: 54px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  border-color: rgba(110, 231, 183, 0.42);
  border-style: dashed;
  background: rgba(110, 231, 183, 0.1);
}

/* ---------- the sheet ----------

   Detail opens over the page rather than inside a tile. A tile that grows to
   hold three paragraphs drags the five tiles beside it out of shape, which is
   what made the grid look broken whenever anything was open. */

.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 560;
  color: var(--green);
  cursor: pointer;
}
.more-btn:hover { color: var(--green-2); }
.more-btn:focus-visible { outline: 3px solid var(--green-2); outline-offset: 4px; border-radius: 3px; }
.more-i { position: relative; width: 11px; height: 11px; }
.more-i::before, .more-i::after {
  content: '';
  position: absolute;
  left: 0; top: 4.5px;
  width: 11px; height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.more-i::after { transform: rotate(90deg); }
.more-btn:hover .more-i::after { transform: rotate(45deg); }
.dark .more-btn { color: var(--mint); }
.dark .more-btn:hover { color: #fff; }

.sheet-modal {
  /* The reset zeroes every margin, which is also the one the user agent uses
     to centre a modal. Put it back or the sheet sits against the top edge. */
  margin: auto;
  border: 0;
  padding: 0;
  background: transparent;
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--ink);
}
.sheet-modal::backdrop { background: rgba(4, 36, 28, 0.5); backdrop-filter: blur(3px); }
.sheet-in {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: 0 40px 90px rgba(4, 36, 28, 0.28);
}
.sheet-in h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  letter-spacing: -0.028em;
  font-weight: 660;
  max-width: 22ch;
  padding-right: 4.5rem;
}
.sheet-in p { margin-top: 1rem; font-size: 1rem; line-height: 1.65; color: var(--sub); max-width: 62ch; }
.sheet-in ul { margin-top: 1rem; list-style: none; }
.sheet-in li { position: relative; padding-left: 1.2rem; margin-top: 0.5rem; font-size: 1rem; line-height: 1.6; color: var(--sub); }
.sheet-in li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-2);
}
.sheet-in strong { color: var(--ink); font-weight: 620; }
.sheet-x {
  position: absolute;
  top: 1.15rem; right: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 560;
  color: var(--sub);
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
.sheet-x:hover { color: var(--ink); border-color: #C9D6CF; }
.sheet-x:focus-visible {
  outline: 0;
  color: var(--green);
  border-color: var(--green-2);
  background: var(--tint);
}
.js-anim .sheet-modal[open] .sheet-in { animation: sheetin 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes sheetin { from { opacity: 0; transform: translateY(12px) scale(0.99); } }

/* The four things that are true about control, said as terms. */
.plain { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.plain > div { padding-top: 1rem; border-top: 1px solid var(--line); }
.plain dt { font-size: 0.9375rem; font-weight: 620; letter-spacing: -0.012em; }
.plain dd { margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.6; color: var(--sub); max-width: 40ch; }

/* ---------- two up ---------- */


.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.75rem;
  align-items: start;
}

/* ---------- timeline ---------- */

.timeline { list-style: none; margin-top: 2.5rem; }
.timeline li {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.tl-when { font-weight: 620; font-size: 0.9375rem; letter-spacing: -0.015em; }
.tl-what { font-size: 0.9375rem; color: var(--sub); max-width: 62ch; }
.tl-what strong { color: var(--ink); font-weight: 620; }

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.card h3 { margin-top: 0.95rem; }
.card p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--sub); }

/* ---------- vault ---------- */

.vault-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.vault-row img {
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.vault-row img:nth-child(2) { transform: translateY(-14px); }
.vault-row:hover img:nth-child(2) { transform: translateY(-18px); }

/* ---------- pricing ---------- */

.prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  align-items: start;
}
.price { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.85rem; }
.price-lead { border-color: transparent; box-shadow: var(--sh-lg); position: relative; }
.price-lead::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  padding: 1px;
  background: linear-gradient(140deg, var(--mint), var(--teal) 45%, var(--amber));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.price-name { font-weight: 620; font-size: 0.9375rem; }
.price-fig {
  margin-top: 0.55rem;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 660;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-fig .cur { font-size: 0.55em; vertical-align: 0.34em; margin-right: 0.05em; color: var(--sub); }
.price-fig.price-soon { font-size: clamp(1.45rem, 2.3vw, 1.85rem); letter-spacing: -0.03em; color: var(--ink-2); }
.per {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.875rem;
  font-weight: 440;
  letter-spacing: 0;
  color: var(--sub);
}
.ticks { list-style: none; margin: 1.4rem 0; }
.ticks li { position: relative; padding-left: 1.55rem; margin-top: 0.55rem; font-size: 0.9375rem; color: var(--sub); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--green-2);
  border-bottom: 2px solid var(--green-2);
  transform: rotate(-45deg);
}

/* ---------- the ask ---------- */

.cta { position: relative; isolation: isolate; overflow: clip; padding: clamp(4rem, 8vw, 6.5rem) 0; }
.cta-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 8% 18%, rgba(110, 231, 183, 0.45), transparent 62%),
    radial-gradient(45% 60% at 90% 28%, rgba(16, 156, 156, 0.3), transparent 62%),
    radial-gradient(50% 60% at 62% 100%, rgba(224, 145, 58, 0.22), transparent 65%),
    linear-gradient(180deg, #FFFFFF, #F4FBF7);
}
.cta-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cta-copy h2 { max-width: 12ch; }

.file-card { background: #fff; border-radius: 18px; box-shadow: var(--sh-lg); overflow: hidden; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { padding: 0.85rem 1.1rem 0.8rem; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.field:nth-of-type(2n) { border-right: 0; }
.field-wide { grid-column: 1 / -1; border-right: 0; }
.field label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 640;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.25rem;
}
.field input {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  padding: 0.15rem 0;
}
.field input[type='number'] { font-variant-numeric: tabular-nums lining-nums; }
.field input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--green-2); }
.field input[aria-invalid='true'] { box-shadow: inset 0 -2px 0 var(--coral); }

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

.form-privacy {
  max-width: 62ch;
  margin: 1rem 0 0;
  color: var(--ink-soft, #52615c);
  font-size: .78rem;
  line-height: 1.55;
}

.form-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.err { display: block; font-size: 0.71875rem; color: var(--coral); }
.err:empty { display: none; }
.form-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.2rem; }
.form-status { font-size: 0.875rem; min-height: 1.2em; color: var(--sub); }
.form-status.ok { color: var(--green); }
.form-status.fail { color: var(--coral); }

/* ---------- footer ---------- */

.foot { background: var(--forest); color: rgba(230, 241, 236, 0.72); padding-top: 4rem; }
.foot .brand-text { color: #fff; }
.foot-brand-col { max-width: 22rem; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem; padding-bottom: 3rem; }
.foot-sub { margin-top: 1rem; font-size: 0.875rem; max-width: 32ch; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.foot-cols div { display: flex; flex-direction: column; gap: 0.55rem; }
.foot-h { font-weight: 620; font-size: 0.8125rem; color: #fff; margin-bottom: 0.3rem; }
.foot-cols a { font-size: 0.875rem; color: rgba(230, 241, 236, 0.66); text-decoration: none; transition: color 0.15s ease; }
.foot-cols a:hover { color: #fff; }
.foot-plain { font-size: 0.875rem; color: rgba(230, 241, 236, 0.55); }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.6rem;
  padding-bottom: 2.5rem;
  font-size: 0.8125rem;
  color: rgba(230, 241, 236, 0.5);
}

/* ---------- narrower ---------- */

@media (max-width: 1000px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col-wide, .cta-in { grid-template-columns: minmax(0, 1fr); }
  .two-up { grid-template-columns: minmax(0, 1fr); }
  .prices { grid-template-columns: minmax(0, 1fr); }
  .foot-brand-col { max-width: 22rem; }
.foot-in { grid-template-columns: minmax(0, 1fr); }
  .hero-copy > * { max-width: 100%; }
}

@media (max-width: 780px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .topbar-in { height: 62px; gap: 0.75rem; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .field { border-right: 0; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag summary { flex-wrap: wrap; gap: 0.35rem 1rem; }
  .ag-t { width: auto; }
  .ag-s { flex-basis: 100%; }
  .ag-b { padding-left: 0; }
}

@media (max-width: 560px) {
  .topbar-cta .btn { display: none; }
  .figs { grid-template-columns: minmax(0, 1fr); }
  .vault-row img:nth-child(2) { transform: none; }
}


@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-a { grid-column: 1 / 3; }
  .bt, .bt-a, .bt-b, .bt-c, .bt-d, .bt-e, .bt-f { grid-row: auto; }
  .bt-b, .bt-c, .bt-d, .bt-e, .bt-f { grid-column: auto; }
  .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .line-mini .stn:nth-child(n+4) { display: none; }
}

@media (max-width: 640px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bt-a { grid-column: 1 / 2; }
  .crew { grid-template-columns: minmax(0, 1fr); }
  .wire-in, .wire-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruled > .wrap { border-left: 0; border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .sw-d { max-height: none; opacity: 1; margin-top: 0.55rem; }
}

/* Expandable product bento. One card carries the wide state; the rest keep
   their place, following the same restrained expansion model as Stripe's
   current solutions grid without borrowing its visual identity. */
.bento {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.bt,
.bt-a,
.bt-b,
.bt-c,
.bt-d,
.bt-e,
.bt-f {
  grid-column: auto;
  grid-row: auto;
}
.bt {
  position: relative;
  isolation: isolate;
  flex: 1 1 calc(25% - 12px);
  min-width: 210px;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  cursor: pointer;
  transition:
    background-color .8s cubic-bezier(.165,.84,.44,1),
    border-color .8s cubic-bezier(.165,.84,.44,1),
    box-shadow .8s cubic-bezier(.165,.84,.44,1),
    z-index .1s steps(1);
  transform-origin: 0 0;
  will-change: transform;
}
.bt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(110,231,183,.1);
  border-radius: inherit;
  clip-path: inset(5px round 13px);
  pointer-events: none;
  transition: clip-path .8s cubic-bezier(.165,.84,.44,1), border-color .8s ease;
}
.bt:hover { background: #0A3427; border-color: rgba(110,231,183,.24); }
.bt:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.bt.is-open {
  flex-basis: calc(50% - 8px);
  z-index: 2;
  background: #0A3427;
  border-color: rgba(110,231,183,.34);
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.bt.is-open::after { clip-path: inset(1px round 17px); border-color: rgba(110,231,183,.28); }
.bt > * { position: relative; z-index: 1; }
.bt-a,
.bt-d { padding: 0; gap: 0; }
.bt-a:not(.is-open) .line-mini { grid-template-columns: repeat(3, minmax(0,1fr)); }
.bt-a:not(.is-open) .line-mini .stn:nth-child(n+4) { display: none; }
.bt-map { justify-content: center; }
.bt-map canvas { width: min(100%, 300px); max-height: none; object-fit: contain; }
.bt-detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  max-height: 0;
  margin: 0 1.3rem;
  padding-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  border-top: 1px solid rgba(255,255,255,.1);
  transition:
    max-height .8s cubic-bezier(.165,.84,.44,1),
    padding .8s cubic-bezier(.165,.84,.44,1),
    opacity .35s ease,
    transform .8s cubic-bezier(.165,.84,.44,1);
}
.bt-detail span {
  min-width: 0;
  padding: 0 .7rem;
  border-right: 1px solid rgba(255,255,255,.1);
  color: rgba(230,241,236,.68);
  font-size: .72rem;
  line-height: 1.35;
}
.bt-detail span:first-child { padding-left: 0; }
.bt-detail span:last-child { padding-right: 0; border-right: 0; }
.bt.is-open .bt-detail {
  max-height: 5rem;
  padding-top: .9rem;
  padding-bottom: 1.1rem;
  opacity: 1;
  transform: none;
}
.bt-i { transition: transform .8s cubic-bezier(.165,.84,.44,1); }
.bt-i::after { transition: transform .8s cubic-bezier(.165,.84,.44,1), opacity .35s ease, background-color .2s ease; }
.bt.is-open .bt-i { transform: rotate(180deg); }
.bt.is-open .bt-i::after { transform: rotate(0); opacity: 0; }

.js-anim .bt.is-replaying .crd { animation: land-again .65s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .bt.is-replaying .stn:nth-child(2) .crd { animation-delay: .08s; }
.js-anim .bt.is-replaying .stn:nth-child(3) .crd { animation-delay: .16s; }
.js-anim .bt.is-replaying .stn:nth-child(4) .crd { animation-delay: .24s; }
.js-anim .bt.is-replaying .stn:nth-child(5) .crd { animation-delay: .32s; }
.js-anim .bt-b.is-replaying .meter-fill { animation: fill-again 1.1s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .bt-c.is-replaying .dots i { animation: tick-again .45s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .bt-c.is-replaying .dots i:nth-child(2) { animation-delay: .04s; }
.js-anim .bt-c.is-replaying .dots i:nth-child(3) { animation-delay: .08s; }
.js-anim .bt-c.is-replaying .dots i:nth-child(4) { animation-delay: .12s; }
.js-anim .bt-c.is-replaying .dots i:nth-child(5) { animation-delay: .16s; }
.js-anim .bt-c.is-replaying .dots i:nth-child(6) { animation-delay: .2s; }
.js-anim .bt-c.is-replaying .dots i:nth-child(7) { animation-delay: .24s; }
.js-anim .bt-c.is-replaying .dots i:nth-child(8) { animation-delay: .28s; }
.js-anim .bt-c.is-replaying .dots i:nth-child(9) { animation-delay: .32s; }
.js-anim .bt-c.is-replaying .dots i:nth-child(10) { animation-delay: .36s; }
.js-anim .bt-e.is-replaying .check i::after { animation: soak-again .3s ease both; }
.js-anim .bt-e.is-replaying .check span:nth-child(2) i::after { animation-delay: .08s; }
.js-anim .bt-e.is-replaying .check span:nth-child(3) i::after { animation-delay: .16s; }
.js-anim .bt-e.is-replaying .check span:nth-child(4) i::after { animation-delay: .24s; }
.js-anim .bt-e.is-replaying .check span:nth-child(5) i::after { animation-delay: .32s; }
@keyframes land-again { from { opacity:.15; transform:translateY(-12px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes fill-again { from { width:0; } to { width:68%; } }
@keyframes tick-again { from { opacity:.18; transform:scaleY(.25); } to { opacity:1; transform:none; } }
@keyframes soak-again { from { opacity:0; transform:scale(.4) rotate(-45deg); } to { opacity:1; transform:scale(1) rotate(-45deg); } }

.bento-band { padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(3rem, 5.5vw, 4.5rem); }
.bento-h { margin-bottom: 1.35rem; }
.section { padding: clamp(3rem, 5.5vw, 4.75rem) 0; }
#pricing .prices { grid-template-columns: minmax(0, 42rem); justify-content: center; margin-top: 0; }

.trail { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trail li { padding: .45rem; justify-content: center; border-right: 1px solid var(--hair); font-size: .66rem; text-align: center; }
.trail li:last-child { border-right: 0; }
.t-what::before { content: '✓'; margin-right: .3rem; color: var(--green); }

.cta { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.cta-in { gap: 2rem; }
.file-card { box-shadow: 0 18px 50px rgba(4,36,28,.11); }
.foot { padding-top: 2.75rem; }
.foot-in { padding-bottom: 2rem; }
.foot-bottom { padding-top: 1.1rem; padding-bottom: 1.6rem; }

@media (max-width: 640px) {
  .bento-band { padding: 2.6rem 0 3rem; }
  .bento-h { margin-bottom: 1.15rem; }
  .section { padding: 2.7rem 0; }
  .wire { margin-top: 1.6rem; }
  .price { padding: 1.4rem; }
  .trail li { font-size: .57rem; }
  .cta { padding: 2.75rem 0; }
  .cta-in { gap: 1.25rem; }
  .field { padding: .68rem .8rem; }
  .form-foot { padding: .9rem; }
  .foot { padding-top: 2.2rem; }
  .foot-in { gap: 1.5rem; padding-bottom: 1.5rem; }
  .foot-bottom { padding-bottom: 1.35rem; }
}

@media (max-width: 920px) {
  .bt { flex-basis: calc(50% - 6px); min-width: 0; min-height: 285px; }
  .bt.is-open { flex-basis: 100%; min-height: 330px; }
  .bt-a.is-open .line-mini .stn { display: block; }
  .bt-a.is-open .line-mini { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .bento { gap: 9px; }
  .bt { flex-basis: 100%; min-height: 175px; border-radius: 15px; }
  .bt.is-open { min-height: 230px; }
  .bt-a.is-open, .bt-d.is-open, .bt-e.is-open { min-height: 315px; }
  .bt-detail { margin-left: 1rem; margin-right: 1rem; }
  .bt-detail span { padding-left: .45rem; padding-right: .45rem; font-size: .67rem; }
  .bt-live, .bt-map { padding-left: 1rem; padding-right: 1rem; }
  .bt-foot { padding-left: 1rem; padding-right: 1rem; }
  .bt-map canvas { width: min(100%, 240px); max-height: none; }
  .bt-e:not(.is-open) .check span:nth-child(n+4) { display: none; }
  .bt-a.is-open .line-mini { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bt-a.is-open .line-mini .stn:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bt, .bt::after, .bt-detail, .bt-i, .bt-i::after { transition: none !important; }
}

/* ---------- one continuous product sequence ----------

   Copy is limited to a short heading and whatever detail the visitor has
   actively selected. */

/* The bento begins immediately after the hero. Its cards already carry their
   own labels, so a second visible title only said the same thing again. */
.bento-band { padding-top: clamp(1.75rem, 3.4vw, 2.6rem); }

/* Select an agent and the real route through the existing diagram comes
   forward. The rest stays present as context, rather than disappearing. */
.wn-agent {
  appearance: none;
  font: inherit;
  cursor: pointer;
  transition:
    background-color .65s cubic-bezier(.165,.84,.44,1),
    border-color .65s cubic-bezier(.165,.84,.44,1),
    color .65s ease,
    transform .65s cubic-bezier(.165,.84,.44,1),
    box-shadow .65s ease;
}
.wn-agent:hover { border-color: rgba(110,231,183,.62); }
.wn-agent:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.wn-agent.is-active {
  color: #fff;
  border-color: rgba(110,231,183,.85);
  background: linear-gradient(145deg, rgba(18,166,106,.52), rgba(16,156,156,.26));
  box-shadow: 0 0 0 5px rgba(110,231,183,.08), 0 16px 34px rgba(0,0,0,.22);
  transform: translateY(-2px);
}
.wire-lines .wl {
  transition: opacity .55s ease, stroke .55s ease, stroke-width .55s ease, filter .55s ease;
}
.wire-lines .wl.is-dim { opacity: .16; }
.wire-lines .wl.is-hot {
  opacity: 1;
  stroke: var(--mint);
  stroke-width: 1.8;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 5px rgba(110,231,183,.5));
}
.wire-pk { transition: opacity .45s ease, fill .45s ease, r .45s ease; }
.wire-pk.is-dim { opacity: .08 !important; }
.wire-pk.is-hot { fill: #fff; filter: drop-shadow(0 0 7px rgba(110,231,183,1)); }
.wire-note {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(5.5rem, .25fr) minmax(0, 1fr);
  gap: 1rem;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(230,241,236,.68);
  font-size: .8125rem;
  line-height: 1.45;
}
.wire-note strong { color: #fff; font-weight: 620; }
.js-anim .wire-note.is-changing span { animation: note-swap .55s cubic-bezier(.165,.84,.44,1); }
@keyframes note-swap {
  from { opacity: .12; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Approval is an accordion without paragraphs stacked beneath every label.
   Choosing a term reruns the real signature and focuses the matching audit
   event. */
.control-tabs { margin-top: 1.45rem; border-bottom: 1px solid var(--line); }
.control-tab {
  position: relative;
  display: block;
  width: 100%;
  padding: .9rem 2.5rem .9rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: .9375rem;
  font-weight: 590;
  color: var(--sub);
  cursor: pointer;
  transition: color .35s ease, padding-left .65s cubic-bezier(.165,.84,.44,1);
}
.control-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--green-2), var(--teal));
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  transition: transform .65s cubic-bezier(.165,.84,.44,1);
}
.control-tab::after {
  content: '+';
  position: absolute;
  right: .1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 1.05rem;
  font-weight: 420;
  transition: transform .65s cubic-bezier(.165,.84,.44,1), color .35s ease;
}
.control-tab:hover { color: var(--ink); }
.control-tab:focus-visible { outline: 3px solid var(--green-2); outline-offset: -3px; }
.control-tab.is-active { color: var(--ink); padding-left: 2.1rem; }
.control-tab.is-active::before { transform: translateY(-50%) scaleX(1); }
.control-tab.is-active::after { color: var(--green-2); transform: translateY(-50%) rotate(45deg); }
.trail li {
  opacity: .48;
  transition: opacity .45s ease, background-color .45s ease, color .45s ease;
}
.trail li.is-active { opacity: 1; background: rgba(18,166,106,.08); }
.js-anim .sig.is-replaying .sheet-3 { animation: fan-again .75s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .sig.is-replaying .sheet-2 { animation: fan-again .75s cubic-bezier(.165,.84,.44,1) .08s both; }
.js-anim .sig.is-replaying .sig-path { animation: draw-again 1.85s cubic-bezier(.35,.6,.25,1) .2s both; }
.js-anim .sig.is-replaying .trail li.is-active { animation: trail-focus .7s cubic-bezier(.165,.84,.44,1) 1.45s both; }
@keyframes fan-again { from { opacity: 0; transform: translateX(-50%) translateY(7px) scale(.9); } }
@keyframes draw-again { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes trail-focus { from { opacity: .2; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* These are the existing record screens, compressed until selected. The open
   screen pans through the actual capture so expansion reveals detail instead
   of manufacturing a dashboard. */
#vault .two-col-wide { grid-template-columns: minmax(12rem, .34fr) minmax(0, .66fr); }
.vault-row {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  height: clamp(22rem, 39vw, 29rem);
  min-width: 0;
}
.vault-card {
  position: relative;
  isolation: isolate;
  flex: 1 1 19%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(4,36,28,.08);
  transform-origin: 0 0;
  transition:
    flex-basis .8s cubic-bezier(.165,.84,.44,1),
    border-color .8s ease,
    box-shadow .8s ease;
  will-change: transform;
}
.vault-card.is-open {
  flex-basis: 58%;
  border-color: rgba(11,122,75,.35);
  box-shadow: 0 24px 58px rgba(4,36,28,.16);
}
.vault-card:focus-visible { outline: 3px solid var(--green-2); outline-offset: 3px; }
.vault-window { flex: 1; min-height: 0; overflow: hidden; background: #E7F1EA; }
.vault-window img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  object-position: 50% 0%;
  transform: none;
  transition: filter .8s ease, opacity .8s ease;
}
.vault-card:not(.is-open) img { filter: saturate(.55); opacity: .72; }
.vault-row:hover img:nth-child(2),
.vault-row img:nth-child(2) { transform: none; }
.vault-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-height: 3.2rem;
  padding: .75rem .9rem;
  border-top: 1px solid var(--hair);
  color: var(--sub);
  font-size: .75rem;
  font-weight: 590;
  white-space: nowrap;
}
.vault-card.is-open .vault-foot { color: var(--ink); }
.vault-foot i { position: relative; width: 11px; height: 11px; flex: none; }
.vault-foot i::before,
.vault-foot i::after {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 1.5px;
  background: currentColor;
  transition: transform .8s cubic-bezier(.165,.84,.44,1), opacity .35s ease;
}
.vault-foot i::after { transform: rotate(90deg); }
.vault-card.is-open .vault-foot i::before { transform: rotate(180deg); }
.vault-card.is-open .vault-foot i::after { transform: rotate(180deg); opacity: 0; }
.js-anim .vault-card.is-open .vault-window img { animation: vault-scan 11s cubic-bezier(.45,.05,.2,1) 1s infinite alternate; }
@keyframes vault-scan { to { object-position: 50% 100%; } }

/* Pricing is one concise horizontal fact, not a large card carrying a heading
   that merely says "pricing" again. */
#pricing .prices { grid-template-columns: minmax(0, 62rem); }
.price-lead {
  display: grid;
  grid-template-columns: minmax(12rem, .65fr) minmax(15rem, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.price-fig { margin-top: 0; }
.price-lead .ticks { margin: 0; display: grid; gap: .35rem; }
.price-lead .ticks li { margin-top: 0; }
.js-anim .motion-section.is-live .price-lead::before {
  background-size: 240% 240%;
  animation: price-edge 4.8s ease infinite alternate;
}
.js-anim .motion-section.is-live .ticks li { animation: price-in .65s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .motion-section.is-live .ticks li:nth-child(2) { animation-delay: .12s; }
@keyframes price-edge { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes price-in { from { opacity: .15; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* The form stays plain. Motion is spent on the real fields arriving in order
   and on the existing colour field behind them. */
.js-anim .cta.is-live .cta-mesh { animation: cta-field 10s ease-in-out infinite alternate; }
.js-anim .cta.is-live .field { animation: field-in .65s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .cta.is-live .field:nth-child(2) { animation-delay: .06s; }
.js-anim .cta.is-live .field:nth-child(3) { animation-delay: .12s; }
.js-anim .cta.is-live .field:nth-child(4) { animation-delay: .18s; }
.js-anim .cta.is-live .field:nth-child(5) { animation-delay: .24s; }
@keyframes cta-field { to { transform: scale(1.06) translate3d(1.5%, -1%, 0); filter: saturate(1.15); } }
@keyframes field-in { from { opacity: .3; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 920px) {
  #vault .two-col-wide { grid-template-columns: minmax(0, 1fr); }
  .vault-row { height: clamp(21rem, 62vw, 29rem); }
  .price-lead { grid-template-columns: minmax(11rem, .75fr) minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .vault-row { flex-direction: column; height: 34rem; gap: .55rem; }
  .vault-card { flex-basis: 12%; min-height: 0; }
  .vault-card.is-open { flex-basis: 64%; }
  .vault-foot { min-height: 2.7rem; padding: .6rem .8rem; }
  .price-lead { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .control-tab,
  .control-tab::before,
  .control-tab::after,
  .trail li,
  .vault-card,
  .vault-window img,
  .vault-foot i::before,
  .vault-foot i::after { animation: none !important; transition: none !important; }
}

/* ---------- cleaner reading order ----------

   The short gradient rules and the vertical frame competed with every heading.
   Sections now separate by surface and content only; the few remaining rules
   belong to controls that can actually be opened. */

.price-lead { border: 0; }
.price-lead::before { display: none; }

/* ---------- case journey ----------

   One active handoff at a time. The left side reads like Stripe's disclosures;
   the right side is a real case moving from the existing input to the existing
   output, with no invented dashboard in between. */

.route-story {
  display: grid;
  grid-template-columns: minmax(15rem, .34fr) minmax(0, .66fr);
  min-height: 31rem;
  margin-top: 2rem;
  overflow: hidden;
  border-radius: 22px;
  background: #F2F7F4;
  box-shadow: 0 24px 70px rgba(4,36,28,.11);
}
.route-tabs {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .9rem;
  background: #F4F8F5;
}
.route-tab {
  position: relative;
  display: block;
  width: 100%;
  min-height: 3.55rem;
  padding: 1rem 2.7rem 1rem 1rem;
  border: 0;
  border-radius: 13px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--sub);
  cursor: pointer;
  transition:
    min-height .75s cubic-bezier(.165,.84,.44,1),
    background-color .45s ease,
    color .45s ease,
    box-shadow .65s cubic-bezier(.165,.84,.44,1),
    transform .65s cubic-bezier(.165,.84,.44,1);
}
.route-tab > span { display: block; font-size: 1rem; font-weight: 620; letter-spacing: -.016em; }
.route-tab small {
  display: block;
  max-width: 28ch;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(7px);
  color: var(--sub);
  font-size: .8125rem;
  line-height: 1.48;
  transition:
    max-height .75s cubic-bezier(.165,.84,.44,1),
    margin-top .75s cubic-bezier(.165,.84,.44,1),
    opacity .35s ease,
    transform .75s cubic-bezier(.165,.84,.44,1);
}
.route-tab > i {
  position: absolute;
  right: 1.1rem;
  top: 1.35rem;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .65s cubic-bezier(.165,.84,.44,1), color .35s ease;
}
.route-tab:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.route-tab:focus-visible { outline: 3px solid var(--green-2); outline-offset: -3px; }
.route-tab.is-active {
  min-height: 6.6rem;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 12px 30px rgba(4,36,28,.1);
  transform: translateX(3px);
}
.route-tab.is-active small { max-height: 3rem; margin-top: .4rem; opacity: 1; transform: none; }
.route-tab.is-active > i { color: var(--green-2); transform: rotate(225deg) translate(-2px,-2px); }

.route-stage {
  --route-accent: #6EE7B7;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(8.5rem, 1fr) minmax(11rem, 1.1fr) minmax(8.5rem, 1fr);
  gap: clamp(.75rem, 2.5vw, 2rem);
  align-items: center;
  min-width: 0;
  padding: clamp(2rem, 4.5vw, 3.8rem);
  overflow: hidden;
  background:
    radial-gradient(75% 60% at 50% 50%, rgba(18,166,106,.18), transparent 72%),
    var(--forest);
  color: #fff;
}
.route-stage[data-route='records'] { --route-accent: #8FC7AB; }
.route-stage[data-route='packet'] { --route-accent: #62D5CF; }
.route-stage[data-route='deadline'] { --route-accent: #E0A35B; }
.route-stage[data-route='billing'] { --route-accent: #F0C778; }
.route-field {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 75% at 50% 50%, #000 25%, transparent 88%);
  mask-image: radial-gradient(80% 75% at 50% 50%, #000 25%, transparent 88%);
}
.route-lane {
  position: absolute;
  z-index: -2;
  left: 6%;
  right: 6%;
  top: 37%;
  height: 26%;
  background: linear-gradient(90deg, transparent, rgba(110,231,183,.08) 18%, rgba(255,255,255,.08) 50%, rgba(110,231,183,.08) 82%, transparent);
  clip-path: polygon(0 34%, 44% 34%, 50% 0, 56% 34%, 100% 34%, 100% 66%, 56% 66%, 50% 100%, 44% 66%, 0 66%);
}
.route-group {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  min-width: 0;
}
.route-group span {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: .7rem .85rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: rgba(230,241,236,.78);
  font-size: .75rem;
  line-height: 1.3;
  backdrop-filter: blur(5px);
}
.route-result span {
  border-color: color-mix(in srgb, var(--route-accent) 40%, transparent);
  background: color-mix(in srgb, var(--route-accent) 13%, transparent);
  color: #fff;
}
.route-engine {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 13.5rem;
}
.route-brand {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: min(100%, 13rem);
  min-height: 4.4rem;
  padding: .85rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(110,231,183,.48);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(18,166,106,.42), rgba(16,156,156,.2));
  box-shadow: 0 0 0 7px rgba(110,231,183,.06), 0 24px 50px rgba(0,0,0,.32);
  font-size: .9375rem;
  font-weight: 630;
}
.route-brand::after {
  content: '';
  position: absolute;
  inset: -80% -35%;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform: translateX(-55%);
  animation: route-sheen 4.8s cubic-bezier(.65,0,.35,1) infinite;
}
.route-brand svg { width: 20px; height: 20px; flex: none; }
.route-engine strong {
  position: relative;
  z-index: 6;
  margin-top: .85rem;
  color: var(--route-accent);
  font-size: .75rem;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.route-document {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 3.4rem;
  height: 4.35rem;
  padding: .72rem .6rem;
  border-radius: 7px;
  background: #F6FBF8;
  box-shadow: 0 15px 35px rgba(0,0,0,.28);
  transform-origin: center;
  animation: route-travel 4.8s cubic-bezier(.6,0,.25,1) infinite;
}
.route-document i { display: block; height: 3px; border-radius: 4px; background: #AFC4B9; }
.route-document i:nth-child(2) { width: 72%; }
.route-document i:nth-child(3) { width: 86%; }
@keyframes route-travel {
  0% { opacity: 0; transform: translate3d(-250px,22px,0) rotate(-7deg) scale(.88); }
  12% { opacity: 1; }
  38% { opacity: 1; transform: translate3d(-78px,-4px,0) rotate(-2deg) scale(1); }
  49% { opacity: .18; transform: translate3d(-28px,-18px,0) rotate(0) scale(.82); }
  58% { opacity: .18; transform: translate3d(26px,-18px,0) rotate(0) scale(.82); }
  70% { opacity: 1; transform: translate3d(84px,2px,0) rotate(2deg) scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(250px,20px,0) rotate(6deg) scale(.9); }
}
@keyframes route-sheen { 0%, 30% { transform: translateX(-60%); } 75%, 100% { transform: translateX(60%); } }
.js-anim .route-stage.is-changing .route-incoming span { animation: route-in .7s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .route-stage.is-changing .route-incoming span:nth-child(2) { animation-delay: .08s; }
.js-anim .route-stage.is-changing .route-incoming span:nth-child(3) { animation-delay: .16s; }
.js-anim .route-stage.is-changing .route-result span { animation: route-out .8s cubic-bezier(.165,.84,.44,1) .32s both; }
.js-anim .route-stage.is-changing .route-result span:nth-child(2) { animation-delay: .42s; }
.js-anim .route-stage.is-changing .route-brand { animation: route-engine-focus .85s cubic-bezier(.165,.84,.44,1) .18s both; }
.js-anim .route-stage.is-changing .route-document { animation: route-travel 2.2s cubic-bezier(.6,0,.25,1) both; }
@keyframes route-in { from { opacity: 0; transform: translateX(-18px) scale(.96); } }
@keyframes route-out { from { opacity: 0; transform: translateX(18px) scale(.96); } }
@keyframes route-engine-focus { 0% { opacity: .4; transform: scale(.94); } 55% { transform: scale(1.035); } 100% { opacity: 1; transform: none; } }

/* The approval disclosure keeps one supporting line inside the open item. */
.control-tab > span { display: block; }
.control-tab small {
  display: block;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(5px);
  color: var(--sub);
  font-size: .8125rem;
  font-weight: 440;
  line-height: 1.45;
  transition: max-height .65s cubic-bezier(.165,.84,.44,1), margin-top .65s cubic-bezier(.165,.84,.44,1), opacity .3s ease, transform .65s cubic-bezier(.165,.84,.44,1);
}
.control-tab::before { display: none; }
.control-tab.is-active {
  padding-left: .8rem;
  border-radius: 10px;
  background: rgba(18,166,106,.08);
}
.control-tab.is-active small { max-height: 2rem; margin-top: .35rem; opacity: 1; transform: none; }
.control-tab::after { top: 1.45rem; }

@media (max-width: 920px) {
  .route-story { grid-template-columns: minmax(13rem, .42fr) minmax(0, .58fr); }
  .route-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(12rem, 1fr) auto; }
  .route-group { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .route-group span { flex: 1 1 7rem; justify-content: center; text-align: center; }
  .route-lane {
    left: 31%; right: 31%; top: 10%; height: 80%;
    background: linear-gradient(180deg, transparent, rgba(110,231,183,.08) 18%, rgba(255,255,255,.08) 50%, rgba(110,231,183,.08) 82%, transparent);
    clip-path: polygon(34% 0,66% 0,66% 44%,100% 50%,66% 56%,66% 100%,34% 100%,34% 56%,0 50%,34% 44%);
  }
  .route-document { animation-name: route-travel-vertical; }
  .js-anim .route-stage.is-changing .route-document { animation-name: route-travel-vertical; }
  @keyframes route-travel-vertical {
    0% { opacity:0; transform:translate3d(-50%,-190px,0) rotate(-5deg) scale(.88); }
    15% { opacity:1; }
    40% { opacity:1; transform:translate3d(-50%,-72px,0) rotate(-1deg); }
    50% { opacity:.15; transform:translate3d(-50%,-28px,0) scale(.82); }
    60% { opacity:.15; transform:translate3d(-50%,28px,0) scale(.82); }
    74% { opacity:1; transform:translate3d(-50%,78px,0) rotate(1deg); }
    88% { opacity:1; }
    100% { opacity:0; transform:translate3d(-50%,190px,0) rotate(5deg) scale(.9); }
  }
}

@media (max-width: 640px) {
  .route-story { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 18px; }
  .route-tabs { padding: .65rem; }
  .route-tab { min-height: 3.2rem; padding-top: .8rem; padding-bottom: .8rem; }
  .route-tab > i { top: 1.1rem; }
  .route-tab.is-active { min-height: 5.9rem; transform: none; }
  .route-stage { min-height: 27rem; padding: 1.5rem; }
  .route-engine { min-height: 12rem; }
  .route-group span { min-height: 2.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .route-tab,
  .route-tab small,
  .route-tab > i,
  .route-brand,
  .route-brand::after,
  .route-document,
  .route-group span,
  .control-tab small { animation: none !important; transition: none !important; }
  .route-document { display: none; }
}

/* ---------- original record-screen fan ----------

   Three real product captures in the repository's earlier phone composition:
   center screen forward, outside screens rotated into perspective. */

.vault-device-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 32rem;
  perspective: 1100px;
  overflow: visible;
}
.vault-device-stage::before {
  content: '';
  position: absolute;
  width: min(92%, 38rem);
  aspect-ratio: 1.25;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18,166,106,.13), rgba(16,156,156,.05) 45%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}
.vault-phone {
  position: absolute;
  width: clamp(11.5rem, 18vw, 13.75rem);
  overflow: hidden;
  border: 7px solid #071B16;
  border-radius: 29px;
  background: #fff;
  box-shadow: 0 35px 80px rgba(4,36,28,.28);
  transform-origin: center bottom;
  transition: transform .85s cubic-bezier(.165,.84,.44,1), opacity .55s ease, box-shadow .55s ease;
}
.vault-phone img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.phone-center { z-index: 3; transform: translateY(-10px); }
.phone-left { z-index: 1; opacity: .78; transform: translateX(-165px) rotateY(17deg) rotate(-6deg) scale(.86); }
.phone-right { z-index: 2; opacity: .78; transform: translateX(165px) rotateY(-17deg) rotate(6deg) scale(.86); }
.vault-device-stage:hover .phone-center { transform: translateY(-15px) scale(1.015); box-shadow: 0 42px 90px rgba(4,36,28,.34); }
.vault-device-stage:hover .phone-left { opacity: .9; transform: translateX(-190px) rotateY(17deg) rotate(-8deg) scale(.86); }
.vault-device-stage:hover .phone-right { opacity: .9; transform: translateX(190px) rotateY(-17deg) rotate(8deg) scale(.86); }
.js-anim .vault-device-stage.in .phone-center { animation: vault-fan-center .9s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .vault-device-stage.in .phone-left { animation: vault-fan-left 1s cubic-bezier(.165,.84,.44,1) .08s both; }
.js-anim .vault-device-stage.in .phone-right { animation: vault-fan-right 1s cubic-bezier(.165,.84,.44,1) .16s both; }
@keyframes vault-fan-center {
  from { opacity: 0; transform: translateY(24px) scale(.9); }
  to { opacity: 1; transform: translateY(-10px); }
}
@keyframes vault-fan-left {
  from { opacity: 0; transform: translateX(-25px) translateY(20px) rotateY(0) rotate(0) scale(.78); }
  to { opacity: .78; transform: translateX(-165px) rotateY(17deg) rotate(-6deg) scale(.86); }
}
@keyframes vault-fan-right {
  from { opacity: 0; transform: translateX(25px) translateY(20px) rotateY(0) rotate(0) scale(.78); }
  to { opacity: .78; transform: translateX(165px) rotateY(-17deg) rotate(6deg) scale(.86); }
}

@media (max-width: 640px) {
  .vault-device-stage { min-height: 27rem; }
  .vault-phone { width: 10.625rem; border-width: 6px; border-radius: 25px; }
  .phone-left { transform: translateX(-65px) rotateY(17deg) rotate(-6deg) scale(.78); }
  .phone-right { transform: translateX(65px) rotateY(-17deg) rotate(6deg) scale(.78); }
  .vault-device-stage:hover .phone-left { transform: translateX(-70px) rotateY(17deg) rotate(-7deg) scale(.78); }
  .vault-device-stage:hover .phone-right { transform: translateX(70px) rotateY(-17deg) rotate(7deg) scale(.78); }
  .js-anim .vault-device-stage.in .phone-left { animation-name: vault-fan-left-mobile; }
  .js-anim .vault-device-stage.in .phone-right { animation-name: vault-fan-right-mobile; }
  @keyframes vault-fan-left-mobile {
    from { opacity: 0; transform: translateX(-15px) translateY(18px) scale(.7); }
    to { opacity: .78; transform: translateX(-65px) rotateY(17deg) rotate(-6deg) scale(.78); }
  }
  @keyframes vault-fan-right-mobile {
    from { opacity: 0; transform: translateX(15px) translateY(18px) scale(.7); }
    to { opacity: .78; transform: translateX(65px) rotateY(-17deg) rotate(6deg) scale(.78); }
  }
}

@media (max-width: 350px) {
  .vault-phone { width: 9.75rem; }
  .phone-left { transform: translateX(-58px) rotateY(17deg) rotate(-6deg) scale(.76); }
  .phone-right { transform: translateX(58px) rotateY(-17deg) rotate(6deg) scale(.76); }
  .vault-device-stage:hover .phone-left { transform: translateX(-61px) rotateY(17deg) rotate(-7deg) scale(.76); }
  .vault-device-stage:hover .phone-right { transform: translateX(61px) rotateY(-17deg) rotate(7deg) scale(.76); }
  .js-anim .vault-device-stage.in .phone-left { animation-name: vault-fan-left-narrow; }
  .js-anim .vault-device-stage.in .phone-right { animation-name: vault-fan-right-narrow; }
  @keyframes vault-fan-left-narrow {
    from { opacity: 0; transform: translateX(-12px) translateY(18px) scale(.68); }
    to { opacity: .78; transform: translateX(-58px) rotateY(17deg) rotate(-6deg) scale(.76); }
  }
  @keyframes vault-fan-right-narrow {
    from { opacity: 0; transform: translateX(12px) translateY(18px) scale(.68); }
    to { opacity: .78; transform: translateX(58px) rotateY(-17deg) rotate(6deg) scale(.76); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-phone { animation: none !important; transition: none !important; }
}

/* ---------- ruled frame, restored ---------- */

.ruled > .wrap {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.bento-band > .wrap { border-color: rgba(255,255,255,.12); }

/* ---------- bento details ----------

   Cards keep their geometry. A press opens the repo's detail sheet, so reading
   more never reshuffles the surrounding grid. */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(8.5rem, auto));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.12);
}
.bt,
.bt-a,
.bt-b,
.bt-c,
.bt-d,
.bt-e,
.bt-f {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.bt-a { grid-column: 1 / 5; grid-row: 1 / 3; }
.bt-b { grid-column: 5 / 7; grid-row: 1; }
.bt-c { grid-column: 5 / 7; grid-row: 2; }
.bt-d { grid-column: 1 / 3; grid-row: 3; }
.bt-e { grid-column: 3 / 5; grid-row: 3; }
.bt-f { grid-column: 5 / 7; grid-row: 3; }
.bt::after {
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: linear-gradient(120deg, transparent 58%, rgba(110,231,183,.08));
  opacity: 0;
  transition: opacity .45s ease;
}
.bt:hover::after, .bt:focus-visible::after { opacity: 1; }
.bt:hover { border-color: transparent; box-shadow: none; }
.bt-a:not(.is-open) .line-mini { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bt-a:not(.is-open) .line-mini .stn:nth-child(n+4) { display: block; }
.bt-map canvas { width: min(100%, 260px); }

.bt-i {
  width: 18px;
  height: 18px;
  margin-top: .15rem;
  color: rgba(230,241,236,.52);
  transition: color .25s ease, transform .45s cubic-bezier(.165,.84,.44,1);
}
.bt-foot .bt-i { margin-top: 0; }
.bt-i::before,
.bt-i::after {
  width: 6px;
  height: 6px;
  background: transparent;
  border-radius: 0;
  transition: none;
}
.bt-i::before {
  left: auto;
  right: 1px;
  top: 1px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.bt-i::after {
  left: 1px;
  top: auto;
  bottom: 1px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: none;
  opacity: 1;
}
.bt:hover .bt-i,
.bt:focus-visible .bt-i { color: var(--mint); transform: scale(1.12); }

.sheet-modal {
  width: min(68rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
}
.sheet-in {
  padding: clamp(2rem, 4vw, 4rem);
}
.sheet-in h3 {
  max-width: 25ch;
  padding-right: 5rem;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.02;
}
.sheet-x {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  font-size: 1.6rem;
  line-height: 1;
}
.sheet-detail {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.sheet-in .sheet-detail > p {
  margin-top: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink);
}
.sheet-in .sheet-detail > ul { margin-top: 0; }
.sheet-in .sheet-detail li {
  margin-top: 0;
  padding: .85rem 0 .85rem 1.35rem;
  border-bottom: 1px solid var(--line);
}
.sheet-in .sheet-detail li:first-child { padding-top: 0; }
.sheet-in .sheet-detail li::before { top: 1.45rem; }
.sheet-in .sheet-detail li:first-child::before { top: .6rem; }
.vault-explain {
  max-width: 30rem;
  margin-top: 1.15rem;
  color: var(--sub);
  line-height: 1.65;
}
.vault-explain + p { margin-top: 1.1rem; }

@media (max-width: 920px) {
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: none; }
  .bt,
  .bt-a,
  .bt-b,
  .bt-c,
  .bt-d,
  .bt-e,
  .bt-f { grid-column: auto; grid-row: auto; min-height: 11rem; }
  .bt-a { grid-column: 1 / 3; min-height: 17rem; }
  .bt-d, .bt-e { min-height: 15rem; }
}

@media (max-width: 640px) {
  .ruled > .wrap { border-left: 0; border-right: 0; }
  .bento { grid-template-columns: minmax(0,1fr); gap: 1px; border-radius: 15px; }
  .bt,
  .bt-a,
  .bt-b,
  .bt-c,
  .bt-d,
  .bt-e,
  .bt-f { grid-column: 1; min-height: 10rem; border-radius: 0; }
  .bt-a { min-height: 16rem; }
  .bt-d, .bt-e { min-height: 15rem; }
  .bt-a:not(.is-open) .line-mini { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bt-a:not(.is-open) .line-mini .stn:nth-child(n+4) { display: none; }
  .sheet-modal { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .sheet-in { min-height: 0; padding: 1.5rem; }
  .sheet-in h3 { padding-right: 3.5rem; font-size: 1.75rem; }
  .sheet-x { top: .85rem; right: .85rem; }
  .sheet-detail { grid-template-columns: 1fr; gap: 1.3rem; margin-top: 2rem; padding-top: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bt::after, .bt-i { transition: none !important; }
}

/* ---------- coordinated product motion ---------- */

[data-bento-sequence] .stn,
[data-bento-sequence] .stn .crd,
[data-bento-sequence] .dots i,
[data-bento-sequence] .check > span,
[data-bento-sequence] .meter-fill {
  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.165,.84,.44,1),
    background-color .55s ease,
    border-color .55s ease,
    box-shadow .65s ease,
    width .8s cubic-bezier(.165,.84,.44,1);
}
.js-anim [data-bento-sequence] .stn .crd,
.js-anim [data-bento-sequence] .meter-fill,
.js-anim [data-bento-sequence] .check i::after { animation: none !important; }
[data-bento-sequence] .stn { opacity: .5; }
[data-bento-sequence] .stn.is-complete { opacity: .76; }
[data-bento-sequence] .stn.is-current { opacity: 1; transform: translateY(-3px); }
[data-bento-sequence] .stn.is-complete .crd { border-color: rgba(110,231,183,.3); }
[data-bento-sequence] .stn.is-current .crd {
  border-color: rgba(110,231,183,.72);
  background: #0D4936;
  box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 0 3px rgba(110,231,183,.08);
}
.js-anim [data-bento-sequence] .stn.is-current .crd { animation: bento-stage-in .65s cubic-bezier(.165,.84,.44,1) both; }
@keyframes bento-stage-in {
  from { opacity: .35; transform: translateY(9px) scale(.96); }
  to { opacity: 1; transform: none; }
}
[data-bento-sequence] .dots i { background: rgba(255,255,255,.1); }
[data-bento-sequence] .dots i.is-passed { background: rgba(110,231,183,.5); }
[data-bento-sequence] .dots i.is-current { background: var(--coral); transform: scaleY(1.65); }
[data-bento-sequence] .check > span { opacity: .48; }
[data-bento-sequence] .check > span.is-done { opacity: .78; }
[data-bento-sequence] .check > span.is-current { opacity: 1; transform: translateX(5px); }
[data-bento-sequence] .check i::after { opacity: 0; }
[data-bento-sequence] .check > span.is-done i::after { opacity: 1; }
[data-bento-sequence] .check > span.is-current i {
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(110,231,183,.08);
}

/* Active disclosures carry a quiet clock. Motion pauses whenever a visitor is
   reading or using the controls. */
.route-tab::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--green-2), var(--teal));
  transform: scaleX(0);
  transform-origin: left;
}
.js-anim .route-story.is-cycling .route-tab.is-active::before { animation: route-tab-progress 5.2s linear both; }
@keyframes route-tab-progress { to { transform: scaleX(1); } }

#control .control-tab::before {
  display: block;
  left: 0;
  top: 0;
  bottom: auto;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--green-2), var(--teal));
  transform: scaleY(0);
  transform-origin: top;
}
.js-anim #control.is-cycling .control-tab.is-active::before { animation: control-tab-progress 4.7s linear both; }
@keyframes control-tab-progress { to { transform: scaleY(1); } }
.sig .sheet-2,
.sig .sheet-3,
.sig .sig-path,
.sig .trail li { transition: transform .8s cubic-bezier(.165,.84,.44,1), opacity .6s ease, stroke .6s ease, background-color .6s ease; }
.sig[data-control='secure'] .sheet-3 { opacity: .76; transform: translateX(-50%) translateY(-9px) scale(.97); }
.sig[data-control='secure'] .sheet-2 { opacity: .9; transform: translateX(-50%) translateY(-4px) scale(.985); }
.sig[data-control='secure'] .sig-path { stroke: var(--green); }
.sig[data-control='trail'] .sheet-3 { opacity: .46; transform: translateX(-50%) translateY(-19px) rotate(-2deg) scale(.92); }
.sig[data-control='trail'] .sheet-2 { opacity: .72; transform: translateX(-50%) translateY(-10px) rotate(1.4deg) scale(.96); }

/* Detail sheets reuse each pressed card as their visual scene. */
.sheet-content {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(17rem, .88fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.sheet-preview {
  display: flex;
  min-width: 0;
  min-height: 20rem;
  overflow: hidden;
  border-radius: 16px;
  background: var(--forest);
  box-shadow: 0 24px 55px rgba(4,36,28,.18);
}
.sheet-preview-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .9rem;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(70% 70% at 100% 0, rgba(16,156,156,.2), transparent 70%),
    #05271E;
  color: #E6F1EC;
  box-shadow: none;
  pointer-events: none;
}
.sheet-preview-card::after { display: none; }
.sheet-preview-card.bt-a,
.sheet-preview-card.bt-d { padding: 0; gap: 0; }
.sheet-preview-card .bt-i { display: none; }
.sheet-preview-card .line-mini { grid-template-columns: repeat(5, minmax(0,1fr)); }
.sheet-preview-card .line-mini .stn:nth-child(n+4) { display: block; }
.sheet-preview-card .bt-live { padding-top: 2rem; }
.sheet-preview-card .bt-map canvas { width: min(100%, 330px); }
.sheet-preview-card .meter { margin-top: auto; }
.sheet-preview-card .dots { margin-top: auto; }
#sheet-body .sheet-detail {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
#sheet-body .sheet-detail > p { margin: 0; font-size: 1.05rem; }
#sheet-body .sheet-detail > ul { margin-top: 1.5rem; }

/* Real product captures move through their own content rather than sitting as
   compressed posters. */
.vault-phone { height: 26rem; }
.vault-phone img {
  width: 108%;
  max-width: none;
  transform: translateX(-3.7%);
  will-change: transform;
}
.js-anim #vault.is-live .phone-left img { animation: vault-screen-read 13s cubic-bezier(.45,.05,.2,1) -4s infinite alternate; }
.js-anim #vault.is-live .phone-center img { animation: vault-screen-read 14.5s cubic-bezier(.45,.05,.2,1) infinite alternate; }
.js-anim #vault.is-live .phone-right img { animation: vault-screen-read 12.5s cubic-bezier(.45,.05,.2,1) -7s infinite alternate; }
@keyframes vault-screen-read {
  from { transform: translateX(-3.7%) translateY(0); }
  to { transform: translateX(-3.7%) translateY(-4.2%); }
}

/* Restore the existing financial field as pricing's ground. */
#pricing.flow-band { background: transparent; }
#pricing.flow-band > .wrap { position: relative; z-index: 1; }
#pricing.flow-band .price {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.84);
  box-shadow: 0 28px 70px rgba(4,36,28,.14);
  backdrop-filter: blur(18px);
}

@media (max-width: 760px) {
  .sheet-content { grid-template-columns: minmax(0,1fr); gap: 1.4rem; }
  .sheet-preview { min-height: 14rem; }
  .sheet-preview-card { padding: 1.35rem; }
  .sheet-preview-card.bt-a,
  .sheet-preview-card.bt-d { padding: 0; }
  .sheet-preview-card .line-mini { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sheet-preview-card .line-mini .stn:nth-child(n+4) { display: none; }
}

@media (max-width: 640px) {
  .vault-phone { height: 19.5rem; }
}

@media (max-width: 350px) {
  .vault-phone { height: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-bento-sequence] *,
  .route-tab::before,
  #control .control-tab::before,
  .vault-phone img { animation: none !important; transition: none !important; }
}

/* ---------- Vested product line ----------

   This scene is a compact, disclosure-led rendering of Vested's real Flow
   component: five stations, live card decks, drawn handoffs, a human desk,
   card inspector and work log. It is intentionally not a generic dashboard. */

#product { padding: clamp(3.6rem, 6vw, 5.5rem) 0; }
#product h2 { max-width: 20ch; }

.line-story {
  display: grid;
  grid-template-columns: minmax(14.5rem, .29fr) minmax(0, .71fr);
  gap: clamp(1rem, 2.6vw, 2.2rem);
  align-items: stretch;
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
}

.line-tabs {
  align-self: start;
  margin-top: 1rem;
  border-bottom: 1px solid var(--line);
}
.line-tab {
  position: relative;
  display: block;
  width: 100%;
  min-height: 4rem;
  padding: 1rem 2.4rem 1rem .1rem;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--sub);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: min-height .7s cubic-bezier(.165,.84,.44,1), padding .7s cubic-bezier(.165,.84,.44,1), color .35s ease;
}
.line-tab > span { display: block; font-weight: 630; letter-spacing: -.016em; }
.line-tab small {
  display: block;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  color: var(--sub);
  font-size: .8125rem;
  font-weight: 440;
  line-height: 1.45;
  transform: translateY(7px);
  transition: max-height .7s cubic-bezier(.165,.84,.44,1), margin .7s cubic-bezier(.165,.84,.44,1), opacity .35s ease, transform .7s cubic-bezier(.165,.84,.44,1);
}
.line-tab > i {
  position: absolute;
  right: .25rem;
  top: 1.45rem;
  width: 12px;
  height: 12px;
  color: var(--faint);
}
.line-tab > i::before,
.line-tab > i::after {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transition: transform .7s cubic-bezier(.165,.84,.44,1), color .35s ease;
}
.line-tab > i::after { transform: rotate(90deg); }
.line-tab::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--green-2);
  transform: scaleX(0);
  transform-origin: left;
}
.line-tab:hover { color: var(--ink); }
.line-tab:focus-visible { outline: 0; box-shadow: inset 3px 0 var(--green-2); }
.line-tab.is-active { min-height: 6rem; padding-left: .75rem; color: var(--ink); }
.line-tab.is-active small { max-height: 3rem; margin-top: .45rem; opacity: 1; transform: none; }
.line-tab.is-active > i { color: var(--green-2); }
.line-tab.is-active > i::before { transform: rotate(180deg); }
.line-tab.is-active > i::after { transform: rotate(180deg); }
.js-anim .line-story.is-cycling .line-tab.is-active::after { animation: line-tab-clock 6.4s linear both; }
@keyframes line-tab-clock { to { transform: scaleX(1); } }

.line-console {
  --console-bg: #10150f;
  --console-panel: #171d15;
  --console-tile: #1c2319;
  --console-line: #30382d;
  --console-sub: #8e9789;
  --console-ink: #eef3eb;
  --console-green: #82d38f;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  height: clamp(33rem, 42vw, 38rem);
  overflow: hidden;
  border: 1px solid #242c22;
  border-radius: 18px;
  background: var(--console-bg);
  color: var(--console-ink);
  box-shadow: 0 28px 65px rgba(4,36,28,.16);
}
.console-bar {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.6rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--console-line);
  background: var(--console-panel);
}
.console-brand { display: inline-flex; align-items: center; gap: .55rem; font-size: .8125rem; font-weight: 650; }
.console-brand svg { width: 19px; height: 19px; }
.console-status { display: inline-flex; align-items: center; gap: .4rem; color: var(--console-sub); font-size: .68rem; }
.console-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--console-green); transition: background .4s ease; }
.console-run {
  min-height: 2rem;
  padding: 0 .9rem;
  border: 0;
  border-radius: 999px;
  background: var(--console-green);
  color: #0b170d;
  font: inherit;
  font-size: .7rem;
  font-weight: 660;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
.console-run:hover { transform: translateY(-1px); background: #9ae4a5; }
.console-run:focus-visible,
.console-inspector button:focus-visible { outline: 2px solid var(--console-green); outline-offset: 2px; }
.console-station:focus-visible,
.console-desk:focus-visible { outline: 0; box-shadow: inset 3px 0 var(--console-green); }

.console-canvas {
  position: relative;
  min-height: 0;
  padding: clamp(.9rem, 2vw, 1.3rem);
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 100% 3.45rem;
}
.console-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: clamp(.75rem, 2.2vw, 1.65rem);
  height: 14rem;
  z-index: 2;
}
.console-edges { position: absolute; inset: 0; z-index: 0; width: 100%; height: 13.7rem; overflow: visible; color: var(--console-line); }
.console-edge,
.console-drop { fill: none; stroke: currentColor; stroke-width: 1.35; vector-effect: non-scaling-stroke; transition: color .5s ease, opacity .5s ease; }
.console-drop { opacity: .12; stroke: #dd6c5a; stroke-dasharray: 4 4; }

.console-station {
  position: relative;
  z-index: 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 9.5rem;
  padding: .7rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--console-panel);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: opacity .5s ease, border-color .5s ease, transform .7s cubic-bezier(.165,.84,.44,1), background .5s ease;
}
.console-station:hover { border-color: #43503f; background: #1b2218; }
.station-name { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .68rem; font-weight: 650; }
.station-name i { width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid var(--console-sub); }
.station-deck { position: relative; display: block; margin-top: .75rem; min-height: 5.9rem; }
.station-deck::before,
.station-deck::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 4.1rem;
  border: 1px solid #283025;
  border-radius: 8px;
  background: #151b14;
}
.station-deck::before { left: 3px; right: 3px; top: 3px; }
.case-card,
.desk-case,
.transit-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 4.15rem;
  padding: .62rem;
  border: 1px solid #323b2f;
  border-radius: 8px;
  background: #181e16;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.case-card b,
.desk-case b,
.transit-card b { overflow: hidden; font-size: .68rem; font-style: normal; font-weight: 660; text-overflow: ellipsis; white-space: nowrap; }
.case-card small,
.desk-case small,
.transit-card small { margin-top: .32rem; overflow: hidden; color: var(--console-sub); font-size: .59rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.case-card em,
.desk-case em { align-self: flex-start; margin-top: .38rem; padding: .12rem .32rem; border-radius: 999px; background: #3a1c17; color: #ff7b6d; font-size: .52rem; font-style: normal; }
.case-card-alert { border-color: #654036; }
.deck-count { display: block; position: relative; z-index: 3; margin-top: .55rem; color: var(--console-sub); text-align: center; font-size: .55rem; }
.station-empty { display: grid; place-items: center; flex: 1; min-height: 6rem; color: #687063; font-size: .64rem; }

.transit-card {
  position: absolute;
  z-index: 8;
  left: 1.1%;
  top: 3.15rem;
  width: 16.5%;
  pointer-events: none;
  opacity: 0;
  border-color: #69b978;
  background: #1b271a;
  box-shadow: 0 13px 28px rgba(0,0,0,.38);
}
.line-console[data-line-state='run'] .transit-card { animation: console-card-run 6.2s cubic-bezier(.5,0,.22,1) .35s both; }
@keyframes console-card-run {
  0% { left: 1.1%; opacity: 0; transform: translateY(8px) scale(.92); }
  5% { opacity: 1; transform: none; }
  17% { left: 1.1%; }
  23% { left: 21%; transform: translateY(-3px); }
  38% { left: 21%; transform: none; }
  44% { left: 41%; transform: translateY(-3px); }
  58% { left: 41%; transform: none; }
  64% { left: 61%; transform: translateY(-3px); }
  77% { left: 61%; transform: none; }
  83% { left: 81.7%; transform: translateY(-3px); }
  94% { left: 81.7%; opacity: 1; transform: none; }
  100% { left: 81.7%; opacity: 0; transform: translateY(-7px) scale(.96); }
}
.line-console[data-line-state='run'] .edge-a { animation: console-edge-fire 6.2s ease .35s both; }
.line-console[data-line-state='run'] .edge-b { animation: console-edge-fire 6.2s ease 1.65s both; }
.line-console[data-line-state='run'] .edge-c { animation: console-edge-fire 6.2s ease 2.95s both; }
.line-console[data-line-state='run'] .edge-d { animation: console-edge-fire 6.2s ease 4.2s both; }
@keyframes console-edge-fire { 0%,14%,30%,100% { color: var(--console-line); } 18%,25% { color: var(--console-green); } }
.line-console[data-line-state='run'] .console-station { animation: console-station-pass 6.2s ease both; }
.line-console[data-line-state='run'] .station-records { animation-delay: 1.25s; }
.line-console[data-line-state='run'] .station-packet { animation-delay: 2.5s; }
.line-console[data-line-state='run'] .station-deadline { animation-delay: 3.75s; }
.line-console[data-line-state='run'] .station-billing { animation-delay: 5s; }
@keyframes console-station-pass { 0%,12%,28%,100% { border-color: transparent; transform: none; } 16%,24% { border-color: #5fa66b; transform: translateY(-2px); } }

.console-desk {
  position: absolute;
  z-index: 5;
  left: clamp(.9rem, 2vw, 1.3rem);
  right: clamp(.9rem, 2vw, 1.3rem);
  bottom: 1rem;
  display: grid;
  grid-template-columns: 4rem minmax(8rem, 1fr) minmax(8rem, 1fr) 1.6fr;
  gap: .5rem;
  align-items: center;
  min-height: 6.8rem;
  padding: .7rem;
  border: 1px solid #293127;
  border-radius: 11px;
  background: var(--console-panel);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .6s ease, transform .7s cubic-bezier(.165,.84,.44,1), background .5s ease;
}
.console-desk:hover { border-color: #465441; }
.desk-label { align-self: start; padding: .2rem; font-size: .68rem; font-weight: 650; }
.desk-case { min-height: 4.8rem; }
.desk-case:first-of-type { border-color: #64a76d; }
.line-console[data-line-state='desk'] .console-drop { opacity: .9; animation: console-drop-fire 1.35s ease .15s both; }
.line-console[data-line-state='desk'] .console-desk { border-color: #5b8f61; transform: translateY(-3px); background: #1a2218; }
.line-console[data-line-state='desk'] .desk-case { animation: console-desk-arrive .85s cubic-bezier(.165,.84,.44,1) both; }
.line-console[data-line-state='desk'] .desk-secondary { animation-delay: .15s; }
@keyframes console-drop-fire { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes console-desk-arrive { from { opacity: .08; transform: translateY(-24px) scale(.96); } to { opacity: 1; transform: none; } }

.console-inspector {
  position: absolute;
  z-index: 15;
  right: 1.25rem;
  top: 3.2rem;
  width: min(19rem, calc(100% - 2.5rem));
  padding: 1rem;
  border: 1px solid #4d5a49;
  border-radius: 12px;
  background: #1c231a;
  box-shadow: 0 24px 55px rgba(0,0,0,.46);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(15px) scale(.96);
  transform-origin: right top;
  transition: opacity .45s ease, transform .7s cubic-bezier(.165,.84,.44,1), visibility 0s linear .7s;
}
.line-console[data-line-state='inspect'] .console-inspector { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.line-console[data-line-state='inspect'] .station-deadline { border-color: #64a76d; transform: translateY(-2px); }
.console-inspector header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.console-inspector header b { font-size: .78rem; }
.console-inspector header button { padding: 0; border: 0; background: transparent; color: var(--console-sub); font: inherit; font-size: .62rem; cursor: pointer; }
.console-inspector p { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .7rem; color: var(--console-sub); font-size: .6rem; }
.console-inspector > strong { display: block; margin-top: .9rem; font-size: .68rem; }
.console-inspector > div { display: flex; justify-content: space-between; gap: 1rem; margin-top: .65rem; padding: .6rem 0; border-top: 1px solid var(--console-line); border-bottom: 1px solid var(--console-line); font-size: .62rem; }
.inspector-ready { color: var(--console-green); }
.inspector-action { margin-top: .8rem; min-height: 1.9rem; padding: 0 .75rem; border: 0; border-radius: 999px; background: var(--console-green); color: #0b170d; font: inherit; font-size: .62rem; font-weight: 650; cursor: pointer; }

.console-log {
  position: relative;
  z-index: 13;
  display: grid;
  grid-template-columns: 4.5rem repeat(3,minmax(0,1fr));
  gap: .75rem;
  align-items: center;
  min-height: 3.75rem;
  padding: .65rem 1rem;
  border-top: 1px solid var(--console-line);
  background: var(--console-panel);
}
.log-label { color: var(--console-sub); font-size: .61rem; font-weight: 620; text-transform: uppercase; letter-spacing: .06em; }
.log-event { display: grid; grid-template-columns: 5px auto; gap: .15rem .42rem; align-items: center; min-width: 0; opacity: .38; transition: opacity .45s ease, transform .55s cubic-bezier(.165,.84,.44,1); }
.log-event i { width: 5px; height: 5px; border-radius: 50%; background: var(--console-green); }
.log-event b { overflow: hidden; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.log-event em { grid-column: 2; overflow: hidden; color: var(--console-sub); font-size: .54rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.log-event.is-current { opacity: 1; transform: translateY(-1px); }
.line-console[data-line-state='desk'] .console-status i { background: #dd6c5a; }
.line-console[data-line-state='inspect'] .console-status i { background: #d7ae5d; }

@media (max-width: 920px) {
  .line-story { grid-template-columns: minmax(12rem,.35fr) minmax(0,.65fr); gap: 1rem; }
  .line-console { height: 34rem; }
  .console-line { gap: .5rem; }
  .console-station { padding: .48rem; }
  .console-desk { grid-template-columns: 3rem 1fr 1fr; }
  .desk-secondary { display: none; }
  .console-log { grid-template-columns: 3.8rem repeat(3,minmax(0,1fr)); gap: .4rem; }
}

@media (max-width: 700px) {
  #product { padding: 3.25rem 0; }
  .line-story { grid-template-columns: minmax(0,1fr); margin-top: 1.4rem; }
  .line-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 0; border-bottom: 0; }
  .line-tab { min-height: 3.7rem; padding: .8rem 1.65rem .8rem .65rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .line-tab:last-child { border-right: 0; }
  .line-tab > span { font-size: .82rem; }
  .line-tab > i { right: .55rem; top: 1.15rem; }
  .line-tab.is-active { min-height: 5.5rem; padding-left: .65rem; }
  .line-tab small { font-size: .68rem; line-height: 1.35; }
  .line-console { height: 31.5rem; border-radius: 14px; }
  .console-bar { grid-template-columns: 1fr auto; }
  .console-status { display: none; }
  .console-canvas { padding: .72rem; }
  .console-line { height: 12rem; gap: .22rem; }
  .console-edges { height: 11.9rem; }
  .console-station { min-height: 8.2rem; padding: .32rem; border-radius: 8px; }
  .station-name { gap: .22rem; font-size: .5rem; }
  .station-name i { border-top-width: 2px; border-bottom-width: 2px; border-left-width: 4px; }
  .station-deck { margin-top: .5rem; }
  .case-card,
  .desk-case,
  .transit-card { min-height: 3.6rem; padding: .4rem; }
  .case-card b,
  .desk-case b,
  .transit-card b { font-size: .53rem; }
  .case-card small,
  .desk-case small,
  .transit-card small { font-size: .46rem; }
  .case-card em,
  .desk-case em { font-size: .42rem; }
  .station-empty { min-height: 5rem; font-size: .5rem; }
  .deck-count { font-size: .45rem; }
  .transit-card { top: 2.4rem; }
  .console-desk { left: .72rem; right: .72rem; bottom: .72rem; grid-template-columns: 2.7rem repeat(2,minmax(0,1fr)); min-height: 6rem; padding: .5rem; }
  .desk-label { font-size: .56rem; }
  .console-log { grid-template-columns: 3rem repeat(3,minmax(0,1fr)); padding: .55rem .7rem; }
  .log-label { font-size: .47rem; }
  .log-event b { font-size: .48rem; }
  .log-event em { display: none; }
  .console-inspector { right: .75rem; top: 2.4rem; width: min(17rem,calc(100% - 1.5rem)); }
}

@media (max-width: 430px) {
  .line-tabs { grid-template-columns: minmax(0,1fr); }
  .line-tab,
  .line-tab.is-active { min-height: 3.5rem; padding: .75rem 2rem .75rem .6rem; border-right: 0; }
  .line-tab small { display: none; }
  .line-tab > i { top: 1.05rem; }
  .line-console { height: 29rem; }
  .console-brand { font-size: .7rem; }
  .console-desk { grid-template-columns: 2.3rem minmax(0,1fr); }
  .desk-secondary { display: none; }
  .console-log { grid-template-columns: 2.7rem repeat(3,minmax(0,1fr)); gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .line-tab,
  .line-tab *,
  .line-tab::after,
  .line-console *,
  .line-console *::before,
  .line-console *::after { animation: none !important; transition: none !important; }
  .line-console[data-line-state='run'] .transit-card { display: none; }
}

/* ---------- centered rhythm and shared openings ---------- */

html { scroll-padding-top: 68px; }

/* Navigation is geometrically centered, independent of unequal brand and CTA
   widths. Surface values are fed by scroll progress instead of an 8px switch. */
.topbar,
.topbar.stuck {
  background:
    linear-gradient(rgba(255,255,255,var(--nav-progress, 0)), rgba(255,255,255,var(--nav-progress, 0))),
    radial-gradient(38% 190% at 76% 120%, rgba(110,231,183,.3), transparent 72%),
    #fff;
  -webkit-backdrop-filter: saturate(180%) blur(var(--nav-blur, 0px));
  backdrop-filter: saturate(180%) blur(var(--nav-blur, 0px));
  box-shadow:
    0 1px 0 rgba(10,31,25,var(--nav-line, 0)),
    0 14px 38px rgba(4,36,28,var(--nav-shadow, 0));
  transition: none;
}
.topbar-in {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
}
.topbar-in > .brand { justify-self: start; }
.topbar-in > .nav { justify-self: center; }
.topbar-in > .topbar-cta { justify-self: end; }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after { right: 0; }

.menu-btn span { transition: transform .45s cubic-bezier(.165,.84,.44,1), opacity .25s ease; }
.menu-btn:focus-visible {
  outline: 0;
  border-color: var(--green-2);
  background: var(--tint);
}
.menu-btn[aria-expanded='true'] span:first-child { transform: translateY(2.8px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span:last-child { transform: translateY(-2.8px) rotate(-45deg); }
.menu:not([hidden]) { transform-origin: top; animation: menu-open .45s cubic-bezier(.165,.84,.44,1) both; }
.menu:not([hidden]) .menu-in > * { animation: menu-item-open .42s cubic-bezier(.165,.84,.44,1) both; }
.menu:not([hidden]) .menu-in > *:nth-child(2) { animation-delay: .035s; }
.menu:not([hidden]) .menu-in > *:nth-child(3) { animation-delay: .07s; }
@keyframes menu-open { from { opacity: 0; transform: translateY(-8px) scaleY(.96); } }
@keyframes menu-item-open { from { opacity: 0; transform: translateY(-6px); } }

/* Bento remains section two, but familiar plus affordances replace corner
   glyphs. All detail sheets share one centered, source-aware opening. */
.bento { width: min(100%, 72rem); margin-inline: auto; }
.bt-i { width: 18px; height: 18px; transform: none; }
.bt-i::before,
.bt-i::after {
  left: 3px;
  top: 8px;
  right: auto;
  bottom: auto;
  width: 12px;
  height: 1.5px;
  border: 0;
  background: currentColor;
  opacity: 1;
  transform: none;
  transition: transform .55s cubic-bezier(.165,.84,.44,1);
}
.bt-i::after { transform: rotate(90deg); }
.bt:hover .bt-i,
.bt:focus-visible .bt-i { color: var(--mint); transform: none; }
.bt:hover .bt-i::before,
.bt:focus-visible .bt-i::before { transform: rotate(90deg); }
.bt:hover .bt-i::after,
.bt:focus-visible .bt-i::after { transform: rotate(180deg); }

.sheet-modal { width: min(62rem, calc(100vw - 2rem)); }
.sheet-modal::backdrop { animation: sheet-backdrop-open .42s ease both; }
.sheet-in {
  border-radius: 22px;
  transform-origin: var(--sheet-origin-x, 50%) var(--sheet-origin-y, 50%);
}
.sheet-in h3 {
  max-width: 24ch;
  margin-inline: auto;
  padding-right: 0;
  text-align: center;
}
.js-anim .sheet-modal[open] .sheet-in { animation: sheet-open-shared .52s cubic-bezier(.165,.84,.44,1) both; }
@keyframes sheet-backdrop-open { from { opacity: 0; } }
@keyframes sheet-open-shared {
  from { opacity: 0; transform: translateY(18px) scale(.92); }
  to { opacity: 1; transform: none; }
}

/* Product chapter becomes a centered stage with Stripe-like horizontal
   disclosures. Visual remains compact and uses Vested's real Line model. */
#product h2 {
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
}
.line-story {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(100%, 68rem);
  margin: clamp(1.7rem,3vw,2.35rem) auto 0;
}
.line-tabs {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-self: auto;
  width: min(100%, 50rem);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.72);
}
.line-tab,
.line-tab.is-active {
  min-height: 6.1rem;
  padding: 1rem 2rem;
  border-top: 0;
  border-right: 1px solid var(--line);
  text-align: center;
}
.line-tab:last-child { border-right: 0; }
.line-tab small {
  max-height: 2.8rem;
  margin-top: .42rem;
  opacity: .58;
  transform: none;
}
.line-tab.is-active { padding-left: 2rem; background: rgba(18,166,106,.06); }
.line-tab.is-active small { max-height: 2.8rem; margin-top: .42rem; opacity: 1; }
.line-tab > i { right: .8rem; top: 1.05rem; }
.line-console { width: 100%; height: clamp(31rem,38vw,35rem); }

/* Final conversion moment is centered while its form remains left-readable. */
.cta-in {
  grid-template-columns: minmax(0, 50rem);
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}
.cta-copy h2 { margin-inline: auto; }
.file-card { width: 100%; text-align: left; }

@media (max-width: 780px) {
  html { scroll-padding-top: 62px; }
  .topbar-in { grid-template-columns: minmax(0,1fr) auto; }
  .topbar-in > .topbar-cta { grid-column: 2; }
  .sheet-in h3 { padding-inline: 2.75rem; }
}

@media (max-width: 700px) {
  .line-tabs { grid-template-columns: minmax(0,1fr); width: 100%; }
  .line-tab,
  .line-tab.is-active {
    min-height: 4.25rem;
    padding: .85rem 2.5rem .85rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  .line-tab:last-child { border-bottom: 0; }
  .line-tab small,
  .line-tab.is-active small { max-height: 0; margin-top: 0; opacity: 0; }
  .line-tab.is-active small { max-height: 2.5rem; margin-top: .35rem; opacity: 1; }
  .line-tab > i { right: 1rem; top: 1.2rem; }
  .line-console { height: 30rem; }
  .sheet-content { gap: 1.15rem; }
}

@media (max-width: 430px) {
  .line-tab,
  .line-tab.is-active { min-height: 3.8rem; padding: .78rem 2.35rem .78rem .85rem; }
  .line-tab small,
  .line-tab.is-active small { display: block; }
  .line-console { height: 28.5rem; }
  .sheet-in h3 { padding-inline: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .menu:not([hidden]),
  .menu:not([hidden]) .menu-in > *,
  .sheet-modal::backdrop,
  .sheet-modal[open] .sheet-in { animation: none !important; }
}

/* ---------- signing inside product + coordinated bento motion ---------- */

/* Desk approval is now a state inside Product's existing console. It replaces
   a standalone section without adding any height to the console itself. */
.console-signing {
  position: absolute;
  inset: clamp(.7rem, 1.7vw, 1.05rem);
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(12rem, .42fr) minmax(0, .58fr);
  gap: clamp(.8rem, 2vw, 1.4rem);
  min-width: 0;
  padding: clamp(.85rem, 1.8vw, 1.25rem);
  overflow: hidden;
  border: 1px solid #3a4637;
  border-radius: 13px;
  background:
    linear-gradient(115deg, rgba(130,211,143,.055), transparent 38%),
    #151b14;
  box-shadow: 0 24px 54px rgba(0,0,0,.36);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.975);
  transform-origin: center bottom;
  transition:
    opacity .38s ease,
    transform .72s cubic-bezier(.165,.84,.44,1),
    visibility 0s linear .72s;
}
.line-console[data-line-state='desk'] .console-signing {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.console-signing-copy { min-width: 0; align-self: center; }
.console-signing-title {
  display: block;
  max-width: 15ch;
  color: var(--console-ink);
  font-size: clamp(1rem, 2vw, 1.45rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.03em;
}
.console-signing .control-tabs {
  margin-top: clamp(.65rem, 1.5vw, 1rem);
  border-color: var(--console-line);
}
.console-signing .control-tab {
  padding: .62rem 1.65rem .62rem 0;
  border-color: var(--console-line);
  color: var(--console-sub);
  font-size: .72rem;
}
.console-signing .control-tab:hover,
.console-signing .control-tab.is-active { color: var(--console-ink); }
.console-signing .control-tab.is-active { padding-left: 1.15rem; }
.console-signing .control-tab small {
  display: block;
  margin-top: .18rem;
  color: #747e70;
  font-size: .58rem;
  font-weight: 450;
  line-height: 1.3;
}
.console-signing .control-tab::after { color: #6d7669; }
.console-signing .control-tab:focus-visible { outline: 2px solid var(--console-green); outline-offset: -2px; }
.console-signature { min-width: 0; align-self: center; gap: .65rem; }
.console-signing .sig-stack { max-width: 17rem; padding: 1rem 1rem 0; }
.console-signing .sheet { border-color: #dfe7df; }
.console-signing .sheet-1 { padding: 1rem 1.1rem .85rem; box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.console-signing .trail {
  max-width: 18rem;
  border-color: var(--console-line);
}
.console-signing .trail li {
  min-width: 0;
  padding: .38rem .25rem;
  border-color: var(--console-line);
  color: var(--console-sub);
  font-size: .55rem;
}
.console-signing .trail li.is-active { background: rgba(130,211,143,.08); }
.console-signing .t-what { color: inherit; }
.console-signing .t-what::before { color: var(--console-green); }

/* A case now moves through the actual bento contents as one sequence. Geometry
   is untouched: all motion is clipped inside the existing cards. */
[data-bento-sequence] .line-mini { position: relative; isolation: isolate; }
[data-bento-sequence] .line-mini::before,
[data-bento-sequence] .line-mini::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 1px;
  pointer-events: none;
}
[data-bento-sequence] .line-mini::before { background: rgba(255,255,255,.11); }
[data-bento-sequence] .line-mini::after {
  background: linear-gradient(90deg, var(--mint), #fff 55%, var(--mint));
  box-shadow: 0 0 9px rgba(110,231,183,.5);
  transform: scaleX(var(--bento-progress, 0));
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.165,.84,.44,1);
}
[data-bento-sequence] .line-mini .stn { position: relative; z-index: 1; }
.bt::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -45%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(110,231,183,.12) 49%, rgba(255,255,255,.08) 52%, transparent 64%);
  opacity: 0;
  transform: translateX(-34%);
}
.js-anim .bt.is-sequence-active::before { animation: bento-card-scan 1.05s cubic-bezier(.165,.84,.44,1) both; }
.bt.is-sequence-active { background-color: #0A3427; box-shadow: inset 0 0 0 1px rgba(110,231,183,.22); }
@keyframes bento-card-scan {
  0% { opacity: 0; transform: translateX(-34%); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(34%); }
}
.bt-b .meter-fill { position: relative; overflow: hidden; }
.bt-b .meter-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  opacity: 0;
  transform: translateX(-100%);
}
.js-anim .bt-b.is-sequence-active .meter-fill::after { animation: meter-read 1.15s ease both; }
@keyframes meter-read { 35% { opacity: .8; } 100% { opacity: 0; transform: translateX(100%); } }
.js-anim .bt-c .dots i.is-current { animation: deadline-beat .82s cubic-bezier(.165,.84,.44,1) both; }
@keyframes deadline-beat { 0% { opacity: .25; transform: scaleY(.35); } 55% { transform: scaleY(2.15); } 100% { opacity: 1; transform: scaleY(1.65); } }
.js-anim .bt-e .check > span.is-current { animation: record-handoff .72s cubic-bezier(.165,.84,.44,1) both; }
@keyframes record-handoff { from { opacity: .2; transform: translateX(-9px); } to { opacity: 1; transform: translateX(5px); } }
.js-anim .bt-d.is-sequence-active .bt-map canvas { animation: jurisdiction-focus 1.15s cubic-bezier(.165,.84,.44,1) both; }
@keyframes jurisdiction-focus { 0% { opacity: .45; filter: saturate(.55); } 55% { opacity: 1; filter: saturate(1.35) brightness(1.08); } 100% { opacity: 1; filter: none; } }
.js-anim .bt-f.is-sequence-active .bt-n { animation: price-ink 1.05s ease both; }
@keyframes price-ink { 0% { opacity: .45; text-shadow: none; } 55% { opacity: 1; text-shadow: 0 0 18px rgba(110,231,183,.52); } 100% { opacity: 1; text-shadow: none; } }

@media (max-width: 700px) {
  .console-signing {
    inset: .55rem;
    grid-template-columns: minmax(7.6rem, .44fr) minmax(0, .56fr);
    gap: .45rem;
    padding: .62rem;
    border-radius: 10px;
  }
  .console-signing-title { max-width: 12ch; font-size: .82rem; }
  .console-signing .control-tabs { margin-top: .5rem; }
  .console-signing .control-tab,
  .console-signing .control-tab.is-active { padding: .52rem 1rem .52rem .45rem; font-size: .61rem; }
  .console-signing .control-tab.is-active { padding-left: .85rem; }
  .console-signing .control-tab small { display: none; }
  .console-signing .control-tab::after { right: 0; font-size: .75rem; }
  .console-signing .sig-stack { max-width: 12rem; padding: .65rem .55rem 0; }
  .console-signing .sheet-1 { padding: .58rem .62rem .5rem; }
  .console-signature { gap: .32rem; }
  .console-signing .trail { grid-template-columns: minmax(0,1fr); max-width: 12rem; }
  .console-signing .trail li { justify-content: flex-start; padding: .18rem .25rem; border-right: 0; font-size: .48rem; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .console-signing,
  [data-bento-sequence] .line-mini::after,
  .bt::before,
  .bt-b .meter-fill::after { animation: none !important; transition: none !important; }
}

/* ---------- quieter type + object-specific bento motion ---------- */

/* Headings read as labels, not oversized campaign statements. Hero type is
   intentionally untouched. */
h2 { font-weight: 500; }
#product h2,
#vault h2,
.cta-copy h2 {
  font-size: clamp(1.65rem, 2.35vw, 2rem);
  font-weight: 500;
  letter-spacing: -.03em;
}
.bt-n { font-weight: 540; }
.bt-n.small { font-weight: 520; }
.line-tab > span,
.station-name,
.case-card b,
.desk-case b,
.transit-card b,
.console-brand,
.control-tab { font-weight: 530; }
.console-signing-title { font-weight: 500; }

/* Product chrome stays structurally identical, but loses the rounded-card and
   heavy-shadow treatment that made it read like a concept mockup. */
.line-tabs { border-radius: 10px; }
.line-console { border-radius: 12px; box-shadow: 0 18px 42px rgba(4,36,28,.13); }
.console-run { border-radius: 6px; font-weight: 560; }
.console-station,
.console-desk { border-radius: 7px; }
.station-deck::before,
.station-deck::after,
.case-card,
.desk-case,
.transit-card { border-radius: 5px; }
.case-card,
.desk-case,
.transit-card { box-shadow: none; }
.console-inspector { border-radius: 7px; box-shadow: 0 18px 42px rgba(0,0,0,.38); }
.console-signing { border-radius: 8px; }

/* Detail pages keep hierarchy without a poster-sized headline. */
.sheet-in h3 {
  max-width: 28ch;
  font-size: clamp(1.5rem, 2.15vw, 1.9rem);
  font-weight: 500;
  line-height: 1.08;
}
.sheet-in { border-radius: 14px; }
.sheet-in .sheet-detail > p {
  font-size: 1rem;
  line-height: 1.48;
}
.sheet-in .sheet-detail li { font-size: .9rem; }

/* Generic sweeps, meters and day bars are retired. Each card now moves its
   actual object: case card, number, deadline, county map or checklist. */
[data-bento-sequence] .line-mini::before,
[data-bento-sequence] .line-mini::after,
.bt::before { display: none; }
.bt.is-sequence-active {
  background-color: #05271E;
  box-shadow: none;
}
.bt-b,
.bt-c { justify-content: center; }
.bt-b .bt-head,
.bt-c .bt-head { width: 100%; }
.bt-n.is-rolling { animation: number-resolve 1.05s cubic-bezier(.165,.84,.44,1) both; }
@keyframes number-resolve {
  0% { opacity: .28; filter: blur(4px); }
  42% { opacity: 1; filter: blur(0); }
  70% { color: var(--mint); }
  100% { color: #fff; }
}
.js-anim .bt-c.is-sequence-active .bt-n { animation: deadline-turn .82s cubic-bezier(.165,.84,.44,1) both; }
@keyframes deadline-turn {
  0% { opacity: .2; transform: translateY(8px) rotateX(-58deg); }
  58% { opacity: 1; transform: translateY(-2px) rotateX(0); }
  100% { transform: none; }
}

/* Pricing becomes a plain, compact fact. Background motion remains quiet and
   secondary to price and inclusions. */
#flow { opacity: .38; }
#pricing.flow-band .price {
  border: 1px solid rgba(10,31,25,.1);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 38px rgba(4,36,28,.1);
  backdrop-filter: none;
}
.price-fig {
  font-size: clamp(1.95rem, 3vw, 2.5rem);
  font-weight: 520;
  letter-spacing: -.035em;
}
.price-lead .ticks li { font-weight: 500; }
.file-card { border-radius: 12px; }

@media (max-width: 700px) {
  #product h2,
  #vault h2,
  .cta-copy h2 { font-size: 1.65rem; }
  .sheet-in h3 { font-size: 1.5rem; }
}

/* Each bento click-in uses a distinct information pattern. Shared modal chrome
   remains stable; content no longer repeats a paragraph-plus-bullets template. */
.sheet-detail-route,
.sheet-detail-risk,
.sheet-detail-deadline,
.sheet-detail-rules,
.sheet-detail-checks,
.sheet-detail-inclusions {
  display: block;
  min-width: 0;
}
.sheet-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  list-style: none;
}
.sheet-in .sheet-route li {
  position: relative;
  min-width: 0;
  padding: .45rem 2rem .45rem 0;
  border: 0;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
}
.sheet-in .sheet-route li::before { display: none; }
.sheet-in .sheet-route li:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: .8rem;
  color: var(--green-2);
}
.sheet-detail-risk > p { max-width: 27ch; margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.sheet-detail-deadline {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
}
.sheet-detail-deadline > span {
  min-width: 0;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
}
.sheet-rules,
.sheet-inclusions { display: grid; gap: .75rem; }
.sheet-rules > div,
.sheet-inclusions > div {
  display: grid;
  grid-template-columns: minmax(5rem,.42fr) minmax(0,.58fr);
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.sheet-rules dt,
.sheet-inclusions dt { color: var(--ink); font-size: .86rem; font-weight: 500; }
.sheet-rules dd,
.sheet-inclusions dd { min-width: 0; color: var(--sub); font-size: .86rem; }
.sheet-checks {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .6rem;
  list-style: none;
}
.sheet-in .sheet-checks li {
  position: relative;
  min-width: 0;
  padding: .5rem 0 .5rem 1.1rem;
  border: 0;
  color: var(--ink);
  font-size: .84rem;
}
.sheet-in .sheet-checks li::before {
  content: '✓';
  top: .5rem;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--green-2);
}

@media (max-width: 700px) {
  .sheet-route,
  .sheet-detail-deadline,
  .sheet-checks { grid-template-columns: minmax(0,1fr); }
  .sheet-in h3 {
    max-width: 100%;
    margin-inline: 0;
    padding: 0 3.5rem 0 0;
    text-align: left;
    overflow-wrap: anywhere;
  }
  .sheet-in .sheet-route li { padding-right: 0; }
  .sheet-in .sheet-route li:not(:last-child)::after { content: '↓'; position: static; display: block; margin-top: .35rem; }
  .sheet-rules > div,
  .sheet-inclusions > div { grid-template-columns: minmax(0,1fr); gap: .2rem; }
}

/* ---------- focused navigation, light console, and complete details ---------- */

/* The header has one decision. Brand stays left and the alpha action stays
   right at every breakpoint. */
.topbar-in { grid-template-columns: minmax(0,1fr) auto; }
.topbar-in > .topbar-cta { grid-column: 2; justify-self: end; }
.topbar-cta .btn:active { transform: translateY(0) scale(.98); }

@media (max-width: 560px) {
  .topbar-cta .btn { display: inline-flex; }
  .topbar-cta .btn-sm { padding-inline: .9rem; font-size: .8rem; }
}

/* Dashboard structure and sizing are unchanged. Only its surface palette is
   translated into the light product theme. */
.line-console {
  --console-bg: #F4F8F5;
  --console-panel: #FFFFFF;
  --console-tile: #F8FBF9;
  --console-line: #DCE7E1;
  --console-sub: #687A72;
  --console-ink: #122820;
  --console-green: #43B976;
  border-color: #D7E3DC;
  background: var(--console-bg);
  color: var(--console-ink);
  box-shadow: 0 18px 42px rgba(4,36,28,.1);
}
.console-bar,
.console-log { background: rgba(255,255,255,.96); }
.console-canvas {
  background-image: linear-gradient(rgba(10,31,25,.035) 1px, transparent 1px);
}
.console-run {
  background: #DDF5E6;
  color: #155B38;
}
.console-run:hover { background: #CDEFD9; }
.console-station,
.console-desk {
  border-color: var(--console-line);
  background: var(--console-panel);
}
.console-station:hover,
.console-desk:hover {
  border-color: #B9D4C5;
  background: #F8FCF9;
}
.station-deck::before,
.station-deck::after {
  border-color: #DFE9E3;
  background: #F5F9F6;
}
.case-card,
.desk-case,
.transit-card {
  border-color: #D7E4DC;
  background: #FFFFFF;
  color: var(--console-ink);
}
.case-card-alert { border-color: #E8BFB7; }
.case-card em,
.desk-case em { background: #FFF0ED; color: #B54B3E; }
.station-empty { color: #8A9A92; }
.transit-card {
  top: 10.72rem;
  min-height: 2.15rem;
  padding: .4rem .55rem;
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  border-color: #7BC999;
  background: #EEFAF2;
  box-shadow: 0 8px 20px rgba(24,96,61,.16);
}
.transit-card b { flex: none; font-size: .58rem; }
.transit-card small { flex: 1; margin-top: 0; font-size: .54rem; }
@keyframes console-card-run {
  0% { left: 1.1%; opacity: 0; transform: translateY(5px) scale(.94); }
  5% { opacity: 1; transform: none; }
  17% { left: 1.1%; }
  23% { left: 21%; transform: translateY(-2px); }
  38% { left: 21%; transform: none; }
  44% { left: 41%; transform: translateY(-2px); }
  58% { left: 41%; transform: none; }
  64% { left: 61%; transform: translateY(-2px); }
  77% { left: 61%; transform: none; }
  83% { left: 81.7%; transform: translateY(-2px); }
  94% { left: 81.7%; opacity: 1; transform: none; }
  100% { left: 81.7%; opacity: 0; transform: translateY(-5px) scale(.97); }
}
@keyframes console-station-pass {
  0%,12%,28%,100% { border-color: var(--console-line); transform: none; }
  16%,24% { border-color: #72BF90; transform: translateY(-2px); }
}
.line-console[data-line-state='desk'] .console-desk {
  border-color: #83C79D;
  background: #F0FAF4;
}
.console-inspector {
  border-color: #CADBD1;
  background: #FFFFFF;
  box-shadow: 0 18px 42px rgba(4,36,28,.16);
}
.console-inspector header button { color: var(--console-sub); }
.inspector-action { background: #DDF5E6; color: #155B38; }
.console-signing {
  border-color: #C9DDD1;
  background:
    linear-gradient(115deg, rgba(67,185,118,.07), transparent 38%),
    #F8FBF9;
  box-shadow: 0 18px 38px rgba(4,36,28,.14);
}
.console-signing .control-tab small { color: #7A8B83; }
.console-signing .control-tab::after { color: #8A9A92; }
.console-signing .sheet-1 { box-shadow: 0 12px 28px rgba(4,36,28,.13); }
.console-signing .trail li.is-active { background: rgba(67,185,118,.1); }

/* The moving case uses the free track beneath the stations instead of
   covering the resident cards. The cloned workflow scene also contains long
   labels within each station at every width. */
.sheet-preview-card.bt-a .bt-live { padding: 1.35rem 1.2rem 0; }
.sheet-preview-card.bt-a .line-mini { gap: .34rem; }
.sheet-preview-card.bt-a .line-mini .stn {
  min-width: 0;
  padding: .42rem;
  overflow: hidden;
}
.sheet-preview-card.bt-a .line-mini .crd { padding: .38rem; }
.sheet-preview-card.bt-a .line-mini .crd-n,
.sheet-preview-card.bt-a .line-mini .crd-m {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  line-height: 1.28;
}
.sheet-preview-card.bt-a .line-mini .stn-h { font-size: .62rem; }
.sheet-preview-card.bt-a .line-mini .crd-n { font-size: .6rem; }
.sheet-preview-card.bt-a .line-mini .crd-m { font-size: .54rem; }
@media (min-width: 761px) {
  .sheet-content {
    grid-template-columns: minmax(0, 1.22fr) minmax(17rem, .78fr);
    gap: clamp(1.75rem, 4vw, 3rem);
  }
}

@media (max-width: 700px) {
  .transit-card { top: 9.55rem; min-height: 1.8rem; padding: .3rem .4rem; }
  .transit-card small { display: none; }
  .sheet-preview-card.bt-a .bt-live { padding: 1rem .9rem 0; }
}

/* Every click-in carries its own explanation. Supporting patterns remain
   different, while paragraph treatment stays consistent and readable. */
.sheet-copy { display: grid; gap: .72rem; }
.sheet-copy p {
  margin: 0;
  color: var(--sub);
  font-size: .92rem;
  line-height: 1.55;
}
.sheet-copy p:first-child { color: var(--ink); }
.sheet-detail-deadline .sheet-copy { margin-bottom: 1.15rem; }
.sheet-detail-route .sheet-route,
.sheet-detail-rules .sheet-rules,
.sheet-detail-checks .sheet-checks,
.sheet-detail-inclusions .sheet-inclusions { margin-top: 1.15rem; }
.sheet-detail-deadline { display: block; }
.sheet-detail-deadline > span {
  display: block;
  width: 100%;
}

/* Pricing and the application now read as one continuous close rather than
   two isolated blocks. Clicking the header action reruns the arrival once the
   form reaches the reading area. */
#pricing.flow-band { padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
#open-a-file {
  scroll-margin-top: 68px;
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}
.cta-mesh {
  background:
    linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,.88) 12%, transparent 38%),
    radial-gradient(45% 60% at 8% 18%, rgba(110,231,183,.38), transparent 62%),
    radial-gradient(45% 60% at 90% 28%, rgba(16,156,156,.24), transparent 62%),
    radial-gradient(50% 60% at 62% 100%, rgba(224,145,58,.16), transparent 65%),
    #F4FBF7;
}
.js-anim .cta.is-arriving .cta-copy h2 { animation: alpha-title-arrive .75s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .cta.is-arriving .file-card { animation: alpha-card-arrive .9s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .cta.is-arriving .field { animation: alpha-field-arrive .62s cubic-bezier(.165,.84,.44,1) both; }
.js-anim .cta.is-arriving .field:nth-child(2) { animation-delay: .05s; }
.js-anim .cta.is-arriving .field:nth-child(3) { animation-delay: .1s; }
.js-anim .cta.is-arriving .field:nth-child(4) { animation-delay: .15s; }
.js-anim .cta.is-arriving .field:nth-child(5) { animation-delay: .2s; }
@keyframes alpha-title-arrive { from { opacity: .25; transform: translateY(10px); } }
@keyframes alpha-card-arrive { from { opacity: .45; transform: translateY(18px) scale(.985); box-shadow: 0 5px 18px rgba(4,36,28,.06); } }
@keyframes alpha-field-arrive { from { opacity: .4; transform: translateY(6px); } }

@media (max-width: 700px) {
  #open-a-file { scroll-margin-top: 62px; padding-top: 2.25rem; }
}

/* Product preview follows the current application: flat white surfaces,
   compact station decks, a fixed rail, and analysis as a real view. */
.line-tabs {
  grid-template-columns: repeat(4,minmax(0,1fr));
  width: min(100%,58rem);
  border-radius: 4px;
}
.line-tab,
.line-tab.is-active {
  min-height: 3.8rem;
  padding: .75rem 1.7rem;
}

.line-console {
  --console-bg: #FFFFFF;
  --console-panel: #FFFFFF;
  --console-tile: #EAF3EC;
  --console-line: #DDE3DE;
  --console-sub: #545E6A;
  --console-ink: #0B0F14;
  --console-green: #00563A;
  height: clamp(30rem,36vw,33rem);
  padding-left: 3.35rem;
  border-color: #DDE3DE;
  border-radius: 4px;
  background: var(--console-bg);
  box-shadow: none;
}
.console-rail {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  width: 3.35rem;
  flex-direction: column;
  align-items: center;
  gap: .42rem;
  padding: .82rem .5rem;
  border-right: 1px solid var(--console-line);
  background: #FFFFFF;
}
.console-rail-mark { width: 21px; height: 21px; margin-bottom: .6rem; }
.console-rail-icon {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 4px;
  color: #7A867F;
}
.console-rail-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.console-rail-icon.is-active,
.line-console[data-line-state='analysis'] .console-rail-icon.rail-analysis {
  background: #EAF3EC;
  color: #00563A;
}
.line-console[data-line-state='analysis'] .console-rail-icon.rail-dashboard {
  background: transparent;
  color: #7A867F;
}

.console-bar {
  min-height: 3.45rem;
  padding: .7rem 1rem;
  background: #FFFFFF;
}
.console-brand { gap: .5rem; color: var(--console-ink); }
.console-brand > b { font-size: .83rem; font-weight: 580; }
.console-status { font-size: .58rem; }
.console-status i { background: #43B976; }
.console-autopilot {
  color: var(--console-sub);
  font-size: .62rem;
  transition: opacity .25s ease;
}
.console-autopilot b { margin-left: .25rem; color: var(--console-ink); font-weight: 540; }
.console-run {
  border-radius: 999px;
  background: #E2F1EA;
  color: #00563A;
}
.console-run:hover { background: #D5EBDD; }
.console-canvas { background-image: none; transition: opacity .3s ease; }

.console-station,
.console-desk {
  border-color: var(--console-line);
  border-radius: 4px;
  background: #FFFFFF;
}
.console-station:hover,
.console-desk:hover { border-color: #A8BEB1; background: #FBFDFC; }
.station-name { color: #232B27; }
.station-count {
  display: grid;
  min-width: 1rem;
  height: 1rem;
  margin-left: auto;
  place-items: center;
  border-radius: 50%;
  background: #EAF3EC;
  color: #00563A;
  font-size: .5rem;
  font-style: normal;
}
.station-deck::before,
.station-deck::after {
  border-color: #E2E8E4;
  border-radius: 4px;
  background: #F6F8F7;
}
.case-card,
.desk-case,
.transit-card {
  border-color: #80A98E;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
}
.case-card small {
  display: flex;
  justify-content: space-between;
  gap: .35rem;
}
.case-card small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.case-card em,
.desk-case em { border-radius: 3px; }
.console-desk { border-top-style: dashed; }
.console-inspector,
.console-signing { border-radius: 4px; }
.console-log { transition: opacity .3s ease; }

.console-analysis {
  position: absolute;
  z-index: 30;
  top: 4.25rem;
  right: .9rem;
  bottom: .9rem;
  left: calc(3.35rem + .9rem);
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  gap: .8rem;
  padding: .2rem;
  overflow: hidden;
  background: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(9px);
  transition: opacity .3s ease, transform .45s cubic-bezier(.165,.84,.44,1), visibility 0s linear .45s;
}
.line-console[data-line-state='analysis'] .console-analysis {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.line-console[data-line-state='analysis'] .console-canvas,
.line-console[data-line-state='analysis'] .console-log { opacity: 0; pointer-events: none; }
.line-console[data-line-state='analysis'] .console-autopilot,
.line-console[data-line-state='analysis'] .console-run { opacity: 0; pointer-events: none; }
.analysis-primary {
  display: grid;
  grid-template-columns: minmax(11rem,.38fr) minmax(0,.62fr);
  min-height: 0;
  border-bottom: 1px solid var(--console-line);
}
.analysis-figure {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: .8rem 1rem .65rem;
}
.analysis-figure > span,
.analysis-metrics article > span { color: var(--console-sub); font-size: .6rem; }
.analysis-figure > span { display: flex; align-items: center; justify-content: space-between; }
.analysis-figure > span i { color: #397E56; font-size: .52rem; font-style: normal; }
.analysis-figure > span i::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: .3rem; border-radius: 50%; background: #43B976; vertical-align: 1px; }
.analysis-figure > strong {
  margin-top: .8rem;
  color: var(--console-ink);
  font-size: clamp(1.45rem,3vw,2.35rem);
  font-weight: 490;
  letter-spacing: -.04em;
}
.analysis-figure svg { width: 100%; height: 5.7rem; margin-top: auto; overflow: visible; }
.analysis-area { fill: rgba(0,86,58,.06); opacity: 0; }
.analysis-line {
  fill: none;
  stroke: #2B6B86;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
}
.line-console[data-line-state='analysis'] .analysis-area { animation: analysis-area-in .7s ease .35s both; }
.line-console[data-line-state='analysis'] .analysis-line { animation: analysis-line-in 1.15s cubic-bezier(.2,.8,.3,1) .12s both; }
@keyframes analysis-line-in { to { stroke-dashoffset: 0; } }
@keyframes analysis-area-in { to { opacity: 1; } }

.analysis-breakdown {
  min-width: 0;
  margin: .35rem .35rem .85rem;
  border: 1px solid var(--console-line);
  border-radius: 4px;
}
.analysis-breakdown > div,
.analysis-breakdown p {
  display: grid;
  grid-template-columns: minmax(0,1fr) 4rem;
  gap: 1rem;
  align-items: center;
  min-height: 2.4rem;
  margin: 0;
  padding: .35rem .8rem;
  border-bottom: 1px solid #E8ECE9;
  font-size: .62rem;
}
.analysis-breakdown p:last-child { border-bottom: 0; }
.analysis-breakdown > div { color: var(--console-sub); font-size: .54rem; }
.analysis-breakdown > div span:last-child,
.analysis-breakdown p em { text-align: right; }
.analysis-breakdown p b { overflow: hidden; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
.analysis-breakdown p em { color: var(--console-sub); font-style: normal; font-variant-numeric: tabular-nums; }
.analysis-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.analysis-metrics article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .2rem .6rem;
  min-width: 0;
  padding: .7rem .85rem;
  border: 1px solid var(--console-line);
  border-radius: 4px;
}
.analysis-metrics strong { font-size: 1.12rem; font-weight: 500; letter-spacing: -.025em; }
.analysis-metrics strong small { color: var(--console-sub); font-size: .55rem; font-weight: 450; }

.console-inspector .inspector-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin-top: .8rem;
  padding: 0;
  border: 1px solid var(--console-line);
  border-radius: 4px;
}
.console-inspector .inspector-metrics > span {
  min-width: 0;
  padding: .62rem;
  border-right: 1px solid var(--console-line);
}
.console-inspector .inspector-metrics > span:last-child { border-right: 0; }
.inspector-metrics small {
  display: block;
  color: var(--console-sub);
  font-size: .5rem;
}
.inspector-metrics b {
  display: block;
  margin-top: .25rem;
  overflow: hidden;
  color: var(--console-ink);
  font-size: .72rem;
  font-weight: 540;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.console-inspector .inspector-review {
  display: block;
  margin-top: .7rem;
  padding: 0;
  border: 1px solid var(--console-line);
  border-radius: 4px;
}
.console-inspector .inspector-review > span {
  display: flex;
  min-height: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .45rem .62rem;
  border-bottom: 1px solid var(--console-line);
  font-size: .58rem;
}
.console-inspector .inspector-review > span:last-child { border-bottom: 0; }
.inspector-review b { font-weight: 510; }
.inspector-review em {
  color: var(--console-sub);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.inspector-review .inspector-ready { color: var(--console-green); }
.inspector-review .inspector-due { color: #9A562D; }
.line-console[data-line-state='inspect'] .inspector-review > span {
  animation: inspector-review-in .48s cubic-bezier(.2,.8,.3,1) both;
}
.line-console[data-line-state='inspect'] .inspector-review > span:nth-child(2) { animation-delay: .06s; }
.line-console[data-line-state='inspect'] .inspector-review > span:nth-child(3) { animation-delay: .12s; }
.line-console[data-line-state='inspect'] .inspector-review > span:nth-child(4) { animation-delay: .18s; }
@keyframes inspector-review-in {
  from { opacity: 0; transform: translateX(8px); }
}

@media (max-width: 700px) {
  .line-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .line-tab,
  .line-tab.is-active {
    min-height: 3.65rem;
    padding: .72rem 2rem .72rem .8rem;
    border-right: 1px solid var(--line);
    text-align: left;
  }
  .line-tab:nth-child(2n) { border-right: 0; }
  .line-tab:nth-last-child(-n+2) { border-bottom: 0; }
  .line-console { height: 30rem; padding-left: 0; }
  .console-rail { display: none; }
  .console-analysis { left: .7rem; right: .7rem; bottom: .7rem; }
  .analysis-primary { grid-template-columns: 43% 57%; }
  .analysis-figure { padding-inline: .55rem; }
  .analysis-breakdown > div,
  .analysis-breakdown p { grid-template-columns: minmax(0,1fr) 2.8rem; gap: .4rem; padding-inline: .55rem; }
  .analysis-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
}

@media (max-width: 430px) {
  .line-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .line-tab,
  .line-tab.is-active { min-height: 3.5rem; padding: .68rem 1.8rem .68rem .7rem; }
  .line-tab small,
  .line-tab.is-active small { display: none; }
  .console-autopilot { display: none; }
  .analysis-figure > strong { font-size: 1.3rem; }
  .analysis-figure svg { height: 4.6rem; }
  .analysis-metrics article { padding: .55rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .line-console[data-line-state='inspect'] .inspector-review > span { animation: none; }
}

/* Clear bento disclosure and compact application privacy treatment. */
.bt-open {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .42rem;
  margin-left: auto;
  color: rgba(230,241,236,.58);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: color .2s ease;
}
.bt-open .bt-i { margin: 0; }
.bt:hover .bt-open,
.bt:focus-visible .bt-open { color: var(--mint); }
.sheet-preview-card .bt-open { display: none; }

.bt-e .check {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: start;
}
.bt-e .check > span {
  display: grid;
  grid-template-columns: 13px minmax(0,1fr);
  align-items: start;
  gap: .55rem;
  min-width: 0;
  line-height: 1.3;
}
.bt-e .check i { margin-top: .04rem; }
[data-bento-sequence] .check > span.is-current { transform: none; }
.js-anim .bt-e .check > span.is-current {
  animation: record-check-focus .72s cubic-bezier(.165,.84,.44,1) both;
}
@keyframes record-check-focus {
  from { opacity: .2; }
  to { opacity: 1; }
}

.sheet-route-full { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .25rem .8rem; }
.sheet-capabilities { grid-template-columns: minmax(0,1fr); }
.sheet-detail-risk .sheet-capabilities,
.sheet-detail-deadline .sheet-capabilities { margin-top: 1.15rem; }
.sheet-checks { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sheet-in .sheet-checks li {
  display: grid;
  grid-template-columns: .8rem minmax(0,1fr);
  align-items: start;
  padding-left: 0;
  line-height: 1.35;
}
.sheet-in .sheet-checks li::before {
  position: static;
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
}

.form-foot {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) minmax(15rem,.85fr);
  align-items: center;
  gap: .75rem 1rem;
}
.form-foot .form-status { min-width: 0; }
.form-foot .form-status:empty { display: none; }
.form-foot .form-privacy {
  max-width: 32ch;
  margin: 0;
  justify-self: end;
  color: var(--faint);
  font-size: .66rem;
  line-height: 1.4;
  text-align: right;
}
.form-foot .form-privacy a { text-decoration-thickness: 1px; }

@media (max-width: 700px) {
  .sheet-route-full,
  .sheet-checks { grid-template-columns: minmax(0,1fr); }
  .bt-e:not(.is-open) .check > span:nth-child(n+4) { display: grid; }
  .sheet-preview-card.bt-e { min-height: 16rem; }
  .form-foot { grid-template-columns: minmax(0,1fr); }
  .form-foot .btn { justify-self: start; }
  .form-foot .form-status,
  .form-foot .form-privacy {
    grid-column: 1;
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bt-open { transition: none; }
}