/* =====================================================================
   ScribeShot — Landing page styles
   Aesthetic: editorial "paper & ink" light theme
   Display: Bricolage Grotesque · Body: Hanken Grotesk · Mono: JetBrains Mono
   ===================================================================== */

/* ----- Design tokens ------------------------------------------------- */
:root {
    /* Neutrals (cool paper) */
    --paper:      #F1F3F6;   /* page base */
    --paper-2:    #F7F9FB;   /* alternating section */
    --card:       #FFFFFF;   /* cards / panels */
    --ink:        #0B1018;   /* primary text, near-black */
    --ink-2:      #3A4456;   /* secondary text */
    --ink-3:      #69748A;   /* muted text */
    --line:       #E2E7EF;   /* hairline border */
    --line-2:     #EDF0F5;   /* softer hairline */

    /* Brand */
    --brand:      #2347E8;   /* confident cobalt */
    --brand-2:    #6189FF;   /* lighter blue */
    --brand-ink:  #16267A;   /* deep blue for accents on light */
    --brand-tint: #ECF0FE;   /* blue wash */
    --emerald:    #0FA46A;   /* purchase / success */
    --emerald-2:  #45D69B;
    --amber:      #F2A53C;   /* stars / sparing highlight */

    /* Effects */
    --shadow-sm:  0 1px 2px rgba(11,16,24,.05), 0 1px 3px rgba(11,16,24,.04);
    --shadow-md:  0 10px 30px -12px rgba(11,16,24,.18), 0 2px 8px rgba(11,16,24,.04);
    --shadow-lg:  0 30px 60px -20px rgba(11,16,24,.25), 0 6px 18px rgba(11,16,24,.06);
    --shadow-brand: 0 16px 40px -14px rgba(35,71,232,.45);
    --shadow-emerald: 0 16px 40px -14px rgba(15,164,106,.45);

    --radius:     18px;
    --radius-sm:  12px;
    --radius-lg:  26px;
    --maxw:       1180px;

    --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
    --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --gradient-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    --gradient-emerald: linear-gradient(135deg, var(--emerald) 0%, var(--emerald-2) 100%);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 12% -5%, rgba(35,71,232,.06), transparent 42%),
        radial-gradient(circle at 95% 0%, rgba(15,164,106,.05), transparent 38%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--brand); color: #fff; }

a { color: inherit; }

/* Shared section heading helpers */
.gradient-text {
    background: linear-gradient(115deg, var(--brand) 0%, var(--brand-2) 60%, var(--emerald) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Eyebrow label injected above key section headings */
.features-content .features-header::before,
.testimonials-content > h2::before,
.pricing-content > h2::before {
    display: block;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 1rem;
    font-weight: 600;
}
.features-content .features-header::before { content: "What you get"; }
.testimonials-content > h2::before { content: "Why ScribeContext"; }
.pricing-content > h2::before { content: "Pricing"; }

/* =====================================================================
   Canonical Layout & Shared Components (Notes, Kanban, Knowledge Base)
   ===================================================================== */

/* Sections & Shell Container */
.section {
    padding: clamp(4rem, 7vw, 6.5rem) 2rem;
    position: relative;
}
.section:nth-of-type(even) {
    background-color: var(--paper-2);
}
.shell {
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
}
.section-header {
    text-align: center;
    max-width: 840px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.section-header h2 {
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    margin-bottom: 0.85rem;
    color: var(--ink);
}
.section-sub {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto;
}
.eyebrow,
.demo-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 0.85rem;
}

/* Responsive Grid System */
.grid {
    display: grid;
    gap: clamp(1.25rem, 2vw, 1.85rem);
}
.grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
    .grid.three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 680px) {
    .grid.two,
    .grid.three {
        grid-template-columns: 1fr;
    }
    .section {
        padding: 3.5rem 1.25rem;
    }
}

/* Cards */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.6rem, 2.5vw, 2.25rem);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(35, 71, 232, 0.28);
}
.card h2 {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.65rem;
}
.card h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 0.5rem;
}
.card p {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Feature Hub Cards */
.feature-hub-card {
    border-radius: var(--radius);
    background: var(--card);
}
.feature-hub-card .icon {
    font-size: 1.7rem;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--brand-tint);
    margin-bottom: 1.25rem;
    border: 1px solid rgba(35, 71, 232, 0.14);
    box-shadow: 0 2px 6px rgba(35, 71, 232, 0.06);
}
.feature-tagline {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 0.65rem;
    letter-spacing: -0.01em;
}
.feature-hub-card p:not(.feature-tagline) {
    margin-bottom: 1.4rem;
    flex-grow: 1;
}
.feature-hub-card .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.45rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover {
    transform: translateY(-2px);
    background: var(--paper-2);
    border-color: #cbd5e1;
    box-shadow: var(--shadow-md);
    color: var(--ink);
    text-decoration: none;
}
.btn:active {
    transform: translateY(0);
}
.btn.small {
    padding: 0.5rem 1.05rem;
    font-size: 0.88rem;
    border-radius: 10px;
}
.btn.brand {
    background: var(--gradient-brand);
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--shadow-brand);
}
.btn.brand:hover {
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: 0 20px 48px -14px rgba(35, 71, 232, 0.6);
}
.actions {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Feature and Pricing Checklist */
ul.check {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
ul.check li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.5;
}
ul.check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--emerald);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.4;
}

/* Pricing Section Specifics */
#pricing .grid.two {
    max-width: 900px;
    margin: 0 auto;
    align-items: stretch;
}
#pricing .card {
    text-align: left;
    display: flex;
    flex-direction: column;
    background: var(--card);
}
#pricing .card:has(.btn.brand) {
    border-color: rgba(35, 71, 232, 0.45);
    box-shadow: 0 12px 36px -12px rgba(35, 71, 232, 0.22), var(--shadow-sm);
    position: relative;
}
#pricing .card:has(.btn.brand)::before {
    content: "RECOMMENDED";
    position: absolute;
    top: -12px;
    right: 24px;
    background: var(--gradient-brand);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(35, 71, 232, 0.35);
}
#pricing .card p[style*="font-size:2rem"] {
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0.35rem 0 0.85rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
#pricing .card small {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: normal;
}
#pricing .card .btn {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

/* Content prose & FAQ */
.content {
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.7;
}
.content h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.35rem);
    letter-spacing: -0.025em;
    margin: 2rem 0 1rem;
    color: var(--ink);
}
.content h2:first-child {
    margin-top: 0;
}
.content h3 {
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    margin: 1.75rem 0 0.45rem;
    color: var(--ink);
}
.content p {
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}
.content ol,
.content ul:not(.check) {
    margin: 0 0 1.5rem 1.5rem;
    color: var(--ink-2);
    line-height: 1.7;
}
.content li {
    margin-bottom: 0.5rem;
}
#faq .content {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(2rem, 4vw, 3rem);
    box-shadow: var(--shadow-sm);
}
#faq h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
}
#faq h3 {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}
#faq h3:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* Page Hero & Subpages */
.page-hero {
    padding: clamp(7.5rem, 11vw, 9.5rem) 2rem clamp(2.5rem, 5vw, 4rem);
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    position: relative;
}
.page-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}
.page-hero .lede {
    font-size: clamp(1.1rem, 1.8vw, 1.28rem);
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 820px;
    margin: 0;
}
.breadcrumbs {
    font-size: 0.88rem;
    color: var(--ink-3);
    margin-bottom: 1.25rem;
}
.breadcrumbs a {
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.2s ease;
}
.breadcrumbs a:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* Index Lists (Learn, Compare, Docs) */
.index-list {
    display: grid;
    gap: 0.9rem;
    width: 100%;
}
.index-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.25rem 1.6rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.index-item:hover {
    transform: translateX(4px);
    border-color: rgba(35, 71, 232, 0.35);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.index-item strong {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 700;
}
.index-item span {
    color: var(--ink-3);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Article components & bridges */
.article-product-bridge {
    margin: 2.5rem 0;
    padding: 1.5rem 1.8rem;
    border-left: 4px solid var(--brand);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--brand-tint);
}
.article-product-bridge h2 {
    margin-top: 0;
    font-size: 1.25rem;
    color: var(--brand-ink);
}
.article-product-bridge p {
    margin-bottom: 0;
    color: var(--ink-2);
}
.article-sources {
    margin: 2.5rem 0;
    padding: 1.3rem 1.6rem;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.article-sources h2 {
    margin-top: 0;
    font-size: 1.15rem;
}
.article-sources ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}
.related-topics {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
}
.related-topics h2 {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
}

/* Changelog */
.changelog-entry {
    padding: 2.2rem 0;
    border-bottom: 1px solid var(--line);
}
.changelog-entry:first-child {
    padding-top: 0;
}
.changelog-entry .meta {
    font-family: var(--font-mono);
    color: var(--brand);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.changelog-entry h2 {
    margin-top: 0;
}

/* Comparison Dimension */
.comparison-dimension {
    margin-bottom: 2.5rem;
}
.comparison-dimension h2 {
    font-size: 1.35rem;
    margin-bottom: 1rem;
}

/* =====================================================================
   Header
   ===================================================================== */
.header {
    background: rgba(247, 249, 251, .72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    padding: .9rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ink);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.logo-image {
    height: 34px;
    width: auto;
    border-radius: 9px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease;
}
.logo:hover .logo-image { transform: translateY(-1px) rotate(-3deg); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
    text-decoration: none;
    color: var(--ink-2);
    font-weight: 500;
    font-size: .94rem;
    position: relative;
    transition: color .2s ease;
}
.nav a:not(.buy-cta)::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 2px;
    background: var(--brand);
    border-radius: 2px;
    transition: width .25s ease;
}
.nav a:not(.buy-cta):hover::after,
.nav a[aria-current="page"]::after { width: 100%; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

.buy-cta {
    background: var(--gradient-emerald);
    color: #04261A !important;
    padding: .6rem 1.3rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: 0 6px 16px -6px rgba(15,164,106,.6);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, filter .25s ease;
}
.buy-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-emerald);
    filter: saturate(1.1);
}

.header-right-mobile { display: none; align-items: center; gap: 1rem; }
.mobile-only-cta { font-size: .82rem; padding: .45rem 1rem; }

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px; height: 18px;
    background: transparent; border: none; cursor: pointer; padding: 0;
    z-index: 1001;
}
.mobile-menu-toggle .bar {
    width: 100%; height: 2px;
    background-color: var(--ink);
    border-radius: 2px;
    transition: all .3s ease;
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 130px 2rem 4rem;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(11,16,24,.045) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, #000 35%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, #000 35%, transparent 75%);
    pointer-events: none;
}

.hero-content {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-text > * { opacity: 0; animation: rise .7s cubic-bezier(.16,1,.3,1) forwards; }
.hero-badge        { animation-delay: .05s; }
.hero h1           { animation-delay: .15s; }
.hero-sub          { animation-delay: .25s; }
.hero-actions      { animation-delay: .35s; }
.hero-micro        { animation-delay: .42s; }
.hero-social-proof { animation-delay: .5s; }

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    border-radius: 999px;
    padding: .45rem 1rem .45rem .95rem;
    margin-bottom: 1.8rem;
}
.hero-badge::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 0 3px rgba(15,164,106,.18);
}
.badge-text {
    font-family: var(--font-mono);
    color: var(--ink-2);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .01em;
}
.badge-link {
    color: var(--brand);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 600;
    transition: color 0.2s ease;
}
.badge-link:hover {
    color: var(--brand-hover, #1d4ed8);
    text-decoration: underline;
}
.badge-separator {
    color: var(--line);
    margin: 0 0.1rem;
}

.hero h1 {
    font-size: clamp(2.6rem, 5.2vw, 4.3rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    margin-bottom: 1.4rem;
}

.hero-sub {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--ink-2);
    margin: 0 0 2rem;
    max-width: 540px;
    line-height: 1.55;
}

.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.1rem; }

/* Centered Hero & Big View Switcher */
.hero.hero--centered {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 92px 1.5rem 4.5rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    position: relative !important;
    overflow: visible !important;
}

.hero-header-centered {
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto 1.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
}

.hero-header-centered .hero-badge {
    margin-bottom: .95rem;
}

.hero-title-centered {
    font-size: clamp(2.2rem, 3.8vw, 3.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
    margin-bottom: .75rem !important;
    text-align: center !important;
    text-wrap: balance !important;
}

.hero-sub--centered {
    font-size: clamp(.98rem, 1.3vw, 1.12rem) !important;
    color: var(--ink-2) !important;
    margin: 0 auto !important;
    max-width: 720px !important;
    line-height: 1.54 !important;
    text-align: center !important;
}

.hero-actions--centered {
    display: flex !important;
    gap: .9rem !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 1.1rem !important;
}

.hero-actions--showcase {
    margin-top: 2rem !important;
    margin-bottom: .75rem !important;
}

.hero-micro--centered {
    font-family: var(--font-mono) !important;
    color: var(--ink-3) !important;
    font-size: .82rem !important;
    letter-spacing: .01em !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.hero-micro--showcase {
    margin-top: 0 !important;
}

/* Switcher Tabs Container */
.hero-switcher-wrapper {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
}

.hero-switcher-tabs {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    padding: 6px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.08) !important;
    margin: 0 auto 2.5rem !important;
    box-sizing: border-box !important;
}

.hero-switcher-tab {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #475569 !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    outline: none !important;
}

.hero-switcher-tab:hover {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.04) !important;
}

.hero-switcher-tab.is-active {
    background: #ffffff !important;
    color: #2347E8 !important;
    border-color: rgba(35, 71, 232, 0.22) !important;
    box-shadow: 0 4px 14px rgba(35, 71, 232, 0.14) !important;
}

.hero-tab-icon {
    font-size: 0.95rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-tab-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    width: 0% !important;
    background: var(--gradient-brand, #2347E8) !important;
    border-radius: 999px !important;
    opacity: 0 !important;
}

.hero-switcher-tab.is-active .hero-tab-progress {
    opacity: 1 !important;
    animation: heroTabProgress 5s linear infinite !important;
}

.hero-switcher-wrapper:hover .hero-tab-progress {
    animation-play-state: paused !important;
}

@keyframes heroTabProgress {
    from { width: 0%; }
    to { width: 100%; }
}

/* Big UI Mac Window Mockup */
.hero-mockup-window {
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
    position: relative !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.hero-mockup-titlebar {
    position: relative !important;
    height: 44px !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
}

.hero-mockup-lights {
    display: flex !important;
    gap: 7px !important;
    align-items: center !important;
}

.hero-mockup-lights span {
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.hero-mockup-lights span:nth-child(1) { background: #ff5f57 !important; }
.hero-mockup-lights span:nth-child(2) { background: #febc2e !important; }
.hero-mockup-lights span:nth-child(3) { background: #28c840 !important; }

.hero-mockup-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--ink-2) !important;
    font-family: var(--font-mono) !important;
}

.hero-mockup-search {
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
    color: var(--ink-3) !important;
    background: #f1f5f9 !important;
    border: 1px solid var(--line) !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hero-mockup-body {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    min-height: 540px !important;
    background: #f1f5f9 !important;
    box-sizing: border-box !important;
}

.hero-mockup-rail {
    background: #ffffff !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding: 18px 8px !important;
    width: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

.hero-mockup-rail-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #64748b !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    outline: none !important;
}

.hero-mockup-rail-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.hero-mockup-rail-btn.is-active {
    background: rgba(35, 71, 232, 0.1) !important;
    color: #2347E8 !important;
}

.hero-mockup-viewport {
    background: #f8fafc !important;
    padding: 16px !important;
    min-height: 540px !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Panel Hiding and Showing */
.hero-view-panel {
    display: none !important;
}

.hero-view-panel.is-active {
    display: block !important;
    animation: heroFadeIn 0.25s ease forwards !important;
    height: 100% !important;
}

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

/* VIEW 1: Notes Layout */
.notes-view-grid {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 16px;
    height: 100%;
    min-height: 480px;
}

.notes-list-pane {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notes-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 11px;
    color: var(--ink-3);
}

.notes-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.note-list-item {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    transition: all .2s ease;
}

.note-list-item.is-active {
    background: #eff6ff;
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.note-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.note-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-md { background: #dbeafe; color: #1d4ed8; }
.badge-link { background: #dcfce7; color: #15803d; }
.badge-img { background: #ffedd5; color: #c2410c; }
.badge-draw { background: #f3e8ff; color: #7e22ce; }

.note-time {
    font-size: 10px;
    color: var(--ink-3);
}

.note-list-item strong {
    font-size: 12px;
    display: block;
    color: var(--ink);
    margin-bottom: 3px;
}

.note-list-item p {
    font-size: 10.5px;
    color: var(--ink-2);
    line-height: 1.4;
    margin: 0 0 6px;
}

.note-tags {
    display: flex;
    gap: 5px;
}

.note-tags span, .chip {
    font-size: 9.5px;
    font-family: var(--font-mono);
    color: var(--ink-2);
    background: rgba(15, 23, 42, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.note-detail-pane {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.note-detail-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding-bottom: 14px;
}

.note-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
}

.note-board-link {
    color: var(--brand);
    font-weight: 500;
}

.note-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
    line-height: 1.25;
}

.note-tags-row {
    display: flex;
    gap: 6px;
}

.note-detail-content {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.6;
}

.note-detail-content h3 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    margin: 14px 0 6px;
}

.note-quote-box {
    display: flex;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0;
    color: #166534;
    font-size: 11.5px;
}

.note-quote-icon {
    font-size: 16px;
    color: #15803d;
}

/* VIEW 2: Kanban Layout */
.kanban-view-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.kanban-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 10px 16px;
}

.kanban-board-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.kanban-board-stats {
    font-size: 11px;
    color: var(--ink-3);
    margin-left: 10px;
}

.kanban-board-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-filter-pill, .kanban-add-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
}

.kanban-filter-pill {
    background: #f1f5f9;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--ink-2);
}

.kanban-add-btn {
    background: var(--brand);
    color: #fff;
}

.kanban-columns-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.kanban-column {
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.kanban-col-title-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
}

.kanban-col-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-amber { background: #f59e0b; }
.dot-blue { background: #3b82f6; }
.dot-green { background: #10b981; }

.kanban-col-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}

.kanban-col-count {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--ink-3);
}

.kanban-cards-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.kanban-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    padding: 11px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.kanban-card--active {
    border-color: #93c5fd;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.08);
}

.kanban-card-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.kanban-verified-badge {
    font-size: 9px;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    padding: 1px 5px;
    border-radius: 4px;
}

.kanban-card-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.kanban-card-snippet {
    font-size: 10.5px;
    color: var(--ink-2);
    line-height: 1.45;
    margin: 0 0 8px;
}

.kanban-sketch-preview {
    background: #faf5ff;
    border: 1px dashed #d8b4fe;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    color: #6b21a8;
}

.sketch-node {
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e9d5ff;
}

.kanban-ocr-pill {
    background: #fff7ed;
    border: 1px solid #ffedd5;
    color: #c2410c;
    font-size: 9.5px;
    padding: 4px 7px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.kanban-card-source {
    font-size: 9.5px;
    color: var(--ink-3);
    font-family: var(--font-mono);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    padding-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.kanban-card-source span {
    color: var(--brand);
}

.kanban-footer-callout {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 11.5px;
    color: #1e40af;
}

/* VIEW 3: Knowledge Ask Layout */
.ask-view-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.ask-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 10px 16px;
}

.ask-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ask-icon-bubble {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 14px;
}

.ask-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.ask-subtitle {
    font-size: 11px;
    color: var(--ink-3);
}

.ask-engine-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    color: #166534;
}

.engine-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);
}

.ask-chat-stream {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.ask-message {
    display: flex;
    gap: 10px;
    max-width: 860px;
}

.ask-message--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ask-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: var(--ink-2);
    flex-shrink: 0;
}

.ask-avatar--bot {
    background: #eff6ff;
}

.ask-bubble {
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.55;
}

.ask-bubble--user {
    background: var(--brand);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.ask-bubble--assistant {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--ink);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ask-bullet-list {
    margin: 8px 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--ink-2);
}

.ask-citations-box {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.ask-citations-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-3);
    margin-bottom: 8px;
}

.ask-citations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ask-citation-card {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    padding: 9px 11px;
}

.citation-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.citation-score {
    font-size: 9.5px;
    font-weight: 600;
    color: #15803d;
}

.citation-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
}

.citation-quote {
    font-size: 10px;
    color: var(--ink-2);
    font-style: italic;
    margin: 0 0 6px;
    line-height: 1.4;
}

.citation-link {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--brand);
}

.ask-composer-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ask-input-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.ask-input-box i {
    color: var(--brand);
}

.ask-input-box input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--ink-2);
    outline: none;
}

.ask-submit-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 10px;
}

.hero-spotlight-pill {
    background: #111827 !important;
    color: #f8fafc !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
    font-family: var(--font-mono) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .notes-view-grid {
        grid-template-columns: 1fr !important;
    }
    .notes-list-pane {
        display: none !important;
    }
    .kanban-columns-container {
        grid-template-columns: 1fr !important;
    }
    .ask-citations-grid {
        grid-template-columns: 1fr !important;
    }
    .hero-switcher-tab {
        padding: 8px 14px !important;
        font-size: 0.84rem !important;
    }
}

@media (max-width: 640px) {
    .hero.hero--centered {
        padding: 110px 1rem 3.5rem !important;
    }
    .hero-switcher-tabs {
        flex-wrap: wrap !important;
        border-radius: 16px !important;
        padding: 4px !important;
        margin-bottom: 1.5rem !important;
    }
    .hero-switcher-tab {
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
    }
    .hero-mockup-body {
        grid-template-columns: 1fr !important;
    }
    .hero-mockup-rail {
        display: none !important;
    }
    .hero-mockup-viewport {
        padding: 10px !important;
    }
    .note-detail-pane {
        padding: 14px !important;
    }
    .kanban-view-shell, .ask-view-shell {
        gap: 8px !important;
    }
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .95rem 1.7rem;
    border-radius: 13px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background .25s ease;
}
.cta-button.primary {
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: var(--shadow-brand);
}
.cta-button.primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -16px rgba(35,71,232,.6); }
.cta-button.primary.alt {
    background: var(--gradient-emerald);
    color: #04261A;
    box-shadow: var(--shadow-emerald);
}
.cta-button.primary.alt:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -16px rgba(15,164,106,.6); }
.cta-button.secondary {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
}
.cta-button.secondary:hover { transform: translateY(-2px); background: var(--paper-2); border-color: #d6dde7; }

.hero-micro {
    font-family: var(--font-mono);
    color: var(--ink-3);
    font-size: .82rem;
    letter-spacing: .01em;
    margin: 0 0 1.8rem;
}

/* Hero Image Play Overlay */
.hero-video-trigger {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-lg, 24px);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.hero-video-trigger:hover {
    transform: translateY(-4px) scale(1.008);
    box-shadow: 0 24px 48px -12px rgba(11,16,24,.22);
}
.hero-video-trigger:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 4px;
}
.hero-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background: rgba(11, 16, 24, 0.22);
    border-radius: inherit;
    transition: background .3s ease;
    z-index: 5;
    pointer-events: none;
}
.hero-video-trigger:hover .hero-play-overlay {
    background: rgba(11, 16, 24, 0.32);
}
.hero-play-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    padding-left: 5px;
    box-shadow: 0 14px 40px rgba(11,16,24,.45), 0 0 0 8px rgba(255,255,255,.95);
    position: relative;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.hero-play-btn::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: playPulse 2.4s infinite cubic-bezier(.215,.61,.355,1);
    pointer-events: none;
}
@keyframes playPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.35); opacity: 0.15; }
    100% { transform: scale(1.6); opacity: 0; }
}
.hero-video-trigger:hover .hero-play-btn {
    transform: scale(1.12);
    box-shadow: 0 16px 40px rgba(35,71,232,.7), 0 0 0 12px rgba(255,255,255,.3);
}
.hero-play-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: rgba(11, 16, 24, 0.78);
    color: #ffffff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: .5rem 1.1rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform .25s ease, background .25s ease;
}
.hero-video-trigger:hover .hero-play-badge {
    transform: translateY(-2px);
    background: rgba(11, 16, 24, 0.92);
    border-color: rgba(255, 255, 255, 0.4);
}
.play-badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #45D69B;
    box-shadow: 0 0 0 3px rgba(69,214,155,.35);
    animation: badgeDotPulse 1.8s infinite;
}
@keyframes badgeDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* Video Demo Section */
.video-demo-section {
    padding: clamp(4rem, 7vw, 6.5rem) 2rem;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.video-demo-container {
    max-width: var(--maxw);
    margin: 0 auto;
}
.video-demo-container .section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.video-demo-container .demo-eyebrow {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: .8rem;
    font-weight: 600;
}
.video-demo-container h2 {
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    line-height: 1.12;
    font-weight: 800;
    margin-bottom: .95rem;
    letter-spacing: -.03em;
}
.video-demo-container .section-sub {
    color: var(--ink-2);
    font-size: 1.12rem;
    max-width: 640px;
    margin: 0 auto;
}
.video-demo-wrapper {
    max-width: 960px;
    margin: 0 auto;
}
.video-demo-frame {
    background: var(--card);
    border-radius: var(--radius-lg, 24px);
    border: 1px solid var(--line);
    padding: 12px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.video-responsive-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: calc(var(--radius-lg, 24px) - 8px);
    overflow: hidden;
    background: #000;
}
.video-embed-player,
.video-modal-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Video Modal Popup */
.video-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.16,1,.3,1), visibility .3s cubic-bezier(.16,1,.3,1);
}
.video-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 13, 20, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.video-modal-box {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1040px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.video-modal-overlay.is-open .video-modal-box {
    transform: scale(1) translateY(0);
}
.video-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background .2s ease, transform .2s ease;
}
.video-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.08);
}
.video-modal-content {
    width: 100%;
    background: #000;
}


/* =====================================================================
   How It Works Section
   ===================================================================== */
.how-it-works-section {
    background: var(--paper-2);
    padding: clamp(3.25rem, 6vw, 5.5rem) 2rem;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.how-it-works-content {
    max-width: var(--maxw);
    margin: 0 auto;
}
.how-it-works-content .section-header {
    text-align: center;
    margin-bottom: 3rem;
}
.how-it-works-content h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.14;
    font-weight: 800;
    margin-bottom: .85rem;
    letter-spacing: -.03em;
}
.how-it-works-content .section-sub {
    color: var(--ink-2);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.steps-flow-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
    position: relative;
}

/* Connecting Line */
.flow-line {
    position: absolute;
    top: 35px; /* Centers with the 70px icon-box */
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(35,71,232,0.05) 0%, 
        rgba(35,71,232,0.4) 50%, 
        rgba(35,71,232,0.05) 100%
    );
    z-index: 1;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.flow-icon-box {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--brand);
    margin-bottom: 1.8rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.flow-step:hover .flow-icon-box {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(35,71,232,0.2);
    border-color: var(--brand-2);
}

.flow-icon-ai {
    color: var(--emerald);
}
.flow-step:hover .flow-icon-ai {
    box-shadow: 0 12px 24px -8px rgba(15,164,106,0.2);
    border-color: var(--emerald-2);
}

.flow-icon-camera {
    color: var(--amber);
}
.flow-step:hover .flow-icon-camera {
    box-shadow: 0 12px 24px -8px rgba(242,165,60,0.2);
    border-color: var(--amber);
}

.flow-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.flow-icon-ai .flow-badge {
    background: var(--gradient-emerald);
}

.flow-icon-camera .flow-badge {
    background: linear-gradient(135deg, var(--amber) 0%, #ffc069 100%);
}

.flow-step h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.8rem;
    letter-spacing: -.01em;
}

.flow-step p {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 280px;
    margin: 0;
}

/* Hero visual */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-image-container { position: relative; max-width: 100%; }
.hero-image {
    width: 100%;
    max-width: 800px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    background: var(--card);
}

.floating-elements { position: absolute; inset: 0; pointer-events: none; }
.floating-card {
    position: absolute;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    display: flex; align-items: center; gap: .7rem;
    box-shadow: var(--shadow-md);
    animation: float 4s ease-in-out infinite;
}
.floating-card.card-1 { top: 8%;  right: -7%;  animation-delay: 0s; }
.floating-card.card-2 { bottom: 6%; left: -7%;  animation-delay: 1.3s; }
.floating-card.card-3 { top: 46%;  right: -5%;  animation-delay: 2.4s; }
.card-icon { font-size: 1.35rem; }
.card-text { color: var(--ink); font-size: .85rem; font-weight: 600; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* =====================================================================
   Section scaffolding
   ===================================================================== */
section[id] { scroll-margin-top: 96px; }

/* Section rhythm: one shared vertical scale so no band feels emptier than
   its neighbours. Tightened from 4–7rem, which left dead space above every
   heading on desktop. */
.features-section, .testimonials-section, .privacy-section,
.faq-section, .pricing-section { padding: clamp(3.25rem, 6vw, 5.5rem) 2rem; }

.testimonials-section { background: var(--paper); }
.privacy-section   { background: var(--paper-2); }
.faq-section       { background: var(--paper); }
.pricing-section   { background: var(--paper-2); }

.features-content, .testimonials-content, .pricing-content {
    max-width: var(--maxw);
    margin: 0 auto;
}

/* =====================================================================
   Features
   ===================================================================== */
.features-content { display: flex; flex-direction: column; gap: 3.5rem; }
.features-header { text-align: center; }
.features-section h2,
.testimonials-section h2,
.pricing-section h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 0;
}
.testimonials-section h2, .pricing-section h2 { text-align: center; }
.testimonials-section h2 { margin-bottom: 2.75rem; max-width: 880px; margin-left: auto; margin-right: auto; }
.pricing-section h2 { margin-bottom: 2.75rem; }

.features-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.feature-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: #d3dcec;
    box-shadow: var(--shadow-md);
}
.feature-card:hover .feature-image { transform: scale(1.04); }

.feature-content { padding: 1.8rem 1.8rem 1.4rem; flex-grow: 1; display: flex; flex-direction: column; }
.feature-card h3 {
    font-size: 1.32rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 .7rem;
    line-height: 1.25;
}
.feature-card p { color: var(--ink-2); font-size: .97rem; line-height: 1.6; margin: 0; }

.feature-image-container {
    overflow: hidden;
    border-top: 1px solid var(--line-2);
    background: var(--paper-2);
    margin-top: auto;
}
.feature-image {
    width: 100%;
    display: block;
    transition: transform .6s cubic-bezier(.16,1,.3,1);
}

/* =====================================================================
   Why ScribeShot (Founder Note & Value Props)
   ===================================================================== */
.why-scribeshot-container,
.why-scribecontext-container {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
}
.founder-note-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.2rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.founder-note-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-brand);
}
.founder-note-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 1.2rem;
}
.founder-note-card p {
    color: var(--ink-2);
    font-size: .98rem;
    line-height: 1.65;
    margin: 0 0 1.2rem;
}
.founder-note-card p:last-of-type {
    margin-bottom: 2rem;
}
.founder-signature {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    margin-top: auto;
}
.founder-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.founder-info {
    display: flex;
    flex-direction: column;
}
.founder-name {
    font-weight: 700;
    color: var(--ink);
    font-size: .98rem;
}
.founder-title {
    font-size: .82rem;
    color: var(--ink-3);
}

.value-props-list {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}
.value-prop-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.value-prop-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: #d3dcec;
}
.value-prop-icon {
    font-size: 2.2rem;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}
.value-prop-blue { color: var(--brand); }
.value-prop-green { color: var(--emerald); }
.value-prop-amber { color: var(--amber); }
.value-prop-content h4 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 .4rem;
}
.value-prop-content p {
    color: var(--ink-2);
    font-size: .94rem;
    line-height: 1.55;
    margin: 0;
}

/* =====================================================================
   Privacy band
   ===================================================================== */
.privacy-content {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(135deg, var(--ink) 0%, #161E2E 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 5vw, 4rem);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.privacy-content::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(35,71,232,.35), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(15,164,106,.3), transparent 45%);
    pointer-events: none;
}
.privacy-content > * { position: relative; z-index: 1; }
.privacy-content h2 {
    color: #fff;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin-bottom: .9rem;
}
.privacy-content h2 .gradient-text {
    background: linear-gradient(115deg, #8FB0FF, #5BE0A8);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.privacy-content p { color: rgba(255,255,255,.78); font-size: 1.08rem; max-width: 620px; margin: 0 auto; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-content { max-width: var(--maxw); margin: 0 auto; }
.faq-content > h2 {
    text-align: center;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.14;
    margin-bottom: 2.25rem;
}
.faq-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.2rem;
}
.faq-item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.faq-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: #d3dcec; }
.faq-item h3 {
    color: var(--ink);
    font-size: 1.05rem;
    margin: 0 0 .6rem;
    display: flex;
    gap: .55rem;
    align-items: baseline;
    line-height: 1.3;
}
.faq-item h3::before {
    content: 'Q.';
    font-family: var(--font-mono);
    color: var(--brand);
    font-weight: 700;
    font-size: .9rem;
}
.faq-item p { color: var(--ink-2); margin: 0; font-size: .96rem; line-height: 1.6; }

/* =====================================================================
   Pricing
   ===================================================================== */
.pricing-cards {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 3.5rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.pricing-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3rem);
    position: relative;
    box-shadow: var(--shadow-md);
    transition: transform .3s ease, box-shadow .3s ease;
    max-width: 440px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pricing-card.free {
    border: 1px solid var(--line);
}
.pricing-card.single {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(135deg, var(--brand), var(--brand-2) 50%, var(--emerald)) border-box;
}

.free-btn {
    background: var(--paper-2);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.free-btn:hover {
    background: var(--line-2);
    border-color: #d6dde7;
    transform: translateY(-2px);
}

.pricing-badge {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-brand);
    color: #fff;
    padding: .45rem 1.4rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: var(--shadow-brand);
}

.pricing-header { text-align: center; margin-bottom: 1.4rem; }
.pricing-header h3 {
    color: var(--ink);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.pricing-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    margin: 0.8rem 0;
}
.price-amount {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 3.8rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}
.price-period {
    color: var(--ink-2);
    font-size: 1rem;
    font-weight: 600;
}
.price-tax {
    color: var(--ink-2);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.1rem;
}

.coupon-note {
    text-align: center;
    background: var(--brand-tint);
    color: var(--brand-ink);
    border: 1px dashed rgba(35,71,232,.35);
    border-radius: 999px;
    padding: .55rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
    letter-spacing: .01em;
}
.coupon-note .code,
.activation-info .code {
    font-family: var(--font-mono);
    background: var(--brand);
    color: #fff;
    padding: .1rem .5rem;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: .03em;
}

.pricing-features { margin-bottom: 2rem; }
.feature-item { display: flex; align-items: center; gap: .85rem; margin-bottom: .85rem; }
.feature-item i {
    color: var(--emerald);
    background: rgba(15,164,106,.12);
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem;
    flex-shrink: 0;
}
.feature-item span { color: var(--ink-2); font-size: 1rem; }

/* Limitation row: an explicit "not included" line on the free plan. */
.feature-item.muted i {
    color: var(--ink-3);
    background: rgba(105,116,138,.12);
}
.feature-item.muted span { color: var(--ink-3); }

.pricing-button {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: 1.05rem 2rem;
    border-radius: 13px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.single-btn { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-brand); }
.single-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -16px rgba(35,71,232,.6); }

/* ----- Download / activation ---------------------------------------- */
.download-section {
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}
.download-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0; }
.download-btn {
    background: var(--ink);
    color: #fff;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 13px;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: .6rem;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    box-shadow: var(--shadow-sm);
}
.download-btn i { font-size: 1.2rem; }
.download-btn:hover { transform: translateY(-2px); background: #161E2E; box-shadow: var(--shadow-md); }
.download-btn.disabled {
    background: var(--paper-2);
    color: var(--ink-3);
    border: 1px dashed var(--line);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.75;
}
.download-btn.disabled:hover {
    transform: none;
    background: var(--paper-2);
    box-shadow: none;
}

.activation-info {
    margin-top: 1.8rem;
    color: var(--ink-2);
    text-align: left;
    max-width: 480px;
    margin-left: auto; margin-right: auto;
    font-size: 0.95rem;
    line-height: 1.6;
}
.activation-info ol { margin: 0; padding-left: 1.25rem; }
.activation-info li { margin-bottom: .4rem; color: var(--ink-2); }

.coupon-timer {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--brand-tint);
    border: 1px solid rgba(35,71,232,.18);
    color: var(--brand-ink);
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-weight: 600;
    font-size: .9rem;
}
.coupon-timer .label { color: var(--ink-2); }
#coupon-countdown { font-family: var(--font-mono); color: var(--brand); }

.version-info {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.8rem;
    margin-top: 2rem;
    text-align: left;
}
.version-info h4 { color: var(--ink); margin-bottom: 1rem; font-size: 1.05rem; }
.changelog { max-width: 600px; margin: 0 auto; }
.changelog h5 {
    color: var(--brand-ink);
    margin-bottom: .8rem;
    font-size: .8rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.changelog ul { list-style: none; padding: 0; }
.changelog li {
    padding: .6rem 0 .6rem 1.4rem;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink-2);
    position: relative;
    font-size: .95rem;
}
.changelog li::before {
    content: '›';
    position: absolute; left: 0;
    color: var(--brand);
    font-weight: 700;
}
.changelog li:last-child { border-bottom: none; }

/* =====================================================================
   Footer
   ===================================================================== */
/* Deep navy at the top easing into brand cobalt at the bottom, so the giant
   wordmark sits on the brightest part of the gradient. overflow:hidden crops the
   wordmark's lower edge deliberately. */
.footer {
    background: linear-gradient(180deg, #0B1018 0%, var(--brand-ink) 42%, var(--brand) 100%);
    color: rgba(255,255,255,.72);
    padding: 4.5rem 2rem 0;
    overflow: hidden;
}
.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr);
    gap: 3rem;
    align-items: start;
}

/* ----- Brand column ------------------------------------------------- */
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    letter-spacing: -.02em;
}
.footer-logo img { border-radius: 10px; }
.footer-brand-group { margin-top: 2.25rem; }

/* ----- Link columns ------------------------------------------------- */
.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.5rem;
}
.footer-col-title {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    margin: 0 0 1.15rem;
    letter-spacing: .01em;
}
.footer-col ul,
.footer-social-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-col li { margin-bottom: .85rem; }
.footer-col a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: color .18s ease;
}
.footer-col a:hover,
.footer-col a:focus-visible { color: var(--emerald-2); text-decoration: underline; }

/* ----- Community icons ---------------------------------------------- */
.footer-social-list { display: flex; gap: .85rem; flex-wrap: wrap; }
.footer-social-list a {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    color: #fff;
    font-size: 1.2rem;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.footer-social-list a:hover,
.footer-social-list a:focus-visible {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.4);
    transform: translateY(-2px);
}

/* ----- Legal line --------------------------------------------------- */
.footer-legal {
    max-width: var(--maxw);
    margin: 3.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: .87rem;
    color: rgba(255,255,255,.62);
}
.footer-legal p { margin: 0; }

/* ----- Oversized wordmark ------------------------------------------- */
.footer-wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    /* ~10 glyphs. Measured: at this size and tracking the glyphs span ~96% of the
       viewport from 480px up, and 99% at 320px — tuned as a pair, so changing the
       tracking means re-checking the vw figure. */
    font-size: clamp(2.75rem, 22.5vw, 34rem);
    line-height: .82;
    /* Tight tracking is the point of the treatment — letters nearly touching. */
    letter-spacing: -.07em;
    color: #C9D5FF;
    text-align: center;
    margin: 2.25rem -.02em -.14em;
    user-select: none;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .footer-inner { grid-template-columns: 1fr; gap: 2.75rem; }
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand-group { margin-top: 1.75rem; }
}
@media (max-width: 520px) {
    .footer { padding: 3rem 1.25rem 0; }
    .footer-cols { grid-template-columns: 1fr; gap: 1.75rem; }
    .footer-legal { margin-top: 2.5rem; }
}

/* =====================================================================
   Accessibility helpers
   ===================================================================== */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 8px;
}
.skip-link {
    position: absolute;
    top: -48px; left: 1rem;
    background: var(--ink);
    color: #fff;
    padding: .5rem .85rem;
    border-radius: 8px;
    z-index: 1001;
    transition: top .2s ease;
    text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1024px) {
    .features-carousel { grid-template-columns: repeat(2, 1fr); }
    .why-scribeshot-container,
    .why-scribecontext-container { grid-template-columns: 1fr; gap: 2rem; }
    .steps-grid { grid-template-columns: 1fr; gap: 2rem; }
    .hero-content { gap: 3rem; }
}

@media (max-width: 768px) {
    .header { padding: .75rem 1rem; }
    .logo { font-size: 1.2rem; }

    .hero { padding: 104px 1.25rem 3rem; min-height: auto; }
    .hero::before { -webkit-mask-image: none; mask-image: none; opacity: .5; }
    .hero-content { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
    .hero-badge { margin-left: auto; margin-right: auto; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-actions, .hero-social-proof { justify-content: center; }
    .floating-card { display: none; }

    .features-carousel { grid-template-columns: 1fr; }

    .download-buttons { flex-direction: column; align-items: center; }

    /* How it works — stack steps vertically on mobile */
    .how-it-works-section { padding: 4rem 1.25rem; }
    .steps-flow-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .flow-line { display: none; }
    .flow-step p { max-width: 100%; }

    /* Mobile nav drawer */
    .nav {
        position: fixed;
        top: 0; right: -100%;
        width: 280px; height: 100vh;
        background: rgba(247,249,251,.98);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-left: 1px solid var(--line);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 6rem 2rem 2rem;
        gap: 1.6rem;
        transition: right .4s cubic-bezier(.16,1,.3,1);
        z-index: 999;
        box-shadow: -20px 0 50px -20px rgba(11,16,24,.2);
    }
    .nav.is-active { right: 0; }
    .nav a {
        font-size: 1.1rem;
        width: 100%;
        padding-bottom: .6rem;
        border-bottom: 1px solid var(--line-2);
    }
    .nav a:not(.buy-cta)::after { display: none; }
    .nav .buy-cta { display: none; }

    /* Display type set for desktop leaves loose, airy lines once a heading wraps
       to three or four lines on a phone. */
    .testimonials-section h2,
    .pricing-section h2,
    .privacy-content h2,
    .faq-content > h2,
    .how-it-works-content h2,
    .showcase-container h2 { line-height: 1.15; }
    .testimonials-section h2 { margin-bottom: 2rem; }
    .pricing-section h2 { margin-bottom: 2rem; }
    .faq-content > h2 { margin-bottom: 1.75rem; }
    .how-it-works-content .section-header { margin-bottom: 2.25rem; }

    .header-right-mobile { display: flex; }
    .mobile-menu-toggle { display: flex; }
    .mobile-menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .mobile-menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* =====================================================================
   Scroll reveal
   Two composited properties (opacity + translate), one shared
   IntersectionObserver in main.js, no per-frame JS. Gated on .js so a reader
   without scripting — or a crawler that does not run it — sees everything.
   ===================================================================== */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}
/* Children of a stagger container come in one after another, capped so a long
   list never leaves the reader waiting. */
.js .reveal-stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }
.js .reveal-stagger.is-visible > *:nth-child(n+5) { transition-delay: .3s; }
/* The stagger container itself only fades; its children carry the movement. */
.js .reveal.reveal-stagger { transform: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .hero-text > * { opacity: 1; }
    /* Belt and braces: never leave content stuck at opacity 0 if the observer
       has not fired yet. */
    .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   App Showcase / UI Slider Section
   ===================================================================== */
.showcase-section {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
    background: var(--paper);
    overflow: hidden;
}
.showcase-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
}
.showcase-container .section-header {
    text-align: center;
    margin-bottom: 2.75rem;
}
.showcase-container h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.14;
    font-weight: 800;
    margin-bottom: .85rem;
    letter-spacing: -.03em;
}
.showcase-container .section-sub {
    color: var(--ink-2);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}


/* Tabs */
.showcase-tabs-wrapper {
    max-width: min(96%, 1060px);
    margin: 0 auto 2.25rem;
    background: rgba(11, 16, 24, 0.04);
    border: 1px solid var(--line-2, #eaeaea);
    border-radius: 999px;
    padding: 0.35rem;
    overflow: hidden;
    position: relative;
}
/* The row scrolls when the tabs do not fit. Fading the trailing edge is the
   only affordance that says so on a phone, where there is no scrollbar. */
.showcase-tabs-wrapper.is-overflowing::after {
    content: "";
    position: absolute;
    top: 1px; right: 1px; bottom: 1px;
    width: 42px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, rgba(238, 240, 244, 0), rgba(238, 240, 244, .95));
    pointer-events: none;
}
.showcase-tabs-wrapper.is-overflowing.at-end::after { opacity: 0; }

.showcase-tabs-container {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-radius: 999px;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
}

.showcase-tabs-container::-webkit-scrollbar {
    display: none;
}

.showcase-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.1rem;
    margin: 0 auto;
    flex-shrink: 0;
}
.showcase-tab {
    background: transparent;
    border: none;
    padding: 0.6rem 1.4rem;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-2, #666);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.showcase-tab:hover {
    color: var(--ink, #111);
}
.showcase-tab.active {
    background: var(--active-accent, #6366f1);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Viewport and Track */
.showcase-slider-viewport {
    position: relative;
    width: 100%;
    overflow: visible;
    margin-bottom: 2rem;
}
.showcase-slider-track {
    display: flex;
    gap: 2.5rem;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
/* While a finger is down the track follows it 1:1 — the eased transition would
   otherwise lag behind the drag and feel broken. */
.showcase-slider-track.is-dragging {
    transition: none;
    cursor: grabbing;
}
.showcase-slider-track.is-dragging .showcase-slide { transition: none; }
.showcase-slider-track.is-dragging,
.showcase-slider-track.is-dragging * { user-select: none; -webkit-user-select: none; }

/* Slide Card */
.showcase-slide {
    flex: 0 0 960px;
    max-width: 85vw;
    background: var(--bg-color, #eef2ff);
    border-radius: var(--radius-lg, 24px);
    border: 1px solid rgba(11, 16, 24, 0.06);
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(11, 16, 24, 0.04);
    opacity: 0.45;
    transform: scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.showcase-slide.active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 20px 40px -15px rgba(11, 16, 24, 0.08), 0 0 0 1px rgba(11, 16, 24, 0.02);
}
.showcase-slide-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    min-height: 480px;
    /* Cards are stretched to the tallest slide by the flex track. Filling that
       height here keeps the shorter slides' content optically centred instead
       of sitting high with a band of empty card underneath. */
    height: 100%;
}

/* Text side */
.showcase-slide-text {
    padding: 3.5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.showcase-slide-text h3 {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--ink, #111);
    margin: 0 0 1.2rem;
    letter-spacing: -0.02em;
}
.showcase-slide-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-2, #444);
    margin: 0 0 2rem;
}
.showcase-slide-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.showcase-slide-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-size: 0.95rem;
    font-weight: 550;
    color: var(--ink, #111);
}
.showcase-slide-list i {
    color: var(--accent-color, #6366f1);
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

/* Visual side.
   No divider and no panel tint here: the image already carries its own frame,
   so a full-height rule down the middle of the card just read as a stray
   vertical line running past the bottom of the artwork. */
.showcase-slide-visual {
    position: relative;
    height: 100%;
    min-height: 380px;
    background: transparent;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2.5rem 2rem 1rem;
}
.showcase-slide-visual img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 430px;
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    border: 1px solid rgba(11, 16, 24, 0.08);
    object-fit: contain;
    transition: transform 0.5s ease;
}
.showcase-slide.active .showcase-slide-visual img {
    transform: translateY(-5px);
}
.showcase-slide-visual.no-card-frame {
    background: transparent !important;
    border-left: none !important;
    padding: 1rem !important;
}
.showcase-slide-visual.no-card-frame img {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    max-width: 100% !important;
}

/* Bottom Nav bar */
.showcase-slider-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.showcase-progress-container {
    flex-grow: 1;
    max-width: 180px;
    height: 3px;
    background: rgba(11, 16, 24, 0.08);
    border-radius: 100px;
    overflow: hidden;
}
.showcase-progress-bar {
    height: 100%;
    width: 16.66%;
    background: var(--active-accent, #6366f1);
    border-radius: 100px;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
/* Dots are the phone-sized position indicator; the thin progress bar is
   invisible at that width, so the two swap over at the mobile breakpoint. */
.showcase-dots { display: none; gap: .45rem; align-items: center; }
.showcase-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(11, 16, 24, 0.18);
    transition: width .3s cubic-bezier(.16,1,.3,1), background-color .3s ease;
}
.showcase-dot.active {
    width: 22px;
    border-radius: 100px;
    background: var(--active-accent, #6366f1);
}
.showcase-arrows {
    display: flex;
    gap: 0.8rem;
    z-index: 10;
}
.showcase-arrow-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-2, #eaeaea);
    background: #fff;
    color: var(--ink-2, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    box-shadow: var(--shadow-sm);
}
.showcase-arrow-btn:hover {
    background: var(--brand, #3b82f6);
    color: #fff;
    border-color: var(--brand, #3b82f6);
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .showcase-slide {
        flex: 0 0 780px;
    }
    .showcase-slide-content {
        min-height: 420px;
    }
    .showcase-slide-text {
        padding: 2.5rem 2rem;
    }
    .showcase-slide-text h3 {
        font-size: 1.6rem;
    }
}
@media (max-width: 768px) {
    .showcase-container { padding: 0 1.25rem; }
    .showcase-container .section-header { margin-bottom: 1.75rem; }
    .showcase-container .section-sub { font-size: 1rem; }

    /* A phone shows one card at a time, so the peek gap and the de-emphasis of
       neighbouring slides only add travel distance and flicker. */
    .showcase-slider-track { gap: 1rem; }
    .showcase-slide {
        flex: 0 0 100%;
        max-width: 100%;
        opacity: 1;
        transform: none;
    }
    .showcase-slide.active { transform: none; }
    .showcase-slide-content {
        grid-template-columns: 1fr;
        /* Image row hugs the picture; the text row absorbs whatever height the
           tallest slide forces on this card. */
        grid-template-rows: auto 1fr;
        min-height: auto;
    }
    /* Image first: it is what someone recognises while swiping. */
    .showcase-slide-visual { order: -1; }
    .showcase-slide-text {
        padding: 1.5rem 1.35rem 1.75rem;
    }
    .showcase-slide-text h3 { font-size: 1.3rem; margin-bottom: .6rem; }
    .showcase-slide-desc { font-size: .95rem; margin-bottom: 1.1rem; }
    .showcase-slide-list { gap: .65rem; }
    .showcase-slide-list li { font-size: .9rem; }
    .showcase-slide-visual {
        min-height: 0;
        border-left: none;
        border-top: none;
        padding: 1.25rem 1.25rem .25rem;
    }
    .showcase-slide-visual img { max-height: 260px; }
    .showcase-slide.active .showcase-slide-visual img { transform: none; }

    .showcase-slider-viewport {
        position: relative;
        overflow: hidden;
        margin-bottom: 1.25rem;
        /* Vertical scrolling stays with the page; horizontal is the carousel's. */
        touch-action: pan-y;
    }

    /* Controls sit below the card instead of floating over the bullet list. */
    .showcase-slider-nav {
        display: flex;
        justify-content: center;
        gap: 1rem;
        padding: 0;
    }
    .showcase-progress-container { display: none; }
    .showcase-dots { display: flex; }
    .showcase-arrows { gap: .6rem; }
    .showcase-arrow-btn {
        width: 40px;
        height: 40px;
        background: #fff;
        border: 1px solid rgba(11, 16, 24, 0.12);
        color: var(--ink, #111);
        box-shadow: var(--shadow-sm);
    }
    .showcase-arrow-btn:active {
        transform: scale(0.92);
        background: var(--brand, #3b82f6);
        color: #fff;
    }
}