/* Generated by finalize-recall-inspired-site.mjs; edit the source styles. */
/* =====================================================================
   Self-hosted web fonts (latin + latin-ext only).
   Generated by scripts/fetch-webfonts.mjs — do not edit by hand.
   Bricolage Grotesque, Hanken Grotesk, and JetBrains Mono are licensed
   under the SIL Open Font License 1.1. See THIRD_PARTY_LICENSES.txt.
   ===================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/hanken-grotesk-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   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 ScribeShot"; }
.pricing-content > h2::before { content: "Pricing"; }

/* =====================================================================
   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; }

.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 {
    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 { 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;
    }
}

.content-visual{margin:1.75rem 0 2.4rem;padding:1.35rem;border:1px solid var(--line,rgba(15,23,42,.1));border-radius:18px;background:var(--paper-2,#f7f8fa);box-shadow:var(--shadow-sm,0 8px 24px rgba(15,23,42,.06))}.content-visual__head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;margin-bottom:1rem}.content-visual__eyebrow{margin:0 0 .3rem;color:var(--ink-2,#5b6472);font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.content-visual__title{margin:0;font-size:1.2rem;line-height:1.25}.content-visual__note{max-width:36rem;margin:0;color:var(--ink-2,#5b6472);font-size:.9rem;line-height:1.5}.content-flow{display:grid;grid-template-columns:repeat(var(--flow-cols,4),minmax(0,1fr));gap:.65rem}.content-flow__step{position:relative;min-width:0;padding:1rem;border:1px solid var(--line,rgba(15,23,42,.1));border-radius:14px;background:var(--card,#fff)}.content-flow__step:not(:last-child)::after{content:"→";position:absolute;z-index:2;right:-.62rem;top:50%;display:grid;width:1.15rem;height:1.15rem;place-items:center;transform:translateY(-50%);border-radius:999px;background:var(--paper-2,#f7f8fa);color:var(--ink-2,#5b6472);font-size:.85rem;font-weight:800}.content-flow__step strong{display:block;margin-bottom:.3rem;font-size:.95rem}.content-flow__step span{display:block;color:var(--ink-2,#5b6472);font-size:.82rem;line-height:1.45}.content-flow--six{--flow-cols:6}.content-flow--three{--flow-cols:3}.proof-split{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.proof-pane{padding:1rem;border:1px solid var(--line,rgba(15,23,42,.1));border-radius:14px;background:var(--card,#fff)}.proof-pane__label{display:inline-block;margin-bottom:.7rem;padding:.24rem .55rem;border-radius:999px;background:rgba(100,116,139,.1);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.proof-pane blockquote{margin:.4rem 0 .9rem;padding:.8rem 1rem;border-left:3px solid var(--line,rgba(15,23,42,.18));color:var(--ink-2,#5b6472)}.proof-frame{display:grid;grid-template-columns:88px 1fr;gap:.8rem;align-items:center;padding:.75rem;border-radius:12px;background:var(--paper-2,#f7f8fa)}.proof-frame__thumb{display:grid;min-height:62px;place-items:center;border:1px dashed rgba(15,23,42,.2);border-radius:9px;background:var(--card,#fff);font-size:.72rem;font-weight:800;text-align:center}.proof-frame__copy strong{display:block;margin-bottom:.2rem}.proof-frame__copy span{color:var(--ink-2,#5b6472);font-size:.82rem;line-height:1.4}.local-boundary{padding:1rem;border:2px solid rgba(37,99,235,.22);border-radius:16px;background:rgba(37,99,235,.035)}.local-boundary__label{margin:0 0 .75rem;font-size:.78rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.local-optional{margin-top:.8rem;padding:.75rem .9rem;border:1px dashed rgba(15,23,42,.22);border-radius:12px;color:var(--ink-2,#5b6472);font-size:.85rem;line-height:1.5}.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.decision-card{padding:1rem;border:1px solid var(--line,rgba(15,23,42,.1));border-radius:14px;background:var(--card,#fff)}.decision-card h3{margin:0 0 .5rem;font-size:1rem}.decision-card ul{margin:.5rem 0 0;padding-left:1.15rem}.decision-card li{margin:.35rem 0}.markdown-preview{overflow:hidden;border:1px solid rgba(15,23,42,.16);border-radius:14px;background:#0f172a;color:#e2e8f0}.markdown-preview__bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .75rem;border-bottom:1px solid rgba(226,232,240,.15);font-size:.75rem;font-weight:750}.markdown-preview__bar::before{content:"";width:.55rem;height:.55rem;border-radius:999px;background:#94a3b8;box-shadow:1rem 0 0 #94a3b8,2rem 0 0 #94a3b8;margin-right:2.1rem}.markdown-preview pre{margin:0;padding:1rem;white-space:pre-wrap;color:inherit;font:500 .82rem/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.content-visual code{font-size:.9em}

/* Homepage: show only the clearest per-video value. The complete workflow lives on /features. */
.showcase-section{padding:clamp(4.5rem,8vw,7rem) 0;background:linear-gradient(180deg,var(--paper,#f1f3f6) 0%,var(--paper-2,#f7f9fb) 55%,var(--paper,#f1f3f6) 100%);overflow:visible!important}.showcase-section .showcase-container{max-width:1180px;margin:0 auto;padding:0 1.5rem}.showcase-section .section-header{max-width:820px;margin:0 auto clamp(2.5rem,5vw,4rem);text-align:center}.showcase-section .section-header::before{content:"Work deeply with one video";display:block;margin-bottom:.8rem;color:var(--brand,#2347e8);font-family:var(--font-mono,ui-monospace,monospace);font-size:.74rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.showcase-section .section-header .section-sub{max-width:700px;margin-left:auto;margin-right:auto}.showcase-section .showcase-tabs-wrapper,.showcase-section .showcase-slider-nav{display:none!important}.showcase-section .showcase-slider-viewport{overflow:visible!important;touch-action:auto!important}.showcase-section .showcase-slider-track{display:grid!important;grid-template-columns:1fr!important;gap:clamp(1.4rem,3vw,2.2rem)!important;transform:none!important;transition:none!important}.showcase-section .showcase-slide{display:block!important;width:100%!important;min-width:0!important;max-width:none!important;flex:none!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;background:transparent!important;border:0!important;box-shadow:none!important}.showcase-section #showcase-slide-2,.showcase-section #showcase-slide-3,.showcase-section #showcase-slide-5,.showcase-section #showcase-slide-6,.showcase-section #showcase-slide-7,.showcase-section #showcase-slide-8{display:none!important}.showcase-section #showcase-slide-0{order:1}.showcase-section #showcase-slide-1{order:2}.showcase-section #showcase-slide-4{order:3}.showcase-section #showcase-slide-0::before,.showcase-section #showcase-slide-1::before,.showcase-section #showcase-slide-4::before{display:block;margin:0 0 .75rem;color:var(--brand,#2347e8);font-family:var(--font-mono,ui-monospace,monospace);font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.showcase-section #showcase-slide-0::before{content:"01 / Capture"}.showcase-section #showcase-slide-1::before{content:"02 / Understand"}.showcase-section #showcase-slide-4::before{content:"03 / Explore"}.showcase-section .showcase-slide-content{display:grid!important;grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr)!important;grid-template-areas:"text visual";align-items:stretch!important;min-height:490px!important;overflow:hidden;border:1px solid var(--line,#e2e7ef);border-radius:28px;background:rgba(255,255,255,.96);box-shadow:0 24px 64px -42px rgba(11,16,24,.38),0 1px 2px rgba(11,16,24,.04)}.showcase-section #showcase-slide-1 .showcase-slide-content{grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr)!important;grid-template-areas:"visual text"}.showcase-section .showcase-slide-text{grid-area:text;display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,4vw,3.25rem)!important;background:linear-gradient(160deg,rgba(255,255,255,.99),rgba(247,249,251,.9))}.showcase-section .showcase-slide-text h3{margin:0 0 1rem;font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1.08}.showcase-section .showcase-slide-desc{margin:0 0 1.3rem;color:var(--ink-2,#3a4456);font-size:1.03rem;line-height:1.62}.showcase-section .showcase-slide-list{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}.showcase-section .showcase-slide-list li{display:grid;grid-template-columns:1.15rem 1fr;gap:.65rem;align-items:start;color:var(--ink-2,#3a4456);line-height:1.48}.showcase-section .showcase-slide-list i{margin-top:.2rem;color:var(--accent-color,var(--brand,#2347e8))}.showcase-section .showcase-slide-visual{grid-area:visual;position:relative;display:flex!important;align-items:center!important;justify-content:center!important;min-width:0;padding:clamp(1rem,2.4vw,1.8rem)!important;background:linear-gradient(145deg,var(--bg-color,#eef2ff),rgba(255,255,255,.58))!important}.showcase-section .showcase-slide-visual img,.showcase-section .showcase-slide-visual video{width:100%!important;height:auto!important;max-height:510px;object-fit:contain;border:1px solid rgba(11,16,24,.09);border-radius:18px;box-shadow:0 24px 54px -30px rgba(11,16,24,.38);background:#fff}.showcase-section .showcase-slide-content{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.showcase-section .showcase-slide-content:hover{transform:translateY(-2px);border-color:rgba(35,71,232,.17);box-shadow:0 30px 72px -40px rgba(11,16,24,.4),0 3px 12px rgba(11,16,24,.04)}

/* Homepage Knowledge Base: make the library-wide payoff visually distinct from per-video tools. */
.knowledge-section{position:relative;overflow:hidden!important;padding:clamp(5rem,9vw,8rem) 2rem!important;background:linear-gradient(145deg,#0b1018 0%,#15203a 58%,#101c26 100%)!important;border-top:0!important;border-bottom:0!important;color:#fff}.knowledge-section::before{content:"";position:absolute;inset:-20% -10% auto auto;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(97,137,255,.2),transparent 68%);pointer-events:none}.knowledge-section .knowledge-shell{position:relative;z-index:1;max-width:1180px!important}.knowledge-section .demo-eyebrow{color:#9fb2ff}.knowledge-section h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem);line-height:1.08}.knowledge-section .section-sub{max-width:760px;margin-left:auto;margin-right:auto;color:rgba(255,255,255,.7);font-size:1.03rem}.knowledge-section .knowledge-grid{gap:1rem!important;margin-top:2.4rem!important}.knowledge-section .knowledge-card{overflow:hidden;padding:1rem!important;border-color:rgba(255,255,255,.1)!important;background:rgba(255,255,255,.075)!important;box-shadow:none!important;backdrop-filter:blur(8px)}.knowledge-section .knowledge-card img{border-color:rgba(255,255,255,.09)!important}.knowledge-section .knowledge-card .knowledge-icon{background:rgba(143,168,255,.16)!important;color:#aabaff!important}.knowledge-section .knowledge-card h3{color:#fff!important;font-size:1.3rem!important}.knowledge-section .knowledge-card p{color:rgba(255,255,255,.7)!important}.knowledge-section .knowledge-actions{margin-top:2rem!important}.knowledge-section .cta-button.secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}.knowledge-section .cta-button.secondary:hover{background:rgba(255,255,255,.13)}

@media(max-width:900px){.showcase-section .showcase-slide-content,.showcase-section #showcase-slide-1 .showcase-slide-content{grid-template-columns:1fr!important;grid-template-areas:"text" "visual";min-height:0!important}.showcase-section #showcase-slide-1 .showcase-slide-visual{order:2}.showcase-section .showcase-slide-text{padding:2rem!important}.showcase-section .showcase-slide-visual{min-height:300px}.knowledge-section{padding-left:1rem!important;padding-right:1rem!important}}@media(max-width:820px){.content-visual__head{align-items:flex-start;flex-direction:column}.content-flow,.content-flow--six,.content-flow--three{grid-template-columns:1fr}.content-flow__step:not(:last-child)::after{content:"↓";right:auto;top:auto;bottom:-.63rem;left:50%;transform:translateX(-50%)}.proof-split,.decision-grid{grid-template-columns:1fr}.proof-frame{grid-template-columns:72px 1fr}}@media(max-width:520px){.content-visual{padding:1rem;margin-left:-.15rem;margin-right:-.15rem}.proof-frame{grid-template-columns:1fr}.proof-frame__thumb{min-height:54px}.showcase-section .showcase-container{padding:0 1rem}.showcase-section .showcase-slide-content{border-radius:21px}.showcase-section .showcase-slide-text{padding:1.5rem!important}.showcase-section .showcase-slide-visual{padding:.75rem!important}}
/* Homepage product story: compact summary + detailed stage journey.
   The existing HTML keeps all explanatory copy crawlable; visual hierarchy makes
   the value and individual feature names scannable without requiring a full read. */
.home-flow {
    padding: clamp(4.25rem, 7vw, 6.5rem) 2rem;
    background: var(--paper-2, #F7F9FB);
    border-top: 1px solid var(--line, #E2E7EF);
    border-bottom: 1px solid var(--line, #E2E7EF);
}
.home-flow .section-header { max-width: 880px; margin: 0 auto clamp(2.65rem, 5vw, 4rem); text-align: center; }
.home-flow .section-sub { max-width: 690px; margin-left: auto; margin-right: auto; }
.home-flow-track { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(.8rem,1.8vw,1.5rem); }
.home-flow-line,.home-flow-line-fill { position: absolute; top: 44px; left: 10%; right: 10%; height: 2px; border-radius: 999px; pointer-events: none; }
.home-flow-line { background: rgba(35,71,232,.13); }
.home-flow-line-fill { right: auto; width: 80%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg,#3156F6,#2A8DD8,#7447D8,#B9710B); }
.home-step { position: relative; z-index: 1; text-align: center; opacity: 1; }
.home-step-icon { width: 88px; height: 88px; margin: 0 auto 1.15rem; display: grid; place-items: center; position: relative; border: 1px solid var(--line,#E2E7EF); border-radius: 24px; background: rgba(255,255,255,.97); color: var(--step-color,#3156F6); box-shadow: 0 14px 34px -24px rgba(11,16,24,.35),0 2px 8px rgba(11,16,24,.04); font-size: 1.65rem; }
.home-step-badge { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; background: var(--step-color,#3156F6); color: #fff; box-shadow: 0 5px 14px rgba(11,16,24,.16); font: 800 .78rem/1 var(--font-mono,monospace); }
.home-step:nth-of-type(2) { --step-color:#0E9270; }
.home-step:nth-of-type(3) { --step-color:#7447D8; }
.home-step:nth-of-type(4) { --step-color:#B9710B; }
.home-step h3 { margin: 0 0 .38rem; font-size: clamp(1.04rem,1.4vw,1.2rem); line-height: 1.2; }
.home-step p { max-width: 235px; margin: 0 auto; color: var(--ink-2,#3A4456); line-height: 1.42; font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Detailed journey: stage identity is strong; product proof remains large and light. */
.learning-journey { padding: clamp(5rem,8vw,7.5rem) 2rem; background: var(--paper,#F1F3F6); }
.learning-journey-shell { max-width: 1260px; margin: 0 auto; }
.learning-journey .section-header { max-width: 850px; margin: 0 auto clamp(3rem,6vw,5rem); text-align: center; }
.learning-journey .section-sub { max-width: 700px; margin-left: auto; margin-right: auto; }
.journey-list { position: relative; display: grid; gap: clamp(3.4rem,6vw,5.8rem); }
.journey-list::before { content:""; position:absolute; top:54px; bottom:54px; left:70px; width:2px; background: linear-gradient(180deg,rgba(49,86,246,.44),rgba(14,146,112,.34),rgba(116,71,216,.33),rgba(185,113,11,.37)); }
.journey-stage { --stage-a:#3156F6; --stage-b:#6688FF; --stage-soft:#EEF2FF; position:relative; display:grid; grid-template-columns:140px minmax(0,1fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; }
.journey-stage:nth-child(2) { --stage-a:#087E70; --stage-b:#2FB59E; --stage-soft:#ECF8F4; }
.journey-stage:nth-child(3) { --stage-a:#6236C7; --stage-b:#8C68E8; --stage-soft:#F3EEFF; }
.journey-stage:nth-child(4) { --stage-a:#2747BA; --stage-b:#B37618; --stage-soft:#F7F1E7; }
.journey-node { position:sticky; top:104px; z-index:3; width:140px; min-height:104px; display:grid; place-items:center; padding:.9rem; text-align:center; border:0; border-radius:999px; background:linear-gradient(145deg,var(--stage-a),var(--stage-b)); box-shadow:0 18px 44px -24px rgba(11,16,24,.38),0 8px 22px rgba(11,16,24,.1); color:#fff; }
.journey-node span { display:block; margin-bottom:.3rem; font:800 .66rem/1 var(--font-mono,monospace); letter-spacing:.14em; opacity:.78; }
.journey-node strong { display:block; font-size:1rem; line-height:1.08; color:#fff; }

/* Stage container holding the outcome header card + individual feature cards */
.journey-stage-content { min-width: 0; display: grid; gap: 1.5rem; }

/* 1. Stage card: customer outcome, compact, strongly styled gradient card without screenshots */
.journey-stage-card { padding: clamp(1.6rem, 2.8vw, 2.3rem); border-radius: 26px; background: linear-gradient(120deg, var(--stage-a), var(--stage-b)); color: #fff; box-shadow: 0 20px 48px -26px var(--stage-a), 0 2px 6px rgba(11,16,24,.06); }
.journey-kicker { margin: 0 0 .45rem; color: rgba(255,255,255,.76); font: 800 .72rem/1.2 var(--font-mono,monospace); letter-spacing: .15em; text-transform: uppercase; }
.journey-stage-card h3 { max-width: 860px; margin: 0 0 .55rem; color: #fff; font-size: clamp(1.45rem, 2.4vw, 2.15rem); line-height: 1.12; font-weight: 700; }
.journey-stage-card p:not(.journey-kicker) { max-width: 760px; margin: 0; color: rgba(255,255,255,.88); font-size: .95rem; line-height: 1.52; }

/* 2. Individual feature cards: separate white/light cards underneath */
.journey-features-list { display: grid; gap: 1.5rem; }
.journey-feature-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: clamp(1.5rem, 2.8vw, 2.8rem); align-items: center; padding: clamp(1.4rem, 2.5vw, 2.2rem); border: 1px solid rgba(15,23,42,.08); border-radius: 24px; background: #ffffff; box-shadow: 0 22px 50px -32px rgba(11,16,24,.32), 0 1px 3px rgba(11,16,24,.04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow: hidden; }
.journey-feature-card:hover { transform: translateY(-3px); box-shadow: 0 26px 58px -30px rgba(11,16,24,.38), 0 2px 8px rgba(11,16,24,.06); border-color: rgba(15,23,42,.14); }

/* Alternating layout for rhythm */
.journey-feature-card--reverse { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
.journey-feature-card--reverse .journey-feature-media { order: 1; }
.journey-feature-card--reverse .journey-feature-info { order: 2; }

.journey-feature-info { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.journey-feature-tag { display: inline-block; padding: .32rem .75rem; border-radius: 999px; background: var(--stage-soft); color: var(--stage-a); font: 800 .74rem/1 var(--font-mono,monospace); letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(15,23,42,.06); }
.journey-feature-info h4 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.2; color: var(--ink,#0B1018); font-weight: 700; }
.journey-feature-info p { margin: 0; color: var(--ink-2,#3A4456); font-size: .93rem; line-height: 1.55; }
.journey-feature-link { margin-top: .45rem; display: inline-flex; align-items: center; gap: .35rem; color: var(--stage-a); font-weight: 750; font-size: .92rem; text-decoration: none; transition: transform .15s ease, color .15s ease; }
.journey-feature-link:hover { text-decoration: underline; transform: translateX(3px); }

/* Let the feature artwork do the explaining: the product name leads, the value line supports. */
.journey-feature-card--minimal-copy .journey-feature-info { justify-self: center; width: min(100%, 34rem); gap: .88rem; }
.journey-feature-card--minimal-copy .journey-feature-tag { padding: 0; border: 0; border-radius: 0; background: linear-gradient(100deg, var(--stage-a), var(--stage-b)); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: inherit; font-size: clamp(2.75rem, 4.1vw, 4.4rem); font-weight: 800; letter-spacing: -.06em; line-height: .98; text-transform: none; }
.journey-feature-card--minimal-copy .journey-feature-info h4 { max-width: 18ch; font-size: clamp(1.55rem, 2.25vw, 2.55rem); font-weight: 650; line-height: 1.16; }
.journey-feature-card--minimal-copy .journey-feature-link { margin-top: .2rem; font-size: clamp(.98rem, 1.05vw, 1.12rem); }

/* One compact shared desktop frame keeps the varied product artwork rhythmically aligned. */
@media (min-width:761px) {
    .journey-feature-card--minimal-copy { box-sizing:border-box; height:clamp(32rem,34vw,40rem); }
    .journey-feature-card--minimal-copy .journey-feature-media--feature-art { align-self:stretch; display:grid; min-height:0; place-items:center; }
    .journey-feature-card--minimal-copy .journey-feature-media--feature-art img { width:100%; height:100%; object-fit:contain; }
}

.journey-feature-media { position: relative; min-width: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(145deg, var(--stage-soft), rgba(255,255,255,.9) 58%, #fff); padding: clamp(.75rem, 1.6vw, 1.35rem); border: 1px solid rgba(15,23,42,.06); }
.journey-feature-media img { width: 100%; height: auto; display: block; object-fit: contain; border-radius: 12px; border: 1px solid rgba(11,16,24,.08); box-shadow: 0 16px 40px -22px rgba(11,16,24,.36); background: #fff; }
.journey-feature-media--feature-art { overflow: visible; padding: 0; border: 0; background: transparent; }
.journey-feature-media--feature-art img { border: 0; border-radius: 0; box-shadow: none; background: transparent; }

.journey-stage-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; }
.journey-all-features { display: flex; justify-content: center; margin-top: clamp(3rem,6vw,5rem); }

/* Real output cards. */
.real-notes-section { padding:clamp(4rem,7vw,6.5rem) 2rem; background:var(--paper-2,#F7F9FB); border-top:1px solid var(--line,#E2E7EF); border-bottom:1px solid var(--line,#E2E7EF); }
.real-notes-shell { max-width:var(--maxw,1180px); margin:0 auto; }
.real-notes-header { display:flex; justify-content:space-between; gap:2rem; align-items:end; margin-bottom:2rem; }
.real-notes-header .section-header { text-align:left; margin:0; }
.real-notes-header .section-sub { max-width:700px; margin-left:0; }
.real-notes-all { flex:0 0 auto; font-weight:700; text-decoration:none; white-space:nowrap; }
.real-notes-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.real-note-card { display:flex; flex-direction:column; overflow:hidden; min-width:0; border:1px solid var(--line,#E2E7EF); border-radius:18px; background:var(--card,#fff); color:inherit; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .2s ease,box-shadow .2s ease; }
.real-note-card:hover { transform:translateY(-4px); box-shadow:0 20px 42px -24px rgba(11,16,24,.38); }
.real-note-visual { display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; padding:1.25rem; overflow:hidden; background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(99,102,241,.05)); text-align:center; }
.real-note-visual img { width:100%; height:100%; object-fit:cover; }
.real-note-visual strong { display:block; font-size:1.08rem; line-height:1.25; }
.real-note-visual span { display:block; margin-top:.35rem; color:var(--ink-2,#3A4456); font-size:.78rem; }
.real-note-body { display:flex; flex:1; flex-direction:column; padding:1.05rem; }
.real-note-tag { margin-bottom:.5rem; color:var(--brand,#2347E8); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.real-note-body h3 { margin:0 0 .45rem; font-size:1.08rem; line-height:1.25; }
.real-note-body p { margin:0; color:var(--ink-2,#3A4456); font-size:.9rem; line-height:1.55; }
.real-note-link { margin-top:auto; padding-top:.9rem; font-size:.86rem; font-weight:750; }

/* One-time explanatory motion only. */
@media (prefers-reduced-motion:no-preference) {
    .home-flow-track.reveal .home-flow-line-fill { transition:transform .7s cubic-bezier(.16,1,.3,1) .08s; }
    .home-flow-track.reveal .home-step { opacity:0; transform:translateY(12px); transition:opacity .4s ease,transform .52s cubic-bezier(.16,1,.3,1); }
    .home-flow-track.reveal .home-step:nth-of-type(1) { transition-delay:.08s; }
    .home-flow-track.reveal .home-step:nth-of-type(2) { transition-delay:.20s; }
    .home-flow-track.reveal .home-step:nth-of-type(3) { transition-delay:.32s; }
    .home-flow-track.reveal .home-step:nth-of-type(4) { transition-delay:.44s; }
    .home-flow-track.reveal.is-visible .home-flow-line-fill { transform:scaleX(1); }
    .home-flow-track.reveal.is-visible .home-step { opacity:1; transform:translateY(0); }
    .journey-stage.reveal .journey-node { opacity:0; transform:scale(.95); transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1); }
    .journey-stage.reveal .journey-stage-card { opacity:0; transform:translateY(18px); transition:opacity .5s ease .06s,transform .62s cubic-bezier(.16,1,.3,1) .06s; }
    .journey-stage.reveal .journey-feature-card { opacity:0; transform:translateY(18px); transition:opacity .5s ease .1s,transform .62s cubic-bezier(.16,1,.3,1) .1s; }
    .journey-stage.reveal.is-visible .journey-node { opacity:1; transform:scale(1); }
    .journey-stage.reveal.is-visible .journey-stage-card { opacity:1; transform:translateY(0); }
    .journey-stage.reveal.is-visible .journey-feature-card { opacity:1; transform:translateY(0); }
}

@media (max-width:1040px) {
    .journey-stage { grid-template-columns:112px minmax(0,1fr); gap:1.35rem; }
    .journey-list::before { left:56px; }
    .journey-node { width:112px; min-height:90px; top:92px; }
    .real-notes-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
    .home-flow,.learning-journey,.real-notes-section { padding-left:1rem; padding-right:1rem; }

    /* Mobile summary stays horizontal and terse; it never becomes a duplicate vertical journey. */
    .home-flow { padding-top:3.6rem; padding-bottom:3.2rem; }
    .home-flow .section-header { margin-bottom:1.55rem; }
    .home-flow .section-sub { font-size:.93rem; }
    .home-flow-track { display:flex; gap:0; margin-left:-1rem; margin-right:-1rem; padding:.45rem 1.2rem .85rem; overflow-x:auto; overflow-y:visible; scroll-snap-type:x proximity; scroll-padding-inline:1.2rem; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .home-flow-track::-webkit-scrollbar { display:none; }
    .home-flow-line,.home-flow-line-fill { display:none; }
    .home-step { position:relative; flex:0 0 116px; display:flex; flex-direction:column; align-items:center; text-align:center; scroll-snap-align:start; padding:0 .3rem; }
    .home-step:not(:last-child)::after { content:""; position:absolute; top:27px; left:calc(50% + 29px); width:calc(100% - 58px); height:2px; border-radius:999px; background:rgba(49,86,246,.22); pointer-events:none; }
    .home-step-icon { width:56px; height:56px; margin:0 auto .72rem; border-radius:999px; font-size:1rem; }
    .home-step-badge { width:22px; height:22px; top:-5px; right:-5px; font-size:.6rem; }
    .home-step h3 { margin:0; font-size:.8rem; line-height:1.2; }
    .home-step p { display:none; }

    /* The detailed stage receives the full phone width; the rail becomes a compact chip. */
    .learning-journey { padding-top:4.5rem; }
    .learning-journey .section-header { margin-bottom:2.7rem; }
    .journey-list { gap:3.1rem; }
    .journey-list::before { display:none; }
    .journey-stage { display:block; }
    .journey-node { position:relative; top:auto; width:fit-content; min-width:116px; min-height:0; margin:0 0 .85rem; padding:.62rem .95rem; border-radius:999px; }
    .journey-node span { display:inline; margin:0 .42rem 0 0; }
    .journey-node strong { display:inline; font-size:.88rem; }
    .journey-stage-card { padding:1.4rem 1.25rem; border-radius:20px; }
    .journey-stage-card h3 { font-size:1.45rem; }
    .journey-stage-card p:not(.journey-kicker) { font-size:.88rem; }

    /* Feature card mobile layout:
       Feature name -> Value headline -> Full-width screenshot -> Explore link */
    .journey-feature-card,
    .journey-feature-card--reverse {
        display: flex;
        flex-direction: column;
        padding: 1.2rem;
        gap: .85rem;
        border-radius: 20px;
    }
    .journey-feature-info {
        display: contents;
    }
    .journey-feature-tag {
        order: 1;
        align-self: flex-start;
    }
    .journey-feature-info h4 {
        order: 2;
        font-size: 1.22rem;
    }
    .journey-feature-info p {
        order: 3;
        font-size: .88rem;
    }
    .journey-feature-media,
    .journey-feature-card--reverse .journey-feature-media {
        order: 4;
        padding: .5rem;
        border-radius: 14px;
        width: 100%;
        box-sizing: border-box;
    }
    .journey-feature-media img {
        border-radius: 10px;
    }
    .journey-feature-link {
        order: 5;
        margin-top: .25rem;
        font-size: .9rem;
    }

    .real-notes-header { align-items:flex-start; flex-direction:column; gap:1rem; }
    .real-notes-grid { grid-template-columns:1fr; }
}

/* Keep the existing identity while bringing source proof and decisions forward. */
/* Show the first-screen explanation immediately; fading text also weakens contrast. */
.hero-text > *, .js .home-flow .reveal, .js .home-flow .home-step { opacity: 1; transform: none; animation: none; transition: none; }
.hero-play-overlay, .hero-video-trigger:hover .hero-play-overlay { background: transparent; align-items: flex-end; justify-content: flex-end; padding: 1rem; }
.hero-play-btn { width: 52px; height: 52px; font-size: 1rem; }
.hero-play-btn::before, .hero-play-badge { display: none; }
.real-notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin: auto; }
.real-note-visual img { width: 100%; height: auto; object-fit: contain; }
.download-setup { max-width: 750px; margin: 1rem auto 1.5rem; line-height: 1.7; color: var(--ink-2); }
.download-setup a { text-decoration: underline; text-underline-offset: 3px; }
.download-btn.disabled { opacity: 1; color: var(--ink-2); }
dialog.video-modal-overlay { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; background: transparent; }
dialog.video-modal-overlay:not([open]) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .video-modal-overlay, .video-modal-box { transition: none; }
}
@media (max-width: 600px) {
  .real-notes-grid { grid-template-columns: 1fr; }
  .hero-micro { font-family: var(--font-body, sans-serif); line-height: 1.6; margin-bottom: .8rem; }
  .hero-content { gap: 1.5rem; }
  .hero-play-overlay { padding: .6rem; }
  .hero-play-btn { width: 42px; height: 42px; }
}