/* =============================================================================
   Schoolyam Timetable - public pages (landing, sign in, moved, error).
   Modern, light, high-contrast. Brand = the Schoolyam logo: teal app colour + the logo's
   terracotta as accent (teal -> terracotta gradient on headline words only). Buttons: white text on
   teal / green gradients (never blue / violet). Motion stops for prefers-reduced-motion.
   ============================================================================= */
:root {
    --tp-ink: #0f1b2d;
    --tp-text: #26324a;
    --tp-muted: #5b6678;
    --tp-line: #e3e8ef;
    --tp-line-2: #d6dde7;
    --tp-soft: #f5f8fb;
    --tp-teal: #0f766e;
    --tp-teal-2: #10b8a6;
    --tp-deep: #0e7490;
    --tp-grad: linear-gradient(135deg, #0e7490, #10b8a6);
    --tp-grad-h: linear-gradient(135deg, #0b657e, #0ea596);
    --tp-brand: linear-gradient(100deg, #0f8f92, #10b8a6 45%, #d1502f);
    --tp-terra: #d1502f;
    --tp-green: #15803d;
    --tp-wa: #128c4b;
    --tp-red: #b42318;
    --tp-shadow: 0 10px 30px rgba(15,40,70,.08), 0 2px 6px rgba(15,40,70,.05);
    --tp-shadow-lg: 0 30px 70px rgba(10,40,60,.18), 0 8px 20px rgba(10,40,60,.08);
    --tp-radius: 18px;
    --tp-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #fff; color: var(--tp-text); font-family: var(--tp-font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--tp-teal); }
a:hover { color: #0b5f59; }
img { max-width: 100%; }
.tp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.tp-grad-text { background: var(--tp-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- header ---------- */
.tp-top { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(15,40,70,.07); }
.tp-top .tp-wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 14px; }
.tp-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.tp-logo img { height: 36px; width: auto; display: block; }
.tp-logo-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--tp-grad); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; box-shadow: 0 6px 14px rgba(16,184,166,.30); }
.tp-nav { display: flex; align-items: center; gap: 22px; }
.tp-nav > a:not(.tp-btn) { color: var(--tp-text); text-decoration: none; font-weight: 600; font-size: 14px; }
.tp-nav > a:not(.tp-btn):hover { color: var(--tp-teal); }
@media (max-width: 860px) { .tp-nav .tp-hide-sm { display: none; } .tp-nav { gap: 10px; } }
@media (max-width: 480px) { .tp-logo img { height: 28px; } .tp-logo-tag { display: none; } .tp-top .tp-wrap { height: 62px; } }

/* ---------- buttons ---------- */
.tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 0 24px; min-height: 46px;
    font: 700 15px var(--tp-font); cursor: pointer; text-decoration: none !important; white-space: nowrap; transition: transform .12s ease, box-shadow .16s ease, background .16s ease; }
.tp-btn svg { width: 18px; height: 18px; }
.tp-btn:hover { transform: translateY(-1px); }
.tp-btn-primary { background: var(--tp-grad); color: #fff !important; box-shadow: 0 10px 24px rgba(13,148,136,.28); }
.tp-btn-primary:hover { background: var(--tp-grad-h); color: #fff; box-shadow: 0 14px 30px rgba(13,148,136,.36); }
.tp-btn-primary[disabled] { opacity: .65; cursor: wait; transform: none; }
.tp-btn-wa { background: linear-gradient(135deg, #0f7a40, #22a75a); color: #fff !important; box-shadow: 0 10px 22px rgba(18,140,75,.25); }
.tp-btn-wa:hover { color: #fff; }
.tp-btn-ghost { background: #fff; color: var(--tp-ink) !important; border: 1px solid var(--tp-line-2); box-shadow: 0 2px 8px rgba(15,40,70,.05); }
.tp-btn-ghost:hover { border-color: #9fd9cf; color: var(--tp-teal) !important; }
.tp-btn-light { background: #fff; color: var(--tp-teal) !important; }
.tp-btn-glow { position: relative; overflow: hidden; background: linear-gradient(135deg, #0d9488, #10b8a6 55%, #22c55e); color: #fff !important; box-shadow: 0 10px 26px rgba(16,184,166,.45), inset 0 0 0 1px rgba(255,255,255,.25); }
.tp-btn-glow:hover { color: #fff; box-shadow: 0 14px 32px rgba(16,184,166,.55), inset 0 0 0 1px rgba(255,255,255,.35); }
.tp-btn-glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff !important; backdrop-filter: blur(6px); }
.tp-btn-lg { min-height: 56px; padding: 0 30px; font-size: 16px; border-radius: 14px; }
.tp-btn-sm { padding: 0 16px; min-height: 40px; font-size: 13.5px; border-radius: 10px; }
.tp-btn-block { width: 100%; }
.tp-link-btn { background: none; border: 0; color: var(--tp-teal); font: 600 14px var(--tp-font); cursor: pointer; padding: 4px; text-decoration: none; }
.tp-link-btn:hover { text-decoration: underline; }
.tp-link-btn[disabled] { color: var(--tp-muted); cursor: default; text-decoration: none; }

/* ---------- cards + forms ---------- */
.tp-card { background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow); }
.tp-field { margin-bottom: 14px; }
.tp-field label { display: block; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tp-muted); margin-bottom: 6px; }
.tp-field label .tp-req { color: var(--tp-red); }
.tp-field .tp-hint { font-size: 12.5px; color: var(--tp-muted); margin-top: 5px; }
.tp-input, .tp-select { width: 100%; height: 50px; border: 1px solid var(--tp-line-2); border-radius: 12px; padding: 0 14px; font: 500 15px var(--tp-font); color: var(--tp-ink); background: #fbfdff; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.tp-input:focus, .tp-select:focus { outline: none; border-color: var(--tp-teal-2); box-shadow: 0 0 0 4px rgba(16,184,166,.15); background: #fff; }
.tp-input::placeholder { color: #9aa4b2; }
.tp-phone { display: flex; align-items: stretch; }
.tp-phone .tp-cc { display: inline-flex; align-items: center; padding: 0 14px; background: var(--tp-soft); border: 1px solid var(--tp-line-2); border-right: 0; border-radius: 12px 0 0 12px; font-weight: 700; color: var(--tp-ink); }
.tp-phone .tp-input { border-radius: 0 12px 12px 0; letter-spacing: .5px; }
.tp-pw { position: relative; }
.tp-pw .tp-input { padding-right: 52px; }
.tp-pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--tp-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tp-pw-eye:hover { background: var(--tp-soft); color: var(--tp-teal); }
.tp-pw-eye svg { width: 19px; height: 19px; }
.tp-meter { height: 6px; border-radius: 99px; background: #e9eef3; overflow: hidden; margin-top: 8px; }
.tp-meter > i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .2s ease, background .2s ease; }
.tp-otp { letter-spacing: 12px; font-size: 26px; text-align: center; font-weight: 700; height: 60px; }
.tp-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--tp-text); cursor: pointer; }
.tp-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--tp-teal-2); }
.tp-msg { border-radius: 12px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; display: none; }
.tp-msg.show { display: block; }
.tp-msg.err { background: #fef3f2; border: 1px solid #fecdca; color: var(--tp-red); }
.tp-msg.ok { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.tp-msg.info { background: #fffaeb; border: 1px solid #fedf89; color: #93370d; }
.tp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .tp-grid2 { grid-template-columns: 1fr; } }
.tp-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #e9f8f5; color: var(--tp-teal); font-weight: 700; font-size: 12px; padding: 5px 12px; border-radius: 999px; letter-spacing: .04em; border: 1px solid #c7ece5; }
.tp-eyebrow svg { width: 14px; height: 14px; }
.tp-note { font-size: 13px; color: var(--tp-muted); }

/* ---------- landing: hero ---------- */
.tp-hero { position: relative; overflow: hidden; padding: 70px 0 120px; background:
    radial-gradient(800px 480px at 88% -10%, rgba(16,184,166,.22), transparent 60%),
    radial-gradient(640px 420px at -6% 30%, rgba(14,116,144,.14), transparent 60%),
    radial-gradient(700px 420px at 40% 115%, rgba(209,80,47,.10), transparent 60%),
    linear-gradient(180deg, #f3fbfa 0%, #ffffff 80%); }
.tp-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background-image: linear-gradient(rgba(14,116,144,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(14,116,144,.07) 1px, transparent 1px);
    background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse at 60% 30%, #000 25%, transparent 72%); }
.tp-hero > * { position: relative; }
.tp-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: center; }
@media (max-width: 980px) { .tp-hero-grid { grid-template-columns: 1fr; gap: 36px; } .tp-hero { padding: 36px 0 100px; } }
.tp-hero h1 { font-size: 54px; line-height: 1.07; font-weight: 800; color: var(--tp-ink); margin: 18px 0 18px; letter-spacing: -1.4px; }
@media (max-width: 1100px) { .tp-hero h1 { font-size: 46px; } }
@media (max-width: 560px) { .tp-hero h1 { font-size: 34px; letter-spacing: -.8px; } }
.tp-lead { font-size: 18px; color: var(--tp-text); margin: 0 0 26px; max-width: 560px; }
@media (max-width: 560px) { .tp-lead { font-size: 16px; } }
.tp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.tp-proof { display: flex; gap: 10px 20px; flex-wrap: wrap; margin-top: 22px; font-size: 13.5px; color: var(--tp-text); font-weight: 500; }
.tp-proof span { display: inline-flex; gap: 7px; align-items: center; }
.tp-proof svg { width: 17px; height: 17px; color: #fff; background: var(--tp-grad); border-radius: 50%; padding: 3px; }
.tp-signed { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--tp-line); box-shadow: var(--tp-shadow); font-size: 13.5px; }
.tp-signed i.av { width: 30px; height: 30px; border-radius: 50%; background: var(--tp-grad); color: #fff; font-style: normal; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* product preview: a browser window whose timetable fills itself in */
.tp-app { position: relative; perspective: 1400px; }
.tp-win { background: #fff; border: 1px solid var(--tp-line); border-radius: 20px; box-shadow: var(--tp-shadow-lg); overflow: hidden; transform: rotateY(-7deg) rotateX(3deg); transform-origin: left center; transition: transform .6s ease; }
.tp-app:hover .tp-win { transform: none; }
@media (max-width: 980px) { .tp-win { transform: none; } }
.tp-win-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #f6f8fb; border-bottom: 1px solid var(--tp-line); }
.tp-win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #f87171; }
.tp-win-bar i:nth-child(2) { background: #fbbf24; } .tp-win-bar i:nth-child(3) { background: #34d399; }
.tp-win-bar span { margin-left: 10px; flex: 1; background: #fff; border: 1px solid var(--tp-line); border-radius: 8px; height: 26px; font-size: 11.5px; color: var(--tp-muted); display: flex; align-items: center; padding: 0 10px; }
.tp-win-body { padding: 14px; }
.tp-win-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tp-win-chip { font-size: 11.5px; font-weight: 700; color: var(--tp-ink); background: var(--tp-soft); border: 1px solid var(--tp-line); border-radius: 8px; padding: 4px 9px; }
.tp-win-gen { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--tp-grad); border-radius: 8px; padding: 5px 11px; display: inline-flex; gap: 5px; align-items: center; }
.tp-win-gen svg { width: 13px; height: 13px; }
.tp-tt { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 11px; table-layout: fixed; }
.tp-tt th { color: var(--tp-muted); font-weight: 700; text-align: left; padding: 2px 4px; font-size: 10.5px; }
.tp-tt td { border-radius: 8px; padding: 6px 6px; font-weight: 700; line-height: 1.2; height: 40px; vertical-align: top; opacity: 0; transform: scale(.85); animation: tpPop .45s cubic-bezier(.2,.9,.3,1.3) forwards; animation-delay: var(--d, 0s); border-left: 3px solid transparent; overflow: hidden; }
.tp-tt td small { display: block; font-weight: 500; opacity: .85; font-size: 9.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-c1 { background: #e6f6f3; color: #0f5961; border-left-color: #10b8a6 !important; } .tp-c2 { background: #fff4e5; color: #8a4b08; border-left-color: #f59e0b !important; }
.tp-c3 { background: #eaf6ff; color: #0c4a6e; border-left-color: #38bdf8 !important; } .tp-c4 { background: #fdeef3; color: #8a1c43; border-left-color: #f472b6 !important; }
.tp-c5 { background: #eefbea; color: #1f6b16; border-left-color: #4ade80 !important; } .tp-cl { background: repeating-linear-gradient(45deg, #f4f1ea, #f4f1ea 6px, #efe9dd 6px, #efe9dd 12px); color: #8a7a5c; text-align: center; font-size: 9.5px !important; }
.tp-float { position: absolute; background: #fff; border: 1px solid var(--tp-line); border-radius: 14px; box-shadow: var(--tp-shadow-lg); padding: 10px 13px; font-size: 12.5px; color: var(--tp-ink); display: flex; align-items: center; gap: 10px; animation: tpFloat 6s ease-in-out infinite; }
.tp-float b { display: block; font-size: 13px; }
.tp-float small { color: var(--tp-muted); font-size: 11.5px; }
.tp-float .ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 34px; }
.tp-float .ic svg { width: 18px; height: 18px; }
.tp-float.f1 { left: -40px; bottom: -26px; } .tp-float.f1 .ic { background: linear-gradient(135deg, #15803d, #22c55e); }
.tp-float.f2 { right: -26px; top: -30px; animation-delay: -2s; } .tp-float.f2 .ic { background: linear-gradient(135deg, #c2410c, #f97316); }
.tp-float.f3 { right: -18px; bottom: -44px; animation-delay: -4s; } .tp-float.f3 .ic { background: var(--tp-grad); }
@media (max-width: 1180px) { .tp-float.f1 { left: 8px; } .tp-float.f2 { right: 8px; } .tp-float.f3 { right: 8px; } }
@media (max-width: 560px) { .tp-float { display: none; } .tp-tt td { height: 34px; padding: 4px; } .tp-tt td small { display: none; } }

/* stats band overlapping the hero */
.tp-statband { position: relative; z-index: 2; margin-top: -64px; }
.tp-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--tp-line); border-radius: 22px; box-shadow: var(--tp-shadow-lg); overflow: hidden; }
.tp-stats > div { padding: 22px 24px; border-left: 1px solid var(--tp-line); }
.tp-stats > div:first-child { border-left: 0; }
.tp-stats b { display: block; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; white-space: nowrap; }
.tp-stats span { color: var(--tp-muted); font-size: 13.5px; font-weight: 500; }
@media (max-width: 760px) { .tp-stats { grid-template-columns: 1fr 1fr; } .tp-stats > div:nth-child(3) { border-left: 0; } .tp-stats > div:nth-child(n+3) { border-top: 1px solid var(--tp-line); } .tp-stats b { font-size: 23px; } .tp-stats > div { padding: 18px 16px; } }

/* ---------- landing: sections ---------- */
.tp-section { padding: 84px 0; }
.tp-section.alt { background: linear-gradient(180deg, #f7fafc, #f2f8f8); border-top: 1px solid var(--tp-line); border-bottom: 1px solid var(--tp-line); }
.tp-head { text-align: center; max-width: 860px; margin: 0 auto 40px; }
.tp-head h2 { font-size: 38px; line-height: 1.15; font-weight: 800; color: var(--tp-ink); margin: 12px 0 10px; letter-spacing: -.8px; }
.tp-head p { color: var(--tp-muted); font-size: 16.5px; margin: 0; }
@media (max-width: 560px) { .tp-section { padding: 56px 0; } .tp-head h2 { font-size: 28px; } }

/* bento features */
.tp-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .tp-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tp-bento { grid-template-columns: 1fr; } }
.tp-tile { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--tp-line); border-radius: 20px; padding: 22px; box-shadow: var(--tp-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tp-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(13,148,136,.14); border-color: #bfe7e0; }
.tp-tile h3 { font-size: 16.5px; color: var(--tp-ink); margin: 14px 0 6px; font-weight: 700; }
.tp-tile p { margin: 0; font-size: 14px; color: var(--tp-text); }
.tp-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--tp-grad); color: #fff; box-shadow: 0 10px 20px rgba(14,116,144,.25); display: inline-flex; align-items: center; justify-content: center; }
.tp-ico svg { width: 22px; height: 22px; }
.tp-ico.t2 { background: linear-gradient(135deg, #c2410c, #f97316); box-shadow: 0 10px 20px rgba(194,65,12,.22); }
.tp-ico.t3 { background: linear-gradient(135deg, #15803d, #22c55e); box-shadow: 0 10px 20px rgba(21,128,61,.22); }
.tp-tile.big { grid-column: span 2; grid-row: span 2; color: #fff; border: 0; padding: 28px; display: flex; flex-direction: column;
    background: radial-gradient(500px 300px at 90% 0%, rgba(16,184,166,.55), transparent 60%), radial-gradient(400px 260px at 0% 110%, rgba(209,80,47,.35), transparent 60%), linear-gradient(140deg, #052e38, #0b5d68); }
.tp-tile.big h3 { color: #fff; font-size: 26px; line-height: 1.2; margin-top: 16px; letter-spacing: -.4px; }
.tp-tile.big p { color: #cfe9e6; font-size: 15px; max-width: 420px; }
.tp-tile.big .tp-ico { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); box-shadow: none; }
@media (max-width: 560px) { .tp-tile.big { grid-column: span 1; } }
.tp-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: auto; padding-top: 22px; }
.tp-mini i { height: 26px; border-radius: 7px; background: rgba(255,255,255,.10); animation: tpGlow 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.tp-mini i.a { background: rgba(94,234,212,.55); } .tp-mini i.b { background: rgba(251,191,36,.55); } .tp-mini i.c { background: rgba(125,211,252,.55); } .tp-mini i.e { background: rgba(249,168,212,.55); }

/* steps */
.tp-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.tp-flow::before { content: ""; position: absolute; left: 8%; right: 8%; top: 28px; height: 2px; background: linear-gradient(90deg, #10b8a6, #0e7490, #d1502f); opacity: .35; }
@media (max-width: 980px) { .tp-flow { grid-template-columns: repeat(2, 1fr); } .tp-flow::before { display: none; } }
@media (max-width: 560px) { .tp-flow { grid-template-columns: 1fr; } }
.tp-flow > div { position: relative; text-align: center; padding: 0 8px; }
.tp-flow .n { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto; background: var(--tp-grad); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px #fff, 0 14px 26px rgba(14,116,144,.28); }
.tp-flow h3 { font-size: 16.5px; color: var(--tp-ink); margin: 18px 0 6px; }
.tp-flow p { margin: 0; font-size: 14px; color: var(--tp-text); }

/* compare */
.tp-compare-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--tp-line); box-shadow: var(--tp-shadow); background: #fff; }
.tp-compare { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.tp-compare th, .tp-compare td { padding: 14px 18px; border-bottom: 1px solid #eef2f6; text-align: left; }
.tp-compare tr:last-child td { border-bottom: 0; }
.tp-compare th { background: linear-gradient(180deg, #f6f9fc, #edf3f8); color: #34445a; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.tp-compare th.hl { background: var(--tp-grad); color: #fff; }
.tp-compare td.hl { background: #f0fdfa; }
.tp-compare .y, .tp-compare .n { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 800; }
.tp-compare .y { background: linear-gradient(135deg, #15803d, #22c55e); color: #fff; }
.tp-compare .n { background: #f1f3f6; color: #98a2b3; }
.tp-compare small { color: var(--tp-muted); }

/* faq */
.tp-faq { max-width: 840px; margin: 0 auto; }
.tp-faq details { background: #fff; border: 1px solid var(--tp-line); border-radius: 16px; box-shadow: var(--tp-shadow); padding: 0 20px; margin-bottom: 12px; transition: border-color .16s ease; }
.tp-faq details[open] { border-color: #bfe7e0; }
.tp-faq summary { cursor: pointer; font-weight: 700; color: var(--tp-ink); padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq summary:after { content: "+"; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #e9f8f5; color: var(--tp-teal); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.tp-faq details[open] summary:after { content: "\2212"; background: var(--tp-grad); color: #fff; }
.tp-faq details p { margin: 0 0 18px; color: var(--tp-text); }

/* closing band */
.tp-band { position: relative; overflow: hidden; border-radius: 26px; padding: 44px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; color: #fff;
    background: radial-gradient(600px 340px at 90% 0%, rgba(16,184,166,.55), transparent 60%), radial-gradient(500px 300px at 0% 120%, rgba(209,80,47,.40), transparent 60%), linear-gradient(140deg, #04252e, #0b5d68); box-shadow: var(--tp-shadow-lg); }
.tp-band h2 { color: #fff; font-size: 32px; line-height: 1.2; margin: 0 0 8px; letter-spacing: -.5px; }
.tp-band p { margin: 0; color: #cfe9e6; font-size: 16px; }
@media (max-width: 560px) { .tp-band { padding: 28px 22px; } .tp-band h2 { font-size: 24px; } }

/* footer */
.tp-foot { border-top: 1px solid var(--tp-line); background: #fbfcfd; padding: 40px 0 28px; font-size: 13.5px; color: var(--tp-muted); }
.tp-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .tp-foot-grid { grid-template-columns: 1fr; } }
.tp-foot img { height: 34px; width: auto; }
.tp-foot h4 { margin: 0 0 10px; font-size: 13px; color: var(--tp-ink); text-transform: uppercase; letter-spacing: .06em; }
.tp-foot a { color: var(--tp-text); text-decoration: none; display: block; padding: 3px 0; }
.tp-foot a:hover { color: var(--tp-teal); }
.tp-foot-bottom { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--tp-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* reveal on scroll */
.tp-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.tp-rv.in { opacity: 1; transform: none; }

/* ---------- sign in: split screen ---------- */
.tp-authpage { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
@media (max-width: 980px) { .tp-authpage { grid-template-columns: 1fr; } .tp-auth-art { display: none !important; } }
.tp-auth-art { position: relative; overflow: hidden; color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between;
    background: radial-gradient(640px 420px at 100% 0%, rgba(16,184,166,.5), transparent 60%), radial-gradient(520px 360px at 0% 110%, rgba(209,80,47,.38), transparent 60%), linear-gradient(150deg, #04252e, #0b5d68); }
.tp-auth-art::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%); }
.tp-auth-art > * { position: relative; }
.tp-auth-art .brand { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 8px 14px; align-self: flex-start; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.tp-auth-art .brand img { height: 32px; display: block; }
.tp-auth-art h2 { font-size: 36px; line-height: 1.15; font-weight: 800; margin: 26px 0 14px; letter-spacing: -.8px; }
.tp-auth-art h2 span { background: linear-gradient(90deg, #5eead4, #fdba74); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tp-auth-art ul { list-style: none; padding: 0; margin: 0 0 24px; }
.tp-auth-art li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; color: #d7efec; font-size: 15px; }
.tp-auth-art li svg { flex: 0 0 22px; width: 22px; height: 22px; color: #04252e; background: #5eead4; border-radius: 50%; padding: 4px; }
.tp-auth-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tp-auth-stats div { border-radius: 14px; padding: 12px 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.tp-auth-stats b { display: block; font-size: 22px; font-weight: 800; }
.tp-auth-stats span { font-size: 12px; color: #a8d5cf; }
.tp-auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; background: radial-gradient(500px 300px at 100% 0%, rgba(16,184,166,.08), transparent 60%), #fff; }
.tp-auth-top { width: 100%; max-width: 440px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.tp-auth-top img { height: 32px; }
@media (min-width: 981px) { .tp-auth-top > a:first-child { visibility: hidden; } }   /* the brand panel already shows the logo */
.tp-auth-top a.back { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--tp-muted); display: inline-flex; gap: 6px; align-items: center; }
.tp-auth-top a.back svg { width: 16px; height: 16px; }
.tp-auth-box { width: 100%; max-width: 440px; }
.tp-auth-box h1 { font-size: 28px; color: var(--tp-ink); margin: 0 0 6px; line-height: 1.2; font-weight: 800; letter-spacing: -.5px; }
.tp-auth-box .tp-sub { color: var(--tp-muted); margin: 0 0 22px; font-size: 14.5px; }
.tp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--tp-soft); border: 1px solid var(--tp-line); border-radius: 14px; margin-bottom: 24px; }
.tp-tabs button { border: 0; background: transparent; border-radius: 10px; height: 42px; font: 700 14px var(--tp-font); color: var(--tp-muted); cursor: pointer; }
.tp-tabs button.on { background: #fff; color: var(--tp-ink); box-shadow: 0 4px 12px rgba(15,40,70,.10); }
.tp-step { display: none; animation: tpIn .25s ease; }
.tp-step.on { display: block; }
.tp-row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 2px 0 16px; flex-wrap: wrap; }
.tp-or { display: flex; align-items: center; gap: 12px; color: var(--tp-muted); font-size: 12.5px; margin: 20px 0 14px; }
.tp-or::before, .tp-or::after { content: ""; flex: 1; height: 1px; background: var(--tp-line); }
.tp-alt { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed #b7e3db; border-radius: 14px; background: #f3fbfa; }
.tp-alt .ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: linear-gradient(135deg, #0f7a40, #22a75a); color: #fff; display: flex; align-items: center; justify-content: center; }
.tp-alt .ic svg { width: 20px; height: 20px; }
.tp-alt b { display: block; color: var(--tp-ink); font-size: 14px; }
.tp-alt span { font-size: 12.5px; color: var(--tp-muted); }
@media (max-width: 480px) { .tp-alt { flex-wrap: wrap; } .tp-alt > .tp-btn { flex: 1 1 100%; } }
.tp-sent-to { background: #e9f8f5; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: var(--tp-ink); margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tp-dev { background: #fffaeb; border: 1px dashed #f79009; color: #93370d; border-radius: 12px; padding: 9px 14px; font-size: 13px; margin-bottom: 14px; }
.tp-school-pick { display: block; width: 100%; text-align: left; border: 1px solid var(--tp-line); border-radius: 14px; padding: 14px 16px; background: #fff; margin-bottom: 10px; cursor: pointer; font: 500 14px var(--tp-font); color: var(--tp-text); transition: border-color .14s ease, background .14s ease; }
.tp-school-pick:hover { border-color: var(--tp-teal-2); background: #f3fbfa; }
.tp-school-pick b { display: block; color: var(--tp-ink); font-size: 15px; }
.tp-auth-foot { width: 100%; max-width: 440px; margin-top: 26px; font-size: 12.5px; color: var(--tp-muted); text-align: center; }

/* moved / error */
.tp-center-box { max-width: 560px; margin: 60px auto; padding: 32px; text-align: center; }
.tp-center-box h1 { font-size: 26px; color: var(--tp-ink); margin: 12px 0; }
.tp-center-logo { display: block; height: 36px; margin: 0 auto 6px; }

/* a grid item's min-width defaults to its content - keep phones from widening */
.tp-hero-grid > *, .tp-authpage > *, .tp-bento > *, .tp-flow > * { min-width: 0; }

@keyframes tpPop { to { opacity: 1; transform: none; } }
@keyframes tpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tpGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes tpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tp-tt td { animation: none; opacity: 1; transform: none; }
    .tp-float, .tp-mini i { animation: none; }
    .tp-rv { opacity: 1; transform: none; transition: none; }
    .tp-win { transform: none; }
}