/* StyleBlox: dark surfaces and the complete feature directory. */
:root {
  color-scheme: dark;
  --bg: #0c0e13;
  --surface: #141820;
  --border: #2b3342;
  --text: #f2f4fa;
  --muted: #a5afc1;
  --accent: #557cff;
  --accent2: #91abff;
}
::selection { background: #557cff; color: white; }
.site-header { background: #0c0e13f5; }
.brand-period, .word-home, .text-link:hover, .plain-features li::before { color: #91abff; }
.button-primary, .plan-btn-filled { background: #365ed9; }
.button-primary:hover { background: #446eef; }
.button-dark, .cookie-btn { background: #25334d; color: #f2f4fa; border-color: #3a4e70; }
.button-dark:hover, .cookie-btn:hover { background: #304466; }
.button-outline { border-color: #46546b; }
.button-outline:hover { background: #202939; }
.button-light { background: #f2f4fa; color: #141820; }
.skip-link { background: #25334d; color: #fff; }
#main-nav>a:hover:not(.button), .nav-account-link:hover { color: #91abff; }
.hero { padding-block: 68px 64px; min-height: 680px; }
.hero-footnote { margin-top: 34px; }
.version-stamp { border-color: #3c475a; }
.visual-grid { background-image: linear-gradient(#34405733 1px,transparent 1px),linear-gradient(90deg,#34405733 1px,transparent 1px); }
.preview-browser { border-color: #414d65; box-shadow: 0 28px 70px -30px #000; }
.customise-card { background: #1b2230; border-color: #394760; box-shadow: 0 12px 28px -12px #000a; }
.try-label, .preview-caption { color: #aab7cd; }
.swatch { border-color: #1b2230; }
.swatch.active { outline-color: #d5deef; }
.swatch:focus-visible { outline-color: #b3c5ff; }
.option-divider { background: #3a4559; }
.switch-track { background: #495469; }
.switch-track i { background: #f2f4fa; }
.feature-ribbon { background: #11151d; border-color: #293141; }
.feature-kicker, .tool-number, .art-note { color: #acb8cf; }
.settings-showcase { background: #172031; border: 1px solid #2f405d; }
.music-feature { background: #151c29; border-color: #2b3a52; }
.music-feature>.small-print { background: #151c29; border-color: #35435a; color: #b4c0d4; }
.feature-tags span { background: #253148; border-color: #3a4b68; color: #dce6fc; }
.classic-feature { background: #182321; border-color: #354b43; }
.classic-feature>p:not(.small-print) { color: #c0d3cb; }
.classic-feature .feature-kicker, .classic-feature .small-print { color: #a5c2b3; }
.retro-window { color-scheme: light; color: #222; box-shadow: 7px 7px 0 #354b43; }
.retro-year { color: #c7dfbe; background: #243a2f; }
.small-print, .billing-note { color: #acb8cb; }
.tools-row>div { border-color: var(--border); }
.getting-started { background: #121720; border-block: 1px solid #252e3e; }
.setup-layout li { border-color: #2a3447; }
.setup-layout li>span, .setup-layout li p { color: #a5afc1; }
.free-plan { background: #15211e; border-color: #304a3d; }
.free-plan p { color: #b9cdbf; }
.free-pill { color: #aed8bb; }
.price-card { background: #141820; border-color: #2b3342; }
.price-card.featured { background: #172035; border-color: #6e90ff; box-shadow: none; }
.value-label { color: #c9d6ff; background: #2c3f70; }
.plan-rule { background: #2b3342; }
.price-card li:before { color: #9bcba9; }
.crypto-link:hover { color: #a9c0ff; }
.faq-list details, .faq-list details:first-child { border-color: #2b3342; }
.final-cta { background: #152344; border-top: 1px solid #354e80; }
.final-cta h2 span { color: #a5baff; }
.cta-asterisk { color: #6e90ff; }
.cookie-banner, .nav-account-dropdown { background: #1b2230; border-color: #3b4860; box-shadow: 0 12px 30px #0007; }
.nad-vip.active { color: #b5ddbd; background: #263c2d; }
.nad-vip.inactive { color: #bbc5d6; background: #30394b; }
.crypto-overlay { background: #020409bb; }
.crypto-modal { background: #151b26; border-color: #3d4a63; box-shadow: 0 30px 80px #0008; }
.crypto-close { background: #2d384b; color: #e4eaf5; }
.crypto-modal input, .crypto-modal textarea { background: #0c111b!important; color: #f2f4fa!important; }
.crypto-modal .plan-btn { border-color: #485773; }
.crypto-timer { color: #b9c5d9; }
.crypto-field-row { background: #0f1622; }
.crypto-field-row button { background: #2a3750; }
.crypto-qr { color-scheme: light; }
.mobile-menu { border-color: #3a465d; }
.privacy-item a { color: #91abff; }

/* Every entry is visible by default, with a Free or VIP label on each row. */
.nav-account:not(.signed-in) .nav-account-link { border: 1px solid #526889; border-radius: 5px; padding: 9px 13px; background: #1d2a42; color: #e4ecff; white-space: nowrap; }
.nav-account:not(.signed-in) .nav-account-link:hover { background: #2a3d60; border-color: #91abff; }
.mobile-account-link { display: none; }
@media(max-width:700px) {
  .header-inner { gap: 12px; }
  .mobile-account-link { display: block; margin-left: auto; padding: 7px 10px; font-size: 11px; border: 1px solid #526889; border-radius: 4px; background: #1d2a42; color: #e4ecff; white-space: nowrap; }
  .mobile-menu { flex-shrink: 0; }
}
.product-gallery { padding: 0; margin: 0; min-width: 0; }
.gallery-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 18px; }
.gallery-heading>span:last-child { font-size: 10px; color: #a5afc1; }
.capture-options { display: flex; gap: 5px; background: #151b26; border: 1px solid #303c51; padding: 5px; border-radius: 8px; margin-bottom: 14px; }
.capture-options button { flex: 1; background: none; border: 1px solid transparent; border-radius: 5px; color: #b7c3d8; font-size: 11px; font-weight: 700; padding: 10px 8px; }
.capture-options button[aria-pressed=true] { background: #2a3d60; border-color: #506b9c; color: #f0f4ff; }
.capture-options button:hover { color: white; background: #263247; }
.product-capture { display: block; width: 100%; padding: 12px; position: relative; background: #10151f; border: 1px solid #37465e; border-radius: 9px; overflow: hidden; box-shadow: 0 25px 55px -35px #000; }
.product-capture img { width: 100%; height: clamp(290px,32vw,470px); object-fit: contain; object-position: center; }
.capture-enlarge { display: inline-block; margin-top: 12px; font-size: 10px; color: #cfddfa; background: #253754; border: 1px solid #455e87; border-radius: 4px; padding: 6px 10px; }
.capture-caption { color: #b1bdd1; font-size: 11px; line-height: 1.8; margin-top: 17px; min-height: 40px; }
.classic-capture { display: block; width: 100%; border: 1px solid #597067; padding: 8px; background: #101b16; border-radius: 6px; margin-top: 25px; }
.classic-capture img { width: 100%; height: auto; border-radius: 2px; }
.classic-capture .capture-enlarge { color: #d5e9dd; background: #2b4437; border-color: #50745e; }
button.music-art { display: block; padding: 0; border: 0; background: transparent; text-align: inherit; }
.screenshot-viewer { color-scheme: dark; width: min(1280px,calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 20px 24px; border: 1px solid #4b5d7e; border-radius: 10px; background: #141a25; color: #eef3ff; box-shadow: 0 30px 90px #000a; }
.screenshot-viewer::backdrop { background: #03060be8; backdrop-filter: blur(5px); }
.screenshot-viewer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.screenshot-viewer h2 { font-size: 22px; letter-spacing: -.5px; }
.screenshot-viewer-top button { width: 38px; height: 38px; flex-shrink: 0; background: #2c3a53; color: #f1f5ff; border: 1px solid #4c5f80; border-radius: 5px; font-size: 23px; line-height: 1; }
.screenshot-stage { background: #090d15; border: 1px solid #2b364a; border-radius: 5px; padding: 10px; }
.screenshot-stage img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 210px); object-fit: contain; margin: auto; }
.screenshot-viewer>p { color: #b6c3d9; font-size: 12px; margin-top: 14px; line-height: 1.7; }
@media(max-width:700px) {
  .product-gallery { padding: 15px 0 0; margin: 0; }
  .gallery-heading { gap: 10px; }
  .gallery-heading .eyebrow { font-size: 8px; }
  .gallery-heading>span:last-child { font-size: 8px; }
  .capture-options button { font-size: 10px; padding: 9px 4px; }
  .product-capture { padding: 8px; }
  .product-capture img { height: 300px; }
  .capture-caption { font-size: 11px; margin-top: 13px; }
  .screenshot-viewer { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 15px; }
  .screenshot-viewer h2 { font-size: 18px; }
  .screenshot-stage { padding: 5px; }
  .screenshot-viewer>p { font-size: 11px; }
}
.features-section { padding-block: 80px; }
.screenshot-showcase { padding-block: 78px 36px; }
.showcase-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 45px; margin-bottom: 32px; }
.showcase-heading h2 { font-size: clamp(37px,4vw,56px); letter-spacing: -2.4px; margin-top: 18px; }
.showcase-heading>p { max-width: 410px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.screenshot-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; align-items: stretch; }
.screenshot-card { border: 1px solid #303c50; border-radius: 8px; background: #141a25; overflow: hidden; min-width: 0; }
.screenshot-card-wide { grid-column: span 2; }
.screenshot-card-image { display: block; width: 100%; border: 0; border-bottom: 1px solid #303c50; padding: 10px; background: #0d121b; text-align: right; color: #bdcff5; }
.screenshot-card-image img { width: 100%; height: 300px; object-fit: contain; border-radius: 3px; }
.screenshot-card-wide .screenshot-card-image img { object-fit: cover; object-position: top; }
.screenshot-card-image>span { display: inline-block; font-size: 10px; padding: 9px 5px 2px; }
.screenshot-card-image:hover>span { color: #fff; text-decoration: underline; }
.screenshot-card-copy { padding: 23px 24px 25px; }
.screenshot-card-copy h3 { font-size: 23px; letter-spacing: -.7px; }
.screenshot-card-copy p { margin-top: 12px; font-size: 12px; line-height: 1.85; color: #aebcd2; }
@media(max-width:1100px) {
  .screenshot-grid { gap: 16px; }
  .screenshot-card-image img { height: 240px; }
  .screenshot-card-copy { padding: 20px; }
  .screenshot-card-copy h3 { font-size: 20px; }
}
@media(max-width:700px) {
  .capture-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .screenshot-showcase { padding-block: 48px 12px; }
  .showcase-heading { display: block; margin-bottom: 25px; }
  .showcase-heading h2 { font-size: 38px; letter-spacing: -1.8px; }
  .showcase-heading>p { margin-top: 18px; max-width: none; font-size: 13px; }
  .screenshot-grid { grid-template-columns: 1fr; gap: 18px; }
  .screenshot-card-wide { grid-column: auto; }
  .screenshot-card-image img { height: auto; max-height: 310px; object-fit: contain; }
  .screenshot-card-wide .screenshot-card-image img { object-fit: contain; }
  .screenshot-card-copy { padding: 20px; }
  .screenshot-card-copy h3 { font-size: 23px; }
}
.directory-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.directory-heading h2 { font-size: clamp(38px,4vw,56px); letter-spacing: -2.5px; margin-top: 18px; }
.directory-heading>p { max-width: 390px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.directory-intro { display: flex; align-items: center; gap: 20px; margin-top: 36px; padding-block: 20px; border-block: 1px solid var(--border); }
.directory-intro p { margin-right: auto; color: #b8c4d8; font-size: 12px; }
.directory-intro>span { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #bbc6d8; }
.tier-badge { flex-shrink: 0; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .45px; line-height: 1.5; padding: 3px 7px; border: 1px solid #354b48; border-radius: 4px; background: #1d302a; color: #b1d8c0; white-space: nowrap; }
.tier-badge.vip { background: #303049; border-color: #4f4b6e; color: #d5c7ff; }
.tier-badge.mixed { background: #22314a; border-color: #3b527b; color: #bfd3ff; }
.directory-nav { display: flex; flex-wrap: wrap; gap: 9px; margin-block: 25px 30px; }
.directory-nav a { padding: 8px 12px; background: #141b28; border: 1px solid #303d53; border-radius: 5px; font-size: 11px; color: #c4cfe1; }
.directory-nav a:hover { background: #23304a; border-color: #6b89c3; color: #fff; }
.feature-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: start; }
.directory-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.feature-category { background: #141820; border: 1px solid #2d3648; border-radius: 8px; padding: 25px 23px 15px; scroll-margin-top: 118px; min-width: 0; }
.category-title { display: flex; gap: 12px; align-items: center; }
.category-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #3d527d; background: #253250; border-radius: 7px; color: #adc2ff; flex-shrink: 0; }
.category-icon svg { width: 19px; height: 19px; }
.feature-category h3 { font-size: 21px; letter-spacing: -.6px; line-height: 1.25; }
.feature-category>p { font-size: 11px; color: #a6b2c8; line-height: 1.8; margin: 15px 0 17px; }
.feature-category ul { list-style: none; padding: 0; margin: 0; }
.feature-category li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-top: 1px solid #293141; padding: 12px 0; font-size: 13px; line-height: 1.7; }
.feature-category li>.feature-name { color: #e3e9f4; min-width: 0; overflow-wrap: anywhere; }
.feature-category li .feature-note { display: block; font-size: 11px; line-height: 1.8; color: #a7b3c9; margin-top: 3px; }
.feature-category .tier-badge { margin-top: 2px; }
.directory-count { color: #edf2ff; font-weight: 800; }
.directory-afterword { margin-top: 20px; color: var(--muted); font-size: 11px; }
.feature-editorial { margin-top: 65px; gap: 65px; }
.secondary-features { margin-top: 30px; }
.tools-row { display: none; }
@media(max-width:1100px) {
  .feature-directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .directory-column { display: contents; }
  .feature-category { height: 100%; }
  .directory-heading { gap: 30px; }
  .directory-heading>p { max-width: 300px; }
}
@media(max-width:700px) {
  .hero { min-height: 0; padding-block: 45px 54px; }
  .features-section { padding-block: 52px; }
  .directory-heading { display: block; }
  .directory-heading h2 { font-size: 38px; letter-spacing: -1.8px; }
  .directory-heading>p { margin-top: 20px; max-width: none; font-size: 13px; }
  .directory-intro { flex-wrap: wrap; gap: 12px 24px; margin-top: 25px; }
  .directory-intro p { width: 100%; }
  .directory-intro>span { font-size: 10px; }
  .directory-nav { gap: 7px; margin-block: 20px; }
  .directory-nav a { padding: 7px 10px; font-size: 10px; }
  .feature-directory { grid-template-columns: 1fr; gap: 16px; }
  .feature-category { padding: 24px 20px 14px; scroll-margin-top: 90px; }
  .feature-category li { font-size: 12px; padding-block: 13px; gap: 12px; }
  .feature-category h3 { font-size: 22px; }
  .feature-category>p { font-size: 12px; }
  .feature-category li .feature-note { font-size: 11px; }
  .tier-badge { font-size: 8px; }
  .feature-editorial { gap: 30px; margin-top: 45px; }
  .music-feature>.small-print { background: #151c29; }
}

.banner-motion-toggle { display: inline-flex; align-items: center; padding: 9px 14px; margin: 12px 0; border: 1px solid #506b9c; border-radius: 5px; background: #243655; color: #eef4ff; font: inherit; font-size: 12px; cursor: pointer; }
.banner-motion-toggle:hover { background: #344d76; }
.banner-motion-toggle[hidden] { display: none; }

.banner-profile-video { display:block; width:100%; height:auto; border-radius:3px; background:#101115; }
.product-capture .banner-profile-video { height:clamp(290px,32vw,470px); object-fit:contain; }
.screenshot-stage .banner-profile-video { max-height:72vh; object-fit:contain; }
.screenshot-card-wide .screenshot-card-image img { height:auto; max-height:none; object-fit:contain; }
.banner-profile-video[hidden],img[data-banner-image][hidden] { display:none!important; }

.brand img.brand-mark { width:32px; height:32px; object-fit:contain; border-radius:7px; flex-shrink:0; }