/* elegant.work: buttons made of the field, v4 (clean pass, 20 Oct 2026). Described in the clean pass README. */
.btn.primary { position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--blue); min-height: 52px; padding: 0 30px; letter-spacing: .02em; }
.btn.primary:hover, .btn.primary:focus-visible { color: var(--blue); }
.btn.primary[disabled] { opacity: .5; cursor: default; }
.btn.primary > .bf-field { position: absolute; z-index: -1; pointer-events: none; display: block; max-width: none; }
.btn.primary.bf-on.bf-on::after { content: none; }
.btn.ghost { position: relative; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--blue); min-height: 48px; padding: 0 2px; letter-spacing: .02em;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color 200ms ease; }
.btn.ghost:hover, .btn.ghost:focus-visible { text-decoration-color: currentColor; }
.btn.ghost.btn.ghost::after { content: none; }
.actions, .after, .diag-nav { column-gap: var(--sp-5); row-gap: var(--sp-3); align-items: center; }
@media (max-width: 720px) { :is(.actions, .after, .diag-nav):has(> .btn.primary) { row-gap: calc(var(--sp-3) + var(--sp-2)); } }
:is(.actions, .after, .diag-nav) > .btn.primary { margin-right: var(--sp-2); }
main > .pf-clear { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pf-clear > .pf-isl { position: absolute; inset: 0; }
.pf-txt { position: absolute; left: 0; top: 0; display: block; max-width: none; pointer-events: none; }
.pf-isl > canvas, .hero > canvas.bf-field, .pf-gnd { position: absolute; display: block; max-width: none; pointer-events: none; }
.pf-gnd { -webkit-mask-image: var(--pf-gx); mask-image: var(--pf-gx); }
.pf-gnd > i { position: absolute; inset: 0; background: var(--bg); -webkit-mask-image: var(--pf-gy); mask-image: var(--pf-gy); }
.hero { isolation: isolate; }
.hero > canvas.bf-field, .hero > .pf-gnd { z-index: -1; }
html.pf-on:not(.pf-ready) main::before, html.pf-on:not(.pf-ready) .pf-txt { visibility: hidden; }
html.pf-on .wrap > :not(.pf-open, .arows, .fig:has(> .gfx-people), .tl-h)::after, html.pf-on .arows .pa-tx::after { content: none; }
html.pf-on .tl:not(.tl-end) .tl-h::after { content: none; }
html.pf-on .tl-end .wrap { background: none; box-shadow: none; }
html.pf-on .opener.tl.tl-end .wrap > .tl-h::after { --m: linear-gradient(#0000000d, #00000026 16px, #00000080 44px, #000000e6 76px, #000 96px); }
html.pf-on .opener.tl > .tl-seg { --a: calc(var(--head) - 16px); --m: linear-gradient(#0000 var(--a), #0000001a calc(var(--a) + 28px), #00000080 calc(var(--a) + 60px), #000000e6 calc(var(--a) + 92px), #000 calc(var(--a) + 116px)); }
html.pf-on .opener.tl > .tl-seg, html.pf-on .opener.tl.tl-end .wrap > .tl-h::after { -webkit-mask-image: var(--m); mask-image: var(--m); }
html.pf-on .tl > .tl-seg { -webkit-mask-image: var(--gap, none); mask-image: var(--gap, none); }
html.pf-on .opener.tl > .tl-seg[style*="--gap"] { -webkit-mask-image: var(--m), var(--gap); mask-image: var(--m), var(--gap); -webkit-mask-composite: source-in; mask-composite: intersect; }
html.pf-on .study::after, html.pf-on .lad .st::after { content: none; }
.nav .nav-cta { min-height: 44px; padding: 0 22px; }
.msg-dock { position: relative; height: 0; z-index: 30; }
.msg-us { position: absolute; right: calc((100% - var(--wrapw)) / 2); bottom: 30px; }
.msg-us .btn.primary { min-height: 44px; padding: 0 2px; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--w-medium);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color 200ms ease; }
.msg-us .btn.primary:hover, .msg-us .btn.primary:focus-visible { text-decoration-color: currentColor; }
@media (min-width: 1440px) {
  .msg-dock { position: sticky; bottom: 0; }
  .msg-us { right: 24px; bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .msg-us .btn.primary, .btn.ghost { transition: none; } }
@media print { .bf-field, .msg-us, .pf-clear { display: none !important; } }
.agent-gather { display: none; }
.roots-echo + .actions { margin-top: var(--sp-6); }
.gfx-roots { max-width: 520px; margin-left: auto; margin-right: auto; }
.ar .stage { margin-bottom: 56px; }