/* Acts 5 (build) and 6 (close, the arrival in daylight). Owner: builder D.
   Glass trail look: depth from light, blur and shadow, never outlines.
   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; }

/* ---- Shared vocabulary, local fallbacks (H owns the real ones in base.css;
   these carry the contract's values at zero specificity so H's win). ----- */
:where(.display--super) { font-size: var(--t-super); font-weight: 600; letter-spacing: -0.012em; line-height: 1.05; font-variation-settings: "opsz" 32; }
:where(.display--head)  { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.003em; line-height: 1.1; }
:where(.display--hero)  { font-size: var(--t-hero); font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; font-variation-settings: "opsz" 32; }
:where(.sub) { margin: 0; max-width: 40rem; font-size: var(--t-sub); font-weight: 500; letter-spacing: 0.009em; line-height: 1.33; color: var(--sc-ink-soft); text-wrap: pretty; }
:where(.caption) { font-size: var(--t-caption); font-weight: 400; line-height: 1.4; color: var(--sc-ink-soft); }
:where(.label) { font-family: var(--sc-font-text); font-size: var(--t-caption); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* The build act's own type (set on the act's classes, so the look holds with
   either base.css). */
.build__title {
  margin: 0;
  max-width: 51.25rem;
  font-family: var(--sc-font-display);
  font-size: var(--t-head);
  font-weight: 600;
  font-stretch: 100%;
  font-optical-sizing: auto;
  letter-spacing: -0.003em;
  line-height: 1.1;
  color: var(--sc-ink);
  text-wrap: balance;
}
.build__title--super {
  font-size: var(--t-super);
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.012em;
  line-height: 1.05;
}
.build__sub {
  margin: 1.5rem 0 0;
  max-width: 40rem;
  font-size: var(--t-sub);
  font-weight: 500;
  letter-spacing: 0.009em;
  line-height: 1.33;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}

/* The act's action row, right under the subtext: the primary pill and a
   quiet docs pill (both H's .btn, 48px). The deeper docs links stay below
   the desk without repeating "Read the docs". */
.build__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 2rem 0 0;
}
.build__cta-primary { padding-inline: 1.5rem; }

/* Reveal: the engine's flow reveal (base.css carries the contract's text
   motion); the children stagger 120ms so the subtext lands +120ms. */
/* =============================================================== BUILD == */
#act-build { --pad: clamp(1.5rem, 4vw, 5rem); }

.build__card, .build__vp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 42rem;
}

@media (min-width: 900px) {
  /* The divider leans to 47% here and the trail swings about 2.5vw either
     way of it: keep both columns clear of the split. */
  #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); }
}
/* Tablet landscape keeps the split under the fixed topbar: the headline
   starts below it. */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .build__vp { padding-top: clamp(3rem, 9vh, 5rem); }
}
/* Landscape phones: nothing sticks. */
@media (max-height: 500px) {
  .build__card { position: static; }
}

/* ---- FAQ: a compact glass accordion (no backdrop blur: the checkout owns
   this act's one). 17px questions and answers, qualifiers intact. --------- */
.faq {
  width: 100%;
  margin-top: 2.5rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 24px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.faq__item + .faq__item { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--sc-font-text);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.004em;
  color: var(--sc-ink);
  transition: background-color 240ms var(--ease-ui);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__chev {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--sc-ink-soft);
  transition: transform 240ms var(--ease-ui), color 240ms var(--ease-ui);
}
.faq__chev-path { fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.faq__item[open] > .faq__q .faq__chev { transform: rotate(180deg); color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { background: rgba(255, 255, 255, 0.03); }
  .faq__q:hover .faq__chev { color: var(--sc-ink); }
}
.faq__a {
  margin: 0;
  padding: 0 3rem 1.125rem 1.25rem;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.build__support { margin: 2rem 0 0; font-size: 0.9375rem; }
.build__support-link, .build__docs-link {
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 240ms var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .build__support-link:hover, .build__docs-link:hover { text-decoration-color: var(--sc-ink); }
}

/* ---- The desk: a segmented glass control over a studio-lit stage -------- */
.desk { position: relative; width: 100%; margin-top: 4rem; --da: 1; --dd: 0; }
#act-build .build__side--vp { overflow-x: clip; }
.desk__tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.desk__tab {
  min-height: 2.5rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sc-ink-soft);
  font: 500 0.9375rem / 1 var(--sc-font-text);
  cursor: pointer;
  transition: background-color 240ms var(--ease-ui), color 240ms var(--ease-ui);
}
.desk__tab.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--sc-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
@media (hover: hover) and (pointer: fine) {
  .desk__tab:not(.is-active):hover { color: var(--sc-ink); }
}

/* Staging (recipe 8): one centred object floating on a soft radial studio
   light; the only hard edges are the object's own. Both panels share one
   cell so switching tabs never changes the stage's height. */
.desk__sheet { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; }
.desk__sheet::before {
  content: "";
  position: absolute;
  inset: -12% -16% -4%;
  z-index: 0;
  background: radial-gradient(ellipse 58% 52% at 56% 42%, rgba(91, 134, 240, 0.16), transparent 70%);
  pointer-events: none;
}
.desk__panel { grid-area: 1 / 1; position: relative; z-index: 1; min-width: 0; min-height: 30rem; }
.desk__panel[hidden] { display: block; visibility: hidden; }

/* Glass rim: a 1px gradient edge drawn through a mask. */
.lk__pay::before, .api-panel__sheet::before, .lk__dash::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.lk__dash::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.12)); }

/* ---- Payment link: the sample merchant's checkout, a glass card --------- */
.lk {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  padding: 1.5rem 0 8.5rem;
}
.lk > * { min-width: 0; }
/* Depth plane behind: the dashboard creating the link, dimmer glass. */
.lk__dash {
  position: relative;
  z-index: 0;
  grid-column: 1 / 8;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.3);
  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;
  align-self: stretch;
  gap: 0.45rem;
  margin: 0;
  font-family: var(--sc-font-text);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.lk__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }
.lk__dash-sample { margin-left: auto; padding-left: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sc-ink-soft); }
.lk__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.lk__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 11rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lk__field-k { font-size: var(--t-caption); color: var(--sc-ink-soft); }
.lk__field-v { font-size: 0.9375rem; font-weight: 500; color: var(--sc-ink); }
.lk__field-v b { margin-left: 0.4rem; font-weight: 500; color: var(--sc-ink-soft); }
.lk__copy {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--sc-ink);
  white-space: nowrap;
}

/* The object: the checkout card. It rides the desk's transformed plane, so
   it carries no backdrop-filter (a blur under a moving transform repaints
   every frame): the glass reads from a lit fill, the inset highlights and
   the 1px gradient rim. Its reflection (recipe 4) is cloned by close.js. */
.lk__obj {
  position: relative;
  z-index: 1;
  grid-column: 3 / 13;
  grid-row: 2;
  margin-top: -2.5rem;
  transform: translate3d(0, calc((1 - var(--da)) * 28px + var(--dd) * 10px), 0);
}
.lk__pay {
  position: relative;
  padding: 1.5rem;
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 55%, rgba(255, 255, 255, 0.04)),
    rgba(18, 22, 34, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 30px 60px rgba(0, 0, 0, 0.45);
}
.obj__reflect {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  transform: scaleY(-1);
  transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(transparent 55%, #000);
  mask-image: linear-gradient(transparent 55%, #000);
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.obj__reflect::before { display: none; }

.lk__merchant { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.lk__logo { width: 1.75rem; height: 1.75rem; flex: none; }
.lk__logo-bg { fill: var(--sc-ink); }
.lk__logo-n { fill: var(--sc-canvas); }
.lk__name { font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.006em; color: var(--sc-ink); }
.lk__sample { margin-left: auto; font-size: var(--t-caption); color: var(--sc-ink-soft); }
.lk__to { margin: 1.5rem 0 0; font-size: var(--t-caption); color: var(--sc-ink-soft); }
.lk__amount {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  font-family: var(--sc-font-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  font-weight: 600;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--sc-ink);
}
.lk__methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1.5rem 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.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--sc-ink);
  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__ic { fill: none; stroke: currentColor; stroke-width: 1.25px; stroke-linecap: round; stroke-linejoin: round; }
.lk__settle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--sc-ink);
}
.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: 1.25rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--t-caption);
  color: var(--sc-ink-soft);
}
.lk__powered svg { width: 0.8rem; height: 0.8rem; fill: var(--sc-accent); }

/* ---- API: the code sample in a dark glass sheet ------------------------- */
.api-panel { padding: 1.5rem 0 3rem; }
.api-panel__sheet {
  position: relative;
  padding: 1.25rem 1.5rem 1.5rem;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 30px 60px rgba(0, 0, 0, 0.45);
}
.api-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.api-panel__verb { font-size: var(--t-caption); color: var(--sc-ink-soft); }
.api-panel__verb b { color: var(--sc-accent); font-weight: 600; }
.api-panel__code {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-family: var(--sc-font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  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__caption { margin: 1rem 0 0; }

/* Quiet pills: H's .btn--quiet (glass pill, no blur). Only sizes here. */
.api-panel__copy { min-height: 2.25rem; padding: 0 0.9rem; font-size: var(--t-caption); }
.build__docs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 3rem;
  font-size: 0.9375rem;
}

/* Coarse pointers: every control and inline link is at least 44px tall. */
@media (pointer: coarse) {
  .desk__tab, .api-panel__copy { min-height: 44px; }
  .build__support-link, .build__docs-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
  .build__docs { gap: 0 1.5rem; }
  .build__support { margin-top: 1.25rem; }
}

/* Stacked (below 900): past copy, FAQ, future copy + CTA, checkout. Rhythm
   96 (section, base.css) / 24 (head to sub) / 64 (sub to object). The
   checkout's reflection is dropped here: on a narrow card it reads as ghost
   text under the real one. */
@media (max-width: 899.98px) {
  .build__card, .build__vp { max-width: none; }
  .build__card { position: static; }
  .build__title { text-wrap: pretty; }
  .faq { margin-top: 4rem; }
  .faq__q { padding-inline: 1rem; }
  .faq__a { padding: 0 1.5rem 1rem 1rem; }
  .desk { margin-top: 4rem; }
  .desk__panel { min-height: 0; }
  .lk .obj__reflect { display: none; }
  .lk { padding: 1rem 0 2rem; }
  .lk__dash { grid-column: 1 / 11; }
  .lk__obj { grid-column: 1 / 13; margin-top: -1rem; }
  .lk__pay { padding: 1.25rem; }
  .lk__methods { gap: 0.375rem; }
  .lk__method { gap: 0.3rem; }
  .lk__method svg { width: 0.85rem; height: 0.85rem; }
  .lk__sample { margin-left: 0; flex-basis: 100%; }
  .api-panel { padding-bottom: 1.5rem; }
  .api-panel__sheet { padding: 1rem 1rem 1.25rem; }
  .api-panel__code { font-size: var(--t-caption); }
}

/* =============================================================== 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
   body and CTA group stays anchored where it began. */
/* --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 and the coin drops
   into the wallet. Both hold at 1 for the rest. */
/* --d: the daylight, from the act's own progress so it starts bleeding in
   at p 0.1, before the collapse begins, and is full by p 0.55. The stage
   switches to the light tokens at p 0.3 (close.js), while the day is still
   under half strength. */
#act-close {
  --pad: clamp(1.5rem, 4vw, 5rem);
  --tf: min(var(--t-hero), 6.4vw);
  --c: var(--close, 0);
  --d: clamp(0, (var(--sc-p, 0) - 0.1) / 0.45, 1);
  --l: clamp(0, (var(--sc-p, 0) - 0.7) / 0.2, 1);
}
#act-close.is-settled { --c: 1; --d: 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;
  color: var(--sc-ink);
  transition: color 360ms var(--ease-fade);
}
.close__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Daylight rises under everything as the past dissolves. */
.close__day {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--light-canvas);
  opacity: var(--d);
  pointer-events: none;
}

/* History dissolves: 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 wipe never
   reads as a straight line. */
.close__card {
  --e: calc(var(--c) * (1 - var(--c)) * 1.8); /* 0 at both ends, 0.45 mid-wipe */
  --x: calc(100% - var(--c) * 124%);          /* the mean edge position */
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  background: var(--card-canvas);
  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%
  );
}
/* The day's first light reaches the past before the wipe does: a thin wash
   over the column, so the page is never black with one sphere. */
.close__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--light-canvas);
  opacity: calc(var(--d) * 0.28);
  pointer-events: none;
}
/* The past's last object: a matte coin, dimming as it is washed away. */
.close__past {
  width: clamp(10rem, 16vw, 15rem);
  opacity: calc(0.85 - var(--c) * 0.6);
  transform: translate3d(calc(var(--c) * -3vw), 0, 0);
}
.close__past-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Settled rhythm (desktop): headline, 24px, body, 32px, CTA; 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;
  position: relative;
  z-index: 2;
  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__title {
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 2 * var(--pad) - 24vw);
  font-family: var(--sc-font-display);
  font-size: var(--tf);
  font-weight: 600;
  font-stretch: 100%;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 32;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--sc-ink);
  text-wrap: balance;
  transition: color 360ms var(--ease-fade);
}
/* The body and CTA group 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: 1.5rem;
  max-width: 40rem;
  transform-origin: 0 0;
  transform:
    translate3d(calc(var(--c) * -50vw), calc((1 - var(--c)) * var(--tf) * -0.84), 0)
    scale(calc(1.02 - 0.02 * var(--l)));
}
.close__body {
  margin: 0;
  max-width: 40rem;
  font-size: var(--t-sub);
  font-weight: 500;
  letter-spacing: 0.009em;
  line-height: 1.33;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
  transition: color 360ms var(--ease-fade);
}
/* The primary action, then one quiet row of secondary links under it. */
.close__cta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
}
/* The page's one primary action, at its largest here: a 56px pill with an
   18px w600 label, sitting on a soft static accent light (a radial, never
   blurred or animated). */
.close__cta-main { position: relative; display: inline-flex; flex: 0 0 auto; }
.close__cta-light {
  position: absolute;
  z-index: 0;
  left: 50%; top: 50%;
  width: 220%; height: 320%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(40, 89, 215, 0.34), rgba(40, 89, 215, 0.12) 38%, transparent 70%);
  pointer-events: none;
}
.close__primary {
  position: relative;
  z-index: 1;
  min-height: 3.5rem;
  padding: 0 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.003em;
}
.close__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 0 100%;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}
.close__link {
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: var(--sc-hairline-strong, rgba(255, 255, 255, 0.22));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 360ms var(--ease-fade), text-decoration-color 240ms var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) {
  .close__link:hover { text-decoration-color: currentColor; }
}
.close__mail { color: var(--sc-ink-soft); }
@media (pointer: coarse) {
  .close__link, .close__nav a, .close__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }
  .close__links { gap: 0 1.5rem; }
  .close__cta { gap: 0.5rem 2rem; }
  .close__nav { gap: 0 1.5rem; }
  .close__foot-row { gap: 0 3rem; }
}

/* Arrival mark: one gradient-lit glass coin settling into the wallet device
   beside the CTA, on a soft studio light. It is there from the first frame,
   dim and low, rises into place with the collapse (--c), brightens with the
   day (--d) and the coin drops into the slot on the landing (--l). */
.close__obj {
  position: absolute;
  z-index: 2;
  right: 7vw;
  top: calc(50% - 3.5rem);
  width: clamp(15rem, 23vw, 22rem);
  pointer-events: none;
  opacity: calc(0.3 + 0.4 * var(--d) + 0.3 * var(--l));
  /* Starts low and to the right, under the CTA group's row, so it never
     sits on the copy before the headline has moved left. */
  transform: translate3d(calc((1 - var(--c)) * 6vw), calc(-50% + (1 - var(--c)) * 34vh), 0);
}
.close__obj::before {
  content: "";
  position: absolute;
  inset: -28% -34%;
  z-index: -1;
  background: radial-gradient(ellipse 50% 46% at 50% 52%, rgba(40, 89, 215, 0.13), transparent 70%);
}
.close__obj-svg { display: block; width: 100%; height: auto; overflow: visible; }
.close__coin {
  transform: translate3d(0, calc((1 - var(--l)) * -72px), 0);
  opacity: calc(0.55 + 0.45 * var(--l));
}

/* Footer: inside the stage, flush bottom, revealed behind the travelling
   divider and brightening with the day. */
.close__foot {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 2rem var(--pad) 1.75rem;
  border-top: 1px solid var(--sc-hairline);
  color: var(--light-soft);
  /* 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));
  opacity: clamp(0, (var(--c) - 0.35) / 0.45, 1);
}
.close__foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 3rem;
}
.close__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--light-ink);
  font-family: var(--sc-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.close__brand svg { width: 1.6rem; height: 1.6rem; fill: var(--vp-blue); }
.close__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--t-caption); }
.close__nav a {
  display: inline-flex;
  align-items: center;
  color: var(--light-soft);
  text-decoration: none;
  text-underline-offset: 0.22em;
  transition: color 240ms var(--ease-ui);
}
.close__nav a:hover { color: var(--light-ink); text-decoration: underline; }
.close__copy { margin-left: auto; font-size: var(--t-caption); color: var(--light-soft); font-variant-numeric: tabular-nums; }
.close__disclosure {
  max-width: 70ch;
  text-wrap: pretty;
  margin: 0.875rem 0 0;
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--light-soft);
}

/* ---- Stacked (below 900, and every landscape phone): the collapse is
   vertical. The past is a band on top, washed away upward. --------------- */
@media (max-width: 899.98px), (max-height: 500px) {
  #act-close { --band: 30svh; }
  #act-close .close {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .close__card {
    position: absolute;
    z-index: 2;
    top: 0; left: 0; right: 0;
    height: var(--band);
    padding: 0 var(--pad);
    transform: none;
    /* The same irregular edge, turned, with far fewer and gentler points:
       on a phone-wide band the desktop's 25-point edge reads as a tear. */
    --e: calc(var(--c) * (1 - var(--c)) * 0.9); /* 0 at both ends, 0.225 mid-wipe */
    --y: calc(100% - var(--c) * 118%);
    clip-path: polygon(
      -5% -20%,
      105% -20%,
      105% calc(var(--y) + var(--e) * 1.2%),
      90% calc(var(--y) - var(--e) * 2.5%),
      76% calc(var(--y) + var(--e) * 1.5%),
      62% calc(var(--y) - var(--e) * 3%),
      50% calc(var(--y) + var(--e) * 1.2%),
      38% calc(var(--y) - var(--e) * 2%),
      24% calc(var(--y) + var(--e) * 3%),
      10% calc(var(--y) - var(--e) * 1.5%),
      -5% calc(var(--y) + var(--e) * 2%)
    );
  }
  .close__past { width: 6.5rem; transform: translate3d(0, calc(var(--c) * -3vh), 0); }
  .close__vp, .close__obj, .close__foot {
    grid-column: 1;
    transform: translate3d(0, calc((1 - var(--c)) * var(--band)), 0);
  }
  .close__vp {
    grid-row: 1;
    justify-content: flex-end;
    padding: 3rem var(--pad) 0;
    background: transparent;
    transition: color 360ms var(--ease-fade);
  }
  .close__head { transform: scale(calc(1.02 - 0.02 * var(--l))); }
  /* Phone floor 48px (the hero's own floor), growing with the viewport on
     tablets; pretty wrapping so the last line is never a lone word. */
  .close__title { width: auto; max-width: none; font-size: clamp(3rem, 1.2rem + 6.2vw, 4.5rem); text-wrap: pretty; }
  .close__act { margin-top: 1.5rem; transform: scale(calc(1.02 - 0.02 * var(--l))); }
  .close__cta { gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
  .close__links { gap: 0 1.25rem; font-size: 0.875rem; }
  .close__obj {
    position: relative;
    grid-row: 2;
    top: auto; right: auto;
    width: clamp(7rem, 24vw, 11rem);
    margin: 0.5rem var(--pad) 0 auto;
  }
  .close__foot { grid-row: 3; clip-path: none; padding: 1rem var(--pad) 1.25rem; }
  .close__nav .close__nav-dup { display: none; }
  .close__foot-row { gap: 0.5rem 1.25rem; }
  .close__nav { gap: 0.25rem 1rem; }
  .close__disclosure { margin-top: 0.5rem; font-size: var(--t-caption); line-height: 1.45; }
}
/* Short phones (360x640): tighter rhythm, the headline at its 44px floor,
   and the arrival mark shrinks (never hidden) to keep the footer on the
   stage. */
@media (max-width: 899.98px) and (max-height: 700px) and (min-height: 500.01px) {
  .close__vp { padding-top: 2rem; padding-bottom: 0.5rem; }
  .close__title { font-size: 2.75rem; }
  .close__act { margin-top: 1rem; }
  .close__body { font-size: var(--t-lead); }
  .close__cta { margin-top: 1rem; }
  .close__primary { min-height: 3rem; font-size: 1.0625rem; }
  .close__obj { width: 4.5rem; margin-top: 0; }
  .close__foot { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .close__disclosure { margin-top: 0.25rem; }
}
/* Landscape phones: the coordinator unpins the close (data-short), so the
   stage flows at its own height in the settled, daylit state. */
@media (max-height: 500px) {
  html[data-short] #act-close { --c: 1; --d: 1; --l: 1; }
  html[data-short] #act-close [data-sc-cue] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  html[data-short] #act-close .close { min-height: 100svh; }
  html[data-short] .close__card { display: none; }
  html[data-short] .close__vp, html[data-short] .close__obj, html[data-short] .close__foot { transform: none; }
  html[data-short] .close__vp { padding-top: 4rem; }
  html[data-short] .close__title { font-size: 3rem; }
  html[data-short] .close__obj { width: 7rem; margin-top: -1rem; }
}

/* ---- Reduced motion: the settled, daylit state, always, no motion ------- */
@media (prefers-reduced-motion: reduce) {
  #act-close { --c: 1; --d: 1; --l: 1; }
  #act-close [data-sc-cue] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .close__day { opacity: 1; }
  .close__foot { clip-path: none; opacity: 1; }
  .close__card { visibility: hidden; }
  .close__obj { opacity: 1; transform: translate3d(0, -50%, 0); }
  .close__past { opacity: 0; }
  .close__coin { transform: none; opacity: 1; }
  #act-close .close, .close__title, .close__body, .close__link, .close__vp { transition: none; }
  .faq__chev, .desk__tab, .faq__q { transition: none; }
  #act-build [data-sc-stagger] > * { transform: none; transition-duration: 200ms; }
  .desk { --da: 1 !important; --dd: 0 !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899.98px), (prefers-reduced-motion: reduce) and (max-height: 500px) {
  .close__vp, .close__obj, .close__foot { transform: none; }
}