/* «برای مدرس‌ها» (teachers.php): on top of landing.css. The teacher panel is drawn here in HTML, in the panel's look. */
.tp-brand-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 9px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); font-size: .7rem; font-weight: 800; vertical-align: middle; }
.tp-alt { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-2) 70%, transparent) 12%, color-mix(in srgb, var(--bg-2) 70%, transparent) 88%, transparent); }
.tp-hero .eyebrow { margin-bottom: 14px; }

/* the drawn panel */
.tp-hero-visual { position: relative; padding: 30px 10px 40px; }
.tp-panel { max-width: 440px; margin-inline: auto; padding: 18px; border-radius: 30px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: rotate(-1.5deg); }
.tp-ph { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.tp-ph b { font-size: 1.15rem; font-weight: 900; }
.tp-ph span { font-size: .74rem; color: var(--muted); font-weight: 700; }
.tp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tp-kpis div { padding: 10px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; line-height: 1.4; }
.tp-kpis b { display: block; font-size: 1.35rem; font-weight: 900; color: var(--brand); }
.tp-kpis small { font-size: .68rem; color: var(--muted); font-weight: 700; }
.tp-box { padding: 10px 12px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); margin-top: 8px; }
.tp-bh { font-size: .8rem; font-weight: 800; margin-bottom: 6px; }
.tp-bh small { color: var(--muted); font-weight: 600; }
.tp-care { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .78rem; }
.tp-care:nth-child(2) { border-top: 0; }
.tp-care b { display: block; font-size: .82rem; }
.tp-care small { color: var(--muted); font-size: .68rem; }
.tp-care i { font-style: normal; font-size: .7rem; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, #f04d5d 13%, transparent); color: #e0364a; white-space: nowrap; }
.tp-hard { display: grid; grid-template-columns: 82px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; font-size: .74rem; }
.tp-hard b { font-size: .84rem; text-align: left; }
.tp-hard small { color: var(--muted); font-weight: 700; }
.tp-bar { display: block; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.tp-hero-visual .chip.c1 { top: 0; inset-inline-end: -6px; inset-inline-start: auto; }
.tp-hero-visual .chip.c3 { bottom: 0; inset-inline-start: -6px; top: auto; }

/* how: three steps */
.tp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tp-step { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.tp-n { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 900; font-size: 1.1rem; }
.tp-step p { color: var(--ink-2); font-size: .92rem; line-height: 1.95; }
.tp-mini { margin-top: auto; padding: 12px; border-radius: 20px; background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--brand) 30%, var(--line)); display: grid; gap: 8px; font-size: .76rem; }
.tp-in { padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--brand); font-weight: 700; }
.tp-week { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tp-week span { text-align: center; padding: 5px 2px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 700; font-size: .68rem; }
.tp-week span.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tp-book { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--brand); font-weight: 700; }
.tp-book i { width: 24px; height: 32px; border-radius: 5px; display: grid; place-items: end center; padding-bottom: 2px; color: #fff; font: 800 .5rem var(--font-en); font-style: normal; }
.tp-book small { margin-inline-start: auto; color: var(--brand); font-weight: 800; }
.tp-msg { padding: 10px 12px; border-radius: 16px 16px 4px 16px; background: #4a6ea8; color: #fff; line-height: 1.85; font-size: .74rem; }
.tp-msg u { color: #fff; text-underline-offset: 3px; word-break: break-all; }
.tp-share { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tp-share span { text-align: center; padding: 6px 4px; border-radius: 10px; font-weight: 800; font-size: .7rem; background: var(--surface); border: 1px solid var(--line); }
.tp-share .tg { background: #2aabee; color: #fff; border-color: #2aabee; }
.tp-share .wa { background: #25d366; color: #fff; border-color: #25d366; }
.tp-sess { text-align: center; padding: 8px; border-radius: 12px; background: var(--grad); color: #fff; font-weight: 800; }
.tp-w { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); font-size: .78rem; }
.tp-w b { font-weight: 700; }
.tp-w.miss { border-color: #f04d5d; background: color-mix(in srgb, #f04d5d 8%, var(--surface)); }
.tp-w.miss span { color: #e0364a; font-weight: 700; }
.tp-sent { text-align: center; font-weight: 800; color: #16a34a; font-size: .78rem; }

/* features: showcase rows */
.tp-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 60px); align-items: center; margin-bottom: clamp(48px, 7vw, 84px); }
.tp-show.rev .tp-show-copy { order: 2; }
.tp-show-copy h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.tp-show-copy p { margin: 12px 0 18px; color: var(--ink-2); line-height: 2.05; }
.tp-card { padding: 18px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); display: grid; gap: 8px; max-width: 460px; width: 100%; margin-inline: auto; }
.tp-ch { margin-bottom: 4px; }
.tp-ch b { display: block; font-size: 1rem; font-weight: 900; }
.tp-ch small { color: var(--muted); font-size: .76rem; }
.tp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.tp-foot small { color: var(--muted); font-size: .74rem; }
.tp-btn { padding: 8px 14px; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 800; font-size: .8rem; box-shadow: 0 3px 0 #5443c9; }
.tp-st { display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px; gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); }
.tp-st:nth-child(2) { border-top: 0; }
.tp-st > i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--brand-soft); color: var(--brand); }
.tp-st b { display: block; font-size: .86rem; }
.tp-st small { color: var(--muted); font-size: .72rem; }
.tp-hw { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.tp-hw > i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--brand-soft); color: var(--brand); }
.tp-hw b { display: block; font-size: .84rem; }
.tp-hw small { display: block; color: var(--muted); font-size: .7rem; margin-bottom: 4px; }
.tp-hw em { font-style: normal; text-align: center; line-height: 1.3; }
.tp-hw em b { font-size: 1.2rem; color: var(--brand); }

/* features: the grid */
.tp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tp-f { padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.tp-f i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--bg-2); font-style: normal; font-size: 1.3rem; margin-bottom: 10px; }
.tp-f b { display: block; font-size: 1rem; margin-bottom: 4px; }
.tp-f p { color: var(--ink-2); font-size: .86rem; line-height: 1.95; }

/* students */
.tp-stu { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 6vw, 72px); align-items: center; }
.tp-stu-copy p { margin: 14px 0 18px; color: var(--ink-2); line-height: 2.05; }
.tp-mk { border-radius: 50%; flex: none; }

/* privacy */
.tp-pv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tp-pv-col { padding: 22px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.tp-pv-col > b { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin-bottom: 10px; }
.tp-pv-col > b .ic { width: 26px; height: 26px; padding: 4px; border-radius: 50%; color: #fff; }
.tp-pv-col.ok > b .ic { background: #16a34a; }
.tp-pv-col.no > b .ic { background: #e0364a; }
.tp-pv-col ul { padding-inline-start: 20px; color: var(--ink-2); line-height: 2.1; }

/* price */
.tp-price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 40px); border-radius: 36px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.tp-price > div { flex: 1 1 360px; }
.tp-price p { margin-top: 12px; color: var(--ink-2); line-height: 2.05; }

@media (max-width: 1080px) {
  .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tp-hide-sm { display: none; }
  .tp-steps, .tp-show, .tp-stu { grid-template-columns: minmax(0, 1fr); }
  .tp-show.rev .tp-show-copy { order: 0; }
  .tp-show-copy, .tp-stu-copy { text-align: center; }
  .tp-show-copy .ticks, .tp-stu-copy .ticks { text-align: right; max-width: 30em; margin-inline: auto; }
  .tp-hero .eyebrow { display: inline-block; }
}
@media (max-width: 640px) {
  .tp-grid, .tp-pv { grid-template-columns: minmax(0, 1fr); }
  .tp-panel { transform: none; padding: 14px; }
  .tp-hero-visual { padding: 44px 0; }
  .tp-hero-visual .chip.c1 { inset-inline-end: 0; }
  .tp-hero-visual .chip.c3 { inset-inline-start: 0; }
  .tp-brand-tag { display: none; }
}

/* «آزمونک کلاس» */
.tp-new { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 99px; background: var(--grad); color: #fff; font-size: .78rem; font-weight: 800; }
.tp-qk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.tp-qk div { padding: 10px 6px; border-radius: 16px; background: var(--brand-soft); text-align: center; line-height: 1.35; }
.tp-qk b { display: block; font-size: 1.2rem; font-weight: 900; color: var(--brand); }
.tp-qk small { color: var(--muted); font-size: .72rem; font-weight: 700; }
.tp-qs { display: grid; grid-template-columns: 1fr auto 86px; gap: 10px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--line); font-size: .86rem; }
.tp-qs b { font-weight: 800; }
.tp-qs i { font-style: normal; text-align: center; font-size: .72rem; font-weight: 800; padding: 3px 8px; border-radius: 99px; }
.tp-qs i.ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #16a34a; }
.tp-qs i.no { background: color-mix(in srgb, #f04d5d 14%, transparent); color: #e0364a; }
.tp-qs i.wait { background: color-mix(in srgb, #f5a524 16%, transparent); color: #b76e00; }
.tp-quiz .tp-card .tp-hard { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }