.tryouts-hero { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:clamp(32px,6vw,72px); border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(35,104,255,.18),rgba(227,171,45,.07)),var(--panel); box-shadow:var(--shadow); }
.tryouts-hero-copy { max-width:700px; }
.back-link { display:inline-block; margin-bottom:34px; color:var(--muted); text-decoration:none; font-weight:700; }
.back-link:hover { color:var(--gold); }
.tryouts-hero h1 { max-width:720px; margin-bottom:20px; font-size:clamp(2.8rem,6vw,5.6rem); letter-spacing:-.055em; }
.tryouts-lede { max-width:650px; color:var(--muted); font-size:1.12rem; line-height:1.65; }
.tryouts-hero-logo { width:min(31vw,300px); filter:drop-shadow(0 28px 46px rgba(0,0,0,.45)); }
.sport-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.sport-pills span { padding:8px 12px; border:1px solid rgba(227,171,45,.45); border-radius:999px; color:#f2c45c; font-size:.82rem; font-weight:800; }
.tryouts-intro { max-width:720px; margin:72px auto 34px; text-align:center; }
.tryouts-intro h2 { margin-bottom:14px; }
.tryouts-intro > p:last-child { color:var(--muted); font-size:1.05rem; line-height:1.65; }
.screenshot-grid { display:grid; gap:18px; }
.screenshot-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(22px,5vw,64px); padding:clamp(20px,4vw,42px); border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(35,104,255,.12),rgba(255,255,255,.025)); }
.screenshot-card-reverse .screenshot-link { order:2; }
.screenshot-link { position:relative; display:block; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.16); background:#08111d; box-shadow:0 20px 48px rgba(0,0,0,.3); }
.screenshot-link img { display:block; width:100%; max-height:540px; object-fit:cover; object-position:top; transition:transform .25s ease,filter .25s ease; }
.screenshot-link span { position:absolute; right:12px; bottom:12px; padding:8px 10px; border-radius:999px; background:rgba(5,7,12,.82); color:white; font-size:.75rem; font-weight:800; }
.screenshot-link:hover img, .screenshot-link:focus img { transform:scale(1.025); filter:brightness(1.08); }
.screenshot-copy { max-width:470px; }
.feature-number { margin-bottom:12px; color:var(--gold); font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.screenshot-copy h3 { margin-bottom:14px; font-size:clamp(1.55rem,3vw,2.3rem); letter-spacing:-.03em; }
.screenshot-copy > p:last-child { color:var(--muted); line-height:1.7; }
.connection-section { margin:72px auto 18px; padding:clamp(28px,5vw,54px); border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(35,104,255,.13),rgba(255,255,255,.025)); }
.connection-section > h2 { max-width:720px; margin-bottom:14px; }
.connection-lede { max-width:780px; color:var(--muted); line-height:1.7; }
.connection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:28px; }
.connection-card { padding:22px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.04); }
.connection-step { color:var(--gold); font-size:.8rem; font-weight:800; letter-spacing:.16em; }
.connection-card h3 { margin:18px 0 10px; font-size:1.12rem; }
.connection-card p { margin:0; color:var(--muted); line-height:1.6; }
.subscription-section { margin:18px auto; padding:clamp(28px,5vw,54px); border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,rgba(227,171,45,.1),rgba(35,104,255,.1)); }
.subscription-section > h2 { max-width:760px; margin-bottom:14px; }
.subscription-lede { max-width:790px; color:var(--muted); line-height:1.7; }
.plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:26px; }
.plan-card { padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(5,7,12,.38); }
.plan-card h3 { margin:0 0 8px; font-size:1.2rem; }
.plan-price { margin:0 0 12px; color:var(--gold); font-size:1.45rem; font-weight:800; }
.plan-card p:last-child { margin:0; color:var(--muted); line-height:1.6; }
.subscription-note { margin:20px 0 0; color:var(--muted); font-size:.92rem; line-height:1.6; }
.tryouts-callout { margin-top:18px; padding:clamp(28px,5vw,54px); border:1px solid rgba(227,171,45,.35); border-radius:var(--radius); background:linear-gradient(135deg,rgba(227,171,45,.13),rgba(35,104,255,.1)); }
.tryouts-callout h2 { max-width:600px; }
.tryouts-callout > p:not(.section-label) { max-width:680px; color:var(--muted); line-height:1.65; }
.tryouts-callout .button { margin-top:10px; }
.lightbox { position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease,visibility .2s ease; }
.lightbox:target { opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.86); }
.lightbox-panel { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:min(92vw,620px); max-height:94vh; }
.lightbox-panel img { display:block; max-width:100%; max-height:84vh; width:auto; border:1px solid rgba(255,255,255,.2); border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.lightbox-close { color:white; text-decoration:none; font-weight:800; }
@media (max-width:900px) { .connection-grid { grid-template-columns:1fr; } }
@media (max-width:720px) { .tryouts-hero { display:block; padding:28px; } .tryouts-hero-logo { display:block; width:180px; margin:32px auto 0; } .tryouts-hero h1 { font-size:clamp(2.6rem,12vw,4.4rem); } .screenshot-card,.plan-grid { grid-template-columns:1fr; gap:26px; } .screenshot-card-reverse .screenshot-link { order:0; } .screenshot-copy { max-width:none; } }