/* Practice, org and rights landing pages: the parts landing.css does not cover.
   Loaded after landing.css and uses its tokens (--red, --muted, --panel2, --line, --radius). */

/* Hero: a small signup link under the no-signup button, and the proof line */
.hero-alt { margin: -4px 0 12px; font-size: .9rem; color: var(--muted); }
.hero-alt a, .tiles-alt a, .proof a, .faq-try, .sample-how, .org-mail a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.proof { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.faq-try { white-space: nowrap; color: var(--text); }

/* N1: "What job are you interviewing for?" under the H1 */
.try-form { margin: 24px 0 14px; max-width: 560px; }
.try-form label { display: block; font-weight: 600; margin-bottom: 8px; }
.try-row { display: flex; gap: 10px; flex-wrap: wrap; }
.try-row input { flex: 1 1 240px; min-width: 0; padding: 13px 14px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .18); background: var(--panel2); color: var(--text); font: inherit; }
.try-row input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.try-row .btn { flex: 0 0 auto; }

/* Tiles go straight to a no-signup try */
.usecase-go { font-style: normal; font-size: .85rem; font-weight: 600; color: var(--red); margin-top: auto; }
.tiles-alt { margin: 18px 0 0; color: var(--muted); font-size: .9rem; }

/* N7: the sample scorecard's "What they did to you" and locked card */
.sample-did { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid rgba(56, 189, 248, .3); background: rgba(56, 189, 248, .05); }
.sample-did-label, .sample-lock-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; color: #7dd3fc; }
.sample-did p, .sample-lock p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.sample-lock { margin-top: 12px; padding: 14px; border-radius: var(--radius); border: 1px solid rgba(255, 46, 63, .3); background: var(--red-soft); }
.sample-lock-label { color: var(--red); }
.sample-blur { display: grid; gap: 8px; margin: 12px 0; filter: blur(4px); user-select: none; }
.sample-blur i { display: block; height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.sample-blur i:nth-child(1) { width: 92%; } .sample-blur i:nth-child(2) { width: 74%; } .sample-blur i:nth-child(3) { width: 84%; }
.sample-unlock { display: inline-block; text-decoration: none; padding: 9px 14px; border-radius: var(--radius); background: var(--red-btn); color: #fff; font-weight: 700; font-size: .9rem; }
.sample-ctas { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: center; margin: 20px auto 0; }
.sample-how { color: var(--muted); font-size: .92rem; }

/* N3: printable practice phrases */
.phrases { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; max-width: 760px; }
.phrases li { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.phrases li b { display: block; color: var(--text); font-size: 1.02rem; }
.phrases-note { color: var(--muted); font-size: .88rem; margin: 16px 0 0; }
@media print {
  body * { visibility: hidden; }
  #phrases, #phrases * { visibility: visible; color: #000 !important; }
  #phrases { position: absolute; left: 0; top: 0; width: 100%; background: #fff; }
  #phrases .btn { display: none; }
}

/* N9: org pages: trainer-view mock, data facts, the demo email link */
.org-mail { margin: -2px 0 12px; color: var(--muted); font-size: .92rem; }
.tv-mock { max-width: 760px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 20px; overflow-x: auto; }
.tv-mock h3 { margin: 0 0 4px; }
.tv-mock p { margin: 0 0 14px; color: var(--muted); font-size: .88rem; }
.tv-mock table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .9rem; }
.tv-mock th { text-align: left; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 6px 0; }
.tv-mock td { border-top: 1px solid var(--line); padding: 8px 8px 8px 0; color: #cbd5e1; }
.tv-mock .num { text-align: right; }
.tv-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.tv-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 100%; }
.tv-chip { padding: 4px 10px; border-radius: 999px; font-size: .82rem; border: 1px solid rgba(251, 191, 36, .3); background: rgba(251, 191, 36, .1); color: #fde68a; }
.tv-chip.ok { border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .1); color: #a7f3d0; }
.tv-cap { margin: 10px 0 0; color: var(--muted); font-size: .85rem; font-style: italic; }

/* Item 2.6: the sticky try bar on phones (shown by /js/practice.js) */
.try-bar { display: none; }
@media (max-width: 639px) {
  .d-only { display: none !important; }
  .try-row .btn { flex: 1 1 100%; }
  .try-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: block; padding: 14px 16px; border-radius: 999px; background: var(--red-btn); color: #fff; font-weight: 700; text-align: center; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transform: translateY(160%); transition: transform .25s var(--ease); }
  .try-bar.show { transform: none; }
  .try-bar[hidden] { display: none; }
  body.has-try-bar { padding-bottom: 84px; }
}
@media (min-width: 640px) { .m-only { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .try-bar { transition: none; } }