:root {
    /* DARK MODE DEFAULT (Matches homepage) */
    --bg:           #09090b;
    --bg-glass:     rgba(9, 9, 11, 0.88);
    --surface:      #121216;
    --ink:          #ffffff;
    --ink-muted:    #94a3b8;
    --border:       rgba(255, 255, 255, 0.1);
    --accent:       #a78bfa;
    --accent-glow:  rgba(167, 139, 250, 0.15);
    
    /* Button Colors (Dark Mode) */
    --btn-bg:       #ffffff;
    --btn-text:     #000000;
    
    /* Vibrant Card Palette */
    --card-1:       #10b981; /* Emerald */
    --card-2:       #ec4899; /* Pink */
    --card-3:       #000000; /* Blue */
    --card-4:       #320a7a; /* Purple */
    
    /* Globals */
    --ease:         cubic-bezier(0.25, 1, 0.2, 1);
    --dur:          600ms;
  }

  /* LIGHT MODE OVERRIDES */
  html.light-mode {
    --bg:           #f1f5f9;
    --bg-glass:     rgba(241, 245, 249, 0.88);
    --surface:      #ffffff;
    --ink:          #0f172a;
    --ink-muted:    #64748b;
    --border:       rgba(0, 0, 0, 0.1);
    --accent:       #8b5cf6;
    --accent-glow:  rgba(139, 92, 246, 0.15);
    
    /* Button Colors (Light Mode) */
    --btn-bg:       #000000;
    --btn-text:     #ffffff;
  }

  /* NATIVE SYSTEM THEME DETECTION */
  @media (prefers-color-scheme: light) {
    html:not(.dark-mode) {
      --bg:           #f1f5f9;
      --bg-glass:     rgba(241, 245, 249, 0.88);
      --surface:      #ffffff;
      --ink:          #0f172a;
      --ink-muted:    #64748b;
      --border:       rgba(0, 0, 0, 0.1);
      --accent:       #8b5cf6;
      --accent-glow:  rgba(139, 92, 246, 0.15);
      
      /* Button Colors (Light Mode) */
      --btn-bg:       #000000;
      --btn-text:     #ffffff;
    }
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    height: 100%; overflow: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
    
    /* Prevent text selection globally */
    -webkit-user-select: none; 
    user-select: none;
  }

  /* Ensure inputs are still selectable/typable */
  input, textarea {
    -webkit-user-select: auto;
    user-select: auto;
  }

  /* ══ SIGN-IN OVERLAY ══ */
  .signin-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: var(--bg-glass);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 18px;
  }
  .signin-overlay.show { display: flex; }
  .so-spinner {
    width: 38px; height: 38px;
    border: 2.5px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.72s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .so-text {
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-muted);
  }

  /* ══ DIALOG ══ */
  .ok-backdrop {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: none; align-items: center; justify-content: center;
  }
  .ok-backdrop.active { display: flex; }
  .ok-dialog {
    width: 88%; max-width: 340px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px; padding: 28px 24px;
    transform: scale(0.93); opacity: 0;
    transition: transform 0.24s var(--ease), opacity 0.24s ease;
  }
  .ok-backdrop.open .ok-dialog { transform: scale(1); opacity: 1; }
  .ok-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 21px; font-weight: 900; text-transform: uppercase;
    color: var(--ink); margin-bottom: 8px;
  }
  .ok-msg {
    font-size: 13.5px; color: var(--ink-muted);
    line-height: 1.65; margin-bottom: 24px;
  }
  .ok-actions { display: flex; justify-content: flex-end; gap: 12px; }
  .ok-cancel {
    padding: 10px 14px; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 700; color: var(--ink-muted);
    background: none; border: none; cursor: pointer;
  }
  .ok-confirm {
    padding: 10px 22px; background: var(--accent); color: #fff;
    border-radius: 100px; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 700; border: none; cursor: pointer;
    transition: transform 0.12s;
  }
  .ok-confirm:active { transform: scale(0.95); }

  /* ══ PROGRESS BAR ══ */
  .top-loader {
    position: fixed; top: 12px; left: 24px; right: 24px;
    height: 4px; background: var(--border);
    z-index: 8000; overflow: hidden; border-radius: 4px;
  }
  .top-loader-fill {
    height: 100%; width: 33.333%;
    background: var(--accent);
    border-radius: 4px;
    transition: width var(--dur) var(--ease);
  }
  .top-loader-fill.p2 { width: 66.666%; }
  .top-loader-fill.p3 { width: 100%; }

  /* ══ VIEWPORT & SLIDER TRACK ══ */
  .viewport {
    width: 100%; height: 100%; 
    overflow: hidden; position: relative;
    background: var(--bg);
  }
  .slider-track {
    display: flex; width: 100%; height: 100%;
    will-change: transform;
  }

  /* ══ SLIDES ══ */
  .slide {
    position: relative; flex: 0 0 100%;
    width: 100%; height: 100%;
    background: transparent;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .slide-inner {
    width: 100%; max-width: 430px;
    height: 100%; margin: 0 auto; position: relative;
  }

  /* ════════════════════════
     SLIDE 1
  ════════════════════════ */
  .headline-wrap {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 50px 30px 0;
    opacity: 0; transform: translateY(-10px);
    animation: fadeDown 0.5s ease 0.08s forwards;
    z-index: 10;
  }
  .headline {
    font-size: clamp(28px, 8vw, 42px); font-weight: 900;
    line-height: 1.0; letter-spacing: -0.01em; text-transform: uppercase;
    color: var(--ink); font-family: 'Barlow Condensed', sans-serif;
  }
  @keyframes fadeDown { to { opacity:1; transform:translateY(0); } }
  @keyframes fadeIn   { to { opacity:1; } }

  .card-stack { position: absolute; bottom:0; left:0; right:0; top:25%; }
  .card {
    position: absolute; bottom: 0;
    border-radius: 28px 28px 0 0;
    transform: translateX(-110%);
    will-change: transform; overflow: hidden;
  }
  .card-emerald { background:var(--card-1); left:-28px; right:78px; top:0;   animation: slideIn 1.1s cubic-bezier(.16,1,.3,1) 0.46s forwards; }
  .card-wine    { background:var(--card-2); left:-28px; right:42px; top:10%; animation: slideIn 1.1s cubic-bezier(.16,1,.3,1) 0.32s forwards; }
  .card-slate   { background:var(--card-3); left:-28px; right:14px; top:20%; animation: slideIn 1.1s cubic-bezier(.16,1,.3,1) 0.20s forwards; }
  .card-indigo  { background:var(--card-4); left:-28px; right:0;    top:30%; animation: slideIn 1.1s cubic-bezier(.16,1,.3,1) 0.08s forwards; }
  @keyframes slideIn { from{transform:translateX(-110%)} to{transform:translateX(0)} }

  .arrow-btn {
    position:absolute; width:48px; height:48px; border-radius:50%;
    background:#ffffff;
    display:flex; align-items:center; justify-content:center;
    top:20px; right:20px; flex-shrink:0;
  }
  .arrow-btn svg { width:19px; height:19px; stroke: #0f172a; }

  .card-inner {
    position:absolute; top:0; bottom:0; left:56px; right:22px;
    display:flex; flex-direction:column; padding-top:16px;
  }
  .card-indigo .card-inner { bottom:85px; } 

  .flashcard-preview {
    background:rgba(255,255,255,0.1); border-radius:16px;
    padding:14px; margin-top:60px; 
    border:1px solid rgba(255,255,255,0.2);
  }
  .fc-subject { font-size:9.5px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.6); margin-bottom:8px; }
  .fc-question { font-size:13px; font-weight:700; color:#fff; line-height:1.4; margin-bottom:10px; }
  .fc-divider  { height:1px; background:rgba(255,255,255,0.2); margin-bottom:10px; }
  .fc-answer-label { font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:4px; }
  .fc-answer   { font-size:12px; font-weight:600; color:rgba(255,255,255,0.9); line-height:1.5; }
  .fc-footer   { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
  .fc-tap      { font-size:10px; color:rgba(255,255,255,0.5); font-style:italic; }
  .fc-dots     { display:flex; gap:5px; }
  .fc-dot      { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.3); }
  .fc-dot.on   { background:rgba(255,255,255,0.9); }

  .stats-wrap   { margin-top:55px; display:flex; flex-direction:column; gap:10px; } 
  .stat-label   { font-size:9.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.6); margin-bottom:4px; }
  .stat-row     { display:flex; gap:6px; } 
  .stat-pill    { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:2px; flex:1; } 
  .stat-val     { font-size:16px; font-weight:800; color:#fff; line-height:1; }
  .stat-name    { font-size:9px; color:rgba(255,255,255,0.7); font-weight:500; }
  .streak-pill  { background:rgba(250,204,21,0.2); border-color:rgba(250,204,21,0.3); }
  .streak-val   { color:#facc15; }
  .prog-bar-track { height:4px; background:rgba(255,255,255,0.2); border-radius:10px; overflow:hidden; }
  .prog-bar-fill  { height:100%; width:68%; background:#ffffff; border-radius:10px; }
  .prog-bar-label { display:flex; justify-content:space-between; margin-top:5px; font-size:10px; color:rgba(255,255,255,0.6); }

  .tags-wrap    { margin-top:55px; display:flex; flex-wrap:wrap; gap:7px; max-width:270px; } 
  .subject-tag  { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); border-radius:100px; padding:6px 13px; font-size:11.5px; font-weight:700; color:rgba(255,255,255,0.9); white-space:nowrap; }
  .subject-tag.hi { background:#ffffff; color:var(--card-2); border-color:transparent; }

  /* ══ FIXED GET STARTED BUTTON ══ */
  .get-started {
    position: fixed; bottom: max(3vh, 24px); left: 30px; right: 24px;
    max-width: calc(430px - 78px); margin: 0 auto; padding: 16px;
    background: var(--btn-bg); color: var(--btn-text); 
    border: none; border-radius: 100px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 800;
    cursor: pointer; opacity: 0; animation: fadeIn 0.4s ease 0.92s forwards;
    transition: transform 0.15s ease, opacity 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    z-index: 100;
  }
  .get-started.hidden { opacity: 0 !important; pointer-events: none; }
  .get-started:active { transform: scale(0.97); }

  /* ════════════════════════
     SLIDE 2
  ════════════════════════ */
  #slide2 .slide-inner { display: flex; flex-direction: column; }

  .s2-headline-wrap { padding: 40px 30px 0; flex-shrink: 0; }
  .s2-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px;
  }
  .s2-headline {
    font-size: clamp(30px, 8vw, 42px); font-weight: 900; line-height: 1.0;
    letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink);
    font-family: 'Barlow Condensed', sans-serif;
  }
  .s2-headline em { color: var(--accent); font-style: normal; }

  .s2-card-area {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 10px 22px 85px; 
  }
  .scene { position: relative; width: 100%; max-width: 340px; }
  
  /* Rich Ghost Cards */
  .ghost-card {
    position: absolute; width: 100%; border-radius: 20px; 
    box-shadow: 0 6px 24px rgba(0,0,0,0.15); top: 0; left: 0;
  }
  .ghost-card-a { height: 100%; transform: rotate(-4deg) translate(-6px,-10px); background: var(--card-4); opacity: 0.4; }
  .ghost-card-b { height: 100%; transform: rotate(-2deg) translate(-3px,-5px);  background: var(--card-2); opacity: 0.6; }

  .quiz-card {
    position: relative; z-index: 2; background: var(--surface); border-radius: 20px;
    padding: 14px; border: 1px solid var(--border);
    box-shadow: 0 18px 52px rgba(0,0,0,0.2), 0 4px 14px rgba(0,0,0,0.1);
  }

  .c-segs  { display:flex; gap:5px; margin-bottom:12px; }
  .cseg    { height:3px; flex:1; border-radius:2px; background:var(--border); }
  .cseg.cdone   { background:var(--accent); }
  .cseg.cactive { background:linear-gradient(90deg,var(--accent) 55%,var(--border) 55%); }

  .demo-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px;
  }
  .demo-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  
  .demo-notes-block {
    background: var(--bg); border-radius: 10px;
    padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--border);
  }
  .demo-notes-text {
    font-size: 11px; font-weight: 500; color: var(--ink);
    line-height: 1.5; font-style: italic;
  }
  .demo-transform-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .demo-tline { flex: 1; height: 1px; background: var(--border); }
  .demo-chip {
    display: flex; align-items: center; gap: 4px;
    background: var(--accent-glow); border: 1px solid var(--accent);
    border-radius: 100px; padding: 4px 10px;
    font-size: 10px; font-weight: 700; color: var(--accent); white-space: nowrap;
  }
  .demo-chip svg { width: 10px; height: 10px; }
  
  .demo-quiz-block {
    background: var(--accent-glow); border-radius: 10px;
    padding: 8px 10px; margin-bottom: 10px;
    border: 1px solid var(--accent);
  }
  .demo-quiz-text {
    font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.4;
  }
  .demo-features { display: flex; flex-direction: column; gap: 6px; }
  .demo-feature {
    display: flex; align-items: center; gap: 8px;
    font-size: 10.5px; font-weight: 500; color: var(--ink-muted);
  }
  .demo-feat-icon {
    width: 18px; height: 18px; background: var(--bg); border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; flex-shrink: 0; color: var(--ink);
  }

  /* ════════════════════════
     SLIDE 3
  ════════════════════════ */
  #slide3 .slide-inner {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 28px 60px; 
  }

  /* Scaled up Student Images at the top of Slide 3 */
  .s3-student-images-container {
    flex: 1; /* Grow to fill the available space above text */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align to bottom so it sits right on the text */
    padding: 0; /* Removed padding to maximize space */
    width: 100%;
    margin-bottom: -45px; /* Pull the text underneath up slightly */
  }
  .s3-student-img {
    display: block;
    width: 85%; /* Expand wider than the container */
    max-width: 480px; /* Cap size so it doesn't get too massive on tablets */
    height: auto;
    object-fit: contain;
    transform: scale(1.15); /* Scale it up to remove dead space inside the SVG */
    transform-origin: bottom center; /* Scale upwards from the bottom edge */
  }

  .s3-text { 
    margin-bottom: 30px; 
    position: relative; 
    z-index: 2; /* Keep text above image boundaries if they overlap */
  }
  
  .s3-kicker {
    font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px;
  }
  .s3-headline {
    font-size: clamp(40px, 12vw, 62px); font-weight: 900;
    line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase;
    color: var(--ink); font-family: 'Barlow Condensed', sans-serif;
    margin-bottom: 20px;
  }
  .s3-headline span { color: var(--accent); }
  .s3-body { font-size: 14px; font-weight: 400; color: var(--ink-muted); line-height: 1.7; }

  .btn-row { display: flex; gap: 10px; margin-bottom: 10px; }
  .btn-login, .btn-register {
    flex: 1; padding: 16px 0; border-radius: 100px;
    cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 700; transition: transform 0.14s ease;
  }
  .btn-login:active, .btn-register:active { transform: scale(0.97); }
  .btn-login { background: var(--accent); color: #fff; border: none; box-shadow: 0 4px 18px rgba(0,0,0,0.15); }
  .btn-register { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
  .btn-google {
    width: 100%; padding: 15px 0; background: var(--surface); color: var(--ink);
    border: 1.5px solid var(--border); border-radius: 100px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform 0.14s ease;
  }
  .btn-google:active { transform: scale(0.97); }
  .g-icon { width: 18px; height: 18px; flex-shrink: 0; }

  /* ════════════════════════
     LOGIN MODAL
  ════════════════════════ */
  .login-modal {
    position: fixed; inset: 0; z-index: 7000; background: var(--surface);
    display: flex; flex-direction: column;
    opacity: 0; transform: translateY(100%); pointer-events: none;
    transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
  }
  .login-modal.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

  .lm-header { display: flex; align-items: center; gap: 16px; padding: 56px 28px 28px; flex-shrink: 0; }
  .lm-close {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--border); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ink-muted); transition: background 0.15s; flex-shrink: 0;
  }
  .lm-close:active { background: rgba(128,128,128,0.2); }
  .lm-close svg { width: 17px; height: 17px; }
  .lm-title {
    font-family: 'Barlow Condensed', sans-serif; font-size: 28px;
    font-weight: 900; text-transform: uppercase; color: var(--ink); line-height: 1;
  }
  
  /* CHANGED: From display:flex to display:block to prevent flex-shrink squishing on mobile keyboards */
  .lm-form { flex: 1; display: block; padding: 0 28px 44px; overflow-y: auto; }

  .lm-input-group {
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: 18px; overflow: hidden; margin-bottom: 14px;
    transition: border-color 0.22s;
  }
  .lm-input-group:focus-within { border-color: var(--accent); }
  .lm-input-row { position: relative; border-bottom: 1.5px solid var(--border); }
  .lm-input-row:last-child { border-bottom: none; }
  .lm-input {
    width: 100%; padding: 16px 18px; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px; font-weight: 500; color: var(--ink); background: transparent;
    border: none; outline: none;
  }
  .lm-input::placeholder { color: var(--ink-muted); }
  .lm-toggle-pw {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--ink-muted); background: none; border: none; cursor: pointer; transition: color 0.15s;
    display: flex; align-items: center;
  }
  .lm-toggle-pw:hover { color: var(--ink); }
  .lm-toggle-pw svg { width: 20px; height: 20px; }

  .lm-submit {
    width: 100%; padding: 18px; background: var(--ink); color: var(--bg);
    border: none; border-radius: 100px; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px; font-weight: 800; cursor: pointer; margin-bottom: 12px;
    transition: transform 0.14s ease; box-shadow: 0 4px 18px rgba(0,0,0,0.15);
  }
  .lm-submit:active { transform: scale(0.97); }

  .lm-forgot {
    width: 100%; text-align: center; padding: 10px; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px; font-weight: 600; color: var(--ink-muted); background: none;
    border: none; cursor: pointer; margin-bottom: 22px; transition: color 0.15s;
  }
  .lm-forgot:hover { color: var(--ink); }

  .lm-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .lm-div-line { flex: 1; height: 1px; background: var(--border); }
  .lm-div-text {
    font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-muted);
  }

  .lm-google {
    width: 100%; padding: 17px; background: var(--surface);
    border: 1.5px solid var(--border); border-radius: 100px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px; font-weight: 600; color: var(--ink);
    transition: transform 0.14s ease, background 0.15s;
  }
  .lm-google:active { transform: scale(0.97); }
  .lm-google svg { width: 20px; height: 20px; flex-shrink: 0; }
/* ═══════════════════════════════════════════════════
   DESKTOP  ≥ 768px  —  full-screen landing page
   Overrides any previous phone-frame styles
═══════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Full screen base ── */
  html, body {
    overflow: hidden;
    background: var(--bg);
  }

  .viewport {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg);
  }

  .slider-track { width: 100%; }

  .slide {
    flex: 0 0 100vw;
    width: 100vw;
  }

  /* Slide inner — wide, centered */
  .slide-inner {
    max-width: 1140px !important;
    width: 100%;
    margin: 0 auto;
  }

  /* ── Get Started — bottom center ── */
  .get-started {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: 240px;
    max-width: none;
    bottom: 40px;
    margin: 0;
  }

  /* ══ SLIDE 1 — headline left, card stack right ══ */
  #slide1 .slide-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 100%;
    padding: 80px 60px 100px;
    gap: 48px;
  }

  .headline-wrap {
    position: static;
    flex: 0 0 300px;
    padding: 40px 0 0 0;
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeDown 0.5s ease 0.08s forwards;
  }

  .headline { font-size: clamp(34px, 3.2vw, 52px); }

  .card-stack {
    position: relative;
    flex: 1;
    top: auto; left: auto; right: auto; bottom: auto;
    height: 100%;
    min-height: 480px;
  }

  /* ══ SLIDE 2 — headline left, card right ══ */
  #slide2 .slide-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    padding: 60px 60px 100px;
    gap: 60px;
  }

  .s2-headline-wrap { flex: 0 0 300px; padding: 0; }
  .s2-headline      { font-size: clamp(34px, 3.2vw, 52px); }

  .s2-card-area {
    flex: 1;
    padding: 0;
    justify-content: flex-start;
    align-items: center;
  }

  .scene { max-width: 480px; width: 100%; }

  /* ══ SLIDE 3 — image left, text+buttons right ══ */
  #slide3 .slide-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100%;
    padding: 0 80px !important;
    gap: 60px;
  }

  .s3-student-images-container {
    flex: 0 0 360px;
    height: 100%;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
  }

  .s3-student-img {
    width: 100%;
    max-width: 360px;
    transform: none !important;
    max-height: 80%;
    object-fit: contain;
  }

  .s3-text { margin-bottom: 28px; }
  .s3-headline { font-size: clamp(42px, 4.5vw, 64px); }
  .s3-buttons { max-width: 380px; }

  /* Slide 3 text area */
  .s3-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ══ LOGIN MODAL — centered card on backdrop ══ */
  .login-modal {
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease !important;
  }
  .login-modal.show {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .lm-card {
    width: 420px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 28px;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.25,1,0.2,1), opacity 0.3s ease;
  }
  .lm-card::-webkit-scrollbar { display: none; }
  .login-modal.show .lm-card {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .lm-header { padding: 32px 28px 20px; }
  .lm-form   { padding: 0 28px 32px; overflow-y: visible; }
}

/* lm-card: invisible wrapper on mobile */
@media (max-width: 767px) {
  .lm-card { display: contents; }
}

/* ── Suppress long-press context menu ──────────────────────────── */
a, button, [onclick] { -webkit-touch-callout: none; user-select: none; }

/* ── Press feedback ─────────────────────────────────────────────── */
button:active,
.btn-google:active,
.get-started:active,
.ok-confirm:active,
.ok-cancel:active,
.arrow-btn:active,
.lm-close:active,
.lm-forgot:active,
.lm-toggle-pw:active,
.lm-submit:active,
.lm-google:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}