/* Composition system (pass 6). Coded product compositions ported from design-assets/compositions/*.dc.html.
   Lengths are written in design units: "calc(48 * var(--u))" is 48px at the design width. scripts/build.js turns "Nu" into
   calc(N * var(--u)); for font-size it adds a 12px floor. --u is 100cqw / design width inside a layered panel
   and 1px in the stacked (mobile) layout, so every composition scales with its column and never upscales. */

.comp { position: relative; }
.comp-panel {
  container-type: inline-size; container-name: comp;
  position: relative; width: 100%; max-width: calc(var(--w) * 1px);
  border-radius: 24px; overflow: hidden;
  background-color: var(--c-panel);
  background-image: linear-gradient(var(--c-grid) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--c-ink); font-family: var(--font-text); line-height: 1.35; font-size: max(12px, calc(14 * var(--u))); text-align: left;
  -webkit-font-smoothing: antialiased;
}
.comp-dark .comp-panel, .band .comp-panel { --c-panel: var(--c-panel-dark); --c-grid: var(--c-grid-dark); --c-card-border: var(--c-card-border-dark); --c-card-shadow: 0 28px 56px -16px rgba(0,0,0,.5); }
.comp-stage { --u: calc(100cqw / var(--w)); position: relative; aspect-ratio: calc(var(--w) / var(--h)); }
.comp-stage * { box-sizing: border-box; }
.comp-stage table, .comp-stage thead, .comp-stage tbody, .comp-stage tr, .comp-stage td, .comp-stage th { color: inherit; background: none; border: 0; font: inherit; text-align: inherit; vertical-align: middle; }
.comp-stage table { border-collapse: collapse; }
.comp-stage b, .comp-stage strong { color: inherit; font-weight: 700; }
.comp-stage p, .comp-stage div { margin: 0; }
.comp-stage button { cursor: default; line-height: 1.2; }
.comp-stage a { color: var(--c-btn); text-decoration: underline; text-underline-offset: 2px; }

.c-card { position: absolute; background: var(--c-white); border: 1px solid var(--c-card-border); border-radius: calc(12 * var(--u)); box-shadow: var(--c-card-shadow); overflow: hidden; }
.c-tag { position: absolute; z-index: 2; font-size: max(12px, calc(11.5 * var(--u))); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-tag); background: var(--c-tag-bg); border: 1px solid var(--c-tag-border); border-radius: 999px; padding: calc(4 * var(--u)) calc(10 * var(--u)); white-space: nowrap; line-height: 1.3; }
.c-row { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border-top: 1px solid var(--c-rule); font-size: max(12px, calc(14 * var(--u))); }
.c-pill { display: inline-block; font-size: max(12px, calc(12 * var(--u))); font-weight: 600; padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; white-space: nowrap; line-height: 1.3; }
.c-num { font-variant-numeric: tabular-nums; }
.c-lbl { font-size: max(12px, calc(11.5 * var(--u))); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }
.c-tbl { width: 100%; border-collapse: collapse; font-size: max(12px, calc(14.5 * var(--u))); }
.c-tbl th { text-align: left; font-weight: 600; font-size: max(12px, calc(12 * var(--u))); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); padding: calc(9 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid var(--c-rule-2); background: var(--c-surface); }
.c-tbl td { padding: calc(11 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid var(--c-rule-3); vertical-align: middle; }
.c-tbl .c-num { text-align: right; }
.c-vrow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: calc(10 * var(--u)); align-items: center; padding: calc(11 * var(--u)) calc(16 * var(--u)); border-top: 1px solid var(--c-rule); font-size: max(12px, calc(14.5 * var(--u))); }
.c-vote { display: flex; justify-content: space-between; align-items: center; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(16 * var(--u)); border-top: 1px solid var(--c-rule); font-size: max(12px, calc(14.5 * var(--u))); }
.c-pc { background: var(--c-white); border: 1px solid var(--c-rule-2); border-radius: calc(12 * var(--u)); padding: calc(12 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.c-step { display: flex; gap: calc(14 * var(--u)); align-items: flex-start; }
.c-dot { flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.c-when { font-size: max(12px, calc(13.5 * var(--u))); color: var(--c-muted); }
.c-phone { position: absolute; border: calc(9 * var(--u)) solid var(--c-ink); border-radius: calc(40 * var(--u)); background: var(--c-paper); overflow: hidden; box-shadow: 0 28px 56px -16px rgba(12,17,29,.3); }
.comp-stage [data-split] { display: flex; }

/* Stacked layout: under 720px viewports, and whenever the layered layout would push text under 12px
   (hero below an 880px column; the 640px compositions below 500px). */
@media (max-width: 719px) { .comp-stage { --u: 1px; aspect-ratio: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } }
@container comp (max-width: 879px) { .comp-wide .comp-stage { --u: 1px; aspect-ratio: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } }
@container comp (max-width: 499px) { .comp:not(.comp-wide) .comp-stage { --u: 1px; aspect-ratio: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } }
@media (max-width: 719px) {
  .comp-stage > .c-card, .comp-stage > .c-phone { position: static; width: auto !important; height: auto !important; left: auto; top: auto; }
  .comp-stage > .c-tag { position: static; align-self: flex-start; margin-bottom: -4px; }
  .comp-stage > .c-card:last-child, .comp-stage > .c-phone:last-child { margin-bottom: -28px; }
  .c-filler { height: 48px !important; }
  .c-opt { display: none; }
  .comp-stage [data-split] { display: block; }
  .comp-stage [data-split] > div { flex: none !important; border-right: 0 !important; }
}
@container comp (max-width: 879px) {
  .comp-wide .comp-stage > .c-card, .comp-wide .comp-stage > .c-phone { position: static; width: auto !important; height: auto !important; left: auto; top: auto; }
  .comp-wide .comp-stage > .c-tag { position: static; align-self: flex-start; margin-bottom: -4px; }
  .comp-wide .comp-stage > .c-card:last-child { margin-bottom: -28px; }
  .comp-wide .c-filler { height: 48px !important; }
}
@container comp (max-width: 499px) {
  .comp:not(.comp-wide) .comp-stage > .c-card, .comp:not(.comp-wide) .comp-stage > .c-phone { position: static; width: auto !important; height: auto !important; left: auto; top: auto; }
  .comp:not(.comp-wide) .comp-stage > .c-tag { position: static; align-self: flex-start; margin-bottom: -4px; }
  .comp:not(.comp-wide) .comp-stage > .c-card:last-child, .comp:not(.comp-wide) .comp-stage > .c-phone:last-child { margin-bottom: -28px; }
  .comp:not(.comp-wide) .c-opt { display: none; }
  .comp:not(.comp-wide) .comp-stage [data-split] { display: block; }
  .comp:not(.comp-wide) .comp-stage [data-split] > div { flex: none !important; border-right: 0 !important; }
}

/* Entrance: cards rise 12px and fade in, staggered 80ms, once. Only when JS has set data-anim (no JS: everything visible). */
.comp[data-anim] .c-card, .comp[data-anim] .c-tag, .comp[data-anim] .c-phone { opacity: 0; transform: translateY(12px); }
.comp[data-anim].is-in .c-card, .comp[data-anim].is-in .c-tag, .comp[data-anim].is-in .c-phone { animation: comp-rise 420ms cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes comp-rise { to { opacity: 1; transform: none; } }
.comp-hero.is-in .c-pill-check { animation: comp-pulse 700ms ease-in-out 900ms 1; }
@keyframes comp-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.14); } }
.c-pill-check { display: inline-block; transform-origin: center; }
.c-btn-approve { transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease; }
.c-btn-approve.is-pressed { transform: translateY(1px) scale(.985); background: #0B3997 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) {
  .comp[data-anim] .c-card, .comp[data-anim] .c-tag, .comp[data-anim] .c-phone { opacity: 1; transform: none; animation: none !important; }
  .comp-hero.is-in .c-pill-check { animation: none; }
  .c-btn-approve { transition: none; }
}

/* Money-out sequence: one sticky composition panel with the five cards stacked and crossfading. */
/* The five cards share one grid cell, so the panel's height is the tallest card (never less than the 600-unit design) and
   does not change as steps activate or fonts load. */
.seq-panel .comp-stage { aspect-ratio: auto; display: grid; min-height: max(calc(600 * var(--u)), 600px); }
.seq-panel .seq-card, .seq-panel .seq-card[data-active] { grid-area: 1 / 1; position: relative; inset: auto; display: flex; align-items: center; justify-content: center; padding: calc(40 * var(--u)); opacity: 0; transition: opacity 200ms ease; }
.seq-panel .seq-card[data-active] { opacity: 1; }
.seq-panel .seq-card .c-card { position: relative; width: 100% !important; max-width: calc(880 * var(--u)); }
.seq-panel .seq-card .c-card[data-card="invoice"] { max-width: calc(640 * var(--u)); }
.seq-panel .seq-card .c-filler { height: calc(40 * var(--u)); }
@media (prefers-reduced-motion: reduce) { .seq-panel .seq-card { transition: none; } }
/* Inline (under 900px): each card in its own small panel under its step, stacked layout, no pinning. */
.seq-mini .comp-stage { --u: 1px; aspect-ratio: auto; padding: 16px; display: block; }
.seq-mini .comp-stage > .c-card { position: static; width: auto !important; margin-bottom: -28px; }
.seq-mini .c-opt { display: none; }
.seq-mini .c-filler { height: 40px !important; }
.seq-mini .comp-stage [data-split] { display: block; }
.seq-mini .comp-stage [data-split] > div { flex: none !important; border-right: 0 !important; }
@media (max-width: 719px) { .seq-mini .c-tbl { font-size: max(12px, calc(13 * var(--u))); } }

/* Phones: each composition shows at most its two key cards; step numbers drop with the first card. */
@media (max-width: 719px) { .comp-stage > .c-m-hide { display: none !important; } .c-tag-n { display: none; } .comp-stage > .c-tag:first-child + .c-card, .comp-stage > .c-m-hide + .c-tag { margin-top: 0; } }
@container comp (max-width: 499px) { .comp:not(.comp-wide) .comp-stage > .c-m-hide { display: none !important; } }