/* SIMUL8OR PLAY / GAME LANDING LAYER — v0.3 kit.
   Breakpoints are CONTAINER queries: .pl is a container, so the layer lays out
   at the width of the page frame it sits in (canvas artboards, embeds, real
   page) rather than the browser viewport.
   Requires s8-tokens.css + s8-ui.css. Nothing here redefines a token.
   Scope: the marketing page that fronts the trading game (hero, app frame,
   three-step explainer, closing CTA). */
.pl{container-type:inline-size;--pl-w:1440px;--pl-gap:clamp(56px,7vw,104px);background:var(--s8-bg);color:var(--s8-fg);font-family:var(--s8-sans);font-size:var(--s8-fs-md);line-height:var(--s8-lh)}
.pl *{box-sizing:border-box}
.pl a{color:var(--s8-accent-fg);text-decoration:none}
.pl a:hover{color:#fff}
.pl-wrap{max-width:var(--pl-w);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.pl-wrap--wide{max-width:1320px}
.pl-sec{padding-top:var(--pl-gap)}
.pl-band{margin-top:var(--pl-gap);padding:var(--pl-gap) 0;background:var(--s8-panel);border-top:1px solid var(--s8-line);border-bottom:1px solid var(--s8-line)}
.pl-band .pl-sec{padding-top:0}
.pl-rule{height:1px;background:var(--s8-line)}

/* ── kicker / eyebrow ──────────────────────────────── */
.pl-kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-3)}
.pl-kick i{width:6px;height:6px;border-radius:50%;background:var(--s8-up);box-shadow:0 0 0 3px var(--s8-up-tint);flex:none}
.pl-kick--accent{color:var(--s8-accent-fg)}
.pl-kick--rule::after{content:"";width:44px;height:1px;background:var(--s8-line-2)}

/* ── hero ──────────────────────────────────────────── */
.pl-hero{padding-top:clamp(40px,6vw,84px)}
.pl-hero--c{text-align:center;display:flex;flex-direction:column;align-items:center}
.pl-hero--split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
@container(max-width:980px){.pl-hero--split{grid-template-columns:1fr}}
.pl-title{margin:var(--s8-4) 0 0;font-size:clamp(38px,5.4vw,70px);line-height:.98;letter-spacing:-.03em;font-weight:600;color:#fff;text-transform:uppercase;text-wrap:balance}
.pl-title--sm{font-size:clamp(32px,4vw,52px)}
.pl-title em{font-style:normal;color:var(--s8-accent)}
.pl-deck{margin:var(--s8-5) 0 0;max-width:600px;font-size:clamp(15px,1.4vw,19px);color:var(--s8-fg-2);text-wrap:pretty}
.pl-hero--c .pl-deck{margin-left:auto;margin-right:auto}
.pl-ctas{display:flex;flex-wrap:wrap;gap:var(--s8-3);align-items:center;margin-top:var(--s8-6)}
.pl-hero--c .pl-ctas{justify-content:center}
/* the one primary action on the page: green, because starting the game is a
   buy-side act in the product's own language. */
.pl-play{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 var(--s8-6);border:0;border-radius:var(--s8-r);background:var(--s8-buy);color:#fff;font:inherit;font-size:var(--s8-fs-base);font-weight:600;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:background var(--s8-t-fast) var(--s8-ease),transform var(--s8-t-fast) var(--s8-ease)}
.pl a.pl-play{color:#fff}
.pl a.pl-play:hover{background:var(--s8-buy-hi);color:#fff}
.pl-play:active{transform:translateY(1px)}
.pl-play svg{width:13px;height:13px;fill:currentColor;stroke:none;flex:none}
.pl-play--lg{height:52px;font-size:var(--s8-fs-lg);padding:0 var(--s8-7)}
.pl-note{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--s8-fg-4)}
.pl-chips{display:flex;flex-wrap:wrap;gap:var(--s8-2);margin-top:var(--s8-5)}
.pl-hero--c .pl-chips{justify-content:center}
.pl-chip{display:inline-flex;align-items:center;gap:7px;height:var(--s8-h-sm);padding:0 11px;border:1px solid var(--s8-line);border-radius:var(--s8-r-pill);background:var(--s8-inset);font-size:var(--s8-fs-xs);font-weight:500;color:var(--s8-fg-3);white-space:nowrap}
.pl-chip svg{width:12px;height:12px;stroke:var(--s8-up);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── app frame: the product screenshot in its own chrome ── */
.pl-app{position:relative;border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);background:var(--s8-panel);overflow:hidden}
.pl-app__bar{display:flex;align-items:center;gap:var(--s8-3);height:var(--s8-h-lg);padding:0 var(--s8-4);background:var(--s8-panel-2);border-bottom:1px solid var(--s8-line)}
.pl-app__dots{display:flex;gap:6px;flex:none}
.pl-app__dots span{width:8px;height:8px;border-radius:50%;background:var(--s8-line-3)}
.pl-app__t{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--s8-fg-4)}
.pl-app__t b{color:var(--s8-fg-2);font-weight:600}
.pl-app__live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-up)}
.pl-app__live i{width:6px;height:6px;border-radius:50%;background:var(--s8-up);flex:none}
.pl-app__b{aspect-ratio:16/9;background:var(--s8-inset)}
.pl-app__b image-slot{display:block;width:100%;height:100%}
/* glow variant: the single place the page borrows the reward glow language */
.pl-app--glow{box-shadow:0 0 0 1px var(--s8-accent-line),0 40px 90px -30px rgba(43,143,224,.32),var(--s8-pop-lg)}
.pl-app--flat{box-shadow:var(--s8-pop)}
.pl-stage{position:relative;padding-top:var(--s8-7)}
.pl-stage::before{content:"";position:absolute;inset:auto 0 0;top:12%;background:radial-gradient(60% 70% at 50% 40%,var(--s8-accent-tint),transparent 70%);pointer-events:none}
.pl-cap{display:flex;flex-wrap:wrap;gap:var(--s8-2) var(--s8-4);margin-top:var(--s8-3);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--s8-fg-4)}
.pl-cap span{display:flex;align-items:center;gap:var(--s8-4)}
.pl-cap span+span::before{content:"";width:1px;height:10px;background:var(--s8-line-2)}

/* ── section head ──────────────────────────────────── */
.pl-head{margin-bottom:var(--s8-7)}
.pl-head--c{text-align:center;display:flex;flex-direction:column;align-items:center}
.pl-h2{margin:var(--s8-3) 0 0;font-size:var(--s8-fs-3xl);line-height:1.12;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff;text-wrap:balance}
.pl-h2--caps{text-transform:uppercase;letter-spacing:-.02em}
.pl-sub{margin:var(--s8-3) 0 0;max-width:640px;font-size:var(--s8-fs-lg);color:var(--s8-fg-2);text-wrap:pretty}
.pl-head--c .pl-sub{margin-left:auto;margin-right:auto}

/* ── three steps: fused hairline grid ──────────────── */
.pl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
@container(max-width:860px){.pl-steps{grid-template-columns:1fr}}
.pl-steps--loose{gap:var(--s8-4);background:none;border:0;border-radius:0;overflow:visible}
.pl-step{position:relative;display:grid;align-content:start;gap:var(--s8-3);padding:var(--s8-6) var(--s8-5) var(--s8-7);background:var(--s8-panel);transition:background var(--s8-t) var(--s8-ease)}
.pl-step:hover{background:var(--s8-panel-2)}
.pl-steps--loose .pl-step{border:1px solid var(--s8-line);border-radius:var(--s8-r-lg)}
.pl-steps--loose .pl-step:hover{border-color:var(--s8-line-2)}
.pl-step__n{font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-display);line-height:1;letter-spacing:-.03em;font-weight:600;color:var(--s8-fg-4)}
.pl-step__tag{justify-self:start;display:inline-flex;align-items:center;height:var(--s8-h-xs);padding:0 8px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-sm);background:var(--s8-inset);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--s8-fg-3)}
.pl-step__t{margin:var(--s8-1) 0 0;font-size:var(--s8-fs-lg);font-weight:600;letter-spacing:var(--s8-ls-tight);color:#fff}
.pl-step__p{margin:0;font-size:var(--s8-fs-sm);color:var(--s8-fg-2);text-wrap:pretty}
.pl-list{margin:var(--s8-2) 0 0;padding:0;list-style:none;display:grid;gap:8px}
.pl-list li{position:relative;padding-left:var(--s8-4);font-size:var(--s8-fs-xs);color:var(--s8-fg-3);text-wrap:pretty}
.pl-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--s8-line-3)}
/* per-step accent: rail at the bottom + tinted tag. one hue per step, drawn
   from the semantic ramp, so the sequence reads left to right. */
.pl-step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--s8-line-2)}
.pl-step--1::after{background:var(--s8-up)}
.pl-step--1 .pl-step__n{color:var(--s8-up)}
.pl-step--1 .pl-step__tag{border-color:var(--s8-up-line);background:var(--s8-up-tint);color:var(--s8-up)}
.pl-step--2::after{background:var(--s8-accent)}
.pl-step--2 .pl-step__n{color:var(--s8-accent-fg)}
.pl-step--2 .pl-step__tag{border-color:var(--s8-accent-line);background:var(--s8-accent-tint);color:var(--s8-accent-fg)}
.pl-step--3::after{background:var(--s8-gold)}
.pl-step--3 .pl-step__n{color:var(--s8-gold-fg)}
.pl-step--3 .pl-step__tag{border-color:var(--s8-gold-line);background:var(--s8-gold-tint);color:var(--s8-gold-fg)}

/* ── flow variant: numbered rows, connected ────────── */
.pl-flow{display:grid;gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.pl-flow__row{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,.72fr);gap:var(--s8-6);align-items:start;padding:var(--s8-6) var(--s8-6);background:var(--s8-panel);transition:background var(--s8-t) var(--s8-ease)}
.pl-flow__row:hover{background:var(--s8-panel-2)}
@container(max-width:900px){.pl-flow__row{grid-template-columns:56px minmax(0,1fr);gap:var(--s8-4)}.pl-flow__side{grid-column:2}}
.pl-flow__n{position:relative;font-family:var(--s8-mono);font-variant-numeric:tabular-nums;font-feature-settings:var(--s8-num-feat);font-size:var(--s8-fs-2xl);line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--s8-fg-4)}
.pl-flow__n::after{content:"";position:absolute;left:50%;top:calc(100% + 12px);bottom:-40px;width:1px;background:var(--s8-line-2)}
.pl-flow__row:last-child .pl-flow__n::after{display:none}
.pl-flow__side{display:grid;gap:8px;align-content:start;padding-left:var(--s8-6);border-left:1px solid var(--s8-line)}
@container(max-width:900px){.pl-flow__side{padding-left:0;border-left:0}}

/* ── closing CTA ───────────────────────────────────── */
.pl-close{margin-top:var(--pl-gap);border-top:1px solid var(--s8-line);background:radial-gradient(110% 150% at 50% 0%,var(--s8-accent-tint),transparent 62%)}
.pl-close__in{max-width:var(--pl-w);margin:0 auto;padding:clamp(44px,6vw,84px) clamp(20px,4vw,40px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s8-4)}
.pl-close__in--row{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center;justify-content:space-between;gap:var(--s8-6)}
.pl-close h2{margin:0;font-size:var(--s8-fs-2xl);line-height:1.15;letter-spacing:-.02em;font-weight:600;color:#fff;text-transform:uppercase}
.pl-close p{margin:0;color:var(--s8-fg-2)}
.pl-close p b{color:var(--s8-fg);font-weight:600}
.pl-close--gold{background:radial-gradient(110% 150% at 50% 0%,var(--s8-gold-tint),transparent 62%)}


/* Production landing page adapts the mockup's image slot to its existing demo video. */
.pl-app__b video{display:block;width:100%;height:100%;object-fit:cover}
@container(max-width:620px){.pl-app__bar{gap:var(--s8-2)}.pl-app__dots,.pl-app__live{display:none}.pl-cap{display:grid}}