.features-main{max-width:1180px}.features-breadcrumb{display:flex;gap:.5rem;align-items:center;margin-bottom:2rem;font-size:.9rem}.features-breadcrumb a{text-decoration:none}.features-hero{padding:1.5rem 0 2.75rem}.features-kicker{margin:0 0 .6rem;color:var(--ink-2,#5b6472);font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.features-hero h1{max-width:820px;margin:.2rem 0 1rem}.features-hero .page-lede{max-width:780px}.features-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.4rem}.features-group{padding:2.25rem 0;border-top:1px solid var(--line,rgba(15,23,42,.1))}.features-group-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:2rem;align-items:end;margin-bottom:1.4rem}.features-group-head h2{margin:0}.features-group-head p{margin:0;color:var(--ink-2,#5b6472)}.features-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.feature-library-card{display:flex;flex-direction:column;min-height:220px;padding:1.35rem;border:1px solid var(--line,rgba(15,23,42,.1));border-radius:18px;background:var(--card,#fff);box-shadow:var(--shadow-sm,0 8px 24px rgba(15,23,42,.06))}.feature-library-card h3{margin:0 0 .6rem;font-size:1.18rem}.feature-library-card p{margin:0;color:var(--ink-2,#5b6472);line-height:1.6}.feature-library-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:auto;padding-top:1.1rem}.feature-library-links a{font-weight:750;text-decoration:none}.features-doc-note{margin-top:2.5rem;padding:1.4rem;border-radius:16px;background:var(--paper-2,#f7f8fa)}.features-doc-note h2{margin-top:0}.feature-parent-breadcrumb{display:flex;gap:.45rem;align-items:center;margin:0 0 1.25rem;font-size:.9rem}.feature-parent-breadcrumb a{text-decoration:none}@media(max-width:760px){.features-group-head{grid-template-columns:1fr;gap:.65rem}.features-grid{grid-template-columns:1fr}.features-actions{align-items:stretch;flex-direction:column}.features-actions a{text-align:center}}

/* Contextual product screenshots: use the real app UI instead of decorative art. */
.features-hero::after{content:"";display:block;width:min(100%,980px);aspect-ratio:1600/1026;margin:2rem 0 0;border:1px solid var(--line,rgba(15,23,42,.1));border-radius:20px;background:#f7f8fa url('/assets/images/hero/main-app-image.webp') center/contain no-repeat;box-shadow:0 24px 60px -46px rgba(15,23,42,.65)}
.feature-library-card::before{content:"";display:block;height:150px;margin:-1.35rem -1.35rem 1.1rem;border-bottom:1px solid var(--line,rgba(15,23,42,.08));border-radius:18px 18px 0 0;background-color:#f7f8fa;background-position:center;background-repeat:no-repeat;background-size:contain}
.feature-library-card:has(a[href="/docs/create-video-notes"])::before,.feature-library-card:has(a[href="/docs/ai-notes"])::before,.feature-library-card:has(a[href="/docs/screenshots"])::before{background-image:url('/assets/images/features/ai-notes-screenshot-feature.webp')}
.feature-library-card:has(a[href="/docs/image-analysis"])::before,.feature-library-card:has(a[href="/docs/chat-with-video"])::before{background-image:url('/assets/images/features/chat.webp')}
.feature-library-card:has(a[href="/docs/chapters"])::before{background-image:url('/assets/images/features/chapters.webp')}
.feature-library-card:has(a[href="/docs/mind-maps"])::before{background-image:url('/assets/images/features/mindmap.webp')}
.feature-library-card:has(a[href="/docs/video-highlights"])::before{background-image:url('/assets/images/features/jumper.webp')}
.feature-library-card:has(a[href="/docs/export-pdf"])::before{background-image:url('/assets/images/features/export-pdf.webp')}
.feature-library-card:has(a[href="/docs/obsidian"])::before{background-image:url('/assets/images/features/local-folders.webp')}
.feature-library-card:has(a[href="/offline-youtube-summarizer-mac"])::before,.feature-library-card:has(a[href="/local-llm-mac"])::before{background-image:url('/assets/images/features/local-llm-open-ai-support.webp')}

/* Older feature articles already contain inline figures in many cases. Only add
   a visual fallback when a page has no article/product figure at all. */
html:not(:has(.article-visual)):not(:has(.feature-visual)) .article-meta::after{content:"";display:block;flex:1 0 100%;width:100%;aspect-ratio:1200/820;margin-top:1.25rem;border:1px solid var(--line,rgba(15,23,42,.1));border-radius:16px;background-color:#f7f8fa;background-position:center;background-repeat:no-repeat;background-size:contain;box-shadow:var(--shadow-sm,0 8px 24px rgba(15,23,42,.06))}
html:has(link[rel="canonical"][href$="/youtube-to-markdown"]) .article-meta::after,html:has(link[rel="canonical"][href$="/youtube-video-note-taker"]) .article-meta::after,html:has(link[rel="canonical"][href$="/youtube-notes-with-screenshots"]) .article-meta::after,html:has(link[rel="canonical"][href$="/transcript-vs-visual-notes"]) .article-meta::after{background-image:url('/assets/images/features/ai-notes-screenshot-feature.webp')}
html:has(link[rel="canonical"][href$="/chat-with-youtube-video"]) .article-meta::after{background-image:url('/assets/images/features/chat.webp')}
html:has(link[rel="canonical"][href$="/youtube-video-to-mind-map"]) .article-meta::after{background-image:url('/assets/images/features/mindmap.webp')}
html:has(link[rel="canonical"][href$="/obsidian-youtube-notes"]) .article-meta::after{background-image:url('/assets/images/features/local-folders.webp')}
html:has(link[rel="canonical"][href$="/offline-youtube-summarizer-mac"]) .article-meta::after,html:has(link[rel="canonical"][href$="/local-llm-mac"]) .article-meta::after{background-image:url('/assets/images/features/local-llm-open-ai-support.webp')}
@media(max-width:760px){.features-hero::after{margin-top:1.4rem}.feature-library-card::before{height:130px}}

/* Use compact screenshots for overview cards and full-resolution sources only
   on high-density displays. Detail/article visuals intentionally stay full size. */
.feature-library-card::before{background-position:center top}
.feature-library-card:has(a[href="/docs/create-video-notes"])::before,.feature-library-card:has(a[href="/docs/ai-notes"])::before,.feature-library-card:has(a[href="/docs/screenshots"])::before{background-image:image-set(url('/assets/images/features/ai-notes-screenshot-feature-600.webp') 1x,url('/assets/images/features/ai-notes-screenshot-feature.webp') 2x)}
.feature-library-card:has(a[href="/docs/image-analysis"])::before,.feature-library-card:has(a[href="/docs/chat-with-video"])::before{background-image:image-set(url('/assets/images/features/chat-600.webp') 1x,url('/assets/images/features/chat.webp') 2x)}
.feature-library-card:has(a[href="/docs/chapters"])::before{background-image:image-set(url('/assets/images/features/chapters-600.webp') 1x,url('/assets/images/features/chapters.webp') 2x)}
.feature-library-card:has(a[href="/docs/mind-maps"])::before{background-image:image-set(url('/assets/images/features/mindmap-600.webp') 1x,url('/assets/images/features/mindmap.webp') 2x)}
.feature-library-card:has(a[href="/docs/video-highlights"])::before{background-image:image-set(url('/assets/images/features/jumper-600.webp') 1x,url('/assets/images/features/jumper.webp') 2x)}
.feature-library-card:has(a[href="/docs/obsidian"])::before{background-image:image-set(url('/assets/images/features/local-folders-600.webp') 1x,url('/assets/images/features/local-folders.webp') 2x)}
.feature-library-card:has(a[href="/offline-youtube-summarizer-mac"])::before,.feature-library-card:has(a[href="/local-llm-mac"])::before{background-image:image-set(url('/assets/images/features/local-llm-open-ai-support-600.webp') 1x,url('/assets/images/features/local-llm-open-ai-support.webp') 2x)}