/* Acts 5 (build) and 6 (close, the collapse). Owner: builder D.
   Movement is transform, opacity and clip-path only. The collapse reads
   --close (0 to 1) and --split from split.js; nothing animates width. */

.mono { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; }

/* Era kit, local fallbacks (H defines .ln--ink / .ln--future / .era-label in
   base.css; these carry the same spec so acts 5 and 6 read the same without
   it). Past: heavier aged ink, square caps. Future: a 0.9px accent hairline. */
.bd-ink {
  stroke-width: 1.75px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  color: color-mix(in oklab, var(--sc-ink) 72%, var(--sc-ink-soft));
}
.bd-future { stroke-width: 0.9px; stroke-linecap: round; color: var(--sc-accent); }
:where(.era-label) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
:where(.era-label)::before { content: ""; width: 1.25rem; height: 1px; background: var(--sc-accent); }

/* =============================================================== BUILD == */
/* --bf: how far the past has faded (0 present, 1 gone), from the act's own
   scroll progress. The ledger frame and stipple dissolve across the act. */
#act-build {
  --pad: clamp(1.5rem, 4vw, 5rem);
  --bf: clamp(0, (var(--sc-p, 0) - 0.42) / 0.33, 1);
}

.build__card, .build__vp {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
}
.build__card { isolation: isolate; }

/* ---- The fading past: engraved ledger frame + stipple ----------------- */
/* The wrap is the stagger child (the engine animates it); the frame inside
   keeps its own scroll-driven fade. */
.build__frame-wrap { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.build__frame {
  position: absolute;
  inset: -1.5rem -1.75rem -1.5rem -1.75rem;
  pointer-events: none;
  border: 1px solid var(--sc-hairline-strong);
  opacity: calc(1 - var(--bf));
  transform: translate3d(0, calc(var(--bf) * -6px), 0);
}
.build__frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--sc-hairline);
}
.build__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.22; }
.bd-grain-dot { fill: var(--sc-ink); }
.build__rule { position: absolute; overflow: visible; }
.build__rule--top { top: 0.95rem; left: 1.5rem; width: calc(100% - 3rem); height: 8px; opacity: 0.55; }
.build__rule--left { top: 1.5rem; left: 0.9rem; width: 8px; height: calc(100% - 3rem); opacity: 0.55; }
.build__corner { position: absolute; width: 1.5rem; height: 1.5rem; }
.build__corner--tl { top: -1px; left: -1px; }
.build__corner--tr { top: -1px; right: -1px; transform: rotate(90deg); }
.build__corner--br { bottom: -1px; right: -1px; transform: rotate(180deg); }
.build__corner--bl { bottom: -1px; left: -1px; transform: rotate(270deg); }
.build__corner .bd-ink { stroke-width: 1.25px; }
.build__title { font-size: var(--sc-t-2xl); }
.build__card > .build__title { max-width: 13ch; }
.build__intro { margin-top: var(--sc-4); }
.build__aud { margin-top: var(--sc-5); max-width: 40ch; }

@media (min-width: 760px) {
  /* The divider leans to 47% here: keep card copy clear of it. */
  /* The divider is a curved trail (up to about 2.5vw either way of --split):
     keep both columns at least 6vw clear of the split position. */
  #act-build .build__side--card { padding-right: calc(var(--pad) + 5vw); }
  #act-build .build__side--vp { padding-left: max(calc(var(--pad) * 0.9), 3.5vw); }
  .build__card { position: sticky; top: clamp(4rem, 12vh, 7rem); }
}

/* ---- FAQ: a ruled ledger with drawn chevrons --------------------------- */
.faq {
  margin-top: var(--sc-7);
  border-top: 1px solid var(--sc-hairline-strong);
  /* The top ledger rule lightens with the frame. */
  border-top-color: color-mix(in oklab, var(--sc-ink) calc(26% - var(--bf) * 10%), transparent);
}
.faq__item { border-bottom: 1px solid var(--sc-hairline); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-4);
  min-height: 3.4rem;
  padding: var(--sc-3) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  font-weight: 540;
  line-height: 1.35;
  letter-spacing: -0.004em;
  color: var(--sc-ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__chev {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3rem;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 50%;
  color: var(--sc-ink-soft);
  transition: transform var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.faq__chev .ln { stroke-width: 1.5px; }
.faq__item[open] > .faq__q .faq__chev { transform: rotate(180deg); color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover .faq__chev { color: var(--sc-ink); }
}
.faq__a { padding: 0 2.75rem var(--sc-5) 0; font-size: var(--sc-t-sm); }
.build__support { margin: var(--sc-6) 0 0; }

/* ---- Steps: one dimension line, three ticks ---------------------------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: var(--sc-4);
  margin: var(--sc-7) 0 0;
  padding: var(--sc-5) 0 0;
  list-style: none;
}
.steps::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--sc-hairline-strong);
}
.steps__item {
  position: relative;
  font-size: var(--sc-t-sm);
  font-weight: 540;
  line-height: 1.35;
  color: var(--sc-ink);
}
.steps__item::before {
  content: "";
  position: absolute;
  top: calc(var(--sc-5) * -1 - 4px);
  left: 0;
  width: 1px;
  height: 9px;
  background: var(--sc-ink-soft);
}
.steps__item:last-child::before { width: 2px; background: var(--sc-accent); }
.steps__word {
  display: block;
  margin-bottom: var(--sc-1);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---- The desk: tabs over a drawing sheet with registration marks ------- */
.desk { position: relative; margin-top: var(--sc-7); }
#act-build .build__side--vp { overflow-x: clip; }

/* Tomorrow's toolkit: an orbit ring behind the sheet's upper right corner,
   a hex coin riding it with the drift (--dd), ticks at the quarters. */
.desk__orbit {
  position: absolute;
  z-index: 0;
  top: -0.75rem;
  right: -4rem;
  width: clamp(13rem, 22vw, 17rem);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  pointer-events: none;
  opacity: calc(0.35 + 0.65 * var(--da));
  transform: translate3d(0, calc(var(--dd) * -10px), 0) rotate(calc(-8deg + var(--dd) * 12deg));
}
.desk__orbit-ring { opacity: 0.8; }
.desk__orbit-ring--in { opacity: 0.45; stroke-dasharray: 3 7; }
.desk__orbit-ticks { opacity: 0.7; }
.desk__sat {
  transform-origin: 160px 160px;
  transform: rotate(calc(-40deg + var(--da) * 40deg + var(--dd) * 50deg));
}
.desk__tabs, .desk__sheet, .desk__note { position: relative; z-index: 1; }
.desk__tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 8px;
  background: var(--sc-surface);
}
.desk__tab {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sc-ink-soft);
  font: 560 var(--sc-t-sm) / 1 var(--sc-font-text);
  cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.desk__tab.is-active { background: var(--sc-ink); color: var(--sc-canvas); }
.desk__tab:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .desk__tab:not(.is-active):hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
}

.desk__sheet {
  position: relative;
  margin-top: var(--sc-4);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 8px;
  background: var(--sc-surface);
  box-shadow: var(--sc-e1);
}
.desk__sheet::before, .desk__sheet::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--sc-ink-soft);
  border-style: solid;
  pointer-events: none;
}
.desk__sheet::before { top: -7px; left: -7px; border-width: 1px 0 0 1px; }
.desk__sheet::after { right: -7px; bottom: -7px; border-width: 0 1px 1px 0; }
.desk__panel {
  min-height: 16.5rem;
  padding: var(--sc-5);
  border-radius: 8px;
}
/* Both panels share one cell, so switching tabs never changes the sheet's
   height; the inactive one is hidden from view, focus and the a11y tree. */
.desk__sheet { display: grid; }
.desk__panel { grid-area: 1 / 1; }
.desk__panel[hidden] { display: block; visibility: hidden; }
.desk__note {
  margin: var(--sc-4) 0 0;
  max-width: 54ch;
  font-size: var(--sc-t-xs);
  line-height: 1.55;
  color: var(--sc-ink-soft);
}

/* ---- Payment link: a sample merchant collects from its customer --------
   Three planes on the sheet: the drawing grid (back), the merchant's
   dashboard creating the link (middle), the customer's checkout (front).
   --da (0 to 1) assembles them as the desk enters; --dd (-0.5 to 0.5) is a
   small per-plane drift. Both are set by close.js; reduced motion pins them. */
.desk { --da: 1; --dd: 0; }
.desk__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  pointer-events: none;
  opacity: calc(0.25 + 0.4 * var(--da));
  transform: translate3d(0, calc(var(--dd) * 16px), 0);
}
.desk__grid-lines { opacity: 0.13; }
.desk__grid-dim { opacity: 0.45; }
.desk__panel { position: relative; }

.lk > * { min-width: 0; }
.lk {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
}
.lk__dash {
  grid-column: 1 / 8;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-3);
  padding: var(--sc-4);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 8px;
  background: var(--sc-canvas);
  opacity: calc(0.3 + 0.7 * var(--da));
  transform: translate3d(calc((1 - var(--da)) * -12px), calc((1 - var(--da)) * 20px + var(--dd) * -14px), 0);
}
.lk__dash-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--sc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.lk__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vp-mark); }
.lk__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 11rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 6px;
  background: var(--sc-surface);
}
.lk__field-k { font-size: 0.68rem; color: var(--sc-ink-soft); }
.lk__field-v { font-size: var(--sc-t-sm); font-weight: 560; }
.lk__field-v b { margin-left: 0.4rem; font-weight: 500; color: var(--sc-ink-soft); }
.lk__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sc-2); }
.lk__chip, .lk__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.9rem;
  padding: 0 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 540;
  white-space: nowrap;
}
.lk__chip { border: 1px dashed var(--sc-hairline-strong); background: var(--sc-surface); }
.lk__chip svg { width: 0.9rem; height: 0.9rem; color: var(--sc-accent); }
.lk__copy { background: var(--sc-ink); color: var(--sc-canvas); }

/* The leader: from the dashboard's link down into the customer's checkout. */
.lk__lead {
  grid-column: 1 / 5;
  grid-row: 2;
  width: 100%;
  height: 100%;
  padding-left: var(--sc-4);
  overflow: visible;
}
/* Lines draw in by clip (dash offsets do not survive non-scaling strokes
   in a stretched viewBox). */
.lk__lead { clip-path: inset(0 0 calc((1 - clamp(0, (var(--da) - 0.35) * 2.2, 1)) * 100%) 0); }
/* Light trail under each leader: the same path, wider and faint, so the
   thin future hairline reads as a line of light without any glow. */
.lk__trail { stroke-width: 3.5px; opacity: 0.14; }

.lk__pay {
  position: relative;
  z-index: 1;
  grid-column: 5 / 13;
  grid-row: 2;
  margin-top: -2.6rem;
  padding: var(--sc-5);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 10px;
  background: var(--sc-surface);
  box-shadow: var(--sc-e2);
  transform: translate3d(0, calc((1 - var(--da)) * 28px + var(--dd) * 10px), 0);
}
.lk__merchant { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.lk__logo { width: 1.6rem; height: 1.6rem; flex: none; }
.lk__logo-bg { fill: var(--sc-ink); }
.lk__logo-n { fill: var(--sc-surface); }
.lk__name { font-weight: 620; font-size: var(--sc-t-sm); letter-spacing: -0.006em; }
.lk__sample { margin-left: auto; font-size: 0.66rem; }
.lk__to { margin: var(--sc-5) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.link-panel__amount {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: var(--sc-1) 0 0;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  font-weight: 620;
  font-stretch: 104%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.link-panel__amount span {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sc-ink-soft);
}
.lk__methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-2);
  margin: var(--sc-5) 0 0;
  padding: 0;
  list-style: none;
}
.lk__method {
  --k: clamp(0, (var(--da) - 0.2) * 3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.25rem;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 6px;
  font-size: var(--sc-t-xs);
  font-weight: 560;
  opacity: calc(0.4 + 0.6 * var(--k));
  transform: translate3d(0, calc((1 - var(--k)) * 6px), 0);
}
.lk__method:nth-child(2) { --k: clamp(0, (var(--da) - 0.28) * 3, 1); }
.lk__method:nth-child(3) { --k: clamp(0, (var(--da) - 0.36) * 3, 1); }
.lk__method svg { width: 1rem; height: 1rem; color: var(--sc-ink-soft); }
.lk__route { display: block; width: 100%; height: 1.75rem; overflow: visible; }
.lk__route-base { opacity: 0.45; }
.lk__route { clip-path: inset(0 0 calc((1 - clamp(0, (var(--da) - 0.45) * 2.2, 1)) * 100%) 0); }
.lk__route-base { display: none; }
.lk__settle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--sc-t-sm);
  font-weight: 540;
}
.lk__settle svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--sc-accent); }
.lk__settle b { font-weight: 600; }
.lk__powered {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: var(--sc-5) 0 0;
  padding-top: var(--sc-3);
  border-top: 1px solid var(--sc-hairline);
  font-size: 0.68rem;
  color: var(--sc-ink-soft);
}
.lk__powered svg { width: 0.8rem; height: 0.8rem; fill: var(--vp-mark); }

.api-panel { position: relative; z-index: 1; background: var(--sc-surface); }
.api-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-3);
  font-size: var(--sc-t-sm);
}
.api-panel__bar b { color: var(--sc-accent); font-weight: 600; }
.api-panel__copy { min-height: 2.25rem; padding: 0 0.85rem; font-size: var(--sc-t-xs); }
.api-panel__code {
  margin: var(--sc-4) 0 0;
  padding: var(--sc-4);
  overflow-x: auto;
  border-radius: 6px;
  background: var(--sc-canvas);
  font-family: var(--sc-font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--sc-ink);
  tab-size: 2;
}
.api-panel__code code { font: inherit; }
.tok-k { color: var(--sc-ink); }
.tok-v { color: var(--sc-accent); }
.api-panel__event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-2) var(--sc-3);
  margin: var(--sc-4) 0 0;
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}
.api-panel__event code {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: 4px;
  font-family: var(--sc-font-mono);
  color: var(--sc-ink);
}
.api-panel__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: var(--sc-3) 0 0;
  font-size: var(--sc-t-xs);
  font-weight: 540;
  color: var(--sc-ink);
}
.api-panel__note svg { width: 0.95rem; height: 0.95rem; color: var(--sc-ink-soft); }
.api-panel__opt { font-weight: 400; color: var(--sc-ink-soft); }

.build__docs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-3) var(--sc-5);
  margin-top: var(--sc-7);
  font-size: var(--sc-t-sm);
}

@media (max-width: 759.98px) {
  .steps { grid-template-columns: 1fr; gap: var(--sc-4); padding: 0 0 0 var(--sc-5); }
  .steps::before { top: 0.35rem; bottom: 0.35rem; left: 0; right: auto; width: 1px; height: auto; }
  .steps__item::before { top: 0.45rem; left: calc(var(--sc-5) * -1 - 4px); width: 9px; height: 1px; }
  .steps__item:last-child::before { width: 9px; height: 2px; }
  .desk__panel { padding: var(--sc-4); }
  .lk__dash { grid-column: 1 / 12; }
  .lk__lead { grid-column: 1 / 2; padding-left: var(--sc-3); }
  .lk__pay { grid-column: 2 / 13; margin-top: -0.6rem; padding: var(--sc-4); }
  .lk__methods { gap: var(--sc-1); }
  .lk__method { gap: 0.3rem; font-size: 0.75rem; }
  .lk__method svg { width: 0.85rem; height: 0.85rem; }
  .lk__sample { margin-left: 0; }
  .faq__a { padding-right: 0; }
}

/* =============================================================== CLOSE == */
/* Two pre-laid columns on one stage. The VanPay headline rides the divider
   left by transform and grows by scale into the full-width composition; the
   request block stays anchored where it began. The card line leaves left. */
/* --c: the collapse (split.js, 0 to 1 over close p 0.15 to 0.7).
   --l: the landing, from the act's own progress once the collapse is done
   (p 0.7 to 0.9): the headline's small overshoot settles, the orbit rings
   expand once and the era marker arrives. Both hold at 1 for the rest. */
#act-close {
  --pad: clamp(1.5rem, 4vw, 5rem);
  --tf: clamp(2.6rem, 6.4vw, 7rem);
  --c: var(--close, 0);
  --l: clamp(0, (var(--sc-p, 0) - 0.7) / 0.2, 1);
}
#act-close.is-settled { --c: 1; --l: 1; }
#act-close.is-settled [data-sc-cue] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }

#act-close .close {
  display: grid;
  grid-template-columns: 47vw 3vw 50vw;
  grid-template-rows: minmax(0, 1fr) auto;
}

/* History dissolves: an ink wash rises over the column, then the column is
   washed away from the right by an irregular clip edge. Each edge point
   starts at the right edge, bulges by its own amount mid-wipe and lands
   past the left edge, so the wash never reads as a straight wipe. */
.close__card {
  --e: calc(var(--c) * (1 - var(--c)) * 4);   /* 0 at both ends, 1 mid-wipe */
  --x: calc(100% - var(--c) * 124%);          /* the mean edge position */
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad);
  transform: translate3d(calc(var(--c) * -4vw), 0, 0);
  clip-path: polygon(
    -20% -5%,
    calc(var(--x) + var(--e) * 2%) -5%,
    calc(var(--x) - var(--e) * 4%) -0.2%,
    calc(var(--x) + var(--e) * 3.5%) 4.6%,
    calc(var(--x) - var(--e) * 1.5%) 9.3%,
    calc(var(--x) + var(--e) * 5%) 14.6%,
    calc(var(--x) - var(--e) * 3%) 18.9%,
    calc(var(--x) + var(--e) * 1.5%) 23.7%,
    calc(var(--x) - var(--e) * 5.5%) 28.5%,
    calc(var(--x) + var(--e) * 2.5%) 33.3%,
    calc(var(--x) - var(--e) * 2%) 38%,
    calc(var(--x) + var(--e) * 4.5%) 42.8%,
    calc(var(--x) - var(--e) * 3.5%) 47.6%,
    calc(var(--x) + var(--e) * 1.5%) 52.4%,
    calc(var(--x) - var(--e) * 4%) 57.2%,
    calc(var(--x) + var(--e) * 3%) 62%,
    calc(var(--x) - var(--e) * 1.5%) 66.7%,
    calc(var(--x) + var(--e) * 5.5%) 71.5%,
    calc(var(--x) - var(--e) * 2.5%) 76.3%,
    calc(var(--x) + var(--e) * 2%) 81.6%,
    calc(var(--x) - var(--e) * 4.5%) 85.9%,
    calc(var(--x) + var(--e) * 3.5%) 90.7%,
    calc(var(--x) - var(--e) * 1.5%) 95.4%,
    calc(var(--x) + var(--e) * 4%) 100.2%,
    calc(var(--x) - var(--e) * 3%) 105%,
    -20% 105%
  );
}
.close__wash {
  position: absolute;
  inset: 0 0 0 -30vw;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      -38deg,
      color-mix(in oklab, var(--sc-ink) 10%, transparent) 0 1px,
      transparent 1px 7px
    ),
    color-mix(in oklab, var(--sc-ink) 7%, transparent);
  opacity: clamp(0, var(--c) * 2.6, 1);
  transform: translate3d(calc((1 - var(--c)) * 8vw), 0, 0);
}
.close__tag { display: none; }
.close__line {
  position: relative;
  max-width: 17ch;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl);
  font-weight: 560;
  font-stretch: 104%;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--sc-ink-soft);
  opacity: calc(1 - var(--c) * 1.8);
  transform: translate3d(calc(var(--c) * -2vw), 0, 0);
}

/* Settled rhythm (desktop): headline, then a tight body + CTA group, then a
   clearly larger break before the footer. The block is centred in the room
   between the divider cap and the footer, a little more air on top. */
.close__vp {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(4rem, 11svh, 6.5rem) var(--pad) clamp(1.5rem, 4svh, 2.5rem);
}
/* The collapse brings the headline to a hair over size; the landing settles
   it (1.02 to 1) so the arrival has a touchdown rather than a stop. */
.close__head {
  transform-origin: 0 0;
  transform:
    translate3d(calc(var(--c) * -50vw), 0, 0)
    scale(calc(0.6 + 0.42 * var(--c) - 0.02 * var(--l)));
}
.close__era {
  display: inline-flex;
  margin-bottom: var(--sc-4);
  opacity: var(--l);
  transform: translate3d(calc((1 - var(--l)) * -8px), 0, 0);
}
.close__title {
  width: max-content;
  font-size: var(--tf);
  font-weight: 640;
  font-stretch: 104%;
  line-height: 0.98;
  letter-spacing: -0.038em;
}
/* The request block rides with the headline (a wrapper, because the engine
   writes the cue's own transform inline). While the headline is still at
   0.6 scale it lifts by the headline's unused height, so the pair never
   shows a gap mid-collapse. */
.close__act {
  margin-top: clamp(1.75rem, 5svh, 3rem);
  max-width: 44rem;
  transform-origin: 0 0;
  transform:
    translate3d(calc(var(--c) * -50vw), calc((1 - var(--c)) * var(--tf) * -0.784), 0)
    scale(calc(1.02 - 0.02 * var(--l)));
  /* Landing is movement only: a dimmed primary button briefly fails contrast. */
}
.close__body { max-width: 40ch; }
/* The primary action, then one quiet line of secondary links under it. */
.close__cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-4) var(--sc-6);
  margin-top: var(--sc-6);
}
.close__primary { position: relative; z-index: 1; min-height: 3.25rem; padding: 0 1.6rem; font-size: var(--sc-t-base); }

/* Arrival mark: three thin orbit ellipses centred on the primary action,
   each expanding once from the button as --l rises and thinning out; the
   outer one rests faint, so the settled page keeps the mark. */
.close__orbit {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 26rem;
  height: 7.8rem;
  overflow: visible;
  pointer-events: none;
  /* Centre the drawing on the button: its centre sits at half the button's width. */
  transform: translate3d(calc(var(--bw, 11rem) / 2 - 13rem), -50%, 0);
}
.close__orbit-ring {
  --k: 0;
  transform-origin: 200px 60px;
  transform: scale(calc(0.7 + 0.3 * var(--k)));
  opacity: calc((1 - var(--k)) * 0.75 * clamp(0, var(--l) * 5, 1));
}
.close__orbit-ring--1 { --k: clamp(0, var(--l) / 0.75, 1); }
.close__orbit-ring--2 { --k: clamp(0, (var(--l) - 0.12) / 0.78, 1); }
.close__orbit-ring--3 {
  --k: clamp(0, (var(--l) - 0.24) / 0.76, 1);
  opacity: calc((1 - var(--k) * 0.72) * 0.75 * clamp(0, var(--l) * 5, 1));
}
.close__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 0 100%;
  gap: var(--sc-2) var(--sc-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sc-t-sm);
}
.close__mail { font-size: 0.92em; color: var(--sc-ink-soft); }

/* Footer: inside the stage, revealed exactly behind the travelling divider. */
.close__foot {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  padding: var(--sc-5) var(--pad) var(--sc-5);
  border-top: 1px solid var(--sc-hairline);
  /* The boundary is a curve that flattens as it travels: clip a little past
     it while it still swings, nothing once it reaches the edge. */
  clip-path: inset(0 0 0 calc(var(--split, 0) * 106vw));
}
.close__foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-3) var(--sc-7);
}
.close__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sc-ink);
  font-family: var(--sc-font-display);
  font-size: 1.05rem;
  font-weight: 640;
  font-stretch: 108%;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.close__brand svg { width: 1.6rem; height: 1.6rem; fill: var(--vp-mark); }
.close__nav { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-sm); }
.close__nav a {
  display: inline-flex;
  align-items: center;
  color: var(--sc-ink-soft);
  text-decoration: none;
  text-underline-offset: 0.22em;
}
.close__nav a:hover { color: var(--sc-ink); text-decoration: underline; }
.close__copy { margin-left: auto; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.close__disclosure {
  max-width: 70ch;
  text-wrap: pretty;
  margin: var(--sc-3) 0 0;
  font-size: var(--sc-t-xs);
  line-height: 1.55;
  color: var(--sc-ink-soft);
}

/* ---- Mobile: the collapse is vertical ---------------------------------- */
@media (max-width: 759.98px) {
  #act-close { --band: 30svh; }
  #act-close .close {
    grid-template-columns: minmax(0, 1fr);
    background: var(--vp-canvas);
  }
  .close__card {
    position: absolute;
    z-index: 2;
    top: 0; left: 0; right: 0;
    height: var(--band);
    justify-content: flex-end;
    gap: var(--sc-3);
    padding: 0 var(--pad) var(--sc-5);
    background: var(--card-canvas);
    border-bottom: 1px solid var(--vp-mark);
    opacity: 1;
    transform: none;
    /* The band is washed away upward; the same irregular edge, turned. */
    --y: calc(100% - var(--c) * 118%);
    clip-path: polygon(
      -5% -20%,
      105% -20%,
      105% calc(var(--y) + var(--e) * 2%),
      100.2% calc(var(--y) - var(--e) * 4%),
      95.4% calc(var(--y) + var(--e) * 3.5%),
      90.7% calc(var(--y) - var(--e) * 1.5%),
      85.9% calc(var(--y) + var(--e) * 5%),
      80.9% calc(var(--y) - var(--e) * 3%),
      76.3% calc(var(--y) + var(--e) * 1.5%),
      71.5% calc(var(--y) - var(--e) * 5.5%),
      66.7% calc(var(--y) + var(--e) * 2.5%),
      62% calc(var(--y) - var(--e) * 2%),
      57.2% calc(var(--y) + var(--e) * 4.5%),
      52.4% calc(var(--y) - var(--e) * 3.5%),
      47.6% calc(var(--y) + var(--e) * 1.5%),
      42.8% calc(var(--y) - var(--e) * 4%),
      38% calc(var(--y) + var(--e) * 3%),
      33.3% calc(var(--y) - var(--e) * 1.5%),
      28.5% calc(var(--y) + var(--e) * 5.5%),
      23.7% calc(var(--y) - var(--e) * 2.5%),
      18.9% calc(var(--y) + var(--e) * 2%),
      14.2% calc(var(--y) - var(--e) * 4.5%),
      9.3% calc(var(--y) + var(--e) * 3.5%),
      4.6% calc(var(--y) - var(--e) * 1.5%),
      -0.2% calc(var(--y) + var(--e) * 4%),
      -5% calc(var(--y) - var(--e) * 3%)
    );
  }
  .close__wash { transform: translate3d(0, calc((1 - var(--c)) * 6vh), 0); }
  .close__tag { display: block; }
  .close__line { opacity: calc(1 - var(--c) * 2.2); font-size: var(--sc-t-lg); transform: none; }
  .close__vp, .close__foot {
    grid-column: 1;
    transform: translate3d(0, calc((1 - var(--c)) * var(--band)), 0);
  }
  .close__vp {
    justify-content: center;
    gap: var(--sc-5);
    padding: var(--sc-7) var(--pad) var(--sc-8);
  }
  .close__head { transform: scale(calc(1.02 - 0.02 * var(--l))); }
  .close__era { margin-bottom: var(--sc-3); }
  .close__title { width: auto; font-size: clamp(2.1rem, 9.6vw, 3rem); }
  .close__act { margin-top: 0; transform: scale(calc(1.02 - 0.02 * var(--l))); }
  .close__orbit { width: 20rem; height: 6rem; transform: translate3d(calc(var(--bw, 11rem) / 2 - 10rem), -50%, 0); }
  .close__cta { gap: var(--sc-1) var(--sc-5); margin-top: var(--sc-4); }
  .close__links { gap: 0 var(--sc-5); }
  .close__foot { clip-path: none; padding-block: var(--sc-3) var(--sc-4); }
  .close__nav .close__nav-dup { display: none; }
  .close__foot-row { gap: 0 var(--sc-5); }
  .close__disclosure { margin-top: var(--sc-1); font-size: 0.72rem; line-height: 1.45; }
}
@media (max-width: 759.98px) and (max-height: 700px) {
  .close__vp { gap: var(--sc-4); padding-block: var(--sc-5) var(--sc-6); }
  .close__cta { margin-top: var(--sc-4); }
  .close__title { font-size: 2rem; }
  .close__body { font-size: var(--sc-t-base); }
  .close__primary { min-height: 2.9rem; }
}

/* ---- Reduced motion: the collapsed final state, always, no motion ------- */
@media (prefers-reduced-motion: reduce) {
  #act-close { --c: 1; --l: 1; }
  #act-close .close { background: var(--vp-canvas); }
  #act-close [data-sc-cue] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .close__foot { clip-path: none; }
  .close__card { visibility: hidden; }
  .faq__chev, .desk__tab { transition: none; }
  .desk { --da: 1 !important; --dd: 0 !important; }
  /* The past sits half dissolved, still; the arrival is already there. */
  #act-build { --bf: 0.5; }
  .build__frame { transform: none; }
}