/* ─── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* One tinted triple drives every text/hairline colour so the whole set
     moves with a single swap; the named tokens below carry the rest. */
  --fg-rgb: 255,255,255;
  --accent-rgb: 10,132,255;
  --on-blue: #fff;   /* labels sitting ON a blue fill, both themes */
  --bg: #000000;   /* plain black: no gradients or glows behind the pages */
  --bg2: #0f0f0f;
  --bg3: #141414;
  --glass: rgba(var(--fg-rgb),0.04);
  --glass-border: rgba(var(--fg-rgb),0.08);
  --glass-hover: rgba(var(--fg-rgb),0.07);
  --blue: #0A84FF;
  /* A blue FILL that carries a white label. #0A84FF under white text is
     3.65:1, below the 4.5:1 a 14px label needs; #0071E3 is 4.70:1 and still
     reads as the same blue. --blue stays for blue text, bars and dots. */
  --blue-fill: #0071E3;
  --blue-glow: rgba(var(--accent-rgb),0.3);
  --blue-dim: rgba(var(--accent-rgb),0.12);
  --white: #f5f5f7;
  --gray: rgba(var(--fg-rgb),0.4);
  --gray2: rgba(var(--fg-rgb),0.22);
  /* ── Card surface ──
     A card is "ground plus a little ink" on dark, which lifts it off black.
     Inverting only the ground for light mode kept that rule and so made light
     cards DARKER than the page they sit on — recessed and muddy, with nothing
     separating one from the next. These tokens let each theme lift its cards
     the way that theme actually needs: ink over black, paper over grey. */
  --card:        rgba(var(--fg-rgb),0.03);
  --card-hover:  rgba(var(--fg-rgb),0.055);
  --card-border: rgba(var(--fg-rgb),0.065);
  --card-shadow: none;
  --radius: 18px;
  --radius-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
}
html { scroll-behavior: smooth; background: var(--bg); }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  animation: pageIn 0.45s var(--ease) both;
}
/* Fade only — a transform on <body> breaks position:fixed for every overlay (modals, Nova button, toasts) */
@keyframes pageIn { from{opacity:0} to{opacity:1} }
::selection { background: var(--blue-dim); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb),0.1); border-radius: 4px; }

/* ─── Background ───────────────────────────────────── */
.bg-orbs { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
.orb { position:absolute;border-radius:50%;filter:blur(130px);opacity:0.09;animation:orbFloat 20s ease-in-out infinite; }
.orb-1 { width:700px;height:700px;background:radial-gradient(circle,#0A84FF,transparent);top:-250px;left:-200px; }
.orb-2 { width:450px;height:450px;background:radial-gradient(circle,#0060FF,transparent);bottom:-150px;right:-100px;animation-delay:-8s; }
.orb-3 { width:350px;height:350px;background:radial-gradient(circle,#0A84FF,transparent);top:50%;left:55%;animation-delay:-15s; }
/* Three 130px-blurred circles drifting for 20s is fine on a desktop GPU and
   a constant tax on a phone's. Still, but not gone: the glow stays. */
@media (pointer: coarse) { .orb { animation:none; filter:blur(80px); } }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 33%{transform:translate(35px,-25px)} 66%{transform:translate(-18px,22px)} }

/* ─── Glass ────────────────────────────────────────── */
.glass { background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius); }
.glass-card {
  background:rgba(var(--fg-rgb),0.03);border:1px solid rgba(var(--fg-rgb),0.065);
  border-radius:var(--radius);transition:background 0.3s,border-color 0.3s,transform 0.3s,box-shadow 0.3s;
}
.glass-card:hover { background:rgba(var(--fg-rgb),0.055);border-color:rgba(var(--fg-rgb),0.11);transform:translateY(-2px);box-shadow:0 20px 60px rgba(0,0,0,0.35); }

/* ─── Navigation ───────────────────────────────────── */
nav {
  position:fixed;top:0;left:0;right:0;
  z-index:1000;padding:0 32px;height:60px;
  display:flex;align-items:center;gap:2px;
  background:var(--bg);
  border-bottom:1px solid rgba(var(--fg-rgb),0.07);
  white-space:nowrap;
}
nav::-webkit-scrollbar { display:none; }
/* a hint that there is more nav off to the right, only while it overflows */
nav::after { content:''; position:sticky; right:0; flex:none; width:22px;
  align-self:stretch; margin-left:-22px; pointer-events:none;
  background:linear-gradient(to right, transparent, var(--bg)); }
#nav-auth { margin-left:auto; }
.nav-logo { display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--white);letter-spacing:0.14em;text-transform:uppercase;margin-right:16px;padding-right:20px;border-right:1px solid rgba(var(--fg-rgb),0.08);text-decoration:none; }
.nav-logo span { color:var(--blue); }
.nav-logo svg { flex-shrink:0; }
.nav-btn {
  background:none;border:none;cursor:pointer;
  color:rgba(var(--fg-rgb),0.48);font-family:var(--font);
  font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:30px;
  transition:color 0.22s,background 0.22s;letter-spacing:0.01em;text-decoration:none;display:inline-block;
}
.nav-btn:hover { color:var(--white);background:rgba(var(--fg-rgb),0.06); }
.nav-btn.active { color:var(--white);background:rgba(var(--fg-rgb),0.09); }
.nav-btn.jarvis-btn { color:var(--blue); }
.nav-btn.jarvis-btn:hover,.nav-btn.jarvis-btn.active { background:var(--blue-dim); }
.nav-login {
  margin-left:8px;padding:6px 16px;border-radius:30px;
  border:1px solid rgba(var(--accent-rgb),0.35);background:rgba(var(--accent-rgb),0.08);
  color:#0A84FF;font-family:var(--font);font-size:12.5px;font-weight:600;
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:all 0.22s;letter-spacing:0.01em;
}
.nav-login:hover { background:rgba(var(--accent-rgb),0.16);border-color:rgba(var(--accent-rgb),0.6);color:#3d9fff; }
.nav-user-badge {
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:rgba(var(--accent-rgb),0.15);border:1px solid rgba(var(--accent-rgb),0.4);
  color:#0A84FF;font-size:12px;font-weight:700;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
}

/* ── Login page ── */
.login-page { min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px 60px;position:relative;z-index:1; }
.login-back { position:fixed;top:20px;left:24px;z-index:10;display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(var(--fg-rgb),0.45);text-decoration:none;transition:color .2s; }
.login-back:hover { color:#fff; }
.login-box { width:100%;max-width:400px; }
.login-wordmark { font-size:13px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#fff;margin-bottom:36px; }
.login-wordmark span { color:#0A84FF; }
.login-heading { font-size:26px;font-weight:700;letter-spacing:-.025em;margin-bottom:8px; }
.login-sub { font-size:14px;color:rgba(var(--fg-rgb),0.45);margin-bottom:32px;line-height:1.6; }
.login-social-btn {
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px;border-radius:10px;border:1px solid rgba(var(--fg-rgb),0.12);
  background:rgba(var(--fg-rgb),0.05);color:#fff;font-family:inherit;
  font-size:14px;font-weight:500;cursor:pointer;margin-bottom:10px;
  transition:all .2s;
}
.login-social-btn:hover { background:rgba(var(--fg-rgb),0.09);border-color:rgba(var(--fg-rgb),0.2); }
.login-social-btn svg { flex-shrink:0; }
.login-divider { display:flex;align-items:center;gap:12px;margin:20px 0;color:rgba(var(--fg-rgb),0.2);font-size:12px; }
.login-divider::before,.login-divider::after { content:'';flex:1;height:1px;background:rgba(var(--fg-rgb),0.08); }
.login-field {
  width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px;
  background:rgba(var(--fg-rgb),0.04);border:1px solid rgba(var(--fg-rgb),0.1);
  color:#fff;font-family:inherit;font-size:14px;outline:none;
  transition:border-color .2s,background .2s;margin-bottom:10px;display:block;
}
.login-field:focus { border-color:rgba(var(--accent-rgb),0.5);background:rgba(var(--fg-rgb),0.06); }
.login-field::placeholder { color:rgba(var(--fg-rgb),0.25); }
.login-submit {
  width:100%;padding:13px;border-radius:10px;border:none;cursor:pointer;
  background:#0071E3;color:#fff;font-family:inherit;font-size:14px;font-weight:600;
  margin-top:4px;transition:background .2s;box-shadow:0 0 28px rgba(var(--accent-rgb),0.25);
}
.login-submit:hover { background:#1a8fff; }
.login-footer { text-align:center;margin-top:24px;font-size:13px;color:rgba(var(--fg-rgb),0.35); }
.login-footer a { color:#0A84FF;text-decoration:none; }
.login-footer a:hover { text-decoration:underline; }
.login-note { font-size:11px;color:rgba(var(--fg-rgb),0.2);text-align:center;margin-top:12px; }

/* ── Reviews ── */
.review-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px; }
.review-card {
  padding:28px;border-radius:var(--radius);
  background:rgba(var(--fg-rgb),0.03);border:1px solid rgba(var(--fg-rgb),0.07);
  transition:all .3s;
}
.review-card:hover { background:rgba(var(--fg-rgb),0.05);border-color:rgba(var(--fg-rgb),0.11);transform:translateY(-2px); }
.review-stars { color:#FFD60A;font-size:13px;letter-spacing:2px;margin-bottom:14px; }
.review-text { font-size:14px;color:rgba(var(--fg-rgb),0.75);line-height:1.7;margin-bottom:20px;font-style:italic; }
.review-author { display:flex;align-items:center;gap:12px; }
.review-avatar { width:36px;height:36px;border-radius:50%;background:rgba(var(--accent-rgb),0.15);border:1px solid rgba(var(--accent-rgb),0.3);color:#0A84FF;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.review-name { font-size:13px;font-weight:600;margin-bottom:2px; }
.review-role { font-size:11px;color:rgba(var(--fg-rgb),0.38); }
@media(max-width:900px){ .review-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .review-grid{grid-template-columns:1fr;} }

/* ─── Layout ───────────────────────────────────────── */
.page-wrap { position:relative;z-index:1;min-height:100vh; }
.section-wrap { max-width:1080px;margin:0 auto;padding:96px 24px 60px; }
.section-header { margin-bottom:44px; }
.section-tag { font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:10px; }
.section-title { font-size:clamp(26px,3.8vw,40px);font-weight:700;letter-spacing:-0.025em;line-height:1.1; }
.section-sub { font-size:15px;color:var(--gray);margin-top:10px;line-height:1.65;max-width:520px; }

/* ─── Buttons ──────────────────────────────────────── */
.btn-primary { background:var(--blue-fill);color:#fff;border:none;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;padding:12px 26px;border-radius:50px;transition:all 0.28s;box-shadow:0 0 28px var(--blue-glow);display:inline-flex;align-items:center;gap:8px; }
.btn-primary:hover { background:#1a8fff;box-shadow:0 0 44px var(--blue-glow);transform:translateY(-1px); }
.btn-ghost { background:rgba(var(--fg-rgb),0.05);color:var(--white);cursor:pointer;font-family:var(--font);font-size:14px;font-weight:500;padding:12px 26px;border-radius:50px;border:1px solid rgba(var(--fg-rgb),0.1);transition:all 0.28s;text-decoration:none;display:inline-flex;align-items:center;gap:8px; }
.btn-ghost:hover { background:rgba(var(--fg-rgb),0.09);border-color:rgba(var(--fg-rgb),0.16);transform:translateY(-1px); }
.btn-sm { font-size:12px;padding:7px 14px;border-radius:50px;border:none;cursor:pointer;font-family:var(--font);font-weight:500;transition:all 0.2s;display:inline-flex;align-items:center;gap:6px; }
.btn-sm-blue { background:var(--blue-dim);color:var(--blue);border:1px solid rgba(var(--accent-rgb),0.22); }
.btn-sm-blue:hover { background:rgba(var(--accent-rgb),0.22); }
.btn-sm-ghost { background:rgba(var(--fg-rgb),0.05);color:rgba(var(--fg-rgb),0.55);border:1px solid rgba(var(--fg-rgb),0.08); }
.btn-sm-ghost:hover { background:rgba(var(--fg-rgb),0.09);color:var(--white); }

/* ─── Cards ────────────────────────────────────────── */
.stat-card { padding:22px 18px;text-align:center;background:rgba(var(--fg-rgb),0.03);border:1px solid rgba(var(--fg-rgb),0.07);border-radius:var(--radius);transition:all 0.3s; }
.stat-card:hover { background:rgba(var(--fg-rgb),0.05);transform:translateY(-2px); }
.stat-num { font-size:30px;font-weight:700;color:var(--blue);line-height:1;margin-bottom:5px; }
.stat-label { font-size:11px;color:var(--gray);letter-spacing:0.04em;text-transform:uppercase; }
.metric-card { padding:22px;background:rgba(var(--fg-rgb),0.03);border:1px solid rgba(var(--fg-rgb),0.065);border-radius:var(--radius);transition:all 0.3s; }
.metric-card:hover { background:rgba(var(--fg-rgb),0.052);transform:translateY(-2px); }
.metric-label { font-size:11px;color:var(--gray);letter-spacing:0.05em;margin-bottom:10px;text-transform:uppercase; }
.metric-value { font-size:34px;font-weight:700;letter-spacing:-0.03em;line-height:1;margin-bottom:7px; }
.metric-change { font-size:12px;color:#30D158; }
.metric-change.down { color:#FF453A; }

/* ─── Tags ─────────────────────────────────────────── */
.tag { font-size:11px;padding:3px 9px;border-radius:50px;background:rgba(var(--fg-rgb),0.06);color:rgba(var(--fg-rgb),0.55);border:1px solid rgba(var(--fg-rgb),0.08); }

/* ─── Icon wrappers ────────────────────────────────── */
.icon-wrap { display:inline-flex;align-items:center;justify-content:center; }
.icon-box { width:40px;height:40px;border-radius:10px;background:var(--blue-dim);border:1px solid rgba(var(--accent-rgb),0.2);display:flex;align-items:center;justify-content:center;color:var(--blue);flex-shrink:0; }

/* ─── Status dot ───────────────────────────────────── */
.status-dot { width:6px;height:6px;border-radius:50%;background:var(--blue);animation:dotPulse 2s ease-in-out infinite;display:inline-block; }
@keyframes dotPulse { 0%,100%{opacity:1}50%{opacity:0.3} }

/* ─── Chat ─────────────────────────────────────────── */
.thinking { align-self:flex-start;display:flex;gap:5px;padding:13px 16px;background:rgba(var(--fg-rgb),0.06);border:1px solid rgba(var(--fg-rgb),0.08);border-radius:16px;border-bottom-left-radius:3px; }
.thinking span { width:6px;height:6px;background:var(--blue);border-radius:50%;animation:bounce 1.2s ease-in-out infinite; }
.thinking span:nth-child(2){animation-delay:.2s}
.thinking span:nth-child(3){animation-delay:.4s}
@keyframes bounce { 0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-7px);opacity:1} }

/* ─── Task cards ───────────────────────────────────── */
.task-card { padding:13px 15px;border-radius:var(--radius-sm);margin-bottom:9px;background:rgba(var(--fg-rgb),0.04);border:1px solid rgba(var(--fg-rgb),0.07);cursor:grab;transition:all .2s;user-select:none;animation:cardIn .25s ease both; }
@keyframes cardIn { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none} }
.task-card:hover { background:rgba(var(--fg-rgb),0.07);transform:scale(1.01); }
.task-card.dragging { opacity:.45;transform:rotate(2deg) scale(1.03);cursor:grabbing; }
.c-subj { font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:5px; }
.c-name { font-size:14px;font-weight:500;line-height:1.45;color:rgba(var(--fg-rgb),0.9);margin-bottom:7px; }
.c-foot { display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--gray); }
.c-del { cursor:pointer;transition:color .2s;color:rgba(255,69,58,0.5); }
.c-del:hover { color:rgba(255,69,58,0.9); }

/* ─── Flashcard ────────────────────────────────────── */
.flashcard-scene { width:100%;max-width:600px;height:300px;perspective:1200px;margin:0 auto 28px;cursor:pointer; }
.flashcard-inner { width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 0.65s var(--ease); }
.flashcard-inner.flipped { transform:rotateY(180deg); }
.flashcard-face { position:absolute;inset:0;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;padding:36px;text-align:center; }
.flashcard-front { background:rgba(var(--fg-rgb),0.04);border:1px solid rgba(var(--fg-rgb),0.09);backdrop-filter:blur(40px);box-shadow:0 24px 70px rgba(0,0,0,0.4); }
.flashcard-back { background:rgba(var(--accent-rgb),0.1);border:1px solid rgba(var(--accent-rgb),0.22);backdrop-filter:blur(40px);transform:rotateY(180deg);box-shadow:0 24px 70px rgba(var(--accent-rgb),0.18); }
.card-label { font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;font-weight:600; }
.card-text { font-size:20px;font-weight:600;line-height:1.45;letter-spacing:-.01em; }
.card-hint { font-size:12px;color:rgba(var(--fg-rgb),0.25);margin-top:18px; }
.fc-btn { padding:11px 22px;border-radius:50px;border:none;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:600;transition:all .25s;display:inline-flex;align-items:center;gap:7px; }
.fc-correct { background:rgba(48,209,88,.13);color:#30D158;border:1px solid rgba(48,209,88,.28); }
.fc-correct:hover { background:rgba(48,209,88,.22); }
.fc-wrong { background:rgba(255,69,58,.1);color:#FF453A;border:1px solid rgba(255,69,58,.22); }
.fc-wrong:hover { background:rgba(255,69,58,.2); }
.fc-flip { background:var(--blue-dim);color:var(--blue);border:1px solid rgba(var(--accent-rgb),.28); }
.fc-flip:hover { background:rgba(var(--accent-rgb),.22); }

/* ─── Toast ────────────────────────────────────────── */
.toast { position:fixed;bottom:28px;right:28px;z-index:9999;padding:13px 18px;border-radius:var(--radius-sm);font-size:13px;background:rgba(18,18,18,0.96);border:1px solid rgba(var(--fg-rgb),0.1);backdrop-filter:blur(40px);color:var(--white);animation:toastIn .35s var(--ease) both;max-width:300px;box-shadow:0 16px 40px rgba(0,0,0,0.45); }
@keyframes toastIn { from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none} }

/* ─── Input fields ─────────────────────────────────── */
.field { padding:10px 14px;border-radius:var(--radius-sm);background:rgba(var(--fg-rgb),0.05);border:1px solid var(--glass-border);color:var(--white);font-family:var(--font);font-size:13px;outline:none;transition:all .22s;width:100%; }
.field:focus { border-color:rgba(var(--accent-rgb),0.38);background:rgba(var(--fg-rgb),0.07); }
.field::placeholder { color:rgba(var(--fg-rgb),0.28); }

/* ─── Chart cards ──────────────────────────────────── */
.chart-card { padding:24px;background:rgba(var(--fg-rgb),0.03);border:1px solid rgba(var(--fg-rgb),0.065);border-radius:var(--radius);margin-bottom:18px; }
.chart-title { font-size:14px;font-weight:600;margin-bottom:20px;color:rgba(var(--fg-rgb),0.88);display:flex;align-items:center;justify-content:space-between; }
.chart-title .chart-sub { font-size:12px;font-weight:400;color:var(--gray);letter-spacing:0; }

/* ─── Bar charts ───────────────────────────────────── */
.bar-row { margin-bottom:16px; }
.bar-head { display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px;color:rgba(var(--fg-rgb),0.75); }
.bar-track { height:5px;background:rgba(var(--fg-rgb),0.06);border-radius:5px;overflow:hidden; }
.bar-fill { height:100%;border-radius:5px;width:0;transition:width 1.2s var(--ease); }

/* ─── Heatmap ──────────────────────────────────────── */
.heatmap-wrap { overflow-x:auto;padding-bottom:4px; }
.heatmap-grid { display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;gap:3px;width:max-content; }
.hm-cell { width:12px;height:12px;border-radius:3px;background:rgba(var(--fg-rgb),0.05);transition:transform .15s; }
.hm-cell:hover { transform:scale(1.4); }
.hm-0 { background:rgba(var(--fg-rgb),0.05); }
.hm-1 { background:rgba(var(--accent-rgb),0.2); }
.hm-2 { background:rgba(var(--accent-rgb),0.4); }
.hm-3 { background:rgba(var(--accent-rgb),0.65); }
.hm-4 { background:rgba(var(--accent-rgb),0.9); }
.hm-labels { display:flex;gap:3px;width:max-content;margin-bottom:4px; }
.hm-month { font-size:10px;color:var(--gray);letter-spacing:.04em; }
.hm-legend { display:flex;align-items:center;gap:6px;font-size:11px;color:var(--gray);margin-top:10px; }
.hm-legend-cell { width:12px;height:12px;border-radius:3px; }

/* ─── Donut chart ──────────────────────────────────── */
.donut-wrap { position:relative;display:inline-flex;align-items:center;justify-content:center; }
.donut-label { position:absolute;text-align:center; }

/* ─── Pricing ──────────────────────────────────────── */
.pricing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start; }
.plan-card {
  padding:32px 28px;border-radius:var(--radius);
  background:rgba(var(--fg-rgb),0.03);border:1px solid rgba(var(--fg-rgb),0.07);
  transition:all .3s;position:relative;overflow:hidden;
}
.plan-card:hover { background:rgba(var(--fg-rgb),0.05);transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,0.4); }
.plan-card.featured {
  background:rgba(var(--accent-rgb),0.08);border-color:rgba(var(--accent-rgb),0.3);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),0.15),0 24px 60px rgba(var(--accent-rgb),0.12);
}
.plan-card.featured:hover { background:rgba(var(--accent-rgb),0.12); }
.plan-badge { position:absolute;top:16px;right:16px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:50px;background:var(--blue-fill);color:#fff; }
.plan-name { font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin-bottom:16px; }
.plan-price { font-size:46px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-bottom:4px; }
.plan-price span { font-size:18px;font-weight:400;color:var(--gray);margin-right:2px; }
.plan-period { font-size:12px;color:var(--gray);margin-bottom:24px; }
.plan-divider { height:1px;background:rgba(var(--fg-rgb),0.07);margin-bottom:22px; }
.plan-features { display:flex;flex-direction:column;gap:12px;margin-bottom:28px; }
.plan-feature { display:flex;align-items:flex-start;gap:10px;font-size:13px;color:rgba(var(--fg-rgb),0.75);line-height:1.5; }
.plan-feature .check { color:#30D158;flex-shrink:0;margin-top:1px; }
.plan-feature .cross { color:rgba(var(--fg-rgb),0.2);flex-shrink:0;margin-top:1px; }
.plan-feature.muted { color:rgba(var(--fg-rgb),0.3); }
.plan-cta { width:100%;padding:13px;border-radius:50px;border:none;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600;transition:all .28s; }
.plan-cta-primary { background:var(--blue-fill);color:#fff;box-shadow:0 0 24px var(--blue-glow); }
.plan-cta-primary:hover { background:#1a8fff;box-shadow:0 0 40px var(--blue-glow); }
.plan-cta-ghost { background:rgba(var(--fg-rgb),0.07);color:var(--white);border:1px solid rgba(var(--fg-rgb),0.1); }
.plan-cta-ghost:hover { background:rgba(var(--fg-rgb),0.11); }
/* The note under the toggle carries the bottom margin now, so the toggle and
   its explanation read as one block rather than two. */
.pricing-toggle { display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:10px;flex-wrap:wrap; }
.toggle-note { margin:0 0 40px;font-size:12.5px;color:var(--gray);text-align:center;line-height:1.5; }
/* Under the paid buttons: what happens if they press it. */
.plan-trial { margin:10px 0 0;font-size:11.5px;color:var(--gray);text-align:center;line-height:1.5; }
.toggle-track { width:44px;height:24px;border-radius:50px;background:rgba(var(--fg-rgb),0.1);border:1px solid rgba(var(--fg-rgb),0.12);cursor:pointer;position:relative;transition:background .25s; }
.toggle-track.on { background:var(--blue); }
.toggle-thumb { width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:2px;left:3px;transition:transform .25s; }
.toggle-track.on .toggle-thumb { transform:translateX(20px); }
.toggle-label { font-size:13px;color:var(--gray); }
.toggle-label.active { color:var(--white);font-weight:500; }
.save-badge { font-size:11px;background:rgba(48,209,88,.15);color:#30D158;border:1px solid rgba(48,209,88,.25);padding:3px 9px;border-radius:50px;font-weight:600; }
/* #30D158 is 7.0:1 on the dark card but only 1.8:1 on the light one, which is
   unreadable — the same problem --blue-text exists to solve. This is the badge
   that advertises the annual saving, so it has to be legible in both themes. */
[data-theme="light"] .save-badge { color:#12703A;border-color:rgba(18,112,58,.3); }
@media(max-width:768px){ .pricing-grid{grid-template-columns:1fr;} }

/* ─── Homepage ─────────────────────────────────────── */
.feature-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.feature-card { padding:26px;border-radius:var(--radius);background:rgba(var(--fg-rgb),0.03);border:1px solid rgba(var(--fg-rgb),0.065);transition:all .3s; }
.feature-card:hover { background:rgba(var(--fg-rgb),0.055);border-color:rgba(var(--fg-rgb),0.11);transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,0.35); }
.feature-icon { width:38px;height:38px;border-radius:9px;background:var(--blue-dim);border:1px solid rgba(var(--accent-rgb),0.18);display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:16px; }
.feature-title { font-size:15px;font-weight:600;margin-bottom:7px;letter-spacing:-.01em; }
.feature-desc { font-size:13px;color:var(--gray);line-height:1.65; }
.step-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:60px; }
.step-num { font-size:11px;color:var(--blue);font-weight:700;letter-spacing:.08em;margin-bottom:12px; }
.step-title { font-size:16px;font-weight:600;margin-bottom:7px; }
.step-desc { font-size:13px;color:var(--gray);line-height:1.65; }
.stats-bar { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(var(--fg-rgb),0.07);border-radius:var(--radius);overflow:hidden;margin-bottom:80px; }
.stats-bar-item { padding:26px 20px;text-align:center;border-right:1px solid rgba(var(--fg-rgb),0.07); }
.stats-bar-item:last-child { border-right:none; }
.stats-bar-num { font-size:28px;font-weight:700;color:var(--white);margin-bottom:4px; }
.stats-bar-label { font-size:12px;color:var(--gray); }
@media(max-width:900px){ .feature-grid,.step-grid{grid-template-columns:repeat(2,1fr);} .stats-bar{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .feature-grid,.step-grid{grid-template-columns:1fr;} .stats-bar{grid-template-columns:1fr;} }

/* ─── Misc ─────────────────────────────────────────── */
@media(max-width:768px){
  nav{padding:0 16px;height:52px;}
  .nav-btn{padding:5px 9px;font-size:11.5px;}
  .nav-logo{margin-right:8px;padding-right:12px;}
  .section-wrap{padding:80px 16px 40px;}
}

/* ─── Light ────────────────────────────────────────────
   Structurally the dark theme with the ground inverted — same components,
   same spacing, same Apple blue in both, which is what makes them read as
   one product rather than two skins.

   Body copy is ink with a blue cast (#16233A, 12.99:1), not blue. Apple's
   own light mode does the same thing: near-black type with #0A84FF reserved
   for links, buttons and selection. The blue identity comes from WHERE the
   accent lands, not from how much of it there is — set the paragraphs in it
   too and the accents stop being accents, because nothing is left to stand
   out against. It also matters that this is a revision app: students read
   mark schemes and their own notes for an hour at a stretch, often on a bad
   screen in a bright room, and #0A84FF body text measures 3.01:1 here. */
/* The ground was #E9E9EE — a cool blue-white at 0.82 luminance, which is
   close to staring at a lit panel. It is now a warm paper grey ~7% darker:
   less glare over an hour of reading, and the warm cast stops it reading as
   "screen" rather than "page". The ink stays a blue-cast near-black, which
   is what keeps light and dark looking like one product.

   --blue stays #0A84FF for FILLS (buttons, selection) where the label sits on
   blue and contrast is measured the other way round. Blue TEXT on the light
   ground gets its own darker step: #0A84FF measured 3.01:1 on the old ground
   and 2.66:1 on this one, which fails even the large-text bar, so titles and
   links would have been decorative rather than legible. */
:root[data-theme="light"] {
  --fg-rgb: 22,35,58;
  --accent-rgb: 10,132,255;
  --on-blue: #fff;
  /* Cool grey ground, near-white cards ON TOP of it — the arrangement every
     legible light UI uses, and the thing this theme was missing. The ground
     is deliberately a little deeper than a pure #F0F2F5 so the page is not a
     glare panel; the separation, not the dimness, is what makes it calm. */
  --bg:  #FFFFFF;  /* plain white in light mode */
  --bg2: #EDEFF3;
  --bg3: #DFE3EA;
  --card:        #F8F9FB;
  --card-hover:  #FFFFFF;
  --card-border: rgba(25,32,45,0.13);
  --card-shadow: 0 1px 2px rgba(25,32,45,.04), 0 2px 10px rgba(25,32,45,.05);
  --glass: #F8F9FB;
  --glass-border: rgba(25,32,45,0.13);
  --glass-hover: #FFFFFF;
  --blue: #0A84FF;
  --blue-text: #1D64DD;          /* 4.9:1 on a card — #0A84FF is 3.46 and fails */
  --blue-glow: rgba(10,132,255,0.26);
  --blue-dim: rgba(10,132,255,0.10);
  --white: #16233A;
  --gray:  rgba(22,35,58,0.68);
  --gray2: rgba(22,35,58,0.60);
}
/* the accent does the identifying: titles, tags and section labels */
:root[data-theme="light"] .section-title,
:root[data-theme="light"] .section-tag { color:var(--blue-text); }
/* the orbs are additive-ish bloom on black; on paper they must tint, not glow */
:root[data-theme="light"] .orb { opacity:0.07; filter:blur(170px); }
/* grain is an overlay blend: it lifts a dark ground but muddies a light one */
:root[data-theme="light"] #n3-grain { opacity:.025 !important; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(29,29,31,0.20); }
html.theme-anim, html.theme-anim * , html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .40s ease, color .40s ease,
              border-color .40s ease, fill .40s ease !important;
}
@media (prefers-reduced-motion:reduce){
  html.theme-anim, html.theme-anim * { transition:none !important; }
}

/* ─── Nav extras: theme toggle + live presence ───────── */
.nav-theme { font-variant-numeric: tabular-nums; }
.nav-online {
  display:inline-flex; align-items:center; gap:7px; margin-left:8px;
  padding:6px 12px; border-radius:50px;
  border:1px solid var(--glass-border); background:var(--glass);
  color:var(--gray); font-size:12px; font-weight:550; white-space:nowrap;
  font-variant-numeric: tabular-nums;
}
.nav-online i {
  width:6px; height:6px; border-radius:50%; background:#33d17a; flex:none;
  box-shadow:0 0 0 0 rgba(51,209,122,.55); animation:onlinePulse 2.4s ease-out infinite;
}
@keyframes onlinePulse {
  0%   { box-shadow:0 0 0 0 rgba(51,209,122,.5); }
  70%  { box-shadow:0 0 0 6px rgba(51,209,122,0); }
  100% { box-shadow:0 0 0 0 rgba(51,209,122,0); }
}
@media (prefers-reduced-motion:reduce){ .nav-online i { animation:none; } }
@media (max-width:760px){ .nav-online { display:none; } }

/* Log out was rgba(255,99,88,.75) inline — 2.42:1 on the light ground.
   A destructive action is exactly the wrong place for unreadable text. */
/* Neutral, not red. Red says "this destroys something", and logging out
   destroys nothing — it sat in the bar looking like the one dangerous control
   on every page. */
.nav-logout { color:rgba(var(--fg-rgb),.72); padding:6px 10px; }

/* ─── AI not-yet-available ───────────────────────────── */
.ai-soon {
  margin-left:8px; padding:3px 8px; border-radius:50px;
  background:rgba(var(--fg-rgb),0.12); color:var(--gray);
  font-size:10px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  vertical-align:middle; white-space:nowrap;
}
.ai-note {
  display:block; margin-top:10px; font-size:12.5px; color:var(--gray2);
}

/* ─── Nav layout ─────────────────────────────────────
   The bar needs ~950px of items. Below that the tail used to be clipped and
   Log out was simply unreachable. The page links scroll; anything you must
   always be able to reach is pinned outside the scroller. */
.nav-scroll {
  display:flex; align-items:center; gap:2px;
  flex:1 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
}
.nav-scroll::-webkit-scrollbar { display:none; }
.nav-right {
  display:flex; align-items:center; gap:6px;
  flex:0 0 auto; margin-left:8px; padding-left:10px;
  border-left:1px solid rgba(var(--fg-rgb),0.09);
}
/* the links fade out as they run under the pinned cluster rather than being
   cut off mid-word, so it reads as scrollable instead of broken */
.nav-scroll { mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
              -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent); }
/* Everything pinned to the right steals width from the scrolling links, and
   on a 375px phone it had taken 228px of 375 — leaving a 42px window to scroll
   506px of navigation through. Question Bank, Flashcards and Pricing were
   effectively unreachable on a phone. So on small screens the pinned controls
   collapse to their glyphs and the decorative presence pill goes entirely. */
@media (max-width:760px){
  .nav-right { gap:4px; margin-left:4px; padding-left:6px; }
  /* Glyph-sized, thumb-sized.
     Collapsing these to their symbol left 26x28px targets, and a thumb is
     nearer 44px across — which is why they "did not work" on a phone about as
     often as they did. The glyph stays 13px; the button around it grows to
     something a thumb can actually land on. Centred rather than padded so the
     two stay the same shape whatever symbol is in them. */
  .nav-theme, .nav-particles {
    font-size:0; padding:0; min-width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .nav-theme::after { content:'◐'; font-size:15px; }
  .nav-particles::after { content:'✦'; font-size:15px; }
  .nav-particles.is-off::after { content:'✧'; }
  /* Log out was 63x25 — the width was fine, the height was not. */
  .nav-logout { min-height:40px; display:inline-flex; align-items:center; }
  .nav-online { display:none; }     /* nice to have on a desktop, not worth a third of a phone nav */
  /* the divider and its padding cost ~36px next to the wordmark — enough that
     "Question Bank" was wider than the scroll window and could never sit fully
     on screen no matter how far you scrolled */
  .nav-logo { margin-right:8px; padding-right:10px; }
}

/* ─── Nav on a phone: a menu, not a keyhole ────────────
   Collapsing the pinned controls above took the scroll window from 42px to
   98px on a 375px screen. That is still a keyhole: five of the eight links sit
   off screen at rest — Pricing among them — behind 408px of horizontal scroll
   that a bare overflow container gives no sign of. Students revise on phones
   and the upgrade page was the hardest thing on the site to find.

   Shrinking further has nowhere left to go, so below 760px the links stop
   being a scroller and become a dropdown panel. The same elements are reused,
   never cloned, so there is exactly one copy of every link and no second nav
   to keep in step. */
.nav-menu { display:none; }

@media (max-width:760px){
  .nav-menu {
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    margin-left:auto; flex:0 0 auto;
    width:34px; height:34px; padding:0 7px;
    background:none; border:none; cursor:pointer; border-radius:9px;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-menu span {
    display:block; width:100%; height:1.5px; border-radius:2px;
    background:rgba(var(--fg-rgb),0.62);
    transition:transform .2s ease, opacity .15s ease;
  }
  .nav-menu:hover span, .nav-menu[aria-expanded="true"] span { background:var(--white); }
  .nav-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  .nav-menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

  /* the fade was a hint that the row scrolled sideways; it no longer does */
  nav::after { display:none; }

  .nav-scroll {
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; align-items:stretch;
    gap:2px; padding:8px; margin:0;
    overflow-x:hidden; overflow-y:auto;
    max-height:calc(100dvh - 52px);
    background:var(--bg);
    border-bottom:1px solid rgba(var(--fg-rgb),0.09);
    box-shadow:0 20px 44px -26px rgba(0,0,0,.75);
    mask-image:none; -webkit-mask-image:none;
  }
  nav.nav-open .nav-scroll { display:flex; }

  /* a tapped row, not a pill. min-height rather than padding arithmetic, so
     the 44px target holds whatever the font does */
  .nav-scroll .nav-btn {
    display:flex; align-items:center; text-align:left;
    min-height:44px; padding:0 14px; border-radius:10px;
    font-size:14px; font-weight:500;
  }
  .nav-scroll .nav-login { margin:4px 0 0; text-align:center; padding:12px 16px; }
}

@media (prefers-reduced-motion: reduce){
  .nav-menu span { transition:none; }
}

/* ── Phones and iPads: no live blur ────────────────────────────────────────
   A backdrop-filter re-blurs everything behind it whenever anything behind it
   changes, and a filter:blur on a 700px orb is a huge offscreen layer. On a
   phone that is most of the frame budget; on an iPad it is worse, because the
   exam timer floats over the page being written on and re-blurred on every
   Pencil sample and every scroll. Every panel that used blur is already
   90%+ opaque (or sits on a near-black page), and the orbs are 7-9% opacity
   radial gradients that are soft without a filter — so on touch devices this
   costs nothing visible. The light-theme orb rule (blur 170px) used to beat
   the old coarse-pointer override on specificity; !important settles it. */
@media (pointer: coarse) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .orb { animation: none !important; filter: none !important; }
}

/* ── Touch: small controls get a full-size tap area ────────────────────────
   These are visually small on purpose (a star, a segmented range, a switch,
   an inline link), but on a phone they measured 14-24px tall against a 44pt
   target, so taps landed on nothing or on the neighbour. An invisible ::after
   grows each hit area to at least 44x44 around the same centre; nothing on
   screen moves. None of these elements used ::after already. */
@media (pointer: coarse) {
  .p-fav, .rng button, .lg button, .toggle-track, .login-back, #toggle-mode,
  #redeemLink, #manageLink, .nav-logo, .nh-customize { position: relative; }
  .p-fav::after, .rng button::after, .lg button::after, .toggle-track::after, .login-back::after,
  #toggle-mode::after, #redeemLink::after, #manageLink::after, .nav-logo::after, .nh-customize::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
}

/* Phones: particles are off by default on touch (battery, frames), so their
   switch in a crowded five-control bar is clutter. It stays on desktop. */
@media (pointer: coarse) and (max-width: 640px) { .nav-particles { display:none !important; } }

/* The hidden attribute always wins. An element with hidden AND an inline
   display (Past Papers' "Show 60 more" bar) stayed on screen, so "No papers
   match" sat above "Show 60 more · 8,998 remaining". */
[hidden] { display: none !important; }

/* Backgrounds are plain black or plain white — no glows. The three blurred
   blue orbs behind every app page are switched off everywhere. */
.bg-orbs { display: none !important; }

/* The Invite button in the bar: a gift and a word on desktop, just the gift
   on a phone, where the bar is already full. */
.nav-invite { white-space:nowrap; }
@media (max-width: 640px) { .nav-invite .nav-invite-lbl { display:none; } }

/* The Nova mark beside the wordmark in the bar — the same rounded-pill N as
   the app icon, so the tab, the home screen and the page all match. */
.nav-logo::before {
  content: ''; width: 22px; height: 22px; flex: none; border-radius: 6px;
  background: #000 url(/icon-192.png) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(var(--fg-rgb), .12);
}

/* ── Account menu (shared.js navAccountMenu) ──
   The avatar opens it; theme, particles, Admin and Log out live inside, so
   the bar itself is just the pages. */
button.nav-user-badge { cursor:pointer; padding:0; font-family:var(--font); }
button.nav-user-badge:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@media (max-width:760px){ button.nav-user-badge { width:36px; height:36px; } }
.nav-acct-menu {
  position:absolute; top:calc(100% + 12px); right:0; z-index:1100;
  min-width:220px; padding:8px; border-radius:14px;
  background:var(--bg); border:1px solid rgba(var(--fg-rgb),0.12);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  display:flex; flex-direction:column; gap:2px; white-space:nowrap;
}
.nav-acct-menu[hidden] { display:none; }
.nav-acct-who { font-size:12px; color:rgba(var(--fg-rgb),0.55); padding:6px 12px 8px;
  border-bottom:1px solid rgba(var(--fg-rgb),0.08); margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.nav-acct-menu .nav-btn { display:flex; align-items:center; width:100%; text-align:left;
  font-size:14px; min-height:44px; padding:0 12px; border-radius:10px; color:var(--white); }
.nav-acct-menu .nav-theme::after, .nav-acct-menu .nav-particles::after { content:none; }