/* ===== Tutor Mission — design system & components (violet & gold) ===== */
:root{
  --bg:#FAFBFF;             /* cool white */
  --surface:#ffffff;
  --surface-2:#EDE9FE;      /* violet tint */
  --ink:#1C0B4E;            /* deep violet text */
  --muted:#6B5BAD;
  --line:#DDD6FE;
  --primary:#6D28D9;        /* violet — main brand / CTAs */
  --primary-ink:#4C1D95;
  --gold:#F59E0B;           /* solar gold accent */
  --gold-soft:#FEF3C7;
  --gold-ink:#92400E;
  --sage:#3E8E6E;           /* available / success (emerald) */
  --sage-soft:#E2F0EA;
  --amber:#F59E0B;          /* gold */
  --indigo:#6D28D9;         /* focus ring → violet */
  --radius:18px;
  --radius-lg:26px;
  --shadow:0 10px 30px rgba(109,40,217,.10);
  --shadow-lift:0 16px 40px rgba(109,40,217,.18);
  /* subject accents */
  --c-math:#6D5AE6; --c-english:#E07A5F; --c-science:#06B6D4; --c-social:#F2A65A;
  --c-languages:#EC4899; --c-coding:#3B82F6; --c-art:#A855F7; --c-music:#F43F5E;
  --c-testprep:#22C55E; --c-study:#64748B;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Playfair Display','Nunito',system-ui,sans-serif;line-height:1.15;margin:0 0 .5rem;font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.2rem)}
h3{font-size:1.25rem}
a{color:var(--primary-ink);text-decoration:none}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Playfair Display',sans-serif;font-weight:600;font-size:1rem;cursor:pointer;
  border:none;border-radius:14px;padding:.85rem 1.4rem;min-height:48px;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,background .15s;}
.btn:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,#6D28D9,#7C3AED);color:#fff;box-shadow:0 8px 18px rgba(109,40,217,.32)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 14px 28px rgba(109,40,217,.42)}
.btn-soft{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.btn-soft:hover{transform:translateY(-2px);border-color:var(--primary)}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sage{background:var(--sage);color:#15302a;box-shadow:0 8px 18px rgba(129,178,154,.35)}
.btn-sage:hover{transform:translateY(-2px);filter:brightness(.98)}
.btn-lg{font-size:1.15rem;padding:1rem 1.7rem;min-height:56px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---- top nav ---- */
.nav{position:sticky;top:0;z-index:30;backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(255,253,248,.82);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:1rem;height:68px}
.brand{display:flex;align-items:center;gap:.55rem;font-family:'Playfair Display';font-weight:700;font-size:1.35rem;cursor:pointer}
.brand svg{width:34px;height:34px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.nav-links a,.nav-links button.linkish{background:none;border:none;font:inherit;color:var(--muted);cursor:pointer;
  padding:.5rem .7rem;border-radius:10px}
.nav-links a:hover,.nav-links button.linkish:hover{color:var(--ink);background:var(--surface-2)}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.4rem}
.card.lift{transition:transform .18s ease,box-shadow .18s ease;cursor:pointer}
.card.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.grid{display:grid;gap:1rem}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.pill{display:inline-flex;align-items:center;gap:.4rem;background:var(--gold-soft);color:var(--gold-ink);
  border-radius:999px;padding:.35rem .8rem;font-weight:600;font-size:.85rem}

/* ---- hero ---- */
.hero{
  position:relative;min-height:80vh;display:flex;align-items:center;overflow:hidden;
  background:#08060F;border-radius:0;padding:0;margin-bottom:2rem;
}
.hero .hero-bg{
  position:absolute;inset:-30%;width:160%;height:160%;
  background:
    radial-gradient(ellipse at 40% 30%,rgba(109,40,217,.5) 0%,transparent 52%),
    radial-gradient(ellipse at 80% 70%,rgba(245,158,11,.18) 0%,transparent 48%),
    radial-gradient(ellipse at 15% 78%,rgba(59,130,246,.1) 0%,transparent 48%);
  animation:aurora-drift 22s ease-in-out infinite alternate;
  filter:blur(48px);
}
@keyframes aurora-drift{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  50%{transform:translate(3%,-2%) scale(1.05) rotate(2.5deg)}
  100%{transform:translate(-2%,3%) scale(1.03) rotate(-1.5deg)}
}
.hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:160px;
  background:linear-gradient(to bottom,transparent,var(--bg));
  z-index:2;pointer-events:none;
}
.hero .hero-inner{position:relative;z-index:3;padding:80px 20px 120px;max-width:860px}
.hero-title{font-family:'Playfair Display',sans-serif;font-size:clamp(2.6rem,6vw,4.5rem);font-weight:700;color:#FAFAFA;line-height:1.05;margin:0 0 1rem}
.hero-sub{font-size:1.1rem;color:rgba(255,255,255,.78);max-width:52ch;margin:0 0 2rem;line-height:1.65}
.hero-badge{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;margin-bottom:1.2rem;font-family:'Nunito',sans-serif}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* ---- impact strip ---- */
.impact{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow);margin:1.5rem 0}
.impact .num{font-family:'Playfair Display';font-weight:700;font-size:2rem;color:var(--primary)}
.impact .lbl{color:var(--muted);font-size:.95rem}

/* ---- sections ---- */
.section{padding:2.5rem 0}
.section h2{margin-bottom:.4rem}
.eyebrow{font-family:'Playfair Display';color:var(--primary-ink);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.8rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step .n{width:42px;height:42px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display';font-weight:700;margin-bottom:.6rem}
.subjects-strip{display:flex;flex-wrap:wrap;gap:.7rem}
.subject-chip{display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:.7rem 1rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}
.subject-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.subject-chip .ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff}
.subject-chip .ico svg{width:18px;height:18px}

/* testimonials + faq */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow)}
.quote .who{display:flex;align-items:center;gap:.6rem;margin-top:.8rem}
.ava{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Playfair Display';flex:0 0 auto}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:.6rem;overflow:hidden}
.faq-item button{width:100%;text-align:left;background:none;border:none;font:inherit;font-weight:600;
  padding:1rem 1.1rem;cursor:pointer;display:flex;justify-content:space-between;gap:1rem}
.faq-item .a{padding:0 1.1rem 1rem;color:var(--muted);display:none}
.faq-item.open .a{display:block}
.faq-item.open button .pm{transform:rotate(45deg)}
.faq-item .pm{transition:transform .2s}

/* footer */
.footer{background:var(--surface-2);border-top:1px solid var(--line);margin-top:2rem;padding:2rem 0}
.footer .cols{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}

/* ---- auth ---- */
.auth-wrap{max-width:460px;margin:3rem auto;padding:0 20px}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:600;margin-bottom:.35rem}
.field input,.field select{width:100%;padding:.8rem .9rem;border:1px solid var(--line);border-radius:12px;
  font:inherit;background:var(--surface)}
.field input:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,58,95,.18)}
.role-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.8rem;margin-bottom:1rem}
.role-card{border:2px solid var(--line);border-radius:16px;padding:1rem;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.role-card.sel{border-color:var(--primary);background:#E9EEF6}
.role-card .em{font-family:'Playfair Display';font-weight:700}

/* ---- app shell (dashboards) ---- */
.shell{padding:1.5rem 0 3rem}
.tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem;flex-wrap:wrap}
.tab{background:none;border:none;font:inherit;font-weight:600;color:var(--muted);cursor:pointer;
  padding:.7rem 1rem;border-radius:10px 10px 0 0;border-bottom:3px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--ink);border-bottom-color:var(--primary)}
.tab:hover{color:var(--ink)}

/* availability grid */
.avail-scroll{overflow-x:auto}
.avail{border-collapse:separate;border-spacing:6px;min-width:560px}
.avail th{font-family:'Playfair Display';font-size:.9rem;color:var(--muted);font-weight:600;padding:.2rem}
.avail td.hour{color:var(--muted);font-size:.82rem;white-space:nowrap;padding-right:.4rem;text-align:right}
.cell{width:62px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);
  cursor:pointer;transition:transform .1s,background .15s;font-size:.72rem;color:var(--muted)}
.cell:hover{transform:scale(1.05)}
.cell.free{background:var(--sage);border-color:var(--sage);color:#16302a;font-weight:700}
.cell.booked{background:#EFE6CC;border-color:#D9C38E;color:var(--gold-ink);font-weight:700;cursor:not-allowed}

/* subject browser */
.crumbs{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;margin-bottom:1rem;font-size:.95rem}
.crumbs button{background:none;border:none;font:inherit;color:var(--muted);cursor:pointer;padding:.25rem .4rem;border-radius:8px}
.crumbs button:hover{color:var(--ink);background:var(--surface-2)}
.crumbs button.cur{color:var(--ink);font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.9rem}
.tile{display:flex;flex-direction:column;gap:.5rem;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:1.1rem;cursor:pointer;font:inherit;color:inherit;min-height:104px;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:transparent}
.tile .badge{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.tile .badge svg{width:24px;height:24px}
.tile .lbl{font-family:'Playfair Display';font-weight:600;font-size:1.05rem}
.tile .sub{font-size:.85rem;color:var(--muted)}
.grid-btn{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.gbtn{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:.75rem .9rem;cursor:pointer;font:inherit;color:inherit;min-height:48px;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.gbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent,var(--primary))}
.gbtn .tag{font-size:.68rem;color:#fff;background:var(--accent,var(--primary));border-radius:999px;padding:.05rem .5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{background:var(--accent-soft,#EFE9FB);color:var(--accent-ink,#4a3bb0);border:none;border-radius:999px;
  padding:.6rem 1rem;cursor:pointer;font:inherit;font-weight:600;min-height:44px;transition:transform .15s,box-shadow .15s}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.sec-h{font-size:.82rem;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;margin:1.3rem 0 .6rem}
.sec-h:first-of-type{margin-top:0}

/* tutor result + booking */
.tutor-row{display:flex;align-items:center;gap:.9rem;padding:.8rem;border:1px solid var(--line);border-radius:14px;margin-bottom:.7rem;background:var(--surface)}
.tutor-row .meta{flex:1;min-width:0}
.tutor-row .nm{font-weight:700}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}
.slot{border:1px solid var(--sage);background:var(--sage-soft);color:#2f5d4c;border-radius:12px;padding:.6rem;cursor:pointer;font:inherit;font-weight:700;min-height:46px}
.slot:hover{background:var(--sage);color:#15302a}

/* misc */
.badge-row{display:flex;flex-wrap:wrap;gap:.6rem}
.merit{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.7rem 1rem;text-align:center;min-width:96px}
.merit .ico{font-size:1.6rem}
.empty{text-align:center;padding:2.2rem 1rem;color:var(--muted)}
.empty svg{width:90px;height:90px;opacity:.95;margin-bottom:.5rem}
.next-card{background:linear-gradient(150deg,#E9EEF6,#F6EFDD);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow)}
.countdown{font-family:'Playfair Display';font-weight:700;font-size:1.6rem;color:var(--primary-ink)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:.8rem 1.2rem;border-radius:14px;box-shadow:var(--shadow-lift);z-index:60;font-weight:600;opacity:0;transition:opacity .25s, transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.cert{max-width:740px;margin:1rem auto;border:3px solid var(--primary);border-radius:18px;padding:2.4rem;background:#fff;text-align:center}
.cert h1{color:var(--primary-ink)}
canvas#confetti{position:fixed;inset:0;pointer-events:none;z-index:55}

/* ---- classroom ---- */
.room-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;box-shadow:var(--shadow)}
.room{display:grid;grid-template-columns:1fr 330px;gap:1rem;align-items:start}
.room-main{display:flex;flex-direction:column;gap:1rem}
.room-side{display:flex;flex-direction:column;gap:1rem}
.vids{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.vtile{position:relative;background:#22201e;border-radius:14px;aspect-ratio:16/10;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vtile video{width:100%;height:100%;object-fit:cover;background:#22201e}
.vtile .name{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;padding:.15rem .5rem;border-radius:8px}
.vtile .ph{color:#e8d9cf;text-align:center;padding:1rem;font-size:.92rem;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem}
.vtile video[srcobject]{z-index:1}
.ctrl-btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:.5rem .8rem;cursor:pointer;font:inherit;font-weight:600;min-height:42px}
.ctrl-btn.off{background:#FDE2D8;border-color:#F4C3B2;color:var(--primary-ink)}
.wb-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.wb-tools{display:flex;gap:.5rem;align-items:center;padding:.6rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wb-color{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;display:inline-block}
.wb-color.sel{box-shadow:0 0 0 2px var(--ink)}
canvas.wb{display:block;width:100%;height:380px;background:#fff;touch-action:none;cursor:crosshair}
.chat{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;height:340px}
.chat-msgs{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:85%;padding:.45rem .7rem;border-radius:12px;font-size:.92rem;background:var(--surface-2);align-self:flex-start}
.msg.me{align-self:flex-end;background:#E9EEF6}
.msg .mn{font-size:.72rem;color:var(--muted);display:block}
.chat-in{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--line)}
.chat-in input{flex:1;padding:.6rem;border:1px solid var(--line);border-radius:10px;font:inherit}

/* responsive */
@media(max-width:880px){
  .room{grid-template-columns:1fr}
  .vids{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr;padding-top:2rem}
  .impact{grid-template-columns:repeat(2,1fr)}
  .cols-3,.steps{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .nav-links a.hide-sm{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

/* ===== richer navy & gold theme ===== */
:root{ --bg:#E2E8F2; --on-navy:#EAF0F8; --on-navy-muted:#AEBAD0; }
body{ background:var(--bg); }
a{ color:var(--primary-ink); }
/* primary CTA = gold (pops on navy) */
.btn-primary{ background:var(--gold); color:#14253F; box-shadow:0 8px 18px rgba(187,164,106,.32); }
.btn-primary:hover{ filter:brightness(1.05); box-shadow:0 12px 24px rgba(187,164,106,.45); }
.btn-soft{ background:#EFE6CC; color:#43340F; border:1px solid rgba(187,164,106,.5); }
.btn-soft:hover{ border-color:var(--gold); }
.eyebrow{ color:var(--gold); }
.card{ border-color:rgba(187,164,106,.22); }
/* navy top nav */
.nav{ background:color-mix(in srgb, var(--primary) 88%, #000 12%); border-bottom:1px solid rgba(187,164,106,.4); }
.brand{ color:var(--gold); }
.nav-links a, .nav-links button.linkish{ color:#D8E0EE; }
.nav-links a:hover, .nav-links button.linkish:hover{ color:#fff; background:rgba(255,255,255,.10); }
.nav-links a.btn-primary{ background:var(--gold); color:#14253F; }
.nav-links a.btn-primary:hover{ background:var(--gold); color:#14253F; filter:brightness(1.05); }
/* navy hero panel */
.hero{ background:linear-gradient(155deg, color-mix(in srgb,var(--primary) 86%,#fff 14%), color-mix(in srgb,var(--primary) 80%,#000 20%)); border-radius:var(--radius-lg); padding:2.6rem 2rem; box-shadow:var(--shadow-lift); color:var(--on-navy); }
.hero h1{ color:#fff; }
.hero p.lead{ color:#CBD6E8; }
.hero .muted{ color:var(--on-navy-muted); }
.hero .pill{ background:rgba(187,164,106,.24); color:#E3D3A6; }
.hero-art{ background:#0a1628; }
.hero-art .float{ background:#fff; color:var(--ink); }
.hero-art .float .muted{ color:var(--muted); }
/* navy impact strip */
.impact{ background:color-mix(in srgb, var(--primary) 82%, #fff 18%); border-color:rgba(187,164,106,.3); }
.impact .num{ color:var(--gold); }
.impact .lbl{ color:#B9C5DA; }
/* navy footer */
.footer{ background:color-mix(in srgb, var(--primary) 92%, #000 8%); border-top:1px solid rgba(187,164,106,.4); color:var(--on-navy); }
.footer b{ color:#fff; }
.footer a, .footer .brand{ color:var(--gold); }
.footer .muted{ color:var(--on-navy-muted); }
/* dashboards: navy heading + navy/gold segmented tab bars (all dashboards share .tabs/.tab) */
.shell > h2{ color:var(--ink); }
.tabs{ display:inline-flex; gap:.3rem; background:#DCE4F0; border:1px solid rgba(30,58,95,.10);
  border-radius:14px; padding:5px; margin-bottom:1.5rem; flex-wrap:wrap; max-width:100%; }
.tab{ color:var(--muted); padding:.55rem 1.05rem; border-radius:10px; border-bottom:none;
  margin-bottom:0; transition:background .15s, color .15s; }
.tab:hover{ color:var(--primary); background:rgba(255,255,255,.65); border-bottom-color:transparent; }
.tab.active{ background:var(--gold); color:#1B2C45; border-bottom-color:transparent;
  box-shadow:0 2px 6px rgba(30,58,95,.16); }
.tab.active:hover{ background:var(--gold); color:#1B2C45; }

/* founder visual site editor: live-preview + controls */
.ed-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; align-items:start; }
@media(max-width:980px){ .ed-grid{ grid-template-columns:1fr; } }
.ed-preview{ position:sticky; top:78px; }
@media(max-width:980px){ .ed-preview{ position:static; } }
.tn-preview-wrap{ border:1px solid var(--line); border-radius:16px; overflow:auto; background:#fff; max-height:74vh; box-shadow:var(--shadow); }
.tn-preview{ zoom:.66; pointer-events:none; }
.tn-preview *{ pointer-events:none !important; }
.tn-preview .nav{ position:static; }
.ed-controls > .card{ margin-bottom:1rem; }
.ed-controls h3{ margin:0 0 .2rem; }

/* ===== futuristic classroom ("mission deck") ===== */
.room-stage{ position:relative; min-height:100vh; color:#E7ECFF;
  background:radial-gradient(1200px 720px at 72% -12%, #18224d 0%, #0b1026 55%, #070a18 100%); }
.room-aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; filter:blur(64px); opacity:.5;
  background:
    radial-gradient(38% 52% at 18% 28%, rgba(34,211,238,.55), transparent 70%),
    radial-gradient(40% 55% at 58% 16%, rgba(139,92,246,.55), transparent 70%),
    radial-gradient(44% 58% at 86% 42%, rgba(244,114,182,.42), transparent 70%);
  animation:auroraFloat 18s ease-in-out infinite alternate; }
@keyframes auroraFloat{ from{ transform:translate(-3%,-2%) scale(1); } to{ transform:translate(4%,3%) scale(1.12); } }
.room-wrap{ position:relative; z-index:1; max-width:1300px; margin:0 auto; padding:1.1rem 1.1rem 7.5rem; }
.room-top{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.room-brand{ display:flex; align-items:center; gap:.7rem; }
.rb-txt{ display:flex; flex-direction:column; line-height:1.15; }
.rb-txt b{ font-family:'Playfair Display',serif; font-size:1.15rem; color:#fff; }
.room-sub{ font-size:.82rem; color:#93A0C4; }
.room-top-actions{ display:flex; align-items:center; gap:.6rem; }
.room-timer{ display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#CFE9FF; font-weight:700; font-variant-numeric:tabular-nums; padding:.4rem .8rem; border-radius:999px; }
.rt-dot{ width:9px; height:9px; border-radius:50%; background:#34D399; box-shadow:0 0 10px #34D399; animation:pulseDot 1.6s infinite; }
@keyframes pulseDot{ 0%,100%{opacity:1} 50%{opacity:.3} }
.room-leave,.room-end{ font:inherit; font-weight:700; border-radius:999px; padding:.5rem 1.15rem; cursor:pointer; border:1px solid transparent; }
.room-leave{ background:rgba(255,255,255,.08); color:#E7ECFF; border-color:rgba(255,255,255,.16); }
.room-leave:hover{ background:rgba(255,255,255,.16); }
.room-end{ background:linear-gradient(135deg,#FB7185,#E11D48); color:#fff; box-shadow:0 8px 22px rgba(225,29,72,.4); }
.room-end:hover{ filter:brightness(1.08); }
.room-grid{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:1.1rem; align-items:start; }
@media(max-width:900px){ .room-grid{ grid-template-columns:1fr; } }
.room-main{ display:flex; flex-direction:column; gap:1.1rem; min-width:0; }
.vids{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:560px){ .vids{ grid-template-columns:1fr; } }
.vtile{ position:relative; aspect-ratio:16/10; border-radius:20px; overflow:hidden; background:#0c1226; border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 50px rgba(0,0,0,.45); }
.vtile video{ width:100%; height:100%; object-fit:cover; display:block; background:#0c1226; }
.vtile-you{ outline:2px solid rgba(34,211,238,.55); outline-offset:-2px; }
.vtile .ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; text-align:center; padding:1rem; color:#9fb0d8; background:linear-gradient(160deg,#121a38,#0b1024); }
.vtile .ph b{ color:#fff; font-size:1rem; }
.vtile .name{ position:absolute; left:12px; bottom:12px; background:rgba(8,12,28,.6); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); color:#EAF0FF; font-size:.8rem; font-weight:600; padding:.22rem .6rem; border-radius:999px; }
.hand-flag{ position:absolute; top:12px; right:12px; background:linear-gradient(135deg,#FBBF24,#F59E0B); color:#3a2a05; font-size:.76rem; font-weight:800; padding:.25rem .6rem; border-radius:999px; box-shadow:0 6px 16px rgba(245,158,11,.5); z-index:2; }
.wb-wrap{ position:relative; border-radius:20px; overflow:hidden; border:1px solid rgba(139,92,246,.4); box-shadow:0 18px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(139,92,246,.15); background:#fff; }
.wb-tools{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.55rem .7rem; background:linear-gradient(90deg,#0e1430,#161d3f); border-bottom:1px solid rgba(255,255,255,.08); }
.wb-color{ width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,.5); box-shadow:0 0 0 1px rgba(0,0,0,.25); transition:transform .12s; }
.wb-color:hover{ transform:scale(1.15); }
.wb-color.sel{ outline:2px solid #22D3EE; outline-offset:2px; }
.wb-btn{ font:inherit; font-size:.82rem; font-weight:600; background:rgba(255,255,255,.08); color:#dbe5ff; border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:.32rem .7rem; cursor:pointer; }
.wb-btn:hover{ background:rgba(255,255,255,.16); }
.wb-label{ margin-left:auto; font-size:.78rem; color:#8C9AC4; }
.wb{ display:block; width:100%; height:360px; background:#fff; cursor:crosshair; touch-action:none; }
.wb-view.active{ background:rgba(34,211,238,.28); border-color:#22D3EE; color:#9EEAFF; }
textarea.shared-doc{ cursor:text; border:0; padding:1rem; font:1rem/1.5 Nunito,sans-serif; color:#2A2320; resize:none; }
textarea.shared-doc::placeholder{ color:#9aa0ad; }
.room-side{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
.room-side .glass{ background:rgba(255,255,255,.055); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1rem 1.1rem; box-shadow:0 16px 40px rgba(0,0,0,.3); }
.room-side .glass h3{ margin:0 0 .55rem; color:#fff; font-size:1rem; }
.room-side .glass .muted{ color:#9aa7cc; }
.room-side .glass a.btn-soft{ background:rgba(34,211,238,.14); color:#9EEAFF; border:1px solid rgba(34,211,238,.4); }
.room-notes{ width:100%; min-height:84px; background:rgba(8,12,28,.5); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:.6rem; font:inherit; color:#E7ECFF; resize:vertical; }
.room-notes::placeholder{ color:#7a86ab; }
.room-hint{ font-size:.78rem; color:#8C9AC4; text-align:center; margin:0; }
.room-side .chat{ display:flex; flex-direction:column; max-height:360px; }
.chat-head{ font-weight:700; color:#fff; margin-bottom:.5rem; }
.room-side .chat-msgs{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:.4rem; min-height:120px; padding-right:.2rem; background:none; }
.room-side .chat .msg{ align-self:flex-start; max-width:86%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); padding:.4rem .65rem; border-radius:12px; font-size:.88rem; color:#E7ECFF; }
.room-side .chat .msg.me{ align-self:flex-end; background:linear-gradient(135deg,#22D3EE,#8B5CF6); border:none; color:#06121f; font-weight:500; }
.room-side .chat .msg .mn{ display:block; font-size:.7rem; opacity:.7; margin-bottom:.1rem; }
.chat-in{ display:flex; gap:.5rem; margin-top:.6rem; }
.chat-in input{ flex:1; background:rgba(8,12,28,.5); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:11px; padding:.55rem .7rem; font:inherit; }
.chat-in input::placeholder{ color:#7a86ab; }
.chat-in button{ font:inherit; font-weight:700; border:none; border-radius:11px; padding:.55rem 1rem; cursor:pointer; background:linear-gradient(135deg,#22D3EE,#3B82F6); color:#04121f; }
/* Zoom-style control dock */
.dock{ position:fixed; left:50%; bottom:1.1rem; transform:translateX(-50%); z-index:5; display:flex; gap:.5rem; padding:.55rem; border-radius:22px; background:rgba(12,17,38,.74); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.14); box-shadow:0 20px 60px rgba(0,0,0,.55); }
.dock-btn{ display:flex; flex-direction:column; align-items:center; gap:.25rem; min-width:76px; padding:.55rem .6rem; border:none; border-radius:16px; cursor:pointer; font:inherit; background:rgba(255,255,255,.06); color:#D7E0FF; transition:transform .12s, background .15s, box-shadow .15s, color .15s; }
.dock-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.12); }
.dock-btn .ic, .dock-btn .ic svg{ width:24px; height:24px; display:block; }
.dock-btn .lbl{ font-size:.72rem; font-weight:600; white-space:nowrap; }
.db-camtoggle:hover{ box-shadow:0 0 0 1px rgba(34,211,238,.5), 0 8px 24px rgba(34,211,238,.3); color:#9EEAFF; }
.db-mictoggle:hover{ box-shadow:0 0 0 1px rgba(163,230,53,.5), 0 8px 24px rgba(163,230,53,.3); color:#D9F99D; }
.db-sharescreen{ background:linear-gradient(135deg, rgba(139,92,246,.28), rgba(139,92,246,.12)); color:#D6C8FF; }
.db-sharescreen:hover{ box-shadow:0 0 0 1px rgba(139,92,246,.6), 0 8px 26px rgba(139,92,246,.45); }
.db-raisehand:hover{ box-shadow:0 0 0 1px rgba(251,191,36,.5), 0 8px 24px rgba(251,191,36,.3); color:#FDE68A; }
.dock-btn.on{ background:linear-gradient(135deg,#8B5CF6,#6D28D9); color:#fff; box-shadow:0 0 0 1px rgba(139,92,246,.7), 0 10px 28px rgba(139,92,246,.5); }
.db-raisehand.on{ background:linear-gradient(135deg,#FBBF24,#F59E0B); color:#3a2a05; box-shadow:0 0 0 1px rgba(245,158,11,.7), 0 10px 28px rgba(245,158,11,.5); }
.dock-btn.off{ background:linear-gradient(135deg,#FB7185,#E11D48); color:#fff; box-shadow:0 0 0 1px rgba(225,29,72,.6), 0 8px 22px rgba(225,29,72,.4); }
@media(max-width:560px){ .dock-btn{ min-width:60px; padding:.5rem .4rem; } .dock-btn .lbl{ font-size:.64rem; } }
@media(prefers-reduced-motion:reduce){ .room-aurora{ animation:none; } .rt-dot{ animation:none; } }

/* ===== futuristic dashboards (scoped to logged-in app routes) ===== */
body.app-futuristic{ background:radial-gradient(1100px 720px at 75% -12%, #18224d 0%, #0b1026 55%, #070a18 100%) fixed; color:#E7ECFF; }
body.app-futuristic::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; filter:blur(70px); opacity:.42;
  background:
    radial-gradient(34% 48% at 16% 24%, rgba(34,211,238,.5), transparent 70%),
    radial-gradient(40% 52% at 60% 12%, rgba(139,92,246,.5), transparent 70%),
    radial-gradient(42% 56% at 88% 40%, rgba(244,114,182,.4), transparent 70%);
  animation:auroraFloat 22s ease-in-out infinite alternate; }
body.app-futuristic #app{ position:relative; z-index:1; }
body.app-futuristic .nav{ background:rgba(11,16,38,.82); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.1); }
body.app-futuristic .shell > h2{ color:#fff; }
body.app-futuristic .muted{ color:#9aa7cc; }
body.app-futuristic .sec-h{ color:#aab6da; }
/* glass cards */
body.app-futuristic .card{ background:rgba(255,255,255,.05); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.12); color:#E7ECFF; box-shadow:0 16px 40px rgba(0,0,0,.32); }
body.app-futuristic .card h1, body.app-futuristic .card h2, body.app-futuristic .card h3, body.app-futuristic .card h4{ color:#fff; }
body.app-futuristic .card.lift:hover{ border-color:rgba(34,211,238,.5); box-shadow:0 16px 44px rgba(34,211,238,.18); }
/* inputs */
body.app-futuristic input, body.app-futuristic textarea, body.app-futuristic select{ background:rgba(8,12,28,.5); border-color:rgba(255,255,255,.16); color:#fff; }
body.app-futuristic input::placeholder, body.app-futuristic textarea::placeholder{ color:#7a86ab; }
body.app-futuristic .field label{ color:#cdd7f5; }
/* tabs (segmented) */
body.app-futuristic .tabs{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
body.app-futuristic .tab{ color:#aab6da; }
body.app-futuristic .tab:hover{ color:#fff; background:rgba(255,255,255,.1); }
body.app-futuristic .tab.active{ background:var(--gold); color:#16213a; box-shadow:0 2px 10px rgba(187,164,106,.4); }
/* buttons */
body.app-futuristic .btn-soft{ background:rgba(255,255,255,.08); color:#EAF0FF; border:1px solid rgba(255,255,255,.18); }
body.app-futuristic .btn-soft:hover{ background:rgba(255,255,255,.16); }
body.app-futuristic .btn-ghost{ color:#cdd7f5; }
body.app-futuristic .btn-ghost:hover{ background:rgba(255,255,255,.08); }
body.app-futuristic a:not(.btn){ color:var(--gold); }
body.app-futuristic .nav-links a:not(.btn), body.app-futuristic .nav-links button.linkish{ color:#D8E0EE; }
body.app-futuristic .nav-links a.btn-primary{ color:#14253F; }
/* list rows + stats */
body.app-futuristic .tutor-row{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); border-radius:14px; margin-bottom:.5rem; padding:.6rem .7rem; }
body.app-futuristic .merit{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
body.app-futuristic .merit > div:first-child{ color:#22D3EE !important; }
body.app-futuristic .num{ color:#22D3EE !important; }
/* browse tiles */
body.app-futuristic .tile{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#E7ECFF; }
body.app-futuristic .tile .sub{ color:#9aa7cc; }
body.app-futuristic .empty, body.app-futuristic .empty p{ color:#9aa7cc; }
/* availability grid */
body.app-futuristic .avail th, body.app-futuristic .avail .rowlabel{ color:#9aa7cc; }
body.app-futuristic .cell{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:#cdd7f5; }
body.app-futuristic .cell.free{ background:var(--sage); border-color:transparent; color:#06281c; box-shadow:0 0 14px rgba(62,142,110,.5); }
/* chat in dashboards (if any) keep readable; gradient send */
body.app-futuristic .btn-primary{ box-shadow:0 8px 20px rgba(187,164,106,.32); }
/* whole-app futuristic: landing + auth pages */
body.app-futuristic .section h2{ color:#fff; }
body.app-futuristic .quote{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#E7ECFF; }
body.app-futuristic .quote p{ color:#E7ECFF; }
body.app-futuristic .quote .who b{ color:#fff; }
body.app-futuristic .faq-item{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); }
body.app-futuristic .faq-item button{ color:#EAF0FF; }
body.app-futuristic .faq-item .a{ color:#9aa7cc; }
body.app-futuristic .subject-chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#E7ECFF; }
body.app-futuristic .subject-chip:hover{ background:rgba(255,255,255,.12); border-color:rgba(34,211,238,.45); }
body.app-futuristic .role-card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:#E7ECFF; }
body.app-futuristic .role-card b, body.app-futuristic .role-card strong{ color:#fff; }
body.app-futuristic .role-card.sel{ background:rgba(187,164,106,.18); border-color:var(--gold); }
body.app-futuristic .auth-wrap .card{ box-shadow:0 24px 60px rgba(0,0,0,.45); }
/* student browse: grades / categories / breadcrumbs / time slots — clearly visible, on-theme */
body.app-futuristic .chip{ background:rgba(255,255,255,.1); color:#EAF0FF; border:1px solid rgba(255,255,255,.24); font-weight:600; }
body.app-futuristic .chip:hover{ background:rgba(34,211,238,.2); border-color:rgba(34,211,238,.7); color:#fff; box-shadow:0 6px 18px rgba(34,211,238,.25); }
body.app-futuristic .gbtn{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); color:#EAF0FF; }
body.app-futuristic .gbtn:hover{ border-color:rgba(34,211,238,.6); box-shadow:0 8px 22px rgba(34,211,238,.2); }
body.app-futuristic .gbtn .muted{ color:#9aa7cc; }
body.app-futuristic .crumbs button{ color:#aeb9d8; }
body.app-futuristic .crumbs button:hover{ color:#fff; background:rgba(255,255,255,.1); }
body.app-futuristic .crumbs button.cur{ color:#fff; }
body.app-futuristic .slot{ background:rgba(62,142,110,.22); border:1px solid rgba(62,142,110,.7); color:#A7F3D0; }
body.app-futuristic .slot:hover{ background:var(--sage); color:#06281c; box-shadow:0 0 16px rgba(62,142,110,.55); }
/* reviews */
.review{ padding:.55rem 0; border-bottom:1px solid var(--line); }
.review:last-child{ border-bottom:none; }
.rstars{ color:#FBBF24; letter-spacing:.05rem; }
.rtext{ font-size:.9rem; margin-top:.15rem; }
body.app-futuristic .review{ border-color:rgba(255,255,255,.1); }
body.app-futuristic .rtext{ color:#cdd7f5; }
/* direct chat (DM) */
.dm-msgs{ min-height:240px; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:.45rem; padding:.2rem; }
.dm-msgs .msg{ align-self:flex-start; max-width:82%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:.45rem .7rem; border-radius:13px; color:#EAF0FF; font-size:.92rem; }
.dm-msgs .msg.me{ align-self:flex-end; background:linear-gradient(135deg,#22D3EE,#8B5CF6); color:#06121f; border:none; }
.dm-msgs .msg .mn{ display:block; font-size:.7rem; opacity:.7; margin-bottom:.05rem; }
.dm-card .chat-in{ display:flex; gap:.5rem; margin-top:.6rem; }
.dm-card .chat-in input{ flex:1; }
.dm-card .chat-in button{ font:inherit; font-weight:700; border:none; border-radius:11px; padding:.55rem 1.1rem; cursor:pointer; background:linear-gradient(135deg,#22D3EE,#3B82F6); color:#04121f; }
.msg-badge{ display:inline-block; background:linear-gradient(135deg,#FB7185,#E11D48); color:#fff; font-size:.6rem; font-weight:800; line-height:1; padding:.18rem .42rem; border-radius:999px; vertical-align:middle; margin-left:.15rem; box-shadow:0 0 10px rgba(225,29,72,.5); }

/* ===== booking time/day filter chips ===== */
.filter-bar{ margin:.6rem 0 1rem; }
.filter-row{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.45rem; }
.filt-lbl{ font-weight:700; font-size:.8rem; min-width:50px; color:var(--muted); }
.fchip{ font:inherit; font-size:.82rem; padding:.28rem .8rem; border-radius:99px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--ink); transition:border-color .12s, background .12s, color .12s; }
.fchip:hover{ border-color:var(--primary); }
.fchip.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
body.app-futuristic .fchip{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#dbe5ff; }
body.app-futuristic .fchip:hover{ border-color:rgba(34,211,238,.6); }
body.app-futuristic .fchip.active{ background:rgba(34,211,238,.22); border-color:#22D3EE; color:#9EEAFF; }

/* ===== whiteboard tool active ===== */
.wb-tool.active{ background:rgba(34,211,238,.28) !important; border-color:#22D3EE !important; color:#9EEAFF !important; }

/* ===== AI Chat Widget (landing page floating bubble) ===== */
.chat-widget{ position:fixed; bottom:1.5rem; right:1.5rem; z-index:1000; display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
.chat-bubble{ width:54px; height:54px; border-radius:50%; background:var(--primary); color:#fff; border:none; cursor:pointer; font-size:1.35rem; box-shadow:0 4px 22px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center; transition:transform .15s,box-shadow .15s; flex-shrink:0; }
.chat-bubble:hover{ transform:scale(1.1); box-shadow:0 6px 30px rgba(0,0,0,.38); }
.chat-panel{ width:320px; max-height:440px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.28); display:flex; flex-direction:column; overflow:hidden; }
.chat-header{ padding:.65rem 1rem; background:var(--primary); color:#fff; font-weight:700; font-size:.88rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.chat-hclose{ background:none; border:none; color:rgba(255,255,255,.8); cursor:pointer; font-size:1.1rem; line-height:1; padding:.1rem .3rem; border-radius:4px; }
.chat-hclose:hover{ color:#fff; }
.chat-msgs{ flex:1; overflow-y:auto; padding:.6rem; display:flex; flex-direction:column; gap:.4rem; min-height:0; }
.chat-msg{ max-width:84%; padding:.48rem .72rem; border-radius:12px; font-size:.85rem; line-height:1.5; word-break:break-word; }
.chat-msg.bot{ background:var(--surface-2,#f4eedf); align-self:flex-start; border-radius:12px 12px 12px 3px; color:var(--ink); }
.chat-msg.user{ background:var(--primary); color:#fff; align-self:flex-end; border-radius:12px 12px 3px 12px; }
.chat-typing{ display:flex; gap:4px; padding:.42rem .55rem; align-self:flex-start; }
.chat-typing span{ width:7px; height:7px; background:var(--muted); border-radius:50%; animation:chatbounce 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2){ animation-delay:.2s; }
.chat-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes chatbounce{ 0%,60%,100%{ transform:translateY(0); } 30%{ transform:translateY(-6px); } }
.chat-foot{ padding:.42rem; border-top:1px solid var(--line); display:flex; gap:.35rem; }
.chat-inp{ flex:1; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:8px; padding:.46rem .68rem; font:inherit; font-size:.84rem; outline:none; min-width:0; }
.chat-inp:focus{ border-color:var(--primary); }
.chat-send{ background:var(--primary); color:#fff; border:none; border-radius:8px; padding:.46rem .85rem; cursor:pointer; font-weight:700; font-size:.84rem; white-space:nowrap; }
.chat-send:disabled{ opacity:.5; cursor:default; }
/* dark mode */
body.app-futuristic .chat-msg.bot{ background:rgba(255,255,255,.08); color:#dbe5ff; }
body.app-futuristic .chat-inp{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); color:#dbe5ff; }
body.app-futuristic .chat-inp:focus{ border-color:#22D3EE; }

/* ===== site-wide hover micro-interactions ===== */
.quote{ transition:transform .18s ease,box-shadow .18s ease; }
.quote:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.tutor-row{ transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }
.tutor-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--primary); }
.subject-chip.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.subject-chip.active .ico{ box-shadow:0 0 0 2px rgba(255,255,255,.5) inset; }
body.app-futuristic .subject-chip.active{ background:rgba(34,211,238,.28); border-color:#22D3EE; color:#9EEAFF; }

/* ===== interactive subject preview panel ===== */
.subject-preview{ position:relative; max-width:520px; }
.preview-close{ position:absolute; top:.8rem; right:.9rem; background:none; border:none; cursor:pointer; font-size:1rem; color:var(--muted); line-height:1; padding:.2rem; border-radius:6px; }
.preview-close:hover{ color:var(--ink); background:var(--surface-2); }
@keyframes previewIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
body.app-futuristic .preview-close:hover{ color:#fff; background:rgba(255,255,255,.1); }

/* ===== interactive testimonial carousel ===== */
.testi-carousel{ display:flex; align-items:center; gap:1rem; }
.testi-slide{ flex:1; min-width:0; animation:testiFade .35s ease; }
@keyframes testiFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.t-arrow{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:1.3rem; line-height:1; color:var(--ink); display:flex; align-items:center; justify-content:center; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }
.t-arrow:hover{ transform:translateY(-2px) scale(1.06); box-shadow:var(--shadow); border-color:var(--primary); }
.t-dots{ display:flex; justify-content:center; gap:.45rem; margin-top:.9rem; }
.t-dot{ width:9px; height:9px; border-radius:50%; border:none; background:var(--line); cursor:pointer; padding:0; transition:transform .15s ease,background .15s ease; }
.t-dot:hover{ transform:scale(1.25); }
.t-dot.active{ background:var(--primary); transform:scale(1.3); }
body.app-futuristic .t-arrow{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); color:#E7ECFF; }
body.app-futuristic .t-arrow:hover{ border-color:#22D3EE; }
body.app-futuristic .t-dot{ background:rgba(255,255,255,.2); }
body.app-futuristic .t-dot.active{ background:#22D3EE; }

/* ===== dashboard tab content fade-in ===== */
@keyframes tabFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.tab-fade{ animation:tabFadeIn .28s ease; }

/* ===== global press feedback for a more interactive feel ===== */
.btn:active{ transform:scale(.96); }
.tile:active{ transform:scale(.96); }
.subject-chip:active{ transform:scale(.96); }
.chip:active{ transform:scale(.95); }
.cell:active{ transform:scale(.9); }
.card.lift:active{ transform:translateY(-1px) scale(.985); }
.tutor-row:active{ transform:scale(.99); }
.t-arrow:active{ transform:scale(.9); }
.subject-preview .btn:active,.quote:active{ transform:scale(.99); }

/* ── Q&A Board ── */
.input-field { display:block; width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px; font-size:.9rem; font-family:inherit; background:var(--surface); color:var(--ink); box-sizing:border-box; }
.input-field:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(109,40,217,.12); }
textarea.input-field { resize:vertical; min-height:60px; }

/* ── Gamification bar ── */
.gamify-level { display:inline-flex; align-items:center; gap:.4rem; }

/* ── Drop-off review ── */
.dropoff-card { border-left:3px solid var(--primary); }

/* ── Futuristic theme overrides for new fields ── */
body.app-futuristic .input-field { background:rgba(8,12,28,.5); border-color:rgba(255,255,255,.16); color:#fff; }
body.app-futuristic .input-field:focus { border-color:#22D3EE; box-shadow:0 0 0 3px rgba(34,211,238,.15); }
body.app-futuristic .input-field::placeholder { color:#7a86ab; }

/* ── Study Room chat bubbles ── */
.room-bubble {
  max-width:80%;
  padding:.5rem .75rem;
  border-radius:12px 12px 12px 4px;
  background:var(--surface-2);
  color:var(--ink);
  font-size:.9rem;
  word-break:break-word;
}
.room-bubble.room-bubble-me {
  border-radius:12px 12px 4px 12px;
  background:var(--primary);
  color:#fff;
}
body.app-futuristic .room-bubble { background:rgba(255,255,255,.1); color:#EAF0FF; }
body.app-futuristic .room-bubble.room-bubble-me { background:linear-gradient(135deg,var(--primary),#7C3AED); color:#fff; }

/* ── Learning path progress ring / week row ── */
.path-week-done { text-decoration:line-through; opacity:.6; }

/* ── Group session pill overrides in futuristic ── */
body.app-futuristic .pill { background:rgba(187,164,106,.18); color:#e8d68a; }

/* ======================================================================
   THE STUDY DESK — warm consumer theme layer (appended last, wins ties)
   Restores a warm-paper light canvas over the dark "futuristic" theme.
   ====================================================================== */
:root{
  --bg:#FBF9F4;
  --surface:#FFFFFF;
  --surface-2:#F4EFE4;
  --ink:#1C1917;
  --muted:#78716C;
  --line:#E9E2D4;
  --primary:#6D28D9;
  --primary-ink:#4C1D95;
  --primary-soft:rgba(109,40,217,.08);
  --amber:#F59E0B;
  --radius:16px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(28,25,23,.06),0 8px 24px rgba(28,25,23,.07);
  --shadow-lift:0 2px 4px rgba(28,25,23,.08),0 14px 34px rgba(28,25,23,.12);
}
body, body.app-futuristic{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter','Nunito',system-ui,-apple-system,sans-serif;
  font-size:16.5px;
}
body.app-futuristic::before{ content:none; }
h1,h2,h3,h4,.brand,.hero-title,.impact .num,.countdown,.tile .lbl,.step .n,
.eyebrow,.rb-txt b,.avail th,.cert h1{
  font-family:'Sora','Inter',system-ui,sans-serif;
  letter-spacing:-0.02em;
}
body.app-futuristic .shell > h2, body.app-futuristic .section h2{ color:var(--ink); }
body.app-futuristic .muted{ color:var(--muted); }
body.app-futuristic .sec-h{ color:var(--muted); }
body.app-futuristic a:not(.btn){ color:var(--primary-ink); }

/* ---- nav: light, hairline + blur ---- */
.nav, body.app-futuristic .nav{
  background:rgba(251,249,244,.85);
  backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid rgba(28,25,23,.08);
}
.brand{ color:var(--primary-ink); font-weight:800; }
.nav-links a, .nav-links button.linkish,
body.app-futuristic .nav-links a:not(.btn), body.app-futuristic .nav-links button.linkish{ color:var(--muted); }
.nav-links a:hover, .nav-links button.linkish:hover{ color:var(--ink); background:rgba(28,25,23,.05); }
.nav-links a.btn-primary, body.app-futuristic .nav-links a.btn-primary{ background:var(--primary); color:#fff; }
.nav-links a.btn-primary:hover{ background:var(--primary); color:#fff; filter:brightness(1.08); }

/* ---- cards: white, soft double shadow ---- */
.card, body.app-futuristic .card{
  background:var(--surface);
  border:1px solid rgba(28,25,23,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--ink);
  backdrop-filter:none;
}
body.app-futuristic .card h1, body.app-futuristic .card h2,
body.app-futuristic .card h3, body.app-futuristic .card h4{ color:var(--ink); }
.card.lift:hover, body.app-futuristic .card.lift:hover{
  border-color:rgba(109,40,217,.25);
  box-shadow:var(--shadow-lift);
}

/* ---- buttons ---- */
.btn{ font-family:'Sora','Inter',sans-serif; font-weight:600; border-radius:12px; letter-spacing:-0.01em; }
.btn-primary, body.app-futuristic .btn-primary{
  background:var(--primary); color:#fff;
  box-shadow:0 1px 2px rgba(28,25,23,.08),0 6px 16px rgba(109,40,217,.28);
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.07); box-shadow:0 2px 4px rgba(28,25,23,.08),0 10px 22px rgba(109,40,217,.34); }
.btn-soft, body.app-futuristic .btn-soft{ background:var(--primary-soft); color:var(--primary-ink); border:none; }
.btn-soft:hover{ background:rgba(109,40,217,.14); border:none; transform:translateY(-1px); }
.btn-ghost, body.app-futuristic .btn-ghost{ background:none; border:1px solid var(--line); color:var(--ink); }
.btn:active, .btn-primary:active, .btn-soft:active{ transform:translateY(1px) scale(1); filter:none; }

/* ---- inputs ---- */
body.app-futuristic input, body.app-futuristic textarea, body.app-futuristic select,
body.app-futuristic .input-field, .input-field{
  background:var(--surface); border-color:var(--line); color:var(--ink);
}
body.app-futuristic input::placeholder, body.app-futuristic textarea::placeholder,
body.app-futuristic .input-field::placeholder{ color:#A8A29E; }
body.app-futuristic .field label{ color:var(--ink); }
.field input:focus,.field select:focus,.input-field:focus,
body.app-futuristic .input-field:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(109,40,217,.14);
}

/* ---- tabs: segmented pill control ---- */
.tabs, body.app-futuristic .tabs{
  display:inline-flex; gap:.15rem; background:rgba(28,25,23,.06);
  border:none; border-radius:999px; padding:4px; flex-wrap:wrap; max-width:100%;
}
.tab, body.app-futuristic .tab{
  color:var(--muted); font-weight:600; padding:.5rem 1rem; border-radius:999px;
  border-bottom:none; margin-bottom:0;
}
.tab:hover, body.app-futuristic .tab:hover{ color:var(--ink); background:rgba(255,255,255,.6); }
.tab.active, body.app-futuristic .tab.active,
.tab.active:hover, body.app-futuristic .tab.active:hover{
  background:#fff; color:var(--ink);
  box-shadow:0 1px 2px rgba(28,25,23,.1),0 3px 8px rgba(28,25,23,.08);
}

/* ---- gamification: the jewel ---- */
.gbar-meta{ display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.gbar-points{
  display:inline-flex; align-items:center;
  background:linear-gradient(135deg,#FBBF24,#F59E0B); color:#451A03;
  font-weight:700; font-size:.76rem; padding:.26rem .7rem; border-radius:999px;
  box-shadow:0 1px 2px rgba(245,158,11,.3),0 4px 10px rgba(245,158,11,.3);
  font-variant-numeric:tabular-nums;
}
.gbar-streak{
  display:inline-flex; align-items:center; gap:.3rem;
  background:#FEF3C7; color:#92400E; font-weight:700; font-size:.76rem;
  padding:.26rem .7rem; border-radius:999px;
}
.flame{ display:inline-block; animation:flamePulse 2.2s ease-in-out infinite; }
@keyframes flamePulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.18); opacity:.85; } }
.level-pill{ box-shadow:0 0 0 3px rgba(245,158,11,.28),0 2px 8px rgba(28,25,23,.14); }
.gbar-track{ height:8px !important; background:#EFE8D8 !important; border-radius:999px !important; }
.gbar-fill{ background:linear-gradient(90deg,#F59E0B,#FBBF24) !important; border-radius:999px !important; }
.medal{
  width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.98rem !important;
  background:#FFFBEB; border:2px solid var(--amber);
  box-shadow:0 1px 3px rgba(245,158,11,.35);
}
.merit, body.app-futuristic .merit{ background:#FFFBEB; border:1px solid rgba(245,158,11,.4); border-radius:14px; }
body.app-futuristic .merit > div:first-child{ color:var(--amber) !important; }
.num, body.app-futuristic .num{ color:var(--primary) !important; font-variant-numeric:tabular-nums; }
body.app-futuristic .pill{ background:var(--gold-soft); color:var(--gold-ink); }

/* ---- tutor rows / browse ---- */
.tutor-row, body.app-futuristic .tutor-row{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 1px 2px rgba(28,25,23,.04);
}
.tutor-row:hover, body.app-futuristic .tutor-row:hover{
  transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:rgba(109,40,217,.3);
}
.ava{ box-shadow:0 0 0 3px rgba(28,25,23,.06); }
.verified-badge{ border-radius:999px !important; }
.tile, body.app-futuristic .tile{ background:var(--surface); border-color:var(--line); color:var(--ink); border-radius:16px; }
.tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:rgba(109,40,217,.25); }
body.app-futuristic .tile .sub{ color:var(--muted); }
.chip, body.app-futuristic .chip{ background:var(--primary-soft); color:var(--primary-ink); border:none; }
.chip:hover, body.app-futuristic .chip:hover{ background:rgba(109,40,217,.15); color:var(--primary-ink); box-shadow:var(--shadow); }
.gbtn, body.app-futuristic .gbtn{ background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:12px; }
.gbtn:hover, body.app-futuristic .gbtn:hover{ border-color:var(--primary); box-shadow:var(--shadow); }
body.app-futuristic .gbtn .muted{ color:var(--muted); }
body.app-futuristic .crumbs button{ color:var(--muted); }
body.app-futuristic .crumbs button:hover{ color:var(--ink); background:var(--surface-2); }
body.app-futuristic .crumbs button.cur{ color:var(--ink); }
.slot, body.app-futuristic .slot{ background:var(--sage-soft); border:1px solid var(--sage); color:#2f5d4c; border-radius:12px; }
.slot:hover, body.app-futuristic .slot:hover{ background:var(--sage); color:#fff; box-shadow:none; }
body.app-futuristic .subject-chip{ background:var(--surface); border-color:var(--line); color:var(--ink); }
body.app-futuristic .subject-chip:hover{ background:var(--surface); border-color:var(--primary); }
.fchip, body.app-futuristic .fchip{ background:var(--surface); border-color:var(--line); color:var(--ink); }
.fchip:hover, body.app-futuristic .fchip:hover{ border-color:var(--primary); }
.fchip.active, body.app-futuristic .fchip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ---- availability grid ---- */
body.app-futuristic .avail th, body.app-futuristic .avail .rowlabel{ color:var(--muted); }
.cell, body.app-futuristic .cell{ background:var(--surface); border-color:var(--line); color:var(--muted); }
.cell.free, body.app-futuristic .cell.free{ background:var(--sage); border-color:var(--sage); color:#fff; box-shadow:none; font-weight:700; }

/* ---- chat bubbles (study rooms + DMs) ---- */
.room-bubble, body.app-futuristic .room-bubble{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line);
  border-radius:16px 16px 16px 4px;
  box-shadow:0 1px 2px rgba(28,25,23,.05);
}
.room-bubble.room-bubble-me, body.app-futuristic .room-bubble.room-bubble-me{
  background:rgba(109,40,217,.1); color:var(--primary-ink);
  border:1px solid rgba(109,40,217,.18);
  border-radius:16px 16px 4px 16px;
}
.dm-msgs .msg{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line);
  border-radius:16px 16px 16px 4px;
}
.dm-msgs .msg.me{
  background:rgba(109,40,217,.1); color:var(--primary-ink);
  border:1px solid rgba(109,40,217,.18);
  border-radius:16px 16px 4px 16px;
}
.msg .mn, .room-bubble .mn, .dm-msgs .msg .mn{ font-size:10px; color:var(--muted); opacity:1; }
.dm-card .chat-in button{ background:var(--primary); color:#fff; border-radius:12px; }

/* ---- reviews, quotes, faq, roles ---- */
body.app-futuristic .review{ border-color:var(--line); }
body.app-futuristic .rtext{ color:var(--ink); }
body.app-futuristic .quote{ background:var(--surface); border:1px solid var(--line); color:var(--ink); }
body.app-futuristic .quote p{ color:var(--ink); }
body.app-futuristic .quote .who b{ color:var(--ink); }
body.app-futuristic .faq-item{ background:var(--surface); border:1px solid var(--line); }
body.app-futuristic .faq-item button{ color:var(--ink); }
body.app-futuristic .faq-item .a{ color:var(--muted); }
body.app-futuristic .role-card{ background:var(--surface); border-color:var(--line); color:var(--ink); }
body.app-futuristic .role-card b, body.app-futuristic .role-card strong{ color:var(--ink); }
.role-card.sel, body.app-futuristic .role-card.sel{ background:var(--primary-soft); border-color:var(--primary); }
body.app-futuristic .t-arrow{ background:var(--surface); border-color:var(--line); color:var(--ink); }
body.app-futuristic .t-arrow:hover{ border-color:var(--primary); }
body.app-futuristic .t-dot{ background:var(--line); }
body.app-futuristic .t-dot.active{ background:var(--primary); }

/* ---- landing: impact strip + footer ---- */
.impact{ background:var(--surface); border:1px solid rgba(28,25,23,.06); box-shadow:var(--shadow); }
.impact .num{ color:var(--primary); font-weight:800; }
.impact .lbl{ color:var(--muted); }
.impact-strip{ background:var(--surface) !important; border:1px solid rgba(28,25,23,.06); box-shadow:var(--shadow); }
.impact-strip b{ font-variant-numeric:tabular-nums; font-family:'Sora',sans-serif; letter-spacing:-0.02em; }
.footer{ background:var(--surface-2); border-top:1px solid var(--line); color:var(--ink); }
.footer b{ color:var(--ink); }
.footer a, .footer .brand{ color:var(--primary-ink); }
.footer .muted{ color:var(--muted); }
.eyebrow{ color:var(--primary-ink); }

/* ---- login / auth welcome ---- */
.auth-wrap{ margin:3.5rem auto; }
.auth-wrap .card, body.app-futuristic .auth-wrap .card{
  padding:2rem 1.8rem; border-radius:var(--radius-lg);
  box-shadow:0 2px 4px rgba(28,25,23,.06),0 20px 50px rgba(28,25,23,.12);
}
.auth-wrap h2, .auth-wrap h3{ font-family:'Sora',sans-serif; font-weight:800; letter-spacing:-0.02em; }

/* ---- empty states ---- */
.empty, .empty-state, body.app-futuristic .empty{
  text-align:center; padding:2.6rem 1rem; color:var(--muted);
}
.empty h3, .empty-state h3{ color:var(--ink); font-weight:700; margin:.4rem 0 .2rem; }
.empty p, .empty-state p, body.app-futuristic .empty p{ color:var(--muted); max-width:42ch; margin:.2rem auto; }
.empty svg{ opacity:.85; }

/* ---- misc surfaces ---- */
.next-card{ background:linear-gradient(150deg,#F4EFE4,#FEF3C7); border:1px solid rgba(28,25,23,.06); }
.countdown{ color:var(--primary-ink); }
body.app-futuristic .chat-msg.bot{ background:var(--surface-2); color:var(--ink); }
body.app-futuristic .chat-inp{ background:var(--surface); border-color:var(--line); color:var(--ink); }
body.app-futuristic .chat-inp:focus{ border-color:var(--primary); }
.chat-bubble{ background:var(--primary); }
.chat-header{ background:var(--primary); }
.dropoff-card{ border-left-color:var(--amber); }

@media(prefers-reduced-motion:reduce){
  .flame{ animation:none; }
}

/* ---------- tn-hero (animated marquee hero) ---------- */
.tn-hero{position:relative;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;text-align:center;padding:2rem 1rem 0}
.tn-hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:52rem;margin-bottom:22vh}
.tn-hero-pill{display:inline-block;padding:.35rem 1rem;border:1px solid var(--line,#ddd);border-radius:999px;font-size:.82rem;color:var(--muted,#666);background:rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:1.4rem}
.tn-hero-title{font-family:'Playfair Display','Nunito',system-ui,sans-serif;font-size:clamp(2.8rem,8vw,4.5rem);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:0 0 1.2rem;color:var(--ink,#1a1a1a)}
.tn-hero-line{display:block}
.tn-hero-word{display:inline-block;animation:tnHeroWordIn .6s cubic-bezier(.25,.46,.45,.94) both}
.tn-hero-desc{max-width:36rem;color:var(--muted,#666);font-size:1.08rem;line-height:1.6;margin:0 0 1.8rem;animation:tnHeroWordIn .6s cubic-bezier(.25,.46,.45,.94) .5s both}
.tn-hero-cta{border:none;cursor:pointer;border-radius:999px;padding:.8rem 2rem;font:inherit;font-weight:700;font-size:1.05rem;color:#fff;background:var(--primary,#6D28D9);box-shadow:0 10px 25px -5px rgba(109,40,217,.4),0 8px 10px -6px rgba(109,40,217,.3);transition:transform .18s ease;animation:tnHeroWordIn .6s cubic-bezier(.25,.46,.45,.94) .65s both}
.tn-hero-cta:hover{transform:scale(1.05)}
.tn-hero-cta:active{transform:scale(.95)}
@keyframes tnHeroWordIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tn-hero-marquee{position:absolute;left:0;right:0;bottom:0;height:33%;display:flex;align-items:center;overflow:hidden;z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.tn-hero-track{display:flex;gap:1rem;width:max-content;padding:0 .5rem}
.tn-hero-card{flex:0 0 auto;height:12rem;aspect-ratio:3/4;border-radius:1rem;overflow:hidden;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.tn-hero-rot-a{transform:rotate(-2deg)}
.tn-hero-rot-b{transform:rotate(5deg)}
.tn-hero-card img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion: no-preference){
  .tn-hero-track{animation:tnHeroMarquee 40s linear infinite}
}
@keyframes tnHeroMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){
  .tn-hero-card{height:9rem}
  .tn-hero-content{margin-bottom:26vh}
}