.act--offer { --pool-x: 68%; --pool-y: 58%; background: var(--pine); color: var(--ink); }
.slide--pine { --ground: var(--pine); --pool: color-mix(in oklab, var(--teal) 13%, transparent); }
.slide--g0 { --ground: var(--g0); --pool: color-mix(in oklab, var(--teal) 8%, transparent); }
.slide { position: relative; isolation: isolate; color: var(--ink); }
.slide__ground {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(38% 44% at var(--pool-x) var(--pool-y), var(--pool), transparent 72%), var(--ground);
}
.slide__edge, .offer-exit { display: none; }

.offer-hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s7);
  max-width: var(--maxw); margin-inline: auto; padding: calc(var(--band) * 0.8) var(--gutter) var(--s4);
}
.offer-hud__h { flex: 1 1 100%; }
.offer-hud__h {
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-xl); line-height: 1.12;
  letter-spacing: var(--track-snug); text-wrap: balance; max-width: 34ch;
}
.steps-index ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-left: -0.55rem; }
.steps-index li { display: flex; align-items: center; }

.steps-index li:nth-child(2)::after {
  content: ""; display: block; width: 1px; height: 1.6rem; margin-inline: var(--s2);
  background: var(--teal); box-shadow: 0 0 8px 0 var(--teal-hair);
}
.steps-index a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding-inline: 0.55rem;
  border-radius: var(--r-md); text-decoration: none; color: var(--ink-soft);
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm); letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
  transition: color var(--d-fast) var(--ease);
}
.steps-index__tick { width: 1.25rem; height: auto; overflow: visible; flex: none; }
.steps-index__tick path { fill: transparent; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: miter; transition: fill var(--d-fast) var(--ease), stroke var(--d-fast) var(--ease); }
.steps-index a[aria-current="step"] { color: var(--ink); }
.steps-index a[aria-current="step"] .steps-index__tick path { fill: var(--teal); stroke: var(--teal); }
@media (hover: hover) and (pointer: fine) {
  .steps-index a:hover { color: var(--ink); }
  .steps-index a:hover .steps-index__tick path { stroke: var(--teal); }
}
.steps-index a:active { transform: translateY(1px); }
.steps-index a:focus-visible { outline-offset: 0; }
.offer-hud__cap { gap: var(--s2) var(--s5); }

.slides { display: grid; }
.slide__body {
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: var(--s6); align-items: center;
  max-width: var(--maxw); margin-inline: auto; padding: var(--s6) var(--gutter);
}
.slide__copy { grid-column: 1; grid-row: 1; }
.slide__scene { grid-column: 2; grid-row: 1; position: relative; width: min(100%, 40rem); aspect-ratio: 600 / 520; justify-self: center; }
.slide__scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.slide__h {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 1.15rem + 2.5vw, 3.5rem);
  line-height: 1.02; letter-spacing: var(--track-tight); text-wrap: balance; max-width: 15ch;
}
.slide__hi { display: block; }
.slide__line { margin-top: var(--s4); font-size: var(--t-lg); line-height: 1.45; color: var(--ink-soft); max-width: 30ch; text-wrap: pretty; }

html.rise-live .act--offer .rise-static { visibility: visible; }
html.rise-offer .act--offer .rise-static { visibility: hidden; }

.slide__scene .chr-cameo { position: absolute; z-index: 2; left: 15.7%; top: 21.9%; width: 28%; }

.slide__tag {
  position: absolute; z-index: 3; left: var(--x); top: var(--y); margin: 0; transform: translate(-50%, -50%);
  white-space: nowrap; font-family: var(--f-display); font-weight: 500; font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--ink);
  opacity: clamp(0, min(var(--in, 1), (var(--perf, 1) - var(--t0, -1)) * 6), 1);
}
.slide__tag .ro { font-size: var(--t-xs); }
.slide__tag--word { color: var(--teal); text-transform: uppercase; letter-spacing: var(--track-wide); font-weight: 600; }
.slide__tag--soft { color: var(--ink-soft); }
.slide__tag--zh { font-family: var(--f-cjk); letter-spacing: 0.12em; text-transform: none; }
.slide__tag--end { transform: translate(-100%, -50%); }
.slide__tag--url { transform: translate(0, -50%); font-family: var(--f-text); font-weight: 500; letter-spacing: 0.01em; font-size: clamp(0.66rem, 0.45rem + 0.8vw, 1rem); }

.scene__inst { color: var(--ink); }
.scene__inst :is(path, ellipse, rect, circle) { stroke: currentColor; stroke-width: calc(1.3 / var(--k, 1)); }
.scene__inst .i-in { opacity: 0.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--in, 1)); }
.scene__inst .i-soft { opacity: 0.28; }
.scene__inst .i-key { stroke: var(--teal); opacity: 0.95; }
.scene__inst .i-call { stroke: var(--teal); opacity: 0.6; stroke-width: calc(1.6 / var(--k, 1)); }
.scene__inst .i-arc {
  stroke: var(--teal); stroke-width: calc(3.2 / var(--k, 1)); stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, var(--perf, 1) * 1.25, 1));
  opacity: clamp(0, var(--perf, 1) * 40, 1);
}
.scene__inst .i-trail {
  stroke: var(--teal); stroke-width: calc(2 / var(--k, 1)); stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--perf, 1) - 0.68) / 0.27, 1));
  
  opacity: clamp(0, (var(--perf, 1) - 0.68) * 40, 1);
}
.scene__inst .i-no { stroke-dasharray: 0.035 0.03; stroke-dashoffset: 0; opacity: calc(0.45 * var(--in, 1)); }
.scene__inst .i-sheet { stroke: var(--teal); stroke-width: calc(1.8 / var(--k, 1)); stroke-linecap: round; opacity: calc(var(--in, 1) * (0.22 + 0.78 * clamp(0, (var(--perf, 1) - 0.8) * 5, 1))); }
.scene__inst .i-total { stroke-width: calc(4.2 / var(--k, 1)); }
.scene__inst .i-live { fill: var(--teal); stroke: none; opacity: calc(var(--in, 1) * (0.25 + 0.75 * clamp(0, (var(--perf, 1) - 0.85) * 7, 1))); }

.scene__plates { opacity: var(--in, 1); }
.nobr { white-space: nowrap; }

@media (max-width: 860px) {
  .act--offer { --pool-x: 50%; --pool-y: 34%; }
  .offer-hud { column-gap: var(--s4); row-gap: var(--s1); }
  .offer-hud__h { font-size: var(--t-lg); max-width: 24ch; }
  .steps-index ol { gap: 0; margin-left: -0.4rem; }
  .steps-index a { gap: 0.35rem; padding-inline: 0.4rem; }
  .steps-index__tick { width: 1rem; }
  .steps-index li:nth-child(2)::after { margin-inline: var(--s1); }
  .offer-hud__cap { gap: 0 var(--s3); }
  .offer-hud__cap .ro { font-size: var(--t-xs); }
  .slide__body { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-block: var(--s5) var(--s6); }
  .slide__scene { grid-column: 1; grid-row: 1; width: min(100%, 26rem); }
  .slide__copy { grid-column: 1; grid-row: 2; }
}

html.sc-flat .slide__scene { width: min(100%, 40rem, calc((100svh - var(--bar-h) - 2.5rem) * 1.1538)); }
@media (max-width: 860px) { html.sc-flat .slide__scene { width: min(100%, 26rem, calc((100svh - var(--bar-h) - 2.5rem) * 1.1538)); } }

html.offer-stack:not(.sc-fail) .offer-stage { display: block; padding: 0; background: var(--pine); }
html.offer-stack:not(.sc-fail) .offer-hud {
  position: absolute; z-index: 20; top: var(--bar-h); left: 0; right: 0; max-width: none; margin: 0;
  padding: var(--s5) var(--gutter) 0; pointer-events: none;
}
html.offer-stack:not(.sc-fail) .offer-hud a { pointer-events: auto; }
html.offer-stack:not(.sc-fail) .slides { position: absolute; inset: 0; display: block; }

html.offer-stack:not(.sc-fail) .slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
html.offer-stack:not(.sc-fail) .slide.is-on { opacity: 1; }
html.offer-stack:not(.sc-fail) .slide__ground { z-index: 0; }
html.offer-stack:not(.sc-fail) .slide__edge { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
html.offer-stack:not(.sc-fail) .slide__edge polygon { fill: var(--teal); }
html.offer-stack:not(.sc-fail) .slide__edge .e2 { opacity: 0.07; }
html.offer-stack:not(.sc-fail) .slide__edge .e1 { opacity: 0.18; }
html.offer-stack:not(.sc-fail) .slide__body {
  position: absolute; inset: 0; z-index: 1; max-width: none; margin: 0;
  padding: calc(var(--bar-h) + var(--hud-h, 7.5rem)) var(--gutter) var(--s6);
}
html.offer-stack:not(.sc-fail) .slide__scene { width: min(100%, calc((100svh - var(--bar-h) - var(--hud-h, 7.5rem) - 3.5rem) * 1.1538)); }

html.offer-stack:not(.sc-fail) .slide__h { overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; }
html.offer-stack:not(.sc-fail) .slide__hi { transform: translateY(calc((1 - var(--hv, 1)) * 112%)); }
html.offer-stack:not(.sc-fail) .slide__line { opacity: var(--lv, 1); transform: translateY(calc((1 - var(--lv, 1)) * 0.75rem)); }

html.offer-stack:not(.sc-fail) .offer-exit {
  display: block; position: absolute; z-index: 15; left: 0; right: 0; bottom: -2px; height: 36vh;
  background: var(--g1); pointer-events: none;
  clip-path: ellipse(calc(55% + var(--exit, 0) * 65%) calc(var(--exit, 0) * 100%) at 50% 100%);
}
@media (max-width: 860px) {
  html.offer-stack:not(.sc-fail) .slide__body {
    grid-template-rows: auto auto; align-content: start;
    padding: calc(var(--bar-h) + var(--hud-h, 8.75rem)) var(--gutter) var(--s5);
  }
  html.offer-stack:not(.sc-fail) .slide__scene { width: min(100%, calc(42svh * 1.1538)); }
}
@media (min-width: 861px) and (max-height: 820px) {
  .offer-hud__h { font-size: var(--t-lg); }
  html.offer-stack:not(.sc-fail) .offer-hud { padding-top: var(--s3); row-gap: var(--s1); }
}
@media (max-width: 860px) and (max-height: 740px) {
  html.offer-stack:not(.sc-fail) .offer-hud { padding-top: var(--s3); row-gap: 0; }
  html.offer-stack:not(.sc-fail) .offer-hud__h { font-size: var(--t-base); }
  html.offer-stack:not(.sc-fail) .slide__scene { width: min(100%, calc(35svh * 1.1538)); }
  html.offer-stack:not(.sc-fail) .slide__h { font-size: clamp(1.55rem, 7vw, 2rem); }
  html.offer-stack:not(.sc-fail) .slide__line { margin-top: var(--s2); font-size: var(--t-base); }
  html.offer-stack:not(.sc-fail) .steps-index a { min-height: 2.5rem; }
}