/* Scene 10 - finale: the shape from the first scene comes back, calm; three ways in; the footer. */
.begin-vis { inset: 0; z-index: 2; }
.begin-glow { position: absolute; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%); }
.begin-shape { position: absolute; overflow: visible; transform: scale(0.0001); transform-origin: 50% 50%; }
.begin-body { stroke: color-mix(in srgb, var(--accent-soft) 70%, transparent); stroke-width: 0.5; stroke-linejoin: round; }
.begin-sheen { fill: color-mix(in srgb, var(--accent-soft) 42%, transparent); }
.begin-mark { position: absolute; left: 0; top: 0; height: auto; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--shadow-c) 30%, transparent)); }
.begin-seeds { position: absolute; inset: 0; }
.begin-seeds .seed { opacity: 0; }

.begin-copy { width: min(34rem, 46vw); z-index: 6; padding-bottom: 56px; }
.begin-copy .t-d1 { --fs-display-l: clamp(3rem, 1.4rem + 4.6vw, 6.4rem); }
.begin-copy .lead { margin-top: 20px; max-width: 32ch; }
.ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; max-width: 30rem; }
.cta {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 18px 10px 10px; border-radius: 34px; will-change: transform, opacity;
  background: color-mix(in srgb, var(--surface) 86%, transparent); color: var(--ink); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line2);
  transition: box-shadow var(--dur-effects) var(--ease-effects), border-radius var(--dur-spatial-fast) var(--ease-spatial-fast), background var(--dur-effects) var(--ease-effects);
}
.cta:hover { box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line2); background: var(--surface); }
.cta:active { border-radius: var(--r-press); }
.cta-main { grid-column: 1 / -1; min-height: 86px; padding: 12px 24px 12px 12px; border-radius: 44px; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-lift); }
.cta-main:hover { background: var(--accent); box-shadow: var(--shadow-lift), 0 10px 34px color-mix(in srgb, var(--accent) 45%, transparent); }
.cta-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
  transition: border-radius var(--dur-spatial) var(--ease-spatial), transform var(--dur-spatial) var(--ease-spatial); }
.cta-ic .ms { font-size: 26px; font-variation-settings: 'FILL' 1; }
.cta:hover .cta-ic, .cta:focus-visible .cta-ic { border-radius: 36%; transform: rotate(-8deg); }
.cta-main .cta-ic { width: 62px; height: 62px; background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); }
.cta-main .cta-ic .ms { font-size: 32px; }
.cta-tx b { display: block; font-size: 16px; line-height: 1.2; font-weight: 700; font-variation-settings: 'ROND' 80; }
.cta-main .cta-tx b { font-size: 20px; }
.cta-tx i { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 600; opacity: 0.78; }
.cta:focus-visible { outline-offset: 4px; border-radius: 34px; }

.foot {
  position: absolute; left: var(--gutter); right: 118px; bottom: 20px; z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.foot-brand { display: block; height: 28px; border-radius: 8px; }
.foot-brand img { height: 28px; width: auto; }
.foot-brand .on-dark { display: none; }
[data-theme="dark"] .foot-brand .on-light { display: none; }
[data-theme="dark"] .foot-brand .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .foot-brand .on-light { display: none; }
  :root:not([data-theme="light"]) .foot-brand .on-dark { display: block; }
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.foot-nav a { border-radius: 8px; transition: color var(--dur-effects) var(--ease-effects); }
.foot-nav a:hover { color: var(--accent-ink); }
.foot-note { margin-left: auto; font-size: 12.5px; color: var(--ink2); }
.foot-up { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border-radius: 17px; font-size: 13px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft);
  transition: border-radius var(--dur-spatial-fast) var(--ease-spatial-fast); }
.foot-up:active { border-radius: 10px; }
.foot-up .ms { font-size: 18px; }

@media (max-width: 759px) {
  .begin-copy { left: var(--gutter); right: var(--gutter); width: auto; padding-bottom: 0; }
  .begin-copy .lead { margin-top: 12px; font-size: 0.95rem; }
  .ctas { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; max-width: none; }
  .cta { min-height: 58px; padding: 8px 12px 8px 8px; border-radius: 29px; gap: 10px; }
  .cta-main { min-height: 70px; padding: 9px 18px 9px 9px; border-radius: 35px; }
  .cta-ic { width: 40px; height: 40px; } .cta-ic .ms { font-size: 22px; }
  .cta-main .cta-ic { width: 52px; height: 52px; } .cta-main .cta-ic .ms { font-size: 28px; }
  .cta-tx b { font-size: 14px; } .cta-main .cta-tx b { font-size: 17px; } .cta-tx i { font-size: 11px; }
  .foot { left: var(--gutter); right: var(--gutter); bottom: 58px; gap: 6px 14px; padding-top: 10px; }
  .foot-nav { display: none; }
  .foot-note { margin-left: 0; flex-basis: 100%; order: 3; font-size: 11.5px; }
  .foot-up { margin-left: auto; }
  .static .foot { position: relative; left: auto; right: auto; bottom: auto; margin: 24px var(--gutter) 0; }
  .static #begin .stage { min-height: 900px; }
}
.cta.is-soon { opacity: 0.62; cursor: default; }
.cta.is-soon:hover { box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line2); background: color-mix(in srgb, var(--surface) 86%, transparent); }
.cta.is-soon:hover .cta-ic { border-radius: 50%; transform: none; }
.cta-ic svg { width: 26px; height: 26px; }
.ctas .span-all { grid-column: 1 / -1; }