/* ============================================================
   WhaleHerald v5 — ONE product: the companion that teaches you the market while it happens
   Deep-navy night sky (from the herald key art) · electric blue + bright market green
   Dark is the default; light follows the toggle.
   ============================================================ */
:root {
  --font-b: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-h: "Sora", var(--font-b);
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 16px; --r2: 22px; --r3: 30px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sbw: 248px;
}
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #050b1d; --bg2: #071027; --card: #0a1430; --card2: #0d1939; --card3: #122047;
  --line: rgba(140,170,255,.10); --line2: rgba(140,170,255,.20);
  --txt: #f1f5ff; --dim: rgba(214,226,255,.70); --mute: rgba(214,226,255,.46);
  --good: #22e58c; --bad: #ff5468; --warn: #ffb547; --info: #4da3ff;
  --shadow: 0 30px 80px rgba(0,4,20,.6); --shadow2: 0 12px 32px rgba(0,4,20,.45);
  --glass: rgba(150,180,255,.04); --glass2: rgba(150,180,255,.075);
  --skel: rgba(150,180,255,.07);
  --acc: #3d9bff; --acc2: #22e3a4; --accsoft: rgba(61,155,255,.16); --accink: #fff;
  --glow: 0 0 0 1px rgba(61,155,255,.35), 0 10px 40px rgba(61,155,255,.25);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fd; --bg2: #eaf0fa; --card: #ffffff; --card2: #f3f6fc; --card3: #e7edf8;
  --line: rgba(10,30,70,.09); --line2: rgba(10,30,70,.17);
  --txt: #08132b; --dim: rgba(8,19,43,.66); --mute: rgba(8,19,43,.46);
  --good: #0b9a58; --bad: #d92d44; --warn: #b96e00; --info: #1f6fe5;
  --shadow: 0 24px 60px rgba(16,30,70,.12); --shadow2: 0 10px 28px rgba(16,30,70,.08);
  --glass: rgba(10,30,70,.025); --glass2: rgba(10,30,70,.05);
  --skel: rgba(10,30,70,.06);
  --acc: #1f6fe5; --acc2: #0b9a6a; --accsoft: rgba(31,111,229,.12); --accink: #fff;
  --glow: 0 0 0 1px rgba(31,111,229,.3), 0 10px 30px rgba(31,111,229,.15);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font: 15.5px/1.55 var(--font-b); color: var(--txt); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accsoft); }
h1, h2, h3 { font-family: var(--font-h); letter-spacing: -.025em; line-height: 1.12; }
b { font-weight: 650; }
.dim { color: var(--dim); } .mute { color: var(--mute); }
.up { color: var(--good) !important; } .dn { color: var(--bad) !important; }
.center { text-align: center; display: flex; justify-content: center; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.fine { font-size: 12.5px; color: var(--mute); margin-top: 14px; }
.grad { background: linear-gradient(100deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--acc); letter-spacing: .02em; }
.eyebrow svg { width: 16px; height: 16px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 14.5px; white-space: nowrap; transition: transform .2s var(--ease), background .2s, border-color .2s, opacity .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.pri { background: linear-gradient(120deg, var(--acc), var(--acc2)); color: var(--accink); box-shadow: 0 10px 30px var(--accsoft); }
.btn.ghost { border: 1px solid var(--line2); background: var(--glass); }
.btn.ghost:hover { background: var(--glass2); }
.btn.sm { height: 36px; padding: 0 15px; font-size: 13.5px; }
.btn.lg { height: 52px; padding: 0 26px; font-size: 15.5px; }
.btn.wide { width: 100%; }
.iconbtn { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 12px; color: var(--dim); transition: background .2s, color .2s; }
.iconbtn:hover { background: var(--glass2); color: var(--txt); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass2); border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--dim); }
.seg button.on { background: var(--card3); color: var(--txt); box-shadow: var(--shadow2); }
.seg.sm button { height: 26px; padding: 0 10px; font-size: 12.5px; }
.bar { height: 5px; border-radius: 9px; background: var(--glass2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width .6s var(--ease); }
.ring { width: 64px; height: 64px; transform: rotate(-90deg); flex: none; }
.ring circle { fill: none; stroke: var(--glass2); stroke-width: 11; }
.ring circle.on { stroke: var(--acc); stroke-linecap: round; stroke-dasharray: 326.7; transition: stroke-dashoffset 1s var(--ease); }
.ring text { transform: rotate(90deg); transform-origin: 60px 60px; font: 700 26px var(--font-b); fill: var(--txt); }
.spark { flex: none; overflow: visible; }
.spark polyline { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.spark.up polyline { stroke: var(--good); } .spark.dn polyline { stroke: var(--bad); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--good); text-transform: uppercase; letter-spacing: .06em; }
.live::before, i.live { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 var(--good); animation: pulse 2s infinite; display: inline-block; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,209,138,.55); } 70% { box-shadow: 0 0 0 8px rgba(47,209,138,0); } 100% { box-shadow: 0 0 0 0 rgba(47,209,138,0); } }
.skel { display: grid; gap: 10px; }
.skel i { display: block; height: 18px; border-radius: 8px; background: linear-gradient(90deg, var(--skel), var(--glass2), var(--skel)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skel i:nth-child(odd) { width: 86%; }
@keyframes shimmer { to { background-position: -200% 0; } }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--glass); font-size: 13.5px; font-weight: 600; }
.chip button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--mute); }
.chip button:hover { background: var(--glass2); color: var(--bad); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; background: var(--card3); border: 1px solid var(--line2); box-shadow: var(--shadow); font-size: 14px; transition: .3s var(--ease); max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg { color: var(--acc); flex: none; } .toast span { color: var(--dim); }
.boot { min-height: 100vh; display: grid; place-items: center; }
.boot img { border-radius: 50%; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.92); opacity: .7; } }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16.5px; letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.brand em { font-style: normal; font-weight: 600; color: var(--acc); font-size: 14px; padding: 2px 9px; border-radius: 999px; background: var(--accsoft); }
.empty-page { max-width: 520px; margin: 12vh auto; text-align: center; padding: 0 20px; display: grid; gap: 14px; justify-items: center; }
.empty-page h1 { font-size: 34px; } .empty-page p { color: var(--dim); }
.ep-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--accsoft); color: var(--acc); }
.prose p { margin: 0 0 12px; color: var(--dim); } .prose p:last-child { margin: 0; }
.prose b { color: var(--txt); } .prose ul, .prose ol { margin: 6px 0 12px 20px; color: var(--dim); } .prose li { margin: 4px 0; }
.tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--glass); }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }
.lesson-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 14px; border-radius: 12px; background: var(--accsoft); color: var(--acc); font-weight: 600; font-size: 13.5px; }
.askbar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--glass); color: var(--dim); margin-top: 28px; transition: border-color .2s, background .2s; }
.askbar:hover { border-color: var(--acc); background: var(--accsoft); color: var(--txt); }
.askbar span { flex: 1; } .askbar > svg:first-child { color: var(--acc); }

/* ============================================================
   PUBLIC PAGES
   ============================================================ */
.pview { min-height: 100vh; }
.pnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 14px clamp(16px, 4vw, 48px); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--line); }
.pnav-links { display: flex; gap: 6px; margin-left: 12px; flex: 1; }
.pnav-links a { padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--dim); font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.pnav-links a:hover { color: var(--txt); background: var(--glass2); }
.pnav-links a.other { margin-left: auto; color: var(--txt); }
.pnav-act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.psec { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 9vw, 110px) clamp(16px, 4vw, 40px) 0; }
.sec-h { max-width: 720px; margin: 0 0 36px; display: grid; gap: 12px; }
.sec-h h1 { font-size: clamp(34px, 5vw, 56px); }
.sec-h h2 { font-size: clamp(30px, 4.2vw, 48px); }
.sec-h p { color: var(--dim); font-size: 17px; }
.pcta { text-align: center; padding: clamp(80px, 12vw, 140px) 16px 40px; display: grid; gap: 22px; justify-items: center; }
.pcta h2 { font-size: clamp(30px, 4.6vw, 52px); max-width: 760px; }
.pfoot { max-width: 1180px; margin: 60px auto 0; padding: 32px clamp(16px, 4vw, 40px) 48px; border-top: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: auto 1fr; align-items: center; }
.pf-brand { display: flex; align-items: center; gap: 10px; } .pf-brand img { width: 28px; height: 28px; border-radius: 50%; }
.pfoot nav { display: flex; gap: 20px; justify-content: flex-end; color: var(--dim); font-size: 14px; }
.pfoot p { grid-column: 1 / -1; font-size: 12.5px; color: var(--mute); max-width: 720px; }

/* ---------- the front door ---------- */
.gate { position: relative; height: 100vh; height: 100dvh; display: flex; overflow: hidden; background: #000; }
.gate-top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 3vw, 36px); color: #fff; }
.gate-top .iconbtn { color: rgba(255,255,255,.8); } .gate-top .iconbtn:hover { background: rgba(255,255,255,.12); color: #fff; }
.gate-top .btn.ghost { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; }
.gate-top .hi { font-size: 14px; color: rgba(255,255,255,.8); }
.door { position: relative; flex: 1; display: flex; align-items: flex-end; overflow: hidden; color: #fff; transition: flex-grow .8s var(--ease); isolation: isolate; }
.door + .door { border-left: 1px solid rgba(255,255,255,.08); }
.door video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 1.2s var(--ease), filter .8s; filter: saturate(1.05) brightness(.8); }
.door-shade { position: absolute; inset: 0; z-index: -1; transition: opacity .8s; }
.door.learn .door-shade { background: radial-gradient(120% 90% at 0% 100%, rgba(4,24,14,.92), rgba(4,12,18,.35) 60%, rgba(0,0,0,.15)), linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%); }
.door.companion .door-shade { background: radial-gradient(120% 90% at 0% 100%, rgba(2,14,32,.92), rgba(2,8,20,.35) 60%, rgba(0,0,0,.15)), linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%); }
.door-in { padding: clamp(28px, 5vw, 72px); padding-bottom: clamp(76px, 10vh, 120px); max-width: 640px; display: grid; gap: 14px; }
.door-k { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.door.learn .door-k { color: #5ff0a6; } .door.companion .door-k { color: #7dd8ff; }
.door h2 { font-size: clamp(56px, 6.8vw, 116px); letter-spacing: -.055em; line-height: .92; font-weight: 700; }
.door p { font-size: clamp(15px, 1.4vw, 18px); color: rgba(255,255,255,.78); max-width: 460px; }
.door-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 600; width: max-content; transition: transform .3s var(--ease), gap .3s var(--ease); }
.door.learn .door-cta { background: #2fd27e; color: #03170b; }
.door.companion .door-cta { background: #38bdf8; color: #02131f; }
@media (hover: hover) {
  .gate:hover .door { flex-grow: .8; }
  .gate:hover .door:hover { flex-grow: 1.35; }
  .door:hover video { transform: scale(1); filter: saturate(1.15) brightness(1); }
  .door:hover .door-cta { gap: 16px; transform: translateY(-2px); }
}
.gate-foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 14px; padding: 16px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.vidbtn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; }

/* ---------- School landing ---------- */
.lhero { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 7vw, 90px) clamp(16px, 4vw, 40px) 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.lh-txt { display: grid; gap: 22px; }
.lh-txt h1 { font-size: clamp(42px, 6vw, 76px); letter-spacing: -.045em; line-height: 1; }
.lh-txt p { font-size: 18px; color: var(--dim); max-width: 560px; }
.lh-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--dim); font-size: 14px; }
.lh-stats b { color: var(--txt); font-size: 16px; }
.vframe { position: relative; border-radius: var(--r3); overflow: hidden; border: 1px solid var(--line2); box-shadow: var(--shadow), 0 0 0 8px var(--glass); aspect-ratio: 16 / 9; background: #000; }
.vframe video { width: 100%; height: 100%; object-fit: cover; }
.vf-sound { position: absolute; right: 14px; bottom: 14px; display: inline-flex; gap: 8px; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13.5px; font-weight: 600; backdrop-filter: blur(8px); }
.vf-chip { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(8px); }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stagecard { position: relative; padding: 24px; border-radius: var(--r2); border: 1px solid var(--line); background: linear-gradient(180deg, var(--glass2), transparent); display: grid; gap: 10px; align-content: start; }
.stagecard .sn { font: 600 13px var(--mono); color: var(--acc); }
.stagecard h3 { font-size: 22px; } .stagecard p { color: var(--dim); font-size: 14px; }
.stagecard ul { list-style: none; display: grid; gap: 6px; margin-top: 6px; font-size: 13.5px; }
.stagecard li { padding-left: 14px; position: relative; } .stagecard li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.stagecard .lvl { font-size: 12px; color: var(--mute); margin-top: 6px; }
.fcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
.fcard { text-align: left; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line); background: var(--card); transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; display: flex; flex-direction: column; }
.fcard:hover { transform: translateY(-4px); border-color: var(--line2); box-shadow: var(--shadow2); }
.fc-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.fc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.fcard:hover .fc-img img { transform: scale(1.06); }
.fc-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #000; opacity: 0; transition: .3s var(--ease); }
.fcard:hover .fc-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fc-free { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--acc); color: var(--accink); }
.fc-txt { padding: 18px 18px 20px; display: grid; gap: 6px; }
.fc-txt h3 { font-size: 19px; } .fc-txt p { color: var(--dim); font-size: 14px; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.howcard { display: grid; gap: 12px; align-content: start; }
.howcard h3 { font-size: 19px; margin-top: 6px; } .howcard p { color: var(--dim); font-size: 14.5px; }
.how-media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.how-media > img { width: 100%; height: 100%; object-fit: cover; }
.hm-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: #000; }
.quizmock { padding: 20px; display: grid; gap: 12px; align-content: center; background: linear-gradient(160deg, var(--card2), var(--card)); }
.qm-q { font-weight: 600; font-size: 14.5px; }
.qm-o { display: grid; gap: 7px; }
.qm-o span { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13.5px; }
.qm-o .ok { border-color: var(--good); background: rgba(47,209,138,.12); color: var(--good); font-weight: 600; }
.qm-r { font-size: 13px; color: var(--dim); } .qm-r b { color: var(--good); }
.certmock { display: grid; place-content: center; text-align: center; gap: 6px; background: radial-gradient(circle at 50% 0%, var(--accsoft), transparent 70%), var(--card); }
.cm-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.certmock b { font-size: 24px; font-family: Georgia, serif; font-weight: 400; } .certmock span:last-of-type { color: var(--acc); font-weight: 600; }
.certmock i { color: var(--acc); display: grid; place-items: center; margin-top: 6px; }
.psec.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.psec.split > div:first-child { display: grid; gap: 16px; justify-items: start; }
.psec.split h2 { font-size: clamp(30px, 4vw, 46px); } .psec.split p { color: var(--dim); font-size: 17px; }
.chatmock { border-radius: var(--r3); border: 1px solid var(--line); background: var(--card); padding: 22px; display: grid; gap: 16px; box-shadow: var(--shadow2); }
.cm-u { justify-self: end; max-width: 80%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--card3); font-size: 14.5px; }
.cm-a { display: flex; gap: 12px; } .cm-a img { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.cm-a p { color: var(--dim); font-size: 14.5px; } .cm-a b { color: var(--txt); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 18px; }
.plan { position: relative; padding: 28px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 14px; align-content: start; }
.plan.hot { border-color: var(--acc); box-shadow: 0 0 0 4px var(--accsoft); }
.plan .tag { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: 999px; background: var(--acc); color: var(--accink); font-size: 12px; font-weight: 700; }
.plan h3 { font-size: 20px; } .plan .price { font-size: 44px; font-weight: 700; letter-spacing: -.04em; } .plan .price small { font-size: 16px; color: var(--mute); font-weight: 500; letter-spacing: 0; }
.plan .lead { color: var(--dim); }
.plan ul { list-style: none; display: grid; gap: 10px; margin: 6px 0 10px; font-size: 14.5px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; } .plan li svg { color: var(--acc); flex: none; margin-top: 3px; }
.plan-h { display: flex; gap: 10px; align-items: center; font-size: 20px; margin: 40px 0 18px; } .plan-h svg { color: var(--acc); }

/* ---------- Companion landing ---------- */
.chero { position: relative; min-height: min(86vh, 820px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; color: #fff; }
.ch-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ch-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2,6,14,.92) 0%, rgba(2,6,14,.6) 45%, rgba(2,6,14,.15) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 25%); }
[data-theme="light"] .ch-shade { background: linear-gradient(90deg, rgba(2,6,14,.9) 0%, rgba(2,6,14,.55) 50%, rgba(2,6,14,.1) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 22%); }
.ch-in { max-width: 1180px; width: 100%; margin: 0 auto; padding: 60px clamp(16px, 4vw, 40px) 120px; display: grid; gap: 22px; }
.ch-in h1 { font-size: clamp(44px, 6.4vw, 84px); letter-spacing: -.05em; line-height: .98; max-width: 760px; }
.ch-in p { font-size: 18px; color: rgba(255,255,255,.78); max-width: 560px; }
.chero .eyebrow { color: #7dd8ff; } .chero .btn.ghost { border-color: rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.06); }
.tape { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 32px; padding: 16px clamp(16px, 4vw, 40px); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px); color: var(--txt); }
.tape span { display: inline-flex; gap: 8px; font: 500 13.5px var(--mono); white-space: nowrap; } .tape i { font-style: normal; color: var(--mute); }
.tape i.up { color: var(--good); } .tape i.dn { color: var(--bad); }
.glimpse { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gl-card { padding: 20px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 14px; align-content: start; }
.gl-card.wide { grid-column: span 2; }
.gl-h { display: flex; align-items: center; gap: 10px; font-size: 14.5px; } .gl-h svg { color: var(--acc); } .gl-h .live { margin-left: auto; }
.gl-blur { list-style: none; display: grid; gap: 10px; color: var(--dim); font-size: 14px; filter: blur(4px); user-select: none; }
.gl-blur.lines li { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.gw-row { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 10px; align-items: center; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.gw-row span { font-family: var(--mono); color: var(--dim); } .gw-row i { font-style: normal; font: 600 12.5px var(--mono); width: 62px; text-align: right; }
.gl-lock { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px; border-radius: 999px; background: var(--card3); border: 1px solid var(--line2); box-shadow: var(--shadow); max-width: calc(100% - 24px); }
.gl-lock > span { color: var(--acc); } .gl-lock b { font-size: 14px; font-weight: 600; }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feat { padding: 26px; border-radius: var(--r2); border: 1px solid var(--line); background: linear-gradient(180deg, var(--glass2), transparent); display: grid; gap: 10px; align-content: start; }
.fi { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accsoft); color: var(--acc); }
.feat h3 { font-size: 18px; } .feat p { color: var(--dim); font-size: 14.5px; }

/* ---------- preview modal ---------- */
.pmodal { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 16px; background: rgba(3,6,12,.72); backdrop-filter: blur(10px); animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.pm-card { position: relative; width: min(980px, 100%); border-radius: var(--r2); overflow: hidden; background: var(--card); border: 1px solid var(--line2); box-shadow: var(--shadow); animation: rise .3s var(--ease); }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.pm-card video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.pm-x { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; }
.pm-info { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 20px 24px; flex-wrap: wrap; }
.pm-info h3 { font-size: 22px; margin: 4px 0; } .pm-info p { color: var(--dim); }

/* ============================================================
   APP SHELL
   ============================================================ */
.shell { display: grid; grid-template-columns: var(--sbw) 1fr; min-height: 100vh; }
.sb { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 12px; padding: 16px 12px 12px; border-right: 1px solid var(--line); background: var(--bg2); }
.sb-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px; }
.sb-close { display: none; }
.worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--glass2); border: 1px solid var(--line); }
.worlds a { display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--dim); }
.worlds a svg { width: 15px; height: 15px; }
.worlds a.on { background: var(--card3); color: var(--txt); box-shadow: var(--shadow2); }
.worlds a.on svg { color: var(--acc); }
.sb-nav { display: grid; gap: 2px; }
.sb-nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--dim); font-weight: 500; font-size: 14.5px; transition: background .2s, color .2s; }
.sb-nav a:hover { background: var(--glass2); color: var(--txt); }
.sb-nav a.on { background: var(--accsoft); color: var(--txt); } .sb-nav a.on svg { color: var(--acc); }
.sb-nav a em { margin-left: auto; font: 500 12px var(--mono); font-style: normal; color: var(--mute); }
.sb-chats { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.newchat { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; color: var(--dim); }
.newchat:hover { background: var(--glass2); color: var(--txt); }
.sb-list { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.sb-label { font-size: 11.5px; color: var(--mute); padding: 10px 12px 4px; font-weight: 600; }
.ci { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 12px; border-radius: 10px; font-size: 13.5px; color: var(--dim); }
.ci:hover, .ci.on { background: var(--glass2); color: var(--txt); }
.ct { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cact { display: none; } .ci:hover .cact { display: flex; }
.cact button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--mute); } .cact button:hover { color: var(--txt); background: var(--glass2); }
.ci-edit { flex: 1; height: 26px; border: 1px solid var(--acc); border-radius: 6px; background: var(--card); padding: 0 6px; font-size: 13.5px; }
.sb-foot { position: relative; border-top: 1px solid var(--line); padding-top: 10px; }
.ubtn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 12px; text-align: left; }
.ubtn:hover { background: var(--glass2); }
.av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--accink); }
.un { display: grid; min-width: 0; } .un b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .un small { font-size: 12px; color: var(--mute); }
.umenu { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); display: none; padding: 6px; border-radius: 16px; background: var(--card3); border: 1px solid var(--line2); box-shadow: var(--shadow); }
.umenu.on { display: grid; animation: rise .2s var(--ease); }
.um-head { display: grid; gap: 1px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.um-head span { font-size: 12.5px; color: var(--mute); } .um-lvl { color: var(--acc) !important; }
.umenu a, .umenu button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--dim); text-align: left; }
.umenu a:hover, .umenu button:hover { background: var(--glass2); color: var(--txt); }
.scrim { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.mbar { display: none; }
.aview { flex: 1; min-width: 0; }
.page { max-width: 1160px; margin: 0 auto; padding: clamp(24px, 4vw, 44px) clamp(16px, 3.5vw, 44px) 80px; }
.page.narrow { max-width: 760px; }
.vhead { margin-bottom: 28px; display: grid; gap: 8px; }
.vhead.row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.vhead h1 { font-size: clamp(28px, 3.4vw, 40px); } .vhead p { color: var(--dim); max-width: 680px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--dim); }
.back:hover { color: var(--txt); }

/* ---------- School home ---------- */
.greet { margin-bottom: 22px; display: grid; gap: 6px; } .greet h1 { font-size: clamp(28px, 3.6vw, 42px); }
.cont { display: grid; grid-template-columns: minmax(0, 1.1fr) 1fr; gap: 24px; padding: 14px; border-radius: var(--r3); border: 1px solid var(--line); background: linear-gradient(135deg, var(--accsoft), transparent 60%), var(--card); transition: border-color .3s, transform .3s var(--ease); }
.cont:hover { border-color: var(--acc); transform: translateY(-2px); }
.cont.done { grid-template-columns: 1fr; padding: 28px; }
.ct-img { position: relative; border-radius: var(--r2); overflow: hidden; aspect-ratio: 16 / 9; }
.ct-img img { width: 100%; height: 100%; object-fit: cover; }
.ct-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: #000; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ct-play svg { width: 20px; height: 20px; margin-left: 3px; }
.ct-txt { display: grid; gap: 10px; align-content: center; padding: 10px 14px 10px 0; }
.ct-txt .k { color: var(--acc); } .ct-txt h2 { font-size: clamp(24px, 2.6vw, 32px); } .ct-txt p { color: var(--dim); }
.ct-meta { font-size: 13px; color: var(--mute); }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.st { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); }
.st .ring { width: 52px; height: 52px; } .st .ring text { font-size: 30px; }
.st .big { display: inline-flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; min-width: 52px; }
.st .big svg { color: var(--acc); width: 20px; height: 20px; }
.st div { display: grid; } .st b { font-size: 14.5px; } .st span { font-size: 12.5px; color: var(--mute); }
.exready { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px 20px; border-radius: var(--r2); border: 1px solid var(--acc); background: var(--accsoft); }
.ei { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--acc); color: var(--accink); flex: none; }
.exready div { flex: 1; display: grid; } .exready span { font-size: 13.5px; color: var(--dim); }
.sec { margin-top: 40px; }
.sec-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.sec-row h2 { font-size: 22px; } .sec-row a { display: inline-flex; gap: 6px; align-items: center; color: var(--acc); font-size: 14px; font-weight: 600; }
.pathbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pb { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 16px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); }
.pb .bar { grid-column: 1 / -1; margin-top: 8px; }
.pb-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--mono); background: var(--glass2); grid-row: span 1; }
.pb.full .pb-n { background: var(--acc); color: var(--accink); } .pb.part .pb-n { color: var(--acc); }
.pb > span:last-of-type { font: 500 12.5px var(--mono); color: var(--mute); }
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ccard { display: flex; flex-direction: column; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line); background: var(--card); transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; }
.ccard:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: var(--shadow2); }
.cc-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.cc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ccard:hover .cc-img img { transform: scale(1.05); }
.cc-badge { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--accink); }
.cc-body { padding: 16px 18px 18px; display: grid; gap: 6px; flex: 1; align-content: start; }
.cc-body h3 { font-size: 18px; } .cc-body p { color: var(--dim); font-size: 14px; }
.cc-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .cc-foot .bar { flex: 1; } .cc-foot span { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.stage { margin-bottom: 44px; scroll-margin-top: 20px; }
.st-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.st-num { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; font: 600 16px var(--mono); background: var(--accsoft); color: var(--acc); }
.st-head h2 { font-size: 24px; margin: 2px 0 4px; } .st-head p { color: var(--dim); }
.finalcert { display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: var(--r3); border: 1px dashed var(--line2); background: var(--glass); }
.finalcert.on { border-style: solid; border-color: var(--acc); background: var(--accsoft); }
.fc-ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--accsoft); color: var(--acc); flex: none; }
.finalcert div { flex: 1; display: grid; gap: 4px; } .finalcert h2 { font-size: 22px; } .finalcert p { color: var(--dim); }
.finalcert .go { color: var(--mute); }

/* ---------- course page ---------- */
.course { max-width: 1160px; margin: 0 auto; padding: clamp(20px, 3.5vw, 40px) clamp(16px, 3.5vw, 44px) 80px; }
.chead { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; margin-bottom: 34px; }
.ch-media img { width: 100%; border-radius: var(--r2); aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); }
.ch-play { position: relative; display: block; width: 100%; border-radius: var(--r2); overflow: hidden; }
.ch-play img { transition: transform .8s var(--ease); }
.ch-play:hover img { transform: scale(1.03); }
.ch-play span { position: absolute; left: 16px; bottom: 16px; display: inline-flex; gap: 8px; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-size: 14px; font-weight: 600; backdrop-filter: blur(8px); }
.ch-txt { display: grid; gap: 12px; }
.ch-txt .k { color: var(--acc); margin-top: 6px; } .ch-txt h1 { font-size: clamp(30px, 3.6vw, 44px); } .ch-txt > p { color: var(--dim); font-size: 16.5px; }
.promise { list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.promise li { display: flex; gap: 10px; align-items: flex-start; } .promise svg { color: var(--acc); flex: none; margin-top: 3px; }
.cmeta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--mute); }
.llist { list-style: none; display: grid; gap: 10px; }
.llist a { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; padding: 10px 18px 10px 10px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); transition: border-color .25s, background .25s; }
.llist a:hover { border-color: var(--line2); background: var(--card2); }
.lthumb { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--card3); }
.lthumb img { width: 100%; height: 100%; object-fit: cover; }
.lthumb i { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); color: #fff; }
.lthumb.ex { display: grid; place-items: center; background: var(--accsoft); }
.lthumb.ex i { position: static; background: none; color: var(--acc); }
.llist a.done .lthumb i { background: rgba(4,20,12,.55); color: #5ff0a6; }
.lt { display: grid; gap: 2px; min-width: 0; }
.lt small { font-size: 12px; color: var(--mute); font-weight: 600; } .lt b { font-size: 16px; } .lt em { font-style: normal; font-size: 13.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm { display: grid; justify-items: end; font: 500 13px var(--mono); color: var(--mute); }
.exrow.soft { opacity: .75; }

/* ---------- lesson ---------- */
.lesson { max-width: 1320px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) clamp(16px, 3vw, 36px) 80px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
.lart { display: grid; gap: 22px; align-content: start; min-width: 0; }
.lnav { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--mute); }
.vplayer { border-radius: var(--r2); overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: var(--shadow2); }
.vplayer video { width: 100%; aspect-ratio: 16 / 9; }
.vplayer.soon { position: relative; aspect-ratio: 16 / 9; }
.vplayer.soon img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.vplayer.soon span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 600; text-align: center; padding: 20px; }
.lhead { display: grid; gap: 8px; } .lhead h1 { font-size: clamp(26px, 3vw, 36px); } .lhead p { color: var(--dim); font-size: 16px; }
.takeaways { padding: 20px 22px; border-radius: var(--r2); border: 1px solid var(--line); background: linear-gradient(135deg, var(--accsoft), transparent 70%), var(--card); }
.takeaways h3 { display: flex; gap: 8px; align-items: center; font-size: 16px; margin-bottom: 12px; } .takeaways h3 svg { color: var(--acc); }
.takeaways ul { list-style: none; display: grid; gap: 10px; }
.takeaways li { padding-left: 22px; position: relative; } .takeaways li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.quiz { padding: 22px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 20px; transition: box-shadow .5s; scroll-margin-top: 20px; }
.quiz.glow { box-shadow: 0 0 0 3px var(--accsoft); }
.qhead { display: flex; justify-content: space-between; align-items: center; }
.qhead h3 { display: flex; gap: 8px; align-items: center; font-size: 16px; } .qhead h3 svg { color: var(--acc); }
.qhead span { font-size: 13.5px; color: var(--mute); } .qhead b { color: var(--acc); }
.qq { display: grid; gap: 10px; }
.qt { display: flex; gap: 10px; font-weight: 600; } .qt span { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex: none; font: 600 12px var(--mono); background: var(--glass2); }
.qo { display: grid; gap: 8px; padding-left: 34px; }
.qopt { text-align: left; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); font-size: 14.5px; transition: border-color .2s, background .2s; }
.qopt:hover:not(:disabled) { border-color: var(--acc); }
.qopt:disabled { cursor: default; }
.qopt.right { border-color: var(--good); background: rgba(47,209,138,.12); color: var(--good); font-weight: 600; }
.qopt.wrong { border-color: var(--bad); background: rgba(255,93,99,.1); color: var(--bad); }
.qwhy { margin-left: 34px; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: var(--dim); }
.qwhy.ok { background: rgba(47,209,138,.08); } .qwhy.no { background: rgba(255,93,99,.07); }
.notes { border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); }
.notes summary { display: flex; gap: 10px; align-items: center; padding: 16px 20px; cursor: pointer; font-weight: 600; list-style: none; }
.notes summary::-webkit-details-marker { display: none; }
.notes summary small { color: var(--mute); font-weight: 400; font-size: 13px; }
.notes .prose { padding: 0 20px 20px; }
.lact { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lout { position: sticky; top: 20px; align-self: start; padding: 16px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); max-height: calc(100vh - 40px); overflow-y: auto; }
.lo-h { display: grid; gap: 4px; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.lo-h span { font-size: 12.5px; color: var(--mute); } .lo-h .bar { margin-top: 6px; }
.lout ol { list-style: none; display: grid; gap: 2px; }
.lout a { display: flex; gap: 10px; padding: 9px 8px; border-radius: 10px; font-size: 13.5px; color: var(--dim); }
.lout a:hover { background: var(--glass2); color: var(--txt); }
.lout a.on { background: var(--accsoft); color: var(--txt); }
.lout a > span { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; font: 600 11.5px var(--mono); background: var(--glass2); }
.lout a.done > span { background: var(--acc); color: var(--accink); }
.lout a.ex > span { background: var(--accsoft); color: var(--acc); }
.lout em { font-style: normal; display: grid; } .lout small { font: 500 11.5px var(--mono); color: var(--mute); }

/* ---------- exercise ---------- */
.exer { max-width: 920px; margin: 0 auto; padding: clamp(20px, 3.5vw, 40px) clamp(16px, 3vw, 32px) 80px; display: grid; gap: 22px; }
.ex-intro { text-align: center; display: grid; gap: 16px; justify-items: center; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px); border-radius: var(--r3); border: 1px solid var(--line); background: radial-gradient(80% 60% at 50% 0%, var(--accsoft), transparent 70%), var(--card); }
.ex-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--acc); color: var(--accink); }
.ex-ic svg { width: 28px; height: 28px; }
.ex-intro h1 { font-size: clamp(26px, 3.4vw, 38px); } .ex-intro p { color: var(--dim); max-width: 560px; }
.ex-rules { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ex-rules span { padding: 8px 14px; border-radius: 999px; background: var(--glass2); font-size: 13.5px; color: var(--dim); } .ex-rules b { color: var(--txt); }
.ex-prev { font-size: 14px; color: var(--dim); } .ex-prev b { color: var(--acc); }
.ex-top { display: flex; align-items: center; gap: 16px; justify-content: space-between; font-size: 13.5px; color: var(--mute); flex-wrap: wrap; }
.ex-dots { display: flex; gap: 6px; } .ex-dots i { width: 28px; height: 6px; border-radius: 9px; background: var(--glass2); }
.ex-dots i.done { background: var(--acc); opacity: .55; } .ex-dots i.now { background: var(--acc); }
.ex-setup { padding: 24px; border-radius: var(--r2); background: var(--card); border: 1px solid var(--line); font-size: 17px; }
.ex-q { display: grid; gap: 14px; } .ex-q h2 { font-size: clamp(20px, 2.4vw, 26px); }
.ex-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xopt { display: flex; gap: 12px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); font-size: 15px; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.xopt:hover { border-color: var(--line2); transform: translateY(-1px); }
.xopt span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; font: 700 13px var(--mono); background: var(--glass2); color: var(--dim); }
.xopt.sel { border-color: var(--acc); background: var(--accsoft); }
.xopt.sel span { background: var(--acc); color: var(--accink); }
.ex-nav { display: flex; justify-content: space-between; gap: 12px; }
.ex-res { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--r3); border: 1px solid var(--line); background: var(--card); }
.ex-res .ring { width: 140px; height: 140px; } .ex-res .ring text { font-size: 30px; }
.ex-res.pass { background: radial-gradient(70% 90% at 0% 50%, rgba(47,209,138,.14), transparent 70%), var(--card); border-color: rgba(47,209,138,.4); }
.ex-res.fail .ring circle.on { stroke: var(--warn); }
.ex-res > div { display: grid; gap: 10px; }
.ex-res .k { color: var(--acc); } .ex-res.fail .k { color: var(--warn); }
.ex-res h1 { font-size: clamp(26px, 3.2vw, 36px); } .ex-res p { color: var(--dim); }
.ex-review { list-style: none; display: grid; gap: 12px; }
.ex-review li { padding: 18px 20px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 8px; }
.ex-review li.ok { border-left: 3px solid var(--good); } .ex-review li.no { border-left: 3px solid var(--bad); }
.er-h { display: flex; gap: 10px; align-items: flex-start; } .er-ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex: none; }
li.ok .er-ic { background: rgba(47,209,138,.15); color: var(--good); } li.no .er-ic { background: rgba(255,93,99,.12); color: var(--bad); }
.er-a { font-size: 14px; color: var(--dim); padding-left: 34px; } .er-a s { color: var(--bad); } .er-a b { color: var(--txt); }
.er-why { font-size: 14px; color: var(--dim); padding: 10px 14px; margin-left: 34px; border-radius: 12px; background: var(--glass); }
.exlist { display: grid; gap: 10px; }
.exitem { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 10px 18px 10px 10px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); }
.exitem:hover { border-color: var(--line2); }
.exitem img { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.exitem div { display: grid; } .exitem span { font-size: 13.5px; color: var(--mute); }
.exs { font: 600 14px var(--mono); color: var(--dim) !important; display: inline-flex; gap: 6px; align-items: center; }
.exitem.pass .exs { color: var(--good) !important; }

/* ---------- certificates ---------- */
.certgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.certtile { display: grid; gap: 8px; padding: 20px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); opacity: .7; }
.certtile.on { opacity: 1; border-color: var(--acc); background: linear-gradient(160deg, var(--accsoft), transparent 70%), var(--card); }
.certtile span { color: var(--mute); } .certtile.on span { color: var(--acc); } .certtile small { color: var(--mute); font-size: 12.5px; }
.certtile.grand { grid-column: 1 / -1; }
.certpage { max-width: 980px; margin: 0 auto; padding: 32px clamp(16px, 3vw, 32px) 80px; }
.cert { position: relative; padding: clamp(28px, 6vw, 64px); border-radius: 22px; background: #fbfaf6; color: #10141c; text-align: center; display: grid; gap: 10px; box-shadow: var(--shadow); border: 10px solid #fff; outline: 1px solid #d9d2bf; outline-offset: -22px; }
.cert-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cert-top .brand img { width: 34px; height: 34px; } .cert-id { font: 500 12px var(--mono); color: #7d7563; }
.cert-k { font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: #8a7f63; }
.cert h1 { font: 400 clamp(34px, 6vw, 58px) Georgia, "Times New Roman", serif; letter-spacing: 0; margin: 6px 0; }
.cert-has { color: #5c5a52; } .cert h2 { font-size: clamp(22px, 3.4vw, 32px); color: #0b6b3c; }
.cert.grand h2 { color: #1d4ed8; }
.cert-meta { color: #6b6658; font-size: 14px; }
.cert-foot { display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; align-items: end; margin-top: 30px; text-align: left; }
.cert-foot div { display: grid; border-top: 1px solid #cfc7b2; padding-top: 8px; } .cert-foot span { font-size: 12px; color: #8a7f63; }
.cert-seal { width: 92px; height: 92px; object-fit: contain; }
.cert-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 860px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 24px); }
.thread { flex: 1; overflow-y: auto; padding: 32px 4px 20px; display: flex; flex-direction: column; gap: 22px; scrollbar-width: thin; }
.cempty { margin: auto 0; display: grid; justify-items: center; gap: 12px; text-align: center; padding: 20px 0; }
.cmark { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 18px 40px var(--accsoft)); }
.cempty h2 { font-size: clamp(26px, 3.4vw, 36px); } .cnote2 { color: var(--dim); max-width: 480px; }
.sugg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 14px; }
.sg { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); transition: border-color .2s, transform .2s var(--ease); }
.sg:hover { border-color: var(--acc); transform: translateY(-1px); }
.sg svg { grid-row: span 2; color: var(--acc); margin-top: 2px; } .sg b { font-size: 14.5px; } .sg span { font-size: 13px; color: var(--mute); }
.m.u { align-self: flex-end; max-width: 82%; }
.ub { padding: 12px 16px; border-radius: 20px 20px 6px 20px; background: var(--card3); white-space: pre-wrap; word-wrap: break-word; }
.m.a { display: flex; gap: 14px; }
.am { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.ab { min-width: 0; flex: 1; }
.at { line-height: 1.65; } .at p { margin: 0 0 12px; } .at p:last-child { margin: 0; }
.at h2, .at h3, .at h4 { margin: 16px 0 8px; font-size: 17px; } .at ul, .at ol { margin: 6px 0 12px 22px; } .at li { margin: 4px 0; }
.at code { font: 13.5px var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--glass2); }
.at pre { padding: 14px; border-radius: 12px; background: var(--card2); overflow-x: auto; margin: 8px 0 12px; } .at pre code { background: none; padding: 0; }
.at blockquote { border-left: 3px solid var(--acc); padding: 4px 14px; color: var(--dim); margin: 8px 0; }
.at a:not(.lesson-link) { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.at .tbl { margin: 8px 0 12px; } .at.err { color: var(--bad); }
.at.typing:empty::after, .at.typing > :last-child::after { content: "▍"; color: var(--acc); animation: blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.aact { display: flex; gap: 4px; margin-top: 8px; opacity: 0; transition: opacity .2s; }
.m.a:hover .aact, .m.a.last .aact { opacity: 1; }
.aact button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--mute); } .aact button:hover { background: var(--glass2); color: var(--txt); }
.composer { padding: 10px 0 18px; }
.cbox { display: flex; align-items: flex-end; gap: 10px; padding: 10px 10px 10px 18px; border-radius: 24px; border: 1px solid var(--line2); background: var(--card); box-shadow: var(--shadow2); transition: border-color .2s; }
.cbox:focus-within { border-color: var(--acc); }
.cbox textarea { flex: 1; border: 0; outline: 0; background: none; resize: none; font-size: 15.5px; line-height: 1.5; padding: 8px 0; max-height: 200px; }
.send { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--accink); flex: none; }
.send.stop { background: var(--txt); color: var(--bg); }
.cnote { text-align: center; font-size: 12px; color: var(--mute); margin-top: 8px; }

/* ---------- markets / paper trading ---------- */
.tgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.tmain { display: grid; gap: 12px; align-content: start; min-width: 0; }
.symbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.symsearch { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); min-width: 220px; color: var(--mute); }
.symsearch input { border: 0; outline: 0; background: none; flex: 1; color: var(--txt); text-transform: uppercase; }
.symsearch input::placeholder { text-transform: none; }
.symchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.schip { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font: 600 12.5px var(--mono); color: var(--dim); }
.schip.on { background: var(--accsoft); border-color: var(--acc); color: var(--txt); }
.qline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.qline > b { font-size: 22px; } .qname { color: var(--mute); font-size: 14px; } .qpx { font: 600 22px var(--mono); }
.qchg { font: 600 14px var(--mono); } .qtime { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mute); }
.qask { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--acc); font-weight: 600; }
.chart { height: 480px; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.chart #tvchart { height: 100%; }
.chart-off { height: 100%; display: grid; place-items: center; color: var(--mute); }
.studies { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.studies .lbl { font-size: 12.5px; color: var(--mute); margin-right: 4px; }
.stchip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.stchip.on { border-color: var(--acc); color: var(--txt); background: var(--accsoft); }
.sttip { font-size: 13.5px; color: var(--dim); } .sttip a { display: inline-flex; gap: 4px; align-items: center; color: var(--acc); font-weight: 600; }
.tside { display: grid; gap: 14px; align-content: start; }
.ticket, .coach { padding: 18px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 10px; }
.ticket h3 { font-size: 17px; }
.tk-side { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: var(--glass2); }
.tk-side button { height: 36px; border-radius: 10px; font-weight: 600; color: var(--dim); }
.tk-side button.on.buy { background: var(--good); color: #021a0e; } .tk-side button.on.sell { background: var(--bad); color: #fff; }
.tk-side button:disabled { opacity: .35; cursor: not-allowed; }
.tk-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; } .tk-row.dim { color: var(--mute); }
.tk-row b { font-family: var(--mono); }
.stepper { display: flex; align-items: center; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; }
.stepper button { width: 34px; height: 34px; font-size: 18px; color: var(--dim); } .stepper button:hover { background: var(--glass2); }
.stepper input { width: 64px; height: 34px; text-align: center; border: 0; background: none; outline: 0; font-family: var(--mono); -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tk-note { height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); outline: 0; font-size: 14px; }
.tk-note:focus { border-color: var(--acc); }
.confirm { display: grid; gap: 10px; } .confirm .k { color: var(--acc); }
.checks, .tips { list-style: none; display: grid; gap: 8px; font-size: 13.5px; }
.checks li, .tips li { padding: 9px 12px 9px 30px; border-radius: 10px; background: var(--glass); position: relative; color: var(--dim); }
.checks li::before, .tips li::before { position: absolute; left: 11px; top: 9px; font-weight: 700; }
:is(.checks, .tips) li.ok::before { content: "✓"; color: var(--good); } :is(.checks, .tips) li.warn::before { content: "!"; color: var(--warn); } :is(.checks, .tips) li.bad::before { content: "✕"; color: var(--bad); } :is(.checks, .tips) li.info::before { content: "i"; color: var(--info); }
:is(.checks, .tips) li.bad { background: rgba(255,93,99,.08); color: var(--txt); }
.why { font-style: italic; color: var(--dim); font-size: 14px; }
.coach-h { display: flex; gap: 10px; align-items: center; } .coach-h img { width: 28px; height: 28px; border-radius: 50%; }
.coach p { font-size: 14px; color: var(--dim); }
.coach-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--acc); }
.pf { margin-top: 24px; padding: 22px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 16px; }
.pf:empty { display: none; }
.pf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.pf-head h2 { font: 700 30px var(--mono); letter-spacing: -.03em; margin: 2px 0; }
.pf-stats { display: flex; gap: 26px; } .pf-stats div { display: grid; } .pf-stats b { font-family: var(--mono); } .pf-stats span { font-size: 12px; color: var(--mute); }
.tbl.pos tr { cursor: pointer; } .tbl.pos td { font-family: var(--mono); font-size: 13.5px; } .tbl.pos small { color: inherit; opacity: .8; }
.pf-empty { color: var(--dim); } .pf-sub { font-size: 15px; }
.olist { list-style: none; display: grid; gap: 6px; }
.olist li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; background: var(--glass); }
.olist .side { text-transform: uppercase; font: 700 11px var(--mono); padding: 3px 8px; border-radius: 6px; }
.side.buy { background: rgba(47,209,138,.15); color: var(--good); } .side.sell { background: rgba(255,93,99,.12); color: var(--bad); }
.olist small { color: var(--mute); } .olist em { color: var(--dim); width: 100%; font-size: 13px; }
.pf-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wiz { max-width: 720px; display: grid; gap: 18px; }
.wdots { display: flex; gap: 6px; } .wdots i { flex: 1; height: 5px; border-radius: 9px; background: var(--glass2); }
.wdots i.done { background: var(--acc); opacity: .5; } .wdots i.now { background: var(--acc); }
.wcard { padding: clamp(20px, 4vw, 34px); border-radius: var(--r3); border: 1px solid var(--line); background: var(--card); display: grid; gap: 14px; min-height: 280px; align-content: start; }
.wstep { font-size: 12.5px; color: var(--acc); font-weight: 600; } .wcard h2 { font-size: clamp(22px, 2.8vw, 30px); } .wn { color: var(--dim); }
.wopts { display: grid; gap: 10px; }
.wopt { text-align: left; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); font-size: 15px; transition: border-color .2s, background .2s; }
.wopt:hover { border-color: var(--line2); } .wopt.sel { border-color: var(--acc); background: var(--accsoft); }
.winput { height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); outline: 0; }
.winput:focus { border-color: var(--acc); }
#wslider { accent-color: var(--acc); width: 100%; } .wmoney { font: 700 32px var(--mono); }
.zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.z { padding: 12px; border-radius: 12px; text-align: center; font-weight: 700; display: grid; } .z small { font-weight: 500; color: var(--dim); font-size: 12.5px; }
.z.itm { background: rgba(47,209,138,.12); } .z.atm { background: var(--accsoft); } .z.otm { background: rgba(255,181,71,.12); }
.explain { padding: 14px 16px; border-radius: 14px; background: var(--glass2); color: var(--dim); font-size: 14.5px; } .explain b { color: var(--txt); }
.ticket-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ticket-sum div { padding: 12px 14px; border-radius: 12px; background: var(--glass); display: grid; } .ticket-sum span { font-size: 12px; color: var(--mute); }
.placed { display: grid; gap: 12px; justify-items: center; text-align: center; } .placed img { width: 140px; }
.placed h2 { font-size: 30px; } .wnav { display: flex; justify-content: space-between; }

/* ---------- companion dashboard ---------- */
.dhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.dhead h1 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 4px; }
.dask { display: flex; align-items: center; gap: 10px; width: min(460px, 100%); height: 48px; padding: 0 6px 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); color: var(--acc); }
.dask:focus-within { border-color: var(--acc); }
.dask input { flex: 1; border: 0; outline: 0; background: none; color: var(--txt); font-size: 15px; }
.dask button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: var(--accink); }
.tape2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.ix { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); display: grid; gap: 2px; }
.ix span { font-size: 12px; color: var(--mute); } .ix b { font: 600 16px var(--mono); } .ix i { font: 600 12.5px var(--mono); font-style: normal; }
.dgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; grid-auto-flow: dense; }
.dcard { border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; min-width: 0; }
.dc-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.dc-h svg { color: var(--acc); } .dc-h a { margin-left: auto; font-size: 13px; color: var(--acc); font-weight: 600; } .dc-h .live, .dc-h .seg { margin-left: auto; }
.dc-b { padding: 12px 16px 16px; display: grid; gap: 4px; align-content: start; flex: 1; }
.dcard.brief { grid-column: span 8; } .dcard.watch { grid-column: span 4; grid-row: span 2; }
.dcard.movers { grid-column: span 4; } .dcard.news { grid-column: span 4; grid-row: span 2; }
.dcard.xfeed { grid-column: span 4; grid-row: span 2; } .dcard.cal { grid-column: span 4; } .dcard.paper { grid-column: span 4; }
.brief .prose ul { margin: 0 0 0 18px; display: grid; gap: 8px; } .brief .prose li { color: var(--dim); }
.brief-f { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--mute); }
.brief-f a { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; color: var(--acc); font-weight: 600; font-size: 13px; }
.qrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.qrow:last-child { border-bottom: 0; } .qrow:hover { background: var(--glass); border-radius: 10px; }
.qs { display: grid; min-width: 0; } .qs b { font-size: 14px; } .qs small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp { display: grid; justify-items: end; font: 600 13.5px var(--mono); } .qp i { font-style: normal; font-size: 12px; }
.mv { display: grid; grid-template-columns: 58px 1fr auto 70px; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.mv:last-child { border-bottom: 0; } .mv span { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.mv em { font: 500 13px var(--mono); font-style: normal; } .mv i { font: 600 13px var(--mono); font-style: normal; text-align: right; }
.nitem { display: flex; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.nitem:last-child { border-bottom: 0; } .nitem:hover .nt { color: var(--acc); }
.nitem > div { display: grid; gap: 4px; min-width: 0; }
.nitem.big { flex-direction: column; } .nitem.big img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 12px; }
.nmeta { font-size: 12px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nmeta b { color: var(--dim); font-weight: 600; } .nmeta em { font: 600 11px var(--mono); font-style: normal; color: var(--acc); padding: 1px 6px; border-radius: 6px; background: var(--accsoft); }
.nt { font-weight: 600; font-size: 14.5px; line-height: 1.35; transition: color .2s; } .nitem.big .nt { font-size: 17px; }
.ns { font-size: 13.5px; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.tw:last-child { border-bottom: 0; } .tw:hover { background: var(--glass); border-radius: 12px; }
.tw-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--card3); font-weight: 700; object-fit: cover; }
.tw > div { min-width: 0; display: grid; gap: 4px; }
.tw-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13.5px; } .tw-h span { color: var(--mute); font-size: 12.5px; }
.tw p { font-size: 14px; white-space: pre-wrap; word-wrap: break-word; color: var(--txt); }
.tw-img { border-radius: 12px; max-height: 260px; object-fit: cover; border: 1px solid var(--line); }
.xlinks, .xhandles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xlinks a, .xhandles a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.xhandles { margin: 0 0 16px; }
.ev { display: grid; grid-template-columns: 70px 1fr auto; gap: 4px 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ev:last-child { border-bottom: 0; } .evt { font: 500 12.5px var(--mono); color: var(--mute); }
.ev small { grid-column: 2; color: var(--mute); font-size: 12px; }
.imp { font: 600 11px var(--mono); font-style: normal; padding: 2px 8px; border-radius: 6px; background: var(--glass2); color: var(--mute); }
.imp.high { background: rgba(255,93,99,.14); color: var(--bad); } .imp.medium { background: rgba(255,181,71,.14); color: var(--warn); }
.earn { margin-top: 10px; display: grid; gap: 8px; }
.earn div { display: flex; flex-wrap: wrap; gap: 6px; }
.earn a { padding: 5px 10px; border-radius: 8px; background: var(--glass2); font: 600 12.5px var(--mono); display: inline-flex; gap: 4px; align-items: baseline; }
.earn small { color: var(--mute); font-size: 10.5px; }
.pp { display: grid; gap: 2px; } .pp b { font: 700 26px var(--mono); }
.pp-pos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .pp-pos span { padding: 4px 10px; border-radius: 8px; background: var(--glass2); font: 500 12.5px var(--mono); }
.nlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin-top: 18px; }
.nlist .askbar { grid-column: 1 / -1; }
.xlist { max-width: 720px; display: grid; }
.calgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.cday { display: grid; gap: 2px; margin-bottom: 14px; } .cday .k { margin: 6px 0 4px; }
.setcard { padding: 22px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 12px; margin-bottom: 14px; }
.setcard h2 { display: flex; gap: 10px; align-items: center; font-size: 18px; } .setcard h2 svg { color: var(--acc); } .setcard p { color: var(--dim); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.addrow { display: flex; gap: 8px; } .addrow input { flex: 1; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card2); outline: 0; }
.addrow input:focus { border-color: var(--acc); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1180px) {
  .dcard.brief { grid-column: span 12; } .dcard.watch, .dcard.news, .dcard.xfeed { grid-column: span 6; grid-row: auto; }
  .dcard.movers, .dcard.cal, .dcard.paper { grid-column: span 6; }
  .tape2 { grid-template-columns: repeat(3, 1fr); }
  .fcards { grid-template-columns: repeat(2, 1fr); }
  .stages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1040px) {
  .lesson { grid-template-columns: 1fr; } .lout { position: static; max-height: none; }
  .tgrid { grid-template-columns: 1fr; }
  .cgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sb { position: fixed; z-index: 300; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .35s var(--ease); box-shadow: var(--shadow); }
  .sb-close { display: inline-grid; }
  .sb-open .sb { transform: none; }
  .sb-open .scrim { display: block; position: fixed; inset: 0; z-index: 250; background: rgba(0,0,0,.5); }
  .mbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40; height: 56px; padding: 0 10px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
  .mbar span { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat { height: calc(100dvh - 56px); }
  .lhero { grid-template-columns: 1fr; }
  .psec.split { grid-template-columns: 1fr; }
  .how, .feats { grid-template-columns: 1fr; }
  .glimpse { grid-template-columns: 1fr 1fr; } .gl-card.wide { grid-column: 1 / -1; }
  .chead { grid-template-columns: 1fr; }
  .cont { grid-template-columns: 1fr; } .ct-txt { padding: 4px 6px 8px; }
  .stats4, .pathbar { grid-template-columns: repeat(2, 1fr); }
  .calgrid { grid-template-columns: 1fr; }
  .nlist { grid-template-columns: 1fr; }
  .pnav-links { display: none; }
}
@media (max-width: 720px) {
  .gate { flex-direction: column; }
  .door + .door { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .door-in { padding: 24px 20px 30px; gap: 8px; }
  .door.learn .door-in { padding-top: 76px; }
  .door h2 { font-size: 64px; } .door p { font-size: 14.5px; } .door-cta { height: 44px; padding: 0 18px; font-size: 14.5px; }
  .gate-foot { display: none; }
  .dcard.watch, .dcard.news, .dcard.xfeed, .dcard.movers, .dcard.cal, .dcard.paper { grid-column: span 12; }
  .tape2 { grid-template-columns: repeat(2, 1fr); }
  .cgrid, .fcards, .stages, .plans { grid-template-columns: 1fr; }
  .glimpse { grid-template-columns: 1fr; }
  .gl-lock { position: static; transform: none; border-radius: var(--r2); flex-direction: column; text-align: center; padding: 18px; }
  .llist a { grid-template-columns: 96px 1fr; } .lm { display: none; }
  .ex-opts, .sugg { grid-template-columns: 1fr; }
  .ex-res { grid-template-columns: 1fr; justify-items: center; text-align: center; } .ex-res .row { justify-content: center; }
  .pfoot { grid-template-columns: 1fr; } .pfoot nav { justify-content: flex-start; }
  .pnav { padding: 12px 16px; gap: 10px; } .pnav .brand span { display: none; } .pnav .btn.ghost { display: none; }
  .cert-foot { grid-template-columns: 1fr 1fr; } .cert-seal { display: none; }
  .qask { margin-left: 0; width: 100%; }
  .chart { height: 380px; }
  .ticket-sum { grid-template-columns: 1fr; }
  .st { padding: 12px; } .st .big { font-size: 22px; min-width: 40px; }
  .exitem { grid-template-columns: 70px 1fr auto; } .exitem img { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  /* the landing ignores this setting on purpose (owner, 2026-10-09: animation for everyone) */
  :not(.fland):not(.fland *), :not(.fland *)::before, :not(.fland *)::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- print: only the certificate ---------- */
@media print {
  body { background: #fff; }
  .sb, .mbar, .cert-actions, .fine, .toast { display: none !important; }
  .shell { display: block; } .certpage { padding: 0; max-width: none; }
  .cert { box-shadow: none; border: 0; }
}
.xembed { display: grid; gap: 14px; margin-top: 10px; }
.xembed iframe { border-radius: 16px !important; }
.dc-h .seg { flex-wrap: nowrap; }
.ev { grid-template-columns: 78px 1fr auto; }
.symbar > * { min-width: 0; }
.symchips { flex: 1 1 360px; max-width: 100%; }
.tmain > * { min-width: 0; max-width: 100%; }
.pb { min-width: 0; }
.pb b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .pathbar { grid-template-columns: 1fr; } .stats4 { gap: 8px; } }

/* System One signals */
.sigs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sigs em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 600 11.5px var(--font-b); background: var(--glass2); color: var(--dim); }
.sigs em svg { width: 12px; height: 12px; }
.sg-imp.hi { background: rgba(255,181,71,.16); color: var(--warn); }
.sg-tone.bull { background: rgba(47,209,138,.14); color: var(--good); }
.sg-tone.bear { background: rgba(255,93,99,.13); color: var(--bad); }
.focus { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); font-size: 12.5px; font-weight: 600; color: var(--dim); margin-left: auto; white-space: nowrap; }
.focus svg { width: 14px; height: 14px; }
.focus.on { background: var(--accsoft); border-color: var(--acc); color: var(--txt); }
.dc-h .focus + a { margin-left: 10px; }
.sigrow { margin-top: 12px; } .sigrow .focus { margin-left: 0; }
.dim.sm { font-size: 12.5px; }
.cal .more { display: block; padding: 10px 4px 2px; font-size: 13px; font-weight: 600; color: var(--acc); }
.ask-status { display: flex; align-items: center; gap: 9px; margin: 6px 0 2px; font-size: 13px; color: var(--mute); font-style: italic; }
.ask-spin { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--acc); animation: askspin .8s linear infinite; }
@keyframes askspin { to { transform: rotate(360deg); } }
/* live chart (chart.js) */
.tfbar { display: flex; align-items: center; gap: 4px; margin: 10px 0 8px; flex-wrap: wrap; }
.tfbar button { border: 1px solid var(--line); background: var(--card2); color: var(--dim); font: 600 12.5px var(--font-b); padding: 6px 11px; border-radius: 9px; cursor: pointer; }
.tfbar button.on { background: var(--accsoft); border-color: var(--acc); color: var(--acc); }
.tfnote { margin-left: auto; font-size: 11.5px; color: var(--mute); }
.chart > div { height: 100%; }
.qext { font-size: 13px; color: var(--dim); } .qext b { font: 600 13.5px var(--mono); color: var(--txt); } .qext i { font-style: normal; font: 600 12.5px var(--mono); }
.qrow .qx { display: block; font: 500 10.5px var(--mono); color: var(--mute); }
.pf-add { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card2); }
.pf-add p { margin: 0 0 10px; font-size: 13.5px; color: var(--dim); }
.pf-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-add-row .chip { border: 1px solid var(--line2); background: var(--card); color: var(--txt); font: 600 13px var(--mono); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.pf-add-row .chip:hover { border-color: var(--acc); color: var(--acc); }
.pf-add-row form { display: flex; gap: 8px; margin-left: auto; }
.pf-add-row input { width: 150px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--txt); font: 14px var(--font-b); }
@media (max-width: 640px) { .pf-add-row form { margin-left: 0; width: 100%; } .pf-add-row input { flex: 1; } }
/* visual cards inside Ask the Whale answers (cards.js) */
.whcard { margin: 14px 0; border: 1px solid var(--line2); border-radius: var(--r); background: var(--card); overflow: hidden; max-width: 100%; }
.wc-wait { display: flex; align-items: center; gap: 10px; padding: 18px; color: var(--mute); font-size: 13.5px; font-style: italic; }
.wc-fail { padding: 16px; color: var(--mute); font-size: 13.5px; }
.wc-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.wc-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--acc); }
.wc-k svg { width: 14px; height: 14px; }
.wc-t { font-size: 15px; }
.wc-sub { display: inline-flex; align-items: baseline; gap: 8px; color: var(--mute); font-size: 12.5px; }
.wc-px { font: 600 15px var(--mono); color: var(--txt); }
.wc-sub i { font: 600 12.5px var(--mono); font-style: normal; }
.wc-ext { font: 500 11.5px var(--mono); }
.wc-open { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--acc); }
.wc-open svg { width: 14px; height: 14px; }
.wc-b { padding: 12px 14px; }
.wc-f { padding: 8px 14px 11px; font-size: 11.5px; color: var(--mute); border-top: 1px solid var(--line); }
.wc-f a { color: var(--acc); font-weight: 600; }
.wc-chart { height: 280px; border-radius: 12px; overflow: hidden; }
.wc-chart > div { height: 100%; }
.wc-tfs { display: flex; gap: 4px; margin-bottom: 8px; }
.wc-tfs button { border: 1px solid var(--line); background: var(--card2); color: var(--dim); font: 600 11.5px var(--font-b); padding: 4px 9px; border-radius: 8px; cursor: pointer; }
.wc-tfs button.on { border-color: var(--acc); color: var(--acc); background: var(--accsoft); }
.wc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.wc-tile { padding: 10px 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); }
.wc-tile span { display: block; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.wc-tile b { display: block; font: 600 15px var(--mono); margin-top: 2px; }
.wc-tile small { display: block; font-size: 11.5px; color: var(--mute); margin-top: 2px; }
.wc-flow td small { display: block; font-size: 11px; color: var(--mute); }
.wc-flow td .wc-cav { display: block; font-size: 11px; color: var(--warn); }
.wc-g { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font: 800 13px var(--mono); }
.wc-g.ga { background: rgba(47,209,138,.16); color: var(--good); }
.wc-g.gb { background: rgba(255,181,71,.16); color: var(--warn); }
.wc-g.gc { background: var(--card3); color: var(--mute); }
.wc-flow .mono, .wc-cmp .mono { font-family: var(--mono); }
.wc-ladder { margin-top: 12px; font-size: 12px; }
.wc-ladder .lh { display: grid; grid-template-columns: 1fr 120px 1fr; color: var(--mute); font-size: 11px; margin-bottom: 4px; text-align: center; }
.wc-ladder .lr { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; gap: 6px; padding: 2px 0; }
.wc-ladder .lr b { text-align: center; font: 600 12px var(--mono); }
.wc-ladder .lr.atm b { color: var(--acc); }
.wc-ladder .lr.mp b { color: var(--warn); }
.wc-ladder .lc, .wc-ladder .lp { display: flex; align-items: center; gap: 6px; height: 14px; }
.wc-ladder .lc { flex-direction: row-reverse; }
.wc-ladder i { display: block; height: 10px; border-radius: 3px; }
.wc-ladder i.c { background: rgba(47,209,138,.55); }
.wc-ladder i.p { background: rgba(255,93,99,.55); }
.wc-ladder em { font-style: normal; font: 500 10.5px var(--mono); color: var(--mute); }
.wc-pay { width: 100%; height: 220px; display: block; }
.wc-pay .pg { fill: rgba(47,209,138,.18); }
.wc-pay .pr { fill: rgba(255,93,99,.18); }
.wc-pay .pl { fill: none; stroke: var(--acc); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.wc-pay .z { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wc-pay .sp, .wc-pay .cur { stroke: var(--mute); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.wc-pay .be { fill: var(--warn); }
.wc-pay .curd { fill: var(--txt); }
.wc-pay .t { fill: var(--mute); font: 11px var(--mono); }
.wc-pay .t.c { text-anchor: middle; }
.wc-what { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--dim); }
.wc-what input { flex: 1; min-width: 160px; accent-color: var(--acc); }
.wc-what b { font-family: var(--mono); color: var(--txt); }
.wc-what .wr { font: 700 14px var(--mono); min-width: 90px; text-align: right; }
.wc-own { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--card3); }
.wc-own i, .wc-legend i { display: block; }
.wc-own .oi, .wc-legend .oi { background: var(--acc); }
.wc-own .on, .wc-legend .on { background: var(--warn); }
.wc-own .oo, .wc-legend .oo { background: var(--card3); }
.wc-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; font-size: 12px; color: var(--dim); }
.wc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wc-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line2); }
.wc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wc-sec { margin-top: 12px; }
.wc-sec > b { font-size: 12.5px; }
.wc-sec > small { color: var(--mute); font-size: 11.5px; }
.wc-hold { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; }
.wc-hold span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-hold i { display: block; height: 8px; border-radius: 4px; background: var(--acc); opacity: .7; }
.wc-hold em { font: 500 11.5px var(--mono); font-style: normal; color: var(--dim); }
.wc-ins { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 7px; font-size: 12.5px; }
.wc-ins small { display: block; color: var(--mute); font-size: 11px; }
.wc-ins em { font: 500 11.5px var(--mono); font-style: normal; color: var(--dim); }
.wc-ins .tag { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--card3); color: var(--dim); }
.wc-ins .tag.up { background: rgba(47,209,138,.15); color: var(--good); }
.wc-ins .tag.dn { background: rgba(255,93,99,.15); color: var(--bad); }
.wc-range { position: relative; height: 10px; margin: 10px 0 6px; border-radius: 5px; background: var(--card3); }
.wc-range i { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: rgba(90,162,255,.35); }
.wc-range em { position: absolute; top: -4px; width: 3px; height: 18px; border-radius: 2px; transform: translateX(-50%); }
.wc-range em.m { background: var(--info); }
.wc-range em.p { background: var(--txt); }
.wc-rl { display: flex; justify-content: space-between; gap: 8px; font: 500 11px var(--mono); color: var(--mute); }
.wc-cmp .wc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px 92px minmax(80px, 1.2fr) 66px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--txt); text-decoration: none; font-size: 13px; }
.wc-cmp .wc-row:last-child { border-bottom: 0; }
.wc-cmp small { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.wc-cmp em { font: 600 12.5px var(--mono); font-style: normal; text-align: right; }
.wc-bar { position: relative; height: 8px; background: var(--card3); border-radius: 4px; }
.wc-bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.wc-bar i.up { background: var(--good); }
.wc-bar i.dn { background: var(--bad); }
.wc-calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.wc-calc label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--mute); }
.wc-calc input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card2); color: var(--txt); font: 14px var(--mono); }
@media (max-width: 720px) { .wc-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .wc-cmp .wc-row { grid-template-columns: 54px minmax(0, 1fr) 76px 60px; }
  .wc-cmp .wc-row svg, .wc-cmp .wc-bar { display: none; }
  .wc-ladder .lh, .wc-ladder .lr { grid-template-columns: 1fr 92px 1fr; }
  .wc-chart { height: 230px; }
}
.at .whcard a { text-decoration: none; }
.at .whcard a.wc-row, .at .whcard a.wc-row * { color: var(--txt); }
.at .whcard a.wc-row small { color: var(--mute); }
.at .whcard .wc-open, .at .whcard .wc-f a { color: var(--acc); }
.at .whcard a.wc-row:hover b { color: var(--acc); }
/* learning cards (School tutor) */
.wc-vid { border-radius: 12px; overflow: hidden; background: #000; }
.wc-vid video { width: 100%; display: block; aspect-ratio: 16 / 9; }
.wc-sum { margin: 10px 0 0; font-size: 13.5px; color: var(--dim); line-height: 1.55; }
.wc-take { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--txt); }
.wc-take li { margin: 3px 0; }
.wc-q { padding: 10px 0; border-bottom: 1px solid var(--line); }
.wc-q:last-of-type { border-bottom: 0; }
.wc-q > p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.wc-opts { display: grid; gap: 6px; }
.wc-opt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; border: 1px solid var(--line2); border-radius: 11px; background: var(--card2); color: var(--txt); font: 500 13.5px var(--font-b); cursor: pointer; transition: border-color .15s, background .15s; }
.wc-opt:hover:not([disabled]) { border-color: var(--acc); }
.wc-opt span { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--card3); font: 700 11.5px var(--mono); color: var(--dim); }
.wc-opt.right { border-color: var(--good); background: rgba(47,209,138,.12); }
.wc-opt.right span { background: var(--good); color: #04130b; }
.wc-opt.wrong { border-color: var(--bad); background: rgba(255,93,99,.1); }
.wc-opt.wrong span { background: var(--bad); color: #fff; }
.wc-opt.dim { opacity: .55; }
.wc-opt[disabled] { cursor: default; }
.wc-why { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
.wc-why b { color: inherit; }
.wc-why.up b { color: var(--good); }
.wc-why.dn b { color: var(--bad); }
.wc-score { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); font-size: 13.5px; color: var(--dim); }
.wc-score b { font: 700 18px var(--mono); color: var(--txt); margin-right: 8px; }
.wc-score.up b { color: var(--good); }
.wc-sliders { display: grid; gap: 10px; margin-top: 10px; }
.wc-sliders label { display: grid; grid-template-columns: 150px 90px 1fr; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dim); }
.wc-sliders b { font: 600 13px var(--mono); color: var(--txt); }
.wc-sliders input { accent-color: var(--acc); width: 100%; }
.wc-labbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wc-labbtns button, .wc-fnav button { border: 1px solid var(--line2); background: var(--card2); color: var(--txt); font: 600 12.5px var(--font-b); padding: 7px 12px; border-radius: 10px; cursor: pointer; }
.wc-labbtns button:hover, .wc-fnav button:hover:not([disabled]) { border-color: var(--acc); color: var(--acc); }
.wc-fnav button[disabled] { opacity: .4; cursor: default; }
.wc-flash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 150px; padding: 22px; border: 1px solid var(--line2); border-radius: 16px; background: linear-gradient(140deg, var(--card2), var(--card3)); color: var(--txt); cursor: pointer; text-align: center; transition: transform .2s; }
.wc-flash:hover { transform: translateY(-1px); }
.wc-flash.back { background: linear-gradient(140deg, var(--accsoft), var(--card2)); border-color: var(--acc); }
.wc-flash .side { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.wc-flash b { font-size: 17px; line-height: 1.45; font-weight: 600; max-width: 560px; }
.wc-fnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.wc-fnav span { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.wc-fnav span i { width: 7px; height: 7px; border-radius: 50%; background: var(--card3); }
.wc-fnav span i.on { background: var(--acc); }
.wc-steps { display: flex; gap: 5px; margin-bottom: 12px; }
.wc-steps i { flex: 1; height: 5px; border-radius: 3px; background: var(--card3); }
.wc-steps i.done { background: var(--acc); opacity: .5; }
.wc-steps i.on { background: var(--acc); }
.wc-step { display: flex; gap: 12px; align-items: flex-start; min-height: 90px; }
.wc-step > span { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--accsoft); color: var(--acc); font: 700 14px var(--mono); }
.wc-step b { font-size: 15px; }
.wc-step .prose { font-size: 13.5px; color: var(--dim); margin-top: 4px; }
.wc-step .prose p { margin: 4px 0; }
.wc-prog { height: 10px; border-radius: 5px; background: var(--card3); overflow: hidden; }
.wc-prog.sm { height: 6px; }
.wc-prog i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.wc-stages { display: grid; gap: 6px; margin-top: 10px; }
.wc-stages > div { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dim); }
.wc-stages em { font: 500 11.5px var(--mono); font-style: normal; text-align: right; }
.wc-next { display: grid; gap: 2px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--acc); background: var(--accsoft); }
.wc-next span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.at .whcard .wc-next b { color: var(--txt); font-size: 14.5px; }
.at .whcard .wc-next small { color: var(--mute); font-size: 12px; }
.at .whcard .wc-weak { display: block; margin-top: 6px; font-size: 13px; color: var(--txt); }
.wc-weak small { color: var(--mute); margin-left: 6px; }
@media (max-width: 640px) {
  .wc-sliders label { grid-template-columns: 1fr auto; }
  .wc-sliders input { grid-column: 1 / -1; }
}
/* Terms / Privacy */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; line-height: 1.65; }
.legal h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 6px; }
.legal h2, .legal h3 { margin: 28px 0 8px; font-size: 19px; }
.legal p, .legal li { color: var(--dim); font-size: 15px; }
.legal li { margin: 4px 0; }
.legal b { color: var(--txt); }
.legal-alt { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.legal a, .gate-foot a { color: var(--acc); }
/* Your data */
.whm-card.yd { text-align: left; }
.whm-card.yd h3 { margin-bottom: 2px; }
.yd-dl { display: block; text-align: center; margin: 16px 0 6px; text-decoration: none; }
.yd-del { margin-top: 18px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,93,99,.35); background: rgba(255,93,99,.06); }
.yd-del b { color: var(--bad); }
.yd-del p { font-size: 13px; color: var(--dim); margin: 6px 0 10px; line-height: 1.5; }
.yd-del form { display: flex; gap: 8px; }
.yd-del input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--line2); border-radius: 10px; background: var(--card2); color: var(--txt); font: 14px var(--font-b); }
.yd-go { background: var(--bad); color: #fff; border: 0; }
.yd-go[disabled] { opacity: .45; }
.yd-err { color: var(--bad); font-size: 13px; }
.yd-pw { display: grid; gap: 8px; margin-top: 16px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); }
.yd-pw input { padding: 9px 11px; border: 1px solid var(--line2); border-radius: 10px; background: var(--card); color: var(--txt); font: 14px var(--font-b); }
.yd-pw small { color: var(--mute); font-size: 12px; line-height: 1.45; }
.yd-msg { margin: 0; font-size: 13px; } .yd-msg.up { color: var(--good); } .yd-msg.dn { color: var(--bad); }

/* ---------- alerts (Companion /companion/alerts + the bell) ---------- */
.sb-nav a em.nb { font: 700 11px var(--font-b); color: var(--accink); background: var(--acc); border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; }
.mbell { position: relative; }
.mbell i { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--acc); color: var(--accink); font: 700 10px/16px var(--font-b); font-style: normal; text-align: center; }
.mbell i[hidden] { display: none; }
.al-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.al-f { display: grid; gap: 5px; font-size: 12.5px; color: var(--dim); font-weight: 600; }
.al-f[hidden] { display: none; }
.al-f input, .al-f select { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card2); color: var(--txt); font: 500 14px var(--font-b); outline: 0; min-width: 0; }
.al-f input:focus, .al-f select:focus { border-color: var(--acc); }
.al-sym input { width: 120px; text-transform: uppercase; }
.al-f input[name=lvl], .al-f input[name=pct] { width: 120px; }
.al-hint { font-size: 13.5px; color: var(--dim); min-height: 1.3em; margin: 0; }
.al-hint i { font-style: normal; font-weight: 600; }
.al-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.al-row:first-child { border-top: 0; }
.al-row.off .al-txt b { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--line2); }
.al-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accsoft); color: var(--acc); font-size: 17px; }
.al-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.al-txt a { color: var(--txt); } .al-txt a:hover b { color: var(--acc); }
.al-txt small { color: var(--mute); font-size: 12.5px; }
.al-count { margin: 8px 0 0; font-size: 12.5px; }
.al-nh { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.al-note { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--txt); margin-bottom: 8px; }
.al-note.new { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accsoft); }
.al-note span { color: var(--dim); font-size: 13.5px; } .al-note small { color: var(--mute); font-size: 12px; }
.al-on { display: flex; align-items: center; gap: 8px; color: var(--good) !important; font-weight: 600; }
.al-on i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 25%, transparent); }
#alPush.nudge { border-color: var(--acc); box-shadow: 0 0 0 3px var(--accsoft); }
.qalert { margin-left: 14px; }
@media (max-width: 720px) {
  .al-form > * { flex: 1 1 140px; } .al-f input, .al-f select, .al-sym input, .al-f input[name=lvl], .al-f input[name=pct] { width: 100%; }
  .al-form .al-go { flex-basis: 100%; }
  .qalert { margin-left: 0; }
}
.al-nh .btn[hidden] { display: none; }

/* ---------- signal track record (/companion/track) ---------- */
.trk-since { color: var(--dim); margin: 0 0 14px; }
.trk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.trk-t { padding: 18px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 4px; }
.trk-t .k { font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.trk-t b { font: 700 32px var(--font-b); }
.trk-t span:not(.k) { color: var(--dim); font-size: 13.5px; } .trk-t small { font-size: 12.5px; font-weight: 600; }
.trk-g { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font: 700 12px var(--font-b); font-style: normal; background: var(--glass2); }
.trk-g.A { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
.trk-g.B { background: color-mix(in srgb, var(--info) 22%, transparent); color: var(--info); }
#trk td small { display: block; color: var(--mute); font-size: 12px; }
@media (max-width: 720px) { .trk-tiles { grid-template-columns: 1fr; } }

/* ---------- plans: lock boxes + upgrade dialog (shown only once the beta ends) ---------- */
.lockbox { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 18px; border-radius: var(--r2); border: 1px dashed var(--line2); background: var(--card2); }
.lockbox > svg { color: var(--acc); width: 22px; height: 22px; }
.lockbox b { font-size: 15.5px; } .lockbox span { color: var(--dim); font-size: 13px; max-width: 460px; }
.vplayer.locked { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 16px; }
.vplayer.locked img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.45); }
.vplayer.locked .lockbox { position: relative; background: color-mix(in srgb, var(--card) 88%, transparent); }
.whm-card.upsell { text-align: center; }
.whm-card.upsell .up-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accsoft); color: var(--acc); margin-bottom: 8px; }
.whm-card.upsell ul { list-style: none; display: grid; gap: 8px; margin: 14px 0 18px; text-align: left; font-size: 14px; }
.whm-card.upsell li { display: flex; gap: 8px; align-items: flex-start; } .whm-card.upsell li svg { color: var(--acc); flex: none; margin-top: 3px; }
.whm-card.upsell .up-plans { display: block; margin-top: 12px; font-size: 13.5px; color: var(--dim); }

/* ---------- paper options ticket (Markets) ---------- */
.tk-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--glass2); border: 1px solid var(--line); }
.tk-mode button { height: 32px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--dim); }
.tk-mode button.on { background: var(--card3); color: var(--txt); box-shadow: var(--shadow2); }
.tk-sel { height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card2); color: var(--txt); font: 500 13.5px var(--font-b); max-width: 60%; }
.tk-load { padding: 14px 2px; }
.tk-fine { font-size: 11.5px; color: var(--mute); margin: 0; text-align: center; }
.oladder { max-height: 248px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.olh, .olr { display: grid; grid-template-columns: 1.1fr 1fr 1fr .9fr; gap: 4px; padding: 7px 10px; font: 500 12.5px var(--mono); text-align: right; }
.olh { position: sticky; top: 0; background: var(--card2); color: var(--mute); font: 600 11px var(--font-b); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.olh span:first-child, .olr b { text-align: left; }
.olr { width: 100%; border-top: 1px solid var(--line); color: var(--dim); }
.olr:first-of-type { border-top: 0; }
.olr.itm { background: color-mix(in srgb, var(--acc) 6%, transparent); }
.olr:hover { background: var(--glass2); }
.olr.on { background: var(--accsoft); color: var(--txt); box-shadow: inset 3px 0 0 var(--acc); }
.olr b { color: var(--txt); }
.coach .whcard { margin: 10px 0; }
.opos td .btn.sm { height: 30px; padding: 0 12px; }
.whm-card.upsell { overflow-x: hidden; } .whm-card.upsell ul { padding: 0; }

/* ---------- My brokerage (/companion/portfolio, read-only SnapTrade link) ---------- */
.brk-hero { display: grid; gap: 20px; padding: 26px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); margin-bottom: 16px; }
.brk-hero .k { display: inline-flex; gap: 6px; align-items: center; color: var(--acc); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.brk-hero h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 6px 0; } .brk-hero p { color: var(--dim); }
.brk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.brk-b { display: grid; gap: 4px; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); transition: border-color .2s, transform .2s; }
.brk-b b { font-size: 16px; } .brk-b span { font-size: 12.5px; color: var(--acc); font-weight: 600; }
.brk-b:hover:not(:disabled) { border-color: var(--acc); transform: translateY(-1px); }
.brk-b:disabled { opacity: .55; cursor: default; } .brk-b:disabled span { color: var(--mute); }
.brk-b.busy { opacity: .6; cursor: wait; } .brk-b.other { border-style: dashed; }
.brk-soon { display: flex; gap: 8px; align-items: center; color: var(--dim); font-size: 14px; margin: 0; } .brk-soon svg { color: var(--acc); flex: none; }
.brk-trust { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; font-size: 13.5px; color: var(--dim); }
.brk-trust li { display: flex; gap: 10px; align-items: flex-start; } .brk-trust svg { color: var(--good); flex: none; margin-top: 2px; width: 16px; height: 16px; }
.brk-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.brk-sum > div { padding: 16px 18px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 3px; }
.brk-sum .k { font-size: 11.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.brk-sum b { font: 700 24px var(--font-b); } .brk-sum small { font-size: 12.5px; color: var(--mute); }
.brk .dcard { margin-bottom: 14px; }
.brk-asks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.brk-alloc { display: grid; gap: 8px; }
.brk-bar { display: grid; grid-template-columns: 70px 1fr 56px; gap: 10px; align-items: center; color: var(--txt); font-size: 13.5px; }
.brk-bar span { font-weight: 600; } .brk-bar b { text-align: right; font: 600 13px var(--mono); }
.brk-bar i { height: 10px; border-radius: 999px; background: var(--glass2); overflow: hidden; }
.brk-bar em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.brk-bar em.o { background: var(--warn); } .brk-bar em.c { background: var(--mute); }
.brk-acct td small { display: block; color: var(--mute); font-size: 11.5px; }
.brk-acct tr[data-sym] { cursor: pointer; } .brk-acct tr[data-sym]:hover td { background: var(--glass2); }
.brk-live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); margin-left: 6px; vertical-align: middle; }
.brk-tag { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--glass2); color: var(--dim); }
.brk-cash { margin: 10px 0 0; }
.brk-conn { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.brk-conn:first-of-type { border-top: 0; } .brk-conn b { flex: 1; min-width: 120px; } .brk-conn span { font-size: 13px; font-weight: 600; }
@media (max-width: 720px) { .brk-sum { grid-template-columns: 1fr 1fr; } .brk-sum b { font-size: 19px; } .brk-hero { padding: 18px; } }

/* ============================================================
   v5 — ONE product (2026-10-05)
   ============================================================ */
h1, h2, .lh-center h1 { font-family: var(--font-h); }
.btn.pri { background: linear-gradient(120deg, var(--acc), #5b7cff); color: #fff; box-shadow: 0 10px 30px rgba(61,155,255,.28); }
.btn.pri:hover { filter: brightness(1.08); }
.tlogo { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--card3); overflow: hidden; position: relative; font: 700 13px var(--font-h); color: var(--dim); }
.tlogo::before { content: attr(data-l); }
.tlogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; }
.tlogo img.light { background: #13244a; }

/* ---------- landing ---------- */
.land { background: var(--bg); }
.lnav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 18px clamp(16px, 4vw, 48px); }
.land > .lnav { position: sticky; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.lnav .brand { display: flex; align-items: center; gap: 10px; font: 700 19px var(--font-h); color: #fff; }
[data-theme="light"] .land > .lnav .brand { color: var(--txt); }
.lnav .brand img { border-radius: 10px; }
.lnav-links { display: flex; gap: 4px; margin: 0 auto; }
.lnav-links a { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: rgba(225,235,255,.78); }
[data-theme="light"] .land > .lnav .lnav-links a { color: var(--dim); }
.lnav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.lnav-act { display: flex; gap: 8px; margin-left: auto; }
.lhero2 .lnav-act .btn.ghost { border-color: rgba(255,255,255,.28); background: rgba(5,11,29,.35); color: #fff; }
.lhero2 { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; background: #050b1d; color: #fff; }
.lh-art { position: relative; order: 3; z-index: 0; display: block; width: min(100%, 122vh, 1500px); aspect-ratio: 16 / 9; margin-top: clamp(-100px, -6vw, -30px);
  -webkit-mask-image: radial-gradient(ellipse 52% 56% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 52% 56% at 50% 50%, #000 62%, transparent 100%); }
.lh-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lh-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(61,155,255,.16), transparent 70%); }
.lh-center { position: relative; order: 2; z-index: 2; max-width: 860px; padding: clamp(96px, 13vh, 140px) 20px 0; display: grid; gap: 16px; justify-items: center; text-align: center; }
.lh-k { font: 700 12.5px var(--font-b); letter-spacing: .22em; text-transform: uppercase; color: #8fc7ff; }
.lh-center h1 { font-size: clamp(44px, 7.4vw, 92px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; text-shadow: 0 10px 50px rgba(0,0,0,.45); }
.lh-center h1 .grad { background: linear-gradient(100deg, #4da3ff, #22e3a4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lh-center p { font-size: clamp(17px, 1.9vw, 21px); color: rgba(225,235,255,.88); max-width: 560px; }
.lh-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.lh-cta .btn.ghost { border-color: rgba(255,255,255,.3); background: rgba(5,11,29,.35); color: #fff; backdrop-filter: blur(6px); }
.lh-fine { font-size: 13px; color: rgba(225,235,255,.62); }
.lsec { max-width: 1120px; margin: 0 auto; padding: clamp(64px, 10vw, 120px) clamp(16px, 4vw, 40px) 0; }
.lsec.lfirst { padding-top: clamp(40px, 6vw, 72px); }
.lsec-h { max-width: 700px; margin: 0 auto 40px; display: grid; gap: 14px; text-align: center; justify-items: center; }
.lsec-h h1 { font-size: clamp(34px, 5vw, 56px); } .lsec-h h2 { font-size: clamp(30px, 4.4vw, 50px); }
.lsec-h p { color: var(--dim); font-size: 17.5px; }
.demo { max-width: 720px; margin: 0 auto; padding: 26px; border-radius: var(--r3); border: 1px solid var(--line2); background: linear-gradient(180deg, var(--card2), var(--card)); box-shadow: var(--shadow); display: grid; gap: 16px; position: relative; }
.demo-k { position: absolute; top: -11px; left: 26px; padding: 3px 10px; border-radius: 999px; background: var(--card3); border: 1px solid var(--line2); font-size: 11.5px; font-weight: 600; color: var(--mute); }
.demo-u { justify-self: end; max-width: 80%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--acc); color: #fff; font-weight: 500; }
.demo-a { display: grid; grid-template-columns: 34px 1fr; gap: 12px; } .demo-a > img { width: 34px; height: 34px; border-radius: 10px; }
.demo-a p { margin-bottom: 8px; } .demo-a ul { padding-left: 18px; display: grid; gap: 6px; color: var(--dim); }
.demo-notice { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px; border-radius: 16px; border: 1px solid rgba(61,155,255,.35); background: var(--accsoft); }
.demo-notice > svg { color: var(--acc); } .demo-notice div { flex: 1; min-width: 180px; display: grid; } .demo-notice span { color: var(--dim); font-size: 14px; }
.demo-btn { padding: 8px 14px; border-radius: 999px; background: var(--acc); color: #fff !important; font-weight: 600; font-size: 13.5px; }
.loop { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.loop li { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px 16px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); }
.loop li b { font-family: var(--font-h); font-size: 15.5px; } .loop li > span:not(.lp-n) { color: var(--dim); font-size: 13.5px; }
.lp-n { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accsoft); color: var(--acc); }
.lp-arrow { position: absolute; right: -14px; top: 26px; z-index: 2; color: var(--mute); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pillar { padding: 28px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 10px; align-content: start; }
.pillar .pi { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accsoft); color: var(--acc); }
.pillar h3 { font-size: 20px; font-family: var(--font-h); } .pillar p { color: var(--dim); }
.lsec.split2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.lsec.split2 > div:first-child { display: grid; gap: 16px; justify-items: start; } .lsec.split2 h2 { font-size: clamp(28px, 3.8vw, 44px); } .lsec.split2 p { color: var(--dim); font-size: 17px; }
.kmock, .kbox { display: grid; gap: 12px; padding: 24px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--card); box-shadow: var(--shadow2); }
.km-row { display: grid; grid-template-columns: 140px 1fr 46px; gap: 10px; align-items: center; font-size: 14px; }
.km-row > span { color: var(--dim); } .km-row > b { text-align: right; font: 600 13px var(--mono); }
.km-row i { height: 9px; border-radius: 999px; background: var(--glass2); overflow: hidden; }
.km-row em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.km-foot { display: flex; gap: 6px; align-items: center; color: var(--warn); font-size: 13.5px; font-weight: 600; }
.pstage { margin-bottom: 40px; } .ps-h { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.ps-n { font: 800 28px var(--font-h); color: var(--acc); } .ps-h p { color: var(--dim); }
.land .plans { justify-content: center; }

/* ---------- app shell: sections + phone tab bar ---------- */
.sb-nav2 { border-top: 1px solid var(--line); padding-top: 8px; }
.sb-chats { border-top: 0; padding-top: 0; }
.mbrand img { width: 30px; height: 30px; border-radius: 9px; }
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--mute); }
  .tabbar a svg { width: 21px; height: 21px; } .tabbar a.on { color: var(--acc); }
  .aview { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .chat { height: calc(100dvh - 56px - 62px - env(safe-area-inset-bottom)); }
}

/* ---------- the Whale panel ---------- */
.wp-fab { position: fixed; right: 22px; bottom: 22px; z-index: 140; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px 0 8px; border-radius: 999px; background: linear-gradient(120deg, #1d6fe0, #3d9bff); color: #fff; font-weight: 700; box-shadow: 0 14px 40px rgba(29,111,224,.45); transition: transform .2s var(--ease); }
.wp-fab img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.wp-fab:hover { transform: translateY(-2px); }
.wp.off .wp-fab, .wp.open .wp-fab, .wp[hidden] { display: none; }
.wp.off .wp-panel { display: none; }
.wp-scrim { display: none; }
.wp-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 160; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--bg2); border-left: 1px solid var(--line2); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .32s var(--ease); }
.wp.open .wp-panel { transform: none; }
.wp-h { display: flex; align-items: center; gap: 6px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.wp-h > img { width: 36px; height: 36px; border-radius: 11px; margin-right: 4px; }
.wp-ht { flex: 1; min-width: 0; display: grid; } .wp-ht b { font-family: var(--font-h); }
.wp-ctx { font-size: 12.5px; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.wp-empty { margin: auto 0; display: grid; justify-items: center; text-align: center; gap: 8px; color: var(--dim); }
.wp-empty img { width: 120px; } .wp-empty b { color: var(--txt); font-family: var(--font-h); font-size: 17px; }
.wp-m.u { align-self: flex-end; max-width: 86%; } .wp-m.u .ub { padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--acc); color: #fff; }
.wp-m.a .at { font-size: 14.5px; } .wp-m.a .at.typing:empty::after { content: "…"; color: var(--mute); }
.wp-m.a .at p + p, .wp-m.a .at ul, .wp-m.a .at ol { margin-top: 8px; } .wp-m.a .at ul, .wp-m.a .at ol { padding-left: 18px; }
.wp-m.a .whcard { margin: 10px 0; }
.wp-act { margin-top: 6px; } .wp-share { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--mute); font-weight: 600; } .wp-share:hover { color: var(--acc); }
.wp-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
.wp-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card); font-size: 12.5px; color: var(--dim); }
.wp-chip:hover { border-color: var(--acc); color: var(--txt); }
.wp-form { display: flex; gap: 8px; align-items: flex-end; margin: 0 12px; padding: 8px 8px 8px 14px; border-radius: 20px; border: 1px solid var(--line2); background: var(--card); }
.wp-form textarea { flex: 1; resize: none; border: 0; outline: 0; background: none; font-size: 15px; padding: 6px 0; max-height: 140px; }
.wp-form .send { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #fff; flex: none; }
.wp-note { font-size: 11.5px; color: var(--mute); text-align: center; padding: 8px 12px 12px; }
@media (min-width: 1280px) { .wp-on .main { margin-right: 440px; } }
@media (max-width: 900px) {
  .wp-fab { right: 14px; bottom: calc(74px + env(safe-area-inset-bottom)); height: 52px; width: 52px; padding: 0; justify-content: center; }
  .wp-fab span { display: none; }
  .wp-panel { top: auto; left: 0; width: 100vw; height: 88dvh; border-left: 0; border-top: 1px solid var(--line2); border-radius: 24px 24px 0 0; transform: translateY(105%); }
  .wp.open .wp-scrim { display: block; position: fixed; inset: 0; z-index: 150; background: rgba(0,4,20,.55); }
}

/* ---------- "Whale noticed something" ---------- */
.notices { display: grid; gap: 10px; }
.notice { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 14px; border-radius: 18px; border: 1px solid rgba(61,155,255,.35); background: linear-gradient(135deg, rgba(61,155,255,.13), rgba(34,227,164,.05)); animation: rise .35s var(--ease); }
.nt-ic img { width: 38px; height: 38px; border-radius: 12px; }
.nt-b { display: grid; gap: 6px; } .nt-b > b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--acc); }
.nt-b p { font-size: 14px; color: var(--dim); } .nt-b p b { color: var(--txt); }
.nt-act { display: flex; flex-wrap: wrap; gap: 6px; } .nt-act .btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* ---------- Home ---------- */
.home { max-width: 1120px; }
.hhero { display: grid; gap: 12px; padding: clamp(18px, 3vw, 34px); border-radius: var(--r3); border: 1px solid var(--line); background: radial-gradient(120% 140% at 100% 0%, rgba(61,155,255,.22), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(34,227,164,.10), transparent 60%), var(--card); }
.hh-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.pulse { display: flex; gap: 6px; flex-wrap: wrap; }
.pchip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--glass2); font-size: 12.5px; } .pchip span { color: var(--dim); } .pchip i { font: 600 12px var(--mono); font-style: normal; }
.hhero h1 { font-size: clamp(30px, 4.4vw, 46px); }
.hh-sub { color: var(--dim); font-size: 18px; margin-top: -4px; }
.hask { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 8px 8px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg2); box-shadow: var(--glow); }
.hask img { width: 34px; height: 34px; border-radius: 50%; } .hask input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; height: 40px; }
.hask .send { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #fff; flex: none; }
.hsugg { display: flex; gap: 8px; flex-wrap: wrap; }
.hs { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--glass); font-size: 13.5px; color: var(--dim); } .hs:hover { border-color: var(--acc); color: var(--txt); }
.fy-h { margin: 30px 0 14px; font-size: 22px; }
.fy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fycard { padding: 20px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 12px; align-content: start; }
.fycard.herald { grid-column: span 2; } .fycard.learn { grid-column: span 1; }
.fycard.learn { border-color: rgba(61,155,255,.35); background: linear-gradient(160deg, rgba(61,155,255,.12), var(--card) 60%); }
.fycard > .fy-h { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; }
.fy-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accsoft); color: var(--acc); font-size: 16px; }
.fycard .fy-h a { margin-left: auto; font-size: 13px; color: var(--acc); font-weight: 600; }
.fy-b { display: grid; gap: 12px; } .fy-lead { color: var(--dim); }
.hitems { list-style: none; display: grid; gap: 8px; }
.hitems button { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); }
.hitems button:hover { border-color: var(--acc); } .hitems svg { color: var(--mute); }
.hn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accsoft); color: var(--acc); font: 700 13px var(--font-h); }
.brief-box { padding: 14px; border-radius: 14px; background: var(--card2); }
.lo-t { font-size: 18px; } .fycard.learn p { color: var(--dim); } .fycard.learn p b { color: var(--txt); }
.cl { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.cl-img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/10; } .cl-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-img i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.25); }
.cl-t { display: grid; gap: 2px; } .cl-t small { color: var(--mute); font-size: 12px; } .cl-t em { font-style: normal; color: var(--dim); font-size: 12.5px; }
.cl-bar { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; color: var(--mute); }
.tradeloop { display: grid; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(61,155,255,.35); background: var(--accsoft); justify-items: start; }
.pp-pos span { display: inline-flex; gap: 6px; align-items: center; } .pp-pos .tlogo { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.wrow { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; }
.wr-s { display: grid; min-width: 0; } .wr-s small { color: var(--mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-p { display: grid; justify-items: end; font: 600 14px var(--mono); } .wr-p i { font-style: normal; font-size: 12.5px; }
.pg-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pg-tier { display: grid; font-size: 13px; color: var(--mute); } .pg-tier b { font: 800 22px var(--font-h); color: var(--txt); }
.pg-streak { display: inline-flex; gap: 6px; align-items: center; color: var(--warn); font-weight: 600; font-size: 14px; }
.xpbar { height: 8px; border-radius: 999px; background: var(--glass2); overflow: hidden; } .xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); border-radius: 999px; }
.pg-areas { display: grid; gap: 8px; } .pg-areas .km-row { grid-template-columns: 112px 1fr 40px; font-size: 13px; }
@media (max-width: 1040px) { .fy { grid-template-columns: 1fr 1fr; } .fycard.herald, .fycard.learn { grid-column: span 2; } }
@media (max-width: 720px) { .fy { grid-template-columns: 1fr; } .fycard.herald, .fycard.learn { grid-column: auto; } .hask input { font-size: 15px; } }

/* ---------- Markets tabs + insights ---------- */
.mtabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: var(--glass2); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.mtabs a { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--dim); white-space: nowrap; }
.mtabs a.on { background: var(--card3); color: var(--txt); box-shadow: var(--shadow2); }
.insight { display: grid; gap: 14px; padding: 18px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); }
.ins-h { display: flex; gap: 10px; align-items: center; } .ins-h > div { display: grid; } .ins-h span { font-size: 12.5px; color: var(--mute); }
.ins-asks { display: grid; gap: 6px; }
.ins-q { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); font-size: 13.5px; } .ins-q svg { color: var(--acc); flex: none; } .ins-q:hover { border-color: var(--acc); }
.ins-act { display: flex; gap: 6px; flex-wrap: wrap; }
.ins-news { display: grid; gap: 8px; } .ins-news a { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .ins-news small { color: var(--mute); font-size: 12px; }
.ins-calm { display: flex; gap: 8px; color: var(--dim); font-size: 13.5px; } .ins-calm svg { color: var(--good); flex: none; margin-top: 3px; }
.flowbox { margin-bottom: 14px; }
.pf-btns { display: flex; gap: 6px; } .pf-btns .btn.sm { height: 30px; padding: 0 10px; }

/* ---------- guided practice ---------- */
.guided { max-width: 860px; }
.gdots { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.gdots span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--glass2); font-size: 12.5px; color: var(--mute); font-weight: 600; }
.gdots i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--card3); font-style: normal; font-size: 11px; }
.gdots span.now { color: var(--txt); background: var(--accsoft); } .gdots span.now i { background: var(--acc); color: #fff; } .gdots span.done i { background: var(--good); color: #02160b; }
.gcard { padding: clamp(18px, 3vw, 30px); border-radius: var(--r2); border: 1px solid var(--line); background: var(--card); display: grid; gap: 14px; }
.gstep { font-size: 12px; font-weight: 700; color: var(--acc); text-transform: uppercase; letter-spacing: .08em; } .gcard h2 { font-size: clamp(22px, 3vw, 30px); } .gn { color: var(--dim); }
.gopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .gopts.two { grid-template-columns: 1fr 1fr; }
.gopt { display: grid; gap: 6px; text-align: left; align-content: start; padding: 16px; border-radius: 16px; border: 1px solid var(--line2); background: var(--card2); }
.gopt:hover { border-color: var(--acc); } .gopt.sel { border-color: var(--acc); box-shadow: var(--glow); }
.gopt b { display: flex; gap: 8px; align-items: center; font-size: 15.5px; } .gopt span { color: var(--dim); font-size: 13.5px; } .gopt small { color: var(--mute); font-size: 12.5px; }
.gq i { font-style: normal; }
.grisk { display: flex; gap: 12px; align-items: center; }
.gbig { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--card2); } .gbig b { font: 800 32px var(--font-h); } .gbig span { color: var(--dim); }
.gnav { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; } .gnav #gask { margin-right: auto; } .gnav[hidden] { display: none; }
@media (max-width: 720px) { .gopts, .gopts.two { grid-template-columns: 1fr; } }

/* ---------- Learn library + See it live ---------- */
.lib-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-bottom: 18px; }
.kbox { align-content: start; } .kbox .km-row { grid-template-columns: 120px 1fr 40px; font-size: 13px; } .kb-more { display: inline-flex; gap: 6px; align-items: center; color: var(--acc); font-size: 13px; font-weight: 600; }
.seelive { display: grid; gap: 8px; padding: 20px; border-radius: var(--r2); border: 1px solid rgba(61,155,255,.35); background: linear-gradient(135deg, rgba(61,155,255,.14), rgba(34,227,164,.06)); justify-items: start; margin: 18px 0; }
.sl-k { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--acc); text-transform: uppercase; letter-spacing: .08em; } .seelive p { color: var(--dim); }
@media (max-width: 1040px) { .lib-top { grid-template-columns: 1fr; } }

/* ---------- profile, onboarding, sharing ---------- */
.prof-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 24px; border-radius: var(--r3); border: 1px solid var(--line); background: radial-gradient(100% 140% at 100% 0%, rgba(61,155,255,.2), transparent 60%), var(--card); }
.prof-av { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; font: 800 30px var(--font-h); }
.prof-id { display: grid; gap: 6px; } .prof-id h1 { font-size: 28px; } .prof-tier { color: var(--acc); font-weight: 700; } .prof-id small { color: var(--mute); }
.prof-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; }
.prof-stats > * { display: grid; gap: 2px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.prof-stats b { display: flex; gap: 6px; align-items: center; font: 800 22px var(--font-h); } .prof-stats b small { font-size: 13px; color: var(--mute); } .prof-stats span { color: var(--mute); font-size: 12.5px; }
.prof .dcard { margin-bottom: 14px; }
.karea { border-top: 1px solid var(--line); } .karea:first-child { border-top: 0; }
.karea summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 170px 1fr 50px; gap: 12px; align-items: center; padding: 12px 0; font-weight: 600; }
.karea summary::-webkit-details-marker { display: none; }
.karea summary i { height: 10px; border-radius: 999px; background: var(--glass2); overflow: hidden; } .karea summary em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.karea summary b { text-align: right; font: 600 13px var(--mono); }
.kchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 14px; }
.kchip { display: grid; gap: 1px; text-align: left; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); font-size: 13px; }
.kchip em { font-style: normal; font-size: 11px; color: var(--mute); }
.kchip.s1 { border-color: rgba(255,181,71,.45); } .kchip.s2 { border-color: rgba(61,155,255,.5); } .kchip.s3 { border-color: rgba(34,229,140,.5); } .kchip.s4 { border-color: var(--good); background: rgba(34,229,140,.12); }
.kchip.s4 em { color: var(--good); } .kchip:hover { border-color: var(--acc); }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; } .pchips span { padding: 6px 12px; border-radius: 999px; background: var(--glass2); font-size: 13px; }
.tog { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; position: relative; }
.tog input { position: absolute; opacity: 0; } .tog span { width: 42px; height: 24px; border-radius: 999px; background: var(--card3); position: relative; transition: background .2s; }
.tog span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.tog input:checked + span { background: var(--acc); } .tog input:checked + span::after { transform: translateX(18px); }
@media (max-width: 720px) { .prof-head { grid-template-columns: auto 1fr; } .prof-act { grid-column: 1 / -1; } .prof-stats { grid-template-columns: repeat(2, 1fr); } .karea summary { grid-template-columns: 1fr 60px 44px; } }
.onb-card { max-width: 520px; text-align: left; }
.onb-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 12.5px; color: var(--mute); font-weight: 600; } .onb-top img { width: 30px; height: 30px; border-radius: 9px; } .onb-top .whm-x { position: static; margin-left: auto; }
.onb-opts { display: grid; gap: 8px; margin: 14px 0; }
.onb-o { padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); text-align: left; font-weight: 600; font-size: 15px; color: var(--txt); }
.onb-o:hover { border-color: var(--acc); } .onb-o.sel { border-color: var(--acc); background: var(--accsoft); }
.onb-nav { display: flex; justify-content: space-between; align-items: center; } .onb-why { margin-top: 12px; font-size: 12.5px; color: var(--mute); }
.share-card { max-width: 640px; } .share-img { width: 100%; border-radius: 14px; margin: 12px 0; border: 1px solid var(--line2); }

/* ---------- watchlist ---------- */
.wl-add { min-width: min(100%, 380px); }
.wl-ask { margin: 0 0 14px; width: 100%; }
.wl-list { display: grid; gap: 8px; }
.wl-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.wl-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px 1fr auto auto; gap: 14px; align-items: center; }
.wl-main .tlogo { width: 34px; height: 34px; }
.wl-sym { display: grid; min-width: 0; } .wl-sym small { color: var(--mute); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-px { display: grid; justify-items: end; font: 600 15px var(--mono); } .wl-px i { font-style: normal; font-size: 13px; } .wl-px small { font-size: 11.5px; color: var(--mute); }
.wl-act { display: flex; gap: 2px; }
@media (max-width: 720px) { .wl-main { grid-template-columns: 34px 1fr auto; } .wl-main .spark { display: none; } .wl-act .iconbtn { width: 34px; height: 34px; } .wl-act a[title="Practise"] { display: none; } }
@media (max-width: 1040px) { .loop { grid-template-columns: repeat(3, 1fr); } .lp-arrow { display: none; } .pillars { grid-template-columns: 1fr; } .lsec.split2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .lnav-links { display: none; } }
@media (max-width: 700px) { .lh-art { width: 100%; aspect-ratio: 4 / 5; margin-top: -30px; } }
@media (max-width: 640px) { .loop { grid-template-columns: 1fr 1fr; } .lnav .brand span { display: none; } .km-row { grid-template-columns: 110px 1fr 40px; } }
/* ============================================================
   landing, FOMO-style (2026-10-09): always dark, big lowercase type, glass buttons,
   product on desktop + phone, bento cards, a connected story line, floating final call
   ============================================================ */
.fland { --f-bg: #040a1b; --f-card: #0a1330; --f-line: rgba(150,180,255,.11); --f-txt: #eef3ff; --f-dim: rgba(205,218,250,.62);
  --f-acc: #5aa9ff; --f-ease: cubic-bezier(.16, 1, .3, 1); background: var(--f-bg); color: var(--f-txt); overflow-x: clip; }
.fland h1, .fland h2, .fland h3 { font-family: var(--font-h); font-weight: 500; letter-spacing: -.035em; }
.fnav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(16px, 4vw, 40px); }
.fnav .brand, .ffoot .brand { display: flex; align-items: center; gap: 10px; font: 600 20px var(--font-h); letter-spacing: -.03em; color: #fff; }
.fnav .brand img, .ffoot .brand img { border-radius: 10px; }
.fnav-act { display: flex; align-items: center; gap: 6px; }
.fnav-link { padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: rgba(225,235,255,.72); transition: color .2s, background .2s; }
.fnav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.fbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 30px; border-radius: 12px; font: 700 17px var(--font-b); color: #fff; white-space: nowrap;
  border: 1px solid transparent; transition: transform .35s var(--f-ease), background .25s, border-color .25s, box-shadow .35s var(--f-ease); }
.fbtn:hover { transform: translateY(-2px); }
.fbtn.pri { background: linear-gradient(180deg, rgba(77,163,255,.62), rgba(46,120,240,.5)); border-color: rgba(140,195,255,.45); box-shadow: 0 10px 40px rgba(61,155,255,.28), inset 0 1px 0 rgba(255,255,255,.18); }
.fbtn.pri:hover { box-shadow: 0 16px 50px rgba(61,155,255,.42), inset 0 1px 0 rgba(255,255,255,.22); }
.fbtn.glass { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fbtn.glass:hover { background: rgba(255,255,255,.16); }
.fbtn.dark { background: #0d1530; border-color: rgba(150,180,255,.14); }
.fbtn.sm { height: 40px; padding: 0 18px; font-size: 15px; border-radius: 9px; }

/* hero */
.fh { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; overflow: hidden; padding-top: clamp(110px, 16vh, 170px); }
.fh::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--f-bg)); }
.fh-glow { position: absolute; inset: -20% -10% auto; height: 80%; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(61,155,255,.22), transparent 70%), radial-gradient(ellipse 30% 40% at 80% 10%, rgba(34,227,164,.08), transparent 70%); }
.fh-txt { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 16px; }
.fh-word { font-size: clamp(50px, 10.4vw, 150px); line-height: .9; letter-spacing: -.06em; font-weight: 600 !important;
  background: linear-gradient(180deg, #ffffff 10%, #c4d8ff 70%, #8db8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fh-tag { font: 500 clamp(26px, 3.6vw, 42px) var(--font-h); letter-spacing: -.035em; color: #fff; margin-top: 6px; }
.fh-sub { font-size: clamp(16px, 1.7vw, 20px); color: var(--f-dim); max-width: 560px; }
.fh-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.fh-art { position: relative; z-index: 1; display: block; width: min(118%, 1500px); aspect-ratio: 16 / 9; margin-top: clamp(-150px, -9vw, -40px);
  -webkit-mask-image: radial-gradient(ellipse 52% 56% at 50% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 52% 56% at 50% 52%, #000 62%, transparent 100%); }
.fh-art img, .fh-vid { display: block; width: 100%; height: 100%; object-fit: cover; }

/* sections */
.fsec { max-width: 1180px; margin: 0 auto; padding: clamp(80px, 11vw, 150px) clamp(16px, 4vw, 40px) 0; text-align: center; }
.fsec h2, .fcta2 h2 { font-size: clamp(38px, 6vw, 72px); line-height: 1.02; }
.fsub { font-size: clamp(16px, 1.8vw, 21px); color: var(--f-dim); max-width: 640px; margin: 16px auto 0; }
.fk { display: inline-block; margin-bottom: 18px; font: 600 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f-acc); }

/* scroll reveal */
.rv { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--f-ease), transform .9s var(--f-ease), filter .9s var(--f-ease); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; filter: none; }
.rv.rv-up { transform: translateY(60px) scale(.97); }
.rv.rv-up.in { transform: none; }

/* desktop + phone (laid out at 1000px, scaled to fit by fitDevices) */
.fdev-fit { position: relative; width: min(100%, 1000px); margin: clamp(40px, 6vw, 70px) auto 0; }
.fdev-stage { position: relative; width: 1000px; padding-bottom: 30px; transform-origin: top left; transform: scale(var(--s, 1)); }
.fdev-stage::before { content: ""; position: absolute; inset: 6% 8% 22%; border-radius: 40px; background: radial-gradient(ellipse at center, rgba(61,155,255,.3), transparent 70%); filter: blur(50px); }
.fmon { position: relative; width: 860px; margin-left: 30px; }
.fmon-screen { position: relative; border-radius: 16px; border: 1px solid rgba(150,180,255,.16); background: #050b1e; box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 7px #0a0f20, 0 0 0 8px rgba(150,180,255,.12); overflow: hidden; text-align: left; font-size: 10.5px; }
.fmon-stand { position: relative; width: 150px; height: 120px; margin: 7px auto 0; background: linear-gradient(90deg, #121828, #2a3146 45%, #141a2b); -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.fmon-stand::before { content: ""; position: absolute; left: 50%; top: 18px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: #070b16; }
.fm-top { display: flex; align-items: center; gap: 16px; padding: 8px 12px; border-bottom: 1px solid var(--f-line); }
.fm-brand { display: flex; align-items: center; gap: 6px; } .fm-brand img { width: 18px; height: 18px; border-radius: 5px; } .fm-brand b { font: 600 12px var(--font-h); }
.fm-tabs { display: flex; gap: 12px; color: var(--f-dim); } .fm-tabs b { color: #fff; font-weight: 600; }
.fm-search { flex: 1; max-width: 240px; margin-left: auto; display: flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 7px; background: rgba(150,180,255,.06); color: var(--f-dim); }
.fm-search svg { width: 11px; height: 11px; }
.fm-av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: linear-gradient(135deg, #3d9bff, #22e3a4); }
.fm-body { display: grid; grid-template-columns: 38px 150px 1fr 176px; height: 360px; }
.fm-rail { display: grid; align-content: start; justify-items: center; gap: 4px; padding: 10px 0; border-right: 1px solid var(--f-line); color: var(--f-dim); }
.fm-rail span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; } .fm-rail svg { width: 13px; height: 13px; } .fm-rail span.on { background: rgba(61,155,255,.16); color: #5aa9ff; }
.fm-wl { border-right: 1px solid var(--f-line); padding: 8px 6px; display: grid; align-content: start; gap: 1px; overflow: hidden; }
.fland .k { font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f-acc); padding: 0 4px 6px; }
.fm-wl div { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center; padding: 5px 4px; border-radius: 6px; }
.fm-wl div.on { background: rgba(61,155,255,.12); }
.fm-wl span { display: grid; justify-items: end; font-family: var(--mono); font-size: 9.5px; } .fm-wl u { text-decoration: none; } .fm-wl i { font-style: normal; font-size: 9px; }
.fm-lg { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font: 700 8.5px var(--font-h); font-style: normal; color: #cfe2ff; background: linear-gradient(135deg, #1b3a78, #0f2048); border: 1px solid rgba(150,180,255,.2); }
.fm-main { padding: 10px 12px; display: grid; gap: 7px; align-content: start; min-width: 0; }
.fm-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fm-qn { display: flex; gap: 8px; align-items: center; } .fm-qn .fm-lg { width: 26px; height: 26px; font-size: 11px; } .fm-qn b { font: 600 14px var(--font-h); } .fm-qn small { display: block; color: var(--f-dim); }
.fm-stats { display: flex; gap: 14px; } .fm-stats span { display: grid; } .fm-stats small { color: var(--f-dim); font-size: 9px; } .fm-stats b { font: 600 11.5px var(--mono); }
.fland .up { color: #22e58c; } .fland .dn { color: #ff5468; }
.fm-tf { display: flex; gap: 3px; align-items: center; } .fm-tf span { padding: 2px 7px; border-radius: 5px; color: var(--f-dim); } .fm-tf span.on { background: rgba(150,180,255,.1); color: #fff; }
.fm-tf em { margin-left: auto; font-style: normal; color: var(--f-dim); }
.fm-chart { width: 100%; height: 160px; overflow: visible; }
.fm-grid line { stroke: rgba(150,180,255,.07); }
.fm-candles .cu { color: #22e58c; } .fm-candles .cd { color: #ff5468; }
.fm-candles line { stroke: currentColor; stroke-width: 1; } .fm-candles rect { fill: currentColor; }
.fm-candles g { opacity: 0; } .rv.in .fm-candles g { animation: fmFade .35s ease forwards; animation-delay: calc(400ms + var(--i) * 35ms); }
@keyframes fmFade { to { opacity: 1; } }
.fm-flow { display: grid; gap: 1px; border-radius: 9px; background: rgba(150,180,255,.04); padding: 6px 8px; }
.fm-flow > div { display: grid; grid-template-columns: 70px 1fr 60px 34px; gap: 6px; align-items: center; padding: 3px 0; }
.fm-fh { color: var(--f-dim); font-size: 9px; } .fm-fh b { color: var(--f-acc); font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fm-flow b { display: flex; gap: 5px; align-items: center; } .fm-flow i { font-style: normal; } .fm-flow span { font-family: var(--mono); }
.fm-flow em { justify-self: start; font-style: normal; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.fm-flow em.gA { background: rgba(34,227,164,.16); color: #22e3a4; } .fm-flow em.gB { background: rgba(61,155,255,.16); color: #5aa9ff; } .fm-flow em.gC { background: rgba(255,181,71,.16); color: #ffb547; }
.fm-ticket { border-left: 1px solid var(--f-line); padding: 10px; display: grid; gap: 8px; align-content: start; }
.ft-tg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 8px; background: rgba(150,180,255,.06); text-align: center; }
.ft-tg span { padding: 4px; border-radius: 6px; color: var(--f-dim); } .ft-tg span.on { background: #22e58c; color: #02160b; font-weight: 700; }
.ft-in { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--f-line); } .ft-in small { color: var(--f-dim); } .ft-in b { font: 600 15px var(--mono); }
.ft-q { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; } .ft-q span { padding: 3px; border-radius: 6px; background: rgba(150,180,255,.06); color: var(--f-dim); } .ft-q span.on { color: #fff; background: rgba(61,155,255,.2); }
.ft-row { display: flex; justify-content: space-between; color: var(--f-dim); } .ft-row b { color: #fff; font-family: var(--mono); }
.ft-btn { padding: 8px; border-radius: 8px; text-align: center; font-weight: 700; background: #22e58c; color: #02160b; }
.ft-coach { display: flex; gap: 6px; padding: 7px; border-radius: 8px; background: rgba(255,181,71,.08); border: 1px solid rgba(255,181,71,.25); color: var(--f-dim); } .ft-coach svg { width: 11px; height: 11px; flex: none; color: #ffb547; }
.fphone { position: absolute; right: 18px; bottom: 6px; width: 228px; rotate: 13deg; animation: fpFloat 7s ease-in-out infinite; }
@keyframes fpFloat { 50% { translate: 0 -12px; } }
.fp-in { position: relative; aspect-ratio: 9 / 19; border-radius: 36px; padding: 7px; background: linear-gradient(145deg, #2a3350, #0b1124 40%); border: 1px solid rgba(150,180,255,.3);
  box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 50px rgba(61,155,255,.3); }
.fp-notch { position: absolute; top: 14px; left: 50%; width: 72px; height: 18px; margin-left: -36px; border-radius: 999px; background: #000; z-index: 2; }
.fp-screen { height: 100%; border-radius: 30px; background: #050c20; padding: 40px 12px 0; display: flex; flex-direction: column; gap: 9px; overflow: hidden; text-align: left; font-size: 10.5px; }
.fp-h { display: flex; gap: 7px; align-items: center; } .fp-h img { width: 22px; height: 22px; border-radius: 7px; } .fp-h b { font: 600 13px var(--font-h); }
.fp-h small { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: rgba(61,155,255,.15); color: #5aa9ff; font-weight: 600; }
.fp-u { align-self: flex-end; max-width: 85%; padding: 7px 10px; border-radius: 13px 13px 3px 13px; background: #3d9bff; }
.fp-a { display: grid; gap: 4px; color: var(--f-dim); } .fp-a b { color: #fff; }
.fp-n { display: flex; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid rgba(61,155,255,.3); background: rgba(61,155,255,.1); color: var(--f-dim); }
.fp-n svg { width: 12px; height: 12px; flex: none; color: #5aa9ff; } .fp-n b { display: block; color: #5aa9ff; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.fp-teach { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: #3d9bff; font-weight: 600; }
.fp-ask { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 5px 5px 5px 12px; border-radius: 999px; border: 1px solid rgba(150,180,255,.2); color: var(--f-dim); }
.fp-ask i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #3d9bff; color: #fff; } .fp-ask svg { width: 11px; height: 11px; }
.fp-tabs { display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 0 14px; color: var(--f-dim); }
.fp-tabs span { display: grid; place-items: center; } .fp-tabs svg { width: 13px; height: 13px; } .fp-tabs span.on { color: #5aa9ff; }

/* bento */
.fben { text-align: left; } .fben-h { margin-bottom: 36px; } .fben-h .fsub { margin-left: 0; }
.fbento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fcard2 { position: relative; min-height: 300px; padding: 28px 26px 0; border-radius: 26px; border: 1px solid var(--f-line); background: linear-gradient(180deg, #0b1534, #070f27);
  display: flex; flex-direction: column; overflow: hidden; transition: opacity .9s var(--f-ease), transform .9s var(--f-ease), filter .9s var(--f-ease), border-color .3s, box-shadow .4s var(--f-ease); }
.fcard2:hover { border-color: rgba(90,169,255,.35); box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(90,169,255,.12); }
.fcard2.in:hover { transform: translateY(-4px); }
.fc-k { font: 600 12.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--f-acc); }
.fcard2 h3 { margin-top: 14px; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.1; }
.fc-sn { margin-top: auto; padding: 26px 0 24px; display: flex; justify-content: center; transition: transform .5s var(--f-ease); font-size: 13px; }
.fcard2:hover .fc-sn { transform: translateY(-4px) scale(1.02); }
.sn-chat { display: grid; gap: 8px; width: 100%; } .sn-chat .u { justify-self: end; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #3d9bff; }
.sn-chat .a { display: flex; gap: 8px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(150,180,255,.08); color: var(--f-dim); }
.sn-chat img { width: 22px; height: 22px; border-radius: 50%; }
.sn-covers { display: flex; } .sn-covers img { width: 112px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; border: 2px solid #0a1330; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.sn-covers img + img { margin-left: -46px; } .sn-covers img:nth-child(2) { transform: translateY(-10px) rotate(-3deg); } .sn-covers img:nth-child(3) { transform: rotate(4deg); }
.sn-trade, .sn-flow, .sn-alert { width: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(150,180,255,.07); border: 1px solid var(--f-line); }
.sn-trade i { margin-left: auto; font: 600 15px var(--mono); font-style: normal; } .sn-trade em, .sn-flow em { font-style: normal; font-size: 11.5px; color: var(--f-dim); }
.sn-flow span:nth-child(2) { margin-left: auto; font-family: var(--mono); } .sn-flow em { padding: 2px 8px; border-radius: 6px; background: rgba(34,227,164,.15); color: #22e3a4; font-weight: 700; }
.sn-alert { flex-wrap: nowrap; } .sn-alert > svg { color: #5aa9ff; flex: none; } .sn-alert span { display: grid; color: var(--f-dim); } .sn-alert b { color: #fff; }
.sn-list { width: 100%; display: grid; gap: 8px; } .sn-list div { display: grid; grid-template-columns: 54px 1fr 24px; gap: 10px; align-items: center; }
.sn-list img { width: 54px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; } .sn-list span { display: grid; min-width: 0; } .sn-list b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-list small { color: var(--f-dim); font-size: 11.5px; } .sn-list i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(150,180,255,.08); color: var(--f-dim); } .sn-list i.on { background: rgba(34,229,140,.16); color: #22e58c; }
.sn-alert small { margin-left: auto; align-self: flex-start; color: var(--f-dim); font-size: 11px; }
.sn-know { width: 100%; display: grid; gap: 10px; } .sn-know div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; color: var(--f-dim); }
.sn-know i { height: 8px; border-radius: 999px; background: rgba(150,180,255,.1); overflow: hidden; }
.sn-know em { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #3d9bff, #22e3a4); transition: width 1.4s .4s var(--f-ease); }
.fcard2.in .sn-know em { width: var(--w); }

/* the connected story line */
.fstory-line { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 56px auto 0; max-width: 1000px; }
.fstory-line::before { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; background: rgba(150,180,255,.1); }
.fstory-line::after { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; background: linear-gradient(90deg, #3d9bff, #22e3a4); transform: scaleX(0); transform-origin: left; transition: transform 1.6s .2s var(--f-ease); }
.fstory-line.in::after { transform: scaleX(1); }
.fstory-line li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; }
.fstory-line li span { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #5aa9ff; background: #0a1330; border: 1px solid rgba(90,169,255,.3); box-shadow: 0 0 30px rgba(61,155,255,.18); }
.fstory-line li span svg { width: 24px; height: 24px; } .fstory-line li b { font: 500 17px var(--font-h); letter-spacing: -.02em; }

/* final call: two slow orbits of chips and lesson pictures around the headline */
.fcta2 { position: relative; margin-top: clamp(90px, 12vw, 160px); min-height: 920px; display: grid; place-items: center; overflow: hidden; text-align: center;
  background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(46,110,230,.32), transparent 72%), linear-gradient(180deg, var(--f-bg), #0b1d55 50%, #0a1640 80%, var(--f-bg)); }
.fcta-bg { position: absolute; inset: 0; pointer-events: none; }
.fcta-bg::after { content: ""; position: absolute; left: 50%; bottom: -12%; width: min(900px, 120%); aspect-ratio: 16 / 9; transform: translateX(-50%); opacity: .13;
  background: url(/assets/hero/herald-1440.webp) center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 60%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 50% 50% at 50% 60%, #000 30%, transparent 75%); }
.orb { --r: 450px; position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%; border: 1px solid rgba(150,180,255,.12); animation: orbSpin 40s linear infinite; }
.orb.o2 { --r: 340px; border-color: rgba(150,180,255,.09); animation-duration: 30s; animation-direction: reverse; }
.orb-i { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.orb-u { translate: -50% -50%; animation: orbSpin 40s linear infinite reverse; }
.orb.o2 .orb-u { animation-duration: 30s; animation-direction: normal; }
@keyframes orbSpin { to { rotate: 360deg; } }
.fl-chip { display: inline-flex; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(10,20,50,.75); border: 1px solid rgba(150,180,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 14px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.fl-chip i { font-style: normal; font-family: var(--mono); } .fl-chip.q { color: var(--f-dim); }
.fl-img { display: block; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(150,180,255,.3); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.fcta-txt { position: relative; z-index: 2; padding: 0 16px; }

/* footer */
.ffoot { max-width: 1180px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 40px) 48px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; }
.ff-brand { display: grid; gap: 8px; align-content: start; } .ff-brand .brand { font-size: 26px; } .ff-brand p { color: var(--f-dim); font-size: 17px; } .ff-brand small { color: rgba(205,218,250,.4); margin-top: 8px; }
.ffoot nav { display: grid; gap: 10px; align-content: start; font-size: 15px; } .ffoot nav b { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(205,218,250,.45); }
.ffoot nav a { color: var(--f-txt); } .ffoot nav a:hover { color: var(--f-acc); }
.ff-fine { grid-column: 1 / -1; font-size: 12.5px; color: rgba(205,218,250,.4); border-top: 1px solid var(--f-line); padding-top: 22px; }

@media (max-width: 960px) {
  .fbento { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .fnav-link { display: none; } .fnav .brand span { font-size: 18px; }
  .fh-art { width: 100%; aspect-ratio: 16 / 9; margin: 20px 0 22%; transform: scale(1.5); transform-origin: 50% 20%; }
  .fbento { grid-template-columns: 1fr; } .fcard2 { min-height: 0; }
  .fstory-line { grid-template-columns: 1fr; gap: 18px; justify-items: start; max-width: 320px; }
  .fstory-line::before, .fstory-line::after { left: 31px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; transform-origin: top; }
  .fstory-line::after { transform: scaleY(0); } .fstory-line.in::after { transform: scaleY(1); }
  .fstory-line li { grid-template-columns: 64px 1fr; justify-items: start; align-items: center; }
  .fcta2 { min-height: 640px; } .orb.o1 { --r: 280px; } .orb.o2 { display: none; } .fl-chip { font-size: 12.5px; padding: 7px 11px; } .fl-img { width: 46px; height: 46px; }
  .ffoot { grid-template-columns: 1fr 1fr; } .ff-brand { grid-column: 1 / -1; }
}


/* ---------- premium "AI look" layer (2026-10-09) ---------- */
html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* film grain + glass header */
.fland::before { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fland .fnav { position: fixed; z-index: 50; transition: background .5s var(--f-ease), border-color .5s, padding .5s var(--f-ease), backdrop-filter .5s; border-bottom: 1px solid transparent; }
.fland .fnav.glass { padding-top: 12px; padding-bottom: 12px; background: rgba(4,10,27,.62); border-bottom-color: rgba(150,180,255,.1); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }

/* hero: aurora, dot grid, pill, letter-by-letter wordmark */
.fh-aurora { position: absolute; inset: -10% -20% 30%; z-index: 0; pointer-events: none; filter: blur(70px); opacity: .9; }
.fh-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: aur 18s ease-in-out infinite alternate; }
.fh-aurora i:nth-child(1) { left: 22%; top: 0; width: 42%; height: 60%; background: radial-gradient(circle, rgba(61,155,255,.55), transparent 65%); }
.fh-aurora i:nth-child(2) { left: 48%; top: 8%; width: 36%; height: 55%; background: radial-gradient(circle, rgba(34,227,164,.32), transparent 65%); animation-duration: 22s; animation-delay: -6s; }
.fh-aurora i:nth-child(3) { left: 34%; top: 18%; width: 30%; height: 50%; background: radial-gradient(circle, rgba(124,92,255,.38), transparent 65%); animation-duration: 26s; animation-delay: -12s; }
@keyframes aur { 0% { transform: translate3d(-8%, -4%, 0) scale(1); } 50% { transform: translate3d(10%, 6%, 0) scale(1.18); } 100% { transform: translate3d(-4%, 10%, 0) scale(.92); } }
.fh-dots { position: absolute; inset: 0 0 35%; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(150,190,255,.22) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 25%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 25%, #000, transparent 75%); }
.fh-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; font: 600 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #bcd6ff;
  background: rgba(61,155,255,.1); border: 1px solid rgba(120,180,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 30px rgba(61,155,255,.15); margin-bottom: 6px; }
.fh-pill i { width: 7px; height: 7px; border-radius: 50%; background: #22e58c; box-shadow: 0 0 10px #22e58c; animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .35; transform: scale(.8); } }
.fh-word { background: none !important; color: #fff; display: flex; justify-content: center; }
.fh-word span { display: inline-block; background: linear-gradient(180deg, #ffffff 15%, #c9dcff 65%, #8cb6ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(.35em) rotateX(-40deg); filter: blur(10px); transition: opacity 1s var(--f-ease), transform 1.1s var(--f-ease), filter 1s var(--f-ease); transition-delay: calc(120ms + var(--i) * 45ms); }
.fland.ready .fh-word span { opacity: 1; transform: none; filter: none; }
.fh-txt, .fh-art { will-change: transform; }

/* AI shimmer across headlines */
.fland .shine { background: linear-gradient(100deg, #fff 0%, #fff 38%, #9fd2ff 48%, #7cf0c8 52%, #fff 62%, #fff 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s linear infinite; }
@keyframes shine { from { background-position: 125% 0; } to { background-position: -125% 0; } }

/* live tape */
.ftape { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; max-width: 1180px; margin: -10px auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.ftape-k { flex: none; display: inline-flex; align-items: center; gap: 7px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #22e58c; }
.ftape-k i { width: 7px; height: 7px; border-radius: 50%; background: #22e58c; box-shadow: 0 0 10px #22e58c; animation: livePulse 1.8s ease-in-out infinite; }
.ftape-win { flex: 1; overflow: hidden; padding: 12px 0; border-top: 1px solid var(--f-line); border-bottom: 1px solid var(--f-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ftape-track { display: flex; width: max-content; animation: tape 48s linear infinite; }
.ftape-win:hover .ftape-track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tp { display: inline-flex; gap: 8px; align-items: baseline; padding: 0 22px; font: 500 13.5px var(--mono); white-space: nowrap; border-right: 1px solid var(--f-line); }
.tp b { font-family: var(--font-h); font-weight: 600; } .tp i { font-style: normal; color: var(--f-dim); } .tp em { font-style: normal; }

/* the desktop tilts up into place as it scrolls in */
.fdev-fit { perspective: 1800px; }
.fdev-tilt { height: 100%; transform-origin: 50% 20%; will-change: transform, opacity; }

/* the phone: thinking → typing → noticed */
.fp-think { display: none; align-items: center; gap: 4px; color: var(--f-dim); }
.fp-think i { width: 5px; height: 5px; border-radius: 50%; background: #5aa9ff; animation: think 1s ease-in-out infinite; } .fp-think i:nth-child(2) { animation-delay: .15s; } .fp-think i:nth-child(3) { animation-delay: .3s; }
.fp-think span { margin-left: 5px; background: linear-gradient(90deg, rgba(205,218,250,.4), #fff, rgba(205,218,250,.4)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 1.6s linear infinite; }
@keyframes think { 50% { transform: translateY(-4px); opacity: .4; } }
.fphone.thinking .fp-think { display: flex; }
.fphone.waiting .fp-a, .fphone.thinking .fp-a { display: none; }
.fp-n, .fp-teach { transition: opacity .6s var(--f-ease), transform .6s var(--f-ease); }
.fphone.waiting .fp-n, .fphone.thinking .fp-n, .fphone.typing .fp-n, .fphone.waiting .fp-teach, .fphone.thinking .fp-teach, .fphone.typing .fp-teach { opacity: 0; transform: translateY(8px); }
.fphone.done .fp-teach { box-shadow: 0 0 0 0 rgba(61,155,255,.6); animation: ping 2.4s 1s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(61,155,255,.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(61,155,255,0); } }
.fphone.typing .fp-a p:last-child::after { content: ""; display: inline-block; width: 6px; height: 11px; margin-left: 2px; vertical-align: -1px; background: #5aa9ff; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* bento: pointer spotlight + glowing border */
.fcard2::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(90,169,255,.16), transparent 60%); }
.fcard2::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: conic-gradient(from var(--ang), transparent 0deg, #5aa9ff 60deg, #22e3a4 120deg, transparent 180deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin 4s linear infinite; }
.fcard2:hover::before, .fcard2:hover::after { opacity: 1; }
@keyframes spin { to { --ang: 360deg; } }
.fcard2 > * { position: relative; z-index: 1; }

/* buttons: a light sweep */
.fbtn { position: relative; overflow: hidden; }
.fbtn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transition: left .8s var(--f-ease); }
.fbtn:hover::after { left: 130%; }
.fbtn.pri { animation: btnGlow 3.5s ease-in-out infinite; }
@keyframes btnGlow { 50% { box-shadow: 0 14px 50px rgba(61,155,255,.45), inset 0 1px 0 rgba(255,255,255,.2); } }

/* story: each step lights up as the line reaches it */
.fstory-line.in li span { animation: lit .7s var(--f-ease) forwards; animation-delay: calc(350ms + var(--k) * 300ms); }
@keyframes lit { to { color: #fff; border-color: rgba(120,200,255,.7); background: linear-gradient(135deg, rgba(61,155,255,.35), rgba(34,227,164,.18)); box-shadow: 0 0 40px rgba(61,155,255,.45), inset 0 1px 0 rgba(255,255,255,.15); } }

@media (max-width: 700px) {
  .ftape { margin-top: 0; } .tp { padding: 0 14px; font-size: 12.5px; }
  .fh-aurora { inset: -10% -60% 40%; }
}

[hidden] { display: none !important; }