/* ============================================================
   COMPASS website — Ocean Breeze colorway
   Loads AFTER styles.css (and waitlist.css). Token override only:
   layout, type (Oxanium + Inter) and motion are untouched.
   Palette from the 21st.dev "Ocean Breeze" theme.
   ============================================================ */
:root{
  --bg:#1A2131;--bg-2:#1E2637;--surface:#222B3D;--surface-2:#1E2637;--surface-3:#2E3849;
  --accent:#6FD39A;--accent-text:#8FE3B4;--accent-soft:rgba(111,211,154,.15);--accent-ghost:rgba(111,211,154,.08);--accent-line:rgba(111,211,154,.42);--on-accent:#0E1A13;
  /* the old indigo secondary becomes Ocean Breeze's cool slate-blue */
  --indigo:#6AAEFF;--indigo-text:#A9CDFF;--indigo-soft:rgba(106,174,255,.14);--indigo-line:rgba(106,174,255,.36);
  --warning:#F5B950;--danger:#C8453A;--info:#6AAEFF;
  --text:#F1F4F9;--dim:#A9B2C4;--faint:#8791A5;
  --line:#2F3849;--line-2:#414B5F;--line-strong:#566175;
  --paper:#EEF2F7;--paper-2:#DDE4EE;--ink:#121A28;--ink-dim:#4B5668;
  --glass-fill:rgba(34,43,61,.72);--glass-fill-2:rgba(46,56,73,.55);--glass-border:#414B5F;--glass-hi:rgba(255,255,255,.08);--spec:rgba(255,255,255,.12);
  --border:var(--line);--border-2:var(--line-2);--border-strong:var(--line-strong);
  --secondary:var(--indigo);--secondary-soft:var(--indigo-soft);--secondary-line:var(--indigo-line);--secondary-text:var(--indigo-text);
  --neg:var(--danger);--warn:var(--warning);
  --shadow:0 18px 44px rgba(0,0,0,.45);--shadow-sm:0 6px 18px rgba(0,0,0,.35);
}
::selection{background:var(--accent);color:var(--on-accent)}
.nav.stuck{background:rgba(26,33,49,.82)}
@media(max-width:880px){.nav-links{background:rgba(26,33,49,.97)}}
.brand img{width:30px;height:30px}

/* hero glows + grid */
.hero::before{background:radial-gradient(58% 52% at 50% 34%,rgba(111,211,154,.14),transparent 70%),radial-gradient(46% 40% at 78% 12%,rgba(106,174,255,.12),transparent 72%)}
.cta::before{background:radial-gradient(50% 60% at 50% 100%,rgba(111,211,154,.16),transparent 70%),radial-gradient(40% 50% at 22% 100%,rgba(106,174,255,.12),transparent 72%)}
.mode::before{background:radial-gradient(50% 60% at 50% 0,var(--glow,rgba(111,211,154,.16)),transparent 70%)}
.mode.indigo{--glow:rgba(106,174,255,.16)}
.console{background:linear-gradient(180deg,rgba(34,43,61,.92),rgba(30,38,55,.92))}
.zd-bar{background:var(--surface-3)}
.bar,.q-prog i{background:var(--surface-3)}
.radar{background:radial-gradient(60% 80% at 50% 50%,rgba(111,211,154,.08),transparent 70%)}
.sweep{background:conic-gradient(from 0deg,transparent 0deg,rgba(111,211,154,.3) 40deg,transparent 60deg)}
.sact.no{border-color:rgba(225,91,79,.4);background:rgba(225,91,79,.14)}
.tag.warn{background:rgba(245,185,80,.14);border-color:rgba(245,185,80,.38)}
.tag.info{background:rgba(106,174,255,.14);border-color:rgba(106,174,255,.36)}
.hl.flag{background:rgba(245,185,80,.14);border-bottom-color:rgba(245,185,80,.42)}

/* primary button — solid mint, quiet */
.btn-primary{background:var(--accent);color:var(--on-accent);border:1px solid transparent;box-shadow:0 10px 24px -16px rgba(0,0,0,.6);font-family:var(--font-display);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:13.5px}
.btn-primary::before{background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.22) 48%,transparent 64%)}
.btn-primary::after{display:none}
.btn-primary:hover{background:#7FDBA6;color:var(--on-accent);transform:translateY(-1px);box-shadow:0 12px 28px -16px rgba(0,0,0,.7)}
.btn-primary.btn-lg{font-size:14px;padding:17px 30px}
.nav-links .btn-primary{font-size:12.5px;padding:11px 18px;color:var(--on-accent)}
.glint{display:none}
.skip-link{background:var(--accent);color:var(--on-accent)}

/* light (paper) section swaps its hard-coded greens */
.lvl-head .mono{color:#1E9E62}
.lvl-bar i{background:linear-gradient(90deg,#1E9E62,#2B6FD6)}
.day.hit{background:#1E9E62;color:#fff}
.day.today{outline-color:#2B6FD6}
.paper-list .k{color:#1E9E62}
.paper :focus-visible{outline-color:#157A4A}
.fade-to-paper{background:linear-gradient(180deg,var(--bg) 0%,#2A3346 34%,#5E6A80 68%,#C4CDDA 90%,var(--paper) 100%)}
.fade-to-paper::after{background:radial-gradient(52% 110% at 50% 104%,rgba(111,211,154,.16),transparent 68%)}
.fade-from-paper{background:linear-gradient(180deg,var(--paper) 0%,#C4CDDA 11%,#5E6A80 34%,#2A3346 68%,var(--bg) 100%)}
.fade-from-paper::after{background:radial-gradient(52% 110% at 50% -4%,rgba(106,174,255,.14),transparent 68%)}

/* spectrum rule: mint → slate-blue → amber */
.spectrum{background:linear-gradient(90deg,transparent,var(--accent-line) 18%,var(--indigo-line) 50%,rgba(245,185,80,.34) 76%,transparent)}
.spectrum::after{background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--indigo),transparent)}
.grad,#cycle{background:linear-gradient(94deg,var(--accent) 0%,var(--accent-text) 45%,var(--indigo-text) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline-color:var(--accent)}

/* waitlist page pieces that used legacy colors */
.waitlist-badge{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-text)}
.form-group input,.form-group select{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.form-group input:focus,.form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.visual-card,.waitlist-stat{background:var(--surface);border-color:var(--line-2)}
.check{color:var(--accent)}
.stat-number{color:var(--accent-text)}
.modal-content{background:var(--surface);border:1px solid var(--line-2)}


/* ============ v4.2 — Figma principles & trends ============ */
:root{--reward:#F5B950;--reward-text:#FFD27A;--reward-soft:rgba(245,185,80,.16);--on-reward:#1C1400}
/* bold numerals */
.zd-date{font-size:clamp(56px,8vw,104px);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.lvl-head b{font-size:44px;letter-spacing:-.04em}
/* reward hue: streaks, XP, celebrations only */
.q-meta .streak,.xp-pop{color:var(--reward-text)}
.xp-pop{background:var(--reward-soft);border-color:rgba(245,185,80,.4)}
.day.hit{background:var(--reward);color:var(--on-reward)}
.lvl-bar i{background:linear-gradient(90deg,#1E9E62,var(--reward))}
.paper .day.hit{background:#B97A08;color:#fff}
/* honest projection label */
.zd-honest{display:flex;align-items:center;gap:8px;margin-top:18px;color:var(--faint);font-size:12.5px}
.zd-honest a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
/* scrollytelling hero: date + bars are driven by scroll progress (--sp 0→1) */
.console[data-scrolly] .zd-date{transition:none}
.scrolly-hint{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--faint);font-size:12.5px;margin-top:18px}
.scrolly-hint i{display:inline-block;width:18px;height:28px;border:1.5px solid var(--line-strong);border-radius:10px;position:relative}
.scrolly-hint i::after{content:'';position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--accent);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}}
/* destructive stays isolated (privacy page delete-data link) */
.btn-danger{background:var(--danger);color:#fff}
@media(prefers-reduced-motion:reduce){.scrolly-hint i::after{animation:none}.console[data-scrolly] .zd-date{filter:none}}

/* Roadmaps pane (v4.1 Roadmaps screen, High School tab) */
.rm-tabs{display:flex;padding:4px;border-radius:999px;background:var(--surface);margin-bottom:14px}
.rm-tabs span{flex:1;text-align:center;padding:9px;border-radius:999px;font-family:Oxanium,system-ui,sans-serif;font-weight:700;font-size:13px;color:var(--dim)}
.rm-tabs span.on{background:var(--accent);color:var(--on-accent)}
.rm-line{list-style:none;margin:0;padding:0;position:relative}
.rm-line>li{display:flex;gap:14px;padding-bottom:14px;position:relative}
.rm-line>li:not(:last-child)::after{content:"";position:absolute;left:17px;top:38px;bottom:0;width:2px;background:var(--line-2)}
.rm-line>li.done::after{background:var(--accent)}
.rm-line .node{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);border:2px solid var(--line-2);color:var(--on-accent);font-weight:700;font-size:15px}
.rm-line li.done .node{background:var(--accent);border-color:var(--accent)}
.rm-line li.now .node{border:2.5px solid var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.rm-line li.now .node i{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.rm-line li.next{opacity:.7}
.rm-line .card{flex:1;margin:0}
.rm-row{display:flex;justify-content:space-between;align-items:center}
.rm-row b{font-family:Oxanium,system-ui,sans-serif;font-size:16px}
.rm-row .mono{color:var(--dim);font-size:11px}
.rm-line small{display:block;color:var(--dim);font-size:12.5px;margin-top:4px}
.rm-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.rm-items li{display:flex;align-items:center;gap:9px}
.rm-items li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);flex:none}
.rm-items li.ok{color:var(--dim);text-decoration:line-through}
.rm-items li.ok::before{background:var(--accent);border-color:var(--accent)}
.rm-line .lvl-bar{height:6px;background:var(--surface-3)}
.rm-line .lvl-bar i{background:var(--accent)}

/* Scroll performance. backdrop-filter on every .glass card (and the minis
   nested inside them) made the browser re-blur each card whenever anything
   behind it moved, including the animated line canvases, so scrolling
   dropped frames. The Ocean Breeze surfaces are near-opaque tiers anyway,
   so the cards keep their own fill and lose only the blur. The nav keeps its
   blur: it is one element. */
.glass,.mini.glass,.btn-ghost{-webkit-backdrop-filter:none;backdrop-filter:none}