/* Solden design system, v5 (consolidated).
   Warm paper, a serif voice, centred composition, soft cards, one product-like hero object.
   Teal is Solden's colour: it marks what Solden owns. Navy is ink. Everything self-hosted, no inline styles.

   Order: tokens and base, layout, header, buttons and tags, hero, hero frame (the demo mock),
   hero strip, connections diagram, cards and feature rows, stages, trust, org chart, team,
   dark block and form, prose, footer, inner-page tiles, reveal. Every media query sits at the
   end of the file, after the base rules it overrides, so no appended base rule can defeat it.
   The demo script emits p-D-R-C classes on the progress bar and state classes on rows; keep those. */

/* ---------------------------------------------------------------- Tokens */

:root {
  --canvas: #fbfaf6;
  --canvas-2: #f3f1ea;
  --chrome: #fafaf8;
  --ink: #0b1530;
  --ink-soft: #2b3550;
  --muted: #5e6778;
  --faint: #5e6778;
  --faint-stroke: #98a0b0;
  --rule: rgba(11, 21, 48, 0.1);
  --rule-strong: rgba(11, 21, 48, 0.28);
  --teal: #18bfb0;
  --teal-ink: #0a6f67;
  --teal-soft: #e3f6f3;
  --teal-pale: #b9d9d5;
  --amber: #e8b04a;
  --amber-soft: #fbf1df;
  --amber-ink: #8a5a00;
  --navy: #001137;
  --dark: #0d1730;
  --dark-muted: #9fabc7;
  --dark-rule: rgba(255, 255, 255, 0.12);

  --serif: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1160px;
  --gutter: 24px;
  --section: 112px;
  --radius: 10px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(11, 21, 48, 0.04), 0 14px 44px rgba(11, 21, 48, 0.08);
  --shadow-soft: 0 1px 2px rgba(11, 21, 48, 0.04), 0 6px 20px rgba(11, 21, 48, 0.06);
}

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

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

html {
  color-scheme: light;
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-soft);
  font: 400 17px/1.6 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

/* Fraunces ships two axes here, opsz (9 to 144) and wght, so only those are set. */
h1,
h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 96;
  text-wrap: pretty;
}

h1 {
  font-weight: 600;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
}

h2 {
  font-weight: 560;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.05;
}

h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

p {
  margin: 0;
}

p + p {
  margin-top: 16px;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--canvas);
}

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

strong {
  font-weight: 600;
  color: var(--ink);
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--ink);
  color: var(--canvas);
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 12px;
}

/* ---------------------------------------------------------------- Layout */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section-tight {
  padding-block: 72px;
}

/* Section heads are left-aligned: eyebrow, h2 (18ch), lede (40ch), then the device 56px below. */
.centre {
  text-align: left;
}

.centre h2 {
  max-width: 18ch;
}

.centre .lede {
  max-width: 40ch;
}

.eyebrow {
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
}

h2 + .lede {
  margin-top: 20px;
}

.centre .lede + .stack,
.centre .lede + .compare,
.centre .lede + .test-cells,
.centre .lede + .ws-reg,
.centre .lede + .stages,
.centre .lede + .mini-grid,
.centre .lede + .org,
.centre h2 + .team,
.centre h2 + .mini-grid {
  margin-top: 56px;
}

/* About: the why runs straight on into the order. The two sections meet with one modest gap
   instead of two full section paddings, so the closing line leads into the vision line. */
.section-lead {
  padding-bottom: 0;
}

.section-follow {
  padding-top: clamp(64px, 7vw, 96px);
  scroll-margin-top: 56px;
}

/* About: the why, set as prose. The opening paragraph in the darker ink, the rest muted,
   and one closing line in the display face that hands over to the vision line that opens the order. */
.centre .why-title {
  max-width: 26ch;
}

.why-title span {
  display: block;
}

.why {
  max-width: 60ch;
  margin-top: 24px;
}

.why p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.why p + p {
  margin-top: 18px;
}

.why p:first-child {
  color: var(--ink-soft);
}

.why-line {
  margin-top: 44px;
  max-width: 24ch;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96;
  font-weight: 560;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}

@media (max-width: 720px) {
  .why p {
    font-size: 17px;
  }
}

.cycle-tail {
  margin-top: 36px;
  font-size: 18px;
  color: var(--muted);
  text-wrap: pretty;
}

.mt-6 {
  margin-top: 48px;
}

.section-head-left {
  text-align: left;
  margin-bottom: 8px;
}

.section-head-left h2 {
  max-width: 18ch;
}

.mid-cta {
  padding-block: 8px 0;
}

.mid-cta .lede {
  max-width: 40ch;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}

.split .body-col {
  position: sticky;
  top: 96px;
  text-align: left;
}

.split h2 {
  font-size: clamp(28px, 3vw, 40px);
  max-width: none;
  margin-bottom: 0;
}

.split .lede {
  margin-top: 20px;
}

/* ---------------------------------------------------------------- Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 246, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand img {
  width: 110px;
  height: 27px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.nav-menu {
  display: none;
  position: relative;
}

.nav-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 14px/1 var(--sans);
  padding: 9px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu nav {
  display: grid;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 4px 14px;
  box-shadow: var(--shadow-card);
  z-index: 60;
}

.nav-menu nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-size: 15px;
}

.nav-menu nav a:last-child {
  border-bottom: 0;
}

/* ---------------------------------------------------------------- Buttons and tags */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  font: 500 15px/1 var(--sans);
  padding: 0 20px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn::after {
  content: "→";
  font-family: var(--sans);
}

.btn-small {
  height: 40px;
  font-size: 14px;
  padding: 0 16px;
}

/* On navy surfaces the primary button is cream with ink text. */
.btn-light {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--canvas);
}

.btn-light:hover {
  background: #fff;
  border-color: #fff;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px 28px;
  margin-top: 36px;
}

.actions .link {
  font-weight: 500;
}

.tag {
  display: inline-block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  background: #fff;
  white-space: nowrap;
}

.tag-solden {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--navy);
}

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

.hero {
  position: relative;
  padding-block: 96px 0;
}

.hero .wrap {
  position: relative;
  text-align: left;
}

.hero h1 {
  max-width: 16ch;
}

.hero .lede {
  margin: 24px 0 0;
  max-width: 54ch;
  color: var(--ink-soft);
}

.hero .register-meta {
  margin: 16px 0 0;
}

/* Home hero: an editorial two-column set. Headline left, lede and actions right, bottoms aligned. */
.hero-home {
  padding-block: 96px 0;
}

.hero-home .wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  column-gap: 24px;
  align-items: end;
}

.hero-home h1 {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  align-self: end;
  max-width: 16ch;
  margin: 0;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1;
}

.hero-home .lede {
  grid-column: 7 / 13;
  grid-row: 1;
  align-self: end;
  margin: 0;
  max-width: 48ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero-home .actions {
  grid-column: 7 / 13;
  grid-row: 2;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 20px;
}

/* A page whose hero is its only section (thanks, 404) needs its own bottom breathing room. */
main > .hero:last-child {
  padding-bottom: 96px;
}

.register-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---------------------------------------------------------------- Hero frame: the demo mock */

/* The stage: the mock and its caption and signature strip, on the same cream as everything else. */
.stage {
  position: relative;
  display: flow-root;
  margin-top: 112px;
  padding: 0 var(--gutter) 0;
}

.frame-wrap {
  position: relative;
  margin: 0;
}

.frame-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 14px auto 0;
  font: 400 12px/1.5 var(--mono);
  color: var(--muted);
  text-wrap: pretty;
}

.frame-well {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
}

.frame {
  max-width: 1200px;
  margin-inline: auto;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(11, 21, 48, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 24px 48px -16px rgba(0, 17, 55, 0.35), 0 64px 120px -40px rgba(0, 17, 55, 0.5);
  overflow: hidden;
  text-align: left;
  font-size: 13px;
  color: var(--ink-soft);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Locked: a teal ring on the frame. The border width is unchanged, so the outer height stays the same. */
.frame.locked {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 24px 48px -16px rgba(0, 17, 55, 0.35), 0 64px 120px -40px rgba(0, 17, 55, 0.5);
}

.frame p + p {
  margin-top: 0;
}

/* Top bar: lockup and breadcrumb left, sync state and bell right. No window chrome. */

.win-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--rule);
  background: #f6f5f1;
  font-size: 12px;
}

.win-left,
.win-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.win-left {
  min-width: 0;
  overflow: hidden;
}

.win-right {
  flex: none;
  justify-content: flex-end;
  color: var(--muted);
}

.win-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.win-brand img {
  width: 73px;
  height: 18px;
  max-width: none;
  flex: none;
  object-fit: contain;
}

.win-crumb,
.win-sync {
  white-space: nowrap;
}

.win-crumb {
  color: var(--muted);
}

.win-crumb.on {
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-sep {
  color: var(--faint-stroke);
}

.win-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.win-sync i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.win-av {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font: 600 11px/1 var(--sans);
}

/* Pause control: plain mono text in the caption row, underlined on hover. */
.demo-pause {
  appearance: none;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 12px/1.5 var(--mono);
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.demo-pause:hover {
  color: var(--ink);
  text-decoration: underline;
}

.demo-pause[aria-pressed="true"] {
  color: var(--ink);
  text-decoration: underline;
}

/* Body grid and camera */

.frame-body {
  display: grid;
  grid-template-columns: 180px 1fr 240px;
  height: 760px;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.35s ease;
  transform-origin: 100% 0;
}

/* Reset: the body fades out, the markup is swapped while it is invisible, then it fades back in. The height is fixed, so the frame never moves. */
.frame.resetting .frame-body {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.frame[data-camera="panel"] .frame-body {
  transform: scale(1.045);
}

.frame[data-camera="panel"] .frame-main {
  opacity: 0.55;
  filter: saturate(0.7);
}

.frame[data-camera="panel"] .frame-panel {
  box-shadow: -32px 0 64px -32px rgba(0, 17, 55, 0.28);
}

.frame[data-camera="panel"] .frame-side {
  opacity: 0;
}

.frame-main,
.frame-panel {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.9s ease, filter 0.9s ease, box-shadow 0.9s ease;
}

.frame-body > * {
  min-width: 0;
}

/* Sidebar */

.frame-side {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  padding: 14px 10px;
  background: var(--chrome);
  transition: opacity 0.9s ease;
}

.frame-side ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 2px;
}

.frame-side li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 13px;
}

.frame-side li.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 21, 48, 0.06);
}

.frame-side li svg {
  color: var(--faint-stroke);
  flex: none;
}

.frame-side li.active svg {
  color: var(--teal-ink);
}

.frame-side li b {
  margin-left: auto;
  font: 500 11px/1 var(--sans);
  color: var(--amber-ink);
  background: var(--amber-soft);
  border-radius: 999px;
  padding: 3px 7px;
}

.side-group + .side-group {
  margin-top: 14px;
}

.side-h {
  display: block;
  padding: 0 10px 6px;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.side-foot {
  margin-top: auto;
  padding: 12px 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
}

.side-foot strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}

.side-foot span:last-child {
  color: var(--muted);
  font-size: 11px;
}

/* Main column */

.frame-main {
  padding: 18px 20px 14px;
}

.main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.main-head p {
  font-size: 12px;
  color: var(--muted);
}

.main-head .h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.main-actions {
  display: flex;
  gap: 8px;
}

.main-actions .pbtn {
  white-space: nowrap;
}

.pbtn {
  display: inline-block;
  font: 500 12px/1 var(--sans);
  padding: 8px 11px;
  border-radius: 7px;
  border: 1px solid rgba(11, 21, 48, 0.14);
  color: var(--ink);
  background: #fff;
}

.pbtn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.pbtn-disabled {
  opacity: 0.45;
}

.pbtn.pressed {
  transform: scale(0.96);
  background: var(--teal-ink);
  border-color: var(--teal-ink);
  color: #fff;
  opacity: 1;
  transition: transform 0.15s ease, background 0.15s ease;
}

.head-badge {
  display: inline-block;
  vertical-align: middle;
  font: 500 11px/1 var(--sans);
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--canvas-2);
  color: var(--muted);
  transition: background 0.4s ease, color 0.4s ease;
}

.head-badge.warn {
  background: var(--amber-soft);
  color: var(--amber-ink);
}

.head-badge.ok {
  background: var(--teal-soft);
  color: var(--teal-ink);
}

/* Progress: the bar is driven by p-D-R-C classes from the script (done, review, call) out of 16 */

.progress {
  margin: 16px 0 14px;
}

.progress-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--canvas-2);
}

.progress-bar i {
  flex: 0.001 1 0;
  min-width: 0;
  transition: flex 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.progress-bar .done { background: var(--teal); }
.progress-bar .review { background: var(--teal-pale); }
.progress-bar .call { background: var(--amber); }

.progress-bar::after {
  content: "";
  flex: 15;
  min-width: 0;
}

/* Sixteen workstreams: the done, review and call segments share the track with the remainder. */
.progress-bar.p-1-0-0 .done { flex: 1; }
.progress-bar.p-2-0-0 .done { flex: 2; }
.progress-bar.p-3-0-0 .done { flex: 3; }
.progress-bar.p-3-0-1 .done { flex: 3; }
.progress-bar.p-3-0-1 .call { flex: 1; }
.progress-bar.p-4-0-0 .done { flex: 4; }
.progress-bar.p-14-0-0 .done { flex: 14; }
.progress-bar.p-15-0-0 .done { flex: 15; }
.progress-bar.p-16-0-0 .done { flex: 16; }

.progress-bar.p-1-0-0::after { flex: 15; }
.progress-bar.p-2-0-0::after { flex: 14; }
.progress-bar.p-3-0-0::after { flex: 13; }
.progress-bar.p-3-0-1::after { flex: 12; }
.progress-bar.p-4-0-0::after { flex: 12; }
.progress-bar.p-14-0-0::after { flex: 2; }
.progress-bar.p-15-0-0::after { flex: 1; }
.progress-bar.p-16-0-0::after { flex: 0.001; }

.progress-key {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
}

.progress-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.progress-key .right {
  margin-left: auto;
  display: inline-flex;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}

.progress-key i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.progress-key .d-done { background: var(--teal); }
.progress-key .d-review { background: var(--teal-pale); }
.progress-key .d-call { background: var(--amber); }

.progress-key .kv b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Workstream table */

.wtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wtable th small {
  font-weight: 400;
  color: var(--faint);
  margin-left: 6px;
}

.wtable th {
  text-align: left;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--faint);
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--rule);
}

.wtable td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 13px;
  vertical-align: middle;
  transition: background 0.5s ease;
}

.wtable td:last-child,
.wtable th:last-child {
  text-align: right;
}

.wtable tr:last-child td {
  border-bottom: 0;
}

.wtable th:first-child,
.wtable td:first-child {
  min-width: 190px;
}

.wtable td b {
  font-weight: 500;
  white-space: nowrap;
}

.wtable td:nth-child(2) {
  white-space: nowrap;
}

.wtable .sub {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}

.wtable tr.sel td {
  background: #fbf6ea;
}

.wtable tr.sel td:first-child {
  box-shadow: inset 2px 0 0 var(--amber);
  border-radius: 6px 0 0 6px;
}

.wtable-demo {
  table-layout: fixed;
}

.wtable-demo th:nth-child(1), .wtable-demo td:nth-child(1) { width: 36%; }
.wtable-demo th:nth-child(2), .wtable-demo td:nth-child(2) { width: 19%; }
.wtable-demo th:nth-child(3), .wtable-demo td:nth-child(3) { width: 22%; }
.wtable-demo th:nth-child(4), .wtable-demo td:nth-child(4) { width: 23%; }

.wtable-demo .res {
  text-align: right;
  font: 500 12px/1.3 var(--sans);
  color: var(--teal-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.wtable-demo th.res {
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--faint);
  opacity: 1;
}

.wtable-demo .res.in {
  opacity: 1;
}

.wtable-demo tr.running td {
  background: #f6f9f8;
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.who i {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font: 600 8px/1 var(--sans);
  font-style: normal;
}

.who-s i {
  background: #fff;
  border: 1px solid var(--rule);
}

.who-s i img {
  display: block;
  width: 12px;
  height: 12px;
}

/* Handover: each workstream starts with a named team member and passes to Solden, one row at a time. */

.who {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.who-h {
  color: var(--muted);
}

.who-h i {
  background: rgba(11, 21, 48, 0.08);
  color: var(--ink-soft);
}

.wtable tr[data-owner="team"] .who-s,
.wtable tr[data-owner="solden"] .who-h {
  display: none;
}

.wtable tr[data-owner="solden"] .who-s {
  animation: slide-in 0.3s ease both;
}

.wtable tr.handoff td {
  background: var(--teal-soft);
  transition: background 0.4s ease;
}

/* The countersignature: once the period locks, the controller's signature sits above the result. */

.wtable-demo tr.signed td.res {
  font: 400 11px/1.3 var(--mono);
  color: var(--ink);
}

.wtable-demo tr.signed td.res::before {
  content: "H. Whitmore";
  display: block;
  width: 140px;
  margin: 0 0 4px auto;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  font: italic 400 15px/1 var(--serif);
  color: var(--ink);
}

/* Status pills. The running pulse animates a separate ring on transform and opacity, never box-shadow. */

.st {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--sans);
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.4s ease;
}

.st::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint-stroke);
}

.st-queued {
  color: var(--faint);
}

.st-queued::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
}

.st-running {
  color: var(--ink);
}

.st-running::before,
.st-done::before {
  background: var(--teal);
}

.st-running::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse 1.1s ease-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}

.st-call {
  color: var(--amber-ink);
  font-weight: 600;
}

.st-call::before {
  background: var(--amber);
}

/* Run log */

.runlog {
  margin-top: 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--chrome);
  padding: 10px 12px;
  height: 140px;
  overflow: hidden;
  transition: opacity 0.6s ease;
}

.runlog.quiet {
  opacity: 0.7;
}

.runlog-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1 var(--sans);
  color: var(--ink);
  margin-bottom: 8px;
}

.runlog-step {
  margin-left: auto;
  font: 400 11px/1 var(--sans);
  color: var(--faint);
}

.spin {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  border-top-color: var(--teal-ink);
  animation: spin 0.9s linear infinite;
}

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

.runlog-lines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
  font: 400 11.5px/1.5 var(--mono);
  color: var(--muted);
}

.runlog-lines li {
  padding-left: 14px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.runlog-lines li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--faint);
}

.runlog-lines li.ok {
  color: var(--teal-ink);
}

.runlog-lines li.ok::before {
  content: "✓";
}

.runlog-lines li.new,
.activity li.new {
  animation: slide-in 0.4s ease both;
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Right panel: activity, case, pack */

.frame-panel {
  border-left: 1px solid var(--rule);
  padding: 16px 16px 14px;
  background: #fff;
  display: grid;
  gap: 14px;
  align-content: start;
}

.frame-panel .pv {
  display: none;
  animation: slide-in 0.5s ease both;
}

.frame-panel[data-view="activity"] .pv-activity,
.frame-panel[data-view="case"] .pv-case,
.frame-panel[data-view="pack"] .pv-pack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.frame-panel .pv-case .panel-sec:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.panel-k {
  display: block;
  font: 500 11px/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.panel-head .h4 {
  margin: 4px 0 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.panel-meta {
  font-size: 11.5px;
  color: var(--muted);
}

.panel-sec {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.panel-sec p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.files {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.files li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--mono);
  color: var(--ink-soft);
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 6px 8px;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}

.panel-actions.decided .pbtn:not(.pbtn-primary) {
  opacity: 0.4;
}

.panel-actions.decided .pbtn-primary {
  background: var(--teal-ink);
  border-color: var(--teal-ink);
}

.panel-actions.decided .pbtn-primary::after {
  content: "d";
}

.activity {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
}

.activity li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: start;
}

.activity time {
  font: 400 11px/1.5 var(--sans);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.activity b {
  font-weight: 600;
  color: var(--ink);
}

.packlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.packlist li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--muted);
}

.packlist li:first-child {
  border-top: 0;
}

.packlist b {
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Pause control: everything animated inside the frame, and the diagram's write line, hold still. */

.frame[data-paused] *,
.frame[data-paused] *::before,
.frame[data-paused] *::after,
#connects[data-paused] .line,
#connects[data-paused] .write {
  animation-play-state: paused;
}

/* ---------------------------------------------------------------- Signature strip: prepared, reviewed, attested */

.sigstrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(11, 21, 48, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  text-align: left;
}

.sig-cell {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: start;
  padding: 20px 24px;
  min-width: 0;
}

.sig-cell + .sig-cell {
  border-left: 1px solid var(--rule);
}

.sig-cell .label {
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.sig-cell p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.sigline {
  display: block;
  width: 100%;
  max-width: 220px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  font: italic 400 20px/1 var(--serif);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stage-strip {
  max-width: 1200px;
  margin: 40px auto 0;
}

.form-col {
  display: grid;
  gap: 32px;
  align-content: start;
}

/* ---------------------------------------------------------------- Strips (buying test) */

.strip-cells {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.strip-cell {
  display: grid;
  gap: 10px;
  align-content: start;
}

.strip-cell .label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.strip-cell p {
  font-size: 13px;
  color: var(--muted);
}

.test-cells {
  margin-top: 56px;
  text-align: left;
}

.test-cells .strip-cell p {
  font-size: 15px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- Connections: your systems stay yours */

.stack {
  margin-top: 56px;
}

.stack-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--sans);
}

.stack-svg .line {
  fill: none;
  stroke: rgba(11, 21, 48, 0.26);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 8 14;
}

.stack-svg .tile rect {
  fill: #fff;
  stroke: rgba(11, 21, 48, 0.1);
}

.stack-svg .tile text {
  font: 500 13px var(--sans);
  fill: var(--ink);
}

.stack-svg .erp-box {
  fill: #fff;
  stroke: rgba(11, 21, 48, 0.14);
}

.stack-svg .k {
  font: 500 11px var(--mono);
  letter-spacing: 0.1em;
  fill: var(--faint);
}

.stack-svg .k-teal {
  fill: var(--teal-ink);
}

.stack-svg .erp-t {
  font: 700 19px var(--sans);
  letter-spacing: -0.02em;
  fill: var(--ink);
}

.stack-svg .erp-sep {
  fill: var(--faint-stroke);
}

.stack-svg .erp-more text {
  font: 600 13px var(--sans);
  fill: var(--ink-soft, var(--ink));
}

.stack-svg .erp-more .erp-and {
  font-weight: 500;
  fill: var(--muted);
}

/* Only the write line moves: dashes flow from the mark up to the ERP. The read spokes hold still. */
.stack-svg .write {
  stroke: var(--teal);
  stroke-width: 2;
  stroke-dasharray: 4 8;
  stroke-linecap: round;
  animation: flow-write 6s linear infinite;
}

/* The offset is a whole number of dash periods (4 + 8 = 12), so the loop never snaps. */
@keyframes flow-write {
  to { stroke-dashoffset: -72; }
}

.stack-svg .write-arrow {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stack-svg .solden-halo {
  fill: var(--canvas);
}

.stack-mobile {
  display: none;
}

/* ---------------------------------------------------------------- Cards and lists */

.card {
  text-align: left;
}

.card h3 {
  margin-bottom: 8px;
}

.card .sub {
  color: var(--muted);
  font-size: 15px;
}

.card-grid-2 {
  grid-template-columns: 1fr 1fr;
  margin-top: 56px;
}

.test-grid {
  margin-top: 32px;
  text-align: left;
}

.test-grid .panel-k {
  margin-bottom: 8px;
}

.test-grid h3 {
  font-size: 18px;
}

.check,
.cross {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-soft);
}

.check li,
.cross li {
  position: relative;
  padding-left: 30px;
}

.check li::before,
.cross li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font: 600 11px/20px var(--sans);
  text-align: center;
}

.check li::before {
  content: "✓";
  background: none;
  color: var(--teal-ink);
  font-size: 14px;
}

.cross li::before {
  content: "×";
  background: var(--canvas-2);
  color: var(--muted);
}

/* ---------------------------------------------------------------- Feature rows with paper collages */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 96px;
  align-items: center;
  padding-block: 96px;
}

.feature + .feature {
  border-top: 1px solid var(--rule);
}

.feature-solo {
  padding-block: 0;
}

.feature-more {
  margin-top: 28px;
}

.feature h3 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96;
  font-weight: 560;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-bottom: 18px;
}

.feature .lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
}

.feature .check {
  margin-top: 28px;
  gap: 14px;
  font-size: 16px;
  color: var(--ink-soft);
}

/* The collage: two tilted papers, one figure each, and a seal across their foot. */
.collage {
  position: relative;
  min-height: 404px;
}

.collage-tall {
  min-height: 444px;
}

/* The back paper's caption stays clear of the front paper. */
.collage .p-a .fig-l {
  max-width: 58%;
}

.collage-tall .p-a .fig-l {
  max-width: 82%;
}

.paper {
  min-width: 0;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(11, 21, 48, 0.08);
  box-shadow: 0 1px 2px rgba(11, 21, 48, 0.05), 0 18px 40px -12px rgba(11, 21, 48, 0.18);
  padding: 24px 26px 26px;
  font-size: 14px;
  color: var(--ink-soft);
}

.collage .paper {
  position: absolute;
  width: min(300px, 60%);
}

.collage .p-a {
  left: 0;
  top: 0;
  transform: rotate(-3deg);
}

.collage .p-b {
  right: 0;
  top: 132px;
  transform: rotate(2.2deg);
  z-index: 1;
}

.collage-tall .p-b {
  top: 188px;
}

.p-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.p-head strong {
  font: 600 15px/1.3 var(--sans);
  color: var(--ink);
}

.p-head span {
  font: 400 12px/1.3 var(--sans);
  color: var(--muted);
  white-space: nowrap;
}

.p-lines {
  height: 28px;
  margin-bottom: 18px;
  background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 9px);
  background-size: 68% 100%;
  background-repeat: no-repeat;
}

.p-lines-long {
  height: 37px;
  background-size: 100% 100%;
}

.fig {
  display: inline-block;
  font: 600 30px/1.1 var(--sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  padding: 0 3px;
  background: linear-gradient(transparent 60%, var(--teal-soft) 60%);
}

.fig-sm {
  font-size: 24px;
}

.fig-word {
  font-variant-numeric: normal;
}

.fig-l {
  margin-top: 10px;
  font: 400 13px/1.5 var(--sans);
  color: var(--muted);
}

.collage .sigline {
  display: block;
  width: auto;
  max-width: 200px;
  margin-top: 8px;
  font-size: 22px;
  color: var(--ink);
}

.actions-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.actions-mini span {
  font: 500 12px/1 var(--sans);
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  background: #fff;
  white-space: nowrap;
}

.actions-mini span:first-child {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* The attestation stamp lands on the front paper's bottom corner, the way a stamp lands on a document. */
.seal {
  position: absolute;
  right: 16px;
  bottom: -15px;
  transform: rotate(-3deg);
  display: inline-block;
  padding: 9px 12px;
  border: 1.5px solid var(--teal-ink);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.94);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-ink);
  white-space: nowrap;
}


/* ---------------------------------------------------------------- Stages */

.stages {
  list-style: none;
  padding: 0;
  margin: 56px 0 0;
  grid-template-columns: repeat(5, 1fr);
  counter-reset: stage;
}

.stages li {
  counter-increment: stage;
  position: relative;
}

.stages li::before {
  content: "0" counter(stage);
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-bottom: 14px;
}

.stages h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.stages p {
  font-size: 14px;
  color: var(--muted);
}

.stages .tag {
  margin-bottom: 12px;
}

.stages li.live {
  background: var(--teal-soft);
}

/* ---------------------------------------------------------------- Boundary */

.boundary {
  margin-top: 56px;
  grid-template-columns: 1fr 1fr;
}

.boundary h3 {
  margin-bottom: 16px;
}


/* ---------------------------------------------------------------- Org chart */

.org {
  margin: 56px 0 0;
  display: grid;
  justify-items: center;
}

.org .node {
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 14px 28px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  min-width: 220px;
}

.org .node small {
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 6px;
}

.org .node-solden {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.org .node-solden small {
  color: var(--dark-muted);
}

.org .stem {
  width: 1px;
  height: 36px;
  background: var(--rule-strong);
}

.org .functions {
  list-style: none;
  padding: 36px 0 0;
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
}

.org .functions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  border-top: 1px solid var(--rule-strong);
}

.org .functions li {
  position: relative;
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.07);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.org .functions li::before {
  content: "";
  position: absolute;
  top: -36px;
  left: 50%;
  height: 36px;
  border-left: 1px solid var(--rule-strong);
}

.org .functions li:not(:first-child) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------- Team */

.team {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  grid-template-columns: repeat(4, 1fr);
}

.team strong {
  display: block;
  font-size: 16px;
}

.team .role {
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 12px;
}

.team p {
  font-size: 14px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- Dark block with the invite form */

.wrap-wide {
  max-width: calc(1200px + 2 * var(--gutter));
}

.dark-block {
  background: var(--dark);
  color: var(--dark-muted);
  border-radius: 28px;
  padding: 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.dark-block h2 {
  color: #fff;
}

.dark-block .eyebrow {
  color: var(--dark-muted);
}

.dark-block .lede {
  color: var(--dark-muted);
}

.dark-block a {
  color: #fff;
}

.dark-block :focus-visible {
  outline-color: var(--teal);
  box-shadow: 0 0 0 5px var(--navy);
}

.dark-block .check {
  margin-top: 28px;
}

.dark-block .check li {
  color: var(--dark-muted);
}

.dark-block .check li::before {
  background: none;
  color: var(--teal);
}

.dark-block .check + .lede {
  margin-top: 28px;
}

.form {
  display: grid;
  gap: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field label {
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-muted);
  margin-bottom: 10px;
}

.field input,
.field textarea {
  width: 100%;
  font: 400 15px/1.4 var(--sans);
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 8px 0 12px;
  border-radius: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #8794b6;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--teal);
  box-shadow: 0 2px 0 0 var(--teal);
}

.field textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.field-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
}

.form-status {
  font: 400 13px/1.5 var(--mono);
  color: #fff;
  padding: 10px 0;
  border-top: 1px solid var(--dark-rule);
}

.form-status[hidden] {
  display: none;
}

/* Confirmation shown in place of the form after a successful request. */
.form-done {
  color: var(--dark-muted);
}

.form-done:focus,
.form-done:focus-visible {
  outline: none;
  box-shadow: none;
}

.form-done[hidden] {
  display: none;
}

.form-done .eyebrow {
  color: var(--teal);
}

.form-done h3 {
  margin: 0 0 14px;
  font: 600 24px/1.2 var(--sans);
  letter-spacing: -0.02em;
  color: #fff;
}

.form-done p {
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.55;
}

.form-done p + p {
  margin-top: 12px;
}

.form-done a {
  color: #fff;
}

.form[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- Prose (legal pages) */

.prose {
  max-width: 62ch;
  margin-inline: auto;
}

.prose h2 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  margin: 48px 0 12px;
}

.prose h2:first-of-type {
  margin-top: 0;
}

.prose ul {
  padding-left: 1.2em;
  margin: 16px 0;
}

.prose li + li {
  margin-top: 8px;
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 56px;
  font-size: 15px;
  color: var(--muted);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
}

.footer-inner > div > p {
  max-width: 44ch;
}

.footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 20px;
}

.footer-nav a {
  text-decoration: none;
  color: var(--ink-soft);
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font: 400 12px/1.5 var(--mono);
  color: var(--muted);
}

.footer-legal a {
  color: var(--muted);
  text-decoration: none;
}

.footer-legal a:hover {
  text-decoration: underline;
}

.footer-social {
  display: inline-flex;
  gap: 8px;
  margin-left: 12px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover {
  color: var(--ink);
  border-color: var(--ink);
  text-decoration: none;
}

.footer-social svg {
  fill: currentColor;
  display: block;
}

/* ---------------------------------------------------------------- Inner pages: tiles */

/* Register: the house container. One border, one radius, hairline-divided cells, no per-cell
   chrome. Every cell draws its top and left hairline and reaches 1px past its area, so the
   container's own edge covers the first column and first row at any column count, and a later
   cell's hairline paints over the cell before it even when that cell carries a fill. */

.reg {
  display: grid;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
}

/* Every cell draws all four hairlines; a later cell's white fill covers the earlier cell's
   overlapping right and bottom line, so internal rules stay single, the container clips the outer
   ones, and an empty grid area still inherits the rules of the cells beside and above it. */
.reg > * {
  min-width: 0;
  margin: -1px;
  padding: 24px;
  border: 1px solid var(--rule);
  background: #fff;
}

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

.mini-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mini-grid-4 { grid-template-columns: repeat(4, 1fr); }

.mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini > * {
  align-self: stretch;
}

.mini .decide,
.mini .mini-tag {
  align-self: flex-start;
}

/* The owner line sits at the tile foot, so every tile in a row shares one baseline. */
.mini .decide {
  margin-top: auto;
  padding-top: 4px;
}

/* In the workstream register two decisions wrap beside their key; reserving the second line on
   every tile keeps the key itself on one line across the row. */
.ws-reg .mini .decide {
  min-height: 41px;
  align-content: start;
}

.mini h3 {
  margin: 0;
  font: 600 15px/1.3 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.mini p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.mini-k {
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}

.mini-tag {
  justify-self: start;
}

/* The control owner on each tile: a small amber key on the words "You decide" only, then the
   decision itself as quiet text, so sixteen of them read as a column, not sixteen alerts. */
.decide {
  justify-self: start;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 4px;
  font: 400 13px/1.4 var(--sans);
  color: var(--muted);
}

.decide-k {
  display: inline-block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 6px;
  border-radius: 2px;
  background: var(--amber-soft);
  color: var(--amber-ink);
  white-space: nowrap;
}

.decide-quiet {
  color: var(--muted);
}

/* Workstreams: sixteen tiles in one four-column register, each group label a full-width row. */
.ws-reg {
  margin-top: 48px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ws-label {
  grid-column: 1 / -1;
  padding: 24px 24px 18px;
  font: 520 22px/1.2 var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.ws-n {
  display: inline-block;
  margin-right: 12px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* The close pack as one sheet: a document, not a set of tiles. */
.sheet {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin-left: auto;
  padding: 48px;
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.12);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(11, 21, 48, 0.1);
  text-align: left;
}

.sheet-head {
  margin: 0 0 12px;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sheet-list li {
  padding-block: 20px;
}

.sheet-list li + li {
  border-top: 1px solid var(--rule);
}

.sheet-list h3 {
  margin: 0 0 6px;
  font: 520 22px/1.2 var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.sheet-list p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

.sheet-sig {
  margin-top: 28px;
}

.sheet-sig-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}

.sheet-sig-row .label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.sheet-sig-row .sigline {
  width: 220px;
  max-width: 60%;
}

/* ---------------------------------------------------------------- Reveal on scroll (progressive; content is visible without JS) */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* A run of adjacent reveals inside a section arrives in a short cascade. Whole sections (children of main) are not staggered. */
.js :where(:not(main)) > .reveal + .reveal { transition-delay: 0.08s; }
.js :where(:not(main)) > .reveal + .reveal + .reveal { transition-delay: 0.16s; }
.js :where(:not(main)) > .reveal + .reveal + .reveal + .reveal { transition-delay: 0.24s; }

/* Comparison register: close software, accounting firm, Solden */

.compare {
  width: 100%;
  margin-top: 44px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.compare th,
.compare td {
  padding: 18px 22px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule);
}

.compare thead th {
  border-top: 0;
  padding-top: 20px;
  padding-bottom: 14px;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare tbody th {
  width: 22%;
  font: 600 14px/1.45 var(--sans);
  color: var(--ink);
}

.compare td {
  width: 26%;
}

.compare .is-solden {
  background: var(--teal-soft);
  color: var(--ink);
  font-weight: 500;
}

.compare thead .is-solden {
  color: var(--teal-ink);
}

.compare tbody tr:last-child .is-solden {
  border-bottom-right-radius: 10px;
}

.compare td::before {
  display: none;
}

/* What leaves your week, under the comparison register */

.leaves {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.leaves-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.leaves-k {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 8px;
}

.leaves ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.leaves li {
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(11, 21, 48, 0.1);
  font: 500 13px/1.2 var(--sans);
  color: var(--ink);
}

.leaves-row:last-child li {
  background: var(--teal-soft);
  border-color: transparent;
  color: var(--teal-ink);
}

/* ================================================================ Responsive */

@media (max-width: 1024px) {
  .frame-body {
    grid-template-columns: 1fr 280px;
  }

  .frame-side {
    display: none;
  }

  .stages {
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  }

  .org .functions {
    gap: 8px;
  }

  .org .functions li {
    padding: 12px 10px;
    font-size: 13px;
  }

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

  .mini-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .feature,
  .card-grid-2,
  .dark-block {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .collage {
    min-height: 0;
    display: grid;
    gap: 14px;
    padding-top: 8px;
  }

  .collage .paper {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }

  .collage {
    padding-bottom: 18px;
  }

  .frame-body {
    grid-template-columns: 1fr;
    height: auto;
  }

  .frame[data-camera] .frame-body {
    transform: none;
  }

  .frame-panel {
    border-left: 0;
    border-top: 1px solid var(--rule);
    min-height: 372px;
  }

  .dark-block {
    gap: 40px;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .split .body-col {
    position: static;
  }

  .sheet {
    margin-left: 0;
  }

  .boundary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --section: 80px;
  }

  .site-nav,
  .header-right .btn-small {
    display: none;
  }

  .header-right {
    gap: 10px;
  }

  .nav-menu {
    display: block;
  }

  .hero {
    padding-top: 64px;
  }

  main > .hero:last-child {
    padding-bottom: 64px;
  }

  /* Home hero on phones: one column, left-aligned, the button full width and the link beneath it. */
  .hero-home {
    padding-top: 56px;
  }

  .hero-home .wrap {
    display: block;
  }

  .hero-home h1 {
    max-width: none;
    font-size: 40px;
  }

  .hero-home .lede {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.5;
  }

  .hero-home .actions {
    margin-top: 24px;
    align-items: stretch;
  }

  .hero-home .btn {
    justify-content: center;
    width: 100%;
  }

  .stage {
    margin-top: 64px;
    padding: 0 12px 0;
  }

  .frame-cap {
    flex-wrap: wrap;
    gap: 8px 24px;
  }

  .stage-strip {
    margin-top: 24px;
  }

  /* Top bar on phones: lockup and period left, bell right, nothing clipped. */
  .win-left {
    overflow: visible;
  }

  .win-sync,
  .win-crumb:not(.on),
  .win-sep {
    display: none;
  }

  .frame-main {
    overflow: hidden;
  }

  .main-actions,
  .progress-key .right,
  .runlog {
    display: none;
  }

  .wtable th:nth-child(2),
  .wtable td:nth-child(2),
  .wtable-demo th.res,
  .wtable-demo td.res {
    display: none;
  }

  .wtable td b {
    white-space: normal;
  }

  .frame-panel .pv-activity,
  .frame-panel[data-view="activity"] {
    display: none;
  }

  .frame-panel {
    display: none;
  }

  .test-cells,
  .stages,
  .org .functions,
  .team,
  .strip-cells,
  .sigstrip,
  .form-grid,
  .mini-grid,
  .mini-grid-3,
  .mini-grid-4 {
    grid-template-columns: 1fr;
  }

  .org .functions::before {
    display: none;
  }

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

  .sheet {
    max-width: none;
    padding: 28px;
  }

  .sig-cell + .sig-cell {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .actions .btn {
    justify-content: center;
    width: 100%;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    gap: 12px 24px;
  }

  /* Connections: the phone list replaces the diagram. */
  .stack-svg {
    display: none;
  }

  .stack-mobile {
    display: block;
  }

  .stack-mobile ul {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .stack-mobile li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid rgba(11, 21, 48, 0.08);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
  }

  .stack-mobile li img {
    width: 20px;
    height: 20px;
  }

  .stack-mobile li.wide {
    width: auto;
    padding: 0 14px;
  }

  .stack-mobile li.wide img {
    width: auto;
    height: 14px;
  }

  .stack-mobile .erp-m,
  .stack-mobile .sol-m {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 16px 14px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(11, 21, 48, 0.08);
    box-shadow: var(--shadow-soft);
    font: 700 16px/1.2 var(--sans);
    color: var(--ink);
    text-align: center;
  }

  .stack-mobile .k {
    font: 500 11px/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .stack-mobile .k-teal {
    color: var(--teal-ink);
  }

  .stack-mobile .erp-names {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 17px/1.2 var(--sans);
    color: var(--ink);
  }

  .stack-mobile .erp-names img {
    height: 20px;
    width: 20px;
  }

  .stack-mobile .erp-names .ns-mark {
    border-radius: 5px;
  }

  .stack-mobile .erp-names .erp-sep {
    color: var(--faint-stroke);
    font-weight: 500;
  }

  .stack-mobile .erp-more {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    font: 600 12px/1.4 var(--sans);
    color: var(--ink);
  }

  .stack-mobile .erp-more li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    white-space: nowrap;
  }

  .stack-mobile .erp-more img {
    width: 14px;
    height: 14px;
  }

  .stack-mobile .erp-more .erp-and {
    font-weight: 500;
    color: var(--muted);
  }

  .stack-mobile .link-m {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
  }

  .stack-mobile .link-m i {
    display: block;
    width: 2px;
    height: 40px;
    background: var(--teal);
    border-radius: 2px;
  }

  .stack-mobile .sol-m {
    padding: 6px 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .stack-mobile .sol-m img {
    width: 56px;
    height: 56px;
  }

  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
    width: auto;
  }

  .compare thead {
    display: none;
  }

  .compare tr {
    padding: 6px 0 10px;
  }

  .compare tr + tr {
    border-top: 1px solid var(--rule);
  }

  .compare th,
  .compare td {
    border-top: 0;
    padding: 10px 18px 0;
  }

  .compare tbody th {
    width: auto;
    padding-top: 14px;
    font-size: 15px;
  }

  .compare td:last-child {
    padding-bottom: 12px;
  }

  .compare td::before {
    display: block;
    content: attr(data-col);
    font: 500 10px/1.4 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
  }

  .compare .is-solden {
    background: none;
  }

  .compare td.is-solden {
    margin: 6px 12px 0;
    padding: 10px 12px 12px;
    border-radius: 8px;
    background: var(--teal-soft);
  }

  .compare td.is-solden::before {
    color: var(--teal-ink);
  }

}

@media (max-width: 480px) {
  .actions-mini {
    gap: 5px;
  }

  .actions-mini span {
    font-size: 11px;
    padding: 6px 8px;
  }
}

/* ================================================================ Reduced motion */

/* ---------------------------------------------------------------- Landing: the hero settles, then the window lands, then the close starts */

.js .hero-home .wrap > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .hero-home .wrap > :nth-child(2) { transition-delay: 80ms; }
.js .hero-home .wrap > :nth-child(3) { transition-delay: 160ms; }

.js .hero-home.in .wrap > * {
  opacity: 1;
  transform: none;
}

.js .frame {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
}

.js .frame.landed {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
}

/* A status that completes pops into place. */
.wtable-demo .st-done {
  animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop {
  from { transform: scale(0.85); opacity: 0.4; }
}

/* Connections: the spokes draw from the centre, the tiles follow, the write line arrives last. */
.stack-svg .tile rect {
  stroke: rgba(11, 21, 48, 0.12);
  filter: none;
}

.stack-svg .tile text {
  font: 500 13px var(--sans);
  fill: var(--ink);
}

.js .stack.reveal .line {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Each spoke fades in already dashed and already moving: its dashes travel toward Solden, data
   flowing in. The write line flows the other way, up to the ERP. Direction is the meaning. */
.js .stack.reveal.in .line {
  opacity: 1;
  animation: flow-in 1.8s linear infinite;
}

@keyframes flow-in {
  from { stroke-dashoffset: 22; }
  to { stroke-dashoffset: 0; }
}

.js .stack.reveal .tile {
  opacity: 0;
}

.js .stack.reveal.in .tile {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.js .stack.reveal .write,
.js .stack.reveal .write-arrow,
.js .stack.reveal .k-teal {
  opacity: 0;
}

.js .stack.reveal.in .write,
.js .stack.reveal.in .write-arrow,
.js .stack.reveal.in .k-teal {
  opacity: 1;
  transition: opacity 0.6s ease 1.3s;
}

.js .stack.reveal.in .lines .line:nth-child(1) { transition-delay: 0ms; animation-delay: -700ms; }
.js .stack.reveal.in .lines .line:nth-child(2) { transition-delay: 30ms; animation-delay: -1400ms; }
.js .stack.reveal.in .lines .line:nth-child(3) { transition-delay: 60ms; animation-delay: -300ms; }
.js .stack.reveal.in .lines .line:nth-child(4) { transition-delay: 90ms; animation-delay: -1000ms; }
.js .stack.reveal.in .lines .line:nth-child(5) { transition-delay: 120ms; animation-delay: -1700ms; }
.js .stack.reveal.in .lines .line:nth-child(6) { transition-delay: 150ms; animation-delay: -600ms; }
.js .stack.reveal.in .lines .line:nth-child(7) { transition-delay: 180ms; animation-delay: -1300ms; }
.js .stack.reveal.in .lines .line:nth-child(8) { transition-delay: 210ms; animation-delay: -200ms; }
.js .stack.reveal.in .lines .line:nth-child(9) { transition-delay: 240ms; animation-delay: -900ms; }
.js .stack.reveal.in .lines .line:nth-child(10) { transition-delay: 270ms; animation-delay: -1600ms; }
.js .stack.reveal.in .lines .line:nth-child(11) { transition-delay: 300ms; animation-delay: -500ms; }
.js .stack.reveal.in .lines .line:nth-child(12) { transition-delay: 330ms; animation-delay: -1200ms; }
.js .stack.reveal.in .lines .line:nth-child(13) { transition-delay: 360ms; animation-delay: -100ms; }
.js .stack.reveal.in .lines .line:nth-child(14) { transition-delay: 390ms; animation-delay: -800ms; }
.js .stack.reveal.in .lines .line:nth-child(15) { transition-delay: 420ms; animation-delay: -1500ms; }
.js .stack.reveal.in .lines .line:nth-child(16) { transition-delay: 450ms; animation-delay: -400ms; }
.js .stack.reveal.in .lines .line:nth-child(17) { transition-delay: 480ms; animation-delay: -1100ms; }
.js .stack.reveal.in .lines .line:nth-child(18) { transition-delay: 510ms; animation-delay: -0ms; }
.js .stack.reveal.in .lines .line:nth-child(19) { transition-delay: 540ms; animation-delay: -700ms; }
.js .stack.reveal.in .lines .line:nth-child(20) { transition-delay: 570ms; animation-delay: -1400ms; }
.js .stack.reveal.in .lines .line:nth-child(21) { transition-delay: 600ms; animation-delay: -300ms; }
.js .stack.reveal.in .lines .line:nth-child(22) { transition-delay: 630ms; animation-delay: -1000ms; }
.js .stack.reveal.in .lines .line:nth-child(23) { transition-delay: 660ms; animation-delay: -1700ms; }
.js .stack.reveal.in .tiles .tile:nth-child(1) { transition-delay: 60ms; }
.js .stack.reveal.in .tiles .tile:nth-child(2) { transition-delay: 90ms; }
.js .stack.reveal.in .tiles .tile:nth-child(3) { transition-delay: 120ms; }
.js .stack.reveal.in .tiles .tile:nth-child(4) { transition-delay: 150ms; }
.js .stack.reveal.in .tiles .tile:nth-child(5) { transition-delay: 180ms; }
.js .stack.reveal.in .tiles .tile:nth-child(6) { transition-delay: 210ms; }
.js .stack.reveal.in .tiles .tile:nth-child(7) { transition-delay: 240ms; }
.js .stack.reveal.in .tiles .tile:nth-child(8) { transition-delay: 270ms; }
.js .stack.reveal.in .tiles .tile:nth-child(9) { transition-delay: 300ms; }
.js .stack.reveal.in .tiles .tile:nth-child(10) { transition-delay: 330ms; }
.js .stack.reveal.in .tiles .tile:nth-child(11) { transition-delay: 360ms; }
.js .stack.reveal.in .tiles .tile:nth-child(12) { transition-delay: 390ms; }
.js .stack.reveal.in .tiles .tile:nth-child(13) { transition-delay: 420ms; }
.js .stack.reveal.in .tiles .tile:nth-child(14) { transition-delay: 450ms; }
.js .stack.reveal.in .tiles .tile:nth-child(15) { transition-delay: 480ms; }
.js .stack.reveal.in .tiles .tile:nth-child(16) { transition-delay: 510ms; }
.js .stack.reveal.in .tiles .tile:nth-child(17) { transition-delay: 540ms; }
.js .stack.reveal.in .tiles .tile:nth-child(18) { transition-delay: 570ms; }
.js .stack.reveal.in .tiles .tile:nth-child(19) { transition-delay: 600ms; }
.js .stack.reveal.in .tiles .tile:nth-child(20) { transition-delay: 630ms; }
.js .stack.reveal.in .tiles .tile:nth-child(21) { transition-delay: 660ms; }
.js .stack.reveal.in .tiles .tile:nth-child(22) { transition-delay: 690ms; }
.js .stack.reveal.in .tiles .tile:nth-child(23) { transition-delay: 720ms; }

#connects.section {
  padding-bottom: 24px;
}

.stack {
  margin-top: 40px;
}

#connects .cycle-tail {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font: 500 20px/1.4 var(--sans);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-home .wrap > *,
  .js .frame,
  .js .stack.reveal .tile,
  .js .stack.reveal .write,
  .js .stack.reveal .write-arrow,
  .js .stack.reveal .k-teal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .stack.reveal .line {
    opacity: 1;
    transition: none;
    animation: none;
  }

  .wtable-demo .st-done {
    animation: none;
  }

  .frame[data-camera="panel"] .frame-main {
    opacity: 1;
    filter: none;
  }

  html {
    scroll-behavior: auto;
  }

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

  .btn,
  .frame,
  .frame-body,
  .frame-side,
  .progress-bar i,
  .wtable td,
  .st,
  .pbtn.pressed,
  .head-badge,
  .wtable-demo .res,
  .runlog {
    transition: none;
  }

  .frame.resetting .frame-body {
    opacity: 1;
    transition: none;
  }

  .st-running::after,
  .spin,
  .runlog-lines li.new,
  .activity li.new,
  .frame-panel .pv,
  .wtable tr[data-owner="solden"] .who-s,
  .stack-svg .line,
  .stack-svg .write {
    animation: none;
  }

  .who,
  .wtable tr.handoff td {
    transition: none;
  }

  .demo-pause {
    display: none;
  }
}