/* === Login: one document composed by the whole panel ===
   All colours derive from the microsite's editorial-dark tokens. SVG units
   describe the artwork, independent of page type and spacing scales. */
.auth-promo--compose {
  --compose-blue: color-mix(in oklab, var(--hero-fluid-cyan) 58%, var(--text-primary));
  --compose-violet: color-mix(in oklab, var(--hero-fluid-violet) 55%, var(--text-primary));
  --compose-ink: color-mix(in oklab, var(--text-primary) 85%, var(--hero-fluid-blue));
}
.compose-atmosphere, .compose-light { position: absolute; inset: 0; pointer-events: none; }
.compose-atmosphere {
  background:
    radial-gradient(ellipse at 5% 12%, color-mix(in oklab, var(--hero-fluid-blue) 38%, transparent), transparent 55%),
    radial-gradient(ellipse at 95% 42%, color-mix(in oklab, var(--hero-fluid-cyan) 23%, transparent), transparent 48%),
    radial-gradient(ellipse at 34% 64%, color-mix(in oklab, var(--hero-fluid-violet) 34%, transparent), transparent 57%),
    linear-gradient(150deg, var(--bg), var(--surface-card));
}
.compose-light {
  background: radial-gradient(ellipse at 50% 36%, color-mix(in oklab, var(--hero-fluid-cyan) 16%, transparent), transparent 65%);
  opacity: .6;
}
.compose-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.compose-scene { flex: none; width: 100%; height: 100%; overflow: visible; }
/* The artwork occupies the flexible area above the copy, which can grow
   with user text size. No masks obscure the completed document. */
.auth-promo--compose .auth-promo-copy {
  min-height: 22%;
  width: 100%;
  max-width: none;
  padding-block: var(--space-m) var(--space-l);
}
.auth-promo--compose .auth-promo-title { max-width: 13em; }
.compose-document { filter: drop-shadow(0 18px 25px color-mix(in oklab, var(--surface-card) 60%, transparent)); }
.paper-start { stop-color: color-mix(in oklab, var(--bg) 83%, var(--hero-fluid-blue)); }
.paper-end { stop-color: color-mix(in oklab, var(--bg) 95%, var(--hero-fluid-violet)); }
.edge-start { stop-color: color-mix(in oklab, var(--compose-blue) 50%, transparent); }
.edge-middle { stop-color: color-mix(in oklab, var(--text-primary) 10%, transparent); }
.edge-end { stop-color: color-mix(in oklab, var(--compose-violet) 38%, transparent); }
.compose-paper { fill: url(#compose-paper); stroke: url(#compose-edge); stroke-width: 1.25; }
.compose-paper-rule, .compose-rule { stroke: var(--text-primary); stroke-opacity: .12; }
.compose-scene text { font-family: var(--font-body); fill: var(--compose-ink); }
.compose-scene .compose-wordmark { font-size: 25px; font-weight: 500; letter-spacing: -1px; fill: var(--text-primary); }
.compose-scene .compose-micro { font-size: 9px; letter-spacing: 1.3px; fill: var(--text-secondary); }
.compose-scene .compose-heading { font-size: 30px; font-weight: 500; letter-spacing: -1px; fill: var(--text-primary); }
.compose-scene .compose-body { font-size: 13px; }
.compose-scene .compose-label { font-size: 9px; letter-spacing: 1.1px; fill: var(--text-secondary); }
.compose-scene .compose-merge text { font-family: monospace; font-size: 12px; fill: var(--compose-blue); opacity: .6; }
.compose-scene .compose-data-text { font-size: 14px; font-weight: 500; fill: var(--compose-blue); }
.compose-data-wash { fill: var(--compose-blue); opacity: 0; }
.compose-table-head { fill: var(--compose-violet); fill-opacity: .1; }
.compose-scene .compose-total-label { font-size: 12px; fill: var(--text-secondary); }
.compose-scene .compose-total { font-size: 22px; font-weight: 500; fill: var(--text-primary); }
.compose-field { fill: var(--hero-fluid-cyan); fill-opacity: .045; stroke: var(--compose-blue); stroke-opacity: .35; }
.compose-scene .compose-field-text { font-size: 13px; }
.compose-signature { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compose-seal { fill: var(--accent); fill-opacity: .08; stroke: var(--accent); stroke-opacity: .6; }
.compose-check { stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compose-scene .compose-signed { font-size: 12px; fill: var(--text-primary); }
.compose-finished-edge { stroke: var(--compose-blue); stroke-opacity: .4; }
.compose-track { stroke: var(--text-primary); stroke-opacity: .07; stroke-width: 1; }
.compose-stream { color: var(--compose-blue); opacity: 0; }
.compose-stream.is-content { color: var(--text-primary); }
.compose-stream.is-records { color: var(--compose-violet); }
.compose-stream.is-signature { color: var(--accent); }
.compose-stream path { stroke: currentColor; stroke-width: 1.5; }
.compose-stream .compose-stream-glow { stroke-width: 14; opacity: .55; filter: url(#compose-halo); }
.compose-motion {
  position: absolute; z-index: 3; right: var(--space-m); bottom: var(--space-m);
  width: 32px; height: 32px; padding: 7px;
  border: 1px solid var(--border-subtle); border-radius: 50%;
  color: var(--text-secondary); background: transparent;
  transition: color .2s var(--ease-motion), background .2s var(--ease-motion);
}
.compose-motion:hover { color: var(--text-primary); background: var(--token-bg); }
.compose-motion:focus-visible { outline: 2px solid var(--compose-blue); outline-offset: 4px; }
.compose-motion svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.compose-play-icon, .compose-motion[aria-pressed="true"] .compose-pause-icon { display: none; }
.compose-motion[aria-pressed="true"] .compose-play-icon { display: block; }
/* Without JavaScript, the complete agreement is the default illustration. */
.auth-promo--compose:not(.is-animating) [data-placeholder] { display: none; }
.auth-promo--compose:not(.is-animating) .compose-motion { display: none; }
@media (max-width: 899px) {
  .auth-promo--compose { height: 700px; }
}
@media (max-width: 480px) {
  .auth-promo--compose { height: 620px; }
  .compose-scene { width: 144%; max-width: none; }
  .auth-promo--compose .auth-promo-copy { min-height: 24%; padding-right: var(--space-xl); }
}
@media (max-width: 360px) {
  .auth-promo--compose { height: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .compose-motion { display: none; }
  .compose-light { opacity: .6; }
}