/* /try premium layer (matches /schools, /pricing, landing): grid texture + glows, pill eyebrow, gold gradient
   "Right here.", glassy step bar, framed practice area, dark gold-trimmed closing card.
   Positions the walkthrough arrows depend on are left alone (only paint and small spacing). */
.tryp { --gold: #fbbf24; --gold-2: #f59e0b; --deep: #120b1f; --edge: rgba(255, 255, 255, .12); }

/* ---- hero / playground background ---- */
.tryp .play { background: radial-gradient(900px 480px at 85% -10%, rgba(139, 92, 246, .5) 0%, transparent 62%), radial-gradient(640px 420px at 0% 100%, rgba(245, 158, 11, .12), transparent 70%), linear-gradient(165deg, var(--deep) 0%, #1d1235 55%, #26174a 100%); }
.tryp .play::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 10%, #000 10%, transparent 70%); }
.tryp .play .eyebrow { padding: 6px 13px 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); color: #d9cff3; font-size: .76rem; letter-spacing: .1em; }
.tryp .play h1 { letter-spacing: -.025em; }
.tryp .play h1 .hl { background: linear-gradient(92deg, #c4b5fd 0%, #e9d5ff 35%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0; }
.tryp .play-sub { color: #c9bfe0; }

/* ---- step bar ---- */
.tryp .tasks { padding: 8px 10px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid var(--edge); backdrop-filter: blur(6px); margin: 12px 0 14px; }
.tryp .tasks ol button { border-radius: 999px; }
.tryp .tasks ol button.now { box-shadow: 0 0 0 3px rgba(251, 191, 36, .14), 0 6px 18px rgba(245, 158, 11, .18); }
.tryp .task-count { color: #b3a7cf; font-weight: 500; }
.tryp .arrows-btn { color: #d9cff3; }

/* ---- practice area: a framed glass panel ---- */
.tryp .stage { padding: 14px; border-radius: 24px; background: rgba(255, 255, 255, .035); border: 1px solid var(--edge);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
.tryp .practice { border-radius: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 50px rgba(0, 0, 0, .4); }
.tryp .practice .pr-copy { background: linear-gradient(180deg, #8b5cf6, #7c3aed); }
.tryp .clip { border-radius: 14px; background: rgba(46, 35, 71, .75); }
.tryp .clip.empty { background: rgba(255, 255, 255, .02); }

/* ---- closing card ---- */
.tryp .tp-after { padding: 72px 0 88px; border-bottom: 0; }
.tp-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 28px 48px; padding: 48px 50px; border-radius: 28px; color: #ece6fa;
  background: radial-gradient(560px 320px at 100% 0%, rgba(139, 92, 246, .5), transparent 70%), radial-gradient(420px 260px at 0% 100%, rgba(245, 158, 11, .14), transparent 70%), linear-gradient(160deg, var(--deep) 0%, #26174d 100%);
  box-shadow: 0 30px 70px rgba(36, 27, 51, .3); }
.tp-card::before { content: ""; position: absolute; inset: 0; border-radius: 28px; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(251, 191, 36, .85), rgba(167, 139, 250, .3) 45%, rgba(255, 255, 255, .05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tp-glow { position: absolute; width: 480px; height: 480px; right: -120px; top: -260px; border-radius: 50%; filter: blur(80px); background: rgba(139, 92, 246, .45); pointer-events: none; }
.tp-card-copy, .tp-actions { position: relative; z-index: 1; }
.tp-card-copy { flex: 1 1 460px; }
.tp-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); color: #d9cff3; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tp-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .18); }
.tp-card h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.5rem); letter-spacing: -.02em; margin: 18px 0 10px; }
.tp-grad { background: linear-gradient(92deg, #c4b5fd 0%, #e9d5ff 35%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tp-card .lead { color: #c9bfe0; margin: 0; }
.tp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 18px 0 0; font-size: .92rem; color: #ece6fa; }
.tp-trust li { display: inline-flex; align-items: center; gap: 7px; }
.tp-trust li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: rgba(74, 222, 128, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%234ade80' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.tp-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 250px; }
.tp-btn-gold { background: linear-gradient(180deg, #fcd34d 0%, var(--gold-2) 100%); color: #2a1a03; border: 0; font-weight: 700; text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 26px rgba(245, 158, 11, .35); transition: transform .15s, filter .15s; }
.tp-btn-gold:hover { color: #2a1a03; filter: brightness(1.05); transform: translateY(-1px); }
.tp-actions .btn-outline-light { text-align: center; }
.tp-actions .btn-outline-light:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.tp-school { text-align: center; color: var(--gold); font-size: .92rem; font-weight: 600; text-decoration: none; margin-top: 2px; }
.tp-school:hover { color: #fcd34d; text-decoration: underline; }

@media (max-width: 760px) {
  .tryp .stage { padding: 10px; border-radius: 18px; }
  .tp-card { padding: 34px 22px; border-radius: 22px; }
  .tp-actions { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .tp-btn-gold { transition: none; } }