/* Sarmaya Labs Modern UI
   Visual direction: spacious utility-first layouts, bright surfaces, confident blue actions,
   and a restrained coral accent. Original tool markup and processing logic are preserved. */

:root[data-theme="light"] {
  color-scheme: light;
  --ui-page: #f5f8fd;
  --ui-page-alt: #eef3fa;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8faff;
  --ui-surface-blue: #edf3ff;
  --ui-line: #e2e8f2;
  --ui-line-strong: #cbd6e6;
  --ui-text: #17243b;
  --ui-muted: #63728a;
  --ui-subtle: #8996aa;
  --ui-blue: #0055ff;
  --ui-blue-deep: #0048d9;
  --ui-blue-soft: #eaf1ff;
  --ui-coral: #e76f51;
  --ui-coral-soft: #fff0ec;
  --ui-success: #16865c;
  --ui-shadow: 0 16px 44px rgba(19, 42, 81, .075);
  --ui-shadow-hover: 0 22px 52px rgba(19, 42, 81, .12);
  --ink: #17243b;
  --ink-2: #31415b;
  --muted: #63728a;
  --muted-2: #8996aa;
  --line: #e2e8f2;
  --line-strong: #cbd6e6;
  --bg: #f5f8fd;
  --paper: #ffffff;
  --card: #ffffff;
  --forest: #edf3ff;
  --forest-2: #e0eaff;
  --lime: #0055ff;
  --lime-dark: #0048d9;
  --orange: #e76f51;
  --brand: #0055ff;
  --shadow: 0 18px 44px rgba(19,42,81,.075);
  --shadow-soft: 0 8px 24px rgba(19,42,81,.05);
  --pdf-bg: #f5f8fd;
  --pdf-panel: #ffffff;
  --pdf-panel-2: #f7f9fe;
  --pdf-line: #e2e8f2;
  --pdf-text: #17243b;
  --pdf-muted: #63728a;
  --pdf-soft: #8996aa;
  --pdf-accent: #0055ff;
  /* Keep the legacy shared theme variables aligned with the new palette. */
  --theme-bg: #f5f8fd;
  --theme-surface: #ffffff;
  --theme-surface-2: #f8faff;
  --theme-surface-3: #eef3fa;
  --theme-line: #e2e8f2;
  --theme-line-strong: #cbd6e6;
  --theme-text: #17243b;
  --theme-muted: #63728a;
  --theme-dim: #8996aa;
  --theme-shadow: 0 16px 44px rgba(19,42,81,.075);
  --page: #f5f8fd;
  --panel: #ffffff;
  --panel2: #f8faff;
  --line: #e2e8f2;
  --text: #17243b;
  --muted: #63728a;
  --soft: #8996aa;
  --accent: #0055ff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-page: #0b1220;
  --ui-page-alt: #101a2b;
  --ui-surface: #121e30;
  --ui-surface-soft: #17243a;
  --ui-surface-blue: #182b4c;
  --ui-line: #26364f;
  --ui-line-strong: #3a4d6b;
  --ui-text: #eef3ff;
  --ui-muted: #a7b6cd;
  --ui-subtle: #7e90aa;
  --ui-blue: #7ba5ff;
  --ui-blue-deep: #9abaff;
  --ui-blue-soft: #1b3155;
  --ui-coral: #ff927c;
  --ui-coral-soft: #3a2527;
  --ui-success: #6ad6a4;
  --ui-shadow: 0 16px 44px rgba(0,0,0,.2);
  --ui-shadow-hover: 0 22px 52px rgba(0,0,0,.3);
  --ink: #eef3ff;
  --ink-2: #d3ddef;
  --muted: #a7b6cd;
  --muted-2: #7e90aa;
  --line: #26364f;
  --line-strong: #3a4d6b;
  --bg: #0b1220;
  --paper: #121e30;
  --card: #121e30;
  --forest: #182b4c;
  --forest-2: #20385d;
  --lime: #7ba5ff;
  --lime-dark: #4f83ff;
  --orange: #ff927c;
  --brand: #7ba5ff;
  --shadow: 0 18px 44px rgba(0,0,0,.2);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.16);
  --pdf-bg: #0b1220;
  --pdf-panel: #121e30;
  --pdf-panel-2: #17243a;
  --pdf-line: #26364f;
  --pdf-text: #eef3ff;
  --pdf-muted: #a7b6cd;
  --pdf-soft: #7e90aa;
  --pdf-accent: #7ba5ff;
  /* Legacy variables used by the shared theme and category landing templates. */
  --theme-bg: #0b1220;
  --theme-surface: #121e30;
  --theme-surface-2: #17243a;
  --theme-surface-3: #182b4c;
  --theme-line: #26364f;
  --theme-line-strong: #3a4d6b;
  --theme-text: #eef3ff;
  --theme-muted: #a7b6cd;
  --theme-dim: #7e90aa;
  --theme-shadow: 0 16px 44px rgba(0,0,0,.2);
  --page: #0b1220;
  --panel: #121e30;
  --panel2: #17243a;
  --line: #26364f;
  --text: #eef3ff;
  --muted: #a7b6cd;
  --soft: #7e90aa;
  --accent: #7ba5ff;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  background: var(--ui-page) !important;
  color: var(--ui-text) !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(0,85,255,.18); color: var(--ui-text); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-blue) 42%, transparent); outline-offset: 3px; }

/* Global navigation */
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .pdf-topbar,
:root[data-theme="light"] .site-header {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 4px 20px rgba(19,42,81,.035) !important;
}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .pdf-topbar,
:root[data-theme="dark"] .site-header {
  background: rgba(11,18,32,.9) !important;
  border-bottom: 1px solid var(--ui-line) !important;
  color: var(--ui-text) !important;
}
:root[data-theme="light"] .topbar .brand,
:root[data-theme="light"] .pdf-brand { color: var(--ui-text) !important; }
:root[data-theme="light"] .topbar .navlinks,
:root[data-theme="light"] .pdf-nav-links { color: var(--ui-muted) !important; }
:root[data-theme="light"] .topbar .navlinks a:hover,
:root[data-theme="light"] .pdf-nav-links a:hover { color: var(--ui-blue) !important; background: transparent !important; }
.brand-mark,
.pdf-brand-mark,
.home-brand-mark {
  background: var(--ui-blue) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(0,85,255,.16) !important;
  transform: none !important;
}
.navcta,
.home-nav-cta,
.pdf-theme,
.theme-toggle {
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 11px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 2px 8px rgba(19,42,81,.035);
}
.navcta,
.home-nav-cta {
  border-color: var(--ui-blue) !important;
  background: var(--ui-blue) !important;
  color: #ffffff !important;
}
.navcta:hover,
.home-nav-cta:hover {
  background: var(--ui-blue-deep) !important;
  color: #ffffff !important;
  border-color: var(--ui-blue-deep) !important;
}
.theme-toggle { min-height: 39px; padding: 0 13px !important; font-size: 11px !important; }
.theme-toggle:hover,
.pdf-theme:hover { border-color: var(--ui-blue) !important; }
:root[data-theme="light"] .theme-toggle { background: #fff !important; color: #24334c !important; }
:root[data-theme="dark"] .theme-toggle { background: var(--ui-surface) !important; color: var(--ui-text) !important; }

/* Shared tool surfaces, forms and action buttons */
.workspace,
.sidecard,
.clip-panel,
.vm-panel,
.image-panel,
.pdf-panel,
.cp-panel,
.srt-panel,
.title-panel,
.word-panel,
.hash-panel,
.ratio-panel,
.json-panel {
  border: 1px solid var(--ui-line) !important;
  border-radius: 20px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow) !important;
}
.workspace h1, .workspace h2, .workspace h3,
.sidecard h1, .sidecard h2, .sidecard h3,
.vm-panel h1, .vm-panel h2, .vm-panel h3,
.image-panel h1, .image-panel h2, .image-panel h3,
.pdf-panel h1, .pdf-panel h2, .pdf-panel h3 {
  color: var(--ui-text) !important;
}
.workspace p, .sidecard p, .vm-panel p, .image-panel p, .pdf-panel p {
  color: var(--ui-muted) !important;
}
.field > span,
.image-field > span,
.pdf-field > span,
label > span { color: var(--ui-text); }
.field input, .field textarea, .field select,
.image-field input, .image-field select,
.pdf-field input, .pdf-field select,
input[type="text"], input[type="number"], input[type="email"], input[type="search"],
textarea, select {
  border-color: var(--ui-line-strong);
  border-radius: 11px;
  background: var(--ui-surface-soft);
  color: var(--ui-text);
}
.field input:focus, .field textarea:focus, .field select:focus,
.image-field input:focus, .image-field select:focus,
.pdf-field input:focus, .pdf-field select:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--ui-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-blue) 15%, transparent);
  outline: none;
}
.btn,
.image-button,
.pdf-button,
.vm-export,
.vm-upload-btn,
.cp-button,
.srt-button,
.title-button,
.word-button,
.hash-button,
.json-button,
.ratio-button {
  border-radius: 11px !important;
  font-weight: 800 !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:not(.ghost),
.image-button-primary,
.pdf-button-primary,
.vm-export,
.vm-upload-btn,
.cp-button-primary,
.srt-button-primary,
.title-button-primary,
.word-button-primary,
.hash-button-primary,
.json-button-primary,
.ratio-button-primary {
  background: var(--ui-blue) !important;
  border-color: var(--ui-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0,85,255,.14) !important;
}
.btn:not(.ghost):hover,
.image-button-primary:hover,
.pdf-button-primary:hover,
.vm-export:hover,
.vm-upload-btn:hover {
  background: var(--ui-blue-deep) !important;
  border-color: var(--ui-blue-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn.ghost,
.image-button-quiet,
.pdf-button:not(.pdf-button-primary) {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}
.note,
.clip-note,
.image-note,
.pdf-note {
  background: var(--ui-blue-soft) !important;
  border-color: color-mix(in srgb, var(--ui-blue) 20%, var(--ui-line)) !important;
  color: var(--ui-text) !important;
}
.output,
.image-result,
.pdf-output,
.vm-output {
  background: var(--ui-surface-soft);
  border-color: var(--ui-line);
  color: var(--ui-text);
}
.small, .clip-small, .pdf-field small { color: var(--ui-subtle) !important; }
.kicker, .image-overline, .pdf-eyebrow, .image-panel-title b {
  color: var(--ui-blue) !important;
}
.footer,
.pdf-footer,
.home-footer {
  border-top-color: var(--ui-line) !important;
  background: var(--ui-page-alt) !important;
  color: var(--ui-muted) !important;
}
.footer a, .pdf-footer a { color: var(--ui-blue) !important; }

/* PDF tool workspaces */
.pdf-tool-page { background: var(--pdf-bg) !important; color: var(--pdf-text) !important; }
.pdf-wrap { width: min(1180px, calc(100% - 48px)) !important; }
.pdf-topbar { position: sticky; top: 0; z-index: 80; }
.pdf-nav { min-height: 78px !important; }
.pdf-brand { font-size: 13px !important; letter-spacing: .09em !important; }
.pdf-brand-mark { border-radius: 11px !important; }
.pdf-nav-links { gap: 24px !important; }
.pdf-nav-links a { font-size: 12px !important; }
.pdf-theme { min-height: 39px; padding: 0 13px !important; cursor: pointer; }
.pdf-main { padding: 44px 0 82px !important; }
.pdf-breadcrumb { margin-bottom: 22px !important; font-size: 12px !important; }
.pdf-intro { gap: 42px !important; padding: 26px 0 44px !important; }
.pdf-intro h1 { font-size: clamp(43px, 5.8vw, 68px) !important; letter-spacing: -.06em !important; }
.pdf-lead { font-size: 17px !important; line-height: 1.75 !important; }
.pdf-intro-note { padding: 25px !important; border-radius: 19px !important; box-shadow: var(--ui-shadow); }
.pdf-intro-note strong { font-size: 28px !important; }
.pdf-intro-note span { font-size: 13px !important; }
.pdf-workspace { gap: 20px !important; }
.pdf-panel { padding: 28px !important; border-radius: 21px !important; box-shadow: var(--ui-shadow) !important; }
.pdf-panel-head { margin-bottom: 22px !important; color: var(--ui-subtle) !important; font-size: 10px !important; }
.pdf-panel-head b { color: var(--ui-blue) !important; }
.pdf-dropzone {
  min-height: 245px !important; padding: 30px !important;
  border: 1.5px dashed color-mix(in srgb, var(--ui-blue) 38%, var(--ui-line-strong)) !important;
  border-radius: 17px !important; background: var(--ui-surface-soft) !important;
}
.pdf-dropzone:hover, .pdf-dropzone.is-dragging {
  border-color: var(--ui-blue) !important; background: var(--ui-blue-soft) !important;
}
.pdf-drop-icon { border-color: color-mix(in srgb, var(--ui-blue) 26%, transparent) !important; background: var(--ui-blue-soft) !important; color: var(--ui-blue) !important; }
.pdf-dropzone strong { font-size: 16px !important; }
.pdf-dropzone small { font-size: 12px !important; }
.pdf-file-list li { padding: 12px 14px !important; border-radius: 12px !important; background: var(--ui-surface-soft) !important; }
.pdf-limits span { background: var(--ui-page-alt); }
.pdf-field { gap: 9px !important; margin-bottom: 19px !important; }
.pdf-field > span { font-size: 12px !important; }
.pdf-field input, .pdf-field select { min-height: 48px !important; font-size: 13px !important; }
.pdf-actions { gap: 11px !important; margin-top: 25px !important; }
.pdf-button { min-height: 47px !important; padding: 12px 18px !important; font-size: 12px !important; }
.pdf-button-primary { background: var(--ui-blue) !important; color: #fff !important; }
.pdf-status { border-radius: 12px !important; padding: 12px 14px !important; font-size: 12px !important; }
.pdf-output { border-color: color-mix(in srgb, var(--ui-success) 30%, var(--ui-line)) !important; background: color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface)) !important; }
.pdf-info-grid { gap: 16px !important; margin: 22px 0 40px !important; }
.pdf-info { padding: 19px !important; border-radius: 15px !important; background: var(--ui-surface) !important; }
.pdf-info b { font-size: 13px !important; }
.pdf-info span { font-size: 12px !important; }
.pdf-content-section { margin-top: 42px !important; padding: 30px !important; border-radius: 20px !important; background: var(--ui-surface) !important; box-shadow: var(--ui-shadow); }
.pdf-content-section h2 { font-size: 24px !important; }
.pdf-content-section p { font-size: 14px !important; }
.pdf-faq h3 { font-size: 14px !important; }
.pdf-faq p { font-size: 13px !important; }

/* Image tools */
.image-tool-shell { width: min(1180px, calc(100% - 48px)) !important; padding-top: 42px !important; }
.image-tool-heading { gap: 38px !important; padding: 28px 0 42px !important; }
.image-tool-heading h1 { font-size: clamp(43px, 5.6vw, 68px) !important; letter-spacing: -.06em !important; }
.image-tool-heading p { max-width: 720px; color: var(--ui-muted) !important; font-size: 17px !important; line-height: 1.75 !important; }
.image-heading-note { padding: 24px !important; border-radius: 19px !important; background: var(--ui-surface) !important; border-color: var(--ui-line) !important; box-shadow: var(--ui-shadow); }
.image-heading-note strong { color: var(--ui-blue) !important; font-size: 28px !important; }
.image-workspace { gap: 20px !important; }
.image-panel { padding: 28px !important; border-radius: 21px !important; }
.image-panel-title { margin-bottom: 22px !important; }
.image-panel-title span { color: var(--ui-subtle) !important; font-size: 10px !important; }
.image-panel-title b { font-size: 10px !important; }
.image-dropzone {
  min-height: 250px !important; padding: 30px !important; border-radius: 17px !important;
  border: 1.5px dashed color-mix(in srgb, var(--ui-blue) 38%, var(--ui-line-strong)) !important;
  background: var(--ui-surface-soft) !important;
}
.image-dropzone:hover { border-color: var(--ui-blue) !important; background: var(--ui-blue-soft) !important; }
.image-drop-icon { color: var(--ui-blue) !important; background: var(--ui-blue-soft) !important; border-color: transparent !important; }
.image-dropzone strong { color: var(--ui-text) !important; font-size: 16px !important; }
.image-dropzone small { color: var(--ui-muted) !important; font-size: 12px !important; }
.image-button { min-height: 46px !important; padding: 12px 18px !important; }
.image-limits span { background: var(--ui-page-alt) !important; border-color: var(--ui-line) !important; color: var(--ui-muted) !important; }
.image-results-section { margin-top: 42px !important; }
.image-results-heading h2 { color: var(--ui-text) !important; font-size: 30px !important; }
.image-results-grid > * { border-radius: 16px; }

/* Video and creator workspaces */
.vm-app, .cp-app, .srt-app, .title-app, .word-app, .hash-app, .ratio-app, .json-app {
  width: min(1180px, calc(100% - 48px)) !important;
  color: var(--ui-text) !important;
}
.vm-heading, .srt-heading, .title-intro, .word-heading, .ratio-heading, .json-heading {
  gap: 36px !important; padding: 48px 0 36px !important;
}
.vm-heading h1, .srt-heading h1, .title-intro h1, .word-heading h1, .ratio-heading h1, .json-heading h1 {
  color: var(--ui-text) !important;
  font-size: clamp(43px, 5.6vw, 68px) !important;
  letter-spacing: -.06em !important;
}
.vm-heading p, .srt-heading p, .title-intro p, .word-heading p, .ratio-heading p, .json-heading p {
  color: var(--ui-muted) !important; font-size: 16px !important; line-height: 1.75 !important;
}
.vm-heading-stats, .image-heading-note, .cp-heading-note {
  border: 1px solid var(--ui-line) !important; border-radius: 18px !important;
  background: var(--ui-surface) !important; box-shadow: var(--ui-shadow) !important;
}
.vm-heading-stats strong { color: var(--ui-blue) !important; }
.vm-workbench { gap: 20px !important; }
.vm-panel { padding: 24px !important; border-radius: 20px !important; }
.vm-panel-top { color: var(--ui-subtle) !important; border-bottom-color: var(--ui-line) !important; }
.vm-stage, .vm-empty, .vm-output-empty { background: var(--ui-surface-soft) !important; border-color: var(--ui-line) !important; }
.vm-film-icon { background: var(--ui-blue-soft) !important; color: var(--ui-blue) !important; }
.vm-empty strong, .vm-settings h2, .vm-output-empty b { color: var(--ui-text) !important; }
.vm-empty p, .vm-output-empty small, .vm-settings p { color: var(--ui-muted) !important; }
.vm-upload-btn, .vm-export { border-radius: 11px !important; }
.vm-export:disabled { background: var(--ui-blue) !important; opacity: .42; }
.vm-progress { background: var(--ui-page-alt) !important; }
.vm-progress #progressBar { background: var(--ui-blue) !important; }
.vm-limit { background: var(--ui-blue-soft) !important; border-color: var(--ui-line) !important; color: var(--ui-text) !important; }
.vm-footnote { background: var(--ui-page-alt) !important; border-color: var(--ui-line) !important; color: var(--ui-muted) !important; }
.image-tool-page .faq, .pdf-tool-page .pdf-content-section { color: var(--ui-text); }

/* Main portal homepage — brighter, wider and easier to scan */
.home-page {
  --sl-bg: var(--ui-page);
  --sl-bg-raised: var(--ui-page-alt);
  --sl-panel: var(--ui-surface);
  --sl-panel-2: var(--ui-surface-soft);
  --sl-card: var(--ui-surface);
  --sl-line: var(--ui-line);
  --sl-line-soft: var(--ui-line);
  --sl-text: var(--ui-text);
  --sl-muted: var(--ui-muted);
  --sl-dim: var(--ui-subtle);
  --sl-lime: var(--ui-blue);
  --sl-blue: #0b9fb2;
  --sl-violet: #7c5ce5;
  --sl-pink: #d94f8c;
}
.home-page .site-header { background: rgba(255,255,255,.91) !important; border-bottom-color: var(--ui-line) !important; }
.home-page .home-wrap { width: min(1260px, calc(100% - 56px)) !important; }
.home-page .home-brand-name { color: var(--ui-text) !important; }
.home-page .home-brand-name > span { color: var(--ui-blue) !important; }
.home-page .home-nav { color: var(--ui-muted) !important; }
.home-page .home-nav a:hover { color: var(--ui-blue) !important; }
.home-page .home-nav-cta { border-color: var(--ui-blue) !important; background: var(--ui-blue) !important; color: #fff !important; }
.home-page .home-nav-cta:hover { background: var(--ui-blue-deep) !important; }
.home-page .theme-toggle { color: var(--ui-text) !important; background: #fff !important; border-color: var(--ui-line-strong) !important; }
.home-page .sl-hero {
  padding-top: 92px !important;
  background:
    radial-gradient(ellipse at 82% 4%, rgba(0,85,255,.10), transparent 34%),
    radial-gradient(ellipse at 8% 82%, rgba(231,111,81,.055), transparent 35%),
    linear-gradient(180deg, #fafdff 0%, #f1f6ff 100%) !important;
  border-bottom-color: var(--ui-line) !important;
}
.home-page .sl-hero-grid {
  opacity: .28 !important;
  background-image: linear-gradient(rgba(0,85,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,85,255,.045) 1px,transparent 1px) !important;
}
.home-page .sl-orb-one { border-color: rgba(0,85,255,.13) !important; box-shadow: 0 0 0 54px rgba(0,85,255,.018),0 0 0 112px rgba(0,85,255,.012) !important; }
.home-page .sl-orb-two { background: rgba(231,111,81,.08) !important; }
.home-page .sl-eyebrow { color: var(--ui-blue) !important; border-color: #d8e4ff !important; background: #edf3ff !important; }
.home-page .sl-eyebrow-dot { background: var(--ui-blue) !important; box-shadow: 0 0 0 4px rgba(0,85,255,.10) !important; }
.home-page .sl-hero h1 { color: var(--ui-text) !important; font-size: clamp(52px,6.3vw,78px) !important; letter-spacing: -.07em !important; }
.home-page .sl-hero h1 span { color: var(--ui-blue) !important; }
.home-page .sl-hero-lead { color: var(--ui-muted) !important; font-size: 17px !important; line-height: 1.82 !important; }
.home-page .sl-button-primary { background: var(--ui-blue) !important; color: #fff !important; box-shadow: 0 10px 26px rgba(0,85,255,.15) !important; }
.home-page .sl-button-primary:hover { background: var(--ui-blue-deep) !important; }
.home-page .sl-button-quiet { border-color: var(--ui-line-strong) !important; background: #fff !important; color: var(--ui-text) !important; }
.home-page .sl-search-label { color: var(--ui-muted) !important; }
.home-page .sl-search { border-color: var(--ui-line-strong) !important; background: #fff !important; box-shadow: 0 8px 26px rgba(19,42,81,.055) !important; }
.home-page .sl-search input { color: var(--ui-text) !important; }
.home-page .sl-search-hint, .home-page .sl-proof-row { color: var(--ui-muted) !important; }
.home-page .sl-proof-row i { color: var(--ui-success) !important; }
.home-page .sl-hero-visual {
  background: #fff !important; border-color: var(--ui-line) !important;
  color: var(--ui-text) !important; box-shadow: 0 26px 66px rgba(19,42,81,.12) !important;
}
.home-page .sl-visual-top { border-color: var(--ui-line) !important; color: var(--ui-subtle) !important; }
.home-page .sl-window-dots i { background: #cad3e1 !important; }
.home-page .sl-window-dots i:first-child { background: var(--ui-coral) !important; }
.home-page .sl-window-dots i:nth-child(2) { background: #f2bd55 !important; }
.home-page .sl-window-dots i:last-child { background: #37b77c !important; }
.home-page .sl-visual-live { color: var(--ui-success) !important; }
.home-page .sl-mini-label { color: var(--ui-muted) !important; }
.home-page .sl-visual-heading h2 { color: var(--ui-text) !important; }
.home-page .sl-visual-heading h2 em { color: var(--ui-blue) !important; }
.home-page .sl-visual-symbol { background: var(--ui-blue-soft) !important; border-color: #d8e4ff !important; color: var(--ui-blue) !important; }
.home-page .sl-feature-tool { background: linear-gradient(120deg,#eef4ff,#f8faff) !important; border-color: #d9e5ff !important; }
.home-page .sl-feature-tool-top small, .home-page .sl-feature-tool-foot { color: var(--ui-muted) !important; }
.home-page .sl-feature-tool-top b { color: var(--ui-text) !important; }
.home-page .sl-feature-icon { background: var(--ui-blue) !important; color: #fff !important; }
.home-page .sl-open-arrow, .home-page .sl-feature-tool-foot i { color: var(--ui-blue) !important; }
.home-page .sl-quick-tools a { background: var(--ui-surface-soft) !important; border-color: var(--ui-line) !important; }
.home-page .sl-quick-tools a b { color: var(--ui-text) !important; }
.home-page .sl-quick-tools a small { color: var(--ui-muted) !important; }
.home-page .sl-floating-note { background: #fff !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; box-shadow: var(--ui-shadow) !important; }
.home-page .sl-floating-note span { color: var(--ui-coral) !important; }
.home-page .sl-hero-stats { border-top-color: var(--ui-line) !important; }
.home-page .sl-stat { border-right-color: var(--ui-line) !important; }
.home-page .sl-stat strong { color: var(--ui-text) !important; }
.home-page .sl-stat span { color: var(--ui-muted) !important; }
.home-page .sl-stat small, .home-page .sl-stat-note { color: var(--ui-subtle) !important; }
.home-page .sl-stat-note b { color: var(--ui-blue) !important; }
.home-page .sl-studios-section { background: #fff !important; }
.home-page .sl-section-head h2, .home-page .sl-approach-intro h2 { color: var(--ui-text) !important; }
.home-page .sl-section-head h2 em, .home-page .sl-approach-intro h2 em { color: var(--ui-blue) !important; }
.home-page .sl-section-kicker { color: var(--ui-blue) !important; }
.home-page .sl-section-kicker span { color: var(--ui-subtle) !important; }
.home-page .sl-section-head p, .home-page .sl-approach-intro > p { color: var(--ui-muted) !important; }
.home-page .sl-section-aside { border-color: var(--ui-line) !important; background: var(--ui-surface-soft) !important; }
.home-page .sl-section-aside b { color: var(--ui-text) !important; }
.home-page .sl-section-aside small { color: var(--ui-muted) !important; }
.home-page .sl-aside-icon { background: var(--ui-blue-soft) !important; color: var(--ui-blue) !important; }
.home-page .sl-studio-card {
  min-height: 238px !important; padding: 22px !important;
  border-color: var(--ui-line) !important; border-radius: 18px !important;
  background: #fff !important; box-shadow: 0 8px 26px rgba(19,42,81,.055) !important;
}
.home-page .sl-studio-card:hover { transform: translateY(-4px); border-color: #b8ccf7 !important; box-shadow: var(--ui-shadow-hover) !important; }
.home-page .sl-studio-card h3 { color: var(--ui-text) !important; font-size: 19px !important; }
.home-page .sl-studio-card p { color: var(--ui-muted) !important; font-size: 13px !important; }
.home-page .sl-studio-card-foot { border-color: var(--ui-line) !important; color: var(--ui-muted) !important; font-size: 9px !important; }
.home-page .sl-studio-host { color: var(--ui-subtle) !important; font-size: 8px !important; }
.home-page .sl-studio-status { border-color: var(--ui-line) !important; color: var(--ui-muted) !important; }
.home-page .sl-status-live { background: #eaf8f1 !important; color: #16865c !important; border-color: #cdeedd !important; }
.home-page .sl-status-soon { background: var(--ui-coral-soft) !important; color: #a84c36 !important; border-color: #f5d4ca !important; }
.home-page .sl-studios-footnote { color: var(--ui-muted) !important; font-size: 12px !important; }
.home-page .sl-studios-footnote span { color: var(--ui-coral) !important; }
.home-page .home-tools-section.sl-tools-section { background: #f4f7fc !important; border-top-color: var(--ui-line) !important; border-bottom-color: var(--ui-line) !important; }
.home-page .sl-tools-count { background: #fff !important; border-color: var(--ui-line) !important; }
.home-page .sl-tools-count strong { color: var(--ui-blue) !important; }
.home-page .sl-tools-count span { color: var(--ui-text) !important; }
.home-page .sl-tools-count small { color: var(--ui-muted) !important; }
.home-page .sl-filter-row { border-bottom-color: var(--ui-line) !important; }
.home-page .sl-filter-row .home-filter {
  min-height: 40px !important; padding: 9px 14px !important;
  border: 1px solid var(--ui-line) !important; border-radius: 999px !important;
  background: #fff !important; color: var(--ui-muted) !important; font-size: 11px !important;
}
.home-page .sl-filter-row .home-filter:hover { border-color: #b4c9f5 !important; color: var(--ui-blue) !important; }
.home-page .sl-filter-row .home-filter.active { border-color: var(--ui-blue) !important; background: var(--ui-blue-soft) !important; color: var(--ui-blue) !important; }
.home-page .sl-filter-row .home-sort-note { color: var(--ui-subtle) !important; }
.home-page .home-tool-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 20px !important; }
.home-page .home-tool-card {
  min-height: 352px !important; border: 1px solid var(--ui-line) !important;
  border-radius: 19px !important; background: #fff !important;
  box-shadow: 0 9px 28px rgba(19,42,81,.055) !important;
}
.home-page .home-tool-card:hover { background: #fff !important; border-color: #b8ccf7 !important; box-shadow: var(--ui-shadow-hover) !important; }
.home-page .home-card-art { min-height: 148px !important; height: 148px !important; border-bottom-color: var(--ui-line) !important; }
.home-page .home-card-body { padding: 20px !important; }
.home-page .home-card-category { color: var(--ui-blue) !important; font-size: 9px !important; }
.home-page .home-tool-card h3 { color: var(--ui-text) !important; font-size: 17px !important; }
.home-page .home-tool-card p { color: var(--ui-muted) !important; font-size: 12px !important; line-height: 1.75 !important; }
.home-page .home-card-bottom { border-top-color: var(--ui-line) !important; }
.home-page .home-domain { color: var(--ui-success) !important; font-size: 9px !important; }
.home-page .home-domain small { color: var(--ui-subtle) !important; font-size: 8px !important; }
.home-page .home-card-bottom a { background: var(--ui-blue) !important; border-color: var(--ui-blue) !important; color: #fff !important; border-radius: 9px !important; }
.home-page .home-card-bottom a:hover { background: var(--ui-blue-deep) !important; color: #fff !important; }
.home-page .home-no-results { border-color: var(--ui-line-strong) !important; color: var(--ui-muted) !important; }
.home-page .sl-approach-section { background: #fff !important; }
.home-page .sl-approach-card { border-color: var(--ui-line) !important; background: #fff !important; box-shadow: 0 8px 25px rgba(19,42,81,.045); }
.home-page .sl-approach-card h3 { color: var(--ui-text) !important; }
.home-page .sl-approach-card p { color: var(--ui-muted) !important; }
.home-page .sl-approach-number { color: var(--ui-subtle) !important; }
.home-page .sl-approach-lime { background: var(--ui-blue-soft) !important; color: var(--ui-blue) !important; }
.home-page .sl-approach-blue { background: #e8f8fb !important; color: #087d91 !important; }
.home-page .sl-approach-violet { background: #f1edff !important; color: #7757d8 !important; }
.home-page .home-footer { background: #edf2fa !important; border-top-color: var(--ui-line) !important; }
.home-page .home-footer-main > p, .home-page .home-footer-main nav { color: var(--ui-muted) !important; }
.home-page .home-footer-bottom { color: var(--ui-subtle) !important; border-top-color: var(--ui-line) !important; }
.home-page .home-footer-main nav a:hover { color: var(--ui-blue) !important; }

/* Category studio landing pages */
.studio-home { background: var(--ui-page) !important; color: var(--ui-text) !important; }
.studio-home .shell { width: min(1200px, calc(100% - 56px)) !important; }
.studio-home .top {
  min-height: 82px !important; border-bottom-color: var(--ui-line) !important;
  background: transparent !important;
}
.studio-home .brand { color: var(--ui-text) !important; font-size: 13px !important; letter-spacing: .1em !important; }
.studio-home .brand-mark { width: 39px !important; height: 39px !important; border-radius: 11px !important; }
.studio-home .top-link, .studio-home .theme-toggle {
  min-height: 40px !important; border: 1px solid var(--ui-line-strong) !important;
  border-radius: 10px !important; background: #fff !important; color: var(--ui-text) !important;
  padding: 0 14px !important; font-size: 12px !important;
}
.studio-home .hero {
  display: grid !important; grid-template-columns: minmax(0,1.6fr) minmax(230px,.65fr) !important;
  align-items: end !important; gap: 40px !important; padding: 76px 0 54px !important;
}
.studio-home .eyebrow { color: var(--ui-blue) !important; font-size: 11px !important; letter-spacing: .15em !important; }
.studio-home .hero h1 {
  margin: 16px 0 20px !important; color: var(--ui-text) !important;
  font-size: clamp(46px,6vw,72px) !important; line-height: 1.02 !important; letter-spacing: -.065em !important;
}
.studio-home .lead { max-width: 760px !important; color: var(--ui-muted) !important; font-size: 18px !important; line-height: 1.78 !important; }
.studio-home .hero-note {
  padding: 25px !important; border: 1px solid #dce7fa !important; border-radius: 19px !important;
  background: linear-gradient(145deg,#fff,#f1f6ff) !important; box-shadow: var(--ui-shadow) !important;
}
.studio-home .hero-note strong { color: var(--ui-blue) !important; font-size: 30px !important; }
.studio-home .hero-note span { color: var(--ui-muted) !important; font-size: 13px !important; line-height: 1.7 !important; }
.studio-home .section-head { margin: 20px 0 24px !important; }
.studio-home .section-head h2 { color: var(--ui-text) !important; font-size: 28px !important; letter-spacing: -.045em !important; }
.studio-home .section-head p { color: var(--ui-muted) !important; font-size: 14px !important; line-height: 1.7 !important; }
.studio-home .studio-search {
  min-height: 58px !important; margin: 0 0 24px !important; padding: 0 18px !important;
  border: 1px solid var(--ui-line-strong) !important; border-radius: 14px !important;
  background: #fff !important; box-shadow: 0 8px 24px rgba(19,42,81,.045) !important;
}
.studio-home .studio-search > span { color: var(--ui-blue) !important; font-size: 22px !important; }
.studio-home .studio-search input { color: var(--ui-text) !important; font-size: 15px !important; }
.studio-home .tool-grid, .studio-home .coming-grid {
  display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 20px !important;
}
.studio-home .tool-card {
  min-height: 245px !important; padding: 26px !important;
  border: 1px solid var(--ui-line) !important; border-radius: 19px !important;
  background: #fff !important; box-shadow: 0 9px 28px rgba(19,42,81,.05) !important;
}
.studio-home .tool-card:hover { transform: translateY(-3px) !important; border-color: #b6caf5 !important; background: #fff !important; box-shadow: var(--ui-shadow-hover) !important; }
.studio-home .card-top { color: var(--ui-subtle) !important; font-size: 10px !important; letter-spacing: .12em !important; }
.studio-home .card-index { color: var(--ui-blue) !important; }
.studio-home .card-type { color: var(--ui-success) !important; }
.studio-home .tool-card h2 { margin: 28px 0 10px !important; color: var(--ui-text) !important; font-size: 23px !important; letter-spacing: -.04em !important; }
.studio-home .tool-card p { color: var(--ui-muted) !important; font-size: 14px !important; line-height: 1.75 !important; }
.studio-home .card-link { border-top-color: var(--ui-line) !important; color: var(--ui-blue) !important; font-size: 13px !important; }
.studio-home .card-link:hover { color: var(--ui-blue-deep) !important; }
.studio-home .coming-section { margin-top: 64px !important; padding-top: 38px !important; border-top-color: var(--ui-line) !important; }
.studio-home .coming-card {
  min-height: 190px !important; padding: 23px !important; border: 1px solid var(--ui-line) !important;
  border-radius: 17px !important; background: #fbfcff !important;
}
.studio-home .coming-card h3 { margin: 20px 0 9px !important; color: var(--ui-text) !important; font-size: 18px !important; }
.studio-home .coming-card p { color: var(--ui-muted) !important; font-size: 13px !important; line-height: 1.7 !important; }
.studio-home .soon-label { color: var(--ui-coral) !important; font-size: 10px !important; }
.studio-home .coming-card .card-index { color: var(--ui-subtle) !important; }
.studio-home .no-search-results { color: var(--ui-muted) !important; }
.studio-home .how { gap: 18px !important; margin: 52px 0 76px !important; }
.studio-home .how-item {
  padding: 24px !important; border: 1px solid var(--ui-line) !important;
  border-radius: 17px !important; background: #fff !important; box-shadow: 0 8px 24px rgba(19,42,81,.04);
}
.studio-home .how-item b { color: var(--ui-blue) !important; font-size: 13px !important; }
.studio-home .how-item span { color: var(--ui-muted) !important; font-size: 13px !important; line-height: 1.7 !important; }
.studio-home footer.shell { border-top-color: var(--ui-line) !important; color: var(--ui-subtle) !important; padding: 27px 0 40px !important; }
.studio-home footer a { color: var(--ui-blue) !important; }

/* General spacious section rhythm and mobile behavior */
.faq { margin-top: 42px !important; padding: 44px 0 !important; }
.faq .wrap { max-width: 1000px; }
.faq h2 { color: var(--ui-text) !important; font-size: 28px !important; letter-spacing: -.04em !important; }
.faq h3 { color: var(--ui-text) !important; font-size: 16px !important; }
.faq p { color: var(--ui-muted) !important; font-size: 14px !important; line-height: 1.8 !important; }
@media (max-width: 1050px) {
  .home-page .home-tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .studio-home .tool-grid, .studio-home .coming-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
  .home-page .home-wrap, .studio-home .shell, .pdf-wrap, .image-tool-shell,
  .vm-app, .cp-app, .srt-app, .title-app, .word-app, .hash-app, .ratio-app, .json-app {
    width: min(100% - 32px, 720px) !important;
  }
  .home-page .sl-hero { padding-top: 54px !important; }
  .home-page .sl-hero-layout { grid-template-columns: 1fr !important; gap: 34px !important; padding-bottom: 38px !important; }
  .home-page .sl-hero-visual { max-width: 680px; width: 100%; }
  .home-page .sl-hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 18px 12px !important; }
  .home-page .sl-stat { border-right: 0 !important; padding: 0 !important; }
  .home-page .sl-stat + .sl-stat { padding-left: 0 !important; }
  .home-page .sl-stat-note { justify-self: start; text-align: left; }
  .home-page .sl-section-head { align-items: flex-start !important; flex-direction: column !important; gap: 16px !important; }
  .home-page .sl-studio-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .home-page .sl-tools-section, .home-page .sl-studios-section, .home-page .sl-approach-section { padding: 58px 0 !important; }
  .home-page .home-tool-grid { grid-template-columns: 1fr !important; }
  .home-page .home-tool-card { display: grid !important; grid-template-columns: 142px minmax(0,1fr) !important; min-height: 0 !important; }
  .home-page .home-card-art { height: 100% !important; min-height: 210px !important; border-right: 1px solid var(--ui-line) !important; border-bottom: 0 !important; }
  .home-page .home-card-art svg { width: 142px !important; height: 100% !important; }
  .home-page .home-card-body { padding: 16px !important; }
  .home-page .home-tool-card p { font-size: 11px !important; }
  .home-page .home-card-bottom { align-items: flex-start !important; flex-direction: column !important; }
  .home-page .sl-approach-grid { grid-template-columns: 1fr !important; }
  .studio-home .hero { grid-template-columns: 1fr !important; padding: 52px 0 36px !important; gap: 22px !important; }
  .studio-home .tool-grid, .studio-home .coming-grid { grid-template-columns: 1fr !important; }
  .studio-home .tool-card { min-height: 0 !important; padding: 23px !important; }
  .studio-home .coming-card { min-height: 0 !important; }
  .pdf-intro { grid-template-columns: 1fr !important; padding: 14px 0 32px !important; gap: 20px !important; }
  .pdf-workspace, .image-workspace, .vm-workbench { grid-template-columns: 1fr !important; }
  .pdf-panel, .image-panel, .vm-panel { padding: 20px !important; }
  .pdf-main { padding: 28px 0 56px !important; }
  .pdf-info-grid { grid-template-columns: 1fr !important; }
  .pdf-content-section { padding: 22px !important; }
  .image-tool-heading, .vm-heading, .srt-heading, .title-intro, .word-heading, .ratio-heading, .json-heading {
    grid-template-columns: 1fr !important; padding: 28px 0 28px !important; gap: 20px !important;
  }
  .image-dropzone, .pdf-dropzone { min-height: 205px !important; }
  .pdf-nav { min-height: 70px !important; }
  .pdf-nav-links { gap: 12px !important; }
  .pdf-nav-links a { font-size: 10px !important; }
  .faq { padding: 30px 0 !important; }
}
@media (max-width: 500px) {
  .home-page .sl-hero h1 { font-size: clamp(44px,12vw,58px) !important; }
  .home-page .sl-hero-actions { align-items: stretch; flex-direction: column; }
  .home-page .sl-button { justify-content: center; }
  .home-page .sl-studio-grid { grid-template-columns: 1fr !important; }
  .home-page .home-tool-card { grid-template-columns: 1fr !important; }
  .home-page .home-card-art { min-height: 130px !important; height: 130px !important; border-right: 0 !important; border-bottom: 1px solid var(--ui-line) !important; }
  .home-page .home-card-art svg { width: 100% !important; height: 130px !important; }
  .home-page .home-card-bottom { flex-direction: row !important; align-items: center !important; }
  .pdf-nav-links a { display: none; }
  .pdf-wrap, .image-tool-shell, .vm-app, .cp-app, .srt-app, .title-app, .word-app, .hash-app, .ratio-app, .json-app {
    width: calc(100% - 28px) !important;
  }
  .pdf-field-grid, .image-form-grid, .clip-controls { grid-template-columns: 1fr !important; }
  .pdf-actions, .image-action-row, .vm-actions { align-items: stretch; flex-direction: column; }
  .pdf-actions .pdf-button, .image-action-row .image-button, .vm-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Dark appearance — true dark surfaces rather than a dark toggle over light cards. */
:root[data-theme="dark"] .home-page .sl-hero {
  background:
    radial-gradient(ellipse at 82% 4%, rgba(55,112,190,.2), transparent 34%),
    radial-gradient(ellipse at 8% 82%, rgba(231,111,81,.075), transparent 35%),
    linear-gradient(180deg,#101b2b 0%,#0b1220 100%) !important;
  border-bottom-color: var(--ui-line) !important;
}
:root[data-theme="dark"] .home-page .sl-hero h1,
:root[data-theme="dark"] .home-page .sl-visual-heading h2,
:root[data-theme="dark"] .home-page .sl-section-head h2,
:root[data-theme="dark"] .home-page .sl-approach-intro h2,
:root[data-theme="dark"] .home-page .sl-studio-card h3,
:root[data-theme="dark"] .home-page .home-tool-card h3,
:root[data-theme="dark"] .home-page .sl-approach-card h3 {
  color: var(--ui-text) !important;
}
:root[data-theme="dark"] .home-page .sl-hero-lead,
:root[data-theme="dark"] .home-page .sl-section-head p,
:root[data-theme="dark"] .home-page .sl-approach-intro > p,
:root[data-theme="dark"] .home-page .sl-studio-card p,
:root[data-theme="dark"] .home-page .home-tool-card p,
:root[data-theme="dark"] .home-page .sl-approach-card p {
  color: var(--ui-muted) !important;
}
:root[data-theme="dark"] .home-page .sl-eyebrow,
:root[data-theme="dark"] .home-page .sl-section-head h2 em,
:root[data-theme="dark"] .home-page .sl-approach-intro h2 em,
:root[data-theme="dark"] .home-page .home-brand-name > span {
  color: var(--ui-blue) !important;
}
:root[data-theme="dark"] .home-page .sl-hero-visual,
:root[data-theme="dark"] .home-page .sl-studio-card,
:root[data-theme="dark"] .home-page .home-tool-card,
:root[data-theme="dark"] .home-page .sl-approach-card,
:root[data-theme="dark"] .home-page .home-principles article,
:root[data-theme="dark"] .home-page .sl-tools-count {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow) !important;
}
:root[data-theme="dark"] .home-page .sl-feature-tool,
:root[data-theme="dark"] .home-page .sl-quick-tools a,
:root[data-theme="dark"] .home-page .sl-section-aside,
:root[data-theme="dark"] .home-page .sl-filter-row .home-filter,
:root[data-theme="dark"] .home-page .home-filter {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-muted) !important;
}
:root[data-theme="dark"] .home-page .sl-filter-row .home-filter.active {
  background: var(--ui-blue-soft) !important;
  border-color: var(--ui-blue) !important;
  color: var(--ui-blue) !important;
}
:root[data-theme="dark"] .home-page .sl-feature-tool-top b,
:root[data-theme="dark"] .home-page .sl-quick-tools a b,
:root[data-theme="dark"] .home-page .sl-section-aside b,
:root[data-theme="dark"] .home-page .home-stat strong,
:root[data-theme="dark"] .home-page .sl-tools-count span {
  color: var(--ui-text) !important;
}
:root[data-theme="dark"] .home-page .home-tools-section.sl-tools-section,
:root[data-theme="dark"] .home-page .sl-studios-section,
:root[data-theme="dark"] .home-page .sl-approach-section,
:root[data-theme="dark"] .home-page .home-about-section {
  background: var(--ui-page) !important;
  border-color: var(--ui-line) !important;
}
:root[data-theme="dark"] .home-page .sl-section-aside small,
:root[data-theme="dark"] .home-page .sl-quick-tools a small,
:root[data-theme="dark"] .home-page .sl-stat span,
:root[data-theme="dark"] .home-page .sl-stat small,
:root[data-theme="dark"] .home-page .sl-stat-note,
:root[data-theme="dark"] .home-page .home-principles p {
  color: var(--ui-muted) !important;
}
:root[data-theme="dark"] .home-page .home-card-bottom { border-top-color: var(--ui-line) !important; }
:root[data-theme="dark"] .home-page .home-domain { color: #86d9b3 !important; }
:root[data-theme="dark"] .home-page .home-card-bottom a {
  background: var(--ui-blue-soft) !important;
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-blue) !important;
}
:root[data-theme="dark"] .home-page .home-footer {
  background: #080e18 !important; border-top-color: var(--ui-line) !important;
}
:root[data-theme="dark"] .home-page .home-footer-main > p,
:root[data-theme="dark"] .home-page .home-footer-main nav,
:root[data-theme="dark"] .home-page .home-footer-bottom {
  color: var(--ui-muted) !important;
}

/* Category studio landing pages */
:root[data-theme="dark"] .studio-home .top-link,
:root[data-theme="dark"] .studio-home .theme-toggle,
:root[data-theme="dark"] .pdf-theme {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-text) !important;
}
:root[data-theme="dark"] .studio-home .hero-note,
:root[data-theme="dark"] .studio-home .tool-card,
:root[data-theme="dark"] .studio-home .how-item {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
  box-shadow: var(--ui-shadow) !important;
}
:root[data-theme="dark"] .studio-home .coming-card {
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-line) !important;
}
:root[data-theme="dark"] .studio-home .hero h1,
:root[data-theme="dark"] .studio-home .section-head h2,
:root[data-theme="dark"] .studio-home .tool-card h2,
:root[data-theme="dark"] .studio-home .coming-card h3,
:root[data-theme="dark"] .studio-home .how-item b,
:root[data-theme="dark"] .studio-home .hero-note strong {
  color: var(--ui-text) !important;
}
:root[data-theme="dark"] .studio-home .lead,
:root[data-theme="dark"] .studio-home .section-head p,
:root[data-theme="dark"] .studio-home .tool-card p,
:root[data-theme="dark"] .studio-home .coming-card p,
:root[data-theme="dark"] .studio-home .how-item span,
:root[data-theme="dark"] .studio-home .hero-note span {
  color: var(--ui-muted) !important;
}
:root[data-theme="dark"] .studio-home .card-link { border-top-color: var(--ui-line) !important; color: var(--ui-blue) !important; }
:root[data-theme="dark"] .studio-home .studio-search {
  background: var(--ui-surface) !important; border-color: var(--ui-line-strong) !important;
}
:root[data-theme="dark"] .studio-home .studio-search input { color: var(--ui-text) !important; }
:root[data-theme="dark"] .studio-home .coming-section { border-top-color: var(--ui-line) !important; }
:root[data-theme="dark"] .studio-home footer.shell { border-top-color: var(--ui-line) !important; color: var(--ui-muted) !important; }

/* Shared dark form controls and utility surfaces */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background-color: var(--ui-surface-soft) !important;
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-text) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--ui-subtle) !important; }
:root[data-theme="dark"] .pdf-content-section,
:root[data-theme="dark"] .pdf-info,
:root[data-theme="dark"] .pdf-panel,
:root[data-theme="dark"] .image-panel,
:root[data-theme="dark"] .vm-panel {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
}
:root[data-theme="dark"] .pdf-content-section h2,
:root[data-theme="dark"] .pdf-content-section h3,
:root[data-theme="dark"] .pdf-info b { color: var(--ui-text) !important; }
:root[data-theme="dark"] .pdf-content-section p,
:root[data-theme="dark"] .pdf-info span { color: var(--ui-muted) !important; }


/* --------------------------------------------------------------------------
   Sarmaya Labs UI refresh — spacious utility-first design system
   Reference direction: Smallpdf's strong hierarchy and FreePDFConvert's
   warm accent treatment, translated into an original Sarmaya visual language.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --ui-page: #f7f9fc;
  --ui-page-alt: #eff4fa;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8faff;
  --ui-surface-blue: #edf3ff;
  --ui-line: #e3eaf3;
  --ui-line-strong: #cbd7e7;
  --ui-text: #17243b;
  --ui-muted: #65758d;
  --ui-subtle: #8796aa;
  --ui-blue: #0758ed;
  --ui-blue-deep: #0647c5;
  --ui-blue-soft: #eaf1ff;
  --ui-coral: #e65f4f;
  --ui-coral-soft: #fff0ec;
  --ui-success: #16865c;
  --ui-shadow: 0 16px 42px rgba(20, 43, 82, .065);
  --ui-shadow-hover: 0 22px 54px rgba(20, 43, 82, .11);
  --pdf-bg: #f7f9fc;
  --pdf-panel: #ffffff;
  --pdf-panel-2: #f8faff;
  --pdf-line: #e3eaf3;
  --pdf-text: #17243b;
  --pdf-muted: #65758d;
  --pdf-soft: #8796aa;
  --pdf-accent: #0758ed;
  --theme-bg: #f7f9fc;
  --theme-surface: #ffffff;
  --theme-surface-2: #f8faff;
  --theme-surface-3: #eff4fa;
  --theme-line: #e3eaf3;
  --theme-line-strong: #cbd7e7;
  --theme-text: #17243b;
  --theme-muted: #65758d;
  --theme-dim: #8796aa;
  --theme-shadow: 0 16px 42px rgba(20,43,82,.065);
  --page: #f7f9fc;
  --panel: #ffffff;
  --panel2: #f8faff;
  --line: #e3eaf3;
  --text: #17243b;
  --muted: #65758d;
  --soft: #8796aa;
  --accent: #0758ed;
}
:root[data-theme="dark"] {
  --ui-page: #0b1423;
  --ui-page-alt: #101c2e;
  --ui-surface: #142238;
  --ui-surface-soft: #192a43;
  --ui-surface-blue: #1b3154;
  --ui-line: #293b55;
  --ui-line-strong: #3b506e;
  --ui-text: #f1f5fc;
  --ui-muted: #adbad0;
  --ui-subtle: #8293ad;
  --ui-blue: #8db2ff;
  --ui-blue-deep: #a9c4ff;
  --ui-blue-soft: #1b3154;
  --ui-coral: #ff9886;
  --ui-coral-soft: #3b272b;
  --ui-success: #70d8a8;
  --ui-shadow: 0 18px 46px rgba(0,0,0,.22);
  --ui-shadow-hover: 0 22px 56px rgba(0,0,0,.34);
  --pdf-bg: #0b1423;
  --pdf-panel: #142238;
  --pdf-panel-2: #192a43;
  --pdf-line: #293b55;
  --pdf-text: #f1f5fc;
  --pdf-muted: #adbad0;
  --pdf-soft: #8293ad;
  --pdf-accent: #8db2ff;
  --theme-bg: #0b1423;
  --theme-surface: #142238;
  --theme-surface-2: #192a43;
  --theme-surface-3: #1b3154;
  --theme-line: #293b55;
  --theme-line-strong: #3b506e;
  --theme-text: #f1f5fc;
  --theme-muted: #adbad0;
  --theme-dim: #8293ad;
  --theme-shadow: 0 18px 46px rgba(0,0,0,.22);
  --page: #0b1423;
  --panel: #142238;
  --panel2: #192a43;
  --line: #293b55;
  --text: #f1f5fc;
  --muted: #adbad0;
  --soft: #8293ad;
  --accent: #8db2ff;
}
html { scroll-padding-top: 104px; }
body {
  font-family: Inter, "Source Sans 3", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: -0.005em;
}
a { text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
:root[data-theme="light"] body { background: var(--ui-page) !important; }
:root[data-theme="dark"] body { background: var(--ui-page) !important; }

/* Shared navigation: calm, crisp and consistent across every studio. */
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .pdf-topbar {
  background: rgba(255,255,255,.94) !important;
  border-bottom-color: var(--ui-line) !important;
  box-shadow: 0 5px 24px rgba(20,43,82,.035) !important;
  backdrop-filter: blur(16px);
}
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .pdf-topbar {
  background: rgba(11,20,35,.92) !important;
  border-bottom-color: var(--ui-line) !important;
  box-shadow: 0 5px 24px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(16px);
}
.home-page .site-header { background: rgba(255,255,255,.94) !important; }
:root[data-theme="dark"] .home-page .site-header { background: rgba(11,20,35,.92) !important; }
.brand-mark, .pdf-brand-mark, .home-brand-mark {
  border-radius: 11px !important;
  background: var(--ui-blue) !important;
  box-shadow: 0 7px 18px rgba(7,88,237,.16) !important;
}
.navcta, .home-nav-cta, .pdf-theme, .theme-toggle {
  min-height: 42px !important;
  border-radius: 10px !important;
  font-weight: 750 !important;
}
.theme-toggle { padding: 0 14px !important; }
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .home-page .theme-toggle {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-text) !important;
}
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .home-page .theme-toggle {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-text) !important;
}

/* Portal homepage: taller breathing room and a readable scroll narrative. */
.home-page .home-wrap { width: min(1280px, calc(100% - 64px)) !important; }
.home-page .sl-hero { padding-top: 108px !important; padding-bottom: 80px !important; }
.home-page .sl-hero-layout { gap: clamp(42px, 6vw, 84px) !important; }
.home-page .sl-hero h1 {
  font-size: clamp(54px, 6.6vw, 84px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.075em !important;
}
.home-page .sl-hero-lead { max-width: 650px !important; font-size: 18px !important; line-height: 1.85 !important; }
.home-page .sl-search { min-height: 62px !important; border-radius: 13px !important; }
.home-page .sl-button { min-height: 48px !important; border-radius: 10px !important; font-size: 13px !important; }
.home-page .sl-studios-section,
.home-page .sl-tools-section,
.home-page .sl-approach-section { padding-top: 88px !important; padding-bottom: 92px !important; }
.home-page .sl-section-head { margin-bottom: 34px !important; }
.home-page .sl-section-head h2,
.home-page .sl-approach-intro h2 { font-size: clamp(30px, 3.4vw, 42px) !important; letter-spacing: -.055em !important; }
.home-page .sl-section-head p,
.home-page .sl-approach-intro > p { max-width: 720px; font-size: 15px !important; line-height: 1.8 !important; }
.home-page .sl-studio-grid { gap: 22px !important; }
.home-page .sl-studio-card {
  min-height: 255px !important;
  padding: 27px !important;
  border-radius: 18px !important;
  box-shadow: 0 9px 28px rgba(20,43,82,.045) !important;
}
.home-page .sl-studio-card h3 { font-size: 21px !important; }
.home-page .sl-studio-card p { font-size: 14px !important; line-height: 1.8 !important; }
.home-page .home-tools-section.sl-tools-section {
  background: var(--ui-page-alt) !important;
  border-color: var(--ui-line) !important;
}
.home-page .sl-tools-count { border-radius: 14px !important; padding: 13px 18px !important; }
.home-page .sl-filter-row { gap: 9px !important; padding-bottom: 19px !important; }
.home-page .sl-filter-row .home-filter { min-height: 42px !important; padding: 10px 16px !important; font-size: 12px !important; }
.home-page .home-tool-grid { gap: 23px !important; }
.home-page .home-tool-card {
  min-height: 365px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(20,43,82,.045) !important;
}
.home-page .home-card-art { min-height: 162px !important; height: 162px !important; }
.home-page .home-card-body { padding: 24px !important; }
.home-page .home-tool-card h3 { font-size: 19px !important; line-height: 1.3 !important; }
.home-page .home-tool-card p { font-size: 13px !important; line-height: 1.8 !important; }
.home-page .sl-approach-grid { gap: 20px !important; }
.home-page .sl-approach-card { min-height: 205px; border-radius: 18px !important; padding: 26px !important; }
.home-page .sl-approach-card h3 { font-size: 18px !important; }
.home-page .sl-approach-card p { font-size: 14px !important; line-height: 1.8 !important; }
.home-page .home-footer { padding-top: 40px !important; }

/* Distinct studio identities use a subtle category accent with a unified blue CTA. */
.studio-home .shell { width: min(1240px, calc(100% - 64px)) !important; }
.studio-home .top { min-height: 86px !important; }
.studio-home .brand-mark { background: var(--accent, var(--ui-blue)) !important; color: #fff !important; }
.studio-home .hero {
  padding: 92px 0 76px !important;
  grid-template-columns: minmax(0,1.6fr) minmax(245px,.7fr) !important;
  gap: clamp(36px,5vw,72px) !important;
}
.studio-home .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 999px;
  background: var(--ui-surface-blue);
  color: var(--ui-blue) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
}
.studio-home .hero h1 {
  margin: 20px 0 22px !important;
  font-size: clamp(48px,6.2vw,76px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.07em !important;
}
.studio-home .lead { max-width: 760px !important; font-size: 18px !important; line-height: 1.85 !important; }
.studio-home .hero-note {
  padding: 28px !important;
  border: 1px solid #d8e5fb !important;
  border-radius: 19px !important;
  background: linear-gradient(145deg,#fff 0%,#f0f5ff 100%) !important;
  box-shadow: var(--ui-shadow) !important;
}
.studio-home .hero-note strong { font-size: 34px !important; color: var(--ui-blue) !important; }
.studio-home .hero-note span { font-size: 13px !important; line-height: 1.8 !important; }
:root[data-theme="dark"] .studio-home .hero-note {
  border-color: var(--ui-line) !important;
  background: linear-gradient(145deg,#172942 0%,#142238 100%) !important;
}
.studio-home .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:27px; }
.studio-home .hero-cta,
.studio-home .hero-secondary {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 19px; border:1px solid transparent; border-radius:10px;
  font-size:13px; font-weight:800; text-decoration:none;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.studio-home .hero-cta { background:var(--ui-blue); color:#fff; box-shadow:0 9px 22px rgba(7,88,237,.16); }
.studio-home .hero-cta:hover { background:var(--ui-blue-deep); transform:translateY(-1px); }
.studio-home .hero-secondary { border-color:var(--ui-line-strong); background:var(--ui-surface); color:var(--ui-text); }
.studio-home .hero-secondary:hover { border-color:var(--ui-blue); color:var(--ui-blue); }
.studio-home .trust-strip {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  margin:0 0 72px; padding:21px 24px;
  border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-surface);
  box-shadow:0 8px 24px rgba(20,43,82,.035);
}
.studio-home .trust-item { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.studio-home .trust-icon {
  display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px;
  border-radius:10px; background:var(--ui-blue-soft); color:var(--ui-blue); font-weight:900;
}
.studio-home .trust-item strong { display:block; margin:1px 0 4px; color:var(--ui-text); font-size:12px; }
.studio-home .trust-item span { display:block; color:var(--ui-muted); font-size:11px; line-height:1.6; }
.studio-home .section-head { margin:0 0 27px !important; }
.studio-home .section-head h2 { font-size:clamp(27px,3.1vw,36px) !important; letter-spacing:-.05em !important; }
.studio-home .section-head p { max-width:700px; font-size:14px !important; line-height:1.8 !important; }
.studio-home #tools { scroll-margin-top:100px; }
.studio-home .studio-search {
  min-height:62px !important; margin-bottom:28px !important; padding:0 20px !important;
  border:1px solid var(--ui-line-strong) !important; border-radius:12px !important;
  background:var(--ui-surface) !important; box-shadow:0 8px 24px rgba(20,43,82,.04) !important;
}
.studio-home .tool-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:22px !important; }
.studio-home .tool-card {
  position:relative; overflow:hidden;
  min-height:270px !important; padding:27px !important;
  border:1px solid var(--ui-line) !important; border-radius:18px !important;
  background:var(--ui-surface) !important;
  box-shadow:0 8px 26px rgba(20,43,82,.04) !important;
}
.studio-home .tool-card::before {
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--ui-blue),var(--ui-coral)); opacity:.82;
}
.studio-home .tool-card:hover {
  transform:translateY(-4px) !important;
  border-color:var(--ui-blue) !important;
  background:var(--ui-surface) !important;
  box-shadow:var(--ui-shadow-hover) !important;
}
.studio-home .card-top { margin-top:2px; font-size:10px !important; }
.studio-home .tool-card h2 { margin:32px 0 11px !important; font-size:22px !important; line-height:1.28 !important; }
.studio-home .tool-card p { margin-bottom:24px !important; font-size:13px !important; line-height:1.8 !important; }
.studio-home .card-link { padding-top:16px !important; font-size:13px !important; }
.studio-home .coming-section { margin-top:86px !important; padding-top:48px !important; }
.studio-home .coming-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:18px !important; }
.studio-home .coming-card {
  min-height:190px !important; padding:23px !important;
  border:1px solid var(--ui-line) !important; border-radius:16px !important;
  background:var(--ui-surface) !important;
}
.studio-home .coming-card .soon-label {
  display:inline-flex; align-items:center; padding:6px 9px;
  border:1px solid #f5d8d2; border-radius:999px;
  background:var(--ui-coral-soft); color:#b84f40 !important;
  letter-spacing:.08em !important;
}
:root[data-theme="dark"] .studio-home .coming-card .soon-label {
  border-color:#624047; color:#ffad9d !important;
}
.studio-home .how { margin:72px 0 90px !important; gap:18px !important; }
.studio-home .how-item {
  min-height:160px; padding:25px !important;
  border:1px solid var(--ui-line) !important; border-radius:17px !important;
  background:var(--ui-surface) !important;
}
.studio-home .how-item b { font-size:14px !important; }
.studio-home .how-item span { font-size:13px !important; line-height:1.8 !important; }
.studio-home footer.shell { padding:30px 0 46px !important; }

/* Make tool workspaces feel like one product family without altering controls or logic. */
.pdf-main { padding-top:54px !important; padding-bottom:94px !important; }
.pdf-intro, .image-tool-heading, .vm-heading, .srt-heading, .title-intro, .word-heading, .ratio-heading, .json-heading {
  padding-top:40px !important; padding-bottom:52px !important;
}
.pdf-intro h1, .image-tool-heading h1, .vm-heading h1, .srt-heading h1,
.title-intro h1, .word-heading h1, .ratio-heading h1, .json-heading h1 {
  font-size:clamp(44px,5.5vw,70px) !important; line-height:1.04 !important;
}
.pdf-lead, .image-tool-heading p, .vm-heading p, .srt-heading p, .title-intro p,
.word-heading p, .ratio-heading p, .json-heading p {
  max-width:720px; font-size:17px !important; line-height:1.85 !important;
}
.pdf-workspace, .image-workspace, .vm-workbench { gap:24px !important; }
.pdf-panel, .image-panel, .vm-panel, .workspace, .sidecard, .clip-panel,
.cp-panel, .srt-panel, .title-panel, .word-panel, .hash-panel, .ratio-panel, .json-panel {
  border-radius:18px !important; padding:30px !important;
  box-shadow:var(--ui-shadow) !important;
}
.pdf-dropzone, .image-dropzone {
  min-height:265px !important; border-radius:16px !important;
  background:var(--ui-surface-soft) !important;
}
.pdf-info-grid { gap:18px !important; margin:28px 0 48px !important; }
.pdf-info { padding:22px !important; border-radius:15px !important; }
.pdf-content-section {
  margin-top:48px !important; padding:36px !important; border-radius:19px !important;
}
.pdf-content-section h2 { font-size:28px !important; letter-spacing:-.04em !important; }
.pdf-content-section p { font-size:14px !important; line-height:1.85 !important; }
.image-results-section { margin-top:48px !important; }
.faq { margin-top:54px !important; padding:48px 0 !important; }
.faq h2 { font-size:30px !important; letter-spacing:-.045em !important; }
.faq details, .faq article { border-color:var(--ui-line) !important; }
.btn:not(.ghost), .image-button-primary, .pdf-button-primary, .vm-export,
.vm-upload-btn, .cp-button-primary, .srt-button-primary, .title-button-primary,
.word-button-primary, .hash-button-primary, .json-button-primary, .ratio-button-primary {
  background:var(--ui-blue) !important; border-color:var(--ui-blue) !important;
  border-radius:10px !important; box-shadow:0 8px 19px rgba(7,88,237,.14) !important;
}
:root[data-theme="dark"] .btn:not(.ghost),
:root[data-theme="dark"] .image-button-primary,
:root[data-theme="dark"] .pdf-button-primary,
:root[data-theme="dark"] .vm-export,
:root[data-theme="dark"] .vm-upload-btn {
  color:#0b1423 !important;
}
.note, .clip-note, .image-note, .pdf-note {
  border-radius:12px !important; background:var(--ui-blue-soft) !important;
}

/* Dark theme is fully supported across landing pages and the working area. */
:root[data-theme="dark"] .home-page .site-header { border-bottom-color:var(--ui-line) !important; }
:root[data-theme="dark"] .home-page .sl-hero {
  background:
    radial-gradient(ellipse at 84% 5%,rgba(75,124,210,.19),transparent 35%),
    radial-gradient(ellipse at 8% 80%,rgba(230,95,79,.08),transparent 37%),
    linear-gradient(180deg,#122039 0%,#0b1423 100%) !important;
}
:root[data-theme="dark"] .home-page .sl-studios-section,
:root[data-theme="dark"] .home-page .sl-approach-section,
:root[data-theme="dark"] .home-page .home-tools-section.sl-tools-section {
  background:var(--ui-page) !important;
  border-color:var(--ui-line) !important;
}
:root[data-theme="dark"] .home-page .sl-studio-card,
:root[data-theme="dark"] .home-page .home-tool-card,
:root[data-theme="dark"] .home-page .sl-approach-card,
:root[data-theme="dark"] .home-page .sl-tools-count,
:root[data-theme="dark"] .home-page .sl-hero-visual,
:root[data-theme="dark"] .home-page .sl-section-aside {
  background:var(--ui-surface) !important; border-color:var(--ui-line) !important;
  color:var(--ui-text) !important; box-shadow:var(--ui-shadow) !important;
}
:root[data-theme="dark"] .home-page .sl-feature-tool,
:root[data-theme="dark"] .home-page .sl-quick-tools a,
:root[data-theme="dark"] .home-page .home-filter {
  background:var(--ui-surface-soft) !important; border-color:var(--ui-line) !important;
  color:var(--ui-muted) !important;
}
:root[data-theme="dark"] .home-page .sl-search,
:root[data-theme="dark"] .home-page .sl-button-quiet {
  background:var(--ui-surface) !important; border-color:var(--ui-line-strong) !important;
  color:var(--ui-text) !important;
}
:root[data-theme="dark"] .home-page .sl-search input { color:var(--ui-text) !important; }
:root[data-theme="dark"] .home-page .home-footer { background:#080f1c !important; }
:root[data-theme="dark"] .studio-home .top-link,
:root[data-theme="dark"] .studio-home .theme-toggle,
:root[data-theme="dark"] .studio-home .studio-search,
:root[data-theme="dark"] .studio-home .tool-card,
:root[data-theme="dark"] .studio-home .coming-card,
:root[data-theme="dark"] .studio-home .how-item,
:root[data-theme="dark"] .studio-home .trust-strip {
  background:var(--ui-surface) !important; border-color:var(--ui-line) !important;
  color:var(--ui-text) !important; box-shadow:var(--ui-shadow) !important;
}
:root[data-theme="dark"] .studio-home .trust-icon {
  background:var(--ui-blue-soft) !important; color:var(--ui-blue) !important;
}
:root[data-theme="dark"] .studio-home .hero-secondary {
  background:var(--ui-surface) !important; border-color:var(--ui-line-strong) !important;
  color:var(--ui-text) !important;
}
:root[data-theme="dark"] .studio-home .hero-cta {
  background:var(--ui-blue) !important; color:#0b1423 !important;
}
:root[data-theme="dark"] .studio-home .tool-card::before {
  background:linear-gradient(90deg,var(--ui-blue),var(--ui-coral));
}
:root[data-theme="dark"] .pdf-tool-page,
:root[data-theme="dark"] .image-tool-page {
  background:var(--ui-page) !important; color:var(--ui-text) !important;
}
:root[data-theme="dark"] .pdf-panel,
:root[data-theme="dark"] .image-panel,
:root[data-theme="dark"] .vm-panel,
:root[data-theme="dark"] .workspace,
:root[data-theme="dark"] .sidecard,
:root[data-theme="dark"] .clip-panel,
:root[data-theme="dark"] .cp-panel,
:root[data-theme="dark"] .srt-panel,
:root[data-theme="dark"] .title-panel,
:root[data-theme="dark"] .word-panel,
:root[data-theme="dark"] .hash-panel,
:root[data-theme="dark"] .ratio-panel,
:root[data-theme="dark"] .json-panel,
:root[data-theme="dark"] .pdf-content-section,
:root[data-theme="dark"] .pdf-info {
  background:var(--ui-surface) !important; border-color:var(--ui-line) !important;
  color:var(--ui-text) !important; box-shadow:var(--ui-shadow) !important;
}
:root[data-theme="dark"] .pdf-dropzone,
:root[data-theme="dark"] .image-dropzone,
:root[data-theme="dark"] .vm-stage,
:root[data-theme="dark"] .vm-empty,
:root[data-theme="dark"] .vm-output-empty {
  background:var(--ui-surface-soft) !important; border-color:var(--ui-line-strong) !important;
}
:root[data-theme="dark"] .pdf-content-section h2,
:root[data-theme="dark"] .pdf-content-section h3,
:root[data-theme="dark"] .pdf-info b,
:root[data-theme="dark"] .workspace h1,
:root[data-theme="dark"] .workspace h2,
:root[data-theme="dark"] .workspace h3,
:root[data-theme="dark"] .image-panel h1,
:root[data-theme="dark"] .image-panel h2,
:root[data-theme="dark"] .image-panel h3 {
  color:var(--ui-text) !important;
}
:root[data-theme="dark"] .pdf-content-section p,
:root[data-theme="dark"] .pdf-info span,
:root[data-theme="dark"] .workspace p,
:root[data-theme="dark"] .image-panel p {
  color:var(--ui-muted) !important;
}

/* Responsive spacing and navigation. */
@media (max-width:1050px) {
  .studio-home .trust-strip { grid-template-columns:1fr; gap:13px; }
  .studio-home .tool-grid, .studio-home .coming-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:760px) {
  .home-page .home-wrap, .studio-home .shell { width:min(100% - 36px,720px) !important; }
  .home-page .sl-hero { padding-top:58px !important; padding-bottom:54px !important; }
  .home-page .sl-studios-section, .home-page .sl-tools-section, .home-page .sl-approach-section {
    padding-top:62px !important; padding-bottom:66px !important;
  }
  .home-page .sl-hero h1 { font-size:clamp(46px,11vw,66px) !important; }
  .studio-home .hero { grid-template-columns:1fr !important; padding:60px 0 42px !important; gap:26px !important; }
  .studio-home .hero h1 { font-size:clamp(44px,10vw,62px) !important; }
  .studio-home .trust-strip { margin-bottom:52px; padding:18px; }
  .studio-home .tool-grid, .studio-home .coming-grid { grid-template-columns:1fr !important; }
  .studio-home .tool-card { min-height:0 !important; padding:25px !important; }
  .studio-home .how { grid-template-columns:1fr !important; margin:54px 0 64px !important; }
  .pdf-intro, .image-tool-heading, .vm-heading, .srt-heading, .title-intro, .word-heading, .ratio-heading, .json-heading {
    padding-top:24px !important; padding-bottom:34px !important;
  }
  .pdf-panel, .image-panel, .vm-panel, .workspace, .sidecard, .clip-panel {
    padding:22px !important;
  }
  .pdf-content-section { padding:24px !important; }
}
@media (max-width:500px) {
  .home-page .sl-hero-actions { align-items:stretch; flex-direction:column; }
  .studio-home .hero-actions { align-items:stretch; flex-direction:column; }
  .studio-home .hero-actions a { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* Sarmaya spacious visual system and long-scroll infographic stories. */
.home-page .sl-studios-section,.home-page .sl-tools-section,.home-page .sl-approach-section,.home-page .sl-feature-section { background:var(--ui-page) !important; border-color:var(--ui-line) !important; }
.home-page .sl-hero { padding:clamp(72px,8vw,112px) 0 54px !important; background:radial-gradient(ellipse at 86% 10%,rgba(7,88,237,.11),transparent 33%),radial-gradient(ellipse at 9% 84%,rgba(230,95,79,.07),transparent 34%),linear-gradient(180deg,#fbfdff 0%,#f2f6fc 100%) !important; border-bottom:1px solid var(--ui-line) !important; }
.home-page .sl-hero h1 { color:var(--ui-text) !important; font-size:clamp(54px,6.2vw,82px) !important; line-height:1.02 !important; }
.home-page .sl-hero h1 span { color:var(--ui-blue) !important; background:none !important; -webkit-text-fill-color:var(--ui-blue) !important; }
.home-page .sl-eyebrow,.home-page .sl-section-kicker { color:var(--ui-blue) !important; }
.home-page .sl-hero-lead { color:var(--ui-muted) !important; font-size:17px !important; line-height:1.85 !important; }
.home-page .sl-proof-row,.home-page .sl-stat span,.home-page .sl-stat-note { color:var(--ui-muted) !important; }
.home-page .sl-proof-row i { color:var(--ui-success) !important; }
.home-page .sl-hero-visual { transform:none !important; border-color:var(--ui-line) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-shadow) !important; }
.home-page .sl-visual-top { color:var(--ui-muted) !important; border-color:var(--ui-line) !important; }
.home-page .sl-visual-heading h2,.home-page .sl-feature-tool-top b,.home-page .sl-quick-tools b { color:var(--ui-text) !important; }
.home-page .sl-visual-heading h2 em { color:var(--ui-blue) !important; }
.home-page .sl-mini-label,.home-page .sl-visual-foot,.home-page .sl-feature-tool-top small,.home-page .sl-quick-tools small,.home-page .sl-feature-tool-foot { color:var(--ui-muted) !important; }
.home-page .sl-feature-tool,.home-page .sl-quick-tools>a { border-color:var(--ui-line) !important; background:var(--ui-surface-soft) !important; }
.home-page .sl-floating-note { border-color:#cfe0ff !important; background:#edf4ff !important; color:#24406f !important; box-shadow:var(--ui-shadow) !important; }
.home-page .sl-stat { border-color:var(--ui-line) !important; }
.home-page .sl-stat strong { color:var(--ui-text) !important; }
.home-page .sl-section-head { margin-bottom:34px !important; }
.home-page .sl-section-head h2,.home-page .sl-approach-intro h2 { color:var(--ui-text) !important; font-size:clamp(37px,4.5vw,56px) !important; line-height:1.05 !important; }
.home-page .sl-section-head h2 em,.home-page .sl-approach-intro h2 em { color:var(--ui-blue) !important; }
.home-page .sl-section-head p,.home-page .sl-approach-intro>p { color:var(--ui-muted) !important; font-size:15px !important; line-height:1.8 !important; }
.home-page .sl-section-aside,.home-page .sl-studio-card,.home-page .sl-approach-card { background:var(--ui-surface) !important; border-color:var(--ui-line) !important; box-shadow:var(--ui-shadow) !important; }
.home-page .sl-section-aside b,.home-page .sl-studio-card h3,.home-page .sl-approach-card h3 { color:var(--ui-text) !important; }
.home-page .sl-section-aside small,.home-page .sl-studio-card p,.home-page .sl-approach-card p { color:var(--ui-muted) !important; }
.home-page .sl-studio-card-foot { border-color:var(--ui-line) !important; color:var(--ui-muted) !important; }
.home-page .sl-studio-host { color:var(--ui-subtle) !important; }
.home-page .sl-tools-section { padding:104px 0 110px !important; }
.home-page .sl-tools-count,.home-page .home-tool-card { background:var(--ui-surface) !important; border-color:var(--ui-line) !important; box-shadow:var(--ui-shadow) !important; }
.home-page .sl-tools-count span,.home-page .home-sort-note { color:var(--ui-muted) !important; }
.home-page .sl-filter-row { border-color:var(--ui-line) !important; }
.home-page .sl-filter-row .home-filter { min-height:40px !important; border-color:var(--ui-line-strong) !important; border-radius:10px !important; background:var(--ui-surface) !important; color:var(--ui-muted) !important; }
.home-page .sl-filter-row .home-filter.active { border-color:var(--ui-blue) !important; background:var(--ui-blue) !important; color:#fff !important; }
.home-page .home-tool-card h3 { color:var(--ui-text) !important; font-size:17px !important; }
.home-page .home-tool-card p { color:var(--ui-muted) !important; font-size:12px !important; line-height:1.8 !important; }
.home-page .home-card-category { color:var(--ui-blue) !important; }
.home-page .home-card-bottom { border-color:var(--ui-line) !important; }
.home-page .home-domain { color:var(--ui-success) !important; }
.home-page .home-domain small { color:var(--ui-subtle) !important; }
.home-page .home-card-bottom a { border-color:var(--ui-line) !important; background:var(--ui-blue-soft) !important; color:var(--ui-blue) !important; border-radius:9px !important; }
.home-page .home-no-results { border-color:var(--ui-line-strong) !important; color:var(--ui-muted) !important; }
.home-page .sl-approach-card { min-height:210px !important; padding:27px !important; }
.home-page .home-footer.sl-footer { border-color:var(--ui-line) !important; background:var(--ui-page-alt) !important; }
.home-page .home-footer,.home-page .home-footer p,.home-page .home-footer a,.home-page .home-footer-bottom { color:var(--ui-muted) !important; }
.home-page .home-footer .home-brand-name { color:var(--ui-text) !important; }

.home-page .sl-feature-section { padding:112px 0 118px !important; }
.home-page .sl-feature-heading { max-width:800px; margin:0 auto 34px; text-align:center; }
.home-page .sl-feature-heading h2 { margin:14px 0; color:var(--ui-text); font-size:clamp(40px,5vw,62px); line-height:1.04; letter-spacing:-.06em; }
.home-page .sl-feature-heading h2 em { color:var(--ui-blue); font-style:normal; }
.home-page .sl-feature-heading p { max-width:650px; margin:0 auto; color:var(--ui-muted); font-size:16px; line-height:1.85; }
.home-page .sl-feature-row { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(38px,6vw,82px); margin-top:82px; }
.home-page .sl-feature-row--reverse { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.home-page .sl-feature-row--reverse .sl-feature-copy { order:2; }
.home-page .sl-feature-row--reverse .sl-feature-art { order:1; }
.home-page .sl-feature-copy { max-width:500px; }
.home-page .sl-feature-kicker { color:var(--ui-blue); font-size:11px; font-weight:900; letter-spacing:.12em; }
.home-page .sl-feature-copy h3 { margin:17px 0 15px; color:var(--ui-text); font-size:clamp(30px,3.3vw,43px); line-height:1.12; letter-spacing:-.05em; }
.home-page .sl-feature-copy p { margin:0; color:var(--ui-muted); font-size:15px; line-height:1.9; }
.home-page .sl-feature-copy ul { display:grid; gap:10px; margin:22px 0 0; padding:0; list-style:none; }
.home-page .sl-feature-copy li { position:relative; padding-left:25px; color:var(--ui-text); font-size:13px; line-height:1.6; }
.home-page .sl-feature-copy li:before { content:"✓"; position:absolute; left:0; top:0; color:var(--ui-success); font-weight:900; }
.home-page .sl-feature-link { display:inline-flex; align-items:center; gap:9px; margin-top:26px; color:var(--ui-blue); font-size:13px; font-weight:850; text-decoration:none; }
.home-page .sl-feature-art { display:grid; place-items:center; min-width:0; min-height:340px; padding:24px; overflow:hidden; border:1px solid var(--ui-line); border-radius:27px; background:linear-gradient(140deg,#edf4ff 0%,#f8fbff 52%,#fff1ed 100%); box-shadow:var(--ui-shadow); }
.home-page .sl-feature-art svg { display:block; width:100%; max-width:560px; height:auto; }
.home-page .sl-feature-art--pdf { background:linear-gradient(140deg,#fff2ed 0%,#fffaf8 56%,#edf4ff 100%); }
.home-page .sl-feature-art--studios { background:linear-gradient(140deg,#eef8f5 0%,#f8fbff 55%,#f2efff 100%); }

.studio-home .shell { width:min(1220px,calc(100% - 56px)) !important; }
.studio-home .top { min-height:84px !important; }
.studio-home .hero { padding:92px 0 62px !important; gap:46px !important; }
.studio-home .hero h1 { font-size:clamp(48px,6vw,76px) !important; }
.studio-home .lead { font-size:18px !important; line-height:1.85 !important; }
.studio-home .hero-note { padding:29px !important; border-radius:20px !important; }
.studio-home .section-head { margin-top:26px !important; margin-bottom:34px !important; }
.studio-home .section-head h2 { font-size:clamp(31px,3.8vw,44px) !important; line-height:1.08 !important; }
.studio-home .tool-grid { gap:24px !important; }
.studio-home .tool-card { min-height:290px !important; padding:30px !important; }
.studio-home .feature-section { padding:104px 0 112px; border-top:1px solid var(--ui-line); }
.studio-home .feature-section .section-head { max-width:790px; margin:0 auto 40px !important; text-align:center; }
.studio-home .feature-section .section-head h2 { font-size:clamp(36px,4.8vw,56px) !important; }
.studio-home .story-stack { display:grid; gap:68px; }
.studio-home .studio-story-row { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(36px,6vw,80px); }
.studio-home .studio-story-row:nth-child(even) .studio-story-copy { order:2; }
.studio-home .studio-story-row:nth-child(even) .story-art { order:1; }
.studio-home .studio-story-copy h3 { margin:14px 0 13px; color:var(--ui-text); font-size:clamp(28px,3.3vw,40px); line-height:1.13; letter-spacing:-.05em; }
.studio-home .studio-story-copy p { color:var(--ui-muted); font-size:15px; line-height:1.9; }
.studio-home .story-eyebrow { color:var(--ui-blue); font-size:11px; font-weight:900; letter-spacing:.13em; }
.studio-home .story-art { display:grid; place-items:center; min-height:330px; padding:24px; overflow:hidden; border:1px solid var(--ui-line); border-radius:25px; background:linear-gradient(140deg,#edf4ff,#f8fbff 56%,#fff1ed); box-shadow:var(--ui-shadow); }
.studio-home .story-art svg { display:block; width:100%; max-width:540px; height:auto; }
.studio-home .story-points { display:grid; gap:9px; margin:20px 0 0; padding:0; list-style:none; }
.studio-home .story-points li { position:relative; padding-left:24px; color:var(--ui-text); font-size:13px; line-height:1.65; }
.studio-home .story-points li:before { content:"✓"; position:absolute; left:0; color:var(--ui-success); font-weight:900; }
.studio-home .story-action { display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:var(--ui-blue); font-size:13px; font-weight:850; text-decoration:none; }
:root[data-theme="dark"] .home-page .sl-feature-section,:root[data-theme="dark"] .home-page .sl-tools-section,:root[data-theme="dark"] .home-page .sl-studios-section,:root[data-theme="dark"] .home-page .sl-approach-section { background:var(--ui-page) !important; }
:root[data-theme="dark"] .home-page .sl-feature-heading h2,:root[data-theme="dark"] .home-page .sl-feature-copy h3,:root[data-theme="dark"] .home-page .sl-hero h1,:root[data-theme="dark"] .home-page .sl-section-head h2,:root[data-theme="dark"] .home-page .sl-approach-intro h2 { color:var(--ui-text) !important; }
:root[data-theme="dark"] .home-page .sl-feature-heading p,:root[data-theme="dark"] .home-page .sl-feature-copy p,:root[data-theme="dark"] .home-page .sl-feature-copy li { color:var(--ui-muted) !important; }
:root[data-theme="dark"] .home-page .sl-feature-art,:root[data-theme="dark"] .studio-home .story-art { background:linear-gradient(145deg,#142238,#182b46 58%,#302b3c) !important; border-color:var(--ui-line) !important; }
:root[data-theme="dark"] .studio-home .studio-story-copy h3,:root[data-theme="dark"] .studio-home .story-points li { color:var(--ui-text) !important; }
@media(max-width:900px) {
  .home-page .sl-feature-row,.studio-home .studio-story-row { grid-template-columns:1fr !important; gap:25px !important; margin-top:54px; }
  .home-page .sl-feature-row--reverse .sl-feature-copy,.home-page .sl-feature-row--reverse .sl-feature-art,.studio-home .studio-story-row:nth-child(even) .studio-story-copy,.studio-home .studio-story-row:nth-child(even) .story-art { order:initial !important; }
}
@media(max-width:760px) {
  .home-page .sl-feature-section,.studio-home .feature-section { padding:68px 0 76px !important; }
  .home-page .sl-feature-row { margin-top:48px; }
  .home-page .sl-feature-art,.studio-home .story-art { min-height:220px; padding:12px; border-radius:19px; }
  .studio-home .story-stack { gap:46px; }
  .studio-home .hero { padding:62px 0 46px !important; }
}


/* Page-specific free-intent SEO infographics: readable HTML, responsive flow diagrams. */
.seo-infographic {
  position:relative;
  margin:clamp(54px,7vw,92px) 0;
  padding:clamp(25px,4vw,48px);
  overflow:hidden;
  border:1px solid var(--ui-line);
  border-radius:26px;
  background:linear-gradient(145deg,var(--ui-surface),var(--ui-page-alt));
  box-shadow:var(--ui-shadow);
}
.seo-infographic:before {
  content:"";
  position:absolute;
  top:-110px;
  right:-90px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,88,237,.12),transparent 68%);
  pointer-events:none;
}
.seo-infographic-heading { position:relative; max-width:820px; margin-bottom:28px; }
.seo-infographic-eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--ui-blue); font-size:10px; font-weight:950; letter-spacing:.15em; text-transform:uppercase; }
.seo-infographic-heading h2 { margin:13px 0 12px; color:var(--ui-text); font-size:clamp(27px,3.5vw,42px); line-height:1.1; letter-spacing:-.045em; }
.seo-infographic-heading p,.seo-infographic-context { color:var(--ui-muted); font-size:14px; line-height:1.85; }
.seo-infographic-flow { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; counter-reset:seo-step; }
.seo-infographic-step { position:relative; display:flex; align-items:flex-start; gap:15px; min-height:145px; padding:20px; border:1px solid var(--ui-line); border-radius:17px; background:var(--ui-surface); }
.seo-step-number { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--ui-blue-soft); color:var(--ui-blue); font-size:11px; font-weight:950; }
.seo-infographic-step h3 { margin:2px 0 7px; color:var(--ui-text); font-size:15px; line-height:1.35; }
.seo-infographic-step p { margin:0; color:var(--ui-muted); font-size:12px; line-height:1.7; }
.seo-infographic-context { position:relative; margin:22px 0 0; padding:15px 18px; border-left:3px solid var(--ui-blue); border-radius:0 12px 12px 0; background:var(--ui-blue-soft); }
.seo-infographic-tools { position:relative; margin-top:26px; padding-top:23px; border-top:1px solid var(--ui-line); }
.seo-infographic-tools h3 { margin:0 0 14px; color:var(--ui-text); font-size:16px; }
.seo-infographic-tool-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; margin:0; padding:0; list-style:none; }
.seo-infographic-tool-links li { display:flex; flex-direction:column; gap:4px; min-width:0; padding:12px 14px; border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-surface); }
.seo-infographic-tool-links a { color:var(--ui-blue); font-size:13px; font-weight:850; text-decoration:none; }
.seo-infographic-tool-links a:hover { text-decoration:underline; text-underline-offset:3px; }
.seo-infographic-tool-links span { color:var(--ui-muted); font-size:11px; line-height:1.55; }
.home-page .sl-free-tools-infographic { padding:104px 0 112px; background:var(--ui-page-alt); border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); }
.home-page .sl-free-tools-head { max-width:790px; margin:0 auto 34px; text-align:center; }
.home-page .sl-free-tools-head .sl-section-kicker { color:var(--ui-blue); }
.home-page .sl-free-tools-head h2 { margin:14px 0; color:var(--ui-text); font-size:clamp(37px,4.5vw,55px); line-height:1.05; letter-spacing:-.05em; }
.home-page .sl-free-tools-head p { color:var(--ui-muted); font-size:15px; line-height:1.85; }
.home-page .sl-free-tools-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:32px 0; }
.home-page .sl-free-tools-flow>div { display:flex; gap:14px; align-items:flex-start; padding:20px; border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-surface); }
.home-page .sl-free-tools-flow>div>span { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:11px; background:var(--ui-blue-soft); color:var(--ui-blue); font-size:11px; font-weight:950; }
.home-page .sl-free-tools-flow b { display:block; color:var(--ui-text); font-size:14px; }
.home-page .sl-free-tools-flow small { display:block; margin-top:5px; color:var(--ui-muted); font-size:11px; line-height:1.6; }
.home-page .sl-free-tools-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.home-page .sl-free-tools-card { display:flex; flex-direction:column; min-height:205px; padding:23px; border:1px solid var(--ui-line); border-radius:18px; background:var(--ui-surface); box-shadow:var(--ui-shadow); text-decoration:none; transition:transform .18s ease,border-color .18s ease; }
.home-page .sl-free-tools-card:hover { transform:translateY(-3px); border-color:var(--ui-blue); }
.home-page .sl-free-tools-card small { color:var(--ui-blue); font-size:10px; font-weight:900; letter-spacing:.12em; }
.home-page .sl-free-tools-card h3 { margin:15px 0 8px; color:var(--ui-text); font-size:19px; line-height:1.25; }
.home-page .sl-free-tools-card p { margin:0 0 16px; color:var(--ui-muted); font-size:12px; line-height:1.75; }
.home-page .sl-free-tools-card span { margin-top:auto; color:var(--ui-blue); font-size:12px; font-weight:850; }
@media(max-width:900px) {
  .seo-infographic-flow,.home-page .sl-free-tools-flow { grid-template-columns:1fr; }
  .seo-infographic-step { min-height:0; }
  .home-page .sl-free-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px) {
  .seo-infographic { margin:44px 0; padding:22px; border-radius:19px; }
  .seo-infographic-tool-links,.home-page .sl-free-tools-grid { grid-template-columns:1fr; }
  .home-page .sl-free-tools-infographic { padding:66px 0 74px; }
  .home-page .sl-free-tools-card { min-height:0; }
}
:root[data-theme="dark"] .seo-infographic { background:linear-gradient(145deg,var(--ui-surface),var(--ui-page-alt)); }
:root[data-theme="dark"] .seo-infographic-step,:root[data-theme="dark"] .seo-infographic-tool-links li { background:var(--ui-surface); }