/* ============ MindGrid Virtual Labs - Design Tokens ============ */
:root {
  /* Ink / neutrals */
  --ink:      #0E1A28;
  --ink-2:    #3C4D60;
  --ink-3:    #6B7C90;
  --ink-4:    #9AA9B9;
  --paper:    #F1F4F8;
  --paper-2:  #E8EDF3;
  --surface:  #FFFFFF;
  --surface-2:#F7F9FC;
  --line:     #E1E7EF;
  --line-2:   #D2DBE6;

  /* Brand */
  --brand:      #1E50E5;
  --brand-deep: #133093;
  --brand-soft: #E9EFFE;
  --brand-tint: #F3F6FE;

  /* Reaction accent (phenolphthalein) */
  --pink:     #E5468A;
  --pink-soft:#FCE7F1;

  /* Status */
  --ok:      #15A36B;
  --ok-soft: #E2F5EC;
  --warn:    #E0922A;
  --warn-soft:#FBF0DD;
  --bad:     #DC3B4B;
  --bad-soft:#FBE6E8;

  /* Subject hues */
  --phys:      #3B6FE0;
  --phys-soft: #E8EFFC;
  --chem:      #0E9C9C;
  --chem-soft: #DEF4F4;
  --bio:       #1B9E4B;
  --bio-soft:  #E2F4E8;
  --math:      #D97706;
  --math-soft: #FEF3C7;
  --integ:     #7A5BF0;
  --integ-soft:#EDE8FD;

  /* Type */
  --font-display: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-ui:      'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(14,26,40,.06), 0 1px 3px rgba(14,26,40,.04);
  --sh-2: 0 2px 8px rgba(14,26,40,.06), 0 8px 24px rgba(14,26,40,.06);
  --sh-3: 0 12px 40px rgba(14,26,40,.12);
  --sh-brand: 0 8px 24px rgba(30,80,229,.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }

h1, h2, h3, h4, h5 { font-family: var(--font-display); margin: 0; font-weight: 650; letter-spacing: -.015em; line-height: 1.08; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
::selection { background: var(--brand-soft); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }

/* ============ Reusable atoms ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14.5px;
  padding: 11px 18px; border-radius: 10px; transition: all .16s ease;
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--ink-4); }
.btn-soft { background: var(--brand-soft); color: var(--brand-deep); }
.btn-soft:hover { background: #DDE7FD; }
.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 8px 13px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 100px;
  background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 9px;
  background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: all .14s ease; cursor: pointer;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
.chip.active { background: var(--ink); color: #fff; box-shadow: none; }

.card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); border: 1px solid var(--line);
}

.eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* fade-in helper */
@keyframes fadeUp { from { opacity:0; transform: translateY(11px); } to { opacity:1; transform: none; } }
.fade-up { animation: fadeUp .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ v1 Motion System ============ */
:root {
  --ease-out:   cubic-bezier(.22,.8,.3,1);    /* decelerate - entrances */
  --ease-spring:cubic-bezier(.34,1.4,.5,1);   /* slight overshoot - pops */
  --ease-inout: cubic-bezier(.5,.05,.2,1);    /* smooth both ends */
}

/* Buttons: tactile press + smoother hover */
.btn { transition: background .16s var(--ease-out), box-shadow .18s var(--ease-out), transform .12s var(--ease-spring); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.chip { transition: background .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .12s var(--ease-spring); }
.chip:active { transform: scale(.96); }

/* Inputs: focus ring */
input, textarea { transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out); }
input:focus, textarea:focus { box-shadow: 0 0 0 3px var(--brand-soft); }

/* Range sliders - tactile thumb (Chromium + Firefox) */
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 100px;
  background: var(--paper-2); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%; background: #fff; cursor: grab;
  border: 2px solid currentColor; box-shadow: var(--sh-1);
  transition: transform .12s var(--ease-spring), box-shadow .15s var(--ease-out); }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); box-shadow: var(--sh-2); }
input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.2); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 2px solid currentColor; box-shadow: var(--sh-1); cursor: grab; }

/* Entrance + feedback keyframes */
@keyframes slideIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popIn    { 0% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes flashPulse { 0% { box-shadow: 0 0 0 0 var(--brand-soft); } 100% { box-shadow: 0 0 0 16px rgba(30,80,229,0); } }
@keyframes valuePop { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }

.anim-slide { animation: slideIn .42s var(--ease-out) both; }
.anim-pop   { animation: popIn .34s var(--ease-spring) both; }
.flash-pulse { animation: flashPulse .55s var(--ease-out); }
.value-pop  { display: inline-block; animation: valuePop .4s var(--ease-spring); }

/* Stagger utility: set --i on each child */
.stagger > * { animation: slideIn .46s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
}

/* ============ v2 Design Tokens ============ */
:root {
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);  /* bigger spring overshoot */
  --glow-brand:  0 0 0 0 rgba(30,80,229,.0);
  --gradient-brand: linear-gradient(135deg, #1E50E5, #7A5BF0);
  --gradient-warm:  linear-gradient(135deg, #E0922A, #E5468A);
  --gradient-cool:  linear-gradient(150deg, #0E9C9C, #1B9E4B);
}

/* ============ Page Transitions ============ */
@keyframes pageFadeUp {
  from { opacity: 0; transform: translateY(12px) scale(.996); }
  to   { opacity: 1; transform: none; }
}
.page-enter { animation: pageFadeUp .34s var(--ease-out) both; }

/* ============ Skeleton Shimmer ============ */
@keyframes shimmer {
  0%   { background-position:  200% center; }
  100% { background-position: -200% center; }
}
.skeleton {
  background: linear-gradient(90deg,
    var(--paper-2) 25%, var(--surface) 50%, var(--paper-2) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--r-sm);
}

/* ============ Float Animations ============ */
@keyframes floatY   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatYSm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px);  } }
@keyframes orbitCW  {
  from { transform: rotate(0deg)   translateX(var(--orbit-r, 60px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r, 60px)) rotate(-360deg); }
}
@keyframes orbitCCW {
  from { transform: rotate(0deg)    translateX(var(--orbit-r, 60px)) rotate(0deg); }
  to   { transform: rotate(-360deg) translateX(var(--orbit-r, 60px)) rotate(360deg); }
}
.float      { animation: floatY   4s ease-in-out infinite; }
.float-sm   { animation: floatYSm 3s ease-in-out infinite; }
.float-slow { animation: floatY   7s ease-in-out infinite; }

/* ============ Scroll Reveal ============ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }

.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal-up.in { opacity: 1; transform: none; }

.reveal-pop {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-bounce);
}
.reveal-pop.in { opacity: 1; transform: scale(1); }

.reveal-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal-left.in { opacity: 1; transform: none; }

/* Stagger children in a .reveal-stagger container */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.reveal-stagger.in > *       { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 350ms; }

/* ============ Toast Notifications ============ */
@keyframes toastIn  {
  from { opacity: 0; transform: translateX(110%) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(60%) scale(.9); }
}
.toast-enter { animation: toastIn  .36s var(--ease-bounce) both; }
.toast-exit  { animation: toastOut .22s var(--ease-out)   both; }

/* ============ Gradient Text ============ */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-warm {
  background: var(--gradient-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============ Glow Effects ============ */
@keyframes glowPulse {
  0%,100% { box-shadow: var(--sh-brand); }
  50%     { box-shadow: 0 8px 40px rgba(30,80,229,.45); }
}
/* Glow pulse only on hero CTAs - not every primary button */
.btn-primary.btn-hero { animation: glowPulse 2.8s ease-in-out infinite; }
.btn-primary.btn-hero:hover, .btn-primary.btn-hero:focus { animation: none; }

@keyframes ambientPulse {
  0%,100% { opacity: .55; transform: scale(1);    }
  50%     { opacity: .85; transform: scale(1.06); }
}

/* ============ Card Depth & Interaction ============ */
.card {
  transition: box-shadow .22s var(--ease-out), transform .18s var(--ease-out), border-color .18s;
}
.card-hover:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  will-change: transform;
}
.card-tilt {
  transform-style: preserve-3d;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

/* ============ Number Pop ============ */
@keyframes numPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.num-pop { display: inline-block; animation: numPop .38s var(--ease-spring); }

/* ============ Gradient Borders ============ */
.card-brand {
  position: relative;
  border: none !important;
}
.card-brand::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--r-lg) + 1.5px);
  background: var(--gradient-brand);
  z-index: -1;
}

/* ============ Dot Grid Background ============ */
.dot-grid {
  background-image: radial-gradient(var(--line) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
}

/* ============ Aurora Blob ============ */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .25;
  pointer-events: none;
}

/* ============ Interactive Highlight ============ */
.highlight-bar {
  position: relative;
}
.highlight-bar::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 8px;
  background: var(--brand-soft);
  z-index: -1;
  border-radius: 3px;
}

/* ============ Progress bar animated fill ============ */
.bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width .9s var(--ease-out);
}

/* ============ Sidebar nav item transitions ============ */
.nav-item {
  transition: background .14s var(--ease-out), color .14s, transform .1s var(--ease-spring);
}
.nav-item:hover  { transform: translateX(2px); }
.nav-item.active { transform: none; }

/* ============ Focus visible (keyboard nav) ============ */
:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   RESPONSIVE - Tablet (≤ 1024px) + Mobile (≤ 680px)
   ============================================================ */

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  /* Sidebar collapses to icon-only rail */
  aside { width: 68px !important; overflow: hidden; }
  aside .sidebar-label { display: none; }
  aside nav button span:not([data-icon]) { display: none; }
  aside .upgrade-card { display: none; }
  /* Dashboard grids: 2-col */
  .dash-stat-grid { grid-template-columns: 1fr 1fr !important; }
  /* Results grid: single col */
  .results-grid { grid-template-columns: 1fr !important; }
  /* Lab builder: 1-col stacked */
  .builder-grid { grid-template-columns: 1fr !important; }
  /* Admin grids */
  .admin-grid { grid-template-columns: 1fr !important; }
  /* Lab canvas + panel: stack vertically */
  .lab-panel { width: 100% !important; max-height: 220px; }
}

/* ---- Mobile ---- */
@media (max-width: 680px) {
  /* Hide sidebar entirely; show bottom nav */
  aside { display: none !important; }

  /* Mobile bottom navigation bar */
  .mobile-nav {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .mobile-nav button {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 12px; font-size: 10px; font-weight: 600; color: var(--ink-3);
    border-radius: 10px;
  }
  .mobile-nav button.active { color: var(--brand); }

  /* Add bottom padding to main content so it's not hidden by nav */
  #root > div > div:last-child { padding-bottom: 72px; }

  /* TopBar: hide search, compress */
  .topbar-search { display: none !important; }
  header { padding: 0 14px !important; }

  /* Dashboard stats: 2-col */
  .dash-stat-grid { grid-template-columns: 1fr 1fr !important; }
  .dash-main-grid { grid-template-columns: 1fr !important; }

  /* Lab: hide tool rail; compress layout */
  .tool-rail { display: none !important; }
  .lab-panel { display: none !important; }
  .lab-canvas { padding: 8px !important; }
  .lab-topbar-steps { display: none !important; }

  /* Cards: remove box-shadow on mobile for perf */
  .card { box-shadow: none !important; border: 1px solid var(--line); }

  /* Results page */
  .results-hero { flex-direction: column !important; gap: 16px !important; }
  .results-hero > div:last-child { width: 100% !important; }

  /* Landing: stack hero */
  .hero-inner { flex-direction: column !important; gap: 28px !important; }
  .hero-bench { display: none !important; }
  .hero-title { font-size: clamp(28px, 8vw, 50px) !important; }
  .landing-pricing { grid-template-columns: 1fr !important; }
  .landing-stats { grid-template-columns: 1fr 1fr !important; }
  .landing-exp-grid { grid-template-columns: 1fr 1fr !important; }

  /* Typography scale down */
  h1 { font-size: clamp(22px, 6vw, 32px) !important; }

  /* Padding reduction */
  .page-pad { padding: 16px !important; }
}

/* ---- Small mobile ---- */
@media (max-width: 380px) {
  .dash-stat-grid { grid-template-columns: 1fr !important; }
  .landing-stats  { grid-template-columns: 1fr !important; }
}

/* Show mobile-nav div (hidden by default on desktop) */
.mobile-nav { display: none; }

/* ============================================================
   LARGE SCREEN SCALING  -  1440 · 1920 · 2560
   Every page uses  max-width: var(--page-max)  and
   padding:  XX var(--page-pad)  so one rule set controls all.
   ============================================================ */

:root {
  --page-max:  1240px;   /* default (~1280-1440 monitors) */
  --lp-max:    1160px;   /* landing page sections */
  --page-pad:  36px;     /* horizontal padding inside content wrappers */
  --sidebar-w: 230px;    /* Sidebar width */
}

@media (min-width: 1440px) {
  :root {
    --page-max:  1380px;
    --lp-max:    1320px;
    --page-pad:  48px;
    --sidebar-w: 256px;
  }
  aside { width: var(--sidebar-w) !important; }
}

@media (min-width: 1920px) {
  :root {
    --page-max:  1680px;
    --lp-max:    1600px;
    --page-pad:  64px;
    --sidebar-w: 280px;
  }
  /* Slightly larger base type */
  body { font-size: 16px; }
  .btn    { font-size: 15px; }
  .btn-sm { font-size: 13.5px; }
  .btn-lg { font-size: 17px; padding: 16px 28px; }
  /* Bigger cards */
  .card { border-radius: 18px; }
  /* TopBar: a touch taller */
  header[style] { height: 68px !important; }
}

@media (min-width: 2560px) {
  :root {
    --page-max:  2080px;
    --lp-max:    1960px;
    --page-pad:  80px;
    --sidebar-w: 300px;
  }
  body { font-size: 17px; }
}

/* Keep tablet/mobile overrides from fighting large-screen rules */
@media (max-width: 1024px) {
  aside { width: 68px !important; }
}

/* Large screen: more grid columns in help/teacher sections */
@media (min-width: 1600px) {
  /* Help center video grid: 4 cols */
  .help-video-grid { grid-template-columns: repeat(4,1fr) !important; }
  /* Teacher stats row */
  .teacher-stats-row { grid-template-columns: repeat(5,1fr) !important; }
  /* Admin stats row */
  .admin-stats-row  { grid-template-columns: repeat(5,1fr) !important; }
}

/* Fluid hero heading for landing page */
.hero-h1 { font-size: clamp(36px, 3.6vw, 80px) !important; }

/* ── Mobile-responsive lab workspace ──────────────────────────────
   On phones/small tablets the 3-column lab (tool-rail · stage · panel)
   stacks vertically: the rail hides, the stage sits on top, and the
   controls/procedure panel becomes a full-width section below. */
@media (max-width: 900px) {
  .lab-body  { flex-direction: column !important; overflow-y: auto !important; }
  .lab-rail  { display: none !important; }
  .lab-side  { width: 100% !important; max-width: 100% !important;
               border-left: none !important; border-top: 1px solid var(--line) !important; }
  .lab-stage { min-height: 52vw !important; }
}

/* Scene graphics (SVG/canvas) always scale to fit their stage - this is what
   stops the apparatus spilling off the screen on phones & tablets. */
.lab-stage svg, .lab-stage canvas { max-width: 100%; height: auto; }

/* Lab top bar: a single non-wrapping row whose intrinsic width (~850px) used to
   force the whole page wide on phones/tablets. Collapse it down progressively. */
@media (max-width: 900px) {
  .lab-topbar-steps { display: none !important; }   /* step dots - bottom status bar still shows the step */
  .lab-tb-title     { flex: 1; min-width: 0; }       /* let the title truncate instead of pushing width */
  .lab-tb-reset     { margin-left: auto; }
}
@media (max-width: 560px) {
  .lab-topbar              { gap: 10px !important; padding: 0 12px !important; }
  .lab-topbar .lab-tb-label { display: none !important; }  /* icon-only Exit/Reset, "Submit" not "Submit results" */
  .lab-topbar .lab-tb-sub   { display: none !important; }
}

/* ── Phone catch-all: stack any in-app multi-column grid to one column, and let
   filter/tab button rows wrap instead of forcing the page wide. Scoped to #main
   (the authed app body) + .lp-* so it can't disturb the lab workspace. ───────── */
@media (max-width: 680px) {
  #main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* horizontal chip / tab rows wrap onto multiple lines */
  .wrap-sm { flex-wrap: wrap !important; }
  /* safety net: never let an inner card force the whole page to scroll sideways
     (#main sits below the sticky TopBar, so clipping here is safe) */
  #main { overflow-x: hidden; }
}

/* TopBar: drop the search, role pill and name on phones so the header can't
   overflow (the bottom MobileNav handles navigation there). */
@media (max-width: 680px) {
  .tb-hide-sm { display: none !important; }
  header[style] { gap: 10px !important; padding: 0 12px !important; }
}

/* ── Landing page responsiveness (hero, nav, product tour) ──────── */
@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr !important; }
}
@media (max-width: 980px) {
  /* schools wall: 4 → 2 columns */
  .lp-tour[style*="repeat(4"] { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 760px) {
  .lp-nav  { display: none !important; }
  .lp-tour { grid-template-columns: 1fr !important; }
  /* footer + contact two-up stacks on mobile */
  .lp-foot { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════
   v3 - PREMIUM VISUAL POLISH (loaded last; lifts every page)
   Softer layered depth, gradient CTAs, card hover-lift, refined type.
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Figma-style layered shadows: soft, large, low-opacity */
  --sh-1: 0 1px 2px rgba(16,30,54,.04), 0 2px 6px rgba(16,30,54,.05);
  --sh-2: 0 4px 14px rgba(16,30,54,.06), 0 14px 36px -8px rgba(16,30,54,.10);
  --sh-3: 0 24px 60px -12px rgba(16,30,54,.22), 0 8px 22px -8px rgba(16,30,54,.12);
  --sh-brand: 0 10px 26px -6px rgba(30,80,229,.42);
  --r-md: 14px;  --r-lg: 18px;  --r-xl: 26px;
}

/* Type: a little bolder + tighter = more premium, more confident */
h1 { font-weight: 760; letter-spacing: -.038em; }
h2 { font-weight: 720; letter-spacing: -.03em; }
h3 { font-weight: 680; letter-spacing: -.02em; }
.text-gradient { background: linear-gradient(108deg,#1E50E5 0%,#5577f3 42%,#7A5BF0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Eyebrow → refined label with a leading rule */
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600; letter-spacing:.14em; }
.eyebrow::before { content:""; width:20px; height:2px; border-radius:2px; background:currentColor; opacity:.7; }

/* Primary CTA → subtle gradient + glossy top edge + crisper lift */
.btn { border-radius: 11px; }
.btn-lg { padding: 15px 26px; border-radius: 13px; }
.btn-primary {
  background: linear-gradient(180deg,#2b5bf0 0%,#1E50E5 100%);
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg,#1E50E5 0%,#1843c9 100%);
  box-shadow: 0 16px 34px -8px rgba(30,80,229,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1.5px);
}
.btn-ghost {
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(16,30,54,.04);
}
.btn-ghost:hover { background:#fff; box-shadow: inset 0 0 0 1px var(--ink-4), var(--sh-1); }

/* Cards → crisp hairline + smooth hover lift everywhere */
.card { border:1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out), border-color .24s var(--ease-out); }
.card-hover { cursor: pointer; }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); }

/* Public nav / footer links: animated underline */
.lp-nav button { position: relative; }
.lp-nav button::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px;
  border-radius:2px; background: var(--brand); transition: right .22s var(--ease-out); }
.lp-nav button:hover::after { right: 0; }

/* Inputs: softer, more designed */
input, textarea, select { border-radius: 11px; }
input:focus, textarea:focus { box-shadow: 0 0 0 4px var(--brand-soft); border-color: var(--brand) !important; }

/* Section reveal default (used widely) gets a smoother curve */
.reveal, .reveal-stagger > * { transition-timing-function: var(--ease-out); }

/* ── Accessibility ─────────────────────────────────────────────────────────── */
/* Visible keyboard focus everywhere (mouse users unaffected via :focus-visible) */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Skip-to-content link - first tab stop, hidden until focused */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 1000;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 10px;
  font-weight: 700; font-size: 14px; transition: top .15s ease;
}
.skip-link:focus { top: 0; }