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

:root {
    --color-bg: #FAFAF3;
    --color-surface: #F5F5F0;
    --color-text: #111827;
    --color-text-secondary: #6b7280;
    --color-border: #e5e7eb;
    --color-accent: #111827;
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

html {
    overflow-x: clip;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    will-change: transform;
    contain: layout;
}

.nav-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 3rem;
    /* 3-column grid: side columns share equal width so the center column
       is truly centered on the page regardless of logo/button widths */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
}

/* Explicit column assignment so that hiding .nav-center on mobile (display:none
   removes it from grid auto-placement entirely) doesn't pull .nav-links into
   the middle track -- it must always stay in the last column. */
.nav-content > .logo { grid-column: 1; }
.nav-content > .nav-center { grid-column: 2; }
.nav-content > .nav-links {
    grid-column: 3;
    justify-self: end;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.logo:hover {
    opacity: 0.7;
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.nav-center {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--color-text);
}

.nav-links a {
    color: var(--color-text);
    text-decoration: none;
}

.btn-nav {
    padding: 0.625rem 1.5rem;
    background: var(--color-text);
    color: white !important;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-width: 140px;
    text-align: center;
    display: inline-block;
}

.btn-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);
}

/* Language switcher (v3 i18n) */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
}

.lang-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    font-family: inherit;
}

.lang-btn:hover {
    color: var(--color-text);
}

.lang-btn.active {
    color: white;
    background: var(--color-text);
}

/* Hero Section - Split Layout */
.hero {
    max-width: 1200px;
    margin: 0 auto;
    /* Side padding matches the 3.75rem (60px) inset the Master Guide and
       waitlist sections use, so the hero window lines up flush with them
       instead of sitting narrower and shifted right. */
    padding: 9rem 3.75rem 8rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
}

/* ---- Text hero (plain-words headline above the product screen) ---- */
.hero-headline {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.hero-brand {
    display: inline-block;
    margin-bottom: 1.1rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}
.hero-h1 {
    font-size: clamp(2.5rem, 5.2vw, 3.9rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.03;
    color: var(--color-text);
}
/* Each sentence stays whole on its own line (never breaks mid-sentence). On very
   narrow screens a single sentence may still wrap -- acceptable. */
.h1-line { display: inline-block; }
/* Desktop headline is two authored lines: force each span onto its own line so
   the H1 is ALWAYS exactly two lines. block (not inline-block) stops the two
   spans from reflowing into each other; nowrap stops a single span from wrapping
   internally when the clamp() font scales up on wide viewports (which otherwise
   pushed the longer first line to two rows -> three total). */
.h1-desktop { display: block; white-space: nowrap; }
/* Mobile has no room for the full two-sentence headline -- collapse it to
   just the brand name there; the sub paragraph still carries the pitch. */
.h1-mobile { display: none; }
.hero-sub {
    margin-top: 1.1rem;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.hero-sub .highlight {
    color: var(--color-text);
    font-weight: 600;
    /* Match the animation's slide highlight exactly: full-height solid fill,
       same yellow, same padding + radius. */
    background: #fde047;
    padding: 0.08em 3px;
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.hero-screen-hint {
    display: inline-block;
    margin-top: 1.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.7;
}

/* ---- Product surface: the real session UI as a clean floating card (no fake chrome) ---- */
.app-window {
    width: 100%;
    /* 1040px matches .mg and .cta so all three sections span the same width */
    max-width: 1040px;
    margin: 0 auto;
    background: #f9fafb;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: 0 40px 90px -24px rgba(17, 24, 39, 0.30), 0 10px 28px rgba(17, 24, 39, 0.05);
    overflow: hidden;
}
/* ============================================================
   Faithful SlideScope live session (hero product screen).
   Minimal slide-centered CANVAS with FLOATING panels + an
   animated cursor. Matches the real app. Liveness = animation.
   ============================================================ */
.app-window-body { display: none; }

/* Minimal session bar: just the page position */
.ss-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.95rem; background: #ffffff; border-bottom: 1px solid var(--color-border);
}
.ss-bar-title { font-size: 0.8rem; font-weight: 600; color: var(--color-text); }
.ss-bar-page { font-size: 0.78rem; color: var(--color-text-secondary); }

/* The canvas: floating panels over a soft neutral field */
.ss-canvas {
    position: relative;
    background: #f7f7f4;
    min-height: 500px;
    padding: 1.5rem;
    overflow: hidden;
}

/* The slide, centered floating card */
.ss-slide {
    position: relative; z-index: 1;
    width: min(460px, 54%); min-height: 320px;
    display: flex; flex-direction: column;
    /* centered within the right region (clear of the left transcript + notes column) */
    margin: 2.25rem 6% 0 auto;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 18px 50px -16px rgba(17,24,39,0.18), 0 4px 12px rgba(17,24,39,0.04);
    padding: 2.5rem 2.5rem;
}
.ss-slide-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 0.6rem; }
.ss-slide-title { font-size: 1.4rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.1rem; letter-spacing: -0.01em; line-height: 1.2; }
.ss-slide-bullets { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.ss-slide-bullets li { position: relative; padding-left: 1.1rem; font-size: 0.94rem; color: #374151; line-height: 1.4; }
.ss-slide-bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: #9ca3af; }
/* Full-coverage highlight (matches the select-to-highlight box, top-to-bottom).
   The sweep-select preview and the landed highlight share the SAME box shape;
   only the color differs (blue selection tint -> solid yellow highlight). */
.ss-slide-hl {
    position: relative; padding: 0.08em 3px; border-radius: 3px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
    background: transparent; transition: background 0.35s ease;
}
.ss-slide-hl.selecting { background: rgba(253,224,71,0.45); }
.ss-slide-hl.on { background: #fde047; }

/* Transcription (real product): faint gray text blocks in the TOP-LEFT, not a
   panel. Each paragraph is p-3 rounded-lg on a near-invisible gray tint; no
   border, no backdrop, no full-height rail. Sits above the slide, top-left. */
.ss-transcript {
    position: absolute; left: 1.1rem; top: 1.1rem; width: 210px; z-index: 2;
    pointer-events: none;
}
.ss-transcript-inner { padding: 0; }
.ss-transcript-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ss-cap-line {
    font-size: 13px; line-height: 1.6; color: rgb(156,163,175);
    padding: 0.6rem; border-radius: 8px;
    background: rgba(249,250,251,0.3); transition: background 0.2s ease;
}
.ss-cap-line.ss-chunk-new { opacity: 0; transform: translateY(6px); }
.ss-cap-line.ss-chunk-new.in { opacity: 1; transform: none; transition: all 0.5s ease; }
/* peek: when the presenter is speaking the newest block brightens briefly */
.ss-transcript.peek .ss-cap-line { background: rgba(243,244,246,0.85); }

/* Floating Notes panel (lower-right, clear of the top question banner) */
.ss-notes {
    position: absolute; bottom: 1.5rem; left: 1.5rem; width: 250px; z-index: 3;
    background: #ffffff; border: 1px solid var(--color-border);
    border-radius: 14px; box-shadow: 0 18px 50px -14px rgba(17,24,39,0.22);
    overflow: hidden;
}
.ss-notes-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.95rem; border-bottom: 1px solid var(--color-border); }
.ss-notes-title { font-size: 0.9rem; font-weight: 700; color: var(--color-text); }
.ss-notes-tools { display: flex; align-items: center; gap: 0.6rem; color: #9ca3af; font-size: 1rem; }
.ss-notes-list { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.7rem; }
.ss-note {
    position: relative;
    background: #fff; border: 1px solid var(--color-border); border-left: 3px solid #a8d5dc;
    border-radius: 8px; padding: 0.7rem 0.8rem 1.5rem;
    box-shadow: 0 2px 8px rgba(17,24,39,0.04);
    transition: border-left-color 0.4s ease;
}
.ss-note.collab { border-left-color: #c4b5fd; }
.ss-note-badges { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.ss-badge { display: inline-block; padding: 2px 8px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 5px; }
.ss-badge-note { background: #f3f4f6; color: #6b7280; }
.ss-badge-hl { background: #ecfeff; color: #0891b2; }
.ss-badge-collab { background: #faf5ff; color: #9333ea; }
.ss-badge-mult { font-size: 0.62rem; font-weight: 800; color: #9333ea; }
/* The highlighted quote attaches only once the highlight pairs with the note. */
.ss-note-quote { font-size: 0.82rem; font-style: italic; color: #4b5563; line-height: 1.4; margin-bottom: 0.6rem; }
.ss-anim #ss-note-1 .ss-note-quote { max-height: 0; opacity: 0; margin-bottom: 0; overflow: hidden; }
.ss-anim #ss-note-1.collab .ss-note-quote { max-height: 4em; opacity: 1; margin-bottom: 0.6rem; transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease; }
.ss-note-body { font-size: 0.85rem; color: var(--color-text); line-height: 1.4; }
.ss-note-time { position: absolute; bottom: 0.5rem; right: 0.65rem; font-size: 0.62rem; color: #9ca3af; }

/* Floating question banner = real QuestionBanner (text + upvote + timer bar) */
/* Active question banner (TOP-CENTER) = real QuestionBanner: text + upvote + timer. */
.ss-question {
    position: absolute; left: 50%; top: 1.4rem; transform: translateX(-50%);
    z-index: 5; min-width: 340px; max-width: 420px;
    background: #ffffff; border: 1px solid var(--color-border);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(17,24,39,0.14);
    overflow: hidden;
}
.ss-q-text { display: block; font-size: 0.85rem; color: var(--color-text); padding: 0.6rem 3.4rem 0.6rem 0.85rem; line-height: 1.35; }
.ss-q-upvote {
    position: absolute; top: 0.5rem; right: 0.7rem;
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.74rem; font-weight: 800; font-variant-numeric: tabular-nums;
    padding: 3px 8px; border-radius: 6px;
    background: #f9fafb; border: 1px solid var(--color-border); color: #6b7280;
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease, color 0.2s ease;
}
.ss-q-upvote.tick { transform: scale(1.18); }
.ss-q-upvote.voted { background: #22c55e; border-color: #22c55e; color: #fff; }
/* Asker's own view: disabled/grayed (upvoting is for OTHERS in the room) */
.ss-q-upvote.own { background: #f3f4f6; border-color: #e5e7eb; color: #9ca3af; }
.ss-q-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--color-text); transform-origin: left; transform: scaleX(1); }
.ss-q-timer.run { transition: transform 6s linear; transform: scaleX(0); }

/* Minimized "Questions" panel (bottom-right) = real product's minimized panel:
   header-only card. Signals that asked questions are stored/collected here. */
/* Docked flush to the BOTTOM EDGE of the canvas (tab-like), only top corners rounded. */
.ss-qpanel {
    position: absolute; right: 1.5rem; bottom: 0; z-index: 3; width: 240px;
    background: #ffffff; border: 1px solid var(--color-border); border-bottom: none;
    border-radius: 14px 14px 0 0; box-shadow: 0 -10px 40px -16px rgba(17,24,39,0.22);
    overflow: hidden;
}
.ss-qpanel-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.95rem; background: #f9fafb; }
.ss-qpanel-title { font-size: 0.9rem; font-weight: 700; color: var(--color-text); display: inline-flex; align-items: center; gap: 0.4rem; }
.ss-qpanel-count { font-size: 0.82rem; font-weight: 800; color: #16a34a; font-variant-numeric: tabular-nums; }
.ss-qpanel-tools { display: flex; align-items: center; gap: 0.55rem; color: #9ca3af; font-size: 1rem; }

/* Floating capture (bottom center). RESTING STATE (real product): NO box, NO
   border, NO shadow -- just faint gray ghost text. The white box + footer only
   materialize once you actually start typing. */
.ss-capture {
    position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
    z-index: 3; width: min(430px, 68%);
    background: transparent; border: 1px solid transparent;
    border-radius: 12px; box-shadow: none;
    padding: 0.5rem 0.75rem; text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
}
.ss-capture.typing {
    background: #ffffff; border-color: var(--color-border);
    box-shadow: 0 12px 34px rgba(17,24,39,0.12);
    padding: 0.85rem 1rem; text-align: left;
}
.ss-capture-field { font-size: 14px; color: #d1d5db; min-height: 1.2em; user-select: none; } /* ghost placeholder */
.ss-capture-field.typing { color: var(--color-text); }
.ss-capture-field.typing::after { content: ""; display: inline-block; width: 1px; height: 0.95em; background: var(--color-text); margin-left: 1px; vertical-align: text-bottom; animation: ssCaret 0.85s steps(1) infinite; }
@keyframes ssCaret { 50% { opacity: 0; } }
/* Footer only shows once typing begins; "to pair" hint sits on the right */
.ss-capture-foot { display: flex; justify-content: flex-end; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; font-size: 0.68rem; color: #9ca3af; transition: all 0.25s ease; }
.ss-capture.typing .ss-capture-foot { max-height: 2em; opacity: 1; margin-top: 0.55rem; }

/* Animated cursor */
.ss-cursor {
    position: absolute; left: 0; top: 0; z-index: 8;
    pointer-events: none; opacity: 0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
    transition: left 0.9s cubic-bezier(0.4,0,0.2,1), top 0.9s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}
.ss-cursor.show { opacity: 1; }

/* Recap overlay (collect-inward payoff) */
.ss-recap {
    position: absolute; inset: 0; z-index: 9;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 2.5rem;
    /* overlays the session (dim + blur behind), not a full white takeover */
    background: rgba(250,250,249,0.72); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.ss-recap.show { opacity: 1; }
.ss-recap-card {
    position: relative; text-align: left;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 16px; padding: 2.25rem 2.5rem 2.75rem; width: min(640px, 88%);
    box-shadow: 0 24px 60px rgba(17,24,39,0.12);
    transform: scale(0.92); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.ss-recap.show .ss-recap-card { transform: scale(1); }
.ss-recap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.ss-recap-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-secondary); }
.ss-recap-legend { display: flex; align-items: center; gap: 0.55rem; font-size: 0.66rem; color: #9ca3af; }
/* Multiple slide sections, clipped + faded at the bottom so the later slides are
   cut off -> alludes that the recap covers the WHOLE deck, not just this slide. */
.ss-recap-scroll {
    max-height: 264px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.ss-recap-section + .ss-recap-section { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--color-border); }
.ss-recap-slide-title { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.9rem; }
.ss-recap-points { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.ss-recap-points li { position: relative; padding-left: 1rem; font-size: 0.95rem; color: #374151; line-height: 1.5; }
.ss-recap-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: #d1d5db; }
.ss-recap-points strong { color: var(--color-text); font-weight: 600; }
.ss-recap-count {
    position: absolute; bottom: 1.15rem; right: 1.35rem;
    display: flex; align-items: center; gap: 0.7rem;
    font-size: 0.68rem; font-weight: 600; color: #6b7280;
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 999px; padding: 5px 13px;
    box-shadow: 0 6px 18px rgba(17,24,39,0.12);
}
.ss-count-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.ss-count-dot { width: 7px; height: 7px; border-radius: 50%; }
.ss-count-dot.ss-count-n { background: #059669; }
.ss-count-dot.ss-count-h { background: #d97706; }
.ss-count-dot.ss-count-a { background: #0284c7; }

/* Color-coded citation pills = the "tie connection" (real product colors) */
.ss-cite {
    display: inline-block; vertical-align: super; font-size: 0.6rem; font-weight: 700;
    margin: 0 0.5px 0 1.5px; line-height: 1;
}
.ss-cite-s { color: #6366f1; } /* Slide  = indigo */
.ss-cite-h { color: #d97706; } /* Highlight = amber */
.ss-cite-n { color: #059669; } /* Note   = green */
.ss-cite-a { color: #0284c7; } /* Answer = blue */
.ss-recap-legend .ss-cite { vertical-align: baseline; margin-left: 0.3rem; }

/* Animation start-states (armed by JS adding .ss-anim to .ss-canvas) */
/* The Notes panel POPS IN with the first note (hidden until then). */
.ss-anim .ss-notes { opacity: 0; transform: translateY(14px) scale(0.96); pointer-events: none; }
.ss-anim .ss-notes.in { opacity: 1; transform: none; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.ss-anim #ss-note-1 { opacity: 0; transform: translateY(10px); }
.ss-anim #ss-note-1.in { opacity: 1; transform: none; transition: all 0.45s cubic-bezier(0.34,1.56,0.64,1); }
/* Note badges are hidden on a plain note; the COLLABORATED badge + x2 appear only
   once the highlight pairs in (no "NOTE" label on the plain note). */
.ss-anim #ss-note-1 .ss-note-badges { opacity: 0; max-height: 0; margin-bottom: 0; overflow: hidden; }
.ss-anim #ss-note-1.collab .ss-note-badges { opacity: 1; max-height: 2em; margin-bottom: 0.5rem; transition: all 0.35s ease; }
.ss-anim #ss-note-1 .ss-badge-mult { opacity: 0; transform: scale(0.6); }
.ss-anim #ss-note-1.collab .ss-badge-mult { opacity: 1; transform: scale(1); transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.ss-anim .ss-question { opacity: 0; transform: translateX(-50%) translateY(-14px); }
.ss-anim .ss-question.in { opacity: 1; transform: translateX(-50%); transition: all 0.45s cubic-bezier(0.34,1.56,0.64,1); }
/* The Questions panel is ALWAYS docked (from the start); only its count ticks up
   when a question is asked. No enter animation. */

/* Collapse: everything pulls toward center before the recap.
   Notes/question also need the ".in" variant repeated here -- ".ss-anim
   .ss-notes.in"/".ss-question.in" (opacity:1, entrance state) has HIGHER
   selector specificity than the plain ".ss-collapsing .ss-notes" below, so
   without it those two elements stayed fully opaque through the whole
   collapse while the slide (no competing .in rule) correctly faded out. */
.ss-collapsing .ss-slide,
.ss-collapsing .ss-notes,
.ss-collapsing .ss-notes.in,
.ss-collapsing .ss-qpanel,
.ss-collapsing .ss-transcript,
.ss-collapsing .ss-capture,
.ss-collapsing .ss-question,
.ss-collapsing .ss-question.in,
.ss-collapsing .ss-cursor {
    transition: transform 0.7s cubic-bezier(0.5,0,0.75,0.2), opacity 0.7s ease;
    opacity: 0.12;
}
.ss-collapsing .ss-slide { transform: scale(0.9); }
.ss-collapsing .ss-notes { transform: translate(-14%, 8%) scale(0.85); }
.ss-collapsing .ss-qpanel { transform: translate(14%, 8%) scale(0.85); }
.ss-collapsing .ss-transcript { transform: translate(30%, 30%) scale(0.85); }
.ss-collapsing .ss-capture { transform: translateX(-50%) translateY(-30%) scale(0.85); }
.ss-collapsing .ss-question { transform: translateX(-50%) translateY(-40%) scale(0.85); }

@media (prefers-reduced-motion: reduce) {
    .ss-cursor { display: none; }
}

@media (max-width: 768px) {
    /* Compact canvas -- with the headline collapsed to just the brand name,
       overlap between the floating panels and the slide is fine (matches the
       desktop illusion); no need to reserve separate non-overlapping bands. */
    .ss-canvas { min-height: 480px; padding: 1rem; }
    .ss-transcript { display: none; }
    .ss-cursor { display: none; }
    .ss-slide { width: 92%; margin-top: 1rem; padding: 1.25rem 1.4rem; }

    /* Question banner: full-width and unclamped so the text is never cut off
       mid-word -- it can sit over the slide, that's fine. */
    .ss-question { min-width: 0; width: 92%; max-width: none; }
    .ss-q-text { font-size: 0.8rem; line-height: 1.3; }

    /* Notes card: floats over the doc like the desktop version, just resized. */
    .ss-notes { width: auto; max-width: none; left: 0.9rem; right: 0.9rem; bottom: 1.1rem; }

    /* Capture field: narrower so it clears the docked question tab on the right. */
    .ss-capture { width: 68%; left: 2%; transform: none; bottom: 1.1rem; }
    .ss-collapsing .ss-capture { transform: translateY(-30%) scale(0.85); }

    /* Questions panel becomes a compact icon tab (count only), not a full card. */
    .ss-qpanel {
        width: auto; right: 0.9rem; bottom: 1.1rem;
        border: 1px solid var(--color-border); border-radius: 12px;
    }
    .ss-qpanel-head { justify-content: center; padding: 0.55rem 0.7rem; background: #fff; }
    .ss-qpanel-label { display: none; }
    .ss-qpanel-tools { display: none; }
    .ss-qpanel-title::before { content: "?"; font-size: 0.95rem; font-weight: 800; color: var(--color-text); line-height: 1; }

    .ss-recap-card { padding: 1.5rem 1.75rem; }
}


@media (max-width: 768px) {
    /* Top-align instead of vertically centering in 100vh -- centering
       (inherited from desktop) shifts taller content UP past the fixed nav
       as the headline/demo grow, which was hiding the H1's first line
       behind the nav bar. Mobile content just flows from the top instead. */
    .hero { padding: 7rem 1.25rem 4rem; gap: 2rem; min-height: 0; justify-content: flex-start; }
    .app-window { border-radius: 10px; }
    .app-window-body { padding: 0.75rem; min-height: 420px; }
    .win-url { max-width: 70%; font-size: 0.72rem; }
    .win-url-tag { display: none; }
    /* Keep the headline, just shrunk to match the other section titles
       instead of the huge desktop size -- pushes the demo down a bit and
       gives the hero some breathing room below the nav. */
    .hero-h1 {
        font-size: clamp(1.5rem, 3.4vw, 2.1rem);
        font-weight: 700;
        margin-bottom: 0.6rem;
    }
    .hero-headline { margin-top: 1rem; }
}

.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.hero-left {
    max-width: 600px;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.hero-subtitle {
    font-size: 1.375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 2.5rem;
}

.hero-cta {
    display: flex;
    gap: 1rem;
}

.hero-right {
    position: relative;
}

.hero-product-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.15);
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 2rem;
    background: var(--color-text);
    color: white;
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.2);
}

.btn-arrow {
    font-size: 1.5rem;
    transition: transform 0.15s ease;
}

.btn-primary:hover .btn-arrow {
    transform: translateX(4px);
}

/* Demo Section */
.demo-section {
    max-width: 1400px;
    margin: 6rem auto;
    padding: 0 3rem;
}

.demo-title {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 3rem;
}

.video-wrapper {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--color-text-secondary);
}

/* Flow Animation Section */
.flow-section {
    padding: 0 2rem 4rem;
    position: relative;
}

/* Flow diagram container */
.flow-diagram-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2rem;
}

/* Flow diagram */
.flow-diagram {
    width: 100%;
    height: 250px;
    opacity: var(--flow-progress, 0);
}

.flow-marker {
    opacity: var(--flow-progress, 0);
}

.flow-label {
    font-size: 12px;
    font-weight: 600;
    fill: #111827;
    opacity: var(--flow-progress, 0);
}

.flow-line {
    stroke-dasharray: 8 4;
    animation: dashFlow 0.5s linear infinite;
}

.flow-ai-circle {
    opacity: var(--flow-progress, 0);
}

.flow-ai-text {
    font-size: 12px;
    font-weight: 700;
    fill: #111827;
    opacity: var(--flow-progress, 0);
}

@keyframes dashFlow {
    to {
        stroke-dashoffset: -12;
    }
}

/* AI Processor - positioned at convergence point */
.ai-processor {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: var(--flow-progress, 0);
}

.ai-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}

.ai-progress-bar {
    width: 120px;
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

.ai-progress-fill {
    height: 100%;
    width: calc(var(--ai-progress, 0) * 1%);
    background: #111827;
    border-radius: 3px;
    transition: width 0.1s ease;
}

.ai-success {
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.ai-success.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Two column result layout */
.flow-result-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* Flow Output - Left side with pixel grow effect */
.flow-output {
    opacity: 0;
    transform: scale(0.01);
    transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flow-output.visible {
    opacity: 1;
    transform: scale(1);
}

.flow-output-content {
    text-align: center;
}

.output-image {
    max-width: 100%;
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    margin-bottom: 1rem;
    cursor: pointer;
}

.output-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Flow About - Right side, slides in from right */
.flow-about {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease;
}

.flow-about.visible {
    opacity: 1;
    transform: translateX(0);
}

.flow-about .explainer-title {
    text-align: left;
}

.about-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.about-header .explainer-title {
    margin-bottom: 0;
}

.about-header .audience-toggle {
    margin-bottom: 0;
    top: 19px;
}

.flow-about p {
    text-align: left;
    margin-bottom: 1rem;
}

/* Hero scroll animations */
.hero.scrolling .transcription-sidebar,
.hero.scrolling .notes-sidebar {
    transform: scale(0.8);
    opacity: 0.5;
    transition: all 0.3s ease;
}

/* Explainer Title - used in flow-about */
.explainer-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.explainer-content p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
}

.explainer-content p:last-of-type {
    margin-bottom: 20px;
}

/* Audience Toggle */
.audience-toggle {
    display: inline-flex;
    position: relative;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 4px;
    top: 11px;
    right: 0px;
    margin-bottom: 2rem;
}

.toggle-btn {
    position: relative;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1;
}

.toggle-btn.active {
    color: var(--color-text);
}

.toggle-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.audience-toggle[data-active="teachers"] .toggle-slider {
    transform: translateX(100%);
}

/* Audience Content */
.audience-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.audience-content.active {
    display: block;
    min-height: 400px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Features Toggle Container */
.features-toggle-container {
    position: absolute;
    top: -3.5rem;
    right: 0;
    z-index: 10;
}

.features-toggle-container .audience-toggle {
    top: 19px;
    margin-bottom: 0;
}

/* Card audience visibility */
.screenshot-card.hidden-audience {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Flip animation for audience toggle */
.screenshot-card.flip-out-right,
.screenshot-card.flip-out-left {
    pointer-events: none;
}

.screenshot-card.flip-out-right::before,
.screenshot-card.flip-out-left::before {
    opacity: 0;
}

.screenshot-card.flip-out-right {
    animation: flipOutRight 0.25s ease-in forwards;
}

.screenshot-card.flip-in-right {
    animation: flipInRight 0.25s ease-out forwards;
}

.screenshot-card.flip-out-left {
    animation: flipOutLeft 0.25s ease-in forwards;
}

.screenshot-card.flip-in-left {
    animation: flipInLeft 0.25s ease-out forwards;
}

@keyframes flipOutRight {
    from { transform: scale(1) rotateY(0deg); }
    to { transform: scale(1) rotateY(90deg); }
}

@keyframes flipInRight {
    from { transform: scale(1) rotateY(-90deg); }
    to { transform: scale(1) rotateY(0deg); }
}

@keyframes flipOutLeft {
    from { transform: scale(1) rotateY(0deg); }
    to { transform: scale(1) rotateY(-90deg); }
}

@keyframes flipInLeft {
    from { transform: scale(1) rotateY(90deg); }
    to { transform: scale(1) rotateY(0deg); }
}

/* Network Effect */
.network-effect {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
}

.network-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2rem;
}

.network-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
}

.network-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    flex: 1;
    max-width: 120px;
}

.network-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.25rem;
    width: 0.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
    transform: translateY(-1rem);
}

.step-count {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: rgba(17, 24, 39, 0.05);
    border-radius: 50%;
    line-height: 1;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1rem;
}

.step-text {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.3;
    max-width: 100px;
}

/* Screenshots Section */
.screenshots-section {
    position: relative;
    margin-top: 2rem;
}

.horizontal-scroll-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding-top: 4rem;
    transform: translateZ(0);
}

.screenshots-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    position: fixed;
    top: 7rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 100vw;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.horizontal-scroll-track {
    position: relative;
    width: 75vw;
    max-width: 75vw;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.screenshot-card {
    position: absolute;
    width: 100%;
    max-width: 75vw;
    min-height: 60vh;
    max-height: 68vh;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2.5rem;
    background: white;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: visible;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.screenshot-card.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.screenshot-card::before {
    content: attr(data-title);
    position: absolute;
    top: -3.5rem;
    left: 0;
    transform: none;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.03em;
    line-height: 1.2;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.screenshot-card.active::before {
    opacity: 1;
}

.screenshot-card.active:hover {
    border-color: var(--color-text);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
}

.screenshot-header {
    margin-bottom: 1rem;
}

.screenshot-label {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--color-text);
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 6px;
}


.screenshot-placeholder {
    /* Soft skeleton so a not-yet-loaded (preload="none") video reads as a calm
       loading surface instead of a stark empty white box while scrolling. */
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    margin-bottom: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: 16 / 10;
}

/* Keep the media transparent until it paints so the skeleton shows through
   (a lazy video with no loaded frame would otherwise render as white). */
.screenshot-placeholder .screenshot-img,
.screenshot-placeholder .screenshot-video {
    background: transparent;
}

.screenshot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
    display: block;
    cursor: pointer;
}

/* First student card video - fill space */
.screenshot-card[data-title="Start Instantly"] .screenshot-video {
    object-fit: cover;
    object-position: center bottom;
    transform: scale(1.35);
    background: var(--color-bg);
}

.screenshot-card[data-title="Start Instantly"] .screenshot-placeholder {
    background: var(--color-bg);
    overflow: hidden;
}

/* Second student card - show whole image */
.screenshot-card[data-title="Capture Everything"] .screenshot-img {
    object-fit: contain;
    object-position: center;
}

/* First teacher card - zoom in on middle */
.screenshot-card[data-title="Zero Setup"] .screenshot-img {
    object-fit: cover;
    object-position: center;
}

.screenshot-card[data-title="Zero Setup"] .screenshot-placeholder {
    background: var(--color-bg);
    overflow: hidden;
}

/* Second teacher card - show top */
.screenshot-card[data-title="Answer In-Flow"] .screenshot-img {
    object-position: center top;
}

/* Third teacher card - show center */
.screenshot-card[data-title="Know Your Class"] .screenshot-img {
    object-position: center;
}

.video-progress {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: conic-gradient(
        #111827 calc(var(--progress, 0) * 1%),
        rgba(200, 200, 200, 0.5) 0
    );
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.video-progress::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: white;
    border-radius: 50%;
}

.screenshot-description {
    color: #4b5563;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.6;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

/* Founder Story Section */
.story-section {
    max-width: calc(1200px - 10rem);
    margin: 8rem auto;
    padding: 0;
}

.story-container {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 3.5rem 3rem;
}

.story-text {
    line-height: 1.5;
    color: var(--color-text);
    width: 100%;
    text-align: center;
}

/* Founder quote written word-by-word: each word starts hidden + slightly low,
   then fades/rises into place, staggered by JS (transition-delay per word),
   as if the note is being written out. */
.story-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    will-change: opacity, transform;
}
.story-word.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* No-JS / reduced-motion safety: if the writer never runs, words must be visible. */
@media (prefers-reduced-motion: reduce) {
    .story-word {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.story-text-intro {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 1.5em;
}

.story-text-secondary {
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.5;
    margin-bottom: 1.5em;
}

.story-text-emphasis {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
}

.story-author {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
    text-align: right;
}

.author-link {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.author-link:hover {
    text-decoration: none;
}

.author-title {
    font-size: 1rem;
    color: var(--color-text-secondary);
}

/* Features Section */
.features {
    max-width: 1400px;
    margin: 8rem auto;
    padding: 0 3rem;
}

.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.feature-card {
    padding: 2rem;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.feature-card:hover {
    border-color: var(--color-text);
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
    transform: translateY(-2px);
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.feature-card p {
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

/* Pricing Section */
.pricing {
    max-width: 1400px;
    margin: 8rem auto;
    padding: 0 3rem;
}

.pricing-title {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 4rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.pricing-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2.5rem;
    background: white;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}

.pricing-card:hover {
    border-color: var(--color-text);
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
    transform: translateY(-2px);
}

.pricing-featured {
    background: var(--color-text);
    color: white;
    border-color: var(--color-text);
}

.pricing-featured:hover {
    background: var(--color-text);
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.15);
}

.pricing-featured .pricing-plan,
.pricing-featured .pricing-price span,
.pricing-featured .pricing-features li {
    color: rgba(255, 255, 255, 0.7);
}

.pricing-featured .pricing-price {
    color: white;
}

.pricing-plan {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.pricing-price {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: var(--color-text);
    letter-spacing: -0.03em;
}

.pricing-price span {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.pricing-features {
    list-style: none;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.pricing-features li {
    padding: 0.75rem 0;
    color: var(--color-text-secondary);
    font-size: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.pricing-features li:last-child {
    border-bottom: none;
}

.btn-pricing {
    width: 100%;
    text-align: center;
    padding: 0.875rem;
    background: transparent;
    border: 1px solid var(--color-text);
    border-radius: 8px;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.btn-pricing:hover {
    background: var(--color-text);
    color: white;
}

.btn-pricing-featured {
    background: white;
    color: var(--color-text);
    border-color: white;
}

.btn-pricing-featured:hover {
    background: transparent;
    color: white;
}

/* My YC App Section */
.yc-section {
    max-width: 1200px;
    margin: 9rem auto;
    padding: 0 5rem;
}

.yc-container {
    text-align: center;
}

.yc-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 3rem;
    color: var(--color-text);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-top: 3rem;
}

.video-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.video-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
}

.video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Demo Video Carousel */
.demo-carousel-card {
    position: relative;
}

.demo-carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.demo-carousel-track,
.demo-carousel-arrow {
    pointer-events: auto;
}

.demo-carousel-track {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.demo-slide {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.demo-slide.active {
    display: flex;
}

.demo-carousel-arrow {
    position: absolute;
    top: calc(50% + 14px);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-carousel-arrow:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.demo-prev {
    left: -18px;
}

.demo-next {
    right: -18px;
}

.demo-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}

.demo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.demo-dot.active {
    background: var(--color-text);
    transform: scale(1.2);
}

/* Interactive Demo Section */
.interactive-demo-section {
    max-width: 1200px;
    margin: 8rem auto;
    padding: 4rem 5rem 3rem;
    position: relative;
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0.4), rgba(255, 255, 255, 0));
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 24px;
}

.demo-section-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    position: relative;
    z-index: 900;
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--color-text);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.demo-split-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.professor-view, .student-view-demo {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.view-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    text-align: center;
}

.lecture-frame, .student-frame {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: white;
    padding: 1.25rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.lecture-frame {
    min-height: 300px;
}

.demo-lecture-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: block;
}

.prof-transcript-panel {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    height: 250px;
    overflow-y: auto;
}

.prof-transcript {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.prof-transcript.show {
    opacity: 1;
    transform: translateY(0);
}

.student-frame {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.student-notes-panel {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    min-height: 120px;
    max-height: 180px;
    overflow-y: auto;
}

.student-notes-panel .notes-header::before {
    content: none;
}

.demo-slide-container {
    position: relative;
}

.highlightable-text {
    position: absolute;
    top: 22%;
    left: 10%;
    width: 80%;
    height: 6%;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    user-select: none;
    color: transparent;
    display: flex;
    align-items: center;
}

.highlightable-text:hover {
    background-color: rgba(250, 204, 21, 0.3);
}

.highlightable-text.highlighted {
    background-color: rgba(250, 204, 21, 0.6);
}

.student-transcript-panel {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    height: 150px;
    overflow-y: auto;
}

.student-transcript.transcription-chunk {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.draggable {
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draggable:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.draggable:active {
    cursor: grabbing;
}

.draggable.dragging {
    opacity: 0.5;
}

.demo-note-card {
    background: rgba(248, 249, 250, 0.6);
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-left: 2px solid #6366f1;
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    margin-bottom: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.demo-note-card:hover {
    background: rgba(248, 249, 250, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.demo-note-highlight {
    color: #4b5563;
    font-weight: 500;
    margin-bottom: 8px;
    padding: 0.25rem 0.5rem;
    background: rgba(250, 204, 21, 0.2);
    border-left: 3px solid #facc15;
    border-radius: 4px;
    opacity: 0.9;
}

.demo-teacher-note-section {
    margin: 8px 0;
    padding: 10px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.03) 100%);
    border-left: 3px solid rgba(139, 92, 246, 0.4);
    border-radius: 6px;
}

.demo-teacher-note-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #8b5cf6;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.demo-teacher-note-text {
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.4;
}

.demo-note-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    margin-top: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: #1f2937;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.demo-note-textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.demo-note-textarea::placeholder {
    color: #9ca3af;
}

.mic-toggle-btn-float {
    position: absolute;
    top: clamp(8rem, 15vh, 14rem);
    right: clamp(1rem, 2vw, 1.5rem);
    background: white;
    border: 1px solid var(--color-border);
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #6b7280;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: 44px;
    height: 44px;
}

.mic-toggle-btn-float:hover {
    background: #f9fafb;
    color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mic-toggle-btn-float.recording {
    color: #ef4444;
    background: #fee2e2;
    border-color: #ef4444;
    animation: pulse 1.5s ease-in-out infinite;
}

.mic-toggle-btn-float.recording:hover {
    background: #fecaca;
}

.live-captions {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    padding: 12px 24px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    max-width: 80%;
    z-index: 10;
}

.caption-text {
    color: #111827;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.demo-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem auto 0;
    padding: 0.75rem 1.75rem;
    background: #111827;
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}

.demo-generate-btn:hover {
    background: #1f2937;
    transform: translateY(-2px);
}

.demo-generate-btn svg {
    margin-right: 0.5rem;
}

.demo-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 16px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(99, 102, 241, 0.1);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 1rem;
    color: #6366f1;
    font-size: 1rem;
    font-weight: 600;
}

/* Tutorial Tooltip */
.tutorial-tooltip {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    animation: tooltipFadeIn 0.3s ease;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tooltip-content {
    position: relative;
    background: #111827;
    color: white;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    max-width: 280px;
    width: max-content;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .tooltip-content {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
        max-width: 220px;
    }
}

.tooltip-text {
    line-height: 1.4;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.tutorial-tooltip.arrow-top .tooltip-arrow {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-color: #111827 transparent transparent transparent;
}

.tutorial-tooltip.arrow-bottom .tooltip-arrow {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #111827 transparent;
}

.tutorial-tooltip.arrow-left .tooltip-arrow {
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #111827;
}

.tutorial-tooltip.arrow-right .tooltip-arrow {
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 8px 8px 0;
    border-color: transparent #111827 transparent transparent;
}

.study-guide-card {
    max-width: 700px;
    margin: 2rem auto 0;
    background: #fafafa;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    overflow: hidden;
    animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 80vh;
    overflow-y: auto;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.study-guide-header {
    background: white;
    padding: 1.25rem 1.5rem;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}

.study-guide-title {
    color: #111827;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
}

.study-guide-subtitle {
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 400;
    margin: 0.25rem 0 0 0;
    font-style: italic;
}

.study-guide-content {
    padding: 1.5rem;
}

.ai-summary {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: white;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    color: #111827;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.study-guide-section {
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
}

.study-guide-section:nth-child(2) {
    background: rgba(251, 243, 219, 0.3);
    border-left: 2px solid #f59e0b;
}

.study-guide-section:nth-child(3) {
    background: rgba(139, 92, 246, 0.05);
    border-left: 2px solid #8b5cf6;
}

.study-guide-section:nth-child(4) {
    background: rgba(34, 197, 94, 0.05);
    border-left: 2px solid #22c55e;
}

.collaborated-sources {
    position: relative;
    margin-top: 1.5rem;
    padding: 1rem;
    padding-top: 1rem;
    border-radius: 8px;
    border: 1.5px solid rgba(139, 92, 246, 0.3);
}

.collaborated-badge {
    position: absolute;
    top: -5px;
    left: -4px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #8b5cf6;
    background: white;
    border: 1.5px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
}

.collaborated-sources .study-guide-section {
    margin-bottom: 0.75rem;
}

.collaborated-sources .study-guide-section:last-child {
    margin-bottom: 0;
}

.section-label {
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-timestamp {
    font-weight: 400;
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: none;
}

/* Color-coded highlights in AI summary */
.highlight-note {
    background: rgba(251, 191, 36, 0.3);
    padding: 1px 2px;
    border-radius: 2px;
}

.highlight-professor {
    background: rgba(139, 92, 246, 0.2);
    padding: 1px 2px;
    border-radius: 2px;
}

.highlight-slide {
    background: rgba(34, 197, 94, 0.2);
    padding: 1px 2px;
    border-radius: 2px;
}

.section-content {
    color: #6b7280;
    line-height: 1.5;
    font-size: 0.9375rem;
}

.study-guide-cta {
    display: block;
    margin-top: 1.5rem;
    padding: 0.875rem 1.5rem;
    background: #111827;
    color: white;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
    font-size: 0.9375rem;
}

.study-guide-cta:hover {
    background: #1f2937;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .study-guide-card {
        max-width: 95%;
        margin: 1rem auto;
        max-height: 50vh;
    }

    .study-guide-header {
        padding: 1rem;
    }

    .study-guide-title {
        font-size: 1.125rem;
    }

    .study-guide-content {
        padding: 1rem;
    }

    .ai-summary {
        padding: 0.875rem;
        font-size: 0.875rem;
    }

    .study-guide-section {
        padding: 0.875rem;
    }

    .section-content {
        font-size: 0.875rem;
    }

    .highlightable-text {
        top: 18%;
        left: 5%;
        width: 90%;
        font-size: 0.75rem;
        padding: 0.5rem;
    }
}

/* CTA Section */
.cta {
    /* Same envelope as the .mg / .app-window demos: a 1040px box that keeps a
       3.75rem gutter from the viewport edge, so all three sections align flush.
       min(100% - 7.5rem, 1040px) mirrors a 1040px box inside a 3.75rem-inset section. */
    width: calc(100% - 7.5rem);
    max-width: 1040px;
    margin: 6rem auto 4rem;
    padding: 4rem 3rem;
    text-align: center;
    background: var(--color-text);
    border-radius: 20px;
    color: white;
    box-sizing: border-box;
}

.cta-title {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 2rem;
}

.cta .btn-primary {
    background: white;
    color: var(--color-text);
}

.cta .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
}

.cta-contact {
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.cta-contact a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

.cta-contact a:hover {
    color: rgba(255, 255, 255, 1);
}

/* Click-to-copy email (styled to read like the old link, but it's a button) */
.copy-email {
    position: relative;
    display: inline;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.copy-email:hover {
    color: rgba(255, 255, 255, 1);
}
.copy-email.copied {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
}
/* Hide the address text and show the confirmation in its place while copied */
.copy-email.copied .copy-email-text {
    visibility: hidden;
}
.copy-email-feedback {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-weight: 600;
    color: #fff;
    visibility: hidden;
    pointer-events: none;
}
.copy-email.copied .copy-email-feedback {
    visibility: visible;
}

.cta-note {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

/* Waitlist Form */
.waitlist-form {
    display: flex;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.waitlist-input {
    flex: 1;
    min-width: 280px;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-family: var(--font-sans);
    transition: all 0.3s ease;
}

.waitlist-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.waitlist-input:focus {
    outline: none;
    border-color: white;
    background: rgba(255, 255, 255, 0.15);
}

.waitlist-form .btn-primary {
    flex-shrink: 0;
    width: 200px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Footer */
.footer {
    border-top: 1px solid var(--color-border);
    padding: 3rem;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-logo {
    font-weight: 700;
    font-size: 1.25rem;
}

.footer-copy {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.15s ease;
}

.footer-links a:hover {
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .demo-split-view {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .view-label {
        font-size: 0.875rem;
    }

    .demo-section-title {
        font-size: 2.25rem;
    }

    .highlightable-text {
        top: 22.5%;
        left: 56.5%;
    }

    .hero-split {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .hero-left {
        max-width: 100%;
    }

    .feature-card-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Remove ALL backdrop-filters on mobile for smooth scrolling - #1 cause of jank */
    * {
        backdrop-filter: none !important;
    }

    .nav {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .notes-sidebar {
        background: rgb(255, 255, 255) !important;
    }

    #browser-warning-banner {
        background: rgba(17, 24, 39, 0.98) !important;
    }

    /* Simplify animations on mobile for performance while keeping smoothness */
    * {
        animation-duration: 0.25s !important;
        transition-duration: 0.15s !important;
    }

    /* Smooth essential animations */
    .fade-in, .slide-up, .show, .visible {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }

    /* Disable complex cubic-bezier, use simple ease */
    * {
        animation-timing-function: ease !important;
        transition-timing-function: ease !important;
    }

    /* Remove box-shadows on scrolling elements for performance */
    .screenshot-card,
    .feature-card,
    .pricing-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        transition: none !important;
    }

    /* Optimize touch interactions */
    button, a, .clickable {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* Increase touch targets */
    .mic-toggle-btn-float,
    .btn-nav,
    .carousel-arrow {
        min-width: 44px;
        min-height: 44px;
    }

    .nav-content {
        padding: 1rem 1.5rem;
        gap: 1rem;
    }

    .nav-center {
        display: none;
    }

    .logo-icon {
        width: 28px;
        height: 28px;
    }

    .logo {
        font-size: 1.125rem;
    }

    .btn-nav {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        min-width: 100px;
        white-space: nowrap;
    }

    /* .hero padding/min-height for the current design is set in the mobile
       block above (near .hero-h1) -- this legacy block used to zero out the
       top padding, which put the reintroduced H1 behind the fixed nav. */

    .explainer-section {
        margin: 0 auto;
        padding: 4rem 1.5rem;
        min-height: 50vh;
    }

    .explainer-title {
        font-size: 1.75rem;
    }

    .explainer-content p {
        font-size: 1rem;
        line-height: 1.6;
    }

    .network-effect {
        margin-top: 2rem;
        padding-top: 2rem;
    }

    .network-title {
        font-size: 1rem;
    }

    .network-steps {
        gap: 1rem;
    }

    .network-step:not(:last-child)::after {
        display: none;
    }

    .step-count {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
    }

    .step-text {
        font-size: 0.6875rem;
        max-width: 70px;
    }

    .demo-container {
        padding: 1rem;
    }

    .interactive-demo-section {
        margin: 4rem auto;
        padding: 0 1.5rem;
    }

    .demo-section-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }

    .lecture-frame, .student-frame {
        padding: 1rem;
    }

    .mic-toggle-btn-float {
        top: clamp(6rem, 12vh, 10rem);
        right: 1rem;
        width: 40px;
        height: 40px;
        padding: 8px;
    }

    .prof-transcript-panel {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-height: 150px;
    }

    .student-notes-panel {
        min-height: 80px;
        max-height: 150px;
    }

    .student-transcript-panel {
        height: 120px;
    }

    .highlightable-text {
        top: 22%;
        left: 10%;
        width: 80%;
        font-size: 0.75rem;
        padding: 0.5rem;
    }

    .lecture-slide {
        max-width: 100%;
        padding: 1rem;
        min-height: 650px;
        position: relative;
    }

    .slide-content {
        position: absolute;
        top: 53%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: calc(100% - 2rem);
        z-index: 2;
        padding: 0;
    }

    .slide-title {
        font-size: clamp(1.75rem, 6vw, 3rem);
        text-align: center;
        margin: 0 auto 1rem;
        line-height: 1.1;
        width: 100%;
        padding: 0;
    }

    .slide-subtitle {
        display: block;
        font-size: 1rem !important;
        line-height: 1.5;
        margin: 0.5rem auto 0;
        color: #6b7280;
        text-align: center;
        width: 100%;
        padding: 0;
    }

    .slide-subtitle .subtitle-desktop {
        display: none !important;
    }

    .slide-subtitle .subtitle-mobile {
        display: inline !important;
        font-style: italic;
    }


    .transcription-sidebar {
        display: flex !important;
        position: absolute !important;
        bottom: -1.5rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 2rem) !important;
        max-width: none !important;
        opacity: 0 !important;
        z-index: 3 !important;
        transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        backface-visibility: hidden !important;
    }

    .transcription-sidebar.show {
        opacity: 1 !important;
        transform: translateX(-63%) !important;
    }

    .transcription-list {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .transcription-chunk {
        width: 100%;
        max-width: 400px;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    #transcript1,
    #transcript3 {
        display: none !important;
    }

    .notes-sidebar {
        display: flex !important;
        position: absolute !important;
        top: -2rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        width: calc(100% - 2rem) !important;
        max-width: none !important;
        min-height: 282px !important;
        max-height: 282px !important;
        opacity: 0 !important;
        z-index: 10 !important;
        transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        backface-visibility: hidden !important;
    }

    .notes-sidebar.show {
        opacity: 1 !important;
        transform: translateX(-37%) !important;
    }

    .notes-header {
        padding: 10px 15px !important;
        font-size: 12px !important;
    }

    .note-card {
        padding: 10px !important;
        font-size: 12px !important;
    }

    .teacher-note-section {
        margin: 6px 0 !important;
        padding: 8px !important;
    }

    .teacher-note-badge {
        font-size: 9px !important;
        margin-bottom: 4px !important;
    }

    .teacher-note-text {
        font-size: 11px !important;
    }

    .note-text {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .hero-split {
        gap: 2rem;
    }

    .hero-title {
        font-size: 2.25rem;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    /* Scale up flow animation for mobile */
    .flow-diagram {
        height: 200px;
        transform: scale(1.3);
        transform-origin: center;
    }

    .flow-label {
        font-size: 20px;
        font-weight: 700;
        fill: #0F172A !important;
        opacity: 1 !important;
    }

    .flow-line {
        stroke-dasharray: 6 2;
        stroke-width: 3;
        stroke: #0F172A !important;
    }

    .flow-marker {
        r: 7;
        fill: #0F172A !important;
    }

    .ai-processor {
        bottom: 0rem;
    }

    .ai-label {
        font-size: 1rem;
        font-weight: 800;
        color: #0F172A !important;
    }

    /* Position toggle on right, title on left for mobile */
    .features-toggle-container {
        position: absolute;
        top: -2.5rem;
        left: auto;
        right: 0;
        transform: none;
    }

    .features-toggle-container .audience-toggle {
        margin-bottom: 0;
        top: 22px;
        right: 0;
    }

    /* Stack flow diagram and about section on mobile */
    .flow-section {
        position: relative;
        margin-top: -8rem;
    }

    /* Smaller toggles on mobile */
    .audience-toggle {
        font-size: 0.8rem;
    }

    .audience-toggle .toggle-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }

    .flow-diagram-container {
        margin-bottom: 3rem;
        position: sticky;
        top: 70px;
        z-index: 5;
        padding-top: 1rem;
        padding-inline: 2rem;
    }

    .screenshots-section {
        margin-top: -6rem;
    }

    .flow-result-container {
        grid-template-columns: 1fr;
        gap: 0;
        position: relative;
        min-height: auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .flow-output {
        position: fixed;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 400px;
        z-index: 5;
    }

    .flow-about {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin-top: 60vh;
        padding: 2rem 5%;
        z-index: 20;
        transform: none !important;
    }

    .flow-about .audience-content.active {
        display: block;
        min-height: 580px;
    }

    .output-image {
        height: 350px;
    }

    /* Disable flip animations on mobile - use fade instead */
    .screenshot-card.flip-out-right,
    .screenshot-card.flip-out-left {
        animation: fadeOutMobile 0.2s ease forwards;
    }

    .screenshot-card.flip-in-right,
    .screenshot-card.flip-in-left {
        animation: fadeInMobile 0.2s ease forwards;
    }

    @keyframes fadeOutMobile {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    @keyframes fadeInMobile {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .demo-section,
    .screenshots-section {
        padding-left: 0;
        padding-right: 0;
    }

    .story-section,
    .features,
    .pricing {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .screenshots-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .demo-title,
    .screenshots-title,
    .pricing-title {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }

    .story-text {
        font-size: 1.5rem;
    }

    .cta-title {
        font-size: 1.5rem;
    }

    .cta {
        /* Match the demo's mobile gutter (.points-section uses 1rem) so the
           waitlist box stays flush with the section-3 demo on small screens. */
        width: calc(100% - 2rem);
        max-width: none;
        padding: 3rem 1.5rem;
        margin: 2.5rem auto 3rem;
    }

    .yc-section {
        display: none;
    }

    .yc-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }

    .video-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .video-label {
        font-size: 1rem;
    }

    .demo-carousel-arrow {
        width: 32px;
        height: 32px;
    }

    .demo-prev {
        left: -12px;
    }

    .demo-next {
        right: -12px;
    }

    .demo-carousel-card {
        overflow: visible;
    }

    .waitlist-form {
        flex-direction: column;
        gap: 1rem;
        max-width: 100%;
    }

    .waitlist-input {
        min-width: 100%;
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
    }

    .waitlist-form .btn-primary {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }

    .cta-note {
        font-size: 0.9375rem;
    }

    .feature-card-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .screenshot-card,
    .story-container {
        padding: 1.5rem;
    }

    .story-section {
        margin: -5rem auto;
    }

    .story-text-intro {
        font-size: 1.125rem;
    }

    .story-text-secondary {
        font-size: 1.125rem;
    }

    .story-text-emphasis {
        font-size: 1.125rem;
    }

    .horizontal-scroll-wrapper {
        position: sticky !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        padding-top: 1rem;
        overflow: visible;
    }

    .horizontal-scroll-track {
        position: relative;
        width: 86vw;
        max-width: 86vw;
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .screenshot-card {
        position: absolute;
        width: 100%;
        max-width: 90vw;
        height: 65vh;
        min-height: 65vh;
        max-height: 65vh;
        box-shadow: none !important;
        overflow: visible !important;
        opacity: 0;
        transform: scale(0.85) translateY(40px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        pointer-events: none;
    }

    .screenshot-card.active {
        opacity: 1;
        transform: scale(1) translateY(0);
        pointer-events: auto;
    }

    /* Disable video autoplay and reduce quality on mobile */
    .screenshot-video {
        will-change: auto;
        transform: translateZ(0);
    }

    .screenshot-card::before {
        font-size: 1.75rem;
        top: -2.5rem;
        z-index: 1;
        left: 5%;
        transform: none;
        text-align: left;
        white-space: nowrap;
        max-width: 50%;
    }

    .screenshot-card:last-child {
        margin-right: 0;
    }

    .screenshot-placeholder {
        aspect-ratio: 14 / 9;
        margin-top: 2.5rem;
    }

    .screenshot-label {
        font-size: 0.8rem;
        position: absolute;
        top: 1rem;
        left: 1rem;
    }

    .screenshot-description {
        font-size: 0.9375rem;
    }

    /* Custom image positioning for each card */
    .screenshot-card:nth-child(1) .screenshot-img {
        object-position: left center;
    }

    .screenshot-card:nth-child(2) .screenshot-img,
    .screenshot-card:nth-child(3) .screenshot-img {
        object-fit: contain;
        object-position: center center;
    }

    .screenshot-card:nth-child(4) .screenshot-img {
        object-position: center top;
    }

    .screenshot-card:nth-child(5) .screenshot-img {
        object-position: left top;
    }

    .screenshot-card:nth-child(6) .screenshot-img {
        object-position: left top;
    }

    /* Card-specific overrides for mobile */
    .screenshot-card[data-title="Start Instantly"] .screenshot-video {
        object-fit: cover;
        object-position: center bottom;
        transform: scale(1.35);
    }

    .screenshot-card[data-title="Capture Everything"] .screenshot-img {
        object-fit: cover;
        object-position: right;
    }

    .screenshot-card[data-title="Learn Together"] .screenshot-video {
        object-fit: contain;
        object-position: center;
    }

    .screenshot-card[data-title="Ask Freely"] .screenshot-video {
        object-fit: cover;
        object-position: center;
    }

    .screenshot-card[data-title="Zero Setup"] .screenshot-img {
        object-fit: cover;
        object-position: center;
    }

    .screenshot-card[data-title="Answer In-Flow"] .screenshot-img {
        object-position: center top;
    }

    .screenshot-card[data-title="Know Your Class"] .screenshot-img {
        object-position: center;
    }

    /* Video progress indicator - ensure visible on mobile */
    .video-progress {
        bottom: 8px;
        right: 8px;
        width: 20px;
        height: 20px;
        z-index: 10;
    }

    .video-progress::after {
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
    }

    /* Scroll indicator dots */
    .scroll-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 1rem 0 2rem;
        position: relative;
        z-index: 10;
    }

    .scroll-dot {
        width: 8px;
        height: 8px;
    }

    .scroll-dot.active {
        transform: scale(1.2);
    }

    /* Override 5th student card label for mobile */
    .screenshot-card[data-title="Smart Study Guide"]::before {
        content: "Smart Guide";
    }

    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    /* Extra bottom breathing room so Privacy/LinkedIn aren't flush against
       the very edge of the screen (easy to lose behind mobile browser chrome). */
    .footer {
        padding-bottom: 5rem;
    }
}

/* Scroll dots - shown on all screen sizes */
.scroll-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 1rem 0 2rem;
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.scroll-dots.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
}

.scroll-dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#111827 calc(var(--progress, 0) * 1%), transparent 0);
    transition: none;
}

.scroll-dot.completed::before {
    background: #111827;
}

.scroll-dot.active {
    transform: scale(1.3);
}

/* Slide Selector Overlay */
.interactive-demo-section {
    position: relative;
}

.slide-selector-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.slide-selector-overlay.active {
    display: flex;
}

.slide-selector-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

.slide-selector-modal {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    max-width: 800px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.slide-selector-title {
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.carousel-container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.carousel-track-container {
    flex: 1;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-option-card {
    min-width: 100%;
    background: white;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    transition: border-color 0.3s ease;
}

.slide-option-card[data-slide="cs"] {
    border-color: #bfdbfe;
}

.slide-option-card[data-slide="biology"] {
    border-color: #bbf7d0;
}

.slide-option-card[data-slide="business"] {
    border-color: #fde68a;
}

.slide-option-card[data-slide="psychology"] {
    border-color: #e9d5ff;
}

.slide-option-card[data-slide="engineering"] {
    border-color: #fed7aa;
}

.slide-option-card.founder-card {
    border-color: #fecaca;
}

.carousel-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.carousel-arrow:hover {
    border-color: var(--color-text);
    background: var(--color-surface);
    transform: scale(1.1);
}

.carousel-arrow svg {
    color: var(--color-text);
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background: var(--color-text);
    width: 24px;
    border-radius: 4px;
}

.carousel-select-btn {
    width: 100%;
    padding: 0.875rem 2rem;
    background: var(--color-text);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.carousel-select-btn:hover {
    background: #1f2937;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.slide-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    text-align: center;
    width: fit-content;
}

.cs-badge {
    background: #dbeafe;
    color: #1e40af;
}

.bio-badge {
    background: #dcfce7;
    color: #166534;
}

.bus-badge {
    background: #fef3c7;
    color: #92400e;
}

.psy-badge {
    background: #f3e8ff;
    color: #6b21a8;
}

.eng-badge {
    background: #ffedd5;
    color: #9a3412;
}

.founder-badge {
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.8125rem;
}

.slide-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.slide-preview {
    width: 350px;
    flex-shrink: 0;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.slide-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slide-option-card .slide-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

@media (max-width: 768px) {
    .slide-selector-modal {
        padding: 2rem 1.5rem;
        width: 95%;
    }

    .slide-selector-title {
        font-size: 1.375rem;
        margin-bottom: 1.5rem;
    }

    .carousel-container {
        gap: 0.5rem;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
    }

    .slide-option-card {
        padding: 1.25rem;
        flex-direction: column;
        align-items: stretch;
    }

    .slide-preview {
        width: 100%;
        max-width: 100%;
    }

    .slide-info {
        text-align: center;
        align-items: center;
    }

    .carousel-select-btn {
        font-size: 0.9375rem;
        padding: 0.875rem 1.5rem;
    }
}

/* Image Lightbox */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 10001;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.lightbox-close:hover {
    opacity: 0.7;
}

#lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
}

.screenshot-img, .demo-lecture-img {
    cursor: zoom-in;
    transition: opacity 0.2s ease;
}

.screenshot-img:hover, .demo-lecture-img:hover {
    opacity: 0.9;
}

/* Video play button overlay */
.screenshot-placeholder {
    position: relative;
}

.screenshot-video {
    position: relative;
}

.screenshot-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
    border: 3px solid rgba(255, 255, 255, 0.9);
}

.screenshot-video::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 2;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.screenshot-video:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.screenshot-video:hover::before {
    opacity: 1;
}

/* Hide play button when video is playing */
.screenshot-video[data-playing="true"]::after,
.screenshot-video[data-playing="true"]::before {
    opacity: 0;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Slower scroll for student notes panel */
.student-notes-panel {
    scroll-behavior: auto;
}

@keyframes slowScroll {
    from {
        scroll-behavior: auto;
    }
    to {
        scroll-behavior: auto;
    }
}

/* Selection */
::selection {
    background: var(--color-text);
    color: white;
}

/* Hero Demo Styles */
.demo-container {
    width: 100%;
    max-width: 1200px;
    position: relative;
    overflow: visible;
}

.lecture-slide {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 4rem;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-height: 600px;
}

.slide-content {
    max-width: 718px;
    padding-top: 98px;
}

.slide-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

.slide-subtitle {
    font-size: 1.5rem;
    color: #6b7280;
    line-height: 1.6;
}

.subtitle-mobile {
    display: none !important;
    font-style: italic;
}

.subtitle-desktop {
    display: inline !important;
    font-style: italic;
}


.highlight {
    background: transparent;
    transition: background 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline;
    position: relative;
}

.highlight.active {
    background: rgba(254, 240, 138, 0.5);
}

.transcription-sidebar {
    position: absolute;
    left: -25px;
    bottom: -60px;
    width: 380px;
    max-height: 500px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.transcription-sidebar.show {
    opacity: 1;
}

.transcription-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 16px 16px 0 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-size: 14px;
}

.transcription-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
}

.transcription-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.transcription-chunk {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    cursor: grab;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: translateY(-10px);
}

.transcription-chunk.show {
    opacity: 1;
    transform: translateY(0);
}

.transcription-chunk:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.transcription-chunk:active {
    cursor: grabbing;
}

.transcription-chunk.dragging {
    cursor: grabbing;
}

.transcription-chunk.hidden {
    display: none;
}

.transcription-clone {
    position: absolute;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    cursor: grabbing;
    max-width: 280px;
    z-index: 1001;
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: none;
}

.chunk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: #6b7280;
}

.chunk-time {
    font-weight: 600;
    color: #6366f1;
}

.chunk-page {
    background: #e0e7ff;
    color: #6366f1;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.chunk-text {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

.notes-sidebar {
    position: absolute;
    right: -22px;
    top: -53px;
    width: 340px;
    min-height: 301px;
    max-height: 301px;
    background: rgba(255, 255, 255, 0.98);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    opacity: 0;
    transform: translateX(calc(100% + 40px));
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
}

.notes-sidebar.show {
    opacity: 1;
    transform: translateX(0);
}

.notes-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(248, 249, 250, 0.8);
    border-radius: 0 11px 0 0;
    font-weight: 600;
    color: #333;
    font-size: 14px;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.notes-header::before {
    content: '⋮⋮';
    color: #9ca3af;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -2px;
}

.notes-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.note-card {
    position: relative;
    background: rgba(248, 249, 250, 0.6);
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    animation: noteSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.note-card:hover {
    background: rgba(248, 249, 250, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.note-card.highlight-note {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

.note-card.collaborated-note {
    background: #ffffff !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.15), 0 2px 8px rgba(139, 92, 246, 0.08) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.note-card.collaborated-note:hover {
    border-color: rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.2), 0 4px 12px rgba(139, 92, 246, 0.12) !important;
}

/* Type badges */
.note-type-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    opacity: 0;
}

.note-type-badge.highlight-badge {
    color: #6b7280 !important;
    background: #f3f4f6 !important;
}

.note-type-badge.collaborated-badge {
    color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

/* Badge animations */
@keyframes simpleFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOutQuick {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes collaboratedGentlePop {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    60% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes purpleGlowPulse {
    0% {
        box-shadow: 0 0 0 rgba(139, 92, 246, 0);
    }
    40% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.25);
    }
    100% {
        box-shadow: 0 0 0 rgba(139, 92, 246, 0);
    }
}

.note-type-badge.fade-in-initial {
    animation: simpleFadeIn 0.4s ease-out forwards;
}

.note-type-badge.fade-out {
    animation: fadeOutQuick 0.2s ease-out forwards;
}

.note-type-badge.gentle-pop-in {
    animation: collaboratedGentlePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               purpleGlowPulse 0.6s ease-out forwards;
}

.note-highlight {
    color: #6b7280 !important;
    font-style: italic !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    padding: 6px 0 !important;
    padding-bottom: 10px !important;
}

.highlight-label {
    font-weight: 600 !important;
    color: #8b5cf6 !important;
    font-style: normal !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.note-text {
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 6px !important;
    padding-top: 10px !important;
    margin-top: 10px !important;
    border-top: 1px solid #f3f4f6 !important;
    font-style: normal !important;
}

.note-ai-indicator {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 10px;
    color: #8b5cf6;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.note-ai-indicator.show {
    opacity: 1;
}

/* Teacher note - ultra minimal inline style matching extension */
.teacher-note-reply {
    margin-top: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: 1px solid #f3f4f6 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #6b7280 !important;
}

.teacher-note-label {
    font-weight: 600 !important;
    color: #8b5cf6 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.teacher-note-content {
    display: inline !important;
    margin-top: 0 !important;
    color: #6b7280 !important;
    margin-left: 4px !important;
}

@keyframes noteSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fake-cursor {
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fake-cursor.show {
    opacity: 1;
}

.cursor {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    transition: left 1s cubic-bezier(0.4, 0, 0.2, 1), top 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.cursor.show {
    display: block !important;
}

.cursor-arrow {
    fill: #111827;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 0 1px rgba(255, 255, 255, 0.8));
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: #111827;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ===== v3: single-narrative About + Notion contrast ===== */
.about-content-single p {
    margin: 0 0 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.about-content-single p strong {
    color: var(--color-text);
}

.vs-notion {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--color-text);
    background: rgba(17, 24, 39, 0.03);
    border-radius: 0 8px 8px 0;
}
.vs-notion-title {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--color-text);
}
.vs-notion-body {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ===== v3: Knowledge layer section ===== */
/* ============================================================
   ORGANIZATION SECTION (post-hero widen). Scroll-driven via
   --org-progress (0..1) set by initOrgAnimation on #org-section.
   A tall section with a sticky stage: pillars slide in one by
   one, then the product window clicks Guides -> Explore -> Journal.
   ============================================================ */
.org-section {
    position: relative;
    background: var(--color-bg);
}
/* Auto-play stage: a normal-height centered section (no scroll runway). */
.org-sticky {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.75rem; padding: 5rem 1.5rem;
}
.org-intro { max-width: 680px; text-align: center; flex-shrink: 0; }
.org-title {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700;
    color: var(--color-text); margin: 0 0 0.6rem; line-height: 1.15;
}
.org-subtitle {
    font-size: 1rem; line-height: 1.55; color: var(--color-text-secondary); margin: 0;
}

/* Centered stage: the window sits in the middle; document cards fly in from BOTH
   sides and land in its Guides rows. .org-morph is a full-width overlay so cards
   can start off either edge and converge inward. */
.org-flow {
    position: relative;
    width: 100%; max-width: 680px;
    display: flex; flex-direction: column; align-items: center;
}
/* caption centered above the window */
.org-caption {
    font-size: 1rem; line-height: 1.5; color: var(--color-text-secondary);
    text-align: center; margin: 0 auto 1.1rem; max-width: 560px;
    transition: opacity 0.35s ease;
}
.org-caption.swap { opacity: 0; }

/* MORPH overlay: spans the full flow width + overhangs both sides so cards can
   start off the left/right edges and converge into the centered window. */
.org-morph {
    position: absolute; left: -160px; right: -160px; top: 0; bottom: 0;
    z-index: 6; pointer-events: none;
    transition: opacity 0.4s ease;
}
/* once every card has landed, the (now empty) overlay fades away */
.org-morph.done { opacity: 0; }
.org-morph.done .org-stack { opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.org-stack { position: absolute; inset: 0; }
/* Document-style session card: a little page (top color bar = the doc's spine,
   a faint folded corner, tight type). */
.org-session-card {
    position: absolute; left: 50%; top: 50%; width: 190px; z-index: 7;
    padding: 0.7rem 0.8rem 0.65rem; background: #fff; border: 1px solid var(--color-border);
    border-radius: 9px; box-shadow: 0 14px 34px -8px rgba(17,24,39,0.20);
    display: flex; flex-direction: column; gap: 0.3rem;
    /* start: invisible, just off its side (--sx), ready to plop in */
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--sx), 0) rotate(var(--fr, 0deg)) scale(0.92);
    transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.34,1.5,0.64,1);
}
/* folded top-right corner -> reads as a document/page */
.org-session-card::after {
    content: ""; position: absolute; top: 0; right: 0;
    border-width: 0 11px 11px 0; border-style: solid;
    border-color: var(--color-border) #fafafa;
    border-top-right-radius: 9px;
}
/* which side a card enters from, and its resting spot -- parked so it OVERHANGS the
   window's left/right edge (half out, like the Explore popups), then flies inward. */
.org-session-card[data-side="left"]  { --sx: -420px; --rest: -330px; --fr: -5deg; }
.org-session-card[data-side="right"] { --sx: 420px;  --rest: 330px;  --fr: 5deg; }
/* PLACED: the card plops onto the table at its rest spot (left or right of center),
   like a freshly finished session laid down. */
.org-session-card.placed {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--rest), 0) rotate(var(--fr)) scale(1);
}
/* flying to a row: JS sets --tx/--ty (delta measured FROM the placed position).
   Add --rest so it starts from the placed spot, glides to the row, shrinks toward
   the row height, then fades as the row takes over. */
.org-session-card.flying {
    transform: translate(-50%, -50%) translate(calc(var(--rest) + var(--tx)), var(--ty)) rotate(0deg) scale(0.62);
    transition: transform 0.45s cubic-bezier(0.5,0,0.2,1), opacity 0.25s ease 0.28s;
    opacity: 0; z-index: 8;
}
/* during a loop reset, snap cards/rows back instantly (no reverse-fly flicker) */
.org-section.org-resetting .org-session-card,
.org-section.org-resetting .org-guides .org-folder-row,
.org-section.org-resetting .org-window { transition: none !important; }
.osc-bar { width: 26px; height: 3px; border-radius: 2px; background: var(--c, #888); }
.osc-title { font-size: 0.85rem; font-weight: 700; color: var(--color-text); }
.osc-meta { font-size: 0.7rem; color: #9ca3af; }

/* Guides rows start hidden; each reveals as its session card lands on it, and
   resets to hidden between loop cycles (the whole sequence replays). */
/* Folders are ALWAYS in place -- fewer moving parts. Only the cards fly into them;
   a quick highlight pulse confirms a session just filed into its row. */
.org-guides .org-folder-row { opacity: 1; }
.org-guides .org-folder-row.pulse { animation: orgRowPulse 0.7s ease; }
@keyframes orgRowPulse {
    0% { background: rgba(99,102,241,0.12); }
    100% { background: transparent; }
}

/* The product window: a mini dashboard that clicks through tabs. overflow visible
   (overrides .app-window's hidden) so the Atlas bubbles can float past its edges;
   the inner .org-stage keeps overflow:hidden to clip the panels/nodes. */
.org-window {
    position: relative;
    width: 100%; flex-shrink: 0;
    overflow: visible;
    opacity: 0; transform: translateY(28px) scale(0.97);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.org-window.in { opacity: 1; transform: none; }
/* the tab bar has rounded top corners from .app-window; keep them crisp */
.org-tabs { border-radius: 18px 18px 0 0; }
.org-tabs {
    display: flex; align-items: center; gap: 1.4rem;
    padding: 0.75rem 1.1rem; background: #ffffff; border-bottom: 1px solid var(--color-border);
}
.org-tab {
    font-size: 0.85rem; font-weight: 600; color: #9ca3af;
    padding: 0.15rem 0; position: relative; transition: color 0.25s ease;
}
.org-tab.active { color: var(--color-text); }
.org-tab.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -0.78rem; height: 2px;
    background: var(--color-text); border-radius: 2px;
}
.org-stage { position: relative; height: 260px; background: #fafafa; overflow: hidden; border-radius: 0 0 18px 18px; }
.org-panel {
    position: absolute; inset: 0; padding: 1.1rem 1.25rem;
    background: #fafafa; /* solid so the active panel fully occludes the others */
    opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.org-panel.active { opacity: 1; }

/* GUIDES panel: folder rows */
.org-guides { display: flex; flex-direction: column; }
.org-folder-row {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.4rem; border-bottom: 1px solid #f0f0ee;
}
.org-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.org-folder-name { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--color-text); }
/* count sits right-aligned in a fixed slot so every row lines up, next to the spark */
.org-folder-meta {
    font-size: 0.72rem; color: #9ca3af; flex-shrink: 0;
    width: 4.75rem; text-align: right; font-variant-numeric: tabular-nums;
}
.org-spark { width: 72px; height: 16px; flex-shrink: 0; }

/* EXPLORE / ATLAS panel: aura blobs + city dots + people pins */
.org-atlas { padding: 0; }
.org-atlas-map { position: relative; width: 100%; height: 100%; }
.org-aura { position: absolute; border-radius: 50%; filter: blur(4px); }
.org-city {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--c, #888); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.org-pin {
    position: absolute; width: 20px; height: 20px; border-radius: 50%;
    background: var(--c, #888); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.16);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700; color: #fff;
}
.org-pin-ghost {
    background: transparent; border: 1.5px dashed #9AA4AE; color: #9AA4AE;
    box-shadow: none;
}
.org-cluster-label {
    position: absolute; font-size: 0.72rem; color: #6b7280; white-space: nowrap;
}
/* the demo node is a bit larger; both demo targets get a selected ring on .sel.
   Selected items lift above the map so they're never hidden behind a bubble. */
.org-city-lg { width: 11px; height: 11px; }
.org-city.sel, .org-pin.sel { position: absolute; z-index: 15; }
.org-city.sel { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 1px 3px rgba(0,0,0,0.12); }
.org-pin.sel { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 1px 4px rgba(0,0,0,0.16); }

/* Atlas bubbles float OUTSIDE the window edges (like the hero's floating panels).
   Positioned relative to .org-window (overflow:visible); node -> recap overhangs
   the bottom-left, contact -> tasks overhangs the top-right. Highest z so the
   selected pin never covers them. */
.org-bubble {
    position: absolute; z-index: 20; width: 240px;
    background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
    box-shadow: 0 18px 46px -10px rgba(17,24,39,0.28);
    padding: 0.75rem 0.85rem;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.org-bubble.show { opacity: 1; }
/* overhang beyond the window: recap pokes out the lower-left, tasks out the upper-right */
.org-bubble-recap { left: -2.5rem; bottom: -1.75rem; transform: translateY(12px) scale(0.96); }
.org-bubble-recap.show { transform: none; }
/* tasks bubble sits near the "P" contact pin (right cluster), overhanging the right
   edge and lifted up so it never covers the pin it points to. */
.org-bubble-tasks { right: -3.25rem; top: 4%; transform: translateY(-12px) scale(0.96); }
.org-bubble-tasks.show { transform: none; }
.obub-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.obub-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.obub-avatar {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700; color: #fff;
}
.obub-title { font-size: 0.82rem; font-weight: 700; color: var(--color-text); flex: 1; min-width: 0; }
.obub-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #9ca3af; }
.obub-notes, .obub-tasks { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.obub-notes li { position: relative; padding-left: 0.8rem; font-size: 0.76rem; line-height: 1.4; color: #4b5563; }
.obub-notes li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; }
.obub-notes strong { color: var(--color-text); font-weight: 600; }
.obub-tasks li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.76rem; color: #374151; }
.obt-kind { flex-shrink: 0; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; }
.obt-task   { background: #eef2ff; color: #4f46e5; }
.obt-meet   { background: #ecfeff; color: #0891b2; }
.obt-assign { background: #f0fdf4; color: #16a34a; }

/* JOURNAL panel: day-picker + entries */
.org-journal-days {
    display: flex; align-items: center; justify-content: center; gap: 1.5rem;
    padding-bottom: 0.7rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border);
}
.org-day { font-size: 0.78rem; color: #9ca3af; padding-bottom: 0.4rem; position: relative; }
.org-day-active { color: var(--color-text); font-weight: 600; }
.org-day-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.72rem; height: 2px; background: var(--color-text); }
/* daily digest header: the selected day + how much landed that day */
.org-journal-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.org-journal-date { font-size: 0.9rem; font-weight: 700; color: var(--color-text); }
.org-journal-count { font-size: 0.72rem; color: #9ca3af; }
/* a scannable list of what got done that day */
.org-journal-list { list-style: none; display: flex; flex-direction: column; gap: 0.15rem; }
.org-journal-item {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.55rem 0.35rem; border-radius: 8px;
    border-bottom: 1px solid #f1f1ef;
}
.org-journal-item:last-child { border-bottom: none; }
.oji-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 0.35rem; flex-shrink: 0; }
.oji-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.oji-text { font-size: 0.9rem; line-height: 1.4; color: #374151; }
.oji-text strong { color: var(--color-text); font-weight: 600; }
.oji-src { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #9ca3af; }

/* Clicking cursor inside the window */
.org-cursor {
    position: absolute; top: 0; left: 0; z-index: 16;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
    opacity: 0; transition: left 0.5s cubic-bezier(0.4,0,0.2,1), top 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}
/* the cursor only appears during the Atlas demo (JS adds .on) */
.org-cursor.on { opacity: 1; }
.org-cursor.tap { transform: scale(0.82); }

/* Three-points summary (the hourglass, in words) */
/* ============================================================
   Three points, shown as a faithful mini MASTER GUIDE (real product):
   header + expandable topic sections (main column) + right rail
   (members / teams / updates / upcoming).
   ============================================================ */
/* Outer inset (3.75rem) matches .hero and .cta so the 1040px demo box lines up
   flush with the hero window and waitlist box at every viewport width. */
.points-section { padding: 4rem 3.75rem 2rem; background: var(--color-bg); }
/* Section intro above the Master Guide window (the compounding message) */
.points-intro { max-width: 640px; margin: 0 auto 2.5rem; text-align: center; }
.points-heading {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700;
    color: var(--color-text); margin: 0 0 0.7rem; line-height: 1.15;
}
.points-subtitle {
    font-size: 1rem; line-height: 1.6; color: var(--color-text-secondary); margin: 0;
}
.mg {
    max-width: 1040px; margin: 0 auto;
    background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(17,24,39,0.14); overflow: hidden;
}
.mg-head {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 1rem 1.4rem; border-bottom: 1px solid var(--color-border);
}
.mg-back { color: #9ca3af; font-size: 1.2rem; line-height: 1; }
.mg-title { flex: 1; font-size: 1.3rem; font-weight: 700; color: var(--color-text); margin: 0; letter-spacing: -0.01em; }
.mg-menu { color: #9ca3af; font-size: 1.1rem; letter-spacing: 0.05em; }
.mg-body { display: grid; grid-template-columns: 1fr 260px; }
.mg-main { padding: 1.1rem 1.4rem; }
.mg-rail { border-left: 1px solid var(--color-border); padding: 1.2rem 1.3rem; background: #fcfcfb; }

/* topic sections (click the header to expand/collapse) */
.mg-section { border-bottom: 1px solid #f1f1ef; }
.mg-section:last-child { border-bottom: none; }
/* transparent border + fixed padding in BOTH states so expanding never shifts the
   header content sideways (only the border color + margin below change). */
.mg-sec-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 0.9rem; cursor: pointer; border: 1px solid transparent; border-radius: 10px; transition: background 0.15s ease, border-color 0.15s ease; }
.mg-sec-head:hover { background: #f8f8f7; }
.mg-section.open .mg-sec-head { border-color: var(--color-border); margin-bottom: 0.9rem; }
.mg-section.open .mg-sec-head:hover { background: transparent; }
.mg-caret { color: #9ca3af; font-size: 0.85rem; width: 0.8rem; flex-shrink: 0; transition: transform 0.2s ease; }
.mg-section.open .mg-caret { transform: rotate(90deg); }
.mg-sec-title { flex: 1; font-size: 1.05rem; font-weight: 600; color: var(--color-text); }
/* body hidden until the section is open */
/* Left-align the body with the section TITLE (past the caret + gap), not the
   section edge: header padding 0.9rem + caret 0.8rem + gap 0.6rem = 2.3rem. */
.mg-sec-body { padding: 0 0.9rem 1.1rem 2.3rem; display: none; }
.mg-section:not(.open) .mg-sec-body { padding-left: 0.9rem; }
.mg-section.open .mg-sec-body { display: block; }
.mg-prose { font-size: 0.95rem; line-height: 1.6; color: #374151; margin: 0 0 0.5rem; }
.mg-source { font-size: 0.72rem; color: #b6bcc4; margin: 0 0 0.9rem; }
.mg-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.mg-list li { position: relative; padding-left: 1rem; font-size: 0.88rem; line-height: 1.45; color: #4b5563; }
.mg-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; }
.mg-list strong { color: var(--color-text); font-weight: 600; }

/* little avatar clusters + tag pill on section rows */
.mg-avatars { display: inline-flex; align-items: center; flex-shrink: 0; }
.mg-av {
    width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff;
    margin-left: -6px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700; color: #fff;
}
.mg-av:first-child { margin-left: 0; }
.mg-av-more { background: #e5e7eb; color: #6b7280; }
.mg-tag { flex-shrink: 0; font-size: 0.7rem; font-weight: 600; color: #fff; background: var(--c, #888); border-radius: 999px; padding: 2px 10px; }

/* right rail blocks */
.mg-rail-block { margin-bottom: 1.4rem; }
.mg-rail-block:last-child { margin-bottom: 0; }
.mg-rail-label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9ca3af; margin-bottom: 0.6rem; }
.mg-rail-avatars { display: flex; align-items: center; }
.mg-teams { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mg-team { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: #4b5563; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 9px; }
.mg-team b { color: #9ca3af; font-weight: 600; }
.mg-team-dot { width: 7px; height: 7px; border-radius: 50%; }
.mg-checks { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.mg-checks li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.82rem; color: #374151; line-height: 1.35; }
.mg-check { flex-shrink: 0; width: 15px; height: 15px; border: 1.5px solid #d1d5db; border-radius: 4px; margin-top: 0.05rem; }
.mg-check-done { background: #7F77DD; border-color: #7F77DD; position: relative; }
.mg-check-done::after { content: "\2713"; position: absolute; inset: 0; color: #fff; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; }
.mg-done { color: #9ca3af; text-decoration: line-through; }
.mg-upcoming { display: flex; flex-direction: column; gap: 0.1rem; }
.mg-up-sub { font-size: 0.68rem; color: #b6bcc4; font-style: italic; }

/* Waitlist secondary links: request test / feedback */
.cta-links { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.85rem; }
.cta-link { font-size: 0.9rem; color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s ease; }
.cta-link:hover { color: var(--color-text); }
.cta-link-sep { color: #d1d5db; }

@media (max-width: 768px) {
    .points-section { padding: 3.5rem 1rem; }
    /* Reorder without touching the DOM: Members + Teams sit right under the
       title, then the accordion, then Updates + Upcoming side by side --
       so more of the section fits on one screen. */
    .mg-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "members teams"
            "main main"
            "updates upcoming";
    }
    .mg-main { grid-area: main; padding: 1rem 1.1rem; }
    .mg-rail { display: contents; }
    .mg-rail-block { margin-bottom: 0; padding: 0.9rem 1rem; }
    .mg-rail-block:nth-child(1) { grid-area: members; border-bottom: 1px solid var(--color-border); }
    .mg-rail-block:nth-child(2) { grid-area: teams; border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
    .mg-rail-block:nth-child(3) { grid-area: updates; border-top: 1px solid var(--color-border); }
    .mg-rail-block:nth-child(4) { grid-area: upcoming; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
    .mg-rail-label { font-size: 0.64rem; }
    .mg-checks li { font-size: 0.76rem; gap: 0.4rem; }
    .mg-teams { gap: 0.3rem; }
}

/* Shared placeholder used for not-yet-captured screenshots */
.placeholder-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #9ca3af;
    font-size: 0.875rem;
    border-radius: 8px;
}

@media (max-width: 768px) {
    /* Mobile: drop the flying cards, show just the organized window (JS reveals rows). */
    .org-sticky { min-height: 0; padding: 4rem 1.25rem; gap: 1.5rem; }
    .org-flow { max-width: 100%; }
    .org-morph { display: none; }
    .org-window { opacity: 1; transform: none; }
    .org-stage { height: 260px; }
    .org-cursor { display: none; }

    /* The Atlas bubbles overhang OUTSIDE the window edges (like desktop), but
       pulling both bubbles fully inside the narrow mobile window instead made
       them collide in the middle (both are visible at once during the demo).
       Keep the diagonal spread -- recap toward the bottom-left corner, tasks
       toward the top-right -- just with a smaller overhang and narrower width
       so each stays within the ~20px margin between the window and the
       viewport edge (org-window is ~372px on a 412px viewport). */
    .org-bubble { width: min(190px, 55vw); }
    .org-bubble-recap { left: -0.75rem; bottom: -0.75rem; }
    .org-bubble-tasks { right: -0.75rem; top: -0.5rem; }
}

/* Reduced motion: show the organized window statically, no motion. */
@media (prefers-reduced-motion: reduce) {
    .org-window { opacity: 1 !important; transform: none !important; }
    .org-morph { opacity: 0 !important; }
    .org-cursor { display: none; }
}

/* ============================================================
   v3 FEATURES: webtoon-flow stacking (replaces the deck)
   Cards flow down in one continuous scroll; each sticks briefly
   and the next slides up overlapping it -- a growing stack of
   notes. Pure CSS sticky, no scroll-math JS.
   ============================================================ */

/* Neutralize the old deck layout */
.screenshots-section {
    position: relative;
    height: auto !important;      /* undo the JS-set tall sticky height */
    margin: 0 auto;
    padding: 6rem 1.5rem 8rem;
}
.horizontal-scroll-wrapper {
    position: static;
    height: auto;
    width: auto;
    display: block;
    overflow: visible;
    padding-top: 0;
    transform: none;
}
.horizontal-scroll-track {
    position: static;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0 auto;
    display: block;             /* vertical flow, not the absolute deck */
    perspective: none;
}

/* Each card: a sticky note in the stack.
   Default visible state is the no-JS fallback; JS seeds opacity:0 + a translateX
   inline (which wins) to slide each card in one-by-one as it enters view, then
   reveals to opacity:1 / translateX(0). Higher specificity than the old deck rule,
   so no !important is needed to beat the deck's opacity:0 / scale(.95). */
.horizontal-scroll-track .screenshot-card {
    position: sticky;
    top: 96px;                  /* base catch point below the nav */
    width: 100%;
    max-width: 760px;
    min-height: 0;
    max-height: none;
    margin: 0 auto 2.5rem;      /* gap before overlap kicks in via nth-child */
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    transition: opacity 0.55s ease-out, transform 0.55s ease-out, box-shadow 0.3s ease;
    box-shadow: 0 8px 30px rgba(17, 24, 39, 0.08);
    z-index: 1;
    will-change: transform, opacity;
}

/* Staircase the catch point + overlap so later cards stack ON TOP */
.horizontal-scroll-track .screenshot-card:nth-child(1) { top: 96px;  z-index: 1; }
.horizontal-scroll-track .screenshot-card:nth-child(2) { top: 108px; z-index: 2; margin-top: -3rem; }
.horizontal-scroll-track .screenshot-card:nth-child(3) { top: 120px; z-index: 3; margin-top: -3rem; }
.horizontal-scroll-track .screenshot-card:nth-child(4) { top: 132px; z-index: 4; margin-top: -3rem; }
.horizontal-scroll-track .screenshot-card:nth-child(5) { top: 144px; z-index: 5; margin-top: -3rem; }
.horizontal-scroll-track .screenshot-card:nth-child(6) { top: 156px; z-index: 6; margin-top: -3rem; }

/* Titles are always shown now (no .active gating) and flow above the card */
.horizontal-scroll-track .screenshot-card::before {
    opacity: 1 !important;
    position: static;
    display: block;
    margin-bottom: 1rem;
    font-size: 1.75rem;
    white-space: normal;
}

/* Hide the deck's scroll-dots -- irrelevant to continuous flow */
.scroll-dots { display: none !important; }

@media (max-width: 768px) {
    .screenshots-section { padding: 4rem 1rem 5rem; }
    .horizontal-scroll-track .screenshot-card {
        top: 72px;
        margin-bottom: 1.5rem;
    }
    .horizontal-scroll-track .screenshot-card:nth-child(n+2) {
        top: 80px;
        margin-top: -2rem;
    }
    .horizontal-scroll-track .screenshot-card::before {
        font-size: 1.4rem;
    }
}

/* Reduced-motion: belt-and-suspenders for the Organize section entrance.
   The JS already skips seeding opacity:0 under reduced-motion; this covers the
   JS-fails edge. Scoped narrowly -- must NOT touch .screenshot-card. */
@media (prefers-reduced-motion: reduce) {
    .knowledge-intro,
    .knowledge-card {
        transition: none !important;
        transition-delay: 0s !important;
    }
}