/* TrustPay site: "Both sides see the truth" (#sides). Section-scoped (linked from _src/sides.html; sides.js drives it).
   One deal on one story clock: Alex's phone (buyer) and Sam's phone (seller), one shared step control between them.
   v5 (3 Oct): no people art, calm motion (no pops, pulses or flying coin), status icons bare, forest money panel.
   Locked = sun, paid = mint (only after the release beat), brand = actions.
   Classes: .sd-* (layout + control), .ap-* (the app screens). */

.sd-sec .sub { max-width: 40rem; }
.sd {
  --phone-w: 352px;
  position: relative; display: grid; grid-template-columns: minmax(0, var(--phone-w)) 176px minmax(0, var(--phone-w)); justify-content: center;
  gap: clamp(28px, 3.4vw, 52px); align-items: start; margin-top: clamp(44px, 5vw, 68px);
}
.sd-who { display: none; }
.sd-who button { border: 0; }
.sd-side { display: flex; flex-direction: column; min-width: 0; }
.sd-label { display: flex; align-items: center; gap: 10px; height: 52px; margin: 0 0 14px; padding: 0 4px; }
.sd-label b { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.025em; }
.sd-label small { color: var(--muted); font-size: 15px; }
.sd-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; font-family: var(--display); font-weight: 700; }

/* r12 (client: "not even a phone ratio"): iPhone 17 Pro to scale. Body 150.0 x 71.9 mm = 434 x 906 pt around the
   402 x 874 pt display (6.3", 1206 x 2622 px @3x); display corner 62 pt (continuous), body corner 78 pt;
   aluminium band 4 pt + black glass edge 12 pt; Dynamic Island 125 x 37 pt, 11 pt from the top; status bar 54 pt,
   home indicator 139 x 5 pt. Everything inside the screen is laid out in those points (--p = 1 pt). */
.sd-phone {
  --k: calc(var(--phone-w) / 434);
  position: relative; width: var(--phone-w); max-width: 100%; margin: 0 auto; padding: calc(4 * var(--k));
  border-radius: calc(78 * var(--k));
  background: linear-gradient(135deg, #EEF0EF 0%, #C7CCCA 22%, #E9ECEA 48%, #B9BFBC 78%, #DADEDC 100%);
}
/* side keys: Action + volume (left), side button + Camera Control (right), as fills, no lines */
.sd-phone::before, .sd-phone::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: calc(3 * var(--k)); z-index: -1;
}
.sd-phone::before {
  left: calc(-2.4 * var(--k));
  background: linear-gradient(180deg, transparent 17.6%, #BCC1BF 17.6%, #BCC1BF 21.2%, transparent 21.2%, transparent 25.8%, #BCC1BF 25.8%,
    #BCC1BF 32.6%, transparent 32.6%, transparent 35.2%, #BCC1BF 35.2%, #BCC1BF 42%, transparent 42%);
}
.sd-phone::after {
  right: calc(-2.4 * var(--k));
  background: linear-gradient(180deg, transparent 27.6%, #BCC1BF 27.6%, #BCC1BF 38.4%, transparent 38.4%, transparent 59%, #C3C8C6 59%, #C3C8C6 66.4%, transparent 66.4%);
}
.sd-glass { position: relative; container-type: inline-size; padding: calc(12 * var(--k)); border-radius: calc(74 * var(--k)); background: #0A0E0D; }

/* ---------------------------------------------------------------- the app screen, in points */
.sd-scr {
  --p: calc(100cqw / 402);
  position: relative; display: flex; flex-direction: column; aspect-ratio: 402 / 874; padding: 0 calc(20 * var(--p)) calc(8 * var(--p));
  border-radius: calc(62 * var(--p)); overflow: hidden;
  background: var(--ground); color: var(--ink); font: 400 calc(17 * var(--p))/1.3 var(--sans); letter-spacing: -.01em;
}
.ph-bar { position: relative; display: flex; align-items: center; justify-content: space-between; flex: none; height: calc(54 * var(--p));
  margin: 0 calc(-20 * var(--p)); padding: calc(4 * var(--p)) calc(30 * var(--p)) 0 calc(48 * var(--p)); }
.ph-time { font-size: calc(17 * var(--p)); font-weight: 650; letter-spacing: -.02em; }
.ph-island { position: absolute; left: 50%; top: calc(11 * var(--p)); width: calc(125 * var(--p)); height: calc(37 * var(--p)); transform: translateX(-50%);
  border-radius: 99px; background: #000; }
.ph-sys { display: inline-flex; align-items: center; gap: calc(6 * var(--p)); color: var(--ink); }
.ph-sys svg { width: calc(18 * var(--p)); height: calc(12 * var(--p)); fill: currentColor; }
.ph-sys .ph-batt { width: calc(27 * var(--p)); }
.ph-home { display: block; flex: none; width: calc(139 * var(--p)); height: calc(5 * var(--p)); margin: calc(20 * var(--p)) auto 0; border-radius: 9px; background: var(--ink); }

.sd.is-swap :is([data-a-big], [data-s-big], [data-chip-t], [data-work-n], [data-a-head], [data-s-head], [data-a-note], [data-s-note]) { animation: sd-swap .15s linear; }
.sd.is-swap .ap-bar i { transition: transform .15s linear; }
@keyframes sd-swap { from { opacity: 0; } to { opacity: 1; } }

.ap-top { display: flex; align-items: center; justify-content: space-between; height: calc(44 * var(--p)); margin-top: calc(6 * var(--p)); }
.ap-back { display: inline-flex; align-items: center; gap: calc(2 * var(--p)); margin-left: calc(-6 * var(--p)); color: var(--brand-text); font-size: calc(17 * var(--p)); font-weight: 500; }
.ap-back .i { width: calc(22 * var(--p)); height: calc(22 * var(--p)); }
.ap-me { display: grid; place-items: center; width: calc(36 * var(--p)); height: calc(36 * var(--p)); border-radius: 50%; font-size: calc(16 * var(--p)); font-weight: 650; }
.ap-h { margin-top: calc(14 * var(--p)); font-family: var(--sans); font-size: calc(32 * var(--p)); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }

.ap-chip { display: inline-flex; align-self: flex-start; align-items: center; height: calc(30 * var(--p)); margin-top: calc(12 * var(--p)); padding: 0 calc(12 * var(--p));
  border-radius: 99px; background: var(--field); color: var(--muted); font-size: calc(16 * var(--p)); font-weight: 600;
  transition: background-color .4s var(--ease), color .4s var(--ease); }
.ap-chip-l { display: inline-flex; align-items: center; gap: calc(6 * var(--p)); font-style: normal; }
.ap-chip .i { width: calc(16 * var(--p)); height: calc(16 * var(--p)); }
.ap-chip .i + .i { display: none; }
.sd[data-paid] .ap-chip .i { display: none; }
.sd[data-paid] .ap-chip .i + .i { display: block; }
.sd:not([data-sub="funding"]) .ap-chip { background: var(--lock-soft); color: var(--lock-text); }
.sd[data-paid] .ap-chip { background: var(--paid-soft) !important; color: var(--paid-text) !important; }

/* the money: one panel, label, big number, one bar (locked sun / paid green) */
.ap-money { display: grid; gap: calc(12 * var(--p)); margin-top: calc(28 * var(--p)); padding: calc(22 * var(--p)) calc(22 * var(--p)) calc(24 * var(--p));
  border-radius: calc(28 * var(--p)); background: var(--ground-2); }
.ap-mk { color: var(--muted); font-size: calc(16 * var(--p)); font-weight: 500; }
.ap-money > b { font-size: calc(46 * var(--p)); font-weight: 680; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.ap-money > b i { margin-left: calc(6 * var(--p)); font-style: normal; font-size: calc(17 * var(--p)); font-weight: 520; letter-spacing: 0; color: var(--muted); }
.ap-bar { position: relative; display: block; height: calc(10 * var(--p)); margin-top: calc(4 * var(--p)); border-radius: 99px; background: var(--field); overflow: hidden; }
.ap-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 99px; transform-origin: 0 50%; }
.ap-bar-l { background: var(--lock); transform: scaleX(calc(var(--l, 0) + var(--pd, 0))); }
.ap-bar-p { background: var(--paid); transform: scaleX(var(--pd, 0)); }

/* the work: five pages as five segments (sides.js: .is-now building, .is-on delivered) */
.ap-work { display: grid; gap: calc(14 * var(--p)); margin-top: calc(12 * var(--p)); padding: calc(20 * var(--p)) calc(22 * var(--p)) calc(22 * var(--p));
  border-radius: calc(28 * var(--p)); background: var(--ground-2); }
.ap-wh { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8 * var(--p)); }
.ap-wh b { font-size: calc(17 * var(--p)); font-weight: 640; }
.ap-wh small { color: var(--muted); font-size: calc(16 * var(--p)); }
.ap-pages { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(6 * var(--p)); }
.ap-pages li { height: calc(8 * var(--p)); border-radius: 99px; background: var(--field); transition: background-color .35s var(--ease); }
.ap-pages li.is-now { background: var(--lock); }
html.motion .ap-pages li.is-now { animation: ap-pulse 1.1s var(--ease) infinite alternate; }
@keyframes ap-pulse { from { opacity: 1; } to { opacity: .45; } }
.ap-pages li.is-on { background: var(--brand); animation: none; }

/* the deal's terms: two rows, label left, value right */
.ap-terms { display: grid; margin-top: calc(12 * var(--p)); padding: calc(6 * var(--p)) calc(22 * var(--p)); border-radius: calc(28 * var(--p)); background: var(--ground-2); }
.ap-terms div { display: flex; justify-content: space-between; align-items: center; height: calc(50 * var(--p)); }
.ap-terms dt { color: var(--muted); font-size: calc(16 * var(--p)); }
.ap-terms dd { margin: 0; font-size: calc(17 * var(--p)); font-weight: 600; }

/* the one action slot, pinned to the bottom like the app: the button only while it applies, else a status line */
.ap-act { display: grid; align-items: end; min-height: calc(56 * var(--p)); margin-top: auto; }
.ap-act > * { grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s linear 0s; }
.ap-btn { height: calc(56 * var(--p)); border: 0; border-radius: 99px; background: var(--brand); color: var(--on-brand); font: 650 calc(17 * var(--p))/1 var(--sans);
  letter-spacing: -.01em; pointer-events: none; transition: opacity .3s var(--ease), transform .16s var(--ease), background-color .2s var(--ease); }
.ap-btn.is-press { transform: scale(.98); background: var(--brand-hover); }
.ap-note { align-self: center; color: var(--muted); font-size: calc(16 * var(--p)); font-weight: 500; line-height: 1.35; text-align: center; text-wrap: balance; }
.ap-act:not(.is-btn) .ap-btn, .ap-act.is-btn .ap-note { opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
.ap-act:not(.is-btn) .ap-btn { transform: translate3d(0, 6px, 0); }

/* ---------------------------------------------------------------- the shared step control */
.sd-ctl { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 18px; align-self: center; padding-top: 66px; }
.sd-steps { position: relative; display: grid; gap: 4px; }
.sd-steps button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px 8px 6px; border: 0; border-radius: 99px;
  background: transparent; color: var(--muted); text-align: left; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease);
}
.sd-steps button:hover { background: var(--ground-2); }
.sd-steps button[aria-pressed="true"] { background: var(--ground-2); color: var(--ink); }
.sd-node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--ground-2); color: var(--muted);
  font: 650 13px/1 var(--sans); font-style: normal; transition: background-color .35s var(--ease), color .35s var(--ease);
}
.sd-steps b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sd-steps li.is-done .sd-node { background: var(--ink); color: var(--ground); }
.sd-steps li.is-now .sd-node { background: var(--brand); color: var(--on-brand); }
.sd-steps li:nth-child(1).is-now .sd-node, .sd-steps li:nth-child(1).is-done .sd-node { background: var(--lock); color: #3A2600; }
.sd-steps li:nth-child(4).is-now .sd-node { background: var(--paid); color: #FFFFFF; }
.sd-rail { position: absolute; z-index: 0; left: 23px; width: 2px; border-radius: 2px; background: var(--field); pointer-events: none; }
.sd-rail i { position: absolute; inset: 0; border-radius: 2px; background: var(--ink-2); transform-origin: 50% 0; transform: scaleY(var(--r, 0)); }
.sd-replay {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border: 0; border-radius: 99px;
  background: transparent; color: var(--brand-text); font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color .25s var(--ease);
}
.sd-replay:hover { background: var(--brand-soft); }
.sd-replay .i { width: 17px; height: 17px; }

/* the coin: flies from Alex's panel to Sam's "Released to you" at the release beat (sides.js moves it) */
.sd-coin {
  position: absolute; z-index: 5; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  display: grid; place-items: center; background: var(--lock); color: #3A2600; font: 750 16px/1 var(--sans);
  opacity: 0; pointer-events: none; will-change: transform, opacity; transition: background-color .3s var(--ease), color .3s var(--ease);
}
.sd-coin.is-paid { background: var(--paid); color: #FFFFFF; }
.sd-coin i { font-style: normal; }

/* ---------------------------------------------------------------- tablet + phone: stacked, the control sticks on top */
@media (max-width: 1023px) {
  .sd { --phone-w: min(340px, calc(100vw - 48px)); grid-template-columns: minmax(0, var(--phone-w)); gap: 36px; max-width: 560px; }
  .sd-ctl { order: -1; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--pill-b, 80px) + 2px); flex-direction: row; align-items: center; gap: 4px;
    align-self: auto; padding: 6px; border-radius: 22px; background: var(--ground); }
  .sd-rail { display: none; }
  .sd-steps { flex: 1; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
  .sd-steps button { flex-direction: column; gap: 5px; padding: 8px 2px; border-radius: 14px; text-align: center; }
  .sd-steps b { font-size: 12.5px; }
  .sd-node { width: 26px; height: 26px; font-size: 12px; }
  .sd-replay { flex: none; width: 40px; height: 40px; padding: 0; }
  .sd-replay span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sd-label { display: none; }
  .sd-who { display: flex; align-self: center; gap: 2px; padding: 4px; border-radius: 99px; background: var(--ground-2); margin: -12px auto -12px; }
  .sd-who button { height: 38px; padding: 0 18px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font: 600 14px/1 var(--sans); cursor: pointer;
    transition: background-color .25s var(--ease), color .25s var(--ease); }
  .sd-who button[aria-pressed="true"] { background: var(--ground); color: var(--ink); }
  .sd:not([data-who="sam"]) .sd-sam, .sd[data-who="sam"] .sd-alex { display: none; }
}

/* v5: no flying coin (the panels count the money across instead) */
.sd-coin { display: none !important; }