@property --warm { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---- scenes: copy beside the real app, alternating sides, lit from above ---- */
.scene-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.scene.flip .scene-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.scene.flip .scene-copy { order: 2; }
.scene-copy h2 { font-size: clamp(38px, 4.6vw, 64px); }
.scene-copy .lede { margin-top: 22px; max-width: 34em; }
.scene-visual { margin: 0; position: relative; display: grid; place-items: center; padding: clamp(28px, 4vw, 56px) 0; }
.scene-visual::before {
  content: ""; position: absolute; inset: -8% -4% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 55% at 50% 30%, rgba(47, 134, 255, 0.16), transparent 72%);
}
.scene-visual img { width: min(100%, 560px); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)); }
.scene#grid .scene-visual img { width: min(100%, 440px); }

.facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; color: var(--chalk-2); max-width: 34em; }
.facts li { padding-left: 20px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 2px; border-radius: 2px; background: var(--chalk-3); }
.facts b { color: var(--chalk); font-weight: 600; }
.facts.compact { gap: 8px; margin-top: 22px; font-size: 15.5px; }
kbd.inline { min-width: 24px; height: 24px; font-size: 12.5px; border-radius: 6px; padding: 0 6px; vertical-align: middle; }
code { font: 500 0.92em/1 var(--mono); color: var(--chalk); background: rgba(255, 255, 255, 0.07); padding: 3px 6px; border-radius: 6px; }

/* the shelf, drawn large at the edge of a screen */
.edge-screen {
  position: relative; width: min(100%, 560px); aspect-ratio: 4 / 3.1; border-radius: 22px;
  background: radial-gradient(110% 90% at 30% 0%, #1a2333, #0e1118 60%, #0a0b0e);
  border: 10px solid #050506; outline: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, 0.9); overflow: hidden;
}
/* a real chart window behind the shelf, a step out of focus */
.edge-win {
  position: absolute; inset: 18px 120px 18px 18px; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column;
  background: #111214; border: 1px solid rgba(255, 255, 255, 0.11); filter: blur(0.6px) brightness(0.8);
}
.edge-win header { height: 18px; flex: none; display: flex; align-items: center; gap: 5px; padding: 0 8px; background: #1b1c1f; }
.edge-win header i { width: 6px; height: 6px; border-radius: 50%; background: #ff5f57; opacity: 0.75; }
.edge-win header i:nth-child(2) { background: #febc2e; }
.edge-win header i:nth-child(3) { background: #28c840; }
.edge-win header b { margin-left: 6px; font: 600 11px/1 var(--text); color: var(--chalk-3); }
.edge-win .body { position: relative; flex: 1; }
.edge-win svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.shelf.static { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); z-index: 2; width: 220px; }
.shelf.static .tile { cursor: default; }
.shelf.static .tile:hover { transform: none; }
.shelf-figure.in .shelf.static { animation: wing 0.9s var(--land) both; }
@keyframes wing { from { transform: translate(100%, -50%); } to { transform: translate(0, -50%); } }

/* ---- everything else ---- */
.more-grid { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 36px; }
.specs div { border-top: 1px solid var(--rim); padding-top: 18px; }
.specs dt { font: 650 18px/1.25 var(--display); letter-spacing: -0.01em; }
.specs dd { margin: 8px 0 0; color: var(--chalk-2); font-size: 15.5px; line-height: 1.55; }
.more-visual { margin: 0; }
.more-visual img { width: 100%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)); }
.works { margin-top: clamp(56px, 7vw, 96px); padding-top: 28px; border-top: 1px solid var(--rim); font: 500 clamp(18px, 1.7vw, 22px)/1.5 var(--display); color: var(--chalk-2); max-width: 46em; }

/* ---- pricing: a ticket with a stub ---- */
.ticket {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  border-radius: 28px; background: linear-gradient(180deg, #131418, #0d0e10);
  border: 1px solid var(--rim-strong); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.ticket::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 80% at 15% 0%, rgba(255, 255, 255, 0.05), transparent 70%); }
.ticket-main { padding: clamp(36px, 5vw, 64px); position: relative; }
.ticket-main h2 { font-size: clamp(38px, 4.6vw, 60px); }
.ticket-main .lede { margin-top: 18px; }
.ticket-stub {
  position: relative; padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  border-left: 2px dashed rgba(240, 240, 235, 0.16);
}
.ticket-stub::before, .ticket-stub::after { /* the punched notches */
  content: ""; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--stage);
  border: 1px solid var(--rim-strong);
}
.ticket-stub::before { top: -15px; }
.ticket-stub::after { bottom: -15px; }
.price { font: 750 clamp(30px, 3.4vw, 44px)/1 var(--display); letter-spacing: -0.03em; }
.price small { font-size: 0.45em; color: var(--chalk-3); font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.ticket-stub .btn { justify-content: center; }
.ticket-stub small { color: var(--chalk-3); font-size: 13.5px; }
.btn[aria-disabled="true"] { background: rgba(255, 255, 255, 0.08); color: var(--chalk-2); box-shadow: none; cursor: default; transform: none; }

/* ---- questions ---- */
.qa-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.qa-wrap h2 { font-size: clamp(38px, 4.6vw, 60px); position: sticky; top: 40px; }
.qa details { border-top: 1px solid var(--rim); }
.qa details:last-child { border-bottom: 1px solid var(--rim); }
.qa summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font: 600 clamp(17px, 1.5vw, 20px)/1.35 var(--display); letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; margin-top: -8px;
  border-right: 2px solid var(--chalk-3); border-bottom: 2px solid var(--chalk-3); transform: rotate(45deg);
  transition: transform 0.3s var(--ease-out), margin 0.3s var(--ease-out);
}
.qa details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.qa summary:hover { color: #fff; }
.qa details p { padding: 0 40px 24px 0; color: var(--chalk-2); max-width: var(--measure); }

/* ---- close ---- */
.close-inner { text-align: center; display: grid; justify-items: center; gap: 22px; }
.close-mark { width: 96px; height: 96px; color: var(--chalk); }
.close h2 { font-size: clamp(56px, 8.6vw, 6rem); font-weight: 800; letter-spacing: -0.04em; }

/* ---- one reveal: things enter from the wing (the right edge) ---- */
.js .reveal { opacity: 0; transform: translateX(48px); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .scene-grid, .scene.flip .scene-grid, .more-grid, .qa-wrap { grid-template-columns: 1fr; }
  .scene.flip .scene-copy { order: 0; }
  .ticket { grid-template-columns: 1fr; }
  .ticket-stub { border-left: 0; border-top: 2px dashed rgba(240, 240, 235, 0.16); padding: clamp(36px, 5vw, 64px); }
  .ticket-stub::before, .ticket-stub::after { left: auto; top: -15px; }
  .ticket-stub::before { left: -15px; }
  .ticket-stub::after { right: -15px; bottom: auto; }
  .qa-wrap h2 { position: static; }
}
@media (max-width: 560px) {
  .specs { grid-template-columns: 1fr; }
  .edge-screen { aspect-ratio: 4 / 4.2; }
  .shelf.static { width: 170px; gap: 7px; padding: 10px; }
  .shelf.static .tile { padding: 7px; gap: 5px; }
  .shelf.static .tile .mini { height: 34px; }
  .edge-win { right: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .shelf-figure.in .shelf.static { animation: none; }
}

/* ---- not a snapping app: one table, the TradeStage column lit from above ---- */
.versus {
  position: relative; margin-top: clamp(36px, 4vw, 52px); border-radius: 28px; overflow: hidden;
  border: 1px solid var(--rim-strong); background: linear-gradient(180deg, #131418, #0d0e10);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.versus::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; pointer-events: none;
  background: radial-gradient(70% 45% at 50% 0%, rgba(47, 134, 255, 0.16), transparent 75%);
  border-left: 1px solid var(--rim);
}
.vs-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.vs-row + .vs-row { border-top: 1px solid var(--rim); }
.vs-row > * { margin: 0; padding: clamp(18px, 2vw, 24px) clamp(22px, 3vw, 40px); }
.vs-row > :first-child { color: var(--chalk-3); }
.vs-row > :last-child { color: var(--chalk); font-weight: 550; }
.vs-head > * { font: 650 15px/1 var(--display); letter-spacing: -0.005em; padding-top: 26px; padding-bottom: 22px; }
.vs-head .wordmark { font-size: 22px; }
.vs-note { margin-top: 22px; color: var(--chalk-3); font-size: 15.5px; }
@media (max-width: 640px) {
  .versus::before { display: none; }
  .vs-row { grid-template-columns: 1fr; }
  .vs-head { display: none; }
  .vs-row > :first-child { padding-bottom: 4px; font-size: 15px; }
  .vs-row > :first-child::before { content: "Snapping app: "; }
  .vs-row > :last-child { padding-top: 0; }
  .vs-row > :last-child::before { content: "TradeStage: "; color: var(--cue-hot); }
}
.scene#pocket .scene-visual img { width: min(100%, 560px); }